Dashboards

A dashboard is a grid of widgets. Each widget is a markdown document rendered inside a card on a 12-column responsive grid. Dashboards are global — they are not scoped to a single project, so one dashboard can aggregate information across your entire workspace.

Dashboards serve two primary purposes:

• Human-curated views — manually arrange widgets to track project metrics, sprint status, or architecture diagrams.
• Agent-generated reports — agents create and update dashboards programmatically via the CLI, producing business plans, analysis summaries, or live status boards.

Every widget stores its content as markdown. The renderer detects embedded content blocks and renders them as rich elements inside the card.

Markdown Widgets

The default widget type. Write any standard markdown and it renders as formatted text inside the card. Supports headings, bullet lists, numbered lists, tables, bold, italic, inline code, and links.

Chart Widgets

Embed an ECharts configuration inside a fenced code block tagged echarts. The widget renders a live, interactive chart. You can mix markdown text above or below the chart block within the same widget. See Editor & Diagrams for chart syntax details.

Diagram Widgets

Embed Mermaid diagram definitions inside a mermaid fenced code block. Supports flowcharts, sequence diagrams, class diagrams, Gantt charts, and more. The diagram renders inline within the widget card.

Creating a Dashboard

Adding a Widget

Editing a Widget

Click any widget to open its inline editor. The editor supports full markdown with a live preview. Changes save automatically. You can also click the zoom icon to expand a widget into a full-screen editing view.

Widgets are positioned on a 12-column responsive grid. Each widget has four positioning properties:

Common Layout Patterns

Rearrange widgets visually by dragging them on the grid:

Position changes update the widget’s x, y, w, and h values automatically and persist immediately.

Dashboards are global objects — they exist at the workspace level, not inside a project. This means:

• A single dashboard can display data from multiple projects.
• Switching projects does not change which dashboards are visible.
• You can create as many dashboards as you need and switch between them from the dashboard dropdown.

To create a project-focused dashboard, name it after the project and populate it with project-specific widgets. While not enforced by scope, the convention keeps dashboards organized when you have many projects. Agents operating within a project context will typically create or update the dashboard associated with that project.

Widgets support rich embedded content beyond plain text. Mix markdown prose with charts and diagrams in a single widget, or dedicate entire widgets to a single visualization.

Embedding a Chart

Place an ECharts JSON configuration inside a fenced code block. The widget renders the chart inline:

## Monthly Revenue

```echarts
{
  "xAxis": { "type": "category", "data": ["Jan","Feb","Mar"] },
  "yAxis": { "type": "value" },
  "series": [{ "type": "bar", "data": [120, 200, 150] }]
}
```

Embedding a Diagram

Place a Mermaid definition inside a fenced code block. The diagram renders directly in the card:

## System Architecture

```mermaid
graph LR
  A[User] --> B[Frontend]
  B --> C[API Server]
  C --> D[Database]
```

Agent-Generated Content

Agents can create and update dashboard widgets programmatically using the AIF Actions CLI. This enables workflows where an agent analyzes data, generates a report, and writes the results directly to a dashboard widget — no manual editing required.

• Use w=12 for introductory or summary widgets so they always appear at full width.
• Pair a data table widget (w=6) with a chart widget (w=6) on the same row for side-by-side comparison.
• Increase h for widgets with tall diagrams or lengthy text to avoid scrolling within the card.
• Name dashboards after projects or themes (e.g., “Q1 Sprint Dashboard”) to keep them easy to find.
• Let agents generate the initial dashboard layout, then refine positions manually with drag-and-drop.