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

package/ddev-addons-page.js

@@ -0,0 +1,124 @@
+/**
+ * The add-ons panel for one project: what it has, what it could have, and everything else there is.
+ *
+ * Rendering lives here rather than in server.js, the way the commands and navigation pages do: the
+ * route resolves the project and calls one function, and what a panel looks like is one file to open.
+ */
+
+const { esc } = require('./html');
+const { humanTime } = require('./format');
+const addons = require('./ddev-addons');
+
+const PER_PAGE = 24;
+
+/**
+ * @param {object} ctx  workspace, project, projectDir, q (a search), page
+ */
+async function addonsPanelHtml({ workspace, project, projectDir, q = '', page = 1 }) {
+  const installed = addons.installedAddons(projectDir);
+  const have = new Set(installed.map((a) => a.repository.toLowerCase()));
+  const registry = await addons.availableAddons();
+  const vals = (extra) => esc(JSON.stringify({ workspace, projectName: project, ...extra }));
+  const panelUrl = `/fragments/projects/addons/${encodeURIComponent(workspace)}/${encodeURIComponent(project)}`;
+
+  const installedRows = installed.map((a) => `
+    <li>
+      <div class="addon-line">
+        <span class="addon-name">${esc(a.name)}
+          <span class="uk-text-meta">· ${esc(a.repository)}${a.version ? ` · ${esc(a.version)}` : ''}${
+  a.installed ? ` · added ${esc(humanTime(new Date(a.installed)))}` : ''}</span></span>
+        <span class="addon-actions">
+          <button class="uk-button uk-button-default uk-button-small" hx-post="/actions/ddev-addon-update"
+            hx-vals='${vals({ addon: a.name })}' hx-target="#webship-workspace-output" hx-swap="innerHTML"
+            title="Take the newest release of ${esc(a.repository)} into this project">Update</button>
+          <button class="uk-button uk-button-default uk-button-small arm-step" hx-post="/actions/ddev-addon-remove"
+            hx-vals='${vals({ addon: a.name, confirm: 'yes' })}' hx-target="#webship-workspace-output" hx-swap="innerHTML"
+            hx-trigger="confirmed-remove" title="Remove ${esc(a.name)} and the ${a.files.length} file(s) it owns">Remove</button>
+        </span>
+      </div>
+    </li>`).join('');
+
+  // A recommendation is a line with a reason on it. Anything already installed drops out of the list
+  // rather than being offered again.
+  const suggestions = addons.RECOMMENDED.filter((r) => !have.has(r.repo.toLowerCase()));
+  const suggestionRows = suggestions.map((r) => {
+    const known = (registry.list || []).find((x) => x.repo.toLowerCase() === r.repo.toLowerCase());
+    return `
+    <li>
+      <div class="addon-line">
+        <span class="addon-name">${esc(r.repo)}${known && known.stars ? ` <span class="uk-text-meta">⭐ ${known.stars}</span>` : ''}</span>
+        <span class="addon-actions">${installButton(r.repo, vals, !!known, 'unknown')}</span>
+      </div>
+      <p class="uk-text-meta addon-why">${esc(r.why)}</p>
+    </li>`;
+  }).join('');
+
+  const matches = addons.searchAddons(registry.list || [], q);
+  const pages = Math.max(1, Math.ceil(matches.length / PER_PAGE));
+  const at = Math.min(Math.max(1, Number(page) || 1), pages);
+  const slice = matches.slice((at - 1) * PER_PAGE, at * PER_PAGE);
+  const searchRows = slice.map((r) => `
+    <li>
+      <div class="addon-line">
+        <span class="addon-name">${esc(r.repo)}${r.stars ? ` <span class="uk-text-meta">⭐ ${r.stars}</span>` : ''}${
+  have.has(r.repo.toLowerCase()) ? ' <span class="uk-label uk-label-success">installed</span>' : ''}</span>
+        <span class="addon-actions">${have.has(r.repo.toLowerCase()) ? '' : installButton(r.repo, vals, !r.truncated)}</span>
+      </div>
+      ${r.description ? `<p class="uk-text-meta addon-why">${esc(r.description)}</p>` : ''}
+    </li>`).join('');
+
+  const pager = pages > 1 ? `
+    <p class="uk-text-meta addon-pager">
+      ${at > 1 ? `<a href hx-get="${panelUrl}?q=${encodeURIComponent(q)}&amp;page=${at - 1}" hx-target="#editor-modal-body" hx-swap="innerHTML">‹ previous</a>` : ''}
+      <span>${(at - 1) * PER_PAGE + 1}–${(at - 1) * PER_PAGE + slice.length} of ${matches.length}</span>
+      ${at < pages ? `<a href hx-get="${panelUrl}?q=${encodeURIComponent(q)}&amp;page=${at + 1}" hx-target="#editor-modal-body" hx-swap="innerHTML">next ›</a>` : ''}
+    </p>` : '';
+
+  return `
+    <div class="editor-card">
+      <h3 class="uk-margin-small-bottom">Add-ons for ${esc(project)}</h3>
+      <p class="uk-text-meta">An add-on is a repository DDEV copies into the project — a service, a tool, or a
+        whole development setup. Installing one writes files into <code>.ddev/</code> and needs a
+        <strong>ddev restart</strong> before it does anything; removing one takes its files away again.
+        ${registry.error ? `<br><strong>The registry could not be read:</strong> ${esc(registry.error)}` : ''}</p>
+
+      <h4 class="uk-margin-small-bottom">Installed <span class="uk-badge">${installed.length}</span></h4>
+      ${installed.length
+    ? `<ul class="uk-list uk-list-divider addon-list">${installedRows}</ul>`
+    : '<p class="uk-text-meta">None yet — DDEV records what it installs in <code>.ddev/addon-metadata/</code>, and this reads that.</p>'}
+
+      ${suggestions.length ? `<h4 class="uk-margin-small-bottom">Worth having here <span class="uk-badge">${suggestions.length}</span></h4>
+      <ul class="uk-list uk-list-divider addon-list addon-suggested">${suggestionRows}</ul>` : ''}
+
+      <h4 class="uk-margin-small-bottom">Everything in the registry <span class="uk-badge">${(registry.list || []).length}</span></h4>
+      <form class="addon-search uk-margin-small" hx-get="${panelUrl}" hx-target="#editor-modal-body" hx-swap="innerHTML"
+            hx-trigger="submit, keyup[key=='Enter'] from:find input">
+        <input class="uk-input uk-form-small" type="search" name="q" value="${esc(q)}"
+               placeholder="Search the add-on registry — redis, solr, playwright…" aria-label="Search add-ons">
+        <button class="uk-button uk-button-default uk-button-small" type="submit">Search</button>
+      </form>
+      ${matches.length
+    ? `<ul class="uk-list uk-list-divider addon-list">${searchRows}</ul>${pager}`
+    : `<p class="uk-text-meta">Nothing in the registry matches “${esc(q)}”.</p>`}
+    </div>`;
+}
+
+/**
+ * Install, or say why not.
+ *
+ * `ddev add-on list` truncates long names with `…`, and a truncated name cannot be installed — so
+ * when the registry had to be read from that table, those rows say so rather than offering a button
+ * that would fail.
+ */
+function installButton(repo, vals, installable, why = 'truncated') {
+  if (!installable) {
+    return why === 'unknown'
+      ? `<span class="uk-label uk-label-warning" title="The registry does not list ${esc(repo)} — it may have moved or been renamed.">not in the registry</span>`
+      : '<span class="uk-label uk-label-warning" title="The registry listing truncated this name, so it cannot be installed from here. Use: ddev add-on get &lt;owner/repo&gt;">name truncated</span>';
+  }
+  return `<button class="uk-button uk-button-primary uk-button-small" hx-post="/actions/ddev-addon-get"
+    hx-vals='${vals({ addon: repo })}' hx-target="#webship-workspace-output" hx-swap="innerHTML"
+    title="Install ${esc(repo)} into this project">Install</button>`;
+}
+
+module.exports = { addonsPanelHtml, PER_PAGE };

package/ddev-addons.js

@@ -0,0 +1,154 @@
+/**
+ * DDEV add-ons: what this project has installed, and what it could.
+ *
+ * An add-on is a repository DDEV copies into a project — a service (`ddev-redis`, `ddev-solr`), a
+ * tool (`ddev-adminer`, `ddev-playwright`), or a whole development setup (`ddev-drupal-contrib`).
+ * There are 294 of them in the registry, and until now the only way to add one here was a terminal.
+ *
+ * **Installed is read off disk.** DDEV records every add-on it installs in
+ * `.ddev/addon-metadata/<name>/manifest.yaml` — the name, the repository, the version, when, and the
+ * files it owns — so listing them is a readdir and a project row costs no subprocess.
+ *
+ * **Available comes from the registry, not from `ddev add-on list`.** That command renders a table
+ * and truncates: 38 of the 294 names come back ending in `…`, and a truncated name cannot be
+ * installed. The registry IS the GitHub topic `ddev-get`, so that is what is asked, through the `gh`
+ * already in this container — full names, descriptions and star counts, cached, with the table as a
+ * fallback that marks what it could not read rather than pretending.
+ *
+ * **A name from the browser is never passed through.** `ddev add-on get` also accepts a URL or a
+ * local path, which is a download-and-run from anywhere; only an `owner/repo` that the registry
+ * listing actually contains is allowed to reach it.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const { run } = require('./jobs');
+
+// `owner/repo`, which is the only shape `ddev add-on get` is given here. Not a URL and not a path:
+// both are things that command will happily install from.
+const ADDON_RE = /^[A-Za-z0-9][A-Za-z0-9._-]*\/[A-Za-z0-9][A-Za-z0-9._-]*$/;
+
+// The registry is a GitHub topic; DDEV's own list is that search.
+const REGISTRY_TOPIC = 'ddev-get';
+const REGISTRY_TTL = 30 * 60 * 1000;
+let _registry = { at: 0, list: null, error: '' };
+
+/**
+ * A few that earn their place in THIS workspace, said with the reason.
+ *
+ * Not a ranking of the 294 and not a copy of the registry's stars: these are the ones a Drupal or
+ * Webship project here actually reaches for, and each line says what it is for so the list is a
+ * recommendation rather than a shelf.
+ */
+const RECOMMENDED = [
+  { repo: 'ddev/ddev-drupal-contrib', why: 'The setup for working on a contrib module or theme inside a core checkout — what the modules and themes workspaces are for.' },
+  { repo: 'ddev/ddev-drupal-solr', why: 'Apache Solr, configured for Drupal Search API: the search backend Webship sites use in production.' },
+  { repo: 'ddev/ddev-redis', why: 'Redis for Drupal caching — the difference a page-heavy site feels immediately.' },
+  { repo: 'ddev/ddev-adminer', why: 'A database UI on its own URL, for when drush sql-cli is not the tool you want.' },
+  { repo: 'ddev/ddev-selenium-standalone-chrome', why: 'A real Chrome for functional tests, with noVNC to watch them run.' },
+  { repo: 'Lullabot/ddev-playwright', why: 'Playwright in the project, which is what the webship-js suites drive.' },
+  { repo: 'ddev/ddev-browsersync', why: 'Live reload while theming: a saved SCSS file refreshes the page.' },
+  { repo: 'ddev/ddev-memcached', why: 'Memcached, where a site is configured for it rather than for Redis.' },
+];
+
+/** Everything DDEV has recorded as installed in this project, newest first. */
+function installedAddons(projectDir) {
+  const dir = path.join(projectDir, '.ddev', 'addon-metadata');
+  let names = [];
+  try {
+    names = fs.readdirSync(dir, { withFileTypes: true }).filter((e) => e.isDirectory()).map((e) => e.name);
+  } catch (_) {
+    return [];
+  }
+  const out = [];
+  for (const name of names) {
+    const file = path.join(dir, name, 'manifest.yaml');
+    let raw = '';
+    try { raw = fs.readFileSync(file, 'utf8'); } catch (_) { continue; }
+    // One flat block of scalars — read the four that matter rather than taking a YAML parser to it.
+    const field = (k) => (raw.match(new RegExp(`^${k}:\\s*"?([^"\\n]+)"?\\s*$`, 'm')) || [, ''])[1].trim();
+    const repository = field('repository');
+    out.push({
+      name: field('name') || name,
+      repository,
+      version: field('version'),
+      installed: field('install_date'),
+      // What it put in the project, which is what removing it takes away again.
+      files: (raw.match(/^project_files:\s*$([\s\S]*?)(?=^\S|\Z)/m) || [, ''])[1]
+        .split('\n').map((l) => l.replace(/^\s*-\s*/, '').trim()).filter(Boolean),
+    });
+  }
+  return out.sort((a, b) => String(b.installed).localeCompare(String(a.installed)));
+}
+
+/**
+ * The registry, cached.
+ *
+ * `gh` is in this container and already authenticated for the shared-agents listing, so the same
+ * search DDEV itself runs is one call away. It is cached for half an hour because it is a network
+ * round trip and the answer is a list of repositories, which does not change by the minute.
+ */
+async function availableAddons({ force = false } = {}) {
+  if (!force && _registry.list && Date.now() - _registry.at < REGISTRY_TTL) return _registry;
+  const out = await run('gh', ['search', 'repos', '--topic', REGISTRY_TOPIC, '--limit', '300',
+    '--json', 'fullName,description,stargazersCount,updatedAt'], process.env.HOME, { timeoutMs: 60 * 1000 });
+  let list = null;
+  try {
+    list = JSON.parse(String(out.stdout || '[]')).map((r) => ({
+      repo: String(r.fullName || ''),
+      description: String(r.description || '').trim(),
+      stars: Number(r.stargazersCount || 0),
+      updated: String(r.updatedAt || ''),
+    })).filter((r) => ADDON_RE.test(r.repo));
+  } catch (_) { list = null; }
+  if (!list || !list.length) {
+    // The fallback is DDEV's own table. It truncates long names with `…`, and a truncated name
+    // cannot be installed — so those are listed as unavailable WITH the reason rather than as a
+    // button that would fail.
+    const table = await run('ddev', ['add-on', 'list'], process.env.HOME, { timeoutMs: 60 * 1000 });
+    const rows = String(table.stdout || '').split('\n')
+      .map((l) => l.replace(/\x1b\[[0-9;]*m/g, '').match(/^│\s*([^│]+?)\s*│\s*([^│]*?)\s*│/))
+      .filter(Boolean)
+      .map((m) => ({ repo: m[1], description: m[2], stars: 0, updated: '', truncated: m[1].includes('…') }))
+      .filter((r) => r.repo !== 'ADD-ON');
+    _registry = { at: Date.now(), list: rows, error: rows.length ? '' : String(out.stderr || table.stderr || '').slice(0, 200) };
+    return _registry;
+  }
+  _registry = { at: Date.now(), list: list.sort((a, b) => b.stars - a.stars), error: '' };
+  return _registry;
+}
+
+/** Forget the cache: after installing or removing one, the next page should say what is true now. */
+function invalidateRegistry() { _registry = { at: 0, list: null, error: '' }; }
+
+/**
+ * Is this a name the registry actually lists?
+ *
+ * The check the whole feature rests on. `ddev add-on get` takes a URL or a path as happily as a
+ * repository, so a name that came from a browser is only allowed through when the registry listing
+ * contains it — and when the registry could not be read, nothing is installed rather than anything
+ * being trusted.
+ */
+async function isKnownAddon(repo) {
+  if (!ADDON_RE.test(String(repo || ''))) return { ok: false, why: 'An add-on is named owner/repo.' };
+  const reg = await availableAddons();
+  if (!reg.list || !reg.list.length) {
+    return { ok: false, why: `The add-on registry could not be read${reg.error ? `: ${reg.error}` : ''}.` };
+  }
+  const found = reg.list.find((r) => r.repo.toLowerCase() === String(repo).toLowerCase());
+  return found ? { ok: true, addon: found } : { ok: false, why: `${repo} is not in the DDEV add-on registry.` };
+}
+
+/** The registry, narrowed by what somebody typed — name and description, like `ddev add-on search`. */
+function searchAddons(list, q) {
+  const needle = String(q || '').trim().toLowerCase();
+  if (!needle) return list;
+  return list.filter((r) => r.repo.toLowerCase().includes(needle)
+    || String(r.description || '').toLowerCase().includes(needle));
+}
+
+module.exports = {
+  ADDON_RE, RECOMMENDED, REGISTRY_TOPIC,
+  installedAddons, availableAddons, invalidateRegistry, isKnownAddon, searchAddons,
+};

package/ddev-custom-commands.js

@@ -0,0 +1,96 @@
+'use strict';
+
+/**
+ * What a DDEV folder can run by name, for the DDEV menu: its own `ddev <command>`s from .ddev/commands,
+ * the scripts in its composer.json (once composer.lock is there) and the scripts in its package.json.
+ * Each group folds under its heading like the rest of the menu.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const { esc } = require('./html');
+
+const COMMAND_RE = /^[A-Za-z0-9][A-Za-z0-9_.:-]{0,60}$/;
+// The folders DDEV runs a command in: the host, or the service of that name.
+const SERVICE_RE = /^[a-z0-9][a-z0-9_-]{0,40}$/;
+
+function annotation(text, key) {
+  const m = text.match(new RegExp(`^##\\s*${key}:\\s*(.+)$`, 'mi'));
+  return m ? m[1].trim() : '';
+}
+
+function projectType(projectPath) {
+  try {
+    const m = fs.readFileSync(path.join(projectPath, '.ddev', 'config.yaml'), 'utf8').match(/^type:\s*["']?([\w-]+)/m);
+    return m ? m[1] : '';
+  } catch (_) { return ''; }
+}
+
+/** The project's custom commands, as DDEV lists them: one per file under .ddev/commands/<service>/. */
+function customCommands(projectPath) {
+  const root = path.join(projectPath, '.ddev', 'commands');
+  let services = [];
+  try { services = fs.readdirSync(root, { withFileTypes: true }).filter((d) => d.isDirectory() && SERVICE_RE.test(d.name)); } catch (_) { return []; }
+  const type = projectType(projectPath);
+  const out = [];
+  for (const s of services) {
+    let files = [];
+    try { files = fs.readdirSync(path.join(root, s.name), { withFileTypes: true }); } catch (_) { continue; }
+    for (const f of files) {
+      if (!f.isFile() || !COMMAND_RE.test(f.name) || /^readme/i.test(f.name) || /\.example$/.test(f.name)) continue;
+      const file = path.join(root, s.name, f.name);
+      let text = '';
+      let exec = false;
+      try { text = fs.readFileSync(file, 'utf8').slice(0, 4096); exec = (fs.statSync(file).mode & 0o111) !== 0; } catch (_) { continue; }
+      // A helper the commands source is neither described nor executable.
+      if (!/^## Description:/mi.test(text) && !(exec && text.startsWith('#!'))) continue;
+      const types = annotation(text, 'ProjectTypes');
+      if (types && type && !types.split(',').map((t) => t.trim()).includes(type)) continue;
+      out.push({ name: f.name, service: s.name, description: annotation(text, 'Description'),
+        usage: annotation(text, 'Usage'), aliases: annotation(text, 'Aliases').split(',').map((a) => a.trim()).filter((a) => COMMAND_RE.test(a)) });
+    }
+  }
+  return out.sort((a, b) => a.name.localeCompare(b.name));
+}
+
+function hasComposerLock(projectPath) {
+  try { return fs.statSync(path.join(projectPath, 'composer.lock')).isFile(); } catch (_) { return false; }
+}
+
+/** The three groups, ready to drop into the DDEV menu. Empty when the folder has none of them. */
+function menuGroupsHtml({ key, project, projectPath, running }) {
+  const { SCRIPT_ROUTE, hasComposerJson, composerScripts } = require('./actions/composer');
+  const { NODE_SCRIPT_ROUTE, hasPackageJson, nodeInfo, nodeScripts } = require('./actions/node');
+  const vals = (extra = '') => `hx-vals='{"workspace":"${esc(key)}","projectName":"${esc(project)}"${extra}}' hx-target="#webship-workspace-output" hx-swap="innerHTML"`;
+  const play = '<span uk-icon="icon: play; ratio: .7"></span>';
+  const meta = (s) => (s ? ` <span class="uk-text-meta">· ${esc(s)}</span>` : '');
+  const group = (title, items) => (items.length ? `
+          <li class="uk-nav-divider"></li>
+          <li class="uk-nav-header" data-group="${esc(title)}">${esc(title)}</li>
+          ${items.join('\n          ')}` : '');
+
+  const commands = customCommands(projectPath).map((c) => {
+    const needsRun = c.service !== 'host' && !running;
+    const tip = [c.description, c.usage && `ddev ${c.usage}`, c.aliases.length && `aliases: ${c.aliases.join(', ')}`,
+      needsRun && 'Runs in a container: start the project first'].filter(Boolean).join(' — ');
+    return needsRun
+      ? `<li data-entry="ddev ${esc(c.name)}"><span class="uk-text-meta" title="${esc(tip)}">ddev ${esc(c.name)} · start first</span></li>`
+      : `<li data-entry="ddev ${esc(c.name)}"><a href hx-post="/actions/ddev-project-command" ${vals(`,"command":"${esc(c.name)}"`)} title="${esc(tip)}">${play} ddev ${esc(c.name)}</a></li>`;
+  });
+
+  const composer = hasComposerJson(projectPath) && hasComposerLock(projectPath) ? composerScripts(projectPath).map((s) =>
+    `<li><a href hx-post="${SCRIPT_ROUTE}" ${vals(`,"script":"${esc(s.name)}"`)} title="${esc(s.description || `ddev composer run-script ${s.name}`)}">${play} ${esc(s.name)}${meta(s.aliases.join(', '))}</a></li>`) : [];
+
+  let node = [];
+  if (hasPackageJson(projectPath)) {
+    const info = nodeInfo(projectPath);
+    const m = info.preferred || 'npm';
+    node = (info.valid ? nodeScripts(info.pkg) : []).map((s) =>
+      `<li><a href hx-post="${NODE_SCRIPT_ROUTE}" ${vals(`,"manager":"${esc(m)}","script":"${esc(s.name)}"`)} title="${esc(s.command || `${m} run ${s.name}`)}">${play} ${esc(s.name)}</a></li>`);
+  }
+
+  return group('custom commands', commands) + group('composer.json scripts', composer) + group('package.json scripts', node);
+}
+
+module.exports = { customCommands, hasComposerLock, menuGroupsHtml };

package/ddev-domains.js

@@ -0,0 +1,84 @@
+/**
+ * The addresses a DDEV project answers at, beside the one its NAME gives it.
+ *
+ * DDEV has two keys for this and they are not interchangeable:
+ *
+ *   additional_hostnames:  LABELS   — `project_tld` is appended to each
+ *   additional_fqdns:      HOSTNAMES — nothing is appended
+ *
+ * The dashboard read only the first for a long time, which is why a project with a Storybook showed
+ * no extra domains at all: Webship writes `storybook.<project>.ddev.site` into `additional_fqdns`,
+ * because it is a whole hostname and putting it in the label list would give
+ * `storybook.<project>.ddev.site.ddev.site`.
+ *
+ * Kept in its own module so it can be tested. The parsing is the part that was wrong, and it is the
+ * part nothing could reach while it lived inside the request handler.
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+/** Strip one layer of quotes from a YAML scalar. */
+const unquote = (s) => String(s).trim().replace(/^["']|["']$/g, '');
+
+/**
+ * The raw keys, kept apart.
+ *
+ * `list` is what the hostname-collision check compares, and it compares labels — so a full hostname
+ * must never be folded into it, or it would compare `blog2` against `storybook.x.ddev.site`.
+ */
+function ddevHostnames(dir) {
+  const out = { list: [], fqdns: [], tld: 'ddev.site' };
+  let cfg;
+  try {
+    cfg = fs.readFileSync(path.join(dir, '.ddev', 'config.yaml'), 'utf8').split('\n');
+  } catch (_) {
+    return out;                       // not a DDEV project
+  }
+  let into = null;
+  for (const ln of cfg) {
+    // A comment is not configuration. A stock config.yaml ships `# additional_hostnames:` and
+    // `#  - somename`, and a parser that reads those hands every project hostnames it never had.
+    if (/^\s*#/.test(ln)) continue;
+
+    const head = ln.match(/^(additional_hostnames|additional_fqdns):(.*)$/);
+    if (head) {
+      const target = head[1] === 'additional_fqdns' ? out.fqdns : out.list;
+      const rest = head[2].trim();
+      if (rest.startsWith('[')) {
+        target.push(...rest.replace(/^\[|\]$/g, '').split(',').map(unquote).filter(Boolean));
+      } else {
+        into = target;                // a block list follows
+      }
+      continue;
+    }
+    if (into) {
+      const item = ln.match(/^\s+-\s*(.+?)\s*$/);
+      if (item) { into.push(unquote(item[1])); continue; }
+      if (ln.trim() === '' || /^\s/.test(ln)) continue;
+      into = null;
+    }
+    const tld = ln.match(/^project_tld:\s*"?([^"#\s]+)"?\s*$/);
+    if (tld) out.tld = tld[1];
+  }
+  return out;
+}
+
+/**
+ * Every extra address, as whole hostnames, with the Storybook one marked.
+ *
+ * Storybook is marked because it is not another copy of the site: it is the component library, a
+ * different thing to open, and the address people go looking for and cannot find.
+ */
+function ddevExtraDomains(dir) {
+  const { list, fqdns, tld } = ddevHostnames(dir);
+  const hosts = [...list.map((label) => `${label}.${tld}`), ...fqdns];
+  const seen = new Set();
+  return hosts
+    .filter((h) => h && !seen.has(h) && seen.add(h))
+    .map((host) => ({ host, storybook: /^storybook\./i.test(host) }));
+}
+
+module.exports = { ddevHostnames, ddevExtraDomains };

package/ddev-import.js

@@ -0,0 +1,93 @@
+/**
+ * Putting a database back: the other half of Export the database.
+ *
+ * The row could dump a database into the workspace's backups folder and never put one back. So the
+ * dumps this dashboard writes were a one-way trip — restoring one meant finding the file, working out
+ * the flag, and typing `ddev import-db` in a terminal.
+ *
+ * Three decisions, each for a reason:
+ *
+ *   - **Only files this workspace already holds.** The list is the workspace's own backups folder,
+ *     so nothing is typed in and no path from a browser reaches a command line. A dump somewhere else
+ *     is a `ddev import-db` in a terminal, and that is a fair place for it.
+ *   - **Only things that ARE dumps.** That folder also holds whole-project tarballs from
+ *     `cmd-tools-backup-*.sh`, and `ddev import-db` accepts a `.tar.gz` — so an archive of a whole
+ *     project would be handed over as if it were SQL. They are excluded by name.
+ *   - **A snapshot first, always.** Importing replaces every table, and the database it replaces is
+ *     often the only copy of an afternoon's work. The snapshot is taken in the same line with `&&`,
+ *     so nothing is imported if it fails — the same shape `drush sql:drop` already uses.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const { esc } = require('./html');
+const { humanSize, humanTime } = require('./format');
+
+// What `ddev import-db` reads AND what is unambiguously a database dump. `.zip`, `.tgz` and `.tar.gz`
+// are left out on purpose: DDEV accepts them, and in this folder they are whole-project archives.
+const DUMP_RE = /\.(sql|mysql)(\.(gz|bz2|xz))?$/i;
+
+/** The dumps a workspace holds, newest first. */
+function listDumps(backupsDir) {
+  let names = [];
+  try {
+    names = fs.readdirSync(backupsDir, { withFileTypes: true })
+      .filter((e) => e.isFile() && !e.name.startsWith('.') && DUMP_RE.test(e.name))
+      .map((e) => e.name);
+  } catch (_) {
+    return [];
+  }
+  return names.map((name) => {
+    let st;
+    try { st = fs.statSync(path.join(backupsDir, name)); } catch (_) { return null; }
+    return { name, size: st.size, mtime: st.mtime };
+  }).filter(Boolean).sort((a, b) => b.mtime - a.mtime);
+}
+
+/**
+ * The dump a request named, or null.
+ *
+ * A basename, matched against what the folder actually holds — never joined from a browser value and
+ * hoped about. `path.basename` first, so a name carrying a directory cannot even be compared.
+ */
+function findDump(backupsDir, name) {
+  const wanted = path.basename(String(name || ''));
+  if (!wanted || wanted !== String(name || '')) return null;
+  return listDumps(backupsDir).find((d) => d.name === wanted) || null;
+}
+
+/** The panel: what there is to import, and what importing one will do. */
+function importPanelHtml({ workspace, project, backupsDir, backupsLabel }) {
+  const dumps = listDumps(backupsDir);
+  const vals = (extra) => esc(JSON.stringify({ workspace, projectName: project, ...extra }));
+  const rows = dumps.map((d) => `
+    <li>
+      <div class="import-line">
+        <span class="import-name">${esc(d.name)}</span>
+        <span class="uk-text-meta import-meta">${esc(humanTime(d.mtime))} · ${esc(humanSize(d.size))}</span>
+        <span class="import-actions">
+          <button class="uk-button uk-button-primary uk-button-small arm-step" hx-post="/actions/ddev-import-db"
+            hx-vals='${vals({ dump: d.name, confirm: 'yes' })}' hx-target="#webship-workspace-output" hx-swap="innerHTML"
+            hx-trigger="confirmed-remove" title="Replace this project's database with ${esc(d.name)}">Import</button>
+        </span>
+      </div>
+    </li>`).join('');
+
+  return `
+    <div class="editor-card">
+      <h3 class="uk-margin-small-bottom">Import a database into ${esc(project)}</h3>
+      <p class="uk-text-meta">Importing <strong>replaces</strong> every table in this project's database.
+        A snapshot is taken first, in the same command — so if the snapshot fails nothing is imported, and
+        if the import is wrong the snapshot is one click away under <em>Snapshots</em>.</p>
+      ${dumps.length
+    ? `<ul class="uk-list uk-list-divider import-list">${rows}</ul>`
+    : '<p class="uk-text-meta">No database dumps in this workspace yet. <em>Export the database</em> writes one here, and so does a project backup.</p>'}
+      <p class="uk-text-meta">These are the dumps in <code>${esc(backupsLabel)}</code>. Whole-project archives
+        from a backup are not listed: <code>ddev import-db</code> would accept one and hand a tarball of a
+        project to the database. A dump from anywhere else is
+        <code>ddev import-db --file &lt;path&gt;</code> in a terminal.</p>
+    </div>`;
+}
+
+module.exports = { DUMP_RE, listDumps, findDump, importPanelHtml };