@shivaedev/work-board 0.13.0 → 0.14.0

package/src/server/page/metadataDetails.ts

@@ -1,38 +0,0 @@
-import { escapeHtml } from "#browser/escapeHtml.ts";
-import type { MetadataModel } from "#server/metadata/model.ts";
-import type { ParsedMetadata } from "#server/metadata/parse.ts";
-import { relationshipLabel } from "#server/metadata/relationshipLabel.ts";
-import { attentionDetails } from "./attentionDetails.ts";
-import { criteriaEvidence } from "./criteriaEvidence.ts";
-import { referenceHtml, valueHtml } from "./metadataLinks.ts";
-import { recordedEvidence } from "./recordedEvidence.ts";
-
-export function metadataDetails(parsed: ParsedMetadata, file: string, model: MetadataModel): string {
-	const fields = parsed.fields;
-	const details = [
-		fields.handoff
-			? `<h3>Agent handoff</h3><p>${referenceHtml(fields.handoff.item, fields.handoff.item, model)} · ${escapeHtml(fields.handoff.recipient)} · ${escapeHtml(fields.handoff.state)}</p><p>Receipt is separate from execution and acceptance.</p><p>${escapeHtml(fields.handoff.by ?? "Attribution not recorded")}${fields.handoff.note ? ` · ${escapeHtml(fields.handoff.note)}` : ""}</p><p>Reviewed SHA-256: <code>${fields.handoff.reviewedRevision}</code></p><p><a href="/_board/handoff?item=${encodeURIComponent(fields.handoff.item)}">Read handoff history and copy its prompt</a></p>`
-			: "",
-		`<dl><dt>Kind</dt><dd>${valueHtml(fields.kind)}</dd><dt>Status</dt><dd>${valueHtml(fields.status)}</dd><dt>Owner</dt><dd>${valueHtml(fields.owner)}</dd><dt>Next action</dt><dd>${valueHtml(fields.nextAction)}</dd></dl>`,
-		fields.relationships?.length
-			? `<h3>Relationships</h3><ul>${fields.relationships.map((link) => `<li>${escapeHtml(relationshipLabel(link.kind))}: ${referenceHtml(link.target, link.target, model)}</li>`).join("")}</ul>`
-			: "",
-		fields.items?.length
-			? `<h3>Declared board membership</h3><ul>${fields.items.map((id) => `<li>${referenceHtml(id, id, model)}</li>`).join("")}</ul>`
-			: "",
-
-		fields.question
-			? `<h3>Reviewed question</h3><p>${referenceHtml(fields.question.item, fields.question.item, model)} / ${escapeHtml(fields.question.request)} · ${escapeHtml(fields.question.reason)}</p><p>Reviewed SHA-256: <code>${fields.question.reviewedRevision}</code>. Registered: ${new Date(fields.question.registeredAt).toISOString()}. Unanswered deadline: ${new Date(fields.question.deadline).toISOString()}.</p>`
-			: "",
-		fields.response
-			? `<h3>Recorded response</h3><p>${referenceHtml(fields.response.question, fields.response.question, model)} · ${escapeHtml(fields.response.author)} · ${escapeHtml(fields.response.type)}</p><p>Reviewed SHA-256: <code>${fields.response.reviewedRevision}</code>. This is authored feedback, not verified acceptance.</p>${fields.response.supersedes ? `<p>Explicitly supersedes ${referenceHtml(fields.response.supersedes, fields.response.supersedes, model)}.</p>` : ""}`
-			: "",
-		fields.requestReceipt
-			? `<h3>Managed request receipt</h3><p>${referenceHtml(fields.requestReceipt.question, fields.requestReceipt.question, model)} · ${fields.requestReceipt.disposition}</p><p>Reviewed SHA-256: <code>${fields.requestReceipt.reviewedRevision}</code>. This acknowledges request handling, not execution, acceptance or delivery authority.</p>${fields.requestReceipt.response ? `<p>Applied response: ${referenceHtml(fields.requestReceipt.response, fields.requestReceipt.response, model)}</p>` : ""}`
-			: "",
-		criteriaEvidence(parsed, model),
-		attentionDetails(parsed, file, model),
-		recordedEvidence(parsed, file, model),
-	].join("");
-	return details;
-}

package/src/server/page/metadataLinks.ts

@@ -1,35 +0,0 @@
-import { escapeHtml } from "#browser/escapeHtml.ts";
-import { fileUrl } from "#files/url.ts";
-import { referenceTarget } from "#server/metadata/links.ts";
-import type { MetadataModel } from "#server/metadata/model.ts";
-import { sourceFile, sourceHref } from "#server/metadata/sourceLinks.ts";
-
-export function referenceHtml(label: string, target: string, model: MetadataModel): string {
-	const href = referenceTarget(target, model);
-	return href
-		? `<a href="${escapeHtml(href)}">${escapeHtml(label)}</a>`
-		: `<span>${escapeHtml(label)} (unresolved, ambiguous, or unavailable)</span>`;
-}
-
-export function sourceHtml(source: string, file: string, model: MetadataModel): string {
-	const href = sourceHref(source, file);
-	if (!href) {
-		return escapeHtml(source);
-	}
-	const target = sourceFile(source, file, model);
-	const missing = target && !model.documents.some((document) => document.file === target);
-	let problem = "";
-	if (missing) {
-		problem = model.unavailable.includes(target) ? " (source unavailable)" : " (missing Markdown source)";
-	}
-	return `<a href="${escapeHtml(href)}" rel="noreferrer">${escapeHtml(source)}</a>${problem}`;
-}
-
-export function documentReference(file: string, model: MetadataModel, hash = ""): string {
-	const id = model.documents.find((document) => document.file === file)?.parsed.fields.id;
-	return ((id ? referenceTarget(id, model) : undefined) ?? fileUrl(file)) + hash;
-}
-
-export function valueHtml(text: string | undefined): string {
-	return escapeHtml(text ?? "Not recorded");
-}

package/src/server/page/nav.ts

@@ -1,12 +0,0 @@
-import { navigationHtml } from "#browser/navigation/html.ts";
-import type { MarkdownFile } from "#server/files/list.ts";
-import { inboxCount as countOf, navigationData } from "#server/navigation/model.ts";
-import type { Snapshot } from "#server/search/snapshot.ts";
-
-export function navHtml(files: readonly MarkdownFile[], current: string, home: string | undefined, snapshot?: Snapshot): string {
-	return navigationHtml(navigationData(files, current, home, snapshot));
-}
-
-export function inboxCount(snapshot?: Snapshot): string {
-	return String(countOf(snapshot) ?? "?");
-}

package/src/server/page/readingStyles.ts

@@ -1,31 +0,0 @@
-export function readingStyles(): string {
-	return `
-.reading-tools { display: flex; align-items: start; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; font-size: 13px; }
-.reading-tools button[aria-pressed="true"] { background: var(--surface); border-color: var(--link); }
-.outline { margin: 0; min-width: 180px; max-width: 100%; }
-.outline > summary { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
-.outline nav { margin-top: 12px; padding: 0 12px; max-height: 40vh; overflow-y: auto; }
-.outline ol { padding-left: 18px; }
-.outline li { overflow-wrap: anywhere; }
-.outline li[data-depth="3"], .outline li[data-depth="4"] { margin-left: 12px; }
-.outline li[data-depth="5"], .outline li[data-depth="6"] { margin-left: 24px; }
-.heading-anchor { display: inline-block; margin-left: 8px; font-size: 0.7em; text-decoration: none; opacity: 0.35; }
-.heading-anchor::after { content: "#"; }
-.heading-anchor:hover, .heading-anchor:focus-visible { opacity: 1; }
-[id^="heading-"] { scroll-margin-top: 20px; }
-#library-dialog { width: min(560px, calc(100vw - 32px)); max-height: min(600px, calc(100dvh - 32px)); overflow-y: auto; padding: 20px; color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
-#library-dialog::backdrop { background: rgb(0 0 0 / .45); }
-.reading-library { font-size: 14px; margin-top: 20px; }
-.reading-library .nav-heading { font-size: 14px; }
-.reading-library[hidden] { display: none; }
-.reading-library ul { list-style: none; padding: 0 12px; margin: 0 0 20px; }
-.reading-library a { color: var(--link); overflow-wrap: anywhere; }
-.reading-library a[aria-current="page"] { font-weight: 600; }
-.reading-library .missing { color: var(--muted); }
-.library-status { padding: 0 12px; color: var(--muted); }
-#navigation-status { color: var(--danger); overflow-wrap: anywhere; }
-#navigation-status:empty { display: none; }
-.bar:has(#navigation-status:not(:empty)) { flex-wrap: wrap; }
-#navigation-status:not(:empty) { flex-basis: 100%; }
-`;
-}

package/src/server/page/readingTools.ts

@@ -1,12 +0,0 @@
-import { escapeHtml } from "#browser/escapeHtml.ts";
-import type { Heading } from "#render/documentHeadings.ts";
-
-export function readingTools(headings: readonly Heading[]): string {
-	const outline =
-		headings.length === 0
-			? ""
-			: `<details class="outline" data-key="outline"><summary>On this page</summary><nav aria-label="Document outline"><ol>${headings
-					.map(({ depth, id, title }) => `<li data-depth="${depth}"><a href="#${escapeHtml(id)}">${escapeHtml(title || "Section")}</a></li>`)
-					.join("")}</ol></nav></details>`;
-	return `<div class="reading-tools"><button id="favorite-toggle" type="button" aria-pressed="false" disabled>Save favorite</button>${outline}</div>`;
-}

package/src/server/page/recordedEvidence.ts

@@ -1,12 +0,0 @@
-import { escapeHtml } from "#browser/escapeHtml.ts";
-import type { MetadataModel } from "#server/metadata/model.ts";
-import type { ParsedMetadata } from "#server/metadata/parse.ts";
-import { referenceHtml, sourceHtml, valueHtml } from "./metadataLinks.ts";
-
-export function recordedEvidence(parsed: ParsedMetadata, file: string, model: MetadataModel): string {
-	const records = parsed.fields.evidence ?? [];
-	if (records.length === 0) {
-		return "";
-	}
-	return `<h3>Recorded evidence</h3><p>Source claims — not independently verified. A recorded outcome does not establish human acceptance. Work Board does not check recorded revisions against the current workspace.</p><ul>${records.map((item, index) => `<li id="recorded-evidence-${index}" tabindex="-1">${sourceHtml(item.source, file, model)}<dl><dt>Recorded in</dt><dd>${escapeHtml(file)}:${parsed.lines[`evidence.${index}.source`] ?? parsed.lines.evidence ?? 1}</dd><dt>Criterion</dt><dd>${item.criterion ? referenceHtml(item.criterion, item.criterion, model) : "Not recorded"}</dd><dt>Checked revision</dt><dd>${valueHtml(item.checkedRevision)}</dd><dt>Observed time</dt><dd>${valueHtml(item.observedAt)}</dd><dt>Method</dt><dd>${valueHtml(item.method)}</dd><dt>Recorded outcome</dt><dd>${valueHtml(item.outcome)}</dd></dl></li>`).join("")}</ul>`;
-}

package/src/server/page/searchDialog.ts

@@ -1,16 +0,0 @@
-export const searchDialog = `<dialog id="search-dialog" aria-labelledby="search-title">
-<div class="search-header"><h2 id="search-title">Find work</h2><button type="button" id="search-close" aria-label="Close search">Close</button></div>
-<form id="search-form"><label for="search-query">Search documents, headings, and passages</label><input id="search-query" type="search" autocomplete="off" maxlength="200" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="search-results"><button type="submit">Search</button></form>
-<p class="search-help">Ctrl/Cmd+K to open · ↑/↓ to choose · Enter to open · Escape to close</p>
-<p id="search-status" role="status"></p><ul id="search-results" role="listbox" aria-label="Search results"></ul>
-</dialog>`;
-
-export const searchStyles = `
-#search-dialog{width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:20px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text)}
-#search-dialog::backdrop{background:rgb(0 0 0 / .45)}
-.search-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.search-header h2{margin:0;font-size:1.3rem}
-#search-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:16px}#search-form label{grid-column:1/-1}#search-query{min-width:0;width:100%;padding:10px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);font:inherit}
-.search-help{margin-top:12px}.search-help,#search-status{font-size:.85rem;color:var(--muted)}#search-results{list-style:none;padding:0;margin:0}
-#search-results a{display:block;padding:12px;border-radius:6px;text-decoration:none;overflow-wrap:anywhere}#search-results a[aria-selected="true"]{background:var(--surface);outline:2px solid var(--focus);outline-offset:-2px}
-#search-results strong,#search-results small,#search-results p{display:block}#search-results small{color:var(--muted);font-size:.8rem}#search-results p{margin:6px 0 0;font-size:.9rem}
-`;

package/src/server/page/style.ts

@@ -1,117 +0,0 @@
-import { inboxStyle } from "#server/attention/inboxHtml.ts";
-import { attentionStyle } from "#server/attention/style.ts";
-import { diagnosticsStyle } from "#server/diagnostics/style.ts";
-import { itemStyles } from "#server/page/itemStyles.ts";
-import { metadataStyles } from "#server/page/metadata.ts";
-import { readingStyles } from "#server/page/readingStyles.ts";
-import { searchStyles } from "#server/page/searchDialog.ts";
-import { visualStyles } from "#server/page/visualDialog.ts";
-import { layout, theme } from "#server/page/workspaceStyles.ts";
-import { workStyle } from "#server/views/workStyle.ts";
-
-const prose = `
-h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; margin: 1.6em 0 0.5em; }
-h1 { overflow-wrap: anywhere; font-size: 1.9em; margin-top: 1em; }
-h2 { font-size: 1.45em; }
-h3 { font-size: 1.15em; }
-h1 strong, h2 strong, h3 strong { font-weight: inherit; }
-p, ul, ol, pre, table, blockquote, details, figure { margin: 0 0 1.1em; }
-li + li { margin-top: 0.25em; }
-.contains-task-list { list-style: none; padding-left: 0.4em; }
-hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
-blockquote { padding-left: 1em; border-left: 3px solid var(--border); color: var(--muted); }
-code { font: 0.875em var(--mono); background: var(--surface); padding: 0.1em 0.35em; border-radius: 4px; overflow-wrap: anywhere; }
-pre { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
-pre code { background: none; padding: 0; font-size: 0.85em; }
-.shiki span { color: var(--shiki-light); }
-@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shiki span { color: var(--shiki-dark); } }
-:root[data-theme="dark"] .shiki span { color: var(--shiki-dark); }
-table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.925em; }
-th, td { text-align: left; vertical-align: top; padding: 6px 10px; border: 1px solid var(--border); }
-tr:nth-child(2n) td { background: var(--surface); }
-@media (max-width: 600px) { table { table-layout: fixed; } td, th { overflow-wrap: anywhere; } }
-summary { cursor: pointer; color: var(--muted); }
-details[open] > summary { margin-bottom: 0.5em; }
-img, svg { max-width: 100%; height: auto; }
-.empty { color: var(--muted); font-style: italic; }
-.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
-`;
-
-const board = `
-.board-head .intro { color: var(--muted); }
-.counts { margin: 0; }
-.counts b { font-variant-numeric: tabular-nums; }
-.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space); margin-top: 2em; align-items: start; }
-.board section { min-width: 0; }
-.board section > h2 { margin: 0 0 0.8em; font-size: 1.1em; overflow-wrap: anywhere; }
-.item, .notes { padding: var(--card-space); margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow-wrap: anywhere; }
-.item > :last-child, .notes > :last-child { margin-bottom: 0; }
-.item > h3 { margin: 0 0 0.4em; }
-.item > h3 > code:first-child { background: none; padding: 0; margin-right: 0.6em; color: var(--muted); font-weight: 400; }
-footer { margin-top: 2.5em; padding-top: 1em; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.925em; }
-`;
-
-const diagrams = `
-[data-live-change] { outline: 2px solid var(--border); outline-offset: 3px; border-radius: 3px; }
-figure.diagram { margin-left: 0; margin-right: 0; }
-figure.diagram[data-state="pending"] { min-height: 12rem; background: var(--surface); border-radius: 6px; }
-figure.diagram .diagram-source { display: none; }
-figure.diagram[data-state="failed"] .diagram-source { display: block; }
-[data-diagram-error] { color: var(--danger); font-size: 0.875em; }
-@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
-`;
-
-const documents = `
-.start-open { display: block; padding: 0 12px 18px; color: var(--sidebar-text); }
-.onboarding { max-width: 76ch; }
-.start-template textarea { display: block; box-sizing: border-box; width: 100%; margin: 12px 0; padding: 12px; font-family: var(--mono); font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
-@media print {
-  .sidebar, .bar, .preferences, .reading-tools, .visual-tools { display: none !important; }
-  .workspace { display: block !important; }
-  .page { width: 100%; }
-  #doc { padding: 0; }
-  .doc pre, .doc table { white-space: pre-wrap; overflow: visible; }
-  figure.diagram[data-state="pending"] .diagram-source, figure.diagram[data-state="failed"] .diagram-source { display: block; }
-}
-
-.visual-document, .visual-callout { border: 1px solid var(--border); border-radius: 12px; padding: 1em 1.2em; margin: 1.2em 0; overflow-wrap: anywhere; }
-.visual-document > :last-child, .visual-callout > :last-child { margin-bottom: 0; }
-.visual-label { font-weight: 650; margin-top: 0; }
-.visual-value { font-size: 1.35em; font-variant-numeric: tabular-nums; }
-.visual-document progress { display: block; width: 100%; height: 1em; accent-color: var(--link); }
-.visual-timeline-entries { border-left: 2px solid var(--border); padding-left: 1.6em; }
-.visual-timeline-entries > li { padding: .3em 0 .7em .2em; }
-.visual-callout { border-left: 4px solid var(--link); background: var(--surface); }
-.visual-warning, .visual-caution { border-left-color: #b97720; }
-.visual-diagnostic { font-weight: 600; color: var(--muted); }
-@media print { .visual-document, .visual-callout { break-inside: avoid; } }
-`;
-
-const questionnaires = `
-.questionnaire-option { padding: .25rem 0 .25rem 1rem; margin: 1rem 0; border-left: 2px solid var(--border); overflow-wrap: anywhere; }
-.questionnaire-option > :last-child { margin-bottom: 0; }
-.questionnaire-answer { display: inline-block; padding: .65rem 1rem; border-radius: 6px; background: var(--link); color: var(--bg); font-weight: 650; text-decoration: none; }
-.questionnaire-answer:hover { text-decoration: underline; }
-.questionnaire-answer:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
-`;
-
-export const style =
-	theme
-	+ diagnosticsStyle()
-	+ layout
-	+ inboxStyle
-	+ prose
-	+ board
-	+ diagrams
-	+ readingStyles()
-	+ searchStyles
-	+ metadataStyles
-	+ itemStyles()
-	+ workStyle()
-	+ attentionStyle()
-	+ visualStyles
-	+ documents
-	+ questionnaires
-	+ ".response-panel fieldset, .questionnaire-question { min-width: 0; border: 1px solid var(--border); border-radius: 12px; padding: 1rem; margin: 1rem 0; } .response-panel legend { font-weight: 650; } .response-panel .question-option { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .75rem; padding: 1rem; margin: .5rem 0; border: 1px solid var(--border); border-radius: 8px; } .response-panel .question-option:has(input:checked) { border-color: var(--link); background: var(--surface); } .response-panel .question-option input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--link); } .response-panel .question-option label { font-weight: 650; cursor: pointer; } .response-panel .question-option p { margin-top: .5rem; } .response-panel #response-history article { border-top: 1px solid var(--border); margin-top: 1.5rem; padding-top: 1rem; } .response-context, .question-option, .response-panel fieldset { overflow-wrap: anywhere; }"
-	+ "[data-view=result] .response-panel { overflow-wrap: anywhere; } #result-criteria ul { padding-inline-start: 1.25rem; } #result-criteria dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; margin: .75rem 0; } #result-criteria dt { color: var(--muted); } #result-criteria dd { margin: 0 0 .5rem; min-width: 0; } #result-feedback article { border-top: 1px solid var(--border); margin-top: 1.5rem; padding-top: 1rem; }"
-	+ ".response-panel { max-width: 850px; margin: auto; padding: 1.5rem; } .response-field-error { color: var(--danger); font-size: .9em; } .response-panel form { display: grid; gap: 1rem; } .response-panel label { display: grid; gap: .5rem; } .response-panel input, .response-panel textarea, .response-panel select { width: 100%; box-sizing: border-box; font: inherit; background: var(--surface); color: inherit; padding: .75rem; border: 1px solid var(--border); } .response-panel pre, .response-panel code { white-space: pre-wrap; overflow-wrap: anywhere; }";

package/src/server/page/updated.ts

@@ -1,3 +0,0 @@
-export function updated(modified: number): string {
-	return `<span class="age" data-modified="${modified}">updated</span>`;
-}

package/src/server/page/visualDialog.ts

@@ -1,25 +0,0 @@
-export const visualDialog = `<dialog id="visual-dialog" aria-labelledby="visual-title">
-<div id="visual-stage">
-<div class="visual-bar"><h2 id="visual-title">Visual evidence</h2><button id="visual-close" type="button">Close</button></div>
-<p id="visual-context"></p>
-<div class="visual-bar" role="group" aria-label="Visual controls">
-<button id="visual-previous" type="button">Previous image</button><button id="visual-next" type="button">Next image</button>
-<button id="visual-out" type="button" aria-label="Zoom out">−</button><button id="visual-fit" type="button">Fit</button><button id="visual-actual" type="button" aria-pressed="false">Actual size</button><button id="visual-in" type="button" aria-label="Zoom in">+</button>
-<button id="visual-fullscreen" type="button">Fullscreen</button><a id="visual-download" download>Save locally</a>
-</div><p id="visual-status" role="status"></p><div id="visual-viewport" tabindex="0" aria-label="Scrollable visual"><div id="visual-content"></div></div>
-<p class="visual-help">Arrow keys choose images · Zoom and scroll to inspect · Escape returns to the source. Recorded evidence does not verify acceptance.</p>
-</div></dialog>`;
-
-export const visualStyles = `
-#visual-dialog{width:min(1100px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text)}
-#visual-dialog::backdrop{background:rgb(0 0 0 / .6)}
-.visual-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.visual-bar h2{flex:1;margin:0;font-size:1.2rem}
-.visual-bar button,.visual-bar a{font:inherit;padding:6px 10px;cursor:pointer;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px}
-#visual-context,.visual-help,#visual-status{font-size:.85rem;overflow-wrap:anywhere;color:var(--muted)}
-#visual-viewport{overflow:auto;max-height:65dvh;min-height:150px;background:var(--surface);border:1px solid var(--border);padding:12px}
-#visual-content{width:100%;min-width:0}#visual-content img,#visual-content svg{display:block;width:100%;max-width:none;height:auto}
-#visual-stage:fullscreen{width:100vw;height:100dvh;box-sizing:border-box;padding:16px;background:var(--card);color:var(--text);overflow:auto}#visual-stage:fullscreen #visual-viewport{max-height:75dvh}
-[data-local-image]{cursor:zoom-in}[data-local-image]:focus-visible{outline:2px solid var(--focus)}
-[data-visual-tools]{display:block;margin:8px 0;font-size:.85rem}[data-visual-tools] button{font:inherit;cursor:pointer;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:5px 10px}
-[data-image-error]{display:block;color:var(--danger);font-size:.85rem}
-`;

package/src/server/page/workspaceStyles.ts

@@ -1,89 +0,0 @@
-export const layout = `
-* { box-sizing: border-box; }
-body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--sans); }
-a { color: var(--link); }
-button, select { font: inherit; color: inherit; }
-button, select, summary { cursor: pointer; }
-button, select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); }
-:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
-.skip { position: fixed; top: -100px; left: 16px; z-index: 5; padding: 8px 16px; background: var(--card); }
-.skip:focus { top: 8px; }
-.workspace { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
-:root[data-sidebar="closed"] .workspace { grid-template-columns: minmax(0, 1fr); }
-.sidebar { --focus: #e2bc79; position: sticky; top: 0; align-self: start; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding: var(--space) 16px; background: var(--sidebar); color: var(--sidebar-text); }
-.sidebar[hidden] { display: none; }
-.brand { display: block; padding: 0 12px 28px; font-size: 24px; font-weight: 600; letter-spacing: -0.8px; text-decoration: none; color: var(--sidebar-text); }
-.brand span { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--sidebar-muted); }
-.sidebar .nav-heading { margin: 0 12px 12px; font: 600 12px var(--sans); color: var(--sidebar-muted); }
-.primary-navigation { flex: none; display: grid; gap: 4px; margin-bottom: 12px; }
-.primary-navigation a { display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 0 12px; border-radius: 5px; color: var(--sidebar-text); text-decoration: none; font-size: 14px; }
-.primary-navigation a:hover, .primary-navigation a[aria-current="page"] { background: #385242; }
-#library-open { flex: none; margin: 0 0 12px; color: var(--sidebar-text); background: transparent; border-color: var(--sidebar-border); }
-.sidebar > * { flex-shrink: 0; }
-.files { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; font-size: 14px; }
-.sidebar-backdrop { display: none; }
-.files ul { list-style: none; margin: 0 0 10px; padding: 0; }
-.files li { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 4px 10px; border-radius: 5px; }
-.files li:has(> a[aria-current="page"]) { background: #385242; }
-.files a { flex: 1; min-width: 0; color: var(--sidebar-text); text-decoration: none; overflow-wrap: anywhere; }
-.files a:hover, .files a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
-.files li.file-folder { display: block; padding: 0; }
-.files details { margin: 8px 0; }
-.files summary { padding: 6px 10px; color: var(--sidebar-muted); overflow-wrap: anywhere; }
-.files details > ul { margin-left: 14px; border-left: 1px solid var(--sidebar-border); }
-.age { color: var(--muted); font: 12px var(--mono); margin-left: 6px; white-space: nowrap; }
-.files .age { color: var(--sidebar-muted); margin: 0; flex-shrink: 0; }
-.page { min-width: 0; }
-.bar { display: flex; align-items: center; gap: 16px; padding: 16px var(--space); border-bottom: 1px solid var(--border); font-size: 13px; }
-.bar button { flex-shrink: 0; }
-.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
-.breadcrumbs > span:not(.separator) { min-width: 0; }
-.separator { color: var(--muted); }
-.live { color: var(--muted); font: 12px/1.9 var(--mono); }
-.live[data-state="down"], .live[data-state="stale"] { color: var(--danger); }
-.preferences { border: 0; margin: 0; min-width: 0; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px var(--space) 0; color: var(--muted); font-size: 12px; }
-.preference { display: flex; gap: 8px; align-items: center; }
-#preference-status:empty { display: none; }
-#doc { padding: var(--space) var(--space) 64px; min-width: 0; }
-.document-view { max-width: calc(72ch + 2 * var(--space)); margin-inline: auto; }
-.board-view { max-width: 1600px; margin-inline: auto; }
-.meta { color: var(--muted); font-size: 13px; margin: 0; overflow-wrap: anywhere; }
-.meta .age { margin: 0; }
-@media (max-width: 767px) {
-  .workspace { grid-template-columns: minmax(0, 1fr); }
-  html[data-js][data-sidebar="open"] body { overflow: hidden; }
-  html[data-js] .sidebar { position: fixed; inset: 0 auto 0 0; width: min(320px, calc(100vw - 48px)); z-index: 4; }
-  html[data-js] .sidebar-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 3; background: rgb(0 0 0 / .45); }
-  html:not([data-js]) .sidebar { position: relative; height: 100dvh; }
-  .brand { padding-bottom: 16px; }
-  .bar { flex-wrap: wrap; gap: 12px; }
-  .breadcrumbs { flex-basis: calc(100% - 100px); }
-  .live { margin-left: auto; }
-  .preferences { justify-content: flex-start; }
-  :root { --space: 18px; }
-}
-`;
-const light = `
-  color-scheme: light;
-  --bg: #f7f8f4; --surface: #edf1e7; --card: #ffffff; --text: #263c34; --muted: #596957;
-  --border: #d5dfd0; --link: #315f45; --danger: #a03024; --focus: #976323;
-  --sidebar: #203a30; --sidebar-text: #e7eee2; --sidebar-muted: #b6c8ad; --sidebar-border: #4a624c;
-`;
-const dark = `
-  color-scheme: dark;
-  --bg: #18251f; --surface: #26382d; --card: #203027; --text: #e7eee2; --muted: #b0c1a6;
-  --border: #455a48; --link: #b1d4a1; --danger: #ffafa2; --focus: #e2bc79;
-  --sidebar: #142219; --sidebar-text: #e7eee2; --sidebar-muted: #b6c8ad; --sidebar-border: #455a48;
-`;
-
-export const theme = `
-:root {
-  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
-  --space: 24px; --card-space: 20px;
-  ${light}
-}
-@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { ${dark} } }
-:root[data-theme="dark"] { ${dark} }
-:root[data-density="compact"] { --space: 16px; --card-space: 12px; }
-`;

package/src/server/responses/authoredQuestionHtml.ts

@@ -1,46 +0,0 @@
-import { Effect, type FileSystem, type Path } from "effect";
-import { escapeHtml } from "#browser/escapeHtml.ts";
-import type { QuestionPreview } from "#browser/responses/schema.ts";
-import type { RenderFailed } from "#render/failed.ts";
-import { openItem } from "#server/attention/inbox.ts";
-import type { MetadataDocument } from "#server/metadata/model.ts";
-import type { Highlighter } from "#server/render/Highlighter.ts";
-import { composerHtml } from "./composerHtml.ts";
-import { historyHtml } from "./historyHtml.ts";
-import { questionId, revisionOf } from "./records.ts";
-import { Responses } from "./service.ts";
-
-export const authoredQuestionHtml = Effect.fn("WorkBoard.authoredQuestionHtml")(function* (
-	document: MetadataDocument,
-	source: string,
-	enabled: boolean,
-): Effect.fn.Return<string, RenderFailed, Highlighter | FileSystem.FileSystem | Path.Path | Responses> {
-	const service = yield* Responses;
-	const item = document.parsed.fields.id ?? "";
-	const revision = revisionOf(source);
-	const preview: QuestionPreview = {
-		context: source,
-		id: questionId(item, "answer", revision, document.file),
-		item,
-		reason: document.parsed.fields.nextAction ?? "A question needs your answer",
-		request: "answer",
-		reviewedRevision: revision,
-		source: document.file,
-	};
-	const records = yield* service.history(preview).pipe(Effect.result);
-	const history =
-		records._tag === "Success"
-			? yield* historyHtml(preview, records.success)
-			: '<p role="status">Recorded responses are unavailable. Check the workspace source issues and retry.</p>';
-	if (!openItem(document)) {
-		return `<section class="response-panel"><h2>Question closed</h2><p role="status">This question is closed. Recorded answers remain below.</p>${history}</section>`;
-	}
-	return yield* service.locate(item, "answer").pipe(
-		Effect.flatMap((question) => (records._tag === "Success" ? composerHtml(question, records.success, enabled) : Effect.succeed(history))),
-		Effect.catch((error) =>
-			Effect.succeed(
-				`<section class="response-panel"><h2>Answer unavailable</h2><p role="status">${escapeHtml(error.message)}</p>${history}</section>`,
-			),
-		),
-	);
-});

package/src/server/responses/composerHtml.ts

@@ -1,25 +0,0 @@
-import { Effect } from "effect";
-import { escapeHtml } from "#browser/escapeHtml.ts";
-import type { QuestionPreview, RecordedResponse } from "#browser/responses/schema.ts";
-import { fileUrl } from "#files/url.ts";
-import { metadataParse } from "#server/metadata/parse.ts";
-import { historyHtml } from "./historyHtml.ts";
-import { templateHtml } from "./templateHtml.ts";
-
-export const composerHtml = Effect.fn("WorkBoard.composerHtml")(function* (
-	q: QuestionPreview,
-	records: readonly RecordedResponse[],
-	enabled: boolean,
-) {
-	const template = yield* templateHtml(q.context, q.request, q.source);
-	const standalone = metadataParse(q.context).fields.kind === "question";
-	const prior = records
-		.map(
-			(record) =>
-				`<option value="${escapeHtml(record.id)}">${escapeHtml(record.id)} · ${escapeHtml(record.response.author)} · ${record.response.reviewedRevision.slice(0, 12)}</option>`,
-		)
-		.join("");
-	const body = `<label>${template.hasPrompts ? "Overall response / next action (optional)" : "Your response"}<textarea name="body" rows="4" maxlength="32768" ${template.hasPrompts ? "" : "required"}></textarea></label>`;
-	const details = `<details data-key="response-details"><summary>Response details</summary><label>Response kind <select name="type"><option value="answer">Answer (including no)</option><option value="clarify">Ask back / clarify</option><option value="not_now">Not now</option></select></label>${standalone && template.hasPrompts ? body : ""}<label>Supersedes an earlier response (optional)<select name="supersedes"><option value="">Adds feedback; does not supersede</option>${prior}</select></label></details>`;
-	return `<section class="response-panel"><h${standalone ? "2" : "1"}>${standalone ? "Answer this question" : `Respond to ${escapeHtml(q.item)} / ${escapeHtml(q.request)}`}</h${standalone ? "2" : "1"}><p>${escapeHtml(q.reason)}</p><p><a href="${fileUrl(q.source)}">Source: ${escapeHtml(q.source)}</a> · Reviewed SHA-256: <code>${q.reviewedRevision}</code></p><p>${standalone ? "An answer removes this question from the Inbox for this source revision." : "Saved replies are authored feedback. They do not close the request or establish acceptance."}</p>${standalone ? "" : `<section class="response-context">${template.background}</section>`}<details><summary>Exact source being reviewed</summary><pre>${escapeHtml(q.context)}</pre></details><form novalidate id="response-form" data-question="${q.id}" data-writable="${enabled}" data-item="${escapeHtml(q.item)}" data-request="${escapeHtml(q.request)}" data-revision="${q.reviewedRevision}"><label>Local author label <input name="author" maxlength="200" required autocomplete="nickname"></label>${template.controls}${standalone && template.hasPrompts ? "" : body}${details}<pre id="response-draft-recovery" hidden></pre><p>Submit the whole packet together. Drafts stay in this browser for seven days after the last edit, with a 256 KiB limit per draft. Saved responses are Markdown files in responses/.</p><button id="response-preview" type="button" disabled>Preview Markdown</button><pre id="response-preview-content" hidden></pre><button id="response-submit" type="submit" disabled>Record response</button><button id="response-clear" type="button" disabled>Clear draft</button><p id="response-status" role="status">${enabled ? "JavaScript is required to record a response." : "Read-only mode. Restart with --responses to explicitly enable local writes."}</p></form>${yield* historyHtml(q, records)}</section>`;
-});

package/src/server/responses/historyHtml.ts

@@ -1,20 +0,0 @@
-import { Effect } from "effect";
-import { escapeHtml } from "#browser/escapeHtml.ts";
-import type { QuestionPreview, RecordedResponse } from "#browser/responses/schema.ts";
-import type { RenderFailed } from "#render/failed.ts";
-import type { Highlighter } from "#server/render/Highlighter.ts";
-import { renderMarkdown } from "#server/render/markdown.ts";
-
-export const historyHtml = Effect.fn("WorkBoard.historyHtml")(function* (
-	q: QuestionPreview,
-	records: readonly RecordedResponse[],
-): Effect.fn.Return<string, RenderFailed, Highlighter> {
-	const history = yield* Effect.forEach(records, (record) =>
-		Effect.map(
-			renderMarkdown(record.body, { file: `responses/${record.id}.md`, safe: true }),
-			(html) =>
-				`<article id="${escapeHtml(record.id)}"><h3><a href="/responses/${record.id}.md">${escapeHtml(record.response.author)} · ${record.response.type}</a></h3><p>${record.response.question === q.id ? "This reviewed revision" : "Earlier reviewed context — does not approve the current source"} · <code>${record.response.reviewedRevision}</code></p>${record.response.supersedes ? `<p>Explicitly supersedes <a href="/responses/${escapeHtml(record.response.supersedes)}.md">${escapeHtml(record.response.supersedes)}</a>.</p>` : ""}${html}</article>`,
-		),
-	);
-	return `<section id="response-history"><h2>Recorded responses</h2>${history.join("") || "<p>No response is recorded for this source revision.</p>"}</section>`;
-});

package/src/server/responses/optionControls.ts

@@ -1,13 +0,0 @@
-import { escapeHtml } from "#browser/escapeHtml.ts";
-import type { Prompt } from "#browser/responses/Prompt.ts";
-import type { Metadata } from "#metadata/schema.ts";
-
-export function optionControls(prompt: Prompt, fields: Metadata): string {
-	const options = prompt.options
-		.map((option, index) => {
-			const source = fields.options?.[index];
-			return `<input type="radio" name="choice-answer" value="${option.id}" data-option-source="${escapeHtml(option.source)}" hidden><button type="button" class="question-choice" data-choice="${option.id}" aria-pressed="false"><strong>${escapeHtml(source?.label ?? "")}${source?.label === fields.recommended ? " · Recommended" : ""}</strong><small>${escapeHtml(source?.description ?? "")}</small></button>`;
-		})
-		.join("");
-	return `<fieldset data-prompt="answer" data-mode="one" data-source="${escapeHtml(prompt.source)}"><legend>Your answer</legend><p>Choose an option or write another answer. Nothing is selected for you.</p><div class="question-choices">${options}</div><button type="button" data-clear-choices>Clear selection</button><label>Another answer / additional text<textarea data-answer-text maxlength="8192" rows="4"></textarea></label></fieldset>`;
-}

package/src/server/responses/templateHtml.ts

@@ -1,34 +0,0 @@
-import { Effect } from "effect";
-import { escapeHtml } from "#browser/escapeHtml.ts";
-import { RenderFailed } from "#render/failed.ts";
-import { metadataParse } from "#server/metadata/parse.ts";
-import { renderMarkdown } from "#server/render/markdown.ts";
-import { optionControls } from "./optionControls.ts";
-import { questionTemplate } from "./template.ts";
-
-export const templateHtml = Effect.fn("WorkBoard.templateHtml")(function* (context: string, request: string, file: string) {
-	const template = yield* Effect.try({ catch: (cause) => new RenderFailed({ cause }), try: () => questionTemplate(context, request, file) });
-	function render(source: string) {
-		return renderMarkdown(source, { file, safe: true });
-	}
-	const background = yield* render(template.context);
-	const fields = metadataParse(context).fields;
-	const choicePrompt = fields.kind === "question" && !fields.question && fields.options !== undefined ? template.prompts.at(0) : undefined;
-	if (choicePrompt) {
-		return { background, controls: optionControls(choicePrompt, fields), hasPrompts: true };
-	}
-	const controls = yield* Effect.forEach(template.prompts, (prompt, index) =>
-		Effect.gen(function* () {
-			const description = yield* render(prompt.source);
-			const options = yield* Effect.forEach(prompt.options, (option, choice) =>
-				Effect.map(
-					render(option.source),
-					(html) =>
-						`<div class="question-option"><input id="question-${index}-${choice}" type="${prompt.mode === "one" ? "radio" : "checkbox"}" name="choice-${escapeHtml(prompt.id)}" value="${escapeHtml(option.id)}" data-option-source="${escapeHtml(option.source)}"><div><label for="question-${index}-${choice}">Option ${escapeHtml(option.id)}</label>${html}</div></div>`,
-				),
-			);
-			return `<fieldset data-prompt="${escapeHtml(prompt.id)}" data-mode="${prompt.mode}" data-source="${escapeHtml(prompt.source)}"><legend>Question ${index + 1} · ${escapeHtml(prompt.id)}</legend>${description}<p>${prompt.mode === "text" ? "Answer in your own words" : `${prompt.mode === "one" ? "Choose one option" : "Choose any combination"}, or answer in your own words`}. Nothing is selected for you.</p>${options.join("")}${prompt.mode === "text" ? "" : '<button type="button" data-clear-choices>Clear selections</button>'}<label>Additional text / another answer<textarea data-answer-text maxlength="8192" rows="3"></textarea></label></fieldset>`;
-		}),
-	);
-	return { background, controls: controls.join(""), hasPrompts: template.prompts.length > 0 };
-});

package/src/server/views/tools.ts

@@ -1,11 +0,0 @@
-import { escapeHtml } from "#browser/escapeHtml.ts";
-import { type State, viewUrl } from "./state.ts";
-
-export function viewTools(state: State): string {
-	const layouts = ["board", "table"] as const;
-	return `<nav class="view-layouts" aria-label="Work layout">${layouts.map((view) => `<a href="${escapeHtml(viewUrl(state, { view }, "work-results"))}"${state.view === view ? ' aria-current="page"' : ""}>${view === "board" ? "Board" : "Table"}</a>`).join("")}</nav>
- <section id="saved-work-views" class="saved-work-views" aria-label="Saved local views" data-url="${escapeHtml(viewUrl(state, { item: "" }))}">
- <form id="save-work-view"><label for="view-name">View name</label><input id="view-name" maxlength="60" placeholder="Name this view" required><button type="submit" disabled>Save view</button></form>
- <div class="view-picker"><label for="saved-view">Saved views</label><select id="saved-view" disabled><option value="">No saved views</option></select><a id="open-saved-view" hidden>Open</a><button id="remove-saved-view" type="button" disabled>Remove</button><button id="clear-saved-views" type="button" disabled>Clear all</button></div>
- <p id="saved-view-status" role="status">Save board, filters, sort, and layout locally. Item selection stays in the URL. Saving requires JavaScript.</p></section>`;
-}

package/src/server/views/workCards.ts

@@ -1,27 +0,0 @@
-import { escapeHtml } from "#browser/escapeHtml.ts";
-import type { Item } from "./items.ts";
-import { type State, viewUrl } from "./state.ts";
-
-function card(item: Item, state: State, waiting: ReadonlyMap<string, string>): string {
-	const fields = item.document.parsed.fields;
-	const selected = item.id === state.item;
-	return `<article class="work-card" data-key="item:${escapeHtml(item.id)}" data-item="${escapeHtml(item.id)}"${selected ? ' data-selected="true"' : ""}>
- ${waiting.has(item.id) ? `<span class="waiting-badge" title="${escapeHtml(waiting.get(item.id) ?? "")}">Waiting on you</span>` : ""}
- <p class="work-kind">${escapeHtml(fields.kind ?? "Kind not recorded")}</p>
- <h3><a href="${escapeHtml(viewUrl(state, { item: item.id }, "work-detail"))}"${selected ? ' aria-current="true"' : ""}>${escapeHtml(item.title)}</a></h3>
- <p class="work-id">${escapeHtml(item.id)}</p><p class="work-owner">Owner: ${escapeHtml(fields.owner ?? "Not recorded")}</p>
- ${fields.nextAction ? `<p class="work-next">Next: ${escapeHtml(fields.nextAction)}</p>` : ""}</article>`;
-}
-export function workCards(items: readonly Item[], state: State, waiting: ReadonlyMap<string, string> = new Map()): string {
-	if (items.length === 0) {
-		return '<p class="empty">No work matches these filters.</p>';
-	}
-	const columns = Map.groupBy(items, (item) => item.document.parsed.fields.status);
-	return `<div class="work-columns">${[...columns]
-		.map(
-			([status, rows]) => `<section class="work-column" data-key="status:${escapeHtml(status ?? "")}"
- aria-label="${escapeHtml(status ?? "Status not recorded")}"><h2>${escapeHtml(status ?? "Status not recorded")} <span class="work-count">${rows.length}</span></h2>
- ${rows.map((item) => card(item, state, waiting)).join("")}</section>`,
-		)
-		.join("")}</div>`;
-}