feat(animasi): T-0.4 spike lolos — ticker 30 FPS + toast harmonica, CPU idle 2.75% (F-026 awal)

THIRD_PARTY_NOTICES.md

@@ -21,6 +21,7 @@ Repo referensi hanya ada di `reference/` (git-ignored).
 | bubbletea | v2.1.0 | MIT |
 | lipgloss | v2.0.6 | MIT |
 | oto | v3.5.1 | Apache-2.0 |
+| harmonica | v0.2.0 | MIT |
 | purego *(transitif oto — driver ALSA)* | v0.11.0 | Apache-2.0 |
 | jfreymuth/pulse *(transitif oto — driver PulseAudio pure-Go)* | v0.1.3 | MIT |
 

docs/PRD.md

@@ -66,7 +66,7 @@ tia hadir sebagai **satu binary mandiri (single static binary)** yang fleksibel
 | **Config** | go-yaml v3 | `gopkg.in/yaml.v3` | Baca/tulis config, diatur lewat layar Pengaturan di TUI (tanpa framework CLI) |
 | **Audio Engine** | Oto v3 | `github.com/ebitengine/oto/v3` | Pure-Go audio player (`CGO_ENABLED=0`), PulseAudio/PipeWire/ALSA fallback |
 | **Audio Assets** | Kenney Interface Sounds | CC0 1.0 Universal | Aset audio open-source tanpa royalti, WAV 44.1kHz mono embedded (<2MB) |
-| **Animation Engine**| Harmonica v2 | `charm.land/harmonica/v2` | Fisika pegas (spring physics) & timer ticker 30 FPS untuk animasi TUI |
+| **Animation Engine**| Harmonica | `github.com/charmbracelet/harmonica` (v0.2.0) | Fisika pegas (spring physics) & timer ticker 30 FPS untuk animasi TUI |
 | **CLI Dispatcher** | Native Go Router | Go standard library | Router ringan untuk mode CLI pendamping (`tia-love convert`, `tia-love ps`, dll) |
 
 ### Docker Interaction Strategy: Hybrid
@@ -300,7 +300,7 @@ tia hadir sebagai **satu binary mandiri (single static binary)** yang fleksibel
   5. **Animated Sparklines:** Grafik telemetri CPU & Memory yang mengalir halus secara real-time.
 - **Acceptance Criteria:**
   - Framerate dibatasi maksimal 30 FPS untuk menjaga efisiensi daya dan CPU (< 3% idle CPU usage).
-  - Ditenagai oleh `charm.land/harmonica/v2` untuk fisika transisi dan `tea.Tick` untuk timer event.
+  - Ditenagai oleh `github.com/charmbracelet/harmonica` (spring physics) untuk fisika transisi dan `tea.Tick` untuk timer event.
   - Mode *Reduced Motion / Non-Animated*: opsi di layar Pengaturan untuk mematikan animasi bagi pengguna yang menginginkan tampilan statis atau berada di koneksi SSH dengan bandwidth sangat rendah.
 
 #### F-027: Dashboard Beranda Keren (Home Dashboard View)

docs/spikes/T-0.4-animasi.md

@@ -0,0 +1,58 @@
+# Spike T-0.4 — Animasi ASCII 30 FPS + Toast (harmonica)
+
+> Status: ✅ **LOLOS** · Tanggal: 2026-10-15 · Mesin: Linux (PipeWire aktif), terminal pty 120×40
+
+## Tujuan (PRD Phase 0)
+
+Prototipe animasi ASCII 30 FPS + toast slide-in, dan buktikan CPU idle < 3% (F-026).
+
+## Cara menjalankan ulang
+
+```bash
+# Laju tick headless (target 30 fps):
+TIA_ANIM_SPIKE=1 go test ./internal/ui/animation/ -run TestTickerRate -v -count=1
+
+# CPU + bandwidth render di pty (fase anim ON vs reduced-motion OFF):
+python3 scripts/measure-cpu.py ./tia-love 8
+```
+
+Interaktif: `make run` → `[t]` toast (slide-in/out + auto-dismiss 2.5 dtk + klik = tutup),
+`[a]` toggle reduced-motion, logo shimmer berjalan terus.
+
+## Hasil
+
+| Metrik | Target | Hasil |
+|---|---|---|
+| Laju tick | 30 fps | **29.1 fps** (59 tick / 2.024 dtk — jitter timer wajar) |
+| CPU fase animasi ON (shimmer tiap frame + toast) | < 3% (F-026) | **2.75%** ✅ |
+| CPU fase reduced-motion (ticker berhenti) | — | **0.50%** |
+| Output terminal fase ON | — | **9.1 KB/s** ≈ 310 B/frame (120×40) → diff renderer terbukti |
+
+## Keputusan implementasi
+
+- **Ticker**: `tea.Tick` (30 FPS) di-rearm tiap `TickMsg`, dengan **ID sesi** — saat loop
+  di-restart (reduced-motion on/off) tick basi otomatis diabaikan; tick yang masih
+  terjadwal tidak boleh menghidupkan ulang loop (bug ditemukan & ditambal saat spike).
+- **Spring**: `github.com/charmbracelet/harmonica` **v0.2.0** — *catatan koreksi PRD:*
+  `charm.land/harmonica/v2` tidak ada; `charm.land/harmonica` ada tapi men-declare module
+  path `github.com/charmbracelet/harmonica`, jadi import resmi = jalur github.
+- **Toast** (`internal/ui/components/toast.go`): tinggi tetap 4 baris (layout tidak melompat),
+  slide via spring (damping 0.7), horizontal center, auto-dismiss `hold` 2.5 dtk.
+- **Logo shimmer** (`internal/ui/animation/logo.go`): kilau berjalan dengan interpolasi warna
+  RGB per karakter (dim `overlay1` → bright `pink`), jarak sirkular — murah, tanpa aset.
+
+## Temuan
+
+1. CPU 2.75% masih **di bawah** target 3% tapi tipis — di hardware lambat bisa melewati.
+   Mitigasi yang sudah ada & menyusul: reduced-motion (terbukti 0.5%), dan nanti ticker
+   di-skip saat konten tidak berubah/tidak terlihat (Phase 1).
+2. Diff renderer (Cursed Renderer) efisien: hanya ~310 B/frame keluar walau layar 120×40.
+3. Jitter tick (29.1 vs 30) berasal dari penjadwalan timer + 1 frame ekstra saat quit;
+   untuk animasi UI tidak terasa.
+
+## Batasan (jujur)
+
+- Angka CPU spesifik mesin ini; belum diuji di hardware low-end / terminal lambat (SSH).
+- Belum uji truecolor → 256/16 warna fallback (masuk kerja theme Phase 1).
+- Toast versi spike belum mendukung antrean (toast queue), hover-pause, dan klik-untuk-navigasi
+  (F-025 penuh) — itu Phase 1.

go.mod

@@ -5,6 +5,7 @@ go 1.27.1
 require (
 	charm.land/bubbletea/v2 v2.1.0
 	charm.land/lipgloss/v2 v2.0.6
+	github.com/charmbracelet/harmonica v0.2.0
 	github.com/ebitengine/oto/v3 v3.5.1
 )
 

go.sum

@@ -6,6 +6,8 @@ github.com/aymanbagabas/go-udiff v0.4.1 h1:OEIrQ8maEeDBXQDoGCbbTTXYJMYRCRO1fnodZ
 github.com/aymanbagabas/go-udiff v0.4.1/go.mod h1:0L9PGwj20lrtmEMeyw4WKJ/TMyDtvAoK9bf2u/mNo3w=
 github.com/charmbracelet/colorprofile v0.4.3 h1:QPa1IWkYI+AOB+fE+mg/5/4HRMZcaXex9t5KX76i20Q=
 github.com/charmbracelet/colorprofile v0.4.3/go.mod h1:/zT4BhpD5aGFpqQQqw7a+VtHCzu+zrQtt1zhMt9mR4Q=
+github.com/charmbracelet/harmonica v0.2.0 h1:8NxJWRWg/bzKqqEaaeFNipOu77YR5t8aSwG4pgaUBiQ=
+github.com/charmbracelet/harmonica v0.2.0/go.mod h1:KSri/1RMQOZLbw7AHqgcBycp8pgJnQMYYT8QZRqZ1Ao=
 github.com/charmbracelet/ultraviolet v0.0.0-20261008173134-6b8d4baf91b4 h1:hISLzUbwcvJbGoNR6A3L/TpguRRnACBmZOee8LcHLJw=
 github.com/charmbracelet/ultraviolet v0.0.0-20261008173134-6b8d4baf91b4/go.mod h1:aJDVk+WOVM1K04rdc/71PMPoUGfjxjhvXfP3Pjz1Zio=
 github.com/charmbracelet/x/ansi v0.11.9 h1:kIrqLBxtTVbLyyHO2Evoi93EjQo1mylWmpNEsfPxXAM=

internal/app/app.go

@@ -2,34 +2,66 @@ package app
 
 import (
 	"fmt"
+	"strings"
+	"time"
 
 	tea "charm.land/bubbletea/v2"
 	"charm.land/lipgloss/v2"
 
 	"github.com/oxpoe/tia/internal/audio"
+	"github.com/oxpoe/tia/internal/ui/animation"
+	"github.com/oxpoe/tia/internal/ui/components"
 )
 
-// Model root sementara (T-0.2/T-0.3, Phase 0).
-// Membuktikan Bubble Tea v2 (View struct, mouse, resize) + audio engine
-// sebelum layout penuh Phase 1 menggantikannya.
+// Model root sementara (T-0.2–T-0.4, Phase 0).
+// Membuktikan Bubble Tea v2 (View struct, mouse, resize, ticker 30 FPS),
+// audio engine, dan toast animasi sebelum layout penuh Phase 1.
 type Model struct {
 	width, height int
 	clicks        int
 	lastClick     string
 	sound         *audio.Engine
+
+	tickID    int64
+	animating bool
+	phase     float64
+	toast     components.Toast
+	frames    int
+	fps       int
+	lastFPSAt time.Time
 }
 
 func New() Model {
 	return Model{
 		lastClick: "belum ada klik",
 		sound:     audio.New(audio.Options{Enabled: true, Volume: 70, MuteOnSSH: true}),
+		tickID:    animation.NewID(),
+		animating: true,
+		toast:     components.NewToast(),
 	}
 }
 
-func (m Model) Init() tea.Cmd { return nil }
+func (m Model) Init() tea.Cmd { return animation.Next(m.tickID) }
 
 func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	switch msg := msg.(type) {
+	case animation.TickMsg:
+		if msg.ID != m.tickID || !m.animating {
+			return m, nil // tick basi / animasi dimatikan oleh reduced-motion
+		}
+		m.phase += 0.9
+		m.toast.Update(animation.FrameInterval)
+		m.frames++
+		if m.lastFPSAt.IsZero() {
+			m.lastFPSAt = msg.Time
+		}
+		if d := msg.Time.Sub(m.lastFPSAt); d >= time.Second {
+			m.fps = int(float64(m.frames) / d.Seconds())
+			m.frames = 0
+			m.lastFPSAt = msg.Time
+		}
+		return m, animation.Next(m.tickID)
+
 	case tea.WindowSizeMsg:
 		m.width, m.height = msg.Width, msg.Height
 
@@ -38,7 +70,19 @@ func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		case "q", "ctrl+c", "esc":
 			m.sound.Play(audio.ModalClose)
 			return m, tea.Quit
+		case "a": // reduced motion: hentikan/nyalakan ticker
+			m.animating = !m.animating
+			if m.animating {
+				m.tickID = animation.NewID()
+				return m, animation.Next(m.tickID)
+			}
+			return m, nil
+		case "t":
+			m.toast.Show("✔ [ SUKSES ] Konversi Berhasil Disimpan",
+				"Stack 'web-app' tersimpan di ~/.tia/stacks/web-app/")
+			m.sound.Play(audio.NotifySuccess)
 		case "j", "down", "k", "up":
+			m.phase += 6
 			m.sound.Play(audio.Navigate)
 		}
 
@@ -46,6 +90,9 @@ func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		if msg.Button == tea.MouseLeft {
 			m.clicks++
 			m.lastClick = fmt.Sprintf("klik #%d di (%d, %d)", m.clicks, msg.X, msg.Y)
+			if m.toast.Active() {
+				m.toast = components.NewToast() // klik = tutup toast
+			}
 			m.sound.Play(audio.Click)
 		}
 	}
@@ -57,19 +104,30 @@ func (m Model) View() tea.View {
 		Bold(true).
 		Foreground(lipgloss.Color("#cba6f7")).
 		Render("tia — Terminal Is A My Way")
-	tagline := lipgloss.NewStyle().
+
+	fps := "—"
+	if m.animating {
+		fps = fmt.Sprintf("%d", m.fps)
+	}
+	statusline := lipgloss.NewStyle().
 		Foreground(lipgloss.Color("#a6adc8")).
-		Render("Just Work · Phase 0 · skeleton TUI + audio")
+		Render(fmt.Sprintf("Just Work · Phase 0 · animasi %s fps · audio: %s", fps, m.sound.Status()))
+	hint := lipgloss.NewStyle().
+		Foreground(lipgloss.Color("#6c7086")).
+		Render("[t] toast · [a] reduced-motion · klik / j / k = bunyi · q = keluar")
+
 	box := lipgloss.NewStyle().
 		Border(lipgloss.RoundedBorder()).
 		BorderForeground(lipgloss.Color("#6c7086")).
 		Padding(0, 2).
-		Render(m.lastClick + "\n\nklik / j / k = bunyi · q = keluar")
+		Render(fmt.Sprintf("%s\nukuran jendela: %dx%d", m.lastClick, m.width, m.height))
 
-	content := fmt.Sprintf("%s\n%s\n\n%s\n\nukuran jendela: %dx%d · audio: %s",
-		title, tagline, box, m.width, m.height, m.sound.Status())
+	parts := []string{title, "", animation.RenderLogo(m.phase), "", statusline, hint, "", box}
+	if t := m.toast.View(max(m.width, 20)); t != "" {
+		parts = append([]string{t, ""}, parts...)
+	}
 
-	v := tea.NewView(content)
+	v := tea.NewView(strings.Join(parts, "\n"))
 	v.AltScreen = true
 	v.MouseMode = tea.MouseModeCellMotion
 	return v

internal/ui/animation/logo.go

@@ -0,0 +1,73 @@
+package animation
+
+import (
+	"fmt"
+	"math"
+	"strings"
+
+	"charm.land/lipgloss/v2"
+)
+
+// Logo ASCII tia (PRD §5.1.0).
+var logoLines = []string{
+	" _   _",
+	"| |_(_) __ _",
+	"| __| |/ _` |",
+	"|_| |_|\\__,_|",
+}
+
+const (
+	logoDim     = "#7f849c" // overlay1 — bagian redup
+	logoBright  = "#f5c2e7" // pink — puncak kilau
+	shimmerSpan = 7.0       // lebar kilau dalam karakter
+)
+
+// RenderLogo menggambar logo dengan kilau (shimmer) berjalan.
+// phase = posisi kilau (bebas; di-mod total lebar logo).
+func RenderLogo(phase float64) string {
+	total := 0
+	for _, l := range logoLines {
+		total += len([]rune(l))
+	}
+	head := math.Mod(phase, float64(total))
+	if head < 0 {
+		head += float64(total)
+	}
+
+	var b strings.Builder
+	idx := 0
+	for li, line := range logoLines {
+		if li > 0 {
+			b.WriteByte('\n')
+		}
+		for _, r := range line {
+			d := math.Abs(float64(idx) - head)
+			if d > float64(total)/2 { // jarak sirkular
+				d = float64(total) - d
+			}
+			t := math.Max(0, 1-d/shimmerSpan)
+			b.WriteString(lipgloss.NewStyle().
+				Foreground(lipgloss.Color(lerpHex(logoDim, logoBright, t))).
+				Render(string(r)))
+			idx++
+		}
+	}
+	return b.String()
+}
+
+// lerpHex meng-interpolasi dua warna hex (t 0..1).
+func lerpHex(a, b string, t float64) string {
+	t = math.Max(0, math.Min(1, t))
+	ar, ag, ab := hexRGB(a)
+	br, bg, bb := hexRGB(b)
+	return fmt.Sprintf("#%02x%02x%02x",
+		int(float64(ar)+(float64(br)-float64(ar))*t),
+		int(float64(ag)+(float64(bg)-float64(ag))*t),
+		int(float64(ab)+(float64(bb)-float64(ab))*t))
+}
+
+func hexRGB(s string) (int, int, int) {
+	var r, g, b int
+	_, _ = fmt.Sscanf(strings.TrimPrefix(s, "#"), "%02x%02x%02x", &r, &g, &b)
+	return r, g, b
+}

internal/ui/animation/ticker.go

@@ -0,0 +1,34 @@
+// Package animation — ticker render loop 30 FPS & animasi ASCII (F-026).
+package animation
+
+import (
+	"sync/atomic"
+	"time"
+
+	tea "charm.land/bubbletea/v2"
+)
+
+// FPS dibatasi 30 sesuai F-026 (target CPU idle < 3%).
+const FPS = 30
+
+// FrameInterval — durasi satu frame (diekspor untuk perhitungan fisika/timer).
+const FrameInterval = time.Second / FPS
+
+// TickMsg dibawa tiap frame. ID mencegah tick basi ikut diproses
+// saat loop di-restart (mis. animasi di-toggle).
+type TickMsg struct {
+	ID   int64
+	Time time.Time
+}
+
+var nextID atomic.Int64
+
+// NewID membuat identitas baru untuk satu sesi loop ticker.
+func NewID() int64 { return nextID.Add(1) }
+
+// Next menjadwalkan frame berikutnya; panggil lagi setiap TickMsg diterima.
+func Next(id int64) tea.Cmd {
+	return tea.Tick(FrameInterval, func(t time.Time) tea.Msg {
+		return TickMsg{ID: id, Time: t}
+	})
+}

internal/ui/animation/ticker_test.go

@@ -0,0 +1,52 @@
+package animation
+
+import (
+	"io"
+	"os"
+	"testing"
+	"time"
+
+	tea "charm.land/bubbletea/v2"
+)
+
+type countModel struct {
+	id     int64
+	ticks  int
+	stopAt time.Time
+}
+
+func (m *countModel) Init() tea.Cmd { return Next(m.id) }
+
+func (m *countModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	if _, ok := msg.(TickMsg); ok {
+		m.ticks++
+		if time.Now().After(m.stopAt) {
+			return m, tea.Quit
+		}
+		return m, Next(m.id)
+	}
+	return m, nil
+}
+
+func (m *countModel) View() tea.View { return tea.NewView("tick") }
+
+// TestTickerRate mengukur laju tick 30 FPS secara headless (spike T-0.4):
+//
+//	TIA_ANIM_SPIKE=1 go test ./internal/ui/animation/ -run TestTickerRate -v -count=1
+func TestTickerRate(t *testing.T) {
+	if os.Getenv("TIA_ANIM_SPIKE") != "1" {
+		t.Skip("set TIA_ANIM_SPIKE=1 untuk menjalankan")
+	}
+	m := &countModel{id: NewID(), stopAt: time.Now().Add(2 * time.Second)}
+	p := tea.NewProgram(m, tea.WithInput(nil), tea.WithOutput(io.Discard))
+	start := time.Now()
+	if _, err := p.Run(); err != nil {
+		t.Fatalf("program gagal: %v", err)
+	}
+	dur := time.Since(start)
+	fps := float64(m.ticks) / dur.Seconds()
+	t.Logf("ticks=%d durasi=%v → %.1f fps (target %d)", m.ticks, dur.Round(time.Millisecond), fps, FPS)
+	if fps < float64(FPS)*0.85 {
+		t.Errorf("laju tick terlalu rendah: %.1f fps", fps)
+	}
+}

internal/ui/components/toast.go

@@ -0,0 +1,121 @@
+// Package components — komponen UI tia.
+package components
+
+import (
+	"math"
+	"strings"
+	"time"
+
+	"charm.land/lipgloss/v2"
+	"github.com/charmbracelet/harmonica"
+
+	"github.com/oxpoe/tia/internal/ui/animation"
+)
+
+// Toast — notifikasi melayang dari tengah atas layar (F-025).
+// Versi spike T-0.4: slide masuk/keluar ditenagai spring harmonica.
+const toastHeight = 4 // 2 baris konten + 2 border
+
+type toastState int
+
+const (
+	toastHidden toastState = iota
+	toastIn
+	toastVisible
+	toastOut
+)
+
+type Toast struct {
+	spring   harmonica.Spring
+	pos, vel float64 // baris offset: 0 = terlihat penuh, -toastHeight = tersembunyi
+	state    toastState
+	title    string
+	body     string
+	elapsed  time.Duration
+	hold     time.Duration // lama tampil sebelum slide keluar
+}
+
+func NewToast() Toast {
+	return Toast{
+		spring: harmonica.NewSpring(harmonica.FPS(animation.FPS), 6.0, 0.7),
+		pos:    -toastHeight,
+		hold:   2500 * time.Millisecond,
+	}
+}
+
+// Show menampilkan toast baru (slide-in dari atas).
+func (t *Toast) Show(title, body string) {
+	t.title, t.body = title, body
+	t.elapsed = 0
+	t.state = toastIn
+}
+
+// Active melaporkan ada toast yang tampil/beranimasi.
+func (t Toast) Active() bool { return t.state != toastHidden }
+
+// Update dipanggil tiap frame (30 FPS); dt dipakai untuk timer auto-dismiss.
+func (t *Toast) Update(dt time.Duration) {
+	switch t.state {
+	case toastIn, toastOut:
+		target := 0.0
+		if t.state == toastOut {
+			target = -toastHeight
+		}
+		t.pos, t.vel = t.spring.Update(t.pos, t.vel, target)
+		settled := math.Abs(t.pos-target) < 0.05 && math.Abs(t.vel) < 0.05
+		if !settled {
+			return
+		}
+		if t.state == toastIn {
+			t.state = toastVisible
+		} else {
+			t.state = toastHidden
+		}
+	case toastVisible:
+		t.elapsed += dt
+		if t.elapsed >= t.hold {
+			t.state = toastOut
+		}
+	}
+}
+
+// View menggambar toast setinggi tetap (toastHeight baris, di-center
+// horizontal); baris yang tergeser keluar area menjadi kosong.
+func (t Toast) View(width int) string {
+	if t.state == toastHidden {
+		return ""
+	}
+	boxW := 46
+	if boxW > width-2 {
+		boxW = width - 2
+	}
+	inner := boxW - 4
+	if inner < 8 {
+		inner = 8
+	}
+	clip := func(s string) string {
+		r := []rune(s)
+		if len(r) > inner {
+			return string(r[:inner])
+		}
+		return s
+	}
+
+	style := lipgloss.NewStyle().
+		Border(lipgloss.RoundedBorder()).
+		BorderForeground(lipgloss.Color("#a6e3a1")).
+		Foreground(lipgloss.Color("#cdd6f4")).
+		Width(inner).
+		Padding(0, 1)
+	lines := strings.Split(style.Render(clip(t.title)+"\n"+clip(t.body)), "\n")
+
+	shift := int(math.Round(t.pos)) // -toastHeight..0
+	rows := make([]string, toastHeight)
+	for r := range rows {
+		src := r - shift
+		if src >= 0 && src < len(lines) {
+			rows[r] = lipgloss.PlaceHorizontal(width, lipgloss.Center, lines[src])
+		}
+	}
+	return strings.Join(rows, "\n")
+}

scripts/measure-cpu.py

@@ -0,0 +1,89 @@
+#!/usr/bin/env python3
+"""Ukur CPU + output pty binary TUI tia (Phase 0).
+
+Dipakai untuk spike T-0.4 (docs/spikes/T-0.4-animasi.md):
+fase 1 animasi 30 FPS menyala, fase 2 setelah tombol 'a' (reduced-motion).
+
+Pakai:
+    python3 scripts/measure-cpu.py [./tia-love] [detik-per-fase]
+"""
+import fcntl
+import os
+import pty
+import signal
+import struct
+import sys
+import termios
+import threading
+import time
+
+BIN = sys.argv[1] if len(sys.argv) > 1 else "./tia-love"
+SECS = float(sys.argv[2]) if len(sys.argv) > 2 else 8.0
+ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+
+pid, fd = pty.fork()
+if pid == 0:
+    os.chdir(ROOT)
+    os.execvp("timeout", ["timeout", str(int(SECS * 2 + 10)), BIN])
+fcntl.ioctl(fd, termios.TIOCSWINSZ, struct.pack("HHHH", 40, 120, 0, 0))
+
+nbytes = [0]
+
+
+def drain():
+    while True:
+        try:
+            b = os.read(fd, 65536)
+        except OSError:
+            return
+        if not b:
+            return
+        nbytes[0] += len(b)
+
+
+threading.Thread(target=drain, daemon=True).start()
+
+
+def app_pid():
+    """PID anak (binary tia), bukan PID `timeout`."""
+    for _ in range(50):
+        try:
+            kids = open(f"/proc/{pid}/task/{pid}/children").read().split()
+            if kids:
+                return int(kids[0])
+        except FileNotFoundError:
+            pass
+        time.sleep(0.1)
+    return pid
+
+
+apid = app_pid()
+print("monitoring PID:", apid)
+
+HZ = os.sysconf("SC_CLK_TCK")
+
+
+def cpu():
+    p = open(f"/proc/{apid}/stat").read().split()
+    return (int(p[13]) + int(p[14])) / HZ
+
+
+def phase(label):
+    b0, c0, t0 = nbytes[0], cpu(), time.time()
+    time.sleep(SECS)
+    b1, c1, t1 = nbytes[0], cpu(), time.time()
+    print(f"{label:<38} CPU {100 * (c1 - c0) / (t1 - t0):5.2f}%  ·  output pty {(b1 - b0) / (t1 - t0) / 1024:5.1f} KB/s")
+
+
+time.sleep(3)  # warmup
+phase("FASE 1 (animasi 30fps)")
+os.write(fd, b"t")  # picu toast
+time.sleep(3.5)
+os.write(fd, b"a")  # reduced-motion
+time.sleep(1)
+phase("FASE 2 (reduced-motion)")
+try:
+    os.kill(pid, signal.SIGKILL)
+except ProcessLookupError:
+    pass
+print("selesai")