@dbx-tools/ui 0.9.111 → 0.9.116

package/index.ts

@@ -3,7 +3,7 @@
 // Hand edits are overwritten on the next watch; this file is read-only.
 
 export const PACKAGE_IDENTIFIER = "@dbx-tools/ui";
-export const PACKAGE_VERSION = "0.9.111";
+export const PACKAGE_VERSION = "0.9.116";
 export * as authReactAuthClient from "./src/auth/react/auth-client.ts";
 export * as authReactAuthGate from "./src/auth/react/auth-gate.tsx";
 export * as authReactPasskeyManager from "./src/auth/react/passkey-manager.tsx";
@@ -16,8 +16,10 @@ export * as emailReactEmailCompose from "./src/email/react/email-compose.tsx";
 export * as emailReactFields from "./src/email/react/fields.ts";
 export * as reactAppkitUi from "./src/react/appkit-ui.ts";
 export * as reactBrandPicker from "./src/react/brand-picker.tsx";
+export * as reactHighlightedCode from "./src/react/highlighted-code.tsx";
 export * as reactRecordPreview from "./src/react/record-preview.tsx";
 export * as reactRecordPreviewData from "./src/react/record-preview-data.ts";
+export * as reactShikiPlugin from "./src/react/shiki-plugin.ts";
 export * as searchReactSearchBox from "./src/search/react/search-box.tsx";
 export * as searchReactSearchResults from "./src/search/react/search-results.tsx";
 export * as searchReactUseSearch from "./src/search/react/use-search.ts";
@@ -36,6 +38,8 @@ export type { EmailComposeProps } from "./src/email/react/email-compose.tsx";
 export { joinAddresses, parseAddresses, attachmentNames } from "./src/email/react/fields.ts";
 export type { EmailDraft } from "./src/email/react/fields.ts";
 export type { BrandPreset, BrandPickerProps } from "./src/react/brand-picker.tsx";
+export { HighlightedCodeBlock, JsonBlock } from "./src/react/highlighted-code.tsx";
+export type { DetectedCodeLanguage } from "./src/react/highlighted-code.tsx";
 export type { RecordPreviewProps } from "./src/react/record-preview.tsx";
 export type { RecordPreviewRow } from "./src/react/record-preview-data.ts";
 export type { SearchBoxProps } from "./src/search/react/search-box.tsx";

package/package.json

@@ -30,12 +30,13 @@
   },
   "dependencies": {
     "@databricks/appkit-ui": "0.81.0",
-    "@dbx-tools/shared-auth": "^0.9.111",
-    "@dbx-tools/shared-core": "^0.9.111",
-    "@dbx-tools/shared-email": "^0.9.111",
-    "@dbx-tools/shared-email-template": "^0.9.111",
-    "@dbx-tools/shared-search": "^0.9.111",
+    "@dbx-tools/shared-auth": "^0.9.116",
+    "@dbx-tools/shared-core": "^0.9.116",
+    "@dbx-tools/shared-email": "^0.9.116",
+    "@dbx-tools/shared-email-template": "^0.9.116",
+    "@dbx-tools/shared-search": "^0.9.116",
     "lucide-react": "^0.554.0",
+    "shiki": "^3.0.0",
     "streamdown": "^2.5.0",
     "tailwindcss": "^4.3.2"
   },
@@ -43,7 +44,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.9.111",
+  "version": "0.9.116",
   "dbxToolsConfig": {
     "tags": [
       "ui"
@@ -53,6 +54,7 @@
   "exports": {
     "./react": "./src/react/index.ts",
     "./styles.css": "./src/styles.css",
+    "./*": "./src/*/index.ts",
     "./branding/react": "./src/branding/react/index.ts",
     "./branding/browser": "./src/branding/browser.ts",
     "./branding/assets": "./src/branding/generated/assets.ts",

package/src/branding/generated/index.ts

@@ -0,0 +1,6 @@
+// GENERATED by projen watch - DO NOT EDIT.
+// Regenerated from the exporting modules in ./src.
+// Hand edits are overwritten on the next watch; this file is read-only.
+
+export * as assets from "./assets.ts";
+export { dbxToolsAssetSvg, dbxToolsAssetDataUrls } from "./assets.ts";

package/src/branding/index.ts

@@ -0,0 +1,8 @@
+// GENERATED by projen watch - DO NOT EDIT.
+// Regenerated from the exporting modules in ./src.
+// Hand edits are overwritten on the next watch; this file is read-only.
+
+export * as browser from "./browser.ts";
+export * as generated from "./generated/index.ts";
+export { resolveBrandAsset } from "./browser.ts";
+export type { BrandAssetResolver, ApplyBrandContextOptions } from "./browser.ts";

package/src/react/_shiki-runtime.ts

@@ -0,0 +1,27 @@
+/**
+ * Fine-grained Shiki runtime containing only the supported UI languages.
+ *
+ * This module is itself dynamically imported, so its grammar, theme, and WASM
+ * dependencies remain off the network until a supported code block appears.
+ */
+import { createHighlighterCore } from "shiki/core";
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+import bash from "shiki/langs/bash.mjs";
+import javascript from "shiki/langs/javascript.mjs";
+import json from "shiki/langs/json.mjs";
+import markdown from "shiki/langs/markdown.mjs";
+import python from "shiki/langs/python.mjs";
+import sql from "shiki/langs/sql.mjs";
+import typescript from "shiki/langs/typescript.mjs";
+import yaml from "shiki/langs/yaml.mjs";
+import githubDarkHighContrast from "shiki/themes/github-dark-high-contrast.mjs";
+import githubLightHighContrast from "shiki/themes/github-light-high-contrast.mjs";
+
+/** Create the shared highlighter with the exact configured language set. */
+export function createHighlighter() {
+  return createHighlighterCore({
+    themes: [githubLightHighContrast, githubDarkHighContrast],
+    langs: [sql, python, typescript, javascript, json, bash, yaml, markdown],
+    engine: createOnigurumaEngine(import("shiki/wasm")),
+  });
+}

package/src/react/highlighted-code.tsx

@@ -0,0 +1,91 @@
+/**
+ * Shared syntax-highlighted code surfaces for AppKit-oriented UI packages.
+ *
+ * @module
+ */
+
+import { json } from "@dbx-tools/shared-core";
+import { useEffect, useState } from "react";
+
+import { cn } from "./appkit-ui.ts";
+import { highlightToHtml } from "./shiki-plugin.ts";
+
+export { createShikiPlugin, highlightToHtml } from "./shiki-plugin.ts";
+
+/** Code languages detected automatically in free-form text fields. */
+export type DetectedCodeLanguage = "sql" | "python" | "typescript" | "bash" | "json";
+
+/** Detect a supported code language from a complete free-form text value. */
+export function detectCodeLanguage(source: string): DetectedCodeLanguage | undefined {
+  const trimmed = source.trim();
+  if (/^(?:select|with|insert|update|delete|merge|create|alter)\b/i.test(trimmed)) return "sql";
+  if (/^(?:from\s+\S+\s+import|import\s+\S+|def\s+\w+|class\s+\w+):?/m.test(trimmed)) {
+    return "python";
+  }
+  if (/^(?:const|let|var|interface|type|export|import)\b/m.test(trimmed)) return "typescript";
+  if (/^(?:#!.*\b(?:ba|z|k)?sh\b|(?:cd|ls|cat|grep|find|bun|npm|pnpm|yarn)\s)/m.test(trimmed)) {
+    return "bash";
+  }
+  if (
+    (trimmed.startsWith("{") || trimmed.startsWith("[")) &&
+    trimmed.length > 1 &&
+    json.parse(trimmed) !== undefined
+  ) {
+    return "json";
+  }
+  return undefined;
+}
+
+/** Resolve syntax-highlighted HTML while preserving plaintext during lazy load. */
+export function useHighlightedHtml(source: string, language: string): string | null {
+  const [highlighted, setHighlighted] = useState<{
+    source: string;
+    language: string;
+    html: string;
+  } | null>(null);
+  useEffect(() => {
+    let active = true;
+    void highlightToHtml(source, language).then((result) => {
+      if (active) setHighlighted({ source, language, html: result });
+    });
+    return () => {
+      active = false;
+    };
+  }, [language, source]);
+  return highlighted?.source === source && highlighted.language === language
+    ? highlighted.html
+    : null;
+}
+
+/** Render code with the shared lazily loaded Shiki runtime. */
+export const HighlightedCodeBlock = ({
+  source,
+  language,
+  className,
+}: {
+  source: string;
+  language: string;
+  className?: string;
+}) => {
+  const html = useHighlightedHtml(source, language);
+  return (
+    <pre
+      data-language={language}
+      className={cn(
+        "max-w-full overflow-auto whitespace-pre-wrap break-words font-mono text-xs leading-relaxed",
+        className,
+      )}
+    >
+      {html === null ? (
+        <code>{source}</code>
+      ) : (
+        <code data-dbx-highlighted-code dangerouslySetInnerHTML={{ __html: html }} />
+      )}
+    </pre>
+  );
+};
+
+/** Render formatted JSON with the shared lazily loaded Shiki runtime. */
+export const JsonBlock = ({ json, className }: { json: string; className?: string }) => (
+  <HighlightedCodeBlock source={json} language="json" className={className} />
+);

package/src/react/index.ts

@@ -1,3 +1,4 @@
 export * from "./appkit-ui.ts";
 export * from "./brand-picker.tsx";
+export * from "./highlighted-code.tsx";
 export * from "./record-preview.tsx";

package/src/react/record-preview-data.ts

@@ -4,7 +4,7 @@
  * @module
  */
 
-import { stringUtils } from "@dbx-tools/shared-core";
+import { json, object as objectUtils, stringUtils } from "@dbx-tools/shared-core";
 
 /** One field shown in the table view of {@link RecordPreview}. */
 export interface RecordPreviewRow {
@@ -39,6 +39,18 @@ export function formatRecordPreviewJson(value: unknown): string {
   }
 }
 
+/** Parse a string whose complete value is a serialized JSON object or array. */
+export function parseNestedJsonText(
+  value: unknown,
+): Record<string, unknown> | unknown[] | undefined {
+  if (typeof value !== "string") return undefined;
+  const trimmed = value.trim();
+  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return undefined;
+  const parsed = json.parse(trimmed);
+  if (Array.isArray(parsed)) return parsed;
+  return objectUtils.isRecord(parsed) ? parsed : undefined;
+}
+
 /** YAML document fence at the start of a markdown file (`---` ... `---`). */
 const FRONTMATTER = /^---\r?\n([\s\S]*?)\r?\n---(?:\r?\n|$)/;
 

package/src/react/record-preview.tsx

@@ -6,7 +6,7 @@
  */
 
 import { BracesIcon, Table2Icon } from "lucide-react";
-import { useState } from "react";
+import { Fragment, useState } from "react";
 import { Streamdown } from "streamdown";
 
 import {
@@ -21,10 +21,12 @@ import {
   TooltipTrigger,
   cn,
 } from "./appkit-ui.ts";
+import { detectCodeLanguage, HighlightedCodeBlock, JsonBlock } from "./highlighted-code.tsx";
 import {
   formatRecordPreviewJson,
   looksLikeMarkdown,
   markdownForPreview,
+  parseNestedJsonText,
   recordPreviewRows,
   type RecordPreviewRow,
 } from "./record-preview-data.ts";
@@ -34,6 +36,7 @@ export {
   formatRecordPreviewJson,
   looksLikeMarkdown,
   markdownForPreview,
+  parseNestedJsonText,
   recordPreviewRows,
 } from "./record-preview-data.ts";
 
@@ -41,7 +44,8 @@ export {
 const MARKDOWN_CELL_CLASSES =
   "min-w-0 max-w-full text-[11px] leading-snug [&_p]:my-0.5 [&_p]:leading-snug [&_ul]:my-0.5 [&_ol]:my-0.5 [&_li]:my-0 [&_h1]:my-1 [&_h1]:text-[11px] [&_h1]:font-semibold [&_h2]:my-1 [&_h2]:text-[11px] [&_h2]:font-semibold [&_h3]:my-1 [&_h3]:text-[11px] [&_h3]:font-semibold [&_pre]:my-1 [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:bg-background/60 [&_pre]:p-1.5 [&_pre]:text-[10px] [&_code]:text-[10px]";
 
-const NESTED_DEPTH = 2;
+const MAX_NESTED_DEPTH = 12;
+const MAX_INDENT_DEPTH = 4;
 
 /** Props for {@link RecordPreview}. */
 export interface RecordPreviewProps {
@@ -55,55 +59,276 @@ export interface RecordPreviewProps {
 export function RecordPreview({ value, className }: RecordPreviewProps) {
   const [raw, setRaw] = useState(false);
   const rows = recordPreviewRows(value);
+  const rawJson = formatRecordPreviewJson(value);
   return (
-    <div className={cn("relative min-w-0", className)}>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            type="button"
-            size="icon"
-            variant="ghost"
-            aria-pressed={raw}
-            aria-label={raw ? "Show table" : "Show JSON"}
-            className="absolute right-1 top-1 z-10 size-6"
-            onClick={() => setRaw((current) => !current)}
-          >
-            {raw ? <Table2Icon className="size-3" /> : <BracesIcon className="size-3" />}
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>{raw ? "Table" : "JSON"}</TooltipContent>
-      </Tooltip>
+    <div
+      className={cn(
+        "relative min-w-0 [&_[data-slot=table-container]]:overflow-x-hidden",
+        className,
+      )}
+    >
+      <div className="sticky top-1 z-10 float-right mr-1 h-0">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              size="icon"
+              variant="ghost"
+              aria-pressed={raw}
+              aria-label={raw ? "Show table" : "Show JSON"}
+              className="size-6 bg-background/85 backdrop-blur-sm"
+              onClick={() => setRaw((current) => !current)}
+            >
+              {raw ? <Table2Icon className="size-3" /> : <BracesIcon className="size-3" />}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{raw ? "Table" : "JSON"}</TooltipContent>
+        </Tooltip>
+      </div>
       {raw ? (
-        <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words rounded bg-background/40 p-2 pr-8 font-mono text-[11px] leading-relaxed">
-          {formatRecordPreviewJson(value)}
+        <JsonBlock json={rawJson} className="rounded bg-background/40 p-2 pr-8 text-[11px]" />
+      ) : rows.length === 0 ? (
+        <pre className="whitespace-pre-wrap break-words rounded bg-background/40 p-2 pr-8 font-mono text-[11px] leading-relaxed">
+          {rawJson}
         </pre>
       ) : (
-        <RecordTable rows={rows} depth={0} />
+        <RecordTable rows={rows} />
       )}
     </div>
   );
 }
 
-function RecordTable({ rows, depth }: { rows: RecordPreviewRow[]; depth: number }) {
+function RecordTable({ rows }: { rows: RecordPreviewRow[] }) {
   if (rows.length === 0) return null;
   return (
-    <Table className="text-[11px]">
-      <TableBody>
+    <div className="min-w-0 px-2 pb-2">
+      <Table className="table-fixed text-[11px]">
+        <TableBody>
+          {rows.map((row) => (
+            <RecordRow key={row.key} row={row} depth={0} path={row.key} />
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+function RecordRow({
+  row,
+  depth,
+  path,
+  divided,
+}: {
+  row: RecordPreviewRow;
+  depth: number;
+  path: string;
+  divided?: boolean;
+}) {
+  const nested = nestedRecordValue(row.value);
+  if (!nested) {
+    return <FieldRow row={row} depth={depth} divided={divided} />;
+  }
+  return (
+    <Fragment>
+      <SectionRow
+        label={row.label}
+        depth={depth}
+        divided={divided}
+        parsedFromText={nested.parsedFromText}
+      />
+      <NestedRows value={nested.value} depth={depth + 1} path={path} />
+    </Fragment>
+  );
+}
+
+function FieldRow({
+  row,
+  depth,
+  divided,
+}: {
+  row: RecordPreviewRow;
+  depth: number;
+  divided?: boolean;
+}) {
+  return (
+    <TableRow className={cn("hover:bg-transparent", divided && "border-t-2 border-border/50")}>
+      <TableHead
+        className="h-auto w-28 align-top whitespace-normal px-0 py-1.5 pr-2 font-medium text-muted-foreground sm:w-[8.5rem]"
+        style={{ paddingLeft: rowIndent(depth) }}
+      >
+        {row.label}
+      </TableHead>
+      <TableCell className="min-w-0 whitespace-normal px-0 py-1.5 pr-8 align-top [overflow-wrap:anywhere]">
+        <RecordValue value={row.value} depth={depth} />
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function SectionRow({
+  label,
+  depth,
+  divided,
+  parsedFromText,
+}: {
+  label: string;
+  depth: number;
+  divided?: boolean;
+  parsedFromText: boolean;
+}) {
+  return (
+    <TableRow
+      className={cn("border-b-0 hover:bg-transparent", divided && "border-t-2 border-border/50")}
+    >
+      <TableHead
+        colSpan={2}
+        className="h-auto px-0 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-wide text-foreground/85"
+        style={{ paddingLeft: rowIndent(depth) }}
+      >
+        <span className="inline-flex items-center gap-1">
+          {label}
+          {parsedFromText ? (
+            <BracesIcon
+              className="size-3 text-muted-foreground"
+              aria-label="JSON parsed from text"
+            />
+          ) : null}
+        </span>
+      </TableHead>
+    </TableRow>
+  );
+}
+
+function NestedRows({ value, depth, path }: { value: unknown; depth: number; path: string }) {
+  if (depth > MAX_NESTED_DEPTH) {
+    return <ValueRow value={value} depth={depth} />;
+  }
+  if (Array.isArray(value)) {
+    return (
+      <Fragment>
+        {value.map((item, index) => (
+          <ArrayItemRows
+            key={`${path}.${index}`}
+            value={item}
+            depth={depth}
+            path={`${path}.${index}`}
+            divided={index > 0}
+          />
+        ))}
+      </Fragment>
+    );
+  }
+  if (value != null && typeof value === "object") {
+    const rows = recordPreviewRows(value);
+    if (rows.length === 0) return <ValueRow value={value} depth={depth} />;
+    return (
+      <Fragment>
         {rows.map((row) => (
-          <TableRow key={row.key} className="hover:bg-transparent">
-            <TableHead className="w-[8.5rem] align-top whitespace-nowrap px-2 py-1.5 font-medium text-muted-foreground">
-              {row.label}
-            </TableHead>
-            <TableCell className="align-top break-words px-2 py-1.5 pr-8">
-              <RecordValue value={row.value} depth={depth} />
-            </TableCell>
-          </TableRow>
+          <RecordRow
+            key={`${path}.${row.key}`}
+            row={row}
+            depth={depth}
+            path={`${path}.${row.key}`}
+          />
         ))}
-      </TableBody>
-    </Table>
+      </Fragment>
+    );
+  }
+  return <ValueRow value={value} depth={depth} />;
+}
+
+function ArrayItemRows({
+  value,
+  depth,
+  path,
+  divided,
+}: {
+  value: unknown;
+  depth: number;
+  path: string;
+  divided: boolean;
+}) {
+  const nested = nestedRecordValue(value);
+  if (nested?.parsedFromText) {
+    return (
+      <Fragment>
+        <NestedTextMarkerRow depth={depth} divided={divided} />
+        <NestedRows value={nested.value} depth={depth + 1} path={path} />
+      </Fragment>
+    );
+  }
+  if (value != null && typeof value === "object") {
+    const rows = recordPreviewRows(value);
+    if (rows.length === 0) return <ValueRow value={value} depth={depth} divided={divided} />;
+    return (
+      <Fragment>
+        {rows.map((row, index) => (
+          <RecordRow
+            key={`${path}.${row.key}`}
+            row={row}
+            depth={depth}
+            path={`${path}.${row.key}`}
+            divided={divided && index === 0}
+          />
+        ))}
+      </Fragment>
+    );
+  }
+  return <ValueRow value={value} depth={depth} divided={divided} />;
+}
+
+function NestedTextMarkerRow({ depth, divided }: { depth: number; divided: boolean }) {
+  return (
+    <TableRow className={cn("border-b-0 hover:bg-transparent", divided && "border-t-2")}>
+      <TableHead
+        colSpan={2}
+        className="h-auto px-0 pb-0.5 pt-2 text-muted-foreground"
+        style={{ paddingLeft: rowIndent(depth) }}
+      >
+        <BracesIcon className="size-3" aria-label="JSON parsed from text" />
+      </TableHead>
+    </TableRow>
   );
 }
 
+function ValueRow({ value, depth, divided }: { value: unknown; depth: number; divided?: boolean }) {
+  return (
+    <TableRow className={cn("hover:bg-transparent", divided && "border-t-2 border-border/50")}>
+      <TableHead
+        aria-hidden
+        className="h-auto w-28 px-0 py-1.5 pr-2 sm:w-[8.5rem]"
+        style={{ paddingLeft: rowIndent(depth) }}
+      />
+      <TableCell className="min-w-0 whitespace-normal px-0 py-1.5 pr-8 align-top [overflow-wrap:anywhere]">
+        <RecordValue value={value} depth={depth} />
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function rowIndent(depth: number): string {
+  return `${Math.min(depth, MAX_INDENT_DEPTH) * 0.9}rem`;
+}
+
+function nestedRecordValue(
+  value: unknown,
+): { value: Record<string, unknown> | unknown[]; parsedFromText: boolean } | undefined {
+  const parsed = parseNestedJsonText(value);
+  if (parsed) return { value: parsed, parsedFromText: true };
+  if (value == null || typeof value !== "object") return undefined;
+  if (Array.isArray(value)) {
+    const hasNestedValue = value.some(
+      (item) =>
+        (item != null && typeof item === "object") || parseNestedJsonText(item) !== undefined,
+    );
+    if (!hasNestedValue) return undefined;
+  }
+  return {
+    value: value as Record<string, unknown> | unknown[],
+    parsedFromText: false,
+  };
+}
+
 function RecordValue({ value, depth }: { value: unknown; depth: number }) {
   if (value == null) {
     return <span className="text-muted-foreground">null</span>;
@@ -112,6 +337,16 @@ function RecordValue({ value, depth }: { value: unknown; depth: number }) {
     return <span className="tabular-nums">{String(value)}</span>;
   }
   if (typeof value === "string") {
+    const language = detectCodeLanguage(value);
+    if (language === "sql") {
+      return (
+        <HighlightedCodeBlock
+          source={value}
+          language={language}
+          className="rounded bg-background/60 p-1.5 text-[10px]"
+        />
+      );
+    }
     if (looksLikeMarkdown(value)) {
       return (
         <div className={MARKDOWN_CELL_CLASSES}>
@@ -121,11 +356,23 @@ function RecordValue({ value, depth }: { value: unknown; depth: number }) {
     }
     return <span className="whitespace-pre-wrap break-words">{value}</span>;
   }
-  if (typeof value === "object" && !Array.isArray(value) && depth < NESTED_DEPTH) {
-    return <RecordTable rows={recordPreviewRows(value)} depth={depth + 1} />;
-  }
-  if (Array.isArray(value) && value.every((item) => item == null || typeof item !== "object")) {
-    return <span className="whitespace-pre-wrap break-words">{value.map(String).join(", ")}</span>;
+  if (Array.isArray(value)) {
+    if (value.every((item) => item == null || typeof item !== "object")) {
+      return (
+        <span className="whitespace-pre-wrap break-words">{value.map(String).join(", ")}</span>
+      );
+    }
+    if (depth < MAX_NESTED_DEPTH) {
+      return (
+        <div className="min-w-0 divide-y divide-border/60">
+          {value.map((item, index) => (
+            <div key={index} className="min-w-0 py-1 first:pt-0 last:pb-0">
+              <RecordValue value={item} depth={depth + 1} />
+            </div>
+          ))}
+        </div>
+      );
+    }
   }
   return (
     <pre className="whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed">

package/src/react/shiki-plugin.ts

@@ -0,0 +1,158 @@
+import { stringUtils } from "@dbx-tools/shared-core";
+import type { BundledLanguage, BundledTheme } from "shiki";
+import type { HighlighterCore } from "shiki/core";
+import type { CodeHighlighterPlugin } from "streamdown";
+
+// Streamdown 2.x ships syntax highlighting as an opt-in plugin and has
+// no shiki dependency of its own; without a `code` plugin every fenced
+// block renders as uncolored plaintext. This module provides a small
+// shiki-backed highlighter to wire in via `plugins={{ code }}`.
+
+/**
+ * Languages we highlight in the chat. SQL is the primary one (Genie
+ * query previews); the rest cover code the assistant might emit. Kept
+ * to a curated set so shiki only bundles these grammars.
+ */
+const LANGUAGES = [
+  "text",
+  "plaintext",
+  "txt",
+  "sql",
+  "python",
+  "typescript",
+  "javascript",
+  "json",
+  "bash",
+  "yaml",
+  "markdown",
+] as const;
+
+/** High-contrast theme pair used for every syntax surface. */
+const THEMES = [
+  "github-light-high-contrast",
+  "github-dark-high-contrast",
+] as const satisfies readonly [BundledTheme, BundledTheme];
+
+/** Languages we can tokenize, as a set for O(1) support checks. */
+const SUPPORTED = new Set<string>(LANGUAGES);
+
+let _highlighter: HighlighterCore | null = null;
+let _loading: Promise<HighlighterCore> | null = null;
+
+/** Lazily create the shared shiki highlighter (singleton, loaded once). */
+function loadHighlighter(): Promise<HighlighterCore> {
+  _loading ??= import("./_shiki-runtime.ts")
+    .then(({ createHighlighter }) => createHighlighter())
+    .then((highlighter) => {
+      _highlighter = highlighter;
+      return highlighter;
+    });
+  return _loading;
+}
+
+function splitThemeColor(
+  value: string | undefined,
+  darkVariable: "--shiki-dark" | "--shiki-dark-bg",
+): { light?: string; dark?: string } {
+  if (!value) return {};
+  const marker = `;${darkVariable}:`;
+  const index = value.indexOf(marker);
+  if (index < 0) return { light: value };
+  return {
+    light: value.slice(0, index),
+    dark: value.slice(index + marker.length),
+  };
+}
+
+/** Tokenize `code` with the active themes into Streamdown's result shape. */
+function highlightTokens(h: HighlighterCore, code: string, language: string) {
+  const { tokens, fg, bg, rootStyle } = h.codeToTokens(code, {
+    lang: language as BundledLanguage,
+    themes: { light: THEMES[0], dark: THEMES[1] },
+  });
+  const foreground = splitThemeColor(fg, "--shiki-dark");
+  const background = splitThemeColor(bg, "--shiki-dark-bg");
+  const darkStyles = [
+    foreground.dark ? `--shiki-dark:${foreground.dark}` : "",
+    background.dark ? `--shiki-dark-bg:${background.dark}` : "",
+  ]
+    .filter(Boolean)
+    .join(";");
+  return {
+    tokens,
+    fg: foreground.light,
+    bg: background.light,
+    rootStyle: [rootStyle, darkStyles].filter(Boolean).join(";"),
+  };
+}
+
+/** Escape HTML-significant characters (from the shared string utils). */
+const escapeHtml = stringUtils.escapeHtml;
+
+/**
+ * Highlight `code` into minimal inline HTML: one colored `<span>` per
+ * token, lines joined by real newlines, with no line-number gutter or
+ * per-line wrapper elements. Meant to drop straight into a
+ * `<pre><code>` so the rendered text stays cleanly selectable and
+ * copyable. Falls back to plain escaped text when the language isn't
+ * supported or shiki fails to parse the snippet.
+ */
+export async function highlightToHtml(code: string, language: string): Promise<string> {
+  if (!SUPPORTED.has(language)) return escapeHtml(code);
+  const h = await loadHighlighter();
+  try {
+    const { tokens } = highlightTokens(h, code, language);
+    return tokens
+      .map((line) =>
+        line
+          .map((token) => {
+            const light = token.htmlStyle?.color ?? token.color ?? "inherit";
+            const dark = token.htmlStyle?.["--shiki-dark"] ?? light;
+            const style = `--sdm-c:${light};--shiki-dark:${dark}`;
+            return `<span style="${escapeHtml(style)}">${escapeHtml(token.content)}</span>`;
+          })
+          .join(""),
+      )
+      .join("\n");
+  } catch {
+    return escapeHtml(code);
+  }
+}
+
+/**
+ * shiki-backed code highlighter plugin for Streamdown. The highlighter
+ * loads asynchronously: the first call for any block returns `null`
+ * and resolves through the `callback` once shiki is ready, after which
+ * results are synchronous. Unsupported languages return `null` so the
+ * block stays plaintext rather than throwing.
+ */
+export function createShikiPlugin(): CodeHighlighterPlugin {
+  const isSupported = (language: string): boolean => SUPPORTED.has(language);
+
+  return {
+    name: "shiki",
+    type: "code-highlighter",
+    getSupportedLanguages: () => [...LANGUAGES],
+    getThemes: () => [...THEMES],
+    supportsLanguage: (language) => isSupported(language),
+    highlight: (options, callback) => {
+      if (!isSupported(options.language)) return null;
+      const language = options.language;
+      if (_highlighter) {
+        try {
+          return highlightTokens(_highlighter, options.code, language);
+        } catch {
+          return null;
+        }
+      }
+      void loadHighlighter().then((h) => {
+        try {
+          callback?.(highlightTokens(h, options.code, language));
+        } catch {
+          // Parse failure for this block - leave it as plaintext.
+        }
+      });
+      return null;
+    },
+  };
+}