Feat/terminal search #11 by himax12 · Pull Request #22 · clawgreen/terminal-ui

himax12 · 2026-03-01T21:53:06Z

This pull request significantly expands the playground demo for terminal UI components, adding new interactive examples and improving organization and clarity. The main changes include new demo components for structured logs, log filtering, and in-feed search, as well as enhanced sectioning and streamlined headings in the playground page.
#11
New demo components and features:

Added StructuredLogDemo to showcase the TerminalLog component in structured mode, with log entries containing levels, timestamps, and sources. [1] [2]
Added FilterBarDemo and supporting logic to demonstrate interactive log filtering by level, source, and text, using TerminalFilterBar and filterEntries().
Added SearchDemo to demonstrate TerminalSearch and useTerminalSearch for in-feed search with match highlighting and navigation.

Playground page organization and UI improvements:

Updated page.tsx to import and add new demo components, and reorganized sections to group related features. [1] [2] [3]
Streamlined section headings for consistency and clarity, and added descriptive text for each demo. [1] [2] [3] [4] [5] [6] [7]

New terminal UI primitives showcased:

Added demo sections for TerminalMarker (phase separators), TerminalLogLine (structured log row), and TerminalSearch (in-feed search bar), each with example usage and explanation. [1] [2]

Component imports and usage updates:

Updated imports in page.tsx to include new terminal UI components and demo modules.

Enhanced demo data:

Added realistic log entry fixtures for filtering and searching demos to better illustrate component capabilities. [1] [2]

References:
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13]## Summary

…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'

Copilot

Pull request overview

Expands the playground and terminal UI primitives to support structured log rendering, in-feed search/navigation, and interactive filtering, aligning with Issue #11’s goal of adding TerminalSearch for match navigation.

Changes:

Added new terminal primitives: TerminalSearch (+ useTerminalSearch), TerminalLogLine, TerminalMarker, and TerminalFilterBar (+ filtering helpers).
Enhanced TerminalLog to support both string lines and structured entries rendering.
Extended the playground page with new demos for structured logs, filtering, and in-feed search.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
components/terminal.tsx	Re-exports new primitives/hooks/types from the terminal barrel entrypoint.
components/terminal-search.tsx	Adds `TerminalSearch` and `useTerminalSearch` for match navigation and query control.
components/terminal-marker.tsx	Adds a phase/separator marker primitive for terminal feeds.
components/terminal-log.tsx	Adds structured `entries` mode (via `TerminalLogLine`) while keeping string mode compatible.
components/terminal-log-line.tsx	Adds a structured log row primitive with level badge, timestamp, and source.
components/terminal-filter-bar.tsx	Adds a controlled filter bar + pure `filterEntries()` helper for `LogEntry[]`.
app/playground/page.tsx	Reorganizes playground sections and wires in the new demos/primitives.
app/playground/log-demo.tsx	Adds a structured log streaming demo alongside the existing string-mode demo.
app/playground/filter-demo.tsx	Adds a demo showcasing `TerminalFilterBar` + `filterEntries()` + `TerminalLog entries`.
app/playground/search-demo.tsx	Adds a demo for `TerminalSearch` + `useTerminalSearch` with highlight + scroll-to-match.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-01T21:57:05Z

+  useTerminalSearch,
+  type LogEntry,
+} from '@/components/terminal'
+import { TerminalLog } from '@/components/terminal-log'


TerminalLog is imported here but never used, which will fail next lint under the default ESLint rules. Remove the unused import.

Suggested change

import { TerminalLog } from '@/components/terminal-log'

Copilot · 2026-03-01T21:57:05Z

      ref={containerRef}
-      className={`max-h-64 overflow-auto rounded border border-[var(--glass-border)] bg-[var(--term-bg)]/40 p-3 font-mono text-sm ${className}`.trim()}
+      className={`max-h-64 overflow-auto rounded border border-(--glass-border) bg-(--term-bg)/40 p-3 font-mono text-xs ${className}`.trim()}
      role="log"


This file switches from the existing Tailwind arbitrary value style used elsewhere (e.g. border-[var(--glass-border)], bg-[var(--term-bg)]/40) to the newer border-(--glass-border) / bg-(--term-bg)/40 syntax. If the project wants consistent styling conventions (and to avoid Tailwind config/version surprises), consider keeping the bracketed [...] form here for consistency with the rest of components/*.

Copilot · 2026-03-01T21:57:05Z

+      {source && <span className="shrink-0 text-(--term-fg-dim)">{source}</span>}
+
+      {/* Message */}
+      <span className={`min-w-0 wrap-break-word ${cls.message}`}>{message}</span>


wrap-break-word is not a Tailwind utility (and it isn't defined anywhere else in the repo), so long messages likely won’t wrap as intended. Use a valid wrapping utility (e.g. break-words / break-all) or add an explicit CSS class if you intended a custom rule.

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>

Copilot · 2026-03-01T21:57:06Z

+  function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      if (e.shiftKey) {
+        onPrev?.()
+      } else {
+        onNext?.()
+      }


handleKeyDown always calls preventDefault() on Enter, even when neither onNext nor onPrev is provided. That makes the input behave unexpectedly (e.g., Enter won’t submit a surrounding form) while doing nothing. Consider only intercepting Enter when navigation handlers are present (or when match navigation is enabled).

himax12 added 6 commits March 2, 2026 02:34

feat: add TerminalSearch in-feed match navigation (clawgreen#11)

22580c5

Copilot AI review requested due to automatic review settings March 1, 2026 21:53

Copilot started reviewing on behalf of himax12 March 1, 2026 21:53 View session

Copilot AI reviewed Mar 1, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/terminal search #11#22

Feat/terminal search #11#22
himax12 wants to merge 6 commits intoclawgreen:mainfrom
himax12:feat/terminal-search

himax12 commented Mar 1, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 1, 2026

Uh oh!

Copilot AI Mar 1, 2026

Uh oh!

Copilot AI Mar 1, 2026

Uh oh!

Copilot AI Mar 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<span className={`min-w-0 wrap-break-word ${cls.message}`}>{message}</span>
	<span className={`min-w-0 break-words ${cls.message}`}>{message}</span>

Conversation

himax12 commented Mar 1, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 1, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants