feat(views,surface-host): Extensions sidebar view — auto-expanded surfaces + tables

views (new feature):
- pure panel-stack reducer + thin generic ViewSidebar (dropdown picker + add/remove),
  switches on view KIND, never a surface id

Extensions view (composition root):
- folds frontend modules + backend surfaces into one "Extensions" view
- frontend module list AGGREGATED from each feature's public `manifest` export
  (can't drift); no per-module version (FE features are internal to dispatch-web)
- surfaces are AUTO-SUBSCRIBED on catalog + rendered expanded (no catalog buttons)

surface-host:
- consecutive `stat` fields coalesce into one aligned label/value table (StatTable)
- generic custom-field renderer: dispatch on rendererId === "table" → SurfaceTable
  (pure parseTablePayload), so a backend `custom`/table field renders generically
- shared presentational components/Table.svelte (used by both, neither feature
  depends on the other)

store:
- auto-subscribe every catalog entry, unsubscribe vanished ones, re-subscribe all
  on reconnect; expose all received specs via `surfaces` (drops single-selection)

backend-handoff: CR-1 — emit Loaded Extensions as a custom/table field; notes
what's already covered FE-side (renderer shipped, stat-table fallback works).

1 files changed, 35 insertions, 0 deletions

diff --git a/src/components/Table.test.ts b/src/components/Table.test.ts
new file mode 100644
index 0000000..9fbecd3
--- /dev/null
+++ b/src/components/Table.test.ts
@@ -0,0 +1,35 @@
+import { render, screen, within } from "@testing-library/svelte";
+import { describe, expect, it } from "vitest";
+import Table from "./Table.svelte";
+
+describe("Table", () => {
+	it("renders a header cell per column", () => {
+		render(Table, { props: { columns: ["Name", "Version"], rows: [] } });
+		const headers = screen.getAllByRole("columnheader");
+		expect(headers.map((h) => h.textContent)).toEqual(["Name", "Version"]);
+	});
+
+	it("renders one row per data row with aligned cells", () => {
+		render(Table, {
+			props: {
+				columns: ["Name", "Version"],
+				rows: [
+					["alpha", "1.0"],
+					["beta", "2.3"],
+				],
+			},
+		});
+		const body = screen.getAllByRole("rowgroup")[1];
+		if (body === undefined) throw new Error("expected a tbody rowgroup");
+		const rows = within(body).getAllByRole("row");
+		expect(rows).toHaveLength(2);
+		expect(within(rows[0] as HTMLElement).getByText("alpha")).toBeInTheDocument();
+		expect(within(rows[0] as HTMLElement).getByText("1.0")).toBeInTheDocument();
+		expect(within(rows[1] as HTMLElement).getByText("beta")).toBeInTheDocument();
+	});
+
+	it("shows the empty message when there are no rows", () => {
+		render(Table, { props: { columns: ["A"], rows: [], empty: "Nothing loaded" } });
+		expect(screen.getByText("Nothing loaded")).toBeInTheDocument();
+	});
+});