@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Ask Trigger's message box is now a single panel holding your message, its context, New chat and Send, with a note that Ask Trigger is an AI assistant and can make mistakes. The chat header has a simpler layout menu and history list, and the Fullscreen layout is now called Full page.
@@ -0,0 +1,19 @@
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { cn } from "~/utils/cn";
+import { ASK_AGENT_LABEL } from "./agent-identity";
+
+// Names the agent as AI, not only fallible: "Ask Trigger" alone could read as a support team.
+export const AGENT_AI_DISCLOSURE = `${ASK_AGENT_LABEL} is an AI assistant and can make mistakes.`;
+
+/** The panel's last line in every state (see `AgentPanelColumn`), so it always says the agent is
+ * AI. Faded 30% toward the background, quieter than anything the user acts on. */
+export function AgentAiDisclosure({ className }: { className?: string }) {
+  return (
+    <Paragraph
+      variant="extra-small"
+      className={cn("text-balance text-center opacity-70", className)}
+    >
+      {AGENT_AI_DISCLOSURE}
+    </Paragraph>
+  );
+}
@@ -8,19 +8,26 @@ import { ASK_AGENT_LABEL } from "./agent-identity";
 import { messageQuotaReachedCopy } from "./message-quota";
 
 // Matches the composer's outer geometry so the replacement lands in the same place.
-const SLOT = "flex shrink-0 flex-col bg-background-bright px-3 pb-3 pt-1";
+const SLOT = "flex shrink-0 flex-col bg-background-bright px-3 pt-1";
 
-export function AgentUpgradeBlock({
-  limit,
-  planResolved,
-  context,
-}: {
+type AgentUpgradeBlockProps = {
   limit: number;
   planResolved: boolean;
   context?: React.ReactNode;
-}) {
+};
+
+export function AgentUpgradeBlock(props: AgentUpgradeBlockProps) {
   const organization = useOrganization();
+  return <AgentUpgradeBlockView {...props} upgradePath={v3BillingPath(organization)} />;
+}
 
+/** The block without the organization lookup, so it renders outside an org route. */
+export function AgentUpgradeBlockView({
+  limit,
+  planResolved,
+  context,
+  upgradePath,
+}: AgentUpgradeBlockProps & { upgradePath: string }) {
   return (
     <div className={SLOT}>
       {context}
@@ -32,24 +39,34 @@ export function AgentUpgradeBlock({
           </span>
         </div>
         <p className="text-xs text-text-dimmed">{messageQuotaReachedCopy(limit, planResolved)}</p>
-        <LinkButton variant="primary/small" to={v3BillingPath(organization)} fullWidth>
+        <LinkButton variant="primary/small" to={upgradePath} fullWidth>
           Upgrade
         </LinkButton>
       </div>
     </div>
   );
 }
 
-export function AgentQuotaNotice({ remaining, limit }: { remaining: number; limit: number }) {
+type AgentQuotaNoticeProps = { remaining: number; limit: number };
+
+export function AgentQuotaNotice(props: AgentQuotaNoticeProps) {
   const organization = useOrganization();
+  return <AgentQuotaNoticeView {...props} upgradePath={v3BillingPath(organization)} />;
+}
 
+/** The notice without the organization lookup, so it renders outside an org route. */
+export function AgentQuotaNoticeView({
+  remaining,
+  limit,
+  upgradePath,
+}: AgentQuotaNoticeProps & { upgradePath: string }) {
   return (
-    <div className="flex shrink-0 items-center gap-1 bg-background-bright px-3 pb-2 text-xs text-text-dimmed">
+    <div className="flex items-center gap-1 text-xs text-text-dimmed">
       <span>
         {remaining} of {limit} free messages left
       </span>
       <span aria-hidden>·</span>
-      <Link to={v3BillingPath(organization)} className={textLinkClassName()}>
+      <Link to={upgradePath} className={textLinkClassName()}>
         Upgrade
       </Link>
     </div>
 
@@ -11,15 +11,11 @@ import {
 import { useLocation, useNavigate } from "@remix-run/react";
 import { useTriggerChatTransport } from "@trigger.dev/sdk/chat/react";
 import { useCallback, useEffect, useMemo, useRef, useState, type MutableRefObject } from "react";
-import { PlusIcon } from "~/assets/icons/PlusIcon";
-import { Button } from "~/components/primitives/Buttons";
-import { ShortcutKey } from "~/components/primitives/ShortcutKey";
 import { useToast } from "~/components/primitives/Toast";
 import { AgentQuotaNotice, AgentUpgradeBlock } from "./AgentUpgradeGate";
-import { DashboardAgentComposer } from "./DashboardAgentComposer";
+import { DashboardAgentComposer, NewChatButton } from "./DashboardAgentComposer";
 import { DashboardAgentContextBanner } from "./DashboardAgentContextBanner";
 import { DashboardAgentHero } from "./DashboardAgentHero";
-import { NEW_CHAT_SHORTCUT } from "./DashboardAgentHeader";
 import { DashboardAgentMessages, type TurnActivity } from "./DashboardAgentMessages";
 import { MESSAGE_TOO_LARGE_ERROR } from "./message-limits";
 import {
@@ -646,37 +642,21 @@ export function DashboardAgentChat({
           context={contextBanner}
         />
       ) : (
-        <>
-          <DashboardAgentComposer
-            value={input}
-            onChange={setInput}
-            onSubmit={() => submit(input)}
-            onStop={stop}
-            isStreaming={isStreaming}
-            focusKey={sendRequest?.seq}
-            context={contextBanner}
-            trailingAction={
-              showNewChat && (
-                <Button
-                  variant="minimal/small"
-                  className="aspect-square h-6 shrink-0 p-1 mr-[6px]"
-                  aria-label="New chat"
-                  tooltip={
-                    <span className="flex items-center">
-                      New chat
-                      <ShortcutKey shortcut={NEW_CHAT_SHORTCUT} variant="medium" />
-                    </span>
-                  }
-                  onClick={onNewChat}
-                  LeadingIcon={<PlusIcon className="size-4 text-text-dimmed" />}
-                />
-              )
-            }
-          />
-          {quota.kind === "within" && (
-            <AgentQuotaNotice remaining={quota.remaining} limit={quota.limit} />
-          )}
-        </>
+        <DashboardAgentComposer
+          value={input}
+          onChange={setInput}
+          onSubmit={() => submit(input)}
+          onStop={stop}
+          isStreaming={isStreaming}
+          focusKey={sendRequest?.seq}
+          context={contextBanner}
+          trailingAction={showNewChat && <NewChatButton onClick={onNewChat} />}
+          notice={
+            quota.kind === "within" ? (
+              <AgentQuotaNotice remaining={quota.remaining} limit={quota.limit} />
+            ) : undefined
+          }
+        />
       )}
     </>
   );
 
@@ -0,0 +1,88 @@
+import { createElement, type ReactElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { OperatingSystemContextProvider } from "~/components/primitives/OperatingSystemProvider";
+import { ShortcutsProvider } from "~/components/primitives/ShortcutsProvider";
+import { AGENT_AI_DISCLOSURE } from "./AgentAiDisclosure";
+import {
+  DashboardAgentComposer,
+  type DashboardAgentComposerLayout,
+} from "./DashboardAgentComposer";
+import { AgentPanelColumn } from "./panel-layout";
+
+const CONTEXT = "context-slot";
+const TRAILING_ACTION = "trailing-action-slot";
+const NOTICE = "notice-slot";
+
+function render(element: ReactElement) {
+  return renderToStaticMarkup(
+    createElement(
+      OperatingSystemContextProvider,
+      { platform: "mac" },
+      createElement(ShortcutsProvider, null, element)
+    )
+  );
+}
+
+function composer(layout: DashboardAgentComposerLayout, isStreaming = false) {
+  return createElement(DashboardAgentComposer, {
+    layout,
+    value: "Why did this run fail?",
+    onChange: () => {},
+    onSubmit: () => {},
+    onStop: () => {},
+    isStreaming,
+    context: createElement("span", null, CONTEXT),
+    trailingAction: createElement("span", null, TRAILING_ACTION),
+    notice: createElement("span", null, NOTICE),
+  });
+}
+
+function occurrences(html: string, needle: string) {
+  return html.split(needle).length - 1;
+}
+
+/**
+ * Markup order stands in for the layout: the panel is everything from the text box up to the
+ * notice, which sits under it. The webapp renders on the server, so this needs no DOM.
+ */
+describe.each(["docked", "hero"] as const)("the %s composer", (layout) => {
+  it("leaves the AI disclosure to the panel column around it", () => {
+    expect(render(composer(layout))).not.toContain(AGENT_AI_DISCLOSURE);
+  });
+
+  it("keeps the context, the trailing action and Send inside the panel, once each", () => {
+    const html = render(composer(layout));
+    const textBox = html.indexOf("<textarea");
+    const notice = html.indexOf(NOTICE);
+    for (const needle of [CONTEXT, TRAILING_ACTION, 'aria-label="Send"']) {
+      expect(occurrences(html, needle), needle).toBe(1);
+      expect(html.indexOf(needle), needle).toBeGreaterThan(textBox);
+      expect(html.indexOf(needle), needle).toBeLessThan(notice);
+    }
+  });
+
+  it("puts Stop where Send was while a turn is in flight", () => {
+    const html = render(composer(layout, true));
+    expect(html).not.toContain('aria-label="Send"');
+    const stop = html.indexOf('aria-label="Stop generating"');
+    expect(stop).toBeGreaterThan(html.indexOf(TRAILING_ACTION));
+    expect(stop).toBeLessThan(html.indexOf(NOTICE));
+  });
+});
+
+describe("the panel column", () => {
+  it("ends with the AI disclosure, once, under the composer and its notice", () => {
+    const html = render(createElement(AgentPanelColumn, { fullscreen: false }, composer("docked")));
+    expect(occurrences(html, AGENT_AI_DISCLOSURE)).toBe(1);
+    expect(html.indexOf(AGENT_AI_DISCLOSURE)).toBeGreaterThan(html.indexOf(NOTICE));
+  });
+
+  it("ends with it whatever fills the panel, so it stays put from new chat to chat", () => {
+    const html = render(
+      createElement(AgentPanelColumn, { fullscreen: true }, createElement("div", null, "hero-slot"))
+    );
+    expect(occurrences(html, AGENT_AI_DISCLOSURE)).toBe(1);
+    expect(html.indexOf(AGENT_AI_DISCLOSURE)).toBeGreaterThan(html.indexOf("hero-slot"));
+  });
+});