@alfakit/react 0.1.2 → 0.1.6

package/src/layouts/panel-layouts.ts

@@ -0,0 +1,17 @@
+import type { AnyComponent } from '../context'
+import { AppLayout } from './app-layout'
+import { AuthLayout } from './auth-layout'
+import { BlankLayout } from './blank-layout'
+import { FullscreenLayout } from './fullscreen-layout'
+
+/**
+ * The panel's own layouts (sidebar or top navigation, auth card, blank, fullscreen), which
+ * `createAlfakit()` registers up front. Starter kit pages render in the host's layout and
+ * never import these: `PageShell` loads one on demand if such a page asks for it.
+ */
+export const panelLayouts: Record<string, AnyComponent> = {
+  'layout:app': AppLayout,
+  'layout:auth': AuthLayout,
+  'layout:blank': BlankLayout,
+  'layout:fullscreen': FullscreenLayout,
+}

package/src/layouts/top-nav-layout.tsx

@@ -10,8 +10,8 @@ import { Link } from '@inertiajs/react'
 import { ChevronDownIcon, MenuIcon } from 'lucide-react'
 import { createElement, useState, type ReactNode } from 'react'
 import { NotificationsMenu } from '../components/notifications/notifications-menu'
-import { Brand } from '../components/panel/app-sidebar'
 import { BottomNav } from '../components/panel/bottom-nav'
+import { Brand } from '../components/panel/brand'
 import { DebugPanelSlot } from '../components/panel/debug-panel-slot'
 import { GlobalSearch } from '../components/panel/global-search'
 import { TopbarLocaleSwitcher } from '../components/panel/locale-switcher'
@@ -34,7 +34,7 @@ import { extraProps } from '../lib/attributes'
 import { Icon } from '../lib/icons'
 import { NewTabHint } from '../lib/new-tab-hint'
 import { cn } from '../lib/utils'
-import { MAX_WIDTHS } from './app-layout'
+import { MAX_WIDTHS } from './max-widths'
 
 export interface TopNavLayoutProps {
   children: ReactNode

package/src/pages/page.tsx

@@ -47,11 +47,15 @@ import { DataTable } from '../components/table/table-block'
 import { Badge } from '../components/ui/badge'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs'
 import { WidgetGrid } from '../components/widgets/widgets-block'
-import { useActionRunner, useAlfakit, useAlfakitProps, usePanel, useT } from '../context'
-import { AppLayout } from '../layouts/app-layout'
-import { AuthLayout } from '../layouts/auth-layout'
+import {
+  useActionRunner,
+  useAlfakit,
+  useAlfakitProps,
+  usePanel,
+  useT,
+  type AnyComponent,
+} from '../context'
 import { BlankLayout } from '../layouts/blank-layout'
-import { FullscreenLayout } from '../layouts/fullscreen-layout'
 import { badgeColorClasses, colorClass } from '../lib/colors'
 import { Icon } from '../lib/icons'
 import { cn } from '../lib/utils'
@@ -138,6 +142,15 @@ export function useBodyAttributes(attributes: Record<string, string> | undefined
   )
 }
 
+/**
+ * The registered layout: `createAlfakit()` registers the panel's (`panelLayouts`), the starter
+ * kit its content layout. Without one the page renders bare: importing the panel layouts here
+ * would put the sidebar and top bar in every starter kit page.
+ */
+function layout(registry: { resolve(key: string): AnyComponent | undefined }, key: string) {
+  return registry.resolve(key) ?? BlankLayout
+}
+
 export function PageShell({ page, children }: { page: PageSchema; children: ReactNode }) {
   const { registry } = useAlfakit()
 
@@ -146,26 +159,22 @@ export function PageShell({ page, children }: { page: PageSchema; children: Reac
   // Each layout can be replaced: createAlfakit({ components: { 'layout:app': MyLayout } }).
   if (page.layout === 'auth') {
     return createElement(
-      registry.resolve('layout:auth') ?? AuthLayout,
+      layout(registry, 'layout:auth'),
       { heading: page.heading ?? page.title, subheading: page.subheading, page },
       children,
     )
   }
 
   if (page.layout === 'blank') {
-    return createElement(registry.resolve('layout:blank') ?? BlankLayout, { page }, children)
+    return createElement(layout(registry, 'layout:blank'), { page }, children)
   }
 
   if (page.layout === 'fullscreen') {
-    return createElement(
-      registry.resolve('layout:fullscreen') ?? FullscreenLayout,
-      { page },
-      children,
-    )
+    return createElement(layout(registry, 'layout:fullscreen'), { page }, children)
   }
 
   return createElement(
-    registry.resolve('layout:app') ?? AppLayout,
+    layout(registry, 'layout:app'),
     { breadcrumbs: page.breadcrumbs, maxContentWidth: page.maxContentWidth, page },
     <>
       {/* `?` overlay, `/`, `g d` and panel command shortcuts (`keyboardShortcuts()`). */}

package/src/standalone/alfakit-component.tsx

@@ -80,16 +80,25 @@ export function AlfakitComponent({
   const context = useMemo<AlfakitContextValue>(() => {
     const poll = (target: string, interval: string | number | null | undefined) =>
       state.poll(target, interval)
+    const refresh = (targets: string[]) => state.refresh(targets)
 
     if (parent) {
-      return { ...parent, registry: createStandaloneRegistry(components, parent.registry), poll }
+      return {
+        ...parent,
+        registry: createStandaloneRegistry(components, parent.registry),
+        poll,
+        refresh,
+      }
     }
 
-    return createStandaloneContext(
-      { action: component.endpoints.action, modal: component.endpoints.modal },
-      components,
-      poll,
-    )
+    return {
+      ...createStandaloneContext(
+        { action: component.endpoints.action, modal: component.endpoints.modal },
+        components,
+        poll,
+      ),
+      refresh,
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [parent, state, overrideKeys])
 
@@ -122,7 +131,9 @@ export function AlfakitComponent({
   useEffect(() => registerStandaloneProp(propName ?? null), [propName])
 
   useEffect(() => {
-    void state.loadLazy()
+    void state.loadLazy(component)
+    // The token identifies a new payload.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state, component.token])
 
   // Toasts: use the layout's <AlfakitToaster /> when there is one, else the first component

package/src/starter-kit/dashboard-widgets.tsx

@@ -0,0 +1,78 @@
+import {
+  standaloneWidgetCount,
+  starterKitDashboardWidgets,
+  type StandaloneComponentSchema,
+} from '@alfakit/core'
+import { usePage } from '@inertiajs/react'
+import type { ReactNode } from 'react'
+import type { AnyComponent } from '../context'
+import { lazyComponent } from '../lib/lazy'
+import { cn } from '../lib/utils'
+
+/** Props of `<AlfakitWidgets>`. */
+export interface AlfakitWidgetsProps {
+  /** The `starterKit()` panel whose widgets to show (the first one by default). */
+  panel?: string
+  /** Frontend components of custom widgets (`{ RevenueWidget }`), as for `<AlfakitComponent>`. */
+  components?: Record<string, AnyComponent>
+  className?: string
+  /** Rendered instead when there are no widgets to show. */
+  children?: ReactNode
+}
+
+interface LoadedProps {
+  component: StandaloneComponentSchema
+  components?: Record<string, AnyComponent>
+  className?: string
+}
+
+const LoadedWidgets = lazyComponent<LoadedProps>(
+  () => import('../standalone/alfakit-component').then((module) => module.AlfakitComponent),
+  (props) => <WidgetsPlaceholder {...props} />,
+)
+
+/** Widget-sized boxes until the widgets' code has loaded (also during SSR). */
+function WidgetsPlaceholder({ component, className }: LoadedProps) {
+  const count = standaloneWidgetCount(component)
+
+  return (
+    <div
+      data-slot="starter-kit-widgets-placeholder"
+      aria-busy="true"
+      className={cn('grid auto-rows-min gap-4 md:grid-cols-2', className)}
+    >
+      {Array.from({ length: Math.max(count, 1) }, (_, index) => (
+        <div key={index} aria-hidden="true" className="bg-muted h-28 animate-pulse rounded-xl" />
+      ))}
+    </div>
+  )
+}
+
+/**
+ * The dashboard widgets of a `starterKit()` panel on the host's own dashboard. Reads the
+ * `alfakitWidgets` prop (shared on the panel's `starterKitDashboard()` pages only, the
+ * starter kit's `/dashboard` by default) and renders the widgets with the host's theme, as
+ * `<AlfakitComponent>` renders standalone widgets: lazy widgets, polling and table widget
+ * actions go through the panel's endpoints. Its code loads in the browser; the server
+ * render and hydration show placeholders. Renders `children` (the kit's placeholder boxes)
+ * when there are no widgets to show: other pages, guests, users who may not open the panel.
+ *
+ * ```tsx
+ * import { AlfakitWidgets } from '@alfakit/react'
+ *
+ * <AlfakitWidgets>
+ *   <MyEmptyState />
+ * </AlfakitWidgets>
+ * ```
+ */
+export function AlfakitWidgets({ panel, components, className, children }: AlfakitWidgetsProps) {
+  const component = starterKitDashboardWidgets(usePage().props, panel)
+
+  if (!component) return <>{children}</>
+
+  return (
+    <div data-slot="starter-kit-widgets">
+      <LoadedWidgets component={component} components={components} className={className} />
+    </div>
+  )
+}

package/src/starter-kit/impersonation-banner.tsx

@@ -0,0 +1,48 @@
+import type { ImpersonationSchema } from '@alfakit/core'
+import { useEffect, useState, useSyncExternalStore } from 'react'
+import { ImpersonationBanner } from '../components/panel/impersonation-banner'
+
+// The header components appear in both header layouts and next to each other: the first
+// one mounted shows the banner, the others render nothing.
+let owner: symbol | null = null
+const listeners = new Set<() => void>()
+
+function setOwner(next: symbol | null): void {
+  owner = next
+  listeners.forEach((listener) => listener())
+}
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener)
+
+  return () => listeners.delete(listener)
+}
+
+/**
+ * The impersonation banner (who you are signed in as, **Leave**) on the host's own pages,
+ * rendered by the header components. Loaded only while impersonating; AlfaKit's pages
+ * render their own (`AlfakitRoot`).
+ */
+export default function StarterKitImpersonationBanner({
+  impersonation,
+}: {
+  impersonation: ImpersonationSchema
+}) {
+  const [id] = useState(() => Symbol('impersonation-banner'))
+  // Claimed once mounted (effects never run on the server), so SSR and hydration skip it.
+  const owns = useSyncExternalStore(
+    subscribe,
+    () => owner === id,
+    () => false,
+  )
+
+  useEffect(() => {
+    if (owner === null) setOwner(id)
+
+    return () => {
+      if (owner === id) setOwner(null)
+    }
+  }, [id])
+
+  return owns ? <ImpersonationBanner impersonation={impersonation} /> : null
+}

package/src/starter-kit/index.ts

@@ -1,3 +1,4 @@
+export { AlfakitWidgets, type AlfakitWidgetsProps } from './dashboard-widgets'
 export { useAlfakitNavigation, type AlfakitNavigation } from './navigation'
 export {
   AlfakitStarterKitRoot,
@@ -7,6 +8,7 @@ export {
   type StarterKitPageOptions,
 } from './starter-kit'
 export {
+  AlfakitCopilot,
   AlfakitNotifications,
   AlfakitSearch,
   AlfakitTenantSwitcher,

package/src/starter-kit/starter-kit.tsx

@@ -8,6 +8,7 @@ import {
   resolveRequestErrorNotification,
   starterKitBreadcrumbsFromProps,
   syncStarterKitPage,
+  usesStarterKitHostLayout,
   type AlfakitOptions,
   type AlfakitPageProps,
   type StarterKitBreadcrumb,
@@ -23,7 +24,11 @@ import {
   type AnyComponent,
 } from '../context'
 import { AlfakitRoot } from '../create-alfakit'
-import { MAX_WIDTHS, type AppLayoutProps } from '../layouts/app-layout'
+import type { AppLayoutProps } from '../layouts/app-layout'
+import { AuthLayout } from '../layouts/auth-layout'
+import { lazyPanelLayouts } from '../layouts/lazy-layouts'
+import { MAX_WIDTHS } from '../layouts/max-widths'
+import { discoverComponents } from '../lib/discovery'
 import { preloadIcons } from '../lib/icons'
 import { cn } from '../lib/utils'
 import { AlfakitPage } from '../pages/page'
@@ -45,6 +50,12 @@ export interface StarterKitPageOptions extends Pick<
    * `null` renders the pages without a host layout.
    */
   layout?: StarterKitLayout | null
+  /**
+   * Auto-registered custom components, as for `createAlfakit({ discover })`: pass
+   * `import.meta.glob('../../alfakit/{fields,columns,entries,widgets,pages,components,blocks}/**\/*.tsx')`
+   * from `resources/js/pages/Alfakit/Page.tsx` and every file there registers under its name.
+   */
+  discover?: AlfakitOptions<AnyComponent>['discover']
 }
 
 /**
@@ -78,14 +89,21 @@ export function StarterKitContentLayout({ children, maxContentWidth }: AppLayout
 let browserContext: AlfakitContextValue | null = null
 
 function createStarterKitContext(options: StarterKitPageOptions): AlfakitContextValue {
+  // The host's layout replaces the panel's. Auth pages (invitations, tenant registration)
+  // keep the panel's card; the fullscreen layout loads on demand.
+  // Auto-registered files sit between the built-ins and the explicit `components` / `pages`.
+  const discovered = discoverComponents(options.discover)
   const registry = createDefaultRegistry()
+    .registerMany(lazyPanelLayouts)
+    .register('layout:auth', AuthLayout)
     .register('layout:app', StarterKitContentLayout)
+    .registerMany(discovered.components)
     .registerMany(options.components ?? {})
   const translator = new Translator()
 
   return {
     registry,
-    pages: { 'Alfakit/Page': AlfakitPage, ...options.pages },
+    pages: { 'Alfakit/Page': AlfakitPage, ...discovered.pages, ...options.pages },
     translator,
     actions: new ActionRunner({
       endpoints: { action: '', modal: '' },
@@ -155,7 +173,16 @@ export function AlfakitStarterKitRoot({
 
   return (
     <AlfakitProvider value={context}>
-      <AlfakitRoot toasterId={STARTER_KIT_TOASTER_ID}>{children}</AlfakitRoot>
+      {/* The reading direction and language of Alfakit's content only: the host layout around
+          it (sidebar, header) and the app's own pages keep the document's. */}
+      <div
+        data-slot="starter-kit-root"
+        dir={panel?.localization?.direction ?? 'ltr'}
+        lang={panel?.localization?.tag}
+        className="contents"
+      >
+        <AlfakitRoot toasterId={STARTER_KIT_TOASTER_ID}>{children}</AlfakitRoot>
+      </div>
     </AlfakitProvider>
   )
 }
@@ -186,7 +213,7 @@ export function createStarterKitPage(options: StarterKitPageOptions = {}) {
 
   // A layout callback: the host layout (with the page's breadcrumbs), then Alfakit's root.
   AlfakitStarterKitPage.layout = (props: Record<string, unknown>) => [
-    ...(options.layout
+    ...(options.layout && usesStarterKitHostLayout(props)
       ? [[options.layout, { breadcrumbs: starterKitBreadcrumbsFromProps(props) }] as const]
       : []),
     [AlfakitStarterKitRoot, { options }] as const,

package/src/starter-kit/widgets-loaded.tsx

@@ -7,8 +7,10 @@ import {
   loadStarterKitPanel,
   loadedStarterKitPanel,
   openRequestedStarterKitSearch,
+  starterKitCopilot,
   starterKitWidgetsPage,
   starterKitWidgetsPanel,
+  takeRequestedStarterKitCopilot,
   tenantNameText,
   type PanelSchema,
   type StarterKitWidgets,
@@ -17,6 +19,7 @@ import { router, usePage } from '@inertiajs/react'
 import { ChevronsUpDownIcon, PlusIcon } from 'lucide-react'
 import { Direction } from 'radix-ui'
 import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { AiCopilot } from '../components/ai/copilot'
 import { NotificationsMenu } from '../components/notifications/notifications-menu'
 import { RealtimeNotifications } from '../components/notifications/realtime-notifications'
 import { GlobalSearch } from '../components/panel/global-search'
@@ -41,6 +44,7 @@ import {
 } from '../context'
 import { Icon } from '../lib/icons'
 import {
+  CopilotTrigger,
   NotificationsTrigger,
   SearchTrigger,
   TenantSwitcherTrigger,
@@ -162,6 +166,24 @@ export function LoadedTenantSwitcher({ source }: WidgetProps) {
   )
 }
 
+/** The AI copilot (the panel pages' `topbar.end` slot component). */
+export function LoadedCopilot({ source }: WidgetProps) {
+  const panel = useWidgetsPanel(source)
+  // A click or the key bindings before the copilot loaded open it at once.
+  const [autoOpen] = useState(() => takeRequestedStarterKitCopilot())
+  const component = useMemo(() => (panel ? starterKitCopilot(panel) : null), [panel])
+
+  if (!panel) return <CopilotTrigger source={source} />
+
+  if (!component) return null
+
+  return (
+    <WidgetShell panel={panel}>
+      <AiCopilot component={component} autoOpen={autoOpen || takeRequestedStarterKitCopilot()} />
+    </WidgetShell>
+  )
+}
+
 /** The user's tenants on a page outside the panel (no current tenant). */
 function TenantChooser({ panel }: { panel: PanelSchema }) {
   const t = useT()

package/src/starter-kit/widgets-triggers.tsx

@@ -1,12 +1,14 @@
 import {
   formatKeyBinding,
   initials,
+  registerStarterKitCopilotShortcut,
   registerStarterKitSearchShortcut,
+  requestStarterKitCopilot,
   requestStarterKitSearch,
   tenantNameText,
   type StarterKitWidgets,
 } from '@alfakit/core'
-import { BellIcon, ChevronsUpDownIcon, SearchIcon } from 'lucide-react'
+import { BellIcon, ChevronsUpDownIcon, SearchIcon, SparklesIcon } from 'lucide-react'
 import { useEffect } from 'react'
 import { useHydrated } from '../hooks/use-hydrated'
 
@@ -101,3 +103,36 @@ export function TenantSwitcherTrigger({ source }: WidgetProps) {
     </button>
   )
 }
+
+/**
+ * The AI copilot's button until its code has loaded: the same look, and it remembers a
+ * click or its key bindings (`mod+j`), so the copilot opens once loaded.
+ */
+export function CopilotTrigger({ source, onLoad }: WidgetProps & { onLoad?: () => void }) {
+  const copilot = source.widgets.copilot
+  const keys = JSON.stringify(copilot?.keyBindings ?? [])
+  const label = copilot?.label ?? ''
+  // `onLoad` is a stable function (it starts loading the copilot's code).
+  useEffect(
+    () => registerStarterKitCopilotShortcut(JSON.parse(keys) as string[], label, () => onLoad?.()),
+    [keys, label, onLoad],
+  )
+
+  return (
+    <button
+      type="button"
+      data-slot="ai-copilot-trigger"
+      aria-label={label}
+      aria-haspopup="dialog"
+      title={label}
+      className="hover:bg-accent hover:text-accent-foreground inline-flex size-9 items-center justify-center rounded-md"
+      onPointerEnter={() => onLoad?.()}
+      onClick={() => {
+        requestStarterKitCopilot()
+        onLoad?.()
+      }}
+    >
+      <SparklesIcon className="size-4" aria-hidden="true" />
+    </button>
+  )
+}

package/src/starter-kit/widgets.tsx

@@ -1,7 +1,14 @@
-import { starterKitWidgets, type StarterKitWidgets } from '@alfakit/core'
+import {
+  isAlfakitPage,
+  starterKitWidgets,
+  type StarterKitWidgets,
+  type StarterKitWidgetsSchema,
+} from '@alfakit/core'
 import { usePage } from '@inertiajs/react'
+import { lazy, Suspense } from 'react'
 import { lazyComponent } from '../lib/lazy'
 import {
+  CopilotTrigger,
   NotificationsTrigger,
   SearchTrigger,
   TenantSwitcherTrigger,
@@ -16,14 +23,15 @@ import {
  * (in the browser, never during SSR).
  *
  * ```tsx
- * import { AlfakitNotifications, AlfakitSearch } from '@alfakit/react'
+ * import { AlfakitCopilot, AlfakitNotifications, AlfakitSearch } from '@alfakit/react'
  *
  * <AlfakitSearch />
  * <AlfakitNotifications />
+ * <AlfakitCopilot />
  * ```
  */
 export interface AlfakitHeaderWidgetProps {
-  /** The `starterKit()` panel to use (the first one by default). */
+  /** The `starterKit()` panel to use (by default the open AlfaKit page's panel, else the first one that has this component). */
   panel?: string
 }
 
@@ -48,8 +56,37 @@ const LoadedTenantSwitcher = lazyComponent<WidgetProps>(
   (props) => <TenantSwitcherTrigger {...props} />,
 )
 
-function useWidgets(panelId: string | undefined): StarterKitWidgets | null {
-  return starterKitWidgets(usePage().props, panelId)
+const LoadedCopilot = lazyComponent<WidgetProps>(
+  () => load().then((module) => module.LoadedCopilot),
+  (props) => <CopilotTrigger {...props} onLoad={preloadCopilot} />,
+)
+
+function preloadCopilot() {
+  void LoadedCopilot.preload()
+}
+
+// Only needed while impersonating: its code loads then (and never on AlfaKit pages).
+const LazyImpersonationBanner = lazy(() => import('./impersonation-banner'))
+
+/** While impersonating, the first header component shows the banner on host pages. */
+function StarterKitImpersonationBanner({ source }: { source: StarterKitWidgets | null }) {
+  const props = usePage().props
+  const impersonation = source?.widgets.impersonation
+
+  if (!impersonation || isAlfakitPage(props)) return null
+
+  return (
+    <Suspense fallback={null}>
+      <LazyImpersonationBanner impersonation={impersonation} />
+    </Suspense>
+  )
+}
+
+function useWidgets(
+  panelId: string | undefined,
+  part: keyof StarterKitWidgetsSchema,
+): StarterKitWidgets | null {
+  return starterKitWidgets(usePage().props, panelId, part)
 }
 
 /**
@@ -58,14 +95,19 @@ function useWidgets(panelId: string | undefined): StarterKitWidgets | null {
  * nothing for guests or without global search and a command palette.
  */
 export function AlfakitSearch({ panel }: AlfakitHeaderWidgetProps = {}) {
-  const source = useWidgets(panel)
+  const source = useWidgets(panel, 'search')
 
-  if (!source?.widgets.search) return null
+  const banner = <StarterKitImpersonationBanner source={source} />
+
+  if (!source?.widgets.search) return banner
 
   return (
-    <span data-slot="starter-kit-search" className="inline-flex">
-      <LoadedSearch source={source} />
-    </span>
+    <>
+      {banner}
+      <span data-slot="starter-kit-search" className="inline-flex">
+        <LoadedSearch source={source} />
+      </span>
+    </>
   )
 }
 
@@ -75,14 +117,19 @@ export function AlfakitSearch({ panel }: AlfakitHeaderWidgetProps = {}) {
  * notifications.
  */
 export function AlfakitNotifications({ panel }: AlfakitHeaderWidgetProps = {}) {
-  const source = useWidgets(panel)
+  const source = useWidgets(panel, 'notifications')
+
+  const banner = <StarterKitImpersonationBanner source={source} />
 
-  if (!source?.widgets.notifications) return null
+  if (!source?.widgets.notifications) return banner
 
   return (
-    <span data-slot="starter-kit-notifications" className="inline-flex">
-      <LoadedNotifications source={source} />
-    </span>
+    <>
+      {banner}
+      <span data-slot="starter-kit-notifications" className="inline-flex">
+        <LoadedNotifications source={source} />
+      </span>
+    </>
   )
 }
 
@@ -91,13 +138,41 @@ export function AlfakitNotifications({ panel }: AlfakitHeaderWidgetProps = {}) {
  * to choose one on the host's own pages. Renders nothing for guests or other panels.
  */
 export function AlfakitTenantSwitcher({ panel }: AlfakitHeaderWidgetProps = {}) {
-  const source = useWidgets(panel)
+  const source = useWidgets(panel, 'tenancy')
+
+  const banner = <StarterKitImpersonationBanner source={source} />
+
+  if (!source?.widgets.tenancy) return banner
+
+  return (
+    <>
+      {banner}
+      <span data-slot="starter-kit-tenant-switcher" className="inline-flex">
+        <LoadedTenantSwitcher source={source} />
+      </span>
+    </>
+  )
+}
+
+/**
+ * The AI copilot of alfasix/alfakit-ai (`AiPlugin::copilot()`): its button and chat
+ * slide-over, opened with its key bindings (`mod+j`) from any page. Renders nothing for
+ * guests, without the plugin's copilot, for users who may not use it and (tenancy panels)
+ * outside a tenant.
+ */
+export function AlfakitCopilot({ panel }: AlfakitHeaderWidgetProps = {}) {
+  const source = useWidgets(panel, 'copilot')
+
+  const banner = <StarterKitImpersonationBanner source={source} />
 
-  if (!source?.widgets.tenancy) return null
+  if (!source?.widgets.copilot) return banner
 
   return (
-    <span data-slot="starter-kit-tenant-switcher" className="inline-flex">
-      <LoadedTenantSwitcher source={source} />
-    </span>
+    <>
+      {banner}
+      <span data-slot="starter-kit-copilot" className="inline-flex">
+        <LoadedCopilot source={source} />
+      </span>
+    </>
   )
 }