Group & Display Interleaved Content by AbhinRustagi · Pull Request #916 · thesysdev/openui

AbhinRustagi · 2026-07-31T12:21:04Z

Agent runs that think between tool calls now render as one unit instead of scattered trays and lost text.

Group consecutive assistant/tool messages into a turn — one "Behind the scenes" timeline per run instead of one per message
Show the model's thinking as muted text rows between the tool entries, in the order they actually arrived (live runs track arrival order; stored runs use message order)
Only the final response feeds the Lang renderer — thinking no longer flashes as a fake answer, and the tray stays on "Working…" until the real response starts
Timeline is height-capped and scrolls internally, smoothly following new rows while streaming (stops when you scroll up, respects reduced motion)
Form-state saves now round-trip the thinking sections instead of silently deleting them
New optional messageGroup prop on AssistantMessageComponent — existing custom components are unaffected

No backend, stream-layer, or storage changes.

- ModelSwitcher: use @openuidev/react-ui (drop local model-switcher/); pass provider logos as {light,dark} - Billing: replace local BillingCreditsDialog with dev-only OpenUICreditsModal from @openuidev/devtools - LLM: swap createCloudChatLLM for fetchLLM + buildBody (429 flows via observability); hold LLM in a ref - Cleanup: remove unused deps, cloud-chat-llm, chat-error, cloud-chat-constants, orphaned CSS/logos Depends on #893 (packages) being merged + published first. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MpABGCgS6C4HRdQSrwhPMR

Drops the local llmRef + selectedModelRef plumbing for useFetchLLM, which holds a stable instance and reads options fresh per send — buildBody closes over selectedModel directly. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MpABGCgS6C4HRdQSrwhPMR

…into abhin/template-cleanup

…-lang/tailwind deps - page.tsx: replace hand-rolled ChatLLM with fetchLLM (imported from @openuidev/react-ui), buildBody sends { messages } - drop Tailwind (trivial usage): minimal globals.css reset, inline layout style, delete postcss.config.mjs - package.json: remove @openuidev/react-headless, @openuidev/react-lang, tailwindcss, @tailwindcss/postcss; react-ui -> 0.13.3 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MpABGCgS6C4HRdQSrwhPMR

Title :empty-hide and actions flex are library defaults after the thread.scss change; the openui-cloud-thread-header hook class is unreferenced. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MpABGCgS6C4HRdQSrwhPMR

- route.ts: badRequest helper, NextResponse, model allowlist (reject unknown), propagate upstream errors with status — billing.ts deleted (store now surfaces server messages) - theme: useSystemThemeMode from react-ui; delete use-system-theme.tsx; unwrap ThemeProvider in layout - globals.css: trim to page shell + artifact compat (~18 lines); drop Tailwind + postcss.config.mjs + tailwind deps + vitest - frontend-token: NextResponse, propagate upstream status Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MpABGCgS6C4HRdQSrwhPMR

…evtools to self-hosted - cloud: ^0.14.0 / ^0.10.0 - self-hosted: react-ui ^0.14.0; OpenUIDevtools rendered dev-only in layout (devDependency) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MpABGCgS6C4HRdQSrwhPMR

- cloud: drop OPENUI_MODEL, point at src/lib/models.tsx + /api/chat validation, list useFetchLLM/ModelSwitcher/devtools, pnpm-only - self-hosted: add setup section (OPENAI_API_KEY), fix route path, pnpm-only Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MpABGCgS6C4HRdQSrwhPMR

…nAIAdapter Drops the NDJSON re-encode (toReadableStream); propagates browser aborts via req.signal; model overridable with OPENAI_MODEL. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MpABGCgS6C4HRdQSrwhPMR

Scaffolded output changes substantially (react-ui 0.14 / react-headless 0.10, fetchLLM/useFetchLLM wiring, devtools, removed billing/tailwind) — minor bump, matching the package versioning rationale. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MpABGCgS6C4HRdQSrwhPMR

…s, trim comments - import everything from @openuidev/react-ui (headless re-export); starters/prompt templates moved to src/lib/starters - drop the now-trivial handleModelChange wrapper; use the logoPath const - shorten route/model/component comments to the essentials (tool-loop's safety-rule docs kept) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MpABGCgS6C4HRdQSrwhPMR

…sed to provide it) react-ui sets fonts per component, not on body — text that merely inherits fell back to the browser serif once Tailwind's preflight was removed. Same latent gap exists in the reference commit. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MpABGCgS6C4HRdQSrwhPMR

…plate Replaces the globals.css font-family fallback — next/font self-hosts Inter with built-in fallbacks, matching react-ui's --openui-font-body token. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MpABGCgS6C4HRdQSrwhPMR

…e-cleanup

The MCP server is a fixed demo default now — the env overrides only existed to be documented in .env.example, so both go. Co-authored-by: Cursor <cursoragent@cursor.com>

It was only there to exercise the timeline locally; the example keeps to Cloud's built-in tools. Co-authored-by: Cursor <cursoragent@cursor.com>

Both toggles lift their label to primary on hover, so the rows read as expandable without a hover fill. Raw request/response containers take the same border and radius as the sources list — a row expands into one or the other, so they can't look like different kinds of container — and a subtle tint separates the payloads from the sources, which keeps the plain surface. Thinking prose moves to primary as the model's own voice, the running icon pulses 0.6 -> 0.2, and the tray holds 24rem before scrolling. Co-authored-by: Cursor <cursoragent@cursor.com>

Two ways the mask lied. scrollHeight and clientHeight are rounded while rows are not, so a list that fits could report a pixel of overflow and fade an edge it never scrolled past; overflow now has to clear 8px, and each edge needs 4px of actual scroll offset. The measurement also ran only when this component rendered, but whether a row is expanded is the child's state — so the list could grow past its cap and drop back under it with no render here, leaving the fade stuck on. A ResizeObserver on the list catches both transitions, since its box is content-sized right up to the cap. That also covers width changes, so the window resize listener goes. Co-authored-by: Cursor <cursoragent@cursor.com>

Styling ::-webkit-scrollbar opts out of overlay scrollbars, so the bar takes real width: the centered column jumped sideways the moment a message got tall enough to scroll, e.g. on expanding a tool row. Reserve the gutter up front. Co-authored-by: Cursor <cursoragent@cursor.com>

# Conflicts: # packages/react-ui/src/components/ToolCall/ToolCallTimeline.tsx

…o interleaved-content

vercel · 2026-08-04T12:56:35Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
openui-docs	Ready	Preview	Aug 4, 2026 3:49pm

AbhinRustagi · 2026-08-04T13:55:50Z

+
+  return (
+    <>
+      {group.map((message) => (


Remove this/ consolidate with if condition

AbhinRustagi · 2026-08-04T13:59:48Z

-        onStateUpdate={handleStateUpdate}
-        initialState={initialState}
-      />
+      {singleResponseStarted && (


Check for duplication

…ontent

AbhinRustagi and others added 30 commits July 28, 2026 18:54

Update package.json

61d12fc

Merge branch 'abhin/template-cleanup' of github.com:thesysdev/openui …

7519733

…into abhin/template-cleanup

fix: update docs and match latest changes

4e0a59e

fix: update readme

bf17646

fix: add favicon

62de451

fix: version match

ad9ec64

fix: format

1e03e61

fix: styles

309fca6

fix: remove credits modal

e2f1c20

Merge branch 'main' of github.com:thesysdev/openui into abhin/templat…

bfeeb2b

…e-cleanup

Merge branch 'main' of github.com:thesysdev/openui into abhin/templat…

40cd3fc

…e-cleanup

Merge branch 'main' of github.com:thesysdev/openui into abhin/templat…

1de32b5

…e-cleanup

Merge branch 'main' of github.com:thesysdev/openui into abhin/templat…

57be390

…e-cleanup

fix: update lockfiles

43430e4

Merge branch 'main' of github.com:thesysdev/openui into abhin/templat…

e21cdd3

…e-cleanup

update lock files

b47c976

Update self-hosting.mdx

e2e7d14

Update SKILL.md

ed94af7

pr3khar and others added 17 commits August 4, 2026 11:45

refactor: trim the tool-timeline comments, drop the MCP env indirection

7655447

The MCP server is a fixed demo default now — the env overrides only existed to be documented in .env.example, so both go. Co-authored-by: Cursor <cursoragent@cursor.com>

revert(openui-cloud): drop the demo MCP server from the chat route

e337aef

It was only there to exercise the timeline locally; the example keeps to Cloud's built-in tools. Co-authored-by: Cursor <cursoragent@cursor.com>

fix: refactor

fbc994e

fix: hoist interleaved turn tray + tray-open behaviour

79cc7ec

Merge branch 'pr921' into interleaved-content

d3b22b9

# Conflicts: # packages/react-ui/src/components/ToolCall/ToolCallTimeline.tsx

refactor: extract focus-ring mixin, tighten comments

c7fd825

fix: format

d12fe5f

refactor: make smaller fns

8eec470

Update thread.scss

d892d71

fix: comments

ca3e433

Merge branch 'interleaved-content' of github.com:thesysdev/openui int…

eac8007

…o interleaved-content

fix: openai responses adapter

3934156

fix: rename to web_search

2eba1be

fix: remove tool calls for deduplication

8b4a6da

fix: styles

1d95186

vercel Bot deployed to Preview August 4, 2026 13:00 View deployment

AbhinRustagi commented Aug 4, 2026

View reviewed changes

refactor: remove duplications

6611a73

vercel Bot deployed to Preview August 4, 2026 15:18 View deployment

fix: version bump

379e953

vercel Bot deployed to Preview August 4, 2026 15:43 View deployment

Merge branch 'main' of github.com:thesysdev/openui into interleaved-c…

da5eeea

…ontent

vercel Bot deployed to Preview August 4, 2026 15:49 View deployment

abhithesys approved these changes Aug 4, 2026

View reviewed changes

AbhinRustagi merged commit d88215f into main Aug 4, 2026
4 checks passed

AbhinRustagi deleted the interleaved-content branch August 4, 2026 15:53

Navigation Menu

Uh oh!

Group & Display Interleaved Content - #916

Group & Display Interleaved Content#916
AbhinRustagi merged 70 commits into
mainfrom
interleaved-content

AbhinRustagi commented Jul 31, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Aug 4, 2026 •

edited

Loading

Uh oh!

Uh oh!

AbhinRustagi Aug 4, 2026

Uh oh!

AbhinRustagi Aug 4, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

AbhinRustagi commented Jul 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel Bot commented Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

AbhinRustagi Aug 4, 2026

Choose a reason for hiding this comment

Uh oh!

AbhinRustagi Aug 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

AbhinRustagi commented Jul 31, 2026 •

edited

Loading

vercel Bot commented Aug 4, 2026 •

edited

Loading