@pactor-app/chat 1.15.6 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pactor-app/chat",
-  "version": "1.15.6",
+  "version": "1.16.0",
   "description": "Pactor chat: AI message rendering protocol (message model, streaming reducer, safe registry, capability action) and chat runtime view (ChatView / MessageBubble / PartRenderer / Composer / chat layout)",
   "keywords": [
     "pactor",
@@ -49,11 +49,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@pactor-app/core": "1.15.6",
-    "@pactor-app/markdown": "1.15.6",
-    "@pactor-app/ui": "1.15.6",
-    "@pactor-app/permission": "1.15.6",
-    "@pactor-app/runtime": "1.15.6"
+    "@pactor-app/core": "1.16.0",
+    "@pactor-app/permission": "1.16.0",
+    "@pactor-app/runtime": "1.16.0",
+    "@pactor-app/markdown": "1.16.0",
+    "@pactor-app/ui": "1.16.0"
   },
   "peerDependencies": {
     "react": ">=18"

package/styles.css

@@ -75,10 +75,22 @@
      默认 3rem），theme-studio 生成的皮肤可直接覆盖两者 */
   --pactor-chat-shell-topbar-height: 44px;
   --pactor-chat-shell-scrim: rgb(0 0 0 / 40%);
-  /* 产出物面板（spec: chat-artifact-panel）：桌面固定宽右栏 */
-  --pactor-chat-inspector-width: 320px;
+  /* 产出物面板（spec: chat-artifact-panel）：桌面固定宽右栏。
+     默认宽与对话列一致（--pactor-chat-content-width），
+     拖拽调宽下限为 --pactor-chat-inspector-min-width；
+     背景略深于聊天区底色，视觉上与消息流区分 */
+  --pactor-chat-inspector-width: var(--pactor-chat-content-width);
+  --pactor-chat-inspector-min-width: 320px;
+  --pactor-chat-inspector-bg: color-mix(
+    in srgb,
+    var(--pactor-chat-bg) 96%,
+    black
+  );
   /* 对话列限宽居中（spec: chat-app-shell 嵌入契约）：置 none 关闭限宽 */
   --pactor-chat-content-width: 768px;
+  /* 对话列左右最小内间距（spec: chat-artifact-panel / 拖拽调宽）：
+     面板调宽挤压剩余空间时，对话列左右始终保留该间距 */
+  --pactor-chat-content-gutter: 16px;
 }
 
 .pactor-chat-view {
@@ -188,8 +200,11 @@
   height: 100%;
   min-height: 0;
   /* 对话列缺省限宽居中（spec: chat-app-shell 嵌入契约）：
-   * shell content / 面板 host / 独立块级容器三场景统一生效 */
-  width: 100%;
+   * shell content / 面板 host / 独立块级容器三场景统一生效。
+   * width 用 calc 预留 gutter——产物栏调宽挤压时，max-width 限宽
+   * 失效（剩余空间不足）后左右仍恒保留 --pactor-chat-content-gutter
+   * 内间距，不会贴到容器边缘或面板分隔线 */
+  width: calc(100% - 2 * var(--pactor-chat-content-gutter));
   max-width: var(--pactor-chat-content-width);
   margin-inline: auto;
   color: var(--pactor-chat-fg);
@@ -321,14 +336,29 @@
   min-width: 0;
 }
 
+/* 对话列左右最小内间距（gutter 契约，spec: chat-artifact-panel / 拖拽调宽）：
+ * 对话列自身的 calc 宽度在 flex 行内会把面板宽度一并计入 100% 基准，
+ * shrink 后 margin auto 塌到 0；因此面板打开时的 gutter 由容器侧保证——
+ * 左：host padding-left；右：面板 margin-left（对话列与分隔线的间距）。
+ * 面板关闭（:has 不命中）时不加 host padding，避免与对话列 calc 重复计算 */
+.pactor-chat-inspector-host:has(> .pactor-chat-inspector) {
+  padding-left: var(--pactor-chat-content-gutter);
+}
+
+.pactor-chat-inspector-host > .pactor-chat-inspector {
+  margin-left: var(--pactor-chat-content-gutter);
+}
+
 .pactor-chat-inspector {
   position: relative;
   display: flex;
   flex-direction: column;
-  width: var(--pactor-chat-inspector-width);
+  /* 默认宽对齐对话列；上限 70% host（与拖拽夹取一致），下限 min-width 令牌 */
+  width: min(var(--pactor-chat-inspector-width), 70%);
+  min-width: var(--pactor-chat-inspector-min-width);
   flex-shrink: 0;
   border-left: 1px solid var(--pactor-chat-border);
-  background: var(--pactor-chat-bg);
+  background: var(--pactor-chat-inspector-bg);
   color: var(--pactor-chat-fg);
   font-size: 14px;
   line-height: 1.6;
@@ -384,6 +414,107 @@
   flex-shrink: 0;
 }
 
+.pactor-chat-inspector__list-toggle {
+  flex-shrink: 0;
+}
+
+/* 多产物 tab 条（spec: chat-artifact-panel / 多产物切换）：
+ * header 下沿横向滚动条；激活 tab 以底色 + 底部分隔反色标识 */
+.pactor-chat-inspector__tabs {
+  display: flex;
+  gap: 2px;
+  padding: 4px 8px 0;
+  border-bottom: 1px solid var(--pactor-chat-border);
+  overflow-x: auto;
+  flex-shrink: 0;
+}
+
+.pactor-chat-inspector__tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 180px;
+  padding: 6px 10px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--pactor-chat-muted-fg);
+  font-size: 12px;
+  line-height: 18px;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.pactor-chat-inspector__tab:hover {
+  color: var(--pactor-chat-fg);
+}
+
+.pactor-chat-inspector__tab[data-active='true'] {
+  color: var(--pactor-chat-fg);
+  border-bottom-color: var(--pactor-chat-primary);
+  font-weight: 600;
+}
+
+.pactor-chat-inspector__tab-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 产物目录列表视图（spec: chat-artifact-panel / 产物目录）：
+ * 目录（可折叠）+ 产物行（kind 图标 + 名称 + kind 角标） */
+.pactor-chat-inspector__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pactor-chat-inspector__list-children {
+  padding-left: 18px;
+}
+
+.pactor-chat-inspector__list-folder,
+.pactor-chat-inspector__list-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 8px;
+  border: none;
+  border-radius: var(--pactor-chat-radius-sm);
+  background: transparent;
+  color: var(--pactor-chat-fg);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.pactor-chat-inspector__list-folder {
+  color: var(--pactor-chat-muted-fg);
+}
+
+.pactor-chat-inspector__list-folder:hover,
+.pactor-chat-inspector__list-item:hover {
+  background: var(--pactor-chat-muted);
+}
+
+.pactor-chat-inspector__list-item[data-active='true'] {
+  background: var(--pactor-chat-muted);
+  font-weight: 600;
+}
+
+.pactor-chat-inspector__list-folder[data-open='true'] .pactor-chat-trace__chevron {
+  transform: rotate(90deg);
+}
+
+.pactor-chat-inspector__list-item-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .pactor-chat-inspector__body {
   flex: 1;
   min-height: 0;
@@ -396,6 +527,20 @@
   position: relative;
 }
 
+/* 图片类产出物（spec: chat-artifact-panel / 常见文件预览）：
+ * 居中自适应面板宽；svg 原始标记经 data URL 呈现 */
+.pactor-chat-inspector__image {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.pactor-chat-inspector__image img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--pactor-chat-radius-sm);
+}
+
 .pactor-chat-inspector__code pre {
   margin: 0;
   padding: 10px 12px;
@@ -443,6 +588,9 @@
     right: 0;
     z-index: 50;
     box-shadow: var(--pactor-chat-shadow-composer);
+    /* 抽屉形态：宽度不超出视口，下限令牌不适用 */
+    width: min(var(--pactor-chat-inspector-width), 92vw);
+    min-width: 0;
   }
 
   /* 窄屏覆盖抽屉形态：不显示拖拽手柄（spec scenario: 窄屏无拖拽手柄） */
@@ -1725,14 +1873,27 @@ button.pactor-chat-trace__header:hover,
   margin: 1em 0;
 }
 
+.pactor-markdown h3 {
+  font-size: 1.1em;
+}
+
 .pactor-markdown h2 {
-  font-size: 1.2rem;
-  font-weight: 600;
+  font-size: 1.2em;
 }
 
 .pactor-markdown h1 {
   font-size: 1.3rem;
+}
+
+.pactor-markdown h1,
+.pactor-markdown h2,
+.pactor-markdown h3,
+.pactor-markdown h4,
+.pactor-markdown h5,
+.pactor-markdown h6 {
   font-weight: 600;
+  margin-top: .5em;
+  margin-bottom: .5em;
 }
 
 .pactor-chat-thinking {