Fix MCP widgets according to consumer app

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,71 @@ export function App() {
 		}
 	}, [state, log])
 
-	if (state.kind === "loading") return <Loading />
-	if (state.kind === "error") return <ErrorView message={state.message} />
+	if (state.kind === "loading") {
+		return (
+			<WidgetShell>
+				<Loading />
+			</WidgetShell>
+		)
+	}
+	if (state.kind === "error") {
+		return (
+			<WidgetShell>
+				<ErrorView message={state.message} />
+			</WidgetShell>
+		)
+	}
 	if (state.kind === "raw") {
 		return (
-			<ErrorView message="Received unrecognized response from server. Try again." />
+			<WidgetShell>
+				<ErrorView message="Received unrecognized response from server. Try again." />
+			</WidgetShell>
 		)
 	}
 
-	return renderView(state.message, setView, setError)
+	const isGraphView = state.message.view === "graph"
+	return (
+		<WidgetShell immersive={isGraphView}>
+			{renderView(state.message, setView, setError)}
+		</WidgetShell>
+	)
+}
+
+export function WidgetShell({
+	children,
+	immersive = false,
+}: {
+	children: ReactNode
+	immersive?: boolean
+}) {
+	const shellClassName = immersive
+		? "mcp-widget-shell mcp-widget-shell-graph"
+		: "mcp-widget-shell"
+
+	return (
+		<div className={shellClassName}>
+			<div aria-hidden className="mcp-widget-glow" />
+			<header className="mcp-widget-brand">
+				<span aria-hidden className="mcp-widget-brand-mark">
+					<svg aria-hidden="true" viewBox="0 0 314 256">
+						<path
+							d="M313.728 100.982H197.297V0H159.68V109.567C159.68 121.205 164.284 132.381 172.466 140.615L267.535 236.283L294.134 209.517L223.917 138.858H313.75V101.004L313.728 100.982Z"
+							fill="currentColor"
+						/>
+						<path
+							d="M19.616 46.5043L89.8323 117.163H0V155.017H116.431V255.999H154.048V146.432C154.048 134.795 149.444 123.618 141.262 115.384L46.2144 19.7383L19.616 46.5043Z"
+							fill="currentColor"
+						/>
+					</svg>
+				</span>
+				<span className="mcp-widget-brand-copy">
+					<span className="mcp-widget-brand-name">supermemory</span>
+					<span className="mcp-widget-brand-mode">MCP</span>
+				</span>
+			</header>
+			<main className="mcp-widget-content">{children}</main>
+		</div>
+	)
 }
 
 function renderView(

apps/mcp/src/widget/components/PermissionBadge.tsx

@@ -1,17 +1,15 @@
-import { Badge } from "../design/ui"
-
 interface Props {
 	permission: string
 }
 
 export function PermissionBadge({ permission }: Props) {
 	const isWrite = permission === "write"
 	return (
-		<Badge
-			className="mt-2 self-start uppercase"
-			variant={isWrite ? "accent" : "neutral"}
+		<span
+			className="text-text-muted"
+			style={{ fontFamily: "var(--font-brand)" }}
 		>
-			{isWrite ? "read/write" : "read only"}
-		</Badge>
+			{isWrite ? "Read/write" : "Read only"}
+		</span>
 	)
 }

apps/mcp/src/widget/components/WorkspaceCard.tsx

@@ -1,6 +1,7 @@
 import type { ContainerTag, ContainerTagAccess } from "../../shared/types"
-import { Card, Stack } from "../design/ui"
-import { Check, Package } from "../lib/icons"
+import { Card } from "../design/ui"
+import { Check } from "../lib/icons"
+import { formatTagLabel } from "../lib/formatTag"
 import { PermissionBadge } from "./PermissionBadge"
 
 interface Props {
@@ -16,51 +17,52 @@ export function WorkspaceCard({
 	access,
 	onClick,
 }: Props) {
-	const name = containerTag.name || containerTag.containerTag
+	const name = containerTag.name || formatTagLabel(containerTag.containerTag)
 	return (
 		<Card
 			as="button"
-			className="w-full"
+			className="workspace-card w-full p-3"
 			onClick={() => onClick(containerTag.containerTag)}
 			variant={active ? "active" : "interactive"}
 		>
-			<Stack gap="sm">
-				<Stack align="center" direction="row" gap="sm" justify="between">
-					<span className="flex min-w-0 items-center gap-(--space-2)">
-						{containerTag.emoji ? (
-							<span aria-hidden className="text-base leading-none">
-								{containerTag.emoji}
-							</span>
-						) : (
-							<Package className="size-4 shrink-0 text-text-secondary" />
-						)}
+			<div className="workspace-card-inner">
+				<div className="workspace-card-main">
+					<div className="workspace-card-heading">
 						<span
-							className="truncate text-(length:--text-sm) font-semibold text-text-primary"
+							className="workspace-card-title truncate text-sm font-medium text-text-primary"
 							style={{ fontFamily: "var(--font-brand)" }}
 						>
 							{name}
 						</span>
-					</span>
-					{active ? <Check className="size-4 shrink-0 text-accent" /> : null}
-				</Stack>
-				<div className="truncate font-mono text-(length:--text-xs) text-text-muted">
-					{containerTag.containerTag}
+						{active ? (
+							<Check
+								aria-hidden
+								className="workspace-card-check size-3 shrink-0 text-accent"
+							/>
+						) : null}
+					</div>
+					{(containerTag.documentCount > 0 || containerTag.memoryCount > 0) && (
+						<div className="workspace-card-meta flex items-center gap-(--space-2) text-[11px] leading-normal text-text-muted">
+							<span>
+								{containerTag.documentCount} doc
+								{containerTag.documentCount === 1 ? "" : "s"}
+							</span>
+							<span aria-hidden className="opacity-40">
+								·
+							</span>
+							<span>
+								{containerTag.memoryCount}{" "}
+								{containerTag.memoryCount === 1 ? "memory" : "memories"}
+							</span>
+						</div>
+					)}
 				</div>
-				{(containerTag.documentCount > 0 || containerTag.memoryCount > 0) && (
-					<div className="flex items-center gap-(--space-3) text-(length:--text-xs) text-text-muted">
-						<span>
-							{containerTag.documentCount} doc
-							{containerTag.documentCount === 1 ? "" : "s"}
-						</span>
-						<span aria-hidden>·</span>
-						<span>
-							{containerTag.memoryCount} mem
-							{containerTag.memoryCount === 1 ? "" : "s"}
-						</span>
+				{access ? (
+					<div className="workspace-card-trailing">
+						<PermissionBadge permission={access.permission} />
 					</div>
-				)}
-				{access ? <PermissionBadge permission={access.permission} /> : null}
-			</Stack>
+				) : null}
+			</div>
 		</Card>
 	)
 }