Files
WebinarNotes/docs/superpowers/plans/2026-07-28-webinar-dashboard.md
meels 84fe67632a docs: fold Task 7 security findings into the plan
Caret and control characters added to the filename guard, file-keyed in-flight
registry replacing the row-scoped one, try/catch around spawn, single finish()
exit path, UTF-8 chunk decoding, bounded output buffer.
2026-07-28 14:39:52 +02:00

1746 lines
63 KiB
Markdown

# Webinar Vault Dashboard Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Build an Obsidian plugin that renders a two-pane dashboard showing the vault's source pipeline (with one-click headless ingest) and concept coverage against the webinar script.
**Architecture:** A single unbundled `main.js` CommonJS plugin. Pure logic (path extraction, pipeline derivation, table parsing, filename validation) lives at the top of the file behind a guarded `require("obsidian")`, so it can be unit-tested with plain `node --test` and no Obsidian runtime. Obsidian glue (code-block processor, DOM rendering, subprocess spawn) sits below it. The plugin reads the vault and never writes to it.
**Tech Stack:** Plain CommonJS (no TypeScript, no bundler, no build step), Node's built-in `node:test` runner, Node `child_process`, Obsidian Plugin API, tesanti design tokens.
## Global Constraints
- **No build step.** `main.js` is loaded by Obsidian verbatim. No TypeScript, no esbuild, no `npm install`.
- **No dependencies.** Tests use Node's built-in `node:test` and `node:assert/strict` only.
- **`isDesktopOnly: true`** is mandatory in `manifest.json` — the plugin uses `child_process`, which Obsidian only provides on desktop.
- **`minAppVersion`: `"1.5.0"`.**
- **Relative `require()` between plugin files is unsupported.** All code lives in one `main.js`.
- **The plugin never writes to the vault.** It reads files and spawns one subprocess. It must never read `index.md`.
- **Design tokens are copied verbatim** from `tesanti Design System.zip → colors_and_type.css`. Black / white / red only; radii at most 6px; 1px hairlines instead of shadows.
- **No emoji anywhere** — in code, UI, comments, or commit messages. Status icons are inline Lucide stroke paths.
- **Sentence case** for all UI copy. No Title Case.
- **The seven stations**, in order: `Chat box`, `ReAct`, `Tools`, `Memory`, `Skills`, `Process`, `OS`.
- **Valid statuses**, exactly: `covered`, `partial`, `absent`.
---
## File Structure
| File | Responsibility |
|---|---|
| `.obsidian/plugins/webinar-dash/manifest.json` | Plugin identity and desktop-only flag |
| `.obsidian/plugins/webinar-dash/main.js` | Everything: pure helpers, renderers, plugin class |
| `.obsidian/plugins/webinar-dash/styles.css` | tesanti tokens and dashboard styling, scoped to `.webinar-dash` |
| `.obsidian/plugins/webinar-dash/test/pipeline.test.js` | Tests for `extractRawPath`, `derivePipeline` |
| `.obsidian/plugins/webinar-dash/test/coverage.test.js` | Tests for `parseCoverageTable`, `groupByStation` |
| `.obsidian/plugins/webinar-dash/test/safety.test.js` | Tests for `isSafeFilename` |
| `dashboard.md` | Vault root. Holds one `webinar-dash` config block |
| `wiki/script-coverage.md` | The coverage table |
| `CLAUDE.md` | Modified: folder convention, tagging rules, Workflow D, sync triggers |
Tests live inside the plugin folder. Obsidian loads only `main.js` from a plugin directory, so `test/` is inert at runtime.
---
### Task 1: Repository and plugin scaffold
**Files:**
- Create: `.gitignore`
- Create: `.obsidian/plugins/webinar-dash/manifest.json`
- Create: `.obsidian/plugins/webinar-dash/main.js`
- Create: `dashboard.md`
**Interfaces:**
- Consumes: nothing
- Produces: a loadable plugin registering the `webinar-dash` code-block language; `module.exports.__test__` as the export surface every later task extends
- [ ] **Step 1: Initialize the repository**
The vault is not currently a git repository. The plugin will spawn agents that write to `wiki/`, `index.md`, and `log.md` unsupervised, so an undo path is required before that capability exists.
```bash
cd "D:/Projects/Notes/Webinar/Webinar"
git init
```
- [ ] **Step 2: Create `.gitignore`**
Obsidian rewrites `workspace.json` constantly; it is local UI state, not vault content.
```gitignore
.obsidian/workspace.json
.obsidian/workspace-mobile.json
.obsidian/cache
```
- [ ] **Step 3: Commit the vault as it stands**
```bash
git add -A
git commit -m "chore: initial commit of vault before dashboard work"
```
- [ ] **Step 4: Create the manifest**
`isDesktopOnly` must be `true` — Obsidian only exposes `child_process` on desktop, and the ingest button depends on it.
```json
{
"id": "webinar-dash",
"name": "Webinar dashboard",
"version": "0.1.0",
"minAppVersion": "1.5.0",
"description": "Source pipeline and script coverage for the webinar vault.",
"author": "meels",
"isDesktopOnly": true
}
```
- [ ] **Step 5: Create `main.js` with the Obsidian guard and a stub renderer**
The `try/catch` around `require("obsidian")` is what lets `node --test` load this file. Under Node the require throws, `OB` stays null, and `PluginBase` becomes an empty class so `class ... extends PluginBase` still evaluates. Every later task adds pure functions above the plugin class and registers them in `__test__`.
```js
"use strict";
// Obsidian injects its own module resolver. Under plain `node --test` it is
// absent, so guard the require and fall back to an empty base class. This is
// what keeps the pure helpers below unit-testable without an Obsidian runtime.
let OB = null;
try {
OB = require("obsidian");
} catch (_) {
OB = null;
}
const PluginBase = OB ? OB.Plugin : class {};
const STATIONS = ["Chat box", "ReAct", "Tools", "Memory", "Skills", "Process", "OS"];
const DEFAULTS = {
script: "raw/sources/Webinar script.md",
coverage: "wiki/script-coverage.md",
rawDir: "raw/sources",
wikiSourceDir: "wiki/sources",
conceptDir: "wiki/concepts",
};
function parseConfig(source) {
const cfg = Object.assign({}, DEFAULTS);
for (const line of String(source).split(/\r?\n/)) {
const m = line.match(/^\s*([A-Za-z][A-Za-z0-9_]*)\s*:\s*(.+?)\s*$/);
if (m && Object.prototype.hasOwnProperty.call(DEFAULTS, m[1])) {
cfg[m[1]] = m[2];
}
}
return cfg;
}
class WebinarDashPlugin extends PluginBase {
async onload() {
this.registerMarkdownCodeBlockProcessor("webinar-dash", (source, el, ctx) => {
const cfg = parseConfig(source);
const root = el.createDiv({ cls: "webinar-dash" });
root.createDiv({ cls: "wd-eyebrow", text: "Webinar dashboard" });
root.createEl("p", { text: `Reading coverage from ${cfg.coverage}` });
});
}
}
module.exports = WebinarDashPlugin;
module.exports.default = WebinarDashPlugin;
module.exports.__test__ = { parseConfig, STATIONS, DEFAULTS };
```
- [ ] **Step 6: Create `dashboard.md`**
````markdown
# Webinar dashboard
```webinar-dash
script: raw/sources/Webinar script.md
coverage: wiki/script-coverage.md
```
````
- [ ] **Step 7: Enable the plugin and verify it renders**
In Obsidian: Settings → Community plugins → turn off Restricted mode if on → Installed plugins → Reload → enable "Webinar dashboard". Open `dashboard.md` in reading view.
Expected: the text `Webinar dashboard` followed by `Reading coverage from wiki/script-coverage.md`.
If nothing renders, run "Reload app without saving" (`Ctrl+R`) — Obsidian caches plugin code between edits.
- [ ] **Step 8: Commit**
```bash
git add .gitignore .obsidian/plugins/webinar-dash dashboard.md
git commit -m "feat: scaffold webinar-dash plugin with config block"
```
---
### Task 2: Source pipeline derivation
**Files:**
- Modify: `.obsidian/plugins/webinar-dash/main.js`
- Test: `.obsidian/plugins/webinar-dash/test/pipeline.test.js`
**Interfaces:**
- Consumes: `module.exports.__test__` from Task 1
- Produces:
- `extractRawPath(text: string) => string | null`
- `derivePipeline({ rawFiles, sourcePages }) => { processed, unprocessed, orphaned }`
- `rawFiles` items: `{ path: string, name: string, size: number }`
- `sourcePages` items: `{ path: string, name: string, rawPath: string | null }`
- `processed` items: `rawFiles` item plus `{ page }`
- [ ] **Step 1: Write the failing tests**
Create `.obsidian/plugins/webinar-dash/test/pipeline.test.js`. The fixtures are the real strings from this vault.
```js
"use strict";
const test = require("node:test");
const assert = require("node:assert/strict");
const { extractRawPath, derivePipeline } = require("../main.js").__test__;
test("extractRawPath pulls the backticked path", () => {
const page = [
"# You're reading way too much code",
"",
"#source",
"",
"## Source Metadata",
"",
"- **Date:** YouTube video, 24:11",
"- **Raw path:** `raw/sources/You're reading way too much code.md`",
"- **Source type:** video essay",
].join("\n");
assert.equal(extractRawPath(page), "raw/sources/You're reading way too much code.md");
});
test("extractRawPath handles cyrillic and em dashes", () => {
const page = "- **Raw path:** `raw/sources/Скиллы на базе git — новая память AI-агентов.md`";
assert.equal(extractRawPath(page), "raw/sources/Скиллы на базе git — новая память AI-агентов.md");
});
test("extractRawPath returns null when the line is absent", () => {
assert.equal(extractRawPath("# A page\n\n#source\n\nNo metadata here."), null);
});
test("derivePipeline splits claimed from unclaimed raw files", () => {
const rawFiles = [
{ path: "raw/sources/Nina interview.md", name: "Nina interview.md", size: 6614 },
{ path: "raw/sources/Webinar script.md", name: "Webinar script.md", size: 15841 },
];
const sourcePages = [
{
path: "wiki/sources/2026-07-14-nina-interview.md",
name: "2026-07-14-nina-interview.md",
rawPath: "raw/sources/Nina interview.md",
},
];
const out = derivePipeline({ rawFiles, sourcePages });
assert.equal(out.processed.length, 1);
assert.equal(out.processed[0].name, "Nina interview.md");
assert.equal(out.processed[0].page.name, "2026-07-14-nina-interview.md");
assert.equal(out.unprocessed.length, 1);
assert.equal(out.unprocessed[0].name, "Webinar script.md");
assert.equal(out.orphaned.length, 0);
});
test("derivePipeline reports source pages whose raw file is gone", () => {
const out = derivePipeline({
rawFiles: [],
sourcePages: [
{ path: "wiki/sources/x.md", name: "x.md", rawPath: "raw/sources/deleted.md" },
],
});
assert.equal(out.orphaned.length, 1);
assert.equal(out.orphaned[0].name, "x.md");
});
test("derivePipeline treats a page with no raw path as orphaned", () => {
const out = derivePipeline({
rawFiles: [{ path: "raw/sources/a.md", name: "a.md", size: 10 }],
sourcePages: [{ path: "wiki/sources/y.md", name: "y.md", rawPath: null }],
});
assert.equal(out.orphaned.length, 1);
assert.equal(out.unprocessed.length, 1);
});
test("derivePipeline routes a duplicate raw-path claim to orphaned", () => {
const out = derivePipeline({
rawFiles: [{ path: "raw/sources/a.md", name: "a.md", size: 10 }],
sourcePages: [
{ path: "wiki/sources/first.md", name: "first.md", rawPath: "raw/sources/a.md" },
{ path: "wiki/sources/second.md", name: "second.md", rawPath: "raw/sources/a.md" },
],
});
assert.equal(out.processed.length, 1);
assert.equal(out.processed[0].page.name, "first.md");
assert.equal(out.unprocessed.length, 0);
assert.deepEqual(out.orphaned.map((p) => p.name), ["second.md"]);
});
test("derivePipeline lists a page once when it is both a duplicate claim and missing its raw file", () => {
const out = derivePipeline({
rawFiles: [{ path: "raw/sources/other.md", name: "other.md", size: 10 }],
sourcePages: [
{ path: "wiki/sources/first.md", name: "first.md", rawPath: "raw/sources/gone.md" },
{ path: "wiki/sources/second.md", name: "second.md", rawPath: "raw/sources/gone.md" },
],
});
assert.deepEqual(out.orphaned.map((p) => p.name), ["first.md", "second.md"]);
});
test("derivePipeline sorts unprocessed by name and processed newest first", () => {
const out = derivePipeline({
rawFiles: [
{ path: "raw/sources/b.md", name: "b.md", size: 1 },
{ path: "raw/sources/a.md", name: "a.md", size: 1 },
{ path: "raw/sources/c.md", name: "c.md", size: 1 },
],
sourcePages: [
{ path: "wiki/sources/2026-07-14-x.md", name: "2026-07-14-x.md", rawPath: "raw/sources/c.md" },
],
});
assert.deepEqual(out.unprocessed.map((f) => f.name), ["a.md", "b.md"]);
assert.equal(out.processed.length, 1);
});
```
- [ ] **Step 2: Run the tests to verify they fail**
```bash
cd "D:/Projects/Notes/Webinar/Webinar/.obsidian/plugins/webinar-dash"
node --test test/pipeline.test.js
```
Expected: FAIL — `extractRawPath is not a function` (it is not yet exported).
- [ ] **Step 3: Implement the helpers**
In `main.js`, insert directly below the `DEFAULTS` constant:
```js
const RAW_PATH_RE = /^\s*-\s*\*\*Raw path:\*\*\s*`([^`]+)`/m;
function extractRawPath(text) {
const m = String(text).match(RAW_PATH_RE);
return m ? m[1].trim() : null;
}
function derivePipeline({ rawFiles, sourcePages }) {
// First claim on a raw path wins. A later page claiming the same file is a
// duplicate claim — real catalog drift — and joins `orphaned` rather than
// being silently dropped. `orphaned` therefore means "source page not paired
// with a raw file", whatever the reason.
const claimed = new Map();
const duplicates = [];
for (const page of sourcePages) {
if (!page.rawPath) continue;
if (claimed.has(page.rawPath)) duplicates.push(page);
else claimed.set(page.rawPath, page);
}
const processed = [];
const unprocessed = [];
for (const file of rawFiles) {
const page = claimed.get(file.path);
if (page) processed.push(Object.assign({}, file, { page }));
else unprocessed.push(file);
}
// One pass over sourcePages, so a page appears in `orphaned` at most once no
// matter how many of the three reasons apply to it. Concatenating a separate
// duplicates array here would double-count a losing claimant whose shared raw
// path is also missing from disk.
const rawPaths = new Set(rawFiles.map((f) => f.path));
const duplicateSet = new Set(duplicates);
const orphaned = sourcePages.filter(
(p) => duplicateSet.has(p) || !p.rawPath || !rawPaths.has(p.rawPath)
);
unprocessed.sort((a, b) => a.name.localeCompare(b.name));
processed.sort((a, b) => b.page.name.localeCompare(a.page.name));
return { processed, unprocessed, orphaned };
}
```
- [ ] **Step 4: Export them**
Replace the `__test__` line at the bottom of `main.js`:
```js
module.exports.__test__ = { parseConfig, extractRawPath, derivePipeline, STATIONS, DEFAULTS };
```
- [ ] **Step 5: Run the tests to verify they pass**
```bash
node --test test/pipeline.test.js
```
Expected: PASS, 9 tests.
- [ ] **Step 6: Commit**
```bash
cd "D:/Projects/Notes/Webinar/Webinar"
git add .obsidian/plugins/webinar-dash
git commit -m "feat: derive source pipeline from raw path claims"
```
---
### Task 3: Left pane — source pipeline rendering
**Files:**
- Modify: `.obsidian/plugins/webinar-dash/main.js`
- Create: `.obsidian/plugins/webinar-dash/styles.css`
**Interfaces:**
- Consumes: `derivePipeline`, `extractRawPath` from Task 2; `parseConfig` from Task 1
- Produces:
- `async readPipeline(app, cfg) => { processed, unprocessed, orphaned }` as a method on the plugin class
- `renderLeftPane(container, pipeline, onIngest)` where `onIngest` is `(file, rowEl) => void`; Task 6 supplies the real handler, this task passes a no-op
- CSS class root `.webinar-dash` and the shared primitives `.wd-eyebrow`, `.wd-row`, `.wd-btn`, `.wd-mono`
- [ ] **Step 1: Create `styles.css` with tesanti tokens**
Values are copied verbatim from `colors_and_type.css`. Scoped to `.webinar-dash` so nothing leaks into the rest of Obsidian. Obsidian loads `styles.css` from the plugin folder automatically.
```css
.webinar-dash {
--wd-ink-000: #ffffff; --wd-ink-050: #f7f7f7; --wd-ink-100: #ececec;
--wd-ink-200: #d9d9d9; --wd-ink-400: #8a8a8a; --wd-ink-500: #5e5e5e;
--wd-ink-700: #262626; --wd-ink-900: #0a0a0a; --wd-ink-999: #000000;
--wd-red-500: #e1261c; --wd-red-600: #c31c14;
--wd-bg: var(--wd-ink-000);
--wd-bg-subtle: var(--wd-ink-050);
--wd-fg: var(--wd-ink-999);
--wd-fg-2: var(--wd-ink-700);
--wd-fg-3: var(--wd-ink-500);
--wd-fg-4: var(--wd-ink-400);
--wd-border: var(--wd-ink-200);
--wd-border-strong: var(--wd-ink-999);
--wd-border-subtle: var(--wd-ink-100);
--wd-accent: var(--wd-red-500);
--wd-accent-press: var(--wd-red-600);
--wd-accent-on: #ffffff;
--wd-ok: #0a8a3f;
--wd-warn: #c68a00;
--wd-danger: var(--wd-red-500);
--wd-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--wd-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
font-family: var(--wd-sans);
color: var(--wd-fg);
display: grid;
grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
gap: 24px;
}
.theme-dark .webinar-dash {
--wd-bg: var(--wd-ink-900);
--wd-bg-subtle: #161616;
--wd-fg: var(--wd-ink-000);
--wd-fg-2: var(--wd-ink-200);
--wd-fg-3: var(--wd-ink-400);
--wd-fg-4: var(--wd-ink-500);
--wd-border: var(--wd-ink-700);
--wd-border-strong: #b8b8b8;
--wd-border-subtle: #161616;
/* Accent tracks the installed theme at .obsidian/themes/tesanti/theme.css,
whose dark section reads "Black canvas, same signal red": --accent-h/-s/-l
are declared once at :root and never redeclared under .theme-dark, and only
the hover state lifts (#c31c14 light, #ff4d43 dark). Match that exactly. */
--wd-accent: var(--wd-red-500);
--wd-accent-press: #ff4d43;
--wd-accent-on: #ffffff;
/* Status tokens are separate from the brand accent by design-system rule, and
here they carry small text in a dense table. #e1261c on near-black is about
3.8:1, under AA for small text, so these lift where the accent does not. */
--wd-ok: #2fbf6a;
--wd-warn: #e0a516;
--wd-danger: #ff5c50;
}
@media (max-width: 820px) {
.webinar-dash { grid-template-columns: minmax(0, 1fr); }
}
.webinar-dash > * { min-width: 0; }
.wd-pane { display: flex; flex-direction: column; gap: 20px; }
.wd-eyebrow {
font-family: var(--wd-mono); font-size: 11px; line-height: 1;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--wd-fg-3); font-weight: 500;
display: flex; align-items: center; gap: 8px;
}
.wd-eyebrow::before {
content: ""; width: 5px; height: 5px; flex: none; background: var(--wd-accent);
}
.wd-block { display: flex; flex-direction: column; gap: 12px; }
.wd-row {
display: flex; align-items: center; gap: 12px;
border: 1px solid var(--wd-border); border-radius: 4px;
padding: 12px 12px 12px 16px; background: var(--wd-bg);
}
.wd-row + .wd-row { margin-top: -1px; }
.wd-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wd-row-name {
font-size: 14px; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wd-mono {
font-family: var(--wd-mono); font-size: 11px; color: var(--wd-fg-3);
font-variant-numeric: tabular-nums;
}
.wd-btn {
display: inline-flex; align-items: center; gap: 6px; flex: none;
font-family: var(--wd-sans); font-size: 13px; font-weight: 600;
padding: 6px 12px; border-radius: 6px; cursor: pointer;
border: 1px solid var(--wd-accent); background: var(--wd-accent);
color: var(--wd-accent-on);
transition: background 120ms cubic-bezier(0.2, 0, 0, 1);
}
.wd-btn:hover { background: var(--wd-accent-press); border-color: var(--wd-accent-press); }
.wd-btn:focus-visible { outline: 2px solid var(--wd-accent); outline-offset: 2px; }
.wd-btn[disabled] {
opacity: 0.45; cursor: not-allowed;
background: transparent; color: var(--wd-fg-3); border-color: var(--wd-border);
}
.wd-btn svg { width: 14px; height: 14px; flex: none; }
.wd-done { display: flex; flex-direction: column; }
.wd-done-row {
display: flex; align-items: baseline; gap: 12px; padding: 5px 0;
border-bottom: 1px solid var(--wd-border-subtle); font-size: 13px;
}
.wd-done-row:last-child { border-bottom: 0; }
.wd-done-name {
color: var(--wd-fg-2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wd-note { font-size: 12px; color: var(--wd-fg-3); }
.wd-error {
font-size: 13px; color: var(--wd-danger);
border: 1px solid var(--wd-danger); border-radius: 4px; padding: 12px;
}
@media (prefers-reduced-motion: reduce) {
.webinar-dash * { transition-duration: 0.01ms !important; }
}
```
- [ ] **Step 2: Add the Lucide icon helper and the left-pane renderer**
Insert into `main.js` above the plugin class. Icons are inline stroke paths — the Lucide CDN is unavailable offline and the design system forbids emoji.
```js
// Source types CLAUDE.md documents for raw/sources. Anything else in that
// folder is not a source and stays out of the queue.
const RAW_EXTENSIONS = new Set(["md", "txt", "pdf"]);
const ICONS = {
terminal: "M4 17l6-6-6-6M12 19h8",
check: "M20 6 9 17l-5-5",
minus: "M5 12h14",
x: "M18 6 6 18M6 6l12 12",
refresh: "M3 12a9 9 0 0 1 9-9 9 9 0 0 1 6.7 3L21 8M21 3v5h-5 M21 12a9 9 0 0 1-9 9 9 9 0 0 1-6.7-3L3 16M3 21v-5h5",
};
// Built with createElementNS rather than Obsidian's createSvg helper, whose
// availability varies by version. This works on any Obsidian build.
const SVG_NS = "http://www.w3.org/2000/svg";
function addIcon(parent, name) {
const svg = document.createElementNS(SVG_NS, "svg");
svg.setAttribute("viewBox", "0 0 24 24");
svg.setAttribute("fill", "none");
svg.setAttribute("aria-hidden", "true");
const path = document.createElementNS(SVG_NS, "path");
path.setAttribute("d", ICONS[name]);
path.setAttribute("stroke", "currentColor");
path.setAttribute("stroke-width", "1.75");
path.setAttribute("stroke-linecap", "round");
path.setAttribute("stroke-linejoin", "round");
svg.appendChild(path);
parent.appendChild(svg);
return svg;
}
function formatBytes(n) {
return `${n.toLocaleString("en-US")} B`;
}
function renderLeftPane(container, pipeline, onIngest) {
const pane = container.createDiv({ cls: "wd-pane" });
const queue = pane.createDiv({ cls: "wd-block" });
queue.createDiv({
cls: "wd-eyebrow",
text: `Queue — ${pipeline.unprocessed.length} unprocessed`,
});
if (pipeline.unprocessed.length === 0) {
queue.createDiv({ cls: "wd-note", text: "Every raw source has a summary page." });
}
for (const file of pipeline.unprocessed) {
const row = queue.createDiv({ cls: "wd-row" });
const main = row.createDiv({ cls: "wd-row-main" });
main.createDiv({ cls: "wd-row-name", text: file.name });
main.createDiv({ cls: "wd-mono", text: formatBytes(file.size) });
const btn = row.createEl("button", { cls: "wd-btn" });
addIcon(btn, "terminal");
btn.createSpan({ text: "Ingest" });
btn.addEventListener("click", () => onIngest(file, row));
}
const done = pane.createDiv({ cls: "wd-block" });
done.createDiv({ cls: "wd-eyebrow", text: `Ingested — ${pipeline.processed.length}` });
const list = done.createDiv({ cls: "wd-done" });
for (const file of pipeline.processed) {
const row = list.createDiv({ cls: "wd-done-row" });
const date = file.page.name.slice(0, 10);
row.createSpan({ cls: "wd-mono", text: /^\d{4}-\d{2}-\d{2}$/.test(date) ? date : "—" });
row.createSpan({ cls: "wd-done-name", text: file.name.replace(/\.md$/, "") });
}
if (pipeline.orphaned.length > 0) {
const orphan = pane.createDiv({ cls: "wd-block" });
orphan.createDiv({
cls: "wd-eyebrow",
text: `Orphaned — ${pipeline.orphaned.length}`,
});
for (const page of pipeline.orphaned) {
const row = orphan.createDiv({ cls: "wd-done-row" });
row.createSpan({ cls: "wd-done-name", text: page.name });
row.createSpan({ cls: "wd-mono", text: page.rawPath || "no raw path" });
}
}
return pane;
}
```
- [ ] **Step 3: Replace the plugin class body to read the vault and render**
`vault.getFiles()` returns every markdown file; filter by path prefix. `vault.cachedRead` is the correct read for display purposes.
```js
class WebinarDashPlugin extends PluginBase {
async onload() {
this.registerMarkdownCodeBlockProcessor("webinar-dash", async (source, el, ctx) => {
const cfg = parseConfig(source);
const root = el.createDiv({ cls: "webinar-dash" });
try {
const pipeline = await this.readPipeline(cfg);
renderLeftPane(root, pipeline, () => {});
} catch (err) {
root.createDiv({ cls: "wd-error", text: `Dashboard failed: ${err.message}` });
}
});
}
async readPipeline(cfg) {
const all = this.app.vault.getFiles();
const rawDir = cfg.rawDir.replace(/\/+$/, "") + "/";
const wikiDir = cfg.wikiSourceDir.replace(/\/+$/, "") + "/";
// CLAUDE.md documents raw/sources as holding "markdown/text/pdf exports".
// Allow-listing only "md" would hide the others from the queue with no
// warning — the same silent-invisibility failure this dashboard exists to
// remove. Wiki source pages below stay markdown-only; those really are .md.
const rawFiles = all
.filter((f) => f.path.startsWith(rawDir) && RAW_EXTENSIONS.has(f.extension))
.map((f) => ({ path: f.path, name: f.name, size: f.stat.size }));
const pageFiles = all.filter((f) => f.path.startsWith(wikiDir) && f.extension === "md");
const sourcePages = [];
for (const f of pageFiles) {
const text = await this.app.vault.cachedRead(f);
sourcePages.push({ path: f.path, name: f.name, rawPath: extractRawPath(text) });
}
return derivePipeline({ rawFiles, sourcePages });
}
}
```
- [ ] **Step 4: Verify in Obsidian**
Reload the app (`Ctrl+R`) and open `dashboard.md` in reading view.
Expected, against the vault's current state:
- `Queue — 3 unprocessed` listing `Agentic Engineering, explained by a 10x developer.md` (15,020 B), `Webinar Plan - From Chat Box to Your Own OS.md` (17,177 B), and `Webinar script.md` (15,841 B), each with a red **Ingest** button that does nothing yet.
- `Ingested — 9` listing the source summaries newest first, starting with `2026-07-24`.
- No orphaned block.
- [ ] **Step 5: Run the existing tests to confirm nothing regressed**
```bash
cd "D:/Projects/Notes/Webinar/Webinar/.obsidian/plugins/webinar-dash"
node --test
```
Bare `node --test` auto-discovers the test files. Do not pass `test/` as an
argument — Node 24 resolves a bare directory path as a module and fails with
`MODULE_NOT_FOUND` before running anything.
Expected: PASS, 9 tests.
- [ ] **Step 6: Commit**
```bash
cd "D:/Projects/Notes/Webinar/Webinar"
git add .obsidian/plugins/webinar-dash
git commit -m "feat: render source pipeline in left pane"
```
---
### Task 4: Coverage table parser
**Files:**
- Modify: `.obsidian/plugins/webinar-dash/main.js`
- Test: `.obsidian/plugins/webinar-dash/test/coverage.test.js`
**Interfaces:**
- Consumes: `STATIONS` from Task 1
- Produces:
- `parseCoverageTable(markdown) => { meta, rows, errors }`
- `meta`: `{ script: string | null, lastSynced: string | null }`
- `rows` items: `{ concept: string, status: "covered"|"partial"|"absent", stations: string[], pinned: boolean, line: number }`
- `errors` items: `{ line: number, text: string, reason: string }`
- `groupByStation(rows) => Array<{ station: string, rows: Row[] }>` ordered `All stations`, then the seven stations, then `No station`; empty groups omitted
- [ ] **Step 1: Write the failing tests**
Create `.obsidian/plugins/webinar-dash/test/coverage.test.js`.
```js
"use strict";
const test = require("node:test");
const assert = require("node:assert/strict");
const { parseCoverageTable, groupByStation } = require("../main.js").__test__;
const DOC = [
"# Script coverage",
"",
"#coverage",
"",
"## Metadata",
"",
"- **Script:** `raw/sources/Webinar script.md`",
"- **Last synced:** 2026-07-28",
"",
"## Coverage",
"",
"| Concept | Status | Station | Pinned |",
"|---|---|---|---|",
"| [[harness]] | covered | Tools | |",
"| [[agentic-loops]] | partial | Process | |",
"| [[levels-of-ai-usage]] | partial | all | |",
"| [[connections-as-moat]] | absent | — | yes |",
].join("\n");
test("parseCoverageTable reads metadata", () => {
const { meta } = parseCoverageTable(DOC);
assert.equal(meta.script, "raw/sources/Webinar script.md");
assert.equal(meta.lastSynced, "2026-07-28");
});
test("parseCoverageTable reads every data row and skips the header", () => {
const { rows, errors } = parseCoverageTable(DOC);
assert.equal(errors.length, 0);
assert.equal(rows.length, 4);
assert.deepEqual(rows.map((r) => r.concept), [
"harness", "agentic-loops", "levels-of-ai-usage", "connections-as-moat",
]);
});
test("parseCoverageTable normalises stations", () => {
const { rows } = parseCoverageTable(DOC);
assert.deepEqual(rows[0].stations, ["Tools"]);
assert.deepEqual(rows[2].stations, ["all"]);
assert.deepEqual(rows[3].stations, []);
});
test("parseCoverageTable reads the pinned flag", () => {
const { rows } = parseCoverageTable(DOC);
assert.equal(rows[0].pinned, false);
assert.equal(rows[3].pinned, true);
});
test("parseCoverageTable strips a wikilink alias", () => {
const doc = "| Concept | Status | Station |\n|---|---|---|\n| [[harness\\|The harness]] | covered | Tools |";
const { rows } = parseCoverageTable(doc);
assert.equal(rows[0].concept, "harness");
});
test("parseCoverageTable splits a multi-station cell", () => {
const doc = "| C | S | St |\n|---|---|---|\n| [[x]] | covered | Tools, Memory |";
const { rows } = parseCoverageTable(doc);
assert.deepEqual(rows[0].stations, ["Tools", "Memory"]);
});
test("parseCoverageTable rejects an invalid status instead of coercing it", () => {
const doc = "| C | S | St |\n|---|---|---|\n| [[x]] | maybe | Tools |";
const { rows, errors } = parseCoverageTable(doc);
assert.equal(rows.length, 0);
assert.equal(errors.length, 1);
assert.match(errors[0].reason, /invalid status/);
assert.equal(errors[0].line, 3);
});
test("parseCoverageTable reports a row with too few columns", () => {
const doc = "| C | S | St |\n|---|---|---|\n| [[x]] | covered |";
const { rows, errors } = parseCoverageTable(doc);
assert.equal(rows.length, 0);
assert.equal(errors.length, 1);
assert.match(errors[0].reason, /at least 3 columns/);
});
test("parseCoverageTable returns empty results for a document with no table", () => {
const { rows, errors } = parseCoverageTable("# Nothing\n\nJust prose.");
assert.equal(rows.length, 0);
assert.equal(errors.length, 0);
});
test("groupByStation orders all-stations first and no-station last", () => {
const { rows } = parseCoverageTable(DOC);
const groups = groupByStation(rows);
assert.deepEqual(groups.map((g) => g.station), [
"All stations", "Tools", "Process", "No station",
]);
assert.equal(groups[1].rows[0].concept, "harness");
});
test("groupByStation places a multi-station row under its first station only", () => {
const rows = [{ concept: "x", status: "covered", stations: ["Memory", "Skills"], pinned: false, line: 1 }];
const groups = groupByStation(rows);
assert.equal(groups.length, 1);
assert.equal(groups[0].station, "Memory");
});
```
- [ ] **Step 2: Run the tests to verify they fail**
```bash
cd "D:/Projects/Notes/Webinar/Webinar/.obsidian/plugins/webinar-dash"
node --test test/coverage.test.js
```
Expected: FAIL — `parseCoverageTable is not a function`.
- [ ] **Step 3: Implement the parser**
Insert into `main.js` below `derivePipeline`. The `inTable` flag flips on the `|---|` separator, which is what distinguishes the header row from data rows.
```js
const VALID_STATUS = new Set(["covered", "partial", "absent"]);
const SEPARATOR_RE = /^\|?\s*:?-{2,}/;
function parseCoverageTable(markdown) {
const text = String(markdown);
const meta = { script: null, lastSynced: null };
const scriptM = text.match(/^\s*-\s*\*\*Script:\*\*\s*`([^`]+)`/m);
if (scriptM) meta.script = scriptM[1].trim();
const syncM = text.match(/^\s*-\s*\*\*Last synced:\*\*\s*(\S+)/m);
if (syncM) meta.lastSynced = syncM[1].trim();
const rows = [];
const errors = [];
let inTable = false;
text.split(/\r?\n/).forEach((line, i) => {
const t = line.trim();
if (!t.startsWith("|")) {
inTable = false;
return;
}
if (SEPARATOR_RE.test(t)) {
inTable = true;
return;
}
if (!inTable) return;
const body = t.endsWith("|") ? t.slice(1, -1) : t.slice(1);
// Split on unescaped pipes only. Obsidian escapes the pipe of a piped
// wikilink inside a table cell as `\|`, and a plain split("|") tears
// `[[harness\|alias]]` into two cells, shifting every later column left —
// the status cell then reads "The harness]]" and the row is rejected.
const cells = body.split(/(?<!\\)\|/).map((c) => c.trim());
if (cells.length < 3) {
errors.push({ line: i + 1, text: t, reason: "expected at least 3 columns" });
return;
}
const status = cells[1].toLowerCase();
if (!VALID_STATUS.has(status)) {
errors.push({ line: i + 1, text: t, reason: `invalid status "${cells[1]}"` });
return;
}
// Capture up to the first ] | or backslash. Obsidian escapes the pipe in a
// piped wikilink inside a table cell, so the raw cell reads [[name\|alias]] —
// excluding the backslash is what keeps the trailing "\" out of the name.
const linkM = cells[0].match(/\[\[([^\]|\\]+)/);
const stationCell = cells[2];
rows.push({
concept: linkM ? linkM[1].trim() : cells[0],
status,
stations:
stationCell === "—" || stationCell === "-" || stationCell === ""
? []
: stationCell.split(",").map((s) => s.trim()).filter(Boolean),
pinned: (cells[3] || "").toLowerCase() === "yes",
line: i + 1,
});
});
return { meta, rows, errors };
}
function groupByStation(rows) {
const order = ["All stations", ...STATIONS, "No station"];
const buckets = new Map(order.map((k) => [k, []]));
for (const row of rows) {
let key;
if (row.stations.includes("all")) key = "All stations";
else if (row.stations.length === 0) key = "No station";
else key = row.stations[0];
if (!buckets.has(key)) buckets.set(key, []);
buckets.get(key).push(row);
}
const known = order.filter((k) => buckets.get(k).length > 0);
const unknown = [...buckets.keys()].filter((k) => !order.includes(k) && buckets.get(k).length > 0);
return [...known, ...unknown].map((station) => ({ station, rows: buckets.get(station) }));
}
```
The `\\|` in the alias test is an escaped pipe inside a JS string, which reaches the parser as a literal `|` — matching how Obsidian escapes piped wikilinks inside table cells.
- [ ] **Step 4: Export them**
```js
module.exports.__test__ = {
parseConfig, extractRawPath, derivePipeline,
parseCoverageTable, groupByStation,
STATIONS, DEFAULTS,
};
```
- [ ] **Step 5: Run the tests to verify they pass**
```bash
node --test test/coverage.test.js
```
Expected: PASS, 11 tests.
- [ ] **Step 6: Commit**
```bash
cd "D:/Projects/Notes/Webinar/Webinar"
git add .obsidian/plugins/webinar-dash
git commit -m "feat: parse the script coverage table"
```
---
### Task 5: Coverage data file and CLAUDE.md contract
This is the wiki-side task. It creates the file the renderer reads and installs the rule that keeps it current. No plugin code changes.
**Files:**
- Create: `wiki/script-coverage.md`
- Modify: `CLAUDE.md` (Folder Convention, Tagging Rules, Standard Workflows, Operational Commands)
- Modify: `index.md`
- Modify: `log.md`
**Interfaces:**
- Consumes: the row format defined in Task 4
- Produces: `wiki/script-coverage.md` conforming to that format, with one row per page in `wiki/concepts/`
- [ ] **Step 1: Create `wiki/script-coverage.md`**
Statuses below are the assessment made during design, read from `raw/sources/Webinar script.md` against each concept page. All 19 concept pages are present.
```markdown
# Script coverage
#coverage
## Metadata
- **Script:** `raw/sources/Webinar script.md`
- **Last synced:** 2026-07-28
- **Stations:** Chat box · ReAct · Tools · Memory · Skills · Process · OS
## Coverage
| Concept | Status | Station | Pinned |
|---|---|---|---|
| [[harness]] | covered | Tools | |
| [[evolution-of-agent-tooling]] | covered | Tools | |
| [[skills-as-memory]] | covered | Skills | |
| [[solve-first-then-skillify]] | covered | Skills | |
| [[personal-ai-operating-system]] | covered | OS | |
| [[context-as-scarce-resource]] | partial | Memory | |
| [[agentic-loops]] | partial | Process | |
| [[code-as-throwaway]] | partial | OS | |
| [[levels-of-ai-usage]] | partial | all | |
| [[integration-dead-ends]] | absent | — | |
| [[leave-less-room-for-imagination]] | absent | — | |
| [[product-ownership]] | absent | — | |
| [[connections-as-moat]] | absent | — | |
| [[network-from-a-standing-start]] | absent | — | |
| [[seniority-and-the-junior-squeeze]] | absent | — | |
| [[decoupling-identity-from-profession]] | absent | — | |
| [[think-wider-not-bigger]] | absent | — | |
| [[make-more-cheap-code]] | absent | — | |
| [[enterprise-ai-reality]] | absent | — | |
## Notes
- Eight of the ten absent concepts are human-side or strategy-side, per the grouping in `index.md`. The script's spine is machine-side and it never reaches that material.
- The remaining two absent concepts are machine-side: [[integration-dead-ends]] and [[leave-less-room-for-imagination]]. The script demonstrates the happy path, so it never reaches connector gating or spec ambiguity — the two ways the machine side fails in practice.
- The `ReAct` station carries no wiki concept at all.
- Set `Pinned` to `yes` on any row whose status is a deliberate decision. Sync will not touch it.
## Related Pages
- [[overview]]
- `raw/sources/Webinar script.md`
```
- [ ] **Step 2: Add the file to the folder convention in `CLAUDE.md`**
In the `## Folder Convention` code block, add below the `wiki/overview.md` line:
```text
script-coverage.md # machine-maintained: concept coverage vs the webinar script
```
- [ ] **Step 3: Add the tag row in `CLAUDE.md`**
In the Folder → tag table under `## Tagging Rules`, add a row after the `wiki/overview.md` row:
```text
| `wiki/script-coverage.md` | `#coverage` |
```
- [ ] **Step 4: Add Workflow D to `CLAUDE.md`**
Append to `## Standard Workflows`, after Workflow C:
```markdown
### Workflow D: Sync Script Coverage
Maintains `wiki/script-coverage.md` — one row per page in `wiki/concepts/`, judged
against the script named in that file's `**Script:**` metadata field.
1. Read `wiki/script-coverage.md` and note every row where `Pinned` is `yes`.
2. Read the script and every page in `wiki/concepts/`.
3. For each concept, decide `Status` and `Station`:
- `covered` — the script delivers the idea, whether or not it uses the page's name.
- `partial` — the script gestures at it but never lands it.
- `absent` — the script never reaches it.
- `Station` is one of the seven, a comma-separated list, `all`, or `—` when absent.
4. **Never modify a row whose `Pinned` is `yes`** — not its status, not its station.
A pinned row is the user's judgment and outranks yours.
5. Add rows for concept pages with no row. Remove rows whose concept page no longer exists.
6. Update `**Last synced:**` to today.
7. Update `index.md` and append a `sync` entry to `log.md`.
Run this workflow:
- at the end of any ingest that creates or modifies a page in `wiki/concepts/`
- whenever the script file itself changes
- on the explicit `sync script coverage` intent
The coverage baseline is always the raw script. Ingesting the script into
`wiki/sources/` does not change the baseline.
```
- [ ] **Step 5: Add the intent to `CLAUDE.md`**
In `## Operational Commands (Natural Language)`, add to the supported intents list:
```markdown
- "sync script coverage"
```
- [ ] **Step 6: Update `index.md`**
Add a section after `## Sources`, and correct the stale not-yet-ingested line.
```markdown
## Coverage
- [[script-coverage]] — every concept vs `raw/sources/Webinar script.md`; 5 covered, 4 partial, 10 absent
```
Replace the existing `**Raw, not yet ingested:**` line with the accurate set — the two note files live in `raw/notes/`, not `raw/sources/`, and one raw source was missing entirely:
```markdown
**Raw, not yet ingested:** `raw/sources/Agentic Engineering, explained by a 10x developer.md` · `raw/sources/Webinar Plan - From Chat Box to Your Own OS.md` · `raw/sources/Webinar script.md`
```
- [ ] **Step 7: Append to `log.md`**
```markdown
## 2026-07-28 — sync (script coverage, initial)
- Intent: sync script coverage
- Input: first run of Workflow D, establishing `wiki/script-coverage.md`.
- Pages created: [[script-coverage]] (coverage) — 19 rows, one per concept page.
- Pages updated: `CLAUDE.md` (folder convention, `#coverage` tag row, Workflow D, new intent), `index.md` (new Coverage section; corrected the not-yet-ingested list — `Ideas for webinar.md` and `my theses.md` were listed under `raw/sources/` but live in `raw/notes/`, and `Agentic Engineering, explained by a 10x developer.md` was missing entirely).
- Notes: Initial assessment is 5 covered, 4 partial, 10 absent. Eight of the ten absent are human-side or strategy-side per this file's own concept grouping; the other two — [[integration-dead-ends]] and [[leave-less-room-for-imagination]] — are machine-side, absent because the script demos the happy path and never reaches connector gating or spec ambiguity. The `ReAct` station carries no wiki concept. No concept pages were edited.
- Next: decide whether the human-side cluster earns a station or is a deliberate cut; decide separately whether the two absent machine-side failure modes belong in the demo; pin the rows that are decided so future syncs leave them alone.
```
- [ ] **Step 8: Verify the file parses**
```bash
cd "D:/Projects/Notes/Webinar/Webinar/.obsidian/plugins/webinar-dash"
node -e "
const fs = require('fs');
const { parseCoverageTable } = require('./main.js').__test__;
const md = fs.readFileSync('../../../wiki/script-coverage.md', 'utf8');
const r = parseCoverageTable(md);
console.log('rows:', r.rows.length, 'errors:', r.errors.length);
console.log('meta:', r.meta);
if (r.errors.length) { console.log(r.errors); process.exit(1); }
if (r.rows.length !== 19) { console.log('expected 19 rows'); process.exit(1); }
"
```
Expected: `rows: 19 errors: 0` and metadata showing the script path and `2026-07-28`.
- [ ] **Step 9: Commit**
```bash
cd "D:/Projects/Notes/Webinar/Webinar"
git add wiki/script-coverage.md CLAUDE.md index.md log.md
git commit -m "feat: add script coverage file and Workflow D sync contract"
```
---
### Task 6: Right pane — coverage rendering
**Files:**
- Modify: `.obsidian/plugins/webinar-dash/main.js`
- Modify: `.obsidian/plugins/webinar-dash/styles.css`
**Interfaces:**
- Consumes: `parseCoverageTable`, `groupByStation` from Task 4; `addIcon` from Task 3; `wiki/script-coverage.md` from Task 5
- Produces:
- `reconcileConcepts(rows, conceptNames) => { rows, unsynced, stale }` where `unsynced` is concept names with no row and `stale` is rows whose concept page is gone
- `renderRightPane(container, parsed, reconciled)`
- [ ] **Step 1: Add the reconcile helper and its tests**
Append to `.obsidian/plugins/webinar-dash/test/coverage.test.js`:
```js
const { reconcileConcepts } = require("../main.js").__test__;
test("reconcileConcepts finds concept pages with no row", () => {
const rows = [{ concept: "harness", status: "covered", stations: ["Tools"], pinned: false, line: 1 }];
const out = reconcileConcepts(rows, ["harness", "brand-new-concept"]);
assert.deepEqual(out.unsynced, ["brand-new-concept"]);
assert.deepEqual(out.stale, []);
});
test("reconcileConcepts finds rows whose concept page is gone", () => {
const rows = [
{ concept: "harness", status: "covered", stations: ["Tools"], pinned: false, line: 1 },
{ concept: "deleted-idea", status: "absent", stations: [], pinned: false, line: 2 },
];
const out = reconcileConcepts(rows, ["harness"]);
assert.deepEqual(out.stale.map((r) => r.concept), ["deleted-idea"]);
assert.deepEqual(out.unsynced, []);
});
```
- [ ] **Step 2: Run the tests to verify they fail**
```bash
cd "D:/Projects/Notes/Webinar/Webinar/.obsidian/plugins/webinar-dash"
node --test test/coverage.test.js
```
Expected: FAIL — `reconcileConcepts is not a function`.
- [ ] **Step 3: Implement `reconcileConcepts` and export it**
Insert into `main.js` below `groupByStation`:
```js
function reconcileConcepts(rows, conceptNames) {
const named = new Set(conceptNames);
const rowed = new Set(rows.map((r) => r.concept));
return {
rows,
unsynced: conceptNames.filter((n) => !rowed.has(n)).sort(),
stale: rows.filter((r) => !named.has(r.concept)),
};
}
```
Add `reconcileConcepts` to the `__test__` export object.
- [ ] **Step 4: Run the tests to verify they pass**
```bash
node --test test/coverage.test.js
```
Expected: PASS, 13 tests.
- [ ] **Step 5: Add the coverage styles**
Append to `styles.css`:
```css
.wd-meter { display: flex; gap: 2px; height: 8px; width: 100%; }
.wd-meter > i { display: block; height: 100%; }
.wd-seg-covered { background: var(--wd-ok); }
.wd-seg-partial { background: var(--wd-warn); }
.wd-seg-absent { background: var(--wd-danger); }
.wd-key { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--wd-fg-2); }
.wd-key > span { display: inline-flex; align-items: center; gap: 6px; }
.wd-key i { width: 8px; height: 8px; flex: none; }
.wd-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.wd-tbl th {
font-family: var(--wd-mono); font-size: 10px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--wd-fg-3); font-weight: 500;
text-align: left; padding: 0 12px 8px 0;
border-bottom: 1px solid var(--wd-border-strong);
}
.wd-tbl td {
padding: 6px 12px 6px 0; border-bottom: 1px solid var(--wd-border-subtle);
vertical-align: baseline;
}
.wd-grp td {
padding-top: 16px; border-bottom: 1px solid var(--wd-border-strong);
font-family: var(--wd-mono); font-size: 10px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--wd-fg); font-weight: 500;
}
.wd-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
.wd-stat svg { width: 13px; height: 13px; flex: none; }
.wd-covered { color: var(--wd-ok); }
.wd-partial { color: var(--wd-warn); }
.wd-absent { color: var(--wd-danger); }
.wd-pin { font-family: var(--wd-mono); font-size: 10px; color: var(--wd-fg-4); }
```
- [ ] **Step 6: Add the right-pane renderer**
Insert into `main.js` below `renderLeftPane`:
```js
const STATUS_ICON = { covered: "check", partial: "minus", absent: "x" };
function renderRightPane(container, parsed, reconciled) {
const pane = container.createDiv({ cls: "wd-pane" });
pane.createDiv({ cls: "wd-eyebrow", text: "Coverage — by station" });
const counts = { covered: 0, partial: 0, absent: 0 };
for (const row of parsed.rows) counts[row.status] += 1;
const total = parsed.rows.length;
if (total > 0) {
const meter = pane.createDiv({ cls: "wd-meter" });
meter.setAttr(
"aria-label",
`Coverage: ${counts.covered} covered, ${counts.partial} partial, ${counts.absent} absent of ${total}`
);
for (const key of ["covered", "partial", "absent"]) {
if (counts[key] === 0) continue;
const seg = meter.createEl("i", { cls: `wd-seg-${key}` });
seg.style.flex = String(counts[key]);
}
const key = pane.createDiv({ cls: "wd-key" });
for (const name of ["covered", "partial", "absent"]) {
const span = key.createSpan();
span.createEl("i", { cls: `wd-seg-${name}` });
span.createSpan({ text: `${counts[name]} ${name}` });
}
}
if (parsed.errors.length > 0) {
const box = pane.createDiv({ cls: "wd-error" });
box.createDiv({ text: `${parsed.errors.length} unparseable row(s):` });
for (const e of parsed.errors) {
box.createDiv({ cls: "wd-mono", text: `line ${e.line}${e.reason}` });
}
}
const table = pane.createEl("table", { cls: "wd-tbl" });
const head = table.createEl("thead").createEl("tr");
for (const h of ["Concept", "Status", "Station", ""]) head.createEl("th", { text: h });
const body = table.createEl("tbody");
for (const group of groupByStation(parsed.rows)) {
const gr = body.createEl("tr", { cls: "wd-grp" });
gr.createEl("td", { attr: { colspan: "4" }, text: `${group.station}${group.rows.length}` });
for (const row of group.rows) {
const tr = body.createEl("tr");
// Obsidian's click handler resolves internal links via data-href, so both
// attributes are required for the link to open the concept page.
tr.createEl("td").createEl("a", {
cls: "internal-link",
text: row.concept,
attr: { href: row.concept, "data-href": row.concept },
});
const stat = tr.createEl("td").createSpan({ cls: `wd-stat wd-${row.status}` });
addIcon(stat, STATUS_ICON[row.status]);
stat.createSpan({ text: row.status });
tr.createEl("td", { cls: "wd-mono", text: row.stations.join(", ") || "—" });
tr.createEl("td", { cls: "wd-pin", text: row.pinned ? "pinned" : "" });
}
}
if (reconciled.unsynced.length > 0) {
const box = pane.createDiv({ cls: "wd-block" });
box.createDiv({ cls: "wd-eyebrow", text: `Unsynced — ${reconciled.unsynced.length}` });
box.createDiv({
cls: "wd-note",
text: `Concept pages with no row. Run "sync script coverage": ${reconciled.unsynced.join(", ")}`,
});
}
if (reconciled.stale.length > 0) {
const box = pane.createDiv({ cls: "wd-block" });
box.createDiv({ cls: "wd-eyebrow", text: `Stale — ${reconciled.stale.length}` });
box.createDiv({
cls: "wd-note",
text: `Rows whose concept page is gone: ${reconciled.stale.map((r) => r.concept).join(", ")}`,
});
}
return pane;
}
```
- [ ] **Step 7: Wire it into the plugin class**
Replace the code-block processor callback and add a reader method:
```js
this.registerMarkdownCodeBlockProcessor("webinar-dash", async (source, el, ctx) => {
const cfg = parseConfig(source);
const root = el.createDiv({ cls: "webinar-dash" });
try {
const pipeline = await this.readPipeline(cfg);
renderLeftPane(root, pipeline, () => {});
} catch (err) {
root.createDiv({ cls: "wd-error", text: `Pipeline failed: ${err.message}` });
}
try {
const { parsed, reconciled } = await this.readCoverage(cfg);
renderRightPane(root, parsed, reconciled);
} catch (err) {
root.createDiv({ cls: "wd-error", text: `Coverage failed: ${err.message}` });
}
});
```
The two panes render in separate `try` blocks so a broken coverage file never blanks the source pipeline.
```js
async readCoverage(cfg) {
const file = this.app.vault.getAbstractFileByPath(cfg.coverage);
if (!file) throw new Error(`no coverage file at ${cfg.coverage}`);
const parsed = parseCoverageTable(await this.app.vault.cachedRead(file));
const conceptDir = cfg.conceptDir.replace(/\/+$/, "") + "/";
const conceptNames = this.app.vault
.getFiles()
.filter((f) => f.path.startsWith(conceptDir) && f.extension === "md")
.map((f) => f.basename);
return { parsed, reconciled: reconcileConcepts(parsed.rows, conceptNames) };
}
```
- [ ] **Step 8: Verify in Obsidian**
Reload (`Ctrl+R`) and open `dashboard.md`.
Expected: a right pane with a meter reading `5 covered`, `4 partial`, `10 absent`; a table grouped `All stations — 1`, `Tools — 2`, `Memory — 1`, `Skills — 2`, `Process — 1`, `OS — 2`, `No station — 10`; no unsynced block; no stale block; concept names clickable through to their pages.
- [ ] **Step 9: Commit**
```bash
cd "D:/Projects/Notes/Webinar/Webinar"
git add .obsidian/plugins/webinar-dash
git commit -m "feat: render coverage meter and station-grouped table"
```
---
### Task 7: Headless ingest
**Files:**
- Modify: `.obsidian/plugins/webinar-dash/main.js`
- Modify: `.obsidian/plugins/webinar-dash/styles.css`
- Test: `.obsidian/plugins/webinar-dash/test/safety.test.js`
**Interfaces:**
- Consumes: `renderLeftPane`'s `onIngest(file, rowEl)` callback from Task 3
- Produces:
- `isSafeFilename(name) => boolean`
- `runIngest(file, rowEl)` as a plugin method
- [ ] **Step 1: Write the failing tests**
Create `.obsidian/plugins/webinar-dash/test/safety.test.js`. The accept cases are real filenames from this vault.
```js
"use strict";
const test = require("node:test");
const assert = require("node:assert/strict");
const { isSafeFilename } = require("../main.js").__test__;
test("isSafeFilename accepts every filename currently in the vault", () => {
const real = [
"Agentic Engineering, explained by a 10x developer.md",
"Webinar Plan - From Chat Box to Your Own OS.md",
"Webinar script.md",
"You're reading way too much code.md",
"ИИ глупый!.md",
"Скиллы на базе git — новая память AI-агентов.md",
"sebastian interview - conclusions and insights.md",
"In 1 Year, the Gap Between AI Users and Everyone Else Will Be Irreversible.md",
];
for (const name of real) {
assert.equal(isSafeFilename(name), true, `should accept: ${name}`);
}
});
test("isSafeFilename rejects shell metacharacters", () => {
for (const bad of ['a".md', "a`b.md", "a$b.md", "a&b.md", "a|b.md", "a;b.md",
"a<b.md", "a>b.md", "a%b.md", "a\nb.md", "a\rb.md"]) {
assert.equal(isSafeFilename(bad), false, `should reject: ${JSON.stringify(bad)}`);
}
});
test("isSafeFilename rejects the cmd.exe escape character and control characters", () => {
// `^` escapes the next character in cmd.exe, so it can defuse the closing
// quote. NUL additionally makes spawn() throw synchronously.
for (const bad of ["a^b.md", "a\u0000b.md", "a\u001bb.md", "a\u007fb.md"]) {
assert.equal(isSafeFilename(bad), false, `should reject: ${JSON.stringify(bad)}`);
}
});
test("isSafeFilename rejects path traversal", () => {
assert.equal(isSafeFilename("../secrets.md"), false);
assert.equal(isSafeFilename("a/../../b.md"), false);
});
test("isSafeFilename rejects empty and non-string input", () => {
assert.equal(isSafeFilename(""), false);
assert.equal(isSafeFilename(null), false);
assert.equal(isSafeFilename(undefined), false);
assert.equal(isSafeFilename(42), false);
});
```
- [ ] **Step 2: Run the tests to verify they fail**
```bash
cd "D:/Projects/Notes/Webinar/Webinar/.obsidian/plugins/webinar-dash"
node --test test/safety.test.js
```
Expected: FAIL — `isSafeFilename is not a function`.
- [ ] **Step 3: Implement the validator and export it**
Insert into `main.js` below `reconcileConcepts`:
```js
// `shell: true` is required on Windows to resolve `claude.cmd`, which puts the
// filename into a shell string. Reject anything cmd.exe or a POSIX shell would
// interpret, plus every control character.
//
// `^` is cmd.exe's escape character and belongs to the same class Node escapes
// in its CVE-2024-27980 mitigation for exactly this spawn-through-.cmd shape.
// Control characters are rejected because a NUL byte makes spawn() throw
// synchronously, which would otherwise strand the row mid-run.
//
// Apostrophes, spaces, cyrillic, em dashes and `!` stay allowed — they are safe
// inside double quotes and appear in real filenames in this vault. (`!` would
// matter only under `setlocal enabledelayedexpansion`, which is not in play.)
const UNSAFE_CHARS = /["`$&|;<>%^\u0000-\u001f\u007f]/;
function isSafeFilename(name) {
if (typeof name !== "string" || name.length === 0) return false;
if (UNSAFE_CHARS.test(name)) return false;
if (name.includes("..")) return false;
return true;
}
```
Add `isSafeFilename` to the `__test__` export object.
- [ ] **Step 4: Run the tests to verify they pass**
```bash
node --test test/safety.test.js
```
Expected: PASS, 5 tests.
- [ ] **Step 5: Add ingest-state styles**
Append to `styles.css`:
```css
.wd-status { font-family: var(--wd-mono); font-size: 11px; flex: none; }
.wd-status-running { color: var(--wd-warn); }
.wd-status-done { color: var(--wd-ok); }
.wd-status-failed { color: var(--wd-danger); }
.wd-output {
font-family: var(--wd-mono); font-size: 11px; white-space: pre-wrap;
max-height: 220px; overflow: auto; margin-top: 8px;
border: 1px solid var(--wd-border); border-radius: 4px; padding: 8px;
color: var(--wd-fg-2);
}
```
- [ ] **Step 6: Implement `runIngest` on the plugin class**
`getBasePath()` exists on `FileSystemAdapter`; on mobile the adapter is a different class and `child_process` is unavailable, which is why the manifest sets `isDesktopOnly`.
```js
Add the in-flight registry as the first line of `onload()`, before the code-block
processor is registered. It lives on the plugin instance so it survives the row
re-renders that a DOM-scoped guard cannot:
```js
async onload() {
this.running = new Set();
// ... existing registerMarkdownCodeBlockProcessor call follows unchanged
```
Then add both methods to the class:
```js
vaultPath() {
const adapter = this.app.vault.adapter;
if (typeof adapter.getBasePath === "function") return adapter.getBasePath();
return null;
}
runIngest(file, rowEl) {
const Notice = OB ? OB.Notice : null;
const notify = (msg) => { if (Notice) new Notice(msg); };
// In-flight state is keyed on the file, not the row. Obsidian rebuilds the
// row on every re-render, so a row-scoped guard would let a re-render hand
// out a fresh row whose guard is unset — and a second click would then run
// a second unsupervised agent against the same file, concurrently writing
// the same wiki pages as the first.
if (this.running.has(file.path)) {
notify(`Already ingesting ${file.name}.`);
return;
}
if (!isSafeFilename(file.name)) {
rowEl.createDiv({
cls: "wd-output",
text: `Refused: "${file.name}" contains a character that is unsafe to pass to a shell.`,
});
return;
}
const base = this.vaultPath();
if (!base) {
notify("Ingest needs desktop Obsidian.");
return;
}
let spawn;
try {
({ spawn } = require("child_process"));
} catch (_) {
notify("child_process unavailable — ingest needs desktop Obsidian.");
return;
}
// A retry reuses the same row. Clear the previous run's status and output
// so they are replaced rather than stacked on top of each other.
rowEl.querySelectorAll(".wd-status, .wd-output").forEach((el) => el.remove());
const button = rowEl.querySelector("button");
if (button) button.disabled = true;
this.running.add(file.path);
const status = rowEl.createSpan({ cls: "wd-status wd-status-running", text: "running 0s" });
const output = rowEl.createDiv({ cls: "wd-output", text: "" });
const started = Date.now();
const timer = window.setInterval(() => {
status.setText(`running ${Math.round((Date.now() - started) / 1000)}s`);
}, 1000);
this.registerInterval(timer);
// Bounded as it accumulates, not only when displayed, so a long or noisy
// run cannot grow this string without limit.
let buffered = "";
const append = (text) => {
buffered = (buffered + text).slice(-8000);
output.setText(buffered);
output.scrollTop = output.scrollHeight;
};
// Single exit path: every way this run can end clears the timer, releases
// the file, and re-enables the button.
const finish = (cls, label) => {
window.clearInterval(timer);
this.running.delete(file.path);
status.className = `wd-status ${cls}`;
status.setText(label);
if (button) button.disabled = false;
};
let child;
try {
child = spawn("claude", ["-p", `ingest "${file.name}"`], {
cwd: base,
shell: true,
});
} catch (err) {
// spawn() throws synchronously for some argument shapes. Without this the
// timer would run forever and the row would stay disabled until reload.
append(`\nCould not start claude: ${err.message}`);
finish("wd-status-failed", "failed");
return;
}
// Decode as UTF-8 across chunk boundaries. Raw Buffer chunks split wherever
// the OS buffer ends, and this vault's output is full of Cyrillic and em
// dashes that would otherwise decode as replacement characters.
child.stdout.setEncoding("utf8");
child.stderr.setEncoding("utf8");
child.stdout.on("data", append);
child.stderr.on("data", append);
child.on("error", (err) => {
append(`\nCould not start claude: ${err.message}\nIs it on PATH?`);
finish("wd-status-failed", "failed");
});
child.on("close", (code) => {
const secs = Math.round((Date.now() - started) / 1000);
if (code === 0) {
finish("wd-status-done", `done in ${secs}s`);
notify(`Ingested ${file.name}. Reopen the dashboard to refresh.`);
} else {
finish("wd-status-failed", `failed - exit ${code}`);
}
});
}
```
- [ ] **Step 7: Pass the real handler into the left pane**
In the code-block processor, replace the no-op:
```js
renderLeftPane(root, pipeline, (file, rowEl) => this.runIngest(file, rowEl));
```
- [ ] **Step 8: Verify the refusal path without spawning anything**
Temporarily rename a raw file to include a shell metacharacter, reload, and click Ingest.
```bash
cd "D:/Projects/Notes/Webinar/Webinar/raw/sources"
cp "Webinar script.md" 'bad&name.md'
```
Expected in Obsidian: the row shows `Refused: "bad&name.md" contains a character that is unsafe to pass to a shell.` and no process starts.
Then remove it:
```bash
rm 'bad&name.md'
```
- [ ] **Step 9: Verify a real ingest**
Reload Obsidian and click **Ingest** on `Agentic Engineering, explained by a 10x developer.md`.
Expected: the button disables, the status ticks `running 1s`, `running 2s`, …, streamed output appears below the row, and on completion the status reads `done in Ns`. Reopen `dashboard.md`: the queue drops to 2 and the ingested list rises to 10.
This writes to the vault unsupervised. Everything is committed, so `git diff HEAD` shows exactly what the agent changed and `git checkout -- .` reverts it.
- [ ] **Step 10: Run the whole suite**
```bash
cd "D:/Projects/Notes/Webinar/Webinar/.obsidian/plugins/webinar-dash"
node --test
```
Bare `node --test` auto-discovers the test files. Do not pass `test/` as an
argument — Node 24 resolves a bare directory path as a module and fails with
`MODULE_NOT_FOUND` before running anything.
Expected: PASS, 27 tests across three files.
- [ ] **Step 11: Commit**
```bash
cd "D:/Projects/Notes/Webinar/Webinar"
git add .obsidian/plugins/webinar-dash
git commit -m "feat: spawn headless claude ingest with filename validation"
```
---
## Self-Review
**Spec coverage.** Every section of the spec maps to a task:
| Spec section | Task |
|---|---|
| Architecture, config block, no build step | 1 |
| Source pipeline derivation, `**Raw path:**` join | 2 |
| Left pane, tesanti styling, dark mode | 3 |
| Coverage file format, parsing rules | 4 |
| Coverage data file, four `CLAUDE.md` changes, `index.md`, `log.md` | 5 |
| Two-pane layout, meter, station grouping, `unsynced` / `stale` | 6 |
| Ingest spawn, filename rejection list, per-row states, preflight | 7 |
| Failure modes table | 3 (orphaned), 6 (parse errors, unsynced, stale), 7 (no adapter, no `claude`) |
The spec's "v1 does not write the coverage file from the plugin" is honored — no task adds a pin toggle.
**Placeholder scan.** No `TBD`, no "add error handling", no "similar to Task N". Every code step carries runnable code.
**Type consistency.** `rawFiles` items are `{path, name, size}` in Tasks 2 and 3. `sourcePages` items are `{path, name, rawPath}` in both. Coverage rows are `{concept, status, stations, pinned, line}` in Tasks 4, 5, and 6. `onIngest(file, rowEl)` is declared in Task 3 and implemented with the same signature in Task 7. `addIcon(parent, name)` is defined in Task 3 and reused in Task 6. `STATIONS` is defined in Task 1 and consumed by `groupByStation` in Task 4.
**Test count.** Task 2 adds 9, Task 4 adds 11, Task 6 adds 2, Task 7 adds 5 — 27 total, matching Step 10 of Task 7.