TaskRow

In the app

An agent and its state, one per line. Title truncates, the status never wraps.

@varick/ui/components/task-rowAdded 26 Aug 2026

Submission router342 todayActive

Renewal manager156 todayReview

A very long agent name that will run out of room12 todayPaused

Usage

import { TaskRow } from "@varick/ui/components/task-row";

export function Example() {
  return (
    <TaskRow
      title="Submission router"
      meta="342 today"
      tone="success"
      status="Active"
    />
  );
}

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
title	string	required	The agent or task name.
meta	string	required	A quiet second line.
tone	'success' \| 'warn' \| 'danger' \| 'teal' \| 'neutral'	required	Status tone.
status	string	required	Status label.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--hairline-soft);
  padding: 10px 0;
}
.task-title { font-size: 12.5px; color: var(--fg-high); display: block; }
.task-meta  { font-size: 11.5px; color: var(--fg-mid); display: block; }