← All proposals

Thinking State

A small inline status: the agent icon (Zappy by default), a label ("Thinking..."), and the elapsed time in the code font ("17.1s").

Net-new componentOpen in Storybook

proposals/ThinkingState/decisions.md14 lines · View on GitHub

Decisions

  • Net-new pattern, not a StatusIndicator type. StatusIndicator is a status dot or spinner plus a label; this has an agent icon, an animated label and elapsed time. Tagged new-pattern (sidebar "New" pill, canvas badge, purple in Annotate).
  • Props: label (required), showTimer (default false), time, iconName (default zappy; sparklesSolid for other agents), state (active | completed | stopped, default active). No text is hardcoded in the component.
  • The consumer owns the timer. time is a formatted string, so formatting and ticking stay out of the component (v2 doesn't own logic). showTimer turns the time on or off. The LiveTimer story ticks one for demo.
  • Accessibility: the container is role="status" so the label is announced when it appears; the time is aria-hidden so a ticking value isn't read out. Tabular numerals keep the time from jittering.
  • Motion: the PDS AI shimmer on the label. While state is active, the label takes pds-ai-active-shimmer (--pds-gradient-ai-shimmer sweeping on --pds-animation-duration-ai-shimmer, reduced-motion aware), so only the text shimmers. Tried pds-pulse first; it draws a grey skeleton chip behind the text, which is wrong for a label with known content. The icon pulses between 75% and its normal size (never larger than 100%) on the same duration while active; reduced motion turns both off. Open: the shimmer is a white band over the label's box, so check it on dark text in light mode and on light text in dark mode. If it reads poorly in dark, the fallback is a text-clipped gradient from the foreground tokens.
  • Text colors: label in the default foreground, time in the secondary foreground in --pds-typography-ff-code, from the screenshot.
  • Open: finished state. completed shows the same text still. Does a finished run change its wording ("Zapped for 17.1s") or collapse into something expandable (the reasoning)? Not designed.
  • Open: placement and sizing. Shown at the default small text size, inline. Where it appears (above the chat input, in the message list) isn't decided.
  • Storybook: Proposals/Thinking State. Uses the local Icon wrapper so sparklesSolid works.
  • Sizes xs | s | m, named after the type tokens (default s). The text takes the matching type size (xs 0.75rem, s 0.875rem, m 1rem). The icon is the same height as the text, which matches PDS's icon scale (icon xs/s/m are the same rem as type xs/s/m). The time is one type step smaller (s gets xs, m gets s); for xs it stays at xs because the next step down (10px) is too small to read. The gap grows a step per size (3xs, 2xs, xs). The icon pulse (75% to 100%) scales with the icon. Larger sizes were tried (l, xl) and dropped as not needed.
  • state replaces isActive: a boolean can't tell finished from stopped. completed is the old inactive look. stopped (the user cut the agent off) is its own state, not a rename of completed, because the run did not finish: still (no shimmer or pulse), and the icon and label take --pds-color-foreground-default-secondary so it reads as cut off. The time keeps its own secondary color. Wording ("Stopped", "Stopped after 17.1s") is the consumer's, as with completed. Open: does stopped need a different icon (a stop mark) instead of, or as well as, the muted color?