Skip to content

fix(dashboard): contain command drawer text #157

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hasandemirkiran merged 1 commit into from
May 18, 2026
Merged

fix(dashboard): contain command drawer text #157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions internal/guard/web/assets/dist/assets/index-BRMO20IK.css
View file
Open in desktop

Large diffs are not rendered by default.

18 changes: 9 additions & 9 deletions .../web/assets/dist/assets/index-CMifAc1g.js → .../web/assets/dist/assets/index-BpP_w0XF.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion internal/guard/web/assets/dist/assets/index-DUTwVgWJ.css
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions internal/guard/web/assets/dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kontext Guard</title>
<script type="module" crossorigin src="/assets/index-CMifAc1g.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DUTwVgWJ.css">
<script type="module" crossorigin src="/assets/index-BpP_w0XF.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BRMO20IK.css">
</head>
<body>
<div id="root"></div>
Expand Down
5 changes: 4 additions & 1 deletion web/guard-dashboard/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,10 @@ export default function App() {
</main>

<Sheet open={!!opened} onOpenChange={(open) => !open && setOpenId(null)}>
<SheetContent side="right" className="w-[540px] max-w-[92vw] p-0 sm:max-w-[540px]">
<SheetContent
side="right"
className="w-[540px] max-w-[92vw] overflow-x-hidden p-0 sm:max-w-[540px]"
>
{opened && <Inspector event={opened} />}
</SheetContent>
</Sheet>
Expand Down
42 changes: 19 additions & 23 deletions web/guard-dashboard/src/dashboard/Inspector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,26 +31,26 @@ export function Inspector({ event }: { event: Event }) {
const judgeLatency = formatDurationMs(r.judge_duration_ms);

return (
<div className="flex h-full flex-col bg-background">
<SheetHeader className="flex flex-row items-center gap-2 border-b bg-background px-6 py-3.5 pr-14 space-y-0">
<div className="flex h-full min-w-0 flex-col overflow-x-hidden bg-background">
<SheetHeader className="flex min-w-0 flex-row items-center gap-2 border-b bg-background px-6 py-3.5 pr-14 space-y-0">
<DecisionDot kind={event.decision} />
<SheetTitle className={cn("text-[13px] font-medium", tone.text)}>
<SheetTitle className={cn("shrink-0 text-[13px] font-medium", tone.text)}>
{decisionLabel(event.decision)}
</SheetTitle>
<span className="ml-2 font-mono text-[10.5px] uppercase tracking-[0.2em] text-muted-foreground">
<span className="ml-2 min-w-0 break-words font-mono text-[10.5px] uppercase tracking-[0.2em] text-muted-foreground [overflow-wrap:anywhere]">
{prettyTool(event.tool_name)}
</span>
</SheetHeader>

<ScrollArea className="flex-1">
<div className="space-y-7 px-7 py-7">
<div className="space-y-3">
<pre className="whitespace-pre-wrap break-words font-mono text-[15px] font-medium leading-snug tracking-tight text-foreground">
<ScrollArea className="min-w-0 flex-1 overflow-x-hidden">
<div className="min-w-0 max-w-full space-y-7 overflow-x-hidden px-7 py-7">
<div className="min-w-0 space-y-3">
<pre className="max-w-full whitespace-pre-wrap break-words font-mono text-[15px] font-medium leading-snug tracking-tight text-foreground [overflow-wrap:anywhere]">
{summaryOf(event)}
</pre>
</div>

<dl className="grid grid-cols-[120px_1fr] gap-y-3 text-[13px]">
<dl className="grid min-w-0 grid-cols-[120px_minmax(0,1fr)] gap-y-3 text-[13px]">
<Dt>Operation</Dt>
<Dd>{r.operation || r.operation_class || "unknown"}</Dd>
<Dt>Source</Dt>
Expand Down Expand Up @@ -118,17 +118,19 @@ export function Inspector({ event }: { event: Event }) {
</dl>

<Section title="Reason">
<p className="text-[13px] leading-relaxed text-foreground/80">{humanReason(event)}</p>
<p className="max-w-full break-words text-[13px] leading-relaxed text-foreground/80 [overflow-wrap:anywhere]">
{humanReason(event)}
</p>
</Section>

<Section title="Analysis">
<p className="text-[13px] leading-relaxed text-foreground/80">
<p className="max-w-full break-words text-[13px] leading-relaxed text-foreground/80 [overflow-wrap:anywhere]">
{technicalExplanation(event)}
</p>
</Section>

<Section title="Command">
<pre className="overflow-x-auto rounded-md border bg-muted/40 px-3 py-2.5 font-mono text-[12px] leading-relaxed text-foreground/90">
<pre className="max-w-full whitespace-pre-wrap break-words rounded-md border bg-muted/40 px-3 py-2.5 font-mono text-[12px] leading-relaxed text-foreground/90 [overflow-wrap:anywhere]">
{actionSummary(event)}
</pre>
</Section>
Expand All @@ -137,13 +139,7 @@ export function Inspector({ event }: { event: Event }) {
<Section title="Signals">
<div className="flex flex-wrap gap-1.5">
{(r.signals ?? []).map((s) => (
<span
key={s}
className="inline-flex items-center gap-1.5 rounded-md border bg-card px-2 py-1 font-mono text-[11px] text-foreground/80 shadow-[inset_0_1px_0_rgba(255,255,255,0.7)]"
>
<span className={cn("h-1 w-1 rounded-full", tone.bg)} />
{humanize(s)}
</span>
<SignalChip key={s} signal={s} toneClass={tone.bg} />
))}
</div>
</Section>
Expand Down Expand Up @@ -172,9 +168,9 @@ export function Inspector({ event }: { event: Event }) {

function SignalChip({ signal, toneClass }: { signal: string; toneClass: string }) {
return (
<span className="inline-flex items-center gap-1.5 rounded-md border bg-card px-2 py-1 font-mono text-[11px] text-foreground/80 shadow-[inset_0_1px_0_rgba(255,255,255,0.7)]">
<span className={cn("h-1 w-1 rounded-full", toneClass)} />
{humanize(signal)}
<span className="inline-flex max-w-full min-w-0 items-start gap-1.5 rounded-md border bg-card px-2 py-1 font-mono text-[11px] text-foreground/80 shadow-[inset_0_1px_0_rgba(255,255,255,0.7)]">
<span className={cn("mt-[0.45em] h-1 w-1 shrink-0 rounded-full", toneClass)} />
<span className="min-w-0 break-words [overflow-wrap:anywhere]">{humanize(signal)}</span>
</span>
);
}
Expand All @@ -187,7 +183,7 @@ function formatDurationMs(value?: number): string {

function Section({ title, children }: { title: string; children: React.ReactNode }) {
return (
<div className="space-y-2.5">
<div className="min-w-0 max-w-full space-y-2.5 overflow-x-hidden">
<h3 className="font-mono text-[10px] font-medium uppercase tracking-[0.22em] text-muted-foreground">
{title}
</h3>
Expand Down
8 changes: 6 additions & 2 deletions web/guard-dashboard/src/dashboard/shared.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,16 @@ export function Kv({ k, v }: { k: string; v: string }) {

export function Dt({ children }: { children: React.ReactNode }) {
return (
<dt className="self-center text-[10.5px] font-medium uppercase tracking-wider text-muted-foreground">
<dt className="self-center break-words text-[10.5px] font-medium uppercase tracking-wider text-muted-foreground [overflow-wrap:anywhere]">
{children}
</dt>
);
}

export function Dd({ children, className }: { children: React.ReactNode; className?: string }) {
return <dd className={cn("text-foreground/90", className)}>{children}</dd>;
return (
<dd className={cn("min-w-0 break-words text-foreground/90 [overflow-wrap:anywhere]", className)}>
{children}
</dd>
);
}
Loading