@zerwiz/ymir 0.1.33 → 0.1.35

package/apps/hlidskjalf/src/components/Halls.tsx

@@ -0,0 +1,155 @@
+import { useState } from 'react';
+import { gateApi } from '../services/api';
+
+/**
+ * The three halls of Ymir — one seat, three rooms. Every surface can raise the
+ * others through the gate (`/api/desktop`), so the buttons are the same control
+ * however you reach them.
+ */
+export interface Hall {
+  id: 'hlidskjalf' | 'smidja' | 'sessrumnir';
+  glyph: string;
+  name: string;
+  blurb: string;
+}
+
+export const HALLS: Hall[] = [
+  {
+    id: 'hlidskjalf',
+    glyph: 'ᚺ',
+    name: 'Hlidskjalf',
+    blurb:
+      'The control plane — the high seat. See the whole machine at once: the fleet of agents, tasks, the memory well, the rune ledger, reviews, cron. Start here to know what Ymir is doing.',
+  },
+  {
+    id: 'smidja',
+    glyph: 'ᛊ',
+    name: 'Smíðja',
+    blurb:
+      'The smithy — the trace of work in the fire. Watch agent runs phase by phase: envelopes, gates and their evidence, decisions, stats. One eye on the work being made.',
+  },
+  {
+    id: 'sessrumnir',
+    glyph: 'ᛋ',
+    name: 'Sessrúmnir',
+    blurb:
+      'The seat-hall — where you converse with Brokk. The chat, your sessions, your code, the file trees for the Hoard, the realms, and your workspaces, and the review rail.',
+  },
+];
+
+async function raise(id: Hall['id']): Promise<void> {
+  try {
+    await gateApi.desktop(id);
+  } catch {
+    /* launcher unreachable — stay put, change nothing */
+  }
+}
+
+const cardStyle: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.5rem',
+  textAlign: 'left',
+  padding: '1.1rem 1.2rem',
+  borderRadius: '12px',
+  border: '1px solid var(--ymir-steel-2)',
+  background: 'var(--ymir-bg-1)',
+  color: 'inherit',
+  cursor: 'pointer',
+  minWidth: '240px',
+  flex: '1 1 240px',
+};
+
+/** Post-login chooser: what the three apps are, and where to go. */
+export function HallsChooser({ onClose }: { onClose: () => void }): React.JSX.Element {
+  const [busy, setBusy] = useState<Hall['id'] | null>(null);
+  const enter = async (id: Hall['id']): Promise<void> => {
+    if (id !== 'hlidskjalf') {
+      setBusy(id);
+      await raise(id);
+      setBusy(null);
+    }
+    onClose();
+  };
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label="Choose your seat"
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 60,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: 'rgba(14, 12, 9, 0.72)',
+        backdropFilter: 'blur(4px)',
+        padding: '1.5rem',
+      }}
+    >
+      <div style={{ maxWidth: '900px', width: '100%' }}>
+        <h1 style={{ fontSize: '1.5rem', margin: '0 0 0.25rem' }}>Take your seat</h1>
+        <p style={{ margin: '0 0 1.25rem', opacity: 0.75 }}>
+          Ymir has three halls. They share one login — pick where you want to begin.
+        </p>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+          {HALLS.map((h) => (
+            <button
+              key={h.id}
+              type="button"
+              style={cardStyle}
+              disabled={busy !== null}
+              onClick={() => void enter(h.id)}
+            >
+              <span style={{ fontSize: '1.6rem' }} aria-hidden="true">
+                {h.glyph}
+              </span>
+              <span style={{ fontWeight: 600 }}>{h.name}</span>
+              <span style={{ fontSize: '0.85rem', opacity: 0.75, lineHeight: 1.45 }}>{h.blurb}</span>
+              <span style={{ marginTop: '0.4rem', fontSize: '0.8rem', opacity: 0.9 }}>
+                {busy === h.id ? 'raising…' : h.id === 'hlidskjalf' ? 'You are here — enter →' : 'Open →'}
+              </span>
+            </button>
+          ))}
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          style={{
+            marginTop: '1rem',
+            background: 'transparent',
+            border: 'none',
+            color: 'inherit',
+            opacity: 0.6,
+            cursor: 'pointer',
+            fontSize: '0.85rem',
+          }}
+        >
+          Stay in Hlidskjalf
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/** Compact switcher for the topbar: jump between the three halls. */
+export function HallsSwitcher({ current }: { current?: Hall['id'] }): React.JSX.Element {
+  return (
+    <div role="group" aria-label="Switch hall" style={{ display: 'flex', gap: '2px' }}>
+      {HALLS.map((h) => (
+        <button
+          key={h.id}
+          type="button"
+          className={`icon-btn ${h.id === current ? 'on' : ''}`}
+          title={`${h.name} — ${h.blurb.split('.')[0]}.`}
+          aria-label={`Open ${h.name}`}
+          aria-current={h.id === current ? 'page' : undefined}
+          onClick={() => void raise(h.id)}
+        >
+          {h.glyph}
+        </button>
+      ))}
+    </div>
+  );
+}

package/apps/hlidskjalf/src/components/LoginModal.tsx

@@ -0,0 +1,329 @@
+/**
+ * OLD LOGIN — retired, kept, not wired.
+ *
+ * This is the original Hlidskjalf login modal, and with it the lore telling
+ * (`LORE_BEATS` / `LORE_LONG`). It is no longer the door; the live login is a
+ * standalone forge page served elsewhere.
+ *
+ * KEEP FOR THE LORE — the beats and the long telling are wanted for the future.
+ * Do not delete, and do not re-wire it as the gate without an explicit decision.
+ */
+import { useEffect, useState } from 'react';
+import { gateApi } from '../services/api';
+import { LORE_LONG } from '../data/lore';
+
+/** The visitor's telling of the lore — sourced from docs/lore.md, told short. */
+const LORE_BEATS: { rune: string; name: string; line: string }[] = [
+  {
+    rune: 'ᛉ',
+    name: 'Ymir',
+    line: 'The primordial giant still — one repo, one machine, the body every world of work is carved from.',
+  },
+  {
+    rune: 'ᛇ',
+    name: 'Yggdrasil',
+    line: 'The tree that binds the realms: parallel work grows in its branches, so no two hands ever collide.',
+  },
+  {
+    rune: 'ᚦ',
+    name: 'Utgard',
+    line: 'The walled realm outside the halls — untrusted work runs there, so a bad casting never cracks the forge.',
+  },
+  {
+    rune: 'ᛗ',
+    name: 'Mimirsbrunn',
+    line: 'The well at the root. Kaia drinks before she acts, so nothing is ever spoken dry.',
+  },
+  {
+    rune: 'ᚱ',
+    name: 'Ratatoskr',
+    line: 'The squirrel on the tree — every word between agents is tracked, observed, and carved into Runes.',
+  },
+  {
+    rune: 'ᚠ',
+    name: 'Hlidskjalf',
+    line: 'Odin’s high seat: one operator, seeing every realm, every agent, every run.',
+  },
+];
+
+/** The gate login — shown when the tunnel origin has not authenticated. */
+export function LoginModal({ onAuthed, hint }: { onAuthed: () => void; hint?: string }) {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [invite, setInvite] = useState('');
+  const [err, setErr] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [showLore, setShowLore] = useState(false);
+  /** 'login' for the operator, 'register' for someone let in by invitation. */
+  const [mode, setMode] = useState<'login' | 'register'>('login');
+  /**
+   * Whether registration is open at all. The gate answers this: no live invite
+   * code means no way in, so the offer is not even shown.
+   */
+  const [registration, setRegistration] = useState(false);
+  /** GitHub is a second door only when the gate has an OAuth app configured. */
+  const [githubOn, setGithubOn] = useState(false);
+
+  useEffect(() => {
+    gateApi
+      .session()
+      .then((s) => {
+        setRegistration(!!s.registration);
+        setGithubOn(!!s.github);
+      })
+      .catch(() => {
+        setRegistration(false);
+        setGithubOn(false);
+      });
+  }, []);
+
+  useEffect(() => {
+    if (!showLore) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setShowLore(false);
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [showLore]);
+
+  /**
+   * Sign in with GitHub — the same gate, a second door.
+   *
+   * The gate returns the authorize URL when it is configured; when it is not, it
+   * says exactly what is missing rather than pretending.
+   */
+  async function github() {
+    if (busy) return;
+    setBusy(true);
+    setErr('');
+    try {
+      const r = await gateApi.githubStart();
+      if (r.url) {
+        window.location.href = r.url;
+        return;
+      }
+      setErr(r.error ?? 'GitHub sign-in is not available');
+    } catch (e2) {
+      setErr((e2 as { message?: string })?.message ?? 'GitHub sign-in is not available');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    if (busy) return;
+    setBusy(true);
+    setErr('');
+    try {
+      if (mode === 'register') await gateApi.register(username, password, invite);
+      else await gateApi.login(username, password);
+      onAuthed();
+    } catch (e2) {
+      // The gate's own words are better than a generic guess (a spent code, a
+      // taken username, a short password all say exactly what is wrong).
+      const said = (e2 as { message?: string })?.message ?? '';
+      setErr(said.trim() || (mode === 'register' ? 'Could not create the account' : 'Wrong username or password'));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="login">
+      <div className="gate">
+        <aside className="gate-lore" aria-label="The lore of Ymir">
+          <span className="lore-kicker">The Lore</span>
+          <h2 className="lore-hero">Before the worlds, there was Ymir.</h2>
+          <p className="lore-lede">
+            In the old telling, nothing lived but frost and ember — until they met in
+            the void and the first giant woke. The gods made the world from his body:
+            flesh the earth, blood the seas, bones the mountains, skull the sky.
+          </p>
+
+          <ul className="lore-beats">
+            {LORE_BEATS.map((b) => (
+              <li key={b.name}>
+                <span className="lore-rune" aria-hidden="true">
+                  {b.rune}
+                </span>
+                <span className="lore-name">{b.name}</span>
+                <span className="lore-line">{b.line}</span>
+              </li>
+            ))}
+          </ul>
+
+          <p className="lore-close">
+            The giant stands. The forge is lit.
+            <span className="lore-cta"> Walk the worlds for yourself — ask for an invite code, and the gate will let you in.</span>
+          </p>
+
+          <button className="btn lore-more" type="button" onClick={() => setShowLore(true)}>
+            <span aria-hidden="true">ᛖ</span> Read the full saga
+          </button>
+        </aside>
+
+        <form className="login-card" onSubmit={submit}>
+          <div className="login-brand">
+            <img src="/ymir-mark.svg" alt="Ymir" className="brand-mark" width={44} height={44} />
+            <div className="col">
+              <span className="name">YMIR</span>
+              <span className="sub">Hlidskjalf</span>
+            </div>
+          </div>
+
+          <div className="login-about">
+            <span className="eyebrow">What this is</span>
+            <p>
+              Ymir is a single-operator agent platform: one person directing a fleet of
+              AI agents that build, research, review, and ship. Every agent works in an
+              isolated sandbox, drinks from a shared long-term memory before it acts, and
+              leaves every move in a ledger that cannot be rewritten.
+            </p>
+          </div>
+
+          <div>
+            <h1 className="login-title">{mode === 'register' ? 'Create an account' : 'Sign in'}</h1>
+            <p className="login-deck" style={{ marginTop: 6 }}>
+              {hint ??
+                (mode === 'register'
+                  ? 'You need an invite code to enter. Ask whoever runs this Ymir for one.'
+                  : 'The gate is closed. Sign in, or enter an invite code to make your own account.')}
+            </p>
+          </div>
+
+          {mode === 'register' ? (
+            <label className="field">
+              <span className="eyebrow">Invite code</span>
+              <input
+                value={invite}
+                onChange={(e) => setInvite(e.target.value)}
+                autoComplete="off"
+                placeholder="YMIR-XXXX-XXXX"
+              />
+            </label>
+          ) : null}
+
+          <label className="field">
+            <span className="eyebrow">Username</span>
+            <input
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              autoComplete="username"
+              placeholder="username"
+            />
+          </label>
+
+          <label className="field">
+            <span className="eyebrow">Password</span>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              autoComplete={mode === 'register' ? 'new-password' : 'current-password'}
+              placeholder="••••••••"
+            />
+          </label>
+
+          {err ? (
+            <span className="mono" style={{ color: 'var(--ymir-danger)', fontSize: 12 }}>
+              {err}
+            </span>
+          ) : null}
+
+          <button className="btn btn-primary" type="submit" disabled={busy} style={{ justifyContent: 'center' }}>
+            <span aria-hidden="true">ᛉ</span>
+            {busy
+              ? mode === 'register'
+                ? 'Forging the account…'
+                : 'Opening the gate…'
+              : mode === 'register'
+                ? 'Create account'
+                : 'Enter'}
+          </button>
+
+          {/* Offered only while a live invite code exists — the gate decides. */}
+          {registration ? (
+            <button
+              className="btn"
+              type="button"
+              onClick={() => {
+                setMode(mode === 'register' ? 'login' : 'register');
+                setErr('');
+              }}
+              style={{ justifyContent: 'center' }}
+            >
+              {mode === 'register' ? 'I already have an account' : 'I have an invite code'}
+            </button>
+          ) : null}
+
+          {githubOn ? (
+            <>
+              <div className="divider">or</div>
+
+              {/* GitHub is a second door to the SAME gate: the account must exist
+                  (an invite made it), so this never becomes an open door. */}
+              <button
+                className="btn"
+                type="button"
+                onClick={github}
+                disabled={busy}
+                title="Sign in with GitHub"
+                style={{ justifyContent: 'center' }}
+              >
+                <span aria-hidden="true">ᚷ</span> Continue with GitHub
+              </button>
+            </>
+          ) : null}
+        </form>
+      </div>
+
+      {showLore ? (
+        <div
+          className="lore-overlay"
+          role="dialog"
+          aria-modal="true"
+          aria-label="The saga of Ymir"
+          onClick={(e) => {
+            if (e.target === e.currentTarget) setShowLore(false);
+          }}
+        >
+          <div className="lore-parchment">
+            <header className="lore-parchment-head">
+              <span className="lore-kicker">The Saga of Ymir</span>
+              <button className="btn" type="button" onClick={() => setShowLore(false)}>
+                Close
+              </button>
+            </header>
+
+            {LORE_LONG.map((sec) => (
+              <section key={sec.id} className="lore-sec">
+                <h3 className="lore-sec-title">{sec.title}</h3>
+                {sec.paras.map((p, i) => (
+                  <p key={i} className="lore-sec-p">
+                    {p}
+                  </p>
+                ))}
+                {sec.names ? (
+                  <ul className="lore-names">
+                    {sec.names.map((n) => (
+                      <li key={n.name}>
+                        <span className="lore-rune" aria-hidden="true">
+                          {n.rune}
+                        </span>
+                        <span className="lore-name">{n.name}</span>
+                        <span className="lore-line">{n.line}</span>
+                      </li>
+                    ))}
+                  </ul>
+                ) : null}
+              </section>
+            ))}
+
+            <p className="lore-sec-p lore-end">The giant stands. The forge is lit. The seat is taken.</p>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/apps/hlidskjalf/src/components/Markdown.tsx

@@ -0,0 +1,10 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+export function Markdown({ source }: { source: string }) {
+  return (
+    <div className="md-render">
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{source}</ReactMarkdown>
+    </div>
+  );
+}

package/apps/hlidskjalf/src/components/MetricTile.tsx

@@ -0,0 +1,40 @@
+interface MetricTileProps {
+  label: string;
+  value: string | number;
+  delta?: string;
+  tone?: string;
+  spark?: number[];
+}
+
+function Spark({ points }: { points: number[] }) {
+  const w = 92;
+  const h = 26;
+  const max = Math.max(...points, 1);
+  const min = Math.min(...points, 0);
+  const span = max - min || 1;
+  const d = points
+    .map((p, i) => {
+      const x = (i / (points.length - 1)) * w;
+      const y = h - ((p - min) / span) * h;
+      return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
+    })
+    .join(' ');
+  return (
+    <svg className="spark" width={w} height={h} aria-hidden="true">
+      <path d={d} fill="none" stroke="var(--ymir-cyan-1)" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+export function MetricTile({ label, value, delta, tone, spark }: MetricTileProps) {
+  return (
+    <div className="metric-tile">
+      <div className="label">{label}</div>
+      <div className="value" style={tone ? { color: tone } : undefined}>
+        {value}
+      </div>
+      {delta ? <div className="delta">{delta}</div> : null}
+      {spark ? <Spark points={spark} /> : null}
+    </div>
+  );
+}

package/apps/hlidskjalf/src/components/ModelPicker.tsx

@@ -0,0 +1,100 @@
+import { useMemo, useState } from 'react';
+import type { ChatModel } from '../services/api';
+
+interface ModelPickerProps {
+  value: string;
+  onChange: (id: string) => void;
+  models: ChatModel[];
+  placeholder?: string;
+  allowFree?: boolean;
+}
+
+/**
+ * A themed combobox for choosing a model. Native datalists spill off-theme and
+ * stretch the hall; this keeps the catalog in a scroll of our own making,
+ * filters as you type, and always allows a free-typed id.
+ */
+export function ModelPicker({ value, onChange, models, placeholder, allowFree = true }: ModelPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState('');
+  const needle = (filter || value).toLowerCase();
+
+  const matches = useMemo(() => {
+    const list = models.filter(
+      (m) => !needle || `${m.id} ${m.provider}`.toLowerCase().includes(needle),
+    );
+    return list.slice(0, 60);
+  }, [models, needle]);
+
+  const exact = models.some((m) => m.id === value);
+  const typed = filter || value;
+
+  return (
+    <div className="model-picker">
+      <input
+        value={value}
+        placeholder={placeholder}
+        title={value || undefined}
+        role="combobox"
+        aria-expanded={open}
+        aria-label={placeholder ?? 'Choose a model'}
+        onFocus={() => setOpen(true)}
+        onChange={(e) => {
+          onChange(e.target.value);
+          setFilter(e.target.value);
+          setOpen(true);
+        }}
+        onBlur={() => window.setTimeout(() => setOpen(false), 160)}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') setOpen(false);
+        }}
+      />
+      {value ? (
+        <div className="model-current" title={value}>
+          {value}
+        </div>
+      ) : null}
+      {open && (matches.length > 0 || (allowFree && typed)) ? (
+        <ul className="model-menu" role="listbox">
+          {matches.map((m) => (
+            <li
+              key={m.id}
+              role="option"
+              aria-selected={m.id === value}
+              title={m.id}
+              className={m.id === value ? 'active' : ''}
+              onMouseDown={(e) => {
+                e.preventDefault();
+                onChange(m.id);
+                setFilter('');
+                setOpen(false);
+              }}
+            >
+              <span className="mono grow">{m.id}</span>
+              <span className={`badge ${m.kind}`}>{m.kind}</span>
+            </li>
+          ))}
+          {allowFree && typed && !exact ? (
+            <li
+              className="free"
+              onMouseDown={(e) => {
+                e.preventDefault();
+                onChange(typed);
+                setFilter('');
+                setOpen(false);
+              }}
+            >
+              <span className="mono grow">Use “{typed}”</span>
+              <span className="dim">free-type</span>
+            </li>
+          ) : null}
+        </ul>
+      ) : null}
+      {open && matches.length === 0 && !(allowFree && typed) ? (
+        <ul className="model-menu" role="listbox">
+          <li className="dim">No connected models.</li>
+        </ul>
+      ) : null}
+    </div>
+  );
+}