From 9fcef5ffcc027cee312cebd4bc7df8ebb4cb05fc Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 14 Oct 2026 00:46:50 +1100
Subject: [PATCH] fix(pages): reduce payloads and preserve source controls

---
 app/assets/css/main.css                       |  51 +++++++
 app/components/WeeklyEmailPreview.vue         |  12 +-
 app/pages/index.vue                           |   2 +
 layers/identity/server/api/digest/demo.get.ts |  21 ++-
 .../identity/server/utils/weekly-template.ts  |  10 +-
 .../components/FrameworkSkillsDirectory.vue   |   6 +-
 .../marketing/app/pages/frameworks/react.vue  |   5 +-
 .../app/utils/framework-directory.ts          |  22 +++
 .../registry/app/components/SkillDetail.vue   | 129 +++++++++++++-----
 .../app/utils/skill-detail-payload.ts         |  25 ++++
 .../server/utils/skill-md-render.spec.ts      |   5 +-
 shared/highlight.ts                           |  16 +--
 test/unit/highlight-code-body.test.ts         |   3 +-
 test/unit/pnpm-package-panel.nuxt.test.ts     |   2 +-
 ...tail-duplicate-canonical-path.nuxt.test.ts |   4 +-
 .../skill-detail-howto-schema.nuxt.test.ts    |   4 +-
 test/unit/skill-detail-payload.test.ts        |  32 +++++
 test/unit/weekly-template.test.ts             |  15 +-
 18 files changed, 289 insertions(+), 75 deletions(-)
 create mode 100644 layers/marketing/app/utils/framework-directory.ts
 create mode 100644 layers/registry/app/utils/skill-detail-payload.ts
 create mode 100644 test/unit/skill-detail-payload.test.ts

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index b40b36ee..78947b6f 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -875,6 +875,25 @@
   content: none;
 }
 
+/* Shared GitHub token palette. Persisted inline colours remain supported. */
+.shj-kwd { color: #cf222e; --shiki-dark: #ff7b72; }
+.shj-oper { color: #cf222e; --shiki-dark: #ff7b72; }
+.shj-err { color: #82071e; --shiki-dark: #ffa198; }
+.shj-deleted { color: #82071e; --shiki-dark: #ffa198; }
+.shj-class { color: #953800; --shiki-dark: #ffa657; }
+.shj-cmnt { color: #6e7781; --shiki-dark: #8b949e; }
+.shj-bracket { color: #57606a; --shiki-dark: #8b949e; }
+.shj-num { color: #0550ae; --shiki-dark: #79c0ff; }
+.shj-bool { color: #0550ae; --shiki-dark: #79c0ff; }
+.shj-type { color: #0550ae; --shiki-dark: #79c0ff; }
+.shj-section { color: #0550ae; --shiki-dark: #79c0ff; }
+.shj-var { color: #0550ae; --shiki-dark: #79c0ff; }
+.shj-str { color: #0a3069; --shiki-dark: #a5d6ff; }
+.shj-func { color: #8250df; --shiki-dark: #d2a8ff; }
+.shj-insert { color: #116329; --shiki-dark: #7ee787; }
+.shj-esc { color: #1f2328; --shiki-dark: #e6edf3; }
+.dark :is(.shj-esc, .shj-kwd, .shj-oper, .shj-err, .shj-deleted, .shj-class, .shj-cmnt, .shj-bracket, .shj-num, .shj-bool, .shj-type, .shj-section, .shj-var, .shj-str, .shj-func, .shj-insert) { color: var(--shiki-dark); }
+
 /* Highlighted code (rangi). The light colour is inlined on each token and the
    dark one rides along as `--shiki-dark`, so dark mode has to win over an
    inline style. */
@@ -1235,3 +1254,35 @@
   opacity: 0.28;
   pointer-events: none;
 }
+
+
+/* The email preview shares one card across both colour modes. */
+.weekly-preview {
+  --email-page: #f5f4f2;
+  --email-surface: #ffffff;
+  --email-border: #e7e5e4;
+  --email-borderStrong: #d6d3d1;
+  --email-text: #1c1917;
+  --email-body: #44403c;
+  --email-muted: #6b625c;
+  --email-faint: #6b625c;
+  --email-accent: #be123c;
+  --email-onAccent: #ffffff;
+  --email-quote: #fafaf9;
+  --email-mark: #fb7185;
+}
+
+.dark .weekly-preview {
+  --email-page: #14110d;
+  --email-surface: #1c1917;
+  --email-border: #3a342c;
+  --email-borderStrong: #4d453b;
+  --email-text: #ede9e4;
+  --email-body: #cdc6bd;
+  --email-muted: #9c9389;
+  --email-faint: #7a726a;
+  --email-accent: #fb7185;
+  --email-onAccent: #1c1917;
+  --email-quote: #211d18;
+  --email-mark: #fb7185;
+}
diff --git a/app/components/WeeklyEmailPreview.vue b/app/components/WeeklyEmailPreview.vue
index 44674816..50d186fa 100644
--- a/app/components/WeeklyEmailPreview.vue
+++ b/app/components/WeeklyEmailPreview.vue
@@ -11,20 +11,16 @@ import type { DigestDemoResponse } from '#layers/identity/server/api/digest/demo
 // Only the card and its row count reach the payload. The answer also carries
 // the whole email as `html`, which this preview never renders.
 const { data: demo } = await useFetch('/api/digest/demo', {
-  key: 'home-digest-demo-v1',
+  key: 'home-digest-demo-v2',
   transform: ({ card, rowCount }: DigestDemoResponse) => ({ card, rowCount }),
 })
 
 const hasDemo = computed(() => !!demo.value?.card && (demo.value?.rowCount ?? 0) > 0)
 
 /**
- * The preview follows the page's colour mode. Both cards ship in the payload,
- * so switching themes costs no request.
+ * CSS changes the card's palette. Switching themes costs no request.
  */
-const colorMode = useColorMode()
-const card = computed(() =>
-  colorMode.value === 'dark' ? demo.value?.card.dark : demo.value?.card.light,
-)
+const card = computed(() => demo.value?.card)
 </script>
 
 <template>
@@ -38,7 +34,7 @@ const card = computed(() =>
     <p class="data-label">
       Example Skill updates · real commits
     </p>
-    <div class="home-weekly-frame" aria-hidden="true" inert>
+    <div class="weekly-preview home-weekly-frame" aria-hidden="true" inert>
       <!-- eslint-disable-next-line vue/no-v-html -->
       <div class="home-weekly-card" v-html="card" />
     </div>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index d70f3e79..3be7c33e 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -79,9 +79,11 @@ const [
 ] = await Promise.all([
   withHomeDataTiming('home-updates', useFetch<RecentUpdatesResponse>('/api/feed/recent-updates', {
     key: 'home-recent-updates-v2',
+    transform: feed => ({ ...feed, items: feed.items.slice(0, 5) }),
   })),
   withHomeDataTiming('home-publishes', useFetch<RecentPublishesResponse>('/api/feed/recent-publishes', {
     key: 'home-recent-publishes-v2',
+    transform: feed => ({ ...feed, items: feed.items.slice(0, 5) }),
   })),
   // Server-rendered rather than lazy: the section is one of the few places on
   // the homepage whose content changes hourly, and the endpoint is cached at
diff --git a/layers/identity/server/api/digest/demo.get.ts b/layers/identity/server/api/digest/demo.get.ts
index 3f984f68..feb79048 100644
--- a/layers/identity/server/api/digest/demo.get.ts
+++ b/layers/identity/server/api/digest/demo.get.ts
@@ -5,11 +5,11 @@ import {
   publicDigestSkillSchema,
   publicDigestUpdatesSchema,
 } from '../../utils/public-digest'
-import { renderWeekly } from '../../utils/weekly-template'
+import { renderWeekly, renderWeeklyPreview } from '../../utils/weekly-template'
 
 /** A sample watch list built from real public changes, never personal subscriptions. */
 export interface DigestDemoResponse {
-  card: { light: string, dark: string }
+  card: string
   html: string
   subject: string
   windowEnd: number
@@ -49,10 +49,23 @@ export default defineCachedEventHandler(defineApiHandler({ handler: async () =>
   })
   const light = render('light')
   return {
-    card: { light: light.card, dark: render('dark').card },
+    card: renderWeeklyPreview({
+      edition: 'digest',
+      changeSource: 'watches',
+      login: null,
+      windowStart,
+      windowEnd,
+      likedChanges: changes,
+      likedOverflow: 0,
+      trackedCount: changes.length,
+      trending: [],
+      siteUrl: 'https://skilld.dev',
+      settingsUrl: 'https://skilld.dev/me',
+      unsubscribeUrl: 'https://skilld.dev/me',
+    }),
     html: light.html,
     subject: light.subject,
     windowEnd,
     rowCount: changes.length,
   }
-} }), { maxAge: 3600, swr: true, name: 'public-digest-demo-v4' })
+} }), { maxAge: 3600, swr: true, name: 'public-digest-demo-v5' })
diff --git a/layers/identity/server/utils/weekly-template.ts b/layers/identity/server/utils/weekly-template.ts
index ef2c7c7f..a7b4b4c8 100644
--- a/layers/identity/server/utils/weekly-template.ts
+++ b/layers/identity/server/utils/weekly-template.ts
@@ -76,6 +76,12 @@ const PALETTE: Record<WeeklyTheme, Tokens> = {
   },
 }
 
+/** One theme-aware card for the website. Email keeps its fixed inline colours. */
+export function renderWeeklyPreview(input: WeeklyRenderInput): string {
+  const tokens = Object.fromEntries(Object.keys(PALETTE.light).map(key => [key, `var(--email-${key})`])) as unknown as Tokens
+  return renderWeekly(input, tokens).card.replace(/>\s+</g, '><')
+}
+
 const SANS = `'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif`
 const MONO = `'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace`
 /**
@@ -698,9 +704,9 @@ function trackedLine(count: number): string {
   return `${count} ${plural(count, 'Skill', 'Skills')} tracked, no updates this week`
 }
 
-export function renderWeekly(input: WeeklyRenderInput): WeeklyRender {
+export function renderWeekly(input: WeeklyRenderInput, tokens?: Tokens): WeeklyRender {
   input = { ...input, trending: input.trending.slice(0, MAX_WEEKLY_TRENDING) }
-  const t = PALETTE[input.theme ?? 'light']
+  const t = tokens ?? PALETTE[input.theme ?? 'light']
   const now = input.windowEnd
   const window = formatWindow(input.windowStart, input.windowEnd)
   const subject = subjectFor(input)
diff --git a/layers/marketing/app/components/FrameworkSkillsDirectory.vue b/layers/marketing/app/components/FrameworkSkillsDirectory.vue
index 166cae6d..e63be386 100644
--- a/layers/marketing/app/components/FrameworkSkillsDirectory.vue
+++ b/layers/marketing/app/components/FrameworkSkillsDirectory.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { TagProfile } from '#layers/registry/server/api/tags/[slug].get'
+import type { FrameworkDirectoryProfile } from '../utils/framework-directory'
 
 type FrameworkDirectoryView
   = | { _tag: 'loading' }
     | { _tag: 'error' }
     | { _tag: 'empty' }
-    | { _tag: 'ready', data: TagProfile }
+    | { _tag: 'ready', data: FrameworkDirectoryProfile }
 
 const {
   data,
@@ -20,7 +20,7 @@ const {
   websiteLabel,
   syncedAgo,
 } = defineProps<{
-  data?: TagProfile | null
+  data?: FrameworkDirectoryProfile | null
   status: 'idle' | 'pending' | 'success' | 'error'
   error?: unknown
   framework: string
diff --git a/layers/marketing/app/pages/frameworks/react.vue b/layers/marketing/app/pages/frameworks/react.vue
index 28b35533..3f510cfe 100644
--- a/layers/marketing/app/pages/frameworks/react.vue
+++ b/layers/marketing/app/pages/frameworks/react.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import type { TagProfile } from '#layers/registry/server/api/tags/[slug].get'
 import FrameworkSkillsDirectory from '../../components/FrameworkSkillsDirectory.vue'
+import { frameworkDirectory } from '../../utils/framework-directory'
 
 const { isBot } = useBotDetection()
-const { data, status, error, refresh } = useFetch<TagProfile>(
+const { data, status, error, refresh } = useFetch(
   () => '/api/tags/react?view=data',
-  { key: 'tag-react', lazy: !isBot.value },
+  { key: 'tag-react', lazy: !isBot.value, transform: (profile: TagProfile) => frameworkDirectory(profile) },
 )
 
 const siteOrigin = 'https://skilld.dev'
diff --git a/layers/marketing/app/utils/framework-directory.ts b/layers/marketing/app/utils/framework-directory.ts
new file mode 100644
index 00000000..d5d6e16e
--- /dev/null
+++ b/layers/marketing/app/utils/framework-directory.ts
@@ -0,0 +1,22 @@
+import type { TagProfile } from '#layers/registry/server/api/tags/[slug].get'
+
+export type FrameworkDirectoryProfile = Omit<TagProfile, 'skills'> & {
+  skills: Pick<TagProfile['skills'][number], 'owner' | 'repo' | 'name' | 'slug' | 'registryPath' | 'description' | 'stars' | 'authorName'>[]
+}
+
+/** The directory keeps every result and only the fields its cards read. */
+export function frameworkDirectory(profile: TagProfile): FrameworkDirectoryProfile {
+  return {
+    ...profile,
+    skills: profile.skills.map(({ owner, repo, name, slug, registryPath, description, stars, authorName }) => ({
+      owner,
+      repo,
+      name,
+      slug,
+      registryPath,
+      description,
+      stars,
+      authorName,
+    })),
+  }
+}
diff --git a/layers/registry/app/components/SkillDetail.vue b/layers/registry/app/components/SkillDetail.vue
index 45f7942f..a2c7d505 100644
--- a/layers/registry/app/components/SkillDetail.vue
+++ b/layers/registry/app/components/SkillDetail.vue
@@ -16,8 +16,8 @@ import { avatarProxyUrl, githubAvatarProxyUrl } from '#shared/image-proxy'
 import { skillPageUrl as exactSkillPageUrl, skillInstallCmd, skillRunCmd, skillRunPrompt } from '#shared/skill-commands'
 import { headlineTrendingAward, trendingAwardBadgeLabel, trendingAwardLabel, trendingAwardPath } from '#shared/trending-award'
 import { behaviorIcon } from '../utils/skill-behaviors'
-import { resolveSkillContextChecks } from '../utils/skill-context-checks'
 import { formatByteSize, formatTokenCount, resolveSkillContextCost, resolveSkillFileContext } from '../utils/skill-context-cost'
+import { skillDetailPayload } from '../utils/skill-detail-payload'
 import { fileIcon, highlightLangFromPath } from '../utils/skill-file-tree'
 import { partitionMetadataEntries } from '../utils/skill-metadata'
 import { resolveSkillPageState } from '../utils/skill-page-state'
@@ -168,13 +168,7 @@ interface MissingSkillSearchResponse {
   total: number
 }
 
-const skillFetch = useFetch(
-  () => `/api/skills/${slug.value}`,
-  {
-    watch: [slug],
-    immediate: true,
-  },
-) as ReturnType<typeof useFetch<{
+interface SkillDetailResponse {
   contentHtml: string | null
   frontmatter: Record<string, unknown> | null
   raw: string | null
@@ -256,7 +250,18 @@ const skillFetch = useFetch(
     isCanonical: boolean
     siblings: DuplicateSkill[]
   } | null
-}>>
+}
+
+type SkillDetailPayload = ReturnType<typeof skillDetailPayload<SkillDetailResponse>>
+
+const skillFetch = useFetch(
+  () => `/api/skills/${slug.value}`,
+  {
+    watch: [slug],
+    immediate: true,
+    transform: (detail: SkillDetailResponse) => skillDetailPayload(detail),
+  },
+) as ReturnType<typeof useFetch<SkillDetailPayload>>
 
 interface SkillRelatedResponse {
   commits: SkillCommit[]
@@ -355,6 +360,40 @@ if (import.meta.server)
   await Promise.all([skillFetch, liveSkillFetch, runFlagFetch, ...(initialFileFetch ? [initialFileFetch] : [])])
 
 const { data, status, error, refresh } = skillFetch
+const rootSource = shallowRef<{ slug: string, sha: string | null, html: string | null, raw: string | null } | null>(null)
+const rootRaw = computed(() => data.value?.raw ?? (
+  rootSource.value?.slug === slug.value
+  && rootSource.value.sha === data.value?.sourceFacts.source.currentSha
+  && rootSource.value.html === data.value?.contentHtml
+    ? rootSource.value.raw
+    : null
+))
+let sourceRequest: { slug: string, promise: Promise<string | null> } | null = null
+
+function loadRootRaw(): Promise<string | null> {
+  if (rootRaw.value || !data.value?.sourceView.hasRaw)
+    return Promise.resolve(rootRaw.value)
+  if (sourceRequest?.slug === slug.value)
+    return sourceRequest.promise
+  const requestedSlug = slug.value
+  const promise = $fetch<SkillDetailResponse>(`/api/skills/${requestedSlug}`).then((detail) => {
+    if (slug.value !== requestedSlug)
+      return null
+    // Replace the rendered content and metadata together if the source changed.
+    data.value = skillDetailPayload(detail)
+    rootSource.value = { slug: requestedSlug, sha: detail.sourceFacts.source.currentSha, html: detail.contentHtml, raw: detail.raw }
+    if (!detail.raw)
+      throw new Error('SKILL.md not found in source repository')
+    if (docLoadError.value?.path === 'SKILL.md')
+      docLoadError.value = null
+    return detail.raw
+  }).finally(() => {
+    if (sourceRequest?.promise === promise)
+      sourceRequest = null
+  })
+  sourceRequest = { slug: requestedSlug, promise }
+  return promise
+}
 
 interface StarHistoryResponse {
   starHistory: { _tag: 'ready', approximate: boolean, points: { at: number, value: number }[] } | { _tag: string }
@@ -541,19 +580,26 @@ function downloadSkillZip() {
     })
 }
 
-const contextCost = computed(() => data.value
-  ? resolveSkillContextCost({
-      raw: data.value.raw,
-      name: data.value.name,
-      description: data.value.description,
-      files: treeAssets.value,
-    })
-  : null)
+const contextCost = computed(() => {
+  if (!data.value)
+    return null
+  const cost = resolveSkillContextCost({
+    raw: rootRaw.value,
+    name: data.value.name,
+    description: data.value.description,
+    files: treeAssets.value,
+  })
+  if (!rootRaw.value) {
+    cost.totalBytes += data.value.sourceView.bytes
+    cost.tokens.instructions = data.value.sourceView.cost.tokens.instructions
+  }
+  return cost
+})
 
-const contextChecks = computed(() => resolveSkillContextChecks({
-  raw: data.value?.raw ?? null,
-  frontmatter: data.value?.frontmatter ?? null,
-}))
+const contextChecks = computed(() => data.value?.sourceView.checks ?? {
+  checks: [],
+  claudeListing: { _tag: 'unavailable' as const },
+})
 
 const audits = computed<SkillAudit[]>(() => liveSkill.value?.audits ?? [])
 const auditOverview = computed(() => resolveSkillAuditOverview(audits.value))
@@ -567,6 +613,14 @@ const AUDIT_TONE_CLASS = {
 } as const
 
 const { copy: copyMarkdown, copied: markdownCopied } = useClipboard()
+async function copyCurrentMarkdown() {
+  const raw = currentRaw.value ?? await loadRootRaw().catch((error: unknown) => {
+    docLoadError.value = { path: 'SKILL.md', message: error instanceof Error ? error.message : 'Failed to render markdown' }
+    return null
+  })
+  if (raw)
+    await copyMarkdown(raw)
+}
 
 const badgeInput = computed(() => data.value
   ? {
@@ -747,8 +801,10 @@ const { data: behaviorReadings } = useAsyncData<BehaviorReading[]>(
   () => `behavior-readings:${readingsBlob.value ?? 'none'}`,
   async () => {
     const blob = readingsBlob.value
-    const raw = data.value?.raw
-    if (!blob || !raw)
+    if (!blob)
+      return []
+    const raw = await loadRootRaw()
+    if (!raw || blob !== data.value?.sourceFacts.source.currentSha)
       return []
     const answer = await $fetch<BehaviorReadingsResponse>('/api/behavior-readings', { query: { blob } })
     return readingsForSkillMd(answer.items, raw)
@@ -792,7 +848,8 @@ const activeDocPath = ref<string>(initialFile ? props.file! : '')
 const subDocHtml = ref<string | null>(initialFile && initialFileIsMarkdown ? initialFile.html : null)
 const subDocRaw = ref<string | null>(initialFile?.raw ?? null)
 const currentDocLabel = computed(() => activeDocPath.value || 'SKILL.md')
-const currentRaw = computed(() => subDocRaw.value ?? data.value?.raw ?? null)
+const currentRaw = computed(() => subDocRaw.value ?? rootRaw.value)
+const hasCurrentRaw = computed(() => !!subDocRaw.value || !!data.value?.sourceView.hasRaw)
 const rawSourceUrl = computed(() => resolveSkillRawUrl({
   rootUrl: `/api/skills-raw/${slug.value}`,
   skillFileUrl: skillFileUrl.value || null,
@@ -958,12 +1015,18 @@ watch([contentView, currentRaw], ([view, raw], previous) => {
     rawPlain.value = null
     rawError.value = null
   }
-  if (!import.meta.client || view !== 'markdown' || !raw || rawHtml.value || rawPlain.value)
+  if (!import.meta.client || view !== 'markdown' || rawHtml.value || rawPlain.value)
+    return
+  if (raw) {
+    renderRaw(raw)
     return
-  renderRaw(raw)
+  }
+  loadRootRaw().catch((error: unknown) => {
+    rawError.value = error instanceof Error ? error.message : 'Failed to render markdown'
+  })
 }, { immediate: true })
 
-const skillMdBytes = computed(() => data.value?.raw ? new TextEncoder().encode(data.value.raw).byteLength : 0)
+const skillMdBytes = computed(() => data.value?.sourceView.bytes ?? 0)
 const viewerCrumbs = computed(() => currentDocLabel.value.split('/'))
 
 // What the open file costs the Agent's context, shown beside the file itself.
@@ -2139,11 +2202,11 @@ useHead(computed(() => ({
                 <span class="sr-only sm:not-sr-only">source</span>
               </button>
               <button
-                v-if="currentRaw"
+                v-if="hasCurrentRaw"
                 type="button"
                 class="skill-viewer-action inline-flex"
                 :aria-label="markdownCopied ? `${currentDocLabel} copied` : `Copy ${currentDocLabel}`"
-                @click="copyMarkdown(currentRaw)"
+                @click="copyCurrentMarkdown"
               >
                 <UIcon
                   :name="markdownCopied ? 'i-lucide-check' : 'i-lucide-copy'"
@@ -2153,7 +2216,7 @@ useHead(computed(() => ({
                 <span class="hidden sm:inline">{{ markdownCopied ? 'copied' : 'copy' }}</span>
               </button>
               <a
-                v-if="currentRaw && !data.sourceGone"
+                v-if="hasCurrentRaw && !data.sourceGone"
                 :href="rawSourceUrl"
                 target="_blank"
                 rel="noopener"
@@ -2230,7 +2293,7 @@ useHead(computed(() => ({
                 </span>
               </p>
               <SkillContextChecks
-                v-if="viewerContext?._tag === 'skill' && data?.raw"
+                v-if="viewerContext?._tag === 'skill' && data?.sourceView.hasRaw"
                 :result="contextChecks"
               />
               <section
@@ -2323,7 +2386,7 @@ useHead(computed(() => ({
                       color="neutral"
                       variant="outline"
                       class="mt-3"
-                      @click="() => { if (currentRaw) renderRaw(currentRaw) }"
+                      @click="() => { if (currentRaw) renderRaw(currentRaw); else loadRootRaw().catch(error => { rawError = error.message }) }"
                     />
                   </div>
                 </div>
@@ -2357,7 +2420,7 @@ useHead(computed(() => ({
             role="region"
           >
             <SkillBehaviors
-              v-if="data.raw || behaviors.length"
+              v-if="data.sourceView.hasRaw || behaviors.length"
               :behaviors="data.sourceFacts.behaviors ?? null"
               :readings="behaviorReadings"
             />
diff --git a/layers/registry/app/utils/skill-detail-payload.ts b/layers/registry/app/utils/skill-detail-payload.ts
new file mode 100644
index 00000000..7d6a1784
--- /dev/null
+++ b/layers/registry/app/utils/skill-detail-payload.ts
@@ -0,0 +1,25 @@
+import { resolveSkillContextChecks } from './skill-context-checks'
+import { resolveSkillContextCost } from './skill-context-cost'
+
+interface SourceDetail {
+  raw: string | null
+  frontmatter: Record<string, unknown> | null
+  name: string
+  description: string | null
+  sourceGone: boolean
+  assets: { path: string, size: number, type: 'markdown' | 'code' | 'image' | 'data' | 'other' }[]
+}
+
+/** Preserve source summaries in SSR. Fetch live source only when a control needs it. */
+export function skillDetailPayload<T extends SourceDetail>(detail: T) {
+  return {
+    ...detail,
+    raw: detail.sourceGone ? detail.raw : null,
+    sourceView: {
+      hasRaw: !!detail.raw,
+      bytes: new TextEncoder().encode(detail.raw ?? '').byteLength,
+      cost: resolveSkillContextCost({ ...detail, files: detail.assets }),
+      checks: resolveSkillContextChecks(detail),
+    },
+  }
+}
diff --git a/layers/registry/server/utils/skill-md-render.spec.ts b/layers/registry/server/utils/skill-md-render.spec.ts
index 9eaed43c..288c2b4b 100644
--- a/layers/registry/server/utils/skill-md-render.spec.ts
+++ b/layers/registry/server/utils/skill-md-render.spec.ts
@@ -69,9 +69,8 @@ license: MIT
     ].join('\n'))
 
     expect(html).toContain('class="rangi shiki shj-lang-bash"')
-    // The light colour is inlined and the dark one rides along as a variable,
-    // so one block serves both themes.
-    expect(html).toMatch(/style="color:#[0-9a-f]{3,8};--shiki-dark:#[0-9a-f]{3,8}"/i)
+    expect(html).toMatch(/class="shj-[a-z]+"/)
+    expect(html).not.toContain('--shiki-dark:')
   })
 
   it('resolves fence aliases onto their canonical grammar', async () => {
diff --git a/shared/highlight.ts b/shared/highlight.ts
index 525fe649..83f9a581 100644
--- a/shared/highlight.ts
+++ b/shared/highlight.ts
@@ -1,18 +1,13 @@
-import type { ShjTheme, ShjToken, ShjTokenized } from 'rangi'
+import type { ShjTokenized } from 'rangi'
 import { tokenize } from 'rangi'
 import { aliases, languages } from 'rangi/languages'
-import { githubDark, githubLight } from 'rangi/themes'
 
 // rangi ships every grammar it knows in ~13 KB min+gzip and tokenizes
 // synchronously, so there is no highlighter to construct, no WASM engine to
 // instantiate under workerd, and no per-language chunk to load. Highlighting is
 // a pure function from (code, lang) to markup.
 //
-// The markup matches what `comark/plugins/rangi` emits for Learn content: the
-// light colour is inlined and the dark one rides along as `--shiki-dark`, so a
-// single stylesheet rule covers every highlighted block on the site.
-
-const THEME = { light: githubLight, dark: githubDark } satisfies Record<'light' | 'dark', ShjTheme>
+// Token colours live in main.css. Each token carries its class once.
 
 // Fragment grammars are reached only through another grammar's `sub`; they are
 // never a fence language. `plain`/`text`/`txt` stay unresolved on purpose so an
@@ -73,16 +68,11 @@ export function escapeHtml(s: string): string {
   return s.replace(HTML_ESCAPE_RE, c => HTML_ESCAPE[c]!)
 }
 
-function tokenColor(theme: ShjTheme, type: ShjToken): string {
-  return theme.tokens[type] ?? theme.fg
-}
-
 function renderToken(token: ShjTokenized): string {
   const text = escapeHtml(token.text)
   if (!token.type)
     return text
-  const style = `color:${tokenColor(THEME.light, token.type)};--shiki-dark:${tokenColor(THEME.dark, token.type)}`
-  return `<span class="shj-${token.type}" style="${style}">${text}</span>`
+  return `<span class="shj-${token.type}">${text}</span>`
 }
 
 /**
diff --git a/test/unit/highlight-code-body.test.ts b/test/unit/highlight-code-body.test.ts
index 577fb37b..0edb4d81 100644
--- a/test/unit/highlight-code-body.test.ts
+++ b/test/unit/highlight-code-body.test.ts
@@ -10,7 +10,8 @@ describe('highlightCodeBody', () => {
 
   it('colours the badge snippet and keeps its text', () => {
     const html = highlightCodeBody(snippet, 'html')
-    expect(html).toContain('--shiki-dark:')
+    expect(html).toContain('class="shj-')
+    expect(html).not.toContain('style=')
     expect(decode(stripTags(html))).toBe(snippet)
   })
 
diff --git a/test/unit/pnpm-package-panel.nuxt.test.ts b/test/unit/pnpm-package-panel.nuxt.test.ts
index 32a49542..97dcdfda 100644
--- a/test/unit/pnpm-package-panel.nuxt.test.ts
+++ b/test/unit/pnpm-package-panel.nuxt.test.ts
@@ -46,7 +46,7 @@ describe('npm package install option', () => {
   it('shows package approval and switches to skills-npm setup', async () => {
     const wrapper = await mountSuspended(SkillPnpmPackage, { props: { published } })
     expect(wrapper.find('code').text()).toBe('pnpm add @acme/kit@1.2.3')
-    expect(wrapper.find('code span[style]').exists()).toBe(true)
+    expect(wrapper.find('code span[class^="shj-"]').exists()).toBe(true)
     expect(wrapper.text()).toContain('Approval covers every Skill and later version of the package.')
     expect(wrapper.find('a').attributes('href')).toBe('https://www.npmjs.com/package/@acme/kit/v/1.2.3')
     await wrapper.findAll('button').find(button => button.text() === 'skills-npm')!.trigger('click')
diff --git a/test/unit/skill-detail-duplicate-canonical-path.nuxt.test.ts b/test/unit/skill-detail-duplicate-canonical-path.nuxt.test.ts
index 579c17c0..7b719835 100644
--- a/test/unit/skill-detail-duplicate-canonical-path.nuxt.test.ts
+++ b/test/unit/skill-detail-duplicate-canonical-path.nuxt.test.ts
@@ -14,11 +14,11 @@ mockNuxtImport('useRoute', () => () => route)
 mockNuxtImport('navigateTo', () => navigateToMock)
 vi.stubGlobal('defineOgImage', () => {})
 mockNuxtImport('useSchemaOrg', () => () => {})
-mockNuxtImport('useFetch', () => (url: unknown) => {
+mockNuxtImport('useFetch', () => (url: unknown, options?: { transform?: (value: unknown) => unknown }) => {
   const key = typeof url === 'function' ? url() : url
 
   if (typeof key === 'string' && key.startsWith('/api/skills/'))
-    return { data: ref(skillPayload()), status: ref('success'), error: ref(null), refresh: vi.fn() }
+    return { data: ref(options?.transform ? options.transform(skillPayload()) : skillPayload()), status: ref('success'), error: ref(null), refresh: vi.fn() }
   return { data: ref(null), status: ref('success'), error: ref(null), refresh: vi.fn() }
 })
 
diff --git a/test/unit/skill-detail-howto-schema.nuxt.test.ts b/test/unit/skill-detail-howto-schema.nuxt.test.ts
index 32f196ca..eef262a7 100644
--- a/test/unit/skill-detail-howto-schema.nuxt.test.ts
+++ b/test/unit/skill-detail-howto-schema.nuxt.test.ts
@@ -28,11 +28,11 @@ vi.stubGlobal('defineOgImage', () => {})
 mockNuxtImport('useSchemaOrg', () => (nodes: unknown) => {
   schemaNodes.current = nodes
 })
-mockNuxtImport('useFetch', () => (url: unknown) => {
+mockNuxtImport('useFetch', () => (url: unknown, options?: { transform?: (value: unknown) => unknown }) => {
   const key = typeof url === 'function' ? url() : url
 
   if (typeof key === 'string' && key.startsWith('/api/skills/'))
-    return { data: ref(payload), status: ref('success'), error: ref(null), refresh: vi.fn() }
+    return { data: ref(options?.transform ? options.transform(payload) : payload), status: ref('success'), error: ref(null), refresh: vi.fn() }
   return { data: ref(null), status: ref('success'), error: ref(null), refresh: vi.fn() }
 })
 
diff --git a/test/unit/skill-detail-payload.test.ts b/test/unit/skill-detail-payload.test.ts
new file mode 100644
index 00000000..1147ce71
--- /dev/null
+++ b/test/unit/skill-detail-payload.test.ts
@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+import { resolveSkillContextChecks } from '../../layers/registry/app/utils/skill-context-checks'
+import { resolveSkillContextCost } from '../../layers/registry/app/utils/skill-context-cost'
+import { skillDetailPayload } from '../../layers/registry/app/utils/skill-detail-payload'
+
+const detail = {
+  raw: '---\nname: chrome\ndescription: Browser rules.\n---\n# Chrome\nRead before running. é',
+  frontmatter: { name: 'chrome', description: 'Browser rules.' },
+  name: 'chrome',
+  description: 'Browser rules.',
+  sourceGone: false,
+  assets: [{ path: 'references/browser.md', size: 2048, type: 'markdown' as const }],
+  contentHtml: '<h1>Chrome</h1><p>Read before running. é</p>',
+}
+
+describe('skill detail payload', () => {
+  it('keeps rendered content, source controls and exact summaries without duplicate Markdown', () => {
+    const result = skillDetailPayload(detail)
+    expect(result.raw).toBeNull()
+    expect(result.contentHtml).toBe(detail.contentHtml)
+    expect(result.sourceView).toEqual({
+      hasRaw: true,
+      bytes: new TextEncoder().encode(detail.raw).byteLength,
+      cost: resolveSkillContextCost({ ...detail, files: detail.assets }),
+      checks: resolveSkillContextChecks(detail),
+    })
+  })
+
+  it('keeps the saved source when GitHub no longer has the Skill', () => {
+    expect(skillDetailPayload({ ...detail, sourceGone: true }).raw).toBe(detail.raw)
+  })
+})
diff --git a/test/unit/weekly-template.test.ts b/test/unit/weekly-template.test.ts
index 2db91ef6..88441176 100644
--- a/test/unit/weekly-template.test.ts
+++ b/test/unit/weekly-template.test.ts
@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 import type { WeeklyRenderInput, WeeklyTrendingSkill } from '../../layers/identity/server/utils/weekly-template'
 import { describe, expect, it } from 'vitest'
-import { formatWindow, renderWeekly } from '../../layers/identity/server/utils/weekly-template'
+import { formatWindow, renderWeekly, renderWeeklyPreview } from '../../layers/identity/server/utils/weekly-template'
 import { SPARK_BARS } from '../../shared/braille-spark'
 
 const WINDOW_END = 1_755_648_000
@@ -40,6 +40,19 @@ function trending(overrides: Partial<WeeklyTrendingSkill> = {}): WeeklyTrendingS
 }
 
 describe('weekly template', () => {
+  it('keeps preview content and links while email retains inline colours', () => {
+    const source = input({ trending: [trending()] })
+    const email = renderWeekly(source).card
+    const preview = renderWeeklyPreview(source)
+    const emailElement = document.createElement('div')
+    const previewElement = document.createElement('div')
+    emailElement.innerHTML = email
+    previewElement.innerHTML = preview
+    expect(previewElement.textContent?.replace(/\s+/g, '')).toBe(emailElement.textContent?.replace(/\s+/g, ''))
+    expect([...previewElement.querySelectorAll('a')].map(a => a.href)).toEqual([...emailElement.querySelectorAll('a')].map(a => a.href))
+    expect(preview).toContain('var(--email-')
+    expect(email).not.toContain('var(--email-')
+  })
   it('states the star count once for a star-only row', () => {
     const { html, text } = renderWeekly(input({
       trending: [trending({ reason: { _tag: 'popular', stars: 46_712 }, stars: 46_712 })],