@steerable/agent-shell-web 0.6.72 → 0.6.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steerable/agent-shell-web",
-  "version": "0.6.72",
+  "version": "0.6.73",
   "type": "module",
   "description": "Steerable framework — product-neutral renderer SPA source for @steerable/agent-shell (React + Vite). Consumed by product web entry points via the `@/` alias (anchored at this package's src/) and the createProductViteConfig factory. Published as a source package (src/), plus the compiled vite.base config factory (vite.base.js + .d.ts) for Node-side config loading.",
   "license": "Apache-2.0",
@@ -45,8 +45,8 @@
     "react-router-dom": "^6.30.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "@steerable/agent-protocol": "0.6.72",
-    "@steerable/agent-ui": "0.6.72"
+    "@steerable/agent-protocol": "0.6.73",
+    "@steerable/agent-ui": "0.6.73"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.0",
@@ -59,7 +59,7 @@
     "typescript": "^5.8.3",
     "vite": "^5.4.21",
     "vitest": "^3.2.4",
-    "@steerable/pack-sdk": "0.6.72"
+    "@steerable/pack-sdk": "0.6.73"
   },
   "scripts": {
     "gen": "echo agent-shell-web",

package/src/components/chat/AssistantMessage.tsx

@@ -442,7 +442,7 @@ export function AssistantMessage({
             回合收尾才有数据，流式期间天然为空。 */}
         {!isStreaming && turnFiles && turnFiles.length > 0 && (
           <div className="mt-2.5 mb-1">
-            <TurnFilesCard files={turnFiles} executedActions={executedActions} />
+            <TurnFilesCard files={turnFiles} executedActions={executedActions} chatId={chatId} />
           </div>
         )}
         <div className="mt-2 flex items-center gap-2 text-[11px] text-agent-muted-foreground/80">

package/src/components/chat/TurnFilesCard.tsx

@@ -3,6 +3,7 @@ import {
   LuCheck,
   LuChevronDown,
   LuCopy,
+  LuDownload,
   LuExternalLink,
   LuFile,
   LuFileDiff,
@@ -14,7 +15,8 @@ import {
   LuPresentation,
   LuUndo2,
 } from 'react-icons/lu';
-import { openLocalPath } from '@/lib/local-api';
+import { getLocalFileDownload, openLocalPath } from '@/lib/local-api';
+import { saveBase64AsFile } from '@/lib/download';
 import { hostToolChrome } from '@/lib/host-tools';
 import { t } from '@/i18n';
 import {
@@ -46,11 +48,15 @@ export interface ExecutedActionLike {
 interface TurnFilesCardProps {
   files: TurnFile[];
   executedActions?: ExecutedActionLike[];
+  /** 当前会话：浏览器模式下载回合产物必须带 chatId 交给后端做归属校验。 */
+  chatId?: string | null;
 }
 
-export function TurnFilesCard({ files, executedActions }: TurnFilesCardProps) {
+export function TurnFilesCard({ files, executedActions, chatId }: TurnFilesCardProps) {
   const [openingPath, setOpeningPath] = useState<string | null>(null);
   const [openError, setOpenError] = useState<{ path: string; message: string } | null>(null);
+  const [downloadingPath, setDownloadingPath] = useState<string | null>(null);
+  const [downloadError, setDownloadError] = useState<{ path: string; message: string } | null>(null);
   const allowOpenPath = hostToolChrome('local-fs');
 
   const { deliverables, intermediates, totalAdditions, totalDeletions } = groupTurnFiles(
@@ -80,6 +86,27 @@ export function TurnFilesCard({ files, executedActions }: TurnFilesCardProps) {
     }
   };
 
+  const handleDownload = async (filePath: string) => {
+    if (!chatId) {
+      setDownloadError({ path: filePath, message: t('Chat is not ready for download') });
+      return;
+    }
+    if (downloadingPath) return;
+    setDownloadingPath(filePath);
+    setDownloadError(null);
+    try {
+      const file = await getLocalFileDownload(chatId, filePath);
+      saveBase64AsFile(file);
+    } catch (err) {
+      setDownloadError({
+        path: filePath,
+        message: err instanceof Error ? err.message : String(err),
+      });
+    } finally {
+      setDownloadingPath(null);
+    }
+  };
+
   const handleReveal = async (filePath: string) => {
     const { dir } = splitTurnFilePath(filePath);
     const targetDir = dir || filePath;
@@ -96,10 +123,14 @@ export function TurnFilesCard({ files, executedActions }: TurnFilesCardProps) {
               key={file.path}
               file={file}
               onOpen={() => void handleOpen(file.path)}
+              onDownload={() => void handleDownload(file.path)}
               onReveal={() => void handleReveal(file.path)}
               busy={openingPath === file.path}
+              downloading={downloadingPath === file.path}
               error={openError?.path === file.path ? openError.message : null}
+              downloadError={downloadError?.path === file.path ? downloadError.message : null}
               allowOpen={allowOpenPath}
+              allowDownload={Boolean(chatId)}
             />
           ))}
         </div>
@@ -128,19 +159,27 @@ export function TurnFilesCard({ files, executedActions }: TurnFilesCardProps) {
 interface DeliverableCardProps {
   file: TurnFile;
   onOpen: () => void;
+  onDownload: () => void;
   onReveal: () => void;
   busy: boolean;
+  downloading: boolean;
   error: string | null;
+  downloadError: string | null;
   allowOpen: boolean;
+  allowDownload: boolean;
 }
 
 function DeliverableCard({
   file,
   onOpen,
+  onDownload,
   onReveal,
   busy,
+  downloading,
   error,
+  downloadError,
   allowOpen,
+  allowDownload,
 }: DeliverableCardProps) {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const [copied, setCopied] = useState(false);
@@ -209,8 +248,23 @@ function DeliverableCard({
           </div>
         </div>
 
-        {/* 右侧：Open in ⌵ 动作按钮 */}
-        <div className="relative shrink-0" ref={menuRef}>
+        {/* 右侧：下载 + Open in ⌵ 动作按钮 */}
+        <div className="relative flex shrink-0 items-center gap-1.5" ref={menuRef}>
+          <button
+            type="button"
+            onClick={onDownload}
+            disabled={!allowDownload || downloading}
+            title={file.path}
+            className="flex h-[26px] items-center gap-1 rounded-agent-md border border-agent-border bg-agent-canvas px-2 text-xs font-medium text-agent-foreground shadow-xs transition-colors hover:border-agent-border/80 hover:bg-agent-muted/50 disabled:opacity-50"
+          >
+            {downloading ? (
+              <LuLoaderCircle className="h-3.5 w-3.5 animate-spin text-agent-muted-foreground" />
+            ) : (
+              <LuDownload className="h-3.5 w-3.5 text-agent-muted-foreground" />
+            )}
+            <span>{t('Download')}</span>
+          </button>
+
           <div className="flex items-center rounded-agent-md border border-agent-border bg-agent-canvas shadow-xs hover:border-agent-border/80 transition-colors">
             <button
               type="button"
@@ -285,6 +339,11 @@ function DeliverableCard({
           {t('Could not open: {error}', { error })}
         </div>
       )}
+      {downloadError && (
+        <div className="mt-2 px-1 text-[11px] text-agent-destructive" role="status">
+          {t('Could not download: {error}', { error: downloadError })}
+        </div>
+      )}
     </div>
   );
 }

package/src/lib/download.ts

@@ -0,0 +1,35 @@
+/**
+ * 渲染层下载工具。宿主已经把文件读成 base64，这里只负责解码、落 Blob，
+ * 触发浏览器的 <a download> —— 桌面端点“用系统应用打开”没问题，但团队版
+ * / 浏览器模式没有本地文件系统入口，下载必须走这条纯浏览器路径。
+ */
+
+export interface Base64Download {
+  fileName: string;
+  base64: string;
+  /** 缺省 `application/octet-stream`，浏览器仍按文件名保存。 */
+  mime?: string;
+}
+
+/** base64 → 字节。分块解码，避免大文件一次性 `charCodeAt` 阻塞太久。 */
+export function base64ToBytes(base64: string) {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(new ArrayBuffer(binary.length));
+  for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
+  return bytes;
+}
+
+/** 把 base64 内容落成浏览器下载。调用方负责文件大小与授权校验。 */
+export function saveBase64AsFile(input: Base64Download): void {
+  const bytes = base64ToBytes(input.base64);
+  const blob = new Blob([bytes], { type: input.mime || 'application/octet-stream' });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = input.fileName || 'download';
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  // Safari 需要等一拍再释放 ObjectURL，否则可能取消尚未开始的下载。
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}

package/src/lib/local-api.ts

@@ -416,6 +416,25 @@ export async function openLocalPath(targetPath: string) {
   });
 }
 
+/** 回合产物下载内容：base64 字节 + 浏览器下载所需文件名与 MIME。 */
+export interface LocalFileDownload {
+  fileName: string;
+  mime: string;
+  size: number;
+  base64: string;
+}
+
+/**
+ * 读取本会话回合产物文件，交给浏览器落盘下载。CS（Tauri）与 BS（团队版）
+ * 两种宿主都经 localBackend 通道，浏览器模式不再依赖“系统应用打开”。
+ */
+export async function getLocalFileDownload(chatId: string, targetPath: string) {
+  return bridge().localBackend.request<LocalFileDownload>({
+    method: 'GET',
+    path: `/api/v2/local/download?chatId=${encodeURIComponent(chatId)}&path=${encodeURIComponent(targetPath)}`,
+  });
+}
+
 /** 后端确认存在的路径：`candidate` 是正文里的原字面量，`path` 是落地绝对路径。 */
 export interface ResolvedLocalPath {
   candidate: string;