Skip to content

Polish reusable dialog and dashboard primitives - #15

Open
TheGreatAxios wants to merge 12 commits into
mainfrom
cl-5879-shell-mock-v2-react-ui
Open

Polish reusable dialog and dashboard primitives#15
TheGreatAxios wants to merge 12 commits into
mainfrom
cl-5879-shell-mock-v2-react-ui

Conversation

@TheGreatAxios

Copy link
Copy Markdown
Contributor

What changed

  • move responsive dialog sizing, scrolling, footer, and close-control craft into react-ui
  • add semantic interactive dashboard stat tiles
  • add focused tests and showcase stories for both primitives

Validation

  • bun run typecheck
  • bun run lint
  • bun run test
  • bun run build

Merge order

This PR must merge before corbitsdev/workbench#52. Workbench will then update its react-ui pin and remove product-local component styling.

Related: CL-5879

Add KindCardGrid for selectable kind pickers, blur dialog overlay with
bordered footer and field labels, and warning/shared/access badge tones.
New dataviz components for run-trace timelines and dense category
rankings used by cost-by-model and calls-by-tool surfaces.
The stock sonner surface slid up from the corner, stacked, and kept its
rounded card look. Mutation confirmations in the shell design are one
plain-text line that fades in over the bottom center, holds for 1.8s,
and fades out; a new confirmation dismisses the current one instead of
stacking. Each toast() call takes a fresh id — reusing one id inherits
the unmount sonner schedules while a dismissed toast is still animating
out, which would swallow a message fired in that window. The surface
introduces the theme's --border-strong and --shadow tokens: floating
chrome separates itself with the stronger border, not depth, so the
shadow ships as none and stays the single knob for elevation.
* RichEmptyState: optional actionSize to match denser host chrome

ActionControl hardcoded Button size="md". A stage empty-state embedded
under a top bar wants its actions at the same sm scale as the bar
around it, so actionSize is now threaded through, defaulting to md.

* FilterChip: give the unselected state a visible border

Unselected chips rendered as border-transparent bg-transparent — bare
text with no affordance that they are clickable. The unselected state
now carries the same border-border ring the selected state's card
treatment sits inside, so both states read as one pill family.

* CommandPalette: add inputAccessory and footer slots

No slot existed for a leading scope chip in the input row or a
keyboard-hint legend under the results. inputAccessory renders inside
the input row, ahead of the input; footer renders as a pinned strip
below the results (independent of the load-more control).

* SidebarRail: forward per-item data-* attributes and render id

SidebarRailItem carried no way to attach a DOM id or data-* attribute
to a specific item, so a consumer had no hook to target one rail
button (a tour, a spotlight). Extra item keys now spread onto the
rendered button, and the item's id renders as the button's DOM id.

* Add BlockCard and RiskBadge, lifted from Workbench's chat-ui

Generic versions of Workbench's generative-UI block frame and risk
callout: a zero-radius bordered card with a pulse-dot header, and a
tone-driven risk label. Adds --ok/--warn theme tokens (light/dark,
matching Workbench's app.css) since the risk tones need colours the
theme did not carry yet.

* SidebarItemRow: expose row radius and selected background as tokens

rounded-md and bg-primary/10 were hardcoded utilities a consumer's own
stylesheet could not out-cascade without matching specificity. The row
now reads --sidebar-row-radius and --sidebar-row-selected-bg (defined
in theme.css, defaulting to the previous values), so a consumer can
override them once on a scoping element instead of fighting the
utility.

* RiskBadge: low risk reads muted, not --ok green

The shell mock's only approve card renders its risk line in --warn
regardless of level — there's no green "all clear" treatment for risk.
Map low to --muted-foreground so only medium/high draw the eye; --ok
stays reserved for step/delivery "done" states.
…persedes this branch's shell-mock content plus the trace-markers/tooltip work

# Conflicts:
#	src/ui/trace-waterfall.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant