@steerable/agent-shell-web 0.6.15

package/src/components/chat/MessageList.tsx

@@ -0,0 +1,332 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import { LuArrowDown } from 'react-icons/lu';
+import type { ChatMessage } from '@steerable/agent-protocol';
+import type { LocalChat, LocalChatAgent, LocalTask } from '@/lib/local-api';
+import { UserMessage } from './UserMessage';
+import { AssistantMessage } from './AssistantMessage';
+import { InterruptedTurnCard } from './InterruptedTurnCard';
+import { TaskOutcomeCards } from './TaskOutcomeCards';
+import type { ExecutedAction } from './ExecutedActionsCard';
+import type { ChildInfo } from './OrchestrationChildrenCard';
+import type { ChatMode } from './ChatInput';
+import type { TurnBlock } from './turn-timeline';
+import { inferDurationMs, readPersistedDurationMs } from './elapsed';
+
+/**
+ * MessageList — scrolling viewport that renders user/assistant message
+ * bubbles.
+ *
+ * Tier-1 port of `deeppath`'s MessageList. We kept the visible interaction
+ * primitives that matter for parity:
+ *   - vertical-scroll container, padding mirrors the cloud product
+ *   - sticky-ish "back to bottom" floater that appears when the user scrolls
+ *     up during streaming
+ *   - empty-state slot
+ *   - auto-scroll on new message **only if** the user is already near the
+ *     bottom (don't yank focus when they're reading older messages)
+ *
+ * Intentionally simpler than the original:
+ *   - **No per-chat scroll memory across tabs.** Switching chats remounts
+ *     this list (parent passes a new `key`), so we don't need the
+ *     `chatScrollMemoryRef` machinery.
+ *   - **No sticky user-message group / `--user-msg-h` CSS var.** The cloud
+ *     product uses these to keep the user prompt pinned at the top of the
+ *     viewport while reading long assistant replies; agent UX defers that
+ *     to a later phase.
+ *   - **No load-more on scroll-up.** Local-backend currently hydrates the
+ *     last 200 messages on mount (see `AgentPage.tsx`). Pagination is a
+ *     phase-2c follow-up.
+ *   - **No turn-process toggle memory.** Expand/collapse of the think+tool
+ *     group is per-mount; it resets when the list remounts.
+ */
+
+const NEAR_BOTTOM_THRESHOLD_PX = 100;
+
+interface MessageListProps {
+  messages: ChatMessage[];
+  isStreaming: boolean;
+  emptyState?: ReactNode;
+  agents: LocalChatAgent[];
+  chats?: LocalChat[];
+  currentAgent: LocalChatAgent | null;
+  /**
+   * Tool calls keyed by the persisted message id (post-stream). Used for
+   * historical assistant turns where the `executed_actions` event already
+   * fired and was reconciled with the DB-assigned message id.
+   */
+  executedActionsByMessageId?: Record<string, ExecutedAction[]>;
+  /**
+   * Call-order blocks keyed by persisted message id. Preferred over stacking
+   * all tools above the reply when present.
+   */
+  timelineByMessageId?: Record<string, TurnBlock[]>;
+  /** In-flight timeline for the latest assistant turn. */
+  currentTurnTimeline?: TurnBlock[];
+  /** Epoch ms when the in-flight turn started (Codex elapsed ticker). */
+  currentTurnStartedAtMs?: number;
+  /** Frozen duration keyed by assistant message id (live freeze + history). */
+  durationByMessageId?: Record<string, number>;
+  /**
+   * Tool calls accumulated for the in-flight assistant message that the
+   * backend hasn't assigned a DB id to yet. Rendered under the latest
+   * assistant message while `isStreaming === true`.
+   */
+  currentTurnActions?: ExecutedAction[];
+  /**
+   * P3.1 orchestration: live child agents of the in-flight turn (rendered
+   * as an OrchestrationPlanCard under the latest assistant message), and
+   * the per-message reconciliation map mirroring executedActionsByMessageId.
+   */
+  currentTurnChildren?: ChildInfo[];
+  orchestrationChildrenByMessageId?: Record<string, ChildInfo[]>;
+  /**
+   * Round counter for the in-flight turn. Forwarded to the tail
+   * AssistantMessage so its `StreamingStatus` can show "Round 2 · 继续推理...".
+   */
+  currentRound?: number;
+  /** Current chat mode (Agent / Plan). */
+  mode?: ChatMode;
+  /** W1.2.1: regenerate an assistant turn (fork-preserving). */
+  onRegenerate?: (messageId: string) => Promise<void>;
+  /**
+   * W7-1: the chat's last turn was interrupted (crash/kill — no completion
+   * record). Rendered as a tail card offering to continue the turn; hidden
+   * while streaming (a live stream is never interrupted).
+   */
+  interrupted?: boolean;
+  /** W7-1: continue the interrupted turn via the backend resume channel. */
+  onContinueInterrupted?: () => void;
+  /** W7-1: hide the card for this mount (not persisted). */
+  onDismissInterrupted?: () => void;
+  /**
+   * 本次挂载期间跑完的后台任务（新→旧）——尾部终态通知卡的数据源。
+   * 后台任务跑在主对话之外，终态不落消息行，卡片是它回到对话里的唯一位置。
+   */
+  finishedTasks?: LocalTask[];
+  /** 点「查看过程」：在右侧栏打开该任务的推理过程。 */
+  onInspectTask?: (task: LocalTask) => void;
+  /** 点「忽略」：隐藏这条终态通知（本次挂载内，不落库）。 */
+  onDismissFinishedTask?: (taskId: string) => void;
+  /** 分享当前对话（截图）。只画在最近一条助手消息的时间戳行上。 */
+  onShare?: () => Promise<boolean>;
+}
+
+export function MessageList({
+  messages,
+  isStreaming,
+  emptyState,
+  agents,
+  chats = [],
+  currentAgent,
+  executedActionsByMessageId,
+  currentTurnActions,
+  timelineByMessageId,
+  currentTurnTimeline,
+  currentTurnStartedAtMs,
+  durationByMessageId,
+  currentTurnChildren,
+  orchestrationChildrenByMessageId,
+  currentRound,
+  mode,
+  onRegenerate,
+  interrupted = false,
+  onContinueInterrupted,
+  onDismissInterrupted,
+  finishedTasks,
+  onInspectTask,
+  onDismissFinishedTask,
+  onShare,
+}: MessageListProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const endRef = useRef<HTMLDivElement>(null);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+
+  const visibleMessages = messages.filter(
+    (m) => m.role === 'user' || m.role === 'assistant',
+  );
+  let lastAssistantId: string | undefined;
+  for (let i = visibleMessages.length - 1; i >= 0; i -= 1) {
+    if (visibleMessages[i].role === 'assistant') {
+      lastAssistantId = visibleMessages[i].id;
+      break;
+    }
+  }
+
+  const checkAtBottom = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const atBottom =
+      el.scrollHeight - el.scrollTop - el.clientHeight < NEAR_BOTTOM_THRESHOLD_PX;
+    setIsAtBottom(atBottom);
+  }, []);
+
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'smooth') => {
+    const el = endRef.current;
+    if (!el) return;
+    el.scrollIntoView({ behavior, block: 'end' });
+  }, []);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    el.addEventListener('scroll', checkAtBottom, { passive: true });
+    return () => {
+      el.removeEventListener('scroll', checkAtBottom);
+    };
+  }, [checkAtBottom]);
+
+  // Snap to bottom on first paint, regardless of whether the user "was" at
+  // the bottom — there's no "before" on mount.
+  useLayoutEffect(() => {
+    scrollToBottom('instant' as ScrollBehavior);
+    setIsAtBottom(true);
+  }, [scrollToBottom]);
+
+  // Subsequent auto-scroll only when the user is already near the bottom,
+  // so reading old messages doesn't get yanked.
+  const lastMessageId = visibleMessages[visibleMessages.length - 1]?.id;
+  const lastContentLen = visibleMessages[visibleMessages.length - 1]?.content?.length ?? 0;
+  const lastTimelineSig = currentTurnTimeline
+    ?.map((block) => (block.type === 'tools' ? `t${block.actions.length}` : `c${block.content.length}`))
+    .join('|') ?? '';
+  useEffect(() => {
+    if (!isAtBottom) return;
+    scrollToBottom('smooth');
+  }, [lastMessageId, lastContentLen, lastTimelineSig, isAtBottom, scrollToBottom]);
+
+  return (
+    <div className="relative flex-1 overflow-hidden">
+      <div
+        ref={containerRef}
+        className="h-full overflow-y-auto px-3 py-3"
+      >
+        {visibleMessages.length === 0 ? (
+          emptyState ?? null
+        ) : (
+          <div className="mx-auto w-full space-y-1.5">
+            {visibleMessages.map((message, index) => {
+              const isLast = index === visibleMessages.length - 1;
+              if (message.role === 'user') {
+                return <UserMessage key={message.id} message={message} agents={agents} chats={chats} />;
+              }
+              // Action attribution: prefer the per-message map (set when the
+              // backend's `message_id` event reconciles the stream-time queue
+              // with the DB id). The framework keeps the in-flight assistant's
+              // placeholder id even after the backend emits `message_id`, so
+              // the current page cannot always key by DB id until reload.
+              // Keep showing `currentTurnActions` on the latest assistant turn
+              // after streaming ends; it is cleared when the next turn starts.
+              const persistedActions =
+                executedActionsByMessageId?.[message.id];
+              const isStreamingTail = isStreaming && isLast;
+              const isCurrentTurnTail =
+                isLast && currentTurnActions !== undefined && currentTurnActions.length > 0;
+              const actions = persistedActions
+                ?? (isStreamingTail || isCurrentTurnTail ? currentTurnActions : undefined);
+              const persistedChildren = orchestrationChildrenByMessageId?.[message.id];
+              const isChildrenTail =
+                isLast && currentTurnChildren !== undefined && currentTurnChildren.length > 0;
+              const childList = persistedChildren
+                ?? (isStreamingTail || isChildrenTail ? currentTurnChildren : undefined);
+
+              let isPlanMode = false;
+              if (message.messageMetadata) {
+                try {
+                  const meta = JSON.parse(message.messageMetadata);
+                  if (meta?.mode === 'plan') {
+                    isPlanMode = true;
+                  }
+                } catch {}
+              } else if (isStreamingTail && mode === 'plan') {
+                isPlanMode = true;
+              }
+
+              const persistedTimeline = timelineByMessageId?.[message.id];
+              const isCurrentTimelineTail = isLast && currentTurnTimeline !== undefined;
+              const turnTimeline = persistedTimeline
+                ?? (isStreamingTail || isCurrentTimelineTail ? currentTurnTimeline : undefined);
+
+              const metadataJson =
+                typeof message.messageMetadata === 'string'
+                  ? message.messageMetadata
+                  : undefined;
+              let previousUserCreatedAt: string | undefined;
+              for (let i = index - 1; i >= 0; i -= 1) {
+                if (visibleMessages[i].role === 'user') {
+                  previousUserCreatedAt = visibleMessages[i].createdAt;
+                  break;
+                }
+              }
+              const durationMs = isStreamingTail
+                ? undefined
+                : durationByMessageId?.[message.id]
+                  ?? readPersistedDurationMs(metadataJson)
+                  ?? inferDurationMs(previousUserCreatedAt, message.createdAt);
+
+              return (
+                <AssistantMessage
+                  key={message.id}
+                  message={message}
+                  isStreaming={isStreamingTail}
+                  agents={agents}
+                  chats={chats}
+                  currentAgent={currentAgent}
+                  executedActions={actions}
+                  timeline={turnTimeline}
+                  orchestrationChildren={childList}
+                  currentRound={isStreamingTail ? currentRound : undefined}
+                  isPlanMode={isPlanMode}
+                  onRegenerate={onRegenerate}
+                  startedAtMs={isStreamingTail ? currentTurnStartedAtMs : undefined}
+                  durationMs={durationMs}
+                  onShare={message.id === lastAssistantId ? onShare : undefined}
+                />
+              );
+            })}
+            {/* W7-1: 中断提示卡在消息列尾部、与最后一条用户消息同列——
+                视觉上隶属于被截断的那一轮，而非全局横幅。流式期间不显示
+                （进行中的流不是中断）。 */}
+            {interrupted && !isStreaming && onContinueInterrupted && onDismissInterrupted ? (
+              <InterruptedTurnCard
+                onContinue={onContinueInterrupted}
+                onDismiss={onDismissInterrupted}
+              />
+            ) : null}
+            {/* 后台任务终态通知：与中断卡同列在消息列尾部。任务跨 turn 跑，
+                结束时间与当前这一轮无关，所以钉在末尾而不是挂到某条消息下。
+                流式期间照常显示——任务的结束和主对话在不在说话没有关系。 */}
+            {finishedTasks && onInspectTask && onDismissFinishedTask ? (
+              <TaskOutcomeCards
+                tasks={finishedTasks}
+                onInspect={onInspectTask}
+                onDismiss={onDismissFinishedTask}
+              />
+            ) : null}
+          </div>
+        )}
+        <div ref={endRef} />
+      </div>
+
+      {!isAtBottom && visibleMessages.length > 0 && (
+        <button
+          type="button"
+          onClick={() => scrollToBottom('smooth')}
+          className="absolute bottom-3 right-3 flex h-8 w-8 items-center justify-center rounded-full border border-agent-border bg-agent-canvas text-agent-foreground shadow-md transition-colors hover:bg-agent-foreground/5"
+          title="回到底部"
+          aria-label="回到底部"
+        >
+          <LuArrowDown className="h-4 w-4" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default MessageList;

package/src/components/chat/ModelPicker.test.tsx

@@ -0,0 +1,149 @@
+/**
+ * ModelPicker 交互测试：
+ *   - 目录行渲染 + 选模型（换模型清掉旧档位）；
+ *   - 有 reasoningLevels 的模型才出档位选择器；
+ *   - 「跟随设置」回到 null（全局设置）；
+ *   - offline/stale 状态如实披露（目录不可用 / 缓存），offline 时仍可选择。
+ */
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { GatewayModelCatalog } from '@/lib/local-api';
+
+const getLlmModels = vi.fn();
+const getLlmSettings = vi.fn();
+
+vi.mock('@/lib/local-api', () => ({
+  getLlmModels: () => getLlmModels(),
+  getLlmSettings: () => getLlmSettings(),
+}));
+
+const { ModelPicker } = await import('./ModelPicker');
+
+const CATALOG: GatewayModelCatalog = {
+  models: [
+    {
+      id: 'z-ai/glm-5.3-flash',
+      name: 'GLM 5.3 Flash',
+      window: 131072,
+      modalities: ['text'],
+      reasoningLevels: ['low', 'high', 'max'],
+      pricing: { promptPerMtok: 0.2, completionPerMtok: 0.8 },
+      joinedFrom: 'z-ai/glm-5.3-flash',
+      capabilities: 'known',
+    },
+    {
+      id: 'openai/qwen/qwen3.8-27b',
+      name: null,
+      window: null,
+      modalities: ['text'],
+      reasoningLevels: [],
+      pricing: null,
+      joinedFrom: null,
+      capabilities: 'unknown',
+    },
+  ],
+  catalogStatus: 'live',
+  fetchedAt: 1_757_000_000,
+  current: { model: null, reasoningEffort: null },
+};
+
+function renderPicker(overrides: Partial<Parameters<typeof ModelPicker>[0]> = {}) {
+  const props = {
+    model: null as string | null,
+    reasoningEffort: null as string | null,
+    onSelectModel: vi.fn(),
+    onSelectEffort: vi.fn(),
+    ...overrides,
+  };
+  const utils = render(<ModelPicker {...props} />);
+  return { ...utils, props };
+}
+
+describe('ModelPicker', () => {
+  beforeEach(() => {
+    getLlmModels.mockResolvedValue(CATALOG);
+    getLlmSettings.mockResolvedValue({ provider: 'openai-compat', model: 'deepseek-chat' });
+  });
+  afterEach(() => cleanup());
+
+  it('shows the settings model by default and lists catalog rows', async () => {
+    const { props } = renderPicker();
+    // 默认展示设置里的模型
+    const trigger = await screen.findByText('deepseek-chat');
+    fireEvent.click(trigger);
+
+    // 目录行 + 跟随设置行
+    expect(await screen.findByText('z-ai/glm-5.3-flash')).toBeTruthy();
+    expect(screen.getByText('openai/qwen/qwen3.8-27b')).toBeTruthy();
+    expect(screen.getByText(/跟随设置/)).toBeTruthy();
+    expect(screen.getByText('思考')).toBeTruthy();
+    expect(screen.getByText('131K')).toBeTruthy();
+    expect(screen.getByText('未识别')).toBeTruthy();
+
+    fireEvent.click(screen.getByText('z-ai/glm-5.3-flash'));
+    expect(props.onSelectModel).toHaveBeenCalledWith('z-ai/glm-5.3-flash');
+    // 换模型清档位，让 sidecar 按新模型校验
+    expect(props.onSelectEffort).toHaveBeenCalledWith(null);
+  });
+
+  it('offers the effort picker only for models with reasoning levels', async () => {
+    const { props, rerender } = renderPicker({ model: 'z-ai/glm-5.3-flash' });
+    // 等目录到达后档位按钮出现
+    const effortTrigger = await screen.findByText('自动');
+    fireEvent.click(effortTrigger);
+    for (const level of ['low', 'high', 'max']) {
+      expect(screen.getByText(level)).toBeTruthy();
+    }
+    fireEvent.click(screen.getByText('max'));
+    expect(props.onSelectEffort).toHaveBeenCalledWith('max');
+
+    // 切到未识别模型：档位选择器消失
+    rerender(
+      <ModelPicker
+        model="openai/qwen/qwen3.8-27b"
+        reasoningEffort={null}
+        onSelectModel={props.onSelectModel}
+        onSelectEffort={props.onSelectEffort}
+      />,
+    );
+    expect(screen.queryByText('自动')).toBeNull();
+  });
+
+  it('discloses the offline state and still allows manual selection', async () => {
+    getLlmModels.mockResolvedValue({
+      models: [],
+      catalogStatus: 'offline',
+      error: 'connect refused',
+    });
+    renderPicker();
+    const trigger = await screen.findByText('deepseek-chat');
+    fireEvent.click(trigger);
+    expect(await screen.findByText('目录不可用')).toBeTruthy();
+    expect(screen.getByText(/网关不可达/)).toBeTruthy();
+  });
+
+  it('badges a stale catalog as cache', async () => {
+    getLlmModels.mockResolvedValue({ ...CATALOG, catalogStatus: 'stale' });
+    renderPicker();
+    fireEvent.click(await screen.findByText('deepseek-chat'));
+    expect(await screen.findByText('缓存')).toBeTruthy();
+    // 缓存目录的模型行照常可选
+    expect(screen.getByText('z-ai/glm-5.3-flash')).toBeTruthy();
+  });
+
+  it('omits a leading icon on the trigger', async () => {
+    renderPicker({ model: 'z-ai/glm-5.3-flash' });
+    const trigger = (await screen.findByText('z-ai/glm-5.3-flash')).closest('button');
+    expect(trigger).toBeTruthy();
+    expect(screen.getByText('本会话')).toBeTruthy();
+    // Chevron only — no CPU / vendor logo in the chip.
+    expect(trigger!.querySelectorAll('svg')).toHaveLength(1);
+  });
+
+  it('resets to the global settings model via 跟随设置', async () => {
+    const { props } = renderPicker({ model: 'z-ai/glm-5.3-flash' });
+    fireEvent.click(await screen.findByText('z-ai/glm-5.3-flash'));
+    fireEvent.click(await screen.findByText(/跟随设置/));
+    expect(props.onSelectModel).toHaveBeenCalledWith(null);
+  });
+});