Honor the model's declared page type; default copilot .html to a page

An explicit contentType on create_empty_file always wins (the skill now
declares text/x-sim-page for pages, text/html for bespoke raw pages);
with no declaration a copilot-created .html defaults to the page type.
The first apply_file_edit still re-confirms from the actual content, and
the category map knows the internal mime explicitly instead of falling
through to the extension.

Author: Sg312

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-category.ts

@@ -8,6 +8,8 @@ const TEXT_EDITABLE_MIME_TYPES = new Set([
   'application/x-yaml',
   'text/csv',
   'text/html',
+  // Sim pages: internal record type; the file itself is .html.
+  'text/x-sim-page',
   'text/xml',
   'application/xml',
   'text/css',

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx

@@ -13,6 +13,7 @@ import {
   usesSimArtifactStyles,
 } from '@/lib/workspace-files/artifact-stylesheet'
 import { compileSimPage, isSimPageSource } from '@/lib/workspace-files/page-compile'
+import { SIM_PAGE_FONT_URL, simPageFontFace } from '@/lib/workspace-files/page-font'
 import { useHorizontalWheelScroll } from '@/app/workspace/[workspaceId]/files/components/file-viewer/use-horizontal-wheel-scroll'
 import { type CsvImportFileDescriptor, useCsvTruncationImport } from './csv-import'
 import { DataTable } from './data-table'
@@ -144,6 +145,48 @@ const HTML_PREVIEW_BOOTSTRAP = `<script>
 })()
 </script>`
 
+/**
+ * Inter for the sandboxed preview: `font-src` allows only `data:`, so the
+ * host fetches the app-served woff2 once per session and inlines it. Until
+ * the fetch lands (or off-browser) the page renders on the system stack and
+ * upgrades on the next build — a font swap, not a layout break.
+ */
+let interFontFaceCss = ''
+let interFontFacePromise: Promise<string> | null = null
+function loadInterFontFace(): Promise<string> {
+  if (!interFontFacePromise) {
+    interFontFacePromise = fetch(SIM_PAGE_FONT_URL)
+      .then((response) => (response.ok ? response.arrayBuffer() : null))
+      .then((buffer) => {
+        if (!buffer) return ''
+        const bytes = new Uint8Array(buffer)
+        let binary = ''
+        for (let i = 0; i < bytes.length; i += 0x8000) {
+          binary += String.fromCharCode(...bytes.subarray(i, i + 0x8000))
+        }
+        interFontFaceCss = simPageFontFace(`data:font/woff2;base64,${btoa(binary)}`)
+        return interFontFaceCss
+      })
+      .catch(() => '')
+  }
+  return interFontFacePromise
+}
+
+function useSimPageFontFace(): string {
+  const [fontFace, setFontFace] = useState(interFontFaceCss)
+  useEffect(() => {
+    if (interFontFaceCss) return
+    let cancelled = false
+    loadInterFontFace().then((value) => {
+      if (!cancelled && value) setFontFace(value)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+  return fontFace
+}
+
 /**
  * Stamps the app's resolved theme onto the document root. The frame has an
  * opaque origin and inherits nothing, so `prefers-color-scheme` inside it
@@ -164,7 +207,8 @@ export function buildHtmlPreviewDocument(
   content: string,
   theme: 'dark' | 'light' = 'light',
   workspaceId?: string,
-  lenient?: boolean
+  lenient?: boolean,
+  fontFaceCss: string = interFontFaceCss
 ): string {
   // The pdf model: a page file STORES its source (frontmatter + markdown +
   // sim: fences) and every rendering surface compiles on demand. Partial
@@ -181,7 +225,7 @@ export function buildHtmlPreviewDocument(
     // token overrides follow the sheet so the app's live values beat its
     // fallbacks, and the shell follows both.
     usesSimArtifactStyles(content)
-      ? `<style>${SIM_ARTIFACT_STYLESHEET}</style><style>${simTokenOverrides()}</style>${SIM_ARTIFACT_SHELL}`
+      ? `<style>${fontFaceCss}${SIM_ARTIFACT_STYLESHEET}</style><style>${simTokenOverrides()}</style>${SIM_ARTIFACT_SHELL}`
       : '',
     HTML_PREVIEW_BOOTSTRAP,
   ].join('')
@@ -287,6 +331,7 @@ const HtmlPreview = memo(function HtmlPreview({
 }) {
   const { resolvedTheme } = useTheme()
   const router = useRouter()
+  const fontFaceCss = useSimPageFontFace()
   const batchedContent = useStreamBatchedValue(content, isStreaming === true, 2000)
   const displayContent = useInlinedWorkspaceImages(batchedContent)
   const wrappedContent = buildHtmlPreviewDocument(
@@ -295,7 +340,8 @@ const HtmlPreview = memo(function HtmlPreview({
     workspaceId,
     // Mid-stream, a fence still being written is malformed by definition —
     // suppress the skip notices until the stream settles.
-    isStreaming === true
+    isStreaming === true,
+    fontFaceCss
   )
 
   // Receives sim-resource link clicks bridged out of the sandboxed page and

apps/sim/lib/copilot/tools/server/files/create-file.ts

@@ -13,6 +13,7 @@ import {
   createWorkspaceFileByPath,
   updateWorkspaceFileContentByPath,
 } from '@/lib/workspace-files/application/write-workspace-file-by-path'
+import { SIM_PAGE_CONTENT_TYPE } from '@/lib/workspace-files/page-compile'
 
 const logger = createLogger('CreateFileServerTool')
 const CREATE_FILE_TOOL_ID = 'create_empty_file'
@@ -57,7 +58,20 @@ export const createFileServerTool: BaseServerTool<CreateFileArgs, CreateFileResu
     }
     const outputPath =
       outputFile?.path ?? (fileName.startsWith('files/') ? fileName : `files/${fileName}`)
-    const contentType = outputFile?.mimeType ?? inferContentType(outputPath, explicitType)
+    // A copilot-created .html file IS a Sim page unless the model says
+    // otherwise: an explicit contentType (the skill declares
+    // text/x-sim-page for pages and text/html for a bespoke raw page)
+    // always wins; with no declaration the .html default is a page. Either
+    // way the record advertises the file's nature from birth, so the viewer
+    // renders (never raw code) from the very first streamed byte, and the
+    // first apply_file_edit re-confirms from the actual content. User
+    // uploads never pass through here and stay text/html.
+    const declaredType = outputFile?.mimeType ?? explicitType
+    const inferredType = inferContentType(outputPath, declaredType)
+    const contentType =
+      !declaredType && inferredType === 'text/html' && outputPath.toLowerCase().endsWith('.html')
+        ? SIM_PAGE_CONTENT_TYPE
+        : inferredType
     assertServerToolNotAborted(context)
     const mode = outputFile?.mode ?? 'create'
     // An empty shell provably contains no secrets; recording that keeps the

apps/sim/lib/copilot/tools/server/files/edit-content.ts

@@ -281,6 +281,8 @@ export const editContentServerTool: BaseServerTool<EditContentArgs, EditContentR
       // The internal page type: the record advertises what the .html holds so
       // surfaces can force the rendered view before content loads. The file
       // itself stays .html (serve/download emit text/html).
+      // create_empty_file stamps copilot .html as a page by default; the
+      // first real content confirms or corrects that from what was written.
       const storedContentType =
         isHtmlTarget && isSimPageSource(finalContent) ? SIM_PAGE_CONTENT_TYPE : compiled.sourceMime
 

apps/sim/lib/workspace-files/artifact-stylesheet.test.ts

@@ -141,6 +141,46 @@ describe('docs fidelity', () => {
     expect(SIM_ARTIFACT_STYLESHEET).toContain('padding: 5px 0.5rem')
     expect(SIM_ARTIFACT_STYLESHEET).toContain('line-height: 20px')
   })
+
+  // Inter leads the stack; each surface injects the matching @font-face.
+  it('leads the sans stack with the docs font', () => {
+    expect(SIM_ARTIFACT_STYLESHEET).toContain('--font-sans: "Inter",')
+  })
+
+  // The docs' prose anchor: 500 weight, 1.5px underline offset 3.5px, hover
+  // fades to 80% — with chrome links reset back to plain navigation.
+  it('styles content links as the docs prose anchors', () => {
+    expect(SIM_ARTIFACT_STYLESHEET).toContain('text-decoration-thickness: 1.5px')
+    expect(SIM_ARTIFACT_STYLESHEET).toContain('text-underline-offset: 3.5px')
+    expect(SIM_ARTIFACT_STYLESHEET).toContain('a:hover { opacity: 0.8; }')
+    expect(SIM_ARTIFACT_STYLESHEET).toContain('.rail a, .page-nav-card { font-weight: 400')
+  })
+
+  // The docs' figure.shiki shell and Code.Viewer metrics.
+  it('frames fenced code like the docs', () => {
+    expect(SIM_ARTIFACT_STYLESHEET).toContain('background: var(--code-surface)')
+    expect(SIM_ARTIFACT_STYLESHEET).toContain('line-height: 21px')
+    expect(SIM_ARTIFACT_STYLESHEET).toContain(
+      '.codeblock-copy.is-copied { color: var(--brand-accent); }'
+    )
+    expect(SIM_ARTIFACT_SHELL).toContain('M14.25 0.75H2.75') // emcn Duplicate
+    expect(SIM_ARTIFACT_SHELL).toContain('M18.25 2.75L7.25 15.75') // emcn Check
+  })
+
+  // The docs' inline chip: no border, color unset so linked code keeps the
+  // link color.
+  it('keeps the inline code chip borderless and color-neutral', () => {
+    expect(SIM_ARTIFACT_STYLESHEET).toContain('padding: 0.125rem 0.375rem')
+    expect(SIM_ARTIFACT_STYLESHEET).not.toContain(
+      'code {\n  font-family: var(--font-mono);\n  font-size: 0.84em'
+    )
+  })
+
+  it('carries the platform selection color', () => {
+    expect(SIM_ARTIFACT_STYLESHEET).toContain(
+      '::selection { background-color: var(--selection-bg); }'
+    )
+  })
 })
 
 describe('simTokenOverrides', () => {

apps/sim/lib/workspace-files/artifact-stylesheet.ts

@@ -10,10 +10,9 @@
  * A page opting in renders as a page of the Sim docs, not a third design
  * system.
  *
- * Injected only into the preview document, never written into the stored
- * file, so restyling every existing page is a change to this constant. The
- * preview is also what the share page renders through, so shared links pick
- * it up too; a raw download is the one path that sees unstyled markup.
+ * Never written into the stored file: the preview injects it live and
+ * page-document.ts bakes it into standalone/share/download documents, so
+ * restyling every existing page is a change to this constant.
  */
 
 /** Marker a page carries to request {@link SIM_ARTIFACT_STYLESHEET}. */
@@ -100,9 +99,11 @@ export function simTokenOverrides(): string {
  *   2px color bar down the start edge) with the docs' shadow removal.
  * - layout: global.css --spacing-fd-container 1400px, --fd-sidebar-width
  *   300px, TOC column 268px, --content-gap 2.25rem.
- * The docs' webfont (Inter under --font-geist-sans) cannot cross the sandbox
- * (font CDNs and app-origin fetches are blocked), so the system stack stands
- * in for it.
+ * The docs' webfont (Inter under --font-geist-sans) leads --font-sans; each
+ * surface injects the matching @font-face (see lib/workspace-files/page-font
+ * — the app-served URL for standalone documents, a host-fetched data: URI
+ * for the sandboxed preview), falling back to the system stack until it
+ * loads.
  */
 export const SIM_ARTIFACT_STYLESHEET = `
 :root {
@@ -692,35 +693,39 @@ export const SIM_ARTIFACT_SHELL = `<script>
     paintThemeButton()
     bar.append(title, search, themeButton)
 
-    // Code blocks get the docs frame: a header with the language label and a
-    // copy button above each fenced block.
+    // Code blocks get the docs frame: like the docs' prose fences, an
+    // untitled block has no header row — just the floating copy control,
+    // emcn's Duplicate icon flipping to a brand-accent Check while copied.
+    const COPY_ICON = '<svg ' + ICON_ATTRS + '><path d="M14.25 0.75H2.75C1.64543 0.75 0.75 1.64543 0.75 2.75V14.25"/><rect x="5.25" y="5.25" width="14" height="14" rx="2"/></svg>'
+    const COPIED_ICON = '<svg ' + ICON_ATTRS + '><path d="M18.25 2.75L7.25 15.75L1.75 10.25"/></svg>'
     for (const pre of [...main.querySelectorAll('pre')]) {
       if (pre.closest('.codeblock')) continue
       const codeEl = pre.querySelector('code')
-      const langMatch = codeEl && codeEl.className.match(/language-([\\w-]+)/)
       const frame = document.createElement('figure')
       frame.className = 'codeblock'
-      const head = document.createElement('div')
-      head.className = 'codeblock-head'
-      const lang = document.createElement('span')
-      lang.textContent = langMatch ? langMatch[1] : 'code'
       const copy = document.createElement('button')
       copy.className = 'codeblock-copy'
       copy.type = 'button'
-      copy.textContent = 'Copy'
+      copy.setAttribute('aria-label', 'Copy Text')
+      copy.innerHTML = COPY_ICON
+      let copyResetTimer
       copy.addEventListener('click', async () => {
         const text = (codeEl || pre).textContent || ''
         try {
           await navigator.clipboard.writeText(text)
-          copy.textContent = 'Copied'
-        } catch {
-          copy.textContent = 'Select + copy'
-        }
-        setTimeout(() => { copy.textContent = 'Copy' }, 1500)
+          copy.innerHTML = COPIED_ICON
+          copy.classList.add('is-copied')
+          copy.setAttribute('aria-label', 'Copied Text')
+          clearTimeout(copyResetTimer)
+          copyResetTimer = setTimeout(() => {
+            copy.innerHTML = COPY_ICON
+            copy.classList.remove('is-copied')
+            copy.setAttribute('aria-label', 'Copy Text')
+          }, 1500)
+        } catch {}
       })
-      head.append(lang, copy)
       pre.replaceWith(frame)
-      frame.append(head, pre)
+      frame.append(copy, pre)
     }
 
     const cols = document.createElement('div')

apps/sim/lib/workspace-files/page-document.ts

@@ -3,6 +3,7 @@ import {
   SIM_ARTIFACT_STYLESHEET,
 } from '@/lib/workspace-files/artifact-stylesheet'
 import { compileSimPage } from '@/lib/workspace-files/page-compile'
+import { SIM_PAGE_FONT_URL, simPageFontFace } from '@/lib/workspace-files/page-font'
 
 /**
  * Renders page source as a fully self-contained styled document for the
@@ -16,6 +17,6 @@ export function renderSimPageDocument(source: string, options?: { workspaceId?:
   const compiled = compileSimPage(source, options)
   return compiled.replace(
     '</head>',
-    `<style>${SIM_ARTIFACT_STYLESHEET}</style>${SIM_ARTIFACT_SHELL}</head>`
+    `<style>${simPageFontFace(SIM_PAGE_FONT_URL)}${SIM_ARTIFACT_STYLESHEET}</style>${SIM_ARTIFACT_SHELL}</head>`
   )
 }

apps/sim/lib/workspace-files/page-font.ts

@@ -0,0 +1,18 @@
+/**
+ * The docs render Inter (their `--font-geist-sans` resolves to Inter via
+ * next/font), so generated pages carry the same face. The asset in
+ * `public/fonts/` is next/font's own latin variable subset (weights 100–900
+ * in one file — the docs use intermediate weights like 430/470/550), copied
+ * from the app build's font cache, so the page and the platform serve
+ * byte-identical Inter.
+ *
+ * Two delivery paths, because the preview sandbox allows `font-src data:`
+ * only: standalone/share/download documents reference the app-served URL,
+ * while the preview host fetches the file once and inlines it as a data: URI.
+ */
+export const SIM_PAGE_FONT_URL = '/fonts/inter-variable-latin.woff2'
+
+/** One `@font-face` covering Inter's full variable weight range. */
+export function simPageFontFace(src: string): string {
+  return `@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(${src}) format("woff2")}`
+}