Repository navigation
react-ui: rework the genui component library and system prompt - #1385
Open
shubham-thesys wants to merge 32 commits into
Open
shubham-thesys wants to merge 32 commits into
shubham-thesys wants to merge 32 commits into
Conversation
Collapsed sidebar rail with a History menu and a draggable, persisted width; pill composer on a shared ~72ch reading column; centred welcome screen with starter tabs and a card starter variant; new ChatHeader slot with title, Rename and Delete; Rename in the thread menu; shared menu styles for Select, ModelSwitcher and dropdowns; mascot loader. react-headless: cache messages of threads opened this session so switching back to one renders immediately while a fresh copy loads. templates/openui-cloud: OpenUI brand mark, wordmark and favicon, welcome mascot, card starters, ChatHeader with the model switcher, and a boot shell that paints the saved sidebar state before the chat loads. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
It is a behaviour change to the chat store, not part of the UI refresh; it moves to its own branch. The changeset now covers react-ui only. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
- Shell background: a very faint grey wash (1% black) behind the sidebar; the thread card stays white. - Thread card outline lightened to 4% black. - Composer pills (welcome and in-thread): 0.5px outer hairline at 8% black instead of the 1px border, keeping the 56px resting height. - Collapsed-rail history button uses the Clock icon so it matches the New chat icon's visual size. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
- Shell: mix the card surface 40% toward the page background, so the sidebar shell sits darker than the thread card in dark mode (light is unchanged). - Menus and the rename dialog: lift the surface a step above the card in dark mode and draw the ring in the text color so the edge shows on dark; the dialog backdrop takes 30% of the theme overlay. - Composers: the same text-color hairline and a slight lift in dark mode. - Sidebar nav at 12px (New Chat, threads) with 14px icons on the same column; thread titles and history menu items sit in secondary, stepping up to primary when selected or hovered. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
- Regular is 440 in light mode and 450 in dark mode (light-on-dark text reads thinner); Medium is 560 in both. Headings and code keep their weights. - Every non-code text style, and letterSpacingNormal, tracks -1% (-0.01em). - The cloud template loads Inter as a variable font so the in-between weights render, and gives body text the theme's Regular weight and tracking. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Light keeps Regular at 440 and Medium at 560 in both modes. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
- AgentInterface.SidebarFooter: a slot pinned under the thread list. - AgentInterface.ThemeModeToggle: a round icon button (moon in light mode, sun in dark) that flips the theme; same button expanded and on the rail. - useThemeModePreference: follows the system theme until the toggle is first used, then saves the choice to localStorage and mirrors it onto <html> as data-openui-theme. - The default token sheet honors data-openui-theme, so an app can pin the mode before paint. The cloud template does that in its boot script and wires the toggle into the footer. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Regular is 400 in light and dark; Medium stays 560. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Regular renders at "wght" 440 in light mode and 420 in dark, Medium at 560, with font-weight 400/560 kept as the fallback. The typography mixin sets the axis after the font shorthand (which resets it); fixed 600/700 and code styles leave font-weight in charge. Components that set a plain font-weight now set the matching axis so they don't inherit Regular. The template body takes the Regular axis and grayscale smoothing, b and strong take Medium, and the devtools overlay opts out. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
* react-ui: redesign the tool call timeline Animated line-art glyphs per tool family (ToolGlyphs), plain-language tool labels that apps can override with ToolLabelsProvider, a header that ticks through the live step, one-row-open-at-a-time expansion, and a still Mascot. The thread's reply loader becomes the timeline's Working state so the hand-over doesn't move anything. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> * react-headless: publish a tool call before its result Server-side tools stream their call and result back to back. Flush the debounced assistant update before handling a result so it never pairs with a missing call and renders as a nameless tool. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> * react-headless: show a revisited thread from cache while it refreshes Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> * react-ui: raise secondary text to 60% opacity Keeps secondary text at 4.5:1 or better on page and card surfaces. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> * react-ui: polish the thread's send and scroll A sent message rises from the composer into place, messages stay dimly visible under the floating header instead of vanishing, and wrapped user bubbles get roomier padding. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> * react-ui: fix import order flagged by lint Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> * Revert "react-headless: show a revisited thread from cache while it refreshes" This reverts commit 890e0c2. --------- Co-authored-by: Shubham <shubham@Shubhams-MacBook-Pro-2.local> Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Co-authored-by: Abhin Rustagi <abhin@thesys.dev>
Resolve template conflicts with main's LangGraph base starter (#1322): keep main's LangGraph route and adapter wiring in cloud-chat.tsx with this PR's AgentInterface UI on top, and drop the removed langgraph overlay.
The template changes need react-ui APIs that aren't released yet (WelcomeMascot, useThemeModePreference, ThreadHeader slots), so they'd fail cli-e2e against the pinned packages. They move to a follow-up PR that lands with the release.
New layout, text, identity and data components (Section, Grid, Shell, Bleed, Heading, Metric, Avatar, AvatarStack, Emoji, Shape, Link, LeadingText, EntityTitle, ImageTitle, Checklist, Timeline, InsightCard, ValueCard, ImageCard, ValueLayout, FormRow, Sparkline); TextContent -> Text and MarkDownRenderer -> Markdown; retired card blocks moved to an archived list; restyled existing components; updated prompt guidance and the openui-cloud generated spec. lang-core normalizes triple-quoted strings when merging. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Coerces string, number, {from,to} and [from,to] values to Dates so a
model-supplied value no longer crashes with "from.toDateString is not a
function".
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The selected tab draws no outline; keyboard focus shows a neutral 2px ring instead of the blue accent. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
A shared DisclosureSection drives both sections. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
# Conflicts: # .changeset/agent-interface-redesign.md # packages/react-ui/src/components/AgentInterface/Container.tsx # packages/react-ui/src/components/AgentInterface/Sidebar.tsx # packages/react-ui/src/components/AgentInterface/SidebarResizeEdge.tsx # packages/react-ui/src/components/AgentInterface/_shared/store/store.tsx # packages/react-ui/src/components/Select/select.scss # packages/react-ui/src/components/ThemeProvider/defaultTheme.ts # packages/react-ui/src/components/ThemeProvider/types.ts # packages/react-ui/src/components/ThemeProvider/useThemeModePreference.ts # packages/react-ui/src/components/ToolCall/TimelineToolCard.tsx # packages/react-ui/src/components/ToolCall/ToolCallPrimitives.tsx # packages/react-ui/src/components/ToolCall/ToolCallTimeline.tsx # packages/react-ui/src/components/ToolCall/index.ts # packages/react-ui/src/components/ToolCall/toolLabels.tsx # packages/react-ui/src/cssUtils.scss # packages/react-ui/src/genui-lib/prompt-options/index.ts # packages/react-ui/src/openui-defaults.scss # packages/react-ui/src/scripts/generate-css-utils.ts
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
ListItem dropped its icon and image props for a leading slot and a number | plain variant. Also restores openui-defaults.scss to the generator's output. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
TextContent and CardHeader left the chat library. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Moved to #1399 so this PR stays on the component library.
This branch was successfully deployed
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
2 participants
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.
Requested by Shubham
What
Before: the generative UI library leaned on a set of overlapping card blocks (ContextCardBlock, SnippetCardBlock, OverviewCardBlock, VisualCardBlock),
TextContentandMarkDownRendererfor text, CardHeader/InlineHeader for titles, and Stack-with-wrap for every grid, so responses came out flat and inconsistent.After: responses are built from Sections, with real layout primitives (Grid, Shell, Bleed), a text system (Heading, Text, Markdown with highlights and favicon links, LeadingText, Link), identity pieces (Avatar, AvatarStack, EntityTitle, ImageTitle, Emoji, Shape), data pieces (Metric, Sparkline, Checklist, Timeline, InsightCard, ValueCard, ImageCard, ValueLayout) and FormRow. Existing components are restyled to match, and the system prompt teaches the new composition rules.
Stacked on #1327 (the #1332 work is already merged into that branch).
Changes
TextContent→Text,MarkDownRenderer→Markdown,IconText→IconTitle(archived); EditableTable takesEditableColcolumns and positional rows.openuiArchivedComponents, hidden from the model): CardHeader, InlineHeader, Label, InlineText, BoldText, TextCallout, MetricIndicator, ImageBlock, IconTitle, ImageText, ImageTextLarge, OverviewCardBlock, VisualCardBlock.wghtaxis token (--openui-font-variation-bold, 640) for headings.openuiLibrary/openuiChatLibraryand prompt options; regeneratedtemplates/openui-cloud/src/generated/spec.json.Test Plan
tsc --noEmitpasses for react-ui; eslint has no errors; prettier clean on touched files. Components were reviewed in the local openui-cloud gallery and chat.Checklist
🤖 Generated with Claude Code