@vue-skuilder/common-ui 0.2.27 → 0.2.28

package/src/admin/components/LearnerSessionDetail.vue

@@ -0,0 +1,439 @@
+<template>
+  <div>
+    <v-alert v-if="!detail" type="info" variant="tonal">No session with id {{ sessionId }}.</v-alert>
+
+    <template v-else>
+      <div class="d-flex align-center flex-wrap mb-4 ga-2">
+        <v-chip size="small" variant="flat" :color="statusColor(doc.status)">{{ doc.status }}</v-chip>
+        <v-chip size="small" variant="tonal">{{ fmtTime(doc.startTime) }}</v-chip>
+        <v-chip size="small" variant="tonal" color="grey">{{ clockText }}</v-chip>
+        <v-chip
+          v-for="f in detail.summary.flags"
+          :key="f"
+          size="small"
+          variant="tonal"
+          :color="FLAG_UI[f].color"
+          :title="SESSION_FLAGS[f].help"
+        >
+          <v-icon start size="small">{{ FLAG_UI[f].icon }}</v-icon>
+          {{ SESSION_FLAGS[f].label }}
+        </v-chip>
+        <v-spacer />
+        <code class="text-caption text-medium-emphasis">{{ sessionId }}</code>
+        <v-btn
+          variant="text"
+          size="small"
+          :prepend-icon="copied === 'session' ? 'mdi-check' : 'mdi-clipboard-text-outline'"
+          :color="copied === 'session' ? 'success' : undefined"
+          @click="copy(asText(), 'session')"
+        >
+          {{ copied === 'session' ? 'Copied' : 'Copy as text' }}
+        </v-btn>
+      </div>
+
+      <v-alert v-if="detail.responsesMissing" type="warning" variant="tonal" density="compact" class="mb-4">
+        The session records {{ doc.tally?.responses }} responses but only {{ responseCount }} card records carry its id.
+        The timeline is incomplete.
+      </v-alert>
+
+      <v-row class="mb-2">
+        <v-col cols="12" md="6">
+          <v-card variant="outlined" class="pa-3 h-100">
+            <div class="text-subtitle-2 mb-1">Learner state</div>
+            <div class="text-caption text-medium-emphasis mb-3">
+              What the navigator was choosing against, and what moved.
+            </div>
+            <v-table v-if="detail.summary.state.length" density="compact" class="sk-mini-table">
+              <thead>
+                <tr>
+                  <th></th>
+                  <th class="text-right">Start</th>
+                  <th class="text-right">End</th>
+                  <th class="text-right">Δ</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="row in detail.summary.state" :key="row.label">
+                  <td>{{ row.label }}</td>
+                  <td class="text-right">{{ fmtNum(row.from) }}</td>
+                  <td class="text-right">{{ fmtNum(row.to) }}</td>
+                  <td class="text-right" :class="deltaClass(row.delta)">{{ fmtDelta(row.delta) }}</td>
+                </tr>
+              </tbody>
+            </v-table>
+            <div v-else class="text-caption text-disabled">No state snapshot recorded.</div>
+          </v-card>
+        </v-col>
+
+        <v-col cols="12" md="6">
+          <v-card variant="outlined" class="pa-3 h-100">
+            <div class="text-subtitle-2 mb-1">Session hints</div>
+            <div class="text-caption text-medium-emphasis mb-3">
+              What outcome observers told the navigator. They act only through these.
+            </div>
+            <span class="text-caption font-weight-medium">at open</span>
+            <pre class="sk-hint-block">{{ fmtHints(doc.config?.initHints) }}</pre>
+            <span class="text-caption font-weight-medium">at close</span>
+            <pre class="sk-hint-block">{{ fmtHints(doc.finalHints) }}</pre>
+          </v-card>
+        </v-col>
+      </v-row>
+
+      <div class="text-caption text-medium-emphasis mb-4">
+        batch limit {{ doc.config?.defaultBatchLimit ?? '?' }} · {{ doc.config?.sourceCount ?? '?' }} source(s) ·
+        opening queues supply {{ doc.initialQueues?.supplyQ ?? '?' }} / failed {{ doc.initialQueues?.failedQ ?? '?' }}
+        <template v-if="doc.tally"> · ended with {{ doc.tally.failedQRemaining }} still in the failed queue</template>
+      </div>
+
+      <v-card v-if="tags.length" variant="outlined" class="pa-3 mb-4">
+        <div class="text-subtitle-2 mb-1">Served tags</div>
+        <div class="text-caption text-medium-emphasis mb-2">
+          What this sitting put in front of the learner, by content tag. A response with several tags counts toward
+          each.
+        </div>
+        <v-table density="compact" class="sk-mini-table">
+          <thead>
+            <tr>
+              <th>Tag</th>
+              <th class="text-right">Resp.</th>
+              <th class="text-right">Cards</th>
+              <th class="text-right">Accuracy</th>
+              <th class="text-right">Time</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="t in tags" :key="t.tag">
+              <td>
+                <code :class="isSkillTag(interpreters, t.tag) ? 'text-primary' : ''">{{ t.tag }}</code>
+              </td>
+              <td class="text-right">{{ t.responses }}</td>
+              <td class="text-right">{{ t.cards }}</td>
+              <td class="text-right" :class="accuracyClass(t.accuracy)">
+                <template v-if="t.accuracy === null">—</template>
+                <template v-else>
+                  {{ Math.round(t.accuracy * 100) }}%
+                  <span class="text-disabled">({{ t.correct }}/{{ t.correct + t.incorrect }})</span>
+                </template>
+              </td>
+              <td class="text-right">{{ (t.totalTimeMs / 1000).toFixed(1) }}s</td>
+            </tr>
+          </tbody>
+        </v-table>
+      </v-card>
+
+      <v-card v-if="ledger" variant="outlined" class="pa-3 mb-4">
+        <div class="text-subtitle-2 mb-1">ELO ledger</div>
+        <div class="text-caption text-medium-emphasis mb-3">
+          The per-response learner global-ELO exchanges that net to the session's ELO move. Wins above the learner's
+          level pay little; losses below it cost a lot, so a high hit rate can still net negative.
+        </div>
+        <div class="d-flex flex-wrap ga-5">
+          <div>
+            <div class="text-caption text-medium-emphasis">net</div>
+            <div class="text-h6" :class="deltaClass(ledger.net)">{{ fmtDelta(ledger.net) }}</div>
+          </div>
+          <div>
+            <div class="text-caption text-medium-emphasis">gained · {{ ledger.wins }} win(s)</div>
+            <div class="text-h6 text-success">{{ fmtDelta(ledger.gained) }}</div>
+          </div>
+          <div>
+            <div class="text-caption text-medium-emphasis">lost · {{ ledger.losses }} loss(es)</div>
+            <div class="text-h6 text-error">{{ fmtDelta(ledger.lost) }}</div>
+          </div>
+          <div>
+            <div class="text-caption text-medium-emphasis">exchanges</div>
+            <div class="text-h6">{{ ledger.count }}</div>
+            <div class="text-caption text-disabled">of {{ responseCount }} response(s)</div>
+          </div>
+        </div>
+      </v-card>
+
+      <div class="d-flex align-center flex-wrap mb-2 ga-3">
+        <h2 class="text-h6">Timeline</h2>
+        <v-btn-toggle v-model="show" density="compact" color="primary" variant="outlined">
+          <v-btn value="all" size="small">All ({{ detail.timeline.length }})</v-btn>
+          <v-btn value="response" size="small">Responses ({{ responseCount }})</v-btn>
+          <v-btn value="run" size="small">Runs ({{ detail.timeline.length - responseCount }})</v-btn>
+        </v-btn-toggle>
+      </div>
+
+      <v-alert v-if="detail.timeline.length === 0" type="info" variant="tonal"
+        >Nothing recorded for this session.</v-alert
+      >
+
+      <div v-else class="sk-timeline">
+        <div v-for="(e, i) in visibleTimeline" :key="i" class="sk-tl-row" :class="rowClass(e)">
+          <div class="sk-tl-time text-caption text-disabled">{{ fmtClock(e.at) }}</div>
+          <div class="sk-tl-gutter">
+            <v-icon size="small" :color="entryColor(e)">{{ entryIcon(e) }}</v-icon>
+          </div>
+
+          <div v-if="e.kind === 'run'" class="sk-tl-body">
+            <div class="d-flex align-center flex-wrap ga-1">
+              <span class="font-weight-medium">{{ e.run.label }}</span>
+              <v-chip v-if="e.run.mode" size="x-small" variant="tonal">{{ e.run.mode }}</v-chip>
+              <span class="text-caption text-medium-emphasis ml-2">
+                generated {{ e.run.generatedCount }} → selected {{ e.run.finalCount }} ({{ e.run.newSelected }} new,
+                {{ e.run.reviewsSelected }} review)
+              </span>
+              <span v-if="e.run.generatedCount > 0 && e.run.finalCount === 0" class="text-caption text-error ml-2">
+                nothing survived
+              </span>
+              <v-chip v-if="typeof e.run.userElo === 'number'" size="x-small" variant="tonal" color="grey" class="ml-2">
+                ELO {{ Math.round(e.run.userElo) }}
+              </v-chip>
+              <v-spacer />
+              <v-btn
+                :icon="expanded.has(e.run.runId) ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+                size="x-small"
+                variant="text"
+                @click="toggle(e.run.runId)"
+              />
+              <v-btn
+                :icon="copied === e.run.runId ? 'mdi-check' : 'mdi-content-copy'"
+                size="x-small"
+                variant="text"
+                :color="copied === e.run.runId ? 'success' : undefined"
+                title="Copy run as text"
+                @click="copy(runText(e.run), e.run.runId)"
+              />
+            </div>
+            <run-detail
+              v-if="expanded.has(e.run.runId)"
+              :run="e.run"
+              class="mt-1"
+              @open-card="(id: string) => emit('open-card', id)"
+            />
+          </div>
+
+          <div v-else class="sk-tl-body">
+            <a class="sk-card-link" :title="`Open ${e.cardId} in card history`" @click="emit('open-card', e.cardId)">
+              {{ e.questionType ?? 'card' }} <code class="text-caption">{{ shortId(e.cardId) }}</code>
+            </a>
+            <v-chip
+              v-for="t in skillTags(e.tags)"
+              :key="t"
+              size="x-small"
+              variant="outlined"
+              color="primary"
+              class="ml-1"
+            >
+              {{ shortTag(interpreters, t) }}
+            </v-chip>
+            <span class="text-caption text-medium-emphasis ml-2">
+              {{ (e.timeSpentMs / 1000).toFixed(1) }}s
+              <template v-if="e.priorAttempts"> · attempt {{ e.priorAttempts + 1 }}</template>
+            </span>
+            <span v-if="e.userAnswer != null" class="text-caption text-disabled ml-2"
+              >“{{ fmtAnswer(e.userAnswer) }}”</span
+            >
+            <template v-if="e.elo">
+              <v-chip
+                size="x-small"
+                variant="tonal"
+                :color="deltaColor(e.elo.global.delta)"
+                class="ml-2"
+                :title="`learner global ELO ${e.elo.global.before} → ${e.elo.global.after} · userScore ${e.elo.userScore.toFixed(2)}`"
+              >
+                ELO {{ fmtDelta(e.elo.global.delta) }}
+              </v-chip>
+              <v-chip
+                v-for="t in scoredTagDeltas(e.elo)"
+                :key="t.tag"
+                size="x-small"
+                variant="text"
+                :color="deltaColor(t.delta)"
+                class="sk-elo-tag"
+                :title="`${t.tag}: ${t.before} → ${t.after} (score ${t.score?.toFixed(2)})`"
+              >
+                {{ shortTag(interpreters, t.tag) }} {{ fmtDelta(t.delta) }}
+              </v-chip>
+            </template>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import {
+  eloLedger,
+  fmtAnswer,
+  fmtDelta,
+  fmtDuration,
+  isSkillTag,
+  runText,
+  scoredTagDeltas,
+  servedTags,
+  SESSION_FLAGS,
+  sessionDetail,
+  sessionText,
+  shortTag,
+  type DiagnosticsInterpreters,
+  type LearnerDataset,
+  type TimelineEntry,
+} from '@vue-skuilder/db/diagnostics';
+import {
+  accuracyClass,
+  deltaClass,
+  deltaColor,
+  FLAG_UI,
+  fmtClock,
+  fmtTime,
+  shortId,
+  statusColor,
+  useCopy,
+} from '../display';
+import RunDetail from './RunDetail.vue';
+
+/** One session: headline, state, hints, served tags, ELO ledger, and the interleaved timeline. */
+const props = defineProps<{
+  dataset: LearnerDataset;
+  sessionId: string;
+  interpreters?: DiagnosticsInterpreters;
+}>();
+
+const emit = defineEmits<{ 'open-card': [cardId: string] }>();
+
+const detail = computed(() => sessionDetail(props.dataset, props.sessionId, props.interpreters));
+const doc = computed(() => detail.value!.summary.doc);
+const tags = computed(() => servedTags(detail.value?.timeline ?? [], props.interpreters));
+const ledger = computed(() => eloLedger(detail.value?.timeline ?? []));
+const responseCount = computed(() => detail.value?.timeline.filter((e) => e.kind === 'response').length ?? 0);
+
+const show = ref<'all' | 'response' | 'run' | undefined>('all');
+const visibleTimeline = computed(() => {
+  const t = detail.value?.timeline ?? [];
+  return !show.value || show.value === 'all' ? t : t.filter((e) => e.kind === show.value);
+});
+
+const expanded = ref(new Set<string>());
+function toggle(runId: string): void {
+  const next = new Set(expanded.value);
+  if (next.has(runId)) next.delete(runId);
+  else next.add(runId);
+  expanded.value = next;
+}
+
+const { copied, copy } = useCopy();
+
+function asText(): string {
+  return detail.value
+    ? sessionText(
+        props.dataset.username,
+        detail.value,
+        { servedTags: tags.value, eloLedger: ledger.value },
+        props.interpreters
+      )
+    : '';
+}
+
+const clockText = computed(() => {
+  const s = detail.value?.summary;
+  if (!s) return '';
+  const planned = fmtDuration(s.doc.plannedSeconds);
+  return s.durationSeconds === null ? `— of ${planned}` : `${fmtDuration(s.durationSeconds)} of ${planned}`;
+});
+
+/** Skill tags inline, at most three. Without a course interpreter, none are singled out. */
+function skillTags(t: string[]): string[] {
+  return t.filter((tag) => isSkillTag(props.interpreters, tag)).slice(0, 3);
+}
+
+function fmtNum(n: number | null): string {
+  if (n === null) return '—';
+  return Number.isInteger(n) ? String(n) : n.toFixed(1);
+}
+
+function fmtHints(h: unknown): string {
+  return h == null ? 'none' : JSON.stringify(h, null, 2);
+}
+
+// Narrow the timeline union in script: vue-tsc handles discriminated unions
+// inside template bindings least reliably.
+function entryIcon(e: TimelineEntry): string {
+  if (e.kind === 'run') return 'mdi-cog-refresh-outline';
+  if (e.isCorrect === true) return 'mdi-check-circle-outline';
+  if (e.isCorrect === false) return 'mdi-close-circle-outline';
+  return 'mdi-circle-small';
+}
+
+function entryColor(e: TimelineEntry): string {
+  if (e.kind === 'run') return 'primary';
+  if (e.isCorrect === true) return 'success';
+  if (e.isCorrect === false) return 'error';
+  return 'grey';
+}
+
+function rowClass(e: TimelineEntry): string {
+  if (e.kind === 'run') return 'sk-tl-run';
+  return e.isCorrect === false ? 'sk-tl-fail' : '';
+}
+</script>
+
+<style scoped>
+.sk-mini-table :deep(td),
+.sk-mini-table :deep(th) {
+  font-size: 0.78rem;
+}
+.sk-hint-block {
+  font-size: 0.72rem;
+  background: rgba(var(--v-theme-on-surface), 0.04);
+  border-radius: 4px;
+  padding: 6px 8px;
+  margin: 0 0 8px;
+  max-height: 140px;
+  overflow: auto;
+  white-space: pre-wrap;
+}
+.sk-timeline {
+  border-left: 2px solid rgba(var(--v-theme-on-surface), 0.12);
+  margin-left: 62px;
+}
+.sk-tl-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 3px 8px 3px 0;
+  position: relative;
+}
+.sk-tl-time {
+  position: absolute;
+  left: -62px;
+  width: 56px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.sk-tl-gutter {
+  margin-left: -11px;
+  background: rgb(var(--v-theme-surface));
+  line-height: 1;
+}
+.sk-tl-body {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.82rem;
+}
+/* Runs are the navigator speaking: tint them so responses read as the
+   foreground stream and replans as punctuation between them. */
+.sk-tl-run {
+  background-color: rgba(var(--v-theme-primary), 0.05);
+}
+.sk-tl-fail {
+  background-color: rgba(var(--v-theme-error), 0.06);
+}
+.sk-card-link {
+  cursor: pointer;
+  color: inherit;
+  border-bottom: 1px dotted rgba(var(--v-theme-on-surface), 0.3);
+}
+.sk-card-link:hover {
+  color: rgb(var(--v-theme-primary));
+}
+.sk-elo-tag {
+  font-size: 0.68rem !important;
+  padding-inline: 4px !important;
+}
+</style>

package/src/admin/components/LearnerSessionList.vue

@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <p class="text-caption text-medium-emphasis mb-4">
+      One row per sitting. Flags name a specific way the session failed to do its job; open one to read its interleaved
+      timeline of responses and pipeline runs. <strong>Δ</strong> is movement across the session: ELO, then any progress
+      metrics the course declares.
+    </p>
+
+    <v-row dense class="mb-2">
+      <v-col v-for="tile in tiles" :key="tile.label" cols="6" sm="4" md="2">
+        <v-card variant="tonal" :color="tile.color" class="pa-2 text-center">
+          <div class="text-h6">{{ tile.value }}</div>
+          <div class="text-caption">{{ tile.label }}</div>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <div class="d-flex align-center flex-wrap mb-3 ga-3">
+      <v-btn-toggle v-model="filter" density="compact" color="primary" variant="outlined">
+        <v-btn value="all" size="small">All ({{ sessions.length }})</v-btn>
+        <v-btn v-for="f in activeFlags" :key="f.flag" :value="f.flag" size="small" :title="SESSION_FLAGS[f.flag].help">
+          <v-icon start size="small" :color="FLAG_UI[f.flag].color">{{ FLAG_UI[f.flag].icon }}</v-icon>
+          {{ SESSION_FLAGS[f.flag].label }} ({{ f.count }})
+        </v-btn>
+      </v-btn-toggle>
+    </div>
+
+    <v-alert v-if="sessions.length === 0" type="info" variant="tonal">
+      No study sessions recorded. Session records began with a framework release; there is no backfill, so earlier
+      activity shows only in card history.
+    </v-alert>
+
+    <v-table v-else density="compact" class="sk-admin-table">
+      <thead>
+        <tr>
+          <th>Started</th>
+          <th>Status</th>
+          <th class="text-right">Cards</th>
+          <th class="text-right">Acc.</th>
+          <th class="text-right">Runs</th>
+          <th>Clock</th>
+          <th>Δ</th>
+          <th>Flags</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="s in visible" :key="s.doc.sessionId" class="sk-admin-row" @click="emit('open', s.doc.sessionId)">
+          <td class="text-no-wrap">{{ fmtTime(s.doc.startTime) }}</td>
+          <td>
+            <v-chip size="x-small" variant="flat" :color="statusColor(s.doc.status)">{{ s.doc.status }}</v-chip>
+          </td>
+          <td class="text-right">{{ s.doc.tally?.cardsPresented ?? '—' }}</td>
+          <td class="text-right">
+            <span v-if="s.accuracy !== null" :class="accuracyClass(s.accuracy)">
+              {{ Math.round(s.accuracy * 100) }}%
+            </span>
+            <span v-else class="text-disabled">—</span>
+          </td>
+          <td class="text-right">{{ s.doc.runs?.length ?? 0 }}</td>
+          <td class="text-no-wrap text-caption">{{ clockText(s) }}</td>
+          <td class="text-no-wrap text-caption">
+            <template v-for="(d, i) in deltas(s)" :key="d.label">
+              <span v-if="i > 0"> · </span>
+              <span :class="deltaClass(d.delta)">{{ fmtDelta(d.delta) }}&nbsp;{{ d.label }}</span>
+            </template>
+            <span v-if="deltas(s).length === 0" class="text-disabled">—</span>
+          </td>
+          <td>
+            <v-icon
+              v-for="f in s.flags"
+              :key="f"
+              size="small"
+              class="mr-1"
+              :color="FLAG_UI[f].color"
+              :title="`${SESSION_FLAGS[f].label}: ${SESSION_FLAGS[f].help}`"
+            >
+              {{ FLAG_UI[f].icon }}
+            </v-icon>
+          </td>
+          <td class="text-right"><v-icon size="small" class="text-disabled">mdi-chevron-right</v-icon></td>
+        </tr>
+      </tbody>
+    </v-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import {
+  fmtDelta,
+  fmtDuration,
+  SESSION_FLAGS,
+  summarizeSessions,
+  type DiagnosticsInterpreters,
+  type LearnerDataset,
+  type SessionFlag,
+  type SessionSummary,
+} from '@vue-skuilder/db/diagnostics';
+import { accuracyClass, deltaClass, FLAG_UI, fmtTime, statusColor } from '../display';
+
+/** A learner's sessions, newest first, as triage. Emits `open` with a session id. */
+const props = defineProps<{
+  dataset: LearnerDataset;
+  interpreters?: DiagnosticsInterpreters;
+}>();
+
+const emit = defineEmits<{ open: [sessionId: string] }>();
+
+const sessions = computed(() => summarizeSessions(props.dataset, props.interpreters));
+const filter = ref<'all' | SessionFlag | undefined>('all');
+
+/** Only offer filters for flags that occur. */
+const activeFlags = computed(() => {
+  const counts = new Map<SessionFlag, number>();
+  for (const s of sessions.value) for (const f of s.flags) counts.set(f, (counts.get(f) ?? 0) + 1);
+  return [...counts.entries()].map(([flag, count]) => ({ flag, count })).sort((a, b) => b.count - a.count);
+});
+
+// `!filter.value` covers v-btn-toggle's deselect, which clears the model.
+const visible = computed(() =>
+  !filter.value || filter.value === 'all'
+    ? sessions.value
+    : sessions.value.filter((s) => s.flags.includes(filter.value as SessionFlag))
+);
+
+const tiles = computed(() => {
+  const list = sessions.value;
+  const closed = list.filter((s) => s.doc.status === 'closed').length;
+  const responses = list.reduce((n, s) => n + (s.doc.tally?.responses ?? 0), 0);
+  const correct = list.reduce((n, s) => n + (s.doc.tally?.correct ?? 0), 0);
+  const seconds = list.reduce((n, s) => n + (s.durationSeconds ?? 0), 0);
+  return [
+    { label: 'sessions', value: list.length, color: 'primary' },
+    { label: 'completed', value: closed, color: 'success' },
+    { label: 'not completed', value: list.length - closed, color: 'error' },
+    { label: 'responses', value: responses, color: 'primary' },
+    {
+      label: 'overall acc.',
+      value: responses > 0 ? `${Math.round((correct / responses) * 100)}%` : '—',
+      color: 'primary',
+    },
+    { label: 'time studied', value: fmtDuration(seconds), color: 'grey' },
+  ];
+});
+
+function deltas(s: SessionSummary): Array<{ label: string; delta: number | null }> {
+  const out: Array<{ label: string; delta: number | null }> = [];
+  if (s.eloNet !== null) out.push({ label: 'elo', delta: Math.round(s.eloNet) });
+  for (const label of props.interpreters?.progressMetrics ?? []) {
+    const row = s.state.find((r) => r.label === label);
+    if (row) out.push({ label, delta: row.delta });
+  }
+  return out;
+}
+
+/** "1m40s of 2m": how much of the planned dose was spent. */
+function clockText(s: SessionSummary): string {
+  const planned = fmtDuration(s.doc.plannedSeconds);
+  return s.durationSeconds === null ? `— of ${planned}` : `${fmtDuration(s.durationSeconds)} of ${planned}`;
+}
+</script>
+
+<style scoped>
+.sk-admin-table :deep(td),
+.sk-admin-table :deep(th) {
+  font-size: 0.78rem;
+}
+.sk-admin-row {
+  cursor: pointer;
+}
+.sk-admin-row:hover {
+  background-color: rgba(var(--v-theme-primary), 0.05);
+}
+</style>