Task card
The atom of the user's per-project kanban. Lightweight: a title, an optional agent/run chip with cost once handed off, and hover-revealed start/delete actions. Drag-and-drop is the consumer's — native HTML5 drag props pass straight through, no dnd-kit.
Included in the single kansho full pack. Components are not offered as separate installs.
States
Plain note · hand-off available · linked to a runDraft the onboarding empty state
Wire the composer to the run-start path
Compact audit-log payloads above 4KB
Inside a column
Reuses BoardColumnFrame; the add affordance lives in headerBelowLast action
Actions stop propagation — they never trigger the card's onClick—
Included components
This page is the canonical destination for these components. All ship in the single Kansho pack.
Board column frame
components/board/board-column-frame.tsxComponent documentation
Board column frame
components/board/board-column-frame.tsxPurpose
Provides the fixed-width header, scrolling body, and optional actions for a board column.
Appropriate use
Use as the structural shell for a board lane when a specialised column supplies its data and behaviour.
Example
components/board/board-column-frame.tsx has a representative live example in the "Inside a column" section on /components/task-card.
States
Tones are neutral, accent, success, warning, and danger; header, count, hint, extras, add, and more regions are optional.
API and props
BoardColumnFrame accepts title, titleNode, count, countNode, tone, hint, width, className, headerExtra, headerBelow, bodyClassName, bodyRef, children, onMore, onAddCard, addLabel, and addAriaLabel.
Dependencies
Direct imports are React, Lucide icons, and cn.
Accessibility
The default title is a heading, actions render only when callbacks exist and have accessible names, and the tone dot is decorative.
Limitations
It does not implement drag-and-drop, menu content, card creation, responsive width, or column data management.
Source
Source: components/board/board-column-frame.tsx.
Full pack
components/board/board-column-frame.tsx is documented at /components/task-card and installs only through the single Kansho full pack; no individual component install is offered.
Task Card
components/board/task-card.tsxPurpose
Provides a lightweight task board card with optional linked-run metadata and guarded actions.
Appropriate use
Use on a simple project board when tasks may be handed to an agent, opened, deleted, or moved with native drag events.
Example
components/board/task-card.tsx has a representative live example in the "Inside a column" section on /components/task-card.
States
Cards can be unlinked or linked by agentLabel, selected or default, interactive or read-only, and optionally native-draggable.
API and props
TaskCard accepts title, agentLabel, tokens, cost, selected, onClick, onStartAgent, onDelete, draggable, onDragStart, onDragEnd, and className.
Dependencies
Direct imports are React, Lucide icons, CostChip, and cn.
Accessibility
The card becomes a keyboard button only when onClick exists; start and delete are separately named buttons and stop propagation to avoid opening the card.
Limitations
It does not assign agents, delete data, confirm deletion, or implement a drag target; the host owns feedback and native drag orchestration.
Source
Source: components/board/task-card.tsx.
Full pack
components/board/task-card.tsx is documented at /components/task-card and installs only through the single Kansho full pack; no individual component install is offered.