Skip to content

Apps tab — AppListItem and AppDetailPanel groups #1261

@cliffhall

Description

@cliffhall

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

  • Components are presentation-only (props + callbacks; no store access).
  • Use only real MCP types (Tool) from @modelcontextprotocol/sdk/types.js — no v1.5 wrapper types.
  • Mantine theme variants where reusable; no inline styles, no raw hex colors.
  • Storybook stories cover each meaningful state.
  • Tests pass and coverage is ≥ 90%.

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

  • Base: v2/main
  • Label: v2

Metadata

Metadata

Assignees

Labels

v2Issues and PRs for v2

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions