Editor

The editor is a Vue 3 single-page app in frontend/. It browses the corpus, holds the traject workspace (laws, werkdocumenten, tasks, members), edits laws in a split-pane editor with scenarios running on the engine as WASM, and hosts the harvester dashboard.

Overview

• Framework: Vue 3 (Composition API), Vue Router
• Build tool: Vite 8
• Design system: @nldd/design-system web components
• Backend: editor-api, which also serves the built app
• Location: frontend/

Routes and pages

src/router.js is the map. App.vue is only a <router-view>; the real structure is one persistent shell, AppShell.vue, with the Home and Editor sections as its children, plus a handful of top-level pages that carry their own title bar instead of the app chrome.

The shell

AppShell.vue holds the chrome that survives a switch between sections: the Home/Editor tab bar, the search field (a button below the lg breakpoint), the ”+” menu, the traject menu and the account menu. Switching tabs swaps only the nested <router-view>, so the chrome is not rebuilt. In the editor the shell also renders the document tab bar of open articles, and a “PR #N” link to the pull request that the last save in the traject wrote to.

• ”+” menu: inside a traject it offers Regelwerk toevoegen, Werkdocument toevoegen (new or upload) and Leden uitnodigen. Logged out, the same button opens a prompt to log in or request an account.
• Traject menu (TrajectMenu.vue, MobileTrajectSheet.vue on small screens): switch traject or go to the traject chooser.
• Account menu: log in or out, Account aanvragen, the color scheme (Weergave), Instellingen, Harvester for users with a harvester role, Over RegelRecht and Help.

The editor tab requires a login. Every route marked requiresAuth waits for /auth/status before it mounts; a user without a session goes to /uitgelogd, which keeps the intended destination in return_url for the log-in button.

Home

Every Home route renders LibraryView.vue, which uses a navigation split view: a primary sidebar, a secondary sidebar and a main pane. What the panes show depends on the route.

A traject ref has the form {slug}-{8 hex}. The router pins that pattern in every traject route, and law $ids use underscores, so a law id can never be read as a traject ref.

Werkdocumenten are Markdown documents stored in the traject’s own repository, under documents/{ref}/. A new one opens empty in the editor. An upload is converted to Markdown by a pipeline job; before it starts, a confirmation step asks whether a language model may be used for the conversion. Conversions still running show above the document list, and a failed one becomes a task.

Taken lists open tasks under Prioriteit, Wachten op and Alle taken, then Werkdocumenten and one entry per law that tasks refer to. A category without tasks is not shown. Tasks come from pipeline jobs started for the traject: a harvest, an enrichment or a document conversion ends in a review task, and a job that fails leaves a failure task. A task never opens in the main pane itself; Beoordelen goes to the editor or the werkdocument it concerns.

Structuurcontrole (TrajectIntegrityPane.vue) reports what is wrong with how the traject corpus is laid out, with a remedy per finding. The case that prompted it: the law index reads a law id from the directory name, while the editor switches to the $id in the YAML after loading, and when those differ everything after it fails with “not found”. The report loads on opening and on Opnieuw controleren, not periodically.

Members have one of two roles, Beheerder (owner) or Bijdrager (contributor). An owner changes roles and removes members; the last owner cannot be demoted. Invites go through InviteMembersSheet.vue, reachable from the members pane and the ”+” menu.

Editor

/trajecten/{ref}/editor/{lawId?}/{article?} renders EditorView.vue. There is no editor outside a traject: /editor, the old /editor/{lawId} links and /editor.html all redirect to the traject chooser, carrying the law along so it opens after the choice.

The editor is a side-by-side split view with one pane per view. Each pane has a menu to switch its view and to move it left or right. The pane layout is kept in localStorage.

A law without a machine_readable section shows an empty state in Machine and YAML, with the option to request enrichment or start writing by hand.

Top-level pages

Older paths (/library/..., /corpus-juris, /werkdocumenten/{ref}/...) redirect to their current equivalents.

Instellingen

The settings sheet (SettingsSheet.vue, from the account menu) has two sections, and the menu item disappears when neither applies:

• Koppelingen: link or unlink a personal GitHub account, shown when the deployment has a GitHub OAuth app and writes require a personal token.
• Beheer, for the editor-admin role: the feature-flag switches below, and the switch that makes writes require a personal GitHub account. These settings apply to every user of the deployment.

Feature flags

Flags are deployment-wide, stored in the feature_flags table and served by GET /api/feature-flags. PUT /api/feature-flags/{key} is behind the editor-admin role. The frontend keeps its own defaults in src/composables/useFeatureFlags.js so it can render before the API answers.

The list in packages/editor-api/src/feature_flags.rs is also the allow-list: the backend rejects a PUT for a key it does not know with 400, and the frontend then reverts the switch. The two lists therefore have to name the same keys.

Turning a panel.* flag off removes that pane from the editor; turning it back on adds it again. Other users see the change on their next page load.

When the backend has no database, the PUT returns 503 and the frontend keeps the change in localStorage. In a development setup without OIDC a failed write is also kept locally, so the panes stay switchable.

Data loading

Law content comes from the editor-api. src/composables/corpusUrls.js builds every corpus URL in one of two shapes: /api/corpus/... for the public corpus (read-only) and /api/trajects/{ref}/corpus/... inside a traject (read and write). useLaw.js loads a law with a GET on that URL and saves it with a PUT. A save in a traject is written back to the traject’s repository; the response carries the pull request it went to, which is where the “PR #N” link comes from.

Scenarios run on the engine compiled to WASM, loaded by useEngine.js from the WASM package that just wasm-build writes into the app’s public directory.

The scripts/copy-laws.js step still runs before dev and build. It copies local corpus files and the note vocabulary into a data folder in the app’s public directory; the app reads only the ambiguity vocabulary from there at runtime.

Design system

The UI is built from @nldd/design-system web components (element prefix nldd-). src/main.js imports src/nldd-components.js, a generated list with one entry point per component the app renders, plus the design system’s styles. script/check-nldd-imports.mjs keeps that list in step with the tags in the source, so a newly used component fails the build rather than silently missing. A representative slice:

App-level CSS is small. frontend/css/main.css holds a few resets and the --color-primary token (#154273). Two feature stylesheets sit next to their code: src/harvester/harvester.css for the dashboard and src/components/graph/graph-styles.css for the law graph.

Vue components

Besides the views in src/ (AppShell.vue, LibraryView.vue, EditorView.vue and the top-level pages), src/components/ holds 40 components. The ones that carry most of the behavior:

Shared state and API calls live in composables under src/composables/, most of them module-level singletons (useTrajects.js, useTasks.js, useFeatureFlags.js and others).

Corpusinwinning (harvester dashboard)

The harvester dashboard is a section of this app, in frontend/src/harvester/. It reaches the standalone Admin API through the editor-api proxy at /api/harvest-admin/*, which forwards the session cookie so the admin service applies its own role checks. packages/admin/ serves no frontend of its own.

The route /harvesting requires one of harvester-reader, harvester-writer, harvester-admin or regelrecht-admin; a logged-in user without one goes back to /. The entry point is Harvester in the account menu. The dashboard has its own title bar with a back button that returns to where the user came from, and a button for a new harvest job.

Write actions on this dashboard are enforced by the admin API, not by the frontend.

Development

just dev needs .env.sso-local (see Auth and roles). Running npm run dev in frontend/ starts only Vite on port 3000 and proxies /api, /auth and /health to an editor-api on port 8000 (API_PORT overrides it).

Deployment

The editor ships as one Docker image (regelrecht-editor) that bundles the built frontend with the editor-api binary, which serves the static files and the REST API. It runs on RIG/ZAD:

• Production: editor.regelrecht.rijks.app
• PR previews: for a pull request that carries the deploy:preview label