create-agents24-app 0.1.0 → 0.1.2

package/dist/scaffold/src/components/ui/tooltip.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+function TooltipProvider({ children }: { children: React.ReactNode }) {
+  return children
+}
+
+function Tooltip({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="tooltip"
+      className={cn("group/tooltip relative inline-flex", className)}
+      {...props}
+    />
+  )
+}
+
+function TooltipTrigger({
+  asChild: _asChild,
+  ...props
+}: React.ComponentProps<typeof Slot.Root> & { asChild?: boolean }) {
+  return <Slot.Root data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  align: _align,
+  side = "top",
+  sideOffset: _sideOffset,
+  ...props
+}: React.ComponentProps<"span"> & {
+  side?: "top" | "right" | "bottom" | "left"
+  sideOffset?: number
+  align?: "start" | "center" | "end"
+}) {
+  return (
+    <span
+      role="tooltip"
+      data-side={side}
+      data-slot="tooltip-content"
+      className={cn(
+        "pointer-events-none absolute z-50 hidden w-max max-w-xs items-center gap-1.5 rounded-xl bg-foreground px-3 py-1.5 text-xs text-background group-hover/tooltip:inline-flex group-focus-within/tooltip:inline-flex",
+        "data-[side=top]:bottom-full data-[side=top]:left-1/2 data-[side=top]:mb-2 data-[side=top]:-translate-x-1/2",
+        "data-[side=bottom]:top-full data-[side=bottom]:left-1/2 data-[side=bottom]:mt-2 data-[side=bottom]:-translate-x-1/2",
+        "data-[side=left]:end-full data-[side=left]:top-1/2 data-[side=left]:me-2 data-[side=left]:-translate-y-1/2",
+        "data-[side=right]:start-full data-[side=right]:top-1/2 data-[side=right]:ms-2 data-[side=right]:-translate-y-1/2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

package/dist/scaffold/src/hooks/use-mobile.ts

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    if (typeof window.matchMedia !== "function") {
+      onChange()
+      window.addEventListener("resize", onChange)
+      return () => window.removeEventListener("resize", onChange)
+    }
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    mql.addEventListener("change", onChange)
+    onChange()
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/dist/scaffold/src/identity.ts

@@ -0,0 +1,17 @@
+export type Agents24ChatIdentityState =
+  | "loading"
+  | "guest"
+  | "authenticated"
+  | "signed_out"
+  | "error"
+
+export type Agents24ChatIdentity = {
+  state: Agents24ChatIdentityState
+  displayName?: string
+  secondaryText?: string
+  avatarUrl?: string
+  onSignIn?: () => void | Promise<void>
+  onSignOut?: () => void | Promise<void>
+}
+
+export const GUEST_CHAT_IDENTITY: Agents24ChatIdentity = { state: "guest" }

package/dist/scaffold/src/index.css

@@ -0,0 +1,221 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@fontsource-variable/jetbrains-mono";
+@import "@fontsource-variable/merriweather";
+@import "@fontsource-variable/inter";
+
+@source "./**/*.{ts,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-heading: var(--a24-font-heading);
+  --font-sans: var(--a24-font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --a24-composer-single-row-radius: 9999px;
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --font-serif: var(--a24-font-heading);
+  --font-mono: var(--a24-font-mono);
+}
+
+[data-agents24-theme-root] {
+  color-scheme: light;
+  --a24-font-heading: 'Inter Variable', sans-serif;
+  --a24-font-sans: 'Inter Variable', sans-serif;
+  --a24-font-mono: 'JetBrains Mono Variable', monospace;
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.147 0.004 49.25);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.147 0.004 49.25);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.147 0.004 49.25);
+  --primary: oklch(0.52 0.105 223.128);
+  --primary-foreground: oklch(0.984 0.019 200.873);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.97 0.001 106.424);
+  --muted-foreground: oklch(0.553 0.013 58.071);
+  --accent: oklch(0.97 0.001 106.424);
+  --accent-foreground: oklch(0.216 0.006 56.043);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.923 0.003 48.717);
+  --input: oklch(0.923 0.003 48.717);
+  --ring: oklch(0.709 0.01 56.259);
+  --radius: 0.875rem;
+  --sidebar: oklch(0.985 0.001 106.423);
+  --sidebar-foreground: oklch(0.147 0.004 49.25);
+  --sidebar-primary: oklch(0.609 0.126 221.723);
+  --sidebar-primary-foreground: oklch(0.984 0.019 200.873);
+  --sidebar-accent: oklch(0.97 0.001 106.424);
+  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
+  --sidebar-border: oklch(0.923 0.003 48.717);
+  --sidebar-ring: oklch(0.709 0.01 56.259);
+  --chart-1: oklch(0.845 0.143 164.978);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.596 0.145 163.225);
+  --chart-4: oklch(0.508 0.118 165.612);
+  --chart-5: oklch(0.432 0.095 166.913);
+}
+
+[data-agents24-theme-root].dark {
+  color-scheme: dark;
+  --background: oklch(0.147 0.004 49.25);
+  --foreground: oklch(0.985 0.001 106.423);
+  --card: oklch(0.216 0.006 56.043);
+  --card-foreground: oklch(0.985 0.001 106.423);
+  --popover: oklch(0.216 0.006 56.043);
+  --popover-foreground: oklch(0.985 0.001 106.423);
+  --primary: oklch(0.45 0.085 224.283);
+  --primary-foreground: oklch(0.984 0.019 200.873);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.268 0.007 34.298);
+  --muted-foreground: oklch(0.709 0.01 56.259);
+  --accent: oklch(0.268 0.007 34.298);
+  --accent-foreground: oklch(0.985 0.001 106.423);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.553 0.013 58.071);
+  --sidebar: oklch(0.216 0.006 56.043);
+  --sidebar-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-primary: oklch(0.715 0.143 215.221);
+  --sidebar-primary-foreground: oklch(0.302 0.056 229.695);
+  --sidebar-accent: oklch(0.268 0.007 34.298);
+  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.553 0.013 58.071);
+  --chart-1: oklch(0.845 0.143 164.978);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.596 0.145 163.225);
+  --chart-4: oklch(0.508 0.118 165.612);
+  --chart-5: oklch(0.432 0.095 166.913);
+}
+
+[data-agents24-theme-root][data-agents24-theme="sharp"] {
+  --a24-composer-single-row-radius: 0;
+  --a24-font-heading: 'Merriweather Variable', serif;
+  --a24-font-sans: 'JetBrains Mono Variable', monospace;
+  --a24-font-mono: 'JetBrains Mono Variable', monospace;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --radius: 0;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.865 0.127 207.078);
+  --chart-2: oklch(0.715 0.143 215.221);
+  --chart-3: oklch(0.609 0.126 221.723);
+  --chart-4: oklch(0.52 0.105 223.128);
+  --chart-5: oklch(0.45 0.085 224.283);
+}
+
+[data-agents24-theme-root][data-agents24-theme="sharp"].dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.865 0.127 207.078);
+  --chart-2: oklch(0.715 0.143 215.221);
+  --chart-3: oklch(0.609 0.126 221.723);
+  --chart-4: oklch(0.52 0.105 223.128);
+  --chart-5: oklch(0.45 0.085 224.283);
+}
+
+@layer base {
+  [data-agents24-theme-root], [data-agents24-theme-root] * {
+    @apply border-border outline-ring/50;
+    box-sizing: border-box;
+  }
+  [data-agents24-theme-root] {
+    @apply size-full overflow-hidden bg-background font-sans text-foreground antialiased;
+  }
+  [data-agents24-theme-root] button,
+  [data-agents24-theme-root] textarea { font: inherit; }
+}

package/dist/scaffold/src/index.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+
+import { App, type Agents24ChatAppProps } from "./app"
+import {
+  ThemeProvider,
+  type Agents24ChatAppearanceController,
+  type Agents24ChatTheme,
+} from "./components/theme-provider"
+import { TooltipProvider } from "./components/ui/tooltip"
+
+export type Agents24ChatScaffoldProps = Agents24ChatAppProps & {
+  appearanceController?: Agents24ChatAppearanceController
+  theme?: Agents24ChatTheme
+}
+
+export function Agents24ChatScaffold({ appearanceController, theme, ...props }: Agents24ChatScaffoldProps) {
+  return (
+    <ThemeProvider controller={appearanceController} theme={theme}>
+      <TooltipProvider>
+        <App {...props} />
+      </TooltipProvider>
+    </ThemeProvider>
+  )
+}
+
+export { App as Agents24ChatScaffoldApp }
+export { ThemeProvider as Agents24ChatThemeProvider }
+export type {
+  Agents24ChatAppearance,
+  Agents24ChatAppearanceController,
+  Agents24ChatTheme,
+} from "./components/theme-provider"
+export type { Agents24ChatIdentity, Agents24ChatIdentityState } from "./identity"
+export type {
+  ChatHitlResponse,
+  Agents24ChatScaffoldComponents,
+  Agents24ChatTimelineSlotProps,
+} from "./app"
+export { TooltipProvider as Agents24ChatTooltipProvider }

package/dist/scaffold/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/dist/scaffold/styles.css

@@ -0,0 +1,3 @@
+@import "@agents24/chat-react/styles.css";
+@import "./src/index.css";
+@import "./src/chat.css";

package/dist/scaffold-manifest.json

@@ -0,0 +1,66 @@
+{
+  "schema_version": "agents24.chat-scaffold-build.v1",
+  "default_preset": "b2D1FHzlY",
+  "dependencies": {
+    "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/jetbrains-mono": "^5.3.0",
+    "@fontsource-variable/merriweather": "^5.3.0",
+    "@shadcn/react": "^0.2.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "0.542.0",
+    "radix-ui": "1.4.3",
+    "streamdown": "^2.5.0",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.16",
+    "shadcn": "4.13.1",
+    "tailwindcss": "^4.1.16"
+  },
+  "source": "packages/agents24-chat-react/scaffold",
+  "sha256": "c0cd4f7235384fb8297a0f5d364dbf75898e1a12e2b8c88128ee78f4ac0044c0",
+  "files": [
+    "components.json",
+    "manifest.json",
+    "src/app.tsx",
+    "src/chat.css",
+    "src/components/chat/chat-composer.tsx",
+    "src/components/chat/chat-message.tsx",
+    "src/components/chat/chat-shell.tsx",
+    "src/components/chat/collapsible-user-message.tsx",
+    "src/components/chat/external-link-dialog.tsx",
+    "src/components/chat/identity-control.tsx",
+    "src/components/chat/message-parts.tsx",
+    "src/components/chat/theme-menu.tsx",
+    "src/components/chat/thread-sidebar.tsx",
+    "src/components/chat/timeline-loading.ts",
+    "src/components/chat/turn-outline.tsx",
+    "src/components/theme-provider.tsx",
+    "src/components/ui/attachment.tsx",
+    "src/components/ui/bubble.tsx",
+    "src/components/ui/button-group.tsx",
+    "src/components/ui/button.tsx",
+    "src/components/ui/dialog.tsx",
+    "src/components/ui/dropdown-menu.tsx",
+    "src/components/ui/input.tsx",
+    "src/components/ui/marker.tsx",
+    "src/components/ui/message-scroller.tsx",
+    "src/components/ui/message.tsx",
+    "src/components/ui/popover.tsx",
+    "src/components/ui/select.tsx",
+    "src/components/ui/separator.tsx",
+    "src/components/ui/sheet.tsx",
+    "src/components/ui/sidebar.tsx",
+    "src/components/ui/skeleton.tsx",
+    "src/components/ui/textarea.tsx",
+    "src/components/ui/tooltip.tsx",
+    "src/hooks/use-mobile.ts",
+    "src/identity.ts",
+    "src/index.css",
+    "src/index.tsx",
+    "src/lib/utils.ts",
+    "styles.css"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-agents24-app",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Create a production-ready Agents24 React application.",
   "license": "MIT",
   "repository": {
@@ -33,7 +33,8 @@
     "provenance": false
   },
   "dependencies": {
-    "@clack/prompts": "1.7.0"
+    "@clack/prompts": "1.7.0",
+    "shadcn": "4.13.1"
   },
   "devDependencies": {
     "@types/node": "^24.7.2",
@@ -41,7 +42,10 @@
     "typescript": "^5.9.3"
   },
   "scripts": {
-    "build": "tsup",
+    "sync:scaffold": "node scripts/sync-chat-scaffold.mjs",
+    "check:scaffold": "node scripts/sync-chat-scaffold.mjs --check",
+    "build": "tsup && pnpm run sync:scaffold && tsc --noEmit",
+    "materialize:fixture": "pnpm run build && node scripts/materialize-dev-fixture.mjs",
     "test": "pnpm run build && node --test tests/*.test.mjs",
     "prepack": "pnpm run build && pnpm run test"
   }

package/templates/common/README.md

@@ -1,8 +1,8 @@
 # __APP_NAME__
 
-Last Updated: 2026-07-19
+Last Updated: 2026-07-29
 
-This app was generated by `create-agents24-app` with the `__INTEGRATION__` integration and `__THEME__` visual recipe.
+This app was generated by `create-agents24-app` with the `__INTEGRATION__` integration and Shadcn preset `__PRESET__`.
 
 The app includes a strict document CSP. If you deploy the static client-deployment build without the generated BFF, configure your host to send `Content-Security-Policy: frame-ancestors 'none'`; browsers do not honor that directive in an HTML meta tag.
 
@@ -14,6 +14,8 @@ __PM_DEV__
 
 Configuration lives in `.env.local`. Commit `.env.example`, never `.env.local`.
 
+__STARTER_SETUP__
+
 ## Production
 
 ```bash
@@ -21,4 +23,15 @@ __PM_BUILD__
 __PM_PRODUCTION__
 ```
 
-The chat layout comes directly from `@agents24/chat-react`; keep product-specific additions in the provided slots instead of copying the layout.
+The application owns its Shadcn component source under `src/components`. Agents24 packages own the runtime, state, hardened streaming markdown, and MCP security helpers.
+
+## Timeline customization
+
+The generated scaffold renders canonical ordered `message.parts` with the
+default `AgentResponseTimeline`. Pass `components={{ Timeline }}` to
+`Agents24ChatScaffold` to use the default, pass a copied/reordered `parts`
+array to `AgentResponseTimeline`, or render a fully custom timeline with
+`AgentChatPart` and the supplied HITL callbacks. Never mutate `message.parts`;
+the replacement owns its accessibility and pending-HITL visibility.
+
+To try another Shadcn preset later, run `__PM_PRESET__ <preset-code> --yes`. Commit first: Shadcn intentionally updates component source and theme variables.

package/templates/common/index.html

@@ -1,9 +1,9 @@
 <!doctype html>
-<html lang="en" data-agents24-color-mode="system">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-    <meta content="default-src 'self'; base-uri 'none'; object-src 'none'; script-src 'self'; style-src 'self'; img-src 'self' data: blob:; connect-src 'self' __CONNECT_SOURCE__ ws://127.0.0.1:* ws://localhost:*; form-action 'self'" http-equiv="Content-Security-Policy" />
+    <meta content="width=device-width, initial-scale=1.0, viewport-fit=cover" name="viewport" />
+    <meta content="default-src 'self'; base-uri 'none'; object-src 'none'; script-src 'self'; style-src 'self'; font-src 'self' data:; img-src 'self' data: blob:; connect-src 'self'__CONNECT_SOURCE__; form-action 'self'" http-equiv="Content-Security-Policy" />
     <link href="/src/styles.css" rel="stylesheet" />
     <title>__APP_NAME__</title>
   </head>

package/templates/common/scripts/apply-preset.mjs

@@ -0,0 +1,17 @@
+import { spawnSync } from "node:child_process"
+import { resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+
+import { scopePresetTheme } from "./scope-preset-theme.mjs"
+
+const preset = String(process.argv[2] || "").trim()
+if (!preset) throw new Error("Pass a shadcn preset code, for example: pnpm preset -- b2D1FHzlY")
+
+const shadcn = fileURLToPath(import.meta.resolve("shadcn"))
+const result = spawnSync(process.execPath, [shadcn, "apply", preset, "--yes", "--cwd", resolve(".")], {
+  stdio: "inherit",
+})
+if (result.error) throw result.error
+if (result.status !== 0) process.exit(result.status || 1)
+
+scopePresetTheme()

package/templates/common/scripts/scope-preset-theme.mjs

@@ -0,0 +1,38 @@
+import { readFileSync, realpathSync, writeFileSync } from "node:fs"
+import { resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+
+const startMarker = "/* agents24-preset-theme:start */"
+const endMarker = "/* agents24-preset-theme:end */"
+
+function lastTopLevelBlock(css, selector) {
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+  const matches = [...css.matchAll(new RegExp(`^${escaped}\\s*\\{([\\s\\S]*?)^\\}`, "gm"))]
+  return matches.at(-1)?.[1]?.trim() || null
+}
+
+export function scopePresetTheme(cssPath = resolve("src/index.css")) {
+  let css = readFileSync(cssPath, "utf8")
+  css = css.replace(new RegExp(`\\n?${startMarker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}[\\s\\S]*?${endMarker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\n?`, "g"), "\n")
+
+  const light = lastTopLevelBlock(css, ":root")
+  const dark = lastTopLevelBlock(css, ".dark")
+  if (!light || !dark) throw new Error("The applied shadcn preset did not provide :root and .dark theme tokens.")
+
+  // Generated apps are standalone, but the chat root remains scoped so dialogs and
+  // overlays inherit one consistent theme. Remove the canonical default token blocks
+  // before adding the selected preset at the same scope.
+  css = css
+    .replace(/^\[data-agents24-theme-root\]\s*\{[\s\S]*?^\}\n?/m, "")
+    .replace(/^\[data-agents24-theme-root\]\.dark\s*\{[\s\S]*?^\}\n?/m, "")
+    .replace(/^\[data-agents24-theme-root\]\[data-agents24-theme="sharp"\]\s*\{[\s\S]*?^\}\n?/m, "")
+    .replace(/^\[data-agents24-theme-root\]\[data-agents24-theme="sharp"\]\.dark\s*\{[\s\S]*?^\}\n?/m, "")
+    .trimEnd()
+
+  css += `\n\n${startMarker}\n[data-agents24-theme-root] {\n  color-scheme: light;\n${light}\n}\n\n[data-agents24-theme-root].dark {\n  color-scheme: dark;\n${dark}\n}\n${endMarker}\n`
+  writeFileSync(cssPath, css)
+}
+
+if (process.argv[1] && realpathSync(resolve(process.argv[1])) === realpathSync(fileURLToPath(import.meta.url))) {
+  scopePresetTheme(process.argv[2] ? resolve(process.argv[2]) : undefined)
+}

package/templates/common/src/styles.css

@@ -1,7 +1,11 @@
-@import "@agents24/chat-react/styles.css";
-@import "./theme.css";
+@import "../styles.css";
+@source "../node_modules/streamdown/dist/*.js";
 
-* { box-sizing: border-box; }
-html, body, #root { height: 100%; margin: 0; }
-body { background: var(--a24-background); color: var(--a24-text); overflow: hidden; }
-.app-shell { height: 100%; min-height: 32rem; width: 100%; }
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  width: 100%;
+}

package/templates/common/src/use-thread-query-navigation.ts

@@ -0,0 +1,41 @@
+import type { AgentChatActiveThreadChange } from "@agents24/chat-react/runtime"
+import * as React from "react"
+
+const THREAD_ID_PARAM = "threadId"
+
+function readThreadId(): string | null {
+  const value = new URL(window.location.href).searchParams.get(THREAD_ID_PARAM)
+  return value?.trim() || null
+}
+
+function writeThreadId(threadId: string | null, mode: "push" | "replace") {
+  const url = new URL(window.location.href)
+  if (threadId) url.searchParams.set(THREAD_ID_PARAM, threadId)
+  else url.searchParams.delete(THREAD_ID_PARAM)
+  window.history[mode === "push" ? "pushState" : "replaceState"](
+    { ...window.history.state, agents24ThreadId: threadId },
+    "",
+    url,
+  )
+}
+
+export function useThreadQueryNavigation() {
+  const [activeThreadId, setActiveThreadId] = React.useState<string | null>(readThreadId)
+
+  React.useEffect(() => {
+    const onPopState = () => setActiveThreadId(readThreadId())
+    window.addEventListener("popstate", onPopState)
+    return () => window.removeEventListener("popstate", onPopState)
+  }, [])
+
+  const onActiveThreadIdChange = React.useCallback((change: AgentChatActiveThreadChange) => {
+    setActiveThreadId((current) => {
+      if (current === change.threadId) return current
+      const mode = change.reason === "created" || change.reason === "deleted" ? "replace" : "push"
+      writeThreadId(change.threadId, mode)
+      return change.threadId
+    })
+  }, [])
+
+  return { activeThreadId, onActiveThreadIdChange }
+}

package/templates/common/tsconfig.json

@@ -15,7 +15,8 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "types": ["vite/client"]
+    "types": ["vite/client", "node"],
+    "paths": { "@/*": ["./src/*"] }
   },
   "include": ["src", "server", "vite.config.ts"]
 }