@zerwiz/ymir 0.1.33 → 0.1.35

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

@@ -0,0 +1,138 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useYmir } from '../state/store';
+import { gateApi } from '../services/api';
+import { Markdown } from '../components/Markdown';
+import type { FileNode } from '../types';
+
+interface FlatNode {
+  node: FileNode;
+  depth: number;
+}
+
+function flatten(node: FileNode, depth = 0, out: FlatNode[] = []): FlatNode[] {
+  out.push({ node, depth });
+  if (node.type === 'dir' && node.children) {
+    for (const child of node.children) flatten(child, depth + 1, out);
+  }
+  return out;
+}
+
+interface Preview {
+  path: string;
+  size?: number;
+  updated?: string;
+  body?: string;
+  note?: string;
+  error?: string;
+}
+
+/** Files (Skrymir) — the realm tree from the gate API, with real file contents. */
+export function Files() {
+  const files = useYmir((s) => s.files);
+  const realm = useYmir((s) => s.realm);
+  const live = useYmir((s) => s.live);
+  const flat = useMemo(() => flatten(files), [files]);
+  const [selected, setSelected] = useState<string>(
+    () => flat.find((f) => f.node.type === 'file')?.node.path ?? files.path,
+  );
+  const [preview, setPreview] = useState<Preview | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const selectedNode = flat.find((f) => f.node.path === selected)?.node;
+
+  useEffect(() => {
+    if (!selectedNode || selectedNode.type !== 'file' || live !== true) {
+      setPreview(null);
+      return;
+    }
+    let alive = true;
+    setLoading(true);
+    gateApi
+      .file(realm, selected)
+      .then((r) => alive && setPreview(r))
+      .catch(() => alive && setPreview({ path: selected, error: 'unavailable' }))
+      .finally(() => alive && setLoading(false));
+    return () => {
+      alive = false;
+    };
+  }, [selected, selectedNode, realm, live]);
+
+  const body =
+    selectedNode?.type !== 'file'
+      ? selectedNode
+        ? 'directory — select a file to preview'
+        : 'select a file'
+      : loading
+        ? 'reading…'
+        : preview?.body != null
+          ? preview.body
+          : (preview?.note ?? preview?.error ?? 'no content available');
+
+  const isMarkdown =
+    selectedNode?.type === 'file' &&
+    !loading &&
+    preview?.body != null &&
+    /\.(md|markdown)$/i.test(selectedNode.name);
+
+  return (
+    <>
+      <div className="stage-head">
+        <div>
+          <h1 className="stage-title">Skrymir</h1>
+          <p className="stage-deck">The giant's hand · realm-scoped file browser · read-only</p>
+        </div>
+      </div>
+
+      <div className="files-layout">
+        <section className="panel">
+          <div className="panel-head">
+            <div className="panel-title">
+              <span className="glyph" aria-hidden="true">ᛊ</span>
+              {files.name}
+            </div>
+            <span className="mono dim" style={{ fontSize: 10 }}>
+              {flat.filter((f) => f.node.type === 'file').length} files
+            </span>
+          </div>
+          <div className="file-tree">
+            {flat.length <= 1 ? (
+              <div className="empty" style={{ padding: 16 }}>
+                <p className="mono dim" style={{ fontSize: 11 }}>no files in this realm</p>
+              </div>
+            ) : (
+              flat.map(({ node, depth }) => (
+                <button
+                  key={node.path}
+                  className="file-node"
+                  style={{ paddingLeft: 12 + depth * 14 }}
+                  aria-selected={selected === node.path}
+                  onClick={() => setSelected(node.path)}
+                >
+                  <span className="f-glyph" aria-hidden="true">
+                    {node.type === 'dir' ? '▸' : '◆'}
+                  </span>
+                  <span className="truncate">{node.name}</span>
+                </button>
+              ))
+            )}
+          </div>
+        </section>
+
+        <section className="panel">
+          <div className="panel-head">
+            <div className="panel-title">
+              <span className="glyph" aria-hidden="true">ᛊ</span>
+              {selected}
+            </div>
+            <span className="mono dim" style={{ fontSize: 10 }}>
+              {selectedNode?.size ? `${selectedNode.size} bytes` : selectedNode?.type === 'dir' ? 'directory' : ''}
+            </span>
+          </div>
+          <div className={`file-preview${isMarkdown ? ' md-preview' : ''}`}>
+            {isMarkdown ? <Markdown source={body} /> : body}
+          </div>
+        </section>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,184 @@
+import type { CSSProperties } from 'react';
+import { useYmir } from '../state/store';
+import { useUI } from '../state/ui';
+import { useTenantDef } from '../hooks/useTenantDef';
+import { DOMAINS, TERMINAL_STATES } from '../data/realms';
+import type { AgentCard as AgentCardType } from '../types';
+import { MetricTile } from '../components/MetricTile';
+import { AgentCard } from '../components/AgentCard';
+import { StatusChip } from '../components/Status';
+
+/** Lay the real fleet out: the primary (Brokk) as the hub, everyone else fanned
+ * below in a grid that fits N nodes without ring/label collision. A single-line
+ * fan collides past ~8 agents — 20 fit in a 5-wide grid, tighter when fewer. */
+function layout(agents: AgentCardType[]): { pos: Record<string, { x: number; y: number }>; edges: [string, string][] } {
+  const hub = agents.find((a) => a.id === 'brokk') ?? agents[0];
+  const others = agents.filter((a) => a !== hub);
+  const pos: Record<string, { x: number; y: number }> = {};
+  if (hub) pos[hub.id] = { x: 50, y: 12 };
+  const n = others.length;
+  if (n > 0) {
+    // Fit a square-ish grid: rings are 46px and labels hang below, so each
+    // column needs ~21 units of pitch and each row ~13 (of the 100-unit canvas).
+    const cols = Math.min(n, Math.max(2, Math.ceil(Math.sqrt(n))));
+    const rows = Math.ceil(n / cols);
+    others.forEach((a, i) => {
+      const col = i % cols;
+      const row = Math.floor(i / cols);
+      const x = cols === 1 ? 50 : 8 + (col / (cols - 1)) * 84;
+      const y = 48 + (row / Math.max(rows - 1, 1)) * 46;
+      pos[a.id] = { x, y };
+    });
+  }
+  const edges: [string, string][] = hub
+    ? others.map((o) => [hub.id, o.id] as [string, string])
+    : others.slice(1).map((o, i) => [others[i].id, o.id] as [string, string]);
+  return { pos, edges };
+}
+
+export function Fleet() {
+  const agents = useYmir((s) => s.agents);
+  const tasks = useYmir((s) => s.tasks);
+  const realm = useYmir((s) => s.realm);
+  const session = useYmir((s) => s.session);
+  const runes = useYmir((s) => s.runes);
+  const integrity = runes.length ? runes.filter((r) => r.checksum).length / runes.length : null;
+  const live = useYmir((s) => s.live);
+  const { openModal } = useUI();
+  const def = useTenantDef(realm, session?.tenants.find((t) => t.realm === realm));
+
+  const online = agents.filter((a) => a.status === 'nominal' && a.live?.state !== 'working').length;
+  const active = tasks.filter((t) => !TERMINAL_STATES.includes(t.state)).length;
+  const working = agents.filter((a) => a.live?.state === 'working').length;
+  const sealed = agents.filter((a) => a.status === 'down').length;
+  const { pos, edges } = layout(agents);
+
+  function inspect(id: string) {
+    const a = agents.find((x) => x.id === id);
+    if (!a) return;
+    openModal({
+      variant: 'info',
+      tone: a.status === 'nominal' ? 'ok' : a.status === 'degraded' ? 'warn' : 'danger',
+      glyph: 'ᚠ',
+      title: `${a.name} — Agent Card`,
+      body: a.live?.task || a.role,
+      content: JSON.stringify(
+        {
+          name: a.name,
+          status: a.status,
+          domain: a.domain,
+          capabilities: a.capabilities,
+          skills: a.skills,
+          interface: a.interface,
+          model: a.model,
+          tasksDone: a.tasksDone,
+          traceability: a.traceability,
+        },
+        null,
+        2,
+      ),
+    });
+  }
+
+  return (
+    <>
+      <div className="stage-head">
+        <div>
+          <h1 className="stage-title">The Fleet</h1>
+          <p className="stage-deck">
+            {online}/{agents.length} agents nominal · {def.tenant} · A2A 1.0 cards {live === false ? '(gate API offline)' : 'published'}
+          </p>
+        </div>
+        <div className="row">
+          <StatusChip status={live === false ? 'degraded' : 'nominal'} />
+        </div>
+      </div>
+
+      <div className="metric-grid" style={{ marginBottom: 'var(--ymir-space-4)' }}>
+        <MetricTile label="Agents nominal" value={`${online}/${agents.length}`} delta={`${agents.length} registered`} />
+        <MetricTile label="Active tasks" value={active} delta={`${tasks.length} forge orders`} />
+        <MetricTile label="Ledger integrity" value={integrity != null ? integrity.toFixed(3) : '—'} delta={`${runes.length} runes`} tone="var(--ymir-ok)" />
+        <MetricTile label="Utgard sealed" value={sealed} delta={`${working} degraded`} tone="var(--ymir-warn)" />
+      </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>
+              Fleet graph — Agent Cards & A2A hops
+            </div>
+            <span className="mono dim" style={{ fontSize: 10 }}>
+              hub = Brokk · edges = delegation
+            </span>
+          </div>
+          <div className="panel-body flush">
+            <div className="fleet-graph">
+              <svg className="fleet-edges" viewBox="0 0 100 100" preserveAspectRatio="none">
+                {edges.map(([a, b]) => {
+                  const A = pos[a];
+                  const B = pos[b];
+                  if (!A || !B) return null;
+                  return (
+                    <line
+                      key={`${a}-${b}`}
+                      className="fleet-edge"
+                      x1={A.x}
+                      y1={A.y}
+                      x2={B.x}
+                      y2={B.y}
+                      vectorEffect="non-scaling-stroke"
+                    />
+                  );
+                })}
+              </svg>
+              {agents.map((a) => {
+                const p = pos[a.id];
+                if (!p) return null;
+                const house = DOMAINS[a.domain] ?? DOMAINS.ymirlabs;
+                return (
+                  <div key={a.id} className="fleet-node" style={{ left: `${p.x}%`, top: `${p.y}%` }}>
+                    <div
+                      className="node-ring"
+                      data-status={a.status}
+                      style={{ '--house': house.accent } as CSSProperties}
+                      aria-hidden="true"
+                    >
+                      {house.glyph}
+                    </div>
+                    <span className="node-label">{a.name}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+
+        <section className="panel">
+          <div className="panel-head">
+            <div className="panel-title">
+              <span className="glyph" aria-hidden="true">ᛏ</span>
+              A2A task stream
+            </div>
+          </div>
+          <div className="panel-body flush">
+            {tasks.slice(0, 6).map((t) => (
+              <div className="trace-row" key={t.id} style={{ gridTemplateColumns: '1fr auto' }}>
+                <span className="event truncate">
+                  <span className="module mono">{t.agent}</span> · {t.title}
+                </span>
+                <span className="checksum">{t.state}</span>
+              </div>
+            ))}
+          </div>
+        </section>
+      </div>
+
+      <div className="gate-grid cols-3" style={{ marginTop: 'var(--ymir-space-4)' }}>
+        {agents.map((a) => (
+          <AgentCard key={a.id} agent={a} onSelect={inspect} />
+        ))}
+      </div>
+    </>
+  );
+}