Skip to content

D-2: DesignSystem — add StatusIndicator primitive #252

@kirich1409

Description

@kirich1409

Description

Add StatusIndicator — generic pill / dot component for rendering tool-call lifecycle states (pending / in_progress / completed / failed) and session status (idle / streaming / thinking / error). Used by ToolCallCardView, top status strip in DialogueView, and tab-icon indicators.

⚠️ Re-verify before implementation. DS already ships StatusBadge (Components/StatusBadge.swift) with SF Symbol + label + color-coded states. Before creating a new StatusIndicator, check whether StatusBadge already covers the required kinds (idle / pending / inProgress / completed / failed / warning) and sizes (dot / pill / large). If yes — extend StatusBadge with missing variants instead of duplicating. A new type only makes sense if animation / accessibility / sizing requirements don't fit the existing API.

Spec: Epic #250 §6 (UI concept — live feel).

Scope

Either extend StatusBadge with missing variants or create StatusIndicator (decide based on API fit):

public enum Kind: Equatable, Sendable {
    case idle
    case pending        // subtle pulse
    case inProgress     // animated spinner
    case completed      // static checkmark
    case failed         // static warning icon
    case warning        // yellow pulse
}
public enum Size { case dot, pill, large }
// public init(kind: Kind, size: Size = .pill, label: LocalizedStringKey? = nil)
  • dot — 8pt circle, no label.
  • pill — icon + optional label + inline color fill (using SF Symbol + DS.Color.{success, warning, destructive, textSecondary}).
  • large — headline-sized badge for top status strip.
  • Every Kind pairs color + SF Symbol + animation (never color alone — a11y req).
  • Animations wrapped in @Environment(\.accessibilityReduceMotion) — when on, spinner becomes static icon, pulse becomes fade-in only.
  • All sizes have .accessibilityLabel from Kind.description and .accessibilityValue reflecting active state.

Acceptance Criteria

  • Decision recorded: extend StatusBadge or create StatusIndicator (with rationale vs existing API).
  • Chosen approach implements Kind, Size, public init(kind:size:label:).
  • Each of 6 Kinds renders a unique icon + color + motion signature — no color-only signaling.
  • All animations conditionally guarded by accessibilityReduceMotion.
  • .accessibilityLabel present and meaningful for every combination.
  • Added to DesignSystemCatalog with all 6 kinds × 3 sizes × light/dark/HCR/reduceTransparency.
  • Owner approval for ds-api.
  • Unit tests cover kind→icon and kind→a11y-label mappings.

Relationships

Metadata

Metadata

Assignees

No one assigned

    Labels

    a11yAccessibility: VoiceOver, Dynamic Type, Reduce Motion, etc.complexity:SdialogueDialogue feature — structured chat UI for agent sessionsds-apiChanges to DesignSystem public API — requires owner approvalfrontendwave-1

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions