refactor: 共享 FastUI 组件与 Harness JSONL 传输

.gitattributes

@@ -0,0 +1,2 @@
+# Resource composition hashes commit exact Markdown bytes across platforms.
+packages/resources/pages/*.md text eol=lf

.github/workflows/ci.yml

@@ -24,8 +24,16 @@ jobs:
           node-version: 24
           cache: pnpm
       - run: pnpm install --frozen-lockfile
+      - run: pnpm --filter @fastppt/fonts verify-fonts
       - run: pnpm --filter @fastppt/e2e exec playwright install --with-deps chromium
       - run: pnpm typecheck
       - run: pnpm lint
-      - run: pnpm test
-      - run: pnpm build
+      # Each package launches its own workers/Slidev builds on the shared runner.
+      - run: pnpm test --concurrency=2
+      - run: pnpm build --concurrency=2
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: browser-test-results
+          path: tests/e2e/test-results
+          if-no-files-found: ignore

.gitignore

@@ -20,8 +20,8 @@ task_plan.md
 /ppts/
 /decks/
 assets/
-!packages/components/src/assets/
-!packages/components/src/assets/fastppt-icon.svg
+!apps/web/src/components/ui/assets/
+!apps/web/src/components/ui/assets/fastppt-icon.svg
 
 # FastPPT workspace files
 .codex/
@@ -64,3 +64,11 @@ assets/
 /packages/resources/visual-comparison/*-progress.json
 
 !packages/animations/manifest.csv
+
+!packages/fonts/assets/
+packages/fonts/assets/*
+!packages/fonts/assets/fonts/
+packages/fonts/assets/fonts/*
+!packages/fonts/assets/fonts/*.ttf
+!packages/fonts/assets/licenses/
+!packages/fonts/assets/licenses/*.txt

README.md

@@ -35,6 +35,8 @@ FastPPT Web
 - 现代浏览器
 - Claude Code 或 Codex CLI（只使用对应 Agent 时需要）
 
+源码工作区的共享包从官方 npm registry 消费：`apps/web/package.json` 中的 `@fastrd/ui-foundation`、`@fastrd/ui-vue`，以及 `packages/harness-codex/package.json` 中的 `@fastrd/harness-transport` 均精确锁定 `0.1.2`。在仓库根目录执行 `pnpm install --frozen-lockfile --registry=https://registry.npmjs.org/`，统一使用根 `pnpm-lock.yaml`。更新锁前先用 `npm view <包名>@0.1.2 version dist --json --registry=https://registry.npmjs.org/` 确认版本、tarball 和 provenance；发布尚未可用时等待发布完成，不切换到 GitHub tarball。
+
 ### 安装 CLI
 
 全局安装：

apps/cli/tests/core.test.ts

@@ -262,7 +262,7 @@ describe('CLI core service integration', () => {
       revision: written.revision,
     })
     const installed = (await run(['skills', 'install'])) as {
-      statuses: Array<{ skillId: string; state: string }>
+      statuses: Array<{ skillId: string; kind: string; state: string }>
     }
     expect(
       installed.statuses.filter(
@@ -271,9 +271,11 @@ describe('CLI core service integration', () => {
           item.skillId === 'fastppt-ppt-generate',
       ),
     ).toHaveLength(4)
-    expect(installed.statuses.every((item) => item.state === 'installed')).toBe(
-      true,
-    )
+    for (const item of installed.statuses) {
+      expect(item, item.skillId).toMatchObject({
+        state: item.kind === 'theme' ? 'on-demand' : 'installed',
+      })
+    }
     expect(
       await readFile(
         join(workspaceRoot, '.agents/skills/fastppt/references/cli.md'),

apps/gateway/src/app.ts

@@ -1477,7 +1477,7 @@ export async function createGateway(
     // Script-free resource iframes have opaque origins. Their local webfonts
     // need CORS, so allow only immutable font reads from that sandbox origin.
     const sandboxFont = origin === 'null' && (request.method === 'GET' || request.method === 'HEAD')
-      && (/^\/api\/v1\/resources\/assets\/[a-f0-9]{24}\.woff2(?:\?|$)/.test(request.url) || /^\/api\/v1\/animations\/runtime\.js(?:\?|$)/.test(request.url))
+      && (/^\/api\/v1\/resources\/assets\/[a-f0-9]+\.woff2(?:\?|$)/.test(request.url) || /^\/api\/v1\/animations\/runtime\.js(?:\?|$)/.test(request.url))
     if (sandboxFont) return
     if (!origin || config.allowedWebOrigins.includes(origin)) return
     request.log.warn({ origin }, 'Rejected browser origin')

apps/gateway/tests/app.test.ts

@@ -879,10 +879,12 @@ describe('gateway', () => {
     expect(
       foreignLocalOrigin.headers['access-control-allow-origin'],
     ).toBeUndefined()
-    const fontPath = '/api/v1/resources/assets/000000000000000000000000.woff2'
-    expect((await app.inject({ method: 'GET', url: fontPath, headers: { origin: 'null' } })).statusCode).toBe(404)
-    for (const [method, url] of [['POST', fontPath], ['GET', '/api/v1/workspace'], ['GET', fontPath.replace('.woff2', '.png')]] as const)
-      expect((await app.inject({ method, url, headers: { origin: 'null' } })).statusCode).toBe(403)
+    for (const length of [24, 64]) {
+      const fontPath = `/api/v1/resources/assets/${'0'.repeat(length)}.woff2`
+      expect((await app.inject({ method: 'GET', url: fontPath, headers: { origin: 'null' } })).statusCode).toBe(404)
+      for (const [method, url] of [['POST', fontPath], ['GET', '/api/v1/workspace'], ['GET', fontPath.replace('.woff2', '.png')]] as const)
+        expect((await app.inject({ method, url, headers: { origin: 'null' } })).statusCode).toBe(403)
+    }
   })
 
   it('returns precise not-found errors for runs and browser inspections', async () => {
@@ -1926,10 +1928,9 @@ describe('gateway', () => {
     const fixtureThemes = createThemeFixture()
     const app = await makeApp(root, undefined, fixtureThemes)
     openApps.push(app)
-    const sample = resolve(
-      dirname(fileURLToPath(import.meta.url)),
-      '../../../references/pptx-renderer/docs/example/1-chart-and-complex/source.pptx',
-    )
+    const sample = join(root, 'source.pptx')
+    const { writeEditablePptx } = await import('@fastppt/slidewave/server')
+    await writeEditablePptx(exportSnapshot, sample, { embedFonts: false })
     const pptx = readFileSync(sample)
     const response = await app.inject({
       method: 'POST',
@@ -1940,7 +1941,7 @@ describe('gateway', () => {
         themeName: 'import-test',
       },
     })
-    expect(response.statusCode).toBe(200)
+    expect(response.statusCode, response.body).toBe(200)
     const result = ImportPptxThemeResultSchema.parse(response.json())
     expect(result.themeId).toBe('slidev-theme-import-test')
     expect(result.skillId).toBe('fastppt-theme-import-test')
@@ -2225,7 +2226,7 @@ describe('gateway', () => {
       components: expect.any(Array),
       message: expect.any(String),
     })
-  })
+  }, 30_000) // Writes, imports and approves a real PPTX, including registry reload.
 
   it('rejects non-PPTX theme imports before starting extraction', async () => {
     const root = mkdtempSync(join(tmpdir(), 'fastppt-import-invalid-'))

apps/web/package.json

@@ -26,7 +26,8 @@
     "zod": "catalog:",
     "@fastppt/markdown": "workspace:*",
     "markdown-it": "^14.3.0",
-    "@fastppt/components": "workspace:*"
+    "@fastrd/ui-vue": "0.1.2",
+    "@fastrd/ui-foundation": "0.1.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",

apps/web/src/color-mode.ts

@@ -0,0 +1,9 @@
+import { initColorMode } from '@fastrd/ui-foundation'
+import { computed, shallowRef } from 'vue'
+
+const controller = initColorMode({ storageKey: 'fastppt.color-mode' })
+const resolved = shallowRef(controller.resolved)
+const unsubscribe = controller.subscribe(state => { resolved.value = state.resolved })
+export const isDark = computed(() => resolved.value === 'dark')
+export const toggleColorMode = () => controller.setMode(isDark.value ? 'light' : 'dark')
+if (import.meta.hot) import.meta.hot.dispose(() => { unsubscribe(); controller.dispose() })

apps/web/src/components/AppErrorBoundary.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Box, Button, Heading, Panel, Text } from '@fastppt/components'
+import { Box, Button, Heading, Panel, Text } from '@fastrd/ui-vue'
 import { onErrorCaptured, ref } from 'vue'
 
 const failure = ref(false)

apps/web/src/components/editor/MarkdownEditor.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import {
-  useColorMode,
   Box,
   Button,
   Header,
   Panel,
   Text,
-} from '@fastppt/components'
+} from '@fastrd/ui-vue'
+import { isDark } from '../../color-mode.js'
 import { onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'
 import type { EditorView } from '@codemirror/view'
 
@@ -26,7 +26,6 @@ const emit = defineEmits<{
 }>()
 
 const editorElement = useTemplateRef<HTMLDivElement>('editorElement')
-const { isDark } = useColorMode()
 let editorView: EditorView | undefined
 let updateTheme: (() => void) | undefined
 

apps/web/src/components/files/FileTree.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Box } from '@fastppt/components'
+import { Box } from '@fastrd/ui-vue'
 import FileTreeNode from './FileTreeNode.vue'
 
 import type { FileNode } from '@fastppt/protocol'

apps/web/src/components/files/FileTreeNode.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Box, Button, Text } from '@fastppt/components'
+import { Box, Button, Text } from '@fastrd/ui-vue'
 import { computed, shallowRef } from 'vue'
 
 import type { FileNode } from '@fastppt/protocol'

apps/web/src/components/themes/ThemeCatalog.vue

@@ -6,6 +6,7 @@ import {
   Header,
   Heading,
   Link,
+  Modal,
   Panel,
   Svg,
   SvgPath,
@@ -16,8 +17,8 @@ import {
   TableHeader,
   TableRow,
   Text,
-} from '@fastppt/components'
-import { computed, onUnmounted, shallowRef } from 'vue'
+} from '@fastrd/ui-vue'
+import { computed, shallowRef } from 'vue'
 
 import { useGatewayClient } from '../../api/useGatewayClient.js'
 
@@ -71,12 +72,6 @@ async function openSkill(theme: DeepReadonly<ThemeSummary>): Promise<void> {
   }
 }
 
-function handleWindowKey(event: KeyboardEvent): void {
-  if (event.key === 'Escape') closeModal()
-}
-
-window.addEventListener('keydown', handleWindowKey)
-onUnmounted(() => window.removeEventListener('keydown', handleWindowKey))
 </script>
 
 <template>
@@ -166,85 +161,53 @@ onUnmounted(() => window.removeEventListener('keydown', handleWindowKey))
       </Table>
     </Box>
 
-    <Teleport to="body">
-      <Box
-        v-if="detailTheme || skillTheme"
-        class="modal-backdrop"
-        role="presentation"
-        @mousedown.self="closeModal"
-      >
-        <Panel
-          class="theme-modal"
-          role="dialog"
-          aria-modal="true"
-          :aria-labelledby="detailTheme ? 'theme-detail-title' : 'skill-title'"
+    <Modal
+      :open="Boolean(detailTheme || skillTheme)"
+      class="theme-modal"
+      :labelledby="detailTheme ? 'theme-detail-title' : 'skill-title'"
+      @close="closeModal"
+    >
+      <Header class="modal-header">
+        <Box v-if="detailTheme">
+          <Text class="eyebrow">Theme capabilities</Text>
+          <Heading id="theme-detail-title" as="h2">{{ detailTheme.displayName }}</Heading>
+          <Text as="p">{{ detailTheme.description }}</Text>
+        </Box>
+        <Box v-else-if="skillTheme">
+          <Text class="eyebrow">Agent skill source</Text>
+          <Heading id="skill-title" as="h2">{{ skillTheme.skillId }}</Heading>
+          <Text as="p">{{ skillTheme.skillVersion }} · SKILL.md</Text>
+        </Box>
+        <Button
+          variant="secondary"
+          class="close-button"
+          type="button"
+          aria-label="关闭弹窗"
+          @click="closeModal"
         >
-          <Header class="modal-header">
-            <Box v-if="detailTheme">
-              <Text class="eyebrow">Theme capabilities</Text>
-              <Heading id="theme-detail-title" as="h2">
-                {{
-                  detailTheme.displayName
-                }}
-              </Heading>
-              <Text as="p">{{ detailTheme.description }}</Text>
-            </Box>
-            <Box v-else-if="skillTheme">
-              <Text class="eyebrow">Agent skill source</Text>
-              <Heading id="skill-title" as="h2">
-                {{
-                  skillTheme.skillId
-                }}
-              </Heading>
-              <Text as="p">{{ skillTheme.skillVersion }} · SKILL.md</Text>
-            </Box>
-            <Button
-              variant="secondary"
-              class="close-button"
-              type="button"
-              aria-label="关闭弹窗"
-              @click="closeModal"
-            >
-              ×
-            </Button>
-          </Header>
+          ×
+        </Button>
+      </Header>
 
-          <Box v-if="detailTheme" class="modal-content feature-list">
-            <Article
-              v-for="feature in detailTheme.supportedFeatures"
-              :key="feature.id"
-            >
-              <Text as="strong">{{ feature.label }}</Text>
-              <Text as="code">{{ feature.id }}</Text>
-              <Text as="p">{{ feature.description }}</Text>
-            </Article>
-            <Panel class="layout-list">
-              <Text as="strong">可用布局</Text>
-              <Box>
-                <Text v-for="layout in detailTheme.layouts" :key="layout.id">
-                  {{ layout.label }}
-                </Text>
-              </Box>
-            </Panel>
-          </Box>
-          <Box v-else class="modal-content skill-source">
-            <Text v-if="skillLoading" as="p" class="catalog-state"
-            >
-              正在读取 SKILL.md…
-            </Text
-            >
-            <Text v-else-if="skillError" as="p" class="catalog-state error">
-              {{ skillError }}
-            </Text>
-            <Text v-else as="pre"
-            >
-              <Text as="code">{{ skillDocument?.content }}</Text>
-            </Text
-            >
+      <Box v-if="detailTheme" class="modal-content feature-list">
+        <Article v-for="feature in detailTheme.supportedFeatures" :key="feature.id">
+          <Text as="strong">{{ feature.label }}</Text>
+          <Text as="code">{{ feature.id }}</Text>
+          <Text as="p">{{ feature.description }}</Text>
+        </Article>
+        <Panel class="layout-list">
+          <Text as="strong">可用布局</Text>
+          <Box>
+            <Text v-for="layout in detailTheme.layouts" :key="layout.id">{{ layout.label }}</Text>
           </Box>
         </Panel>
       </Box>
-    </Teleport>
+      <Box v-else class="modal-content skill-source">
+        <Text v-if="skillLoading" as="p" class="catalog-state">正在读取 SKILL.md…</Text>
+        <Text v-else-if="skillError" as="p" class="catalog-state error">{{ skillError }}</Text>
+        <Text v-else as="pre"><Text as="code">{{ skillDocument?.content }}</Text></Text>
+      </Box>
+    </Modal>
   </Panel>
 </template>
 
@@ -380,33 +343,12 @@ code {
 .catalog-state.error {
   color: var(--color-danger);
 }
-.modal-backdrop {
-  position: fixed;
-  z-index: 1000;
-  inset: 0;
-  display: grid;
-  place-items: center;
-  padding: 24px;
-  background: var(--color-overlay);
-}
-.theme-modal {
+.theme-modal[open] {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
-  width: min(820px, 100%);
+  width: min(820px, calc(100vw - 48px));
   max-height: min(760px, calc(100dvh - 48px));
   overflow: hidden;
-  border: 1px solid var(--color-border-strong);
-  border-radius: 14px;
-  background: var(--color-panel-raised);
-  box-shadow: var(--shadow-modal);
-}
-.modal-header {
-  display: flex;
-  align-items: start;
-  justify-content: space-between;
-  gap: 24px;
-  padding: 20px 22px;
-  border-bottom: 1px solid var(--color-border);
 }
 .modal-header h2 {
   margin-top: 4px;