Skip to content

Commit 123828c

Browse files
offendingcommitoffendingcommit
committed
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.
1 parent 8f9d806 commit 123828c

11 files changed

Lines changed: 45 additions & 35 deletions

File tree

‎packages/web/src/components/chat/ChatPage.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export function ChatPage() {
8080
params={{ workspaceId, peerId } as never}
8181
className="hover:underline font-mono"
8282
>
83-
{peerId}
83+
{mask(peerId)}
8484
</Link>
8585
<span>/</span>
8686
<span>Chat</span>
@@ -92,7 +92,8 @@ export function ChatPage() {
9292
</SectionHeading>
9393
</div>
9494
<p className="text-xs mt-0.5" style={{ color: "var(--text-3)" }}>
95-
Honcho responds using accumulated context for <span className="font-mono">{peerId}</span>
95+
Honcho responds using accumulated context for{" "}
96+
<span className="font-mono">{mask(peerId)}</span>
9697
</p>
9798
</div>
9899

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export function ConclusionBrowser() {
115115
style={{ color: "var(--text-3)" }}
116116
>
117117
<ArrowLeft className="w-3 h-3" strokeWidth={1.5} />
118-
{workspaceId}
118+
{mask(workspaceId)}
119119
</Link>
120120
<div className="flex items-center gap-2 mb-1">
121121
<Lightbulb className="w-5 h-5" style={{ color: "var(--accent)" }} strokeWidth={1.5} />

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

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import type { components } from "@/api/schema.d.ts";
77
import { ErrorAlert } from "@/components/shared/ErrorAlert";
88
import { PageLoader } from "@/components/shared/LoadingSpinner";
99
import { Body, Muted, PageTitle, SectionHeading } from "@/components/ui/typography";
10+
import { useDemo } from "@/hooks/useDemo";
1011
import { COLOR } from "@/lib/constants";
1112
import { formatCount } from "@/lib/utils";
1213

@@ -15,6 +16,7 @@ type QueueStatus = components["schemas"]["QueueStatus"];
1516
// ─── Per-workspace queue row ─────────────────────────────────────────────────
1617

1718
function WorkspaceQueueRow({ workspaceId }: { workspaceId: string }) {
19+
const { mask } = useDemo();
1820
const { data, isLoading } = useQueueStatus(workspaceId);
1921

2022
const pending = data?.pending_work_units ?? 0;
@@ -40,7 +42,7 @@ function WorkspaceQueueRow({ workspaceId }: { workspaceId: string }) {
4042
className="font-mono text-xs truncate max-w-[200px] group-hover:underline"
4143
style={{ color: "var(--accent-text)" }}
4244
>
43-
{workspaceId}
45+
{mask(workspaceId)}
4446
</span>
4547
<ChevronRight
4648
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 }) {
7981

8082
{(
8183
[
82-
{ val: total, color: "var(--text-2)" },
83-
{ val: done, color: COLOR.success },
84-
{ val: active, color: COLOR.warning },
85-
{ val: pending, color: "var(--text-3)" },
86-
] as Array<{ val: number; color: string }>
87-
).map(({ val, color }, i) => (
84+
{ key: "total", val: total, color: "var(--text-2)" },
85+
{ key: "done", val: done, color: COLOR.success },
86+
{ key: "active", val: active, color: COLOR.warning },
87+
{ key: "pending", val: pending, color: "var(--text-3)" },
88+
] satisfies Array<{ key: string; val: number; color: string }>
89+
).map(({ key, val, color }) => (
8890
<td
89-
// biome-ignore lint/suspicious/noArrayIndexKey: static positional columns
90-
key={i}
91+
key={key}
9192
className="py-2 px-4 text-right font-mono text-xs"
9293
style={{ color: isLoading ? "var(--text-4)" : color }}
9394
>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export function Sidebar() {
2525
const matchRoute = useMatchRoute();
2626
const config = loadConfig();
2727
const { theme, toggle } = useTheme();
28-
const { demo, toggle: toggleDemo } = useDemo();
28+
const { demo, toggle: toggleDemo, mask } = useDemo();
2929

3030
return (
3131
<motion.aside
@@ -62,9 +62,9 @@ export function Sidebar() {
6262
<p
6363
className="text-xs mt-2 truncate font-mono hidden sm:block"
6464
style={{ color: "var(--text-4)" }}
65-
title={config.baseUrl}
65+
title={mask(config.baseUrl)}
6666
>
67-
{config.baseUrl.replace(/^https?:\/\//, "")}
67+
{mask(config.baseUrl.replace(/^https?:\/\//, ""))}
6868
</p>
6969
)}
7070
</div>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export function PeerDetail() {
8888
params={{ workspaceId } as never}
8989
className="hover:underline font-mono"
9090
>
91-
{workspaceId}
91+
{mask(workspaceId)}
9292
</Link>
9393
<span>/</span>
9494
<Link
@@ -104,7 +104,7 @@ export function PeerDetail() {
104104
<div>
105105
<div className="flex items-center gap-2 mb-1">
106106
<User className="w-5 h-5" style={{ color: "var(--accent)" }} strokeWidth={1.5} />
107-
<PageTitle className="font-mono break-all">{peerId}</PageTitle>
107+
<PageTitle className="font-mono break-all">{mask(peerId)}</PageTitle>
108108
{observeMe !== undefined && (
109109
<span
110110
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() {
304304
<Users className="w-3.5 h-3.5" strokeWidth={2} />
305305
{repTarget ? (
306306
<>
307-
<MonoCaption as="span">{peerId}</MonoCaption>
307+
<MonoCaption as="span">{mask(peerId)}</MonoCaption>
308308
<span className="opacity-50">→</span>
309-
<MonoCaption as="span">{repTarget}</MonoCaption>
309+
<MonoCaption as="span">{mask(repTarget)}</MonoCaption>
310310
</>
311311
) : (
312312
"Memory Representation"

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export function PeerList() {
112112
style={{ color: COLOR.dimText }}
113113
>
114114
<ArrowLeft className="w-3 h-3" strokeWidth={1.5} />
115-
{workspaceId}
115+
{mask(workspaceId)}
116116
</Link>
117117
<div className="flex items-center gap-2 mb-1">
118118
<Users className="w-5 h-5" style={{ color: COLOR.accent }} strokeWidth={1.5} />
@@ -139,7 +139,7 @@ export function PeerList() {
139139
</div>
140140
</div>
141141
<MonoCaption className="mt-0.5" as="p">
142-
{workspaceId}
142+
{mask(workspaceId)}
143143
</MonoCaption>
144144
</motion.div>
145145

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ export function SessionDetail() {
116116
params={{ workspaceId } as never}
117117
className="hover:underline font-mono"
118118
>
119-
{workspaceId}
119+
{mask(workspaceId)}
120120
</Link>
121121
<span>/</span>
122122
<Link
@@ -135,7 +135,7 @@ export function SessionDetail() {
135135
style={{ color: "var(--accent)" }}
136136
strokeWidth={1.5}
137137
/>
138-
<PageTitle className="font-mono break-all">{sessionId}</PageTitle>
138+
<PageTitle className="font-mono break-all">{mask(sessionId)}</PageTitle>
139139
</div>
140140
<div className="flex items-center gap-2 flex-shrink-0">
141141
<Button
@@ -323,7 +323,7 @@ export function SessionDetail() {
323323
<ConfirmDialog
324324
open={confirmDelete}
325325
title="Delete session"
326-
description={`Permanently delete session "${sessionId}"? This cannot be undone.`}
326+
description={`Permanently delete session "${mask(sessionId)}"? This cannot be undone.`}
327327
confirmLabel="Delete session"
328328
onConfirm={handleDelete}
329329
onCancel={() => setConfirmDelete(false)}

‎packages/web/src/components/sessions/SessionList.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { PageLoader } from "@/components/shared/LoadingSpinner";
1010
import { Pagination } from "@/components/shared/Pagination";
1111
import { SortControl, type SortDir } from "@/components/shared/SortControl";
1212
import { MonoCaption, PageTitle } from "@/components/ui/typography";
13+
import { useDemo } from "@/hooks/useDemo";
1314
import { COLOR } from "@/lib/constants";
1415

1516
type Session = components["schemas"]["Session"];
@@ -30,6 +31,7 @@ const item: Variants = {
3031
};
3132

3233
export function SessionList() {
34+
const { mask } = useDemo();
3335
const { workspaceId } = useParams({ strict: false }) as { workspaceId: string };
3436
const [page, setPage] = useState(1);
3537
const [sortField, setSortField] = useState("created_at");
@@ -71,7 +73,7 @@ export function SessionList() {
7173
style={{ color: COLOR.dimText }}
7274
>
7375
<ArrowLeft className="w-3 h-3" strokeWidth={1.5} />
74-
{workspaceId}
76+
{mask(workspaceId)}
7577
</Link>
7678
<div className="flex items-center gap-2 mb-1">
7779
<MessageSquare className="w-5 h-5" style={{ color: COLOR.accent }} strokeWidth={1.5} />
@@ -98,7 +100,7 @@ export function SessionList() {
98100
</div>
99101
</div>
100102
<MonoCaption className="mt-0.5" as="p">
101-
{workspaceId}
103+
{mask(workspaceId)}
102104
</MonoCaption>
103105
</motion.div>
104106

@@ -142,7 +144,7 @@ export function SessionList() {
142144
className="font-mono text-sm font-medium truncate"
143145
style={{ color: COLOR.accentSoft }}
144146
>
145-
{session.id}
147+
{mask(session.id)}
146148
</span>
147149
<div className="flex items-center gap-2 shrink-0 ml-2">
148150
{session.is_active && (
@@ -189,7 +191,7 @@ export function SessionList() {
189191
color: COLOR.dimText,
190192
}}
191193
>
192-
{(session.metadata as Record<string, string>).source}
194+
{mask((session.metadata as Record<string, string>).source)}
193195
</span>
194196
)}
195197
</div>

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { PageLoader } from "@/components/shared/LoadingSpinner";
1111
import { Button } from "@/components/ui/button";
1212
import { Input } from "@/components/ui/input";
1313
import { Body, Muted, PageTitle, SectionHeading } from "@/components/ui/typography";
14+
import { useDemo } from "@/hooks/useDemo";
1415
import { COLOR } from "@/lib/constants";
1516

1617
const urlSchema = z.string().url({ message: "Must be a valid URL" });
@@ -20,6 +21,7 @@ interface Props {
2021
}
2122

2223
export function WebhookManager({ workspaceId }: Props) {
24+
const { mask } = useDemo();
2325
const { data: webhooks, isLoading, error } = useWebhooks(workspaceId);
2426
const createWebhook = useCreateWebhook(workspaceId);
2527
const deleteWebhook = useDeleteWebhook(workspaceId);
@@ -60,7 +62,7 @@ export function WebhookManager({ workspaceId }: Props) {
6062
style={{ color: "var(--text-3)" }}
6163
>
6264
<ArrowLeft className="w-3 h-3" strokeWidth={1.5} />
63-
{workspaceId}
65+
{mask(workspaceId)}
6466
</Link>
6567
<div className="flex items-center justify-between mb-1">
6668
<div className="flex items-center gap-2">
@@ -163,7 +165,7 @@ export function WebhookManager({ workspaceId }: Props) {
163165
className="text-xs font-mono truncate"
164166
style={{ color: "var(--accent-text)" }}
165167
>
166-
{(wh as { url: string }).url}
168+
{mask((wh as { url: string }).url)}
167169
</span>
168170
<button
169171
type="button"
@@ -181,7 +183,7 @@ export function WebhookManager({ workspaceId }: Props) {
181183
</button>
182184
</div>
183185
<span className="text-xs font-mono" style={{ color: "var(--text-4)" }}>
184-
{(wh as { id: string }).id}
186+
{mask((wh as { id: string }).id)}
185187
</span>
186188
</div>
187189
<Button

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { PageLoader } from "@/components/shared/LoadingSpinner";
2121
import { Button } from "@/components/ui/button";
2222
import { Body, Caption, PageTitle, SectionHeading } from "@/components/ui/typography";
2323
import { ScheduleDreamModal } from "@/components/workspaces/ScheduleDreamModal";
24+
import { useDemo } from "@/hooks/useDemo";
2425
import { COLOR } from "@/lib/constants";
2526

2627
const NAV_SECTIONS = [
@@ -51,6 +52,7 @@ const NAV_SECTIONS = [
5152
] as const;
5253

5354
export function WorkspaceDetail() {
55+
const { mask } = useDemo();
5456
const { workspaceId } = useParams({ strict: false }) as { workspaceId: string };
5557
const navigate = useNavigate();
5658

@@ -87,7 +89,7 @@ export function WorkspaceDetail() {
8789
style={{ color: "var(--accent)" }}
8890
strokeWidth={1.5}
8991
/>
90-
<PageTitle className="font-mono break-all">{workspaceId}</PageTitle>
92+
<PageTitle className="font-mono break-all">{mask(workspaceId)}</PageTitle>
9193
</div>
9294
<div className="flex items-center gap-2 flex-shrink-0">
9395
<Button variant="accent" size="sm" onClick={() => setDreamOpen(true)}>
@@ -267,7 +269,7 @@ export function WorkspaceDetail() {
267269
className="font-mono truncate block max-w-[180px] hover:underline"
268270
style={{ color: "var(--accent-text)" }}
269271
>
270-
{sid}
272+
{mask(sid)}
271273
</Link>
272274
</td>
273275
<td
@@ -324,7 +326,7 @@ export function WorkspaceDetail() {
324326
<ConfirmDialog
325327
open={confirmDelete}
326328
title="Delete workspace"
327-
description={`This will permanently delete workspace "${workspaceId}" and all its data. This cannot be undone.`}
329+
description={`This will permanently delete workspace "${mask(workspaceId)}" and all its data. This cannot be undone.`}
328330
confirmLabel="Delete workspace"
329331
onConfirm={handleDelete}
330332
onCancel={() => setConfirmDelete(false)}

0 commit comments

Comments
 (0)