feat(apps): AppsScreen and InspectorView wiring (#1263) (#1286)

* feat(apps): AppsScreen and InspectorView wiring (#1263)

Adds the Apps tab as a top-level screen composed of `AppListItem`,
`AppDetailPanel`, and `AppRenderer`. The screen is presentational —
selection, form values, running, and maximize state are local; data and
side effects come in via props and callbacks.

InspectorView filters `tools` through `isAppTool` (wrapped in a try/catch
so a malformed `_meta.ui.resourceUri` skips one tool instead of dropping
every following App), exposes the Apps tab in `ALL_TABS` after Tools, and
wires Phase-3 stub callbacks plus a stub bridge factory.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* refactor(apps): extract AppControls and rename Refresh button

Pulls the sidebar list, search input, "List updated" indicator, and
Refresh button out of `AppsScreen` into a dedicated `AppControls`
group, mirroring `ToolControls` and `TaskControls`. The Refresh button
moves from a full-width row beneath the list to the top-right of the
title row (single label "Refresh", matching `TaskControls`).

`AppsScreen` keeps the right-pane orchestration (selection, form,
running, maximize, header actions) and now delegates the entire
sidebar to `AppControls`.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(stories): seed InspectorView demo tools with MCP Apps

Adds three apps (Cohort Data, Weather Widget, Ops Dashboard) carrying
real `_meta.ui.resourceUri` to the demo tools list so the Apps tab has
content in the Default story alongside the existing tools.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(apps): drop AppDetailPanel title row to avoid duplicate name

The parent AppsScreen header already shows the app name, so the panel's
own title/icon row rendered the name twice. Remove the title row (and
its now-unused imports, styled subcomponents, and the four tests that
asserted on title/icon rendering).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* refactor(resources): drop annotation badges from ResourceListItem

The list row now renders just the resource title/name. Audience and
priority badges remain visible in the preview/template panels, so the
data is still surfaced — just not duplicated in the picker. Drops the
now-unused AnnotationBadge import, the badge-only stories, and the
badge-rendering test.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(apps): address review — share hasInputFields, show header icon

- Extracts the duplicated `Object.keys(inputSchema.properties ?? {}).length > 0`
  check from `AppsScreen` (and the equivalent in `AppDetailPanel`'s
  `hasFields`) into a shared `hasInputFields` helper in `toolUtils`,
  with tests.
- Renders the selected tool's first icon next to the right-pane header
  title in `AppsScreen`, restoring the icon visibility that was lost
  when `AppDetailPanel`'s title row was removed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(apps): finish hasInputFields extraction; document isOpening

- AppDetailPanel now actually calls the shared `hasInputFields` helper
  instead of inlining the same `Object.keys(...).length > 0` check.
- AppsScreen comments why `isOpening={false}` is hardcoded: the screen
  flips to AppRenderer synchronously, so the loading state is unreachable
  here — the prop remains for standalone use and Phase 3 wiring.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

clients/web/src/components/groups/AppDetailPanel/AppDetailPanel.test.tsx

@@ -4,8 +4,6 @@ import type { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
 import { AppDetailPanel } from "./AppDetailPanel";
 
-const ICON_SRC = "data:image/svg+xml,%3Csvg/%3E";
-
 const noFieldsTool: Tool = {
   name: "no_input_app",
   title: "No Input App",
@@ -25,16 +23,6 @@ const requiredFieldTool: Tool = {
   },
 };
 
-const optionalFieldTool: Tool = {
-  name: "greet",
-  inputSchema: {
-    type: "object",
-    properties: {
-      name: { type: "string", description: "The name to greet" },
-    },
-  },
-};
-
 const baseProps = {
   formValues: {},
   isOpening: false,
@@ -43,20 +31,6 @@ const baseProps = {
 };
 
 describe("AppDetailPanel", () => {
-  it("prefers the title over the name", () => {
-    renderWithMantine(
-      <AppDetailPanel {...baseProps} tool={requiredFieldTool} />,
-    );
-    expect(screen.getByText("Greet")).toBeInTheDocument();
-  });
-
-  it("falls back to the name when title is missing", () => {
-    renderWithMantine(
-      <AppDetailPanel {...baseProps} tool={optionalFieldTool} />,
-    );
-    expect(screen.getByText("greet")).toBeInTheDocument();
-  });
-
   it("renders the description when provided", () => {
     renderWithMantine(<AppDetailPanel {...baseProps} tool={noFieldsTool} />);
     expect(screen.getByText("Takes no parameters")).toBeInTheDocument();
@@ -69,22 +43,6 @@ describe("AppDetailPanel", () => {
     expect(screen.queryByText("Takes no parameters")).not.toBeInTheDocument();
   });
 
-  it("renders the first icon when tool.icons is present", () => {
-    renderWithMantine(
-      <AppDetailPanel
-        {...baseProps}
-        tool={{ ...noFieldsTool, icons: [{ src: ICON_SRC }] }}
-      />,
-    );
-    const img = screen.getByRole("presentation");
-    expect(img).toHaveAttribute("src", ICON_SRC);
-  });
-
-  it("does not render an icon when tool.icons is missing", () => {
-    renderWithMantine(<AppDetailPanel {...baseProps} tool={noFieldsTool} />);
-    expect(screen.queryByRole("presentation")).not.toBeInTheDocument();
-  });
-
   it("renders the schema form using the tool's inputSchema", () => {
     renderWithMantine(
       <AppDetailPanel {...baseProps} tool={requiredFieldTool} />,