#34303 webviews: align artifact surfaces with design tokens

Leo's words (2026-11-03): "there's just tons of design systems related stuff for spacing guttters icons etc whatever like we don't yet feel "designed" yet nawmean" and "i generally also have disliked how we have like no sense of system at ALL for ANYTHING like we're not even looking at some shadcn type stuff".

Aligns the artifact side panel and render card chrome with the shared NEXT grid: tokenized tabs, row heights, half-step spacing, card body insets and action gaps. Existing preview isolation and inline/side-panel behavior stay unchanged.

References: apps/codex/web/artifact-viewer.webp, apps/claude/live/transcript-markdown-rendering.png.
Gallery before/after variants: agent-pane.artifact-panel, agent-pane.inline-preview, agent-pane.render-card.

Validation: bun scripts/check-ui-review.ts --shrink-allowlist; bun scripts/check-design-tokens.ts --update-baseline; git diff --check.

agent-identity footer --repo manaflow-ai/cmux

---

^{Open in [code]smith · Need help on this PR? Tag @codesmith-bot with what you need.}

---

Summary by cubic

Aligns the artifact side panel and render card chrome with the shared design tokens, swapping hard-coded pixel spacing for --grid-* and --ds-* references. Updates the design token baseline to match. Preview isolation and inline/side-panel behavior are unchanged.