@vue-skuilder/common-ui 0.2.28 → 0.2.29

package/dist/admin/components/LearnerDiagnostics.vue.d.ts

@@ -1,7 +1,8 @@
 import { DiagnosticsInterpreters, LearnerDataset } from '@vue-skuilder/db/diagnostics';
 /**
- * One learner: sessions (list, then a session's detail) and card history,
- * with session timelines linking into card history. Navigation is internal;
+ * One learner: sessions (list, then a session's detail), card history, and,
+ * when the dataset carries the course's strategy docs, the pipeline with this
+ * learner's run stats. Session timelines link into card history. Navigation is internal;
  * hosts that want URLs can compose the three views themselves.
  */
 type __VLS_Props = {

package/dist/admin/components/LearnerDiagnostics.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LearnerDiagnostics.vue.d.ts","sourceRoot":"","sources":["../../../src/admin/components/LearnerDiagnostics.vue"],"names":[],"mappings":"AAuEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAK5F;;;;GAIG;AACH,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,cAAc,CAAC;IACxB,YAAY,CAAC,EAAE,uBAAuB,CAAC;CACxC,CAAC;;AAkMF,wBAOG"}
+{"version":3,"file":"LearnerDiagnostics.vue.d.ts","sourceRoot":"","sources":["../../../src/admin/components/LearnerDiagnostics.vue"],"names":[],"mappings":"AAwFA,OAAO,EAAoB,KAAK,uBAAuB,EAAE,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAMnH;;;;;GAKG;AACH,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,cAAc,CAAC;IACxB,YAAY,CAAC,EAAE,uBAAuB,CAAC;CACxC,CAAC;;AAmOF,wBAOG"}

package/dist/admin/components/PipelineOverview.vue.d.ts

@@ -0,0 +1,18 @@
+import { ContentNavigationStrategyData } from '@vue-skuilder/db';
+import { PipelineRunStats } from '@vue-skuilder/db/diagnostics';
+/**
+ * A course's navigation pipeline as it assembles in this app: each stage in
+ * run order, which generators and filters run in it, and where each came from.
+ * With `stats` (from `pipelineRunStats`), each piece also shows what it did
+ * across a learner's persisted runs. Stats join to the plan by name.
+ */
+type __VLS_Props = {
+    strategies: ContentNavigationStrategyData[];
+    courseId: string;
+    stats?: PipelineRunStats;
+    /** Whose runs the stats cover, e.g. a username. */
+    statsLabel?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=PipelineOverview.vue.d.ts.map

package/dist/admin/components/PipelineOverview.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PipelineOverview.vue.d.ts","sourceRoot":"","sources":["../../../src/admin/components/PipelineOverview.vue"],"names":[],"mappings":"AAyYA,OAAO,EAGL,KAAK,6BAA6B,EAGnC,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAKL,KAAK,gBAAgB,EAGtB,MAAM,8BAA8B,CAAC;AAGtC;;;;;GAKG;AACH,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,6BAA6B,EAAE,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;;AA0oBF,wBAOG"}

package/dist/admin/components/RunDetail.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RunDetail.vue.d.ts","sourceRoot":"","sources":["../../../src/admin/components/RunDetail.vue"],"names":[],"mappings":"AAyKA,OAAO,KAAK,EAA4B,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAErG,gDAAgD;AAChD,KAAK,WAAW,GAAG;IAAE,GAAG,EAAE,sBAAsB,CAAA;CAAE,CAAC;;;;;;AAoXnD,wBAQG"}
+{"version":3,"file":"RunDetail.vue.d.ts","sourceRoot":"","sources":["../../../src/admin/components/RunDetail.vue"],"names":[],"mappings":"AA6LA,OAAO,EAGL,KAAK,sBAAsB,EAC5B,MAAM,8BAA8B,CAAC;AAEtC,gDAAgD;AAChD,KAAK,WAAW,GAAG;IAAE,GAAG,EAAE,sBAAsB,CAAA;CAAE,CAAC;;;;;;AA8YnD,wBAQG"}

package/dist/admin/index.d.ts

@@ -19,4 +19,5 @@ export { default as LearnerSessionDetail } from './components/LearnerSessionDeta
 export { default as LearnerCardHistory } from './components/LearnerCardHistory.vue';
 export { default as CardDossierDetail } from './components/CardDossierDetail.vue';
 export { default as RunDetail } from './components/RunDetail.vue';
+export { default as PipelineOverview } from './components/PipelineOverview.vue';
 //# sourceMappingURL=index.d.ts.map

package/dist/admin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/admin/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,KAAK,kBAAkB,GACxB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/admin/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,KAAK,kBAAkB,GACxB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,mCAAmC,CAAC"}

package/dist/components/auth/UserRegistration.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserRegistration.vue.d.ts","sourceRoot":"","sources":["../../../src/components/auth/UserRegistration.vue"],"names":[],"mappings":"AA8EA;AAAA,OAgSO,EAAmB,QAAQ,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAO,MAAM,sBAAsB,CAAC;;;cAU3B,QAAQ,CAAC,CAAC,OAAO,EAAE;YAAE,QAAQ,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,CAAC;;;;;;;;;;;;;;;;;;UAuBrD,eAAe,GAAG,IAAI;WACO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA2dw6O,CAAC;;;;;;;;;;;;;wBAAm7D,CAAC;yBAAuB,CAAC;;;;;;;;;yBAA0Y,CAAC;4BAA0B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAAn3E,CAAC;;;;;;;;;;;;;wBAAm7D,CAAC;yBAAuB,CAAC;;;;;;;;;yBAA0Y,CAAC;4BAA0B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAAn3E,CAAC;;;;;;;;;;;;;wBAAm7D,CAAC;yBAAuB,CAAC;;;;;;;;;yBAA0Y,CAAC;4BAA0B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAAn3E,CAAC;;;;;;;;;;;;;wBAAm7D,CAAC;yBAAuB,CAAC;;;;;;;;;yBAA0Y,CAAC;4BAA0B,CAAC;;;;;;;;;;;;;;yBAld3zT,OAAO;;;;;qBASX,MAAM;2BAGA,MAAM;;;;;;;;cA7CT,QAAQ,CAAC,CAAC,OAAO,EAAE;YAAE,QAAQ,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,CAAC;;;;;;;AALzE,wBAoMG"}
+{"version":3,"file":"UserRegistration.vue.d.ts","sourceRoot":"","sources":["../../../src/components/auth/UserRegistration.vue"],"names":[],"mappings":"AA8EA;AAAA,OAgSO,EAAmB,QAAQ,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAO,MAAM,sBAAsB,CAAC;;;cAU3B,QAAQ,CAAC,CAAC,OAAO,EAAE;YAAE,QAAQ,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,CAAC;;;;;;;;;;;;;;;;;;UAuBrD,eAAe,GAAG,IAAI;WACO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA2dy/W,CAAC;;;;;;;;;;;;;wBAAm7D,CAAC;yBAAuB,CAAC;;;;;;;;;yBAA0Y,CAAC;4BAA0B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAAn3E,CAAC;;;;;;;;;;;;;wBAAm7D,CAAC;yBAAuB,CAAC;;;;;;;;;yBAA0Y,CAAC;4BAA0B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAAn3E,CAAC;;;;;;;;;;;;;wBAAm7D,CAAC;yBAAuB,CAAC;;;;;;;;;yBAA0Y,CAAC;4BAA0B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAAn3E,CAAC;;;;;;;;;;;;;wBAAm7D,CAAC;yBAAuB,CAAC;;;;;;;;;yBAA0Y,CAAC;4BAA0B,CAAC;;;;;;;;;;;;;;yBAld54b,OAAO;;;;;qBASX,MAAM;2BAGA,MAAM;;;;;;;;cA7CT,QAAQ,CAAC,CAAC,OAAO,EAAE;YAAE,QAAQ,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,CAAC;;;;;;;AALzE,wBAoMG"}

package/dist/stores/useAuthStore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAuthStore.d.ts","sourceRoot":"","sources":["../../src/stores/useAuthStore.ts"],"names":[],"mappings":"AAEA,OAAO,EAAgB,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGjE,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,eAAe,GAAG,SAAS,CAAC;IACnC,oBAAoB,EAAE;QACpB,IAAI,EAAE,OAAO,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,aAAa,EAAE,OAAO,CAAC;QACvB,eAAe,EAAE,OAAO,CAAC;KAC1B,CAAC;IACF,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,wBAAsB,cAAc,IAAI,OAAO,CAAC,eAAe,GAAG,SAAS,CAAC,CAiB3E;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAgFs1lC,CAAC;;;;;;;;;;;;;oBAAm7D,CAAC;qBAAuB,CAAC;;;;;;;;;qBAA0Y,CAAC;wBAA0B,CAAC;;;;kBA3GxtqC,OAAO;sBACH,OAAO;2BACF,OAAO;6BACL,OAAO;;wBAEV,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAsGs1lC,CAAC;;;;;;;;;;;;;oBAAm7D,CAAC;qBAAuB,CAAC;;;;;;;;;qBAA0Y,CAAC;wBAA0B,CAAC;;;;kBA3GxtqC,OAAO;sBACH,OAAO;2BACF,OAAO;6BACL,OAAO;;wBAEV,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAsGs1lC,CAAC;;;;;;;;;;;;;oBAAm7D,CAAC;qBAAuB,CAAC;;;;;;;;;qBAA0Y,CAAC;wBAA0B,CAAC;;;;kBA3GxtqC,OAAO;sBACH,OAAO;2BACF,OAAO;6BACL,OAAO;;wBAEV,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAsGs1lC,CAAC;;;;;;;;;;;;;oBAAm7D,CAAC;qBAAuB,CAAC;;;;;;;;;qBAA0Y,CAAC;wBAA0B,CAAC;;;;;;yBA1CvsqC,OAAO;uBAIT,OAAO;;;;;EAqC/B,CAAC"}
+{"version":3,"file":"useAuthStore.d.ts","sourceRoot":"","sources":["../../src/stores/useAuthStore.ts"],"names":[],"mappings":"AAEA,OAAO,EAAgB,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGjE,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,eAAe,GAAG,SAAS,CAAC;IACnC,oBAAoB,EAAE;QACpB,IAAI,EAAE,OAAO,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,aAAa,EAAE,OAAO,CAAC;QACvB,eAAe,EAAE,OAAO,CAAC;KAC1B,CAAC;IACF,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,wBAAsB,cAAc,IAAI,OAAO,CAAC,eAAe,GAAG,SAAS,CAAC,CAiB3E;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAgFu6tC,CAAC;;;;;;;;;;;;;oBAAm7D,CAAC;qBAAuB,CAAC;;;;;;;;;qBAA0Y,CAAC;wBAA0B,CAAC;;;;kBA3GzyyC,OAAO;sBACH,OAAO;2BACF,OAAO;6BACL,OAAO;;wBAEV,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAsGu6tC,CAAC;;;;;;;;;;;;;oBAAm7D,CAAC;qBAAuB,CAAC;;;;;;;;;qBAA0Y,CAAC;wBAA0B,CAAC;;;;kBA3GzyyC,OAAO;sBACH,OAAO;2BACF,OAAO;6BACL,OAAO;;wBAEV,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAsGu6tC,CAAC;;;;;;;;;;;;;oBAAm7D,CAAC;qBAAuB,CAAC;;;;;;;;;qBAA0Y,CAAC;wBAA0B,CAAC;;;;kBA3GzyyC,OAAO;sBACH,OAAO;2BACF,OAAO;6BACL,OAAO;;wBAEV,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAsGu6tC,CAAC;;;;;;;;;;;;;oBAAm7D,CAAC;qBAAuB,CAAC;;;;;;;;;qBAA0Y,CAAC;wBAA0B,CAAC;;;;;;yBA1CxxyC,OAAO;uBAIT,OAAO;;;;;EAqC/B,CAAC"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.28",
+  "version": "0.2.29",
   "sideEffects": false,
   "main": "./dist/common-ui.umd.js",
   "module": "./dist/common-ui.es.js",
@@ -47,8 +47,8 @@
     "@highlightjs/vue-plugin": "^2.1.2",
     "@mdi/font": "^7.3.67",
     "@vojtechlanka/vue-tags-input": "^3",
-    "@vue-skuilder/common": "0.2.28",
-    "@vue-skuilder/db": "0.2.28",
+    "@vue-skuilder/common": "0.2.29",
+    "@vue-skuilder/db": "0.2.29",
     "highlight.js": "^11.0.1",
     "marked": "^15.0.6",
     "moment": "^2.29.4",
@@ -84,5 +84,5 @@
     "vite-plugin-dts": "^4.5.3",
     "vitest": "^4.1.0"
   },
-  "stableVersion": "0.2.28"
+  "stableVersion": "0.2.29"
 }

package/src/admin/components/LearnerDiagnostics.vue

@@ -3,6 +3,7 @@
     <v-tabs v-model="tab" density="compact" class="mb-4">
       <v-tab value="sessions">Sessions ({{ dataset.sessions.length }})</v-tab>
       <v-tab value="cards">Cards ({{ dataset.cardHistories.length }})</v-tab>
+      <v-tab v-if="dataset.strategies" value="pipeline">Pipeline</v-tab>
     </v-tabs>
 
     <template v-if="tab === 'sessions'">
@@ -25,20 +26,35 @@
       />
     </template>
 
-    <learner-card-history v-else :dataset="dataset" :interpreters="interpreters" :focus="focusCard" />
+    <learner-card-history
+      v-else-if="tab === 'cards'"
+      :dataset="dataset"
+      :interpreters="interpreters"
+      :focus="focusCard"
+    />
+
+    <pipeline-overview
+      v-else-if="tab === 'pipeline' && dataset.strategies"
+      :strategies="dataset.strategies"
+      :course-id="dataset.courseId"
+      :stats="pipelineStats"
+      :stats-label="dataset.username"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
-import type { DiagnosticsInterpreters, LearnerDataset } from '@vue-skuilder/db/diagnostics';
+import { computed, ref, watch } from 'vue';
+import { pipelineRunStats, type DiagnosticsInterpreters, type LearnerDataset } from '@vue-skuilder/db/diagnostics';
 import LearnerCardHistory from './LearnerCardHistory.vue';
 import LearnerSessionDetail from './LearnerSessionDetail.vue';
 import LearnerSessionList from './LearnerSessionList.vue';
+import PipelineOverview from './PipelineOverview.vue';
 
 /**
- * One learner: sessions (list, then a session's detail) and card history,
- * with session timelines linking into card history. Navigation is internal;
+ * One learner: sessions (list, then a session's detail), card history, and,
+ * when the dataset carries the course's strategy docs, the pipeline with this
+ * learner's run stats. Session timelines link into card history. Navigation is internal;
  * hosts that want URLs can compose the three views themselves.
  */
 const props = defineProps<{
@@ -46,9 +62,10 @@ const props = defineProps<{
   interpreters?: DiagnosticsInterpreters;
 }>();
 
-const tab = ref<'sessions' | 'cards'>('sessions');
+const tab = ref<'sessions' | 'cards' | 'pipeline'>('sessions');
 const sessionId = ref<string | null>(null);
 const focusCard = ref<string | undefined>(undefined);
+const pipelineStats = computed(() => pipelineRunStats(props.dataset));
 
 function openCard(cardId: string): void {
   // Re-set through undefined so following the same card twice still refocuses.

package/src/admin/components/PipelineOverview.vue

@@ -0,0 +1,390 @@
+<template>
+  <div class="sk-pipeline">
+    <div class="d-flex flex-wrap align-center ga-2 mb-3">
+      <v-chip size="small" variant="tonal" :color="plan.kind === 'default' ? 'warning' : 'primary'">
+        {{
+          plan.kind === 'default' ? 'default pipeline: the course has no strategy docs' : 'assembled from strategy docs'
+        }}
+      </v-chip>
+      <span class="text-caption">
+        {{ plan.generators.length }} generator(s) · {{ plan.filters.length }} filter(s)
+      </span>
+      <span v-if="stats" class="text-caption text-medium-emphasis">
+        · run stats{{ statsLabel ? ` for ${statsLabel}` : '' }}: {{ stats.runs }} runs over
+        {{ stats.sessions }} sessions, {{ fmtTime(stats.firstRunAt) }} – {{ fmtTime(stats.lastRunAt) }}
+      </span>
+    </div>
+
+    <v-alert
+      v-for="s in plan.skipped"
+      :key="s.strategy._id"
+      type="warning"
+      variant="tonal"
+      density="compact"
+      class="mb-2"
+    >
+      <strong>{{ s.strategy.name }}</strong> (<code>{{ s.strategy.implementingClass }}</code
+      >) is {{ s.reason }} in this app, so it would not run here. A course's own navigators only plan correctly in the
+      app that registers them.
+    </v-alert>
+    <v-alert v-for="w in plan.warnings" :key="w" type="warning" variant="tonal" density="compact" class="mb-2">
+      {{ w }}
+    </v-alert>
+    <v-alert v-for="n in notes" :key="n" type="info" variant="tonal" density="compact" class="mb-2">
+      {{ n }}
+    </v-alert>
+
+    <div v-for="(stage, i) in PIPELINE_STAGES" :key="stage.key">
+      <div class="sk-stage">
+        <div class="d-flex align-center mb-1">
+          <span class="sk-stage-num">{{ i + 1 }}</span>
+          <span class="font-weight-medium">{{ stage.title }}</span>
+        </div>
+        <div class="text-caption text-medium-emphasis mb-2">{{ stage.summary }}</div>
+
+        <template v-if="stage.key === 'generate'">
+          <div v-for="g in plan.generators" :key="g.name" class="sk-nav">
+            <div class="d-flex flex-wrap align-center ga-2">
+              <span class="font-weight-medium">{{ g.name }}</span>
+              <code class="text-caption">{{ g.implementingClass }}</code>
+              <v-chip size="x-small" variant="outlined" :color="ORIGIN[g.origin].color">
+                {{ ORIGIN[g.origin].label }}
+              </v-chip>
+            </div>
+            <div v-if="g.strategy?.description" class="text-caption mt-1">{{ g.strategy.description }}</div>
+
+            <div v-if="stats" class="text-caption mt-1">
+              <template v-if="genStat(g.name)">
+                {{ fmtNum(genStat(g.name)!.meanCards) }} candidates/run ({{ fmtNum(genStat(g.name)!.meanNew) }} new,
+                {{ fmtNum(genStat(g.name)!.meanReview) }} review) · top score
+                {{ genStat(g.name)!.topScoreLast.toFixed(2) }} last, {{ genStat(g.name)!.topScoreMax.toFixed(2) }} max
+                <template v-if="stats.runsWithSelection > 0">
+                  · <strong>{{ genStat(g.name)!.selected }}</strong> selected
+                  <template v-if="genStat(g.name)!.firstAttempts > 0">
+                    · first attempts {{ genStat(g.name)!.firstAttemptsCorrect }}/{{ genStat(g.name)!.firstAttempts }}
+                    correct
+                    <span :class="accuracyClass(accuracyOf(genStat(g.name)!))">
+                      ({{ Math.round(100 * accuracyOf(genStat(g.name)!)!) }}%)
+                    </span>
+                  </template>
+                </template>
+              </template>
+              <span v-else class="text-medium-emphasis">absent from these runs</span>
+            </div>
+
+            <div v-if="prettyConfig(g.strategy?.serializedData)" class="mt-1">
+              <a class="sk-config-link text-caption" @click="toggleConfig(`g:${g.name}`)">
+                {{ openConfigs.has(`g:${g.name}`) ? 'Hide' : 'Show' }} config
+              </a>
+              <pre v-if="openConfigs.has(`g:${g.name}`)" class="sk-config">{{
+                prettyConfig(g.strategy?.serializedData)
+              }}</pre>
+            </div>
+          </div>
+        </template>
+
+        <template v-else-if="stage.key === 'filter'">
+          <div v-if="plan.filters.length === 0" class="text-caption text-medium-emphasis">No filters.</div>
+          <div v-for="f in plan.filters" :key="f.name" class="sk-nav">
+            <div class="d-flex flex-wrap align-center ga-2">
+              <span class="font-weight-medium">{{ f.name }}</span>
+              <code class="text-caption">{{ f.implementingClass }}</code>
+              <v-chip size="x-small" variant="outlined" :color="ORIGIN[f.origin].color">
+                {{ ORIGIN[f.origin].label }}
+              </v-chip>
+              <v-chip v-if="f.strategy?.learnable" size="x-small" variant="outlined">learnable weight</v-chip>
+              <v-chip
+                size="x-small"
+                variant="tonal"
+                :color="filterKind(f).kind === 'gate' ? 'deep-orange' : 'blue-grey'"
+                :title="filterKind(f).help"
+              >
+                {{ filterKind(f).label }}
+              </v-chip>
+            </div>
+            <div v-if="f.strategy?.description" class="text-caption mt-1">{{ f.strategy.description }}</div>
+            <div v-else-if="!f.strategy" class="text-caption mt-1 text-medium-emphasis">
+              Built in code; no strategy document.
+            </div>
+
+            <div v-if="stats" class="mt-1">
+              <template v-if="filterStat(f.name)">
+                <div class="sk-impact-bar">
+                  <div
+                    v-for="part in impactParts(filterStat(f.name)!)"
+                    :key="part.key"
+                    :class="`bg-${part.color}`"
+                    :style="{ width: `${part.share * 100}%` }"
+                    :title="`${part.key}: ${part.count}`"
+                  />
+                </div>
+                <div class="text-caption">
+                  over {{ filterStat(f.name)!.runs }} runs:
+                  <span v-for="part in impactParts(filterStat(f.name)!)" :key="part.key" class="mr-2">
+                    <span :class="`text-${part.color}`">●</span> {{ part.key }} {{ fmtPct(part.share) }}
+                  </span>
+                </div>
+              </template>
+              <span v-else class="text-caption text-medium-emphasis">absent from these runs</span>
+            </div>
+
+            <div v-if="prettyConfig(f.strategy?.serializedData)" class="mt-1">
+              <a class="sk-config-link text-caption" @click="toggleConfig(`f:${f.name}`)">
+                {{ openConfigs.has(`f:${f.name}`) ? 'Hide' : 'Show' }} config
+              </a>
+              <pre v-if="openConfigs.has(`f:${f.name}`)" class="sk-config">{{
+                prettyConfig(f.strategy?.serializedData)
+              }}</pre>
+            </div>
+          </div>
+        </template>
+
+        <template v-else-if="stage.key === 'regulate'">
+          <div class="sk-nav">
+            <div class="d-flex flex-wrap align-center ga-2">
+              <span class="font-weight-medium">Review mass</span>
+              <v-chip size="x-small" variant="outlined">on review cards</v-chip>
+            </div>
+            <div class="text-caption mt-1">
+              Each due review weighs its SRS urgency (0–1) times the filters' net effect on it. Above
+              {{ plan.regulators.reviewMass.healthyMass }} card-equivalents, every review is multiplied by ×{{
+                plan.regulators.reviewMass.rate
+              }}
+              per {{ plan.regulators.reviewMass.healthyMass }} in excess (uncapped). Reviews without an urgency weigh
+              their score against {{ plan.regulators.reviewMass.referenceScore }}.
+            </div>
+            <div v-if="regStat('review-mass')" class="text-caption mt-1">
+              {{ regStatText(regStat('review-mass')!) }}
+            </div>
+          </div>
+          <div class="sk-nav">
+            <div class="d-flex flex-wrap align-center ga-2">
+              <span class="font-weight-medium">Intake</span>
+              <v-chip size="x-small" variant="outlined">on new cards no gate penalized</v-chip>
+            </div>
+            <div class="text-caption mt-1">
+              ×{{ plan.regulators.intake.rate }} per {{ plan.regulators.intake.scaleHours }} hours since a new card was
+              last presented (uncapped). The clock stops while no eligible new card exists.
+            </div>
+            <div v-if="regStat('intake')" class="text-caption mt-1">{{ regStatText(regStat('intake')!) }}</div>
+          </div>
+          <div v-if="stats && stats.regulators.length === 0" class="text-caption text-medium-emphasis">
+            None of these runs recorded regulator readings (recorded from 0.2.29).
+          </div>
+        </template>
+
+        <template v-else-if="stage.key === 'select' && stats && stats.runsWithSelection > 0">
+          <div class="text-caption">
+            {{ stats.selectedUnattributed }} selected card(s) had no generator: forced in by a hint's
+            <code>requireCards</code>.
+          </div>
+        </template>
+      </div>
+      <div v-if="i < PIPELINE_STAGES.length - 1" class="sk-stage-arrow">
+        <v-icon size="small">mdi-arrow-down</v-icon>
+      </div>
+    </div>
+
+    <div v-if="stats && stats.runsWithSelection === 0" class="text-caption text-medium-emphasis mt-3">
+      None of these runs recorded which cards they selected (recorded from 0.2.28), so selection and first-attempt
+      counts are not shown.
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import {
+  PIPELINE_STAGES,
+  planPipeline,
+  type ContentNavigationStrategyData,
+  type PlannedNavigator,
+  type PlannedNavigatorOrigin,
+} from '@vue-skuilder/db';
+import {
+  regulatorText,
+  type FilterKind,
+  type FilterRunStat,
+  type GeneratorRunStat,
+  type PipelineRunStats,
+  type RegulatorName,
+  type RegulatorRunStat,
+} from '@vue-skuilder/db/diagnostics';
+import { accuracyClass, fmtTime } from '../display';
+
+/**
+ * A course's navigation pipeline as it assembles in this app: each stage in
+ * run order, which generators and filters run in it, and where each came from.
+ * With `stats` (from `pipelineRunStats`), each piece also shows what it did
+ * across a learner's persisted runs. Stats join to the plan by name.
+ */
+const props = defineProps<{
+  strategies: ContentNavigationStrategyData[];
+  courseId: string;
+  stats?: PipelineRunStats;
+  /** Whose runs the stats cover, e.g. a username. */
+  statsLabel?: string;
+}>();
+
+const ORIGIN: Record<PlannedNavigatorOrigin, { label: string; color: string }> = {
+  'strategy-doc': { label: 'strategy doc', color: 'primary' },
+  'assembler-default': { label: 'added by the assembler', color: 'secondary' },
+  'default-pipeline': { label: 'default pipeline', color: 'warning' },
+};
+
+const regStat = (name: RegulatorName): RegulatorRunStat | undefined =>
+  props.stats?.regulators.find((r) => r.name === name);
+
+function regStatText(r: RegulatorRunStat): string {
+  return (
+    `In these runs: active (×>1) in ${r.runsActive}/${r.runs}, mean ×${r.meanMultiplier.toFixed(2)}, ` +
+    `max ×${r.maxMultiplier.toFixed(2)}. Last: ${regulatorText(r.last)}.`
+  );
+}
+
+const KIND_HELP: Record<FilterKind, string> = {
+  gate: 'Gate: its penalties mean not ready yet; regulators will not lift what it penalized.',
+  signal: 'Signal: its penalties express preference.',
+};
+
+/**
+ * A filter's kind: as its class declares it (the plan), else as recorded by
+ * runs. Undeclared filters run as gates.
+ */
+function filterKind(f: PlannedNavigator): { kind: FilterKind; label: string; help: string } {
+  const kind = f.kind ?? filterStat(f.name)?.kind;
+  if (kind) return { kind, label: kind, help: KIND_HELP[kind] };
+  return {
+    kind: 'gate',
+    label: 'gate (undeclared)',
+    help: `${KIND_HELP.gate} Its class declares no kind, so it counts as a gate.`,
+  };
+}
+
+const plan = computed(() => planPipeline(props.strategies, props.courseId));
+
+const genStats = computed(() => new Map((props.stats?.generators ?? []).map((g) => [g.name, g])));
+const filterStats = computed(() => new Map((props.stats?.filters ?? []).map((f) => [f.name, f])));
+const genStat = (name: string): GeneratorRunStat | undefined => genStats.value.get(name);
+const filterStat = (name: string): FilterRunStat | undefined => filterStats.value.get(name);
+
+/** The plan's notes, plus what the run stats show about pieces that did nothing. */
+const notes = computed(() => {
+  const out = [...plan.value.notes];
+  const stats = props.stats;
+  if (!stats) return out;
+  for (const f of plan.value.filters) {
+    const s = filterStat(f.name);
+    if (s && s.boosted + s.penalized + s.removed === 0) {
+      out.push(`${f.name} changed no candidate's score in ${s.runs} runs.`);
+    }
+  }
+  if (stats.runsWithSelection > 0) {
+    for (const g of plan.value.generators) {
+      const s = genStat(g.name);
+      if (s && s.runs > 0 && s.selected === 0) {
+        out.push(`${g.name} proposed candidates in ${s.runs} runs, and none was selected.`);
+      }
+    }
+  }
+  return out;
+});
+
+function accuracyOf(g: GeneratorRunStat): number | null {
+  return g.firstAttempts > 0 ? g.firstAttemptsCorrect / g.firstAttempts : null;
+}
+
+function impactParts(f: FilterRunStat) {
+  const total = f.boosted + f.penalized + f.passed + f.removed || 1;
+  return [
+    { key: 'boosted', count: f.boosted, color: 'success' },
+    { key: 'penalized', count: f.penalized, color: 'warning' },
+    { key: 'passed', count: f.passed, color: 'grey' },
+    { key: 'removed', count: f.removed, color: 'error' },
+  ].map((p) => ({ ...p, share: p.count / total }));
+}
+
+function fmtNum(n: number): string {
+  return n >= 10 ? Math.round(n).toString() : n.toFixed(1);
+}
+
+function fmtPct(share: number): string {
+  if (share === 0) return '0%';
+  return share < 0.01 ? '<1%' : `${Math.round(share * 100)}%`;
+}
+
+const openConfigs = ref(new Set<string>());
+
+function toggleConfig(key: string): void {
+  const next = new Set(openConfigs.value);
+  if (next.has(key)) next.delete(key);
+  else next.add(key);
+  openConfigs.value = next;
+}
+
+/** A strategy's serializedData, pretty-printed when it's JSON; '' when there's nothing to show. */
+function prettyConfig(serialized: string | undefined): string {
+  if (!serialized) return '';
+  try {
+    const parsed: unknown = JSON.parse(serialized);
+    const text = JSON.stringify(parsed, null, 2);
+    return text === '{}' ? '' : text;
+  } catch {
+    return serialized;
+  }
+}
+</script>
+
+<style scoped>
+.sk-stage {
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.12);
+  border-radius: 6px;
+  padding: 10px 12px;
+}
+.sk-stage-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin-right: 8px;
+  font-size: 0.72rem;
+  background: rgba(var(--v-theme-primary), 0.15);
+  color: rgb(var(--v-theme-primary));
+}
+.sk-stage-arrow {
+  display: flex;
+  justify-content: center;
+  padding: 2px 0;
+  opacity: 0.5;
+}
+.sk-nav {
+  border-left: 2px solid rgba(var(--v-theme-primary), 0.25);
+  padding: 4px 0 4px 10px;
+  margin: 6px 0 6px 2px;
+}
+.sk-impact-bar {
+  display: flex;
+  height: 6px;
+  border-radius: 3px;
+  overflow: hidden;
+  background: rgba(var(--v-theme-on-surface), 0.06);
+  max-width: 420px;
+  margin: 4px 0 2px;
+}
+.sk-config-link {
+  cursor: pointer;
+  border-bottom: 1px dotted rgba(var(--v-theme-on-surface), 0.3);
+}
+.sk-config {
+  font-size: 0.72rem;
+  background: rgba(var(--v-theme-on-surface), 0.04);
+  border-radius: 4px;
+  padding: 6px 8px;
+  margin: 4px 0 0;
+  max-height: 260px;
+  overflow: auto;
+  white-space: pre-wrap;
+}
+</style>

package/src/admin/components/RunDetail.vue

@@ -30,6 +30,7 @@
         <thead>
           <tr>
             <th></th>
+            <th>kind</th>
             <th class="text-right">boosted</th>
             <th class="text-right">penalized</th>
             <th class="text-right">passed</th>
@@ -39,6 +40,7 @@
         <tbody>
           <tr v-for="f in run.filters" :key="f.name">
             <td>{{ f.name }}</td>
+            <td>{{ f.kind ?? '—' }}</td>
             <td class="text-right">{{ f.boosted }}</td>
             <td class="text-right">{{ f.penalized }}</td>
             <td class="text-right">{{ f.passed }}</td>
@@ -48,6 +50,16 @@
       </v-table>
     </div>
 
+    <div v-if="run.regulators?.length" class="mb-2">
+      <div class="text-caption font-weight-medium">regulators</div>
+      <div v-for="r in run.regulators" :key="r.name" class="sk-mini-line">
+        <span :class="r.multiplier > 1 ? 'text-warning' : 'text-medium-emphasis'">
+          ×{{ r.multiplier.toFixed(2) }}
+        </span>
+        {{ regulatorText(r) }}
+      </div>
+    </div>
+
     <div v-if="run.cards?.length" class="mb-2">
       <div class="text-caption font-weight-medium">selection</div>
       <v-table density="compact" class="sk-mini-table">
@@ -117,7 +129,11 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import type { StudySessionRunCardTrail, StudySessionRunSummary } from '@vue-skuilder/db/diagnostics';
+import {
+  regulatorText,
+  type StudySessionRunCardTrail,
+  type StudySessionRunSummary,
+} from '@vue-skuilder/db/diagnostics';
 
 /** The persisted detail of one pipeline run. */
 const props = defineProps<{ run: StudySessionRunSummary }>();
@@ -146,6 +162,10 @@ function fmtScore(n: number): string {
 .sk-mini-table :deep(th) {
   font-size: 0.72rem;
 }
+.sk-mini-line {
+  font-size: 0.72rem;
+  padding-left: 8px;
+}
 .sk-hint-block {
   font-size: 0.72rem;
   background: rgba(var(--v-theme-on-surface), 0.04);

package/src/admin/index.ts

@@ -25,3 +25,4 @@ export { default as LearnerSessionDetail } from './components/LearnerSessionDeta
 export { default as LearnerCardHistory } from './components/LearnerCardHistory.vue';
 export { default as CardDossierDetail } from './components/CardDossierDetail.vue';
 export { default as RunDetail } from './components/RunDetail.vue';
+export { default as PipelineOverview } from './components/PipelineOverview.vue';