@hippo-digital/hippocampus 1.0.0-rc.1

package/views/hippocampus/index.html

@@ -0,0 +1,46 @@
+{% extends "hippocampus/_layout.html" %}
+{% from "hippocampus/components/_summary-card.njk" import summaryCard %}
+
+{% block pageTitle %}
+  {{ knowledge.project.name }}
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+      <span class="nhsuk-caption-l">Prototype Kit add-on spike</span>
+      <h1>{{ knowledge.project.name }}</h1>
+      <p class="nhsuk-lede-text">{{ knowledge.project.description }}</p>
+
+      {% if knowledgeValidation.valid %}
+        <div class="nhsuk-inset-text">Knowledge validation passed. Source links are intact.</div>
+      {% else %}
+        <div class="nhsuk-warning-callout">
+          <h2 class="nhsuk-warning-callout__label">Knowledge validation failed</h2>
+          <ul>
+            {% for error in knowledgeValidation.errors %}
+              <li>{{ error }}</li>
+            {% endfor %}
+          </ul>
+        </div>
+      {% endif %}
+    </div>
+  </div>
+
+  <div class="knowledge-grid">
+    {{ summaryCard("Project context", "Purpose, vision, policy context, channels, risks and source facts.", basePath + "/project", knowledge.projectContext.sourceArtefacts.length + " artefacts") }}
+    {{ summaryCard("Users", "The user groups and responsibilities used by the slice.", basePath + "/users", knowledge.users.length + " records") }}
+    {{ summaryCard("User needs", "Needs linked to users, scenarios, screens and evidence.", basePath + "/user-needs", knowledge.needs.length + " records") }}
+    {{ summaryCard("Scenarios", "Happy paths, edge cases and risks.", basePath + "/scenarios", knowledge.scenarios.length + " records") }}
+    {{ summaryCard("Research", "Rounds, participants, insights and design actions.", basePath + "/research", knowledge.researchRounds.length + " rounds") }}
+    {{ summaryCard("Relationship graph", "Explicit user, scenario, need, evidence, journey and screen links.", basePath + "/graph", knowledge.relationships.length + " relationships") }}
+    {{ summaryCard("Trace tree", "Navigate upstream and downstream through relationship paths.", basePath + "/trace", "graph view") }}
+    {{ summaryCard("Documentation", "How to ingest research, record design actions and work with the graph.", basePath + "/docs", "guides") }}
+    {% for journey in knowledge.journeys %}
+      {{ summaryCard(journey.title, "Journey rendered from structured source data.", basePath + "/journeys/" + journey.id, "journey") }}
+      {{ summaryCard(journey.title + " blueprint", "Stacked service blueprint generated from the journey.", basePath + "/journeys/" + journey.id + "/blueprint", "generated view") }}
+      {{ summaryCard(journey.title + " flow diagram", "Mermaid flow diagram generated from the same journey steps.", basePath + "/journeys/" + journey.id + "/flow", "generated view") }}
+      {{ summaryCard(journey.title + " handover", "Team documentation generated from the same source.", basePath + "/journeys/" + journey.id + "/handover", "documentation") }}
+    {% endfor %}
+  </div>
+{% endblock %}

package/views/hippocampus/journey-flow.html

@@ -0,0 +1,31 @@
+{% extends "hippocampus/_layout.html" %}
+
+{% block pageTitle %}{{ flow.meta.journeyTitle }} flow diagram{% endblock %}
+
+{% block content %}
+  <a class="nhsuk-back-link" href="{{ basePath }}/journeys/{{ flow.journey.id }}">Back to journey</a>
+  <span class="nhsuk-caption-l">Flow diagram</span>
+  <h1>{{ flow.meta.journeyTitle }}</h1>
+  <p class="nhsuk-lede-text">Generated from the same journey steps as the blueprint - dashed arrows are exception paths, not the happy path.</p>
+
+  <div class="knowledge-flow-diagram">
+    <pre class="mermaid">{{ flow.mermaidSource }}</pre>
+  </div>
+
+  <details class="nhsuk-details">
+    <summary class="nhsuk-details__summary">
+      <span class="nhsuk-details__summary-text">View diagram source</span>
+    </summary>
+    <div class="nhsuk-details__text">
+      <pre class="knowledge-flow-source">{{ flow.mermaidSource }}</pre>
+    </div>
+  </details>
+{% endblock %}
+
+{% block bodyEnd %}
+  {{ super() }}
+  <script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'
+    mermaid.initialize({ startOnLoad: true, theme: 'neutral', securityLevel: 'strict' })
+  </script>
+{% endblock %}

package/views/hippocampus/journey.html

@@ -0,0 +1,23 @@
+{% extends "hippocampus/_layout.html" %}
+{% from "hippocampus/components/_journey-step.njk" import journeyStep %}
+
+{% block pageTitle %}{{ journey.title }}{% endblock %}
+
+{% block content %}
+  <a class="nhsuk-back-link" href="{{ basePath }}">Back to knowledge base</a>
+  <span class="nhsuk-caption-l">Journey</span>
+  <h1>{{ journey.title }}</h1>
+  <p class="nhsuk-lede-text">{{ journey.description }}</p>
+
+  <p>
+    <a class="nhsuk-button" href="{{ basePath }}/journeys/{{ journey.id }}/blueprint">View blueprint</a>
+    <a class="nhsuk-button nhsuk-button--secondary" href="{{ basePath }}/journeys/{{ journey.id }}/blueprint/classic">View matrix</a>
+    <a class="nhsuk-button nhsuk-button--secondary" href="{{ basePath }}/journeys/{{ journey.id }}/flow">View flow diagram</a>
+  </p>
+
+  <ol class="knowledge-timeline">
+    {% for step in journey.steps %}
+      {{ journeyStep(step, knowledge) }}
+    {% endfor %}
+  </ol>
+{% endblock %}

package/views/hippocampus/not-found.html

@@ -0,0 +1,10 @@
+{% extends "hippocampus/_layout.html" %}
+
+{% block pageTitle %}Not found{% endblock %}
+
+{% block content %}
+  <h1>Not found</h1>
+  <p>The requested knowledge base artefact could not be found.</p>
+  <p><a href="{{ basePath }}">Return to knowledge base</a></p>
+{% endblock %}
+

package/views/hippocampus/project.html

@@ -0,0 +1,102 @@
+{% extends "hippocampus/_layout.html" %}
+
+{% macro itemList(items, emptyText) %}
+  {% if items.length %}
+    <div class="knowledge-list">
+      {% for item in items %}
+        <article class="knowledge-card">
+          <h3>{{ item.label or item.title }}</h3>
+          {% if item.value %}<p><strong>{{ item.value }}</strong></p>{% endif %}
+          {% if item.group %}<p class="knowledge-card__meta">{{ item.group }}</p>{% endif %}
+          {% if item.usage %}<p class="knowledge-card__meta">{{ item.usage }}</p>{% endif %}
+          {% if item.detail %}<p>{{ item.detail }}</p>{% endif %}
+          {% if item.description %}<p>{{ item.description }}</p>{% endif %}
+          {% if item.summary %}<p>{{ item.summary }}</p>{% endif %}
+          {% if item.impact %}<p><strong>Impact:</strong> {{ item.impact }}</p>{% endif %}
+          {% if item.sourcePath %}<p class="knowledge-card__meta">{{ item.sourcePath }}</p>{% endif %}
+        </article>
+      {% endfor %}
+    </div>
+  {% else %}
+    <p class="knowledge-muted">{{ emptyText }}</p>
+  {% endif %}
+{% endmacro %}
+
+{% block pageTitle %}Project context{% endblock %}
+
+{% block content %}
+  <a class="nhsuk-back-link" href="{{ basePath }}">Back to knowledge base</a>
+
+  <span class="nhsuk-caption-l">{{ knowledge.project.name }}</span>
+  <h1>{{ knowledge.projectContext.title }}</h1>
+  <p class="nhsuk-lede-text">{{ knowledge.projectContext.summary }}</p>
+
+  {% if knowledge.projectContext.purpose or knowledge.projectContext.vision or knowledge.projectContext.problemStatement or knowledge.projectContext.serviceProposition %}
+    <section class="knowledge-section">
+      <h2>Overview</h2>
+      {% if knowledge.projectContext.purpose %}
+        <h3>Purpose</h3>
+        <p>{{ knowledge.projectContext.purpose }}</p>
+      {% endif %}
+      {% if knowledge.projectContext.vision %}
+        <h3>Vision</h3>
+        <p>{{ knowledge.projectContext.vision }}</p>
+      {% endif %}
+      {% if knowledge.projectContext.problemStatement %}
+        <h3>Problem statement</h3>
+        <p>{{ knowledge.projectContext.problemStatement }}</p>
+      {% endif %}
+      {% if knowledge.projectContext.serviceProposition %}
+        <h3>Service proposition</h3>
+        <p>{{ knowledge.projectContext.serviceProposition }}</p>
+      {% endif %}
+    </section>
+  {% endif %}
+
+  <section class="knowledge-section">
+    <h2>Users</h2>
+    {{ itemList(knowledge.projectContext.users, "No project-level users have been added yet.") }}
+  </section>
+
+  <section class="knowledge-section">
+    <h2>Channels</h2>
+    {{ itemList(knowledge.projectContext.channels, "No service channels have been added yet.") }}
+  </section>
+
+  <section class="knowledge-section">
+    <h2>Policies and constraints</h2>
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-one-half">
+        <h3>Policies</h3>
+        {{ itemList(knowledge.projectContext.policies, "No policies have been added yet.") }}
+      </div>
+      <div class="nhsuk-grid-column-one-half">
+        <h3>Constraints</h3>
+        {{ itemList(knowledge.projectContext.constraints, "No constraints have been added yet.") }}
+      </div>
+    </div>
+  </section>
+
+  <section class="knowledge-section">
+    <h2>Risks, milestones and facts</h2>
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-one-third">
+        <h3>Risks</h3>
+        {{ itemList(knowledge.projectContext.risks, "No risks have been added yet.") }}
+      </div>
+      <div class="nhsuk-grid-column-one-third">
+        <h3>Milestones</h3>
+        {{ itemList(knowledge.projectContext.milestones, "No milestones have been added yet.") }}
+      </div>
+      <div class="nhsuk-grid-column-one-third">
+        <h3>Facts</h3>
+        {{ itemList(knowledge.projectContext.facts, "No facts have been added yet.") }}
+      </div>
+    </div>
+  </section>
+
+  <section class="knowledge-section">
+    <h2>Source artefacts</h2>
+    {{ itemList(knowledge.projectContext.sourceArtefacts, "No project overview artefacts have been promoted yet.") }}
+  </section>
+{% endblock %}

package/views/hippocampus/research.html

@@ -0,0 +1,68 @@
+{% extends "hippocampus/_layout.html" %}
+
+{% block pageTitle %}Research{% endblock %}
+
+{% block content %}
+  <a class="nhsuk-back-link" href="{{ basePath }}">Back to knowledge base</a>
+
+  <span class="nhsuk-caption-l">Knowledge graph inputs</span>
+  <h1>Research</h1>
+  <p class="nhsuk-lede-text">Research rounds, participants, insights and design actions that can be linked into the design knowledge graph.</p>
+
+  <div class="knowledge-graph-summary">
+    <div><strong>{{ research.rounds.length }}</strong><span>Rounds</span></div>
+    <div><strong>{{ research.participants.length }}</strong><span>Participants</span></div>
+    <div><strong>{{ research.insights.length }}</strong><span>Insights</span></div>
+    <div><strong>{{ research.designActions.length }}</strong><span>Design actions</span></div>
+  </div>
+
+  {% if research.rounds.length %}
+    {% for round in research.rounds %}
+      <section class="knowledge-section">
+        <p class="knowledge-card__meta">{{ round.date }} · {{ round.sourceType }}</p>
+        <h2>{{ round.title }}</h2>
+        <p>{{ round.summary }}</p>
+
+        <div class="nhsuk-grid-row">
+          <div class="nhsuk-grid-column-one-third">
+            <h3 class="nhsuk-heading-s">Participants</h3>
+            <ul class="nhsuk-list">
+              {% for participant in round.participants %}
+                <li>{{ participant.label }} <span class="knowledge-muted">{{ participant.role }}</span></li>
+              {% else %}
+                <li class="knowledge-muted">None linked</li>
+              {% endfor %}
+            </ul>
+          </div>
+          <div class="nhsuk-grid-column-one-third">
+            <h3 class="nhsuk-heading-s">Insights</h3>
+            <ul class="nhsuk-list">
+              {% for insight in round.insights %}
+                <li>{{ insight.title }}</li>
+              {% else %}
+                <li class="knowledge-muted">None linked</li>
+              {% endfor %}
+            </ul>
+          </div>
+          <div class="nhsuk-grid-column-one-third">
+            <h3 class="nhsuk-heading-s">Design actions</h3>
+            <ul class="nhsuk-list">
+              {% for action in round.designActions %}
+                <li>{{ action.title }} <span class="knowledge-muted">{{ action.status }}</span></li>
+              {% else %}
+                <li class="knowledge-muted">None linked</li>
+              {% endfor %}
+            </ul>
+          </div>
+        </div>
+      </section>
+    {% endfor %}
+  {% else %}
+    <section class="knowledge-section">
+      <h2>No research rounds imported yet</h2>
+      <p>Place PowerPoint or text-based PDF research artefacts in <code>hippocampus/inbox/research</code>, then run <code>npm run research:sync</code> to detect new files, create reviewable drafts and update the research manifest.</p>
+      <p>The sync command reports fit warnings when the artefact does not expose participants, insights or design actions clearly, then asks before promoting imported drafts into source data.</p>
+      <p>After review, check promotion with <code>npm run promote:research-draft -- --draft hippocampus/imports/research/round-id.json --dry-run</code>, then remove <code>--dry-run</code> to merge it into source data.</p>
+    </section>
+  {% endif %}
+{% endblock %}

package/views/hippocampus/route-review.html

@@ -0,0 +1,83 @@
+{% extends "hippocampus/_layout.html" %}
+
+{% block pageTitle %}{{ screen.title }}{% endblock %}
+
+{% block content %}
+  <a class="nhsuk-back-link" href="{{ basePath }}">Back to knowledge base</a>
+  <span class="nhsuk-caption-l">Fictional design review task</span>
+  <h1>{{ screen.title }}</h1>
+  <p class="nhsuk-lede-text">{{ screen.purpose }}</p>
+
+  <div class="nhsuk-inset-text">
+    This page demonstrates a source-backed review workflow. It does not capture or store real delivery evidence.
+  </div>
+
+  <h2>Route review context</h2>
+  <dl class="nhsuk-summary-list">
+    <div class="nhsuk-summary-list__row">
+      <dt class="nhsuk-summary-list__key">Prototype route</dt>
+      <dd class="nhsuk-summary-list__value">{{ screen.route }}</dd>
+    </div>
+    <div class="nhsuk-summary-list__row">
+      <dt class="nhsuk-summary-list__key">Linked journey</dt>
+      <dd class="nhsuk-summary-list__value">
+        <a href="{{ basePath }}/journeys/{{ journey.id }}">{{ journey.title }}</a>
+      </dd>
+    </div>
+    <div class="nhsuk-summary-list__row">
+      <dt class="nhsuk-summary-list__key">Next artefacts</dt>
+      <dd class="nhsuk-summary-list__value">Smoke test result, screenshot or route notes, accessibility note and handover summary</dd>
+    </div>
+  </dl>
+
+  <h2>Linked user needs</h2>
+  <ul class="nhsuk-list nhsuk-list--bullet">
+    {% for need in linkedNeeds %}
+      <li>{{ need.statement }}</li>
+    {% endfor %}
+  </ul>
+
+  {{ checkboxes({
+    name: "reviewEvidence",
+    fieldset: {
+      legend: {
+        text: "What evidence is ready for handover?",
+        classes: "nhsuk-fieldset__legend--m"
+      }
+    },
+    items: [
+      {
+        value: "smoke-tested",
+        text: "The changed route passed the smoke test"
+      },
+      {
+        value: "screenshots-or-notes",
+        text: "A screenshot pack or notes-only route review pack exists"
+      },
+      {
+        value: "accessibility-note",
+        text: "An accessibility note separates blockers from improvements"
+      },
+      {
+        value: "handover-summary",
+        text: "A dated delivery summary records follow-up work"
+      }
+    ]
+  }) }}
+
+  {{ textarea({
+    name: "routeReviewNote",
+    id: "route-review-note",
+    label: {
+      text: "Route review note"
+    },
+    hint: {
+      text: "Record blockers, missing checks or why a review pack is notes-only."
+    },
+    value: "Smoke test passed. Screenshot capture may be notes-only if tooling is unavailable. Accessibility blockers and follow-up improvements should be separated before handover."
+  }) }}
+
+  <a class="nhsuk-button" href="{{ basePath }}/journeys/{{ journey.id }}/handover">View linked handover</a>
+  <p><a href="{{ basePath }}/journeys/{{ journey.id }}/blueprint">View linked blueprint</a></p>
+{% endblock %}
+

package/views/hippocampus/scenarios.html

@@ -0,0 +1,56 @@
+{% extends "hippocampus/_layout.html" %}
+{% from "hippocampus/components/_list.njk" import bulletList %}
+{% from "hippocampus/components/_empty-state.njk" import emptyState %}
+
+{% block pageTitle %}Scenarios{% endblock %}
+
+{% block content %}
+  <a class="nhsuk-back-link" href="{{ basePath }}">Back to knowledge base</a>
+  <h1>Scenarios</h1>
+  {% if knowledge.scenarios.length %}
+{% for scenario in knowledge.scenarios %}
+    {% set user = knowledge.index.users[scenario.userId] %}
+    <section class="knowledge-section">
+      <span class="nhsuk-tag nhsuk-tag--{{ 'red' if scenario.riskLevel == 'high' else 'yellow' }}">{{ scenario.riskLevel }} risk</span>
+      <h2>{{ scenario.title }}</h2>
+      <p><strong>User:</strong> {{ user.label }}</p>
+      <p><strong>Trigger:</strong> {{ scenario.trigger }}</p>
+      <p>{{ scenario.context }}</p>
+
+      {% if scenario.locationSearch %}
+        <h3 class="nhsuk-heading-s">Location search</h3>
+        <p><strong>Primary intent:</strong> {{ scenario.locationSearch.primaryIntent }}</p>
+        <p><strong>Search scope:</strong> {{ scenario.locationSearch.searchScope }}</p>
+
+        <h4 class="nhsuk-heading-xs">Trigger conditions</h4>
+        {{ bulletList(scenario.locationSearch.triggerConditions) }}
+
+        <h4 class="nhsuk-heading-xs">Available information</h4>
+        {{ bulletList(scenario.locationSearch.availableInformation) }}
+
+        <h4 class="nhsuk-heading-xs">Role of the address</h4>
+        <p>{{ scenario.locationSearch.addressRole }}</p>
+
+        <h4 class="nhsuk-heading-xs">What users learn from residents</h4>
+        {{ bulletList(scenario.locationSearch.learnedFromResidents) }}
+
+        <h4 class="nhsuk-heading-xs">Current and historic residents</h4>
+        {{ bulletList(scenario.locationSearch.currentAndHistoricResidents) }}
+
+        <h4 class="nhsuk-heading-xs">Outcomes</h4>
+        {{ bulletList(scenario.locationSearch.outcomes) }}
+
+        <h4 class="nhsuk-heading-xs">Risks</h4>
+        {{ bulletList(scenario.locationSearch.risks) }}
+      {% endif %}
+
+      <h3 class="nhsuk-heading-s">Edge cases</h3>
+      {{ bulletList(scenario.edgeCases) }}
+    </section>
+  {% endfor %}
+  {% else %}
+    {{ emptyState("No scenarios yet",
+      "A scenario is the situation a user is in when a need bites, and what makes it hard.",
+      "Add one with the add-scenario skill.") }}
+  {% endif %}
+{% endblock %}

package/views/hippocampus/trace.html

@@ -0,0 +1,113 @@
+{% extends "hippocampus/_layout.html" %}
+
+{% macro renderBranches(branches, direction) %}
+  {% if branches.length %}
+    <ol class="knowledge-trace-children">
+      {% for branch in branches %}
+        <li class="knowledge-trace-item">
+          <div class="knowledge-trace-item__marker" aria-hidden="true"></div>
+          <div class="knowledge-trace-item__content">
+            {% if branch.entity.date %}
+              <p class="knowledge-trace-item__date">{{ branch.entity.date }}</p>
+            {% endif %}
+            <h3 class="knowledge-trace-item__heading">
+              <a href="{{ basePath }}/trace?entity={{ branch.entity.id }}">{{ branch.entity.label }}</a>
+            </h3>
+            <span class="knowledge-trace-item__type knowledge-trace-item__type--{{ branch.entity.typeSlug }}">{{ branch.entity.type }}</span>
+            <p class="knowledge-trace-item__relationship">
+              {{ branch.relationship.fromLabel }} <strong>{{ branch.relationship.label }}</strong> {{ branch.relationship.toLabel }}
+            </p>
+            {% if branch.seen %}
+              <p class="knowledge-muted">Cycle already shown.</p>
+            {% endif %}
+            {{ renderBranches(branch.children, direction) }}
+          </div>
+        </li>
+      {% endfor %}
+    </ol>
+  {% else %}
+    <p class="knowledge-muted">No linked entities in this direction.</p>
+  {% endif %}
+{% endmacro %}
+
+{% block pageTitle %}Trace tree{% endblock %}
+
+{% block content %}
+  <a class="nhsuk-back-link" href="{{ basePath }}">Back to knowledge base</a>
+
+  <span class="nhsuk-caption-l">Knowledge graph</span>
+  <h1>Trace tree</h1>
+  <p class="nhsuk-lede-text">Navigate from old design inputs, through research and insight, into actions, newer design work and content.</p>
+
+  <section class="knowledge-section">
+    <form method="get" action="{{ basePath }}/trace" class="knowledge-trace-controls" data-hippocampus-trace-form>
+      <div class="knowledge-trace-controls__field">
+        <label class="nhsuk-label" for="type">Type</label>
+        <select class="nhsuk-select" id="type" name="type" data-trace-type>
+          <option value="">Select type</option>
+          {% for type in trace.entityTypes %}
+            <option value="{{ type }}" {{ "selected" if trace.entityType == type else "" }}>{{ type }}</option>
+          {% endfor %}
+        </select>
+      </div>
+
+      <div class="knowledge-trace-controls__field">
+        <label class="nhsuk-label" for="entity">Entity</label>
+        <select class="nhsuk-select" id="entity" name="entity" data-trace-entity {{ "disabled" if not trace.entityType else "" }}>
+          <option value="">Select entity</option>
+          {% for node in trace.nodes %}
+            {% set hiddenForType = trace.entityType and node.type != trace.entityType %}
+            <option value="{{ node.id }}" data-entity-type="{{ node.type }}" {{ "selected" if trace.selected and node.id == trace.selected.id else "" }} {{ "hidden disabled" if hiddenForType else "" }}>
+              {{ node.label }}
+            </option>
+          {% endfor %}
+        </select>
+      </div>
+
+      <button class="nhsuk-button knowledge-trace-controls__submit" type="submit">View trace</button>
+    </form>
+  </section>
+
+  {% if trace.selected %}
+    <section class="knowledge-section">
+      <h2>Timeline trace</h2>
+
+      <ol class="knowledge-trace-timeline" aria-label="Knowledge trace timeline">
+        <li class="knowledge-trace-group knowledge-trace-group--upstream">
+          <div class="knowledge-trace-group__content">
+            <h3>Earlier inputs</h3>
+            {{ renderBranches(trace.upstream, "upstream") }}
+          </div>
+        </li>
+
+        <li class="knowledge-trace-item knowledge-trace-item--selected">
+          <div class="knowledge-trace-item__marker" aria-hidden="true"></div>
+          <div class="knowledge-trace-item__content">
+            {% if trace.selected.date %}
+              <p class="knowledge-trace-item__date">{{ trace.selected.date }}</p>
+            {% endif %}
+            <h3 class="knowledge-trace-item__heading">{{ trace.selected.label }}</h3>
+            <span class="knowledge-trace-item__type knowledge-trace-item__type--{{ trace.selected.typeSlug }}">{{ trace.selected.type }}</span>
+          </div>
+        </li>
+
+        <li class="knowledge-trace-group knowledge-trace-group--downstream">
+          <div class="knowledge-trace-group__content">
+            <h3>Later outputs</h3>
+            {{ renderBranches(trace.downstream, "downstream") }}
+          </div>
+        </li>
+      </ol>
+    </section>
+  {% else %}
+    <section class="knowledge-section">
+      {% if trace.entityType %}
+        <h2>Choose an entity</h2>
+        <p>Select one of the {{ trace.entityType | lower }} entries to see its timeline trace.</p>
+      {% else %}
+        <h2>Choose a type</h2>
+        <p>Select an entity type first. The entity list will then show the matching results.</p>
+      {% endif %}
+    </section>
+  {% endif %}
+{% endblock %}

package/views/hippocampus/user-needs.html

@@ -0,0 +1,32 @@
+{% extends "hippocampus/_layout.html" %}
+{% from "hippocampus/components/_empty-state.njk" import emptyState %}
+
+{% block pageTitle %}User needs{% endblock %}
+
+{% block content %}
+  <a class="nhsuk-back-link" href="{{ basePath }}">Back to knowledge base</a>
+  <h1>User needs</h1>
+  <div class="knowledge-list">
+    {% if knowledge.needs.length %}
+{% for need in knowledge.needs %}
+      {% set user = knowledge.index.users[need.userId] %}
+      <article class="knowledge-card">
+        <p class="knowledge-card__meta">{{ user.label }} · {{ need.priority }} priority</p>
+        <h2 class="nhsuk-heading-s">{{ need.statement }}</h2>
+        <h3 class="nhsuk-heading-xs">Evidence</h3>
+        <ul class="nhsuk-list">
+          {% for evidenceId in need.evidenceIds %}
+            {% set evidence = knowledge.index.evidence[evidenceId] %}
+            <li>{{ evidence.title }}</li>
+          {% endfor %}
+        </ul>
+      </article>
+    {% endfor %}
+  {% else %}
+    {{ emptyState("No user needs yet",
+      "A need says who wants what, and why - the \"so that\" clause is what stops two users' needs being merged into one.",
+      "Add them with the add-user-needs skill once there is at least one user.") }}
+  {% endif %}
+  </div>
+{% endblock %}
+