Skip to content
loopkit
pro136 lines · framer-motion

Task Board

Queued, running, needs you, done. A four-column queue where cards glide between columns as agents pick up work, finish it, and wait for review.

Use it for
Agent ops dashboards, team inboxes, background job views.
Themes
Light + dark
License
Commercial use (draft)
Live

Queued

2

Running

2

Needs you

1

Done

1
tsx
"use client";

import * as React from "react";
import { LayoutGroup, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

export type TaskColumn = "queued" | "running" | "review" | "done";

export interface Task {
  id: string;
  title: string;
  owner: string;
  kind: "agent" | "human";
  column: TaskColumn;
  progress?: number;
}

export interface TaskBoardProps {
  tasks?: Task[];
  autoplay?: boolean;
  tickMs?: number;
  /** Stack columns vertically (for narrow sidebars). */

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

  • →Columns: Queued, Running, Needs you (highlighted in signal colour), Done.
  • →Running cards show a progress bar; at 100% they move to Needs you.
  • →Cards animate between columns with shared layout springs.
  • →Avatars mark agent (A, black) vs human (H, orange) owners. Click a card to push it to the next column.

Accessibility

  • ✓Columns announce their task count.
  • ✓Each card is a button whose label says where it will move.
  • ✓Honours prefers-reduced-motion.