---
id: "0130c"
title: "Frontend C++ ImGui kanban_cpp v2: board + flows + filtros + detalle"
status: pendiente
type: app
domain:
  - cpp-stack
  - dev-ux
scope: app-scoped
priority: alta
depends: ["0130b"]
blocks: []
related:
  - "0130"
created: 2026-05-22
updated: 2026-05-22
tags: [cpp, imgui, kanban, frontend]
flow: "0130"
---

# 0130c — Frontend C++ ImGui kanban_cpp v2

**Status:** pendiente

## Por que

UI nativa sobre el backend 0130b. Aprovecha el framework `fn::run_app` (menubar, layouts, settings, about, log) y los componentes del registry (`data_table`, `kpi_card`, `http_request`, `sse_client`).

## Estructura

```
apps/kanban_cpp/
  app.md
  appicon.ico
  CMakeLists.txt
  main.cpp                # fn::run_app + cfg.panels
  data.h / data.cpp       # http client + state global (issues, flows, filters)
  panel_board.cpp         # 4 columnas + drag-drop
  panel_flows.cpp         # tabla via data_table_cpp_viz
  panel_filters.cpp       # Aside con multi-select
  panel_detail.cpp        # form editable del issue seleccionado
  panels.h
```

## Trio obligatorio (`app.md`)

```yaml
description: "Kanban C++ v2 para gestionar dev/issues y dev/flows del registry"
icon:
  phosphor: "kanban"
  accent: "#a855f7"
```

## Paneles

1. **Board** (`TI_KANBAN " Board"`) — 4 columnas (pendiente / in-progress / bloqueado / completado). Cada card: id + title (trunc 60) + priority badge + first domain chip. Drag-drop con `ImGui::BeginDragDropSource/Target` -> PATCH status.
2. **Flows** (`TI_FLOW " Flows"`) — `data_table_cpp_viz` con columnas id/title/status/kind. Click fila → carga detail.
3. **Filters** (`TI_FUNNEL " Filters"`) — AppShell.Aside-equivalente (panel lateral fijo). Multi-select por domain, scope, priority, tags. Estado local; rebuild request query.
4. **Detail** (`TI_INFO " Detail"`) — modal/panel lateral con form: status (combo), priority (combo), scope (combo), tags (chips editables), depends/blocks (listas), body (read-only multiline).

## HTTP client (data.cpp)

- `fetch_issues(filters)` → GET con query string → parse JSON → vector<Issue>.
- `fetch_flows()` → similar.
- `patch_issue(id, partial)` → PATCH JSON → recibe issue actualizado.
- `subscribe_sse()` thread aparte → push events a queue mutex → consumir en main loop → re-fetch afectados.

Usa `http_request_cpp_core` + `sse_client_cpp_core`. JSON via `nlohmann/json` (ya en cpp/vendor o sacar al header-only).

## DoD

- `cmake --build cpp/build/linux --target kanban_cpp -j` verde.
- `./cpp/build/linux/apps/kanban_cpp/kanban_cpp --self-test` exit 0:
  - inicializa contexto ImGui sin display.
  - parsea respuesta JSON sintetica.
  - no toca red salvo si `--backend http://...` se pasa.
- e2e_checks en `app.md`: build + self_test + backend_health (corre backend en background) + smoke (drag-drop reescribe MD).
- Captura screenshot board con 4 columnas pobladas → guardar en `dod_evidence/board_screenshot.png`.

## Anti-scope

- Sin grafo de dependencias (epic 0130 lo describe como anti-scope v1).
- Sin crear issues nuevos (solo editar existentes).
- Sin edicion de body MD (solo frontmatter).
- Sin syntax highlighting markdown.
