diff --git a/.changeset/forty-items-report.md b/.changeset/forty-items-report.md
new file mode 100644
index 00000000..a7b11165
--- /dev/null
+++ b/.changeset/forty-items-report.md
@@ -0,0 +1,7 @@
+---
+'@inkcre/ext-twitter': patch
+---
+
+Twitter 设置向导的步骤编号采用共同设计的直角轮廓，保持当前与已完成步骤的状态区分。
+
+向导宽度同时受宿主容器约束，避免窄屏弹层的内边距使内容和关闭按钮被裁剪。
diff --git a/.changeset/i4-graph-read-errors.md b/.changeset/i4-graph-read-errors.md
new file mode 100644
index 00000000..335831d3
--- /dev/null
+++ b/.changeset/i4-graph-read-errors.md
@@ -0,0 +1,5 @@
+---
+'@inkcre/core': patch
+---
+
+Block.find 传播数据库读取错误，避免 Graph 与 inspector 将读取失败误报为对象缺失。成功读取但没有匹配对象时仍返回 null。
diff --git a/.changeset/i4-graph.md b/.changeset/i4-graph.md
new file mode 100644
index 00000000..c4f59d80
--- /dev/null
+++ b/.changeset/i4-graph.md
@@ -0,0 +1,5 @@
+---
+'@inkcre/client-web': patch
+---
+
+重组 Graph 上下文、按需视图选项、节点与关系操作，移除重复表达焦点状态的 Current 标签，补齐键盘聚焦、可读的方向弱化和原地址错误重试。
diff --git a/.changeset/i4-mail.md b/.changeset/i4-mail.md
new file mode 100644
index 00000000..ac288e1d
--- /dev/null
+++ b/.changeset/i4-mail.md
@@ -0,0 +1,5 @@
+---
+'@inkcre/ext-mail': patch
+---
+
+重组邮件阅读、信头、附件与内嵌内容，统一文件下载条目和事实摘要；在保留 HTML 隔离的前提下提供基础排印。
diff --git a/.changeset/i4-twitter.md b/.changeset/i4-twitter.md
new file mode 100644
index 00000000..00eab29b
--- /dev/null
+++ b/.changeset/i4-twitter.md
@@ -0,0 +1,5 @@
+---
+'@inkcre/ext-twitter': patch
+---
+
+重组 Twitter 配置步骤与已配置摘要，将应用设置按需展开，保留授权等待、失败草稿、来源调度与明确启动的操作边界。
diff --git a/.changeset/jolly-times-fry.md b/.changeset/jolly-times-fry.md
new file mode 100644
index 00000000..7c209886
--- /dev/null
+++ b/.changeset/jolly-times-fry.md
@@ -0,0 +1,15 @@
+---
+'@inkcre/client-web': patch
+'@inkcre/ext-mail': patch
+'@inkcre/ext-twitter': patch
+'@inkcre/ext-dev-utils': patch
+'@inkcre/core': patch
+---
+
+迁移至正式 @inkcre/ui-web 2.0.0，统一 Vue 最低版本、Token 角色、按钮提交与加载态、JSON 草稿保存和日期确认行为；维护 Agent 从安装包读取同版本 DESIGN.md 与 Skill。
+
+Peer 保存现在传播数据库错误，配置保存失败时保留草稿与弹窗，阻止无效或尚在验证中的内容提交，并在持久化期间禁止重复操作。
+
+Host 与扩展共享 UI 运行时以继承 i18n、路由和表单上下文；Info-Base 浮层与 Mail 附件操作适应窄视口。
+
+移除普通业务容器的旧圆角，按正文／标题／元数据职责使用字体角色，调整 Sources、Extensions 和 Job 详情的布局以适应容器宽度。打开的 Text、HTML 文本和 Tweet 内容不再沿用摘要截断。
diff --git a/.changeset/quiet-sources-read.md b/.changeset/quiet-sources-read.md
new file mode 100644
index 00000000..4c967d68
--- /dev/null
+++ b/.changeset/quiet-sources-read.md
@@ -0,0 +1,13 @@
+---
+'@inkcre/client-web': patch
+'@inkcre/core': patch
+'@inkcre/ext-twitter': patch
+---
+
+来源列表集中展示名称、类型、ID 与当前采集入口；完整配置和删除集中到详情，创建来源与定时采集表单由明确动作打开。配置使用独立草稿，读取失败、schema 不可用、保存／删除等待和失败均有对应反馈，离开前保护未保存修改。
+
+Source、SourceType 和来源页使用的 Job／Cron 数据库边界传播请求错误，避免把失败显示成空结果或删除成功。普通任务状态与例行保存采用中性表达，失败与超时继续强调。
+
+Twitter 设置向导在来源切换读取失败时保留之前的来源与时间草稿，并显示错误，避免选项与实际采集目标不一致。
+
+Web 注册同版本 UI Uno preset，让已有语义反馈工具类实际生效；来源创建与任务配置弹层的宽度受视口和宿主容器共同约束。
diff --git a/.changeset/quiet-ui-patch.md b/.changeset/quiet-ui-patch.md
new file mode 100644
index 00000000..0cb51ee5
--- /dev/null
+++ b/.changeset/quiet-ui-patch.md
@@ -0,0 +1,10 @@
+---
+'@inkcre/client-web': patch
+'@inkcre/ext-mail': patch
+'@inkcre/ext-twitter': patch
+'@inkcre/ext-dev-utils': patch
+---
+
+升级正式 @inkcre/ui-web 至 2.0.1，采用更新的设计指南、字体与中性色彩，并修复默认 Header 菜单图标不可见的问题。Web 与两个 Module Federation 扩展使用同一精确 UI 版本，不添加本地主题覆盖或图标 safelist 补丁。
+
+侧栏宽度计入内边距与边框；移动端打开时覆盖主内容，避免裁切导航或将主内容挤成竖列。
diff --git a/.github/preview/extensions.json b/.github/preview/extensions.json
index e207b88e..d9e48f73 100644
--- a/.github/preview/extensions.json
+++ b/.github/preview/extensions.json
@@ -5,6 +5,11 @@
       "kind": "module_federation",
       "producer": "../../extensions/twitter/package.json",
       "artifact": "../../extensions/twitter/dist/client-web"
+    },
+    {
+      "kind": "module_federation",
+      "producer": "../../extensions/mail/package.json",
+      "artifact": "../../extensions/mail/dist/client-web"
     }
   ]
 }
diff --git a/AGENTS.md b/AGENTS.md
index ff0afdb3..4e3045e7 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -14,6 +14,10 @@ Reason in English. Communicate with humans in Chinese.
 - Physical-subtree hazards: the nearest local `AGENTS.md`.
 - Volatile work state: the active packet under `tasks/`.
 
+UI 工作先读取 `apps/client-web/node_modules/@inkcre/ui-web/DESIGN.md` 与 `skills/ui-web/SKILL.md`，按所用组件进入同版本参考和迁移说明。扩展单独工作时使用其自身 node_modules 中的同一版本。包拥有设计与 API 规则，本仓库拥有业务流程和布局；纯后端任务无需加载这些 UI 文档。
+
+当前 UI 2.0 迁移入口为 [task packet](tasks/ui-v2-migration/packet.md)。
+
 ## Working Protocol
 
 - Run `svc status . --json`, then use `svc lookup --keyword` and `svc lookup --path` only for guidance required by the current pressure.
diff --git a/apps/client-web/package.json b/apps/client-web/package.json
index 88013ef5..82f0b48f 100644
--- a/apps/client-web/package.json
+++ b/apps/client-web/package.json
@@ -11,26 +11,17 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^6.20.0",
-    "@codemirror/commands": "^6.10.0",
-    "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/lint": "^6.9.2",
-    "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.8",
     "@inkcre/core": "workspace:*",
     "@inkcre/extension-runtime-client-web": "https://github.com/InKCre/ext-reg/releases/download/runtime-client-web-v0.1.0/inkcre-extension-runtime-client-web-0.1.0.tgz",
-    "@inkcre/ui-web": "1.4.0",
+    "@inkcre/ui-web": "2.0.1",
     "@module-federation/runtime": "^0.21.4",
     "@supabase/postgrest-js": "^2.84.0",
-    "@vue-flow/background": "^1.3.2",
     "@vue-flow/core": "^1.48.1",
     "@vueuse/core": "^14.0.0",
     "dayjs": "^1.11.19",
     "jose": "^6.1.2",
     "pinia": "^3.0.3",
-    "vscode-json-languageservice": "^5.6.4",
-    "vscode-languageserver-textdocument": "^1.0.12",
-    "vue": "^3.5.18",
+    "vue": "^3.5.25",
     "vue-i18n": "^11.2.8",
     "vue-router": "^4.5.1",
     "zod": "^4.1.12",
@@ -56,5 +47,10 @@
     "vite": "^7.2.4",
     "vite-plugin-vue-devtools": "^8.0.0",
     "vue-tsc": "catalog:"
+  },
+  "intent": {
+    "skills": [
+      "@inkcre/ui-web"
+    ]
   }
 }
diff --git a/apps/client-web/src/App.vue b/apps/client-web/src/App.vue
index d58aa6c6..5cd6be21 100644
--- a/apps/client-web/src/App.vue
+++ b/apps/client-web/src/App.vue
@@ -38,6 +38,7 @@ const sidebarExpanded = ref(false)
 }
 
 .app-content {
+  position: relative;
   flex: 1;
   overflow: hidden;
   display: flex;
@@ -47,7 +48,12 @@ const sidebarExpanded = ref(false)
 <style>
 body {
   margin: 0;
-  font-size: 14px;
-  color: #000;
+  font-family: var(--sys-typo-family-sans);
+  font-size: var(--sys-font-body-md-font-size);
+  font-weight: var(--sys-font-body-md-font-weight);
+  letter-spacing: var(--sys-font-body-md-letter-spacing);
+  line-height: var(--sys-font-body-md-line-height);
+  color: var(--sys-color-text-base);
+  background: var(--sys-color-surface-base);
 }
 </style>
diff --git a/apps/client-web/src/components/common/AppSidePanel/AppSidePanel.md b/apps/client-web/src/components/common/AppSidePanel/AppSidePanel.md
index 2aa75297..ec996799 100644
--- a/apps/client-web/src/components/common/AppSidePanel/AppSidePanel.md
+++ b/apps/client-web/src/components/common/AppSidePanel/AppSidePanel.md
@@ -1,39 +1,9 @@
 # AppSidePanel
 
-Application-specific sidebar panel component that displays the main navigation menu (Managing section).
+应用导航由 Header 的 Menu 按钮控制，`expanded` 默认为 `false`。侧栏提供 Sources、Extensions、Settings 和 Info-Base 导航，切换路由时通过 `update:expanded(false)` 通知父组件关闭。
 
-## Features
-
-- Integrates SidePanel for expand/collapse functionality
-- Displays Managing menu with Sources, Extensions, and Settings buttons
-- Handles navigation internally (Sources, Extensions, Settings)
-- Automatically expands on start view, collapses on other routes
-- Manages its own expanded state
-
-## Usage
+桌面端与页面并排显示，宽度包含内边距和边框。移动断点内覆盖 `.app-content`，避免压缩主内容；Header 保持可见，用户可再次激活 Menu 关闭侧栏。
 
 ```vue
-<template>
-  <AppSidePanel :expanded="sidebarExpanded" />
-</template>
+<AppSidePanel v-model:expanded="sidebarExpanded" />
 ```
-
-## Props
-
-| Prop       | Type      | Default | Description                                         |
-| ---------- | --------- | ------- | --------------------------------------------------- |
-| `expanded` | `boolean` | `false` | Controls whether the panel is expanded or collapsed |
-
-## Emits
-
-| Event             | Payload   | Description                                            |
-| ----------------- | --------- | ------------------------------------------------------ |
-| `update:expanded` | `boolean` | Emitted when the expanded state changes based on route |
-
-## Behavior
-
-- **On Start View (`/`)**: Panel expands by default
-- **On Other Routes**: Panel collapses by default
-- **Sources Button**: Navigates to `/sources`
-- **Extensions Button**: Placeholder for future navigation
-- **Settings Button**: Placeholder for future navigation
diff --git a/apps/client-web/src/components/common/AppSidePanel/AppSidePanel.scss b/apps/client-web/src/components/common/AppSidePanel/AppSidePanel.scss
index 334f9c28..62db1e4e 100644
--- a/apps/client-web/src/components/common/AppSidePanel/AppSidePanel.scss
+++ b/apps/client-web/src/components/common/AppSidePanel/AppSidePanel.scss
@@ -1,4 +1,5 @@
 .app-side-panel {
+  box-sizing: border-box;
   width: 25%;
   min-width: 320px;
   max-width: 400px;
@@ -10,9 +11,19 @@
   gap: sys-var(space, md);
   background-color: sys-var(color, surface, base);
 
+  @include mobile {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+    z-index: 10;
+    border-left: 0;
+  }
+
   &__content {
     background-color: sys-var(color, surface, subtle);
-    border: 1px solid sys-var(color, border, muted);
+    border: 1px solid sys-var(color, border, subtle);
     padding: sys-var(space, md);
     display: flex;
     flex-direction: column;
diff --git a/apps/client-web/src/components/extension/extensionCard/extensionCard.scss b/apps/client-web/src/components/extension/extensionCard/extensionCard.scss
index 45b64151..b0a792cd 100644
--- a/apps/client-web/src/components/extension/extensionCard/extensionCard.scss
+++ b/apps/client-web/src/components/extension/extensionCard/extensionCard.scss
@@ -7,10 +7,13 @@
   background-color: sys-var(color, surface, base);
   box-sizing: border-box;
   width: 100%;
-  min-width: 280px;
+  min-width: 0;
+  overflow-wrap: anywhere;
 
   &__header {
     display: flex;
+    flex-wrap: wrap;
+    gap: sys-var(space, sm);
     justify-content: space-between;
     align-items: center;
   }
@@ -20,7 +23,7 @@
   }
 
   &__version {
-    @include apply-font(label-lg, mono);
+    @include apply-font(label-lg, $mono: true);
     color: sys-var(color, text, subtle);
   }
 
@@ -31,6 +34,7 @@
 
   &__actions {
     display: flex;
+    flex-wrap: wrap;
     gap: sys-var(space, sm);
   }
 
@@ -42,7 +46,7 @@
 
   &__error {
     @include apply-font(body-sm);
-    color: sys-var(color, danger, base);
+    color: sys-var(color, feedback, error);
     margin: 0;
   }
 }
@@ -55,6 +59,7 @@
 
   &__actions {
     display: flex;
+    flex-wrap: wrap;
     gap: sys-var(space, sm);
     justify-content: flex-end;
     margin-top: sys-var(space, md);
diff --git a/apps/client-web/src/components/extension/extensionCard/extensionCard.vue b/apps/client-web/src/components/extension/extensionCard/extensionCard.vue
index ae5aab33..91beb137 100644
--- a/apps/client-web/src/components/extension/extensionCard/extensionCard.vue
+++ b/apps/client-web/src/components/extension/extensionCard/extensionCard.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import { ref, computed, nextTick, shallowRef, watch, type Component } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { InkButton, InkSwitch, InkDialog, InkInput, InkJsonEditor } from '@inkcre/ui-web'
+import {
+  InkButton,
+  InkSwitch,
+  InkDialog,
+  InkInput,
+  InkJsonEditor,
+  type JsonEditorValidation,
+} from '@inkcre/ui-web'
 import { getExtensionHost, getExtensionSetupContribution } from '@/core'
 import { extensionCardProps, extensionCardEmits } from './extensionCard'
 
@@ -10,7 +17,9 @@ const emit = defineEmits(extensionCardEmits)
 const { t } = useI18n()
 
 // --- data ---
-const configPopupOpen = ref<boolean | Promise<boolean>>(false)
+const configPopupOpen = ref(false)
+const configSaving = ref(false)
+const configValidation = ref<JsonEditorValidation>()
 const versionPopupOpen = ref<boolean | Promise<boolean>>(false)
 const setupPopupOpen = ref(false)
 const setupComponent = shallowRef<Component | null>(null)
@@ -20,12 +29,16 @@ const isUninstalling = ref(false)
 const operationError = ref<string | null>(null)
 const configModel = ref(JSON.stringify(props.extension.config, null, 2))
 const versionModel = ref(props.extension.version)
+const canSaveConfig = computed(
+  () =>
+    configValidation.value?.status === 'valid' && configValidation.value.text === configModel.value
+)
 
 // --- computed ---
 watch(
   () => props.extension.config,
   (config) => {
-    configModel.value = JSON.stringify(config, null, 2)
+    if (!configPopupOpen.value) configModel.value = JSON.stringify(config, null, 2)
   },
   { deep: true }
 )
@@ -59,6 +72,9 @@ const toggleModel = computed({
 })
 
 const onEditConfigClick = () => {
+  configModel.value = JSON.stringify(props.extension.config, null, 2)
+  configValidation.value = undefined
+  operationError.value = null
   configPopupOpen.value = true
 }
 
@@ -91,19 +107,25 @@ const onConfirmVersion = () => {
   })()
 }
 
-const onConfirmConfig = () => {
-  configPopupOpen.value = (async () => {
-    try {
-      operationError.value = null
-      const config = JSON.parse(configModel.value) as Record<string, unknown>
-      const updatedExtension = await getExtensionHost().updateConfig(props.extension.name, config)
-      emit('updated', updatedExtension)
-      return false
-    } catch (error) {
-      operationError.value = error instanceof Error ? error.message : String(error)
-      return true
-    }
-  })()
+const onConfirmConfig = async () => {
+  if (configSaving.value || !canSaveConfig.value) return
+  configSaving.value = true
+  operationError.value = null
+  try {
+    const config: unknown = JSON.parse(configModel.value)
+    if (!config || typeof config !== 'object' || Array.isArray(config))
+      throw new Error(t('common.invalidConfig'))
+    const updatedExtension = await getExtensionHost().updateConfig(
+      props.extension.name,
+      config as Record<string, unknown>
+    )
+    emit('updated', updatedExtension)
+    configPopupOpen.value = false
+  } catch (error) {
+    operationError.value = error instanceof Error ? error.message : t('common.saveFailed')
+  } finally {
+    configSaving.value = false
+  }
 }
 
 const onUninstall = async () => {
@@ -156,7 +178,7 @@ const onUninstall = async () => {
         theme="danger"
         size="sm"
         :disabled="!canUninstall"
-        :loading="isUninstalling"
+        :is-loading="isUninstalling"
       />
     </div>
 
@@ -180,9 +202,26 @@ const onUninstall = async () => {
     <InkDialog
       v-model="configPopupOpen"
       :title="t('extension.editConfigTitle')"
-      @confirm="onConfirmConfig"
+      :is-loading="configSaving"
     >
-      <InkJsonEditor v-model="configModel" :schema="extension.config_schema ?? undefined" />
+      <InkJsonEditor
+        v-model="configModel"
+        :schema="extension.config_schema ?? undefined"
+        :label="t('extension.editConfigTitle')"
+        :disabled="configSaving"
+        @validation="configValidation = $event"
+      />
+      <p v-if="operationError" role="alert" class="extension-card__error">{{ operationError }}</p>
+      <template #footer>
+        <InkButton :text="t('common.cancel')" @click="configPopupOpen = false" />
+        <InkButton
+          :text="t('common.save')"
+          theme="primary"
+          :disabled="!canSaveConfig"
+          :is-loading="configSaving"
+          @click="onConfirmConfig"
+        />
+      </template>
     </InkDialog>
 
     <InkDialog
@@ -196,6 +235,7 @@ const onUninstall = async () => {
         :placeholder="t('extension.versionPlaceholder')"
         required
       />
+      <p v-if="operationError" role="alert" class="extension-card__error">{{ operationError }}</p>
     </InkDialog>
   </div>
 </template>
diff --git a/apps/client-web/src/components/extension/installExtension/installExtension.scss b/apps/client-web/src/components/extension/installExtension/installExtension.scss
index 94623b91..feffbef3 100644
--- a/apps/client-web/src/components/extension/installExtension/installExtension.scss
+++ b/apps/client-web/src/components/extension/installExtension/installExtension.scss
@@ -4,10 +4,9 @@
   gap: sys-var(space, md);
   padding: sys-var(space, md);
   box-sizing: border-box;
-  min-width: 420px;
-  max-width: 580px;
-  width: 42vw;
-  flex-shrink: 0;
+  min-width: 0;
+  flex: 1 1 24rem;
+  width: 100%;
 
   .title {
     @include apply-font(title-sm);
@@ -20,9 +19,7 @@
     display: flex;
     flex-direction: column;
     gap: sys-var(space, sm);
-    padding: sys-var(space, sm);
-    padding-top: 0;
-    padding-bottom: 0;
+    padding: 0;
     box-sizing: border-box;
     width: 100%;
   }
@@ -39,7 +36,7 @@
 
   &__error {
     @include apply-font(body-sm);
-    color: sys-var(color, danger, base);
+    color: sys-var(color, feedback, error);
     margin: 0;
   }
 }
diff --git a/apps/client-web/src/components/extension/installExtension/installExtension.vue b/apps/client-web/src/components/extension/installExtension/installExtension.vue
index 38e1c7ce..f6813941 100644
--- a/apps/client-web/src/components/extension/installExtension/installExtension.vue
+++ b/apps/client-web/src/components/extension/installExtension/installExtension.vue
@@ -15,6 +15,7 @@ const error = ref<string | null>(null)
 
 // --- methods ---
 const onSubmit = async () => {
+  if (isLoading.value) return
   isLoading.value = true
   try {
     error.value = null
@@ -36,32 +37,34 @@ const onSubmit = async () => {
   <div class="install-extension">
     <h2 class="title">{{ t('extension.installExtensionTitle') }}</h2>
 
-    <InkForm class="form">
+    <InkForm class="form" layout="col" @submit="onSubmit">
       <InkInput
         v-model="form.name"
         :label="t('extension.name')"
         :placeholder="t('extension.namePlaceholder')"
+        :disabled="isLoading"
         required
       />
       <InkInput
         v-model="form.version"
         :label="t('extension.version')"
         :placeholder="t('extension.versionPlaceholder')"
+        :disabled="isLoading"
         required
       />
-    </InkForm>
 
-    <p v-if="error" class="install-extension__error">{{ error }}</p>
+      <p v-if="error" class="install-extension__error">{{ error }}</p>
 
-    <div class="footer">
-      <InkButton
-        :text="t('extension.installNew')"
-        theme="primary"
-        size="md"
-        @click="onSubmit"
-        :loading="isLoading"
-      />
-    </div>
+      <div class="footer">
+        <InkButton
+          :text="t('extension.installNew')"
+          theme="primary"
+          size="md"
+          native-type="submit"
+          :is-loading="isLoading"
+        />
+      </div>
+    </InkForm>
   </div>
 </template>
 
diff --git a/apps/client-web/src/components/info-base/BlockInspectorPopup/BlockInspectorPopup.scss b/apps/client-web/src/components/info-base/BlockInspectorPopup/BlockInspectorPopup.scss
index 41cfb0f6..a5dbf4a6 100644
--- a/apps/client-web/src/components/info-base/BlockInspectorPopup/BlockInspectorPopup.scss
+++ b/apps/client-web/src/components/info-base/BlockInspectorPopup/BlockInspectorPopup.scss
@@ -1,18 +1,19 @@
 .block-inspector-popup {
-  width: min(420px, 92vw);
+  width: 100%;
   height: 100%;
-  background: var(--ink-bg-primary, #fff);
+  background: var(--sys-color-surface-base);
 
   &__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px;
-    border-bottom: 1px solid var(--ink-border-primary, #e5e7eb);
+    border-bottom: 1px solid var(--sys-color-border-base);
 
     h3 {
       margin: 0;
-      font-size: 16px;
+      overflow-wrap: anywhere;
+      @include apply-font(title-sm);
     }
   }
 
@@ -32,7 +33,26 @@
     min-height: 160px;
     align-items: center;
     justify-content: center;
-    color: var(--ink-text-secondary, #6b7280);
+    color: var(--sys-color-text-subtle);
+  }
+
+  &__facts {
+    display: grid;
+    grid-template-columns: fit-content(35%) minmax(0, 1fr);
+    gap: sys-var(space, sm) sys-var(space, md);
+    margin: 0;
+    dt {
+      @include apply-font(body-sm);
+      color: sys-var(color, text, subtle);
+    }
+    dd {
+      margin: 0;
+      overflow-wrap: anywhere;
+      @include apply-font(body-md);
+    }
+    code {
+      @include apply-font(body-sm, $mono: true);
+    }
   }
 
   &__actions {
@@ -40,12 +60,16 @@
     flex-wrap: wrap;
     gap: 8px;
     padding-top: 12px;
-    border-top: 1px solid var(--ink-border-primary, #e5e7eb);
+    border-top: 1px solid var(--sys-color-border-base);
 
+    p[role='alert'] {
+      color: sys-var(color, feedback, error);
+    }
     p {
       width: 100%;
       margin: 0;
-      font-size: 13px;
+      overflow-wrap: anywhere;
+      @include apply-font(body-sm);
     }
   }
 }
diff --git a/apps/client-web/src/components/info-base/BlockInspectorPopup/BlockInspectorPopup.vue b/apps/client-web/src/components/info-base/BlockInspectorPopup/BlockInspectorPopup.vue
index c0899c2e..1b3fe3f5 100644
--- a/apps/client-web/src/components/info-base/BlockInspectorPopup/BlockInspectorPopup.vue
+++ b/apps/client-web/src/components/info-base/BlockInspectorPopup/BlockInspectorPopup.vue
@@ -2,7 +2,7 @@
 import { computed, ref, shallowRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import dayjs from 'dayjs'
-import { InkButton, InkField, InkLoading, InkPopup } from '@inkcre/ui-web'
+import { InkButton, InkLoading, InkPopup } from '@inkcre/ui-web'
 import { Block, getInfoBaseRouter, OrganizationManager, PeerOutcomeUnknown } from '@inkcre/core'
 
 import type { BlockInspectorPopupProps } from './BlockInspectorPopup'
@@ -78,11 +78,24 @@ async function ruminate(): Promise<void> {
 </script>
 
 <template>
-  <InkPopup :open="open" :scrim="false" position="right" @update:open="onOpenChange">
+  <InkPopup
+    style="width: 420px; max-width: calc(100vw - 2 * var(--sys-space-md)); padding: 0"
+    :open="open"
+    :scrim="false"
+    position="right"
+    :aria-label="t('infoBase.blockInspector.title')"
+    @update:open="onOpenChange"
+  >
     <section class="block-inspector-popup">
       <header class="block-inspector-popup__header">
         <h3>{{ t('infoBase.blockInspector.title') }}</h3>
-        <InkButton icon="i-mdi-close" theme="subtle" type="square" @click="close" />
+        <InkButton
+          icon="i-mdi-close"
+          :aria-label="t('common.close')"
+          theme="subtle"
+          type="square"
+          @click="close"
+        />
       </header>
 
       <div v-if="status === 'loading'" class="block-inspector-popup__state"><InkLoading /></div>
@@ -94,25 +107,22 @@ async function ruminate(): Promise<void> {
       </div>
 
       <div v-else-if="block" class="block-inspector-popup__body">
-        <InkField :label="t('infoBase.blockInspector.id')" layout="inline"
-          >#{{ block.id }}</InkField
-        >
-        <InkField :label="t('infoBase.blockInspector.resolver')" layout="inline">
-          <code>{{ block.resolver }}</code>
-        </InkField>
-        <InkField :label="t('infoBase.blockInspector.created')" layout="inline">
-          {{ formattedCreatedAt }}
-        </InkField>
-        <InkField :label="t('infoBase.blockInspector.updated')" layout="inline">
-          {{ formattedUpdatedAt }}
-        </InkField>
-        <InkField
-          v-if="block.storage !== null"
-          :label="t('infoBase.blockInspector.storage')"
-          layout="inline"
-        >
-          #{{ block.storage }}
-        </InkField>
+        <dl class="block-inspector-popup__facts">
+          <dt>{{ t('infoBase.blockInspector.id') }}</dt>
+          <dd>#{{ block.id }}</dd>
+          <dt>{{ t('infoBase.blockInspector.resolver') }}</dt>
+          <dd>
+            <code>{{ block.resolver }}</code>
+          </dd>
+          <dt>{{ t('infoBase.blockInspector.created') }}</dt>
+          <dd>{{ formattedCreatedAt }}</dd>
+          <dt>{{ t('infoBase.blockInspector.updated') }}</dt>
+          <dd>{{ formattedUpdatedAt }}</dd>
+          <template v-if="block.storage !== null"
+            ><dt>{{ t('infoBase.blockInspector.storage') }}</dt>
+            <dd>#{{ block.storage }}</dd></template
+          >
+        </dl>
 
         <div class="block-inspector-popup__actions">
           <InkButton
@@ -122,10 +132,10 @@ async function ruminate(): Promise<void> {
           />
           <InkButton
             :text="t('infoBase.blockInspector.ruminate')"
-            :loading="isRuminating"
+            :is-loading="isRuminating"
             @click="ruminate"
           />
-          <p v-if="ruminationOutcome">
+          <p v-if="ruminationOutcome" :role="ruminationOutcome === 'success' ? 'status' : 'alert'">
             {{ t(`infoBase.blockInspector.rumination.${ruminationOutcome}`) }}
           </p>
         </div>
diff --git a/apps/client-web/src/components/info-base/BlockNode/BlockNode.scss b/apps/client-web/src/components/info-base/BlockNode/BlockNode.scss
index 4dd10e4d..c3a00394 100644
--- a/apps/client-web/src/components/info-base/BlockNode/BlockNode.scss
+++ b/apps/client-web/src/components/info-base/BlockNode/BlockNode.scss
@@ -4,74 +4,57 @@
   height: 6px;
   pointer-events: none;
 }
-
 .block-node {
+  cursor: grab;
   min-width: 180px;
-  max-width: 360px;
-  overflow: hidden;
-  cursor: pointer;
+  max-width: 320px;
   color: sys-var(color, text, base);
   background: sys-var(color, surface, base);
-  border: 1px solid sys-var(color, border, subtle);
-  border-radius: sys-var(radius, none);
-  transition:
-    border-color 140ms ease,
-    opacity 140ms ease,
-    filter 140ms ease;
-
-  header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: sys-var(space, sm);
-    min-height: 32px;
-    padding: sys-var(space, xs) sys-var(space, sm);
-    border-bottom: 1px solid sys-var(color, border, subtle);
-  }
-
-  &:hover {
-    border-color: sys-var(color, border, base);
-  }
-
+  border: 1px solid sys-var(color, border, base);
+  border-radius: 0;
   &--focal {
-    border-color: sys-var(color, border, primary);
-    box-shadow: 0 0 0 1px sys-var(color, border, primary);
+    outline: 1px solid sys-var(color, border, strong);
+    border-color: sys-var(color, border, strong);
   }
-
   &--muted {
-    opacity: 0.34;
-    filter: saturate(0.65);
+    background: sys-var(color, surface, subtle);
+    border-style: dashed;
   }
-
-  &__resolver {
-    @include apply-font(label-sm, true);
-    color: sys-var(color, text, subtle);
+  &__content {
+    cursor: pointer;
+    padding: sys-var(space, md);
+    min-height: 48px;
+  }
+  &__content:focus-visible {
+    outline: 2px solid sys-var(color, border, strong);
+    outline-offset: -3px;
+  }
+  footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: sys-var(space, sm);
+    padding: 0 sys-var(space, sm) sys-var(space, sm) sys-var(space, md);
   }
-
   &__inspect {
-    opacity: 0;
-    transition: opacity 120ms ease;
+    padding: sys-var(space, xs);
+    min-height: 2rem;
+    border: 0;
+    background: transparent;
+    color: sys-var(color, text, subtle);
+    @include apply-font(body-sm, $underlined: true);
+    cursor: pointer;
   }
-
-  &:hover &__inspect,
-  &__inspect:focus-within {
-    opacity: 1;
+  &__inspect:focus-visible {
+    outline: 2px solid sys-var(color, border, strong);
+    outline-offset: -2px;
   }
-
-  &__content {
-    min-height: 48px;
-    padding: sys-var(space, sm) sys-var(space, md) sys-var(space, md);
+  &__identity {
+    @include apply-font(body-sm, $mono: true);
+    color: sys-var(color, text, subtle);
   }
-
   &__preview-error {
+    @include apply-font(body-sm);
     color: sys-var(color, text, subtle);
-    @include apply-font(label-sm);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .block-node,
-  .block-node__inspect {
-    transition: none;
   }
 }
diff --git a/apps/client-web/src/components/info-base/BlockNode/BlockNode.vue b/apps/client-web/src/components/info-base/BlockNode/BlockNode.vue
index 92637a45..a4c22e9c 100644
--- a/apps/client-web/src/components/info-base/BlockNode/BlockNode.vue
+++ b/apps/client-web/src/components/info-base/BlockNode/BlockNode.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { Handle, Position } from '@vue-flow/core'
-import { InkButton, InkLoading } from '@inkcre/ui-web'
+import { InkLoading } from '@inkcre/ui-web'
 import PreviewRenderer from '@/components/info-base/PreviewRenderer/PreviewRenderer.vue'
 import type { BlockNodeProps } from './BlockNode'
 import { blockNodeEmits } from './BlockNode'
 
 const props = defineProps<BlockNodeProps>()
 const emit = defineEmits(blockNodeEmits)
-const resolverName = computed(() => props.data.resolver?.constructor.name ?? 'Block')
 
 const onNodeClick = () => {
   emit('focus', props.data.block.id)
@@ -18,11 +16,23 @@ const inspect = () => emit('inspect', props.data.block.id)
 </script>
 
 <template>
-  <!-- Handles for edge connections - positioned at all sides for flexible routing -->
-  <Handle type="target" :position="Position.Top" class="block-node__handle" />
-  <Handle type="target" :position="Position.Left" class="block-node__handle" />
-  <Handle type="source" :position="Position.Bottom" class="block-node__handle" />
-  <Handle type="source" :position="Position.Right" class="block-node__handle" />
+  <template
+    v-for="position in [Position.Top, Position.Right, Position.Bottom, Position.Left]"
+    :key="position"
+  >
+    <Handle
+      :id="`target-${position}`"
+      type="target"
+      :position="position"
+      class="block-node__handle"
+    />
+    <Handle
+      :id="`source-${position}`"
+      type="source"
+      :position="position"
+      class="block-node__handle"
+    />
+  </template>
 
   <div
     class="block-node"
@@ -30,22 +40,16 @@ const inspect = () => emit('inspect', props.data.block.id)
       'block-node--focal': data.focal,
       'block-node--muted': data.muted,
     }"
-    @click="onNodeClick"
   >
-    <header>
-      <span class="block-node__resolver">{{ resolverName }}</span>
-      <span class="nodrag nopan block-node__inspect" @pointerdown.stop @click.stop>
-        <InkButton
-          icon="i-mdi-information-outline"
-          theme="subtle"
-          type="square"
-          size="sm"
-          aria-label="Inspect Block"
-          @click="inspect"
-        />
-      </span>
-    </header>
-    <div class="block-node__content">
+    <div
+      class="block-node__content nodrag nopan"
+      role="button"
+      tabindex="0"
+      :aria-label="`Explore Block #${data.block.id}`"
+      @click="onNodeClick"
+      @keydown.enter.prevent="onNodeClick"
+      @keydown.space.prevent="onNodeClick"
+    >
       <InkLoading v-if="data.previewStatus === 'loading'" />
       <PreviewRenderer
         v-else-if="data.previewStatus === 'success' && data.resolver"
@@ -54,6 +58,17 @@ const inspect = () => emit('inspect', props.data.block.id)
       />
       <span v-else class="block-node__preview-error">Preview unavailable</span>
     </div>
+    <footer>
+      <span class="block-node__identity">#{{ data.block.id }}</span>
+      <button
+        type="button"
+        class="block-node__inspect nodrag nopan"
+        :aria-label="`Inspect Block #${data.block.id}`"
+        @click="inspect"
+      >
+        Details
+      </button>
+    </footer>
   </div>
 </template>
 
diff --git a/apps/client-web/src/components/info-base/RelationEdge/RelationEdge.scss b/apps/client-web/src/components/info-base/RelationEdge/RelationEdge.scss
index 73d728a8..be311d53 100644
--- a/apps/client-web/src/components/info-base/RelationEdge/RelationEdge.scss
+++ b/apps/client-web/src/components/info-base/RelationEdge/RelationEdge.scss
@@ -1,78 +1,43 @@
 .relation-edge {
-  stroke: sys-var(color, border, subtle);
+  stroke: sys-var(color, border, base);
   stroke-width: 1.25px;
-  transition:
-    opacity 140ms ease,
-    stroke 140ms ease;
-
-  &:hover,
   &--focal {
-    stroke: sys-var(color, border, primary);
+    stroke: sys-var(color, border, strong);
+    stroke-width: 2px;
   }
-
   &--muted {
-    opacity: 0.22;
+    stroke: sys-var(color, border, subtle);
+    stroke-dasharray: 4 4;
   }
-
   &__label {
     display: flex;
     align-items: stretch;
-    transition: opacity 140ms ease;
-
+    border: 1px solid sys-var(color, border, subtle);
+    background: sys-var(color, surface, base);
     button {
-      overflow: hidden;
-      padding: 3px 7px;
-      border: 1px solid sys-var(color, border, subtle);
-      border-radius: sys-var(radius, none);
-      color: sys-var(color, text, subtle);
-      background: sys-var(color, surface, subtle);
+      padding: sys-var(space, xs) sys-var(space, sm);
+      border: 0;
+      color: sys-var(color, text, base);
+      background: transparent;
       cursor: pointer;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      @include apply-font(label-sm);
+      @include apply-font(body-sm);
     }
-
     .relation-edge__focus {
-      max-width: 150px;
-    }
-
-    .relation-edge__inspect {
-      width: 0;
-      padding-inline: 0;
-      border-left: 0;
-      opacity: 0;
-      pointer-events: none;
-      transition:
-        width 120ms ease,
-        padding 120ms ease,
-        opacity 120ms ease;
+      max-width: 11rem;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
 
-    &:hover .relation-edge__inspect,
-    &:focus-within .relation-edge__inspect,
-    &--focal .relation-edge__inspect {
-      width: 26px;
-      padding-inline: 5px;
-      opacity: 1;
-      pointer-events: auto;
+    button:focus-visible {
+      outline: 2px solid sys-var(color, border, strong);
+      outline-offset: -2px;
     }
-
-    button:hover,
-    &--focal button {
-      color: sys-var(color, text, base);
-      border-color: sys-var(color, border, primary);
-      background: sys-var(color, surface, base);
+    &--focal {
+      border-color: sys-var(color, border, strong);
     }
-
     &--muted {
-      opacity: 0.28;
+      border-style: dashed;
     }
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .relation-edge,
-  .relation-edge__label {
-    transition: none;
-  }
-}
diff --git a/apps/client-web/src/components/info-base/RelationEdge/RelationEdge.ts b/apps/client-web/src/components/info-base/RelationEdge/RelationEdge.ts
index 49976c56..7597a10f 100644
--- a/apps/client-web/src/components/info-base/RelationEdge/RelationEdge.ts
+++ b/apps/client-web/src/components/info-base/RelationEdge/RelationEdge.ts
@@ -3,7 +3,6 @@ import type { RelationEdgeData } from '@/views/info-base/graph/graph-model'
 
 export interface RelationEdgeEmits {
   (event: 'focus', relation: number): void
-  (event: 'inspect', relation: number): void
 }
 
 export type RelationEdgeProps = EdgeProps<RelationEdgeData>
diff --git a/apps/client-web/src/components/info-base/RelationEdge/RelationEdge.vue b/apps/client-web/src/components/info-base/RelationEdge/RelationEdge.vue
index 80f24918..961ab277 100644
--- a/apps/client-web/src/components/info-base/RelationEdge/RelationEdge.vue
+++ b/apps/client-web/src/components/info-base/RelationEdge/RelationEdge.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { BezierEdge, EdgeLabelRenderer, getBezierPath, MarkerType } from '@vue-flow/core'
+import { BaseEdge, EdgeLabelRenderer, getBezierPath } from '@vue-flow/core'
 import type { RelationEdgeEmits, RelationEdgeProps } from './RelationEdge'
 
 const props = defineProps<RelationEdgeProps>()
 const emit = defineEmits<RelationEdgeEmits>()
 
-const label = computed(() => props.data?.relation?.content ?? '')
-const curvature = computed(() => 0.16 + ((props.data?.relation.id ?? 0) % 5) * 0.035)
+const label = computed(() => {
+  const content = props.data?.relation.content.trim() ?? ''
+  return !content || /^[{[]/.test(content) ? `#${props.data?.relation.id}` : content
+})
 
 const path = computed(() => {
   return getBezierPath({
@@ -17,7 +19,7 @@ const path = computed(() => {
     targetX: props.targetX,
     targetY: props.targetY,
     targetPosition: props.targetPosition,
-    curvature: curvature.value,
+    curvature: 0.16,
   })
 })
 
@@ -27,14 +29,9 @@ const labelY = computed(() => path.value[2])
 </script>
 
 <template>
-  <BezierEdge
+  <BaseEdge
     :id="id"
-    :source-x="sourceX"
-    :source-y="sourceY"
-    :target-x="targetX"
-    :target-y="targetY"
-    :source-position="sourcePosition"
-    :target-position="targetPosition"
+    :path="edgePath"
     :marker-end="markerEnd"
     :class="{
       'relation-edge': true,
@@ -45,7 +42,7 @@ const labelY = computed(() => path.value[2])
 
   <EdgeLabelRenderer v-if="label">
     <div
-      class="relation-edge__label"
+      class="relation-edge__label nodrag nopan"
       :class="{
         'relation-edge__label--focal': data?.focal,
         'relation-edge__label--muted': data?.muted,
@@ -56,16 +53,13 @@ const labelY = computed(() => path.value[2])
         pointerEvents: 'all',
       }"
     >
-      <button type="button" class="relation-edge__focus" @click="emit('focus', data!.relation.id)">
-        {{ label }}
-      </button>
       <button
         type="button"
-        class="relation-edge__inspect"
-        aria-label="Inspect Relation"
-        @click="emit('inspect', data!.relation.id)"
+        class="relation-edge__focus"
+        :aria-label="`Explore Relation #${data?.relation.id}`"
+        @click="emit('focus', data!.relation.id)"
       >
-        <span class="i-mdi-information-outline" aria-hidden="true" />
+        {{ label }}
       </button>
     </div>
   </EdgeLabelRenderer>
diff --git a/apps/client-web/src/components/info-base/RelationInspectorPopup/RelationInspectorPopup.vue b/apps/client-web/src/components/info-base/RelationInspectorPopup/RelationInspectorPopup.vue
index e2628301..cb060916 100644
--- a/apps/client-web/src/components/info-base/RelationInspectorPopup/RelationInspectorPopup.vue
+++ b/apps/client-web/src/components/info-base/RelationInspectorPopup/RelationInspectorPopup.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, shallowRef, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { InkButton, InkLoading, InkPopup } from '@inkcre/ui-web'
 import { getInfoBaseRouter, Relation } from '@inkcre/core'
 
@@ -7,6 +8,7 @@ import type { RelationInspectorPopupProps } from './RelationInspectorPopup'
 
 const props = defineProps<RelationInspectorPopupProps>()
 const router = getInfoBaseRouter()
+const { t } = useI18n()
 const status = ref<'loading' | 'success' | 'missing' | 'error'>('loading')
 const relation = shallowRef<Relation | null>(null)
 let generation = 0
@@ -37,22 +39,43 @@ function close(): void {
 </script>
 
 <template>
-  <InkPopup :open="true" :scrim="false" position="right" @update:open="close">
+  <InkPopup
+    style="width: 360px; max-width: calc(100vw - 2 * var(--sys-space-md))"
+    :open="true"
+    :scrim="false"
+    position="right"
+    :aria-label="`Relation #${props.relation}`"
+    @update:open="close"
+  >
     <section class="relation-inspector-popup">
       <header>
         <h3>Relation #{{ props.relation }}</h3>
-        <InkButton icon="i-mdi-close" theme="subtle" type="square" @click="close" />
+        <InkButton
+          icon="i-mdi-close"
+          :aria-label="t('common.close')"
+          theme="subtle"
+          type="square"
+          @click="close"
+        />
       </header>
       <InkLoading v-if="status === 'loading'" />
       <p v-else-if="status === 'missing'">This Relation no longer exists.</p>
       <p v-else-if="status === 'error'">Unable to load this Relation.</p>
       <dl v-else-if="relation">
         <dt>From</dt>
-        <dd>#{{ relation.from_ }}</dd>
+        <dd>
+          <button type="button" @click="router.push({ name: 'block', block: relation.from_ })">
+            Block #{{ relation.from_ }}
+          </button>
+        </dd>
         <dt>Property</dt>
         <dd>{{ relation.content }}</dd>
         <dt>To</dt>
-        <dd>#{{ relation.to_ }}</dd>
+        <dd>
+          <button type="button" @click="router.push({ name: 'block', block: relation.to_ })">
+            Block #{{ relation.to_ }}
+          </button>
+        </dd>
       </dl>
     </section>
   </InkPopup>
@@ -60,7 +83,7 @@ function close(): void {
 
 <style scoped lang="scss">
 .relation-inspector-popup {
-  width: min(360px, calc(100vw - 32px));
+  width: 100%;
 
   header {
     display: flex;
@@ -75,9 +98,22 @@ function close(): void {
   }
   dl {
     display: grid;
-    grid-template-columns: max-content minmax(0, 1fr);
+    grid-template-columns: fit-content(30%) minmax(0, 1fr);
     gap: 8px 16px;
   }
+  button {
+    padding: 0;
+    border: 0;
+    background: transparent;
+    font: inherit;
+    color: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  button:focus-visible {
+    outline: 2px solid sys-var(color, border, strong);
+    outline-offset: 2px;
+  }
   dd {
     margin: 0;
     overflow-wrap: anywhere;
diff --git a/apps/client-web/src/components/info-base/SolvedContentPopup/SolvedContentPopup.scss b/apps/client-web/src/components/info-base/SolvedContentPopup/SolvedContentPopup.scss
index b8a5df85..c157d286 100644
--- a/apps/client-web/src/components/info-base/SolvedContentPopup/SolvedContentPopup.scss
+++ b/apps/client-web/src/components/info-base/SolvedContentPopup/SolvedContentPopup.scss
@@ -1,24 +1,26 @@
 .solved-content-popup {
   display: flex;
   flex-direction: column;
-  width: min(900px, 94vw);
+  width: 100%;
   max-height: 88vh;
-  background: var(--ink-bg-primary, #fff);
+  background: var(--sys-color-surface-base);
 
   &__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px;
-    border-bottom: 1px solid var(--ink-border-primary, #e5e7eb);
+    border-bottom: 1px solid var(--sys-color-border-base);
 
     h3 {
       margin: 0;
-      font-size: 16px;
+      overflow-wrap: anywhere;
+      @include apply-font(title-sm);
     }
   }
 
   &__controls {
+    flex-shrink: 0;
     display: flex;
     gap: 8px;
   }
@@ -34,6 +36,6 @@
     align-items: center;
     justify-content: center;
     padding: 20px;
-    color: var(--ink-text-secondary, #6b7280);
+    color: var(--sys-color-text-subtle);
   }
 }
diff --git a/apps/client-web/src/components/info-base/SolvedContentPopup/SolvedContentPopup.vue b/apps/client-web/src/components/info-base/SolvedContentPopup/SolvedContentPopup.vue
index 2047636b..66157ae2 100644
--- a/apps/client-web/src/components/info-base/SolvedContentPopup/SolvedContentPopup.vue
+++ b/apps/client-web/src/components/info-base/SolvedContentPopup/SolvedContentPopup.vue
@@ -74,19 +74,33 @@ function onOpenChange(value: boolean): void {
 </script>
 
 <template>
-  <InkPopup :open="open" :scrim="false" position="center" @update:open="onOpenChange">
+  <InkPopup
+    style="width: 900px; max-width: calc(100vw - 2 * var(--sys-space-md)); padding: 0"
+    :open="open"
+    :scrim="false"
+    position="center"
+    :aria-label="t('infoBase.solvedContent.title')"
+    @update:open="onOpenChange"
+  >
     <section class="solved-content-popup">
       <header class="solved-content-popup__header">
         <h3>{{ t('infoBase.solvedContent.title') }}</h3>
         <div class="solved-content-popup__controls">
           <InkButton
             icon="i-mdi-refresh"
+            :aria-label="t('common.refresh')"
             theme="subtle"
             type="square"
             :disabled="status === 'loading'"
             @click="load(true)"
           />
-          <InkButton icon="i-mdi-close" theme="subtle" type="square" @click="close" />
+          <InkButton
+            icon="i-mdi-close"
+            :aria-label="t('common.close')"
+            theme="subtle"
+            type="square"
+            @click="close"
+          />
         </div>
       </header>
 
diff --git a/apps/client-web/src/components/info-base/resolvers/ContentFile.vue b/apps/client-web/src/components/info-base/resolvers/ContentFile.vue
index 620b22d6..f94d7f69 100644
--- a/apps/client-web/src/components/info-base/resolvers/ContentFile.vue
+++ b/apps/client-web/src/components/info-base/resolvers/ContentFile.vue
@@ -24,7 +24,7 @@ const label = computed(() => props.resolver.block.resolver.split('.')[1]?.toUppe
   background: sys-var(color, surface, subtle);
 
   &__label {
-    @include apply-font(label-sm, true);
+    @include apply-font(label-md, $mono: true);
   }
 
   &__size {
diff --git a/apps/client-web/src/components/info-base/resolvers/ContentHtml.vue b/apps/client-web/src/components/info-base/resolvers/ContentHtml.vue
index f9d8e8b1..a8c31655 100644
--- a/apps/client-web/src/components/info-base/resolvers/ContentHtml.vue
+++ b/apps/client-web/src/components/info-base/resolvers/ContentHtml.vue
@@ -5,10 +5,7 @@ const props = defineProps<SolvedContentRendererProps<string>>()
 
 const displayContent = computed(() => {
   const textContent = stripHtml(props.solvedContent)
-  const maxLen = 80
-  const preview = textContent.length > maxLen ? textContent.slice(0, maxLen) + '...' : textContent
-
-  return preview || '[HTML]'
+  return textContent || '[HTML]'
 })
 
 function stripHtml(html: string): string {
@@ -24,7 +21,7 @@ function stripHtml(html: string): string {
 <template>
   <div class="content-html">
     <div class="content-html__badge">HTML</div>
-    <div class="content-html__preview">{{ displayContent }}</div>
+    <div class="content-html__text">{{ displayContent }}</div>
   </div>
 </template>
 
@@ -36,24 +33,16 @@ function stripHtml(html: string): string {
   overflow: hidden;
 
   &__badge {
-    @include apply-font(label-sm, true);
+    @include apply-font(label-md, $mono: true);
     color: sys-var(color, text, subtle);
     margin-bottom: 4px;
     letter-spacing: 0.5px;
   }
 
-  &__title {
-    @include apply-font(label-lg);
+  &__text {
+    @include apply-font(body-md);
     color: sys-var(color, text, base);
-    font-weight: 500;
-    word-break: break-word;
-  }
-
-  &__preview {
-    @include apply-font(label-lg);
-    color: sys-var(color, text, subtle);
-    word-break: break-word;
-    line-height: 1.4;
+    overflow-wrap: anywhere;
   }
 }
 </style>
diff --git a/apps/client-web/src/components/info-base/resolvers/ContentPreview.vue b/apps/client-web/src/components/info-base/resolvers/ContentPreview.vue
index 92deea64..784fb0b7 100644
--- a/apps/client-web/src/components/info-base/resolvers/ContentPreview.vue
+++ b/apps/client-web/src/components/info-base/resolvers/ContentPreview.vue
@@ -52,8 +52,7 @@ const objectUrl = computed(() => {
 
   p {
     margin: 0;
-    @include apply-font(label-lg);
-    line-height: 1.45;
+    @include apply-font(body-sm);
     overflow-wrap: anywhere;
   }
 
@@ -71,7 +70,7 @@ const objectUrl = computed(() => {
     justify-content: space-between;
     gap: sys-var(space, md);
     color: sys-var(color, text, subtle);
-    @include apply-font(label-sm, true);
+    @include apply-font(label-md, $mono: true);
   }
 }
 </style>
diff --git a/apps/client-web/src/components/info-base/resolvers/ContentText.vue b/apps/client-web/src/components/info-base/resolvers/ContentText.vue
index c7821809..9ae1415d 100644
--- a/apps/client-web/src/components/info-base/resolvers/ContentText.vue
+++ b/apps/client-web/src/components/info-base/resolvers/ContentText.vue
@@ -1,19 +1,12 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import type { SolvedContentRendererProps } from '@inkcre/core'
 
-const props = defineProps<SolvedContentRendererProps<string>>()
-
-const displayText = computed(() => {
-  const text = props.solvedContent
-  const maxLen = 100
-  return text.length > maxLen ? text.slice(0, maxLen) + '...' : text
-})
+defineProps<SolvedContentRendererProps<string>>()
 </script>
 
 <template>
   <div class="content-text">
-    <div class="content-text__content">{{ displayText }}</div>
+    <div class="content-text__content">{{ solvedContent }}</div>
   </div>
 </template>
 
@@ -25,10 +18,10 @@ const displayText = computed(() => {
   overflow: hidden;
 
   &__content {
-    @include apply-font(label-lg);
+    @include apply-font(body-md);
     color: sys-var(color, text, base);
-    word-break: break-word;
-    line-height: 1.4;
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
   }
 }
 </style>
diff --git a/apps/client-web/src/components/job/JobCard/JobCard.scss b/apps/client-web/src/components/job/JobCard/JobCard.scss
index a1ed03da..838cf738 100644
--- a/apps/client-web/src/components/job/JobCard/JobCard.scss
+++ b/apps/client-web/src/components/job/JobCard/JobCard.scss
@@ -9,7 +9,7 @@
   transition: background-color 0.2s;
 
   &:hover {
-    background-color: sys-var(color, surface, hover);
+    background-color: sys-var(color, surface, subtle-hover);
   }
 
   &__header {
@@ -19,7 +19,7 @@
   }
 
   &__id {
-    @include apply-font(label-lg, mono);
+    @include apply-font(label-lg, $mono: true);
     color: sys-var(color, text, base);
   }
 
@@ -27,20 +27,8 @@
     @include apply-font(label-md);
     color: sys-var(color, text, base);
 
-    &.status--pending {
-      color: sys-var(color, warning, base);
-    }
-
-    &.status--running {
-      color: sys-var(color, info, base);
-    }
-
-    &.status--finished {
-      color: sys-var(color, success, base);
-    }
-
     &.status--failed {
-      color: sys-var(color, danger, base);
+      color: sys-var(color, feedback, error);
     }
   }
 
@@ -51,7 +39,7 @@
   }
 
   &__date {
-    @include apply-font(label-sm);
+    @include apply-font(label-md);
     color: sys-var(color, text, subtle);
   }
 }
diff --git a/apps/client-web/src/components/job/JobCard/JobCard.vue b/apps/client-web/src/components/job/JobCard/JobCard.vue
index b053967e..41ff372f 100644
--- a/apps/client-web/src/components/job/JobCard/JobCard.vue
+++ b/apps/client-web/src/components/job/JobCard/JobCard.vue
@@ -12,12 +12,7 @@ const { t } = useI18n()
 // --- computed ---
 const statusColor = computed(() => {
   switch (props.job.status) {
-    case JobStatus.PENDING:
-      return 'status--pending'
-    case JobStatus.RUNNING:
-      return 'status--running'
-    case JobStatus.FINISHED:
-      return 'status--finished'
+    case JobStatus.TIMED_OUT:
     case JobStatus.FAILED:
       return 'status--failed'
     default:
diff --git a/apps/client-web/src/components/obsrv/LogEntry/LogEntry.md b/apps/client-web/src/components/obsrv/LogEntry/LogEntry.md
index 0922c689..52e1be9b 100644
--- a/apps/client-web/src/components/obsrv/LogEntry/LogEntry.md
+++ b/apps/client-web/src/components/obsrv/LogEntry/LogEntry.md
@@ -1,34 +1,5 @@
 # LogEntry
 
-## Rationale
+显示一条日志的时间、严重级别和正文。传入 `log: Log` 或 `logId: number`，二选一；传 ID 时通过现有查询接口读取日志。
 
-Display individual log entries with timestamp, severity, and message body. Part of the observability logging system to visualize trace logs.
-
-## Goals
-
-Render a single log entry in a reusable component that accepts either a log object or a log ID, maintaining consistency with the codebase pattern.
-
-## Key Concepts
-
-- Log: Observability log entry from the database
-- Trace: Distributed tracing context
-
-## Specification
-
-The component displays a single log entry with formatted timestamp, severity level, and body text. Clicking on the log entry expands a panel showing additional details including trace ID, span ID, severity number, and attributes. It accepts props that can be either the complete log object or the log ID, fetching the object asynchronously if only the ID is provided.
-
-## Implementation
-
-### Props
-
-- `log` (`Log`, optional): The log object to display. If not provided, `logId` must be provided.
-- `logId` (`number`, optional): The ID of the log to fetch. If not provided, `log` must be provided.
-
-### Key Features
-
-- Accepts both log object or logId (uses `useEither` composable)
-- Formats timestamp to HH:MM:SS.mmm format
-- Displays severity_text and body in a flex layout
-- Expandable details panel showing trace_id, span_id, severity_number, and attributes
-- Click handler to toggle expansion state
-- Visual indicator (chevron icon) for expand/collapse state
+摘要行是原生按钮，点击、Enter 或 Space 均可展开／收起详情，`aria-expanded` 同步反映状态。详情展示 Trace ID、Span ID、严重级别数值和非空 attributes。时间使用等宽元数据角色，日志正文使用 body-sm；长正文可以换行，结构化属性保留等宽代码格式并在局部滚动。
diff --git a/apps/client-web/src/components/obsrv/LogEntry/LogEntry.scss b/apps/client-web/src/components/obsrv/LogEntry/LogEntry.scss
index 968b776c..ee7cf16f 100644
--- a/apps/client-web/src/components/obsrv/LogEntry/LogEntry.scss
+++ b/apps/client-web/src/components/obsrv/LogEntry/LogEntry.scss
@@ -4,7 +4,17 @@
   gap: sys-var(space, xs);
 
   &__main {
+    width: 100%;
+    border: 0;
+    background: transparent;
+    text-align: left;
+
+    &:focus-visible {
+      outline: 2px solid sys-var(color, border, strong);
+      outline-offset: 2px;
+    }
     display: flex;
+    flex-wrap: wrap;
     gap: sys-var(space, sm);
     align-items: center;
     cursor: pointer;
@@ -13,7 +23,7 @@
     transition: background-color 0.2s;
 
     &:hover {
-      background-color: sys-var(color, surface, base-hover);
+      background-color: sys-var(color, surface, subtle-hover);
     }
   }
 
@@ -29,13 +39,13 @@
   }
 
   .log-time {
-    @include apply-font(label-sm, mono);
+    @include apply-font(label-md, $mono: true);
     color: sys-var(color, text, subtle);
     min-width: 80px;
   }
 
   .log-severity {
-    @include apply-font(label-sm);
+    @include apply-font(label-md);
     color: sys-var(color, text, base);
     min-width: 60px;
   }
@@ -43,7 +53,9 @@
   .log-body {
     @include apply-font(body-sm);
     color: sys-var(color, text, base);
-    flex: 1;
+    flex: 1 1 12rem;
+    min-width: 0;
+    overflow-wrap: anywhere;
   }
 
   &__details {
@@ -57,6 +69,7 @@
 
   &__detail-row {
     display: flex;
+    flex-wrap: wrap;
     gap: sys-var(space, sm);
     justify-content: space-between;
     width: 100%;
@@ -70,15 +83,16 @@
   }
 
   &__detail-value {
-    @include apply-font(label-lg, mono);
+    @include apply-font(body-sm, $mono: true);
     color: sys-var(color, text, base);
-    flex: 1;
+    flex: 1 1 12rem;
+    min-width: 0;
     word-break: break-all;
     overflow-x: scroll;
 
     &--code {
       padding: sys-var(space, xs);
-      border-radius: sys-var(radius, xs);
+      border-radius: sys-var(radius, none);
       margin: 0;
       white-space: pre;
     }
diff --git a/apps/client-web/src/components/obsrv/LogEntry/LogEntry.vue b/apps/client-web/src/components/obsrv/LogEntry/LogEntry.vue
index 99aaf57a..f534c218 100644
--- a/apps/client-web/src/components/obsrv/LogEntry/LogEntry.vue
+++ b/apps/client-web/src/components/obsrv/LogEntry/LogEntry.vue
@@ -25,15 +25,21 @@ const formatDate = (date: Date): string => {
 
 <template>
   <div v-if="log" class="log-entry" :class="{ 'log-entry--expanded': expanded }">
-    <div class="log-entry__main" @click="onLogEntryClick">
-      <div
+    <button
+      type="button"
+      class="log-entry__main"
+      :aria-expanded="expanded"
+      @click="onLogEntryClick"
+    >
+      <span
+        aria-hidden="true"
         class="i-mdi-chevron-right log-entry__chevron"
         :class="{ 'log-entry__chevron--expanded': expanded }"
       />
       <span class="log-time">{{ formatDate(log.timestamp) }}</span>
       <span class="log-severity">{{ log.severity_text }}</span>
       <span class="log-body">{{ log.body }}</span>
-    </div>
+    </button>
     <div v-if="expanded" class="log-entry__details">
       <div class="log-entry__detail-row">
         <span class="log-entry__detail-label">Trace ID</span>
diff --git a/apps/client-web/src/components/obsrv/LogsViewer/LogsViewer.scss b/apps/client-web/src/components/obsrv/LogsViewer/LogsViewer.scss
index edc8f77c..0622f01e 100644
--- a/apps/client-web/src/components/obsrv/LogsViewer/LogsViewer.scss
+++ b/apps/client-web/src/components/obsrv/LogsViewer/LogsViewer.scss
@@ -3,7 +3,7 @@
   flex-direction: column;
   gap: sys-var(space, sm);
   padding: sys-var(space, md);
-  border: 1px solid sys-var(color, border, muted);
+  border: 1px solid sys-var(color, border, subtle);
   box-sizing: border-box;
   overflow-y: scroll;
   width: 100%;
@@ -29,10 +29,10 @@
     align-items: center;
     min-height: 200px;
     padding: sys-var(space, md);
-    background: sys-var(color, danger, light);
-    border: 1px solid sys-var(color, danger, base);
-    border-radius: 4px;
+    background: sys-var(color, surface, subtle);
+    border: 1px solid sys-var(color, feedback, error);
+    border-radius: sys-var(radius, none);
     @include apply-font(body-md);
-    color: sys-var(color, danger, base);
+    color: sys-var(color, feedback, error);
   }
 }
diff --git a/apps/client-web/src/components/peer/peerCard/peerCard.scss b/apps/client-web/src/components/peer/peerCard/peerCard.scss
index 0a84125c..0383e509 100644
--- a/apps/client-web/src/components/peer/peerCard/peerCard.scss
+++ b/apps/client-web/src/components/peer/peerCard/peerCard.scss
@@ -1,5 +1,8 @@
 .peer-card {
   display: flex;
+  flex-wrap: wrap;
+  gap: sys-var(space, sm);
+  overflow-wrap: anywhere;
   justify-content: space-between;
   align-items: center;
   padding: sys-var(space, md);
@@ -7,34 +10,35 @@
   background-color: sys-var(color, surface, base);
 
   &__item-info {
+    min-width: 0;
     display: flex;
     flex-direction: column;
     gap: sys-var(space, xs);
   }
 
   &__item-id {
-    @include apply-font(label-sm, mono);
+    @include apply-font(label-md, $mono: true);
     color: sys-var(color, text, subtle);
   }
 
   &__item-capabilities {
-    @include apply-font(label-sm);
+    @include apply-font(body-sm);
     color: sys-var(color, text, subtle);
   }
 
   &__item-status {
     @include apply-font(label-md);
     padding: sys-var(space, xs) sys-var(space, sm);
-    border-radius: sys-var(radius, sm);
+    border-radius: sys-var(radius, none);
 
     &--online {
-      background-color: sys-var(color, success, surface);
-      color: sys-var(color, success, base);
+      background-color: sys-var(color, surface, subtle);
+      color: sys-var(color, feedback, success);
     }
 
     &--offline {
-      background-color: sys-var(color, danger, surface);
-      color: sys-var(color, danger, base);
+      background-color: sys-var(color, surface, subtle);
+      color: sys-var(color, feedback, error);
     }
 
     &--unknown {
diff --git a/apps/client-web/src/components/peer/peerCard/peerCard.vue b/apps/client-web/src/components/peer/peerCard/peerCard.vue
index 0173bd09..d5aac541 100644
--- a/apps/client-web/src/components/peer/peerCard/peerCard.vue
+++ b/apps/client-web/src/components/peer/peerCard/peerCard.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { InkButton, InkDialog, InkInput, InkJsonEditor } from '@inkcre/ui-web'
+import {
+  InkButton,
+  InkDialog,
+  InkInput,
+  InkJsonEditor,
+  type JsonEditorValidation,
+} from '@inkcre/ui-web'
+import { Peer } from '@inkcre/core'
 import { peerCardEmits, peerCardProps } from './peerCard'
 
 const props = defineProps(peerCardProps)
@@ -9,12 +16,20 @@ const emit = defineEmits(peerCardEmits)
 const { t } = useI18n()
 
 const configPopupOpen = ref(false)
-const configModel = computed({
-  get: () => JSON.stringify(props.peer.config ?? {}, null, 2),
-  set: (newValue: string) => {
-    props.peer.config = JSON.parse(newValue)
-  },
-})
+const configModel = ref('{}')
+const configValidation = ref<JsonEditorValidation>()
+const savingConfig = ref(false)
+const configError = ref('')
+const canSaveConfig = computed(
+  () =>
+    configValidation.value?.status === 'valid' && configValidation.value.text === configModel.value
+)
+function openConfig() {
+  configModel.value = JSON.stringify(props.peer.config, null, 2)
+  configValidation.value = undefined
+  configError.value = ''
+  configPopupOpen.value = true
+}
 
 const savePeer = async () => {
   try {
@@ -27,13 +42,19 @@ const savePeer = async () => {
 }
 
 const onConfirmConfig = async () => {
+  if (savingConfig.value || !canSaveConfig.value) return
+  savingConfig.value = true
+  configError.value = ''
   try {
-    await props.peer.saveConfig()
+    const updated = Peer.parse({ ...props.peer, config: JSON.parse(configModel.value) })
+    await updated.saveConfig()
+    props.peer.config = updated.config
     emit('updated')
     configPopupOpen.value = false
   } catch (error) {
-    console.error('Failed to update Peer config:', error)
-    alert('Failed to update client config')
+    configError.value = error instanceof Error ? error.message : t('common.saveFailed')
+  } finally {
+    savingConfig.value = false
   }
 }
 
@@ -55,18 +76,31 @@ const getStatusText = (status: 'online' | 'offline' | 'unknown') => {
       <span class="peer-card__item-capabilities">
         {{ peer.capabilities.length }} capabilities
       </span>
-      <InkButton :text="t('client.editConfig')" size="sm" @click="configPopupOpen = true" />
+      <InkButton :text="t('client.editConfig')" size="sm" @click="openConfig" />
     </div>
     <span :class="['peer-card__item-status', `peer-card__item-status--${status}`]">
       {{ getStatusText(status) }}
     </span>
 
-    <InkDialog
-      v-model="configPopupOpen"
-      :title="t('client.editConfigTitle')"
-      @confirm="onConfirmConfig"
-    >
-      <InkJsonEditor v-model="configModel" :schema="peer.config_schema" />
+    <InkDialog v-model="configPopupOpen" :title="t('client.editConfig')" :is-loading="savingConfig">
+      <InkJsonEditor
+        v-model="configModel"
+        :schema="peer.config_schema"
+        :label="t('client.editConfig')"
+        :disabled="savingConfig"
+        @validation="configValidation = $event"
+      />
+      <p v-if="configError" role="alert" class="text-feedback-error">{{ configError }}</p>
+      <template #footer>
+        <InkButton :text="t('common.cancel')" @click="configPopupOpen = false" />
+        <InkButton
+          :text="t('common.save')"
+          theme="primary"
+          :is-loading="savingConfig"
+          :disabled="!canSaveConfig"
+          @click="onConfirmConfig"
+        />
+      </template>
     </InkDialog>
   </div>
 </template>
diff --git a/apps/client-web/src/components/peer/peerList/peerList.vue b/apps/client-web/src/components/peer/peerList/peerList.vue
index e522cfca..55f9ee9b 100644
--- a/apps/client-web/src/components/peer/peerList/peerList.vue
+++ b/apps/client-web/src/components/peer/peerList/peerList.vue
@@ -38,13 +38,13 @@ const getPeerStatus = (peer: Peer): 'online' | 'offline' | 'unknown' => {
         <InkButton
           :text="t('client.refresh')"
           size="sm"
-          :loading="peersLoading"
+          :is-loading="peersLoading"
           @click="() => refreshPeers()"
         />
         <InkButton
           :text="t('client.checkHealth')"
           size="sm"
-          :loading="healthCheckLoading"
+          :is-loading="healthCheckLoading"
           @click="checkAllHealth"
         />
       </div>
diff --git a/apps/client-web/src/components/recall/RecallSearch.vue b/apps/client-web/src/components/recall/RecallSearch.vue
index 01915c7d..d2e60842 100644
--- a/apps/client-web/src/components/recall/RecallSearch.vue
+++ b/apps/client-web/src/components/recall/RecallSearch.vue
@@ -77,7 +77,12 @@ function setMode(value: 'recall' | 'path'): void {
 </script>
 
 <template>
-  <InkPopup v-model:open="open" position="top">
+  <InkPopup
+    v-model:open="open"
+    position="top"
+    aria-label="Recall information"
+    style="width: 640px; max-width: calc(100vw - 2 * var(--sys-space-md))"
+  >
     <section class="recall-search" aria-label="Recall information">
       <header>
         <div class="recall-search__modes">
@@ -94,11 +99,12 @@ function setMode(value: 'recall' | 'path'): void {
         <input
           v-model="query"
           type="search"
+          aria-label="Search query"
           autofocus
           autocomplete="off"
           :placeholder="mode === 'path' ? 'Find path endpoints' : 'Recall a clue'"
         />
-        <InkButton text="Search" theme="primary" />
+        <InkButton text="Search" theme="primary" native-type="submit" />
       </form>
       <div v-if="mode === 'path'" class="recall-search__results" aria-live="polite">
         <InkLoading v-if="status === 'loading'" />
@@ -121,7 +127,7 @@ function setMode(value: 'recall' | 'path'): void {
 
 <style scoped lang="scss">
 .recall-search {
-  width: min(640px, calc(100vw - 32px));
+  width: 100%;
 
   header,
   form {
@@ -135,25 +141,28 @@ function setMode(value: 'recall' | 'path'): void {
     margin-bottom: sys-var(space, sm);
   }
   small {
+    @include apply-font(label-md);
     color: sys-var(color, text, subtle);
   }
   form input {
     flex: 1;
     min-width: 0;
     padding: sys-var(space, sm) sys-var(space, md);
-    border: 1px solid sys-var(color, border, subtle);
+    border: 1px solid sys-var(color, border, base);
+    border-radius: sys-var(radius, none);
     color: sys-var(color, text, base);
     background: sys-var(color, surface, base);
     @include apply-font(body-md);
   }
   form input:focus {
-    outline: 1px solid sys-var(color, border, primary);
+    outline: 1px solid sys-var(color, border, strong);
   }
 
   &__modes {
     display: flex;
     gap: 2px;
     button {
+      @include apply-font(label-lg);
       border: 0;
       padding: 4px 8px;
       color: sys-var(color, text, subtle);
@@ -174,6 +183,8 @@ function setMode(value: 'recall' | 'path'): void {
     overflow: auto;
     background: sys-var(color, border, subtle);
     > button {
+      @include apply-font(body-sm);
+      overflow-wrap: anywhere;
       display: grid;
       gap: 3px;
       padding: sys-var(space, sm);
@@ -186,6 +197,9 @@ function setMode(value: 'recall' | 'path'): void {
     > button:hover {
       background: sys-var(color, surface, subtle);
     }
+    strong {
+      @include apply-font(label-lg);
+    }
     span {
       color: sys-var(color, text, subtle);
     }
diff --git a/apps/client-web/src/components/source/createSource/createSource.md b/apps/client-web/src/components/source/createSource/createSource.md
index d7e5b10b..4e865449 100644
--- a/apps/client-web/src/components/source/createSource/createSource.md
+++ b/apps/client-web/src/components/source/createSource/createSource.md
@@ -1,23 +1,7 @@
-# createSource
+# CreateSource
 
-## Rationale
+提供“创建数据源”按钮与创建弹层。打开后填写昵称、类型和完整配置；`SourceForm` 拥有原始 JSON 草稿和校验，组件拥有持久化及弹层生命周期。
 
-Component for creating a new source in the info-base.
+保存期间禁用编辑、取消、遮罩和 Escape，防止重复创建。失败保留全部输入并显示反馈；只有服务器返回创建对象后才关闭弹层并发出 `create(source: Source)`。列表可以直接加入返回对象，无须以再次读取成功作为创建成功的条件。
 
-## Goals
-
-Provide a form to input source details and emit the creation data.
-
-## Key Concepts
-
-- Source creation
-
-## Specification
-
-Form with fields for nickname, type, and collect at. Emits create event with the data.
-
-## Implementation
-
-### Events
-
-- `create(data: SourceForm)`: Emitted when create button is clicked, with the form data.
+有未保存修改时，取消、Escape 或应用内离开页面要求确认放弃；拒绝时保留输入。确认放弃或创建成功后清空表单。弹层尺寸变化不重建表单。
diff --git a/apps/client-web/src/components/source/createSource/createSource.scss b/apps/client-web/src/components/source/createSource/createSource.scss
index efaff611..3db3bdf7 100644
--- a/apps/client-web/src/components/source/createSource/createSource.scss
+++ b/apps/client-web/src/components/source/createSource/createSource.scss
@@ -2,44 +2,17 @@
   display: flex;
   flex-direction: column;
   gap: sys-var(space, md);
-  padding: sys-var(space, md);
-  box-sizing: border-box;
-  min-width: 420px;
-  max-width: 580px;
-  width: 42vw;
-  flex-shrink: 0;
-
-  .title {
+  width: min(32rem, 80vw);
+  max-width: 100%;
+  min-width: 0;
+  h2 {
     @include apply-font(title-sm);
-    color: sys-var(color, text, base);
     margin: 0;
-    width: 100%;
   }
-
-  .form {
+  &__actions {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
     gap: sys-var(space, sm);
-    padding: sys-var(space, sm);
-    padding-top: 0;
-    padding-bottom: 0;
-    box-sizing: border-box;
-    width: 100%;
-
-    &__collect-at {
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-items: center;
-    }
-  }
-
-  .footer {
-    display: flex;
-    align-items: center;
     justify-content: flex-end;
-    padding: sys-var(space, sm);
-    padding-top: 0;
-    box-sizing: border-box;
-    width: 100%;
   }
 }
diff --git a/apps/client-web/src/components/source/createSource/createSource.ts b/apps/client-web/src/components/source/createSource/createSource.ts
index 8b6564c2..85e4da9c 100644
--- a/apps/client-web/src/components/source/createSource/createSource.ts
+++ b/apps/client-web/src/components/source/createSource/createSource.ts
@@ -1,4 +1,4 @@
-import { SourceForm } from '@inkcre/core'
+import { Source } from '@inkcre/core'
 
 // --- Types ---
 
@@ -11,7 +11,7 @@ export const createSourceProps = {
 
 // --- Emits ---
 export const createSourceEmits = {
-  create: (_data: SourceForm) => true,
+  create: (_data: Source) => true,
 }
 
 // --- Utilities ---
diff --git a/apps/client-web/src/components/source/createSource/createSource.vue b/apps/client-web/src/components/source/createSource/createSource.vue
index 9a968d6f..34c4236c 100644
--- a/apps/client-web/src/components/source/createSource/createSource.vue
+++ b/apps/client-web/src/components/source/createSource/createSource.vue
@@ -1,46 +1,79 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
-import { InkButton } from '@inkcre/ui-web'
+import { ref, useTemplateRef } from 'vue'
+import { onBeforeRouteLeave } from 'vue-router'
+import { InkButton, InkPopup } from '@inkcre/ui-web'
 import sourceForm from '../sourceForm/sourceForm.vue'
 import { createSourceEmits } from './createSource'
 import { SourceForm } from '@inkcre/core'
-import { refManualReset } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
 
 const emit = defineEmits(createSourceEmits)
-
-// --- data ---
-const form = refManualReset(() =>
-  reactive(
-    new SourceForm({
-      nickname: '',
-      type: '',
-      config: {},
-      state: {},
-      storage: null,
-    })
-  )
-)
-
-// --- methods ---
-const onCreate = () => {
-  form.value.create().then(() => {
-    emit('create', form.value)
-    // Reset form on success
-    form.reset()
-  })
+const { t } = useI18n()
+const editor = useTemplateRef('editor')
+const open = ref(false)
+const saving = ref(false)
+const error = ref('')
+const form = ref(SourceForm.parse({ type: '', nickname: '' }))
+function canDiscard() {
+  return !saving.value && (!editor.value?.isDirty || window.confirm(t('source.discardChanges')))
+}
+function onClose() {
+  if (!canDiscard()) return
+  open.value = false
+  form.value = SourceForm.parse({ type: '', nickname: '' })
+  error.value = ''
+}
+onBeforeRouteLeave(canDiscard)
+async function onCreate() {
+  if (saving.value || !editor.value?.canSave) return
+  saving.value = true
+  error.value = ''
+  try {
+    const candidate = SourceForm.parse({ ...form.value, config: editor.value.readConfig() })
+    const created = await candidate.create()
+    emit('create', created)
+    open.value = false
+    form.value = SourceForm.parse({ type: '', nickname: '' })
+  } catch {
+    error.value = t('source.createFailed')
+  } finally {
+    saving.value = false
+  }
 }
 </script>
 
 <template>
-  <div class="create-source">
-    <h2 class="title">Create Source</h2>
-
-    <sourceForm v-model="form" class="form" />
-
-    <div class="footer">
-      <InkButton text="Create" theme="primary" size="md" @click="onCreate" />
+  <InkButton :text="t('source.create')" theme="primary" @click="open = true" />
+  <InkPopup
+    :open="open"
+    position="center"
+    :aria-label="t('source.create')"
+    :close-on-scrim="!saving"
+    :close-on-escape="!saving"
+    @update:open="onClose"
+  >
+    <div class="create-source">
+      <h2>{{ t('source.create') }}</h2>
+      <sourceForm ref="editor" :model-value="form" :disabled="saving" @submit="onCreate">
+        <p v-if="error" role="alert" class="text-feedback-error">{{ error }}</p>
+        <div class="create-source__actions">
+          <InkButton
+            :text="t('common.cancel')"
+            theme="subtle"
+            :disabled="saving"
+            @click="onClose"
+          />
+          <InkButton
+            :text="t('source.create')"
+            theme="primary"
+            native-type="submit"
+            :is-loading="saving"
+            :disabled="!editor?.canSave"
+          />
+        </div>
+      </sourceForm>
     </div>
-  </div>
+  </InkPopup>
 </template>
 
 <style lang="scss" scoped src="./createSource.scss" />
diff --git a/apps/client-web/src/components/source/sourceCard/sourceCard.md b/apps/client-web/src/components/source/sourceCard/sourceCard.md
index 10323e31..3d6c97fb 100644
--- a/apps/client-web/src/components/source/sourceCard/sourceCard.md
+++ b/apps/client-web/src/components/source/sourceCard/sourceCard.md
@@ -1,31 +1,7 @@
 # SourceCard
 
-A card component for displaying and managing source information.
+来源列表中的识别条目，接收 `source: Source`。名称链接进入完整配置与任务详情；无昵称时显示“未命名数据源”，类型与 ID 继续区分不同来源。普通名称使用正文字体，技术标识局部使用等宽。
 
-## Props
+条目读取近期任务，存在 pending／running 任务时直接提供任务链接，否则提供立即采集。读取期间显示进度，读取失败显示错误与重试；不能从读取失败推断当前没有任务。创建任务期间禁止重复操作，未能确认结果时提示先检查任务列表，不自动重试。
 
-- `source` (SourceData): Source data object containing:
-  - `id` (number): Source ID
-  - `nickname` (string): Source nickname
-  - `type` (string): Source type
-  - `config` (object): Source configuration
-  - `collectAt` (string, optional): Collection schedule
-
-## Emits
-
-- `edit`: Emitted when edit button is clicked with source ID
-- `delete`: Emitted when delete button is clicked with source ID
-- `run`: Emitted when run now button is clicked with source ID
-- `editConfig`: Emitted when edit config button is clicked with source ID
-
-## Usage
-
-```vue
-<SourceCard
-  :source="sourceData"
-  @edit="handleEdit"
-  @delete="handleDelete"
-  @run="handleRun"
-  @editConfig="handleEditConfig"
-/>
-```
+列表不承载配置 JSON、行内昵称编辑或删除。完整配置、昵称与类型修改、删除确认由来源详情负责。卡片外壳没有导航事件；名称和任务使用原生链接，键盘与窄容器中均保留相同入口。
diff --git a/apps/client-web/src/components/source/sourceCard/sourceCard.scss b/apps/client-web/src/components/source/sourceCard/sourceCard.scss
index 8b594f27..f741f012 100644
--- a/apps/client-web/src/components/source/sourceCard/sourceCard.scss
+++ b/apps/client-web/src/components/source/sourceCard/sourceCard.scss
@@ -1,150 +1,43 @@
 .source-card {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: center;
   gap: sys-var(space, md);
-  padding: sys-var(space, md);
-  border: 1px solid sys-var(color, border, base);
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 280px;
-  max-width: 380px;
-  cursor: pointer;
-  transition:
-    background-color 0.2s,
-    border-color 0.2s;
-
-  &:hover {
-    border-color: sys-var(color, border, subtle);
-  }
-
-  &__metadata {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  &__left {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  &__type {
-    @include apply-font(label-lg);
-    color: sys-var(color, text, subtle);
-    width: 100%;
-  }
-
-  &__nickname {
+  padding-block: sys-var(space, md);
+  border-bottom: 1px solid sys-var(color, border, subtle);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  &__identity {
+    flex: 1 1 24rem;
+    min-width: 0;
+  }
+  &__name {
     @include apply-font(body-lg);
     color: sys-var(color, text, base);
-    width: 100%;
-  }
-
-  &__right {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  &__id-label,
-  &__id {
-    @include apply-font(label-lg, mono);
-    color: sys-var(color, text, subtle);
-    text-align: right;
-    white-space: nowrap;
-  }
-
-  &__collect-at {
-    white-space: nowrap;
+    text-decoration: underline;
   }
-
-  &__config {
+  &__metadata {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
     gap: sys-var(space, sm);
-    padding: sys-var(space, sm);
-    border: 1px solid sys-var(color, border, muted);
-    box-sizing: border-box;
-    height: 96px;
-    overflow: auto;
-    width: 100%;
-  }
-
-  &__config-text {
-    @include apply-font(label-lg, mono);
+    margin-top: sys-var(space, xs);
+    @include apply-font(label-md, $mono: true);
     color: sys-var(color, text, subtle);
-    margin: 0;
-    white-space: pre-wrap;
-    width: 100%;
   }
-
-  &__open-job {
-    @include apply-font(label-md);
-    color: sys-var(color, text, base);
-    text-decoration: underline;
-    cursor: pointer;
-    width: 100%;
-  }
-
   &__operations {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  &__operations-left {
-    display: flex;
-    gap: 10px;
-    align-items: flex-start;
-  }
-
-  &__operations-right {
-    display: flex;
     gap: sys-var(space, sm);
-    align-items: center;
+    @include apply-font(body-sm);
   }
-}
-
-.collect-at {
-  &__title {
-    @include apply-font(title-sm);
+  &__operations a {
     color: sys-var(color, text, base);
-    margin-bottom: sys-var(space, md);
-  }
-
-  &__actions {
-    display: flex;
-    gap: sys-var(space, sm);
-    justify-content: flex-end;
-    align-self: stretch;
-    margin-top: sys-var(space, md);
+    text-decoration: underline;
   }
-}
-
-.config-editor {
-  display: flex;
-  flex-direction: column;
-  gap: sys-var(space, md);
-  padding: sys-var(space, lg);
-  background: sys-var(color, surface, base);
-  border-radius: sys-var(radius, md);
-  box-shadow: sys-var(shadow, lg);
-  min-width: 400px;
-  max-width: 600px;
-
-  &__title {
-    @include apply-font(title-sm);
-    color: sys-var(color, text, base);
+  &__error {
+    flex-basis: 100%;
     margin: 0;
-  }
-
-  &__actions {
-    display: flex;
-    gap: sys-var(space, sm);
-    justify-content: flex-end;
-    align-self: stretch;
+    @include apply-font(body-sm);
   }
 }
diff --git a/apps/client-web/src/components/source/sourceCard/sourceCard.ts b/apps/client-web/src/components/source/sourceCard/sourceCard.ts
index e4cd4d50..4b83a558 100644
--- a/apps/client-web/src/components/source/sourceCard/sourceCard.ts
+++ b/apps/client-web/src/components/source/sourceCard/sourceCard.ts
@@ -1,14 +1,5 @@
-import { Source } from '@inkcre/core'
+import type { Source } from '@inkcre/core'
 
-// --- Types ---
-
-// --- Props ---
-export type SourceCardProps =
-  | { source: Source; sourceId?: never }
-  | { source?: never; sourceId: number }
-
-// --- Emits ---
-export const sourceCardEmits = {
-  delete: (_source: Source) => true,
-  editConfig: (_source: Source) => true,
-} as const
+export interface SourceCardProps {
+  source: Source
+}
diff --git a/apps/client-web/src/components/source/sourceCard/sourceCard.vue b/apps/client-web/src/components/source/sourceCard/sourceCard.vue
index b6a03734..cb7a4502 100644
--- a/apps/client-web/src/components/source/sourceCard/sourceCard.vue
+++ b/apps/client-web/src/components/source/sourceCard/sourceCard.vue
@@ -1,190 +1,81 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, ref } from 'vue'
+import { RouterLink, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { InkButton, InkInput, InkPopup, InkJsonEditor, InkDoubleCheck } from '@inkcre/ui-web'
-import { sourceCardEmits, type SourceCardProps } from './sourceCard'
-import { Job, JobManager, JobStatus, Source, SourceType } from '@inkcre/core'
-import { computedAsync } from '@vueuse/core'
+import { InkButton } from '@inkcre/ui-web'
+import type { SourceCardProps } from './sourceCard'
+import { Job, JobManager, JobStatus } from '@inkcre/core'
+import { useAsyncState } from '@vueuse/core'
 
 const props = defineProps<SourceCardProps>()
-const emit = defineEmits(sourceCardEmits)
 const { t } = useI18n()
 const router = useRouter()
-
-// --- data ---
-const sourceData = computedAsync(
-  async (): Promise<Source> => {
-    if (props.source) {
-      return props.source
-    } else if (props.sourceId) {
-      return await Source.get(props.sourceId)
-    }
-    throw new Error("Either 'source' or 'sourceId' must be provided")
-  },
-  undefined,
-  { shallow: false }
-)
-const sourceType = computedAsync(
-  async (): Promise<SourceType | undefined> => {
-    if (sourceData.value?.type) {
-      return await SourceType.get(sourceData.value.type)
-    }
-    return undefined
-  },
-  undefined,
-  { shallow: false }
-)
-const latestOpenJob = computedAsync(
-  async (): Promise<Job | null> => {
-    if (sourceData.value?.id) {
-      const jobs = await Job.getBySource(sourceData.value.id)
-      return (
-        jobs.find((job) => job.status === JobStatus.PENDING || job.status === JobStatus.RUNNING) ??
-        null
-      )
-    }
-    return null
-  },
-  null,
-  { shallow: true }
-)
-const configPopupOpen = ref(false)
-const configModel = ref('')
-const nicknameModel = ref('')
-
-// --- watchers ---
-watch(
-  () => sourceData.value?.nickname,
-  (newVal) => {
-    nicknameModel.value = newVal || ''
-  },
-  { immediate: true }
-)
-
-// --- computed ---
-const formattedConfig = computed(() => {
-  return JSON.stringify(sourceData.value?.config || {}, null, 2)
+const {
+  state: jobs,
+  isLoading,
+  error: jobsError,
+  execute: loadJobs,
+} = useAsyncState(() => Job.getBySource(props.source.id), [], {
+  // Loading errors are shown on this row with an explicit retry action.
+  onError: () => undefined,
 })
-
-// --- methods ---
-const onNicknameSave = (newNickname: string) => {
-  if (sourceData.value) {
-    sourceData.value.nickname = newNickname
-    sourceData.value.save()
-  }
-}
-
-const onEditConfig = () => {
-  configModel.value = formattedConfig.value
-  configPopupOpen.value = true
-}
-
-const onRunNow = async () => {
-  const job = await JobManager.create('core.source.collect.v1', {
-    source: sourceData.value!.id,
-    config: {},
-  })
-  router.push(`/jobs/${job.id}`)
-}
-
-const onDelete = () => {
-  emit('delete', sourceData.value!)
-}
-
-const onCheckOpenJob = () => {
-  if (latestOpenJob.value) {
-    router.push(`/jobs/${latestOpenJob.value.id}`)
-  }
-}
-
-const onCardClick = () => {
-  if (sourceData.value) {
-    router.push(`/sources/${sourceData.value.id}`)
-  }
-}
-
-const onConfirmConfig = () => {
+const openJob = computed(() =>
+  jobs.value.find((job) => job.status === JobStatus.PENDING || job.status === JobStatus.RUNNING)
+)
+const running = ref(false)
+const runError = ref('')
+async function onRunNow() {
+  if (running.value) return
+  running.value = true
+  runError.value = ''
   try {
-    const parsedConfig = JSON.parse(configModel.value)
-    sourceData.value!.config = parsedConfig
-    sourceData.value!.save()
-    configPopupOpen.value = false
-  } catch (error) {
-    // Handle JSON parse error, maybe show a toast or something
-    console.error('Invalid JSON:', error)
+    const job = await JobManager.create('core.source.collect.v1', {
+      source: props.source.id,
+      config: {},
+    })
+    jobs.value = [job, ...jobs.value]
+    await router.push(`/jobs/${job.id}`)
+  } catch {
+    runError.value = t('source.runFailed')
+  } finally {
+    running.value = false
   }
 }
 </script>
 
 <template>
-  <div v-if="sourceData" class="source-card" @click="onCardClick">
-    <div class="source-card__metadata">
-      <div class="source-card__left">
-        <span class="source-card__type">{{ sourceData.type }}</span>
-        <InkInput
-          :modelValue="nicknameModel"
-          type="inline"
-          placeholder="Click to edit nickname"
-          @click.stop
-          @update:modelValue="
-            (value: string) => {
-              nicknameModel = value
-              onNicknameSave(value)
-            }
-          "
-        >
-          <span class="source-card__nickname">{{ nicknameModel }}</span>
-        </InkInput>
-      </div>
-      <div class="source-card__right">
-        <span class="source-card__id-label">#</span>
-        <span class="source-card__id">{{ sourceData.id }}</span>
+  <article class="source-card">
+    <div class="source-card__identity">
+      <RouterLink :to="`/sources/${source.id}`" class="source-card__name">{{
+        source.nickname || t('source.unnamed')
+      }}</RouterLink>
+      <div class="source-card__metadata">
+        <code>{{ source.type }}</code
+        ><span>#{{ source.id }}</span>
       </div>
     </div>
-
-    <div class="source-card__config">
-      <pre class="source-card__config-text">{{ formattedConfig }}</pre>
-    </div>
-
-    <div v-if="latestOpenJob" class="source-card__open-job" @click.stop="onCheckOpenJob">
-      {{ t('source.checkOpenJob') }}
-    </div>
-
-    <div class="source-card__operations" @click.stop>
-      <div class="source-card__operations-left">
-        <InkDoubleCheck
-          :title="t('source.deleteConfirmTitle')"
-          :message="t('source.deleteConfirmMessage')"
-          :confirmText="t('common.confirm')"
-          :cancelText="t('common.cancel')"
-          @confirm="onDelete"
-        >
-          <InkButton text="Delete" theme="danger" size="sm" />
-        </InkDoubleCheck>
-      </div>
-      <div class="source-card__operations-right">
-        <InkButton text="Edit Config" theme="subtle" size="sm" @click="onEditConfig" />
-        <InkButton text="Run Now" theme="subtle" size="sm" @click="onRunNow" />
-      </div>
-    </div>
-  </div>
-
-  <InkPopup v-model:open="configPopupOpen" position="center">
-    <div class="config-editor">
-      <h3 class="config-editor__title">Edit Config</h3>
-      <InkJsonEditor
-        v-model="configModel"
-        :schema="sourceType?.config_schema"
-        placeholder="Enter JSON config..."
-        :rows="6"
+    <div class="source-card__operations">
+      <span v-if="isLoading" role="status">{{ t('source.jobsLoading') }}</span>
+      <template v-else-if="jobsError">
+        <span role="alert" class="text-feedback-error">{{ t('source.jobsFailed') }}</span>
+        <InkButton :text="t('source.retry')" theme="subtle" size="sm" @click="loadJobs()" />
+      </template>
+      <RouterLink v-else-if="openJob" :to="`/jobs/${openJob.id}`">{{
+        t('source.checkOpenJob')
+      }}</RouterLink>
+      <InkButton
+        v-else
+        :text="t('source.runNow')"
+        theme="subtle"
+        size="sm"
+        :is-loading="running"
+        @click="onRunNow"
       />
-      <div class="config-editor__actions">
-        <InkButton text="Cancel" theme="subtle" @click="configPopupOpen = false" />
-        <InkButton text="Confirm" theme="primary" @click="onConfirmConfig" />
-      </div>
     </div>
-  </InkPopup>
+    <p v-if="runError" role="alert" class="source-card__error text-feedback-error">
+      {{ runError }}
+    </p>
+  </article>
 </template>
 
 <style lang="scss" scoped src="./sourceCard.scss" />
diff --git a/apps/client-web/src/components/source/sourceForm/sourceForm.md b/apps/client-web/src/components/source/sourceForm/sourceForm.md
index 28044ea5..e70aaa39 100644
--- a/apps/client-web/src/components/source/sourceForm/sourceForm.md
+++ b/apps/client-web/src/components/source/sourceForm/sourceForm.md
@@ -1,26 +1,7 @@
-# sourceForm
+# SourceForm
 
-## Rationale
+来源创建与详情共用的纵向表单，接收 `modelValue: Source | SourceForm` 和 `disabled`。昵称与类型修改传入的草稿对象；调用方必须提供独立草稿，不能把已保存对象直接传入。配置保留为组件内部的原始 JSON 文本，包括尚未完整或无效的内容。
 
-Provides a reusable form for editing source information including nickname, type, config, and collect schedule.
+表单读取可用来源类型，并使用所选类型的配置 schema 校验。读取失败或类型不可用时直接说明问题并阻止保存；重试读取不会覆盖输入。`canSave` 仅在类型可用且当前文本验证通过时成立，`readConfig()` 在该边界解析配置。切换类型立即使旧校验失效。
 
-## Goals
-
-Allow users to edit source configuration in a consistent way across different views.
-
-## Specification
-
-- Pure form component with v-model support
-- Provides all fields: nickname, type, config (InkJsonEditor), collect schedule
-- No save button - parent component handles submission
-- Supports both create and edit modes
-
-## Implementation
-
-### Props
-
-- `modelValue` (`Source | SourceForm`, required): The source data object
-
-### Events
-
-- `update:modelValue(source: Source | SourceForm)`: Emitted when form data changes
+组件另暴露 `isDirty` 与已加载的 `sourceTypes`，供父级保护未保存修改，并按已保存来源的类型选择采集配置规则。传入新的草稿对象会重置 JSON 和修改基线；只有确认保存成功或明确放弃时才应更换对象。父级在默认槽放提交、反馈与取消等操作，通过 `submit` 处理原生表单提交；表单自身不持久化数据。
diff --git a/apps/client-web/src/components/source/sourceForm/sourceForm.scss b/apps/client-web/src/components/source/sourceForm/sourceForm.scss
index 98d5fbef..53bec3d1 100644
--- a/apps/client-web/src/components/source/sourceForm/sourceForm.scss
+++ b/apps/client-web/src/components/source/sourceForm/sourceForm.scss
@@ -1,10 +1,15 @@
 .source-form {
-  display: flex;
-  flex-direction: column;
+  min-width: 0;
   gap: sys-var(space, md);
 
-  &__collect-at-placeholder {
-    @include apply-font(body-md);
-    color: sys-var(color, text, subtle);
+  p {
+    margin: 0;
+    @include apply-font(body-sm);
+  }
+  &__error {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: sys-var(space, sm);
   }
 }
diff --git a/apps/client-web/src/components/source/sourceForm/sourceForm.ts b/apps/client-web/src/components/source/sourceForm/sourceForm.ts
index e6ad6d3f..de3b0aa3 100644
--- a/apps/client-web/src/components/source/sourceForm/sourceForm.ts
+++ b/apps/client-web/src/components/source/sourceForm/sourceForm.ts
@@ -1,15 +1,7 @@
 import type { PropType } from 'vue'
 import { Source, SourceForm } from '@inkcre/core'
 
-// --- Props ---
 export const sourceFormProps = {
-  modelValue: {
-    type: Object as PropType<Source | SourceForm>,
-    required: true,
-  },
-} as const
-
-// --- Emits ---
-export const sourceFormEmits = {
-  'update:modelValue': (_source: Source | SourceForm) => true,
+  disabled: { type: Boolean, default: false },
+  modelValue: { type: Object as PropType<Source | SourceForm>, required: true },
 } as const
diff --git a/apps/client-web/src/components/source/sourceForm/sourceForm.vue b/apps/client-web/src/components/source/sourceForm/sourceForm.vue
index 7e6109f2..d548a949 100644
--- a/apps/client-web/src/components/source/sourceForm/sourceForm.vue
+++ b/apps/client-web/src/components/source/sourceForm/sourceForm.vue
@@ -1,59 +1,110 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { InkInput, InkJsonEditor, InkDropdown, type DropdownOption, InkForm } from '@inkcre/ui-web'
-import { sourceFormProps, sourceFormEmits } from './sourceForm'
+import { computed, ref, watch } from 'vue'
+import { useAsyncState } from '@vueuse/core'
+import {
+  InkInput,
+  InkJsonEditor,
+  InkDropdown,
+  InkForm,
+  InkButton,
+  type JsonEditorValidation,
+} from '@inkcre/ui-web'
+import { sourceFormProps } from './sourceForm'
 import { SourceType } from '@inkcre/core'
 import { useI18n } from 'vue-i18n'
 
 const props = defineProps(sourceFormProps)
-const emit = defineEmits(sourceFormEmits)
 const { t } = useI18n()
-
-// --- data ---
-const sourceTypes = ref<(DropdownOption & SourceType)[]>([])
-
-const configJson = computed<string>({
-  get: () => {
-    return JSON.stringify(props.modelValue.config, null, 2)
-  },
-  set: (newVal: string) => {
-    props.modelValue.config = JSON.parse(newVal)
-  },
+const {
+  state: sourceTypes,
+  isLoading: typesLoading,
+  error: typesError,
+  execute: loadTypes,
+} = useAsyncState(() => SourceType.getAll(), [], {
+  // The form renders the error and retains its draft for retry.
+  onError: () => undefined,
 })
-
-const currentSourceType = computed(() => {
-  return sourceTypes.value.find((type) => type.value === props.modelValue.type)
+const typeOptions = computed(() =>
+  sourceTypes.value.map((type) => ({ label: type.id, value: type.id }))
+)
+const currentSourceType = computed(() =>
+  sourceTypes.value.find((type) => type.id === props.modelValue.type)
+)
+const configJson = ref('')
+const validation = ref<JsonEditorValidation>()
+const initial = ref({
+  nickname: props.modelValue.nickname,
+  type: props.modelValue.type,
+  config: '',
 })
-
-// --- methods ---
-const loadSourceTypes = async (): Promise<(DropdownOption & SourceType)[]> => {
-  const result = await SourceType.getAll()
-  return result.map((type) => ({
-    label: type.id,
-    value: type.id,
-    ...type,
-  }))
+watch(
+  () => props.modelValue,
+  (source) => {
+    configJson.value = JSON.stringify(source.config, null, 2)
+    initial.value = { nickname: source.nickname, type: source.type, config: configJson.value }
+    validation.value = undefined
+  },
+  { immediate: true }
+)
+watch(
+  currentSourceType,
+  () => {
+    validation.value = undefined
+  },
+  { flush: 'sync' }
+)
+const isDirty = computed(
+  () =>
+    props.modelValue.nickname !== initial.value.nickname ||
+    props.modelValue.type !== initial.value.type ||
+    configJson.value !== initial.value.config
+)
+const canSave = computed(
+  () =>
+    !typesLoading.value &&
+    !typesError.value &&
+    Boolean(currentSourceType.value) &&
+    validation.value?.status === 'valid' &&
+    validation.value.text === configJson.value
+)
+function readConfig(): unknown {
+  if (!canSave.value) throw new Error(t('common.invalidConfig'))
+  return JSON.parse(configJson.value)
 }
+defineExpose({ canSave, isDirty, readConfig, sourceTypes })
 </script>
 
 <template>
-  <InkForm class="source-form">
-    <InkInput v-model="modelValue.nickname" :label="t('source.nickname')" editable />
-
+  <InkForm class="source-form" layout="col">
+    <InkInput v-model="modelValue.nickname" :label="t('source.nickname')" :disabled="disabled" />
     <InkDropdown
       v-model="modelValue.type"
-      v-model:options="sourceTypes"
-      :refresher="loadSourceTypes"
+      :options="typeOptions"
       :label="t('source.type')"
+      :disabled="disabled || typesLoading"
     />
-
+    <p v-if="typesLoading" role="status">{{ t('source.typesLoading') }}</p>
+    <div v-else-if="typesError" class="source-form__error">
+      <p role="alert" class="text-feedback-error">{{ t('source.typesFailed') }}</p>
+      <InkButton :text="t('source.retry')" theme="subtle" size="sm" @click="loadTypes()" />
+    </div>
+    <p
+      v-else-if="!sourceTypes.length || (modelValue.type && !currentSourceType)"
+      role="alert"
+      class="text-feedback-error"
+    >
+      {{ t('source.typeUnavailable') }}
+    </p>
     <InkJsonEditor
       v-model="configJson"
       :schema="currentSourceType?.config_schema"
       :label="t('source.config')"
       :placeholder="t('source.configPlaceholder')"
-      :rows="6"
+      :rows="8"
+      :disabled="disabled"
+      @validation="validation = $event"
     />
+    <slot />
   </InkForm>
 </template>
 
diff --git a/apps/client-web/src/core.ts b/apps/client-web/src/core.ts
index 58db11ca..7bca4d36 100644
--- a/apps/client-web/src/core.ts
+++ b/apps/client-web/src/core.ts
@@ -32,6 +32,7 @@ import {
   type WebExtensionModule,
 } from '@inkcre/extension-runtime-client-web'
 import * as InKCreCore from '@inkcre/core'
+import * as InKCreUi from '@inkcre/ui-web'
 import * as Zod from 'zod'
 import * as Vue from 'vue'
 import * as Pinia from 'pinia'
@@ -165,6 +166,14 @@ export function initializeModuleFederation(): void {
     name: 'host',
     remotes: [],
     shared: {
+      '@inkcre/ui-web': {
+        version: packageJson.dependencies['@inkcre/ui-web'],
+        lib: () => InKCreUi,
+        shareConfig: {
+          singleton: true,
+          requiredVersion: packageJson.dependencies['@inkcre/ui-web'],
+        },
+      },
       zod: {
         version: packageJson.dependencies.zod,
         lib: () => Zod,
diff --git a/apps/client-web/src/locales/index.ts b/apps/client-web/src/locales/index.ts
index 4ac4c4a3..78c49315 100644
--- a/apps/client-web/src/locales/index.ts
+++ b/apps/client-web/src/locales/index.ts
@@ -1,4 +1,5 @@
 import { createI18n } from 'vue-i18n'
+import { locales as uiLocales } from '@inkcre/ui-web/locales'
 
 export const SUPPORT_LOCALES = ['en', 'zh-CN'] as const
 export type SupportLocale = (typeof SUPPORT_LOCALES)[number]
@@ -57,7 +58,7 @@ export async function loadLocaleMessages(locale: SupportLocale) {
   // Load the locale messages
   try {
     const messages = await import(`./messages/${locale}.json`)
-    i18n.global.setLocaleMessage(locale, messages.default)
+    i18n.global.setLocaleMessage(locale, { ...messages.default, ui: uiLocales[locale] })
     loadedLanguages.add(locale)
   } catch (error) {
     console.error(
diff --git a/apps/client-web/src/locales/messages/en.json b/apps/client-web/src/locales/messages/en.json
index f1e79393..a857e427 100644
--- a/apps/client-web/src/locales/messages/en.json
+++ b/apps/client-web/src/locales/messages/en.json
@@ -8,7 +8,11 @@
     "confirmAction": "Confirm Action",
     "back": "Back",
     "loading": "Loading...",
-    "loadMore": "Load More"
+    "loadMore": "Load More",
+    "saveFailed": "Unable to save. Please try again.",
+    "invalidConfig": "Enter a valid JSON configuration object before saving.",
+    "close": "Close",
+    "refresh": "Refresh"
   },
   "header": {
     "brand": "InKCre"
@@ -57,14 +61,14 @@
     "id": "ID",
     "collectAt": "Collect At",
     "config": "Config",
-    "jobs": "Jobs",
-    "newJob": "New Job",
+    "jobs": "Recent tasks",
+    "newJob": "New task",
     "newJobTitle": "Create New Collect Job",
     "newJobDescription": "Create a new collect job for this source. The job will be queued and executed as soon as possible.",
-    "createJob": "Create Job",
+    "createJob": "Create task",
     "editConfig": "Edit Config",
     "delete": "Delete",
-    "noJobs": "No collect jobs found",
+    "noJobs": "No recent collection tasks.",
     "nicknamePlaceholder": "Click to edit nickname",
     "collectAtNotSet": "click to set",
     "collectAtConfig": "Config source auto collecting",
@@ -73,7 +77,37 @@
     "prevPage": "Previous",
     "nextPage": "Next",
     "pageInfo": "Page {page} of {total}",
-    "checkOpenJob": "Check open collect job"
+    "checkOpenJob": "View active collection",
+    "listFailed": "Unable to load sources.",
+    "empty": "No sources yet. Create a source to start collecting.",
+    "create": "Create source",
+    "unnamed": "Unnamed source",
+    "retry": "Retry",
+    "runNow": "Collect now",
+    "jobsLoading": "Loading collection status…",
+    "jobsFailed": "Unable to load collection tasks.",
+    "runFailed": "Unable to confirm task creation. Check the task list before trying again.",
+    "detailFailed": "Unable to load this source. It may have been deleted or access is unavailable.",
+    "discardChanges": "Discard unsaved changes and leave?",
+    "saved": "Changes saved.",
+    "deleteFailed": "Unable to delete. The item is still shown until deletion is confirmed.",
+    "createFailed": "Unable to confirm creation. Check the source list before trying again.",
+    "schedules": "Schedules",
+    "addSchedule": "Add schedule",
+    "schedulesFailed": "Unable to load schedules.",
+    "noSchedules": "No scheduled collection.",
+    "scheduleFailed": "Unable to confirm the schedule. Check the schedule list before trying again.",
+    "cronSchedule": "Schedule (five-field cron)",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "deleteSchedule": "Delete schedule",
+    "deleteScheduleMessage": "Future collection using this schedule will stop. Existing tasks will remain.",
+    "ordinary": "Ordinary collection",
+    "backfill": "Historical backfill",
+    "collectionIntent": "Collection intent",
+    "typesLoading": "Loading source types…",
+    "typesFailed": "Unable to load source types. Configuration cannot be saved until its schema is available.",
+    "typeUnavailable": "This source type is unavailable. Check installed extensions or choose an available type."
   },
   "extension": {
     "installNew": "Install Extension",
diff --git a/apps/client-web/src/locales/messages/zh-CN.json b/apps/client-web/src/locales/messages/zh-CN.json
index 7bda22b9..b84d2342 100644
--- a/apps/client-web/src/locales/messages/zh-CN.json
+++ b/apps/client-web/src/locales/messages/zh-CN.json
@@ -8,7 +8,11 @@
     "confirmAction": "确认操作",
     "back": "返回",
     "loading": "加载中...",
-    "loadMore": "加载更多"
+    "loadMore": "加载更多",
+    "saveFailed": "保存失败，请稍后重试。",
+    "invalidConfig": "请输入有效的 JSON 配置对象后再保存。",
+    "close": "关闭",
+    "refresh": "刷新"
   },
   "header": {
     "brand": "第三尺寸"
@@ -57,14 +61,14 @@
     "id": "ID",
     "collectAt": "采集时间",
     "config": "配置",
-    "jobs": "任务",
+    "jobs": "近期任务",
     "newJob": "新建任务",
     "newJobTitle": "创建新采集任务",
     "newJobDescription": "为此数据源创建新的采集任务。该任务将被加入队列并尽快执行。",
     "createJob": "创建任务",
     "editConfig": "编辑配置",
     "delete": "删除",
-    "noJobs": "未找到采集任务",
+    "noJobs": "暂无近期采集任务。",
     "nicknamePlaceholder": "点击编辑昵称",
     "collectAtNotSet": "点击设置",
     "collectAtConfig": "配置数据源自动采集",
@@ -73,7 +77,38 @@
     "prevPage": "上一页",
     "nextPage": "下一页",
     "pageInfo": "第 {page} 页，共 {total} 页",
-    "checkRunningJob": "查看运行中的采集任务"
+    "checkRunningJob": "查看运行中的采集任务",
+    "listFailed": "无法加载数据源。",
+    "empty": "还没有数据源。创建后即可开始采集。",
+    "create": "创建数据源",
+    "unnamed": "未命名数据源",
+    "retry": "重试",
+    "runNow": "立即采集",
+    "checkOpenJob": "查看当前采集任务",
+    "jobsLoading": "正在读取采集状态…",
+    "jobsFailed": "无法读取采集任务。",
+    "runFailed": "未能确认任务创建结果。请先查看任务列表，再决定是否重试。",
+    "detailFailed": "无法读取此数据源。它可能已被删除，或当前无法访问。",
+    "discardChanges": "放弃尚未保存的修改并离开？",
+    "saved": "修改已保存。",
+    "deleteFailed": "删除未完成。确认删除成功前会保留当前条目。",
+    "createFailed": "未能确认创建结果。请先检查来源列表，再决定是否重试。",
+    "schedules": "定时采集",
+    "addSchedule": "添加定时采集",
+    "schedulesFailed": "无法读取定时采集计划。",
+    "noSchedules": "尚未设置定时采集。",
+    "scheduleFailed": "未能确认计划是否创建成功。请先检查计划列表，再决定是否重试。",
+    "cronSchedule": "执行时间（五段 Cron 表达式）",
+    "enabled": "已启用",
+    "disabled": "已停用",
+    "deleteSchedule": "删除定时采集",
+    "deleteScheduleMessage": "删除后将停止按此计划创建采集任务，已有任务会保留。",
+    "ordinary": "普通采集",
+    "backfill": "历史回补",
+    "collectionIntent": "采集方式",
+    "typesLoading": "正在读取数据源类型…",
+    "typesFailed": "无法读取数据源类型。取得对应配置规则后才能保存。",
+    "typeUnavailable": "当前数据源类型不可用，请检查已安装的扩展或选择可用类型。"
   },
   "extension": {
     "installNew": "安装扩展",
diff --git a/apps/client-web/src/main.ts b/apps/client-web/src/main.ts
index 5e7823f2..a06fd12c 100644
--- a/apps/client-web/src/main.ts
+++ b/apps/client-web/src/main.ts
@@ -1,4 +1,5 @@
-import { createApp } from 'vue'
+import { computed, createApp } from 'vue'
+import { INK_I18N_KEY, type InkI18n } from '@inkcre/ui-web'
 import App from './App.vue'
 import i18n from './locales'
 import router from './router'
@@ -13,6 +14,10 @@ import '@vue-flow/core/dist/style.css'
 const app = createApp(App)
 
 app.use(i18n)
+app.provide<InkI18n>(INK_I18N_KEY, {
+  t: (key) => i18n.global.t(`ui.${key}`),
+  locale: computed(() => i18n.global.locale.value),
+})
 app.use(store)
 app.use(router)
 setInfoBaseRouter(createInfoBaseRouterAdapter(router))
diff --git a/apps/client-web/src/views/extensions/extensions.scss b/apps/client-web/src/views/extensions/extensions.scss
index 4782420e..8dbcd5b6 100644
--- a/apps/client-web/src/views/extensions/extensions.scss
+++ b/apps/client-web/src/views/extensions/extensions.scss
@@ -1,21 +1,24 @@
 .extensions-view {
   display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  align-items: flex-start;
+  min-width: 0;
+  overflow-y: auto;
   gap: sys-var(space, lg);
   flex: 1;
   align-self: stretch;
   box-sizing: border-box;
-  padding: sys-var(space, lg) sys-var(space, xl);
+  padding: clamp(16px, 4vw, 32px);
   background: sys-var(color, surface, base);
 
   &__list {
     display: flex;
     flex-direction: column;
     gap: sys-var(space, md);
-    flex: 1;
+    flex: 1 1 24rem;
     min-height: 120px;
-    min-width: 120px;
-    overflow-x: hidden;
-    overflow-y: auto;
+    min-width: 0;
   }
 
   &__header {
@@ -26,11 +29,11 @@
   &__notice {
     @include apply-font(body-sm);
     margin: 0;
-    color: sys-var(color, text, muted);
+    color: sys-var(color, text, subtle);
   }
 
   &__error {
     @include apply-font(body-sm);
-    color: sys-var(color, danger, base);
+    color: sys-var(color, feedback, error);
   }
 }
diff --git a/apps/client-web/src/views/info-base/graph/graph.scss b/apps/client-web/src/views/info-base/graph/graph.scss
index c56df907..4847b34d 100644
--- a/apps/client-web/src/views/info-base/graph/graph.scss
+++ b/apps/client-web/src/views/info-base/graph/graph.scss
@@ -3,88 +3,109 @@
 
 .graph-view {
   position: relative;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
-  min-height: 520px;
+  min-width: 0;
+  min-height: 0;
   overflow: hidden;
   background: sys-var(color, surface, base);
-
+  color: sys-var(color, text, base);
   &__flow {
-    width: 100%;
-    height: 100%;
+    flex: 1;
+    min-height: 0;
   }
-
   &__toolbar {
-    position: absolute;
-    top: sys-var(space, md);
-    left: 50%;
-    z-index: 5;
     display: flex;
-    gap: sys-var(space, sm);
-    transform: translateX(-50%);
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: sys-var(space, sm) sys-var(space, md);
+    padding: sys-var(space, md);
+    border-bottom: 1px solid sys-var(color, border, subtle);
+    z-index: 5;
   }
-
-  &__control-group {
+  &__context {
+    min-width: 0;
+    flex: 1 1 12rem;
+    overflow-wrap: anywhere;
+  }
+  h1 {
+    margin: 0;
+    @include apply-font(title-sm);
+  }
+  &__context p {
+    margin: sys-var(space, xs) 0 0;
+    @include apply-font(body-sm);
+    color: sys-var(color, text, subtle);
+  }
+  &__actions {
     display: flex;
-    overflow: hidden;
-    border: 1px solid sys-var(color, border, subtle);
-    border-radius: sys-var(radius, none);
-    background: sys-var(color, surface, base);
-
-    button {
-      min-height: 30px;
-      padding: 0 sys-var(space, sm);
-      border: 0;
-      border-right: 1px solid sys-var(color, border, subtle);
-      color: sys-var(color, text, subtle);
-      background: transparent;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: sys-var(space, md);
+  }
+  &__options {
+    summary {
+      @include apply-font(label-md);
       cursor: pointer;
-      @include apply-font(label-sm);
-
-      &:last-child {
-        border-right: 0;
-      }
-      &:hover {
-        color: sys-var(color, text, base);
-      }
-      &[aria-pressed='true'] {
-        color: sys-var(color, text, base);
-        background: sys-var(color, surface, subtle);
-      }
-      &:focus-visible {
-        outline: 1px solid sys-var(color, border, primary);
-        outline-offset: -2px;
-      }
+    }
+    summary:focus-visible {
+      outline: 2px solid sys-var(color, border, strong);
+      outline-offset: 2px;
+    }
+    form {
+      position: absolute;
+      top: 100%;
+      right: sys-var(space, md);
+      width: min(20rem, calc(100vw - 2 * var(--sys-space-md)));
+      box-sizing: border-box;
+      padding: sys-var(space, md);
+      border: 1px solid sys-var(color, border, base);
+      background: sys-var(color, surface, base);
     }
   }
-
+  &__toolbar {
+    position: relative;
+  }
   &__state {
+    flex: 1;
+    min-height: 0;
     display: grid;
-    place-items: center;
-    width: 100%;
-    height: 100%;
-    color: sys-var(color, text, subtle);
-
+    place-content: center;
+    justify-items: center;
+    gap: sys-var(space, md);
+    padding: sys-var(space, lg);
+    overflow: auto;
+    > div {
+      max-width: 30rem;
+      display: grid;
+      justify-items: start;
+      gap: sys-var(space, md);
+    }
+    h2 {
+      margin: 0;
+      @include apply-font(title-sm);
+    }
+    h2[role='alert'] {
+      color: sys-var(color, feedback, error);
+    }
     p {
-      max-width: 420px;
       margin: 0;
-      text-align: center;
+      @include apply-font(body-md);
+      color: sys-var(color, text, subtle);
     }
   }
-
   &__viewport-controls {
     position: absolute;
     right: sys-var(space, md);
     bottom: sys-var(space, md);
     z-index: 4;
     display: flex;
-    gap: 2px;
-    padding: 2px;
-    border: 1px solid sys-var(color, border, subtle);
-    background: sys-var(color, surface, base);
+    gap: sys-var(space, xs);
   }
 }
-
 .vue-flow {
   .vue-flow__pane {
     cursor: grab;
@@ -92,31 +113,4 @@
   .vue-flow__pane.dragging {
     cursor: grabbing;
   }
-  .vue-flow__background {
-    background: sys-var(color, surface, base);
-  }
-}
-
-@media (max-width: 720px) {
-  .graph-view {
-    min-height: 440px;
-
-    &__toolbar {
-      top: sys-var(space, sm);
-      width: calc(100% - 2 * sys-var(space, sm));
-      justify-content: center;
-      flex-wrap: wrap;
-    }
-
-    &__viewport-controls {
-      right: sys-var(space, sm);
-      bottom: sys-var(space, sm);
-    }
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .graph-view * {
-    scroll-behavior: auto !important;
-  }
 }
diff --git a/apps/client-web/src/views/info-base/graph/graph.vue b/apps/client-web/src/views/info-base/graph/graph.vue
index 99680399..fb03ada1 100644
--- a/apps/client-web/src/views/info-base/graph/graph.vue
+++ b/apps/client-web/src/views/info-base/graph/graph.vue
@@ -7,8 +7,7 @@ import {
   type GraphNode,
   type NodeDragEvent,
 } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
-import { InkButton, InkLoading } from '@inkcre/ui-web'
+import { InkButton, InkDropdown, InkForm, InkLoading } from '@inkcre/ui-web'
 import {
   getInfoBaseRouter,
   GraphNavigationRetrievalManager,
@@ -33,6 +32,7 @@ type SceneScale = 'compact' | 'standard' | 'broad'
 type SceneStatus = 'loading' | 'ready' | 'empty' | 'missing' | 'not-found' | 'limit' | 'error'
 
 const SCALE_LIMITS: Record<SceneScale, number> = { compact: 8, standard: 20, broad: 50 }
+const container = ref<HTMLElement | null>(null)
 const infoBaseRouter = getInfoBaseRouter()
 const currentRoute = computed(() => infoBaseRouter.current.value)
 const nodes = shallowRef<BlockNode[]>([])
@@ -81,6 +81,25 @@ const focalRelation = computed(() => {
   return address?.type === 'relation' ? address.relation : null
 })
 
+const sceneDescription = computed(() => {
+  const address = sceneAddress.value
+  if (address?.type === 'block') return `Around Block #${address.block}`
+  if (address?.type === 'relation') return `Around Relation #${address.relation}`
+  if (address?.type === 'path') return `Path from #${address.from} to #${address.to}`
+  if (address?.type === 'recall') return `Results for “${address.query}”`
+  return 'Explore your information'
+})
+const scaleOptions = [
+  { value: 'compact', label: 'Small · 8 relations' },
+  { value: 'standard', label: 'Standard · 20 relations' },
+  { value: 'broad', label: 'Large · 50 relations' },
+]
+const directionOptions = [
+  { value: 'both', label: 'Both directions' },
+  { value: 'in', label: 'Incoming' },
+  { value: 'out', label: 'Outgoing' },
+]
+
 function activeRelation(relation: Relation): boolean {
   if (direction.value === 'both') return true
   if (focalRelation.value === relation.id) return true
@@ -199,31 +218,32 @@ async function loadScene(): Promise<void> {
     }
 
     let graph: GraphModel | null = null
+    let nextStatus: SceneStatus = 'empty'
     if (address.type === 'block') {
       const result = await GraphNavigationRetrievalManager.getBlockNeighborhood(address.block, {
         direction: 'both',
         limit: SCALE_LIMITS[scale.value],
       })
       graph = result?.graph ?? null
-      if (!graph) status.value = 'missing'
+      if (!graph) nextStatus = 'missing'
     } else if (address.type === 'relation') {
       const result = await GraphNavigationRetrievalManager.getRelationNeighborhood(address.relation)
       graph = result?.graph ?? null
-      if (!graph) status.value = 'missing'
+      if (!graph) nextStatus = 'missing'
     } else if (address.type === 'path') {
       const result = await GraphNavigationRetrievalManager.findPath(address.from, address.to)
       if (result.status === 'found') graph = result.graph
-      else status.value = result.status === 'not_found' ? 'not-found' : 'limit'
+      else nextStatus = result.status === 'not_found' ? 'not-found' : 'limit'
     } else {
       const result = await LexicalRetrievalManager.retrieve({ query: address.query, limit: 20 })
       graph = { blocks: result.matches.map((match) => match.block), relations: [] }
-      if (graph.blocks.length === 0) status.value = 'empty'
     }
     if (current !== generation) return
     if (graph) {
       setGraph(graph)
       status.value = graph.blocks.length > 0 ? 'ready' : 'empty'
     } else {
+      status.value = nextStatus
       nodes.value = []
       edges.value = []
     }
@@ -253,7 +273,7 @@ function layoutMeasuredNodes(): void {
     return typeof node.width === 'number' ? node.width : 180
   }
   const maxWidth = Math.max(180, ...measured.map(measuredWidth))
-  const radius = Math.max(280, (neighbors.length * (maxWidth + 80)) / (Math.PI * 2))
+  const radius = Math.max(280, (neighbors.length * maxWidth) / (Math.PI * 2))
   nodes.value = nodes.value.map((node) => {
     const cached = positionCache.get(node.id)
     if (cached) return { ...node, position: cached }
@@ -273,14 +293,51 @@ function layoutMeasuredNodes(): void {
   })
 }
 
+function routeEdges(): void {
+  const centers = new Map(
+    getNodes.value.map((node) => [
+      node.id,
+      {
+        x: node.position.x + node.dimensions.width / 2,
+        y: node.position.y + node.dimensions.height / 2,
+      },
+    ])
+  )
+  edges.value = edges.value.map((edge) => {
+    const source = centers.get(edge.source)
+    const target = centers.get(edge.target)
+    if (!source || !target) return edge
+    const dx = target.x - source.x
+    const dy = target.y - source.y
+    const [from, to] =
+      Math.abs(dx) > Math.abs(dy)
+        ? dx > 0
+          ? ['right', 'left']
+          : ['left', 'right']
+        : dy > 0
+          ? ['bottom', 'top']
+          : ['top', 'bottom']
+    return { ...edge, sourceHandle: `source-${from}`, targetHandle: `target-${to}` }
+  })
+}
+
 async function realizeScene(): Promise<void> {
   await nextTick()
   layoutMeasuredNodes()
   await nextTick()
+  routeEdges()
+  await nextTick()
   if (!pendingCamera.value) return
   pendingCamera.value = false
+  const narrow = (container.value?.clientWidth ?? 0) < 640
+  const focalId =
+    focalBlock.value ?? (sceneAddress.value?.type === 'path' ? sceneAddress.value.from : null)
+  // A phone-sized canvas starts with a readable focal object; panning reveals its neighborhood.
+  const visibleNodes =
+    narrow && focalId !== null ? [String(focalId)] : nodes.value.map((node) => node.id)
   await fitView({
-    nodes: nodes.value.map((node) => node.id),
+    nodes: visibleNodes,
+    minZoom: 0.75,
     padding: 0.18,
     maxZoom: 1.25,
     duration: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 260,
@@ -313,6 +370,7 @@ function inspectRelation(relation: number): void {
 
 function onNodeDragStop(event: NodeDragEvent): void {
   positionCache.set(event.node.id, { ...event.node.position })
+  routeEdges()
 }
 
 function refocus(): void {
@@ -330,45 +388,53 @@ function isRoute(route: InfoBaseRoute | null, name: InfoBaseRoute['name']): bool
 </script>
 
 <template>
-  <main class="graph-view">
-    <div class="graph-view__toolbar" aria-label="Graph navigation controls">
-      <div class="graph-view__control-group" aria-label="Exploration scale">
-        <button
-          v-for="option in ['compact', 'standard', 'broad'] as SceneScale[]"
-          :key="option"
-          type="button"
-          :aria-pressed="scale === option"
-          @click="scale = option"
-        >
-          {{ option }}
-        </button>
+  <main ref="container" class="graph-view">
+    <header class="graph-view__toolbar">
+      <div class="graph-view__context">
+        <h1>{{ sceneDescription }}</h1>
+        <p v-if="status === 'ready'">{{ nodes.length }} blocks · {{ edges.length }} relations</p>
       </div>
-      <div class="graph-view__control-group" aria-label="Relation direction emphasis">
-        <button
-          v-for="option in ['in', 'both', 'out'] as GraphDirection[]"
-          :key="option"
-          type="button"
-          :aria-pressed="direction === option"
-          @click="direction = option"
-        >
-          {{ option }}
-        </button>
+      <div class="graph-view__actions">
+        <InkButton
+          v-if="focalRelation !== null"
+          text="Relation details"
+          theme="subtle"
+          :aria-label="`Inspect Relation #${focalRelation}`"
+          @click="inspectRelation(focalRelation)"
+        />
+        <InkButton text="Search" theme="subtle" @click="openRecallSearch" />
+        <details v-if="focalBlock !== null" class="graph-view__options">
+          <summary>View options</summary>
+          <InkForm layout="col">
+            <InkDropdown v-model="scale" label="Neighborhood size" :options="scaleOptions" />
+            <InkDropdown
+              v-model="direction"
+              label="Emphasize relations"
+              :options="directionOptions"
+            />
+          </InkForm>
+        </details>
       </div>
-    </div>
+    </header>
 
-    <div v-if="status === 'loading'" class="graph-view__state"><InkLoading /></div>
+    <div v-if="status === 'loading'" class="graph-view__state" role="status">
+      <InkLoading />
+      <p>Loading graph…</p>
+    </div>
     <div v-else-if="status !== 'ready'" class="graph-view__state">
-      <p v-if="status === 'empty'">No graph entities are available here.</p>
-      <p v-else-if="status === 'missing'">The addressed graph entity no longer exists.</p>
-      <p v-else-if="status === 'not-found'">No path connects these Blocks.</p>
-      <p v-else-if="status === 'limit'">The path exceeds the current exploration boundary.</p>
-      <p v-else>Graph retrieval is temporarily unavailable.</p>
-      <InkButton
-        v-if="status === 'empty' || status === 'missing'"
-        text="Recall information"
-        theme="subtle"
-        @click="openRecallSearch"
-      />
+      <div>
+        <h2 v-if="status === 'empty'">No information here yet</h2>
+        <h2 v-else-if="status === 'missing'">This item is no longer available</h2>
+        <h2 v-else-if="status === 'not-found'">No connecting path found</h2>
+        <h2 v-else-if="status === 'limit'">The path exceeds the exploration limit</h2>
+        <h2 v-else role="alert">Unable to load the graph</h2>
+        <p v-if="status === 'empty' || status === 'missing'">Search for another starting point.</p>
+        <p v-else-if="status === 'limit'">Try two closer starting points.</p>
+        <p v-else-if="status === 'not-found'">Try another pair of blocks.</p>
+        <p v-else>Your current location is preserved. You can try loading it again.</p>
+        <InkButton v-if="status === 'error'" text="Retry" theme="primary" @click="loadScene" />
+        <InkButton v-else text="Search information" theme="subtle" @click="openRecallSearch" />
+      </div>
     </div>
 
     <VueFlow
@@ -385,17 +451,30 @@ function isRoute(route: InfoBaseRoute | null, name: InfoBaseRoute['name']): bool
         <BlockNodeComponent v-bind="nodeProps" @focus="focusBlock" @inspect="inspectBlock" />
       </template>
       <template #edge-relation="edgeProps">
-        <RelationEdgeComponent
-          v-bind="edgeProps"
-          @focus="focusRelation"
-          @inspect="inspectRelation"
-        />
+        <RelationEdgeComponent v-bind="edgeProps" @focus="focusRelation" />
       </template>
-      <Background :gap="24" pattern-color="var(--ink-border-subtle, #d9dde3)" />
       <div class="graph-view__viewport-controls">
-        <InkButton icon="i-mdi-plus" type="square" theme="subtle" @click="zoomIn" />
-        <InkButton icon="i-mdi-minus" type="square" theme="subtle" @click="zoomOut" />
-        <InkButton icon="i-mdi-crosshairs-gps" type="square" theme="subtle" @click="refocus" />
+        <InkButton
+          icon="i-mdi-plus"
+          aria-label="Zoom in"
+          type="square"
+          theme="subtle"
+          @click="zoomIn()"
+        />
+        <InkButton
+          icon="i-mdi-minus"
+          aria-label="Zoom out"
+          type="square"
+          theme="subtle"
+          @click="zoomOut()"
+        />
+        <InkButton
+          icon="i-mdi-crosshairs-gps"
+          aria-label="Focus current"
+          type="square"
+          theme="subtle"
+          @click="refocus"
+        />
       </div>
     </VueFlow>
 
diff --git a/apps/client-web/src/views/info-base/list/list.scss b/apps/client-web/src/views/info-base/list/list.scss
index d15434e8..4452ba2c 100644
--- a/apps/client-web/src/views/info-base/list/list.scss
+++ b/apps/client-web/src/views/info-base/list/list.scss
@@ -14,7 +14,7 @@
 
   &__eyebrow {
     @include apply-font(label-md);
-    color: sys-var(color, text, muted);
+    color: sys-var(color, text, subtle);
     margin: 0 0 sys-var(space, sm);
     letter-spacing: 0.08em;
     text-transform: uppercase;
@@ -32,16 +32,16 @@
 
     input {
       min-width: 0;
-      height: 48px;
-      border: 1px solid sys-var(color, text, muted);
-      border-radius: 4px;
+      min-height: 48px;
+      border: 1px solid sys-var(color, border, base);
+      border-radius: sys-var(radius, none);
       padding-inline: sys-var(space, md);
       background: sys-var(color, surface, subtle);
       color: inherit;
       @include apply-font(body-lg);
 
       &:focus {
-        outline: 2px solid sys-var(color, text, base);
+        outline: 2px solid sys-var(color, border, strong);
         outline-offset: 2px;
       }
     }
@@ -59,7 +59,7 @@
     justify-content: center;
     gap: sys-var(space, sm);
     text-align: center;
-    color: sys-var(color, text, muted);
+    color: sys-var(color, text, subtle);
 
     p,
     small {
@@ -79,13 +79,16 @@
     width: 100%;
     display: grid;
     gap: sys-var(space, sm);
-    border: 1px solid sys-var(color, text, muted);
-    border-radius: 4px;
+    border: 1px solid sys-var(color, border, base);
+    border-radius: sys-var(radius, none);
     padding: sys-var(space, md);
     background: sys-var(color, surface, subtle);
     color: inherit;
     text-align: left;
     cursor: pointer;
+    box-sizing: border-box;
+    overflow-wrap: anywhere;
+    @include apply-font(label-md);
 
     &:hover,
     &:focus-visible {
@@ -110,7 +113,7 @@
     }
 
     span {
-      color: sys-var(color, text, muted);
+      color: sys-var(color, text, subtle);
     }
   }
 
@@ -120,8 +123,8 @@
   }
 
   &__evidence {
-    @include apply-font(label-sm);
-    color: sys-var(color, text, muted);
+    @include apply-font(label-md);
+    color: sys-var(color, text, subtle);
   }
 
   @media (max-width: 640px) {
diff --git a/apps/client-web/src/views/info-base/list/list.vue b/apps/client-web/src/views/info-base/list/list.vue
index 88a695b8..7b21f426 100644
--- a/apps/client-web/src/views/info-base/list/list.vue
+++ b/apps/client-web/src/views/info-base/list/list.vue
@@ -91,7 +91,7 @@ function refresh(): void {
           :placeholder="t('infoBase.list.searchPlaceholder')"
           autocomplete="off"
         />
-        <InkButton :text="t('infoBase.list.search')" theme="primary" />
+        <InkButton :text="t('infoBase.list.search')" theme="primary" native-type="submit" />
       </form>
     </header>
 
diff --git a/apps/client-web/src/views/jobs/job/job.scss b/apps/client-web/src/views/jobs/job/job.scss
index 133446f8..d55fc75e 100644
--- a/apps/client-web/src/views/jobs/job/job.scss
+++ b/apps/client-web/src/views/jobs/job/job.scss
@@ -1,12 +1,14 @@
 .job-view {
   display: flex;
-  flex-direction: row;
-  gap: sys-var(space, xl);
+  flex-wrap: wrap;
+  gap: sys-var(space, lg);
+  overflow-y: auto;
+  align-content: flex-start;
   flex: 1;
   min-width: 0;
   align-items: flex-start;
   box-sizing: border-box;
-  padding: sys-var(space, lg) sys-var(space, xl);
+  padding: clamp(16px, 4vw, 32px);
   background: sys-var(color, surface, base);
 
   &__loading {
@@ -31,24 +33,23 @@
     display: flex;
     flex-direction: column;
     gap: sys-var(space, md);
-    padding: sys-var(space, lg);
-    border: 1px solid sys-var(color, border, base);
+    padding: sys-var(space, md);
+    border-top: 1px solid sys-var(color, border, subtle);
     box-sizing: border-box;
-    min-width: 280px;
-    max-width: 40%;
+    min-width: 0;
+    flex: 1 1 22rem;
   }
 
   &__logs {
     display: flex;
     flex-direction: column;
     gap: sys-var(space, md);
-    padding: sys-var(space, lg);
-    border: 1px solid sys-var(color, border, base);
+    padding: sys-var(space, md);
+    border-top: 1px solid sys-var(color, border, subtle);
     box-sizing: border-box;
     align-self: stretch;
-    flex: 1;
-    max-width: 60%;
-    min-width: 360px;
+    flex: 2 1 28rem;
+    min-width: 0;
 
     &__title {
       @include apply-font(title-sm);
@@ -72,25 +73,29 @@
     margin: 0;
   }
 
+  &__value:is(pre) {
+    @include apply-font(body-sm, $mono: true);
+  }
+
   &__value {
     @include apply-font(label-lg);
     color: sys-var(color, text, base);
     overflow-x: auto;
 
     &.status--pending {
-      color: sys-var(color, warning, base);
+      color: sys-var(color, feedback, warning);
     }
 
     &.status--running {
-      color: sys-var(color, info, base);
+      color: sys-var(color, feedback, info);
     }
 
     &.status--finished {
-      color: sys-var(color, success, base);
+      color: sys-var(color, feedback, success);
     }
 
     &.status--failed {
-      color: sys-var(color, danger, base);
+      color: sys-var(color, feedback, error);
     }
   }
 }
@@ -111,7 +116,7 @@
   }
 
   &__id {
-    @include apply-font(label-sm, mono);
+    @include apply-font(label-md, $mono: true);
     color: sys-var(color, text, subtle);
   }
 }
diff --git a/apps/client-web/src/views/settings/settings.scss b/apps/client-web/src/views/settings/settings.scss
index bbc1b08f..b8202c5c 100644
--- a/apps/client-web/src/views/settings/settings.scss
+++ b/apps/client-web/src/views/settings/settings.scss
@@ -1,5 +1,6 @@
 .settings-view {
   flex: 1;
+  min-width: 0;
   padding: sys-var('space', 'lg');
   display: flex;
   flex-direction: column;
@@ -7,7 +8,7 @@
   overflow-y: auto;
 
   &__title {
-    @include apply-font('title', 'lg');
+    @include apply-font(title-lg);
     margin: 0;
     color: sys-var('color', 'text', 'base');
   }
@@ -21,7 +22,7 @@
   &__notice,
   &__export-note {
     margin: 0;
-    color: sys-var('color', 'text', 'muted');
+    color: sys-var('color', 'text', 'subtle');
   }
 
   &__secret,
@@ -33,18 +34,28 @@
 
     input,
     select {
+      @include apply-font(body-md);
+      border-radius: sys-var(radius, none);
+      min-width: 0;
       padding: sys-var('space', 'sm');
       color: sys-var('color', 'text', 'base');
       background: sys-var('color', 'surface', 'base');
       border: 1px solid sys-var('color', 'border', 'base');
+
+      &:focus-visible {
+        outline: 2px solid sys-var(color, border, strong);
+        outline-offset: 2px;
+      }
     }
 
     small {
-      color: sys-var('color', 'text', 'muted');
+      @include apply-font(body-sm);
+      color: sys-var('color', 'text', 'subtle');
     }
   }
 
   &__identity code {
+    @include apply-font(body-sm, $mono: true);
     overflow-wrap: anywhere;
   }
 
diff --git a/apps/client-web/src/views/settings/settings.vue b/apps/client-web/src/views/settings/settings.vue
index c4b61576..a9e2929b 100644
--- a/apps/client-web/src/views/settings/settings.vue
+++ b/apps/client-web/src/views/settings/settings.vue
@@ -166,7 +166,7 @@ const onFileSelected = async (event: Event) => {
   <main class="settings-view">
     <h1 class="settings-view__title">{{ t('settings.title') }}</h1>
 
-    <InkForm layout="col" class="settings-view__form">
+    <InkForm layout="col" class="settings-view__form" @submit="onSave">
       <!-- Meta Configuration -->
       <h2 class="settings-view__section-title">
         {{ t('settings.metaConfig') }}
@@ -213,41 +213,41 @@ const onFileSelected = async (event: Event) => {
           </option>
         </select>
       </label>
-    </InkForm>
 
-    <!-- Action Buttons -->
-    <div class="settings-view__actions">
-      <InkButton
-        :text="t('settings.saveConfig')"
-        theme="primary"
-        :disabled="formBusy"
-        :loading="saving"
-        @click="onSave"
-      />
+      <!-- Action Buttons -->
+      <div class="settings-view__actions">
+        <InkButton
+          :text="t('settings.saveConfig')"
+          theme="primary"
+          :disabled="formBusy"
+          :is-loading="saving"
+          native-type="submit"
+        />
 
-      <InkDoubleCheck
-        :title="t('settings.resetConfirmTitle')"
-        :message="t('settings.resetConfirmMessage')"
-        @confirm="onReset"
-      >
-        <InkButton :text="t('settings.resetConfig')" theme="danger" />
-      </InkDoubleCheck>
+        <InkDoubleCheck
+          :title="t('settings.resetConfirmTitle')"
+          :message="t('settings.resetConfirmMessage')"
+          @confirm="onReset"
+        >
+          <InkButton :text="t('settings.resetConfig')" theme="danger" />
+        </InkDoubleCheck>
 
-      <InkButton :text="t('settings.exportConfig')" @click="onExport" />
-      <InkButton :text="t('settings.importConfig')" :disabled="formBusy" @click="onImport" />
-    </div>
-    <p class="settings-view__export-note">{{ t('settings.exportExcludesSecret') }}</p>
+        <InkButton :text="t('settings.exportConfig')" @click="onExport" />
+        <InkButton :text="t('settings.importConfig')" :disabled="formBusy" @click="onImport" />
+      </div>
+      <p class="settings-view__export-note">{{ t('settings.exportExcludesSecret') }}</p>
+
+      <!-- Hidden file input for import -->
+      <input
+        ref="fileInput"
+        type="file"
+        accept=".json"
+        style="display: none"
+        @change="onFileSelected"
+      />
+    </InkForm>
 
     <PeerList v-if="hasConnectedConfig" :key="allPeersRevision" />
-
-    <!-- Hidden file input for import -->
-    <input
-      ref="fileInput"
-      type="file"
-      accept=".json"
-      style="display: none"
-      @change="onFileSelected"
-    />
   </main>
 </template>
 
diff --git a/apps/client-web/src/views/sources/source/source.md b/apps/client-web/src/views/sources/source/source.md
index eccaf9aa..58a8b43e 100644
--- a/apps/client-web/src/views/sources/source/source.md
+++ b/apps/client-web/src/views/sources/source/source.md
@@ -1,41 +1,11 @@
-# Source Detail View
+# Source 详情
 
-## Rationale
+页面标题使用已保存的来源名称，类型与 ID 提供稳定身份。配置修改、现有定时采集与近期任务分别分组；宽容器并排，窄容器按阅读顺序排列，由页面负责滚动。
 
-Provides a detailed view of one Source with its configuration, Jobs, and ordinary collection Crons.
+配置表单使用独立草稿，只有确认保存成功后才更新标题与保存基线。失败保留昵称、类型和原始 JSON；例行保存结果使用中性文字。应用内离开或切换来源前检查未保存修改，拒绝放弃时继续编辑。页面返回入口携带来源锚点，列表读取后定位并聚焦对应名称链接。读取失败提供重试，不停留在无限加载状态；来源、任务与计划分别读取，重试一个区域不会覆盖另一区域的草稿，过期响应不能替换当前来源。
 
-## Goals
+任务列表提供原生链接，只覆盖 Core 返回的近期任务。普通 pending／running／finished 使用中性表达，失败与超时保留错误强调。新建任务弹层校验所选采集方式的 JSON；来源类型没有历史回补 schema 时不提供该选项。创建成功后加入任务列表并进入任务详情；未确认创建结果时不自动重试。
 
-- Display comprehensive source information
-- Allow inline editing of nickname and config
-- List Jobs whose parameters reference this Source
-- Create ordinary and historical collection Jobs
-- Create, run, and delete ordinary collection Crons
-- Provide actions to create new jobs and delete the source
+计划列表始终呈现现有计划及操作，“添加定时采集”打开独立表单。新增与删除成功后直接更新对应列表；读取、写入、立即执行均有等待和失败反馈。来源删除与计划删除使用带对象上下文的确认弹层，等待期间禁止重复操作或关闭；失败保留确认与条目。删除来源成功后返回来源列表。
 
-## Specification
-
-### Layout
-
-- Two-panel layout (left: Source details, right: scheduling and Jobs)
-
-### Left Panel (Source Details)
-
-- Source type, nickname, and ID
-- Inline nickname editing (using InkInput)
-- Config display and editing (using InkJsonEditor with save button)
-- Delete action button
-
-### Right Panel (Scheduling and Jobs)
-
-- "New Job" button at the top (full width)
-- Cron controls and current schedules
-- List of Jobs for this Source
-- Each job shows: ID, status, created date, and clickable link to job detail
-
-### Actions
-
-- New Job: chooses ordinary collection or historical backfill, validates its JSON config, and creates a global Job
-- Schedule: creates an ordinary collection Cron from a five-field schedule
-- Delete: Deletes the source and navigates back to sources list
-- Save Config: Saves the edited configuration
+模型与数据库契约属于 Core，页面不另建调度或采集逻辑。`Source`／`SourceType` 的读取、Source 写入，以及本页使用的 Job／Cron 查询与 Cron 写入会传播请求错误；空结果仅表示请求成功且没有匹配记录。
diff --git a/apps/client-web/src/views/sources/source/source.scss b/apps/client-web/src/views/sources/source/source.scss
index 982a2cd4..207b3bdd 100644
--- a/apps/client-web/src/views/sources/source/source.scss
+++ b/apps/client-web/src/views/sources/source/source.scss
@@ -1,174 +1,114 @@
 .source-view {
   display: flex;
-  flex-direction: row;
-  gap: sys-var(space, xl);
+  flex-direction: column;
+  gap: sys-var(space, lg);
   flex: 1;
   min-width: 0;
-  align-items: flex-start;
-  box-sizing: border-box;
-  padding: sys-var(space, lg) sys-var(space, xl);
+  padding: clamp(16px, 4vw, 32px);
+  overflow-y: auto;
   background: sys-var(color, surface, base);
-
-  &__loading {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex: 1;
-  }
-
-  &__details {
-    display: flex;
-    flex-direction: column;
-    gap: sys-var(space, md);
-    padding: sys-var(space, lg);
-    border: 1px solid sys-var(color, border, base);
-    box-sizing: border-box;
-    min-width: 280px;
-    max-width: 40%;
-    max-height: 100%;
-  }
-
-  &__jobs {
-    display: flex;
-    flex-direction: column;
-    gap: sys-var(space, md);
-    padding: sys-var(space, lg);
-    border: 1px solid sys-var(color, border, base);
-    box-sizing: border-box;
-    align-self: stretch;
-    flex: 1;
-    max-width: 60%;
-    min-width: 360px;
+  overflow-wrap: anywhere;
+  &__back {
+    align-self: flex-start;
+    color: sys-var(color, text, base);
+    @include apply-font(label-lg);
+    text-decoration: underline;
   }
-}
-
-.details {
-  &__header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: sys-var(space, md);
+  h1 {
+    @include apply-font(title-lg);
+    margin: 0;
   }
-
-  &__title {
+  h2 {
     @include apply-font(title-sm);
-    color: sys-var(color, text, base);
     margin: 0;
   }
-
-  &__actions {
+  p {
+    @include apply-font(body-sm);
+    margin: 0;
+  }
+  &__metadata {
     display: flex;
+    flex-wrap: wrap;
     gap: sys-var(space, sm);
-    justify-content: flex-end;
-    align-self: stretch;
-    margin-top: sys-var(space, md);
+    margin-top: sys-var(space, sm);
+    @include apply-font(label-md, $mono: true);
+    color: sys-var(color, text, subtle);
   }
-}
-
-.jobs {
-  &__header {
+  &__content {
     display: flex;
-    flex-direction: column;
-    gap: sys-var(space, md);
+    flex-wrap: wrap;
+    gap: sys-var(space, xl);
+    min-width: 0;
   }
-
-  &__title {
-    @include apply-font(title-sm);
-    color: sys-var(color, text, base);
-    margin: 0;
+  &__details {
+    flex: 1 1 24rem;
+    min-width: 0;
   }
-
-  &__loading {
+  &__activity {
+    flex: 1 1 24rem;
+    min-width: 0;
     display: flex;
-    justify-content: center;
-    align-items: center;
-    flex: 1;
+    flex-direction: column;
+    gap: sys-var(space, xl);
   }
-
-  &__empty {
+  &__details,
+  &__schedules,
+  &__jobs {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: sys-var(space, xl);
-    @include apply-font(body-lg);
-    color: sys-var(color, text, subtle);
+    flex-direction: column;
+    gap: sys-var(space, md);
   }
-
-  &__list {
+  &__section-header {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
     gap: sys-var(space, sm);
-    overflow-y: auto;
-    flex: 1;
-  }
-
-  &__pagination {
-    justify-content: center;
   }
-}
-
-.collect-at {
-  &__title {
-    @include apply-font(title-sm);
-    color: sys-var(color, text, base);
-    margin-bottom: sys-var(space, md);
-  }
-
-  &__actions {
+  &__schedule {
     display: flex;
+    flex-wrap: wrap;
+    align-items: center;
     gap: sys-var(space, sm);
-    justify-content: flex-end;
-    align-self: stretch;
-    margin-top: sys-var(space, md);
+    @include apply-font(body-sm);
   }
-}
-
-.config-editor {
-  display: flex;
-  flex-direction: column;
-  gap: sys-var(space, md);
-  padding: sys-var(space, lg);
-  background: sys-var(color, surface, base);
-  border-radius: sys-var(radius, md);
-  box-shadow: sys-var(shadow, lg);
-  min-width: 400px;
-  max-width: 600px;
-
-  &__title {
-    @include apply-font(title-sm);
-    color: sys-var(color, text, base);
-    margin: 0;
-  }
-
   &__actions {
     display: flex;
+    flex-wrap: wrap;
     gap: sys-var(space, sm);
     justify-content: flex-end;
-    align-self: stretch;
   }
-}
-
-.new-job-popup {
-  display: flex;
-  flex-direction: column;
-  gap: sys-var(space, md);
-  padding: sys-var(space, lg);
-  background: sys-var(color, surface, base);
-  border-radius: sys-var(radius, md);
-  box-shadow: sys-var(shadow, lg);
-  min-width: 400px;
-  max-width: 500px;
-
-  &__title {
-    @include apply-font(title-sm);
-    color: sys-var(color, text, base);
-    margin: 0;
+  &__feedback {
+    display: flex;
+    flex-wrap: wrap;
+    gap: sys-var(space, sm);
+    align-items: center;
   }
-
-  &__actions {
+  &__job-list {
     display: flex;
+    flex-direction: column;
     gap: sys-var(space, sm);
-    justify-content: flex-end;
-    align-self: stretch;
+  }
+  &__job-link {
+    color: inherit;
+    text-decoration: none;
+  }
+  &__job-link:focus-visible {
+    outline: 2px solid sys-var(color, border, strong);
+    outline-offset: 2px;
+  }
+  &__popup {
+    width: min(32rem, 80vw);
+    max-width: 100%;
+    min-width: 0;
+    gap: sys-var(space, md);
+    h2 {
+      @include apply-font(title-sm);
+      margin: 0;
+    }
+    p {
+      @include apply-font(body-sm);
+      margin: 0;
+    }
   }
 }
diff --git a/apps/client-web/src/views/sources/source/source.vue b/apps/client-web/src/views/sources/source/source.vue
index 22b7effd..f6f59974 100644
--- a/apps/client-web/src/views/sources/source/source.vue
+++ b/apps/client-web/src/views/sources/source/source.vue
@@ -1,177 +1,518 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { computed, ref, useTemplateRef, watch } from 'vue'
+import {
+  RouterLink,
+  onBeforeRouteLeave,
+  onBeforeRouteUpdate,
+  useRoute,
+  useRouter,
+} from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { useAsyncState } from '@vueuse/core'
-import { useEAsyncState } from '@/composables/use-async-state'
 import {
   InkLoading,
   InkButton,
-  InkDoubleCheck,
+  InkDialog,
   InkPopup,
   InkJsonEditor,
   InkDropdown,
   InkInput,
+  InkForm,
+  type JsonEditorValidation,
 } from '@inkcre/ui-web'
-import sourceForm from '@/components/source/sourceForm/sourceForm.vue'
+import SourceForm from '@/components/source/sourceForm/sourceForm.vue'
 import JobCard from '@/components/job/JobCard/JobCard.vue'
-import { Cron, CronForm, Job, JobManager, Source, SourceType } from '@inkcre/core'
+import { Cron, CronForm, Job, JobManager, Source } from '@inkcre/core'
 
 const route = useRoute()
 const router = useRouter()
 const { t } = useI18n()
 const sourceId = computed(() => Number(route.params.id))
-const newJobPopupOpen = ref(false)
+const source = ref<Source | null>(null)
+const draft = ref<Source | null>(null)
+const editor = useTemplateRef('editor')
+const sourceLoading = ref(false)
+const sourceLoadError = ref(false)
+const sourceSaving = ref(false)
+const sourceError = ref('')
+const sourceSaved = ref(false)
+const deleteOpen = ref(false)
+const sourceDeleting = ref(false)
+const deleteError = ref('')
+const jobs = ref<Job[]>([])
+const jobsLoading = ref(false)
+const jobsError = ref(false)
+const crons = ref<Cron[]>([])
+const cronsLoading = ref(false)
+const cronsError = ref(false)
+let sourceRequest = 0
+let jobsRequest = 0
+let cronsRequest = 0
+
+// Each region loads independently; late responses must not replace another source's context.
+async function loadSource() {
+  const request = ++sourceRequest
+  sourceLoading.value = true
+  sourceLoadError.value = false
+  try {
+    const loaded = await Source.get(sourceId.value)
+    if (request !== sourceRequest) return
+    source.value = loaded
+    draft.value = Source.parse(loaded)
+  } catch {
+    if (request === sourceRequest) sourceLoadError.value = true
+  } finally {
+    if (request === sourceRequest) sourceLoading.value = false
+  }
+}
+async function loadJobs() {
+  const request = ++jobsRequest
+  jobsLoading.value = true
+  jobsError.value = false
+  try {
+    const loaded = await Job.getBySource(sourceId.value)
+    if (request === jobsRequest) jobs.value = loaded
+  } catch {
+    if (request === jobsRequest) jobsError.value = true
+  } finally {
+    if (request === jobsRequest) jobsLoading.value = false
+  }
+}
+async function loadCrons() {
+  const request = ++cronsRequest
+  cronsLoading.value = true
+  cronsError.value = false
+  try {
+    const loaded = await Cron.getBySource(sourceId.value)
+    if (request === cronsRequest) crons.value = loaded
+  } catch {
+    if (request === cronsRequest) cronsError.value = true
+  } finally {
+    if (request === cronsRequest) cronsLoading.value = false
+  }
+}
+
+const newJobOpen = ref(false)
 const jobKind = ref<'ordinary' | 'backfill'>('ordinary')
 const jobConfig = ref('{}')
-const cronSchedule = ref('0 * * * *')
-
-const { state: source } = useEAsyncState(() => Source.get(sourceId.value), null, {
-  immediate: true,
-  useLast: true,
-})
-const { state: sourceType } = useEAsyncState(
-  async () => (source.value ? SourceType.get(source.value.type) : null),
-  null,
-  { immediate: true, useLast: true }
+const jobValidation = ref<JsonEditorValidation>()
+const jobSaving = ref(false)
+const jobError = ref('')
+const sourceType = computed(() =>
+  editor.value?.sourceTypes.find((type) => type.id === source.value?.type)
 )
-const {
-  state: jobs,
-  execute: refetchJobs,
-  isLoading: jobsLoading,
-} = useAsyncState(() => Job.getBySource(sourceId.value), [], { shallow: false })
-const { state: crons, execute: refetchCrons } = useAsyncState(
-  () => Cron.getBySource(sourceId.value),
-  [],
-  { shallow: false }
-)
-
 const jobSchema = computed(() =>
   jobKind.value === 'ordinary'
     ? sourceType.value?.collect_config_schema
     : sourceType.value?.backfill_config_schema
 )
+const canCreateJob = computed(
+  () =>
+    Boolean(jobSchema.value) &&
+    jobValidation.value?.status === 'valid' &&
+    jobValidation.value.text === jobConfig.value
+)
+watch(
+  jobSchema,
+  () => {
+    jobValidation.value = undefined
+  },
+  { flush: 'sync' }
+)
 
-const onSaveSource = async () => source.value?.save()
-const onDelete = async () => {
-  await source.value?.delete()
+const newCronOpen = ref(false)
+const cronSchedule = ref('0 * * * *')
+const cronSaving = ref(false)
+const cronAction = ref<{ id: number; kind: 'run' | 'delete' } | null>(null)
+const cronToDelete = ref<Cron | null>(null)
+const cronError = ref('')
+const cronCreateError = ref('')
+const busy = computed(
+  () =>
+    sourceSaving.value ||
+    sourceDeleting.value ||
+    jobSaving.value ||
+    cronSaving.value ||
+    Boolean(cronAction.value)
+)
+function canLeave() {
+  const dirty =
+    Boolean(draft.value && editor.value?.isDirty) ||
+    (newJobOpen.value && jobConfig.value !== '{}') ||
+    (newCronOpen.value && cronSchedule.value !== '0 * * * *')
+  return !busy.value && (!dirty || window.confirm(t('source.discardChanges')))
+}
+onBeforeRouteLeave(canLeave)
+onBeforeRouteUpdate((to) => to.params.id === route.params.id || canLeave())
+watch(
+  sourceId,
+  () => {
+    source.value = null
+    draft.value = null
+    jobs.value = []
+    crons.value = []
+    sourceSaved.value = false
+    sourceError.value = ''
+    deleteError.value = ''
+    cronError.value = ''
+    deleteOpen.value = false
+    newJobOpen.value = false
+    newCronOpen.value = false
+    void loadSource()
+    void loadJobs()
+    void loadCrons()
+  },
+  { immediate: true }
+)
+
+async function onSaveSource() {
+  if (busy.value || !draft.value || !editor.value?.canSave) return
+  sourceSaving.value = true
+  sourceError.value = ''
+  sourceSaved.value = false
+  try {
+    const candidate = Source.parse({ ...draft.value, config: editor.value.readConfig() })
+    const updated = await candidate.save()
+    source.value = updated
+    draft.value = Source.parse(updated)
+    sourceSaved.value = true
+  } catch {
+    sourceError.value = t('common.saveFailed')
+  } finally {
+    sourceSaving.value = false
+  }
+}
+function onRequestDeleteSource() {
+  deleteError.value = ''
+  deleteOpen.value = true
+}
+function onRequestDeleteCron(cron: Cron) {
+  cronError.value = ''
+  cronToDelete.value = cron
+}
+async function onDeleteSource() {
+  if (busy.value || !source.value) return
+  sourceDeleting.value = true
+  deleteError.value = ''
+  try {
+    await source.value.delete()
+  } catch {
+    deleteError.value = t('source.deleteFailed')
+    return
+  } finally {
+    sourceDeleting.value = false
+  }
+  deleteOpen.value = false
+  draft.value = null
   await router.push('/sources')
 }
-const onNewJob = () => {
+function onNewJob() {
   jobKind.value = 'ordinary'
   jobConfig.value = '{}'
-  newJobPopupOpen.value = true
-}
-const onCreateJob = async () => {
-  const type = jobKind.value === 'ordinary' ? 'core.source.collect.v1' : 'core.source.backfill.v1'
-  const job = await JobManager.create(type, {
-    source: sourceId.value,
-    config: JSON.parse(jobConfig.value),
-  })
-  newJobPopupOpen.value = false
-  await refetchJobs()
-  await router.push(`/jobs/${job.id}`)
-}
-const onCreateCron = async () => {
-  await new CronForm({
-    schedule: cronSchedule.value,
-    enabled: true,
-    job_type: 'core.source.collect.v1',
-    job_parameters: { source: sourceId.value, config: {} },
-    job_timeout_seconds: null,
-  }).create()
-  await refetchCrons()
-}
-const onDeleteCron = async (cron: Cron) => {
-  await cron.delete()
-  await refetchCrons()
+  jobValidation.value = undefined
+  jobError.value = ''
+  newJobOpen.value = true
+}
+function onCloseJob() {
+  if (jobSaving.value) return
+  if (jobConfig.value !== '{}' && !window.confirm(t('source.discardChanges'))) return
+  newJobOpen.value = false
+}
+async function onCreateJob() {
+  if (busy.value || !canCreateJob.value) return
+  jobSaving.value = true
+  jobError.value = ''
+  let created: Job
+  try {
+    created = await JobManager.create(
+      jobKind.value === 'ordinary' ? 'core.source.collect.v1' : 'core.source.backfill.v1',
+      { source: sourceId.value, config: JSON.parse(jobConfig.value) }
+    )
+    jobs.value = [created, ...jobs.value]
+    newJobOpen.value = false
+  } catch {
+    jobError.value = t('source.runFailed')
+    return
+  } finally {
+    jobSaving.value = false
+  }
+  await router.push(`/jobs/${created.id}`)
+}
+function onNewCron() {
+  cronSchedule.value = '0 * * * *'
+  cronCreateError.value = ''
+  newCronOpen.value = true
+}
+function onCloseCron() {
+  if (cronSaving.value) return
+  if (cronSchedule.value !== '0 * * * *' && !window.confirm(t('source.discardChanges'))) return
+  newCronOpen.value = false
+}
+async function onCreateCron() {
+  if (busy.value || !cronSchedule.value.trim()) return
+  cronSaving.value = true
+  cronCreateError.value = ''
+  try {
+    const created = await new CronForm({
+      schedule: cronSchedule.value,
+      enabled: true,
+      job_type: 'core.source.collect.v1',
+      job_parameters: { source: sourceId.value, config: {} },
+      job_timeout_seconds: null,
+    }).create()
+    crons.value = [...crons.value, created]
+    newCronOpen.value = false
+  } catch {
+    cronCreateError.value = t('source.scheduleFailed')
+  } finally {
+    cronSaving.value = false
+  }
+}
+async function onRunCron(cron: Cron) {
+  if (busy.value) return
+  cronAction.value = { id: cron.id, kind: 'run' }
+  cronError.value = ''
+  let created: Job
+  try {
+    created = await cron.runNow()
+    jobs.value = [created, ...jobs.value]
+  } catch {
+    cronError.value = t('source.runFailed')
+    return
+  } finally {
+    cronAction.value = null
+  }
+  await router.push(`/jobs/${created.id}`)
+}
+async function onDeleteCron() {
+  if (busy.value || !cronToDelete.value) return
+  const cron = cronToDelete.value
+  cronAction.value = { id: cron.id, kind: 'delete' }
+  cronError.value = ''
+  try {
+    await cron.delete()
+    crons.value = crons.value.filter((item) => item.id !== cron.id)
+    cronToDelete.value = null
+  } catch {
+    cronError.value = t('source.deleteFailed')
+  } finally {
+    cronAction.value = null
+  }
 }
 </script>
 
 <template>
   <main class="source-view">
-    <div v-if="!source" class="source-view__loading"><InkLoading /></div>
-    <template v-else>
-      <section class="source-view__details">
-        <div class="details__header">
-          <h2 class="details__title">{{ t('source.detailTitle') }}</h2>
-        </div>
-        <sourceForm v-model="source" class="overflow-y-auto" />
-        <div class="details__actions">
-          <InkDoubleCheck
-            :title="t('source.deleteConfirmTitle')"
-            :message="t('source.deleteConfirmMessage')"
-            :confirmText="t('common.confirm')"
-            :cancelText="t('common.cancel')"
-            @confirm="onDelete"
-          >
-            <InkButton :text="t('source.delete')" theme="danger" size="sm" />
-          </InkDoubleCheck>
-          <InkButton :text="t('common.save')" theme="primary" size="sm" @click="onSaveSource" />
-        </div>
-      </section>
-
-      <section class="source-view__jobs">
-        <div class="jobs__header">
-          <h3 class="jobs__title">{{ t('source.jobs') }}</h3>
-          <InkButton
-            :text="t('source.newJob')"
-            theme="primary"
-            size="md"
-            class="w-full"
-            @click="onNewJob"
-          />
-        </div>
-        <div class="flex flex-col gap-2 border-b pb-4">
-          <div class="flex gap-2 items-end">
-            <InkInput v-model="cronSchedule" label="Cron schedule" />
-            <InkButton text="Schedule ordinary collect" theme="subtle" @click="onCreateCron" />
-          </div>
-          <div v-for="cron in crons" :key="cron.id" class="flex gap-2 items-center text-sm">
-            <code>{{ cron.schedule }}</code>
-            <span>{{ cron.enabled ? 'enabled' : 'disabled' }}</span>
-            <InkButton text="Run now" size="sm" theme="subtle" @click="cron.runNow()" />
-            <InkButton text="Delete" size="sm" theme="danger" @click="onDeleteCron(cron)" />
-          </div>
-        </div>
-        <div v-if="jobsLoading" class="jobs__loading"><InkLoading /></div>
-        <div v-else-if="jobs.length === 0" class="jobs__empty">
-          <span>{{ t('source.noJobs') }}</span>
+    <RouterLink :to="{ path: '/sources', hash: `#source-${sourceId}` }" class="source-view__back">{{
+      t('sidePanel.sources')
+    }}</RouterLink>
+    <div v-if="sourceLoading"><InkLoading />{{ t('common.loading') }}</div>
+    <div v-else-if="sourceLoadError" class="source-view__feedback">
+      <p role="alert" class="text-feedback-error">{{ t('source.detailFailed') }}</p>
+      <InkButton :text="t('source.retry')" theme="subtle" @click="loadSource" />
+    </div>
+    <template v-else-if="source && draft">
+      <header class="source-view__header">
+        <h1>{{ source.nickname || t('source.unnamed') }}</h1>
+        <div class="source-view__metadata">
+          <code>{{ source.type }}</code
+          ><span>#{{ source.id }}</span>
         </div>
-        <div class="jobs__list">
-          <JobCard
-            v-for="job in jobs"
-            :key="job.id"
-            :job="job"
-            @click="router.push(`/jobs/${job.id}`)"
-          />
+      </header>
+      <div class="source-view__content">
+        <section class="source-view__details" :aria-label="t('source.editConfig')">
+          <h2>{{ t('source.editConfig') }}</h2>
+          <SourceForm ref="editor" :model-value="draft" :disabled="busy" @submit="onSaveSource">
+            <p v-if="sourceError" role="alert" class="text-feedback-error">{{ sourceError }}</p>
+            <p v-else-if="sourceSaved && !editor?.isDirty" role="status">{{ t('source.saved') }}</p>
+            <div class="source-view__actions">
+              <InkButton
+                :text="t('source.delete')"
+                theme="danger"
+                size="sm"
+                :disabled="busy"
+                @click="onRequestDeleteSource"
+              />
+              <InkButton
+                :text="t('common.save')"
+                theme="primary"
+                native-type="submit"
+                :is-loading="sourceSaving"
+                :disabled="!editor?.canSave || !editor?.isDirty || (busy && !sourceSaving)"
+              />
+            </div>
+          </SourceForm>
+        </section>
+        <div class="source-view__activity">
+          <section class="source-view__schedules" :aria-label="t('source.schedules')">
+            <div class="source-view__section-header">
+              <h2>{{ t('source.schedules') }}</h2>
+              <InkButton
+                :text="t('source.addSchedule')"
+                theme="subtle"
+                size="sm"
+                :disabled="busy"
+                @click="onNewCron"
+              />
+            </div>
+            <p v-if="cronsLoading" role="status">{{ t('common.loading') }}</p>
+            <div v-else-if="cronsError" class="source-view__feedback">
+              <p role="alert" class="text-feedback-error">{{ t('source.schedulesFailed') }}</p>
+              <InkButton :text="t('source.retry')" theme="subtle" size="sm" @click="loadCrons" />
+            </div>
+            <p v-else-if="!crons.length">{{ t('source.noSchedules') }}</p>
+            <div v-for="cron in crons" :key="cron.id" class="source-view__schedule">
+              <code>{{ cron.schedule }}</code
+              ><span>{{ t(cron.enabled ? 'source.enabled' : 'source.disabled') }}</span>
+              <InkButton
+                :text="t('source.runNow')"
+                theme="subtle"
+                size="sm"
+                :is-loading="cronAction?.id === cron.id && cronAction.kind === 'run'"
+                :disabled="busy && cronAction?.id !== cron.id"
+                @click="onRunCron(cron)"
+              />
+              <InkButton
+                :text="t('source.delete')"
+                theme="subtle"
+                size="sm"
+                :disabled="busy"
+                @click="onRequestDeleteCron(cron)"
+              />
+            </div>
+            <p v-if="cronError && !cronToDelete" role="alert" class="text-feedback-error">
+              {{ cronError }}
+            </p>
+          </section>
+          <section class="source-view__jobs" :aria-label="t('source.jobs')">
+            <div class="source-view__section-header">
+              <h2>{{ t('source.jobs') }}</h2>
+              <InkButton
+                :text="t('source.newJob')"
+                theme="subtle"
+                size="sm"
+                :disabled="busy || !sourceType"
+                @click="onNewJob"
+              />
+            </div>
+            <p v-if="jobsLoading" role="status">{{ t('source.jobsLoading') }}</p>
+            <div v-else-if="jobsError" class="source-view__feedback">
+              <p role="alert" class="text-feedback-error">{{ t('source.jobsFailed') }}</p>
+              <InkButton :text="t('source.retry')" theme="subtle" size="sm" @click="loadJobs" />
+            </div>
+            <p v-else-if="!jobs.length">{{ t('source.noJobs') }}</p>
+            <div class="source-view__job-list">
+              <RouterLink
+                v-for="job in jobs"
+                :key="job.id"
+                :to="`/jobs/${job.id}`"
+                class="source-view__job-link"
+                ><JobCard :job="job"
+              /></RouterLink>
+            </div>
+          </section>
         </div>
-      </section>
+      </div>
     </template>
   </main>
 
-  <InkPopup v-model:open="newJobPopupOpen" position="center">
-    <div class="new-job-popup">
-      <h3 class="new-job-popup__title">{{ t('source.newJobTitle') }}</h3>
+  <InkDialog
+    v-model="deleteOpen"
+    :title="t('source.deleteConfirmTitle')"
+    :confirm-text="t('source.delete')"
+    :cancel-text="t('common.cancel')"
+    :is-loading="sourceDeleting"
+    @confirm="onDeleteSource"
+  >
+    <p>{{ source?.nickname || t('source.unnamed') }} · #{{ source?.id }}</p>
+    <p>{{ t('source.deleteConfirmMessage') }}</p>
+    <p v-if="deleteError" role="alert" class="text-feedback-error">{{ deleteError }}</p>
+  </InkDialog>
+  <InkDialog
+    :model-value="Boolean(cronToDelete)"
+    :title="t('source.deleteSchedule')"
+    :confirm-text="t('source.delete')"
+    :cancel-text="t('common.cancel')"
+    :is-loading="cronAction?.kind === 'delete'"
+    @update:model-value="cronToDelete = null"
+    @confirm="onDeleteCron"
+  >
+    <p>{{ t('source.deleteScheduleMessage') }}</p>
+    <code>{{ cronToDelete?.schedule }}</code>
+    <p v-if="cronError" role="alert" class="text-feedback-error">{{ cronError }}</p>
+  </InkDialog>
+  <InkPopup
+    :open="newJobOpen"
+    position="center"
+    :aria-label="t('source.newJobTitle')"
+    :close-on-scrim="!jobSaving"
+    :close-on-escape="!jobSaving"
+    @update:open="onCloseJob"
+  >
+    <InkForm class="source-view__popup" layout="col" @submit="onCreateJob">
+      <h2>{{ t('source.newJobTitle') }}</h2>
       <InkDropdown
         v-model="jobKind"
         :options="[
-          { label: 'Ordinary collect', value: 'ordinary' },
-          { label: 'Historical backfill', value: 'backfill' },
+          { label: t('source.ordinary'), value: 'ordinary' },
+          ...(sourceType?.backfill_config_schema
+            ? [{ label: t('source.backfill'), value: 'backfill' }]
+            : []),
         ]"
-        label="Collection intent"
+        :label="t('source.collectionIntent')"
+        :disabled="jobSaving"
       />
       <InkJsonEditor
         v-model="jobConfig"
         :schema="jobSchema ?? undefined"
         :label="t('job.config')"
         :rows="6"
+        :disabled="jobSaving"
+        @validation="jobValidation = $event"
       />
-      <div class="new-job-popup__actions">
-        <InkButton :text="t('common.cancel')" theme="subtle" @click="newJobPopupOpen = false" />
-        <InkButton :text="t('common.confirm')" theme="primary" @click="onCreateJob" />
+      <p v-if="jobError" role="alert" class="text-feedback-error">{{ jobError }}</p>
+      <div class="source-view__actions">
+        <InkButton
+          :text="t('common.cancel')"
+          theme="subtle"
+          :disabled="jobSaving"
+          @click="onCloseJob"
+        /><InkButton
+          :text="t('source.createJob')"
+          theme="primary"
+          native-type="submit"
+          :disabled="!canCreateJob"
+          :is-loading="jobSaving"
+        />
       </div>
-    </div>
+    </InkForm>
+  </InkPopup>
+  <InkPopup
+    :open="newCronOpen"
+    position="center"
+    :aria-label="t('source.addSchedule')"
+    :close-on-scrim="!cronSaving"
+    :close-on-escape="!cronSaving"
+    @update:open="onCloseCron"
+  >
+    <InkForm class="source-view__popup" layout="col" @submit="onCreateCron">
+      <h2>{{ t('source.addSchedule') }}</h2>
+      <InkInput v-model="cronSchedule" :label="t('source.cronSchedule')" :disabled="cronSaving" />
+      <p v-if="cronCreateError" role="alert" class="text-feedback-error">{{ cronCreateError }}</p>
+      <div class="source-view__actions">
+        <InkButton
+          :text="t('common.cancel')"
+          theme="subtle"
+          :disabled="cronSaving"
+          @click="onCloseCron"
+        /><InkButton
+          :text="t('source.addSchedule')"
+          theme="primary"
+          native-type="submit"
+          :disabled="!cronSchedule.trim()"
+          :is-loading="cronSaving"
+        />
+      </div>
+    </InkForm>
   </InkPopup>
 </template>
 
diff --git a/apps/client-web/src/views/sources/sources.scss b/apps/client-web/src/views/sources/sources.scss
index 592b5013..3b400b6b 100644
--- a/apps/client-web/src/views/sources/sources.scss
+++ b/apps/client-web/src/views/sources/sources.scss
@@ -1,21 +1,34 @@
 .sources-view {
   display: flex;
+  flex-direction: column;
   gap: sys-var(space, lg);
   flex: 1;
-  align-self: stretch;
-  box-sizing: border-box;
-  padding: sys-var(space, lg) sys-var(space, xl);
+  min-width: 0;
+  padding: clamp(16px, 4vw, 32px);
   background: sys-var(color, surface, base);
-
-  &__list {
+  overflow-y: auto;
+  &__header {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
     gap: sys-var(space, md);
-    flex: 1;
+  }
+  h1 {
+    @include apply-font(title-lg);
+    margin: 0;
+  }
+  p {
+    @include apply-font(body-md);
+    margin: 0;
+  }
+  &__list {
+    min-width: 0;
+  }
+  &__feedback {
+    display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    min-height: 120px;
-    min-width: 120px;
-    overflow-x: hidden;
-    overflow-y: auto;
+    gap: sys-var(space, md);
   }
 }
diff --git a/apps/client-web/src/views/sources/sources.vue b/apps/client-web/src/views/sources/sources.vue
index add0e95f..988cf246 100644
--- a/apps/client-web/src/views/sources/sources.vue
+++ b/apps/client-web/src/views/sources/sources.vue
@@ -1,55 +1,58 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
 import { useAsyncState } from '@vueuse/core'
-import sourceCard from '@/components/source/sourceCard/sourceCard.vue'
+import SourceCard from '@/components/source/sourceCard/sourceCard.vue'
 import CreateSource from '@/components/source/createSource/createSource.vue'
-import { InkLoading } from '@inkcre/ui-web'
+import { InkLoading, InkButton } from '@inkcre/ui-web'
 import { Source } from '@inkcre/core'
 
-// Use useAsyncState for sources with refetch capability
+const { t } = useI18n()
+const route = useRoute()
 const {
   state: sources,
   execute: refetchSources,
-  isLoading: sourcesLoading,
-} = useAsyncState(() => Source.getAll(), [])
-
-// --- lifecycle ---
-onMounted(() => {
-  refetchSources()
+  isLoading,
+  error,
+} = useAsyncState(() => Source.getAll(), [], {
+  resetOnExecute: false,
+  // The region renders error and retry; this handled failure must not reach reportError.
+  onError: () => undefined,
+  onSuccess: () => {
+    void nextTick(() => {
+      if (!/^#source-\d+$/.test(route.hash)) return
+      const row = document.getElementById(route.hash.slice(1))
+      row?.scrollIntoView({ block: 'nearest' })
+      row?.querySelector<HTMLAnchorElement>('a')?.focus({ preventScroll: true })
+    })
+  },
 })
-
-// --- methods ---
-const onCreateSource = () => {
-  refetchSources()
-}
-
-const onDeleteSource = (source: Source) => {
-  source.delete().then(() => {
-    // Refetch after delete
-    refetchSources()
-  })
-}
-
-const onEditConfig = (source: Source) => {
-  source.save().then(() => {
-    // Refetch after edit
-    refetchSources()
-  })
+async function onCreateSource(source: Source) {
+  sources.value = [source, ...sources.value]
+  await nextTick()
+  document.getElementById(`source-${source.id}`)?.scrollIntoView({ block: 'nearest' })
 }
 </script>
 
 <template>
   <main class="sources-view">
-    <CreateSource @create="onCreateSource" />
-
+    <header class="sources-view__header">
+      <h1>{{ t('sidePanel.sources') }}</h1>
+      <CreateSource @create="onCreateSource" />
+    </header>
+    <div v-if="isLoading"><InkLoading />{{ t('common.loading') }}</div>
+    <div v-else-if="error" class="sources-view__feedback">
+      <p role="alert" class="text-feedback-error">{{ t('source.listFailed') }}</p>
+      <InkButton :text="t('source.retry')" theme="subtle" @click="refetchSources()" />
+    </div>
+    <p v-else-if="!sources.length">{{ t('source.empty') }}</p>
     <div class="sources-view__list">
-      <InkLoading v-if="sourcesLoading" />
-      <sourceCard
+      <SourceCard
         v-for="source in sources"
+        :id="`source-${source.id}`"
         :key="source.id"
         :source="source"
-        @delete="onDeleteSource"
-        @edit-config="onEditConfig"
       />
     </div>
   </main>
diff --git a/apps/client-web/uno.config.ts b/apps/client-web/uno.config.ts
index 48aedd3c..19a2f7c7 100644
--- a/apps/client-web/uno.config.ts
+++ b/apps/client-web/uno.config.ts
@@ -1,7 +1,8 @@
 import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'
+import { presetInk } from '@inkcre/ui-web/uno'
 
 export default defineConfig({
-  presets: [presetUno(), presetAttributify(), presetIcons()],
+  presets: [presetUno(), presetInk(), presetAttributify(), presetIcons()],
   safelist: [
     'i-mdi-menu',
     'i-mdi-loading',
diff --git a/docs/30-unit-tdd/info-base.md b/docs/30-unit-tdd/info-base.md
index d1fddbeb..c3c0351d 100644
--- a/docs/30-unit-tdd/info-base.md
+++ b/docs/30-unit-tdd/info-base.md
@@ -122,6 +122,10 @@ Application Recall/Search is not part of an InfoBase View, but an active View ma
 destination. Recall defaults to List outside a View; Find path supplies two Block references to Graph.
 The retired `sink/graph` community/MDS layer is not a compatibility surface.
 
+Graph 的工具区显示当前地址和实体数量；仅在 Block 邻域中提供可展开的范围与方向选项。节点以 Resolver 预览为主，编号与 Details 为辅助信息。预览区域支持 Enter／Space 聚焦，Details 打开 modeless inspector；拖拽使用节点的非操作区域，关系线选择朝向另一节点的连接点并在拖动后更新。方向弱化保留可读文字与全部交互，通过节点边界和关系线型区分，不触发重新检索。关系线仅显示可聚焦标签，选中关系后由工具区提供 Relation details。窄画布默认聚焦当前对象并保持可读比例，其余关系通过平移和缩放探索；Focus current 恢复当前视角。加载、空、缺失、无路径、超出边界与读取失败分别呈现；失败允许在原地址重试。
+
+Mail 的摘要用于识别邮件、附件或事实对象，完整 renderer 承担阅读和显式下载。邮件默认显示主题、发件人、日期与正文，完整信头、内嵌内容和相关邮件通过展开入口访问。附件条目与独立 MIME 视图共享文件身份和下载状态表现。邮件 HTML 先清理，再放入不允许脚本或同源访问的 iframe；只允许清理后插入的固定基础排印样式生效，远程图像不加载，已解析的 cid 图像仍由 Blob handle 提供。
+
 ## Producer Guardrails
 
 Producers emit exact, versioned Resolver IDs; keep protocol/source identity and declared metadata
diff --git a/docs/30-unit-tdd/native-extension-runtime.md b/docs/30-unit-tdd/native-extension-runtime.md
index ccdba1d6..95c23500 100644
--- a/docs/30-unit-tdd/native-extension-runtime.md
+++ b/docs/30-unit-tdd/native-extension-runtime.md
@@ -23,6 +23,11 @@ native lifecycle methods `initialize`, `activate`, `deactivate`, and `dispose`;
 capabilities come from its package entry rather than playground bootstrap code. Extension code
 imports `@inkcre/core` directly.
 
+Host 与 Web 扩展通过现有 Module Federation 配置共享 `@inkcre/ui-web` 单例，
+并声明当前锁定 UI 版本的要求。UI 的 i18n、路由和表单上下文使用模块内的 Vue 注入 key；
+如果扩展另用一份 UI 运行时，即使外观相同，也无法继承 Host 的这些上下文。
+独立 playground 仍可使用包自身的 fallback 模块，样式由各自应用入口加载。
+
 The producer emits the native `mf-manifest.json`, Remote entry, and referenced shared/exposed asset
 closure with relative asset semantics. The Registry Release records an immutable manifest
 association and typed Host SDK association. These are runtime inputs to the Host, not a second
diff --git a/docs/40-deployment/development-runtime.md b/docs/40-deployment/development-runtime.md
index 3bd3bf1d..bdd2b896 100644
--- a/docs/40-deployment/development-runtime.md
+++ b/docs/40-deployment/development-runtime.md
@@ -47,6 +47,17 @@ retains separate Sass ownership, and refuses `vite build`. Before handoff, stop
 remove `INKCRE_UI_SOURCE_ROOT` if set, and run the normal `pnpm check`; a green source loop is not
 release evidence.
 
+UI 2.0 的共享运行时是 Vue（最低 3.5.25）；使用 UnoCSS 的应用自行声明 UnoCSS。Web 的 Uno 配置在通用 preset 后注册
+`@inkcre/ui-web/uno` 的 `presetInk()`，使语义颜色与字体工具类实际生成。
+CodeMirror、JSON 语言服务等编辑器实现依赖由 UI 包拥有，源码联调也从 UI 自身解析它们。
+Web、mail、twitter 和 ext-dev-utils 锁定同一正式 UI 版本；生产构建不使用源码映射。
+
+维护 UI 消费代码前，从对应 workspace 的 `node_modules/@inkcre/ui-web/DESIGN.md`
+读取同版本的设计决策，再按随包 `skills/ui-web/SKILL.md` 选择组件与组合指南。
+各消费者的 `intent.skills` 已显式声明该包，可在相应 workspace 运行
+`pnpm exec intent load @inkcre/ui-web#ui-web`（例如先 `cd apps/client-web`）。
+仓库根目录只安装 Intent CLI，不另建一份 UI 依赖或复制 DESIGN.md；更新依赖时同步核对指南。
+
 ## Browser Runtime Configuration
 
 The web settings UI owns the PostgREST URL, technical Peer/Client ID, user-supplied JWT signing
@@ -75,7 +86,9 @@ owns provider parsing and transport safety.
 For a client-owned `local` or `ssh` runtime, the database provisioner resolves core-py's admitted
 `stable` channel once to an immutable digest. The selected image supplies the raw schema and role
 artifact; fresh pgvector PostgreSQL is restored before that exact core service reconciles runtime
-credentials and development data, with PostgREST serving the resulting database. Client-web owns no
+credentials and development data, with PostgREST serving the resulting database. The PostgreSQL
+health check uses TCP so the temporary socket-only initialization server cannot release the restore
+step before the final server is listening. Client-web owns no
 migration SQL, role definitions, seed ordering, or startup sleeps. Those semantics remain a core-py
 capability boundary. [`runtime/database.compose.yml`](../../runtime/database.compose.yml),
 [`contracts/core-release.json`](../../contracts/core-release.json), and
diff --git a/docs/40-deployment/web-delivery.md b/docs/40-deployment/web-delivery.md
index acbb5b13..e9c55b1d 100644
--- a/docs/40-deployment/web-delivery.md
+++ b/docs/40-deployment/web-delivery.md
@@ -43,7 +43,8 @@ open, same-repository pull requests targeting `main`; fork pull requests are ine
 `pull_request_target` controller checks out its trusted default-branch revision separately from the
 exact candidate head, installs the candidate's frozen pnpm and PDM environments, builds its SPA and
 selected Module Federation snapshots, and uses `inkcre-ext preview build` with the explicit
-`.github/preview/extensions.json` inventory to add a same-origin static Registry facade. Before
+`.github/preview/extensions.json` inventory to add a same-origin static Registry facade. The
+current inventory includes the Twitter and Mail Module Federation distributions. Before
 deployment it revalidates that the PR is still open and its identity and head SHA have not changed.
 
 The Toolkit places read-only native Extension snapshots and preview Releases beside the exact-head
diff --git a/extensions/AGENTS.md b/extensions/AGENTS.md
index d6d1db5a..6481722b 100644
--- a/extensions/AGENTS.md
+++ b/extensions/AGENTS.md
@@ -21,5 +21,5 @@ Host/producer runtime contracts belong to
 ## Required Check
 
 ```bash
-pnpm exec vitest run scripts/native-extension-distribution.test.mjs
+pnpm build
 ```
diff --git a/extensions/mail/package.json b/extensions/mail/package.json
index adf4e63e..001c1183 100644
--- a/extensions/mail/package.json
+++ b/extensions/mail/package.json
@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@inkcre/ext-dev-utils": "workspace:*",
-    "@inkcre/ui-web": "1.4.0",
+    "@inkcre/ui-web": "2.0.1",
     "@module-federation/vite": "^1.1.0",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitejs/plugin-vue-jsx": "^5.1.2",
@@ -29,7 +29,7 @@
   "peerDependencies": {
     "@vueuse/core": "^14.0.0",
     "pinia": "^3.0.0",
-    "vue": "^3.5.0",
+    "vue": "^3.5.25",
     "vue-router": "^4.5.0",
     "zod": "^4.1.0"
   },
@@ -40,5 +40,10 @@
       "host_sdk": "@inkcre/core",
       "host_sdk_version": ">=0.2.0 <0.3.0"
     }
+  },
+  "intent": {
+    "skills": [
+      "@inkcre/ui-web"
+    ]
   }
 }
diff --git a/extensions/mail/src/components/contentEmail/contentEmail.scss b/extensions/mail/src/components/contentEmail/contentEmail.scss
index cb3a182c..42b8cee9 100644
--- a/extensions/mail/src/components/contentEmail/contentEmail.scss
+++ b/extensions/mail/src/components/contentEmail/contentEmail.scss
@@ -1,91 +1,102 @@
 .content-email {
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  color: var(--ink-text-primary, #111827);
-
+  gap: sys-var(space, lg);
+  min-width: 0;
+  @include apply-font(body-md);
+  overflow-wrap: anywhere;
+  color: sys-var(color, text, base);
+  h2,
+  h3,
+  p {
+    margin: 0;
+  }
+  h2 {
+    @include apply-font(title-sm);
+  }
+  h3 {
+    @include apply-font(label-lg);
+  }
+  h3 span {
+    margin-left: sys-var(space, xs);
+    color: sys-var(color, text, subtle);
+  }
   &__header {
-    border-bottom: 1px solid var(--ink-border-primary, #e5e7eb);
-    padding-bottom: 16px;
-
-    h2 {
-      margin: 0 0 8px;
-      font-size: 20px;
-    }
-
-    time,
-    p {
-      color: var(--ink-text-secondary, #6b7280);
+    display: grid;
+    gap: sys-var(space, sm);
+  }
+  &__sender {
+    @include apply-font(body-md);
+  }
+  time,
+  &__empty {
+    @include apply-font(body-sm);
+    color: sys-var(color, text, subtle);
+  }
+  &__details {
+    @include apply-font(body-sm);
+    summary {
+      cursor: pointer;
+      color: sys-var(color, text, subtle);
     }
-
     dl {
       display: grid;
-      grid-template-columns: max-content minmax(0, 1fr);
-      gap: 4px 12px;
+      grid-template-columns: fit-content(30%) minmax(0, 1fr);
+      gap: sys-var(space, sm) sys-var(space, md);
     }
-
     dt {
       text-transform: capitalize;
-      color: var(--ink-text-secondary, #6b7280);
+      color: sys-var(color, text, subtle);
     }
-
     dd {
       margin: 0;
-      overflow-wrap: anywhere;
+    }
+    ul {
+      margin-top: sys-var(space, sm);
     }
   }
-
   &__html {
+    box-sizing: border-box;
     width: 100%;
-    min-height: 420px;
-    border: 1px solid var(--ink-border-primary, #e5e7eb);
+    height: min(60vh, 36rem);
+    min-height: 16rem;
+    border: 1px solid sys-var(color, border, subtle);
+    // The sanitized message remains a separate, script-free document.
     background: #fff;
   }
-
   &__text {
     margin: 0;
     white-space: pre-wrap;
     overflow-wrap: anywhere;
     font: inherit;
   }
-
-  &__parts,
-  &__references {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 10px;
-
-    h3 {
-      margin: 0;
-      font-size: 15px;
-    }
+  &__parts {
+    display: grid;
+    gap: sys-var(space, sm);
+  }
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
   }
-
   &__part {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    gap: 12px;
-    padding: 12px;
-    border: 1px solid var(--ink-border-primary, #e5e7eb);
-    border-radius: 6px;
-
-    div {
-      display: flex;
-      min-width: 0;
-      flex: 1;
-      flex-direction: column;
-    }
-
-    span,
-    p {
-      color: var(--ink-text-secondary, #6b7280);
-    }
-
-    p {
-      width: 100%;
-      margin: 0;
-    }
+    padding-block: sys-var(space, md);
+    border-top: 1px solid sys-var(color, border, subtle);
+  }
+  &__message-link {
+    padding: sys-var(space, xs) 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    text-decoration: underline;
+    cursor: pointer;
+    overflow-wrap: anywhere;
+  }
+  summary:focus-visible,
+  button:focus-visible {
+    outline: 2px solid sys-var(color, border, strong);
+    outline-offset: 2px;
   }
 }
diff --git a/extensions/mail/src/components/contentEmail/contentEmail.vue b/extensions/mail/src/components/contentEmail/contentEmail.vue
index d0b08c3a..4966086e 100644
--- a/extensions/mail/src/components/contentEmail/contentEmail.vue
+++ b/extensions/mail/src/components/contentEmail/contentEmail.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { InkButton } from '@inkcre/ui-web'
 import DOMPurify from 'dompurify'
 import { getInfoBaseRouter, type SolvedContentRendererProps } from '@inkcre/core'
 
 import type { EmailResolver } from '../../resolver'
+import MimePartItem from '../contentMimePart/MimePartItem.vue'
 import type { SolvedEmail, SolvedMimePart } from '../../schema'
 
 const props = defineProps<SolvedContentRendererProps<SolvedEmail, EmailResolver>>()
@@ -34,6 +34,35 @@ const participants = computed(() => {
   return [...grouped.entries()]
 })
 
+const sender = computed(() => {
+  const from = email.value.participants.filter(
+    (participant) => participant.relation.role === 'from'
+  )
+  const senders = from.length
+    ? from
+    : email.value.participants.filter((participant) => participant.relation.role === 'sender')
+  return senders
+    .sort((left, right) => left.relation.order - right.relation.order)
+    .map(
+      (participant) =>
+        participant.relation.display_name || participant.address.solvedContent.address
+    )
+    .join(', ')
+})
+const attachments = computed(() =>
+  email.value.mimeParts.filter((part) => part.relation.role === 'attachment')
+)
+const inlineParts = computed(() =>
+  email.value.mimeParts.filter((part) => part.relation.role === 'inline')
+)
+const conversations = computed(() => {
+  const parents = new Set(email.value.parents.map((part) => part.block.id))
+  return [
+    ...email.value.parents,
+    ...email.value.references.filter((part) => !parents.has(part.block.id)),
+  ]
+})
+
 const htmlBody = computed(() =>
   email.value.bodies.find((body) => body.block.resolver === 'core.html.v1')
 )
@@ -80,10 +109,11 @@ const isolatedHtml = computed(() => {
       anchor.removeAttribute('target')
     }
   }
-  return `<!doctype html><html><head><meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src blob:"></head><body>${document.body.innerHTML}</body></html>`
+  return `<!doctype html><html><head><meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src blob:; style-src 'nonce-inkcre-mail'"><style nonce="inkcre-mail">body{margin:0;padding:16px;color:#202020;background:#fff;font:16px/1.65 system-ui,sans-serif;overflow-wrap:anywhere}h1,h2,h3{line-height:1.35;font-weight:600}h1{font-size:1.5em}h2{font-size:1.25em}h3{font-size:1.1em}img{max-width:100%;height:auto}pre{white-space:pre-wrap}blockquote{margin-inline:0;padding-inline-start:16px;border-inline-start:2px solid #ccc}a{color:inherit}</style></head><body>${document.body.innerHTML}</body></html>`
 })
 
 async function materialize(block: number): Promise<void> {
+  if (materializing.value.has(block)) return
   materializing.value = new Set(materializing.value).add(block)
   const errors = new Map(materializeErrors.value)
   errors.delete(block)
@@ -91,8 +121,10 @@ async function materialize(block: number): Promise<void> {
   try {
     email.value = await props.resolver.materializeMimePart(block)
   } catch (cause) {
-    errors.set(block, cause instanceof Error ? cause.message : String(cause))
-    materializeErrors.value = errors
+    materializeErrors.value = new Map(materializeErrors.value).set(
+      block,
+      cause instanceof Error ? cause.message : String(cause)
+    )
   } finally {
     const active = new Set(materializing.value)
     active.delete(block)
@@ -109,21 +141,35 @@ function navigate(block: number): void {
   <article class="content-email">
     <header class="content-email__header">
       <h2>{{ email.root.subject || '(no subject)' }}</h2>
-      <time v-if="email.root.authored_at">{{ email.root.authored_at.toLocaleString() }}</time>
-      <dl>
-        <template v-for="[role, values] in participants" :key="role">
-          <dt>{{ role.replace(/_/g, ' ') }}</dt>
-          <dd>{{ values.join(', ') }}</dd>
-        </template>
-      </dl>
-      <p v-if="email.mailboxes.length">
-        {{ email.mailboxes.map((item) => item.mailbox.solvedContent.name).join(', ') }}
-        <span v-if="email.flags.length">
-          · {{ email.flags.map((item) => item.flag.solvedContent.name).join(', ') }}</span
-        >
-      </p>
+      <p v-if="sender" class="content-email__sender">{{ sender }}</p>
+      <time v-if="email.root.authored_at" :datetime="email.root.authored_at.toISOString()">{{
+        email.root.authored_at.toLocaleString()
+      }}</time>
+      <details
+        v-if="participants.length || email.mailboxes.length || email.flags.length"
+        class="content-email__details"
+      >
+        <summary>Message details</summary>
+        <dl>
+          <template v-for="[role, values] in participants" :key="role">
+            <dt>{{ role.replace(/_/g, ' ') }}</dt>
+            <dd>{{ values.join(', ') }}</dd>
+          </template>
+          <template v-if="email.mailboxes.length"
+            ><dt>Mailboxes</dt>
+            <dd>
+              {{ email.mailboxes.map((item) => item.mailbox.solvedContent.name).join(', ') }}
+            </dd></template
+          >
+          <template v-if="email.flags.length"
+            ><dt>Flags</dt>
+            <dd>
+              {{ email.flags.map((item) => item.flag.solvedContent.name).join(', ') }}
+            </dd></template
+          >
+        </dl>
+      </details>
     </header>
-
     <iframe
       v-if="htmlBody"
       :key="isolatedHtml"
@@ -134,55 +180,52 @@ function navigate(block: number): void {
     />
     <pre v-else-if="textBody" class="content-email__text">{{ textBody.solvedContent }}</pre>
     <p v-else class="content-email__empty">No body content</p>
-
-    <section v-if="email.mimeParts.length" class="content-email__parts">
-      <h3>Attachments and inline content</h3>
-      <article v-for="part in email.mimeParts" :key="part.block.id" class="content-email__part">
-        <div>
-          <strong>{{
-            part.solvedContent.root.filename ||
-            part.solvedContent.root.description ||
-            part.solvedContent.root.media_type
-          }}</strong>
-          <span>{{ part.solvedContent.root.media_type }}</span>
-        </div>
-        <a
-          v-if="objectUrl(part.solvedContent)"
-          :href="objectUrl(part.solvedContent) || undefined"
-          target="_blank"
-          rel="noopener noreferrer"
-          >Open</a
-        >
-        <InkButton
-          v-else
-          text="Download"
-          :loading="materializing.has(part.block.id)"
-          @click="materialize(part.block.id)"
-        />
-        <p v-if="materializeErrors.get(part.block.id)">
-          {{ materializeErrors.get(part.block.id) }}
-        </p>
-      </article>
-    </section>
-
-    <section
-      v-if="email.parents.length || email.references.length"
-      class="content-email__references"
-    >
-      <h3>Conversation</h3>
-      <InkButton
-        v-for="target in email.parents"
-        :key="`parent-${target.block.id}`"
-        :text="`View reply target: ${target.solvedContent.subject || target.solvedContent.message_id || `#${target.block.id}`}`"
-        @click="navigate(target.block.id)"
-      />
-      <InkButton
-        v-for="target in email.references"
-        :key="`reference-${target.block.id}`"
-        :text="`View reference: ${target.solvedContent.subject || target.solvedContent.message_id || `#${target.block.id}`}`"
-        @click="navigate(target.block.id)"
-      />
+    <section v-if="attachments.length" class="content-email__parts" aria-label="Attachments">
+      <h3>
+        Attachments <span>{{ attachments.length }}</span>
+      </h3>
+      <ul>
+        <li v-for="part in attachments" :key="part.block.id" class="content-email__part">
+          <MimePartItem
+            :content="part.solvedContent"
+            :loading="materializing.has(part.block.id)"
+            :error="materializeErrors.get(part.block.id)"
+            @download="materialize(part.block.id)"
+          />
+        </li>
+      </ul>
     </section>
+    <details v-if="inlineParts.length" class="content-email__details">
+      <summary>Inline content · {{ inlineParts.length }}</summary>
+      <ul>
+        <li v-for="part in inlineParts" :key="part.block.id" class="content-email__part">
+          <MimePartItem
+            :content="part.solvedContent"
+            :loading="materializing.has(part.block.id)"
+            :error="materializeErrors.get(part.block.id)"
+            @download="materialize(part.block.id)"
+          />
+        </li>
+      </ul>
+    </details>
+    <details v-if="conversations.length" class="content-email__details">
+      <summary>Related messages · {{ conversations.length }}</summary>
+      <ul>
+        <li v-for="target in conversations" :key="target.block.id">
+          <button
+            type="button"
+            class="content-email__message-link"
+            @click="navigate(target.block.id)"
+          >
+            {{
+              target.solvedContent.subject ||
+              target.solvedContent.message_id ||
+              `Message #${target.block.id}`
+            }}
+          </button>
+        </li>
+      </ul>
+    </details>
   </article>
 </template>
 
diff --git a/extensions/mail/src/components/contentEmail/contentEmailPreview.vue b/extensions/mail/src/components/contentEmail/contentEmailPreview.vue
index ec941b51..373e0e23 100644
--- a/extensions/mail/src/components/contentEmail/contentEmailPreview.vue
+++ b/extensions/mail/src/components/contentEmail/contentEmailPreview.vue
@@ -22,8 +22,8 @@ const body = computed(() => {
 
 <template>
   <article class="email-preview">
-    <span v-if="sender">{{ sender }}</span>
     <strong>{{ solvedContent.root.subject || '(no subject)' }}</strong>
+    <span v-if="sender">{{ sender }}</span>
     <p v-if="body">{{ body }}</p>
   </article>
 </template>
@@ -31,18 +31,32 @@ const body = computed(() => {
 <style scoped lang="scss">
 .email-preview {
   display: grid;
-  gap: 6px;
-  min-width: 220px;
+  gap: sys-var(space, xs);
+  min-width: 0;
   max-width: 360px;
 
+  overflow-wrap: anywhere;
+
+  strong {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    @include apply-font(label-lg);
+  }
+
+  span {
+    @include apply-font(label-md);
+  }
+
   span,
   p {
     margin: 0;
-    color: var(--ink-text-secondary, #6b7280);
+    color: var(--sys-color-text-subtle);
   }
 
   p {
-    line-height: 1.45;
+    @include apply-font(body-sm);
     overflow-wrap: anywhere;
   }
 }
diff --git a/extensions/mail/src/components/contentMailFact/contentMailFact.vue b/extensions/mail/src/components/contentMailFact/contentMailFact.vue
index e28127bd..f2d36404 100644
--- a/extensions/mail/src/components/contentMailFact/contentMailFact.vue
+++ b/extensions/mail/src/components/contentMailFact/contentMailFact.vue
@@ -3,35 +3,62 @@ import { computed } from 'vue'
 import type { SolvedContentRendererProps } from '@inkcre/core'
 
 const props = defineProps<SolvedContentRendererProps<Record<string, unknown>>>()
-const entries = computed(() =>
-  Object.entries(props.solvedContent).filter(([, value]) => value !== null && value !== '')
+const title = computed(
+  () => props.solvedContent.address || props.solvedContent.name || 'Mail record'
+)
+const details = computed(() =>
+  Object.entries(props.solvedContent).filter(
+    ([key, value]) =>
+      !['address', 'name', 'description'].includes(key) &&
+      value !== null &&
+      value !== '' &&
+      (!Array.isArray(value) || value.length > 0)
+  )
 )
 </script>
 
 <template>
-  <dl class="content-mail-fact">
-    <template v-for="[name, value] in entries" :key="name">
-      <dt>{{ name.replace(/_/g, ' ') }}</dt>
-      <dd>{{ Array.isArray(value) ? value.join(', ') : value }}</dd>
-    </template>
-  </dl>
+  <article class="mail-fact">
+    <strong>{{ title }}</strong>
+    <p v-if="solvedContent.description">{{ solvedContent.description }}</p>
+    <dl v-if="details.length">
+      <template v-for="[name, value] in details" :key="name">
+        <dt>{{ name.replace(/_/g, ' ') }}</dt>
+        <dd>{{ Array.isArray(value) ? value.join(', ') : value }}</dd>
+      </template>
+    </dl>
+  </article>
 </template>
 
 <style scoped lang="scss">
-.content-mail-fact {
+.mail-fact {
   display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  gap: 8px 16px;
-  margin: 0;
-
+  gap: sys-var(space, sm);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: sys-var(color, text, base);
+  strong {
+    @include apply-font(label-lg);
+  }
+  p {
+    margin: 0;
+    @include apply-font(body-md);
+    color: sys-var(color, text, subtle);
+  }
+  dl {
+    display: grid;
+    grid-template-columns: fit-content(35%) minmax(0, 1fr);
+    gap: sys-var(space, sm) sys-var(space, md);
+    margin: 0;
+  }
   dt {
-    color: var(--ink-text-secondary, #6b7280);
+    @include apply-font(body-sm);
     text-transform: capitalize;
+    color: sys-var(color, text, subtle);
   }
-
   dd {
     margin: 0;
-    overflow-wrap: anywhere;
+    @include apply-font(body-md);
   }
 }
 </style>
diff --git a/extensions/mail/src/components/contentMailFact/contentMailFactPreview.vue b/extensions/mail/src/components/contentMailFact/contentMailFactPreview.vue
index 2a40884b..12c472b2 100644
--- a/extensions/mail/src/components/contentMailFact/contentMailFactPreview.vue
+++ b/extensions/mail/src/components/contentMailFact/contentMailFactPreview.vue
@@ -3,36 +3,55 @@ import { computed } from 'vue'
 import type { SolvedContentRendererProps } from '@inkcre/core'
 
 const props = defineProps<SolvedContentRendererProps<Record<string, unknown>>>()
-const summary = computed(() =>
-  Object.entries(props.solvedContent)
-    .filter(([, value]) => value !== null && value !== '')
-    .slice(0, 3)
+const title = computed(
+  () => props.solvedContent.address || props.solvedContent.name || 'Mail record'
 )
 </script>
 
 <template>
-  <dl class="mail-fact-preview">
-    <template v-for="[name, value] in summary" :key="name">
-      <dt>{{ name.replace(/_/g, ' ') }}</dt>
-      <dd>{{ Array.isArray(value) ? value.join(', ') : value }}</dd>
-    </template>
-  </dl>
+  <article class="mail-fact-preview">
+    <strong>{{ title }}</strong>
+    <p v-if="solvedContent.description">{{ solvedContent.description }}</p>
+  </article>
 </template>
 
 <style scoped lang="scss">
 .mail-fact-preview {
   display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  gap: 4px 12px;
-  margin: 0;
-  max-width: 320px;
-
+  gap: sys-var(space, sm);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: sys-var(color, text, base);
+  strong {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    @include apply-font(label-lg);
+  }
+  p {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    margin: 0;
+    @include apply-font(body-sm);
+    color: sys-var(color, text, subtle);
+  }
+  dl {
+    display: grid;
+    grid-template-columns: fit-content(35%) minmax(0, 1fr);
+    gap: sys-var(space, sm) sys-var(space, md);
+    margin: 0;
+  }
   dt {
-    color: var(--ink-text-secondary, #6b7280);
+    @include apply-font(body-sm);
+    text-transform: capitalize;
+    color: sys-var(color, text, subtle);
   }
   dd {
     margin: 0;
-    overflow-wrap: anywhere;
+    @include apply-font(body-md);
   }
 }
 </style>
diff --git a/extensions/mail/src/components/contentMimePart/MimePartItem.vue b/extensions/mail/src/components/contentMimePart/MimePartItem.vue
new file mode 100644
index 00000000..d4852523
--- /dev/null
+++ b/extensions/mail/src/components/contentMimePart/MimePartItem.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { InkButton } from '@inkcre/ui-web'
+import type { SolvedMimePart } from '../../schema'
+
+const props = defineProps<{ content: SolvedMimePart; loading: boolean; error?: string }>()
+defineEmits<{ download: [] }>()
+const url = computed(() => {
+  const value = props.content.content?.solvedContent
+  return value &&
+    typeof value === 'object' &&
+    'objectUrl' in value &&
+    typeof value.objectUrl === 'string'
+    ? value.objectUrl
+    : null
+})
+</script>
+
+<template>
+  <div class="mime-part-item" :aria-busy="loading">
+    <div class="mime-part-item__identity">
+      <strong>{{
+        content.root.filename || content.root.description || content.root.media_type
+      }}</strong>
+      <p>
+        {{ content.root.media_type
+        }}<span v-if="content.root.encoded_size !== null">
+          · {{ content.root.encoded_size.toLocaleString() }} encoded bytes</span
+        >
+      </p>
+    </div>
+    <a v-if="url" :href="url" target="_blank" rel="noopener noreferrer">Open</a>
+    <InkButton
+      v-else
+      text="Download"
+      theme="subtle"
+      :is-loading="loading"
+      @click="$emit('download')"
+    />
+    <p v-if="error" class="mime-part-item__error" role="alert">{{ error }}</p>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.mime-part-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: sys-var(space, sm) sys-var(space, md);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: sys-var(color, text, base);
+  &__identity {
+    flex: 1 1 12rem;
+    min-width: 0;
+  }
+  strong {
+    @include apply-font(label-lg);
+  }
+  p {
+    margin: sys-var(space, xs) 0 0;
+    @include apply-font(body-sm);
+    color: sys-var(color, text, subtle);
+  }
+  a {
+    @include apply-font(label-md, $underlined: true);
+    color: inherit;
+  }
+  .mime-part-item__error {
+    flex-basis: 100%;
+    margin: 0;
+    color: sys-var(color, feedback, error);
+  }
+}
+</style>
diff --git a/extensions/mail/src/components/contentMimePart/contentMimePart.vue b/extensions/mail/src/components/contentMimePart/contentMimePart.vue
index 644f503c..4979e24c 100644
--- a/extensions/mail/src/components/contentMimePart/contentMimePart.vue
+++ b/extensions/mail/src/components/contentMimePart/contentMimePart.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { InkButton } from '@inkcre/ui-web'
+import { computed, ref, watch } from 'vue'
+import MimePartItem from './MimePartItem.vue'
 import type { SolvedContentRendererProps } from '@inkcre/core'
 
 import type { MailMimePartResolver } from '../../resolver'
@@ -11,7 +11,22 @@ const content = ref(props.solvedContent)
 const loading = ref(false)
 const error = ref<Error | null>(null)
 
+const details = computed(() =>
+  Object.entries(content.value.root).filter(
+    ([key, value]) =>
+      !['filename', 'media_type', 'encoded_size'].includes(key) && value !== null && value !== ''
+  )
+)
+watch(
+  () => props.solvedContent,
+  (value) => {
+    content.value = value
+    error.value = null
+  }
+)
+
 async function materialize(): Promise<void> {
+  if (loading.value) return
   loading.value = true
   error.value = null
   try {
@@ -28,42 +43,50 @@ async function materialize(): Promise<void> {
 </script>
 
 <template>
-  <div class="content-mime-part">
-    <strong>{{
-      content.root.filename || content.root.description || content.root.media_type
-    }}</strong>
-    <span>{{ content.root.media_type }}</span>
-    <span v-if="content.root.encoded_size !== null"
-      >{{ content.root.encoded_size }} bytes encoded</span
-    >
-    <a
-      v-if="
-        content.content &&
-        typeof content.content.solvedContent === 'object' &&
-        content.content.solvedContent &&
-        'objectUrl' in content.content.solvedContent
-      "
-      :href="String(content.content.solvedContent.objectUrl)"
-      target="_blank"
-      rel="noopener noreferrer"
-      >Open</a
-    >
-    <InkButton v-else text="Download content" :loading="loading" @click="materialize" />
-    <p v-if="error">{{ error.message }}</p>
-  </div>
+  <article class="content-mime-part">
+    <MimePartItem
+      :content="content"
+      :loading="loading"
+      :error="error?.message"
+      @download="materialize"
+    />
+    <details v-if="details.length">
+      <summary>File details</summary>
+      <dl>
+        <template v-for="[key, value] in details" :key="key"
+          ><dt>{{ key.replace(/_/g, ' ') }}</dt>
+          <dd>{{ value }}</dd></template
+        >
+      </dl>
+    </details>
+  </article>
 </template>
 
 <style scoped lang="scss">
 .content-mime-part {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-
-  span,
-  p {
+  display: grid;
+  gap: sys-var(space, lg);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: sys-var(color, text, base);
+  summary {
+    @include apply-font(body-sm);
+    cursor: pointer;
+    color: sys-var(color, text, subtle);
+  }
+  dl {
+    display: grid;
+    grid-template-columns: fit-content(35%) minmax(0, 1fr);
+    gap: sys-var(space, sm) sys-var(space, md);
+  }
+  dt {
+    @include apply-font(body-sm);
+    text-transform: capitalize;
+    color: sys-var(color, text, subtle);
+  }
+  dd {
     margin: 0;
-    color: var(--ink-text-secondary, #6b7280);
+    @include apply-font(body-md);
   }
 }
 </style>
diff --git a/extensions/mail/src/components/contentMimePart/contentMimePartPreview.vue b/extensions/mail/src/components/contentMimePart/contentMimePartPreview.vue
index b56d286b..45edeee0 100644
--- a/extensions/mail/src/components/contentMimePart/contentMimePartPreview.vue
+++ b/extensions/mail/src/components/contentMimePart/contentMimePartPreview.vue
@@ -18,13 +18,23 @@ defineProps<SolvedContentRendererProps<SolvedMimePart, MailMimePartResolver>>()
 
 <style scoped lang="scss">
 .mime-part-preview {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
+  display: grid;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  gap: sys-var(space, xs);
   max-width: 320px;
 
+  strong {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    @include apply-font(label-lg);
+  }
+
   span {
-    color: var(--ink-text-secondary, #6b7280);
+    @include apply-font(label-md);
+    color: var(--sys-color-text-subtle);
   }
 }
 </style>
diff --git a/extensions/mail/src/views/DevHome.vue b/extensions/mail/src/views/DevHome.vue
index bc9800f7..2e3f232e 100644
--- a/extensions/mail/src/views/DevHome.vue
+++ b/extensions/mail/src/views/DevHome.vue
@@ -1,6 +1,23 @@
 <template>
-  <main>
+  <section class="dev-home">
     <h1>Mail Extension</h1>
     <p>Registers canonical Email, Mailbox, EmailAddress, MailFlag, and MIME-part resolvers.</p>
-  </main>
+  </section>
 </template>
+
+<style scoped lang="scss">
+@use '@inkcre/ui-web/styles/mixins' as *;
+
+.dev-home {
+  max-width: 800px;
+  margin: 0 auto;
+
+  h1 {
+    @include apply-font(title-lg);
+  }
+
+  p {
+    color: var(--sys-color-text-subtle);
+  }
+}
+</style>
diff --git a/extensions/mf-shared.ts b/extensions/mf-shared.ts
index 12210cd7..90fe41a9 100644
--- a/extensions/mf-shared.ts
+++ b/extensions/mf-shared.ts
@@ -6,6 +6,10 @@ import corePackageJson from '../packages/core/package.json'
 export const coreSharedVersion = `^${corePackageJson.version}`
 
 export default {
+  '@inkcre/ui-web': {
+    singleton: true,
+    requiredVersion: packageJson.dependencies['@inkcre/ui-web'],
+  },
   vue: { singleton: true, requiredVersion: packageJson.dependencies.vue },
   pinia: { singleton: true, requiredVersion: packageJson.dependencies.pinia },
   'vue-router': {
diff --git a/extensions/twitter/package.json b/extensions/twitter/package.json
index ee116ba2..cd022116 100644
--- a/extensions/twitter/package.json
+++ b/extensions/twitter/package.json
@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@inkcre/ext-dev-utils": "workspace:*",
-    "@inkcre/ui-web": "1.4.0",
+    "@inkcre/ui-web": "2.0.1",
     "@module-federation/vite": "^1.1.0",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitejs/plugin-vue-jsx": "^5.1.2",
@@ -27,7 +27,7 @@
   "peerDependencies": {
     "@vueuse/core": "^14.0.0",
     "pinia": "^3.0.0",
-    "vue": "^3.5.0",
+    "vue": "^3.5.25",
     "vue-router": "^4.5.0",
     "zod": "^4.1.0"
   },
@@ -38,5 +38,10 @@
       "host_sdk": "@inkcre/core",
       "host_sdk_version": ">=0.2.0 <0.3.0"
     }
+  },
+  "intent": {
+    "skills": [
+      "@inkcre/ui-web"
+    ]
   }
 }
diff --git a/extensions/twitter/src/components/contentTweet/contentTweet.scss b/extensions/twitter/src/components/contentTweet/contentTweet.scss
index 310aceab..a6460615 100644
--- a/extensions/twitter/src/components/contentTweet/contentTweet.scss
+++ b/extensions/twitter/src/components/contentTweet/contentTweet.scss
@@ -1,6 +1,6 @@
 .content-tweet {
   background: sys-var(color, surface, base);
-  overflow: hidden;
+  overflow: auto;
 
   &__header {
     display: flex;
@@ -10,21 +10,19 @@
   }
 
   &__icon {
-    font-size: 14px;
-    font-weight: bold;
+    @include apply-icon(sm);
   }
 
   &__user {
-    @include apply-font(label-sm);
+    @include apply-font(label-md);
     color: sys-var(color, text, subtle);
-    font-weight: 500;
   }
 
   &__text {
-    @include apply-font(label-lg);
+    @include apply-font(body-md);
     color: sys-var(color, text, base);
-    word-break: break-word;
-    line-height: 1.4;
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
   }
 
   &__media {
@@ -34,7 +32,7 @@
   &__media-grid {
     display: grid;
     gap: 2px;
-    border-radius: 16px;
+    border-radius: sys-var(radius, none);
     overflow: hidden;
     background: sys-var(color, surface, subtle);
 
@@ -89,30 +87,13 @@
     position: relative;
     overflow: hidden;
     background: sys-var(color, surface, subtle);
-    cursor: pointer;
-    transition: opacity 200ms ease;
 
-    img,
-    video {
+    img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       object-position: center;
       display: block;
-      transition: transform 200ms ease;
-    }
-
-    &:hover {
-      opacity: 0.95;
-
-      img,
-      video {
-        transform: scale(1.03);
-      }
-
-      .content-tweet__media-play {
-        transform: translate(-50%, -50%) scale(1.1);
-      }
     }
   }
 
@@ -124,7 +105,7 @@
     height: 100%;
     background: sys-var(color, surface, subtle);
     color: sys-var(color, text, subtle);
-    @include apply-font(label-sm);
+    @include apply-font(body-sm);
 
     &-icon {
       display: flex;
@@ -132,53 +113,9 @@
       justify-content: center;
       width: 32px;
       height: 32px;
-      border-radius: 50%;
       background: sys-var(color, surface, base);
       color: sys-var(color, text, subtle);
-      font-size: 18px;
-    }
-  }
-
-  // Video play button overlay
-  &__media-play {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 68px;
-    height: 68px;
-    border-radius: 50%;
-    background: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    transition: transform 200ms ease;
-    z-index: 1;
-
-    &-icon {
-      color: white;
-      font-size: 32px;
-      line-height: 1;
-      padding-left: 4px; // Visual centering for play triangle
+      @include apply-icon(md);
     }
   }
-
-  // VIDEO badge
-  &__media-badge {
-    position: absolute;
-    bottom: 8px;
-    right: 8px;
-    padding: 2px 6px;
-    background: rgba(0, 0, 0, 0.75);
-    color: white;
-    @include apply-font(label-sm);
-    font-weight: 600;
-    border-radius: 4px;
-    text-transform: uppercase;
-    font-size: 10px;
-    line-height: 1.2;
-    letter-spacing: 0.5px;
-    z-index: 1;
-  }
 }
diff --git a/extensions/twitter/src/components/contentTweet/contentTweet.vue b/extensions/twitter/src/components/contentTweet/contentTweet.vue
index da3c952e..6f879d82 100644
--- a/extensions/twitter/src/components/contentTweet/contentTweet.vue
+++ b/extensions/twitter/src/components/contentTweet/contentTweet.vue
@@ -8,7 +8,7 @@ const props = defineProps<SolvedContentRendererProps<Tweet>>()
 // Track failed image loads
 const failedAttachments = ref<Set<number>>(new Set())
 
-// Display text - truncated for graph view
+// Graph summaries belong to contentTweetPreview; this renderer opens the full tweet.
 const displayText = computed(() => {
   if (!props.solvedContent) return ''
   const text = props.solvedContent.text
@@ -16,8 +16,7 @@ const displayText = computed(() => {
     .replace(/\[video\]/g, '')
     .replace(/\[link\]/g, '')
     .trim()
-  const maxLen = 80
-  return text.length > maxLen ? text.slice(0, maxLen) + '...' : text
+  return text
 })
 
 // Attachments from resolved content (blob URLs)
@@ -47,30 +46,35 @@ const isAttachmentFailed = (index: number) => {
 </script>
 
 <template>
-  <div class="content-tweet__header">
-    <span class="content-tweet__icon">𝕏</span>
-    <span class="content-tweet__user">@{{ props.solvedContent.user_id ?? 'unknown' }}</span>
-  </div>
-  <div class="content-tweet__text">{{ displayText }}</div>
-  <div v-if="attachmentCount > 0" class="content-tweet__media">
-    <div class="content-tweet__media-grid" :class="`content-tweet__media-grid--${attachmentCount}`">
+  <article class="content-tweet">
+    <div class="content-tweet__header">
+      <span class="content-tweet__icon">𝕏</span>
+      <span class="content-tweet__user">@{{ props.solvedContent.user_id ?? 'unknown' }}</span>
+    </div>
+    <div class="content-tweet__text">{{ displayText }}</div>
+    <div v-if="attachmentCount > 0" class="content-tweet__media">
       <div
-        v-for="(attachment, index) in displayAttachments"
-        :key="index"
-        class="content-tweet__media-item"
+        class="content-tweet__media-grid"
+        :class="`content-tweet__media-grid--${attachmentCount}`"
       >
-        <img
-          v-if="!isAttachmentFailed(index)"
-          :src="attachment"
-          :alt="`Tweet attachment ${index + 1}`"
-          @error="onImageError(index)"
-        />
-        <div v-else class="content-tweet__media-error">
-          <span class="content-tweet__media-error-icon">!</span>
+        <div
+          v-for="(attachment, index) in displayAttachments"
+          :key="index"
+          class="content-tweet__media-item"
+        >
+          <img
+            v-if="!isAttachmentFailed(index)"
+            :src="attachment"
+            :alt="`Tweet attachment ${index + 1}`"
+            @error="onImageError(index)"
+          />
+          <div v-else class="content-tweet__media-error">
+            <span class="content-tweet__media-error-icon">!</span>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </article>
 </template>
 
 <style lang="scss" scoped src="./contentTweet.scss" />
diff --git a/extensions/twitter/src/components/contentTweet/contentTweetPreview.vue b/extensions/twitter/src/components/contentTweet/contentTweetPreview.vue
index 37a50f4d..2d981cb0 100644
--- a/extensions/twitter/src/components/contentTweet/contentTweetPreview.vue
+++ b/extensions/twitter/src/components/contentTweet/contentTweetPreview.vue
@@ -30,13 +30,13 @@ const text = computed(() => {
   max-width: 340px;
 
   span {
-    color: var(--ink-text-secondary, #6b7280);
-    font-size: 0.75rem;
+    color: var(--sys-color-text-subtle);
+    @include apply-font(label-md);
   }
 
   p {
     margin: 0;
-    line-height: 1.45;
+    @include apply-font(body-sm);
     overflow-wrap: anywhere;
   }
 
diff --git a/extensions/twitter/src/components/twitterSetupWizard/twitterSetupWizard.md b/extensions/twitter/src/components/twitterSetupWizard/twitterSetupWizard.md
index 562325e9..90f6487f 100644
--- a/extensions/twitter/src/components/twitterSetupWizard/twitterSetupWizard.md
+++ b/extensions/twitter/src/components/twitterSetupWizard/twitterSetupWizard.md
@@ -1,10 +1,7 @@
 # TwitterSetupWizard
 
-Twitter-owned four-step setup contribution mounted by the client-web Extension dialog.
+Twitter 扩展提供四步配置视图，宿主 Extensions dialog 挂载组件并处理 `close` 事件。进度来自当前 Core、OAuth、来源和调度事实，不持久化页面步骤。已走过的步骤提供返回入口，已完成时显示账户、来源与可读的每日采集时间。
 
-- Discovers live Core Peers through Peer capability advertisements.
-- Requires explicit Core enablement before setup commands are available.
-- Configures the user's X OAuth App, opens the standalone provider flow, and polls only the opaque transaction reference.
-- Selects or creates a Bookmark Source and explicitly starts initial collection.
-- Derives progress from Core setup facts; it does not persist a wizard step.
-- Owns its Close action; client-web only owns the popup surface.
+用户先选择采集客户端，再配置自己的 X OAuth 应用。已有应用的凭据默认折叠；未保存的修改不能用于创建授权链接。授权在独立标签页完成，当前页只轮询不透明交易引用，显示等待或失败，并在成功后进入来源配置。凭据保存失败保留草稿，Secret 保持掩码。
+
+来源选择、创建和每日调度围绕当前对象显示。保存完成后进入确认，只有明确激活 Start collecting bookmarks 才启用调度并触发首次采集。普通进度保持中性色，错误直接显示；请求等待期间禁止重复动作与组件内 Close，关闭或卸载会停止授权轮询。宿主 dialog 自身的关闭策略仍由宿主负责。
diff --git a/extensions/twitter/src/components/twitterSetupWizard/twitterSetupWizard.scss b/extensions/twitter/src/components/twitterSetupWizard/twitterSetupWizard.scss
index 0817e146..697c1d9c 100644
--- a/extensions/twitter/src/components/twitterSetupWizard/twitterSetupWizard.scss
+++ b/extensions/twitter/src/components/twitterSetupWizard/twitterSetupWizard.scss
@@ -1,135 +1,132 @@
 .twitter-setup {
-  display: grid;
-  gap: 1.25rem;
-  width: min(680px, 80vw);
-
-  &__toolbar {
-    display: flex;
-    justify-content: flex-end;
+  display: flex;
+  flex-direction: column;
+  gap: sys-var(space, lg);
+  width: min(36rem, 80vw);
+  max-width: 100%;
+  @include apply-font(body-md);
+  color: sys-var(color, text, base);
+  overflow-wrap: anywhere;
+
+  h3,
+  p {
+    margin: 0;
+  }
+  h3 {
+    @include apply-font(title-sm);
   }
-
   &__steps {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 0.5rem;
-    margin: 0;
-    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: sys-var(space, sm) sys-var(space, md);
     list-style: none;
-
-    li {
-      display: flex;
-      align-items: center;
-      gap: 0.4rem;
-      color: sys-var(color, text, muted);
-      font-size: 0.8rem;
+    margin: 0;
+    padding: 0 0 sys-var(space, md);
+    border-bottom: 1px solid sys-var(color, border, subtle);
+    @include apply-font(body-sm);
+    color: sys-var(color, text, subtle);
+    button,
+    .twitter-setup__step {
+      display: inline-flex;
+      align-items: baseline;
+      gap: sys-var(space, xs);
     }
-
-    span {
-      display: inline-grid;
-      place-items: center;
-      width: 1.5rem;
-      height: 1.5rem;
-      border: 1px solid currentcolor;
-      border-radius: 50%;
+    button {
+      border: 0;
+      padding: 0;
+      font: inherit;
+      color: inherit;
+      background: transparent;
+      text-decoration: underline;
+      cursor: pointer;
     }
-
-    .is-current,
-    .is-complete {
-      color: sys-var(color, info, base);
+    .is-current {
+      color: sys-var(color, text, base);
       font-weight: 600;
     }
   }
-
   &__panel {
     display: grid;
-    gap: 1rem;
-
-    h3,
-    p {
-      margin: 0;
+    gap: sys-var(space, md);
+  }
+  &__app {
+    summary {
+      cursor: pointer;
+      @include apply-font(label-lg);
+    }
+    > p,
+    > code,
+    > form {
+      margin-top: sys-var(space, md);
     }
-
     code {
       display: block;
-      margin-top: 0.5rem;
-      padding: 0.6rem;
+      @include apply-font(body-sm, $mono: true);
       overflow-wrap: anywhere;
-      background: rgb(0 0 0 / 5%);
     }
   }
-
-  &__section,
-  &__empty {
+  &__hint {
+    color: sys-var(color, text, subtle);
+    @include apply-font(body-sm);
+  }
+  &__authorization {
     display: grid;
     gap: sys-var(space, sm);
-    padding: sys-var(space, md);
-    border: 1px solid sys-var(color, border, base);
-    background: sys-var(color, surface, subtle);
-
-    h4,
-    p {
-      margin: 0;
-    }
   }
-
-  &__hint {
+  &__authorization a {
+    color: sys-var(color, text, base);
+    @include apply-font(label-lg, $underlined: true);
+  }
+  &__authorization p {
+    @include apply-font(body-sm);
     color: sys-var(color, text, subtle);
   }
-
   &__secret {
+    @include apply-font(body-md);
+    box-sizing: border-box;
     width: 100%;
     min-height: 2.5rem;
     padding: sys-var(space, sm);
     border: 1px solid sys-var(color, border, base);
+    border-radius: 0;
     background: sys-var(color, surface, base);
     color: sys-var(color, text, base);
   }
-
-  &__schedule,
   &__actions {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.75rem;
+    gap: sys-var(space, sm);
   }
-
-  &__oauth-link {
-    width: fit-content;
-    font-weight: 600;
+  &__toolbar {
+    display: flex;
+    justify-content: flex-end;
   }
-
   &__loading {
-    display: flex;
-    justify-content: center;
-    min-height: 10rem;
+    display: grid;
+    justify-items: center;
+    gap: sys-var(space, md);
+    padding-block: sys-var(space, lg);
   }
-
   &__error {
-    margin: 0;
-    color: sys-var(color, danger, base);
+    color: sys-var(color, feedback, error);
+    @include apply-font(body-sm);
   }
-
   dl {
     display: grid;
-    grid-template-columns: max-content 1fr;
-    gap: 0.5rem 1rem;
+    grid-template-columns: fit-content(35%) minmax(0, 1fr);
+    gap: sys-var(space, sm) sys-var(space, md);
     margin: 0;
   }
-
   dt {
-    font-weight: 600;
+    color: sys-var(color, text, subtle);
   }
-
   dd {
     margin: 0;
   }
-}
-
-@media (max-width: 640px) {
-  .twitter-setup {
-    width: min(88vw, 680px);
-
-    &__steps {
-      grid-template-columns: 1fr 1fr;
-    }
+  button:focus-visible,
+  summary:focus-visible,
+  input:focus-visible {
+    outline: 2px solid sys-var(color, border, strong);
+    outline-offset: 2px;
   }
 }
diff --git a/extensions/twitter/src/components/twitterSetupWizard/twitterSetupWizard.vue b/extensions/twitter/src/components/twitterSetupWizard/twitterSetupWizard.vue
index 628d112b..6ad835dd 100644
--- a/extensions/twitter/src/components/twitterSetupWizard/twitterSetupWizard.vue
+++ b/extensions/twitter/src/components/twitterSetupWizard/twitterSetupWizard.vue
@@ -2,7 +2,6 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import {
   InkButton,
-  InkDatetimePickerView,
   InkDropdown,
   InkField,
   InkForm,
@@ -34,6 +33,7 @@ const pending = ref<string | null>(null)
 const error = ref<string | null>(null)
 const clientId = ref('')
 const clientSecret = ref('')
+const savedOAuthApp = ref<TwitterOAuthAppConfig | null>(null)
 const transaction = ref<OAuthTransaction | null>(null)
 const sources = ref<Source[]>([])
 const selectedSourceId = ref<string | number | null>(null)
@@ -53,7 +53,20 @@ const api = computed(() =>
 )
 const selectedCoreEnabled = computed(() => selectedCandidate.value?.enabled ?? false)
 const busy = computed(() => pending.value !== null)
-const oauthAppConfigured = computed(() => Boolean(clientId.value && clientSecret.value))
+const oauthAppConfigured = computed(() =>
+  Boolean(savedOAuthApp.value?.client_id && savedOAuthApp.value?.client_secret)
+)
+const oauthAppChanged = computed(
+  () =>
+    clientId.value !== savedOAuthApp.value?.client_id ||
+    clientSecret.value !== savedOAuthApp.value?.client_secret
+)
+const authorizationPending = computed(() =>
+  Boolean(transaction.value && ['pending', 'exchanging'].includes(transaction.value.status))
+)
+const collectionTime = computed(() =>
+  scheduleTime.value.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+)
 const setupReady = computed(() =>
   Boolean(status.value?.connected && selectedSource.value && selectedCron.value?.enabled)
 )
@@ -100,6 +113,7 @@ async function loadCollection(preferredSourceId?: number | null): Promise<void>
   creatingSource.value = collection.sources.length === 0
 }
 function applyOAuthAppConfig(config: TwitterOAuthAppConfig): void {
+  savedOAuthApp.value = config
   clientId.value = config.client_id
   clientSecret.value = config.client_secret
 }
@@ -150,12 +164,19 @@ watch(selectedSourceId, async (value) => {
     selectedCron.value = null
     return
   }
-  if (typeof value !== 'number') return
+  if (typeof value !== 'number' || value === selectedSource.value?.id) return
   creatingSource.value = false
-  const collection = await TwitterBookmarkSetup.read(value)
-  selectedSource.value = collection.source
-  selectedCron.value = collection.cron
-  scheduleTime.value = scheduleFromCron(collection.cron)
+  await run('source', async () => {
+    try {
+      const collection = await TwitterBookmarkSetup.read(value)
+      selectedSource.value = collection.source
+      selectedCron.value = collection.cron
+      scheduleTime.value = scheduleFromCron(collection.cron)
+    } catch (cause) {
+      selectedSourceId.value = selectedSource.value?.id ?? null
+      throw cause
+    }
+  })
 })
 async function enableSelectedCore(): Promise<void> {
   if (!api.value || !selectedCandidate.value) return
@@ -198,6 +219,7 @@ function stopPolling(): void {
   polling = null
 }
 function close(): void {
+  if (busy.value) return
   stopPolling()
   emit('close')
 }
@@ -287,71 +309,136 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <section class="twitter-setup">
+  <section class="twitter-setup" :aria-busy="loading || busy">
     <ol class="twitter-setup__steps" aria-label="Twitter setup progress">
       <li
         v-for="(step, index) in TWITTER_SETUP_STEPS"
         :key="step"
-        :class="{ 'is-current': currentStep === index, 'is-complete': currentStep > index }"
+        :class="{ 'is-current': currentStep === index }"
+        :aria-current="currentStep === index ? 'step' : undefined"
       >
-        <span>{{ index + 1 }}</span
-        >{{ step }}
+        <button
+          v-if="index < currentStep"
+          type="button"
+          :disabled="busy"
+          @click="currentStep = index"
+        >
+          <span>{{ index + 1 }}</span
+          >{{ step }}
+        </button>
+        <span v-else class="twitter-setup__step"
+          ><span>{{ index + 1 }}</span
+          >{{ step }}</span
+        >
       </li>
     </ol>
-    <div v-if="loading" class="twitter-setup__loading"><InkLoading /></div>
+    <div v-if="loading" class="twitter-setup__loading" role="status">
+      <InkLoading />
+      <p>Loading Twitter settings…</p>
+    </div>
     <template v-else>
       <p v-if="error" class="twitter-setup__error" role="alert">{{ error }}</p>
       <div v-if="currentStep === 0" class="twitter-setup__panel">
-        <h3>Choose a Core Peer</h3>
-        <p>The OAuth callback runs on a Core Peer, while setup applies to the deployment.</p>
+        <h3>Choose a collection client</h3>
+        <p class="twitter-setup__hint">
+          This Core client handles authorization and bookmark collection.
+        </p>
         <InkForm v-if="candidates.length" layout="col">
           <InkDropdown
             v-model="selectedPeerId"
             :options="peerOptions"
-            label="Core Peer"
+            label="Core client"
             :editable="!busy"
           />
         </InkForm>
-        <p v-else>No live Core Peer can manage the installed Twitter Extension.</p>
-        <InkButton
-          v-if="selectedCandidate && !selectedCoreEnabled"
-          text="Enable Twitter on this Core Peer"
-          theme="primary"
-          :is-loading="pending === 'enable-core'"
-          :disabled="busy"
-          @click="enableSelectedCore"
-        />
+        <p v-else>No available Core client has the Twitter extension installed.</p>
+        <div class="twitter-setup__actions">
+          <InkButton
+            v-if="selectedCandidate && !selectedCoreEnabled"
+            text="Enable Twitter"
+            theme="primary"
+            :is-loading="pending === 'enable-core'"
+            :disabled="busy"
+            @click="enableSelectedCore"
+          />
+          <InkButton
+            v-else-if="selectedCoreEnabled"
+            text="Continue"
+            theme="primary"
+            :is-loading="busy"
+            @click="run('status', reloadStatus)"
+          />
+          <InkButton v-else text="Retry" theme="subtle" @click="initialize" />
+        </div>
       </div>
       <div v-else-if="currentStep === 1" class="twitter-setup__panel">
         <h3>Connect an X account</h3>
-        <p>Register your own X OAuth 2.0 application with this callback URL:</p>
-        <code>{{ status?.callback_url }}</code>
-        <InkForm layout="col">
-          <InkInput v-model="clientId" label="Client ID" required :editable="!busy" />
-          <InkField label="Client Secret" required>
-            <input
-              v-model="clientSecret"
-              class="twitter-setup__secret"
-              type="password"
-              autocomplete="off"
+        <p v-if="status?.connected">Connected as @{{ status.handle }}.</p>
+        <p v-else class="twitter-setup__hint">
+          Use your own X OAuth application to authorize access to bookmarks.
+        </p>
+        <details class="twitter-setup__app" :open="!oauthAppConfigured">
+          <summary>
+            {{ oauthAppConfigured ? 'Application settings' : 'Configure your X application' }}
+          </summary>
+          <p class="twitter-setup__hint">Register this callback URL in your X application.</p>
+          <code>{{ status?.callback_url }}</code>
+          <InkForm layout="col" @submit="saveOAuthApp">
+            <InkInput
+              v-model="clientId"
+              label="Client ID"
               required
-              :disabled="busy"
+              :editable="!busy && !authorizationPending"
             />
-          </InkField>
-        </InkForm>
+            <InkField label="Client Secret" for="twitter-client-secret" required>
+              <input
+                id="twitter-client-secret"
+                v-model="clientSecret"
+                class="twitter-setup__secret"
+                type="password"
+                autocomplete="off"
+                required
+                :disabled="busy || authorizationPending"
+              />
+            </InkField>
+            <InkButton
+              text="Save application"
+              native-type="submit"
+              :theme="oauthAppConfigured ? 'subtle' : 'primary'"
+              :is-loading="pending === 'save-oauth-app'"
+              :disabled="
+                busy || authorizationPending || !clientId || !clientSecret || !oauthAppChanged
+              "
+            />
+          </InkForm>
+        </details>
+        <p v-if="oauthAppConfigured && oauthAppChanged" class="twitter-setup__hint">
+          Save the application changes before authorizing.
+        </p>
+        <div v-if="authorizationPending" class="twitter-setup__authorization" role="status">
+          <a
+            v-if="transaction?.authorize_url"
+            :href="transaction.authorize_url"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Open X authorization</a
+          >
+          <p>Complete authorization in the new tab. This page will update when it finishes.</p>
+        </div>
         <div class="twitter-setup__actions">
           <InkButton
-            text="Save OAuth App"
-            :is-loading="pending === 'save-oauth-app'"
-            :disabled="busy || !clientId || !clientSecret"
-            @click="saveOAuthApp"
+            v-if="status?.connected"
+            text="Continue"
+            theme="primary"
+            :disabled="busy || oauthAppChanged"
+            @click="applyStatus(status)"
           />
           <InkButton
-            v-if="oauthAppConfigured"
+            v-else-if="oauthAppConfigured && !authorizationPending"
             text="Create authorization link"
             theme="primary"
             :is-loading="pending === 'begin-oauth'"
-            :disabled="busy"
+            :disabled="busy || oauthAppChanged"
             @click="beginOAuth"
           />
           <InkButton
@@ -363,102 +450,71 @@ onBeforeUnmount(() => {
             @click="disconnect"
           />
         </div>
-        <a
-          v-if="transaction?.authorize_url"
-          :href="transaction.authorize_url"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="twitter-setup__oauth-link"
-          >Open X authorization</a
-        >
-        <p v-if="transaction && ['pending', 'exchanging'].includes(transaction.status)">
-          Waiting for authorization to return to Core…
-        </p>
-        <p v-if="status?.connected">Connected as @{{ status.handle }}.</p>
       </div>
       <div v-else-if="currentStep === 2" class="twitter-setup__panel">
-        <div>
-          <h3>Set up bookmark collection</h3>
-          <p>Choose an existing Bookmark Source or create one for this deployment.</p>
-        </div>
-        <div v-if="sources.length" class="twitter-setup__section">
-          <h4>Bookmark Source</h4>
-          <InkForm layout="col">
-            <InkDropdown
-              v-model="selectedSourceId"
-              :options="sourceOptions"
-              label="Bookmark Source"
-              :editable="!busy"
-            />
-          </InkForm>
-        </div>
-        <div v-else class="twitter-setup__empty">
-          <h4>No Bookmark Sources yet</h4>
-          <p>Create one to store collection cursor and source-specific settings.</p>
-        </div>
-        <div v-if="creatingSource" class="twitter-setup__section">
-          <h4>New Bookmark Source</h4>
-          <p>Give the deployment resource a recognizable nickname.</p>
-          <InkForm layout="col">
-            <InkInput v-model="sourceNickname" label="Source nickname" :editable="!busy" />
-          </InkForm>
+        <h3>Set up bookmark collection</h3>
+        <InkForm v-if="sources.length" layout="col">
+          <InkDropdown
+            v-model="selectedSourceId"
+            :options="sourceOptions"
+            label="Bookmark Source"
+            :editable="!busy"
+          />
+        </InkForm>
+        <InkForm v-if="creatingSource" layout="col" @submit="createSource">
+          <InkInput v-model="sourceNickname" label="Source nickname" :editable="!busy" required />
           <InkButton
             text="Create Bookmark Source"
+            theme="primary"
+            native-type="submit"
             :is-loading="pending === 'create-source'"
             :disabled="busy || !sourceNickname.trim()"
-            @click="createSource"
           />
-        </div>
-        <div v-if="selectedSource" class="twitter-setup__section">
-          <h4>Collection schedule</h4>
-          <p>Choose when Core should collect bookmarks each day.</p>
-          <InkForm layout="col">
-            <InkPicker
-              v-model="scheduleTime"
-              type="time"
-              label="Collect bookmarks daily at"
-              :editable="!busy"
-              :formatter="
-                (value: Date) =>
-                  value.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-              "
-            >
-              <template #default="{ closePopup }"
-                ><InkDatetimePickerView
-                  v-model="scheduleTime"
-                  mode="time"
-                  hour-format="24" /><InkButton text="Done" theme="primary" @click="closePopup"
-              /></template>
-            </InkPicker>
-          </InkForm>
-          <p class="twitter-setup__hint">Time uses the Core deployment timezone.</p>
+        </InkForm>
+        <InkForm v-if="selectedSource" layout="col" @submit="saveSchedule">
+          <InkPicker
+            v-model="scheduleTime"
+            type="time"
+            label="Collect bookmarks daily at"
+            :editable="!busy"
+            :formatter="
+              (value: Date) => value.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+            "
+          />
+          <p class="twitter-setup__hint">Time uses the collection client's timezone.</p>
           <InkButton
             text="Continue"
             theme="primary"
+            native-type="submit"
             :is-loading="pending === 'save-schedule'"
             :disabled="busy"
-            @click="saveSchedule"
           />
-        </div>
+        </InkForm>
       </div>
       <div v-else class="twitter-setup__panel">
         <h3>{{ setupReady ? 'Twitter is ready' : 'Review and start' }}</h3>
-        <p>Confirm the deployment resources before starting bookmark collection.</p>
         <dl>
           <dt>Account</dt>
           <dd>@{{ status?.handle }}</dd>
           <dt>Bookmark Source</dt>
           <dd>{{ selectedSource?.nickname || `#${selectedSource?.id}` }}</dd>
-          <dt>Schedule</dt>
-          <dd>{{ selectedCron?.schedule }}</dd>
+          <dt>Collection</dt>
+          <dd>
+            Daily at {{ collectionTime }} <span class="twitter-setup__hint">· client timezone</span>
+          </dd>
         </dl>
+        <p v-if="setupReady" role="status">Bookmarks will be collected on this schedule.</p>
+        <p v-else class="twitter-setup__hint">
+          Start collection now and keep collecting on this schedule.
+        </p>
         <div class="twitter-setup__actions">
           <InkButton
-            text="Back"
+            :text="setupReady ? 'Edit collection' : 'Back'"
             theme="subtle"
             :disabled="busy"
             @click="currentStep = 2"
-          /><InkButton
+          />
+          <InkButton
             v-if="!setupReady"
             text="Start collecting bookmarks"
             theme="primary"
@@ -470,7 +526,7 @@ onBeforeUnmount(() => {
       </div>
     </template>
     <div class="twitter-setup__toolbar">
-      <InkButton text="Close" theme="subtle" @click="close" />
+      <InkButton text="Close" theme="subtle" :disabled="busy" @click="close" />
     </div>
   </section>
 </template>
diff --git a/extensions/twitter/src/views/DevHome.vue b/extensions/twitter/src/views/DevHome.vue
index 68035601..2fe00313 100644
--- a/extensions/twitter/src/views/DevHome.vue
+++ b/extensions/twitter/src/views/DevHome.vue
@@ -4,7 +4,7 @@
     <p>This is a development environment for the Twitter extension.</p>
     <div class="dev-info">
       <h2>Registered Resolvers</h2>
-      <p>The TweetResolver is registered for type: <code>tweet</code></p>
+      <p>The TweetResolver is registered for type: <code>extensions.twitter.tweet.v1</code></p>
     </div>
   </div>
 </template>
@@ -13,37 +13,36 @@
 // Dev home component for testing extension functionality
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@use '@inkcre/ui-web/styles/mixins' as *;
 .dev-home {
   max-width: 800px;
   margin: 0 auto;
 }
 
 .dev-home h1 {
-  font-size: 1.5rem;
+  @include apply-font(title-lg);
   margin-bottom: 1rem;
 }
 
 .dev-home p {
-  color: var(--ink-text-secondary, #888);
+  color: var(--sys-color-text-subtle);
   margin-bottom: 1.5rem;
 }
 
 .dev-info {
-  background: var(--ink-bg-secondary, #242424);
+  background: var(--sys-color-surface-subtle);
   padding: 1rem;
-  border-radius: 8px;
 }
 
 .dev-info h2 {
-  font-size: 1rem;
+  @include apply-font(title-sm);
   margin-bottom: 0.5rem;
 }
 
 .dev-info code {
-  background: var(--ink-bg-tertiary, #333);
+  background: var(--sys-color-surface-subtle-hover);
   padding: 0.125rem 0.375rem;
-  border-radius: 4px;
-  font-family: monospace;
+  @include apply-font(body-sm, $mono: true);
 }
 </style>
diff --git a/package.json b/package.json
index 68972c36..3860e1d4 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
   "devDependencies": {
     "@changesets/cli": "3.0.0",
     "@playwright/test": "1.61.1",
+    "@tanstack/intent": "0.3.6",
     "@types/semver": "7.5.8",
     "@typescript/native": "npm:typescript@7.0.2",
     "@vitejs/plugin-vue": "6.0.3",
diff --git a/packages/core/src/cron/cron.ts b/packages/core/src/cron/cron.ts
index 3642f62c..05ea8cfa 100644
--- a/packages/core/src/cron/cron.ts
+++ b/packages/core/src/cron/cron.ts
@@ -31,6 +31,7 @@ export class Cron extends Z.class({
       .select()
       .contains('job_parameters', { source })
       .order('created_at')
+      .throwOnError()
     return (result.data ?? []).map((item) => Cron.parse(item))
   }
 
@@ -62,7 +63,7 @@ export class Cron extends Z.class({
   }
 
   async delete(): Promise<void> {
-    await Cron.dbApi.from().delete().eq('id', this.id)
+    await Cron.dbApi.from().delete().eq('id', this.id).throwOnError()
   }
 }
 
@@ -74,6 +75,6 @@ export class CronForm extends Z.class({
   job_timeout_seconds: z.number().int().positive().nullable().default(null),
 }) {
   async create(): Promise<Cron> {
-    return Cron.parse((await Cron.dbApi.insert(this).select().single()).data)
+    return Cron.parse((await Cron.dbApi.insert(this).select().single().throwOnError()).data)
   }
 }
diff --git a/packages/core/src/info-base/block.ts b/packages/core/src/info-base/block.ts
index b9db726f..0158d8c9 100644
--- a/packages/core/src/info-base/block.ts
+++ b/packages/core/src/info-base/block.ts
@@ -45,7 +45,7 @@ export class Block extends Z.class({
   }
 
   static async find(id: BlockRef): Promise<Block | null> {
-    const row = (await this.dbApi.from().select().eq('id', id).maybeSingle()).data
+    const row = (await this.dbApi.from().select().eq('id', id).maybeSingle().throwOnError()).data
     return row ? Block.parse(row) : null
   }
 
diff --git a/packages/core/src/job/job.ts b/packages/core/src/job/job.ts
index cb6695bd..bdc2a7e4 100644
--- a/packages/core/src/job/job.ts
+++ b/packages/core/src/job/job.ts
@@ -77,6 +77,7 @@ export class Job extends Z.class({
       .contains('parameters', { source })
       .order('created_at', { ascending: false })
       .limit(limit)
+      .throwOnError()
     return (result.data ?? []).map((item) => Job.parse(item))
   }
 
diff --git a/packages/core/src/peer/peer.ts b/packages/core/src/peer/peer.ts
index 7dfff3c5..92d1927c 100644
--- a/packages/core/src/peer/peer.ts
+++ b/packages/core/src/peer/peer.ts
@@ -50,9 +50,10 @@ export class Peer extends Z.class({
     await Peer.dbApi
       .update({ name: this.name, labels: this.labels, config: this.config })
       .eq('id', this.id)
+      .throwOnError()
   }
 
   async saveConfig(): Promise<void> {
-    await Peer.dbApi.update({ config: this.config }).eq('id', this.id)
+    await Peer.dbApi.update({ config: this.config }).eq('id', this.id).throwOnError()
   }
 }
diff --git a/packages/core/src/source/source-type.ts b/packages/core/src/source/source-type.ts
index f6f59c36..425795fe 100644
--- a/packages/core/src/source/source-type.ts
+++ b/packages/core/src/source/source-type.ts
@@ -18,10 +18,14 @@ export class SourceType extends Z.class({
   >('sources_types', SourceType)
 
   static async get(id: SourceTypeRef): Promise<SourceType> {
-    return SourceType.parse((await this.dbApi.from().select().eq('id', id).single()).data)
+    return SourceType.parse(
+      (await this.dbApi.from().select().eq('id', id).single().throwOnError()).data
+    )
   }
 
   static async getAll(): Promise<SourceType[]> {
-    return ((await this.dbApi.from().select()).data ?? []).map((item) => SourceType.parse(item))
+    return ((await this.dbApi.from().select().throwOnError()).data ?? []).map((item) =>
+      SourceType.parse(item)
+    )
   }
 }
diff --git a/packages/core/src/source/source.ts b/packages/core/src/source/source.ts
index d719cfae..1e6a7ea5 100644
--- a/packages/core/src/source/source.ts
+++ b/packages/core/src/source/source.ts
@@ -26,19 +26,23 @@ export class Source extends Z.class({
   )
 
   static async get(id: SourceRef): Promise<Source> {
-    return Source.parse((await this.dbApi.from().select().eq('id', id).single()).data)
+    return Source.parse(
+      (await this.dbApi.from().select().eq('id', id).single().throwOnError()).data
+    )
   }
 
   static async getAll(): Promise<Source[]> {
-    return ((await this.dbApi.from().select()).data ?? []).map((item) => Source.parse(item))
+    return ((await this.dbApi.from().select().throwOnError()).data ?? []).map((item) =>
+      Source.parse(item)
+    )
   }
 
   public async save(): Promise<Source> {
-    return Source.dbApi.first(await Source.dbApi.upsert(this).select())
+    return Source.dbApi.first(await Source.dbApi.upsert(this).select().throwOnError())
   }
 
   async delete(): Promise<void> {
-    await Source.dbApi.from().delete().eq('id', this.id)
+    await Source.dbApi.from().delete().eq('id', this.id).throwOnError()
   }
 }
 
@@ -50,6 +54,6 @@ export class SourceForm extends Z.class({
   storage: z.number().int().nullable().default(null),
 }) {
   public async create() {
-    return Source.parse((await Source.dbApi.insert(this).select().single()).data)
+    return Source.parse((await Source.dbApi.insert(this).select().single().throwOnError()).data)
   }
 }
diff --git a/packages/ext-dev-utils/package.json b/packages/ext-dev-utils/package.json
index bfec0460..a81720b6 100644
--- a/packages/ext-dev-utils/package.json
+++ b/packages/ext-dev-utils/package.json
@@ -14,18 +14,23 @@
   },
   "dependencies": {
     "@inkcre/core": "workspace:*",
-    "@inkcre/ui-web": "1.4.0"
+    "@inkcre/ui-web": "2.0.1"
   },
   "devDependencies": {
     "pinia": "^3.0.3",
     "typescript": "catalog:",
-    "vue": "^3.5.18",
+    "vue": "^3.5.25",
     "vue-router": "^4.5.1",
     "vue-tsc": "catalog:"
   },
   "peerDependencies": {
     "pinia": "^3.0.0",
-    "vue": "^3.5.0",
+    "vue": "^3.5.25",
     "vue-router": "^4.5.0"
+  },
+  "intent": {
+    "skills": [
+      "@inkcre/ui-web"
+    ]
   }
 }
diff --git a/packages/ext-dev-utils/src/bootstrap.ts b/packages/ext-dev-utils/src/bootstrap.ts
index 0984002b..fe62b880 100644
--- a/packages/ext-dev-utils/src/bootstrap.ts
+++ b/packages/ext-dev-utils/src/bootstrap.ts
@@ -1,4 +1,5 @@
 import { createApp, type Component } from 'vue'
+import '@inkcre/ui-web/styles'
 import { createPinia } from 'pinia'
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
 import type { ExtensionModule } from '@inkcre/core'
diff --git a/packages/ext-dev-utils/src/components/Layout.vue b/packages/ext-dev-utils/src/components/Layout.vue
index 12bcf35d..86257684 100644
--- a/packages/ext-dev-utils/src/components/Layout.vue
+++ b/packages/ext-dev-utils/src/components/Layout.vue
@@ -16,32 +16,38 @@ defineProps<{
 }>()
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@use '@inkcre/ui-web/styles/mixins' as *;
 .ext-dev-layout {
+  @include apply-font(body-md);
+  overflow-wrap: anywhere;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  background: var(--ink-bg-primary, #1a1a1a);
-  color: var(--ink-text-primary, #fff);
+  background: var(--sys-color-surface-base);
+  color: var(--sys-color-text-base);
 }
 
 .ext-dev-header {
-  height: 48px;
-  padding: 0 16px;
+  min-height: 48px;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  padding: var(--sys-space-sm) var(--sys-space-md);
   display: flex;
   align-items: center;
   gap: 16px;
-  border-bottom: 1px solid var(--ink-border-primary, #333);
-  background: var(--ink-bg-secondary, #242424);
+  border-bottom: 1px solid var(--sys-color-border-base);
+  background: var(--sys-color-surface-subtle);
 }
 
 .ext-dev-logo {
-  font-weight: 600;
-  color: var(--ink-text-secondary, #888);
+  @include apply-font(label-lg);
+  color: var(--sys-color-text-subtle);
 }
 
 .ext-dev-extension-name {
-  color: var(--ink-text-primary, #fff);
+  @include apply-font(label-lg);
+  color: var(--sys-color-text-base);
 }
 
 .ext-dev-main {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 963c2642..e3a9e63a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
       '@playwright/test':
         specifier: 1.61.1
         version: 1.61.1
+      '@tanstack/intent':
+        specifier: 0.3.6
+        version: 0.3.6
       '@types/semver':
         specifier: 7.5.8
         version: 7.5.8
@@ -89,24 +92,6 @@ importers:
 
   apps/client-web:
     dependencies:
-      '@codemirror/autocomplete':
-        specifier: ^6.20.0
-        version: 6.20.3
-      '@codemirror/commands':
-        specifier: ^6.10.0
-        version: 6.10.4
-      '@codemirror/lang-json':
-        specifier: ^6.0.2
-        version: 6.0.2
-      '@codemirror/lint':
-        specifier: ^6.9.2
-        version: 6.9.7
-      '@codemirror/state':
-        specifier: ^6.5.2
-        version: 6.7.1
-      '@codemirror/view':
-        specifier: ^6.38.8
-        version: 6.43.6
       '@inkcre/core':
         specifier: workspace:*
         version: link:../../packages/core
@@ -114,17 +99,14 @@ importers:
         specifier: https://github.com/InKCre/ext-reg/releases/download/runtime-client-web-v0.1.0/inkcre-extension-runtime-client-web-0.1.0.tgz
         version: https://github.com/InKCre/ext-reg/releases/download/runtime-client-web-v0.1.0/inkcre-extension-runtime-client-web-0.1.0.tgz(@inkcre/core@packages+core)(@module-federation/runtime@0.21.6)
       '@inkcre/ui-web':
-        specifier: 1.4.0
-        version: 1.4.0(@codemirror/autocomplete@6.20.3)(@codemirror/commands@6.10.4)(@codemirror/lang-json@6.0.2)(@codemirror/lint@6.9.7)(@codemirror/state@6.7.1)(@codemirror/view@6.43.6)(@vueuse/core@14.3.0(vue@3.5.40(typescript@5.9.3)))(dayjs@1.11.21)(unocss@66.7.5(vite@7.3.6(@types/node@22.17.2)(jiti@2.7.0)(lightningcss@1.33.0)(sass-embedded@1.90.0)(sass@1.101.6)(yaml@2.9.0)))(vscode-json-languageservice@5.7.2)(vscode-languageserver-textdocument@1.0.12)(vue-router@4.5.1(vue@3.5.40(typescript@5.9.3)))(vue@3.5.40(typescript@5.9.3))
+        specifier: 2.0.1
+        version: 2.0.1(unocss@66.7.5(vite@7.3.6(@types/node@22.17.2)(jiti@2.7.0)(lightningcss@1.33.0)(sass-embedded@1.90.0)(sass@1.101.6)(yaml@2.9.0)))(vue@3.5.40(typescript@5.9.3))
       '@module-federation/runtime':
         specifier: ^0.21.4
         version: 0.21.6
       '@supabase/postgrest-js':
         specifier: ^2.84.0
         version: 2.110.8
-      '@vue-flow/background':
-        specifier: ^1.3.2
-        version: 1.3.2(@vue-flow/core@1.48.2(vue@3.5.40(typescript@5.9.3)))(vue@3.5.40(typescript@5.9.3))
       '@vue-flow/core':
         specifier: ^1.48.1
         version: 1.48.2(vue@3.5.40(typescript@5.9.3))
@@ -140,14 +122,8 @@ importers:
       pinia:
         specifier: ^3.0.3
         version: 3.0.3(typescript@5.9.3)(vue@3.5.40(typescript@5.9.3))
-      vscode-json-languageservice:
-        specifier: ^5.6.4
-        version: 5.7.2
-      vscode-languageserver-textdocument:
-        specifier: ^1.0.12
-        version: 1.0.12
       vue:
-        specifier: ^3.5.18
+        specifier: ^3.5.25
         version: 3.5.40(typescript@5.9.3)
       vue-i18n:
         specifier: ^11.2.8
@@ -332,7 +308,7 @@ importers:
         specifier: ^3.0.0
         version: 3.0.3(typescript@5.9.3)(vue@3.5.40(typescript@5.9.3))
       vue:
-        specifier: ^3.5.0
+        specifier: ^3.5.25
         version: 3.5.40(typescript@5.9.3)
       vue-router:
         specifier: ^4.5.0
@@ -342,8 +318,8 @@ importers:
         specifier: workspace:*
         version: link:../../packages/ext-dev-utils
       '@inkcre/ui-web':
-        specifier: 1.4.0
-        version: 1.4.0(@codemirror/autocomplete@6.20.3)(@codemirror/commands@6.10.4)(@codemirror/lang-json@6.0.2)(@codemirror/lint@6.9.7)(@codemirror/state@6.7.1)(@codemirror/view@6.43.6)(@vueuse/core@14.3.0(vue@3.5.40(typescript@5.9.3)))(dayjs@1.11.21)(unocss@66.7.5(vite@7.3.6(@types/node@22.17.2)(jiti@2.7.0)(lightningcss@1.33.0)(sass-embedded@1.90.0)(sass@1.101.6)(yaml@2.9.0)))(vscode-json-languageservice@5.7.2)(vscode-languageserver-textdocument@1.0.12)(vue-router@4.5.1(vue@3.5.40(typescript@5.9.3)))(vue@3.5.40(typescript@5.9.3))
+        specifier: 2.0.1
+        version: 2.0.1(unocss@66.7.5(vite@7.3.6(@types/node@22.17.2)(jiti@2.7.0)(lightningcss@1.33.0)(sass-embedded@1.90.0)(sass@1.101.6)(yaml@2.9.0)))(vue@3.5.40(typescript@5.9.3))
       '@module-federation/vite':
         specifier: ^1.1.0
         version: 1.7.1(rollup@4.59.0)
@@ -384,7 +360,7 @@ importers:
         specifier: ^3.0.0
         version: 3.0.3(typescript@5.9.3)(vue@3.5.40(typescript@5.9.3))
       vue:
-        specifier: ^3.5.0
+        specifier: ^3.5.25
         version: 3.5.40(typescript@5.9.3)
       vue-router:
         specifier: ^4.5.0
@@ -397,8 +373,8 @@ importers:
         specifier: workspace:*
         version: link:../../packages/ext-dev-utils
       '@inkcre/ui-web':
-        specifier: 1.4.0
-        version: 1.4.0(@codemirror/autocomplete@6.20.3)(@codemirror/commands@6.10.4)(@codemirror/lang-json@6.0.2)(@codemirror/lint@6.9.7)(@codemirror/state@6.7.1)(@codemirror/view@6.43.6)(@vueuse/core@14.3.0(vue@3.5.40(typescript@5.9.3)))(dayjs@1.11.21)(unocss@66.7.5(vite@7.3.6(@types/node@22.17.2)(jiti@2.7.0)(lightningcss@1.33.0)(sass-embedded@1.90.0)(sass@1.101.6)(yaml@2.9.0)))(vscode-json-languageservice@5.7.2)(vscode-languageserver-textdocument@1.0.12)(vue-router@4.5.1(vue@3.5.40(typescript@5.9.3)))(vue@3.5.40(typescript@5.9.3))
+        specifier: 2.0.1
+        version: 2.0.1(unocss@66.7.5(vite@7.3.6(@types/node@22.17.2)(jiti@2.7.0)(lightningcss@1.33.0)(sass-embedded@1.90.0)(sass@1.101.6)(yaml@2.9.0)))(vue@3.5.40(typescript@5.9.3))
       '@module-federation/vite':
         specifier: ^1.1.0
         version: 1.7.1(rollup@4.59.0)
@@ -473,8 +449,8 @@ importers:
         specifier: workspace:*
         version: link:../core
       '@inkcre/ui-web':
-        specifier: 1.4.0
-        version: 1.4.0(@codemirror/autocomplete@6.20.3)(@codemirror/commands@6.10.4)(@codemirror/lang-json@6.0.2)(@codemirror/lint@6.9.7)(@codemirror/state@6.7.1)(@codemirror/view@6.43.6)(@vueuse/core@14.3.0(vue@3.5.40(typescript@5.9.3)))(dayjs@1.11.21)(unocss@66.7.5(vite@8.1.5(@types/node@22.17.2)(esbuild@0.28.1)(jiti@2.7.0)(sass-embedded@1.90.0)(sass@1.101.6)(yaml@2.9.0)))(vscode-json-languageservice@5.7.2)(vscode-languageserver-textdocument@1.0.12)(vue-router@4.5.1(vue@3.5.40(typescript@5.9.3)))(vue@3.5.40(typescript@5.9.3))
+        specifier: 2.0.1
+        version: 2.0.1(unocss@66.7.5(vite@8.1.5(@types/node@22.17.2)(esbuild@0.28.1)(jiti@2.7.0)(sass-embedded@1.90.0)(sass@1.101.6)(yaml@2.9.0)))(vue@3.5.40(typescript@5.9.3))
     devDependencies:
       pinia:
         specifier: ^3.0.3
@@ -483,7 +459,7 @@ importers:
         specifier: 'catalog:'
         version: 5.9.3
       vue:
-        specifier: ^3.5.18
+        specifier: ^3.5.25
         version: 3.5.40(typescript@5.9.3)
       vue-router:
         specifier: ^4.5.1
@@ -1354,22 +1330,11 @@ packages:
       '@inkcre/core': '>=0.1.2 <0.2.0'
       '@module-federation/runtime': '>=0.21.4 <0.23.0'
 
-  '@inkcre/ui-web@1.4.0':
-    resolution: {integrity: sha512-Sq5f/hFpOtuGNZwVB36JuMPoAJUvkWvrHogl/PauI4OuV2M/qExdVXrEZa76pbbn35Ic/dleEPyze6lJghxI5w==, tarball: https://npm.pkg.github.com/download/@inkcre/ui-web/1.4.0/356469307437642b43b7e67e82c9b60e52d4f926}
+  '@inkcre/ui-web@2.0.1':
+    resolution: {integrity: sha512-8KELh89mLA1xjoB8uDFmh8HJfHn6UAeJRWVaKM3w4UKLt11tsuw9/22rEUDfHp9U5y4d5MecQRrKt3MH2zQO5Q==, tarball: https://npm.pkg.github.com/download/@inkcre/ui-web/2.0.1/2e6e9968460859dd8c17392849c3807ca4a95799}
     peerDependencies:
-      '@codemirror/autocomplete': ^6.20.0
-      '@codemirror/commands': ^6.10.0
-      '@codemirror/lang-json': ^6.0.2
-      '@codemirror/lint': ^6.9.2
-      '@codemirror/state': ^6.5.2
-      '@codemirror/view': ^6.38.8
-      '@vueuse/core': ^14.0.0
-      dayjs: ^1.11.0
       unocss: ^66.5.0
-      vscode-json-languageservice: ^5.6.4
-      vscode-languageserver-textdocument: ^1.0.12
-      vue: ^3.0.0
-      vue-router: ^4.0.0
+      vue: ^3.5.25
 
   '@intlify/core-base@11.4.7':
     resolution: {integrity: sha512-MSB/sBKwEWJTILvQIhg2rnIcwPpLayo3wGwvVA+dJTNeUBD9GoqQgAaSOLdI9iOPDHCm9YoVnLqpfzza98MpkQ==}
@@ -2593,6 +2558,10 @@ packages:
     resolution: {integrity: sha512-QeRROxl1PpOZw5Jzi7BwdN9icsycMrLlCCvsjS0hYLW+nZoaT46zdagz/glJirj8jHF4jSd5Jyipuae2cBClCw==}
     engines: {node: '>=22.0.0'}
 
+  '@tanstack/intent@0.3.6':
+    resolution: {integrity: sha512-ylew/4T3layUXSfE/SDGUSAi1B3U/wuoNUE0adC3j/s6wzX7omV6e6hAv0WyMC52Inren8kqvwpHj+G/ZBbQHQ==}
+    hasBin: true
+
   '@tsconfig/node22@22.0.2':
     resolution: {integrity: sha512-Kmwj4u8sDRDrMYRoN9FDEcXD8UpBSaPQQ24Gz+Gamqfm7xxn+GBR7ge/Z7pK8OXNGyUzbSwJj+TH6B+DS/epyA==}
 
@@ -2876,12 +2845,6 @@ packages:
   '@vscode/l10n@0.0.18':
     resolution: {integrity: sha512-KYSIHVmslkaCDyw013pphY+d7x1qV8IZupYfeIfzNA+nsaWHbn5uPuQRvdRFsa9zFzGeudPuoGoZ1Op4jrJXIQ==}
 
-  '@vue-flow/background@1.3.2':
-    resolution: {integrity: sha512-eJPhDcLj1wEo45bBoqTXw1uhl0yK2RaQGnEINqvvBsAFKh/camHJd5NPmOdS1w+M9lggc9igUewxaEd3iCQX2w==}
-    peerDependencies:
-      '@vue-flow/core': ^1.23.0
-      vue: ^3.3.0
-
   '@vue-flow/core@1.48.2':
     resolution: {integrity: sha512-raxhgKWE+G/mcEvXJjGFUDYW9rAI3GOtiHR3ZkNpwBWuIaCC1EYiBmKGwJOoNzVFgwO7COgErnK7i08i287AFA==}
     peerDependencies:
@@ -2919,15 +2882,9 @@ packages:
     peerDependencies:
       '@babel/core': 7.29.7
 
-  '@vue/compiler-core@3.5.19':
-    resolution: {integrity: sha512-/afpyvlkrSNYbPo94Qu8GtIOWS+g5TRdOvs6XZNw6pWQQmj5pBgSZvEPOIZlqWq0YvoUhDDQaQ2TnzuJdOV4hA==}
-
   '@vue/compiler-core@3.5.40':
     resolution: {integrity: sha512-39E8IgOhTbVDnoJFMKc2DvYnypcZwUqgUhQkccva/0m6FUwtIKSGV7n1hpVmYcFaoRAwf9pBcwnKlCEsN63ZEQ==}
 
-  '@vue/compiler-dom@3.5.19':
-    resolution: {integrity: sha512-Drs6rPHQZx/pN9S6ml3Z3K/TWCIRPvzG2B/o5kFK9X0MNHt8/E+38tiRfojufrYBfA6FQUFB2qBBRXlcSXWtOA==}
-
   '@vue/compiler-dom@3.5.40':
     resolution: {integrity: sha512-pwkx4vqlqOspFstrcmzwkKLePVMD3PT65imRzLhanU2V1Fj4K13g6OXjanOyzw3aTAuRk84BOmY8f3rEHqPaVA==}
 
@@ -2975,9 +2932,6 @@ packages:
   '@vue/server-renderer@3.5.40':
     resolution: {integrity: sha512-XNJym9WpevhTVt1HuwOrCRJ5Q+9z4BjTMrDtjTrvx74SmUll8spNTw6whWJa9mEkO4PKn5TihI/bm/8ds2QVJw==}
 
-  '@vue/shared@3.5.19':
-    resolution: {integrity: sha512-IhXCOn08wgKrLQxRFKKlSacWg4Goi1BolrdEeLYn6tgHjJNXVrWJ5nzoxZqNwl5p88aLlQ8LOaoMa3AYvaKJ/Q==}
-
   '@vue/shared@3.5.25':
     resolution: {integrity: sha512-AbOPdQQnAnzs58H2FrrDxYj/TJfmeS2jdfEEhgiKINy+bnOANmVizIEgq1r+C5zsbs6l1CCQxtcj71rwNQ4jWg==}
 
@@ -3860,6 +3814,7 @@ packages:
   eslint@9.39.5:
     resolution: {integrity: sha512-DgZS62aPLXKlnxILS/AYCoRvHaZeXceIzlXPkkGGzJWSow1aEk0lbTlxUSlyjC8jcaKxAdOnTDz+o1JFSBsyjw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
     peerDependencies:
       jiti: '*'
@@ -5619,6 +5574,9 @@ packages:
     resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
     engines: {node: '>= 0.8'}
 
+  std-env@4.2.0:
+    resolution: {integrity: sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==}
+
   streamroller@3.1.5:
     resolution: {integrity: sha512-KFxaM7XT+irxvdqSP1LGLgNWbYN7ay5owZ3r/8t77p+EtSUAfUgtl7be3xtqtOmGUl9K9YPO2ca8133RlTjvKw==}
     engines: {node: '>=8.0'}
@@ -6099,8 +6057,8 @@ packages:
       yaml:
         optional: true
 
-  vscode-json-languageservice@5.7.2:
-    resolution: {integrity: sha512-WtKRDtJfFEmLrgtu+ODexOHm/6/krRF0k6t+uvkKIKW1Jh9ZIyxZQwJJwB3qhrEgvAxa37zbUg+vn+UyUK/U2w==}
+  vscode-json-languageservice@5.6.4:
+    resolution: {integrity: sha512-i0MhkFmnQAbYr+PiE6Th067qa3rwvvAErCEUo0ql+ghFXHvxbwG3kLbwMaIUrrbCLUDEeULiLgROJjtuyYoIsA==}
 
   vscode-languageserver-textdocument@1.0.12:
     resolution: {integrity: sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==}
@@ -7260,7 +7218,7 @@ snapshots:
       semver: 7.8.5
       zod: 4.1.12
 
-  '@inkcre/ui-web@1.4.0(@codemirror/autocomplete@6.20.3)(@codemirror/commands@6.10.4)(@codemirror/lang-json@6.0.2)(@codemirror/lint@6.9.7)(@codemirror/state@6.7.1)(@codemirror/view@6.43.6)(@vueuse/core@14.3.0(vue@3.5.40(typescript@5.9.3)))(dayjs@1.11.21)(unocss@66.7.5(vite@7.3.6(@types/node@22.17.2)(jiti@2.7.0)(lightningcss@1.33.0)(sass-embedded@1.90.0)(sass@1.101.6)(yaml@2.9.0)))(vscode-json-languageservice@5.7.2)(vscode-languageserver-textdocument@1.0.12)(vue-router@4.5.1(vue@3.5.40(typescript@5.9.3)))(vue@3.5.40(typescript@5.9.3))':
+  '@inkcre/ui-web@2.0.1(unocss@66.7.5(vite@7.3.6(@types/node@22.17.2)(jiti@2.7.0)(lightningcss@1.33.0)(sass-embedded@1.90.0)(sass@1.101.6)(yaml@2.9.0)))(vue@3.5.40(typescript@5.9.3))':
     dependencies:
       '@codemirror/autocomplete': 6.20.3
       '@codemirror/commands': 6.10.4
@@ -7272,12 +7230,11 @@ snapshots:
       '@vueuse/core': 14.3.0(vue@3.5.40(typescript@5.9.3))
       dayjs: 1.11.21
       unocss: 66.7.5(vite@7.3.6(@types/node@22.17.2)(jiti@2.7.0)(lightningcss@1.33.0)(sass-embedded@1.90.0)(sass@1.101.6)(yaml@2.9.0))
-      vscode-json-languageservice: 5.7.2
+      vscode-json-languageservice: 5.6.4
       vscode-languageserver-textdocument: 1.0.12
       vue: 3.5.40(typescript@5.9.3)
-      vue-router: 4.5.1(vue@3.5.40(typescript@5.9.3))
 
-  '@inkcre/ui-web@1.4.0(@codemirror/autocomplete@6.20.3)(@codemirror/commands@6.10.4)(@codemirror/lang-json@6.0.2)(@codemirror/lint@6.9.7)(@codemirror/state@6.7.1)(@codemirror/view@6.43.6)(@vueuse/core@14.3.0(vue@3.5.40(typescript@5.9.3)))(dayjs@1.11.21)(unocss@66.7.5(vite@8.1.5(@types/node@22.17.2)(esbuild@0.28.1)(jiti@2.7.0)(sass-embedded@1.90.0)(sass@1.101.6)(yaml@2.9.0)))(vscode-json-languageservice@5.7.2)(vscode-languageserver-textdocument@1.0.12)(vue-router@4.5.1(vue@3.5.40(typescript@5.9.3)))(vue@3.5.40(typescript@5.9.3))':
+  '@inkcre/ui-web@2.0.1(unocss@66.7.5(vite@8.1.5(@types/node@22.17.2)(esbuild@0.28.1)(jiti@2.7.0)(sass-embedded@1.90.0)(sass@1.101.6)(yaml@2.9.0)))(vue@3.5.40(typescript@5.9.3))':
     dependencies:
       '@codemirror/autocomplete': 6.20.3
       '@codemirror/commands': 6.10.4
@@ -7289,10 +7246,9 @@ snapshots:
       '@vueuse/core': 14.3.0(vue@3.5.40(typescript@5.9.3))
       dayjs: 1.11.21
       unocss: 66.7.5(vite@8.1.5(@types/node@22.17.2)(esbuild@0.28.1)(jiti@2.7.0)(sass-embedded@1.90.0)(sass@1.101.6)(yaml@2.9.0))
-      vscode-json-languageservice: 5.7.2
+      vscode-json-languageservice: 5.6.4
       vscode-languageserver-textdocument: 1.0.12
       vue: 3.5.40(typescript@5.9.3)
-      vue-router: 4.5.1(vue@3.5.40(typescript@5.9.3))
 
   '@intlify/core-base@11.4.7':
     dependencies:
@@ -8188,6 +8144,14 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@tanstack/intent@0.3.6':
+    dependencies:
+      cac: 6.7.14
+      jsonc-parser: 3.3.1
+      semver: 7.8.5
+      std-env: 4.2.0
+      yaml: 2.9.0
+
   '@tsconfig/node22@22.0.2': {}
 
   '@tybys/wasm-util@0.10.3':
@@ -8489,11 +8453,6 @@ snapshots:
 
   '@vscode/l10n@0.0.18': {}
 
-  '@vue-flow/background@1.3.2(@vue-flow/core@1.48.2(vue@3.5.40(typescript@5.9.3)))(vue@3.5.40(typescript@5.9.3))':
-    dependencies:
-      '@vue-flow/core': 1.48.2(vue@3.5.40(typescript@5.9.3))
-      vue: 3.5.40(typescript@5.9.3)
-
   '@vue-flow/core@1.48.2(vue@3.5.40(typescript@5.9.3))':
     dependencies:
       '@vueuse/core': 10.11.1(vue@3.5.40(typescript@5.9.3))
@@ -8563,14 +8522,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vue/compiler-core@3.5.19':
-    dependencies:
-      '@babel/parser': 7.29.7
-      '@vue/shared': 3.5.19
-      entities: 4.5.0
-      estree-walker: 2.0.2
-      source-map-js: 1.2.1
-
   '@vue/compiler-core@3.5.40':
     dependencies:
       '@babel/parser': 7.29.7
@@ -8579,11 +8530,6 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
-  '@vue/compiler-dom@3.5.19':
-    dependencies:
-      '@vue/compiler-core': 3.5.19
-      '@vue/shared': 3.5.19
-
   '@vue/compiler-dom@3.5.40':
     dependencies:
       '@vue/compiler-core': 3.5.40
@@ -8684,8 +8630,6 @@ snapshots:
       '@vue/runtime-dom': 3.5.40
       '@vue/shared': 3.5.40
 
-  '@vue/shared@3.5.19': {}
-
   '@vue/shared@3.5.25': {}
 
   '@vue/shared@3.5.40': {}
@@ -11157,6 +11101,8 @@ snapshots:
 
   statuses@2.0.2: {}
 
+  std-env@4.2.0: {}
+
   streamroller@3.1.5:
     dependencies:
       date-format: 4.0.14
@@ -11604,7 +11550,7 @@ snapshots:
       '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.29.7)
       '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.29.7)
       '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.29.7)
-      '@vue/compiler-dom': 3.5.19
+      '@vue/compiler-dom': 3.5.40
       kolorist: 1.8.0
       magic-string: 0.30.17
       vite: 7.3.6(@types/node@22.17.2)(jiti@2.7.0)(lightningcss@1.33.0)(sass-embedded@1.90.0)(sass@1.101.6)(yaml@2.9.0)
@@ -11644,7 +11590,7 @@ snapshots:
       sass-embedded: 1.90.0
       yaml: 2.9.0
 
-  vscode-json-languageservice@5.7.2:
+  vscode-json-languageservice@5.6.4:
     dependencies:
       '@vscode/l10n': 0.0.18
       jsonc-parser: 3.3.1
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index e8e48ff4..070dfdd7 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -37,7 +37,7 @@ overrides:
   ws@>=8.0.0 <8.21.0: 8.21.0
 
 minimumReleaseAgeExclude:
-  - '@inkcre/ui-web@1.4.0'
+  - '@inkcre/ui-web@2.0.0 || 2.0.1'
   - '@supabase/cli-darwin-arm64@2.112.0'
   - '@supabase/cli-darwin-x64@2.112.0'
   - '@supabase/cli-linux-arm64-musl@2.112.0'
diff --git a/runtime/database.compose.yml b/runtime/database.compose.yml
index d40250a6..bbe33997 100644
--- a/runtime/database.compose.yml
+++ b/runtime/database.compose.yml
@@ -12,7 +12,8 @@ services:
     ports:
       - '127.0.0.1:${POSTGRES_PORT:-0}:5432'
     healthcheck:
-      test: ['CMD-SHELL', 'pg_isready -U postgres -d inkcre']
+      # 初始化临时进程只开放 Unix socket；restore 需要正式进程的 TCP 监听。
+      test: ['CMD-SHELL', 'pg_isready -h 127.0.0.1 -U postgres -d inkcre']
       interval: 2s
       timeout: 3s
       retries: 30
diff --git a/scripts/ui-source.mjs b/scripts/ui-source.mjs
index 36507f08..66a4d27a 100644
--- a/scripts/ui-source.mjs
+++ b/scripts/ui-source.mjs
@@ -17,21 +17,7 @@ const uiSourceEntries = [
   ['@inkcre/ui-web/uno', 'styles/uno/preset-ink.ts'],
 ]
 
-export const uiSourceDedupe = [
-  '@codemirror/autocomplete',
-  '@codemirror/commands',
-  '@codemirror/lang-json',
-  '@codemirror/lint',
-  '@codemirror/state',
-  '@codemirror/view',
-  '@vueuse/core',
-  'dayjs',
-  'unocss',
-  'vscode-json-languageservice',
-  'vscode-languageserver-textdocument',
-  'vue',
-  'vue-router',
-]
+export const uiSourceDedupe = ['unocss', 'vue']
 
 function exactSpecifier(specifier) {
   const escaped = specifier.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
diff --git a/scripts/verify-native-extension-distribution.mjs b/scripts/verify-native-extension-distribution.mjs
index 0dbd4979..7f6bd334 100644
--- a/scripts/verify-native-extension-distribution.mjs
+++ b/scripts/verify-native-extension-distribution.mjs
@@ -130,6 +130,14 @@ export async function inspectNativeModuleFederation({
   }
 
   const coreShare = manifest.shared?.filter((shared) => shared.name === '@inkcre/core') ?? []
+  const uiVersion =
+    extensionPackage.dependencies?.['@inkcre/ui-web'] ??
+    extensionPackage.devDependencies?.['@inkcre/ui-web']
+  if (uiVersion) {
+    const uiShare = manifest.shared?.filter((shared) => shared.name === '@inkcre/ui-web') ?? []
+    assert.equal(uiShare.length, 1, 'manifest must share @inkcre/ui-web to inherit Host UI context')
+    assert.equal(uiShare[0].requiredVersion, uiVersion)
+  }
   assert.equal(coreShare.length, 1, 'manifest must contain exactly one @inkcre/core shared module')
   const sharedRange = coreShare[0].requiredVersion?.replaceAll(',', ' ')
   assert.ok(validRange(sharedRange), 'manifest @inkcre/core requiredVersion is invalid')
diff --git a/tasks/ui-v2-migration/evidence/README.md b/tasks/ui-v2-migration/evidence/README.md
new file mode 100644
index 00000000..eac9b5bd
--- /dev/null
+++ b/tasks/ui-v2-migration/evidence/README.md
@@ -0,0 +1,125 @@
+# UI 2.0 消费验收
+
+Web、mail、twitter 和 ext-dev-utils 均锁定 GitHub Packages 的 `@inkcre/ui-web@2.0.1`；这些检查没有启用源码映射或 `file:` 依赖。截图使用隔离数据，不含用户业务内容或真实凭据。
+
+当前 2.0.1 复验见文末；此前各阶段截图与产物哈希保留其历史版本身份。
+
+## 通过的边界
+
+完整 `pnpm check` 覆盖格式、lint、类型、Core/Web/WXT/两个扩展构建与产物契约。另通过源码联调类型检查、TS7、两个扩展的原生 manifest 检查、Intent load 和 Chromium 扩展 popup E2E。PR #104 的 [首轮完整 CI](https://github.com/InKCre/client-web/actions/runs/34739437023) 使用真实 core 服务与隔离数据库，通过五个 Web 旅程，包括新增的 Peer JSON 保存。后续 MF 与布局修改继续由 PR 当前提交的 checks 验证。
+
+实际构建的 Web 页面验证了 JSON 语法／schema 无效时禁用保存、保存后的草稿回显、中英文切换和深浅主题。375px 下 Peer dialog 位于视口内，未发生运行时异常。持久化失败、pending 禁止关闭、禁用编辑与重试成功由真实数据库 E2E 证明。
+
+[扩展验收脚本](browser-host.mjs) 从真实 Web 构建进入 Extensions，按原生 manifest 加载本次构建的 mail 和 twitter，网络边界使用隔离 Registry／Peer／Block 数据。它验证中文 Host 的小时／分钟、取消／确认文案传入 Twitter；取消保留原时间，确认提交 07:30；再进入 Info-Base 的 Mail renderer，验证 HTML 隔离显示、附件下载 pending、受控 HTTP 500 后错误显示与按钮恢复。最终未出现 pageerror；控制台的 500 属于主动失败注入。它不证明真实 OAuth 或 Mail 服务集成，这些操作没有执行。
+
+## 复跑
+
+在工作区根目录完成 `pnpm install --frozen-lockfile` 和 `pnpm check`，随后分别运行：
+
+```sh
+pnpm --filter @inkcre/client-web preview --host 127.0.0.1 --port 47931 --strictPort
+node tasks/ui-v2-migration/evidence/browser-host.mjs http://127.0.0.1:47931
+```
+
+脚本依赖仓库已有 Playwright 和 Chromium，输出截图到忽略的 `.runtime/ui-migration-evidence/`。它是这次验收的重放夹具，没有建立第二套发布或测试框架。数据库验证仍运行根级 `pnpm test:e2e:web`；本机 SSH provider 当次不可达，该项使用 PR 的既有隔离数据库 CI。
+
+## 代表截图
+
+- [Peer 深色窄屏配置](peer-config-narrow.png)：有效草稿可以保存，界面留在视口内。
+- [Twitter 继承 Host 中文](twitter-time-picker.png)：真实 MF remote 使用共享 UI 的日期文案。
+- [Mail 窄屏附件和失败反馈](mail-host-dark-narrow.png)：附件行换行，下载按钮保持完整。
+
+以下为首次视觉复审后的构建，取代首轮产物哈希；后续 I1 的变化见文末。构建目录按相对路径排序，依次拼接「路径、NUL、文件内容、NUL」计算 SHA-256，包含 source maps：
+
+| 产物                    | 文件数 | SHA-256                                                            |
+| ----------------------- | ------ | ------------------------------------------------------------------ |
+| Web dist                | 11     | `dbebfdbc2c6a93cbcf342e7d432fa58950af61a305595f77f25f680bb8670904` |
+| mail dist/client-web    | 44     | `e8b1f1a71c313e3ab12995d7c85b991fb83c5280d43557988d2337f69542ccc3` |
+| twitter dist/client-web | 47     | `b611416d626f44bdc13f99e65787df55acad16713b95c96881965389988f6891` |
+
+## 视觉复审补验
+
+首轮验收证明 API 与交互可用，未覆盖完整设计迁移。本次重放脚本增加以下观察边界，并逐张复查截图：
+
+| 页面或边界                | 实际检查                                                                                          | 证据                                                                  |
+| ------------------------- | ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| Mail 正文与附件           | 保留 iframe 隔离；长附件名换行；直角附件容器；下载 pending 和失败恢复，错误使用反馈前景           | [窄屏 Mail](mail-host-dark-narrow.png)                                |
+| Text／HTML 文本／Tweet    | 打开后能够读到完整正文末尾；覆盖 body-md 字号为 21px 后跟随变化；Tweet 根节点接收宿主的间距与滚动 | [窄屏 Tweet](tweet-host-dark-narrow.png)                              |
+| 搜索                      | 真实 Host 调用隔离检索响应，结果标题、正文和元数据按角色显示，结果按钮与输入使用直角              | [窄屏结果](search-dark-narrow.png)                                    |
+| Sources／Source 详情      | 1280px 并排、375px 换行；长名称、配置及操作没有横向裁剪；Enter 激活详情链接；配置弹层位于视口内   | [宽屏](sources-1280.png)、[窄屏](sources-375.png)                     |
+| Job／Logs                 | 元数据和日志按容器换行；Enter 展开原生日志按钮并更新 aria-expanded，结构化属性可局部滚动          | [窄屏日志](job-375.png)                                               |
+| Extensions／Twitter setup | 安装与扩展列表可换行；Host 与 MF remote 的中文时间草稿交互继续通过                                | [窄屏扩展](extensions-375.png)、[时间选择器](twitter-time-picker.png) |
+
+复审后的 `pnpm check` 和浏览器重放均通过，pageerror 为零。Settings、Peer、Mail 事实与 MIME 局部视图、ext-dev-utils 开发页的字体／形状调整经过源码核对及完整构建；本轮没有为每个局部视图另造浏览器页面。旧 Peer 截图仅保留首轮保存交互的证据，不作为更新后视觉样式的截图。
+
+本阶段步骤编号仍保留圆形，生产者当时尚未确认直角默认和例外；这一历史边界已由文末 I1 更新。Mail iframe 的白色底属于外部邮件文档边界。浏览器扩展 client-webext 使用自有主题而非 UI 依赖，本轮没有迁移该独立主题。
+
+Recall 浮层同样补验了 375px 下的检索结果、Escape 关闭与容器宽度，见 [窄屏 Recall](recall-dark-narrow.png)。Job 状态 JSON 的等宽字体也通过实际 computed style 验证。
+
+## I1 已确认风格的实现对齐
+
+2026-09-13，按与用户确认后的共同轮廓，Twitter 步骤编号改为直角；窄屏复核同时修复了向导宽度未受宿主内容区约束、关闭按钮被裁剪的问题。新的 [375px 向导](twitter-steps-375.png) 展示完整的关闭按钮、两列步骤和可换行的配置内容。
+
+最终完整 `pnpm check` 与上述浏览器重放通过。夹具新增四个步骤、唯一当前状态、直角编号、375px 容器无横向裁剪和关闭按钮完整可见的检查；时间草稿取消／确认及其余已有旅程继续通过，pageerror 为零。本地采用 Chromium 149.0.7827.55，未进行真实 OAuth、扩展发布或生产部署。
+
+Web 与 Mail 产物和上表一致；Twitter 构建仍为 47 个文件，新的 SHA-256 为 `7a1156f93e543a8a4be79e2c80a4cfa437a72d6cab00d795578018981d01e3bb`。UI 依赖仍是 registry 2.0.0，没有启用源码映射；这些检查验证消费者局部修正，不宣称已安装生产者分支中尚未发布的字体和文档更新。
+
+## I3 来源页面的内容与状态
+
+本轮对应 `6a61637` 之后尚未提交的 I3 改动，Web、Core 与 Twitter 实现已完成。完整 `pnpm check`、TS7 和 Changeset 状态检查通过；实际构建的 Host／Twitter／Mail 重放通过，pageerror 为零。UI 依赖仍是正式 registry 2.0.0；截图不包含生产者 `284ade6` 尚未发布的 I2 配色，也未启用源码联调。
+
+来源列表保留名称、类型、ID 和采集入口，完整配置在详情读取与修改。创建和调度表单通过明确动作打开；来源、计划和任务分别显示实际状态。回到列表时定位并聚焦对应来源，失败与尺寸变化保留原始草稿。Host 同时补上 `presetInk()` 注册，语义错误色类现在实际生成；没有新增颜色覆盖或依赖。
+
+沿用上方重放命令；命令中的 `node` 可通过 `pnpm exec node` 使用仓库声明的 Node 22.22.3。[来源旅程](sources.mjs) 由既有 [Host 脚本](browser-host.mjs) 调用，使用原有 Playwright 和 Chromium，未新增发布门禁或测试框架。
+
+| 边界             | 验证内容                                                                                                                                    |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| 列表与导航       | 三个来源、无昵称、活动任务入口、空结果、加载、读取拒绝与重试；名称 Enter 导航和返回锚点；1280px／375px 不横向裁剪                           |
+| 配置             | JSON 语法／schema 无效时禁用保存；类型读取失败与重试保留草稿；保存延迟与 HTTP 503 拒绝；昵称、原始多行 JSON、窄宽切换、手动重试与保存回显   |
+| 来源与任务上下文 | 源详情／任务／计划读取分别失败与重试；过期来源响应不能覆盖新路由；未保存的类型修改不能改变已保存来源的采集 schema；不支持回补时没有对应选项 |
+| 创建与删除       | 来源创建及计划创建失败／pending／成功；关闭确认保留输入；来源和计划删除等待／403 拒绝／重试；仅确认成功后移除条目或离开                     |
+| 采集             | 带配置的新任务与列表立即采集的 pending、失败与重试；实际请求使用对应 Source ID 和配置，不自动重发写入                                       |
+| 关联消费         | Twitter 来源读取失败保留旧选择和 07:30 时间草稿，重新选择成功；Host 中文时间取消／确认、Mail 下载失败、全文阅读和既有窄屏旅程继续通过       |
+
+[运行输出](i3-browser.txt)、[隔离读写结果](i3-verification.json) 与[产物身份](i3-artifacts.json)共同记录本次边界。浏览器中 403／503 和 Mail 的 500 是主动注入；检查明确要求最终 pageerror 为零。仅验证前端状态、请求与 UI 集成，不宣称数据库持久化、真实 OAuth 或 Mail 服务已验收。
+
+代表截图已逐张查看：
+
+- [宽屏列表](i3-sources-1280.png)、[窄屏列表](i3-sources-375.png)：识别信息与操作保留，列表不再常驻编辑器。
+- [宽屏详情](i3-source-1280.png)、[窄屏保存失败](i3-source-save-failed-375.png)：对象身份、配置与近期任务分组，错误接近相关操作。
+- [窄屏创建](i3-source-create-375.png)、[删除拒绝](i3-source-delete-failed-375.png)：弹层宽度、可恢复草稿和带对象上下文的确认。
+- [Twitter 读取拒绝](i3-twitter-selection-failed.png)：选择与时间草稿保持一致。
+
+构建身份采用上文相同的目录 SHA-256 算法，包含 source maps：Web 为 `fb30b72d2ab988f2d31046a419c026d7fa73c124b103436eb5c2de1b701b1cd9`；Core、Mail、Twitter 的文件数与哈希见产物 JSON。Mail 的源码本轮未修改，其构建引用了更新后的共享 Core。
+
+真实数据库 `pnpm test:e2e:web` 本次仍在 SSH provider 握手时被连接重置，未进入浏览器，不能拿历史 PR CI 证明当前 I3。额外 `pnpm lint:type-aware` 仍报告基线中的 11 项：数据库生成投影 9 项，Extension model 与分发检查脚本各 1 项；这些位置的相关代码没有修改。常规 lint、完整 check 与 TS7 通过。`client-webext` 的独立主题与 Firefox 原生 200% 文字放大不属于此切片。
+
+## PR preview 远端验收
+
+[PR #104](https://github.com/InKCre/client-web/pull/104) 的 I3 源码提交为 `9af7a17`。该提交的 [CI](https://github.com/InKCre/client-web/actions/runs/34759273081) 与 [Pages 交付](https://github.com/InKCre/client-web/actions/runs/34759272059) 全部成功。实际浏览器进入 [preview](https://preview-client-web-pr-104.inkcre-client-web.pages.dev)，Host、同源静态 Registry、Mail／Twitter MF 资源均由远端提供；全部既有来源与扩展旅程通过，pageerror 为零。
+
+```sh
+pnpm exec node tasks/ui-v2-migration/evidence/browser-host.mjs https://preview-client-web-pr-104.inkcre-client-web.pages.dev --deployed-extensions
+```
+
+[交付身份](preview/delivery.json) 与[运行输出](preview/browser.txt)记录已验证的源提交和不可变部署地址。业务数据和失败响应仍为隔离夹具；真实数据库集成由独立 E2E 证明，不将静态 preview 说成完整后端环境。原有本地 tarball／dist 哈希不能当作远端产物哈希。
+
+本机 SSH 已恢复；首轮冷启动暴露 PostgreSQL 的 socket 健康探测早于 TCP 就绪，已在独立 `cfd7b12` 修正。随后完整 `pnpm test:e2e:web` 退出 0，五个真实数据库旅程通过，隔离实例清理完成；最终 `pnpm check` 通过。该提交未改变前端源码，其 [CI](https://github.com/InKCre/client-web/actions/runs/34759512696) 和 [preview](https://github.com/InKCre/client-web/actions/runs/34759511768) 单独记录，不把较早的前端证据写成新提交重放。
+
+## 正式 UI 2.0.1 升级
+
+[UI 发布](https://github.com/InKCre/ui/releases/tag/%40inkcre/ui-web%402.0.1) 来自 main `85453b50eee3a8e1db21cdedaca05ba0b6051dd6`。四个直接消费者均安装精确 2.0.1，见 [registry 与实际安装身份](ui-2.0.1/installed.json)。完整 `pnpm check` 与本地真实构建重放通过，pageerror 为零。业务失败仍由隔离网络夹具注入。
+
+新增 Header 验证覆盖浅深主题和 375／1280px：装饰图标为 24×24，mask 与可见 currentColor 填色存在；按钮自身没有 mask，点击图形、Enter 和 Space 正确切换侧栏，键盘焦点轮廓完整。侧栏宽度包含内边距与边框；移动断点内覆盖主内容，打开前后主内容宽度不变。窄屏容纳检查与截图复核通过。来源、Mail、Twitter 原有全旅程均通过，新版字体与配色随正式包生效。
+
+正式远端复验通过：[部署身份](ui-2.0.1/delivery.json) 对应源码 `d027230`、[preview run](https://github.com/InKCre/client-web/actions/runs/34799553542) 与部署 `52f3ec3f`。使用 `--deployed-extensions` 加载实际 Host、同源 Registry 和两个 MF 产物，全旅程退出 0，pageerror 为零，见 [日志](ui-2.0.1/browser-output.txt)。截图：[浅色窄屏菜单](ui-2.0.1/released-header-light-375.png)、[深色窄屏菜单](ui-2.0.1/released-header-dark-375.png)、[来源列表](ui-2.0.1/i3-sources-1280.png)、[Mail 失败反馈](ui-2.0.1/mail-host-dark-narrow.png)、[Twitter 时间选择](ui-2.0.1/twitter-time-picker.png)。菜单截图中的轮廓为键盘焦点，普通状态没有边框。
+
+最终功能提交 `d027230` 的 [完整 CI](https://github.com/InKCre/client-web/actions/runs/34799554488) 全部通过，包括 Web 真实数据库旅程、浏览器扩展 E2E 与工作区契约检查。后续文档归档提交没有改变运行时代码。
+
+## I4：Twitter、Mail 与 Graph
+
+本轮以正式包 DESIGN.md 的内容取舍、视觉语言及页面组合为比较依据。Twitter 保留当前步骤与完成摘要，应用凭据按需展开，保存与授权分开；Mail 让邮件内容优先，附件按行组织，信头、内嵌内容与相关邮件可展开，事实摘要不罗列底层字段；Graph 保留场景上下文，选项按需打开，节点可通过键盘聚焦与查看，方向弱化保留可读内容。
+
+完整 check 与原有浏览器旅程通过。扩展的 [I4 重放](i4.mjs) 使用真实构建的 Host 与 MF 产物，验证首次使用、草稿、等待、失败重试、已配置、展开详情、下载、图检索和返回。通过既有 Storage 读取隔离字节并产生真实 Blob 链接；邮件 iframe 不允许脚本、同源访问或外部追踪图像，仅应用清理后注入的固定排印。Graph 验证方向切换不增加数据库读取，拖拽位置在选项变化后保留，读取失败、缺失、空结果、已找到／未找到路径与超出边界分别呈现。
+
+375px 的 Graph 默认聚焦当前对象，使用平移和缩放访问邻域；不要求所有节点同时挤入视口。截图禁用过渡动画并等待相机定位，避免将途中帧作为最终布局。单独重放本轮可在原命令后加 `--i4-only`；远端加 `--deployed-extensions`。详细日志和代表截图位于 [I4 证据目录](i4/)。实际 OAuth 与真实邮箱未执行，数据库 E2E 由同一 PR 的独立 CI 检查。
diff --git a/tasks/ui-v2-migration/evidence/browser-host.mjs b/tasks/ui-v2-migration/evidence/browser-host.mjs
new file mode 100644
index 00000000..3ea2720a
--- /dev/null
+++ b/tasks/ui-v2-migration/evidence/browser-host.mjs
@@ -0,0 +1,560 @@
+// 一次性消费验收：加载真实构建的 Host 和两个 MF remote，网络边界使用隔离数据。
+import { chromium, expect } from '@playwright/test'
+import { readFile, mkdir } from 'node:fs/promises'
+import { verifySources } from './sources.mjs'
+import { verifyI4 } from './i4.mjs'
+const root = process.cwd()
+const webUrl = process.argv[2] ?? 'http://127.0.0.1:47931'
+const deployedExtensions = process.argv.includes('--deployed-extensions')
+const evidence = `${root}/.runtime/ui-migration-evidence`
+await mkdir(evidence, { recursive: true })
+const browser = await chromium.launch()
+const page = await browser.newPage({ viewport: { width: 1280, height: 1000 } })
+const errors = []
+page.on('pageerror', (e) => {
+  errors.push(e.message)
+  console.log('pageerror', e.message)
+})
+page.on('console', (m) => {
+  if (m.type() === 'error') console.log('console', m.text().slice(0, 600))
+})
+const selfId = '11111111-1111-4111-8111-111111111111',
+  coreId = '22222222-2222-4222-8222-222222222222'
+const dates = { created_at: '2026-09-13T00:00:00Z', updated_at: '2026-09-13T00:00:00Z' }
+const self = {
+  id: selfId,
+  name: 'UI migration',
+  labels: [],
+  config: {
+    extension_registry_url: deployedExtensions
+      ? new URL(webUrl).origin
+      : 'https://registry-migration.invalid',
+  },
+  config_schema: {},
+  capabilities: [],
+  lease_expires_at: '2099-01-01T00:00:00Z',
+  ...dates,
+}
+const core = {
+  ...self,
+  id: coreId,
+  name: 'Core fixture',
+  capabilities: [
+    'core.extension.management.v1',
+    'core.feature_retrieval.lexical.v1',
+    'inkcre.twitter.setup.status.v1',
+    'extensions.mail.mime_part.materialize.v1',
+  ].map((id) => ({
+    id,
+    inbound: {
+      protocol: 'core.peer.protocol.http.v1',
+      parameters: {
+        method: 'POST',
+        url:
+          id === 'extensions.mail.mime_part.materialize.v1'
+            ? 'https://api-migration.invalid/materialize'
+            : id === 'core.feature_retrieval.lexical.v1'
+              ? 'https://api-migration.invalid/search'
+              : 'https://api-migration.invalid/status',
+      },
+    },
+  })),
+}
+const extensions = ['twitter', 'mail'].map((name) => ({
+  name: `inkcre/${name}`,
+  nickname: name,
+  version: name === 'twitter' ? '0.3.0' : '0.2.0',
+  enabled: [selfId, coreId],
+  config:
+    name === 'twitter' ? { client_id: 'fixture-client', client_secret: 'fixture-secret' } : {},
+  config_schema: { type: 'object' },
+}))
+let releaseDownload
+const downloadPending = new Promise((resolve) => {
+  releaseDownload = resolve
+})
+const fullText = `${'这是完整正文的阅读验收。A paragraph should remain readable after opening. '.repeat(5)}
+正文末尾 END-OF-CONTENT`
+const mediaImage = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="640" height="320"><rect width="640" height="320" fill="#b7c8bd"/><path d="M0 320L200 80L400 320L530 160L640 320" fill="#4e665b"/></svg>')}`
+const blocks = [
+  { id: 104, resolver: 'core.text.v1', content: fullText, storage: null, ...dates },
+  { id: 105, resolver: 'core.html.v1', content: `<p>${fullText}</p>`, storage: null, ...dates },
+  {
+    id: 106,
+    resolver: 'extensions.twitter.tweet.v1',
+    content: JSON.stringify({
+      id: 106,
+      user_id: 'migration_fixture',
+      text: fullText,
+      attachments: [mediaImage],
+    }),
+    storage: null,
+    ...dates,
+  },
+  {
+    id: 101,
+    resolver: 'extensions.mail.email.v1',
+    content: JSON.stringify({ subject: 'UI 2.0 Mail acceptance' }),
+    storage: null,
+    ...dates,
+  },
+  {
+    id: 102,
+    resolver: 'core.html.v1',
+    content: '<h1>Mail renderer with UI 2.0</h1><p>Isolated acceptance content.</p>',
+    storage: null,
+    ...dates,
+  },
+  {
+    id: 103,
+    resolver: 'extensions.mail.mime_part.v1',
+    content: JSON.stringify({
+      media_type: 'text/plain',
+      filename: '下游迁移附件-long-attachment-name-without-breaks.txt',
+    }),
+    storage: null,
+    ...dates,
+  },
+]
+const relations = [
+  {
+    id: 1,
+    from_: 101,
+    to_: 102,
+    content: JSON.stringify({ role: 'body', part_id: '1' }),
+    ...dates,
+  },
+  {
+    id: 2,
+    from_: 101,
+    to_: 103,
+    content: JSON.stringify({ role: 'attachment', part_id: '2' }),
+    ...dates,
+  },
+]
+const source = {
+  id: 7,
+  type: 'extensions.twitter.bookmark.Source',
+  nickname: 'UI migration bookmarks — 用于确认窄屏下长名称与操作按钮的布局',
+  config: {},
+  state: {},
+  storage: null,
+  block: null,
+  ...dates,
+}
+const job = {
+  id: 9,
+  type: 'core.source.collect.v1',
+  parameters: { source: 7 },
+  state: { message: 'Fixture collection finished' },
+  timeout_seconds: 60,
+  status: 'finished',
+  started_at: dates.created_at,
+  closed_at: dates.created_at,
+  ...dates,
+}
+const log = {
+  id: 1,
+  timestamp: dates.created_at,
+  severity_number: 9,
+  severity_text: 'INFO',
+  body: 'Collection finished. 较长日志正文需要完整换行，日志属性保留可检查的代码格式。',
+  trace_id: 'job.9',
+  span_id: 'fixture',
+  attributes: { source: 7, details: 'long-value-for-layout-verification'.repeat(5) },
+}
+await page.addInitScript(() => {
+  if (window.top !== window) return
+  localStorage.setItem('inkcre-locale', 'zh-CN')
+  localStorage.setItem(
+    'inkcre_app_config',
+    JSON.stringify({
+      INKCRE_PGREST_URL: 'https://api-migration.invalid/rest/',
+      INKCRE_JWT_SECRET: 'ui-migration-isolated-browser-secret',
+      INKCRE_PEER_ID: '11111111-1111-4111-8111-111111111111',
+    })
+  )
+})
+await page.route('https://api-migration.invalid/**', async (route) => {
+  const req = route.request(),
+    url = new URL(req.url()),
+    kind = url.pathname.split('/').at(-1)
+  let data
+  if (url.pathname === '/materialize') {
+    await downloadPending
+    return route.fulfill({
+      status: 500,
+      json: { detail: 'Controlled materialization failure' },
+      headers: { 'access-control-allow-origin': '*' },
+    })
+  }
+  if (url.pathname === '/search')
+    data = {
+      matches: [
+        {
+          block: blocks[0],
+          label: '完整内容阅读与消费者设计迁移',
+          excerpt: fullText.slice(0, 150),
+          evidence: 'terms',
+          rank: 1,
+        },
+      ],
+    }
+  else if (url.pathname === '/status')
+    data = {
+      callback_url: 'https://api-migration.invalid/callback',
+      connected: true,
+      user_id: 'fixture',
+      handle: 'fixture',
+      scopes: [],
+      reconnect_required: false,
+    }
+  else if (kind === 'renew_peer_lease') data = '2099-01-01T00:00:00Z'
+  else if (kind === 'peers') {
+    data = [self, core]
+    if (url.searchParams.has('id'))
+      data = data.filter((x) =>
+        url.searchParams
+          .getAll('id')
+          .every((filter) =>
+            filter.startsWith('eq.') ? filter === `eq.${x.id}` : filter !== `neq.${x.id}`
+          )
+      )
+    if (req.method() === 'POST') data = [self]
+  } else if (kind === 'extensions') {
+    data = extensions.filter(
+      (x) => !url.searchParams.has('name') || `eq.${x.name}` === url.searchParams.get('name')
+    )
+  } else if (kind === 'sources')
+    data = [source, { ...source, id: 8, nickname: 'Second bookmark fixture' }]
+  else if (kind === 'sources_types')
+    data = [
+      {
+        id: source.type,
+        description: 'Bookmark fixture',
+        config_schema: { type: 'object' },
+        collect_config_schema: { type: 'object' },
+        backfill_config_schema: null,
+      },
+    ]
+  else if (kind === 'jobs') data = [job]
+  else if (kind === 'logs') data = url.searchParams.has('id') ? [] : [log]
+  else if (kind === 'crons') data = []
+  else if (kind === 'blocks')
+    data = blocks.filter(
+      (x) => !url.searchParams.has('id') || url.searchParams.get('id') === `eq.${x.id}`
+    )
+  else if (kind === 'relations') {
+    const or = url.searchParams.get('or') ?? ''
+    data = relations.filter((x) => or.includes(`eq.${x.from_}`) || or.includes(`eq.${x.to_}`))
+  } else {
+    console.log('other request', req.method(), url.pathname)
+    data = []
+  }
+  if (req.headers().accept?.includes('vnd.pgrst.object') && Array.isArray(data))
+    data = data[0] ?? null
+  await route.fulfill({ json: data, headers: { 'access-control-allow-origin': '*' } })
+})
+await page.route('https://registry-migration.invalid/**', async (route) => {
+  const url = new URL(route.request().url()),
+    parts = url.pathname.split('/').filter(Boolean)
+  if (parts[0] === 'v1') {
+    const name = parts[3],
+      ext = extensions.find((x) => x.name === `inkcre/${name}`)
+    return route.fulfill({
+      json: {
+        ...ext,
+        state: 'published',
+        module_federation: {
+          host_sdk: '@inkcre/core',
+          host_sdk_version: '>=0.2.0 <0.3.0',
+          manifest_url: `/extensions/inkcre/${name}/${ext.version}/module-federation/mf-manifest.json`,
+        },
+      },
+      headers: { 'access-control-allow-origin': '*' },
+    })
+  }
+  const name = parts[2],
+    asset = parts.slice(5).join('/')
+  try {
+    let body = await readFile(`${root}/extensions/${name}/dist/client-web/${asset}`)
+    if (asset === 'mf-manifest.json') {
+      const manifest = JSON.parse(body)
+      manifest.metaData.publicPath = `https://registry-migration.invalid/${parts.slice(0, 5).join('/')}/`
+      body = Buffer.from(JSON.stringify(manifest))
+    }
+    return route.fulfill({
+      body,
+      contentType: asset.endsWith('.js')
+        ? 'application/javascript'
+        : asset.endsWith('.css')
+          ? 'text/css'
+          : 'application/json',
+      headers: { 'access-control-allow-origin': '*' },
+    })
+  } catch (e) {
+    console.log('asset error', url.pathname, e.message)
+    await route.fulfill({ status: 404 })
+  }
+})
+async function navigate(path) {
+  await page.evaluate((path) => {
+    history.pushState({}, '', path)
+    window.dispatchEvent(new PopStateEvent('popstate'))
+  }, path)
+}
+async function expectContained(selector) {
+  const overflow = await page.locator(selector).evaluateAll((elements) =>
+    elements.flatMap((element) => {
+      const rect = element.getBoundingClientRect()
+      return rect.left < -1 ||
+        rect.right > innerWidth + 1 ||
+        element.scrollWidth > element.clientWidth + 1
+        ? [
+            {
+              selector: element.className,
+              left: rect.left,
+              right: rect.right,
+              width: element.clientWidth,
+              scroll: element.scrollWidth,
+            },
+          ]
+        : []
+    })
+  )
+  expect(overflow, `${selector} stays readable without horizontal clipping`).toEqual([])
+}
+try {
+  if (!process.argv.includes('--i4-only')) {
+    await page.goto(new URL('/extensions', webUrl).href)
+    const card = page.locator('.extension-card', { hasText: 'inkcre/twitter' })
+    await expect(card).toBeVisible()
+    const menu = page.getByRole('button', { name: 'Menu', exact: true })
+    const sidebar = page.locator('.app-side-panel')
+    for (const theme of ['light', 'dark']) {
+      await page.evaluate((theme) => (document.documentElement.dataset.theme = theme), theme)
+      for (const width of [375, 1280]) {
+        await page.setViewportSize({ width, height: 1000 })
+        const icon = menu.locator('[aria-hidden="true"]')
+        await expect(icon).toBeVisible()
+        await expect(icon).not.toHaveCSS('mask-image', 'none')
+        await expect(icon).toHaveCSS('width', '24px')
+        await expect(icon).toHaveCSS('height', '24px')
+        const color = await menu.evaluate((element) => getComputedStyle(element).color)
+        await expect(icon).toHaveCSS('background-color', color)
+        await expect(icon).not.toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+        await expect(menu).toHaveCSS('mask-image', 'none')
+        await expect(sidebar).not.toBeVisible()
+        const contentWidth = await page
+          .locator('.extensions-view')
+          .evaluate((el) => el.getBoundingClientRect().width)
+        await icon.click()
+        await expect(sidebar).toBeVisible()
+        await menu.press('Enter')
+        await expect(sidebar).not.toBeVisible()
+        await menu.press('Space')
+        await expect(sidebar).toBeVisible()
+        await expect(menu).toBeFocused()
+        await expect(menu).toHaveCSS('outline-style', 'solid')
+        await expectContained('.ink-header, .app-side-panel')
+        if (width === 375) {
+          expect(
+            await page
+              .locator('.extensions-view')
+              .evaluate((el) => el.getBoundingClientRect().width)
+          ).toBe(contentWidth)
+        }
+        await page.screenshot({ path: `${evidence}/released-header-${theme}-${width}.png` })
+        await menu.press('Space')
+        await expect(sidebar).not.toBeVisible()
+      }
+    }
+    await page.evaluate(() => delete document.documentElement.dataset.theme)
+    console.log(
+      'Released Header: visible 24px icon, focus and sidebar click/Enter/Space passed in light/dark at 375/1280px'
+    )
+    console.log('card', await card.innerText())
+    await card.getByRole('button', { name: /^(Setup|设置)$/ }).click()
+    await expect(page.getByRole('heading', { name: 'Set up bookmark collection' })).toBeVisible()
+    const sourcePicker = page.getByRole('combobox', { name: 'Bookmark Source', exact: true })
+    await sourcePicker.click()
+    await page.getByRole('option', { name: source.nickname, exact: true }).click()
+    const steps = page.getByRole('list', { name: 'Twitter setup progress' })
+    await expect(steps.getByRole('listitem')).toHaveCount(4)
+    for (const marker of await steps.locator('span').all()) {
+      await expect(marker).toHaveCSS('border-radius', '0px')
+    }
+    await expect(steps.locator('.is-current')).toHaveCount(1)
+    await page.setViewportSize({ width: 375, height: 1000 })
+    await expectContained(
+      '.ink-popup, .ink-dialog__content, .twitter-setup, .twitter-setup__steps, .twitter-setup__steps li, .twitter-setup__toolbar'
+    )
+    await expect(page.getByRole('button', { name: 'Close', exact: true })).toBeInViewport({
+      ratio: 1,
+    })
+    await page.screenshot({ path: `${evidence}/twitter-steps-375.png` })
+    await page.setViewportSize({ width: 1280, height: 1000 })
+    await page.screenshot({ path: `${evidence}/twitter-host-setup.png` })
+    console.log('picker', await page.locator('.ink-picker').innerText())
+    await page.locator('.ink-picker').click()
+    console.log('dialogs', await page.getByRole('dialog').allTextContents())
+    await page.screenshot({ path: `${evidence}/twitter-time-picker.png` })
+    const picker = page.locator('.ink-picker')
+    const timeDialog = page.getByRole('dialog').last()
+    await expect(timeDialog.getByRole('button', { name: '取消', exact: true })).toBeVisible()
+    await timeDialog.getByRole('listbox', { name: /小时/ }).selectOption('7')
+    await timeDialog.getByRole('listbox', { name: /分钟/ }).selectOption('30')
+    await timeDialog.getByRole('button', { name: '取消', exact: true }).click()
+    await expect(picker).toHaveText('12:00 AM')
+    await picker.click()
+    await timeDialog.getByRole('listbox', { name: /小时/ }).selectOption('7')
+    await timeDialog.getByRole('listbox', { name: /分钟/ }).selectOption('30')
+    await timeDialog.getByRole('button', { name: '确认', exact: true }).click()
+    await expect(picker).toHaveText('07:30 AM')
+    console.log('Twitter time cancel/confirm and Host locale passed')
+    const cronPattern = 'https://api-migration.invalid/rest/crons*'
+    const rejectCron = (route) =>
+      route.fulfill({
+        status: 403,
+        json: { message: 'Controlled schedule read failure' },
+        headers: { 'access-control-allow-origin': '*' },
+      })
+    await page.route(cronPattern, rejectCron)
+    await sourcePicker.click()
+    await page.getByRole('option', { name: 'Second bookmark fixture', exact: true }).click()
+    await expect(page.locator('.twitter-setup').getByRole('alert')).toContainText(
+      'Controlled schedule read failure'
+    )
+    await expect(sourcePicker).toHaveText(source.nickname)
+    await expect(picker).toHaveText('07:30 AM')
+    await page.screenshot({ path: `${evidence}/i3-twitter-selection-failed.png` })
+    await page.unroute(cronPattern, rejectCron)
+    await sourcePicker.click()
+    await page.getByRole('option', { name: 'Second bookmark fixture', exact: true }).click()
+    await expect(sourcePicker).toHaveText('Second bookmark fixture')
+    await expect(page.locator('.twitter-setup').getByRole('alert')).toHaveCount(0)
+    console.log(
+      'Twitter source read failure preserves previous selection/time and manual retry passed'
+    )
+    await page.getByRole('button', { name: 'Close', exact: true }).click()
+    await page.evaluate(() => {
+      history.pushState({}, '', '/info-base/list/blocks/101/content')
+      window.dispatchEvent(new PopStateEvent('popstate'))
+    })
+    await expect(page.getByRole('heading', { name: 'UI 2.0 Mail acceptance' })).toBeVisible()
+    await expect(
+      page
+        .frameLocator('iframe[title="Email HTML body"]')
+        .getByRole('heading', { name: 'Mail renderer with UI 2.0' })
+    ).toBeVisible()
+    const download = page.getByRole('button', { name: 'Download', exact: true })
+    await download.click()
+    try {
+      await expect(download).toBeDisabled()
+      await page.screenshot({ path: `${evidence}/mail-host-pending.png` })
+    } finally {
+      releaseDownload()
+    }
+    await expect(page.getByText('Mail materialization Peer returned HTTP 500')).toBeVisible()
+    await expect(download).toBeEnabled()
+    await page.setViewportSize({ width: 375, height: 812 })
+    await page.emulateMedia({ colorScheme: 'dark' })
+    await page.getByText('Mail materialization Peer returned HTTP 500').scrollIntoViewIfNeeded()
+    await page.screenshot({ path: `${evidence}/mail-host-dark-narrow.png` })
+    console.log('Mail renderer, pending and materialization failure passed')
+    await expect(page.locator('.content-email__part')).toHaveCSS('border-top-left-radius', '0px')
+    await expectContained('.content-email__part, .solved-content-popup')
+
+    for (const [id, selector] of [
+      [104, '.content-text__content'],
+      [105, '.content-html__text'],
+      [106, '.content-tweet__text'],
+    ]) {
+      await navigate('/')
+      await navigate(`/info-base/list/blocks/${id}/content`)
+      await expect(page.locator(selector)).toContainText('END-OF-CONTENT')
+      await page.evaluate(() =>
+        document.documentElement.style.setProperty('--sys-font-body-md-font-size', '21px')
+      )
+      await expect(page.locator(selector)).toHaveCSS('font-size', '21px')
+      await expectContained('.solved-content-popup')
+      await page.evaluate(() =>
+        document.documentElement.style.removeProperty('--sys-font-body-md-font-size')
+      )
+    }
+    await expect(page.locator('.content-tweet')).toHaveClass(/solved-content-popup__content/)
+    await expect(page.locator('.content-tweet')).toHaveCSS('overflow-y', 'auto')
+    await expect(page.locator('.content-tweet__media-grid')).toHaveCSS(
+      'border-top-left-radius',
+      '0px'
+    )
+    await page.screenshot({ path: `${evidence}/tweet-host-dark-narrow.png` })
+
+    await navigate('/?q=migration')
+    await expect(page.locator('.info-base-list-view__match')).toBeVisible()
+    await expect(page.locator('.info-base-list-view__match')).toHaveCSS(
+      'border-top-left-radius',
+      '0px'
+    )
+    await expectContained('.info-base-list-view, .info-base-list-view__match')
+    await page.evaluate(() => {
+      window.scrollTo(0, 0)
+      document.querySelector('.info-base-list-view').scrollTop = 0
+    })
+    await page.screenshot({ path: `${evidence}/search-dark-narrow.png` })
+    await page.keyboard.press('Control+k')
+    const recall = page.getByRole('dialog', { name: 'Recall information', exact: true })
+    await expect(recall).toBeVisible()
+    await recall.getByRole('button', { name: 'Find path', exact: true }).click()
+    await recall.getByRole('searchbox').fill('migration')
+    await recall.getByRole('button', { name: 'Search', exact: true }).click()
+    await expect(page.locator('.recall-search__results > button')).toBeVisible()
+    await expectContained('.recall-search, dialog[open]')
+    await page.screenshot({ path: `${evidence}/recall-dark-narrow.png` })
+    await page.keyboard.press('Escape')
+    await expect(recall).not.toBeVisible()
+
+    await verifySources({ page, source, job, dates, evidence, navigate, expectContained })
+
+    for (const width of [1280, 375]) {
+      await page.setViewportSize({ width, height: 1000 })
+      await page.emulateMedia({ colorScheme: width === 1280 ? 'light' : 'dark' })
+      await navigate('/jobs/9')
+      await expect(page.locator('.log-body')).toBeVisible()
+      await expect(page.locator('pre.metadata__value')).toHaveCSS('font-family', /monospace/)
+      await page.locator('.log-entry__main').press('Enter')
+      await expect(page.locator('.log-entry__main')).toHaveAttribute('aria-expanded', 'true')
+      await expect(page.locator('.log-entry__details')).toBeVisible()
+      await expectContained('.job-view, .job-view__metadata, .job-view__logs, .log-entry')
+      await page.screenshot({ path: `${evidence}/job-${width}.png` })
+      await navigate('/extensions')
+      await expect(card).toBeVisible()
+      await expectContained('.extensions-view, .install-extension, .extension-card')
+      await page.screenshot({ path: `${evidence}/extensions-${width}.png` })
+    }
+    console.log(
+      'Full content, semantic font override, square containers and responsive pages passed'
+    )
+  }
+  await verifyI4({
+    page,
+    navigate,
+    evidence,
+    expectContained,
+    dates,
+    blocks,
+    relations,
+    core,
+    extensions,
+    source,
+    webUrl,
+  })
+  expect(errors).toEqual([])
+  console.log('errors', errors)
+} catch (error) {
+  await page.screenshot({ path: `${evidence}/failure.png` })
+  console.log('failed page', page.url(), await page.locator('body').innerText())
+  throw error
+} finally {
+  await browser.close()
+}
diff --git a/tasks/ui-v2-migration/evidence/extensions-375.png b/tasks/ui-v2-migration/evidence/extensions-375.png
new file mode 100644
index 00000000..ea3bfc10
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/extensions-375.png differ
diff --git a/tasks/ui-v2-migration/evidence/i3-artifacts.json b/tasks/ui-v2-migration/evidence/i3-artifacts.json
new file mode 100644
index 00000000..2b83aba2
--- /dev/null
+++ b/tasks/ui-v2-migration/evidence/i3-artifacts.json
@@ -0,0 +1,30 @@
+{
+  "source": {
+    "base_commit": "6a616370160a971358300b9a419d31b6e178aaa4",
+    "working_tree": "I3 uncommitted"
+  },
+  "ui_dependency": "registry @inkcre/ui-web@2.0.0",
+  "builds": {
+    "web": {
+      "files": 11,
+      "sha256": "fb30b72d2ab988f2d31046a419c026d7fa73c124b103436eb5c2de1b701b1cd9"
+    },
+    "core": {
+      "files": 13,
+      "sha256": "221f3bab48afe864254b4a05ca8b85e5d3eff55e71811c109595e703c7196369"
+    },
+    "mail": {
+      "files": 44,
+      "sha256": "6fa8cf95705d2171b5f9db70a4f31173250c5a2f6764dc9fb3666e806d82bc17"
+    },
+    "twitter": {
+      "files": 47,
+      "sha256": "97cad1e7031f7b0d356723eb44df5077267770d8e0439317d07b86c57d15c9c1"
+    }
+  },
+  "runtime": {
+    "node": "22.22.3",
+    "playwright": "1.61.1",
+    "chromium": "149.0.7827.55"
+  }
+}
diff --git a/tasks/ui-v2-migration/evidence/i3-browser.txt b/tasks/ui-v2-migration/evidence/i3-browser.txt
new file mode 100644
index 00000000..b837e6d7
--- /dev/null
+++ b/tasks/ui-v2-migration/evidence/i3-browser.txt
@@ -0,0 +1,36 @@
+card inkcre/twitter
+v0.3.0
+twitter
+ON
+设置
+编辑配置
+变更版本
+卸载
+
+已在 2 个 Peer 上启用。 卸载或变更共享版本前，必须先禁用所有 Peer。
+picker 12:00 AM
+dialogs [
+  '设置 twitter1Prepare2Connect account3Bookmark Source4Review and startSet up bookmark collectionChoose an existing Bookmark Source or create one for this deployment.Bookmark SourceBookmark Source UI migration bookmarks — 用于确认窄屏下长名称与操作按钮的布局Collection scheduleChoose when Core should collect bookmarks each day.Collect bookmarks daily at 12:00 AMTime uses the Core deployment timezone.ContinueClose',
+  '小时 000102030405060708091011121314151617181920212223分钟 000102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859取消确认'
+]
+Twitter time cancel/confirm and Host locale passed
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+Twitter source read failure preserves previous selection/time and manual retry passed
+console Failed to load resource: the server responded with a status of 500 (Internal Server Error)
+Mail renderer, pending and materialization failure passed
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+I3 Sources: list/detail/create, independent read errors, schemas, drafts, pending, failed writes, route changes and deletion passed
+Full content, semantic font override, square containers and responsive pages passed
+errors []
diff --git a/tasks/ui-v2-migration/evidence/i3-source-1280.png b/tasks/ui-v2-migration/evidence/i3-source-1280.png
new file mode 100644
index 00000000..3347f4c0
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/i3-source-1280.png differ
diff --git a/tasks/ui-v2-migration/evidence/i3-source-create-375.png b/tasks/ui-v2-migration/evidence/i3-source-create-375.png
new file mode 100644
index 00000000..d6104ef3
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/i3-source-create-375.png differ
diff --git a/tasks/ui-v2-migration/evidence/i3-source-delete-failed-375.png b/tasks/ui-v2-migration/evidence/i3-source-delete-failed-375.png
new file mode 100644
index 00000000..15c950e0
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/i3-source-delete-failed-375.png differ
diff --git a/tasks/ui-v2-migration/evidence/i3-source-save-failed-375.png b/tasks/ui-v2-migration/evidence/i3-source-save-failed-375.png
new file mode 100644
index 00000000..d95f2a10
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/i3-source-save-failed-375.png differ
diff --git a/tasks/ui-v2-migration/evidence/i3-sources-1280.png b/tasks/ui-v2-migration/evidence/i3-sources-1280.png
new file mode 100644
index 00000000..21511f8f
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/i3-sources-1280.png differ
diff --git a/tasks/ui-v2-migration/evidence/i3-sources-375.png b/tasks/ui-v2-migration/evidence/i3-sources-375.png
new file mode 100644
index 00000000..0b9d3bdf
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/i3-sources-375.png differ
diff --git a/tasks/ui-v2-migration/evidence/i3-twitter-selection-failed.png b/tasks/ui-v2-migration/evidence/i3-twitter-selection-failed.png
new file mode 100644
index 00000000..ed852880
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/i3-twitter-selection-failed.png differ
diff --git a/tasks/ui-v2-migration/evidence/i3-verification.json b/tasks/ui-v2-migration/evidence/i3-verification.json
new file mode 100644
index 00000000..ffa90962
--- /dev/null
+++ b/tasks/ui-v2-migration/evidence/i3-verification.json
@@ -0,0 +1,233 @@
+{
+  "status": "passed",
+  "viewports": [1280, 375],
+  "themes": ["light", "dark"],
+  "sources": [
+    {
+      "id": 8,
+      "nickname": null,
+      "config": {
+        "limit": 10
+      }
+    },
+    {
+      "id": 9,
+      "nickname": "阅读清单",
+      "config": {
+        "limit": 50
+      }
+    },
+    {
+      "id": 7,
+      "nickname": "已保存的来源名称",
+      "config": {
+        "limit": 32,
+        "keptDuringRetry": true
+      }
+    }
+  ],
+  "writes": [
+    {
+      "key": "sources:7",
+      "method": "POST",
+      "body": {
+        "id": 7,
+        "type": "extensions.twitter.bookmark.Source",
+        "nickname": "已保存的来源名称",
+        "config": {
+          "limit": 30,
+          "note": "失败与窄屏变化都保留这份草稿"
+        },
+        "state": {},
+        "storage": null,
+        "block": null,
+        "created_at": "2026-09-13T00:00:00.000Z",
+        "updated_at": "2026-09-13T00:00:00.000Z"
+      }
+    },
+    {
+      "key": "sources:7",
+      "method": "POST",
+      "body": {
+        "id": 7,
+        "type": "extensions.twitter.bookmark.Source",
+        "nickname": "已保存的来源名称",
+        "config": {
+          "limit": 30,
+          "note": "失败与窄屏变化都保留这份草稿"
+        },
+        "state": {},
+        "storage": null,
+        "block": null,
+        "created_at": "2026-09-13T00:00:00.000Z",
+        "updated_at": "2026-09-13T00:00:00.000Z"
+      }
+    },
+    {
+      "key": "sources:7",
+      "method": "POST",
+      "body": {
+        "id": 7,
+        "type": "extensions.twitter.bookmark.Source",
+        "nickname": "已保存的来源名称",
+        "config": {
+          "limit": 31,
+          "kept": true
+        },
+        "state": {},
+        "storage": null,
+        "block": null,
+        "created_at": "2026-09-13T00:00:00.000Z",
+        "updated_at": "2026-09-13T00:00:00.000Z"
+      }
+    },
+    {
+      "key": "sources:7",
+      "method": "POST",
+      "body": {
+        "id": 7,
+        "type": "extensions.twitter.bookmark.Source",
+        "nickname": "已保存的来源名称",
+        "config": {
+          "limit": 32,
+          "keptDuringRetry": true
+        },
+        "state": {},
+        "storage": null,
+        "block": null,
+        "created_at": "2026-09-13T00:00:00.000Z",
+        "updated_at": "2026-09-13T00:00:00.000Z"
+      }
+    },
+    {
+      "key": "jobs",
+      "method": "POST",
+      "body": {
+        "type": "core.source.collect.v1",
+        "parameters": {
+          "source": 7,
+          "config": {
+            "batchSize": 3
+          }
+        },
+        "timeout_seconds": 60,
+        "state": {}
+      }
+    },
+    {
+      "key": "jobs",
+      "method": "POST",
+      "body": {
+        "type": "core.source.collect.v1",
+        "parameters": {
+          "source": 7,
+          "config": {
+            "batchSize": 3
+          }
+        },
+        "timeout_seconds": 60,
+        "state": {}
+      }
+    },
+    {
+      "key": "crons",
+      "method": "POST",
+      "body": {
+        "schedule": "30 7 * * *",
+        "enabled": true,
+        "job_type": "core.source.collect.v1",
+        "job_parameters": {
+          "source": 7,
+          "config": {}
+        },
+        "job_timeout_seconds": null
+      }
+    },
+    {
+      "key": "crons",
+      "method": "POST",
+      "body": {
+        "schedule": "30 7 * * *",
+        "enabled": true,
+        "job_type": "core.source.collect.v1",
+        "job_parameters": {
+          "source": 7,
+          "config": {}
+        },
+        "job_timeout_seconds": null
+      }
+    },
+    {
+      "key": "crons:21",
+      "method": "DELETE",
+      "body": null
+    },
+    {
+      "key": "crons:21",
+      "method": "DELETE",
+      "body": null
+    },
+    {
+      "key": "sources",
+      "method": "POST",
+      "body": {
+        "type": "extensions.twitter.bookmark.Source",
+        "nickname": "新建来源的草稿",
+        "config": {
+          "limit": 15
+        },
+        "state": {},
+        "storage": null
+      }
+    },
+    {
+      "key": "sources",
+      "method": "POST",
+      "body": {
+        "type": "extensions.twitter.bookmark.Source",
+        "nickname": "新建来源的草稿",
+        "config": {
+          "limit": 15
+        },
+        "state": {},
+        "storage": null
+      }
+    },
+    {
+      "key": "sources:22",
+      "method": "DELETE",
+      "body": null
+    },
+    {
+      "key": "sources:22",
+      "method": "DELETE",
+      "body": null
+    },
+    {
+      "key": "jobs",
+      "method": "POST",
+      "body": {
+        "type": "core.source.collect.v1",
+        "parameters": {
+          "source": 9,
+          "config": {}
+        },
+        "timeout_seconds": 60,
+        "state": {}
+      }
+    },
+    {
+      "key": "jobs",
+      "method": "POST",
+      "body": {
+        "type": "core.source.collect.v1",
+        "parameters": {
+          "source": 9,
+          "config": {}
+        },
+        "timeout_seconds": 60,
+        "state": {}
+      }
+    }
+  ]
+}
diff --git a/tasks/ui-v2-migration/evidence/i4.mjs b/tasks/ui-v2-migration/evidence/i4.mjs
new file mode 100644
index 00000000..6e0e530c
--- /dev/null
+++ b/tasks/ui-v2-migration/evidence/i4.mjs
@@ -0,0 +1,504 @@
+import { expect } from '@playwright/test'
+
+// Extends the task's real Host/MF replay at its existing network boundary.
+export async function verifyI4({
+  page,
+  navigate,
+  evidence,
+  expectContained,
+  dates,
+  blocks,
+  relations,
+  core,
+  extensions,
+  source,
+  webUrl,
+}) {
+  const headers = { 'access-control-allow-origin': '*' }
+  const fulfill = (route, json, status = 200) =>
+    route.fulfill({
+      json:
+        Array.isArray(json) && route.request().headers().accept?.includes('vnd.pgrst.object')
+          ? (json[0] ?? null)
+          : json,
+      status,
+      headers,
+    })
+  const extension = extensions.find((item) => item.name === 'inkcre/twitter')
+  let connected = false
+  let oauthState = 'pending'
+  let rejectConfig = true
+  let rejectSchedule = true
+  let configured = false
+  let cron = null
+  let selectedSources = []
+  let startCount = 0
+  let releaseSchedule
+  const heldSchedule = new Promise((resolve) => {
+    releaseSchedule = resolve
+  })
+  const twitterStatus = () => ({
+    callback_url: 'https://api-migration.invalid/callback',
+    connected,
+    user_id: connected ? 'reader' : null,
+    handle: connected ? 'reader' : null,
+    scopes: [],
+    reconnect_required: false,
+  })
+  const caps = [
+    'inkcre.twitter.setup.status.v1',
+    'inkcre.twitter.oauth-app.configure.v1',
+    'inkcre.twitter.oauth.begin.v1',
+    'inkcre.twitter.oauth.transaction.read.v1',
+    'inkcre.twitter.oauth.disconnect.v1',
+  ]
+  const priorCapabilities = core.capabilities
+  core.capabilities = [
+    ...core.capabilities.filter((item) => !caps.includes(item.id)),
+    ...caps.map((id) => ({
+      id,
+      inbound: {
+        protocol: 'core.peer.protocol.http.v1',
+        parameters: { method: 'POST', url: `https://api-migration.invalid/i4/${id}` },
+      },
+    })),
+  ]
+  extension.config = {}
+  await page.route('https://api-migration.invalid/i4/**', async (route) => {
+    const id = new URL(route.request().url()).pathname.split('/').at(-1)
+    if (id === caps[1]) {
+      if (rejectConfig)
+        return fulfill(route, { detail: 'Application save rejected. Try again.' }, 403)
+      configured = true
+      extension.config = { client_id: 'test-client', client_secret: 'test-secret' }
+    }
+    if (id === caps[2] || id === caps[3]) {
+      if (id === caps[2]) oauthState = 'pending'
+      if (oauthState === 'succeeded') connected = true
+      return fulfill(route, {
+        id: '33333333-3333-4333-8333-333333333333',
+        status: oauthState,
+        authorize_url: 'https://x.com/i/oauth2/authorize?fixture=true',
+        expires_at: '2099-01-01T00:00:00Z',
+        error: oauthState === 'failed' ? 'Authorization was declined.' : null,
+      })
+    }
+    if (id === caps[4]) connected = false
+    return fulfill(route, twitterStatus())
+  })
+  const collectionRoute = async (route) => {
+    const request = route.request(),
+      path = new URL(request.url()).pathname
+    if (path.endsWith('/job_types'))
+      return fulfill(route, [
+        {
+          id: 'core.source.collect.v1',
+          description: 'Collect bookmarks',
+          parameters_schema: {},
+          default_timeout_seconds: 60,
+        },
+      ])
+    if (path.endsWith('/sources')) {
+      if (request.method() === 'POST')
+        selectedSources = [{ ...source, nickname: 'My saved bookmarks' }]
+      return fulfill(route, selectedSources)
+    }
+    if (path.endsWith('/crons')) {
+      if (request.method() === 'POST') {
+        await heldSchedule
+        if (rejectSchedule) return fulfill(route, { message: 'Schedule save rejected.' }, 403)
+        cron = {
+          ...request.postDataJSON(),
+          id: 90,
+          last_job: null,
+          last_scheduled_for: null,
+          ...dates,
+        }
+      }
+      if (request.method() === 'PATCH') cron = { ...cron, ...request.postDataJSON() }
+      return fulfill(route, cron ? [cron] : [])
+    }
+    if (path.endsWith('/jobs') && request.method() === 'POST') {
+      startCount += 1
+      return fulfill(route, [
+        {
+          id: 95,
+          ...request.postDataJSON(),
+          status: 'pending',
+          state: {},
+          started_at: null,
+          closed_at: null,
+          ...dates,
+        },
+      ])
+    }
+    return route.fallback()
+  }
+  await page.route(
+    'https://api-migration.invalid/rest/{sources,crons,jobs,job_types}*',
+    collectionRoute
+  )
+  await page.setViewportSize({ width: 1280, height: 1000 })
+  await page.emulateMedia({ colorScheme: 'light', reducedMotion: 'reduce' })
+  await page.goto(new URL('/extensions', webUrl).href)
+  const card = page.locator('.extension-card', { hasText: 'inkcre/twitter' })
+  await card.getByRole('button', { name: /^(Setup|设置)$/ }).click()
+  const setup = page.locator('.twitter-setup')
+  await expect(setup.getByRole('heading', { name: 'Connect an X account' })).toBeVisible()
+  await expect(setup.getByRole('button', { name: 'Create authorization link' })).toHaveCount(0)
+  await setup.getByRole('textbox', { name: 'Client ID', exact: true }).fill('test-client')
+  await setup.locator('input[type=password]').fill('test-secret')
+  await setup.getByRole('button', { name: 'Save application' }).click()
+  await expect(setup.getByRole('alert')).toContainText('Application save rejected')
+  await expect(setup.getByRole('textbox', { name: 'Client ID', exact: true })).toHaveValue(
+    'test-client'
+  )
+  await expect(setup.locator('input[type=password]')).toHaveValue('test-secret')
+  await page.screenshot({
+    animations: 'disabled',
+    path: `${evidence}/i4-twitter-application-failed.png`,
+  })
+  rejectConfig = false
+  await setup.getByRole('button', { name: 'Save application' }).click()
+  await expect(setup.getByRole('button', { name: 'Create authorization link' })).toBeEnabled()
+  expect(configured).toBe(true)
+  await expect(setup.locator('input[type=password]')).toBeHidden()
+  await setup.getByRole('button', { name: 'Create authorization link' }).click()
+  await expect(setup.getByRole('link', { name: 'Open X authorization' })).toBeVisible()
+  await expect(setup.getByRole('button', { name: 'Create authorization link' })).toHaveCount(0)
+  await page.screenshot({
+    animations: 'disabled',
+    path: `${evidence}/i4-twitter-authorization.png`,
+  })
+  oauthState = 'failed'
+  await expect(setup.getByRole('alert')).toContainText('Authorization was declined', {
+    timeout: 10000,
+  })
+  await setup.getByRole('button', { name: 'Create authorization link' }).click()
+  await expect(setup.getByRole('link', { name: 'Open X authorization' })).toBeVisible()
+  oauthState = 'succeeded'
+  await expect(setup.getByRole('heading', { name: 'Set up bookmark collection' })).toBeVisible({
+    timeout: 10000,
+  })
+  await setup.getByRole('textbox', { name: 'Source nickname' }).fill('My saved bookmarks')
+  await setup.getByRole('button', { name: 'Create Bookmark Source' }).click()
+  await expect(setup.locator('.ink-picker')).toBeVisible()
+  await setup.getByRole('button', { name: 'Continue', exact: true }).click()
+  await expect(setup.getByRole('button', { name: 'Close', exact: true })).toBeDisabled()
+  releaseSchedule()
+  await expect(setup.getByRole('alert')).toContainText('Schedule save rejected')
+  await expect(setup.locator('.ink-picker')).toBeVisible()
+  rejectSchedule = false
+  await setup.getByRole('button', { name: 'Continue', exact: true }).click()
+  await expect(setup.getByRole('heading', { name: 'Review and start' })).toBeVisible()
+  await setup.getByRole('button', { name: 'Start collecting bookmarks' }).click()
+  await expect(setup.getByRole('heading', { name: 'Twitter is ready' })).toBeVisible()
+  expect(startCount).toBe(1)
+  for (const [width, theme] of [
+    [1280, 'light'],
+    [375, 'dark'],
+  ]) {
+    await page.setViewportSize({ width, height: 900 })
+    await page.emulateMedia({ colorScheme: theme, reducedMotion: 'reduce' })
+    await expectContained('.twitter-setup, .twitter-setup__steps, dialog[open]')
+    await page.screenshot({
+      animations: 'disabled',
+      path: `${evidence}/i4-twitter-ready-${width}.png`,
+    })
+  }
+  await setup.getByRole('button', { name: 'Edit collection' }).click()
+  await expect(setup.getByRole('combobox', { name: 'Bookmark Source', exact: true })).toHaveText(
+    'My saved bookmarks'
+  )
+  await page.screenshot({
+    animations: 'disabled',
+    path: `${evidence}/i4-twitter-collection-375.png`,
+  })
+  await setup.getByRole('button', { name: 'Close', exact: true }).click()
+  await page.unroute(
+    'https://api-migration.invalid/rest/{sources,crons,jobs,job_types}*',
+    collectionRoute
+  )
+  core.capabilities = priorCapabilities
+  console.log(
+    'I4 Twitter: fresh app, failed save retains masked draft, authorization pending/failure/retry, source creation, schedule rejection and explicit start passed'
+  )
+
+  // Mail fixtures include each registered presentation and graph relations. No real mailbox data.
+  const add = (id, resolver, content) =>
+    blocks.push({
+      id,
+      resolver,
+      content: typeof content === 'string' ? content : JSON.stringify(content),
+      storage: null,
+      ...dates,
+    })
+  add(201, 'extensions.mail.email_address.v1', {
+    address: 'reader.with.a.long.address@example.test',
+  })
+  add(202, 'extensions.mail.mailbox.v1', {
+    name: 'Design correspondence',
+    special_uses: ['archive'],
+    mailbox_id: 'mailbox-archive-2026',
+  })
+  add(203, 'extensions.mail.flag.v1', {
+    name: 'Follow up',
+    description: 'Review the attached design notes before replying.',
+  })
+  add(204, 'extensions.mail.mime_part.v1', {
+    media_type: 'image/png',
+    filename: 'inline-design.png',
+    charset: null,
+    encoded_size: 2400,
+    content_id: 'design-image',
+    transfer_encoding: 'base64',
+  })
+  add(205, 'extensions.mail.email.v1', { subject: 'Text-only correspondence — 保留完整正文' })
+  add(206, 'extensions.mail.email.v1', { subject: 'An empty message' })
+  add(
+    207,
+    'core.text.v1',
+    'A text-only message.\n\n' + '保留段落与完整内容。'.repeat(30) + ' END-MAIL-TEXT'
+  )
+  add(208, 'core.text.v1', 'Design notes and a sketch of the mail relationships.')
+  const relation = (id, from_, to_, content) =>
+    relations.push({
+      id,
+      from_,
+      to_,
+      content: typeof content === 'string' ? content : JSON.stringify(content),
+      ...dates,
+    })
+  relation(201, 101, 201, { role: 'from', order: 0, display_name: 'Design team' })
+  relation(202, 202, 101, { type: 'contains', uid_validity: 1, uid: 1 })
+  relation(203, 203, 101, 'tags')
+  relation(204, 101, 204, { role: 'inline', part_id: '3' })
+  relation(205, 101, 205, 'parent:reply')
+  relation(206, 205, 207, { role: 'body', part_id: '1' })
+  relation(207, 101, 208, 'illustrates')
+  for (let id = 301; id <= 306; id += 1) {
+    add(id, 'core.text.v1', `Path fixture ${id}`)
+    if (id < 306) relation(id, id, id + 1, 'next')
+  }
+  blocks.find((b) => b.id === 102).content +=
+    '<img src="https://tracker.invalid/pixel"><style>body{display:none}</style><script>window.bad=true</script><p style="display:none">Visible safe text</p>'
+  const trackers = []
+  const track = (req) => {
+    if (req.url().includes('tracker.invalid')) trackers.push(req.url())
+  }
+  page.on('request', track)
+  let rejectGraph = false
+  let graphRequests = 0
+  const matches = (value, filter) => {
+    if (!filter) return true
+    if (filter.startsWith('eq.')) return String(value) === filter.slice(3)
+    if (filter.startsWith('in.(')) return filter.slice(4, -1).split(',').includes(String(value))
+    return true
+  }
+  const graphRoute = async (route) => {
+    const url = new URL(route.request().url())
+    const isBlocks = url.pathname.endsWith('/blocks')
+    graphRequests += 1
+    if (rejectGraph) return fulfill(route, { message: 'Graph read unavailable' }, 403)
+    let data = (isBlocks ? blocks : relations).filter((row) =>
+      ['id', 'from_', 'to_'].every((field) => matches(row[field], url.searchParams.get(field)))
+    )
+    const or = url.searchParams.get('or')
+    if (or)
+      data = data.filter((row) => or.includes(`eq.${row.from_}`) || or.includes(`eq.${row.to_}`))
+    if (route.request().headers().accept?.includes('vnd.pgrst.object')) data = data[0] ?? null
+    return fulfill(route, data)
+  }
+  await page.route('https://api-migration.invalid/rest/{blocks,relations}*', graphRoute)
+  await navigate('/info-base/list/blocks/101/content')
+  const email = page.locator('.content-email')
+  await expect(email.getByRole('heading', { name: 'UI 2.0 Mail acceptance' })).toBeVisible()
+  await expect(email.locator('.content-email__sender')).toContainText('Design team')
+  await expect(email.getByText('Design correspondence', { exact: true })).toBeHidden()
+  await email.getByText('Message details', { exact: true }).click()
+  await expect(email.getByText('Design correspondence', { exact: true })).toBeVisible()
+  await email.getByText('Message details', { exact: true }).click()
+  const frame = page.frameLocator('iframe[title="Email HTML body"]')
+  await expect(frame.getByText('Visible safe text')).toBeVisible()
+  expect(await frame.locator('script').count()).toBe(0)
+  await expect(frame.locator('body')).toHaveCSS('font-family', /system-ui/)
+  await expect(page.locator('iframe[title="Email HTML body"]')).not.toHaveAttribute(
+    'sandbox',
+    /allow-scripts|allow-same-origin/
+  )
+  expect(trackers).toEqual([])
+  await expect(email.getByText('inline-design.png', { exact: true })).toBeHidden()
+  await email.getByText('Inline content · 1', { exact: true }).click()
+  await expect(email.getByText('inline-design.png', { exact: true })).toBeVisible()
+  await email.getByText('Related messages · 1', { exact: true }).click()
+  await expect(email.getByRole('button', { name: 'Text-only correspondence' })).toBeVisible()
+  for (const [width, theme] of [
+    [1280, 'light'],
+    [375, 'dark'],
+  ]) {
+    await page.setViewportSize({ width, height: 1000 })
+    await page.emulateMedia({ colorScheme: theme, reducedMotion: 'reduce' })
+    await expectContained('.solved-content-popup, .content-email, .mime-part-item')
+    await page.screenshot({ animations: 'disabled', path: `${evidence}/i4-mail-${width}.png` })
+  }
+  const materialized = {
+    id: 209,
+    resolver: 'core.file.v1',
+    storage: 1,
+    content: 'https://api-migration.invalid/i4-file',
+    ...dates,
+  }
+  await page.route('https://api-migration.invalid/rest/storages*', (route) =>
+    fulfill(route, [{ id: 1, type: 'http', nickname: 'Fixture storage', config: {} }])
+  )
+  await page.route('https://api-migration.invalid/i4-file', (route) =>
+    route.fulfill({ body: 'Safe file bytes', headers, contentType: 'application/octet-stream' })
+  )
+  await page.route('https://api-migration.invalid/materialize', (route) =>
+    fulfill(route, materialized)
+  )
+  for (const [id, text] of [
+    [201, 'reader.with.a.long.address'],
+    [202, 'Design correspondence'],
+    [203, 'Follow up'],
+    [204, 'inline-design.png'],
+    [205, 'END-MAIL-TEXT'],
+    [206, 'No body content'],
+  ]) {
+    await navigate(`/info-base/list/blocks/${id}/content`)
+    await expect(page.locator('.solved-content-popup__content')).toContainText(text)
+    await expectContained('.solved-content-popup, .solved-content-popup__content')
+    if (id === 204) {
+      await page.getByText('File details', { exact: true }).click()
+      await expect(page.getByText('base64', { exact: true })).toBeVisible()
+      await page
+        .locator('.content-mime-part')
+        .getByRole('button', { name: 'Download', exact: true })
+        .click()
+      await expect(
+        page.locator('.content-mime-part').getByRole('link', { name: 'Open', exact: true })
+      ).toHaveAttribute('href', /^blob:/)
+      await expect(
+        page.locator('.content-mime-part').getByRole('button', { name: 'Download', exact: true })
+      ).toHaveCount(0)
+    }
+    await page.screenshot({ animations: 'disabled', path: `${evidence}/i4-mail-record-${id}.png` })
+  }
+  console.log(
+    'I4 Mail: message details, attachment/inline grouping, sanitizer and resource isolation, text/empty bodies, MIME and all three fact renderers passed'
+  )
+
+  await navigate('/info-base/graph?focal_block=101')
+  await expect(page.getByRole('heading', { name: 'Around Block #101' })).toBeVisible()
+  await expect(page.locator('.block-node')).toHaveCount(9)
+  await expect(page.getByRole('button', { name: 'Inspect Block #101', exact: true })).toBeVisible()
+  await expect(
+    page.locator('.mail-fact-preview').filter({ hasText: 'Design correspondence' })
+  ).toBeVisible()
+  await expect(
+    page.locator('.mail-fact-preview').filter({ hasText: 'Design correspondence' })
+  ).not.toContainText('mailbox-archive')
+  const graphNode = page.locator('.vue-flow__node[data-id="101"]')
+  const beforeDrag = await graphNode.getAttribute('style')
+  const dragArea = await graphNode.locator('.block-node__identity').boundingBox()
+  await page.mouse.move(dragArea.x + 3, dragArea.y + 3)
+  await page.mouse.down()
+  await page.mouse.move(dragArea.x + 43, dragArea.y + 33, { steps: 5 })
+  await page.mouse.up()
+  await expect(graphNode).not.toHaveAttribute('style', beforeDrag)
+  const draggedPosition = await graphNode.getAttribute('style')
+  await page.getByText('View options', { exact: true }).click()
+  const requestCount = graphRequests
+  await page.getByRole('combobox', { name: 'Emphasize relations' }).click()
+  await page.getByRole('option', { name: 'Incoming', exact: true }).click()
+  await expect(page.locator('.block-node--muted')).not.toHaveCount(0)
+  expect(graphRequests).toBe(requestCount)
+  await expect(graphNode).toHaveAttribute('style', draggedPosition)
+  await page.getByRole('combobox', { name: 'Neighborhood size' }).click()
+  await page.getByRole('option', { name: 'Small · 8 relations', exact: true }).click()
+  await expect(page.locator('.block-node')).toHaveCount(9)
+  await expect(graphNode).toHaveAttribute('style', draggedPosition)
+  await page.getByText('View options', { exact: true }).click()
+  for (const [width, theme] of [
+    [1280, 'light'],
+    [375, 'dark'],
+  ]) {
+    await page.setViewportSize({ width, height: 1000 })
+    await page.emulateMedia({ colorScheme: theme, reducedMotion: 'reduce' })
+    await page.getByRole('button', { name: 'Focus current', exact: true }).click()
+    await page.evaluate(
+      () => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)))
+    )
+    const focal = page.locator('.block-node--focal')
+    await expect
+      .poll(() =>
+        focal.evaluate((item) => {
+          const box = item.getBoundingClientRect()
+          const flow = document.querySelector('.graph-view__flow').getBoundingClientRect()
+          return (
+            (flow.width >= 640 ||
+              (Math.abs((box.left + box.right - flow.left - flow.right) / 2) < 2 &&
+                Math.abs((box.top + box.bottom - flow.top - flow.bottom) / 2) < 2)) &&
+            box.width >= item.clientWidth * 0.74 &&
+            box.left >= flow.left - 1 &&
+            box.right <= flow.right + 1 &&
+            box.top >= flow.top - 1 &&
+            box.bottom <= flow.bottom + 1
+          )
+        })
+      )
+      .toBe(true)
+    await expectContained('.graph-view, .graph-view__toolbar, .graph-view__viewport-controls')
+    await page.screenshot({ animations: 'disabled', path: `${evidence}/i4-graph-${width}.png` })
+  }
+  await page.getByRole('button', { name: 'Explore Block #205', exact: true }).press('Enter')
+  await expect(page).toHaveURL(/focal_block=205/)
+  await page.getByRole('button', { name: 'Inspect Block #205', exact: true }).click()
+  await expect(page.locator('.block-inspector-popup')).toContainText('#205')
+  await expectContained('.block-inspector-popup, dialog[open]')
+  await page
+    .locator('.block-inspector-popup')
+    .getByRole('button', { name: /关闭|Close/ })
+    .click()
+  await expect(page.locator('.block-inspector-popup')).toHaveCount(0)
+  for (let attempt = 0; attempt < 4; attempt += 1)
+    await page.getByRole('button', { name: 'Zoom out', exact: true }).click()
+  await page.getByRole('button', { name: 'Explore Relation #205', exact: true }).click()
+  await page.getByRole('button', { name: 'Inspect Relation #205', exact: true }).click()
+  await expect(page.locator('.relation-inspector-popup')).toContainText('parent:reply')
+  await page.screenshot({ animations: 'disabled', path: `${evidence}/i4-graph-relation-375.png` })
+  await page
+    .locator('.relation-inspector-popup')
+    .getByRole('button', { name: /关闭|Close/ })
+    .click()
+  rejectGraph = true
+  await navigate('/info-base/graph?focal_block=206')
+  await expect(page.getByRole('alert')).toHaveText('Unable to load the graph')
+  rejectGraph = false
+  await page.getByRole('button', { name: 'Retry', exact: true }).click()
+  await expect(page.locator('.block-node')).toHaveCount(1)
+  await navigate('/info-base/graph?focal_block=999')
+  await expect(
+    page.getByRole('heading', { name: 'This item is no longer available' })
+  ).toBeVisible()
+  await navigate('/info-base/graph?path_from=101&path_to=206')
+  await expect(page.getByRole('heading', { name: 'No connecting path found' })).toBeVisible()
+  await page.screenshot({ animations: 'disabled', path: `${evidence}/i4-graph-no-path-375.png` })
+  await navigate('/info-base/graph?path_from=301&path_to=306')
+  await expect(
+    page.getByRole('heading', { name: 'The path exceeds the exploration limit' })
+  ).toBeVisible()
+  await navigate('/info-base/graph?path_from=101&path_to=205')
+  await expect(page.locator('.block-node')).toHaveCount(2)
+  await page.route('https://api-migration.invalid/search', (route) =>
+    fulfill(route, { matches: [] })
+  )
+  await navigate('/info-base/graph?q=no-results')
+  await expect(page.getByRole('heading', { name: 'No information here yet' })).toBeVisible()
+  await page.unroute('https://api-migration.invalid/search')
+  console.log(
+    'I4 Graph: real retrieval, six preview types, direction without new reads, scale, keyboard focal navigation, both inspectors/back, retry, empty/missing and found/no-path/limit states passed'
+  )
+  await page.unroute('https://api-migration.invalid/rest/{blocks,relations}*', graphRoute)
+  page.off('request', track)
+}
diff --git a/tasks/ui-v2-migration/evidence/i4/README.md b/tasks/ui-v2-migration/evidence/i4/README.md
new file mode 100644
index 00000000..38672820
--- /dev/null
+++ b/tasks/ui-v2-migration/evidence/i4/README.md
@@ -0,0 +1,11 @@
+# I4 验收
+
+[源码与验收身份](delivery.json)，[本地完整新增旅程](local-browser.txt)。沿父目录 browser-host.mjs 重放；加 `--i4-only` 只运行本轮，加 `--deployed-extensions` 使用远端 Registry 与 MF 资源。
+
+- Twitter：[应用保存失败](i4-twitter-application-failed.png)、[等待授权](i4-twitter-authorization.png)、[采集设置](i4-twitter-collection-375.png)、[完成摘要](i4-twitter-ready-375.png)。
+- Mail：[宽屏阅读](i4-mail-1280.png)、[窄屏阅读与附件](i4-mail-375.png)、[邮箱事实](i4-mail-record-202.png)、[MIME 下载就绪](i4-mail-record-204.png)。
+- Graph：[宽屏探索](i4-graph-1280.png)、[窄屏当前对象](i4-graph-375.png)、[关系详情](i4-graph-relation-375.png)、[无路径](i4-graph-no-path-375.png)。
+
+截图使用浅深主题、375px／1280px，并关闭过渡动画；Graph 等待相机定位后截图。所有数据及凭据均为隔离夹具，日志中的 403 是主动拒绝注入。邮件白色区域是隔离后的消息文档，不继承宿主主题；完整地址与技术信息通过详情保持可达。
+
+远端完整复验通过，源码 `9cd531e` 对应部署 `69ebcde3`；[远端日志](remote-browser.txt) 包括原有菜单、来源旅程及本轮 I4，pageerror 为零。此目录代表截图已替换为该部署的截图。[完整 CI](https://github.com/InKCre/client-web/actions/runs/34803560421) 全部成功，包括 Web 真实数据库 E2E、浏览器扩展 E2E 与工作区契约检查。
diff --git a/tasks/ui-v2-migration/evidence/i4/delivery.json b/tasks/ui-v2-migration/evidence/i4/delivery.json
new file mode 100644
index 00000000..937a0e41
--- /dev/null
+++ b/tasks/ui-v2-migration/evidence/i4/delivery.json
@@ -0,0 +1,16 @@
+{
+  "runtimeSourceHead": "ab5af808a7b3522a4be83cada527de1c2c78ba24",
+  "uiVersion": "2.0.1",
+  "localURL": "http://127.0.0.1:47931",
+  "businessData": "isolated network fixtures",
+  "localBrowserExitCode": 0,
+  "pageErrors": [],
+  "previewSourceHead": "9cd531eef976565db26232d951d9b023621235dd",
+  "previewRun": "https://github.com/InKCre/client-web/actions/runs/34803559638",
+  "deployment": "https://69ebcde3.inkcre-client-web.pages.dev",
+  "testedURL": "https://preview-client-web-pr-104.inkcre-client-web.pages.dev",
+  "remoteBrowserExitCode": 0,
+  "extensionAssets": "real deployed Host, same-origin Registry and Mail/Twitter Module Federation assets",
+  "ci": "https://github.com/InKCre/client-web/actions/runs/34803560421",
+  "ciConclusion": "success"
+}
diff --git a/tasks/ui-v2-migration/evidence/i4/i4-graph-1280.png b/tasks/ui-v2-migration/evidence/i4/i4-graph-1280.png
new file mode 100644
index 00000000..6b561f8f
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/i4/i4-graph-1280.png differ
diff --git a/tasks/ui-v2-migration/evidence/i4/i4-graph-375.png b/tasks/ui-v2-migration/evidence/i4/i4-graph-375.png
new file mode 100644
index 00000000..de9fde5d
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/i4/i4-graph-375.png differ
diff --git a/tasks/ui-v2-migration/evidence/i4/i4-graph-no-path-375.png b/tasks/ui-v2-migration/evidence/i4/i4-graph-no-path-375.png
new file mode 100644
index 00000000..284c0290
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/i4/i4-graph-no-path-375.png differ
diff --git a/tasks/ui-v2-migration/evidence/i4/i4-graph-relation-375.png b/tasks/ui-v2-migration/evidence/i4/i4-graph-relation-375.png
new file mode 100644
index 00000000..43808c64
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/i4/i4-graph-relation-375.png differ
diff --git a/tasks/ui-v2-migration/evidence/i4/i4-mail-1280.png b/tasks/ui-v2-migration/evidence/i4/i4-mail-1280.png
new file mode 100644
index 00000000..2756a5ea
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/i4/i4-mail-1280.png differ
diff --git a/tasks/ui-v2-migration/evidence/i4/i4-mail-375.png b/tasks/ui-v2-migration/evidence/i4/i4-mail-375.png
new file mode 100644
index 00000000..7941739e
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/i4/i4-mail-375.png differ
diff --git a/tasks/ui-v2-migration/evidence/i4/i4-mail-record-202.png b/tasks/ui-v2-migration/evidence/i4/i4-mail-record-202.png
new file mode 100644
index 00000000..ce489100
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/i4/i4-mail-record-202.png differ
diff --git a/tasks/ui-v2-migration/evidence/i4/i4-mail-record-204.png b/tasks/ui-v2-migration/evidence/i4/i4-mail-record-204.png
new file mode 100644
index 00000000..e2d2fd36
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/i4/i4-mail-record-204.png differ
diff --git a/tasks/ui-v2-migration/evidence/i4/i4-twitter-application-failed.png b/tasks/ui-v2-migration/evidence/i4/i4-twitter-application-failed.png
new file mode 100644
index 00000000..60762483
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/i4/i4-twitter-application-failed.png differ
diff --git a/tasks/ui-v2-migration/evidence/i4/i4-twitter-authorization.png b/tasks/ui-v2-migration/evidence/i4/i4-twitter-authorization.png
new file mode 100644
index 00000000..679fde02
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/i4/i4-twitter-authorization.png differ
diff --git a/tasks/ui-v2-migration/evidence/i4/i4-twitter-collection-375.png b/tasks/ui-v2-migration/evidence/i4/i4-twitter-collection-375.png
new file mode 100644
index 00000000..37fb97de
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/i4/i4-twitter-collection-375.png differ
diff --git a/tasks/ui-v2-migration/evidence/i4/i4-twitter-ready-375.png b/tasks/ui-v2-migration/evidence/i4/i4-twitter-ready-375.png
new file mode 100644
index 00000000..5755c5ee
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/i4/i4-twitter-ready-375.png differ
diff --git a/tasks/ui-v2-migration/evidence/i4/local-browser.txt b/tasks/ui-v2-migration/evidence/i4/local-browser.txt
new file mode 100644
index 00000000..4938e16d
--- /dev/null
+++ b/tasks/ui-v2-migration/evidence/i4/local-browser.txt
@@ -0,0 +1,13 @@
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+I4 Twitter: fresh app, failed save retains masked draft, authorization pending/failure/retry, source creation, schedule rejection and explicit start passed
+I4 Mail: message details, attachment/inline grouping, sanitizer and resource isolation, text/empty bodies, MIME and all three fact renderers passed
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console [InfoBase] Failed to load Graph scene. PostgrestError: Graph read unavailable
+    at PostgrestFilterBuilder.processResponse (http://127.0.0.1:47931/assets/index-BEI2BZR1.js:122:2248)
+    at async http://127.0.0.1:47931/assets/index-BEI2BZR1.js:119:162709
+    at async Block.find (http://127.0.0.1:47931/assets/index-BEI2BZR1.js:122:69651)
+    at async GraphNavigationRetrievalManager.getBlockNeighborhood (http://127.0.0.1:47931/assets/index-BEI2BZR1.js:122:89722)
+    at async we (http://127.0.0.1:47931/assets/index-BEI2BZR1.js:173:107248)
+I4 Graph: real retrieval, six preview types, direction without new reads, scale, keyboard focal navigation, both inspectors/back, retry, empty/missing and found/no-path/limit states passed
+errors []
diff --git a/tasks/ui-v2-migration/evidence/i4/remote-browser.txt b/tasks/ui-v2-migration/evidence/i4/remote-browser.txt
new file mode 100644
index 00000000..62a132c1
--- /dev/null
+++ b/tasks/ui-v2-migration/evidence/i4/remote-browser.txt
@@ -0,0 +1,48 @@
+Released Header: visible 24px icon, focus and sidebar click/Enter/Space passed in light/dark at 375/1280px
+card inkcre/twitter
+v0.3.0
+twitter
+ON
+设置
+编辑配置
+变更版本
+卸载
+
+已在 2 个 Peer 上启用。 卸载或变更共享版本前，必须先禁用所有 Peer。
+picker 12:00 AM
+dialogs [
+  "设置 twitter1Prepare2Connect account3Bookmark Source4Review and startSet up bookmark collectionBookmark Source UI migration bookmarks — 用于确认窄屏下长名称与操作按钮的布局Collect bookmarks daily at 12:00 AMTime uses the collection client's timezone.ContinueClose",
+  '小时 000102030405060708091011121314151617181920212223分钟 000102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859取消确认'
+]
+Twitter time cancel/confirm and Host locale passed
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+Twitter source read failure preserves previous selection/time and manual retry passed
+console Failed to load resource: the server responded with a status of 500 (Internal Server Error)
+Mail renderer, pending and materialization failure passed
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+I3 Sources: list/detail/create, independent read errors, schemas, drafts, pending, failed writes, route changes and deletion passed
+Full content, semantic font override, square containers and responsive pages passed
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+I4 Twitter: fresh app, failed save retains masked draft, authorization pending/failure/retry, source creation, schedule rejection and explicit start passed
+I4 Mail: message details, attachment/inline grouping, sanitizer and resource isolation, text/empty bodies, MIME and all three fact renderers passed
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console [InfoBase] Failed to load Graph scene. PostgrestError: Graph read unavailable
+    at PostgrestFilterBuilder.processResponse (https://preview-client-web-pr-104.inkcre-client-web.pages.dev/assets/index-BEI2BZR1.js:122:2248)
+    at async https://preview-client-web-pr-104.inkcre-client-web.pages.dev/assets/index-BEI2BZR1.js:119:162709
+    at async Block.find (https://preview-client-web-pr-104.inkcre-client-web.pages.dev/assets/index-BEI2BZR1.js:122:69651)
+    at async GraphNavigationRetrievalManager.getBlockNeighborhood (https://preview-client-web-pr-104.inkcre-client-web.pages.dev/assets/index-BE
+I4 Graph: real retrieval, six preview types, direction without new reads, scale, keyboard focal navigation, both inspectors/back, retry, empty/missing and found/no-path/limit states passed
+errors []
diff --git a/tasks/ui-v2-migration/evidence/icon-diagnosis.json b/tasks/ui-v2-migration/evidence/icon-diagnosis.json
new file mode 100644
index 00000000..47742783
--- /dev/null
+++ b/tasks/ui-v2-migration/evidence/icon-diagnosis.json
@@ -0,0 +1,178 @@
+{
+  "preview": "https://preview-client-web-pr-104.inkcre-client-web.pages.dev",
+  "source": "0f2ed005c13499e59e5e03aeff900ef16b01026e",
+  "ui_dependency": "registry @inkcre/ui-web@2.0.0",
+  "observations": [
+    {
+      "class": "i-mdi-menu ink-header__menu-icon",
+      "tag": "BUTTON",
+      "mask": "url(\"data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z'/%3E%3C/svg%3E\")",
+      "backgroundImage": "none",
+      "background": "rgba(0, 0, 0, 0)",
+      "color": "rgb(7, 7, 7)",
+      "width": 24,
+      "height": 24,
+      "page": "https://preview-client-web-pr-104.inkcre-client-web.pages.dev/extensions"
+    },
+    {
+      "class": "i-mdi-chevron-down ink-dropdown__chevron",
+      "tag": "SPAN",
+      "mask": "url(\"data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z'/%3E%3C/svg%3E\")",
+      "backgroundImage": "none",
+      "background": "rgb(7, 7, 7)",
+      "color": "rgb(7, 7, 7)",
+      "width": 12,
+      "height": 12,
+      "page": "https://preview-client-web-pr-104.inkcre-client-web.pages.dev/extensions"
+    },
+    {
+      "class": "i-mdi-refresh ink-button__icon",
+      "tag": "SPAN",
+      "mask": "url(\"data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 0 0-8 8a8 8 0 0 0 8 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18a6 6 0 0 1-6-6a6 6 0 0 1 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z'/%3E%3C/svg%3E\")",
+      "backgroundImage": "none",
+      "background": "rgb(75, 75, 75)",
+      "color": "rgb(75, 75, 75)",
+      "width": 14,
+      "height": 14,
+      "page": "https://preview-client-web-pr-104.inkcre-client-web.pages.dev/info-base/list/blocks/101/content"
+    },
+    {
+      "class": "i-mdi-close ink-button__icon",
+      "tag": "SPAN",
+      "mask": "url(\"data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z'/%3E%3C/svg%3E\")",
+      "backgroundImage": "none",
+      "background": "rgb(7, 7, 7)",
+      "color": "rgb(7, 7, 7)",
+      "width": 14,
+      "height": 14,
+      "page": "https://preview-client-web-pr-104.inkcre-client-web.pages.dev/info-base/list/blocks/101/content"
+    },
+    {
+      "class": "ink-button__loading i-mdi-loading animate-spin",
+      "tag": "SPAN",
+      "mask": "url(\"data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8'/%3E%3C/svg%3E\")",
+      "backgroundImage": "none",
+      "background": "rgb(7, 7, 7)",
+      "color": "rgb(7, 7, 7)",
+      "width": 14,
+      "height": 14,
+      "page": "https://preview-client-web-pr-104.inkcre-client-web.pages.dev/info-base/list/blocks/101/content"
+    },
+    {
+      "class": "i-mdi-menu ink-header__menu-icon",
+      "tag": "BUTTON",
+      "mask": "url(\"data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z'/%3E%3C/svg%3E\")",
+      "backgroundImage": "none",
+      "background": "rgba(0, 0, 0, 0)",
+      "color": "rgb(249, 249, 249)",
+      "width": 24,
+      "height": 24,
+      "page": "https://preview-client-web-pr-104.inkcre-client-web.pages.dev/extensions"
+    },
+    {
+      "class": "i-mdi-refresh ink-button__icon",
+      "tag": "SPAN",
+      "mask": "url(\"data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 0 0-8 8a8 8 0 0 0 8 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18a6 6 0 0 1-6-6a6 6 0 0 1 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z'/%3E%3C/svg%3E\")",
+      "backgroundImage": "none",
+      "background": "rgb(59, 59, 59)",
+      "color": "rgb(59, 59, 59)",
+      "width": 14,
+      "height": 14,
+      "page": "https://preview-client-web-pr-104.inkcre-client-web.pages.dev/info-base/list/blocks/101/content"
+    },
+    {
+      "class": "i-mdi-close ink-button__icon",
+      "tag": "SPAN",
+      "mask": "url(\"data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z'/%3E%3C/svg%3E\")",
+      "backgroundImage": "none",
+      "background": "rgb(24, 24, 24)",
+      "color": "rgb(24, 24, 24)",
+      "width": 14,
+      "height": 14,
+      "page": "https://preview-client-web-pr-104.inkcre-client-web.pages.dev/info-base/list/blocks/101/content"
+    },
+    {
+      "class": "i-mdi-refresh ink-button__icon",
+      "tag": "SPAN",
+      "mask": "url(\"data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 0 0-8 8a8 8 0 0 0 8 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18a6 6 0 0 1-6-6a6 6 0 0 1 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z'/%3E%3C/svg%3E\")",
+      "backgroundImage": "none",
+      "background": "rgb(198, 198, 198)",
+      "color": "rgb(198, 198, 198)",
+      "width": 14,
+      "height": 14,
+      "page": "https://preview-client-web-pr-104.inkcre-client-web.pages.dev/info-base/list/blocks/106/content"
+    },
+    {
+      "class": "i-mdi-close ink-button__icon",
+      "tag": "SPAN",
+      "mask": "url(\"data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z'/%3E%3C/svg%3E\")",
+      "backgroundImage": "none",
+      "background": "rgb(249, 249, 249)",
+      "color": "rgb(249, 249, 249)",
+      "width": 14,
+      "height": 14,
+      "page": "https://preview-client-web-pr-104.inkcre-client-web.pages.dev/info-base/list/blocks/106/content"
+    },
+    {
+      "class": "i-mdi-chevron-down ink-dropdown__chevron",
+      "tag": "SPAN",
+      "mask": "url(\"data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z'/%3E%3C/svg%3E\")",
+      "backgroundImage": "none",
+      "background": "rgb(249, 249, 249)",
+      "color": "rgb(249, 249, 249)",
+      "width": 12,
+      "height": 12,
+      "page": "https://preview-client-web-pr-104.inkcre-client-web.pages.dev/extensions"
+    },
+    {
+      "class": "i-mdi-refresh",
+      "tag": "SPAN",
+      "mask": "url(\"data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 0 0-8 8a8 8 0 0 0 8 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18a6 6 0 0 1-6-6a6 6 0 0 1 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z'/%3E%3C/svg%3E\")",
+      "backgroundImage": "none",
+      "background": "rgb(7, 7, 7)",
+      "color": "rgb(7, 7, 7)",
+      "width": 14,
+      "height": 14,
+      "page": "https://preview-client-web-pr-104.inkcre-client-web.pages.dev/jobs/9"
+    },
+    {
+      "class": "i-mdi-chevron-right log-entry__chevron log-entry__chevron--expanded",
+      "tag": "SPAN",
+      "mask": "url(\"data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E\")",
+      "backgroundImage": "none",
+      "background": "rgb(94, 94, 94)",
+      "color": "rgb(94, 94, 94)",
+      "width": 8,
+      "height": 8,
+      "page": "https://preview-client-web-pr-104.inkcre-client-web.pages.dev/jobs/9"
+    },
+    {
+      "class": "i-mdi-refresh",
+      "tag": "SPAN",
+      "mask": "url(\"data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 0 0-8 8a8 8 0 0 0 8 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18a6 6 0 0 1-6-6a6 6 0 0 1 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z'/%3E%3C/svg%3E\")",
+      "backgroundImage": "none",
+      "background": "rgb(249, 249, 249)",
+      "color": "rgb(249, 249, 249)",
+      "width": 14,
+      "height": 14,
+      "page": "https://preview-client-web-pr-104.inkcre-client-web.pages.dev/jobs/9"
+    },
+    {
+      "class": "i-mdi-chevron-right log-entry__chevron log-entry__chevron--expanded",
+      "tag": "SPAN",
+      "mask": "url(\"data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E\")",
+      "backgroundImage": "none",
+      "background": "rgb(198, 198, 198)",
+      "color": "rgb(198, 198, 198)",
+      "width": 8,
+      "height": 8,
+      "page": "https://preview-client-web-pr-104.inkcre-client-web.pages.dev/jobs/9"
+    }
+  ],
+  "package_builtin_icon_selectors": {
+    "checked": 9,
+    "missing": []
+  },
+  "menu_probe": "Changing only background-color from transparent to currentColor restores the existing SVG mask; no new CSS selector or icon asset is injected.",
+  "scope": "Diagnosis only. No source fix or dependency update."
+}
diff --git a/tasks/ui-v2-migration/evidence/icon-menu-before.png b/tasks/ui-v2-migration/evidence/icon-menu-before.png
new file mode 100644
index 00000000..595a4955
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/icon-menu-before.png differ
diff --git a/tasks/ui-v2-migration/evidence/icon-menu-diagnostic-probe.png b/tasks/ui-v2-migration/evidence/icon-menu-diagnostic-probe.png
new file mode 100644
index 00000000..ede86a53
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/icon-menu-diagnostic-probe.png differ
diff --git a/tasks/ui-v2-migration/evidence/job-375.png b/tasks/ui-v2-migration/evidence/job-375.png
new file mode 100644
index 00000000..44e9381a
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/job-375.png differ
diff --git a/tasks/ui-v2-migration/evidence/mail-host-dark-narrow.png b/tasks/ui-v2-migration/evidence/mail-host-dark-narrow.png
new file mode 100644
index 00000000..6e5ca1d2
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/mail-host-dark-narrow.png differ
diff --git a/tasks/ui-v2-migration/evidence/peer-config-narrow.png b/tasks/ui-v2-migration/evidence/peer-config-narrow.png
new file mode 100644
index 00000000..3e7dda94
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/peer-config-narrow.png differ
diff --git a/tasks/ui-v2-migration/evidence/preview/browser.txt b/tasks/ui-v2-migration/evidence/preview/browser.txt
new file mode 100644
index 00000000..b837e6d7
--- /dev/null
+++ b/tasks/ui-v2-migration/evidence/preview/browser.txt
@@ -0,0 +1,36 @@
+card inkcre/twitter
+v0.3.0
+twitter
+ON
+设置
+编辑配置
+变更版本
+卸载
+
+已在 2 个 Peer 上启用。 卸载或变更共享版本前，必须先禁用所有 Peer。
+picker 12:00 AM
+dialogs [
+  '设置 twitter1Prepare2Connect account3Bookmark Source4Review and startSet up bookmark collectionChoose an existing Bookmark Source or create one for this deployment.Bookmark SourceBookmark Source UI migration bookmarks — 用于确认窄屏下长名称与操作按钮的布局Collection scheduleChoose when Core should collect bookmarks each day.Collect bookmarks daily at 12:00 AMTime uses the Core deployment timezone.ContinueClose',
+  '小时 000102030405060708091011121314151617181920212223分钟 000102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859取消确认'
+]
+Twitter time cancel/confirm and Host locale passed
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+Twitter source read failure preserves previous selection/time and manual retry passed
+console Failed to load resource: the server responded with a status of 500 (Internal Server Error)
+Mail renderer, pending and materialization failure passed
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+I3 Sources: list/detail/create, independent read errors, schemas, drafts, pending, failed writes, route changes and deletion passed
+Full content, semantic font override, square containers and responsive pages passed
+errors []
diff --git a/tasks/ui-v2-migration/evidence/preview/delivery.json b/tasks/ui-v2-migration/evidence/preview/delivery.json
new file mode 100644
index 00000000..79b2c95c
--- /dev/null
+++ b/tasks/ui-v2-migration/evidence/preview/delivery.json
@@ -0,0 +1,12 @@
+{
+  "source": "9af7a176f0e1c4118c163d866e5aa331f395b8c2",
+  "preview": "https://preview-client-web-pr-104.inkcre-client-web.pages.dev",
+  "deployment": "https://1c9f3bf6.inkcre-client-web.pages.dev",
+  "workflow": "https://github.com/InKCre/client-web/actions/runs/34759272059",
+  "checks": "https://github.com/InKCre/client-web/actions/runs/34759273081",
+  "host_and_extensions": "deployed Host, same-origin Registry, Mail and Twitter Module Federation; no local asset substitution",
+  "business_data": "isolated network fixtures; real database E2E is separate",
+  "pageerrors": [],
+  "runtime_fix": "cfd7b121dda66254417026c0720b50ee2f330211",
+  "local_database_e2e": "five journeys passed, process exited 0; fresh SSH runtime cleaned up"
+}
diff --git a/tasks/ui-v2-migration/evidence/preview/i3-source-save-failed-375.png b/tasks/ui-v2-migration/evidence/preview/i3-source-save-failed-375.png
new file mode 100644
index 00000000..d95f2a10
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/preview/i3-source-save-failed-375.png differ
diff --git a/tasks/ui-v2-migration/evidence/preview/i3-sources-375.png b/tasks/ui-v2-migration/evidence/preview/i3-sources-375.png
new file mode 100644
index 00000000..0b9d3bdf
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/preview/i3-sources-375.png differ
diff --git a/tasks/ui-v2-migration/evidence/preview/mail-host-dark-narrow.png b/tasks/ui-v2-migration/evidence/preview/mail-host-dark-narrow.png
new file mode 100644
index 00000000..98d412fe
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/preview/mail-host-dark-narrow.png differ
diff --git a/tasks/ui-v2-migration/evidence/recall-dark-narrow.png b/tasks/ui-v2-migration/evidence/recall-dark-narrow.png
new file mode 100644
index 00000000..b1f1460e
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/recall-dark-narrow.png differ
diff --git a/tasks/ui-v2-migration/evidence/search-dark-narrow.png b/tasks/ui-v2-migration/evidence/search-dark-narrow.png
new file mode 100644
index 00000000..580415b3
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/search-dark-narrow.png differ
diff --git a/tasks/ui-v2-migration/evidence/sources-1280.png b/tasks/ui-v2-migration/evidence/sources-1280.png
new file mode 100644
index 00000000..c1338cf4
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/sources-1280.png differ
diff --git a/tasks/ui-v2-migration/evidence/sources-375.png b/tasks/ui-v2-migration/evidence/sources-375.png
new file mode 100644
index 00000000..614dafc3
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/sources-375.png differ
diff --git a/tasks/ui-v2-migration/evidence/sources.mjs b/tasks/ui-v2-migration/evidence/sources.mjs
new file mode 100644
index 00000000..5922ab32
--- /dev/null
+++ b/tasks/ui-v2-migration/evidence/sources.mjs
@@ -0,0 +1,492 @@
+// I3 的任务限定验收：真实构建页面，隔离 PostgREST 响应，不进入正式测试框架。
+import { expect } from '@playwright/test'
+import { writeFile } from 'node:fs/promises'
+
+export async function verifySources({
+  page,
+  source,
+  job,
+  dates,
+  evidence,
+  navigate,
+  expectContained,
+}) {
+  let sources = [
+    {
+      ...source,
+      config: { limit: 20, target: 'https://example.invalid/bookmarks/完整配置不会在列表重复陈列' },
+    },
+    { ...source, id: 8, nickname: null, config: { limit: 10 } },
+    { ...source, id: 9, nickname: '阅读清单', config: { limit: 50 } },
+  ]
+  let jobs = [job, { ...job, id: 10, parameters: { source: 8 }, status: 'running' }]
+  let crons = []
+  let nextId = 20
+  const types = [
+    {
+      id: source.type,
+      description: 'Bookmark fixture',
+      config_schema: {
+        type: 'object',
+        properties: { limit: { type: 'integer', minimum: 1 } },
+        required: ['limit'],
+      },
+      collect_config_schema: {
+        type: 'object',
+        properties: { batchSize: { type: 'integer', minimum: 1 } },
+        required: ['batchSize'],
+      },
+      backfill_config_schema: null,
+    },
+  ]
+  types.push({
+    id: 'fixture.alternative.Source',
+    description: 'Different config contract',
+    config_schema: { type: 'object' },
+    collect_config_schema: { type: 'object' },
+    backfill_config_schema: { type: 'object' },
+  })
+  const writes = []
+  let fault
+  function intercept(key, method, status = 200) {
+    let resume, received
+    const held = new Promise((resolve) => {
+      resume = resolve
+    })
+    const started = new Promise((resolve, reject) => {
+      const timer = setTimeout(() => reject(new Error(`Expected request ${method} ${key}`)), 10000)
+      received = () => {
+        clearTimeout(timer)
+        resolve()
+      }
+    })
+    fault = { key, method, status, held, received }
+    return { started, resume }
+  }
+  async function handler(route) {
+    const request = route.request(),
+      url = new URL(request.url()),
+      kind = url.pathname.split('/').at(-1)
+    if (!['sources', 'sources_types', 'jobs', 'job_types', 'crons'].includes(kind))
+      return route.fallback()
+    const method = request.method()
+    const body = method === 'POST' ? request.postDataJSON() : null
+    const id = url.searchParams.get('id')?.replace('eq.', '') ?? body?.id
+    const filter = url.searchParams.get('parameters') ?? url.searchParams.get('job_parameters')
+    const sourceId = filter ? JSON.parse(filter.slice(3)).source : null
+    const key = `${kind}${id ? `:${id}` : sourceId ? `:source:${sourceId}` : ''}`
+    if (method !== 'GET') writes.push({ key, method, body })
+    if (fault?.key === key && fault.method === method) {
+      const current = fault
+      fault = null
+      current.received()
+      await current.held
+      if (current.status !== 200)
+        return route.fulfill({
+          status: current.status,
+          json: { code: '42501', message: 'Controlled database rejection' },
+          headers: { 'access-control-allow-origin': '*' },
+        })
+    }
+    let data
+    if (kind === 'sources') {
+      if (method === 'POST') {
+        const saved = { ...body, id: body.id ?? nextId++, block: null, ...dates }
+        sources = [...sources.filter((item) => item.id !== saved.id), saved]
+        data = [saved]
+      } else if (method === 'DELETE') {
+        sources = sources.filter((item) => item.id !== Number(id))
+        data = []
+      } else data = sources.filter((item) => !id || item.id === Number(id))
+    } else if (kind === 'sources_types') data = types
+    else if (kind === 'job_types')
+      data = [
+        {
+          id,
+          description: 'Fixture collection',
+          parameters_schema: {},
+          default_timeout_seconds: 60,
+        },
+      ]
+    else if (kind === 'jobs') {
+      if (method === 'POST') {
+        const created = {
+          ...body,
+          id: nextId++,
+          status: 'pending',
+          created_at: dates.created_at,
+          started_at: null,
+          closed_at: null,
+        }
+        jobs = [created, ...jobs]
+        data = [created]
+      } else {
+        const filter = url.searchParams.get('parameters')
+        const sourceId = filter ? JSON.parse(filter.slice(3)).source : null
+        data = jobs.filter(
+          (item) =>
+            (!id || item.id === Number(id)) && (!sourceId || item.parameters.source === sourceId)
+        )
+      }
+    } else if (kind === 'crons') {
+      if (method === 'POST') {
+        const created = {
+          ...body,
+          id: nextId++,
+          last_job: null,
+          last_scheduled_for: null,
+          ...dates,
+        }
+        crons.push(created)
+        data = [created]
+      } else if (method === 'DELETE') {
+        crons = crons.filter((item) => item.id !== Number(id))
+        data = []
+      } else {
+        const filter = url.searchParams.get('job_parameters')
+        const sourceId = filter ? JSON.parse(filter.slice(3)).source : null
+        data = crons.filter((item) => !sourceId || item.job_parameters.source === sourceId)
+      }
+    }
+    if (request.headers().accept?.includes('vnd.pgrst.object') && Array.isArray(data))
+      data = data[0] ?? null
+    return route.fulfill({ json: data, headers: { 'access-control-allow-origin': '*' } })
+  }
+  const pattern = 'https://api-migration.invalid/rest/**'
+  await page.route(pattern, handler)
+  const detail = page.locator('.source-view__details')
+  const editor = detail.locator('.cm-content')
+  const save = detail.getByRole('button', { name: '保存', exact: true })
+  const sourceLink = () => page.locator('#source-7 .source-card__name')
+  async function backToList() {
+    await navigate('/')
+    await navigate('/sources')
+  }
+  async function rejectRead(key, visit, region, text) {
+    const gate = intercept(key, 'GET', 403)
+    await visit()
+    await gate.started
+    gate.resume()
+    await expect(region.getByRole('alert')).toContainText(text)
+    await region.getByRole('button', { name: '重试', exact: true }).click()
+    await expect(region.getByRole('alert')).toHaveCount(0)
+  }
+  try {
+    await page.setViewportSize({ width: 1280, height: 1000 })
+    await page.emulateMedia({ colorScheme: 'light' })
+    const listLoading = intercept('sources', 'GET')
+    await backToList()
+    await listLoading.started
+    await expect(page.locator('.sources-view').getByRole('status')).toBeVisible()
+    listLoading.resume()
+    await expect(page.locator('.source-card')).toHaveCount(3)
+    await expect(page.locator('.sources-view .cm-editor')).toHaveCount(0)
+    await expect(
+      page.locator('.source-card').getByRole('button', { name: '删除', exact: true })
+    ).toHaveCount(0)
+    await expect(page.locator('#source-8')).toContainText('未命名数据源')
+    await expect(
+      page.locator('#source-8').getByRole('link', { name: '查看当前采集任务' })
+    ).toBeVisible()
+    await expectContained('.sources-view, .source-card')
+    await page.screenshot({ animations: 'disabled', path: `${evidence}/i3-sources-1280.png` })
+    await page.setViewportSize({ width: 375, height: 900 })
+    await page.emulateMedia({ colorScheme: 'dark' })
+    await expectContained('.sources-view, .source-card')
+    await page.screenshot({ animations: 'disabled', path: `${evidence}/i3-sources-375.png` })
+    await rejectRead('sources', backToList, page.locator('.sources-view'), '无法加载数据源')
+    const previous = sources
+    sources = []
+    await backToList()
+    await expect(page.getByText('还没有数据源。创建后即可开始采集。')).toBeVisible()
+    sources = previous
+    await backToList()
+    await expect(page.locator('.source-card')).toHaveCount(3)
+
+    await rejectRead(
+      'sources:7',
+      () => sourceLink().press('Enter'),
+      page.locator('.source-view'),
+      '无法读取此数据源'
+    )
+    await expect(editor).toContainText('完整配置不会在列表重复陈列')
+    await expect(save).toBeDisabled()
+    await expectContained('.source-view, .source-view__details, .source-view__activity')
+    await editor.fill('{')
+    await expect(save).toBeDisabled()
+    await editor.fill('{"limit":0}')
+    await expect(save).toBeDisabled()
+    await detail.getByRole('textbox', { name: '昵称', exact: true }).fill('已保存的来源名称')
+    const draft = '{\n  "limit": 30,\n  "note": "失败与窄屏变化都保留这份草稿"\n}'
+    await editor.fill(draft)
+    await expect(save).toBeEnabled()
+    await expect(page.getByRole('heading', { name: source.nickname, exact: true })).toBeVisible()
+    const rejectedSave = intercept('sources:7', 'POST', 503)
+    await save.click()
+    await rejectedSave.started
+    await expect(save).toBeDisabled()
+    await expect(editor).toHaveAttribute('contenteditable', 'false')
+    await page.locator('.source-view__back').click()
+    await expect(page).toHaveURL(/\/sources\/7$/)
+    await page.setViewportSize({ width: 1280, height: 1000 })
+    rejectedSave.resume()
+    await expect(detail.getByRole('alert')).toContainText('保存失败')
+    expect(
+      await detail.getByRole('alert').evaluate((element) => {
+        const probe = document.createElement('span')
+        probe.style.color = 'var(--sys-color-feedback-error)'
+        element.append(probe)
+        const colors = [getComputedStyle(element).color, getComputedStyle(probe).color]
+        probe.remove()
+        return colors
+      })
+    ).toEqual(
+      await detail.getByRole('alert').evaluate((element) => {
+        const color = getComputedStyle(element).color
+        return [color, color]
+      })
+    )
+    await expect(editor).toHaveText(draft, { useInnerText: true })
+    await page.setViewportSize({ width: 375, height: 900 })
+    await expectContained('.source-view, .source-view__details')
+    await editor.press('Escape')
+    await expect(page.locator('.cm-tooltip-autocomplete')).toHaveCount(0)
+    await detail.getByRole('textbox', { name: '昵称', exact: true }).focus()
+    await page.screenshot({
+      animations: 'disabled',
+      path: `${evidence}/i3-source-save-failed-375.png`,
+    })
+    await save.click()
+    await expect(page.getByRole('heading', { name: '已保存的来源名称', exact: true })).toBeVisible()
+    await expect(detail.getByRole('status')).toHaveText('修改已保存。')
+    await expect(save).toBeDisabled()
+    expect(
+      writes.filter((item) => item.key === 'sources:7' && item.method === 'POST')
+    ).toHaveLength(2)
+    expect(sources.find((item) => item.id === 7).config).toEqual(JSON.parse(draft))
+    await editor.fill('{"limit":40,"unsaved":true}')
+    page.once('dialog', (dialog) => dialog.dismiss())
+    await page.locator('.source-view__back').click()
+    await expect(editor).toContainText('unsaved')
+    page.once('dialog', (dialog) => dialog.accept())
+    await page.locator('.source-view__back').click()
+    await expect(page).toHaveURL(/\/sources(?:#source-\d+)?$/)
+    await expect(sourceLink()).toHaveText('已保存的来源名称')
+    await expect(sourceLink()).toBeFocused()
+
+    // Schema/secondary-region failures remain visible without erasing the editor.
+    const typesFailure = intercept('sources_types', 'GET', 403)
+    await sourceLink().click()
+    await typesFailure.started
+    typesFailure.resume()
+    await expect(detail.getByRole('alert')).toContainText('无法读取数据源类型')
+    await editor.fill('{"limit":31,"kept":true}')
+    await expect(save).toBeDisabled()
+    await detail.getByRole('button', { name: '重试', exact: true }).click()
+    await expect(save).toBeEnabled()
+    await expect(editor).toContainText('kept')
+    await save.click()
+    await expect(detail.getByRole('status')).toHaveText('修改已保存。')
+    await expect(save).toBeDisabled()
+    await page.locator('.source-view__back').click()
+    await expect(sourceLink()).toBeVisible()
+    await expect(page.locator('.source-card__operations [role="status"]')).toHaveCount(0)
+    const jobsFailure = intercept('jobs:source:7', 'GET', 403)
+    await sourceLink().click()
+    await jobsFailure.started
+    jobsFailure.resume()
+    const jobsRegion = page.locator('.source-view__jobs')
+    await expect(jobsRegion.getByRole('alert')).toContainText('无法读取采集任务')
+    await editor.fill('{"limit":32,"keptDuringRetry":true}')
+    await jobsRegion.getByRole('button', { name: '重试', exact: true }).click()
+    await expect(jobsRegion.getByRole('alert')).toHaveCount(0)
+    await expect(editor).toContainText('keptDuringRetry')
+    await save.click()
+    await expect(detail.getByRole('status')).toHaveText('修改已保存。')
+    await expect(save).toBeDisabled()
+    await page.locator('.source-view__back').click()
+    await rejectRead(
+      'crons:source:7',
+      () => sourceLink().click(),
+      page.locator('.source-view__schedules'),
+      '无法读取定时采集计划'
+    )
+
+    // A route parameter change must win over an earlier outstanding read.
+    await page.locator('.source-view__back').click()
+    const lateSource = intercept('sources:7', 'GET')
+    await sourceLink().click()
+    await lateSource.started
+    await navigate('/sources/8')
+    await expect(page.getByRole('heading', { name: '未命名数据源', exact: true })).toBeVisible()
+    lateSource.resume()
+    await expect(page.locator('.source-view__metadata')).toContainText('#8')
+    await navigate('/sources/7')
+    await expect(page.getByRole('heading', { name: '已保存的来源名称', exact: true })).toBeVisible()
+
+    // Unsaved type changes must not change the saved source's collection contract.
+    const typePicker = detail.getByRole('combobox', { name: '类型', exact: true })
+    await typePicker.click()
+    await page.getByRole('option', { name: 'fixture.alternative.Source', exact: true }).click()
+    await jobsRegion.getByRole('button', { name: '新建任务', exact: true }).click()
+    const unsavedTypeJob = page.getByRole('dialog', { name: '创建新采集任务', exact: true })
+    await expect(
+      unsavedTypeJob.getByRole('button', { name: '创建任务', exact: true })
+    ).toBeDisabled()
+    await unsavedTypeJob.getByRole('combobox', { name: '采集方式', exact: true }).click()
+    await expect(unsavedTypeJob.getByRole('option')).toHaveCount(1)
+    await unsavedTypeJob.getByRole('option').click()
+    await unsavedTypeJob.getByRole('button', { name: '取消', exact: true }).click()
+    await typePicker.click()
+    await page.getByRole('option', { name: source.type, exact: true }).click()
+    // Job creation uses the loaded type's schema; unsupported backfill is absent.
+    await jobsRegion.getByRole('button', { name: '新建任务', exact: true }).click()
+    const jobDialog = page.getByRole('dialog', { name: '创建新采集任务', exact: true })
+    const createJob = jobDialog.getByRole('button', { name: '创建任务', exact: true })
+    await expect(createJob).toBeDisabled()
+    await jobDialog.getByRole('combobox', { name: '采集方式', exact: true }).click()
+    await expect(jobDialog.getByRole('option')).toHaveCount(1)
+    await jobDialog.getByRole('option').click()
+    await jobDialog.locator('.cm-content').fill('{"batchSize":3}')
+    await expect(createJob).toBeEnabled()
+    const jobFailure = intercept('jobs', 'POST', 503)
+    await createJob.click()
+    await jobFailure.started
+    await page.keyboard.press('Escape')
+    await expect(jobDialog).toBeVisible()
+    await expect(createJob).toBeDisabled()
+    jobFailure.resume()
+    await expect(jobDialog.getByRole('alert')).toContainText('先查看任务列表')
+    await expect(jobDialog.locator('.cm-content')).toContainText('"batchSize":3')
+    await createJob.click()
+    await expect(page).toHaveURL(/\/jobs\/20$/)
+    expect(jobs[0].parameters).toEqual({ source: 7, config: { batchSize: 3 } })
+    await navigate('/sources/7')
+    await expect(editor).toBeVisible()
+
+    // Existing schedules stay visible; only the creation fields are deferred.
+    const schedules = page.locator('.source-view__schedules')
+    await schedules.getByRole('button', { name: '添加定时采集', exact: true }).click()
+    const cronDialog = page.getByRole('dialog', { name: '添加定时采集', exact: true })
+    await cronDialog.getByRole('textbox').fill('30 7 * * *')
+    const cronFailure = intercept('crons', 'POST', 503)
+    await cronDialog.getByRole('button', { name: '添加定时采集', exact: true }).click()
+    await cronFailure.started
+    await page.keyboard.press('Escape')
+    await expect(cronDialog).toBeVisible()
+    cronFailure.resume()
+    await expect(cronDialog.getByRole('alert')).toContainText('先检查计划列表')
+    await expect(cronDialog.getByRole('textbox')).toHaveValue('30 7 * * *')
+    await cronDialog.getByRole('button', { name: '添加定时采集', exact: true }).click()
+    await expect(cronDialog).not.toBeVisible()
+    await expect(schedules).toContainText('30 7 * * *')
+    await schedules.getByRole('button', { name: '删除', exact: true }).click()
+    const cronDelete = page.getByRole('dialog', { name: '删除定时采集', exact: true })
+    const deleteCronFailure = intercept('crons:21', 'DELETE', 403)
+    await cronDelete.getByRole('button', { name: '删除', exact: true }).click()
+    await deleteCronFailure.started
+    await page.keyboard.press('Escape')
+    await expect(cronDelete).toBeVisible()
+    deleteCronFailure.resume()
+    await expect(cronDelete.getByRole('alert')).toContainText('删除未完成')
+    await cronDelete.getByRole('button', { name: '删除', exact: true }).click()
+    await expect(cronDelete).not.toBeVisible()
+    await expect(schedules).toContainText('尚未设置定时采集')
+    await page.setViewportSize({ width: 1280, height: 1000 })
+    await page.emulateMedia({ colorScheme: 'light' })
+    await expectContained('.source-view, .source-view__details, .source-view__activity')
+    await page.screenshot({ animations: 'disabled', path: `${evidence}/i3-source-1280.png` })
+
+    await page.locator('.source-view__back').click()
+    await page.getByRole('button', { name: '创建数据源', exact: true }).click()
+    const createDialog = page.getByRole('dialog', { name: '创建数据源', exact: true })
+    await createDialog.getByRole('textbox', { name: '昵称', exact: true }).fill('新建来源的草稿')
+    await createDialog.getByRole('combobox', { name: '类型', exact: true }).click()
+    await createDialog.getByRole('option', { name: source.type, exact: true }).click()
+    await createDialog.locator('.cm-content').fill('{"limit":15}')
+    await page.setViewportSize({ width: 375, height: 900 })
+    await expectContained('.create-source, dialog[open]')
+    page.once('dialog', (dialog) => dialog.dismiss())
+    await page.keyboard.press('Escape')
+    await expect(createDialog).toBeVisible()
+    await expect(createDialog.locator('.cm-content')).toContainText('"limit":15')
+    const createFailure = intercept('sources', 'POST', 503)
+    await createDialog.getByRole('button', { name: '创建数据源', exact: true }).click()
+    await createFailure.started
+    await page.keyboard.press('Escape')
+    await expect(createDialog).toBeVisible()
+    createFailure.resume()
+    await expect(createDialog.getByRole('alert')).toContainText('先检查来源列表')
+    await expect(
+      createDialog.getByRole('button', { name: '创建数据源', exact: true })
+    ).toBeEnabled()
+    await expect(createDialog).toHaveCSS('width', /.+px/)
+    expect(
+      await createDialog.evaluate((element) => element.getBoundingClientRect().width)
+    ).toBeGreaterThan(300)
+    await page.screenshot({ animations: 'disabled', path: `${evidence}/i3-source-create-375.png` })
+    await createDialog.getByRole('button', { name: '创建数据源', exact: true }).click()
+    await expect(createDialog).not.toBeVisible()
+    await expect(page.locator('#source-22')).toContainText('新建来源的草稿')
+    await page.locator('#source-22 .source-card__name').click()
+    await detail.getByRole('button', { name: '删除', exact: true }).click()
+    const sourceDelete = page.getByRole('dialog', { name: '删除数据源', exact: true })
+    await expect(sourceDelete).toContainText('新建来源的草稿 · #22')
+    const deleteFailure = intercept('sources:22', 'DELETE', 403)
+    await sourceDelete.getByRole('button', { name: '删除', exact: true }).click()
+    await deleteFailure.started
+    await page.keyboard.press('Escape')
+    await expect(sourceDelete).toBeVisible()
+    deleteFailure.resume()
+    await expect(sourceDelete.getByRole('alert')).toContainText('删除未完成')
+    await expect(page).toHaveURL(/\/sources\/22$/)
+    await expectContained('dialog[open]')
+    await page.screenshot({
+      animations: 'disabled',
+      path: `${evidence}/i3-source-delete-failed-375.png`,
+    })
+    await sourceDelete.getByRole('button', { name: '删除', exact: true }).click()
+    await expect(page).toHaveURL(/\/sources(?:#source-\d+)?$/)
+    await expect(page.locator('#source-22')).toHaveCount(0)
+    expect(sources).toHaveLength(3)
+    await expect(page.locator('.source-card__operations [role="status"]')).toHaveCount(0)
+    const run = page.locator('#source-9').getByRole('button', { name: '立即采集', exact: true })
+    const rejectedRun = intercept('jobs', 'POST', 503)
+    await run.click()
+    await rejectedRun.started
+    await expect(run).toBeDisabled()
+    rejectedRun.resume()
+    await expect(page.locator('#source-9').getByRole('alert')).toContainText('先查看任务列表')
+    await run.click()
+    await expect(page).toHaveURL(/\/jobs\/23$/)
+    expect(jobs[0].parameters).toEqual({ source: 9, config: {} })
+    const rowFailure = intercept('jobs:source:8', 'GET', 403)
+    await navigate('/sources')
+    await rowFailure.started
+    rowFailure.resume()
+    const failedRow = page.locator('.source-card').filter({ has: page.getByRole('alert') })
+    await expect(failedRow).toHaveCount(1)
+    await failedRow.getByRole('button', { name: '重试', exact: true }).click()
+    await expect(page.locator('.source-card').getByRole('alert')).toHaveCount(0)
+    await writeFile(
+      `${evidence}/i3-verification.json`,
+      JSON.stringify(
+        {
+          status: 'passed',
+          viewports: [1280, 375],
+          themes: ['light', 'dark'],
+          sources: sources.map(({ id, nickname, config }) => ({ id, nickname, config })),
+          writes,
+        },
+        null,
+        2
+      ) + '\n'
+    )
+    console.log(
+      'I3 Sources: list/detail/create, independent read errors, schemas, drafts, pending, failed writes, route changes and deletion passed'
+    )
+  } finally {
+    fault?.received()
+    await page.unroute(pattern, handler)
+  }
+}
diff --git a/tasks/ui-v2-migration/evidence/tweet-host-dark-narrow.png b/tasks/ui-v2-migration/evidence/tweet-host-dark-narrow.png
new file mode 100644
index 00000000..6846c2bc
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/tweet-host-dark-narrow.png differ
diff --git a/tasks/ui-v2-migration/evidence/twitter-steps-375.png b/tasks/ui-v2-migration/evidence/twitter-steps-375.png
new file mode 100644
index 00000000..a72cb23f
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/twitter-steps-375.png differ
diff --git a/tasks/ui-v2-migration/evidence/twitter-time-picker.png b/tasks/ui-v2-migration/evidence/twitter-time-picker.png
new file mode 100644
index 00000000..0108c72a
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/twitter-time-picker.png differ
diff --git a/tasks/ui-v2-migration/evidence/ui-2.0.1/browser-output.txt b/tasks/ui-v2-migration/evidence/ui-2.0.1/browser-output.txt
new file mode 100644
index 00000000..df96f9ea
--- /dev/null
+++ b/tasks/ui-v2-migration/evidence/ui-2.0.1/browser-output.txt
@@ -0,0 +1,37 @@
+Released Header: visible 24px icon, focus and sidebar click/Enter/Space passed in light/dark at 375/1280px
+card inkcre/twitter
+v0.3.0
+twitter
+ON
+设置
+编辑配置
+变更版本
+卸载
+
+已在 2 个 Peer 上启用。 卸载或变更共享版本前，必须先禁用所有 Peer。
+picker 12:00 AM
+dialogs [
+  '设置 twitter1Prepare2Connect account3Bookmark Source4Review and startSet up bookmark collectionChoose an existing Bookmark Source or create one for this deployment.Bookmark SourceBookmark Source UI migration bookmarks — 用于确认窄屏下长名称与操作按钮的布局Collection scheduleChoose when Core should collect bookmarks each day.Collect bookmarks daily at 12:00 AMTime uses the Core deployment timezone.ContinueClose',
+  '小时 000102030405060708091011121314151617181920212223分钟 000102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859取消确认'
+]
+Twitter time cancel/confirm and Host locale passed
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+Twitter source read failure preserves previous selection/time and manual retry passed
+console Failed to load resource: the server responded with a status of 500 (Internal Server Error)
+Mail renderer, pending and materialization failure passed
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+console Failed to load resource: the server responded with a status of 503 (Service Unavailable)
+console Failed to load resource: the server responded with a status of 403 (Forbidden)
+I3 Sources: list/detail/create, independent read errors, schemas, drafts, pending, failed writes, route changes and deletion passed
+Full content, semantic font override, square containers and responsive pages passed
+errors []
diff --git a/tasks/ui-v2-migration/evidence/ui-2.0.1/delivery.json b/tasks/ui-v2-migration/evidence/ui-2.0.1/delivery.json
new file mode 100644
index 00000000..4de49381
--- /dev/null
+++ b/tasks/ui-v2-migration/evidence/ui-2.0.1/delivery.json
@@ -0,0 +1,11 @@
+{
+  "sourceHead": "d0272303e9918ef36113866c6a98e62f8657129c",
+  "previewRun": "https://github.com/InKCre/client-web/actions/runs/34799553542",
+  "deployment": "https://52f3ec3f.inkcre-client-web.pages.dev",
+  "testedURL": "https://preview-client-web-pr-104.inkcre-client-web.pages.dev",
+  "uiVersion": "2.0.1",
+  "extensionAssets": "deployed same-origin Registry and Mail/Twitter Module Federation assets",
+  "businessData": "isolated network fixtures",
+  "browserExitCode": 0,
+  "pageErrors": []
+}
diff --git a/tasks/ui-v2-migration/evidence/ui-2.0.1/i3-sources-1280.png b/tasks/ui-v2-migration/evidence/ui-2.0.1/i3-sources-1280.png
new file mode 100644
index 00000000..6ad94653
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/ui-2.0.1/i3-sources-1280.png differ
diff --git a/tasks/ui-v2-migration/evidence/ui-2.0.1/i3-verification.json b/tasks/ui-v2-migration/evidence/ui-2.0.1/i3-verification.json
new file mode 100644
index 00000000..ffa90962
--- /dev/null
+++ b/tasks/ui-v2-migration/evidence/ui-2.0.1/i3-verification.json
@@ -0,0 +1,233 @@
+{
+  "status": "passed",
+  "viewports": [1280, 375],
+  "themes": ["light", "dark"],
+  "sources": [
+    {
+      "id": 8,
+      "nickname": null,
+      "config": {
+        "limit": 10
+      }
+    },
+    {
+      "id": 9,
+      "nickname": "阅读清单",
+      "config": {
+        "limit": 50
+      }
+    },
+    {
+      "id": 7,
+      "nickname": "已保存的来源名称",
+      "config": {
+        "limit": 32,
+        "keptDuringRetry": true
+      }
+    }
+  ],
+  "writes": [
+    {
+      "key": "sources:7",
+      "method": "POST",
+      "body": {
+        "id": 7,
+        "type": "extensions.twitter.bookmark.Source",
+        "nickname": "已保存的来源名称",
+        "config": {
+          "limit": 30,
+          "note": "失败与窄屏变化都保留这份草稿"
+        },
+        "state": {},
+        "storage": null,
+        "block": null,
+        "created_at": "2026-09-13T00:00:00.000Z",
+        "updated_at": "2026-09-13T00:00:00.000Z"
+      }
+    },
+    {
+      "key": "sources:7",
+      "method": "POST",
+      "body": {
+        "id": 7,
+        "type": "extensions.twitter.bookmark.Source",
+        "nickname": "已保存的来源名称",
+        "config": {
+          "limit": 30,
+          "note": "失败与窄屏变化都保留这份草稿"
+        },
+        "state": {},
+        "storage": null,
+        "block": null,
+        "created_at": "2026-09-13T00:00:00.000Z",
+        "updated_at": "2026-09-13T00:00:00.000Z"
+      }
+    },
+    {
+      "key": "sources:7",
+      "method": "POST",
+      "body": {
+        "id": 7,
+        "type": "extensions.twitter.bookmark.Source",
+        "nickname": "已保存的来源名称",
+        "config": {
+          "limit": 31,
+          "kept": true
+        },
+        "state": {},
+        "storage": null,
+        "block": null,
+        "created_at": "2026-09-13T00:00:00.000Z",
+        "updated_at": "2026-09-13T00:00:00.000Z"
+      }
+    },
+    {
+      "key": "sources:7",
+      "method": "POST",
+      "body": {
+        "id": 7,
+        "type": "extensions.twitter.bookmark.Source",
+        "nickname": "已保存的来源名称",
+        "config": {
+          "limit": 32,
+          "keptDuringRetry": true
+        },
+        "state": {},
+        "storage": null,
+        "block": null,
+        "created_at": "2026-09-13T00:00:00.000Z",
+        "updated_at": "2026-09-13T00:00:00.000Z"
+      }
+    },
+    {
+      "key": "jobs",
+      "method": "POST",
+      "body": {
+        "type": "core.source.collect.v1",
+        "parameters": {
+          "source": 7,
+          "config": {
+            "batchSize": 3
+          }
+        },
+        "timeout_seconds": 60,
+        "state": {}
+      }
+    },
+    {
+      "key": "jobs",
+      "method": "POST",
+      "body": {
+        "type": "core.source.collect.v1",
+        "parameters": {
+          "source": 7,
+          "config": {
+            "batchSize": 3
+          }
+        },
+        "timeout_seconds": 60,
+        "state": {}
+      }
+    },
+    {
+      "key": "crons",
+      "method": "POST",
+      "body": {
+        "schedule": "30 7 * * *",
+        "enabled": true,
+        "job_type": "core.source.collect.v1",
+        "job_parameters": {
+          "source": 7,
+          "config": {}
+        },
+        "job_timeout_seconds": null
+      }
+    },
+    {
+      "key": "crons",
+      "method": "POST",
+      "body": {
+        "schedule": "30 7 * * *",
+        "enabled": true,
+        "job_type": "core.source.collect.v1",
+        "job_parameters": {
+          "source": 7,
+          "config": {}
+        },
+        "job_timeout_seconds": null
+      }
+    },
+    {
+      "key": "crons:21",
+      "method": "DELETE",
+      "body": null
+    },
+    {
+      "key": "crons:21",
+      "method": "DELETE",
+      "body": null
+    },
+    {
+      "key": "sources",
+      "method": "POST",
+      "body": {
+        "type": "extensions.twitter.bookmark.Source",
+        "nickname": "新建来源的草稿",
+        "config": {
+          "limit": 15
+        },
+        "state": {},
+        "storage": null
+      }
+    },
+    {
+      "key": "sources",
+      "method": "POST",
+      "body": {
+        "type": "extensions.twitter.bookmark.Source",
+        "nickname": "新建来源的草稿",
+        "config": {
+          "limit": 15
+        },
+        "state": {},
+        "storage": null
+      }
+    },
+    {
+      "key": "sources:22",
+      "method": "DELETE",
+      "body": null
+    },
+    {
+      "key": "sources:22",
+      "method": "DELETE",
+      "body": null
+    },
+    {
+      "key": "jobs",
+      "method": "POST",
+      "body": {
+        "type": "core.source.collect.v1",
+        "parameters": {
+          "source": 9,
+          "config": {}
+        },
+        "timeout_seconds": 60,
+        "state": {}
+      }
+    },
+    {
+      "key": "jobs",
+      "method": "POST",
+      "body": {
+        "type": "core.source.collect.v1",
+        "parameters": {
+          "source": 9,
+          "config": {}
+        },
+        "timeout_seconds": 60,
+        "state": {}
+      }
+    }
+  ]
+}
diff --git a/tasks/ui-v2-migration/evidence/ui-2.0.1/installed.json b/tasks/ui-v2-migration/evidence/ui-2.0.1/installed.json
new file mode 100644
index 00000000..3d544b40
--- /dev/null
+++ b/tasks/ui-v2-migration/evidence/ui-2.0.1/installed.json
@@ -0,0 +1,39 @@
+{
+  "registry": {
+    "version": "2.0.1",
+    "dist": {
+      "integrity": "sha512-8KELh89mLA1xjoB8uDFmh8HJfHn6UAeJRWVaKM3w4UKLt11tsuw9/22rEUDfHp9U5y4d5MecQRrKt3MH2zQO5Q==",
+      "shasum": "2e6e9968460859dd8c17392849c3807ca4a95799",
+      "tarball": "https://npm.pkg.github.com/download/@inkcre/ui-web/2.0.1/2e6e9968460859dd8c17392849c3807ca4a95799"
+    }
+  },
+  "installations": [
+    {
+      "consumer": "apps/client-web",
+      "version": "2.0.1",
+      "cssSha256": "73e12184248c524c48c338a0f9abfa8df58618b8830632ab594d3a668168eb25",
+      "jsSha256": "a4cc591ce388a2a81f37882b09a5fe81f33f2fe98ff48d6971073bbddaafb299"
+    },
+    {
+      "consumer": "extensions/mail",
+      "version": "2.0.1",
+      "cssSha256": "73e12184248c524c48c338a0f9abfa8df58618b8830632ab594d3a668168eb25",
+      "jsSha256": "a4cc591ce388a2a81f37882b09a5fe81f33f2fe98ff48d6971073bbddaafb299"
+    },
+    {
+      "consumer": "extensions/twitter",
+      "version": "2.0.1",
+      "cssSha256": "73e12184248c524c48c338a0f9abfa8df58618b8830632ab594d3a668168eb25",
+      "jsSha256": "a4cc591ce388a2a81f37882b09a5fe81f33f2fe98ff48d6971073bbddaafb299"
+    },
+    {
+      "consumer": "packages/ext-dev-utils",
+      "version": "2.0.1",
+      "cssSha256": "73e12184248c524c48c338a0f9abfa8df58618b8830632ab594d3a668168eb25",
+      "jsSha256": "a4cc591ce388a2a81f37882b09a5fe81f33f2fe98ff48d6971073bbddaafb299"
+    }
+  ],
+  "releaseSource": "85453b50eee3a8e1db21cdedaca05ba0b6051dd6",
+  "releaseRun": "https://github.com/InKCre/ui/actions/runs/34798879363",
+  "release": "https://github.com/InKCre/ui/releases/tag/%40inkcre/ui-web%402.0.1"
+}
diff --git a/tasks/ui-v2-migration/evidence/ui-2.0.1/mail-host-dark-narrow.png b/tasks/ui-v2-migration/evidence/ui-2.0.1/mail-host-dark-narrow.png
new file mode 100644
index 00000000..1d5c2980
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/ui-2.0.1/mail-host-dark-narrow.png differ
diff --git a/tasks/ui-v2-migration/evidence/ui-2.0.1/released-header-dark-1280.png b/tasks/ui-v2-migration/evidence/ui-2.0.1/released-header-dark-1280.png
new file mode 100644
index 00000000..835f578b
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/ui-2.0.1/released-header-dark-1280.png differ
diff --git a/tasks/ui-v2-migration/evidence/ui-2.0.1/released-header-dark-375.png b/tasks/ui-v2-migration/evidence/ui-2.0.1/released-header-dark-375.png
new file mode 100644
index 00000000..30dd8e11
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/ui-2.0.1/released-header-dark-375.png differ
diff --git a/tasks/ui-v2-migration/evidence/ui-2.0.1/released-header-light-1280.png b/tasks/ui-v2-migration/evidence/ui-2.0.1/released-header-light-1280.png
new file mode 100644
index 00000000..8268521d
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/ui-2.0.1/released-header-light-1280.png differ
diff --git a/tasks/ui-v2-migration/evidence/ui-2.0.1/released-header-light-375.png b/tasks/ui-v2-migration/evidence/ui-2.0.1/released-header-light-375.png
new file mode 100644
index 00000000..bb68e8aa
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/ui-2.0.1/released-header-light-375.png differ
diff --git a/tasks/ui-v2-migration/evidence/ui-2.0.1/twitter-time-picker.png b/tasks/ui-v2-migration/evidence/ui-2.0.1/twitter-time-picker.png
new file mode 100644
index 00000000..f2bc426b
Binary files /dev/null and b/tasks/ui-v2-migration/evidence/ui-2.0.1/twitter-time-picker.png differ
diff --git a/tasks/ui-v2-migration/packet.md b/tasks/ui-v2-migration/packet.md
new file mode 100644
index 00000000..270be5aa
--- /dev/null
+++ b/tasks/ui-v2-migration/packet.md
@@ -0,0 +1,159 @@
+# UI 2.0 真实下游迁移
+
+2026-09-13，用户授权发布 UI，并在独立分支与 worktree 中迁移 client-web 及各 extensions。本工作包拥有消费者实施与验证；UI 生产者的 `tasks/ui-foundations/packet.md` 继续拥有总图和发布依赖。
+
+I4 已完成：Twitter setup、Mail 全部 renderer 与 Graph 已按设计原则重组，真实远端全旅程与完整 CI 通过。三组实现和状态验收见文末。已安装正式 UI 2.0.1，完整 check 与本地 Host／Mail／Twitter 浏览器验收通过，已推送 PR #104 并通过真实远端页面复验。此前 I3 已通过 PR preview；SSH 已恢复，本机真实数据库 E2E 也通过。结果与交付身份见文末。该结论限定于来源工作流和关联修复，不代表全部消费者的视觉复审完成。
+
+## 目标与边界
+
+从锁定 UI 1.4.0 的旧 Token／交互调用，迁移到 registry 正式发布的 2.0.0，并使 Web、mail、twitter 及扩展开发工具可以安装、构建和实际使用。分支为 `feat/ui-v2-migration`，基于最新 `origin/main` 的 `54882ac`，worktree 为 `.worktrees/client-web-ui-v2-migration`；原始 checkout 不修改。
+
+拥有相关 manifests／lockfile、源码联调映射、Web 与扩展 UI 调用及样式、同版本指南读取入口、适用 Changeset 和受影响的验证。保留业务权限、Peer 数据责任、Core 公共契约和数据库投影、扩展身份与 Module Federation 交付边界。消费者生产部署及扩展发布不随本次 UI 包发布自动执行；不修改共享 Hub，不继续 Firefox 原生文字放大专项。
+
+## 当前事实与实施次序
+
+1. UI 功能 PR #43 和版本 PR #44 已合入。正式 Release run 34739131474 成功，四个消费者均从 GitHub Packages 安装精确 2.0.0，lockfile 记录正式 tarball 与 integrity。
+2. 最新 main 比初审基线增加了 setup wizard 等真实调用。除 Web、mail、twitter，`packages/ext-dev-utils` 也声明 UI 1.4.0。需要逐处重新核对，不能只应用旧局部补丁。
+3. 先完成依赖责任、Vue 下限和源码映射，再按用途迁移文本／配色、Sass helper、原生提交、pending、JSON 草稿及浮层可访问名称。相同问题覆盖全部实际消费者，不只修首个例子。
+4. Agent 从本仓库入口读取已安装 UI 同版本 DESIGN.md 和 Skill；具体默认与 API 由包提供，不在消费者复制设计规范。
+5. 在 registry 依赖下完成 pnpm check（含 build）、既有 E2E 和关键页面验收；另行检查源码联调。临时消费页、类型映射和源码联调不替代真实产物证据。
+
+## 变更判断
+
+当前修改将旧调用转换为新的公开契约，影响 Web 页面、扩展 UI 和开发联调。保持既有业务流程与保存成功／失败语义；JSON 编辑在文本草稿、验证、确认与持久化边界之间显式流转，不在逐字输入时修改持久化对象。Token 迁移按内容用途决定，不把所有 label-sm 简单映射成同一个角色。静态检查验证名称、类型和产物，真实页面验证草稿保留、重复提交、关闭和错误反馈。
+
+## 验证进展
+
+registry 安装、全 workspace 的 pnpm check（含 Core、Web、mail、twitter、WXT 构建）、源码联调类型检查、实际 Chromium 扩展 popup E2E 及从 apps/client-web 执行 Intent load 已通过。UI 内部依赖不再由 Web 重复声明，源码联调只共享 Vue／UnoCSS。
+
+发现 Peer.save 与 saveConfig 原先忽略 PostgREST error；在原模型方法上使用 throwOnError，避免配置界面误报成功。这是保存迁移的必要边界修复，包含 Core patch Changeset。新增既有 peer-database E2E 旅程验证语法／schema 无效草稿、pending 禁止重复操作与 Escape、真实数据库拒绝后保留草稿、重试持久化。
+
+本机的 SSH Docker provider 连续两次握手被重置，本机无 Docker；pnpm test:e2e:web 在启动隔离实例前失败，尚未执行浏览器断言。此项交由 PR 的既有 client-web E2E job 运行，不改用共享开发数据库。lint:type-aware 报告 11 条已有问题（数据库生成文件 9 条、extension/model.ts 与分发检查脚本各 1 条）；这些告警所在逻辑沿用基线；分发脚本后来增加了 UI 共享检查，原有 sort 告警未改变。普通 lint 和正式 check 通过，不手改生成投影。
+
+迁移已提交至独立 [PR #104](https://github.com/InKCre/client-web/pull/104)。首个源码提交 `5873510` 的 [Client checks](https://github.com/InKCre/client-web/actions/runs/34739437023) 全部通过，包括新增的真实数据库保存旅程；本机 SSH 失败不再构成缺少该项证据。
+
+后续实际 MF 加载发现 Host 与扩展各自打包 UI，导致中文 Host 的 Twitter 时间选择器仍使用英文。已将 UI 加入现有共享单例配置，并让分发检查确认使用 UI 的扩展确实声明对应共享版本。复核确认中文注入、时间草稿取消／确认、Mail renderer 和下载 pending／失败恢复均正确；窄屏附件行和 Info-Base 浮层同步修复。证据与复跑方式见 [验收记录](evidence/README.md)。
+
+本地最终检查已覆盖这些修正。PR 当前提交的远端结果以 checks 页面为准；消费者保持独立分支供审阅，尚未合入 main、生产部署或发布扩展。
+
+## 2026-09-13 视觉迁移复审
+
+用户指出上一轮截图仍有圆角卡片，认为消费者迁移不完整。撤回“迁移全部完成”的表述：现有检查证明依赖、API 和已列出的交互可用，不能证明所有页面遵循设计指南。PR #104 继续作为本次迁移载体。
+
+已确认 Mail 附件行、搜索结果／输入、Twitter 媒体网格和开发页仍保留旧圆角；多处正文、标题、代码及步骤文字也在局部覆盖字号、行高、字重。目标从“旧调用适配新包”调整为“逐页兑现已发布的设计角色、分组、状态和内容适应规则”，保留业务行为、数据和平台责任，按实际页面验证。
+
+当前 DESIGN.md 没有明文禁止圆角，Token 的圆角族仍含 4／8／16／32px、none 和 full。因此不能伪称已有全局禁用规则。普通业务容器的圆角按用户本次指出的问题处理；是否将直角默认及功能形状例外明确写入生产者指南，已向用户澄清，期间继续消费者已确认部分。
+
+复审覆盖 Web 页面与共享局部视图、mail／twitter 的 renderer 与 setup、ext-dev-utils。检查重点包括容器边界、文字职责与覆盖、配色和反馈、原生控件组合、默认布局与窄容器。外部内容 iframe 和有功能意义的媒体图形分别审查，不通过全局 CSS reset 掩盖局部问题。
+
+复审实施结果：Web 搜索、Peer 状态、来源配置和日志容器，以及 Mail 附件、Twitter 媒体和开发页不再保留旧圆角。正文、标题、元数据和代码使用完整字体角色；Twitter setup 保留圆形步骤编号，作为尚待确认的功能形状。Source／Extensions／Job 页面按可用宽度换行，原有内容和操作不再依赖 420px 固定表单或 40%／60% 列宽。来源导航改用链接，日志展开改用原生按钮，均可通过键盘操作。
+
+真实页面还发现 Text、HTML 文本和 Tweet 的完整阅读 renderer 沿用摘要截断，Tweet 的多根节点遗漏宿主的正文间距与滚动。现已修复；独立 preview renderer 继续负责摘要。HTML 保持文本提取方式，Mail HTML 仍在原有隔离 iframe 中，不扩大外部 HTML 的执行权限。
+
+最终源码通过 pnpm check。扩展验收夹具增加完整正文末尾、运行时 body-md 字号覆盖、真实 MF Twitter 根容器、直角业务容器、375px／1280px 页面与键盘操作验证，全部通过且 pageerror 为零。截图已逐张人工查看，产物和覆盖范围更新在 evidence/README.md；这些结果不替代真实 OAuth／下载后端集成证据。
+
+本轮同时确认 `apps/client-webext` 不依赖 UI，仍使用自有主题和 Uno 配置；此前通过的 WXT 构建和 popup E2E 不代表其独立界面已采用 UI 2.0。本工作包当前迁移的直接消费者为 Web、mail、twitter、ext-dev-utils；浏览器扩展的主题接入应作为单独切片明确，不能继续笼统表述成整个 workspace 的视觉迁移全部完成。生产者 DESIGN.md 的直角默认和例外边界仍待用户确认，本轮没有将未确认的新品牌规则发布为既定契约。
+
+## 设计理念复审的边界更新
+
+用户进一步明确：根本问题是生产者 DESIGN.md 未充分总结设计理念与视觉风格，不是是否禁止圆角。此前关于直角默认／功能形状例外的二选一不再作为下一步入口。已提交的可读性、布局、语义和交互修正保留；这些局部形状改动不自动成为 InKCre 的正式视觉规则，也不代表整个设计迁移已得到视觉认可。
+
+共同理念、视觉表达和页面组合的讨论由生产者 `tasks/ui-foundations/packet.md` 的 F0 复审拥有。确认设计依据后，再据此审视真实消费者，不继续用零圆角或 Token 引用合法代替风格判断。本轮没有追加消费者源码修改。
+
+## 已确认风格的实现对齐：I1
+
+生产者已与用户逐项确认局部等宽、温和的标题层级、中性灰与灰调彩色、默认直角、平面层次和适度紧凑的空间节奏；内容取舍先于留白。更新的共同指南尚在生产者分支中，消费者仍安装正式 2.0.0，不能宣称新版设计文档已随依赖安装。
+
+本切片将 Twitter setup 的圆形步骤编号改为共同的直角轮廓。前一轮保留的形状尚未获得例外确认，编号本身也不依赖圆形表达功能。拥有步骤 SCSS、现有浏览器验收夹具和 patch Changeset；保留步骤顺序、当前／完成状态、OAuth、时间草稿、MF 共享与业务数据。验证采用完整 `pnpm check` 和实际构建的 Host／Twitter 加载、步骤显示及时间交互。工作继续在此隔离 worktree，原始 checkout 保持不变。
+
+本轮源码复核没有将所有 mono 视为偏差：Source 的 `id-label` 实为 `#`，编号、版本、日志时间及配置代码均有明确技术用途。页面内容层级与 `client-webext` 独立主题分别保留后续范围，不以这一个样式修正宣称下游复审全部完成。
+
+窄屏截图进一步发现，向导的 88vw 宽度未计入宿主弹层内边距，关闭按钮被内部裁剪。已在同一 SCSS 增加容器最大宽度约束，保留宽屏首选宽度和既有两列步骤布局。已有浏览器夹具同时检查步骤、弹层及内容区没有横向裁剪，关闭按钮完整进入可见区域；375px 截图已人工复核。
+
+I1 已验证：最终完整 `pnpm check` 通过，实际 Host／Twitter／Mail 重放通过，包含时间取消／确认、Host 中文注入、下载 pending／失败恢复及既有阅读与窄宽页面检查，pageerror 为零。新截图和产物身份见 [I1 验收](evidence/README.md#i1-已确认风格的实现对齐)。已补 Twitter patch Changeset，未提交、推送、发布或修改依赖版本。本地证据对应本轮未提交源码，不沿用先前 PR CI 作为新修改的验证。
+
+用户随后授权提交，要求 I1 独立归档。本次仅提交上述步骤轮廓、宽度约束、Changeset 与验收记录，沿用最终完整检查及浏览器证据，不修改依赖或其他业务实现；色彩与阴影的 I2 由生产者工作包继续组织。
+
+## I3 来源页面的内容与状态
+
+I1 已独立提交为 `6a61637`；生产者 I2 已提交为 `284ade6`，均未在本轮推送或发布。用户授权继续 I3。当前 worktree 干净，SVC 14.0.0 状态健康；消费者仍锁定 registry UI 2.0.0。已读取安装版本的 DESIGN／UI Skill 与生产者已确认的页面组合规则，不能将未发布的规则和颜色说成已安装交付。
+
+目标从常驻创建表单、每条配置 JSON、重复编辑入口，调整为用于识别来源的列表与有对象上下文的详情。SourceCard 只有列表一个调用位置；类型与 ID 保留以区分同名来源，名称链接进入完整配置，常用采集／当前任务入口保留。创建与调度表单在用户启动动作后显示；现有调度、必要错误直接可见。
+
+本轮拥有 Source 列表／详情／创建和编辑表单、相关文案说明、必要的 Source／SourceType／Job／Cron 请求错误边界、局部任务状态样式及验收。保存先操作独立候选，失败保留原始 JSON、昵称与类型；读取失败不能变成空结果或无限加载；删除和调度动作等待期间防止重复操作；返回列表和尺寸变化保护草稿与对象身份。状态表达使用现有角色，不新增颜色覆盖、依赖、全局草稿仓库或通用状态框架。原始 checkout、已发布依赖、数据库 schema、采集与 MF 契约保持原边界。
+
+验证采用 `pnpm check`、必要的 Core 扩展静态检查和现有实际 Host 浏览器脚本，覆盖多来源、空／加载／失败、配置 schema／保存失败／pending、创建与删除、窄宽与导航。夹具会按失败注入和实际请求断言边界，真实数据库集成仍独立报告；此前 PR CI 不作为本轮变更证据。
+
+I3 已完成实现和本地验收。列表去除常驻创建表单、每条配置 JSON 与重复编辑操作，详情保留完整修改、现有计划与近期任务。来源名称与 ID 提供稳定上下文，保存操作使用独立候选，类型规则未取得时不能保存；应用内离开前确认未保存修改，返回列表恢复对应来源焦点。
+
+实际状态检查还修正了两个关联边界：新建任务按已保存来源的类型选 schema，避免借用尚未保存的类型草稿；Twitter 切换来源读取失败时恢复旧选择，保留时间草稿并显示错误。此处扩展改动来自 Source／Cron 错误传播的直接消费路径，未扩展 OAuth 或部署行为。
+
+截图复核确认窄屏创建弹层过度收窄，现使用视口首选宽度和宿主最大宽度。Host 未注册 UI Uno preset 导致已有错误色类没有生成，现按安装版本的公开入口补齐；没有新依赖、局部色值或主题覆盖。VueUse 的默认 reportError 会把已由页面呈现的读取失败再次抛向全局，三个使用点明确由 error 状态和重试承担反馈，最终无 pageerror。
+
+最终完整 `pnpm check`、TS7、Changeset 状态和实际 Host／Twitter／Mail 浏览器旅程通过，截图已人工复核。新增证据在 [I3 验收](evidence/README.md#i3-来源页面的内容与状态)，包括独立读取失败、JSON／schema、pending／失败／重试、创建／删除、路由过期响应、未保存类型、返回焦点、1280px／375px 及语义错误色实际计算值。证据使用 registry UI 2.0.0 与隔离网络数据。
+
+真实数据库集成本次因 SSH 连接重置未执行，额外 type-aware lint 仍有既存的 11 项问题；详情列于验收记录，不以旧 CI 替代本轮事实。当前 I3 保留未提交改动与 Web／Core／Twitter patch Changeset，未推送或发布。原始 client-web checkout 与依赖版本保持原状；生产者 I2 的正式发布及安装后复验、client-webext 独立主题仍为各自后续边界。
+
+## PR preview 交付与复验
+
+用户授权提交、推送并创建 PR，通过 preview 完成验收。沿用 PR #104；生产者设计知识与 I1／I2 另建 PR，保留切片独立提交。GitHub SSH 拉取及数据库主机远端命令均已成功，真实数据库 E2E 正在重跑，初始化成功与最终浏览器结果分开记录。
+
+为使远端验收包含两个实际消费扩展，在现有 preview inventory 中补入 Mail，保留同源静态注册表、隔离 Pages 分支及既有生产发布责任。现有 task 浏览器脚本增加显式 `--deployed-extensions` 入口：Host、注册表与 MF 资源使用 preview，业务数据仍来自隔离网络夹具；失败注入不作为真实后端证据。此次交付补充只拥有 preview 清单、验收脚本与记录，不修改应用业务源码或发布扩展。
+
+SSH 恢复后的首轮真实 E2E 暴露冷启动竞态：PostgreSQL 临时进程仅监听 Unix socket，原 `pg_isready` 先报告健康，restore 随即通过 TCP 连接时被拒绝。日志随后才出现正式进程监听 TCP。将现有健康检查改为显式 TCP 地址，确保健康与 restore 使用同一传输边界；只拥有本仓库隔离数据库 Compose 的探测与说明，保留镜像、schema、凭据、重试参数和数据隔离。使用同一真实 E2E 复验，不增加等待脚本或测试框架。
+
+TCP 健康探测修正后，本机 SSH 隔离数据库已进入浏览器，五个既有真实数据库旅程全部通过。I3 提交 `9af7a17` 的远端 Client checks 也全部通过；其 Pages preview 成功交付，实际 Host、Mail、Twitter 重放覆盖全部既有来源与扩展旅程且 pageerror 为零。冷启动修复单独提交，不与 I3 源码归档混合。
+
+本轮交付：I3 为 `9af7a17`，数据库冷启动修复为 `cfd7b12`，均推送至 PR #104。页面验收读取实际 preview 的 Host／Registry／两个 MF 扩展，全旅程通过；真实数据库五个旅程与最终完整检查通过。详见 [远端验收](evidence/README.md#pr-preview-远端验收)。本次没有合入 main、部署生产或发布包／扩展；UI 2.0.0 依赖与 client-webext 独立主题的边界保留。
+
+## PR #104 图标缺失诊断
+
+用户要求确认菜单／侧栏切换图标是否因 UI Uno safelist 丢失。本轮限定调查与浏览器隔离探针，没有修改组件、消费者源码或依赖。真实 preview 的 Menu 按钮具有 24×24 尺寸，`.i-mdi-menu` 规则与 SVG mask 均已生成；更具体的 `button.ink-header__menu-icon` 将背景覆盖成透明，使 mask 没有可见填色。在当前 DOM 仅把背景恢复为 currentColor，菜单图形立即可见，点击仍正常打开侧栏。根因归属 UI 的 `inkHeader.scss`，不是 safelist。
+
+正式 registry 2.0.0 与生产者当前构建均包含九个组件内置图标选择器。沿既有真实 Host／Mail／Twitter／来源旅程核对当前可见图标，菜单是唯一具有 mask 却填色透明的项；关闭、刷新、下拉／展开箭头与加载图标在已覆盖状态下正常。不能据此宣称所有可能图标和状态都已覆盖。此前浏览器验收检查交互与 pageerror，未验证菜单的实际绘制，这一缺口需要在修复时补上。
+
+建议在 UI Header 内分离 button 与装饰图标 span，沿用 InkButton 的结构：按钮负责透明背景、焦点和命中区域，子元素负责 mask 与 currentColor；保留 aria-label、menu-click 和按钮尺寸。不要在消费者添加重复 safelist 或永久覆盖。发布修复包后更新消费者并验证；当前 PR #104 仍安装 2.0.0，仅修改 UI PR 不会让它自动得到修复。
+
+证据见 [计算样式与图标盘点](evidence/icon-diagnosis.json)、[原始菜单](evidence/icon-menu-before.png)和[仅修改填色的诊断探针](evidence/icon-menu-diagnostic-probe.png)。探针截图不代表已修复交付。
+
+用户授权修复、提交和推送后，生产者已在 UI PR #46 独立提交 `6b988c3`：Header 的 button 与装饰图标分离，完整检查及浅深／窄宽图标、焦点与逐次菜单事件验收通过。本消费者本轮只归档诊断证据，不添加 safelist 或 CSS 覆盖；依赖仍是 registry 2.0.0，菜单修复须等正式修复版本发布后安装复验。
+
+## 正式修复版本升级
+
+用户已授权 UI 发布及消费者更新；生产者 PR #46 已合入，正式版本准备由上游发布流程拥有。本次从 registry 2.0.0 升级到将正式发布的修复版本，拥有 Web／Mail／Twitter／ext-dev-utils 四个依赖与 lockfile、适用 Changeset 和既有任务浏览器验收。不使用源码映射、file 依赖、消费者 CSS 覆盖或重复 safelist，不改业务和数据库契约，也不发布消费者应用／扩展。
+
+安装后读取同版本设计／Skill，执行完整 check。既有真实页面旅程补上 Header 的非透明图标、24px 图形、完整焦点与侧栏逐次切换；同时复核新版浅深主题和现有 MF 交互。网络夹具与真实数据库 E2E 继续分开记录。
+
+UI 2.0.1 已正式发布并从 GitHub Packages 安装到四个直接消费者。lockfile integrity 与 registry 相同，四处 UI JS／CSS 字节相同。完整 pnpm check 与本地浏览器全旅程通过，pageerror 为零。浅深／375px／1280px 新增菜单图形 24px、currentColor、键盘焦点和 click／Enter／Space 切换检查；发现侧栏 content-box 将内边距叠加至最小宽度，补 border-box 后窄屏容纳检查通过。新包发布年龄仅按精确版本加入已有安装允许清单，未放宽全局策略。
+
+截图复核发现 border-box 只消除了侧栏自身裁切，窄屏主内容仍被并排布局挤成竖列。移动断点内将侧栏定位在 app-content 上覆盖内容，保持 Header 菜单可关闭，桌面继续并排；新增打开菜单前后主内容宽度不变检查。此次补验避免用局部容纳断言替代页面可读性。
+
+升级提交 `bb4ebd4` 与移动侧栏提交 `d027230` 已推送。部署 run 34799553542 成功，真实远端 Host／Registry／Mail／Twitter 全旅程与浅深／窄宽菜单检查通过；截图和源码／部署身份见 `evidence/ui-2.0.1`。业务网络夹具与真实数据库 CI 仍分别记录，不宣称完成真实 OAuth 或扩展生产发布。
+
+最终功能提交 d027230 的 Client checks 34799554488 全部成功，包括真实数据库 Web E2E、client-webext E2E、工作区契约与 Actions 检查。随后仅归档文档和截图。
+
+## I4：Twitter setup、Mail 与 Graph 重新组合
+
+2026-09-14 用户要求按 DESIGN.md 重做三个指定界面。继续使用当前独立 worktree 与 PR #104；先完成实现、状态验证和截图，再沿已授权提交／preview 流程交付。正式 UI 2.0.1 的设计正文是判断依据，生产者规范与 Token 不因消费者局部布局改变。
+
+| 组   | From → To 与责任                                                                                                                        | 保持的边界                                                                          | 验证                                                                                       |
+| ---- | --------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| I4-T | Twitter setup 从重复分区、步骤着色和同时出现的配置动作，转为当前步骤、已配置摘要、按需应用配置、单一主要动作及可回看的设置              | Core 选择、OAuth 交易轮询和确认、来源／调度保存、明确启动采集、关闭归属             | 首次准备、配置草稿、授权等待／失败、来源创建与选择、保存失败、完成、浅深／窄宽             |
+| I4-M | Mail 六个 renderer 从字段罗列和附件卡片，转为邮件标题／发件人／正文优先、其余信头按需展开、附件行、内嵌内容次级入口、事实摘要与详情分层 | Resolver 注册、HTML 清理／sandbox／外部资源隔离、Blob 生命周期、显式下载、关系导航  | HTML／纯文本／无正文、长主题与地址、附件等待／失败／就绪、独立 MIME 和三类事实、摘要、窄屏 |
+| I4-G | Graph 从漂浮技术开关和重复节点标题，转为场景上下文、按需显示选项、内容节点、可发现的查看操作与清晰状态恢复                              | 检索边界、有向关系、场景 URL、相机／拖拽位置、软方向强调、modeless inspector 和返回 | 节点／边／详情／返回、范围与方向、检索失败／空／缺失／路径结果、键盘、浅深／窄宽           |
+
+本轮不创建通用页面框架，不改 Core／数据库／Registry 协议、不增加依赖。Mail 开发入口只校准已有说明，不新造业务设置流程。Graph 是 Web 宿主视图，其节点和相邻 inspector 由本组一并负责。现有 task 浏览器夹具扩展到这些状态；真实数据库 E2E 与构建契约仍沿原检查边界。实现判断与提炼过程留在本 packet，长期文档只记录最终行为。
+
+I4-G 状态验收发现 Block.find 忽略 PostgREST error，导致错误被当作缺失。Relation.find 已正确传播错误，不修改。这是落实已声明状态区分的必要修复：在原读取边界传播错误，保留成功无行时的 null；补 Core patch Changeset，不改变 schema、GraphModel 或检索协议。Graph 请求状态也只在代次匹配后提交，避免旧响应覆盖新场景。
+
+I4 实现完成：Twitter 已配置凭据折叠，保存与授权状态分离，草稿失败保留；Mail 六个 renderer 按识别／阅读分层，附件共享条目，固定排印与不允许脚本、同源及外部图像的隔离文档一起验证；Graph 移除装饰网格和相应依赖，保留可读焦点、按方向选择连线端点、节点文字操作和可展开选项。宽屏保留邻域关系，窄屏通过平移／缩放探索，不能把整图缩至不可读作为容纳证明。开发入口没有额外业务 UI，不新增设置流程。
+
+I4 本地完整 check、原有 Host／来源旅程与新增状态重放全部通过，pageerror 为零。新增重放包括应用保存失败保留掩码草稿、OAuth 等待／失败／重试、首次来源与调度、明确启动、Mail 六类 renderer 与 Blob 下载、HTML 清理和追踪资源隔离、Graph 拖拽位置保持、方向不重读、两类 inspector 返回，以及空／缺失／错误／路径结果。真实业务 API 使用隔离夹具，不能据此宣称 OAuth／邮箱生产集成已执行。
+
+I4-G 截图收尾移除每条关系线上重复的 Details，将关系详情入口放在选中关系的工具区。连线保留聚焦标签，结构化属性用短编号识别，在 inspector 阅读完整内容，避免标签与相邻节点争夺空间。
+
+I4 已分组提交并推送：Twitter `4131616`、Mail `9e1b0d4`、Block 读取错误 `bdcbdf8`、Graph `c62081e` 及关系操作收尾 `ab5af80`。最终验收源 `9cd531e` 的 preview 34803559638（部署 `69ebcde3`）与 CI 34803560421 全部成功；真实远端 Host／Registry／两个 MF 的原有及新增旅程通过，pageerror 为零。`evidence/i4` 记录源码、部署、日志与远端截图。后续归档只改变文档与证据，不改变运行时代码。
+
+I4-G 用户复核指出，焦点节点的 Current 标签重复了布局和轮廓已有的表达。已移除该标签及其专用排印样式，保留对象编号、详情入口与焦点轮廓。复核本轮三个界面的相似文案后，Twitter 的账户身份、配置完成与失败反馈仍承载独立信息，Graph 的 Focus current 是定位动作，均保留。此修正落实既有内容取舍原则，不增加设计规则；沿用 Graph 的未发布 Changeset。
+
+本次修正的完整 `pnpm check` 与既有 I4 浏览器旅程通过，pageerror 为零；375px 新截图确认焦点轮廓与对象操作清晰，节点不再显示 Current。检查日志分别为 `/tmp/inkcre-current-check.log`、`/tmp/inkcre-current-browser.log`，本地截图位于 `.runtime/ui-migration-evidence/i4-graph-375.png`。这些是本轮本地构建证据，前述 `evidence/i4` 仍对应其已注明的早期部署。继续通过 PR #104 交付此局部修正。
diff --git a/tests/e2e/peer-database.spec.ts b/tests/e2e/peer-database.spec.ts
index b00034ef..2bd09f32 100644
--- a/tests/e2e/peer-database.spec.ts
+++ b/tests/e2e/peer-database.spec.ts
@@ -100,6 +100,95 @@ test('wrong and absent credentials are rejected', async ({ page }) => {
   expect(statuses).toEqual([401, 401])
 })
 
+test('Peer config keeps invalid and failed drafts and saves only once while pending', async ({
+  page,
+}) => {
+  const id = crypto.randomUUID()
+  const authorization = `Bearer ${await token()}`
+  const endpoint = `${postgrestUrl}peers?id=eq.${id}`
+  const created = await fetch(`${postgrestUrl}peers`, {
+    method: 'POST',
+    headers: { Authorization: authorization, 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      id,
+      name: 'UI migration config',
+      config: { limit: 1 },
+      config_schema: {
+        type: 'object',
+        required: ['limit'],
+        properties: { limit: { type: 'integer', minimum: 1 } },
+      },
+    }),
+  })
+  expect(created.status).toBe(201)
+
+  try {
+    await page.goto('/settings')
+    const peer = page.locator('.peer-card', { hasText: id })
+    await peer.getByRole('button', { name: 'Edit Config' }).click()
+    const dialog = page.getByRole('dialog', { name: 'Edit Config' })
+    const editor = dialog.locator('.cm-content')
+    const save = dialog.getByRole('button', { name: 'Save', exact: true })
+    await expect(save).toBeEnabled()
+    await editor.fill('{')
+    await expect(save).toBeDisabled()
+    await expect(editor).toHaveAttribute('aria-invalid', 'true')
+    await editor.fill('{"limit":"invalid"}')
+    await expect(save).toBeDisabled()
+    await expect(editor).toHaveAttribute('aria-invalid', 'true')
+    await editor.fill('{"limit":2}')
+    await expect(save).toBeEnabled()
+
+    let releaseRequest!: () => void
+    const pending = new Promise<void>((resolve) => {
+      releaseRequest = resolve
+    })
+    let writes = 0
+    const wrongAuthorization = `Bearer ${await token('ui-migration-wrong-secret-at-least-32-bytes')}`
+    await page.route(endpoint, async (route) => {
+      if (route.request().method() !== 'PATCH') return route.continue()
+      writes += 1
+      await pending
+      // Exercise the real database rejection without changing the user's draft or auth store.
+      await route.continue({
+        headers: { ...route.request().headers(), authorization: wrongAuthorization },
+      })
+    })
+    await save.click()
+    try {
+      await expect(save).toBeDisabled()
+      await expect(dialog.getByRole('button', { name: 'Cancel' })).toBeDisabled()
+      await page.keyboard.press('Escape')
+      await expect(dialog).toBeVisible()
+      await expect(editor).toHaveAttribute('contenteditable', 'false')
+      expect(writes).toBe(1)
+    } finally {
+      releaseRequest()
+    }
+    await expect(dialog.getByRole('alert')).toBeVisible()
+    await expect(editor).toHaveText('{"limit":2}')
+    await expect(save).toBeEnabled()
+    await page.unroute(endpoint)
+    await save.click()
+    await expect(dialog).not.toBeVisible()
+
+    const stored = await fetch(`${endpoint}&select=config`, {
+      headers: { Authorization: authorization },
+    })
+    expect(stored.status).toBe(200)
+    expect((await stored.json())[0].config).toEqual({ limit: 2 })
+    await peer.getByRole('button', { name: 'Edit Config' }).click()
+    await expect(editor).toContainText('2')
+  } finally {
+    await page.unroute(endpoint)
+    const cleanup = await fetch(endpoint, {
+      method: 'DELETE',
+      headers: { Authorization: authorization },
+    })
+    expect(cleanup.status).toBe(204)
+  }
+})
+
 test('core Peer publishes and serves its exact capability inbounds', async ({ page }) => {
   await page.goto('/')
   const authorization = `Bearer ${await token()}`