@steerable/agent-shell-web 0.6.26 → 0.6.28

package/src/components/chat/ModelPicker.tsx

@@ -117,7 +117,7 @@ export function ModelPicker({
             if (next && status !== 'live' && !loading) void refresh();
           }}
           disabled={disabled}
-          className="inline-flex h-7 min-w-0 max-w-[160px] items-center gap-1.5 rounded-full border border-agent-border bg-agent-canvas px-2 text-xs text-agent-foreground transition-colors hover:bg-agent-foreground/5 disabled:cursor-not-allowed disabled:opacity-70 @sm:max-w-[220px]"
+          className="inline-flex h-6 min-w-0 max-w-[160px] items-center gap-1 rounded-full border border-agent-border bg-agent-canvas px-1.5 text-[12px] leading-[1.45] text-agent-foreground transition-colors hover:bg-agent-foreground/5 disabled:cursor-not-allowed disabled:opacity-70 @sm:max-w-[220px]"
           title={
             status === 'offline'
               ? `模型目录不可用${catalog?.error ? `：${catalog.error}` : ''}（仍可手动指定模型）`
@@ -165,7 +165,7 @@ export function ModelPicker({
                 setModelMenuOpen(false);
               }}
               className={[
-                'flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs transition-colors',
+                'flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-[12px] leading-[1.45] transition-colors',
                 model == null
                   ? 'bg-agent-foreground/10 text-agent-foreground'
                   : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',
@@ -192,7 +192,7 @@ export function ModelPicker({
                     setModelMenuOpen(false);
                   }}
                   className={[
-                    'flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs transition-colors',
+                    'flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-[12px] leading-[1.45] transition-colors',
                     isActive
                       ? 'bg-agent-foreground/10 text-agent-foreground'
                       : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',
@@ -232,7 +232,7 @@ export function ModelPicker({
               setModelMenuOpen(false);
             }}
             disabled={disabled}
-            className="inline-flex h-7 items-center gap-1 rounded-full border border-agent-border bg-agent-canvas px-2 text-xs text-agent-foreground transition-colors hover:bg-agent-foreground/5 disabled:cursor-not-allowed disabled:opacity-70"
+            className="inline-flex h-6 items-center gap-1 rounded-full border border-agent-border bg-agent-canvas px-1.5 text-[12px] leading-[1.45] text-agent-foreground transition-colors hover:bg-agent-foreground/5 disabled:cursor-not-allowed disabled:opacity-70"
             title="推理档位（随每轮请求下发；模型不支持会直接报错）"
             aria-haspopup="menu"
             aria-expanded={effortMenuOpen}
@@ -253,7 +253,7 @@ export function ModelPicker({
                   setEffortMenuOpen(false);
                 }}
                 className={[
-                  'flex w-full rounded px-2 py-1.5 text-left text-xs transition-colors',
+                  'flex w-full rounded px-2 py-1.5 text-left text-[12px] leading-[1.45] transition-colors',
                   reasoningEffort == null
                     ? 'bg-agent-foreground/10 text-agent-foreground'
                     : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',
@@ -271,7 +271,7 @@ export function ModelPicker({
                     setEffortMenuOpen(false);
                   }}
                   className={[
-                    'flex w-full rounded px-2 py-1.5 text-left text-xs transition-colors',
+                    'flex w-full rounded px-2 py-1.5 text-left text-[12px] leading-[1.45] transition-colors',
                     reasoningEffort === level
                       ? 'bg-agent-foreground/10 text-agent-foreground'
                       : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',

package/src/components/chat/SessionTodoList.tsx

@@ -0,0 +1,137 @@
+import { useMemo, useState } from 'react';
+import {
+  LuCircle,
+  LuCircleCheck,
+  LuCircleDot,
+  LuChevronDown,
+  LuChevronRight,
+  LuListChecks,
+} from 'react-icons/lu';
+import {
+  summarizeTodos,
+  type SessionTodo,
+  type TodoStatus,
+} from './todo-list-model';
+
+function StatusIcon({
+  status,
+  className,
+}: {
+  status: TodoStatus;
+  className?: string;
+}) {
+  const cls = ['h-3.5 w-3.5 shrink-0', className].filter(Boolean).join(' ');
+  if (status === 'completed') {
+    return <LuCircleCheck className={`${cls} text-emerald-600 dark:text-emerald-400`} />;
+  }
+  if (status === 'in_progress') {
+    return <LuCircleDot className={`${cls} text-blue-600 dark:text-blue-400`} />;
+  }
+  return <LuCircle className={`${cls} text-agent-muted-foreground/70`} />;
+}
+
+export function currentTodoStep(todos: SessionTodo[]): SessionTodo | null {
+  return (
+    todos.find((todo) => todo.status === 'in_progress') ??
+    todos.find((todo) => todo.status === 'pending') ??
+    todos[todos.length - 1] ??
+    null
+  );
+}
+
+export function todoProgressCopy(todos: SessionTodo[]): string {
+  const summary = summarizeTodos(todos);
+  if (summary.total === 0) return '';
+  if (summary.completed === summary.total) {
+    return `${summary.completed}/${summary.total} 已完成`;
+  }
+  const currentIndex = todos.findIndex((todo) => todo.status === 'in_progress');
+  const step =
+    currentIndex >= 0 ? currentIndex + 1 : Math.min(summary.completed + 1, summary.total);
+  return `执行到 ${step}/${summary.total}`;
+}
+
+export function TodoItems({
+  todos,
+  compact = false,
+}: {
+  todos: SessionTodo[];
+  compact?: boolean;
+}) {
+  return (
+    <ol
+      className={`m-0 list-none ${compact ? 'max-h-40 space-y-1 overflow-y-auto px-2.5 py-1.5' : 'space-y-1 px-2.5 py-1.5'}`}
+    >
+      {todos.map((todo) => {
+        const done = todo.status === 'completed';
+        const active = todo.status === 'in_progress';
+        return (
+          <li
+            key={todo.id}
+            data-testid={`todo-item-${todo.id}`}
+            data-status={todo.status}
+            className="flex items-start gap-2 text-[12px] leading-relaxed"
+          >
+            <StatusIcon status={todo.status} className="mt-[2px]" />
+            <span
+              className={
+                done
+                  ? 'text-agent-muted-foreground line-through'
+                  : active
+                    ? 'font-medium text-agent-foreground'
+                    : 'text-agent-foreground'
+              }
+            >
+              {todo.content}
+            </span>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
+export function SessionTodoList({ todos }: { todos: SessionTodo[] }) {
+  const [expanded, setExpanded] = useState(false);
+  const current = useMemo(() => currentTodoStep(todos), [todos]);
+  const progressLabel = useMemo(() => todoProgressCopy(todos), [todos]);
+
+  return (
+    <div
+      className="mb-1 overflow-hidden rounded-agent-lg border border-agent-border bg-agent-canvas shadow-sm"
+      data-testid="session-todo-list"
+    >
+      <button
+        type="button"
+        onClick={() => setExpanded((value) => !value)}
+        className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left"
+        aria-expanded={expanded}
+      >
+        {expanded ? (
+          <LuChevronDown className="h-3.5 w-3.5 shrink-0 text-agent-muted-foreground" />
+        ) : (
+          <LuChevronRight className="h-3.5 w-3.5 shrink-0 text-agent-muted-foreground" />
+        )}
+        {expanded || !current ? (
+          <LuListChecks className="h-3.5 w-3.5 shrink-0 text-agent-foreground" />
+        ) : (
+          <StatusIcon status={current.status} />
+        )}
+        <span className="min-w-0 flex-1 truncate text-[12px] font-medium text-agent-foreground">
+          {expanded ? '任务清单' : (current?.content ?? '任务清单')}
+        </span>
+        {progressLabel ? (
+          <span
+            className="shrink-0 rounded-full bg-agent-muted px-1.5 py-0.5 text-[10px] font-medium text-agent-muted-foreground"
+            data-testid="todo-progress"
+          >
+            {progressLabel}
+          </span>
+        ) : null}
+      </button>
+      {expanded ? <TodoItems todos={todos} compact /> : null}
+    </div>
+  );
+}
+
+export default SessionTodoList;

package/src/components/chat/SessionTreeModal.tsx

@@ -136,9 +136,9 @@ export function SessionTreeModal({ chatId, onClose, onBranchSwitched }: SessionT
       data-session-tree-modal
     >
       <div className="flex max-h-[85vh] w-full max-w-lg flex-col overflow-hidden rounded-agent-lg border border-agent-border bg-agent-canvas shadow-xl">
-        <div className="flex items-center gap-2 border-b border-agent-border px-4 py-2.5">
+        <div className="flex items-center gap-2 border-b border-agent-border px-3 py-2">
           <LuGitBranch className="h-4 w-4 shrink-0 text-agent-muted-foreground" />
-          <span className="min-w-0 flex-1 truncate text-sm font-medium text-agent-foreground">
+          <span className="min-w-0 flex-1 truncate text-xs font-medium text-agent-foreground">
             会话分支树
             {data && data.nodeCount > 1 && (
               <span className="ml-1.5 text-xs font-normal text-agent-muted-foreground">
@@ -206,7 +206,7 @@ export function SessionTreeModal({ chatId, onClose, onBranchSwitched }: SessionT
         </div>
 
         {!loading && !isEmpty && (
-          <div className="border-t border-agent-border px-4 py-2 text-[10px] text-agent-muted-foreground/80">
+          <div className="border-t border-agent-border px-3 py-1.5 text-[10px] text-agent-muted-foreground/80">
             {data?.truncated
               ? '分支过多，树已被截断（仅显示部分节点）。'
               : '点击切换分支；↑↓ 移动，Enter 切换，Esc 关闭。'}

package/src/components/chat/SuggestedReplies.tsx

@@ -1,7 +1,8 @@
 /**
  * WorkBuddy-style follow-up chips: next-turn user inputs rendered under the
- * latest assistant reply. Count follows the turn (skill next steps), not a
- * fixed three. Clicking one sends that text immediately.
+ * latest assistant reply. Source is the model's judgment of `[next_steps]`
+ * or the last paragraph — count follows that, not a fixed three. Clicking
+ * one sends that text immediately.
  */
 export function SuggestedReplies({
   suggestions,
@@ -14,7 +15,7 @@ export function SuggestedReplies({
 
   return (
     <div
-      className="mx-auto flex w-full max-w-[var(--chat-input-box-width)] flex-col items-start gap-1.5 px-1 pt-1"
+      className="mx-auto flex w-full max-w-[var(--chat-input-box-width)] flex-col items-start gap-1 px-1 pt-0.5 text-[12px]"
       data-testid="suggested-replies"
     >
       {suggestions.map((text) => (
@@ -23,7 +24,7 @@ export function SuggestedReplies({
           type="button"
           data-testid="suggested-reply"
           onClick={() => onSelect(text)}
-          className="max-w-full rounded-full border border-agent-border bg-agent-muted/40 px-3 py-1.5 text-left text-[13px] leading-snug text-agent-foreground transition-colors hover:bg-agent-foreground/5"
+          className="max-w-full rounded-full border border-agent-border bg-agent-muted/40 px-2 py-0.5 text-left text-[12px] leading-[1.45] text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground"
         >
           {text}
         </button>

package/src/components/chat/TaskPanelModal.tsx

@@ -135,9 +135,9 @@ export function TaskPanelModal({
       data-task-panel-modal
     >
       <div className="flex max-h-[85vh] w-full max-w-xl flex-col overflow-hidden rounded-agent-lg border border-agent-border bg-agent-canvas shadow-xl">
-        <div className="flex items-center gap-2 border-b border-agent-border px-4 py-2.5">
+        <div className="flex items-center gap-2 border-b border-agent-border px-3 py-2">
           <LuListTodo className="h-4 w-4 shrink-0 text-agent-muted-foreground" />
-          <span className="min-w-0 flex-1 truncate text-sm font-medium text-agent-foreground">
+          <span className="min-w-0 flex-1 truncate text-xs font-medium text-agent-foreground">
             后台任务
             {tasks && tasks.length > 0 && (
               <span className="ml-1.5 text-xs font-normal text-agent-muted-foreground">
@@ -298,7 +298,7 @@ export function TaskPanelModal({
           )}
         </div>
 
-        <div className="border-t border-agent-border px-4 py-2 text-[10px] text-agent-muted-foreground/80">
+        <div className="border-t border-agent-border px-3 py-1.5 text-[10px] text-agent-muted-foreground/80">
           任务由后台智能体独立执行。点任务名可在右侧看推理过程；Esc 关闭。
         </div>
       </div>

package/src/components/chat/TaskProcessPanel.tsx

@@ -35,16 +35,18 @@ export function TaskProcessPanel({
   const [error, setError] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
+  const isAtBottomRef = useRef(true);
 
   const checkAtBottom = useCallback(() => {
     const el = containerRef.current;
     if (!el) return;
     const atBottom =
       el.scrollHeight - el.scrollTop - el.clientHeight < NEAR_BOTTOM_THRESHOLD_PX;
+    isAtBottomRef.current = atBottom;
     setIsAtBottom(atBottom);
   }, []);
 
-  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'smooth') => {
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'auto') => {
     const el = containerRef.current;
     if (!el) return;
     if (behavior === 'smooth') {
@@ -65,20 +67,22 @@ export function TaskProcessPanel({
 
   // 换任务 / 首屏：没有「之前在不在底部」可言，直接钉到底。
   useLayoutEffect(() => {
-    scrollToBottom('instant' as ScrollBehavior);
+    isAtBottomRef.current = true;
+    scrollToBottom('auto');
     setIsAtBottom(true);
   }, [inspected.id, scrollToBottom]);
 
-  // live 增量只在用户还贴着底部时跟滚——往上翻看前面的工具调用时不要拽走。
+  // live 增量在 paint 前钉住底部。smooth scroll 会先露出一帧半截内容再往下
+  // 滑，Windows 经典滚动条就会上下跳。
   const timelineSig = blocks
     .map((block) =>
       block.type === 'tools' ? `t${block.actions.length}` : `c${block.content.length}`,
     )
     .join('|');
-  useEffect(() => {
-    if (!isAtBottom) return;
-    scrollToBottom('smooth');
-  }, [timelineSig, live, isAtBottom, scrollToBottom]);
+  useLayoutEffect(() => {
+    if (!isAtBottomRef.current) return;
+    scrollToBottom('auto');
+  }, [timelineSig, live, scrollToBottom]);
 
   useEffect(() => {
     let cancelled = false;
@@ -145,7 +149,7 @@ export function TaskProcessPanel({
           )
         }
       />
-      <div className="border-b border-agent-border/60 px-3 py-2">
+      <div className="border-b border-agent-border/60 px-2.5 py-1.5">
         <div className="line-clamp-3 text-xs leading-relaxed text-agent-foreground">
           {inspected.title}
         </div>
@@ -153,7 +157,7 @@ export function TaskProcessPanel({
       <div className="relative min-h-0 flex-1 overflow-hidden">
         <div
           ref={containerRef}
-          className="h-full overflow-y-auto p-3"
+          className="h-full overflow-y-auto overflow-anchor-none p-2.5"
           data-testid="task-process-scroll"
         >
           {loading ? (
@@ -168,6 +172,7 @@ export function TaskProcessPanel({
               blocks={blocks}
               isStreaming={live}
               showThinkingContent
+              collapseWhenFinished={false}
               agents={[]}
               chats={[]}
               emptyFallback={
@@ -180,7 +185,7 @@ export function TaskProcessPanel({
                 </div>
               }
               renderAnswer={(block) => (
-                <div className="text-sm leading-relaxed text-agent-foreground">
+                <div className="text-xs leading-relaxed text-agent-foreground">
                   <Markdown agents={[]} chats={[]}>{block.content}</Markdown>
                 </div>
               )}
@@ -191,10 +196,11 @@ export function TaskProcessPanel({
           <button
             type="button"
             onClick={() => {
+              isAtBottomRef.current = true;
               setIsAtBottom(true);
               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"
+            className="absolute bottom-2 right-2 flex h-7 w-7 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="回到底部"
           >

package/src/components/chat/TurnFilesCard.tsx

@@ -57,7 +57,7 @@ export function TurnFilesCard({ files }: TurnFilesCardProps) {
       className="rounded-agent-lg border border-agent-border bg-agent-canvas shadow-sm"
       data-turn-files=""
     >
-      <div className="flex items-center gap-1.5 border-b border-agent-border/60 px-3 py-1.5 text-[11px] text-agent-muted-foreground">
+      <div className="flex items-center gap-1.5 border-b border-agent-border/60 px-2.5 py-1 text-[11px] text-agent-muted-foreground">
         <LuFiles className="h-3.5 w-3.5" />
         <span>本轮产生了 {files.length} 个文件，点击打开</span>
       </div>
@@ -74,7 +74,7 @@ export function TurnFilesCard({ files }: TurnFilesCardProps) {
                 onClick={() => void handleOpen(file)}
                 disabled={openingPath !== null}
                 title={file.path}
-                className="flex w-full items-center gap-2 px-3 py-1 text-left text-xs transition-colors hover:bg-agent-foreground/5 disabled:cursor-wait"
+                className="flex w-full items-center gap-2 px-2.5 py-1 text-left text-xs transition-colors hover:bg-agent-foreground/5 disabled:cursor-wait"
                 data-turn-file=""
                 data-kind={file.kind}
               >