@steerable/agent-shell-web 0.6.21 → 0.6.22

package/README.md

@@ -17,4 +17,10 @@ bundle; there is no prebuilt `dist/` here. See
 [`docs/spec/architecture.md`](https://github.com/pathlyapp/steerable-framework/blob/develop/docs/spec/architecture.md)
 for the tier model.
 
+Products that require authentication can register an `AppShellGate` from
+`@steerable/agent-shell-web/auth/gate` before calling `bootstrap()`. An
+enabled gate renders before the application router and calls
+`onAuthenticated` to continue normal bootstrap. With no gate, or a disabled
+gate, startup is unchanged.
+
 License: Apache-2.0.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steerable/agent-shell-web",
-  "version": "0.6.21",
+  "version": "0.6.22",
   "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",
@@ -14,6 +14,7 @@
     "url": "https://github.com/pathlyapp/steerable-framework/issues"
   },
   "exports": {
+    "./auth/gate": "./src/auth/gate.ts",
     "./vite.base": {
       "types": "./vite.base.d.ts",
       "default": "./vite.base.js"
@@ -45,8 +46,8 @@
     "react-router-dom": "^6.30.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "@steerable/agent-ui": "0.6.21",
-    "@steerable/agent-protocol": "0.6.21"
+    "@steerable/agent-ui": "0.6.22",
+    "@steerable/agent-protocol": "0.6.22"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.0",
@@ -59,7 +60,7 @@
     "typescript": "^5.8.3",
     "vite": "^5.4.21",
     "vitest": "^3.2.4",
-    "@steerable/pack-sdk": "0.6.21"
+    "@steerable/pack-sdk": "0.6.22"
   },
   "scripts": {
     "gen": "echo agent-shell-web",

package/src/auth/gate.ts

@@ -0,0 +1,26 @@
+import type { ComponentType } from 'react';
+
+/**
+ * Optional product-provided gate rendered before the application router.
+ */
+export interface AppShellGate {
+  /** Allows one product entry to disable its gate for unsupported runtimes. */
+  enabled(): boolean;
+  /** Renders authentication UI and resumes bootstrap through the callback. */
+  Component: ComponentType<{ onAuthenticated: () => void }>;
+}
+
+let registeredGate: AppShellGate | null = null;
+
+/** Registers the app-shell gate before calling `bootstrap()`. */
+export function registerAppShellGate(gate: AppShellGate): void {
+  if (registeredGate) {
+    throw new Error('[app-shell-gate] a gate is already registered');
+  }
+  registeredGate = gate;
+}
+
+/** Returns the product-provided gate, if one was registered. */
+export function getAppShellGate(): AppShellGate | null {
+  return registeredGate;
+}

package/src/components/ChatHeader.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { LuCheck, LuGitBranch, LuListTodo, LuListTree, LuLoaderCircle } from 'react-icons/lu';
-import type { LocalChat, LocalChatAgent, LocalTask } from '@/lib/local-api';
+import type { LocalChat, LocalTask } from '@/lib/local-api';
 import {
   activateChatBranch,
   getChatBranches,
@@ -13,7 +13,6 @@ import { actionableTasks, summarizeTasks, type ChatTaskSummary } from './chat/us
 
 interface ChatHeaderProps {
   chat: LocalChat | null;
-  agent: LocalChatAgent | null;
   /**
    * W1.2.1: called after the active branch switches — the page re-hydrates
    * the message list from the re-projected store. When provided (and the
@@ -29,8 +28,6 @@ interface ChatHeaderProps {
 /**
  * ChatHeader — slim title bar above ChatPanel. Shows:
  *   - chat title (完整显示，长标题换行不截断)
- *   - bound agent name + icon (read-only here; switching is done from the
- *     sidebar's expert team list)
  *   - shortened chat id (for support / debugging)
  *
  * Terminal / 场景包调试窗 / 本地模型设置 USED to live here, but per the
@@ -40,7 +37,6 @@ interface ChatHeaderProps {
  */
 export function ChatHeader({
   chat,
-  agent,
   onBranchSwitched,
   onInspectTask,
   tasks = [],
@@ -186,18 +182,6 @@ export function ChatHeader({
         >
           {chat?.title ?? '未选择对话'}
         </span>
-        <span className="shrink-0 text-xs text-agent-muted-foreground">
-          {agent ? (
-            <>
-              <span className="mr-0.5">{agent.icon || '🤖'}</span>
-              {agent.name}
-            </>
-          ) : chat?.agentId ? (
-            <span className="font-mono">{chat.agentId}</span>
-          ) : (
-            <span className="italic">no agent</span>
-          )}
-        </span>
         {chat && (
           <span className="hidden shrink-0 font-mono text-[10px] text-agent-muted-foreground/70 md:inline">
             {shortenId(chat.id)}

package/src/fixtures/browser-dev-data.json

@@ -10,7 +10,7 @@
       "icon": "Cpu",
       "color": "#4f46e5",
       "description": "默认本地助手，可调用 shell、文件与 MCP 工具。",
-      "rolePrompt": "你是本地离线助手，回答时清晰、可执行。",
+      "rolePrompt": "你是 **电脑操作员**，本地离线助手，回答时清晰、可执行。",
       "forbiddenPrompt": null,
       "skillIds": [],
       "toolPolicy": {

package/src/main.tsx

@@ -1,5 +1,5 @@
 import { StrictMode, lazy, Suspense, type ReactNode } from 'react';
-import { createRoot } from 'react-dom/client';
+import { createRoot, type Root } from 'react-dom/client';
 import { createHashRouter, RouterProvider } from 'react-router-dom';
 import { AppShell } from './AppShell';
 import { AgentLayout } from './layouts/AgentLayout';
@@ -7,6 +7,7 @@ import { AgentPage } from './pages/AgentPage';
 import { SettingsPage } from './pages/SettingsPage';
 import { getPackRoutes } from './packs/registry';
 import { getBrandLogoUrl, BRAND_NAME } from './brand';
+import { getAppShellGate } from './auth/gate';
 import './styles/index.css';
 
 // 浏览器 dev mock 的安装在 bootstrap() 开头（动态 import + DEV 门）。
@@ -40,19 +41,7 @@ const ChatPanelPreviewPage = import.meta.env.DEV
  * （products/<id>/web/main.tsx）先静态调用包的 register*Renderer()，
  * 再调本函数——路由注册发生在路由表创建之前。
  */
-export async function bootstrap(): Promise<void> {
-  if (import.meta.env.DEV) {
-    // 动态 import：prod 构建里 Rollup 把 DEV 分支连同 mock（含其 fixtures）
-    // 整体树摇掉，浏览器 dev mock 数据不进产物。
-    const { installBrowserDevElectronMock } = await import('./lib/browser-dev-electron-mock');
-    installBrowserDevElectronMock();
-  }
-
-  // 标题与 favicon 在 bootstrap 时设置——此刻产品入口已完成包注册
-  // （品牌 logo 由包经 setBrandLogoUrl 注入，见 brand.ts）。
-  document.title = BRAND_NAME;
-  document.querySelector<HTMLLinkElement>('link[rel="icon"]')?.setAttribute('href', getBrandLogoUrl());
-
+function renderApplication(root: Root): void {
   const router = createHashRouter([
     {
       path: '/',
@@ -90,14 +79,47 @@ export async function bootstrap(): Promise<void> {
     },
   ]);
 
+  root.render(
+    <StrictMode>
+      <RouterProvider router={router} />
+    </StrictMode>,
+  );
+}
+
+export async function bootstrap(): Promise<void> {
+  if (import.meta.env.DEV) {
+    // 动态 import：prod 构建里 Rollup 把 DEV 分支连同 mock（含其 fixtures）
+    // 整体树摇掉，浏览器 dev mock 数据不进产物。
+    const { installBrowserDevElectronMock } = await import('./lib/browser-dev-electron-mock');
+    installBrowserDevElectronMock();
+  }
+
+  // 标题与 favicon 在 bootstrap 时设置——此刻产品入口已完成包注册
+  // （品牌 logo 由包经 setBrandLogoUrl 注入，见 brand.ts）。
+  document.title = BRAND_NAME;
+  document.querySelector<HTMLLinkElement>('link[rel="icon"]')?.setAttribute('href', getBrandLogoUrl());
+
   const rootEl = document.getElementById('root');
   if (!rootEl) {
     throw new Error('Missing #root element in index.html');
   }
+  const root = createRoot(rootEl);
+  const gate = getAppShellGate();
+  if (gate?.enabled()) {
+    let authenticated = false;
+    const onAuthenticated = () => {
+      if (authenticated) return;
+      authenticated = true;
+      renderApplication(root);
+    };
+    const Gate = gate.Component;
+    root.render(
+      <StrictMode>
+        <Gate onAuthenticated={onAuthenticated} />
+      </StrictMode>,
+    );
+    return;
+  }
 
-  createRoot(rootEl).render(
-    <StrictMode>
-      <RouterProvider router={router} />
-    </StrictMode>,
-  );
+  renderApplication(root);
 }

package/src/pages/AgentPage.tsx

@@ -1008,7 +1008,6 @@ function AgentChatView({
         header={
           <ChatHeader
             chat={chat}
-            agent={agent}
             onBranchSwitched={isElectron() ? onBranchTick : undefined}
             onInspectTask={ctx.inspectTask}
             tasks={tasks}

package/src/pages/ChatPanelPreviewPage.tsx

@@ -242,7 +242,7 @@ export function ChatPanelPreviewPage() {
           onCancel={() => {}}
           className="flex-1"
           header={
-            <ChatHeader chat={MOCK_CHAT} agent={MOCK_AGENT} />
+            <ChatHeader chat={MOCK_CHAT} />
           }
           inputPlaceholder="预览模式 — 输入不会真的发送…"
           agents={[MOCK_AGENT]}