@oversk7/pi-web-dsh-style 0.1.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 oversk7
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,90 @@
+# @oversk7/pi-web-dsh-style
+
+采用 DeepSeek Harness（DSH）视觉风格、面向 Windows 的非官方 Pi Coding Agent 本地浏览器界面扩展。后端使用 Pi 的公开 RPC 模式，每个会话对应独立的 RPC 进程；历史会话可直接从 Pi 会话文件恢复和渲染。
+
+> 当前版本为 alpha，仅承诺 Windows 10/11。服务只监听 `127.0.0.1`，不应通过端口转发或反向代理暴露到局域网或公网。
+
+## 安装
+
+需要 Node.js 22.19 或更高版本，以及 Pi Coding Agent 0.84.4 或更高版本。
+
+```powershell
+pi install npm:@oversk7/pi-web-dsh-style@alpha
+```
+
+也可以从源码目录安装：
+
+```powershell
+pi install C:\path\to\pi-web
+```
+
+安装后重启 Pi，或执行 `/reload`。
+
+## 使用
+
+直接启动：
+
+```powershell
+pi --web
+```
+
+也可以在 Pi 终端中执行：
+
+```text
+/web
+/web --no-open
+/web --port 18789
+/web --stop
+```
+
+## 功能
+
+- 多工作区、多会话和后台会话并行运行。
+- 按需启动 Pi RPC 进程，最多保留一个空闲进程。
+- 模型、思考等级、中断、压缩和扩展交互对话框。
+- 运行中逐条显示待处理消息，可单条撤回并重新编辑；`Alt+Q` 可将全部队列消息恢复到输入框。
+- 会话历史、分支树、对话回溯及 `pi-rewind` 文件恢复。
+- Windows 系统剪贴板图片和文本粘贴。
+- 会话中的本地文件链接可在右侧分栏预览，支持语法高亮、行定位和拖拽调整宽度。
+- 设置面板内更新扩展并热重载 Pi 运行时，无需退出 Web UI。
+- 会话 HTML 导出。
+
+## 数据与升级
+
+运行状态保存在：
+
+```text
+~/.pi/agent/pi-web/state.json
+```
+
+从旧版目录安装首次升级时，如果新位置尚无状态文件，扩展会从扩展目录中的旧 `state.json` 原样复制并继续使用。旧文件不会被删除或改写，可作为迁移备份。
+
+可用环境变量：
+
+- `PI_WEB_STATE_DIR`：覆盖状态目录。
+- `PI_WEB_STATE_FILE`：覆盖状态文件。
+- `PI_WEB_LEGACY_STATE_FILE`：指定迁移来源。
+- `PI_WEB_RPC_ENTRY`：覆盖 Pi 的公开 RPC 入口文件。
+- `PI_WEB_PI_CLI`：兼容旧版的 Pi CLI 路径覆盖。
+- `PI_WEB_POWERSHELL`：覆盖用于剪贴板读取的 `powershell.exe`。
+
+截图会临时写入系统临时目录，并在 24 小时后或服务停止时清理。Pi 会话内容仍由 Pi 自身保存在其会话目录中。
+
+## 开发验证
+
+```powershell
+npm install
+npm run verify
+npm pack --dry-run
+```
+
+发布 alpha：
+
+```powershell
+npm login --registry=https://registry.npmjs.org
+npm publish --access public --tag alpha
+```
+
+## 许可证
+
+原创代码使用 MIT License。Web UI 的部分样式和设计 token 改编自 DeepSeek Harness，字体资源来自 KaTeX，代码高亮使用 highlight.js。完整归属与许可证见 [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md)。

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,90 @@
+# Third-Party Notices
+
+This package contains adapted web UI styles and bundled font assets from the
+projects below. Their licenses are reproduced here as required.
+
+## DeepSeek Harness
+
+Source: https://github.com/deepseek-ai/deepseek-harness
+
+Portions of the web UI styling and design tokens are adapted from DeepSeek
+Harness.
+
+MIT License
+
+Copyright (c) 2026 DeepSeek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+## KaTeX
+
+Source: https://github.com/KaTeX/KaTeX
+
+The files under `web/assets/fonts/` are distributed by KaTeX.
+
+The MIT License (MIT)
+
+Copyright (c) 2013-2020 Khan Academy and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+## highlight.js
+
+Source: https://github.com/highlightjs/highlight.js
+
+Copyright (c) 2006, Ivan Sagalaev.
+All rights reserved.
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+- Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+- Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+- Neither the name of highlight.js nor the names of its contributors may be
+  used to endorse or promote products derived from this software without
+  specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE REGENTS AND CONTRIBUTORS ``AS IS'' AND ANY
+EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE REGENTS AND CONTRIBUTORS BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/abort-session.ts

@@ -0,0 +1,150 @@
+import type { Json } from "./pi-rpc.ts";
+
+export interface AbortRequestResult {
+  acknowledged: boolean;
+  response?: Json;
+  errorMessage?: string;
+}
+
+export interface ClearedRpcQueue {
+  supported: boolean;
+  steering: string[];
+  followUp: string[];
+  response?: Json;
+  errorMessage?: string;
+}
+
+export type RpcQueueKind = "steering" | "followUp";
+
+export interface RpcQueueSnapshot {
+  steering: string[];
+  followUp: string[];
+}
+
+export interface RpcQueueItemTarget {
+  kind: RpcQueueKind;
+  index: number;
+  message: string;
+}
+
+export interface WithdrawRpcQueueResult {
+  supported: boolean;
+  withdrawn: boolean;
+  queue: RpcQueueSnapshot;
+  unrestored: RpcQueueSnapshot;
+  errorMessage?: string;
+}
+
+function stringArray(value: unknown): string[] {
+  return Array.isArray(value) ? value.filter((item): item is string => typeof item === "string") : [];
+}
+
+function emptyQueue(): RpcQueueSnapshot {
+  return { steering: [], followUp: [] };
+}
+
+function queueFromEntries(entries: Array<{ kind: RpcQueueKind; message: string }>): RpcQueueSnapshot {
+  const queue = emptyQueue();
+  for (const entry of entries) queue[entry.kind].push(entry.message);
+  return queue;
+}
+
+async function restoreRpcQueue(
+  proc: { send(command: Json, timeoutMs?: number): Promise<Json> },
+  queue: RpcQueueSnapshot,
+  timeoutMs: number,
+): Promise<{ queue: RpcQueueSnapshot; unrestored: RpcQueueSnapshot; errorMessage?: string }> {
+  const entries: Array<{ kind: RpcQueueKind; message: string }> = [
+    ...queue.steering.map((message) => ({ kind: "steering" as const, message })),
+    ...queue.followUp.map((message) => ({ kind: "followUp" as const, message })),
+  ];
+  const restored: Array<{ kind: RpcQueueKind; message: string }> = [];
+  for (let index = 0; index < entries.length; index += 1) {
+    const entry = entries[index];
+    try {
+      await proc.send({ type: entry.kind === "steering" ? "steer" : "follow_up", message: entry.message }, timeoutMs);
+      restored.push(entry);
+    } catch (error) {
+      return {
+        queue: queueFromEntries(restored),
+        unrestored: queueFromEntries(entries.slice(index)),
+        errorMessage: error instanceof Error ? error.message : String(error),
+      };
+    }
+  }
+  return { queue: queueFromEntries(restored), unrestored: emptyQueue() };
+}
+
+export async function requestRpcClearQueue(
+  proc: { send(command: Json, timeoutMs?: number): Promise<Json> },
+  timeoutMs: number,
+): Promise<ClearedRpcQueue> {
+  try {
+    const response = await proc.send({ type: "clear_queue" }, timeoutMs);
+    const data = response.data && typeof response.data === "object" ? response.data as Json : {};
+    return {
+      supported: true,
+      steering: stringArray(data.steering),
+      followUp: stringArray(data.followUp),
+      response,
+    };
+  } catch (error) {
+    return {
+      supported: false,
+      steering: [],
+      followUp: [],
+      errorMessage: error instanceof Error ? error.message : String(error),
+    };
+  }
+}
+
+export async function requestRpcWithdrawQueueItem(
+  proc: { send(command: Json, timeoutMs?: number): Promise<Json> },
+  target: RpcQueueItemTarget,
+  timeoutMs: number,
+): Promise<WithdrawRpcQueueResult> {
+  const cleared = await requestRpcClearQueue(proc, timeoutMs);
+  if (!cleared.supported) {
+    return {
+      supported: false,
+      withdrawn: false,
+      queue: emptyQueue(),
+      unrestored: emptyQueue(),
+      errorMessage: cleared.errorMessage,
+    };
+  }
+
+  const remaining: RpcQueueSnapshot = {
+    steering: [...cleared.steering],
+    followUp: [...cleared.followUp],
+  };
+  const targetQueue = remaining[target.kind];
+  const withdrawn = Number.isInteger(target.index)
+    && target.index >= 0
+    && targetQueue[target.index] === target.message;
+  if (withdrawn) targetQueue.splice(target.index, 1);
+
+  const restored = await restoreRpcQueue(proc, remaining, timeoutMs);
+  return {
+    supported: true,
+    withdrawn,
+    queue: restored.queue,
+    unrestored: restored.unrestored,
+    errorMessage: restored.errorMessage,
+  };
+}
+
+export async function requestRpcAbort(
+  proc: { send(command: Json, timeoutMs?: number): Promise<Json> },
+  timeoutMs: number,
+): Promise<AbortRequestResult> {
+  try {
+    const response = await proc.send({ type: "abort" }, timeoutMs);
+    return { acknowledged: true, response };
+  } catch (error) {
+    return {
+      acknowledged: false,
+      errorMessage: error instanceof Error ? error.message : String(error),
+    };
+  }
+}

package/attachment-store.ts

@@ -0,0 +1,161 @@
+import { randomUUID } from "node:crypto";
+import { readFile, unlink, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+
+export interface ImageAttachmentMeta {
+  id: string;
+  mimeType: string;
+  size: number;
+  createdAt: number;
+  expiresAt: number;
+}
+
+interface StoredImageAttachment extends ImageAttachmentMeta {
+  path: string;
+  timer: ReturnType<typeof setTimeout>;
+}
+
+type PublicMimeDetector = (filePath: string) => Promise<string | null>;
+
+let publicMimeDetector: Promise<PublicMimeDetector | null> | undefined;
+
+async function resolvePublicMimeDetector(): Promise<PublicMimeDetector | null> {
+  publicMimeDetector ??= import("@earendil-works/pi-coding-agent").then((module) => {
+    const detector = (module as unknown as { detectSupportedImageMimeTypeFromFile?: unknown })
+      .detectSupportedImageMimeTypeFromFile;
+    return typeof detector === "function" ? detector as PublicMimeDetector : null;
+  });
+  return publicMimeDetector;
+}
+
+function fallbackImageMimeType(bytes: Uint8Array): string | null {
+  const ascii = (start: number, value: string) => value.split("").every(
+    (char, index) => bytes[start + index] === char.charCodeAt(0),
+  );
+  if (bytes.length >= 16
+    && [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a].every((value, index) => bytes[index] === value)
+    && ascii(12, "IHDR")) return "image/png";
+  if (bytes.length >= 3 && bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff) return "image/jpeg";
+  if (bytes.length >= 6 && (ascii(0, "GIF87a") || ascii(0, "GIF89a"))) return "image/gif";
+  if (bytes.length >= 12 && ascii(0, "RIFF") && ascii(8, "WEBP")) return "image/webp";
+  if (bytes.length >= 26 && ascii(0, "BM")) return "image/bmp";
+  return null;
+}
+
+async function detectImageMimeType(path: string, bytes: Uint8Array): Promise<string | null> {
+  const detector = await resolvePublicMimeDetector();
+  return detector ? detector(path) : fallbackImageMimeType(bytes);
+}
+
+export interface ImageAttachmentStoreOptions {
+  directory?: string;
+  ttlMs?: number;
+  maxBytes?: number;
+  maxPromptImages?: number;
+}
+
+export class ImageAttachmentStore {
+  readonly maxPromptImages: number;
+  private readonly directory: string;
+  private readonly ttlMs: number;
+  private readonly maxBytes: number;
+  private readonly entries = new Map<string, StoredImageAttachment>();
+
+  constructor(options: ImageAttachmentStoreOptions = {}) {
+    this.directory = options.directory ?? tmpdir();
+    this.ttlMs = options.ttlMs ?? 24 * 60 * 60 * 1000;
+    this.maxBytes = options.maxBytes ?? 15 * 1024 * 1024;
+    this.maxPromptImages = options.maxPromptImages ?? 4;
+  }
+
+  async create(bytes: Uint8Array): Promise<ImageAttachmentMeta> {
+    if (bytes.byteLength === 0) throw new Error("图片内容为空");
+    if (bytes.byteLength > this.maxBytes) {
+      throw new Error(`图片不能超过 ${Math.floor(this.maxBytes / 1024 / 1024)} MB`);
+    }
+
+    const id = randomUUID();
+    const path = join(this.directory, `pi-web-attachment-${id}.img`);
+    await writeFile(path, bytes);
+    try {
+      const mimeType = await detectImageMimeType(path, bytes);
+      if (!mimeType) throw new Error("不支持的图片格式");
+      const createdAt = Date.now();
+      const expiresAt = createdAt + this.ttlMs;
+      const timer = setTimeout(() => {
+        void this.remove(id);
+      }, this.ttlMs);
+      timer.unref();
+      const stored: StoredImageAttachment = {
+        id,
+        path,
+        mimeType,
+        size: bytes.byteLength,
+        createdAt,
+        expiresAt,
+        timer,
+      };
+      this.entries.set(id, stored);
+      return this.meta(stored);
+    } catch (error) {
+      await unlink(path).catch(() => {});
+      throw error;
+    }
+  }
+
+  get(id: string): ImageAttachmentMeta | undefined {
+    const stored = this.entries.get(id);
+    if (!stored) return undefined;
+    if (stored.expiresAt <= Date.now()) {
+      void this.remove(id);
+      return undefined;
+    }
+    return this.meta(stored);
+  }
+
+  async read(id: string): Promise<{ meta: ImageAttachmentMeta; bytes: Buffer }> {
+    const stored = this.entries.get(id);
+    if (!stored || stored.expiresAt <= Date.now()) {
+      if (stored) await this.remove(id);
+      throw new Error("图片附件不存在或已过期");
+    }
+    return { meta: this.meta(stored), bytes: await readFile(stored.path) };
+  }
+
+  async imagesForRpc(ids: string[]): Promise<Array<{ type: "image"; data: string; mimeType: string }>> {
+    const uniqueIds = [...new Set(ids)];
+    if (uniqueIds.length > this.maxPromptImages) {
+      throw new Error(`每条消息最多附加 ${this.maxPromptImages} 张图片`);
+    }
+    const images = [];
+    for (const id of uniqueIds) {
+      const { meta, bytes } = await this.read(id);
+      images.push({ type: "image" as const, data: bytes.toString("base64"), mimeType: meta.mimeType });
+    }
+    return images;
+  }
+
+  async remove(id: string): Promise<boolean> {
+    const stored = this.entries.get(id);
+    if (!stored) return false;
+    this.entries.delete(id);
+    clearTimeout(stored.timer);
+    await unlink(stored.path).catch(() => {});
+    return true;
+  }
+
+  async close(): Promise<void> {
+    await Promise.all([...this.entries.keys()].map((id) => this.remove(id)));
+  }
+
+  private meta(stored: StoredImageAttachment): ImageAttachmentMeta {
+    return {
+      id: stored.id,
+      mimeType: stored.mimeType,
+      size: stored.size,
+      createdAt: stored.createdAt,
+      expiresAt: stored.expiresAt,
+    };
+  }
+}

package/file-preview.ts

@@ -0,0 +1,94 @@
+import { basename, extname } from "node:path";
+import hljs from "highlight.js/lib/common";
+import dockerfile from "highlight.js/lib/languages/dockerfile";
+import powershell from "highlight.js/lib/languages/powershell";
+
+hljs.registerLanguage("dockerfile", dockerfile);
+hljs.registerLanguage("powershell", powershell);
+
+const MAX_HIGHLIGHT_BYTES = 512 * 1024;
+
+const LANGUAGES_BY_EXTENSION: Record<string, string> = {
+  ".bash": "bash",
+  ".c": "c",
+  ".cc": "cpp",
+  ".cjs": "javascript",
+  ".cpp": "cpp",
+  ".cs": "csharp",
+  ".css": "css",
+  ".cts": "typescript",
+  ".go": "go",
+  ".h": "c",
+  ".hpp": "cpp",
+  ".htm": "xml",
+  ".html": "xml",
+  ".java": "java",
+  ".js": "javascript",
+  ".json": "json",
+  ".jsonc": "json",
+  ".jsx": "javascript",
+  ".md": "markdown",
+  ".mdx": "markdown",
+  ".mjs": "javascript",
+  ".mts": "typescript",
+  ".ps1": "powershell",
+  ".psd1": "powershell",
+  ".psm1": "powershell",
+  ".py": "python",
+  ".rs": "rust",
+  ".sh": "bash",
+  ".sql": "sql",
+  ".svg": "xml",
+  ".ts": "typescript",
+  ".tsx": "typescript",
+  ".xml": "xml",
+  ".yaml": "yaml",
+  ".yml": "yaml",
+};
+
+const LANGUAGES_BY_FILENAME: Record<string, string> = {
+  dockerfile: "dockerfile",
+  makefile: "makefile",
+};
+
+export interface FilePreviewData {
+  path: string;
+  name: string;
+  language: string;
+  highlighted: boolean;
+  highlightedHtml: string;
+  lineCount: number;
+  size: number;
+}
+
+function escapeHtml(value: string): string {
+  return value.replace(/[&<>]/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" })[char]!);
+}
+
+export function buildFilePreview(filePath: string, data: Buffer): FilePreviewData {
+  const name = basename(filePath);
+  const text = data.toString("utf8").replace(/^\uFEFF/, "").replace(/\r\n?/g, "\n");
+  const language = LANGUAGES_BY_FILENAME[name.toLowerCase()] ?? LANGUAGES_BY_EXTENSION[extname(name).toLowerCase()] ?? "plaintext";
+  const canHighlight = data.byteLength <= MAX_HIGHLIGHT_BYTES && Boolean(hljs.getLanguage(language));
+  let highlightedHtml = escapeHtml(text);
+  let highlighted = false;
+
+  if (canHighlight) {
+    try {
+      highlightedHtml = hljs.highlight(text, { language, ignoreIllegals: true }).value;
+      highlighted = true;
+    } catch {
+      // Plain escaped text remains readable when a grammar rejects the input.
+    }
+  }
+
+  return {
+    path: filePath,
+    name,
+    language,
+    highlighted,
+    highlightedHtml,
+    lineCount: text.split("\n").length,
+    size: data.byteLength,
+  };
+}