ai-design-system 0.1.45 → 0.1.47

package/components/ai-elements/code-block.tsx

@@ -110,12 +110,12 @@ export const CodeBlock = ({
       >
         <div className="relative">
           <div
-            className="overflow-hidden dark:hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+            className="overflow-x-auto overflow-y-hidden dark:hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
             // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
             dangerouslySetInnerHTML={{ __html: html }}
           />
           <div
-            className="hidden overflow-hidden dark:block [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+            className="hidden overflow-x-auto overflow-y-hidden dark:block [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
             // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
             dangerouslySetInnerHTML={{ __html: darkHtml }}
           />

package/components/ai-elements/conversation.tsx

@@ -11,7 +11,7 @@ export type ConversationProps = ComponentProps<typeof StickToBottom>;
 
 export const Conversation = ({ className, ...props }: ConversationProps) => (
   <StickToBottom
-    className={cn("relative flex-1 overflow-y-auto", className)}
+    className={cn("relative flex-1 overflow-hidden", className)}
     initial="smooth"
     resize="smooth"
     role="log"

package/components/ai-elements/message.tsx

@@ -16,7 +16,7 @@ export const Message = ({ className, from, ...props }: MessageProps) => (
   <div
     className={cn(
       "group flex w-full items-start gap-2 py-2",
-      from === "user" ? "is-user flex-row-reverse" : "is-assistant bg-muted/50 -mx-4 px-4",
+      from === "user" ? "is-user flex-row-reverse" : "is-assistant",
       className
     )}
     {...props}
@@ -24,7 +24,7 @@ export const Message = ({ className, from, ...props }: MessageProps) => (
 );
 
 const messageContentVariants = cva(
-  "is-user:dark flex flex-col gap-2 overflow-hidden rounded-lg text-sm group-[.is-user]:ml-auto",
+  "is-user:dark flex flex-col gap-2 overflow-hidden rounded-lg text-sm group-[.is-user]:ml-auto min-w-0",
   {
     variants: {
       variant: {
@@ -78,3 +78,11 @@ export const MessageAvatar = ({
     <AvatarFallback>{name?.slice(0, 2) || "ME"}</AvatarFallback>
   </Avatar>
 );
+
+export const MessageTypingIndicator = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex items-center space-x-1 py-1.5 px-1 h-[24px]", className)} {...props}>
+    <div className="w-1.5 h-1.5 bg-current rounded-full animate-bounce [animation-delay:-0.3s]"></div>
+    <div className="w-1.5 h-1.5 bg-current rounded-full animate-bounce [animation-delay:-0.15s]"></div>
+    <div className="w-1.5 h-1.5 bg-current rounded-full animate-bounce"></div>
+  </div>
+);

package/components/blocks/AIConversation/AIConversation.tsx

@@ -11,6 +11,7 @@ import { UserMessage } from "@/components/composites/UserMessage"
 import { SpecialistMessage } from "@/components/composites/SpecialistMessage"
 import { OrchestratorMessage } from "@/components/composites/OrchestratorMessage"
 import { ToolCallDisplay } from "@/components/composites/ToolCallDisplay"
+import { ApprovalCard } from "@/components/composites/ApprovalCard"
 
 /**
  * AIConversation Section
@@ -31,6 +32,7 @@ interface AIMessage {
   avatarName?: string;
   toolCalls?: ToolCall[];
   subAgents?: SubAgent[];
+  isLoading?: boolean;
 }
 
 export interface AIConversationProps
@@ -90,9 +92,14 @@ export const AIConversation = React.memo<AIConversationProps>(
       [emptyState?.description]
     )
 
+    const toMessageString = (content: unknown): string =>
+      typeof content === 'string' ? content : ''
+
     const renderedMessages = React.useMemo(
       () =>
         messages.map((message) => {
+          const contentStr = toMessageString(message.content)
+
           // Render based on role field
           if (message.role === "user") {
             return (
@@ -100,7 +107,7 @@ export const AIConversation = React.memo<AIConversationProps>(
                 key={message.id}
                 message={{
                   id: message.id,
-                  content: message.content,
+                  content: contentStr,
                   avatarSrc: message.avatarSrc,
                   avatarName: message.avatarName,
                 }}
@@ -114,19 +121,26 @@ export const AIConversation = React.memo<AIConversationProps>(
             const subAgents = message.subAgents || []
 
             // Filter tool calls that aren't "task" type (those become sub-agents)
+            // Also completely hide "ask_user" and "ask_question" tools so they are ONLY rendered in the prompt input area
             const directToolCalls =
               message.toolCalls?.filter(
-                (tc) => tc.name !== "task"
+                (tc) => tc.name !== "task" && tc.name !== "ask_user"
               ) || []
 
+            const hasContent = contentStr.trim() !== ""
+            if (!hasContent && directToolCalls.length === 0 && subAgents.length === 0 && !message.isLoading) {
+              return null;
+            }
+
             return (
               <OrchestratorMessage
                 key={message.id}
                 message={{
                   id: message.id,
-                  content: message.content,
+                  content: contentStr,
                   avatarSrc: message.avatarSrc,
                   avatarName: message.avatarName,
+                  isLoading: message.isLoading,
                 }}
                 showAvatar={showAvatars}
               >
@@ -143,7 +157,7 @@ export const AIConversation = React.memo<AIConversationProps>(
                       id: subAgent.id,
                       name: subAgent.subAgentName,
                       description: undefined,
-                      content: `**Task:** ${typeof subAgent.input === 'string' ? subAgent.input : JSON.stringify(subAgent.input)}${subAgent.output ? `\n\n**Output:** ${typeof subAgent.output === 'string' ? subAgent.output : JSON.stringify(subAgent.output)}` : ''}`,
+                      content: typeof subAgent.output === 'string' ? subAgent.output : (subAgent.output ? JSON.stringify(subAgent.output) : ''),
                       status: subAgent.status,
                       toolCalls: [],
                     }}
@@ -161,7 +175,7 @@ export const AIConversation = React.memo<AIConversationProps>(
               message={{
                 id: message.id,
                 name: message.avatarName || "Agent",
-                content: message.content,
+                content: contentStr,
                 toolCalls: message.toolCalls?.filter((tc) => tc.name !== "task"),
                 status: "completed",
               }}

package/components/blocks/InboxPanel/InboxPanel.tsx

@@ -13,6 +13,8 @@ export interface InboxPanelProps {
   isLoading?: boolean
   emptyMessage?: string
   className?: string
+  title?: string
+  headerAction?: React.ReactNode
 }
 
 export const InboxPanel = React.memo<InboxPanelProps>(
@@ -26,10 +28,19 @@ export const InboxPanel = React.memo<InboxPanelProps>(
     isLoading = false,
     emptyMessage,
     className,
+    title,
+    headerAction,
   }) => {
     return (
       <section className={`flex min-h-0 flex-1 flex-col overflow-hidden ${className ?? ""}`}>
-        <div className="p-4">
+        {title || headerAction ? (
+          <div className="flex items-center justify-between px-4 pt-4 pb-2">
+            {title ? <h2 className="text-sm font-semibold text-muted-foreground">{title}</h2> : <div />}
+            {headerAction ? <div>{headerAction}</div> : null}
+          </div>
+        ) : null}
+
+        <div className="px-4 pb-2">
           <Input
             aria-label="Search inbox items"
             className="h-8"

package/components/blocks/PromptInput/PromptInput.tsx

@@ -29,6 +29,7 @@ export interface PromptInputBlockProps
     event: FormEvent<HTMLFormElement>
   ) => void | Promise<void>;
   dialog?: ReactNode;
+  loading?: boolean;
 }
 
 export const PromptInput = React.memo<PromptInputBlockProps>(
@@ -39,6 +40,7 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
     onChange,
     onSubmit,
     dialog,
+    loading = false,
     ...props
   }) => {
     const handleSubmit = React.useCallback(
@@ -80,7 +82,7 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
           <PromptInputTools>
             {}
           </PromptInputTools>
-          <PromptInputSubmit disabled={disabled} />
+          <PromptInputSubmit disabled={disabled} status={loading ? "submitted" : undefined} />
         </PromptInputFooter>
       </AIPromptInput>
     );

package/components/blocks/SectionLayout/SectionLayout.tsx

@@ -32,7 +32,7 @@ export const SectionLayout = React.memo<SectionLayoutProps>(
           {section.header && (
             <AppHeader {...section.header} />
           )}
-          <div className="min-h-0 flex-1 overflow-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
+          <div className="min-h-0 flex-1 overflow-hidden flex flex-col">
             {section.content}
           </div>
         </div>

package/components/composites/ApprovalCard/ApprovalCard.tsx

@@ -98,6 +98,10 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
     const [rejectReason, setRejectReason] = useState("");
     const [showRejectInput, setShowRejectInput] = useState(false);
 
+    const hideSkipButton = (actionRequest.args?.hide_skip_button as boolean) ?? false;
+    const submitButtonText = (actionRequest.args?.button_submit_text as string) || 'Continue';
+    const skipButtonText = (actionRequest.args?.button_skip_text as string) || 'Skip';
+
     // Question states
     const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
     const [selectedAnswers, setSelectedAnswers] = useState<Record<number, string | string[]>>({});
@@ -117,13 +121,15 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
     const isQuestionAction =
       actionRequest.name === "ask_question" ||
       (actionRequest.args &&
-        (typeof actionRequest.args.question === "string" ||
-          Array.isArray(actionRequest.args.questions)));
+        ((typeof actionRequest.args.question === "string") ||
+          (Array.isArray(actionRequest.args.questions) && actionRequest.args.questions.length > 0)));
 
     // Parse questions
     let questions: Question[] = [];
     if (actionRequest.args && Array.isArray(actionRequest.args.questions)) {
       questions = actionRequest.args.questions as Question[];
+    } else if (actionRequest.args && actionRequest.args.questions && typeof actionRequest.args.questions === "object") {
+      questions = Object.values(actionRequest.args.questions) as Question[];
     } else if (actionRequest.args && typeof actionRequest.args.question === "string") {
       questions = [
         {
@@ -144,19 +150,37 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
     // Render interactive question view
     if (isQuestionAction && currentQuestion) {
       const handleContinue = () => {
+        const qIdx = currentQuestionIndex;
+        const selIdx = selectedOptionIndices[qIdx];
+        const hasOtherSelected = selIdx === options.length;
+        const hasRegularSelection = selIdx !== null && selIdx !== undefined && !hasOtherSelected;
+        const hasMultiSelectItems = isMultiSelect && Array.isArray(selectedAnswers[qIdx]) && (selectedAnswers[qIdx] as string[]).length > 0;
+        
+        const isApprovalType = actionRequest.args?.type === 'approval';
+        const isOtherEmpty = hasOtherSelected && !otherTexts[qIdx]?.trim();
+        const hasNoValidSelection = (!hasRegularSelection && !hasMultiSelectItems && !hasOtherSelected) || isOtherEmpty;
+
+        let answer: string | string[] = "Approved";
+
+        if (hasOtherSelected) {
+          answer = otherTexts[qIdx] || "Approved";
+        } else if (isMultiSelect) {
+          answer = (selectedAnswers[qIdx] as string[]).join(", ") || "Approved";
+        } else if (hasRegularSelection) {
+          answer = selectedAnswers[qIdx] as string || "Approved";
+        }
+
+        if (!isApprovalType && hasNoValidSelection) return;
+
         if (currentQuestionIndex === questions.length - 1) {
           const finalAnswers = questions.map((q, idx) => {
-            if (selectedOptionIndices[idx] === q.options?.length) {
-              return otherTexts[idx] || "";
-            }
+            if (idx === qIdx) return answer;
             return selectedAnswers[idx] || "";
           });
-
-          if (onEdit) {
-            onEdit({ ...actionRequest.args, answers: finalAnswers });
-          }
-          onApprove();
+          if (onEdit) onEdit({ ...actionRequest.args, answers: finalAnswers });
+          else onApprove();
         } else {
+          setSelectedAnswers((prev) => ({ ...prev, [qIdx]: answer }));
           setCurrentQuestionIndex((prev) => prev + 1);
         }
       };
@@ -297,17 +321,19 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
           </div>
 
           <ConfirmationActions>
-            <ConfirmationAction
-              variant="outline"
-              type="button"
-              onClick={() => {
-                if (onReject) {
-                  onReject("Skipped question");
-                }
-              }}
-            >
-              Skip
-            </ConfirmationAction>
+            {!hideSkipButton && (
+              <ConfirmationAction
+                variant="outline"
+                type="button"
+                onClick={() => {
+                  if (onReject) {
+                    onReject("Skipped question");
+                  }
+                }}
+              >
+                {skipButtonText}
+              </ConfirmationAction>
+            )}
 
             <ConfirmationAction
               type="button"
@@ -318,7 +344,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
               {currentQuestionIndex === questions.length - 1 ? (
                 <>
                   <Check className="h-4 w-4 mr-2" />
-                  Continue
+                  {submitButtonText}
                 </>
               ) : (
                 <>
@@ -423,24 +449,26 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
               )}
 
               <div className="mt-3 space-y-3">
-                {Object.entries(actionRequest.args).map(([key, value]) => {
-                  const strValue = formatValue(value);
-                  const isMultiline = strValue.includes("\n");
-                  return (
-                    <div key={key} className="space-y-1">
-                      <div className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
-                        {key}
+                {Object.entries(actionRequest.args)
+                  .filter(([_, value]) => typeof value === "string" || typeof value === "number" || typeof value === "boolean")
+                  .map(([key, value]) => {
+                    const strValue = formatValue(value);
+                    const isMultiline = strValue.includes("\n");
+                    return (
+                      <div key={key} className="space-y-1">
+                        <div className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
+                          {key}
+                        </div>
+                        {isMultiline ? (
+                          <pre className="text-xs text-card-foreground whitespace-pre-wrap break-all font-mono bg-muted/50 rounded-md px-2.5 py-1.5 border border-border">
+                            {strValue}
+                          </pre>
+                        ) : (
+                          <div className="text-sm text-card-foreground break-all">{strValue}</div>
+                        )}
                       </div>
-                      {isMultiline ? (
-                        <pre className="text-xs text-card-foreground whitespace-pre-wrap break-all font-mono bg-muted/50 rounded-md px-2.5 py-1.5 border border-border">
-                          {strValue}
-                        </pre>
-                      ) : (
-                        <div className="text-sm text-card-foreground break-all">{strValue}</div>
-                      )}
-                    </div>
-                  );
-                })}
+                    );
+                  })}
               </div>
             </div>
 
@@ -489,7 +517,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                 </>
               ) : (
                 <>
-                  {canReject && (
+                  {canReject && !hideSkipButton && (
                     <ConfirmationAction
                       type="button"
                       variant="outline"
@@ -497,7 +525,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                       disabled={isProcessing}
                     >
                       <X className="h-4 w-4 mr-2" />
-                      Reject
+                      {skipButtonText}
                     </ConfirmationAction>
                   )}
                   {canEdit && (
@@ -518,7 +546,7 @@ export const ApprovalCard = React.memo<ApprovalCardProps>(
                     disabled={isProcessing}
                   >
                     <Check className="h-4 w-4 mr-2" />
-                    Approve
+                    {submitButtonText}
                   </ConfirmationAction>
                 </>
               )}

package/components/composites/OrchestratorMessage/OrchestratorMessage.tsx

@@ -3,7 +3,9 @@ import {
   Message,
   MessageContent,
   MessageAvatar,
+  MessageTypingIndicator,
 } from "@/components/ai-elements/message"
+import { Response } from "@/components/ai-elements/response"
 
 /**
  * OrchestratorMessage Block
@@ -17,6 +19,7 @@ export interface OrchestratorMessageData {
   content: string
   avatarSrc?: string
   avatarName?: string
+  isLoading?: boolean
 }
 
 export interface OrchestratorMessageProps {
@@ -53,11 +56,15 @@ export const OrchestratorMessage = React.memo<OrchestratorMessageProps>(
           />
         )}
 
-        <div className="flex-1">
+        <div className="flex-1 min-w-0">
           {/* Orchestrator's message content */}
-          {hasContent && (
+          {message.isLoading ? (
+            <MessageContent variant="contained" className="w-fit pr-6">
+              <MessageTypingIndicator />
+            </MessageContent>
+          ) : hasContent && (
             <MessageContent variant="contained">
-              {message.content}
+              <Response mode={message.isLoading ? "streaming" : "static"} isAnimating={!!message.isLoading}>{message.content}</Response>
             </MessageContent>
           )}
 

package/components/composites/SpecialistMessage/SpecialistMessage.tsx

@@ -9,6 +9,7 @@ import {
 } from "@/components/ai-elements/plan"
 import { ToolCallDisplay, type ToolCall } from "@/components/composites/ToolCallDisplay"
 import { cn } from "@/lib/utils"
+import { Response } from "@/components/ai-elements/response"
 
 /**
  * SpecialistMessage Block
@@ -64,10 +65,17 @@ export const SpecialistMessage = React.memo<SpecialistMessageProps>(
       [message.toolCalls]
     )
 
+    const description = React.useMemo(() => {
+      if (message.description) return message.description;
+      if (message.status === "active") return "Thinking...";
+      return undefined;
+    }, [message.description, message.status]);
+
     return (
       <Plan
         defaultOpen={collapsible ? defaultOpen : true}
         className={cn(isNested && "ml-8")}
+        isStreaming={message.status === "active"}
       >
         <PlanHeader>
           <div>
@@ -75,8 +83,8 @@ export const SpecialistMessage = React.memo<SpecialistMessageProps>(
               {message.icon && message.icon}
               <PlanTitle>{message.name}</PlanTitle>
             </div>
-            {message.description && (
-              <PlanDescription>{message.description}</PlanDescription>
+            {description && (
+              <PlanDescription>{description}</PlanDescription>
             )}
           </div>
           {collapsible && <PlanTrigger />}
@@ -85,9 +93,13 @@ export const SpecialistMessage = React.memo<SpecialistMessageProps>(
         <PlanContent>
           {/* Message content */}
           {hasContent && (
-            <div className="prose prose-sm dark:prose-invert max-w-none">
+            <Response
+              className="size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
+              mode={message.status === "active" ? "streaming" : "static"}
+              isAnimating={message.status === "active"}
+            >
               {message.content}
-            </div>
+            </Response>
           )}
 
           {/* Tool calls */}

package/components/features/AIDocEditor/AIDocEditor.tsx

@@ -38,6 +38,7 @@ import { DocumentTabBar } from '@/components/composites/DocumentTabBar'
 import { cn } from '@/lib/utils'
 import type { JSONContent } from '@tiptap/core'
 import type { Annotation, User } from '@/types/ai-editor/annotations'
+import { Streamdown } from 'streamdown'
 
 interface DocumentWithAnnotations {
   file: { id: string; name: string; isDirty?: boolean; format?: 'json' | 'markdown' | string; lastModified?: number }
@@ -145,6 +146,7 @@ function isMultiTabMode(props: AIDocEditorProps): props is AIDocEditorMultiTabPr
  * - Support for comments, suggestions, and block additions
  * - Controlled component pattern (all state managed by parent)
  * - Backward-compatible with single-document consumers
+ * - Markdown content rendered via Streamdown for proper formatting
  * 
  * Note: The refinement panel (right sidebar with Accept All/Reject All) is a
  * separate component in the parent application, not part of this feature.
@@ -156,7 +158,7 @@ export const AIDocEditor = React.memo<AIDocEditorProps>(
       mode,
       onAnnotationAdd,
       onAnnotationUpdate,
-      onAnnotationDelete: _onAnnotationDelete, // Callback for consumers; passed through on demand
+      onAnnotationDelete: _onAnnotationDelete,
       className,
     } = props
 
@@ -199,6 +201,16 @@ export const AIDocEditor = React.memo<AIDocEditorProps>(
      * Single-document mode
      */
     if (!isMultiTab) {
+      const isMarkdown = props.format === 'markdown'
+      if (isMarkdown) {
+        return (
+          <div className={cn('ai-doc-editor p-6', className)}>
+            <Streamdown mode="streaming">
+              {props.content as string}
+            </Streamdown>
+          </div>
+        )
+      }
       return (
         <DocumentEditorWithComments
           content={props.content}
@@ -234,6 +246,8 @@ export const AIDocEditor = React.memo<AIDocEditorProps>(
       )
     }
 
+    const isMarkdown = currentDocument.file.format === 'markdown'
+
     return (
       <div className={cn('ai-doc-editor flex flex-col h-full', className)}>
         <DocumentTabBar
@@ -243,17 +257,29 @@ export const AIDocEditor = React.memo<AIDocEditorProps>(
           onTabClose={props.onTabClose}
         />
         <div className="flex-1 overflow-auto">
-          <DocumentEditorWithComments
-            content={currentDocument.content}
-            format={currentDocument.file.format as 'json' | 'markdown' | undefined}
-            annotations={currentDocument.annotations}
-            currentUserId={currentUser.id}
-            currentUserName={currentUser.name}
-            readOnly={mode === 'readonly'}
-            onAnnotationAdd={handleAnnotationAdd}
-            onAnnotationUpdate={handleAnnotationUpdate}
-            className="p-6"
-          />
+          {isMarkdown ? (
+            <div className="p-6">
+              <Streamdown
+                mode="streaming"
+                isAnimating
+                className="[&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
+              >
+                {currentDocument.content as string}
+              </Streamdown>
+            </div>
+          ) : (
+            <DocumentEditorWithComments
+              content={currentDocument.content}
+              format={currentDocument.file.format as 'json' | 'markdown' | undefined}
+              annotations={currentDocument.annotations}
+              currentUserId={currentUser.id}
+              currentUserName={currentUser.name}
+              readOnly={mode === 'readonly'}
+              onAnnotationAdd={handleAnnotationAdd}
+              onAnnotationUpdate={handleAnnotationUpdate}
+              className="p-6"
+            />
+          )}
         </div>
       </div>
     )

package/components/features/RefinementPanel/RefinementPanel.mocks.ts

@@ -105,6 +105,62 @@ export const reviewStateMessages: RefinementMessage[] = [
       },
     ],
   },
+  {
+    id: '3',
+    type: 'human',
+    role: 'user',
+    content: 'Can we also make sure the colors meet the contrast requirements for dark mode?',
+    avatarSrc:
+      'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=32&h=32&fit=crop&crop=face',
+    avatarName: 'User',
+  },
+  {
+    id: '4',
+    type: 'ai',
+    role: 'orchestrator',
+    content: 'Absolutely. I will have the accessibility specialist double-check the color contrast ratios in both light and dark mode.',
+    avatarSrc:
+      'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face',
+    avatarName: 'Coordinator',
+    subAgents: [
+      {
+        id: 'agent_3',
+        name: 'accessibility-specialist',
+        subAgentName: 'a11y-agent',
+        input: 'Verify color contrast ratios for the new Button styles in both light and dark mode themes according to WCAG 2.1 AA.',
+        output: 'Contrast ratios checked: Primary button passes at 4.5:1 on light mode, but fails on dark mode (3.2:1). Adjusting the primary-dark token to #66b2ff to meet the 4.5:1 requirement.',
+        status: 'completed',
+      }
+    ]
+  },
+  {
+    id: '5',
+    type: 'human',
+    role: 'user',
+    content: 'Perfect! How about the hover state? Does it also pass?',
+    avatarSrc:
+      'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=32&h=32&fit=crop&crop=face',
+    avatarName: 'User',
+  },
+  {
+    id: '6',
+    type: 'ai',
+    role: 'orchestrator',
+    content: 'Good catch. Let me check the hover and active states for both themes.',
+    avatarSrc:
+      'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face',
+    avatarName: 'Coordinator',
+    subAgents: [
+      {
+        id: 'agent_4',
+        name: 'accessibility-specialist',
+        subAgentName: 'a11y-agent',
+        input: 'Verify color contrast for hover and active states.',
+        output: 'Hover states pass contrast checks. The active state requires a slight tweak for the outline variant. Applied fixes.',
+        status: 'completed',
+      }
+    ]
+  },
 ]
 
 /**
@@ -114,7 +170,7 @@ export const reviewStateMessages: RefinementMessage[] = [
  * Sample single-question approval request (HITL interactive question)
  */
 export const approvalQuestionRequest: ActionRequest = {
-  name: "ask_question",
+  name: "ask_user",
   description: "The agent needs your input to determine the workflow order",
   args: {
     question: "Where in the workflow timeline should the SEO review step run?",
@@ -130,7 +186,7 @@ export const approvalQuestionRequest: ActionRequest = {
  * Sample multi-question approval request (HITL poll with multiple questions)
  */
 export const approvalMultiQuestionRequest: ActionRequest = {
-  name: "ask_question",
+  name: "ask_user",
   description: "The agent needs your preferences to proceed",
   args: {
     questions: [