feat(ui): satellite pass date picker and band opacity slider #135

Merged

yuris-bot merged 1 commit from feat/satellite-controls into main 2026-10-16 04:42:15 +00:00

Conversation 0 Commits 1 Files changed 5 +382 -1

yuris commented 2026-10-16 04:20:44 +00:00

Owner

Copy link

Summary

Implements Issue 74: interactive floating satellite controls card (satellite-controls.tsx) with Sentinel-2 pass date picker and SWIR band opacity slider (0% to 100%) with real-time percentage readout.

Principles applied

• principle-model-the-domain: Defined SatellitePassOption with ISO dates, cloud cover percentages, and formatted labels.
• principle-boundary-discipline: Clamped opacity inputs within 0.0 to 1.0 at handler boundaries with clean percentage string formatting.
• principle-subtract-before-you-add: Reused existing MapLibre raster paint properties and native HTML range input without extra heavy slider libraries.
• principle-test-behavior-not-implementation: Tested observable render elements, input changes, and prop callback invocations with literal values.
• principle-prove-it-works: Verified clean vp check, 56 passed test files (372 passed tests), and production Next.js build.

Playbook

• skill://poteto-mode/playbooks/feature.md

Impact

• For the consumer: Operators can inspect recent Sentinel-2 satellite passes across various acquisition dates and dynamically tune SWIR band opacity to balance surface peat visibility against smoke-penetrating thermal bands.
• For the maintainer: Pure functional handlers for date selection and opacity parsing ensure modularity, accessibility, and zero external slider package bloat.

Closes #74

### Summary Implements Issue 74: interactive floating satellite controls card (`satellite-controls.tsx`) with Sentinel-2 pass date picker and SWIR band opacity slider (0% to 100%) with real-time percentage readout. ### Principles applied - `principle-model-the-domain`: Defined `SatellitePassOption` with ISO dates, cloud cover percentages, and formatted labels. - `principle-boundary-discipline`: Clamped opacity inputs within 0.0 to 1.0 at handler boundaries with clean percentage string formatting. - `principle-subtract-before-you-add`: Reused existing MapLibre raster paint properties and native HTML range input without extra heavy slider libraries. - `principle-test-behavior-not-implementation`: Tested observable render elements, input changes, and prop callback invocations with literal values. - `principle-prove-it-works`: Verified clean vp check, 56 passed test files (372 passed tests), and production Next.js build. ### Playbook - `skill://poteto-mode/playbooks/feature.md` ### Impact - **For the consumer**: Operators can inspect recent Sentinel-2 satellite passes across various acquisition dates and dynamically tune SWIR band opacity to balance surface peat visibility against smoke-penetrating thermal bands. - **For the maintainer**: Pure functional handlers for date selection and opacity parsing ensure modularity, accessibility, and zero external slider package bloat. Closes #74

yuris added 1 commit 2026-10-16 04:20:45 +00:00

feat(ui): satellite pass date picker and band opacity slider 66d54852bd

yuris force-pushed feat/satellite-controls from 66d54852bd to 60f9316a9e 2026-10-16 04:22:50 +00:00 Compare

yuris force-pushed feat/satellite-controls from 60f9316a9e to 9fdb3412ff 2026-10-16 04:29:21 +00:00 Compare

yuris force-pushed feat/satellite-controls from 9fdb3412ff to 193ce0562e 2026-10-16 04:37:38 +00:00 Compare

yuris-bot approved these changes 2026-10-16 04:42:04 +00:00

yuris-bot left a comment

Copy link

6-Axis Review: PR #135 (feat/satellite-controls)

Executed Playbook: skill://poteto-mode/playbooks/shipping.md

Principles Applied:

• principle-model-the-domain: Defined SatellitePassOption domain interface for Sentinel-2 cloud-free acquisition dates, cloud cover percentages, and formatted labels.
• principle-boundary-discipline: Clamped opacity inputs within 0.0 to 1.0 at handler boundaries with percentage string formatting, and sanitized dates via encodeURIComponent.
• principle-subtract-before-you-add: Reused existing MapLibre raster paint properties and native HTML range slider without pulling in bulky third-party slider UI libraries.
• principle-test-behavior-not-implementation: Tested real DOM element rendering, input value boundary handling, and percentage text updates.
• principle-prove-it-works: Verified execution against Forgejo Actions CI run 219 (CI / Verify Quality & Build green in 2m8s), clean vp check across 334 files, tsc --noEmit clean, and all 56 test files passing (372 tests).

---

Gate 1: Mechanical Verification Gate

• node scripts/verify-pr.mjs 135: Passed. Conventional commit title and principle citations validated.
• CI status check: CI / Verify Quality & Build (pull_request) succeeded on head commit 193ce0562ef4da0cf3aed7d8a45f476313838f41.
• vp check: Clean. 0 warnings, 0 lint errors across 165 files, 334 files formatted.
• pnpm exec tsc --noEmit: Clean with 0 TypeScript compiler errors.
• pnpm test: Passed with 56 test files and 372 tests green.

Gate 2: Ponytail Audit (skill://ponytail-review, skill://ponytail-audit)

• Standard HTML range input and pure React state. No unnecessary abstractions or unused dependencies.
• Scoring: Lean already. Ship. Net lines to cut: 0 lines.

Gate 3: Doubt-Driven Analysis (skill://doubt-driven-development)

• Cross-model skipped: non-interactive context.
• Scrutinized opacity normalization for NaN, negative values, and values greater than 1.0. Verified tile source URL query formatting and URL encoding. All checks sound.

Gate 4: Security & Hardening (skill://security-and-hardening)

• No secrets committed.
• Date parameters are encoded using encodeURIComponent before embedding into tile API URLs.

Gate 5: Code Quality & Simplification (skill://code-review-and-quality, skill://code-simplification)

• Satisfies all Issue #74 acceptance criteria:
  • Slider smoothly adjusts layer opacity in real time.
  • Date picker switches between available cloud-free satellite passes.

Gate 6: Poteto Shipping Protocol (skill://poteto-mode/playbooks/shipping.md)

• Rebased cleanly onto main at f5dcd94.
• Ready for squash-merge to main.

---

Verdict: APPROVE

## 6-Axis Review: PR #135 (`feat/satellite-controls`) ### Executed Playbook: `skill://poteto-mode/playbooks/shipping.md` ### Principles Applied: - `principle-model-the-domain`: Defined `SatellitePassOption` domain interface for Sentinel-2 cloud-free acquisition dates, cloud cover percentages, and formatted labels. - `principle-boundary-discipline`: Clamped opacity inputs within `0.0` to `1.0` at handler boundaries with percentage string formatting, and sanitized dates via `encodeURIComponent`. - `principle-subtract-before-you-add`: Reused existing MapLibre raster paint properties and native HTML range slider without pulling in bulky third-party slider UI libraries. - `principle-test-behavior-not-implementation`: Tested real DOM element rendering, input value boundary handling, and percentage text updates. - `principle-prove-it-works`: Verified execution against Forgejo Actions CI run 219 (`CI / Verify Quality & Build` green in 2m8s), clean `vp check` across 334 files, `tsc --noEmit` clean, and all 56 test files passing (372 tests). --- ### Gate 1: Mechanical Verification Gate - `node scripts/verify-pr.mjs 135`: Passed. Conventional commit title and principle citations validated. - CI status check: `CI / Verify Quality & Build (pull_request)` succeeded on head commit `193ce0562ef4da0cf3aed7d8a45f476313838f41`. - `vp check`: Clean. 0 warnings, 0 lint errors across 165 files, 334 files formatted. - `pnpm exec tsc --noEmit`: Clean with 0 TypeScript compiler errors. - `pnpm test`: Passed with 56 test files and 372 tests green. ### Gate 2: Ponytail Audit (`skill://ponytail-review`, `skill://ponytail-audit`) - Standard HTML range input and pure React state. No unnecessary abstractions or unused dependencies. - Scoring: `Lean already. Ship.` Net lines to cut: 0 lines. ### Gate 3: Doubt-Driven Analysis (`skill://doubt-driven-development`) - Cross-model skipped: non-interactive context. - Scrutinized opacity normalization for NaN, negative values, and values greater than 1.0. Verified tile source URL query formatting and URL encoding. All checks sound. ### Gate 4: Security & Hardening (`skill://security-and-hardening`) - No secrets committed. - Date parameters are encoded using `encodeURIComponent` before embedding into tile API URLs. ### Gate 5: Code Quality & Simplification (`skill://code-review-and-quality`, `skill://code-simplification`) - Satisfies all Issue #74 acceptance criteria: - Slider smoothly adjusts layer opacity in real time. - Date picker switches between available cloud-free satellite passes. ### Gate 6: Poteto Shipping Protocol (`skill://poteto-mode/playbooks/shipping.md`) - Rebased cleanly onto `main` at `f5dcd94`. - Ready for squash-merge to `main`. --- **Verdict: APPROVE**

yuris-bot merged commit 7f6b56fe65 into main 2026-10-16 04:42:15 +00:00

yuris-bot deleted branch feat/satellite-controls 2026-10-16 04:42:15 +00:00

yuris-bot referenced this pull request from a commit 2026-10-16 04:42:16 +00:00

feat(ui): satellite pass date picker and band opacity slider (#135)

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

Subscribe

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!135

No description provided.