From 345d257053365d2f163476cdef588e59dc0ee4d0 Mon Sep 17 00:00:00 2001 From: none23 Date: Wed, 12 Aug 2026 11:29:51 +0400 Subject: [PATCH 1/4] Fix fragment links in artifact previews --- README.md | 2 +- client/index.tsx | 29 ++++++++++++++++++++++++++++- 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 723c046..4d0c121 100644 --- a/README.md +++ b/README.md @@ -260,6 +260,6 @@ Lakebed local state resets when the dev process restarts. Real Google sign-in ac ## How it works -The project is a Lakebed v0 capsule. Lakebed supplies first-party Google authentication, transactional storage, and hosting. Artifact HTML is split into database-safe chunks. Owner, workspace-viewer, and recipient invitations bind to durable Lakebed user IDs on first matching sign-in. HTML is rendered with `srcDoc` in a sandboxed iframe without `allow-same-origin`. +The project is a Lakebed v0 capsule. Lakebed supplies first-party Google authentication, transactional storage, and hosting. Artifact HTML is split into database-safe chunks. Owner, workspace-viewer, and recipient invitations bind to durable Lakebed user IDs on first matching sign-in. HTML is rendered with `srcDoc` in a sandboxed iframe without `allow-same-origin`. The preview injects an `about:srcdoc` base URL at render time so fragment links stay within the artifact; stored and downloaded HTML remains unchanged. Codex Artifacts is an independent project and is not affiliated with or endorsed by OpenAI or Anthropic. diff --git a/client/index.tsx b/client/index.tsx index 288addd..755d98a 100644 --- a/client/index.tsx +++ b/client/index.tsx @@ -28,6 +28,7 @@ import { const client = createClient(); const DEFAULT_DOCUMENT_TITLE = "Codex Artifacts"; const KNOWN_EMAILS_KEY = "codex-artifacts:known-emails"; +const SRCDOC_BASE = ''; const EXPIRATION_OPTIONS = [ { label: "1 hour", value: "3600" }, { label: "1 day", value: "86400" }, @@ -66,6 +67,28 @@ function messageFromError(error: unknown): string { return error instanceof Error ? error.message : "Something went wrong."; } +function withSrcdocBase(html: string): string { + const head = /]*)?>/i.exec(html); + if (head) { + const insertionPoint = head.index + head[0].length; + return `${html.slice(0, insertionPoint)}${SRCDOC_BASE}${html.slice(insertionPoint)}`; + } + + const documentElement = /]*)?>/i.exec(html); + if (documentElement) { + const insertionPoint = documentElement.index + documentElement[0].length; + return `${html.slice(0, insertionPoint)}${SRCDOC_BASE}${html.slice(insertionPoint)}`; + } + + const doctype = /]*)?>/i.exec(html); + if (doctype) { + const insertionPoint = doctype.index + doctype[0].length; + return `${html.slice(0, insertionPoint)}${SRCDOC_BASE}${html.slice(insertionPoint)}`; + } + + return `${SRCDOC_BASE}${html}`; +} + function readKnownEmails(): string[] { try { const value = JSON.parse(window.localStorage.getItem(KNOWN_EMAILS_KEY) ?? "[]"); @@ -613,6 +636,10 @@ function ArtifactFrame({ slug }: { slug: string }) { if (!artifact) return ""; return URL.createObjectURL(new Blob([artifact.html], { type: "text/html;charset=utf-8" })); }, [artifact?.html]); + const previewHtml = useMemo( + () => artifact ? withSrcdocBase(artifact.html) : "", + [artifact?.html] + ); useEffect(() => { if ( @@ -720,7 +747,7 @@ function ArtifactFrame({ slug }: { slug: string }) { className="min-h-[700px] flex-1 border-0 bg-white" referrerPolicy="no-referrer" sandbox="allow-downloads allow-forms allow-modals allow-popups allow-scripts" - srcDoc={artifact.html} + srcDoc={previewHtml} title={artifact.title} /> From bb9c711e8cefd22b871a65f9339dc657cd4efb50 Mon Sep 17 00:00:00 2001 From: none23 Date: Wed, 12 Aug 2026 11:44:56 +0400 Subject: [PATCH 2/4] Refine artifact preview header --- client/index.tsx | 112 ++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 91 insertions(+), 21 deletions(-) diff --git a/client/index.tsx b/client/index.tsx index 755d98a..1e574ff 100644 --- a/client/index.tsx +++ b/client/index.tsx @@ -501,20 +501,28 @@ function AccessControl({ artifact }: { artifact: ViewedArtifact }) { } } + const accessDescription = `Access · ${accessLabel({ + isPublic, + sharedWith: emails, + sharedDomains: domains, + workspaceViewerCount: artifact.workspaceViewerEmails.length + })}`; + return (
{open ? (
@@ -527,7 +535,7 @@ function AccessControl({ artifact }: { artifact: ViewedArtifact }) {
) : null} @@ -728,19 +736,81 @@ function ArtifactFrame({ slug }: { slug: string }) { return (
-
-
- ← -
-

{artifact.title}

-

{formatBytes(artifact.sizeBytes)} · {expirationLabel(artifact.expiresAt)} · sandboxed preview

+
+
+ + + +
+

{artifact.title}

+
+ + + +
+

{formatBytes(artifact.sizeBytes)}

+

{expirationLabel(artifact.expiresAt)}

+
+
-
+
{artifact.canManage ? : null} - - Download HTML - {!auth.isGuest ? : null} + + + + Download HTML + + {!auth.isGuest ? ( + + ) : null}