diff --git a/apps/mcp/src/widget/components/WorkspaceCard.tsx b/apps/mcp/src/widget/components/WorkspaceCard.tsx
index 6e6ebbb7..8af1697a 100644
--- a/apps/mcp/src/widget/components/WorkspaceCard.tsx
+++ b/apps/mcp/src/widget/components/WorkspaceCard.tsx
@@ -41,8 +41,7 @@ export function WorkspaceCard({
/>
) : null}
- {(containerTag.documentCount > 0 ||
- containerTag.memoryCount > 0) && (
+ {(containerTag.documentCount > 0 || containerTag.memoryCount > 0) && (
{containerTag.documentCount} doc
diff --git a/apps/mcp/src/widget/design/globals.css b/apps/mcp/src/widget/design/globals.css
index dfc24bde..fff43ab5 100644
--- a/apps/mcp/src/widget/design/globals.css
+++ b/apps/mcp/src/widget/design/globals.css
@@ -174,7 +174,6 @@
opacity: 0.82;
}
-
/* Studio-only visual variants. Production widgets do not set this attribute. */
[data-widget-version="v1"] .mcp-widget-shell {
--brand-accent: var(--accent);
@@ -210,11 +209,23 @@
[data-widget-version="v2"] .mcp-widget-shell {
--brand-accent: var(--accent);
--brand-opacity: 1;
- --widget-shell-bg: color-mix(in srgb, var(--widget-shell-bg) 86%, var(--bg-muted));
+ --widget-shell-bg: color-mix(
+ in srgb,
+ var(--widget-shell-bg) 86%,
+ var(--bg-muted)
+ );
--card-bg: color-mix(in srgb, var(--card-bg) 88%, var(--bg-muted));
--panel-bg: color-mix(in srgb, var(--panel-bg) 88%, var(--bg-muted));
- --widget-glow-mid: color-mix(in srgb, var(--widget-glow-mid) 70%, transparent);
- --widget-glow-outer: color-mix(in srgb, var(--widget-glow-outer) 70%, transparent);
+ --widget-glow-mid: color-mix(
+ in srgb,
+ var(--widget-glow-mid) 70%,
+ transparent
+ );
+ --widget-glow-outer: color-mix(
+ in srgb,
+ var(--widget-glow-outer) 70%,
+ transparent
+ );
}
[data-widget-version="v2"] .mcp-widget-shell-graph::before {
@@ -226,14 +237,18 @@
}
[data-theme="light"] [data-widget-version="v2"] .mcp-widget-shell-graph::before,
-:root:not([data-theme="dark"]) [data-widget-version="v2"] .mcp-widget-shell-graph::before {
+:root:not([data-theme="dark"])
+ [data-widget-version="v2"]
+ .mcp-widget-shell-graph::before {
background-image:
linear-gradient(rgba(75, 160, 250, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(75, 160, 250, 0.045) 1px, transparent 1px);
}
[data-theme="light"] [data-widget-version="v2"] .mcp-widget-shell-graph::after,
-:root:not([data-theme="dark"]) [data-widget-version="v2"] .mcp-widget-shell-graph::after {
+:root:not([data-theme="dark"])
+ [data-widget-version="v2"]
+ .mcp-widget-shell-graph::after {
content: none;
}
@@ -246,7 +261,9 @@
}
[data-theme="light"] [data-widget-version="v2"] .mcp-soft-button:hover,
-:root:not([data-theme="dark"]) [data-widget-version="v2"] .mcp-soft-button:hover {
+:root:not([data-theme="dark"])
+ [data-widget-version="v2"]
+ .mcp-soft-button:hover {
background: var(--button-secondary-hover);
}
@@ -335,12 +352,12 @@
),
radial-gradient(
ellipse 60% 40% at 30% 90%,
- rgba(71, 168, 253, 0.10) 0%,
+ rgba(71, 168, 253, 0.1) 0%,
transparent 60%
),
radial-gradient(
ellipse 60% 40% at 70% 90%,
- rgba(75, 160, 250, 0.10) 0%,
+ rgba(75, 160, 250, 0.1) 0%,
transparent 60%
);
}
@@ -363,7 +380,7 @@
--widget-shell-bg: #faf9f7;
--card-bg: #ffffff;
--card-border: rgba(0, 0, 0, 0.06);
- --card-border-hover: rgba(0, 0, 0, 0.10);
+ --card-border-hover: rgba(0, 0, 0, 0.1);
--card-active-border: rgba(63, 126, 232, 0.32);
--card-active-bg: #fafcff;
--panel-bg: #ffffff;
@@ -380,7 +397,7 @@
--widget-shell-bg: #111518;
--card-bg: #181d22;
--card-border: rgba(255, 255, 255, 0.06);
- --card-border-hover: rgba(255, 255, 255, 0.10);
+ --card-border-hover: rgba(255, 255, 255, 0.1);
--card-active-border: rgba(106, 166, 248, 0.36);
--card-active-bg: #161c24;
--panel-bg: #181d22;
diff --git a/apps/mcp/src/widget/design/tokens.css b/apps/mcp/src/widget/design/tokens.css
index 8610ca00..1124010c 100644
--- a/apps/mcp/src/widget/design/tokens.css
+++ b/apps/mcp/src/widget/design/tokens.css
@@ -289,7 +289,11 @@
--accent-start: #4f8df7;
--accent-mid: #4f8df7;
--accent-end: #8ec8ff;
- --accent-gradient: linear-gradient(94deg, var(--accent-start), var(--accent-end));
+ --accent-gradient: linear-gradient(
+ 94deg,
+ var(--accent-start),
+ var(--accent-end)
+ );
--accent: #3f7ee8;
--accent-foreground: #ffffff;
--accent-hover: #2f6fd8;
@@ -337,7 +341,8 @@
--button-secondary-hover: #f1eee7;
--button-secondary-text: #111827;
--button-secondary-border: #dcd6ca;
- --button-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(15, 23, 42, 0.1);
+ --button-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(15, 23, 42, 0.1);
--text-primary: #111827;
--text-secondary: #4b5563;
@@ -354,9 +359,12 @@
--info-muted: rgba(37, 99, 235, 0.1);
--danger: #dc2626;
- --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;
+ --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;
@@ -400,7 +408,11 @@
--accent-start: #6aa6f8;
--accent-mid: #6aa6f8;
--accent-end: #8bd4ff;
- --accent-gradient: linear-gradient(94deg, var(--accent-start), var(--accent-end));
+ --accent-gradient: linear-gradient(
+ 94deg,
+ var(--accent-start),
+ var(--accent-end)
+ );
--accent: #6aa6f8;
--accent-foreground: #0f141a;
--accent-hover: #82b7ff;
@@ -438,7 +450,8 @@
--panel-bg: #1c222a;
--panel-border: #2b333d;
- --panel-shadow: 0 14px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.035);
+ --panel-shadow:
+ 0 14px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.035);
--button-primary-bg: #eef4ff;
--button-primary-hover: #ffffff;
@@ -448,7 +461,8 @@
--button-secondary-hover: #27303b;
--button-secondary-text: #eef2f7;
--button-secondary-border: #34404d;
- --button-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.22);
+ --button-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.22);
--text-primary: #f4f6f8;
--text-secondary: #c1c9d2;
@@ -465,9 +479,12 @@
--info-muted: rgba(139, 188, 255, 0.12);
--danger: #fb7185;
- --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;
+ --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;
diff --git a/apps/mcp/src/widget/lib/formatTag.ts b/apps/mcp/src/widget/lib/formatTag.ts
index c28023cb..5d7f97f0 100644
--- a/apps/mcp/src/widget/lib/formatTag.ts
+++ b/apps/mcp/src/widget/lib/formatTag.ts
@@ -6,9 +6,7 @@
* "my_custom_workspace" → "My Custom Workspace"
*/
export function formatTagLabel(raw: string): string {
- let slug = raw
- .replace(/^sm_project_/i, "")
- .replace(/^sm_/i, "")
+ const slug = raw.replace(/^sm_project_/i, "").replace(/^sm_/i, "")
return slug
.split("_")
diff --git a/apps/mcp/src/widget/studio/Studio.tsx b/apps/mcp/src/widget/studio/Studio.tsx
index 7530d9d7..2500a38f 100644
--- a/apps/mcp/src/widget/studio/Studio.tsx
+++ b/apps/mcp/src/widget/studio/Studio.tsx
@@ -365,7 +365,10 @@ export function Studio() {
description="The same widget shell Cursor renders, with mock MCP tool data."
title="Cursor widgets"
>
-