@tsplc/debug 0.0.0-stage → 0.2.17

package/src/ui/dev.ts

@@ -0,0 +1,579 @@
+/**
+ * Serves the debugger UI under `/debug/` against a fake conveyor line, for working on the UI without a PLC:
+ *   bun packages/debug/src/ui/dev.ts [--port 4870] [--token secret] [--mismatch] [--flaky]
+ * `--flaky` closes the engineering login for 10 s every minute; `--mismatch` reports another controller build.
+ */
+import { parseArgs } from "node:util";
+import type {
+  AppRecord,
+  DeviceState,
+  JobState,
+  Quality,
+  RequestTrace,
+  Sample,
+  Session,
+  StreamEvents,
+  TimelineEntry,
+  TraceEvent,
+} from "../api.ts";
+import { noLogin } from "../login.ts";
+import { fixtureManifest as manifest, fixtureQuality, fixtureValue } from "./fixture.ts";
+import { loadUi } from "./index.ts";
+import { ManifestTree } from "./tree.ts";
+
+const { values: args } = parseArgs({
+  options: {
+    port: { type: "string", default: "0" },
+    token: { type: "string" },
+    mismatch: { type: "boolean", default: false },
+    flaky: { type: "boolean", default: false },
+  },
+});
+
+const PREFIX = "/debug";
+const READ_INTERVAL_MS = 1000;
+const tree = new ManifestTree(manifest);
+const started = Date.now();
+const iso = (ms: number) => new Date(ms).toISOString();
+const hostToPlc = (ms: number) => ms - started + 86_400_000;
+
+const session: Session = {
+  build: {
+    manifest: manifest.build.id,
+    controller: args.mismatch ? "7be03d11f5a2" : manifest.build.id,
+    matches: !args.mismatch,
+  },
+  connection: {
+    state: "connected",
+    since: iso(started - 12 * 60_000),
+    endpoint: "http://line-pc:4850",
+  },
+  reading: { method: "engineering login", intervalMs: READ_INTERVAL_MS },
+  tasks: [
+    { name: "MainTask", scan: 0, scansPerSecond: 99.9, dropped: 0 },
+    { name: "ServiceTask", scan: 0, scansPerSecond: 20, dropped: 0 },
+  ],
+  clock: { offsetMs: 12.4, uncertaintyMs: 2.1 },
+  release: { id: "2026-11-09.3", deployedAt: iso(started - 25 * 60_000), operation: "deploy" },
+  projectRoot: "/srv/conveyor-line",
+};
+
+interface Subscriber {
+  watch: string[];
+  send<K extends keyof StreamEvents>(event: K, data: StreamEvents[K]): void;
+}
+const subscribers = new Set<Subscriber>();
+const broadcast = <K extends keyof StreamEvents>(event: K, data: StreamEvents[K]) => {
+  for (const subscriber of subscribers) subscriber.send(event, data);
+};
+
+const timeline: TimelineEntry[] = [];
+const record = (entry: TimelineEntry) => {
+  timeline.push(entry);
+  broadcast("timeline", entry);
+};
+
+let groups: Record<string, string[]> = {
+  "Diverter 3": [
+    "program.diverters.binTrackers[3].bin",
+    "program.diverters.binTrackers[3].count",
+    "line.conveyors.inbound.cards[3].input.sensor",
+  ],
+  "Scanner 0": [
+    "program.scanners.routeLookups[0].code",
+    "program.scanners.routeLookups[0].lane",
+    "program.scanners.routeLookups[0].pending",
+  ],
+  Parcels: ["program.tracking.parcels[0].weightKg", "program.tracking.parcels[0].state"],
+};
+
+const sample = (path: string, now: number): Sample | undefined => {
+  const node = tree.resolve(path);
+  if (!node || !node.readable || node.constant || tree.expandable(node)) return undefined;
+  return {
+    path,
+    value: fixtureValue(path, node.type, now),
+    ...fixtureQuality(path),
+    receivedAt: iso(now),
+  };
+};
+
+const scans = (now: number) => ({
+  main: Math.floor((now - started) / 10) + 4_210_000,
+  service: Math.floor((now - started) / 50) + 842_000,
+});
+
+let sequence = 0;
+const traced = (now: number): TraceEvent => {
+  const site = manifest.events[Math.floor(Math.random() * manifest.events.length)]!;
+  const scan = site.task === "MainTask" ? scans(now).main : scans(now).service;
+  return {
+    sequence: ++sequence,
+    task: site.task,
+    scan,
+    plcTime: hostToPlc(now),
+    site: site.id,
+    value: site.text.includes("Present")
+      ? 2
+      : site.text.includes("Arriving")
+        ? 1
+        : fixtureValue(site.path, site.type, now),
+    operands: site.operands.map(({ text, path, type, stable }) => ({
+      text,
+      path,
+      stable,
+      value: path ? fixtureValue(path, type, now) : Math.random() < 0.8,
+    })),
+  };
+};
+const traceEntry = (now: number): TimelineEntry => ({
+  at: iso(now),
+  approximate: true,
+  source: "plc",
+  kind: "trace",
+  trace: traced(now),
+});
+
+const origin = (now: number, source: string) => ({
+  source,
+  scan: scans(now).service,
+  time: hostToPlc(now),
+});
+const reported = (now: number): AppRecord => {
+  const scanner = Math.floor(Math.random() * 4);
+  const roll = Math.random();
+  if (roll < 0.7)
+    return {
+      kind: "event",
+      event: "bin scanned",
+      properties: { barcode: `CON-MD3-${10000 + (Math.floor(now / 1000) % 90000)}-A`, scanner },
+      ...origin(now, "src/scanners/route-lookup.ts:120"),
+    };
+  if (roll < 0.95)
+    return {
+      kind: "log",
+      level: roll < 0.85 ? "info" : "warn",
+      message: roll < 0.85 ? "route resolved" : "route lookup retried",
+      properties: { scanner, lane: scanner % 3 },
+      ...origin(now, "src/scanners/route-lookup.ts:131"),
+    };
+  return {
+    kind: "exception",
+    code: 2,
+    name: "Timeout",
+    handled: true,
+    function: "RouteLookup.resolve",
+    instance: `program.scanners.routeLookups[${scanner}]`,
+    properties: {},
+    ...origin(now, "src/scanners/route-lookup.ts:24"),
+  };
+};
+const appEntry = (now: number, record: AppRecord): TimelineEntry => ({
+  at: iso(now),
+  approximate: true,
+  source: "plc",
+  kind: "app",
+  task: "ServiceTask",
+  sequence: ++sequence,
+  record,
+});
+
+let requestSeq = 400;
+const requests = new Map<number, RequestTrace>();
+const traceRequest = (request: RequestTrace) => {
+  requests.set(request.seq, request);
+  broadcast("request", request);
+  record({ at: request.startedAt, approximate: false, source: "server", kind: "request", request });
+};
+
+const resolveSteps = manifest.jobs[0]!.steps;
+const jobs = new Map<number, JobState>();
+const job = (state: Partial<JobState> & { id: number }): JobState => ({
+  quality: "good",
+  busy: false,
+  ...state,
+});
+
+const stuckSince = started - 41_000;
+const stuckRequest: RequestTrace = {
+  seq: 398,
+  service: "routing.resolve",
+  job: 4,
+  sequence: 77,
+  startedAt: iso(stuckSince),
+  status: "pending",
+};
+const failedRequest: RequestTrace = {
+  seq: 399,
+  service: "bins.release",
+  job: 5,
+  sequence: 12,
+  startedAt: iso(started - 95_000),
+  durationMs: 212,
+  status: "error",
+  httpStatus: 503,
+  error: "bins service unavailable",
+};
+const timedOut: RequestTrace = {
+  seq: 397,
+  service: "routing.resolve",
+  job: 2,
+  sequence: 31,
+  startedAt: iso(started - 130_000),
+  durationMs: 1500,
+  status: "timeout",
+};
+for (const request of [timedOut, stuckRequest, failedRequest]) requests.set(request.seq, request);
+
+const failures: (AppRecord & { kind: "exception" })[] = [
+  {
+    kind: "exception",
+    code: 2,
+    name: "Timeout",
+    handled: false,
+    function: "RouteLookup.resolve",
+    instance: "program.scanners.routeLookups[1]",
+    properties: {},
+    source: "src/scanners/route-lookup.ts:22",
+    scan: 0,
+    time: 0,
+  },
+  {
+    kind: "exception",
+    code: 3,
+    name: "ServiceError",
+    handled: false,
+    function: "BinTracker.release",
+    instance: "program.diverters.binTrackers[3]",
+    properties: { bin: 3 },
+    source: "src/diverters/bin-tracker.ts:55",
+    scan: 0,
+    time: 0,
+  },
+];
+/** When `timedOut` and `failedRequest` ended. */
+const failedAt = [started - 128_500, started - 94_788];
+jobs.set(
+  2,
+  job({
+    id: 2,
+    startedAt: timedOut.startedAt,
+    failure: { at: iso(failedAt[0]!), code: 2, name: "Timeout", source: failures[0]!.source },
+  }),
+);
+jobs.set(3, job({ id: 3 }));
+jobs.set(
+  5,
+  job({
+    id: 5,
+    startedAt: failedRequest.startedAt,
+    failure: { at: iso(failedAt[1]!), code: 3, name: "ServiceError", source: failures[1]!.source },
+  }),
+);
+
+let lookup: RequestTrace | undefined;
+const updateJobs = (now: number) => {
+  const phase = (now - started) % 4100;
+  if (phase < 2600 && !lookup) {
+    lookup = {
+      seq: ++requestSeq,
+      service: "routing.resolve",
+      job: 1,
+      sequence: requestSeq - 300,
+      startedAt: iso(now),
+      status: "pending",
+    };
+    traceRequest(lookup);
+  }
+  if (phase >= 2600 && lookup) {
+    traceRequest({
+      ...lookup,
+      status: "ok",
+      httpStatus: 200,
+      durationMs: now - Date.parse(lookup.startedAt),
+    });
+    lookup = undefined;
+  }
+  jobs.set(
+    1,
+    lookup
+      ? job({
+          id: 1,
+          busy: true,
+          step: 1,
+          current: { ...resolveSteps[1]! },
+          startedAt: lookup.startedAt,
+          elapsedMs: now - Date.parse(lookup.startedAt),
+          request: {
+            service: "routing.resolve",
+            sequence: requestSeq - 300,
+            trace: requests.get(requestSeq),
+          },
+        })
+      : job({ id: 1, startedAt: requests.get(requestSeq)?.startedAt }),
+  );
+  jobs.set(
+    4,
+    job({
+      id: 4,
+      busy: true,
+      step: 1,
+      current: { ...resolveSteps[1]! },
+      startedAt: iso(stuckSince),
+      elapsedMs: now - stuckSince,
+      request: { service: "routing.resolve", sequence: 77, trace: stuckRequest },
+    }),
+  );
+  for (const id of [1, 4]) broadcast("job", jobs.get(id)!);
+};
+
+const devices = (now: number): DeviceState[] => {
+  const bit = (path: string) => (fixtureValue(path, "BOOL", now) ? 1 : 0);
+  const sensors = Array.from({ length: 10 }, (_, index) =>
+    bit(`line.conveyors.inbound.cards[${index}].input.sensor`),
+  );
+  const motors = Array.from({ length: 10 }, (_, index) =>
+    bit(`line.conveyors.inbound.cards[${index}].output.motor`),
+  );
+  const pack = (bits: number[]) => bits.reduce((byte, value, index) => byte | (value << index), 0);
+  const jam = bit("line.conveyors.inbound.cards[0].input.jam") ? 0 : 1;
+  const resultId = Math.floor((now - started) / 1700) & 0xffff;
+  const speed = 1450 + Math.round(8 * Math.sin(now / 900));
+  const quality: Quality = session.connection.state === "connected" ? "good" : "unavailable";
+  const bound = (device: string) =>
+    manifest.io
+      .filter((entry) => entry.device === device)
+      .map((entry) => ({
+        id: entry.channel!,
+        path: entry.path,
+        value: fixtureValue(entry.path, entry.type, now),
+        quality,
+      }));
+  return [
+    {
+      id: "io-inbound-1",
+      health: { state: "ok", value: 3, name: "Running", diagnostic: false, quality },
+      assemblies: [
+        {
+          direction: "input",
+          bytes: [pack(sensors.slice(0, 8)), pack(sensors.slice(8)) | (jam << 4), 0, 0],
+          quality,
+        },
+        { direction: "output", bytes: [pack(motors.slice(0, 8)), pack(motors.slice(8))], quality },
+      ],
+      channels: bound("io-inbound-1"),
+      status: { "Module power": { value: true, quality }, "Bus fault": { value: false, quality } },
+    },
+    {
+      id: "scanner-1",
+      health: { state: "unknown", quality: "unavailable" },
+      assemblies: [
+        {
+          direction: "input",
+          bytes: [0b101 | ((resultId & 1) << 1), 0, resultId & 0xff, resultId >> 8, 11, 0, 0, 0],
+          quality,
+        },
+        { direction: "output", bytes: null, quality: "unavailable" },
+      ],
+      channels: [],
+      status: {},
+    },
+    {
+      id: "vfd-inbound",
+      health: {
+        state: "fault",
+        value: 7,
+        name: "Fault",
+        diagnostic: true,
+        message: "F07 DC link overvoltage",
+        quality,
+      },
+      assemblies: [
+        { direction: "input", bytes: [0x07, 0x02, speed & 0xff, speed >> 8], quality },
+        { direction: "output", bytes: [0x06, 0x00, 1500 & 0xff, 1500 >> 8], quality },
+      ],
+      channels: bound("vfd-inbound"),
+      status: {},
+    },
+  ];
+};
+
+const backlog = () => {
+  const now = Date.now();
+  record({
+    at: session.release!.deployedAt,
+    approximate: false,
+    source: "agent",
+    kind: "deploy",
+    release: session.release!.id,
+    operation: "deploy",
+    build: manifest.build.id,
+    user: "dana",
+    host: "LINE-PC-02",
+  });
+  record({
+    at: iso(now - 18 * 60_000),
+    approximate: false,
+    source: "agent",
+    kind: "audit",
+    command: "force",
+    values: { "line.conveyors.inbound.cards[4].output.motor": "TRUE" },
+    previous: { "line.conveyors.inbound.cards[4].output.motor": "FALSE" },
+    user: "dana",
+    host: "LINE-PC-02",
+  });
+  record({
+    at: iso(now - 17 * 60_000),
+    approximate: false,
+    source: "agent",
+    kind: "audit",
+    command: "unforce",
+    values: { "line.conveyors.inbound.cards[4].output.motor": "" },
+    user: "dana",
+    host: "LINE-PC-02",
+  });
+  record({
+    at: session.connection.since,
+    approximate: false,
+    source: "debugger",
+    kind: "connection",
+    state: "connected",
+  });
+  for (const request of [timedOut, failedRequest, stuckRequest])
+    record({
+      at: request.startedAt,
+      approximate: false,
+      source: "server",
+      kind: "request",
+      request,
+    });
+  failures.forEach((failure, index) => record(appEntry(failedAt[index]!, failure)));
+  for (let at = now - 180_000; at < now; at += 900 + Math.random() * 1200)
+    record(Math.random() < 0.5 ? traceEntry(at) : appEntry(at, reported(at)));
+  timeline.sort((a, b) => Date.parse(a.at) - Date.parse(b.at));
+};
+
+const tick = () => {
+  const now = Date.now();
+  if (args.flaky) {
+    const lost = (now - started) % 60_000 > 50_000;
+    if (lost !== (session.connection.state === "unavailable")) {
+      session.connection = lost
+        ? { ...session.connection, state: "unavailable", since: iso(now), error: noLogin }
+        : { state: "connected", since: iso(now), endpoint: session.connection.endpoint };
+      broadcast("session", session);
+      record({
+        at: iso(now),
+        approximate: false,
+        source: "debugger",
+        kind: "connection",
+        state: session.connection.state,
+        error: session.connection.error,
+      });
+    }
+  }
+  if (session.connection.state !== "connected") return;
+  const { main, service } = scans(now);
+  session.tasks = [
+    { name: "MainTask", scan: main, scansPerSecond: 99.6 + Math.random() * 0.6, dropped: 0 },
+    { name: "ServiceTask", scan: service, scansPerSecond: 19.9 + Math.random() * 0.2, dropped: 3 },
+  ];
+  for (const subscriber of subscribers)
+    for (const path of subscriber.watch) {
+      const next = sample(path, now);
+      if (next) subscriber.send("sample", next);
+    }
+  if (Math.random() < 0.45) record(traceEntry(now));
+  if (Math.random() < 0.6) record(appEntry(now, reported(now)));
+  updateJobs(now);
+  broadcast("session", session);
+  for (const device of devices(now)) broadcast("device", device);
+};
+
+const stream = (request: Request, watch: string[]) => {
+  const encoder = new TextEncoder();
+  let subscriber: Subscriber | undefined;
+  const body = new ReadableStream<Uint8Array>({
+    start(controller) {
+      const self: Subscriber = {
+        watch,
+        send(event, data) {
+          try {
+            controller.enqueue(
+              encoder.encode(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`),
+            );
+          } catch {
+            subscribers.delete(self);
+          }
+        },
+      };
+      subscriber = self;
+      subscribers.add(self);
+      self.send("session", session);
+      for (const path of watch) {
+        const next = sample(path, Date.now());
+        if (next) self.send("sample", next);
+      }
+    },
+    cancel() {
+      if (subscriber) subscribers.delete(subscriber);
+    },
+  });
+  request.signal.addEventListener("abort", () => subscriber && subscribers.delete(subscriber));
+  return new Response(body, {
+    headers: { "Content-Type": "text/event-stream", "Cache-Control": "no-store" },
+  });
+};
+
+const api = async (request: Request, route: string, url: URL): Promise<Response> => {
+  const now = Date.now();
+  const list = (name: string) => url.searchParams.get(name)?.split(",").filter(Boolean) ?? [];
+  if (route === "session") return Response.json(session);
+  if (route === "manifest") return Response.json(manifest);
+  if (route === "stream") return stream(request, list("watch"));
+  if (route === "values")
+    return Response.json(list("paths").flatMap((path) => sample(path, now) ?? []));
+  if (route === "jobs") return Response.json([...jobs.values()]);
+  if (route === "hardware") return Response.json(devices(now));
+  if (route === "timeline") {
+    const since = url.searchParams.get("since");
+    return Response.json(
+      since
+        ? timeline.filter((entry) => Date.parse(entry.at) > Date.parse(since))
+        : timeline.slice(-1000),
+    );
+  }
+  if (route === "watch" && request.method === "PUT") {
+    groups = ((await request.json()) as { groups: Record<string, string[]> }).groups;
+    return Response.json({ groups });
+  }
+  if (route === "watch") return Response.json({ groups });
+  return new Response("Not found", { status: 404 });
+};
+
+backlog();
+setInterval(tick, READ_INTERVAL_MS);
+const ui = await loadUi();
+const server = Bun.serve({
+  port: Number(args.port),
+  // Server-Sent Event streams stay open for as long as the page does.
+  idleTimeout: 0,
+  fetch(request) {
+    const url = new URL(request.url);
+    if (url.pathname === "/") return Response.redirect(`${PREFIX}/${url.search}`, 302);
+    if (url.pathname === PREFIX || url.pathname === `${PREFIX}/`)
+      return new Response(ui.html, { headers: { "Content-Type": "text/html; charset=utf-8" } });
+    if (url.pathname === `${PREFIX}/ui.js`)
+      return new Response(ui.script, {
+        headers: { "Content-Type": "text/javascript; charset=utf-8" },
+      });
+    if (!url.pathname.startsWith(`${PREFIX}/api/`))
+      return new Response("Not found", { status: 404 });
+    if (args.token && url.searchParams.get("token") !== args.token)
+      return new Response("Unauthorized", { status: 401 });
+    return api(request, url.pathname.slice(`${PREFIX}/api/`.length), url);
+  },
+});
+console.log(
+  `Debugger UI with fixture data: ${server.url}debug/${args.token ? `?token=${args.token}` : ""}`,
+);