swarm-ui: choosing a subagent in the subagents menu splits its terminal in beside the agent's

The menu on an agent's terminal page used to open the subagent on a tab of
its own. It now starts a group of this terminal and the subagent's, split to
the right; in a group's pane it splits that pane. A pane's layout key is the
agent, or `agent/subagent` for a subagent's pane, so the layout operations
stay as they are and a destroyed agent takes its subagent panes with it. A
subagent already in the group shows a marker and does nothing when chosen,
and maximize opens a subagent pane's terminal on its own.

frontend/packages/swarm-ui/test/split-layout.test.mjs

@@ -7,7 +7,9 @@ import {
   groupTitle,
   MIN_SHARE,
   pane,
+  paneKey,
   parseGroups,
+  splitKey,
   pruneMissing,
   removeAgent,
   resizeAt,
@@ -219,6 +221,29 @@ test("a group's header tab and an agent's terminal tab are told apart by their p
   assert.equal(terminalAgentOf("/agents/group/ab12"), null);
 });
 
+test("a subagent's pane is keyed by agent/subagent, split beside its agent, and goes with its agent", () => {
+  assert.equal(paneKey("a"), "a");
+  assert.equal(paneKey("a", "s"), "a/s");
+  assert.deepEqual(splitKey("a"), { agent: "a" });
+  assert.deepEqual(splitKey("a/s"), { agent: "a", subagent: "s" });
+  const two = splitPane(pane("a"), "a", paneKey("a", "s"), "right");
+  assert.deepEqual(agentsIn(two), ["a", "a/s"]);
+  // The same subagent twice changes nothing but its place.
+  assert.deepEqual(agentsIn(splitPane(two, "a", paneKey("a", "s"), "left")), [
+    "a/s",
+    "a",
+  ]);
+  // The agent a subagent belongs to being gone takes both panes.
+  const three = splitPane(two, "a/s", "b", "bottom");
+  assert.deepEqual(agentsIn(pruneMissing(three, new Set(["b"]))), ["b"]);
+  assert.deepEqual(agentsIn(pruneMissing(three, new Set(["a", "b"]))), [
+    "a",
+    "a/s",
+    "b",
+  ]);
+  assert.equal(groupTitle({ id: "x", name: "", root: two }), "a + a/s");
+});
+
 test("a pane already below the floor can grow but never shrinks further, and no share goes negative", () => {
   const tiny = row([pane("a"), pane("b"), pane("c")], [0.005, 0.005, 0.99]);
   const grown = resizeAt(tiny, [], 1, 0.5);