diff --git a/design-system/AGENTS.md b/design-system/AGENTS.md
index 5d6c846f1e..a65f055b98 100644
--- a/design-system/AGENTS.md
+++ b/design-system/AGENTS.md
@@ -48,6 +48,14 @@ For shared icon rendering or geometry changes, use the focused package checks:
 pnpm --dir design-system run build:ui && node --test design-system/packages/ui/tests/icon.test.mjs design-system/packages/ui/tests/icon-slots.test.mjs
 ```
 
+For composer geometry and queue anatomy, disclosure and status presentation:
+
+```bash
+pnpm --dir design-system run build:ui && node --test design-system/packages/ui/tests/chat-composer.test.mjs
+```
+
+These package contracts do not establish native rendering or live remote behavior.
+
 Do not use browser automation or mock screenshots as visual proof. Design Lab is the manual authoring surface; source, build, HTTP, and package checks do not establish final visual fidelity.
 
 For SplitView geometry, drag cancellation, and cached resize bounds:
diff --git a/design-system/packages/ui/src/flow-chat/composer/ChatComposerQueue.module.css b/design-system/packages/ui/src/flow-chat/composer/ChatComposerQueue.module.css
index bf80bc5d95..9126e6cddc 100644
--- a/design-system/packages/ui/src/flow-chat/composer/ChatComposerQueue.module.css
+++ b/design-system/packages/ui/src/flow-chat/composer/ChatComposerQueue.module.css
@@ -5,24 +5,38 @@
     min-inline-size: 0;
     inline-size: 100%;
     flex-direction: column;
-    gap: var(--openbitfun-space-2);
-    padding-block: var(--openbitfun-space-3);
-    padding-inline: var(--openbitfun-space-4);
-    border-radius: var(--openbitfun-radius-lg);
+    gap: var(--openbitfun-space-1);
+    padding: var(--openbitfun-space-1);
+    border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
+    border-radius: var(--openbitfun-control-composer-surface-radius);
+    container: composer-queue / inline-size;
     color: var(--openbitfun-color-content-primary);
     background: var(--openbitfun-color-surface-subtle);
     font-family:var(--openbitfun-type-body-md-font-family);
   }
 
+  /* A composer with a context bar already tints the tray around its input.
+     The queue joins that tray instead of stacking a second translucent card. */
+  :global([data-openbitfun-component="chat-composer"][data-has-context="true"]) .root {
+    margin-block-end: calc(-1 * var(--openbitfun-space-2));
+    padding-block-end: var(--openbitfun-space-3);
+    border-block-end: 0;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+    background: transparent;
+  }
+
   .header {
     display: flex;
     min-inline-size: 0;
+    min-block-size: var(--openbitfun-control-chat-composer-control-height);
     align-items: center;
     gap: var(--openbitfun-space-1);
+    padding-inline: var(--openbitfun-space-2);
     color: var(--openbitfun-color-content-secondary);
     font-size: var(--openbitfun-type-body-sm-font-size);
     font-weight: var(--openbitfun-type-body-md-font-weight);
-    line-height: var(--openbitfun-type-body-md-line-height);
+    line-height: var(--openbitfun-type-body-sm-line-height);
   }
 
   .header > :where(svg, img) {
@@ -32,6 +46,12 @@
     color: var(--openbitfun-color-content-muted);
   }
 
+  .toggle[data-openbitfun-component="button"][data-size] {
+    min-inline-size: 0;
+    padding-inline: 0;
+    color: inherit;
+  }
+
   .title {
     display: inline-flex;
     min-inline-size: 0;
@@ -53,18 +73,15 @@
   .list {
     display: flex;
     min-inline-size: 0;
-    /* Four standard message rows plus the three gaps between them. */
+    /* Four comfortable message rows before the tray scrolls. */
     max-block-size: calc(
-      var(--openbitfun-control-chat-composer-control-height) +
-      var(--openbitfun-control-chat-composer-control-height) +
-      var(--openbitfun-control-chat-composer-control-height) +
-      var(--openbitfun-control-chat-composer-control-height) +
-      var(--openbitfun-space-1) +
-      var(--openbitfun-space-1) +
-      var(--openbitfun-space-1)
+      var(--openbitfun-control-height-sm) +
+      var(--openbitfun-control-height-sm) +
+      var(--openbitfun-control-height-sm) +
+      var(--openbitfun-control-height-sm)
     );
     flex-direction: column;
-    gap: var(--openbitfun-space-1);
+    gap: 0;
     margin: 0;
     overflow-x: hidden;
     overflow-y: auto;
@@ -73,86 +90,138 @@
     list-style: none;
   }
 
+  .list[hidden] {
+    display: none;
+  }
+
   .item {
     box-sizing: border-box;
-    display: grid;
+    display: flex;
+    flex: 0 0 auto;
     min-inline-size: 0;
-    min-block-size: var(--openbitfun-control-chat-composer-control-height);
-    grid-template-columns: minmax(0, 1fr) auto auto;
+    min-block-size: var(--openbitfun-control-height-sm);
     align-items: center;
     gap: var(--openbitfun-space-2);
+    padding-inline: var(--openbitfun-space-2) var(--openbitfun-space-1);
+    border-radius: var(--openbitfun-radius-md);
     color: var(--openbitfun-color-content-primary);
   }
 
-  .item[data-openbitfun-state="sending"] {
-    opacity: var(--openbitfun-opacity-disabled);
+  /* The row, not a floating button cluster, is the unit being acted on. */
+  .item:focus-within {
+    background: var(--openbitfun-color-surface-subtle);
+  }
+
+  .leadingIcon {
+    display: inline-flex;
+    flex: 0 0 var(--openbitfun-space-5);
+    align-items: center;
+    justify-content: center;
+    color: var(--openbitfun-color-content-muted);
   }
 
   .content {
     display: flex;
+    flex: 1 1 0;
     min-inline-size: 0;
-    flex-direction: column;
-    gap: var(--openbitfun-space-1);
-    color: var(--openbitfun-color-content-secondary);
+    flex-flow: row wrap;
+    align-items: baseline;
+    gap: 0 var(--openbitfun-space-2);
+    color: var(--openbitfun-color-content-primary);
     font-size: var(--openbitfun-type-body-md-font-size);
     font-weight: var(--openbitfun-type-body-md-font-weight);
-    line-height: var(--openbitfun-type-body-md-line-height);
-    transition: color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
+    line-height: var(--openbitfun-type-body-sm-line-height);
   }
 
-  .item:hover .content,
-  .item:focus-within .content {
-    color: var(--openbitfun-color-content-primary);
+  /* Message text takes the line; status facts follow it and wrap below only
+     when the row is too narrow to hold both. */
+  :where(.content) > * {
+    flex: 1 1 8em;
+    min-inline-size: 0;
+  }
+
+  /* A truncated preview may be a tab stop so keyboard users can read its
+     full-text tooltip; it stays display-only. */
+  :where(.content) > :focus-visible {
+    border-radius: var(--openbitfun-radius-xs);
+    outline: var(--openbitfun-focus-width) solid var(--openbitfun-color-focus-ring);
+    outline-offset: var(--openbitfun-focus-offset);
+  }
+
+  /* Muted ink instead of row opacity keeps the status text legible. */
+  .item[data-openbitfun-state="sending"] .content {
+    color: var(--openbitfun-color-content-muted);
+  }
+
+  .status {
+    flex: 0 1 auto;
+    min-inline-size: 0;
+    color: var(--openbitfun-color-content-muted);
+    font-size: var(--openbitfun-type-meta-font-size);
+    line-height: var(--openbitfun-type-body-sm-line-height);
+    overflow-wrap: anywhere;
+  }
+
+  .status[data-openbitfun-tone="warning"] {
+    color: var(--openbitfun-color-status-warning-content);
+  }
+
+  .status[data-openbitfun-tone="danger"] {
+    color: var(--openbitfun-color-status-danger-content);
   }
 
   .attachmentBadge {
-    box-sizing: border-box;
     display: inline-flex;
-    min-inline-size: var(--openbitfun-control-chat-composer-control-height);
-    block-size: var(--openbitfun-control-chat-composer-control-height);
+    flex: 0 0 auto;
     align-items: center;
-    justify-content: center;
-    padding-inline: var(--openbitfun-space-2);
-    border-radius: var(--openbitfun-radius-pill);
-    color: var(--openbitfun-color-content-secondary);
-    background: var(--openbitfun-color-surface-raised);
-    font-size: var(--openbitfun-type-body-sm-font-size);
-    font-weight: var(--openbitfun-type-label-lg-font-weight);
+    gap: var(--openbitfun-space-1);
+    color: var(--openbitfun-color-content-muted);
+    font-size: var(--openbitfun-type-meta-font-size);
     font-variant-numeric: tabular-nums;
     line-height: var(--openbitfun-type-modifier-leading-none-line-height);
   }
 
   .actions {
     display: inline-flex;
+    flex: 0 0 auto;
     min-inline-size: 0;
     align-items: center;
     gap: var(--openbitfun-space-1);
-    transition: opacity var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
+  }
+
+  /* The tray stays quiet without making its controls disappear. */
+  .actions [data-openbitfun-component="button"][data-openbitfun-variant="text"] {
+    color: var(--openbitfun-color-content-secondary);
+    padding-inline: var(--openbitfun-space-2);
   }
 
   @media (hover: hover) and (pointer: fine) {
-    .actions {
-      pointer-events: none;
-      opacity: 0;
+    .item:hover {
+      background: var(--openbitfun-color-surface-subtle);
     }
+  }
 
-    .item:hover .actions,
-    .item:focus-within .actions {
-      pointer-events: auto;
-      opacity: 1;
+  @container composer-queue (max-width: 22rem) {
+    .actions [data-openbitfun-component="button"] [data-openbitfun-part="label"] {
+      display: none;
     }
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .content,
-    .actions {
-      transition: none;
+  @media (pointer: coarse) {
+    .actions [data-openbitfun-component="button"] {
+      min-block-size: var(--openbitfun-control-height-sm);
+    }
+
+    .actions [data-openbitfun-component="icon-button"] {
+      inline-size: var(--openbitfun-control-height-sm);
+      block-size: var(--openbitfun-control-height-sm);
+      min-inline-size: var(--openbitfun-control-height-sm);
+      min-block-size: var(--openbitfun-control-height-sm);
     }
   }
 
   @media (forced-colors: active) {
-    .root,
-    .attachmentBadge {
+    .root {
       border: var(--openbitfun-border-width-default) solid CanvasText;
     }
   }
diff --git a/design-system/packages/ui/src/flow-chat/composer/ChatComposerQueue.tsx b/design-system/packages/ui/src/flow-chat/composer/ChatComposerQueue.tsx
index 798b3022d7..1652f06ff3 100644
--- a/design-system/packages/ui/src/flow-chat/composer/ChatComposerQueue.tsx
+++ b/design-system/packages/ui/src/flow-chat/composer/ChatComposerQueue.tsx
@@ -1,3 +1,5 @@
+import { Button, type ButtonProps } from "../../components/Button";
+import { Icon } from "../../components/Icon";
 import { OverflowText } from '../../primitives/OverflowText';
 import {
   forwardRef,
@@ -24,20 +26,35 @@ export interface ChatComposerQueueTitleProps
   count?: ReactNode;
 }
 
+export interface ChatComposerQueueToggleProps
+  extends Omit<ButtonProps, "aria-expanded" | "labelBehavior" | "leadingIcon" | "size" | "trailingIcon" | "variant"> {
+  expanded: boolean;
+}
+
 export interface ChatComposerQueueListProps
   extends HTMLAttributes<HTMLUListElement> {}
 
 export interface ChatComposerQueueItemProps
   extends LiHTMLAttributes<HTMLLIElement> {
   state?: ChatComposerQueueItemState;
+  leadingIcon?: ReactNode;
 }
 
 export interface ChatComposerQueueItemContentProps
   extends HTMLAttributes<HTMLDivElement> {}
 
+export type ChatComposerQueueItemStatusTone = "neutral" | "warning" | "danger";
+
+export interface ChatComposerQueueItemStatusProps
+  extends HTMLAttributes<HTMLSpanElement> {
+  tone?: ChatComposerQueueItemStatusTone;
+}
+
 export interface ChatComposerQueueAttachmentBadgeProps
   extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
   count: number;
+  /** Supply a real icon from the consumer's icon library. */
+  icon?: ReactNode;
   label: string;
 }
 
@@ -102,6 +119,25 @@ export const ChatComposerQueueTitle = forwardRef<
   );
 });
 
+/** Disclosure for the message list; wrap a ChatComposerQueueTitle as its label. */
+export const ChatComposerQueueToggle = forwardRef<
+  HTMLButtonElement,
+  ChatComposerQueueToggleProps
+>(function ChatComposerQueueToggle({ className, expanded, ...props }, ref) {
+  return (
+    <Button
+      {...props}
+      aria-expanded={expanded}
+      className={classNames(styles.toggle, className)}
+      labelBehavior="static"
+      ref={ref}
+      size="xs"
+      trailingIcon={<Icon name={expanded ? "chevron-down" : "chevron-up"} size="xs" />}
+      variant="text"
+    />
+  );
+});
+
 export const ChatComposerQueueList = forwardRef<
   HTMLUListElement,
   ChatComposerQueueListProps
@@ -120,7 +156,7 @@ export const ChatComposerQueueList = forwardRef<
 export const ChatComposerQueueItem = forwardRef<
   HTMLLIElement,
   ChatComposerQueueItemProps
->(function ChatComposerQueueItem({ className, state = "default", ...props }, ref) {
+>(function ChatComposerQueueItem({ children, className, leadingIcon, state = "default", ...props }, ref) {
   return (
     <li
       {...props}
@@ -129,7 +165,10 @@ export const ChatComposerQueueItem = forwardRef<
       data-openbitfun-part="item"
       data-openbitfun-state={state === "default" ? undefined : state}
       ref={ref}
-    />
+    >
+      {leadingIcon && <span className={styles.leadingIcon} data-openbitfun-part="leading-icon" aria-hidden="true">{leadingIcon}</span>}
+      {children}
+    </li>
   );
 });
 
@@ -148,11 +187,28 @@ export const ChatComposerQueueItemContent = forwardRef<
   );
 });
 
+/** A fact about one message, such as its delivery state or a failure reason. */
+export const ChatComposerQueueItemStatus = forwardRef<
+  HTMLSpanElement,
+  ChatComposerQueueItemStatusProps
+>(function ChatComposerQueueItemStatus({ className, tone = "neutral", ...props }, ref) {
+  return (
+    <span
+      {...props}
+      className={classNames(styles.status, className)}
+      data-openbitfun-component="chat-composer-queue"
+      data-openbitfun-part="status"
+      data-openbitfun-tone={tone}
+      ref={ref}
+    />
+  );
+});
+
 /** Per-message attachment count; this is intentionally distinct from queue position. */
 export const ChatComposerQueueAttachmentBadge = forwardRef<
   HTMLSpanElement,
   ChatComposerQueueAttachmentBadgeProps
->(function ChatComposerQueueAttachmentBadge({ className, count, label, ...props }, ref) {
+>(function ChatComposerQueueAttachmentBadge({ className, count, icon, label, ...props }, ref) {
   if (!Number.isFinite(count) || count <= 0) {
     return null;
   }
@@ -161,12 +217,14 @@ export const ChatComposerQueueAttachmentBadge = forwardRef<
     <span
       {...props}
       aria-label={label}
+      role="img"
       className={classNames(styles.attachmentBadge, className)}
       data-openbitfun-component="chat-composer-queue"
       data-openbitfun-part="attachmentCount"
       ref={ref}
       title={label}
     >
+      {icon}
       {Math.trunc(count)}
     </span>
   );
diff --git a/design-system/packages/ui/src/flow-chat/composer/index.ts b/design-system/packages/ui/src/flow-chat/composer/index.ts
index b2672e215d..657ba334d4 100644
--- a/design-system/packages/ui/src/flow-chat/composer/index.ts
+++ b/design-system/packages/ui/src/flow-chat/composer/index.ts
@@ -16,15 +16,20 @@ export {
   ChatComposerQueueItem,
   ChatComposerQueueItemActions,
   ChatComposerQueueItemContent,
+  ChatComposerQueueItemStatus,
   ChatComposerQueueList,
   ChatComposerQueueTitle,
+  ChatComposerQueueToggle,
   type ChatComposerQueueAttachmentBadgeProps,
   type ChatComposerQueueHeaderProps,
   type ChatComposerQueueItemActionsProps,
   type ChatComposerQueueItemContentProps,
   type ChatComposerQueueItemProps,
   type ChatComposerQueueItemState,
+  type ChatComposerQueueItemStatusProps,
+  type ChatComposerQueueItemStatusTone,
   type ChatComposerQueueListProps,
   type ChatComposerQueueProps,
   type ChatComposerQueueTitleProps,
+  type ChatComposerQueueToggleProps,
 } from "./ChatComposerQueue";
diff --git a/design-system/packages/ui/tests/chat-composer.test.mjs b/design-system/packages/ui/tests/chat-composer.test.mjs
index f9954d7afe..e64161b86e 100644
--- a/design-system/packages/ui/tests/chat-composer.test.mjs
+++ b/design-system/packages/ui/tests/chat-composer.test.mjs
@@ -14,8 +14,10 @@ import {
   ChatComposerQueueItem,
   ChatComposerQueueItemActions,
   ChatComposerQueueItemContent,
+  ChatComposerQueueItemStatus,
   ChatComposerQueueList,
   ChatComposerQueueTitle,
+  ChatComposerQueueToggle,
   ChatComposerStartActions,
 } from "../dist/flow-chat.js";
 
@@ -100,7 +102,7 @@ test("ChatComposer exposes a neutral pending-message queue with per-message atta
       null,
       createElement(
         ChatComposerQueueItem,
-        { state: "default" },
+        { state: "default", leadingIcon: createElement("svg", { "data-queue-mark": true }) },
         createElement(
           ChatComposerQueueItemContent,
           null,
@@ -136,6 +138,44 @@ test("ChatComposer exposes a neutral pending-message queue with per-message atta
   assert.ok(attachmentBadge);
   assert.match(attachmentBadge, /aria-label="3 image attachments"/);
   assert.match(markup, /aria-label="Send now"/);
+  assert.match(markup, /data-openbitfun-part="leading-icon" aria-hidden="true"><svg data-queue-mark="true"/);
+});
+
+test("ChatComposer queue exposes a disclosure toggle and toned per-message status", () => {
+  const markup = renderToStaticMarkup(
+    createElement(
+      ChatComposerQueue,
+      null,
+      createElement(
+        ChatComposerQueueHeader,
+        null,
+        createElement(
+          ChatComposerQueueToggle,
+          { "aria-controls": "queue-list", expanded: false },
+          createElement(ChatComposerQueueTitle, { count: 2 }, "Queued"),
+        ),
+      ),
+      createElement(
+        ChatComposerQueueList,
+        { hidden: true, id: "queue-list" },
+        createElement(
+          ChatComposerQueueItem,
+          { state: "failed" },
+          createElement(
+            ChatComposerQueueItemContent,
+            null,
+            "Message",
+            createElement(ChatComposerQueueItemStatus, { tone: "danger" }, "Send failed"),
+          ),
+        ),
+      ),
+    ),
+  );
+
+  assert.match(markup, /<button[^>]*aria-expanded="false"[^>]*aria-controls="queue-list"|<button[^>]*aria-controls="queue-list"[^>]*aria-expanded="false"/);
+  assert.match(markup, /<ul[^>]*hidden=""[^>]*id="queue-list"|<ul[^>]*id="queue-list"[^>]*hidden=""/);
+  assert.match(markup, /data-openbitfun-part="status"[^>]*data-openbitfun-tone="danger"[^>]*>Send failed</);
+  assert.match(markup, /data-openbitfun-state="failed"/);
 });
 
 test("ChatComposer queue keeps four message rows visible before scrolling", async () => {
@@ -149,44 +189,31 @@ test("ChatComposer queue keeps four message rows visible before scrolling", asyn
   const maxBlockSize = listRule.match(/max-block-size:\s*calc\((.*?)\);/s)?.[1];
   assert.ok(maxBlockSize);
   assert.equal(
-    (maxBlockSize.match(/--openbitfun-control-chat-composer-control-height/g) ?? []).length,
+    (maxBlockSize.match(/--openbitfun-control-height-sm/g) ?? []).length,
     4,
   );
-  assert.equal((maxBlockSize.match(/--openbitfun-space-1/g) ?? []).length, 3);
+  assert.match(listRule, /gap:\s*0;/);
+  assert.match(styles, /\.item\s*\{[^}]*min-block-size:\s*var\(--openbitfun-control-height-sm\)/s);
   assert.match(listRule, /overflow-y:\s*auto/);
   assert.match(listRule, /overscroll-behavior-y:\s*contain/);
 });
 
-test("ChatComposer queue reveals row actions on hover and keyboard focus", async () => {
-  const styles = await readFile(
-    new URL("../src/flow-chat/composer/ChatComposerQueue.module.css", import.meta.url),
-    "utf8",
-  );
-
-  assert.match(styles, /@media \(hover: hover\) and \(pointer: fine\)/);
-  assert.match(
-    styles,
-    /\.actions\s*\{[^}]*pointer-events:\s*none;[^}]*opacity:\s*0;/s,
-  );
-  assert.match(
-    styles,
-    /\.item:hover \.actions,\s*\.item:focus-within \.actions\s*\{[^}]*pointer-events:\s*auto;[^}]*opacity:\s*1;/s,
-  );
-});
-
-test("ChatComposer queue promotes message text from secondary to primary on interaction", async () => {
+test("ChatComposer queue keeps actions visible and message ink primary", async () => {
   const styles = await readFile(
     new URL("../src/flow-chat/composer/ChatComposerQueue.module.css", import.meta.url),
     "utf8",
   );
+  const actionsRule = styles.match(/\.actions\s*\{[^}]*\}/s)?.[0];
   const contentRule = styles.match(/\.content\s*\{[^}]*\}/s)?.[0];
-
+  assert.ok(actionsRule);
   assert.ok(contentRule);
-  assert.match(contentRule, /color:\s*var\(--openbitfun-color-content-secondary\)/);
-  assert.match(
-    styles,
-    /\.item:hover \.content,\s*\.item:focus-within \.content\s*\{[^}]*color:\s*var\(--openbitfun-color-content-primary\)/s,
-  );
+  assert.match(actionsRule, /display:\s*inline-flex/);
+  assert.doesNotMatch(styles, /pointer-events:\s*none|opacity:\s*0(?:;|\s)/);
+  assert.match(contentRule, /color:\s*var\(--openbitfun-color-content-primary\)/);
+  assert.match(styles, /@media \(hover: hover\) and \(pointer: fine\)/);
+  assert.match(styles, /\.item:focus-within\s*\{[^}]*background:/s);
+  assert.match(styles, /@container composer-queue \(max-width: 22rem\)/);
+  assert.match(styles, /\[data-openbitfun-part="label"\]\s*\{\s*display: none;/);
 });
 
 test("ChatComposer queue never changes the input surface geometry", async () => {
diff --git a/src/web-ui/AGENTS.md b/src/web-ui/AGENTS.md
index 7e85877ab3..56ca3c6b05 100644
--- a/src/web-ui/AGENTS.md
+++ b/src/web-ui/AGENTS.md
@@ -379,6 +379,16 @@ These DOM and transport fixtures cover local and simulated Peer surfaces,
 including old-host gating and stale-device completions. They do not establish
 live SSH, relay remote control or detached-dispatch behavior.
 
+For composer queue disclosure, recovery rows, keyboard previews, sending states,
+draft restoration and transcript ownership:
+
+```bash
+pnpm --dir src/web-ui run test:run src/flow_chat/components/HostPendingQueuePanel.test.tsx src/flow_chat/components/PendingQueuePanel.test.tsx src/flow_chat/utils/pendingQueueDraft.test.ts src/flow_chat/utils/pendingQueuePresentation.test.ts src/flow_chat/timeline/useHostQueueTimeline.test.tsx src/flow_chat/timeline/hostQueueProjection.test.ts
+```
+
+These DOM/store fixtures include simulated host recovery and Peer surface changes;
+they do not establish native visual fidelity or live remote behavior.
+
 For Markdown Mermaid rendering states and supported syntax:
 
 ```bash
diff --git a/src/web-ui/src/flow_chat/components/HostPendingQueuePanel.scss b/src/web-ui/src/flow_chat/components/HostPendingQueuePanel.scss
index c361b0232a..59012cc1b2 100644
--- a/src/web-ui/src/flow_chat/components/HostPendingQueuePanel.scss
+++ b/src/web-ui/src/flow_chat/components/HostPendingQueuePanel.scss
@@ -1,36 +1,26 @@
+// Geometry, rows, status tones and action layout come from ChatComposerQueue.
+// This file only lays out the host-specific help and error notes.
 .host-pending-queue {
-  padding: var(--openbitfun-space-2) var(--openbitfun-space-3);
-  gap: var(--openbitfun-space-1);
-  font-size: var(--openbitfun-type-body-sm-font-size);
-
-  [data-openbitfun-component='chat-composer-queue'][data-openbitfun-part='header'] {
-    justify-content: space-between;
-  }
-  &__toggle { padding: 0; color: var(--openbitfun-color-content-secondary); }
-  &__note, &__error {
+  &__note,
+  &__error {
     margin: 0;
-    font-size: var(--openbitfun-type-body-sm-font-size);
+    padding-inline: var(--openbitfun-space-2);
+    font-size: var(--openbitfun-type-meta-font-size);
     line-height: var(--openbitfun-type-body-sm-line-height);
     color: var(--openbitfun-color-content-secondary);
     overflow-wrap: anywhere;
   }
-  [data-openbitfun-component='chat-composer-queue'][data-openbitfun-part='list'][hidden] { display: none; }
-  [data-openbitfun-component='chat-composer-queue'][data-openbitfun-part='item'] {
-    flex-shrink: 0;
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
-  [data-openbitfun-component='chat-composer-queue'][data-openbitfun-part='content'] {
-    font-size: var(--openbitfun-type-body-sm-font-size);
-    line-height: var(--openbitfun-type-body-sm-line-height);
-    gap: 0;
-  }
-  [data-openbitfun-component='chat-composer-queue'][data-openbitfun-part='actions'] {
-    opacity: 1;
-    pointer-events: auto;
-    gap: var(--openbitfun-space-1);
+
+  &__error {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: var(--openbitfun-space-2);
+    color: var(--openbitfun-color-status-danger-content);
   }
-  &__status {
-    font-size: var(--openbitfun-type-meta-font-size);
-    color: var(--openbitfun-color-content-muted);
+
+  &__error-text {
+    flex: 1 1 12em;
+    min-width: 0;
   }
 }
diff --git a/src/web-ui/src/flow_chat/components/HostPendingQueuePanel.test.tsx b/src/web-ui/src/flow_chat/components/HostPendingQueuePanel.test.tsx
index 60680a97d3..f273d4fdf1 100644
--- a/src/web-ui/src/flow_chat/components/HostPendingQueuePanel.test.tsx
+++ b/src/web-ui/src/flow_chat/components/HostPendingQueuePanel.test.tsx
@@ -8,6 +8,13 @@ import { HostPendingQueuePanel } from './HostPendingQueuePanel';
 vi.mock('@/infrastructure/i18n', () => ({ useI18n: () => ({ t: (key: string) => key }) }));
 vi.mock('../services/flow-chat-manager/PendingQueueModule', () => ({ pendingQueueManager: { enqueue: vi.fn() } }));
 
+async function selectQueueMenuAction(container: HTMLElement, action: 'edit' | 'collapse') {
+  await act(async () => container.querySelector<HTMLButtonElement>('[aria-label="pendingQueue.actions.more"]')!.click());
+  const item = document.querySelector<HTMLButtonElement>(`[role="menu"]:not([aria-hidden="true"]) [data-menu-id="${action}"]`);
+  expect(item).not.toBeNull();
+  await act(async () => item!.click());
+}
+
 it.each([false, true])('keeps a normal send hidden and shows recovery only on failure (failure=%s)', async failure => {
   const records = new Map<string, QueueOutboxRecord>();
   let finish!: () => void;
@@ -77,8 +84,9 @@ it('keeps four queued messages compact, exposes actions, and toggles help indepe
     expect(container.textContent).not.toContain('hostQueue.memoryNotice');
     expect(container.textContent).not.toContain('hostQueue.queued');
     expect(container.querySelectorAll('[aria-label="hostQueue.sendNow"]')).toHaveLength(4);
+    expect(container.querySelector('[data-openbitfun-part="header"]')).toBeNull();
+    await selectQueueMenuAction(container, 'collapse');
     const toggle = container.querySelector<HTMLButtonElement>('.host-pending-queue__toggle')!;
-    await act(async () => toggle.click());
     expect(container.querySelector('ul')?.hidden).toBe(true);
     await act(async () => container.querySelector<HTMLButtonElement>('[aria-label="hostQueue.about"]')!.click());
     expect(container.textContent).toContain('hostQueue.memoryNotice');
@@ -126,3 +134,133 @@ it('copies the complete unresolved draft after an owner restart without resendin
     container.remove();
   }
 });
+
+const queueItem = (turnId: string, status: 'queued' | 'blocked', displayContent = `message ${turnId}`) => ({
+  turnId, displayContent, status, previewTruncated: false, attachmentCount: 0, agentType: 'Standard', createdAtMs: 1,
+  reason: status === 'blocked' ? 'owner restarted' : null, targetTurnId: null, steeringId: null });
+
+it('collapses the controlled list and keeps blocked and unconfirmed rows in a recovery list', async () => {
+  const unconfirmed: QueueOutboxRecord = { key: 'draft', scope: 'scope', accepted: true,
+    request: { sessionId: 'session', queueEpoch: 'old-owner', action: 'submit',
+      message: { turnId: 'lost', content: 'lost prompt', displayContent: 'lost prompt',
+        agentType: 'Standard', attachments: [], metadata: {} } } };
+  const records = new Map([[unconfirmed.key, unconfirmed]]);
+  const queue = new HostDialogQueue('scope', 'session', async () => ({ sessionId: 'session', queueEpoch: 'epoch',
+    revision: 1, activeTurnId: 'active', items: [queueItem('a', 'queued'), queueItem('b', 'blocked')], capacity: 20, used: 2,
+    receipt: null }), { list: async () => [...records.values()], put: async record => { records.set(record.key, record); },
+    remove: async key => { records.delete(key); } });
+  const container = document.createElement('div');
+  document.body.append(container);
+  const root = createRoot(container);
+  try {
+    await act(async () => root.render(<HostPendingQueuePanel queue={queue} onRestore={() => true} />));
+    await act(async () => { await queue.refresh(); });
+    const controlled = container.querySelector<HTMLUListElement>('ul')!;
+    const count = () => container.querySelector('[data-openbitfun-part="totalCount"]')?.textContent;
+    expect(controlled.hidden).toBe(false);
+    expect([...controlled.querySelectorAll('li')].map(row => row.textContent)).toEqual([
+      expect.stringContaining('message a'), expect.stringContaining('message b'), expect.stringContaining('lost prompt'),
+    ]);
+    await selectQueueMenuAction(container, 'collapse');
+    const toggle = container.querySelector<HTMLButtonElement>('.host-pending-queue__toggle')!;
+    expect(toggle.getAttribute('aria-controls')).toBe(controlled.id);
+    expect(document.activeElement).toBe(toggle);
+    expect(toggle.getAttribute('aria-expanded')).toBe('false');
+    expect(controlled.hidden).toBe(true);
+    expect(controlled.querySelectorAll('li')).toHaveLength(0);
+    expect(count()).toBe('3');
+    const recovery = [...container.querySelectorAll('ul')].filter(list => list !== controlled);
+    expect(recovery).toHaveLength(1);
+    expect(recovery[0].hidden).toBe(false);
+    const rows = recovery[0].querySelectorAll('li');
+    expect([...rows].map(row => row.textContent)).toEqual([
+      expect.stringContaining('hostQueue.blocked'), expect.stringContaining('hostQueue.unknown'),
+    ]);
+    expect(rows[0].querySelector('[aria-label="hostQueue.cancel"]')).not.toBeNull();
+    expect(rows[1].querySelector('[aria-label="hostQueue.checkRetry"]')).not.toBeNull();
+    expect(container.textContent).not.toContain('message a');
+    await act(async () => rows[0].querySelector<HTMLButtonElement>('[aria-label="pendingQueue.actions.more"]')!.click());
+    expect(document.querySelector('[role="menu"]:not([aria-hidden="true"]) [data-menu-id="collapse"]')).toBeNull();
+    await act(async () => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })));
+
+
+    await act(async () => toggle.click());
+    expect(controlled.hidden).toBe(false);
+    expect(controlled.querySelectorAll('li')).toHaveLength(3);
+    expect(container.querySelectorAll('ul')).toHaveLength(1);
+    expect(document.activeElement).toBe(controlled.querySelector('[data-openbitfun-product-part="preview"]'));
+  } finally {
+    await act(async () => root.unmount());
+    container.remove();
+  }
+});
+
+it('lets keyboard users read a truncated preview without starting an edit', async () => {
+  vi.useFakeTimers();
+  vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => setTimeout(() => callback(0), 0));
+  vi.stubGlobal('cancelAnimationFrame', clearTimeout);
+  const revealTooltip = () => {
+    act(() => vi.advanceTimersByTime(500));
+    act(() => vi.advanceTimersByTime(20));
+  };
+  const longText = 'Summarize the migration plan and list every follow-up owner';
+  const requests: string[] = [];
+  const queue = new HostDialogQueue('scope', 'session', async request => {
+    requests.push(request.action);
+    return { sessionId: 'session', queueEpoch: 'epoch', revision: 1, activeTurnId: 'active',
+      items: [queueItem('a', 'queued', longText)], capacity: 20, used: 1, receipt: null };
+  }, { list: async () => [], put: async () => {}, remove: async () => {} });
+  const onRestore = vi.fn(() => true);
+  vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function (this: HTMLElement) {
+    return this.hasAttribute('data-overflow') ? 100 : 0;
+  });
+  vi.spyOn(HTMLElement.prototype, 'scrollWidth', 'get').mockImplementation(function (this: HTMLElement) {
+    return this.hasAttribute('data-overflow') || this.hasAttribute('data-overflow-content')
+      ? (this.textContent?.length ?? 0) * 8 : 0;
+  });
+  const container = document.createElement('div');
+  document.body.append(container);
+  const root = createRoot(container);
+  try {
+    await act(async () => root.render(<HostPendingQueuePanel queue={queue} onRestore={onRestore} />));
+    await act(async () => { await queue.refresh(); });
+    act(() => vi.advanceTimersByTime(1));
+    const preview = container.querySelector<HTMLElement>('[data-openbitfun-product-part="preview"]')!;
+    expect(preview.tabIndex).toBe(0);
+    expect(preview.getAttribute('role')).toBeNull();
+    expect(preview.getAttribute('data-overflow')).toBe('true');
+    const requestCount = requests.length;
+
+    await act(async () => preview.focus());
+    expect(document.activeElement).toBe(preview);
+    revealTooltip();
+    const tooltips = document.querySelectorAll('[role="tooltip"]');
+    expect(tooltips).toHaveLength(1);
+    expect(tooltips[0].textContent).toBe(longText);
+
+    await act(async () => {
+      preview.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+      preview.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
+      preview.click();
+    });
+    expect(onRestore).not.toHaveBeenCalled();
+    expect(requests).toHaveLength(requestCount);
+    expect(container.querySelectorAll('li')).toHaveLength(1);
+
+    // Leaving the preview dismisses its tooltip; an action's own (hover)
+    // tooltip then shows alone instead of stacking with the preview's.
+    const send = container.querySelector<HTMLButtonElement>('[aria-label="hostQueue.sendNow"]')!;
+    await act(async () => send.focus());
+    revealTooltip();
+    expect(document.querySelectorAll('[role="tooltip"]')).toHaveLength(0);
+    await act(async () => { send.dispatchEvent(new MouseEvent('mouseover', { bubbles: true })); });
+    revealTooltip();
+    expect([...document.querySelectorAll('[role="tooltip"]')].map(tooltip => tooltip.textContent)).toEqual(['hostQueue.sendNow']);
+  } finally {
+    await act(async () => root.unmount());
+    container.remove();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+    vi.useRealTimers();
+  }
+});
diff --git a/src/web-ui/src/flow_chat/components/HostPendingQueuePanel.tsx b/src/web-ui/src/flow_chat/components/HostPendingQueuePanel.tsx
index 7a9d4f2c86..16f028cc81 100644
--- a/src/web-ui/src/flow_chat/components/HostPendingQueuePanel.tsx
+++ b/src/web-ui/src/flow_chat/components/HostPendingQueuePanel.tsx
@@ -1,23 +1,32 @@
 import { pendingQueueManager } from '../services/flow-chat-manager/PendingQueueModule';
 import type { QueuedMessage } from '../types/flow-chat';
-import { useEffect, useId, useState, useSyncExternalStore } from 'react';
+import { useEffect, useId, useState, useSyncExternalStore, type ReactNode } from 'react';
 import { useI18n } from '@/infrastructure/i18n';
 import { Button, Icon, IconButton, OverflowText, Tooltip } from '@openbitfun/ui';
-import { RotateCw } from 'lucide-react';
+import { ListEnd, Paperclip, RotateCw } from 'lucide-react';
 import './HostPendingQueuePanel.scss';
+import { PendingQueueMessageActions } from './PendingQueueMessageActions';
+import { usePendingQueueDisclosure } from './usePendingQueueDisclosure';
 import { hostQueuePresentation, observePresentedHostQueue } from '../services/hostQueuePresentation';
 import { HostDialogQueue, type QueueOutboxRecord, type QueueItem } from '../../../../shared/dialog-queue/HostDialogQueue';
 import {
-  ChatComposerQueue, ChatComposerQueueHeader, ChatComposerQueueTitle,
+  ChatComposerQueue, ChatComposerQueueHeader, ChatComposerQueueTitle, ChatComposerQueueToggle,
   ChatComposerQueueList, ChatComposerQueueItem, ChatComposerQueueItemContent, ChatComposerQueueItemActions,
+  ChatComposerQueueItemStatus, ChatComposerQueueAttachmentBadge,
 } from '@openbitfun/ui/flow-chat';
 
+function QueueAction({ label, icon, disabled, onClick }: { label: string; icon: ReactNode; disabled: boolean; onClick: () => void }) {
+  return <Tooltip content={label}>
+    <IconButton data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="action" size="xs" aria-label={label} icon={icon} disabled={disabled} onClick={onClick} />
+  </Tooltip>;
+}
+
 export function HostPendingQueuePanel({ queue, onRestore }: { queue: HostDialogQueue; onRestore: (item: QueuedMessage) => boolean }) {
   const { t } = useI18n('flow-chat');
   const view = useSyncExternalStore(queue.subscribe, queue.getSnapshot, queue.getSnapshot);
   const presentation = hostQueuePresentation(queue);
   const projected = useSyncExternalStore(presentation.subscribe, presentation.getSnapshot, presentation.getSnapshot);
-  const [expanded, setExpanded] = useState(true);
+  const { expanded, toggle, toggleRef, listRef } = usePendingQueueDisclosure();
   const [showHelp, setShowHelp] = useState(false);
   const listId = useId();
   const [busy, setBusy] = useState(false);
@@ -55,58 +64,85 @@ export function HostPendingQueuePanel({ queue, onRestore }: { queue: HostDialogQ
   const items = (view.snapshot?.items ?? []).filter(item => item.status === 'blocked' || !projected.has(item.turnId));
   const visibleError = error || (view.error?.includes('Session is not loaded') ? null : view.error);
   if (!items.length && !view.pending.length && !visibleError) return null;
-  return <ChatComposerQueue data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="root" className="host-pending-queue" aria-label={t('hostQueue.title')}>
-    <ChatComposerQueueHeader data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="header">
-      <Button variant="text" size="xs" className="host-pending-queue__toggle" aria-expanded={expanded} aria-controls={listId}
-        onClick={() => setExpanded(value => !value)} trailingIcon={<Icon name={expanded ? 'chevron-down' : 'chevron-up'} />}>
-        <ChatComposerQueueTitle data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="title" count={items.length + view.pending.length}>{t('hostQueue.title')}</ChatComposerQueueTitle>
-      </Button>
-      <Tooltip content={t('hostQueue.about')}><IconButton size="xs" aria-label={t('hostQueue.about')} aria-expanded={showHelp}
-        icon={<Icon name="info" />} onClick={() => setShowHelp(value => !value)} /></Tooltip>
-    </ChatComposerQueueHeader>
-    {showHelp && <p data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="status" className="host-pending-queue__note">{t('hostQueue.memoryNotice')}</p>}
-    {visibleError && <div data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="status" role="alert" className="host-pending-queue__error">{visibleError}<Button size="xs" variant="text" disabled={busy} onClick={() => void run(() => queue.refresh())}>{t('hostQueue.refresh')}</Button></div>}
-    <ChatComposerQueueList data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="list" id={listId} hidden={!expanded}>
-      {items.map(item => <ChatComposerQueueItem data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="item" key={item.turnId} state={item.status === 'blocked' ? 'failed' : item.status === 'steering_pending' ? 'sending' : 'default'}>
-        <ChatComposerQueueItemContent data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="content">
-          <OverflowText title={item.displayContent}>{item.displayContent || t('pendingQueue.emptyPlaceholder')}</OverflowText>
-          {item.status !== 'queued' && <span className="host-pending-queue__status">{item.status === 'blocked' ? t('hostQueue.blocked') : t('hostQueue.steeringPending')}</span>}
-          {item.attachmentCount > 0 && <span className="host-pending-queue__status">{t('hostQueue.attachments', { count: item.attachmentCount })}</span>}
-          {item.reason && <OverflowText className="host-pending-queue__status" title={item.reason}>{item.reason}</OverflowText>}
-        </ChatComposerQueueItemContent>
-        <ChatComposerQueueItemActions data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="actions">
-          <Tooltip content={t('hostQueue.edit')}><IconButton size="xs" aria-label={t('hostQueue.edit')} icon={<Icon name="edit" />} disabled={busy || !!view.error || item.status === 'steering_pending'} onClick={() => void run(async () => {
+  const locked = busy || !!view.error;
+  const renderPreview = (text: string) => <OverflowText data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="preview"
+    behavior="fade" data-overflow-trigger tabIndex={0}>{text}</OverflowText>;
+  const renderItem = (item: QueueItem) => {
+    const steering = item.status === 'steering_pending';
+    const blocked = item.status === 'blocked';
+    return <ChatComposerQueueItem data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="item" key={item.turnId}
+      leadingIcon={<Icon glyph={ListEnd} size="sm" />} state={blocked ? 'failed' : steering ? 'sending' : 'default'}>
+      <ChatComposerQueueItemContent data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="content">
+        {renderPreview(item.displayContent || t('pendingQueue.emptyPlaceholder'))}
+        {(blocked || steering) && <ChatComposerQueueItemStatus data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="status" tone={blocked ? 'warning' : 'neutral'}>
+          {blocked ? t('hostQueue.blocked') : t('hostQueue.steeringPending')}
+        </ChatComposerQueueItemStatus>}
+        {item.reason && <ChatComposerQueueItemStatus data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="status" tone={blocked ? 'warning' : 'neutral'}>{item.reason}</ChatComposerQueueItemStatus>}
+      </ChatComposerQueueItemContent>
+      <ChatComposerQueueAttachmentBadge count={item.attachmentCount} icon={<Icon glyph={Paperclip} size="xs" />}
+        label={t('hostQueue.attachments', { count: item.attachmentCount })} />
+      <ChatComposerQueueItemActions data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="actions">
+        <PendingQueueMessageActions sendLabel={t('hostQueue.sendNow')} sendDisabled={locked || steering}
+          onSend={() => void run(() => queue.act(item, 'promote'))}
+          editLabel={t('hostQueue.edit')} editDisabled={locked || steering} onEdit={() => void run(async () => {
             const saved = await queue.savedDraft(item.turnId);
             if (!saved || saved.request.action !== 'submit') throw new Error(t('hostQueue.noDraft'));
             await restoreDraft(saved, item);
-          })} /></Tooltip>
-          <Tooltip content={t('hostQueue.sendNow')}><IconButton size="xs" aria-label={t('hostQueue.sendNow')} icon={<Icon name="arrow-up" />} disabled={busy || !!view.error || item.status === 'steering_pending'} onClick={() => void run(() => queue.act(item, 'promote'))} /></Tooltip>
-          <Tooltip content={t('hostQueue.cancel')}><IconButton size="xs" aria-label={t('hostQueue.cancel')} icon={<Icon name="xmark" />} disabled={busy || !!view.error || item.status === 'steering_pending'} onClick={() => void run(() => queue.act(item, 'cancel'))} /></Tooltip>
-        </ChatComposerQueueItemActions>
-      </ChatComposerQueueItem>)}
-      {view.pending.map(record => <ChatComposerQueueItem data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="item" key={record.key} state="failed">
-        <ChatComposerQueueItemContent data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="content"><OverflowText className="host-pending-queue__status" title={t('hostQueue.unknown')}>{t('hostQueue.unknown')}</OverflowText>
-          {record.request.action === 'submit' && <OverflowText title={record.request.message.displayContent ?? record.request.message.content}>{record.request.message.displayContent ?? record.request.message.content}</OverflowText>}
-        </ChatComposerQueueItemContent>
-        <ChatComposerQueueItemActions data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="actions">
-          {record.restoreIntent && record.request.action === 'submit'
-            ? <IconButton size="xs" aria-label={t('hostQueue.edit')} title={t('hostQueue.edit')} icon={<Icon name="edit" />} disabled={busy} onClick={() => void run(() => restoreDraft(record))} />
-            : <IconButton size="xs" aria-label={t('hostQueue.checkRetry')} title={t('hostQueue.checkRetry')} icon={<Icon glyph={RotateCw} />} disabled={busy} onClick={() => void run(() => queue.retry(record))} />}
-          {record.request.action === 'submit' && <IconButton size="xs" aria-label={t('hostQueue.copyDraft')} title={t('hostQueue.copyDraft')} icon={<Icon name="duplicate" />} disabled={busy} onClick={() => {
-            if (record.request.action !== 'submit') return;
-            const message = record.request.message;
-            const cache = record.draft as Partial<QueuedMessage> | undefined;
-            // Copy locally even after an owner restart. Keep the unresolved
-            // receipt: copying is neither a cancellation nor a resend.
-            onRestore({ ...cache, id: message.turnId, sessionId: queue.sessionId,
-              content: message.content, displayMessage: message.displayContent,
-              agentType: message.agentType, timestamp: cache?.timestamp ?? Date.now(),
-              status: 'queued', retryCount: cache?.retryCount ?? 0,
-              userMessageMetadata: message.metadata });
-          }} />}
-          <IconButton size="xs" aria-label={t('hostQueue.dismiss')} title={t('hostQueue.dismiss')} icon={<Icon name="xmark" />} disabled={busy} onClick={() => void run(() => queue.dismiss(record))} />
-        </ChatComposerQueueItemActions>
-      </ChatComposerQueueItem>)}
+          })}
+          removeLabel={t('hostQueue.cancel')} removeDisabled={locked || steering}
+          onRemove={() => void run(() => queue.act(item, 'cancel'))}
+          onCollapse={expanded ? toggle : undefined} onAbout={() => setShowHelp(value => !value)} />
+      </ChatComposerQueueItemActions>
+    </ChatComposerQueueItem>;
+  };
+  const renderPending = (record: QueueOutboxRecord) => {
+    const message = record.request.action === 'submit' ? record.request.message : null;
+    return <ChatComposerQueueItem data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="item" key={record.key} leadingIcon={<Icon glyph={ListEnd} size="sm" />} state="failed">
+      <ChatComposerQueueItemContent data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="content">
+        {message && renderPreview(message.displayContent ?? message.content)}
+        <ChatComposerQueueItemStatus data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="status" tone="warning">{t('hostQueue.unknown')}</ChatComposerQueueItemStatus>
+      </ChatComposerQueueItemContent>
+      <ChatComposerQueueItemActions data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="actions">
+        {record.restoreIntent && message
+          ? <QueueAction label={t('hostQueue.edit')} icon={<Icon name="edit" />} disabled={busy} onClick={() => void run(() => restoreDraft(record))} />
+          : <QueueAction label={t('hostQueue.checkRetry')} icon={<Icon glyph={RotateCw} />} disabled={busy} onClick={() => void run(() => queue.retry(record))} />}
+        {message && <QueueAction label={t('hostQueue.copyDraft')} icon={<Icon name="duplicate" />} disabled={busy} onClick={() => {
+          const cache = record.draft as Partial<QueuedMessage> | undefined;
+          // Copy locally even after an owner restart. Keep the unresolved
+          // receipt: copying is neither a cancellation nor a resend.
+          onRestore({ ...cache, id: message.turnId, sessionId: queue.sessionId,
+            content: message.content, displayMessage: message.displayContent,
+            agentType: message.agentType, timestamp: cache?.timestamp ?? Date.now(),
+            status: 'queued', retryCount: cache?.retryCount ?? 0,
+            userMessageMetadata: message.metadata });
+        }} />}
+        <QueueAction label={t('hostQueue.dismiss')} icon={<Icon name="xmark" />} disabled={busy} onClick={() => void run(() => queue.dismiss(record))} />
+      </ChatComposerQueueItemActions>
+    </ChatComposerQueueItem>;
+  };
+  // Collapsing hides the controlled list. Rows that still need a decision
+  // (blocked or unconfirmed) move to a recovery list outside the disclosure.
+  const recoveryItems = expanded ? [] : items.filter(item => item.status === 'blocked');
+  const recoveryPending = expanded ? [] : view.pending;
+  return <ChatComposerQueue data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="root" className="host-pending-queue" aria-label={t('pendingQueue.label', { count: items.length + view.pending.length })}>
+    {(!expanded || items.length === 0) && <ChatComposerQueueHeader data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="header">
+      <ChatComposerQueueToggle ref={toggleRef} className="host-pending-queue__toggle" expanded={expanded} aria-controls={listId}
+        onClick={toggle}>
+        <ChatComposerQueueTitle data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="title" count={items.length + view.pending.length}>{t('hostQueue.title')}</ChatComposerQueueTitle>
+      </ChatComposerQueueToggle>
+      <Tooltip content={t('hostQueue.about')}><IconButton size="xs" variant="annotation" aria-label={t('hostQueue.about')} aria-expanded={showHelp}
+        icon={<Icon name="info" />} onClick={() => setShowHelp(value => !value)} /></Tooltip>
+    </ChatComposerQueueHeader>}
+    {showHelp && <p data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="status" className="host-pending-queue__note">{t('hostQueue.memoryNotice')}</p>}
+    {visibleError && <div data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="status" role="alert" className="host-pending-queue__error">
+      <span className="host-pending-queue__error-text">{visibleError}</span>
+      <Button size="xs" variant="text" disabled={busy} onClick={() => void run(() => queue.refresh())}>{t('hostQueue.refresh')}</Button>
+    </div>}
+    <ChatComposerQueueList data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="list" ref={listRef} id={listId} hidden={!expanded}>
+      {expanded && <>{items.map(renderItem)}{view.pending.map(renderPending)}</>}
     </ChatComposerQueueList>
+    {(recoveryItems.length > 0 || recoveryPending.length > 0) && <ChatComposerQueueList data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="list">
+      {recoveryItems.map(renderItem)}{recoveryPending.map(renderPending)}
+    </ChatComposerQueueList>}
   </ChatComposerQueue>;
 }
diff --git a/src/web-ui/src/flow_chat/components/PendingQueueMessageActions.tsx b/src/web-ui/src/flow_chat/components/PendingQueueMessageActions.tsx
new file mode 100644
index 0000000000..80be48a883
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/PendingQueueMessageActions.tsx
@@ -0,0 +1,60 @@
+import { useId, useRef, useState } from 'react';
+import { CornerDownRight, MoreHorizontal, Trash2 } from 'lucide-react';
+import { Button, Icon, IconButton, MenuPopover, Tooltip } from '@openbitfun/ui';
+import { useI18n } from '@/infrastructure/i18n';
+
+interface PendingQueueMessageActionsProps {
+  sendLabel: string;
+  sendTooltip?: string;
+  sendAriaLabel?: string;
+  sendDisabled: boolean;
+  sending?: boolean;
+  onSend: () => void;
+  editLabel: string;
+  editDisabled: boolean;
+  onEdit: () => void;
+  removeLabel: string;
+  removeDisabled: boolean;
+  onRemove: () => void;
+  onCollapse?: () => void;
+  onAbout?: () => void;
+}
+
+export function PendingQueueMessageActions({
+  sendLabel, sendTooltip, sendAriaLabel, sendDisabled, sending, onSend,
+  editLabel, editDisabled, onEdit, removeLabel, removeDisabled, onRemove,
+  onCollapse, onAbout,
+}: PendingQueueMessageActionsProps) {
+  const { t } = useI18n('flow-chat');
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const menuId = useId();
+  const moreLabel = t('pendingQueue.actions.more');
+
+  return <>
+    <Tooltip content={sendTooltip ?? sendLabel}>
+      <Button data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="action"
+        variant="text" size="xs" labelBehavior="static" aria-label={sendAriaLabel ?? sendLabel}
+        leadingIcon={<Icon glyph={CornerDownRight} size="sm" />} disabled={sendDisabled} loading={sending} onClick={onSend}>
+        {sendLabel}
+      </Button>
+    </Tooltip>
+    <Tooltip content={removeLabel}>
+      <IconButton data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="action"
+        variant="annotation" size="xs" aria-label={removeLabel} icon={<Icon glyph={Trash2} size="sm" />}
+        disabled={removeDisabled} onClick={onRemove} />
+    </Tooltip>
+    <Tooltip content={moreLabel} disabled={open}>
+      <IconButton data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="action"
+        ref={anchorRef} variant="annotation" size="xs" aria-label={moreLabel}
+        icon={<Icon glyph={MoreHorizontal} size="sm" />} aria-haspopup="menu" aria-expanded={open}
+        aria-controls={open ? menuId : undefined} onClick={() => setOpen(value => !value)} />
+    </Tooltip>
+    <MenuPopover id={menuId} aria-label={moreLabel} anchorRef={anchorRef} open={open} onClose={() => setOpen(false)}
+      placement="top" inlineSize="content" items={[
+        { id: 'edit', label: editLabel, icon: <Icon name="edit" size="sm" />, disabled: editDisabled, onSelect: onEdit },
+        ...(onCollapse ? [{ id: 'collapse', label: t('pendingQueue.actions.collapse'), icon: <Icon name="chevron-up" size="sm" />, onSelect: onCollapse }] : []),
+        ...(onAbout ? [{ id: 'about', label: t('hostQueue.about'), icon: <Icon name="info" size="sm" />, onSelect: onAbout }] : []),
+      ]} />
+  </>;
+}
diff --git a/src/web-ui/src/flow_chat/components/PendingQueuePanel.scss b/src/web-ui/src/flow_chat/components/PendingQueuePanel.scss
index dac3069701..9d5fdeaa0c 100644
--- a/src/web-ui/src/flow_chat/components/PendingQueuePanel.scss
+++ b/src/web-ui/src/flow_chat/components/PendingQueuePanel.scss
@@ -1,50 +1,10 @@
+// Geometry, rows, status tones and action layout come from ChatComposerQueue.
 .openbitfun-pending-queue-panel {
-  &__item {
-    position: relative;
-
-    &--sending {
-      pointer-events: none;
-    }
-  }
-
-  &__content {
-    min-width: 0;
-  }
-
-  &__preview {
-    display: block;
-    min-width: 0;
-    overflow: hidden;
-    font-size: var(--openbitfun-type-body-md-font-size);
-    line-height: var(--openbitfun-type-body-sm-line-height);
-    white-space: nowrap;
-  }
-
-  &__preview-empty {
-    color: var(--openbitfun-color-content-muted);
-    font-style: italic;
-  }
-
-  &__sending-label,
-  &__failed-label {
+  &__legacy-note {
+    margin: 0;
+    padding-inline: var(--openbitfun-space-3);
     font-size: var(--openbitfun-type-meta-font-size);
     line-height: var(--openbitfun-type-body-sm-line-height);
-  }
-
-  &__sending-label {
     color: var(--openbitfun-color-content-muted);
   }
-
-  &__failed-label {
-    color: var(--openbitfun-color-status-danger-content);
-    font-weight: var(--openbitfun-type-label-sm-font-weight);
-  }
-
-  &__actions {
-    flex: 0 0 auto;
-  }
-
-  &__btn--danger:hover:not(:disabled) {
-    color: var(--openbitfun-color-status-danger-content);
-  }
 }
diff --git a/src/web-ui/src/flow_chat/components/PendingQueuePanel.test.tsx b/src/web-ui/src/flow_chat/components/PendingQueuePanel.test.tsx
index 508d31da66..3bd24f7946 100644
--- a/src/web-ui/src/flow_chat/components/PendingQueuePanel.test.tsx
+++ b/src/web-ui/src/flow_chat/components/PendingQueuePanel.test.tsx
@@ -2,7 +2,7 @@
  * @vitest-environment jsdom
  */
 
-import { act, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -15,8 +15,20 @@ const mocks = vi.hoisted(() => ({
   queueRemove: vi.fn(),
   queueSetStatus: vi.fn(),
   steerDialogTurn: vi.fn(),
+  items: [] as Array<Record<string, unknown>>,
 }));
 
+const queuedItem = {
+  id: 'queued-1',
+  sessionId: 'session-1',
+  content: 'steer this turn',
+  timestamp: 1,
+  status: 'queued',
+  retryCount: 0,
+  imageContexts: [{ id: 'image-1' }, { id: 'image-2' }, { id: 'image-3' }],
+  imageDisplayData: [{ id: 'image-1' }, { id: 'image-2' }, { id: 'image-3' }],
+};
+
 vi.mock('../services/hostDialogQueue', () => ({ hostQueueSupported: () => false }));
 vi.mock('./HostPendingQueuePanel', () => ({ HostPendingQueuePanel: () => null }));
 
@@ -24,17 +36,7 @@ vi.mock('react-i18next', () => ({
   useTranslation: () => ({ t: (key: string) => key }),
 }));
 
-vi.mock('@openbitfun/ui', () => ({
-  Icon: ({ name }: { name: string }) => <span data-openbitfun-component="icon" data-openbitfun-name={name} />,
-  OverflowText: ({ children, behavior: _behavior, marqueeActive: _marqueeActive, ...props }: any) => <span {...props}>{children}</span>,
-  IconButton: ({ icon, loading: _loading, size: _size, variant: _variant, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
-    icon?: ReactNode;
-    loading?: boolean;
-    size?: string;
-    variant?: string;
-  }) => <button {...props}>{icon}</button>,
-  Tooltip: ({ children }: { children: ReactNode }) => children,
-}));
+vi.mock('@/infrastructure/i18n', () => ({ useI18n: () => ({ t: (key: string) => key }) }));
 
 vi.mock('@/infrastructure/api/service-api/AgentAPI', () => ({
   agentAPI: { steerDialogTurn: mocks.steerDialogTurn },
@@ -59,18 +61,7 @@ vi.mock('../store/FlowChatStore', () => ({
 
 vi.mock('../services/flow-chat-manager/PendingQueueModule', () => ({
   pendingQueueManager: {
-    list: () => [
-      {
-        id: 'queued-1',
-        sessionId: 'session-1',
-        content: 'steer this turn',
-        timestamp: 1,
-        status: 'queued',
-        retryCount: 0,
-        imageContexts: [{ id: 'image-1' }, { id: 'image-2' }, { id: 'image-3' }],
-        imageDisplayData: [{ id: 'image-1' }, { id: 'image-2' }, { id: 'image-3' }],
-      },
-    ],
+    list: () => mocks.items,
     subscribe: () => () => undefined,
     setStatus: mocks.queueSetStatus,
     remove: mocks.queueRemove,
@@ -116,6 +107,13 @@ vi.mock('../utils/acpSession', () => ({
   isAcpFlowSession: () => false,
 }));
 
+async function selectQueueMenuAction(container: HTMLElement, action: 'edit' | 'collapse') {
+  await act(async () => container.querySelector<HTMLButtonElement>('[aria-label="pendingQueue.actions.more"]')!.click());
+  const item = document.querySelector<HTMLButtonElement>(`[role="menu"]:not([aria-hidden="true"]) [data-menu-id="${action}"]`);
+  expect(item).not.toBeNull();
+  await act(async () => item!.click());
+}
+
 describe('PendingQueuePanel', () => {
   let container: HTMLDivElement;
   let root: Root;
@@ -126,6 +124,7 @@ describe('PendingQueuePanel', () => {
     document.body.appendChild(container);
     root = createRoot(container);
     mocks.drainPendingQueueForSession.mockResolvedValue(undefined);
+    mocks.items = [queuedItem];
   });
 
   afterEach(() => {
@@ -144,12 +143,14 @@ describe('PendingQueuePanel', () => {
       );
     });
 
-    const title = container.querySelector('[data-openbitfun-part="title"]');
+    expect(container.querySelector('[data-openbitfun-part="header"]')).toBeNull();
     const attachmentBadge = container.querySelector('[data-openbitfun-part="attachmentCount"]');
 
-    expect(title?.textContent).toBe('pendingQueue.title1');
     expect(attachmentBadge?.textContent).toBe('3');
+    expect(attachmentBadge?.getAttribute('role')).toBe('img');
     expect(attachmentBadge?.getAttribute('aria-label')).toBe('pendingQueue.attachmentCount');
+    await selectQueueMenuAction(container, 'collapse');
+    expect(container.querySelector('[data-openbitfun-part="title"]')?.textContent).toBe('pendingQueue.title1');
   });
 
   it('submits only one steering request while send-now is in flight', async () => {
@@ -203,14 +204,39 @@ describe('PendingQueuePanel', () => {
     );
     expect(preview).not.toBeNull();
     expect(preview?.getAttribute('role')).toBeNull();
-    expect(preview?.getAttribute('tabindex')).toBeNull();
+    // A tab stop so the overflow tooltip can follow keyboard focus.
+    expect(preview?.tabIndex).toBe(0);
 
-    act(() => preview!.click());
+    act(() => {
+      preview!.focus();
+      preview!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+      preview!.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
+      preview!.click();
+    });
+    expect(document.activeElement).toBe(preview);
 
     expect(onRestoreToComposer).not.toHaveBeenCalled();
     expect(mocks.queueRemove).not.toHaveBeenCalled();
   });
 
+  it('returns focus to more actions on Escape without changing the draft', async () => {
+    const onRestoreToComposer = vi.fn(() => true);
+    await act(async () => root.render(
+      <PendingQueuePanel sessionId="session-1" onRestoreToComposer={onRestoreToComposer} />,
+    ));
+    const more = container.querySelector<HTMLButtonElement>('[aria-label="pendingQueue.actions.more"]')!;
+    await act(async () => { more.focus(); more.click(); });
+    expect(more.getAttribute('aria-expanded')).toBe('true');
+    const menu = document.getElementById(more.getAttribute('aria-controls')!)!;
+    expect(menu.getAttribute('role')).toBe('menu');
+    expect(menu.querySelector('[data-menu-id="edit"]')?.textContent).toBe('pendingQueue.actions.edit');
+    await act(async () => menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })));
+    expect(more.getAttribute('aria-expanded')).toBe('false');
+    expect(document.activeElement).toBe(more);
+    expect(onRestoreToComposer).not.toHaveBeenCalled();
+    expect(mocks.queueRemove).not.toHaveBeenCalled();
+  });
+
   it('restores from the edit action and removes only an accepted draft', async () => {
     const onRestoreToComposer = vi.fn(() => true);
     await act(async () => {
@@ -222,12 +248,7 @@ describe('PendingQueuePanel', () => {
       );
     });
 
-    const editButton = container.querySelector<HTMLButtonElement>(
-      'button[aria-label="pendingQueue.actions.edit"]',
-    );
-    expect(editButton).not.toBeNull();
-
-    act(() => editButton!.click());
+    await selectQueueMenuAction(container, 'edit');
 
     expect(onRestoreToComposer).toHaveBeenCalledWith(expect.objectContaining({
       id: 'queued-1',
@@ -247,12 +268,76 @@ describe('PendingQueuePanel', () => {
       );
     });
 
-    const editButton = container.querySelector<HTMLButtonElement>(
-      'button[aria-label="pendingQueue.actions.edit"]',
-    );
-    act(() => editButton!.click());
+    await selectQueueMenuAction(container, 'edit');
 
     expect(onRestoreToComposer).toHaveBeenCalledTimes(1);
     expect(mocks.queueRemove).not.toHaveBeenCalled();
   });
+
+  it('collapses the controlled list and keeps failed rows in a recovery list', async () => {
+    mocks.items = [
+      queuedItem,
+      { id: 'failed-1', sessionId: 'session-1', content: 'retry me', timestamp: 2, status: 'failed', retryCount: 1 },
+    ];
+    await act(async () => {
+      root.render(<PendingQueuePanel sessionId="session-1" onRestoreToComposer={() => true} />);
+    });
+
+    const controlled = container.querySelector<HTMLUListElement>('ul')!;
+    const count = () => container.querySelector('[data-openbitfun-part="totalCount"]')?.textContent;
+    expect(controlled.hidden).toBe(false);
+    expect([...controlled.querySelectorAll('li')].map(row => row.textContent)).toEqual([
+      expect.stringContaining('steer this turn'), expect.stringContaining('retry me'),
+    ]);
+    await selectQueueMenuAction(container, 'collapse');
+    const toggle = container.querySelector<HTMLButtonElement>('[data-openbitfun-part="header"] button[aria-expanded]')!;
+    expect(toggle.getAttribute('aria-controls')).toBe(controlled.id);
+    expect(document.activeElement).toBe(toggle);
+    expect(toggle.getAttribute('aria-expanded')).toBe('false');
+    expect(controlled.hidden).toBe(true);
+    expect(controlled.querySelectorAll('li')).toHaveLength(0);
+    expect(count()).toBe('2');
+    const recovery = [...container.querySelectorAll('ul')].filter(list => list !== controlled);
+    expect(recovery).toHaveLength(1);
+    const rows = recovery[0].querySelectorAll('li');
+    expect(rows).toHaveLength(1);
+    expect(rows[0].textContent).toContain('retry me');
+    expect(rows[0].textContent).toContain('pendingQueue.statusFailed');
+    expect(rows[0].querySelector('button[aria-label="pendingQueue.actions.delete"]')).not.toBeNull();
+    expect(container.textContent).not.toContain('steer this turn');
+
+    act(() => toggle.click());
+    expect(controlled.hidden).toBe(false);
+    expect(controlled.querySelectorAll('li')).toHaveLength(2);
+    expect(container.querySelectorAll('ul')).toHaveLength(1);
+    expect(document.activeElement).toBe(controlled.querySelector('[data-openbitfun-product-part="preview"]'));
+    expect(container.querySelector('[data-openbitfun-part="header"]')).toBeNull();
+  });
+
+  it('shows a retried item that is sending again as sending, not failed', async () => {
+    mocks.items = [
+      { id: 'retry-1', sessionId: 'session-1', content: 'second attempt', timestamp: 2, status: 'sending', retryCount: 1 },
+    ];
+    await act(async () => {
+      root.render(<PendingQueuePanel sessionId="session-1" onRestoreToComposer={() => true} />);
+    });
+
+    const row = container.querySelector('li')!;
+    expect(row.getAttribute('data-openbitfun-state')).toBe('sending');
+    expect(row.textContent).toContain('pendingQueue.statusQueuedSending');
+    expect(row.textContent).not.toContain('pendingQueue.statusFailed');
+    expect(row.querySelector('[data-openbitfun-tone="danger"]')).toBeNull();
+    expect(row.querySelector<HTMLButtonElement>('[aria-label="pendingQueue.actions.sendNow"]')?.disabled).toBe(true);
+    expect(row.querySelector<HTMLButtonElement>('[aria-label="pendingQueue.actions.delete"]')?.disabled).toBe(true);
+    await act(async () => row.querySelector<HTMLButtonElement>('[aria-label="pendingQueue.actions.more"]')!.click());
+    const edit = document.querySelector<HTMLButtonElement>('[role="menu"]:not([aria-hidden="true"]) [data-menu-id="edit"]')!;
+    expect(edit.disabled).toBe(true);
+    await act(async () => edit.click());
+    expect(mocks.queueRemove).not.toHaveBeenCalled();
+    await act(async () => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })));
+
+
+    await selectQueueMenuAction(container, 'collapse');
+    expect(container.textContent).not.toContain('second attempt');
+  });
 });
diff --git a/src/web-ui/src/flow_chat/components/PendingQueuePanel.tsx b/src/web-ui/src/flow_chat/components/PendingQueuePanel.tsx
index 94e3311524..25e21e7b83 100644
--- a/src/web-ui/src/flow_chat/components/PendingQueuePanel.tsx
+++ b/src/web-ui/src/flow_chat/components/PendingQueuePanel.tsx
@@ -17,10 +17,10 @@ import { getActiveSurfaceScope, isSurfaceChangedError, onSurfaceActivated } from
  *   deduped via `steeringId`.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ListEnd } from 'lucide-react';
-import { OverflowText, Tooltip } from '@openbitfun/ui';
+import { ListEnd, Paperclip } from 'lucide-react';
+import { OverflowText } from '@openbitfun/ui';
 import { stateMachineManager } from '../state-machine';
 import { FlowChatStore } from '../store/FlowChatStore';
 import { pendingQueueManager } from '../services/flow-chat-manager/PendingQueueModule';
@@ -33,7 +33,9 @@ import type { QueuedMessage, SteeringImage } from '../types/flow-chat';
 import { isAcpFlowSession } from '../utils/acpSession';
 import { getQueuedMessageAttachmentCount } from '../utils/pendingQueuePresentation';
 import './PendingQueuePanel.scss';
-import { IconButton, Icon } from '@openbitfun/ui';
+import { PendingQueueMessageActions } from './PendingQueueMessageActions';
+import { usePendingQueueDisclosure } from './usePendingQueueDisclosure';
+import { Icon } from '@openbitfun/ui';
 import {
   ChatComposerQueue,
   ChatComposerQueueAttachmentBadge,
@@ -41,8 +43,10 @@ import {
   ChatComposerQueueItem,
   ChatComposerQueueItemActions,
   ChatComposerQueueItemContent,
+  ChatComposerQueueItemStatus,
   ChatComposerQueueList,
   ChatComposerQueueTitle,
+  ChatComposerQueueToggle,
   type ChatComposerQueueItemState,
 } from '@openbitfun/ui/flow-chat';
 
@@ -54,6 +58,16 @@ interface PendingQueuePanelProps {
   onRestoreToComposer: (item: QueuedMessage) => boolean;
 }
 
+function isSendingQueuedMessage(item: QueuedMessage): boolean {
+  return item.status === 'sending' || item.status === 'sending_now';
+}
+
+/** A send in progress outranks a failure from an earlier attempt. */
+function isFailedQueuedMessage(item: QueuedMessage): boolean {
+  return !isSendingQueuedMessage(item)
+    && (item.status === 'failed' || (item.retryCount ?? 0) > 0);
+}
+
 function LegacyPendingQueuePanel({
   sessionId,
   className,
@@ -61,6 +75,8 @@ function LegacyPendingQueuePanel({
 }: PendingQueuePanelProps): JSX.Element | null {
   const { t } = useTranslation('flow-chat');
   const sendNowInFlightIdsRef = useRef(new Set<string>());
+  const listId = useId();
+  const { expanded, setExpanded, toggle, toggleRef, listRef } = usePendingQueueDisclosure();
   useSyncExternalStore(
     interruptedTurnRecoveryGate.subscribe,
     interruptedTurnRecoveryGate.getSnapshot,
@@ -75,6 +91,7 @@ function LegacyPendingQueuePanel({
     return isAcpFlowSession(FlowChatStore.getInstance().getState().sessions.get(sessionId));
   });
   useEffect(() => {
+    setExpanded(true);
     if (!sessionId) {
       setItems([]);
       return;
@@ -84,7 +101,7 @@ function LegacyPendingQueuePanel({
       if (sid === sessionId) setItems(snapshot);
     });
     return unsubscribe;
-  }, [sessionId]);
+  }, [sessionId, setExpanded]);
 
   useEffect(() => {
     if (!sessionId) {
@@ -191,8 +208,105 @@ function LegacyPendingQueuePanel({
     return null;
   }
 
+  const renderItem = (item: QueuedMessage) => {
+    const isSendingNow = item.status === 'sending_now';
+    const isSending = isSendingQueuedMessage(item);
+    const isFailed = isFailedQueuedMessage(item);
+    const previewText = item.displayMessage ?? item.content;
+    const attachmentCount = getQueuedMessageAttachmentCount(item);
+    const itemState: ChatComposerQueueItemState = isSending
+      ? 'sending'
+      : isFailed
+        ? 'failed'
+        : 'default';
+    const itemClass = [
+      'openbitfun-pending-queue-panel__item',
+      isSending && 'openbitfun-pending-queue-panel__item--sending',
+      isFailed && 'openbitfun-pending-queue-panel__item--failed',
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return (
+      <ChatComposerQueueItem
+        className={itemClass}
+        data-openbitfun-product-component="pending-queue-panel"
+        data-openbitfun-product-part="item"
+        data-openbitfun-state={itemState === 'default' ? undefined : itemState}
+        key={item.id}
+        state={itemState}
+        leadingIcon={<Icon glyph={ListEnd} size="sm" />}
+      >
+        <ChatComposerQueueItemContent
+          data-openbitfun-product-component="pending-queue-panel"
+          data-openbitfun-product-part="content"
+        >
+          {/* Focusable only so keyboard users can read a truncated preview;
+              it never starts editing. */}
+          <OverflowText
+            behavior="fade"
+            className="openbitfun-pending-queue-panel__preview"
+            data-openbitfun-product-component="pending-queue-panel"
+            data-openbitfun-product-part="preview"
+            data-overflow-trigger
+            tabIndex={0}
+          >
+            {previewText || t('pendingQueue.emptyPlaceholder')}
+          </OverflowText>
+          {isSending ? (
+            <ChatComposerQueueItemStatus
+              data-openbitfun-product-component="pending-queue-panel"
+              data-openbitfun-product-part="status"
+            >
+              {isSendingNow ? t('pendingQueue.statusSending') : t('pendingQueue.statusQueuedSending')}
+            </ChatComposerQueueItemStatus>
+          ) : isFailed ? (
+            <ChatComposerQueueItemStatus
+              data-openbitfun-product-component="pending-queue-panel"
+              data-openbitfun-product-part="status"
+              tone="danger"
+            >
+              {t('pendingQueue.statusFailed')}
+            </ChatComposerQueueItemStatus>
+          ) : null}
+        </ChatComposerQueueItemContent>
+
+        <ChatComposerQueueAttachmentBadge
+          count={attachmentCount}
+          icon={<Icon glyph={Paperclip} size="xs" />}
+          label={t('pendingQueue.attachmentCount', { count: attachmentCount })}
+        />
+
+        <ChatComposerQueueItemActions
+          data-openbitfun-product-component="pending-queue-panel"
+          data-openbitfun-product-part="actions"
+        >
+          <PendingQueueMessageActions
+            sendLabel={t('pendingQueue.actions.sendNowLabel')}
+            sendAriaLabel={t('pendingQueue.actions.sendNow')}
+            sendTooltip={t('pendingQueue.tooltip.sendNow')}
+            sendDisabled={isSending || recoveryInFlight}
+            sending={isSendingNow}
+            onSend={() => void handleSendNow(item)}
+            editLabel={t('pendingQueue.actions.edit')}
+            editDisabled={isSending}
+            onEdit={() => handleRestoreToComposer(item)}
+            removeLabel={t('pendingQueue.actions.delete')}
+            removeDisabled={isSending}
+            onRemove={() => handleDelete(item)}
+            onCollapse={expanded ? toggle : undefined}
+          />
+        </ChatComposerQueueItemActions>
+      </ChatComposerQueueItem>
+    );
+  };
+
+  // Collapsing hides the controlled list. Failed rows still need a decision,
+  // so they move to a recovery list outside the disclosure.
+  const recoveryItems = expanded ? [] : visibleItems.filter(isFailedQueuedMessage);
+
   return (
-    <ChatComposerQueue data-overflow-trigger
+    <ChatComposerQueue
       aria-label={t('pendingQueue.label', { count: visibleItems.length })}
       className={`openbitfun-pending-queue-panel ${className ?? ''}`.trim()}
       data-openbitfun-product-component="pending-queue-panel"
@@ -202,161 +316,42 @@ function LegacyPendingQueuePanel({
         e.stopPropagation();
       }}
     >
-      <ChatComposerQueueHeader
+      {!expanded && <ChatComposerQueueHeader
         data-openbitfun-product-component="pending-queue-panel"
         data-openbitfun-product-part="header"
       >
-        <Icon glyph={ListEnd} size="sm" aria-hidden="true" />
-        <ChatComposerQueueTitle
-          count={visibleItems.length}
-          data-openbitfun-product-component="pending-queue-panel"
-          data-openbitfun-product-part="title"
+        <ChatComposerQueueToggle
+          ref={toggleRef}
+          aria-controls={listId}
+          expanded={expanded}
+          onClick={toggle}
         >
-          {t('pendingQueue.title')}
-        </ChatComposerQueueTitle>
-      </ChatComposerQueueHeader>
+          <ChatComposerQueueTitle
+            count={visibleItems.length}
+            data-openbitfun-product-component="pending-queue-panel"
+            data-openbitfun-product-part="title"
+          >
+            {t('pendingQueue.title')}
+          </ChatComposerQueueTitle>
+        </ChatComposerQueueToggle>
+      </ChatComposerQueueHeader>}
       <ChatComposerQueueList
         data-openbitfun-product-component="pending-queue-panel"
         data-openbitfun-product-part="list"
+        ref={listRef}
+        hidden={!expanded}
+        id={listId}
       >
-        {visibleItems.map(item => {
-          const isSendingNow = item.status === 'sending_now';
-          const isSending = item.status === 'sending' || isSendingNow;
-          const isFailed = item.status === 'failed' || (item.retryCount ?? 0) > 0;
-          const previewText = item.displayMessage ?? item.content;
-          const attachmentCount = getQueuedMessageAttachmentCount(item);
-          const itemState: ChatComposerQueueItemState = isSending
-            ? 'sending'
-            : isFailed
-              ? 'failed'
-              : 'default';
-          const itemClass = [
-            'openbitfun-pending-queue-panel__item',
-            isSending && 'openbitfun-pending-queue-panel__item--sending',
-            isFailed && 'openbitfun-pending-queue-panel__item--failed',
-          ]
-            .filter(Boolean)
-            .join(' ');
-
-          return (
-            <ChatComposerQueueItem
-              className={itemClass}
-              data-openbitfun-product-component="pending-queue-panel"
-              data-openbitfun-product-part="item"
-              data-openbitfun-state={itemState === 'default' ? undefined : itemState}
-              key={item.id}
-              state={itemState}
-            >
-              <ChatComposerQueueItemContent
-                className="openbitfun-pending-queue-panel__content"
-                data-openbitfun-product-component="pending-queue-panel"
-                data-openbitfun-product-part="content"
-              >
-                {isSendingNow ? (
-                  <>
-                    <div
-                      className="openbitfun-pending-queue-panel__preview"
-                      data-openbitfun-product-component="pending-queue-panel"
-                      data-openbitfun-product-part="preview"
-                      title={previewText}
-                    ><OverflowText behavior="marquee">
-                      {previewText || (
-                        <span className="openbitfun-pending-queue-panel__preview-empty">
-                          {t('pendingQueue.emptyPlaceholder')}
-                        </span>
-                      )}
-                    </OverflowText></div>
-                    <div
-                      className="openbitfun-pending-queue-panel__sending-label"
-                      data-openbitfun-product-component="pending-queue-panel"
-                      data-openbitfun-product-part="status"
-                    >
-                      {t('pendingQueue.statusSending')}
-                    </div>
-                  </>
-                ) : (
-                  <>
-                    <div
-                      className="openbitfun-pending-queue-panel__preview"
-                      data-openbitfun-product-component="pending-queue-panel"
-                      data-openbitfun-product-part="preview"
-                      title={previewText}
-                    ><OverflowText behavior="marquee">
-                      {previewText || (
-                        <span className="openbitfun-pending-queue-panel__preview-empty">
-                          {t('pendingQueue.emptyPlaceholder')}
-                        </span>
-                      )}
-                    </OverflowText></div>
-                    {isFailed && (
-                      <div
-                        className="openbitfun-pending-queue-panel__failed-label"
-                        data-openbitfun-product-component="pending-queue-panel"
-                        data-openbitfun-product-part="status"
-                      >
-                        {t('pendingQueue.statusFailed')}
-                      </div>
-                    )}
-                  </>
-                )}
-              </ChatComposerQueueItemContent>
-
-              {attachmentCount > 0 ? (
-                <ChatComposerQueueAttachmentBadge
-                  count={attachmentCount}
-                  label={t('pendingQueue.attachmentCount', { count: attachmentCount })}
-                />
-              ) : null}
-
-              <ChatComposerQueueItemActions
-                className="openbitfun-pending-queue-panel__actions"
-                data-openbitfun-product-component="pending-queue-panel"
-                data-openbitfun-product-part="actions"
-              >
-                <Tooltip content={t('pendingQueue.tooltip.sendNow')}>
-                  <IconButton
-                    aria-label={t('pendingQueue.actions.sendNow')}
-                    className="openbitfun-pending-queue-panel__btn"
-                    data-openbitfun-product-component="pending-queue-panel"
-                    data-openbitfun-product-part="action"
-                    disabled={isSending || recoveryInFlight}
-                    icon={<Icon name="arrow-up" size="lg" />}
-                    loading={isSendingNow}
-                    size="xs"
-                    onClick={() => {
-                      void handleSendNow(item);
-                    }}
-                  />
-                </Tooltip>
-                <Tooltip content={t('pendingQueue.actions.delete')}>
-                  <IconButton
-                    aria-label={t('pendingQueue.actions.delete')}
-                    className="openbitfun-pending-queue-panel__btn openbitfun-pending-queue-panel__btn--danger"
-                    data-openbitfun-product-component="pending-queue-panel"
-                    data-openbitfun-product-part="action"
-                    disabled={isSending}
-                    icon={<Icon name="delete" size="lg" />}
-                    size="xs"
-                    onClick={() => handleDelete(item)}
-                  />
-                </Tooltip>
-                <Tooltip content={t('pendingQueue.actions.edit')}>
-                  <IconButton
-                    aria-label={t('pendingQueue.actions.edit')}
-                    className="openbitfun-pending-queue-panel__btn"
-                    data-openbitfun-product-component="pending-queue-panel"
-                    data-openbitfun-product-part="action"
-                    disabled={isSending}
-                    icon={<Icon name="edit" size="lg" />}
-                    size="xs"
-                    onClick={() => handleRestoreToComposer(item)}
-                  />
-                </Tooltip>
-              </ChatComposerQueueItemActions>
-            </ChatComposerQueueItem>
-          );
-        })}
+        {expanded && visibleItems.map(renderItem)}
       </ChatComposerQueueList>
+      {recoveryItems.length > 0 && (
+        <ChatComposerQueueList
+          data-openbitfun-product-component="pending-queue-panel"
+          data-openbitfun-product-part="list"
+        >
+          {recoveryItems.map(renderItem)}
+        </ChatComposerQueueList>
+      )}
     </ChatComposerQueue>
   );
 }
@@ -371,7 +366,7 @@ export function PendingQueuePanel(props: PendingQueuePanelProps): JSX.Element |
   const scope = getActiveSurfaceScope();
   const { t } = useTranslation('flow-chat');
   return <>
-    {supported && props.sessionId && pendingQueueManager.list(props.sessionId).length > 0 && <p>{t('hostQueue.legacy')}</p>}
+    {supported && props.sessionId && pendingQueueManager.list(props.sessionId).length > 0 && <p className="openbitfun-pending-queue-panel__legacy-note" data-openbitfun-product-component="pending-queue-panel" data-openbitfun-product-part="status">{t('hostQueue.legacy')}</p>}
     {supported && props.sessionId && <HostPendingQueuePanel key={`${scope.surfaceId}:${scope.epoch}:${props.sessionId}`} queue={hostDialogQueue(props.sessionId)} onRestore={props.onRestoreToComposer} />}
     <LegacyPendingQueuePanel {...props} />
   </>;
diff --git a/src/web-ui/src/flow_chat/components/usePendingQueueDisclosure.ts b/src/web-ui/src/flow_chat/components/usePendingQueueDisclosure.ts
new file mode 100644
index 0000000000..67d4b79164
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/usePendingQueueDisclosure.ts
@@ -0,0 +1,26 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+
+/** Keep focus on the queue when its row menu folds or unfolds the list. */
+export function usePendingQueueDisclosure() {
+  const [expanded, setExpanded] = useState(true);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+  const restoreFocus = useRef(false);
+
+  useLayoutEffect(() => {
+    if (!restoreFocus.current) return;
+    restoreFocus.current = false;
+    if (expanded) {
+      listRef.current?.querySelector<HTMLElement>('[tabindex="0"], button:not(:disabled)')?.focus();
+    } else {
+      toggleRef.current?.focus();
+    }
+  }, [expanded]);
+
+  const toggle = () => {
+    restoreFocus.current = true;
+    setExpanded(value => !value);
+  };
+
+  return { expanded, setExpanded, toggle, toggleRef, listRef };
+}
diff --git a/src/web-ui/src/locales/en-US/flow-chat.json b/src/web-ui/src/locales/en-US/flow-chat.json
index 43311b2eb8..048c6ab25e 100644
--- a/src/web-ui/src/locales/en-US/flow-chat.json
+++ b/src/web-ui/src/locales/en-US/flow-chat.json
@@ -3840,15 +3840,19 @@
     "showAll": "Show all"
   },
   "pendingQueue": {
-    "title": "Wait for sending",
-    "label": "Wait for sending {{count}}",
+    "title": "Queued messages",
+    "label": "Queued messages {{count}}",
     "attachmentCount": "{{count}} image attachment(s)",
     "attachmentCount_one": "{{count}} image attachment",
     "attachmentCount_other": "{{count}} image attachments",
     "emptyPlaceholder": "(empty message)",
     "statusSending": "Steering…",
-    "statusFailed": "Send failed — edit / send now / delete to clear",
+    "statusQueuedSending": "Sending…",
+    "statusFailed": "Send failed",
     "actions": {
+      "more": "More message actions",
+      "collapse": "Collapse queue",
+      "sendNowLabel": "Send now",
       "edit": "Edit",
       "sendNow": "Send now (steer)",
       "delete": "Delete"
diff --git a/src/web-ui/src/locales/zh-CN/flow-chat.json b/src/web-ui/src/locales/zh-CN/flow-chat.json
index 361fca49b7..298940146b 100644
--- a/src/web-ui/src/locales/zh-CN/flow-chat.json
+++ b/src/web-ui/src/locales/zh-CN/flow-chat.json
@@ -3840,15 +3840,19 @@
     "showAll": "显示全部"
   },
   "pendingQueue": {
-    "title": "等待发送",
-    "label": "等待发送 {{count}}",
+    "title": "待发送",
+    "label": "待发送 {{count}}",
     "attachmentCount": "{{count}} 个图片附件",
     "attachmentCount_one": "{{count}} 个图片附件",
     "attachmentCount_other": "{{count}} 个图片附件",
     "emptyPlaceholder": "（空消息）",
     "statusSending": "正在引导…",
-    "statusFailed": "发送失败 — 请编辑 / 立即发送 / 删除以清除该项",
+    "statusQueuedSending": "发送中…",
+    "statusFailed": "发送失败",
     "actions": {
+      "more": "更多消息操作",
+      "collapse": "收起待发送列表",
+      "sendNowLabel": "立即发送",
       "edit": "编辑",
       "sendNow": "立即发送（引导）",
       "delete": "删除"
diff --git a/src/web-ui/src/locales/zh-TW/flow-chat.json b/src/web-ui/src/locales/zh-TW/flow-chat.json
index d4b9319926..adf1d494be 100644
--- a/src/web-ui/src/locales/zh-TW/flow-chat.json
+++ b/src/web-ui/src/locales/zh-TW/flow-chat.json
@@ -3840,15 +3840,19 @@
     "showAll": "顯示全部"
   },
   "pendingQueue": {
-    "title": "等待發送",
-    "label": "等待發送 {{count}}",
+    "title": "待傳送",
+    "label": "待傳送 {{count}}",
     "attachmentCount": "{{count}} 個圖片附件",
     "attachmentCount_one": "{{count}} 個圖片附件",
     "attachmentCount_other": "{{count}} 個圖片附件",
     "emptyPlaceholder": "（空訊息）",
     "statusSending": "正在引導…",
-    "statusFailed": "發送失敗 — 請編輯 / 立即發送 / 刪除以清除該項",
+    "statusQueuedSending": "傳送中…",
+    "statusFailed": "傳送失敗",
     "actions": {
+      "more": "更多訊息操作",
+      "collapse": "收起待傳送清單",
+      "sendNowLabel": "立即傳送",
       "edit": "編輯",
       "sendNow": "立即發送（引導）",
       "delete": "刪除"