fhirsmith 0.18.1 → 1.0.0

package/ips/render.js

@@ -26,7 +26,25 @@ const { STATUSES } = require('./search');
 const profiles = require('./profiles');
 const { terminologyOf, systemName, describeVersion, linkForSystem, linkForCode, isExternalSystem } = require('./terminology');
 const { issueSummary, checkOf, translationOf } = require('./pipeline');
+const { jurisdiction } = require('./jurisdictions');
+const { SNOMED_LINKABLE_EDITIONS, editionName } = require('../tx/sct/editions');
+const { nationalityText } = require('./nationality');
+
+// the nations there is a flag for (static/assets/images/flags/{code}.svg); any other is the globe
+const FLAGS = new Set(['US', 'AU']);
+
+/** The nation a document is from, as a flag (a black and white globe when it isn't known, or has no flag). */
+function nationalityFlag(result) {
+  const code = result?.jurisdiction || null;
+  const title = result ? nationalityText(result) : 'The nationality has not been determined yet';
+  const src = code && FLAGS.has(code) ? `/assets/images/flags/${code.toLowerCase()}.svg` : '/assets/images/flags/unknown.svg';
+  const alt = code ? (jurisdiction(code)?.display || code) : 'Nationality unknown';
+  return `<img class="ips-flag" src="${src}" alt="${escape(alt)}" title="${escape(title)}"/>`;
+}
 const { dateText } = require('./presenter');
+const { structureTree, flatten } = require('./structure');
+const scripts = require('./scripts');
+const { LOINC } = require('./editor-schema');
 
 const STATUS_COLOURS = {
   submitted: '#6c757d',
@@ -42,6 +60,8 @@ const STYLE = `
   .ips-table td, .ips-table th { vertical-align: top; }
   .ips-json { white-space: pre-wrap; word-break: break-all; font-size: 85%; background: #f8f9fa; padding: 8px; border: 1px solid #dee2e6; font-family: monospace; }
   .ips-banner { background: #ede7f6; border: 1px solid #d1c4e9; border-radius: 4px; padding: 10px 14px; margin-bottom: 10px; }
+  .ips-banner-flagged { display: flex; align-items: center; gap: 14px; }
+  .ips-flag { height: 40px; width: auto; max-width: 80px; border: 1px solid #d1c4e9; flex: none; }
   .ips-banner .ips-patient { font-size: 120%; }
   .ips-banner .ips-project-name { font-size: 130%; }
   .ips-actions-line { margin-bottom: 10px; }
@@ -52,13 +72,27 @@ const STYLE = `
   .ips-banner .ips-facts { font-size: 90%; color: #444; margin-top: 4px; }
   .ips-banner .ips-facts a { margin-left: 4px; }
   .ips-steps { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 10px; font-size: 90%; }
-  .ips-step { display: inline-block; padding: 2px 10px; border-radius: 12px; color: white; white-space: nowrap; cursor: default; }
+  .ips-pipeline { display: flex; flex-wrap: wrap; row-gap: 4px; align-items: stretch; }
+  .ips-step { display: inline-flex; align-items: center; gap: 5px; padding: 3px 14px 3px 20px; margin-right: -8px; color: white; white-space: nowrap; cursor: default;
+    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); }
+  .ips-step:first-child { padding-left: 12px; border-radius: 3px 0 0 3px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
+  a.ips-step { cursor: pointer; color: white; text-decoration: none; }
+  a.ips-step:hover, a.ips-step:focus { color: white; text-decoration: none; filter: brightness(1.15); }
+  .ips-step-received { background: #5e35b1; }
   .ips-step-done { background: #1e7e34; }
   .ips-step-failed { background: #c82333; }
   .ips-step-running { background: #0d6efd; }
   .ips-step-waiting { background: #6c757d; }
-  .ips-steps .ips-actions { margin-left: auto; display: flex; gap: 6px; }
-  .ips-steps .ips-actions .btn { font-size: 90%; padding: 2px 10px; }
+  .ips-step-running .ips-step-icon { display: inline-block; animation: ips-spin 2s linear infinite; }
+  @keyframes ips-spin { to { transform: rotate(360deg); } }
+  .ips-switch { display: inline-flex; margin-bottom: 10px; font-size: 90%; }
+  .ips-switch a { padding: 3px 12px; border: 1px solid #ced4da; color: #444; text-decoration: none; }
+  .ips-switch a + a { border-left: none; }
+  .ips-switch a:first-child { border-radius: 3px 0 0 3px; }
+  .ips-switch a:last-child { border-radius: 0 3px 3px 0; }
+  .ips-switch a.active { background: #5e35b1; border-color: #5e35b1; color: white; }
+  .ips-doc-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
+  .ips-doc-actions .btn { font-size: 90%; padding: 2px 10px; }
   .ips-nav.nav-tabs { margin-bottom: 14px; }
   .ips-nav.nav-tabs > li > a { padding: 6px 14px; }
   .ips-explain { margin-top: 18px; padding-top: 8px; border-top: 1px solid #dee2e6; }
@@ -69,8 +103,9 @@ const STYLE = `
   .ips-filter .ips-btn { font-size: 100%; padding: 1px 10px; line-height: 1.5; }
   .ips-date { white-space: nowrap; }
   .ips-narrative { border: 1px solid #dee2e6; padding: 12px; background: #fff; }
-  .ips-narrative h3 { font-size: 110%; margin-top: 18px; border-bottom: 1px solid #eee; }
-  .ips-narrative h4 { font-size: 100%; margin-top: 12px; }
+  .ips-narrative h3 { font-size: 130%; margin-top: 8px; }
+  .ips-narrative h4 { font-size: 110%; margin-top: 18px; border-bottom: 1px solid #eee; }
+  .ips-narrative h5 { font-size: 100%; margin-top: 12px; }
   .ips-narrative table { border-collapse: collapse; margin-bottom: 8px; }
   .ips-narrative td, .ips-narrative th { border: 1px solid #ddd; padding: 2px 6px; font-size: 90%; }
   .ips-meta { font-size: 85%; color: #555; margin-bottom: 10px; }
@@ -114,6 +149,27 @@ const STYLE = `
   .ips-pf-bad { border-color: #c82333 !important; }
   .ips-pf-rule { width: 100%; table-layout: fixed; }
   .ips-pf-rule td { vertical-align: top; overflow-wrap: anywhere; }
+  .ips-pf-rule .ips-pf-actions { width: 7em; white-space: nowrap; text-align: right; }
+  .ips-pf-rule td.ips-pf-actions { padding-top: 1px; padding-bottom: 1px; }
+  .ips-pf-part-head { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; }
+  .ips-pf-part-head h4 { margin: 0 0 6px; }
+  .ips-pf-part-head .ips-pf-add { font-size: 80%; padding: 0 8px; line-height: 1.6; }
+  .ips-pf-rule .ips-pf-actions .btn { font-size: 75%; padding: 0 5px; line-height: 1.5; border-radius: 3px; vertical-align: baseline; }
+  .ips-pf-how { align-items: center; gap: 8px; margin-top: 6px; } .ips-pf-how input { width: 7em; flex: none; } .ips-pf-how .ips-pf-hint { margin: 0; }
+  .ips-pf-dialog { width: min(760px, 95vw); max-height: 90vh; padding: 0; border: 1px solid #bbb; border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
+  .ips-pf-dialog::backdrop { background: rgba(0,0,0,0.35); }
+  .ips-pf-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid #dee2e6; background: #f8f9fa; }
+  .ips-pf-dialog-head h4 { margin: 0; }
+  .ips-pf-dialog-x { border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: #666; }
+  .ips-pf-dialog-body { padding: 12px 16px; overflow: visible; }
+  .ips-pf-dialog-foot { padding: 10px 16px; border-top: 1px solid #dee2e6; text-align: right; }
+  .ips-pf-field { margin-bottom: 14px; }
+  .ips-pf-field > .ips-pf-label { display: block; font-weight: bold; margin-bottom: 4px; }
+  .ips-pf-field .ips-ed-input, .ips-pf-field textarea { width: 100%; box-sizing: border-box; }
+  .ips-pf-field > * + * { margin-top: 4px; }
+  .ips-pf-field .ips-pf-pair .ips-ed-input { width: auto; flex: 1; }
+  .ips-pf-field .ips-pf-how .ips-ed-input { width: 7em; flex: none; }
+  .ips-pf-hint { font-size: 85%; color: #6c757d; }
   .ips-pf-rule .ips-pf-card-text { white-space: nowrap; }
   .ips-ed-section { border: 1px solid #dee2e6; border-radius: 4px; margin-bottom: 8px; }
   .ips-ed-section-required { border-color: #b8c4e8; }
@@ -154,10 +210,39 @@ const STYLE = `
   .ips-translated { font-size: 80%; color: #fff; background: #6f42c1; border-radius: 3px; padding: 0 5px; cursor: help; }
   .ips-check { font-size: 130%; font-weight: bold; cursor: help; }
   .ips-check-in { color: #1e7e34; }
-  .ips-check-international { color: #fd7e14; }
+  .ips-check-international { color: #a35200; }
   .ips-check-not-in { color: #c82333; }
   .ips-check-unknown { color: #6c757d; }
   .ips-inline { display: inline; }
+  .ips-tree-tools { margin-bottom: 8px; font-size: 90%; }
+  .ips-an { font-size: 90%; }
+  .ips-an > tbody > tr.ips-an-node > td { border-top: 2px solid #dee2e6; background: #f8f9fa; }
+  .ips-an > tbody > tr.ips-an-findings > td { border-top: none; padding: 2px 8px 8px 30px; }
+  .ips-an td.ips-an-path { word-break: break-all; }
+  .ips-an td.ips-an-path img { vertical-align: -3px; }
+  .ips-an tr.ips-tt-seen > td { background-color: #EFEFEF; }
+  .ips-an ul { margin: 0; padding-left: 18px; }
+  .ips-an-modifier { color: #800000; font-weight: bold; }
+  .ips-an-status { color: #000080; font-weight: bold; }
+  .ips-an-subject { color: #006400; font-weight: bold; }
+  .ips-an-attention { color: #b34700; font-weight: bold; }
+  .ips-an-ok { color: #1e7e34; }
+  .ips-an-narrative { color: #3a4d5e; }
+  .ips-an-negation { color: #3a4d5e; }
+  .ips-an-error { color: #c00000; font-weight: bold; }
+  .ips-tree-tools .btn { font-size: 90%; padding: 2px 10px; }
+  .ips-tt { font-size: 90%; width: auto; min-width: 60%; }
+  .ips-tt > thead > tr > th { background: #f0f0f0; font-weight: bold; white-space: nowrap; }
+  .ips-tt > tbody > tr > td { border-top: none; padding: 0 10px 0 4px; line-height: 24px; vertical-align: top; }
+  .ips-tt > tbody > tr > td.ips-tt-path { position: relative; white-space: nowrap; padding-right: 16px; }
+  .ips-tt td.ips-tt-path img { vertical-align: -3px; position: relative; z-index: 1; background: white; }
+  .ips-tt tr.ips-tt-parent:not(.ips-tt-closed) > td.ips-tt-path::after { content: ''; position: absolute; left: var(--ips-tt-down, 8px); top: 18px; bottom: 0; border-left: 1px solid #adb5bd; }
+  .ips-tt-toggle { position: absolute; top: 7px; width: 11px; height: 11px; padding: 0; z-index: 2; border: 1px solid #868e96; background: white; font-size: 9px; line-height: 9px; color: #495057; cursor: pointer; }
+  .ips-tt-toggle::before { content: '\\2212'; }
+  .ips-tt tr.ips-tt-closed .ips-tt-toggle::before { content: '+'; }
+  .ips-tt tr.ips-tt-seen > td { background-color: #EFEFEF; }
+  .ips-tt tr.ips-tt-missing > td:last-child { color: #c82333; }
+  .ips-tt .ips-tt-when { color: #3a4d5e; margin-left: 6px; }
 </style>
 <script>
   // a form with data-confirm asks first: the message is an attribute (escaped as one), never script
@@ -241,6 +326,7 @@ function userBar(ctx) {
     parts.push(`<a href="${base}/admin/projects">Projects</a>`);
     parts.push(`<a href="${base}/admin/users">Users</a>`);
     parts.push(`<a href="${base}/StructureDefinition">Clinical profiles</a>`);
+    parts.push(`<a href="${base}/national-profiles">National profiles</a>`);
   }
   parts.push(`<form method="post" action="${base}/logout" class="ips-inline">${csrfField(ctx.csrf)}<button type="submit" class="btn btn-link" style="padding: 0; font-size: 100%; vertical-align: baseline">Logout</button></form>`);
   return `<div style="float: right; font-size: 85%">${parts.join(' &nbsp;|&nbsp; ')}</div>`;
@@ -272,7 +358,8 @@ function renderHome(projects, ctx) {
   let h = STYLE + userBar(ctx);
   h += '<p>Each project is a collection of International Patient Summary documents, with its own FHIR endpoint ' +
     '(<code>POST</code> / <code>GET {project}/Bundle</code>) and web pages. ' +
-    `<a href="${escape(ctx.base)}/StructureDefinition">Clinical profiles</a> say what kinds of clinical document are expected to contain.</p>`;
+    `<a href="${escape(ctx.base)}/StructureDefinition">Clinical profiles</a> say what kinds of clinical document are expected to contain, and ` +
+    `<a href="${escape(ctx.base)}/national-profiles">national profiles</a> are the IPS document profiles that national implementation guides define.</p>`;
   if (projects.length === 0) {
     return h + '<p>There are no projects yet' + (ctx.user?.isAdmin ? `: <a href="${escape(ctx.base)}/admin/projects">create one</a>` : '') + '.</p>';
   }
@@ -390,7 +477,7 @@ function projectNav(project, ctx) {
 /** The documentation at the foot of a project's page: how to reach it as a FHIR endpoint. */
 function projectDocs(project, ctx) {
   const purl = projectUrl(ctx, project);
-  return '<div class="ips-explain ips-docs"><h4>Documentation</h4>' +
+  return '<div class="ips-explain ips-docs"><h3>Documentation</h3>' +
     `<p>This project is a FHIR endpoint: <code>${purl}</code> (<a href="${purl}/metadata">CapabilityStatement</a>). ` +
     'Documents are IPS Bundles (<code>type: document</code>, a Composition first, with the Patient it refers to) in JSON.</p>' +
     '<table class="table table-sm ips-table ips-api"><tr><th>Request</th><th></th></tr>' +
@@ -447,7 +534,7 @@ function renderProject(project, query, results, search, ctx, problems) {
   const columns = [
     ['_id', 'Id'], ['composition.patient.name', 'Patient'], ['composition.patient.gender', 'Gender'],
     ['composition.patient.birthdate', 'Born'], ['composition.date', 'Date'], ['composition.title', 'Title'],
-    ['processing-status', 'Status'], ['_lastUpdated', 'Received']
+    ['processing-status', 'Status'], ['_lastUpdated', 'Received'], [null, 'Nation']
   ];
   if (ctx.canManage) {
     columns.push([null, '']);
@@ -479,7 +566,8 @@ function renderProject(project, query, results, search, ctx, problems) {
       `<td class="ips-date" title="${escape(r.comp_date || '')}">${escape(dateOnly(r.comp_date))}</td>` +
       `<td>${escape(r.comp_title || '')}</td>` +
       `<td title="${escape(ctx.canManage ? r.status_message || '' : '')}">${badge(r.status)}</td>` +
-      `<td class="ips-date" title="${escape(r.received)}">${escape(dateOnly(r.received))}</td>`;
+      `<td class="ips-date" title="${escape(r.received)}">${escape(dateOnly(r.received))}</td>` +
+      `<td title="${escape(r.nationality ? (jurisdiction(r.nationality)?.display || r.nationality) : 'Not known')}">${escape(r.nationality || '??')}</td>`;
     if (ctx.canManage) {
       h += `<td><form method="post" action="${durl}/delete" class="ips-inline" data-confirm="${escape(`Delete document ${r.id}?`)}">${csrfField(ctx.csrf)}` +
         '<button type="submit" class="btn btn-link" style="padding: 0; font-size: 85%">delete</button></form></td>';
@@ -615,7 +703,7 @@ function aiSettingsHtml(project, ctx, options) {
  * a live element. Serialising closes what was left open, and each narrative is wrapped in
  * its own div.
  */
-function narrativeOf(res) {
+function narrativeOf(res, level) {
   const div = res?.text?.div;
   if (typeof div !== 'string' || div.trim() === '') {
     return null;
@@ -623,18 +711,54 @@ function narrativeOf(res) {
   if (checkNarrative(div)) {
     return '<p class="ips-small"><i>(narrative not shown: it contains active content)</i></p>';
   }
-  return `<div class="ips-narrative-text">${parse5.serialize(parse5.parseFragment(div))}</div>`;
+  return `<div class="ips-narrative-text">${parse5.serialize(seatHeadings(parse5.parseFragment(div), level))}</div>`;
+}
+
+/**
+ * Sit a narrative's headings at the depth the page shows it at: shift them all by the same
+ * amount, so that the narrative's top heading is at `level` and its structure is kept.
+ * Narrative arrives with whatever heading levels its author (or the presenter) chose, and
+ * none of them know that the page is titled with an h2 - an h1 or h2 in a narrative breaks
+ * the page's heading structure (WCAG 1.3.1). Levels that would go past h6 stay at h6.
+ *
+ * @param {Object} fragment - a parse5 fragment, changed in place
+ * @param {number} level - the level the narrative's top heading should be at
+ * @returns {Object} the fragment
+ */
+function seatHeadings(fragment, level) {
+  const headings = [];
+  const walk = (node) => {
+    for (const c of node.childNodes || []) {
+      if (/^h[1-6]$/.test(c.nodeName)) {
+        headings.push(c);
+      }
+      walk(c);
+    }
+  };
+  walk(fragment);
+  if (headings.length === 0) {
+    return fragment;
+  }
+  const shift = level - Math.min(...headings.map(h => Number(h.nodeName[1])));
+  for (const h of headings) {
+    const name = `h${Math.max(1, Math.min(6, Number(h.nodeName[1]) + shift))}`;
+    h.nodeName = name;
+    h.tagName = name;
+  }
+  return fragment;
 }
 
+// The page's title is the template's h2; within the narrative view the document title is an
+// h3, its sections h4, their sections h5, and so on (down to h6)
 function sectionsHtml(sections, level) {
   let h = '';
   for (const s of Array.isArray(sections) ? sections : []) {
     if (!isObject(s)) {
       continue;
     }
-    const tag = level <= 4 ? `h${level}` : 'h5';
+    const tag = `h${Math.min(level, 6)}`;
     h += `<${tag}>${escape(text(s.title) || text(s.code?.text) || '')}</${tag}>`;
-    const n = narrativeOf(s);
+    const n = narrativeOf(s, Math.min(level + 1, 6));
     if (n) {
       h += n;
     } else if (!s.section) {
@@ -656,13 +780,221 @@ function assembledNarrative(bundle) {
   }
   let h = '<div class="ips-narrative">';
   if (text(comp.title)) {
-    h += `<h2>${escape(comp.title)}</h2>`;
+    h += `<h3>${escape(comp.title)}</h3>`;
   }
-  h += narrativeOf(comp) || '';
-  h += sectionsHtml(comp.section, 3);
+  h += narrativeOf(comp, 4) || '';
+  h += sectionsHtml(comp.section, 4);
   return h + '</div>';
 }
 
+// ---- the structure view ----
+
+/** A node's details: what it is, when, and a note (contained, shown at...). */
+function nodeDetails(node) {
+  return [node.what, node.when ? `<span class="ips-tt-when">${node.when}</span>` : '', node.note ? `<i>(${escape(node.note)})</i>` : '']
+    .filter(Boolean).join(' ');
+}
+
+/**
+ * The logical structure of a document (structure.js), as a tree table like the FHIR
+ * specification's. Columns: the path (where the reference is), the type, the id, and what
+ * the resource is and when. A reference that doesn't resolve in the document is shown as
+ * external; a resource expanded elsewhere is shown again, greyed, saying where, and doesn't expand.
+ */
+function renderStructure(bundle) {
+  const top = structureTree(bundle);
+  if (!top) {
+    return '<p><i>The document has no Composition.</i></p>';
+  }
+
+  // the rows: the lines are drawn as the cell's background, so they carry on through rows
+  // that wrap; each level is UNIT px in, and the line to a node's children runs down from
+  // the middle of its icon
+  const UNIT = 20;
+  const LINE = '#adb5bd';
+  let rows = '';
+  let next = 0;
+  function walk(node, depth, parentId, lines, last, hidden) {
+    const id = next++;
+    const bg = [];
+    lines.forEach((on, k) => {
+      if (on) {
+        bg.push([UNIT * k + 10, 0, '1px', '100%']);
+      }
+    });
+    if (depth > 0) {
+      const x = UNIT * (depth - 1) + 10;
+      bg.push([x, 0, '1px', last ? '12px' : '100%']);
+      bg.push([x, 12, `${UNIT - 8}px`, '1px']);
+    }
+    const lineStyle = bg.length === 0 ? '' :
+      `background-image: ${bg.map(() => `linear-gradient(${LINE}, ${LINE})`).join(', ')}; ` +
+      `background-position: ${bg.map(b => `${b[0]}px ${b[1]}px`).join(', ')}; ` +
+      `background-size: ${bg.map(b => `${b[2]} ${b[3]}`).join(', ')}; background-repeat: no-repeat; `;
+    const style = ` style="${lineStyle}padding-left: ${UNIT * depth + 2}px; --ips-tt-down: ${UNIT * depth + 10}px"`;
+    const kids = node.children.length > 0;
+    const closed = kids && !node.open;
+    const cls = [node.kind === 'missing' ? 'ips-tt-missing' : node.kind === 'seen' ? 'ips-tt-seen' : '', kids ? 'ips-tt-parent' : '', closed ? 'ips-tt-closed' : ''].filter(Boolean).join(' ');
+    const toggle = kids && depth > 0 ?
+      `<button type="button" class="ips-tt-toggle" style="left: ${UNIT * (depth - 1) + 5}px" aria-label="Show or hide what ${escape(node.path)} refers to"></button>` : '';
+    const idCell = node.id ? escape(node.id) : (node.kind === 'missing' ? `<code>${escape(node.ref)}</code>` : '');
+    const idTitle = node.ref ? ` title="${escape(`Reference: ${node.ref}`)}"` : '';
+    const details = nodeDetails(node);
+    rows += `<tr data-tt-id="${id}"` + (parentId === null ? '' : ` data-tt-parent="${parentId}"`) + (cls ? ` class="${cls}"` : '') + (hidden ? ' hidden' : '') + '>' +
+      `<td class="ips-tt-path"${style}>${toggle}<img src="/assets/images/icon_${node.icon}.png" alt="" width="16" height="16"/> ${escape(node.path)}</td>` +
+      `<td>${escape(node.type)}</td><td${idTitle}>${idCell}</td><td>${details}</td></tr>`;
+    node.children.forEach((c, i) => {
+      const lastChild = i === node.children.length - 1;
+      walk(c, depth + 1, id, depth === 0 ? [] : [...lines, !last], lastChild, hidden || closed);
+    });
+  }
+  walk(top, 0, null, [], true, false);
+
+  let h = '<div class="ips-tree-tools"><button type="button" class="btn btn-default ips-tt-all" data-open="1">Expand all</button> ' +
+    '<button type="button" class="btn btn-default ips-tt-all" data-open="">Collapse all</button></div>';
+  h += '<noscript><style>.ips-tt tr[hidden] { display: table-row; } .ips-tt-toggle, .ips-tree-tools { display: none; }</style></noscript>';
+  h += '<table class="table table-condensed ips-tt"><thead><tr><th>Path</th><th>Type</th><th>Id</th><th>Details</th></tr></thead><tbody>' + rows + '</tbody></table>';
+  h += `<script>
+(function () {
+  var rows = Array.prototype.slice.call(document.querySelectorAll('.ips-tt tbody tr'));
+  var byId = {};
+  rows.forEach(function (r) { byId[r.getAttribute('data-tt-id')] = r; });
+  // a row shows when its parent shows and is open (rows come parents first)
+  function refresh() {
+    rows.forEach(function (r) {
+      var p = byId[r.getAttribute('data-tt-parent')];
+      r.hidden = !!p && (p.hidden || p.classList.contains('ips-tt-closed'));
+    });
+  }
+  document.querySelectorAll('.ips-tt-toggle').forEach(function (b) {
+    b.addEventListener('click', function () { b.closest('tr').classList.toggle('ips-tt-closed'); refresh(); });
+  });
+  document.querySelectorAll('.ips-tt-all').forEach(function (b) {
+    b.addEventListener('click', function () {
+      var open = !!b.getAttribute('data-open');
+      rows.forEach(function (r) { if (r.getAttribute('data-tt-parent') !== null && r.classList.contains('ips-tt-parent')) { r.classList.toggle('ips-tt-closed', !open); } });
+      refresh();
+    });
+  });
+})();
+</script>`;
+  return h;
+}
+
+// ---- the analysis view ----
+
+/** One finding, as a list item. */
+function findingHtml(f) {
+  if (f.url) {
+    const what = f.kind === 'modifier' ? 'Modifier extension' : 'Extension';
+    // known or not; the definition is on hover
+    const def = f.found ? [text(f.title), text(f.description)].filter(Boolean).join(': ') || 'The definition says nothing about it' : '';
+    const known = f.found ? `<span class="ips-an-known" title="${escape(def)}">known</span>` : '<i>not known</i>';
+    return `<li class="ips-an-${escape(f.kind)}">${what} <code>${escape(f.url)}</code> on <code>${escape(f.path)}</code>: ${known}</li>`;
+  }
+  return `<li class="ips-an-${escape(f.kind)}">${escape(f.text)}</li>`;
+}
+
+/**
+ * Whether the analysis found nothing to say about a node: All OK, and nothing else but the
+ * narrative - which doesn't matter for a resource, but a section without narrative is a problem -
+ * and the Composition's negation (unless there's more than one approach: that's attention).
+ */
+function analysisOk(findings, isSection) {
+  if (!Array.isArray(findings) || !findings.some(f => f && f.kind === 'ok')) {
+    return false;
+  }
+  return findings.every(f => f && (f.kind === 'ok' || f.kind === 'negation' || (f.kind === 'narrative' && !(isSection && f.text === 'No narrative'))));
+}
+
+/**
+ * The analysis view: the document's structure (structure.js) as a flat table - each node's
+ * row as in the structure view, with its full path - and under each resource and section a
+ * row with what the analysis step found (analysis.js).
+ */
+function renderAnalysis(row, options = {}) {
+  const r = row.results?.analysis;
+  if (!r || (r.result.status && r.result.status !== 'done') || !isObject(r.result.items)) {
+    return noResultNote(row, 'analysis', 'There is no analysis of this document', options);
+  }
+  const top = structureTree(row.bundle);
+  if (!top) {
+    return '<p><i>The document has no Composition.</i></p>';
+  }
+  const items = r.result.items;
+  let rows = '';
+  let total = 0;
+  let quiet = 0;
+  const nationality = row.results?.nationality?.result || null;
+  let nationShown = false;
+  for (const [node] of flatten(top)) {
+    // a reference to something not in the document has no rows: there's nothing to analyse
+    if (node.kind === 'missing') {
+      continue;
+    }
+    const cls = node.kind === 'seen' ? ' ips-tt-seen' : '';
+    const idCell = node.id ? escape(node.id) : '';
+    const idTitle = node.ref ? ` title="${escape(`Reference: ${node.ref}`)}"` : '';
+    // nothing to say (or analysed elsewhere): hidden by "Only show problems"
+    const ok = node.kind === 'seen' || analysisOk(items[node.key], String(node.key || '').startsWith('s:'));
+    const okAttr = ok ? ' data-ok="1"' : '';
+    total++;
+    if (ok) {
+      quiet++;
+    }
+    rows += `<tr class="ips-an-node${cls}"${okAttr}><td class="ips-an-path"><img src="/assets/images/icon_${node.icon}.png" alt="" width="16" height="16"/> ${escape(node.fullPath)}</td>` +
+      `<td>${escape(node.type)}</td><td${idTitle}>${idCell}</td><td>${nodeDetails(node)}</td></tr>`;
+    let body;
+    if (node.kind === 'seen') {
+      body = `<i>Analysed at ${escape(node.shownAt)}</i>`;
+    } else if (Array.isArray(items[node.key])) {
+      // the Composition's first bullet: which nation the document is from, and why
+      const nation = node.type === 'Composition' && !nationShown && nationality ? `<li class="ips-an-nation">${escape(nationalityText(nationality))}</li>` : '';
+      if (node.type === 'Composition') {
+        nationShown = true;
+      }
+      body = `<ul>${nation}${items[node.key].map(findingHtml).join('')}</ul>`;
+    } else {
+      body = '<i>Not analysed</i>';
+    }
+    rows += `<tr class="ips-an-findings${cls}"${okAttr}><td colspan="4">${body}</td></tr>`;
+  }
+  let h = `<p class="ips-small">Analysed ${escape(r.made)}` + (typeof r.result.ms === 'number' ? ` in ${escape(String(r.result.ms))} ms` : '') + '</p>';
+  // the choice is remembered in the browser (localStorage); without script, everything shows
+  h += '<style>.ips-an.ips-an-problems tr[data-ok] { display: none; }</style>';
+  h += '<div class="ips-filter mb-2 ips-an-filter" hidden><label><input type="checkbox" id="ips-an-problems"/> Only show problems</label> ' +
+    `<span class="ips-small ips-an-count" hidden>Showing ${total - quiet} of ${total}</span></div>`;
+  h += '<table class="table table-condensed ips-an"><thead><tr><th>Path</th><th>Type</th><th>Id</th><th>Details</th></tr></thead><tbody>' + rows + '</tbody></table>';
+  h += '<div class="ips-explain"><p class="ips-small">What the analysis step found in each resource of the document as submitted, in the order of the structure view, and in the Composition section by section (the Composition\'s first bullet is which nation the document is from, and why - the nationality step): ' +
+    'extensions (with their definitions, from the validator, where it knows them; textLink is left out), <span class="ips-an-modifier">modifier extensions and implicitRules</span>, ' +
+    '<span class="ips-an-status">records that are inactive, entered in error, of unknown status, or missing a status they should have</span>, ' +
+    '<span class="ips-an-subject">a subject that is not the document\'s, or a focus</span>, ' +
+    '<span class="ips-an-attention">dates in the future where none is expected (not period ends, expiry or due dates, schedules, nor appointments, requests and plans that are not over, or events still to come), a Patient\'s links, a Composition that is not final, and a document that uses more than one approach to negation</span>, ' +
+    'a section\'s emptyReason or an author other than its container\'s, whether there is narrative, and - on the Composition - how the document says there is nothing to report (negation): with a section\'s emptyReason (the IPS pattern), with entries whose code says so, like No known allergy (the US Core pattern), or not at all; and <span class="ips-an-error">SNOMED CT codes that do not say which edition they are from, when the nationality of the document is unknown (the International Edition is assumed)</span>. A resource with nothing else to say is All OK. References to resources that are not in the document are left out. ' +
+    'An extension is known when the validator has its definition (hover over "known" to see it). Only show problems hides what is All OK - and, for a resource, whether it has narrative doesn\'t matter, but a section without narrative is a problem.</p></div>';
+  h += `<script>
+(function () {
+  var KEY = 'fhirsmith.ips.analysis.problemsOnly';
+  var box = document.getElementById('ips-an-problems');
+  var table = document.querySelector('.ips-an');
+  var count = document.querySelector('.ips-an-count');
+  if (!box || !table) { return; }
+  box.closest('.ips-an-filter').hidden = false;
+  function apply() {
+    table.classList.toggle('ips-an-problems', box.checked);
+    count.hidden = !box.checked;
+  }
+  try { box.checked = window.localStorage.getItem(KEY) === '1'; } catch (e) { /* no storage: unchecked */ }
+  apply();
+  box.addEventListener('change', function () {
+    try { window.localStorage.setItem(KEY, box.checked ? '1' : '0'); } catch (e) { /* not remembered */ }
+    apply();
+  });
+})();
+</script>`;
+  return h;
+}
+
 // ---- the terminology view ----
 
 /** Text, as a link when there is somewhere to go. */
@@ -836,7 +1168,8 @@ document.querySelectorAll('.ips-copy').forEach(function (b) {
 
 // ---- the validation view ----
 
-const SEVERITY_COLOURS = { fatal: '#c82333', error: '#c82333', warning: '#d39e00', information: '#17a2b8' };
+// badge colours carry white text: each is at least 4.5:1 against it (WCAG 1.4.3)
+const SEVERITY_COLOURS = { fatal: '#c82333', error: '#c82333', warning: '#8a6100', information: '#117a8b' };
 
 /** Where an issue is: its expression (FHIRPath), else its location. */
 function issueWhere(i) {
@@ -882,7 +1215,7 @@ function noResultNote(row, step, what, options = {}) {
 const PROFILE_OUTCOMES = {
   conforms: ['Conforms', '#1e7e34'],
   fails: ['Does not conform', '#c82333'],
-  unknown: ['Could not be fully checked', '#d39e00']
+  unknown: ['Could not be fully checked', '#8a6100']
 };
 
 /**
@@ -925,13 +1258,16 @@ const TRANSLATION_OUTCOMES = {
   'no-translation': ['No translation', '#c82333'],
   failed: ['Failed', '#c82333'],
   'not-needed': ['Not needed', '#6c757d'],
-  'not-checked': ['Not checked', '#fd7e14'],
+  'not-checked': ['Not checked', '#a35200'],
   'no-codings': ['No codings', '#6c757d']
 };
 
 /** A coding, briefly: system|code "display". */
 function briefCoding(c) {
-  return `<code>${escape(`${systemName(c.system) || c.system || ''}|${c.code}`)}</code>` + (typeof c.display === 'string' && c.display ? ` "${escape(c.display)}"` : '');
+  // the version too (for SNOMED CT, the edition): the same code in two editions is two codings
+  const v = describeVersion(c.version);
+  const ver = v.text ? ` <small title="${escape(v.title ? `${v.title} (${c.version})` : c.version)}">[${escape(v.text)}]</small>` : '';
+  return `<code>${escape(`${systemName(c.system) || c.system || ''}|${c.code}`)}</code>${ver}` + (typeof c.display === 'string' && c.display ? ` "${escape(c.display)}"` : '');
 }
 
 /**
@@ -951,6 +1287,11 @@ function renderTranslation(row, options = {}) {
     (typeof v.ms === 'number' ? ` in ${escape(String(v.ms))} ms` : '') + '</p>';
   h += `<p><b>${escape(`${counts.translated || 0} of ${counts.tried || 0} concepts translated (${counts.codings || 0} codings added)`)}` +
     (counts.failed ? escape(`, ${counts.failed} failed`) : '') + '</b></p>';
+  if (v.defaultEdition && v.defaultEdition.edition) {
+    const d = v.defaultEdition;
+    h += `<p class="ips-small">SNOMED CT codes with no version were translated as codes of the ${editionHtml(d.edition)} - the SNOMED CT edition of the national profile ` +
+      `<code>${escape(`${d.packageId}#${d.version}`)}</code>, for ${escape(d.jurisdiction)}, the nation the document is from.</p>`;
+  }
   h += '<table class="table table-sm table-striped ips-table"><tr><th>Element</th><th>Codings</th><th>Value set</th><th>Outcome</th><th>Detail</th></tr>';
   for (const e of v.entries) {
     const [label, colour] = TRANSLATION_OUTCOMES[e.outcome] || [e.outcome || '?', '#6c757d'];
@@ -990,7 +1331,8 @@ function renderGenerated(row, options = {}) {
   if (checkNarrative(v.html)) {
     return h + '<p><i>The generated narrative is not shown: it failed the active content check.</i></p>';
   }
-  h += `<div class="ips-narrative ips-generated">${parse5.serialize(parse5.parseFragment(v.html))}</div>`;
+  // the presenter's narrative is a document of its own (h1 title, h2 sections): seated under the page's h2
+  h += `<div class="ips-narrative ips-generated">${parse5.serialize(seatHeadings(parse5.parseFragment(v.html), 3))}</div>`;
   h += '<div class="ips-explain"><p class="ips-small">The narrative this server generates for the document (the IPS presenter): the Composition\'s header and the patient, ' +
     'then the sections in the IPS order, each a table of its entries with the columns that suit the resource type (the ones no entry fills are left out) and the nested parts as bullets beneath. ' +
     'Coded values show their text, else a display, else what the terminology server knows, else --. It is also written into the analysed copy as the Composition\'s and the sections\' narrative, which is what the validator sees.</p></div>';
@@ -1000,8 +1342,8 @@ function renderGenerated(row, options = {}) {
 const tokens = (n) => (typeof n === 'number' ? n.toLocaleString('en-US') : '?');
 const usd = (n) => (n < 0.01 && n > 0 ? `$${n.toFixed(4)}` : `$${n.toFixed(2)}`);
 
-const AI_SEVERITY_COLOURS = { high: '#c82333', medium: '#d39e00', low: '#17a2b8' };
-const GRADE_COLOURS = { A: '#1e7e34', B: '#5cb85c', C: '#d39e00', D: '#fd7e14', F: '#c82333' };
+const AI_SEVERITY_COLOURS = { high: '#c82333', medium: '#8a6100', low: '#117a8b' };
+const GRADE_COLOURS = { A: '#1e7e34', B: '#4e7d0e', C: '#8a6100', D: '#a35200', F: '#c82333' };
 
 /**
  * The AI assessment view: the grade, the summary, and the findings.
@@ -1032,7 +1374,7 @@ function renderAi(row, options = {}) {
   }
   h += `<p><span class="ips-badge ips-grade" style="background-color: ${GRADE_COLOURS[a.grade] || '#6c757d'}">Grade ${escape(a.grade || '?')}</span> ${escape(a.summary || '')}</p>`;
   const sev = (x) => `<span class="ips-badge" style="background-color: ${AI_SEVERITY_COLOURS[x] || '#6c757d'}">${escape(x)}</span>`;
-  h += '<h4>Consistency and integrity</h4>';
+  h += '<h3>Consistency and integrity</h3>';
   if (a.consistency.length === 0) {
     h += '<p><i>No findings</i></p>';
   } else {
@@ -1048,15 +1390,7 @@ function renderAi(row, options = {}) {
     h += '<table class="table table-sm table-striped ips-table"><tr><th>Severity</th><th>Finding</th><th>Codes</th></tr>' +
       a.terminology.map(x => `<tr><td>${sev(x.severity)}</td><td>${escape(x.finding)}</td><td>${x.codes.map(c => `<code>${escape(c)}</code>`).join('<br/>')}</td></tr>`).join('') + '</table>';
   }
-  h += '<details class="ips-oo"><summary><button type="button" class="btn btn-default ips-btn ips-oo-toggle">Show the model\'s answer</button></summary>' +
-    `<pre class="ips-json">${escape(String(v.raw || ''))}</pre></details>`;
-  h += `<script>
-document.querySelectorAll('.ips-oo-toggle').forEach(function (b) {
-  var d = b.closest('details');
-  b.addEventListener('click', function (e) { e.preventDefault(); d.open = !d.open; });
-  d.addEventListener('toggle', function () { b.textContent = (d.open ? 'Hide' : 'Show') + " the model's answer"; });
-});
-</script>`;
+  h += showHide("the model's answer", `<pre class="ips-json">${escape(String(v.raw || ''))}</pre>`);
   h += '<div class="ips-explain"><p class="ips-small">An AI service\'s assessment of the document (the analysed copy, with the narrative as submitted or without any, as the project\'s settings say): its consistency and integrity as a whole - do its details agree with each other and the overall picture, and is anything missing; with the narrative, what it says that the data does not back up - ' +
     'and its terminology - are the codes consistent with each other and with their text. The grade runs A (consistent and complete) to F (not usable). It is the model\'s opinion, to be read as such.</p></div>';
   return h;
@@ -1074,9 +1408,22 @@ function renderValidation(row, options = {}) {
   if (!r || (r.result.status && r.result.status !== 'done')) {
     return noResultNote(row, 'validation', 'There is no validation result for this document', options);
   }
-  const v = r.result;
+  return validationOutcome(r.made, r.result, { ...options, hidden: { view: 'validation' } });
+}
+
+/**
+ * What the validator made of the document, once: when, with what, the issue counts, the
+ * issues (as filtered by options.level) and the OperationOutcome. The validation view and
+ * each national profile's page show it.
+ * @param {string} made - when the validation was done
+ * @param {{counts?: Object, outcome?: Object, profiles?: string[], validatorVersion?: string, ms?: number}} v
+ * @param {{level?: string, defaultLevel?: string, docUrl?: string, hidden?: Object}} options - hidden: the
+ *   fields the level form keeps (the view, and which national profile); defaultLevel: the level when
+ *   none is asked for ('information' - everything - unless given)
+ */
+function validationOutcome(made, v, options = {}) {
   const counts = v.counts || {};
-  let h = `<p class="ips-small">Validated ${escape(r.made)}` +
+  let h = `<p class="ips-small">Validated ${escape(made)}` +
     (v.validatorVersion ? ` with validator ${escape(String(v.validatorVersion))}` : '') +
     (Array.isArray(v.profiles) && v.profiles.length ? ` against ${v.profiles.map(p => `<code>${escape(p)}</code>`).join(', ')}` : '') +
     (typeof v.ms === 'number' ? ` in ${escape(String(v.ms))} ms` : '') + '</p>';
@@ -1085,11 +1432,13 @@ function renderValidation(row, options = {}) {
   if (all.length === 0) {
     return h;
   }
-  const level = LEVELS.some(([l]) => l === options.level) ? options.level : 'information';
+  // as asked for; else the view's own default (everything, unless it says otherwise)
+  const level = LEVELS.some(([l]) => l === options.level) ? options.level : (options.defaultLevel || 'information');
   const min = SEVERITY_RANK[level];
   const issues = all.filter(i => (SEVERITY_RANK[text(i.severity)] ?? 3) >= min);
   // the minimum level: a form that submits itself on change (and has a button without script)
-  h += `<form method="get" action="${escape(options.docUrl || '')}" class="ips-filter mb-2"><input type="hidden" name="view" value="validation"/>` +
+  const hidden = Object.entries(options.hidden || { view: 'validation' }).map(([k, val]) => `<input type="hidden" name="${escape(k)}" value="${escape(String(val))}"/>`).join('');
+  h += `<form method="get" action="${escape(options.docUrl || '')}" class="ips-filter mb-2">${hidden}` +
     '<label for="f-level">Show</label> <select id="f-level" name="level" onchange="this.form.submit()">' +
     LEVELS.map(([l, label]) => `<option value="${l}"${l === level ? ' selected' : ''}>${escape(label)}</option>`).join('') +
     '</select><noscript><button type="submit" class="btn btn-default ips-btn">Apply</button></noscript>';
@@ -1108,16 +1457,79 @@ function renderValidation(row, options = {}) {
       `<td>${escape(issueMessage(i))}</td></tr>`;
   }
   h += '</table>';
-  // the raw OperationOutcome, behind a button (a <details> for a browser without scripts)
-  h += '<details class="ips-oo"><summary><button type="button" class="btn btn-default ips-btn ips-oo-toggle">Show the OperationOutcome</button></summary>' +
-    `<pre class="ips-json">${escape(JSON.stringify(v.outcome, null, 2))}</pre></details>`;
-  h += `<script>
-document.querySelectorAll('.ips-oo-toggle').forEach(function (b) {
-  var d = b.closest('details');
-  b.addEventListener('click', function (e) { e.preventDefault(); d.open = !d.open; });
-  d.addEventListener('toggle', function () { b.textContent = (d.open ? 'Hide' : 'Show') + ' the OperationOutcome'; });
+  // the raw OperationOutcome, behind a button
+  h += showHide('the OperationOutcome', `<pre class="ips-json">${escape(JSON.stringify(v.outcome, null, 2))}</pre>`);
+  return h;
+}
+
+/**
+ * Content behind a Show / Hide button: a <details> whose summary is styled as the button.
+ * The summary itself is the control - a <button> inside it would be a control nested in a
+ * control, which assistive technology can't make sense of (WCAG 4.1.2) - and it works from
+ * the keyboard and without scripts. The script only changes its label to Hide when it's open.
+ * @param {string} what - what is shown ('the OperationOutcome'), plain text
+ * @param {string} body - the content, HTML
+ */
+function showHide(what, body) {
+  return `<details class="ips-oo" data-what="${escape(what)}"><summary class="btn btn-default ips-btn">Show ${escape(what)}</summary>${body}</details>` +
+    `<script>
+document.querySelectorAll('details.ips-oo:not([data-bound])').forEach(function (d) {
+  d.setAttribute('data-bound', 'true');
+  d.addEventListener('toggle', function () { d.querySelector('summary').textContent = (d.open ? 'Hide ' : 'Show ') + d.getAttribute('data-what'); });
 });
 </script>`;
+}
+
+// a national profile's outcome on the page: [label, colour]
+const NATIONAL_OUTCOMES = {
+  pass: ['Passed', '#1e7e34'],
+  fail: ['Failed', '#c82333'],
+  unknown: ['Not checked', '#8a6100']
+};
+
+/**
+ * The national profiles step's result: the list of national profiles, and whether the
+ * document passed each (no errors); with options.np (an index into the list), that
+ * profile's validation, shown as the validation view shows the base validation.
+ * @param {Object} row - from store.read(), with .results.national or not
+ * @param {{np?: string, level?: string, docUrl?: string, base?: string, canManage?: boolean}} [options]
+ */
+function renderNational(row, options = {}) {
+  const r = row.results?.national;
+  if (!r || (r.result.status && r.result.status !== 'done') || !Array.isArray(r.result.profiles)) {
+    return noResultNote(row, 'national', 'The document has not been validated against the national profiles', options);
+  }
+  const v = r.result;
+  const base = escape(options.base || '');
+  const docUrl = escape(options.docUrl || '');
+  if (v.profiles.length === 0) {
+    return `<p>There were no <a href="${base}/national-profiles">national profiles</a> to validate the document against when it was processed.</p>`;
+  }
+  const outcome = (p) => NATIONAL_OUTCOMES[p.pass === true ? 'pass' : p.pass === false ? 'fail' : 'unknown'];
+  const index = typeof options.np === 'string' && /^\d{1,4}$/.test(options.np) ? parseInt(options.np, 10) : -1;
+  const p = index >= 0 ? v.profiles[index] : null;
+  if (p) {
+    const [label, colour] = outcome(p);
+    let h = `<p class="ips-small"><a href="${docUrl}?view=national">National profiles</a> &raquo; ${escape(`${p.packageId}#${p.version}`)}</p>`;
+    h += `<p>${jurisdictionHtml(p.jurisdiction)}: <code>${escape(p.url)}</code> (${escape(`${p.packageId}#${p.version}`)}): <span class="ips-badge" style="background: ${colour}">${escape(label)}</span></p>`;
+    if (p.pass === null || p.pass === undefined) {
+      return h + `<p><i>The document could not be validated against this profile${options.canManage && p.error ? `: ${escape(p.error)}` : ' (the reason is shown to the project\'s managers)'}.</i></p>`;
+    }
+    return h + validationOutcome(r.made, { counts: p.counts, outcome: p.outcome, profiles: [p.url], validatorVersion: v.validatorVersion, ms: p.ms },
+      // a national profile's issues are mostly about the national IG's own rules: errors only, unless asked
+      { ...options, defaultLevel: 'error', hidden: { view: 'national', np: String(index) } });
+  }
+  let h = '<table class="table table-sm ips-table"><tr><th>Jurisdiction</th><th>Package</th><th>Outcome</th><th>Issues</th></tr>';
+  v.profiles.forEach((np, i) => {
+    const [label, colour] = outcome(np);
+    const issues = np.pass === null || np.pass === undefined ? '<span class="ips-small">(not validated)</span>' : escape(issueSummary(np.counts || {}));
+    h += `<tr><td>${jurisdictionHtml(np.jurisdiction)}</td><td><a href="${docUrl}?view=national&amp;np=${i}"><code>${escape(`${np.packageId}#${np.version}`)}</code></a></td>` +
+      `<td><span class="ips-badge" style="background: ${colour}">${escape(label)}</span></td><td>${issues}</td></tr>`;
+  });
+  h += '</table>';
+  h += `<p class="ips-small">Validated ${escape(r.made)} against the <a href="${base}/national-profiles">national profiles</a> as they were when the document was processed ` +
+    `(${v.profiles.length} profile${v.profiles.length === 1 ? '' : 's'}, ${escape(String(v.ms))} ms); a document passes a profile when the validator reports no errors. ` +
+    'Reprocess the document to validate it against them as they are now.</p>';
   return h;
 }
 
@@ -1139,10 +1551,89 @@ function renderCompose(project, ctx, options) {
   };
   // JSON in a script: </script> and the like must not end the block
   h += `<script>window.IPS_EDITOR = ${JSON.stringify(cfg).replace(/</g, '\\u003c').replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029')};</script>`;
-  h += `<script src="${escape(ctx.base)}/editor.js"></script>`;
+  h += `<script src="${escape(scripts.src(ctx.base, 'editor.js'))}"></script>`;
   return h;
 }
 
+// ---- national profiles -----------------------------------------------------------------
+
+/** A national profile's jurisdiction, for the page: its code, and the country's or region's name. */
+function jurisdictionHtml(code) {
+  if (!code) {
+    return '<span class="ips-small">(not given)</span>';
+  }
+  const j = jurisdiction(code);
+  return `<code>${escape(code)}</code>` + (j ? ` ${escape(j.display)}` : '');
+}
+
+/** A SNOMED CT edition by name, with its module id on hover; '' for none. */
+function editionHtml(edition) {
+  if (!edition) {
+    return '';
+  }
+  return `<span title="${escape(`http://snomed.info/sct/${edition}`)}">${escape(editionName(edition) || edition)}</span>`;
+}
+
+/** The SNOMED CT edition select for a national profile: none, or one of the editions. */
+function editionSelect(form, edition) {
+  let h = `<select form="${form}" name="snomedEdition" class="form-control" style="font-size: 85%; width: 14em" title="The SNOMED CT edition the IG takes for granted, if any">` +
+    `<option value=""${edition ? '' : ' selected'}>(none)</option>`;
+  for (const ed of SNOMED_LINKABLE_EDITIONS) {
+    h += `<option value="${escape(ed)}"${ed === edition ? ' selected' : ''}>${escape(editionName(ed) || ed)}</option>`;
+  }
+  return h + '</select>';
+}
+
+/**
+ * The national profiles: for each, the national IG's package (id and version), the url of
+ * its profile on Bundle, and the SNOMED CT edition it takes for granted (if any). Everyone sees the list; the administrator adds, edits and deletes.
+ * @param {Array} list - from store.nationalProfiles()
+ */
+function renderNationalProfiles(list, ctx, message) {
+  const base = escape(ctx.base);
+  const isAdmin = !!ctx.user?.isAdmin;
+  let h = STYLE + userBar(ctx) + `<p class="ips-small"><a href="${base}">IPS projects</a> &raquo; National profiles</p>` + alert(message);
+  h += '<div class="ips-banner"><b class="ips-project-name">National profiles</b></div>';
+  h += '<p>A national profile is the profile a national implementation guide defines for an IPS document: the country or region it is for, the IG\'s package (its id and version), ' +
+    'the canonical URL of its profile on Bundle, and the SNOMED CT edition the IG takes for granted (if it uses SNOMED CT). They apply across all projects.' + (isAdmin ? '' : ' Only the administrator can change them.') + '</p>';
+  if (list.length === 0) {
+    h += '<p>There are no national profiles yet.</p>';
+  }
+  if (!isAdmin) {
+    if (list.length === 0) {
+      return h;
+    }
+    h += '<table class="table table-sm table-striped ips-table"><tr><th>Jurisdiction</th><th>Package</th><th>Version</th><th>Profile on Bundle</th><th>SNOMED CT Edition</th></tr>';
+    for (const np of list) {
+      h += `<tr><td>${jurisdictionHtml(np.jurisdiction)}</td><td><code>${escape(np.packageId)}</code></td><td>${escape(np.version)}</td><td><code>${escape(np.url)}</code></td><td>${editionHtml(np.snomedEdition)}</td></tr>`;
+    }
+    return h + '</table>';
+  }
+  const fields = (form, np) =>
+    `<td><input form="${form}" type="text" name="jurisdiction" required class="form-control" style="font-size: 85%; width: 6em" placeholder="AU, or 150" ` +
+    `title="A country's ISO 3166 two-letter code, or a region's UN M49 three-digit code" value="${escape(np ? (np.jurisdiction || '') : '')}"/>` +
+    (np && np.jurisdiction && jurisdiction(np.jurisdiction) ? `<span class="ips-small">${escape(jurisdiction(np.jurisdiction).display)}</span>` : '') + '</td>' +
+    `<td><input form="${form}" type="text" name="packageId" required class="form-control" style="font-size: 85%; width: 15em" placeholder="e.g. hl7.fhir.au.ips" value="${escape(np ? np.packageId : '')}"/></td>` +
+    `<td><input form="${form}" type="text" name="version" required class="form-control" style="font-size: 85%; width: 8em" placeholder="version" value="${escape(np ? np.version : '')}"/></td>` +
+    `<td><input form="${form}" type="url" name="url" required class="form-control" style="font-size: 85%; width: 100%; min-width: 30em" placeholder="url of the profile on Bundle" value="${escape(np ? np.url : '')}"/></td>` +
+    `<td>${editionSelect(form, np ? np.snomedEdition : null)}</td>`;
+  // the package id and version are short; the url takes the rest of the row
+  h += '<table class="table table-sm ips-table"><tr><th>Jurisdiction</th><th>Package</th><th>Version</th><th style="width: 100%">Profile on Bundle</th><th>SNOMED CT Edition</th><th></th></tr>';
+  for (const np of list) {
+    const form = `np-${np.id}`;
+    const action = `${base}/national-profiles/${np.id}`;
+    h += '<tr>' + fields(form, np) +
+      `<td style="white-space: nowrap"><form id="${form}" method="post" action="${action}" class="ips-inline">${csrfField(ctx.csrf)}` +
+      '<button type="submit" class="btn btn-primary ips-btn" style="font-size: 85%; padding: 1px 10px">Save</button></form> ' +
+      `<form method="post" action="${action}/delete" class="ips-inline" data-confirm="${escape(`Delete the national profile for ${np.packageId}#${np.version}?`)}">${csrfField(ctx.csrf)}` +
+      '<button type="submit" class="btn btn-default ips-btn" style="font-size: 85%; padding: 1px 10px">Delete</button></form></td></tr>';
+  }
+  h += '<tr>' + fields('np-new', null) +
+    `<td><form id="np-new" method="post" action="${base}/national-profiles">${csrfField(ctx.csrf)}` +
+    '<button type="submit" class="btn btn-primary ips-btn" style="font-size: 85%; padding: 1px 10px">Add</button></form></td></tr>';
+  return h + '</table>';
+}
+
 // ---- clinical profiles -----------------------------------------------------------------
 
 function profileCrumbs(ctx, extra) {
@@ -1201,63 +1692,180 @@ function renderProfiles(list, ctx) {
 // the parts of a profile, as the view and the editor show them
 const PROFILE_PARTS = [['section', 'Required sections and entries'], ['resource', 'Rules about resources'], ['other', 'Other rules']];
 
-/** One rule of a profile, for reading: the shape as words, or the expression. */
-function ruleHtml(expression, titleOf) {
-  const rshape = profiles.parseResourceShape(expression);
-  if (rshape) {
-    const d = profiles.describeResource(rshape, titleOf);
-    const which = d.valueSet !== undefined
-      ? `with a code in the value set <b>${escape(d.title || d.valueSet)}</b>${d.title ? ` <span class="ips-small">(${escape(d.valueSet)})</span>` : ''}`
-      : `with the code <b>${escape(d.code)}</b>`;
-    return `${d.type ? `<b>${escape(d.type)}</b> resources` : 'Resources'} ${which}: <code>${escape(d.rest)}</code>` +
-      `<div class="ips-pf-expr">${escape(expression)}</div>`;
-  }
-  const shape = profiles.parseShape(expression);
-  if (!shape) {
-    return `<code>${escape(expression)}</code>`;
-  }
-  const part = (p, isSection) => {
-    const d = profiles.describePart(p, isSection, titleOf);
-    return `<b>${escape(d.what)}</b>${d.code ? ` <span class="ips-small">(${escape(d.code)})</span>` : ''}` +
-      (d.card ? ` <span class="ips-pf-card-text">[${escape(d.card)}]</span>` : '');
-  };
-  const entry = !shape.entry ? '' : (shape.entry.valueSet !== undefined ? ', with entries in the value set ' : ', with an entry ') + part(shape.entry, false);
-  return 'Section ' + part(shape.section, true) + entry + `<div class="ips-pf-expr">${escape(expression)}</div>`;
+// the code systems for the categories of the resources in an IPS, for a rule's category
+const CATEGORY_SYSTEMS = [
+  { url: 'http://terminology.hl7.org/CodeSystem/condition-category', name: 'Condition category' },
+  { url: 'http://terminology.hl7.org/CodeSystem/observation-category', name: 'Observation category' },
+  { url: 'http://terminology.hl7.org/CodeSystem/medicationrequest-category', name: 'MedicationRequest category' }
+];
+
+/** A cardinality, for the profile's page: " [m..n]", unless it is unstated or 1..1. */
+function cardSuffix(p) {
+  return p.min === null || p.min === undefined || (p.min === 1 && p.max === 1) ? '' : ` [${p.min}..${p.max}]`;
+}
+
+/** The name of a code system, when it has one we know, or its URL. */
+function profileSystemName(url) {
+  const sys = profiles.SYSTEMS.find(s => s.url === url);
+  return sys ? sys.name : (systemName(url) || url);
+}
+
+/** The Section and Entry columns of a required section/entry row. */
+function sectionColumns(shape, titleOf) {
+  const s = shape.section;
+  const named = s.system === LOINC ? profiles.IPS_SECTIONS.find(x => x.code === s.code) : null;
+  const section = (named
+    ? `${escape(named.title)} <span class="ips-small">(${escape(`${profileSystemName(s.system)}|${s.code}`)})</span>`
+    : escape(`${profileSystemName(s.system)}|${s.code}`)) + escape(cardSuffix(s));
+  const e = shape.entry;
+  let entry = '';
+  if (e && e.valueSet !== undefined) {
+    const title = typeof titleOf === 'function' ? titleOf(e.valueSet) : null;
+    entry = `Code is in <b>${escape(title || e.valueSet)}</b>` + (title ? ` <span class="ips-small">(${escape(e.valueSet)})</span>` : '') + escape(cardSuffix(e));
+  } else if (e) {
+    entry = `Code is <b>${escape(`${profileSystemName(e.system)}|${e.code}`)}</b>` + escape(cardSuffix(e));
+  }
+  return [section, entry];
 }
 
-/** A clinical profile, read-only (the administrator gets edit and delete). */
-function renderProfile(sd, ctx) {
+/** The resources a rule is about, as a plural: MedicationAdministrations, or Any resource. */
+function resourceTypePlural(type) {
+  if (!type) {
+    return 'Any resource';
+  }
+  return /[^aeiou]y$/.test(type) ? `${type.slice(0, -1)}ies` : `${type}s`;
+}
+
+// the tails of a rule about resources that are said in words: each of the patterns, as it
+// is, or (where a resource at a time is what is meant) inside .all(...)
+const STR_ARG = "\\s*'((?:[^'\\\\]|\\\\.)*)'\\s*";
+const NAME = '[A-Za-z][A-Za-z0-9_]*';
+const allOf = (body) => new RegExp(`^\\.\\s*(?:${body}|all\\s*\\(\\s*${body}\\s*\\))$`);
+const TAILS = [
+  [/^\.\s*exists\s*\(\s*\)$/, () => 'Must be present somewhere'],
+  [/^\.\s*all\s*\(\s*sameSubject\s*\(\s*\)\s*\)$/, () => 'Patient must match the Document'],
+  [allOf(`conformsTo\\s*\\(${STR_ARG}\\)`), (m, ctx) => {
+    const url = unescapeArg(m[1] !== undefined ? m[1] : m[2]);
+    const title = typeof ctx.profileTitle === 'function' ? ctx.profileTitle(url) : null;
+    return `Conform to <b>${escape(title || url)}</b>` + (title ? ` <span class="ips-small">(${escape(url)})</span>` : '');
+  }],
+  [allOf(`category\\s*\\.\\s*hasCoding\\s*\\(${STR_ARG},${STR_ARG}(?:,${STR_ARG})?\\)`), (m) => {
+    const [system, code, version] = (m[1] !== undefined ? [m[1], m[2], m[3]] : [m[4], m[5], m[6]]).map(x => x === undefined ? undefined : unescapeArg(x));
+    return `Has category <b>${escape(`${profileSystemName(system)}|${code}`)}</b>` + (version !== undefined ? ` <span class="ips-small">(version ${escape(version)})</span>` : '');
+  }],
+  // an element, or an element's element (no deeper): Must have an x, Must have an x.y
+  [new RegExp(`^\\.\\s*(${NAME})\\s*(?:\\.\\s*(${NAME})\\s*)?\\.\\s*exists\\s*\\(\\s*\\)$`), (m) => {
+    const path = m[2] ? `${m[1]}.${m[2]}` : m[1];
+    return `Must have ${/^[aeiou]/i.test(path) ? 'an' : 'a'} <code>${escape(path)}</code>`;
+  }]
+];
+
+/** A FHIRPath string's content, unescaped. */
+function unescapeArg(s) {
+  return s.replace(/\\(u[0-9a-fA-F]{4}|.)/g, (x, c) => c.length === 5 ? String.fromCharCode(parseInt(c.substring(1), 16)) : ({ n: '\n', r: '\r', t: '\t', f: '\f' }[c] || c));
+}
+
+/** The Resource Set and Rule columns of a rule about resources. */
+function resourceColumns(rshape, ctx) {
+  const titleOf = ctx.valueSetTitle;
+  let which;
+  if (rshape.valueSet !== undefined) {
+    const title = typeof titleOf === 'function' ? titleOf(rshape.valueSet) : null;
+    which = `Code is in <b>${escape(title || rshape.valueSet)}</b>` + (title ? ` <span class="ips-small">(${escape(rshape.valueSet)})</span>` : '');
+  } else {
+    which = `Code is <b>${escape(`${profileSystemName(rshape.system)}|${rshape.code}`)}</b>`;
+  }
+  const set = `${escape(resourceTypePlural(rshape.type))} where ${which}`;
+  const rest = rshape.rest.trim();
+  for (const [re, words] of TAILS) {
+    const m = re.exec(rest);
+    if (m) {
+      return [set, words(m, ctx)];
+    }
+  }
+  return [set, `<code>${escape(rest)}</code>`];
+}
+
+/**
+ * A clinical profile: the same page for everyone. The administrator also gets add, edit and
+ * delete on each row (a row at a time, the script edits it in place), and the full editor.
+ */
+function renderProfile(sd, ctx, editor = null) {
   const base = escape(ctx.base);
   const url = `${base}/StructureDefinition/${escape(sd.id)}`;
+  const admin = !!(editor && ctx.user?.isAdmin);
   let h = STYLE + userBar(ctx) + profileCrumbs(ctx, sd.title);
   h += `<div class="ips-banner"><b class="ips-project-name">${escape(sd.title)}</b>` +
     `<div class="ips-facts">Clinical profile on Bundle &nbsp;&middot;&nbsp; <code>${escape(sd.url)}</code> &nbsp;&middot;&nbsp; updated ${escape(dateOnly(sd.date))}</div></div>`;
   h += '<div class="ips-actions-line">' +
     `<a class="btn btn-default" href="${url}?download=1">Download JSON</a>` +
-    (ctx.user?.isAdmin ? ` <a class="btn btn-primary" href="${url}/edit">Edit</a> ` +
+    (admin ? ` <a class="btn btn-default" href="${url}/edit">Edit all</a> ` +
       `<form method="post" action="${url}/delete" class="ips-inline" data-confirm="${escape(`Delete the clinical profile ${sd.title}?`)}">${csrfField(ctx.csrf)}` +
-      '<button type="submit" class="btn btn-default">Delete</button></form>' : '') + '</div>';
-  const constraints = sd.differential?.element?.[0]?.constraint || [];
-  if (constraints.length === 0) {
-    h += '<p>This profile has no constraints yet.</p>';
-  } else {
-    for (const [kind, heading] of PROFILE_PARTS) {
-      const these = constraints.filter(c => profiles.kindOf(c.expression || '') === kind);
-      if (!these.length) {
-        continue;
+      '<button type="submit" class="btn btn-default">Delete profile</button></form>' : '') + '</div>';
+  const constraints = (sd.differential?.element?.[0]?.constraint || []).filter(c => c && typeof c === 'object');
+  // the actions on a row, for the administrator
+  const actions = (c) => !admin ? '' : '<td class="ips-pf-actions">' +
+    '<button type="button" class="btn btn-default ips-btn ips-pf-edit">Edit</button> ' +
+    `<form method="post" action="${url}/constraint/${escape(c.key || '')}/delete" class="ips-inline" data-confirm="${escape(`Delete the rule '${c.human || c.key}'?`)}">${csrfField(ctx.csrf)}` +
+    '<button type="submit" class="btn btn-default ips-btn">Delete</button></form></td>';
+  const rowAttrs = (c) => (admin ? ` data-key="${escape(c.key || '')}"` : '') + ` title="${escape(c.expression || '')}"`;
+  const actionsHead = admin ? '<th class="ips-pf-actions"></th>' : '';
+  const ADD = { section: 'Add a required section/entry', resource: 'Add a rule about resources', other: 'Add another rule' };
+  for (const [kind, heading] of PROFILE_PARTS) {
+    const these = constraints.filter(c => profiles.kindOf(c.expression || '') === kind);
+    if (!these.length && !admin) {
+      continue;
+    }
+    // the heading, and for the administrator the part's Add button, to its right
+    h += `<div class="ips-pf-part-head"><h4>${escape(heading)}</h4>` +
+      (admin ? `<button type="button" class="btn btn-default ips-pf-add" data-part="${kind}">${escape(ADD[kind])}</button>` : '') + '</div>';
+    if (kind === 'section') {
+      h += `<table class="table table-sm ips-table ips-pf-rule" data-part="${kind}"><tr><th style="width: 40%">Expectation</th><th>Section</th><th>Entry</th>${actionsHead}</tr>`;
+      for (const c of these) {
+        const [section, entry] = sectionColumns(profiles.parseShape(c.expression || ''), ctx.valueSetTitle);
+        h += `<tr${rowAttrs(c)}><td>${escape(c.human || '')}</td><td>${section}</td><td>${entry}</td>${actions(c)}</tr>`;
+      }
+    } else if (kind === 'resource') {
+      h += `<table class="table table-sm ips-table ips-pf-rule" data-part="${kind}"><tr><th style="width: 40%">Expectation</th><th>Resource Set</th><th>Rule</th>${actionsHead}</tr>`;
+      for (const c of these) {
+        const [set, rule] = resourceColumns(profiles.parseResourceShape(c.expression || ''), ctx);
+        h += `<tr${rowAttrs(c)}><td>${escape(c.human || '')}</td><td>${set}</td><td>${rule}</td>${actions(c)}</tr>`;
       }
-      h += `<h4>${escape(heading)}</h4><table class="table table-sm ips-table ips-pf-rule"><tr><th style="width: 35%">Expectation</th><th>Rule</th></tr>`;
+    } else {
+      h += `<table class="table table-sm ips-table ips-pf-rule" data-part="${kind}"><tr><th style="width: 35%">Expectation</th><th>Rule</th>${actionsHead}</tr>`;
       for (const c of these) {
-        h += `<tr><td>${escape(c.human || '')}</td><td>${ruleHtml(c.expression || '', ctx.valueSetTitle)}</td></tr>`;
+        h += `<tr${rowAttrs(c)}><td>${escape(c.human || '')}</td><td><code>${escape(c.expression || '')}</code></td>${actions(c)}</tr>`;
       }
-      h += '</table>';
     }
+    h += '</table>';
+  }
+  if (constraints.length === 0 && !admin) {
+    h += '<p>This profile has no constraints yet.</p>';
   }
   h += '<p class="ips-small">Each rule is checked against the document (the Bundle). <code>section(system, code, min, max)</code> finds the sections of the document\'s Composition ' +
     '(nested ones too) with that code, when there are min..max of them; <code>entry(system, code, min, max)</code> finds a section\'s entries with that code ' +
     '(their <code>code</code>, <code>medicationCodeableConcept</code> or <code>vaccineCode</code>), when there are min..max of them; ' +
     '<code>resources(system, code, type)</code> finds the resources in the document with that code (of that type, when one is given); ' +
-    '<code>entryIn(valueSet, min, max)</code> and <code>resourcesIn(valueSet, type)</code> are the same with a code in a value set, asked of the terminology server.</p>';
+    '<code>entryIn(valueSet, min, max)</code> and <code>resourcesIn(valueSet, type)</code> are the same with a code in a value set, asked of the terminology server. ' +
+    'A cardinality <code>[m..n]</code> after a section or an entry is how many there may be; with none, there must be at least one.</p>';
+  if (admin) {
+    const cfg = {
+      mode: 'rows', profile: { id: sd.id, title: sd.title, constraints: editor.constraints },
+      sections: editor.sections, systems: editor.systems, resourceTypes: editor.resourceTypes, sectionSystem: editor.sectionSystem, csrf: ctx.csrf || '',
+      parts: PROFILE_PARTS,
+      urls: {
+        constraint: `${ctx.base}/StructureDefinition/${sd.id}/constraint`,
+        lookup: editor.canLookup ? `${ctx.base}/lookup` : null,
+        lookupVs: `${ctx.base}/lookup-vs`
+      },
+      // the code systems offered for a resource's category, first the default
+      categorySystem: CATEGORY_SYSTEMS[0].url,
+      categorySystems: CATEGORY_SYSTEMS
+    };
+    h += '<div id="ips-profile-editor"></div>';
+    h += `<script>window.IPS_PROFILE = ${JSON.stringify(cfg).replace(/</g, '\\u003c').replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029')};</script>`;
+    h += `<script src="${escape(scripts.src(ctx.base, 'profile-editor.js'))}"></script>`;
+  }
   return h;
 }
 
@@ -1286,7 +1894,7 @@ function renderProfileEditor(sd, ctx, options) {
     }
   };
   h += `<script>window.IPS_PROFILE = ${JSON.stringify(cfg).replace(/</g, '\\u003c').replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029')};</script>`;
-  h += `<script src="${escape(base)}/profile-editor.js"></script>`;
+  h += `<script src="${escape(scripts.src(base, 'profile-editor.js'))}"></script>`;
   return h;
 }
 
@@ -1356,18 +1964,40 @@ function sharePanelScript() {
 </script>`;
 }
 
-// the views of a document; more come later
+// the views of a document, as tabs
 const VIEWS = [
   ['narrative', 'Narrative'],
+  ['structure', 'Structure'],
+  ['analysis', 'Analysis'],
   ['translation', 'Translation'],
-  ['generated', 'Generated Narrative'],
-  ['validation', 'Validation'],
   ['terminology', 'Terminology'],
+  ['validation', 'Validation'],
+  ['national', 'National Profiles'],
   ['profiles', 'Clinical Profiles'],
   ['ai', 'AI Assessment'],
-  ['json', 'JSON']
+  ['source', 'Source']
 ];
 
+// views that were tabs once, so old links still land: generated is now the narrative
+// tab's switch, json is now source
+const VIEW_ALIASES = {
+  generated: { view: 'narrative', narrative: 'generated' },
+  json: { view: 'source' }
+};
+
+/**
+ * The view a request asks for (?view=, and ?narrative= for the narrative tab's switch):
+ * the default when it names none we know.
+ * @returns {{view: string, narrative: string}} narrative is 'provided' or 'generated'
+ */
+function viewOf(query = {}) {
+  const v = typeof query.view === 'string' ? query.view : '';
+  const alias = VIEW_ALIASES[v];
+  const view = alias ? alias.view : VIEWS.some(([k]) => k === v) ? v : VIEWS[0][0];
+  const narrative = alias?.narrative || (query.narrative === 'generated' ? 'generated' : 'provided');
+  return { view, narrative };
+}
+
 /**
  * A document.
  * @param {Object} project
@@ -1400,16 +2030,36 @@ function stepState(row, step) {
   return { state: 'waiting', message: null };
 }
 
-function stepsHtml(row, ctx) {
-  let h = '';
+// each step as the pipeline shows it, and the view that shows its work (as a query)
+const STEP_LABELS = {
+  nationality: ['Nationality', 'view=analysis'],
+  analysis: ['Analysis', 'view=analysis'],
+  translate: ['Translate', 'view=translation'],
+  narrative: ['Narrative', 'view=narrative&narrative=generated'],
+  validation: ['Validation', 'view=validation'],
+  national: ['National Profiles', 'view=national'],
+  terminology: ['Terminology', 'view=terminology'],
+  profiles: ['Clinical Profiles', 'view=profiles'],
+  ai: ['AI Assessment', 'view=ai']
+};
+
+/**
+ * The processing pipeline as one connected line: the document's receipt, then each step
+ * in the order they run, each coloured by where it is and linked to the view of its work.
+ */
+function stepsHtml(row, ctx, durl) {
+  let h = `<span class="ips-step ips-step-received" title="${escape(`received ${row.received} (${row.source})`)}">Received</span>`;
   for (const step of ctx.steps || []) {
     const { state, message } = stepState(row, step);
     const [, symbol, word] = STEP_STATES[state];
     // a failure's reason can name the inside of the server: for managers
     const detail = message && (state !== 'failed' || ctx.canManage) ? `: ${message}` : '';
-    h += `<span class="ips-step ips-step-${state}" title="${escape(`${step} - ${word}${detail}`)}">${symbol} ${escape(step)}</span>`;
+    const [label, query] = STEP_LABELS[step] || [step, null];
+    const attrs = `class="ips-step ips-step-${state}" title="${escape(`${step} - ${word}${detail}`)}"`;
+    const inner = `<span class="ips-step-icon">${symbol}</span> ${escape(label)}`;
+    h += query && durl ? `<a ${attrs} href="${escape(`${durl}?${query}`)}">${inner}</a>` : `<span ${attrs}>${inner}</span>`;
   }
-  return h;
+  return `<div class="ips-pipeline">${h}</div>`;
 }
 
 function renderDocument(project, row, view, ctx) {
@@ -1417,8 +2067,8 @@ function renderDocument(project, row, view, ctx) {
   const durl = `${purl}/Bundle/${row.id}`;
   let h = STYLE + userBar(ctx) + crumbs(ctx, project, `Document ${row.id}`);
 
-  // the banner: who and what
-  h += '<div class="ips-banner">';
+  // the banner: where from (a flag), who and what
+  h += '<div class="ips-banner ips-banner-flagged">' + nationalityFlag(row.results?.nationality?.result) + '<div>';
   h += `<div class="ips-patient"><b>${escape(row.patient_name || '(no name)')}</b>` +
     (row.patient_gender ? `, ${escape(row.patient_gender)}` : '') +
     (row.patient_birth ? `, born ${escape(row.patient_birth)}` : '') + '</div>';
@@ -1426,13 +2076,14 @@ function renderDocument(project, row, view, ctx) {
     (row.comp_date ? `Document date ${escape(row.comp_date)} &nbsp;|&nbsp; ` : '') +
     `Received ${escape(row.received)} (${escape(row.source)}) &nbsp;|&nbsp; ${row.size.toLocaleString()} bytes` +
     ` &nbsp;|&nbsp; <a href="${durl}?_format=json">FHIR JSON</a> &nbsp;|&nbsp; <a href="${durl}?download=1">Download</a></div>`;
-  h += '</div>';
+  h += '</div></div>';
 
-  // the steps, and what can be done
-  h += '<div class="ips-steps">' + stepsHtml(row, ctx);
+  // the steps, then (on a line of their own) what can be done
+  h += '<div class="ips-steps">' + stepsHtml(row, ctx, durl) + '</div>';
   {
-    h += '<span class="ips-actions">';
-    h += `<a class="btn btn-default" href="${purl}/compose?from=${row.id}" title="Open this document in the editor; submitting makes a new document">Edit</a>`;
+    h += '<div class="ips-doc-actions">';
+    // a form like the others, so it looks like them
+    h += `<form method="get" action="${purl}/compose" class="ips-inline"><input type="hidden" name="from" value="${row.id}"/><button type="submit" class="btn btn-default" title="Open this document in the editor; submitting makes a new document">Edit</button></form>`;
     if (ctx.canShare) {
       // sharing as a QR code: a form each (they work without scripts); with scripts, the
       // page asks for JSON and shows the code in a panel over the page
@@ -1443,9 +2094,8 @@ function renderDocument(project, row, view, ctx) {
       h += `<form method="post" action="${durl}/requeue" class="ips-inline">${csrfField(ctx.csrf)}<button type="submit" class="btn btn-default">Process again</button></form>` +
         `<form method="post" action="${durl}/delete" class="ips-inline" data-confirm="${escape(`Delete document ${row.id}?`)}">${csrfField(ctx.csrf)}<button type="submit" class="btn btn-danger">Delete</button></form>`;
     }
-    h += '</span>';
+    h += '</div>';
   }
-  h += '</div>';
   if (ctx.canShare) {
     h += sharePanelScript();
   }
@@ -1454,29 +2104,39 @@ function renderDocument(project, row, view, ctx) {
   h += '<ul class="nav nav-tabs ips-nav">' + VIEWS.map(([v, label]) =>
     `<li${v === view ? ' class="active"' : ''}><a href="${durl}?view=${v}">${label}</a></li>`).join('') + '</ul>';
 
-  if (view === 'json') {
+  if (view === 'structure') {
+    h += renderStructure(row.bundle);
+  } else if (view === 'analysis') {
+    h += renderAnalysis(row, { canManage: ctx.canManage });
+  } else if (view === 'source') {
     h += `<pre class="ips-json">${escape(JSON.stringify(row.bundle, null, 2))}</pre>`;
   } else if (view === 'terminology') {
     // the analysed copy carries the checks; the concepts are the same
     h += renderTerminology(row.analysed || row.bundle, { ...ctx, analysed: !!row.analysed, docUrl: durl });
   } else if (view === 'translation') {
     h += renderTranslation(row, { canManage: ctx.canManage });
-  } else if (view === 'generated') {
-    h += renderGenerated(row, { canManage: ctx.canManage });
   } else if (view === 'profiles') {
     h += renderProfileChecks(row, { base: ctx.base, canManage: ctx.canManage });
   } else if (view === 'ai') {
     h += renderAi(row, { canManage: ctx.canManage });
   } else if (view === 'validation') {
     h += renderValidation(row, { level: ctx.level, docUrl: durl, canManage: ctx.canManage });
+  } else if (view === 'national') {
+    h += renderNational(row, { np: ctx.np, level: ctx.level, docUrl: durl, base: ctx.base, canManage: ctx.canManage });
   } else {
-    h += assembledNarrative(row.bundle);
+    // the narrative: as provided in the document, or as this server generates it
+    const generated = ctx.narrative === 'generated';
+    h += '<div class="ips-switch">' +
+      `<a href="${durl}?view=narrative"${generated ? '' : ' class="active"'} title="The narrative in the document as it was submitted">Provided</a>` +
+      `<a href="${durl}?view=narrative&amp;narrative=generated"${generated ? ' class="active"' : ''} title="The narrative this server generates for the document">Generated</a></div>`;
+    h += generated ? renderGenerated(row, { canManage: ctx.canManage }) : assembledNarrative(row.bundle);
   }
   return h;
 }
 
 module.exports = {
+  analysisOk,
   renderHome, renderLogin, renderProjects, renderUsers, renderProject, renderSubmit, renderSettings, renderDocument,
-  assembledNarrative, renderTerminology, renderTranslation, renderGenerated, renderAi, renderValidation, renderShare, renderCompose, renderProfileChecks,
-  renderProfiles, renderProfile, renderProfileEditor, VIEWS
+  assembledNarrative, renderStructure, renderAnalysis, renderTerminology, renderTranslation, renderGenerated, renderAi, renderValidation, renderNational, renderShare, renderCompose, renderProfileChecks,
+  renderProfiles, renderProfile, renderProfileEditor, renderNationalProfiles, VIEWS, viewOf
 };