@stigmer/react 0.0.56 → 0.0.57

package/src/execution/SubAgentSection.tsx

@@ -1,6 +1,8 @@
 "use client";
 
+import { useMemo, useState } from "react";
 import type { SubAgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/subagent_pb";
+import type { TodoItem } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/todo_pb";
 import type { AgentMessage, ToolCall } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import {
   MessageType,
@@ -10,9 +12,23 @@ import { cn } from "@stigmer/theme";
 import { formatDuration } from "./ToolCallDetail";
 import { MessageEntry } from "./MessageEntry";
 import { ToolCallGroup } from "./ToolCallGroup";
+import {
+  TodoList,
+  TodoInProgressIcon,
+  findActiveTodo,
+  todoCompletionSummary,
+} from "./TodoList";
 
 export interface SubAgentSectionProps {
   readonly subAgentExecution: SubAgentExecution;
+  /**
+   * Whether to render as a collapsible card with expand/collapse
+   * toggle. Defaults to `true`.
+   *
+   * Set to `false` when rendered inside a parent that already
+   * provides its own expand/collapse (e.g. {@link ToolCallItem}).
+   */
+  readonly collapsible?: boolean;
   readonly className?: string;
 }
 
@@ -20,28 +36,221 @@ export interface SubAgentSectionProps {
  * Renders a sub-agent execution as a nested mini-thread inside the
  * parent conversation.
  *
+ * When `collapsible` is `true` (default), the component renders as a
+ * bordered card with a clickable summary row. Cards start collapsed
+ * — the summary row shows status, subject, and duration at a glance.
+ * Users click to expand and see the nested messages and tool calls.
+ *
+ * Visually distinguished from {@link ToolCallGroup} via a left
+ * accent border and bot icon, signaling delegated sub-agent work.
+ *
+ * When `collapsible` is `false`, the component renders flat content
+ * without a toggle — suitable for embedding inside a parent that
+ * already provides expand/collapse (e.g. {@link ToolCallItem}).
+ *
  * Composes {@link MessageEntry} and {@link ToolCallGroup} to display
  * the sub-agent's internal messages and tool calls — the same
  * building blocks used by the top-level {@link MessageThread}.
  *
- * Visually distinguished from the parent thread via a left border
- * and subtle background.
- *
  * @example
  * ```tsx
+ * // Standalone collapsible card (default)
  * <SubAgentSection subAgentExecution={sub} />
+ *
+ * // Flat layout inside a parent expand/collapse
+ * <SubAgentSection subAgentExecution={sub} collapsible={false} />
  * ```
  */
 export function SubAgentSection({
   subAgentExecution: sub,
+  collapsible = true,
   className,
 }: SubAgentSectionProps) {
   const duration = formatDuration(sub.startedAt, sub.completedAt);
   const statusInfo = SUB_AGENT_STATUS_MAP[sub.status];
-  const Icon = statusInfo.icon;
+  const StatusIcon = statusInfo.icon;
   const isFailed = sub.status === SubAgentStatus.SUB_AGENT_FAILED;
   const threadItems = buildSubAgentThreadItems(sub.messages);
 
+  const displayLabel = sub.subject || sub.name;
+
+  if (!collapsible) {
+    return (
+      <FlatContent
+        sub={sub}
+        statusInfo={statusInfo}
+        StatusIcon={StatusIcon}
+        duration={duration}
+        isFailed={isFailed}
+        threadItems={threadItems}
+        className={className}
+      />
+    );
+  }
+
+  return (
+    <CollapsibleCard
+      sub={sub}
+      statusInfo={statusInfo}
+      displayLabel={displayLabel}
+      duration={duration}
+      isFailed={isFailed}
+      threadItems={threadItems}
+      className={className}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Collapsible card — progressive disclosure (default mode)
+// ---------------------------------------------------------------------------
+
+interface CollapsibleCardProps {
+  readonly sub: SubAgentExecution;
+  readonly statusInfo: SubAgentStatusInfo;
+  readonly displayLabel: string;
+  readonly duration: string | null;
+  readonly isFailed: boolean;
+  readonly threadItems: SubAgentThreadItem[];
+  readonly className?: string;
+}
+
+function CollapsibleCard({
+  sub,
+  statusInfo,
+  displayLabel,
+  duration,
+  isFailed,
+  threadItems,
+  className,
+}: CollapsibleCardProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  const handleToggle = () => {
+    setExpanded((v) => !v);
+  };
+
+  const hasTodos =
+    sub.todos != null && Object.keys(sub.todos).length > 0;
+  const isRunning = sub.status === SubAgentStatus.SUB_AGENT_IN_PROGRESS;
+  const isCompleted = sub.status === SubAgentStatus.SUB_AGENT_COMPLETED;
+
+  const activeTodo = useMemo(() => findActiveTodo(sub.todos), [sub.todos]);
+  const completionLabel = useMemo(
+    () => (isCompleted && hasTodos ? todoCompletionSummary(sub.todos) : null),
+    [sub.todos, isCompleted, hasTodos],
+  );
+
+  const collapsedPreview =
+    isRunning && activeTodo
+      ? activeTodo.content
+      : isCompleted && completionLabel
+        ? completionLabel
+        : null;
+
+  const ariaLabel = `Sub-agent: ${displayLabel}, ${statusInfo.label}`;
+
+  return (
+    <div
+      role="group"
+      aria-label={ariaLabel}
+      className={cn(
+        "rounded-md border border-border border-l-2 border-l-primary/30 bg-muted/30",
+        className,
+      )}
+    >
+      {/* Summary trigger */}
+      <button
+        type="button"
+        aria-expanded={expanded}
+        onClick={handleToggle}
+        className={cn(
+          "flex w-full items-center gap-2 px-2.5 py-1.5 text-left text-xs text-muted-foreground transition-colors",
+          "hover:bg-muted/50",
+          "cursor-pointer",
+        )}
+      >
+        <span className="shrink-0 text-primary/70" aria-hidden="true">
+          <BotIcon />
+        </span>
+        <span className="min-w-0 flex-1 truncate">{displayLabel}</span>
+        <span
+          className={cn(
+            "shrink-0 rounded px-1 py-0.5 text-[10px] font-medium leading-none",
+            statusInfo.badgeClass,
+          )}
+        >
+          {statusInfo.label}
+        </span>
+        {duration && (
+          <span className="shrink-0 tabular-nums text-muted-foreground">
+            {duration}
+          </span>
+        )}
+        <ChevronIcon expanded={expanded} />
+      </button>
+
+      {/* Active todo preview — visible when collapsed */}
+      {collapsedPreview && !expanded && (
+        <div className="flex items-center gap-1.5 px-2.5 pb-1.5 text-xs text-muted-foreground">
+          <span className="ml-[20px] shrink-0" aria-hidden="true">
+            {isRunning && activeTodo ? (
+              <TodoInProgressIcon />
+            ) : (
+              <TodoCompletedSmallIcon />
+            )}
+          </span>
+          <span className="min-w-0 truncate">{collapsedPreview}</span>
+        </div>
+      )}
+
+      {/* Expanded content — CSS grid-rows animation */}
+      <div
+        className={cn(
+          "grid transition-[grid-template-rows] duration-150 ease-out",
+          expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+        )}
+      >
+        <div className="overflow-hidden">
+          {expanded && (
+            <div className="border-t border-border/50 px-2.5 pb-2 pt-1.5">
+              <SubAgentThreadContent
+                threadItems={threadItems}
+                todos={sub.todos}
+                isFailed={isFailed}
+                error={sub.error}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Flat content — no toggle (used inside ToolCallItem detail panel)
+// ---------------------------------------------------------------------------
+
+interface FlatContentProps {
+  readonly sub: SubAgentExecution;
+  readonly statusInfo: SubAgentStatusInfo;
+  readonly StatusIcon: () => React.JSX.Element;
+  readonly duration: string | null;
+  readonly isFailed: boolean;
+  readonly threadItems: SubAgentThreadItem[];
+  readonly className?: string;
+}
+
+function FlatContent({
+  sub,
+  statusInfo,
+  StatusIcon,
+  duration,
+  isFailed,
+  threadItems,
+  className,
+}: FlatContentProps) {
   return (
     <div
       className={cn(
@@ -55,7 +264,7 @@ export function SubAgentSection({
           className={cn("shrink-0", statusInfo.colorClass)}
           aria-hidden="true"
         >
-          <Icon />
+          <StatusIcon />
         </span>
         <span className="font-medium text-foreground">
           {sub.name}
@@ -72,7 +281,39 @@ export function SubAgentSection({
         )}
       </div>
 
-      {/* Nested messages and tool groups */}
+      <SubAgentThreadContent
+        threadItems={threadItems}
+        todos={sub.todos}
+        isFailed={isFailed}
+        error={sub.error}
+      />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Shared thread content renderer
+// ---------------------------------------------------------------------------
+
+interface SubAgentThreadContentProps {
+  readonly threadItems: SubAgentThreadItem[];
+  readonly todos?: { readonly [key: string]: TodoItem };
+  readonly isFailed: boolean;
+  readonly error: string;
+}
+
+function SubAgentThreadContent({
+  threadItems,
+  todos,
+  isFailed,
+  error,
+}: SubAgentThreadContentProps) {
+  const hasTodos = todos != null && Object.keys(todos).length > 0;
+
+  return (
+    <>
+      {hasTodos && <TodoList todos={todos!} className="pb-1" />}
+
       {threadItems.length > 0 && (
         <div className="flex flex-col gap-1 pb-1">
           {threadItems.map((item) => {
@@ -93,13 +334,12 @@ export function SubAgentSection({
         </div>
       )}
 
-      {/* Error footer */}
-      {isFailed && sub.error && (
+      {isFailed && error && (
         <div className="rounded-md border border-destructive/20 bg-destructive/5 px-2 py-1.5 text-xs text-destructive">
-          {sub.error}
+          {error}
         </div>
       )}
-    </div>
+    </>
   );
 }
 
@@ -142,6 +382,7 @@ function buildSubAgentThreadItems(
 interface SubAgentStatusInfo {
   label: string;
   colorClass: string;
+  badgeClass: string;
   icon: () => React.JSX.Element;
 }
 
@@ -149,31 +390,37 @@ const SUB_AGENT_STATUS_MAP: Record<SubAgentStatus, SubAgentStatusInfo> = {
   [SubAgentStatus.SUB_AGENT_STATUS_UNSPECIFIED]: {
     label: "Unknown",
     colorClass: "text-muted-foreground",
+    badgeClass: "bg-muted text-muted-foreground",
     icon: DotIcon,
   },
   [SubAgentStatus.SUB_AGENT_PENDING]: {
     label: "Pending",
     colorClass: "text-muted-foreground",
+    badgeClass: "bg-muted text-muted-foreground",
     icon: DotIcon,
   },
   [SubAgentStatus.SUB_AGENT_IN_PROGRESS]: {
     label: "Running",
     colorClass: "text-foreground",
+    badgeClass: "bg-muted text-foreground",
     icon: SpinnerIcon,
   },
   [SubAgentStatus.SUB_AGENT_COMPLETED]: {
     label: "Completed",
     colorClass: "text-success",
+    badgeClass: "bg-success/15 text-success",
     icon: CheckCircleIcon,
   },
   [SubAgentStatus.SUB_AGENT_FAILED]: {
     label: "Failed",
     colorClass: "text-destructive",
+    badgeClass: "bg-destructive/15 text-destructive",
     icon: XCircleIcon,
   },
   [SubAgentStatus.SUB_AGENT_CANCELLED]: {
     label: "Cancelled",
     colorClass: "text-muted-foreground",
+    badgeClass: "bg-muted text-muted-foreground",
     icon: XCircleIcon,
   },
 };
@@ -185,8 +432,8 @@ const SUB_AGENT_STATUS_MAP: Record<SubAgentStatus, SubAgentStatusInfo> = {
 function SpinnerIcon() {
   return (
     <svg
-      width="10"
-      height="10"
+      width="12"
+      height="12"
       viewBox="0 0 12 12"
       fill="none"
       stroke="currentColor"
@@ -201,8 +448,8 @@ function SpinnerIcon() {
 function CheckCircleIcon() {
   return (
     <svg
-      width="10"
-      height="10"
+      width="12"
+      height="12"
       viewBox="0 0 12 12"
       fill="none"
       stroke="currentColor"
@@ -219,8 +466,8 @@ function CheckCircleIcon() {
 function XCircleIcon() {
   return (
     <svg
-      width="10"
-      height="10"
+      width="12"
+      height="12"
       viewBox="0 0 12 12"
       fill="none"
       stroke="currentColor"
@@ -241,3 +488,63 @@ function DotIcon() {
     </svg>
   );
 }
+
+function TodoCompletedSmallIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M2.5 6L5 8.5L9.5 3.5" />
+    </svg>
+  );
+}
+
+function BotIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect x="2" y="6" width="12" height="8" rx="2" />
+      <path d="M5.5 10H5.51M10.5 10H10.51" strokeWidth="2" />
+      <path d="M8 2V6" />
+      <circle cx="8" cy="1.5" r="1" />
+      <path d="M0.5 9.5H2M14 9.5H15.5" />
+    </svg>
+  );
+}
+
+function ChevronIcon({ expanded }: { expanded: boolean }) {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn(
+        "shrink-0 text-muted-foreground transition-transform duration-150",
+        expanded && "rotate-90",
+      )}
+      aria-hidden="true"
+    >
+      <path d="M4.5 2.5L7.5 6L4.5 9.5" />
+    </svg>
+  );
+}

package/src/execution/TodoList.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import { useMemo } from "react";
+import type { TodoItem } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/todo_pb";
+import { TodoStatus } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { cn } from "@stigmer/theme";
+
+export interface TodoListProps {
+  /**
+   * Todo items keyed by ID. Accepts the proto map shape directly
+   * (`execution.status.todos` or `subAgentExecution.todos`).
+   */
+  readonly todos: { readonly [key: string]: TodoItem };
+  readonly className?: string;
+}
+
+const STATUS_SORT_ORDER: ReadonlyMap<TodoStatus, number> = new Map([
+  [TodoStatus.TODO_IN_PROGRESS, 0],
+  [TodoStatus.TODO_PENDING, 1],
+  [TodoStatus.TODO_COMPLETED, 2],
+  [TodoStatus.TODO_CANCELLED, 3],
+]);
+
+function todoSortKey(item: TodoItem): number {
+  return STATUS_SORT_ORDER.get(item.status) ?? 4;
+}
+
+/**
+ * Renders a sorted checklist of {@link TodoItem} entries.
+ *
+ * Shared by {@link ExecutionProgress} (main agent sidebar widget)
+ * and {@link SubAgentSection} (sub-agent expanded content).
+ *
+ * Items are sorted by activity: in-progress first, then pending,
+ * completed, and cancelled. Each row shows a status icon and the
+ * task description.
+ *
+ * All visual properties flow through `--stgm-*` tokens.
+ */
+export function TodoList({ todos, className }: TodoListProps) {
+  const sortedTodos = useMemo(() => {
+    const items = Object.values(todos);
+    if (items.length === 0) return [];
+    return items.slice().sort((a, b) => todoSortKey(a) - todoSortKey(b));
+  }, [todos]);
+
+  if (sortedTodos.length === 0) return null;
+
+  return (
+    <ul
+      role="list"
+      className={cn("flex flex-col gap-1", className)}
+      aria-label="Tasks"
+    >
+      {sortedTodos.map((item) => (
+        <TodoRow key={item.id} item={item} />
+      ))}
+    </ul>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Exported for reuse in collapsed sub-agent preview
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns the first in-progress todo from a todos map, or `null`.
+ * Used by {@link SubAgentSection} to show an active task preview
+ * in the collapsed summary row.
+ */
+export function findActiveTodo(
+  todos: { readonly [key: string]: TodoItem } | undefined,
+): TodoItem | null {
+  if (!todos) return null;
+  for (const item of Object.values(todos)) {
+    if (item.status === TodoStatus.TODO_IN_PROGRESS) return item;
+  }
+  return null;
+}
+
+/**
+ * Builds a compact completion summary string (e.g. "3/5 completed").
+ * Returns `null` when there are no todos.
+ */
+export function todoCompletionSummary(
+  todos: { readonly [key: string]: TodoItem } | undefined,
+): string | null {
+  if (!todos) return null;
+  const items = Object.values(todos);
+  if (items.length === 0) return null;
+  const completed = items.filter(
+    (t) => t.status === TodoStatus.TODO_COMPLETED,
+  ).length;
+  return `${completed}/${items.length} completed`;
+}
+
+// ---------------------------------------------------------------------------
+// TodoRow — single todo item with status icon
+// ---------------------------------------------------------------------------
+
+function TodoRow({ item }: { readonly item: TodoItem }) {
+  const Icon = TODO_ICONS[item.status] ?? TodoPendingIcon;
+  const colorClass = TODO_COLORS[item.status] ?? "text-muted-foreground";
+  const cancelled = item.status === TodoStatus.TODO_CANCELLED;
+
+  return (
+    <li className="flex items-start gap-1.5 text-xs">
+      <span className={cn("mt-0.5 shrink-0", colorClass)} aria-hidden="true">
+        <Icon />
+      </span>
+      <span
+        className={cn(
+          "min-w-0 break-words",
+          cancelled ? "text-muted-foreground line-through" : "text-foreground",
+        )}
+      >
+        {item.content}
+      </span>
+    </li>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Status icon / color mapping
+// ---------------------------------------------------------------------------
+
+const TODO_ICONS: Partial<Record<TodoStatus, () => React.JSX.Element>> = {
+  [TodoStatus.TODO_PENDING]: TodoPendingIcon,
+  [TodoStatus.TODO_IN_PROGRESS]: TodoInProgressIcon,
+  [TodoStatus.TODO_COMPLETED]: TodoCompletedIcon,
+  [TodoStatus.TODO_CANCELLED]: TodoCancelledIcon,
+};
+
+const TODO_COLORS: Partial<Record<TodoStatus, string>> = {
+  [TodoStatus.TODO_PENDING]: "text-muted-foreground",
+  [TodoStatus.TODO_IN_PROGRESS]: "text-foreground",
+  [TodoStatus.TODO_COMPLETED]: "text-success",
+  [TodoStatus.TODO_CANCELLED]: "text-muted-foreground",
+};
+
+// ---------------------------------------------------------------------------
+// Inline SVG icons — no external icon dependency in SDK
+// ---------------------------------------------------------------------------
+
+function TodoPendingIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    >
+      <circle cx="6" cy="6" r="4.5" />
+    </svg>
+  );
+}
+
+/** Exported for reuse in SubAgentSection collapsed preview. */
+export function TodoInProgressIcon() {
+  return (
+    <span className="relative flex h-3 w-3 items-center justify-center">
+      <span className="absolute inline-flex h-2 w-2 animate-ping rounded-full bg-current opacity-75" />
+      <span className="relative inline-flex h-2 w-2 rounded-full bg-current" />
+    </span>
+  );
+}
+
+function TodoCompletedIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M2.5 6L5 8.5L9.5 3.5" />
+    </svg>
+  );
+}
+
+function TodoCancelledIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M3 3L9 9M9 3L3 9" />
+    </svg>
+  );
+}

package/src/execution/ToolCallItem.tsx

@@ -187,7 +187,7 @@ export function ToolCallItem({
       {expanded && (
         <div className="px-2.5 pb-2.5 pt-1">
           {isSubAgent ? (
-            <SubAgentSection subAgentExecution={subAgentExecution} />
+            <SubAgentSection subAgentExecution={subAgentExecution} collapsible={false} />
           ) : (
             <ToolCallDetail toolCall={toolCall} />
           )}