OpenQode/implementation_plan_counter.md

Real-Time Token Counter Plan

Goal

Show a live character/token count next to the "Thinking..." indicator so the user knows the AI is working.

User Review Required

Note

This consolidates the "Thinking" UI into one block (removing the duplicate "Ghost Text").

Proposed Changes

1. State Management (opencode-ink.mjs)

• Add State: const [thinkingStats, setThinkingStats] = useState({ chars: 0, steps: 0 });
• Reset: In handleSubmit, set thinkingStats to { chars: 0, steps: 0 }.

2. Stream Logic (opencode-ink.mjs)

• Modify: Inside sendMessage callback (or handleChunk):
  • Increment thinkingStats.chars by chunk length.
  • If newline detected in thinking block, increment thinkingStats.steps (optional, existing logic tracks lines).

3. UI Cleanup (opencode-ink.mjs)

• Remove: Delete GhostText rendering at line ~2200.
• Update: Pass stats={thinkingStats} to ThinkingBlock.

4. Component Update (ThinkingBlock.mjs)

• Display: Render (N chars) or (~N tokens) next to "Thinking...".

Verification Plan

1. Usage Test: Ask "Calculate fibonacci 100".
2. Visual Check: Watch the counter increment in real-time.
3. UI Check: Ensure only ONE thinking block appears.