dashboard: render SVG file previews

SVG files in the side-panel file preview showed only raw source.
Add a rendered/source tabbed view: 'rendered' (default) shows the
image, 'source' shows the markup.

The image loads via an <img> data: URI — <img>-loaded SVG runs in
the browser's secure static mode (scripts + external fetches
disabled), so an untrusted SVG from an agent's state dir can't
execute code in the dashboard origin. Tabs reuse the existing
diff-base-tab styling; a checkerboard backs the image so
transparent regions read clearly.

closes #188
This commit is contained in:
iris 2026-05-21 20:29:41 +02:00 committed by Mara
parent fc3490086b
commit a8ab91ecd8
3 changed files with 57 additions and 5 deletions

View file

@ -327,6 +327,18 @@ code {
border-color: var(--purple);
background: rgba(203, 166, 247, 0.08);
}
/* SVG file preview (issue #188) */
.svg-host { margin-top: 0.5em; }
.svg-render {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
border: 1px solid var(--border);
border-radius: 4px;
/* checkerboard so transparent regions of the SVG read clearly */
background: repeating-conic-gradient(#313244 0% 25%, #1e1e2e 0% 50%) 50% / 18px 18px;
}
.approval-tabs {
display: flex;
gap: 0.4em;