- Overflow: the preview pane's child (the markdown shell) was a flex item with
the default min-width:auto, so the editor's wide internal min-content pushed
the whole pane past the viewport's right edge. Add min-width:0 on
.preview-pane__body and its children so the editor shrinks (and its own +
the grid's minmax(0) scrolling takes over) — the pane never overhangs.
- Pop out: editor-type files (markdown, yaml/.zddc, code text) were popped into
the lightweight preview window, which can't host the bundled editor — so
markdown showed as raw <pre>. Now they open the FULL browse app deep-linked
to the file (<dir>?file=<name>) in a new window, loading the real editor.
HTML keeps its rendered popup; images/pdf/office unchanged.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Editor routing: the CodeMirror editor is now the general editor for editable
text files that aren't markdown — yaml/.zddc keep schema lint + completion +
hover; txt/csv/tsv/json/xml/html/css/js/log/ini/conf/… open as a plaintext
code editor (line numbers, find, save) instead of a read-only <pre>. HTML now
edits its source (was an iframe render); PDF stays an iframe. Mode is yaml-only
(the vendored CM mode); others plaintext, lint gutter suppressed.
- Abandon the .zddc schema FORM (preview-zddc-form.js deleted): .zddc opens in
CodeMirror. Guided dialogs (Manage access, …) are the front door for common
tasks; CodeMirror is the full/raw surface. One fewer half-baked middle layer.
- Manage Access dialog laid out cleanly: grid rows (who fills + shrinks, level
sizes to content) so long emails/levels never overflow; short level labels
with tooltips + a one-line legend; box-sizing fixed.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
First of the intent-driven actions that replace raw-YAML editing as the front
door. Right-click a folder (or the pane) → "Manage access…" → a dialog of
people + friendly levels; the raw .zddc editor is demoted to "Edit raw policy
(.zddc)…" as the advanced escape. Both gated by the same admin authority.
- browse/js/manage-access.js: reads the folder's on-disk .zddc, presents
principals as View / Contribute / Edit / Manage (admins: membership), plus an
"inherit from parent" toggle (uncheck = make private). Save maps levels back
to verbs (r / rc / rwc / admins:), merges ONLY the access bits into the doc
(every other key preserved), and PUTs. Unrecognised verb strings show as
"Custom" and are preserved untouched.
- Menu: "Manage access…" (guided) is now primary; "Edit raw policy (.zddc)…"
is the escape hatch.
- Self-contained modal + CSS; refreshes the listing on save.
Sets the pattern for the remaining operator tasks (role members, display label,
project convert vars, register a party).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Generalise the front-matter completion into a reusable, provider-based helper
(browse/js/yaml-complete.js) and wire BOTH YAML editors through it. Still fully
deterministic — every candidate and doc string comes from a schema, no AI.
- yaml-complete.js: shared CodeMirror plumbing (indent→key-path, sibling scan,
show-hint, debounced hover tooltip) + two providers:
· flatProvider — a fixed field list (front matter), with an exclude set.
· schemaProvider — a JSON Schema walker that resolves nested key-paths
through properties / additionalProperties / patternProperties and the
recursive $ref:"#" .zddc uses for paths:; keys from object properties,
values from enum / boolean, hover docs from `description`.
- .zddc editor (preview-yaml.js): fetch /.api/zddc-schema once and attach the
schemaProvider on .zddc files — nested-key completion at every level, enum
values (default_tool, dir_tool, views.*.tool), booleans, and hover docs.
Plain .yaml stays lint+highlight only.
- Front-matter editor (preview-markdown.js): refactored to delegate to the
shared helper via flatProvider (excluding the filename-driven identity keys);
the bespoke frontMatterHints is gone — one implementation now.
- Hover-doc tooltip styling.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Vendor CodeMirror's show-hint add-on and wire deterministic, schema-driven
completion into the markdown front-matter pane — NO heuristics, no AI; every
candidate comes from the converter's own field list.
- Vendor codemirror-show-hint.min.{js,css} (CM 5.65.x add-on); concat in
browse/build.sh after the core CM bundle so it extends window.CodeMirror.
- Server: add a structured `values` enum to convert.FrontMatterField (doctype →
report/letter/specification, numbering → true/false), exposed via the existing
/.api/frontmatter JSON. Tracks the template set; keeps the server as the
single source of truth instead of parsing the hint prose.
- Client: frontMatterHints() completes recognised KEYS at line start (excluding
the filename-driven identity keys and keys already present) and enum VALUES
after `key:`. Picking an enum key auto-opens its value list. Triggered on
Ctrl-Space and automatically as you type (completeSingle:false — always a
menu, never an auto-guess). Themed dropdown for dark mode.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace the raw <textarea> front-matter editor with a CodeMirror 5 instance —
the same editor family the .zddc previewer already uses (and already bundled in
browse, so no added weight). Gains: YAML syntax highlighting, line numbers, and
the shared js-yaml lint gutter; one consistent editing feel across the two YAML
surfaces.
- Mount fmCM (mode:yaml, lineNumbers, lint gutter, readOnly when not writable)
into a host div; refresh on the next frame so it measures correctly.
- Route every front-matter read/write through fmCM.getValue()/setValue() and
the change event (sync-on-open, dirty tracking, the rename cue, Cancel, save).
- The old textarea placeholder (recognised front-matter keys) becomes a greyed
caption under the header whose tooltip carries the full key list — CodeMirror
5 has no built-in placeholder. Arbitrary keys remain free either way.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Three .zddc previewer fixes reported against the browse YAML editor:
- Lint no longer flags valid keys. browse/js/preview-yaml.js TOP_KEYS had
drifted from the Go decoder (zddc/internal/zddc/file.go): party_source,
history, history_globs, records, auto_own_roles, received_path,
planned_response_date, planned_review_date, field_codes were all reported
as "unknown key". Add them with appropriate type tags plus an 'object'
case in checkValue for the free-form maps (records, field_codes).
- The ".zddc schema" pill is now clickable (↗) — opens the canonical JSON
Schema the lint mirrors at /.api/zddc-schema (no-auth, read-only).
- The synthetic virtual-.zddc header comment named an internal source path
(internal/zddc/defaults/'s paths: tree) that an operator can't act on. It
now names the operator-facing artifact: the built-in defaults bundle,
exportable/overridable as a root .zddc.zip via `zddc-server show-defaults`.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The create actions duplicate the right-click context menu, so remove
them from the tree-pane toolbar. Reorder the toolbar so the Sort + Hidden
view controls sit ABOVE the autofilter box. Drops the now-dead toolbar
New-button click handlers and their create-gate enable/disable logic
(canCreateHere still gates the context-menu create items).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Reworks the browse menu/tree interaction into a declarative, contextually
honest model and moves view settings onto a toolbar — the menu is the UI to
the system, so it should be familiar, inviting, and only ever offer what
applies.
New declarative menu model (browse/js/menu-model.js):
- Every action is one descriptor with a TYPE predicate (appliesTo) and a
CAPABILITY predicate (enabled)+tooltip. Row/pane menus are projections over
it; separators are derived from group changes. Designed data-shaped so a
future server-sourced manifest (zddc.zip) can supply/extend it.
- Hybrid visibility: type-inapplicable actions are OMITTED (New folder on a
file, Expand on a file); permission/role/tier-gated actions are SHOWN
DISABLED with a reason — so a lower tier sees what a higher role unlocks.
- Roles are NOT hardcoded: ordinary actions gate on the verbs the server
returns (node.verbs / path_verbs), so any operator-defined role works. Only
the two intrinsically-special tiers are recognised by name — site admin
(is_super_admin) and project/subtree admin (path_is_admin), surfaced as the
"Edit access rules…" item; both come from the existing /.profile/access.
- The headline fix: New folder / New markdown file no longer appear on file
rows (they target a folder or the current dir).
events.js: deletes the ~350-line inline buildTreeRowMenu/buildPaneMenu/
SORT_BY_ITEMS; opens menus via menuModel projections through one openRowMenuFor
/openPaneMenu path shared by right-click, the hover kebab, and the keyboard
menu key (ContextMenu / Shift+F10). Injects action impls via menuModel.configure
to avoid a circular dep. Prefetches the scope /.profile/access (memoised) on
load/rescope/refresh/popstate so menus never fetch at open time.
Discoverability + a11y: a per-row ⋯ kebab (tree.js + new icon-ellipsis sprite,
revealed on hover/selection/focus) opens the same menu; keyboard menu key
supported.
Toolbar: Sort + Show-hidden moved OUT of per-row right-click menus into the
tree-pane toolbar, plus New folder / New file buttons (act on the current dir,
greyed with a reason when create access is lacking). Help copy updated.
Icons: dropped the 3 stray emoji from menu items (consistent, VS Code/Finder
style); only new sprite is the kebab's icon-ellipsis.
Tests: +5 browse specs (file row omits New-folder; folder row shows it; a
read-only server node greys Rename with a "write access" tooltip via a pure
menuModel unit; toolbar Sort/Show-hidden drive state + New buttons present;
kebab and Shift+F10 both open the menu). All 23 browse+conflict+diff green.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
DOCX/XLSX preview: add renderDocx (docx-preview) and renderXlsx (SheetJS)
to shared/preview-lib.js — the natural home alongside renderTiff/
renderZipListing, reusable by every tool. browse dispatches Office files
to them in both the inline pane and the pop-out window via the existing
preview.isOffice() check, and browse/build.sh now bundles the
docx-preview + xlsx vendors. Renderers degrade to a friendly message if a
tool doesn't bundle the vendor.
Overflow fix: .md-shell used `grid-template-columns: 280px 1fr`. A bare
`1fr` is `minmax(auto, 1fr)`, whose `auto` floor is the editor's
min-content width (Toast UI's toolbar) — so the content track refused to
shrink and the whole shell overflowed #previewBody as the window narrowed
instead of the editor reflowing smaller. Switch both tracks to
minmax(0, …) in the CSS and in the three JS spots that rewrite the
columns on sidebar-drag, and give .md-shell__sidebar min-width: 0.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Adds a "History…" context-menu item on markdown files in a history:true
subtree (server mode only — the audit is server-stamped). It opens a modal
that lists every saved version newest-first (timestamp + author + size,
current flagged), lets you View any version, Diff any two, and Restore one
(a forward PUT — non-destructive).
- shared/diff.js: dependency-free line/word LCS diff (window.zddc.diff),
prefix/suffix trimming + a cell cap so large files don't stall the UI.
- browse/js/history.js: the modal (list / view / diff / restore), talking to
GET <url>?history=1 and ?history=<sha>.
- loader.js carries the per-file history flag; events.js adds the menu item.
- Wired diff.js + history.js + history.css into browse/build.sh; diff.js into
the zddc-test.html shim. tests/diff.spec.js covers the diff algorithm.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
.preview-pane__body was flex: 1 + display: flex; flex-direction:
column but without min-height: 0. The flex item's default
min-height is min-content (its natural content size), so when the
YAML editor's CodeMirror viewport carried many lines, the body
grew to fit the editor instead of letting the editor scroll
internally. The chain ran out of viewport before reaching the
editor's bottom edge; the body's own scroll bottomed out at a
height that still cropped the last few lines.
Adding min-height: 0 lets the body shrink to its flex-allocated
size so CodeMirror's internal scroll takes over correctly. Same
root cause as the standard flex+overflow papercut documented in
half the CSS guides on the internet — fine to add unconditionally,
no other consumers of .preview-pane__body care.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The persistent #statusBar strip held whatever last-action message
was written ("Loaded N items", "Created folder X", error text, …)
and stuck around indefinitely, overlapping content while adding
little value. Deleted the strip; existing statusInfo/statusError
call sites now thunk through window.zddc.toast (the shared toast
helper every tool already bundles).
- Same function signatures: events.statusInfo /
events.statusError keep working without touching the 70+ call
sites across app.js, download.js, events.js, etc.
- plan-review.js had its own private statusInfo/statusError pair
(duplicated the DOM write); updated to route through
zddc.toast as well.
- statusClear becomes a no-op — toasts fade on their own (5s
info, 8s error via cap-toast) and the toast helper's
single-toast policy guarantees only the latest is visible.
Removed: #statusBar div from template.html, .status-bar / .is-error
/ .is-info / --error / --info rules from base.css and tree.css.
Zero remaining `statusBar` or `status-bar` references in the built
browse.html. Full Playwright suite green (243/0/4).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Read-only markdown files mount as Toast UI Viewer, which already
has no edit toolbar / no caret — the absence is itself the cue.
Drop the explicit red banner; keep the disabled-Save tooltip.
- YAML front-matter textarea no longer shows a placeholder example
(title/date/tags). A file without front matter renders as a
genuinely empty pane instead of looking like it has content.
- YAML editor's banner stays — CodeMirror readOnly has no
built-in visual signal beyond the disabled caret.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Listing JSON gains a writable bool per file row, computed by running
the policy decider with ActionWrite against the parent-dir chain
(with the same admin-bypass branch the file API uses). Cost: one
extra decider call per file in the listing, sharing the parent
chain so the cascade walk is amortized.
Browse loader stores writable on every tree node. The markdown and
YAML editors read it and gate their canSave + initial mount:
- !writable markdown → Toast UI Viewer (rendered, no edit toolbar,
no caret). Banner above explains why save is disabled.
- !writable YAML → CodeMirror readOnly:'nocursor' (selection for
copy, no caret). Banner above explains why save is disabled.
Both editors gain autofocus:false so keyboard nav in the browse
tree doesn't divert into the editor — arrow keys keep moving through
files and folders without the caret jumping. User clicks (or tabs)
into the editor when they actually want to type.
.zddc files already route through preview-yaml's isZddcFile path;
bare .zddc (no ext) matches because that function checks the
literal name.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two small surface upgrades on file rows:
- Tree icon column now stacks the Lucide glyph on top of a small
uppercase extension chip (PDF, DOCX, YAML, etc.). File type reads
at a glance without expanding the row. Folders and zips skip the
chip — their glyph already carries enough.
- Hovercard on a ZDDC-parseable file gains two clickable references
in the .archive section:
Latest → /<project>/.archive/<tracking>.html
This revision → /<project>/.archive/<tracking>_<rev>.html
Both forms are dispatcher-canonicalised to project-root, so the
link works from any depth. Folders that parse (transmittal folders)
get just the Latest link.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Folders the cascade declares but disk doesn't carry (working/,
staging/, reviewing/, mdl/, the canonical folders before they're
materialised) previously got just opacity:0.65 + an "(empty)" hint —
easy to miss, especially next to dimmed-but-real items.
Now they read as placeholders at a glance:
- Dashed left rail (2px, accent-muted) inside the row gutter.
- Italic label in muted text color.
- Lucide icon switches to outline-only (fill:none + stroke:currentColor)
so virtual folders look sketched, not filled.
- "(empty)" hint italic + accent-muted to match the rail.
- Selected virtual row keeps the rail but switches it to the
selection accent so "selected + placeholder" reads as both.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Major upgrade to the browse tool's UX, plus a few shared modules other
tools can adopt.
User-facing:
- Right-click context menu on tree rows AND empty pane space. Traditional
file-manager grouping (Open / Download / New / Rename-Delete / Copy /
Tree ops / View). Items stay visible but disabled when not applicable
so muscle memory carries. Generic shared/context-menu.js framework
supports normal items, toggles, submenus, separators, danger styling.
- YAML editor for .yaml / .yml / .zddc files (CodeMirror 5 vendored at
shared/vendor/codemirror-yaml.min.*). js-yaml lint on every change
for parse errors. For .zddc cascade files, an additional schema-aware
lint pass flags unknown keys, bad enum values, and wrong types.
- Per-row drag-drop upload using webkitGetAsEntry (folder uploads work
recursively). Per-row drop indicator; doc-level overlay still fires
for blank-space drops at drop_target scopes.
- New folder / New markdown file context-menu items (server mode).
Rename + Delete with native confirm() dialog. File-API helpers
removeNode / renameNode use the existing PUT/POST/DELETE endpoints.
- Hover info card with the row's full metadata (ZDDC fields + filesystem
info + path/URL). Interactive — mouse into it, drag-select text,
Ctrl/Cmd-C or right-click → Copy. 200ms grace before dismiss.
- Autofilter input at the top of the tree pane. Same grammar as
archive's column filters (zddc.filter.parse / matches). Filters
files; folders without matches collapse out. Non-matching folders
force-open visually when descendants match, without mutating the
user's actual expand state.
- Two-line ZDDC label: title-first, tracking/rev/status as monospace
meta below. Icon column anchors to the title line. Chevron is a
Lucide outline `chevron-right` SVG, rotated 90° on `.expanded`.
- File-type Lucide icon sprite (shared/icons.js — 16 outline glyphs,
~5 KB). PDF / Word / Spreadsheet / Slides / Image / Video / Audio /
CAD / Web / Config / Code / Archive get distinct icons; folders
tinted with --primary.
- Header wraps gracefully at narrow viewports (shared/base.css
flex-wrap + title min-width:0 ellipsis). Body becomes flex column
in browse so a wrapping header doesn't break #appMain height.
- Markdown editor opens in WYSIWYG mode by default. YAML front-matter
+ TOC sidebar reworked: flexbox layout (single visible resizer
between FM and TOC), both bodies overflow:auto for X+Y scrollbars.
- `?file=<path>` deep links open browse pre-positioned at a specific
file. Multi-segment paths walk into subdirectories on the way.
Auto-flips Show hidden when a segment is dot/underscore-prefixed.
- Refresh + show-hidden toggle preserve expansion / selection /
preview pinning. Path-keyed snapshot survives a re-fetched listing.
- "Add Local Directory" → "Use Local Directory" across the four tools
that have it (browse, archive, classifier, +transmittal comment).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds a UI checkbox next to the existing Sort dropdown that surfaces
hidden entries when ACL would otherwise allow read. Default off
(matches today's filtered behavior). On toggle, browse re-fetches
the current directory with ?hidden=1 and re-renders.
┌─ browse toolbar ─────────────────────────────────────────────┐
│ Sort: [Name (A→Z) ▾] ☐ Show hidden │
└──────────────────────────────────────────────────────────────┘
Server-side surface:
- internal/fs/tree.go ListDirectory gains an `includeHidden bool`
parameter. The .-prefix filter (previously hard-coded) now also
drops _-prefix entries (matches dispatch's reserved-prefix guard)
and honors the new flag.
- internal/handler/directory.go reads `?hidden=1` from the request
and threads it through.
- cmd/zddc-server/main.go dispatcher relaxes its dot-prefix and
_-prefix guards for GET/HEAD when `?hidden=1` is set, so clicking
a hidden entry's link works. `_app/` (apps cache) stays
unconditionally reserved — those bytes must go through the apps
resolver. Writes to hidden paths stay blocked (the file API has
its own segment check that the flag does NOT relax).
- internal/listing/listing.go: signature parity (the lower-level
helper that's used by tests + non-cascade listing paths).
Security model unchanged: the ACL chain on the parent dir is the only
real gate. Whoever can read the dir can see its contents — toggling
"Show hidden" just stops the client-side filter from masking
.-prefixed and _-prefixed entries. Hidden paths today:
• <dir>/.zddc ACL YAML — already exposed via /.profile/zddc
• <dir>/.converted/<base> cached MD→DOCX/HTML/PDF, same sensitivity as source
• <root>/.zddc.d/tokens/ per-token metadata; filename = sha256(token)
so not bearer-usable. Default root ACL
restricts to admins; matches /.tokens UI.
• <root>/.zddc.d/logs/ access logs; same admins-only audience
• <root>/_app/ cached upstream tool HTML (public)
• <root>/_template/ install.zip scaffolding (public)
None of these contain bearer credentials or secret material that the
existing ACL doesn't already gate. The walls are still the cascade.
Two improvements to browse's preview-markdown plugin so it can replace
the standalone mdedit tool:
1. **YAML front-matter editing.** The FM pane above the outline used to
render a read-only <dl> of parsed keys — sparse and unusable when
the file had no envelope yet. It's now a dedicated <textarea> that's
always present. On load, parseFrontMatter() splits the `---\n…\n---`
envelope off the body: the body feeds Toast UI Editor, the envelope
feeds the textarea. On save, assembleContent() recombines them.
Dirty tracking covers both halves via a SHA-256 of the assembled
bytes. The shell mirrors mdedit's old layout (FM textarea top,
outline below) but the FM pane is now always functional, eliminating
the "empty pane over the TOC" problem.
2. **Download as DOCX / HTML / PDF.** When the file handle is HTTP-
backed (server mode) and the file is a .md, three buttons appear in
the info header next to Save. Clicking one fetches the server's
?convert=<fmt> endpoint and triggers a browser download with a
clean filename (foo.md → foo.docx). Auto-saves the buffer first if
dirty so the converted bytes reflect what's on screen.
Helper at window.zddc.source.downloadConverted (shared/zddc-source.js)
so other tools — archive, transmittal — can reuse the same flow later.
Friendly error messages map HTTP 503 / 422 / 504 to actionable toasts.
Drop files anywhere on a browse page; if the current scope is inside
a working/, staging/, or incoming/ subtree the files are PUT to the
current directory via the existing file API. Per-file ACL is enforced
server-side (authorizeAction); a 403 surfaces as a per-file error
toast and the rest of the batch proceeds.
UX:
- dragenter → semi-transparent overlay with a dashed-border panel
showing the destination path. Hides immediately on dragleave or
drop.
- drop → "Uploading N files…" toast, then per-file failure toasts
inline, then a summary toast (success / partial / all-failed).
- listing auto-refreshes after the batch so new files appear in
the tree without a manual reload.
Scope:
- upload-eligible paths are matched by /\/(working|staging|incoming)
(\/|$)/i — same convention as the new grid-mode URL token.
- 256 MiB per-file cap (UPLOAD_MAX_BYTES) since browse's single-
body PUT loads the file as a Blob in the tab; larger uploads
should use a dedicated client.
- Outside the upload-eligible set the overlay never appears; drops
are silently ignored (drag effect = none).
Sequential uploads keep progress predictable; parallel batching can
land later if needed. The module hooks document-level dragenter/leave
/over/drop so it works regardless of which pane the user drags over.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Four user-reported items:
1. landing: remove the standalone-tool strip from the site picker.
Per user, it was awkward — links pointing at zddc.varasys.io
releases from inside a deployment is a layering confusion. The
nav.tool-strip block in landing/template.html and its CSS are
gone.
2. zddc-server: route /Project/archive/<party>/mdl[/] to the tables
app for the virtual-MDL case where the on-disk folder doesn't
exist yet. Previously fell through to 404 because the dispatcher
only routed virtual mdl/ via the IsDir branch — the IsNotExist
branch was missing the equivalent check. Now both shapes (with
and without trailing slash) hit RecognizeTableRequest's default-
MDL fallback and ServeTable serves the embedded tables.html.
3. browse: re-layout the markdown editor to mirror mdedit's layout.
Was: sidebar on right with TOC top + front-matter bottom.
Now: sidebar on LEFT with YAML front matter top + Outline bottom,
content on RIGHT with an informational header (file title +
save controls + status + source) above the Toast UI editor.
New horizontal resizer between the front-matter and outline
sections inside the sidebar (drag the row boundary; arrow keys
step by 24 px). Browse test selectors updated.
4. zddc-server reviewing aggregator: extend to depth ≥ 2 so the
user can preview files inside virtual reviewing/<tracking>/
received/ and staged/ folders. IsReviewingPath now returns a
sidePath ("received[/rest]" or "staged[/rest]"); ServeReviewing's
depth-2 branch proxies the underlying real folder's listing,
emitting folder entries with virtual reviewing/ URLs (so
navigation stays in the aggregator) and file entries with
canonical archive/ or staging/ URLs (so byte fetches resolve
directly). ACL is enforced against the real path; depth-1
received/ + staged/ URLs are now virtual too (was canonical),
so the user smoothly descends into the depth-2 listing.
Tests updated for the new IsReviewingPath signature and the depth-1
URL shape.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The previous nested-flexbox layout produced indeterminate heights
inside the Toast UI editor host and made the TOC pane width fragile —
visually the editor and outline weren't laying out reliably. This
swaps the whole shell to CSS Grid, which gives every cell a definite
size.
Layout:
┌──────────────────────────────────────────────────────────────┐
│ toolbar (Save | ● modified | status | source) │
├─────────────────────────────────────┬────────────────────────┤
│ │ Outline │
│ Toast UI Editor │ • Heading 1 │
│ (md / wysiwyg / preview) │ • Subheading │
│ ├────────────────────────┤
│ │ Front matter │
│ │ title: … rev: … │
└─────────────────────────────────────┴────────────────────────┘
Notes:
- The shell mounts as a single child of #previewBody (not by
re-classing previewBody itself), so the outer flex layout that
fills the preview pane is preserved.
- Sidebar is its own grid (outline 1fr + front-matter auto/max 40%),
each section independently scrollable.
- Resizer is a 6 px element on the grid column boundary; drag
updates grid-template-columns. Keyboard left/right adjust by 24 px.
Width persists across mounts (lastTocWidth) within a session.
- parseHeadings now skips front-matter envelope + fenced code so a
"##" inside ```bash``` doesn't show up as an outline entry.
- scrollEditorToHeading uses findScrollParent + scrollTo({behavior:
'smooth'}) so jumps feel less jarring.
- Class names follow BEM: .md-shell__*, .md-side__*, .md-toc__*,
.md-fm__*. Tests updated to the new selectors.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
#5 — Double-click on a folder no longer toggles collapse.
Root cause: the single-click handler called tree.render() immediately,
which replaced the clicked row element. The browser's double-click
detection requires the second click to land on the SAME target as the
first, so dblclick never fired for folders.
Fix: defer the single-click toggle by 220ms. A pending dblclick within
the window cancels the toggle and runs navigateIntoFolder instead.
Modifier-clicks (shift/alt for recursive) and ZIP expands skip the
deferral — they're never followed by a dblclick navigation.
#3 — Browse at /<project>/ now always shows the four canonical
folders (archive, working, staging, reviewing) even when they don't
yet exist on disk. Each missing folder is synthesized client-side as
a "virtual" row: muted icon + label + "(empty)" hint, double-clickable
to navigate. zddc-server already serves an empty listing for these
paths (commit 3fc3717), so navigation into a virtual folder works
without 404 and the user lands in a sensible empty workspace.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Markdown preview pane now surfaces YAML front-matter above the TOC as a
key/value list (definition list), so engineering documents with header
metadata (title, revision, status, etc.) show their identity at a glance
without opening the file in mdedit. Front-matter parsing handles both
scalar and array values; arrays render as comma-joined.
TOC pane is now resizable (4px col-resize handle on its left edge);
preserves the user's chosen width across re-renders inside a single
session.
mdedit welcome banner moved inside #welcome-screen so the "browse opens
md in this same editor" callout only shows when no file is open — it
was previously visible in every state which was noisy.
archive.spec.js: wait for #filePreviewToggle to be attached before
clicking, fixing a Playwright flake where the preview button hadn't
mounted yet.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The tree's underlying setSort API was carried forward from the old
table-with-clickable-headers UI but had no widget driving it after
the layout reshape. Adds an explicit dropdown in the toolbar:
Sort: [Name (A→Z) ▾]
[Name (Z→A) ]
[Modified (new→old) ]
[Modified (old→new) ]
[Size (large→small) ]
[Size (small→large) ]
[Type (A→Z) ]
Implementation:
- new tree.setSortExplicit(key, dir) — sets both axes in one call
(the existing tree.setSort toggles direction on repeat-clicks,
which is the right semantics for column-header clicks but wrong
for an explicit dropdown).
- events.js parses the dropdown value as "<key>:<asc|desc>" and
calls setSortExplicit. The dropdown is initialised to reflect
the current sort state on mount.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Completes the markdown plugin's deferred v2 items:
1. TOC pane
A third pane to the right of the Toast UI editor lists every heading
in the current document, hierarchically indented by level. Click an
item → editor scrolls to that heading (markdown-mode uses
setSelection + preview scroll; WYSIWYG mode uses DOM text matching;
the target heading flashes briefly via primary-light background).
The TOC re-renders on every editor change (debounced 250ms) so it
stays in sync with edits.
Heading parser supports ATX-style `^#{1,6}\s+` lines, strips inline
markdown emphasis/code/links/strike from the displayed label.
Empty file → "Empty file." Headingless file → "No headings."
2. FS-API writes
Saves now route to whichever source the file came from:
- node.handle + createWritable available → FileSystemWritableFileStream
(local folder picker). The user's chosen file gets overwritten
via the browser's File System Access API.
- node.url + server source → PUT to the server URL (as before).
- zip-virtual file → save disabled (no writable stream from JSZip).
- Anything else → save disabled with a tooltip.
Save status surfaces via the existing toolbar (`Saved 10:42:18`) AND
a shared toast notification ("Saved readme.md" / "Save failed: …")
so the success/failure is visible regardless of whether the user is
looking at the toolbar.
Source-hint chip on the toolbar shows "local" / "server" /
"read-only (inside zip)" so the user knows which write path is
active before they make changes.
CSS additions in browse/css/tree.css for .md-toolbar, .md-split,
.md-editor-host, .md-toc-pane, .toc-list, and the .toc-level-1..6
indentation rules.
A new Playwright test exercises the markdown plugin end-to-end:
mounts the editor on a .md click, asserts the three DOM regions are
visible, verifies the TOC contains the three expected headings from
the test fixture's markdown content, and confirms the source hint
reads "local" for FS-API mode.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Reshape browse from "tree-as-table with popup preview" into a unified
file-experience tool with three layered behaviors:
Phase A — Two-pane shell
Phase B — Markdown plugin (Toast UI inline)
Phase C — Grid mode (classifier workflow)
Phase D — Deprecation banners on standalone classifier + mdedit
= Phase A: two-pane shell + lightweight preview plugins =
Browse's table view becomes a tree-pane on the left + preview-pane on
the right with a draggable resizer. Click a folder → expand inline.
Click a file → render in the right pane. The previous popup window
becomes an explicit "⤴ Pop out" button in the right-pane header for
users with a second monitor.
Preview rendering reuses shared/preview-lib.js (PDF iframe, image
<img>, TIFF, ZIP listing, text <pre>). Unknown types show a download
link. browse/js/preview.js refactored into renderInline (default) +
renderInPopup (Pop out button); both share the same plugin
dispatch logic.
Filter rows were already removed earlier this session. Sort columns
likewise — the tree is alphabetical by default; the underlying
setSort API still exists for future re-introduction.
= Phase B: markdown plugin =
New browse/js/preview-markdown.js: when a .md or .markdown file is
clicked, the right pane mounts a Toast UI editor (initial-value =
file contents) with a small toolbar containing Save + dirty indicator
+ status text. Save sends PUT through the file API for server-mode
files; non-server sources are read-only for now (deferred to a
follow-up that wires zddc-source.js writes too). Ctrl+S / Cmd+S
inside the editor saves.
Toast UI Editor (~700 KB JS + ~160 KB CSS) was previously bundled
only in mdedit/vendor/. Moved to shared/vendor/ so browse and mdedit
both pull from one location.
= Phase C: grid mode =
View-mode toggle [Browse | Grid] in the toolbar. Grid mode loads the
classifier tool as an iframe scoped to the current directory (server
mode at working/staging/incoming locations) — classifier's full
bulk-rename workflow without leaving browse. v1 implementation; a
future iteration could bundle classifier's modules directly into
browse for tighter integration. Hostile cases (file:// origin, paths
outside working/staging/incoming) show a friendly explanation
instead of a blank iframe.
new browse/js/grid.js handles the activation logic.
= Phase D: deprecation banners =
mdedit and classifier standalones gain a "this tool is being absorbed
into Browse" advisory banner. Both standalones remain fully
functional and continue to ship — they're useful for offline single-
file editing and air-gapped environments. The banner just points
users toward the unified browse experience.
= Files =
+ browse/js/preview-markdown.js (markdown plugin)
+ browse/js/grid.js (grid-mode plugin)
M browse/template.html (two-pane layout, view toggle, banners)
M browse/css/tree.css (two-pane CSS, replaces table styles)
M browse/js/init.js (state additions: selectedId, viewMode)
M browse/js/tree.js (rowHtml: <tr>+<td> → <div>)
M browse/js/preview.js (renderInline / renderInPopup split)
M browse/js/events.js (toggle wiring, resizer, click handlers
adapted from <table> to <div>)
M browse/build.sh (Toast UI vendor + new modules)
R mdedit/vendor/toastui-* → shared/vendor/ (one bundle, two tools)
M mdedit/build.sh (paths)
M mdedit/template.html (deprecation banner)
M classifier/template.html (deprecation banner)
M tests/browse.spec.js (selectors updated for new layout +
new "click file → preview" test)
Bundle sizes after this commit:
browse: ~1020 KB (was ~290 KB; added Toast UI ~700 KB)
classifier: ~1470 KB (unchanged from prior baseline)
mdedit: ~2140 KB (unchanged; vendor location moved but not added)
What's deferred:
- TOC + front-matter pane in browse's markdown plugin (mdedit has
these; browse v1 uses just the editor).
- FS-API writes from browse's markdown plugin (server PUT works).
- Classifier modules bundled directly into browse (v1 uses iframe).
- Sort UI in the new tree (model still supports it; no widget yet).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Three tools (archive, browse, classifier) independently implemented
an empty-state pattern with three different CSS class naming
conventions and slightly different rules:
archive: .empty-state + .empty-state-content (BEM-less)
browse: .empty-state + .empty-state__inner (BEM)
classifier: .empty-state + .empty-state-content (BEM-less)
Same visual intent ("nothing's loaded yet — here's a welcome card
with instructions"), implemented three times with subtly different
spacing, no shared body styling for h2/p/ul/li, and incompatible
class names that prevented a future tool from copy-pasting the
pattern.
Promote a single consolidated rule set to shared/base.css using
BEM naming throughout:
.empty-state — base (flex centered, padding)
.empty-state--overlay — modifier: position absolute,
top 50px to clear app-header,
z-index 10. Used by archive
and classifier (their empty
states sit OVER the main
layout).
.empty-state__inner — content card (left-aligned,
text-muted, max-width 640)
.empty-state__inner--centered — modifier: tighter max-width
500, centered text, 2rem
padding. Used by tools whose
welcome screen reads as a
centered card.
.empty-state__inner h2/p/ul/ol/li — typography defaults
.empty-state__inner .note — italic small-print
.welcome-list — bullet list with left-aligned
text + auto margins; safe to
nest inside a centered card.
Per-tool changes:
- archive/template.html, archive/js/app.js: rename
.empty-state-content → .empty-state__inner empty-state__inner--centered;
add .empty-state--overlay to the outer .empty-state container.
Also the runtime-injected unsupported-browser markup in
showUnsupportedBrowserMessage() and the showHttpErrorState
selector.
- classifier/template.html: same renames.
- archive/css/layout.css + components.css: delete .empty-state*
and .welcome-list rules (now in shared).
- classifier/css/layout.css: same. Keep .empty-state.drag-over
locally — classifier is the only tool whose empty state acts
as a drop target.
- browse/css/base.css: delete .empty-state* (shared covers it).
browse's template was already using .empty-state__inner so no
template change needed.
LOC: shared/base.css gains ~70 lines; per-tool overrides lose ~85
combined. Net -15. More importantly, future tools can reuse the
pattern by adding two divs and (optionally) the --centered or
--overlay modifiers; no copy-paste required.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two more half-contract leaks surfaced by sweeping shared chrome class
usage across tools:
1. form/ had its own design-token namespace (--color-primary,
--color-bg, --color-text, --color-border, --color-bg-alt,
--color-text-muted) defined nowhere but fallback'd to hardcoded
hex values different from shared (#1e3a5f vs shared's #2a5a8a).
Form's buttons, inputs, fieldsets, array-row borders, and status
colors all rendered with subtly different palette than the rest
of the suite.
Form also redefined .btn, .btn-primary, and a (form-local)
.btn-small class — the redefinition shadowed shared/base.css's
button system entirely. Form's JS used 'btn btn-small' for the
add/remove row buttons in form-array widgets.
Fixes:
- form/css/form.css: rename every --color-* reference to the
matching shared token (--primary, --bg, --bg-secondary, --text,
--text-muted, --border, --radius, --danger, --success).
- form/css/form.css: delete the .btn / .btn-primary / .btn-small
blocks entirely. Shared covers .btn / .btn-primary /
.btn-secondary / .btn-sm / .btn-lg / .btn-link.
- form/js/array.js: switch the row add/remove buttons to
'btn btn-sm btn-secondary' so they pick up shared's sizing
and outline variant.
- tests/form-safety.spec.js: update the selector
button.btn-small → button.btn-sm.
2. browse/ had .hidden { display: none !important; } — exact
duplicate of shared/base.css's rule. Delete the redundant copy
(left a one-line comment pointer in case anyone wonders why
it's missing from the local sheet).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The two filter rows (📄 file/ext + 📁 folder) didn't really earn their
header real estate. Browse is for navigating directory structure;
ad-hoc filters across a tree of mixed file types and depths weren't
the right affordance, and the visual weight competed with the column
headers and the breadcrumb. Removed entirely:
- template.html: dropped both <tr class="filter-row"> rows in <thead>,
the related "Filter rows" help section, and the empty-state copy
that mentioned the 📄/📁 rows.
- init.js: dropped state.filters (file/folder/ext slots).
- events.js: dropped the .column-filter[data-filter] input wiring.
- tree.js: dropped recomputeVisibility() and the n.visible plumbing
in visibleIds() and updateCount(). Render is now a straight depth-
first walk over expanded subtrees; the count is just total rows.
setFilter is removed from the public API.
- css/tree.css: dropped .filter-row*, .filter-row__icon, and the
browse-local .column-filter rules (.column-filter is also defined
in shared/base.css for tools that still use it; that stays).
No test changes — tests/browse.spec.js never exercised filters.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bring every tool's header in line with archive's pattern:
[logo] [title] [version] [Add Local Directory] [⟳] ............... [◐] [?]
------------- header-left --------------- ----- header-right -
Changes per tool:
* browse: rename "Select Directory" → "Add Local Directory"; add the
red-non-stable wrap to the build label (was missing); add a help
panel + bundle shared/help.js.
* classifier: rename selectDirectoryBtn → addDirectoryBtn,
refreshBtn → refreshHeaderBtn for consistency. Update all JS
callers and welcome-screen copy to the new label.
* mdedit: same id rename. Move the previously-in-pane refresh
button into the header. Stop renaming the dir button to
"Directory: <name>" once a folder is loaded — instead use the
shared btn--subtle variant to de-emphasize while keeping the
standard label.
* transmittal: convert non-standard <div class="app-header"> with
spacer/icons containers to <header class="app-header"> with the
canonical header-left/header-right pair. Move the publish split-
button into header-left (Transmittal-specific primary action).
Remove dead .app-header__spacer/__icons/header-icon-btn CSS now
that nothing references those classes.
* landing, form: add help-btn + help-panel + bundle shared/help.js.
Each panel is tool-specific (project picker docs for landing,
schema-driven form docs for form).
Cross-cutting:
* shared/base.css: promote .btn--subtle from browse/css/tree.css
so any tool with an online mode can de-emphasize Add Local
Directory consistently.
Verified all 7 tools in headless Chromium: header structure correct,
build label red on non-stable cuts, help panel opens + closes via
button + Esc.
- Vendor JSZip locally (shared/vendor/jszip.min.js) and bundle into
the browse build instead of CDN-loading. Eliminates the failure
mode where ZIP rows can't expand because the CDN script doesn't
load (CSP, network, etc.). Tool now works fully offline.
- Replace the toolbar filter input + ext multi-select with two
spreadsheet-style auto-filter rows in <thead>:
- 📄 row: file-name filter + extension filter
- 📁 row: folder-name filter
Each input uses shared/zddc-filter syntax (substring/!negate/
^startsWith/$endsWith/regex/| or/space and).
- New visibility model with ancestor-of-match awareness:
- file matches keep their ancestor folders visible (path-to-hit)
- folder match keeps its descendants visible
- filters compose (file ∧ folder ∧ ext) so combinations narrow
Computed model-side; render walks only visible nodes.
- Replace 🏠 emoji breadcrumb-root with an inline outline-stroke SVG
that tints with currentColor.
Bundles Phase 2 polish + the user-requested header/breadcrumb work:
- Breadcrumbs replacing the plain currentPath span. Server mode
renders linkified ancestor segments (each <a> navigates to that
directory; the browser fetches browse.html, the new instance
auto-loads the listing). FS-API mode renders the rootHandle name
as a non-link (no ancestor handles to navigate). Both prefix the
path with a 🏠 root icon. Trailing slash + bold-current segment
match common file-explorer conventions.
- Subdued 'Select Directory' button in server mode. Once browse is
serving a real directory listing, the local-folder switcher is
available but visually quiet (btn--subtle: transparent, muted
color). FS-API mode keeps the primary styling (it's how the user
got there). New btn--subtle CSS class added to browse's tree.css.
A refresh button (⟳) appears next to it in both modes; clicking
it re-fetches the current root listing.
- Header consistency: browse now matches archive's header layout
(refresh + help buttons in addition to theme on the right). Help
is a placeholder for future help dialog wiring.
- File preview popup. Click a file row → opens a popup window with
the file rendered. Plain types (PDF, HTML, image) load in
iframes; TIFF + ZIP listings via shared/preview-lib.js's
renderTiff / renderZipListing helpers; text via <pre>; unknown
types → 'click Download' placeholder. Modifier-click (ctrl/cmd/
shift) and middle-click still open the file in a new tab via the
underlying <a target=_blank>. Single popup window is reused
across multiple file clicks (matches archive's UX).
- ZIP inline expansion. .zip files have a chevron and act like
folders in the tree. First expand fetches the zip bytes
(server URL or FS handle or parent-zip read), parses with JSZip
(auto-loaded from CDN), and synthesizes the entry tree. Nested
directories within the zip lazy-expand on demand by re-walking
the cached entry list at the right path prefix. Click on a
zip-entry file opens the preview popup with bytes read from
JSZip. Recursive expand-all skips zip archives by design — they
can be very large, and explicit click-to-expand is safer.
- Extension multi-select filter. Toolbar now has a <select
multiple> populated with extensions present in the current
view. Filter is OR-of-selected; combined with the name filter
it's AND-of-both. Folders pass through (so expanding a folder
whose name doesn't match the ext filter still shows its file
children that do match).
Three issues from initial v0.0.12 dev/prod testing:
1. Online listings empty.
directory.go was missing Vary: Accept on its responses, so
browser/CDN cached the HTML response (the embedded browse.html)
and served it again when browse's JS later fetched the same URL
with Accept: application/json. JSON parse failed, autoDetect
returned null, empty state showed. Adds Vary: Accept on both
branches and changes browse.html cache-control to no-cache so
deployed updates land immediately.
2. Top-level folder rows tall, shrink as subtree expands.
The .browse-table had flex:1 in a flex column. <table> in flex
doesn't reliably distribute height across rows — with few rows,
each row stretched. Wrap the table in a div with overflow:auto
and drop flex:1 from the table itself.
3. Recursive expand/collapse.
Shift-click (or alt-click) on a folder now expand-all or
collapse-all its subtree. Plain click still toggles just that
folder. Implementation: tree.expandSubtree() walks BFS, loading
each level's children in parallel, re-rendering between levels
so the user sees progress. tree.collapseSubtree() recursively
marks the subtree collapsed (children stay loaded for instant
re-expand).
A new HTML tool — browse — that lists the contents of any directory.
Designed for ZDDC archives but no ZDDC-specific filtering; just a
straight folder browser with expand/collapse, sort, and name filter.
Modes (auto-detected at page load):
- Online: when served by zddc-server at a folder URL, queries
the same URL with Accept: application/json to load the listing
and renders it. Auto-served as the default at any directory
under ZDDC_ROOT without an index.html (replacing the previous
minimal-HTML stub from directory.go).
- Local: 'Select Directory' button uses FileSystemAccessAPI to
pick any folder on disk; works in Chromium-based browsers.
Features (Phase 1 — what's in this commit):
- Tree view with lazy-loaded folders (children fetched on first
expand).
- Sort by name / size / extension / date (column header click).
- Filter by name substring (toolbar input).
- File click opens in a new tab — for server-backed pages,
routes through zddc-server's normal handler so .archive
redirects + apps cascade overrides + ACL all apply.
Phase 2 deferred:
- ZIP files inline expansion (treat archive entries as virtual
children).
- File preview popup (reuse shared/preview-lib.js).
- Extension multi-select filter.
Wiring:
- browse/ added to top-level ./build's per-tool list, embed
block, versions.txt, and the lockstep release commit + tag set.
All seven tools (archive, transmittal, classifier, mdedit,
landing, form, browse) advance together on stable cuts.
- shared/build-lib.sh: browse added to ZDDC_RELEASE_TOOLS and
verify_channel_links's per-tool loop.
- zddc/internal/apps/embed.go: //go:embed browse.html +
EmbeddedBytes("browse") case.
- zddc/internal/apps/availability.go: browse available at every
directory (same as archive).
- zddc/internal/apps/handler.go: MatchAppHTML routes
/<dir>/browse.html → 'browse'.
- zddc/internal/handler/directory.go: when a directory request
arrives with Accept: text/html and no index.html exists,
serve the embedded browse.html bytes (with a JSON-fallback
if the embedded slot is empty during bootstrap).
