@ash-qw/dsh-theme-prts 2.1.0 → 2.2.0

package/src/client/theme-settings-workbench.js

@@ -59,7 +59,7 @@ function settingButtons(key, label, options) {
       : key === 'sessionFlowPalette'
         ? '<small data-prts-setting-note>同时适配日间与夜间模式</small>'
       : ''
-  if (['composerGlass', 'bakerLoading', 'motion', 'cursor', 'railDefaultHidden', 'sessionFlow', 'sessionGlow', 'bakerGroupAvatars', 'conversationEmblem', 'sessionPreview', 'previewOngoing', 'previewWarning', 'previewDone', 'previewDoubleClick', 'previewFollowOngoing', 'previewFollowWarning'].includes(key)) return `<div data-prts-setting-row="${key}">
+  if (['composerGlass', 'bakerLoading', 'motion', 'cursor', 'railDefaultHidden', 'sessionFlow', 'sessionGlow', 'bakerGroupAvatars', 'conversationEmblem', 'sessionPreview', 'aiToolsEnabled', 'previewOngoing', 'previewTools', 'previewWarning', 'previewDone', 'previewDoubleClick', 'previewFollowOngoing', 'previewFollowWarning'].includes(key)) return `<div data-prts-setting-row="${key}">
     <span><strong>${label}</strong>${note}</span>
     <button type="button" role="switch" aria-label="${label}" aria-checked="false" data-prts-setting-switch="${key}" ${key === 'cursor' ? 'data-prts-cursor-switch' : ''}><span aria-hidden="true"></span></button>
   </div>`
@@ -127,6 +127,7 @@ export function themeSettingsMarkup() {
           <button type="button" data-prts-settings-jump="flow" role="tab" id="prts-tab-flow" aria-controls="prts-page-flow" aria-selected="false" tabindex="-1">会话流线</button>
           <button type="button" data-prts-settings-jump="particles" role="tab" id="prts-tab-particles" aria-controls="prts-page-particles" aria-selected="false" tabindex="-1">粒子徽记</button>
           <button type="button" data-prts-settings-jump="assistance" role="tab" id="prts-tab-assistance" aria-controls="prts-page-assistance" aria-selected="false" tabindex="-1">辅助功能</button>
+          <button type="button" data-prts-settings-jump="ai-tools" role="tab" id="prts-tab-ai-tools" aria-controls="prts-page-ai-tools" aria-selected="false" tabindex="-1">AI 工具</button>
         </nav>
           <footer data-prts-settings-actions aria-label="全局主题设置操作">
             <div data-prts-persistence-error hidden role="alert">
@@ -167,6 +168,33 @@ export function themeSettingsMarkup() {
               ${COMMON_CONTROLS.filter(([key]) => ['cursor', 'railDefaultHidden', 'motion'].includes(key)).map(([key, label, options]) => settingButtons(key, label, options)).join('')}
             </div>
           </section>
+          <section data-prts-settings-section="ai-tools" data-prts-ai-tools role="tabpanel" id="prts-page-ai-tools" aria-labelledby="prts-tab-ai-tools" tabindex="0" hidden>
+            <div data-prts-preview-settings><div data-prts-preview-master>
+            ${previewSetting('aiToolsEnabled', '允许 AI 定制主题', '默认开启 · 共 5 个工具 · 影响此 DSH 实例的所有会话')}
+            </div></div>
+            <p>开启后，AI 可以通过工具调整粒子徽记和 Baker 头像。关闭后，后续模型请求不再提供这些工具，手动设置不受影响；已有对话中的工具记录不会删除。</p>
+            <section>
+              <h3>粒子徽记 <small>3 个工具</small></h3>
+              <p>将会话中的图片制作成粒子徽记，用于新会话页面或正文轮换。</p>
+              <ol><li>上传图片，或让 AI 读取已生成的图片。</li><li>让 AI 制作草稿，调整轮廓、位置和缩放，先查看预览。</li><li>满意后明确要求应用到新会话徽记，或加入正文轮换。</li></ol>
+              <blockquote>“把这张图片做成粒子徽记，先给我看看效果。”</blockquote>
+              <details><summary>工具说明与限制</summary><dl>
+                <dt><code>prts_emblem_inspect</code></dt><dd>查看徽记配置、版本与当前会话的可用图片，不修改设置。</dd>
+                <dt><code>prts_emblem_preview</code></dt><dd>制作或调整粒子徽记草稿，只生成预览，不直接应用。</dd>
+                <dt><code>prts_emblem_apply</code></dt><dd>经你确认后，替换新会话徽记，或添加、替换正文轮换徽记。</dd>
+              </dl><p>单张来源图片最大 8 MB。徽记设置跨工作区和会话共享。粒子预览不等同于原图；配置发生变化时，AI 需要重新核对后再应用。</p></details>
+            </section>
+            <section>
+              <h3>Baker 头像 <small>2 个工具</small></h3>
+              <p>为用户和 AI 设置头像，调整圆形裁剪，或恢复默认头像。仅在 Baker 会话样式下显示。</p>
+              <ol><li>上传图片，说明要修改用户头像还是 AI 头像。</li><li>让 AI 查看当前配置，再按你的要求替换、裁剪或恢复默认。</li></ol>
+              <blockquote>“把这张图片设为 AI 头像，居中裁剪。”</blockquote>
+              <details><summary>工具说明与限制</summary><dl>
+                <dt><code>prts_avatar_inspect</code></dt><dd>查看头像配置、原图尺寸、裁剪参数及会话图片，不修改设置。</dd>
+                <dt><code>prts_avatar_apply</code></dt><dd>替换用户或 AI 头像、基于现有原图重新裁剪，或恢复默认头像。</dd>
+              </dl><p>单图最大 5 MB、2500 万像素；裁剪支持 1～4 倍缩放。修改立即影响此实例所有会话，不会自动切换会话样式。替换后不保留旧原图；恢复默认会删除自定义原图。</p></details>
+            </section>
+          </section>
           <section data-prts-settings-section="assistance" role="tabpanel" id="prts-page-assistance" aria-labelledby="prts-tab-assistance" tabindex="0" hidden>
             <section data-prts-preview-settings>
               <div data-prts-preview-master>
@@ -177,6 +205,7 @@ export function themeSettingsMarkup() {
                   <header><strong>悬停预览</strong><small>选择哪些状态显示详细浮窗</small></header>
                   ${previewSetting('previewOngoing', '运行中预览', '逐轮查看已完成的回复，最新内容置顶')}
                   <div data-prts-preview-details="previewOngoing">
+                  ${previewSetting('previewTools', '显示工具调用', '显示工具进度，悬停查看最新正文之后的调用记录')}
                   <label data-prts-setting-row="previewReplyLimit"><span><strong>回复条数</strong><small data-prts-preview-setting-description>仅保留最新回复</small></span><select data-prts-preview-reply-limit aria-label="最多显示回复"><option value="5">最新 5 条</option><option value="10">最新 10 条</option><option value="0">不限制</option></select></label>
                   ${previewSetting('previewFollowOngoing', '运行结束后跟随', '转为待处理或已完成时，自动切换预览')}
                   </div>

package/src/index.js

@@ -19,7 +19,7 @@ export const Config = Schema.object(Object.fromEntries([
   ['preferencesInitialized', Schema.boolean().default(false).volatile()],
 ]))
 
-export async function apply(ctx) {
+export async function apply(ctx, config = {}) {
   ctx.inject(['settings'], settingsCtx => {
     settingsCtx.effect(() => settingsCtx.settings.configure({ auto: false }, ctx.fiber))
   })
@@ -27,7 +27,24 @@ export async function apply(ctx) {
   const service=await createEmblemService(directory)
   const backgrounds=await createBackgroundService(join(directory,'..','backgrounds'))
   const avatars=await createAvatarService(join(directory,'..','avatars'))
-  const disposers=[...emblemTools(service,ctx.attachments),...avatarTools(avatars,ctx.attachments)].map(tool=>ctx.tools.register(tool))
-  disposers.push(registerEmblemApi(ctx,service),registerAvatarApi(ctx,avatars),registerBackgroundApi(ctx,backgrounds))
-  ctx.effect(()=>async()=>{for(const dispose of disposers.reverse())dispose();await service.dispose();await backgrounds.dispose()})
+  const definitions=[...emblemTools(service,ctx.attachments),...avatarTools(avatars,ctx.attachments)]
+  let toolDisposers=[]
+  const syncTools=()=>{
+    const enabled=(config.aiToolsEnabled?.get?.() ?? config.aiToolsEnabled) !== false
+    if(enabled && !toolDisposers.length) {
+      for(const tool of definitions)toolDisposers.push(ctx.tools.register(tool))
+    } else if(!enabled) {
+      for(const dispose of toolDisposers.splice(0).reverse())dispose()
+    }
+  }
+  syncTools()
+  // Host volatile fields are updated before this notification; they expose get(), not subscribe().
+  const stopConfig=ctx.on('app-boot/config-reload',syncTools)
+  const disposers=[registerEmblemApi(ctx,service),registerAvatarApi(ctx,avatars),registerBackgroundApi(ctx,backgrounds)]
+  ctx.effect(()=>async()=>{
+    stopConfig()
+    for(const dispose of toolDisposers.splice(0).reverse())dispose()
+    for(const dispose of disposers.reverse())dispose()
+    await service.dispose();await backgrounds.dispose()
+  })
 }

package/src/styles/custom-background.css

@@ -1,14 +1,18 @@
-/* Full mode uses one viewport-aligned image, so the two regions never crop independently. */
+/* Viewport-aligned wallpaper. */
 html[data-dsh-prts] { --prts-background-wash: color-mix(in srgb, var(--prts-canvas) var(--prts-background-shade, 45%), transparent); }
 html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] :is([data-prts-region="frame"], [data-prts-nav-rail]) {
-  background: linear-gradient(var(--prts-background-wash), var(--prts-background-wash)), var(--prts-background-full) center / cover fixed;
+background: linear-gradient(var(--prts-background-wash), var(--prts-background-wash)), var(--prts-background-full) center / cover fixed;
 }
 html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] :is([data-prts-region="sessions"], [data-prts-region="operation"]) { background: transparent; }
-html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-sidebar] [data-prts-region="sessions"] {
-  background: linear-gradient(var(--prts-background-wash), var(--prts-background-wash)), var(--prts-background-sidebar) center / cover no-repeat;
+html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-sidebar] {
+--prts-wall-width:max(calc(var(--prts-sidebar-width,280px) + var(--prts-nav-width)),calc((100dvh - var(--prts-host-top-inset)) * var(--prts-sidebar-image-ratio,1)));
+--prts-wall-x:calc((var(--prts-sidebar-width,280px) + var(--prts-nav-width) - var(--prts-wall-width)) / 2);
+& :is([data-prts-region="sessions"],[data-prts-nav-rail]){background:linear-gradient(var(--prts-background-wash),var(--prts-background-wash)),var(--prts-background-sidebar) var(--prts-wall-x) center / var(--prts-wall-width) auto no-repeat}
+& [data-prts-region="sessions"]{background-position:center,calc(var(--prts-wall-x) - var(--prts-nav-width)) center}
 }
+html[data-dsh-prts][data-prts-rail-mode="overlay"]:is([data-prts-background-mode="split"][data-prts-background-sidebar],[data-prts-background-mode="full"][data-prts-background-full]) [data-prts-nav-rail] { background: transparent; }
 html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-conversation] [data-prts-region="operation"] {
-  background: linear-gradient(var(--prts-background-wash), var(--prts-background-wash)), var(--prts-background-conversation) center / cover no-repeat;
+background: linear-gradient(var(--prts-background-wash), var(--prts-background-wash)), var(--prts-background-conversation) center / cover no-repeat;
 }
 html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] [data-prts-ambient-layer],
 html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-conversation] [data-prts-ambient-layer] { display: none !important; }
@@ -47,9 +51,9 @@ html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-conv
 [data-prts-background-status]:empty { display: none; }
 [data-prts-background-settings] button:focus-visible { outline: 2px solid var(--prts-cyan); outline-offset: 3px; }
 @media (max-width: 600px) {
-  [data-prts-background-modes] button { padding: 8px; }
-  [data-prts-background-modes] button small { display: none; }
-  [data-prts-background-images] { grid-template-columns: 1fr; }
+[data-prts-background-modes] button { padding: 8px; }
+[data-prts-background-modes] button small { display: none; }
+[data-prts-background-images] { grid-template-columns: 1fr; }
 }
 [data-prts-background-settings] [hidden] { display: none !important; }
 /* Classic conversation roots keep their native surface unless an image is active. */
@@ -59,134 +63,135 @@ html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-conv
 html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] [data-prts-region="sessions"] [data-slot="sidebar.workspaces"] span[class$="_fade"],
 html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-sidebar] [data-prts-region="sessions"] [data-slot="sidebar.workspaces"] span[class$="_fade"] { display: none !important; }
 
-/* Paint glass behind sidebar controls, never filter their ancestor: fixed
- * settings/menus must retain their viewport positioning. The split-mode image
- * stays on the parent so this surface can blur it as well as the full wallpaper. */
+/* Filter the plate, not the ancestor of fixed controls. */
 html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] [data-prts-region="sessions"]::before,
 html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-sidebar] [data-prts-region="sessions"]::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  pointer-events: none;
-  background: color-mix(in srgb, var(--prts-panel) var(--prts-sidebar-opacity, 6%), transparent);
-  -webkit-backdrop-filter: blur(var(--prts-sidebar-blur, 8px)) saturate(1.15);
-  backdrop-filter: blur(var(--prts-sidebar-blur, 8px)) saturate(1.15);
-  box-shadow: inset -1px 0 color-mix(in srgb, var(--prts-ink) 10%, transparent), inset 0 1px rgb(255 255 255 / 8%);
-}
-/* The sidebar slot is display:contents and cannot establish a paint layer.
- * Raise its actual root so glass never blurs static plugin entries. */
+content: "";
+position: absolute;
+inset: 0;
+z-index: 0;
+pointer-events: none;
+background: color-mix(in srgb, var(--prts-panel) var(--prts-sidebar-opacity, 6%), transparent);
+-webkit-backdrop-filter: blur(var(--prts-sidebar-blur, 8px)) saturate(1.15);
+backdrop-filter: blur(var(--prts-sidebar-blur, 8px)) saturate(1.15);
+box-shadow: inset -1px 0 color-mix(in srgb, var(--prts-ink) 10%, transparent), inset 0 1px rgb(255 255 255 / 8%);
+}
+/* Raise sidebar controls above glass. */
 html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] [data-prts-region="sessions"] [data-slot="sidebar"] > :first-child,
 html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-sidebar] [data-prts-region="sessions"] [data-slot="sidebar"] > :first-child {
-  position: relative;
-  z-index: 1;
+position: relative;
+z-index: 1;
 }
 
-/* The fixed rail already establishes a stacking context. Keep the glass below
- * every control without changing their positioning or tooltip geometry. */
-html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] [data-prts-nav-rail]::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background: color-mix(in srgb, var(--prts-panel) var(--prts-rail-opacity, 30%), transparent);
-  -webkit-backdrop-filter: blur(var(--prts-rail-blur, 12px)) saturate(1.15);
-  backdrop-filter: blur(var(--prts-rail-blur, 12px)) saturate(1.15);
-  box-shadow: inset -1px 0 color-mix(in srgb, var(--prts-ink) 10%, transparent), inset 0 1px rgb(255 255 255 / 8%);
+html[data-dsh-prts]:is([data-prts-background-mode="full"][data-prts-background-full],[data-prts-background-mode="split"][data-prts-background-sidebar]) {
+/* Opacity on the parent isolates backdrop sampling during slide-in. */
+&[data-prts-rail-mode="overlay"] [data-prts-nav-rail]{opacity:1;transition:transform 180ms var(--prts-ease-snap),visibility 0s linear 180ms}
+&[data-prts-rail-mode="overlay"][data-prts-rail-open] [data-prts-nav-rail]{transition-delay:0s}
+/* Glass stays below rail controls. */
+& [data-prts-nav-rail]::before {
+content: "";
+position: absolute;
+inset: 0;
+z-index: -1;
+pointer-events: none;
+background: color-mix(in srgb, var(--prts-panel) var(--prts-rail-opacity, 30%), transparent);
+-webkit-backdrop-filter: blur(var(--prts-rail-blur, 12px)) saturate(1.15);
+backdrop-filter: blur(var(--prts-rail-blur, 12px)) saturate(1.15);
+box-shadow: inset -1px 0 color-mix(in srgb, var(--prts-ink) 10%, transparent), inset 0 1px rgb(255 255 255 / 8%);
 }
 
 /* Glass rail feedback retains the wallpaper instead of switching to solid black. */
-html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] [data-prts-nav-rail] button {
-  color: var(--prts-muted) !important;
-  border-bottom-color: var(--prts-line);
-  transition: background-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
+& [data-prts-nav-rail] button {
+color: var(--prts-muted) !important;
+border-bottom-color: var(--prts-line);
+transition: background-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
 }
-html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] [data-prts-nav-rail] button:is(:hover, :focus-visible, [aria-expanded="true"]) {
-  background: color-mix(in srgb, var(--prts-panel-raised) 32%, transparent);
-  color: var(--prts-ink) !important;
-  box-shadow: inset 0 1px rgb(255 255 255 / 15%), inset 0 0 0 1px color-mix(in srgb, var(--prts-ink) 10%, transparent);
+& [data-prts-nav-rail] button:is(:hover, :focus-visible, [aria-expanded="true"]) {
+background: color-mix(in srgb, var(--prts-panel-raised) 32%, transparent);
+color: var(--prts-ink) !important;
+box-shadow: inset 0 1px rgb(255 255 255 / 15%), inset 0 0 0 1px color-mix(in srgb, var(--prts-ink) 10%, transparent);
 }
-html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] [data-prts-nav-rail] button:active {
-  background: color-mix(in srgb, var(--prts-panel-raised) 48%, transparent);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prts-ink) 18%, transparent);
+& [data-prts-nav-rail] button:active {
+background: color-mix(in srgb, var(--prts-panel-raised) 48%, transparent);
+box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prts-ink) 18%, transparent);
 }
 
 /* Daylight needs a little contrast, rather than another white highlight. */
-html[data-dsh-prts][data-prts-scheme="light"][data-prts-background-mode="full"][data-prts-background-full] [data-prts-nav-rail] button:is(:hover, :focus-visible, [aria-expanded="true"]) {
-  background: color-mix(in srgb, var(--prts-ink) 8%, transparent);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prts-ink) 16%, transparent);
+&[data-prts-scheme="light"] [data-prts-nav-rail] button:is(:hover, :focus-visible, [aria-expanded="true"]) {
+background: color-mix(in srgb, var(--prts-ink) 8%, transparent);
+box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prts-ink) 16%, transparent);
 }
-html[data-dsh-prts][data-prts-scheme="light"][data-prts-background-mode="full"][data-prts-background-full] [data-prts-nav-rail] button:active {
-  background: color-mix(in srgb, var(--prts-ink) 13%, transparent);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prts-ink) 22%, transparent);
+&[data-prts-scheme="light"] [data-prts-nav-rail] button:active {
+background: color-mix(in srgb, var(--prts-ink) 13%, transparent);
+box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prts-ink) 22%, transparent);
 }
 
-/* The solid rail stays dark in both schemes; use the same light feedback
- * instead of the conversation palette's light-mode ink/surface colors. */
-html[data-dsh-prts]:not([data-prts-background-mode="full"][data-prts-background-full]) [data-prts-nav-rail] button:is(:hover, :focus-visible, [aria-expanded="true"]) {
-  background: rgb(255 255 255 / 8%);
-  color: #f3f6f7 !important;
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);
+/* A dark solid-rail divider is too strong against the daylight wallpaper. */
+&[data-prts-scheme="light"] [data-prts-nav-rail] {
+border-right-color: color-mix(in srgb, var(--prts-ink) 10%, transparent);
+box-shadow: none;
 }
-html[data-dsh-prts]:not([data-prts-background-mode="full"][data-prts-background-full]) [data-prts-nav-rail] button:active {
-  background: rgb(255 255 255 / 14%);
-  color: #f3f6f7 !important;
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%);
+&[data-prts-scheme="light"] [data-prts-nav-rail]::before {
+box-shadow: inset 0 1px rgb(255 255 255 / 8%);
 }
 
-/* A dark solid-rail divider is too strong against the daylight wallpaper. */
-html[data-dsh-prts][data-prts-scheme="light"][data-prts-background-mode="full"][data-prts-background-full] [data-prts-nav-rail] {
-  border-right-color: color-mix(in srgb, var(--prts-ink) 10%, transparent);
-  box-shadow: none;
 }
-html[data-dsh-prts][data-prts-scheme="light"][data-prts-background-mode="full"][data-prts-background-full] [data-prts-nav-rail]::before {
-  box-shadow: inset 0 1px rgb(255 255 255 / 8%);
+/* The solid rail stays dark in both schemes; use the same light feedback
+* instead of the conversation palette's light-mode ink/surface colors. */
+html[data-dsh-prts]:not([data-prts-background-mode="full"][data-prts-background-full],[data-prts-background-mode="split"][data-prts-background-sidebar]) [data-prts-nav-rail] button:is(:hover, :focus-visible, [aria-expanded="true"]) {
+background: rgb(255 255 255 / 8%);
+color: #f3f6f7 !important;
+box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);
+}
+html[data-dsh-prts]:not([data-prts-background-mode="full"][data-prts-background-full],[data-prts-background-mode="split"][data-prts-background-sidebar]) [data-prts-nav-rail] button:active {
+background: rgb(255 255 255 / 14%);
+color: #f3f6f7 !important;
+box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%);
 }
 
 /* Baker keeps its game palette; only a real conversation wallpaper enables glass. */
 html[data-dsh-prts][data-prts-conversation-style="deck-chat"]:is(
-  [data-prts-background-mode="full"][data-prts-background-full],
-  [data-prts-background-mode="split"][data-prts-background-conversation]
+[data-prts-background-mode="full"][data-prts-background-full],
+[data-prts-background-mode="split"][data-prts-background-conversation]
 ) {
-  --prts-chat-user-surface: rgb(239 239 237 / var(--prts-baker-opacity, 50%));
-  --prts-chat-assistant-surface: rgb(69 70 68 / var(--prts-baker-opacity, 50%));
-  &[data-prts-scheme="light"] {
-    --prts-chat-user-surface: rgb(255 255 255 / var(--prts-baker-opacity, 50%));
-    --prts-chat-assistant-surface: rgb(223 227 223 / var(--prts-baker-opacity, 50%));
-  }
-  & :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"],
-  & :is([data-prts-ai-surface], [data-message-role="user"], [data-message-role="assistant"]),
-  & [data-chat-flow-kind="assistant-step"]:not([data-chat-group-part="reasoning"]) [class$="_body"]:has(:is([data-markdown], [data-slot*="markdown" i], .markdown-body)) {
-    -webkit-backdrop-filter: blur(var(--prts-baker-blur, 8px)) saturate(1.08);
-    backdrop-filter: blur(var(--prts-baker-blur, 8px)) saturate(1.08);
-  }
-  & [data-prts-ai-surface]::before,
-  & [data-message-role="assistant"]::after,
-  & :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"]::before,
-  & [data-message-role="user"]::before {
-    -webkit-backdrop-filter: blur(var(--prts-baker-blur, 8px)) saturate(1.08);
-    backdrop-filter: blur(var(--prts-baker-blur, 8px)) saturate(1.08);
-  }
+--prts-chat-user-surface: rgb(239 239 237 / var(--prts-baker-opacity, 50%));
+--prts-chat-assistant-surface: rgb(69 70 68 / var(--prts-baker-opacity, 50%));
+&[data-prts-scheme="light"] {
+--prts-chat-user-surface: rgb(255 255 255 / var(--prts-baker-opacity, 50%));
+--prts-chat-assistant-surface: rgb(223 227 223 / var(--prts-baker-opacity, 50%));
+}
+& :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"],
+& :is([data-prts-ai-surface], [data-message-role="user"], [data-message-role="assistant"]),
+& [data-chat-flow-kind="assistant-step"]:not([data-chat-group-part="reasoning"]) [class$="_body"]:has(:is([data-markdown], [data-slot*="markdown" i], .markdown-body)) {
+-webkit-backdrop-filter: blur(var(--prts-baker-blur, 8px)) saturate(1.08);
+backdrop-filter: blur(var(--prts-baker-blur, 8px)) saturate(1.08);
+}
+& [data-prts-ai-surface]::before,
+& [data-message-role="assistant"]::after,
+& :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"]::before,
+& [data-message-role="user"]::before {
+-webkit-backdrop-filter: blur(var(--prts-baker-blur, 8px)) saturate(1.08);
+backdrop-filter: blur(var(--prts-baker-blur, 8px)) saturate(1.08);
+}
 }
 
 /* Classic user messages share the wallpaper translucency controls with Baker bubbles. */
 html[data-dsh-prts][data-prts-conversation-style="native"]:is(
-  [data-prts-background-mode="full"][data-prts-background-full],
-  [data-prts-background-mode="split"][data-prts-background-conversation]
+[data-prts-background-mode="full"][data-prts-background-full],
+[data-prts-background-mode="split"][data-prts-background-conversation]
 ) {
-  & [data-message-role="user"],
-  & :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"] {
-    background: rgb(23 29 33 / var(--prts-classic-user-opacity, 50%)) !important;
-    -webkit-backdrop-filter: blur(var(--prts-classic-user-blur, 8px)) saturate(1.08);
-    backdrop-filter: blur(var(--prts-classic-user-blur, 8px)) saturate(1.08);
-  }
-  &[data-prts-scheme="light"] {
-    & [data-message-role="user"],
-    & :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"] {
-      background: rgb(229 234 237 / var(--prts-classic-user-opacity, 50%)) !important;
-    }
-  }
+& [data-message-role="user"],
+& :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"] {
+background: rgb(23 29 33 / var(--prts-classic-user-opacity, 50%)) !important;
+-webkit-backdrop-filter: blur(var(--prts-classic-user-blur, 8px)) saturate(1.08);
+backdrop-filter: blur(var(--prts-classic-user-blur, 8px)) saturate(1.08);
+}
+&[data-prts-scheme="light"] {
+& [data-message-role="user"],
+& :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"] {
+background: rgb(229 234 237 / var(--prts-classic-user-opacity, 50%)) !important;
+}
+}
 }
 
 [data-prts-opacity-settings] { min-width: 0; max-width: 420px; margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--prts-line); }
@@ -233,15 +238,15 @@ html[data-prts-motion="reduced"] [data-prts-opacity-dial] [data-dial-tail] { dis
 
 /* Match the two peer modules without boxing one of them in a second surface. */
 html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-section="appearance"] > section {
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
+padding: 0;
+border: 0;
+border-radius: 0;
+background: transparent;
 }
 html[data-dsh-prts] [data-prts-theme-settings] [data-prts-background-settings] {
-  margin-top: 24px;
-  padding-top: 12px;
-  border-top: 1px solid var(--prts-line);
+margin-top: 24px;
+padding-top: 12px;
+border-top: 1px solid var(--prts-line);
 }
 /* SVG outlines are rectangular in Chromium. Draw keyboard focus inside the ring. */
 html[data-dsh-prts] [data-prts-theme-settings] [data-prts-opacity-dial] svg:focus { outline: none !important; box-shadow: none; }
@@ -249,16 +254,16 @@ html[data-dsh-prts] [data-prts-theme-settings] [data-prts-opacity-dial] svg:focu
 [data-prts-opacity-dial] svg:focus-visible [data-dial-focus] { opacity: .8; }
 [data-prts-opacity-control][data-dragging] [data-dial-focus] { opacity: 0; }
 [data-prts-material-preview] {
-  position: relative;
-  width: 100%;
-  height: 104px;
-  overflow: hidden;
-  border: 1px solid var(--prts-line);
-  border-radius: 6px;
-  background: var(--prts-background-full, linear-gradient(135deg, #8bb6c2, #c7b69c)) center / cover;
-  --prts-preview-surface: var(--prts-panel);
-}
-html[data-prts-background-mode="split"] [data-prts-material-preview="sidebarOpacity"] { background-image: var(--prts-background-sidebar, linear-gradient(135deg, #8bb6c2, #c7b69c)); }
+position: relative;
+width: 100%;
+height: 104px;
+overflow: hidden;
+border: 1px solid var(--prts-line);
+border-radius: 6px;
+background: var(--prts-background-full, linear-gradient(135deg, #8bb6c2, #c7b69c)) center / cover;
+--prts-preview-surface: var(--prts-panel);
+}
+html[data-prts-background-mode="split"] :is([data-prts-material-preview="sidebarOpacity"],[data-prts-material-preview="railOpacity"]) { background-image: var(--prts-background-sidebar, linear-gradient(135deg, #8bb6c2, #c7b69c)); }
 html[data-prts-background-mode="split"] [data-prts-material-preview="bakerOpacity"] { background-image: var(--prts-background-conversation, linear-gradient(135deg, #8bb6c2, #c7b69c)); }
 html[data-prts-background-mode="split"] [data-prts-material-preview="classicUserOpacity"] { background-image: var(--prts-background-conversation, linear-gradient(135deg, #8bb6c2, #c7b69c)); }
 [data-prts-material-preview]::before { content: ""; position: absolute; inset: 0; background: var(--prts-background-wash); }
@@ -271,9 +276,9 @@ html[data-prts-scheme="light"] [data-prts-material-preview="bakerOpacity"] [data
 [data-prts-material-preview="classicUserOpacity"] [data-prts-material-preview-surface] { inset: 16px 10px; border-left: 3px solid var(--prts-yellow); border-radius: var(--prts-radius-card); background: rgb(23 29 33 / var(--prts-classic-user-opacity, 50%)); backdrop-filter: blur(var(--prts-classic-user-blur, 8px)) saturate(1.08); }
 html[data-prts-scheme="light"] [data-prts-material-preview="classicUserOpacity"] [data-prts-material-preview-surface] { background: rgb(229 234 237 / var(--prts-classic-user-opacity, 50%)); }
 @media (max-width: 560px) {
-  [data-prts-opacity-control] { column-gap: 10px; }
-  [data-prts-opacity-heading] { gap: 6px; }
-  [data-prts-opacity-dial] { width: 88px; }
+[data-prts-opacity-control] { column-gap: 10px; }
+[data-prts-opacity-heading] { gap: 6px; }
+[data-prts-opacity-dial] { width: 88px; }
 }
 
 /* Backgrounds now have their own settings page. */
@@ -284,43 +289,43 @@ html[data-dsh-prts] [data-prts-settings-section="background"] [data-prts-backgro
 [data-prts-composer-glass-required] { font-size: 12px; color: var(--prts-muted); }
 
 /* The native active composer fades into DSH's base color. Baker paints a
- * different solid backdrop, so match that backdrop while keeping the fade. */
+* different solid backdrop, so match that backdrop while keeping the fade. */
 html[data-dsh-prts][data-prts-conversation-style="deck-chat"][data-prts-background-mode="off"] [data-phase="active"] [data-composer-seat]:not(:has([data-prts-composer-glass-active])) {
-  background: linear-gradient(180deg, transparent 0, var(--prts-chat-dock-surface, var(--prts-chat-backdrop)) 36px) !important;
+background: linear-gradient(180deg, transparent 0, var(--prts-chat-dock-surface, var(--prts-chat-backdrop)) 36px) !important;
 }
 html[data-dsh-prts][data-prts-conversation-style="deck-chat"][data-prts-background-mode="off"][data-prts-texture="restrained"] {
-  --prts-chat-dock-surface: color-mix(in srgb, var(--prts-chat-backdrop) 82%, var(--prts-canvas));
+--prts-chat-dock-surface: color-mix(in srgb, var(--prts-chat-backdrop) 82%, var(--prts-canvas));
 }
 html[data-dsh-prts][data-prts-conversation-style="deck-chat"][data-prts-background-mode="off"][data-prts-texture="off"] {
-  --prts-chat-dock-surface: color-mix(in srgb, var(--prts-chat-backdrop) 72%, var(--prts-canvas));
+--prts-chat-dock-surface: color-mix(in srgb, var(--prts-chat-backdrop) 72%, var(--prts-canvas));
 }
 
 /* Native data-streaming disappears for settled and interrupted responses.
- * Hide only the current response body, never reasoning, tools or earlier rounds. */
+* Hide only the current response body, never reasoning, tools or earlier rounds. */
 html[data-dsh-prts][data-prts-conversation-style="deck-chat"][data-prts-baker-loading]
 [data-chat-flow-kind="assistant-step"]:not([data-chat-group-part="reasoning"])
 [data-streaming] > :is([data-prts-ai-surface], [class$="_body"]) {
-  min-width: 78px;
-  width: 78px !important;
-  min-height: 42px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 12px 18px !important;
-  & > * { display: none !important; }
-  &::after {
-    content: "正在生成回复";
-    font-size: 0;
-    display: block;
-    width: 4px;
-    height: 4px;
-    border-radius: 1px;
-    animation: prts-baker-typing 1.2s linear infinite;
-  }
+min-width: 78px;
+width: 78px !important;
+min-height: 42px;
+box-sizing: border-box;
+display: flex;
+align-items: center;
+justify-content: center;
+padding: 12px 18px !important;
+& > * { display: none !important; }
+&::after {
+content: "正在生成回复";
+font-size: 0;
+display: block;
+width: 4px;
+height: 4px;
+border-radius: 1px;
+animation: prts-baker-typing 1.2s linear infinite;
+}
 }
 @keyframes prts-baker-typing {
-  0%, 100% { background: color-mix(in srgb,currentColor 30%,transparent); box-shadow: -10px 0 0 currentColor, 10px 0 0 color-mix(in srgb,currentColor 30%,transparent); }
-  33% { background: currentColor; box-shadow: -10px 0 0 color-mix(in srgb,currentColor 30%,transparent), 10px 0 0 color-mix(in srgb,currentColor 30%,transparent); }
-  66% { background: color-mix(in srgb,currentColor 30%,transparent); box-shadow: -10px 0 0 color-mix(in srgb,currentColor 30%,transparent), 10px 0 0 currentColor; }
+0%, 100% { background: color-mix(in srgb,currentColor 30%,transparent); box-shadow: -10px 0 0 currentColor, 10px 0 0 color-mix(in srgb,currentColor 30%,transparent); }
+33% { background: currentColor; box-shadow: -10px 0 0 color-mix(in srgb,currentColor 30%,transparent), 10px 0 0 color-mix(in srgb,currentColor 30%,transparent); }
+66% { background: color-mix(in srgb,currentColor 30%,transparent); box-shadow: -10px 0 0 color-mix(in srgb,currentColor 30%,transparent), 10px 0 0 currentColor; }
 }

package/src/styles/facility-vector.css

@@ -776,10 +776,10 @@ html[data-dsh-prts] [data-prts-preview-body] a { color:var(--prts-cyan);text-dec
 html[data-dsh-prts] [data-prts-preview-message] + [data-prts-preview-message] { margin-top:5px; }
 html[data-dsh-prts] [data-prts-preview-message] > small { display:block;margin-bottom:6px;color:var(--prts-muted);font:10px/1.5 var(--prts-mono); }
 
-html[data-dsh-prts] [data-prts-reply-entry] { display:flex;align-items:flex-start;gap:8px;width:100%;padding:6px 8px;text-align:left;border:1px solid var(--prts-line);border-radius:5px;background:transparent;color:var(--prts-ink);cursor:pointer; }
-html[data-dsh-prts] [data-prts-reply-entry]:is(:hover,:focus-visible,[data-prts-reply-active]) { background:color-mix(in srgb,var(--prts-ink) 7%,transparent);border-color:var(--prts-muted); }
-html[data-dsh-prts] [data-prts-reply-entry] small { flex:0 0 auto;white-space:nowrap;padding-top:2px;color:var(--prts-muted);font:10px/1.5 var(--prts-mono); }
-html[data-dsh-prts] [data-prts-reply-entry] span { min-width:0;flex:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:12px/1.6 var(--prts-body);overflow-wrap:anywhere; }
+html[data-dsh-prts] :is([data-prts-reply-entry],[data-prts-tool-entry]) { display:flex;align-items:flex-start;gap:8px;width:100%;padding:6px 8px;text-align:left;border:1px solid var(--prts-line);border-radius:5px;background:transparent;color:var(--prts-ink);cursor:pointer; }
+html[data-dsh-prts] :is([data-prts-reply-entry],[data-prts-tool-entry]):is(:hover,:focus-visible,[data-prts-reply-active]) { background:color-mix(in srgb,var(--prts-ink) 7%,transparent);border-color:var(--prts-muted); }
+html[data-dsh-prts] :is([data-prts-reply-entry],[data-prts-tool-entry]) small { flex:0 0 auto;white-space:nowrap;padding-top:2px;color:var(--prts-muted);font:10px/1.5 var(--prts-mono); }
+html[data-dsh-prts] :is([data-prts-reply-entry],[data-prts-tool-entry]) span { min-width:0;flex:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:12px/1.6 var(--prts-body);overflow-wrap:anywhere; }
 html[data-dsh-prts] [data-prts-reply-detail]:not([data-prts-preview-question]) > [data-prts-preview-body] { max-height:190px; }
 
 html[data-dsh-prts] [data-prts-preview-marker] { display:none;flex:none;margin-left:auto;color:var(--prts-muted);font:600 9px/1.4 var(--prts-body); }
@@ -864,3 +864,25 @@ html[data-dsh-prts] [data-prts-summary-dismissed] [data-prts-session-summary-pop
   pointer-events: none !important;
   transition: none;
 }
+
+html[data-dsh-prts] [data-prts-preview-tool] { margin-top:8px; }
+html[data-dsh-prts] [data-prts-preview-tool][hidden] { display:none; }
+html[data-dsh-prts] [data-prts-preview-tool] > button { box-sizing:border-box;height:32px;align-items:center;gap:7px;padding:4px 8px;overflow:hidden;border-left:2px solid var(--prts-cyan);background:color-mix(in srgb,var(--prts-cyan) 7%,transparent); }
+html[data-dsh-prts] [data-prts-tool-entry]::before { content:">_";flex:none;color:var(--prts-cyan);font:600 11px var(--prts-mono); }
+html[data-dsh-prts] [data-prts-preview-tool] small { padding:0;color:var(--prts-cyan); }
+html[data-dsh-prts] [data-prts-preview-tool] span { display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:11px/1.6 var(--prts-mono); }
+
+html[data-dsh-prts] [data-prts-summary-reply] > [data-prts-preview-body]:empty { display:none;margin:0; }
+
+html[data-dsh-prts] [data-prts-preview-message] > [data-prts-reply-entry] { border-color:transparent;border-radius:3px; }
+html[data-dsh-prts] [data-prts-reply-entry] small { display:flex;align-items:center;gap:4px;color:#8aaee0; }
+html[data-dsh-prts] [data-prts-reply-entry] svg { width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.2; }
+
+html[data-dsh-prts][data-prts-scheme="light"] [data-prts-reply-entry] small { color:#476b9c; }
+
+html[data-dsh-prts] [data-prts-summary-reply][data-prts-tool-history] > [data-prts-preview-body] { height:190px;max-height:190px; }
+html[data-dsh-prts] [data-prts-tool-record] { padding:8px 0;border-bottom:1px solid var(--prts-line); }
+html[data-dsh-prts] [data-prts-tool-record] > div { display:flex;align-items:baseline;gap:8px; }
+html[data-dsh-prts] [data-prts-tool-record] b { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--prts-cyan);font:11px/1.6 var(--prts-mono); }
+html[data-dsh-prts] [data-prts-tool-record] small { flex:none;color:var(--prts-muted);font-size:10px; }
+html[data-dsh-prts] [data-prts-tool-record] p { display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:4px 0 0; }

package/src/styles/prts.css

@@ -1340,20 +1340,26 @@ html[data-dsh-prts][data-prts-conversation-style="deck-chat"] :is(
   color: var(--prts-ink) !important;
 }
 
-/* Bordered Baker tables need inset cells and a scrollport inside the bubble. */
+/* Baker code cards and tables. */
 html[data-dsh-prts][data-prts-conversation-style="deck-chat"] :is(
-  [data-prts-ai-surface], [data-message-role="assistant"], [data-message-role="user"],
-  :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"]
+[data-prts-ai-surface], [data-message-role="assistant"], [data-message-role="user"],
+:is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"]
 ) {
-  & :is(th,td){padding-inline:14px!important}
-  & :is(.md-table-wide,[class*="_tableScroll_"]){
-    box-sizing:border-box;width:100%;max-width:100%;min-width:0;
-    margin-inline:0!important;padding:0!important;overflow:auto;
-    border:1px solid color-mix(in srgb,var(--prts-cyan) 24%,var(--prts-line));
-    border-radius:10px;corner-shape:round;
-    background:color-mix(in srgb,var(--prts-canvas) 88%,transparent);
-    & > table{border:0;background:transparent;margin:0;width:100%}
-  }
+/* Clip preserves header stickiness. */
+& :has(>[data-code-block-content]){
+box-sizing:border-box;max-width:100%;border:1px solid var(--prts-line);border-left:3px solid var(--prts-cyan);border-radius:12px;overflow:clip;
+& [data-code-block-banner]{border-radius:11px 11px 0 0;background:color-mix(in srgb,var(--prts-ink) 7%,var(--prts-canvas));border-bottom:1px solid var(--prts-line)}
+&>[data-code-block-content] pre{box-sizing:border-box;width:100%;border:0!important;border-radius:0 0 11px 11px;margin:0!important}
+}
+& :is(th,td){padding-inline:14px!important}
+& :is(.md-table-wide,[class*="_tableScroll_"]){
+box-sizing:border-box;width:100%;max-width:100%;min-width:0;
+margin-inline:0!important;padding:0!important;overflow:auto;
+border:1px solid color-mix(in srgb,var(--prts-cyan) 24%,var(--prts-line));
+border-radius:10px;corner-shape:round;
+background:color-mix(in srgb,var(--prts-canvas) 88%,transparent);
+& > table{border:0;background:transparent;margin:0;width:100%}
+}
 }
 
 /* Group process avatars without changing reply alignment or final-answer avatars. */
@@ -1361,10 +1367,10 @@ html[data-dsh-prts][data-prts-conversation-style="deck-chat"] [data-prts-avatar-
 
 /* Baker quote surfaces; classic prose retains the host styling. */
 html[data-dsh-prts][data-prts-conversation-style="deck-chat"] :is([data-chat-flow-kind],[data-message-role],[data-prts-ai-surface],[data-submission-echo]) blockquote {
-  border-radius:10px;corner-shape:round;padding:8px 14px;
-  border-inline-start:3px solid var(--prts-cyan)!important;
-  & > :first-child{margin-top:0}
-  & > :last-child{margin-bottom:0}
+border-radius:10px;corner-shape:round;padding:8px 14px;
+border-inline-start:3px solid var(--prts-cyan)!important;
+& > :first-child{margin-top:0}
+& > :last-child{margin-bottom:0}
 }
 
 html[data-dsh-prts] [aria-invalid="true"],