@crombolo/backoffice-host 0.12.1 → 0.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crombolo/backoffice-host",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "description": "Serves the Umbraco backoffice SPA: shell HTML, import map and package manifests.",
   "license": "MIT",
   "author": "Crombolo",
@@ -31,7 +31,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@crombolo/core": "0.12.1",
+    "@crombolo/core": "0.13.1",
     "@crombolo/backoffice-dist": "18.2.0"
   }
 }

package/plugin/assistant/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Assistant",
   "id": "Crombolo.Assistant",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "allowPublicAccess": false,
   "extensions": [
     {

package/plugin/bundles-installed.js

@@ -40,6 +40,7 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
     _loading: { state: true },
     _busy: { state: true },
     _notice: { state: true },
+    _installs: { state: true },
   }
 
   constructor() {
@@ -48,6 +49,7 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
     this._loading = true
     this._busy = ''
     this._notice = ''
+    this._installs = true
   }
 
   connectedCallback() {
@@ -58,7 +60,9 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
   async #load() {
     this._loading = true
     try {
-      this._items = (await listInstalled()).items ?? []
+      const result = await listInstalled()
+      this._items = result.items ?? []
+      this._installs = result.installs !== false
     } catch (error) {
       this._notice = error instanceof Error ? error.message : String(error)
     } finally {
@@ -117,20 +121,29 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
                       <uui-table-cell class="carries">${carriesTags(item.carries)}</uui-table-cell>
                       <uui-table-cell class="status">${status(item)}</uui-table-cell>
                       <uui-table-cell>
-                        <uui-button
-                          look="secondary"
-                          color="danger"
-                          label="Uninstall"
-                          .state=${this._busy === item.packageName ? 'waiting' : undefined}
-                          @click=${() => this.#uninstall(item)}></uui-button>
+                        ${
+                          this._installs
+                            ? html`<uui-button
+                                look="secondary"
+                                color="danger"
+                                label="Uninstall"
+                                .state=${this._busy === item.packageName ? 'waiting' : undefined}
+                                @click=${() => this.#uninstall(item)}></uui-button>`
+                            : nothing
+                        }
                       </uui-table-cell>
                     </uui-table-row>
                   `,
                 )}
               </uui-table>
               <p class="note">
-                An install writes this site's <code>package.json</code> and
-                <code>bun.lock</code>. Commit both to keep it across deployments.
+                ${
+                  this._installs
+                    ? html`An install writes this site's <code>package.json</code> and
+                        <code>bun.lock</code>. Commit both to keep it across deployments.`
+                    : html`Packages are added and removed by changing this site's
+                        <code>package.json</code> and deploying, so every server has the same ones.`
+                }
               </p>
             </uui-box>
           `

package/plugin/bundles-marketplace.js

@@ -27,6 +27,7 @@ export default class CromboloBundlesMarketplaceElement extends UmbLitElement {
     _url: { state: true },
     _appliesContent: { state: true },
     _declined: { state: true },
+    _installs: { state: true },
   }
 
   constructor() {
@@ -41,6 +42,7 @@ export default class CromboloBundlesMarketplaceElement extends UmbLitElement {
     this._query = ''
     this._appliesContent = true
     this._declined = new Set()
+    this._installs = true
   }
 
   connectedCallback() {
@@ -57,6 +59,7 @@ export default class CromboloBundlesMarketplaceElement extends UmbLitElement {
       this._keyword = result.keyword ?? this._keyword
       this._url = result.url ?? ''
       this._appliesContent = result.appliesContent !== false
+      this._installs = result.installs !== false
     } catch (error) {
       this._error = error instanceof Error ? error.message : String(error)
     } finally {
@@ -97,7 +100,7 @@ export default class CromboloBundlesMarketplaceElement extends UmbLitElement {
   }
 
   #contentChoice(item) {
-    if (!item.carries?.content || item.installedVersion) return nothing
+    if (!item.carries?.content || item.installedVersion || !this._installs) return nothing
     if (!this._appliesContent)
       return html`<p class="meta">Its content is added separately on this site.</p>`
     return html`
@@ -135,6 +138,11 @@ export default class CromboloBundlesMarketplaceElement extends UmbLitElement {
       </div>
       ${this._error ? html`<uui-box headline="The registry could not be reached"><p>${this._error}</p></uui-box>` : nothing}
       ${this._notice ? html`<div id="notice">${this._notice}</div>` : nothing}
+      ${
+        this._installs
+          ? nothing
+          : html`<div id="notice">Packages are added to this site by a deploy, so that every server has them: add one to the site's <code>package.json</code> and deploy it.</div>`
+      }
       ${
         this._items.length === 0 && !this._error
           ? this.#empty()
@@ -161,7 +169,9 @@ export default class CromboloBundlesMarketplaceElement extends UmbLitElement {
                     ${
                       item.installedVersion
                         ? html`<uui-tag look="positive">Installed ${item.installedVersion}</uui-tag>`
-                        : html`
+                        : !this._installs
+                          ? html`<p class="meta">Add it to the site with <code>bun add ${item.name}</code>, then deploy.</p>`
+                          : html`
                           <uui-button
                             look="primary"
                             label="Install"

package/plugin/localizations/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Localizations",
   "id": "Crombolo.Localizations",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "allowPublicAccess": false,
   "extensions": [
     {

package/plugin/seo/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Search & sharing",
   "id": "Crombolo.Seo",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "allowPublicAccess": false,
   "extensions": [
     {

package/plugin/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo",
   "id": "Crombolo.Core",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "allowPublicAccess": false,
   "extensions": [
     {
@@ -345,6 +345,112 @@
       "name": "Crombolo Icons Context",
       "overwrites": ["Umb.GlobalContext.Icons"],
       "api": "/crombolo-plugin/branding/icon-registry.js"
+    },
+    {
+      "type": "section",
+      "alias": "Crombolo.Section.Workflow",
+      "name": "Crombolo Workflow Section",
+      "weight": 40,
+      "meta": {
+        "label": "Workflow",
+        "pathname": "workflow"
+      }
+    },
+    {
+      "type": "sectionView",
+      "alias": "Crombolo.SectionView.Workflow.Waiting",
+      "name": "Crombolo Workflow Waiting",
+      "element": "/crombolo-plugin/workflow-requests.js",
+      "elementName": "crombolo-workflow-waiting",
+      "weight": 400,
+      "meta": {
+        "label": "Waiting for me",
+        "pathname": "waiting",
+        "icon": "icon-inbox"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.SectionAlias",
+          "match": "Crombolo.Section.Workflow"
+        }
+      ]
+    },
+    {
+      "type": "sectionView",
+      "alias": "Crombolo.SectionView.Workflow.InFlight",
+      "name": "Crombolo Workflow In Flight",
+      "element": "/crombolo-plugin/workflow-requests.js",
+      "elementName": "crombolo-workflow-in-flight",
+      "weight": 300,
+      "meta": {
+        "label": "In flight",
+        "pathname": "in-flight",
+        "icon": "icon-time"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.SectionAlias",
+          "match": "Crombolo.Section.Workflow"
+        }
+      ]
+    },
+    {
+      "type": "sectionView",
+      "alias": "Crombolo.SectionView.Workflow.History",
+      "name": "Crombolo Workflow History",
+      "element": "/crombolo-plugin/workflow-requests.js",
+      "elementName": "crombolo-workflow-history",
+      "weight": 200,
+      "meta": {
+        "label": "Decided",
+        "pathname": "history",
+        "icon": "icon-check"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.SectionAlias",
+          "match": "Crombolo.Section.Workflow"
+        }
+      ]
+    },
+    {
+      "type": "sectionView",
+      "alias": "Crombolo.SectionView.Workflow.Designer",
+      "name": "Crombolo Workflow Designer",
+      "element": "/crombolo-plugin/workflow-designer.js",
+      "weight": 100,
+      "meta": {
+        "label": "Workflows",
+        "pathname": "workflows",
+        "icon": "icon-mindmap"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.SectionAlias",
+          "match": "Crombolo.Section.Workflow"
+        },
+        {
+          "alias": "Umb.Condition.CurrentUser.IsAdmin"
+        }
+      ]
+    },
+    {
+      "type": "workspaceView",
+      "alias": "Crombolo.WorkspaceView.Document.Workflow",
+      "name": "Crombolo Document Workflow",
+      "element": "/crombolo-plugin/workflow-tab.js",
+      "weight": 50,
+      "meta": {
+        "label": "Workflow",
+        "pathname": "workflow",
+        "icon": "icon-mindmap"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.WorkspaceAlias",
+          "match": "Umb.Workspace.Document"
+        }
+      ]
     }
   ]
 }

package/plugin/workflow-client.js

@@ -0,0 +1,40 @@
+/**
+ * The Workflow screens' calls to <backoffice>/crombolo/api/approvals/ (story 028).
+ * The cookie carries the session. Every answer resolves; a refusal carries the
+ * server's own words in `message`.
+ */
+const apiBase = () =>
+  `${(document.querySelector('base')?.getAttribute('href') ?? '/umbraco/').replace(/\/$/, '')}/crombolo/api/approvals`
+
+async function call(path, init = {}) {
+  const response = await fetch(`${apiBase()}/${path}`, {
+    credentials: 'include',
+    ...init,
+    headers: { accept: 'application/json', 'content-type': 'application/json', ...init.headers },
+  })
+  const body = await response.json().catch(() => ({}))
+  if (response.status === 403 && !body.message)
+    return { ok: false, message: 'You are not allowed to do that.' }
+  return { ok: response.ok, status: response.status, ...body }
+}
+
+const post = (path, body = {}) => call(path, { method: 'POST', body: JSON.stringify(body) })
+
+export const pageApproval = (key) => call(`page/${encodeURIComponent(key)}`)
+export const sendForApproval = (key, action, comment) =>
+  post(`page/${encodeURIComponent(key)}/send`, { action, comment })
+export const decide = (requestKey, verb, body) =>
+  post(`request/${encodeURIComponent(requestKey)}/${verb}`, body)
+export const waitingForMe = () => call('waiting')
+export const inFlight = () => call('in-flight')
+export const finished = (skip = 0, take = 25) => call(`history?skip=${skip}&take=${take}`)
+export const listWorkflows = () => call('workflows')
+export const previewWorkflow = (alias, workflow) =>
+  post(`workflows/${encodeURIComponent(alias)}/preview`, { workflow })
+export const saveWorkflow = (alias, workflow) =>
+  call(`workflows/${encodeURIComponent(alias)}`, {
+    method: 'PUT',
+    body: JSON.stringify({ workflow }),
+  })
+export const deleteWorkflow = (alias) =>
+  call(`workflows/${encodeURIComponent(alias)}`, { method: 'DELETE' })

package/plugin/workflow-designer.js

@@ -0,0 +1,529 @@
+/**
+ * The workflow designer (story 028): stages drawn on a canvas and connected by
+ * arrows, each stage's approvers and send-back beside it, and the workflow's
+ * own settings above. Saving writes `schema/workflows/<alias>.toml`; before it
+ * does, the requests in flight that the change affects are named.
+ *
+ * An arrow that would close a loop is refused as it is drawn. The server holds
+ * the file to the same rules on save, so this only spares a round trip.
+ */
+// For its side effect: registers `umb-input-document`, which the shell loads lazily.
+import '@umbraco-cms/backoffice/document'
+import { css, html, LitElement, nothing, unsafeCSS } from '@umbraco-cms/backoffice/external/lit'
+import { deleteWorkflow, listWorkflows, previewWorkflow, saveWorkflow } from './workflow-client.js'
+import { ancestors, BOX, drawGraph, GRAPH_STYLES, layout, wouldLoop } from './workflow-graph.js'
+
+const ON_EDIT = {
+  withdraw: 'Saving withdraws the request; the editor sends it again',
+  'approve-latest': 'Saving goes into the request; approvers approve the latest',
+  lock: 'The page cannot be changed while it waits',
+  'lock-after-first-approval': 'The page can be changed until someone approves',
+}
+const SELF = {
+  refused: 'Someone else must approve it',
+  allowed: 'They may approve it like anyone in the group',
+  automatic: 'Their approval counts automatically where they are in the group',
+}
+const COMMENTS = {
+  optional: 'Optional',
+  'on-send-back': 'Required when sending back',
+  always: 'Required with every decision',
+}
+const ON_CHANGE = {
+  keep: 'They finish under the version they started with',
+  restart: 'They start again under the new version',
+  withdraw: 'They are withdrawn, and sent again',
+}
+
+const blank = () => ({
+  alias: 'new-workflow',
+  name: 'New workflow',
+  appliesTo: { branches: [], contentTypes: [] },
+  publishersMaySkip: true,
+  onEdit: 'withdraw',
+  selfApproval: 'refused',
+  comments: 'optional',
+  unpublish: false,
+  onChange: 'keep',
+  stages: [
+    {
+      alias: 'review',
+      name: 'Review',
+      approvers: [],
+      required: 'one',
+      next: [],
+      sendBack: 'editor',
+      position: { x: 0, y: 0 },
+    },
+  ],
+})
+
+const select = (
+  value,
+  options,
+  onChange,
+) => html`<select @change=${(e) => onChange(e.target.value)}>
+  ${Object.entries(options).map(([key, label]) => html`<option value=${key} ?selected=${key === value}>${label}</option>`)}
+</select>`
+
+export default class CromboloWorkflowDesignerElement extends LitElement {
+  static properties = {
+    _list: { state: true },
+    _editing: { state: true },
+    _originalAlias: { state: true },
+    _selected: { state: true },
+    _connecting: { state: true },
+    _problems: { state: true },
+    _affected: { state: true },
+    _message: { state: true },
+  }
+
+  #drag
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.#load()
+  }
+
+  async #load() {
+    const result = await listWorkflows()
+    if (!result.ok) {
+      this._message = result.message
+      return
+    }
+    this._list = result
+  }
+
+  #edit(workflow) {
+    const copy = structuredClone(workflow)
+    // Every stage gets the place the canvas would draw it, so dragging starts from there.
+    const positions = layout(copy.stages)
+    for (const stage of copy.stages) stage.position = stage.position ?? positions.get(stage.alias)
+    this._editing = copy
+    this._originalAlias = workflow.alias
+    this._selected = copy.stages[0]?.alias
+    this._problems = undefined
+    this._affected = undefined
+    this._message = undefined
+  }
+
+  #touch() {
+    this._editing = { ...this._editing }
+    this._affected = undefined
+  }
+
+  #stage(alias) {
+    return this._editing.stages.find((s) => s.alias === alias)
+  }
+
+  #addStage() {
+    let n = this._editing.stages.length + 1
+    while (this.#stage(`stage-${n}`)) n++
+    const xs = this._editing.stages.map((s) => s.position?.x ?? 0)
+    this._editing.stages.push({
+      alias: `stage-${n}`,
+      name: `Stage ${n}`,
+      approvers: [],
+      required: 'one',
+      next: [],
+      sendBack: 'editor',
+      position: { x: Math.max(0, ...xs) + BOX.width + 80, y: 0 },
+    })
+    this._selected = `stage-${n}`
+    this.#touch()
+  }
+
+  #removeStage(alias) {
+    this._editing.stages = this._editing.stages
+      .filter((s) => s.alias !== alias)
+      .map((s) => ({
+        ...s,
+        next: s.next.filter((n) => n !== alias),
+        sendBack: s.sendBack === alias ? 'editor' : s.sendBack,
+      }))
+    this._selected = this._editing.stages[0]?.alias
+    this.#touch()
+  }
+
+  #renameStage(stage, alias) {
+    const clean = alias.trim().replace(/[^A-Za-z0-9_-]/g, '-')
+    if (!clean || this.#stage(clean)) return
+    for (const other of this._editing.stages) {
+      other.next = other.next.map((n) => (n === stage.alias ? clean : n))
+      if (other.sendBack === stage.alias) other.sendBack = clean
+    }
+    stage.alias = clean
+    this._selected = clean
+    this.#touch()
+  }
+
+  #onStage(alias) {
+    if (this.#drag?.moved) return
+    if (!this._connecting) {
+      this._selected = alias
+      return
+    }
+    if (this._connecting === true) {
+      this._connecting = alias
+      return
+    }
+    const from = this._connecting
+    this._connecting = undefined
+    if (wouldLoop(this._editing.stages, from, alias)) {
+      this._message = `An arrow from ${from} to ${alias} would make the stages loop, so it was not drawn.`
+      return
+    }
+    const source = this.#stage(from)
+    if (!source.next.includes(alias)) source.next = [...source.next, alias]
+    this._message = undefined
+    this.#touch()
+  }
+
+  #onArrow(from, to) {
+    const source = this.#stage(from)
+    source.next = source.next.filter((n) => n !== to)
+    const target = this.#stage(to)
+    if (
+      target &&
+      !ancestors(this._editing.stages, to).has(target.sendBack) &&
+      target.sendBack !== 'editor'
+    )
+      target.sendBack = 'editor'
+    this.#touch()
+  }
+
+  #pointerDown(alias, event) {
+    if (this._connecting) return
+    const stage = this.#stage(alias)
+    this.#drag = {
+      alias,
+      startX: event.clientX,
+      startY: event.clientY,
+      from: { ...stage.position },
+      moved: false,
+    }
+  }
+
+  #pointerMove(event) {
+    if (!this.#drag) return
+    const stage = this.#stage(this.#drag.alias)
+    const dx = event.clientX - this.#drag.startX
+    const dy = event.clientY - this.#drag.startY
+    if (Math.abs(dx) + Math.abs(dy) > 3) this.#drag.moved = true
+    stage.position = {
+      x: Math.max(0, Math.round(this.#drag.from.x + dx)),
+      y: Math.max(0, Math.round(this.#drag.from.y + dy)),
+    }
+    this._editing = { ...this._editing }
+  }
+
+  #pointerUp() {
+    const drag = this.#drag
+    // The click that follows a drag selects nothing.
+    setTimeout(() => {
+      if (this.#drag === drag) this.#drag = undefined
+    })
+  }
+
+  async #save(confirmed = false) {
+    this._problems = undefined
+    if (!confirmed) {
+      const preview = await previewWorkflow(
+        this._originalAlias ?? this._editing.alias,
+        this._editing,
+      )
+      if (!preview.ok) {
+        this._problems = preview.problems ?? [{ message: preview.message }]
+        return
+      }
+      if (preview.affected.length > 0) {
+        this._affected = preview.affected
+        return
+      }
+    }
+    const saved = await saveWorkflow(this._originalAlias ?? this._editing.alias, this._editing)
+    if (!saved.ok) {
+      this._problems = saved.problems ?? [{ message: saved.message }]
+      return
+    }
+    this._affected = undefined
+    this._message = 'Saved.'
+    this._originalAlias = this._editing.alias
+    await this.#load()
+  }
+
+  async #delete() {
+    if (
+      !window.confirm(
+        `Delete the workflow "${this._editing.name}"? Pages it covers will publish without approval.`,
+      )
+    )
+      return
+    const result = await deleteWorkflow(this._originalAlias)
+    if (!result.ok) {
+      this._message = result.message
+      return
+    }
+    this._editing = undefined
+    await this.#load()
+  }
+
+  render() {
+    if (this._message && !this._list)
+      return html`<uui-box headline="Workflows">${this._message}</uui-box>`
+    if (!this._list) return html`<uui-box headline="Workflows"><uui-loader></uui-loader></uui-box>`
+    if (!this._editing) return this.#renderList()
+    return this.#renderEditor()
+  }
+
+  #renderList() {
+    const { items, editable } = this._list
+    return html`<uui-box headline="Workflows">
+      ${editable ? nothing : html`<p>Workflows are kept with the site's files, which cannot be changed on this server. Change them in the repository and deploy.</p>`}
+      ${
+        items.length === 0
+          ? html`<p>No workflow yet: every page publishes as soon as someone who may publish does.</p>`
+          : html`<uui-table>
+              <uui-table-head>
+                <uui-table-head-cell>Workflow</uui-table-head-cell>
+                <uui-table-head-cell>Covers</uui-table-head-cell>
+                <uui-table-head-cell>Stages</uui-table-head-cell>
+              </uui-table-head>
+              ${items.map(
+                (w) => html`<uui-table-row>
+                  <uui-table-cell><a href="#" @click=${(e) => {
+                    e.preventDefault()
+                    this.#edit(w)
+                  }}>${w.name}</a></uui-table-cell>
+                  <uui-table-cell>${[
+                    w.appliesTo.branches.length ? `${w.appliesTo.branches.length} branch(es)` : '',
+                    ...w.appliesTo.contentTypes,
+                  ]
+                    .filter(Boolean)
+                    .join(', ')}</uui-table-cell>
+                  <uui-table-cell>${w.stages.length}</uui-table-cell>
+                </uui-table-row>`,
+              )}
+            </uui-table>`
+      }
+      ${editable ? html`<uui-button look="primary" label="New workflow" @click=${() => this.#edit(blank())}>New workflow</uui-button>` : nothing}
+    </uui-box>`
+  }
+
+  #renderEditor() {
+    const w = this._editing
+    const editable = this._list.editable
+    const stage = this.#stage(this._selected)
+    return html`
+      <uui-box headline=${w.name || 'Workflow'}>
+        <div class="toolbar">
+          <uui-button look="secondary" label="Back" @click=${() => {
+            this._editing = undefined
+          }}>Back to the list</uui-button>
+          ${
+            editable
+              ? html`
+                  <uui-button look="secondary" label="Add a stage" @click=${() => this.#addStage()}>Add a stage</uui-button>
+                  <uui-button look=${this._connecting ? 'primary' : 'secondary'} label="Connect stages"
+                    @click=${() => {
+                      this._connecting = this._connecting ? undefined : true
+                    }}
+                  >${this._connecting === true ? 'Click the stage to draw from' : this._connecting ? 'Now click the stage it leads to' : 'Connect stages'}</uui-button>
+                  <uui-button look="primary" label="Save" @click=${() => this.#save()}>Save</uui-button>
+                  ${
+                    this._originalAlias &&
+                    this._list.items.some((i) => i.alias === this._originalAlias)
+                      ? html`<uui-button look="secondary" color="danger" label="Delete" @click=${() => this.#delete()}>Delete</uui-button>`
+                      : nothing
+                  }
+                `
+              : nothing
+          }
+        </div>
+        ${this._message ? html`<p class="message">${this._message}</p>` : nothing}
+        ${this._problems ? html`<ul class="problems">${this._problems.map((p) => html`<li>${p.path ? html`<code>${p.path}</code> ` : nothing}${p.message}</li>`)}</ul>` : nothing}
+        ${
+          this._affected
+            ? html`<div class="affected">
+                <p>Saving changes the rules for ${this._affected.length} page(s) waiting for approval:</p>
+                <ul>${this._affected.map((a) => html`<li>${a.page}: ${ON_CHANGE[a.outcome]}</li>`)}</ul>
+                <uui-button look="primary" label="Save anyway" @click=${() => this.#save(true)}>Save anyway</uui-button>
+              </div>`
+            : nothing
+        }
+        <p class="hint">Arrows run left to right: the stages an arrow leads to wait for every stage with an arrow into them, and run side by side. Click an arrow to remove it.</p>
+        <div class="canvas" @pointermove=${(e) => editable && this.#pointerMove(e)} @pointerup=${() => this.#pointerUp()} @pointerleave=${() => this.#pointerUp()}>
+          ${drawGraph(w.stages, {
+            selected: this._selected,
+            onStage: (alias) => this.#onStage(alias),
+            onArrow: (from, to) => editable && this.#onArrow(from, to),
+            onPointerDown: (alias, event) => editable && this.#pointerDown(alias, event),
+          })}
+        </div>
+      </uui-box>
+      <div class="panels">
+        ${stage ? this.#renderStage(stage, editable) : nothing}
+        ${this.#renderSettings(w, editable)}
+      </div>
+    `
+  }
+
+  #renderStage(stage, editable) {
+    const earlier = [...ancestors(this._editing.stages, stage.alias)]
+    const requiredKind = typeof stage.required === 'number' ? 'number' : stage.required
+    return html`<uui-box headline=${`Stage: ${stage.name || stage.alias}`}>
+      <fieldset ?disabled=${!editable}>
+        <label>Name <uui-input label="Name" .value=${stage.name ?? ''} @change=${(e) => {
+          stage.name = e.target.value
+          this.#touch()
+        }}></uui-input></label>
+        <label>Alias <uui-input label="Alias" .value=${stage.alias} @change=${(e) => this.#renameStage(stage, e.target.value)}></uui-input></label>
+        <div class="field"><span>Approved by</span>
+          ${this._list.groups.map(
+            (g) =>
+              html`<label class="check"><input type="checkbox" .checked=${stage.approvers.includes(g.alias)} @change=${(
+                e,
+              ) => {
+                stage.approvers = e.target.checked
+                  ? [...stage.approvers, g.alias]
+                  : stage.approvers.filter((a) => a !== g.alias)
+                this.#touch()
+              }} /> ${g.name}</label>`,
+          )}
+        </div>
+        <label>How many must approve
+          ${select(
+            requiredKind,
+            {
+              one: 'Any one of them',
+              majority: 'A majority',
+              all: 'All of them',
+              number: 'A number of them',
+            },
+            (value) => {
+              stage.required = value === 'number' ? 2 : value
+              this.#touch()
+            },
+          )}
+          ${
+            typeof stage.required === 'number'
+              ? html`<input type="number" min="1" .value=${String(stage.required)} @change=${(
+                  e,
+                ) => {
+                  stage.required = Math.max(1, Number(e.target.value) || 1)
+                  this.#touch()
+                }} />`
+              : nothing
+          }
+        </label>
+        <label>Sending back goes to
+          ${select(
+            stage.sendBack,
+            {
+              editor: 'The editor (the request ends)',
+              ...Object.fromEntries(earlier.map((a) => [a, `The ${a} stage`])),
+            },
+            (value) => {
+              stage.sendBack = value
+              this.#touch()
+            },
+          )}
+        </label>
+        ${
+          editable && this._editing.stages.length > 1
+            ? html`<uui-button look="secondary" color="danger" label="Remove stage" @click=${() => this.#removeStage(stage.alias)}>Remove this stage</uui-button>`
+            : nothing
+        }
+      </fieldset>
+    </uui-box>`
+  }
+
+  #renderSettings(w, editable) {
+    return html`<uui-box headline="Settings">
+      <fieldset ?disabled=${!editable}>
+        <label>Name <uui-input label="Name" .value=${w.name} @change=${(e) => {
+          w.name = e.target.value
+          this.#touch()
+        }}></uui-input></label>
+        <label>Alias <uui-input label="Alias" .value=${w.alias} @change=${(e) => {
+          w.alias = e.target.value.trim()
+          this.#touch()
+        }}></uui-input></label>
+        <div class="field"><span>Covers the pages under</span>
+          <umb-input-document
+            .selection=${w.appliesTo.branches}
+            @change=${(e) => {
+              w.appliesTo.branches = [...(e.target.selection ?? [])]
+              this.#touch()
+            }}
+          ></umb-input-document>
+        </div>
+        <div class="field"><span>And every page of these types</span>
+          ${this._list.contentTypes.map(
+            (t) =>
+              html`<label class="check"><input type="checkbox" .checked=${w.appliesTo.contentTypes.includes(t.alias)} @change=${(
+                e,
+              ) => {
+                w.appliesTo.contentTypes = e.target.checked
+                  ? [...w.appliesTo.contentTypes, t.alias]
+                  : w.appliesTo.contentTypes.filter((a) => a !== t.alias)
+                this.#touch()
+              }} /> ${t.name}</label>`,
+          )}
+        </div>
+        <label class="check"><input type="checkbox" .checked=${w.publishersMaySkip} @change=${(
+          e,
+        ) => {
+          w.publishersMaySkip = e.target.checked
+          this.#touch()
+        }} /> People who may publish can publish directly</label>
+        <label class="check"><input type="checkbox" .checked=${w.unpublish} @change=${(e) => {
+          w.unpublish = e.target.checked
+          this.#touch()
+        }} /> Taking a page down needs approval too</label>
+        <label>When a waiting page is changed ${select(w.onEdit, ON_EDIT, (v) => {
+          w.onEdit = v
+          this.#touch()
+        })}</label>
+        <label>When the person who made the change could approve it ${select(
+          w.selfApproval,
+          SELF,
+          (v) => {
+            w.selfApproval = v
+            this.#touch()
+          },
+        )}</label>
+        <label>Comments ${select(w.comments, COMMENTS, (v) => {
+          w.comments = v
+          this.#touch()
+        })}</label>
+        <label>When this workflow changes, pages waiting on it ${select(
+          w.onChange,
+          ON_CHANGE,
+          (v) => {
+            w.onChange = v
+            this.#touch()
+          },
+        )}</label>
+      </fieldset>
+    </uui-box>`
+  }
+
+  static styles = css`
+    :host { display: block; padding: var(--uui-size-layout-1); }
+    .toolbar { display: flex; flex-wrap: wrap; gap: var(--uui-size-space-3); margin-bottom: var(--uui-size-space-4); }
+    .canvas { overflow: auto; border: 1px dashed var(--uui-color-border); border-radius: 6px; padding: var(--uui-size-space-5); min-height: 200px; touch-action: none; }
+    .panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--uui-size-space-5); margin-top: var(--uui-size-space-5); }
+    fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--uui-size-space-4); }
+    label, .field { display: flex; flex-direction: column; gap: var(--uui-size-space-2); }
+    label.check { flex-direction: row; align-items: center; }
+    .field > span { font-weight: 700; }
+    .hint { opacity: 0.8; font-size: 0.9em; }
+    .message { color: var(--uui-color-warning-emphasis, #9e7300); }
+    .problems { color: var(--uui-color-danger); }
+    .affected { border: 1px solid var(--uui-color-warning); padding: var(--uui-size-space-4); border-radius: 6px; margin-bottom: var(--uui-size-space-4); }
+    ${unsafeCSS(GRAPH_STYLES)}
+  `
+}
+
+customElements.define('crombolo-workflow-designer', CromboloWorkflowDesignerElement)

package/plugin/workflow-graph.js

@@ -0,0 +1,132 @@
+/**
+ * A workflow's stages drawn as boxes and arrows (story 028): read-only on a
+ * page's Workflow tab, and the canvas the designer edits. The graph rules here
+ * mirror `@crombolo/core`'s, which the server applies again on save.
+ */
+import { svg } from '@umbraco-cms/backoffice/external/lit'
+
+export const BOX = { width: 160, height: 56 }
+
+/** Every stage reachable from `alias`. */
+export function descendants(stages, alias) {
+  const byAlias = new Map(stages.map((s) => [s.alias, s]))
+  const found = new Set()
+  const visit = (at) => {
+    for (const next of byAlias.get(at)?.next ?? []) {
+      if (found.has(next)) continue
+      found.add(next)
+      visit(next)
+    }
+  }
+  visit(alias)
+  return found
+}
+
+/** Every stage `alias` can be reached from: where it may send back to. */
+export function ancestors(stages, alias) {
+  const found = new Set()
+  const visit = (at) => {
+    for (const parent of stages.filter((s) => s.next.includes(at))) {
+      if (found.has(parent.alias)) continue
+      found.add(parent.alias)
+      visit(parent.alias)
+    }
+  }
+  visit(alias)
+  return found
+}
+
+export const wouldLoop = (stages, from, to) => from === to || descendants(stages, to).has(from)
+
+/** A position for every stage: its own, or one laid out by depth. */
+export function layout(stages) {
+  const depth = new Map()
+  const starts = stages.filter((s) => !stages.some((o) => o.next.includes(s.alias)))
+  const walk = (stage, d) => {
+    if ((depth.get(stage.alias) ?? -1) >= d) return
+    depth.set(stage.alias, d)
+    for (const next of stage.next) {
+      const child = stages.find((s) => s.alias === next)
+      if (child) walk(child, d + 1)
+    }
+  }
+  for (const start of starts) walk(start, 0)
+  const rows = new Map()
+  return new Map(
+    stages.map((stage) => {
+      if (stage.position) return [stage.alias, stage.position]
+      const d = depth.get(stage.alias) ?? 0
+      const row = rows.get(d) ?? 0
+      rows.set(d, row + 1)
+      return [stage.alias, { x: d * (BOX.width + 80), y: row * (BOX.height + 40) }]
+    }),
+  )
+}
+
+const STATE_FILL = {
+  approved: 'var(--uui-color-positive-standalone, #2bc37c)',
+  waiting: 'var(--uui-color-warning-standalone, #f0ac00)',
+  discarded: 'var(--uui-color-disabled, #ccc)',
+}
+
+/**
+ * The arrows and boxes as SVG. `states` colours each stage by where a request
+ * stands; `selected` outlines one; the callbacks make it a canvas.
+ */
+export function drawGraph(stages, options = {}) {
+  const positions = layout(stages)
+  const at = (alias) => positions.get(alias) ?? { x: 0, y: 0 }
+  const arrows = stages.flatMap((stage) =>
+    stage.next.map((next) => {
+      const a = at(stage.alias)
+      const b = at(next)
+      const x1 = a.x + BOX.width
+      const y1 = a.y + BOX.height / 2
+      const x2 = b.x
+      const y2 = b.y + BOX.height / 2
+      const mid = (x1 + x2) / 2
+      return svg`<path
+        class="arrow"
+        d="M ${x1} ${y1} C ${mid} ${y1}, ${mid} ${y2}, ${x2 - 6} ${y2}"
+        marker-end="url(#crombolo-arrowhead)"
+        @click=${(event) => options.onArrow?.(stage.alias, next, event)}
+      ><title>${stage.alias} → ${next}</title></path>`
+    }),
+  )
+  const boxes = stages.map((stage) => {
+    const p = at(stage.alias)
+    const state = options.states?.[stage.alias]
+    return svg`<g
+      class="stage ${options.selected === stage.alias ? 'selected' : ''}"
+      transform="translate(${p.x}, ${p.y})"
+      @pointerdown=${(event) => options.onPointerDown?.(stage.alias, event)}
+      @click=${(event) => options.onStage?.(stage.alias, event)}
+    >
+      <rect width=${BOX.width} height=${BOX.height} rx="6" fill=${STATE_FILL[state] ?? 'var(--uui-color-surface, #fff)'}></rect>
+      <text x="10" y="22" class="name">${stage.name || stage.alias}</text>
+      <text x="10" y="42" class="detail">${stage.approvers.join(', ') || 'no approvers'}</text>
+    </g>`
+  })
+  const width = Math.max(...[...positions.values()].map((p) => p.x + BOX.width), 0) + 40
+  const height = Math.max(...[...positions.values()].map((p) => p.y + BOX.height), 0) + 40
+  return svg`<svg class="graph" width=${Math.max(width, 320)} height=${Math.max(height, 120)}>
+    <defs>
+      <marker id="crombolo-arrowhead" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
+        <path d="M0,0 L8,4 L0,8 z" fill="currentColor"></path>
+      </marker>
+    </defs>
+    ${arrows}
+    ${boxes}
+  </svg>`
+}
+
+export const GRAPH_STYLES = `
+  .graph { color: var(--uui-color-text, #1b264f); overflow: visible; }
+  .graph .arrow { fill: none; stroke: currentColor; stroke-width: 1.5; cursor: pointer; }
+  .graph .arrow:hover { stroke: var(--uui-color-danger, #d42054); }
+  .graph .stage rect { stroke: var(--uui-color-border, #d8d7d9); stroke-width: 1; }
+  .graph .stage.selected rect { stroke: var(--uui-color-interactive, #3544b1); stroke-width: 2; }
+  .graph .stage { cursor: grab; }
+  .graph .name { font-weight: 700; font-size: 13px; }
+  .graph .detail { font-size: 11px; opacity: 0.8; }
+`

package/plugin/workflow-requests.js

@@ -0,0 +1,151 @@
+/**
+ * The Workflow section's lists (story 028): what waits for the reader's
+ * approval, every request in flight, and those decided. Each row links to the
+ * page, whose Workflow tab is where a request is acted on.
+ */
+import { css, html, LitElement, nothing } from '@umbraco-cms/backoffice/external/lit'
+import { finished, inFlight, waitingForMe } from './workflow-client.js'
+
+const STATE = {
+  waiting: ['warning', 'Waiting'],
+  approved: ['positive', 'Approved'],
+  'sent-back': ['danger', 'Sent back'],
+  withdrawn: ['default', 'Withdrawn'],
+}
+
+const pageLink = (key) => {
+  const base = (document.querySelector('base')?.getAttribute('href') ?? '/umbraco/').replace(
+    /\/$/,
+    '',
+  )
+  return `${base}/section/content/workspace/document/edit/${key}/view/workflow`
+}
+
+class CromboloWorkflowListElement extends LitElement {
+  static properties = {
+    _items: { state: true },
+    _message: { state: true },
+    _total: { state: true },
+    _skip: { state: true },
+  }
+
+  /** Overridden: what this list is, and how it loads. */
+  get headline() {
+    return ''
+  }
+  get empty() {
+    return ''
+  }
+  async fetch(_skip) {
+    return { ok: true, items: [] }
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this._skip = 0
+    this.#load()
+  }
+
+  async #load() {
+    const result = await this.fetch(this._skip)
+    if (!result.ok) {
+      this._message = result.message
+      return
+    }
+    this._items = result.items
+    this._total = result.total
+  }
+
+  render() {
+    if (this._message) return html`<uui-box headline=${this.headline}>${this._message}</uui-box>`
+    if (!this._items)
+      return html`<uui-box headline=${this.headline}><uui-loader></uui-loader></uui-box>`
+    return html`<uui-box headline=${this.headline}>
+      ${
+        this._items.length === 0
+          ? html`<p>${this.empty}</p>`
+          : html`<uui-table>
+              <uui-table-head>
+                <uui-table-head-cell>Page</uui-table-head-cell>
+                <uui-table-head-cell>Workflow</uui-table-head-cell>
+                <uui-table-head-cell>Asked for</uui-table-head-cell>
+                <uui-table-head-cell>Where it stands</uui-table-head-cell>
+                <uui-table-head-cell>Sent</uui-table-head-cell>
+              </uui-table-head>
+              ${this._items.map((item) => {
+                const [color, label] = STATE[item.state] ?? ['default', item.state]
+                const waiting = item.stages.filter((s) => s.state === 'waiting').map((s) => s.alias)
+                return html`<uui-table-row>
+                  <uui-table-cell><a href=${pageLink(item.nodeKey)}>${item.nodeName}</a></uui-table-cell>
+                  <uui-table-cell>${item.workflow.name}</uui-table-cell>
+                  <uui-table-cell>${item.action === 'unpublish' ? 'Taking it down' : 'Publishing'}</uui-table-cell>
+                  <uui-table-cell>
+                    <uui-tag color=${color}>${label}</uui-tag>
+                    ${waiting.length > 0 ? html`<small>at ${waiting.join(', ')}</small>` : nothing}
+                  </uui-table-cell>
+                  <uui-table-cell>${new Date(item.requestedAt).toLocaleString()}</uui-table-cell>
+                </uui-table-row>`
+              })}
+            </uui-table>`
+      }
+      ${
+        this._total !== undefined && this._total > this._items.length + this._skip
+          ? html`<uui-button look="secondary" label="Older" @click=${() => {
+              this._skip += this._items.length
+              this.#load()
+            }}>Older</uui-button>`
+          : nothing
+      }
+    </uui-box>`
+  }
+
+  static styles = css`
+    :host { display: block; padding: var(--uui-size-layout-1); }
+    small { margin-left: var(--uui-size-space-2); opacity: 0.8; }
+  `
+}
+
+customElements.define(
+  'crombolo-workflow-waiting',
+  class extends CromboloWorkflowListElement {
+    get headline() {
+      return 'Waiting for my approval'
+    }
+    get empty() {
+      return 'Nothing is waiting for your approval.'
+    }
+    fetch() {
+      return waitingForMe()
+    }
+  },
+)
+
+customElements.define(
+  'crombolo-workflow-in-flight',
+  class extends CromboloWorkflowListElement {
+    get headline() {
+      return 'In flight'
+    }
+    get empty() {
+      return 'No page is waiting for approval.'
+    }
+    fetch() {
+      return inFlight()
+    }
+  },
+)
+
+customElements.define(
+  'crombolo-workflow-history',
+  class extends CromboloWorkflowListElement {
+    get headline() {
+      return 'Decided'
+    }
+    get empty() {
+      return 'No request has been decided yet.'
+    }
+    fetch(skip) {
+      return finished(skip, 25)
+    }
+  },
+)

package/plugin/workflow-tab.js

@@ -0,0 +1,219 @@
+/**
+ * A page's Workflow tab (story 028): which workflow covers it, where a request
+ * stands in its graph, what the reader may do about it, and its history.
+ *
+ * Sending for approval sends what is saved: the editor saves first, as they
+ * would before publishing.
+ */
+import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document'
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'
+import { css, html, LitElement, nothing, unsafeCSS } from '@umbraco-cms/backoffice/external/lit'
+import { decide, pageApproval, sendForApproval } from './workflow-client.js'
+import { drawGraph, GRAPH_STYLES } from './workflow-graph.js'
+
+const KIND = {
+  sent: 'Sent for approval',
+  approved: 'Approved',
+  'sent-back': 'Sent back',
+  withdrawn: 'Withdrawn',
+  edited: 'Changed while waiting',
+  restarted: 'Started again',
+  published: 'Published',
+  unpublished: 'Taken down',
+}
+const STATE = {
+  waiting: 'Waiting for approval',
+  approved: 'Approved',
+  'sent-back': 'Sent back',
+  withdrawn: 'Withdrawn',
+}
+
+export default class CromboloWorkflowTabElement extends UmbElementMixin(LitElement) {
+  static properties = {
+    _key: { state: true },
+    _data: { state: true },
+    _message: { state: true },
+    _busy: { state: true },
+    _comment: { state: true },
+  }
+
+  constructor() {
+    super()
+    this._comment = ''
+    this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (context) => {
+      if (!context) return
+      this.observe(context.unique, (unique) => {
+        if (!unique || unique === this._key) return
+        this._key = unique
+        this.#load()
+      })
+    })
+  }
+
+  async #load() {
+    const result = await pageApproval(this._key)
+    this._data = result.ok ? result : undefined
+    if (!result.ok) this._message = result.message
+  }
+
+  async #act(run) {
+    this._busy = true
+    this._message = undefined
+    const result = await run()
+    this._busy = false
+    if (!result.ok) {
+      this._message = result.message ?? 'That did not work.'
+      return
+    }
+    this._comment = ''
+    await this.#load()
+  }
+
+  render() {
+    if (!this._data)
+      return html`<uui-box headline="Workflow">${this._message ?? html`<uui-loader></uui-loader>`}</uui-box>`
+    const { workflow, request, past, can } = this._data
+    return html`
+      <uui-box headline=${workflow ? `Workflow: ${workflow.name}` : 'Workflow'}>
+        ${
+          workflow
+            ? html`<p class="lead">
+                ${
+                  can.publishDirectly
+                    ? 'This page is covered by this workflow, and you may publish it directly.'
+                    : 'Publishing this page goes through this workflow.'
+                }
+              </p>`
+            : html`<p class="lead">No workflow covers this page: it publishes as soon as someone who may publish does.</p>`
+        }
+        ${this._message ? html`<p class="message">${this._message}</p>` : nothing}
+        ${request ? this.#renderRequest(request) : workflow ? this.#renderSend(workflow, can) : nothing}
+      </uui-box>
+      ${past.length > 0 ? html`<uui-box headline="Earlier requests">${past.map((r) => this.#renderPast(r))}</uui-box>` : nothing}
+    `
+  }
+
+  #renderSend(workflow, can) {
+    if (!can.send && !can.requestUnpublish) return nothing
+    return html`
+      <div class="graph-wrap">${drawGraph(workflow.stages)}</div>
+      <uui-textarea
+        label="A note for the approvers"
+        placeholder="A note for the approvers (optional)"
+        .value=${this._comment}
+        @input=${(e) => {
+          this._comment = e.target.value
+        }}
+      ></uui-textarea>
+      <div class="actions">
+        ${
+          can.send
+            ? html`<uui-button look="primary" ?disabled=${this._busy} label="Send for approval"
+                @click=${() => this.#act(() => sendForApproval(this._key, 'publish', this._comment))}
+              >Send for approval</uui-button>`
+            : nothing
+        }
+        ${
+          can.requestUnpublish
+            ? html`<uui-button look="secondary" ?disabled=${this._busy} label="Request unpublish"
+                @click=${() => this.#act(() => sendForApproval(this._key, 'unpublish', this._comment))}
+              >Request unpublish</uui-button>`
+            : nothing
+        }
+      </div>
+    `
+  }
+
+  #renderRequest(request) {
+    const states = Object.fromEntries(request.stages.map((s) => [s.alias, s.state]))
+    const progress = request.stages
+      .filter((s) => s.state === 'waiting')
+      .map((s) => `${s.alias}: ${s.approvals} of ${s.needed}`)
+      .join(' · ')
+    return html`
+      <p>
+        <uui-tag color="warning">${STATE[request.state]}</uui-tag>
+        ${request.action === 'unpublish' ? 'To take this page down.' : 'To publish this page.'}
+        ${progress ? html`<small>${progress}</small>` : nothing}
+      </p>
+      <div class="graph-wrap">${drawGraph(request.workflow.stages, { states })}</div>
+      ${
+        request.can.approve.length > 0 || request.can.sendBack.length > 0 || request.can.withdraw
+          ? html`
+              <uui-textarea
+                label="Comment"
+                placeholder=${request.workflow.comments === 'optional' ? 'A comment (optional)' : 'A comment'}
+                .value=${this._comment}
+                @input=${(e) => {
+                  this._comment = e.target.value
+                }}
+              ></uui-textarea>
+              <div class="actions">
+                ${request.can.approve.map(
+                  (
+                    stage,
+                  ) => html`<uui-button look="primary" color="positive" ?disabled=${this._busy}
+                    label="Approve"
+                    @click=${() => this.#act(() => decide(request.key, 'approve', { stage, comment: this._comment }))}
+                  >Approve${request.can.approve.length > 1 ? ` (${stage})` : ''}</uui-button>`,
+                )}
+                ${request.can.sendBack.map(
+                  (
+                    stage,
+                  ) => html`<uui-button look="secondary" color="danger" ?disabled=${this._busy}
+                    label="Send back"
+                    @click=${() => this.#act(() => decide(request.key, 'send-back', { stage, comment: this._comment }))}
+                  >Send back${request.can.sendBack.length > 1 ? ` (${stage})` : ''}</uui-button>`,
+                )}
+                ${
+                  request.can.withdraw
+                    ? html`<uui-button look="secondary" ?disabled=${this._busy} label="Withdraw"
+                        @click=${() => this.#act(() => decide(request.key, 'withdraw', {}))}
+                      >Withdraw</uui-button>`
+                    : nothing
+                }
+              </div>
+            `
+          : nothing
+      }
+      ${this.#renderHistory(request)}
+    `
+  }
+
+  #renderPast(request) {
+    return html`<details>
+      <summary>${STATE[request.state]} — ${new Date(request.requestedAt).toLocaleString()}</summary>
+      ${this.#renderHistory(request)}
+    </details>`
+  }
+
+  #renderHistory(request) {
+    return html`<ol class="history">
+      ${request.history.map(
+        (h) => html`<li>
+          <strong>${KIND[h.kind] ?? h.kind}</strong>
+          ${h.stage ? html`<span>at ${h.stage}</span>` : nothing}
+          <small>${new Date(h.at).toLocaleString()}</small>
+          ${h.comment ? html`<blockquote>${h.comment}</blockquote>` : nothing}
+        </li>`,
+      )}
+    </ol>`
+  }
+
+  static styles = css`
+    :host { display: block; padding: var(--uui-size-layout-1); }
+    uui-box + uui-box { margin-top: var(--uui-size-space-5); }
+    .lead { margin-top: 0; }
+    .message { color: var(--uui-color-danger); }
+    .graph-wrap { overflow-x: auto; margin: var(--uui-size-space-4) 0; }
+    .actions { display: flex; gap: var(--uui-size-space-3); margin: var(--uui-size-space-3) 0; }
+    uui-textarea { width: 100%; }
+    .history { padding-left: var(--uui-size-space-5); }
+    .history li { margin-bottom: var(--uui-size-space-2); }
+    .history small { opacity: 0.7; margin-left: var(--uui-size-space-2); }
+    blockquote { margin: var(--uui-size-space-1) 0 0; padding-left: var(--uui-size-space-3); border-left: 3px solid var(--uui-color-border); }
+    ${unsafeCSS(GRAPH_STYLES)}
+  `
+}
+
+customElements.define('crombolo-workflow-tab', CromboloWorkflowTabElement)