pi-web-ui 0.73.0 → 0.74.0

package/README.zh-CN.md

@@ -101,19 +101,25 @@
 
 ## 界面截图
 
-<table>
-  <tr>
-    <td align="center"><img src="https://raw.githubusercontent.com/xing-shuyin/pi-web-ui/main/assets/chat-prompts.jpeg" alt="对话 + 提示词模板"><br><sub>对话 + 提示词模板</sub></td>
-    <td align="center"><img src="https://raw.githubusercontent.com/xing-shuyin/pi-web-ui/main/assets/trajectory.jpeg" alt="运行轨迹时间线"><br><sub>运行轨迹时间线（run-trace 插件）</sub></td>
-  </tr>
-  <tr>
-    <td align="center"><img src="https://raw.githubusercontent.com/xing-shuyin/pi-web-ui/main/assets/settings.jpeg" alt="设置面板"><br><sub>设置面板</sub></td>
-    <td align="center"><img src="https://raw.githubusercontent.com/xing-shuyin/pi-web-ui/main/assets/terminal.jpeg" alt="内置终端"><br><sub>内置终端</sub></td>
-  </tr>
-  <tr>
-    <td align="center" colspan="2"><img src="https://raw.githubusercontent.com/xing-shuyin/pi-web-ui/main/assets/git.jpeg" alt="Git 源代码管理面板"><br><sub>Git 源代码管理面板</sub></td>
-  </tr>
-</table>
+![对话 + 提示词模板](https://raw.githubusercontent.com/xing-shuyin/pi-web-ui/main/assets/chat-prompts.jpeg)
+
+*对话 + 提示词模板*
+
+![运行轨迹时间线](https://raw.githubusercontent.com/xing-shuyin/pi-web-ui/main/assets/trajectory.jpeg)
+
+*运行轨迹时间线（run-trace 插件）*
+
+![设置面板](https://raw.githubusercontent.com/xing-shuyin/pi-web-ui/main/assets/settings.jpeg)
+
+*设置面板*
+
+![内置终端](https://raw.githubusercontent.com/xing-shuyin/pi-web-ui/main/assets/terminal.jpeg)
+
+*内置终端*
+
+![Git 源代码管理面板](https://raw.githubusercontent.com/xing-shuyin/pi-web-ui/main/assets/git.jpeg)
+
+*Git 源代码管理面板*
 
 ## 安装
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pi-web-ui",
-	"version": "0.73.0",
+	"version": "0.74.0",
 	"description": "Web chat interface for the pi coding agent, powered by the pi SDK (@earendil-works/pi-coding-agent) — one-command run, Docker/systemd/launchd deployable",
 	"license": "MIT",
 	"author": {

package/themes/cyberpunk.css

@@ -43,6 +43,9 @@
 	--tooltip-bg: #232733;
 	--code-bg: #0b0d12;
 	--code-text: #c9d1d9;
+	--code-border: var(--border-soft);
+	--code-pad: 8px 10px;
+	--card-body-pad: 4px 14px 12px;
 	--err-text: #f0a5a5;
 	--red-text: #fca5a5;
 	--amber-text: #fcd34d;

package/themes/dazzle.css

@@ -43,6 +43,9 @@
 	--tooltip-bg: #232733;
 	--code-bg: #0b0d12;
 	--code-text: #c9d1d9;
+	--code-border: var(--border-soft);
+	--code-pad: 8px 10px;
+	--card-body-pad: 4px 14px 12px;
 	--err-text: #f0a5a5;
 	--red-text: #fca5a5;
 	--amber-text: #fcd34d;

package/themes/md-preview.css

@@ -43,6 +43,9 @@
 	--tooltip-bg: #232733;
 	--code-bg: #0b0d12;
 	--code-text: #c9d1d9;
+	--code-border: var(--border-soft);
+	--code-pad: 8px 10px;
+	--card-body-pad: 4px 14px 12px;
 	--err-text: #f0a5a5;
 	--red-text: #fca5a5;
 	--amber-text: #fcd34d;

package/themes/transparent.css

@@ -11,7 +11,9 @@
  *
  * 全透后 hover/浮动反馈不能依赖容器色（已是 0%），本文件尾段把这些实色
  * hover 统一改成 25% 半透底（折叠摘要、展开条、折叠键、复制键、滚到底按钮）；
- * 强调色 hover（accent-soft）与语义按钮（发送/停止/杀进程）不受影响。
+ * 强调色 hover（accent-soft）与大部分语义按钮（发送/杀进程）不受影响；
+ * 例外是 bash 工具卡的「停止」键（.toolcall-kill）：红底红字在全透下是一块脏红，
+ * 改成描边式（透明底 + 半透红描边 + 亮红字）。
  * 下拉弹窗（声音/语言/主题/模型/思考强度等 .dd-menu）保持实色
  * （--menu-bg: var(--bg-elev2)），密集列表不随界面透图。
  * 配壁纸用最佳；不配壁纸时界面直接透出 --bg 纯色（= 默认暗色，无差别）。
@@ -59,12 +61,25 @@
 	   控件 / 输入框 / 消息区）直接变 transparent；终端 --term-bg 上面已设
 	   transparent。想留一点点玻璃感就把这里提到 10~15%。---- */
 	--wallpaper-panel-alpha: 0%;
+	/* 工具参数 / 工具输出 / 终端行（.toolcall-args pre / .toolcall-output pre /
+	   .termline）：全透下这三处无容器色（--chip-bg = 0%），实色边框与外凸的
+	   内边距只会把文字推出对齐线并横向切断壁纸，这里一并去掉。
+	   markdown 围栏代码块 .codeblock pre 仍保留边框与内边距。 */
+	--code-border: transparent;
+	--code-pad: 0;
 	/* 下拉弹窗（声音/语言/主题/模型/思考强度）：实色底保密集列表可读 */
 	--menu-bg: var(--bg-elev2);
 	/* 压暗加重：全透后没有容器色兜底，文字只靠压暗保可读 */
 	--bg-image-dim: 0.85;
 }
 
+/* 全透：工具卡内部不再保留重复的终端图标。无容器色兜底时（--chip-bg = 0%），绿色
+   终端图标只剩视觉噪音（卡头已有工具图标）。卡片内边距仍走 --card-body-pad
+   （与思考块 .thinking-body 同值），文字左缘与思考块对齐。 */
+.termline-icon {
+	display: none;
+}
+
 /* hover / 浮动静置反馈：0% 容器色下这些实色 hover 必消失，统一给 25% 半透
    底（仍透图、可辨反馈）。强调色 hover（accent-soft）与语义按钮不受影响；
    下拉弹窗已在实色菜单内，其 hover 保留 styles.css 默认实色。 */
@@ -75,4 +90,19 @@
 .empty-templates-reset:hover,
 .scroll-bottom {
 	background: color-mix(in srgb, var(--bg-elev) 25%, transparent);
-}
+}
+
+/* bash 工具卡的「停止」键：全透下不做实底。容器色为 0% 时，--red-soft 底 +
+   实红描边在壁纸上是一块洗不干净的脏红，改成「透明底 + 半透红描边 + 亮红字」——
+   与卡片里其他描边元素同一种克制感；hover 才落一层 78% 半透红（仍透图，
+   不成为实色块）。 */
+.toolcall-kill {
+	background: transparent;
+	border-color: color-mix(in srgb, var(--red) 55%, transparent);
+	color: color-mix(in srgb, var(--red) 88%, #fff);
+}
+.toolcall-kill:hover {
+	background: color-mix(in srgb, var(--red) 78%, transparent);
+	border-color: var(--red);
+	color: #fff;
+}

package/themes/white.css

@@ -43,6 +43,9 @@
 	--tooltip-bg: #ffffff;
 	--code-bg: #f6f8fa;
 	--code-text: #1f2937;
+	--code-border: var(--border-soft);
+	--code-pad: 8px 10px;
+	--card-body-pad: 4px 14px 12px;
 	--err-text: #dc2626;
 	--red-text: #dc2626;
 	--amber-text: #b45309;

package/web/dist/assets/{TerminalPanel-Bz-58xBx.js → TerminalPanel-DgR_8K2X.js}

@@ -1,4 +1,4 @@
-import{a as l,j as n}from"./markdown-Cpo0pNcR.js";import{u as P,b as O,T as M,a as W,F as Y,c as z,d as Z,e as H,f as ee,g as ne,h as te,i as se,r as ae}from"./index-DB1SxjbK.js";import{D as re,o as ie}from"./xterm-B96xOxS9.js";import"./react-CtudoG1_.js";function le(t){let c=null;return{clean:t.replace(/\r?\n?\[pi-term-exit:(-?\d+)\]\r?\n?/g,(a,x)=>(c=Number(x),`\r
+import{a as l,j as n}from"./markdown-Cpo0pNcR.js";import{u as P,b as O,T as M,a as W,F as Y,c as z,d as Z,e as H,f as ee,g as ne,h as te,i as se,r as ae}from"./index-BplWuHvM.js";import{D as re,o as ie}from"./xterm-B96xOxS9.js";import"./react-CtudoG1_.js";function le(t){let c=null;return{clean:t.replace(/\r?\n?\[pi-term-exit:(-?\d+)\]\r?\n?/g,(a,x)=>(c=Number(x),`\r
 `)).replace(/\r?\n?\x1b\[90m\[(?:进程已退出，退出码 |Process exited with code )-?\d+\]\x1b\[0m\r?\n?/g,`\r
 `),exitCode:c}}function ce({conversationId:t,terminalId:c,command:p,cwd:a,title:x,active:u,running:v,exitCode:j,send:h,register:C}){const T=l.useRef(null),y=l.useRef(null),{locale:o}=P(),N=l.useRef(o);N.current=o;const E=p?JSON.stringify(p):"";l.useEffect(()=>{const m=T.current;if(!m)return;const r=new re({theme:O(),fontFamily:'"SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace',fontSize:13,cursorBlink:!0,scrollback:8e3}),b=new ie;r.loadAddon(b),r.open(m),y.current={term:r,fit:b},u&&r.focus();const g=()=>{r.options.theme=O()};window.addEventListener(M,g),r.attachCustomKeyEventHandler(d=>{if(d.type!=="keydown")return!0;const S=d.key?.toLowerCase();if((d.ctrlKey||d.metaKey)&&S==="v")return!1;if(d.ctrlKey&&!d.shiftKey&&!d.altKey&&S==="c"&&r.hasSelection()){const D=r.textarea;return D&&(D.value=r.getSelection(),D.select()),!1}return!0});const _=C(t,c,{write:d=>r.write(le(d).clean),dispose:()=>r.dispose()}),$=()=>{try{b.fit(),h({type:"terminal_resize",terminalId:c,conversationId:t,cols:r.cols,rows:r.rows})}catch{}},B=requestAnimationFrame(()=>{try{b.fit()}catch{}h(p?{type:"run_command",terminalId:c,conversationId:t,command:p,cols:r.cols,rows:r.rows}:{type:"terminal_create",terminalId:c,title:x,locale:N.current,conversationId:t,cwd:a,cols:r.cols,rows:r.rows})}),R=r.onData(d=>{h({type:"terminal_input",terminalId:c,conversationId:t,data:d})});let k=null;return typeof ResizeObserver<"u"&&(k=new ResizeObserver(()=>{m.offsetWidth>0&&m.offsetHeight>0&&$()}),k.observe(m)),()=>{cancelAnimationFrame(B),R.dispose(),window.removeEventListener(M,g),k?.disconnect(),_(),r.dispose(),y.current=null}},[t,c,E,h,C]),l.useEffect(()=>{if(!u)return;const m=requestAnimationFrame(()=>{const r=y.current;if(r){try{r.fit.fit(),h({type:"terminal_resize",terminalId:c,conversationId:t,cols:r.term.cols,rows:r.term.rows})}catch{}r.term.focus()}});return()=>cancelAnimationFrame(m)},[u]);const{t:F}=P(),f=l.useRef(void 0);return l.useEffect(()=>{if(v===f.current||(f.current=v,v!==!1))return;const m=y.current;m&&m.term.write(`\r
 \x1B[90m${F("exitBanner",{code:j??""})}\x1B[0m\r