Work Summary · paneui

Read SidebarThreadRow.tsx
SearchsetDragImage · 2 matches
Edit SplitPaneLayout.tsx+190
Run testsbun run test src/components/chat

The sidebar uses native drag events, while horizontal tabs use a separate reorder handler.

Installation

pnpm dlx shadcn@latest add @paneui/work-summary

Usage

import { WorkSummary, WorkSummaryStep, WorkSummaryThought } from "@/components/ui/work-summary"

<WorkSummary duration={25}>
  <WorkSummaryStep kind="read" title="Read SidebarThreadRow.tsx" />
  <WorkSummaryStep kind="execute" title="Run tests" detail="bun run test" />
</WorkSummary>

Composition

WorkSummary
├── WorkSummaryThought
└── WorkSummaryStep

Examples

Running

With Output

Use step children for command output, a diff or an error.

Collapsible Steps

Use when a turn has many steps with long output.

ACP

kind and status use the Agent Client Protocol's ToolKind and ToolCallStatus values, so tool_call updates map straight onto steps.

Motion

The list opens with a 250ms height and opacity ease, a collapsible step with 200ms; the chevron turns 90°. With reduced motion only the opacity changes.

Collapsible steps

With collapsible the step row is a button with aria-expanded; its children mount only while open. Without children it stays a plain row.

API Reference

WorkSummary

Also accepts every prop of div.

duration: number; Seconds the work took (finished turns).
startedAt: number; Epoch ms the work started; the label counts up from it while running.
running= false: boolean; Show “Working for …” with a shimmer.
label: ReactNode; Replace the label.
open: boolean; Controlled open state.
defaultOpen= false: boolean; Initial open state.
onOpenChange: (open: boolean) => void; Called when toggled.

Prop	Type	Default	Description
duration	number	—	Seconds the work took (finished turns).
startedAt	number	—	Epoch ms the work started; the label counts up from it while `running`.
running	boolean	false	Show “Working for …” with a shimmer.
label	ReactNode	—	Replace the label.
open	boolean	—	Controlled open state.
defaultOpen	boolean	false	Initial open state.
onOpenChange	(open: boolean) => void	—	Called when toggled.

data-open / data-running: Present when open / running.

Data attribute	Description
data-open / data-running	Present when open / running.

WorkSummaryStep

Also accepts every prop of li.

kind= "other": "read" | "edit" | "delete" | "move" | "search" | "execute" | "think" | "fetch" | "switch_mode" | "other"; Picks the icon.
title*: ReactNode; What happened.
detail: ReactNode; Muted monospace detail, such as a path or command.
status= "completed": "pending" | "in_progress" | "completed" | "failed"; Spinner, dimmed, icon or ✕.
icon: ReactNode; Override the kind's icon.
collapsible= false: boolean; The step row shows and hides its children.
open: boolean; Controlled open state of a collapsible step.
defaultOpen= false: boolean; Initial open state.
onOpenChange: (open: boolean) => void; Called when toggled.

Prop	Type	Default	Description
kind	"read" \| "edit" \| "delete" \| "move" \| "search" \| "execute" \| "think" \| "fetch" \| "switch_mode" \| "other"	"other"	Picks the icon.
title*	ReactNode	—	What happened.
detail	ReactNode	—	Muted monospace detail, such as a path or command.
status	"pending" \| "in_progress" \| "completed" \| "failed"	"completed"	Spinner, dimmed, icon or ✕.
icon	ReactNode	—	Override the kind's icon.
collapsible	boolean	false	The step row shows and hides its children.
open	boolean	—	Controlled open state of a collapsible step.
defaultOpen	boolean	false	Initial open state.
onOpenChange	(open: boolean) => void	—	Called when toggled.

data-status / data-open: Step status; present while a collapsible step is open.

Data attribute	Description
data-status / data-open	Step status; present while a collapsible step is open.

WorkSummaryThought

The model's thinking text. Also accepts every prop of li.

title: ReactNode; Heading such as “Thought for 4s”; with it the text folds under the heading.
open / defaultOpen / onOpenChange: boolean / boolean / (open: boolean) => void; Open state when title is set.

Prop	Type	Default	Description
title	ReactNode	—	Heading such as “Thought for 4s”; with it the text folds under the heading.
open / defaultOpen / onOpenChange	boolean / boolean / (open: boolean) => void	—	Open state when `title` is set.