feat(demo): extend mask() to all breadcrumbs, page titles, and identifiers

Covers workspace IDs, session IDs, peer IDs in breadcrumbs and titles,
server base URL in sidebar, webhook URLs/IDs, and session metadata source
tags across all 11 components.

packages/web/src/components/workspaces/WebhookManager.tsx

@@ -11,6 +11,7 @@ import { PageLoader } from "@/components/shared/LoadingSpinner";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Body, Muted, PageTitle, SectionHeading } from "@/components/ui/typography";
+import { useDemo } from "@/hooks/useDemo";
 import { COLOR } from "@/lib/constants";
 
 const urlSchema = z.string().url({ message: "Must be a valid URL" });
@@ -20,6 +21,7 @@ interface Props {
 }
 
 export function WebhookManager({ workspaceId }: Props) {
+	const { mask } = useDemo();
 	const { data: webhooks, isLoading, error } = useWebhooks(workspaceId);
 	const createWebhook = useCreateWebhook(workspaceId);
 	const deleteWebhook = useDeleteWebhook(workspaceId);
@@ -60,7 +62,7 @@ export function WebhookManager({ workspaceId }: Props) {
 					style={{ color: "var(--text-3)" }}
 				>
 					<ArrowLeft className="w-3 h-3" strokeWidth={1.5} />
-					{workspaceId}
+					{mask(workspaceId)}
 				</Link>
 				<div className="flex items-center justify-between mb-1">
 					<div className="flex items-center gap-2">
@@ -163,7 +165,7 @@ export function WebhookManager({ workspaceId }: Props) {
 													className="text-xs font-mono truncate"
 													style={{ color: "var(--accent-text)" }}
 												>
-													{(wh as { url: string }).url}
+													{mask((wh as { url: string }).url)}
 												</span>
 												<button
 													type="button"
@@ -181,7 +183,7 @@ export function WebhookManager({ workspaceId }: Props) {
 												</button>
 											</div>
 											<span className="text-xs font-mono" style={{ color: "var(--text-4)" }}>
-												{(wh as { id: string }).id}
+												{mask((wh as { id: string }).id)}
 											</span>
 										</div>
 										<Button

packages/web/src/components/workspaces/WorkspaceDetail.tsx

@@ -21,6 +21,7 @@ import { PageLoader } from "@/components/shared/LoadingSpinner";
 import { Button } from "@/components/ui/button";
 import { Body, Caption, PageTitle, SectionHeading } from "@/components/ui/typography";
 import { ScheduleDreamModal } from "@/components/workspaces/ScheduleDreamModal";
+import { useDemo } from "@/hooks/useDemo";
 import { COLOR } from "@/lib/constants";
 
 const NAV_SECTIONS = [
@@ -51,6 +52,7 @@ const NAV_SECTIONS = [
 ] as const;
 
 export function WorkspaceDetail() {
+	const { mask } = useDemo();
 	const { workspaceId } = useParams({ strict: false }) as { workspaceId: string };
 	const navigate = useNavigate();
 
@@ -87,7 +89,7 @@ export function WorkspaceDetail() {
 							style={{ color: "var(--accent)" }}
 							strokeWidth={1.5}
 						/>
-						<PageTitle className="font-mono break-all">{workspaceId}</PageTitle>
+						<PageTitle className="font-mono break-all">{mask(workspaceId)}</PageTitle>
 					</div>
 					<div className="flex items-center gap-2 flex-shrink-0">
 						<Button variant="accent" size="sm" onClick={() => setDreamOpen(true)}>
@@ -267,7 +269,7 @@ export function WorkspaceDetail() {
 																				className="font-mono truncate block max-w-[180px] hover:underline"
 																				style={{ color: "var(--accent-text)" }}
 																			>
-																				{sid}
+																				{mask(sid)}
 																			</Link>
 																		</td>
 																		<td
@@ -324,7 +326,7 @@ export function WorkspaceDetail() {
 			<ConfirmDialog
 				open={confirmDelete}
 				title="Delete workspace"
-				description={`This will permanently delete workspace "${workspaceId}" and all its data. This cannot be undone.`}
+				description={`This will permanently delete workspace "${mask(workspaceId)}" and all its data. This cannot be undone.`}
 				confirmLabel="Delete workspace"
 				onConfirm={handleDelete}
 				onCancel={() => setConfirmDelete(false)}

packages/web/src/components/workspaces/WorkspaceList.tsx

@@ -10,6 +10,7 @@ import { PageLoader } from "@/components/shared/LoadingSpinner";
 import { Pagination } from "@/components/shared/Pagination";
 import { SortControl, type SortDir } from "@/components/shared/SortControl";
 import { MonoCaption, Muted, PageTitle } from "@/components/ui/typography";
+import { useDemo } from "@/hooks/useDemo";
 import { COLOR } from "@/lib/constants";
 
 type Workspace = components["schemas"]["Workspace"];
@@ -29,6 +30,7 @@ const item: Variants = {
 };
 
 export function WorkspaceList() {
+	const { mask } = useDemo();
 	const [page, setPage] = useState(1);
 	const [sortField, setSortField] = useState("created_at");
 	const [sortDir, setSortDir] = useState<SortDir>("desc");
@@ -131,7 +133,7 @@ export function WorkspaceList() {
 										className="font-mono text-sm font-medium"
 										style={{ color: COLOR.accentSoft }}
 									>
-										{ws.id}
+										{mask(ws.id)}
 									</span>
 									<ChevronRight
 										className="w-4 h-4 opacity-30 group-hover:opacity-70 transition-opacity"