@steerable/agent-shell-web 0.6.28 → 0.6.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steerable/agent-shell-web",
-  "version": "0.6.28",
+  "version": "0.6.30",
   "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",
@@ -46,8 +46,8 @@
     "react-router-dom": "^6.30.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "@steerable/agent-protocol": "0.6.28",
-    "@steerable/agent-ui": "0.6.28"
+    "@steerable/agent-ui": "0.6.30",
+    "@steerable/agent-protocol": "0.6.30"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.0",
@@ -60,7 +60,7 @@
     "typescript": "^5.8.3",
     "vite": "^5.4.21",
     "vitest": "^3.2.4",
-    "@steerable/pack-sdk": "0.6.28"
+    "@steerable/pack-sdk": "0.6.30"
   },
   "scripts": {
     "gen": "echo agent-shell-web",

package/src/components/AgentSidebar.tsx

@@ -621,7 +621,7 @@ export function AgentSidebar({
     <div className="flex h-full w-full flex-col border-r border-agent-border/60 bg-agent-muted/70 backdrop-blur-md">
       {/* ───── Brand + actions ───── */}
       <div className="flex h-9 flex-shrink-0 items-center justify-between px-2.5">
-        <BrandLockup />
+        <BrandLockup onClick={() => handleOpenNewChat()} />
         <div className="flex items-center gap-1">
           <button
             type="button"
@@ -704,7 +704,7 @@ export function AgentSidebar({
           <button
             type="button"
             onClick={() => setChatsExpanded((v) => !v)}
-            className="flex items-center text-xs font-semibold tracking-wider text-agent-muted-foreground transition-colors hover:text-agent-foreground"
+            className="flex h-6 items-center rounded-full px-2.5 text-xs font-semibold tracking-wider text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground"
           >
             <span className="mr-1">
               {chatsExpanded ? (
@@ -739,7 +739,7 @@ export function AgentSidebar({
         {chatsExpanded && (
           <div
             ref={chatScrollRef}
-            className="flex-1 overflow-y-auto px-2 pb-1"
+            className="flex-1 overflow-y-auto px-2.5 pb-1"
           >
             {isChatLoading && chats.length === 0 && projects.length === 0 ? (
               <div className="flex items-center justify-center py-4 text-xs text-agent-muted-foreground">

package/src/components/BrandLockup.tsx

@@ -1,24 +1,40 @@
 import { BRAND_NAME, BRAND_TITLE, getBrandLogoUrl } from '@/brand';
 
+export interface BrandLockupProps {
+  className?: string;
+  onClick?: () => void;
+}
+
 /**
  * 侧栏品牌锁头。配了 brand.title 就 logo + 标题；没配标题则只显示 logo，
  * 并按原图宽高比缩放（一体字标不要压成方图）。
+ * 自带 px-2.5 内边距，与侧边栏下方各功能行、会话行的图标在一条垂直参考线上（left: 20px）精准对齐。
  */
-export function BrandLockup() {
+export function BrandLockup({ className, onClick }: BrandLockupProps = {}) {
   const title = BRAND_TITLE.trim();
   return (
-    <div className="flex min-w-0 items-center gap-2">
+    <div
+      onClick={onClick}
+      className={[
+        'flex min-w-0 items-center gap-2 px-2.5',
+        onClick ? 'cursor-pointer select-none transition-opacity hover:opacity-85' : '',
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
       <img
         src={getBrandLogoUrl()}
         alt={title || BRAND_NAME}
-        className="h-6 w-auto max-w-[10rem] flex-shrink-0 select-none object-contain object-left"
+        className={`${title ? 'h-5' : 'h-6'} w-auto max-w-[10rem] flex-shrink-0 select-none object-contain object-left`}
         draggable={false}
       />
       {title ? (
-        <span className="truncate text-xs font-semibold tracking-tight text-agent-foreground">
+        <span className="truncate text-xs font-semibold tracking-tight text-agent-foreground leading-none">
           {title}
         </span>
       ) : null}
     </div>
   );
 }
+

package/src/components/chat/AssistantMessage.tsx

@@ -5,7 +5,9 @@ import type { ChatMessage } from '@steerable/agent-protocol';
 import type { LocalChat, LocalChatAgent } from '@/lib/local-api';
 import { Markdown } from './Markdown';
 import { ExecutedActionsCard, type ExecutedAction } from './ExecutedActionsCard';
-import { OrchestrationChildrenCard, type ChildInfo } from './OrchestrationChildrenCard';
+import type { ChildInfo } from './OrchestrationChildrenCard';
+import { collectTurnParticipants, extractMentionedAgentIds } from './executed-actions-model';
+import type { InspectTaskInput } from './executed-actions-model';
 import { StreamingStatus } from './StreamingStatus';
 import { getFriendlyDate } from './timestamp';
 import { useCopy } from './useCopy';
@@ -83,8 +85,15 @@ interface AssistantMessageProps {
    * `content` keep the legacy stacked layout.
    */
   timeline?: TurnBlock[];
-  /** P3.1: live child-agent list for this turn (orchestration card). */
+  /**
+   * P3.1 子代理生命周期。看板卡片已不再渲染——每个 `委派 · X` 工具行从
+   * 「执行中」到「已完成」本身就是同一份进度，还能展开看任务书与回报。
+   * 这份列表现在喂两处：顶栏参与者徽章（没有 `@提及` 时的回落来源），
+   * 以及委派行跳转右侧过程栏所需的子代理 record。
+   */
   orchestrationChildren?: ChildInfo[];
+  /** 上一轮用户消息：顶栏按里面的 `@提及` 画参与的智能体。 */
+  previousUser?: Pick<ChatMessage, 'content'> & { messageMetadata?: string | null };
   /**
    * Current round number for the in-flight turn (1-based). Only meaningful
    * when `isStreaming === true` and this is the tail message — used by
@@ -121,37 +130,42 @@ interface AssistantMessageProps {
    * 行上，跟复制 / 重新生成同一排。
    */
   onShare?: () => Promise<boolean>;
+  onInspectTask?: (task: InspectTaskInput) => void;
 }
 
-function agentInitial(agent: LocalChatAgent | null): string {
-  if (!agent?.name) return 'A';
-  return agent.name.trim()[0]?.toUpperCase() ?? 'A';
+function agentInitial(name: string): string {
+  return name.trim()[0]?.toUpperCase() ?? 'A';
 }
 
 function AgentBadge({
-  agent,
+  name,
+  color,
+  title,
   isStreaming,
 }: {
-  agent: LocalChatAgent;
-  isStreaming: boolean;
+  name: string;
+  color: string;
+  title?: string;
+  isStreaming?: boolean;
 }) {
   return (
     <div
       className="inline-flex items-center gap-1.5 text-[11px] leading-none text-agent-muted-foreground"
-      title={agent.description || agent.name}
+      title={title || name}
     >
       <span
+        data-agent-color-dot=""
         className="inline-flex items-center justify-center rounded-full text-[9px] font-semibold text-white"
         style={{
           width: 14,
           height: 14,
-          backgroundColor: agent.color || '#7c3aed',
+          backgroundColor: color,
         }}
       >
-        {agentInitial(agent)}
+        {agentInitial(name)}
       </span>
       <span className="max-w-[160px] truncate rounded bg-agent-canvas/90 px-1">
-        {agent.name}
+        {name}
       </span>
       {isStreaming && (
         <span className="ml-1 inline-flex h-1.5 w-1.5 animate-pulse rounded-full bg-agent-foreground/30" />
@@ -200,6 +214,17 @@ function readTurnFailure(
   return null;
 }
 
+function readPersistedAgentId(message: ChatMessage): string | undefined {
+  const raw = (message as { messageMetadata?: unknown }).messageMetadata;
+  if (typeof raw !== 'string' || !raw) return undefined;
+  try {
+    const agentId = (JSON.parse(raw) as { agentId?: unknown }).agentId;
+    return typeof agentId === 'string' && agentId ? agentId : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 function TurnErrorBubble({ reason }: { reason: string }) {
   return (
     <div className="rounded-agent-lg border border-agent-destructive/40 bg-agent-destructive/5 px-2.5 py-2 text-xs leading-relaxed text-agent-destructive shadow-sm">
@@ -235,6 +260,7 @@ export function AssistantMessage({
   executedActions,
   timeline,
   orchestrationChildren,
+  previousUser,
   currentRound = 1,
   isPlanMode = false,
   onRegenerate,
@@ -243,6 +269,7 @@ export function AssistantMessage({
   llmSpeed,
   turnFiles,
   onShare,
+  onInspectTask,
 }: AssistantMessageProps) {
   const content = message.content || '';
   const failure = readTurnFailure(message, content);
@@ -252,14 +279,28 @@ export function AssistantMessage({
   const { copied, copy } = useCopy(stripNextStepsTags(content));
   const [regenerating, setRegenerating] = useState(false);
   const [regenerateError, setRegenerateError] = useState<string | null>(null);
-  const persistedAgent = message.agentId
-    ? agents.find((a) => a.id === message.agentId) ?? null
+  const persistedAgentId =
+    typeof message.agentId === 'string' && message.agentId
+      ? message.agentId
+      : readPersistedAgentId(message);
+  const persistedAgent = persistedAgentId
+    ? agents.find((a) => a.id === persistedAgentId) ?? null
     : null;
   // Stream-time fallback: only allow the chat-level agent to "claim" a turn
   // while it's actively streaming and hasn't flushed agentId to the DB yet.
   const displayAgent = persistedAgent ?? (isStreaming ? currentAgent : null);
   const useTimeline = timeline !== undefined;
   const blocks = timeline ?? [];
+  const toolActions = [
+    ...(executedActions ?? []),
+    ...blocks.flatMap((block) => (block.type === 'tools' ? block.actions : [])),
+  ];
+  const participants = collectTurnParticipants(displayAgent, {
+    agents,
+    children: orchestrationChildren,
+    actions: toolActions,
+    mentionedAgentIds: extractMentionedAgentIds(previousUser, agents),
+  });
   const now = useLiveNow(Boolean(isStreaming && llmSpeed?.live));
   const tokenSpeed = formatTokenSpeed(
     llmSpeed?.tokens ?? 0,
@@ -268,7 +309,7 @@ export function AssistantMessage({
 
   return (
     <motion.div
-      className="group/message mb-1"
+      className="group/message"
       data-message-role="assistant"
       data-message-id={message.id}
       initial={{ opacity: 0, y: 8 }}
@@ -276,10 +317,22 @@ export function AssistantMessage({
       transition={{ duration: 0.25 }}
     >
       <div className="mx-auto w-full max-w-[var(--chat-input-box-width)] px-1">
-        {(displayAgent || isPlanMode) && (
-          <div className="mb-1 flex min-h-4 items-center justify-between">
-            {displayAgent ? (
-              <AgentBadge agent={displayAgent} isStreaming={isStreaming} />
+        {(participants.length > 0 || isPlanMode) && (
+          <div className="mb-1 flex min-h-4 items-center justify-between gap-2">
+            {participants.length > 0 ? (
+              <div
+                data-testid="turn-agent-badges"
+                className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1"
+              >
+                {participants.map((agent, index) => (
+                  <AgentBadge
+                    key={agent.key}
+                    name={agent.name}
+                    color={agent.color}
+                    isStreaming={isStreaming && index === 0}
+                  />
+                ))}
+              </div>
             ) : (
               <div />
             )}
@@ -291,9 +344,6 @@ export function AssistantMessage({
             )}
           </div>
         )}
-        {orchestrationChildren && orchestrationChildren.length > 0 && (
-          <OrchestrationChildrenCard children={orchestrationChildren} />
-        )}
         {useTimeline ? (
           <>
           <TurnProcessGroup
@@ -304,6 +354,8 @@ export function AssistantMessage({
             agents={agents}
             chats={chats}
             chatId={chatId}
+            onInspectTask={onInspectTask}
+            orchestrationChildren={orchestrationChildren}
             emptyFallback={
               failure ? (
                 <TurnErrorBubble reason={failure.reason} />
@@ -348,7 +400,13 @@ export function AssistantMessage({
         ) : (
           <>
             {executedActions && executedActions.length > 0 && (
-              <ExecutedActionsCard actions={executedActions} />
+              <ExecutedActionsCard
+                actions={executedActions}
+                agents={agents}
+                chatId={chatId}
+                onInspectTask={onInspectTask}
+                orchestrationChildren={orchestrationChildren}
+              />
             )}
             {displayContent ? (
               <div className={bubbleClass(isPlanMode)}>
@@ -382,11 +440,11 @@ export function AssistantMessage({
         {/* 回合产物文件列表：钉在回答之下、时间戳行之上（Codex 式收尾）。
             回合收尾才有数据，流式期间天然为空。 */}
         {!isStreaming && turnFiles && turnFiles.length > 0 && (
-          <div className="mt-1.5">
+          <div className="mt-2.5 mb-1">
             <TurnFilesCard files={turnFiles} />
           </div>
         )}
-        <div className="mt-1 flex items-center gap-2 text-[11px] text-agent-muted-foreground">
+        <div className="mt-2 flex items-center gap-2 text-[11px] text-agent-muted-foreground/80">
           <span>
             {message.createdAt
               ? getFriendlyDate(new Date(message.createdAt))

package/src/components/chat/ChatInput.tsx

@@ -141,6 +141,8 @@ export interface ChatInputProps {
   /** Slot in the composer meta row above the input box, before the agent
    * picker (e.g. the project badge). */
   leadingChrome?: ReactNode;
+  /** Slot in the composer meta row above the input box, right-aligned (e.g. SessionTodoList). */
+  trailingChrome?: ReactNode;
   /** Current chat mode. When unset the toggle is hidden (defaults to 'agent'). */
   mode?: ChatMode;
   /** Called when the user switches between Agent / Plan mode. */
@@ -696,6 +698,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
       onOpenSettings,
       toolbarExtras,
       leadingChrome,
+      trailingChrome,
       mode,
       onModeChange,
       execPolicy,
@@ -1549,10 +1552,10 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
     return (
       // @container：底栏元素的显隐/宽度用容器查询（@sm = 384px）而不是
       // 视口断点——侧边栏占宽后，视口够宽但输入框本身可能已经很窄。
-      <div className="chat-input-container @container relative px-2.5 pb-2 pt-0.5">
-        {(leadingChrome || selectedAgent) && (
+      <div className="chat-input-container @container relative px-2.5 pb-2.5 pt-1">
+        {(leadingChrome || selectedAgent || trailingChrome) && (
           <div
-            className="relative mb-1 flex min-w-0 items-center gap-1.5"
+            className="relative mb-1.5 flex min-w-0 items-center gap-1.5"
             data-testid="composer-meta-row"
           >
             {leadingChrome}
@@ -1568,6 +1571,11 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                 mentionReferences={mentionReferences}
               />
             )}
+            {trailingChrome && (
+              <div className="ml-auto flex items-center min-w-0">
+                {trailingChrome}
+              </div>
+            )}
           </div>
         )}
         {mentionQuery && mentionSuggestions.length > 0 && (