@@ -74,7 +74,7 @@ This separation keeps the switcher clean and fast while making all other command
 
 ### Artifacts tab (experimental)
 
-These work when the **Artifacts** experiment is on. Shortcuts other than opening the tab only apply while focus is inside the Artifacts tab.
+These work when the **Artifacts** experiment is on. Shortcuts other than opening the tab only apply while focus is inside the Artifacts tab (`Shift+F` and `Esc` also work inside an HTML or SVG preview). On narrow windows, where the right sidebar is hidden, `Ctrl+Shift+K` opens the Artifacts dialog instead. The image zoom shortcuts apply while focus is on the image or its zoom controls.
 
 | Action                       | Shortcut       |
 | ---------------------------- | -------------- |
@@ -83,6 +83,8 @@ These work when the **Artifacts** experiment is on. Shortcuts other than opening
 | Exit fullscreen              | `Esc`          |
 | Next / previous artifact     | `J` / `K`      |
 | Reload the selected artifact | `R`            |
+| Image: zoom in / zoom out    | `=` / `-`      |
+| Image: fit / actual size     | `0` / `1`      |
 
 ## Tips
 
 
@@ -29,8 +29,10 @@ import * as pixelUtils from "../node_modules/@coder/pixel-storybook/build/utils.
 // no new stories; 608 → 655 is a unit change from estimated to actual captures).
 // Keep this no-headroom guardrail tight: future growth should exclude, consolidate,
 // or intentionally rebalance snapshots rather than silently increasing Pixel load.
-const MAX_SNAPSHOTS = 655;
-const MAX_SNAPSHOT_ENABLED_FILES = 115;
+// +4 snapshots / +1 file: the Artifacts tab gallery (ArtifactsPanel.stories.tsx), consolidated
+// from 24 per-renderer variants to one phone and one laptop story in dark + light.
+const MAX_SNAPSHOTS = 659;
+const MAX_SNAPSHOT_ENABLED_FILES = 116;
 
 const { values } = parseArgs({
   options: {
 
@@ -3,6 +3,7 @@ import { ArchiveIcon } from "../icons/ArchiveIcon/ArchiveIcon";
 import {
   GitBranch,
   HeartPulse,
+  AppWindow,
   History,
   Maximize2,
   MessagesSquare,
@@ -62,6 +63,8 @@ interface WorkspaceActionsMenuContentProps {
   onEnterImmersiveReview?: (() => void) | null;
   /** Small-viewport action: open the timeline dialog (the right sidebar hosting the tab is hidden there). */
   onOpenTimeline?: (() => void) | null;
+  /** Small viewports only: the Artifacts dialog (the right sidebar is hidden there). */
+  onOpenArtifacts?: (() => void) | null;
   onStopRuntime?: (() => void) | null;
   onForkChat?: ((anchorEl: HTMLElement) => void) | null;
   /** Pin/unpin toggle; pass null on sub-agent rows (only root chats are pinnable). */
@@ -172,6 +175,20 @@ export const WorkspaceActionsMenuContent: React.FC<WorkspaceActionsMenuContentPr
           testId="workspace-timeline-button"
         />
       )}
+      {props.onOpenArtifacts && (
+        <WorkspaceActionButton
+          label="Artifacts"
+          shortcut={formatKeybind(KEYBINDS.OPEN_ARTIFACTS_TAB)}
+          shortcutClassName={props.shortcutClassName}
+          icon={<AppWindow className="h-3 w-3 shrink-0" />}
+          onClick={(e) => {
+            e.stopPropagation();
+            props.onCloseMenu();
+            props.onOpenArtifacts?.();
+          }}
+          testId="workspace-artifacts-button"
+        />
+      )}
       {props.onStopRuntime && (
         <WorkspaceActionButton
           label="Stop container"
 
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Bell, BellOff, Ellipsis, Info, Menu, Pencil } from "lucide-react";
 import { CUSTOM_EVENTS, createCustomEvent } from "@/common/constants/events";
+import { EXPERIMENT_IDS } from "@/common/constants/experiments";
 import { cn } from "@/common/lib/utils";
 import { getErrorMessage } from "@/common/utils/errors";
 import { isWorkspacePinnable, isWorkspacePinned } from "@/common/utils/pin";
@@ -36,6 +37,7 @@ import { DEFAULT_RUNTIME_CONFIG } from "@/common/constants/workspace";
 import { useTutorial } from "@/browser/contexts/TutorialContext";
 
 import type { TerminalSessionCreateOptions } from "@/browser/utils/terminal";
+import { useExperimentValue } from "@/browser/hooks/useExperiments";
 import { useOpenTerminal } from "@/browser/hooks/useOpenTerminal";
 import { useOpenInEditor } from "@/browser/hooks/useOpenInEditor";
 import { usePersistedState } from "@/browser/hooks/usePersistedState";
@@ -65,6 +67,8 @@ import {
   WORKSPACE_MENU_BAR_LEFT_SIDEBAR_COLLAPSED_PADDING_PX,
 } from "@/constants/layout";
 import { TimelineDialog } from "@/browser/features/RightSidebar/Timeline/TimelineDialog";
+import { ArtifactsDialog } from "@/browser/features/RightSidebar/ArtifactsTab/ArtifactsDialog";
+import { isRightSidebarResponsivelyHidden } from "@/browser/features/RightSidebar/rightSidebarVisibility";
 import type { AgentSkillDescriptor, AgentSkillIssue } from "@/common/types/agentSkill";
 
 interface WorkspaceMenuBarProps {
@@ -105,6 +109,7 @@ export const WorkspaceMenuBar: React.FC<WorkspaceMenuBarProps> = ({
     useWorkspaceActions();
   const isArchiving = archivingWorkspaceIds.has(workspaceId);
   const { workspaceMetadata } = useWorkspaceContext();
+  const artifactsExperimentEnabled = useExperimentValue(EXPERIMENT_IDS.ARTIFACTS);
   const openTerminalPopout = useOpenTerminal();
   const openInEditor = useOpenInEditor();
   const runtimeStatus = useRuntimeStatus(workspaceId);
@@ -152,6 +157,13 @@ export const WorkspaceMenuBar: React.FC<WorkspaceMenuBarProps> = ({
     setTimelineDialogWorkspaceId(null);
   }
   const timelineDialogOpen = timelineDialogWorkspaceId === workspaceId;
+  // Same per-workspace keying as the timeline dialog: the Artifacts tab also lives in the
+  // right sidebar, so small viewports need this dialog to reach it.
+  const [artifactsDialogWorkspaceId, setArtifactsDialogWorkspaceId] = useState<string | null>(null);
+  if (artifactsDialogWorkspaceId !== null && artifactsDialogWorkspaceId !== workspaceId) {
+    setArtifactsDialogWorkspaceId(null);
+  }
+  const artifactsDialogOpen = artifactsDialogWorkspaceId === workspaceId;
   const [availableSkills, setAvailableSkills] = useState<AgentSkillDescriptor[]>([]);
   const [invalidSkills, setInvalidSkills] = useState<AgentSkillIssue[]>([]);
   const isSkillsMountedRef = useRef(true);
@@ -219,12 +231,7 @@ export const WorkspaceMenuBar: React.FC<WorkspaceMenuBarProps> = ({
       ?.closest("[data-workspace-shell]")
       ?.querySelector(".mobile-hide-right-sidebar");
     if (sidebar instanceof HTMLElement) {
-      // Immersive review hides the sidebar on any viewport (marked aria-hidden);
-      // only a responsive hide should surface the dialog entry points.
-      if (sidebar.getAttribute("aria-hidden") === "true") {
-        return false;
-      }
-      return window.getComputedStyle(sidebar).display === "none";
+      return isRightSidebarResponsivelyHidden(sidebar);
     }
     return window.matchMedia(`(max-width: ${NARROW_VIEWPORT_MAX_WIDTH_PX}px)`).matches;
   }, []);
@@ -271,6 +278,27 @@ export const WorkspaceMenuBar: React.FC<WorkspaceMenuBarProps> = ({
     return () => window.removeEventListener("keydown", handler);
   }, [isTimelineSidebarHidden, workspaceId]);
 
+  // Ctrl+Shift+K normally opens the Artifacts tab (RightSidebar owns that handler); while the
+  // sidebar is hidden it opens the dialog instead, the tab's only entry point there.
+  useEffect(() => {
+    if (!artifactsExperimentEnabled) {
+      return;
+    }
+    const handler = (e: KeyboardEvent) => {
+      if (
+        !matchesKeybind(e, KEYBINDS.OPEN_ARTIFACTS_TAB) ||
+        isDialogOpen() ||
+        !isTimelineSidebarHidden()
+      ) {
+        return;
+      }
+      e.preventDefault();
+      setArtifactsDialogWorkspaceId(workspaceId);
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [artifactsExperimentEnabled, isTimelineSidebarHidden, workspaceId]);
+
   const isDevcontainerWorkspace = isDevcontainerRuntime(runtimeConfig);
   const isRuntimeRunning = isDevcontainerWorkspace && runtimeStatus === "running";
   // Mirrors TaskService.isLocalUnrelatedMessagingEndpoint: unrelated delivery requires local or
@@ -826,6 +854,11 @@ export const WorkspaceMenuBar: React.FC<WorkspaceMenuBarProps> = ({
               onOpenTimeline={
                 timelineSidebarHidden ? () => setTimelineDialogWorkspaceId(workspaceId) : null
               }
+              onOpenArtifacts={
+                artifactsExperimentEnabled && timelineSidebarHidden
+                  ? () => setArtifactsDialogWorkspaceId(workspaceId)
+                  : null
+              }
               onStopRuntime={isRuntimeRunning ? () => void handleStopRuntime() : null}
               // Scratch chats have no repo: review events are ignored by
               // RightSidebar and fork is unsupported on the backend, so hide
@@ -903,6 +936,11 @@ export const WorkspaceMenuBar: React.FC<WorkspaceMenuBarProps> = ({
         open={timelineDialogOpen}
         onOpenChange={(open) => setTimelineDialogWorkspaceId(open ? workspaceId : null)}
       />
+      <ArtifactsDialog
+        workspaceId={workspaceId}
+        open={artifactsDialogOpen}
+        onOpenChange={(open) => setArtifactsDialogWorkspaceId(open ? workspaceId : null)}
+      />
       <DebugLlmRequestModal
         workspaceId={workspaceId}
         open={debugLlmRequestOpen}
 
@@ -76,6 +76,11 @@ const sanitizeSchema = {
   protocols: {
     ...defaultSchema.protocols,
     href: [...(defaultSchema.protocols?.href ?? []), INTERNAL_INLINE_SKILL_SANITIZE_PROTOCOL],
+    // SECURITY AUDIT: data: must survive sanitize for rehype-harden's allowDataImages to take
+    // effect (it only ever keeps data:image/ URLs on images). Without this, every data image
+    // was stripped here first, which also broke relative images in Markdown artifacts, which
+    // are inlined as data: URLs.
+    src: [...(defaultSchema.protocols?.src ?? []), "data"],
   },
   attributes: {
     ...defaultSchema.attributes,
 
@@ -39,6 +39,22 @@ describe("MarkdownRenderer raw HTML handling", () => {
     expect(view.container.querySelector("signoutbutton")).toBeNull();
   });
 
+  test("keeps data:image URLs on images but never other data: URLs", () => {
+    const view = renderMarkdown(
+      [
+        "![ok](data:image/png;base64,iVBORw0KGgo=)",
+        "![bad](data:text/html;base64,PHNjcmlwdD4=)",
+        '<img alt="raw" src="data:text/html,<script>alert(1)</script>">',
+        "[link](data:text/html,hi)",
+      ].join("\n\n")
+    );
+    const sources = Array.from(view.container.querySelectorAll("img")).map((img) =>
+      img.getAttribute("src")
+    );
+    expect(sources).toEqual(["data:image/png;base64,iVBORw0KGgo="]);
+    expect(view.container.querySelector('a[href^="data:"]')).toBeNull();
+  });
+
   function copyRenderedMarkdown(content: string) {
     const view = render(
       <div data-transcript-message>