@principal-ai/subsystems-react 0.30.2 → 0.32.0

package/src/pierre/sourceLang.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, test } from 'bun:test';
+import { isPrettierSourceLang, sourceLangForPath } from './sourceLang';
+
+describe('sourceLangForPath', () => {
+  test('maps JS/TS extensions to their grammar', () => {
+    expect(sourceLangForPath('src/a.ts')).toBe('typescript');
+    expect(sourceLangForPath('src/a.tsx')).toBe('tsx');
+    expect(sourceLangForPath('src/a.mjs')).toBe('javascript');
+    expect(sourceLangForPath('src/a.jsx')).toBe('jsx');
+  });
+
+  test('maps other languages', () => {
+    expect(sourceLangForPath('graphify/dedup.py')).toBe('python');
+    expect(sourceLangForPath('src/lib.rs')).toBe('rust');
+    expect(sourceLangForPath('cmd/main.go')).toBe('go');
+  });
+
+  test('unknown / missing path falls back to text', () => {
+    expect(sourceLangForPath(undefined)).toBe('text');
+    expect(sourceLangForPath('')).toBe('text');
+    expect(sourceLangForPath('Makefile')).toBe('text');
+    expect(sourceLangForPath('src/a.unknownext')).toBe('text');
+  });
+
+  test('C-family stays text (WebKit-safe grammars)', () => {
+    expect(sourceLangForPath('src/main.cpp')).toBe('text');
+    expect(sourceLangForPath('src/graph.h')).toBe('text');
+  });
+});
+
+describe('isPrettierSourceLang', () => {
+  test('true only for the bundled Prettier parsers', () => {
+    for (const lang of ['typescript', 'tsx', 'javascript', 'jsx']) {
+      expect(isPrettierSourceLang(lang)).toBe(true);
+    }
+    for (const lang of ['python', 'rust', 'go', 'text']) {
+      expect(isPrettierSourceLang(lang)).toBe(false);
+    }
+  });
+});

package/src/pierre/sourceLang.ts

@@ -0,0 +1,83 @@
+/**
+ * Source-language inference for a component's declaration.
+ *
+ * The declaration panel is language-agnostic in shape (it renders a normalized
+ * construct), but formatting + highlighting are language-specific: Prettier
+ * only ships JS/TS/CSS/HTML/etc. parsers, and Shiki needs a grammar id. Infer
+ * the language from the component's `file` extension so non-JS/TS sources are
+ * not forced through the TypeScript parser.
+ */
+
+import { isPierreCFamilyPath } from './pierreFileLang';
+
+/** A Shiki language id (e.g. `typescript`, `python`) or `text` when unknown. */
+export type SourceSyntaxLang = string;
+
+const EXT_TO_LANG: Record<string, SourceSyntaxLang> = {
+  ts: 'typescript',
+  mts: 'typescript',
+  cts: 'typescript',
+  tsx: 'tsx',
+  js: 'javascript',
+  mjs: 'javascript',
+  cjs: 'javascript',
+  jsx: 'jsx',
+  py: 'python',
+  pyi: 'python',
+  rb: 'ruby',
+  rs: 'rust',
+  go: 'go',
+  java: 'java',
+  kt: 'kotlin',
+  kts: 'kotlin',
+  swift: 'swift',
+  scala: 'scala',
+  php: 'php',
+  cs: 'csharp',
+  sh: 'shellscript',
+  bash: 'shellscript',
+  zsh: 'shellscript',
+  sql: 'sql',
+  graphql: 'graphql',
+  gql: 'graphql',
+  json: 'json',
+  jsonc: 'json',
+  yaml: 'yaml',
+  yml: 'yaml',
+  toml: 'toml',
+  md: 'markdown',
+  mdx: 'markdown',
+  html: 'html',
+  htm: 'html',
+  css: 'css',
+  scss: 'scss',
+  less: 'less',
+  vue: 'vue',
+  svelte: 'svelte',
+};
+
+/** Languages Prettier can parse (its bundled parsers, all via `typescript`). */
+const PRETTIER_LANGS = new Set(['typescript', 'tsx', 'javascript', 'jsx']);
+
+function extensionOf(path: string): string {
+  const base = path.split(/[/\\]/).pop() ?? path;
+  const dot = base.lastIndexOf('.');
+  if (dot < 0) return '';
+  return base.slice(dot + 1).toLowerCase();
+}
+
+/**
+ * Shiki language id for a source path, or `text` when unknown. C-family paths
+ * stay `text` (loading their grammars has trapped WebKit — see
+ * `pierreFileLang`).
+ */
+export function sourceLangForPath(path?: string | null): SourceSyntaxLang {
+  if (!path) return 'text';
+  if (isPierreCFamilyPath(path)) return 'text';
+  return EXT_TO_LANG[extensionOf(path)] ?? 'text';
+}
+
+/** True when Prettier should format this language's generated declaration. */
+export function isPrettierSourceLang(lang: SourceSyntaxLang): boolean {
+  return PRETTIER_LANGS.has(lang);
+}

package/src/pierre/syntaxTokens.ts

@@ -1,12 +1,18 @@
 /**
- * Tokenize TypeScript with Shiki + Pierre themes — same stack as @pierre/diffs.
+ * Tokenize source text with Shiki + Pierre themes — same stack as @pierre/diffs.
  */
 
-import { createHighlighter, type Highlighter, type ThemeInput } from 'shiki';
+import {
+  createHighlighter,
+  type BundledLanguage,
+  type Highlighter,
+  type ThemeInput,
+} from 'shiki';
 import pierreDark from '@pierre/theme/pierre-dark';
 import pierreLight from '@pierre/theme/pierre-light';
 import type { SubsystemDeclToken } from '../subsystem/model';
 import type { PierreSyntaxThemeName } from './pierreSyntaxTheme';
+import type { SourceSyntaxLang } from './sourceLang';
 
 let highlighterPromise: Promise<Highlighter> | null = null;
 
@@ -23,21 +29,40 @@ async function getPierreHighlighter(): Promise<Highlighter> {
   return highlighterPromise;
 }
 
+/** Load a grammar on demand; fall back to `text` when it isn't available. */
+async function resolveLang(
+  highlighter: Highlighter,
+  lang: SourceSyntaxLang,
+): Promise<BundledLanguage | 'text'> {
+  if (lang === 'text') return 'text';
+  try {
+    if (!highlighter.getLoadedLanguages().includes(lang)) {
+      await highlighter.loadLanguage(lang as BundledLanguage);
+    }
+    return lang as BundledLanguage;
+  } catch {
+    return 'text';
+  }
+}
+
 function normalizeColor(color?: string): string | undefined {
   return color?.toLowerCase();
 }
 
 /**
- * Tokenize formatted TypeScript using Pierre's Shiki themes.
- * Each token carries the resolved foreground color Pierre would render.
+ * Tokenize code using Pierre's Shiki themes. Each token carries the resolved
+ * foreground color Pierre would render. `lang` is the inferred source language
+ * (`text` when unknown) — TS by default for backward compatibility.
  */
 export async function tokenizeWithPierreSyntax(
   code: string,
   themeName: PierreSyntaxThemeName,
+  lang: SourceSyntaxLang = 'typescript',
 ): Promise<SubsystemDeclToken[]> {
   const highlighter = await getPierreHighlighter();
+  const resolved = await resolveLang(highlighter, lang);
   const { tokens } = highlighter.codeToTokens(code, {
-    lang: 'typescript',
+    lang: resolved,
     theme: themeName,
   });
 

package/src/stories/Subsystem/ComponentDeclarationAudit.stories.tsx

@@ -397,3 +397,106 @@ export const AugmentedSignature: StoryObj<{ constrained: boolean }> = {
     </div>
   ),
 };
+
+// ---------------------------------------------------------------------------
+// Prettier fallback — when formatting throws (Electrobun's bundled Prettier
+// does), the declaration is tokenized unformatted as one long line. This story
+// reproduces that path deterministically: an unparseable parameter type makes
+// Prettier throw, so `tokenizeComponent` falls back to the raw string. The
+// panel must wrap at spaces, never break a token mid-word (`func` / `c`).
+// ---------------------------------------------------------------------------
+
+const fallbackCases: { label: string; component: SubsystemComponent }[] = [
+  {
+    label: 'formatted — long signature (Prettier wraps at printWidth)',
+    component: {
+      alias: 'fallback-formatted',
+      name: 'mergeSessions',
+      construct: 'function',
+      file: 'src/session/merge.ts',
+      purl: 'pkg:github/principal-ai/agent-monitoring',
+      symbol: 'mergeSessions',
+      declaration: {
+        kind: 'function',
+        parameters: [
+          { name: 'sessions', type: 'SessionRecord[]' },
+          { name: 'options', type: 'MergeOptions' },
+          { name: 'onConflict', type: '((a: SessionRecord, b: SessionRecord) => SessionRecord)' },
+        ],
+        returnType: 'Promise<Map<string, SessionEvent[]>>',
+        callers: [],
+        callees: [],
+      } satisfies GraphifyComponentDetail,
+    },
+  },
+  {
+    label: 'fallback — unformatted single line (Prettier throws on `Array<`)',
+    component: {
+      alias: 'fallback-raw',
+      name: 'mergeSessions',
+      construct: 'function',
+      file: 'src/session/merge.ts',
+      purl: 'pkg:github/principal-ai/agent-monitoring',
+      symbol: 'mergeSessions',
+      declaration: {
+        kind: 'function',
+        parameters: [
+          { name: 'sessions', type: 'SessionRecord[]' },
+          { name: 'options', type: 'MergeOptions' },
+          { name: 'onConflict', type: 'Array<' },
+        ],
+        returnType: 'Promise<Map<string, SessionEvent[]>>',
+        callers: [],
+        callees: [],
+      } satisfies GraphifyComponentDetail,
+    },
+  },
+  {
+    label: 'non-JS/TS (python) — Prettier skipped, python grammar',
+    component: {
+      alias: 'fallback-python',
+      name: 'deduplicate_entities',
+      construct: 'function',
+      file: 'graphify/dedup.py',
+      purl: 'pkg:github/graphify-labs/graphify#graphify/dedup.py',
+      symbol: 'deduplicate_entities',
+      declaration: {
+        kind: 'function',
+        parameters: [
+          { name: 'graph', type: 'nx.MultiDiGraph' },
+          { name: 'keep', type: 'bool' },
+        ],
+        returnType: 'list[tuple[str, object]]',
+        callers: [],
+        callees: [],
+      } satisfies GraphifyComponentDetail,
+    },
+  },
+];
+
+export const UnformattedFallback: StoryObj<{ constrained: boolean }> = {
+  render: ({ constrained }) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+      {fallbackCases.map((c) => (
+        <div key={c.label}>
+          <div
+            style={{
+              fontFamily: 'monospace',
+              fontSize: 11,
+              color: '#888',
+              marginBottom: 4,
+              textTransform: 'uppercase',
+              letterSpacing: '0.05em',
+            }}
+          >
+            {c.label}
+          </div>
+          <ComponentDeclaration
+            component={c.component}
+            maxWidth={constrained ? '80ch' : undefined}
+          />
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/subsystem/ComponentDeclaration.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useEffect, useRef, useState, type ReactNode } from 'react';
-import { AlignLeft, FileText, ShieldCheck } from 'lucide-react';
+import { AlignLeft, FileText } from 'lucide-react';
 import { useTheme } from '@principal-ade/industry-theme';
 import { resolvePierreSyntaxThemeName } from '../pierre/pierreSyntaxTheme';
 import {
@@ -115,8 +115,6 @@ export interface ComponentDeclarationProps {
   onRelatedSelect?: (ref: string) => void;
   /** Max width of the declaration panel (CSS value). Defaults to none. */
   maxWidth?: string | number;
-  /** When set, shows a Verify control that calls back with the component id. */
-  onVerify?: (componentAlias: string) => void;
   /** Live verification status for the selected component. */
   verification?: ComponentVerificationState | null;
   /** Start with the file path row visible (catalog / source-first views). */
@@ -270,7 +268,6 @@ export function ComponentDeclaration({
   onOpenFile,
   onRelatedSelect: _onRelatedSelect,
   maxWidth,
-  onVerify,
   verification,
   defaultShowFile = false,
   fileOpen = false,
@@ -400,39 +397,8 @@ export function ComponentDeclaration({
       <Icon size={13} />
     </button>
   );
-  const verifyBusy = verification?.phase === 'checking';
   const headerActions = (
     <span style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 2 }}>
-      {onVerify && (
-        <button
-          type="button"
-          title="Verify against graphify"
-          aria-label="Verify against graphify"
-          disabled={verifyBusy}
-          onClick={(e) => {
-            e.stopPropagation();
-            onVerify(component.alias);
-          }}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 4,
-            height: 20,
-            padding: '0 6px',
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: 4,
-            background: 'transparent',
-            color: verifyBusy ? muted : theme.colors.textSecondary,
-            cursor: verifyBusy ? 'wait' : 'pointer',
-            fontSize: theme.fontSizes[0],
-            fontFamily: theme.fonts.body,
-            opacity: verifyBusy ? 0.7 : 1,
-          }}
-        >
-          <ShieldCheck size={12} />
-          {verifyBusy ? '…' : 'Verify'}
-        </button>
-      )}
       {!inlineChrome &&
         toggleBtn(showFile, () => setShowFile((v) => !v), 'Toggle file path', FileText)}
       {!inlineChrome && lineLocationLabel}
@@ -501,7 +467,7 @@ export function ComponentDeclaration({
         'purl',
       ),
     );
-  } else if (onVerify || (!showRepoIdentity && !inlineChrome)) {
+  } else if (!showRepoIdentity && !inlineChrome) {
     lines.push(line(headerActions, 'actions'));
   }
 
@@ -786,8 +752,10 @@ export function ComponentDeclaration({
       <div
         key={`decl-${li}`}
         style={{
-          display: 'flex',
-          alignItems: 'center',
+          // Block (not flex): tokens flow inline and wrap at spaces. A flex
+          // row lets each token span shrink and break mid-word when a line
+          // overflows (e.g. the unformatted prettier-fallback declaration).
+          display: 'block',
           whiteSpace: 'pre-wrap',
           overflowWrap: 'anywhere',
           minWidth: 0,

package/src/subsystem/ConstructsCatalog.tsx

@@ -39,7 +39,6 @@ export interface ConstructsCatalogProps {
   renderFileViewer?: (file: string, opts?: SubsystemOpenFileOptions) => ReactNode;
   renderFileView?: (component: SubsystemComponent) => ReactNode;
   onFileSelect?: (file: string) => void;
-  onVerifyComponent?: (componentAlias: string) => void;
   componentVerification?: ComponentVerificationState | null;
 }
 
@@ -145,7 +144,6 @@ export function ConstructsCatalog({
   renderFileViewer,
   renderFileView,
   onFileSelect,
-  onVerifyComponent,
   componentVerification,
 }: ConstructsCatalogProps) {
   const { theme, mode } = useTheme();
@@ -950,7 +948,6 @@ export function ConstructsCatalog({
                         onOpenFile={fileViewer ? onOpenFile : undefined}
                         defaultShowFile={!!fileViewer}
                         onRelatedSelect={onRelatedSelect}
-                        onVerify={onVerifyComponent}
                         fileOpen={fileOpen}
                         declarationOpen={lineOpen}
                         showRepoIdentity={false}

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -285,8 +285,6 @@ export interface SubsystemComponentGraphProps {
    * path). The tree is derived from the components' `file` values.
    */
   onFileSelect?: (file: string) => void;
-  /** Verify the selected component against graphify (declaration panel). */
-  onVerifyComponent?: (componentAlias: string) => void;
   /** Live verification status for the selected component. */
   componentVerification?: ComponentVerificationState | null;
   /**
@@ -385,7 +383,7 @@ interface InnerProps extends SubsystemComponentGraphProps {
   measured: { w: number; h: number } | null;
 }
 
-function Inner({ components, relations, walkthroughs, initialWalkthroughId, onReorderWalkthroughs, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, edgeView, title, hideSidebar, walkthroughStepMode = 'focus', autoPlayWalkthroughs = false, walkthroughAutoPlayIntervalMs = WALKTHROUGH_PLAY_PAUSE_MS, zoomOnWalkthroughFocus = true, graphTitle, showWalkthroughTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, diagnostic, issues, showIssues, focusIssueCategory, onSelectIssue, onApplyIssueFix, onHoverIssue, renderFileView, renderFileViewer, renderWalkthroughViewer, onFileSelect, onVerifyComponent, componentVerification, persistKey }: InnerProps) {
+function Inner({ components, relations, walkthroughs, initialWalkthroughId, onReorderWalkthroughs, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, edgeView, title, hideSidebar, walkthroughStepMode = 'focus', autoPlayWalkthroughs = false, walkthroughAutoPlayIntervalMs = WALKTHROUGH_PLAY_PAUSE_MS, zoomOnWalkthroughFocus = true, graphTitle, showWalkthroughTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, diagnostic, issues, showIssues, focusIssueCategory, onSelectIssue, onApplyIssueFix, onHoverIssue, renderFileView, renderFileViewer, renderWalkthroughViewer, onFileSelect, componentVerification, persistKey }: InnerProps) {
   const { theme } = useTheme();
   const { fitView } = useReactFlow();
   const viewport = useViewport();
@@ -2138,7 +2136,6 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
               component={selected}
               onOpenFile={onOpenDeclarationFile}
               onRelatedSelect={resolveRelatedComponent}
-              onVerify={onVerifyComponent}
               verification={componentVerification}
               fileOpen={
                 drawerTarget?.kind === 'file' &&
@@ -2367,7 +2364,6 @@ export function SubsystemComponentGraph(props: SubsystemComponentGraphProps) {
             renderFileViewer={props.renderFileViewer}
             renderFileView={props.renderFileView}
             onFileSelect={props.onFileSelect}
-            onVerifyComponent={props.onVerifyComponent}
             componentVerification={props.componentVerification}
           />
         ) : (

package/src/subsystem/tokenizeComponent.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, test } from 'bun:test';
+import { tokenizeComponent } from './tokenizeComponent';
+import type { SubsystemComponent } from './model';
+
+const textOf = (toks: { kind: string; text: string }[]) =>
+  toks.filter((t) => t.kind !== 'newline').map((t) => t.text).join('');
+
+describe('tokenizeComponent — language inference', () => {
+  test('non-JS/TS (python) bypasses Prettier and tokenizes unformatted', async () => {
+    const component: SubsystemComponent = {
+      alias: 'dedup',
+      name: 'deduplicate_entities',
+      construct: 'function',
+      file: 'graphify/dedup.py',
+      purl: 'pkg:github/graphify-labs/graphify#graphify/dedup.py',
+      symbol: 'deduplicate_entities',
+      declaration: {
+        kind: 'function',
+        parameters: [{ name: 'graph', type: 'nx.MultiDiGraph' }],
+        returnType: 'None',
+        callers: [],
+        callees: [],
+      },
+    };
+    const toks = await tokenizeComponent(component, 80, 'pierre-dark');
+    // No Prettier run → the raw one-liner comes through verbatim.
+    expect(textOf(toks)).toBe(
+      'function deduplicate_entities(graph: nx.MultiDiGraph): None;',
+    );
+  });
+
+  test('JS/TS still goes through Prettier (wraps to printWidth)', async () => {
+    const component: SubsystemComponent = {
+      alias: 'merge',
+      name: 'mergeSessions',
+      construct: 'function',
+      file: 'src/session/merge.ts',
+      purl: 'pkg:github/acme/widget',
+      symbol: 'mergeSessions',
+      declaration: {
+        kind: 'function',
+        parameters: [
+          { name: 'sessions', type: 'SessionRecord[]' },
+          { name: 'options', type: 'MergeOptions' },
+          { name: 'onConflict', type: '((a: SessionRecord, b: SessionRecord) => SessionRecord)' },
+        ],
+        returnType: 'Promise<Map<string, SessionEvent[]>>',
+        callers: [],
+        callees: [],
+      },
+    };
+    const toks = await tokenizeComponent(component, 40, 'pierre-dark');
+    // Formatted output spans multiple lines.
+    expect(toks.some((t) => t.kind === 'newline')).toBe(true);
+  });
+});

package/src/subsystem/tokenizeComponent.ts

@@ -1,14 +1,19 @@
 /**
  * Tokenize a SubsystemComponent into a flat token stream for the detail panel.
  *
- * Pipeline: generate declaration string → format with Prettier → tokenize
- * with Shiki + Pierre themes. The `component.tokens` field, when present,
- * overrides the entire pipeline (for pre-tokenized data from graphify).
+ * Pipeline: generate declaration string → (JS/TS only) format with Prettier →
+ * tokenize with Shiki + Pierre themes, using the grammar inferred from the
+ * component's file. The `component.tokens` field, when present, overrides the
+ * entire pipeline (for pre-tokenized data from graphify).
  *
  * This function is async because Prettier's format() is async.
  */
 
 import type { PierreSyntaxThemeName } from '../pierre/pierreSyntaxTheme';
+import {
+  isPrettierSourceLang,
+  sourceLangForPath,
+} from '../pierre/sourceLang';
 import type { SubsystemComponent, SubsystemDeclToken } from './model';
 import { generateDeclarationString } from './formatDeclaration';
 import { tokenizeFormatted } from './tokenizeFormatted';
@@ -19,6 +24,8 @@ let prettierPluginsPromise: Promise<{
   typescript: typeof import('prettier/plugins/typescript');
   estree: typeof import('prettier/plugins/estree');
 }> | null = null;
+/** One-shot guard so a broken host bundler warns once, not per component. */
+let prettierFailureLogged = false;
 
 async function getPrettier() {
   if (!prettierPromise) {
@@ -38,8 +45,9 @@ async function getPrettier() {
  * Tokenize a SubsystemComponent into SubsystemDeclToken[].
  *
  * When `component.tokens` is present (pre-tokenized data from the wire),
- * it's returned as-is. Otherwise the pipeline generates a TypeScript
- * declaration string, formats it with Prettier, and tokenizes the output.
+ * it's returned as-is. Otherwise the pipeline generates a declaration string,
+ * formats it with Prettier when the inferred language is JS/TS, and tokenizes
+ * the output with that language's grammar.
  */
 export async function tokenizeComponent(
   component: SubsystemComponent,
@@ -49,38 +57,48 @@ export async function tokenizeComponent(
   // Pre-tokenized tokens from the wire take precedence.
   if (component.tokens) return component.tokens;
 
-  // External kind — not valid TypeScript, bypass Prettier.
+  const lang = sourceLangForPath(component.file);
+
+  // External kind — not valid code, bypass Prettier; plain text.
   const kind = component.declaration?.kind ?? component.construct;
   if (kind === 'external') {
     const label = component.declaration?.kind === 'external' ? component.declaration.label : component.name;
     const escaped = label.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
-    return tokenizeFormatted(`external '${escaped}'`, themeName);
+    return tokenizeFormatted(`external '${escaped}'`, themeName, 'text');
   }
 
-  // Custom entity — an actor (Person/agent/queue), not code; bypass Prettier.
+  // Custom entity — an actor (Person/agent/queue), not code; plain text.
   if (kind === 'custom_entity') {
-    return tokenizeFormatted(generateDeclarationString(component), themeName);
+    return tokenizeFormatted(generateDeclarationString(component), themeName, 'text');
   }
 
-  // Generate → format → tokenize. Prettier is best-effort: some host
-  // bundlers (Electrobun's) mangle Prettier's internal cross-module calls, so
-  // formatting can throw. Fall back to the unformatted declaration rather than
-  // rendering nothing — the panel is still correct, just not width-wrapped.
+  // Generate → (JS/TS only) format → tokenize.
+  //
+  // Prettier ships parsers for JS/TS (and CSS/HTML/…) only — never run it for
+  // other languages. Even for JS/TS it's best-effort: some host bundlers
+  // (Electrobun's) mangle Prettier's internal cross-module calls, so formatting
+  // can throw. Fall back to the unformatted declaration rather than rendering
+  // nothing — the panel is still correct, just not width-wrapped.
   const raw = generateDeclarationString(component);
   let formatted = raw;
-  try {
-    const { prettier, plugins } = await getPrettier();
-    formatted = await prettier.format(raw, {
-      parser: 'typescript',
-      plugins: [plugins.typescript, plugins.estree],
-      printWidth,
-    });
-  } catch (err) {
-    console.warn(
-      '[subsystem] prettier format failed; tokenizing unformatted declaration',
-      err,
-    );
+  if (isPrettierSourceLang(lang)) {
+    try {
+      const { prettier, plugins } = await getPrettier();
+      formatted = await prettier.format(raw, {
+        parser: 'typescript',
+        plugins: [plugins.typescript, plugins.estree],
+        printWidth,
+      });
+    } catch (err) {
+      if (!prettierFailureLogged) {
+        prettierFailureLogged = true;
+        console.warn(
+          '[subsystem] prettier format failed; tokenizing unformatted declarations for this session',
+          err,
+        );
+      }
+    }
   }
 
-  return tokenizeFormatted(formatted, themeName);
+  return tokenizeFormatted(formatted, themeName, lang);
 }

package/src/subsystem/tokenizeFormatted.ts

@@ -1,19 +1,21 @@
 /**
- * Tokenize a formatted TypeScript declaration string into SubsystemDeclToken[]
- * using Shiki + Pierre themes (same highlighter stack as @pierre/diffs).
+ * Tokenize a formatted source string into SubsystemDeclToken[] using Shiki +
+ * Pierre themes (same highlighter stack as @pierre/diffs).
  */
 
 import { tokenizeWithPierreSyntax } from '../pierre/syntaxTokens';
 import type { PierreSyntaxThemeName } from '../pierre/pierreSyntaxTheme';
+import type { SourceSyntaxLang } from '../pierre/sourceLang';
 import type { SubsystemDeclToken } from './model';
 
 /**
- * Tokenize a formatted TypeScript string into SubsystemDeclToken[].
- * The input should already be formatted by Prettier (or be valid TS).
+ * Tokenize a source string into SubsystemDeclToken[]. The input should already
+ * be formatted (or be valid for the language). `lang` picks the grammar.
  */
 export function tokenizeFormatted(
   code: string,
   themeName: PierreSyntaxThemeName = 'pierre-dark',
+  lang: SourceSyntaxLang = 'typescript',
 ): Promise<SubsystemDeclToken[]> {
-  return tokenizeWithPierreSyntax(code, themeName);
+  return tokenizeWithPierreSyntax(code, themeName, lang);
 }