Two requested changes in one pass:
1. Pin CopilotKit package versions
- All @copilotkit/* in package.json: "next" → "1.57.1"
(a2ui-renderer, react-core, runtime, shared, voice)
- ag-ui-adk in requirements.txt: unpinned → "==0.6.1"
Verified in the running container: pip shows ag_ui_adk 0.6.1,
package.json shows the five CPK packages at 1.57.1.
2. Retire interrupt demos (Strategy B was the only available adaptation
and the user asked for them to show as X in the dashboard):
- Delete src/app/demos/gen-ui-interrupt/ and interrupt-headless/
- Delete src/agents/interrupt_agent.py (no other consumers)
- Drop the registry.py + route.ts entries
- Move both feature ids from features: into not_supported_features:
so the dashboard renders them as an explicit grey X (intentional
opt-out) rather than red ? (unshipped). Drop the corresponding
demos: entries.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
ADK's globals.css had `html, body { width: 100%; overflow: hidden }` as a
combined rule, which gave <body> a fixed full-viewport width. The CopilotKit
v2 <CopilotSidebar /> docks itself by setting `margin-inline-end` on <body>,
which only shrinks the layout when body's width is free to recompute — a
fixed `width: 100%` defeats the mechanism, so the sidebar ends up overlapping
the page content instead of pushing it.
LP's globals.css splits the rule and intentionally omits `width: 100%` on
<body> (the comment in their CSS explains the exact reason). Port the same
split. Also adds the LP `body[data-scroll-locked]` neutralizer to prevent
Radix overlays from injecting a phantom `padding-right` that would shrink
the page on every dropdown open.
Verified in browser: /demos/prebuilt-sidebar now pushes the "Sidebar demo"
content into the left ~70% of the viewport while the chat takes the right
~30%, matching showcase.copilotkit.ai/integrations/langgraph-python/prebuilt-sidebar.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The shared-state-read demo (and others) port from LP imports these
shadcn primitives, but the orchestrator pass missed copying them from
LP's src/components/ui/. Webpack build failed with "Can't resolve
@/components/ui/{input,select,spinner}". Copied verbatim from LP. deps
(lucide-react, radix-ui) already in package.json.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
## Summary
PR #4691 introduced `import { createPortal } from "react-dom"` in
`src/components/search-trigger.tsx` but did not add `@types/react-dom`
to `showcase/shell-docs/package.json`'s devDependencies. The Railway
production build fails:
```
./src/components/search-trigger.tsx:4:30
Type error: Could not find a declaration file for module 'react-dom'.
'/app/shell-docs/node_modules/react-dom/index.js' implicitly has an 'any' type.
```
Local dev was unaffected because the type was being satisfied via
hoisting from a root `node_modules`. The Docker builder installs each
package's deps in isolation, so the type resolution failed.
## Fix
Add `@types/react-dom: ^19.0.0` to shell-docs devDependencies (matches
the existing `@types/react: ^19.0.0` constraint and resolves to the same
major version as the runtime `react-dom: ^19.0.0`).
## Test plan
- [ ] Railway production build succeeds
- [ ] `npx tsc --noEmit` from `showcase/shell-docs/` returns no
`react-dom` errors
- [ ] No regression in local dev
Orchestrator pass after 37 parallel slot ports of google-adk demos to
match langgraph-python (north-star). Slot commits ported each demo's
frontend verbatim; this commit reconciles the cross-cutting wiring that
slot agents were forbidden from touching:
- registry.py: rename agent keys to match LP frontend agent= props
(10+ underscore→hyphen renames for demos using the main copilotkit
route; demos with dedicated routes keep their underscored backend
keys since the dedicated route handles frontend→backend translation).
- route.ts: agentNames array updated to match registry.
- manifest.yaml: features list now matches the demos that actually
exist; renamed agentic-chat-reasoning→reasoning-custom,
reasoning-default-render→reasoning-default,
byoc-hashbrown→declarative-hashbrown,
byoc-json-render→declarative-json-render; added shared-state-read
(was a working demo dir but not declared); moved shared-state-streaming
out of not_supported_features (it works on Gemini Studio via chunk-
level fallback); retired the standalone hitl demo and the duplicate
hitl-in-chat-booking entry.
- src/app/demos/hitl/ and src/app/demos/shared-state-write/: deleted
(orphaned dirs not in LP's surface).
- src/app/page.tsx: integration dev landing — drop deleted demos.
- src/app/demos/prebuilt-sidebar/page.tsx: revert slot 01's
hyphen→underscore swap; LP's verbatim hyphenated agent= is the
source of truth (registry was renamed to match).
- shared-state-read agent: registry entry swapped from
shared_state_read_agent (had a set_recipe tool, turning it into
read+write) to _simple_chat (matches LP's neutral default agent —
read-only contract).
Known follow-ups (deferred — tracked separately):
- Tool-rendering family backend: ADK currently exposes
get_weather + search_flights(flights list) + query_data; LP
exposes get_weather + search_flights(origin, destination) +
get_stock_price + roll_d20. The 4 tool-rendering demos render
correctly for weather but the LP suggestion pills referencing
stocks and d20 rolls will not produce backend tool calls.
- Subagents agent: emits running/completed/failed; LP frontend
expects completed-only. Mid-flight rows render as raw badge text.
- Agent-config agent: reads state["config"] but LP frontend now
publishes via useAgentContext; agent will receive nothing.
- Beautiful-chat agent: missing manage_todos + generate_a2ui tools
that the LP frontend exercises.
- Open-gen-ui-advanced agent prompt: tells Gemini to call
window.sandbox.* but the LP frontend wires Websandbox.connection.
remote.* — generated UIs will reference a nonexistent API.
- gen-ui-interrupt and interrupt-headless: confirmed BLOCKED.
Gemini/ADK has no interrupt() primitive; the existing ADK Strategy
B (useFrontendTool with async Promise) is the only available
adaptation and cannot match LP's useInterrupt 1:1.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
PR #4691 introduced createPortal from react-dom in search-trigger.tsx
but the shell-docs package was missing @types/react-dom, breaking the
Railway production build with:
Type error: Could not find a declaration file for module 'react-dom'
Hoisting masks this in local dev, but the Docker builder installs
each package's deps in isolation.
Renames the ADK byoc-hashbrown demo to declarative-hashbrown to match the
LP naming, and ports the LP declarative-hashbrown frontend (page + chat +
hashbrown renderer + charts + suggestions + types + metric card) verbatim.
Also renames the dedicated API route from copilotkit-byoc-hashbrown to
copilotkit-declarative-hashbrown, keeping the existing HttpAgent + AGENT_URL
pattern (URL now points at /declarative-hashbrown on the Python backend).
The runtime-side agent ID remains "declarative-hashbrown-demo" (matching
LP); the backend registry / agentNames rename (byoc_hashbrown -> declarative-
hashbrown), the manifest slug rename, and main route.ts agentNames update
are out of scope per the task and are reported separately.
Copies the hitl-in-app demo verbatim from langgraph-python (north-star):
page.tsx, approval-dialog.tsx, suggestions.ts, tickets-panel.tsx. Updates
the ADK agent instruction to match the LP support-operations prompt and
the {approved, reason} tool-return shape.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Copy page.tsx and time-picker-card.tsx verbatim from the langgraph-python
north-star demo. Delete README.md (not present upstream). Frontend now uses
agent="hitl-in-chat" / agentId="hitl-in-chat" exactly as LP — registry and
route.ts currently key on "hitl_in_chat", which will need a follow-up
rename to wire end-to-end.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replace the inline-styled brand-palette version with a 1:1 verbatim copy of
the langgraph-python north-star demo: ShadCN-flavoured Card/Badge/Button
primitives under _components/, neutral zinc chart palette, and the
chat.tsx + suggestions.ts split out of page.tsx.
The ADK agent already emits the same a2ui_operations container shape
(via build_a2ui_operations_from_tool_call in agents/main.py) so no
backend changes are needed; the frontend swap is sufficient.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Copy LP gen-ui-agent demo verbatim: page.tsx now uses InlineAgentStateCard
in messageView.children (subscribing to live state via useAgent v2 +
UseAgentUpdate.OnStateChanged), plus the supporting
InlineAgentStateCard.tsx, message-list-with-state.tsx, suggestions.ts, and
README.md.
Update the ADK gen_ui_agent to emit the same Step shape the LP frontend
reads — {id, title, status} with the three-state lifecycle pending ->
in_progress -> completed, driven by a six-call sequence so the card
animates through every step. Without this, the card would render empty
titles and never show the in_progress marker.
Delete the orphan agent.py stub from the demo dir — the real backend
agent lives in src/agents/gen_ui_agent.py and is wired through the
shared registry.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Verbatim copy of the langgraph-python tool-rendering demo frontend to
google-adk: page.tsx + weather-card + flight-list-card + stock-card +
d20-card + custom-catchall-renderer + suggestions + README. Also adds
the _shared/parse-json-result helper required by page.tsx. Removes the
stale agent.py stub and render-flight-tool.snippet.tsx that don't exist
in the LP north-star.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Mirror the north-star (langgraph-python) mcp-apps demo verbatim: split the
single-file page.tsx into page.tsx + chat.tsx + suggestions.ts, and switch
the agent identifier from "mcp_apps" to "mcp-apps" to match LP exactly.
Update copilotkit-mcp-apps/route.ts to register the HttpAgent under the
"mcp-apps" key so the LP-verbatim frontend resolves. Delete the demo-local
README.md (no LP equivalent).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Copy LP's tool-rendering-reasoning-chain frontend verbatim: page.tsx with
useRenderTool registrations for get_weather + search_flights and a
useDefaultRenderTool catchall, plus ReasoningBlock, WeatherCard,
FlightListCard, and CustomCatchallRenderer components. Keeps the LP
agent/agentId values ("tool-rendering-reasoning-chain") as required by
the parity north-star.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bring shared-state-streaming demo frontend to 1:1 parity with the
langgraph-python north-star: split page.tsx into demo-layout.tsx +
suggestions.ts modules, swap CopilotChat-in-aside for
CopilotSidebar+DemoLayout, and adopt LP's DocumentView styling +
testids (document-view, document-live-badge, document-char-count,
document-content).
The ADK agent (shared_state_streaming_agent.py) is already wired with
streaming_function_call_arguments=True on the ADKAgent middleware and
PredictStateMapping(stream_tool_call=True), so per-token (or chunk-level
fallback on Gemini Studio) state-delta streaming into state["document"]
works end-to-end. The 2026-05-07 not_supported_features bucket was
conservative — the wiring is complete and the LIVE badge / growing
document UX functions even on the chunk-level fallback path.
README adjusted from LangGraph's StateStreamingMiddleware to ADK's
PredictStateMapping + streaming_function_call_arguments wording.
Manifest change needed (not in this commit): remove
shared-state-streaming from not_supported_features and add to features.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Copy the readonly-state-agent-context demo frontend verbatim from
langgraph-python (the north-star) into google-adk. The ADK demo
previously had a different layout (sidebar + CopilotChat with 3 simple
fields); replace it with the LP layout (identity card + activity card +
published-context JSON viewer + CopilotPopup, all on a neutral-50
background with the indigo accent system).
Adds local _components/ shadcn primitives (Badge, Card, Checkbox, Input,
Label, Select), demo-layout.tsx, and suggestions.ts. The page.tsx is
identical to LP — agent="readonly-state-agent-context" and
agentId="readonly-state-agent-context" (dash form) are kept verbatim per
the parity rules; the orchestrator will rename the registry key so the
backend matches.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Verbatim port of langgraph-python's agent-config demo frontend:
page.tsx, config-card.tsx, config-context-relay.tsx, config-types.ts,
demo-layout.tsx, use-agent-config.ts. Keeps agent="agent-config-demo"
and runtimeUrl="/api/copilotkit-agent-config" as in LP.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Copy the auth demo verbatim from langgraph-python (the parity north-star).
The demo now uses an unauthenticated-first UX with a dedicated SignInCard
landing page; <CopilotKit> mounts only after the user signs in at least
once, sidestepping the transport 401 that would crash <CopilotChat /> on
its initial /info handshake. Once mounted, it persists across the
sign-out -> sign-in cycle so the post-sign-out state actually demonstrates
the runtime rejecting unauthenticated requests in the chat surface.
Workspace plumbing required to make the verbatim port runnable:
- Add shadcn primitives (button, card) and `cn` util at
src/components/ui/* + src/lib/utils.ts.
- Add class-variance-authority, clsx, radix-ui, tailwind-merge to
package.json.
- Extend globals.css with Tailwind v4 @theme tokens that map onto the
shadcn CSS variables (background/foreground/card/muted/border/etc.) so
utilities like `bg-muted` and `text-muted-foreground` actually generate
styles.
The ADK auth API route already had the onRequest bearer-token gate
mirroring LP's pattern; it points at the `_simple_chat`-backed `/auth`
agent path, which is correct per the auth-at-route-level model. No
backend (registry / agent) changes required.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Verbatim copy of the LP beautiful-chat frontend — page.tsx, home-page.tsx,
showcase.json, declarative-generative-ui/, components/ (example-layout,
example-canvas, generative-ui, ui, tool-rendering), hooks/, lib/. The demo
now uses ThemeProvider + CopilotKit with a2ui catalog + openGenerativeUI,
ExampleLayout/Canvas with todos, generative UI chart components, and the
full suggestion-pill set.
Add the dedicated ADK runtime route at /api/copilotkit-beautiful-chat
modelled after the LP route shape but adapted for ADK (HttpAgent +
AGENT_URL pattern, mirroring declarative-gen-ui and mcp-apps routes).
Combined runtime: openGenerativeUI + a2ui.injectA2UITool:false + mcpApps
to support all three flagship surfaces simultaneously, matching LP.
Add missing npm deps to package.json: @radix-ui/react-checkbox,
@radix-ui/react-separator, class-variance-authority, clsx, lucide-react,
tailwind-merge — required by the verbatim-copied shadcn primitives.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Align google-adk's /demos/voice with the langgraph-python north-star:
- page.tsx now mounts <CopilotKit runtimeUrl="/api/copilotkit-voice"
agent="voice-demo" useSingleEndpoint={false} enableInspector={false}>
around a dedicated <VoiceChat /> component (split out of page.tsx).
- voice-chat.tsx (new) hosts the textarea-injection handler and renders
<CopilotChat agentId="voice-demo" /> alongside the sample-audio button.
- sample-audio-button.tsx is the single-button "Try a sample audio" variant
with the mic emoji and tooltip-style preview — the surrounding "Sample:"
wrapper from the old ADK version is gone.
- Drops voice-frontend.snippet.tsx and voice-runtime.snippet.ts (not in LP).
Agent untouched: src/agents/shared_chat._simple_chat already mirrors LP's
main.py simple chat shell. The existing route at
src/app/api/copilotkit-voice/[[...slug]]/route.ts already maps
"voice-demo" → HttpAgent(AGENT_URL + "/voice") which lines up with the
registry key "voice".
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Copy the full headless-complete demo verbatim from langgraph-python (the
parity north-star). The demo now exposes the full headless surface
CopilotKit provides: useRenderTool / useDefaultRenderTool, useComponent,
useConfigureSuggestions, useAttachments, plus useRenderToolCall and
useRenderActivityMessage rendered inside a hand-rolled chat shell built on
useAgent + useCopilotKit.
Workspace plumbing required to make the verbatim port runnable:
- Add shadcn primitives (avatar, badge, button, card, scroll-area,
separator, textarea) and `cn` util at src/components/ui/* + src/lib/utils.ts.
- Add lucide-react, radix-ui, react-markdown, remark-gfm, clsx,
tailwind-merge, class-variance-authority to package.json.
- Extend globals.css with Tailwind v4 @theme tokens that map onto the
shadcn CSS variables (background/foreground/card/muted/border/etc.) so
utilities like `bg-background` actually generate styles.
- Register a `headless-complete` HttpAgent on the existing MCP Apps
runtime route so the LP frontend's `agent="headless-complete"` resolves
to the ADK backend path `/headless_complete` (mapped to _simple_chat in
registry.py).
The ADK `_simple_chat` agent is left unchanged — it already covers the
behaviour the demo exercises (frontend tools, MCP Apps tool calls).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Runs the same Depot Docker build as the post-merge pipeline but with
push: false, catching Dockerfile-specific failures (missing deps,
broken layers) before they land on main.
Reduce google-adk's agentic-chat to the minimum-viable CopilotChat surface
matching langgraph-python: vanilla <CopilotChat /> + three starter
suggestion pills. Strip useFrontendTool (change_background), useRenderTool
(get_weather — was silently failing, no backend tool registered), and
useAgentContext (Bob's name). These concepts already have dedicated demos
(frontend-tools, tool-rendering, readonly-state-agent-context).
Also: make GOOGLE_GEMINI_BASE_URL overridable via .env so the same
container can flip between aimock (deterministic D5 probes) and real
Gemini (manual verification) without editing the compose file.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
## Summary
- New `<DemoSource>` client component renders bundled demo source files
directly in the InlineDemo Code tab, replacing the deprecated
`feature-viewer.copilotkit.ai` iframe
- Bundler emits a new `highlightOrder?: number` field on each
`DemoFile`, so file tabs render in the manifest's `highlight:[]` order
(the author's intended teaching sequence) rather than the bundler's
page-first alphabetical sort
- Deletes the feature-viewer slug/demo-ID translation layer
(`FEATURE_VIEWER_SLUG_OVERRIDES`, `FEATURE_VIEWER_DEMOS`,
`getFeatureViewerSlug`, `getFeatureViewerDemoId`)
## Why
- `feature-viewer.copilotkit.ai` is being decoupled; only 6 of ~30 demos
shell-docs references were ever supported there, so the Code tab was
hidden or 404'd on the majority of (framework × demo) combinations
- `<DemoSource>` reads from the same `demo-content.json` bundle the
`<Snippet>` system already uses, so coverage expands to all bundled
demos with routes (~700 entries) by construction — no per-demo
translation map to maintain
- Removes one external dependency from the InlineDemo render path
## Implementation notes
- `<DemoSource>` is a single client component (~226 lines);
`highlight.js` runs in the browser. A server-pre-render split that moves
hljs off the client bundle is a possible follow-up if bundle size
becomes a concern.
- Defaults to `onlyHighlighted={true}` — shows just the manifest
`highlight:[]` files (typically 3–6 per demo). Pass
`onlyHighlighted={false}` to render every file in the demo folder.
- Falls back to all files if no files are flagged `highlighted`
(resilience against manifests without a `highlight:[]` array).
## Test plan
- [ ] Pages with `<InlineDemo>` for a previously-supported demo render
the Code tab via the new component (e.g.
`/langgraph-python/agentic-chat-ui`,
`/langgraph-python/human-in-the-loop`)
- [ ] Pages with `<InlineDemo>` for a previously-unsupported demo now
render the Code tab (e.g. `/langgraph-python/frontend-tools`,
`/langgraph-python/voice`, `/langgraph-python/agent-config`)
- [ ] Pages on integrations that had no feature-viewer entry now render
the Code tab (e.g. `/built-in-agent/*`, `/google-adk/*`, `/ms-agent-*`)
- [ ] File tabs render in manifest `highlight:[]` order (spot-check
`frontend-tools`: agent file should appear before page.tsx)
- [ ] Copy button copies the active file contents
- [ ] Visual style matches existing `<Snippet>` blocks on the same page
- [ ] `nx run shell-docs:build` passes
The InlineDemo Code tab previously embedded feature-viewer.copilotkit.ai
in an iframe. Feature-viewer only ships six canonical demos for a
limited set of frameworks, so every other (framework x demo) pair —
including the dozen-plus newer demos like frontend-tools, voice,
subagents, gen-ui-interrupt — rendered a 404 or had its Code tab
suppressed entirely.
Add a client-side <DemoSource> component that reads the same
demo-content.json bundle <Snippet> already consumes, scoped to one
(integration, demo) cell. By default it shows only files flagged in the
manifest's `highlight:` array, sorted by the new `highlightOrder` field
so tabs render in author-defined order. Falls back to all bundled files
when nothing is flagged. Rendering matches <Snippet>'s look (same hljs
classes, CopyButton, border / type scale) for visual continuity.
Wire <DemoSource> into the InlineDemo Code tab and remove the
feature-viewer URL construction. The base import of getDocsFolder is
dropped from mdx-registry.tsx since it was only used for the iframe
URL; getDocsFolder remains in registry.ts for the framework routing
layer that still depends on it.
Adds an optional `highlightOrder` field (0-based index into the
manifest's `highlight:` array) on each bundled DemoFile that is flagged
`highlighted: true`. Consumers like shell-docs's new <DemoSource>
component use this to render highlighted files in the manifest author's
preferred order rather than the bundler's alphabetical-with-page-first
fallback. Files not in `highlight:` carry no `highlightOrder` and keep
the existing sort behavior.
Additive field; no migration needed.
## Summary
Ten commits porting `docs.copilotkit.ai`'s visual baseline + page
architecture onto shell-docs ahead of the May 12 cutover.
This is a **visual-replica port**, not an IA change — the docs
information architecture stays as shipped (sidebar groupings, JTBD
section names, BIA-as-default behavior). What changes is the visual
layer: colors, typography, sidebar/navbar/TOC chrome, page layout
architecture, banner, content-column geometry, search modal, dark mode,
and docs page chrome polish.
## Commits
1. **Visual baseline** — color tokens (accent, glass-background, bg),
typography (Plus Jakarta Sans + system mono), callouts (white card +
colored left strip + lucide icons), tables (row-bottom borders),
code-block chrome (`rounded-xl` + `shadow-sm`), `.docs-content-wrapper`
rule (white panel + left-edge fade).
2. **Page layout architecture** — replicates canonical's fixed-height
body + internal scroll on `.docs-content-wrapper`. Banner + navbar +
sidebar are naturally at the top/left of body (no sticky positioning).
TOC moves inside the content wrapper. Route shells normalized to `h-full
w-full` with explicit scroll wrappers.
3. **Two-piece navbar** — slanted SVG separator between left brand panel
and right utility cluster, glass-panel chrome, three-zone search trigger
(icon + label + ⌘K), per-link underline cross-fade animation, brand
assets (kite mark + slanted borders + theme icons).
4. **Dismissable top promo banner** — `<Banners />` component with
localStorage TTL, lucide rocket icon, `id` namespacing.
5. **Right-rail TOC** — direct port of fumadocs-ui's clerk pattern:
persistent gray vertical guides at depth-specific offsets + diagonal SVG
connectors at H2↔H3 transitions + a violet thumb that paints only along
the line path via SVG mask. Active text turns violet, inactive at 60%
opacity.
6. **Sidebar pill + content alignment** — adds `pr-1` to the sidebar's
inner scroll container so the active-link pill stops 4px short of the
scrollbar (matches canonical). Replaces the content column's `px-8 py-6
xl:px-16 xl:py-12` + non-centered `max-w-[900px]` with canonical's exact
`px-4 py-6 md:px-6 md:pt-8 xl:px-8 xl:pt-14` outside, `max-w-[900px]
mx-auto` inside, so the column centers between sidebar and TOC and the
h1 lands at the same x as `docs.copilotkit.ai` at 1440.
7. **Search modal portal** — the modal renders inside SearchTrigger,
which lives in the navbar's right cluster. `backdrop-filter` creates a
containing block for fixed-position descendants, which was clamping the
modal's `fixed inset-0` overlay to the cluster (~505x70px) instead of
the viewport. Wraps SearchModalWrapper in `createPortal` mounted on
`document.body` so the overlay covers the page.
8. **Dark mode parity** — adds `.dark` token block to `globals.css`
mirroring canonical for every var the wave3 chrome consumes;
`@custom-variant dark (&:is(.dark *))` so `dark:` Tailwind utilities
react to the `.dark` class instead of `prefers-color-scheme`; inline
`beforeInteractive` script that reads `localStorage.theme` (falling back
to `prefers-color-scheme`) and applies the class before first paint with
`suppressHydrationWarning` on `<html>` so Next.js doesn't revert it;
themed thin scrollbar on `.docs-content-wrapper` and the sidebar's inner
scroll container; rounded hover surface on the navbar's
GitHub/Discord/theme icon buttons.
9. **TOC scrollspy at scroll bottom** — replaces IntersectionObserver
with a scroll listener on `.docs-content-wrapper` that walks the heading
list and forces the final heading active when the scroll container is at
`scrollMax`. The previous observer never fired for the last heading once
it had scrolled past the rootMargin band.
10. **Docs page chrome polish** — tightens the page header → body gap
from `mb-14` (responsive) to a flat `mb-8` matching canonical; section
header banner sized at 15px with same Plus Jakarta default-weight
uppercase + tracking as canonical's separator, sized up; `--border`
(instead of `--border-dim`) on the section divider rule so it survives
dark; active-link pill gets a `--bg-hover` surface + 1px white/10 ring
in dark for contrast; idle pages get `dark:hover:bg-white/5`; nested
section separators (depth > 0) demote to 11px `--text-faint` labels with
no divider rule (no more shouting at the same hierarchy as the parent
banner); root `/docs` overview moves onto the same SidebarNav +
`.docs-content-wrapper` + `max-w-[900px] mx-auto` shell the per-doc
routes use; rename the "Give Your App Agent Powers" main-meta section to
"Adding Agent Powers".
## Verification
- `npm run build` clean.
- 1440x900 Playwright at scroll 0 vs scrollMax: nav
`getBoundingClientRect()` delta = `{top: 0, left: 0, width: 0}` — zero
drift.
- 1440x900 Playwright vs `docs.copilotkit.ai`: aside, wrapper, and h1.x
coordinates match canonical exactly; active-link pill has the same gap
to the scroll gutter as canonical.
- Search modal opens as a full-viewport overlay (1440x900 backdrop,
centered card) instead of a clipped strip under the trigger.
- Dark mode round-trips light → click toggle → `html.dark` +
`localStorage.theme="dark"` → click again → light. Sidebar, navbar
(slanted-dark borders + theme moon icon), banner, content panel,
callouts, code, tables, TOC, scrollbar, and search modal all paint
correctly in dark; no light-flash on dark-preferring first loads.
- TOC last heading activates at scroll bottom on all docs pages.
## Out of scope
- IA changes (sidebar groupings, navbar destinations, content) — content
stays as shipped.
## Test plan
- [ ] Visual review at 1440x900 against `docs.copilotkit.ai`: sidebar
pinning, navbar pinning, TOC outline + sliding violet, content-panel
left-edge gradient, content column centering, sidebar section header
treatment
- [ ] Active-link pill in the docs sidebar has visible gap to the
scrollbar in both light and dark
- [ ] Cmd/Ctrl+K opens the search modal as a full-viewport overlay;
click backdrop or Escape closes
- [ ] Toggle theme button switches light↔dark, persists across reload,
no light-flash on first load
- [ ] Scroll a long page (e.g. `/built-in-agent/concepts/architecture`)
— confirm last TOC heading activates at the bottom
- [ ] Mobile (< 1280px) — TOC hides, sidebar collapses to mobile menu
Tyler Slaton