76778a6 · b9cacc6
@@ -304,15 +304,40 @@
how many there are and a filter for whether they are live, each a link
carrying `?live=1` rather than a form, and **New app** beside them.
`?mode=dev` on the same URL is dev's table of repositories, unchanged.
The home keeps itself current. _Your apps_ and _on you_
are each a live region (`data-live`, `src/web/client.ts`): a deploy
serving, a pull opening, closing or merging, a run starting or ending, or an
assignment changing refetches the home — the very same `studioHome` render
that drew the first paint, never a second copy of that markup — and swaps
just that region in place, so a card that is answered goes and a new one
arrives without a reload. Events within half a second of each other cost one
fetch. A card mid-decision (its post to the crew still in flight) is never
swapped out from under the click deciding it.
The home keeps itself current. _Your apps_ and _on you_ are each a live
region (`data-live`, `src/web/client.ts`): a deploy serving, a pull
opening, closing or merging, a run starting or ending, or an assignment
changing fetches that region again — the very same render that drew the
first paint, never a second copy of that markup — and swaps it in place,
so a card that is answered goes and a new one arrives without a reload.
### Live regions
A page with a script never reloads itself: the `meta refresh` some pages
carry is the no-script fallback, and the script removes it the moment it
can stream. Every live region listens to one `EventSource` (`/events`,
everything the viewer may see) and works like this:
- **An address of its own.** A region carries `data-live-src` — `/live/apps`
  and `/live/on-you` on the home, `<repo>/app/now` for _Now_ on the app
  page, `<repo>/app/state` for its head card — and an event fetches that
  address, not the page. The fragment answers with the same element, id
  and all, rendered by the same function as the page, with its icons
  inlined (`layout.fragment`). A region without an address shares one
  fetch of the page; that is the fallback, not the design.
- **Nothing painted that did not change.** A fragment's `etag` is a hash of
  its bytes; the client sends it back as `if-none-match` and an unchanged
  region is a 304 with no body. When bytes do arrive, two renders that
  differ only in a relative time ("3m ago") are the same region.
- **One fetch per burst.** Events within a beat of each other cost one
  fetch per address, never more often than every second and a half; a
  hidden tab fetches nothing and catches up on the first look back.
- **Never out from under a hand.** A region holding a focused input, or a
  card whose post is still in flight (`data-busy`), is left alone until
  the next event.
Run logs and the crew's transcript stream line by line over their own
`?follow=1` answers; they are the streamed part of a page, not a region.
Signed out, `/` in the studio is a stranger's front door, not the dev
pitch: a shelf of the public apps actually serving — name, one line of
@@ -7,7 +7,9 @@
import type { CheckDetail } from "../core/runs.ts";
const FAIL_LINE = /^\(fail\) (.+) \[[0-9.]+m?s\]$/;
// The duration is bun's to print or not: under CI it leaves it off a test
// that took next to no time, so a name is a name with or without one.
const FAIL_LINE = /^\(fail\) (.+?)(?: \[[0-9.]+m?s\])?$/;
const PASS_COUNT = /^\s*(\d+) pass$/;
const FAIL_COUNT = /^\s*(\d+) fail$/;
@@ -104,6 +104,8 @@
import {
  takeBackSubmit,
  tellSubmit,
} from "../web/studio/actions.ts";
import { liveAppsFragment, liveOnYouFragment } from "../web/studio/home.ts";
import { appNowFragment } from "../web/studio/now.ts";
import { appStateFragment } from "../web/studio/previews.ts";
import { changesList, tellsList } from "../web/studio/lists.ts";
import { DEFAULT_MODE, isMode, modeCookie, type Mode } from "../web/mode.ts";
@@ -425,6 +427,11 @@
export function buildRouter(): Router<Handler> {
  router.add("GET", "/migrate/jobs/:job", migrationJobPage);
  // Every app on one canvas; a literal route, so it must sit above /:owner.
  router.add("GET", "/map", globalMapPage);
  // Live regions' own addresses (docs/STUDIO.md, "Live regions"): the
  // home's shelf and its "On you" card answer for themselves, so an event
  // fetches a region and not the page. Literal, above /:owner.
  router.add("GET", "/live/apps", liveAppsFragment);
  router.add("GET", "/live/on-you", liveOnYouFragment);
  router.add("GET", "/runs/:id", runRedirect);
  router.add("GET", "/settings", accountPage);
  router.add("POST", "/settings", accountUpdate);
@@ -681,6 +688,8 @@
export function buildRouter(): Router<Handler> {
  // The studio page's own live refresh: the head card and previews list,
  // bare, fetched on a deploy run event for the app being viewed.
  router.add("GET", "/:owner/:name/app/state", appStateFragment);
  // "Now" on the same page, alone: the region's own address.
  router.add("GET", "/:owner/:name/app/now", appNowFragment);
  router.add("GET", "/:owner/:name/app/:env/open", appOpen);
  // Where a private app sends a person who arrived by its link.
  router.add("GET", "/apps/open", appsOpen);
@@ -2031,20 +2031,60 @@
export const liveRegionsJs = /* js */ `
  var timer = null;
  var last = 0;
  var MIN_GAP = 1500;
  function refresh() {
    timer = null;
    // Hidden, the page waits: a tab in the background paints nothing, and
    // the first look back brings everything at once.
    if (document.hidden) return;
    var ids = Object.keys(due);
    due = {};
    if (ids.length === 0) return;
    last = Date.now();
    fetch(location.href, { headers: { accept: 'text/html' }, credentials: 'same-origin' })
      .then(function (r) { return r.ok ? r.text() : Promise.reject(r); })
  // What each address last answered with, so the next ask is conditional:
  // a region that did not change comes back 304 and paints nothing.
  var tags = {};
  // Relative times ("3m ago") drift on their own; two renders that differ
  // only there are the same region, and the clock is not a change.
  function same(a, b) {
    var t = /<time\\b[^>]*>[^<]*<\\/time>/g;
    return a.replace(t, '') === b.replace(t, '');
  }
  function swap(fresh, ids) {
    ids.forEach(function (id) {
      var mine = document.getElementById(id);
      var theirs = fresh.getElementById(id);
      if (!mine || !theirs) return;
      // A card mid-action (the big view marks it data-busy while its post
      // is in flight) is never pulled out from under the click; the next
      // matching event tries the swap again.
      if (mine.querySelector('[data-busy]')) return;
      var active = document.activeElement;
      if (active && mine.contains(active) && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA')) return;
      if (same(mine.innerHTML, theirs.innerHTML)) return;
      mine.innerHTML = theirs.innerHTML;
      Array.prototype.forEach.call(theirs.attributes, function (a) { if (a.name !== 'id') mine.setAttribute(a.name, a.value); });
      mine.dispatchEvent(new CustomEvent('forge:swapped', { bubbles: true }));
    });
  }
  // A region with an address of its own (data-live-src) answers for itself:
  // the server renders that region and nothing else, and its etag says
  // whether anything changed. Regions without one share one fetch of the
  // page, which is the fallback, not the design.
  function pull(src, ids) {
    var own = src !== location.href;
    var headers = { accept: 'text/html' };
    if (tags[src]) headers['if-none-match'] = tags[src];
    fetch(src, { headers: headers, credentials: 'same-origin' })
      .then(function (r) {
        if (r.status === 304) return null;
        if (!r.ok) return Promise.reject(r);
        var tag = r.headers.get('etag');
        if (tag) tags[src] = tag;
        return r.text();
      })
      .then(function (text) {
        // Parse a copy without the page's own style element: the swap only ever
        // reads a live region's innerHTML, never the head, and the fresh
        if (text === null) return;
        if (own) {
          // A fragment's icons come inlined (layout.fragment), so it needs
          // nothing from this page's sprite.
          var holder = document.createElement('template');
          holder.innerHTML = text;
          swap(holder.content, ids);
          return;
        }
        // Parse a copy without the page's own style element: the swap only
        // ever reads a region's innerHTML, never the head, and the fresh
        // page carries a fresh nonce the live document's CSP cannot match —
        // parsing it would log an inline-style violation for nothing.
        var fresh = new DOMParser().parseFromString(text.replace(/<(style)[^>]*>[\\s\\S]*?<\\/\\1>/gi, ''), 'text/html');
@@ -2054,26 +2094,28 @@
export const liveRegionsJs = /* js */ `
        var theirSprite = fresh.querySelector('.sprite');
        var mySprite = document.querySelector('.sprite');
        if (theirSprite && mySprite) mySprite.replaceWith(theirSprite);
        ids.forEach(function (id) {
          var mine = document.getElementById(id);
          var theirs = fresh.getElementById(id);
          if (!mine || !theirs) return;
          // A card mid-decision (asksJs marks it data-busy while its post is
          // in flight) is never pulled out from under the click that is
          // deciding it; the next matching event tries the swap again.
          if (mine.querySelector('[data-busy]')) return;
          var active = document.activeElement;
          if (active && mine.contains(active) && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA')) return;
          // Nothing to paint when nothing changed: an event about this
          // region that left its markup as it was is not a flicker.
          if (mine.innerHTML === theirs.innerHTML) return;
          mine.innerHTML = theirs.innerHTML;
          Array.prototype.forEach.call(theirs.attributes, function (a) { if (a.name !== 'id') mine.setAttribute(a.name, a.value); });
          mine.dispatchEvent(new CustomEvent('forge:swapped', { bubbles: true }));
        });
        swap(fresh, ids);
      })
      .catch(function () {});
  }
  function refresh() {
    timer = null;
    // Hidden, the page waits: a tab in the background paints nothing, and
    // the first look back brings everything at once.
    if (document.hidden) return;
    var ids = Object.keys(due);
    due = {};
    if (ids.length === 0) return;
    last = Date.now();
    var groups = {};
    ids.forEach(function (id) {
      var region = document.getElementById(id);
      if (!region) return;
      var src = region.getAttribute('data-live-src') || location.href;
      (groups[src] = groups[src] || []).push(id);
    });
    Object.keys(groups).forEach(function (src) { pull(src, groups[src]); });
  }
  var source = new EventSource('/events');
  // The stream's own state, for a page that shows whether it is connected.
  function state(s) { document.dispatchEvent(new CustomEvent('forge:live', { detail: { state: s } })); }
@@ -13,6 +13,7 @@
import type { User } from "../core/users.ts";
import type { Ctx } from "../http/context.ts";
import { edgeLoginUrl, edgeLogoutUrl } from "../http/edge.ts";
import { json } from "../http/respond.ts";
import { sha256 } from "../kernel/hash.ts";
import { secret } from "../kernel/id.ts";
import {
  metaThemeColor,
@@ -639,19 +640,32 @@
export function redirect(
 * Its icons are inlined rather than referenced: a fragment cannot count on
 * the sprite of the document it is being dropped into, and must not add ids
 * to it (`inlineIcons`, `icons.ts`).
 *
 * A fragment names its own bytes: the `etag` is a hash of the body, and a
 * request carrying it back as `if-none-match` gets a 304 and nothing to
 * paint. `cache-control: no-store` keeps the browser's own cache out of it —
 * the live client holds the tag itself and asks conditionally on purpose,
 * so an unchanged region costs one round trip and no repaint.
 */
export function fragment(body: Html, status = 200): Response {
  return new Response(inlineIcons(body.text), {
    status,
    headers: {
      "content-type": "text/html; charset=utf-8",
      "content-security-policy":
        "default-src 'none'; style-src 'none'; sandbox",
      "referrer-policy": "same-origin",
      "x-content-type-options": "nosniff",
      "cache-control": "no-store",
    },
  });
export function fragment(
  body: Html,
  o: { status?: number; request?: Request } = {},
): Response {
  const text = inlineIcons(body.text);
  const status = o.status ?? 200;
  const headers: Record<string, string> = {
    "content-type": "text/html; charset=utf-8",
    "content-security-policy": "default-src 'none'; style-src 'none'; sandbox",
    "referrer-policy": "same-origin",
    "x-content-type-options": "nosniff",
    "cache-control": "no-store",
  };
  if (status !== 200) return new Response(text, { status, headers });
  const etag = `"${sha256(text).slice(0, 16)}"`;
  headers.etag = etag;
  if (o.request?.headers.get("if-none-match") === etag)
    return new Response(null, { status: 304, headers });
  return new Response(text, { status, headers });
}
/** Redirect back to a page carrying a message — the shape most handlers want. */
@@ -229,7 +229,9 @@
export async function browseTree(ctx: Ctx): Promise<Response> {
  if (!entries.ok) return notFoundPage(ctx);
  if (ctx.url.searchParams.get("fragment") === "explorer")
    return fragment(explorerFragment(scope.base, ref, path, entries.value));
    return fragment(explorerFragment(scope.base, ref, path, entries.value), {
      request: ctx.request,
    });
  const [refs, explorer] = await Promise.all([
    refSetFrom(scope.source),
@@ -266,7 +268,8 @@
export async function browseBlob(ctx: Ctx): Promise<Response> {
    blob: blob.value,
    view: blobView(ctx.url.searchParams.get("view")),
  });
  if (ctx.url.searchParams.get("fragment") === "1") return fragment(pane);
  if (ctx.url.searchParams.get("fragment") === "1")
    return fragment(pane, { request: ctx.request });
  const explorer = await loadExplorer(scope.source, ref, path, true);
  return codePage(ctx, scope, {
@@ -979,13 +979,15 @@
export async function deleteFileSubmit(ctx: Ctx): Promise<Response> {
 */
export async function previewSubmit(ctx: Ctx): Promise<Response> {
  const repo = loadRepo(ctx);
  if (!repo) return fragment(html``, 404);
  if (!repo) return fragment(html``, { status: 404 });
  const form = await readForm(ctx);
  if (form instanceof Response) return form;
  const scope = localScope(ctx, repo);
  if (!scope.caps.write) return fragment(html``, 404);
  if (!scope.caps.write) return fragment(html``, { status: 404 });
  const body = formValue(form, "body");
  const path = formValue(form, "path");
  const markdown = path === "" || /\.(md|markdown)$/i.test(path);
  return fragment(markdown ? renderMarkdown(body) : html`<pre>${body}</pre>`);
  return fragment(markdown ? renderMarkdown(body) : html`<pre>${body}</pre>`, {
    request: ctx.request,
  });
}
@@ -1021,7 +1021,9 @@
export async function treePage(ctx: Ctx): Promise<Response> {
  // The explorer's lazy expansion asks for exactly one directory.
  if (ctx.url.searchParams.get("fragment") === "explorer")
    return fragment(explorerFragment(scope.base, ref, path, entries.value));
    return fragment(explorerFragment(scope.base, ref, path, entries.value), {
      request: ctx.request,
    });
  const [refs, explorer] = await Promise.all([
    refSetFrom(scope.source),
@@ -1063,7 +1065,8 @@
export async function blobPage(ctx: Ctx): Promise<Response> {
  // The preview a script drops into the pane beside the explorer. Same
  // renderer, same markup — a preview and a real page load are the same file.
  if (ctx.url.searchParams.get("fragment") === "1") return fragment(pane);
  if (ctx.url.searchParams.get("fragment") === "1")
    return fragment(pane, { request: ctx.request });
  const explorer = await loadExplorer(scope.source, ref, path, true);
  const filename = path.split("/").pop() ?? path;
@@ -12,26 +12,16 @@
import { appsRuntime } from "../../apps/runtime.ts";
import { listCrewRoles } from "../../core/agents.ts";
import type { AppRecord } from "../../core/apps.ts";
import { decisionStats, type DecisionStat } from "../../core/decisions.ts";
import { getIssueById, listIssues, type Issue } from "../../core/issues.ts";
import {
  listPulls,
  mergedPullCount,
  openPullsClosing,
} from "../../core/pulls.ts";
import { listPulls, mergedPullCount } from "../../core/pulls.ts";
import { canSeeOwnerFacts, type Repo } from "../../core/repos.ts";
import {
  agentRunTotals,
  latestRunsForIssues,
  listRuns,
  previewLatency,
  type PreviewLatency,
  type Run,
} from "../../core/runs.ts";
import { getUsersByIds } from "../../core/users.ts";
import { autonomyStatus } from "../../crew/autonomy.ts";
import { repoDir } from "../../git/repos.ts";
import type { Ctx } from "../../http/context.ts";
import { readRunLogTail } from "../../runs/log.ts";
import { crumbsFor, repoBase, repoHeader, repoPalette } from "../chrome.ts";
import { appTailJs, liveRegionsJs } from "../client.ts";
import { html, when, type Html } from "../html.ts";
@@ -47,19 +37,10 @@
import {
  time,
  userTag,
} from "../ui.ts";
import { changeHref, changesHref, tellHref, tellsHref } from "./nouns.ts";
import { LOG_TAIL_CAP, logBox } from "./log.ts";
import { changesHref, tellsHref } from "./nouns.ts";
import { nowCard, nowRegion } from "./now.ts";
import { appPanels } from "./previews.ts";
import { stopForm } from "./run.ts";
import { tellWord } from "./tell.ts";
import { voiceFor, type Actor } from "./voice.ts";
import {
  pullWord,
  runWord,
  servingHistory,
  wordBadge,
  type WordCtx,
} from "./words.ts";
import { servingHistory, type WordCtx } from "./words.ts";
/**
 * The week's decisions in one line: how many, how many the decider took
@@ -219,17 +200,6 @@
export async function studioApp(
  };
  const crew = listCrewRoles(db, repo.id);
  const builders = crew.filter((c) => c.role === "builder").map((c) => c.agent);
  const runs = listRuns(db, repo.id, { kind: "agent", limit: 8 });
  const actors = getUsersByIds(
    db,
    runs.map((r) => r.actorId).filter((id): id is string => id !== null),
  );
  const issues = new Map<string, Issue>();
  for (const r of runs)
    if (r.issueId !== null && !issues.has(r.issueId)) {
      const i = getIssueById(db, r.issueId);
      if (i) issues.set(r.issueId, i);
    }
  const openPulls = listPulls(db, repo.id, { state: "open", limit: 10 });
  const week = new Date(Date.now() - 7 * 24 * 60 * 60_000).toISOString();
  // What landed this week, counted by the database like the runs and the
@@ -313,222 +283,15 @@
export async function studioApp(
        </div>
      </form>`;
  // ---- now: one row per thing, in the five words ----
  const proposed = new Set(openPulls.map((p) => p.id));
  const openByIssue = openPullsClosing(db, repo.id);
  const openTells = listIssues(db, repo.id, {
    kind: "issue",
    state: "open",
    limit: 30,
  // ---- now: one row per thing, in the five words (studio/now.ts) ----
  const { card: now, running } = await nowCard(ctx, repo, record, {
    openPulls,
    builderCount: builders.length,
    ownerFacts,
    wordCtx,
    deployTailing,
  });
  const told = openTells.filter(
    (i) => i.assigneeIsAgent && !openByIssue.has(i.number),
  );
  // A person can hold a tell exactly as an agent can — #224's own rule for
  // a change applies here too: the front door counts work by what it is,
  // not by who is doing it. Scoped to `assigneeId`, never widened to every
  // open tell, so an ordinary unassigned backlog still stays off this
  // panel.
  const personHeld = openTells.filter(
    (i) =>
      i.assigneeId !== null &&
      !i.assigneeIsAgent &&
      i.id !== repo.directionIssueId &&
      !openByIssue.has(i.number),
  );
  // With nobody on the crew to build, `tellCrew` cannot route a tell to
  // anyone — it stays unassigned forever, not merely unpicked-up like
  // `waiting` below. Scoped to that one honest cause (never to a tell a
  // person simply hasn't assigned while builders exist), so widening this
  // never turns "Now" into a plain issue list.
  const untaken =
    builders.length === 0
      ? openTells
          .filter(
            (i) =>
              i.assigneeId === null &&
              i.id !== repo.directionIssueId &&
              !openByIssue.has(i.number),
          )
          .slice(0, 5)
      : [];
  const everRan = latestRunsForIssues(
    db,
    [...told, ...personHeld, ...untaken].map((i) => i.id),
    ["agent"],
  );
  const waiting = told.filter((i) => !everRan.has(i.id)).slice(0, 5);
  const held = personHeld.filter((i) => !everRan.has(i.id)).slice(0, 5);
  const stuck = untaken.filter((i) => !everRan.has(i.id));
  const issueNumberById = new Map(
    [...told, ...personHeld, ...untaken].map((i) => [i.id, i.number]),
  );
  const rowsNow = runs
    .filter((r) => {
      if (r.issueId === null) return true;
      if (proposed.has(r.issueId)) return false;
      const n = issueNumberById.get(r.issueId) ?? issues.get(r.issueId)?.number;
      return n === undefined || !openByIssue.has(n);
    })
    .filter(
      (r, idx, all) => all.findIndex((x) => x.issueId === r.issueId) === idx,
    )
    .slice(0, 6);
  // Who signs a "Now" row is the one rule for it, `voiceFor`
  // (`studio/voice.ts`): a person is named to anyone who can see the row —
  // the same name `/changes` and the change's own page give — and only the
  // crew's own work reads as the app's own story for a viewer who cannot
  // see the roster. The avatar takes the same string, so its initials can
  // never disagree with the name beside them.
  const runActor = (r: Run): Actor => ({
    name: r.actorId === null ? undefined : actors.get(r.actorId)?.username,
    // A run with nobody on it is the crew's own, never a person's.
    isAgent: r.actorId === null || actors.get(r.actorId)?.kind === "agent",
  });
  // The one run actually going, if any: its row gets a tail of its own
  // log — the last handful of lines, streamed live — beside it. Only one,
  // so the page never opens a stream per row.
  const activeRun = rowsNow.find(
    (r) => r.kind === "agent" && r.state === "running",
  );
  const activeTail = activeRun
    ? logBox({
        id: "app-run-tail",
        who: voiceFor(runActor(activeRun), ownerFacts),
        cap: LOG_TAIL_CAP,
        lines: readRunLogTail(
          ctx.app.config.dataDir,
          activeRun.id,
          LOG_TAIL_CAP,
        ).lines,
        stream: `/api/v1/repos/${repo.ownerName}/${repo.name}/runs/${activeRun.id}/log?follow=1`,
        className: "log-tail",
      })
    : undefined;
  const runRows: Html[] = [];
  for (const r of rowsNow) {
    const { word, note } = await runWord(wordCtx, r);
    const who = voiceFor(runActor(r), ownerFacts);
    const about = r.issueId === null ? undefined : issues.get(r.issueId);
    const stop = stopForm(ctx, repo, r);
    runRows.push(
      row({
        ...(stop ? {} : { href: `${base}/runs/${r.id}`, nav: true }),
        lead: avatar(who),
        title: stop
          ? html`<a href="${base}/runs/${r.id}">${about?.title ?? note}</a>`
          : (about?.title ?? note),
        meta: html`${who} · ${word === "working" ? "working now" : note}
        ${word === "working"
          ? null
          : html` · ${time(r.finishedAt ?? r.createdAt)}`}`,
        trail: stop
          ? html`<span class="studio-ask-actions"
              >${wordBadge(word)} ${stop}</span
            >`
          : wordBadge(word),
      }),
    );
    if (activeTail !== undefined && r.id === activeRun?.id)
      runRows.push(html`<li class="log-tail-row">${activeTail}</li>`);
  }
  const nowRows: Html[] = [
    ...(await Promise.all(
      openPulls.map(async (p) => {
        const { word, note } = await pullWord(wordCtx, p);
        const who = voiceFor(
          { name: p.authorName, isAgent: p.authorIsAgent },
          ownerFacts,
        );
        return row({
          href: changeHref(base, p.number),
          nav: true,
          lead: avatar(who),
          title: p.title,
          meta: html`${who} · ${note} · ${time(p.createdAt)}`,
          trail: wordBadge(word),
        });
      }),
    )),
    ...runRows,
    ...waiting.map((i) => {
      const who = voiceFor(
        { name: i.assigneeName ?? undefined, isAgent: i.assigneeIsAgent },
        ownerFacts,
      );
      return row({
        href: tellHref(base, i.number),
        nav: true,
        lead: avatar(who),
        title: i.title,
        meta: html`${who} · told ${time(i.createdAt)}, not picked up yet`,
        trail: wordBadge("waiting"),
      });
    }),
    // Held by a person: `tellWord` — the one place a tell's word is
    // decided (`studio/tell.ts`) — says so honestly, the same word and
    // note the tell's own page and "Everything told" already show for it.
    // `personHeld` has already established the holder is a person, so
    // `voiceFor` names them to every viewer who can see the row.
    ...(await Promise.all(
      held.map(async (i) => {
        const { word, note } = (await tellWord(
          wordCtx,
          repo,
          i,
          undefined,
        )) ?? {
          word: "told" as const,
          note: "held",
        };
        const who = voiceFor(
          { name: i.assigneeName ?? undefined, isAgent: false },
          ownerFacts,
          "someone",
        );
        return row({
          href: tellHref(base, i.number),
          nav: true,
          lead: avatar(who),
          title: i.title,
          meta: html`${who} · ${note} · ${time(i.createdAt)}`,
          trail: wordBadge(word),
        });
      }),
    )),
    ...stuck.map((i) => {
      return row({
        lead: avatar("crew"),
        title: html`<a href="${tellHref(base, i.number)}">${i.title}</a>`,
        meta: html`told ${time(i.createdAt)} ·
          <span class="muted">nobody on the crew to take it —</span>
          <a href="${base}/settings">add someone</a>`,
        trail: wordBadge("told"),
      });
    }),
  ];
  const now =
    nowRows.length === 0
      ? card(
          html`<p class="muted small">
            ${deployTailing
              ? "Production is coming up — the log above has it."
              : "Nothing yet. Tell the crew something."}
          </p>`,
          {
            head: html`${icon("activity")}
              <h2>Now</h2>`,
          },
        )
      : listCard(nowRows, {
          head: html`${icon("activity")}
            <h2>Now</h2>
            <span class="spacer"></span>
            ${btn("Every run", { href: `${base}/runs`, size: "sm" })}`,
        });
  // ---- the rail ----
  // Crew, spend and autonomy are the owner's facts; a viewer who cannot
@@ -659,13 +422,7 @@
export async function studioApp(
      <div class="dash-main stack">
        ${tell}
        <div id="app-previews">${previews}</div>
        <div
          id="live-now"
          data-live="run.*,pull.*,issue.*"
          data-live-repo="${repo.ownerName}/${repo.name}"
        >
          ${now}
        </div>
        ${nowRegion(repo, now)}
      </div>
      <aside class="dash-rail stack">
        ${crewCard} ${weekCard} ${ownCard} ${more}
@@ -682,6 +439,6 @@
export async function studioApp(
    // The no-script half of the tail: while the crew's run goes, the page
    // refreshes itself, the way the run's own page does; the script above
    // removes this the moment it can stream lines instead.
    ...(activeRun || tailing ? { refresh: { seconds: 5 } } : {}),
    ...(running || tailing ? { refresh: { seconds: 5 } } : {}),
  });
}
@@ -7,14 +7,14 @@
 * apps grow.
 */
import { appsRuntime } from "../../apps/runtime.ts";
import { crewForRepos } from "../../core/agents.ts";
import type { Repo } from "../../core/repos.ts";
import { type User } from "../../core/users.ts";
import { isPausedAtCeiling, spentTodayForRepos } from "../../crew/autonomy.ts";
import type { Ctx } from "../../http/context.ts";
import { liveRegionsJs } from "../client.ts";
import { html, when } from "../html.ts";
import { page } from "../layout.ts";
import { html, when, type Html } from "../html.ts";
import { fragment, page } from "../layout.ts";
import { liveClientJs } from "../live.ts";
import { btn, empty, icon, listCard, row } from "../ui.ts";
import { onYouCard } from "../pages/site.ts";
@@ -28,23 +28,91 @@
import { servingHistory } from "./words.ts";
 * what a person put on you. Built from the same rows and cards as the rest
 * of the forge, so it reads as the forge.
 */
export async function studioHome(ctx: Ctx, user: User): Promise<Response> {
  const db = ctx.app.db;
  // The front door leads with what the viewer can write — their own apps
  // and their organisations' — never widened by a stranger's public app
  // (`writableAppsOf`, not the visibility every reader gets from `appsOf`).
  const { repos: appRepos, records } = writableAppsOf(ctx, user);
  const runtime = appsRuntime(ctx.app);
/** The events that can change a row on the shelf. */
const APPS_LIVE =
  "app.serving,app.stopped,run.queued,run.started,run.finished,pull.opened,pull.closed,pull.merged";
/** The events that can change what is on you. */
const ON_YOU_LIVE =
  "issue.assigned,pull.assigned,issue.closed,pull.closed,issue.reopened,pull.reopened,pull.merged";
/**
 * The shelf: every app the viewer can write, one row each. The front door
 * leads with what the viewer can write — their own apps and their
 * organisations' — never widened by a stranger's public app
 * (`writableAppsOf`, not the visibility every reader gets from `appsOf`).
 */
async function shelf(
  ctx: Ctx,
  user: User,
): Promise<{ appRepos: readonly Repo[]; apps: Html }> {
  const { repos: appRepos } = writableAppsOf(ctx, user);
  // Read once, shown twice again: a shipped or failed deploy is a row's own
  // word, and — when nothing is running and no change waits — the rail's.
  const productionFacts = productionFactsForRepos(ctx, appRepos);
  // One memo of production's history for every word on this page: the
  // shelf's rows and the Now list below ask it once per repository.
  // shelf's rows ask it once per repository.
  const history = servingHistory();
  const appRows = await shelfRows(ctx, appRepos, {
    productionFacts,
    history,
  });
  const apps =
    appRows.length === 0
      ? empty({
          icon: "rocket",
          title: "No apps yet",
          note: "Make one, tell the crew what it is, and watch it come up.",
          action: btn("New app", { href: "/apps/new", variant: "primary" }),
        })
      : listCard(appRows, {
          head: html`${icon("rocket")}
            <h2>Your apps</h2>
            <span class="spacer"></span>
            ${btn("Map", { href: "/map", size: "sm", icon: "map" })}
            ${btn("Audit", { href: "/audit", size: "sm", icon: "shield" })}
            ${btn("Board", { href: "/board", size: "sm", icon: "activity" })}
            ${btn("New app", { href: "/apps/new", size: "sm", icon: "plus" })}`,
        });
  return { appRepos, apps };
}
/**
 * Each live region on the home has an address of its own (`data-live-src`),
 * so an event fetches that region — the shelf, or what is on you — and not
 * the page; the fragment answers with the same element, id and all.
 */
const appsRegion = (apps: Html): Html =>
  html`<div id="live-apps" data-live="${APPS_LIVE}" data-live-src="/live/apps">
    ${apps}
  </div>`;
const onYouRegion = (ctx: Ctx, user: User): Html =>
  html`<div
    id="live-on-you"
    data-live="${ON_YOU_LIVE}"
    data-live-src="/live/on-you"
  >
    ${onYouCard(ctx, user) ?? null}
  </div>`;
// GET /live/apps — the shelf alone, for the region that shows it.
export async function liveAppsFragment(ctx: Ctx): Promise<Response> {
  const user = ctx.auth.user;
  if (!user) return fragment(html``, { status: 404 });
  const { apps } = await shelf(ctx, user);
  return fragment(appsRegion(apps), { request: ctx.request });
}
// GET /live/on-you — what is on the viewer, alone.
export function liveOnYouFragment(ctx: Ctx): Response {
  const user = ctx.auth.user;
  if (!user) return fragment(html``, { status: 404 });
  return fragment(onYouRegion(ctx, user), { request: ctx.request });
}
export async function studioHome(ctx: Ctx, user: User): Promise<Response> {
  const db = ctx.app.db;
  const { appRepos, apps } = await shelf(ctx, user);
  // What the crew cost today across every app on the shelf, and how many
  // are paused at their ceiling right now — the owner's first question at
@@ -75,42 +143,14 @@
export async function studioHome(ctx: Ctx, user: User): Promise<Response> {
    </p>`;
  });
  const apps =
    appRows.length === 0
      ? empty({
          icon: "rocket",
          title: "No apps yet",
          note: "Make one, tell the crew what it is, and watch it come up.",
          action: btn("New app", { href: "/apps/new", variant: "primary" }),
        })
      : listCard(appRows, {
          head: html`${icon("rocket")}
            <h2>Your apps</h2>
            <span class="spacer"></span>
            ${btn("Map", { href: "/map", size: "sm", icon: "map" })}
            ${btn("Audit", { href: "/audit", size: "sm", icon: "shield" })}
            ${btn("Board", { href: "/board", size: "sm", icon: "activity" })}
            ${btn("New app", { href: "/apps/new", size: "sm", icon: "plus" })}`,
        });
  const body = html`<h1 class="sr-only">Studio</h1>
    ${costLine}
    <div class="dash">
      <div class="dash-main stack">
        <div
          id="live-apps"
          data-live="app.serving,app.stopped,run.queued,run.started,run.finished,pull.opened,pull.closed,pull.merged"
        >
          ${apps}
        </div>
        ${appsRegion(apps)}
      </div>
      <aside class="dash-rail stack">
        <div
          id="live-on-you"
          data-live="issue.assigned,pull.assigned,issue.closed,pull.closed,issue.reopened,pull.reopened,pull.merged"
        >
          ${onYouCard(ctx, user) ?? null}
        </div>
        ${onYouRegion(ctx, user)}
      </aside>
    </div>`;
  return page({
@@ -0,0 +1,329 @@
/**
 * Now — one row per thing going on in an app, in the five words: the open
 * changes, the crew's runs, and the tells nobody has picked up yet. It is
 * one live region on the app page (`#live-now`) with an address of its own
 * (`GET /:owner/:name/app/now`), so a live event fetches this card and
 * nothing else — and a card that did not change comes back as a 304, not
 * a repaint (`layout.fragment`, `client.liveRegionsJs`).
 */
import { appsRuntime } from "../../apps/runtime.ts";
import { listCrewRoles } from "../../core/agents.ts";
import { getAppByRepo, type AppRecord } from "../../core/apps.ts";
import { getIssueById, listIssues, type Issue } from "../../core/issues.ts";
import { listPulls, openPullsClosing, type Pull } from "../../core/pulls.ts";
import { canSeeOwnerFacts, type Repo } from "../../core/repos.ts";
import { latestRunsForIssues, listRuns, type Run } from "../../core/runs.ts";
import { getUsersByIds } from "../../core/users.ts";
import { repoDir } from "../../git/repos.ts";
import type { Ctx } from "../../http/context.ts";
import { readRunLogTail } from "../../runs/log.ts";
import { loadRepo, repoBase } from "../chrome.ts";
import { html, type Html } from "../html.ts";
import { fragment } from "../layout.ts";
import { avatar, btn, card, icon, listCard, row, time } from "../ui.ts";
import { changeHref, tellHref } from "./nouns.ts";
import { LOG_TAIL_CAP, logBox } from "./log.ts";
import { appPanels } from "./previews.ts";
import { stopForm } from "./run.ts";
import { tellWord } from "./tell.ts";
import { voiceFor, type Actor } from "./voice.ts";
import {
  pullWord,
  runWord,
  servingHistory,
  wordBadge,
  type WordCtx,
} from "./words.ts";
/** The events that can change what Now says. */
export const NOW_LIVE = "run.*,pull.*,issue.*";
/**
 * The card in its live region: the kinds it listens for, the repository
 * they must be about, and its own address. The fragment answers with this
 * same element, so the client swaps like for like.
 */
export function nowRegion(repo: Repo, now: Html): Html {
  return html`<div
    id="live-now"
    data-live="${NOW_LIVE}"
    data-live-repo="${repo.ownerName}/${repo.name}"
    data-live-src="${repoBase(repo)}/app/now"
  >
    ${now}
  </div>`;
}
export async function nowCard(
  ctx: Ctx,
  repo: Repo,
  record: AppRecord,
  o: {
    openPulls: readonly Pull[];
    /** How many builders the crew has: none, and an untaken tell is stuck. */
    builderCount: number;
    ownerFacts: boolean;
    wordCtx: WordCtx;
    /** Whether the head card is tailing production's own deploy. */
    deployTailing: boolean;
  },
): Promise<{ card: Html; running: boolean }> {
  const db = ctx.app.db;
  const base = repoBase(repo);
  const { openPulls, builderCount, ownerFacts, wordCtx, deployTailing } = o;
  const runs = listRuns(db, repo.id, { kind: "agent", limit: 8 });
  const actors = getUsersByIds(
    db,
    runs.map((r) => r.actorId).filter((id): id is string => id !== null),
  );
  const issues = new Map<string, Issue>();
  for (const r of runs)
    if (r.issueId !== null && !issues.has(r.issueId)) {
      const i = getIssueById(db, r.issueId);
      if (i) issues.set(r.issueId, i);
    }
  const proposed = new Set(openPulls.map((p) => p.id));
  const openByIssue = openPullsClosing(db, repo.id);
  const openTells = listIssues(db, repo.id, {
    kind: "issue",
    state: "open",
    limit: 30,
  });
  const told = openTells.filter(
    (i) => i.assigneeIsAgent && !openByIssue.has(i.number),
  );
  // A person can hold a tell exactly as an agent can — #224's own rule for
  // a change applies here too: the front door counts work by what it is,
  // not by who is doing it. Scoped to `assigneeId`, never widened to every
  // open tell, so an ordinary unassigned backlog still stays off this
  // panel.
  const personHeld = openTells.filter(
    (i) =>
      i.assigneeId !== null &&
      !i.assigneeIsAgent &&
      i.id !== repo.directionIssueId &&
      !openByIssue.has(i.number),
  );
  // With nobody on the crew to build, `tellCrew` cannot route a tell to
  // anyone — it stays unassigned forever, not merely unpicked-up like
  // `waiting` below. Scoped to that one honest cause (never to a tell a
  // person simply hasn't assigned while builders exist), so widening this
  // never turns "Now" into a plain issue list.
  const untaken =
    builderCount === 0
      ? openTells
          .filter(
            (i) =>
              i.assigneeId === null &&
              i.id !== repo.directionIssueId &&
              !openByIssue.has(i.number),
          )
          .slice(0, 5)
      : [];
  const everRan = latestRunsForIssues(
    db,
    [...told, ...personHeld, ...untaken].map((i) => i.id),
    ["agent"],
  );
  const waiting = told.filter((i) => !everRan.has(i.id)).slice(0, 5);
  const held = personHeld.filter((i) => !everRan.has(i.id)).slice(0, 5);
  const stuck = untaken.filter((i) => !everRan.has(i.id));
  const issueNumberById = new Map(
    [...told, ...personHeld, ...untaken].map((i) => [i.id, i.number]),
  );
  const rowsNow = runs
    .filter((r) => {
      if (r.issueId === null) return true;
      if (proposed.has(r.issueId)) return false;
      const n = issueNumberById.get(r.issueId) ?? issues.get(r.issueId)?.number;
      return n === undefined || !openByIssue.has(n);
    })
    .filter(
      (r, idx, all) => all.findIndex((x) => x.issueId === r.issueId) === idx,
    )
    .slice(0, 6);
  // Who signs a "Now" row is the one rule for it, `voiceFor`
  // (`studio/voice.ts`): a person is named to anyone who can see the row —
  // the same name `/changes` and the change's own page give — and only the
  // crew's own work reads as the app's own story for a viewer who cannot
  // see the roster. The avatar takes the same string, so its initials can
  // never disagree with the name beside them.
  const runActor = (r: Run): Actor => ({
    name: r.actorId === null ? undefined : actors.get(r.actorId)?.username,
    // A run with nobody on it is the crew's own, never a person's.
    isAgent: r.actorId === null || actors.get(r.actorId)?.kind === "agent",
  });
  // The one run actually going, if any: its row gets a tail of its own
  // log — the last handful of lines, streamed live — beside it. Only one,
  // so the page never opens a stream per row.
  const activeRun = rowsNow.find(
    (r) => r.kind === "agent" && r.state === "running",
  );
  const activeTail = activeRun
    ? logBox({
        id: "app-run-tail",
        who: voiceFor(runActor(activeRun), ownerFacts),
        cap: LOG_TAIL_CAP,
        lines: readRunLogTail(
          ctx.app.config.dataDir,
          activeRun.id,
          LOG_TAIL_CAP,
        ).lines,
        stream: `/api/v1/repos/${repo.ownerName}/${repo.name}/runs/${activeRun.id}/log?follow=1`,
        className: "log-tail",
      })
    : undefined;
  const runRows: Html[] = [];
  for (const r of rowsNow) {
    const { word, note } = await runWord(wordCtx, r);
    const who = voiceFor(runActor(r), ownerFacts);
    const about = r.issueId === null ? undefined : issues.get(r.issueId);
    const stop = stopForm(ctx, repo, r);
    runRows.push(
      row({
        ...(stop ? {} : { href: `${base}/runs/${r.id}`, nav: true }),
        lead: avatar(who),
        title: stop
          ? html`<a href="${base}/runs/${r.id}">${about?.title ?? note}</a>`
          : (about?.title ?? note),
        meta: html`${who} · ${word === "working" ? "working now" : note}
        ${word === "working"
          ? null
          : html` · ${time(r.finishedAt ?? r.createdAt)}`}`,
        trail: stop
          ? html`<span class="studio-ask-actions"
              >${wordBadge(word)} ${stop}</span
            >`
          : wordBadge(word),
      }),
    );
    if (activeTail !== undefined && r.id === activeRun?.id)
      runRows.push(html`<li class="log-tail-row">${activeTail}</li>`);
  }
  const nowRows: Html[] = [
    ...(await Promise.all(
      openPulls.map(async (p) => {
        const { word, note } = await pullWord(wordCtx, p);
        const who = voiceFor(
          { name: p.authorName, isAgent: p.authorIsAgent },
          ownerFacts,
        );
        return row({
          href: changeHref(base, p.number),
          nav: true,
          lead: avatar(who),
          title: p.title,
          meta: html`${who} · ${note} · ${time(p.createdAt)}`,
          trail: wordBadge(word),
        });
      }),
    )),
    ...runRows,
    ...waiting.map((i) => {
      const who = voiceFor(
        { name: i.assigneeName ?? undefined, isAgent: i.assigneeIsAgent },
        ownerFacts,
      );
      return row({
        href: tellHref(base, i.number),
        nav: true,
        lead: avatar(who),
        title: i.title,
        meta: html`${who} · told ${time(i.createdAt)}, not picked up yet`,
        trail: wordBadge("waiting"),
      });
    }),
    // Held by a person: `tellWord` — the one place a tell's word is
    // decided (`studio/tell.ts`) — says so honestly, the same word and
    // note the tell's own page and "Everything told" already show for it.
    // `personHeld` has already established the holder is a person, so
    // `voiceFor` names them to every viewer who can see the row.
    ...(await Promise.all(
      held.map(async (i) => {
        const { word, note } = (await tellWord(
          wordCtx,
          repo,
          i,
          undefined,
        )) ?? {
          word: "told" as const,
          note: "held",
        };
        const who = voiceFor(
          { name: i.assigneeName ?? undefined, isAgent: false },
          ownerFacts,
          "someone",
        );
        return row({
          href: tellHref(base, i.number),
          nav: true,
          lead: avatar(who),
          title: i.title,
          meta: html`${who} · ${note} · ${time(i.createdAt)}`,
          trail: wordBadge(word),
        });
      }),
    )),
    ...stuck.map((i) => {
      return row({
        lead: avatar("crew"),
        title: html`<a href="${tellHref(base, i.number)}">${i.title}</a>`,
        meta: html`told ${time(i.createdAt)} ·
          <span class="muted">nobody on the crew to take it —</span>
          <a href="${base}/settings">add someone</a>`,
        trail: wordBadge("told"),
      });
    }),
  ];
  const now =
    nowRows.length === 0
      ? card(
          html`<p class="muted small">
            ${deployTailing
              ? "Production is coming up — the log above has it."
              : "Nothing yet. Tell the crew something."}
          </p>`,
          {
            head: html`${icon("activity")}
              <h2>Now</h2>`,
          },
        )
      : listCard(nowRows, {
          head: html`${icon("activity")}
            <h2>Now</h2>
            <span class="spacer"></span>
            ${btn("Every run", { href: `${base}/runs`, size: "sm" })}`,
        });
  return { card: now, running: activeRun !== undefined };
}
// GET /:owner/:name/app/now — the card alone, for the region that shows it.
export async function appNowFragment(ctx: Ctx): Promise<Response> {
  const repo = loadRepo(ctx);
  if (!repo) return fragment(html``, { status: 404 });
  const db = ctx.app.db;
  const record = getAppByRepo(db, repo.id);
  if (!record) return fragment(html``, { status: 404 });
  const openPulls = listPulls(db, repo.id, { state: "open", limit: 10 });
  const { card } = await nowCard(ctx, repo, record, {
    openPulls,
    builderCount: listCrewRoles(db, repo.id).filter((c) => c.role === "builder")
      .length,
    ownerFacts: canSeeOwnerFacts(db, repo, ctx.auth.user),
    wordCtx: {
      db,
      dir: repoDir(ctx.app.reposRoot, repo.ownerName, repo.name),
      runtime: appsRuntime(ctx.app),
      record,
      history: servingHistory(),
    },
    // The one fact Now borrows from the head card, decided where the head
    // card decides it, so the two never disagree about what is tailing.
    deployTailing: appPanels(ctx, repo, record, openPulls).deployTailing,
  });
  return fragment(nowRegion(repo, card), { request: ctx.request });
}
@@ -306,14 +306,14 @@
export function appPanels(
 */
export function appStateFragment(ctx: Ctx): Response {
  const repo = loadRepo(ctx);
  if (!repo) return fragment(html``, 404);
  if (!repo) return fragment(html``, { status: 404 });
  const record = getAppByRepo(ctx.app.db, repo.id);
  if (!record) return fragment(html``, 404);
  if (!record) return fragment(html``, { status: 404 });
  const openPulls = listPulls(ctx.app.db, repo.id, {
    state: "open",
    limit: 10,
  });
  const { head, previews } = appPanels(ctx, repo, record, openPulls);
  return fragment(html`<div id="app-head">${head}</div>
    <div id="app-previews">${previews}</div>`);
    <div id="app-previews">${previews}</div>`, { request: ctx.request });
}
@@ -65,6 +65,22 @@
describe("parseBunTestFailure: a convenience over one known runner, not a genera
    ]);
  });
  test("a failing test bun printed without a duration — as it does under CI for one that took no time — is still named", () => {
    const lines = [
      "(pass) a passing test",
      "(fail) first failing test [0.10ms]",
      "(fail) second failing test",
      " 1 pass",
      " 2 fail",
      "Ran 3 tests across 1 file. [9.00ms]",
    ];
    expect(parseBunTestFailure(lines)).toEqual({
      passed: 1,
      failed: 2,
      names: ["first failing test", "second failing test"],
    });
  });
  test("output that is not bun test's own shape is not guessed at", () => {
    expect(
      parseBunTestFailure(["$ test -f NOPE.md", "test: NOPE.md: No such file or directory"]),
@@ -2048,6 +2048,34 @@
describe("the studio home keeps itself current", () => {
    expect(home).toContain("Write the README");
  });
  test("each region on the home has an address of its own, answering with that region alone and 304 when it has not changed", async () => {
    const page = await (await get()).text();
    expect(page).toContain('data-live-src="/live/apps"');
    expect(page).toContain('data-live-src="/live/on-you"');
    const headers = { cookie: `${cookie}; forge_mode=studio` };
    const apps = await fetch(`${base}/live/apps`, { headers });
    expect(apps.status).toBe(200);
    const appsText = await apps.text();
    expect(appsText).toContain('id="live-apps"');
    expect(appsText).toContain(`${repo.name}`);
    expect(appsText).not.toContain("<html");
    const tag = apps.headers.get("etag");
    expect(tag).toMatch(/^"[0-9a-f]{16}"$/);
    const unchanged = await fetch(`${base}/live/apps`, {
      headers: { ...headers, "if-none-match": tag! },
    });
    expect(unchanged.status).toBe(304);
    const onYou = await fetch(`${base}/live/on-you`, { headers });
    expect(onYou.status).toBe(200);
    expect(await onYou.text()).toContain('id="live-on-you"');
    // Signed out, the regions are nobody's.
    expect((await fetch(`${base}/live/apps`)).status).toBe(404);
    expect((await fetch(`${base}/live/on-you`)).status).toBe(404);
  });
  test("a signed-out request gets a signed-out home: no per-viewer live regions, nothing of alice's", async () => {
    const res = await fetch(`${base}/`, {
      headers: { cookie: "forge_mode=studio" },
@@ -2643,6 +2671,45 @@
describe("the app's live fragment: /:owner/:name/app/state", () => {
    expect(refusedPage.status).toBe(404);
  });
  test("Now has an address of its own: the page's region names it, the fragment answers with the same region, and unchanged bytes come back 304", async () => {
    const page = await (await get("/alice/vault", owner)).text();
    expect(page).toContain('id="live-now"');
    expect(page).toContain('data-live-src="/alice/vault/app/now"');
    const first = await get("/alice/vault/app/now", owner);
    expect(first.status).toBe(200);
    expect(first.headers.get("x-content-type-options")).toBe("nosniff");
    expect(first.headers.get("cache-control")).toBe("no-store");
    const etag = first.headers.get("etag");
    expect(etag).toMatch(/^"[0-9a-f]{16}"$/);
    const text = await first.text();
    expect(text).toContain('id="live-now"');
    expect(text).toContain('data-live="run.*,pull.*,issue.*"');
    expect(text).toContain('data-live-src="/alice/vault/app/now"');
    expect(text).toContain("<h2>Now</h2>");
    // The same bytes again: nothing to paint, and nothing sent to paint.
    const again = await fetch(`${base}/alice/vault/app/now`, {
      headers: {
        cookie: `${owner}; forge_mode=studio`,
        "if-none-match": etag!,
      },
    });
    expect(again.status).toBe(304);
    expect(again.headers.get("etag")).toBe(etag);
    expect(await again.text()).toBe("");
    // A stale tag is answered in full.
    const stale = await fetch(`${base}/alice/vault/app/now`, {
      headers: { cookie: `${owner}; forge_mode=studio`, "if-none-match": '"0"' },
    });
    expect(stale.status).toBe(200);
    expect(await stale.text()).toContain("<h2>Now</h2>");
    expect((await get("/alice/vault/app/now", stranger)).status).toBe(404);
    expect((await fetch(`${base}/alice/vault/app/now`)).status).toBe(404);
  });
  test("a preview flips from deploying to live between two calls, and the link stays correct", async () => {
    const alice = getUserByName(app.db, "alice")!;
    const branch = await commitToBranch(app, alice, repo, {
		@@ -304,15 +304,40 @@ how many there are and a filter for whether they are live, each a link
304	304	carrying `?live=1` rather than a form, and New app beside them.
305	305	`?mode=dev` on the same URL is dev's table of repositories, unchanged.
306	306
307		The home keeps itself current. _Your apps_ and _on you_
308		are each a live region (`data-live`, `src/web/client.ts`): a deploy
309		serving, a pull opening, closing or merging, a run starting or ending, or an
310		assignment changing refetches the home — the very same `studioHome` render
311		that drew the first paint, never a second copy of that markup — and swaps
312		just that region in place, so a card that is answered goes and a new one
313		arrives without a reload. Events within half a second of each other cost one
314		fetch. A card mid-decision (its post to the crew still in flight) is never
315		swapped out from under the click deciding it.
	307	The home keeps itself current. _Your apps_ and _on you_ are each a live
	308	region (`data-live`, `src/web/client.ts`): a deploy serving, a pull
	309	opening, closing or merging, a run starting or ending, or an assignment
	310	changing fetches that region again — the very same render that drew the
	311	first paint, never a second copy of that markup — and swaps it in place,
	312	so a card that is answered goes and a new one arrives without a reload.
	313
	314	### Live regions
	315
	316	A page with a script never reloads itself: the `meta refresh` some pages
	317	carry is the no-script fallback, and the script removes it the moment it
	318	can stream. Every live region listens to one `EventSource` (`/events`,
	319	everything the viewer may see) and works like this:
	320
	321	- An address of its own. A region carries `data-live-src` — `/live/apps`
	322	and `/live/on-you` on the home, `<repo>/app/now` for _Now_ on the app
	323	page, `<repo>/app/state` for its head card — and an event fetches that
	324	address, not the page. The fragment answers with the same element, id
	325	and all, rendered by the same function as the page, with its icons
	326	inlined (`layout.fragment`). A region without an address shares one
	327	fetch of the page; that is the fallback, not the design.
	328	- Nothing painted that did not change. A fragment's `etag` is a hash of
	329	its bytes; the client sends it back as `if-none-match` and an unchanged
	330	region is a 304 with no body. When bytes do arrive, two renders that
	331	differ only in a relative time ("3m ago") are the same region.
	332	- One fetch per burst. Events within a beat of each other cost one
	333	fetch per address, never more often than every second and a half; a
	334	hidden tab fetches nothing and catches up on the first look back.
	335	- Never out from under a hand. A region holding a focused input, or a
	336	card whose post is still in flight (`data-busy`), is left alone until
	337	the next event.
	338
	339	Run logs and the crew's transcript stream line by line over their own
	340	`?follow=1` answers; they are the streamed part of a page, not a region.
316	341
317	342	Signed out, `/` in the studio is a stranger's front door, not the dev
318	343	pitch: a shelf of the public apps actually serving — name, one line of
		@@ -7,7 +7,9 @@
7	7
8	8	import type { CheckDetail } from "../core/runs.ts";
9	9
10		const FAIL_LINE = /^\(fail\) (.+) \[[0-9.]+m?s\]$/;
	10	// The duration is bun's to print or not: under CI it leaves it off a test
	11	// that took next to no time, so a name is a name with or without one.
	12	const FAIL_LINE = /^\(fail\) (.+?)(?: \[[0-9.]+m?s\])?$/;
11	13	const PASS_COUNT = /^\s*(\d+) pass$/;
12	14	const FAIL_COUNT = /^\s*(\d+) fail$/;
13	15
		@@ -104,6 +104,8 @@ import {
104	104	takeBackSubmit,
105	105	tellSubmit,
106	106	} from "../web/studio/actions.ts";
	107	import { liveAppsFragment, liveOnYouFragment } from "../web/studio/home.ts";
	108	import { appNowFragment } from "../web/studio/now.ts";
107	109	import { appStateFragment } from "../web/studio/previews.ts";
108	110	import { changesList, tellsList } from "../web/studio/lists.ts";
109	111	import { DEFAULT_MODE, isMode, modeCookie, type Mode } from "../web/mode.ts";
		@@ -425,6 +427,11 @@ export function buildRouter(): Router<Handler> {
425	427	router.add("GET", "/migrate/jobs/:job", migrationJobPage);
426	428	// Every app on one canvas; a literal route, so it must sit above /:owner.
427	429	router.add("GET", "/map", globalMapPage);
	430	// Live regions' own addresses (docs/STUDIO.md, "Live regions"): the
	431	// home's shelf and its "On you" card answer for themselves, so an event
	432	// fetches a region and not the page. Literal, above /:owner.
	433	router.add("GET", "/live/apps", liveAppsFragment);
	434	router.add("GET", "/live/on-you", liveOnYouFragment);
428	435	router.add("GET", "/runs/:id", runRedirect);
429	436	router.add("GET", "/settings", accountPage);
430	437	router.add("POST", "/settings", accountUpdate);
		@@ -681,6 +688,8 @@ export function buildRouter(): Router<Handler> {
681	688	// The studio page's own live refresh: the head card and previews list,
682	689	// bare, fetched on a deploy run event for the app being viewed.
683	690	router.add("GET", "/:owner/:name/app/state", appStateFragment);
	691	// "Now" on the same page, alone: the region's own address.
	692	router.add("GET", "/:owner/:name/app/now", appNowFragment);
684	693	router.add("GET", "/:owner/:name/app/:env/open", appOpen);
685	694	// Where a private app sends a person who arrived by its link.
686	695	router.add("GET", "/apps/open", appsOpen);
		@@ -2031,20 +2031,60 @@ export const liveRegionsJs = /* js */ `
2031	2031	var timer = null;
2032	2032	var last = 0;
2033	2033	var MIN_GAP = 1500;
2034		function refresh() {
2035		timer = null;
2036		// Hidden, the page waits: a tab in the background paints nothing, and
2037		// the first look back brings everything at once.
2038		if (document.hidden) return;
2039		var ids = Object.keys(due);
2040		due = {};
2041		if (ids.length === 0) return;
2042		last = Date.now();
2043		fetch(location.href, { headers: { accept: 'text/html' }, credentials: 'same-origin' })
2044		.then(function (r) { return r.ok ? r.text() : Promise.reject(r); })
	2034	// What each address last answered with, so the next ask is conditional:
	2035	// a region that did not change comes back 304 and paints nothing.
	2036	var tags = {};
	2037	// Relative times ("3m ago") drift on their own; two renders that differ
	2038	// only there are the same region, and the clock is not a change.
	2039	function same(a, b) {
	2040	var t = /<time\\b[^>]>[^<]<\\/time>/g;
	2041	return a.replace(t, '') === b.replace(t, '');
	2042	}
	2043	function swap(fresh, ids) {
	2044	ids.forEach(function (id) {
	2045	var mine = document.getElementById(id);
	2046	var theirs = fresh.getElementById(id);
	2047	if (!mine \|\| !theirs) return;
	2048	// A card mid-action (the big view marks it data-busy while its post
	2049	// is in flight) is never pulled out from under the click; the next
	2050	// matching event tries the swap again.
	2051	if (mine.querySelector('[data-busy]')) return;
	2052	var active = document.activeElement;
	2053	if (active && mine.contains(active) && (active.tagName === 'INPUT' \|\| active.tagName === 'TEXTAREA')) return;
	2054	if (same(mine.innerHTML, theirs.innerHTML)) return;
	2055	mine.innerHTML = theirs.innerHTML;
	2056	Array.prototype.forEach.call(theirs.attributes, function (a) { if (a.name !== 'id') mine.setAttribute(a.name, a.value); });
	2057	mine.dispatchEvent(new CustomEvent('forge:swapped', { bubbles: true }));
	2058	});
	2059	}
	2060	// A region with an address of its own (data-live-src) answers for itself:
	2061	// the server renders that region and nothing else, and its etag says
	2062	// whether anything changed. Regions without one share one fetch of the
	2063	// page, which is the fallback, not the design.
	2064	function pull(src, ids) {
	2065	var own = src !== location.href;
	2066	var headers = { accept: 'text/html' };
	2067	if (tags[src]) headers['if-none-match'] = tags[src];
	2068	fetch(src, { headers: headers, credentials: 'same-origin' })
	2069	.then(function (r) {
	2070	if (r.status === 304) return null;
	2071	if (!r.ok) return Promise.reject(r);
	2072	var tag = r.headers.get('etag');
	2073	if (tag) tags[src] = tag;
	2074	return r.text();
	2075	})
2045	2076	.then(function (text) {
2046		// Parse a copy without the page's own style element: the swap only ever
2047		// reads a live region's innerHTML, never the head, and the fresh
	2077	if (text === null) return;
	2078	if (own) {
	2079	// A fragment's icons come inlined (layout.fragment), so it needs
	2080	// nothing from this page's sprite.
	2081	var holder = document.createElement('template');
	2082	holder.innerHTML = text;
	2083	swap(holder.content, ids);
	2084	return;
	2085	}
	2086	// Parse a copy without the page's own style element: the swap only
	2087	// ever reads a region's innerHTML, never the head, and the fresh
2048	2088	// page carries a fresh nonce the live document's CSP cannot match —
2049	2089	// parsing it would log an inline-style violation for nothing.
2050	2090	var fresh = new DOMParser().parseFromString(text.replace(/<(style)[^>]>[\\s\\S]?<\\/\\1>/gi, ''), 'text/html');
		@@ -2054,26 +2094,28 @@ export const liveRegionsJs = /* js */ `
2054	2094	var theirSprite = fresh.querySelector('.sprite');
2055	2095	var mySprite = document.querySelector('.sprite');
2056	2096	if (theirSprite && mySprite) mySprite.replaceWith(theirSprite);
2057		ids.forEach(function (id) {
2058		var mine = document.getElementById(id);
2059		var theirs = fresh.getElementById(id);
2060		if (!mine \|\| !theirs) return;
2061		// A card mid-decision (asksJs marks it data-busy while its post is
2062		// in flight) is never pulled out from under the click that is
2063		// deciding it; the next matching event tries the swap again.
2064		if (mine.querySelector('[data-busy]')) return;
2065		var active = document.activeElement;
2066		if (active && mine.contains(active) && (active.tagName === 'INPUT' \|\| active.tagName === 'TEXTAREA')) return;
2067		// Nothing to paint when nothing changed: an event about this
2068		// region that left its markup as it was is not a flicker.
2069		if (mine.innerHTML === theirs.innerHTML) return;
2070		mine.innerHTML = theirs.innerHTML;
2071		Array.prototype.forEach.call(theirs.attributes, function (a) { if (a.name !== 'id') mine.setAttribute(a.name, a.value); });
2072		mine.dispatchEvent(new CustomEvent('forge:swapped', { bubbles: true }));
2073		});
	2097	swap(fresh, ids);
2074	2098	})
2075	2099	.catch(function () {});
2076	2100	}
	2101	function refresh() {
	2102	timer = null;
	2103	// Hidden, the page waits: a tab in the background paints nothing, and
	2104	// the first look back brings everything at once.
	2105	if (document.hidden) return;
	2106	var ids = Object.keys(due);
	2107	due = {};
	2108	if (ids.length === 0) return;
	2109	last = Date.now();
	2110	var groups = {};
	2111	ids.forEach(function (id) {
	2112	var region = document.getElementById(id);
	2113	if (!region) return;
	2114	var src = region.getAttribute('data-live-src') \|\| location.href;
	2115	(groups[src] = groups[src] \|\| []).push(id);
	2116	});
	2117	Object.keys(groups).forEach(function (src) { pull(src, groups[src]); });
	2118	}
2077	2119	var source = new EventSource('/events');
2078	2120	// The stream's own state, for a page that shows whether it is connected.
2079	2121	function state(s) { document.dispatchEvent(new CustomEvent('forge:live', { detail: { state: s } })); }
		@@ -13,6 +13,7 @@ import type { User } from "../core/users.ts";
13	13	import type { Ctx } from "../http/context.ts";
14	14	import { edgeLoginUrl, edgeLogoutUrl } from "../http/edge.ts";
15	15	import { json } from "../http/respond.ts";
	16	import { sha256 } from "../kernel/hash.ts";
16	17	import { secret } from "../kernel/id.ts";
17	18	import {
18	19	metaThemeColor,
		@@ -639,19 +640,32 @@ export function redirect(
639	640	* Its icons are inlined rather than referenced: a fragment cannot count on
640	641	* the sprite of the document it is being dropped into, and must not add ids
641	642	* to it (`inlineIcons`, `icons.ts`).
	643	*
	644	* A fragment names its own bytes: the `etag` is a hash of the body, and a
	645	* request carrying it back as `if-none-match` gets a 304 and nothing to
	646	* paint. `cache-control: no-store` keeps the browser's own cache out of it —
	647	* the live client holds the tag itself and asks conditionally on purpose,
	648	* so an unchanged region costs one round trip and no repaint.
642	649	*/
643		export function fragment(body: Html, status = 200): Response {
644		return new Response(inlineIcons(body.text), {
645		status,
646		headers: {
647		"content-type": "text/html; charset=utf-8",
648		"content-security-policy":
649		"default-src 'none'; style-src 'none'; sandbox",
650		"referrer-policy": "same-origin",
651		"x-content-type-options": "nosniff",
652		"cache-control": "no-store",
653		},
654		});
	650	export function fragment(
	651	body: Html,
	652	o: { status?: number; request?: Request } = {},
	653	): Response {
	654	const text = inlineIcons(body.text);
	655	const status = o.status ?? 200;
	656	const headers: Record<string, string> = {
	657	"content-type": "text/html; charset=utf-8",
	658	"content-security-policy": "default-src 'none'; style-src 'none'; sandbox",
	659	"referrer-policy": "same-origin",
	660	"x-content-type-options": "nosniff",
	661	"cache-control": "no-store",
	662	};
	663	if (status !== 200) return new Response(text, { status, headers });
	664	const etag = `"${sha256(text).slice(0, 16)}"`;
	665	headers.etag = etag;
	666	if (o.request?.headers.get("if-none-match") === etag)
	667	return new Response(null, { status: 304, headers });
	668	return new Response(text, { status, headers });
655	669	}
656	670
657	671	/** Redirect back to a page carrying a message — the shape most handlers want. */
		@@ -229,7 +229,9 @@ export async function browseTree(ctx: Ctx): Promise<Response> {
229	229	if (!entries.ok) return notFoundPage(ctx);
230	230
231	231	if (ctx.url.searchParams.get("fragment") === "explorer")
232		return fragment(explorerFragment(scope.base, ref, path, entries.value));
	232	return fragment(explorerFragment(scope.base, ref, path, entries.value), {
	233	request: ctx.request,
	234	});
233	235
234	236	const [refs, explorer] = await Promise.all([
235	237	refSetFrom(scope.source),
		@@ -266,7 +268,8 @@ export async function browseBlob(ctx: Ctx): Promise<Response> {
266	268	blob: blob.value,
267	269	view: blobView(ctx.url.searchParams.get("view")),
268	270	});
269		if (ctx.url.searchParams.get("fragment") === "1") return fragment(pane);
	271	if (ctx.url.searchParams.get("fragment") === "1")
	272	return fragment(pane, { request: ctx.request });
270	273
271	274	const explorer = await loadExplorer(scope.source, ref, path, true);
272	275	return codePage(ctx, scope, {
		@@ -979,13 +979,15 @@ export async function deleteFileSubmit(ctx: Ctx): Promise<Response> {
979	979	*/
980	980	export async function previewSubmit(ctx: Ctx): Promise<Response> {
981	981	const repo = loadRepo(ctx);
982		if (!repo) return fragment(html``, 404);
	982	if (!repo) return fragment(html``, { status: 404 });
983	983	const form = await readForm(ctx);
984	984	if (form instanceof Response) return form;
985	985	const scope = localScope(ctx, repo);
986		if (!scope.caps.write) return fragment(html``, 404);
	986	if (!scope.caps.write) return fragment(html``, { status: 404 });
987	987	const body = formValue(form, "body");
988	988	const path = formValue(form, "path");
989	989	const markdown = path === "" \|\| /\.(md\|markdown)$/i.test(path);
990		return fragment(markdown ? renderMarkdown(body) : html`<pre>${body}</pre>`);
	990	return fragment(markdown ? renderMarkdown(body) : html`<pre>${body}</pre>`, {
	991	request: ctx.request,
	992	});
991	993	}
		@@ -1021,7 +1021,9 @@ export async function treePage(ctx: Ctx): Promise<Response> {
1021	1021
1022	1022	// The explorer's lazy expansion asks for exactly one directory.
1023	1023	if (ctx.url.searchParams.get("fragment") === "explorer")
1024		return fragment(explorerFragment(scope.base, ref, path, entries.value));
	1024	return fragment(explorerFragment(scope.base, ref, path, entries.value), {
	1025	request: ctx.request,
	1026	});
1025	1027
1026	1028	const [refs, explorer] = await Promise.all([
1027	1029	refSetFrom(scope.source),
		@@ -1063,7 +1065,8 @@ export async function blobPage(ctx: Ctx): Promise<Response> {
1063	1065
1064	1066	// The preview a script drops into the pane beside the explorer. Same
1065	1067	// renderer, same markup — a preview and a real page load are the same file.
1066		if (ctx.url.searchParams.get("fragment") === "1") return fragment(pane);
	1068	if (ctx.url.searchParams.get("fragment") === "1")
	1069	return fragment(pane, { request: ctx.request });
1067	1070
1068	1071	const explorer = await loadExplorer(scope.source, ref, path, true);
1069	1072	const filename = path.split("/").pop() ?? path;
		@@ -12,26 +12,16 @@ import { appsRuntime } from "../../apps/runtime.ts";
12	12	import { listCrewRoles } from "../../core/agents.ts";
13	13	import type { AppRecord } from "../../core/apps.ts";
14	14	import { decisionStats, type DecisionStat } from "../../core/decisions.ts";
15		import { getIssueById, listIssues, type Issue } from "../../core/issues.ts";
16		import {
17		listPulls,
18		mergedPullCount,
19		openPullsClosing,
20		} from "../../core/pulls.ts";
	15	import { listPulls, mergedPullCount } from "../../core/pulls.ts";
21	16	import { canSeeOwnerFacts, type Repo } from "../../core/repos.ts";
22	17	import {
23	18	agentRunTotals,
24		latestRunsForIssues,
25		listRuns,
26	19	previewLatency,
27	20	type PreviewLatency,
28		type Run,
29	21	} from "../../core/runs.ts";
30		import { getUsersByIds } from "../../core/users.ts";
31	22	import { autonomyStatus } from "../../crew/autonomy.ts";
32	23	import { repoDir } from "../../git/repos.ts";
33	24	import type { Ctx } from "../../http/context.ts";
34		import { readRunLogTail } from "../../runs/log.ts";
35	25	import { crumbsFor, repoBase, repoHeader, repoPalette } from "../chrome.ts";
36	26	import { appTailJs, liveRegionsJs } from "../client.ts";
37	27	import { html, when, type Html } from "../html.ts";
		@@ -47,19 +37,10 @@ import {
47	37	time,
48	38	userTag,
49	39	} from "../ui.ts";
50		import { changeHref, changesHref, tellHref, tellsHref } from "./nouns.ts";
51		import { LOG_TAIL_CAP, logBox } from "./log.ts";
	40	import { changesHref, tellsHref } from "./nouns.ts";
	41	import { nowCard, nowRegion } from "./now.ts";
52	42	import { appPanels } from "./previews.ts";
53		import { stopForm } from "./run.ts";
54		import { tellWord } from "./tell.ts";
55		import { voiceFor, type Actor } from "./voice.ts";
56		import {
57		pullWord,
58		runWord,
59		servingHistory,
60		wordBadge,
61		type WordCtx,
62		} from "./words.ts";
	43	import { servingHistory, type WordCtx } from "./words.ts";
63	44
64	45	/**
65	46	* The week's decisions in one line: how many, how many the decider took
		@@ -219,17 +200,6 @@ export async function studioApp(
219	200	};
220	201	const crew = listCrewRoles(db, repo.id);
221	202	const builders = crew.filter((c) => c.role === "builder").map((c) => c.agent);
222		const runs = listRuns(db, repo.id, { kind: "agent", limit: 8 });
223		const actors = getUsersByIds(
224		db,
225		runs.map((r) => r.actorId).filter((id): id is string => id !== null),
226		);
227		const issues = new Map<string, Issue>();
228		for (const r of runs)
229		if (r.issueId !== null && !issues.has(r.issueId)) {
230		const i = getIssueById(db, r.issueId);
231		if (i) issues.set(r.issueId, i);
232		}
233	203	const openPulls = listPulls(db, repo.id, { state: "open", limit: 10 });
234	204	const week = new Date(Date.now() - 7 * 24 * 60 * 60_000).toISOString();
235	205	// What landed this week, counted by the database like the runs and the
		@@ -313,222 +283,15 @@ export async function studioApp(
313	283	</div>
314	284	</form>`;
315	285
316		// ---- now: one row per thing, in the five words ----
317		const proposed = new Set(openPulls.map((p) => p.id));
318		const openByIssue = openPullsClosing(db, repo.id);
319		const openTells = listIssues(db, repo.id, {
320		kind: "issue",
321		state: "open",
322		limit: 30,
	286
	287	// ---- now: one row per thing, in the five words (studio/now.ts) ----
	288	const { card: now, running } = await nowCard(ctx, repo, record, {
	289	openPulls,
	290	builderCount: builders.length,
	291	ownerFacts,
	292	wordCtx,
	293	deployTailing,
323	294	});
324		const told = openTells.filter(
325		(i) => i.assigneeIsAgent && !openByIssue.has(i.number),
326		);
327		// A person can hold a tell exactly as an agent can — #224's own rule for
328		// a change applies here too: the front door counts work by what it is,
329		// not by who is doing it. Scoped to `assigneeId`, never widened to every
330		// open tell, so an ordinary unassigned backlog still stays off this
331		// panel.
332		const personHeld = openTells.filter(
333		(i) =>
334		i.assigneeId !== null &&
335		!i.assigneeIsAgent &&
336		i.id !== repo.directionIssueId &&
337		!openByIssue.has(i.number),
338		);
339		// With nobody on the crew to build, `tellCrew` cannot route a tell to
340		// anyone — it stays unassigned forever, not merely unpicked-up like
341		// `waiting` below. Scoped to that one honest cause (never to a tell a
342		// person simply hasn't assigned while builders exist), so widening this
343		// never turns "Now" into a plain issue list.
344		const untaken =
345		builders.length === 0
346		? openTells
347		.filter(
348		(i) =>
349		i.assigneeId === null &&
350		i.id !== repo.directionIssueId &&
351		!openByIssue.has(i.number),
352		)
353		.slice(0, 5)
354		: [];
355		const everRan = latestRunsForIssues(
356		db,
357		[...told, ...personHeld, ...untaken].map((i) => i.id),
358		["agent"],
359		);
360		const waiting = told.filter((i) => !everRan.has(i.id)).slice(0, 5);
361		const held = personHeld.filter((i) => !everRan.has(i.id)).slice(0, 5);
362		const stuck = untaken.filter((i) => !everRan.has(i.id));
363		const issueNumberById = new Map(
364		[...told, ...personHeld, ...untaken].map((i) => [i.id, i.number]),
365		);
366		const rowsNow = runs
367		.filter((r) => {
368		if (r.issueId === null) return true;
369		if (proposed.has(r.issueId)) return false;
370		const n = issueNumberById.get(r.issueId) ?? issues.get(r.issueId)?.number;
371		return n === undefined \|\| !openByIssue.has(n);
372		})
373		.filter(
374		(r, idx, all) => all.findIndex((x) => x.issueId === r.issueId) === idx,
375		)
376		.slice(0, 6);
377		// Who signs a "Now" row is the one rule for it, `voiceFor`
378		// (`studio/voice.ts`): a person is named to anyone who can see the row —
379		// the same name `/changes` and the change's own page give — and only the
380		// crew's own work reads as the app's own story for a viewer who cannot
381		// see the roster. The avatar takes the same string, so its initials can
382		// never disagree with the name beside them.
383		const runActor = (r: Run): Actor => ({
384		name: r.actorId === null ? undefined : actors.get(r.actorId)?.username,
385		// A run with nobody on it is the crew's own, never a person's.
386		isAgent: r.actorId === null \|\| actors.get(r.actorId)?.kind === "agent",
387		});
388
389		// The one run actually going, if any: its row gets a tail of its own
390		// log — the last handful of lines, streamed live — beside it. Only one,
391		// so the page never opens a stream per row.
392		const activeRun = rowsNow.find(
393		(r) => r.kind === "agent" && r.state === "running",
394		);
395		const activeTail = activeRun
396		? logBox({
397		id: "app-run-tail",
398		who: voiceFor(runActor(activeRun), ownerFacts),
399		cap: LOG_TAIL_CAP,
400		lines: readRunLogTail(
401		ctx.app.config.dataDir,
402		activeRun.id,
403		LOG_TAIL_CAP,
404		).lines,
405		stream: `/api/v1/repos/${repo.ownerName}/${repo.name}/runs/${activeRun.id}/log?follow=1`,
406		className: "log-tail",
407		})
408		: undefined;
409
410		const runRows: Html[] = [];
411		for (const r of rowsNow) {
412		const { word, note } = await runWord(wordCtx, r);
413		const who = voiceFor(runActor(r), ownerFacts);
414		const about = r.issueId === null ? undefined : issues.get(r.issueId);
415		const stop = stopForm(ctx, repo, r);
416		runRows.push(
417		row({
418		...(stop ? {} : { href: `${base}/runs/${r.id}`, nav: true }),
419		lead: avatar(who),
420		title: stop
421		? html`<a href="${base}/runs/${r.id}">${about?.title ?? note}</a>`
422		: (about?.title ?? note),
423		meta: html`${who} · ${word === "working" ? "working now" : note}
424		${word === "working"
425		? null
426		: html` · ${time(r.finishedAt ?? r.createdAt)}`}`,
427		trail: stop
428		? html`<span class="studio-ask-actions"
429		>${wordBadge(word)} ${stop}</span
430		>`
431		: wordBadge(word),
432		}),
433		);
434		if (activeTail !== undefined && r.id === activeRun?.id)
435		runRows.push(html`<li class="log-tail-row">${activeTail}</li>`);
436		}
437
438		const nowRows: Html[] = [
439		...(await Promise.all(
440		openPulls.map(async (p) => {
441		const { word, note } = await pullWord(wordCtx, p);
442		const who = voiceFor(
443		{ name: p.authorName, isAgent: p.authorIsAgent },
444		ownerFacts,
445		);
446		return row({
447		href: changeHref(base, p.number),
448		nav: true,
449		lead: avatar(who),
450		title: p.title,
451		meta: html`${who} · ${note} · ${time(p.createdAt)}`,
452		trail: wordBadge(word),
453		});
454		}),
455		)),
456		...runRows,
457		...waiting.map((i) => {
458		const who = voiceFor(
459		{ name: i.assigneeName ?? undefined, isAgent: i.assigneeIsAgent },
460		ownerFacts,
461		);
462		return row({
463		href: tellHref(base, i.number),
464		nav: true,
465		lead: avatar(who),
466		title: i.title,
467		meta: html`${who} · told ${time(i.createdAt)}, not picked up yet`,
468		trail: wordBadge("waiting"),
469		});
470		}),
471		// Held by a person: `tellWord` — the one place a tell's word is
472		// decided (`studio/tell.ts`) — says so honestly, the same word and
473		// note the tell's own page and "Everything told" already show for it.
474		// `personHeld` has already established the holder is a person, so
475		// `voiceFor` names them to every viewer who can see the row.
476		...(await Promise.all(
477		held.map(async (i) => {
478		const { word, note } = (await tellWord(
479		wordCtx,
480		repo,
481		i,
482		undefined,
483		)) ?? {
484		word: "told" as const,
485		note: "held",
486		};
487		const who = voiceFor(
488		{ name: i.assigneeName ?? undefined, isAgent: false },
489		ownerFacts,
490		"someone",
491		);
492		return row({
493		href: tellHref(base, i.number),
494		nav: true,
495		lead: avatar(who),
496		title: i.title,
497		meta: html`${who} · ${note} · ${time(i.createdAt)}`,
498		trail: wordBadge(word),
499		});
500		}),
501		)),
502		...stuck.map((i) => {
503		return row({
504		lead: avatar("crew"),
505		title: html`<a href="${tellHref(base, i.number)}">${i.title}</a>`,
506		meta: html`told ${time(i.createdAt)} ·
507		<span class="muted">nobody on the crew to take it —</span>
508		<a href="${base}/settings">add someone</a>`,
509		trail: wordBadge("told"),
510		});
511		}),
512		];
513		const now =
514		nowRows.length === 0
515		? card(
516		html`<p class="muted small">
517		${deployTailing
518		? "Production is coming up — the log above has it."
519		: "Nothing yet. Tell the crew something."}
520		</p>`,
521		{
522		head: html`${icon("activity")}
523		<h2>Now</h2>`,
524		},
525		)
526		: listCard(nowRows, {
527		head: html`${icon("activity")}
528		<h2>Now</h2>
529		<span class="spacer"></span>
530		${btn("Every run", { href: `${base}/runs`, size: "sm" })}`,
531		});
532	295
533	296	// ---- the rail ----
534	297	// Crew, spend and autonomy are the owner's facts; a viewer who cannot
		@@ -659,13 +422,7 @@ export async function studioApp(
659	422	<div class="dash-main stack">
660	423	${tell}
661	424	<div id="app-previews">${previews}</div>
662		<div
663		id="live-now"
664		data-live="run.,pull.,issue.*"
665		data-live-repo="${repo.ownerName}/${repo.name}"
666		>
667		${now}
668		</div>
	425	${nowRegion(repo, now)}
669	426	</div>
670	427	<aside class="dash-rail stack">
671	428	${crewCard} ${weekCard} ${ownCard} ${more}
		@@ -682,6 +439,6 @@ export async function studioApp(
682	439	// The no-script half of the tail: while the crew's run goes, the page
683	440	// refreshes itself, the way the run's own page does; the script above
684	441	// removes this the moment it can stream lines instead.
685		...(activeRun \|\| tailing ? { refresh: { seconds: 5 } } : {}),
	442	...(running \|\| tailing ? { refresh: { seconds: 5 } } : {}),
686	443	});
687	444	}
		@@ -7,14 +7,14 @@
7	7	* apps grow.
8	8	*/
9	9
10		import { appsRuntime } from "../../apps/runtime.ts";
11	10	import { crewForRepos } from "../../core/agents.ts";
	11	import type { Repo } from "../../core/repos.ts";
12	12	import { type User } from "../../core/users.ts";
13	13	import { isPausedAtCeiling, spentTodayForRepos } from "../../crew/autonomy.ts";
14	14	import type { Ctx } from "../../http/context.ts";
15	15	import { liveRegionsJs } from "../client.ts";
16		import { html, when } from "../html.ts";
17		import { page } from "../layout.ts";
	16	import { html, when, type Html } from "../html.ts";
	17	import { fragment, page } from "../layout.ts";
18	18	import { liveClientJs } from "../live.ts";
19	19	import { btn, empty, icon, listCard, row } from "../ui.ts";
20	20	import { onYouCard } from "../pages/site.ts";
		@@ -28,23 +28,91 @@ import { servingHistory } from "./words.ts";
28	28	* what a person put on you. Built from the same rows and cards as the rest
29	29	* of the forge, so it reads as the forge.
30	30	*/
31		export async function studioHome(ctx: Ctx, user: User): Promise<Response> {
32		const db = ctx.app.db;
33		// The front door leads with what the viewer can write — their own apps
34		// and their organisations' — never widened by a stranger's public app
35		// (`writableAppsOf`, not the visibility every reader gets from `appsOf`).
36		const { repos: appRepos, records } = writableAppsOf(ctx, user);
37		const runtime = appsRuntime(ctx.app);
	31	/** The events that can change a row on the shelf. */
	32	const APPS_LIVE =
	33	"app.serving,app.stopped,run.queued,run.started,run.finished,pull.opened,pull.closed,pull.merged";
	34	/** The events that can change what is on you. */
	35	const ON_YOU_LIVE =
	36	"issue.assigned,pull.assigned,issue.closed,pull.closed,issue.reopened,pull.reopened,pull.merged";
	37
	38	/**
	39	* The shelf: every app the viewer can write, one row each. The front door
	40	* leads with what the viewer can write — their own apps and their
	41	* organisations' — never widened by a stranger's public app
	42	* (`writableAppsOf`, not the visibility every reader gets from `appsOf`).
	43	*/
	44	async function shelf(
	45	ctx: Ctx,
	46	user: User,
	47	): Promise<{ appRepos: readonly Repo[]; apps: Html }> {
	48	const { repos: appRepos } = writableAppsOf(ctx, user);
38	49	// Read once, shown twice again: a shipped or failed deploy is a row's own
39	50	// word, and — when nothing is running and no change waits — the rail's.
40	51	const productionFacts = productionFactsForRepos(ctx, appRepos);
41	52	// One memo of production's history for every word on this page: the
42		// shelf's rows and the Now list below ask it once per repository.
	53	// shelf's rows ask it once per repository.
43	54	const history = servingHistory();
44	55	const appRows = await shelfRows(ctx, appRepos, {
45	56	productionFacts,
46	57	history,
47	58	});
	59	const apps =
	60	appRows.length === 0
	61	? empty({
	62	icon: "rocket",
	63	title: "No apps yet",
	64	note: "Make one, tell the crew what it is, and watch it come up.",
	65	action: btn("New app", { href: "/apps/new", variant: "primary" }),
	66	})
	67	: listCard(appRows, {
	68	head: html`${icon("rocket")}
	69	<h2>Your apps</h2>
	70	<span class="spacer"></span>
	71	${btn("Map", { href: "/map", size: "sm", icon: "map" })}
	72	${btn("Audit", { href: "/audit", size: "sm", icon: "shield" })}
	73	${btn("Board", { href: "/board", size: "sm", icon: "activity" })}
	74	${btn("New app", { href: "/apps/new", size: "sm", icon: "plus" })}`,
	75	});
	76	return { appRepos, apps };
	77	}
	78
	79	/**
	80	* Each live region on the home has an address of its own (`data-live-src`),
	81	* so an event fetches that region — the shelf, or what is on you — and not
	82	* the page; the fragment answers with the same element, id and all.
	83	*/
	84	const appsRegion = (apps: Html): Html =>
	85	html`<div id="live-apps" data-live="${APPS_LIVE}" data-live-src="/live/apps">
	86	${apps}
	87	</div>`;
	88
	89	const onYouRegion = (ctx: Ctx, user: User): Html =>
	90	html`<div
	91	id="live-on-you"
	92	data-live="${ON_YOU_LIVE}"
	93	data-live-src="/live/on-you"
	94	>
	95	${onYouCard(ctx, user) ?? null}
	96	</div>`;
	97
	98	// GET /live/apps — the shelf alone, for the region that shows it.
	99	export async function liveAppsFragment(ctx: Ctx): Promise<Response> {
	100	const user = ctx.auth.user;
	101	if (!user) return fragment(html``, { status: 404 });
	102	const { apps } = await shelf(ctx, user);
	103	return fragment(appsRegion(apps), { request: ctx.request });
	104	}
	105
	106	// GET /live/on-you — what is on the viewer, alone.
	107	export function liveOnYouFragment(ctx: Ctx): Response {
	108	const user = ctx.auth.user;
	109	if (!user) return fragment(html``, { status: 404 });
	110	return fragment(onYouRegion(ctx, user), { request: ctx.request });
	111	}
	112
	113	export async function studioHome(ctx: Ctx, user: User): Promise<Response> {
	114	const db = ctx.app.db;
	115	const { appRepos, apps } = await shelf(ctx, user);
48	116
49	117	// What the crew cost today across every app on the shelf, and how many
50	118	// are paused at their ceiling right now — the owner's first question at
		@@ -75,42 +143,14 @@ export async function studioHome(ctx: Ctx, user: User): Promise<Response> {
75	143	</p>`;
76	144	});
77	145
78		const apps =
79		appRows.length === 0
80		? empty({
81		icon: "rocket",
82		title: "No apps yet",
83		note: "Make one, tell the crew what it is, and watch it come up.",
84		action: btn("New app", { href: "/apps/new", variant: "primary" }),
85		})
86		: listCard(appRows, {
87		head: html`${icon("rocket")}
88		<h2>Your apps</h2>
89		<span class="spacer"></span>
90		${btn("Map", { href: "/map", size: "sm", icon: "map" })}
91		${btn("Audit", { href: "/audit", size: "sm", icon: "shield" })}
92		${btn("Board", { href: "/board", size: "sm", icon: "activity" })}
93		${btn("New app", { href: "/apps/new", size: "sm", icon: "plus" })}`,
94		});
95
96	146	const body = html`<h1 class="sr-only">Studio</h1>
97	147	${costLine}
98	148	<div class="dash">
99	149	<div class="dash-main stack">
100		<div
101		id="live-apps"
102		data-live="app.serving,app.stopped,run.queued,run.started,run.finished,pull.opened,pull.closed,pull.merged"
103		>
104		${apps}
105		</div>
	150	${appsRegion(apps)}
106	151	</div>
107	152	<aside class="dash-rail stack">
108		<div
109		id="live-on-you"
110		data-live="issue.assigned,pull.assigned,issue.closed,pull.closed,issue.reopened,pull.reopened,pull.merged"
111		>
112		${onYouCard(ctx, user) ?? null}
113		</div>
	153	${onYouRegion(ctx, user)}
114	154	</aside>
115	155	</div>`;
116	156	return page({