@zerwiz/ymir 0.1.34 → 0.1.35

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

@@ -0,0 +1,217 @@
+import { useEffect, useState } from 'react';
+import { useYmir } from '../state/store';
+import { ModelPicker } from '../components/ModelPicker';
+
+export function OmniChat() {
+  const chat = useYmir((s) => s.chat);
+  const sendChat = useYmir((s) => s.sendChat);
+  const loadChat = useYmir((s) => s.loadChat);
+  const chatSessions = useYmir((s) => s.chatSessions);
+  const chatSession = useYmir((s) => s.chatSession);
+  const newChat = useYmir((s) => s.newChat);
+  const switchChat = useYmir((s) => s.switchChat);
+  const deleteChat = useYmir((s) => s.deleteChat);
+  const chatModels = useYmir((s) => s.chatModels);
+  const chatModel = useYmir((s) => s.chatModel);
+  const setChatModel = useYmir((s) => s.setChatModel);
+  const chatAgents = useYmir((s) => s.chatAgents);
+  const toggleChatAgent = useYmir((s) => s.toggleChatAgent);
+  const agents = useYmir((s) => s.agents);
+  const realm = useYmir((s) => s.realm);
+  const [draft, setDraft] = useState('');
+
+  useEffect(() => {
+    void loadChat();
+  }, [loadChat]);
+
+  function send() {
+    const body = draft.trim();
+    if (!body) return;
+    sendChat(body);
+    setDraft('');
+  }
+
+  return (
+    <>
+      <div className="stage-head">
+        <div>
+          <h1 className="stage-title">OmniChat</h1>
+          <p className="stage-deck">Speak with Kaia · she drinks from the well before every dispatch</p>
+        </div>
+      </div>
+
+      <div className="chat-layout">
+        <aside className="panel chat-side">
+          <div className="panel-head">
+            <div className="panel-title">
+              <span className="glyph" aria-hidden="true">ᛊ</span> Chats
+            </div>
+            <button className="btn btn-primary btn-sm" onClick={newChat} title="New chat">
+              + New
+            </button>
+          </div>
+          <div className="panel-body flush chat-side-list">
+            {chatSessions.length === 0 ? (
+              <div className="muted" style={{ padding: 12 }}>No chats yet.</div>
+            ) : (
+              chatSessions.map((s) => (
+                <div
+                  key={s.id}
+                  className={`chat-session ${s.id === chatSession ? 'active' : ''}`}
+                  onClick={() => switchChat(s.id)}
+                  role="button"
+                  tabIndex={0}
+                >
+                  <span className="mono">{s.id}</span>
+                  <span className="dim">{s.messages}</span>
+                  <button
+                    className="icon-btn"
+                    aria-label={`Delete ${s.id}`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      deleteChat(s.id);
+                    }}
+                  >
+                    ✕
+                  </button>
+                </div>
+              ))
+            )}
+          </div>
+        </aside>
+
+        <section className="panel" style={{ minHeight: 460 }}>
+          <div className="panel-head">
+            <div className="panel-title">
+              <span className="glyph" aria-hidden="true">ᚴ</span>
+              Kaia — oracle by the well
+            </div>
+            <span className="status status-ok">
+              <span className="dot" aria-hidden="true">ᛟ</span>NOMINAL
+            </span>
+          </div>
+
+          <div className="chat-scroll">
+            {chat.length === 0 ? (
+              <div className="empty">
+                <span className="glyph" aria-hidden="true">ᚴ</span>
+                <p>Ask Kaia anything. She recalls the well before she answers.</p>
+              </div>
+            ) : null}
+            {chat.map((m) => (
+              <div key={m.id} className={`bubble ${m.from}${m.error ? ' err' : ''}`}>
+                {m.thinking ? (
+                  <div className="thinking">
+                    <span className="dots" aria-hidden="true"><i /><i /><i /></span>
+                    {m.recalling ? 'drawing from the well…' : 'Kaia is thinking…'}
+                  </div>
+                ) : (
+                  <>
+                    <div>{m.body}</div>
+                    <div className="b-meta">
+                      <span>{new Date(m.ts).toLocaleTimeString('en-GB', { hour12: false })}</span>
+                      {m.model ? <span className="mono">{m.model}</span> : null}
+                      {m.recalling ? <span style={{ color: 'var(--ymir-cyan-1)' }}>◈ recalled the well</span> : null}
+                      {m.agents?.length ? <span className="dim">lanes: {m.agents.join(', ')}</span> : null}
+                    </div>
+                  </>
+                )}
+              </div>
+            ))}
+          </div>
+
+          <form
+            className="chat-compose"
+            onSubmit={(e) => {
+              e.preventDefault();
+              send();
+            }}
+          >
+            <input
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              placeholder={`Command the ${realm} realm…`}
+              aria-label="Message Kaia"
+            />
+            <button className="btn btn-primary" type="submit" disabled={!draft.trim()}>
+              <span aria-hidden="true">ᚴ</span> Send
+            </button>
+          </form>
+        </section>
+
+        <aside className="col" style={{ gap: 'var(--ymir-space-4)' }}>
+          <section className="panel">
+            <div className="panel-head">
+              <div className="panel-title">
+                <span className="glyph" aria-hidden="true">ᛜ</span> Model
+              </div>
+            </div>
+            <div className="panel-body col" style={{ gap: 10 }}>
+              <label className="field">
+                <span>Connected models · free-type any id</span>
+                <ModelPicker
+                  value={chatModel}
+                  onChange={setChatModel}
+                  models={chatModels}
+                  placeholder="default (auto-detect)"
+                />
+              </label>
+              <div className="row-between">
+                <span className="muted">realm</span>
+                <span className="mono">{realm}</span>
+              </div>
+              <div className="row-between">
+                <span className="muted">well</span>
+                <span className="mono" style={{ color: 'var(--ymir-ok)' }}>warm</span>
+              </div>
+            </div>
+          </section>
+
+          <section className="panel">
+            <div className="panel-head">
+              <div className="panel-title">
+                <span className="glyph" aria-hidden="true">ᛏ</span> Eindri lanes
+              </div>
+            </div>
+            <div className="panel-body col" style={{ gap: 6 }}>
+              <div className="dim" style={{ fontSize: 12 }}>
+                Focus Kaia on specific agents before she dispatches.
+              </div>
+              <div className="lane-toggles">
+                {agents.map((a) => (
+                  <button
+                    key={a.id}
+                    className={`chip ${chatAgents.includes(a.name) ? 'on' : ''}`}
+                    onClick={() => toggleChatAgent(a.name)}
+                  >
+                    {a.name}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          <section className="panel">
+            <div className="panel-head">
+              <div className="panel-title">
+                <span className="glyph" aria-hidden="true">ᛟ</span> Quick orders
+              </div>
+            </div>
+            <div className="panel-body col" style={{ gap: 6 }}>
+              {[
+                'Recall the well for this project',
+                'Dispatch Eindri-01 on the shell',
+                'Summarise the runes today',
+                'Spawn a Hermes worker (Utgard)',
+              ].map((p) => (
+                <button key={p} className="btn" style={{ justifyContent: 'flex-start' }} onClick={() => setDraft(p)}>
+                  <span aria-hidden="true">ᛟ</span> {p}
+                </button>
+              ))}
+            </div>
+          </section>
+        </aside>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,162 @@
+import { useYmir } from '../state/store';
+import { useUI } from '../state/ui';
+import { StatusChip } from '../components/Status';
+import { MetricTile } from '../components/MetricTile';
+import type { ProcessInfo } from '../types';
+
+function up(sec: number) {
+  if (sec <= 0) return '—';
+  const d = Math.floor(sec / 86400);
+  const h = Math.floor((sec % 86400) / 3600);
+  const m = Math.floor((sec % 3600) / 60);
+  if (d) return `${d}d ${h}h`;
+  if (h) return `${h}h ${m}m`;
+  return `${m}m`;
+}
+
+export function Processes() {
+  const processes = useYmir((s) => s.processes);
+  const updateProcess = useYmir((s) => s.updateProcess);
+  const { openModal, toast } = useUI();
+  const nominal = processes.filter((p) => p.status === 'nominal').length;
+
+  function restart(p: ProcessInfo) {
+    openModal({
+      variant: 'confirm',
+      tone: 'warn',
+      glyph: 'ᛞ',
+      title: `Restart ${p.name}?`,
+      body: `${p.daemon} · ${p.manager}. Valhalla brings the daemon back and counts the restart.`,
+      confirmLabel: 'Restart',
+      onSubmit: () => {
+        updateProcess(p.id, {
+          status: 'nominal',
+          restarts: p.restarts + 1,
+          uptime: 0,
+          cpu: 0.4,
+          mem: Math.max(24, p.mem),
+        });
+        toast({ kind: 'ok', title: `${p.name} restarted`, body: 'Valhalla watch restored.' });
+      },
+    });
+  }
+
+  function logs(p: ProcessInfo) {
+    openModal({
+      variant: 'info',
+      tone: p.status === 'down' ? 'danger' : 'info',
+      glyph: 'ᛞ',
+      title: `Logs — ${p.name}`,
+      content: [
+        `[valhalla] supervising ${p.name} via ${p.manager}`,
+        `[health] status=${p.status} cpu=${p.cpu}% mem=${p.mem}MB restarts=${p.restarts}`,
+        `[trace] uptime=${up(p.uptime)}`,
+        p.status === 'down'
+          ? '[error] process exited (signal SIGKILL) — bring-back scheduled'
+          : '[info] heartbeat nominal',
+        '[info] observed into Mimirsbrunn · rune carved',
+      ].join('\n'),
+    });
+  }
+
+  function reloadAll() {
+    openModal({
+      variant: 'confirm',
+      tone: 'warn',
+      glyph: 'ᛞ',
+      title: 'Reload all daemons?',
+      body: 'Valhalla will reload every supervised process. The forge stays hot — no work is lost.',
+      confirmLabel: 'Reload all',
+      onSubmit: () => {
+        processes.forEach((p) =>
+          updateProcess(p.id, { status: 'nominal', restarts: p.restarts + 1, uptime: 0 }),
+        );
+        toast({ kind: 'ok', title: 'Fleet reloaded', body: 'All daemons nominal.' });
+      },
+    });
+  }
+
+  return (
+    <>
+      <div className="stage-head">
+        <div>
+          <h1 className="stage-title">Valhalla</h1>
+          <p className="stage-deck">
+            Process supervision · PM2 · Docker · systemd · dead processes brought back
+          </p>
+        </div>
+        <button className="btn" onClick={reloadAll}>
+          <span aria-hidden="true">ᛞ</span> Reload all
+        </button>
+      </div>
+
+      <div className="metric-grid" style={{ marginBottom: 'var(--ymir-space-4)' }}>
+        <MetricTile label="Healthy" value={`${nominal}/${processes.length}`} tone="var(--ymir-ok)" delta="watched" />
+        <MetricTile label="CPU" value={`${processes.reduce((a, p) => a + p.cpu, 0).toFixed(1)}%`} delta="across fleet" />
+        <MetricTile label="Memory" value={`${processes.reduce((a, p) => a + p.mem, 0)} MB`} delta="resident" />
+        <MetricTile label="Restarts" value={processes.reduce((a, p) => a + p.restarts, 0)} tone="var(--ymir-warn)" delta="bring-back events" />
+      </div>
+
+      <section className="panel">
+        <div className="panel-head">
+          <div className="panel-title">
+            <span className="glyph" aria-hidden="true">ᛞ</span>
+            Daemons
+          </div>
+        </div>
+        <div className="panel-body flush">
+          <table className="data-table">
+            <thead>
+              <tr>
+                <th>Process</th>
+                <th>Role</th>
+                <th>Manager</th>
+                <th>Status</th>
+                <th>CPU</th>
+                <th>Mem</th>
+                <th>Restarts</th>
+                <th>Uptime</th>
+                <th />
+              </tr>
+            </thead>
+            <tbody>
+              {/* The gate can hand back the same id twice (systemd:dbus appears
+                  from two sources), and a duplicate React key duplicates or drops
+                  rows. Dedupe by id here; a repeated process is one process. */}
+              {processes
+                .filter((p, i, all) => all.findIndex((q) => q.id === p.id) === i)
+                .map((p) => (
+                <tr key={p.id}>
+                  <td className="mono" style={{ color: 'var(--ymir-text-0)' }}>
+                    {p.name}
+                  </td>
+                  <td className="muted">{p.daemon}</td>
+                  <td className="mono">{p.manager}</td>
+                  <td>
+                    <StatusChip status={p.status} />
+                  </td>
+                  <td className="num">{p.cpu.toFixed(1)}%</td>
+                  <td className="num">{p.mem} MB</td>
+                  <td className="num" style={{ color: p.restarts ? 'var(--ymir-warn)' : undefined }}>
+                    {p.restarts}
+                  </td>
+                  <td className="num">{up(p.uptime)}</td>
+                  <td>
+                    <div className="row">
+                      <button className="btn" style={{ padding: '4px 10px' }} onClick={() => restart(p)}>
+                        Restart
+                      </button>
+                      <button className="btn" style={{ padding: '4px 10px' }} onClick={() => logs(p)}>
+                        Logs
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </>
+  );
+}

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

@@ -0,0 +1,225 @@
+import { useState } from 'react';
+import { useYmir } from '../state/store';
+import { useUI } from '../state/ui';
+import { ACCENTS, DOMAINS, realmById } from '../data/realms';
+import { ROLE_LABEL } from '../services/auth';
+import { useTenantDef } from '../hooks/useTenantDef';
+import type { DomainId } from '../types';
+
+const DOMAINS_LIST = Object.keys(DOMAINS) as DomainId[];
+
+function TenantColorRow({ realm, tenant, role, domain, glyph }: {
+  realm: string;
+  tenant: string;
+  role: keyof typeof ROLE_LABEL;
+  domain: DomainId;
+  glyph: string;
+}) {
+  const colors = useYmir((s) => s.tenantColors);
+  const setTenantColor = useYmir((s) => s.setTenantColor);
+  const resetTenantColor = useYmir((s) => s.resetTenantColor);
+  const def = useTenantDef(realm, { realm, tenant, role, domain, tint: realmById(realm).tint, glyph });
+  const override = colors[realm];
+  const houseDef = DOMAINS[domain];
+
+  return (
+    <div className="tenant-row">
+      <span className="realm-swatch" style={{ background: def.tint }} />
+      <div className="col grow" style={{ minWidth: 0 }}>
+        <span className="row" style={{ gap: 8 }}>
+          <strong>{tenant}</strong>
+          <span className="mono dim" style={{ fontSize: 10, textTransform: 'uppercase' }}>
+            {ROLE_LABEL[role]}
+          </span>
+        </span>
+        <span className="mono dim" style={{ fontSize: 11 }}>
+          {houseDef.name} · seal {houseDef.glyph}
+        </span>
+      </div>
+      <input
+        type="color"
+        value={override ?? def.tint}
+        onChange={(e) => setTenantColor(realm, e.target.value)}
+        aria-label={`${tenant} colour`}
+      />
+      <button className="btn btn-sm" onClick={() => resetTenantColor(realm)} disabled={!override}>
+        Reset
+      </button>
+    </div>
+  );
+}
+
+export function Profile() {
+  const session = useYmir((s) => s.session);
+  const accentId = useYmir((s) => s.accentId);
+  const custom = useYmir((s) => s.customAccent);
+  const setAccent = useYmir((s) => s.setAccent);
+  const setCustom = useYmir((s) => s.setCustomAccent);
+  const density = useYmir((s) => s.density);
+  const setDensity = useYmir((s) => s.setDensity);
+  const companyName = useYmir((s) => s.companyName);
+  const companyHouse = useYmir((s) => s.companyHouse);
+  const setCompanyName = useYmir((s) => s.setCompanyName);
+  const setCompanyHouse = useYmir((s) => s.setCompanyHouse);
+  const { toast } = useUI();
+  const [draftName, setDraftName] = useState(companyName);
+
+  if (!session) return null;
+
+  return (
+    <>
+      <div className="stage-head">
+        <div>
+          <h1 className="stage-title">Profile</h1>
+          <p className="stage-deck">Personal settings · tenant colours · company settings</p>
+        </div>
+      </div>
+
+      <div className="gate-grid cols-2">
+        <section className="panel">
+          <div className="panel-head">
+            <div className="panel-title">
+              <span className="glyph" aria-hidden="true">ᛝ</span> Personal
+            </div>
+          </div>
+          <div className="panel-body col" style={{ gap: 'var(--ymir-space-4)' }}>
+            <div className="row" style={{ gap: 'var(--ymir-space-3)' }}>
+              <span className="avatar" aria-hidden="true">{session.user.avatar}</span>
+              <div className="col" style={{ lineHeight: 1.3 }}>
+                <strong>{session.user.name}</strong>
+                <span className="mono dim" style={{ fontSize: 11 }}>{session.user.email}</span>
+                <span className="mono dim" style={{ fontSize: 11 }}>@{session.user.login} · via {session.method}</span>
+              </div>
+            </div>
+
+            <div className="field">
+              <span className="eyebrow">Accent — paint your own seat</span>
+              <div className="swatch-grid" style={{ padding: 0 }}>
+                {ACCENTS.map((a) => (
+                  <button
+                    key={a.id}
+                    className="swatch"
+                    aria-pressed={accentId === a.id}
+                    title={a.name}
+                    onClick={() => setAccent(a.id)}
+                    style={a.tint ? { background: a.tint } : { background: 'linear-gradient(135deg,#c9973f,#96a0a8,#7c3a30)' }}
+                  >
+                    {a.id === 'realm' ? <span className="swatch-realm" aria-hidden="true">ᛉ</span> : null}
+                    {accentId === a.id ? <span className="swatch-check" aria-hidden="true">✓</span> : null}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <label className="field">
+              <span className="eyebrow">Custom accent</span>
+              <div className="row">
+                <input
+                  type="color"
+                  value={custom ?? 'var(--ymir-cyan-1)'}
+                  onChange={(e) => setCustom(e.target.value)}
+                  style={{ width: 44, height: 34, border: '1px solid var(--ymir-steel-1)', borderRadius: 8, background: 'none' }}
+                />
+                <span className="mono dim">{accentId === 'custom' ? custom : 'pick a hex'}</span>
+              </div>
+            </label>
+
+            <div className="field">
+              <span className="eyebrow">Density</span>
+              <div className="row">
+                <button className="btn" aria-pressed={density === 'comfortable'} onClick={() => setDensity('comfortable')}>Comfortable</button>
+                <button className="btn" aria-pressed={density === 'compact'} onClick={() => setDensity('compact')}>Compact</button>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="panel">
+          <div className="panel-head">
+            <div className="panel-title">
+              <span className="glyph" aria-hidden="true">ᛊ</span> Workspace colours
+            </div>
+            <span className="mono dim" style={{ fontSize: 10 }}>one tenant · many scopes</span>
+          </div>
+          <div className="panel-body col" style={{ gap: 'var(--ymir-space-3)' }}>
+            {session.tenants.map((t) => (
+              <TenantColorRow
+                key={t.realm}
+                realm={t.realm}
+                tenant={t.tenant}
+                role={t.role}
+                domain={t.domain}
+                glyph={t.glyph}
+              />
+            ))}
+            <p className="mono dim" style={{ fontSize: 11 }}>
+              Each workspace swatch repaints that workspace's tint. Set accent to “Realm default” to follow it.
+            </p>
+          </div>
+        </section>
+
+        <section className="panel span-2">
+          <div className="panel-head">
+            <div className="panel-title">
+              <span className="glyph" aria-hidden="true">ᛒ</span> Company
+            </div>
+          </div>
+          <div className="panel-body col" style={{ gap: 'var(--ymir-space-4)' }}>
+            <div className="form-grid">
+              <label className="field">
+                <span className="eyebrow">Company name</span>
+                <input
+                  value={draftName}
+                  onChange={(e) => setDraftName(e.target.value)}
+                  placeholder="WayOf"
+                />
+              </label>
+              <label className="field">
+                <span className="eyebrow">House seal</span>
+                <select value={companyHouse} onChange={(e) => setCompanyHouse(e.target.value as DomainId)}>
+                  {DOMAINS_LIST.map((h) => (
+                    <option key={h} value={h}>{DOMAINS[h].name}</option>
+                  ))}
+                </select>
+              </label>
+            </div>
+
+            <div className="eyebrow">Workspaces</div>
+            <div className="col" style={{ gap: 6 }}>
+              {session.tenants.map((t) => (
+                <div className="tenant-row" key={t.realm}>
+                  <span className="realm-swatch" style={{ background: tenantColorOf(t.realm, t.tint) }} />
+                  <span className="grow">
+                    @{session.user.login}
+                    <span className="mono dim" style={{ marginLeft: 8, fontSize: 11 }}>{t.tenant}</span>
+                  </span>
+                  <span className="mono dim" style={{ fontSize: 10, textTransform: 'uppercase' }}>
+                    {ROLE_LABEL[t.role]}
+                  </span>
+                </div>
+              ))}
+            </div>
+
+            <div className="row">
+              <button
+                className="btn btn-primary"
+                onClick={() => {
+                  setCompanyName(draftName.trim() || 'WayOf');
+                  toast({ kind: 'ok', title: 'Company saved', body: `${draftName} · ${DOMAINS[companyHouse].name}` });
+                }}
+              >
+                <span aria-hidden="true">ᛉ</span> Save company
+              </button>
+              <button className="btn" onClick={() => setDraftName(companyName)}>Reset</button>
+            </div>
+          </div>
+        </section>
+      </div>
+    </>
+  );
+}
+
+// reading tenant colors outside the render hook graph (safe: not a hook)
+function tenantColorOf(realm: string, fallback: string): string {
+  return useYmir.getState().tenantColors[realm] ?? fallback;
+}

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

@@ -0,0 +1,33 @@
+import { useYmir } from '../state/store';
+import { PRCard } from '../components/PRCard';
+import { MetricTile } from '../components/MetricTile';
+
+export function Reviews() {
+  const reviews = useYmir((s) => s.reviews);
+
+  return (
+    <>
+      <div className="stage-head">
+        <div>
+          <h1 className="stage-title">Glitnir — Reviews</h1>
+          <p className="stage-deck">
+            Human in the loop · Mjollnir never force-merges · a rune seals every approval
+          </p>
+        </div>
+      </div>
+
+      <div className="metric-grid" style={{ marginBottom: 'var(--ymir-space-4)' }}>
+        <MetricTile label="Open PRs" value={reviews.length} delta="awaiting the Allfather" />
+        <MetricTile label="Approved" value={reviews.filter((r) => r.state === 'approved').length} tone="var(--ymir-ok)" delta="ready to merge" />
+        <MetricTile label="Changes requested" value={reviews.filter((r) => r.state === 'changes').length} tone="var(--ymir-warn)" delta="blocked" />
+        <MetricTile label="CI failing" value={reviews.filter((r) => r.checks.some((c) => c.state === 'down')).length} tone="var(--ymir-danger)" delta="do not seal" />
+      </div>
+
+      <div className="gate-grid cols-2">
+        {reviews.map((pr) => (
+          <PRCard key={pr.id} pr={pr} />
+        ))}
+      </div>
+    </>
+  );
+}