feat: add TerminalMarker component for feed phase separators (#7)

[himax12]

• 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

Summary

[Atomic 07] Add TerminalMarker component for feed phase separators #7

Problem / Motivation

Type of Change

• 🎨 New theme
• 📦 New component
• 🐛 Bug fix
• 📚 Documentation
• ✨ Enhancement
• 🔧 Refactor
• 🧪 Test/CI

Screenshots / Demo (if UI change)

Before

After

Testing

pnpm build

• I ran the checks locally
• No new console warnings/errors

Checklist

• Code follows existing patterns/style
• Added or updated docs where needed
• Added playground example (if applicable)
• Build passes locally
• PR title follows Conventional Commits (e.g., feat: ..., fix: ...)

Linked Issues

Closes #

Notes for Reviewers

[Copilot]

Pull request overview

Adds a new TerminalMarker UI component to provide phase separators in terminal-like feeds (per Issue #7), wires it into the public terminal components export, and demonstrates it in the playground.

Changes:

• Introduces TerminalMarker component with typed props, variants, and theme-aware styling.
• Re-exports TerminalMarker from components/terminal.tsx to make it available via the main terminal entry point.
• Adds a playground section showcasing TerminalMarker in a deploy pipeline example.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
components/terminal.tsx	Re-export TerminalMarker from the terminal components entry point.
components/terminal-marker.tsx	New TerminalMarker component implementation (variants + styling + JSDoc).
app/playground/page.tsx	Adds a playground demo section that renders TerminalMarker between feed phases.

---

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

[Copilot]

truncate on the timestamp span won’t reliably prevent overflow in a flex row unless the timestamp element is allowed to shrink (e.g., min-w-0 + a flexible width such as flex-1 or an explicit/max width). As written, the timestamp can still force the row wider on narrow viewports, undermining the responsive goal mentioned in the description.

Suggested change

	<span className={`font-mono text-xs truncate ${cls.timestamp}`}>{timestamp}</span>
	<span className={`flex-1 min-w-0 font-mono text-xs truncate ${cls.timestamp}`}>{timestamp}</span>