fix(web): rebuild the API keys Agent Setup panel - #278
Closed
Menci wants to merge 12 commits into
Closed
Conversation
Menci
force-pushed
the
fluent-dashboard-fixups
branch
from
July 28, 2026 14:00
056d9ac to
ee60eea
Compare
The panel stacked an agent tab row, a Connection method dropdown, and a Platform dropdown above the command, which read as three unrelated switches, and it laid the model pickers out in two grids of different widths. Give the panel a sidebar: the connection method sits on top as a horizontal tab list, agent navigation below it, so the two axes read apart by shape. The platform switch moves onto the code block header where the language caption sat, and the command block itself carries the "select a key" and "preparing" states as a shell comment, keeping Copy disabled rather than floating a message bar above the form. Every configuration field now shares one column track. The tracks floor at zero and the wrapped controls zero their native `min-width`, because a combobox otherwise reports its input width as min-content and pushes the whole column past the panel. Field explanations move from trailing hint text onto Fluent's InfoLabel info button through a shared `infoLabelSlot`. The panel title and the key it uses move into the card itself: the heading reads "Setup Your Agents" and the key is named in the note under the command, where it applies. The Codex mark carried a full-bleed app-icon plate, which rendered its glyph a quarter smaller than every other provider mark at the same box size; the plate is gone and the viewBox is tightened to the glyph.
Menci
force-pushed
the
fluent-dashboard-fixups
branch
from
July 28, 2026 14:33
ee60eea to
17341d0
Compare
Menci
changed the title
The list expressed its selection with a hand-drawn dot and a brand-tinted row, and kept four icon buttons resident in an Actions column. Both are shapes Fluent already owns. Selection moves to DataGrid's single-selection radio column, which carries the row's selected state and keyboard model for us. The row actions move into TableCellActions on the last cell, where copy stays a direct button and edit, rotate, and delete collapse into an overflow menu; the Actions column goes away, since it only reserved width for controls that are hidden until the row is hovered or focused.
TableCellActions sits at opacity 0 until its row is hovered or holds focus, and an open menu portals its popover out of that row. Travelling from the trigger to a menu item therefore faded the trigger out from under its own menu. Track the menu's open state and pin the actions visible while it is open.
Hover-revealed actions hid four of the row's five affordances behind a pointer the operator has to guess at, and touch input never reveals them at all. Put the actions back in a column of their own, all four resident, and let the selection radio render unconditionally rather than fading in with the row. Drop the fixed column widths with them: the tracks summed to less than the panel, leaving an unallocated strip on the right, and letting the grid distribute its own row width fills it.
Fluent gives every cell `flex: 1 1 0`, so the column holding four icon buttons claimed an equal share of the row and left its buttons stranded mid-column with the rest of that share empty behind them. Pin the column to its content width and align it to the row's trailing edge; the space it gives up goes to the columns that carry text.
The header and the body are separate flex rows, so content-sizing the actions column through CSS sized the header to its label and the body to its four buttons, and every column inherited the difference — the whole row read as misaligned. Column widths move to the grid's own sizing state, which the header and the body both read, with per-column minimums that keep the dates on one line and let the name and upstream columns give up space first. The container's leftover width lands on the last column, so the actions column absorbs it and parks its buttons at the trailing edge.
The grid's column sizing writes width, min-width and max-width inline on every cell, and fits those widths to a container measurement that leaves out the selection cell — so the columns stopped 96px short of the row's trailing edge and no amount of flex could stretch them over the gap. Drop the sizing options and let the cells share the row equally, which covers it exactly and keeps the header and the body on identical widths. The actions column right-aligns its buttons and its label, so they land on the row's trailing edge rather than mid-column.
Delete sat in the same neutral grey as copy, edit, and rotate, so the one irreversible action in the row read as another routine one. Give it the red foreground the users page already uses for the same action.
A red icon resident in every row shouts before anyone reaches for it and breaks the row's rhythm. Keep delete neutral at rest and turn it red on hover, on press, and on keyboard focus — the moments where the warning is about to matter.
Delete was resident red in the users table, neutral everywhere else, and built from a bare Button in the proxy and model-alias tables, so the one irreversible row action looked different on every page. TooltipIconButton grows a `danger` flag that reddens the icon on hover, press, and keyboard focus, and every table's delete adopts it. The proxy and model-alias rows move onto the shared button as well, which also gives them the tooltip their neighbours already had. The colour is guarded by `:enabled`, so a delete the operator may not press stays grey under the pointer.
Owner
Author
|
Codex agent: Consolidating this follow-up into #277 as requested; the branch remains available while its changes are merged and verified there. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Stacked on #277. Scope: the API Keys page only — the font work is #280 and the login-page copy is #281.
Summary
Connection methoddropdownPlatformfieldmin-width, because a combobox otherwise reports its input width as min-content and pushes the column past the panelInfoLabelinfo button through a sharedinfoLabelSlothelperVerification
pnpm run lintpnpm --filter @floway-dev/web run typecheckpnpm --filter @floway-dev/web run test— 33 files, 188 tests passed