style: workspace shell, transcript, and home empty state aesthetic polish#76
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: dbef1a482a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| return ( | ||
| <div className="flex h-full min-h-0 flex-col"> | ||
| <PaneHeading family="agents" summary={summary} /> | ||
| <PaneHeading family="agents" summary={summary} trailing={trailing} /> |
There was a problem hiding this comment.
When a session has no agent rows (the initial inspector state is EMPTY_AGENT_MAP, and ordinary sessions need not spawn subagents), AgentsPane returns FamilyEmpty before reaching this heading, so the forwarded desktop close button is never rendered. Since this commit removed the shell-level pane header, the dock is left without its visible close affordance (and without its pane title) in that common empty state; render the heading/trailing action outside the empty-state branch or pass it into the empty state.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Fixed in follow-up PR #77. PaneHeading and close button are now preserved in the empty pane state, covered by pane-empty-states.test.tsx.
There was a problem hiding this comment.
Pull request overview
UI polish pass across the web workspace shell, panes, composer, transcript, and home empty state to reduce header redundancy, improve spacing/typography rhythm, and refine mobile truncation + focus affordances.
Changes:
- Refined transcript spacing, tool-call grouping visuals, and mobile tool preview truncation/wrapping behavior.
- Simplified/standardized pane headers by adding a
PaneHeadingtrailing slot (used for the desktop dock close action + tooltip) and reducing duplicate header UI. - Adjusted home browser empty state branding (icon-based empty media) and composer action-row grouping (context meter + divider placement).
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| provenance/t3code/imports/f2-transcript-20260711.json | Updates provenance checksum for the adapted transcript rows source mapping. |
| apps/web/src/features/transcript/TranscriptRows.tsx | Tweaks message/tool-row spacing, adds tool-group visual unity, and introduces mobile 2-line clamped tool summaries. |
| apps/web/src/features/transcript/tool-render/tool-render.css | Enables multi-line tool summary wrapping on small screens when the new preview attribute is present. |
| apps/web/src/features/panes/TerminalsPane.tsx | Accepts and forwards an optional trailing action into the shared pane heading. |
| apps/web/src/features/panes/ReviewPane.tsx | Accepts and forwards an optional trailing action into the shared pane heading. |
| apps/web/src/features/panes/PaneHeading.tsx | Adds trailing slot support and sheet-popup-aware padding to avoid close-button overlap. |
| apps/web/src/features/panes/PaneContent.tsx | Threads an optional trailing action through to each pane implementation. |
| apps/web/src/features/panes/FilesPane.tsx | Accepts and forwards an optional trailing action into the shared pane heading (including offline header). |
| apps/web/src/features/panes/AgentsPane.tsx | Softens focus visuals to prefer keyboard focus-visible, and forwards trailing into the pane heading. |
| apps/web/src/features/panes/ActivityPane.tsx | Accepts and forwards an optional trailing action into the shared pane heading. |
| apps/web/src/features/composer/Composer.tsx | Reorders/visually groups context meter within the desktop action row with a divider. |
| apps/web/src/components/SessionScreen.tsx | Removes duplicate pane subheaders; injects a close action via PaneContent.trailing with tooltip; drops the footer hint. |
| apps/web/src/components/HomePane.tsx | Updates browser empty state to use an icon-style empty media and adjusts shortcut hint typography. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
What this changes
BrandLockupwelcome branding in browser empty state withEmptyMedia variant="icon"using the LucideHistoryicon. Lifted keyboard shortcut text size totext-sm text-muted-foreground.group-focus-visible/tree:ring-2to prevent harsh visual focus indicators on mouse interaction. Removed duplicate title headers from SessionScreen, merging desktop close button cleanly intoPaneHeadingtrailing slot, and absolute spacing overlay on mobile sheet using CSS ancestor-contextin-[[data-slot=sheet-popup]]:pe-14layout selector.line-clamp-2anddata-tool-preview="multi"layout overrides, falling back tosm:truncate.pt-5 pb-2, assistant responses atpt-1.5 pb-2.5, tool groups atmy-1). Rendered aborder border-border/50on the user presence bubble for sharper visual separation. Grouped tool-call headers in unifiedbg-card/40card styles withdivide-y divide-border/40inline call separators.Why
Screenshots
Desktop
Mobile (390px)
How you verified it
pnpm check(release, provenance checksums, linting, typechecking).pnpm --filter @t4-code/web test.Checklist