improvement(platform): consolidate organization integrations

Author: emir-karabeg

.agents/skills/implement-platform/SKILL.md

@@ -10,7 +10,7 @@ Start in the Sim checkout containing the requested product work. Read the [Platf
 1. **Establish scope on the real route.** Identify the product entry, interaction, phase, and affected consumers. When rebuilding an existing workflow, trace the old navigation target, its access gate, and the actions reachable by that viewer. Use that evidence to decide which controls belong on the new page before consulting the broader API or provider catalog. Phase 1 owns foundations and the library. Phase 2 owns working UI and transient interaction state, with examples supplied through the server fixture flag. Phase 3 connects real data and operations. Reuse the same renderer in the browser and Sim Desktop. Read the installed Next guides for the file structure or framework behavior you are changing.
    For organization Settings, inventory the old sidebar in order, its viewer/deployment gates and every action reachable from each section. Map old header buttons to the row or section they act on. Verify the same destination and drilldown on the fixture and authenticated routes; keep real writes outside fixture sessions.
 2. **Resolve design intent.** For Paper-backed work, use `$sim-paper-design` to locate the live Shared or Platform master and the product states that use it. Exclude Marcus. Preserve the key and theme roles. Treat artboard sizes as reference measurements. For code-first changes, follow the latest explicit product direction and inspect the rendered route. Identify any source you could not verify. Update the Paper canvas when the request includes Paper changes.
-3. **Choose or change the owner.** Start with the behavior. An action, navigation row, value picker, or disclosure has an existing keyboard and pointer contract. Different interactions may share visual roles while retaining different semantics. Use the existing family and named props for a change in size, intent, icon, or content. Put unique anatomy and its CSS beside the route component. Keep page files free of styling. Only EMCN owns the appearance of its controls. Use Base UI there for complex keyboard, floating, and dismissal behavior.
-4. **Trace the full change.** On a second independent feature use, promote the original implementation and migrate both callers. For consolidation, compare semantics, map every consumer to its replacement, then remove the obsolete implementation, export, variant styles, and unused registrations. For deletion, also check menus, preferences, fixture data, workbench references, and tests that existed only for the removed feature. Preserve unrelated consumers and historical Paper evidence. A new variant needs a reachable product use. Edit the source or compiler for generated foundations and recipes.
+3. **Choose or change the owner.** Start with the behavior. An action, navigation row, value picker, or disclosure has an existing keyboard and pointer contract. Different interactions may share visual roles while retaining different semantics. Use the existing family and named props for a change in size, intent, icon, or content. Toolbar choices use ChoiceMenu, as Home's period does; Select/SelectField belong to forms and settings. Compare the rendered trigger, not just its variant name. Put unique anatomy and its CSS together in `_components/<component>/<component>.tsx` and `<component>.module.css`. Match an existing semantic rhythm, such as Home's ActivityRow, for a custom composition. Keep page files free of styling. Only EMCN owns the appearance of its controls. Use Base UI there for complex keyboard, floating, and dismissal behavior.
+4. **Trace the full change.** On a second independent feature use, promote the original implementation and migrate both callers. For consolidation, compare semantics, map every consumer to its replacement, then remove the obsolete implementation, export, variant styles, and unused registrations. For deletion, also check menus, preferences, fixture data, workbench references, and tests that existed only for the removed feature. Preserve unrelated consumers and historical Paper evidence. Before adding a shared visual variant, name at least two independent real consumers. A single feature composes the existing primitives in its local owner; a label, icon, data value or responsive arrangement does not justify another variant. Keep the public API small enough to understand at the call site. Edit the source or compiler for generated foundations and recipes.
 5. **Verify where people use it.** Run the design audit and applicable checks from the README. Render the changed product route with empty, full, stress, and fixture-off data as relevant. Check both themes, widths between artboards, long content, text scaling, keyboard, and pointer states. Compare shared controls in their actual consumers. Check the actual scroll edge and the open popup when space is tight. For shell, panel, or desktop work, exercise the real Electron renderer. For substantial implementations and consolidations, use an independent agent during design or implementation and for a final review of the changed owners and routes. Provide the working localhost route for visual review.
 6. **Keep decisions durable.** Follow the contract’s maintenance guidance when an approved correction changes a shared rule. Record feature-specific decisions with their feature. For sustained work, keep a task checkpoint with the code revision, verified states, evidence, and outstanding work. Include the branch or PR, checkpoint path, and localhost route in a handoff. On resumption, compare the checkpoint with the current branch, working tree, and relevant live sources before acting.

apps/sim/app/workspace/[workspaceId]/components/integration-tabs-header/integration-tabs-header.tsx

@@ -3,6 +3,8 @@
 import type { ReactNode } from 'react'
 import { ChipLink, cn } from '@sim/emcn'
 import { HEADER_ACTION_CLUSTER, PAGE_HEADER_BAR } from '@/components/page-header-bar'
+import { workspaceIntegrationsPath } from '@/lib/navigation/paths'
+import { useWorkspaceHostContext } from '@/app/workspace/[workspaceId]/providers/workspace-host-provider'
 
 interface IntegrationTabsHeaderProps {
   active: 'integrations' | 'skills'
@@ -17,9 +19,13 @@ export function IntegrationTabsHeader({
   workspaceId,
   rightSlot,
 }: IntegrationTabsHeaderProps) {
+  const host = useWorkspaceHostContext()
   return (
     <div className={cn(PAGE_HEADER_BAR, 'gap-1')}>
-      <ChipLink href={`/workspace/${workspaceId}/integrations`} active={active === 'integrations'}>
+      <ChipLink
+        href={workspaceIntegrationsPath(workspaceId, host)}
+        active={active === 'integrations'}
+      >
         Integrations
       </ChipLink>
       <ChipLink href={`/workspace/${workspaceId}/skills`} active={active === 'skills'}>

apps/sim/app/workspace/[workspaceId]/integrations/integrations.tsx

@@ -12,7 +12,7 @@ import {
   Search,
 } from '@sim/emcn'
 import { Lock } from '@sim/emcn/icons'
-import { useParams } from 'next/navigation'
+import { redirect, useParams } from 'next/navigation'
 import { useQueryStates } from 'nuqs'
 import {
   blockTypeToIconMap,
@@ -22,6 +22,7 @@ import {
   resolveCredentialDisplay,
 } from '@/lib/integrations'
 import { isIntegrationPermitted } from '@/lib/integrations/access'
+import { workspaceIntegrationsPath } from '@/lib/navigation/paths'
 import { IntegrationTabsHeader } from '@/app/workspace/[workspaceId]/components/integration-tabs-header'
 import { IntegrationSection } from '@/app/workspace/[workspaceId]/integrations/components/integration-section'
 import { IntegrationTile } from '@/app/workspace/[workspaceId]/integrations/components/integrations-showcase'
@@ -34,6 +35,7 @@ import {
   integrationsParsers,
   integrationsUrlKeys,
 } from '@/app/workspace/[workspaceId]/integrations/search-params'
+import { useWorkspaceHostContext } from '@/app/workspace/[workspaceId]/providers/workspace-host-provider'
 import {
   SettingsEmptyState,
   SettingsQueryErrorState,
@@ -159,6 +161,10 @@ function ConnectedItem({ href, blockType, name, description, icon: Icon }: Conne
 }
 
 export function Integrations() {
+  const host = useWorkspaceHostContext()
+  const workspaceId = host.workspace.id
+  const destination = workspaceIntegrationsPath(workspaceId, host)
+  if (destination !== `/workspace/${workspaceId}/integrations`) redirect(destination)
   return (
     <PermissionAccessBoundary configKey='hideIntegrationsTab'>
       <IntegrationsContent />

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx

@@ -45,11 +45,13 @@ import { useDeploymentShape } from '@/lib/core/config/deployment-shape'
 import { MothershipHandoffStorage } from '@/lib/core/utils/browser-storage'
 import { getFolderPathNames } from '@/lib/folders/tree'
 import { sendMothershipMessage } from '@/lib/mothership/events'
+import { workspaceIntegrationsPath } from '@/lib/navigation/paths'
 import { captureEvent } from '@/lib/posthog/client'
 import { toSearchToken } from '@/lib/search/tokens'
 import { hasTriggerCapability } from '@/lib/workflows/triggers/utils'
 import { parseWorkspaceFileFolderDisplayPath } from '@/lib/workspace-files/folder-display-path'
 import { useInvokeGlobalCommand } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
+import { useWorkspaceHostContext } from '@/app/workspace/[workspaceId]/providers/workspace-host-provider'
 import {
   CommandFadedList,
   CommandSearch,
@@ -157,6 +159,8 @@ function SearchModalContent({
   const router = useRouter()
   const { chatEnabled } = useDeploymentShape()
   const workspaceId = params.workspaceId as string
+  const host = useWorkspaceHostContext()
+  const integrationsHref = workspaceIntegrationsPath(workspaceId, host)
   const currentWorkflowId = params.workflowId as string | undefined
   const inputRef = useRef<HTMLInputElement>(null)
   const listRef = useRef<HTMLDivElement>(null)
@@ -249,7 +253,7 @@ function SearchModalContent({
           id: 'integrations',
           name: 'Integrations',
           icon: Integration,
-          href: `/workspace/${workspaceId}/integrations`,
+          href: integrationsHref,
           hidden:
             permissionConfig.hideIntegrationsTab &&
             !requestableFeatureKeys.has('hideIntegrationsTab'),
@@ -318,6 +322,7 @@ function SearchModalContent({
       permissionConfig.hideTablesTab,
       permissionConfig.hideFilesTab,
       permissionConfig.hideIntegrationsTab,
+      integrationsHref,
       requestableFeatureKeys,
     ]
   )

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -54,6 +54,7 @@ import { buildFolderTree, getFolderPathNames } from '@/lib/folders/tree'
 import { DOCS_URL, SLACK_COMMUNITY_URL } from '@/lib/help-links'
 import { isIntegrationUsable } from '@/lib/integrations/access'
 import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/mothership/resource-types'
+import { workspaceIntegrationsPath } from '@/lib/navigation/paths'
 import { captureEvent } from '@/lib/posthog/client'
 import { LOGO_ACCEPT_ATTRIBUTE } from '@/lib/uploads/client/logo-file'
 import { useSidebarChrome } from '@/app/workspace/[workspaceId]/components/workspace-chrome'
@@ -415,6 +416,7 @@ export const Sidebar = memo(function Sidebar({ organizationHref, desktopExecutor
   const { data: sessionData, isPending: sessionLoading } = useSession()
   const { data: profile } = useUserProfile()
   const hostContext = useWorkspaceHostContext()
+  const integrationsHref = workspaceIntegrationsPath(workspaceId, hostContext)
   const { workspace: routeWorkspace } = hostContext
   const { hosted, chatEnabled } = useDeploymentShape()
   const { canAdmin, canEdit, isLoading: permissionsLoading } = useUserPermissionsContext()
@@ -798,7 +800,7 @@ export const Sidebar = memo(function Sidebar({ organizationHref, desktopExecutor
           id: 'integrations',
           label: 'Integrations',
           icon: Integration,
-          href: `/workspace/${workspaceId}/integrations`,
+          href: integrationsHref,
           additionalActivePaths: [`/workspace/${workspaceId}/skills`],
           hidden:
             permissionConfig.hideIntegrationsTab &&
@@ -812,6 +814,7 @@ export const Sidebar = memo(function Sidebar({ organizationHref, desktopExecutor
       canEdit,
       permissionsLoading,
       permissionConfig.hideIntegrationsTab,
+      integrationsHref,
       permissionConfig.hideCopilot,
       permissionConfig.hideFilesTab,
       requestableFeatureKeys,

apps/sim/lib/navigation/paths.ts

@@ -59,6 +59,21 @@ export function organizationRoutes(organizationId: string) {
   } as const
 }
 
+interface WorkspaceIntegrationContext {
+  hostOrganizationId: string | null
+  features?: { organizationSearch?: boolean }
+}
+
+/** Organization members use the center; standalone workspaces retain their credential routes. */
+export function workspaceIntegrationsPath(
+  workspaceId: string,
+  context: WorkspaceIntegrationContext | null
+) {
+  return context?.features?.organizationSearch && context.hostOrganizationId
+    ? organizationRoutes(context.hostOrganizationId).integrations
+    : `/workspace/${workspaceId}/integrations`
+}
+
 /** Where `sim/<name>/<values…>` resolves in this app: the address a member types, kept verbatim. */
 export function simLinkPath(...segments: string[]): string {
   return ['/sim', ...segments.map(encodeURIComponent)].join('/')