@steerable/agent-shell-web 0.6.62 → 0.6.64

package/package.json

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

package/src/components/AgentSidebar.tsx

@@ -1326,6 +1326,7 @@ export function AgentSidebar({
               })
             : ""
         }
+        error={pendingDeleteChat ? error : null}
         pending={
           pendingDeleteChat !== null && deletingChatId === pendingDeleteChat.id
         }

package/src/components/ConfirmDialog.tsx

@@ -1,7 +1,7 @@
 /**
  * 破坏性操作的二次确认弹窗。点遮罩或按 Esc 取消；确认进行中不关闭。
  */
-import { useEffect, useId } from 'react';
+import { useEffect, useId, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { t } from '@/i18n';
 
@@ -9,6 +9,7 @@ export interface ConfirmDialogProps {
   open: boolean;
   title: string;
   description: string;
+  error?: string | null;
   confirmLabel?: string;
   pending?: boolean;
   onCancel: () => void;
@@ -20,6 +21,7 @@ export function ConfirmDialog({
   open,
   title,
   description,
+  error,
   confirmLabel = t('Delete'),
   pending = false,
   onCancel,
@@ -28,21 +30,49 @@ export function ConfirmDialog({
 }: ConfirmDialogProps) {
   const titleId = useId();
   const descriptionId = useId();
+  const errorId = useId();
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const cancelRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
     if (!open) return;
+    const previouslyFocused =
+      document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    cancelRef.current?.focus();
     const onKey = (event: KeyboardEvent) => {
-      if (event.key !== 'Escape' || pending) return;
-      onCancel();
+      if (event.key === 'Escape' && !pending) {
+        onCancel();
+        return;
+      }
+      if (event.key !== 'Tab') return;
+      const focusable = Array.from(
+        dialogRef.current?.querySelectorAll<HTMLElement>(
+          'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+        ) ?? [],
+      );
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
     };
     window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      if (previouslyFocused?.isConnected) previouslyFocused.focus();
+    };
   }, [open, pending, onCancel]);
 
   if (!open || typeof document === 'undefined') return null;
 
   return createPortal(
     <div
+      ref={dialogRef}
       className="fixed inset-0 z-[110] flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
       onMouseDown={(event) => {
         if (event.target === event.currentTarget && !pending) onCancel();
@@ -50,7 +80,7 @@ export function ConfirmDialog({
       role="alertdialog"
       aria-modal="true"
       aria-labelledby={titleId}
-      aria-describedby={descriptionId}
+      aria-describedby={error ? `${descriptionId} ${errorId}` : descriptionId}
       data-testid={testId}
     >
       <div className="w-[380px] max-w-[92vw] rounded-2xl border border-agent-border bg-agent-canvas p-5 shadow-2xl">
@@ -63,12 +93,17 @@ export function ConfirmDialog({
         >
           {description}
         </p>
+        {error && (
+          <p id={errorId} role="alert" className="mt-2 text-sm text-agent-destructive">
+            {error}
+          </p>
+        )}
         <div className="mt-5 flex justify-end gap-2">
           <button
+            ref={cancelRef}
             type="button"
             onClick={onCancel}
             disabled={pending}
-            autoFocus
             className="h-9 rounded-full px-4 text-sm text-agent-muted-foreground transition-colors hover:bg-agent-muted hover:text-agent-foreground disabled:opacity-40"
             data-testid={`${testId}-cancel`}
           >

package/src/components/TerminalView.tsx

@@ -139,8 +139,11 @@ export function TerminalView({
     containerRef.current.addEventListener('contextmenu', onContextMenu);
 
     let cancelled = false;
+    const pendingChunks: Array<{ sessionId: string; chunk: string }> = [];
     const offData = terminal.onData(({ sessionId, chunk }) => {
-      if (sessionIdRef.current && sessionId === sessionIdRef.current) {
+      if (sessionIdRef.current === null) {
+        pendingChunks.push({ sessionId, chunk });
+      } else if (sessionId === sessionIdRef.current) {
         term.write(chunk);
       }
     });
@@ -159,6 +162,12 @@ export function TerminalView({
         });
         if (cancelled) return;
         sessionIdRef.current = session.id;
+        for (const pending of pendingChunks) {
+          if (pending.sessionId === session.id) {
+            term.write(pending.chunk);
+          }
+        }
+        pendingChunks.length = 0;
         setStatus('ready');
         term.writeln(
           `\x1b[90m[agent-shell] ${session.shell} pid=${session.pid} cwd=${session.cwd}\x1b[0m`,

package/src/components/chat/ChatInput.tsx

@@ -1254,11 +1254,13 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       setIsDragging(false);
     };
 
-    // 把新文件并入列表：按 path（有路径时）或 name（浏览器模式无路径）去重。
+    // 桌面壳的真实 path 可去重；浏览器 File 没有 path，同名文件可能来自
+    // 不同目录，必须全部保留，提交落盘时由宿主生成唯一文件名。
     const addFiles = (incoming: AttachmentFile[]) => {
-      const keyOf = (f: AttachmentFile) => f.path || f.name;
-      const existingKeys = new Set(actualFiles.map(keyOf));
-      const filteredNewFiles = incoming.filter((f) => !existingKeys.has(keyOf(f)));
+      const existingPaths = new Set(actualFiles.map((file) => file.path).filter(Boolean));
+      const filteredNewFiles = incoming.filter(
+        (file) => !file.path || !existingPaths.has(file.path),
+      );
       if (filteredNewFiles.length > 0) {
         actualOnFilesChange([...actualFiles, ...filteredNewFiles]);
       }
@@ -1349,9 +1351,11 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       if (value[removeEnd] === ' ') removeEnd += 1;
       replaceRange(start, removeEnd, '');
       if (ref) {
-        setMentionReferences((prev) =>
-          prev.filter((item) => !(item.type === ref.type && item.id === ref.id)),
+        const nextReferences = mentionReferences.filter(
+          (item) => !(item.type === ref.type && item.id === ref.id),
         );
+        setMentionReferences(nextReferences);
+        onMentionReferencesChange?.(nextReferences);
       }
     };
 
@@ -1686,12 +1690,13 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
         event.key === 'Enter' && !event.shiftKey;
       if (isSendCombo) {
         event.preventDefault();
+        const submittedText = getEditableText(event.currentTarget).trim();
         // streaming 期间：Enter = follow-up 排队（本轮结束后自动作为下一轮
         // 发出）；⌘/Ctrl+Enter = 轮中插队（注入运行中的回合；注入不了时
         // hook 兜底为 W6-2 排队或新回合直发，消息不会丢）。
         if (isStreaming) {
-          if ((event.metaKey || event.ctrlKey) && onSteer && trimmed) {
-            void onSteer(trimmed).then((outcome) => {
+          if ((event.metaKey || event.ctrlKey) && onSteer && submittedText) {
+            void onSteer(submittedText).then((outcome) => {
               // steered / queued / sent 三种结果消息都已落地（注入当前回合 /
               // 进入待发队列 / 作为新回合发出），草稿都可以清；queued 额外
               // 提示用户"不是追加进当前回合"。
@@ -1706,8 +1711,8 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
             });
             return;
           }
-          if (onFollowUp && trimmed) {
-            onFollowUp(trimmed);
+          if (onFollowUp && submittedText) {
+            onFollowUp(submittedText);
             onChange('');
           }
           return;

package/src/components/chat/GoalLoopStatusBar.tsx

@@ -0,0 +1,122 @@
+import { useState } from 'react';
+import { LuCirclePause, LuPlay, LuRepeat2, LuSquare, LuTarget, LuTrash2 } from 'react-icons/lu';
+
+import { t } from '@/i18n';
+import {
+  stopChatLoop,
+  updateChatGoal,
+  type LocalGoal,
+  type LocalMonitoredLoop,
+} from '@/lib/local-api';
+
+export interface GoalLoopStatusBarProps {
+  chatId: string;
+  goal: LocalGoal | null;
+  loops: LocalMonitoredLoop[];
+  onChanged: () => void;
+}
+
+/** Compact native status for the goal and monitored PTY loops in this chat. */
+export function GoalLoopStatusBar({
+  chatId,
+  goal,
+  loops = [],
+  onChanged,
+}: GoalLoopStatusBarProps) {
+  const [busy, setBusy] = useState(false);
+  const visibleGoal = goal?.phase === 'complete' ? null : goal;
+  if (!visibleGoal && loops.length === 0) return null;
+
+  const goalAction = async (action: 'pause' | 'resume' | 'clear') => {
+    setBusy(true);
+    try {
+      await updateChatGoal(chatId, { action });
+      onChanged();
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const stopLoop = async (id: string) => {
+    setBusy(true);
+    try {
+      await stopChatLoop(chatId, id);
+      onChanged();
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="mx-2.5 mb-1 space-y-1 rounded-agent-md border border-agent-border bg-agent-muted/30 px-2.5 py-1.5 text-xs">
+      {visibleGoal ? (
+        <div className="flex items-center gap-2">
+          <LuTarget className="h-3.5 w-3.5 shrink-0" />
+          <span className="min-w-0 flex-1 truncate">
+            {t('Goal')} · {visibleGoal.objective} · {goalPhase(visibleGoal)}
+          </span>
+          {visibleGoal.phase === 'active' ? (
+            <button
+              type="button"
+              disabled={busy}
+              onClick={() => void goalAction('pause')}
+              title={t('Pause goal')}
+              aria-label={t('Pause goal')}
+            >
+              <LuCirclePause className="h-3.5 w-3.5" />
+            </button>
+          ) : visibleGoal.phase === 'paused' || visibleGoal.phase === 'blocked' ? (
+            <button
+              type="button"
+              disabled={busy}
+              onClick={() => void goalAction('resume')}
+              title={t('Resume goal')}
+              aria-label={t('Resume goal')}
+            >
+              <LuPlay className="h-3.5 w-3.5" />
+            </button>
+          ) : null}
+          <button
+            type="button"
+            disabled={busy}
+            onClick={() => void goalAction('clear')}
+            title={t('Clear goal')}
+            aria-label={t('Clear goal')}
+          >
+            <LuTrash2 className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      ) : null}
+      {loops.map((loop) => (
+        <div key={loop.id} className="flex items-center gap-2">
+          <LuRepeat2 className="h-3.5 w-3.5 shrink-0" />
+          <span className="min-w-0 flex-1 truncate">
+            {t('Loop')} · {loop.prompt} · {t('every {seconds}s', { seconds: loop.intervalSeconds })}
+          </span>
+          <button
+            type="button"
+            disabled={busy}
+            onClick={() => void stopLoop(loop.id)}
+            title={t('Stop loop')}
+            aria-label={t('Stop loop')}
+            className="flex shrink-0 items-center gap-1 rounded-agent-sm border border-agent-border bg-agent-canva px-1.5 py-0.5 font-medium hover:bg-agent-muted disabled:opacity-50"
+          >
+            <LuSquare className="h-2.5 w-2.5 fill-current" />
+            <span>{t('Stop')}</span>
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function goalPhase(goal: LocalGoal): string {
+  if (goal.phase === 'active') return t('Turn {turn}', { turn: goal.turns });
+  if (goal.phase === 'paused') return t('Paused');
+  if (goal.phase === 'blocked') {
+    return goal.blockedReason
+      ? t('Blocked: {reason}', { reason: goal.blockedReason })
+      : t('Blocked');
+  }
+  return t('Complete');
+}

package/src/components/chat/LocalChatPanel.tsx

@@ -225,6 +225,10 @@ export function LocalChatPanel({
   const [mentionReferences, setMentionReferences] = useState<MentionReference[]>([]);
   const inputRef = useRef<ChatInputHandle>(null);
 
+  useEffect(() => {
+    inputRef.current?.focusAtEnd();
+  }, [chatId]);
+
   const handleSelectPrompt = useCallback((prompt: string) => {
     setInputValue(prompt);
     // Wait for the textarea to receive the new value before pulling focus,

package/src/components/chat/MessageList.tsx

@@ -54,6 +54,22 @@ import type { LlmSpeedSnapshot } from './process-status';
 
 const NEAR_BOTTOM_THRESHOLD_PX = 100;
 
+function internalTrigger(message: ChatMessage): 'goal' | 'loop' | null {
+  if (!message.messageMetadata) return null;
+  try {
+    const metadata = JSON.parse(message.messageMetadata) as {
+      internal?: unknown;
+      trigger?: unknown;
+    };
+    if (metadata.internal !== true) return null;
+    return metadata.trigger === 'goal' || metadata.trigger === 'loop'
+      ? metadata.trigger
+      : null;
+  } catch {
+    return null;
+  }
+}
+
 interface MessageListProps {
   messages: ChatMessage[];
   isStreaming: boolean;
@@ -330,15 +346,20 @@ export function MessageList({
                 className="conversation-turn relative space-y-4"
                 data-conversation-turn={turn.key}
               >
-                {turn.userGroup && (
+                {turn.userGroup &&
+                !turn.userGroup.messages.every((message) => internalTrigger(message) !== null) ? (
                   <div className="sticky top-0 z-10 -mx-3 px-3 py-1 bg-agent-canvas/95 backdrop-blur-xs">
                     {turn.userGroup.messages.length === 1 ? (
-                      <UserMessage
-                        key={turn.userGroup.messages[0].id}
-                        message={turn.userGroup.messages[0]}
-                        agents={agents}
-                        chats={chats}
-                      />
+                      internalTrigger(turn.userGroup.messages[0]) ? (
+                        null
+                      ) : (
+                        <UserMessage
+                          key={turn.userGroup.messages[0].id}
+                          message={turn.userGroup.messages[0]}
+                          agents={agents}
+                          chats={chats}
+                        />
+                      )
                     ) : (
                       <div
                         key={turn.userGroup.key}
@@ -348,21 +369,25 @@ export function MessageList({
                         <div className="flex justify-start">
                           <div className="mx-auto w-full max-w-[var(--chat-input-box-width)] overflow-hidden rounded-agent-lg border border-agent-border/80 bg-agent-muted/70 shadow-sm">
                             {turn.userGroup.messages.map((msg, idx) => (
-                              <UserMessage
-                                key={msg.id}
-                                message={msg}
-                                agents={agents}
-                                chats={chats}
-                                isGrouped
-                                isAppended={idx > 0}
-                              />
+                              internalTrigger(msg) ? (
+                                null
+                              ) : (
+                                <UserMessage
+                                  key={msg.id}
+                                  message={msg}
+                                  agents={agents}
+                                  chats={chats}
+                                  isGrouped
+                                  isAppended={idx > 0}
+                                />
+                              )
                             ))}
                           </div>
                         </div>
                       </div>
                     )}
                   </div>
-                )}
+                ) : null}
 
                 {turn.assistants.map((item) => {
                   const message = item.message;

package/src/components/chat/useGoalAndLoops.ts

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import {
+  getChatGoal,
+  listChatLoops,
+  type LocalGoal,
+  type LocalMonitoredLoop,
+} from '@/lib/local-api';
+import { getHostBridge, hasHostBridge } from '@/lib/host-bridge';
+
+export interface GoalAndLoopsState {
+  goal: LocalGoal | null;
+  loops: LocalMonitoredLoop[];
+  refreshGoal: () => Promise<void>;
+  refreshLoops: () => Promise<void>;
+}
+
+/** Native goal state and Cursor-style monitored-loop process state for one chat. */
+export function useGoalAndLoops(chatId: string | null): GoalAndLoopsState {
+  const [goal, setGoal] = useState<LocalGoal | null>(null);
+  const [loops, setLoops] = useState<LocalMonitoredLoop[]>([]);
+
+  const refreshGoal = useCallback(async () => {
+    if (!chatId || !hasHostBridge()) {
+      setGoal(null);
+      return;
+    }
+    try {
+      setGoal((await getChatGoal(chatId)).goal);
+    } catch {
+      setGoal(null);
+    }
+  }, [chatId]);
+
+  const refreshLoops = useCallback(async () => {
+    if (!chatId || !hasHostBridge()) {
+      setLoops([]);
+      return;
+    }
+    try {
+      const response = await listChatLoops(chatId);
+      setLoops(Array.isArray(response.loops) ? response.loops : []);
+    } catch {
+      setLoops([]);
+    }
+  }, [chatId]);
+
+  useEffect(() => {
+    void refreshGoal();
+    void refreshLoops();
+  }, [refreshGoal, refreshLoops]);
+
+  useEffect(() => {
+    if (!chatId) return;
+    const bridge = getHostBridge();
+    const offGoal = bridge?.onPackEvent?.('goal-changed', (value) => {
+      const payload = value as { chatId?: string; goal?: LocalGoal | null };
+      if (payload.chatId === chatId) setGoal(payload.goal ?? null);
+    });
+    const offLoop = bridge?.onPackEvent?.('loop-changed', (value) => {
+      const payload = value as { chatId?: string; loops?: LocalMonitoredLoop[] };
+      if (payload.chatId === chatId) setLoops(payload.loops ?? []);
+    });
+    return () => {
+      offGoal?.();
+      offLoop?.();
+    };
+  }, [chatId]);
+
+  return { goal, loops, refreshGoal, refreshLoops };
+}

package/src/lib/http-bridge.ts

@@ -119,10 +119,18 @@ function subscribeChannel<T>(channel: string, callback: (payload: T) => void): (
 }
 
 // ---------------------------------------------------------------------------
-// 流式聊天：fetch + ReadableStream。取消 = AbortController（server 端
-// req close → abort agent 循环，对齐 Electron cancelStream 语义）。
+// 流式聊天：fetch + ReadableStream。聊天流通过显式 cancel 端点停止，原
+// response 在服务端完成取消和落库后自然结束；其他流回退 AbortController。
 // ---------------------------------------------------------------------------
-const activeStreams = new Map<string, AbortController>();
+const activeStreams = new Map<
+  string,
+  { controller: AbortController; cancelPath: string | null; cancelling: boolean }
+>();
+
+function chatCancelPath(path: string): string | null {
+  const match = path.match(/^(\/api\/v2\/chats\/[^/]+)\/(?:send|run|agent)$/);
+  return match ? `${match[1]}/cancel` : null;
+}
 
 async function startStream(
   input: LocalBackendRequestInput,
@@ -146,7 +154,11 @@ async function startStream(
     onEvent({ type: 'error', error: `start stream failed (${res.status})` });
     return null;
   }
-  activeStreams.set(streamId, controller);
+  activeStreams.set(streamId, {
+    controller,
+    cancelPath: chatCancelPath(input.path),
+    cancelling: false,
+  });
   void (async () => {
     const reader = res.body!.getReader();
     const decoder = new TextDecoder();
@@ -172,8 +184,16 @@ async function startStream(
 }
 
 function cancelStream(streamId: string): void {
-  activeStreams.get(streamId)?.abort();
-  activeStreams.delete(streamId);
+  const active = activeStreams.get(streamId);
+  if (!active || active.cancelling) return;
+  active.cancelling = true;
+  if (!active.cancelPath) {
+    active.controller.abort();
+    return;
+  }
+  void http('POST', active.cancelPath, {}).catch(() => {
+    active.controller.abort();
+  });
 }
 
 // ---------------------------------------------------------------------------

package/src/lib/local-api.ts

@@ -341,6 +341,60 @@ export async function getChatLiveStream(chatId: string) {
   });
 }
 
+export interface LocalGoal {
+  id: string;
+  chatId: string;
+  revision: number;
+  objective: string;
+  phase: 'active' | 'paused' | 'blocked' | 'complete';
+  blockedReason?: string;
+  turns: number;
+  createdAt: number;
+  updatedAt: number;
+}
+
+export async function getChatGoal(chatId: string) {
+  return bridge().localBackend.request<{ goal: LocalGoal | null }>({
+    method: 'GET',
+    path: `/api/v2/chats/${encodeURIComponent(chatId)}/goal`,
+  });
+}
+
+export async function updateChatGoal(
+  chatId: string,
+  body:
+    | { action: 'edit'; objective: string }
+    | { action: 'pause' | 'resume' | 'complete' | 'clear' },
+) {
+  return bridge().localBackend.request<{ goal: LocalGoal | null }>({
+    method: 'POST',
+    path: `/api/v2/chats/${encodeURIComponent(chatId)}/goal`,
+    body,
+  });
+}
+
+export interface LocalMonitoredLoop {
+  id: string;
+  chatId: string;
+  terminalSessionId: string;
+  prompt: string;
+  intervalSeconds: number;
+}
+
+export async function listChatLoops(chatId: string) {
+  return bridge().localBackend.request<{ loops: LocalMonitoredLoop[] }>({
+    method: 'GET',
+    path: `/api/v2/chats/${encodeURIComponent(chatId)}/loops`,
+  });
+}
+
+export async function stopChatLoop(chatId: string, loopId: string) {
+  return bridge().localBackend.request<{ success: boolean }>({
+    method: 'DELETE',
+    path: `/api/v2/chats/${encodeURIComponent(chatId)}/loops/${encodeURIComponent(loopId)}`,
+  });
+}
+
 /** 按 chatId 取消运行中的回合（切回后新挂载的视图手里没有原 streamId）。 */
 export async function cancelChatTurn(chatId: string) {
   return bridge().localBackend.request<{ success: boolean; reason?: string }>({

package/src/pages/AgentPage.tsx

@@ -43,6 +43,8 @@ import {
   type SuggestedRepliesState,
 } from "@/components/chat/suggested-replies-model";
 import { useChatTasks } from "@/components/chat/useChatTasks";
+import { useGoalAndLoops } from "@/components/chat/useGoalAndLoops";
+import { GoalLoopStatusBar } from "@/components/chat/GoalLoopStatusBar";
 import { LuListChecks, LuArrowRight } from "react-icons/lu";
 import { LocalLlmSettingsModal } from "@/components/LocalLlmSettingsModal";
 import {
@@ -398,6 +400,12 @@ function AgentChatView({
     finished: finishedTasks,
     dismissFinished,
   } = useChatTasks(chatId);
+  const {
+    goal,
+    loops,
+    refreshGoal,
+    refreshLoops,
+  } = useGoalAndLoops(chatId);
   const handleInspectTask = useCallback(
     (task: InspectTaskInput) => {
       ctx.inspectTask({
@@ -416,6 +424,7 @@ function AgentChatView({
   // 把「正在运行 + 部分产出」恢复出来。initialLiveStream 是挂载时同步拿到的
   // 首帧，之后由轮询持续刷新。
   const [liveStream, setLiveStream] = useState<ChatLiveStream>(initialLiveStream);
+  const liveStreamEpochRef = useRef(0);
 
   // ── executed_actions plumbing ────────────────────────────────────────
   // Local-backend emits `{type: 'executed_actions', actions: [...]}` AFTER each
@@ -683,7 +692,6 @@ function AgentChatView({
     followUpUserMessage,
     pendingFollowUps,
     removeFollowUp,
-    cancel,
     setMessages,
     appendMessage,
   } = useChatStream({
@@ -692,6 +700,42 @@ function AgentChatView({
     onUnknownEvent: handleUnknownEvent,
     onStreamError: handleStreamError,
   });
+  const awaitingRemoteActiveSnapshotRef = useRef(false);
+  useEffect(() => {
+    awaitingRemoteActiveSnapshotRef.current = false;
+  }, [chatId]);
+
+  useEffect(() => {
+    const bridge = getHostBridge();
+    if (!bridge?.onPackEvent) return;
+    const offStarted = bridge.onPackEvent('chat-turn-started', (value) => {
+      const payload = value as { chatId?: string };
+      if (payload.chatId === chatId) {
+        awaitingRemoteActiveSnapshotRef.current = true;
+        liveStreamEpochRef.current += 1;
+        setLiveStream((current) => ({ ...current, active: true }));
+      }
+    });
+    const offFinished = bridge.onPackEvent('chat-turn-finished', (value) => {
+      const payload = value as { chatId?: string };
+      if (payload.chatId !== chatId) return;
+      awaitingRemoteActiveSnapshotRef.current = false;
+      liveStreamEpochRef.current += 1;
+      setLiveStream({ active: false });
+      void bridge.localBackend.request<{
+        messages?: LocalChatMessage[];
+      }>({
+        method: "GET",
+        path: `/api/v2/chats/${encodeURIComponent(chatId)}/messages?limit=200`,
+      }).then((response) => {
+        if (response.messages) setMessages(chronological(response.messages));
+      });
+    });
+    return () => {
+      offStarted();
+      offFinished();
+    };
+  }, [chatId, setMessages]);
 
   // ── 切回恢复：远端回合仍在跑，但本 mount 不是发起者 ──────────────────
   // useChatStream.isStreaming 只在本 mount 自己发起的流时为 true；切回后的
@@ -735,10 +779,18 @@ function AgentChatView({
   useEffect(() => {
     if (!remoteStreaming) return;
     let cancelled = false;
+    const epoch = liveStreamEpochRef.current;
     const poll = async () => {
       try {
         const next = await getChatLiveStream(chatId);
-        if (!cancelled) setLiveStream(next ?? { active: false });
+        if (!cancelled && liveStreamEpochRef.current === epoch) {
+          if (next?.active) {
+            awaitingRemoteActiveSnapshotRef.current = false;
+          } else if (awaitingRemoteActiveSnapshotRef.current) {
+            return;
+          }
+          setLiveStream(next ?? { active: false });
+        }
       } catch {
         /* 保持上一帧快照 */
       }
@@ -807,14 +859,12 @@ function AgentChatView({
     wasStreamingRef.current = isStreaming;
   }, [isStreaming, messages]);
 
-  // 真正能中断后端 agent 循环的取消：框架 hook 的 cancel 只重置前端状态
-  // （cancel 句柄在流结束后才被保存，是已知的上游缺陷），这里补上
-  // transport.cancelActive() 让主进程 abort LLM / 工具循环。
+  // 真正中断后端 agent 循环；流保持运行态直到后端发回 cancelled done，
+  // 避免界面提前恢复发送后，新回合被仍在清理的旧回合以 409 拒绝。
   const handleCancel = useCallback(() => {
     transport.cancelActive();
-    cancel();
     updateRemoteFollowUps(() => []);
-  }, [transport, cancel, updateRemoteFollowUps]);
+  }, [transport, updateRemoteFollowUps]);
 
   // Reset the in-flight queue on every new user submit. We do this in a
   // wrapper rather than directly in `handleUnknownEvent`, because there's no
@@ -1258,6 +1308,15 @@ function AgentChatView({
         }
         inputBanner={
           <>
+            <GoalLoopStatusBar
+              chatId={chatId}
+              goal={goal}
+              loops={loops}
+              onChanged={() => {
+                void refreshGoal();
+                void refreshLoops();
+              }}
+            />
             {/* W6-5 项目信任门控：项目含规则文件但未信任时提示授权。 */}
             {showProjectsChrome ? (
             <ProjectTrustBanner