Skip to content

Fix client boundaries for installed interactive components - #30

Open
Maya-Kid wants to merge 5 commits into
deeplethe:devfrom
Maya-Kid:codex/fix-registry-client-boundaries
Open

Maya-Kid wants to merge 5 commits into
deeplethe:devfrom
Maya-Kid:codex/fix-registry-client-boundaries

Conversation

@Maya-Kid

@Maya-Kid Maya-Kid commented Oct 15, 2026 •

Copy link
Copy Markdown
Contributor

Interactive registry entries installed with shadcn add fail when rendered from a Next App Router server page because they lack a client boundary. Copied documentation examples also lose their existing "use client" directive.

Add "use client" to the seven interactive entries and preserve it in copied example source. Keep the existing single-file component structure and registry format. The net change against current dev is 9 files, 17 additions and 4 deletions; it includes a short note explaining that function-valued glyph figures belong inside client components.

The branch includes current dev (9f36ea24), including #48's animation scheduling changes. Each of the seven component/block implementations matches that upstream version except for the added directive. TurnStatus accessibility changes are being reviewed separately.

formatDuration and compactTokens remain exports of their component modules, which are now client modules. Invoke those helpers from client code. This intentionally accepts that direct server invocation of these undocumented exports is no longer supported; no formatter compatibility split or extra installation manifest is included.

Validation:

  • npm run docs, npm run typecheck and npm run build pass; generated registry.json is unchanged.
  • All 389 examples mount with 0 failures and no page errors in both themes. Composer send/mode selection, AskCard answers, step/status disclosure, ContextRing popovers and activity switching work in both themes.
  • A real Calendar example Copy-button check preserves the directive and matches the displayed source in both themes.
  • A fresh Next 16.4.1 / React 19.2.6 consumer performs real shadcn add from this branch's registry. Its server routes render the agent components and workspace; its client probe exercises Composer, AskCard, useElapsed, both formatter exports, and stock/custom glyph figures. Compilation, strict TypeScript, prerendering and production browser interactions pass without page errors. patchStats remains callable on the server.
  • All seven affected registry items contain one source file matching the worktree; no companion files are installed. No dependency or lockfile changes. Commits are signed off.

… server pages.

Signed-off-by: Maya Kid <29959320+Maya-Kid@users.noreply.github.com>
Signed-off-by: Maya Kid <29959320+Maya-Kid@users.noreply.github.com>
Signed-off-by: Maya Kid <29959320+Maya-Kid@users.noreply.github.com>
@WaylandYang

Copy link
Copy Markdown
Collaborator

Thanks for this. You've clearly tested it thoroughly (the real shadcn add consumer build especially), and the core problem is real: interactive components installed into a Next App Router project need a client boundary.

We're holding off on merging this version for two reasons:

  1. The -client / -helpers split costs more than it buys right now. Each affected component becomes three files that must be installed together, and the registry gains a separate file manifest. The benefit, calling formatDuration / compactTokens from a server component, has no caller in this repo, so we'd rather not carry the extra structure for a hypothetical use.
  2. It bundles an unrelated change. The TurnStatus accessibility rework (the separate role="status" region, the new button naming) is worth reviewing on its own merits, but it's hidden inside a 500-line diff that's mostly moved code.

Suggested way forward:

  • A PR that only adds "use client" to the interactive entries (status-glyph, turn-status, context-ring, composer, ask-card, tool-steps, agent-workspace) and keeps example directives in the copied documentation source. No file splits, no manifest.
  • A separate PR for the TurnStatus accessibility change.

If server-side use of the formatters turns out to matter later, we can revisit it with a concrete case. Happy to review both!

…ent-boundaries

Signed-off-by: Maya Kid <29959320+Maya-Kid@users.noreply.github.com>
Signed-off-by: Maya Kid <29959320+Maya-Kid@users.noreply.github.com>
@Maya-Kid Maya-Kid changed the title Mark interactive registry components as client components Fix client boundaries for installed interactive components Oct 16, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants