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/chat/ChatPage.tsx

@@ -80,7 +80,7 @@ export function ChatPage() {
 						params={{ workspaceId, peerId } as never}
 						className="hover:underline font-mono"
 					>
-						{peerId}
+						{mask(peerId)}
 					</Link>
 					<span>/</span>
 					<span>Chat</span>
@@ -92,7 +92,8 @@ export function ChatPage() {
 					</SectionHeading>
 				</div>
 				<p className="text-xs mt-0.5" style={{ color: "var(--text-3)" }}>
-					Honcho responds using accumulated context for <span className="font-mono">{peerId}</span>
+					Honcho responds using accumulated context for{" "}
+					<span className="font-mono">{mask(peerId)}</span>
 				</p>
 			</div>
 

packages/web/src/components/conclusions/ConclusionBrowser.tsx

@@ -115,7 +115,7 @@ export function ConclusionBrowser() {
 					style={{ color: "var(--text-3)" }}
 				>
 					<ArrowLeft className="w-3 h-3" strokeWidth={1.5} />
-					{workspaceId}
+					{mask(workspaceId)}
 				</Link>
 				<div className="flex items-center gap-2 mb-1">
 					<Lightbulb className="w-5 h-5" style={{ color: "var(--accent)" }} strokeWidth={1.5} />

packages/web/src/components/dashboard/Dashboard.tsx

@@ -7,6 +7,7 @@ import type { components } from "@/api/schema.d.ts";
 import { ErrorAlert } from "@/components/shared/ErrorAlert";
 import { PageLoader } from "@/components/shared/LoadingSpinner";
 import { Body, Muted, PageTitle, SectionHeading } from "@/components/ui/typography";
+import { useDemo } from "@/hooks/useDemo";
 import { COLOR } from "@/lib/constants";
 import { formatCount } from "@/lib/utils";
 
@@ -15,6 +16,7 @@ type QueueStatus = components["schemas"]["QueueStatus"];
 // ─── Per-workspace queue row ─────────────────────────────────────────────────
 
 function WorkspaceQueueRow({ workspaceId }: { workspaceId: string }) {
+	const { mask } = useDemo();
 	const { data, isLoading } = useQueueStatus(workspaceId);
 
 	const pending = data?.pending_work_units ?? 0;
@@ -40,7 +42,7 @@ function WorkspaceQueueRow({ workspaceId }: { workspaceId: string }) {
 						className="font-mono text-xs truncate max-w-[200px] group-hover:underline"
 						style={{ color: "var(--accent-text)" }}
 					>
-						{workspaceId}
+						{mask(workspaceId)}
 					</span>
 					<ChevronRight
 						className="w-3 h-3 opacity-0 group-hover:opacity-60 transition-opacity flex-shrink-0"
@@ -79,15 +81,14 @@ function WorkspaceQueueRow({ workspaceId }: { workspaceId: string }) {
 
 			{(
 				[
-					{ val: total, color: "var(--text-2)" },
+					{ key: "total", val: total, color: "var(--text-2)" },
-					{ val: done, color: COLOR.success },
+					{ key: "done", val: done, color: COLOR.success },
-					{ val: active, color: COLOR.warning },
+					{ key: "active", val: active, color: COLOR.warning },
-					{ val: pending, color: "var(--text-3)" },
+					{ key: "pending", val: pending, color: "var(--text-3)" },
-				] as Array<{ val: number; color: string }>
+				] satisfies Array<{ key: string; val: number; color: string }>
-			).map(({ val, color }, i) => (
+			).map(({ key, val, color }) => (
 				<td
-					// biome-ignore lint/suspicious/noArrayIndexKey: static positional columns
+					key={key}
-					key={i}
 					className="py-2 px-4 text-right font-mono text-xs"
 					style={{ color: isLoading ? "var(--text-4)" : color }}
 				>

packages/web/src/components/layout/Sidebar.tsx

@@ -25,7 +25,7 @@ export function Sidebar() {
 	const matchRoute = useMatchRoute();
 	const config = loadConfig();
 	const { theme, toggle } = useTheme();
-	const { demo, toggle: toggleDemo } = useDemo();
+	const { demo, toggle: toggleDemo, mask } = useDemo();
 
 	return (
 		<motion.aside
@@ -62,9 +62,9 @@ export function Sidebar() {
 					<p
 						className="text-xs mt-2 truncate font-mono hidden sm:block"
 						style={{ color: "var(--text-4)" }}
-						title={config.baseUrl}
+						title={mask(config.baseUrl)}
 					>
-						{config.baseUrl.replace(/^https?:\/\//, "")}
+						{mask(config.baseUrl.replace(/^https?:\/\//, ""))}
 					</p>
 				)}
 			</div>

packages/web/src/components/peers/PeerDetail.tsx

@@ -88,7 +88,7 @@ export function PeerDetail() {
 						params={{ workspaceId } as never}
 						className="hover:underline font-mono"
 					>
-						{workspaceId}
+						{mask(workspaceId)}
 					</Link>
 					<span>/</span>
 					<Link
@@ -104,7 +104,7 @@ export function PeerDetail() {
 					<div>
 						<div className="flex items-center gap-2 mb-1">
 							<User className="w-5 h-5" style={{ color: "var(--accent)" }} strokeWidth={1.5} />
-							<PageTitle className="font-mono break-all">{peerId}</PageTitle>
+							<PageTitle className="font-mono break-all">{mask(peerId)}</PageTitle>
 							{observeMe !== undefined && (
 								<span
 									className="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full font-mono"
@@ -304,9 +304,9 @@ export function PeerDetail() {
 										<Users className="w-3.5 h-3.5" strokeWidth={2} />
 										{repTarget ? (
 											<>
-												<MonoCaption as="span">{peerId}</MonoCaption>
+												<MonoCaption as="span">{mask(peerId)}</MonoCaption>
 												<span className="opacity-50">→</span>
-												<MonoCaption as="span">{repTarget}</MonoCaption>
+												<MonoCaption as="span">{mask(repTarget)}</MonoCaption>
 											</>
 										) : (
 											"Memory Representation"

packages/web/src/components/peers/PeerList.tsx

@@ -112,7 +112,7 @@ export function PeerList() {
 					style={{ color: COLOR.dimText }}
 				>
 					<ArrowLeft className="w-3 h-3" strokeWidth={1.5} />
-					{workspaceId}
+					{mask(workspaceId)}
 				</Link>
 				<div className="flex items-center gap-2 mb-1">
 					<Users className="w-5 h-5" style={{ color: COLOR.accent }} strokeWidth={1.5} />
@@ -139,7 +139,7 @@ export function PeerList() {
 					</div>
 				</div>
 				<MonoCaption className="mt-0.5" as="p">
-					{workspaceId}
+					{mask(workspaceId)}
 				</MonoCaption>
 			</motion.div>
 

packages/web/src/components/sessions/SessionDetail.tsx

@@ -116,7 +116,7 @@ export function SessionDetail() {
 						params={{ workspaceId } as never}
 						className="hover:underline font-mono"
 					>
-						{workspaceId}
+						{mask(workspaceId)}
 					</Link>
 					<span>/</span>
 					<Link
@@ -135,7 +135,7 @@ export function SessionDetail() {
 							style={{ color: "var(--accent)" }}
 							strokeWidth={1.5}
 						/>
-						<PageTitle className="font-mono break-all">{sessionId}</PageTitle>
+						<PageTitle className="font-mono break-all">{mask(sessionId)}</PageTitle>
 					</div>
 					<div className="flex items-center gap-2 flex-shrink-0">
 						<Button
@@ -323,7 +323,7 @@ export function SessionDetail() {
 			<ConfirmDialog
 				open={confirmDelete}
 				title="Delete session"
-				description={`Permanently delete session "${sessionId}"? This cannot be undone.`}
+				description={`Permanently delete session "${mask(sessionId)}"? This cannot be undone.`}
 				confirmLabel="Delete session"
 				onConfirm={handleDelete}
 				onCancel={() => setConfirmDelete(false)}

packages/web/src/components/sessions/SessionList.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, PageTitle } from "@/components/ui/typography";
+import { useDemo } from "@/hooks/useDemo";
 import { COLOR } from "@/lib/constants";
 
 type Session = components["schemas"]["Session"];
@@ -30,6 +31,7 @@ const item: Variants = {
 };
 
 export function SessionList() {
+	const { mask } = useDemo();
 	const { workspaceId } = useParams({ strict: false }) as { workspaceId: string };
 	const [page, setPage] = useState(1);
 	const [sortField, setSortField] = useState("created_at");
@@ -71,7 +73,7 @@ export function SessionList() {
 					style={{ color: COLOR.dimText }}
 				>
 					<ArrowLeft className="w-3 h-3" strokeWidth={1.5} />
-					{workspaceId}
+					{mask(workspaceId)}
 				</Link>
 				<div className="flex items-center gap-2 mb-1">
 					<MessageSquare className="w-5 h-5" style={{ color: COLOR.accent }} strokeWidth={1.5} />
@@ -98,7 +100,7 @@ export function SessionList() {
 					</div>
 				</div>
 				<MonoCaption className="mt-0.5" as="p">
-					{workspaceId}
+					{mask(workspaceId)}
 				</MonoCaption>
 			</motion.div>
 
@@ -142,7 +144,7 @@ export function SessionList() {
 										className="font-mono text-sm font-medium truncate"
 										style={{ color: COLOR.accentSoft }}
 									>
-										{session.id}
+										{mask(session.id)}
 									</span>
 									<div className="flex items-center gap-2 shrink-0 ml-2">
 										{session.is_active && (
@@ -189,7 +191,7 @@ export function SessionList() {
 												color: COLOR.dimText,
 											}}
 										>
-											{(session.metadata as Record<string, string>).source}
+											{mask((session.metadata as Record<string, string>).source)}
 										</span>
 									)}
 								</div>

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"