@@ -244,14 +244,28 @@ function useInlinedWorkspaceImages(content: string): string {
     if (missing.length === 0) return
     let cancelled = false
     for (const url of missing) {
-      // boundary-raw-fetch: binary image bytes, converted to blob: URLs for the cookie-less sandboxed preview
+      // boundary-raw-fetch: binary image bytes for the cookie-less sandboxed preview
       fetch(url)
         .then((response) => (response.ok ? response.blob() : null))
-        .then((blob) => {
-          if (!blob || cancelled) return
-          const blobUrl = URL.createObjectURL(blob)
-          cache.set(url, blobUrl)
-          setResolved((prev) => ({ ...prev, [url]: blobUrl }))
+        .then(
+          (blob) =>
+            new Promise<string | null>((resolve) => {
+              if (!blob) return resolve(null)
+              // data: URIs, NOT blob: URLs — blob URLs are origin-bound and
+              // the sandboxed frame's origin is opaque, so Chromium refuses
+              // to render a parent-origin blob inside it. data: is
+              // origin-independent and already allowed by the preview CSP.
+              const reader = new FileReader()
+              reader.onload = () =>
+                resolve(typeof reader.result === 'string' ? reader.result : null)
+              reader.onerror = () => resolve(null)
+              reader.readAsDataURL(blob)
+            })
+        )
+        .then((dataUri) => {
+          if (!dataUri || cancelled) return
+          cache.set(url, dataUri)
+          setResolved((prev) => ({ ...prev, [url]: dataUri }))
         })
         .catch(() => {})
     }
 
@@ -21,6 +21,9 @@ import { PreviewLoadingFrame } from './preview-shared'
 import { useEditableFileContent } from './use-editable-file-content'
 import { useSelectionCopyBridge } from './use-selection-copy-bridge'
 
+/** File ids observed rendering as Sim pages this session (see the sticky lock). */
+const KNOWN_PAGE_FILE_IDS = new Set<string>()
+
 const SIM_DARK_RULES: MonacoEditorTypes.ITokenThemeRule[] = [
   { token: 'comment', foreground: '606060', fontStyle: 'italic' },
   { token: 'string', foreground: '3ab872' },
@@ -595,11 +598,17 @@ export const TextEditor = memo(function TextEditor({
   // the raw-header flash at stream start and the raw flips between an
   // agent's tool calls. Bespoke raw HTML keeps the old behavior.
   const trimmedContent = content.trimStart()
-  const isSimPageFile =
+  const detectedSimPage =
     file.type === SIM_PAGE_CONTENT_TYPE ||
     (previewType === 'html' &&
       (isSimPageSource(content) ||
         (isStreaming && (trimmedContent === '' || trimmedContent.startsWith('-')))))
+  // Sticky per file: a PATCH stream carries only the replacement snippet,
+  // which is not frontmatter-shaped — without memory the lock would drop
+  // mid-edit and flash raw source. Once a file is known to be a page, it
+  // stays one for the session.
+  if (detectedSimPage) KNOWN_PAGE_FILE_IDS.add(file.id)
+  const isSimPageFile = detectedSimPage || KNOWN_PAGE_FILE_IDS.has(file.id)
   const effectiveMode = isSimPageFile
     ? 'preview'
     : isStreaming && isIframeRendered
 
@@ -57,6 +57,10 @@ const ARTIFACT_TOKENS = [
   '--badge-error-text',
   '--badge-gray-bg',
   '--badge-gray-text',
+  '--badge-blue-bg',
+  '--badge-blue-text',
+  '--badge-purple-bg',
+  '--badge-purple-text',
   '--text-icon-muted',
   '--code-bg',
   '--selection-bg',
@@ -134,6 +138,10 @@ export const SIM_ARTIFACT_STYLESHEET = `
   --badge-error-text: #dc2626;
   --badge-gray-bg: #e7e5e4;
   --badge-gray-text: #57534e;
+  --badge-blue-bg: #bfdbfe;
+  --badge-blue-text: #1d4ed8;
+  --badge-purple-bg: #e9d5ff;
+  --badge-purple-text: #7c3aed;
   --text-icon-muted: #5c5c5c;
   --code-bg: #f5f5f5;
   --code-surface: var(--surface-5);
@@ -188,6 +196,10 @@ export const SIM_ARTIFACT_STYLESHEET = `
   --badge-error-text: #fca5a5;
   --badge-gray-bg: #3a3a3a;
   --badge-gray-text: #a8a8a8;
+  --badge-blue-bg: rgba(59, 130, 246, 0.2);
+  --badge-blue-text: #93c5fd;
+  --badge-purple-bg: rgba(168, 85, 247, 0.2);
+  --badge-purple-text: #d8b4fe;
   --bg: #1b1b1b;
   --surface-1: #1e1e1e;
   --surface-2: #232323;
@@ -609,6 +621,49 @@ figcaption { font-size: 0.875em; line-height: 1.4285714; color: var(--text-prima
 .codeblock-copy.is-copied { color: var(--brand-accent); }
 .codeblock pre { border: none; border-radius: 0; margin: 0; background: transparent; }
 
+/* Steps — the docs' numbered timeline: a muted numbered circle per step,
+   a hairline connector between them, title + content beside. */
+.steps { list-style: none; margin: 1.25rem 0; padding: 0; }
+.step { position: relative; display: flex; gap: 1rem; padding-bottom: 1.9rem; }
+.step:last-child { padding-bottom: 0.25rem; }
+.step::before {
+  content: ''; position: absolute; left: 13.5px; top: 32px; bottom: 4px;
+  width: 1px; background: var(--border);
+}
+.step:last-child::before { display: none; }
+.step-marker {
+  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--surface-5); color: var(--text-muted);
+  font-size: var(--text-small); font-weight: 500;
+}
+.step-body { min-width: 0; padding-top: 3px; }
+.step-title { font-weight: 500; color: var(--text-primary); margin-bottom: 0.4rem; }
+
+/* Code tabs — the docs' grouped code block: mono tab chips in the header,
+   one pane visible at a time. */
+.codetabs-head { display: flex; align-items: center; gap: 2px; padding: 0.3rem 0.4rem; }
+.codetab {
+  font-family: var(--font-mono); font-size: var(--text-small);
+  color: var(--text-muted); background: none; border: none;
+  border-radius: 0.375rem; padding: 0.2rem 0.6rem; cursor: pointer;
+}
+.codetab:hover { background: var(--surface-hover); color: var(--text-body); }
+.codetab.is-active { background: var(--surface-active); color: var(--text-primary); }
+.codetabs-head .codetabs-copy { position: static; margin-left: auto; }
+
+/* API method chips — sidebar entries only, the docs' reference nav. */
+.rail .method {
+  display: inline-block; margin-right: 8px; padding: 1px 6px;
+  border-radius: 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
+  vertical-align: 1px;
+}
+.rail .method-get { background: var(--badge-success-bg); color: var(--badge-success-text); }
+.rail .method-post { background: var(--badge-blue-bg); color: var(--badge-blue-text); }
+.rail .method-put { background: var(--badge-purple-bg); color: var(--badge-purple-text); }
+.rail .method-patch { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
+.rail .method-delete { background: var(--badge-error-bg); color: var(--badge-error-text); }
+
 /* Footer pagination — the docs' PageFooter verbatim: name + chevron on a
    hover pill (mt-12 flex gap-2 py-3; cards flex-1 gap-1.5 rounded-lg px-3
    py-3 text-sm --text-body, hover --surface-active; chevrons 14px
@@ -827,6 +882,43 @@ export const SIM_ARTIFACT_SHELL = `<script>
       frame.append(copy, pre)
     }
 
+    // Code-tab groups: switch panes; the docs' icon copy control targets the
+    // visible pane.
+    for (const group of [...main.querySelectorAll('.codetabs')]) {
+      const head = group.querySelector('.codetabs-head')
+      if (!head) continue
+      const groupCopy = document.createElement('button')
+      groupCopy.className = 'codeblock-copy codetabs-copy'
+      groupCopy.type = 'button'
+      groupCopy.setAttribute('aria-label', 'Copy Text')
+      groupCopy.innerHTML = COPY_ICON
+      let groupResetTimer
+      groupCopy.addEventListener('click', async () => {
+        const pane = group.querySelector('pre:not([hidden])')
+        try {
+          await navigator.clipboard.writeText((pane && pane.textContent) || '')
+          groupCopy.innerHTML = COPIED_ICON
+          groupCopy.classList.add('is-copied')
+          clearTimeout(groupResetTimer)
+          groupResetTimer = setTimeout(() => {
+            groupCopy.innerHTML = COPY_ICON
+            groupCopy.classList.remove('is-copied')
+          }, 1500)
+        } catch {}
+      })
+      head.appendChild(groupCopy)
+      head.addEventListener('click', (event) => {
+        const origin = event.target
+        const btn = origin && origin.closest ? origin.closest('.codetab') : null
+        if (!btn) return
+        const tabs = [...head.querySelectorAll('.codetab')]
+        const panes = [...group.querySelectorAll('pre')]
+        const index = tabs.indexOf(btn)
+        tabs.forEach((tab, i) => tab.classList.toggle('is-active', i === index))
+        panes.forEach((pane, i) => { pane.hidden = i !== index })
+      })
+    }
+
     const cols = document.createElement('div')
     cols.className = 'art-cols'
     const mid = document.createElement('div')
 
@@ -67,9 +67,16 @@ function setNavHtml(nav: NonNullable<z.infer<typeof frontmatterSchema>['nav']>):
     .map((group) => {
       const links = group.pages
         .map((entry) => {
-          const match = entry.match(MD_LINK)
+          // An optional METHOD prefix ("GET [List Workflows](sim:file/x)")
+          // renders the docs' API-reference chip — sidebar entries only.
+          const methodMatch = entry.match(/^\s*(GET|POST|PUT|PATCH|DELETE)\s+(.*)$/)
+          const method = methodMatch?.[1]
+          const match = (methodMatch?.[2] ?? entry).match(MD_LINK)
           if (!match) return ''
-          return `<a href="${escapeHtml(match[2])}">${escapeHtml(match[1])}</a>`
+          const chip = method
+            ? `<span class="method method-${method.toLowerCase()}">${method}</span>`
+            : ''
+          return `<a href="${escapeHtml(match[2])}">${chip}${escapeHtml(match[1])}</a>`
         })
         .filter(Boolean)
         .join('')
@@ -125,6 +132,12 @@ const tablePayloadSchema = z.object({
   rows: z.array(z.array(textCell)).min(1),
 })
 const kvItemsSchema = z.array(z.object({ key: textCell, value: textCell })).min(1)
+const stepsItemsSchema = z
+  .array(z.object({ title: textCell, markdown: textCell.optional() }))
+  .min(1)
+const tabsItemsSchema = z
+  .array(z.object({ label: textCell, lang: textCell.optional(), code: textCell }))
+  .min(1)
 const accordionItemsSchema = z
   .array(
     z
@@ -228,6 +241,34 @@ const FENCE_RENDERERS: Record<string, FenceRenderer> = {
   },
   faq: renderAccordion,
   accordion: renderAccordion,
+  steps: (payload) => {
+    const parsed = stepsItemsSchema.safeParse(payload)
+    if (!parsed.success) return null
+    const items = parsed.data
+      .map(
+        (step, index) =>
+          `<li class="step"><div class="step-marker">${index + 1}</div><div class="step-body"><div class="step-title">${renderInlineMarkdown(step.title)}</div>${step.markdown ? renderMarkdown(step.markdown) : ''}</div></li>`
+      )
+      .join('')
+    return `<ol class="steps">${items}</ol>`
+  },
+  tabs: (payload) => {
+    const parsed = tabsItemsSchema.safeParse(payload)
+    if (!parsed.success) return null
+    const buttons = parsed.data
+      .map(
+        (tab, index) =>
+          `<button type="button" class="codetab${index === 0 ? ' is-active' : ''}">${escapeHtml(tab.label)}</button>`
+      )
+      .join('')
+    const panes = parsed.data
+      .map(
+        (tab, index) =>
+          `<pre${index === 0 ? '' : ' hidden'}><code${tab.lang ? ` class="language-${escapeHtml(tab.lang)}"` : ''}>${escapeHtml(tab.code)}</code></pre>`
+      )
+      .join('')
+    return `<figure class="codeblock codetabs"><div class="codeblock-head codetabs-head">${buttons}</div>${panes}</figure>`
+  },
 }
 
 /** `sim:faq` and `sim:accordion` share the docs' expandable-rows treatment. */