osobh/clawmates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

artifacts tab: inline PDF preview via iframe (task #19)

Browse Source
This commit is contained in:
Omar Sobh
2026-07-19 18:43:46 -07:00
parent 267b28a762
commit 278cbf90b7
1 changed files with 86 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/dashboard/MissionCanvas.tsx
+86 -50
View File
@@ -83,6 +83,7 @@ export function MissionCanvas({
const [launching, setLaunching] = useState(false);
const [refining, setRefining] = useState(false);
const [phaseBusy, setPhaseBusy] = useState<string | null>(null);
const [pdfPreviewId, setPdfPreviewId] = useState<string | null>(null);
const load = useCallback(async () => {
if (!selectedId) {
@@ -567,58 +568,93 @@ export function MissionCanvas({
{mission.artifacts.length === 0 ? (
<Empty label="no artifacts yet — phases produce them as they run" />
) : (
mission.artifacts.map((a) => (
<div
key={a.id}
style={{
padding: 11,
borderRadius: 10,
border: "1px solid rgba(255,255,255,.07)",
background: "#101014",
display: "flex",
alignItems: "center",
gap: 10,
}}
>
<FileText size={16} style={{ color: "#7cd6e0", flex: "none" }} />
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ fontSize: 13, color: "#f3f3f5", fontWeight: 500 }}>
{a.title ?? a.path.split("/").pop() ?? a.path}
</div>
<div style={{ fontFamily: mono, fontSize: 10.5, color: "#8a8a92" }}>
{a.kind} · {a.path}
mission.artifacts.map((a) => {
const isPreviewing = pdfPreviewId === a.id;
return (
<div
key={a.id}
style={{ display: "flex", flexDirection: "column", gap: 8 }}
>
<div
style={{
padding: 11,
borderRadius: 10,
border: "1px solid rgba(255,255,255,.07)",
background: "#101014",
display: "flex",
alignItems: "center",
gap: 10,
}}
>
<FileText size={16} style={{ color: "#7cd6e0", flex: "none" }} />
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ fontSize: 13, color: "#f3f3f5", fontWeight: 500 }}>
{a.title ?? a.path.split("/").pop() ?? a.path}
</div>
<div style={{ fontFamily: mono, fontSize: 10.5, color: "#8a8a92" }}>
{a.kind} · {a.path}
</div>
</div>
{a.rendered_pdf_path ? (
<>
<button
type="button"
onClick={() =>
setPdfPreviewId(isPreviewing ? null : a.id)
}
style={{
...secondaryBtn,
padding: "5px 10px",
fontSize: 11,
}}
>
{isPreviewing ? "Hide" : "Preview"}
</button>
<a
href={a.rendered_pdf_path}
target="_blank"
rel="noreferrer"
style={{
...secondaryBtn,
padding: "5px 10px",
fontSize: 11,
textDecoration: "none",
}}
>
Open
</a>
</>
) : a.render_pdf_status !== "skip" ? (
<span
style={{
fontFamily: mono,
fontSize: 10.5,
color:
a.render_pdf_status === "failed"
? "#ff8a7a"
: "#8a8a92",
}}
>
pdf: {a.render_pdf_status}
</span>
) : null}
</div>
{isPreviewing && a.rendered_pdf_path && (
<iframe
src={a.rendered_pdf_path}
title={a.title ?? a.path}
style={{
width: "100%",
height: 640,
border: "1px solid rgba(255,255,255,.06)",
borderRadius: 8,
background: "#0a0a0d",
}}
/>
)}
</div>
{a.rendered_pdf_path ? (
<a
href={a.rendered_pdf_path}
target="_blank"
rel="noreferrer"
style={{
...secondaryBtn,
padding: "5px 10px",
fontSize: 11,
textDecoration: "none",
}}
>
Open PDF
</a>
) : a.render_pdf_status !== "skip" ? (
<span
style={{
fontFamily: mono,
fontSize: 10.5,
color:
a.render_pdf_status === "failed"
? "#ff8a7a"
: "#8a8a92",
}}
>
pdf: {a.render_pdf_status}
</span>
) : null}
</div>
))
);
})
)}
</div>
)}