refactor(composio): hide raw connection ID, derive friendly label (#1153)

[oxoxDev]

Summary

Stop leaking raw ca_… Composio connection IDs in the Manage modal. Replace with a friendly identity string (accountEmail/workspace/username) when one is available; collapse the line cleanly otherwise.

Problem

Per #1153, the Composio Manage modal renders (id: ca_…) to users in the connected-state footer (ComposioConnectModal.tsx:391-401). Internal IDs are not useful for users and look unfinished.

Solution

• New helper deriveConnectionLabel(c) in ComposioConnectModal.tsx returning c.accountEmail ?? c.workspace ?? c.username ?? null.
• JSX swap: (id: {activeConnection.id}) → ({deriveConnectionLabel(activeConnection)}). When the helper returns null, the entire span is skipped — modal cleanly shows Gmail is connected. with no leak.
• ComposioConnection interface (app/src/lib/composio/types.ts) extended with optional accountEmail, workspace, username fields. Non-breaking — all existing usages still typecheck. A future backend version can populate these without further frontend changes.
• New Vitest at ComposioConnectModal.test.tsx (5 cases): asserts no ca_ substring in DOM, asserts each identity field renders when present, asserts priority order (email > workspace > username).

Submission Checklist

• Tests added — 5 render assertions in new ComposioConnectModal.test.tsx
• Lint, typecheck, format clean — pnpm typecheck && pnpm lint && pnpm format:check
• Existing tests pass — pnpm test:unit 1279 pass
• Diff coverage = 100%
• [N/A: no Rust touch] — no cargo check impact
• [N/A: no schema/RPC change] — no migration

Impact

Modal post-OAuth shows toolkit name (e.g. Gmail is connected.) with no ca_ ID. Backend follow-up can populate the new optional fields to surface email/workspace/username — no further frontend work needed.

Related

Closes #1153.

Summary by CodeRabbit

• Bug Fixes

  • Improved Composio connection modal to show a friendly identifier (account email, workspace, or username) instead of raw connection IDs; uses that priority order and omits the label when no identifier exists.

• Tests

  • Added tests covering connection status and various identity scenarios to ensure correct modal display and fallback behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1430c0e4-5676-4359-9aac-3b6ad27d2e6f

📥 Commits

Reviewing files that changed from the base of the PR and between 6258a38 and 7b7d2b7.

📒 Files selected for processing (1)

• app/src/components/composio/ComposioConnectModal.tsx

✅ Files skipped from review due to trivial changes (1)

• app/src/components/composio/ComposioConnectModal.tsx

---

📝 Walkthrough

Walkthrough

Replaces raw Composio connection IDs in the modal header with a derived, user-friendly label. Adds optional identity fields to ComposioConnection, a deriveConnectionLabel() helper, and tests covering label selection and rendering priorities.

Changes

Connection Identity Display

Layer / File(s)	Summary
Type Definitions app/src/lib/composio/types.ts	ComposioConnection adds optional fields: accountEmail?: string, workspace?: string, username?: string.
Core Logic app/src/components/composio/ComposioConnectModal.tsx	Introduces `deriveConnectionLabel(c: ComposioConnection): string
UI Integration app/src/components/composio/ComposioConnectModal.tsx	Connected-state header now conditionally renders ({deriveConnectionLabel(activeConnection)}) only when a label exists; raw connection id and id: label removed from normal UI.
Tests app/src/components/composio/ComposioConnectModal.test.tsx	Adds tests that mock dependencies and verify: raw id is hidden when status: 'ACTIVE'; accountEmail renders in parentheses; falls back to workspace then username; accountEmail takes priority when multiple fields present.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐇 A modal once showed cryptic codes,
Now friendly names take users' roads.
Email, workspace, username displayed,
The raw id’s hidden, politely stayed.
Hooray — a softer UX for all who’ve stayed!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	Title clearly and concisely describes the main change: hiding raw connection IDs and deriving friendly labels for the Composio modal.
Linked Issues check	✅ Passed	Pull request fully addresses issue #1153 by hiding raw IDs, showing friendly account identity (email/workspace/username), and keeping debug info out of user-facing UI.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the objective: extending ComposioConnection type, implementing deriveConnectionLabel helper, updating modal rendering, and adding comprehensive tests.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

_{Review rate limit: 2/5 reviews remaining, refill in 25 minutes and 57 seconds.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/src/components/composio/ComposioConnectModal.tsx`:
- Around line 35-37: In deriveConnectionLabel (for ComposioConnection) treat
empty or whitespace-only strings as missing before falling back: normalize
candidate fields (accountEmail, workspace, username) by trimming and only use
them if non-empty; check in order and return the first trimmed non-empty value
or null otherwise so blank accountEmail won't block fallback to
workspace/username.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 35ed2364-b0a1-4544-bf7f-3ad451aada76

📥 Commits

Reviewing files that changed from the base of the PR and between 995e5cc and 6258a38.

📒 Files selected for processing (3)

• app/src/components/composio/ComposioConnectModal.test.tsx
• app/src/components/composio/ComposioConnectModal.tsx
• app/src/lib/composio/types.ts