@zerwiz/ymir 0.1.33 → 0.1.35

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

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, shallowRef } from 'vue'
+import type { SessionSummary } from '../lib/types'
+import { fetchSessions } from '../lib/api'
+import { ts } from '../lib/format'
+import SessionCard from './SessionCard.vue'
+
+const sessions = shallowRef<SessionSummary[]>([])
+const apiError = ref<string | null>(null)
+const loaded = ref(false)
+const nowMs = ref(Date.now())
+
+let timer: ReturnType<typeof setInterval> | undefined
+let inflight = false
+
+async function tick() {
+  if (inflight) return
+  inflight = true
+  try {
+    sessions.value = await fetchSessions()
+    nowMs.value = Date.now()
+    apiError.value = null
+    loaded.value = true
+  } catch (err) {
+    apiError.value = err instanceof Error ? err.message : String(err)
+  } finally {
+    inflight = false
+  }
+}
+
+onMounted(() => {
+  void tick()
+  timer = setInterval(() => void tick(), 500)
+})
+
+onUnmounted(() => clearInterval(timer))
+
+/** Optimistic removal; an empty id means the write failed, so re-sync instead. */
+function onArchived(adwId: string) {
+  if (!adwId) {
+    void tick()
+    return
+  }
+  sessions.value = sessions.value.filter((s) => s.smidja_id !== adwId)
+}
+
+const ordered = computed(() =>
+  sessions.value.toSorted((a, b) => (ts(b.started_at) || 0) - (ts(a.started_at) || 0)),
+)
+</script>
+
+<template>
+  <div class="sessions">
+    <div v-if="apiError" class="error-bar">api unreachable — retrying {{ apiError }}</div>
+
+    <div v-if="ordered.length" class="list-head dim">{{ ordered.length }} runs</div>
+
+    <div v-if="ordered.length" class="cards">
+      <SessionCard
+        v-for="s in ordered"
+        :key="s.smidja_id"
+        :session="s"
+        :now-ms="nowMs"
+        @archived="onArchived"
+      />
+    </div>
+    <div v-else-if="loaded" class="empty-state">no sessions yet — run an smidja to see it here</div>
+    <div v-else-if="!apiError" class="empty-state">loading sessions…</div>
+  </div>
+</template>
+
+<style scoped>
+.sessions {
+  display: flex;
+  flex-direction: column;
+}
+
+.list-head {
+  padding: 16px 24px 0;
+  font-size: 16px;
+}
+
+.cards {
+  /* Uniform grid: every card the same width and (fixed in SessionCard) height,
+     independent of content. */
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
+  gap: 18px;
+  padding: 16px 24px 28px;
+}
+
+
+
+
+
+</style>

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

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import type { SettingInfo } from '../lib/types'
+
+const FIELDS = [
+  {
+    key: 'WAYOFTEAMS_MCP_TOKEN',
+    label: 'Teams MCP token',
+    hint: 'Per-user JWT from Teams → Settings → MCP. Stored locally in the repo .env (gitignored); the chat pi process uses it to load the full teams MCP surface.',
+    secret: true,
+    placeholder: 'paste token (replaces current)',
+  },
+  {
+    key: 'WOTEAMS_MCP_URL',
+    label: 'MCP endpoint',
+    hint: 'Base endpoint for your Teams MCP. The client auto-probes /mcp/v2 → legacy /mcp → REST.',
+    secret: false,
+    placeholder: 'https://teams.example.org',
+  },
+  {
+    key: 'WOTEAMS_AGENT_NAME',
+    label: 'Orchestrator name (Kaia)',
+    hint: 'What your orchestrator registers as in the Teams work registry (agents_list / update_my_work). Default: kaia-chat.',
+    secret: false,
+    placeholder: 'kaia-chat',
+  },
+] as const
+
+const settings = ref<Record<string, SettingInfo>>({})
+const values = ref<Record<string, string>>({})
+const status = ref<string | null>(null)
+const error = ref<string | null>(null)
+const saving = ref(false)
+
+async function load() {
+  try {
+    const res = await fetch('/api/settings')
+    const list = (await res.json()) as SettingInfo[]
+    const map: Record<string, SettingInfo> = {}
+    for (const s of list) map[s.key] = s
+    settings.value = map
+  } catch (e) {
+    error.value = (e as Error).message
+  }
+}
+
+async function save(key: string) {
+  const value = (values.value[key] ?? '').trim()
+  if (!value && settings.value[key]?.set && !confirm(`Clear ${key}?`)) return
+  saving.value = true
+  error.value = null
+  status.value = null
+  try {
+    const res = await fetch('/api/settings/save', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ key, value }),
+    })
+    if (!res.ok) throw new Error((await res.json()).error ?? 'save failed')
+    const saved = (await res.json()) as SettingInfo
+    settings.value[key] = saved
+    values.value[key] = ''
+    status.value = `${key} saved (${saved.set ? saved.masked : 'cleared'})`
+  } catch (e) {
+    error.value = (e as Error).message
+  } finally {
+    saving.value = false
+  }
+}
+
+onMounted(() => {
+  void load()
+})
+</script>
+
+<template>
+  <div class="settings">
+    <div class="settings-head">
+      <h1>Settings</h1>
+      <p class="sub">Teams MCP keys — stored locally in the repo <code>.env</code>, never echoed back.</p>
+    </div>
+
+    <p v-if="error" class="err">{{ error }}</p>
+    <p v-if="status" class="ok">{{ status }}</p>
+
+    <section v-for="f in FIELDS" :key="f.key" class="card">
+      <div class="card-top">
+        <h2>{{ f.label }}</h2>
+        <span v-if="settings[f.key]?.set" class="badge">{{ settings[f.key].masked }}</span>
+        <span v-else class="badge off">not set</span>
+      </div>
+      <p class="hint">{{ f.hint }}</p>
+      <div class="row">
+        <input
+          :type="f.secret ? 'password' : 'text'"
+          v-model="values[f.key]"
+          :placeholder="f.placeholder"
+          autocomplete="off"
+          spellcheck="false"
+          class="input"
+        />
+        <button class="save" type="button" :disabled="saving" @click="save(f.key)">
+          {{ values[f.key]?.trim() ? 'Save' : 'Clear' }}
+        </button>
+      </div>
+    </section>
+
+    <p class="note">
+      Kaia (the orchestrator chat) gets these keys on every message — the chat's pi process
+      loads the teams MCP tools directly, so it works even if your own
+      interactive pi doesn't have the package installed.
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.settings { max-width: 760px; margin: 0 auto; padding: 32px 24px; }
+.settings-head h1 { font-size: 22px; margin: 0 0 4px; color: var(--text); }
+.sub { color: var(--dim); margin: 0 0 18px; font-size: 13px; }
+code { font-family: var(--mono); font-size: 12px; background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }
+.err { color: var(--danger, var(--red)); font-size: 13px; }
+.ok { color: var(--green, var(--green)); font-size: 13px; }
+.card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
+.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.card-top h2 { font-size: 14px; margin: 0; color: var(--text); }
+.badge { font-family: var(--mono); font-size: 11px; color: var(--green, var(--green)); background: color-mix(in srgb, var(--green) 10%, transparent); padding: 2px 8px; border-radius: 999px; }
+.badge.off { color: var(--dim); background: var(--panel-2); }
+.hint { color: var(--dim); font-size: 12px; margin: 8px 0 12px; line-height: 1.5; }
+.row { display: flex; gap: 10px; }
+.input {
+  flex: 1;
+  font-family: var(--mono);
+  font-size: 13px;
+  background: var(--panel-2);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 9px 12px;
+  min-width: 0;
+}
+.save {
+  font-size: 13px;
+  color: var(--fg, var(--text));
+  background: var(--accent, var(--accent));
+  border: none;
+  border-radius: 8px;
+  padding: 9px 18px;
+  cursor: pointer;
+}
+.save:disabled { opacity: 0.5; }
+.note { color: var(--dim); font-size: 12px; margin-top: 18px; line-height: 1.6; }
+</style>

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

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { BookOpen, CircleDollarSign, Coins, PenLine, Timer } from 'lucide-vue-next'
+import { fmtCost, fmtDuration, fmtTokens } from '../lib/format'
+
+const props = defineProps<{
+  kind: 'cost' | 'tokens' | 'runtime' | 'read' | 'written'
+  /** Raw value — cost in dollars, tokens as a count, runtime in milliseconds. */
+  value: number | null | undefined
+  /** Bare value, no pill chrome — for tight spots like waterfall blocks. */
+  compact?: boolean
+  /** Where the run's model lives: 'local' = own hardware (free), 'online' = billed. */
+  modelKind?: 'local' | 'online' | null
+}>()
+
+const isLocal = computed(() => props.modelKind === 'local')
+
+const ICONS = {
+  cost: CircleDollarSign,
+  tokens: Coins,
+  runtime: Timer,
+  read: BookOpen,
+  written: PenLine,
+}
+
+// Every chip explains itself on hover. The token numbers in particular are read
+// wrong without one — the headline is billed volume, not distinct tokens.
+const TITLES = {
+  cost: 'Cost — dollars billed for this run, all agents combined.',
+  tokens:
+    'Tokens exchanged (billed) — everything sent or generated, counted once per turn. ' +
+    'Each turn re-sends the whole conversation, so this is far larger than the ' +
+    'conversation itself: it is spend, not size. The gap between it and read + ' +
+    'written is cached context re-read on later turns.',
+  runtime: 'Duration — wall-clock from the first phase starting to the last one ending.',
+  read:
+    'Read — raw tokens the models took in: prompts, file contents and tool results, ' +
+    'counted the first time they enter the context. Excludes cached re-reads of ' +
+    'material already counted here.',
+  written:
+    'Written — tokens the models actually generated. Each one produced exactly ' +
+    'once, so this is a true count of output.',
+}
+
+const text = computed(() => {
+  if (props.kind === 'cost') {
+    // A local model (LM Studio / Ollama / llama.cpp) runs on own hardware and
+    // bills $0 — show that honestly ("local · free") instead of a fake $0.0000.
+    // Online runs show real cost; unknown kind falls back to the value.
+    if (isLocal.value || (props.modelKind == null && props.value === 0)) return 'local · free'
+    return fmtCost(props.value)
+  }
+  if (props.kind === 'runtime') return fmtDuration(props.value ?? NaN)
+  return fmtTokens(props.value)
+})
+</script>
+
+<template>
+  <span class="stat" :class="{ compact }" :title="TITLES[kind]">
+    <component :is="ICONS[kind]" class="stat-icon" :size="compact ? 17 : 19" :stroke-width="2" />
+    <span class="stat-value">{{ text }}</span>
+  </span>
+</template>
+
+<style scoped>
+.stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 3px 12px;
+  border: 1px solid var(--border-soft);
+  border-radius: 999px;
+  background: rgba(19, 26, 38, 0.6);
+  font-size: 16px;
+  white-space: nowrap;
+}
+
+.stat-icon {
+  color: var(--faint);
+  flex: none;
+}
+
+.stat-value {
+  color: var(--text);
+  font-family: var(--mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.stat.compact {
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+
+.stat.compact .stat-value {
+  color: var(--dim);
+}
+</style>