Add the web interface

Plain HTML, CSS and JavaScript modules, with no build step. Hash routes
and relative URLs make it work under any path. The job list is polled:
every 2 seconds while a job runs, and less often otherwise.

tests/js/story-cover.test.mjs

@@ -0,0 +1,41 @@
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { Element, install, nodes, server, settle } from './flow-helpers.mjs';
+
+install();
+const { storyPage } = await import('../../bindery/static/js/story.js');
+
+const details = (cover) => ({
+  story: { id: 1, title: 'Story', author: 'Writer', url: 'https://example.com/story', site: 'example.com',
+    locked_fields: [], pinned: {}, site_values: {}, auto_update: true, status: 'ok', cover },
+  chapters: [],
+  recent_chapters: 0,
+});
+const rules = { rules: [], paragraphs: null, global_paragraphs: false };
+
+async function render(t, cover) {
+  const backend = server(t);
+  backend.on('GET', 'stories/1', details(cover));
+  backend.on('GET', 'stories/1/rules', rules);
+  backend.on('GET', 'jobs?story_id=1', []);
+  const main = new Element('main');
+  const cleanup = storyPage(main, { storyId: '1' }, { metadata_fields: {}, mode_labels: {} });
+  await settle();
+  cleanup?.();
+  const summary = nodes(main).find((el) => el.className === 'card story-summary');
+  return summary.children.filter((el) => el instanceof Element);
+}
+
+test('the cover comes first in the story summary, with its version in the URL', async (t) => {
+  const [cover, heading] = await render(t, 'abc123');
+  assert.equal(cover.tagName, 'img');
+  assert.equal(cover.className, 'cover');
+  assert.equal(cover.attributes.src, 'api/stories/1/cover?v=abc123');
+  assert.equal(heading.className, 'story-heading');
+  assert.equal(heading.children[0].textContent, 'Story');
+});
+
+test('a story without a cover shows only its heading', async (t) => {
+  const children = await render(t, null);
+  assert.deepEqual(children.map((el) => el.className), ['story-heading']);
+});