@zerwiz/ymir 0.1.33 → 0.1.35

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

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { onMounted, ref, shallowRef } from 'vue'
+import type { DecisionsResponse } from '../lib/types'
+import { fetchDecisions } from '../lib/api'
+import { fmtDate } from '../lib/format'
+
+const data = shallowRef<DecisionsResponse | null>(null)
+const apiError = ref<string | null>(null)
+const loaded = ref(false)
+
+async function load() {
+  try {
+    data.value = await fetchDecisions()
+    apiError.value = null
+  } catch (err) {
+    apiError.value = err instanceof Error ? err.message : String(err)
+  } finally {
+    loaded.value = true
+  }
+}
+onMounted(() => void load())
+
+function clsClass(cls: string): string {
+  if (cls.includes('JSON') || cls.includes('HALLUCINATED')) return 'cls cls-warn'
+  if (cls === 'EMPTY_COMMIT' || cls === 'STOPPED') return 'cls cls-mild'
+  return 'cls'
+}
+
+function fmtRuns(runs: string[]): string {
+  return runs.length > 6 ? `${runs.slice(0, 6).join(' · ')} · +${runs.length - 6} more` : runs.join(' · ')
+}
+</script>
+
+<template>
+  <div class="decisions">
+    <div v-if="apiError" class="error-bar">decisions unreachable — {{ apiError }}</div>
+
+    <div class="head">
+      <div class="title">Decisions <span class="dim">— what to change to make the smidja work</span></div>
+      <div v-if="data" class="stat-row">
+        <span class="stat"><b>{{ data.total_failed }}</b> failed runs</span>
+        <span class="stat"><b>{{ data.decisions.length }}</b> diagnosis × model buckets</span>
+        <span class="dim">generated {{ fmtDate(data.generated_at) }}</span>
+      </div>
+    </div>
+
+    <div v-if="data && !data.decisions.length" class="empty-state">
+      no failures recorded — the smidja has nothing to improve yet
+    </div>
+
+    <div v-if="data && data.decisions.length" class="cards">
+      <div v-for="(d, i) in data.decisions" :key="i" class="card">
+        <div class="card-top">
+          <span :class="clsClass(d.diagnosis)">{{ d.diagnosis }}</span>
+          <span class="count">×{{ d.count }}</span>
+        </div>
+        <div class="model" :title="d.model">{{ d.model }}</div>
+        <div class="fix">fix: {{ d.fix }}</div>
+        <div class="meta">
+          <span class="dim">last {{ fmtDate(d.last_seen) }}</span>
+        </div>
+        <div class="runs">{{ fmtRuns(d.runs) }}</div>
+      </div>
+    </div>
+
+    <div v-else-if="!loaded && !apiError" class="empty-state">loading decisions…</div>
+  </div>
+</template>
+
+<style scoped>
+.decisions {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 24px 40px;
+}
+
+.head {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.title {
+  font-size: 22px;
+  font-weight: 600;
+}
+.stat-row {
+  display: flex;
+  gap: 20px;
+  align-items: baseline;
+}
+.stat b {
+  font-size: 20px;
+  color: var(--accent);
+  margin-right: 4px;
+}
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+  gap: 14px;
+}
+.card {
+  background: rgba(16, 21, 32, 0.6);
+  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
+  border-radius: 12px;
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.cls {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  border-radius: 99px;
+  padding: 3px 10px;
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  color: var(--accent);
+}
+.cls-warn {
+  background: color-mix(in srgb, var(--red) 16%, transparent);
+  color: var(--red);
+}
+.cls-mild {
+  background: rgba(148, 163, 255, 0.14);
+  color: var(--violet);
+}
+.count {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--accent);
+}
+.model {
+  font-family: var(--mono, monospace);
+  font-size: 13px;
+  color: var(--dim);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fix {
+  font-size: 13px;
+  line-height: 1.5;
+}
+.meta {
+  font-size: 12px;
+}
+.runs {
+  font-family: var(--mono, monospace);
+  font-size: 11px;
+  color: var(--dim);
+  border-top: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
+  padding-top: 8px;
+}
+.dim {
+  color: var(--dim);
+}
+.empty-state {
+  color: var(--dim);
+  font-size: 13px;
+  padding: 14px 2px;
+}
+.error-bar {
+  background: rgba(251, 113, 133, 0.12);
+  border: 1px solid rgba(251, 113, 133, 0.4);
+  border-radius: 8px;
+  color: var(--red);
+  padding: 10px 14px;
+  font-size: 13px;
+}
+</style>

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

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+defineProps<{
+  title: string
+  /** Lucide icon component rendered before the title. */
+  icon?: Component
+  /** Shown after the title; omit for sections without a natural count. */
+  count?: number | null
+  open: boolean
+}>()
+
+defineEmits<{ toggle: [] }>()
+</script>
+
+<template>
+  <section class="dsec">
+    <button class="dsec-head" @click="$emit('toggle')">
+      <span class="chev">{{ open ? '▾' : '▸' }}</span>
+      <component :is="icon" v-if="icon" class="dsec-icon" :size="19" :stroke-width="2" />
+      <span class="dsec-title">{{ title }}</span>
+      <span v-if="count != null" class="dsec-count dim">({{ count }})</span>
+    </button>
+    <div v-if="open" class="dsec-body">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.dsec {
+  margin-bottom: 14px;
+}
+
+.dsec-head {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 6px 8px;
+  background: none;
+  border: none;
+  border-bottom: 1px solid var(--border-soft);
+  border-radius: 6px 6px 0 0;
+  color: var(--dim);
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: lowercase;
+  cursor: pointer;
+  text-align: left;
+}
+
+.dsec-icon {
+  flex: none;
+  color: var(--faint);
+}
+
+.dsec-head:hover {
+  background: var(--panel-2);
+  color: var(--text);
+}
+
+.chev {
+  color: var(--faint);
+  flex: none;
+}
+
+.dsec-count {
+  font-weight: 500;
+}
+
+.dsec-body {
+  padding-top: 10px;
+}
+</style>

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

@@ -0,0 +1,397 @@
+<script setup lang="ts">
+import { onMounted, ref, shallowRef } from 'vue'
+import type { MemoryEpisode, MemoryFact, MemoryHealth, MemoryInspect } from '../lib/types'
+import {
+  fetchMemoryHealth,
+  fetchMemoryInspect,
+  fetchMemoryRecall,
+  fetchMemoryTimeline,
+  observeMemory,
+} from '../lib/api'
+import { fmtDate } from '../lib/format'
+
+// ── state ───────────────────────────────────────────────────────────────────
+const health = ref<MemoryHealth>({ ok: false, db: '' })
+const inspect = shallowRef<MemoryInspect | null>(null)
+const apiError = ref<string | null>(null)
+
+const recallQ = ref('')
+const recallMode = ref<'hybrid' | 'cosine' | 'spreading'>('hybrid')
+const recallResults = shallowRef<{ score: number; episode: MemoryEpisode }[]>([])
+const recallLoading = ref(false)
+const searched = ref(false)
+
+const timelineEntity = ref('')
+const timeline = shallowRef<MemoryFact[]>([])
+const timelineLoading = ref(false)
+
+const observeText = ref('')
+const observeTags = ref('')
+const observing = ref(false)
+const observeDone = ref<string | null>(null)
+
+// ── load ────────────────────────────────────────────────────────────────────
+async function load() {
+  try {
+    health.value = await fetchMemoryHealth()
+    inspect.value = await fetchMemoryInspect()
+    apiError.value = null
+  } catch (err) {
+    apiError.value = err instanceof Error ? err.message : String(err)
+  }
+}
+onMounted(() => void load())
+
+// ── actions ─────────────────────────────────────────────────────────────────
+async function runRecall() {
+  const q = recallQ.value.trim()
+  if (!q) return
+  recallLoading.value = true
+  recallResults.value = []
+  try {
+    const data = await fetchMemoryRecall(q, 8, recallMode.value)
+    recallResults.value = data.results
+    searched.value = true
+  } catch (err) {
+    apiError.value = err instanceof Error ? err.message : String(err)
+  } finally {
+    recallLoading.value = false
+  }
+}
+
+async function runTimeline() {
+  const entity = timelineEntity.value.trim()
+  if (!entity) return
+  timelineLoading.value = true
+  timeline.value = []
+  try {
+    timeline.value = (await fetchMemoryTimeline(entity)).facts
+  } catch (err) {
+    apiError.value = err instanceof Error ? err.message : String(err)
+  } finally {
+    timelineLoading.value = false
+  }
+}
+
+async function submitObserve() {
+  const content = observeText.value.trim()
+  if (!content) return
+  observing.value = true
+  observeDone.value = null
+  try {
+    const tags = observeTags.value
+      .split(',')
+      .map((t) => t.trim())
+      .filter(Boolean)
+    const res = await observeMemory(content, tags, ['kaia'], 0.7)
+    observeDone.value = res.id
+    observeText.value = ''
+    observeTags.value = ''
+    await load()
+  } catch (err) {
+    apiError.value = err instanceof Error ? err.message : String(err)
+  } finally {
+    observing.value = false
+  }
+}
+
+function tagClass(tag: string): string {
+  if (tag === 'success') return 'tag tag-success'
+  if (tag === 'fail' || tag === 'blocked') return 'tag tag-fail'
+  return 'tag'
+}
+</script>
+
+<template>
+  <div class="memory">
+    <div v-if="apiError" class="error-bar">memory unreachable — {{ apiError }}</div>
+
+    <!-- header + stats -->
+    <div class="head">
+      <div class="title">Kaia's memory <span class="dim">(engram)</span></div>
+      <div v-if="health.ok" class="stat-row">
+        <span class="stat">
+          <b>{{ inspect?.counts.episodes ?? health.episodes ?? '—' }}</b>
+          episodes
+        </span>
+        <span class="stat">
+          <b>{{ inspect?.counts.facts ?? health.facts ?? '—' }}</b>
+          facts
+        </span>
+        <span class="stat">
+          <b>{{ inspect?.counts.entities ?? health.entities ?? '—' }}</b>
+          entities
+        </span>
+        <span v-if="inspect?.db" class="dim db">db: {{ inspect.db }}</span>
+      </div>
+    </div>
+
+    <div v-if="!health.ok && !apiError" class="empty-state">
+      memory bridge offline — start it with <code>bin/mimir-bridge.sh --start</code>
+      (the Well, :4602) or <code>scripts/start.sh</code>
+    </div>
+
+    <template v-if="health.ok">
+      <!-- recall -->
+      <section class="panel">
+        <div class="panel-title">Recall</div>
+        <div class="row">
+          <input
+            v-model="recallQ"
+            class="input"
+            placeholder="what works for building ymir?"
+            @keyup.enter="runRecall"
+          />
+          <select v-model="recallMode" class="input select">
+            <option value="hybrid">hybrid</option>
+            <option value="cosine">cosine</option>
+            <option value="spreading">spreading</option>
+          </select>
+          <button class="btn" :disabled="recallLoading" @click="runRecall">
+            {{ recallLoading ? 'recalling…' : 'recall' }}
+          </button>
+        </div>
+        <div v-if="recallResults.length" class="results">
+          <div v-for="(r, i) in recallResults" :key="i" class="result">
+            <div class="result-score" :title="`score ${r.score}`">
+              {{ r.score.toFixed(2) }}
+            </div>
+            <div class="result-body">
+              <div class="result-content">{{ r.episode.content }}</div>
+              <div class="result-meta">
+                <span v-if="r.episode.timestamp" class="dim">{{ fmtDate(r.episode.timestamp) }}</span>
+                <span
+                  v-for="t in r.episode.tags"
+                  :key="t"
+                  :class="tagClass(t)"
+                >
+                  {{ t }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else-if="searched" class="empty-state">no memories matched</div>
+      </section>
+
+      <!-- timeline -->
+      <section class="panel">
+        <div class="panel-title">Timeline</div>
+        <div class="row">
+          <input
+            v-model="timelineEntity"
+            class="input"
+            placeholder="entity — e.g. ymir"
+            @keyup.enter="runTimeline"
+          />
+          <button class="btn" :disabled="timelineLoading" @click="runTimeline">
+            {{ timelineLoading ? 'loading…' : 'facts' }}
+          </button>
+        </div>
+        <div v-if="timeline.length" class="results">
+          <div v-for="(f, i) in timeline" :key="i" class="fact">
+            <b>{{ f.subject }}</b> {{ f.predicate }} <b>{{ f.object }}</b>
+            <span v-if="f.valid_from" class="dim">
+              {{ fmtDate(f.valid_from) }} → {{ f.valid_to ? fmtDate(f.valid_to) : 'now' }}
+            </span>
+          </div>
+        </div>
+      </section>
+
+      <!-- observe -->
+      <section class="panel">
+        <div class="panel-title">Observe <span class="dim">(write a memory)</span></div>
+        <div class="row">
+          <input
+            v-model="observeText"
+            class="input grow"
+            placeholder="project=ymir task=coding mode=cloud-fast model=deepseek-v4-flash tool_calls_ok=1 gates_passed=3/3 outcome=success"
+            @keyup.enter="submitObserve"
+          />
+          <input
+            v-model="observeTags"
+            class="input tags"
+            placeholder="tags, comma, sep"
+            @keyup.enter="submitObserve"
+          />
+          <button class="btn" :disabled="observing || !observeText.trim()" @click="submitObserve">
+            {{ observing ? 'writing…' : 'observe' }}
+          </button>
+        </div>
+        <div v-if="observeDone" class="ok">stored {{ observeDone }}</div>
+      </section>
+
+      <!-- recent episodes -->
+      <section class="panel">
+        <div class="panel-title">Recent episodes</div>
+        <div v-if="inspect?.episodes.length" class="results">
+          <div v-for="(ep, i) in inspect.episodes" :key="ep.id ?? i" class="result">
+            <div class="result-score dim">{{ ep.importance?.toFixed(2) ?? '—' }}</div>
+            <div class="result-body">
+              <div class="result-content">{{ ep.content }}</div>
+              <div class="result-meta">
+                <span v-if="ep.timestamp" class="dim">{{ fmtDate(ep.timestamp) }}</span>
+                <span v-for="t in ep.tags" :key="t" :class="tagClass(t)">{{ t }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else class="empty-state">no memories yet — run a mission to start learning</div>
+      </section>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.memory {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 24px 40px;
+}
+
+.head {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.title {
+  font-size: 22px;
+  font-weight: 600;
+}
+.stat-row {
+  display: flex;
+  gap: 20px;
+  align-items: baseline;
+}
+.stat b {
+  font-size: 20px;
+  color: var(--accent);
+  margin-right: 4px;
+}
+.db {
+  font-size: 12px;
+  margin-left: auto;
+}
+
+.panel {
+  background: rgba(16, 21, 32, 0.6);
+  border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
+  border-radius: 12px;
+  padding: 14px 16px;
+}
+.panel-title {
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.input {
+  background: rgba(11, 15, 24, 0.8);
+  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
+  border-radius: 8px;
+  color: inherit;
+  padding: 8px 12px;
+  flex: 1 1 260px;
+}
+.input.grow {
+  flex: 3 1 420px;
+}
+.input.tags {
+  flex: 1 1 160px;
+}
+.select {
+  flex: 0 0 auto;
+  width: auto;
+}
+.btn {
+  background: linear-gradient(90deg, var(--accent), var(--accent));
+  border: none;
+  border-radius: 8px;
+  color: var(--panel-3);
+  font-weight: 600;
+  padding: 8px 16px;
+  cursor: pointer;
+}
+.btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.results {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 10px;
+}
+.result {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+}
+.result-score {
+  min-width: 38px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  font-size: 13px;
+  padding-top: 2px;
+}
+.result-body {
+  flex: 1;
+}
+.result-content {
+  font-size: 13px;
+  line-height: 1.45;
+}
+.result-meta {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-top: 4px;
+}
+.tag {
+  font-size: 11px;
+  border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
+  border-radius: 99px;
+  padding: 1px 8px;
+  color: var(--faint);
+}
+.tag-success {
+  border-color: color-mix(in srgb, var(--green) 50%, transparent);
+  color: var(--green);
+}
+.tag-fail {
+  border-color: rgba(251, 113, 133, 0.5);
+  color: var(--red);
+}
+.fact {
+  font-size: 13px;
+  padding: 6px 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
+}
+.ok {
+  margin-top: 8px;
+  color: var(--green);
+  font-size: 13px;
+}
+.dim {
+  color: var(--dim);
+}
+.empty-state {
+  color: var(--dim);
+  font-size: 13px;
+  padding: 14px 2px;
+}
+.error-bar {
+  background: rgba(251, 113, 133, 0.12);
+  border: 1px solid rgba(251, 113, 133, 0.4);
+  border-radius: 8px;
+  color: var(--red);
+  padding: 10px 14px;
+  font-size: 13px;
+}
+</style>