@principal-ai/subsystems-react 0.24.2 → 0.24.4

package/src/pierre/PierreFileView.tsx

@@ -7,6 +7,11 @@
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { File } from '@pierre/diffs/react';
+import {
+  getFiletypeFromFileName,
+  getHighlighterOptions,
+  preloadHighlighter,
+} from '@pierre/diffs';
 import { useTheme } from '@principal-ade/industry-theme';
 import { buildPierreOptions, PIERRE_FILE_STYLE } from './pierreBackground';
 import { pierreLangForPath } from './pierreFileLang';
@@ -33,6 +38,12 @@ export function PierreFileView({
   const { theme } = useTheme();
   const [contents, setContents] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  // Pierre highlights on the main thread with no worker pool: a cold first
+  // render paints an empty <pre> and never re-renders once Shiki resolves.
+  // Warm the shared highlighter for this file before mounting <File> so the
+  // very first render produces content.
+  const [highlighterReady, setHighlighterReady] = useState(false);
+  const lang = pierreLangForPath(filePath) ?? getFiletypeFromFileName(fileName);
 
   const fileObject = useMemo(
     () =>
@@ -60,6 +71,21 @@ export function PierreFileView({
     };
   }, [filePath, readFile]);
 
+  useEffect(() => {
+    let cancelled = false;
+    setHighlighterReady(false);
+    void preloadHighlighter(getHighlighterOptions(lang, {}))
+      .catch(() => {
+        // Fall through: let <File> attempt its own (plain-text) render.
+      })
+      .then(() => {
+        if (!cancelled) setHighlighterReady(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [lang]);
+
   const onPostRender = useCallback(
     (fileContainer: HTMLElement) => {
       if (focusLine == null) return;
@@ -83,7 +109,7 @@ export function PierreFileView({
       </div>
     );
   }
-  if (fileObject === null) {
+  if (fileObject === null || !highlighterReady) {
     return (
       <div style={{ padding: 16, color: theme.colors.textSecondary }}>
         Loading…

package/src/pierre/PierreSnippetView.tsx

@@ -10,6 +10,11 @@
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { File } from '@pierre/diffs/react';
+import {
+  getFiletypeFromFileName,
+  getHighlighterOptions,
+  preloadHighlighter,
+} from '@pierre/diffs';
 import { useTheme } from '@principal-ade/industry-theme';
 import { buildPierreOptions, PIERRE_FILE_STYLE } from './pierreBackground';
 import { pierreLangForPath } from './pierreFileLang';
@@ -47,6 +52,25 @@ export function PierreSnippetView({
   const { theme } = useTheme();
   const [contents, setContents] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  // Warm the shared highlighter before mounting <File>; a cold first render
+  // paints an empty <pre> that never re-renders (no worker pool).
+  const [highlighterReady, setHighlighterReady] = useState(false);
+  const lang = pierreLangForPath(filePath) ?? getFiletypeFromFileName(fileName);
+
+  useEffect(() => {
+    let cancelled = false;
+    setHighlighterReady(false);
+    void preloadHighlighter(getHighlighterOptions(lang, {}))
+      .catch(() => {
+        // Fall through: let <File> attempt its own (plain-text) render.
+      })
+      .then(() => {
+        if (!cancelled) setHighlighterReady(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [lang]);
 
   useEffect(() => {
     let cancelled = false;
@@ -116,7 +140,7 @@ export function PierreSnippetView({
       </div>
     );
   }
-  if (!fileObject || !slice) {
+  if (!fileObject || !slice || !highlighterReady) {
     return (
       <div style={{ padding: 16, color: theme.colors.textSecondary }}>
         Loading…

package/src/stories/Subsystem/ComponentGraph/Issues.stories.tsx

@@ -70,10 +70,68 @@ const ISSUES: SubsystemIssue[] = [
   },
   {
     id: 'i7',
-    severity: 'warn',
+    severity: 'info',
     kind: 'boundary_process_nest_disagree',
-    message: 'Component is nested in process "api" but Graphify places it outside.',
-    target: { kind: 'module', id: 'api', label: 'api' },
+    message:
+      'module "src/host/main.ts" members claim different processes: "host", "renderer"',
+    target: { kind: 'module', id: 'src/host/main.ts', label: 'src/host/main.ts' },
+  },
+  {
+    id: 'i8',
+    severity: 'warn',
+    kind: 'unverified_symbol',
+    message: 'Symbol persistSession unverified — Graphify anchor file-only: persistSession',
+    target: { kind: 'component', id: 'session-store', label: 'SessionStore' },
+  },
+  {
+    id: 'i9',
+    severity: 'error',
+    kind: 'stale_declaration',
+    message: 'Declaration moved since capture — recorded start line 42, now 57.',
+    target: { kind: 'component', id: 'session-store', label: 'SessionStore' },
+    fix: { label: 'Re-pin declaration' },
+  },
+  {
+    id: 'i10',
+    severity: 'info',
+    kind: 'construct_unconfirmed',
+    message: 'Graphify anchored the node but left the construct unclassified (interface vs type alias).',
+    target: { kind: 'component', id: 'host-info', label: 'HostInfo' },
+  },
+  {
+    id: 'i11',
+    severity: 'error',
+    kind: 'signature_mismatch',
+    message: 'Claimed (req: HostInfo) => Session; Graphify has (string) => void.',
+    target: { kind: 'component', id: 'entry', label: 'checkoutApi' },
+  },
+  {
+    id: 'i13',
+    severity: 'info',
+    kind: 'unresolved',
+    message: 'Repo root for pkg:github/you/your-app is unresolved — source checks skipped.',
+    target: { kind: 'component', id: 'stripe', label: 'Stripe' },
+  },
+  {
+    id: 'i14',
+    severity: 'info',
+    kind: 'topology_import_unconfirmed',
+    message: 'No import edge from checkoutApi to cartStore found in Graphify.',
+    target: { kind: 'relation', id: 'r1', label: 'checkoutApi → cartStore', detail: 'imports' },
+  },
+  {
+    id: 'i15',
+    severity: 'info',
+    kind: 'topology_relation_unconfirmed',
+    message: 'Graphify found no inheritance evidence for FileSessionStore → SessionStore.',
+    target: { kind: 'relation', id: 'r2', label: 'FileSessionStore → SessionStore', detail: 'extends' },
+  },
+  {
+    id: 'i16',
+    severity: 'error',
+    kind: 'boundary_module_without_file',
+    message: 'module "src/checkout" set but file is empty — nowhere to ground the frame.',
+    target: { kind: 'module', id: 'src/checkout', label: 'src/checkout' },
   },
 ];
 
@@ -120,7 +178,11 @@ export const GraphWithIssues: Story = {
         walkthroughs={graphEdges.walkthroughs}
         title="Checkout"
         description="A small e-commerce checkout subsystem."
-        diagnostic={{ status: 'issues', issueCount: 5, onOpen: () => {} }}
+        diagnostic={{
+          status: 'issues',
+          issueCount: ISSUES.filter((i) => i.severity === 'error' || i.severity === 'warn').length,
+          onOpen: () => {},
+        }}
         issues={ISSUES}
         onSelectIssue={() => {}}
         onApplyIssueFix={() => {}}

package/src/subsystem/IssueList.tsx

@@ -60,13 +60,12 @@ export const SUBSYSTEM_ISSUE_CATEGORY_LABEL: Record<
 /** Default `kind` → layer. `boundary_*` splits by module (static) vs process (runtime). */
 const KIND_CATEGORY: Record<string, SubsystemIssueCategory> = {
   missing_file: 'construct',
-  missing_symbol: 'construct',
+  unverified_symbol: 'construct',
   stale_declaration: 'construct',
   construct_mismatch: 'construct',
   construct_unconfirmed: 'construct',
   signature_mismatch: 'construct',
   signature_unconfirmed: 'construct',
-  anchor: 'construct',
   unresolved: 'construct',
   topology_broken_endpoint: 'static-topology',
   topology_import_unconfirmed: 'static-topology',
@@ -126,25 +125,24 @@ export function humanizeIssueKind(kind: string): string {
 /**
  * Curated short labels, trimmed of prefixes the grouping already implies
  * (`topology_`, `boundary_`) but kept unambiguous within a layer — so
- * `construct_mismatch` reads "Wrong construct", not a bare "Mismatch" that
- * would collide with `signature_mismatch`. Explicit `issue.kindLabel` wins.
+ * `construct_mismatch` reads "Construct mismatch" rather than a bare "Mismatch"
+ * that would collide with `signature_mismatch`. Explicit `issue.kindLabel` wins.
  */
 const KIND_LABEL: Record<string, string> = {
-  missing_file: 'Missing file',
-  missing_symbol: 'Missing symbol',
+  missing_file: 'Declaration file missing',
+  unverified_symbol: 'Unverified symbol',
   stale_declaration: 'Stale declaration',
-  construct_mismatch: 'Wrong construct',
+  construct_mismatch: 'Construct mismatch',
   construct_unconfirmed: 'Unconfirmed construct',
   signature_mismatch: 'Signature mismatch',
   signature_unconfirmed: 'Signature unconfirmed',
-  anchor: 'Anchor',
   unresolved: 'Unresolved',
-  topology_broken_endpoint: 'Broken endpoint',
+  topology_broken_endpoint: 'Construct relation broken',
   topology_import_unconfirmed: 'Import unconfirmed',
   topology_relation_unconfirmed: 'Relation unconfirmed',
-  boundary_module_without_file: 'Module without file',
-  boundary_module_file_mismatch: 'Module file mismatch',
-  boundary_process_nest_disagree: 'Process nest disagree',
+  boundary_module_without_file: 'Declaration file undefined',
+  boundary_module_file_mismatch: 'Declaration file outside module',
+  boundary_process_nest_disagree: 'Module spans multiple process contexts',
   walkthrough: 'Step issue',
 };