fix(web/playground): tighten grid, fix Workspace void, unify Create chat composer

[sabbour-squad-frontend]

Playground visual/UX polish (4 issues)

A. Components tab grid tightness + empty-card sprawl

Before: 8 cards per row on wide viewports; empty "No preview available" cards took full ~180px body like real preview cards, making core/azure/aks/github sections feel sparse and noisy.
After: Responsive grid capped at repeat(auto-fill, minmax(260px, 1fr)) with a 320px card max — 4–5 cards/row at standard viewports. Pack sections where every component lacks a registered preview (azure, aks, github) now render as compact chip-style cards (~88px min-height) with a single explanatory banner (Previews unavailable for pack-only components — showing compact cards.) replacing the wall of identical empty states.

B. Workspace tab black void below the editor

Before: Workspace opened server.ts in a viewer clamped to ~45% width/height, leaving a large black rectangle to the right of the editor.
After: Added a fillContainer prop to FileViewer (non-default; opt-in) that overrides the chat-side-panel width: 45% / maxWidth: 55% sizing with width: 100% + flex: 1. Playground Workspace now renders the viewer edge-to-edge in the right pane. Main App chat layout is unchanged because fillContainer defaults to false.

C. Create tab chat input styled inconsistently with main chat

Before: Create tab used a bespoke hero-style input — different border radius, different padding, larger font, custom send icon (commands/go.svg).
After: Create composer styles mirror the main chat composer — borderRadiusLarge, stroke-1 border, spacing-s/spacing-m padding, fontSizeBase300 + lineHeightBase300, and the same ArrowRight24Regular icon on the send button. The Sparkle "Inspire me" affordance is preserved. Create now reads as a sibling chat entry point.

D. Non-core packs sparse (azure/aks/github all "No preview available")

Covered by the Issue A compact empty-state + banner.

Validation

• npm run lint — 0 errors, 59 pre-existing warnings (unchanged)
• CI=1 npm test -- --reporter=dot — 900 passed, 3 skipped, 159 todo (no regressions)

Files changed

• packages/web/src/pages/Playground.tsx — grid, compact card mode, composer style, ArrowRight send icon
• packages/web/src/components/FileManager/FileViewer.tsx — fillContainer prop
• packages/web/src/pages/PlaygroundWorkspace.tsx — pass fillContainer
• .changeset/polish-playground-grid-workspace-create.md

🤖 Created by sabbour-squad-frontend

[github-actions]

Docs & changeset gate

• ✅ changeset added (.changeset/*.md)
• ℹ️ docs-site/docs/ not updated — consider updating if user-facing behavior or UI changed
• ℹ️ docs-site/docs/extending/api-endpoints.md not updated — consider updating if the API surface changed

Changeset present. Good.

---

Hard gate for user-facing package changes without docs or changeset. ✅ = done, ⚠️ = likely needed, ℹ️ = optional or bypassed.

[github-actions]

👀 Squad review trail

Current head: 284b018
Last update: Label applied: nibbler:approved.
Gate path: Standard path — both leela:approved and zapp:approved are required on the current head.
Gate snapshot: ✅ squad/review-gate should be green on the current head.
Reviewer labels

• Leela: ✅ approved via leela:approved
• Zapp: ✅ approved via zapp:approved
  Active labels
• leela:approved — Architecture review approved
• zapp:approved — Security review approved

This sticky comment is maintained automatically so label-based squad review leaves an on-PR rationale even when the gate itself is status-check driven.

[sabbour-squad-lead]

🔒 Zapp — Security Review

Verdict: ✅ Approve — no security impact.

Scope reviewed

Playground.tsx (grid styling + compact card mode + createInputRow/createInput style overhaul + send-button icon swap), FileViewer.tsx (fillContainer boolean prop), PlaygroundWorkspace.tsx (pass the new prop). Read end-to-end for any new user-input path, URL-param surface, or preview-rendering change.

Findings

1. No new user-input path. The Create composer is the same createPrompt textarea as before; only its styling and icon change. No new dangerouslySetInnerHTML, no new URL param parsing, no new query-string reads, no new clipboard handlers.
2. Preview rendering is unchanged. ComponentCard still renders through A2UIEnvelopePreview / COMPONENT_PREVIEWS. The compact-mode branch only changes layout (classes.compCardCompact, an 88px min-height, a different grid template). The no-preview branch switches from an inline-styled div to classes.emptyPreviewLabel — still a static literal, no interpolation of untrusted data.
3. Icon swap is inert. Replacing <img src="assets/icons/commands/go.svg"> with <ArrowRight24Regular> removes a static asset reference; no new script execution, no CSP implications, script-src 'self' stays clean.
4. fillContainer prop. Pure boolean. Default false, opt-in, toggles styles.rootFill via mergeClasses. Does not affect data flow or trust boundaries.
5. No new deps, no new API calls, no secret handling, no auth changes.

Notes

• The compPackBanner copy (Previews unavailable for pack-only components — showing compact cards.) is a static literal — fine. Do not later substitute this with an LLM- or pack-contributor-supplied string without escaping.

Applying zapp:approved.

[github-actions]

✅ Zapp recorded a security approved via zapp:approved on head 284b018.

This native review mirrors the label-driven squad gate for visibility only.
Merge eligibility still comes from the squad/review-gate status check and the current approval labels.

[sabbour]

🏗️ Leela — Architecture Review

Verdict: Approve.

Scope is right — pure packages/web presentation polish, zero API or pack-contract surface. No architecture risk.

What's good:

• FileViewer.fillContainer is opt-in with fillContainer = false default. Existing chat-side-panel call sites stay on the 45%/55% clamp; only PlaygroundWorkspace passes fillContainer. Backward-compatible prop addition done correctly — no consumer migration needed.
• Grid sizing lives in makeStyles classes, not inline style props — keeps the responsive tuning centralised. The componentGrid / componentCompactGrid split is a reasonable way to express "this pack contributes no previews" as a data-driven layout variant rather than per-card conditional chrome.
• Compact-grid transition is derived from data (allEmpty = comps.every(c => !COMPONENT_PREVIEWS[c.name])), not hardcoded to pack names. When pack-azure/aks/github ship their own previews in the future, they'll automatically get the full grid — no follow-up refactor needed. Good future-proofing.
• Composer parity with main chat: borrowing borderRadiusLarge, stroke-1, fontSizeBase300, ArrowRight24Regular, and the spacing tokens keeps the Create surface visually consistent with the chat entry. Swapping the PNG commands/go.svg for the Fluent icon also drops a raster asset dependency — small net positive.

Non-blocking notes:

• componentGrid caps each card at maxWidth: 320px via descendant selector & > *, while componentCompactGrid caps at 280px. If a pack ships a mix of preview and no-preview components in the future, the "all empty" gate toggles the whole section to compact — which is still the right default, but worth a comment on ComponentCard.compact describing that the prop is pack-wide, not per-card.

Architecture 🟢 approved.

[github-actions]

✅ Leela recorded a architecture approved via leela:approved on head 284b018.

This native review mirrors the label-driven squad gate for visibility only.
Merge eligibility still comes from the squad/review-gate status check and the current approval labels.

[sabbour]

🧪 Nibbler — Code Quality Review

Verdict: ✅ Approve — targeted CSS/UX polish, no regressions, behaviour-preserving.

Correctness

• FileViewer's new fillContainer prop is opt-in (= false default), so the existing chat-side-panel consumers keep their width: 45% / maxWidth: 55% layout. Only PlaygroundWorkspace passes fillContainer, which is the single site that needed the fix. No broadcast changes.
• mergeClasses(styles.root, fillContainer && styles.rootFill) — mergeClasses tolerates falsy values, and the override rules (width: 100%; minWidth: 0; maxWidth: none; flex: 1) are applied late enough in the cascade to win against styles.root. The "Select a file" empty-state path also gets the same merge, so the void is killed in both branches, not just the populated one.
• Grid: gridTemplateColumns: repeat(auto-fill, minmax(260px, 1fr)) + '& > *': { maxWidth: '320px' } yields 4–5 cards per row at common viewports without breaking narrow widths (the minmax(260px, 1fr) floor is respected at ≥260px). The 320px cap produces wasted gutter space at very wide viewports, which is a deliberate UX choice documented in the PR and doesn't cause layout bugs.
• allEmpty = comps.every(c => !COMPONENT_PREVIEWS[c.name]) — correct predicate. The compact grid is only applied when every component in a pack section lacks a preview, and the per-card compact prop is OR-ed with !hasPreview so mixed sections still compact the individual empty cards. Good.

Create composer unification

• ArrowRight24Regular replaces the go.svg <img> in both render sites (lines 1463 and 1678); old asset is no longer referenced. The inline style={{ width: '16px', height: '16px' }} scales the 24px icon viewBox correctly.
• Padding/border/radius/font-size/line-height now match the main chat composer tokens (borderRadiusLarge, colorNeutralStroke1, fontSizeBase300/lineHeightBase300, spacingVerticalS + spacingHorizontalM). alignItems: 'flex-end' is the right alignment for a growing textarea.

Loading / error states

• Pre-existing registryError / registryLoading branches are untouched. The new compPackBanner only renders when allEmpty — it does not suppress error states, and the error MessageBar still fires first. No path changes; no new error surfaces to cover.

Test coverage

• 🟡 Concern (non-blocking): zero new tests for the grid compacting logic (allEmpty, compact prop propagation) or for the fillContainer branch. Given this is a visual polish PR and both CI suites (unit + Playwright E2E) passed green, regression risk is low — but a small snapshot/class assertion for the compact path would lock in the "all-empty pack → compact grid + banner" contract so a future refactor of COMPONENT_PREVIEWS doesn't silently flip it. Not blocking, but worth a follow-up.

🟢 Nit

• className={${classes.compCardClickable}${isCompact ? ${classes.compCardCompact} : ''}} — the rest of the file (and this PR) already uses mergeClasses (it's imported in FileViewer). Using mergeClasses(classes.compCardClickable, isCompact && classes.compCardCompact) would be more idiomatic. Trivial.

CI green across lint/build/unit/check and Playwright E2E. Behaviour-preserving for every non-Playground consumer.

Approving.

[sabbour-squad-scribe]

Working as Scribe · see .squad/agents/scribe/charter.md

Retro entry

- 2026-04-21 | #986 "fix(web/playground): tighten grid, fix Workspace void, unify Create chat composer" | M | impl=1m | review=42m | cycles=1 | merged | @sabbour-squad-frontend[bot] | first_review=37m | ci=6m | reviewer=bot | human_comments=2 | issue=none | estimate=unknown | rejections_by_reviewer=nibbler:0,leela:0,zapp:0 | reverted=false

Queued via retro-log PR #994: #994
This update will land in .squad/retro-log.md after that PR merges.