Inspect task progress
Read project sourcesIn progress
- ✓Read the launch brieflaunch-brief.md
- ◉Compare responsibilitiesowners.md
Task
A default-open task disclosure with supplied item states and file references.
Preview
Read project sourcesIn progress
- ✓Read the launch brieflaunch-brief.md
- ◉Compare responsibilitiesowners.md
In action
When to use
Use it for
- Supply pending, active, and complete items with optional file badges.
- Use children for additional supplied task content.
Avoid
- Expecting this display to run tasks or infer their completion.
Install
React package
npm install @noorddev/vlak-react
Load the stylesheet once at your app root, then import the components you use.
import "@noorddev/vlak-react/css";
import { Task } from "@noorddev/vlak-react";Per-component imports are available at @noorddev/vlak-react/components/task.
Copy the source
npx @noorddev/vlak-cli add task
Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.
shadcn registry
npx shadcn add https://vlak.dev/r/task.json
Installs the same source through the shadcn CLI.
React
import { Task } from "@noorddev/vlak-react";
<Task title="Read sources" items={[{ id: "brief", content: "Read the launch brief", state: "complete", file: "launch-brief.md" }]} />See the integration example to compose these components with your application's model and data.
Props
Task
A default-open task disclosure with supplied rows and file references.
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | ||
status | ReasoningStatus | Describes application-supplied progress, without generating a thinking trace. | |
statusLabel | string | ||
defaultOpen | boolean | ||
onOpenChange | (open: boolean) => void | ||
variant | "inline" | "panel" | An inline disclosure for message activity, or a framed panel. | |
durationMs | number | Optional elapsed time supplied by the application, in milliseconds. | |
measureDuration | boolean | Measure this component's streaming interval. Off by default. | |
autoExpand | boolean | Open when a new streaming interval begins. Manual disclosure remains the default. | |
autoCollapseDelay | number | false | Close once after completion unless the reader manually changed the disclosure. | |
items | readonly TaskItem[] | [] |
Also accepts Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "title">.
The ref reaches HTMLDetailsElement.
Keyboard
| Keys | Does |
|---|---|
| Tab | Moves through the supplied native controls in reading order |
| Enter, Space | Activates focused buttons and disclosure summaries |
Accessibility
- Native attributes, className, style, and the forwarded ref reach the outer element.
- Interactive content requires accessible names; progress text is not announced for every streamed token.
Markup
The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.
npm install @noorddev/vlak
import "@noorddev/vlak/css";
<details class="rs-task" open><summary>Read sources</summary><ul class="rs-task-list"><li class="rs-task-item">Read launch-brief.md</li></ul></details>
Classes
.rs-task.rs-task-list.rs-task-item.rs-task-active.rs-task-file
Depends on
Use elsewhere
More in AI
ChatConversationResponseResponse markdownMessage composerResponse actionsResponse branchResponse editorConversation exportAttachmentsSuggestionsModel selectorContext usageCheckpointReasoningThought stepsPlanWork queueTool callConfirmationInline citationSourcesShimmerWidgetGenerated imageOpen in chatWidget patternsHighlighted codeAgentFile treeArtifactSnippetCommitEnvironment variablesPackage infoSchema displayTest resultsStack traceTerminalSandboxWeb previewJsx previewAudio playerMic selectorSpeech inputTranscriptionVoice selectorPersonaWorkflow canvas