npm - @polderlabs/bizar - Versions diffs - 4.4.7 → 4.4.8 - Mend

@polderlabs/bizar 4.4.7 → 4.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/bizar-dash/dist/index.html CHANGED Viewed

@@ -29,8 +29,8 @@
         }
       })();
     </script>
-    <script type="module" crossorigin src="/assets/main-C4Dq4wTz.js"></script>
-    <link rel="modulepreload" crossorigin href="/assets/mobile-CaZ0gEeJ.js">
+    <script type="module" crossorigin src="/assets/main-CEazNxxy.js"></script>
+    <link rel="modulepreload" crossorigin href="/assets/mobile-Dl1q7Cyq.js">
     <link rel="stylesheet" crossorigin href="/assets/mobile-CsZQAswA.css">
     <link rel="stylesheet" crossorigin href="/assets/main-Nq8Dq3VR.css">
   </head>

package/bizar-dash/dist/mobile.html CHANGED Viewed

@@ -12,8 +12,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-    <script type="module" crossorigin src="/assets/mobile-CQTXbuHq.js"></script>
-    <link rel="modulepreload" crossorigin href="/assets/mobile-CaZ0gEeJ.js">
+    <script type="module" crossorigin src="/assets/mobile-DSb-t42Y.js"></script>
+    <link rel="modulepreload" crossorigin href="/assets/mobile-Dl1q7Cyq.js">
     <link rel="stylesheet" crossorigin href="/assets/mobile-CsZQAswA.css">
   </head>
   <body>

package/bizar-dash/src/server/glyphs/mdx-compiler.mjs CHANGED Viewed

@@ -199,6 +199,19 @@ function parseJsxValue(src) {
       }
       while (i < len) {
         skipWs();
+        // v4.4.8 — After consuming a comma + whitespace, check for the
+        // closer before recursing. Without this, an array like `[a, b, ]`
+        // would call parseValue on `]`, which falls through to the
+        // bareword-identifier branch and returns `{__ident: ''}` as a
+        // phantom element. The trailing-comma-then-closer case was the
+        // user-visible bug in the v3-to-v4-consolidation glyph: the
+        // FileTree's last entry was the bareword phantom, which then
+        // crashed the React renderer (components.tsx:609 tried to read
+        // `t.bg` on undefined).
+        if (arr && src[i] === closer) {
+          i += 1;
+          return items;
+        }
         if (arr) {
           items.push(parseValue());
         } else {

package/bizar-dash/src/web/views/glyphs/GlyphRenderer.tsx CHANGED Viewed

@@ -49,6 +49,142 @@ import {
   Mockup,
 } from './components';
+// ---------------------------------------------------------------------------
+// BlockErrorBoundary — v4.4.8
+//
+// A single broken block (e.g. a FileTree whose `data.entries` ended up
+// not being an array because the parser silently produced a phantom
+// bareword entry) used to throw inside React, which propagated up and
+// blanked the whole canvas. The boundary catches throws per-block and
+// renders an inline error card instead. The boundary also exposes its
+// errors via a callback so we can surface them in the top-of-page
+// "render errors" banner.
+// ---------------------------------------------------------------------------
+interface BlockErrorBoundaryProps {
+  blockId: string;
+  blockType: string;
+  children: React.ReactNode;
+  onError: (blockId: string, blockType: string, err: Error, info: React.ErrorInfo) => void;
+}
+interface BlockErrorBoundaryState {
+  err: Error | null;
+}
+class BlockErrorBoundary extends React.Component<BlockErrorBoundaryProps, BlockErrorBoundaryState> {
+  state: BlockErrorBoundaryState = { err: null };
+  static getDerivedStateFromError(err: Error): BlockErrorBoundaryState {
+    return { err };
+  }
+  componentDidCatch(err: Error, info: React.ErrorInfo): void {
+    try {
+      this.props.onError(this.props.blockId, this.props.blockType, err, info);
+    } catch {
+      /* ignore — the boundary itself must not throw */
+    }
+  }
+  render(): React.ReactNode {
+    if (this.state.err) {
+      return (
+        <div
+          className="glyph-block-error"
+          role="alert"
+          style={{
+            border: '1px solid var(--error, #f85149)',
+            background: 'rgba(248, 81, 73, 0.06)',
+            borderRadius: 8,
+            padding: '12px 14px',
+            margin: '12px 0',
+            color: 'var(--text)',
+            fontFamily: 'var(--font-mono, ui-monospace, monospace)',
+            fontSize: 12,
+            lineHeight: 1.55,
+          }}
+        >
+          <strong style={{ color: 'var(--error, #f85149)', fontFamily: 'var(--font-sans, system-ui, sans-serif)', display: 'block', marginBottom: 4 }}>
+            {this.props.blockType} block crashed
+          </strong>
+          <div style={{ color: 'var(--text-muted)', marginBottom: 6 }}>
+            block id: <code>{this.props.blockId}</code>
+          </div>
+          <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word', color: 'var(--text)' }}>
+            {this.state.err.message}
+          </pre>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+// ---------------------------------------------------------------------------
+// Block validation — v4.4.8
+//
+// Before handing block data to the component switch, verify that the
+// shape matches the prop contract. Returns `{ ok: true }` when the
+// block can be rendered, or `{ ok: false, error }` when a field is
+// missing or wrong type. The renderer uses the error to skip the
+// component and surface an inline message instead of throwing.
+// ---------------------------------------------------------------------------
+function validateBlock(b: Block): { ok: true } | { ok: false; error: string } {
+  const data = (b.data ?? {}) as Record<string, unknown>;
+  switch (b.type) {
+    case 'RichText':
+      return { ok: true };
+    case 'Callout':
+      return { ok: true };
+    case 'Checklist':
+      if (!Array.isArray(data.items)) return { ok: false, error: 'Checklist requires data.items to be an array' };
+      return { ok: true };
+    case 'Table':
+      if (!Array.isArray(data.columns)) return { ok: false, error: 'Table requires data.columns to be an array' };
+      if (!Array.isArray(data.rows)) return { ok: false, error: 'Table requires data.rows to be an array' };
+      if (data.rows.length > 0 && !Array.isArray(data.rows[0])) return { ok: false, error: 'Table.data.rows[0] must be an array (cell array)' };
+      return { ok: true };
+    case 'CodeTabs':
+      if (!Array.isArray(data.tabs)) return { ok: false, error: 'CodeTabs requires data.tabs to be an array' };
+      return { ok: true };
+    case 'Decision':
+      if (!Array.isArray(data.options)) return { ok: false, error: 'Decision requires data.options to be an array' };
+      return { ok: true };
+    case 'OpenQuestions':
+      if (!Array.isArray(data.questions)) return { ok: false, error: 'OpenQuestions requires data.questions to be an array' };
+      return { ok: true };
+    case 'FileTree':
+      if (!Array.isArray(data.entries)) return { ok: false, error: 'FileTree requires data.entries to be an array' };
+      // v4.4.8 — also catch the phantom bareword entry the parser used
+      // to emit (the v3-to-v4-consolidation glyph crash). An entry that
+      // is not an object means the parser miscounted braces.
+      for (const e of data.entries) {
+        if (e === null || typeof e !== 'object' || Array.isArray(e)) {
+          return { ok: false, error: `FileTree contains a malformed entry: ${JSON.stringify(e)}` };
+        }
+      }
+      return { ok: true };
+    case 'Diff':
+      if (typeof data.before !== 'string') return { ok: false, error: 'Diff requires data.before to be a string' };
+      if (typeof data.after !== 'string') return { ok: false, error: 'Diff requires data.after to be a string' };
+      return { ok: true };
+    case 'Stat':
+      if (data.label === undefined || data.label === null) return { ok: false, error: 'Stat requires data.label' };
+      if (data.value === undefined || data.value === null) return { ok: false, error: 'Stat requires data.value' };
+      return { ok: true };
+    case 'Workflow':
+      if (!Array.isArray(data.steps)) return { ok: false, error: 'Workflow requires data.steps to be an array' };
+      return { ok: true };
+    case 'Mockup':
+      if (typeof data.html !== 'string') return { ok: false, error: 'Mockup requires data.html to be a string' };
+      return { ok: true };
+    case 'Diagram':
+      if (typeof data.dataHtml !== 'string') return { ok: false, error: 'Diagram requires data.dataHtml to be a string' };
+      return { ok: true };
+    default:
+      return { ok: false, error: `Unknown block type: ${(b as { type: string }).type}` };
+  }
+}
 // ---------------------------------------------------------------------------
 // Types — match the server compiler output
 // ---------------------------------------------------------------------------
@@ -72,7 +208,7 @@ interface CompiledGlyph {
   slug: string;
   frontmatter: Record<string, unknown>;
   blocks: Block[];
-  errors: string[];
+  errors: Array<{ line?: number; message: string }>;
   compiledAt: string;
 }
@@ -162,6 +298,25 @@ export function GlyphRenderer({ slug, onClose, onCommentAdded }: Props) {
   // Active pin (expanded thread view)
   const [activePin, setActivePin] = useState<string | null>(null);
+  // v4.4.8 — Per-block render errors caught by BlockErrorBoundary. The
+  // boundary calls onError(err) which pushes into this array. We render
+  // the array at the top of the canvas in a prominent red banner so the
+  // user isn't left staring at a blank screen wondering what happened.
+  const [blockErrors, setBlockErrors] = useState<
+    Array<{ blockId: string; blockType: string; message: string }>
+  >([]);
+  const reportBlockError = React.useCallback(
+    (blockId: string, blockType: string, err: Error) => {
+      setBlockErrors((prev) => {
+        // dedupe by blockId so the same block crashing twice doesn't
+        // duplicate the entry
+        if (prev.some((e) => e.blockId === blockId)) return prev;
+        return [...prev, { blockId, blockType, message: err.message || String(err) }];
+      });
+    },
+    [],
+  );
   const canvasRef = useRef<HTMLDivElement>(null);
   // Section grouping — memoized so we don't re-walk the block array on every render
@@ -289,10 +444,58 @@ export function GlyphRenderer({ slug, onClose, onCommentAdded }: Props) {
     setFullscreen((v) => !v);
   }
-  // Render a single block
+  // Render a single block — wrapped in a BlockErrorBoundary so a single
+// broken block (e.g. wrong data shape from a parser bug) shows an inline
+// error card instead of blanking the whole canvas.
   const renderBlock = (b: Block) => {
     const id = b.id;
     const data = (b.data ?? {}) as Record<string, unknown>;
+    // Validate data shape BEFORE handing to the component switch. A
+    // validation failure shows an inline error card immediately, no
+    // need for the boundary to catch it.
+    const validation = validateBlock(b);
+    if (!validation.ok) {
+      return (
+        <div
+          key={id}
+          id={id}
+          className="glyph-block-error"
+          role="alert"
+          style={{
+            border: '1px solid var(--error, #f85149)',
+            background: 'rgba(248, 81, 73, 0.06)',
+            borderRadius: 8,
+            padding: '12px 14px',
+            margin: '12px 0',
+            color: 'var(--text)',
+            fontFamily: 'var(--font-mono, ui-monospace, monospace)',
+            fontSize: 12,
+            lineHeight: 1.55,
+          }}
+        >
+          <strong style={{ color: 'var(--error, #f85149)', fontFamily: 'var(--font-sans, system-ui, sans-serif)', display: 'block', marginBottom: 4 }}>
+            {b.type} block invalid
+          </strong>
+          <div style={{ color: 'var(--text-muted)', marginBottom: 6 }}>
+            block id: <code>{id}</code>
+          </div>
+          <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{validation.error}</pre>
+        </div>
+      );
+    }
+    // Wrap the actual render in an error boundary so even runtime
+    // errors (bad component props, undefined data, etc.) don't crash
+    // the whole canvas.
+    return (
+      <BlockErrorBoundary key={id} blockId={id} blockType={b.type} onError={reportBlockError}>
+        {renderBlockInner(b, id, data)}
+      </BlockErrorBoundary>
+    );
+  };
+  // Inner renderer — split out so the outer renderBlock can validate +
+  // wrap in an error boundary without nesting the switch in the JSX tree.
+  const renderBlockInner = (b: Block, id: string, data: Record<string, unknown>) => {
     switch (b.type) {
       case 'RichText':
         return <RichText key={id} id={id}>{b.childrenMarkdown ?? ''}</RichText>;
@@ -506,13 +709,41 @@ export function GlyphRenderer({ slug, onClose, onCommentAdded }: Props) {
           </div>
         </header>
-        {/* Compiler warnings */}
-        {compiled.errors?.length > 0 && (
-          <div className="glyph-errors">
-            <strong>Compiler warnings:</strong>
-            <ul>
-              {compiled.errors.map((e, i) => (
-                <li key={i}>{e}</li>
+        {/* v4.4.8 — Render errors banner. Two layers:
+              1. Compiler warnings from the MDX parser (e.g. unknown
+                 tag, unclosed block). Lightweight, yellow border.
+              2. Block render errors caught by BlockErrorBoundary. These
+                 are the "one block crashed but the rest still rendered"
+                 cases. Red border, prominent, listed first so the user
+                 sees them before scrolling. */}
+        {(blockErrors.length > 0 || compiled.errors?.length > 0) && (
+          <div
+            className="glyph-render-errors"
+            role="alert"
+            style={{
+              border: '1px solid var(--error, #f85149)',
+              background: 'rgba(248, 81, 73, 0.08)',
+              borderRadius: 8,
+              padding: '12px 16px',
+              margin: '0 0 16px 0',
+              color: 'var(--text)',
+            }}
+          >
+            <strong style={{ color: 'var(--error, #f85149)', display: 'block', marginBottom: 8 }}>
+              {blockErrors.length > 0
+                ? `${blockErrors.length} block${blockErrors.length === 1 ? '' : 's'} failed to render`
+                : 'Compiler warnings'}
+            </strong>
+            <ul style={{ margin: 0, paddingLeft: 20, fontFamily: 'var(--font-mono, ui-monospace, monospace)', fontSize: 12, lineHeight: 1.6 }}>
+              {blockErrors.map((e, i) => (
+                <li key={`be-${i}`}>
+                  <strong>{e.blockType}</strong> (<code>{e.blockId}</code>): {e.message}
+                </li>
+              ))}
+              {compiled.errors?.map((e, i) => (
+                <li key={`ce-${i}`}>
+                  {e.line ? `line ${e.line}: ` : ''}{e.message}
+                </li>
               ))}
             </ul>
           </div>

package/config/skills/glyph/SKILL.md CHANGED Viewed

@@ -1,12 +1,12 @@
 ---
 name: glyph
 description: Create and consume Bizar glyphs — visual plan/recap artifacts in `artifacts/<slug>/`. Glyphs are MDX files with frontmatter and a block vocabulary. Use for design proposals, decision recaps, and postmortems.
-version: 1
+version: 2
 ---
 # Glyphs — Visual Plan Artifacts
-A **glyph** is a visual artifact used for plans, recaps, and design proposals. It's an MDX file in `artifacts/<slug>/artifact.mdx` that the dashboard renders with comment pin overlay and right-click context menu.
+A **glyph** is a visual artifact used for plans, recaps, design proposals, and postmortems. It's an MDX file at `artifacts/<slug>/artifact.mdx` (or `~/.config/opencode/artifacts/<slug>/` for global glyphs) that the dashboard renders with comment-pin overlay and right-click context menu.
 ## When to create a glyph
@@ -22,12 +22,16 @@ If it's a one-line fix, don't make a glyph. If it's a 5-minute edit, don't make
 ```
 artifacts/<slug>/
-├── meta.json          # title, slug, status, author, created
+├── meta.json          # title, slug, status, author, created, lastEdited
 ├── artifact.mdx       # ← source of truth (git-tracked, diff-friendly)
-└── comments.json      # ← free-placed pins (mutable)
+└── comments.json      # ← free-placed pins (mutable, gitignored usually)
 ```
-The `meta.json` is metadata, `artifact.mdx` is the content, `comments.json` is the only mutable side-channel.
+Two locations are scanned:
+1. **Per-project:** `<projectRoot>/.bizar/artifacts/<slug>/`
+2. **Global:** `~/.config/opencode/artifacts/<slug>/`
+The dashboard uses whichever exists. The project's `artifacts/<slug>/` is preferred when running inside a worktree.
 ## Frontmatter
@@ -40,6 +44,8 @@ kind: plan | postmortem | recap | design
 ---
 ```
+The frontmatter is parsed once and exposed to the React renderer. Unknown keys are passed through. Status controls the badge color + whether the glyph is read-only.
 ## Block vocabulary
 ```mdx
@@ -119,31 +125,109 @@ kind: plan | postmortem | recap | design
 />
 ```
+## What data shape each block expects
+The dashboard validates every block's `data` shape BEFORE rendering. If a field is missing or the wrong type, the block renders an inline error card instead of crashing the whole canvas (v4.4.8+). The same thing happens if a block throws during render — a per-block `ErrorBoundary` catches it.
+| Block | Required `data` fields |
+| --- | --- |
+| `RichText` | none (children are markdown) |
+| `Callout` | none; optional `tone: 'info' \| 'warn' \| 'success' \| 'danger'` (default: info) |
+| `Stat` | `label: string`, `value: string \| number`; optional `trend`, `hint` |
+| `Checklist` | `items: Array<{ id, label, checked }>` |
+| `Table` | `columns: string[]`, `rows: string[][]` (each row is a cell array) |
+| `CodeTabs` | `tabs: Array<{ id, label, language, code, caption? }>` |
+| `Decision` | `options: Array<{ id, label, detail, recommended? }>`; optional `title`, `question` |
+| `OpenQuestions` | `questions: Array<{ id, label, kind, options? }>` |
+| `FileTree` | `entries: Array<{ path, change, note? }>` where `change ∈ {added, modified, removed, renamed}` |
+| `Diff` | `before: string`, `after: string`; optional `filename`, `language`, `mode` |
+| `Workflow` | `steps: Array<{ id, label, type }>`; optional `connections` |
+| `Mockup` | `html: string`; optional `title`, `x`, `y`, `w`, `h` |
+| `Diagram` | `dataHtml: string`; optional `title`, `dataCss` |
 ## Common pitfalls
-### FileTree `change` field
+These are the bugs we've actually hit. Read this section before writing a glyph.
-`change` must be exactly one of: `added`, `modified`, `removed`, `renamed`. Use the `note` field for nuance ("rewritten from scratch", "kept as-is", "deprecated").
+### 1. Backticks inside attribute strings break the parser
+The MDX parser scans for `` ` `` to delimit template literals in JSX. A literal backtick inside an attribute value — even inside a double-quoted string — will close the surrounding context and produce a parse error.
 ```mdx
-<FileTree
-  entries={[
-    { path: "src/chat/Composer.tsx", change: "modified", note: "rewritten as pill composer" }
-  ]}
-/>
+<!-- WRONG: \` inside a string value kills the parser -->
+<RichText id="x">Run \`bizar install\` to bootstrap.</RichText>
+<!-- RIGHT: use straight quotes or rephrase -->
+<RichText id="x">Run 'bizar install' to bootstrap.</RichText>
+<RichText id="x">Run the installer to bootstrap.</RichText>
+```
+The parser's JSX-attribute walker does NOT track string literals when counting braces — so any `{` or `}` inside a string value also throws the parser off. Quote all strings that contain braces.
+### 2. The parser counts braces naively (does NOT track strings)
+The `parseJsxValue` function uses a brace-depth counter that doesn't know about string literals. If you have something like:
+```mdx
+<FileTree entries={[{ path: "x", change: "added", note: "this {weird} note" }]} />
+```
+…the inner `{` and `}` inside the string still increment the brace depth. With deeply-nested or brace-laden strings the walker terminates at the wrong closing brace, leaving a truncated value for `parseJsxValue`.
+**Rule of thumb:** keep string values brace-free. If you must use `{...}` in a note, escape or rephrase.
+### 3. Trailing commas in arrays used to be a phantom-element bug
+Before v4.4.8, an array ending with a trailing comma — e.g. `[a, b,]` — caused the parser to call `parseValue` on the closing `]`, which fell through to the bareword-identifier fallback and returned `{__ident: ''}` as a phantom element. The FileTree then had one extra broken entry that crashed the React renderer (`t.bg` on undefined).
+v4.4.8 fixed this in the parser. But: don't rely on trailing commas, even where supported — keep the array clean.
+### 4. `FileTree` `change` field must be exact
+`change` must be exactly one of: `added`, `modified`, `removed`, `renamed`. Anything else (including the empty string or `null`) makes `FILE_CHANGE[e.change]` return `undefined` and the renderer crashes with "can't access property 'bg' of undefined".
+```mdx
+<!-- WRONG -->
+{ path: "src/foo.ts", change: null, note: "..." }
+{ path: "src/foo.ts", change: "", note: "..." }
+<!-- RIGHT -->
+{ path: "src/foo.ts", change: "modified", note: "..." }
+{ path: "src/foo.ts", change: "added", note: "..." }
 ```
-### MDX heading with `<N`
+If a file's status is genuinely unclear, use `modified` with a `note` that explains why.
-A heading like `## Mobile (under 768px)` is fine. But `## Mobile <768px` breaks the MDX validator because `<7` looks like a malformed JSX tag. Always escape or rephrase.
+### 5. MDX heading with `<N`
-### Block IDs must be unique within a glyph
+A heading like `## Mobile (under 768px)` is fine. But `## Mobile <768px` breaks the MDX validator because `<7` looks like a malformed JSX tag. Always escape or rephrase:
-If you copy a `<RichText>` block, change its `id`. The compiler may warn but won't fail.
+```mdx
+## Mobile (under 768px)        <!-- fine -->
+## Mobile: under 768px          <!-- fine -->
+## Mobile &lt; 768px             <!-- fine but ugly -->
+```
+### 6. Block IDs must be unique within a glyph
+If you copy a `<RichText>` block, change its `id`. The compiler may warn but won't fail. Two blocks with the same id will collide on the comment-pin overlay.
-### Children vs self-closing
+### 7. Children vs self-closing
-Blocks with content (RichText, Callout) use open/close tags with children. Blocks with only data (Stat, Table, FileTree, Decision, etc.) are self-closing.
+Blocks with content (`RichText`, `Callout`) use open/close tags with children. Blocks with only data (`Stat`, `Table`, `FileTree`, `Decision`, etc.) are self-closing — no children, no closing tag.
+```mdx
+<!-- self-closing -->
+<Stat id="x" label="..." value="..." />
+<!-- with children -->
+<RichText id="x">markdown content here</RichText>
+<Callout id="x" tone="warn">important message</Callout>
+```
+### 8. Em-dashes and special characters
+The parser's JSON-like value reader handles `\\`, `\"`, `\'`, `\n`, `\t`, `\r` inside string literals. Em-dashes (`—`), curly quotes (`""`), and other Unicode characters are fine. Just avoid `\``.
 ## meta.json example
@@ -158,17 +242,34 @@ Blocks with content (RichText, Callout) use open/close tags with children. Block
 }
 ```
+`lastEdited` is updated whenever the dashboard re-saves the glyph via the toolbar.
+## Validation workflow
+Before committing a glyph:
+1. Run the compiler against your MDX:
+   ```bash
+   node -e "import('./bizar-dash/src/server/glyphs/mdx-compiler.mjs').then(m => { const fs = require('node:fs'); const src = fs.readFileSync('artifacts/<slug>/artifact.mdx', 'utf8'); const out = m.compileGlyphMdxSync(src); console.log('blocks:', out.blocks.length, 'errors:', out.errors); out.errors.forEach(e => console.error('  line', e.line, ':', e.message)); })"
+   ```
+   This catches parser bugs (missing tags, malformed attrs, etc.) before they hit the dashboard.
+2. Visually inspect the rendered output by hitting `GET /api/artifacts/<slug>/render`. The response is the compiled JSON the React renderer consumes. Look for blocks with missing data fields — those will show up as `data: {}` or `data: []`.
+3. Open the glyph in the dashboard. v4.4.8+ shows a red error banner at the top of the canvas if any block failed to render. The banner lists every block error AND every compiler warning.
 ## How to view in the dashboard
 Glyphs are rendered at `/artifacts/<slug>`. The dashboard shows them with:
-- Section grouping (by block id prefix: `overview`, `implementation`, `questions`)
-- Comment pin overlay (right-click to add)
-- Floating toolbar (Send to agent, share)
-- Read-only by default; `status: shipped` locks editing
+- **Section grouping** — by block id prefix (e.g. all blocks with ids starting `overview_` go into the "Overview" section)
+- **Comment pin overlay** — right-click anywhere to add a comment
+- **Floating toolbar** — Send to agent, share, fullscreen
+- **Error banner** — v4.4.8+: red banner at the top with block render errors and compiler warnings. The page is no longer blank when something fails — you'll see exactly which block crashed and why.
+- **Status badge** — `draft | review | shipped | archived`. `shipped` locks editing.
 ## See also
 - `bizar-dash/src/web/views/glyphs/components.tsx` — block component implementations
-- `bizar-dash/src/server/glyphs/mdx-compiler.mjs` — MDX parser
-- `artifacts/sample-plan-login/` — a complete worked example
-- The user's Obsidian vault for the project's design notes
+- `bizar-dash/src/server/glyphs/mdx-compiler.mjs` — MDX parser (custom, no @mdx-js dependency at runtime)
+- `bizar-dash/src/web/views/glyphs/GlyphRenderer.tsx` — React renderer (v4.4.8+ has the error banner + ErrorBoundary)
+- `artifacts/sample-plan-login/` — a complete worked example

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@polderlabs/bizar",
-  "version": "4.4.7",
+  "version": "4.4.8",
   "description": "Norse-pantheon multi-agent system for opencode — 13 agents across 4 cost tiers with cost-aware routing, plans, and a configurable agent harness. v4 ships as a single npm package bundling the dashboard server, opencode plugin, and typed SDK.",
   "type": "module",
   "bin": {