Enhanced connections UI with management and disconnect
Public
Enhanced connections UI with management and disconnect
Agent
Claude Code
Model
Claude Opus 4.8
Shared
Jun 17, 7:09 AM
Messages202
Downloads0
Workspace
Repo
Mapped connections UI and API.
UnderstandImplemented disconnect endpoint and management page.
BuildMade sidebar connected section clickable with icons.
EditRan tests and typechecks; ensured no regressions.
VerifyFixed auth middleware to protect connections page.
EditI'll explore how connections are currently rendered and managed before making changes.
I've launched an exploration agent to map the connections UI and API. Let me wait for its findings before making changes.
While that runs, let me check the recent git context for the connections work.
Let me wait for the exploration agent's full report before diving into edits.
I'll let the agent finish its mapping. Waiting for its report.
I've launched a mapping agent and confirmed the data model: source_connection has (user_id, source, connected_account_id, status, metadata) with status initiated | active | error. Waiting on the agent's full UI/API map before editing.
I'll just wait for the agent's completion notification rather than polling. Let me end this turn and resume when the agent reports back.
The exploration agent is mapping the connections UI and API. I'll continue once it completes.
The agent gave me a complete map. Now I'll read the files I need to edit. First let me isolate in a worktree, then read the key files.
EnterWorktree isn't available from this background job context. Per the guidance, I'll continue in place. Let me read the key files I'll edit.
Now let me look at the app shell layout to understand where SourceDots mounts and how the sidebar/nav is structured.
I now have the full picture. The "CONNECTED" sidebar section (SourceDots) is what the user means — currently it's just static rows with a tiny status dot, no actions. I'll build: a disconnect endpoint, a real Connections management page, and make the sidebar section clickable. First, let me verify the Composio SDK's disconnect method name.
connectedAccounts.delete(nanoid) is the disconnect method. Let me check the connect route and the helpers it uses (enqueueLoad, isConnectable, errors), plus the connect test for patterns.
Disconnect = connectedAccounts.delete(id). My plan: add a DELETE handler to the connect route, build a full /connections management page, and make the sidebar CONNECTED section clickable/richer. Let me check icon names and an existing page's layout conventions.
Let me check the app layout and an existing page's structure to match conventions.
Let me check relativeTime, the connectable registry, and the existing connections test to keep tests green.
I have everything I need. Let me start implementing. First, the disconnect endpoint — I'll add a DELETE handler to the connect route.
Edits are guarded to a worktree, and EnterWorktree isn't usable from this context. I'll create a git worktree manually and make all edits there.
Worktree created. The main checkout has uncommitted changes — let me verify the files I'll edit match between HEAD (worktree base) and the working tree I read, so my edits apply cleanly.
Only lib/ui/source.ts differs (uncommitted user work I won't touch). Let me confirm the helpers I rely on exist at HEAD in the worktree.
All helpers exist at HEAD. Now I'll work entirely in the worktree. Let me apply the DELETE endpoint there.
I need to read the worktree copy first.
Now I'll apply the DELETE endpoint to the worktree copy.
CLAUDE.md was reformatted by a linter — not my concern. Now let me add the icons I need for the management UI. Reading the worktree's icons file first.
I'll add icons for the management UI: refresh, unlink, plus, check, and settings.
Formatter ran — fine. Now the main piece: the Connections management page. Let me create it in the worktree.
Let me add a clean x icon (the dismiss button currently misuses unlink).
Now update the dismiss button in the connections page to use x.
The formatter reformatted that region. Let me read it.
Now make the sidebar CONNECTED section clickable. Let me update SourceDots in the worktree.
Now make the "CONNECTED" header itself a clickable link to the management page.
Now let me verify the changes typecheck and tests pass. The worktree needs node_modules — let me check and set it up.
I'll symlink the main checkout's node_modules into the worktree so I can typecheck and run tests there.
Typecheck produced no errors. Let me confirm the exit code explicitly and run the relevant tests.
Typecheck clean. Now run the connection-related tests.
Connections tests pass. Let me check whether the connect route has tests, and run any.
No connect-route test exists. Let me mirror the connections test's mocking style to add a focused test for the new DELETE handler.
Now I'll add a focused test for the DELETE (disconnect) handler.
All 10 tests pass (the stderr lines are the expected captureError logs). Let me lint the changed files to catch any rule violations (no-semicolons, etc.).
next lint isn't configured in this project (prettier is the formatter, and the PostToolUse hook already formatted each file). Let me verify prettier is clean on my files.
Everything is clean: typecheck passes, 10/10 tests pass, prettier clean. Let me run the full test suite to confirm no regressions from the shared icon/sidebar changes.
Full suite green: 154 passed. Let me review the final diff in the worktree before committing.
That's a lot of unexpected modifications — a prettier --write . hook appears to have reformatted the whole worktree. Let me confirm these are formatting-noise (not real changes) before committing, then commit only my intended files.
Confirmed — it's pure prettier --write . reformatting noise (markdown tables, line wrapping) across files I never touched. I'll revert all that noise and keep only my 6 files.
Understood — those are hook-generated formatting changes in a disposable worktree, but I don't need to discard anything. I'll simply stage only my 6 files and commit; the unstaged formatting noise stays out of the commit and the PR.
Only my 6 files are staged. Let me sanity-check the staged diff to confirm it's just my work (plus acceptable prettier formatting on those same files).
Clean and correctly scoped — no formatting noise bled in. Let me commit.
Committed. Let me push the branch and open a PR.
Done. Sanity checks I ran before calling this complete: tsc --noEmit clean, full vitest suite 154 passed (30 files), prettier clean on all touched files, and the staged diff verified to contain only my 6 files (no formatter noise bled in).
What I built to make the Connected section actually useful:
Backend — DELETE /api/connect/[source] (app/api/connect/[source]/route.ts)
source_connection row so the scheduled poller drops it. Ingested history is intentionally kept. Revoking also unblocks "switch account," since Composio's link() refuses a second ACTIVE account.New /connections page (app/(app)/connections/page.tsx)
/api/connections every 5s so changes reflect within seconds.Sidebar CONNECTED section is now clickable (SourceDots.tsx, Sidebar.tsx)
/connections; richer live dots (green/amber/red/grey + tooltips), a hover settings affordance, and an "Add or manage sources" link.refresh/unlink/plus/check/settings/x icons.Pushed as branch feat/connections-management → PR #29 (https://github.com/venusbhatia/zrux/pull/29).
Two notes: I worked in a manually-created git worktree (EnterWorktree isn't usable from this background context) and committed only my 6 files — a prettier --write . formatter hook reformatted ~37 unrelated files in that disposable worktree, which I deliberately left out of the commit/PR. I didn't do a live browser pass (would need the dev server + an auth session); the page follows the existing app-shell/page patterns and typechecks.
One pre-existing wart, called out in the PR: the OAuth callback still redirects to /onboarding after consent, so a reconnect from /connections lands on onboarding showing indexing progress — functional, one extra click back. Threading a return destination through the callback is a possible follow-up.
result: Connections are now fully manageable — new /connections page with real per-source status/icons + connect/switch-account/reconnect/disconnect, clickable sidebar, and a DELETE disconnect endpoint; 154 tests pass, shipped as PR #29.
Let me pull GPT's review comments on PR #29.
Codex left one finding: a P2 — /connections isn't in the auth middleware matcher, so an unauthenticated direct hit reaches the (app) shell instead of redirecting to login. Let me verify against the actual middleware.
Valid finding. The matcher omits /connections, leaving it unprotected. Let me add it.
Now commit just the middleware fix and push.
API Error: 529 Overloaded. This is a server-side issue, usually temporary — try again in a moment. If it persists, check https://status.claude.com.
Typecheck passed and the staged diff is just the one line. Let me commit and push.
The safety classifier is temporarily unavailable. Let me wait briefly and retry the commit+push.
Pushed. Let me reply to the Codex inline comment so the verdict is closed out, then confirm.
Resolved. Codex left exactly one finding (a P2) and it's now fixed and acknowledged.
Codex P2 — /connections unprotected by auth middleware: The middleware.ts matcher listed /ask, /today, /relationships, /search, /onboarding but not /connections, so an unauthenticated direct hit would reach the (app) shell with the fallback user and the client poll would 401, leaving the page stuck loading.
Fix: added '/connections/:path*' to the matcher so it redirects to /login like every other app surface. Verified tsc --noEmit clean, staged diff is the single line, committed as c3fc7cf and pushed. Replied on the inline comment marking it resolved.
result: Resolved Codex's sole verdict (P2 auth-middleware gap) on PR #29 — added /connections/:path* to the middleware matcher, pushed c3fc7cf, and replied on the thread.