@steerable/agent-shell-web 0.6.71 → 0.6.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steerable/agent-shell-web",
-  "version": "0.6.71",
+  "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.71",
-    "@steerable/agent-ui": "0.6.71"
+    "@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.71"
+    "@steerable/pack-sdk": "0.6.73"
   },
   "scripts": {
     "gen": "echo agent-shell-web",

package/src/brand.ts

@@ -3,10 +3,11 @@
  * （VITE_BRAND_* define：product.json brand 优先，其次激活包 pack.json
  * brand，3.1）；logo 资产由激活包的 web 模块在注册时经
  * setBrandLogoUrl() 注入（资产静态 import 在包内，只进本产品 bundle）。
- * 未注入时一律回落到 shell 默认（Steerable Shell / 舵轮标）。
+ * 未注入时一律回落到 shell 默认（Steerable Shell：方形标 + 横版字标）。
  * 主进程侧对应物见 src/brand.ts。
  */
-import shellLogoUrl from '@/assets/logo-steerable.svg';
+import shellMarkUrl from '@/assets/logo-steerable-mark.png';
+import shellWordmarkUrl from '@/assets/logo-steerable-wordmark.png';
 
 /** 当前构建的 flavor（开放字符串，0.3g 起不再是二值联合）。 */
 export const APP_FLAVOR: string = import.meta.env.VITE_APP_FLAVOR ?? 'generic';
@@ -30,25 +31,35 @@ export const BRAND_TITLE: string =
 export const BRAND_HOME_HINT: string =
   import.meta.env.VITE_BRAND_HOME_HINT ?? 'Type a message to start a new chat.';
 
-/** shell 默认 logo（Steerable 舵轮标）；包品牌 logo 由包 web 模块注册覆盖。 */
-let brandLogoUrl: string = shellLogoUrl;
+/** shell 默认方形标，用于侧栏和 favicon。包只注册一枚 logo 时与字标相同。 */
+let brandMarkUrl: string = shellMarkUrl;
+
+/** shell 默认横版字标，用于空对话首屏。包品牌 logo 由包 web 模块注册覆盖。 */
+let brandLogoUrl: string = shellWordmarkUrl;
 
 /**
  * 注册产品品牌 logo（包的 register*Renderer() 在 bootstrap 前调用）。
  * 重复注册抛错（组装期笔误，fail fast——与 node 侧 setProductBrand 同语义）。
+ * 包只提供一枚图，方形标和字标都用它。
  */
 export function setBrandLogoUrl(url: string): void {
-  if (brandLogoUrl !== shellLogoUrl && brandLogoUrl !== url) {
+  if (brandLogoUrl !== shellWordmarkUrl && brandLogoUrl !== url) {
     throw new Error('[brand] logo already set');
   }
   brandLogoUrl = url;
+  brandMarkUrl = url;
 }
 
-/** 当前产品品牌 logo（bootstrap 之后读取——包的注册已完成）。 */
+/** 当前产品品牌字标（bootstrap 之后读取——包的注册已完成）。 */
 export function getBrandLogoUrl(): string {
   return brandLogoUrl;
 }
 
+/** 当前产品方形标。shell 默认是彩色 S；包覆盖后与字标相同。 */
+export function getBrandMarkUrl(): string {
+  return brandMarkUrl;
+}
+
 /** 首页 / 新对话未选手动专家时绑定的内置智能体（包品牌可覆盖）。 */
 export const DEFAULT_AGENT_ID: string =
   import.meta.env.VITE_DEFAULT_AGENT_ID ?? LOCAL_ASSISTANT_AGENT_ID;

package/src/components/BrandLockup.tsx

@@ -1,4 +1,4 @@
-import { BRAND_NAME, BRAND_TITLE, getBrandLogoUrl } from '@/brand';
+import { BRAND_NAME, BRAND_TITLE, getBrandMarkUrl } from '@/brand';
 
 export interface BrandLockupProps {
   className?: string;
@@ -24,7 +24,7 @@ export function BrandLockup({ className, onClick }: BrandLockupProps = {}) {
         .join(' ')}
     >
       <img
-        src={getBrandLogoUrl()}
+        src={getBrandMarkUrl()}
         alt={title || BRAND_NAME}
         className={`${title ? 'h-5' : 'h-6'} w-auto max-w-[10rem] flex-shrink-0 select-none object-contain object-left`}
         draggable={false}

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/EmptyChatHero.tsx

@@ -2,7 +2,7 @@ import { BRAND_HOME_HINT, BRAND_NAME, getBrandLogoUrl } from '@/brand';
 import { t } from '@/i18n';
 
 /**
- * 新对话落地页与空会话首屏的品牌区：侧栏同一枚 logo，加一句
+ * 新对话落地页与空会话首屏的品牌区：横版字标，加一句
  * 产品可配的副文案（brand.homeHint）。
  */
 export function EmptyChatHero() {
@@ -13,7 +13,7 @@ export function EmptyChatHero() {
         <img
           src={getBrandLogoUrl()}
           alt={BRAND_NAME}
-          className="mx-auto h-12 w-auto max-w-[12rem] select-none object-contain"
+          className="mx-auto h-16 w-auto max-w-[18rem] select-none object-contain"
           draggable={false}
         />
       </h1>

package/src/components/chat/TaskOutcomeCards.tsx

@@ -83,17 +83,21 @@ function TaskOutcomeCard({
 
       <div className="min-w-0 flex-1">
         <div
-          className={
+          data-task-outcome-title=""
+          className={`line-clamp-2 break-words ${
             failed
               ? 'text-red-700 dark:text-red-300'
               : 'text-emerald-700 dark:text-emerald-300'
-          }
+          }`}
         >
           {failed ? t('Background task failed: ') : t('Background task completed: ')}
           <span className="font-medium">{task.task}</span>
         </div>
         {detail && (
-          <div className="mt-1 line-clamp-3 whitespace-pre-wrap text-agent-muted-foreground">
+          <div
+            data-task-outcome-detail=""
+            className="mt-1 line-clamp-2 break-words text-agent-muted-foreground"
+          >
             {detail}
           </div>
         )}

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;

package/src/main.tsx

@@ -7,7 +7,7 @@ import { AgentLayout } from './layouts/AgentLayout';
 import { AgentPage } from './pages/AgentPage';
 import { SettingsPage } from './pages/SettingsPage';
 import { getPackRoutes } from './packs/registry';
-import { getBrandLogoUrl, BRAND_NAME } from './brand';
+import { getBrandMarkUrl, BRAND_NAME } from './brand';
 import { getAppShellGate } from './auth/gate';
 import { installHostPaste } from './lib/host-paste';
 import './styles/index.css';
@@ -107,7 +107,11 @@ export async function bootstrap(): Promise<void> {
   document.documentElement.lang = getLocale() === 'zh' ? 'zh-CN' : getLocale();
   window.steerableHost?.setLocale?.(getLocale());
   document.title = BRAND_NAME;
-  document.querySelector<HTMLLinkElement>('link[rel="icon"]')?.setAttribute('href', getBrandLogoUrl());
+  const icon = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+  if (icon) {
+    icon.type = 'image/png';
+    icon.href = getBrandMarkUrl();
+  }
   installHostPaste();
 
   const rootEl = document.getElementById('root');

package/public/favicon.svg

@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
-  <circle cx="24" cy="24" r="17" stroke="#5c6bc0" stroke-width="3.5"/>
-  <circle cx="24" cy="24" r="5" fill="#5c6bc0"/>
-  <g stroke="#5c6bc0" stroke-width="3.5" stroke-linecap="round">
-    <line x1="24" y1="2.5" x2="24" y2="12"/>
-    <line x1="24" y1="36" x2="24" y2="45.5"/>
-    <line x1="2.5" y1="24" x2="12" y2="24"/>
-    <line x1="36" y1="24" x2="45.5" y2="24"/>
-    <line x1="8.8" y1="8.8" x2="15.5" y2="15.5"/>
-    <line x1="32.5" y1="32.5" x2="39.2" y2="39.2"/>
-    <line x1="39.2" y1="8.8" x2="32.5" y2="15.5"/>
-    <line x1="15.5" y1="32.5" x2="8.8" y2="39.2"/>
-  </g>
-</svg>

package/src/assets/logo-steerable.svg

@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
-  <circle cx="24" cy="24" r="17" stroke="#5c6bc0" stroke-width="3.5"/>
-  <circle cx="24" cy="24" r="5" fill="#5c6bc0"/>
-  <g stroke="#5c6bc0" stroke-width="3.5" stroke-linecap="round">
-    <line x1="24" y1="2.5" x2="24" y2="12"/>
-    <line x1="24" y1="36" x2="24" y2="45.5"/>
-    <line x1="2.5" y1="24" x2="12" y2="24"/>
-    <line x1="36" y1="24" x2="45.5" y2="24"/>
-    <line x1="8.8" y1="8.8" x2="15.5" y2="15.5"/>
-    <line x1="32.5" y1="32.5" x2="39.2" y2="39.2"/>
-    <line x1="39.2" y1="8.8" x2="32.5" y2="15.5"/>
-    <line x1="15.5" y1="32.5" x2="8.8" y2="39.2"/>
-  </g>
-</svg>