Fix MCP widgets according to consumer app by ishaanxgupta · Pull Request #1189 · supermemoryai/supermemory

ishaanxgupta · 2026-07-02T11:50:44Z

Make the MCP widget surfaces match the Nova theme and improve dark-mode readability. Includes widget form, graph, and Biome formatting fixes stacked on top of PR #1120.

Make the widget fall back to dark tokens when the host does not provide an explicit theme, and expand workspace memory count labels from mem/mems to memory/memories. Co-authored-by: Ishaan Gupta <ishaankone@gmail.com>

Consolidate multi-line shadow values to single lines to match Biome formatting rules. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Fix CSS specificity order: move .mcp-widget-glow base rule before override selector to satisfy noDescendingSpecificity - Remove invalid aria-label from header element - Add aria-hidden="true" to decorative SVG instead of role="img" - Format multi-line shadow values on single lines per Biome Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

ishaanxgupta · 2026-07-02T11:50:57Z

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

Fix generic error for oversized MCP file uploads #1193 : 2 dependent PRs (#1194 , #1195 )
Fix nonexistent container tag handling in MCP tools #1192
Fix MCP widgets according to consumer app #1189 👈 (View in Graphite)
MCP Revamp #1120
main

How to use the Graphite Merge Queue

Add the label Main to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has enabled the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

cloudflare-workers-and-pages · 2026-07-02T11:55:37Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
❌ Deployment failed View logs	supermemory-mcp	`440e9e9`	Jul 03 2026, 03:24 PM

cloudflare-workers-and-pages · 2026-07-02T11:55:37Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	supermemory-app	`440e9e9`	Commit Preview URL Branch Preview URL	Jul 03 2026, 03:25 PM

vorflux · 2026-07-02T12:01:23Z

Summary

Reviewed the MCP widget dark-mode readability changes across the updated widget app, design tokens, UI primitives, and view components. The delegated code review did not identify any concrete bug, security issue, data-loss risk, race condition, or breaking change in the PR diff.

Verdict

✅ Reviewed — no issues found. The changes appear consistent with the visual dark-mode readability scope and no actionable review findings were reported.

vorflux · 2026-07-02T12:01:30Z

Testing

The testing subagent exercised the MCP widget Studio and real widget loading shell in dark mode, covering primitives, composite views, graph readability, narrow and wide layouts, and public preview behavior. The PR passed the dark-mode visual-readability scope; one unrelated current quality-gate failure remains in unchanged hook files.

Commands run:

bun install
bunx vite --config vite.config.dev.ts --host 0.0.0.0 --port 5174
session update-preview-url --url localhost:5174
port expose --port 5174
bun run build:widget
bun run check-types

Result:

bun install: PASS
MCP widget Studio via Vite: PASS
Public preview: PASS after preview-only Vite allowedHosts restart
bun run build:widget: PASS
bun run check-types: FAIL in unchanged files src/widget/hooks/useHostContext.ts and src/widget/hooks/useViewState.ts

Observed dark backgrounds, cards, text, controls, badges, form fields, success/error states, loading spinner, and graph controls with readable contrast. No clipping, overlapping, hidden content, broken z-index, or awkward spacing was observed in the tested dark-mode surfaces.

Verdict

✅ Passed. Visual dark-mode readability passed for the PR scope; the check-types failure is in unchanged hook files and appears unrelated to this PR.

Attached Images and Videos

🎥 View recording: mcp-widget-dark-mode-studio.webm

ishaanxgupta · 2026-07-02T14:28:14Z

claude · 2026-07-02T14:28:36Z

Claude finished @ved015's task in 1m 2s —— View job

Review Complete

Load review tools
Fetch PR diff and analyze changes
Check for bugs, security issues, and logic errors
Submit review

Overview: Applies Nova-aligned dark mode styling to the MCP widget — updated design tokens, solid control surfaces, a new WidgetShell wrapper, and branded loading animation.

Issues found: None — this looks good to ship.

The changes are well-scoped to visual presentation:

tokens.css: Forces the widget onto Nova's dark palette regardless of host theme
globals.css: New .mcp-widget-shell with grid/glow effects, branded .super-loader animation with proper prefers-reduced-motion fallback
UI primitives: Inputs/textareas get solid --bg-control backgrounds instead of transparent
Graph.tsx: Correctly memoizes color overrides with colors dependency; bg: "transparent" lets the shell background show through
Views: Wrapped in consistent panel styling

No bugs, security concerns, race conditions, or breaking changes detected.

Score: 10/10

claude

Overview: Applies Nova-aligned dark mode styling to the MCP widget — updated design tokens, solid control surfaces, a new WidgetShell wrapper, and branded loading animation.

Issues found: None — this looks good to ship.

The changes are well-scoped to visual presentation:

tokens.css: Forces the widget onto Nova's dark palette regardless of host theme (intentional per the comment explaining agent cell context)
globals.css: New .mcp-widget-shell with grid/glow effects, branded .super-loader animation with proper prefers-reduced-motion fallback
UI primitives: Inputs/textareas get solid --bg-control backgrounds instead of transparent (prevents host grid bleeding through)
Graph.tsx: Correctly memoizes color overrides with colors dependency; bg: "transparent" lets the shell background show through
Views: Wrapped in consistent panel styling (--bg-panel, border, shadow)

No bugs, security concerns, race conditions, or breaking changes detected. The font swap to DM Sans is consistent across both entry HTML files.

Score: 10/10

claude

Overview: Applies Nova-aligned dark mode styling to the MCP widget — updated design tokens, solid control surfaces, a new WidgetShell wrapper, and branded loading animation.

Issues found: None — this looks good to ship.

The changes are well-scoped to visual presentation:

tokens.css: Forces the widget onto Nova's dark palette regardless of host theme (intentional per the comment explaining agent cell context)
globals.css: New .mcp-widget-shell with grid/glow effects, branded .super-loader animation with proper prefers-reduced-motion fallback
UI primitives: Inputs/textareas get solid --bg-control backgrounds instead of transparent (prevents host grid bleeding through)
Graph.tsx: Correctly memoizes color overrides with colors dependency; bg: "transparent" lets the shell background show through
Views: Wrapped in consistent panel styling (--bg-panel, border, shadow)

No bugs, security concerns, race conditions, or breaking changes detected. The font swap to DM Sans is consistent across both entry HTML files.

Score: 10/10

claude

Overview: Applies Nova-aligned dark mode styling to the MCP widget — updated design tokens, solid control surfaces, a new WidgetShell wrapper, and branded loading animation.

Issues found: None — this looks good to ship.

The changes are well-scoped to visual presentation:

tokens.css: Forces the widget onto Nova's dark palette regardless of host theme (intentional per the comment explaining agent cell context)
globals.css: New .mcp-widget-shell with grid/glow effects, branded .super-loader animation with proper prefers-reduced-motion fallback
UI primitives: Inputs/textareas get solid --bg-control backgrounds instead of transparent (prevents host grid bleeding through)
Graph.tsx: Correctly memoizes color overrides with colors dependency; bg: "transparent" lets the shell background show through
Views: Wrapped in consistent panel styling (--bg-panel, border, shadow)

No bugs, security concerns, race conditions, or breaking changes detected. The font swap to DM Sans is consistent across both entry HTML files.

Score: 10/10

claude

Overview: Applies Nova-aligned dark mode styling to the MCP widget — updated design tokens, solid control surfaces, a new WidgetShell wrapper, and branded loading animation.

Issues found: None — this looks good to ship.

The changes are well-scoped to visual presentation:

tokens.css: Forces the widget onto Nova's dark palette regardless of host theme (intentional per the comment explaining agent cell context)
globals.css: New .mcp-widget-shell with grid/glow effects, branded .super-loader animation with proper prefers-reduced-motion fallback
UI primitives: Inputs/textareas get solid --bg-control backgrounds instead of transparent (prevents host grid bleeding through)
Graph.tsx: Correctly memoizes color overrides with colors dependency; bg: "transparent" lets the shell background show through
Views: Wrapped in consistent panel styling (--bg-panel, border, shadow)

No bugs, security concerns, race conditions, or breaking changes detected. The font swap to DM Sans is consistent across both entry HTML files.

Score: 10/10

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

claude

Overview: Applies Nova-aligned dark mode styling to the MCP widget — updated design tokens, solid control surfaces, a new WidgetShell wrapper, and branded loading animation.

Issues found: None — this looks good to ship.

The changes are well-scoped to visual presentation:

tokens.css: Forces the widget onto Nova's dark palette regardless of host theme (intentional per the comment explaining agent cell context)
globals.css: New .mcp-widget-shell with grid/glow effects, branded .super-loader animation with proper prefers-reduced-motion fallback
UI primitives: Inputs/textareas get solid --bg-control backgrounds instead of transparent (prevents host grid bleeding through)
Graph.tsx: Correctly memoizes color overrides with colors dependency; bg: "transparent" lets the shell background show through
Views: Wrapped in consistent panel styling (--bg-panel, border, shadow)

No bugs, security concerns, race conditions, or breaking changes detected. The font swap to DM Sans is consistent across both entry HTML files.

Score: 10/10

claude

Overview: Applies Nova-aligned dark mode styling to the MCP widget — updated design tokens, solid control surfaces, a new WidgetShell wrapper, and branded loading animation.

Issues found: None — this looks good to ship.

The changes are well-scoped to visual presentation:

tokens.css: Forces the widget onto Nova's dark palette regardless of host theme (intentional per the comment explaining agent cell context)
globals.css: New .mcp-widget-shell with grid/glow effects, branded .super-loader animation with proper prefers-reduced-motion fallback
UI primitives: Inputs/textareas get solid --bg-control backgrounds instead of transparent (prevents host grid bleeding through)
Graph.tsx: Correctly memoizes color overrides with colors dependency; bg: "transparent" lets the shell background show through
Views: Wrapped in consistent panel styling (--bg-panel, border, shadow)

No bugs, security concerns, race conditions, or breaking changes detected. The font swap to DM Sans is consistent across both entry HTML files.

Score: 10/10

claude

Overview: Applies Nova-aligned dark mode styling to the MCP widget — updated design tokens, solid control surfaces, a new WidgetShell wrapper, and branded loading animation.

Issues found: None — this looks good to ship.

The changes are well-scoped to visual presentation:

tokens.css: Forces the widget onto Nova's dark palette regardless of host theme (intentional per the comment explaining agent cell context)
globals.css: New .mcp-widget-shell with grid/glow effects, branded .super-loader animation with proper prefers-reduced-motion fallback
UI primitives: Inputs/textareas get solid --bg-control backgrounds instead of transparent (prevents host grid bleeding through)
Graph.tsx: Correctly memoizes color overrides with colors dependency; bg: "transparent" lets the shell background show through
Views: Wrapped in consistent panel styling (--bg-panel, border, shadow)

No bugs, security concerns, race conditions, or breaking changes detected. The font swap to DM Sans is consistent across both entry HTML files.

Score: 10/10

claude

Overview: Applies Nova-aligned dark mode styling to the MCP widget — updated design tokens, solid control surfaces, a new WidgetShell wrapper, and branded loading animation.

Issues found: None — this looks good to ship.

The changes are well-scoped to visual presentation:

tokens.css: Forces the widget onto Nova's dark palette regardless of host theme (intentional per the comment explaining agent cell context)
globals.css: New .mcp-widget-shell with grid/glow effects, branded .super-loader animation with proper prefers-reduced-motion fallback
UI primitives: Inputs/textareas get solid --bg-control backgrounds instead of transparent (prevents host grid bleeding through)
Graph.tsx: Correctly memoizes color overrides with colors dependency; bg: "transparent" lets the shell background show through
Views: Wrapped in consistent panel styling (--bg-panel, border, shadow)

No bugs, security concerns, race conditions, or breaking changes detected. The font swap to DM Sans is consistent across both entry HTML files.

Score: 10/10

claude

Overview: Applies Nova-aligned dark mode styling to the MCP widget — updated design tokens, solid control surfaces, a new WidgetShell wrapper, and branded loading animation.

Issues found: None — this looks good to ship.

The changes are well-scoped to visual presentation:

tokens.css: Forces the widget onto Nova's dark palette regardless of host theme (intentional per the comment explaining agent cell context)
globals.css: New .mcp-widget-shell with grid/glow effects, branded .super-loader animation with proper prefers-reduced-motion fallback
UI primitives: Inputs/textareas get solid --bg-control backgrounds instead of transparent (prevents host grid bleeding through)
Graph.tsx: Correctly memoizes color overrides with colors dependency; bg: "transparent" lets the shell background show through
Views: Wrapped in consistent panel styling (--bg-panel, border, shadow)

No bugs, security concerns, race conditions, or breaking changes detected. The font swap to DM Sans is consistent across both entry HTML files.

Score: 10/10

claude

Overview: Applies Nova-aligned dark mode styling to the MCP widget — updated design tokens, solid control surfaces, a new WidgetShell wrapper, and branded loading animation.

Issues found: None — this looks good to ship.

The changes are well-scoped to visual presentation:

tokens.css: Forces the widget onto Nova's dark palette regardless of host theme (intentional per the comment explaining agent cell context)
globals.css: New .mcp-widget-shell with grid/glow effects, branded .super-loader animation with proper prefers-reduced-motion fallback
UI primitives: Inputs/textareas get solid --bg-control backgrounds instead of transparent (prevents host grid bleeding through)
Graph.tsx: Correctly memoizes color overrides with colors dependency; bg: "transparent" lets the shell background show through
Views: Wrapped in consistent panel styling (--bg-panel, border, shadow)

No bugs, security concerns, race conditions, or breaking changes detected. The font swap to DM Sans is consistent across both entry HTML files.

Score: 10/10

claude

Overview: Applies Nova-aligned dark mode styling to the MCP widget — updated design tokens, solid control surfaces, a new WidgetShell wrapper, and branded loading animation.

Issues found: None — this looks good to ship.

The changes are well-scoped to visual presentation:

tokens.css: Forces the widget onto Nova's dark palette regardless of host theme (intentional per the comment explaining agent cell context)
globals.css: New .mcp-widget-shell with grid/glow effects, branded .super-loader animation with proper prefers-reduced-motion fallback
UI primitives: Inputs/textareas get solid --bg-control backgrounds instead of transparent (prevents host grid bleeding through)
Graph.tsx: Correctly memoizes color overrides with colors dependency; bg: "transparent" lets the shell background show through
Views: Wrapped in consistent panel styling (--bg-panel, border, shadow)

No bugs, security concerns, race conditions, or breaking changes detected. The font swap to DM Sans is consistent across both entry HTML files.

Score: 10/10

ved015 and others added 6 commits July 2, 2026 17:05

Fix MCP widget dark mode readability

afcc59a

Make the widget fall back to dark tokens when the host does not provide an explicit theme, and expand workspace memory count labels from mem/mems to memory/memories. Co-authored-by: Ishaan Gupta <ishaankone@gmail.com>

Fix Biome CSS formatting in tokens.css

677b9d4

Consolidate multi-line shadow values to single lines to match Biome formatting rules. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

style(mcp): align widget UI with Nova theme

f7d2bb7

style(mcp): solidify widget form surfaces

0d7e231

style(mcp): align graph widget surface

a8f3644

ishaanxgupta mentioned this pull request Jul 2, 2026

MCP Revamp #1120

Open

ishaanxgupta added 5 commits July 2, 2026 18:59

Align MCP widget cards with web theme

d5d0cb7

Preview Cursor MCP widget shell in studio

645a440

Use neutral hover states for MCP cards

a09b5b6

Use Supermemory loader in MCP widget

6a85341

Remove icons from MCP workspace cards

ef3762d

ishaanxgupta marked this pull request as ready for review July 2, 2026 14:28

graphite-app Bot assigned ishaanxgupta Jul 2, 2026

claude Bot reviewed Jul 2, 2026

View reviewed changes

Match MCP workspace cards to web style

d7e2991

claude Bot reviewed Jul 2, 2026

View reviewed changes

ishaanxgupta added 3 commits July 2, 2026 20:07

Match MCP permission pill to web card

a81a7ed

Remove MCP status card borders

ca71ed6

Match MCP confirmation card style

f0023bb

claude Bot reviewed Jul 2, 2026

View reviewed changes

ishaanxgupta changed the title ~~Fix MCP widget dark mode readability~~ Fix MCP widgets according to consumer app Jul 2, 2026

Polish MCP widget UI

649d985

claude Bot reviewed Jul 3, 2026

View reviewed changes

github-actions Bot and others added 2 commits July 3, 2026 11:00

Fix Biome formatting in Button.tsx

1e81a3e

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Match MCP widget typography to web

2f391cf

claude Bot reviewed Jul 3, 2026

View reviewed changes

Avoid picker scroll for short workspace lists

af0bc63

ved015 mentioned this pull request Jul 3, 2026

Fix nonexistent container tag handling in MCP tools #1192

Open

claude Bot reviewed Jul 3, 2026

View reviewed changes

Hide picker scrollbar chrome

e72f775

claude Bot reviewed Jul 3, 2026

View reviewed changes

Tighten MCP picker card spacing

166317b

claude Bot reviewed Jul 3, 2026

View reviewed changes

ved015 mentioned this pull request Jul 3, 2026

Fix generic error for oversized MCP file uploads #1193

Open

Constrain MCP picker card width

440e9e9

claude Bot reviewed Jul 3, 2026

View reviewed changes

ved015 force-pushed the mcp-revamp-followup branch from a0dd93f to 440e9e9 Compare July 3, 2026 15:21

ved015 mentioned this pull request Jul 3, 2026

DONT merge #1194

Closed

claude Bot reviewed Jul 3, 2026

View reviewed changes

ishaanxgupta mentioned this pull request Jul 3, 2026

fix(mcp): return graph view message from fetch-graph-data #1195

Open

2 tasks

Uh oh!

Conversation

ishaanxgupta commented Jul 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ishaanxgupta commented Jul 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

cloudflare-workers-and-pages Bot commented Jul 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying with Cloudflare Workers

Uh oh!

cloudflare-workers-and-pages Bot commented Jul 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying with Cloudflare Workers

Uh oh!

vorflux Bot commented Jul 2, 2026

Summary

Verdict

Uh oh!

vorflux Bot commented Jul 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Testing

Verdict

Uh oh!

ishaanxgupta commented Jul 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

claude Bot commented Jul 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review Complete

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ishaanxgupta commented Jul 2, 2026 •

edited

Loading

ishaanxgupta commented Jul 2, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Jul 2, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Jul 2, 2026 •

edited

Loading

vorflux Bot commented Jul 2, 2026 •

edited

Loading

ishaanxgupta commented Jul 2, 2026 •

edited

Loading

claude Bot commented Jul 2, 2026 •

edited

Loading