Skip to content

feat: render agentic task views with a Mantine A2UI catalog - #54

Open
carlosvin wants to merge 6 commits into
mainfrom
cursor/agentic-a2ui-mantine-5fac
Open

carlosvin wants to merge 6 commits into
mainfrom
cursor/agentic-a2ui-mantine-5fac

Conversation

@carlosvin

Copy link
Copy Markdown
Owner

Summary

Agentic task list and detail views are declarative A2UI surfaces built by the shell from tool data. The model still returns tasks only. The host maps a narrowed catalog onto Mantine 9: Column, Row, Card, Text, Title, Badge, and Button. Unknown component types render nothing.

@a2ui-bridge/react-mantine is not used. That package peers Mantine 8 and Tabler icons, and this app is Mantine 9 with lucide-react.

  • showTasksView and showTaskView return { tasks } or { task }. buildTaskViewMessages builds the surface. A list row is one card button. open-task loads the detail without another model turn. back-to-list sends "Show my tasks". Visible text does not include the task id.
  • Component ids stay clear of bare string props such as usageHint: "body", which the A2UI processor treats as child references.
  • Raw HTML stays on the MCP Apps iframe path (AgenticMcpRenderer and sandbox_proxy.html). The task-view HTML guest, /api/mcp, and mcp-task-view.js are removed.
  • agentic-ux 0.3.0 records the view strategy. The architecture skill stays vendor-agnostic.

Verification

  • pnpm lint (Biome, tsc, skill check, skill evals) and pnpm test (203 tests).
  • Headed browser on the production server (PROMPT_CONCEPT=agentic, seed data): list card, dark theme, detail with "All tasks", and a narrow viewport.

Task list card in light mode
Task list card in dark mode
Detail view after opening the card
Task card on a narrow viewport
a2ui-task-views-2.mp4

To show artifacts inline, enable in settings.

Open in Web Open in Cursor 

Task tools return data only. The shell builds a narrowed A2UI surface
(Column, Row, Card, Text, Title, Badge, Button) and keeps raw HTML
inside the MCP Apps iframe.

Co-authored-by: carlosvin <carlosvin@gmail.com>
@netlify

netlify Bot commented Oct 10, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for fullstack-promptable-app-example ready!

Name Link
🔨 Latest commit e9d650a
🔍 Latest deploy log https://app.netlify.com/projects/fullstack-promptable-app-example/deploys/6acb4ca9565b8200085fb22a
😎 Deploy Preview https://deploy-preview-54--fullstack-promptable-app-example.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Oct 10, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for fullstack-promptable-prompt-first ready!

Name Link
🔨 Latest commit e9d650a
🔍 Latest deploy log https://app.netlify.com/projects/fullstack-promptable-prompt-first/deploys/6acb4ca99d24190007f2ec29
😎 Deploy Preview https://deploy-preview-54--fullstack-promptable-prompt-first.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Oct 10, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for fullstack-promptable-agentic ready!

Name Link
🔨 Latest commit e9d650a
🔍 Latest deploy log https://app.netlify.com/projects/fullstack-promptable-agentic/deploys/6acb4ca955f264000895ae8c
😎 Deploy Preview https://deploy-preview-54--fullstack-promptable-agentic.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

cursoragent and others added 3 commits October 10, 2026 18:25
The overview eval now uses the skill description wording so the Waza
spec requirement stays covered.

Co-authored-by: carlosvin <carlosvin@gmail.com>
Component ids use a private-use prefix so literals cannot become
children. A failed detail view retries that task. Tables use header
cells, and a long table says how many rows are shown.

Co-authored-by: carlosvin <carlosvin@gmail.com>
The merge replay left the old task-view files in the tree. Task
views stay on the A2UI catalog.

Co-authored-by: carlosvin <carlosvin@gmail.com>
@carlosvin
carlosvin marked this pull request as ready for review October 10, 2026 18:44
Copilot AI balanced review requested due to automatic review settings October 10, 2026 18:44

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

Component-ID collisions, silent table truncation, missing table semantics, and incorrect detail retries remain unresolved.

4 open findings
What changed in this PR

Replaces task-specific MCP HTML views with host-rendered A2UI surfaces backed by a restricted Mantine catalog, while retaining MCP infrastructure for future raw documents.

Changes:

  • Adds deterministic task-list/detail A2UI messages and Mantine adapters.
  • Registers task-view tools directly with agentic chat.
  • Removes the task MCP route, guest HTML/JavaScript, and related tests/configuration.
File Description
vite.config.ts Removes deleted guest-script CORS handling.
src/​services/​mcpUi/​views/​task-view.html Removes task MCP HTML shell.
src/​services/​mcpUi/​taskViewDom.test.ts Removes guest DOM tests.
src/​services/​mcpUi/​mcpUiResources.ts Generalizes raw-document registration.
src/​services/​mcpUi/​mcpUiResource.ts Narrows allowlist return type.
src/​services/​mcpUi/​mcpUiResource.test.ts Tests dynamic raw-document registration.
src/​services/​ai/​taskViewsMcp.server.ts Removes task MCP server.
src/​services/​ai/​taskViewsMcp.server.test.ts Removes MCP discovery tests.
src/​services/​ai/​taskViews.server.ts Adds direct task-view tools.
src/​services/​ai/​taskViews.server.test.ts Tests task-view filter handling.
src/​services/​a2ui/​taskViewMessages.ts Builds and validates A2UI task surfaces.
src/​services/​a2ui/​taskViewMessages.test.ts Tests messages, filtering, and actions.
src/​services/​a2ui/​mantineCatalog.tsx Maps the restricted catalog to Mantine.
src/​routeTree.gen.ts Removes the MCP API route.
src/​routes/​api/​mcp.ts Deletes the task MCP endpoint.
src/​routes/​api/​chat.ts Registers direct agentic view tools.
src/​components/​AgenticShell/​AgenticThread.tsx Renders A2UI tool results and actions.
src/​components/​AgenticShell/​AgenticShell.tsx Updates shell documentation.
src/​components/​AgenticA2ui/​AgenticA2uiSurface.tsx Adds validated A2UI surface rendering.
src/​components/​AgenticA2ui/​AgenticA2uiSurface.test.tsx Tests rendering and interactions.
skills/​README.md Documents the A2UI strategy.
skills/​evals/​README.md Updates agentic evaluation expectations.
scripts/​skills/​skillEvals.ts Enforces A2UI skill alignment.
public/​mcp-task-view.js Removes the task MCP guest.
pnpm-lock.yaml Locks A2UI dependencies.
package.json Adds A2UI core and React packages.
netlify.toml Removes obsolete guest-script headers.
evals/​agentic-ux/​tasks/​agentic-unknown-component.yaml Adds unknown-component evaluation.
evals/​agentic-ux/​tasks/​agentic-contract-overview.yaml Updates contract wording.
evals/​agentic-ux/​tasks/​agentic-a2ui-mantine.yaml Adds Mantine A2UI evaluation.
.agents/​skills/​tanstack-promptable-fullstack-app-template/​SKILL.md Updates agentic architecture guidance.
.agents/​skills/​reference-tech-stack/​SKILL.md Records A2UI stack choices.
.agents/​skills/​promptable-ux/​SKILL.md Updates companion guidance.
.agents/​skills/​observability-and-env/​SKILL.md Updates companion guidance.
.agents/​skills/​agentic-ux/​SKILL.md Defines the new A2UI contract.
Files not reviewed (1)
  • pnpm-lock.yaml: Generated file

🧠 Review effort: Balanced


💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread src/services/a2ui/taskViewMessages.ts
Comment thread src/components/AgenticShell/AgenticThread.tsx Outdated
Comment thread src/services/a2ui/taskViewMessages.ts
Comment thread src/services/a2ui/taskViewMessages.ts
cursoragent and others added 2 commits October 11, 2026 08:41
Drop the unused catalog alias and URI re-export. Type task cards as
Task, and track task-view call ids in a set.

Co-authored-by: carlosvin <carlosvin@gmail.com>
Main widened the conversation and added a table presentation for the
HTML guest. Task views stay on the Mantine catalog. A table request
draws rows, and the Netlify HUD removal and full-width frame stay.

Co-authored-by: carlosvin <carlosvin@gmail.com>
@cursor
cursor Bot force-pushed the cursor/agentic-a2ui-mantine-5fac branch from e312ca1 to e9d650a Compare October 11, 2026 08:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants