@vue-skuilder/common-ui 0.2.27 → 0.2.28

package/src/admin/components/RunDetail.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="sk-run-detail">
+    <div v-if="run.generators?.length" class="mb-2">
+      <div class="text-caption font-weight-medium">generators</div>
+      <v-table density="compact" class="sk-mini-table">
+        <thead>
+          <tr>
+            <th></th>
+            <th class="text-right">cards</th>
+            <th class="text-right">new</th>
+            <th class="text-right">review</th>
+            <th class="text-right">top</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="g in run.generators" :key="g.name">
+            <td>{{ g.name }}</td>
+            <td class="text-right">{{ g.cardCount }}</td>
+            <td class="text-right">{{ g.newCount }}</td>
+            <td class="text-right">{{ g.reviewCount }}</td>
+            <td class="text-right">{{ g.topScore.toFixed(2) }}</td>
+          </tr>
+        </tbody>
+      </v-table>
+    </div>
+
+    <div v-if="run.filters?.length" class="mb-2">
+      <div class="text-caption font-weight-medium">filters</div>
+      <v-table density="compact" class="sk-mini-table">
+        <thead>
+          <tr>
+            <th></th>
+            <th class="text-right">boosted</th>
+            <th class="text-right">penalized</th>
+            <th class="text-right">passed</th>
+            <th class="text-right">removed</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="f in run.filters" :key="f.name">
+            <td>{{ f.name }}</td>
+            <td class="text-right">{{ f.boosted }}</td>
+            <td class="text-right">{{ f.penalized }}</td>
+            <td class="text-right">{{ f.passed }}</td>
+            <td class="text-right" :class="f.removed > 0 ? 'text-error' : ''">{{ f.removed }}</td>
+          </tr>
+        </tbody>
+      </v-table>
+    </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">
+        <thead>
+          <tr>
+            <th></th>
+            <th>card</th>
+            <th>origin</th>
+            <th>generator</th>
+            <th class="text-right">score</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="c in run.cards" :key="c.cardId" :class="c.selected ? '' : 'text-medium-emphasis'">
+            <td>
+              <v-icon v-if="c.selected" size="x-small" color="success">mdi-check</v-icon>
+              <span v-else title="runner-up">·</span>
+            </td>
+            <td>
+              <a class="sk-card-link" @click="emit('open-card', c.cardId)">{{ c.cardId }}</a>
+            </td>
+            <td>{{ c.origin }}</td>
+            <td>{{ c.generator ?? '—' }}</td>
+            <td class="text-right">{{ fmtScore(c.score) }}</td>
+          </tr>
+        </tbody>
+      </v-table>
+    </div>
+
+    <div v-for="t in trails" :key="t.label" class="mb-2">
+      <div class="text-caption font-weight-medium">
+        {{ t.label }}:
+        <a class="sk-card-link" @click="emit('open-card', t.card.cardId)">{{ t.card.cardId }}</a>
+        <span class="text-medium-emphasis">
+          ({{ t.card.origin }}, {{ t.card.generator ?? '?' }}) final {{ fmtScore(t.card.score) }}
+        </span>
+      </div>
+      <v-table density="compact" class="sk-mini-table">
+        <tbody>
+          <tr v-for="(p, i) in t.card.trail" :key="i">
+            <td class="text-no-wrap">{{ p.action }}</td>
+            <td class="text-no-wrap">{{ p.strategyName }}</td>
+            <td class="text-right text-no-wrap">{{ fmtScore(p.score) }}</td>
+            <td class="text-caption">{{ p.reason }}</td>
+          </tr>
+        </tbody>
+      </v-table>
+    </div>
+
+    <div v-if="run.hints" class="mb-2">
+      <div class="text-caption font-weight-medium">hints</div>
+      <pre class="sk-hint-block">{{ JSON.stringify(run.hints, null, 2) }}</pre>
+    </div>
+
+    <div v-if="run.discardedTail" class="text-caption text-medium-emphasis">
+      discarded tail: {{ run.discardedTail.count }} cards
+      <template v-if="run.discardedTail.scoreRange">
+        · score [{{ run.discardedTail.scoreRange[0].toFixed(2) }}, {{ run.discardedTail.scoreRange[1].toFixed(2) }}]
+      </template>
+      <template v-if="run.discardedTail.eloRange">
+        · ELO [{{ Math.round(run.discardedTail.eloRange[0]) }}, {{ Math.round(run.discardedTail.eloRange[1]) }}]
+      </template>
+      <div v-if="run.discardedTail.note">{{ run.discardedTail.note }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { StudySessionRunCardTrail, StudySessionRunSummary } from '@vue-skuilder/db/diagnostics';
+
+/** The persisted detail of one pipeline run. */
+const props = defineProps<{ run: StudySessionRunSummary }>();
+const emit = defineEmits<{ 'open-card': [cardId: string] }>();
+
+const trails = computed(() => {
+  const u = props.run.unselectedNew;
+  const out: Array<{ label: string; card: StudySessionRunCardTrail }> = [];
+  if (u?.nextInLine) out.push({ label: 'next new card in line', card: u.nextInLine });
+  if (u?.topGenerated) out.push({ label: 'top-generated new card (sunk)', card: u.topGenerated });
+  return out;
+});
+
+function fmtScore(n: number): string {
+  return Math.abs(n) >= 0.01 || n === 0 ? n.toFixed(2) : n.toExponential(1);
+}
+</script>
+
+<style scoped>
+.sk-run-detail {
+  border-left: 2px solid rgba(var(--v-theme-primary), 0.25);
+  padding-left: 10px;
+  margin-left: 2px;
+}
+.sk-mini-table :deep(td),
+.sk-mini-table :deep(th) {
+  font-size: 0.72rem;
+}
+.sk-hint-block {
+  font-size: 0.72rem;
+  background: rgba(var(--v-theme-on-surface), 0.04);
+  border-radius: 4px;
+  padding: 6px 8px;
+  margin: 0;
+  max-height: 140px;
+  overflow: auto;
+  white-space: pre-wrap;
+}
+.sk-card-link {
+  cursor: pointer;
+  border-bottom: 1px dotted rgba(var(--v-theme-on-surface), 0.3);
+}
+.sk-card-link:hover {
+  color: rgb(var(--v-theme-primary));
+}
+</style>

package/src/admin/composables/useLearnerDataset.ts

@@ -0,0 +1,66 @@
+import { ref, shallowRef } from 'vue';
+import {
+  dumpFileName,
+  fetchLearnerDump,
+  fromDump,
+  parseLearnerDump,
+  type LearnerDataset,
+  type LearnerDump,
+} from '@vue-skuilder/db/diagnostics';
+
+/** Where to read a learner from live. Auth is the signed-in admin's couch session cookie. */
+export interface LearnerCouchSource {
+  /** Couch base URL, e.g. `https://example.com/couch`. */
+  couchUrl: string;
+  username: string;
+  courseId: string;
+  /** Course cards to include. Default `touched`. */
+  cards?: 'touched' | 'all' | 'none';
+}
+
+/**
+ * Load one learner's dataset for admin views, live from couch or from a dump
+ * file (`skuilder dump-user`, or a file saved from here). Keeps the raw dump
+ * so a view can hand exactly what it showed back out as a file.
+ */
+export function useLearnerDataset() {
+  const dump = shallowRef<LearnerDump | null>(null);
+  const dataset = shallowRef<LearnerDataset | null>(null);
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+
+  async function load(read: () => Promise<LearnerDump>, courseId?: string): Promise<void> {
+    loading.value = true;
+    error.value = null;
+    try {
+      const d = await read();
+      dataset.value = fromDump(d, courseId);
+      dump.value = d;
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : String(e);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function loadFromCouch(source: LearnerCouchSource): Promise<void> {
+    return load(() => fetchLearnerDump({ ...source, auth: { kind: 'cookie' } }), source.courseId);
+  }
+
+  function loadFromFile(file: File, courseId?: string): Promise<void> {
+    return load(async () => parseLearnerDump(await file.text()), courseId);
+  }
+
+  return { dump, dataset, loading, error, loadFromCouch, loadFromFile };
+}
+
+/** Save a dump under the same name `skuilder dump-user` would give it. */
+export function downloadLearnerDump(dump: LearnerDump): void {
+  const blob = new Blob([JSON.stringify(dump, null, 2)], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = dumpFileName(dump);
+  a.click();
+  URL.revokeObjectURL(url);
+}

package/src/admin/display.ts

@@ -0,0 +1,73 @@
+// Display-only helpers shared by the admin views: colours, icons, and
+// locale-formatted times. Anything a text export also needs lives in
+// @vue-skuilder/db/diagnostics instead.
+import { ref, type Ref } from 'vue';
+import type { SessionFlag } from '@vue-skuilder/db/diagnostics';
+
+export const FLAG_UI: Record<SessionFlag, { icon: string; color: string }> = {
+  churned: { icon: 'mdi-autorenew', color: 'warning' },
+  'out-of-content': { icon: 'mdi-cup-off-outline', color: 'error' },
+  walked: { icon: 'mdi-exit-run', color: 'error' },
+  stalled: { icon: 'mdi-arrow-collapse-horizontal', color: 'grey' },
+  grinding: { icon: 'mdi-alert-octagon-outline', color: 'warning' },
+};
+
+export function statusColor(status: string): string {
+  if (status === 'closed') return 'success';
+  if (status === 'abandoned') return 'warning';
+  return 'error'; // 'open': the tab went away before close
+}
+
+export function accuracyClass(a: number | null): string {
+  if (a === null) return 'text-disabled';
+  if (a >= 0.8) return 'text-success';
+  if (a < 0.5) return 'text-error';
+  return '';
+}
+
+export function deltaClass(d: number | null): string {
+  if (d === null || d === 0) return 'text-disabled';
+  return d > 0 ? 'text-success' : 'text-error';
+}
+
+export function deltaColor(d: number): string {
+  if (d > 0) return 'success';
+  if (d < 0) return 'error';
+  return 'grey';
+}
+
+export function fmtTime(iso: string | null | undefined): string {
+  if (!iso) return '—';
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime()) ? iso : d.toLocaleString();
+}
+
+/** Time of day only: a session timeline reads as a within-sitting sequence. */
+export function fmtClock(iso: string): string {
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime()) ? iso : d.toLocaleTimeString(undefined, { hour12: false });
+}
+
+export function shortId(id: string, max = 28): string {
+  return id.length > max ? `…${id.slice(-(max - 2))}` : id;
+}
+
+/** Copy text, and remember which control asked, briefly, for a tick. */
+export function useCopy(): {
+  copied: Ref<string | null>;
+  copy: (text: string, key: string) => Promise<void>;
+} {
+  const copied = ref<string | null>(null);
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  async function copy(text: string, key: string): Promise<void> {
+    try {
+      await navigator.clipboard.writeText(text);
+      copied.value = key;
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => (copied.value = null), 1400);
+    } catch (e) {
+      console.warn('[admin] clipboard write failed', e);
+    }
+  }
+  return { copied, copy };
+}

package/src/admin/index.ts

@@ -0,0 +1,27 @@
+/**
+ * `@vue-skuilder/common-ui/admin`: admin and diagnostics components.
+ *
+ * A separate entry (built by vite.config.admin.js) so learner-facing bundles
+ * don't carry it. Views here render a `LearnerDataset` from
+ * `@vue-skuilder/db/diagnostics`, whether it came from couch or a dump file,
+ * and take the course's `DiagnosticsInterpreters` for domain meaning.
+ *
+ * Built CSS: import '@vue-skuilder/common-ui/admin/style' where these render.
+ *
+ * Import shared common-ui pieces from '@vue-skuilder/common-ui', not
+ * '@cui/...', so the admin bundle doesn't duplicate them.
+ */
+
+export {
+  useLearnerDataset,
+  downloadLearnerDump,
+  type LearnerCouchSource,
+} from './composables/useLearnerDataset';
+
+export { default as LearnerDatasetSource } from './components/LearnerDatasetSource.vue';
+export { default as LearnerDiagnostics } from './components/LearnerDiagnostics.vue';
+export { default as LearnerSessionList } from './components/LearnerSessionList.vue';
+export { default as LearnerSessionDetail } from './components/LearnerSessionDetail.vue';
+export { default as LearnerCardHistory } from './components/LearnerCardHistory.vue';
+export { default as CardDossierDetail } from './components/CardDossierDetail.vue';
+export { default as RunDetail } from './components/RunDetail.vue';