@zerwiz/ymir 0.1.33 → 0.1.35

package/apps/smidja-factory/apps/visualizer/src/components/PhaseDots.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Phase } from '../lib/types'
+
+const props = defineProps<{ phases: Phase[] }>()
+
+const ordered = computed(() => props.phases.toSorted((a, b) => (a.seq ?? 0) - (b.seq ?? 0)))
+
+const glyph: Record<string, string> = {
+  success: '●',
+  running: '◐',
+  queued: '○',
+  fail: '✗',
+}
+</script>
+
+<template>
+  <span class="dots">
+    <span
+      v-for="p in ordered"
+      :key="p.phase_id"
+      class="d"
+      :class="p.status"
+      :title="`${p.name} — ${p.status}`"
+      >{{ glyph[p.status ?? ''] ?? '○' }}</span
+    >
+    <span v-if="!ordered.length" class="faint">—</span>
+  </span>
+</template>
+
+<style scoped>
+.dots {
+  display: inline-flex;
+  gap: 5px;
+  font-size: 16px;
+  letter-spacing: 0;
+}
+
+.d.success {
+  color: var(--green);
+}
+
+.d.fail {
+  color: var(--red);
+}
+
+.d.running {
+  color: var(--blue);
+  animation: pulse 1.2s ease-in-out infinite;
+}
+
+.d.queued {
+  color: var(--faint);
+}
+</style>

package/apps/smidja-factory/apps/visualizer/src/components/SessionCard.vue

@@ -0,0 +1,583 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
+import type { EventRow, SessionSummary } from '../lib/types'
+import { archiveSession, fetchEvents, pauseSession, resumeSession, stopSession } from '../lib/api'
+import { axisTicks, fmtDate, fmtOffset, ts } from '../lib/format'
+import { agentColor, dotColor, eventLabel } from '../lib/events'
+import { modelKind } from '../lib/models'
+import { hrefFor } from '../lib/router'
+import StatusChip from './StatusChip.vue'
+import StatChip from './StatChip.vue'
+import PhaseDots from './PhaseDots.vue'
+
+const props = defineProps<{ session: SessionSummary; nowMs: number }>()
+const emit = defineEmits<{ archived: [adwId: string] }>()
+
+// The card is an <a>; the button lives inside it, so the click must not
+// navigate. Told the parent optimistically — the poll would take up to half a
+// second to drop the card, and a triage click should feel instant.
+async function archive(event: MouseEvent) {
+  event.preventDefault()
+  event.stopPropagation()
+  emit('archived', props.session.smidja_id)
+  try {
+    await archiveSession(props.session.smidja_id)
+  } catch {
+    emit('archived', '')   // signals the parent to re-sync from the server
+  }
+}
+
+const stopping = ref(false)
+const pausing = ref(false)
+const paused = ref(false)
+async function stopRun(event: MouseEvent) {
+  event.preventDefault()
+  event.stopPropagation()
+  if (stopping.value) return
+  stopping.value = true
+  try {
+    const res = await stopSession(props.session.smidja_id)
+    console.log(`[smidja] stopped ${props.session.smidja_id} — ${res.stopped} process(es)`)
+  } catch (err) {
+    console.error(`[smidja] stop failed:`, err)
+  } finally {
+    stopping.value = false
+  }
+}
+
+async function togglePause(event: MouseEvent) {
+  event.preventDefault()
+  event.stopPropagation()
+  if (pausing.value) return
+  pausing.value = true
+  try {
+    if (paused.value) {
+      await resumeSession(props.session.smidja_id)
+      paused.value = false
+    } else {
+      await pauseSession(props.session.smidja_id)
+      paused.value = true
+    }
+  } catch (err) {
+    console.error(`[smidja] pause failed:`, err)
+  } finally {
+    pausing.value = false
+  }
+}
+
+// Each card tails its own event stream: one full fetch on mount, then the
+// same rowid-cursor poll as the trace view — but only while the run is live.
+const events = shallowRef<EventRow[]>([])
+let cursor = 0
+let inflight = false
+let timer: ReturnType<typeof setInterval> | undefined
+
+function stopPolling() {
+  clearInterval(timer)
+  timer = undefined
+}
+
+async function pull() {
+  if (inflight) return
+  inflight = true
+  try {
+    const fresh: EventRow[] = []
+    let page
+    do {
+      // Cursor pagination is inherently sequential: each request needs the previous cursor.
+      // oxlint-disable-next-line no-await-in-loop
+      page = await fetchEvents(props.session.smidja_id, cursor, 1000)
+      cursor = Math.max(cursor, page.cursor)
+      fresh.push(...page.events)
+    } while (page.has_more)
+    if (fresh.length) events.value = [...events.value, ...fresh]
+    if (props.session.status !== 'running') stopPolling()
+  } catch {
+    /* the list view surfaces api errors; a card just retries next poll */
+  } finally {
+    inflight = false
+  }
+}
+
+onMounted(() => {
+  void pull()
+  if (props.session.status === 'running') timer = setInterval(() => void pull(), 500)
+})
+
+onUnmounted(stopPolling)
+
+watch(
+  () => props.session.status,
+  (status) => {
+    if (status === 'running' && !timer) timer = setInterval(() => void pull(), 500)
+    // On the transition out of running, one last pull drains the tail and stops the timer.
+    else if (status !== 'running') void pull()
+  },
+)
+
+const running = computed(() => props.session.status === 'running')
+
+/** Where this run's models live — local (own hardware, free) or online (billed). */
+const runModelKind = computed<'local' | 'online' | null>(() => {
+  const kinds = (props.session.agents ?? [])
+    .map((a) => modelKind(a.model))
+    .filter((k): k is 'local' | 'online' => !!k)
+  return kinds.includes('local') && !kinds.includes('online')
+    ? 'local'
+    : kinds.includes('online') ? 'online' : null
+})
+
+const range = computed(() => {
+  const s = props.session
+  let t0 = ts(s.started_at)
+  if (!Number.isFinite(t0)) {
+    t0 = Math.min(...events.value.map((e) => ts(e.started_at)).filter(Number.isFinite))
+  }
+  if (!Number.isFinite(t0)) t0 = props.nowMs
+  let t1 = running.value ? props.nowMs : ts(s.ended_at)
+  if (!Number.isFinite(t1)) {
+    t1 = Math.max(...events.value.map((e) => ts(e.started_at)).filter(Number.isFinite))
+  }
+  if (!Number.isFinite(t1)) t1 = t0 + 1000
+  return { t0, span: Math.max(t1 - t0, 1000) }
+})
+
+const ticks = computed(() => axisTicks(range.value.span, 5))
+
+interface TimelineDot {
+  id: string
+  xPct: number
+  color: string
+  title: string
+  latest: boolean
+}
+
+interface TimelineRow {
+  owner: string
+  color: string
+  title: string
+  dots: TimelineDot[]
+}
+
+// Per-agent rows: events attribute to an agent through their phase's owner.
+const rows = computed<TimelineRow[]>(() => {
+  const owners: string[] = []
+  const ownerByPhase = new Map<string, string>()
+  for (const p of props.session.phases ?? []) {
+    if (p.kind !== 'agent' || !p.owner) continue
+    ownerByPhase.set(p.phase_id, p.owner)
+    if (!owners.includes(p.owner)) owners.push(p.owner)
+  }
+  if (!owners.length) return []
+
+  const { t0, span } = range.value
+  const byOwner = new Map<string, TimelineDot[]>(owners.map((o) => [o, []]))
+  let latest: TimelineDot | null = null
+  let latestT = -Infinity
+
+  for (const e of events.value) {
+    const owner = e.phase_id ? ownerByPhase.get(e.phase_id) : undefined
+    const color = dotColor(e.type)
+    if (!owner || !color) continue
+    const t = ts(e.started_at)
+    if (!Number.isFinite(t)) continue
+    const dot: TimelineDot = {
+      id: e.event_id,
+      xPct: Math.min(Math.max(((t - t0) / span) * 100, 0), 100),
+      color,
+      title: `${e.type} ${eventLabel(e)} at ${fmtOffset(t - t0)}`,
+      latest: false,
+    }
+    byOwner.get(owner)?.push(dot)
+    if (t >= latestT) {
+      latestT = t
+      latest = dot
+    }
+  }
+  if (running.value && latest) latest.latest = true
+
+  // /api/sessions embeds agents so the labels can use config colors with no
+  // extra request; historical sessions return color null → fallback palette.
+  return owners.map((owner, i) => {
+    const info = (props.session.agents ?? []).find((a) => a.agent === owner)
+    return {
+      owner,
+      color: agentColor(info?.color, null, i),
+      title: info?.model ? `${owner} ${info.model}` : owner,
+      dots: byOwner.get(owner) ?? [],
+    }
+  })
+})
+
+const durationMs = computed(() => {
+  const s = props.session
+  const start = ts(s.started_at)
+  if (!Number.isFinite(start)) return NaN
+  const end = running.value ? props.nowMs : ts(s.ended_at)
+  return (Number.isFinite(end) ? end : props.nowMs) - start
+})
+
+// Cards are a fixed size, so the timeline region fits exactly MAX_VISIBLE_ROWS
+// row slots. A roster that overflows spends one slot on the "+N more" line and
+// shows MIN_VISIBLE_ROWS agents in the rest — never fewer than three, so a
+// five-agent chain still reads as a chain rather than as a pair and a count.
+const MAX_VISIBLE_ROWS = 4
+const MIN_VISIBLE_ROWS = 3
+
+const overflowing = computed(() => rows.value.length > MAX_VISIBLE_ROWS)
+
+const visibleRows = computed(() =>
+  overflowing.value ? rows.value.slice(0, MIN_VISIBLE_ROWS) : rows.value,
+)
+
+const hiddenRowCount = computed(() =>
+  overflowing.value ? rows.value.length - MIN_VISIBLE_ROWS : 0,
+)
+</script>
+
+<template>
+  <a class="card" :class="session.status" :href="hrefFor(session.smidja_id)">
+    <button
+      class="card-archive"
+      type="button"
+      title="Archive — remove this run from review"
+      aria-label="Archive run"
+      @click="archive"
+    >
+      ×
+    </button>
+    <button
+      v-if="session.status === 'running'"
+      class="card-stop"
+      type="button"
+      title="Pause — hold the run (SIGSTOP agents) so you can steer from the trace"
+      aria-label="Pause run"
+      :disabled="pausing"
+      @click="togglePause"
+    >
+      {{ paused ? '▶' : '⏸' }}
+    </button>
+    <button
+      v-if="session.status === 'running'"
+      class="card-stop"
+      type="button"
+      title="Stop — kill this run's agents (children-first)"
+      aria-label="Stop run"
+      :disabled="stopping"
+      @click="stopRun"
+    >
+      ■
+    </button>
+    <span class="card-id">{{ session.smidja_id }}</span>
+    <span class="card-smidja" :title="session.smidja_name ?? ''">{{ session.smidja_name ?? '—' }}</span>
+    <span class="card-req" :title="session.request ?? ''">{{ session.request }}</span>
+
+    <div v-if="rows.length" class="tl">
+      <div class="tl-axis">
+        <span class="tl-gutter" />
+        <span class="tl-scale">
+          <span
+            v-for="(t, i) in ticks"
+            :key="i"
+            class="tl-tick"
+            :class="{ edge: t.pct === 0 }"
+            :style="{ left: `${t.pct}%` }"
+            >{{ t.label }}</span
+          >
+        </span>
+      </div>
+      <div v-for="row in visibleRows" :key="row.owner" class="tl-row">
+        <span class="tl-agent" :style="{ color: row.color }" :title="row.title">{{
+          row.owner
+        }}</span>
+        <span class="tl-track">
+          <span
+            v-for="dot in row.dots"
+            :key="dot.id"
+            class="tl-dot"
+            :class="{ latest: dot.latest }"
+            :style="{ left: `${dot.xPct}%`, background: dot.color }"
+            :title="dot.title"
+          />
+        </span>
+      </div>
+      <div v-if="hiddenRowCount" class="tl-more dim">+{{ hiddenRowCount }} more agents</div>
+    </div>
+    <div v-else class="tl tl-empty faint">no agent activity yet</div>
+
+    <div class="card-foot">
+      <span class="foot-status">
+        <StatusChip :status="session.status ?? 'fail'" />
+        <PhaseDots :phases="session.phases ?? []" />
+      </span>
+      <span class="dim">{{ fmtDate(session.started_at) }}</span>
+    </div>
+    <div class="card-stats">
+      <StatChip kind="cost" :value="session.total_cost" :model-kind="runModelKind" />
+      <StatChip kind="runtime" :value="durationMs" />
+      <StatChip kind="tokens" :value="session.total_tokens" />
+    </div>
+  </a>
+</template>
+
+<style scoped>
+.card {
+  /* Uniform size: the grid fixes the width, this fixes the height — content
+     clamps and truncates rather than resizing the card. Grew by one 40px row
+     slot when the timeline went from three to four. */
+  height: 420px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 20px 22px;
+  position: relative;          /* anchors the archive button */
+  border: 1px solid var(--border-soft);
+  border-radius: 16px;
+  background: var(--surface);
+  color: var(--text);
+  cursor: pointer;
+  overflow: hidden;
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    transform 0.18s ease;
+}
+
+.card-archive {
+  /* Top-right of the card, out of the text flow so nothing reflows around it. */
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dim);
+  font-family: inherit;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    opacity 0.15s ease,
+    background 0.15s ease,
+    color 0.15s ease;
+}
+
+/* Hidden until the card is hovered — 50 cards should read as runs, not as a
+   wall of close buttons. Focus reveals it too, so keyboards are not excluded. */
+.card:hover .card-archive,
+.card-archive:focus-visible {
+  opacity: 1;
+}
+
+.card-archive:hover {
+  background: color-mix(in srgb, var(--red) 16%, transparent);
+  color: var(--red);
+}
+
+/* Stop: only while a run is live, and visible without hovering — a running
+   run is something you may need to kill in a hurry. */
+.card-stop {
+  position: absolute;
+  top: 14px;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--accent);
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+}
+.card-stop:nth-of-type(2) {
+  right: 40px;
+}
+.card-stop:nth-of-type(3) {
+  right: 66px;
+  color: var(--violet);
+}
+.card-stop:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--accent) 20%, transparent);
+  color: var(--accent);
+}
+.card-stop:nth-of-type(3):hover:not(:disabled) {
+  background: rgba(148, 163, 255, 0.16);
+  color: var(--violet);
+}
+.card-stop:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.card:hover {
+  border-color: rgba(148, 163, 255, 0.45);
+  box-shadow: 0 10px 34px rgba(148, 163, 255, 0.12);
+  transform: translateY(-2px);
+}
+
+.card.running {
+  border-color: rgba(108, 182, 255, 0.6);
+  box-shadow: 0 0 22px rgba(108, 182, 255, 0.16);
+}
+
+.card.fail {
+  border-color: color-mix(in srgb, var(--red) 60%, transparent);
+}
+
+/* Text rows must never absorb flex shrink — the fixed-height card squeezes
+   overflow into .tl (which clips), not into the text. */
+.card-id {
+  flex: none;
+  font-family: var(--mono);
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--purple);
+}
+
+.card-smidja {
+  flex: none;
+  font-family: var(--mono);
+  font-size: 16px;
+  color: var(--cyan);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-req {
+  flex: none;
+  font-size: 16px;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tl {
+  display: flex;
+  flex-direction: column;
+  margin-top: 4px;
+  /* Fixed region: axis (28 + 6) + four 40px row slots, roster size or not.
+     Four slots is what lets three agents show alongside a "+N more" line. */
+  height: 194px;
+  flex: none;
+  overflow: hidden;
+}
+
+.tl-more {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding-left: 96px;
+  font-size: 16px;
+}
+
+.tl-axis {
+  display: flex;
+  align-items: flex-end;
+  height: 28px;
+  margin-bottom: 6px;
+}
+
+.tl-gutter,
+.tl-agent {
+  flex: none;
+  /* Wide enough for full agent names (planner, builder, documenter). */
+  width: 96px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-right: 8px;
+}
+
+.tl-scale {
+  position: relative;
+  flex: 1;
+  height: 100%;
+  border-bottom: 1px solid var(--border);
+}
+
+.tl-tick {
+  position: absolute;
+  bottom: 4px;
+  transform: translateX(-50%);
+  font-family: var(--mono);
+  font-size: 16px;
+  color: var(--faint);
+  white-space: nowrap;
+}
+
+.tl-tick.edge {
+  transform: none;
+}
+
+.tl-row {
+  display: flex;
+  align-items: center;
+  height: 40px;
+}
+
+.tl-agent {
+  font-size: 16px;
+  color: var(--dim);
+}
+
+.tl-track {
+  position: relative;
+  flex: 1;
+  height: 100%;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.tl-dot {
+  position: absolute;
+  top: 50%;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.tl-dot.latest {
+  width: 13px;
+  height: 13px;
+  box-shadow: 0 0 10px currentColor;
+  animation: pulse 1.4s ease-in-out infinite;
+}
+
+.tl-empty {
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+}
+
+.card-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: auto;
+  font-size: 16px;
+}
+
+.foot-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.card-stats {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+</style>

package/apps/smidja-factory/apps/visualizer/src/components/SessionMiniCard.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { Check, Circle, ExternalLink, X } from 'lucide-vue-next'
+import type { SessionLaunch } from '../lib/types'
+import { modelName } from '../lib/models'
+
+defineProps<{ launch: SessionLaunch }>()
+const emit = defineEmits<{ (e: 'open', adwId: string): void }>()
+</script>
+
+<template>
+  <button class="mini" type="button" @click="emit('open', launch.smidja_id)">
+    <span class="dot" :class="launch.status ?? 'queued'"></span>
+    <span class="mid">
+      <code class="id">{{ launch.smidja_id }}</code>
+      <span class="meta">{{ launch.team }} · {{ modelName(launch.model) }}</span>
+    </span>
+    <span class="edge">
+      <Check v-if="launch.status === 'success'" class="ok" :size="15" />
+      <X v-else-if="launch.status === 'fail'" class="fail" :size="15" />
+      <Circle v-else class="run" :size="15" />
+      <ExternalLink :size="14" class="ext" />
+    </span>
+  </button>
+</template>
+
+<style scoped>
+.mini {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 8px 10px;
+  border: 1px solid var(--border-soft);
+  border-radius: 8px;
+  background: rgba(19, 26, 38, 0.45);
+  color: var(--text);
+  cursor: pointer;
+  text-align: left;
+}
+.mini:hover { border-color: var(--border); background: rgba(19, 26, 38, 0.7); }
+
+.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--faint); }
+.dot.success { background: var(--green); box-shadow: 0 0 8px color-mix(in srgb, var(--green) 60%, transparent); }
+.dot.fail { background: var(--red); box-shadow: 0 0 8px color-mix(in srgb, var(--red) 60%, transparent); }
+.dot.running { background: var(--blue); animation: pulse 1.6s ease-in-out infinite; }
+@keyframes pulse { 50% { opacity: 0.4; } }
+
+.mid { flex: 1 1 auto; min-width: 0; }
+.id { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.meta { display: block; font-size: 12px; color: var(--dim); margin-top: 1px; }
+
+.edge { display: inline-flex; align-items: center; gap: 7px; flex: none; }
+.ok { color: var(--green); }
+.fail { color: var(--red); }
+.run { color: var(--blue); }
+.ext { color: var(--faint); }
+.mini:hover .ext { color: var(--blue); }
+</style>