36 lines
1.2 KiB
Markdown
36 lines
1.2 KiB
Markdown
# Fluid Sidebar Activity Plan
|
|
|
|
## Goal
|
|
Transform the "laggy" sidebar counters into a fluid, high-energy "Dashboard" with smooth animations and speed metrics.
|
|
|
|
## Proposed Changes
|
|
|
|
### 1. New Helper: `SmoothCounter` (`bin/opencode-ink.mjs`)
|
|
- **Prop**: `value` (Target number)
|
|
- **Logic**:
|
|
- On `value` change, start a 50ms interval.
|
|
- Increment `displayValue` towards `value` by a dynamic step `(delta / 2)`.
|
|
- Effect: Numbers "roll" up rapidly instead of jumping.
|
|
|
|
### 2. New Hook: `useTrafficRate` (`bin/opencode-ink.mjs`)
|
|
- **Input**: `value` (increasing number)
|
|
- **Logic**:
|
|
- Store `(timestamp, value)` tuples for last 2 seconds.
|
|
- Calculate delta over time -> `chars/sec`.
|
|
- Return `rate`.
|
|
|
|
### 3. Update `Sidebar` Component
|
|
- **Header**: `⚡ ACTIVITY (LIVE)` with blinking dot?
|
|
- **Stats**:
|
|
- `📝 Chars`: Use `<SmoothCounter />`
|
|
- `🚀 Speed`: `<SmoothCounter value={rate} /> ch/s`
|
|
- **Visuals**:
|
|
- "Pulse Bar": `[▓▓▓░░]` length depends on `rate` (higher speed = longer bar).
|
|
|
|
## Verification
|
|
1. **Run Chat**: Ask "Write a long story".
|
|
2. **Observe**:
|
|
- Do numbers "roll" smoothly?
|
|
- Does Speed indicator fluctuate?
|
|
- Is the UI responsive (no lag)?
|