feat(ai): agentic UI kit, docs, and Steps timeline polish - #12
Merged
Conversation
Introduce presentational AI components under @constructive-io/ui/ai and the @constructive/ai registry block: composer, messages, loaders, markdown, code blocks, and stick-to-bottom chat scroll. Motion uses Constructive tokens with Beautiful UI–inspired pixel loaders and shimmer; runtime stays host-owned (no AI SDK coupling).
Add reasoning, thinking traces, tools, HITL approval, plan tracker, context ring, task rows, RAG cards, recommendations, streaming text, feedback, suggestions, and file upload. Includes status adapters for desktop and AI SDK shapes, Storybook coverage, unit tests, and a better-ui pass (concentric radii, transform-only meters, reduced-motion, hit areas).
Add DiffTable for proposed row edits, @constructive/ai-kit aggregate, and /blocks/ai docs with live tabbed demos. Wire sidebar, topbar install command, sitemap, and docs contract checks into the component sequence.
Drop the rigid docs contract checker from gen/gen:check and root check:flows. Keep generate-ui-demo-source as the only gen check.
Introduce a top-level AI nav group under Components, with Overview plus individual docs routes for every AI surface. Each page includes a live preview, install snippet, and prev/next among AI components.
Subpath exports such as /ai were collapsing under Next optimizePackageImports, which can leave client components undefined and render a blank page after hydration.
Promote AI to an Application-style always-visible nav group after Components, collapse Components while browsing AI routes, and fix the overview eyebrow label.
Match the Components nav pattern: collapsible AI group with count, open by default on AI routes, while Components stays collapsed there.
Replace border-l + absolute icon offsets with a fixed-width rail so dots, checks, and spinners share the same center axis as the vertical bar.
Center the connector under each marker using items-center + flex-1 instead of absolute offsets. Rebuild required for docs (package exports resolve to dist).
Position both the vertical line and markers with left-1/2/-translate-x-1/2 so the rail is one continuous axis; marker backgrounds punch the line.
Center the 1px connector with left: 7.5 in a 16px rail and place the marker with left:0 so both share a crisp mid-axis without translate.
Fill equal circular badges for done/running/pending so the 1px connector threads a consistent mid-axis through every marker without relying on asymmetric Lucide glyph optics.
Solid disk markers plus a pixel-snapped 1px rule so the timeline axis stays centered through every status badge.
Quiet PlanTracker-style icons, gapped connectors, title/icon alignment, short/long-content rail handling, multi-demo docs showcase, and Storybook edge-case story.
Lightweight syntax highlighting with language presets, elegant filename plus language pill header, and fade/show-more expand for long sources, with multi-language docs demos.
Replace outline Button double-ring chrome with a single floating control, fold Scroll Button docs into Chat Container with a redirect, and fix the full-bleed chat preview so it no longer leaves an empty right gutter.
Align AI component docs to the concise writing guide, rebuild the overview as simple-to-complex tabs with full-width stages, redesign ContextRing as a circular tick meter (with SSR-safe coords), and clear StreamingText blur after reveal completes.
Drop temporary PR and Steps preview images from the branch.
yyyyaaa
marked this pull request as ready for review
August 1, 2026 12:12
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a runtime-agnostic AI/agentic UI kit to
@constructive-io/ui, wires docs under/blocks/ai, and polishes the Steps timeline for production-quality agent traces.@constructive-io/ui/aisurfaces: loaders, prompt input, messages, markdown, tools, reasoning, Steps, plan tracker, diffs, tasks, and related chat chromeScreenshots
Docs preview for Steps (default + status catalog):
Edge-case showcase (long content, nested body, short steps, single/collapsed):
Gapped connector detail:
Test plan
pnpm --filter @constructive-io/ui build(package parity)/blocks/aiand sample component pages (Steps, Tool, Prompt Input, Reasoning)/blocks/ai/steps, review: default, all statuses, long content, short steps, single step, completed, collapsedAI/Overview→ Steps edge cases (if running package Storybook)