R8a: stabilize composer control width, explain the Reasoning tooltip (findings #7, #11) (#179)

Two composer-control issues from the audit, same component.

- Finding #7: .control-value used max-width (a cap, not a fixed size), so
  switching reasoning levels (or the active model) resized the button
  itself, visibly shoving the adjacent control sideways. Changed to a fixed
  width - both the Reasoning and Model controls now stay one stable size
  regardless of which option is selected; long model ids still ellipsis-
  truncate, they just no longer resize the button while doing it.

- Finding #11: the Reasoning button had no title at all, unlike its Attach
  and Model neighbours, which both explain their disabled state. Added a
  conditional title distinguishing "provider doesn't support this" from
  "a request is in flight" - the same two reasons the button can be
  disabled for.

Live-verified against a running instance: the Reasoning control's rendered
width stayed at 238.5625px across all four levels (Off/Low/Medium/High).

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Author: dovvnloading

web_ui/src/app/chrome/Composer.test.tsx

@@ -344,6 +344,52 @@ describe("Composer", () => {
     expect(container.querySelector('[data-overlay-trigger="reasoning"]')).not.toBeDisabled();
   });
 
+  it("R8a finding #11: Reasoning trigger explains itself via title when disabled for provider reasons", () => {
+    const { store } = makeStore({
+      composer: {
+        capabilities: { ...initialComposerState.capabilities, reasoningSelection: false },
+        request: { ...initialComposerState.request, canSend: true },
+      },
+    });
+    const { container } = render(
+      <OverlayProvider>
+        {/* @ts-expect-error - test double */}
+        <Composer store={store} sceneStore={makeSceneStore().sceneStore} />
+      </OverlayProvider>,
+    );
+    expect(container.querySelector('[data-overlay-trigger="reasoning"]')).toHaveAttribute(
+      "title",
+      "Reasoning mode is only available for local Ollama and Llama.cpp providers",
+    );
+  });
+
+  it("R8a finding #11: Reasoning trigger explains itself via title when disabled because a request is busy", () => {
+    const { store } = makeStore();
+    const { container } = render(
+      <OverlayProvider>
+        {/* @ts-expect-error - test double */}
+        <Composer store={store} sceneStore={makeSceneStore().sceneStore} />
+      </OverlayProvider>,
+    );
+    expect(container.querySelector('[data-overlay-trigger="reasoning"]')).toHaveAttribute(
+      "title",
+      "Wait for the current response to finish",
+    );
+  });
+
+  it("R8a finding #11: Reasoning trigger has no title at all when it is enabled - nothing to explain", () => {
+    const { store } = makeStore({
+      composer: { request: { ...initialComposerState.request, canSend: true } },
+    });
+    const { container } = render(
+      <OverlayProvider>
+        {/* @ts-expect-error - test double */}
+        <Composer store={store} sceneStore={makeSceneStore().sceneStore} />
+      </OverlayProvider>,
+    );
+    expect(container.querySelector('[data-overlay-trigger="reasoning"]')).not.toHaveAttribute("title");
+  });
+
   it("the Attach button is disabled when capabilities.attachments is false, even with canSend true", () => {
     const { store } = makeStore({
       composer: {

web_ui/src/app/chrome/Composer.tsx

@@ -143,6 +143,18 @@ export function Composer({ store, sceneStore }: { store: ComposerStore; sceneSto
           aria-haspopup="dialog"
           aria-pressed={overlays.isOpen("reasoning")}
           disabled={!composer.capabilities.reasoningSelection || !composer.request.canSend}
+          /* R8a (UI/UX issue list finding #11): its two disabled-reason
+             neighbours (Attach, Model) both explain themselves via title -
+             this button had none at all, so a greyed-out Reasoning chip in
+             API mode looked like just another broken control rather than a
+             provider limitation. */
+          title={
+            !composer.capabilities.reasoningSelection
+              ? "Reasoning mode is only available for local Ollama and Llama.cpp providers"
+              : !composer.request.canSend
+                ? "Wait for the current response to finish"
+                : undefined
+          }
           onClick={() => overlays.toggle("reasoning", "popover")}
         >
           <span className="control-kicker">Reasoning</span>

web_ui/src/app/styles.css

@@ -1550,10 +1550,18 @@ body,
   text-transform: uppercase;
 }
 
+/* R8a (UI/UX issue list finding #7): was max-width, a cap rather than a
+   fixed size, so a shorter label (e.g. reasoning level "Off") left the
+   button narrower than a longer one ("Medium"), and the adjacent control
+   visibly shifted sideways every time the value changed. A fixed width
+   keeps both the Reasoning and Model controls one stable size regardless
+   of which option/model is currently selected - long model ids still
+   ellipsis-truncate via the properties below, they just no longer resize
+   the button itself while doing it. */
 .control-value {
   font-size: 11px;
   font-weight: 600;
-  max-width: 140px;
+  width: 140px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;