From d0539fcd655ef2caa8b4d263ae752196116ee531 Mon Sep 17 00:00:00 2001
From: Philip Levy <pglevy@users.noreply.github.com>
Date: Thu, 16 Jul 2026 14:48:44 -0400
Subject: [PATCH 1/4] Add task progress component

---
 src/components/Chat/TaskProgress.stories.tsx |  77 ++++++++++
 src/components/Chat/TaskProgress.tsx         | 139 +++++++++++++++++++
 src/components/Chat/index.ts                 |   3 +
 3 files changed, 219 insertions(+)
 create mode 100644 src/components/Chat/TaskProgress.stories.tsx
 create mode 100644 src/components/Chat/TaskProgress.tsx

diff --git a/src/components/Chat/TaskProgress.stories.tsx b/src/components/Chat/TaskProgress.stories.tsx
new file mode 100644
index 0000000..9644f2f
--- /dev/null
+++ b/src/components/Chat/TaskProgress.stories.tsx
@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { TaskProgress } from './TaskProgress'
+import type { Task } from './TaskProgress'
+
+const meta = {
+  title: 'Components/Chat/TaskProgress',
+  component: TaskProgress,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof TaskProgress>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultTasks: Task[] = [
+  { id: '1', label: 'Create loan application record type', status: 'COMPLETED' },
+  { id: '2', label: 'Create document record type', status: 'COMPLETED' },
+  { id: '3', label: 'Create brand selection interface', status: 'ACTIVE' },
+  { id: '4', label: 'Build loan application form interface', status: 'TODO' },
+  { id: '5', label: 'Create document upload component', status: 'TODO' },
+]
+
+export const Default: Story = {
+  args: {
+    title: 'Task Progress',
+    tasks: defaultTasks,
+    defaultOpen: true,
+  },
+}
+
+export const Collapsed: Story = {
+  args: {
+    title: 'Task Progress',
+    tasks: defaultTasks,
+    defaultOpen: false,
+  },
+}
+
+export const AllCompleted: Story = {
+  args: {
+    title: 'Completed Tasks',
+    tasks: [
+      { id: '1', label: 'Setup project structure', status: 'COMPLETED' },
+      { id: '2', label: 'Install dependencies', status: 'COMPLETED' },
+      { id: '3', label: 'Create components', status: 'COMPLETED' },
+      { id: '4', label: 'Write documentation', status: 'COMPLETED' },
+    ],
+    defaultOpen: true,
+  },
+}
+
+export const MostlyTodo: Story = {
+  args: {
+    title: 'Upcoming Tasks',
+    tasks: [
+      { id: '1', label: 'Setup project', status: 'COMPLETED' },
+      { id: '2', label: 'Design components', status: 'ACTIVE' },
+      { id: '3', label: 'Implement authentication', status: 'TODO' },
+      { id: '4', label: 'Add database integration', status: 'TODO' },
+      { id: '5', label: 'Write tests', status: 'TODO' },
+      { id: '6', label: 'Deploy to production', status: 'TODO' },
+    ],
+    defaultOpen: true,
+  },
+}
+
+export const CustomTitle: Story = {
+  args: {
+    title: 'Sprint 3 Progress',
+    tasks: [
+      { id: '1', label: 'User authentication module', status: 'COMPLETED' },
+      { id: '2', label: 'Dashboard layout', status: 'COMPLETED' },
+      { id: '3', label: 'API integration', status: 'ACTIVE' },
+    ],
+    defaultOpen: true,
+  },
+}
diff --git a/src/components/Chat/TaskProgress.tsx b/src/components/Chat/TaskProgress.tsx
new file mode 100644
index 0000000..c6f4f0c
--- /dev/null
+++ b/src/components/Chat/TaskProgress.tsx
@@ -0,0 +1,139 @@
+import * as React from 'react'
+import { useState } from 'react'
+import { ChevronDown, Check, Circle } from 'lucide-react'
+import { mergeClasses } from '../../utils/classNames'
+
+type TaskStatus = "COMPLETED" | "ACTIVE" | "TODO"
+
+export interface Task {
+  /** Unique identifier for the task */
+  id: string
+  /** Task description */
+  label: string
+  /** Task status */
+  status: TaskStatus
+}
+
+export interface TaskProgressProps {
+  /** Section title displayed in the collapsible header */
+  title?: string
+  /** Array of tasks to display */
+  tasks: Task[]
+  /** Whether the task list starts expanded */
+  defaultOpen?: boolean
+  /** Additional Tailwind classes for prototype-specific styling (not part of SAIL API) */
+  className?: string
+}
+
+/**
+ * TaskProgress Component
+ * Displays a collapsible list of tasks with a progress bar summarizing completion.
+ * Used in chat interfaces to visualize multi-step task execution state.
+ */
+export const TaskProgress: React.FC<TaskProgressProps> = ({
+  title = "Task Progress",
+  tasks,
+  defaultOpen = true,
+  className,
+}) => {
+  const [open, setOpen] = useState(defaultOpen)
+
+  const completedCount = tasks.filter((t) => t.status === "COMPLETED").length
+  const totalCount = tasks.length
+  const progressValue = totalCount > 0 ? (completedCount / totalCount) * 100 : 0
+
+  const sailClasses = 'border border-gray-200 rounded-md overflow-hidden bg-white'
+
+  return (
+    <div className={mergeClasses(sailClasses, className)}>
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        aria-expanded={open}
+        className="w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors"
+      >
+        <ChevronDown
+          className={`size-4 text-gray-500 shrink-0 transition-transform ${open ? 'rotate-0' : '-rotate-90'}`}
+          aria-hidden="true"
+        />
+        <div className="flex items-center justify-between gap-4 flex-1 min-w-0">
+          <span className="font-semibold text-sm text-gray-900 shrink-0">{title}</span>
+          <div className="flex items-center gap-3 flex-1 min-w-0 max-w-[33%]">
+            <span className="text-sm text-gray-700 shrink-0" aria-hidden="true">
+              <span className="font-medium">{completedCount}</span> / {totalCount}
+            </span>
+            <div className="flex-1 min-w-0">
+              <progress
+                value={completedCount}
+                max={totalCount}
+                className="w-full h-2 rounded-full appearance-none [&::-webkit-progress-bar]:rounded-full [&::-webkit-progress-bar]:bg-gray-200 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:bg-blue-500 [&::-moz-progress-bar]:bg-blue-500"
+                aria-label={`Task progress: ${completedCount} of ${totalCount} completed`}
+              />
+            </div>
+          </div>
+        </div>
+      </button>
+
+      {open && (
+        <div className="border-t border-gray-200">
+          <ul role="list" aria-label={`${title} tasks`} className="py-1">
+            {tasks.map((task) => (
+              <TaskItem key={task.id} task={task} />
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface TaskItemProps {
+  task: Task
+}
+
+const TaskItem: React.FC<TaskItemProps> = ({ task }) => {
+  const statusIcon = () => {
+    if (task.status === "COMPLETED") {
+      return <Check className="size-4 text-gray-600" aria-hidden="true" />
+    }
+    return (
+      <Circle
+        className={`size-4 ${task.status === "ACTIVE" ? 'text-gray-900' : 'text-gray-400'}`}
+        aria-hidden="true"
+      />
+    )
+  }
+
+  const labelClasses = (() => {
+    switch (task.status) {
+      case "COMPLETED":
+        return 'text-sm line-through text-gray-600'
+      case "ACTIVE":
+        return 'text-sm font-medium text-gray-900'
+      case "TODO":
+        return 'text-sm text-gray-600'
+    }
+  })()
+
+  return (
+    <li role="listitem" className="flex items-center gap-3 px-4 py-1.5">
+      <span className="shrink-0 flex items-center justify-center size-4">
+        {statusIcon()}
+        <span className="sr-only">{statusLabel(task.status)}</span>
+      </span>
+      <span className={labelClasses}>{task.label}</span>
+    </li>
+  )
+}
+
+/**
+ * Returns a human-readable status label for screen readers.
+ */
+function statusLabel(status: TaskStatus): string {
+  const labels: Record<TaskStatus, string> = {
+    COMPLETED: 'Completed',
+    ACTIVE: 'In progress',
+    TODO: 'To do',
+  }
+  return labels[status]
+}
diff --git a/src/components/Chat/index.ts b/src/components/Chat/index.ts
index 647dfff..0d88c92 100644
--- a/src/components/Chat/index.ts
+++ b/src/components/Chat/index.ts
@@ -21,3 +21,6 @@ export type { ChatAssistantMessageProps } from './ChatAssistantMessage'
 
 export { AgentSteps } from './AgentSteps'
 export type { AgentStepsProps, AgentStep, AgentStepAction } from './AgentSteps'
+
+export { TaskProgress } from './TaskProgress'
+export type { TaskProgressProps, Task } from './TaskProgress'

From 413149a90013a118fb043b83fc01deb38276f272 Mon Sep 17 00:00:00 2001
From: Philip Levy <pglevy@users.noreply.github.com>
Date: Thu, 16 Jul 2026 14:57:16 -0400
Subject: [PATCH 2/4] Add task plan component

---
 src/components/Chat/TaskPlan.stories.tsx | 122 ++++++++++++
 src/components/Chat/TaskPlan.tsx         | 243 +++++++++++++++++++++++
 src/components/Chat/index.ts             |   3 +
 3 files changed, 368 insertions(+)
 create mode 100644 src/components/Chat/TaskPlan.stories.tsx
 create mode 100644 src/components/Chat/TaskPlan.tsx

diff --git a/src/components/Chat/TaskPlan.stories.tsx b/src/components/Chat/TaskPlan.stories.tsx
new file mode 100644
index 0000000..a84f71f
--- /dev/null
+++ b/src/components/Chat/TaskPlan.stories.tsx
@@ -0,0 +1,122 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { TaskPlan } from './TaskPlan'
+import type { TaskPlanItem } from './TaskPlan'
+import { ButtonWidget } from '../Button/ButtonWidget'
+
+const meta = {
+  title: 'Components/Chat/TaskPlan',
+  component: TaskPlan,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof TaskPlan>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sampleTasks: TaskPlanItem[] = [
+  {
+    id: '1',
+    taskName: 'Create Group for Independence Team',
+    objectType: 'group',
+    objectName: 'RSM Independence Team',
+    notes:
+      'Create a group to represent Independence Team members. Use this group for assigning read-only access and role-based visibility. Add the group as a member of the application\'s viewers group.',
+  },
+  {
+    id: '2',
+    taskName: 'Update Submissions record type with user filters and search',
+    objectType: 'recordType',
+    objectName: 'RSM Board Committee Submission',
+    notes:
+      'Update the submission record type to support user filters and search on partner name, submission date, and organization name to enable efficient querying in dashboards and record lists.',
+  },
+  {
+    id: '3',
+    taskName: 'Create Independence Team Dashboard Interface',
+    objectType: 'interface',
+    objectName: 'RSM_BC_IndependenceTeamDashboard',
+    notes:
+      'Build a landing dashboard for Independence Team members with key KPIs (total submissions, active memberships, submissions this month, total partners), a filterable grid of recent submissions across all partners, navigation links, and an export-to-Excel option.',
+  },
+  {
+    id: '4',
+    taskName: 'Add Independence Team Dashboard Page to Site',
+    objectType: 'site',
+    objectName: 'Boards & Committees site',
+    notes:
+      'Add the Independence Team dashboard interface as a page in the site. Configure it as the default landing page and restrict visibility to Independence Team members only.',
+  },
+]
+
+export const Default: Story = {
+  args: {
+    tasks: sampleTasks,
+  },
+}
+
+export const Editing: Story = {
+  args: {
+    tasks: sampleTasks,
+    editing: true,
+    onTasksChange: () => {},
+  },
+}
+
+export const SingleTask: Story = {
+  args: {
+    tasks: [sampleTasks[0]],
+  },
+}
+
+export const InChatContext: Story = {
+  render: function InChatContextRender() {
+    const [editing, setEditing] = useState(false)
+    const [tasks, setTasks] = useState<TaskPlanItem[]>(sampleTasks)
+
+    return (
+      <div className="max-w-2xl flex flex-col gap-4">
+        <p className="text-sm text-gray-900">
+          Here&apos;s the plan for adding the Independence Team dashboard.
+          What do you think?
+        </p>
+        <TaskPlan
+          tasks={tasks}
+          editing={editing}
+          onTasksChange={setTasks}
+        />
+        <div className="flex gap-2">
+          {editing ? (
+            <ButtonWidget
+              label="Save changes"
+              style="SOLID"
+              color="ACCENT"
+              size="SMALL"
+              onClick={() => setEditing(false)}
+            />
+          ) : (
+            <>
+              <ButtonWidget
+                label="Looks good, proceed"
+                style="SOLID"
+                color="ACCENT"
+                size="SMALL"
+                onClick={() => {}}
+              />
+              <ButtonWidget
+                label="Edit plan"
+                style="OUTLINE"
+                color="SECONDARY"
+                size="SMALL"
+                onClick={() => setEditing(true)}
+              />
+            </>
+          )}
+        </div>
+      </div>
+    )
+  },
+  args: {
+    tasks: sampleTasks,
+  },
+}
diff --git a/src/components/Chat/TaskPlan.tsx b/src/components/Chat/TaskPlan.tsx
new file mode 100644
index 0000000..d52dd25
--- /dev/null
+++ b/src/components/Chat/TaskPlan.tsx
@@ -0,0 +1,243 @@
+import * as React from 'react'
+import { useState } from 'react'
+import { ChevronDown, FileText, Workflow, Database, HardDrive, Layout, Ruler, Calculator, Variable, Users, Globe } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import { mergeClasses } from '../../utils/classNames'
+import { TextField } from '../TextField/TextField'
+import { ParagraphField } from '../ParagraphField/ParagraphField'
+import { DropdownField } from '../Dropdown/DropdownField'
+
+/**
+ * Object types supported by the icon set.
+ */
+export type ObjectTypeKey =
+  | "document"
+  | "processModel"
+  | "recordType"
+  | "dataStore"
+  | "interface"
+  | "rule"
+  | "expression"
+  | "constant"
+  | "group"
+  | "site"
+
+interface IconConfig {
+  icon: LucideIcon
+  bg: string
+  fg: string
+}
+
+const OBJECT_TYPE_ICONS: Record<ObjectTypeKey, IconConfig> = {
+  document:     { icon: FileText,   bg: 'bg-green-50',  fg: 'text-green-700' },
+  processModel: { icon: Workflow,   bg: 'bg-purple-50', fg: 'text-purple-700' },
+  recordType:   { icon: Database,   bg: 'bg-orange-50', fg: 'text-orange-700' },
+  dataStore:    { icon: HardDrive,  bg: 'bg-sky-50',    fg: 'text-sky-700' },
+  interface:    { icon: Layout,     bg: 'bg-teal-50',   fg: 'text-teal-700' },
+  rule:         { icon: Ruler,      bg: 'bg-blue-50',   fg: 'text-blue-700' },
+  expression:   { icon: Calculator, bg: 'bg-pink-50',   fg: 'text-pink-700' },
+  constant:     { icon: Variable,   bg: 'bg-gray-100',  fg: 'text-gray-700' },
+  group:        { icon: Users,      bg: 'bg-blue-50',   fg: 'text-blue-700' },
+  site:         { icon: Globe,      bg: 'bg-purple-50', fg: 'text-purple-700' },
+}
+
+const OBJECT_TYPE_OPTIONS: { value: ObjectTypeKey; label: string }[] = [
+  { value: "recordType", label: "Record Type" },
+  { value: "processModel", label: "Process Model" },
+  { value: "interface", label: "Interface" },
+  { value: "rule", label: "Rule" },
+  { value: "expression", label: "Expression" },
+  { value: "constant", label: "Constant" },
+  { value: "document", label: "Document" },
+  { value: "dataStore", label: "Data Store" },
+  { value: "group", label: "Group" },
+  { value: "site", label: "Site" },
+]
+
+function getObjectTypeLabel(objectType: ObjectTypeKey): string {
+  return OBJECT_TYPE_OPTIONS.find((o) => o.value === objectType)?.label ?? objectType
+}
+
+export interface TaskPlanItem {
+  /** Unique identifier */
+  id: string
+  /** Task name / title */
+  taskName: string
+  /** Object type for icon display */
+  objectType: ObjectTypeKey
+  /** Name of the object being created/modified */
+  objectName: string
+  /** Implementation notes */
+  notes: string
+}
+
+export interface TaskPlanProps {
+  /** The list of task plan items */
+  tasks: TaskPlanItem[]
+  /** Whether the plan is in edit mode */
+  editing?: boolean
+  /** Callback when tasks are updated in edit mode */
+  onTasksChange?: (tasks: TaskPlanItem[]) => void
+  /** Additional Tailwind classes for prototype-specific styling (not part of SAIL API) */
+  className?: string
+}
+
+/**
+ * TaskPlan Component
+ * Displays a collapsible list of planned tasks with object type icons and details.
+ * Supports read-only and editable modes for plan review workflows.
+ */
+export const TaskPlan: React.FC<TaskPlanProps> = ({
+  tasks,
+  editing = false,
+  onTasksChange,
+  className,
+}) => {
+  const [openItems, setOpenItems] = useState<Set<string>>(
+    new Set(tasks.map((t) => t.id))
+  )
+
+  const toggleItem = (id: string) => {
+    setOpenItems((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        next.delete(id)
+      } else {
+        next.add(id)
+      }
+      return next
+    })
+  }
+
+  const updateTask = (id: string, updates: Partial<TaskPlanItem>) => {
+    if (!onTasksChange) return
+    onTasksChange(
+      tasks.map((t) => (t.id === id ? { ...t, ...updates } : t))
+    )
+  }
+
+  const sailClasses = 'flex flex-col gap-2'
+
+  return (
+    <div className={mergeClasses(sailClasses, className)} role="list" aria-label="Task plan">
+      {tasks.map((task, index) => {
+        const isOpen = openItems.has(task.id)
+        const iconConfig = OBJECT_TYPE_ICONS[task.objectType]
+        const Icon = iconConfig.icon
+
+        return (
+          <div
+            key={task.id}
+            role="listitem"
+            className="border border-gray-200 rounded-md overflow-hidden bg-white"
+          >
+            <button
+              type="button"
+              onClick={() => toggleItem(task.id)}
+              aria-expanded={isOpen}
+              aria-label={`${isOpen ? 'Collapse' : 'Expand'} task ${index + 1}: ${task.taskName}`}
+              className="w-full flex items-center gap-3 px-3 py-3 hover:bg-gray-50 transition-colors"
+            >
+              <ChevronDown
+                className={`size-4 text-gray-500 shrink-0 transition-transform ${isOpen ? 'rotate-0' : '-rotate-90'}`}
+                aria-hidden="true"
+              />
+              <span
+                className={`size-7 rounded-sm flex items-center justify-center shrink-0 ${iconConfig.bg}`}
+                aria-hidden="true"
+              >
+                <Icon className={`size-3.5 ${iconConfig.fg}`} />
+              </span>
+              <span className="text-sm font-medium text-gray-900 text-left">
+                {index + 1}. {task.taskName}
+              </span>
+            </button>
+
+            {isOpen && (
+              <div className="border-t border-gray-200 px-4 pb-4 pt-3">
+                {editing ? (
+                  <EditableTaskContent
+                    task={task}
+                    onUpdate={(updates) => updateTask(task.id, updates)}
+                  />
+                ) : (
+                  <ReadOnlyTaskContent task={task} />
+                )}
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+interface ReadOnlyTaskContentProps {
+  task: TaskPlanItem
+}
+
+const ReadOnlyTaskContent: React.FC<ReadOnlyTaskContentProps> = ({ task }) => {
+  return (
+    <div className="flex flex-col gap-3 text-sm">
+      <div className="flex flex-col gap-1">
+        <span className="text-gray-600 text-xs font-medium uppercase tracking-wide">
+          Object Type
+        </span>
+        <span className="text-gray-900">{getObjectTypeLabel(task.objectType)}</span>
+      </div>
+      <div className="flex flex-col gap-1">
+        <span className="text-gray-600 text-xs font-medium uppercase tracking-wide">
+          Object Name
+        </span>
+        <span className="text-gray-900 font-mono text-xs">{task.objectName}</span>
+      </div>
+      <div className="flex flex-col gap-1">
+        <span className="text-gray-600 text-xs font-medium uppercase tracking-wide">
+          Implementation Notes
+        </span>
+        <p className="text-gray-900 leading-relaxed whitespace-pre-wrap">
+          {task.notes}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+interface EditableTaskContentProps {
+  task: TaskPlanItem
+  onUpdate: (updates: Partial<TaskPlanItem>) => void
+}
+
+const EditableTaskContent: React.FC<EditableTaskContentProps> = ({ task, onUpdate }) => {
+  return (
+    <div className="flex flex-col gap-1">
+      <TextField
+        label="Task Name"
+        value={task.taskName}
+        saveInto={(val) => onUpdate({ taskName: val })}
+        marginBelow="LESS"
+      />
+      <DropdownField
+        label="Object Type"
+        choiceLabels={OBJECT_TYPE_OPTIONS.map((o) => o.label)}
+        choiceValues={OBJECT_TYPE_OPTIONS.map((o) => o.value)}
+        value={task.objectType}
+        saveInto={(val) => onUpdate({ objectType: val as ObjectTypeKey })}
+        marginBelow="LESS"
+      />
+      <TextField
+        label="Object Name"
+        value={task.objectName}
+        saveInto={(val) => onUpdate({ objectName: val })}
+        marginBelow="LESS"
+      />
+      <ParagraphField
+        label="Implementation Notes"
+        value={task.notes}
+        saveInto={(val) => onUpdate({ notes: val })}
+        height="SHORT"
+        marginBelow="NONE"
+      />
+    </div>
+  )
+}
diff --git a/src/components/Chat/index.ts b/src/components/Chat/index.ts
index 0d88c92..6008688 100644
--- a/src/components/Chat/index.ts
+++ b/src/components/Chat/index.ts
@@ -24,3 +24,6 @@ export type { AgentStepsProps, AgentStep, AgentStepAction } from './AgentSteps'
 
 export { TaskProgress } from './TaskProgress'
 export type { TaskProgressProps, Task } from './TaskProgress'
+
+export { TaskPlan } from './TaskPlan'
+export type { TaskPlanProps, TaskPlanItem, ObjectTypeKey } from './TaskPlan'

From f87bb9cd88c0aeda2989d61cf3568924614440ec Mon Sep 17 00:00:00 2001
From: Philip Levy <pglevy@users.noreply.github.com>
Date: Thu, 16 Jul 2026 15:01:46 -0400
Subject: [PATCH 3/4] Swap out progress bar

---
 src/components/Chat/TaskProgress.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Chat/TaskProgress.tsx b/src/components/Chat/TaskProgress.tsx
index c6f4f0c..d7aa19c 100644
--- a/src/components/Chat/TaskProgress.tsx
+++ b/src/components/Chat/TaskProgress.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import { useState } from 'react'
 import { ChevronDown, Check, Circle } from 'lucide-react'
 import { mergeClasses } from '../../utils/classNames'
+import { ProgressBar } from '../ProgressBar/ProgressBar'
 
 type TaskStatus = "COMPLETED" | "ACTIVE" | "TODO"
 
@@ -63,11 +64,13 @@ export const TaskProgress: React.FC<TaskProgressProps> = ({
               <span className="font-medium">{completedCount}</span> / {totalCount}
             </span>
             <div className="flex-1 min-w-0">
-              <progress
-                value={completedCount}
-                max={totalCount}
-                className="w-full h-2 rounded-full appearance-none [&::-webkit-progress-bar]:rounded-full [&::-webkit-progress-bar]:bg-gray-200 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:bg-blue-500 [&::-moz-progress-bar]:bg-blue-500"
-                aria-label={`Task progress: ${completedCount} of ${totalCount} completed`}
+              <ProgressBar
+                percentage={progressValue}
+                showPercentage={false}
+                labelPosition="COLLAPSED"
+                accessibilityText={`Task progress: ${completedCount} of ${totalCount} completed`}
+                marginAbove="NONE"
+                marginBelow="NONE"
               />
             </div>
           </div>

From 831adfbac91c7e1e133700005be1495662e7782e Mon Sep 17 00:00:00 2001
From: Philip Levy <pglevy@users.noreply.github.com>
Date: Thu, 16 Jul 2026 15:01:53 -0400
Subject: [PATCH 4/4] Sort alpha

---
 .storybook/preview.tsx       |  1 +
 src/components/Chat/index.ts | 28 ++++++++++++++--------------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 0ced03b..a49837e 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -5,6 +5,7 @@ const preview: Preview = {
   parameters: {
     options: {
       storySort: {
+        method: 'alphabetical',
         order: ['Welcome', 'Components', 'Patterns', 'Pages'],
       },
     },
diff --git a/src/components/Chat/index.ts b/src/components/Chat/index.ts
index 6008688..94c78b9 100644
--- a/src/components/Chat/index.ts
+++ b/src/components/Chat/index.ts
@@ -1,11 +1,8 @@
-export { ChatInput } from './ChatInput'
-export type { ChatInputProps, ChatInputFile } from './ChatInput'
-
-export { FileCard } from './FileCard'
-export type { FileCardProps } from './FileCard'
+export { AgentSteps } from './AgentSteps'
+export type { AgentStepsProps, AgentStep, AgentStepAction } from './AgentSteps'
 
-export { ChatPanel } from './ChatPanel'
-export type { ChatPanelProps, ChatPanelHeaderAction } from './ChatPanel'
+export { ChatAssistantMessage } from './ChatAssistantMessage'
+export type { ChatAssistantMessageProps } from './ChatAssistantMessage'
 
 export { ChatConfirmation } from './ChatConfirmation'
 export type { ChatConfirmationProps } from './ChatConfirmation'
@@ -13,17 +10,20 @@ export type { ChatConfirmationProps } from './ChatConfirmation'
 export { ChatFeedback } from './ChatFeedback'
 export type { ChatFeedbackProps, FeedbackOption, FeedbackOptions, FeedbackDetails } from './ChatFeedback'
 
+export { ChatInput } from './ChatInput'
+export type { ChatInputProps, ChatInputFile } from './ChatInput'
+
+export { ChatPanel } from './ChatPanel'
+export type { ChatPanelProps, ChatPanelHeaderAction } from './ChatPanel'
+
 export { ChatUserMessage } from './ChatUserMessage'
 export type { ChatUserMessageProps } from './ChatUserMessage'
 
-export { ChatAssistantMessage } from './ChatAssistantMessage'
-export type { ChatAssistantMessageProps } from './ChatAssistantMessage'
+export { FileCard } from './FileCard'
+export type { FileCardProps } from './FileCard'
 
-export { AgentSteps } from './AgentSteps'
-export type { AgentStepsProps, AgentStep, AgentStepAction } from './AgentSteps'
+export { TaskPlan } from './TaskPlan'
+export type { TaskPlanProps, TaskPlanItem, ObjectTypeKey } from './TaskPlan'
 
 export { TaskProgress } from './TaskProgress'
 export type { TaskProgressProps, Task } from './TaskProgress'
-
-export { TaskPlan } from './TaskPlan'
-export type { TaskPlanProps, TaskPlanItem, ObjectTypeKey } from './TaskPlan'