Context
Build the two presentational group components that the new AppsScreen will compose. See Apps Screen feature spec and the storybook component plan entries 2.3a and 2.5a.
Legacy v1 reference: AppsTab.tsx — see the list rendering (renderItem callback) and the input form panel block ("App Input" container with the "Open App" button).
Mirror the patterns used by ToolListItem (clients/web/src/components/groups/ToolListItem/ToolListItem.tsx) and ToolDetailPanel (clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.tsx).
Scope
AppListItem
- Path:
clients/web/src/components/groups/AppListItem/
- Props:
tool: Tool, selected: boolean, onClick: () => void.
- Renders
tool.icons (real MCP Tool.icons) when present (size sm), name, two-line description, and a trailing IconChevronRight affordance.
- Reuses the same active-state highlight as
ToolListItem.
AppDetailPanel
- Path:
clients/web/src/components/groups/AppDetailPanel/
- Props:
tool: Tool, formValues, isOpening: boolean, onFormChange, onOpenApp.
- Layout: icon + title (
tool.title ?? tool.name), description, SchemaForm for tool.inputSchema, full-width Button "Open App" with IconPlayerPlay.
- No annotations group, no progress display, no cancel — execution is delegated to the embedded app.
- Disabled state while
isOpening or while the form has validation errors.
Stories
AppListItem: Default, Selected, WithIcon, NoDescription, LongName.
AppDetailPanel: NoFields, SimpleStringParam, MultipleParams, WithIcon, Opening, ComplexSchema.
Acceptance criteria
Dependencies
- Blocked by: Apps tab — add @modelcontextprotocol/ext-apps dep and isAppTool helper in core (for the
Tool.icons typing path; can run in parallel if SDK types already include icons).
- Can run in parallel with:
AppRenderer issue.
Branch / Base
Context
Build the two presentational group components that the new
AppsScreenwill compose. See Apps Screen feature spec and the storybook component plan entries 2.3a and 2.5a.Legacy v1 reference:
AppsTab.tsx— see the list rendering (renderItemcallback) and the input form panel block ("App Input" container with the "Open App" button).Mirror the patterns used by
ToolListItem(clients/web/src/components/groups/ToolListItem/ToolListItem.tsx) andToolDetailPanel(clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.tsx).Scope
AppListItemclients/web/src/components/groups/AppListItem/tool: Tool,selected: boolean,onClick: () => void.tool.icons(real MCPTool.icons) when present (size sm), name, two-line description, and a trailingIconChevronRightaffordance.ToolListItem.AppDetailPanelclients/web/src/components/groups/AppDetailPanel/tool: Tool,formValues,isOpening: boolean,onFormChange,onOpenApp.tool.title ?? tool.name), description,SchemaFormfortool.inputSchema, full-widthButton"Open App" withIconPlayerPlay.isOpeningor while the form has validation errors.Stories
AppListItem: Default, Selected, WithIcon, NoDescription, LongName.AppDetailPanel: NoFields, SimpleStringParam, MultipleParams, WithIcon, Opening, ComplexSchema.Acceptance criteria
Tool) from@modelcontextprotocol/sdk/types.js— no v1.5 wrapper types.Dependencies
Tool.iconstyping path; can run in parallel if SDK types already includeicons).AppRendererissue.Branch / Base
v2/mainv2