@intelligo-dev/cli 1.0.0-beta.14 → 1.0.0-beta.15

package/src/commands/sync.ts

@@ -207,7 +207,16 @@ export function syncCheck(
 ): SyncReport {
   const { closure, files } = shippedFiles(context, items);
   const seams = context.requires.seams ?? {};
-  const recorded = readManifest(context.appRoot)?.registry?.files ?? {};
+  const manifest = readManifest(context.appRoot);
+  const recorded = manifest?.registry?.files ?? {};
+  // What the scaffold wrote, by hash: a file it wrote and nobody edited
+  // is the registry's to replace, not someone's work.
+  const scaffolded = new Map(
+    (manifest?.features[SCAFFOLD_FEATURE]?.files ?? []).map((f) => [
+      f.path,
+      f.hash,
+    ])
+  );
 
   const entries: SyncEntry[] = files.map(({ item, target, content }) => {
     const abs = path.join(context.appRoot, target);
@@ -229,7 +238,16 @@ export function syncCheck(
       return { item, path: target, state: "current" };
     }
     const hash = recorded[target];
-    if (hash === undefined) return { item, path: target, state: "differs" };
+    if (hash === undefined) {
+      return {
+        item,
+        path: target,
+        state:
+          scaffolded.get(target) === hashContents(local)
+            ? "outdated"
+            : "differs",
+      };
+    }
     return {
       item,
       path: target,
@@ -395,6 +413,28 @@ function recordSync(
   });
 }
 
+/**
+ * Record `names` as items this app keeps in sync before any is
+ * installed, so a bare `intelligo sync` installs them after an install
+ * that did not run or did not finish.
+ */
+export function recordItems(
+  names: readonly string[],
+  context: Pick<SyncContext, "appRoot" | "requires" | "frameworkVersion">
+): void {
+  const manifest =
+    readManifest(context.appRoot) ?? emptyManifest(context.frameworkVersion);
+  const items = new Set([...(manifest.registry?.items ?? []), ...names]);
+  writeManifest(context.appRoot, {
+    ...manifest,
+    registry: {
+      version: manifest.registry?.version ?? context.frameworkVersion,
+      items: installOrder([...items], context.requires),
+      files: manifest.registry?.files ?? {},
+    },
+  });
+}
+
 export type SyncApplyOptions = {
   force?: boolean;
   log?: (line: string) => void;

package/src/env-files.ts

@@ -2,6 +2,8 @@ import { existsSync, readFileSync } from "node:fs";
 import path from "node:path";
 import { parseEnv } from "node:util";
 
+import { findWorkspaceRoot } from "./registry-items.js";
+
 /**
  * The env files a Next.js app reads, in the order it reads them: an
  * earlier file wins, and a variable already set in the shell wins over
@@ -13,19 +15,38 @@ import { parseEnv } from "node:util";
  */
 export const ENV_FILES = [".env.local", ".env"] as const;
 
+/**
+ * Loads the app's env files into `env`, then — when the app is a member
+ * of a pnpm workspace — the workspace root's, for an app whose
+ * `next.config` falls back to the repository root's `.env`. Precedence,
+ * highest first: the shell, the app's `.env.local`, the app's `.env`,
+ * the root's `.env.local`, the root's `.env`. A variable already set is
+ * never overridden.
+ *
+ * Returns the files it read, relative to `root` (`.env.local`,
+ * `../../.env`).
+ */
 export function loadAppEnv(
   root: string,
   env: NodeJS.ProcessEnv = process.env
 ): string[] {
+  const dirs = [root];
+  const workspaceRoot = findWorkspaceRoot(root);
+  if (workspaceRoot && path.resolve(workspaceRoot) !== path.resolve(root)) {
+    dirs.push(workspaceRoot);
+  }
+
   const loaded: string[] = [];
-  for (const name of ENV_FILES) {
-    const file = path.join(root, name);
-    if (!existsSync(file)) continue;
-    const values = parseEnv(readFileSync(file, "utf8"));
-    for (const [key, value] of Object.entries(values)) {
-      if (env[key] === undefined) env[key] = value;
+  for (const dir of dirs) {
+    for (const name of ENV_FILES) {
+      const file = path.join(dir, name);
+      if (!existsSync(file)) continue;
+      const values = parseEnv(readFileSync(file, "utf8"));
+      for (const [key, value] of Object.entries(values)) {
+        if (env[key] === undefined) env[key] = value;
+      }
+      loaded.push(path.relative(root, file));
     }
-    loaded.push(name);
   }
   return loaded;
 }

package/templates/admin-page/admin-page.tsx.tpl

@@ -1,55 +1,127 @@
 /**
  * The operational console, mounted in your app.
  *
- * The screen itself ships from @intelligo-dev/admin so every deployment
- * shows the same operational truth — a fork could quietly stop showing
- * you unsettled executions. What is generated here is only the mount:
- * the route, the authorization call, and your own page chrome.
+ * The screens ship from @intelligo-dev/admin so every deployment shows
+ * the same operational truth — a fork could quietly stop showing you
+ * unsettled executions. What is generated here is the mount: the route,
+ * the authorization call and the page around the screens. The page is
+ * yours: add your product's own sections after the package's, with the
+ * data your own queries return.
  *
- * Access is gated on PLATFORM_ADMIN_EMAILS, not on a workspace role.
- * Workspace `owner` is per-tenant and every signup has one.
+ * Access is a platform-admin row (`users.role`), seeded from
+ * PLATFORM_ADMIN_EMAILS, not a workspace role: workspace `owner` is
+ * per-tenant and every signup has one. A caller who is not one gets the
+ * app's 404, because "Not authorized" — or a redirect — on a route says
+ * the route exists.
+ *
+ * Each screen reads on its own: one that fails says so, and the rest of
+ * the console still renders.
  */
 
+import { notFound } from "next/navigation";
+import type { ReactNode } from "react";
+
 import {
+  getIntegrationHealth,
   getPlatformOverview,
+  listFailedJobs,
   listUnsettledExecutions,
   listWorkspaces,
+  queryAuditEvents,
   requireAdmin,
 } from "@intelligo-dev/admin";
-import { PlatformOverviewView } from "@intelligo-dev/admin/views";
+import {
+  IntegrationHealthView,
+  OperationsView,
+  PlatformOverviewView,
+} from "@intelligo-dev/admin/views";
 
 import { composeIntelligo } from "@/lib/intelligo";
 
 export const dynamic = "force-dynamic";
 
+/**
+ * The package's screens are unstyled markup; these rules give their
+ * headings, lists and tables the app's type and tokens.
+ */
+const SCREEN =
+  "space-y-4 rounded-xl border border-border bg-card p-6 text-sm text-card-foreground " +
+  "[&_h2]:mb-2 [&_h2]:text-base [&_h2]:font-semibold [&_section]:space-y-2 " +
+  "[&_ul]:list-disc [&_ul]:pl-5 [&_table]:w-full [&_th]:py-1 [&_th]:text-left " +
+  "[&_th]:font-medium [&_th]:text-muted-foreground [&_td]:border-t [&_td]:border-border [&_td]:py-1";
+
+/** A screen whose read failed, in place of the screen. */
+function Unavailable({ what }: { what: string }) {
+  return (
+    <p className="text-muted-foreground">
+      {what} could not be read — see the server log.
+    </p>
+  );
+}
+
+function screen<T>(
+  result: PromiseSettledResult<T>,
+  render: (value: T) => ReactNode,
+  what: string
+) {
+  return (
+    <div className={SCREEN}>
+      {result.status === "fulfilled" ? (
+        render(result.value)
+      ) : (
+        <Unavailable what={what} />
+      )}
+    </div>
+  );
+}
+
 export default async function AdminPage() {
   composeIntelligo();
 
   try {
     await requireAdmin("admin.overview.viewed");
   } catch {
-    return (
-      <main style={{ fontFamily: "system-ui", padding: "2rem" }}>
-        <h1>Admin</h1>
-        <p>Not authorized.</p>
-      </main>
-    );
+    notFound();
   }
 
-  const [overview, workspaces, unsettled] = await Promise.all([
-    getPlatformOverview(),
-    listWorkspaces(20),
-    listUnsettledExecutions(),
+  const [overview, integrations, operations] = await Promise.allSettled([
+    Promise.all([
+      getPlatformOverview(),
+      listWorkspaces(20),
+      listUnsettledExecutions(),
+    ]),
+    getIntegrationHealth(),
+    Promise.all([listFailedJobs(20), queryAuditEvents({ limit: 20 })]),
   ]);
 
   return (
-    <main style={{ fontFamily: "system-ui", padding: "2rem" }}>
-      <h1>Admin</h1>
-      <PlatformOverviewView
-        overview={overview}
-        workspaces={workspaces}
-        unsettled={unsettled}
-      />
+    <main className="mx-auto max-w-5xl space-y-6 bg-background px-4 py-8 text-foreground">
+      <h1 className="text-2xl font-semibold">Admin</h1>
+      {screen(
+        overview,
+        ([platform, workspaces, unsettled]) => (
+          <PlatformOverviewView
+            overview={platform}
+            workspaces={workspaces}
+            unsettled={unsettled}
+          />
+        ),
+        "The platform overview"
+      )}
+      {screen(
+        integrations,
+        (value) => (
+          <IntegrationHealthView integrations={value} />
+        ),
+        "Integration health"
+      )}
+      {screen(
+        operations,
+        ([failedJobs, auditEvents]) => (
+          <OperationsView failedJobs={failedJobs} auditEvents={auditEvents} />
+        ),
+        "Operations"
+      )}
     </main>
   );
 }

package/templates/app-scaffold/gitignore.tpl

@@ -0,0 +1,25 @@
+# dependencies
+node_modules/
+
+# next.js
+.next/
+out/
+next-env.d.ts
+
+# production
+build/
+
+# env files: .env.example is the only one committed
+.env
+.env*.local
+
+# debug
+npm-debug.log*
+pnpm-debug.log*
+
+# misc
+.DS_Store
+*.pem
+*.tsbuildinfo
+.vercel
+coverage/

package/templates/app-scaffold/next.config.mjs.tpl

@@ -1,11 +1,39 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { parseEnv } from "node:util";
+
 import createNextIntlPlugin from "next-intl/plugin";
 
+// Next reads env files from this directory only. When `intelligo create`
+// made this app as a member of a pnpm workspace, the workspace root's
+// .env.local and .env fill in what neither they nor the shell set — the
+// files `intelligo doctor` and `intelligo migrate` read there too. Null
+// for an app outside any workspace.
+const WORKSPACE_ROOT = __WORKSPACE_ROOT__;
+
+if (WORKSPACE_ROOT) {
+  const root = join(fileURLToPath(new URL(".", import.meta.url)), WORKSPACE_ROOT);
+  for (const file of [".env.local", ".env"]) {
+    let content;
+    try {
+      content = readFileSync(join(root, file), "utf8");
+    } catch {
+      continue;
+    }
+    for (const [key, value] of Object.entries(parseEnv(content))) {
+      if (process.env[key] === undefined) process.env[key] = value;
+    }
+  }
+}
+
 const withNextIntl = createNextIntlPlugin("./i18n/request.ts");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  // Intelligo packages ship TypeScript source, so Next compiles them
-  // with your app.
+  // Inside the framework's own workspace these packages resolve to
+  // TypeScript source; from npm they are compiled JavaScript, which this
+  // leaves as it is.
   transpilePackages: [
     "@intelligo-dev/admin",
     "@intelligo-dev/audit",
@@ -14,6 +42,7 @@ const nextConfig = {
     "@intelligo-dev/chat",
     "@intelligo-dev/core",
     "@intelligo-dev/executions",
+    "@intelligo-dev/jobs",
     "@intelligo-dev/next",
   ],
 };

package/templates/app-scaffold/package.json.tpl

@@ -4,9 +4,9 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "next dev --turbopack --port 3000",
+    "dev": "next dev --turbopack",
     "build": "next build",
-    "start": "next start --port 3000",
+    "start": "next start",
     "type-check": "tsc --noEmit",
     "db:generate": "drizzle-kit generate",
     "db:migrate": "intelligo migrate && drizzle-kit migrate",

package/templates/manifest.json

@@ -11,7 +11,7 @@
     "deprecated": "Superseded by the `usage` registry item \u2014 install it with the shadcn CLI from the Intelligo registry instead; it ships a full page, components and thin actions as consumer-owned source."
   },
   "app-scaffold": {
-    "templateVersion": "1.14.0",
+    "templateVersion": "1.15.0",
     "description": "A new application: composition root (run once per server process from instrumentation.ts), plans, an assistant route, a Stripe webhook endpoint, config, a drizzle config for the tables you own, next-intl i18n plumbing, and a registry-consuming shadcn base-nova setup with the intelligo design tokens",
     "files": [
       {
@@ -125,12 +125,30 @@
       {
         "template": "app-scaffold/stripe-webhook-route.ts.tpl",
         "target": "app/api/webhooks/stripe/route.ts"
+      },
+      {
+        "template": "app-scaffold/gitignore.tpl",
+        "target": ".gitignore"
+      }
+    ]
+  },
+  "pnpm-standalone": {
+    "templateVersion": "1.0.0",
+    "description": "pnpm settings for an app that is its own workspace root: dependency build scripts declined, so pnpm 10+ installs without a prompt, and `pnpm add` allowed at the root for the shadcn CLI. `intelligo create` writes it when pnpm installs an app outside any workspace",
+    "files": [
+      {
+        "template": "pnpm-standalone/pnpm-workspace.yaml.tpl",
+        "target": "pnpm-workspace.yaml"
+      },
+      {
+        "template": "pnpm-standalone/npmrc.tpl",
+        "target": ".npmrc"
       }
     ]
   },
   "admin-page": {
-    "templateVersion": "1.1.0",
-    "description": "Mount the Intelligo operational console at /admin",
+    "templateVersion": "1.2.0",
+    "description": "Mount the Intelligo operational console at /admin, styled with the app's tokens, for platform admins only",
     "files": [
       {
         "template": "admin-page/admin-page.tsx.tpl",

package/templates/pnpm-standalone/npmrc.tpl

@@ -0,0 +1,6 @@
+# pnpm 9 reads this setting here; later versions read it from
+# pnpm-workspace.yaml. pnpm-workspace.yaml makes this directory a
+# workspace root, and pnpm refuses a plain `pnpm add` in one unless told
+# it is intended — the shadcn CLI runs exactly that when it installs a
+# registry page.
+ignore-workspace-root-check=true

package/templates/pnpm-standalone/pnpm-workspace.yaml.tpl

@@ -0,0 +1,10 @@
+# This app is its own pnpm workspace root. pnpm 11 stops the install over
+# a dependency build script nobody approved (10 warns); these ship
+# prebuilt binaries, so their scripts are declined.
+packages: []
+allowBuilds:
+  '@parcel/watcher': false
+  '@swc/core': false
+  esbuild: false
+# The shadcn CLI runs a plain `pnpm add` here when it installs a page.
+ignoreWorkspaceRootCheck: true

package/templates/registry/app-shell.json

@@ -24,7 +24,7 @@
   "files": [
     {
       "path": "base/app-shell/layout.tsx",
-      "content": "import { getLocale, getTranslations } from \"next-intl/server\";\n/**\n * The layout for every route under `(app)`. Checks, in order:\n *\n * 1. A session, checked here because middleware only reads the cookie.\n *    None → `/login`.\n * 2. Completed onboarding. Incomplete → `/onboarding`. The onboarding\n *    route is a sibling of `(app)`, so this cannot redirect into itself;\n *    if you nest onboarding under `(app)`, skip this check on that route.\n * 3. An active workspace. `ensureUserWorkspace` creates one if none\n *    exists; what a new workspace starts with is the handler\n *    `lib/intelligo.ts` sets with `setWorkspaceCreatedHandler`.\n */\n\nimport { eq } from \"drizzle-orm\";\nimport { headers } from \"next/headers\";\nimport type { ReactNode } from \"react\";\n\nimport {\n  auth,\n  ensureUserWorkspace,\n  getAuthSession,\n  getWorkspaceContextById,\n} from \"@intelligo-dev/auth\";\nimport { db } from \"@intelligo-dev/core/db\";\nimport { users } from \"@intelligo-dev/core/db/schema\";\n\nimport { AppSidebar } from \"@/components/shell/app-sidebar\";\nimport { PageTransition } from \"@/components/shell/page-transition\";\nimport { ShellHeader } from \"@/components/shell/shell-header\";\nimport { TimeZoneCookie } from \"@/components/shell/time-zone-cookie\";\nimport { AISidebarInset, AISidebarProvider } from \"@/components/ui/ai-sidebar\";\nimport { redirect } from \"@/i18n/navigation\";\nimport { shellConfig } from \"@/lib/shell-config\";\n\nconst SKIP_LINK_CLASS =\n  \"sr-only focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:z-50 focus:rounded-lg focus:border focus:border-ring focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-foreground focus:shadow-md focus:outline-none focus:ring-3 focus:ring-ring/40\";\n\nexport default async function AppLayout({ children }: { children: ReactNode }) {\n  const session = await getAuthSession();\n  if (!session) {\n    redirect({ href: \"/login\", locale: await getLocale() });\n    return null;\n  }\n\n  const [userRecord] = await db\n    .select({ onboardingCompleted: users.onboardingCompleted })\n    .from(users)\n    .where(eq(users.id, session.user.id))\n    .limit(1);\n\n  if (userRecord && !userRecord.onboardingCompleted) {\n    redirect({ href: \"/onboarding\", locale: await getLocale() });\n    return null;\n  }\n\n  const hdrs = await headers();\n  const activeWorkspaceId = await ensureUserWorkspace(session.user, hdrs);\n\n  const [workspaces, workspaceContext] = await Promise.all([\n    auth.api.listOrganizations({ headers: hdrs }).then((orgs) => orgs ?? []),\n    getWorkspaceContextById(activeWorkspaceId),\n  ]);\n\n  if (!workspaceContext) {\n    redirect({ href: \"/login\", locale: await getLocale() });\n    return null;\n  }\n\n  const workspaceList = workspaces.map((org) => ({\n    id: org.id,\n    name: org.name,\n    slug: org.slug,\n    logo: org.logo ?? null,\n  }));\n\n  // The shell is exactly one screen tall and the page region scrolls\n  // inside it. A shell that grows with its page scrolls the window\n  // instead, and a page that pins something to the bottom — the chat\n  // composer — or scrolls its own region — the transcript — has no\n  // height to work in.\n  const SidebarContent = shellConfig.sidebarContent;\n  const t = await getTranslations(\"app-shell\");\n  return (\n    <AISidebarProvider className=\"h-svh min-h-0 overflow-hidden\">\n      {/* The first focusable element: keyboard users jump past the sidebar. */}\n      <a href=\"#main-content\" className={SKIP_LINK_CLASS}>\n        {t(\"skipToContent\")}\n      </a>\n      {/* Renders nothing; tells the server which day it is here. */}\n      <TimeZoneCookie />\n      <AppSidebar\n        workspace={workspaceContext.workspace}\n        workspaces={workspaceList}\n        user={{\n          name: session.user.name,\n          email: session.user.email,\n          image: session.user.image,\n        }}\n      >\n        {SidebarContent ? <SidebarContent /> : null}\n      </AppSidebar>\n      <AISidebarInset\n        id=\"main-content\"\n        tabIndex={-1}\n        className=\"min-h-0 overflow-hidden outline-none\"\n      >\n        <ShellHeader>\n          {shellConfig.headerRight && (\n            <div className=\"ml-auto flex items-center gap-2\">\n              <shellConfig.headerRight />\n            </div>\n          )}\n        </ShellHeader>\n        {shellConfig.bannerTop && <shellConfig.bannerTop />}\n        <PageTransition className=\"min-h-0 flex-1 overflow-y-auto\">\n          {children}\n        </PageTransition>\n      </AISidebarInset>\n    </AISidebarProvider>\n  );\n}\n",
+      "content": "import { getLocale, getTranslations } from \"next-intl/server\";\n/**\n * The layout for every route under `(app)`. Checks, in order:\n *\n * 1. A session, checked here because middleware only reads the cookie.\n *    None → `/login`.\n * 2. Completed onboarding. Incomplete → `shellConfig.onboardingRedirect`\n *    (`/onboarding` unless the seam says otherwise; `false` skips the\n *    check). The onboarding route is a sibling of `(app)`, so this\n *    cannot redirect into itself; if you nest onboarding under `(app)`,\n *    skip this check on that route.\n * 3. An active workspace. `ensureUserWorkspace` creates one if none\n *    exists; what a new workspace starts with is the handler\n *    `lib/intelligo.ts` sets with `setWorkspaceCreatedHandler`.\n */\n\nimport { eq } from \"drizzle-orm\";\nimport { headers } from \"next/headers\";\nimport type { ReactNode } from \"react\";\n\nimport {\n  auth,\n  ensureUserWorkspace,\n  getAuthSession,\n  getWorkspaceContextById,\n} from \"@intelligo-dev/auth\";\nimport { db } from \"@intelligo-dev/core/db\";\nimport { users } from \"@intelligo-dev/core/db/schema\";\n\nimport { AppSidebar } from \"@/components/shell/app-sidebar\";\nimport { PageTransition } from \"@/components/shell/page-transition\";\nimport { ShellHeader } from \"@/components/shell/shell-header\";\nimport { TimeZoneCookie } from \"@/components/shell/time-zone-cookie\";\nimport { AISidebarInset, AISidebarProvider } from \"@/components/ui/ai-sidebar\";\nimport { redirect } from \"@/i18n/navigation\";\nimport { shellConfig } from \"@/lib/shell-config\";\n\nconst SKIP_LINK_CLASS =\n  \"sr-only focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:z-50 focus:rounded-lg focus:border focus:border-ring focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-foreground focus:shadow-md focus:outline-none focus:ring-3 focus:ring-ring/40\";\n\nexport default async function AppLayout({ children }: { children: ReactNode }) {\n  const session = await getAuthSession();\n  if (!session) {\n    redirect({ href: \"/login\", locale: await getLocale() });\n    return null;\n  }\n\n  // Read with `in`: a seam written before the field existed declares a\n  // ShellConfig without it, and still compiles.\n  const onboarding =\n    \"onboardingRedirect\" in shellConfig\n      ? shellConfig.onboardingRedirect\n      : undefined;\n  if (onboarding !== false) {\n    const [userRecord] = await db\n      .select({ onboardingCompleted: users.onboardingCompleted })\n      .from(users)\n      .where(eq(users.id, session.user.id))\n      .limit(1);\n\n    if (userRecord && !userRecord.onboardingCompleted) {\n      redirect({\n        href: typeof onboarding === \"string\" ? onboarding : \"/onboarding\",\n        locale: await getLocale(),\n      });\n      return null;\n    }\n  }\n\n  const hdrs = await headers();\n  const activeWorkspaceId = await ensureUserWorkspace(session.user, hdrs);\n\n  const [workspaces, workspaceContext] = await Promise.all([\n    auth.api.listOrganizations({ headers: hdrs }).then((orgs) => orgs ?? []),\n    getWorkspaceContextById(activeWorkspaceId),\n  ]);\n\n  if (!workspaceContext) {\n    redirect({ href: \"/login\", locale: await getLocale() });\n    return null;\n  }\n\n  const workspaceList = workspaces.map((org) => ({\n    id: org.id,\n    name: org.name,\n    slug: org.slug,\n    logo: org.logo ?? null,\n  }));\n\n  // The shell is exactly one screen tall and the page region scrolls\n  // inside it. A shell that grows with its page scrolls the window\n  // instead, and a page that pins something to the bottom — the chat\n  // composer — or scrolls its own region — the transcript — has no\n  // height to work in.\n  const SidebarContent = shellConfig.sidebarContent;\n  const t = await getTranslations(\"app-shell\");\n  return (\n    <AISidebarProvider className=\"h-svh min-h-0 overflow-hidden\">\n      {/* The first focusable element: keyboard users jump past the sidebar. */}\n      <a href=\"#main-content\" className={SKIP_LINK_CLASS}>\n        {t(\"skipToContent\")}\n      </a>\n      {/* Renders nothing; tells the server which day it is here. */}\n      <TimeZoneCookie />\n      <AppSidebar\n        workspace={workspaceContext.workspace}\n        workspaces={workspaceList}\n        user={{\n          name: session.user.name,\n          email: session.user.email,\n          image: session.user.image,\n        }}\n      >\n        {SidebarContent ? <SidebarContent /> : null}\n      </AppSidebar>\n      <AISidebarInset\n        id=\"main-content\"\n        tabIndex={-1}\n        className=\"min-h-0 overflow-hidden outline-none\"\n      >\n        <ShellHeader>\n          {shellConfig.headerRight && (\n            <div className=\"ml-auto flex items-center gap-2\">\n              <shellConfig.headerRight />\n            </div>\n          )}\n        </ShellHeader>\n        {shellConfig.bannerTop && <shellConfig.bannerTop />}\n        <PageTransition className=\"min-h-0 flex-1 overflow-y-auto\">\n          {children}\n        </PageTransition>\n      </AISidebarInset>\n    </AISidebarProvider>\n  );\n}\n",
       "type": "registry:page",
       "target": "app/[locale]/(app)/layout.tsx"
     },
@@ -72,7 +72,7 @@
     },
     {
       "path": "base/app-shell/lib/shell-config.tsx",
-      "content": "/**\n * What your product adds around the app shell, without editing\n * `layout.tsx` or `components/shell/*`. Every slot is optional and takes\n * a component with no props; one that needs data fetches it itself.\n *\n *  - `bannerTop`: above the page content on every authenticated page\n *    (a trial banner, an incident notice).\n *  - `headerRight`: the right end of the header (a notification bell,\n *    a language switcher).\n *  - `sidebarContent`: the sidebar under the navigation (conversation\n *    history). May be an async server component; it refreshes with the\n *    page. Hiding itself when the sidebar collapses is its own call.\n *\n * For example:\n *\n *   import { TrialBanner } from \"@/components/trial/trial-banner\";\n *\n *   export const shellConfig: ShellConfig = {\n *     bannerTop: TrialBanner,\n *   };\n */\n\nimport type { ComponentType } from \"react\";\n\nexport interface ShellConfig {\n  /** Rendered inside `SidebarInset`, above `main`. Takes no props. */\n  bannerTop?: ComponentType;\n  /**\n   * Rendered at the right end of the shell header — e.g. a\n   * notification bell, a language switcher, or both. Takes no props.\n   */\n  headerRight?: ComponentType;\n  /**\n   * Rendered in the sidebar under the navigation — e.g. conversation\n   * history. Takes no props; may be an async server component.\n   */\n  sidebarContent?: ComponentType;\n}\n\nexport const shellConfig: ShellConfig = {};\n",
+      "content": "/**\n * What your product adds around the app shell, without editing\n * `layout.tsx` or `components/shell/*`. Every slot is optional and takes\n * a component with no props; one that needs data fetches it itself.\n *\n *  - `bannerTop`: above the page content on every authenticated page\n *    (a trial banner, an incident notice).\n *  - `headerRight`: the right end of the header (a notification bell,\n *    a language switcher).\n *  - `sidebarContent`: the sidebar under the navigation (conversation\n *    history). May be an async server component; it refreshes with the\n *    page. Hiding itself when the sidebar collapses is its own call.\n *  - `onboardingRedirect`: where a signed-in user who has not finished\n *    onboarding is sent (default `/onboarding`), or `false` for a\n *    product without an onboarding step. Point it at a route outside\n *    `(app)`: one this layout wraps would redirect to itself forever.\n *\n * For example:\n *\n *   import { TrialBanner } from \"@/components/trial/trial-banner\";\n *\n *   export const shellConfig: ShellConfig = {\n *     bannerTop: TrialBanner,\n *   };\n */\n\nimport type { ComponentType } from \"react\";\n\nexport interface ShellConfig {\n  /** Rendered inside `SidebarInset`, above `main`. Takes no props. */\n  bannerTop?: ComponentType;\n  /**\n   * Rendered at the right end of the shell header — e.g. a\n   * notification bell, a language switcher, or both. Takes no props.\n   */\n  headerRight?: ComponentType;\n  /**\n   * Rendered in the sidebar under the navigation — e.g. conversation\n   * history. Takes no props; may be an async server component.\n   */\n  sidebarContent?: ComponentType;\n  /**\n   * Where a user who has not completed onboarding is sent before any\n   * page under `(app)` renders. `false` sends nobody: the product has\n   * no onboarding, or completes it elsewhere. Default `/onboarding`.\n   */\n  onboardingRedirect?: string | false;\n}\n\nexport const shellConfig: ShellConfig = {};\n",
       "type": "registry:file",
       "target": "lib/shell-config.tsx"
     },

package/templates/registry/billing-settings.json

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "billing-settings",
   "title": "Billing Settings",
-  "description": "Workspace billing management: current plan, credit balance, credit bundle purchase, and the Stripe billing portal, shaped server-side by role (member/admin/owner). Requires the pricing item (provides lib/billing.ts and actions/billing.ts); install it first.",
+  "description": "Workspace billing management: current plan, credit balance, credit bundle purchase, and the Stripe billing portal, shaped server-side by role (member/admin/owner). Requires the pricing item (provides lib/billing.ts and actions/billing.ts); install it first. Other ways to buy a credit bundle render under its button from the lib/credit-bundle-config.tsx seam, which can also hide the card button (the payment-poll item's LocalPaymentButton binds there).",
   "dependencies": [
     "@intelligo-dev/auth",
     "@intelligo-dev/billing",
@@ -39,7 +39,7 @@
     },
     {
       "path": "base/billing-settings/components/credit-bundles.tsx",
-      "content": "\"use client\";\n\n/**\n * This deployment's credit bundles (`CREDIT_BUNDLES` from `@/lib/billing`,\n * installed by the `pricing` item) for one-time purchase.\n *\n * `bundle.name` is deployment config (`lib/billing-config.ts`), not this\n * item's copy, so it renders verbatim; localize it in that file.\n *\n * Each of a bundle's two amounts is formatted in its own currency:\n * `price` is what the buyer pays the payment provider, `grant` is what\n * lands in the ledger. A pack can cost $5 and grant ₮100,000.\n *\n * A bundle in the legacy `{ credits, priceUsd }` shape is read as whole\n * units of `CURRENCY`, priced in dollars.\n */\n\nimport { useState } from \"react\";\nimport { Coins } from \"lucide-react\";\nimport { useFormatter, useTranslations } from \"next-intl\";\n\nimport { Alert, AlertDescription } from \"@/components/ui/alert\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { AnimatedList, AnimatedListItem } from \"@/components/ui/animated-list\";\n\nimport { createCreditPurchaseSession } from \"@/actions/billing\";\nimport { CREDIT_BUNDLES, CURRENCY } from \"@/lib/billing-config\";\nimport { formatMoney } from \"@/lib/format-money\";\n\n/** Micros are millionths of one major unit. */\nconst MICROS_PER_UNIT = 1_000_000;\n\ntype Bundle = (typeof CREDIT_BUNDLES)[number];\ntype Amount = { amount: number; currency: string };\n\n/** What the workspace receives, in the ledger's own currency. */\nfunction grantOf(bundle: Bundle): Amount {\n  return \"grant\" in bundle\n    ? bundle.grant\n    : { amount: bundle.credits * MICROS_PER_UNIT, currency: CURRENCY };\n}\n\n/** What the buyer pays, in the currency the provider charges. */\nfunction priceOf(bundle: Bundle): Amount {\n  return \"price\" in bundle\n    ? bundle.price\n    : {\n        amount: Math.round(bundle.priceUsd * MICROS_PER_UNIT),\n        currency: \"USD\",\n      };\n}\n\ninterface CreditBundlesProps {\n  /** The top-up balance, in the ledger's own currency. */\n  currentBalance?: Amount | null;\n}\n\nexport function CreditBundles({ currentBalance }: CreditBundlesProps) {\n  const t = useTranslations(\"billing-settings\");\n  const format = useFormatter();\n  const [loadingId, setLoadingId] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  const handlePurchase = async (bundleId: string) => {\n    setError(null);\n    setLoadingId(bundleId);\n\n    const result = await createCreditPurchaseSession({ bundleId });\n\n    if (!result.success) {\n      setError(result.error);\n      setLoadingId(null);\n      return;\n    }\n\n    window.location.href = result.data.url;\n  };\n\n  return (\n    <div className=\"space-y-4\">\n      <div>\n        <p className=\"text-sm font-medium\">{t(\"creditBundles.buyMore\")}</p>\n        {currentBalance && (\n          <p className=\"text-sm text-muted-foreground\">\n            {t(\"creditBundles.currentBalance\", {\n              balance: formatMoney(format, currentBalance),\n            })}\n          </p>\n        )}\n      </div>\n\n      <AnimatedList as=\"div\" className=\"grid grid-cols-1 gap-4 md:grid-cols-3\">\n        {CREDIT_BUNDLES.map((bundle) => {\n          const isLoading = loadingId === bundle.id;\n          const grant = grantOf(bundle);\n          const price = priceOf(bundle);\n          return (\n            <AnimatedListItem as=\"div\" key={bundle.id}>\n              <Card className=\"h-full space-y-4 p-6\">\n                <div className=\"flex items-center gap-2\">\n                  <Coins className=\"size-5 text-muted-foreground\" />\n                  <p className=\"font-medium\">{bundle.name}</p>\n                </div>\n                <p className=\"text-2xl font-semibold text-foreground\">\n                  {formatMoney(format, grant)}\n                </p>\n                <p className=\"text-sm text-muted-foreground\">\n                  {t(\"creditBundles.oneTime\", {\n                    price: formatMoney(format, price),\n                  })}\n                </p>\n                <Button\n                  onClick={() => handlePurchase(bundle.id)}\n                  disabled={isLoading}\n                  variant=\"outline\"\n                  className=\"w-full\"\n                >\n                  {isLoading\n                    ? t(\"creditBundles.redirecting\")\n                    : t(\"creditBundles.purchase\")}\n                </Button>\n              </Card>\n            </AnimatedListItem>\n          );\n        })}\n      </AnimatedList>\n\n      {error && (\n        <Alert variant=\"destructive\">\n          <AlertDescription>{error}</AlertDescription>\n        </Alert>\n      )}\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\n/**\n * This deployment's credit bundles (`CREDIT_BUNDLES` from `@/lib/billing`,\n * installed by the `pricing` item) for one-time purchase.\n *\n * `bundle.name` is deployment config (`lib/billing-config.ts`), not this\n * item's copy, so it renders verbatim; localize it in that file.\n *\n * Each of a bundle's two amounts is formatted in its own currency:\n * `price` is what the buyer pays the payment provider, `grant` is what\n * lands in the ledger. A pack can cost $5 and grant ₮100,000.\n *\n * A bundle in the legacy `{ credits, priceUsd }` shape is read as whole\n * units of `CURRENCY`, priced in dollars.\n *\n * Other ways to buy a bundle render under its button from\n * `lib/credit-bundle-config.tsx`, which can also hide the card button.\n */\n\nimport { useState } from \"react\";\nimport { Coins } from \"lucide-react\";\nimport { useFormatter, useTranslations } from \"next-intl\";\n\nimport { Alert, AlertDescription } from \"@/components/ui/alert\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { AnimatedList, AnimatedListItem } from \"@/components/ui/animated-list\";\n\nimport { createCreditPurchaseSession } from \"@/actions/billing\";\nimport { CREDIT_BUNDLES, CURRENCY } from \"@/lib/billing-config\";\nimport { creditBundleConfig } from \"@/lib/credit-bundle-config\";\nimport { formatMoney } from \"@/lib/format-money\";\n\n/** Micros are millionths of one major unit. */\nconst MICROS_PER_UNIT = 1_000_000;\n\ntype Bundle = (typeof CREDIT_BUNDLES)[number];\ntype Amount = { amount: number; currency: string };\n\n/** What the workspace receives, in the ledger's own currency. */\nfunction grantOf(bundle: Bundle): Amount {\n  return \"grant\" in bundle\n    ? bundle.grant\n    : { amount: bundle.credits * MICROS_PER_UNIT, currency: CURRENCY };\n}\n\n/** What the buyer pays, in the currency the provider charges. */\nfunction priceOf(bundle: Bundle): Amount {\n  return \"price\" in bundle\n    ? bundle.price\n    : {\n        amount: Math.round(bundle.priceUsd * MICROS_PER_UNIT),\n        currency: \"USD\",\n      };\n}\n\ninterface CreditBundlesProps {\n  /** The top-up balance, in the ledger's own currency. */\n  currentBalance?: Amount | null;\n}\n\nexport function CreditBundles({ currentBalance }: CreditBundlesProps) {\n  const t = useTranslations(\"billing-settings\");\n  const format = useFormatter();\n  const [loadingId, setLoadingId] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const Actions = creditBundleConfig.actions;\n  const cardCheckout = creditBundleConfig.cardCheckout !== false;\n\n  const handlePurchase = async (bundleId: string) => {\n    setError(null);\n    setLoadingId(bundleId);\n\n    const result = await createCreditPurchaseSession({ bundleId });\n\n    if (!result.success) {\n      setError(result.error);\n      setLoadingId(null);\n      return;\n    }\n\n    window.location.href = result.data.url;\n  };\n\n  return (\n    <div className=\"space-y-4\">\n      <div>\n        <p className=\"text-sm font-medium\">{t(\"creditBundles.buyMore\")}</p>\n        {currentBalance && (\n          <p className=\"text-sm text-muted-foreground\">\n            {t(\"creditBundles.currentBalance\", {\n              balance: formatMoney(format, currentBalance),\n            })}\n          </p>\n        )}\n      </div>\n\n      <AnimatedList as=\"div\" className=\"grid grid-cols-1 gap-4 md:grid-cols-3\">\n        {CREDIT_BUNDLES.map((bundle) => {\n          const isLoading = loadingId === bundle.id;\n          const grant = grantOf(bundle);\n          const price = priceOf(bundle);\n          return (\n            <AnimatedListItem as=\"div\" key={bundle.id}>\n              <Card className=\"h-full space-y-4 p-6\">\n                <div className=\"flex items-center gap-2\">\n                  <Coins className=\"size-5 text-muted-foreground\" />\n                  <p className=\"font-medium\">{bundle.name}</p>\n                </div>\n                <p className=\"text-2xl font-semibold text-foreground\">\n                  {formatMoney(format, grant)}\n                </p>\n                <p className=\"text-sm text-muted-foreground\">\n                  {t(\"creditBundles.oneTime\", {\n                    price: formatMoney(format, price),\n                  })}\n                </p>\n                {cardCheckout && (\n                  <Button\n                    onClick={() => handlePurchase(bundle.id)}\n                    disabled={isLoading}\n                    variant=\"outline\"\n                    className=\"w-full\"\n                  >\n                    {isLoading\n                      ? t(\"creditBundles.redirecting\")\n                      : t(\"creditBundles.purchase\")}\n                  </Button>\n                )}\n                {Actions && \"grant\" in bundle && (\n                  <Actions\n                    bundle={bundle}\n                    price={price.amount / MICROS_PER_UNIT}\n                    currency={price.currency}\n                    bundleName={bundle.name}\n                  />\n                )}\n              </Card>\n            </AnimatedListItem>\n          );\n        })}\n      </AnimatedList>\n\n      {error && (\n        <Alert variant=\"destructive\">\n          <AlertDescription>{error}</AlertDescription>\n        </Alert>\n      )}\n    </div>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/billing/credit-bundles.tsx"
     },
@@ -54,6 +54,12 @@
       "content": "\"use client\";\n\n/**\n * Error boundary for billing settings. Renders the shared `RouteError` from the\n * `route-error` item — install it alongside this one.\n */\n\nimport { RouteError } from \"@/components/shared/route-error\";\n\nexport default function SegmentError({\n  error,\n  reset,\n}: {\n  error: Error & { digest?: string };\n  reset: () => void;\n}) {\n  return <RouteError error={error} reset={reset} scope=\"settings-billing\" />;\n}\n",
       "type": "registry:page",
       "target": "app/[locale]/(app)/settings/billing/error.tsx"
+    },
+    {
+      "path": "base/billing-settings/lib/credit-bundle-config.tsx",
+      "content": "/**\n * How your product sells its credit bundles, without editing\n * `components/billing/credit-bundles.tsx`.\n *\n *  - `actions`: rendered under a bundle's purchase button, as another\n *    way to buy it (a QR payment rail, a bank transfer). It receives the\n *    bundle, its price in major units with the price's currency, and the\n *    bundle's name. Bundles in the legacy `{ credits, priceUsd }` shape\n *    are sold by card only and get no actions.\n *  - `cardCheckout`: `false` hides the card (Stripe) purchase button, for\n *    a deployment that sells bundles only another way. With no `actions`\n *    as well, nothing can buy a bundle.\n *\n * Empty by default: bundles are bought by card alone. To sell them\n * through the QR-and-poll rail, install the `payment-poll` item, price\n * each bundle in its `lib/local-payment.ts`, and bind its button here.\n * A bundle's `price` is what the card processor charges; the QR provider\n * charges in `CURRENCY`, so offer the button only for a bundle priced in\n * it, and give its reference a prefix plans do not use:\n *\n *   import { LocalPaymentButton } from \"@/components/billing/local-payment-button\";\n *   import { CURRENCY } from \"@/lib/billing-config\";\n *\n *   export const creditBundleConfig: CreditBundleConfig = {\n *     actions: ({ bundle, price, currency, bundleName }) =>\n *       currency === CURRENCY ? (\n *         <LocalPaymentButton\n *           reference={`credits:${bundle.id}`}\n *           amount={price}\n *           label={bundleName}\n *         />\n *       ) : null,\n *   };\n *\n * The amount is only displayed; `priceLocalPayment(reference)` prices\n * the invoice on the server.\n */\n\nimport type { ComponentType } from \"react\";\n\nimport type { CreditBundle } from \"@intelligo-dev/billing\";\n\nexport interface CreditBundleActionProps {\n  bundle: CreditBundle;\n  /** What the buyer pays, in major units of `currency`. */\n  price: number;\n  currency: string;\n  /** The bundle's name as the card renders it. */\n  bundleName: string;\n}\n\nexport interface CreditBundleConfig {\n  /** Rendered under each bundle's purchase button. */\n  actions?: ComponentType<CreditBundleActionProps>;\n  /** `false` hides the card purchase button. Default `true`. */\n  cardCheckout?: boolean;\n}\n\nexport const creditBundleConfig: CreditBundleConfig = {};\n",
+      "type": "registry:file",
+      "target": "lib/credit-bundle-config.tsx"
     }
   ],
   "type": "registry:block"

package/templates/registry/chat.json

@@ -296,7 +296,7 @@
     },
     {
       "path": "base/chat/components/chat-history-nav.tsx",
-      "content": "\"use client\";\n\n/**\n * Conversation history in the app's own sidebar, under the navigation —\n * grouped by recency with pinned on top, filterable, and every row with\n * rename, pin and delete (with a few seconds to change your mind). The\n * row for the conversation on screen is highlighted from the URL, and\n * the group hides when the sidebar collapses to icons. A deleted row\n * folds away and comes back on undo; a new one slides in.\n *\n * Keyboard: F2 renames the focused row, Delete deletes it.\n *\n * Filtering is client-side over what the server sent (the newest 100).\n * Past that size it belongs in a query.\n */\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n  MoreHorizontalIcon,\n  PencilIcon,\n  PinIcon,\n  PinOffIcon,\n  PlusIcon,\n  Trash2Icon,\n} from \"lucide-react\";\nimport { useTranslations } from \"next-intl\";\nimport { AnimatePresence, useReducedMotion } from \"motion/react\";\nimport { toast } from \"sonner\";\n\nimport { Link, usePathname, useRouter } from \"@/i18n/navigation\";\nimport { listItem } from \"@/components/ui/ai-motion\";\nimport {\n  AISidebarItem,\n  AISidebarMenu,\n  AISidebarMenuItem,\n  AISidebarSection,\n  useAISidebar,\n  useAISidebarPanel,\n} from \"@/components/ui/ai-sidebar\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n  deleteConversation,\n  renameConversation,\n  setConversationPinned,\n  type ConversationSummary,\n} from \"@/actions/chat\";\n\ntype Bucket = \"pinned\" | \"today\" | \"yesterday\" | \"week\" | \"month\" | \"older\";\n\nconst BUCKET_ORDER: Bucket[] = [\n  \"pinned\",\n  \"today\",\n  \"yesterday\",\n  \"week\",\n  \"month\",\n  \"older\",\n];\n\nconst UNDO_MS = 5000;\n/** The search field shows once the list is long enough to need it. */\nconst SEARCH_FROM = 8;\n\nfunction bucketFor(conversation: ConversationSummary, now: number): Bucket {\n  if (conversation.pinned) return \"pinned\";\n  const ageMs = now - new Date(conversation.updatedAt).getTime();\n  const day = 24 * 60 * 60 * 1000;\n  if (ageMs < day) return \"today\";\n  if (ageMs < 2 * day) return \"yesterday\";\n  if (ageMs < 7 * day) return \"week\";\n  if (ageMs < 30 * day) return \"month\";\n  return \"older\";\n}\n\nexport function ChatHistoryNav({\n  conversations,\n}: {\n  conversations: ConversationSummary[];\n}) {\n  const t = useTranslations(\"chat\");\n  const router = useRouter();\n  const pathname = usePathname();\n  const { isMobile, setOpenMobile } = useAISidebar();\n  const { collapsed } = useAISidebarPanel();\n  const reduced = useReducedMotion() ?? false;\n  const activeId = pathname?.match(/^\\/chat\\/([^/]+)/)?.[1] ?? null;\n\n  const [query, setQuery] = useState(\"\");\n  const [renamingId, setRenamingId] = useState<string | null>(null);\n  const [draft, setDraft] = useState(\"\");\n  const [hidden, setHidden] = useState<Set<string>>(new Set());\n  const [titles, setTitles] = useState<Record<string, string>>({});\n  const [pins, setPins] = useState<Record<string, boolean>>({});\n  const timers = useRef(new Map<string, ReturnType<typeof setTimeout>>());\n  // Read when a delete lands, seconds after the click: by then the\n  // reader may have opened another conversation.\n  const activeIdRef = useRef(activeId);\n  activeIdRef.current = activeId;\n\n  // Leaving with a delete still in its undo window keeps the delete:\n  // the reader asked for it and did not take it back.\n  useEffect(() => {\n    const pending = timers.current;\n    return () => {\n      for (const [id, timer] of pending) {\n        clearTimeout(timer);\n        void deleteConversation(id);\n      }\n      pending.clear();\n    };\n  }, []);\n\n  const rows = useMemo(\n    () =>\n      conversations\n        .filter((conversation) => !hidden.has(conversation.id))\n        .map((conversation) => ({\n          ...conversation,\n          title: titles[conversation.id] ?? conversation.title,\n          pinned: pins[conversation.id] ?? conversation.pinned,\n        })),\n    [conversations, hidden, titles, pins]\n  );\n\n  const grouped = useMemo(() => {\n    const needle = query.trim().toLowerCase();\n    const now = Date.now();\n    const buckets = new Map<Bucket, typeof rows>();\n    for (const conversation of rows) {\n      if (\n        needle &&\n        conversation.id !== activeId &&\n        !(conversation.title ?? \"\").toLowerCase().includes(needle)\n      ) {\n        continue;\n      }\n      const bucket = bucketFor(conversation, now);\n      buckets.set(bucket, [...(buckets.get(bucket) ?? []), conversation]);\n    }\n    return buckets;\n  }, [rows, query, activeId]);\n\n  const empty = BUCKET_ORDER.every((bucket) => !grouped.get(bucket)?.length);\n\n  function closeOnMobile() {\n    if (isMobile) setOpenMobile(false);\n  }\n\n  function startRename(conversation: ConversationSummary) {\n    setRenamingId(conversation.id);\n    setDraft(titles[conversation.id] ?? conversation.title ?? \"\");\n  }\n\n  function commitRename(id: string) {\n    const trimmed = draft.trim();\n    setRenamingId(null);\n    if (!trimmed) return;\n    setTitles((previous) => ({ ...previous, [id]: trimmed }));\n    void renameConversation(id, trimmed).then((result) => {\n      if (!result.success) {\n        setTitles((previous) => {\n          const next = { ...previous };\n          delete next[id];\n          return next;\n        });\n        toast.error(result.error);\n        return;\n      }\n      router.refresh();\n    });\n  }\n\n  function togglePin(conversation: ConversationSummary) {\n    const next = !(pins[conversation.id] ?? conversation.pinned);\n    setPins((previous) => ({ ...previous, [conversation.id]: next }));\n    void setConversationPinned(conversation.id, next).then((result) => {\n      if (!result.success) {\n        setPins((previous) => ({ ...previous, [conversation.id]: !next }));\n        toast.error(result.error);\n      }\n    });\n  }\n\n  function remove(id: string) {\n    setHidden((previous) => new Set(previous).add(id));\n    const timer = setTimeout(() => {\n      timers.current.delete(id);\n      void deleteConversation(id).then((result) => {\n        if (!result.success) {\n          setHidden((previous) => {\n            const next = new Set(previous);\n            next.delete(id);\n            return next;\n          });\n          toast.error(result.error);\n          return;\n        }\n        if (id === activeIdRef.current) router.push(\"/chat\");\n        router.refresh();\n      });\n    }, UNDO_MS);\n    timers.current.set(id, timer);\n    toast(t(\"sidebar.deleted\"), {\n      duration: UNDO_MS,\n      action: {\n        label: t(\"sidebar.undo\"),\n        onClick: () => {\n          const pendingTimer = timers.current.get(id);\n          if (pendingTimer) clearTimeout(pendingTimer);\n          timers.current.delete(id);\n          setHidden((previous) => {\n            const next = new Set(previous);\n            next.delete(id);\n            return next;\n          });\n        },\n      },\n    });\n  }\n\n  // In the icon rail there is no room for titles; the nav rows stay.\n  if (collapsed) return null;\n\n  return (\n    <AISidebarSection\n      label={t(\"sidebar.label\")}\n      action={\n        <Button\n          variant=\"ghost\"\n          size=\"icon-xs\"\n          aria-label={t(\"sidebar.newChat\")}\n          title={t(\"sidebar.newChat\")}\n          render={<Link href=\"/chat\" onClick={closeOnMobile} />}\n        >\n          <PlusIcon />\n        </Button>\n      }\n    >\n      <div className=\"flex flex-col gap-1\">\n        {rows.length >= SEARCH_FROM ? (\n          <Input\n            value={query}\n            onChange={(event) => setQuery(event.target.value)}\n            placeholder={t(\"sidebar.searchPlaceholder\")}\n            aria-label={t(\"sidebar.searchPlaceholder\")}\n            className=\"mb-1 h-8 bg-background\"\n          />\n        ) : null}\n\n        {empty ? (\n          <p className=\"px-2 py-1 text-xs text-muted-foreground\">\n            {query ? t(\"sidebar.noMatches\") : t(\"header.historyEmpty\")}\n          </p>\n        ) : (\n          BUCKET_ORDER.map((bucket) => {\n            const items = grouped.get(bucket);\n            if (!items?.length) return null;\n            return (\n              <div key={bucket} className=\"flex flex-col\">\n                <p className=\"px-2 pt-2 pb-1 text-xs text-muted-foreground\">\n                  {t(`sidebar.groups.${bucket}`)}\n                </p>\n                <AISidebarMenu>\n                  <AnimatePresence initial={false}>\n                    {items.map((conversation) => {\n                      const label =\n                        conversation.title ?? t(\"header.historyUntitled\");\n                      const motionProps = reduced\n                        ? {}\n                        : {\n                            variants: listItem,\n                            initial: \"hidden\",\n                            animate: \"shown\",\n                            exit: \"exit\",\n                          };\n                      if (renamingId === conversation.id) {\n                        return (\n                          <AISidebarMenuItem\n                            key={conversation.id}\n                            {...motionProps}\n                          >\n                            <Input\n                              autoFocus\n                              value={draft}\n                              onChange={(event) => setDraft(event.target.value)}\n                              onBlur={() => commitRename(conversation.id)}\n                              onKeyDown={(event) => {\n                                if (event.key === \"Enter\") {\n                                  event.preventDefault();\n                                  commitRename(conversation.id);\n                                }\n                                if (event.key === \"Escape\") setRenamingId(null);\n                              }}\n                              aria-label={t(\"sidebar.rename\")}\n                              className=\"h-8 bg-background\"\n                            />\n                          </AISidebarMenuItem>\n                        );\n                      }\n                      return (\n                        <AISidebarMenuItem\n                          key={conversation.id}\n                          {...motionProps}\n                        >\n                          <AISidebarItem\n                            isActive={conversation.id === activeId}\n                            title={label}\n                            render={<Link href={`/chat/${conversation.id}`} />}\n                            onKeyDown={(event) => {\n                              if (event.key === \"F2\") {\n                                event.preventDefault();\n                                startRename(conversation);\n                              } else if (event.key === \"Delete\") {\n                                event.preventDefault();\n                                remove(conversation.id);\n                              }\n                            }}\n                            action={\n                              <DropdownMenu>\n                                <DropdownMenuTrigger\n                                  render={\n                                    <Button\n                                      variant=\"ghost\"\n                                      size=\"icon-xs\"\n                                      aria-label={t(\"sidebar.menu\")}\n                                    />\n                                  }\n                                >\n                                  <MoreHorizontalIcon />\n                                </DropdownMenuTrigger>\n                                <DropdownMenuContent side=\"right\" align=\"start\">\n                                  <DropdownMenuItem\n                                    onClick={() => togglePin(conversation)}\n                                  >\n                                    {conversation.pinned ? (\n                                      <PinOffIcon />\n                                    ) : (\n                                      <PinIcon />\n                                    )}\n                                    {conversation.pinned\n                                      ? t(\"sidebar.unpin\")\n                                      : t(\"sidebar.pin\")}\n                                  </DropdownMenuItem>\n                                  <DropdownMenuItem\n                                    onClick={() => startRename(conversation)}\n                                  >\n                                    <PencilIcon />\n                                    {t(\"sidebar.rename\")}\n                                  </DropdownMenuItem>\n                                  <DropdownMenuItem\n                                    variant=\"destructive\"\n                                    onClick={() => remove(conversation.id)}\n                                  >\n                                    <Trash2Icon />\n                                    {t(\"sidebar.delete\")}\n                                  </DropdownMenuItem>\n                                </DropdownMenuContent>\n                              </DropdownMenu>\n                            }\n                          >\n                            {label}\n                          </AISidebarItem>\n                        </AISidebarMenuItem>\n                      );\n                    })}\n                  </AnimatePresence>\n                </AISidebarMenu>\n              </div>\n            );\n          })\n        )}\n      </div>\n    </AISidebarSection>\n  );\n}\n",
+      "content": "\"use client\";\n\n/**\n * Conversation history in the app's own sidebar, under the navigation —\n * grouped by recency with pinned on top, filterable, and every row with\n * rename, pin and delete (with a few seconds to change your mind). The\n * row for the conversation on screen is highlighted from the URL, and\n * the group hides when the sidebar collapses to icons. A deleted row\n * folds away and comes back on undo; a new one slides in.\n *\n * Keyboard: F2 renames the focused row, Delete deletes it.\n *\n * Filtering is client-side over what the server sent (the newest 100).\n * Past that size it belongs in a query.\n */\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n  MoreHorizontalIcon,\n  PencilIcon,\n  PinIcon,\n  PinOffIcon,\n  PlusIcon,\n  Trash2Icon,\n} from \"lucide-react\";\nimport { useTranslations } from \"next-intl\";\nimport { AnimatePresence, useReducedMotion } from \"motion/react\";\nimport { toast } from \"sonner\";\n\nimport { Link, usePathname, useRouter } from \"@/i18n/navigation\";\nimport { listItem } from \"@/components/ui/ai-motion\";\nimport {\n  AISidebarItem,\n  AISidebarMenu,\n  AISidebarMenuItem,\n  AISidebarSection,\n  useAISidebar,\n  useAISidebarPanel,\n} from \"@/components/ui/ai-sidebar\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n  deleteConversation,\n  renameConversation,\n  setConversationPinned,\n  type ConversationSummary,\n} from \"@/actions/chat\";\n\ntype Bucket = \"pinned\" | \"today\" | \"yesterday\" | \"week\" | \"month\" | \"older\";\n\nconst BUCKET_ORDER: Bucket[] = [\n  \"pinned\",\n  \"today\",\n  \"yesterday\",\n  \"week\",\n  \"month\",\n  \"older\",\n];\n\nconst UNDO_MS = 5000;\n/** The search field shows once the list is long enough to need it. */\nconst SEARCH_FROM = 8;\n\nfunction bucketFor(conversation: ConversationSummary, now: number): Bucket {\n  if (conversation.pinned) return \"pinned\";\n  const ageMs = now - new Date(conversation.updatedAt).getTime();\n  const day = 24 * 60 * 60 * 1000;\n  if (ageMs < day) return \"today\";\n  if (ageMs < 2 * day) return \"yesterday\";\n  if (ageMs < 7 * day) return \"week\";\n  if (ageMs < 30 * day) return \"month\";\n  return \"older\";\n}\n\nexport function ChatHistoryNav({\n  conversations,\n}: {\n  conversations: ConversationSummary[];\n}) {\n  const t = useTranslations(\"chat\");\n  const router = useRouter();\n  const pathname = usePathname();\n  const { isMobile, setOpenMobile } = useAISidebar();\n  const { collapsed } = useAISidebarPanel();\n  const reduced = useReducedMotion() ?? false;\n  const activeId = pathname?.match(/^\\/chat\\/([^/]+)/)?.[1] ?? null;\n\n  const [query, setQuery] = useState(\"\");\n  const [renamingId, setRenamingId] = useState<string | null>(null);\n  const [draft, setDraft] = useState(\"\");\n  const [hidden, setHidden] = useState<Set<string>>(new Set());\n  const [titles, setTitles] = useState<Record<string, string>>({});\n  const [pins, setPins] = useState<Record<string, boolean>>({});\n  const timers = useRef(new Map<string, ReturnType<typeof setTimeout>>());\n  // Read when a delete lands, seconds after the click: by then the\n  // reader may have opened another conversation.\n  const activeIdRef = useRef(activeId);\n  activeIdRef.current = activeId;\n\n  // Leaving with a delete still in its undo window keeps the delete:\n  // the reader asked for it and did not take it back.\n  useEffect(() => {\n    const pending = timers.current;\n    return () => {\n      for (const [id, timer] of pending) {\n        clearTimeout(timer);\n        void deleteConversation(id);\n      }\n      pending.clear();\n    };\n  }, []);\n\n  const rows = useMemo(\n    () =>\n      conversations\n        .filter((conversation) => !hidden.has(conversation.id))\n        .map((conversation) => ({\n          ...conversation,\n          title: titles[conversation.id] ?? conversation.title,\n          pinned: pins[conversation.id] ?? conversation.pinned,\n        })),\n    [conversations, hidden, titles, pins]\n  );\n\n  const grouped = useMemo(() => {\n    const needle = query.trim().toLowerCase();\n    const now = Date.now();\n    const buckets = new Map<Bucket, typeof rows>();\n    for (const conversation of rows) {\n      if (\n        needle &&\n        conversation.id !== activeId &&\n        !(conversation.title ?? \"\").toLowerCase().includes(needle)\n      ) {\n        continue;\n      }\n      const bucket = bucketFor(conversation, now);\n      buckets.set(bucket, [...(buckets.get(bucket) ?? []), conversation]);\n    }\n    return buckets;\n  }, [rows, query, activeId]);\n\n  const empty = BUCKET_ORDER.every((bucket) => !grouped.get(bucket)?.length);\n\n  function closeOnMobile() {\n    if (isMobile) setOpenMobile(false);\n  }\n\n  function startRename(conversation: ConversationSummary) {\n    setRenamingId(conversation.id);\n    setDraft(titles[conversation.id] ?? conversation.title ?? \"\");\n  }\n\n  function commitRename(id: string) {\n    const trimmed = draft.trim();\n    setRenamingId(null);\n    if (!trimmed) return;\n    setTitles((previous) => ({ ...previous, [id]: trimmed }));\n    void renameConversation(id, trimmed).then((result) => {\n      if (!result.success) {\n        setTitles((previous) => {\n          const next = { ...previous };\n          delete next[id];\n          return next;\n        });\n        toast.error(result.error);\n        return;\n      }\n      router.refresh();\n    });\n  }\n\n  function togglePin(conversation: ConversationSummary) {\n    const next = !(pins[conversation.id] ?? conversation.pinned);\n    setPins((previous) => ({ ...previous, [conversation.id]: next }));\n    void setConversationPinned(conversation.id, next).then((result) => {\n      if (!result.success) {\n        setPins((previous) => ({ ...previous, [conversation.id]: !next }));\n        toast.error(result.error);\n      }\n    });\n  }\n\n  function remove(id: string) {\n    setHidden((previous) => new Set(previous).add(id));\n    const timer = setTimeout(() => {\n      timers.current.delete(id);\n      void deleteConversation(id).then((result) => {\n        if (!result.success) {\n          setHidden((previous) => {\n            const next = new Set(previous);\n            next.delete(id);\n            return next;\n          });\n          toast.error(result.error);\n          return;\n        }\n        if (id === activeIdRef.current) router.push(\"/chat\");\n        router.refresh();\n      });\n    }, UNDO_MS);\n    timers.current.set(id, timer);\n    toast(t(\"sidebar.deleted\"), {\n      duration: UNDO_MS,\n      action: {\n        label: t(\"sidebar.undo\"),\n        onClick: () => {\n          const pendingTimer = timers.current.get(id);\n          if (pendingTimer) clearTimeout(pendingTimer);\n          timers.current.delete(id);\n          setHidden((previous) => {\n            const next = new Set(previous);\n            next.delete(id);\n            return next;\n          });\n        },\n      },\n    });\n  }\n\n  // In the icon rail there is no room for titles; the nav rows stay.\n  if (collapsed) return null;\n\n  return (\n    <AISidebarSection\n      label={t(\"sidebar.label\")}\n      action={\n        <Button\n          variant=\"ghost\"\n          size=\"icon-xs\"\n          aria-label={t(\"sidebar.newChat\")}\n          title={t(\"sidebar.newChat\")}\n          render={<Link href=\"/chat\" onClick={closeOnMobile} />}\n          nativeButton={false}\n        >\n          <PlusIcon />\n        </Button>\n      }\n    >\n      <div className=\"flex flex-col gap-1\">\n        {rows.length >= SEARCH_FROM ? (\n          <Input\n            value={query}\n            onChange={(event) => setQuery(event.target.value)}\n            placeholder={t(\"sidebar.searchPlaceholder\")}\n            aria-label={t(\"sidebar.searchPlaceholder\")}\n            className=\"mb-1 h-8 bg-background\"\n          />\n        ) : null}\n\n        {empty ? (\n          <p className=\"px-2 py-1 text-xs text-muted-foreground\">\n            {query ? t(\"sidebar.noMatches\") : t(\"header.historyEmpty\")}\n          </p>\n        ) : (\n          BUCKET_ORDER.map((bucket) => {\n            const items = grouped.get(bucket);\n            if (!items?.length) return null;\n            return (\n              <div key={bucket} className=\"flex flex-col\">\n                <p className=\"px-2 pt-2 pb-1 text-xs text-muted-foreground\">\n                  {t(`sidebar.groups.${bucket}`)}\n                </p>\n                <AISidebarMenu>\n                  <AnimatePresence initial={false}>\n                    {items.map((conversation) => {\n                      const label =\n                        conversation.title ?? t(\"header.historyUntitled\");\n                      const motionProps = reduced\n                        ? {}\n                        : {\n                            variants: listItem,\n                            initial: \"hidden\",\n                            animate: \"shown\",\n                            exit: \"exit\",\n                          };\n                      if (renamingId === conversation.id) {\n                        return (\n                          <AISidebarMenuItem\n                            key={conversation.id}\n                            {...motionProps}\n                          >\n                            <Input\n                              autoFocus\n                              value={draft}\n                              onChange={(event) => setDraft(event.target.value)}\n                              onBlur={() => commitRename(conversation.id)}\n                              onKeyDown={(event) => {\n                                if (event.key === \"Enter\") {\n                                  event.preventDefault();\n                                  commitRename(conversation.id);\n                                }\n                                if (event.key === \"Escape\") setRenamingId(null);\n                              }}\n                              aria-label={t(\"sidebar.rename\")}\n                              className=\"h-8 bg-background\"\n                            />\n                          </AISidebarMenuItem>\n                        );\n                      }\n                      return (\n                        <AISidebarMenuItem\n                          key={conversation.id}\n                          {...motionProps}\n                        >\n                          <AISidebarItem\n                            isActive={conversation.id === activeId}\n                            title={label}\n                            render={<Link href={`/chat/${conversation.id}`} />}\n                            onKeyDown={(event) => {\n                              if (event.key === \"F2\") {\n                                event.preventDefault();\n                                startRename(conversation);\n                              } else if (event.key === \"Delete\") {\n                                event.preventDefault();\n                                remove(conversation.id);\n                              }\n                            }}\n                            action={\n                              <DropdownMenu>\n                                <DropdownMenuTrigger\n                                  render={\n                                    <Button\n                                      variant=\"ghost\"\n                                      size=\"icon-xs\"\n                                      aria-label={t(\"sidebar.menu\")}\n                                    />\n                                  }\n                                >\n                                  <MoreHorizontalIcon />\n                                </DropdownMenuTrigger>\n                                <DropdownMenuContent side=\"right\" align=\"start\">\n                                  <DropdownMenuItem\n                                    onClick={() => togglePin(conversation)}\n                                  >\n                                    {conversation.pinned ? (\n                                      <PinOffIcon />\n                                    ) : (\n                                      <PinIcon />\n                                    )}\n                                    {conversation.pinned\n                                      ? t(\"sidebar.unpin\")\n                                      : t(\"sidebar.pin\")}\n                                  </DropdownMenuItem>\n                                  <DropdownMenuItem\n                                    onClick={() => startRename(conversation)}\n                                  >\n                                    <PencilIcon />\n                                    {t(\"sidebar.rename\")}\n                                  </DropdownMenuItem>\n                                  <DropdownMenuItem\n                                    variant=\"destructive\"\n                                    onClick={() => remove(conversation.id)}\n                                  >\n                                    <Trash2Icon />\n                                    {t(\"sidebar.delete\")}\n                                  </DropdownMenuItem>\n                                </DropdownMenuContent>\n                              </DropdownMenu>\n                            }\n                          >\n                            {label}\n                          </AISidebarItem>\n                        </AISidebarMenuItem>\n                      );\n                    })}\n                  </AnimatePresence>\n                </AISidebarMenu>\n              </div>\n            );\n          })\n        )}\n      </div>\n    </AISidebarSection>\n  );\n}\n",
       "type": "registry:component",
       "target": "components/chat/chat-history-nav.tsx"
     },