@takodotid/circuit 0.43.1 → 1.0.0-rc.2

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

@@ -0,0 +1,32 @@
+<!-- Every device of the project, with where it is, what it runs on, and what validate finds on 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[]>(() =>
+    props.data.devices.map((device) => {
+        const findings = props.data.findings.filter((finding) => finding.device === device.name);
+        const errors = findings.filter((finding) => finding.level === "error").length;
+        return {
+            cells: [
+                { device: device.name },
+                device.site,
+                device.platform,
+                device.model,
+                device.connection.host ?? "console only",
+                errors || "",
+                findings.length - errors || "",
+                props.data.files[device.name],
+            ],
+        };
+    })
+);
+</script>
+
+<template>
+    <h2>Devices</h2>
+    <DataTable :head="['Device', 'Site', 'Platform', 'Model', 'Reached at', 'Errors', 'Warnings', 'File']" :rows="rows" csv="devices" />
+</template>

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

@@ -0,0 +1,75 @@
+<!-- A device's front panel: one square per port of its model, by speed, filled by how the port is used. A square scrolls to the port's row. -->
+<script setup lang="ts">
+import { computed } from "vue";
+import type { Device, Port } from "../../../../model";
+
+const props = defineProps<{ device: Device; ports: string[] }>();
+
+type Use = "shut" | "lag" | "access" | "trunk" | "routed" | "plain";
+
+const USES: Record<Use, string> = {
+    shut: "shut down",
+    lag: "in a LAG",
+    access: "access",
+    trunk: "trunk",
+    routed: "routed",
+    plain: "up, nothing on it",
+};
+
+const useOf = (port: Port | undefined): Use => {
+    if (!port) return "shut";
+    if (port.in_lag) return "lag";
+    if (port.access_vlan) return "access";
+    if (port.trunk_vlans) return "trunk";
+    if (port.addresses) return "routed";
+    return "plain";
+};
+
+const bySpeed = computed(() => {
+    const groups = new Map<string, { name: string; use: Use; linked: boolean; label: string }[]>();
+
+    for (const name of props.ports) {
+        const port = props.device.interfaces?.ethernet?.[name];
+        const use = useOf(port);
+        const far = port?.link;
+        const label = [name, USES[use], port?.description, far ? `to ${far.device} ${far.port}` : ""].filter(Boolean).join(", ");
+        const speed = name.split("-")[0] ?? name;
+        groups.set(speed, [...(groups.get(speed) ?? []), { name, use, linked: Boolean(far), label }]);
+    }
+
+    return [...groups];
+});
+
+function show(name: string): void {
+    const row = document.getElementById(`port-${name}`);
+    row?.scrollIntoView({ block: "center", behavior: "smooth" });
+    row?.classList.add("flash");
+    setTimeout(() => row?.classList.remove("flash"), 1600);
+}
+</script>
+
+<template>
+    <div v-if="ports.length">
+        <div class="faceplate" role="group" :aria-label="`${device.name}'s ports`">
+            <div v-for="[speed, squares] in bySpeed" :key="speed" class="speed">
+                <span class="speed-name">{{ speed }}</span>
+                <div class="ports">
+                    <button
+                        v-for="square in squares"
+                        :key="square.name"
+                        :class="['port', square.use, { linked: square.linked }]"
+                        :title="square.label"
+                        :aria-label="square.label"
+                        @click="show(square.name)"
+                    >
+                        {{ square.name.split("-")[1] ?? square.name }}
+                    </button>
+                </div>
+            </div>
+        </div>
+        <ul class="faceplate-legend">
+            <li v-for="(text, use) in USES" :key="use"><span :class="['port', use]"></span>{{ text }}</li>
+            <li><span class="port plain linked"></span>linked to another device</li>
+        </ul>
+    </div>
+</template>

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

@@ -0,0 +1,282 @@
+<!-- The network drawn, one layer at a time: cables, VLANs, address segments, BGP, OSPF and tunnels. Drawn with Cytoscape; a node or line picked shows what it is in the panel. -->
+<script setup lang="ts">
+import cytoscape, { type Core, type ElementDefinition } from "cytoscape";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import type { GraphEdge, GraphNode, Layer } from "../../../../core/graph";
+import type { StudioData } from "../../../types";
+import { Export } from "../lib/csv";
+import { go, store } from "../lib/store";
+
+const props = defineProps<{ data: StudioData }>();
+
+const LAYERS: { id: Layer; label: string; legend: string }[] = [
+    { id: "l1", label: "Cables", legend: "Each cable a port's link names. A LAG's cables are one line." },
+    { id: "l2", label: "VLANs", legend: "The VLANs each cable carries, from its port or LAG." },
+    {
+        id: "l3",
+        label: "Addresses",
+        legend: "Prefixes two devices hold addresses in. Three or more share a segment, drawn as its own box.",
+    },
+    { id: "bgp", label: "BGP", legend: "Sessions between our devices, matched by address, and to each AS outside." },
+    { id: "ospf", label: "OSPF", legend: "Interfaces in one area and one prefix, neither passive." },
+    { id: "tunnels", label: "Tunnels", legend: "GRE and VXLAN tunnels matched by their endpoints, and WireGuard peers." },
+];
+
+const layer = computed<Layer>(() => (LAYERS.some((item) => item.id === store.route.parts[0]) ? (store.route.parts[0] as Layer) : "l1"));
+const counts = computed(() =>
+    Object.fromEntries(LAYERS.map((item) => [item.id, props.data.graph.edges.filter((edge) => edge.layer === item.id).length]))
+);
+
+const container = ref<HTMLElement>();
+const selected = ref<{ node?: GraphNode; edge?: GraphEdge }>({});
+let graph: Core | undefined;
+
+/** Where each node was on each layer, kept while the page is open, so a node moved stays moved. */
+const placed = new Map<string, Record<string, { x: number; y: number }>>();
+
+const css = (name: string) => getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+
+function elements(): ElementDefinition[] {
+    const edges = props.data.graph.edges.filter((edge) => edge.layer === layer.value);
+    const ends = new Set(edges.flatMap((edge) => [edge.from, edge.to]));
+    const levelOf = (node: GraphNode) => {
+        const findings = props.data.findings.filter((finding) => `device:${finding.device}` === node.id);
+        return findings.some((finding) => finding.level === "error") ? "error" : findings.length ? "warning" : "";
+    };
+
+    return [
+        ...props.data.graph.nodes
+            .filter((node) => node.kind === "device" || ends.has(node.id))
+            .map((node) => ({
+                group: "nodes" as const,
+                // A box as wide as its name.
+                data: { id: node.id, label: node.label, kind: node.kind, level: levelOf(node), width: node.label.length * 8.5 + 28 },
+            })),
+        ...edges.map((edge, index) => ({
+            group: "edges" as const,
+            data: {
+                id: `edge-${index}`,
+                source: edge.from,
+                target: edge.to,
+                label: edge.label,
+                oneSided: edge.oneSided ? "yes" : "no",
+                index,
+            },
+        })),
+    ];
+}
+
+function draw(): void {
+    if (!graph) return;
+    const positions = placed.get(layer.value);
+
+    graph.elements().remove();
+    graph.add(elements());
+    selected.value = {};
+
+    if (positions && graph.nodes().every((node) => positions[node.id()] !== undefined)) {
+        graph.nodes().forEach((node) => {
+            node.position(positions[node.id()]!);
+        });
+        fit();
+    } else {
+        layOut();
+    }
+}
+
+/** Fit the drawing to the window, but never larger than its own size: a network of two devices stays readable. */
+function fit(): void {
+    if (!graph) return;
+    graph.fit(undefined, 60);
+    if (graph.zoom() > 1.2) {
+        graph.zoom(1.2);
+        graph.center();
+    }
+}
+
+function layOut(): void {
+    // From a circle rather than random places, so the same network is drawn the same way each time.
+    graph?.layout({ name: "circle", animate: false, fit: false }).run();
+    // Boxes are wide, so they push hard and keep a gap, or they land on each other and on the lines' labels.
+    graph
+        ?.layout({
+            name: "cose",
+            animate: false,
+            fit: false,
+            randomize: false,
+            nodeRepulsion: () => 160000,
+            nodeOverlap: 40,
+            nodeDimensionsIncludeLabels: true,
+            idealEdgeLength: () => 55,
+            edgeElasticity: () => 200,
+            gravity: 2.5,
+            numIter: 3000,
+            componentSpacing: 140,
+        })
+        .run();
+    fit();
+    remember();
+}
+
+function remember(): void {
+    if (!graph) return;
+    placed.set(layer.value, Object.fromEntries(graph.nodes().map((node) => [node.id(), { ...node.position() }])));
+}
+
+function saveImage(): void {
+    if (!graph) return;
+    const png = graph.png({ output: "blob", full: true, scale: 2, bg: css("--bg") }) as unknown as Blob;
+    Export.save(`${props.data.project}-${layer.value}.png`, png);
+}
+
+onMounted(() => {
+    graph = cytoscape({
+        container: container.value,
+        minZoom: 0.2,
+        maxZoom: 3,
+        style: [
+            {
+                selector: "node",
+                style: {
+                    shape: "round-rectangle",
+                    width: "data(width)",
+                    height: 34,
+                    "background-color": css("--surface"),
+                    "border-width": 2,
+                    "border-color": css("--text"),
+                    label: "data(label)",
+                    color: css("--text"),
+                    "font-family": css("--font"),
+                    "font-size": 13,
+                    "font-weight": 700,
+                    "text-valign": "center",
+                    "text-halign": "center",
+                },
+            },
+            {
+                selector: 'node[kind = "segment"]',
+                style: { "background-color": css("--yellow"), "border-color": css("--navy"), color: "#11141b" },
+            },
+            {
+                selector: 'node[kind = "outside"]',
+                style: { "border-style": "dashed", "border-color": css("--edge"), color: css("--muted") },
+            },
+            { selector: 'node[level = "warning"]', style: { "border-color": css("--warning"), "border-width": 3 } },
+            { selector: 'node[level = "error"]', style: { "border-color": css("--error"), "border-width": 3 } },
+            {
+                selector: "edge",
+                style: {
+                    width: 2,
+                    "line-color": css("--edge"),
+                    "curve-style": "bezier",
+                    label: "data(label)",
+                    "font-size": 11,
+                    color: css("--muted"),
+                    "text-background-color": css("--bg"),
+                    "text-background-opacity": 1,
+                    "text-background-padding": "2px",
+                    "font-family": css("--font"),
+                },
+            },
+            { selector: 'edge[oneSided = "yes"]', style: { "line-style": "dashed", "line-color": css("--warning") } },
+            {
+                selector: ":selected",
+                style: { "border-color": css("--cobalt"), "line-color": css("--cobalt"), "border-width": 4, width: 4 },
+            },
+        ],
+    });
+
+    graph.on("tap", "node", (event) => {
+        selected.value = { node: props.data.graph.nodes.find((node) => node.id === event.target.id()) };
+    });
+    graph.on("tap", "edge", (event) => {
+        const index = event.target.data("index") as number;
+        selected.value = { edge: props.data.graph.edges.filter((edge) => edge.layer === layer.value)[index] };
+    });
+    graph.on("tap", (event) => {
+        if (event.target === graph) selected.value = {};
+    });
+    graph.on("dbltap", 'node[kind = "device"]', (event) => go(`devices/${event.target.data("label")}`));
+    graph.on("dragfree", "node", remember);
+
+    draw();
+});
+
+onBeforeUnmount(() => graph?.destroy());
+watch([layer, () => props.data], draw);
+
+const nodeFindings = computed(() =>
+    props.data.findings.filter((finding) => selected.value.node && `device:${finding.device}` === selected.value.node.id)
+);
+</script>
+
+<template>
+    <section class="view">
+        <div class="toolbar">
+            <nav aria-label="Layers">
+                <button v-for="item in LAYERS" :key="item.id" :aria-pressed="layer === item.id" @click="go(`graph/${item.id}`)">
+                    {{ item.label }} <small>{{ counts[item.id] }}</small>
+                </button>
+            </nav>
+            <div class="actions">
+                <button title="Fit the drawing to the window" @click="fit">Fit</button>
+                <button title="Forget where nodes were moved on this layer, and lay it out again" @click="layOut">Lay out again</button>
+                <button title="Save this layer as a PNG image" @click="saveImage">Save image</button>
+            </div>
+        </div>
+        <div class="stage">
+            <div ref="container" class="canvas" role="img" aria-label="The network"></div>
+            <aside>
+                <template v-if="selected.node">
+                    <h2>{{ selected.node.label }}</h2>
+                    <p class="kind muted">
+                        {{
+                            selected.node.kind === "device"
+                                ? "a device"
+                                : selected.node.kind === "segment"
+                                  ? "a shared segment"
+                                  : "outside the network"
+                        }}
+                    </p>
+                    <ul>
+                        <li v-for="line in selected.node.detail" :key="line">{{ line }}</li>
+                    </ul>
+                    <ul v-if="nodeFindings.length" class="findings">
+                        <li v-for="(finding, index) in nodeFindings" :key="index">
+                            <span :class="['badge', finding.level]">{{ finding.level }}</span
+                            >{{ finding.message }}
+                        </li>
+                    </ul>
+                    <p v-if="selected.node.kind === 'device'">
+                        <a @click="go(`devices/${selected.node.label}`)">Open {{ selected.node.label }}</a>
+                    </p>
+                </template>
+                <template v-else-if="selected.edge">
+                    <h2>{{ selected.edge.label }}</h2>
+                    <p v-if="selected.edge.oneSided" class="badge warning">declared at one end only</p>
+                    <ul>
+                        <li v-for="line in selected.edge.detail" :key="line">{{ line }}</li>
+                    </ul>
+                </template>
+                <template v-else>
+                    <h2>{{ LAYERS.find((item) => item.id === layer)?.label }}</h2>
+                    <p class="muted">{{ LAYERS.find((item) => item.id === layer)?.legend }}</p>
+                    <ul class="legend">
+                        <li>A dashed line is declared at one end only.</li>
+                        <li>A dashed box is outside the network.</li>
+                        <li>A box framed in orange or red has warnings or errors.</li>
+                        <li>Pick a box or a line to see what it is. Double-click a device to open it.</li>
+                    </ul>
+                </template>
+            </aside>
+        </div>
+    </section>
+</template>
+
+<style scoped>
+.canvas {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+}
+</style>

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

@@ -0,0 +1,24 @@
+<!-- Two texts compared line by line: what is the same is folded away, except a few lines around each change. -->
+<script setup lang="ts">
+import { computed } from "vue";
+import { Diff } from "../lib/diff";
+import { Format } from "../lib/format";
+
+const props = defineProps<{ before: string; after: string }>();
+
+const lines = computed(() => Diff.lines(props.before.trimEnd().split("\n"), props.after.trimEnd().split("\n")));
+const changed = computed(() => lines.value?.filter((line) => line.kind !== "same").length ?? 0);
+const shown = computed(() => (lines.value ? Diff.shown(lines.value) : []));
+const mark = (kind: string) => (kind === "added" ? "+ " : kind === "removed" ? "- " : "  ");
+</script>
+
+<template>
+    <p v-if="!lines" class="muted">They differ in too many lines to compare one by one.</p>
+    <p v-else-if="!changed" class="muted">They are the same, line for line.</p>
+    <div v-else>
+        <p class="muted">{{ Format.count(changed, "line differs", "lines differ") }}.</p>
+        <pre
+            class="code diff"
+        ><template v-for="(line, index) in shown" :key="index"><span v-if="line.kind === 'fold'" class="fold">{{ Format.count(line.count, "line") }} the same{{ "\n" }}</span><span v-else :class="line.kind">{{ mark(line.kind) }}{{ line.text }}{{ "\n" }}</span></template></pre>
+    </div>
+</template>

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

@@ -0,0 +1,42 @@
+<!-- What `circuit validate` finds, errors first, and what only one end declares: cables and BGP sessions with nothing back. -->
+<script setup lang="ts">
+import { computed } from "vue";
+import type { StudioData } from "../../../types";
+import { go } from "../lib/store";
+
+const props = defineProps<{ data: StudioData }>();
+
+const findings = computed(() => [...props.data.findings].sort((a, b) => (a.level === b.level ? 0 : a.level === "error" ? -1 : 1)));
+const oneSidedCables = computed(() => props.data.cables.filter((cable) => cable.oneSided));
+const oneSidedSessions = computed(() => props.data.sessions.filter((session) => session.oneSided));
+</script>
+
+<template>
+    <h2>Problems</h2>
+    <h3>Found by <code>circuit validate</code></h3>
+    <p v-if="!findings.length" class="muted">Nothing: every device validates.</p>
+    <ul v-else class="findings">
+        <li v-for="(finding, index) in findings" :key="index">
+            <span :class="['badge', finding.level]">{{ finding.level }}</span>
+            <a v-if="finding.device" @click="go(`devices/${finding.device}`)">{{ finding.device }}</a
+            ><template v-if="finding.device">: </template>{{ finding.message }}
+        </li>
+    </ul>
+
+    <h3>Declared at one end only</h3>
+    <p v-if="!oneSidedCables.length && !oneSidedSessions.length" class="muted">
+        Every cable and BGP session between devices is declared at both ends.
+    </p>
+    <ul v-else class="findings">
+        <li v-for="cable in oneSidedCables" :key="`${cable.device} ${cable.port}`">
+            <span class="badge warning">cable</span>
+            <a @click="go(`devices/${cable.device}`)">{{ cable.device }}</a> {{ cable.port }} links to {{ cable.farDevice }}
+            {{ cable.farPort }}, which does not link back
+        </li>
+        <li v-for="session in oneSidedSessions" :key="`${session.device} ${session.name}`">
+            <span class="badge warning">BGP</span>
+            <a @click="go(`devices/${session.device}`)">{{ session.device }}</a> {{ session.name }} reaches {{ session.far }}, which has no
+            session back
+        </li>
+    </ul>
+</template>

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

@@ -0,0 +1,72 @@
+<!-- What the search finds: devices, ports and interfaces by name or description, addresses, VLANs, BGP neighbors, and lines of each device's config. -->
+<script setup lang="ts">
+import { computed } from "vue";
+import type { StudioData } from "../../../types";
+import { Format } from "../lib/format";
+import DataTable, { type Row } from "./DataTable.vue";
+
+const props = defineProps<{ data: StudioData; query: string }>();
+
+const found = computed<Row[]>(() => {
+    const query = props.query.toLowerCase();
+    if (!query) return [];
+    const has = (text: unknown) => typeof text === "string" && text.toLowerCase().includes(query);
+    const rows: Row[] = [];
+
+    for (const device of props.data.devices) {
+        if (has(device.name) || has(device.site) || has(device.model)) {
+            rows.push({ cells: [{ device: device.name }, "device", `${device.platform} ${device.model} at ${device.site}`] });
+        }
+
+        for (const [kind, group] of Object.entries(device.interfaces ?? {})) {
+            for (const [name, settings] of Object.entries((group ?? {}) as Record<string, { description?: string } | undefined>)) {
+                if (has(name) || has(settings?.description)) {
+                    rows.push({
+                        cells: [
+                            { device: device.name },
+                            kind === "ethernet" ? "port" : kind.replace("_", " "),
+                            `${name}${settings?.description ? `: ${settings.description}` : ""}`,
+                        ],
+                    });
+                }
+            }
+        }
+
+        for (const [name, vlan] of Object.entries(device.switching?.vlans ?? {})) {
+            if (has(name) || has(vlan?.description) || has(String(vlan?.id)))
+                rows.push({ cells: [{ device: device.name }, "VLAN", `${name}, ID ${vlan?.id}`] });
+        }
+
+        for (const [name, neighbor] of Object.entries(device.routing?.bgp?.neighbors ?? {})) {
+            if (has(name) || has(neighbor?.description) || has(neighbor?.address)) {
+                rows.push({ cells: [{ device: device.name }, "BGP neighbor", `${name}, ${neighbor?.address}`] });
+            }
+        }
+
+        const lines = (props.data.rendered[device.name] ?? "").split("\n").filter(has);
+        if (lines.length) {
+            rows.push({
+                cells: [
+                    { link: `devices/${device.name}/config`, label: device.name },
+                    "config",
+                    `${Format.count(lines.length, "line")}: ${lines
+                        .slice(0, 3)
+                        .map((line) => line.trim())
+                        .join(" · ")}${lines.length > 3 ? " …" : ""}`,
+                ],
+            });
+        }
+    }
+
+    for (const row of props.data.addresses) {
+        if (has(row.address)) rows.push({ cells: [{ device: row.device }, "address", `${row.address} on ${row.holder}`] });
+    }
+
+    return rows;
+});
+</script>
+
+<template>
+    <h2>Search: {{ query }}</h2>
+    <DataTable :head="['Device', 'What', 'Found']" :rows="found" />
+</template>

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

@@ -0,0 +1,112 @@
+<!-- The secrets, file by file: each name and how it is kept. To see the values, a person types the file's password; they are decrypted here, in the browser, and the password is never sent or kept. -->
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import type { SecretsFileListing, SecretsListing } from "../../../types";
+import { SecretsCrypto } from "../lib/secrets-crypto";
+import { api } from "../lib/store";
+
+const listing = ref<SecretsListing>();
+const loadError = ref("");
+/** By file: the password being typed, why it failed, whether it is being tried, and the values it opened. */
+const typed = reactive<Record<string, string>>({});
+const failed = reactive<Record<string, string>>({});
+const busy = reactive<Record<string, boolean>>({});
+const shown = reactive<Record<string, Record<string, string>>>({});
+
+onMounted(async () => {
+    try {
+        listing.value = await api<SecretsListing>("/api/secrets");
+    } catch (error) {
+        loadError.value = (error as Error).message;
+    }
+});
+
+const encryptedOf = (file: SecretsFileListing) => file.entries.filter((entry) => entry.kind === "encrypted");
+
+/** Decrypt every encrypted value of a file with the typed password, then forget the password. */
+async function reveal(file: SecretsFileListing): Promise<void> {
+    failed[file.file] = "";
+    const crypto = new SecretsCrypto(typed[file.file] ?? "");
+    typed[file.file] = "";
+    busy[file.file] = true;
+
+    try {
+        const values: Record<string, string> = {};
+        for (const entry of encryptedOf(file)) values[entry.name] = await crypto.decrypt(entry.name, entry.ciphertext!);
+        shown[file.file] = values;
+    } catch {
+        failed[file.file] = `That password does not open ${file.file}.`;
+    } finally {
+        busy[file.file] = false;
+    }
+}
+
+const KIND: Record<string, string> = {
+    encrypted: "encrypted",
+    "1password": "kept in 1Password",
+    empty: "empty",
+    "not encrypted": "NOT ENCRYPTED: run circuit secrets encrypt",
+    missing: "missing: the project needs it",
+};
+</script>
+
+<template>
+    <h2>Secrets</h2>
+    <p class="muted">
+        Each secret, and how it is kept. Add or change one with <code>circuit secrets</code>. A value is never sent to this page in plain
+        text.
+    </p>
+    <p v-if="loadError" class="verdict reject">{{ loadError }}</p>
+
+    <section v-for="file in listing?.files ?? []" :key="file.file">
+        <h3>
+            <code>{{ file.file }}</code>
+        </h3>
+        <p class="muted">
+            {{ file.networks.length > 1 ? "Networks" : "Network" }} {{ file.networks.join(", ") }}. Its password:
+            {{ file.passwordLocation ?? "typed when Circuit asks" }}.
+        </p>
+
+        <form v-if="encryptedOf(file).length" class="tool-form" autocomplete="off" @submit.prevent="reveal(file)">
+            <label class="field"
+                >The password of {{ file.file }}
+                <input v-model="typed[file.file]" type="password" autocomplete="off" spellcheck="false" />
+                <small>Used here in the browser to decrypt, then forgotten. It is never sent anywhere or kept.</small>
+            </label>
+            <button class="primary" type="submit" :disabled="busy[file.file]">
+                {{ busy[file.file] ? "Opening…" : "Show the values" }}
+            </button>
+            <button v-if="shown[file.file]" type="button" @click="delete shown[file.file]">Hide them</button>
+        </form>
+        <p v-if="failed[file.file]" class="verdict reject">{{ failed[file.file] }}</p>
+
+        <p v-if="!file.entries.length" class="muted">No secrets yet.</p>
+        <table v-else class="data">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Kept</th>
+                    <th>Value</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="entry in file.entries" :key="entry.name">
+                    <td>
+                        <code>{{ entry.name }}</code>
+                    </td>
+                    <td>
+                        <span v-if="entry.kind === 'not encrypted' || entry.kind === 'missing'" class="badge error">{{
+                            KIND[entry.kind]
+                        }}</span>
+                        <template v-else>{{ KIND[entry.kind] }}</template>
+                    </td>
+                    <td>
+                        <template v-if="entry.onePassword">vault {{ entry.onePassword.vault }}, item {{ entry.onePassword.item }}</template>
+                        <code v-else-if="shown[file.file]?.[entry.name] !== undefined">{{ shown[file.file]![entry.name] }}</code>
+                        <span v-else class="muted">{{ entry.kind === "encrypted" ? "hidden" : "" }}</span>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+</template>