Skip to content
loopkit
pro140 lines · framer-motion

Run Timeline

Every step of a run, in order. A vertical timeline of plan, tool, approval and message steps, with a progress rail that fills as the run moves.

Use it for
Run detail pages, side panels, post-mortems.
Themes
Light + dark
License
Commercial use (draft)
Live

Run #0412

Live

  1. Read the ticket and plan

    820ms

    3 sub-tasks

  2. search_issues

    412ms

    repo: acme/web

  3. run_tests

    214 passed

  4. Ask to merge PR #482

  5. Post summary to #eng

tsx
"use client";

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

export type StepKind = "plan" | "tool" | "approval" | "message" | "error";
export type StepStatus = "pending" | "active" | "done" | "failed";

export interface RunStep {
  id: string;
  kind: StepKind;
  label: string;
  detail?: string;
  durationMs?: number;
}

export interface RunTimelineProps {
  steps?: RunStep[];
  /** Index of the active step (controlled). */
  activeIndex?: number;
  /** Walk through the steps on a loop. */

The rest is in Pro.

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

Get Pro

How it behaves

  • →Steps have kinds (plan ◇, tool ƒ, approval ✋, message ↗, error !) and statuses derived from the active index.
  • →Done steps fill black with a check and show their duration; the active step pulses; an active approval step turns signal-orange and reads 'Waiting for a human…'.
  • →A primary-coloured rail scales from the top to show progress.
  • →Controlled via activeIndex, or autoplay walks the steps on a loop.

Accessibility

  • ✓Ordered list; the active step has aria-current=step.
  • ✓List is aria-live=polite so screen readers hear progress.
  • ✓Honours prefers-reduced-motion.