@jr2/orchestrator 0.6.0 → 0.7.0

package/console/components/nav.ts

@@ -1,11 +1,17 @@
 // The nav: breadcrumb (the address, made clickable), the Machine's id, the zoom controls, the
-// fleet-wide attention badge, the feed state, and the token box (ADR-0032). The token INPUT is
+// fleet-wide attention badge, the feed state, and the credential box (ADR-0032). The token INPUT is
 // uncontrolled — its value is the reader's secret, never state — seeded once from sessionStorage
 // and committed on the change event; the store carries only the token's STATE, which is what the
-// badge renders.
+// badge renders, and the Caller that `GET /whoami` said it is.
+//
+// With no live credential the box offers the field and a login button for each issuer the Instance
+// declares for a login. With one, it shows who the page acts as (its scopes in the title) and a
+// sign-out button in place of the field.
 
 import { h, type JSX } from "preact";
-import { gateCount, type Store, type TokenState } from "../store.ts";
+import { useRef } from "preact/hooks";
+import { callerLabel, callerScopes, gateCount, may, type Store, type TokenState } from "../store.ts";
+import type { LoginIssuer } from "../login.ts";
 import type { AppApi } from "./app.ts";
 
 const TOKEN_BADGES: Record<TokenState, string> = { none: "", checking: "…", live: "live", invalid: "invalid" };
@@ -15,10 +21,14 @@ export function Nav(props: {
   machineId: string | null;
   zoomPct: number;
   initialToken: string;
+  logins: readonly LoginIssuer[];
+  loginNote: string | null;
   onChooseTab: (tab: "attention") => void;
   api: AppApi;
 }): JSX.Element {
-  const { store, machineId, zoomPct, initialToken, onChooseTab, api } = props;
+  const { store, machineId, zoomPct, initialToken, logins, loginNote, onChooseTab, api } = props;
+  const field = useRef<HTMLInputElement>(null);
+  const actingAs = callerLabel(store);
   const connection = store.workflow ? store.connection : "idle";
   const count = gateCount(store);
   return h(
@@ -56,7 +66,7 @@ export function Nav(props: {
       "button",
       {
         id: "attention-badge",
-        hidden: store.token !== "live" || count === 0,
+        hidden: !may(store, "answer") || count === 0,
         title: "open gates across the fleet",
         onClick: () => onChooseTab("attention"),
       },
@@ -65,17 +75,53 @@ export function Nav(props: {
     ),
     h("span", { id: "connection", class: `conn conn--${connection}`, title: "feed connection" }, connection),
     h(
-      "label",
-      { id: "token-box", title: "Instance token — unlocks start & gates (ADR-0032)" },
+      "div",
+      { id: "token-box" },
+      h(
+        "span",
+        { id: "caller", hidden: actingAs === null, title: callerScopes(store.caller) },
+        actingAs === null ? "" : `as ${actingAs}`,
+      ),
+      h(
+        "button",
+        {
+          id: "sign-out",
+          hidden: actingAs === null,
+          title: "forget the credential: the page goes back to observer",
+          onClick: () => {
+            if (field.current) field.current.value = "";
+            api.setToken("");
+          },
+        },
+        "sign out",
+      ),
       h("input", {
         id: "token",
+        ref: field,
         type: "password",
-        placeholder: "instance token",
+        hidden: actingAs !== null,
+        placeholder: "Caller token",
+        title: "a Caller's token — unlocks what its scopes allow (ADR-0032)",
         autocomplete: "off",
         defaultValue: initialToken,
         onChange: (e: Event) => api.setToken((e.currentTarget as HTMLInputElement).value.trim()),
       }),
+      actingAs === null
+        ? logins.map((issuer) =>
+            h(
+              "button",
+              {
+                key: issuer.issuer,
+                class: "login",
+                title: `log in at ${issuer.issuer}`,
+                onClick: () => api.login(issuer),
+              },
+              logins.length === 1 ? "log in" : `log in · ${new URL(issuer.issuer).host}`,
+            ),
+          )
+        : null,
       h("span", { id: "token-state", class: `token-state token-state--${store.token}` }, TOKEN_BADGES[store.token]),
+      h("span", { id: "login-note", hidden: loginNote === null, title: loginNote ?? "" }, loginNote ?? ""),
     ),
   );
 }

package/console/conversation.ts

@@ -0,0 +1,161 @@
+// A kept conversation as the Console's bottom drawer shows it (ADR-0023, ADR-0032): the entries
+// that the conversation routes serve, folded into the items a person reads, and the reader of the
+// `/events` stream. Pure, with no DOM and no fetch, so the test suite reads it as it reads store.ts.
+//
+// An entry is one body of the Harness's print: its label is `kind` and the rest is `text`. The
+// print's cut is the record's cut (ADR-0023), so a Working tool's result is never here: a tool call
+// with no answer is a Working tool's, and a call that an `<name> answer` or `<name> error` entry
+// follows is a Menu pick.
+
+/** One kept entry, as `GET /runs/:id/conversations/:iid` gives it — mirrors `ConversationEntry` in
+ *  conversations.ts. */
+export type ConversationEntry = { id: string; seq: number; at: string; agent: string; kind: string; text: string };
+
+/** One kept conversation, as `GET /runs/:id/conversations` lists it (ADR-0023, ADR-0065). `open`
+ *  says that a Turn of it is registered on the live run. */
+export type ConversationRow = {
+  agent: string;
+  /** The Agent slot from the run's admission ledger: the address that a Steering message takes. */
+  slot?: string;
+  instanceId: string;
+  open: boolean;
+  bytes: number;
+  cut: boolean;
+  /** The space guard deleted the entries (ADR-0065); the row stays. */
+  swept?: string;
+};
+
+/** One Agent slot of a run, as `GET /runs/:id/agents` lists it (ADR-0002): whether it has an open
+ *  Turn, and whether a Caller may steer it. */
+export type AgentLine = { agent: string; open: boolean; steerable: boolean };
+
+/** What a person reads of a conversation, one item for each entry, with a tool call and its answer
+ *  folded into one item. */
+export type ConversationItem =
+  | { type: "prompt" | "steering" | "notice"; at: string; text: string }
+  | { type: "text" | "thinking"; at: string; text: string }
+  | {
+      type: "call";
+      at: string;
+      tool: string;
+      input: string;
+      /** The pick's answer, or its refusal (`error`). Absent for a Working tool, whose result is
+       *  never kept, and for a pick that has no answer yet. */
+      result?: { text: string; error: boolean };
+    }
+  | { type: "compacted" | "cut" | "mark"; at: string; label: string; text: string };
+
+/** The `kind` of the marker entry that a cut leaves (ADR-0023) — `CUT_KIND` in conversations.ts. */
+const CUT_KIND = "cut";
+
+/** The first words of a Steering message's frame (ADR-0002), in each author's form. */
+const STEERING = /^Steering message /;
+/** The lines that a Steering message carries after its frame: the quoted text, and the closing line
+ *  of a peer's message. */
+const STEERING_MORE = /^(>|End of the message from )/;
+/** The first word of a notice (ADR-0062). */
+const NOTICE = /^Notice: /;
+/** The lines that delimit the Turn part (ADR-0029): alone, they say nothing to a person. */
+const TURN_TAG = /^<\/?jr2-turn>$/;
+
+/** Cut a prompt at the lines that jr2 frames: each Steering message and each notice is an item of
+ *  its own, and the text around them stays a prompt. A part that holds only the Turn part's tags
+ *  is dropped. */
+function splitPrompt(at: string, text: string): ConversationItem[] {
+  const parts: Array<{ type: "prompt" | "steering" | "notice"; lines: string[] }> = [];
+  for (const line of text.split("\n")) {
+    const last = parts[parts.length - 1];
+    const type = STEERING.test(line) ? "steering" : NOTICE.test(line) ? "notice" : null;
+    if (type) parts.push({ type, lines: [line] });
+    else if (last?.type === "steering" && STEERING_MORE.test(line)) last.lines.push(line);
+    else if (last?.type === "prompt") last.lines.push(line);
+    else parts.push({ type: "prompt", lines: [line] });
+  }
+  return parts
+    .filter((p) => p.type !== "prompt" || p.lines.some((l) => l.trim() !== "" && !TURN_TAG.test(l)))
+    .map((p) => ({ type: p.type, at, text: p.lines.join("\n") }));
+}
+
+/**
+ * Fold the entries of one conversation into the items a person reads. A call's answer joins the
+ * newest call of the same name that has no answer yet; an answer with no call shows as a call
+ * with no input. A prompt is cut at each Steering message and each notice that it carries, so each
+ * shows as its own item; the frame of each is jr2's own text, so this reads it and changes nothing.
+ */
+export function foldEntries(entries: readonly ConversationEntry[]): ConversationItem[] {
+  const items: ConversationItem[] = [];
+  const waiting = new Map<string, Extract<ConversationItem, { type: "call" }>[]>();
+  for (const entry of entries) {
+    const { kind, text, at } = entry;
+    const answer = /^(.+) (answer|error)$/.exec(kind);
+    if (answer) {
+      const tool = answer[1]!;
+      const result = { text, error: answer[2] === "error" };
+      const call = waiting.get(tool)?.pop();
+      if (call) call.result = result;
+      else items.push({ type: "call", at, tool, input: "", result });
+      continue;
+    }
+    if (kind === "prompt") {
+      items.push(...splitPrompt(at, text));
+    } else if (kind === "text" || kind === "thinking") {
+      items.push({ type: kind, at, text });
+    } else if (kind === "compacted" || kind === CUT_KIND) {
+      items.push({ type: kind, at, label: kind, text });
+    } else if (kind === "line" || kind.includes(" ")) {
+      // A body with no label, or a mechanic line such as `[thinking level]`.
+      items.push({ type: "mark", at, label: kind === "line" ? "" : kind, text });
+    } else {
+      const call: Extract<ConversationItem, { type: "call" }> = { type: "call", at, tool: kind, input: text };
+      items.push(call);
+      waiting.set(kind, [...(waiting.get(kind) ?? []), call]);
+    }
+  }
+  return items;
+}
+
+/** Add `more` to `kept`, in sequence order, each sequence number once: a page and the stream can
+ *  give the same entry, and the Harness sends a batch again after a failed send. */
+export function mergeEntries(
+  kept: readonly ConversationEntry[],
+  more: readonly ConversationEntry[],
+): ConversationEntry[] {
+  if (!more.length) return kept as ConversationEntry[];
+  const last = kept.length ? kept[kept.length - 1]!.seq : -Infinity;
+  if (more.every((e, i) => e.seq > last && (i === 0 || e.seq > more[i - 1]!.seq))) return [...kept, ...more];
+  const bySeq = new Map<number, ConversationEntry>();
+  for (const e of kept) bySeq.set(e.seq, e);
+  for (const e of more) if (!bySeq.has(e.seq)) bySeq.set(e.seq, e);
+  return [...bySeq.values()].sort((a, b) => a.seq - b.seq);
+}
+
+/** One event of a `text/event-stream`: its name (`message` when none) and its data. */
+export type SseEvent = { event: string; data: string };
+
+/**
+ * Read the complete events out of a stream's text so far, and give back the rest, which a later
+ * chunk completes. The Console reads the guarded streams with `fetch`, because an `EventSource`
+ * cannot send the credential (ADR-0032). Comments (`: ping`) and fields other than `event` and
+ * `data` are ignored.
+ */
+export function readSse(buffer: string): { events: SseEvent[]; rest: string } {
+  const events: SseEvent[] = [];
+  const text = buffer.replace(/\r\n?/g, "\n");
+  let start = 0;
+  for (let end = text.indexOf("\n\n"); end !== -1; end = text.indexOf("\n\n", start)) {
+    const block = text.slice(start, end);
+    start = end + 2;
+    let event = "message";
+    const data: string[] = [];
+    for (const line of block.split("\n")) {
+      if (line === "" || line.startsWith(":")) continue;
+      const colon = line.indexOf(":");
+      const field = colon === -1 ? line : line.slice(0, colon);
+      const value = colon === -1 ? "" : line.slice(colon + 1).replace(/^ /, "");
+      if (field === "event") event = value;
+      else if (field === "data") data.push(value);
+    }
+    if (data.length) events.push({ event, data: data.join("\n") });
+  }
+  return { events, rest: text.slice(start) };
+}

package/console/login.ts

@@ -0,0 +1,123 @@
+// The Console's login (ADR-0032, ADR-0078): OIDC, the authorization code flow with PKCE, as a public
+// client. The login adds no authenticator — it is a way for a person to get a JWT, which the page
+// then sends as it sends a typed token. The JWT authenticator checks it like any other.
+//
+// What the page needs before the login is open (`GET /console/config`): each issuer that offers a
+// login and its client id. Both are public values: a public client has no secret, and the issuer's
+// URL is in every JWT that it signs.
+//
+// This file is the pure half — no fetch, no storage, no location — so `node:test` checks it. The
+// bootstrap (main.ts) holds the rest: the redirect, the code exchange and sessionStorage. One `.ts`
+// for both consumers (ADR-0034), as store.ts.
+
+/** One issuer the Console offers a login against, as `GET /console/config` gives it. */
+export type LoginIssuer = { issuer: string; clientId: string };
+
+/** The answer of `GET /console/config`. */
+export type ConsoleConfig = { login: LoginIssuer[] };
+
+/** What the page keeps in sessionStorage between the redirect to the issuer and the return. */
+export type PendingLogin = {
+  issuer: string;
+  clientId: string;
+  state: string;
+  verifier: string;
+  tokenEndpoint: string;
+  /** The page address to go back to after the return (the return itself always lands on `/`). */
+  returnTo: string;
+};
+
+/** The scopes a login asks for, when the issuer supports each: `openid` always, then the claims the
+ *  JWT authenticator reads by default (`email` for the name jr2 shows, `groups` for the scopes).
+ *  An issuer that lists its scopes (`scopes_supported`) gets only those it lists, because some
+ *  providers refuse a request with a scope they do not know. */
+export function loginScopes(supported: readonly string[] | undefined): string {
+  const wanted = ["openid", "profile", "email", "groups"];
+  return wanted.filter((s) => s === "openid" || !supported || supported.includes(s)).join(" ");
+}
+
+/** The one return address of a login: the Console's root. One address, so an issuer needs one
+ *  redirect URI registered for its client, whatever page the person logged in from. */
+export function redirectUri(origin: string): string {
+  return `${origin}/`;
+}
+
+/** The issuer's authorization request: the code flow with an S256 PKCE challenge. */
+export function authorizeUrl(opts: {
+  endpoint: string;
+  clientId: string;
+  redirectUri: string;
+  scope: string;
+  state: string;
+  challenge: string;
+}): string {
+  const url = new URL(opts.endpoint);
+  url.searchParams.set("response_type", "code");
+  url.searchParams.set("client_id", opts.clientId);
+  url.searchParams.set("redirect_uri", opts.redirectUri);
+  url.searchParams.set("scope", opts.scope);
+  url.searchParams.set("state", opts.state);
+  url.searchParams.set("code_challenge", opts.challenge);
+  url.searchParams.set("code_challenge_method", "S256");
+  return url.toString();
+}
+
+/** What a return from the issuer carries in the address: a code with its state, an error with the
+ *  issuer's description, or nothing (an ordinary page load). */
+export type LoginReturn = { code: string; state: string } | { error: string; state: string | null } | null;
+
+export function loginReturn(search: string): LoginReturn {
+  const params = new URLSearchParams(search);
+  const state = params.get("state");
+  const error = params.get("error");
+  if (error) {
+    const description = params.get("error_description");
+    return { error: description ? `${error}: ${description}` : error, state };
+  }
+  const code = params.get("code");
+  if (code && state) return { code, state };
+  return null;
+}
+
+/** The body of the token request that exchanges the code (form-encoded, no client secret). */
+export function tokenRequestBody(opts: {
+  code: string;
+  redirectUri: string;
+  clientId: string;
+  verifier: string;
+}): string {
+  return new URLSearchParams({
+    grant_type: "authorization_code",
+    code: opts.code,
+    redirect_uri: opts.redirectUri,
+    client_id: opts.clientId,
+    code_verifier: opts.verifier,
+  }).toString();
+}
+
+/** The credential out of the token answer: the ID token. Its audience is the client id, which is
+ *  the `audience` that the JWT authenticator checks; an access token's audience and form differ
+ *  from one provider to the next. */
+export function credentialOf(answer: unknown): string | null {
+  const idToken = (answer as { id_token?: unknown } | null)?.id_token;
+  return typeof idToken === "string" && idToken.length > 0 ? idToken : null;
+}
+
+/** base64url with no padding, as PKCE and `state` use it. */
+export function base64url(bytes: Uint8Array): string {
+  let text = "";
+  for (const b of bytes) text += String.fromCharCode(b);
+  return btoa(text).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+
+/** A random value for a PKCE verifier or a `state`: 32 bytes, 43 characters. */
+export function randomValue(): string {
+  return base64url(crypto.getRandomValues(new Uint8Array(32)));
+}
+
+/** The S256 challenge of a verifier (RFC 7636): base64url(sha-256(verifier)). `crypto.subtle` is
+ *  only in a secure context, so a login needs the Console on https or on localhost. */
+export async function pkceChallenge(verifier: string): Promise<string> {
+  const digest = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(verifier));
+  return base64url(new Uint8Array(digest));
+}