Open
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
…compat
- New LogEntry type { id?, message, level?, timestamp?, source? }
- New optional entries prop on TerminalLog — takes precedence over lines
- Existing lines?: string[] consumers continue to work with zero changes
- Internally reuses TerminalLogLine for structured rendering (level badges,
timestamps, source labels, color-mix tints)
- maxLines and autoScroll work identically on both paths
- Export LogEntry from components/terminal.tsx
- Add StructuredLogDemo to playground (streaming entries with all 5 levels)
- Use Tailwind v4 CSS variable shorthand in terminal-log.tsx
…n#10) - New TerminalFilterBar controlled component with typed props + JSDoc - Level toggle buttons (DBG/INF/WRN/ERR/OK) with active color-mix tints matching TerminalLogLine badge palette; aria-pressed for a11y - Text search input with inline SVG search icon + clear button (X) - Source toggle buttons — row only rendered when sources prop is non-empty - Clear-all pill shown only when any filter is active - All controls are native <button>/<input> — fully keyboard accessible - Exported pure helper filterEntries(entries, state) for composable use - emptyFilterState() factory for clean initial state - Exports: TerminalFilterBar, filterEntries, emptyFilterState, FilterBarState, TerminalFilterBarProps, LogLevel - FilterBarDemo playground with 14 entries across 5 levels and 4 sources - Entry count indicator: 'N / 14 entries shown'
…n#13) - New TerminalJsonLine component with typed props and JSDoc - Accepts payload: unknown (JS value) or raw JSON string -- serialised/parsed automatically - Collapsed one-line summary: '{ N keys }', '[ N items ]', or truncated primitive - Click (or Enter/Space) toggles expanded Prism-highlighted pretty-print view - Invalid JSON handled safely -- shows INVALID badge + raw value, never throws - Large payloads constrained to max-h-72 scrollable code block - Exported parse logic is pure -- summarise() and parse() are unit-testable - aria-expanded + aria-controls on toggle button for screen reader support - Exported: TerminalJsonLine, TerminalJsonLineProps from terminal.tsx - Playground demo: 5 entries covering object, nested object, raw JSON string, invalid JSON, and a default-expanded payload
There was a problem hiding this comment.
Pull request overview
Expands the terminal UI playground by introducing several new interactive demos and primitives (notably TerminalJsonLine for expandable JSON payloads) and enhancing TerminalLog to support structured entries, improving coverage of terminal-style log/feed experiences.
Changes:
- Added new terminal feed primitives/components:
TerminalJsonLine,TerminalLogLine,TerminalGroup,TerminalMarker,TerminalSearch(+useTerminalSearch), andTerminalFilterBar(+ filtering helpers). - Extended
TerminalLogto support a structuredentriesrendering mode (while keeping stringlinesbackward-compatible). - Updated the playground page and added demo modules to showcase the new components and reorganized sections.
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| components/terminal.tsx | Re-exports new terminal primitives and types; minor formatting adjustments. |
| components/terminal-search.tsx | Adds useTerminalSearch hook and TerminalSearch UI component. |
| components/terminal-marker.tsx | Adds TerminalMarker phase separator component. |
| components/terminal-log.tsx | Adds structured entries support and exports LogEntry type. |
| components/terminal-log-line.tsx | Adds TerminalLogLine structured log row primitive. |
| components/terminal-json-line.tsx | Adds TerminalJsonLine collapsible JSON renderer with Prism highlighting. |
| components/terminal-group.tsx | Adds TerminalGroup collapsible output grouping component. |
| components/terminal-filter-bar.tsx | Adds TerminalFilterBar and filterEntries helper for log filtering. |
| app/playground/page.tsx | Wires new demos into the playground and streamlines section headings/descriptions. |
| app/playground/log-demo.tsx | Adds StructuredLogDemo showcasing TerminalLog structured mode. |
| app/playground/filter-demo.tsx | Adds filtering demo using TerminalFilterBar + filterEntries. |
| app/playground/group-demo.tsx | Adds grouping/collapsible output demo using TerminalGroup. |
| app/playground/search-demo.tsx | Adds in-feed search demo using TerminalSearch + useTerminalSearch. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| {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 is not a Tailwind utility (so it won’t apply any wrapping). This will likely cause long log messages to overflow instead of wrapping. Use an existing Tailwind class such as break-words (overflow-wrap) and/or break-all depending on the desired behavior.
Suggested change
| <span className={`min-w-0 wrap-break-word ${cls.message}`}>{message}</span> | |
| <span className={`min-w-0 break-words ${cls.message}`}>{message}</span> |
| useTerminalSearch, | ||
| type LogEntry, | ||
| } from '@/components/terminal' | ||
| import { TerminalLog } from '@/components/terminal-log' |
There was a problem hiding this comment.
TerminalLog is imported but never used in this demo file. This will fail next lint/TypeScript unused-import checks in many setups; please remove the unused import (or use it if intended).
Suggested change
| import { TerminalLog } from '@/components/terminal-log' |
Comment on lines
+81
to
+85
| const timer = window.setInterval(() => { | ||
| setEntries((current) => { | ||
| const next = STREAM_ENTRIES[current.length % STREAM_ENTRIES.length] | ||
| return [...current, { ...next, id: String(current.length) }] | ||
| }) |
There was a problem hiding this comment.
In StructuredLogDemo, the entries state grows without bound (you keep appending every 900ms and never trim). Even though TerminalLog only renders the last maxLines, the backing state will keep accumulating and can cause memory/perf issues if the playground stays open. Consider capping entries in the state update (e.g., keep only the last N entries).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#13
This pull request adds several new interactive demos to the playground page, significantly expanding coverage of terminal UI components and improving the organization and clarity of the demo sections. The main changes include the introduction of demos for filtering logs, structured log streaming, collapsible output groups, log row primitives, and visual phase markers. Additionally, the playground layout and section headings have been streamlined for consistency.
New terminal UI component demos:
FilterBarDemoto showcase log filtering capabilities usingTerminalFilterBarandfilterEntries, with a live count of filtered entries. (app/playground/filter-demo.tsx,app/playground/page.tsx) [1] [2]StructuredLogDemoto demonstrate real-time, structured log streaming with level badges, timestamps, and sources via theentriesprop. (app/playground/log-demo.tsx,app/playground/page.tsx) [1] [2]GroupDemoto illustrate collapsible, variant-accented output groups with summary and count labels, including controlled open/close state. (app/playground/group-demo.tsx,app/playground/page.tsx) [1] [2]TerminalMarker(phase separators),TerminalLogLine(log row primitives), andTerminalSearch(in-feed search with navigation and highlighting). (app/playground/page.tsx)Playground layout and section improvements:
app/playground/page.tsx) [1] [2] [3] [4] [5] [6] [7]Component imports and organization:
page.tsxto include all new demo components and relevant terminal UI primitives. (app/playground/page.tsx)These changes make it much easier to explore and test terminal UI features in isolation, and provide clear examples for each component in the playground.