Tool Forge - Build AI Apps from Backend Logic

Create status trackers with color-coded items for monitoring system health or progress.

Usage

const tracker = block.tracker({
  title: 'Service Status',
  data: [
    { name: 'API', color: 'emerald' },
    { name: 'Database', color: 'emerald' },
    { name: 'Cache', color: 'amber' },
    { name: 'Queue', color: 'emerald' },
  ],
})

Props

Prop	Description	Type	Required	Default
title	Title displayed above the tracker	`string`	No	`undefined`
description	Description text below the title	`string`	No	`undefined`
data	Array of tracked items	`TrackerItem[]`	Yes	—
defaultBackgroundColor	Background color for uncompleted items	`ChartColor`	No	`'gray'`

TrackerItem

Prop	Description	Type	Required	Default
name	Name of the tracked item	`string`	Yes	—
color	Color for the item	`ChartColor`	No	`'blue'`

Returns

Returns a tracker block that can be returned from a handler or passed to io.message().

Examples

Service health tracker

return block.tracker({
  title: 'Infrastructure Status',
  description: 'Last 30 days uptime',
  data: [
    { name: 'Day 1', color: 'emerald' },
    { name: 'Day 2', color: 'emerald' },
    { name: 'Day 3', color: 'amber' },
    { name: 'Day 4', color: 'emerald' },
    { name: 'Day 5', color: 'red' },
    // ... more days
  ],
})

Build status tracker

const builds = await fetchRecentBuilds()

return block.tracker({
  title: 'Recent Builds',
  data: builds.map((build) => ({
    name: `Build #${build.id}`,
    color:
      build.status === 'success'
        ? 'emerald'
        : build.status === 'failed'
          ? 'red'
          : 'amber',
  })),
})

Deployment pipeline

return block.tracker({
  title: 'Deployment Pipeline',
  data: [
    { name: 'Build', color: 'emerald' },
    { name: 'Test', color: 'emerald' },
    { name: 'Staging', color: 'emerald' },
    { name: 'Production', color: 'gray' }, // Not yet deployed
  ],
  defaultBackgroundColor: 'gray',
})

Inside a KPI card

return block.kpiCard({
  name: 'System Uptime',
  value: '99.9%',
  change: 0.1,
  changeType: 'positive',
  chart: {
    type: 'chart',
    chartType: 'tracker',
    data: uptimeData.map((day) => ({
      name: day.date,
      color: day.uptime > 99 ? 'emerald' : day.uptime > 95 ? 'amber' : 'red',
    })),
  },
})

Sprint progress tracker

return block.tracker({
  title: 'Sprint Tasks',
  data: tasks.map((task) => ({
    name: task.title,
    color: task.completed ? 'emerald' : task.inProgress ? 'blue' : 'gray',
  })),
})

Available Colors

type ChartColor =
  | 'blue'
  | 'emerald'
  | 'violet'
  | 'amber'
  | 'gray'
  | 'cyan'
  | 'pink'
  | 'lime'
  | 'fuchsia'
  | 'red'
  | 'green'
  | 'yellow'

tracker

On this page