@zerwiz/ymir 0.1.34 → 0.1.35

package/apps/smidja-factory/apps/visualizer/src/lib/events.ts

@@ -0,0 +1,131 @@
+import type { AgentStartPayload, EventRow, ToolCallPayload } from './types'
+
+// ── Event dot colors ─────────────────────────────────────────────────────────
+// One color per event type, shared by the session-card timelines and the phase
+// detail list. gate_fail reads as an error signal on purpose.
+
+export const EVENT_DOT_COLORS: Record<string, string> = {
+  agent_start: '#c9973f', // bronze — a smith takes up the work
+  tool_call: '#9a8f75', // bone-dim — the tool speaks
+  handoff: '#96a0a8', // steel — passed on
+  agent_end: '#cfc3a9', // bone — the work is done
+  error: '#c2584a', // blood-lit — the wound, on purpose
+  gate_fail: '#c2584a',
+}
+
+export function dotColor(type: string | null): string | null {
+  if (!type) return null
+  return EVENT_DOT_COLORS[type] ?? null
+}
+
+// ── Agent lane colors ────────────────────────────────────────────────────────
+// Config color wins (agents[].color from the API, or the agent_start payload
+// for in-flight agents); the palette below covers dbs written before the
+// color column existed.
+
+export const AGENT_FALLBACK_COLORS = ['#c9973f', '#96a0a8', '#cfc3a9', '#c2584a', '#9a8f75']
+
+export function agentColor(
+  configColor: string | null | undefined,
+  payloadColor: string | null | undefined,
+  index: number,
+): string {
+  return (
+    configColor ??
+    payloadColor ??
+    AGENT_FALLBACK_COLORS[index % AGENT_FALLBACK_COLORS.length] ??
+    '#c9973f'
+  )
+}
+
+/** "#c89bff" + alpha → rgba() usable in inline styles. Invalid input → transparent. */
+export function hexAlpha(hex: string, alpha: number): string {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim())
+  if (!m || !m[1]) return 'transparent'
+  const n = Number.parseInt(m[1], 16)
+  return `rgba(${(n >> 16) & 0xff}, ${(n >> 8) & 0xff}, ${n & 0xff}, ${alpha})`
+}
+
+// ── Payload parsing ──────────────────────────────────────────────────────────
+
+export function parsePayload(raw: string | null | undefined): Record<string, unknown> | null {
+  if (!raw) return null
+  try {
+    const parsed: unknown = JSON.parse(raw)
+    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+      return parsed as Record<string, unknown>
+    }
+  } catch {
+    /* legacy or truncated payloads render raw */
+  }
+  return null
+}
+
+export function parseToolCall(e: EventRow): ToolCallPayload | null {
+  const payload = parsePayload(e.payload_json)
+  if (!payload || typeof payload.tool !== 'string') return null
+  return payload as ToolCallPayload
+}
+
+export function parseAgentStart(e: EventRow): AgentStartPayload | null {
+  return parsePayload(e.payload_json) as AgentStartPayload | null
+}
+
+// Args keys most likely to BE the call, in priority order — a bash command, a
+// file path, a search pattern. Used to build the one-line label.
+const ARG_LABEL_KEYS = [
+  'command',
+  'cmd',
+  'file_path',
+  'path',
+  'pattern',
+  'query',
+  'url',
+  'prompt',
+  'description',
+]
+
+const LABEL_MAX = 160
+
+function oneLine(value: string): string {
+  const flat = value.replaceAll(/\s+/g, ' ').trim()
+  return flat.length > LABEL_MAX ? `${flat.slice(0, LABEL_MAX)}…` : flat
+}
+
+/** One-line summary of a tool's args: the call itself, not a JSON dump. */
+export function argsSummary(args: Record<string, unknown> | undefined): string {
+  if (!args) return ''
+  for (const key of ARG_LABEL_KEYS) {
+    const v = args[key]
+    if (typeof v === 'string' && v.trim() !== '') return oneLine(v)
+  }
+  const parts: string[] = []
+  for (const [key, v] of Object.entries(args)) {
+    if (v == null) continue
+    parts.push(`${key}=${typeof v === 'string' ? v : JSON.stringify(v)}`)
+  }
+  return oneLine(parts.join(' '))
+}
+
+/**
+ * Exact-call row label for an event.
+ * Rich tool_call → "bash: bun test src". Legacy payloads fall back to
+ * the event name plus whatever hint the payload carries.
+ */
+export function eventLabel(e: EventRow): string {
+  if (e.type === 'tool_call') {
+    const call = parseToolCall(e)
+    if (call?.tool) {
+      // New-tracer rows already carry the human label in events.name
+      // ("bash: ls -la src") — prefer it over re-deriving.
+      if (e.name?.startsWith(call.tool)) return oneLine(e.name)
+      const summary = argsSummary(call.args)
+      return summary ? `${call.tool}: ${summary}` : call.tool
+    }
+    const legacy = parsePayload(e.payload_json)
+    if (legacy && typeof legacy.pi_event === 'string') {
+      return `${e.name ?? 'tool'} ${legacy.pi_event}`
+    }
+  }
+  return e.name ?? e.type ?? ''
+}

package/apps/smidja-factory/apps/visualizer/src/lib/format.ts

@@ -0,0 +1,92 @@
+export function ts(iso: string | null | undefined): number {
+  if (!iso) return NaN
+  return new Date(iso).getTime()
+}
+
+export function fmtDuration(ms: number): string {
+  if (!Number.isFinite(ms) || ms < 0) return '—'
+  if (ms < 1000) return `${(ms / 1000).toFixed(2)}s`
+  const s = ms / 1000
+  if (s < 60) return `${s.toFixed(1)}s`
+  const m = Math.floor(s / 60)
+  const rem = Math.round(s % 60)
+  if (m < 60) return `${m}m ${String(rem).padStart(2, '0')}s`
+  const h = Math.floor(m / 60)
+  return `${h}h ${String(m % 60).padStart(2, '0')}m`
+}
+
+export function fmtClock(iso: string | null | undefined): string {
+  const t = ts(iso)
+  if (!Number.isFinite(t)) return '—'
+  return new Date(t).toLocaleTimeString([], { hour12: false })
+}
+
+export function fmtDate(iso: string | null | undefined): string {
+  const t = ts(iso)
+  if (!Number.isFinite(t)) return '—'
+  const d = new Date(t)
+  return `${d.toLocaleDateString([], { month: 'short', day: 'numeric' })} ${fmtClock(iso)}`
+}
+
+export function fmtTokens(n: number | null | undefined): string {
+  if (n == null) return '—'
+  if (n < 1000) return String(n)
+  if (n < 1_000_000) return `${(n / 1000).toFixed(1)}k`
+  return `${(n / 1_000_000).toFixed(2)}M`
+}
+
+export function fmtCost(n: number | null | undefined): string {
+  if (n == null) return '—'
+  return n >= 1 ? `$${n.toFixed(2)}` : `$${n.toFixed(4)}`
+}
+
+// Compact offset label for time axes: 0s, 30s, 1m, 1m30s, 2m, 1h05m.
+export function fmtOffset(ms: number): string {
+  const s = Math.round(ms / 1000)
+  if (s < 60) return `${s}s`
+  const m = Math.floor(s / 60)
+  if (m < 60) {
+    const rem = s % 60
+    return rem ? `${m}m${String(rem).padStart(2, '0')}s` : `${m}m`
+  }
+  const h = Math.floor(m / 60)
+  const mrem = m % 60
+  return mrem ? `${h}h${String(mrem).padStart(2, '0')}m` : `${h}h`
+}
+
+const TICK_STEPS_MS = [1, 2, 5, 10, 15, 30, 60, 120, 300, 600, 1200, 1800, 3600].map(
+  (s) => s * 1000,
+)
+
+/** Evenly-stepped time-axis ticks over a span, ≤ maxTicks of them. */
+export function axisTicks(spanMs: number, maxTicks = 8): { pct: number; label: string }[] {
+  const span = Math.max(spanMs, 1)
+  const step = TICK_STEPS_MS.find((s) => span / s <= maxTicks) ?? 3_600_000
+  const out: { pct: number; label: string }[] = []
+  for (let t = 0; t <= span; t += step) {
+    out.push({ pct: (t / span) * 100, label: fmtOffset(t) })
+  }
+  return out
+}
+
+// New-tracer tool_call payloads carry ok:false on tool errors; older payloads
+// have no ok key and count as ok.
+export function payloadOk(raw: string | null | undefined): boolean {
+  if (!raw) return true
+  try {
+    const p: unknown = JSON.parse(raw)
+    if (p && typeof p === 'object' && 'ok' in p) return (p as { ok?: unknown }).ok !== false
+  } catch {
+    /* not JSON — treat as ok */
+  }
+  return true
+}
+
+export function prettyJson(raw: string | null | undefined): string {
+  if (!raw) return ''
+  try {
+    return JSON.stringify(JSON.parse(raw), null, 2)
+  } catch {
+    return raw
+  }
+}

package/apps/smidja-factory/apps/visualizer/src/lib/highlight.ts

@@ -0,0 +1,54 @@
+/**
+ * Dependency-free JSON syntax highlighting.
+ *
+ * Same safety model as markdown.ts: every character of input is HTML-escaped;
+ * the only tags in the output are the <span>s this module writes. Token
+ * colors live in style.css under the .j-* classes.
+ */
+
+export function escapeHtml(s: string): string {
+  return s
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;')
+}
+
+// Strings first so digits/keywords inside them are consumed as part of the
+// string token. A string followed by a colon is an object key.
+const TOKEN =
+  /("(?:\\.|[^"\\])*")(\s*:)?|\b(true|false)\b|\b(null)\b|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g
+
+/** Highlight text that is already (or claims to be) JSON. Escapes everything. */
+export function highlightJsonText(text: string): string {
+  let out = ''
+  let last = 0
+  for (const m of text.matchAll(TOKEN)) {
+    out += escapeHtml(text.slice(last, m.index))
+    const [full, str, colon, bool, nil, num] = m
+    if (str !== undefined) {
+      const cls = colon !== undefined ? 'j-key' : 'j-str'
+      out += `<span class="${cls}">${escapeHtml(str)}</span>${escapeHtml(colon ?? '')}`
+    } else if (bool !== undefined) {
+      out += `<span class="j-bool">${bool}</span>`
+    } else if (nil !== undefined) {
+      out += `<span class="j-null">null</span>`
+    } else {
+      out += `<span class="j-num">${escapeHtml(num ?? full)}</span>`
+    }
+    last = (m.index ?? 0) + full.length
+  }
+  out += escapeHtml(text.slice(last))
+  return out
+}
+
+/** Pretty-print raw JSON and highlight it; non-JSON falls back to escaped raw. */
+export function highlightJson(raw: string | null | undefined): string {
+  if (!raw) return ''
+  try {
+    return highlightJsonText(JSON.stringify(JSON.parse(raw), null, 2))
+  } catch {
+    return escapeHtml(raw)
+  }
+}

package/apps/smidja-factory/apps/visualizer/src/lib/markdown.ts

@@ -0,0 +1,120 @@
+/**
+ * Minimal, dependency-free markdown → HTML for the compiled prompt panels.
+ *
+ * Safety model: ALL input is HTML-escaped before any tags are produced, so
+ * the only HTML in the output is what this module writes. No raw-HTML
+ * passthrough, links restricted to http(s).
+ *
+ * Supported: #–#### headings, fenced code blocks, inline code, bold, links,
+ * unordered/ordered lists, blockquotes, horizontal rules, paragraphs
+ * (pre-wrap preserves intra-paragraph line breaks).
+ */
+
+import { escapeHtml, highlightJsonText } from './highlight'
+
+/** Bold + links, applied only OUTSIDE inline-code spans. */
+function inline(escaped: string): string {
+  const parts = escaped.split(/(`[^`\n]+`)/g)
+  return parts
+    .map((part, i) => {
+      if (i % 2 === 1) return `<code>${part.slice(1, -1)}</code>`
+      return part
+        .replaceAll(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>')
+        .replaceAll(
+          /\[([^\]\n]+)\]\((https?:\/\/[^)\s]+)\)/g,
+          '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>',
+        )
+    })
+    .join('')
+}
+
+export function renderMarkdown(src: string): string {
+  const lines = src.replaceAll('\r\n', '\n').split('\n')
+  const out: string[] = []
+  let i = 0
+
+  const paragraph: string[] = []
+  function flushParagraph() {
+    if (paragraph.length) {
+      out.push(`<p>${paragraph.map(inline).join('\n')}</p>`)
+      paragraph.length = 0
+    }
+  }
+
+  while (i < lines.length) {
+    const raw = lines[i] ?? ''
+    const line = escapeHtml(raw)
+
+    // Fenced code block — verbatim until the closing fence. json fences get
+    // syntax highlighting (the Report contract in every user.md is one).
+    const fence = /^\s*```(\w*)/.exec(raw)
+    if (fence) {
+      flushParagraph()
+      const code: string[] = []
+      i += 1
+      while (i < lines.length && !/^\s*```/.test(lines[i] ?? '')) {
+        code.push(lines[i] ?? '')
+        i += 1
+      }
+      i += 1
+      const text = code.join('\n')
+      const body =
+        (fence[1] ?? '').toLowerCase() === 'json' ? highlightJsonText(text) : escapeHtml(text)
+      out.push(`<pre class="md-code"><code>${body}</code></pre>`)
+      continue
+    }
+
+    const heading = /^(#{1,4})\s+(.*)$/.exec(raw)
+    if (heading?.[1] && heading[2] !== undefined) {
+      flushParagraph()
+      const level = heading[1].length
+      out.push(`<h${level}>${inline(escapeHtml(heading[2]))}</h${level}>`)
+      i += 1
+      continue
+    }
+
+    if (/^\s*(---+|\*\*\*+)\s*$/.test(raw)) {
+      flushParagraph()
+      out.push('<hr>')
+      i += 1
+      continue
+    }
+
+    if (/^\s*&gt;\s?/.test(line)) {
+      flushParagraph()
+      const quote: string[] = []
+      while (i < lines.length && /^\s*>\s?/.test(lines[i] ?? '')) {
+        quote.push(inline(escapeHtml((lines[i] ?? '').replace(/^\s*>\s?/, ''))))
+        i += 1
+      }
+      out.push(`<blockquote>${quote.join('\n')}</blockquote>`)
+      continue
+    }
+
+    const ulItem = /^\s*[-*]\s+/.test(raw)
+    const olItem = /^\s*\d+\.\s+/.test(raw)
+    if (ulItem || olItem) {
+      flushParagraph()
+      const tag = ulItem ? 'ul' : 'ol'
+      const marker = ulItem ? /^\s*[-*]\s+/ : /^\s*\d+\.\s+/
+      const items: string[] = []
+      while (i < lines.length && marker.test(lines[i] ?? '')) {
+        items.push(`<li>${inline(escapeHtml((lines[i] ?? '').replace(marker, '')))}</li>`)
+        i += 1
+      }
+      out.push(`<${tag}>${items.join('')}</${tag}>`)
+      continue
+    }
+
+    if (raw.trim() === '') {
+      flushParagraph()
+      i += 1
+      continue
+    }
+
+    paragraph.push(line)
+    i += 1
+  }
+  flushParagraph()
+  return out.join('\n')
+}

package/apps/smidja-factory/apps/visualizer/src/lib/models.ts

@@ -0,0 +1,42 @@
+/**
+ * Model → provider icon, by contains-check on the model name.
+ *
+ * Icons live in public/models/ (served from the site root). First matching
+ * needle wins; unknown models render no icon.
+ */
+
+const MODEL_ICONS: [needles: string[], icon: string][] = [
+  [['claude', 'opus', 'sonnet', 'haiku'], '/models/claude.png'],
+  [['gemini'], '/models/gemini.png'],
+  [['kimi', 'moonshot'], '/models/kimi.png'],
+  [['gpt', 'openai', 'codex', 'o3', 'o4'], '/models/openai.png'],
+  [['glm', 'zai', 'z.ai'], '/models/zai.png'],
+]
+
+export function modelIcon(model: string | null | undefined): string | null {
+  if (!model) return null
+  const m = model.toLowerCase()
+  for (const [needles, icon] of MODEL_ICONS) {
+    if (needles.some((n) => m.includes(n))) return icon
+  }
+  return null
+}
+
+/** Keep provider-qualified IDs compact while preserving the full ID in titles. */
+export function modelName(model: string | null | undefined): string {
+  if (!model) return ''
+  return model.split('/').filter(Boolean).at(-1) ?? model
+}
+
+/** Local providers run on own hardware and bill $0 (LM Studio / Ollama / llama.cpp). */
+const LOCAL_PROVIDERS = ['lmstudio', 'ollama', 'llamacpp', 'local', 'openrouter:local']
+
+/** Whether a provider-qualified model id runs locally (free) vs a cloud API. */
+export function modelKind(model: string | null | undefined): 'local' | 'online' | null {
+  if (!model) return null
+  const m = model.toLowerCase()
+  if (LOCAL_PROVIDERS.some((p) => m.startsWith(p + '/') || m.includes(p))) return 'local'
+  // Unknown / plain model names default to online (billed) — safer than
+  // claiming "free" for something we can't see.
+  return 'online'
+}

package/apps/smidja-factory/apps/visualizer/src/lib/router.ts

@@ -0,0 +1,67 @@
+import { ref } from 'vue'
+
+// Hash routes: #/ → sessions · #/memory → Kaia's memory · #/<smidja_id> → waterfall · #/<smidja_id>/<phase_id> → phase panel open
+export interface Route {
+  /** "memory" is the Kaia memory view; otherwise a session smidja_id. */
+  adwId: string | null
+  phaseId: string | null
+}
+
+function parse(): Route {
+  const parts = window.location.hash
+    .replace(/^#\/?/, '')
+    .split('/')
+    .filter(Boolean)
+    .map(decodeURIComponent)
+  return { adwId: parts[0] ?? null, phaseId: parts[1] ?? null }
+}
+
+const route = ref<Route>(parse())
+
+window.addEventListener('hashchange', () => {
+  route.value = parse()
+})
+
+export function useRoute() {
+  return route
+}
+
+// Display name for the phase crumb — set by the trace view once phases load,
+// since the phase_id in the URL is not the display name.
+export const phaseCrumb = ref<string | null>(null)
+
+export function hrefFor(adwId?: string | null, phaseId?: string | null): string {
+  let h = '#/'
+  if (adwId) h += encodeURIComponent(adwId)
+  if (adwId && phaseId) h += `/${encodeURIComponent(phaseId)}`
+  return h
+}
+
+export function navigate(adwId?: string | null, phaseId?: string | null): void {
+  window.location.hash = hrefFor(adwId, phaseId)
+}
+
+/** Route to the memory view. */
+export function hrefForMemory(): string {
+  return '#/memory'
+}
+
+/** Route to the decisions view. */
+export function hrefForDecisions(): string {
+  return '#/decisions'
+}
+
+/** Route to the statistics view. */
+export function hrefForStats(): string {
+  return '#/stats'
+}
+
+/** Route to the orchestrator chat view. */
+export function hrefForChat(): string {
+  return '#/chat'
+}
+
+/** Route to the local settings view. */
+export function hrefForSettings(): string {
+  return '#/settings'
+}

package/apps/smidja-factory/apps/visualizer/src/lib/types.ts

@@ -0,0 +1,61 @@
+// Single switch point onto the server's contract: everything UI-side imports
+// table shapes from here, which re-exports shared/types.ts.
+export type {
+  Session,
+  SessionSummary,
+  SessionUsage,
+  SessionDetail,
+  Phase,
+  Event as EventRow,
+  EventsPage,
+  Envelope,
+  GateResult,
+  GateCheck,
+  AgentSession,
+  AgentStartPayload,
+  AgentEndPayload,
+  UsageBreakdown,
+  ToolCallPayload,
+  AgentPrompts,
+  PromptsResponse,
+  HealthResponse,
+  SessionStatus,
+  PhaseStatus,
+  PhaseKind,
+  EventType,
+  MemoryEpisode,
+  MemoryFact,
+  MemoryInspect,
+  MemoryRecall,
+  MemoryRecallResult,
+  MemoryTimeline,
+  MemoryHealth,
+  DecisionsResponse,
+  DecisionsBucket,
+  StatsResponse,
+  StatsTotals,
+  StatsUsage,
+  VendorCost,
+  VendorModelCost,
+  ModelKind,
+  ProviderStat,
+  ModelProviderStat,
+  ProviderBreakdown,
+  ChainStat,
+  ChatMessage,
+  ChatMessageRole,
+  ChatToolCall,
+  SessionLaunch,
+  ChatMessageRequest,
+  ChatMessageResponse,
+  ChatHistoryResponse,
+  SessionStartRequest,
+  SessionStartResponse,
+  RosterInfo,
+  ModelInfo,
+  RostersResponse,
+  ModelsResponse,
+  SettingInfo,
+  SettingsResponse,
+  SettingsSaveRequest,
+} from '@shared/types'

package/apps/smidja-factory/apps/visualizer/src/main.ts

@@ -0,0 +1,13 @@
+import { createApp } from 'vue'
+// The cloth's type — Cormorant (display), Newsreader (UI), IBM Plex Mono (data).
+import '@fontsource/cormorant/400.css'
+import '@fontsource/cormorant/500.css'
+import '@fontsource/cormorant/600.css'
+import '@fontsource-variable/newsreader'
+import '@fontsource/ibm-plex-mono/300.css'
+import '@fontsource/ibm-plex-mono/400.css'
+import '@fontsource/ibm-plex-mono/500.css'
+import App from './App.vue'
+import './style.css'
+
+createApp(App).mount('#app')