@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/skins/product-page-assistant/product-dashboard.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import {
+  ActivityIcon,
+  AlertTriangleIcon,
+  CheckCircle2Icon,
+  DatabaseZapIcon,
+  GaugeIcon,
+  ServerCogIcon,
+} from "lucide-react";
+import type { CSSProperties } from "react";
+import { useSkinChrome } from "../../stock";
+
+export function ProductDashboard() {
+  const chrome = useSkinChrome();
+  const productName = chrome.title?.trim() || "Northstar Sync";
+  const themeStyle = {
+    "--support-accent": chrome.accent?.color ?? "#2563eb",
+    "--support-border": "#d8dee8",
+    "--support-muted": "#64748b",
+    "--support-success": "#15803d",
+    "--support-warning": "#b45309",
+  } as CSSProperties;
+
+  return (
+    <main className="h-full overflow-auto bg-slate-100 text-slate-950" style={themeStyle}>
+      <header className="border-b border-slate-200 bg-white">
+        <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-3 sm:px-6">
+          <div className="flex items-center gap-3">
+            <div className="grid size-9 place-items-center rounded-md bg-[var(--support-accent)] text-white">
+              <DatabaseZapIcon className="size-5" />
+            </div>
+            <div>
+              <div className="font-semibold leading-tight">{productName}</div>
+              <div className="text-xs text-slate-500">{"Northstar Cloud"}</div>
+            </div>
+          </div>
+          <div className="hidden items-center gap-2 rounded-md border border-[var(--support-border)] bg-white px-3 py-1.5 text-xs text-[var(--support-warning)] sm:flex">
+            <AlertTriangleIcon className="size-4" />
+            {"Workflow attention needed in us-west"}
+          </div>
+        </div>
+      </header>
+
+      <div className="mx-auto grid max-w-7xl gap-5 px-4 py-5 sm:px-6 lg:grid-cols-[240px_1fr]">
+        <aside className="hidden rounded-lg border border-slate-200 bg-white p-4 lg:block">
+          <div className="text-xs font-medium uppercase tracking-wide text-slate-500">
+            {"Workspace"}
+          </div>
+          <div className="mt-2 font-semibold">{"Acme Operations"}</div>
+          <div className="mt-1 text-sm text-slate-500">{"Scale plan, us-west"}</div>
+          <nav className="mt-6 grid gap-1 text-sm">
+            <div className="rounded-md px-3 py-2 text-slate-600 first:bg-slate-100 first:text-slate-950">{"Overview"}</div>
+<div className="rounded-md px-3 py-2 text-slate-600 first:bg-slate-100 first:text-slate-950">{"Connectors"}</div>
+<div className="rounded-md px-3 py-2 text-slate-600 first:bg-slate-100 first:text-slate-950">{"Records"}</div>
+<div className="rounded-md px-3 py-2 text-slate-600 first:bg-slate-100 first:text-slate-950">{"Assistant"}</div>
+          </nav>
+        </aside>
+        <section className="grid gap-5">
+          <div className="rounded-lg border border-slate-200 bg-white p-5">
+    <div className="flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
+      <div>
+        <h1 className="text-xl font-semibold">{"Workspace overview"}</h1>
+        <p className="mt-1 text-sm text-[var(--support-muted)]">{"Live connector health with an embedded integration support assistant."}</p>
+      </div>
+      <div className="inline-flex w-fit items-center gap-2 rounded-md bg-emerald-50 px-3 py-2 text-sm text-[var(--support-success)]">
+        <CheckCircle2Icon className="size-4" />
+        {"Sync degraded"}
+      </div>
+    </div>
+    <div className="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+    <div className="rounded-lg border border-slate-200 bg-slate-50 p-4">
+    <div className="text-sm text-slate-500">{"Sync success"}</div>
+    <div className="mt-2 text-2xl font-semibold">{"98.4%"}</div>
+    <div className="mt-1 text-xs text-slate-500">{"-1.8%"}</div>
+  </div>
+<div className="rounded-lg border border-slate-200 bg-slate-50 p-4">
+    <div className="text-sm text-slate-500">{"Retry queue"}</div>
+    <div className="mt-2 text-2xl font-semibold">{"12"}</div>
+    <div className="mt-1 text-xs text-slate-500">{"+3"}</div>
+  </div>
+<div className="rounded-lg border border-slate-200 bg-slate-50 p-4">
+    <div className="text-sm text-slate-500">{"Avg response"}</div>
+    <div className="mt-2 text-2xl font-semibold">{"1h 42m"}</div>
+    <div className="mt-1 text-xs text-slate-500">{"-18m"}</div>
+  </div>
+<div className="rounded-lg border border-slate-200 bg-slate-50 p-4">
+    <div className="text-sm text-slate-500">{"Services healthy"}</div>
+    <div className="mt-2 text-2xl font-semibold">{"4 / 5"}</div>
+    <div className="mt-1 text-xs text-slate-500">{"Sync degraded"}</div>
+  </div>
+  </div>
+  </div>
+<div className="grid gap-5 xl:grid-cols-[1.2fr_0.8fr]">
+    <div className="rounded-lg border border-slate-200 bg-white p-5">
+    <div className="flex items-center gap-2">
+      <ServerCogIcon className="size-5 text-[var(--support-accent)]" />
+      <h2 className="font-semibold">{"Connector areas"}</h2>
+    </div>
+    <div className="mt-4 grid gap-3">
+      <div className="flex items-center justify-between gap-3 rounded-md border border-slate-200 p-3">
+        <div>
+          <div className="font-medium">{"Sync Engine"}</div>
+          <div className="text-sm text-slate-500">{"Retry latency high"}</div>
+        </div>
+        <span className="rounded-md bg-slate-100 px-2 py-1 text-xs font-medium text-slate-700">
+          {"Degraded"}
+        </span>
+      </div>
+<div className="flex items-center justify-between gap-3 rounded-md border border-slate-200 p-3">
+        <div>
+          <div className="font-medium">{"API"}</div>
+          <div className="text-sm text-slate-500">{"Normal latency"}</div>
+        </div>
+        <span className="rounded-md bg-slate-100 px-2 py-1 text-xs font-medium text-slate-700">
+          {"Operational"}
+        </span>
+      </div>
+<div className="flex items-center justify-between gap-3 rounded-md border border-slate-200 p-3">
+        <div>
+          <div className="font-medium">{"Dashboard"}</div>
+          <div className="text-sm text-slate-500">{"No errors"}</div>
+        </div>
+        <span className="rounded-md bg-slate-100 px-2 py-1 text-xs font-medium text-slate-700">
+          {"Operational"}
+        </span>
+      </div>
+<div className="flex items-center justify-between gap-3 rounded-md border border-slate-200 p-3">
+        <div>
+          <div className="font-medium">{"Billing"}</div>
+          <div className="text-sm text-slate-500">{"No holds"}</div>
+        </div>
+        <span className="rounded-md bg-slate-100 px-2 py-1 text-xs font-medium text-slate-700">
+          {"Operational"}
+        </span>
+      </div>
+    </div>
+  </div>
+<div className="rounded-lg border border-slate-200 bg-white p-5">
+    <div className="flex items-center gap-2">
+      <ActivityIcon className="size-5 text-[var(--support-accent)]" />
+      <h2 className="font-semibold">{"Recent activity"}</h2>
+    </div>
+    <div className="mt-4 grid gap-3">
+      <div className="flex gap-3 text-sm">
+        <GaugeIcon className="mt-0.5 size-4 shrink-0 text-slate-400" />
+        <span className="text-slate-700">{"Retry queue increased for Salesforce connector"}</span>
+      </div>
+<div className="flex gap-3 text-sm">
+        <GaugeIcon className="mt-0.5 size-4 shrink-0 text-slate-400" />
+        <span className="text-slate-700">{"Incident INC-2479 opened for us-west sync workers"}</span>
+      </div>
+<div className="flex gap-3 text-sm">
+        <GaugeIcon className="mt-0.5 size-4 shrink-0 text-slate-400" />
+        <span className="text-slate-700">{"Acme Operations uploaded sync-error.log"}</span>
+      </div>
+    </div>
+  </div>
+  </div>
+        </section>
+      </div>
+    </main>
+  );
+}

package/src/components/chat/skins/react-ink.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { cn } from "../../../lib/utils";
+import {
+  AuiIf,
+  ComposerPrimitive,
+  ErrorPrimitive,
+  MessagePrimitive,
+  ThreadPrimitive,
+} from "@assistant-ui/react";
+import { MarkdownText } from "../stock/markdown-text";
+import { SkinCredit, useComposerCopy } from "../stock";
+
+
+/**
+ * Web facsimile of the official React Ink Terminal Assistant.
+ * The TTY original (`ink` / `@assistant-ui/react-ink`) lives in
+ * `reference/assistant-ui-templates/react-ink` and `apps/digichat/cli`.
+ * Next.js must not import those packages.
+ */
+export function ReactInkWeb() {
+  const { title, welcome, placeholder } = useComposerCopy(
+    'Working in this project. fetchUser() is flaky in prod and has no retry logic.',
+    "Type a message... (Enter to send)",
+  );
+  return (
+    <ThreadPrimitive.Root className="flex h-full flex-col bg-zinc-950 p-4 font-mono text-[13px] leading-5 text-zinc-100">
+      <div className="mb-2 shrink-0">
+        <span className="font-bold text-cyan-400">{title || "demo-agent"}</span>
+        <span className="text-zinc-500">{"  ~/acme-app"}</span>
+      </div>
+      <div className="mb-3 shrink-0 text-zinc-500">model: demo · terminal</div>
+
+      <AuiIf condition={(s) => s.thread.isEmpty}>
+        <div className="mb-3 text-zinc-200">
+          {welcome}
+        </div>
+      </AuiIf>
+
+      <ThreadPrimitive.Viewport className="min-h-0 flex-1 overflow-y-auto">
+        <ThreadPrimitive.Messages>
+          {({ message }) =>
+            message.role === "user" ? <InkUserMessage /> : <InkAssistantMessage />
+          }
+        </ThreadPrimitive.Messages>
+      </ThreadPrimitive.Viewport>
+
+      <div className="mt-3 shrink-0 rounded border border-zinc-600 px-2 py-1">
+        <div className="flex items-start gap-1">
+          <span className="text-zinc-500">{"> "}</span>
+          <ComposerPrimitive.Root className="flex min-w-0 flex-1 items-start gap-1">
+            <ComposerPrimitive.Input
+              placeholder={placeholder}
+              className={cn(
+                "w-full bg-transparent text-zinc-100 outline-none placeholder:text-zinc-600",
+              )}
+            />
+            <ComposerPrimitive.Send className="sr-only">
+              send
+            </ComposerPrimitive.Send>
+            </ComposerPrimitive.Root>
+        </div>
+      </div>
+
+        <SkinCredit className="mt-1 font-mono text-zinc-500 opacity-100" />
+    </ThreadPrimitive.Root>
+  );
+}
+
+function InkUserMessage() {
+  return (
+    <MessagePrimitive.Root className="mb-3">
+      <span className="font-bold text-green-400">You: </span>
+      <MessagePrimitive.Parts>
+        {({ part }) =>
+          part.type === "text" ? (
+            <span className="whitespace-pre-wrap">{part.text}</span>
+          ) : null
+        }
+      </MessagePrimitive.Parts>
+    </MessagePrimitive.Root>
+  );
+}
+
+function InkAssistantMessage() {
+  return (
+    <MessagePrimitive.Root className="mb-3">
+      <div className="font-bold text-blue-400">AI:</div>
+      <MessagePrimitive.Parts>
+        {({ part }) => (part.type === "text" ? <MarkdownText /> : null)}
+      </MessagePrimitive.Parts>
+      <ErrorPrimitive.Root className="mt-1 text-red-400">
+        <ErrorPrimitive.Message />
+      </ErrorPrimitive.Root>
+    </MessagePrimitive.Root>
+  );
+}

package/src/components/chat/skins/thread-skin-host-contract.ts

@@ -0,0 +1,102 @@
+/**
+ * What a host must provide so a stock skin renders correctly (WS3).
+ *
+ * "What a skin needs to render correctly" used to be implicit — /baseline
+ * learned each item the hard way, one bug at a time. This descriptor names
+ * them so a new host mounts `<Skin />` and cannot get it subtly wrong.
+ * WS4 carries this contract into the package alongside the skins.
+ *
+ * Each item cites the file that implements it. The companion test pins every
+ * item against the actual sources, so drift fails loudly.
+ */
+export interface SkinHostContract {
+  /** Per-skin scope marker the theme grammar keys off. */
+  scopeMarker: {
+    attribute: "data-thread-skin";
+    /**
+     * Hosts set this per skin on their wrapper; the package
+     * ThreadPrimitive.Root additionally hard-codes "digichat"
+     * (gallery-thread/thread.aui.tsx) so the first-party thread
+     * always matches its theme grammar.
+     */
+    setBy: string[];
+  };
+  /** Tailwind must scan the kit or kit-only utilities are dropped (diamonds). */
+  tailwindSources: {
+    hostStylesheet: string;
+    sourceDirective: string;
+  };
+  /**
+   * Font variables the grammar references (else the declaration is invalid).
+   *
+   * DIG-2375 moved the `next/font` call out of the layout into the surface's one
+   * font config, so the host now has two files to satisfy: the config that
+   * loads the face, and the layout that applies `fontVariables` to `<html>`.
+   */
+  fontVariables: {
+    /** Face variable the host font config sets. */
+    variable: "--font-mono-face";
+    /** The single file allowed to call `next/font` for this host. */
+    hostFontConfig: string;
+    /** Layout that applies `fontVariables` from that config. */
+    hostLayout: string;
+    /**
+     * Retired-name alias the skin CSS still reads. It is a plain CSS alias in
+     * `digichat-app-theme.css`, not a loader, so swapping the face never
+     * re-ships a second font file.
+     */
+    alias: "--font-geist-mono";
+  };
+  /** Theme dataset + classes the first-party palette hangs off. */
+  themeRoot: {
+    dataset: "theme";
+    classes: ["light", "dark"];
+    hostClient: string;
+  };
+  /** Prefs host gating the `/` palette + `@`-mention. */
+  prefsHost: {
+    module: string;
+    hook: "useStockChatPrefs";
+    hostClient: string;
+  };
+  /** Package stylesheets every stock-skin host must load (WS1). */
+  stylesheets: string[];
+}
+
+export const DIGICHAT_SKIN_HOST_CONTRACT: SkinHostContract = {
+  scopeMarker: {
+    attribute: "data-thread-skin",
+    // Step 1 (single-route plan): ProductStockShell delegates its render core
+    // to DigiChatHost, which now renders the marker for all product/embed
+    // traffic. chat-shell + embed-client keep their own wrapper markers.
+    setBy: [
+      "src/components/stock/digichat-host.tsx",
+      "src/components/chat-shell.tsx",
+      "src/app/(digichat)/embed/embed-client.tsx",
+    ],
+  },
+  tailwindSources: {
+    hostStylesheet: "src/app/(baseline)/baseline.css",
+    sourceDirective: '@source "../../../../../packages/ui/src/components/chat"',
+  },
+  fontVariables: {
+    variable: "--font-mono-face",
+    hostFontConfig: "src/app/fonts.ts",
+    hostLayout: "src/app/(baseline)/layout.tsx",
+    alias: "--font-geist-mono",
+  },
+  themeRoot: {
+    dataset: "theme",
+    classes: ["light", "dark"],
+    hostClient: "src/app/(baseline)/baseline/baseline-client.tsx",
+  },
+  prefsHost: {
+    module: "@digithings-ai/ui/chat/stock",
+    hook: "useStockChatPrefs",
+    hostClient: "src/app/(baseline)/baseline/baseline-client.tsx",
+  },
+  stylesheets: [
+    "@digithings-ai/ui/styles/digichat-app-theme.css",
+    "@digithings-ai/ui/styles/chat-digichat.css",
+  ],
+};

package/src/components/chat/skins/thread-skin-view.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { lazy, Suspense, type FC, type LazyExoticComponent } from "react";
+import type { ComposerLayout } from "@digithings-ai/ui/chat/thread";
+import { isCloneSkin, type CloneSkin, type ThreadSkin } from "./thread-skins";
+import type { DigichatSkinOptions } from "./digichat";
+import { ChatPrivateModeProvider } from "../stock/chat-private-mode";
+
+// Per-skin on-demand chunks (WS4 Step 5): each skin ships only when its id is
+// selected. The `.then` interop maps the named export to the default that
+// lazy() expects. Imports of types only (above) are erased, so they pull no
+// chunk; the DigichatSkin *value* must stay out of the barrel for the same
+// reason (hosts render it exclusively through ThreadSkinView).
+const Base = lazy(() =>
+  import("./base/thread").then((m) => ({ default: m.Base })),
+);
+const ChatGPT = lazy(() =>
+  import("./chatgpt").then((m) => ({ default: m.ChatGPT })),
+);
+const Claude = lazy(() =>
+  import("./claude").then((m) => ({ default: m.Claude })),
+);
+const Grok = lazy(() =>
+  import("./grok").then((m) => ({ default: m.Grok })),
+);
+const Gemini = lazy(() =>
+  import("./gemini").then((m) => ({ default: m.Gemini })),
+);
+const Perplexity = lazy(() =>
+  import("./perplexity").then((m) => ({ default: m.Perplexity })),
+);
+const ReactInkWeb = lazy(() =>
+  import("./react-ink").then((m) => ({ default: m.ReactInkWeb })),
+);
+const ExpoReactNative = lazy(() =>
+  import("./expo-react-native").then((m) => ({ default: m.ExpoReactNative })),
+);
+const ConfigurableBase = lazy(() =>
+  import("./base-assistant-ui").then((m) => ({ default: m.ConfigurableBase })),
+);
+const WebpageAssistant = lazy(() =>
+  import("./webpage-assistant").then((m) => ({ default: m.WebpageAssistant })),
+);
+const ProductPageAssistant = lazy(() =>
+  import("./product-page-assistant").then((m) => ({
+    default: m.ProductPageAssistant,
+  })),
+);
+const DigichatSkin = lazy(() =>
+  import("./digichat").then((m) => ({ default: m.DigichatSkin })),
+);
+// The product `/` palette for every skin that is not digichat (digichat wires
+// the same palette into its own composer). Its own chunk, like the skins.
+const SkinPaletteBridge = lazy(() =>
+  import("../stock/skin-palette-bridge").then((m) => ({
+    default: m.SkinPaletteBridge,
+  })),
+);
+
+const CLONE_THREADS: Record<CloneSkin, LazyExoticComponent<FC>> = {
+  chatgpt: ChatGPT,
+  claude: Claude,
+  grok: Grok,
+  gemini: Gemini,
+  perplexity: Perplexity,
+};
+
+export type ThreadSkinViewProps = {
+  skin: ThreadSkin;
+  /** Explicit composer layout for the digichat skin (else expanded). */
+  composerLayout?: ComposerLayout;
+  /**
+   * First-party skin wiring (product copy, slash commands, pending headers).
+   * Provided by the host app — e.g. digichat's `DIGICHAT_SKIN_OPTIONS`.
+   * The `digichat` branch reads all of it. Every other skin gets the same
+   * slash palette (`slash`, `privateMode`) through `SkinPaletteBridge`; the
+   * rest (copy, layout) stays digichat-only (WS4).
+   */
+  digichat?: DigichatSkinOptions;
+};
+
+/**
+ * Mount the selected Thread: 11 official assistant-ui catalog ids, plus
+ * first-party `digichat`. `base` is the fixed Base demo. `base-assistant-ui`
+ * is the same Thread inside the official brandTheme / labels config shell.
+ * Layout templates wrap a Thread in docs / product chrome.
+ * `react-ink` and `expo-react-native` are web facsimiles; TTY / Expo sources
+ * stay under `reference/assistant-ui-templates/` and are not imported here.
+ */
+export function ThreadSkinView(props: ThreadSkinViewProps) {
+  // Suspense boundary for the per-skin chunks above. Fallback is null so no
+  // loading chrome flashes when a newly selected skin's chunk arrives late;
+  // once loaded the render is identical to the static version (WS4 Step 5).
+  // Every skin reads the session's private flag from here (the message
+  // export menus hide, the export runners refuse), not only digichat.
+  return (
+    <ChatPrivateModeProvider privateMode={props.digichat?.privateMode}>
+      <Suspense fallback={null}>
+        <ThreadSkinSwitch {...props} />
+      </Suspense>
+    </ChatPrivateModeProvider>
+  );
+}
+
+function ThreadSkinSwitch({
+  skin,
+  composerLayout,
+  digichat,
+}: ThreadSkinViewProps) {
+  if (skin === "digichat") {
+    return <DigichatSkin composerLayout={composerLayout} {...digichat} />;
+  }
+  if (!digichat?.slash) return <SkinThread skin={skin} />;
+  return (
+    <SkinPaletteBridge
+      slash={digichat.slash}
+      privateMode={digichat.privateMode}
+    >
+      <SkinThread skin={skin} />
+    </SkinPaletteBridge>
+  );
+}
+
+function SkinThread({ skin }: { skin: Exclude<ThreadSkin, "digichat"> }) {
+  if (isCloneSkin(skin)) {
+    const Clone = CLONE_THREADS[skin];
+    return <Clone />;
+  }
+
+  if (skin === "base") {
+    return <Base />;
+  }
+
+  if (skin === "base-assistant-ui") {
+    return <ConfigurableBase />;
+  }
+
+  if (skin === "react-ink") {
+    return <ReactInkWeb />;
+  }
+
+  if (skin === "expo-react-native") {
+    return <ExpoReactNative />;
+  }
+
+  if (skin === "webpage-assistant") {
+    return <WebpageAssistant />;
+  }
+
+  return <ProductPageAssistant />;
+}
+
+// Registry + host contract ship with the skins so any host can list skin ids
+// and satisfy the mount requirements without importing the app (WS4).
+export * from "./thread-skins";
+export * from "./thread-skin-host-contract";

package/src/components/chat/skins/thread-skins.ts

@@ -0,0 +1,143 @@
+/**
+ * Official assistant-ui templates a digichat container can pick at deploy time.
+ *
+ * Ids 1–11 match assistant-ui `list_templates`. `digichat` is the first-party
+ * Thread — the gallery `/chatbot` module at `@digithings-ai/ui/chat/thread`
+ * (`thread.aui.tsx` + slots + cube glyphs), not a catalog clone.
+ * `base` is the fixed Base demo. `base-assistant-ui` is the configurable
+ * Base shell (brandTheme + labels). Same Thread, different catalog product.
+ *
+ * They are vendored in the image — not a CDN switch and not shadcn styles.
+ */
+
+
+
+export const THREAD_SKINS = [
+  "base",
+  "chatgpt",
+  "claude",
+  "grok",
+  "gemini",
+  "perplexity",
+  "react-ink",
+  "expo-react-native",
+  "base-assistant-ui",
+  "webpage-assistant",
+  "product-page-assistant",
+  "digichat",
+] as const;
+
+export type ThreadSkin = (typeof THREAD_SKINS)[number];
+
+export const DEFAULT_THREAD_SKIN: ThreadSkin = "base";
+
+/** First-party marketing / OCC hosts. Unset `skin` → `digichat`, not catalog `base`. */
+export const FIRST_PARTY_DEFAULT_SKIN_HOSTS: ReadonlySet<string> = new Set([
+  "digithings.ai",
+  "www.digithings.ai",
+  "occ.digithings.ai",
+]);
+
+export const FIRST_PARTY_DEFAULT_SKIN_SLUGS: ReadonlySet<string> = new Set([
+  "digithings",
+  "digithings-ai",
+  "occ",
+]);
+
+/**
+ * Runtime default for a tenant host/slug when YAML / DIGICHAT_EMBED_TENANTS
+ * omit `skin`. Third-party tenants stay on catalog `base`. Explicit `skin`
+ * must still win at the call site.
+ */
+export function defaultThreadSkinForTenant(opts: {
+  host?: string | null;
+  slug?: string | null;
+  aliases?: readonly string[] | null;
+}): ThreadSkin {
+  const hosts = [opts.host, ...(opts.aliases ?? [])];
+  for (const raw of hosts) {
+    const host = raw?.trim().toLowerCase().split("/")[0].split(":")[0].replace(/\.$/, "");
+    if (host && FIRST_PARTY_DEFAULT_SKIN_HOSTS.has(host)) return "digichat";
+  }
+  const slug = opts.slug?.trim().toLowerCase();
+  if (slug && FIRST_PARTY_DEFAULT_SKIN_SLUGS.has(slug)) return "digichat";
+  return DEFAULT_THREAD_SKIN;
+}
+
+export const CLONE_SKINS = [
+  "chatgpt",
+  "claude",
+  "grok",
+  "gemini",
+  "perplexity",
+] as const;
+
+export type CloneSkin = (typeof CLONE_SKINS)[number];
+
+/**
+ * Catalog templates that own the viewport (docs shell, product dashboard,
+ * Expo phone frame). Host chrome (ChatShell CLI, embed header, memory
+ * sidebar) must not wrap these — the template is the page.
+ */
+export const LAYOUT_SKINS = [
+  "webpage-assistant",
+  "product-page-assistant",
+  "expo-react-native",
+] as const;
+
+export type LayoutSkin = (typeof LAYOUT_SKINS)[number];
+
+
+
+export function threadSkinChoices(): string {
+  return THREAD_SKINS.join(", ");
+}
+
+export function isThreadSkin(value: unknown): value is ThreadSkin {
+  return typeof value === "string" && (THREAD_SKINS as readonly string[]).includes(value);
+}
+
+export function isCloneSkin(value: ThreadSkin): value is CloneSkin {
+  return (CLONE_SKINS as readonly string[]).includes(value);
+}
+
+/**
+ * Skins that carry the digithings website's dotted vertical guide lines
+ * (`LayoutLines`). The lines are part of the house look, so only the house
+ * skin draws them; every other skin hides them by default.
+ */
+export const SITE_RAILS_SKINS = ["digichat"] as const;
+
+export function skinShowsSiteRails(value: string | null | undefined): boolean {
+  return (SITE_RAILS_SKINS as readonly string[]).includes(value ?? "");
+}
+
+export function skinOwnsPageChrome(value: ThreadSkin): boolean {
+  return (LAYOUT_SKINS as readonly string[]).includes(value);
+}
+
+export const FRAMED_CHROME_MODES = ["modal", "sidebar"] as const;
+export type FramedChromeMode = (typeof FRAMED_CHROME_MODES)[number];
+
+/**
+ * True for the modes that mount the chat inside a frame rather than the page.
+ *
+ * Lives here, not in `components/stock/presentation-frame.tsx`: that module is
+ * `"use client"`, and `app/(digichat)/page.tsx` is a server component, so
+ * importing the predicate from there made the server *invoke* a client function
+ * at render time ("Attempted to call isFramedPresentation() from the server but
+ * isFramedPresentation is on the client"). This module is plain, so both sides
+ * can share one definition of the invariant.
+ */
+export function isFramedPresentation(mode: string): mode is FramedChromeMode {
+  return (FRAMED_CHROME_MODES as readonly string[]).includes(mode);
+}
+
+/** Parse a query/env/YAML value; unknown → default. */
+export function parseThreadSkin(
+  value: string | null | undefined,
+  fallback: ThreadSkin = DEFAULT_THREAD_SKIN,
+): ThreadSkin {
+  const trimmed = value?.trim().toLowerCase();
+  return isThreadSkin(trimmed) ? trimmed : fallback;
+}