feat(mcp-consent): render inventory stats as an MCP App dashboard by dsklyar · Pull Request #476 · transcend-io/tools

dsklyar · 2026-08-25T23:01:08Z

Summary

Bind consent_get_inventory_stats to an MCP App: cookie and data-flow metric cards (with short notes), triage progress bars, a spinner while the host connects or data loads, and error states. The heading is Consent Inventory triage.
Keep the same JSON payload for hosts without MCP Apps. The tool description stays about the counts and how they differ from analytics; the host renders the view from _meta.ui, not from copy the model has to interpret.
Use the kit and theme from feat(mcp): add shared MCP App widget kit #475: max-w-view keeps the content from stretching in a wide panel, and Grid lays the cards out against the row's own width so they stay side by side in Claude's panel instead of stacking. Generated-document tests assert kit utilities, inlined Spinner CSS, and the container query behind the columns.

Test plan

pnpm run --dir packages/design-tokens build
pnpm run --dir packages/mcp/mcp-server-consent build:ui
pnpm run --dir packages/mcp/mcp-server-consent typecheck:ui
pnpm run --dir packages/mcp/mcp-server-consent test
pnpm run check:deps
pnpm run check:changeset

Stack

Depends on feat(mcp): add shared MCP App widget kit #475 (shared widget kit and theme tokens).
Replaces feat(mcp-consent): render inventory stats as an MCP App dashboard #447 with a smaller dashboard-only diff.

Demo(s)

Screen.Recording.2026-08-25.at.17.03.03.mov

Extract reusable view widgets into a private workspace package and opt consuming packages into its Tailwind sources without bloating unrelated views.

Present cookie and data-flow triage counts in a responsive MCP App while retaining the plain JSON fallback for hosts without App support.

linear-code · 2026-08-25T23:01:11Z

ZEL-8213

pkg-pr-new · 2026-08-25T23:08:04Z

Open in StackBlitz

@transcend-io/airgap.js-types

pnpm add https://pkg.pr.new/@transcend-io/airgap.js-types@476

yarn add https://pkg.pr.new/@transcend-io/airgap.js-types@476.tgz

@transcend-io/cli

pnpm add https://pkg.pr.new/@transcend-io/cli@476

yarn add https://pkg.pr.new/@transcend-io/cli@476.tgz

@transcend-io/design-tokens

pnpm add https://pkg.pr.new/@transcend-io/design-tokens@476

yarn add https://pkg.pr.new/@transcend-io/design-tokens@476.tgz

@transcend-io/internationalization

pnpm add https://pkg.pr.new/@transcend-io/internationalization@476

yarn add https://pkg.pr.new/@transcend-io/internationalization@476.tgz

@transcend-io/privacy-types

pnpm add https://pkg.pr.new/@transcend-io/privacy-types@476

yarn add https://pkg.pr.new/@transcend-io/privacy-types@476.tgz

@transcend-io/sdk

pnpm add https://pkg.pr.new/@transcend-io/sdk@476

yarn add https://pkg.pr.new/@transcend-io/sdk@476.tgz

@transcend-io/type-utils

pnpm add https://pkg.pr.new/@transcend-io/type-utils@476

yarn add https://pkg.pr.new/@transcend-io/type-utils@476.tgz

@transcend-io/utils

pnpm add https://pkg.pr.new/@transcend-io/utils@476

yarn add https://pkg.pr.new/@transcend-io/utils@476.tgz

@transcend-io/mcp

pnpm add https://pkg.pr.new/@transcend-io/mcp@476

yarn add https://pkg.pr.new/@transcend-io/mcp@476.tgz

@transcend-io/mcp-server-admin

pnpm add https://pkg.pr.new/@transcend-io/mcp-server-admin@476

yarn add https://pkg.pr.new/@transcend-io/mcp-server-admin@476.tgz

@transcend-io/mcp-server-assessment

pnpm add https://pkg.pr.new/@transcend-io/mcp-server-assessment@476

yarn add https://pkg.pr.new/@transcend-io/mcp-server-assessment@476.tgz

@transcend-io/mcp-server-base

pnpm add https://pkg.pr.new/@transcend-io/mcp-server-base@476

yarn add https://pkg.pr.new/@transcend-io/mcp-server-base@476.tgz

@transcend-io/mcp-server-consent

pnpm add https://pkg.pr.new/@transcend-io/mcp-server-consent@476

yarn add https://pkg.pr.new/@transcend-io/mcp-server-consent@476.tgz

@transcend-io/mcp-server-discovery

pnpm add https://pkg.pr.new/@transcend-io/mcp-server-discovery@476

yarn add https://pkg.pr.new/@transcend-io/mcp-server-discovery@476.tgz

@transcend-io/mcp-server-docs

pnpm add https://pkg.pr.new/@transcend-io/mcp-server-docs@476

yarn add https://pkg.pr.new/@transcend-io/mcp-server-docs@476.tgz

@transcend-io/mcp-server-dsr

pnpm add https://pkg.pr.new/@transcend-io/mcp-server-dsr@476

yarn add https://pkg.pr.new/@transcend-io/mcp-server-dsr@476.tgz

@transcend-io/mcp-server-inventory

pnpm add https://pkg.pr.new/@transcend-io/mcp-server-inventory@476

yarn add https://pkg.pr.new/@transcend-io/mcp-server-inventory@476.tgz

@transcend-io/mcp-server-preferences

pnpm add https://pkg.pr.new/@transcend-io/mcp-server-preferences@476

yarn add https://pkg.pr.new/@transcend-io/mcp-server-preferences@476.tgz

@transcend-io/mcp-server-workflows

pnpm add https://pkg.pr.new/@transcend-io/mcp-server-workflows@476

yarn add https://pkg.pr.new/@transcend-io/mcp-server-workflows@476.tgz

commit: a96cc64

Honor the host OS instead of freezing or exempting animations in the shared theme.

The kit no longer ships a prefers-reduced-motion reset, so those checks would fail after stacking.

These tokens are used by every view, so the comments should describe the layout primitive rather than the inventory dashboard that motivated the values.

giacaglia · 2026-08-25T23:38:37Z

+ * than this dashboard has content for, and stretching to fill it turns the KPI
+ * cards into letterboxes.
+ */
+const PANEL = 'mx-auto flex w-full max-w-view flex-col gap-4 rounded-lg bg-card-sunken px-4 py-4';


Is it common to have these as constants? Shouldn't we share these constants?

These constants are for Tailwind styling used only in the view below which are repeated. I could make a separate component here, but for initial implementation of dashboard I think its fine.

giacaglia

Cool

… the view The host already binds the dashboard via MCP Apps metadata, so the model description does not need to mention it. Drop the dashboard-specific layout walkthrough from the shared MCP README for the same reason.

A host sizes the iframe to its own panel, so a breakpoint never reports the display width. Claude's inline panel measures just under `lg`, which stacked three metric cards that had room to sit side by side.

The document now carries a container query rather than an `lg` media query, so the old assertion would pass on a layout that stacks in every host panel.

The classes already show the row is container-sized; the Claude-panel anecdote does not belong on the component or in the shared README.

dsklyar · 2026-08-26T00:09:06Z

Will add refresh button tool in follow up.

dawson-turechek-transcend

Love it!

dawson-turechek-transcend · 2026-08-26T16:45:06Z

@@ -0,0 +1,2 @@
+# Vite-built MCP App views, rebuilt by `pnpm prebuild`
+src/ui/generated/


Nit: How about we replace this with **/ui/generated in the root .gitignore?

Will follow up!

dsklyar added 2 commits August 25, 2026 15:57

feat(mcp): add shared MCP App widget kit

0393541

Extract reusable view widgets into a private workspace package and opt consuming packages into its Tailwind sources without bloating unrelated views.

feat(mcp-consent): render inventory stats dashboard

4ade58a

Present cookie and data-flow triage counts in a responsive MCP App while retaining the plain JSON fallback for hosts without App support.

dsklyar requested review from a team as code owners August 25, 2026 23:01

dsklyar mentioned this pull request Aug 25, 2026

feat(mcp-consent): render inventory stats as an MCP App dashboard #447

Closed

4 tasks

dsklyar added 5 commits August 25, 2026 16:12

fix(mcp): drop reduced-motion CSS reset from App views

7d20caf

Honor the host OS instead of freezing or exempting animations in the shared theme.

Merge branch 'danielsklyar/zel-8213-mcp-ui-common'

e81120c

test(mcp-consent): drop reduced-motion spinner assertions

23812e0

The kit no longer ships a prefers-reduced-motion reset, so those checks would fail after stacking.

docs(mcp): drop dashboard-specific comments from the shared theme

77eba29

These tokens are used by every view, so the comments should describe the layout primitive rather than the inventory dashboard that motivated the values.

Merge branch 'danielsklyar/zel-8213-mcp-ui-common'

af3920c

giacaglia reviewed Aug 25, 2026

View reviewed changes

giacaglia previously approved these changes Aug 25, 2026

View reviewed changes

dsklyar dismissed giacaglia’s stale review via 2e9c564 August 25, 2026 23:45

dsklyar mentioned this pull request Aug 25, 2026

feat(mcp): add shared MCP App widget kit #475

Merged

5 tasks

dsklyar added 5 commits August 25, 2026 16:57

fix(mcp): size Grid columns by the row, not the iframe viewport

3ba0c08

A host sizes the iframe to its own panel, so a breakpoint never reports the display width. Claude's inline panel measures just under `lg`, which stacked three metric cards that had room to sit side by side.

Merge branch 'danielsklyar/zel-8213-mcp-ui-common'

a0c6fe3

test(mcp-consent): assert metric columns key off the row width

cd8de6e

The document now carries a container query rather than an `lg` media query, so the old assertion would pass on a layout that stacks in every host panel.

docs(mcp): drop the Grid layout walkthrough

ea742b1

The classes already show the row is container-sized; the Claude-panel anecdote does not belong on the component or in the shared README.

Merge branch 'danielsklyar/zel-8213-mcp-ui-common'

a96cc64

dsklyar requested a review from dawson-turechek-transcend August 26, 2026 00:08

dsklyar requested a review from giacaglia August 26, 2026 00:09

dawson-turechek-transcend approved these changes Aug 26, 2026

View reviewed changes

dsklyar added this pull request to the merge queue Aug 26, 2026

Base automatically changed from danielsklyar/zel-8213-mcp-ui-common to main August 26, 2026 16:51

Merged via the queue into main with commit 4c1b802 Aug 26, 2026
5 checks passed

dsklyar deleted the danielsklyar/zel-8213-consent-inventory-dashboard branch August 26, 2026 16:58

Navigation Menu

Uh oh!

feat(mcp-consent): render inventory stats as an MCP App dashboard - #476

feat(mcp-consent): render inventory stats as an MCP App dashboard#476
dsklyar merged 13 commits into
mainfrom
danielsklyar/zel-8213-consent-inventory-dashboard

dsklyar commented Aug 25, 2026 •

edited

Loading

Uh oh!

linear-code Bot commented Aug 25, 2026

Uh oh!

pkg-pr-new Bot commented Aug 25, 2026 •

edited

Loading

Uh oh!

giacaglia Aug 25, 2026

Uh oh!

dsklyar Aug 26, 2026

Uh oh!

giacaglia left a comment

Uh oh!

dsklyar commented Aug 26, 2026 •

edited

Loading

Uh oh!

dawson-turechek-transcend left a comment

Uh oh!

dawson-turechek-transcend Aug 26, 2026

Uh oh!

dsklyar Aug 26, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		@@ -0,0 +1,2 @@
		# Vite-built MCP App views, rebuilt by `pnpm prebuild`
		src/ui/generated/

Uh oh!

Conversation

dsklyar commented Aug 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Stack

Demo(s)

Uh oh!

linear-code Bot commented Aug 25, 2026

Uh oh!

pkg-pr-new Bot commented Aug 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

giacaglia Aug 25, 2026

Choose a reason for hiding this comment

Uh oh!

dsklyar Aug 26, 2026

Choose a reason for hiding this comment

Uh oh!

giacaglia left a comment

Choose a reason for hiding this comment

Uh oh!

dsklyar commented Aug 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dawson-turechek-transcend left a comment

Choose a reason for hiding this comment

Uh oh!

dawson-turechek-transcend Aug 26, 2026

Choose a reason for hiding this comment

Uh oh!

dsklyar Aug 26, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dsklyar commented Aug 25, 2026 •

edited

Loading

pkg-pr-new Bot commented Aug 25, 2026 •

edited

Loading

dsklyar commented Aug 26, 2026 •

edited

Loading