# Viewership UI

> Copy-in UI components for Astro. Server-rendered markup, vanilla TypeScript, themed with `--vs-*` tokens in one `foundation.css`. No React, no Tailwind, no runtime npm dependencies.

## How to use a component

1. Add `foundation.css` once (e.g. `src/styles/foundation.css`) and import it in your base layout.
2. Copy a component's folder into `src/components/viewership/<slug>/`, and each dependency into its own sibling folder.
3. Import the `.astro` file and use it. Scripts boot themselves.

Shortcut: `/components/<slug>.bundle.txt` has every file a component needs, each with its destination path.

Credits: ported from [Beautiful UI](https://www.beautifului.dev) (MIT, © 2026 Shane Levine).

## Components

- [Loading State](https://viewership.ai/ui/components/loading-state.md): Pixel-grid loader with a shimmering label and elapsed timer.
- [Thinking](https://viewership.ai/ui/components/thinking-state.md): Expandable agent trace for steps, reasoning, search or tool calls.
- [Streaming Text](https://viewership.ai/ui/components/streaming-text.md): Streamed answer with inline citations, sources, actions and follow-ups.
- [Approval Card](https://viewership.ai/ui/components/approval-card.md): Questions an agent asks, one step at a time, before acting.
- [Tool Chips](https://viewership.ai/ui/components/tool-chips.md): Agent run as expandable tool-call rows, then file-diff chips.
- [Task Rows](https://viewership.ai/ui/components/task-rows.md): Live agent task status as expandable capsules or a list.
- [Chat](https://viewership.ai/ui/components/chat-composer.md): Tabbed chat panel with reasoning replies and a growing composer.
- [Prompt Bar](https://viewership.ai/ui/components/prompt-bar.md): Message composer with @ sources, / commands and a model picker.
- [Recommendation Card](https://viewership.ai/ui/components/recommendation-card.md): Agent suggestion with a confidence meter and alternatives.
- [Context Cards](https://viewership.ai/ui/components/context-cards.md): Retrieved knowledge chunks with sources, entering in sequence.
- [Diff Table](https://viewership.ai/ui/components/diff-table.md): AI-proposed table edits you include or skip, then apply.
- [Records Table](https://viewership.ai/ui/components/records-table.md): CRM-style AI spreadsheet with tags, sorting and configurable AI columns.
- [Filter Table](https://viewership.ai/ui/components/filter-table.md): Status chips that filter a table in place.
- [Sidebar Nav](https://viewership.ai/ui/components/sidebar-nav.md): Collapsible workspace and chat navigation with searchable history.
- [Search](https://viewership.ai/ui/components/search.md): Command search with live filtering and an empty state.
- [Flowchart](https://viewership.ai/ui/components/flowchart.md): Workflow trigger and condition cards on a dotted canvas with draggable steps.
- [Insight Cards](https://viewership.ai/ui/components/insight-cards.md): Paged agent insights with scrubbable SVG charts and follow-up prompts.
- [Code Block](https://viewership.ai/ui/components/code-block.md): Line-numbered code listing with copy, or a unified diff.
- [Fine-tune Card](https://viewership.ai/ui/components/fine-tune-card.md): Compact inspector the agent adjusts, then hands back to you.
- [Selection Actions](https://viewership.ai/ui/components/selection-actions.md): Select text and a floating toolbar rewrites it in place.
- [Agent Screen](https://viewership.ai/ui/components/agent-screen.md): An agent's live screen with an expandable viewer and recording.

## Atoms

- [Button](https://viewership.ai/ui/components/button.md): Pill-shaped action button in six variants and three sizes.
- [Glide Menu](https://viewership.ai/ui/components/glide-menu.md): One highlight that glides to the hovered or focused row.
- [Entity Chip](https://viewership.ai/ui/components/entity-chip.md): Inline reference to a client, person or record, as a monogram and name.
- [Value Pill](https://viewership.ai/ui/components/value-pill.md): Inline badge that sets a value off from running text.
- [Shimmer](https://viewership.ai/ui/components/shimmer.md): Label with a moving light sweep that shows the agent is working.
- [Stream Text](https://viewership.ai/ui/components/stream-text.md): Text that streams in like model output, with a blurred edge and caret.
- [Chip](https://viewership.ai/ui/components/chip.md): Monospace chip for code values and field names in text.
- [Status Pill](https://viewership.ai/ui/components/status-pill.md): Tinted status label with a leading dot, in five tones.
- [Segmented Control](https://viewership.ai/ui/components/segmented-control.md): Equal-width segments with a sliding thumb, as a radio group.
- [Switch](https://viewership.ai/ui/components/switch.md): On/off toggle on a native checkbox, in two sizes and two tones.
- [Progress Ring](https://viewership.ai/ui/components/progress-ring.md): Small progress ring with a count or glyph in the center.
- [Text Row](https://viewership.ai/ui/components/text-row.md): Label on the left, value and optional meta on the right.
- [Overlay core](https://viewership.ai/ui/components/overlay.md): Positioning, dismissal, focus-trap and roving-focus helpers for popovers, menus and dialogs.