style(frontend): look&feel v2 refinements — 70% gate modal, structured cards, mono labels

- ArtifactGateWidget: gate modal 90%→70% of viewport, larger heading, more padding.
- ArtifactView StructuredValue: depth-aware hierarchy (top-level hairline dividers,
  warm bg-muted card surfaces + shadow for object-array items).
- index.css: .thot-label micro-labels switched to the mono register (SF Mono) with
  tightened tracking, distinguishing labels/meta from sans body prose.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-06 23:29:49 +02:00
committed by Marco Pancotti
co-authored by Claude Opus 4.8
parent 9fe1c9321b
commit e9b2934ef7
3 changed files with 35 additions and 17 deletions
+6 -4
View File
@@ -7,7 +7,7 @@ import { ReservedControls } from "./ReservedControls";
import { LinkageHost } from "./LinkageHost";
/**
* Artifact review gate rendered as a full-screen (90%) modal: the artifact fills
* Artifact review gate rendered as a centered (70%) modal: the artifact fills
* the top (scrollable) area via ArtifactView; the action bar (options + reserved
* controls) sits at the bottom. The gate contract forbids silent dismissal, so the
* dialog has no close button and is not closeable by Esc/backdrop — the only way
@@ -30,11 +30,13 @@ export function ArtifactGateWidget({ descriptor, onRespond, sessionId }: WidgetP
<Dialog open>
<DialogContent
showCloseButton={false}
className="grid h-[90vh] w-[90vw] max-w-[90vw] grid-rows-[auto_1fr_auto] gap-3 sm:max-w-[90vw]"
className="grid h-[70vh] w-[70vw] max-w-[70vw] grid-rows-[auto_1fr_auto] gap-3.5 sm:max-w-[70vw]"
>
<DialogTitle>{descriptor.title ?? "Artifact review"}</DialogTitle>
<DialogTitle className="text-lg leading-snug">
{descriptor.title ?? "Artifact review"}
</DialogTitle>
<div className="min-h-0 overflow-auto rounded-xl border border-border/70 bg-background p-3">
<div className="min-h-0 overflow-auto rounded-xl border border-border/70 bg-background p-5">
{descriptor.artifact ? (
<GateArtifactBody artifact={descriptor.artifact} sessionId={sessionId} />
) : (