@zerwiz/ymir 0.1.33 → 0.1.35

package/apps/hlidskjalf/src/gates/Tasks.tsx

@@ -0,0 +1,173 @@
+import { useState } from 'react';
+import { useYmir } from '../state/store';
+import { useUI } from '../state/ui';
+import { TASK_STATE_META, TASK_STATES } from '../data/realms';
+import { TaskChip } from '../components/TaskChip';
+import { RuneTag } from '../components/RuneTag';
+
+export function Tasks() {
+  const tasks = useYmir((s) => s.tasks);
+  const pushStream = useYmir((s) => s.pushStream);
+  const { openModal, toast } = useUI();
+  const [selectedId, setSelectedId] = useState<string | null>(tasks[0]?.id ?? null);
+  const selected = tasks.find((t) => t.id === selectedId) ?? null;
+
+  function announce() {
+    if (!selected) return;
+    pushStream({
+      id: `ann-${selected.id}-${Date.now()}`,
+      ts: new Date().toISOString(),
+      kind: 'ratatoskr',
+      from: selected.agent,
+      to: 'Kaia',
+      taskId: selected.id,
+      state: selected.state,
+      module: 'ratatoskr',
+      message: `${selected.id} announced ${selected.state} to peers`,
+      checksum: Math.random().toString(16).slice(2, 8),
+    });
+    toast({ kind: 'info', title: 'State announced', body: `${selected.id} → ${selected.state}` });
+  }
+
+  function recall() {
+    if (!selected) return;
+    openModal({
+      variant: 'info',
+      tone: 'info',
+      glyph: 'ᛜ',
+      title: `Recall — ${selected.id}`,
+      body: `Well returned ${selected.log.length} episodes for ${selected.agent}. Drink before you act.`,
+      content: selected.log.join('\n'),
+    });
+  }
+
+  const byState = TASK_STATES.map((state) => ({
+    state,
+    items: tasks.filter((t) => t.state === state),
+  }));
+
+  return (
+    <>
+      <div className="stage-head">
+        <div>
+          <h1 className="stage-title">The Tasks</h1>
+          <p className="stage-deck">
+            A2A lifecycle · SUBMITTED → WORKING → TERMINAL · terminal states never restart
+          </p>
+        </div>
+      </div>
+
+      <div className="gate-grid" style={{ gridTemplateColumns: 'minmax(0, 1fr) 380px' }}>
+        <div className="board">
+          {byState.map((col) => {
+            const meta = TASK_STATE_META[col.state];
+            return (
+              <div className="board-col" key={col.state}>
+                <div className="board-col-head">
+                  <span className="row">
+                    <span aria-hidden="true">{meta.glyph}</span>
+                    <span className="mono" style={{ fontSize: 12 }}>
+                      {meta.label}
+                    </span>
+                  </span>
+                  <span className="gate-count">{col.items.length}</span>
+                </div>
+                <div className="board-col-body">
+                  {col.items.map((t) => (
+                    <button
+                      key={t.id}
+                      className="task-mini"
+                      onClick={() => setSelectedId(t.id)}
+                      aria-selected={selectedId === t.id}
+                    >
+                      <div className="tm-title">{t.title}</div>
+                      <div className="tm-meta">
+                        <span>{t.agent}</span>
+                        <span>{t.order}</span>
+                      </div>
+                      <div style={{ marginTop: 8 }}>
+                        <div className="progress">
+                          <span style={{ width: `${t.progress}%` }} />
+                        </div>
+                      </div>
+                    </button>
+                  ))}
+                  {col.items.length === 0 ? (
+                    <div className="mono dim" style={{ fontSize: 11, padding: 8 }}>
+                      — empty —
+                    </div>
+                  ) : null}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        <section className="panel task-detail">
+          {selected ? (
+            <>
+              <div className="panel-head">
+                <div className="panel-title">
+                  <span className="glyph" aria-hidden="true">ᛏ</span>
+                  {selected.id}
+                </div>
+                <TaskChip state={selected.state} />
+              </div>
+              <div className="panel-body col" style={{ gap: 'var(--ymir-space-3)' }}>
+                <h2 style={{ fontSize: 18, lineHeight: 1.3 }}>{selected.title}</h2>
+                <div className="row" style={{ flexWrap: 'wrap', gap: 6 }}>
+                  <RuneTag label={selected.order} glyph="ᛟ" color="var(--ymir-cyan-1)" />
+                  <RuneTag label={selected.agent} glyph="ᚠ" />
+                </div>
+                <div className="progress">
+                  <span style={{ width: `${selected.progress}%` }} />
+                </div>
+                <div className="row-between mono dim" style={{ fontSize: 11 }}>
+                  <span>started {new Date(selected.startedAt).toLocaleTimeString('en-GB', { hour12: false })}</span>
+                  <span>{selected.progress}%</span>
+                </div>
+
+                <div className="eyebrow">Live log</div>
+                <div>
+                  {selected.log.map((line, i) => (
+                    <div className="log-line" key={i}>
+                      <span className="caret" aria-hidden="true">›</span>
+                      <span>{line}</span>
+                    </div>
+                  ))}
+                </div>
+
+                {selected.artifacts.length > 0 ? (
+                  <>
+                    <div className="eyebrow">Artifacts</div>
+                    <div className="col" style={{ gap: 4 }}>
+                      {selected.artifacts.map((a) => (
+                        <span className="mono" key={a} style={{ fontSize: 12, color: 'var(--ymir-text-1)' }}>
+                          ◆ {a}
+                        </span>
+                      ))}
+                    </div>
+                  </>
+                ) : null}
+
+                <div className="row" style={{ marginTop: 'var(--ymir-space-2)' }}>
+                  <button className="btn btn-primary" onClick={announce}>
+                    <span aria-hidden="true">⇄</span> Announce state
+                  </button>
+                  <button className="btn" onClick={recall}>
+                    <span aria-hidden="true">ᛜ</span> Recall context
+                  </button>
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="empty">
+              <span className="glyph" aria-hidden="true">ᛏ</span>
+              <p>Select a task from the board.</p>
+            </div>
+          )}
+        </section>
+      </div>
+    </>
+  );
+}

package/apps/hlidskjalf/src/gates/Trace.tsx

@@ -0,0 +1,155 @@
+import { useYmir } from '../state/store';
+import { StatusChip } from '../components/Status';
+
+function tone(status: string | null) {
+  return status === 'success' ? 'nominal' : status === 'fail' ? 'down' : status === 'running' ? 'degraded' : 'degraded';
+}
+
+/** The smithy's borrowed "engineer" is the Allfather's seat in these halls. */
+const who = (v: string | null | undefined) => (v === 'engineer' ? 'Allfather' : v ?? '—');
+
+/** Trace — one run's lanes, phases, agents, and tool calls (W0081/W0082). */
+export function Trace() {
+  const id = useYmir((s) => s.selectedSession);
+  const detail = useYmir((s) => s.sessionDetail);
+  const setGate = useYmir((s) => s.setGate);
+
+  if (!id) {
+    return (
+      <>
+        <div className="stage-head">
+          <div>
+            <h1 className="stage-title">Trace</h1>
+            <p className="stage-deck">Pick a run from Sessions to open its trace.</p>
+          </div>
+        </div>
+        <section className="panel">
+          <div className="panel-body">
+            <button className="btn" onClick={() => setGate('sessions')}>
+              <span aria-hidden="true">ᛋ</span> Open Sessions
+            </button>
+          </div>
+        </section>
+      </>
+    );
+  }
+
+  const phases = detail?.phases ?? [];
+  const agents = detail?.agents ?? [];
+  const events = detail?.events ?? [];
+  const toolCalls = events.filter((e) => e.type === 'tool_call');
+
+  return (
+    <>
+      <div className="stage-head">
+        <div>
+          <h1 className="stage-title">
+            Trace · <span className="mono">{id.slice(0, 12)}</span>
+          </h1>
+          <p className="stage-deck">
+            {detail?.session.smidja_name ?? 'run'} · {phases.length} phases · {agents.length} agents ·{' '}
+            {toolCalls.length} tool calls
+          </p>
+        </div>
+        <div className="row">
+          <button className="btn" onClick={() => setGate('sessions')}>
+            ← Sessions
+          </button>
+          <StatusChip status={tone(detail?.session.status ?? null)} />
+        </div>
+      </div>
+
+      <section className="panel" style={{ marginBottom: 'var(--ymir-space-4)' }}>
+        <div className="panel-head">
+          <div className="panel-title">
+            <span className="glyph" aria-hidden="true">ᛚ</span>
+            Lanes &amp; phases
+          </div>
+        </div>
+        <div className="panel-body flush">
+          {phases.length === 0 ? (
+            <div className="muted" style={{ padding: 12 }}>No phases recorded.</div>
+          ) : (
+            <table className="data-table">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th>Phase</th>
+                  <th>Kind</th>
+                  <th>Owner</th>
+                  <th>Status</th>
+                  <th>Try</th>
+                  <th>Error</th>
+                </tr>
+              </thead>
+              <tbody>
+                {phases.map((p) => (
+                  <tr key={p.phase_id}>
+                    <td className="num">{p.seq ?? '—'}</td>
+                    <td>
+                      <div className="mono">{p.name ?? '—'}</div>
+                      {p.description ? <div className="dim" style={{ fontSize: 11 }}>{p.description}</div> : null}
+                    </td>
+                    <td className="muted">{who(p.kind)}</td>
+                    <td className="mono">{who(p.owner)}</td>
+                    <td>
+                      <StatusChip status={tone(p.status)} />
+                    </td>
+                    <td className="num">{p.attempt ?? 0}</td>
+                    <td className="mono dim" style={{ maxWidth: 220, overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                      {p.error ?? ''}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </section>
+
+      <div className="gate-grid cols-2">
+        <section className="panel">
+          <div className="panel-head">
+            <div className="panel-title">
+              <span className="glyph" aria-hidden="true">ᚠ</span>
+              Agents &amp; context
+            </div>
+          </div>
+          <div className="panel-body col" style={{ gap: 8 }}>
+            {agents.map((a) => (
+              <div key={a.agent} className="row-between" style={{ fontSize: 13 }}>
+                <span className="mono">{a.agent}</span>
+                <span className="muted">{a.model ?? '—'}</span>
+                <span className="num">
+                  {a.context_tokens != null && a.context_window
+                    ? `${Math.round((a.context_tokens / a.context_window) * 100)}%`
+                    : '—'}
+                </span>
+              </div>
+            ))}
+            {agents.length === 0 ? <span className="muted">No agent sessions.</span> : null}
+          </div>
+        </section>
+
+        <section className="panel">
+          <div className="panel-head">
+            <div className="panel-title">
+              <span className="glyph" aria-hidden="true">ᛋ</span>
+              Tool calls
+            </div>
+          </div>
+          <div className="panel-body flush" style={{ maxHeight: 320, overflow: 'auto' }}>
+            {toolCalls.slice(0, 60).map((e) => (
+              <div className="trace-row" key={e.rowid} style={{ gridTemplateColumns: 'auto 1fr auto' }}>
+                <span className="mono dim">{e.phase_id?.slice(0, 6) ?? '—'}</span>
+                <span className="event truncate mono">{e.name ?? e.type}</span>
+                <span className="checksum">{e.tokens ?? ''}</span>
+              </div>
+            ))}
+            {toolCalls.length === 0 ? <div className="muted" style={{ padding: 12 }}>No tool calls recorded.</div> : null}
+          </div>
+        </section>
+      </div>
+    </>
+  );
+}

package/apps/hlidskjalf/src/gates/Well.tsx

@@ -0,0 +1,154 @@
+import { useYmir } from '../state/store';
+import { useUI } from '../state/ui';
+import { RecallPanel } from '../components/RecallPanel';
+import { MetricTile } from '../components/MetricTile';
+import { RuneTag } from '../components/RuneTag';
+import { gateApi } from '../services/api';
+
+const timeOf = (ts: string) => {
+  try {
+    return new Date(ts).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', hour12: false });
+  } catch {
+    return '--:--';
+  }
+};
+
+export function Well() {
+  const recall = useYmir((s) => s.recall);
+  const mimir = useYmir((s) => s.mimir);
+  const { openModal, toast } = useUI();
+
+  const timeline = recall.slice(0, 6).map((e) => ({
+    ts: timeOf(e.ts),
+    label: e.title,
+    detail: `${e.agentScope} · ${e.mode} · ${e.score.toFixed(2)}`,
+    tone: e.mode === 'recent' ? 'var(--ymir-warn)' : 'var(--ymir-cyan-1)',
+  }));
+
+  function onQuery(q: string) {
+    const hits = q.trim()
+      ? recall.filter((e) =>
+          [e.title, e.body, e.tags.join(' ')].join(' ').toLowerCase().includes(q.toLowerCase()),
+        )
+      : recall;
+    openModal({
+      variant: 'info',
+      tone: hits.length ? 'info' : 'warn',
+      glyph: 'ᛜ',
+      title: `Recall — ${q.trim() || 'the whole well'}`,
+      body: hits.length
+        ? `${hits.length} episode${hits.length === 1 ? '' : 's'} (hybrid) — drink before you act.`
+        : 'Dry well. Firing cold — never a blocker.',
+      content: hits.length
+        ? hits
+            .map((e) => `**${e.score.toFixed(2)}** · ${e.title}\n\n${e.body}`)
+            .join('\n\n---\n\n')
+        : undefined,
+      format: 'markdown',
+    });
+    toast({
+      kind: hits.length ? 'info' : 'warn',
+      title: hits.length ? 'Well recalled' : 'Dry well',
+      body: hits.length ? `${hits.length} episodes` : 'firing cold',
+    });
+  }
+
+  /** Read one memory whole — click an episode and the well opens it. */
+  async function onOpen(id: string) {
+    try {
+      const { episode } = await gateApi.wellEpisode(id);
+      const when = episode.timestamp ? new Date(episode.timestamp).toLocaleString('en-GB', { hour12: false }) : '';
+      openModal({
+        variant: 'info',
+        tone: 'info',
+        glyph: 'ᛜ',
+        title: episode.tags[0] ? `#${episode.tags[0]}` : 'Memory',
+        body: `${when}${episode.actors?.length ? ` · ${episode.actors.join(', ')}` : ''}`,
+        content: episode.content,
+        format: 'markdown',
+      });
+    } catch {
+      toast({ kind: 'warn', title: 'Recall failed', body: 'The well did not answer.' });
+    }
+  }
+
+  return (
+    <>
+      <div className="stage-head">
+        <div>
+          <h1 className="stage-title">The Well</h1>
+          <p className="stage-deck">
+            Mimirsbrunn · engram bridge 127.0.0.1:4602 · drink before you act, water it after
+          </p>
+        </div>
+      </div>
+
+      <div className="metric-grid" style={{ marginBottom: 'var(--ymir-space-4)' }}>
+        <MetricTile label="Episodes observed" value={mimir?.episodes ?? recall.length} delta="in the engram" />
+        <MetricTile label="Recall modes" value="3" delta="hybrid · cosine · spreading" />
+        <MetricTile label="Well state" value={recall.length ? 'WARM' : 'COLD'} tone={recall.length ? 'var(--ymir-ok)' : 'var(--ymir-warn)'} delta="boost, never blocker" />
+        <MetricTile
+          label="Bridge"
+          value={mimir?.status === 'up' ? 'LIVE' : 'DOWN'}
+          tone={mimir?.status === 'up' ? 'var(--ymir-ok)' : 'var(--ymir-danger)'}
+          delta={mimir?.store ? mimir.store.split('/').slice(-1)[0] : ':4602 · engram'}
+        />
+      </div>
+
+      <div className="gate-grid" style={{ gridTemplateColumns: 'minmax(0, 1fr) 360px' }}>
+        <RecallPanel episodes={recall} onQuery={onQuery} onOpen={onOpen} />
+
+        <section className="panel">
+          <div className="panel-head">
+            <div className="panel-title">
+              <span className="glyph" aria-hidden="true">ᛜ</span>
+              Timeline
+            </div>
+          </div>
+          <div className="panel-body col" style={{ gap: 'var(--ymir-space-3)' }}>
+            {timeline.length === 0 ? (
+              <div className="muted" style={{ fontSize: 12 }}>No episodes yet — water the well.</div>
+            ) : (
+              timeline.map((t, i) => (
+                <div className="row" key={`${t.ts}-${i}`} style={{ alignItems: 'flex-start' }}>
+                  <span className="mono dim" style={{ fontSize: 11, width: 44 }}>
+                    {t.ts}
+                  </span>
+                  <span
+                    aria-hidden="true"
+                    style={{
+                      width: 8,
+                      height: 8,
+                      borderRadius: 4,
+                      marginTop: 6,
+                      background: t.tone,
+                      boxShadow: `0 0 8px ${t.tone}`,
+                      flexShrink: 0,
+                    }}
+                  />
+                  <div className="col">
+                    <span style={{ fontSize: 13 }}>{t.label}</span>
+                    <span className="mono dim" style={{ fontSize: 11 }}>
+                      {t.detail}
+                    </span>
+                  </div>
+                </div>
+              ))
+            )}
+
+            <div className="eyebrow" style={{ marginTop: 'var(--ymir-space-3)' }}>
+              Entity graph
+            </div>
+            <div className="row" style={{ flexWrap: 'wrap', gap: 6 }}>
+              <RuneTag label="hlidskjalf" glyph="ᛉ" color="var(--ymir-cyan-1)" />
+              <RuneTag label="mimirsbrunn" glyph="ᛜ" color="var(--ymir-violet-1)" />
+              <RuneTag label="ratatoskr" glyph="ᛒ" color="var(--ymir-violet-1)" />
+              <RuneTag label="utgard" glyph="ᚢ" color="var(--ymir-danger)" />
+              <RuneTag label="yggdrasil" glyph="ᛃ" color="var(--ymir-ok)" />
+            </div>
+          </div>
+        </section>
+      </div>
+    </>
+  );
+}

package/apps/hlidskjalf/src/gates/Worktrees.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { desktopHeaders } from '../services/api';
+
+type WT = { id: string; branch: string; path: string; head: string; agent: string };
+
+export function Worktrees() {
+  const [rows, setRows] = useState<WT[]>([]);
+  const [err, setErr] = useState('');
+
+  useEffect(() => {
+    let live = true;
+    fetch('/api/worktrees', { credentials: 'include', headers: desktopHeaders() })
+      .then((r) => r.json())
+      .then((d) => { if (live) setRows(Array.isArray(d) ? d : []); })
+      .catch((e) => { if (live) setErr(String(e)); });
+    return () => { live = false; };
+  }, []);
+
+  return (
+    <div style={{ padding: 20 }}>
+      <h2 style={{ margin: '0 0 12px' }}>Worktrees</h2>
+      {err && <p style={{ color: 'crimson' }}>{err}</p>}
+      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
+        <thead>
+          <tr>
+            {['id', 'branch', 'agent', 'head', 'path'].map((h) => (
+              <th key={h} style={{ textAlign: 'left', borderBottom: '1px solid #333', padding: 6 }}>{h}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((w) => (
+            <tr key={w.path}>
+              <td style={{ padding: 6 }}>{w.id}</td>
+              <td style={{ padding: 6 }}>{w.branch}</td>
+              <td style={{ padding: 6 }}>{w.agent}</td>
+              <td style={{ padding: 6, fontFamily: 'monospace' }}>{w.head}</td>
+              <td style={{ padding: 6, fontFamily: 'monospace', fontSize: 12, opacity: 0.8 }}>{w.path}</td>
+            </tr>
+          ))}
+          {rows.length === 0 && (
+            <tr><td colSpan={5} style={{ padding: 6, opacity: 0.6 }}>no worktrees</td></tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/apps/hlidskjalf/src/hooks/useTenantDef.ts

@@ -0,0 +1,13 @@
+import { useYmir } from '../state/store';
+import { realmDef } from '../data/realms';
+import type { RealmDef, TenantGrant } from '../types';
+
+/**
+ * Resolve a realm definition, honouring the operator's per-tenant colour
+ * override. The realm tint is structural — but the user may repaint their seat.
+ */
+export function useTenantDef(realm: string, grant?: TenantGrant | null): RealmDef {
+  const override = useYmir((s) => s.tenantColors[realm]);
+  const def = realmDef(realm, grant ?? undefined);
+  return override ? { ...def, tint: override, tint2: override } : def;
+}

package/apps/hlidskjalf/src/main.tsx

@@ -0,0 +1,31 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+// Canonical design tokens — single source of truth (design.md §8).
+import '../../../midgard/design-system/tokens.css';
+import './styles/global.css';
+import './styles/shell.css';
+import './styles/components.css';
+import './styles/auth.css';
+import './styles/menus.css';
+import './styles/overlays.css';
+import './styles/forge.css';
+import './styles/mobile.css';
+
+import App from './app/App';
+
+const el = document.getElementById('root');
+if (!el) throw new Error('Hlidskjalf: #root not found');
+
+createRoot(el).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
+
+// PWA: register the app-shell service worker (production only).
+if ('serviceWorker' in navigator && import.meta.env.PROD) {
+  window.addEventListener('load', () => {
+    void navigator.serviceWorker.register('/sw.js').catch(() => {});
+  });
+}