@goodbones/browser 0.1.0-beta.1

package/src/app/components/campaigns/Ladder.tsx

@@ -0,0 +1,326 @@
+import type { CampaignCard, ObjectiveCard, SectorCard } from "../../../model/campaigns.js";
+import type { Pick } from "./pick.js";
+
+// The ladder, drawn: one column per phase with its objectives beneath, an end
+// column, and a lane of sectors each standing in the column of its phase.
+// Objectives no phase names — every objective of a campaign without phases —
+// stand in a first "standing" column, in window everywhere.
+
+const COL = 168;
+const GAP = 14;
+const X0 = 16;
+const PHASE_Y = 14;
+const PHASE_H = 52;
+const CHIP_H = 24;
+const CHIP_GAP = 6;
+const SECTOR_H = 28;
+const SECTOR_GAP = 8;
+
+type Column =
+  | { readonly kind: "standing" }
+  | { readonly kind: "phase"; readonly index: number }
+  | { readonly kind: "end" };
+
+type Props = {
+  readonly campaign: CampaignCard;
+  readonly nudged: ReadonlySet<string>;
+  readonly hover: Pick | null;
+  readonly selected: Pick | null;
+  readonly onHover: (pick: Pick | null) => void;
+  readonly onPick: (pick: Pick | null) => void;
+};
+
+const same = (a: Pick | null, b: Pick): boolean =>
+  a !== null &&
+  a.kind === b.kind &&
+  (a.kind === "campaign" ||
+    (a.kind === "sector" && b.kind === "sector"
+      ? a.name === b.name
+      : (a as { id?: string }).id === (b as { id?: string }).id));
+
+export const columnsOf = (campaign: CampaignCard): ReadonlyArray<Column> => {
+  const standing = campaign.objectives.some((one) => one.phase === null);
+  return [
+    ...(standing || campaign.phases.length === 0 ? [{ kind: "standing" } as const] : []),
+    ...campaign.phases.map((_, index) => ({ kind: "phase", index }) as const),
+    { kind: "end" } as const,
+  ];
+};
+
+// Which column a sector stands in.
+export const columnOfSector = (
+  campaign: CampaignCard,
+  columns: ReadonlyArray<Column>,
+  sector: SectorCard,
+): number => {
+  if (sector.done) return columns.length - 1;
+  if (campaign.phases.length === 0) return 0;
+  const at = columns.findIndex((one) => one.kind === "phase" && one.index === sector.phase);
+  return at === -1 ? 0 : at;
+};
+
+const truncate = (text: string, max: number): string =>
+  text.length <= max ? text : `${text.slice(0, max - 1)}…`;
+
+const scalarLabel = (objective: ObjectiveCard): string => {
+  const measure = objective.measure;
+  if (measure === null) return String(objective.count);
+  const value = measure.value === null ? "?" : String(measure.value);
+  return measure.target === null ? value : `${value}→${String(measure.target)}`;
+};
+
+export const Ladder = ({
+  campaign,
+  hover,
+  nudged,
+  onHover,
+  onPick,
+  selected,
+}: Props): React.JSX.Element => {
+  const columns = columnsOf(campaign);
+  const focus = hover ?? selected;
+  const x = (column: number): number => X0 + column * (COL + GAP);
+  const objectivesIn = (column: Column): ReadonlyArray<ObjectiveCard> =>
+    column.kind === "standing"
+      ? campaign.objectives.filter((one) => one.phase === null)
+      : column.kind === "phase"
+        ? campaign.objectives.filter((one) => one.phase === campaign.phases[column.index]?.id)
+        : [];
+  const maxChips = Math.max(1, ...columns.map((column) => objectivesIn(column).length));
+  const laneY = PHASE_Y + PHASE_H + 14 + maxChips * (CHIP_H + CHIP_GAP) + 18;
+  const placed = campaign.sectors.map((sector) => ({
+    sector,
+    column: columnOfSector(campaign, columns, sector),
+  }));
+  const rowsIn = new Map<number, number>();
+  const withRows = placed.map((one) => {
+    const row = rowsIn.get(one.column) ?? 0;
+    rowsIn.set(one.column, row + 1);
+    return { ...one, row };
+  });
+  const maxRows = Math.max(1, ...rowsIn.values());
+  const laneH = maxRows * (SECTOR_H + SECTOR_GAP) + 12;
+  const width = x(columns.length) + 8;
+  const height = laneY + laneH + 24;
+
+  // What the focus relates to.
+  const focusObjective =
+    focus?.kind === "objective"
+      ? campaign.objectives.find((one) => one.id === focus.id)
+      : undefined;
+  const focusPhaseIndex =
+    focus?.kind === "phase" ? campaign.phases.findIndex((one) => one.id === focus.id) : -1;
+  const focusSector =
+    focus?.kind === "sector" ? campaign.sectors.find((one) => one.name === focus.name) : undefined;
+  const sectorLit = (sector: SectorCard): boolean =>
+    focusObjective !== undefined
+      ? (sector.residue[focusObjective.id] ?? sector.counts[focusObjective.id] ?? 0) > 0
+      : focusPhaseIndex !== -1
+        ? sector.phase === focusPhaseIndex && !sector.done
+        : focusSector !== undefined
+          ? focusSector.name === sector.name
+          : false;
+  const objectiveLit = (objective: ObjectiveCard): boolean =>
+    focusSector !== undefined
+      ? (focusSector.residue[objective.id] ?? 0) > 0
+      : focusPhaseIndex !== -1
+        ? objective.phase === campaign.phases[focusPhaseIndex]?.id
+        : focusObjective !== undefined
+          ? focusObjective.id === objective.id
+          : false;
+  const phaseLit = (index: number): boolean =>
+    focusSector !== undefined
+      ? focusSector.phase === index && !focusSector.done
+      : focusObjective !== undefined
+        ? focusObjective.phase === campaign.phases[index]?.id
+        : focusPhaseIndex === index;
+  const dimmed = focus !== null && focus.kind !== "campaign";
+
+  return (
+    <svg
+      className={`ladder ${dimmed ? "focused" : ""}`}
+      width={width}
+      height={height}
+      viewBox={`0 0 ${String(width)} ${String(height)}`}
+      role="img"
+      aria-label={`Campaign ${campaign.id}: ${String(campaign.phases.length)} phases, ${String(campaign.sectors.length)} sectors`}
+      onMouseLeave={() => {
+        onHover(null);
+      }}
+    >
+      <defs>
+        <marker
+          id="ladder-arrow"
+          viewBox="0 0 10 10"
+          refX="9"
+          refY="5"
+          markerWidth="7"
+          markerHeight="7"
+          orient="auto-start-reverse"
+        >
+          <path d="M0,0 L10,5 L0,10 z" className="arrowhead" />
+        </marker>
+      </defs>
+
+      {columns.map((column, i) => {
+        const cx = x(i);
+        const objectives = objectivesIn(column);
+        if (column.kind === "end") {
+          const done = campaign.sectors.filter((one) => one.done).length;
+          return (
+            <g key="end" className={`column end ${campaign.complete ? "lit" : ""}`}>
+              <rect x={cx} y={PHASE_Y} width={COL} height={PHASE_H} rx="8" className="phase end" />
+              <text x={cx + 12} y={PHASE_Y + 19} className="eyebrow end-text">
+                THE END
+              </text>
+              <text x={cx + 12} y={PHASE_Y + 38} className="phase-name end-text">
+                end state
+              </text>
+              <text x={cx + 12} y={PHASE_Y + PHASE_H + 20} className="small muted">
+                {done} of {campaign.sectors.length} sectors there
+              </text>
+            </g>
+          );
+        }
+        const phase = column.kind === "phase" ? campaign.phases[column.index] : undefined;
+        const lit =
+          column.kind === "phase"
+            ? phaseLit(column.index)
+            : focus?.kind === "objective" && focusObjective?.phase === null;
+        const pick: Pick | null = phase === undefined ? null : { kind: "phase", id: phase.id };
+        return (
+          <g
+            key={column.kind === "phase" ? `phase:${String(column.index)}` : "standing"}
+            className={`column ${lit ? "lit" : ""}`}
+          >
+            <g
+              className={`phase-box ${phase === undefined ? "standing" : phase.defined ? "defined" : "open"} ${pick !== null && same(selected, pick) ? "selected" : ""}`}
+              onMouseEnter={() => {
+                onHover(pick);
+              }}
+              onClick={() => {
+                onPick(pick);
+              }}
+            >
+              <rect x={cx} y={PHASE_Y} width={COL} height={PHASE_H} rx="8" className="phase" />
+              <text x={cx + 12} y={PHASE_Y + 19} className="eyebrow">
+                {phase === undefined || column.kind !== "phase"
+                  ? "STANDING"
+                  : phase.defined
+                    ? `PHASE ${String(column.index + 1)}`
+                    : "OPEN"}
+                {phase?.attested === true ? " · ATTESTED" : ""}
+              </text>
+              <text x={cx + 12} y={PHASE_Y + 38} className="phase-name">
+                {phase === undefined ? "in window everywhere" : truncate(phase.id, 20)}
+              </text>
+              {phase !== undefined ? (
+                <text x={cx + COL - 10} y={PHASE_Y + 38} className="phase-count" textAnchor="end">
+                  {phase.sectors}
+                </text>
+              ) : null}
+            </g>
+            {i < columns.length - 1 ? (
+              <line
+                x1={cx + COL + 1}
+                y1={PHASE_Y + PHASE_H / 2}
+                x2={cx + COL + GAP - 1}
+                y2={PHASE_Y + PHASE_H / 2}
+                className="connector"
+                markerEnd="url(#ladder-arrow)"
+              />
+            ) : null}
+            {phase !== undefined && !phase.defined && phase.intent !== null ? (
+              <text x={cx + 12} y={PHASE_Y + PHASE_H + 20} className="intent">
+                “{truncate(phase.intent, 26)}”
+              </text>
+            ) : null}
+            {objectives.map((objective, j) => {
+              const y =
+                PHASE_Y +
+                PHASE_H +
+                14 +
+                j * (CHIP_H + CHIP_GAP) +
+                (phase !== undefined && !phase.defined ? 14 : 0);
+              const objectivePick: Pick = { kind: "objective", id: objective.id };
+              return (
+                <g
+                  key={objective.id}
+                  className={`chip-box ${objectiveLit(objective) ? "lit" : ""} ${objective.complete ? "complete" : ""} ${same(selected, objectivePick) ? "selected" : ""} ${objective.ledgered ? "" : "unledgered"}`}
+                  onMouseEnter={() => {
+                    onHover(objectivePick);
+                  }}
+                  onClick={() => {
+                    onPick(objectivePick);
+                  }}
+                >
+                  <rect x={cx + 4} y={y} width={COL - 8} height={CHIP_H} rx="12" className="chip" />
+                  <text x={cx + 14} y={y + 16} className="chip-text mono">
+                    {truncate(objective.id, 18)}
+                  </text>
+                  <text x={cx + COL - 14} y={y + 16} className="chip-count" textAnchor="end">
+                    {scalarLabel(objective)}
+                  </text>
+                  <title>
+                    {objective.message}
+                    {objective.measure === null
+                      ? ` — ${String(objective.count)} holdout(s), ${String(Math.round(objective.progress * 100))}% cleared`
+                      : ` — ${String(objective.measure.value ?? "?")} now, target ${String(objective.measure.target ?? "none")}`}
+                  </title>
+                </g>
+              );
+            })}
+          </g>
+        );
+      })}
+
+      <line x1={X0} y1={laneY - 8} x2={width - 8} y2={laneY - 8} className="rule" />
+      <text x={X0} y={laneY - 14} className="label">
+        Sectors
+      </text>
+      <text x={X0 + 60} y={laneY - 14} className="small muted">
+        holdouts left
+      </text>
+      {columns.map((_, i) => (
+        <rect key={i} x={x(i)} y={laneY} width={COL} height={laneH} rx="8" className="lane" />
+      ))}
+      {withRows.map(({ column, row, sector }) => {
+        const cx = x(column) + 4;
+        const cy = laneY + 6 + row * (SECTOR_H + SECTOR_GAP);
+        const left = Object.entries(sector.residue).reduce((sum, [, n]) => sum + n, 0);
+        const pick: Pick = { kind: "sector", name: sector.name };
+        const kind = sector.done ? "done" : sector.legacy ? "legacy" : "sector";
+        return (
+          <g
+            key={sector.name}
+            className={`sector-box ${kind} ${sectorLit(sector) ? "lit" : ""} ${same(selected, pick) ? "selected" : ""} ${nudged.has(sector.name) ? "nudged" : ""} ${sector.stalled ? "stalled" : ""}`}
+            onMouseEnter={() => {
+              onHover(pick);
+            }}
+            onClick={() => {
+              onPick(pick);
+            }}
+          >
+            <rect x={cx} y={cy} width={COL - 8} height={SECTOR_H} rx="6" className="sector" />
+            <text x={cx + 10} y={cy + 19} className="sector-name mono">
+              {truncate(sector.name, 16)}
+            </text>
+            <text x={cx + COL - 18} y={cy + 19} className="sector-count" textAnchor="end">
+              {sector.done ? "done" : sector.stalled ? `${String(left)} ⏸` : String(left)}
+            </text>
+            <title>
+              {sector.name}: {String(sector.files.length)} files
+              {sector.phaseId === null ? "" : `, at ${sector.phaseId}`}
+              {sector.stalled ? ", stalled" : ""}
+            </title>
+          </g>
+        );
+      })}
+      {campaign.sectors.length === 0 ? (
+        <text x={X0 + 12} y={laneY + 24} className="small muted">
+          no sectors
+        </text>
+      ) : null}
+    </svg>
+  );
+};

package/src/app/components/campaigns/pick.ts

@@ -0,0 +1,7 @@
+// What the Campaign Browser can hold: the campaign itself, or one of its
+// phases, objectives or sectors.
+export type Pick =
+  | { readonly kind: "campaign" }
+  | { readonly kind: "phase"; readonly id: string }
+  | { readonly kind: "objective"; readonly id: string }
+  | { readonly kind: "sector"; readonly name: string };

package/src/app/components/lib/data.ts

@@ -0,0 +1,132 @@
+import { useEffect, useState } from "react";
+
+// The page's two reads and its one feed, all relative to the page: the bin
+// and the Vite plugin answer `__goodbones/*` beside it, and a static export
+// has them as files. Where the feed is absent the page is a snapshot.
+
+export type Loaded<T> =
+  | { readonly state: "loading"; readonly value: T | null; readonly error: null }
+  | { readonly state: "ready"; readonly value: T; readonly error: null }
+  | { readonly state: "failed"; readonly value: T | null; readonly error: string };
+
+const urlOf = (route: string): string => new URL(`__goodbones/${route}`, document.baseURI).href;
+
+const errorOf = (body: unknown, status: number): string =>
+  typeof body === "object" && body !== null && "error" in body
+    ? String(body.error)
+    : `HTTP ${String(status)}`;
+
+// `version` bumps when the feed says the repository changed; the value is
+// kept while the next one loads, so the page never blanks.
+export const useModel = <T>(route: string, version: number): Loaded<T> => {
+  const [loaded, setLoaded] = useState<Loaded<T>>({ state: "loading", value: null, error: null });
+  useEffect(() => {
+    let cancelled = false;
+    setLoaded((previous) => ({ state: "loading", value: previous.value, error: null }));
+    fetch(urlOf(route), { cache: "no-store" })
+      .then(async (response) => {
+        const body: unknown = await response.json();
+        if (cancelled) return;
+        if (!response.ok) {
+          setLoaded((previous) => ({
+            state: "failed",
+            value: previous.value,
+            error: errorOf(body, response.status),
+          }));
+          return;
+        }
+        setLoaded({ state: "ready", value: body as T, error: null });
+      })
+      .catch((cause: unknown) => {
+        if (cancelled) return;
+        setLoaded((previous) => ({ state: "failed", value: previous.value, error: String(cause) }));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [route, version]);
+  return loaded;
+};
+
+export type Feed = {
+  readonly live: boolean;
+  readonly version: number;
+  readonly changed: ReadonlyArray<string>;
+};
+
+export const useFeed = (): Feed => {
+  const [feed, setFeed] = useState<Feed>({ live: false, version: 0, changed: [] });
+  useEffect(() => {
+    if (typeof EventSource === "undefined") return undefined;
+    const events = new EventSource(urlOf("events"));
+    events.addEventListener("hello", () => {
+      setFeed((previous) => ({ ...previous, live: true }));
+    });
+    events.addEventListener("changed", (event) => {
+      let files: ReadonlyArray<string> = [];
+      try {
+        const data: unknown = JSON.parse((event as MessageEvent<string>).data);
+        if (
+          typeof data === "object" &&
+          data !== null &&
+          "files" in data &&
+          Array.isArray(data.files)
+        ) {
+          files = data.files.map(String);
+        }
+      } catch {
+        files = [];
+      }
+      setFeed((previous) => ({ live: true, version: previous.version + 1, changed: files }));
+    });
+    events.addEventListener("error", () => {
+      // A static export has no feed: the first error is the last.
+      if (events.readyState === EventSource.CLOSED) {
+        setFeed((previous) => ({ ...previous, live: false }));
+      }
+    });
+    return () => {
+      events.close();
+    };
+  }, []);
+  return feed;
+};
+
+// The page's route, in the hash: `#architecture` or `#campaigns`, with a
+// selection after a slash (`#architecture/packages/core/src/index.ts`).
+export type Route = {
+  readonly tab: "architecture" | "campaigns";
+  readonly selection: string | null;
+};
+
+export const routeOf = (hash: string): Route => {
+  const trimmed = hash.replace(/^#/, "");
+  const at = trimmed.indexOf("/");
+  const tab = at === -1 ? trimmed : trimmed.slice(0, at);
+  const selection = at === -1 ? null : decodeURIComponent(trimmed.slice(at + 1));
+  return { tab: tab === "campaigns" ? "campaigns" : "architecture", selection };
+};
+
+export const hashOf = (route: Route): string =>
+  `#${route.tab}${route.selection === null ? "" : `/${encodeURIComponent(route.selection)}`}`;
+
+export const useRoute = (): readonly [Route, (route: Route) => void] => {
+  const [route, setRoute] = useState<Route>(() => routeOf(window.location.hash));
+  useEffect(() => {
+    const onChange = (): void => {
+      setRoute(routeOf(window.location.hash));
+    };
+    window.addEventListener("hashchange", onChange);
+    return () => {
+      window.removeEventListener("hashchange", onChange);
+    };
+  }, []);
+  return [
+    route,
+    (next) => {
+      const hash = hashOf(next);
+      if (window.location.hash !== hash) window.history.replaceState(null, "", hash);
+      setRoute(next);
+    },
+  ];
+};

package/src/app/pages/index.astro

@@ -0,0 +1,34 @@
+---
+import "../styles/theme.css";
+
+import { Browser } from "../components/Browser.js";
+
+// The one page: both browsers as a React island rendered in the browser only,
+// since everything they draw comes from `__goodbones/*` beside this file.
+---
+
+<!doctype html>
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>goodbones browser</title>
+    <meta
+      name="description"
+      content="The Architecture Browser and the Campaign Browser: a repository's tree with its architecture.yaml laid over it, and every campaign's phases, sectors and holdouts."
+    />
+    <link rel="icon" href="favicon.svg" type="image/svg+xml" />
+    <script is:inline>
+      try {
+        const held = window.localStorage.getItem("goodbones-theme");
+        if (held === "light" || held === "dark") document.documentElement.dataset.theme = held;
+        else if (window.matchMedia("(prefers-color-scheme: light)").matches)
+          document.documentElement.dataset.theme = "light";
+      } catch {}
+    </script>
+  </head>
+  <body>
+    <Browser client:only="react" />
+    <noscript>The goodbones browser needs JavaScript.</noscript>
+  </body>
+</html>

package/src/app/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="#141311"/><path d="M8 8h6v6H8zM18 8h6v6h-6zM8 18h6v6H8zM18 18h6v6h-6z" fill="#e0714a"/><path d="M14 11h4M11 14v4M21 14v4M14 21h4" stroke="#f6f2ea" stroke-width="1.5"/></svg>