From afcc59ae4948454f14765a4cfc6f708b5d5df4a8 Mon Sep 17 00:00:00 2001 From: ved015 Date: Tue, 30 Jun 2026 20:01:17 +0530 Subject: [PATCH 01/25] Fix MCP widget dark mode readability 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 --- .../src/widget/components/WorkspaceCard.tsx | 4 +- apps/mcp/src/widget/design/tokens.css | 61 ++++++++++++++++++- 2 files changed, 61 insertions(+), 4 deletions(-) diff --git a/apps/mcp/src/widget/components/WorkspaceCard.tsx b/apps/mcp/src/widget/components/WorkspaceCard.tsx index cd4122ef4..24f39211e 100644 --- a/apps/mcp/src/widget/components/WorkspaceCard.tsx +++ b/apps/mcp/src/widget/components/WorkspaceCard.tsx @@ -54,8 +54,8 @@ export function WorkspaceCard({ · - {containerTag.memoryCount} mem - {containerTag.memoryCount === 1 ? "" : "s"} + {containerTag.memoryCount}{" "} + {containerTag.memoryCount === 1 ? "memory" : "memories"} )} diff --git a/apps/mcp/src/widget/design/tokens.css b/apps/mcp/src/widget/design/tokens.css index 54436c362..750cb1175 100644 --- a/apps/mcp/src/widget/design/tokens.css +++ b/apps/mcp/src/widget/design/tokens.css @@ -8,7 +8,8 @@ * via `@custom-variant dark (&:is([data-theme="dark"] *))`. */ -:root { +:root, +[data-theme="light"] { color-scheme: light; /* Accent gradient (Supermemory brand) */ @@ -182,7 +183,7 @@ --text-primary: #fafafa; --text-secondary: #a3a3a3; - --text-muted: #525252; + --text-muted: #8a8a8a; --text-inverse: #0a0a0a; --success-muted: rgba(74, 222, 128, 0.2); @@ -220,3 +221,59 @@ --graph-control-bg: #0c1829; --graph-control-border: #1a2333; } + +@media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + color-scheme: dark; + + --bg-primary: #0a0a0a; + --bg-secondary: #171717; + --bg-muted: #262626; + --bg-elevated: #1c1c1c; + --bg-overlay: rgba(10, 10, 10, 0.7); + + --border: #2e2e2e; + --border-muted: #1f1f1f; + + --text-primary: #fafafa; + --text-secondary: #a3a3a3; + --text-muted: #8a8a8a; + --text-inverse: #0a0a0a; + + --success-muted: rgba(74, 222, 128, 0.2); + --error-muted: rgba(248, 113, 113, 0.2); + --warning-muted: rgba(251, 191, 36, 0.2); + --info-muted: rgba(96, 165, 250, 0.2); + + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); + --shadow-md: + 0 4px 6px -1px rgba(0, 0, 0, 0.4), + 0 2px 4px -2px rgba(0, 0, 0, 0.3); + --shadow-lg: + 0 10px 15px -3px rgba(0, 0, 0, 0.5), + 0 4px 6px -4px rgba(0, 0, 0, 0.4); + + --graph-bg: #0f1419; + --graph-doc-fill: #1b1f24; + --graph-doc-stroke: #2a2f36; + --graph-doc-inner: #13161a; + --graph-mem-fill: #0d2034; + --graph-mem-fill-hover: #112840; + --graph-mem-stroke: #3b73b8; + --graph-edge-derives: #fbbf24; + --graph-edge-updates: #a78bfa; + --graph-edge-extends: #38bdf8; + --graph-mem-border-forgotten: #ef4444; + --graph-mem-border-expiring: #f59e0b; + --graph-mem-border-recent: #10b981; + --graph-glow: #3b73b8; + --graph-icon: #3b73b8; + --graph-popover-bg: #0c1829; + --graph-popover-border: #1a2333; + --graph-popover-text-primary: #ffffff; + --graph-popover-text-secondary: #e2e8f0; + --graph-popover-text-muted: #94a3b8; + --graph-control-bg: #0c1829; + --graph-control-border: #1a2333; + } +} From 677b9d41d9538f5977e70b82f5e043d5dee675d4 Mon Sep 17 00:00:00 2001 From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com> Date: Tue, 30 Jun 2026 14:42:30 +0000 Subject: [PATCH 02/25] Fix Biome CSS formatting in tokens.css Consolidate multi-line shadow values to single lines to match Biome formatting rules. Co-Authored-By: Claude Opus 4.5 --- apps/mcp/src/widget/design/tokens.css | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/mcp/src/widget/design/tokens.css b/apps/mcp/src/widget/design/tokens.css index 750cb1175..815f303fc 100644 --- a/apps/mcp/src/widget/design/tokens.css +++ b/apps/mcp/src/widget/design/tokens.css @@ -247,11 +247,9 @@ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: - 0 4px 6px -1px rgba(0, 0, 0, 0.4), - 0 2px 4px -2px rgba(0, 0, 0, 0.3); + 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: - 0 10px 15px -3px rgba(0, 0, 0, 0.5), - 0 4px 6px -4px rgba(0, 0, 0, 0.4); + 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --graph-bg: #0f1419; --graph-doc-fill: #1b1f24; From f7d2bb7301002a75b6765af00fc9913a104a5de0 Mon Sep 17 00:00:00 2001 From: ishaanxgupta Date: Wed, 1 Jul 2026 20:26:57 +0530 Subject: [PATCH 03/25] style(mcp): align widget UI with Nova theme --- apps/mcp/src/widget/App.tsx | 51 +++++++- apps/mcp/src/widget/design/globals.css | 127 ++++++++++++++++++- apps/mcp/src/widget/design/tokens.css | 100 +++++++++++++++ apps/mcp/src/widget/design/ui/Button.tsx | 13 +- apps/mcp/src/widget/design/ui/Card.tsx | 8 +- apps/mcp/src/widget/design/ui/FileUpload.tsx | 6 +- apps/mcp/src/widget/design/ui/Input.tsx | 6 +- apps/mcp/src/widget/design/ui/Popover.tsx | 6 +- apps/mcp/src/widget/design/ui/TextArea.tsx | 6 +- apps/mcp/src/widget/index.html | 2 +- apps/mcp/src/widget/studio.html | 2 +- apps/mcp/src/widget/views/Confirmation.tsx | 2 +- apps/mcp/src/widget/views/Error.tsx | 2 +- apps/mcp/src/widget/views/Graph.tsx | 9 +- apps/mcp/src/widget/views/Picker.tsx | 2 +- apps/mcp/src/widget/views/Success.tsx | 2 +- 16 files changed, 308 insertions(+), 36 deletions(-) diff --git a/apps/mcp/src/widget/App.tsx b/apps/mcp/src/widget/App.tsx index 52d16d691..e5ec81926 100644 --- a/apps/mcp/src/widget/App.tsx +++ b/apps/mcp/src/widget/App.tsx @@ -1,4 +1,4 @@ -import { useEffect } from "react" +import { type ReactNode, useEffect } from "react" import type { ViewMessage } from "../shared/types" import { useApplyHostTheme } from "./hooks/useApplyHostTheme" import { useLog } from "./hooks/useLog" @@ -25,15 +25,56 @@ export function App() { } }, [state, log]) - if (state.kind === "loading") return - if (state.kind === "error") return + if (state.kind === "loading") { + return ( + + + + ) + } + if (state.kind === "error") { + return ( + + + + ) + } if (state.kind === "raw") { return ( - + + + ) } - return renderView(state.message, setView, setError) + return {renderView(state.message, setView, setError)} +} + +function WidgetShell({ children }: { children: ReactNode }) { + return ( +
+
+
+ + + + + + + + supermemory + MCP + +
+
{children}
+
+ ) } function renderView( diff --git a/apps/mcp/src/widget/design/globals.css b/apps/mcp/src/widget/design/globals.css index f159f5e5b..d7c12cfc5 100644 --- a/apps/mcp/src/widget/design/globals.css +++ b/apps/mcp/src/widget/design/globals.css @@ -85,9 +85,17 @@ } body { - background: var(--bg-primary); + background: + radial-gradient( + ellipse at 50% 112%, + rgba(75, 160, 250, 0.34) 0%, + rgba(20, 16, 255, 0.22) 28%, + rgba(11, 17, 25, 0) 62% + ), + linear-gradient(180deg, #0b1119 0%, #070b11 100%); color: var(--text-primary); font-family: var(--font-sans); + letter-spacing: -0.01em; line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -107,14 +115,114 @@ position: relative; } +.mcp-widget-shell { + position: relative; + isolation: isolate; + min-height: 280px; + overflow: hidden; + background: + linear-gradient(rgba(75, 160, 250, 0.035) 1px, transparent 1px), + linear-gradient(90deg, rgba(75, 160, 250, 0.035) 1px, transparent 1px), + radial-gradient( + circle at 50% 108%, + rgba(75, 160, 250, 0.22), + transparent 42% + ), + linear-gradient(180deg, #0b1119 0%, #070b11 100%); + background-size: + 36px 36px, + 36px 36px, + 100% 100%, + 100% 100%; + color: var(--text-primary); +} + +.mcp-widget-glow { + position: absolute; + right: -18%; + bottom: -42%; + left: -18%; + z-index: -1; + height: 70%; + pointer-events: none; + background: radial-gradient( + ellipse at 50% 48%, + rgba(255, 255, 255, 0.34) 0%, + rgba(71, 168, 253, 0.42) 11%, + rgba(0, 153, 255, 0.32) 28%, + rgba(20, 16, 255, 0.28) 48%, + transparent 74% + ); + filter: blur(18px); + opacity: 0.9; +} + +.mcp-widget-brand { + display: inline-flex; + align-items: center; + gap: var(--space-2); + margin: var(--space-4) var(--page-header-px) 0; + padding: 7px 10px 7px 8px; + border: 1px solid var(--border); + border-radius: var(--radius-lg); + background: rgba(13, 18, 26, 0.78); + backdrop-filter: blur(18px); + box-shadow: var(--shadow-sm); +} + +.mcp-widget-brand-mark { + display: grid; + width: 26px; + height: 26px; + place-items: center; + color: var(--accent); + border-radius: var(--radius-md); + background: #080b0f; + box-shadow: + inset 1.5px 1.5px 4.5px rgba(0, 0, 0, 0.7), + inset 0 1px 1px rgba(255, 255, 255, 0.03); +} + +.mcp-widget-brand-mark svg { + width: 17px; + height: 14px; +} + +.mcp-widget-brand-copy { + display: flex; + min-width: 0; + flex-direction: column; + gap: 1px; +} + +.mcp-widget-brand-name { + color: var(--text-primary); + font-size: 12px; + font-weight: 700; + line-height: 1; +} + +.mcp-widget-brand-mode { + color: var(--text-muted); + font-size: 10px; + font-weight: 500; + line-height: 1.15; +} + +.mcp-widget-content { + position: relative; + z-index: 1; +} + /* Spinner — kept as global because primitives can't easily express a CSS animation */ .spinner { width: 24px; height: 24px; - border: 2px solid var(--border); + border: 2px solid rgba(255, 255, 255, 0.12); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; + box-shadow: 0 0 20px rgba(75, 160, 250, 0.42); } @keyframes spin { @@ -141,7 +249,20 @@ * reads as a re-layout). The floor keeps the size continuous. */ min-height: 280px; position: relative; - background: var(--bg-primary); + background: + linear-gradient(rgba(75, 160, 250, 0.035) 1px, transparent 1px), + linear-gradient(90deg, rgba(75, 160, 250, 0.035) 1px, transparent 1px), + radial-gradient( + circle at 50% 108%, + rgba(75, 160, 250, 0.22), + transparent 42% + ), + var(--bg-primary); + background-size: + 36px 36px, + 36px 36px, + 100% 100%, + 100% 100%; } .graph-view.fullscreen { diff --git a/apps/mcp/src/widget/design/tokens.css b/apps/mcp/src/widget/design/tokens.css index 815f303fc..611fb75f3 100644 --- a/apps/mcp/src/widget/design/tokens.css +++ b/apps/mcp/src/widget/design/tokens.css @@ -275,3 +275,103 @@ --graph-control-border: #1a2333; } } + +/* Nova widget theme + * + * PR-1120's widget screens run inside agent cells, so the light/dark host + * theme can vary independently from the Supermemory product theme. Force the + * MCP app surfaces onto Nova's dark product palette so all widget tools match + * apps/web: DM Sans, dark cards, soft borders, and the #4ba0fa accent. + */ +:root, +[data-theme="light"], +[data-theme="dark"] { + color-scheme: dark; + + --accent-start: #369bfd; + --accent-mid: #4ba0fa; + --accent-end: #36fdfd; + --accent-gradient: linear-gradient( + 94deg, + var(--accent-start), + var(--accent-end) + ); + + --accent: #4ba0fa; + --accent-foreground: #ffffff; + --accent-hover: #369bfd; + --accent-muted: rgba(75, 160, 250, 0.12); + + --bg-primary: #0b1119; + --bg-secondary: #101822; + --bg-muted: #131b28; + --bg-elevated: #1b1f24; + --bg-overlay: rgba(13, 18, 26, 0.78); + + --border: rgba(255, 255, 255, 0.12); + --border-muted: rgba(255, 255, 255, 0.07); + --border-accent: rgba(34, 97, 202, 0.45); + + --text-primary: #fafafa; + --text-secondary: #d0dae7; + --text-muted: #a0aec4; + --text-inverse: #0b1119; + + --success: #4ade80; + --success-muted: rgba(74, 222, 128, 0.14); + --error: #fb7185; + --error-muted: rgba(251, 113, 133, 0.14); + --warning: #fbbf24; + --warning-muted: rgba(251, 191, 36, 0.14); + --info: #60a5fa; + --info-muted: rgba(96, 165, 250, 0.14); + --danger: #ef4444; + + --font-sans: + "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; + --font-display: + "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; + --font-brand: + "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; + + --radius-sm: 4px; + --radius-md: 6px; + --radius-lg: 8px; + + --shadow-sm: + 0 2px 10px rgba(0, 0, 0, 0.18), + inset 0 1px 1px rgba(255, 255, 255, 0.06); + --shadow-md: + 0 10px 30px rgba(0, 0, 0, 0.28), + inset 0 1px 1px rgba(255, 255, 255, 0.08); + --shadow-lg: + 0 20px 60px rgba(0, 0, 0, 0.42), + inset 0 1px 1px rgba(255, 255, 255, 0.08); + + --graph-bg: #0b1119; + --graph-doc-fill: #1b1f24; + --graph-doc-stroke: rgba(255, 255, 255, 0.12); + --graph-doc-inner: #0d121a; + --graph-mem-fill: #0d2034; + --graph-mem-fill-hover: #112840; + --graph-mem-stroke: #4ba0fa; + --graph-accent: #4ba0fa; + --graph-text-primary: #fafafa; + --graph-text-secondary: #d0dae7; + --graph-text-muted: #a0aec4; + --graph-edge-derives: #fbbf24; + --graph-edge-updates: #4ba0fa; + --graph-edge-extends: #36fdfd; + --graph-mem-border-forgotten: #ef4444; + --graph-mem-border-expiring: #f59e0b; + --graph-mem-border-recent: #10b981; + --graph-glow: #4ba0fa; + --graph-icon: #4ba0fa; + --graph-popover-bg: rgba(27, 31, 36, 0.94); + --graph-popover-border: rgba(255, 255, 255, 0.12); + --graph-popover-text-primary: #fafafa; + --graph-popover-text-secondary: #d0dae7; + --graph-popover-text-muted: #a0aec4; + --graph-control-bg: rgba(13, 18, 26, 0.78); + --graph-control-border: rgba(255, 255, 255, 0.12); +} diff --git a/apps/mcp/src/widget/design/ui/Button.tsx b/apps/mcp/src/widget/design/ui/Button.tsx index c641215c8..07819d68a 100644 --- a/apps/mcp/src/widget/design/ui/Button.tsx +++ b/apps/mcp/src/widget/design/ui/Button.tsx @@ -9,9 +9,9 @@ import { cn } from "../lib/cn" const buttonVariants = cva( [ "inline-flex items-center justify-center gap-2", - "uppercase tracking-[0.075em]", + "font-semibold", "rounded-[var(--radius-md)]", - "transition-colors cursor-pointer", + "transition-all cursor-pointer", "disabled:pointer-events-none disabled:opacity-50", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]/20 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-primary)]", "[&_svg:not([class*='size-'])]:size-4 shrink-0", @@ -21,12 +21,13 @@ const buttonVariants = cva( variant: { primary: [ "bg-[var(--accent)] text-[var(--accent-foreground)]", - "hover:bg-[var(--accent)]/90", + "shadow-[0_10px_28px_rgba(75,160,250,0.24)]", + "hover:bg-[var(--accent-hover)] hover:shadow-[0_12px_32px_rgba(75,160,250,0.32)]", ].join(" "), secondary: [ - "bg-transparent text-[var(--text-primary)]", + "bg-[var(--bg-overlay)] text-[var(--text-primary)]", "border border-[var(--border)]", - "hover:bg-[var(--bg-muted)]", + "hover:bg-[var(--bg-muted)] hover:border-[var(--border-accent)]", ].join(" "), ghost: [ "text-[var(--text-primary)]", @@ -38,7 +39,7 @@ const buttonVariants = cva( ].join(" "), }, size: { - sm: "h-[var(--height-sm)] px-[var(--space-4)] text-[length:var(--text-xs)]", + sm: "h-[var(--height-md)] px-[var(--space-4)] text-[length:var(--text-sm)]", icon: "size-[var(--height-sm)] p-0", }, }, diff --git a/apps/mcp/src/widget/design/ui/Card.tsx b/apps/mcp/src/widget/design/ui/Card.tsx index 06a15a663..f1159f9c6 100644 --- a/apps/mcp/src/widget/design/ui/Card.tsx +++ b/apps/mcp/src/widget/design/ui/Card.tsx @@ -7,14 +7,18 @@ import { import { cn } from "../lib/cn" const cardStyles = cva( - "text-left bg-bg-elevated border border-border rounded-lg p-4 transition-colors duration-150", + [ + "text-left bg-bg-elevated/90 border border-border rounded-lg p-4", + "shadow-md backdrop-blur transition-colors duration-150", + ].join(" "), { variants: { variant: { default: "", interactive: "cursor-pointer hover:bg-bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/20 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary", - active: "cursor-pointer border-accent bg-accent-muted", + active: + "cursor-pointer border-border-accent bg-accent-muted shadow-[0_0_30px_rgba(75,160,250,0.16)]", }, }, defaultVariants: { variant: "default" }, diff --git a/apps/mcp/src/widget/design/ui/FileUpload.tsx b/apps/mcp/src/widget/design/ui/FileUpload.tsx index 753eda681..33e87d51e 100644 --- a/apps/mcp/src/widget/design/ui/FileUpload.tsx +++ b/apps/mcp/src/widget/design/ui/FileUpload.tsx @@ -58,10 +58,10 @@ export function FileUpload({ "flex min-h-[180px] flex-col items-center justify-center gap-(--space-3)", "py-(--space-12) px-(--space-6)", "border-2 border-dashed rounded-(--radius-lg)", - "cursor-pointer transition-colors", + "bg-[var(--bg-overlay)] cursor-pointer shadow-md backdrop-blur transition-colors", dragOver - ? "border-accent bg-accent-muted/30" - : "border-border hover:bg-bg-muted/40", + ? "border-accent bg-accent-muted" + : "border-border hover:bg-bg-muted/80", disabled && "pointer-events-none opacity-50", className, )} diff --git a/apps/mcp/src/widget/design/ui/Input.tsx b/apps/mcp/src/widget/design/ui/Input.tsx index 3687419a4..17c00facf 100644 --- a/apps/mcp/src/widget/design/ui/Input.tsx +++ b/apps/mcp/src/widget/design/ui/Input.tsx @@ -7,13 +7,13 @@ import { cn } from "../lib/cn" const inputVariants = cva( [ "flex w-full", - "bg-transparent text-[var(--text-primary)]", + "bg-[var(--bg-overlay)] text-[var(--text-primary)]", "border border-[var(--border)]", "rounded-[var(--radius-lg)]", "placeholder:text-[var(--text-muted)]", "transition-colors", - "hover:bg-[var(--text-muted)]/10", - "focus-visible:outline-none focus-visible:shadow-[0_0_0_1px_var(--border)]", + "hover:bg-[var(--bg-muted)]", + "focus-visible:outline-none focus-visible:border-[var(--border-accent)] focus-visible:shadow-[0_0_0_1px_var(--border-accent)]", "disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-[var(--error)] aria-invalid:ring-[var(--error)]", "file:border-0 file:bg-transparent file:text-[length:var(--text-sm)] file:font-medium", diff --git a/apps/mcp/src/widget/design/ui/Popover.tsx b/apps/mcp/src/widget/design/ui/Popover.tsx index 5ec0ec600..53d33d83e 100644 --- a/apps/mcp/src/widget/design/ui/Popover.tsx +++ b/apps/mcp/src/widget/design/ui/Popover.tsx @@ -16,9 +16,9 @@ const PopoverContent = forwardRef< align={align} className={cn( "z-50 w-72 p-(--space-4)", - "bg-bg-elevated border border-border", - "rounded-(--radius-md)", - "shadow-md", + "bg-bg-elevated/95 border border-border", + "rounded-(--radius-lg)", + "shadow-lg backdrop-blur", "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className, diff --git a/apps/mcp/src/widget/design/ui/TextArea.tsx b/apps/mcp/src/widget/design/ui/TextArea.tsx index 5cdddc2e3..b3e356d70 100644 --- a/apps/mcp/src/widget/design/ui/TextArea.tsx +++ b/apps/mcp/src/widget/design/ui/TextArea.tsx @@ -6,15 +6,15 @@ import { cn } from "../lib/cn" // controls min-height via className. const textAreaClass = [ "flex w-full", - "bg-transparent text-[var(--text-primary)]", + "bg-[var(--bg-overlay)] text-[var(--text-primary)]", "border border-[var(--border)]", "rounded-[var(--radius-lg)]", "px-[var(--space-3)] py-[var(--space-2)]", "text-[length:var(--text-sm)] leading-normal font-sans", "placeholder:text-[var(--text-muted)]", "transition-colors resize-y", - "hover:bg-[var(--text-muted)]/10", - "focus-visible:outline-none focus-visible:shadow-[0_0_0_1px_var(--border)]", + "hover:bg-[var(--bg-muted)]", + "focus-visible:outline-none focus-visible:border-[var(--border-accent)] focus-visible:shadow-[0_0_0_1px_var(--border-accent)]", "disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-[var(--error)] aria-invalid:ring-[var(--error)]", ].join(" ") diff --git a/apps/mcp/src/widget/index.html b/apps/mcp/src/widget/index.html index 6266b3b99..760bda1cc 100644 --- a/apps/mcp/src/widget/index.html +++ b/apps/mcp/src/widget/index.html @@ -6,7 +6,7 @@ Supermemory MCP - +
diff --git a/apps/mcp/src/widget/studio.html b/apps/mcp/src/widget/studio.html index 159c8ff78..4120f24b4 100644 --- a/apps/mcp/src/widget/studio.html +++ b/apps/mcp/src/widget/studio.html @@ -6,7 +6,7 @@ Supermemory MCP · Studio - +
diff --git a/apps/mcp/src/widget/views/Confirmation.tsx b/apps/mcp/src/widget/views/Confirmation.tsx index 354fceba1..919d34df1 100644 --- a/apps/mcp/src/widget/views/Confirmation.tsx +++ b/apps/mcp/src/widget/views/Confirmation.tsx @@ -9,7 +9,7 @@ export function Confirmation({ containerTag }: Props) { return ( diff --git a/apps/mcp/src/widget/views/Error.tsx b/apps/mcp/src/widget/views/Error.tsx index 9f2cc82ef..b77637e4d 100644 --- a/apps/mcp/src/widget/views/Error.tsx +++ b/apps/mcp/src/widget/views/Error.tsx @@ -9,7 +9,7 @@ export function ErrorView({ message }: Props) { return ( diff --git a/apps/mcp/src/widget/views/Graph.tsx b/apps/mcp/src/widget/views/Graph.tsx index 21ab8537a..c48122af6 100644 --- a/apps/mcp/src/widget/views/Graph.tsx +++ b/apps/mcp/src/widget/views/Graph.tsx @@ -185,8 +185,13 @@ export function Graph({ documents, totalCount }: Props) { }, [mode, toggleFullscreen]) return ( -
-
+
+
{/* No remount on toggle. The CSS just resizes the container; the package's ResizeObserver re-lays-out and its node cache keeps positions stable, so expand/minimize is instant with no reload. diff --git a/apps/mcp/src/widget/views/Picker.tsx b/apps/mcp/src/widget/views/Picker.tsx index 45c696058..30c9cf975 100644 --- a/apps/mcp/src/widget/views/Picker.tsx +++ b/apps/mcp/src/widget/views/Picker.tsx @@ -82,7 +82,7 @@ export function Picker({ {/* Bounded, scrollable list — keeps a stable height so filtering or a long workspace list doesn't resize (jump) the whole widget. */} -
+
{filtered.length === 0 ? (

No workspaces match “{query}”. diff --git a/apps/mcp/src/widget/views/Success.tsx b/apps/mcp/src/widget/views/Success.tsx index 9ab17683c..8db23a6ce 100644 --- a/apps/mcp/src/widget/views/Success.tsx +++ b/apps/mcp/src/widget/views/Success.tsx @@ -21,7 +21,7 @@ export function Success(props: Props) { return ( From 0d7e231f2dae5e49cb138e8e16fcbe0af1df9f11 Mon Sep 17 00:00:00 2001 From: ishaanxgupta Date: Wed, 1 Jul 2026 20:41:24 +0530 Subject: [PATCH 04/25] style(mcp): solidify widget form surfaces --- apps/mcp/src/widget/design/tokens.css | 3 + apps/mcp/src/widget/design/ui/Button.tsx | 6 +- apps/mcp/src/widget/design/ui/Card.tsx | 4 +- apps/mcp/src/widget/design/ui/FileUpload.tsx | 4 +- apps/mcp/src/widget/design/ui/Input.tsx | 10 +- apps/mcp/src/widget/design/ui/Popover.tsx | 4 +- apps/mcp/src/widget/design/ui/TextArea.tsx | 11 +-- apps/mcp/src/widget/views/Save.tsx | 62 +++++++------ apps/mcp/src/widget/views/Upload.tsx | 98 ++++++++++---------- 9 files changed, 104 insertions(+), 98 deletions(-) diff --git a/apps/mcp/src/widget/design/tokens.css b/apps/mcp/src/widget/design/tokens.css index 611fb75f3..fbb5a0a88 100644 --- a/apps/mcp/src/widget/design/tokens.css +++ b/apps/mcp/src/widget/design/tokens.css @@ -307,9 +307,12 @@ --bg-muted: #131b28; --bg-elevated: #1b1f24; --bg-overlay: rgba(13, 18, 26, 0.78); + --bg-control: #0d121a; + --bg-control-hover: #111923; --border: rgba(255, 255, 255, 0.12); --border-muted: rgba(255, 255, 255, 0.07); + --border-control: rgba(255, 255, 255, 0.14); --border-accent: rgba(34, 97, 202, 0.45); --text-primary: #fafafa; diff --git a/apps/mcp/src/widget/design/ui/Button.tsx b/apps/mcp/src/widget/design/ui/Button.tsx index 07819d68a..d68dbedfe 100644 --- a/apps/mcp/src/widget/design/ui/Button.tsx +++ b/apps/mcp/src/widget/design/ui/Button.tsx @@ -25,9 +25,9 @@ const buttonVariants = cva( "hover:bg-[var(--accent-hover)] hover:shadow-[0_12px_32px_rgba(75,160,250,0.32)]", ].join(" "), secondary: [ - "bg-[var(--bg-overlay)] text-[var(--text-primary)]", - "border border-[var(--border)]", - "hover:bg-[var(--bg-muted)] hover:border-[var(--border-accent)]", + "bg-[var(--bg-control)] text-[var(--text-primary)]", + "border border-[var(--border-control)]", + "hover:bg-[var(--bg-control-hover)] hover:border-[var(--border-accent)]", ].join(" "), ghost: [ "text-[var(--text-primary)]", diff --git a/apps/mcp/src/widget/design/ui/Card.tsx b/apps/mcp/src/widget/design/ui/Card.tsx index f1159f9c6..2e0dee283 100644 --- a/apps/mcp/src/widget/design/ui/Card.tsx +++ b/apps/mcp/src/widget/design/ui/Card.tsx @@ -8,8 +8,8 @@ import { cn } from "../lib/cn" const cardStyles = cva( [ - "text-left bg-bg-elevated/90 border border-border rounded-lg p-4", - "shadow-md backdrop-blur transition-colors duration-150", + "text-left bg-bg-elevated border border-border rounded-lg p-4", + "shadow-md transition-colors duration-150", ].join(" "), { variants: { diff --git a/apps/mcp/src/widget/design/ui/FileUpload.tsx b/apps/mcp/src/widget/design/ui/FileUpload.tsx index 33e87d51e..5ad521a5f 100644 --- a/apps/mcp/src/widget/design/ui/FileUpload.tsx +++ b/apps/mcp/src/widget/design/ui/FileUpload.tsx @@ -58,10 +58,10 @@ export function FileUpload({ "flex min-h-[180px] flex-col items-center justify-center gap-(--space-3)", "py-(--space-12) px-(--space-6)", "border-2 border-dashed rounded-(--radius-lg)", - "bg-[var(--bg-overlay)] cursor-pointer shadow-md backdrop-blur transition-colors", + "bg-[var(--bg-control)] cursor-pointer shadow-md transition-colors", dragOver ? "border-accent bg-accent-muted" - : "border-border hover:bg-bg-muted/80", + : "border-[var(--border-control)] hover:bg-[var(--bg-control-hover)]", disabled && "pointer-events-none opacity-50", className, )} diff --git a/apps/mcp/src/widget/design/ui/Input.tsx b/apps/mcp/src/widget/design/ui/Input.tsx index 17c00facf..53adcea40 100644 --- a/apps/mcp/src/widget/design/ui/Input.tsx +++ b/apps/mcp/src/widget/design/ui/Input.tsx @@ -2,17 +2,17 @@ import { cva, type VariantProps } from "class-variance-authority" import { forwardRef, type InputHTMLAttributes } from "react" import { cn } from "../lib/cn" -// Mirrors console-v2's Input: transparent surface, soft hover tint, -// focus shadow, aria-invalid styling. Sizes sm/md/lg match component heights. +// Mirrors console-v2's Input with a solid widget surface so the Nova grid stays +// behind the form instead of bleeding through controls. const inputVariants = cva( [ "flex w-full", - "bg-[var(--bg-overlay)] text-[var(--text-primary)]", - "border border-[var(--border)]", + "bg-[var(--bg-control)] text-[var(--text-primary)]", + "border border-[var(--border-control)]", "rounded-[var(--radius-lg)]", "placeholder:text-[var(--text-muted)]", "transition-colors", - "hover:bg-[var(--bg-muted)]", + "hover:bg-[var(--bg-control-hover)]", "focus-visible:outline-none focus-visible:border-[var(--border-accent)] focus-visible:shadow-[0_0_0_1px_var(--border-accent)]", "disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-[var(--error)] aria-invalid:ring-[var(--error)]", diff --git a/apps/mcp/src/widget/design/ui/Popover.tsx b/apps/mcp/src/widget/design/ui/Popover.tsx index 53d33d83e..d0ae3394c 100644 --- a/apps/mcp/src/widget/design/ui/Popover.tsx +++ b/apps/mcp/src/widget/design/ui/Popover.tsx @@ -16,9 +16,9 @@ const PopoverContent = forwardRef< align={align} className={cn( "z-50 w-72 p-(--space-4)", - "bg-bg-elevated/95 border border-border", + "bg-bg-elevated border border-border", "rounded-(--radius-lg)", - "shadow-lg backdrop-blur", + "shadow-lg", "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className, diff --git a/apps/mcp/src/widget/design/ui/TextArea.tsx b/apps/mcp/src/widget/design/ui/TextArea.tsx index b3e356d70..d2205e0ac 100644 --- a/apps/mcp/src/widget/design/ui/TextArea.tsx +++ b/apps/mcp/src/widget/design/ui/TextArea.tsx @@ -1,19 +1,18 @@ import { forwardRef, type TextareaHTMLAttributes } from "react" import { cn } from "../lib/cn" -// Multi-line counterpart to Input. Same surface treatment (transparent, -// soft hover, focus shadow, aria-invalid). No height variants — caller -// controls min-height via className. +// Multi-line counterpart to Input. Solid surface keeps host/product background +// treatments from showing through text entry areas. const textAreaClass = [ "flex w-full", - "bg-[var(--bg-overlay)] text-[var(--text-primary)]", - "border border-[var(--border)]", + "bg-[var(--bg-control)] text-[var(--text-primary)]", + "border border-[var(--border-control)]", "rounded-[var(--radius-lg)]", "px-[var(--space-3)] py-[var(--space-2)]", "text-[length:var(--text-sm)] leading-normal font-sans", "placeholder:text-[var(--text-muted)]", "transition-colors resize-y", - "hover:bg-[var(--bg-muted)]", + "hover:bg-[var(--bg-control-hover)]", "focus-visible:outline-none focus-visible:border-[var(--border-accent)] focus-visible:shadow-[0_0_0_1px_var(--border-accent)]", "disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-[var(--error)] aria-invalid:ring-[var(--error)]", diff --git a/apps/mcp/src/widget/views/Save.tsx b/apps/mcp/src/widget/views/Save.tsx index 0dbd9b162..ce4bdf2c0 100644 --- a/apps/mcp/src/widget/views/Save.tsx +++ b/apps/mcp/src/widget/views/Save.tsx @@ -73,39 +73,41 @@ export function Save({ title="Add Memory" />

- - -