@steerable/agent-shell-web 0.6.56 → 0.6.58

package/package.json

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

package/src/components/AgentSidebar.tsx

@@ -881,7 +881,9 @@ export function AgentSidebar({
     };
   }, [bridge, handleOpenNewChat]);
 
-  // Auto-load next page when the chat scroller approaches the bottom.
+  // Auto-load next page when the chat scroller approaches the bottom. Project
+  // groups need the complete list: otherwise an older project chat outside the
+  // first page makes its project incorrectly render as empty.
   // Throttled by `isLoadingMoreChats` inside the hook.
   useEffect(() => {
     const container = chatScrollRef.current;
@@ -892,7 +894,9 @@ export function AgentSidebar({
       const nearBottom =
         container.scrollTop + container.clientHeight >=
         container.scrollHeight - 60;
-      if (nearBottom) void loadMoreChats();
+      const needsCompleteProjectGroups =
+        showProjectsChrome && projects.length > 0;
+      if (nearBottom || needsCompleteProjectGroups) void loadMoreChats();
     };
     container.addEventListener("scroll", maybeLoadMore, { passive: true });
     const tickId = window.requestAnimationFrame(maybeLoadMore);
@@ -906,6 +910,8 @@ export function AgentSidebar({
     loadMoreChats,
     isRecentsExpanded,
     normalizedChats.length,
+    projects.length,
+    showProjectsChrome,
   ]);
 
   const hasElectron = hasHostBridge();

package/src/components/TerminalView.tsx

@@ -85,6 +85,18 @@ export function TerminalView({
     //   Cmd+V / Ctrl+Shift+V → 从剪贴板读出来 paste 到 PTY
     //   Cmd/Ctrl+A  → 全选
     const isMac = navigator.platform.toUpperCase().includes('MAC');
+    // WKWebView's navigator.clipboard.readText() is empty or prompts; the
+    // desktop host reads the OS pasteboard directly.
+    const pasteFromClipboard = () => {
+      const readText = bridge?.readClipboardText
+        ? () => bridge.readClipboardText!()
+        : () => navigator.clipboard.readText();
+      void readText()
+        .then((text) => {
+          if (text) term.paste(text);
+        })
+        .catch(() => {});
+    };
     term.attachCustomKeyEventHandler((event) => {
       if (event.type !== 'keydown') return true;
       const mod = isMac ? event.metaKey : event.ctrlKey;
@@ -103,12 +115,8 @@ export function TerminalView({
         (isMac && mod && key === 'v') ||
         (!isMac && event.ctrlKey && event.shiftKey && key === 'v')
       ) {
-        void navigator.clipboard
-          .readText()
-          .then((text) => {
-            if (text) term.paste(text);
-          })
-          .catch(() => {});
+        event.preventDefault();
+        pasteFromClipboard();
         return false;
       }
       if (mod && key === 'a' && !event.shiftKey) {
@@ -125,12 +133,7 @@ export function TerminalView({
         void navigator.clipboard.writeText(sel).catch(() => {});
         term.clearSelection();
       } else {
-        void navigator.clipboard
-          .readText()
-          .then((text) => {
-            if (text) term.paste(text);
-          })
-          .catch(() => {});
+        pasteFromClipboard();
       }
     };
     containerRef.current.addEventListener('contextmenu', onContextMenu);

package/src/components/chat/ChatInput.tsx

@@ -1571,12 +1571,14 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
     };
 
     const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-      if (
-        hostClipboardAvailable() &&
+      // Cmd/Ctrl+V never reaches a paste event when the app menu owns the
+      // shortcut, and WKWebView leaves that event's clipboard empty. Read the
+      // OS pasteboard instead. Match `code` too: with an IME, `key` may not be "v".
+      const pasteShortcut =
         (event.metaKey || event.ctrlKey) &&
         !event.altKey &&
-        event.key.toLowerCase() === 'v'
-      ) {
+        (event.key.toLowerCase() === 'v' || event.key === '\u0016' || event.code === 'KeyV');
+      if (hostClipboardAvailable() && pasteShortcut) {
         event.preventDefault();
         requestHostPaste(event.currentTarget);
         return;

package/src/components/settings/CliInstallSettingsPanel.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import { LuLoader, LuTerminal } from 'react-icons/lu';
+import { t } from '@/i18n';
+import { installCommandLineTool } from '@/lib/local-api';
+
+export function CliInstallSettingsPanel(props: {
+  binName: string;
+  install?: () => Promise<{ path: string; onPath: boolean }>;
+}) {
+  const install = props.install ?? (() => installCommandLineTool(props.binName));
+  const [running, setRunning] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const onClick = async () => {
+    setRunning(true);
+    setMessage(null);
+    setError(null);
+    try {
+      const result = await install();
+      setMessage(result.onPath
+        ? t('Installed {path}', { path: result.path })
+        : t('Installed {path}. Add its directory to PATH.', { path: result.path }));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  return (
+    <div className="space-y-2 rounded-agent-md border border-agent-border bg-agent-card p-2.5" data-testid="cli-install-settings">
+      <p className="text-xs text-agent-muted-foreground">
+        {t('Install the command-line tool on your PATH so you can run it from a terminal.')}
+      </p>
+      <button
+        type="button"
+        data-testid="cli-install-button"
+        onClick={() => void onClick()}
+        disabled={running}
+        className="inline-flex items-center gap-1.5 rounded-agent-md bg-agent-primary px-3 py-1.5 text-xs font-medium text-agent-primary-foreground transition hover:bg-agent-primary/90 disabled:opacity-50"
+      >
+        {running ? (
+          <>
+            <LuLoader className="h-3.5 w-3.5 animate-spin" />
+            {t('Installing…')}
+          </>
+        ) : (
+          <>
+            <LuTerminal className="h-3.5 w-3.5" />
+            {t('Install command-line tool')}
+          </>
+        )}
+      </button>
+      {message && (
+        <p data-testid="cli-install-message" className="text-xs text-agent-foreground">
+          {message}
+        </p>
+      )}
+      {error && (
+        <p data-testid="cli-install-error" className="text-xs text-agent-destructive">
+          {t('Install failed: {error}', { error })}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/layouts/AgentLayout.tsx

@@ -188,6 +188,14 @@ function AgentLayoutContent() {
     });
     return unsubscribe;
   }, []);
+  useEffect(() => {
+    const bridge = getHostBridge();
+    if (!bridge?.onStoreChanged) return;
+    const unsubscribe = bridge.onStoreChanged(() => {
+      void refreshChatsRef.current();
+    });
+    return unsubscribe;
+  }, []);
   useEffect(() => {
     const onImported = () => {
       void refreshChatsRef.current();

package/src/lib/host-bridge.ts

@@ -239,6 +239,11 @@ export interface HostBridge {
   onChatCreated?: (
     callback: (payload: { chatId: string; agentId?: string | null }) => void,
   ) => () => void;
+  /**
+   * 另一个进程提交了宿主库。侧栏据此重新拉会话列表。
+   * 载荷为空；渲染端不依赖里面的字段。
+   */
+  onStoreChanged?: (callback: () => void) => () => void;
   /**
    * 4.6a 后台任务状态推送。任务到达终态或 worktree 合并/丢弃完成时主进程
    * 广播；载荷只有 chatId/taskId，面板收到后重新拉列表。

package/src/lib/host-paste.ts

@@ -42,10 +42,7 @@ export function requestHostPaste(target?: HTMLElement | null): void {
   const readText = bridge?.readClipboardText;
   if ((!readClipboard && !readText) || pending) return;
   pending = true;
-  const read = readClipboard
-    ? readClipboard()
-    : readText!().then((text) => ({ text, files: [] as HostClipboardFile[] }));
-  void read
+  void readHostClipboard(readClipboard, readText)
     .then((clip) => {
       if (clip.files.length > 0) insertHostFiles(clip.files, target ?? null);
       if (clip.text) insertHostText(clip.text, target ?? null);
@@ -58,6 +55,30 @@ export function requestHostPaste(target?: HTMLElement | null): void {
     });
 }
 
+/**
+ * Prefer the rich pasteboard (text, files, screenshots). Desktop capabilities
+ * may allow only `host_read_clipboard_text`; a denial of the rich command must
+ * still insert plain text.
+ */
+function readHostClipboard(
+  readClipboard: (() => Promise<HostClipboard>) | undefined,
+  readText: (() => Promise<string>) | undefined,
+): Promise<HostClipboard> {
+  const plain = (): Promise<HostClipboard> => {
+    if (!readText) return Promise.reject(new Error('clipboard text is unavailable'));
+    return readText().then((text) => ({ text, files: [] }));
+  };
+  if (!readClipboard) return plain();
+  return Promise.resolve()
+    .then(() => readClipboard())
+    .catch((error: unknown) => {
+      if (!readText) throw error;
+      return plain().catch(() => {
+        throw error;
+      });
+    });
+}
+
 export function hostClipboardAvailable(): boolean {
   const bridge = getHostBridge();
   return (
@@ -67,13 +88,23 @@ export function hostClipboardAvailable(): boolean {
 
 function isEditable(target: EventTarget | null): target is HTMLElement {
   return (
-    target instanceof HTMLInputElement ||
-    target instanceof HTMLTextAreaElement ||
-    (target instanceof HTMLElement && target.isContentEditable)
+    !isTerminalInput(target) &&
+    (target instanceof HTMLInputElement ||
+      target instanceof HTMLTextAreaElement ||
+      (target instanceof HTMLElement && target.isContentEditable))
   );
 }
 
+/**
+ * xterm's hidden textarea. The terminal pastes into its PTY itself; text
+ * written into this textarea never reaches the shell.
+ */
+function isTerminalInput(target: EventTarget | null): boolean {
+  return target instanceof HTMLTextAreaElement && target.closest('.xterm') !== null;
+}
+
 function focusedEditable(): HTMLElement | null {
+  if (isTerminalInput(document.activeElement)) return null;
   if (isEditable(document.activeElement)) return document.activeElement;
   if (lastEditable?.isConnected) return lastEditable;
   return null;

package/src/lib/http-bridge.ts

@@ -266,6 +266,8 @@ export function createHttpBridge(): HostBridge {
     onChatCreated: (callback) =>
       subscribeChannel<{ chatId: string; agentId?: string | null }>('chat-created', callback),
 
+    onStoreChanged: (callback) => subscribeChannel('store:changed', () => callback()),
+
     onTaskUpdated: (callback) =>
       subscribeChannel<{ chatId: string; taskId: string }>(
         'task-updated',

package/src/lib/local-api.ts

@@ -767,6 +767,14 @@ export interface DiagnoseResult {
   hint: string | null;
 }
 
+export async function installCommandLineTool(name: string) {
+  return bridge().localBackend.request<{ path: string; onPath: boolean }>({
+    method: 'POST',
+    path: '/api/v2/cli/install',
+    body: { name },
+  });
+}
+
 export async function diagnoseLlmConnection(input: {
   baseUrl?: string;
   apiKey?: string;