@zerwiz/ymir 0.1.34 → 0.1.35

package/apps/hlidskjalf/src/app/App.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useState } from 'react';
+import { Shell } from './Shell';
+import { Overlay } from '../components/Overlay';
+import { LoginModal } from '../components/LoginModal';
+import { EmberBackground } from '../components/EmberBackground';
+import { HallsChooser } from '../components/Halls';
+import { gateApi, isDesktopSeat } from '../services/api';
+import { startStream } from '../services/stream';
+import { gateFromHash, useYmir } from '../state/store';
+
+export default function App() {
+  const session = useYmir((s) => s.session);
+  const [authed, setAuthed] = useState<boolean | null>(null);
+  // After the gate admits us, offer the three halls once per login.
+  // A desktop shell is a SEAT, not a lobby: it does not ask which hall you
+  // want, it opens the one you are in. The picker belongs to the web door.
+  const [choosing, setChoosing] = useState(!isDesktopSeat());
+
+  /**
+   * One question at boot: has the gate let this browser in?
+   *
+   * There is exactly one login — the gate's own (`LoginModal`). An earlier build
+   * fell through to a second, mock identity picker when the store had no session
+   * yet, which meant signing in correctly could land you on a screen offering
+   * somebody else's name. The gate's answer now names the operator, and the UI
+   * session is built from it.
+   */
+  useEffect(() => {
+    void gateApi
+      .session()
+      .then((r) => {
+        setAuthed(r.authed);
+        if (r.authed && r.login) useYmir.getState().establishSession(r.login);
+      })
+      .catch(() => setAuthed(true));
+  }, []);
+
+  // A 401 anywhere re-locks the gate.
+  useEffect(() => {
+    const lock = () => setAuthed(false);
+    window.addEventListener('ymir:unauthorized', lock);
+    return () => window.removeEventListener('ymir:unauthorized', lock);
+  }, []);
+
+  useEffect(() => {
+    if (!session) return;
+    return startStream();
+  }, [session]);
+
+  // Smíðja runs land in smidja.db at any time; poll so the Sessions/Trace/Stats
+  // gates pick up a newly-written run without a page reload.
+  useEffect(() => {
+    if (!session) return;
+    const id = window.setInterval(() => { void useYmir.getState().refreshSmidja(); void useYmir.getState().refreshAgents(); }, 5000);
+    return () => window.clearInterval(id);
+  }, [session]);
+
+  useEffect(() => {
+    const onHash = () => useYmir.getState().setGate(gateFromHash());
+    window.addEventListener('hashchange', onHash);
+    return () => window.removeEventListener('hashchange', onHash);
+  }, []);
+
+  /** After the gate admits us, take its word for who we are. */
+  /**
+   * One login for every app: an app host sends its visitors here with ?next=,
+   * so after the gate admits us we hand them back where they were going.
+   */
+  const returnToNext = () => {
+    const next = new URLSearchParams(window.location.search).get('next');
+    if (!next) return;
+    try {
+      const t = new URL(next);
+      if (t.origin !== window.location.origin) window.location.replace(t.toString());
+    } catch {
+      /* a malformed next is ignored, never followed */
+    }
+  };
+
+  const admitted = () => {
+    setAuthed(true);
+    returnToNext();
+    void gateApi
+      .session()
+      .then((r) => {
+        if (r.login) useYmir.getState().establishSession(r.login);
+      })
+      .catch(() => setAuthed(false));
+  };
+
+  // Hold until we know (no unauthenticated flash of the app).
+  if (authed === null) return null;
+
+  if (!authed) {
+    return (
+      <>
+        <EmberBackground />
+        <LoginModal onAuthed={admitted} />
+        <Overlay />
+      </>
+    );
+  }
+
+  // Auth in flight: the gate admitted us a moment ago and the session is
+  // being established. Hold rather than flash the login again.
+  if (!session) return null;
+
+  return (
+    <>
+      <EmberBackground />
+      <Shell />
+      <Overlay />
+      {choosing && <HallsChooser onClose={() => setChoosing(false)} />}
+    </>
+  );
+}

package/apps/hlidskjalf/src/app/BottomStream.tsx

@@ -0,0 +1,128 @@
+import {
+  useState,
+  type PointerEvent as ReactPointerEvent,
+  type KeyboardEvent as ReactKeyboardEvent,
+} from 'react';
+import { useYmir } from '../state/store';
+import type { StreamEvent } from '../types';
+
+function fmt(ts: string) {
+  const d = new Date(ts);
+  return (
+    d.toLocaleTimeString('en-GB', { hour12: false }) +
+    '.' +
+    String(d.getMilliseconds()).padStart(3, '0')
+  );
+}
+
+export function BottomStream() {
+  const streams = useYmir((s) => s.streams);
+  const gate = useYmir((s) => s.gate);
+  const paused = useYmir((s) => s.streamPaused);
+  const toggle = useYmir((s) => s.toggleStream);
+  const streamHeight = useYmir((s) => s.streamHeight);
+  const setStreamHeight = useYmir((s) => s.setStreamHeight);
+  const [filter, setFilter] = useState<'all' | StreamEvent['kind']>('all');
+
+  // Each page keeps its own rolling 40; fall back to the fleet-wide feed.
+  const page = streams?.[gate]?.length ? streams[gate] : streams?.all ?? [];
+  const shown = (filter === 'all' ? page : page.filter((e) => e.kind === filter)).slice(0, 40);
+
+  function beginResize(e: ReactPointerEvent<HTMLDivElement>) {
+    e.preventDefault();
+    const startY = e.clientY;
+    const startH = streamHeight;
+    const move = (ev: PointerEvent) => setStreamHeight(startH + (startY - ev.clientY));
+    const end = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', end);
+      document.body.style.cursor = '';
+    };
+    document.body.style.cursor = 'ns-resize';
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', end);
+  }
+
+  function resizeKey(e: ReactKeyboardEvent<HTMLDivElement>) {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setStreamHeight(streamHeight + 24);
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setStreamHeight(streamHeight - 24);
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      setStreamHeight(192);
+    }
+  }
+
+  return (
+    <footer className="stream" aria-label="Ratatoskr and Runes stream">
+      <div
+        className="stream-resizer"
+        role="separator"
+        aria-orientation="horizontal"
+        aria-label="Resize stream — drag up or down"
+        aria-valuenow={streamHeight}
+        tabIndex={0}
+        onPointerDown={beginResize}
+        onKeyDown={resizeKey}
+        onDoubleClick={() => setStreamHeight(192)}
+        title="Drag to resize · double-click to reset"
+      >
+        <span className="grip" aria-hidden="true" />
+      </div>
+
+      <div className="stream-head">
+        <span className={`live-dot ${paused ? 'paused' : ''}`} aria-hidden="true" />
+        <span className="stream-title">The Stream</span>
+        <span className="mono dim" style={{ fontSize: 10 }}>
+          {gate} · last 40
+        </span>
+
+        <div className="stream-tabs" role="group" aria-label="Stream filter">
+          {(['all', 'ratatoskr', 'rune'] as const).map((f) => (
+            <button
+              key={f}
+              className="stream-tab"
+              aria-pressed={filter === f}
+              onClick={() => setFilter(f)}
+            >
+              {f === 'rune' ? 'runes' : f}
+            </button>
+          ))}
+        </div>
+
+        <div className="grow" />
+
+        <button className="btn btn-sm" onClick={toggle} aria-pressed={paused}>
+          <span className="glyph" aria-hidden="true">{paused ? '▶' : '❚❚'}</span>
+          {paused ? 'Resume' : 'Pause'}
+        </button>
+      </div>
+
+      <div className="stream-body" role="log" aria-live="polite">
+        {shown.length === 0 ? (
+          <div className="mono dim" style={{ fontSize: 11, padding: 8 }}>
+            — no live events —
+          </div>
+        ) : null}
+        {shown.map((e) => (
+          <div className="stream-line" key={e.id}>
+            <span className="ts">{fmt(e.ts)}</span>
+            <span className="actor">
+              {e.from}
+              {e.to ? <span className="to"> → {e.to}</span> : null}
+            </span>
+            <span className="msg" title={e.message}>
+              {e.message}
+            </span>
+            <span className={`kind ${e.kind}`}>
+              {e.kind === 'rune' ? `◆ ${e.module ?? 'runes'}` : `⇄ ${e.state ?? 'A2A'}`}
+            </span>
+          </div>
+        ))}
+      </div>
+    </footer>
+  );
+}

package/apps/hlidskjalf/src/app/MobileNav.tsx

@@ -0,0 +1,87 @@
+import { useRef, useState } from 'react';
+import { GATES } from '../data/realms';
+import { useYmir } from '../state/store';
+
+const PRIMARY = ['fleet', 'tasks', 'well', 'chat'];
+
+/** The phone's gate navigation: a bottom tab bar + a "More" sheet. */
+export function MobileNav() {
+  const gate = useYmir((s) => s.gate);
+  const setGate = useYmir((s) => s.setGate);
+  const [more, setMore] = useState(false);
+  const [dragY, setDragY] = useState(0);
+  const startY = useRef<number | null>(null);
+
+  function gripDown(e: React.PointerEvent) {
+    e.preventDefault();
+    startY.current = e.clientY;
+    const move = (ev: PointerEvent) => {
+      if (startY.current == null) return;
+      setDragY(Math.max(0, ev.clientY - startY.current));
+    };
+    const end = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', end);
+      startY.current = null;
+      setDragY((y) => {
+        if (y > 80) setMore(false);
+        return 0;
+      });
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', end);
+  }
+
+  const primaries = PRIMARY.map((id) => GATES.find((g) => g.id === id)).filter(Boolean) as typeof GATES;
+  const rest = GATES.filter((g) => !PRIMARY.includes(g.id));
+
+  return (
+    <>
+      <nav className="m-nav" aria-label="Gates">
+        {primaries.map((g) => (
+          <button
+            key={g.id}
+            className={`m-tab ${gate === g.id ? 'on' : ''}`}
+            onClick={() => setGate(g.id)}
+            aria-current={gate === g.id ? 'page' : undefined}
+          >
+            <span className="m-glyph" aria-hidden="true">{g.glyph}</span>
+            <span>{g.label}</span>
+          </button>
+        ))}
+        <button className={`m-tab ${more ? 'on' : ''}`} onClick={() => setMore(true)} aria-haspopup="dialog">
+          <span className="m-glyph" aria-hidden="true">ᛜ</span>
+          <span>More</span>
+        </button>
+      </nav>
+
+      {more ? (
+        <div className="m-sheet" role="dialog" aria-modal="true" aria-label="All gates" onClick={() => setMore(false)}>
+          <div
+            className="m-sheet-inner"
+            onClick={(e) => e.stopPropagation()}
+            style={{ transform: `translateY(${dragY}px)`, transition: dragY ? "none" : "transform .18s ease" }}
+          >
+            <div className="m-sheet-grip" onPointerDown={gripDown} role="separator" aria-label="Swipe down to close" />
+            <div className="m-sheet-head">All gates</div>
+            <div className="m-grid">
+              {rest.map((g) => (
+                <button
+                  key={g.id}
+                  className={`m-cell ${gate === g.id ? 'on' : ''}`}
+                  onClick={() => {
+                    setGate(g.id);
+                    setMore(false);
+                  }}
+                >
+                  <span className="m-glyph" aria-hidden="true">{g.glyph}</span>
+                  <span>{g.label}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+}

package/apps/hlidskjalf/src/app/Rail.tsx

@@ -0,0 +1,106 @@
+import { useYmir } from '../state/store';
+import { GATES, TERMINAL_STATES } from '../data/realms';
+import { ROLE_LABEL } from '../services/auth';
+import { StatusChip } from '../components/Status';
+import type { GateId } from '../types';
+
+function gateCount(id: GateId, s: ReturnType<typeof useYmir.getState>): number | undefined {
+  switch (id) {
+    case 'fleet':
+      return s.agents.length;
+    case 'tasks':
+      return (Array.isArray(s.tasks) ? s.tasks : []).filter((t) => !TERMINAL_STATES.includes(t.state)).length;
+    case 'well':
+      return s.recall.length;
+    case 'runes':
+      return s.runes.length;
+    case 'reviews':
+      return s.reviews.length;
+    case 'processes':
+      return s.processes.length;
+    case 'files':
+      return 0;
+    case 'chat':
+      return s.chat.length;
+    case 'forge':
+      return s.agents.length + s.skills.length;
+    default:
+      return undefined;
+  }
+}
+
+export function Rail() {
+  const state = useYmir();
+  const setGate = useYmir((s) => s.setGate);
+  const setRealm = useYmir((s) => s.setRealm);
+  const tenantColors = useYmir((s) => s.tenantColors);
+  const tenants = state.session?.tenants ?? [];
+
+  return (
+    <aside className="rail" aria-label="Hlidskjalf navigation">
+      <div className="brand">
+        <img src="/ymir-mark.svg" alt="" className="brand-mark" width={34} height={34} />
+        <div className="wordmark">
+          <span className="wordmark-name">YMIR</span>
+          <span className="wordmark-sub">Hlidskjalf</span>
+        </div>
+      </div>
+
+      <nav className="nav" aria-label="Gates">
+        {GATES.map((g) => {
+          const count = gateCount(g.id, state);
+          return (
+            <button
+              key={g.id}
+              className="gate"
+              aria-current={state.gate === g.id}
+              onClick={() => setGate(g.id)}
+              title={g.hint}
+            >
+              <span className="gate-glyph" aria-hidden="true">
+                {g.glyph}
+              </span>
+              <span className="gate-label">{g.label}</span>
+              {count ? <span className="gate-count">{count}</span> : null}
+            </button>
+          );
+        })}
+      </nav>
+
+      <div className="rail-foot">
+        <div className="realm-switch" role="group" aria-label="Tenant">
+          <span className="eyebrow" style={{ paddingLeft: 8 }}>
+            Tenants · {tenants.length}
+          </span>
+          {tenants.map((t) => {
+            const tint = tenantColors[t.realm] ?? t.tint;
+            return (
+              <button
+                key={t.realm}
+                className="realm-opt"
+                aria-current={state.realm === t.realm}
+                onClick={() => setRealm(t.realm)}
+                title={`${t.tenant} · ${ROLE_LABEL[t.role]}`}
+              >
+                <span className="realm-swatch" style={{ background: tint }} />
+                <span className="label grow truncate">{t.tenant}</span>
+                <span
+                  className="mono dim"
+                  style={{ fontSize: 9, textTransform: 'uppercase', letterSpacing: '0.06em' }}
+                >
+                  {ROLE_LABEL[t.role]}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+
+        <div className="rail-node">
+          <span className="live-dot" aria-hidden="true" />
+          <span>Valhalla</span>
+          <StatusChip status="nominal" />
+        </div>
+      </div>
+    </aside>
+  );
+}

package/apps/hlidskjalf/src/app/Shell.tsx

@@ -0,0 +1,135 @@
+import { useEffect, type CSSProperties } from 'react';
+import { useYmir } from '../state/store';
+import { GATES, realmDef } from '../data/realms';
+import { applyMeta } from '../data/metadata';
+import { Rail } from './Rail';
+import { Topbar } from './Topbar';
+import { BottomStream } from './BottomStream';
+import { MobileNav } from './MobileNav';
+import { Fleet } from '../gates/Fleet';
+import { Tasks } from '../gates/Tasks';
+import { Well } from '../gates/Well';
+import { Runes } from '../gates/Runes';
+import { Reviews } from '../gates/Reviews';
+import { Processes } from '../gates/Processes';
+import { Files } from '../gates/Files';
+import { OmniChat } from '../gates/OmniChat';
+import { Forge } from '../gates/Forge';
+import { Profile } from '../gates/Profile';
+import { Runtime } from '../gates/Runtime';
+import { Cron } from '../gates/Cron';
+import { Sessions } from '../gates/Sessions';
+import { Worktrees } from '../gates/Worktrees';
+import { Trace } from '../gates/Trace';
+import { Decisions } from '../gates/Decisions';
+import { Stats } from '../gates/Stats';
+
+function Stage() {
+  const gate = useYmir((s) => s.gate);
+  switch (gate) {
+    case 'fleet':
+      return <Fleet />;
+    case 'tasks':
+      return <Tasks />;
+    case 'well':
+      return <Well />;
+    case 'runes':
+      return <Runes />;
+    case 'reviews':
+      return <Reviews />;
+    case 'processes':
+      return <Processes />;
+    case 'files':
+      return <Files />;
+    case 'chat':
+      return <OmniChat />;
+    case 'forge':
+      return <Forge />;
+    case 'profile':
+      return <Profile />;
+    case 'runtime':
+      return <Runtime />;
+    case 'cron':
+      return <Cron />;
+    case 'sessions':
+      return <Sessions />;
+    case 'worktrees':
+      return <Worktrees />;
+    case 'trace':
+      return <Trace />;
+    case 'decisions':
+      return <Decisions />;
+    case 'stats':
+      return <Stats />;
+    default:
+      return <Fleet />;
+  }
+}
+
+function PageFeed() {
+  const streams = useYmir((s) => s.streams);
+  const gate = useYmir((s) => s.gate);
+  const items = (streams[gate]?.length ? streams[gate] : streams.all ?? []).slice(0, 3);
+  return (
+    <div className="page-feed" aria-live="polite" title="Live page feed — last 40">
+      {items.length === 0 ? (
+        <span className="pf-line dim">awaiting the first message…</span>
+      ) : (
+        items.map((e) => (
+          <span className="pf-line" key={e.id}>
+            <span className="pf-ts">
+              {new Date(e.ts).toLocaleTimeString('en-GB', { hour12: false })}
+            </span>
+            <span className="pf-from">{e.from}</span>
+            <span className="pf-msg" title={e.message}>
+              {e.message}
+            </span>
+          </span>
+        ))
+      )}
+    </div>
+  );
+}
+
+export function Shell() {
+  const realm = useYmir((s) => s.realm);
+  const session = useYmir((s) => s.session);
+  const density = useYmir((s) => s.density);
+  const gate = useYmir((s) => s.gate);
+  const streamHeight = useYmir((s) => s.streamHeight);
+
+  const gateDef = GATES.find((g) => g.id === gate);
+  const tenant = session?.tenants.find((t) => t.realm === realm);
+  const def = realmDef(realm, tenant);
+
+  useEffect(() => {
+    applyMeta(gate, def.tenant);
+  }, [gate, def.tenant]);
+
+  return (
+    <div
+      className="shell"
+      data-realm={realm}
+      data-density={density}
+      style={{ '--stream-h': `${streamHeight}px` } as CSSProperties}
+    >
+      <Rail />
+      <Topbar />
+      <main className="stage" role="main">
+        <div className="stage-header-row">
+          {gateDef ? (
+            <div className="stage-deck">
+              <span aria-hidden="true">{gateDef.glyph}</span> {gateDef.hint}
+            </div>
+          ) : (
+            <span />
+          )}
+          <PageFeed />
+        </div>
+        <Stage />
+      </main>
+      <BottomStream />
+      <MobileNav />
+    </div>
+  );
+}