@principal-ai/principal-view-react 0.16.45 → 0.16.46

package/dist/subsystem/tokenizeFormatted.js

@@ -0,0 +1,84 @@
+/**
+ * Tokenize a formatted TypeScript declaration string into SubsystemDeclToken[]
+ * using highlight.js.
+ *
+ * highlight.js produces HTML with `<span class="hljs-...">` wrappers. This
+ * module parses that output into our token format so the renderer stays
+ * language-agnostic.
+ */
+import hljs from 'highlight.js/lib/core';
+import typescript from 'highlight.js/lib/languages/typescript';
+// Register once — safe to call multiple times.
+try {
+    hljs.registerLanguage('typescript', typescript);
+}
+catch {
+    // Already registered.
+}
+// hljs class → our token kind
+const CLASS_MAP = {
+    'hljs-keyword': 'keyword',
+    'hljs-title': 'name',
+    'hljs-title.function_': 'name',
+    'hljs-params': 'member',
+    'hljs-type': 'type',
+    'hljs-built_in': 'type',
+    'hljs-string': 'string',
+    'hljs-number': 'string',
+    'hljs-comment': 'punctuation',
+};
+/**
+ * Tokenize a formatted TypeScript string into SubsystemDeclToken[].
+ * The input should already be formatted by Prettier (or be valid TS).
+ */
+export function tokenizeFormatted(code) {
+    const result = hljs.highlight(code, { language: 'typescript' });
+    return parseHighlightedHtml(result.value);
+}
+// ---------------------------------------------------------------------------
+// HTML parser — walks the hljs output and extracts tokens
+// ---------------------------------------------------------------------------
+function unescapeHtml(text) {
+    return text
+        .replace(/&quot;/g, '"')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&amp;/g, '&')
+        .replace(/&#39;/g, "'");
+}
+function parseHighlightedHtml(html) {
+    const tokens = [];
+    // Regex matches either `<span class="hljs-...">`, `</span>`, or text content.
+    const re = /<span class="([^"]+)">|<\/span>|[^<]+/g;
+    const classStack = [];
+    let match;
+    while ((match = re.exec(html)) !== null) {
+        const chunk = match[0];
+        if (chunk.startsWith('<span')) {
+            // Opening tag — push class onto stack.
+            classStack.push(match[1]);
+        }
+        else if (chunk === '</span>') {
+            // Closing tag — pop class.
+            classStack.pop();
+        }
+        else {
+            // Text content — emit tokens for each line segment.
+            const currentClass = classStack[classStack.length - 1] ?? '';
+            const kind = CLASS_MAP[currentClass] ?? 'punctuation';
+            const text = chunk;
+            // Split on newlines so each line becomes its own token set.
+            const lines = text.split('\n');
+            for (let i = 0; i < lines.length; i++) {
+                if (i > 0) {
+                    tokens.push({ text: '', kind: 'newline' });
+                }
+                if (lines[i]) {
+                    tokens.push({ text: unescapeHtml(lines[i]), kind });
+                }
+            }
+        }
+    }
+    return tokens;
+}
+//# sourceMappingURL=tokenizeFormatted.js.map

package/dist/subsystem/tokenizeFormatted.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokenizeFormatted.js","sourceRoot":"","sources":["../../src/subsystem/tokenizeFormatted.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/principal-view-react",
-  "version": "0.16.45",
+  "version": "0.16.46",
   "description": "React components for graph-based principal view framework",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -14,13 +14,14 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@pierre/trees": "1.0.0-beta.6",
     "@xyflow/react": "^12.11.3",
     "elkjs": "^0.12.0",
-    "@pierre/trees": "1.0.0-beta.6",
     "hast-util-sanitize": "^5.0.2",
     "highlight.js": "^11.11.1",
     "js-yaml": "4.1.1",
     "lucide-react": "0.554.0",
+    "prettier": "3",
     "react-markdown": "^10.1.0",
     "react-zoom-pan-pinch": "^3.7.0",
     "rehype-highlight": "^7.0.2",

package/src/stories/ComponentDeclarationAudit.stories.tsx

@@ -0,0 +1,290 @@
+import React from 'react';
+import '@xyflow/react/dist/style.css';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import { ComponentDeclaration } from '../subsystem/ComponentDeclaration';
+import type { SubsystemComponent } from '../subsystem/model';
+import type { GraphifyComponentDetail } from '../graphify';
+
+const meta = {
+  title: 'Subsystem/Component Declaration Audit',
+  component: ComponentDeclaration,
+  parameters: { layout: 'padded' },
+  tags: ['autodocs'],
+  argTypes: {
+    constrained: { control: 'boolean', description: 'Toggle 80ch max-width wrapping' },
+  },
+  args: {
+    constrained: true,
+  },
+  decorators: [
+    (Story, ctx) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <div style={{ maxWidth: ctx.args.constrained ? '80ch' : 'none', margin: '0 auto' }}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta<typeof ComponentDeclaration>;
+export default meta;
+type Story = StoryObj<typeof ComponentDeclaration>;
+
+// ---------------------------------------------------------------------------
+// All cases — one SubsystemComponent per shape, rendered stacked
+// ---------------------------------------------------------------------------
+
+const cases: { label: string; component: SubsystemComponent }[] = [
+  {
+    label: 'function — no params',
+    component: {
+      id: 'fn-void',
+      name: 'flush',
+      kind: 'function',
+      file: 'src/event-processing/sink.ts',
+      purl: 'pkg:github/principal-ai/agent-monitoring',
+      symbol: 'flush',
+      detail: {
+        kind: 'function',
+        parameters: [],
+      } satisfies GraphifyComponentDetail,
+    },
+  },
+  {
+    label: 'function — single param',
+    component: {
+      id: 'fn-one',
+      name: 'normalize',
+      kind: 'function',
+      file: 'src/session/SessionReader.ts',
+      purl: 'pkg:github/principal-ai/agent-monitoring',
+      symbol: 'SessionReader.normalize',
+      detail: {
+        kind: 'function',
+        parameters: [{ name: 'session', type: 'SessionRecord' }],
+        returnType: 'SessionEvent[]',
+      } satisfies GraphifyComponentDetail,
+    },
+  },
+  {
+    label: 'function — two params',
+    component: {
+      id: 'fn-two',
+      name: 'normalizeSession',
+      kind: 'function',
+      file: 'src/event-processing/normalize.ts',
+      purl: 'pkg:github/principal-ai/agent-monitoring',
+      symbol: 'normalizeSession',
+      detail: {
+        kind: 'function',
+        parameters: [
+          { name: 'session', type: 'SessionRecord' },
+          { name: 'limit', type: 'number' },
+        ],
+        returnType: 'SessionEvent[]',
+      } satisfies GraphifyComponentDetail,
+    },
+  },
+  {
+    label: 'function — rich params (positional, union, callback, generic return)',
+    component: {
+      id: 'fn-rich',
+      name: 'mergeSessions',
+      kind: 'function',
+      file: 'src/session/merge.ts',
+      purl: 'pkg:github/principal-ai/agent-monitoring',
+      symbol: 'mergeSessions',
+      detail: {
+        kind: 'function',
+        parameters: [
+          { name: 'sessions', type: 'SessionRecord[]' },
+          { type: 'MergeOptions' },
+          { name: 'strategy', type: "'append' | 'replace' | 'skip'" },
+          { name: 'onConflict', type: '((a: SessionRecord, b: SessionRecord) => SessionRecord)' },
+        ],
+        returnType: 'Promise<Map<string, SessionEvent[]>>',
+      } satisfies GraphifyComponentDetail,
+    },
+  },
+  {
+    label: 'class — no body',
+    component: {
+      id: 'class-empty',
+      name: 'EmptyClass',
+      kind: 'class',
+      file: 'src/empty.ts',
+      purl: 'pkg:github/principal-ai/agent-monitoring',
+      symbol: 'EmptyClass',
+      detail: {
+        kind: 'class',
+      } satisfies GraphifyComponentDetail,
+    },
+  },
+  {
+    label: 'class — properties only',
+    component: {
+      id: 'class-props',
+      name: 'Config',
+      kind: 'class',
+      file: 'src/config.ts',
+      purl: 'pkg:github/principal-ai/agent-monitoring',
+      symbol: 'Config',
+      detail: {
+        kind: 'class',
+        properties: [
+          { name: 'host', type: 'string' },
+          { name: 'port', type: 'number' },
+          { name: 'tls', type: 'boolean' },
+        ],
+      } satisfies GraphifyComponentDetail,
+    },
+  },
+  {
+    label: 'class — methods + properties + extends + implements',
+    component: {
+      id: 'class-rich',
+      name: 'EventProcessor',
+      kind: 'class',
+      file: 'src/event-processing/EventProcessor.ts',
+      purl: 'pkg:github/principal-ai/agent-monitoring',
+      symbol: 'EventProcessor',
+      detail: {
+        kind: 'class',
+        methods: [
+          { name: 'process', parameters: [{ type: 'RawEvent' }, { type: 'ProcessingOptions' }], returnType: 'ProcessedEvent' },
+          { name: 'batch', parameters: [{ type: 'RawEvent[]' }], returnType: 'Promise<ProcessedEvent[]>' },
+          { name: 'onError', parameters: [{ type: 'Error' }] },
+          { name: 'dispose' },
+        ],
+        properties: [
+          { name: 'queue', type: 'RawEvent[]' },
+          { name: 'options', type: 'Required<ProcessingOptions>' },
+          { name: 'retryLimit', type: 'number' },
+        ],
+        extends: ['BaseProcessor'],
+        implements: ['Disposable', 'EventEmitterLike'],
+      } satisfies GraphifyComponentDetail,
+    },
+  },
+  {
+    label: 'type — properties',
+    component: {
+      id: 'type-props',
+      name: 'SessionRecord',
+      kind: 'type',
+      file: 'src/session/transcript.ts',
+      purl: 'pkg:github/principal-ai/agent-monitoring',
+      symbol: 'SessionRecord',
+      detail: {
+        kind: 'type',
+        properties: [
+          { name: 'id', type: 'string' },
+          { name: 'admittedSeq', type: 'number' },
+        ],
+      } satisfies GraphifyComponentDetail,
+    },
+  },
+  {
+    label: 'type — no properties',
+    component: {
+      id: 'type-empty',
+      name: 'BrandedId',
+      kind: 'type',
+      file: 'src/types.ts',
+      purl: 'pkg:github/principal-ai/agent-monitoring',
+      symbol: 'BrandedId',
+      detail: {
+        kind: 'type',
+      } satisfies GraphifyComponentDetail,
+    },
+  },
+  {
+    label: 'module — imports + exports',
+    component: {
+      id: 'mod-full',
+      name: 'index',
+      kind: 'module',
+      file: 'src/index.ts',
+      purl: 'pkg:github/principal-ai/agent-monitoring',
+      symbol: 'index',
+      detail: {
+        kind: 'module',
+        imports: [
+          { name: './session/SessionReader' },
+          { name: './event-processing/EventProcessor' },
+        ],
+        exports: ['SessionReader', 'EventProcessor'],
+        symbols: ['SessionReader', 'EventProcessor', 'normalizeSession'],
+      } satisfies GraphifyComponentDetail,
+    },
+  },
+  {
+    label: 'module — no detail (fallback)',
+    component: {
+      id: 'mod-plain',
+      name: 'utils',
+      kind: 'module',
+      file: 'src/utils.ts',
+      purl: 'pkg:github/principal-ai/agent-monitoring',
+      symbol: 'utils',
+    },
+  },
+  {
+    label: 'external',
+    component: {
+      id: 'ext',
+      name: 'trail-viewer',
+      kind: 'external',
+      file: '',
+      purl: 'pkg:npm/@principal-ai/trail-viewer',
+      symbol: '',
+      detail: {
+        kind: 'external',
+        label: 'pkg:npm/@principal-ai/trail-viewer',
+      } satisfies GraphifyComponentDetail,
+    },
+  },
+  {
+    label: 'function — no symbol (uses name fallback)',
+    component: {
+      id: 'fn-no-symbol',
+      name: 'anonymousHelper',
+      kind: 'function',
+      file: 'src/helpers.ts',
+      purl: 'pkg:github/principal-ai/agent-monitoring',
+      detail: {
+        kind: 'function',
+        parameters: [{ name: 'input', type: 'string' }],
+        returnType: 'void',
+      } satisfies GraphifyComponentDetail,
+    },
+  },
+];
+
+// ---------------------------------------------------------------------------
+// Story — all cases stacked
+// ---------------------------------------------------------------------------
+
+export const AllCases: StoryObj<{ constrained: boolean }> = {
+  render: ({ constrained }) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+      {cases.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>
+  ),
+};