Coding Agent Input Field too tall #14

New issue

Closed

opened 2026-09-13 19:34:09 -04:00 by cmoriarty · 1 comment

cmoriarty commented 2026-09-13 19:34:09 -04:00

Owner

Copy link

The Input field for when I can type messages to the coding agent is taller than the buttons next to it. I think it should be the same size as the buttons.

Also, remove the helper text "Queue is non-destructive and lands after this turn. Redirect stops the turn first.", and add an info icon in the top right of this bottom bar that explains the input, stop, queue and redirect buttons. Hover over should show the info immediately, no delay.

The Input field for when I can type messages to the coding agent is taller than the buttons next to it. I think it should be the same size as the buttons. Also, remove the helper text "Queue is non-destructive and lands after this turn. Redirect stops the turn first.", and add an info icon in the top right of this bottom bar that explains the input, stop, queue and redirect buttons. Hover over should show the info immediately, no delay. 

image.png

42 KiB

c14_bar.png

17 KiB

c14_tip.png

71 KiB

cmoriarty referenced this issue 2026-09-14 00:57:23 -04:00

Implementation steps delegate reading and testing to background subagents #18

cmoriarty referenced this issue from a commit 2026-09-14 01:33:07 -04:00

Composer: box the height of its buttons, an ⓘ instead of a helper line (#14)

cmoriarty commented 2026-09-14 01:33:55 -04:00

Author

Owner

Copy link

Shipped as the OpenSpec change composer-compact (archived as openspec/changes/archive/2026-09-14-composer-compact/; composer is a new main spec). Commit 083b2bc.

What changed

• The message box is now the same height as Stop, Queue/Send and Redirect: 44px, down from 52px. It still grows as you add lines.
• The helper line under the bar is gone in every state. Its other sentences only repeated the placeholder ("Select a step…", "not an agent step") or the Send/Queue label.

• An ⓘ at the top right of the bar explains the message box, ■ Stop (Esc), ⏎ Send / Queue and ⌘⏎ Redirect. It is a CSS tooltip rather than a title, so it shows on the first frame of hover with no delay, and it also opens on keyboard focus. It sits in its own gutter, so it never covers Redirect.

Decision to review: on a phone (375px) the box is stacked above the buttons rather than beside them, and the placeholder wraps. At 44px its second line was cut off, so on narrow screens the box keeps room for two lines. The equal-height rule applies only where the box and buttons are side by side (640px and up).

Tested: e2e/composer.spec.ts against the fake osfd. It checks that the box and Stop, Queue and Redirect are the same height on a running step, and the box and Send on an idle one. It checks that the helper sentences are gone. For the tooltip, it checks that it is hidden at rest, visible on the next animation frame after hover, names all four controls with their keys, is the icon's aria-describedby, hides on leave, shows on Tab focus, and sits clear of Redirect. At 375px it checks there is no horizontal overflow, the box holds two lines, and the icon doesn't cover the box. tsc, vitest 332, oxlint and the full Playwright suite (26 passed, 3 skipped for live osfd) all pass.

Shipped as the OpenSpec change `composer-compact` (archived as `openspec/changes/archive/2026-09-14-composer-compact/`; `composer` is a new main spec). Commit 083b2bc. **What changed** - The message box is now the same height as Stop, Queue/Send and Redirect: 44px, down from 52px. It still grows as you add lines. - The helper line under the bar is gone in every state. Its other sentences only repeated the placeholder ("Select a step…", "not an agent step") or the Send/Queue label.  - An **ⓘ** at the top right of the bar explains the message box, **■ Stop** (Esc), **⏎ Send / Queue** and **⌘⏎ Redirect**. It is a CSS tooltip rather than a `title`, so it shows on the first frame of hover with no delay, and it also opens on keyboard focus. It sits in its own gutter, so it never covers Redirect.  **Decision to review:** on a phone (375px) the box is stacked above the buttons rather than beside them, and the placeholder wraps. At 44px its second line was cut off, so on narrow screens the box keeps room for two lines. The equal-height rule applies only where the box and buttons are side by side (640px and up). **Tested:** `e2e/composer.spec.ts` against the fake osfd. It checks that the box and Stop, Queue and Redirect are the same height on a running step, and the box and Send on an idle one. It checks that the helper sentences are gone. For the tooltip, it checks that it is hidden at rest, visible on the next animation frame after hover, names all four controls with their keys, is the icon's `aria-describedby`, hides on leave, shows on Tab focus, and sits clear of Redirect. At 375px it checks there is no horizontal overflow, the box holds two lines, and the icon doesn't cover the box. tsc, vitest 332, oxlint and the full Playwright suite (26 passed, 3 skipped for live osfd) all pass.

cmoriarty closed this issue 2026-09-14 01:33:55 -04:00

Sign in to join this conversation.

No Branch/Tag specified

Branches Tags

main

archive/prefect-kestra-experiments

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

cmoriarty/braid#14

No description provided.