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/AppControls/AppControls.tsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import {
+  Button,
+  Group,
+  ScrollArea,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import type { Tool } from "@modelcontextprotocol/sdk/types.js";
+import { ListChangedIndicator } from "../../elements/ListChangedIndicator/ListChangedIndicator";
+import { AppListItem } from "../AppListItem/AppListItem";
+
+export interface AppControlsProps {
+  tools: Tool[];
+  selectedName?: string;
+  listChanged: boolean;
+  onRefreshList: () => void;
+  onSelectApp: (name: string) => void;
+}
+
+const LIST_MAX_HEIGHT =
+  "calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2 - 220px)";
+
+const ToolbarButton = Button.withProps({
+  variant: "subtle",
+  size: "sm",
+});
+
+const EmptyState = Text.withProps({
+  c: "dimmed",
+  ta: "center",
+  py: "xl",
+});
+
+export function AppControls({
+  tools,
+  selectedName,
+  listChanged,
+  onRefreshList,
+  onSelectApp,
+}: AppControlsProps) {
+  const [searchText, setSearchText] = useState("");
+  const query = searchText.toLowerCase();
+  const filteredTools = searchText
+    ? tools.filter(
+        (tool) =>
+          tool.name.toLowerCase().includes(query) ||
+          (tool.title?.toLowerCase().includes(query) ?? false),
+      )
+    : tools;
+
+  return (
+    <Stack gap="sm">
+      <Group justify="space-between">
+        <Title order={4}>MCP Apps ({tools.length})</Title>
+        <ToolbarButton onClick={onRefreshList}>Refresh</ToolbarButton>
+      </Group>
+      <ListChangedIndicator visible={listChanged} onRefresh={onRefreshList} />
+      <TextInput
+        placeholder="Search apps..."
+        value={searchText}
+        onChange={(e) => setSearchText(e.currentTarget.value)}
+      />
+      <ScrollArea.Autosize mah={LIST_MAX_HEIGHT}>
+        <Stack gap="xs">
+          {filteredTools.length === 0 ? (
+            <EmptyState>
+              {tools.length === 0 ? "No apps available" : "No matching apps"}
+            </EmptyState>
+          ) : (
+            filteredTools.map((tool) => (
+              <AppListItem
+                key={tool.name}
+                tool={tool}
+                selected={tool.name === selectedName}
+                onClick={() => {
+                  if (tool.name !== selectedName) onSelectApp(tool.name);
+                }}
+              />
+            ))
+          )}
+        </Stack>
+      </ScrollArea.Autosize>
+    </Stack>
+  );
+}