yuris/titik-gambut-next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat(theme): align Streamlit visual design tokens and add top command bar with KPI ribbon (Issue 15) #25

Merged
yuris merged 1 commit from feat/issue-15-streamlit-theme-kpi into main 2026-10-14 21:39:49 +00:00
Conversation 1 Commits 1 Files changed 8 +218 -16
yuris commented 2026-10-14 21:37:18 +00:00
Owner
Copy link

Summary

Implements Issue 15: Streamlit visual theme alignment, peatland design tokens, and top telemetry KPI bar.

  • DESIGN.md design system alignment across globals.css with semantic peatland color tokens (#161917 canvas, #1F2622 surface, #17261F banner, #2E3832 border, #E6E8E3 text).
  • src/components/frame/kpi-chip.tsx: Reusable metric chip with signature 3px left accent borders (#E05A2B ember, #F5A623 flame, #2FA4A9 water, #3B8EA5 neutral).
  • src/components/frame/live-telemetry-banner.tsx: Slim top telemetry banner with pulsating emerald dot (#4CE08A) and real-time WIB/UTC clocks.
  • src/components/frame/top-command-bar.tsx: Brand header with title, subtitle, and responsive 4-chip KPI ribbon.
  • Integrated seamlessly in DashboardClient and page.tsx with mobile responsive stacking.

Closes #15

## Summary Implements Issue 15: Streamlit visual theme alignment, peatland design tokens, and top telemetry KPI bar. - `DESIGN.md` design system alignment across `globals.css` with semantic peatland color tokens (`#161917` canvas, `#1F2622` surface, `#17261F` banner, `#2E3832` border, `#E6E8E3` text). - `src/components/frame/kpi-chip.tsx`: Reusable metric chip with signature 3px left accent borders (`#E05A2B` ember, `#F5A623` flame, `#2FA4A9` water, `#3B8EA5` neutral). - `src/components/frame/live-telemetry-banner.tsx`: Slim top telemetry banner with pulsating emerald dot (`#4CE08A`) and real-time WIB/UTC clocks. - `src/components/frame/top-command-bar.tsx`: Brand header with title, subtitle, and responsive 4-chip KPI ribbon. - Integrated seamlessly in `DashboardClient` and `page.tsx` with mobile responsive stacking. Closes #15
feat(theme): align Streamlit visual design tokens and add top command bar with KPI ribbon (Issue 15)
All checks were successful
CI / Verify Quality & Build (pull_request) Successful in 58s
Details
bd3141fa1b
yuris-bot approved these changes 2026-10-14 21:39:04 +00:00
yuris-bot left a comment
Copy link

Review for Issue 15

PR 25 implements Streamlit visual theme alignment and the top telemetry KPI ribbon.
Verdict is APPROVE.

The globals css file defines semantic peatland color tokens matching DESIGN md.
The peat canvas token uses 161917.
The peat surface token uses 1F2622.
The peat border token uses 2E3832.
The live telemetry banner displays a pulsating emerald dot with WIB and UTC clocks.
The top command bar integrates brand title and subtitle.
The KPI ribbon contains four chips with signature 3px accent borders.
Ember accent border uses E05A2B.
Flame accent border uses F5A623.
Water accent border uses 2FA4A9.
Neutral accent border uses 3B8EA5.
The floating layer toggles panel offset was adjusted to top 36 to prevent collision.

All 36 unit tests pass across 4 test suites.
The vp check tool reports zero lint errors across 228 files.
Standalone production build succeeds.
All acceptance criteria are met.
Merge decision is approved.

# Review for Issue 15 PR 25 implements Streamlit visual theme alignment and the top telemetry KPI ribbon. Verdict is APPROVE. The globals css file defines semantic peatland color tokens matching DESIGN md. The peat canvas token uses 161917. The peat surface token uses 1F2622. The peat border token uses 2E3832. The live telemetry banner displays a pulsating emerald dot with WIB and UTC clocks. The top command bar integrates brand title and subtitle. The KPI ribbon contains four chips with signature 3px accent borders. Ember accent border uses E05A2B. Flame accent border uses F5A623. Water accent border uses 2FA4A9. Neutral accent border uses 3B8EA5. The floating layer toggles panel offset was adjusted to top 36 to prevent collision. All 36 unit tests pass across 4 test suites. The vp check tool reports zero lint errors across 228 files. Standalone production build succeeds. All acceptance criteria are met. Merge decision is approved.
yuris merged commit 92b4281c63 into main 2026-10-14 21:39:49 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
yuris-bot
Labels
Clear labels   
backend
Backend task

  
frontend
Frontend task

No labels
backend
frontend
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
yuris/titik-gambut-next!25
No description provided.