feat: add companion panels beside host tabs

src/ui/tests/shell/companions.test.tsx

@@ -0,0 +1,76 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import type { Tab } from "@/types/ui-types";
+import {
+  companionApplies,
+  getCompanionState,
+  registerCompanionDef,
+  resetCompanions,
+  resetCompanionStates,
+  toggleCompanion,
+} from "../../shell/companions";
+import { CompanionFrame } from "../../shell/CompanionFrame";
+
+const tab = (extra: Partial<Tab> = {}) =>
+  ({
+    id: "t1",
+    type: "terminal",
+    label: "box",
+    host: { id: 1 },
+    ...extra,
+  }) as unknown as Tab;
+
+afterEach(() => {
+  resetCompanions();
+  resetCompanionStates();
+});
+
+describe("companions", () => {
+  it("applies by tab type and host", () => {
+    const def = {
+      id: "a",
+      component: () => null,
+      tabTypes: ["terminal"],
+    };
+    expect(companionApplies(def, tab())).toBe(true);
+    expect(companionApplies(def, tab({ type: "files" }))).toBe(false);
+    expect(companionApplies(def, tab({ host: undefined }))).toBe(false);
+  });
+
+  it("toggles open and closed, defaulting to the first match", () => {
+    registerCompanionDef({ id: "a", component: () => null });
+    toggleCompanion(tab());
+    expect(getCompanionState("t1").openId).toBe("a");
+    toggleCompanion(tab(), "a");
+    expect(getCompanionState("t1").openId).toBeNull();
+  });
+
+  it("renders only the tab when nothing applies", () => {
+    render(
+      <CompanionFrame tab={tab()} isVisible>
+        <div>content</div>
+      </CompanionFrame>,
+    );
+    expect(screen.getByText("content")).toBeTruthy();
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("shows the panel from the edge button and keeps the tab mounted", () => {
+    registerCompanionDef({
+      id: "a",
+      titleKey: "a.title",
+      component: () => <div>panel body</div>,
+    });
+    render(
+      <CompanionFrame tab={tab()} isVisible>
+        <div>content</div>
+      </CompanionFrame>,
+    );
+    expect(screen.queryByText("panel body")).toBeNull();
+    fireEvent.click(screen.getByTitle("a.title"));
+    expect(screen.getByText("panel body")).toBeTruthy();
+    expect(screen.getByText("content")).toBeTruthy();
+    act(() => toggleCompanion(tab(), "a"));
+    expect(getCompanionState("t1").openId).toBeNull();
+  });
+});