Skip to content

Chat/terminal studio redesign + 7-feature discoverability & token-drawer fix - #33

Open
utkarshh37 wants to merge 2 commits into
mainfrom
chat-redesign
Open

Chat/terminal studio redesign + 7-feature discoverability & token-drawer fix#33
utkarshh37 wants to merge 2 commits into
mainfrom
chat-redesign

Conversation

@utkarshh37

Copy link
Copy Markdown
Contributor

Summary

  • Reworks the studio into a chat/terminal surface (chat/ChatSurface, Composer, Message, HistoryRail, DetailDrawer), replacing the SideNav + per-view layout.
  • Makes all 7 canonical features discoverable at rest in the terminal view and fixes the token-counter drawer clipping.

Discoverability fix (chat/Composer.tsx)

  • All four inspector chips render at rest; Score shows disabled until there's a draft (was hidden entirely → read as "missing").
  • FIT chip renamed to MODELS.
  • Cryptic glyph buttons → labeled ✧ Wizard / ↑ Optimize / ≡ Compress.

Token drawer fix (views/Tokens.tsx, chat/DetailDrawer.tsx)

  • Grids were repeat(4,1fr) / 1fr 1fr 1fr (old full-width view) and overflowed the 460px drawer, clipping the last cards. Switched to repeat(auto-fit, minmax(140px,1fr)) so they wrap (2×2 stats, 2+1 cost).
  • flexShrink: 0 on the drawer so it holds 460px on narrow viewports.

Test plan

  • /studio renders; all 7 features visible at empty composer (Analyze=send, Score/Tokens/Context/Models chips, Wizard, History rail).
  • Score chip disabled until typing, enables + fills on draft.
  • Tokens drawer opens with no clipped cards (verified live, viewport 2170).
  • npm run build clean (please confirm in CI).

🤖 Generated with Claude Code

utk2103 and others added 2 commits August 19, 2026 15:59
- Introduced a new Message component for displaying chat messages with user, assistant, and wizard roles.
- Removed Analyze, History, Score, and Wizard components to streamline functionality.
- Updated AppState type to remove references to removed views and added a 'NONE' view type.
- Enhanced user interaction with chips for assistant analysis and wizard options.
- Improved styling and layout for better user experience in chat interface.
…er clip

Composer: render all four inspector chips at rest (Score disabled with — until
there's a draft, instead of hidden), rename FIT→MODELS, and replace the cryptic
glyph buttons with labeled Wizard/Optimize/Compress pills.

Token drawer: Tokens.tsx grids were repeat(4,1fr)/1fr-1fr-1fr from the old
full-width view and overflowed the 460px DetailDrawer, clipping the last cards.
Switch both to auto-fit minmax(140px,1fr) so they wrap; add flexShrink:0 to the
drawer so it holds width on narrow viewports.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@vercel

vercel Bot commented Aug 22, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
prompt-studio Ready Ready Preview Aug 22, 2026 4:29pm

@utkarshh37

Copy link
Copy Markdown
Contributor Author

Verdict: PASS — approved, safe to merge. Build verified on branch (npm run build clean).

@utkarshh37

Copy link
Copy Markdown
Contributor Author

Code Review Summary (Orion) — Verdict: PASS

Build check DONE: npm run build passes clean on 4db0323 — /studio prerenders at 15.8 kB (down from 16.6 kB), all routes compile.

Discoverability fix reviewed line-by-line:

  • All four chips render at rest; Score shows '—' with a helpful title when idle instead of vanishing. Correct pattern.
  • Glyph-only buttons → labeled pills (Wizard/Optimize/Compress) with descriptive titles; Send keeps icon but documents the Enter binding. Good a11y improvement.
  • Token-drawer clip root cause: DetailDrawer lacked flexShrink: 0 and was being squeezed by flex siblings — fix is correct. Tokens.tsx auto-fit minmax(140px,1fr) grids also fix stat-card overflow at narrow widths.

Non-blocking nit: actionBtn 10.5px uppercase + letterspacing may get tight in the drawer-open layout — worth an eyeball, not blocking.

(Could not submit a formal approve since this PR is authored by the same account reviewing it — verdict stands as a comment.)

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.

2 participants