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 [launching, setLaunching] = useState(false);
const [refining, setRefining] = useState(false); const [refining, setRefining] = useState(false);
const [phaseBusy, setPhaseBusy] = useState<string | null>(null); const [phaseBusy, setPhaseBusy] = useState<string | null>(null);
const [pdfPreviewId, setPdfPreviewId] = useState<string | null>(null);
const load = useCallback(async () => { const load = useCallback(async () => {
if (!selectedId) { if (!selectedId) {
@@ -567,58 +568,93 @@ export function MissionCanvas({
{mission.artifacts.length === 0 ? ( {mission.artifacts.length === 0 ? (
<Empty label="no artifacts yet — phases produce them as they run" /> <Empty label="no artifacts yet — phases produce them as they run" />
) : ( ) : (
mission.artifacts.map((a) => ( mission.artifacts.map((a) => {
<div const isPreviewing = pdfPreviewId === a.id;
key={a.id} return (
style={{ <div
padding: 11, key={a.id}
borderRadius: 10, style={{ display: "flex", flexDirection: "column", gap: 8 }}
border: "1px solid rgba(255,255,255,.07)", >
background: "#101014", <div
display: "flex", style={{
alignItems: "center", padding: 11,
gap: 10, borderRadius: 10,
}} border: "1px solid rgba(255,255,255,.07)",
> background: "#101014",
<FileText size={16} style={{ color: "#7cd6e0", flex: "none" }} /> display: "flex",
<div style={{ flex: 1, minWidth: 0 }}> alignItems: "center",
<div style={{ fontSize: 13, color: "#f3f3f5", fontWeight: 500 }}> gap: 10,
{a.title ?? a.path.split("/").pop() ?? a.path} }}
</div> >
<div style={{ fontFamily: mono, fontSize: 10.5, color: "#8a8a92" }}> <FileText size={16} style={{ color: "#7cd6e0", flex: "none" }} />
{a.kind} · {a.path} <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> </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> </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> </div>
)} )}