Server: Dashboard UI

[ggondim]

Summary

Build the management dashboard UI: channel registration, visual route editor (ReactFlow), and threads/turns monitoring.

Tasks

Channel Registration

• List registered channels with status (connected/disconnected)
• Add channel wizard: select platform → enter credentials → test connection → save
• Edit / delete channels
• Show channel API key (masked by default, copy button)

Route Editor (ReactFlow)

• Visual flow: channel nodes → criteria nodes → recipient nodes
• Drag-and-drop route creation
• Criteria configuration panel (channel, group, DM, thread, mention, sender, content pattern)
• Priority ordering (drag to reorder)
• Test route: simulate an inbound message → highlight matching routes

Threads & Turns Dashboard

• List threads with filters (channel, target, date range, status)
• Thread detail: chronological turn log with message content
• Turn detail: raw envelope, A2H intent/response (if applicable), timestamps
• Search across threads

Settings

• Global configuration: default token TTL, trust layer toggle
• Per-channel overrides

Acceptance Criteria

• User can register a new Slack channel via the wizard and see it listed
• User can create a route visually in ReactFlow and save it
• Route test correctly highlights matching routes for a simulated message
• Thread list is filterable and searchable
• Thread detail shows full turn history
• All CRUD operations reflect immediately in the UI

Dependencies

• Server: API Routes & Infrastructure #11 (Server: API Routes) — dashboard consumes the management API

References

• VISION.md — Architecture / UI Layer
• VISION.md — Tech Stack
• PLAN.md — Phase 4.3

[claude]

@claude Implement this issue.

• Base branch: meta/17
• Target your PR to meta/17
• Include fixes #13 in the PR body

[claude]

Claude finished @claude[bot]'s task in 13m 23s —— View job • claude/17-issue-13-20260410-2244 • Create PR ➔

---

Implemented Dashboard UI

• Gather context (read codebase, understand existing APIs and types)
• Add dependencies (antd ^5.24, @ant-design/icons, @ant-design/nextjs-registry, @xyflow/react ^12)
• Add settings API + update threads API (channelId now optional, added search)
• Create typed API client helper (lib/api-client.ts)
• Build dashboard layout (fixed sidebar with nav: Overview, Channels, Routes, Threads, Settings)
• Build Channel Registration page (list, wizard, edit/delete, masked API key with copy button)
• Build Route Editor page (ReactFlow canvas with channel/route/recipient nodes, criteria drawer, test route panel)
• Build Threads & Turns dashboard (searchable list + thread detail with turn timeline)
• Build Settings page (TTL presets, trust layer toggle, per-channel overrides)
• Commit and push changes (17 files, +2738 lines)

---

What was implemented

New pages (/dashboard/*):

Page	Route	Features
Overview	/dashboard	Live stats: channel/route/thread counts
Channels	/dashboard/channels	List + add wizard (platform → credentials → test → save), edit/delete, masked API key with eye/copy
Routes	/dashboard/routes	ReactFlow visual flow + priority list + criteria drawer + test route matching
Threads	/dashboard/threads	Filterable table (channel, search), click-to-detail
Thread Detail	/dashboard/threads/[id]	Chronological turn timeline, A2H intent rendering, raw envelope collapse
Settings	/dashboard/settings	Global TTL/trust-layer + per-channel overrides

New API endpoints:

• POST /api/routes/test — simulate inbound criteria → returns matching route IDs (used by "Test Route" panel)
• GET /api/settings — read global settings from MongoDB
• PUT /api/settings — update global settings

Updated:

• GET /api/threads — channelId is now optional; added search query param for full-text filtering
• lib/db.ts — added listThreads(), getSettings(), updateSettings(), AppSettings, ChannelOverride types
• Root page now redirects to /dashboard
• Root layout wraps with AntdRegistry for proper Next.js SSR CSS handling

|

[github-actions]

⚠️ Task worker failed. View logs

To retry with fix context, comment @claude fix on this issue.

[ggondim]

@claude fix

[claude]

Claude finished @ggondim's task in 11m 54s —— View job • claude/17-issue-13-20260410-2321 • Create PR ➔

---

Fixed Dashboard UI Implementation

• Gather context (read CLAUDE.md, explore codebase, understand previous attempt)
• Apply and fix implementation on current branch (17 files)
• Key fixes vs. previous attempt:
  • Defined AppSettings/ChannelOverride types directly in api-client.ts (avoids importing from server-only lib/db.ts in client components)
  • Removed unused onConnect parameter from buildGraph in RouteFlowCanvas.tsx
  • Used proper HTML entity encoding (…, →) instead of JS string literals in JSX
• Commit and push (17 files, +2755 lines)

What was implemented

New pages (/dashboard/*):

Page	Route	Features
Overview	/dashboard	Live stats: channel/route/thread counts
Channels	/dashboard/channels	List + add wizard (platform → credentials → test → save), edit/delete, masked API key with eye/copy
Routes	/dashboard/routes	ReactFlow visual flow + priority list + criteria drawer + test route matching
Threads	/dashboard/threads	Filterable table (channel, search), click-to-detail
Thread Detail	/dashboard/threads/[id]	Chronological turn timeline, A2H intent rendering, raw envelope collapse
Settings	/dashboard/settings	Global TTL/trust-layer + per-channel overrides

New API endpoints:

• POST /api/routes/test — simulate inbound criteria → returns matching route IDs
• GET /api/settings — read global settings from MongoDB
• PUT /api/settings — update global settings

Updated:

• GET /api/threads — channelId now optional; added search query param
• lib/db.ts — added listThreads(), AppSettings, ChannelOverride, getSettings(), updateSettings()
• Root page redirects to /dashboard
• Root layout wraps with AntdRegistry for proper Next.js SSR CSS handling

• claude/17-issue-13-20260410-2321

[github-actions]

❌ Fix agent also failed. View run — Manual intervention may be needed.