From bd1a2abd99cea5f7c8eef035d700c51aaf9aec2c Mon Sep 17 00:00:00 2001
From: Kinflou <ossdevlev@proton.me>
Date: Fri, 4 Sep 2026 06:13:51 +0800
Subject: [PATCH] sim: an "instance" heading atop the instance inspector

Matches the `connection` heading (and `box` / `connections` / `behaviours`
below). The first facts row's `instance` label becomes `name` so the
heading and the row don't both say "instance".
---
 app/src/sim/ui/view.ts   | 3 ++-
 app/src/sim/view.test.ts | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/src/sim/ui/view.ts b/app/src/sim/ui/view.ts
index 442a213..8d61979 100644
--- a/app/src/sim/ui/view.ts
+++ b/app/src/sim/ui/view.ts
@@ -718,8 +718,9 @@ export function createSim(opts: SimOpts = {}): SimView {
     }
 
     inspectorEl.append(
+      section("instance"),
       facts([
-        ["instance", sel.name],
+        ["name", sel.name],
         ["protocol", sel.protocol],
         ["role", sel.role],
         ["framing", found.protocol.framing],
diff --git a/app/src/sim/view.test.ts b/app/src/sim/view.test.ts
index ce634c3..62f3bdd 100644
--- a/app/src/sim/view.test.ts
+++ b/app/src/sim/view.test.ts
@@ -537,7 +537,7 @@ test("2b — each instance in a shared box is individually selectable", async ()
       (r) => r.querySelector(".node-name")!.textContent === target,
     )!;
     fire(row, "click");
-    assert.match(sim.el.querySelector(".sim-inspector")!.textContent!, new RegExp(`instance\\s*${target}`));
+    assert.match(sim.el.querySelector(".sim-inspector")!.textContent!, new RegExp(`name\\s*${target}`));
     const selected = [...sim.el.querySelectorAll(".sim-node-group .sim-node.selected")];
     assert.equal(selected.length, 1, "exactly one row is marked selected");
     assert.equal(selected[0].querySelector(".node-name")!.textContent, target);