Integrations Create & Manage

c61 shipped qdash /integrations (qcontrol repo, feat/control-center branch) with an 11-connector typed catalog (crates/qdash/ui/app/lib/integrations.ts) and per-connector detail pages. But the "add" action currently just navigates to a detail page with a disabled stub form ("Not wired — would require configuration"). Only the three channel-backed connectors (pagerduty, slack, email) have a real write path (severity routing via /api/channels). There is no functional create/configure flow, leaving the integrations page incomplete and the operator without guidance on setting up new connectors.

Deliver a create/configure modal launched from the integrations page's add action, with UI custom to each of the 11 connectors — real fields for what each integration actually requires — plus step-by-step operator guidance (where to get tokens/secrets/IDs, what to expect) as a mini living tutorial per connector. Reuse the same per-connector config UI for managing existing integrations on detail pages.

• Research each of the 11 connectors' real setup requirements
• Typed per-connector setup recipes (data model)
• Modal shell + stepper UX pattern
• Custom per-connector configuration forms
• Operator guidance: mini living tutorials for each connector
• Reuse on detail pages (edit existing integrations)
• Persistence layer so configured connectors flip to active state
• Out of scope: actual outbound delivery (qdash stays loopback-bound / projected)

• 2026-08-15 — Cycle created; initial-prompt captured, CYCLE.md written.
• 2026-08-15 — Requirements research + recipe catalog: all 11 connectors' real setup requirements researched and encoded as typed setup recipes (ui/app/lib/integration-setup.ts) — fields (text/url/secret/secret-multiline/select, conditional via showIf) + tutorial steps (vendor console click-paths, copyable SQL/openssl/IAM-policy snippets, caution notes) + "once connected" expectations. Summary in research-connectors.md.
• 2026-08-15 — Guided setup modal: IntegrationSetupModal.vue — step rail with completion state, per-step instruction content, inline field collection, injected severity-routing step for channel-backed connectors (live local counts, defaults from the Alerts fallback map), generated Review & connect step (masked secrets, expectations, honesty note) gated on required fields. Saves via new /api/integrations + existing /api/channels in one action.
• 2026-08-15 — Reuse on detail pages: IntegrationSetupFields.vue shared renderer; [id].vue replaces the disabled stub with the live form (Save / Disconnect / Reopen setup guide), unsaved-edit protection against the 3s poll re-seed. Channel-backed connectors keep the routing panel and gain the config form.
• 2026-08-15 — Persistence: integration_configs SQLite register mirroring channels; GET/POST/DELETE /api/integrations (web.rs/db.rs). Configured connectors flip to active stat cards on the overview (✓ configured for non-channel connectors).
• 2026-08-15 — Verified: cargo check clean; API round-trip on a scratch db; Playwright walk-throughs of Splunk (4 steps), Slack (routing), Okta→Entra conditional branch, and Jira detail reuse — screenshots in shots/.
• 2026-08-15 — Thread: message-preview (message-preview-prompt.md / message-preview-plan.md) — "shape the message" previews for the three notification connectors, each speaking its integration's native language: a Slack window (channel header, APP-badged bot, Block Kit severity bars; knobs for channel, bot name, pixel-pawn vs initials avatar, message detail, and throttling where "per day" visibly collapses the sample stream into one rollup), a PagerDuty incident card (urgency mapping, dedup key that rewrites live, auto-resolve toggle whose off-state shows the incident staying open), and an email digest in a mail frame (From/subject-prefix/delivery-time, live re-grouping by severity/framework/agent, headlines vs full detail). Canned sample narrative shared via message-samples.ts (high credential-leak / medium egress / resolution + digest counts). Architecture: knobs are preview: true SetupFields (seed/persist/review/dirty-tracking ride the c72 machinery free), SetupStep.component + integration-preview.ts registry render the previews in the modal's shape step and as a "Message shape" panel on detail pages. Verified with Playwright knob-permutation shots in shots/.