@chaaskit/client 0.1.1 → 0.1.2

package/dist/lib/routes/AdminPromoCodesRoute.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { ChatProviders, AdminPromoCodesPage } from "../index.js";
+import { S } from "../LoadingSkeletons-IcIC2JPq.js";
+function meta() {
+  return [{ title: "Admin - Promo Codes" }];
+}
+function links() {
+  return [];
+}
+function AdminPromoCodesRoute() {
+  return /* @__PURE__ */ jsx(ChatProviders, { children: /* @__PURE__ */ jsx(AdminPromoCodesPage, {}) });
+}
+export {
+  S as LoadingSkeleton,
+  AdminPromoCodesRoute as default,
+  links,
+  meta
+};
+//# sourceMappingURL=AdminPromoCodesRoute.js.map

package/dist/lib/routes/AdminPromoCodesRoute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminPromoCodesRoute.js","sources":["../../../src/routes/AdminPromoCodesRoute.tsx"],"sourcesContent":["/**\n * Admin Promo Codes Route - Promo code management\n */\nimport { ChatProviders } from '../index';\nimport AdminPromoCodesPage from '../pages/AdminPromoCodesPage';\nimport { SimpleLoadingSkeleton } from '../components/LoadingSkeletons';\n\nexport function meta() {\n  return [{ title: 'Admin - Promo Codes' }];\n}\n\nexport function links() {\n  return [];\n}\n\nexport default function AdminPromoCodesRoute() {\n  return (\n    <ChatProviders>\n      <AdminPromoCodesPage />\n    </ChatProviders>\n  );\n}\n\nexport { SimpleLoadingSkeleton as LoadingSkeleton };\n"],"names":[],"mappings":";;;AAOO,SAAS,OAAO;AACrB,SAAO,CAAC,EAAE,OAAO,uBAAuB;AAC1C;AAEO,SAAS,QAAQ;AACtB,SAAO,CAAA;AACT;AAEA,SAAwB,uBAAuB;AAC7C,SACE,oBAAC,eAAA,EACC,UAAA,oBAAC,qBAAA,CAAA,CAAoB,GACvB;AAEJ;"}

package/dist/lib/routes/AdminWaitlistRoute.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { ChatProviders, AdminWaitlistPage } from "../index.js";
+import { S } from "../LoadingSkeletons-IcIC2JPq.js";
+function meta() {
+  return [{ title: "Admin - Waitlist" }];
+}
+function links() {
+  return [];
+}
+function AdminWaitlistRoute() {
+  return /* @__PURE__ */ jsx(ChatProviders, { children: /* @__PURE__ */ jsx(AdminWaitlistPage, {}) });
+}
+export {
+  S as LoadingSkeleton,
+  AdminWaitlistRoute as default,
+  links,
+  meta
+};
+//# sourceMappingURL=AdminWaitlistRoute.js.map

package/dist/lib/routes/AdminWaitlistRoute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminWaitlistRoute.js","sources":["../../../src/routes/AdminWaitlistRoute.tsx"],"sourcesContent":["/**\n * Admin Waitlist Route - Waitlist management\n */\nimport { ChatProviders } from '../index';\nimport AdminWaitlistPage from '../pages/AdminWaitlistPage';\nimport { SimpleLoadingSkeleton } from '../components/LoadingSkeletons';\n\nexport function meta() {\n  return [{ title: 'Admin - Waitlist' }];\n}\n\nexport function links() {\n  return [];\n}\n\nexport default function AdminWaitlistRoute() {\n  return (\n    <ChatProviders>\n      <AdminWaitlistPage />\n    </ChatProviders>\n  );\n}\n\nexport { SimpleLoadingSkeleton as LoadingSkeleton };\n"],"names":[],"mappings":";;;AAOO,SAAS,OAAO;AACrB,SAAO,CAAC,EAAE,OAAO,oBAAoB;AACvC;AAEO,SAAS,QAAQ;AACtB,SAAO,CAAA;AACT;AAEA,SAAwB,qBAAqB;AAC3C,SACE,oBAAC,eAAA,EACC,UAAA,oBAAC,mBAAA,CAAA,CAAkB,GACrB;AAEJ;"}

package/dist/lib/routes.js

@@ -7,54 +7,64 @@ import { default as default7, links as links6, meta as meta6 } from "./routes/Ad
 import { default as default8, links as links7, meta as meta7 } from "./routes/AdminUsersRoute.js";
 import { default as default9, links as links8, meta as meta8 } from "./routes/AdminTeamsRoute.js";
 import { default as default10, links as links9, meta as meta9 } from "./routes/AdminTeamRoute.js";
-import { default as default11, links as links10, meta as meta10 } from "./routes/VerifyEmailRoute.js";
-import { default as default12, links as links11, meta as meta11 } from "./routes/AcceptInviteRoute.js";
-import { default as default13, links as links12, meta as meta12 } from "./routes/PricingRoute.js";
-import { default as default14, links as links13, meta as meta13 } from "./routes/OAuthConsentRoute.js";
-import { default as default15, links as links14, meta as meta14 } from "./routes/PrivacyRoute.js";
-import { default as default16, links as links15, meta as meta15 } from "./routes/TermsRoute.js";
-import { S, S as S2, S as S3, S as S4, S as S5, S as S6, S as S7, C, S as S8, S as S9, S as S10, S as S11, S as S12, S as S13, S as S14 } from "./LoadingSkeletons-IcIC2JPq.js";
+import { default as default11, links as links10, meta as meta10 } from "./routes/AdminWaitlistRoute.js";
+import { default as default12, links as links11, meta as meta11 } from "./routes/AdminPromoCodesRoute.js";
+import { default as default13, links as links12, meta as meta12 } from "./routes/VerifyEmailRoute.js";
+import { default as default14, links as links13, meta as meta13 } from "./routes/AcceptInviteRoute.js";
+import { default as default15, links as links14, meta as meta14 } from "./routes/PricingRoute.js";
+import { default as default16, links as links15, meta as meta15 } from "./routes/OAuthConsentRoute.js";
+import { default as default17, links as links16, meta as meta16 } from "./routes/PrivacyRoute.js";
+import { default as default18, links as links17, meta as meta17 } from "./routes/TermsRoute.js";
+import { S, S as S2, S as S3, S as S4, S as S5, S as S6, S as S7, S as S8, S as S9, C, S as S10, S as S11, S as S12, S as S13, S as S14, S as S15, S as S16 } from "./LoadingSkeletons-IcIC2JPq.js";
 export {
   S as AcceptInviteLoadingSkeleton,
-  default12 as AcceptInviteRoute,
+  default14 as AcceptInviteRoute,
   S2 as AdminDashboardLoadingSkeleton,
   default7 as AdminDashboardRoute,
-  S3 as AdminTeamLoadingSkeleton,
+  S3 as AdminPromoCodesLoadingSkeleton,
+  default12 as AdminPromoCodesRoute,
+  S4 as AdminTeamLoadingSkeleton,
   default10 as AdminTeamRoute,
-  S4 as AdminTeamsLoadingSkeleton,
+  S5 as AdminTeamsLoadingSkeleton,
   default9 as AdminTeamsRoute,
-  S5 as AdminUsersLoadingSkeleton,
+  S6 as AdminUsersLoadingSkeleton,
   default8 as AdminUsersRoute,
-  S6 as ApiKeysLoadingSkeleton,
+  S7 as AdminWaitlistLoadingSkeleton,
+  default11 as AdminWaitlistRoute,
+  S8 as ApiKeysLoadingSkeleton,
   default3 as ApiKeysRoute,
-  S7 as AutomationsLoadingSkeleton,
+  S9 as AutomationsLoadingSkeleton,
   default5 as AutomationsRoute,
   C as ChatLoadingSkeleton,
   default2 as ChatRoute,
-  S8 as DocumentsLoadingSkeleton,
+  S10 as DocumentsLoadingSkeleton,
   default4 as DocumentsRoute,
-  S9 as OAuthConsentLoadingSkeleton,
-  default14 as OAuthConsentRoute,
-  S10 as PricingLoadingSkeleton,
-  default13 as PricingRoute,
-  S11 as PrivacyLoadingSkeleton,
-  default15 as PrivacyRoute,
-  S12 as TeamSettingsLoadingSkeleton,
+  S11 as OAuthConsentLoadingSkeleton,
+  default16 as OAuthConsentRoute,
+  S12 as PricingLoadingSkeleton,
+  default15 as PricingRoute,
+  S13 as PrivacyLoadingSkeleton,
+  default17 as PrivacyRoute,
+  S14 as TeamSettingsLoadingSkeleton,
   default6 as TeamSettingsRoute,
-  S13 as TermsLoadingSkeleton,
-  default16 as TermsRoute,
-  S14 as VerifyEmailLoadingSkeleton,
-  default11 as VerifyEmailRoute,
-  links11 as acceptInviteLinks,
-  meta11 as acceptInviteMeta,
+  S15 as TermsLoadingSkeleton,
+  default18 as TermsRoute,
+  S16 as VerifyEmailLoadingSkeleton,
+  default13 as VerifyEmailRoute,
+  links13 as acceptInviteLinks,
+  meta13 as acceptInviteMeta,
   links6 as adminDashboardLinks,
   meta6 as adminDashboardMeta,
+  links11 as adminPromoCodesLinks,
+  meta11 as adminPromoCodesMeta,
   links9 as adminTeamLinks,
   meta9 as adminTeamMeta,
   links8 as adminTeamsLinks,
   meta8 as adminTeamsMeta,
   links7 as adminUsersLinks,
   meta7 as adminUsersMeta,
+  links10 as adminWaitlistLinks,
+  meta10 as adminWaitlistMeta,
   links2 as apiKeysLinks,
   meta2 as apiKeysMeta,
   links4 as automationsLinks,
@@ -63,17 +73,17 @@ export {
   meta as chatMeta,
   links3 as documentsLinks,
   meta3 as documentsMeta,
-  links13 as oauthConsentLinks,
-  meta13 as oauthConsentMeta,
-  links12 as pricingLinks,
-  meta12 as pricingMeta,
-  links14 as privacyLinks,
-  meta14 as privacyMeta,
+  links15 as oauthConsentLinks,
+  meta15 as oauthConsentMeta,
+  links14 as pricingLinks,
+  meta14 as pricingMeta,
+  links16 as privacyLinks,
+  meta16 as privacyMeta,
   links5 as teamSettingsLinks,
   meta5 as teamSettingsMeta,
-  links15 as termsLinks,
-  meta15 as termsMeta,
-  links10 as verifyEmailLinks,
-  meta10 as verifyEmailMeta
+  links17 as termsLinks,
+  meta17 as termsMeta,
+  links12 as verifyEmailLinks,
+  meta12 as verifyEmailMeta
 };
 //# sourceMappingURL=routes.js.map

package/dist/lib/routes.js.map

@@ -1 +1 @@
-{"version":3,"file":"routes.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"routes.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/lib/ssr-utils.js

@@ -2,37 +2,57 @@ import { jsx } from "react/jsx-runtime";
 import { lazy, Suspense } from "react";
 import { a as ClientOnly, C as ChatLoadingSkeleton, S as SimpleLoadingSkeleton } from "./LoadingSkeletons-IcIC2JPq.js";
 function ConfigScript({ config }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const safeConfig = {
     app: config.app,
     ui: config.ui,
     theming: config.theming,
     auth: {
       methods: (_a = config.auth) == null ? void 0 : _a.methods,
-      allowUnauthenticated: (_b = config.auth) == null ? void 0 : _b.allowUnauthenticated
+      allowUnauthenticated: (_b = config.auth) == null ? void 0 : _b.allowUnauthenticated,
+      magicLink: (_c = config.auth) == null ? void 0 : _c.magicLink,
+      emailVerification: (_d = config.auth) == null ? void 0 : _d.emailVerification,
+      gating: (_e = config.auth) == null ? void 0 : _e.gating
     },
     payments: {
-      enabled: (_c = config.payments) == null ? void 0 : _c.enabled,
-      plans: (_e = (_d = config.payments) == null ? void 0 : _d.plans) == null ? void 0 : _e.map((plan) => ({
-        id: plan.id,
-        name: plan.name,
-        type: plan.type
-      }))
+      enabled: (_f = config.payments) == null ? void 0 : _f.enabled,
+      provider: (_g = config.payments) == null ? void 0 : _g.provider
     },
     legal: config.legal,
     sharing: config.sharing,
     teams: config.teams,
     projects: config.projects,
-    documents: {
-      enabled: (_f = config.documents) == null ? void 0 : _f.enabled
-    },
+    documents: config.documents ? {
+      enabled: config.documents.enabled,
+      maxFileSizeMB: config.documents.maxFileSizeMB,
+      hybridThreshold: config.documents.hybridThreshold,
+      acceptedTypes: config.documents.acceptedTypes
+    } : void 0,
     api: {
-      enabled: (_g = config.api) == null ? void 0 : _g.enabled
+      enabled: (_h = config.api) == null ? void 0 : _h.enabled
     },
-    promptTemplates: {
-      enabled: (_h = config.promptTemplates) == null ? void 0 : _h.enabled,
-      allowUserTemplates: (_i = config.promptTemplates) == null ? void 0 : _i.allowUserTemplates
-    }
+    promptTemplates: config.promptTemplates ? {
+      enabled: config.promptTemplates.enabled,
+      allowUserTemplates: config.promptTemplates.allowUserTemplates
+    } : void 0,
+    scheduledPrompts: config.scheduledPrompts ? {
+      enabled: config.scheduledPrompts.enabled,
+      featureName: config.scheduledPrompts.featureName,
+      allowUserPrompts: config.scheduledPrompts.allowUserPrompts,
+      allowTeamPrompts: config.scheduledPrompts.allowTeamPrompts,
+      defaultTimezone: config.scheduledPrompts.defaultTimezone,
+      defaultMaxUserPrompts: config.scheduledPrompts.defaultMaxUserPrompts,
+      defaultMaxTeamPrompts: config.scheduledPrompts.defaultMaxTeamPrompts
+    } : void 0,
+    credits: config.credits ? {
+      enabled: config.credits.enabled,
+      expiryEnabled: config.credits.expiryEnabled,
+      promoEnabled: config.credits.promoEnabled
+    } : void 0,
+    metering: config.metering ? {
+      enabled: config.metering.enabled,
+      recordPromptCompletion: config.metering.recordPromptCompletion
+    } : void 0
   };
   return /* @__PURE__ */ jsx(
     "script",

package/dist/lib/ssr-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"ssr-utils.js","sources":["../../src/ssr-utils.tsx"],"sourcesContent":["/**\n * SSR-safe utilities for @chaaskit/client\n *\n * This entry point ONLY exports components that are safe to import during SSR.\n * Use this in route files instead of importing from the main entry point\n * to avoid pulling in browser-only dependencies like react-markdown.\n *\n * @example\n * ```tsx\n * // In your route file\n * import { createRoute, SimpleLoadingSkeleton } from '@chaaskit/client/ssr-utils';\n *\n * export const { meta, links, default: Component } = createRoute({\n *   title: 'Verify Email',\n *   load: () => import('@chaaskit/client/routes/VerifyEmailRoute'),\n * });\n * export default Component;\n * ```\n */\n\nimport { lazy, Suspense, type ComponentType, type LazyExoticComponent } from 'react';\nimport type { AppConfig } from '@chaaskit/shared';\nimport { ClientOnly } from './components/ClientOnly';\nimport { ChatLoadingSkeleton, SimpleLoadingSkeleton } from './components/LoadingSkeletons';\n\nexport { ClientOnly, ChatLoadingSkeleton, SimpleLoadingSkeleton };\n\n/**\n * Props for ConfigScript component.\n */\ninterface ConfigScriptProps {\n  /**\n   * The app config to inject into the page.\n   * This should come from the SSR loader.\n   */\n  config: AppConfig;\n}\n\n/**\n * Injects the app config into the page as a script tag.\n * Place this in the <head> of your root layout to make the config\n * available immediately on page load, avoiding flash of default values.\n *\n * @example\n * ```tsx\n * // app/root.tsx\n * import { ConfigScript } from '@chaaskit/client/ssr-utils';\n * import { config } from '../config/app.config';\n *\n * export default function Root() {\n *   return (\n *     <html>\n *       <head>\n *         <ConfigScript config={config} />\n *       </head>\n *       <body>...</body>\n *     </html>\n *   );\n * }\n * ```\n */\nexport function ConfigScript({ config }: ConfigScriptProps) {\n  // Only include the UI-related config to avoid exposing sensitive data\n  const safeConfig = {\n    app: config.app,\n    ui: config.ui,\n    theming: config.theming,\n    auth: {\n      methods: config.auth?.methods,\n      allowUnauthenticated: config.auth?.allowUnauthenticated,\n    },\n    payments: {\n      enabled: config.payments?.enabled,\n      plans: config.payments?.plans?.map(plan => ({\n        id: plan.id,\n        name: plan.name,\n        type: plan.type,\n      })),\n    },\n    legal: config.legal,\n    sharing: config.sharing,\n    teams: config.teams,\n    projects: config.projects,\n    documents: {\n      enabled: config.documents?.enabled,\n    },\n    api: {\n      enabled: config.api?.enabled,\n    },\n    promptTemplates: {\n      enabled: config.promptTemplates?.enabled,\n      allowUserTemplates: config.promptTemplates?.allowUserTemplates,\n    },\n  };\n\n  return (\n    <script\n      dangerouslySetInnerHTML={{\n        __html: `window.__CHAASKIT_CONFIG__=${JSON.stringify(safeConfig)};`,\n      }}\n    />\n  );\n}\n\n/**\n * Route configuration options\n */\nexport interface RouteConfig {\n  /** Page title for meta tag */\n  title: string;\n  /** Dynamic import function for the route component */\n  load: () => Promise<{ default: ComponentType<any> }>;\n  /** Loading skeleton to show during SSR and lazy load (defaults to SimpleLoadingSkeleton) */\n  skeleton?: 'simple' | 'chat';\n}\n\n/**\n * Creates a route module with meta, links, and default component.\n * This reduces route files to just a few lines.\n *\n * @example\n * ```tsx\n * import { createRoute } from '@chaaskit/client/ssr-utils';\n *\n * export const { meta, links, default: VerifyEmail } = createRoute({\n *   title: 'Verify Email',\n *   load: () => import('@chaaskit/client/routes/VerifyEmailRoute'),\n * });\n * export default VerifyEmail;\n * ```\n */\nexport function createRoute(config: RouteConfig) {\n  const { title, load, skeleton = 'simple' } = config;\n  const LazyComponent = lazy(load);\n  const Skeleton = skeleton === 'chat' ? ChatLoadingSkeleton : SimpleLoadingSkeleton;\n\n  function meta() {\n    return [{ title }];\n  }\n\n  function links() {\n    // CSS is bundled via app's Tailwind preset - no separate stylesheet needed\n    return [];\n  }\n\n  function RouteComponent() {\n    return (\n      <ClientOnly fallback={<Skeleton />}>\n        {() => (\n          <Suspense fallback={<Skeleton />}>\n            <LazyComponent />\n          </Suspense>\n        )}\n      </ClientOnly>\n    );\n  }\n\n  return {\n    meta,\n    links,\n    default: RouteComponent,\n  };\n}\n"],"names":[],"mappings":";;;AA6DO,SAAS,aAAa,EAAE,UAA6B;;AAE1D,QAAM,aAAa;AAAA,IACjB,KAAK,OAAO;AAAA,IACZ,IAAI,OAAO;AAAA,IACX,SAAS,OAAO;AAAA,IAChB,MAAM;AAAA,MACJ,UAAS,YAAO,SAAP,mBAAa;AAAA,MACtB,uBAAsB,YAAO,SAAP,mBAAa;AAAA,IAAA;AAAA,IAErC,UAAU;AAAA,MACR,UAAS,YAAO,aAAP,mBAAiB;AAAA,MAC1B,QAAO,kBAAO,aAAP,mBAAiB,UAAjB,mBAAwB,IAAI,CAAA,UAAS;AAAA,QAC1C,IAAI,KAAK;AAAA,QACT,MAAM,KAAK;AAAA,QACX,MAAM,KAAK;AAAA,MAAA;AAAA,IACX;AAAA,IAEJ,OAAO,OAAO;AAAA,IACd,SAAS,OAAO;AAAA,IAChB,OAAO,OAAO;AAAA,IACd,UAAU,OAAO;AAAA,IACjB,WAAW;AAAA,MACT,UAAS,YAAO,cAAP,mBAAkB;AAAA,IAAA;AAAA,IAE7B,KAAK;AAAA,MACH,UAAS,YAAO,QAAP,mBAAY;AAAA,IAAA;AAAA,IAEvB,iBAAiB;AAAA,MACf,UAAS,YAAO,oBAAP,mBAAwB;AAAA,MACjC,qBAAoB,YAAO,oBAAP,mBAAwB;AAAA,IAAA;AAAA,EAC9C;AAGF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,yBAAyB;AAAA,QACvB,QAAQ,8BAA8B,KAAK,UAAU,UAAU,CAAC;AAAA,MAAA;AAAA,IAClE;AAAA,EAAA;AAGN;AA6BO,SAAS,YAAY,QAAqB;AAC/C,QAAM,EAAE,OAAO,MAAM,WAAW,aAAa;AAC7C,QAAM,gBAAgB,KAAK,IAAI;AAC/B,QAAM,WAAW,aAAa,SAAS,sBAAsB;AAE7D,WAAS,OAAO;AACd,WAAO,CAAC,EAAE,OAAO;AAAA,EACnB;AAEA,WAAS,QAAQ;AAEf,WAAO,CAAA;AAAA,EACT;AAEA,WAAS,iBAAiB;AACxB,+BACG,YAAA,EAAW,UAAU,oBAAC,UAAA,EAAS,GAC7B,UAAA,MACC,oBAAC,UAAA,EAAS,8BAAW,UAAA,CAAA,CAAS,GAC5B,UAAA,oBAAC,eAAA,CAAA,CAAc,GACjB,GAEJ;AAAA,EAEJ;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA;AAEb;"}
+{"version":3,"file":"ssr-utils.js","sources":["../../src/ssr-utils.tsx"],"sourcesContent":["/**\n * SSR-safe utilities for @chaaskit/client\n *\n * This entry point ONLY exports components that are safe to import during SSR.\n * Use this in route files instead of importing from the main entry point\n * to avoid pulling in browser-only dependencies like react-markdown.\n *\n * @example\n * ```tsx\n * // In your route file\n * import { createRoute, SimpleLoadingSkeleton } from '@chaaskit/client/ssr-utils';\n *\n * export const { meta, links, default: Component } = createRoute({\n *   title: 'Verify Email',\n *   load: () => import('@chaaskit/client/routes/VerifyEmailRoute'),\n * });\n * export default Component;\n * ```\n */\n\nimport { lazy, Suspense, type ComponentType, type LazyExoticComponent } from 'react';\nimport type { AppConfig } from '@chaaskit/shared';\nimport { ClientOnly } from './components/ClientOnly';\nimport { ChatLoadingSkeleton, SimpleLoadingSkeleton } from './components/LoadingSkeletons';\n\nexport { ClientOnly, ChatLoadingSkeleton, SimpleLoadingSkeleton };\n\n/**\n * Props for ConfigScript component.\n */\ninterface ConfigScriptProps {\n  /**\n   * The app config to inject into the page.\n   * This should come from the SSR loader.\n   */\n  config: AppConfig;\n}\n\n/**\n * Injects the app config into the page as a script tag.\n * Place this in the <head> of your root layout to make the config\n * available immediately on page load, avoiding flash of default values.\n *\n * @example\n * ```tsx\n * // app/root.tsx\n * import { ConfigScript } from '@chaaskit/client/ssr-utils';\n * import { config } from '../config/app.config';\n *\n * export default function Root() {\n *   return (\n *     <html>\n *       <head>\n *         <ConfigScript config={config} />\n *       </head>\n *       <body>...</body>\n *     </html>\n *   );\n * }\n * ```\n */\nexport function ConfigScript({ config }: ConfigScriptProps) {\n  // Only include the UI-related config to avoid exposing sensitive data\n  const safeConfig = {\n    app: config.app,\n    ui: config.ui,\n    theming: config.theming,\n    auth: {\n      methods: config.auth?.methods,\n      allowUnauthenticated: config.auth?.allowUnauthenticated,\n      magicLink: config.auth?.magicLink,\n      emailVerification: config.auth?.emailVerification,\n      gating: config.auth?.gating,\n    },\n    payments: {\n      enabled: config.payments?.enabled,\n      provider: config.payments?.provider,\n    },\n    legal: config.legal,\n    sharing: config.sharing,\n    teams: config.teams,\n    projects: config.projects,\n    documents: config.documents ? {\n      enabled: config.documents.enabled,\n      maxFileSizeMB: config.documents.maxFileSizeMB,\n      hybridThreshold: config.documents.hybridThreshold,\n      acceptedTypes: config.documents.acceptedTypes,\n    } : undefined,\n    api: {\n      enabled: config.api?.enabled,\n    },\n    promptTemplates: config.promptTemplates ? {\n      enabled: config.promptTemplates.enabled,\n      allowUserTemplates: config.promptTemplates.allowUserTemplates,\n    } : undefined,\n    scheduledPrompts: config.scheduledPrompts ? {\n      enabled: config.scheduledPrompts.enabled,\n      featureName: config.scheduledPrompts.featureName,\n      allowUserPrompts: config.scheduledPrompts.allowUserPrompts,\n      allowTeamPrompts: config.scheduledPrompts.allowTeamPrompts,\n      defaultTimezone: config.scheduledPrompts.defaultTimezone,\n      defaultMaxUserPrompts: config.scheduledPrompts.defaultMaxUserPrompts,\n      defaultMaxTeamPrompts: config.scheduledPrompts.defaultMaxTeamPrompts,\n    } : undefined,\n    credits: config.credits ? {\n      enabled: config.credits.enabled,\n      expiryEnabled: config.credits.expiryEnabled,\n      promoEnabled: config.credits.promoEnabled,\n    } : undefined,\n    metering: config.metering ? {\n      enabled: config.metering.enabled,\n      recordPromptCompletion: config.metering.recordPromptCompletion,\n    } : undefined,\n  };\n\n  return (\n    <script\n      dangerouslySetInnerHTML={{\n        __html: `window.__CHAASKIT_CONFIG__=${JSON.stringify(safeConfig)};`,\n      }}\n    />\n  );\n}\n\n/**\n * Route configuration options\n */\nexport interface RouteConfig {\n  /** Page title for meta tag */\n  title: string;\n  /** Dynamic import function for the route component */\n  load: () => Promise<{ default: ComponentType<any> }>;\n  /** Loading skeleton to show during SSR and lazy load (defaults to SimpleLoadingSkeleton) */\n  skeleton?: 'simple' | 'chat';\n}\n\n/**\n * Creates a route module with meta, links, and default component.\n * This reduces route files to just a few lines.\n *\n * @example\n * ```tsx\n * import { createRoute } from '@chaaskit/client/ssr-utils';\n *\n * export const { meta, links, default: VerifyEmail } = createRoute({\n *   title: 'Verify Email',\n *   load: () => import('@chaaskit/client/routes/VerifyEmailRoute'),\n * });\n * export default VerifyEmail;\n * ```\n */\nexport function createRoute(config: RouteConfig) {\n  const { title, load, skeleton = 'simple' } = config;\n  const LazyComponent = lazy(load);\n  const Skeleton = skeleton === 'chat' ? ChatLoadingSkeleton : SimpleLoadingSkeleton;\n\n  function meta() {\n    return [{ title }];\n  }\n\n  function links() {\n    // CSS is bundled via app's Tailwind preset - no separate stylesheet needed\n    return [];\n  }\n\n  function RouteComponent() {\n    return (\n      <ClientOnly fallback={<Skeleton />}>\n        {() => (\n          <Suspense fallback={<Skeleton />}>\n            <LazyComponent />\n          </Suspense>\n        )}\n      </ClientOnly>\n    );\n  }\n\n  return {\n    meta,\n    links,\n    default: RouteComponent,\n  };\n}\n"],"names":[],"mappings":";;;AA6DO,SAAS,aAAa,EAAE,UAA6B;;AAE1D,QAAM,aAAa;AAAA,IACjB,KAAK,OAAO;AAAA,IACZ,IAAI,OAAO;AAAA,IACX,SAAS,OAAO;AAAA,IAChB,MAAM;AAAA,MACJ,UAAS,YAAO,SAAP,mBAAa;AAAA,MACtB,uBAAsB,YAAO,SAAP,mBAAa;AAAA,MACnC,YAAW,YAAO,SAAP,mBAAa;AAAA,MACxB,oBAAmB,YAAO,SAAP,mBAAa;AAAA,MAChC,SAAQ,YAAO,SAAP,mBAAa;AAAA,IAAA;AAAA,IAEvB,UAAU;AAAA,MACR,UAAS,YAAO,aAAP,mBAAiB;AAAA,MAC1B,WAAU,YAAO,aAAP,mBAAiB;AAAA,IAAA;AAAA,IAE7B,OAAO,OAAO;AAAA,IACd,SAAS,OAAO;AAAA,IAChB,OAAO,OAAO;AAAA,IACd,UAAU,OAAO;AAAA,IACjB,WAAW,OAAO,YAAY;AAAA,MAC5B,SAAS,OAAO,UAAU;AAAA,MAC1B,eAAe,OAAO,UAAU;AAAA,MAChC,iBAAiB,OAAO,UAAU;AAAA,MAClC,eAAe,OAAO,UAAU;AAAA,IAAA,IAC9B;AAAA,IACJ,KAAK;AAAA,MACH,UAAS,YAAO,QAAP,mBAAY;AAAA,IAAA;AAAA,IAEvB,iBAAiB,OAAO,kBAAkB;AAAA,MACxC,SAAS,OAAO,gBAAgB;AAAA,MAChC,oBAAoB,OAAO,gBAAgB;AAAA,IAAA,IACzC;AAAA,IACJ,kBAAkB,OAAO,mBAAmB;AAAA,MAC1C,SAAS,OAAO,iBAAiB;AAAA,MACjC,aAAa,OAAO,iBAAiB;AAAA,MACrC,kBAAkB,OAAO,iBAAiB;AAAA,MAC1C,kBAAkB,OAAO,iBAAiB;AAAA,MAC1C,iBAAiB,OAAO,iBAAiB;AAAA,MACzC,uBAAuB,OAAO,iBAAiB;AAAA,MAC/C,uBAAuB,OAAO,iBAAiB;AAAA,IAAA,IAC7C;AAAA,IACJ,SAAS,OAAO,UAAU;AAAA,MACxB,SAAS,OAAO,QAAQ;AAAA,MACxB,eAAe,OAAO,QAAQ;AAAA,MAC9B,cAAc,OAAO,QAAQ;AAAA,IAAA,IAC3B;AAAA,IACJ,UAAU,OAAO,WAAW;AAAA,MAC1B,SAAS,OAAO,SAAS;AAAA,MACzB,wBAAwB,OAAO,SAAS;AAAA,IAAA,IACtC;AAAA,EAAA;AAGN,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,yBAAyB;AAAA,QACvB,QAAQ,8BAA8B,KAAK,UAAU,UAAU,CAAC;AAAA,MAAA;AAAA,IAClE;AAAA,EAAA;AAGN;AA6BO,SAAS,YAAY,QAAqB;AAC/C,QAAM,EAAE,OAAO,MAAM,WAAW,aAAa;AAC7C,QAAM,gBAAgB,KAAK,IAAI;AAC/B,QAAM,WAAW,aAAa,SAAS,sBAAsB;AAE7D,WAAS,OAAO;AACd,WAAO,CAAC,EAAE,OAAO;AAAA,EACnB;AAEA,WAAS,QAAQ;AAEf,WAAO,CAAA;AAAA,EACT;AAEA,WAAS,iBAAiB;AACxB,+BACG,YAAA,EAAW,UAAU,oBAAC,UAAA,EAAS,GAC7B,UAAA,MACC,oBAAC,UAAA,EAAS,8BAAW,UAAA,CAAA,CAAS,GAC5B,UAAA,oBAAC,eAAA,CAAA,CAAc,GACjB,GAEJ;AAAA,EAEJ;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA;AAEb;"}

package/dist/lib/styles.css

@@ -801,6 +801,9 @@ video {
 .min-w-0 {
   min-width: 0px;
 }
+.min-w-\[160px\] {
+  min-width: 160px;
+}
 .min-w-\[200px\] {
   min-width: 200px;
 }
@@ -1179,6 +1182,9 @@ video {
 .border-purple-500\/20 {
   border-color: rgb(168 85 247 / 0.2);
 }
+.border-success\/30 {
+  border-color: rgb(var(--color-success) / 0.3);
+}
 .border-success\/50 {
   border-color: rgb(var(--color-success) / 0.5);
 }
@@ -1219,6 +1225,9 @@ video {
 .bg-background-secondary\/30 {
   background-color: rgb(var(--color-background-secondary) / 0.3);
 }
+.bg-background-secondary\/40 {
+  background-color: rgb(var(--color-background-secondary) / 0.4);
+}
 .bg-background-secondary\/50 {
   background-color: rgb(var(--color-background-secondary) / 0.5);
 }
@@ -2286,6 +2295,18 @@ kbd {
 }
 @media (min-width: 768px) {
 
+  .md\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
+  .md\:col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+
+  .md\:col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+
   .md\:block {
     display: block;
   }
@@ -2298,6 +2319,10 @@ kbd {
     display: none;
   }
 
+  .md\:grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2313,6 +2338,10 @@ kbd {
   .md\:justify-between {
     justify-content: space-between;
   }
+
+  .md\:gap-4 {
+    gap: 1rem;
+  }
 }
 @media (min-width: 1024px) {
 
@@ -2320,6 +2349,14 @@ kbd {
     position: relative;
   }
 
+  .lg\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+
+  .lg\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
   .lg\:hidden {
     display: none;
   }

package/dist/lib/useExtensions-B5nX_8XD.js.map

@@ -1 +1 @@
-{"version":3,"file":"useExtensions-B5nX_8XD.js","sources":["../../src/extensions/registry.ts","../../src/extensions/useExtensions.ts"],"sourcesContent":["import type { ComponentType } from 'react';\n\n/**\n * Page extension configuration\n */\nexport interface PageExtension {\n  /** Unique identifier for the page */\n  id: string;\n  /** URL path for the page (e.g., \"/analytics\") */\n  path: string;\n  /** Display label for navigation */\n  label: string;\n  /** Optional icon name from lucide-react */\n  icon?: string;\n  /** React component to render for this page */\n  component: ComponentType;\n  /** Whether to show in the sidebar navigation */\n  showInSidebar?: boolean;\n  /** Whether this page requires authentication */\n  requiresAuth?: boolean;\n  /** Whether this page requires admin access */\n  requiresAdmin?: boolean;\n}\n\n/**\n * Tool result renderer extension\n */\nexport interface ToolExtension {\n  /** Tool name to match */\n  name: string;\n  /** Description of the tool */\n  description: string;\n  /** Custom renderer for tool results */\n  resultRenderer?: ComponentType<{ result: unknown }>;\n}\n\n/**\n * Component override extension\n */\nexport interface ComponentOverride {\n  /** Component slot to override */\n  slot: 'header' | 'footer' | 'sidebar-header' | 'sidebar-footer' | 'message-actions';\n  /** Component to render in the slot */\n  component: ComponentType<Record<string, unknown>>;\n}\n\n/**\n * Client-side extension registry for customizing the ChaasKit UI\n *\n * Note: getPages(), getSidebarPages(), and getTools() cache their results\n * to support React's useSyncExternalStore which requires stable references.\n */\nclass ClientExtensionRegistry {\n  private pages: Map<string, PageExtension> = new Map();\n  private tools: Map<string, ToolExtension> = new Map();\n  private overrides: Map<string, ComponentOverride> = new Map();\n  private listeners: Set<() => void> = new Set();\n\n  // Cached arrays for useSyncExternalStore compatibility\n  // These are only updated when the underlying data changes\n  private cachedPages: PageExtension[] = [];\n  private cachedSidebarPages: PageExtension[] = [];\n  private cachedTools: ToolExtension[] = [];\n\n  /**\n   * Register a custom page\n   */\n  registerPage(page: PageExtension): void {\n    this.pages.set(page.id, page);\n    this.invalidateCaches();\n    this.notifyListeners();\n  }\n\n  /**\n   * Unregister a custom page\n   */\n  unregisterPage(id: string): boolean {\n    const result = this.pages.delete(id);\n    if (result) {\n      this.invalidateCaches();\n      this.notifyListeners();\n    }\n    return result;\n  }\n\n  /**\n   * Get all registered pages\n   * Returns a cached array for useSyncExternalStore compatibility\n   */\n  getPages(): PageExtension[] {\n    return this.cachedPages;\n  }\n\n  /**\n   * Get pages that should appear in the sidebar\n   * Returns a cached array for useSyncExternalStore compatibility\n   */\n  getSidebarPages(): PageExtension[] {\n    return this.cachedSidebarPages;\n  }\n\n  /**\n   * Register a custom tool renderer\n   */\n  registerTool(tool: ToolExtension): void {\n    this.tools.set(tool.name, tool);\n    this.invalidateCaches();\n    this.notifyListeners();\n  }\n\n  /**\n   * Unregister a tool renderer\n   */\n  unregisterTool(name: string): boolean {\n    const result = this.tools.delete(name);\n    if (result) {\n      this.invalidateCaches();\n      this.notifyListeners();\n    }\n    return result;\n  }\n\n  /**\n   * Get all registered tools\n   * Returns a cached array for useSyncExternalStore compatibility\n   */\n  getTools(): ToolExtension[] {\n    return this.cachedTools;\n  }\n\n  /**\n   * Get a specific tool by name\n   */\n  getTool(name: string): ToolExtension | undefined {\n    return this.tools.get(name);\n  }\n\n  /**\n   * Register a component override\n   */\n  registerOverride(override: ComponentOverride): void {\n    this.overrides.set(override.slot, override);\n    this.notifyListeners();\n  }\n\n  /**\n   * Get a component override for a slot\n   */\n  getOverride(slot: string): ComponentOverride | undefined {\n    return this.overrides.get(slot);\n  }\n\n  /**\n   * Subscribe to registry changes\n   */\n  subscribe(listener: () => void): () => void {\n    this.listeners.add(listener);\n    return () => this.listeners.delete(listener);\n  }\n\n  private invalidateCaches(): void {\n    this.cachedPages = Array.from(this.pages.values());\n    this.cachedSidebarPages = this.cachedPages.filter(p => p.showInSidebar);\n    this.cachedTools = Array.from(this.tools.values());\n  }\n\n  private notifyListeners(): void {\n    this.listeners.forEach(listener => listener());\n  }\n\n  /**\n   * Clear all registered extensions\n   */\n  clear(): void {\n    this.pages.clear();\n    this.tools.clear();\n    this.overrides.clear();\n    this.invalidateCaches();\n    this.notifyListeners();\n  }\n}\n\n// Singleton instance\nexport const clientRegistry = new ClientExtensionRegistry();\n\n// Export for use in user extensions\nexport default clientRegistry;\n","import { useSyncExternalStore, useCallback } from 'react';\nimport { clientRegistry, type PageExtension, type ToolExtension, type ComponentOverride } from './registry';\n\n/**\n * Hook to access extension pages with automatic updates\n */\nexport function useExtensionPages(): PageExtension[] {\n  const getSnapshot = useCallback(() => clientRegistry.getPages(), []);\n  const subscribe = useCallback((callback: () => void) => clientRegistry.subscribe(callback), []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to access sidebar pages with automatic updates\n */\nexport function useSidebarPages(): PageExtension[] {\n  const getSnapshot = useCallback(() => clientRegistry.getSidebarPages(), []);\n  const subscribe = useCallback((callback: () => void) => clientRegistry.subscribe(callback), []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to access extension tools with automatic updates\n */\nexport function useExtensionTools(): ToolExtension[] {\n  const getSnapshot = useCallback(() => clientRegistry.getTools(), []);\n  const subscribe = useCallback((callback: () => void) => clientRegistry.subscribe(callback), []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to get a specific tool renderer\n */\nexport function useToolRenderer(toolName: string): ToolExtension | undefined {\n  const getSnapshot = useCallback(() => clientRegistry.getTool(toolName), [toolName]);\n  const subscribe = useCallback((callback: () => void) => clientRegistry.subscribe(callback), []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to get a component override\n */\nexport function useComponentOverride(slot: string): ComponentOverride | undefined {\n  const getSnapshot = useCallback(() => clientRegistry.getOverride(slot), [slot]);\n  const subscribe = useCallback((callback: () => void) => clientRegistry.subscribe(callback), []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useExtensions-B5nX_8XD.js","sources":["../../src/extensions/registry.ts","../../src/extensions/useExtensions.ts"],"sourcesContent":["import type { ComponentType } from 'react';\nimport type { ToolCall, ToolResult } from '@chaaskit/shared';\n\n/**\n * Page extension configuration\n */\nexport interface PageExtension {\n  /** Unique identifier for the page */\n  id: string;\n  /** URL path for the page (e.g., \"/analytics\") */\n  path: string;\n  /** Display label for navigation */\n  label: string;\n  /** Optional icon name from lucide-react */\n  icon?: string;\n  /** React component to render for this page */\n  component: ComponentType;\n  /** Whether to show in the sidebar navigation */\n  showInSidebar?: boolean;\n  /** Whether this page requires authentication */\n  requiresAuth?: boolean;\n  /** Whether this page requires admin access */\n  requiresAdmin?: boolean;\n}\n\n/**\n * Tool result renderer extension\n */\nexport interface ToolExtension {\n  /** Tool name to match */\n  name: string;\n  /** Description of the tool */\n  description: string;\n  /** Custom renderer for tool results */\n  resultRenderer?: ComponentType<{ toolCall: ToolCall; toolResult: ToolResult }>;\n}\n\n/**\n * Component override extension\n */\nexport interface ComponentOverride {\n  /** Component slot to override */\n  slot: 'header' | 'footer' | 'sidebar-header' | 'sidebar-footer' | 'message-actions';\n  /** Component to render in the slot */\n  component: ComponentType<Record<string, unknown>>;\n}\n\n/**\n * Client-side extension registry for customizing the ChaasKit UI\n *\n * Note: getPages(), getSidebarPages(), and getTools() cache their results\n * to support React's useSyncExternalStore which requires stable references.\n */\nclass ClientExtensionRegistry {\n  private pages: Map<string, PageExtension> = new Map();\n  private tools: Map<string, ToolExtension> = new Map();\n  private overrides: Map<string, ComponentOverride> = new Map();\n  private listeners: Set<() => void> = new Set();\n\n  // Cached arrays for useSyncExternalStore compatibility\n  // These are only updated when the underlying data changes\n  private cachedPages: PageExtension[] = [];\n  private cachedSidebarPages: PageExtension[] = [];\n  private cachedTools: ToolExtension[] = [];\n\n  /**\n   * Register a custom page\n   */\n  registerPage(page: PageExtension): void {\n    this.pages.set(page.id, page);\n    this.invalidateCaches();\n    this.notifyListeners();\n  }\n\n  /**\n   * Unregister a custom page\n   */\n  unregisterPage(id: string): boolean {\n    const result = this.pages.delete(id);\n    if (result) {\n      this.invalidateCaches();\n      this.notifyListeners();\n    }\n    return result;\n  }\n\n  /**\n   * Get all registered pages\n   * Returns a cached array for useSyncExternalStore compatibility\n   */\n  getPages(): PageExtension[] {\n    return this.cachedPages;\n  }\n\n  /**\n   * Get pages that should appear in the sidebar\n   * Returns a cached array for useSyncExternalStore compatibility\n   */\n  getSidebarPages(): PageExtension[] {\n    return this.cachedSidebarPages;\n  }\n\n  /**\n   * Register a custom tool renderer\n   */\n  registerTool(tool: ToolExtension): void {\n    this.tools.set(tool.name, tool);\n    this.invalidateCaches();\n    this.notifyListeners();\n  }\n\n  /**\n   * Unregister a tool renderer\n   */\n  unregisterTool(name: string): boolean {\n    const result = this.tools.delete(name);\n    if (result) {\n      this.invalidateCaches();\n      this.notifyListeners();\n    }\n    return result;\n  }\n\n  /**\n   * Get all registered tools\n   * Returns a cached array for useSyncExternalStore compatibility\n   */\n  getTools(): ToolExtension[] {\n    return this.cachedTools;\n  }\n\n  /**\n   * Get a specific tool by name\n   */\n  getTool(name: string): ToolExtension | undefined {\n    return this.tools.get(name);\n  }\n\n  /**\n   * Register a component override\n   */\n  registerOverride(override: ComponentOverride): void {\n    this.overrides.set(override.slot, override);\n    this.notifyListeners();\n  }\n\n  /**\n   * Get a component override for a slot\n   */\n  getOverride(slot: string): ComponentOverride | undefined {\n    return this.overrides.get(slot);\n  }\n\n  /**\n   * Subscribe to registry changes\n   */\n  subscribe(listener: () => void): () => void {\n    this.listeners.add(listener);\n    return () => this.listeners.delete(listener);\n  }\n\n  private invalidateCaches(): void {\n    this.cachedPages = Array.from(this.pages.values());\n    this.cachedSidebarPages = this.cachedPages.filter(p => p.showInSidebar);\n    this.cachedTools = Array.from(this.tools.values());\n  }\n\n  private notifyListeners(): void {\n    this.listeners.forEach(listener => listener());\n  }\n\n  /**\n   * Clear all registered extensions\n   */\n  clear(): void {\n    this.pages.clear();\n    this.tools.clear();\n    this.overrides.clear();\n    this.invalidateCaches();\n    this.notifyListeners();\n  }\n}\n\n// Singleton instance\nexport const clientRegistry = new ClientExtensionRegistry();\n\n// Export for use in user extensions\nexport default clientRegistry;\n","import { useSyncExternalStore, useCallback } from 'react';\nimport { clientRegistry, type PageExtension, type ToolExtension, type ComponentOverride } from './registry';\n\n/**\n * Hook to access extension pages with automatic updates\n */\nexport function useExtensionPages(): PageExtension[] {\n  const getSnapshot = useCallback(() => clientRegistry.getPages(), []);\n  const subscribe = useCallback((callback: () => void) => clientRegistry.subscribe(callback), []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to access sidebar pages with automatic updates\n */\nexport function useSidebarPages(): PageExtension[] {\n  const getSnapshot = useCallback(() => clientRegistry.getSidebarPages(), []);\n  const subscribe = useCallback((callback: () => void) => clientRegistry.subscribe(callback), []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to access extension tools with automatic updates\n */\nexport function useExtensionTools(): ToolExtension[] {\n  const getSnapshot = useCallback(() => clientRegistry.getTools(), []);\n  const subscribe = useCallback((callback: () => void) => clientRegistry.subscribe(callback), []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to get a specific tool renderer\n */\nexport function useToolRenderer(toolName: string): ToolExtension | undefined {\n  const getSnapshot = useCallback(() => clientRegistry.getTool(toolName), [toolName]);\n  const subscribe = useCallback((callback: () => void) => clientRegistry.subscribe(callback), []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to get a component override\n */\nexport function useComponentOverride(slot: string): ComponentOverride | undefined {\n  const getSnapshot = useCallback(() => clientRegistry.getOverride(slot), [slot]);\n  const subscribe = useCallback((callback: () => void) => clientRegistry.subscribe(callback), []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chaaskit/client",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "React frontend client for ChaasKit AI chat applications",
   "license": "MIT",
   "author": "Matt Ferrante <@ferrants>",
@@ -13,7 +13,15 @@
   "bugs": {
     "url": "https://github.com/ferrants/chaaskit/issues"
   },
-  "keywords": ["chaaskit", "ai", "chat", "saas", "client", "react", "vite"],
+  "keywords": [
+    "chaaskit",
+    "ai",
+    "chat",
+    "saas",
+    "client",
+    "react",
+    "vite"
+  ],
   "type": "module",
   "exports": {
     ".": {
@@ -52,16 +60,8 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "dev": "vite --host",
-    "build": "tsc && vite build --config vite.config.lib.ts",
-    "build:lib": "vite build --config vite.config.lib.ts",
-    "preview": "vite preview",
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf dist"
-  },
   "dependencies": {
-    "@chaaskit/shared": "^0.1.1",
+    "@chaaskit/shared": "^0.1.2",
     "lucide-react": "^0.321.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -85,5 +85,13 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^7.0.0"
+  },
+  "scripts": {
+    "dev": "vite --host",
+    "build": "tsc && vite build --config vite.config.lib.ts",
+    "build:lib": "vite build --config vite.config.lib.ts",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
   }
-}
+}

package/src/components/MessageItem.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Copy, Check, RefreshCw, ThumbsUp, ThumbsDown, User, Bot, GitBranch } from 'lucide-react';
 import { useNavigate } from 'react-router';
 import type { Message } from '@chaaskit/shared';
@@ -6,6 +6,7 @@ import { useChatStore } from '../stores/chatStore';
 import { useTheme } from '../contexts/ThemeContext';
 import { useConfig } from '../contexts/ConfigContext';
 import { useAppPath } from '../hooks/useAppPath';
+import { useExtensionTools } from '../extensions/useExtensions';
 import MarkdownRenderer from './content/MarkdownRenderer';
 import ToolCallDisplay, { UIResourceWidget } from './ToolCallDisplay';
 import BranchModal from './BranchModal';
@@ -27,6 +28,12 @@ export default function MessageItem({ message, isStreaming, messageIndex = 0, pr
   const config = useConfig();
   const navigate = useNavigate();
   const appPath = useAppPath();
+  const extensionTools = useExtensionTools();
+  const toolRendererMap = useMemo(() => {
+    const map = new Map<string, typeof extensionTools[number]>();
+    extensionTools.forEach((tool) => map.set(tool.name, tool));
+    return map;
+  }, [extensionTools]);
 
   const isUser = message.role === 'user';
   const showToolCalls = config.mcp?.showToolCalls !== false;
@@ -88,9 +95,22 @@ export default function MessageItem({ message, isStreaming, messageIndex = 0, pr
     toolResult: message.toolResults?.find((r) => r.toolCallId === toolCall.id),
   })) || [];
 
+  const renderedToolCalls = toolCallsWithResults
+    .filter(({ toolCall, toolResult }) =>
+      toolCall.serverId === 'native' &&
+      !!toolResult &&
+      !!toolRendererMap.get(toolCall.toolName)?.resultRenderer
+    )
+    .map(({ toolCall, toolResult }) => {
+      const renderer = toolRendererMap.get(toolCall.toolName)!.resultRenderer!;
+      return { toolCall, toolResult: toolResult!, Renderer: renderer };
+    });
+
+  const renderedToolCallIds = new Set(renderedToolCalls.map((entry) => entry.toolCall.id));
+
   // Check if any tool has a UI resource to render
   const uiResources = toolCallsWithResults
-    .filter((tc) => tc.toolResult?.uiResource?.text)
+    .filter((tc) => tc.toolResult?.uiResource?.text && !renderedToolCallIds.has(tc.toolCall.id))
     .map((tc) => tc.toolResult!.uiResource!);
 
   // Debug logging
@@ -188,7 +208,18 @@ export default function MessageItem({ message, isStreaming, messageIndex = 0, pr
         </div>
       )}
 
-      {/* 2. UI Resource Widgets (outside bubble, full width) */}
+      {/* 2. Tool Renderers (native tools) */}
+      {renderedToolCalls.length > 0 && (
+        <div className="space-y-3">
+          {renderedToolCalls.map(({ toolCall, toolResult, Renderer }) => (
+            <div key={toolCall.id} className="rounded-lg border border-border bg-background-secondary/40 p-3">
+              <Renderer toolCall={toolCall} toolResult={toolResult} />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* 3. UI Resource Widgets (outside bubble, full width) */}
       {uiResources.length > 0 && (
         <div className="space-y-3">
           {uiResources.map((uiResource, index) => (
@@ -197,7 +228,7 @@ export default function MessageItem({ message, isStreaming, messageIndex = 0, pr
         </div>
       )}
 
-      {/* 3. Text Response Bubble (with avatar) */}
+      {/* 4. Text Response Bubble (with avatar) */}
       {(message.content || isStreaming) && (
         <div className="group flex gap-3">
           {/* Avatar */}