Skip to content

feat(ux): turn-meta footer (* Took N.Ns)#261

Draft
Zbrooklyn wants to merge 1 commit intoRAIT-09:masterfrom
Zbrooklyn:polish/turn-meta-footer
Draft

feat(ux): turn-meta footer (* Took N.Ns)#261
Zbrooklyn wants to merge 1 commit intoRAIT-09:masterfrom
Zbrooklyn:polish/turn-meta-footer

Conversation

@Zbrooklyn
Copy link
Copy Markdown

What

Adds a small italic muted line that appears below the message list when a turn completes:

Took 12.3s

Hidden during streaming (so it never flickers mid-response). Cleared when the next turn starts.

Why

Personality moment that matches the Claude Code CLI / Claudian convention (* Crunched for 32s / * Smoked for 31s). Helps the user understand pacing — was that "this was a quick one-shot" or "the agent really chewed on this"?

Implementation

  • New state in ChatPanel: turnStartedAtRef (timestamp at turn-start), lastTurnDuration (delta on turn-end)
  • Hooks into the existing prevIsSendingRef lifecycle effect — adds the start-stamp on false → true transition and the duration-compute on true → false
  • formatDuration helper renders sub-second / seconds / minutes with sensible labels (0.4s, 12s, 1m 23s)
  • Hidden for sub-100ms turns to avoid noise on cached/instant resumes
  • Renders in both sidebar and floating chat variants

Files changed

  • src/ui/ChatPanel.tsx — state + render slot in both variants
  • styles.css.agent-client-turn-meta rule + self-contained fade-in keyframe

Notes

Self-contained — does not depend on any other in-flight UX work. Animation keyframe is uniquely named so it won't collide with future fade-ins.

Personality moment matching Claudian's "* Crunched for 32s" convention.
Stamps Date.now() when isSending flips false->true, computes the delta
when it flips back, and renders an italic muted line below the message
list. Cleared when the next turn starts. Hidden for sub-100ms turns to
avoid noise on cached/instant resumes. Fades in via the same keyframe
the collapsibles use.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant