Update connection status handling across components and schemas #1971
Conversation
WalkthroughRemoved forced "active" on connection creation, made create-schema Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Browser as Browser UI
participant MCP as MCP (tools & auth)
participant API as Mesh API (routes/storage)
participant DB as Database
User->>Browser: Create or edit app/connection
Browser->>MCP: Read tools list & auth state
alt MCP has tools and auth state is valid and connection is inactive
Browser->>API: PATCH connection with draft.status="active"
API->>DB: update connection row (status = "active")
DB-->>API: success
API-->>Browser: success (show toast)
else OAuth required or oauth_config present
Browser->>API: create/extract connection (compute status = "inactive")
API->>DB: insert connection row (status omitted or inactive)
DB-->>API: success
API-->>Browser: success
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Deploying decocms-admin-frontend with
|
| Latest commit: |
e734361
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://38142dba.admin-decocms-frontend.pages.dev |
| Branch Preview URL: | https://fix-status-mcp.admin-decocms-frontend.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/mesh/src/web/components/details/connection.tsx (1)
707-721: Fix formatting of status update block to satisfy biome fmt and keep style consistentThe new
CONNECTIONS_COLLECTION.updateblock is correctly settingstatusto"active", but its indentation and brace/semicolon style are what biome fmt is flagging (pipeline error at lines 716‑721). Reformat this block (or runbun run fmt) so it matches the rest of the file:- const tx = CONNECTIONS_COLLECTION.update(connection.id, (draft) => { - draft.status = "active"; - }) - await tx.isPersisted.promise; - + const tx = CONNECTIONS_COLLECTION.update(connection.id, (draft) => { + draft.status = "active"; + }); + await tx.isPersisted.promise;This should clear the formatter failure while preserving the intended behavior.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/mesh/src/storage/connection.ts(0 hunks)apps/mesh/src/tools/connection/schema.ts(1 hunks)apps/mesh/src/web/components/details/connection.tsx(2 hunks)apps/mesh/src/web/routes/orgs/store-app-detail.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- apps/mesh/src/storage/connection.ts
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/data-flow.mdc)
Handle loading and error states appropriately when using React Query hooks in components
Files:
apps/mesh/src/web/components/details/connection.tsxapps/mesh/src/web/routes/orgs/store-app-detail.tsx
**/*.{ts,tsx,js,jsx,css}
📄 CodeRabbit inference engine (.cursor/rules/structure.mdc)
Run formatting with
bun run fmtbefore opening pull requestsKeep Tailwind design tokens consistent per
plugins/ensure-tailwind-design-system-tokens.tswhich will fail builds otherwise
Files:
apps/mesh/src/web/components/details/connection.tsxapps/mesh/src/web/routes/orgs/store-app-detail.tsxapps/mesh/src/tools/connection/schema.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/structure.mdc)
Run type checking with
bun run checkbefore opening pull requestsFavor TypeScript types over
anykeyword
**/*.{ts,tsx}: Write concise, maintainable, and technically accurate TypeScript code with relevant examples
Use functional and declarative programming patterns; avoid classes
Favor iteration and modularization to adhere to DRY principles and avoid code duplication
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Organize files systematically: each file should contain only related content, such as exported components, subcomponents, helpers, static content, and types
Favor named exports for functions
Use TypeScript for all code
Prefer interfaces over types for their extendability and ability to merge
Avoid enums; use maps instead for better type safety and flexibility
Use the "function" keyword for pure functions to benefit from hoisting and clarity
Files:
apps/mesh/src/web/components/details/connection.tsxapps/mesh/src/web/routes/orgs/store-app-detail.tsxapps/mesh/src/tools/connection/schema.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/structure.mdc)
Run linting with
bun run lintbefore opening pull requests
**/*.{ts,tsx,js,jsx}: Use PascalCase for component and class names
Use camelCase for hooks and utility function names
Files:
apps/mesh/src/web/components/details/connection.tsxapps/mesh/src/web/routes/orgs/store-app-detail.tsxapps/mesh/src/tools/connection/schema.ts
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Keep imports sorted in all code files
Files:
apps/mesh/src/web/components/details/connection.tsxapps/mesh/src/web/routes/orgs/store-app-detail.tsxapps/mesh/src/tools/connection/schema.ts
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react-ts.mdc)
**/*.tsx: Use functional components with TypeScript interfaces
Favor using the already-present ui components inpackages/uifolder instead of creating custom components
Use useMemo for expensive computations like filtering and sorting operations to optimize performance in data-intensive applications
Memoize objects and arrays using useMemo to maintain stable references across renders
Use useDeferredValue for search operations to prevent blocking user input during filtering
Follow MCP (Model Context Protocol) patterns for consistent data fetching with hooks like useAgents, useIntegrations, and useUpdateAgent
Use react-hook-form with Zod validation instead of manual useState for form management
Avoid prop drilling by using Form Context to share form state across components
Use design system Form components (Form, FormControl, FormField, FormItem, FormLabel, FormMessage) from @deco/ui with proper error handling
Apply Single Responsibility Principle to components: each component should have a focused purpose and be composable
Ensure dependency arrays contain stable references; avoid creating inline objects or arrays that cause unnecessary re-renders
Implement consistent error and loading state handling with proper UI feedback (loading spinners, error messages, empty states)
Apply changes immediately to DOM for instant visual feedback, then debounce state updates for features like theme editors and live previews
Use custom events dispatched via window.dispatchEvent and window.addEventListener for cross-component communication of state updates
Implement single-level undo that reverts to the saved state, not just the previous change; use refs to track original saved values
Use useSetThreadContextEffect to inject rules and toolsets into AI chat threads; use explicit union types for context items
Extract complex logic from JSX into separate components instead of using IIFEs (immediately invoked function expressions)
Files:
apps/mesh/src/web/components/details/connection.tsxapps/mesh/src/web/routes/orgs/store-app-detail.tsx
**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/api-development.mdc)
Define both input and output Zod schemas for all API operations with appropriate type constraints (min/max length, optional fields, descriptions) and map them to TypeScript interfaces
Files:
apps/mesh/src/tools/connection/schema.ts
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
Repo: decocms/admin PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-01T21:10:09.298Z
Learning: Include succinct summary, testing notes, and relevant screenshots for UI changes in pull request descriptions
📚 Learning: 2025-12-01T21:08:08.813Z
Learnt from: CR
Repo: decocms/admin PR: 0
File: .cursor/rules/deconfig.mdc:0-0
Timestamp: 2025-12-01T21:08:08.813Z
Learning: Applies to packages/sdk/src/mcp/deconfig/**/*.ts : Implement modular composition where merge() reuses diff() + transactionalWrite(), and transactionalWrite() has internal method for different scenarios to ensure code reuse and consistency
Applied to files:
apps/mesh/src/web/components/details/connection.tsx
📚 Learning: 2025-12-01T21:08:08.813Z
Learnt from: CR
Repo: decocms/admin PR: 0
File: .cursor/rules/deconfig.mdc:0-0
Timestamp: 2025-12-01T21:08:08.813Z
Learning: Applies to packages/sdk/src/mcp/deconfig/**/*.ts : Namespace Durable Object must maintain SQLite state with two tables: namespace_state (current tree state and metadata) and patches (historical changes with delta-based storage)
Applied to files:
apps/mesh/src/web/components/details/connection.tsx
🧬 Code graph analysis (2)
apps/mesh/src/web/components/details/connection.tsx (1)
apps/mesh/src/web/hooks/collections/use-connection.ts (1)
CONNECTIONS_COLLECTION(20-24)
apps/mesh/src/web/routes/orgs/store-app-detail.tsx (1)
packages/ai/src/tools.ts (1)
tools(872-881)
🪛 GitHub Actions: Tests
apps/mesh/src/web/components/details/connection.tsx
[error] 716-721: Formatter would have printed different content. Code formatting issues detected by biome fmt:check.
apps/mesh/src/web/routes/orgs/store-app-detail.tsx
[error] 98-105: Formatter would have printed different content. Code formatting issues detected by biome fmt:check.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (2)
apps/mesh/src/tools/connection/schema.ts (1)
103-124: Status now optional on create data looks consistent with new flowsMaking
statusoptional inConnectionCreateDataSchema.partial({ status: true, ... })aligns with the PR’s intent to compute/set status in specific flows instead of always forcing"active"at creation. Just double‑check all connection creation paths either pass an explicit status when needed or apply a sensible default server‑side whenstatusis omitted.apps/mesh/src/web/components/details/connection.tsx (1)
214-221: Marking connection active after successful OAuth is appropriateUpdating
draft.status = "active"in the OAuth completion path is consistent with treating successful token acquisition as an activation event and matches the new status semantics across the PR.
| // Check if MCP needs OAuth by looking for DECO_CHAT_OAUTH_START tool | ||
| const tools = publisherMeta?.tools as Array<{ name: string }> | null | undefined; | ||
| const needsOAuth = tools?.some((tool) => tool.name === "DECO_CHAT_OAUTH_START") ?? false; | ||
|
|
||
| // Status: inactive if needs OAuth or has config state to fill | ||
| const status = needsOAuth || oauthConfig || configState ? "inactive" : "active"; | ||
|
|
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's look at the file and the specific lines mentioned
head -150 apps/mesh/src/web/routes/orgs/store-app-detail.tsx | tail -60Repository: decocms/admin
Length of output: 1999
🏁 Script executed:
# Get the full context around lines 99-105 and 135
cat -n apps/mesh/src/web/routes/orgs/store-app-detail.tsx | sed -n '85,145p'Repository: decocms/admin
Length of output: 2532
🏁 Script executed:
# Check if there's a biome configuration
fd -e json -e toml | grep -E "(biome|\.biomerc)" | head -5Repository: decocms/admin
Length of output: 67
🏁 Script executed:
# Look for variable declarations of oauthConfig and configState
rg -n "oauthConfig|configState" apps/mesh/src/web/routes/orgs/store-app-detail.tsx | head -20Repository: decocms/admin
Length of output: 334
🏁 Script executed:
# Read the biome.json to understand formatting rules
cat biome.json | head -100Repository: decocms/admin
Length of output: 688
🏁 Script executed:
# Check line lengths of the problematic lines
cat -n apps/mesh/src/web/routes/orgs/store-app-detail.tsx | sed -n '99,104p' | awk '{print length($0) " chars: " $0}'Repository: decocms/admin
Length of output: 554
🏁 Script executed:
# Let's also check the exact function signature to understand the return type
rg -B 10 "Check if MCP needs OAuth" apps/mesh/src/web/routes/orgs/store-app-detail.tsx | head -30Repository: decocms/admin
Length of output: 349
🏁 Script executed:
# Check if biome would actually format these lines
# First, let's see the entire function to understand its return type
rg -A 50 "Check if MCP needs OAuth" apps/mesh/src/web/routes/orgs/store-app-detail.tsx | head -60Repository: decocms/admin
Length of output: 1788
🏁 Script executed:
# Let's look at the function signature/return type
cat -n apps/mesh/src/web/routes/orgs/store-app-detail.tsx | sed -n '50,110p'Repository: decocms/admin
Length of output: 2307
🏁 Script executed:
# Find the function signature
cat -n apps/mesh/src/web/routes/orgs/store-app-detail.tsx | sed -n '1,60p'Repository: decocms/admin
Length of output: 2758
🏁 Script executed:
# Search for the function definition that contains this code
rg -B 30 "Check if MCP needs OAuth" apps/mesh/src/web/routes/orgs/store-app-detail.tsx | head -50Repository: decocms/admin
Length of output: 1041
🏁 Script executed:
# Look for the complete function signature with return type
cat -n apps/mesh/src/web/routes/orgs/store-app-detail.tsx | sed -n '31,140p' | grep -A 120 "function extractConnectionData"Repository: decocms/admin
Length of output: 4141
🏁 Script executed:
# Check if there's a TypeScript return type annotation or if it's inferred
ast-grep --pattern 'function extractConnectionData($_) {
$$$
}'Repository: decocms/admin
Length of output: 39
🏁 Script executed:
# Verify the exact return type that TypeScript infers
# Check if there are any type definitions or interfaces used
rg -n "interface|type" apps/mesh/src/web/routes/orgs/store-app-detail.tsx | head -20Repository: decocms/admin
Length of output: 734
🏁 Script executed:
# Check the broader context to see if this function's return type is defined elsewhere
rg -B 5 "extractConnectionData" apps/mesh/src/web/routes/orgs/store-app-detail.tsx | head -40Repository: decocms/admin
Length of output: 469
Add explicit type annotation to status to eliminate the unnecessary cast at line 135
The status variable should be explicitly typed as "inactive" | "active". This allows TypeScript to properly infer the type and removes the need for the cast at line 135. Additionally, several variable declarations on lines 99–104 exceed the default line length and should be split across multiple lines per your formatter configuration:
- // Check if MCP needs OAuth by looking for DECO_CHAT_OAUTH_START tool
- const tools = publisherMeta?.tools as Array<{ name: string }> | null | undefined;
- const needsOAuth = tools?.some((tool) => tool.name === "DECO_CHAT_OAUTH_START") ?? false;
-
- // Status: inactive if needs OAuth or has config state to fill
- const status = needsOAuth || oauthConfig || configState ? "inactive" : "active";
+ // Check if MCP needs OAuth by looking for DECO_CHAT_OAUTH_START tool
+ const tools =
+ publisherMeta?.tools as Array<{ name: string }> | null | undefined;
+ const needsOAuth =
+ tools?.some((tool) => tool.name === "DECO_CHAT_OAUTH_START") ?? false;
+
+ // Status: inactive if needs OAuth or has config state to fill
+ const status: "inactive" | "active" =
+ needsOAuth || oauthConfig || configState ? "inactive" : "active";Then at line 135, remove the type cast:
- status: status as "inactive" | "active",
+ status,Run bun run fmt to ensure consistent formatting across the file.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // Check if MCP needs OAuth by looking for DECO_CHAT_OAUTH_START tool | |
| const tools = publisherMeta?.tools as Array<{ name: string }> | null | undefined; | |
| const needsOAuth = tools?.some((tool) => tool.name === "DECO_CHAT_OAUTH_START") ?? false; | |
| // Status: inactive if needs OAuth or has config state to fill | |
| const status = needsOAuth || oauthConfig || configState ? "inactive" : "active"; | |
| // Check if MCP needs OAuth by looking for DECO_CHAT_OAUTH_START tool | |
| const tools = | |
| publisherMeta?.tools as Array<{ name: string }> | null | undefined; | |
| const needsOAuth = | |
| tools?.some((tool) => tool.name === "DECO_CHAT_OAUTH_START") ?? false; | |
| // Status: inactive if needs OAuth or has config state to fill | |
| const status: "inactive" | "active" = | |
| needsOAuth || oauthConfig || configState ? "inactive" : "active"; |
🧰 Tools
🪛 GitHub Actions: Tests
[error] 98-105: Formatter would have printed different content. Code formatting issues detected by biome fmt:check.
🤖 Prompt for AI Agents
In apps/mesh/src/web/routes/orgs/store-app-detail.tsx around lines 99–105, the
inferred type of status is too broad and requires a later cast; explicitly
annotate status as the union type "inactive" | "active" (e.g. const status:
"inactive" | "active" = ...), split the long variable declarations on lines
99–104 across multiple lines to satisfy the formatter line-length rules, then
remove the unnecessary cast at line 135, and finally run bun run fmt to apply
consistent formatting.
…tore-app-detail.tsx; format error handling in autoJoinTeam function for consistency in api.ts
…nal chaining to user.email
What is this contribution about?
Screenshots/Demonstration
Update mcp status - Watch Video
Review Checklist
Summary by CodeRabbit
New Features
Bug Fixes
✏️ Tip: You can customize this high-level summary in your review settings.