task icon Task

Generate Timeline

Create a Gantt chart visualization from date-ranged data

Requirements
JSON data with records containing: label, startDate, endDate. Optional: category for grouping, title for the chart.
3

Generate a Mermaid Gantt chart from the timeline data.

IMPORTANT: Check today's date to ensure the chart title and sections include
the current year. For example, if today is January 2026 and the data spans
2023-2026, the title should be "Travel History 2023-2026" with sections for
each year including 2026.

Follow these rules:

  1. Set dateFormat to YYYY-MM-DD
  2. Group items into sections (by year, category, or as specified)
  3. Create unique IDs for each item (no spaces, use category+number)
  4. Handle overlapping ranges correctly
  5. Order sections logically (most recent first for history, chronological for projects)
  6. Include ALL years from the data, up to and including the current year

Write ONLY the raw Mermaid code to stateTimeline Mermaid Code
Do not include markdown code fences - just the gantt syntax starting with "gantt".

6

Return the public URL for the timeline image. The caller can embed this
in documents using: Timeline

Also provide a brief summary: date range covered, number of items,
any notable patterns (gaps, overlaps, etc.).

                    To run this task you must have the following required information:

> JSON data with records containing: label, startDate, endDate. Optional: category for grouping, title for the chart.

If you don't have all of this information, exit here and respond asking for any extra information you require, and instructions to run this task again with ALL required information.

---

You MUST use a todo list to complete these steps in order. Never move on to one step if you haven't completed the previous step. If you have multiple CONSECUTIVE read steps in a row, read them all at once (in parallel). Otherwise, do not read a file until you reach that step.

Add all steps to your todo list now and begin executing.

## Steps

1. [Read Timeline Format Guide]: Read the documentation in: `skills/sauna/[skill_id]/references/timeline.format.guide.md` (Guide for structuring Gantt chart data)

2. [Read Timeline Input Data]: Read the file at `session/timeline-data.json` into context (Input data to visualize)

3. Generate a Mermaid Gantt chart from the timeline data.

IMPORTANT: Check today's date to ensure the chart title and sections include
the current year. For example, if today is January 2026 and the data spans
2023-2026, the title should be "Travel History 2023-2026" with sections for
each year including 2026.

Follow these rules:
1. Set dateFormat to YYYY-MM-DD
2. Group items into sections (by year, category, or as specified)
3. Create unique IDs for each item (no spaces, use category+number)
4. Handle overlapping ranges correctly
5. Order sections logically (most recent first for history, chronological for projects)
6. Include ALL years from the data, up to and including the current year

Write ONLY the raw Mermaid code to `session/timeline-chart.txt`
Do not include markdown code fences - just the gantt syntax starting with "gantt".


4. [Gather Arguments: Render Mermaid Diagram] The next step has the following requirements for arguments, do not proceed until you have all the required information:
- `mermaidCodeOrPath`: session/timeline-chart.txt
- `title`: timeline from requirements or 'timeline'
- `outputDir`: session

5. [Run Code: Render Mermaid Diagram]: Call `run_script` with:

```json
{
  "file": {
    "path": https://sk.ills.app/code/media.mermaid.render/preview,
    "args": [
      "mermaidCodeOrPath",
      "title",
      "outputDir"
    ]
  },
  "packages": null
}
```

6. [Gather Arguments: Upload Image to GitHub Pages] The next step has the following requirements for arguments, do not proceed until you have all the required information:
- `imagePath`: the PNG file path from previous step
- `filename`: timelines
- `trackingPath` - Optional path to hosted-index.json for tracking

7. [Run Code: Upload Image to GitHub Pages]: Call `run_script` with:

```json
{
  "file": {
    "path": https://sk.ills.app/code/media.github.upload/preview,
    "args": [
      "imagePath",
      "filename",
      "trackingPath"
    ]
  },
  "packages": null
}
```

8. Return the public URL for the timeline image. The caller can embed this
in documents using: ![Timeline](PUBLIC_URL)

Also provide a brief summary: date range covered, number of items,
any notable patterns (gaps, overlaps, etc.).