@steerable/agent-shell-web 0.6.66 → 0.6.68

package/package.json

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

package/src/components/AgentSidebar.tsx

@@ -114,6 +114,7 @@ import {
   nextProjectOrder,
   type ProjectDropPlace,
 } from "@/lib/project-order";
+import { chatActivityTime, latestActivityTime } from "@/lib/sidebar-order";
 import type { RightPanelState } from "@/layouts/AgentLayout";
 import { BrandLockup } from "@/components/BrandLockup";
 import { ConfirmDialog } from "@/components/ConfirmDialog";
@@ -389,6 +390,10 @@ export function AgentSidebar({
   const [streamingChatIds, setStreamingChatIds] = useState<Set<string>>(
     () => new Set(),
   );
+  // 回合已经开始、列表里的 updatedAt 还没刷新时，用这个时间把会话抬到前面。
+  const [liveActivityAt, setLiveActivityAt] = useState<ReadonlyMap<string, number>>(
+    () => new Map(),
+  );
   const pendingAskUserChatIds = usePendingAskUserChatIds();
   const pendingApprovalChatIds = usePendingApprovalChatIds();
 
@@ -409,6 +414,14 @@ export function AgentSidebar({
         }
         return next;
       });
+      if (isStreaming) {
+        setLiveActivityAt((prev) => {
+          if (prev.has(chatId)) return prev;
+          const next = new Map(prev);
+          next.set(chatId, Date.now());
+          return next;
+        });
+      }
     };
     window.addEventListener("chat:streaming-change", handleStreamingChange);
     return () => {
@@ -419,6 +432,25 @@ export function AgentSidebar({
     };
   }, []);
 
+  // 列表里的 updatedAt 追上本地时间后丢掉抬升，避免旧回合一直占在最前。
+  useEffect(() => {
+    setLiveActivityAt((prev) => {
+      if (prev.size === 0) return prev;
+      let changed = false;
+      const next = new Map(prev);
+      for (const [id, stamp] of prev) {
+        if (streamingChatIds.has(id)) continue;
+        const chat = chats.find((item) => item.id === id);
+        const updated = chat?.updatedAt ? Date.parse(chat.updatedAt) : Number.NaN;
+        if (!chat || (Number.isFinite(updated) && updated >= stamp)) {
+          next.delete(id);
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [chats, streamingChatIds]);
+
   // 当前打开的会话由 AgentChatView 自己报开始/结束。切走后的会话回合还在
   // 后端跑，卸载时不会再报结束，这里用 live-stream 对账，结束后摘掉指示。
   const seenActiveBackgroundRef = useRef<Set<string>>(new Set());
@@ -752,35 +784,31 @@ export function AgentSidebar({
   const normalizedChats = useMemo(() => {
     return chats
       .map((chat) => {
-        const updated = chat.updatedAt ? new Date(chat.updatedAt) : null;
-        const created = new Date(chat.createdAt);
-        const sortDate =
-          updated && !Number.isNaN(updated.getTime())
-            ? updated
-            : !Number.isNaN(created.getTime())
-              ? created
-              : new Date();
         const { displayTitle, isAutomation } = parseChatTitle(chat.title);
         return {
           id: chat.id,
           title: displayTitle || t("New conversation"),
           isAutomation,
           isPinned: chat.isPinned,
-          sortDate,
+          sortDate: new Date(
+            chatActivityTime(
+              chat.updatedAt,
+              chat.createdAt,
+              liveActivityAt.get(chat.id),
+            ),
+          ),
           agentId: chat.agentId ?? null,
           projectId: chat.projectId ?? null,
           isStreaming: chat.isStreaming,
           needsUserInput: chat.needsUserInput,
         };
       })
-      .sort((a, b) => {
-        if (a.isPinned !== b.isPinned) return a.isPinned ? -1 : 1;
-        return b.sortDate.getTime() - a.sortDate.getTime();
-      });
-  }, [chats]);
+      .sort((a, b) => b.sortDate.getTime() - a.sortDate.getTime());
+  }, [chats, liveActivityAt]);
 
   // 顶层按项目分组：无项目对话（含项目已被删但列表还没刷新的孤儿会话）
-  // 保持原有的日期分组；每个项目一个分组，组内按 pin + 时间排序。
+  // 保持日期分组。会话按最后活动时间新到旧。项目按组内最近一次会话排序，
+  // 没有会话的项目留在后面，并保持它们原来的相对顺序。
   const knownProjectIds = useMemo(
     () =>
       showProjectsChrome
@@ -797,16 +825,23 @@ export function AgentSidebar({
     [normalizedChats, knownProjectIds],
   );
 
-  const projectGroups = useMemo(
-    () =>
-      showProjectsChrome
-        ? projects.map((project) => ({
-            project,
-            items: normalizedChats.filter((c) => c.projectId === project.id),
-          }))
-        : [],
-    [projects, normalizedChats, showProjectsChrome],
-  );
+  const projectGroups = useMemo(() => {
+    if (!showProjectsChrome) return [];
+    return projects
+      .map((project, index) => ({
+        project,
+        index,
+        items: normalizedChats.filter((c) => c.projectId === project.id),
+      }))
+      .sort((a, b) => {
+        const byActivity =
+          latestActivityTime(b.items.map((item) => item.sortDate.getTime())) -
+          latestActivityTime(a.items.map((item) => item.sortDate.getTime()));
+        if (byActivity !== 0) return byActivity;
+        return a.index - b.index;
+      })
+      .map(({ project, items }) => ({ project, items }));
+  }, [projects, normalizedChats, showProjectsChrome]);
 
   const pinnedChats = useMemo(
     () => normalizedChats.filter((c) => c.isPinned),

package/src/components/chat/ChatInput.tsx

@@ -32,7 +32,13 @@ import {
 import type { LocalChat, LocalChatAgent } from '@/lib/local-api';
 import type { ExecPolicy } from '@/lib/exec-policy';
 import { getWebChatModes, hostToolCapability, settingsChrome } from '@/lib/host-tools';
-import { hostClipboardAvailable, requestHostPaste, type HostClipboardFile } from '@/lib/host-paste';
+import {
+  hostClipboardAvailable,
+  releaseComposerPasteTarget,
+  requestHostPaste,
+  setComposerPasteTarget,
+  type HostClipboardFile,
+} from '@/lib/host-paste';
 import { attachmentFromPath, type AttachmentFile } from '@/lib/attachments';
 import { dropPointHitsRect, hostFileDropAvailable, listenHostFileDrop } from '@/lib/host-file-drop';
 import type { SteerOutcome } from '@steerable/agent-ui';
@@ -510,10 +516,17 @@ function getSelectionOffsets(root: HTMLDivElement): { start: number; end: number
     return measureRange.toString().length;
   };
 
-  return {
-    start: getOffset(range.startContainer, range.startOffset),
-    end: getOffset(range.endContainer, range.endOffset),
-  };
+  try {
+    return {
+      start: getOffset(range.startContainer, range.startOffset),
+      end: getOffset(range.endContainer, range.endOffset),
+    };
+  } catch {
+    // The caret can sit on the empty scaffold's <br> with an offset the
+    // range rejects. Paste still belongs at the end of the draft.
+    const end = getEditableText(root).length;
+    return { start: end, end };
+  }
 }
 
 function setCaretOffset(root: HTMLDivElement, offset: number) {
@@ -1149,6 +1162,10 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
         return;
       }
 
+      const wrote =
+        editorText !== value ||
+        pendingCaretOffset !== null ||
+        (!value && !hasEmptyImeScaffold(editor));
       if (editorText !== value || pendingCaretOffset !== null) {
         writeEditorValue(
           editor,
@@ -1167,8 +1184,10 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       lastPushedValueRef.current = value;
       updateEditorHeight(editor);
 
-      if (pendingCaretOffset !== null && focused) {
-        setCaretOffset(editor, Math.min(pendingCaretOffset, value.length));
+      // replaceChildren drops the DOM selection. Without a caret inside the
+      // field, WKWebView ignores Ctrl/Cmd+V after a send.
+      if (focused && wrote) {
+        setCaretOffset(editor, Math.min(pendingCaretOffset ?? value.length, value.length));
         pendingCaretOffsetRef.current = null;
       }
     }, [value, mentionReferences, agents, chats, disabled, skills, mcpTools]);
@@ -1494,6 +1513,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
     useLayoutEffect(() => {
       const editor = editorRef.current;
       if (!editor) return;
+      setComposerPasteTarget(editor);
       const onCompositionStart = () => {
         isComposingRef.current = true;
         inputSyncGenRef.current += 1;
@@ -1519,6 +1539,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       editor.addEventListener('hostpaste', onHostPaste);
       editor.addEventListener('hostpastefiles', onHostPasteFiles);
       return () => {
+        releaseComposerPasteTarget(editor);
         editor.removeEventListener('compositionstart', onCompositionStart, true);
         editor.removeEventListener('hostpaste', onHostPaste);
         editor.removeEventListener('hostpastefiles', onHostPasteFiles);

package/src/components/chat/LocalChatPanel.tsx

@@ -224,10 +224,13 @@ export function LocalChatPanel({
   const [attachmentError, setAttachmentError] = useState<string | null>(null);
   const [mentionReferences, setMentionReferences] = useState<MentionReference[]>([]);
   const inputRef = useRef<ChatInputHandle>(null);
+  // 空会话首屏和对话底部各有一棵输入框。发出第一条消息会卸掉正在聚焦的那棵；
+  // 不重新聚焦的话，Ctrl/Cmd+V 没有落点。
+  const showEmptyHero = Boolean(emptyHero) && messages.length === 0 && !isStreaming;
 
   useEffect(() => {
     inputRef.current?.focusAtEnd();
-  }, [chatId]);
+  }, [chatId, showEmptyHero]);
 
   const handleSelectPrompt = useCallback((prompt: string) => {
     setInputValue(prompt);
@@ -315,9 +318,6 @@ export function LocalChatPanel({
     }
   }, [inputValue, files, mentionReferences, onSubmit, mode, execPolicy, chatId, selectedAgentId]);
 
-  // 空会话 hero：messages 为空且未在流式时整面板切到居中首屏布局。
-  const showEmptyHero = Boolean(emptyHero) && messages.length === 0 && !isStreaming;
-
   const sessionTodos = useMemo(
     () =>
       resolveLatestSessionTodos({

package/src/hooks/useChatsAndAgents.ts

@@ -58,6 +58,12 @@ export interface UseChatsAndAgentsResult {
    * 找不到 id 时静默忽略。
    */
   patchChatTitle: (chatId: string, title: string) => void;
+  /**
+   * 就地把某个 chat 的最后更新时间改掉（不打后端、不重新拉已在列表里的会话）。
+   * 用于 `chat-activity`：消息落库后侧边栏按这个时间重排。
+   * 当前已加载的页里没有这条会话时，退回刷新第一页。
+   */
+  patchChatUpdatedAt: (chatId: string, updatedAt: string) => void;
   /** True while a `loadMoreChats` call is in flight. */
   isLoadingMoreChats: boolean;
   /** True iff the last list-chats response reported more pages available. */
@@ -149,6 +155,43 @@ export function useChatsAndAgents(): UseChatsAndAgentsResult {
     [list],
   );
 
+  // 消息落库后的活动时间。叠在已加载列表上，避免整表刷新把分页打回第一页。
+  const [activityAt, setActivityAt] = useState<ReadonlyMap<string, string>>(() => new Map());
+  const chats = useMemo(() => {
+    if (activityAt.size === 0) return list.chats;
+    return list.chats.map((chat) => {
+      const next = activityAt.get(chat.id);
+      if (!next || chat.updatedAt >= next) return chat;
+      return { ...chat, updatedAt: next };
+    });
+  }, [activityAt, list.chats]);
+  useEffect(() => {
+    setActivityAt((prev) => {
+      if (prev.size === 0) return prev;
+      let changed = false;
+      const next = new Map(prev);
+      for (const [id, stamp] of prev) {
+        const chat = list.chats.find((item) => item.id === id);
+        if (chat && chat.updatedAt >= stamp) {
+          next.delete(id);
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [list.chats]);
+  const patchChatUpdatedAt = useCallback((chatId: string, updatedAt: string) => {
+    const known = list.chats.some((chat) => chat.id === chatId);
+    setActivityAt((prev) => {
+      const current = prev.get(chatId);
+      if (current && current >= updatedAt) return prev;
+      const next = new Map(prev);
+      next.set(chatId, updatedAt);
+      return next;
+    });
+    if (!known) void list.refreshChats();
+  }, [list.chats, list.refreshChats]);
+
   const deleteChat = useCallback(
     async (chatId: string) => {
       try {
@@ -164,7 +207,7 @@ export function useChatsAndAgents(): UseChatsAndAgentsResult {
   );
 
   return {
-    chats: list.chats,
+    chats,
     agents: list.agents,
     isLoading: list.isLoading,
     error: mergedError,
@@ -175,6 +218,7 @@ export function useChatsAndAgents(): UseChatsAndAgentsResult {
     createChat,
     deleteChat,
     patchChatTitle: list.patchChatTitle,
+    patchChatUpdatedAt,
     isLoadingMoreChats: list.isLoadingMoreChats,
     hasMoreChats: list.hasMoreChats,
     loadMoreChats: list.loadMoreChats,

package/src/layouts/AgentLayout.tsx

@@ -164,6 +164,10 @@ function AgentLayoutContent() {
   useEffect(() => {
     patchChatTitleRef.current = data.patchChatTitle;
   }, [data.patchChatTitle]);
+  const patchChatUpdatedAtRef = useRef(data.patchChatUpdatedAt);
+  useEffect(() => {
+    patchChatUpdatedAtRef.current = data.patchChatUpdatedAt;
+  }, [data.patchChatUpdatedAt]);
   const refreshChatsRef = useRef(data.refreshChats);
   useEffect(() => {
     refreshChatsRef.current = data.refreshChats;
@@ -187,6 +191,16 @@ function AgentLayoutContent() {
     });
     return unsubscribe;
   }, []);
+  // 消息落库后的活动时间。只改这条会话在内存里的 updatedAt，侧边栏按它重排。
+  useEffect(() => {
+    const bridge = getHostBridge();
+    if (!bridge?.onChatActivity) return;
+    const unsubscribe = bridge.onChatActivity((payload) => {
+      if (!payload?.chatId || !payload.updatedAt) return;
+      patchChatUpdatedAtRef.current(payload.chatId, payload.updatedAt);
+    });
+    return unsubscribe;
+  }, []);
   useEffect(() => {
     const bridge = getHostBridge();
     if (!bridge?.onStoreChanged) return;

package/src/lib/browser-dev-host-mock.ts

@@ -651,6 +651,7 @@ export function installBrowserDevHostMock() {
     onMenuOpenTerminal: () => undefined,
     offMenuOpenTerminal: () => undefined,
     onChatTitleUpdated: () => () => undefined,
+    onChatActivity: () => () => undefined,
     onSuggestedReplies: (callback) => {
       suggestedReplyListeners.add(callback);
       return () => {

package/src/lib/host-bridge.ts

@@ -239,6 +239,13 @@ export interface HostBridge {
   onChatCreated?: (
     callback: (payload: { chatId: string; agentId?: string | null }) => void,
   ) => () => void;
+  /**
+   * 会话有了新的活动时间（写入消息或改会话）。载荷是 `{chatId, updatedAt}`。
+   * 侧边栏据此改内存里的时间并重排，不整表刷新。
+   */
+  onChatActivity?: (
+    callback: (payload: { chatId: string; updatedAt: string }) => void,
+  ) => () => void;
   /**
    * 另一个进程提交了宿主库。侧栏据此重新拉会话列表。
    * 载荷为空；渲染端不依赖里面的字段。

package/src/lib/host-paste.ts

@@ -19,8 +19,22 @@ import { getHostBridge } from './host-bridge';
 
 let pending = false;
 let lastEditable: HTMLElement | null = null;
+let composerPasteTarget: HTMLElement | null = null;
 let installed = false;
 
+/**
+ * Remember the live chat composer. A menu paste uses it when no other field
+ * is focused, including right after the empty-hero composer unmounts.
+ */
+export function setComposerPasteTarget(element: HTMLElement): void {
+  composerPasteTarget = element;
+}
+
+/** Drop the composer target when that element unmounts. */
+export function releaseComposerPasteTarget(element: HTMLElement): void {
+  if (composerPasteTarget === element) composerPasteTarget = null;
+}
+
 /** Remember the field that should receive a menu paste after focus moves. */
 export function installHostPaste(): void {
   if (installed || typeof document === 'undefined') return;
@@ -87,12 +101,9 @@ export function hostClipboardAvailable(): boolean {
 }
 
 function isEditable(target: EventTarget | null): target is HTMLElement {
-  return (
-    !isTerminalInput(target) &&
-    (target instanceof HTMLInputElement ||
-      target instanceof HTMLTextAreaElement ||
-      (target instanceof HTMLElement && target.isContentEditable))
-  );
+  if (isTerminalInput(target) || !(target instanceof HTMLElement)) return false;
+  if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) return true;
+  return target.isContentEditable || target.getAttribute('contenteditable') === 'true';
 }
 
 /**
@@ -105,8 +116,12 @@ function isTerminalInput(target: EventTarget | null): boolean {
 
 function focusedEditable(): HTMLElement | null {
   if (isTerminalInput(document.activeElement)) return null;
-  if (isEditable(document.activeElement)) return document.activeElement;
-  if (lastEditable?.isConnected) return lastEditable;
+  const active = document.activeElement;
+  if (active instanceof HTMLElement && active.isConnected && isEditable(active)) return active;
+  if (lastEditable?.isConnected && isEditable(lastEditable)) return lastEditable;
+  if (composerPasteTarget?.isConnected && isEditable(composerPasteTarget)) {
+    return composerPasteTarget;
+  }
   return null;
 }
 

package/src/lib/http-bridge.ts

@@ -286,6 +286,9 @@ export function createHttpBridge(): HostBridge {
     onChatCreated: (callback) =>
       subscribeChannel<{ chatId: string; agentId?: string | null }>('chat-created', callback),
 
+    onChatActivity: (callback) =>
+      subscribeChannel<{ chatId: string; updatedAt: string }>('chat-activity', callback),
+
     onStoreChanged: (callback) => subscribeChannel('store:changed', () => callback()),
 
     onTaskUpdated: (callback) =>

package/src/lib/sidebar-order.ts

@@ -0,0 +1,35 @@
+/**
+ * 侧栏会话与项目的显示顺序。
+ * 会话按最后活动时间新到旧；项目按组内最近一次会话的活动时间，没有会话的项目留在后面。
+ */
+
+/**
+ * 会话的排序时间。有效的 `updatedAt` 优先，否则用 `createdAt`。
+ * `liveAt` 是进行中回合在列表刷新前的本地时间，只在比已保存时间更新时抬高。
+ */
+export function chatActivityTime(
+  updatedAt: string | null | undefined,
+  createdAt: string | null | undefined,
+  liveAt?: number,
+  now = Date.now(),
+): number {
+  const updated = updatedAt ? Date.parse(updatedAt) : Number.NaN;
+  const created = createdAt ? Date.parse(createdAt) : Number.NaN;
+  const persisted = Number.isFinite(updated)
+    ? updated
+    : Number.isFinite(created)
+      ? created
+      : now;
+  return liveAt !== undefined && Number.isFinite(liveAt) && liveAt > persisted
+    ? liveAt
+    : persisted;
+}
+
+/** 一组会话里最近的活动时间。没有会话时为 0，这样空项目排在有对话的项目后面。 */
+export function latestActivityTime(times: readonly number[]): number {
+  let latest = 0;
+  for (const time of times) {
+    if (time > latest) latest = time;
+  }
+  return latest;
+}