@sakaniui/react 0.11.2 → 0.12.0

package/AGENTS.md

@@ -273,9 +273,19 @@ Many Figma-frame blocks have a fixed design width — put them in a container at
 
 ## 6. Moments an AI product needs (compose these today)
 
-The system has no dedicated AI components yet. Until it does, build these moments from existing parts,
-and **tell the user when you are composing** rather than implying a dedicated component exists.
-
+`ChainOfThought` (with `ChainOfThoughtStep`, `SourceStack` and `WorkingIndicator`) covers showing an agent's
+work. The other moments below have no dedicated component yet: build them from existing parts, and **tell the
+user when you are composing** rather than implying a dedicated component exists.
+
+- **Showing the agent's work.** Use `ChainOfThought`: one `ChainOfThoughtStep` per action (an `icon`, a `label`,
+  the `query` in monospace, a result `count`, and a `SourceStack` as `sources`). Append a step as the agent starts
+  it, mark the active one `status="active"` and finished ones `"done"` (they read muted), and give the container
+  `status="working"` with `startedAt` so the timer ticks on its own; switch to `status="done"` and the final
+  `elapsed` when the run ends. Give each step a recognisable icon: the site's real logo in its brand colour
+  (`icon={sourceLogo('reddit')}`, and the same in the `SourceStack`), or an emoji for steps with no site
+  (`EmojiLightBulb` for planning, `EmojiPageFacingUp` for reading). Do not use a generic magnifier for every
+  step. It only displays: you stream the steps in. Do not build this from `Stepper` (a
+  progress bar for a known sequence) or `ActivityFeed` (a log of past events).
 - **The model isn't sure.** State uncertainty in words next to the claim, not hidden in colour. Use an
   `Alert` (`color="info"` or `"warning"`) or a `Badge` ("Low confidence"). Offer the next step: verify,
   rephrase, or ask for more context.

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 All notable changes to `@sakaniui/react` are documented here.
 
+## 0.12.0
+
+- **New: `ChainOfThought`**, an AI agent's visible work, built from the new *↳ Chain of Thought* page in Figma.
+  A header, steps joined by a tree rail, and a live "Working" line.
+  - **`ChainOfThought`**: `title`, `icon`, `open` / `defaultOpen` / `onOpenChange` (the header toggles it, with
+    an animated open and close), `status` (`"working"` or `"done"`) with `elapsed` (seconds) or `startedAt`
+    (the time then counts up on its own), and `children`.
+  - **`SourceLogo`** and **`sourceLogo(name)`**: the real logo of the site a step searched or read, in its brand
+    colour, for the `icon` props of a step or a `SourceStack` chip (or `<SourceLogo name="reddit" />` on its own).
+    Seventeen sites: Google, X, Reddit, GitHub, LinkedIn, YouTube, Hacker News, Wikipedia, Stack Overflow, Product
+    Hunt, Medium, Notion, Substack, arXiv, Bluesky, Perplexity, DuckDuckGo. Black brands draw in the text colour so
+    they stay visible in dark mode. Emoji work as step icons too (`icon={EmojiLightBulb}`). A pending step's icon is
+    grey until it starts, and the spark that runs into the active step takes the logo's colour.
+  - **`ChainOfThoughtStep`**: `status` pending, active (read in full) or done (muted), an `icon`, a `label`, an
+    optional monospace `query`, a result `count`, and a `sources` row (add `onSourcesClick` to make it a button
+    with a chevron). The rail stops at the last step by itself; screen readers get each step's status.
+  - **`SourceStack`**: overlapping site-icon chips from `sources` ({ `label`, `icon` }); three to five read best.
+  - **`WorkingIndicator`**: the working line on its own: a living sparkle (in the brand colour, a 1px line) and a shimmering "Working" with the
+    elapsed time, or a check and "Worked for 11.2s". The sparkle's three stars move on their own: the big one turns
+    a quarter each cycle and breathes while the two small ones twinkle in turn, filling in at their peak, in time with
+    the shimmer. Both stop under reduced motion. The Live story has a Dark mode switch.
+  - Presentational: you append steps as your agent produces them. Light and dark through the tokens.
+  - **Motion**, from the Figma *Chain of Thought · motion* table, reads as ink running down the rail. An appended
+    step opens its row while the previous rail flows down into it, turns the corner and the icon lands; the label
+    is written in left to right, the query types itself, the count ticks up to its value and the source chips fan
+    out. A spark keeps running into the active step and its icon beats as it lands. Results that land later open
+    their row instead of jumping in. Finishing sends one sweep down the rail, lighting each icon in turn, and the
+    check is drawn when it lands. Opening the panel lets the steps rise in turn. Only what arrives after the first
+    render animates, and reduced motion makes all of it instant.
+- Agent contract: the four components are in the manifest with a streaming-run recipe and the aliases *chain of
+  thought*, *reasoning steps*, *agent steps*, *tool calls*, *sources*, *favicon stack* and more; the agent guide's
+  "moments an AI product needs" now points at `ChainOfThought`.
+
 ## 0.11.2
 
 - **Agent guide:** `AGENTS.md` gains a Map section (when to use `Map` or `MapGlobe`, latitude first, tile providers,