Files
openhuman/app
ec74c7346b fix(channels): clear stale OAuth Connecting badges across auth modes (#2128)
## Summary

- Centralises OAuth deep-link → channel-badge transitions behind a new
  `useOAuthConnectionListener` hook so every channel panel handles both
  `oauth:success` and `oauth:error` consistently.
- Adds a `clearOtherPendingForChannel` reducer so starting a connect flow on
  one auth mode drops any sibling auth mode that's still mid-`connecting` on
  the same channel.
- Wires `DiscordConfig` and `TelegramConfig` onto the shared hook; future
  channels with an OAuth auth mode inherit correct pending-state transitions
  automatically.
- Covers the new reducer (4 cases) and hook (8 cases) with Vitest.

## Problem

OAuth badges on the channel connection panels could get pinned at
`Connecting` indefinitely (issue #2128):

- `DiscordConfig` had a per-component `oauth:success` listener but no
  `oauth:error` listener — failed OAuth attempts never transitioned the badge
  out of `connecting`.
- `TelegramConfig` had neither — completed *and* failed OAuth attempts left
  the badge pinned.
- Both panels set `connecting` on the chosen auth mode but never cancelled
  any sibling auth mode that was already pending. Triggering a second OAuth
  method on Discord (`OAuth Sign-in` then `Login with OpenHuman`, or the
  reverse) left both methods badged `Connecting` simultaneously.

This is the exact repro from the issue. The same shape was visible across
GitHub/GitLab style multi-method panels because the underlying state model
(`channelConnections`, keyed by `(channel, authMode)`) had no notion of
mutual exclusion.

## Solution

**Shared listener hook** —
[`app/src/hooks/useOAuthConnectionListener.ts`](app/src/hooks/useOAuthConnectionListener.ts)
subscribes to both `oauth:success` and `oauth:error` window events
(dispatched from `utils/desktopDeepLinkListener.ts`), filters by `toolkit` /
`provider` case-insensitively, and dispatches the matching slice action.
Per-channel panels mount it once with `{ channel, authMode }`; cleanup on
unmount is deterministic. New channels with an OAuth auth mode inherit the
behaviour without copying any logic.

**Pending-state cancellation reducer** — `clearOtherPendingForChannel({ channel,
exceptAuthMode })` in `channelConnectionsSlice.ts` walks the auth-mode map
for one channel and transitions every `connecting` row (except the
exception) to `disconnected` with `lastError: undefined`. Cancelled rows go
to `disconnected` rather than `error` so the UI doesn't surface a misleading
failure — the user explicitly switched methods, they didn't experience an
error.

**Per-panel wiring** — `DiscordConfig` and `TelegramConfig` each:

1. Mount `useOAuthConnectionListener({ channel: <name>, authMode: 'oauth' })`
   at the top of the component (replacing the bespoke effect on Discord;
   net-new on Telegram).
2. Dispatch `clearOtherPendingForChannel` at the start of `handleConnect`
   *before* setting their own auth mode to `connecting`.

**Tradeoffs**

- The cancellation transition is `disconnected`, not a new `cancelled` state.
  Adding a dedicated state would expand the `ChannelConnectionStatus` union
  across many call sites for marginal UX value.
- The deep-link CustomEvent payload (`{ integrationId, toolkit }` for
  success, `{ provider, errorCode, message }` for error) is unchanged, so
  no symmetric change in the Tauri-side handler is needed.

## Submission Checklist

- [x] Tests added or updated (happy path + at least one failure / edge case) per [Testing Strategy](../gitbooks/developing/testing-strategy.md#failure-path-requirement) — 12 new Vitest cases (4 reducer + 8 hook) covering success, error, mismatched channel, mismatched provider, missing error message, custom capabilities, unsubscribe on unmount, and three sibling-cancellation shapes.
- [x] **Diff coverage ≥ 80%** — frontend-only change; `pnpm test:coverage` locally over the new files reaches 100% on changed lines (every branch in the hook + reducer is exercised by the suite).
- [x] Coverage matrix updated — `N/A: behaviour-only fix on existing surfaces (channel connection pending state)`.
- [x] All affected feature IDs from the matrix are listed in the PR description under `## Related` — `N/A: no feature ID changes`.
- [x] No new external network dependencies introduced — purely in-app state plumbing.
- [x] Manual smoke checklist updated if this touches release-cut surfaces — `N/A: no release-cut surface touched (channels panel is part of the always-shipped settings UX)`.
- [x] Linked issue closed via `Closes #NNN` in the `## Related` section — see below.

## Impact

- **Desktop only** — no mobile/web/CLI impact. The deep-link event source
  (`desktopDeepLinkListener.ts`) is Tauri-gated; the hook is a no-op outside
  Tauri because no deep-link events fire.
- **No persistence shape change** — `channelConnections` slice schema
  (`SCHEMA_VERSION = 1`) is unchanged. The new reducer only mutates existing
  rows; no migration needed.
- **No security implications** — the listener filters strictly by channel
  identifier and never reads tokens. Existing `[DeepLink][oauth:*]` logs
  remain the canonical diagnostic surface; the hook adds its own
  `channels:oauth-listener` debug namespace per the project's
  verbose-diagnostics rule.

## Related

- Closes: #2128
- Follow-up PR(s)/TODOs: none

## Provider coverage

The issue body mentions Discord, GitHub, and GitLab. The Channels page in this codebase only exposes three multi-method channel-config panels today: `DiscordConfig.tsx`, `TelegramConfig.tsx`, and `WebChannelConfig.tsx` (the last is not OAuth-driven). There is no `GitHubConfig.tsx` / `GitLabConfig.tsx` — verified via `find app/src -name "*Config.tsx"`.

GitHub OAuth does appear elsewhere in the app, but on different state slices that this PR's `channelConnections`-bound hook does not (and should not) touch:

| Surface | File(s) | State path | This PR applies? |
|---|---|---|---|
| App-level sign-in | `BootCheckGate.tsx`, OAuth callback | `deepLinkAuth` slice | No — different slice. App-level OAuth's hot-instance issue is the family fixed by #2228 / #2229. |
| Skill OAuth install | `InstallSkillDialog.tsx`, `services/api/skillsApi.ts` | skills-domain state | No — different surface. |
| Composio integration | `components/composio/TriggerToggles.tsx`, `composio/providerConfigs.tsx` | Composio integration state | No — different surface. |
| **Channel config** (this PR) | `DiscordConfig.tsx`, `TelegramConfig.tsx` | `channelConnections` slice | **Yes — wired.** |

So this PR's `useOAuthConnectionListener` covers every multi-method OAuth panel that actually exists on the Channels surface. The shared hook is also the right shape for any future `GitHubConfig.tsx` / `GitLabConfig.tsx` channel panels — wiring them in becomes a one-line `useOAuthConnectionListener({ channelId, capabilities, ... })` import.

If the stale-`Connecting` symptom also surfaces in the app-level / skills / Composio OAuth flows, those are separate fixes against different state slices and out of scope for this PR — I'm happy to file follow-up issues if any are observed.

---

## AI Authored PR Metadata (required for Codex/Linear PRs)

### Linear Issue
- Key: N/A
- URL: N/A

### Commit & Branch
- Branch: `fix/2128-oauth-badge-pending-state`
- Commit SHA: `2d93f7c0`

### Validation Run
- [x] `pnpm --filter openhuman-app format:check` — `All matched files use Prettier code style!` on the 6 changed files
- [x] `pnpm typecheck` — clean (`tsc --noEmit`)
- [x] Focused tests: `pnpm --filter openhuman-app exec vitest run --config test/vitest.config.ts src/store/__tests__/channelConnectionsSlice.test.ts src/hooks/__tests__/useOAuthConnectionListener.test.tsx src/components/channels/__tests__/DiscordConfig.test.tsx src/components/channels/__tests__/TelegramConfig.test.tsx` → 4 files, 27 tests pass
- [x] Rust fmt/check (if changed): `N/A: no Rust changes`
- [x] Tauri fmt/check (if changed): `N/A: no Tauri shell changes`

### Validation Blocked
- `command:` `git push` pre-push hook (`app:lint:commands-tokens`)
- `error:` `lint:commands-tokens requires ripgrep` — `rg` not installed on the dev environment
- `impact:` zero — the check greps a directory I did not modify (`src/components/commands/`). Pushed with `--no-verify` per the CLAUDE.md guidance for environment-related hook failures unrelated to the diff. Maintainers can re-run on CI to validate.

### Behavior Changes
- Intended behavior change: OAuth badges on channel panels transition out of `connecting` when the OAuth flow completes *or* fails, and starting a new method cancels the previous method's `connecting` row.
- User-visible effect: the reported bug (multiple methods stuck on `Connecting` simultaneously, Telegram OAuth never clearing) goes away. No new UI elements; only badge state transitions are affected.

### Parity Contract
- Legacy behavior preserved: existing `connected` and `error` transitions are unchanged; `disconnectChannelConnection`, `upsertChannelConnection`, `setChannelConnectionStatus` are all untouched. The Discord `oauth:success` path still produces the same final state (`status: 'connected'`, `capabilities: ['read', 'write']`); the inline effect was just refactored behind the shared hook.
- Guard/fallback/dispatch parity checks: hook only reacts when the event's `toolkit` (success) or `provider` (error) field matches the subscribed channel — siblings on other channels, and mismatched dispatches, are no-ops.

### Duplicate / Superseded PR Handling
- Duplicate PR(s): none found. #2170 cross-references #2128 in passing but its title and body close #2141 (channel selector error-status aggregation, a different surface).
- Canonical PR: this one.
- Resolution: N/A.


<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

* **New Features**
  * Reusable OAuth connection listener to handle OAuth success/error deep-link flows for Discord and Telegram.
  * New action to clear other pending/connecting auth methods for a channel.

* **Bug Fixes**
  * Prevents multiple auth methods from remaining "connecting"; switching stops in-flight polling and clears sibling pending modes.
  * OAuth errors now record meaningful messages and listeners unsubscribe on unmount.

* **Tests**
  * Added tests covering the OAuth listener and pending-clearing reducer behaviors.

<!-- review_stack_entry_start -->

[![Review Change Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/tinyhumansai/openhuman/pull/2256?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: sanil-23 <sanil@alphahuman.xyz>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Steven Enamakel <enamakel@tinyhumans.ai>
2026-05-20 14:58:44 -07:00
..
2026-03-29 10:30:18 -07:00
2026-05-20 18:55:15 +00:00
2026-03-29 10:30:18 -07:00

Tauri + React + Typescript

This template should help get you started developing with Tauri, React and Typescript in Vite.