Codex/atomic 9 terminal log structured

[himax12]

Summary

Problem / Motivation

This pull request introduces a new structured log row primitive (TerminalLogLine) and adds support for structured log entries in the TerminalLog component, enhancing the playground demo to showcase both string-based and structured logging modes. It also updates the playground page to demonstrate new terminal features, including log rows with level badges, timestamps, and source labels, as well as phase markers for terminal feeds.

Structured logging support:

• Added the new TerminalLogLine component, which renders a single log row with level badge, timestamp, source label, and message, using theme-aware colors and consistent layout.
• Updated TerminalLog to support a new entries prop for structured log entries, rendering each entry with TerminalLogLine. The component now supports both string and structured modes, with backward compatibility. [1] [2]

Playground demo enhancements:

• Added StructuredLogDemo to log-demo.tsx, simulating a streaming log feed using structured entries with levels, timestamps, and sources. [1] [2]
• Updated the playground page (page.tsx) to showcase both string and structured log demos, and added new sections for TerminalMarker (phase separators) and TerminalLogLine (row primitives). [1] [2] [3] [4]

General UI and code improvements:

• Minor formatting and code cleanup in the playground page, improving readability and consistency of section headers and descriptions. [1] [2] [3] [4]

[Copilot]

Pull request overview

This PR adds structured logging primitives to the terminal UI component set and updates the playground to demonstrate both string-based and structured log rendering (including per-row level/timestamp/source and phase markers).

Changes:

• Introduces TerminalLogLine (structured log row) and TerminalMarker (phase separator) components.
• Extends TerminalLog to support a new structured entries prop while keeping lines for backward compatibility.
• Enhances the playground with new demos for structured logs, markers, and log-line primitives.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
components/terminal.tsx	Re-exports new terminal primitives/types and does minor formatting cleanup.
components/terminal-marker.tsx	Adds a new phase/section marker row component for terminal feeds.
components/terminal-log.tsx	Adds structured entries rendering mode using TerminalLogLine while retaining string mode.
components/terminal-log-line.tsx	Adds the structured log row primitive with level badge, timestamp, source, and message.
app/playground/page.tsx	Updates playground to showcase string vs structured logs, markers, and log-line examples.
app/playground/log-demo.tsx	Adds StructuredLogDemo simulating a streaming structured log feed.

Comments suppressed due to low confidence (4)

components/terminal-log.tsx:112

• The Tailwind CSS variable shorthand here (border-(--glass-border), bg-(--term-bg)/40) is inconsistent with the rest of the repo (which uses border-[var(--...)] / bg-[var(--...)]/..) and may not compile as intended. Consider switching these back to the bracket-based arbitrary value form for border/background to match existing components (e.g. components/terminal-badge.tsx).

      className={`max-h-64 overflow-auto rounded border border-(--glass-border) bg-(--term-bg)/40 p-3 font-mono text-xs ${className}`.trim()}

components/terminal-log.tsx:130

• This uses the CSS variable shorthand text-(--term-fg-dim), but the rest of the codebase consistently uses text-[var(--term-fg-dim)]. To avoid styling inconsistencies (and potential Tailwind parsing issues), align this with the established text-[var(...)] pattern used elsewhere.

              className="whitespace-pre-wrap break-all text-(--term-fg-dim) leading-5 py-0.5"

components/terminal-log-line.tsx:35

• These level class strings mix Tailwind CSS variable syntaxes (border-(--glass-border), text-(--term-blue)) with the bracket-based border-[var(...)] style used throughout the repo. Please standardize these to the repo’s existing pattern (see components/terminal-badge.tsx) so colors render consistently and future maintenance is simpler.

    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)',

components/terminal-log-line.tsx:121

• wrap-break-word doesn’t appear to be a Tailwind utility (and isn’t used elsewhere in the repo), so this likely won’t apply any wrapping behavior. Consider replacing it with Tailwind’s built-in wrapping utilities (e.g. break-words / break-all) depending on the desired behavior for long tokens like stack traces.

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

---

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