Build chat provider settings UI (codex)

[numnx]

🧩 Task: Build chat provider settings UI

Automated task PR opened by Code UX for T06.

📋 Summary

Sprint: Sprint 162 · Integrate Chat Connections · Task: T06

Integrate configurable external chat providers under Settings -> Providers so WhatsApp, iMessage, Telegram, Slack, Microsoft Teams, and Discord can be securely connected to project-manager chat flows, managed through dashboard and MCP APIs, linked flexibly across projects/channels, and routed through the existing chat reply runtime with external-channel-safe replies that suppress dashboard-only rich widgets.

🤖 Model & Provider

Provider	Codex CLI
Model	gpt-5.5

⏱️ Timing

Started	2026-07-07 07:06:46 UTC
Finished	2026-07-07 07:23:27 UTC
Duration	16m 41s

📊 Token Usage

Metric	Value
Input tokens	201,015
Cached input tokens	8,537,728
Output tokens	40,332
Total tokens	8,779,075
Invocations	1
Tool calls	100
Active time	15m 57s

Included usage estimate (subscription/local login): $6.48

✅ QA Review

⏳ QA review runs after this PR is opened. Check the task card in the dashboard for the outcome once it lands.

📝 Full Task Prompt

## Objective
Implement the dashboard Settings -> Providers UI for WhatsApp, iMessage, Telegram, Slack, Microsoft Teams, and Discord with clear setup guidance, secure credential controls, delivery status, and flexible project/channel binding controls.

## Scope
- Edit `dashboard/src/v2/hooks/use-settings-page-state.ts`
- Edit `dashboard/src/v2/components/settings/panels/SettingsIntegrationsPanel.tsx`
- Create `dashboard/src/v2/lib/chat-provider-api.ts`
- Create `dashboard/src/v2/lib/chat-provider-view-models.ts`
- Edit `dashboard/src/v2/lib/settings-search-index.ts`
- Edit `dashboard/src/v2/types.ts` and `dashboard/src/types.ts` for shared contract exports if needed
- Add `tests/dashboard/v2/settings-chat-providers-panel.test.tsx`
- Add `tests/dashboard/lib/chat-provider-view-models.test.ts`
- Consumes dashboard configuration APIs from T02 and ingress setup URLs from T04

## Implementation Requirements
1. Add chat provider definitions to the Settings integrations model under Providers, with provider-specific setup copy for WhatsApp, iMessage, Telegram, Slack, Microsoft Teams, and Discord.
2. Render provider cards showing provider status, bridge mode, ingress URL, authentication status, enabled state, configured channels, bound projects, pending/failed outbound delivery counts, and whether outbound replies are enabled.
3. Add create/edit controls for connection display name, bridge mode, OpenClaw/webhook/native bridge setup fields, webhook signature secret or bridge token, native command settings for iMessage, enabled flag, and provider-specific setup notes.
4. Add binding controls that allow one channel to link to multiple projects, one project to link to multiple channels, optional project-manager agent preset selection, inbound/outbound toggles, routing hint or project selector prefix fields, and the suppress-rich-widgets setting.
5. Add an ambiguity/disambiguation UX that explains how same-channel multi-project routing works and how project selector prefixes or routing hints prevent unsafe guessing.
6. Add delivery-state UI for recent failed outbound messages with clear redacted errors and retryable status labels, without exposing secrets.
7. Use existing settings panel primitives, lucide icons, focus-visible rings, accessible names, reduced-motion-safe transitions, and responsive layouts consistent with `SettingsIntegrationsPanel.tsx`.
8. Add search terms so queries like `whatsapp`, `telegram`, `slack`, `teams`, `discord`, `imessage`, `chat provider`, `channel binding`, `OpenClaw`, `webhook`, and `native bridge` surface the Providers/Integrations category.

## Constraints
- Do not add new external UI libraries.
- Do not expose raw saved secrets after save; show redacted or empty secret fields according to existing secret-input behavior.
- Do not remove existing AI provider, GitHub, GitLab, or Jira integration controls.
- Keep UI state compatible with system scope and project context; do not invent project names in labels or test snapshots.

## Verification
- Run `pnpm exec vitest run tests/dashboard/v2/settings-chat-providers-panel.test.tsx tests/dashboard/lib/chat-provider-view-models.test.ts tests/dashboard/lib/settings-search-index.test.ts`.
- Run `pnpm run typecheck:dashboard`.
- Success means users can configure every requested chat provider, secure its bridge, inspect delivery health, and bind channels/projects from Settings -> Providers with accessible controls.

🌿 Branch Info

Base: feature/CODUX-162-integrate-chat-connections
Head: task/feature-codux-162-integrate-chat-connections-t06-codex-mrab2xfa

---

🤖 Generated by Code UX