@steerable/agent-shell-web 0.6.46 → 0.6.48

package/package.json

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

package/src/components/AgentSidebar.tsx

@@ -70,7 +70,7 @@
  *   │   ...（无项目对话，按日期分组）  │ ← 无项目排在项目分组之后
  *   ├─────────────────────────────────┤
  *   │ ▢_ 终端                 ⌘T     │
- *   │ ⚙ 设置                          │ ← /settings（模型 + 洞察/遥测/用量/搜索/安全）
+ *   │ ⚙ 设置                   v0.2.2 │ ← /settings；右侧是当前版本，检查更新在设置页
  *   └─────────────────────────────────┘
  *
  * 项目模式：项目 = 名字 + 托管家目录（Documents/<应用名>/<项目名>/）+
@@ -117,6 +117,10 @@ import {
 import type { UseChatsAndAgentsResult } from "@/hooks/useChatsAndAgents";
 import type { RightPanelState } from "@/layouts/AgentLayout";
 import { BrandLockup } from "@/components/BrandLockup";
+import {
+  SidebarVersionLabel,
+  useAppRelease,
+} from "@/components/SidebarRelease";
 import { CreateProjectModal } from "@/components/CreateProjectModal";
 
 const DEFAULT_DOT_COLOR = "#7c3aed";
@@ -285,6 +289,7 @@ export function AgentSidebar({
   const location = useLocation();
   const { chatId: currentChatId } = useParams<{ chatId?: string }>();
   const bridge = getElectronBridge();
+  const release = useAppRelease();
   const onSettingsPage = location.pathname === "/settings";
   // /settings?section=skills|mcp|agents|（缺省 = 综合设置）—— 各自高亮。
   const settingsSection = useMemo(
@@ -1085,8 +1090,14 @@ export function AgentSidebar({
         >
           <LuSettings className="h-3.5 w-3.5" />
           <span>设置</span>
+          <SidebarVersionLabel release={release} />
         </button>
         )}
+        {!hasGeneralSettingsChrome() && release.version ? (
+          <div className="mt-0.5 flex h-7 w-full items-center px-2.5">
+            <SidebarVersionLabel release={release} />
+          </div>
+        ) : null}
       </div>
 
       {projectMenu &&

package/src/components/SidebarRelease.tsx

@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+  sidebarReleaseView,
+  type AppReleaseView,
+} from '@/lib/app-release';
+import {
+  getElectronBridge,
+  type AppReleaseSnapshot,
+} from '@/lib/electron-bridge';
+
+export function useAppRelease(): AppReleaseView & { run: () => void } {
+  const [snap, setSnap] = useState<AppReleaseSnapshot | null>(null);
+  const [confirmedCurrent, setConfirmedCurrent] = useState(false);
+
+  useEffect(() => {
+    const app = getElectronBridge()?.app;
+    if (!app) return;
+    let alive = true;
+    void app.snapshot().then((next) => {
+      if (alive) setSnap(next);
+    }).catch(() => {});
+    const off = app.onState((next) => {
+      if (!alive) return;
+      setSnap(next);
+      if (next.phase !== 'idle') setConfirmedCurrent(false);
+    });
+    return () => {
+      alive = false;
+      off();
+    };
+  }, []);
+
+  const run = useCallback(() => {
+    const app = getElectronBridge()?.app;
+    if (!app || !snap || !snap.enabled) return;
+    if (snap.phase !== 'idle' && snap.phase !== 'error' && snap.phase !== 'ready') return;
+    const task = snap.phase === 'ready' ? app.install() : app.check();
+    void task
+      .then((next) => {
+        setSnap(next);
+        setConfirmedCurrent(next.phase === 'idle' && !next.availableVersion);
+      })
+      .catch((error: unknown) => {
+        setConfirmedCurrent(false);
+        setSnap({
+          ...snap,
+          phase: 'error',
+          message: error instanceof Error ? error.message : String(error),
+        });
+      });
+  }, [snap]);
+
+  return { ...sidebarReleaseView(snap, confirmedCurrent), run };
+}
+
+export function SidebarVersionLabel({ release }: { release: AppReleaseView }) {
+  if (!release.version) return null;
+  return (
+    <span
+      className="ml-auto text-[10px] tabular-nums text-agent-muted-foreground/70"
+      data-testid="sidebar-app-version"
+      title={`当前版本 ${release.version}`}
+    >
+      v{release.version}
+    </span>
+  );
+}

package/src/components/settings/AppUpdateSettingsPanel.tsx

@@ -0,0 +1,56 @@
+import { LuInfo } from 'react-icons/lu';
+import { useAppRelease } from '@/components/SidebarRelease';
+
+/**
+ * 综合设置里的版本与更新。侧栏只显示版本号；检查、下载和安装在这里。
+ * 没有桌面更新通道时不渲染。
+ */
+export function AppUpdateSettingsPanel() {
+  const release = useAppRelease();
+  if (!release.version) return null;
+  const detail =
+    release.actionTitle && release.actionTitle !== release.actionLabel
+      ? release.actionTitle
+      : null;
+
+  return (
+    <section className="space-y-2" data-testid="settings-section-update">
+      <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
+        <LuInfo className="h-3.5 w-3.5 text-agent-muted-foreground" />
+        关于
+      </h2>
+      <div className="flex items-center gap-3 rounded-agent-md border border-agent-border bg-agent-card p-2.5">
+        <div className="min-w-0 flex-1">
+          <p className="text-xs font-medium text-agent-foreground">当前版本</p>
+          <p
+            className="mt-1 text-xs tabular-nums text-agent-muted-foreground"
+            data-testid="settings-app-version"
+          >
+            v{release.version}
+          </p>
+          {detail ? (
+            <p className="mt-1 text-xs leading-relaxed text-agent-muted-foreground">{detail}</p>
+          ) : null}
+        </div>
+        {release.actionLabel ? (
+          <button
+            type="button"
+            className={[
+              'flex h-7 shrink-0 items-center rounded-full px-3 text-xs transition-colors',
+              release.emphasize
+                ? 'bg-agent-foreground font-medium text-agent-canvas hover:opacity-90'
+                : 'border border-agent-border text-agent-foreground hover:bg-agent-foreground/5',
+              release.clickable ? '' : 'cursor-default opacity-60',
+            ].join(' ')}
+            data-testid="settings-app-update"
+            title={release.actionTitle}
+            disabled={!release.clickable}
+            onClick={release.run}
+          >
+            {release.actionLabel}
+          </button>
+        ) : null}
+      </div>
+    </section>
+  );
+}

package/src/lib/app-release.ts

@@ -0,0 +1,66 @@
+import type { AppReleasePhase, AppReleaseSnapshot } from './electron-bridge';
+
+export interface AppReleaseView {
+  version: string | null;
+  actionLabel: string | null;
+  actionTitle?: string;
+  clickable: boolean;
+  /** 已下载、可以重启安装。 */
+  emphasize: boolean;
+}
+
+export function sidebarUpdateClickable(phase: AppReleasePhase): boolean {
+  return phase === 'idle' || phase === 'error' || phase === 'ready';
+}
+
+export function sidebarUpdateLabel(
+  snap: AppReleaseSnapshot,
+  confirmedCurrent: boolean,
+): string | null {
+  if (!snap.enabled || snap.phase === 'disabled') return null;
+  switch (snap.phase) {
+    case 'checking':
+      return '检查中';
+    case 'downloading':
+      return typeof snap.percent === 'number' ? `下载 ${Math.round(snap.percent)}%` : '下载中';
+    case 'ready':
+      return snap.availableVersion ? `升级 ${snap.availableVersion}` : '升级';
+    case 'installing':
+      return '正在安装';
+    case 'error':
+      return '重试';
+    case 'idle':
+      if (snap.availableVersion) return `发现 ${snap.availableVersion}`;
+      if (snap.message) return snap.message;
+      return confirmedCurrent ? '已是最新' : '检查更新';
+    default:
+      return '检查更新';
+  }
+}
+
+export function sidebarUpdateTitle(snap: AppReleaseSnapshot): string | undefined {
+  if (snap.phase === 'error' || (snap.phase === 'idle' && snap.availableVersion)) {
+    return snap.message;
+  }
+  if (snap.phase === 'ready' && snap.availableVersion) {
+    return `重启并安装 ${snap.availableVersion}`;
+  }
+  if (snap.phase === 'downloading') return '正在下载更新';
+  return undefined;
+}
+
+export function sidebarReleaseView(
+  snap: AppReleaseSnapshot | null,
+  confirmedCurrent: boolean,
+): AppReleaseView {
+  if (!snap?.version) {
+    return { version: null, actionLabel: null, clickable: false, emphasize: false };
+  }
+  return {
+    version: snap.version,
+    actionLabel: sidebarUpdateLabel(snap, confirmedCurrent),
+    actionTitle: sidebarUpdateTitle(snap),
+    clickable: snap.enabled && sidebarUpdateClickable(snap.phase),
+    emphasize: snap.phase === 'ready',
+  };
+}

package/src/lib/electron-bridge.ts

@@ -88,6 +88,28 @@ export interface TerminalSpawnOptions {
   rows?: number;
 }
 
+export type AppReleasePhase =
+  | 'disabled'
+  | 'idle'
+  | 'checking'
+  | 'downloading'
+  | 'ready'
+  | 'installing'
+  | 'error';
+
+/**
+ * 桌面版本与更新。`version` 是当前安装版本，`availableVersion` 是待安装版本。
+ * 与主进程 `AppReleaseSnapshot` 对齐。
+ */
+export interface AppReleaseSnapshot {
+  version: string;
+  enabled: boolean;
+  phase: AppReleasePhase;
+  availableVersion?: string;
+  percent?: number;
+  message?: string;
+}
+
 export interface HostBridge {
   runtime: 'local';
   platform: NodeJS.Platform;
@@ -246,6 +268,15 @@ export interface HostBridge {
       }) => void,
     ) => () => void;
   };
+  /**
+   * 桌面版本与更新。Electron / Tauri 提供；浏览器预览没有这一段。
+   */
+  app?: {
+    snapshot: () => Promise<AppReleaseSnapshot>;
+    check: () => Promise<AppReleaseSnapshot>;
+    install: () => Promise<AppReleaseSnapshot>;
+    onState: (callback: (snapshot: AppReleaseSnapshot) => void) => () => void;
+  };
   // 场景包的 invoke 命名空间（如包 preload 贡献的 `<pack>` / `<pack>Mock`）
   // 不进本接口——包用自己的结构化收窄访问器（见各包 web/bridge.ts），
   // shell 桥接口保持产品中立（3.1）。

package/src/lib/tauri-bridge.ts

@@ -8,7 +8,7 @@
 import { invoke } from '@tauri-apps/api/core';
 import { listen, type UnlistenFn } from '@tauri-apps/api/event';
 import html2canvas from 'html2canvas';
-import type { HostBridge } from './electron-bridge';
+import type { AppReleaseSnapshot, HostBridge } from './electron-bridge';
 import { createHttpBridge } from './http-bridge';
 
 type VoidCallback = () => void;
@@ -85,6 +85,27 @@ export function createTauriBridge(): HostBridge {
     offMenuNewChat: newChatMenu.off,
     onMenuOpenTerminal: terminalMenu.on,
     offMenuOpenTerminal: terminalMenu.off,
+    app: {
+      snapshot: () => invoke<AppReleaseSnapshot>('app_release_snapshot'),
+      check: () => invoke<AppReleaseSnapshot>('app_release_check'),
+      install: () => invoke<AppReleaseSnapshot>('app_release_install'),
+      onState(callback) {
+        let unlisten: UnlistenFn | undefined;
+        let cancelled = false;
+        const pending = listen<AppReleaseSnapshot>('app-update-state', (event) => {
+          callback(event.payload);
+        });
+        void pending.then((stop) => {
+          if (cancelled) stop();
+          else unlisten = stop;
+        });
+        return () => {
+          cancelled = true;
+          if (unlisten) unlisten();
+          else void pending.then((stop) => stop());
+        };
+      },
+    },
   };
 }
 

package/src/pages/SettingsPage.tsx

@@ -4,6 +4,7 @@ import { useOutletContext, useSearchParams } from 'react-router-dom';
 import { isElectron } from '@/lib/electron-bridge';
 import { AgentsSettingsPanel } from '@/components/settings/AgentsSettingsPanel';
 import { AppearanceSettingsPanel } from '@/components/settings/AppearanceSettingsPanel';
+import { AppUpdateSettingsPanel } from '@/components/settings/AppUpdateSettingsPanel';
 import { DiagnoseSettingsPanel } from '@/components/settings/DiagnoseSettingsPanel';
 import { InsightsSettingsPanel } from '@/components/settings/InsightsSettingsPanel';
 import {
@@ -36,7 +37,7 @@ function resolveSection(raw: string | null): SettingsSection {
  *   - `skills`  侧栏「Skill 设置」
  *   - `mcp`     侧栏「MCP 设置」
  *   - `agents`  侧栏「智能体管理」
- *   - 缺省/`general`  侧栏底「设置」（界面 / 模型 / 搜索 / 用量 / 安全 / 洞察 / 遥测）
+ *   - 缺省/`general`  侧栏底「设置」（界面 / 模型 / 搜索 / 用量 / 安全 / 洞察 / 遥测 / 关于）
  *
  * Panel 数据自管理（挂载即拉取），页面本身不持有后端状态。
  */
@@ -216,6 +217,8 @@ export function SettingsPage() {
                   <panel.Component />
                 </section>
               ))}
+
+              <AppUpdateSettingsPanel />
             </>
           )}
         </div>