test(adr-0051): cover element:metadata_viewer + the ```metadata fence parser

- metadata-viewer.test.tsx: renders the component via ComponentRegistry
  with a mocked metadata context — asserts state_machine (option labels,
  initial/final badges), flow (business-altitude folding of technical
  nodes + the hidden-count note, and detail:technical revealing them),
  permission (CRUD matrix), missing-rule + unknown-type degradation.
- metadata-fence.test.ts: pins the flat `key: value` body contract
  (quote stripping, comments, colon-in-value, malformed-line skipping).
  Exports parseMetadataFence for the unit test.

13 tests, all green.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: os-zhuang

packages/components/src/__tests__/metadata-viewer.test.tsx

@@ -0,0 +1,136 @@
+/**
+ * element:metadata_viewer (ADR-0051) — read-only live metadata views.
+ *
+ * Renders the component through ComponentRegistry (the same path a
+ * ```metadata doc fence and a page node both use) with a mocked metadata
+ * context, and asserts each of the three view kinds plus graceful
+ * degradation.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { ComponentRegistry } from '@object-ui/core';
+import { MetadataCtx } from '@object-ui/react';
+import '../renderers/basic/metadata-viewer';
+
+function metaCtx(getItem: (type: string, name: string) => Promise<any>) {
+  return {
+    apps: [], objects: [], dashboards: [], reports: [], pages: [],
+    loading: false, error: null,
+    refresh: async () => {}, invalidate: () => {}, ensureType: async () => [],
+    getItem, getItemsByType: () => [], getTypeStatus: () => 'ready' as const,
+  };
+}
+
+function Viewer({ properties, getItem }: { properties: any; getItem: (t: string, n: string) => Promise<any> }) {
+  const C = ComponentRegistry.get('element:metadata_viewer');
+  if (!C) throw new Error('element:metadata_viewer not registered');
+  return (
+    <MetadataCtx.Provider value={metaCtx(getItem) as any}>
+      <C schema={{ type: 'element:metadata_viewer', properties }} />
+    </MetadataCtx.Provider>
+  );
+}
+
+const TASK_OBJECT = {
+  name: 'showcase_task',
+  fields: {
+    status: {
+      type: 'select',
+      options: [
+        { value: 'backlog', label: 'Backlog', color: '#94A3B8', default: true },
+        { value: 'todo', label: 'To Do', color: '#3B82F6' },
+        { value: 'in_progress', label: 'In Progress', color: '#F59E0B' },
+        { value: 'done', label: 'Done', color: '#10B981' },
+      ],
+    },
+  },
+  validations: [
+    {
+      type: 'state_machine',
+      name: 'task_status_flow',
+      label: 'Task Status Flow',
+      field: 'status',
+      transitions: {
+        backlog: ['todo'],
+        todo: ['in_progress', 'backlog'],
+        in_progress: ['done'],
+        done: [],
+      },
+    },
+  ],
+};
+
+describe('element:metadata_viewer', () => {
+  it('registers as a component', () => {
+    expect(ComponentRegistry.get('element:metadata_viewer')).toBeTruthy();
+  });
+
+  describe('state_machine', () => {
+    it('renders the transition graph with option labels, initial + final badges', async () => {
+      const getItem = vi.fn(async (type: string) => (type === 'object' ? TASK_OBJECT : null));
+      render(<Viewer getItem={getItem} properties={{ type: 'state_machine', object: 'showcase_task', name: 'task_status_flow' }} />);
+
+      await waitFor(() => expect(screen.getByText('Task Status Flow')).toBeTruthy());
+      // option label, not the raw value
+      expect(screen.getAllByText('Backlog').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('In Progress').length).toBeGreaterThan(0);
+      // backlog is the default option → initial; done has no outgoing → final
+      expect(screen.getByText(/initial/i)).toBeTruthy();
+      expect(screen.getByText(/final/i)).toBeTruthy();
+      expect(getItem).toHaveBeenCalledWith('object', 'showcase_task');
+    });
+
+    it('warns when the named rule is absent', async () => {
+      const getItem = vi.fn(async () => ({ name: 'x', validations: [] }));
+      render(<Viewer getItem={getItem} properties={{ type: 'state_machine', object: 'x', name: 'nope' }} />);
+      await waitFor(() => expect(screen.getByText(/No state machine/i)).toBeTruthy());
+    });
+  });
+
+  describe('flow', () => {
+    const FLOW = {
+      name: 'reassign',
+      label: 'Reassign Task',
+      nodes: [
+        { id: 'start', type: 'start', label: 'Start' },
+        { id: 's1', type: 'script', label: 'Do Plumbing' },
+        { id: 'end', type: 'end', label: 'End' },
+      ],
+    };
+
+    it('folds technical nodes at business altitude (default)', async () => {
+      const getItem = vi.fn(async () => FLOW);
+      render(<Viewer getItem={getItem} properties={{ type: 'flow', name: 'reassign' }} />);
+      await waitFor(() => expect(screen.getByText('Reassign Task')).toBeTruthy());
+      expect(screen.getByText('Start')).toBeTruthy();
+      expect(screen.getByText('End')).toBeTruthy();
+      expect(screen.queryByText('Do Plumbing')).toBeNull(); // script folded
+      expect(screen.getByText(/technical step.*hidden/i)).toBeTruthy();
+    });
+
+    it('shows technical nodes when detail=technical', async () => {
+      const getItem = vi.fn(async () => FLOW);
+      render(<Viewer getItem={getItem} properties={{ type: 'flow', name: 'reassign', detail: 'technical' }} />);
+      await waitFor(() => expect(screen.getByText('Do Plumbing')).toBeTruthy());
+    });
+  });
+
+  describe('permission', () => {
+    it('renders an object CRUD matrix', async () => {
+      const getItem = vi.fn(async () => ({
+        name: 'contributor',
+        label: 'Contributor',
+        objects: { showcase_task: { allowCreate: true, allowRead: true, allowEdit: true, allowDelete: false } },
+      }));
+      render(<Viewer getItem={getItem} properties={{ type: 'permission', name: 'contributor' }} />);
+      await waitFor(() => expect(screen.getByText('Contributor')).toBeTruthy());
+      expect(screen.getByText('showcase_task')).toBeTruthy();
+    });
+  });
+
+  it('degrades on an unknown view type', () => {
+    render(<Viewer getItem={async () => null} properties={{ type: 'nonsense' }} />);
+    expect(screen.getByText(/Unknown metadata view type/i)).toBeTruthy();
+  });
+});

packages/plugin-markdown/src/MarkdownImpl.tsx

@@ -125,7 +125,7 @@ function nodeText(node: React.ReactNode): string {
 // (data, not code: type / name / object / mode / detail), parsed here. Like
 // mermaid, the language is excluded from rehype-highlight (plainText above) so
 // nodeText yields the body verbatim.
-function parseMetadataFence(src: string): Record<string, string> {
+export function parseMetadataFence(src: string): Record<string, string> {
   const out: Record<string, string> = {}
   for (const raw of src.split("\n")) {
     const line = raw.trim()

packages/plugin-markdown/src/metadata-fence.test.ts

@@ -0,0 +1,37 @@
+/**
+ * parseMetadataFence (ADR-0051) — the ```metadata fence body is DATA, not
+ * code: a flat `key: value` block. These tests pin that contract.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { parseMetadataFence } from './MarkdownImpl';
+
+describe('parseMetadataFence', () => {
+  it('parses a flat key: value block', () => {
+    expect(
+      parseMetadataFence('type: state_machine\nobject: showcase_task\nname: task_status_flow'),
+    ).toEqual({ type: 'state_machine', object: 'showcase_task', name: 'task_status_flow' });
+  });
+
+  it('trims whitespace and strips surrounding quotes', () => {
+    expect(parseMetadataFence('  type :  flow \n name: "my_flow" \n mode: \'diagram\''))
+      .toEqual({ type: 'flow', name: 'my_flow', mode: 'diagram' });
+  });
+
+  it('ignores blank lines and # comments', () => {
+    expect(parseMetadataFence('# a comment\n\ntype: permission\n\n# another\nname: contrib'))
+      .toEqual({ type: 'permission', name: 'contrib' });
+  });
+
+  it('keeps values containing colons (only splits on the first)', () => {
+    expect(parseMetadataFence('note: a:b:c')).toEqual({ note: 'a:b:c' });
+  });
+
+  it('skips malformed lines without a key', () => {
+    expect(parseMetadataFence('justtext\n: noval\ntype: flow')).toEqual({ type: 'flow' });
+  });
+
+  it('returns an empty object for empty input', () => {
+    expect(parseMetadataFence('')).toEqual({});
+  });
+});