Conversation
…en#7) - New `TerminalMarker` component with typed props and JSDoc - Props: label, timestamp?, variant ('info'|'success'|'warning'|'error'|'neutral') - Theme-aware via CSS custom properties (--term-* variables) - Semantic background tint with color-mix for visual hierarchy (consistent with TerminalBadge) - Responsive: min-w-0 + truncate on timestamp prevents overflow on narrow viewports - Export added to components/terminal.tsx (no breaking changes) - Playground demo added to app/playground/page.tsx
) - New TerminalLogLine component with typed props and JSDoc - Props: message (ReactNode), level, timestamp?, source? - Level badge using 3-char uppercase labels (DBG/INF/WRN/ERR/OK) for consistent monospace alignment - Theme-aware via CSS custom properties; error level colors message text red - Responsive: min-w-0 + wrap-break-word on message prevents overflow - Export added to components/terminal.tsx with re-exported type - Playground demo added with 8 representative log lines
- Add color-mix background tints to level badges (consistent with TerminalBadge) - Fix badge alignment: use w-[calc(3ch+0.5rem)] + justify-center so all 5 levels (DBG/INF/WRN/ERR/OK) render at identical pixel width in monospace layout - Update levelClasses to Tailwind v4 CSS variable shorthand (text-/border-(--term-*)) - Remove 'OK ' trailing-space hack (HTML collapses whitespace); fixed-width badge container is the correct approach
There was a problem hiding this comment.
Pull request overview
This PR introduces new terminal primitives to support structured, theme-aware log output and phase markers, with a playground demo to validate layout and styling.
Changes:
- Added
TerminalLogLinecomponent for structured log rows (level/timestamp/source/message) and exported it from the terminal barrel. - Added
TerminalMarkercomponent for phase separation in terminal feeds and exported it from the terminal barrel. - Updated the playground page to demo the new components, plus minor formatting-only refactors in
components/terminal.tsx.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| components/terminal.tsx | Formatting cleanup + re-export TerminalMarker and TerminalLogLine from the terminal barrel. |
| components/terminal-marker.tsx | New phase-marker component for visually separating stages in terminal feeds. |
| components/terminal-log-line.tsx | New structured log row primitive (level badge + timestamp/source/message). |
| app/playground/page.tsx | Adds demos for TerminalMarker and TerminalLogLine in the playground. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| info: 'INF', | ||
| warn: 'WRN', | ||
| error: 'ERR', | ||
| success: 'OK', |
There was a problem hiding this comment.
The comment says all level labels are exactly 3 characters, but success is currently 'OK' (2 chars). Either pad/change the success label to 3 chars or update the comment/width calculation so the documentation matches the rendered output.
| success: 'OK', | |
| success: 'SUC', |
| const levelClasses: Record< | ||
| NonNullable<TerminalLogLineProps['level']>, | ||
| { badge: string; message: string } | ||
| > = { | ||
| debug: { | ||
| badge: 'border-(--glass-border) text-(--term-fg-dim) bg-[rgba(255,255,255,0.03)]', | ||
| message: 'text-(--term-fg-dim)', | ||
| }, | ||
| info: { | ||
| badge: | ||
| 'border-[var(--term-blue)]/40 text-(--term-blue) bg-[color-mix(in_oklab,var(--term-blue)_10%,transparent)]', | ||
| message: 'text-(--term-fg)', |
There was a problem hiding this comment.
TerminalLogLine uses Tailwind class syntax like text-(--term-fg-dim) / border-(--glass-border), but the rest of this codebase uses arbitrary values (e.g. text-[var(--term-fg-dim)], border-[var(--glass-border)]). Unless the project is intentionally relying on a Tailwind feature/plugin for the parentheses form, these classes likely won't generate styles and the badge/text colors will be wrong. Please switch these to the bracket form for consistency and to ensure Tailwind picks them up.
| {source && <span className="shrink-0 text-(--term-fg-dim)">{source}</span>} | ||
|
|
||
| {/* Message */} | ||
| <span className={`min-w-0 wrap-break-word ${cls.message}`}>{message}</span> |
There was a problem hiding this comment.
wrap-break-word isn’t a standard Tailwind utility and doesn’t appear to be defined anywhere in the repo, so long messages may not wrap and can overflow. Consider using Tailwind’s break-words (and/or break-all depending on desired behavior) to ensure the message column wraps correctly.
| <span className={`min-w-0 wrap-break-word ${cls.message}`}>{message}</span> | |
| <span className={`min-w-0 break-words ${cls.message}`}>{message}</span> |
Summary
#8
Problem / Motivation
Type of Change
Screenshots / Demo (if UI change)
Before
After
Testing
Checklist
feat: ...,fix: ...)Linked Issues
Closes #
Notes for Reviewers