Getting started

Applies to the Free starter development candidate, version 1.0.0. Distribution terms are pending.

Install and make an edit

Use Node ^20.19.0 or >=22.12.0. Open the extracted source folder, then run:

npm ci
npm run dev

Open the printed HTTP address. Edit the root index.html introduction, save and check the browser. Do not double-click source HTML or edit generated dist files.

Prerequisites: this edition's source, its matching package-lock.json and a backup. Outcome: your own introductory copy in the overview. In index.html, change the paragraph beginning “Review work across your projects” to “Review work across my workspace.” Leave IDs, classes and imports intact. The new sentence should appear immediately in the development preview. Build and open the compiled preview to confirm the same result. Restore the original sentence after the exercise if you want an unchanged demo baseline.

Branding and navigation

Theme tokens live in src/theme/css/tokens.css. Put customer overrides in src/project/css/project.css. Update links in src/project/partials/sidebar-free.html. Keep the mobile controls and their IDs. Recheck both appearances and narrow screens after editing.

Outcome: consistent, small rounding without changing shared core. Append the following to src/project/css/project.css, after its imports. Review the sampler in both appearances, then run npm run check. Explicit Tailwind rounding classes are separate from this token; changing the token does not replace every rounded utility.

:root { --dd-radius: 0.25rem; }

Colour overrides should name both appearances so the dark token does not silently replace your project accent. Test the chosen values for contrast before release.

:root,
:root[data-theme="dark"] {
  --dd-accent: #2563eb;
}

The extracted Free files are index.html, work-queue.html, sign-in.html, components-starter.html and this documentation.html. Its controller is src/project/ts/starter.ts; sign-in uses starter-auth.ts. Do not import Pro account or chat modules: they are not included. Adding a page requires updating vite.config.ts and the exact page lists in scripts/validate.mjs and tests/starter.spec.ts, as well as navigation.

vite.config.ts is customer-editable build configuration. Its titles map replaces each page's Getting started placeholder during development and production builds. Add the new filename and readable title there; keep the placeholder in the page rather than maintaining a second literal browser title.

Use a coding agent

Agent instructions are included in Free. Open the extracted source folder in your agent-enabled editor, read AGENTS.md, and make a source checkpoint before starting. This prompt performs the same first edit as the manual exercise above; no paid tool or service is required by the theme itself.

Read AGENTS.md and inspect existing changes.
In index.html, change the introductory paragraph to:
“Review work across my workspace.”
Keep classes, IDs, imports and queue behavior unchanged.
Do not edit src/theme, generated files or dependencies.
Do not connect services or add pages.
Run npm run check and report results and changed files.

Expected result: a small index.html-only diff and the new copy in both development and compiled previews. Review that diff yourself. If the agent tries to edit dist or use an absent Pro file, correct the source location and edition before continuing. Never provide real credentials to a demo or weaken checks to accept an agent's change.

Build and validate

npx playwright install chromium
npm run check
npm run preview

Upload the complete contents of dist to a static HTTP host. Retain assets and relative filenames; test direct page links under the host's prefix. No backend or working authentication is included.

Expected output: five HTML pages and their bundled assets in dist/. Open work-queue.html and documentation.html directly on the destination; search, filter, select an item and toggle appearance. Keep explicit .html filenames and do not enable a catch-all SPA rewrite. Free does not have a build:docs script or copy a public/ directory. Referenced images should be imported through the build, with source and licence review before redistribution. Never put secrets in browser assets.

Troubleshooting

• Unstyled page or visible partial placeholders: use the Vite HTTP URL, not source HTML opened directly.
• Missing script or module: confirm this is the Free guide and that the file exists in your extracted source. Do not copy a Pro import to obtain styling.
• npm ci fails: confirm the Node range above and matching lockfile. Keep the first meaningful error; do not delete the lockfile as a workaround.
• Browser checks fail to start: install Chromium and free port 5211. The installer can be quiet while it downloads. In a restricted agent or container environment, allow the documented test command to bind its local preview port. Run one starter suite at a time.
• Production links fail: upload all of dist, preserve filename case and check the actual hosting prefix.

Before replacing a customized version, extract updates into a separate folder and compare source changes. Never overwrite your only working copy. Test 390×844, 768×1024 and 1440×1000, both appearances and keyboard access after merging; keep the previous source and deployment for rollback.

Free and Pro

Free supplies the workspace, queue, sign-in and starter components. Pro adds run/review workflows, chat, account/team, billing, support and the full component collection. No purchase link or price is promised before launch approval. Both editions use the same core tokens and primitives.