From d7e299102214da5dabfc550850e28a86baa730ea Mon Sep 17 00:00:00 2001
From: Ishaan Gupta <ishaankone@gmail.com>
Date: Thu, 2 Jul 2026 20:03:06 +0530
Subject: [PATCH] Match MCP workspace cards to web style

---
 apps/mcp/src/widget/components/PermissionBadge.tsx | 12 +++++-------
 apps/mcp/src/widget/components/WorkspaceCard.tsx   | 11 ++++++-----
 apps/mcp/src/widget/design/ui/Card.tsx             |  2 +-
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/apps/mcp/src/widget/components/PermissionBadge.tsx b/apps/mcp/src/widget/components/PermissionBadge.tsx
index ba8fc1ab..3179d1b6 100644
--- a/apps/mcp/src/widget/components/PermissionBadge.tsx
+++ b/apps/mcp/src/widget/components/PermissionBadge.tsx
@@ -1,5 +1,3 @@
-import { Badge } from "../design/ui"
-
 interface Props {
 	permission: string
 }
@@ -7,11 +5,11 @@ interface Props {
 export function PermissionBadge({ permission }: Props) {
 	const isWrite = permission === "write"
 	return (
-		<Badge
-			className="mt-2 self-start uppercase"
-			variant={isWrite ? "accent" : "neutral"}
+		<span
+			className="ml-auto mt-2 inline-flex h-8 min-w-[92px] items-center justify-center rounded-full border border-[#0D121A] bg-[#080B0F] px-4 text-[12px] font-semibold text-text-primary shadow-[0_6px_18px_rgba(0,0,0,0.28)] transition-colors group-hover:bg-[#0D121A]"
+			style={{ fontFamily: "var(--font-brand)" }}
 		>
-			{isWrite ? "read/write" : "read only"}
-		</Badge>
+			{isWrite ? "Read/write" : "Read only"}
+		</span>
 	)
 }
diff --git a/apps/mcp/src/widget/components/WorkspaceCard.tsx b/apps/mcp/src/widget/components/WorkspaceCard.tsx
index f198b325..1d464b0b 100644
--- a/apps/mcp/src/widget/components/WorkspaceCard.tsx
+++ b/apps/mcp/src/widget/components/WorkspaceCard.tsx
@@ -20,25 +20,25 @@ export function WorkspaceCard({
 	return (
 		<Card
 			as="button"
-			className="min-h-[108px] w-full p-3"
+			className="min-h-[132px] w-full p-4"
 			onClick={() => onClick(containerTag.containerTag)}
 			variant={active ? "active" : "interactive"}
 		>
-			<Stack className="h-full" gap="sm">
+			<Stack className="h-full" gap="xs">
 				<Stack align="center" direction="row" gap="sm" justify="between">
 					<span
-						className="min-w-0 truncate text-(length:--text-sm) font-medium text-text-primary"
+						className="min-w-0 truncate text-sm font-medium text-white"
 						style={{ fontFamily: "var(--font-brand)" }}
 					>
 						{name}
 					</span>
 					{active ? <Check className="size-4 shrink-0 text-accent" /> : null}
 				</Stack>
-				<div className="truncate font-mono text-[13px] text-text-muted">
+				<div className="truncate text-xs leading-relaxed text-[#8B8B8B]">
 					{containerTag.containerTag}
 				</div>
 				{(containerTag.documentCount > 0 || containerTag.memoryCount > 0) && (
-					<div className="mt-auto flex items-center gap-(--space-2) text-(length:--text-xs) text-text-muted">
+					<div className="mt-1 flex items-center gap-(--space-2) text-xs leading-relaxed text-[#8B8B8B]">
 						<span>
 							{containerTag.documentCount} doc
 							{containerTag.documentCount === 1 ? "" : "s"}
@@ -50,6 +50,7 @@ export function WorkspaceCard({
 						</span>
 					</div>
 				)}
+				<div className="flex-1" />
 				{access ? <PermissionBadge permission={access.permission} /> : null}
 			</Stack>
 		</Card>
diff --git a/apps/mcp/src/widget/design/ui/Card.tsx b/apps/mcp/src/widget/design/ui/Card.tsx
index 823ef7e8..6c52dd9f 100644
--- a/apps/mcp/src/widget/design/ui/Card.tsx
+++ b/apps/mcp/src/widget/design/ui/Card.tsx
@@ -19,7 +19,7 @@ const cardStyles = cva(
 				interactive:
 					"cursor-pointer hover:border-[#3A4455] hover:bg-bg-control-hover 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-[#2261CA]/70 bg-[#00173C] shadow-[0_0_28px_rgba(75,160,250,0.18)]",
+					"cursor-pointer border-[#263348] bg-bg-elevated hover:border-[#3A4455] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/20 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
 			},
 		},
 		defaultVariants: { variant: "default" },