refactor stitch UI to get related objects

apps/api/src/modules/stitches/metadata-discovery.service.ts

@@ -22,6 +22,8 @@ import type { OAuthCredentialBlob } from '@nexiom/connectors';
 import type {
   ObjectDescriptor,
   FieldDescriptor,
+  ConfigOption,
+  RelatedObjectDescriptor,
 } from '@nexiom/piece-framework';
 
 // Single source of truth for metadata cache TTL.
@@ -298,6 +300,95 @@ export class MetadataDiscoveryService implements OnModuleInit {
     return fields;
   }
 
+  async describeRelatedObjects(
+    orgId: string,
+    connectionId: string,
+    objectName: string,
+  ): Promise<RelatedObjectDescriptor[]> {
+    const connection = await this.resolveConnection(orgId, connectionId);
+
+    // ── 1. Redis cache ───────────────────────────────────────────────────────
+    const redisKey = `meta:related:${connectionId}:${objectName}`;
+    const cached = await this.redis.get(redisKey);
+    if (cached) {
+      return JSON.parse(cached) as RelatedObjectDescriptor[];
+    }
+
+    // ── 2. Live fetch (piece) ───────────────────────────────
+    const piece = this.pieceRegistry.getPiece(connection.appName);
+    if (!piece?.describeRelatedObjects) {
+      return [];
+    }
+
+    const credentials = await this.resolveCredentials(connectionId);
+
+    let related: RelatedObjectDescriptor[] = [];
+    try {
+      related = await piece.describeRelatedObjects(credentials, objectName);
+      await this.redis.set(
+        redisKey,
+        JSON.stringify(related),
+        'EX',
+        TTL_SECONDS,
+      );
+    } catch (e) {
+      this.logger.warn(
+        `Connector ${connection.appName} failed to describe related objects: ${String(e)}`,
+      );
+    }
+    return related;
+  }
+
+  async describeConfig(
+    orgId: string,
+    connectionId: string,
+  ): Promise<ConfigOption[]> {
+    const connection = await this.resolveConnection(orgId, connectionId);
+
+    // ── 1. Redis cache ───────────────────────────────────────────────────────
+    const redisKey = `meta:config:${connectionId}`;
+    const cached = await this.redis.get(redisKey);
+    if (cached) {
+      return JSON.parse(cached) as ConfigOption[];
+    }
+
+    // ── 2. Live fetch ───────────────────────────────
+    const piece = this.pieceRegistry.getPiece(connection.appName);
+    if (!piece) {
+      throw new NotFoundException(
+        `Connector "${connection.appName}" not found.`,
+      );
+    }
+
+    const credentials = await this.resolveCredentials(connectionId);
+
+    let config: ConfigOption[] = [];
+    if (piece.describeConfig) {
+      try {
+        config = await piece.describeConfig(credentials);
+      } catch (e) {
+        this.logger.warn(
+          `Connector ${connection.appName} failed to describe config: ${String(e)}`,
+        );
+        return config; // Return empty on describe failure
+      }
+      try {
+        await this.redis.set(
+          redisKey,
+          JSON.stringify(config),
+          'EX',
+          TTL_SECONDS,
+        );
+      } catch (e) {
+        this.logger.warn(
+          `Failed to cache config for ${connection.appName}: ${String(e)}`,
+        );
+      }
+    }
+
+    return config;
+  }
+
   // ---------------------------------------------------------------------------
   // Private helpers
   // ---------------------------------------------------------------------------

apps/api/src/modules/stitches/metadata.controller.ts

@@ -20,6 +20,14 @@ import {
 import { MetadataDiscoveryService } from './metadata-discovery.service.js';
 import { requireOrgId } from '../workspaces/workspace.utils.js';
 
+function validateObjectName(objectName: string) {
+  if (!/^[\w]{1,255}$/.test(objectName)) {
+    throw new BadRequestException(
+      'objectName must be 1-255 alphanumeric/underscore characters.',
+    );
+  }
+}
+
 @UseGuards(AuthGuard, PermissionsGuard)
 @Controller('stitches/metadata')
 export class MetadataController {
@@ -51,15 +59,38 @@ export class MetadataController {
   ) {
     // Restrict to safe characters: vendor object names are alphanumeric + underscore.
     // Prevents Redis key injection and ensures URL-safe values.
-    if (!/^[\w]{1,255}$/.test(objectName)) {
-      throw new BadRequestException(
-        'objectName must be 1-255 alphanumeric/underscore characters.',
-      );
-    }
+    validateObjectName(objectName);
     return this.metadataDiscovery.describeFields(
       requireOrgId(auth),
       connectionId,
       objectName,
     );
   }
+
+  @Get(':connectionId/objects/:objectName/related')
+  @RequirePermission('stitches', 'read')
+  describeRelatedObjects(
+    @AuthContext() auth: RequestAuthContext,
+    @Param('connectionId', ParseUUIDPipe) connectionId: string,
+    @Param('objectName') objectName: string,
+  ) {
+    validateObjectName(objectName);
+    return this.metadataDiscovery.describeRelatedObjects(
+      requireOrgId(auth),
+      connectionId,
+      objectName,
+    );
+  }
+
+  @Get(':connectionId/config')
+  @RequirePermission('stitches', 'read')
+  describeConfig(
+    @AuthContext() auth: RequestAuthContext,
+    @Param('connectionId', ParseUUIDPipe) connectionId: string,
+  ) {
+    return this.metadataDiscovery.describeConfig(
+      requireOrgId(auth),
+      connectionId,
+    );
+  }
 }

apps/api/src/modules/stitches/stitches.service.ts

@@ -169,6 +169,7 @@ export class StitchesService {
         eq(integrationStitches.id, id),
         eq(integrationStitches.orgId, orgId),
       ),
+      with: { fieldMappings: true },
     });
     if (!stitch) {
       throw new NotFoundException(`Stitch ${id} not found.`);

apps/web/package.json

@@ -38,6 +38,7 @@
     "axios": "^1.13.2",
     "better-auth": "^1.4.10",
     "framer-motion": "^12.38.0",
+    "lodash.isequal": "^4.5.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-hook-form": "^7.71.0",
@@ -53,6 +54,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
+    "@types/lodash.isequal": "^4.5.8",
     "@types/node": "^24.10.1",
     "@types/pg": "^8.16.0",
     "@types/react": "^19.2.5",

apps/web/src/app/routes/TenantRoutes.tsx

@@ -22,6 +22,7 @@ import { WorkspacesPage } from '../../modules/workspaces/pages/WorkspacesPage';
 import { WorkspaceDetailPage } from '../../modules/workspaces/pages/WorkspaceDetailPage';
 import { StitchesPage } from '../../modules/stitches/pages/StitchesPage';
 import { CreateStitchPage } from '../../modules/stitches/pages/CreateStitchPage';
+import { StitchDetailPage } from '../../modules/stitches/pages/StitchDetailPage';
 import { ExceptionCenterPage } from '../../modules/exceptions/pages/ExceptionCenterPage';
 import { PipelineTracePage } from '../../modules/trace/pages/PipelineTracePage';
 import { AlertTriangle } from 'lucide-react';
@@ -93,6 +94,7 @@ export function TenantRoutes() {
                             <Route path="workspaces/:id" element={<WorkspaceDetailPage />} />
                             <Route path="workspaces/:id/stitches" element={<StitchesPage />} />
                             <Route path="workspaces/:id/stitches/new" element={<CreateStitchPage />} />
+                            <Route path="workspaces/:id/stitches/:stitchId" element={<StitchDetailPage />} />
                             <Route path="workspaces/:id/stitches/:stitchId/traces" element={<PipelineTracePage />} />
                             <Route path="exceptions" element={<ExceptionCenterPage />} />
                         </Route>

apps/web/src/modules/stitches/api/metadata.api.ts

@@ -42,3 +42,37 @@ export async function listFields(
   );
   return res.data;
 }
+
+export interface RelatedObjectDescriptor {
+  objectName: string;
+  relationshipType: '1:1' | '1:N';
+  relationField: string;
+}
+
+export async function listRelatedObjects(
+  connectionId: string,
+  objectName: string,
+): Promise<RelatedObjectDescriptor[]> {
+  const res = await apiClient.get<RelatedObjectDescriptor[]>(
+    `/stitches/metadata/${connectionId}/objects/${encodeURIComponent(objectName)}/related`,
+  );
+  return res.data;
+}
+
+export interface ConfigOption {
+  name: string;
+  label: string;
+  type: 'boolean' | 'string' | 'select';
+  description?: string;
+  options?: Array<{ label: string; value: string }>;
+  defaultValue?: unknown;
+}
+
+export async function describeConfig(
+  connectionId: string,
+): Promise<ConfigOption[]> {
+  const res = await apiClient.get<ConfigOption[]>(
+    `/stitches/metadata/${connectionId}/config`,
+  );
+  return res.data;
+}

apps/web/src/modules/stitches/api/stitches.api.ts

@@ -1,4 +1,5 @@
 import { apiClient } from '@/shared/lib/api-client';
+import type { FieldMappingResponse } from './field-mappings.api';
 
 export type StitchStatus = 'ACTIVE' | 'PAUSED' | 'ARCHIVED';
 
@@ -21,6 +22,8 @@ export interface StitchResponse {
   syncIntervalMinutes: number;
   scheduleEnabled: boolean;
   lastScheduledAt: string | null;
+  config?: Record<string, unknown>;
+  fieldMappings?: FieldMappingResponse[];
   createdAt: string;
   updatedAt: string;
 }
@@ -50,12 +53,15 @@ export interface CreateStitchPayload {
     sourceCanonical: string;
     mappingRules: Array<{ src: string; dest: string; transform?: string }>;
   }>;
+  /** Stitch-level configuration options applied during mapping execution */
+  config?: Record<string, unknown>;
 }
 
 
 export interface UpdateStitchPayload {
   name?: string;
   status?: StitchStatus;
+  config?: Record<string, unknown>;
 }
 
 export interface UpdateSchedulePayload {
@@ -100,6 +106,10 @@ export async function archiveStitch(id: string): Promise<void> {
   await apiClient.delete(`/stitches/${id}`);
 }
 
+export async function triggerSchedule(id: string): Promise<void> {
+  await apiClient.post(`/stitches/${id}/schedule/trigger`);
+}
+
 const PRESET_SYNC_INTERVALS: { label: string; value: number }[] = [
   { label: '30 min', value: 30 },
   { label: '1 hr', value: 60 },