@takodotid/circuit 0.43.0 → 1.0.0-rc.1

package/src/studio/app/src/components/SessionsView.vue

@@ -0,0 +1,35 @@
+<!-- Every BGP session of the project, with what it takes from its group, and what is at its far end. -->
+<script setup lang="ts">
+import { computed } from "vue";
+import type { StudioData } from "../../../types";
+import DataTable, { type Row } from "./DataTable.vue";
+
+const props = defineProps<{ data: StudioData }>();
+const devices = computed(() => new Set(props.data.devices.map((device) => device.name)));
+
+const rows = computed<Row[]>(() =>
+    props.data.sessions.map((session) => ({
+        cells: [
+            { device: session.device },
+            session.name,
+            session.address,
+            session.remoteAs ? `AS${session.remoteAs}` : "",
+            session.role,
+            session.group,
+            session.import,
+            session.export,
+            session.far && devices.value.has(session.far) ? { device: session.far } : session.far,
+            session.oneSided ? "no session back" : "",
+        ],
+    }))
+);
+</script>
+
+<template>
+    <h2>BGP sessions</h2>
+    <DataTable
+        :head="['Device', 'Neighbor', 'Address', 'Remote AS', 'Role', 'Group', 'Import', 'Export', 'Far end', 'Note']"
+        :rows="rows"
+        csv="bgp-sessions"
+    />
+</template>

package/src/studio/app/src/components/Settings.vue

@@ -0,0 +1,95 @@
+<!-- Settings as a table of field and value. A value that holds named items, or a list of items, is a table inside; any other is one line of text. -->
+<script setup lang="ts">
+import { computed } from "vue";
+import { Format } from "../lib/format";
+
+const props = defineProps<{ value: unknown }>();
+
+type Shown =
+    | { kind: "text"; text: string }
+    | { kind: "settings"; value: Record<string, unknown> }
+    | { kind: "record"; head: string[]; rows: { name: string; cells: unknown[] }[] }
+    | { kind: "list"; head: string[]; rows: unknown[][] };
+
+/** The fields any of the items hold, in the order first seen. */
+const columnsOf = (items: Record<string, unknown>[]) => [...new Set(items.flatMap((item) => Object.keys(item)))];
+
+function shown(value: unknown): Shown {
+    if (Format.isObject(value) && Object.keys(value).length && !Format.isSecret(value)) {
+        const inner = Object.entries(value).filter(([, item]) => item !== undefined);
+        const allObjects = inner.every(([, item]) => Format.isObject(item) && !Format.isSecret(item));
+        if (!allObjects) return { kind: "settings", value };
+
+        const items = inner.map(([, item]) => item as Record<string, unknown>);
+        const head = columnsOf(items);
+        return { kind: "record", head, rows: inner.map(([name], index) => ({ name, cells: head.map((column) => items[index]![column]) })) };
+    }
+
+    if (Array.isArray(value) && value.some((item) => Format.isObject(item) && !Format.isSecret(item))) {
+        const items = value.map((item) => (Format.isObject(item) ? item : { value: item }));
+        const head = columnsOf(items);
+        return { kind: "list", head, rows: items.map((item) => head.map((column) => item[column])) };
+    }
+
+    return { kind: "text", text: Format.compact(value) };
+}
+
+const entries = computed(() =>
+    Format.isObject(props.value)
+        ? Object.entries(props.value)
+              .filter(([, value]) => value !== undefined)
+              .map(([key, value]) => ({ key, item: shown(value) }))
+        : []
+);
+</script>
+
+<template>
+    <p v-if="!entries.length" class="muted">None.</p>
+    <table v-else class="data settings">
+        <tbody>
+            <tr v-for="{ key, item } in entries" :key="key">
+                <th>
+                    <code>{{ key }}</code>
+                </th>
+                <td>
+                    <template v-if="item.kind === 'text'">{{ item.text }}</template>
+                    <Settings v-else-if="item.kind === 'settings'" :value="item.value" />
+                    <table v-else-if="item.kind === 'record'" class="data">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th v-for="column in item.head" :key="column">
+                                    <code>{{ column }}</code>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="row in item.rows" :key="row.name">
+                                <td>
+                                    <strong>{{ row.name }}</strong>
+                                </td>
+                                <td v-for="(cell, at) in row.cells" :key="at">{{ Format.compact(cell) }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <table v-else class="data">
+                        <thead>
+                            <tr>
+                                <th>#</th>
+                                <th v-for="column in item.head" :key="column">
+                                    <code>{{ column }}</code>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="(row, index) in item.rows" :key="index">
+                                <td>{{ index + 1 }}</td>
+                                <td v-for="(cell, at) in row" :key="at">{{ Format.compact(cell) }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</template>

package/src/studio/app/src/components/ToolsView.vue

@@ -0,0 +1,118 @@
+<!-- Studio's tools: trace an address through the project, and find the cables that carry a VLAN between two devices. -->
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import type { StudioData } from "../../../types";
+import { go, store } from "../lib/store";
+import { Tools } from "../lib/tools";
+import DataTable from "./DataTable.vue";
+
+const props = defineProps<{ data: StudioData }>();
+
+const tool = computed(() => (store.route.parts[0] === "vlan" ? "vlan" : "trace"));
+
+// A trace has its own address, such as `#tools/trace/192.0.2.5`, to bookmark or send.
+const typed = ref(store.route.parts[0] === "trace" ? (store.route.parts[1] ?? "") : "");
+const traced = computed(() => (tool.value === "trace" && store.route.parts[1] ? Tools.trace(props.data, store.route.parts[1]) : undefined));
+const traceFailed = computed(() => tool.value === "trace" && Boolean(store.route.parts[1]) && !traced.value);
+
+const vlans = computed(() => [...new Set(props.data.devices.flatMap((device) => Object.keys(device.switching?.vlans ?? {})))].sort());
+const devices = computed(() => props.data.devices.map((device) => device.name));
+const vlan = ref("");
+const from = ref("");
+const to = ref("");
+const asked = ref(false);
+const path = computed(() =>
+    asked.value && vlan.value && from.value && to.value ? Tools.vlanPath(props.data, vlan.value, from.value, to.value) : undefined
+);
+</script>
+
+<template>
+    <h2>Tools</h2>
+    <div class="tabs">
+        <button :aria-pressed="tool === 'trace'" @click="go('tools/trace')">Trace an address</button>
+        <button :aria-pressed="tool === 'vlan'" @click="go('tools/vlan')">VLAN path</button>
+    </div>
+
+    <template v-if="tool === 'trace'">
+        <p class="muted">
+            Which device holds an address, how each device would reach it from what the project says, and every rule that names it. A route
+            learned from BGP or OSPF is not in the project, so a device with no route here may still reach it.
+        </p>
+        <form class="tool-form" @submit.prevent="go(`tools/trace/${typed.trim()}`)">
+            <label class="field">Address <input v-model="typed" placeholder="192.0.2.5" /></label>
+            <button class="primary" type="submit">Trace</button>
+        </form>
+        <p v-if="traceFailed" class="verdict reject">That is not one address, such as 192.0.2.5 or 2001:db8::5.</p>
+        <template v-if="traced">
+            <h3>Held by</h3>
+            <DataTable
+                :head="['Device', 'On', 'Address']"
+                :rows="traced.held.map((entry) => ({ cells: [{ device: entry.device }, entry.holder, entry.address] }))"
+            />
+            <h3>How each device reaches it</h3>
+            <DataTable
+                :head="['Device', 'Table', 'How', 'Prefix', 'Via', 'Through', 'Note']"
+                :rows="
+                    traced.routes.map((route) => ({
+                        muted: route.kind === 'none',
+                        cells: [
+                            { device: route.device },
+                            route.table,
+                            route.kind === 'none' ? 'no route in the project' : route.kind,
+                            route.prefix,
+                            route.via,
+                            route.through,
+                            route.note,
+                        ],
+                    }))
+                "
+                csv="trace"
+            />
+            <h3>Rules that name it</h3>
+            <DataTable
+                :head="['Device', 'Where', 'Rule', 'Matches its', 'Then', 'Description']"
+                :rows="
+                    traced.rules.map((rule) => ({
+                        cells: [{ device: rule.device }, rule.where, rule.rule, rule.side, rule.then, rule.description],
+                    }))
+                "
+            />
+        </template>
+    </template>
+
+    <template v-else>
+        <p class="muted">
+            The fewest cables that carry a VLAN from one device to another, by each port's VLANs and links, at both ends of each cable.
+        </p>
+        <form class="tool-form" @submit.prevent="asked = true">
+            <label class="field"
+                >VLAN
+                <select v-model="vlan" @change="asked = false">
+                    <option v-for="name in vlans" :key="name">{{ name }}</option>
+                </select>
+            </label>
+            <label class="field"
+                >From
+                <select v-model="from" @change="asked = false">
+                    <option v-for="name in devices" :key="name">{{ name }}</option>
+                </select>
+            </label>
+            <label class="field"
+                >To
+                <select v-model="to" @change="asked = false">
+                    <option v-for="name in devices" :key="name">{{ name }}</option>
+                </select>
+            </label>
+            <button class="primary" type="submit">Find the path</button>
+        </form>
+        <template v-if="asked && vlan && from && to">
+            <p v-if="!path" class="verdict reject">No path of cables carries {{ vlan }} from {{ from }} to {{ to }}.</p>
+            <p v-else-if="!path.length" class="muted">{{ from }} and {{ to }} are one device.</p>
+            <DataTable
+                v-else
+                :head="['From', 'Port', 'To', 'Port']"
+                :rows="path.map((hop) => ({ cells: [{ device: hop.device }, hop.port, { device: hop.farDevice }, hop.farPort] }))"
+            />
+        </template>
+    </template>
+</template>

package/src/studio/app/src/components/VlansView.vue

@@ -0,0 +1,50 @@
+<!-- Every VLAN of the project: its ID on each device, what it is for, and the ports that carry it. -->
+<script setup lang="ts">
+import { computed } from "vue";
+import type { StudioData } from "../../../types";
+import DataTable, { type Row } from "./DataTable.vue";
+
+const props = defineProps<{ data: StudioData }>();
+
+const rows = computed<Row[]>(() => {
+    const byName = new Map<string, { ids: Set<number>; descriptions: Set<string>; devices: string[]; ports: string[] }>();
+
+    for (const device of props.data.devices) {
+        for (const [name, vlan] of Object.entries(device.switching?.vlans ?? {})) {
+            if (!vlan) continue;
+            const entry = byName.get(name) ?? { ids: new Set(), descriptions: new Set(), devices: [], ports: [] };
+            entry.ids.add(vlan.id);
+            if (vlan.description) entry.descriptions.add(vlan.description);
+            entry.devices.push(device.name);
+            byName.set(name, entry);
+        }
+
+        // A port carries what its LAG carries.
+        const holders = [
+            ...Object.entries(device.interfaces?.ethernet ?? {}).filter(([, port]) => port && !port.in_lag),
+            ...Object.entries(device.interfaces?.lag ?? {}),
+        ];
+        for (const [holder, settings] of holders) {
+            const carried = [settings?.access_vlan, settings?.native_vlan, ...(settings?.trunk_vlans ?? [])];
+            for (const name of new Set(carried)) if (name) byName.get(name)?.ports.push(`${device.name} ${holder}`);
+        }
+    }
+
+    return [...byName]
+        .sort(([, a], [, b]) => Math.min(...a.ids) - Math.min(...b.ids))
+        .map(([name, entry]) => ({
+            cells: [
+                name,
+                [...entry.ids].join(", ") + (entry.ids.size > 1 ? " (differs by device)" : ""),
+                [...entry.descriptions].join(" / "),
+                entry.devices.join(", "),
+                entry.ports.length,
+            ],
+        }));
+});
+</script>
+
+<template>
+    <h2>VLANs</h2>
+    <DataTable :head="['VLAN', 'ID', 'Description', 'Devices', 'Ports and LAGs carrying it']" :rows="rows" csv="vlans" />
+</template>

package/src/studio/app/src/lib/csv.ts

@@ -0,0 +1,19 @@
+// Saving what Studio shows: a table as CSV, and the graph as an image.
+
+export class Export {
+    /** A table's rows as CSV, each cell quoted when it needs to be. */
+    static csv(head: readonly string[], rows: readonly (readonly string[])[]): string {
+        const cell = (text: string) => (/[",\n]/.test(text) ? `"${text.replaceAll('"', '""')}"` : text);
+        return [head, ...rows].map((row) => row.map(cell).join(",")).join("\n") + "\n";
+    }
+
+    /** Hand a file to the browser to save. */
+    static save(name: string, blob: Blob): void {
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = name;
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+    }
+}

package/src/studio/{public/diff.js → app/src/lib/diff.ts}

@@ -1,37 +1,24 @@
-// @ts-check
 // A line diff, after Myers' "An O(ND) Difference Algorithm": the fewest lines added and removed that turn one text into another.
 
-/** @typedef {{ kind: "same" | "removed" | "added", text: string }} DiffLine */
+export type DiffLine = { kind: "same" | "removed" | "added"; text: string };
 
 export class Diff {
     /** Past this many differences, two texts are too far apart to show line by line. */
-    static #MOST_DIFFERENCES = 4000;
-
-    /**
-     * The lines of `before` and `after` in order, each marked as kept, removed or added. Undefined when they differ in more than a few thousand lines.
-     *
-     * @param {readonly string[]} before
-     * @param {readonly string[]} after
-     * @returns {DiffLine[] | undefined}
-     */
-    static lines(before, after) {
+    private static readonly MOST_DIFFERENCES = 4000;
+
+    /** The lines of `before` and `after` in order, each marked as kept, removed or added. Undefined when they differ in more than a few thousand lines. */
+    static lines(before: readonly string[], after: readonly string[]): DiffLine[] | undefined {
         const n = before.length;
         const m = after.length;
-        const limit = Math.min(n + m, Diff.#MOST_DIFFERENCES);
+        const limit = Math.min(n + m, Diff.MOST_DIFFERENCES);
         const offset = limit + 1;
 
         // How far along `before` each diagonal reaches, and a copy of that for each number of differences, to walk back through.
         const reach = new Int32Array(2 * offset + 1);
-        /** @type {Int32Array[]} */
-        const trace = [];
+        const trace: Int32Array[] = [];
 
-        /**
-         * Where diagonal k reached after d differences.
-         *
-         * @param {number} d
-         * @param {number} k
-         */
-        const reached = (d, k) => /** @type {Int32Array} */ (trace[d])[k + d] ?? 0;
+        /** Where diagonal k reached after d differences. */
+        const reached = (d: number, k: number) => trace[d]![k + d] ?? 0;
 
         for (let d = 0; d <= limit; d++) {
             for (let k = -d; k <= d; k += 2) {
@@ -48,7 +35,7 @@ export class Diff {
 
                 if (x >= n && y >= m) {
                     trace.push(reach.slice(offset - d, offset + d + 1));
-                    return Diff.#walkBack(before, after, trace, reached);
+                    return Diff.walkBack(before, after, trace, reached);
                 }
             }
 
@@ -58,18 +45,14 @@ export class Diff {
         return undefined;
     }
 
-    /**
-     * The edits, found by walking back from the end through what each step reached.
-     *
-     * @param {readonly string[]} before
-     * @param {readonly string[]} after
-     * @param {Int32Array[]} trace
-     * @param {(d: number, k: number) => number} reached
-     * @returns {DiffLine[]}
-     */
-    static #walkBack(before, after, trace, reached) {
-        /** @type {DiffLine[]} */
-        const lines = [];
+    /** The edits, found by walking back from the end through what each step reached. */
+    private static walkBack(
+        before: readonly string[],
+        after: readonly string[],
+        trace: Int32Array[],
+        reached: (d: number, k: number) => number
+    ): DiffLine[] {
+        const lines: DiffLine[] = [];
         let x = before.length;
         let y = after.length;
 
@@ -96,4 +79,26 @@ export class Diff {
 
         return lines.reverse();
     }
+
+    /** What to show of a diff: each changed line with a few lines around it, and runs of the same folded into a count. */
+    static shown(lines: readonly DiffLine[], context = 3): ({ kind: "fold"; count: number } | DiffLine)[] {
+        const near = lines.map((_, index) =>
+            lines.slice(Math.max(0, index - context), index + context + 1).some((line) => line.kind !== "same")
+        );
+        const shown: ({ kind: "fold"; count: number } | DiffLine)[] = [];
+        let folded = 0;
+
+        for (const [index, line] of lines.entries()) {
+            if (!near[index]) {
+                folded++;
+                continue;
+            }
+            if (folded) shown.push({ kind: "fold", count: folded });
+            folded = 0;
+            shown.push(line);
+        }
+        if (folded) shown.push({ kind: "fold", count: folded });
+
+        return shown;
+    }
 }

package/src/studio/app/src/lib/format.ts

@@ -0,0 +1,38 @@
+// A value of the model as text, the way Studio's tables show it.
+
+export class Format {
+    static isObject(value: unknown): value is Record<string, unknown> {
+        return typeof value === "object" && value !== null && !Array.isArray(value);
+    }
+
+    /** `secret("NAME")` or `secretFile("path")` in the model: shown as the project writes it, never as a value. */
+    static isSecret(value: unknown): value is { secret: string } | { secret_file: string } {
+        return (
+            Format.isObject(value) &&
+            Object.keys(value).length === 1 &&
+            (typeof value.secret === "string" || typeof value.secret_file === "string")
+        );
+    }
+
+    /** A value in one line of text. */
+    static compact(value: unknown): string {
+        if (value === undefined || value === null) return "";
+        if (Format.isSecret(value)) return "secret" in value ? `secret("${value.secret}")` : `secretFile("${value.secret_file}")`;
+        if (Array.isArray(value)) return value.map(Format.compact).join(value.every((item) => !Format.isObject(item)) ? ", " : " / ");
+
+        // A field written as `{}`, such as `ssh: {}`, is on with its defaults.
+        if (Format.isObject(value) && !Object.keys(value).length) return "on";
+        if (Format.isObject(value)) {
+            return Object.entries(value)
+                .map(([key, inner]) => (inner === true ? key : `${key} ${Format.compact(inner)}`))
+                .join(", ");
+        }
+
+        return String(value);
+    }
+
+    /** "1 error", "2 errors". */
+    static count(count: number, one: string, many = `${one}s`): string {
+        return `${count} ${count === 1 ? one : many}`;
+    }
+}

package/src/studio/app/src/lib/net.ts

@@ -0,0 +1,68 @@
+// Address arithmetic for the browser, for both families, as src/core/address.ts does it for Circuit: addresses as numbers, so IPv4 and IPv6 share one path.
+
+export type Family = "ipv4" | "ipv6";
+export type Range = { family: Family; first: bigint; last: bigint; length: number };
+
+export class Net {
+    private static bits(family: Family): number {
+        return family === "ipv4" ? 32 : 128;
+    }
+
+    /** An address as a number, or undefined when the text is not one. */
+    static parseAddress(text: string): { family: Family; value: bigint } | undefined {
+        if (!text.includes(":")) {
+            const octets = text.split(".");
+            if (octets.length !== 4 || !octets.every((octet) => /^\d{1,3}$/.test(octet) && Number(octet) <= 255)) return undefined;
+            return { family: "ipv4", value: octets.reduce((value, octet) => (value << 8n) | BigInt(octet), 0n) };
+        }
+
+        const [before, after, extra] = text.split("::");
+        if (extra !== undefined || before === undefined) return undefined;
+
+        const groupsOf = (part: string | undefined) => (part ? part.split(":") : []);
+        const leading = groupsOf(before);
+        const trailing = groupsOf(after);
+
+        // `::` stands for as many zero groups as make eight.
+        const zeros = after === undefined ? 0 : 8 - leading.length - trailing.length;
+        if (zeros < 0) return undefined;
+        const groups = [...leading, ...Array<string>(zeros).fill("0"), ...trailing];
+        if (groups.length !== 8 || !groups.every((group) => /^[0-9a-fA-F]{1,4}$/.test(group))) return undefined;
+
+        return { family: "ipv6", value: groups.reduce((value, group) => (value << 16n) | BigInt(parseInt(group, 16)), 0n) };
+    }
+
+    /** A prefix, or a lone address as the prefix of just itself, as the range of numbers it covers. Undefined when the text is neither. */
+    static parseRange(text: string): Range | undefined {
+        const [addressText, lengthText] = text.split("/");
+        const address = Net.parseAddress(addressText ?? "");
+        if (!address) return undefined;
+
+        const bits = Net.bits(address.family);
+        const length = lengthText === undefined ? bits : Number(lengthText);
+        if (!Number.isInteger(length) || length < 0 || length > bits) return undefined;
+
+        const hostBits = (1n << BigInt(bits - length)) - 1n;
+        const first = address.value & ~hostBits & ((1n << BigInt(bits)) - 1n);
+        return { family: address.family, first, last: first | hostBits, length };
+    }
+
+    /** Whether a prefix, or an address, holds an address or a whole other prefix. */
+    static covers(outer: string, inner: string): boolean {
+        const a = Net.parseRange(outer);
+        const b = Net.parseRange(inner);
+        return Boolean(a && b && a.family === b.family && a.first <= b.first && b.last <= a.last);
+    }
+
+    /** The same address, however it is written. */
+    static sameAddress(a: string, b: string): boolean {
+        const x = Net.parseAddress(a.split("/")[0] ?? "");
+        const y = Net.parseAddress(b.split("/")[0] ?? "");
+        return Boolean(x && y && x.family === y.family && x.value === y.value);
+    }
+
+    /** How long a prefix is, or the family's whole length for a lone address. */
+    static lengthOf(text: string): number {
+        return Net.parseRange(text)?.length ?? 0;
+    }
+}

package/src/studio/app/src/lib/secrets-crypto.ts

@@ -0,0 +1,35 @@
+// Decrypting a secrets file's value in the browser, as Circuit encrypts it: `encrypted:` and the base64 of the version, salt, IV, ciphertext and tag, AES-256-GCM with a key made from the password by scrypt, and the secret's name bound to it. The password a person types is used here and never leaves the page.
+
+import { gcm } from "@noble/ciphers/aes";
+import { scryptAsync } from "@noble/hashes/scrypt";
+
+export class SecretsCrypto {
+    private static readonly PREFIX = "encrypted:";
+
+    /** One key per salt, so a file's values open with one scrypt run. */
+    private readonly keys = new Map<string, Promise<Uint8Array>>();
+
+    constructor(private readonly password: string) {}
+
+    private static partsOf(value: string) {
+        const bytes = Uint8Array.from(atob(value.slice(SecretsCrypto.PREFIX.length)), (char) => char.charCodeAt(0));
+        if (bytes[0] !== 1 || bytes.length < 1 + 16 + 12 + 16) throw new Error("not a value Circuit encrypted");
+        return { salt: bytes.subarray(1, 17), iv: bytes.subarray(17, 29), sealed: bytes.subarray(29) };
+    }
+
+    private key(salt: Uint8Array): Promise<Uint8Array> {
+        const id = [...salt].join(",");
+        let key = this.keys.get(id);
+        if (!key) this.keys.set(id, (key = scryptAsync(this.password, salt, { N: 2 ** 17, r: 8, p: 1, dkLen: 32 })));
+        return key;
+    }
+
+    /** One value, decrypted. Throws when the password does not open it. */
+    async decrypt(name: string, value: string): Promise<string> {
+        if (!value.startsWith(SecretsCrypto.PREFIX)) return value;
+
+        const { salt, iv, sealed } = SecretsCrypto.partsOf(value);
+        const plain = gcm(await this.key(salt), iv, new TextEncoder().encode(name)).decrypt(sealed);
+        return new TextDecoder().decode(plain);
+    }
+}

package/src/studio/app/src/lib/store.ts

@@ -0,0 +1,71 @@
+// What the page knows: what the server gathered last, where the reader is, and whether the server is still there. The server tells the page when the project changed, and the page reads it again.
+
+import { reactive } from "vue";
+import type { StudioData } from "../../../types";
+
+export type Route = { view: string; parts: string[] };
+
+function parseRoute(): Route {
+    const parts = location.hash.slice(1).split("/").map(decodeURIComponent).filter(Boolean);
+    return { view: parts[0] ?? "graph", parts: parts.slice(1) };
+}
+
+export const store = reactive({
+    data: undefined as StudioData | undefined,
+    /** What stopped the server reading the project, shown over the page. */
+    error: "",
+    live: "connecting" as "connecting" | "live" | "offline",
+    /** The project was read again just now. */
+    beat: false,
+    route: parseRoute(),
+});
+
+/** Go to a place in the page, such as `devices/edge-01/ports`. */
+export function go(path: string): void {
+    location.hash = path
+        .split("/")
+        .map((part) => encodeURIComponent(part))
+        .join("/");
+}
+
+addEventListener("hashchange", () => {
+    store.route = parseRoute();
+});
+
+/** A request to the server. A request that reaches a device takes Studio's header and a POST. */
+export async function api<T>(path: string, reachesDevice = false): Promise<T> {
+    const response = await fetch(path, reachesDevice ? { method: "POST", headers: { "x-circuit-studio": "1" } } : {});
+    if (!response.ok) throw new Error(`the server answered ${response.status}`);
+
+    const body = (await response.json()) as T | { error: string };
+    if (body && typeof body === "object" && "error" in body && typeof body.error === "string") throw new Error(body.error);
+    return body as T;
+}
+
+async function load(): Promise<void> {
+    try {
+        const body = (await (await fetch("/api/data")).json()) as StudioData | { error: string };
+        if ("error" in body) {
+            store.error = body.error;
+            return;
+        }
+        store.data = body;
+        store.error = "";
+    } catch (error) {
+        store.error = (error as Error).message;
+    }
+}
+
+/** Read what the server gathered, and again each time it says the project changed. */
+export function connect(): void {
+    void load();
+
+    const events = new EventSource("/api/events");
+    events.onopen = () => (store.live = "live");
+    events.onerror = () => (store.live = "offline");
+    events.onmessage = async () => {
+        await load();
+        store.beat = true;
+        setTimeout(() => (store.beat = false), 1200);
+    };
+}