@webship.co/workspace 0.0.0-stage → 1.0.0-beta1

package/docs/screenshots/readme/icons/ai.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+<rect width="64" height="64" rx="14" fill="#deedff"/>
+<g transform="translate(16 16)" fill="none" stroke="#0074e0" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /> <path d="M9 10l.01 0" /> <path d="M15 10l.01 0" /> <path d="M9.5 15a3.5 3.5 0 0 0 5 0" /></g>
+</svg>

package/docs/screenshots/readme/icons/code.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+<rect width="64" height="64" rx="14" fill="#deedff"/>
+<g transform="translate(16 16)" fill="none" stroke="#0074e0" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" /> <path d="M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" /> <path d="M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" /> <path d="M14 7l6 0" /> <path d="M17 4l0 6" /></g>
+</svg>

package/docs/screenshots/readme/icons/docs.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+<rect width="64" height="64" rx="14" fill="#deedff"/>
+<g transform="translate(16 16)" fill="none" stroke="#0074e0" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3v4a1 1 0 0 0 1 1h4" /> <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2" /> <path d="M9 9l1 0" /> <path d="M9 13l6 0" /> <path d="M9 17l6 0" /></g>
+</svg>

package/docs/screenshots/readme/icons/services.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+<rect width="64" height="64" rx="14" fill="#deedff"/>
+<g transform="translate(16 16)" fill="none" stroke="#0074e0" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6a8 3 0 1 0 16 0a8 3 0 1 0 -16 0" /> <path d="M4 6v6a8 3 0 0 0 16 0v-6" /> <path d="M4 12v6a8 3 0 0 0 16 0v-6" /></g>
+</svg>

package/docs/screenshots/readme/icons/sites.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+<rect width="64" height="64" rx="14" fill="#deedff"/>
+<g transform="translate(16 16)" fill="none" stroke="#0074e0" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7 8l-4 4l4 4" /> <path d="M17 8l4 4l-4 4" /> <path d="M14 4l-4 16" /></g>
+</svg>

package/event-log.js

@@ -0,0 +1,59 @@
+/**
+ * A log for tracking what went wrong, and when.
+ *
+ * actions.log says what was done; nothing said what was refused or what broke, and the request that failed
+ * left no trace at all: a rejected form answers 400 to one browser and is gone. This is that trace, one JSON
+ * object per line in logs/dashboard.log, kept on this machine (gitignored, never synced).
+ *
+ * Text that reaches it goes through redact() and clip() first: a prompt can hold a token, and a log is
+ * the one file nobody reviews.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const MAX_BYTES = 5 * 1024 * 1024;
+const KEEP = 3;
+
+function logFile() {
+  return process.env.WORKSPACE_APP_LOG || path.join(__dirname, 'logs', 'dashboard.log');
+}
+
+/** Known secret shapes and `key: value` pairs that name one, replaced before anything is written. */
+function redact(text) {
+  return String(text == null ? '' : text)
+    .replace(/\b(sk|pk|ghp|gho|ghs|github_pat|xox[abprs]|glpat|AIza)[-_A-Za-z0-9]{12,}/g, '[redacted]')
+    .replace(/\bBearer\s+[A-Za-z0-9._~+/=-]{8,}/gi, 'Bearer [redacted]')
+    .replace(/\b([A-Za-z_]*(?:password|passwd|token|secret|api[_-]?key)[A-Za-z_]*)(\s*[:=]\s*)("[^"]*"|'[^']*'|\S+)/gi, '$1$2[redacted]');
+}
+
+function clip(text, max = 300) {
+  const s = redact(text).replace(/\s+/g, ' ').trim();
+  return s.length > max ? `${s.slice(0, max)}…` : s;
+}
+
+/** The text of an HTML message, for a log line: tags gone, entities left as they are. */
+function plain(html, max = 240) {
+  return clip(String(html || '').replace(/<[^>]*>/g, ' '), max);
+}
+
+function rotate(file) {
+  for (let i = KEEP - 1; i >= 1; i--) {
+    try { fs.renameSync(`${file}.${i}`, `${file}.${i + 1}`); } catch (_) { /* not there yet */ }
+  }
+  try { fs.renameSync(file, `${file}.1`); } catch (_) { /* nothing to rotate */ }
+}
+
+function logEvent(level, event, fields = {}) {
+  const file = logFile();
+  const line = JSON.stringify({ time: new Date().toISOString(), level, event, ...fields });
+  try {
+    fs.mkdirSync(path.dirname(file), { recursive: true });
+    let size = 0;
+    try { size = fs.statSync(file).size; } catch (_) { /* first write */ }
+    if (size > MAX_BYTES) rotate(file);
+    fs.appendFileSync(file, `${line}\n`, { mode: 0o600 });
+  } catch (_) { /* a log must never take an action down with it */ }
+}
+
+module.exports = { logEvent, redact, clip, plain, logFile, MAX_BYTES, KEEP };

package/files-browser.js

@@ -0,0 +1,247 @@
+/**
+ * Walking a documents folder, not just the top of it.
+ *
+ * `docs/` holds 29 folders and eight thousand files; the listing showed 21 rows. Everything in a
+ * subfolder was invisible, and so was every file whose extension was not on a curated list — a
+ * screenshot, a recording, a zip of a client's exports. The folder on disk and the page describing it
+ * disagreed, which is the one thing a file listing must not do.
+ *
+ * So: folders are rows you open, at any depth, and anything in the folder is listed. Three rules keep
+ * that honest and bounded:
+ *
+ *   - **One level at a time.** A folder row says how many entries are inside and opens into them. The
+ *     alternative — every file in the tree on one page — is 8,105 rows here, which is not a listing.
+ *   - **A path is checked, never trusted.** Every subfolder arrives from the browser, so it is split
+ *     into segments, refused if any is `..`, resolved with realpath and refused again if the result
+ *     left the workspace. A symlink out of the tree is the case the segment check alone misses.
+ *   - **Noise is named, not guessed at.** The workspace's own plumbing (`cmd-*.sh`, the
+ *     `*.code-workspace`, `README`/`AGENTS`/`CLAUDE`) and the directories nobody browses
+ *     (`node_modules`, the `dev-ai-agents` checkout, dotfiles) are excluded by name. Everything else is
+ *     shown, whatever its extension — the point of the change is that nothing in the folder hides.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const { workspaceDir } = require('./workspaces');
+
+// Which workspaces browse their folders: the ones that hold files a person put in a folder.
+//
+// Not the `ai-*` ones — they list items by the name declared in their frontmatter, and a subdirectory
+// there is a skill they already handle, so folders would be a second, competing idea of what a row is.
+//
+// `videos` is here too, and the rule that kept it out is kept rather than dropped: a poster frame is
+// an input to the player, not something to browse, and listing it doubled the rows and made half of
+// them stills. It is now attached to its recording as the THUMBNAIL (see `attachPosters`), which is
+// what a poster was always for.
+// `specs` is browsable for the same reason docs is, and it is the one that most needs it: a spec is
+// a FOLDER (products/<project>/NNN-topic/ holding four files, or products/<project>/ holding the
+// product's constitution), so a flat read of the top level found nothing at all and the page said
+// "No specs here yet" on a workspace with twelve of them.
+const BROWSABLE = new Set(['docs', 'designs', 'images', 'videos', 'audio', 'specs']);
+
+/** Is this the still that belongs to a recording, rather than a picture in its own right? */
+const IMAGE_RE = /\.(png|jpe?g|gif|webp|avif)$/i;
+
+/**
+ * Give each recording its poster, and take the poster off the list.
+ *
+ * Two shapes, both of which the recorder writes: `demo.mp4` beside `demo-poster.jpg`, and `demo.mp4`
+ * beside `demo.jpg` — the second already groups into the same row, so it only has to be told that the
+ * picture is the poster rather than a second format to offer a button for.
+ *
+ * Mutates and returns the groups map, because it is the same pass that built it.
+ */
+function attachPosters(groups) {
+  for (const [stem, g] of groups) {
+    if (!g.formats.some((f) => f.video)) continue;
+    // The picture sharing the recording's name: its poster, not a format of it.
+    const inline = g.formats.find((f) => IMAGE_RE.test(f.file));
+    if (inline) {
+      g.poster = inline.path || inline.file;
+      g.formats = g.formats.filter((f) => f !== inline);
+    }
+    // And the `-poster` one, which readdir gave a row of its own.
+    const sidecar = groups.get(`${stem}-poster`);
+    if (sidecar && sidecar.formats.every((f) => IMAGE_RE.test(f.file))) {
+      g.poster = g.poster || (sidecar.formats[0].path || sidecar.formats[0].file);
+      groups.delete(`${stem}-poster`);
+    }
+  }
+  return groups;
+}
+
+const TEXT_RE = /\.(txt|md)$/i;
+const SOUND_SIDECARS = ['-cover', '-poster', '-transcript', '-script', '-voiceover-script'];
+
+/**
+ * The audio workspace lists SOUNDS and what belongs to them, the way videos lists recordings.
+ *
+ * A sound's belongings are its cover picture, the text it was made from (or spoken), and the record of
+ * how it was made. They sit beside it as `<name>.jpg`, `<name>.txt`, `<name>.json` (or `<name>-cover.jpg`,
+ * `<name>-transcript.md`), and they are part of its row, not rows of their own. A file that is neither a
+ * sound nor the belonging of one is not listed: this folder is for audio.
+ */
+function attachSoundBelongings(groups) {
+  const sounds = [...groups].filter(([, g]) => g.formats.some((f) => f.audio));
+  for (const [stem, g] of sounds) {
+    const own = g.formats.filter((f) => !f.audio);
+    const take = (f) => {
+      const at = f.path || f.file;
+      if (IMAGE_RE.test(f.file)) g.poster = g.poster || at;
+      else if (TEXT_RE.test(f.file)) g.transcript = g.transcript || at;
+      else if (/\.json$/i.test(f.file)) g.record = g.record || at;
+      else return false;
+      return true;
+    };
+    for (const f of own) take(f);
+    for (const suffix of SOUND_SIDECARS) {
+      const side = groups.get(`${stem}${suffix}`);
+      if (side && side.formats.every((f) => !f.audio) && side.formats.some((f) => take(f))) groups.delete(`${stem}${suffix}`);
+    }
+    g.formats = g.formats.filter((f) => f.audio);
+    g.size = g.formats.reduce((n, f) => n + f.size, 0);
+  }
+  for (const [stem, g] of [...groups]) if (!g.formats.some((f) => f.audio)) groups.delete(stem);
+  return groups;
+}
+
+// Directories nobody browses: an installed dependency tree, the gitignored mirror of the shared
+// agents repository, and anything hidden.
+const NOISE_DIRS = new Set(['node_modules', 'dev-ai-agents', 'workspace-repo', '.git']);
+
+// The workspace's own plumbing, which is tooling rather than content: the builders, the editor's
+// project file, and the three documents about the folder (which the page already renders on its own,
+// under the list).
+const NOISE_FILES = /^(cmd-.*\.sh|.*\.code-workspace|README\.md|AGENTS\.md|CLAUDE\.md)$/i;
+
+const isNoise = (name, isDir) => name.startsWith('.')
+  || (isDir ? NOISE_DIRS.has(name) : NOISE_FILES.test(name));
+
+/**
+ * The folder a request names, or an error saying why not.
+ *
+ * `rel` is what the page puts in its links and `abs` is what it reads. Both are derived here, so no
+ * caller builds a path out of a browser value itself.
+ */
+function safeSub(key, sub) {
+  return safeSubIn(workspaceDir(key), sub);
+}
+
+/**
+ * The same check against a root given directly, which is what makes it testable: a fixture with a
+ * symlink pointing out of the tree can be built in a temp directory, and the rule that matters — a
+ * link out is refused even though every segment was innocent — is then actually exercised.
+ */
+function safeSubIn(root, sub) {
+  if (!root) return { ok: false, error: 'Unknown workspace.' };
+  const raw = String(sub || '').replace(/^\/+|\/+$/g, '');
+  if (!raw) return { ok: true, rel: '', abs: root, root };
+  if (raw.includes('\0')) return { ok: false, error: 'Bad path.' };
+  const segs = raw.split('/');
+  // `.` and `..` never reach the filesystem, and neither does an empty segment (`a//b`).
+  if (segs.some((s) => !s || s === '.' || s === '..')) return { ok: false, error: 'Bad path.' };
+  const abs = path.join(root, ...segs);
+  let real;
+  let realRoot;
+  try {
+    real = fs.realpathSync(abs);
+    realRoot = fs.realpathSync(root);
+  } catch (_) {
+    return { ok: false, error: 'No such folder.' };
+  }
+  // The check the segments cannot make: a symlink inside the workspace pointing out of it.
+  if (real !== realRoot && !real.startsWith(realRoot + path.sep)) return { ok: false, error: 'Bad path.' };
+  try {
+    if (!fs.statSync(real).isDirectory()) return { ok: false, error: 'Not a folder.' };
+  } catch (_) {
+    return { ok: false, error: 'No such folder.' };
+  }
+  return { ok: true, rel: segs.join('/'), abs: real, root };
+}
+
+/**
+ * The real path of a file inside a workspace, or '' when it is not one. Containment is judged against
+ * the workspace's OWN real path, so a workspace that is itself a symlink onto a second disk serves its
+ * files, while a link from inside it to anywhere else is still refused.
+ */
+function realFileIn(root, rel) {
+  try {
+    const real = fs.realpathSync(path.join(root, rel));
+    const base = fs.realpathSync(root);
+    if (real !== base && !real.startsWith(base + path.sep)) return '';
+    return fs.statSync(real).isFile() ? real : '';
+  } catch (_) {
+    return '';
+  }
+}
+
+/**
+ * The subfolders of one directory, each with what is inside it.
+ *
+ * The count is of DIRECT entries, not of the whole subtree: one `readdir` per folder is cheap and
+ * true, while a recursive count of `screenshots/` would walk thousands of files to render one row —
+ * and "12 items" is what tells you whether opening it is worth it anyway.
+ */
+function subfolders(abs, rel) {
+  let entries = [];
+  try {
+    entries = fs.readdirSync(abs, { withFileTypes: true });
+  } catch (_) {
+    return [];
+  }
+  return entries
+    .filter((e) => e.isDirectory() && !isNoise(e.name, true))
+    .map((e) => {
+      const full = path.join(abs, e.name);
+      let count = 0;
+      let folders = 0;
+      try {
+        for (const c of fs.readdirSync(full, { withFileTypes: true })) {
+          if (isNoise(c.name, c.isDirectory())) continue;
+          count += 1;
+          if (c.isDirectory()) folders += 1;
+        }
+      } catch (_) { /* unreadable: it is still a folder, it just says nothing */ }
+      let mtime = new Date(0);
+      try { mtime = fs.statSync(full).mtime; } catch (_) { /* keep the epoch */ }
+      return {
+        folder: true,
+        name: e.name,
+        rel: rel ? `${rel}/${e.name}` : e.name,
+        count,
+        folders,
+        mtime,
+      };
+    });
+}
+
+/** The trail back out: `[{ name, rel }]`, the workspace itself first, the current folder last. */
+function crumbs(key, rel, rootLabel) {
+  const trail = [{ name: rootLabel || key, rel: '' }];
+  if (!rel) return trail;
+  const segs = rel.split('/');
+  segs.forEach((s, i) => trail.push({ name: s, rel: segs.slice(0, i + 1).join('/') }));
+  return trail;
+}
+
+// What a file looks like in a list, by extension. A kind, not a format: a row should say "this is a
+// picture" at a glance, and the format is already written on its buttons.
+const KIND_ICONS = [
+  [/\.(pdf)$/i, 'tabler:file-type-pdf'],
+  [/\.(docx?|odt|rtf)$/i, 'tabler:file-type-doc'],
+  [/\.(xlsx?|ods|csv)$/i, 'tabler:table'],
+  [/\.(pptx?|odp)$/i, 'tabler:presentation'],
+  [/\.(html?|xml)$/i, 'tabler:world'],
+  [/\.(png|jpe?g|gif|webp|avif|svg|bmp|ico|tiff?)$/i, 'tabler:photo'],
+  [/\.(mp4|m4v|webm|ogv|mov|avi|mkv)$/i, 'tabler:player-play'],
+  [/\.(mp3|wav|ogg|oga|opus|m4a|aac|flac|weba)$/i, 'tabler:music'],
+  [/\.(zip|tar|gz|tgz|bz2|xz|7z|rar)$/i, 'tabler:file-zip'],
+  [/\.(md|markdown|txt|log)$/i, 'tabler:file-text'],
+  [/\.(json|ya?ml|toml|ini|conf)$/i, 'tabler:code'],
+  [/\.(js|ts|jsx|tsx|css|scss|php|py|rb|sh|bash)$/i, 'tabler:code'],
+];
+
+const kindIcon = (name) => (KIND_ICONS.find(([re]) => re.test(name)) || [null, 'tabler:file'])[1];
+
+module.exports = { BROWSABLE, isNoise, safeSub, safeSubIn, realFileIn, subfolders, crumbs, kindIcon, attachPosters, attachSoundBelongings, IMAGE_RE, NOISE_FILES, NOISE_DIRS };

package/folders.js

@@ -0,0 +1,121 @@
+/**
+ * A new empty folder in a workspace: a place to run commands, screens or Claude Code that no builder made.
+ *
+ * It shows up as a row like any project, so everything a folder without DDEV already gets (Screens, IDE,
+ * GIT, the folder and project commands, the note) works on it from the moment it exists.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const { esc } = require('./html');
+
+// Lowercase so it can later become a DDEV project or a hostname without a rename.
+const NAME_RE = /^[a-z0-9][a-z0-9_-]{0,62}$/;
+// A files workspace keeps names people read (Webship-Translation-Demo-Guide), so case, spaces and dots are fine there.
+const FILES_NAME_RE = /^[A-Za-z0-9][A-Za-z0-9 _.-]{0,62}$/;
+const RESERVED = new Set(['node_modules', 'backups', 'logs']);
+
+const THEN = {
+  none: 'Just make the folder',
+  shell: 'Open a terminal in it',
+  claude: 'Start Claude Code in it',
+};
+
+/** Why a name cannot be used, or ''. */
+function nameProblem(name, { files = false } = {}) {
+  const n = String(name || '');
+  if (!n) return 'Give the folder a name.';
+  if (files) {
+    if (!FILES_NAME_RE.test(n) || /[ .]$/.test(n)) return 'A folder name is letters, digits, spaces, dots, - and _, starting with a letter or digit (63 max).';
+  } else if (!NAME_RE.test(n)) return 'A folder name is lowercase letters, digits, - and _, starting with a letter or digit (63 max).';
+  if (RESERVED.has(n)) return `<code>${esc(n)}</code> is reserved in a workspace folder.`;
+  return '';
+}
+
+/** Make <root>/<name>. Returns { ok, dir } or { ok: false, status, error }. */
+function createFolder(root, name, { files = false } = {}) {
+  const problem = nameProblem(name, { files });
+  if (problem) return { ok: false, status: 400, error: problem };
+  let base;
+  try { base = fs.realpathSync(root); } catch (_) { return { ok: false, status: 404, error: 'The workspace folder does not exist.' }; }
+  const dir = path.join(base, name);
+  if (path.dirname(dir) !== base) return { ok: false, status: 400, error: 'That name would leave the workspace.' };
+  if (fs.existsSync(dir)) return { ok: false, status: 409, error: `<code>${esc(name)}</code> already exists here.` };
+  try {
+    fs.mkdirSync(dir, { mode: 0o755 });
+  } catch (e) {
+    return { ok: false, status: 500, error: `The folder could not be made: ${esc(e.message)}` };
+  }
+  return { ok: true, dir };
+}
+
+/** The form in the editor modal. */
+/** The form for a files workspace: a folder inside the one being viewed, with nothing to set up. */
+function filesFolderFormHtml(ws, { label = ws, sub = '', suggestion = '' } = {}) {
+  return `
+    <div class="editor-card">
+      <h3 class="uk-margin-small-bottom">New folder in ${esc(label)}${sub ? ` / ${esc(sub)}` : ''}</h3>
+      <form class="folder-new-form" hx-post="/actions/folder-new" hx-target="#editor-modal-body" hx-swap="innerHTML">
+        <input type="hidden" name="workspace" value="${esc(ws)}">
+        <input type="hidden" name="sub" value="${esc(sub)}">
+        <label class="uk-form-label" for="folder-name">Folder name</label>
+        <input class="uk-input uk-margin-small-bottom" id="folder-name" name="name" required autofocus
+               maxlength="63" value="${esc(suggestion)}">
+        <label class="uk-form-label" for="folder-note">What is it for? <span class="uk-text-meta">(optional, becomes its note)</span></label>
+        <input class="uk-input uk-margin-small-bottom" id="folder-note" name="note" maxlength="200">
+        <p class="uk-margin-small-top"><button class="uk-button uk-button-primary" type="submit">Make the folder</button></p>
+      </form>
+    </div>`;
+}
+
+function folderFormHtml(ws, { label = ws, suggestion = '', projectTypes = [], canTest = false, pluginSetups = '' } = {}) {
+  const radios = Object.entries(THEN).map(([value, text], i) => `
+          <label class="uk-margin-small-right"><input class="uk-radio" type="radio" name="then" value="${value}"${i === 0 ? ' checked' : ''}> ${esc(text)}</label>`).join('');
+  return `
+    <div class="editor-card">
+      <h3 class="uk-margin-small-bottom">New folder in ${esc(label)}</h3>
+      <p class="uk-text-meta">An empty folder, listed with the projects. Run commands, screens or Claude Code in it,
+        and set up DDEV later if it becomes a site.</p>
+      <form class="folder-new-form" hx-post="/actions/folder-new" hx-target="#editor-modal-body" hx-swap="innerHTML">
+        <input type="hidden" name="workspace" value="${esc(ws)}">
+        <label class="uk-form-label" for="folder-name">Folder name</label>
+        <input class="uk-input uk-margin-small-bottom" id="folder-name" name="name" required autofocus
+               pattern="[a-z0-9][a-z0-9_\\-]{0,62}" maxlength="63" value="${esc(suggestion)}" placeholder="my-folder"
+               title="Lowercase letters, digits, - and _">
+        <label class="uk-form-label" for="folder-note">What is it for? <span class="uk-text-meta">(optional, becomes its note)</span></label>
+        <input class="uk-input uk-margin-small-bottom" id="folder-note" name="note" maxlength="200"
+               placeholder="Trying the new search module">
+        <div class="uk-form-label">Set it up <span class="uk-text-meta">(optional, runs as a screen session)</span></div>
+        <div class="uk-margin-small-bottom folder-setup">
+          <label class="uk-display-block"><input class="uk-checkbox" type="checkbox" name="ddev" value="1"> Configure DDEV, so it can start</label>
+          ${canTest ? `<label class="uk-display-block"><input class="uk-checkbox" type="checkbox" name="e2e" value="1"> Set up <code>webship-js</code> testing (Playwright and Cucumber), which configures DDEV too</label>` : ''}
+          <div class="folder-ddev-type uk-margin-small-top">${require('./ddev-options').fieldsHtml({ prefix: 'folder' })}
+          </div>
+        </div>
+        ${pluginSetups ? `<div class="uk-form-label">Connect it <span class="uk-text-meta">(optional)</span></div>
+        <div class="uk-margin-small-bottom folder-services">
+          ${pluginSetups}
+        </div>` : ''}
+        <div class="uk-form-label">Then</div>
+        <div class="uk-margin-small-bottom folder-then">${radios}
+        </div>
+        <div class="folder-prompt">
+          <label class="uk-form-label" for="folder-prompt">First message to Claude Code <span class="uk-text-meta">(optional)</span></label>
+          <textarea class="uk-textarea" id="folder-prompt" name="prompt" rows="3" maxlength="4000"
+                    placeholder="Set up a small Node.js app here"></textarea>
+        </div>
+        <p class="uk-margin-small-top"><button class="uk-button uk-button-primary" type="submit">Make the folder</button></p>
+      </form>
+    </div>`;
+}
+
+/** The first free <prefix><n> in a workspace folder, so the form opens with a name that works. */
+function suggestName(root, prefix = 'folder') {
+  for (let n = 1; n < 1000; n += 1) {
+    if (!fs.existsSync(path.join(root, `${prefix}${n}`))) return `${prefix}${n}`;
+  }
+  return '';
+}
+
+module.exports = { NAME_RE, FILES_NAME_RE, THEN, nameProblem, createFolder, folderFormHtml, filesFolderFormHtml, suggestName };