Show active model in compact follow-up composer

apps/app/src/components/promptbox/FollowUpPromptBox.test.tsx

@@ -83,6 +83,7 @@ vi.mock("@/components/promptbox/PromptBoxInternal", () => ({
   PromptBoxInternal: ({
     footerStart,
     compact,
+    value,
     onSubmit,
     onEscape,
     blurOnPointerSubmit,
@@ -98,7 +99,9 @@ vi.mock("@/components/promptbox/PromptBoxInternal", () => ({
     compact?: {
       isCompact: boolean;
       placeholder?: string;
+      summary?: ReactNode;
     };
+    value: string;
     onSubmit: () => void;
     onEscape?: () => void;
     blurOnPointerSubmit?: boolean;
@@ -141,7 +144,11 @@ vi.mock("@/components/promptbox/PromptBoxInternal", () => ({
             : null;
         }}
       />
-      {compact?.isCompact ? <span>{compact.placeholder}</span> : null}
+      {compact?.isCompact
+        ? ((value.length === 0 ? compact.summary : undefined) ?? (
+            <span>{compact.placeholder}</span>
+          ))
+        : null}
       <button
         type="button"
         onClick={(event) => {
@@ -1318,4 +1325,15 @@ describe("FollowUpPromptBox", () => {
 
     expect(screen.getByText("Stopping side chat...")).toBeTruthy();
   });
+
+  it("shows the selected model when the empty composer is compact", () => {
+    mocks.isCompactViewport = true;
+    const props = createFollowUpPromptBoxProps({ kind: "ready" });
+    if (props.composer === null) throw new Error("Missing composer");
+    props.composer.message = "";
+
+    render(<FollowUpPromptBox {...props} />);
+
+    expect(screen.getByText("GPT-5")).toBeTruthy();
+  });
 });

apps/app/src/components/promptbox/FollowUpPromptBox.tsx

@@ -42,6 +42,7 @@ import {
   type TypeaheadConfig,
 } from "@/components/promptbox/PromptBoxInternal";
 import { usePromptVoice } from "@/components/promptbox/usePromptVoice";
+import { formatModelLabel } from "@/hooks/useThreadCreationOptions";
 import { PermissionModePicker } from "@/components/pickers/PermissionModePicker";
 import {
   ExecutionControls,
@@ -308,16 +309,32 @@ function FollowUpPromptBoxWithComposer({
     widePromptBoxCollapsedFor === collapseResetKey;
   const isPromptBoxCompact =
     isWidePromptBoxCollapsed || (isCompactViewport && !isInteractionExpanded);
+  const compactModelValue =
+    execution.model.active?.model ?? execution.model.selected;
+  const compactModelOption =
+    execution.model.options.find(
+      (option) => option.value === compactModelValue,
+    ) ??
+    execution.model.moreOptions.find(
+      (option) => option.value === compactModelValue,
+    );
+  const compactModelLabel =
+    compactModelValue.length > 0
+      ? (compactModelOption?.label ?? formatModelLabel(compactModelValue))
+      : undefined;
   const compactConfig = useMemo(
     () =>
       isCompactViewport || isWidePromptBoxCollapsed
         ? {
             isCompact: isPromptBoxCompact,
             placeholder: composer.compactPromptPlaceholder,
+            summary: canSubmit ? compactModelLabel : undefined,
           }
         : undefined,
     [
       composer.compactPromptPlaceholder,
+      canSubmit,
+      compactModelLabel,
       isCompactViewport,
       isPromptBoxCompact,
       isWidePromptBoxCollapsed,

apps/app/src/components/promptbox/PromptBoxInternal.compact-summary.test.tsx

@@ -0,0 +1,49 @@
+// @vitest-environment jsdom
+
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { EMPTY_ORDERED_MENTION_SUGGESTIONS } from "@bb/client-core";
+import {
+  INERT_TYPEAHEAD_COMMAND_CONFIG,
+  PromptBoxInternal,
+} from "./PromptBoxInternal";
+
+afterEach(cleanup);
+
+it("shows a compact summary instead of the empty-editor placeholder", () => {
+  const compact = {
+    isCompact: true,
+    placeholder: "Ask a follow-up",
+    summary: <span>GPT-5</span>,
+  };
+
+  render(
+    <PromptBoxInternal
+      value=""
+      mentionRanges={[]}
+      onChange={vi.fn()}
+      onSubmit={vi.fn()}
+      mentionMenuPlacement="bottom"
+      typeahead={{
+        mention: {
+          results: EMPTY_ORDERED_MENTION_SUGGESTIONS,
+          isLoading: false,
+          isError: false,
+          onQueryChange: vi.fn(),
+        },
+        command: INERT_TYPEAHEAD_COMMAND_CONFIG,
+      }}
+      compact={compact}
+      containerCompactPlaceholder="Ask a follow-up"
+    />,
+  );
+
+  const editor = document.querySelector(".ProseMirror");
+  const form = document.querySelector("[data-promptbox]");
+  expect(editor?.getAttribute("data-placeholder")).toBe("");
+  expect(editor?.getAttribute("aria-label")).toBe("Ask a follow-up");
+  expect(form?.getAttribute("style")).toContain(
+    '--promptbox-container-compact-placeholder: ""',
+  );
+  expect(screen.getByText("GPT-5")).toBeTruthy();
+});

apps/app/src/components/promptbox/PromptBoxInternal.tsx

@@ -336,6 +336,7 @@ export interface AttachmentsConfig {
 interface PromptBoxCompactConfig {
   isCompact: boolean;
   placeholder?: string;
+  summary?: ReactNode;
 }
 
 export interface HistoryConfig {
@@ -1180,20 +1181,6 @@ export function PromptBoxInternal({
     heightAnimationFromRef.current =
       formElement?.getBoundingClientRect().height ?? null;
   }, []);
-  useLayoutEffect(() => {
-    const formElement = formRef.current;
-    if (!formElement) return;
-    if (containerCompactPlaceholder === undefined) {
-      formElement.style.removeProperty(
-        "--promptbox-container-compact-placeholder",
-      );
-      return;
-    }
-    formElement.style.setProperty(
-      "--promptbox-container-compact-placeholder",
-      JSON.stringify(containerCompactPlaceholder),
-    );
-  }, [containerCompactPlaceholder]);
   const editorRef = useRef<Editor | null>(null);
   const editorScrollContainerRef = useRef<HTMLDivElement>(null);
   const revealSelectionFrameRef = useRef<number | null>(null);
@@ -1361,6 +1348,26 @@ export function PromptBoxInternal({
   const effectivePlaceholder = showCompactLayout
     ? (compact.placeholder ?? placeholder)
     : placeholder;
+  const compactSummary =
+    showCompactLayout && value.length === 0 ? compact?.summary : undefined;
+  const editorPlaceholder =
+    compactSummary === undefined ? effectivePlaceholder : "";
+  const effectiveContainerCompactPlaceholder =
+    compactSummary === undefined ? containerCompactPlaceholder : "";
+  useLayoutEffect(() => {
+    const formElement = formRef.current;
+    if (!formElement) return;
+    if (effectiveContainerCompactPlaceholder === undefined) {
+      formElement.style.removeProperty(
+        "--promptbox-container-compact-placeholder",
+      );
+      return;
+    }
+    formElement.style.setProperty(
+      "--promptbox-container-compact-placeholder",
+      JSON.stringify(effectiveContainerCompactPlaceholder),
+    );
+  }, [effectiveContainerCompactPlaceholder]);
   const pluginComposerHost = usePluginComposerHost();
   const composerInputLocked = useComposerInputLock(
     pluginComposerHost?.textEffectKey ?? null,
@@ -1604,7 +1611,7 @@ export function PromptBoxInternal({
       editorProps: {
         attributes: {
           "aria-label": effectivePlaceholder,
-          "data-placeholder": effectivePlaceholder,
+          "data-placeholder": editorPlaceholder,
           ...(onModifierSubmit ? { "aria-keyshortcuts": "Meta+Enter" } : {}),
           autocomplete: "off",
           class: cn(
@@ -1828,14 +1835,14 @@ export function PromptBoxInternal({
   }, [editor, isPointerCoarse, scheduleRevealEditorSelection]);
 
   useLayoutEffect(() => {
-    placeholderRef.current = effectivePlaceholder;
+    placeholderRef.current = editorPlaceholder;
     if (!editor) return;
 
     editor.view.dom.setAttribute("aria-label", effectivePlaceholder);
-    editor.view.dom.setAttribute("data-placeholder", effectivePlaceholder);
+    editor.view.dom.setAttribute("data-placeholder", editorPlaceholder);
     editor.view.dom.setAttribute("enterkeyhint", editorEnterKeyHint);
     editor.view.dispatch(editor.state.tr);
-  }, [editor, editorEnterKeyHint, effectivePlaceholder]);
+  }, [editor, editorEnterKeyHint, editorPlaceholder, effectivePlaceholder]);
 
   useEffect(() => {
     if (!editor) return;
@@ -3068,6 +3075,14 @@ export function PromptBoxInternal({
               layout={editorLayout}
               resolveMentionLink={mentionResolveLink}
             />
+            {compactSummary !== undefined ? (
+              <div
+                data-promptbox-compact-summary=""
+                className="pointer-events-none absolute inset-y-0 left-4 right-14 flex min-w-0 items-center text-sm text-subtle-foreground"
+              >
+                <div className="truncate">{compactSummary}</div>
+              </div>
+            ) : null}
           </div>
 
           {showTypeaheadMenu ? (