fix: address administration layout and navigation issues #28 #29 #30 #31

frontend/src/shell/PiManagement.test.tsx

@@ -13,11 +13,11 @@ const readyStatus = {
   checkedAt: "2026-08-05T10:00:00.000Z",
 };
 
-function renderManagement() {
+function renderManagement(page = false) {
   const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
   return render(
     <QueryClientProvider client={client}>
-      <PiManagement open onClose={() => undefined} />
+      <PiManagement open page={page} onClose={() => undefined} />
     </QueryClientProvider>,
   );
 }
@@ -52,6 +52,20 @@ test("shows the catalog default as read-only installation state", async () => {
   expect(document.querySelector('input[type="password"]')).toBeNull();
 });
 
+test.each(["linux", "macos", "windows"])("opens host instructions for the installation platform %s", async hostPlatform => {
+  server.use(http.get("/api/pi-management/status", () => HttpResponse.json({ ...readyStatus, hostPlatform })));
+  renderManagement(true);
+  await screen.findByText("Pi 0.80.3");
+  await userEvent.click(screen.getByRole("button", { name: "Host maintenance" }));
+  const label = hostPlatform === "macos" ? "macOS" : hostPlatform === "windows" ? "Windows" : "Linux";
+  expect(screen.getByRole("tab", { name: label })).toHaveAttribute("aria-selected", "true");
+  expect(screen.getByRole("tabpanel", { name: label })).toBeVisible();
+  await userEvent.click(screen.getByRole("tab", { name: "Windows" }));
+  await userEvent.click(screen.getByRole("button", { name: "Runtime and models" }));
+  await userEvent.click(screen.getByRole("button", { name: "Host maintenance" }));
+  expect(screen.getByRole("tabpanel", { name: "Windows" })).toBeVisible();
+});
+
 test("shows every session model exposed by Core", async () => {
   server.use(http.get("/api/models", () => HttpResponse.json({ models: [
     { provider: "zai", id: "glm-5.3", name: "GLM 5.3", reasoning: true },