diff --git a/.playground/test-manual-actions-e2e.ts b/.playground/test-manual-actions-e2e.ts new file mode 100644 index 00000000..15671ecb --- /dev/null +++ b/.playground/test-manual-actions-e2e.ts @@ -0,0 +1,242 @@ +/** + * E2E Test: Manual Action Components with Dynamic Templates + * + * This script tests the complete manual action flow: + * 1. Creates a workflow with Manual Approval, Selection, and Form + * 2. Uses dynamic variables and templates in all of them + * 3. Runs the workflow with runtime inputs + * 4. Verifies the interpolated content in pending requests + * 5. Resolves each request via API + * 6. Verifies workflow completion + */ + +const API_BASE = 'http://localhost:3211/api/v1'; + +const HEADERS = { + 'Content-Type': 'application/json', + 'x-internal-token': 'local-internal-token', +}; + +async function sleep(ms: number): Promise { + return new Promise(resolve => setTimeout(resolve, ms)); +} + +async function main() { + console.log('πŸš€ Starting E2E Manual Actions Test...\n'); + + const TEST_USER = 'betterclever'; + const TEST_PROJECT = 'ShipSec-Studio-Refactor'; + + // 1. Create Workflow + console.log('πŸ“ Creating multi-action workflow...'); + + const workflowGraph = { + name: 'E2E Manual Actions Test ' + Date.now(), + nodes: [ + { + id: 'start', + type: 'core.workflow.entrypoint', + position: { x: 0, y: 0 }, + data: { + label: 'Start', + config: { + runtimeInputs: [ + { id: 'userName', label: 'User Name', type: 'string', required: true } + ] + }, + }, + }, + { + id: 'logic', + type: 'core.logic.script', + position: { x: 200, y: 0 }, + data: { + label: 'Prepare Data', + config: { + code: `export async function script(input: Input): Promise { return { projectName: "${TEST_PROJECT}" }; }`, + returns: [{ name: 'projectName', type: 'string' }] + }, + }, + }, + { + id: 'approval', + type: 'core.manual_action.approval', + position: { x: 400, y: 0 }, + data: { + label: 'Manual Approval', + config: { + title: 'Approve {{projectName}}', + description: 'Hello **{{userName}}**, please approve the release of **{{projectName}}**.', + variables: [ + { name: 'userName', type: 'string' }, + { name: 'projectName', type: 'string' } + ] + }, + }, + }, + { + id: 'selection', + type: 'core.manual_action.selection', + position: { x: 600, y: 0 }, + data: { + label: 'Manual Selection', + config: { + title: 'Select Role for {{userName}}', + description: 'Project context: {{projectName}}', + options: ['Admin', 'Editor', 'Viewer'], + variables: [ + { name: 'userName', type: 'string' }, + { name: 'projectName', type: 'string' } + ] + }, + }, + }, + { + id: 'form', + type: 'core.manual_action.form', + position: { x: 800, y: 0 }, + data: { + label: 'Manual Form', + config: { + title: 'Metadata for {{projectName}}', + description: 'Please provide details for **{{projectName}}** deployment.', + schema: { + type: 'object', + properties: { + environment: { type: 'string', enum: ['prod', 'staging'] }, + nodes: { type: 'number', default: 3 } + }, + required: ['environment'] + }, + variables: [ + { name: 'projectName', type: 'string' } + ] + }, + }, + }, + ], + edges: [ + { id: 'e1', source: 'start', target: 'logic' }, + { id: 'e2', source: 'logic', target: 'approval' }, + { id: 'e3', source: 'approval', target: 'selection' }, + { id: 'e4', source: 'selection', target: 'form' }, + + // Data connections + { id: 'd1', source: 'start', sourceHandle: 'userName', target: 'approval', targetHandle: 'userName' }, + { id: 'd2', source: 'logic', sourceHandle: 'projectName', target: 'approval', targetHandle: 'projectName' }, + { id: 'd3', source: 'start', sourceHandle: 'userName', target: 'selection', targetHandle: 'userName' }, + { id: 'd4', source: 'logic', sourceHandle: 'projectName', target: 'selection', targetHandle: 'projectName' }, + { id: 'd5', source: 'logic', sourceHandle: 'projectName', target: 'form', targetHandle: 'projectName' }, + ], + }; + + let workflowId = ''; + const createRes = await fetch(`${API_BASE}/workflows`, { + method: 'POST', + headers: HEADERS, + body: JSON.stringify(workflowGraph), + }); + const wfData = await createRes.json(); + workflowId = wfData.id; + console.log(' βœ… Workflow created:', workflowId); + + // 2. Run Workflow + console.log('\n▢️ Running workflow with userName:', TEST_USER); + const runRes = await fetch(`${API_BASE}/workflows/${workflowId}/run`, { + method: 'POST', + headers: HEADERS, + body: JSON.stringify({ inputs: { userName: TEST_USER } }) + }); + const runData = await runRes.json(); + const runId = runData.runId; + console.log(' βœ… Run started:', runId); + + const resolveAction = async (expectedType: string, expectedTitle: string, responseData: any) => { + console.log(`\nπŸ” Waiting for ${expectedType} request (runId=${runId})...`); + let action = null; + let lastFound = null; + for (let i = 0; i < 20; i++) { + await sleep(1500); + const res = await fetch(`${API_BASE}/human-inputs?runId=${runId}&status=pending`, { headers: HEADERS }); + const list = await res.json(); + lastFound = list; + action = list.find((a: any) => a.inputType === expectedType); + if (action) break; + } + + if (!action) { + console.error(`❌ Timeout waiting for ${expectedType}. Pending actions in list:`, JSON.stringify(lastFound)); + const statusRes = await fetch(`${API_BASE}/workflows/runs/${runId}/status`, { headers: HEADERS }); + console.log('Run status:', await statusRes.json()); + process.exit(1); + } + + console.log(` Found: "${action.title}"`); + if (action.title !== expectedTitle) { + console.error(`❌ Title mismatch! Expected: "${expectedTitle}", Got: "${action.title}"`); + process.exit(1); + } + console.log(` Description check: ${action.description.substring(0, 50)}...`); + if (!action.description.includes(TEST_PROJECT) || !action.description.includes(TEST_USER)) { + if (expectedType !== 'form' || action.description.includes(TEST_PROJECT)) { + // Form only has projectName + } else { + console.error(`❌ Interpolation failed in description: ${action.description}`); + process.exit(1); + } + } + + console.log(`βœ… Resolving ${expectedType}...`); + const resolveRes = await fetch(`${API_BASE}/human-inputs/${action.id}/resolve`, { + method: 'POST', + headers: HEADERS, + body: JSON.stringify({ responseData }) + }); + if (!resolveRes.ok) { + console.error(`❌ Resolve failed:`, await resolveRes.text()); + process.exit(1); + } + console.log(` βœ… ${expectedType} resolved.`); + }; + + // 3. Resolve Manual Approval + await resolveAction('approval', `Approve ${TEST_PROJECT}`, { status: 'approved', comment: 'Looks good' }); + + // 4. Resolve Manual Selection + await resolveAction('selection', `Select Role for ${TEST_USER}`, { selection: 'Admin' }); + + // 5. Resolve Manual Form + await resolveAction('form', `Metadata for ${TEST_PROJECT}`, { environment: 'prod', nodes: 5 }); + + // 6. Wait for Completion + console.log('\n⏳ Waiting for completion...'); + let status = 'RUNNING'; + for (let i = 0; i < 20; i++) { + await sleep(1000); + const statusRes = await fetch(`${API_BASE}/workflows/runs/${runId}/status`, { headers: HEADERS }); + const data = await statusRes.json(); + status = data.status; + if (status !== 'RUNNING') break; + process.stdout.write('.'); + } + console.log('\n🏁 Final Status:', status); + + if (status === 'COMPLETED') { + console.log('\nπŸŽ‰πŸŽ‰πŸŽ‰ E2E TEST PASSED! All manual actions interpolated and resolved correctly.'); + console.log(`\nWorkflow ID: ${workflowId}`); + console.log(`Run ID: ${runId}`); + } else { + console.error('\n❌ Test failed with status:', status); + const resultRes = await fetch(`${API_BASE}/workflows/runs/${runId}/result`, { headers: HEADERS }); + console.log('Error info:', await resultRes.text()); + process.exit(1); + } + + // Cleanup skipped as requested + console.log('\n🏁 Test finished. Cleanup skipped by user request.'); +} + +main().catch(e => { + console.error('Fatal error:', e); + process.exit(1); +}); diff --git a/backend/drizzle/0017_create-approval-requests.sql b/backend/drizzle/0017_create-approval-requests.sql new file mode 100644 index 00000000..4e566d18 --- /dev/null +++ b/backend/drizzle/0017_create-approval-requests.sql @@ -0,0 +1,59 @@ +-- Drop the old approval_requests table (v1, no legacy data) +DROP TABLE IF EXISTS approval_requests; + +-- Drop old enum +DROP TYPE IF EXISTS approval_status; + +-- Create new enum for human input status +CREATE TYPE human_input_status AS ENUM ('pending', 'resolved', 'expired', 'cancelled'); + +-- Create new enum for input types +CREATE TYPE human_input_type AS ENUM ('approval', 'form', 'selection', 'review', 'acknowledge'); + +-- Human Input Requests table - generalized HITL system +CREATE TABLE human_input_requests ( + -- Primary key + id UUID PRIMARY KEY DEFAULT gen_random_uuid(), + + -- Workflow context + run_id TEXT NOT NULL, + workflow_id UUID NOT NULL, + node_ref TEXT NOT NULL, + + -- Status + status human_input_status NOT NULL DEFAULT 'pending', + + -- Input type and schema + input_type human_input_type NOT NULL DEFAULT 'approval', + input_schema JSONB NOT NULL DEFAULT '{}', + + -- Display metadata + title TEXT NOT NULL, + description TEXT, + context JSONB DEFAULT '{}', + + -- Secure token for public links + resolve_token TEXT NOT NULL UNIQUE, + + -- Timeout handling + timeout_at TIMESTAMPTZ, + + -- Response tracking + response_data JSONB, + responded_at TIMESTAMPTZ, + responded_by TEXT, + + -- Multi-tenancy + organization_id VARCHAR(191), + + -- Audit timestamps + created_at TIMESTAMPTZ NOT NULL DEFAULT now(), + updated_at TIMESTAMPTZ NOT NULL DEFAULT now() +); + +-- Indexes for common queries +CREATE INDEX idx_human_input_requests_status ON human_input_requests(status); +CREATE INDEX idx_human_input_requests_run_id ON human_input_requests(run_id); +CREATE INDEX idx_human_input_requests_workflow_id ON human_input_requests(workflow_id); +CREATE INDEX idx_human_input_requests_organization_id ON human_input_requests(organization_id); +CREATE INDEX idx_human_input_requests_resolve_token ON human_input_requests(resolve_token); diff --git a/backend/scripts/generate-openapi.ts b/backend/scripts/generate-openapi.ts index 104c7bc0..23e490b5 100644 --- a/backend/scripts/generate-openapi.ts +++ b/backend/scripts/generate-openapi.ts @@ -10,12 +10,15 @@ import { cleanupOpenApiDoc } from 'nestjs-zod'; async function generateOpenApi() { // Skip ingest services that require external connections during OpenAPI generation process.env.SKIP_INGEST_SERVICES = 'true'; + process.env.SHIPSEC_SKIP_MIGRATION_CHECK = 'true'; const { AppModule } = await import('../src/app.module'); + console.log('Creating Nest app...'); const app = await NestFactory.create(AppModule, { - logger: false, + logger: ['error', 'warn'], }); + console.log('Nest app created'); // Set global prefix to match production app.setGlobalPrefix('api/v1'); @@ -28,6 +31,7 @@ async function generateOpenApi() { .build(); const document = SwaggerModule.createDocument(app, config); + console.log('Document paths keys:', Object.keys(document.paths).filter(k => k.includes('human'))); const cleaned = cleanupOpenApiDoc(document); const repoRootSpecPath = join(__dirname, '..', '..', 'openapi.json'); const payload = JSON.stringify(cleaned, null, 2); @@ -36,7 +40,8 @@ async function generateOpenApi() { await app.close(); } -generateOpenApi().catch((error) => { +console.log('Script started'); +generateOpenApi().then(() => console.log('Script finished successfully')).catch((error) => { console.error('Failed to generate OpenAPI spec', error); process.exit(1); }); diff --git a/backend/src/app.module.ts b/backend/src/app.module.ts index 2af6b4c5..2b0d24b9 100644 --- a/backend/src/app.module.ts +++ b/backend/src/app.module.ts @@ -19,6 +19,10 @@ import { IntegrationsModule } from './integrations/integrations.module'; import { SchedulesModule } from './schedules/schedules.module'; import { AnalyticsModule } from './analytics/analytics.module'; +import { ApiKeysModule } from './api-keys/api-keys.module'; +import { WebhooksModule } from './webhooks/webhooks.module'; +import { HumanInputsModule } from './human-inputs/human-inputs.module'; + const coreModules = [ AgentsModule, AnalyticsModule, @@ -32,13 +36,12 @@ const coreModules = [ SchedulesModule, ApiKeysModule, WebhooksModule, + HumanInputsModule, ]; + const testingModules = process.env.NODE_ENV === 'production' ? [] : [TestingSupportModule]; -import { ApiKeysModule } from './api-keys/api-keys.module'; -import { WebhooksModule } from './webhooks/webhooks.module'; - @Module({ imports: [ ConfigModule.forRoot({ diff --git a/backend/src/components/utils/categorization.ts b/backend/src/components/utils/categorization.ts index 3533b39d..985b36ed 100644 --- a/backend/src/components/utils/categorization.ts +++ b/backend/src/components/utils/categorization.ts @@ -8,7 +8,7 @@ interface ComponentCategoryConfig { icon: string; } -const SUPPORTED_CATEGORIES: ReadonlyArray = ['input', 'transform', 'ai', 'security', 'it_ops', 'notification', 'output']; +const SUPPORTED_CATEGORIES: ReadonlyArray = ['input', 'transform', 'ai', 'security', 'it_ops', 'notification', 'manual_action', 'output']; const COMPONENT_CATEGORY_CONFIG: Record = { input: { @@ -53,6 +53,13 @@ const COMPONENT_CATEGORY_CONFIG: Record { + if (process.env.SKIP_INGEST_SERVICES === 'true') { + return { + connect: async () => ({ + query: async () => ({ rows: [] }), + release: () => {}, + }), + on: () => {}, + } as unknown as Pool; + } const connectionString = process.env.DATABASE_URL; if (!connectionString) { throw new Error('DATABASE_URL is not set'); @@ -22,7 +32,28 @@ export const DRIZZLE_TOKEN = Symbol('DRIZZLE_CONNECTION'); }, { provide: DRIZZLE_TOKEN, - useFactory: (pool: Pool) => drizzle(pool), + useFactory: (pool: Pool) => { + if (process.env.SKIP_INGEST_SERVICES === 'true') { + // Recursive mock that handles method chaining and awaits + const createRecursiveMock = (): any => { + return new Proxy(() => {}, { + get: (target, prop) => { + if (prop === 'then') { + // When awaited, resolve to empty array (safe for most db queries) + return (resolve: any) => resolve([]); + } + return createRecursiveMock(); + }, + apply: () => { + return createRecursiveMock(); + }, + }); + }; + return createRecursiveMock(); + } + // Pass schema to enable relational query API (db.query.tableName) + return drizzle(pool, { schema }); + }, inject: [Pool], }, MigrationGuard, diff --git a/backend/src/database/schema/human-input-requests.ts b/backend/src/database/schema/human-input-requests.ts new file mode 100644 index 00000000..7c47d00c --- /dev/null +++ b/backend/src/database/schema/human-input-requests.ts @@ -0,0 +1,68 @@ +import { jsonb, pgEnum, pgTable, text, timestamp, uuid, varchar } from 'drizzle-orm/pg-core'; + +/** + * Human input status enum + */ +export const humanInputStatusEnum = pgEnum('human_input_status', [ + 'pending', + 'resolved', + 'expired', + 'cancelled', +]); + +/** + * Human input type enum - the kind of input expected from the human + */ +export const humanInputTypeEnum = pgEnum('human_input_type', [ + 'approval', // Simple yes/no decision + 'form', // Structured form with fields + 'selection', // Choose from options + 'review', // Review and optionally edit content + 'acknowledge', // Simple acknowledgment +]); + +/** + * Human Input Requests table - generalized Human-in-the-Loop (HITL) system + */ +export const humanInputRequests = pgTable('human_input_requests', { + // Primary key + id: uuid('id').primaryKey().defaultRandom(), + + // Workflow context + runId: text('run_id').notNull(), + workflowId: uuid('workflow_id').notNull(), + nodeRef: text('node_ref').notNull(), + + // Status + status: humanInputStatusEnum('status').notNull().default('pending'), + + // Input type and schema + inputType: humanInputTypeEnum('input_type').notNull().default('approval'), + inputSchema: jsonb('input_schema').$type>().default({}), + + // Display metadata + title: text('title').notNull(), + description: text('description'), + context: jsonb('context').$type>().default({}), + + // Secure token for public links + resolveToken: text('resolve_token').notNull().unique(), + + // Timeout handling + timeoutAt: timestamp('timeout_at', { withTimezone: true }), + + // Response tracking + responseData: jsonb('response_data').$type>(), + respondedAt: timestamp('responded_at', { withTimezone: true }), + respondedBy: text('responded_by'), + + // Multi-tenancy + organizationId: varchar('organization_id', { length: 191 }), + + // Audit timestamps + createdAt: timestamp('created_at', { withTimezone: true }).defaultNow().notNull(), + updatedAt: timestamp('updated_at', { withTimezone: true }).defaultNow().notNull(), +}); + +export type HumanInputRequest = typeof humanInputRequests.$inferSelect; +export type HumanInputRequestInsert = typeof humanInputRequests.$inferInsert; diff --git a/backend/src/database/schema/index.ts b/backend/src/database/schema/index.ts index d8a0f951..a2b35bab 100644 --- a/backend/src/database/schema/index.ts +++ b/backend/src/database/schema/index.ts @@ -11,6 +11,8 @@ export * from './platform-workflow-links'; export * from './workflow-roles'; export * from './integrations'; export * from './workflow-schedules'; +export * from './human-input-requests'; export * from './terminal-records'; export * from './agent-trace-events'; + diff --git a/backend/src/dsl/validator.ts b/backend/src/dsl/validator.ts index 1125bbf9..49a41074 100644 --- a/backend/src/dsl/validator.ts +++ b/backend/src/dsl/validator.ts @@ -253,6 +253,31 @@ function validateInputMappings( }); } } + + // Check raw edges for multiple inputs to the same port + const edgesToThisNode = graph.edges.filter(e => e.target === action.ref); + const portsSeen = new Map(); + for (const edge of edgesToThisNode) { + const targetHandle = edge.targetHandle ?? edge.sourceHandle; + if (!targetHandle) continue; + + portsSeen.set(targetHandle, (portsSeen.get(targetHandle) ?? 0) + 1); + } + + for (const [portId, count] of portsSeen.entries()) { + if (count > 1) { + const inputMetadata = actionPorts.get(action.ref)?.inputs.find(i => i.id === portId); + const portLabel = inputMetadata?.label || portId; + + errors.push({ + node: action.ref, + field: 'inputMappings', + message: `Multiple edges detected for input port '${portLabel}'. Only one edge allowed per input.`, + severity: 'error', + suggestion: `Combine the sources into a single object using a transformer node or create a separate variable for each source.`, + }); + } + } } } diff --git a/backend/src/human-inputs/dto/human-inputs.dto.ts b/backend/src/human-inputs/dto/human-inputs.dto.ts new file mode 100644 index 00000000..34d9514b --- /dev/null +++ b/backend/src/human-inputs/dto/human-inputs.dto.ts @@ -0,0 +1,72 @@ +import { createZodDto } from 'nestjs-zod'; +import { z } from 'zod'; + +// Input type enum +export const HumanInputTypeSchema = z.enum(['approval', 'form', 'selection', 'review', 'acknowledge']); +export type HumanInputType = z.infer; + +// Status enum +export const HumanInputStatusSchema = z.enum(['pending', 'resolved', 'expired', 'cancelled']); +export type HumanInputStatus = z.infer; + +// ===== Request DTOs ===== + +export const ResolveHumanInputSchema = z.object({ + responseData: z.record(z.string(), z.unknown()).optional().describe('The response data from the human'), + respondedBy: z.string().optional().describe('User ID or identifier of who resolved the input'), +}); + +export class ResolveHumanInputDto extends createZodDto(ResolveHumanInputSchema) {} + +export const ListHumanInputsQuerySchema = z.object({ + status: HumanInputStatusSchema.optional(), + inputType: HumanInputTypeSchema.optional(), +}); + +export class ListHumanInputsQueryDto extends createZodDto(ListHumanInputsQuerySchema) {} + +export const ResolveByTokenSchema = z.object({ + action: z.enum(['approve', 'reject', 'resolve']).optional().default('resolve'), + data: z.record(z.string(), z.unknown()).optional(), +}); + +export class ResolveByTokenDto extends createZodDto(ResolveByTokenSchema) {} + +// ===== Response DTOs ===== + +export const HumanInputResponseSchema = z.object({ + id: z.string().uuid(), + runId: z.string(), + workflowId: z.string().uuid(), + nodeRef: z.string(), + status: HumanInputStatusSchema, + inputType: HumanInputTypeSchema, + inputSchema: z.any().nullable(), + title: z.string(), + description: z.string().nullable(), + context: z.any().nullable(), + resolveToken: z.string(), + timeoutAt: z.string().nullable(), + responseData: z.any().nullable(), + respondedAt: z.string().nullable(), + respondedBy: z.string().nullable(), + organizationId: z.string().nullable(), + createdAt: z.string(), + updatedAt: z.string(), +}); + +export class HumanInputResponseDto extends createZodDto(HumanInputResponseSchema) {} + +export const PublicResolveResultSchema = z.object({ + success: z.boolean(), + message: z.string(), + input: z.object({ + id: z.string().uuid(), + title: z.string(), + inputType: HumanInputTypeSchema, + status: HumanInputStatusSchema, + respondedAt: z.string().nullable(), + }), +}); + +export class PublicResolveResultDto extends createZodDto(PublicResolveResultSchema) {} diff --git a/backend/src/human-inputs/human-inputs.controller.ts b/backend/src/human-inputs/human-inputs.controller.ts new file mode 100644 index 00000000..8f28d70f --- /dev/null +++ b/backend/src/human-inputs/human-inputs.controller.ts @@ -0,0 +1,62 @@ +import { Body, Controller, Get, Param, Post, Query, UseGuards } from '@nestjs/common'; +import { ApiTags, ApiOperation, ApiResponse, ApiSecurity } from '@nestjs/swagger'; +import { AuthGuard } from '../auth/auth.guard'; +import { HumanInputsService } from './human-inputs.service'; +import { + ResolveHumanInputDto, + ListHumanInputsQueryDto, + HumanInputResponseDto, + PublicResolveResultDto, + ResolveByTokenDto, +} from './dto/human-inputs.dto'; + +@ApiTags('Human Inputs') +@Controller('human-inputs') +export class HumanInputsController { + constructor(private readonly service: HumanInputsService) {} + + @Get() + @UseGuards(AuthGuard) + @ApiSecurity('api-key') + @ApiOperation({ summary: 'List human input requests' }) + @ApiResponse({ status: 200, type: [HumanInputResponseDto] }) + async list(@Query() query: ListHumanInputsQueryDto) { + return this.service.list(query); + } + + @Get(':id') + @UseGuards(AuthGuard) + @ApiSecurity('api-key') + @ApiOperation({ summary: 'Get a human input request details' }) + @ApiResponse({ status: 200, type: HumanInputResponseDto }) + async get(@Param('id') id: string) { + return this.service.getById(id); + } + + @Post(':id/resolve') + @UseGuards(AuthGuard) + @ApiSecurity('api-key') + @ApiOperation({ summary: 'Resolve a human input request' }) + @ApiResponse({ status: 200, type: HumanInputResponseDto }) + async resolve( + @Param('id') id: string, + @Body() dto: ResolveHumanInputDto, + ) { + return this.service.resolve(id, dto); + } + + // Public endpoints for resolving via token (no auth guard) + @Post('resolve/:token') + @ApiOperation({ summary: 'Resolve input via public token' }) + @ApiResponse({ status: 200, type: PublicResolveResultDto }) + async resolveByToken( + @Param('token') token: string, + @Body() body: ResolveByTokenDto + ) { + return this.service.resolveByToken( + token, + body.action || 'resolve', + body.data + ); + } +} diff --git a/backend/src/human-inputs/human-inputs.module.ts b/backend/src/human-inputs/human-inputs.module.ts new file mode 100644 index 00000000..3426dfb7 --- /dev/null +++ b/backend/src/human-inputs/human-inputs.module.ts @@ -0,0 +1,21 @@ +import { forwardRef, Module } from '@nestjs/common'; +import { HumanInputsController } from './human-inputs.controller'; +import { HumanInputsService } from './human-inputs.service'; +import { DatabaseModule } from '../database/database.module'; + +import { TemporalModule } from '../temporal/temporal.module'; +import { ApiKeysModule } from '../api-keys/api-keys.module'; +import { AuthModule } from '../auth/auth.module'; + +@Module({ + imports: [ + DatabaseModule, + TemporalModule, + ApiKeysModule, + AuthModule, + ], + controllers: [HumanInputsController], + providers: [HumanInputsService], + exports: [HumanInputsService], +}) +export class HumanInputsModule {} diff --git a/backend/src/human-inputs/human-inputs.service.ts b/backend/src/human-inputs/human-inputs.service.ts new file mode 100644 index 00000000..6cb91e3f --- /dev/null +++ b/backend/src/human-inputs/human-inputs.service.ts @@ -0,0 +1,176 @@ +import { Inject, Injectable, Logger, NotFoundException } from '@nestjs/common'; +import { DRIZZLE_TOKEN } from '../database/database.module'; +import * as schema from '../database/schema'; +import { humanInputRequests, humanInputRequests as humanInputRequestsTable } from '../database/schema'; +import { eq, and, desc } from 'drizzle-orm'; +import { type NodePgDatabase } from 'drizzle-orm/node-postgres'; +import { + ResolveHumanInputDto, + ListHumanInputsQueryDto, + HumanInputResponseDto, + PublicResolveResultDto +} from './dto/human-inputs.dto'; +import { TemporalService } from '../temporal/temporal.service'; + +@Injectable() +export class HumanInputsService { + private readonly logger = new Logger(HumanInputsService.name); + + constructor( + @Inject(DRIZZLE_TOKEN) private readonly db: NodePgDatabase, + private readonly temporalService: TemporalService, + ) {} + + async list(query?: ListHumanInputsQueryDto): Promise { + const conditions = []; + + if (query?.status) { + conditions.push(eq(humanInputRequestsTable.status, query.status)); + } + + if (query?.inputType) { + conditions.push(eq(humanInputRequestsTable.inputType, query.inputType)); + } + + const whereClause = conditions.length > 0 ? and(...conditions) : undefined; + + const results = await this.db.query.humanInputRequests.findMany({ + where: whereClause, + orderBy: [desc(humanInputRequestsTable.createdAt)], + }); + + return results as unknown as HumanInputResponseDto[]; + } + + async getById(id: string): Promise { + const request = await this.db.query.humanInputRequests.findFirst({ + where: eq(humanInputRequestsTable.id, id), + }); + + if (!request) { + throw new NotFoundException(`Human input request with ID ${id} not found`); + } + + return request as unknown as HumanInputResponseDto; + } + + async resolve(id: string, dto: ResolveHumanInputDto): Promise { + const request = await this.getById(id); + + if (request.status !== 'pending') { + throw new Error(`Human input request is ${request.status}, cannot resolve`); + } + + // Determine if approved based on responseData + const isApproved = dto.responseData?.status !== 'rejected'; + + // Update database + const [updated] = await this.db + .update(humanInputRequestsTable) + .set({ + status: 'resolved', + responseData: dto.responseData, + respondedBy: dto.respondedBy, + respondedAt: new Date(), + updatedAt: new Date(), + }) + .where(eq(humanInputRequestsTable.id, id)) + .returning(); + + // Signal Temporal workflow with correct signal name and payload + await this.temporalService.signalWorkflow({ + workflowId: updated.runId, // runId contains the Temporal workflow ID + signalName: 'resolveHumanInput', + args: { + requestId: updated.id, + nodeRef: updated.nodeRef, + approved: isApproved, + respondedBy: dto.respondedBy ?? 'unknown', + responseNote: dto.responseData?.comment as string | undefined, + respondedAt: new Date().toISOString(), + responseData: dto.responseData, + }, + }); + + return updated as unknown as HumanInputResponseDto; + } + + // Public resolution using token + async resolveByToken(token: string, action: 'approve' | 'reject' | 'resolve', data?: Record): Promise { + const request = await this.db.query.humanInputRequests.findFirst({ + where: eq(humanInputRequestsTable.resolveToken, token), + }); + + if (!request) { + return { + success: false, + message: 'Invalid or expired token', + input: { + id: '', + title: '', + inputType: 'approval', + status: 'expired', + respondedAt: null + } + }; + } + + if (request.status !== 'pending') { + return { + success: false, + message: `Request is already ${request.status}`, + input: { + id: request.id, + title: request.title, + inputType: request.inputType, + status: request.status, + respondedAt: request.respondedAt?.toISOString() ?? null + } + }; + } + + const isApproved = action !== 'reject'; + let responseData = data || {}; + responseData = { ...responseData, status: isApproved ? 'approved' : 'rejected' }; + + // Update DB + const [updated] = await this.db + .update(humanInputRequestsTable) + .set({ + status: 'resolved', + responseData: responseData, + respondedAt: new Date(), + respondedBy: 'public-link', + updatedAt: new Date(), + }) + .where(eq(humanInputRequestsTable.id, request.id)) + .returning(); + + // Signal Workflow with correct signal name and payload + await this.temporalService.signalWorkflow({ + workflowId: updated.runId, + signalName: 'resolveHumanInput', + args: { + requestId: updated.id, + nodeRef: updated.nodeRef, + approved: isApproved, + respondedBy: 'public-link', + responseNote: responseData.comment as string | undefined, + respondedAt: new Date().toISOString(), + responseData: responseData, + }, + }); + + return { + success: true, + message: 'Input received successfully', + input: { + id: updated.id, + title: updated.title, + inputType: updated.inputType, + status: updated.status, + respondedAt: updated.respondedAt?.toISOString() ?? null + } + }; + } +} diff --git a/backend/src/temporal/temporal.service.ts b/backend/src/temporal/temporal.service.ts index bf531d52..09a6746e 100644 --- a/backend/src/temporal/temporal.service.ts +++ b/backend/src/temporal/temporal.service.ts @@ -183,6 +183,21 @@ export class TemporalService implements OnModuleDestroy { await handle.terminate('User requested stop'); } + /** + * Send a signal to a running workflow + */ + async signalWorkflow(input: { + workflowId: string; + signalName: string; + args: any; + }): Promise { + const handle = await this.getWorkflowHandle({ workflowId: input.workflowId }); + this.logger.log( + `Sending signal ${input.signalName} to workflow ${input.workflowId} with args: ${JSON.stringify(input.args)}`, + ); + await handle.signal(input.signalName, input.args); + } + private async getWorkflowHandle(ref: WorkflowRunReference): Promise> { const client = await this.getClient(); return client.getHandle(ref.workflowId, ref.runId); diff --git a/backend/src/trace/trace.service.ts b/backend/src/trace/trace.service.ts index 3c50f0b9..514b7594 100644 --- a/backend/src/trace/trace.service.ts +++ b/backend/src/trace/trace.service.ts @@ -100,6 +100,8 @@ export class TraceService { return 'COMPLETED'; case 'NODE_FAILED': return 'FAILED'; + case 'AWAITING_INPUT': + return 'AWAITING_INPUT'; case 'NODE_PROGRESS': default: return 'PROGRESS'; diff --git a/backend/src/trace/types.ts b/backend/src/trace/types.ts index 70e90112..4feb589f 100644 --- a/backend/src/trace/types.ts +++ b/backend/src/trace/types.ts @@ -2,7 +2,8 @@ export type TraceEventType = | 'NODE_STARTED' | 'NODE_COMPLETED' | 'NODE_FAILED' - | 'NODE_PROGRESS'; + | 'NODE_PROGRESS' + | 'AWAITING_INPUT'; export interface TraceEventBase { runId: string; @@ -29,8 +30,20 @@ export interface NodeProgressEvent extends TraceEventBase { message: string; } +export interface AwaitingInputEvent extends TraceEventBase { + type: 'AWAITING_INPUT'; + data?: { + requestId?: string; + inputType?: string; + title?: string; + description?: string; + timeoutAt?: string; + }; +} + export type TraceEvent = | NodeStartedEvent | NodeCompletedEvent | NodeFailedEvent - | NodeProgressEvent; + | NodeProgressEvent + | AwaitingInputEvent; diff --git a/backend/src/workflows/__tests__/workflows.controller.spec.ts b/backend/src/workflows/__tests__/workflows.controller.spec.ts index 5ce9787c..777403c2 100644 --- a/backend/src/workflows/__tests__/workflows.controller.spec.ts +++ b/backend/src/workflows/__tests__/workflows.controller.spec.ts @@ -293,6 +293,9 @@ describe('WorkflowsController', () => { } return record; }, + async hasPendingInputs() { + return false; + }, }; const traceRepositoryStub = { diff --git a/backend/src/workflows/__tests__/workflows.service.spec.ts b/backend/src/workflows/__tests__/workflows.service.spec.ts index f49f9f89..02d889b7 100644 --- a/backend/src/workflows/__tests__/workflows.service.spec.ts +++ b/backend/src/workflows/__tests__/workflows.service.spec.ts @@ -286,6 +286,9 @@ describe('WorkflowsService', () => { } return [storedRunMeta]; }, + async hasPendingInputs() { + return false; + }, }; const traceRepositoryMock = { diff --git a/backend/src/workflows/dto/workflow-graph.dto.ts b/backend/src/workflows/dto/workflow-graph.dto.ts index 0c082526..3856cf2b 100644 --- a/backend/src/workflows/dto/workflow-graph.dto.ts +++ b/backend/src/workflows/dto/workflow-graph.dto.ts @@ -48,7 +48,26 @@ export const WorkflowGraphSchema = z.object({ nodes: z.array(WorkflowNodeSchema).min(1), edges: z.array(WorkflowEdgeSchema), viewport: WorkflowViewportSchema.default({ x: 0, y: 0, zoom: 1 }), -}); +}).refine( + (data) => { + const portInputs = new Set(); + for (const edge of data.edges) { + const targetHandle = edge.targetHandle ?? edge.sourceHandle; + if (!targetHandle) continue; + + const key = `${edge.target}:${targetHandle}`; + if (portInputs.has(key)) { + return false; + } + portInputs.add(key); + } + return true; + }, + { + message: 'Multiple edges connecting to the same input port are not allowed. Each port must have only one source.', + path: ['edges'], + } +); export class WorkflowGraphDto extends createZodDto(WorkflowGraphSchema) {} export type WorkflowGraph = WorkflowGraphDto; diff --git a/backend/src/workflows/repository/workflow-run.repository.ts b/backend/src/workflows/repository/workflow-run.repository.ts index a863685b..18d4d070 100644 --- a/backend/src/workflows/repository/workflow-run.repository.ts +++ b/backend/src/workflows/repository/workflow-run.repository.ts @@ -1,10 +1,11 @@ import { Inject, Injectable } from '@nestjs/common'; -import { and, desc, eq } from 'drizzle-orm'; +import { and, desc, eq, sql } from 'drizzle-orm'; import { NodePgDatabase } from 'drizzle-orm/node-postgres'; import { DRIZZLE_TOKEN } from '../../database/database.module'; import { workflowRunsTable, + humanInputRequests as humanInputRequestsTable, type WorkflowRunInsert, type WorkflowRunRecord, } from '../../database/schema'; @@ -122,6 +123,19 @@ export class WorkflowRunRepository { .limit(options.limit ?? 50); } + async hasPendingInputs(runId: string): Promise { + const [result] = await this.db + .select({ count: sql`count(*)` }) + .from(humanInputRequestsTable) + .where( + and( + eq(humanInputRequestsTable.runId, runId), + eq(humanInputRequestsTable.status, 'pending') + ) + ); + return Number(result.count) > 0; + } + private buildRunFilter(runId: string, organizationId?: string | null) { const base = eq(workflowRunsTable.runId, runId); if (!organizationId) { diff --git a/backend/src/workflows/workflows.service.ts b/backend/src/workflows/workflows.service.ts index e957b3eb..a9cde7db 100644 --- a/backend/src/workflows/workflows.service.ts +++ b/backend/src/workflows/workflows.service.ts @@ -867,6 +867,14 @@ export class WorkflowsService { const statusPayload = this.mapTemporalStatus(runId, temporalStatus, run, completedActions); + // Override running status if waiting for human input + if (statusPayload.status === 'RUNNING') { + const hasPendingInput = await this.runRepository.hasPendingInputs(runId); + if (hasPendingInput) { + statusPayload.status = 'AWAITING_INPUT'; + } + } + // Track workflow completion/failure when status changes to terminal state if (['COMPLETED', 'FAILED', 'CANCELLED', 'TERMINATED', 'TIMED_OUT'].includes(statusPayload.status)) { const startTime = run.createdAt; diff --git a/current_body.md b/current_body.md new file mode 100644 index 00000000..c6177611 --- /dev/null +++ b/current_body.md @@ -0,0 +1,40 @@ +This PR implements the foundational **Human-in-the-Loop (HITL)** system for ShipSec AI. It enables workflows to pause execution and wait for human interventionβ€”whether for simple approvals, data collection via forms, or making specific selections. + +This is a comprehensive implementation spanning the backend (Temporal, Drizzle, NestJS) and the frontend (Action Center, Workflow Designer). + +### Key Features + +#### 1. Centralized Action Center +* A new **Action Center** (`/actions`) that serves as a command center for all manual tasks. +* Filter tasks by status (Pending, Resolved, Expired). +* Search and sort by Workflow Run ID, Node Name, or Title. +* Direct response actions from the table view for quick approvals. + +#### 2. Manual Action Components (HITL Nodes) +Implemented a set of specialized nodes for the workflow designer: +* **Manual Approval**: A binary gate (Approve/Reject) to control workflow flow. +* **Manual Form**: Generates dynamic UI forms based on configurable JSON Schema. Supports strings, numbers, enums, and booleans. +* **Manual Selection**: Allows humans to choose from a list of predefined options (single or multiple choice). +* **Manual Acknowledgment**: A "Mark as Read" style node to ensure human awareness before proceeding. + +#### 3. Dynamic Context & Templating +* **Variable Injection**: Task titles and descriptions can now use dynamic variables (e.g., `{{steps.scan.output.vulnerabilities}}`) to provide humans with the necessary context to make decisions. +* **Markdown Support**: Full Markdown rendering in task descriptions for rich context display. + +#### 4. Robust Backend Architecture +* **Temporal Integration**: Built using Temporal activities that handle suspension and resumption of workflow execution. +* **Persistence**: Detailed tracking of requests in Drizzle ORM, including `respondedBy`, `respondedAt`, and full `responseData` payloads. +* **Timeout Handling**: Support for configurable timeouts, allowing workflows to handle cases where humans don't respond in time. + +#### 5. Unified Resolution Framework +* Created `HumanInputResolutionView`, a "smart" component that handles the entire resolution lifecycle. +* Seamlessly manages different input types (form, selection, approval) within a consistent, premium UI. +* Shared across the Action Center and the Workflow Execution Inspector for a unified user experience. + +### Technical Implementation Details +* **Database**: Added `human_input_requests` table with relational support. +* **API**: RESTful endpoints for internal system and frontend consumption. +* **Schema**: Leveraging Zod for rigorous DTO validation and OpenAPI generation. +* **State Management**: Optimized hooks for real-time status updates and interaction handling. + +This PR establishes the core capability of "Human-in-the-Loop" which is essential for secure and reliable AI-driven security workflows. diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 6ec3bfe9..22283b05 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -8,6 +8,7 @@ import { ArtifactLibrary } from '@/pages/ArtifactLibrary' import { IntegrationCallback } from '@/pages/IntegrationCallback' import { NotFound } from '@/pages/NotFound' import { SchedulesPage } from '@/pages/SchedulesPage' +import { ActionCenterPage } from '@/pages/ActionCenterPage' import { ToastProvider } from '@/components/ui/toast-provider' import { AppLayout } from '@/components/layout/AppLayout' import { AuthProvider } from '@/auth/auth-context' @@ -74,6 +75,7 @@ function App() { } /> } /> } /> + } /> } /> > = { COMPLETED: CheckCircle, FAILED: AlertCircle, PROGRESS: Activity, + AWAITING_INPUT: AlertCircle, } const EVENT_ICON_TONE: Record = { @@ -20,6 +21,7 @@ const EVENT_ICON_TONE: Record = { PROGRESS: 'text-sky-600 border-sky-200 bg-sky-50 dark:text-sky-200 dark:border-sky-500/40 dark:bg-sky-500/10', COMPLETED: 'text-emerald-600 border-emerald-200 bg-emerald-50 dark:text-emerald-200 dark:border-emerald-500/40 dark:bg-emerald-500/10', FAILED: 'text-rose-600 border-rose-200 bg-rose-50 dark:text-rose-200 dark:border-rose-500/40 dark:bg-rose-500/10', + AWAITING_INPUT: 'text-amber-600 border-amber-200 bg-amber-50 dark:text-amber-200 dark:border-amber-500/40 dark:bg-amber-500/10', } const LEVEL_BADGE: Record = { diff --git a/frontend/src/components/workflow/FormFieldsEditor.tsx b/frontend/src/components/workflow/FormFieldsEditor.tsx new file mode 100644 index 00000000..be1d05fb --- /dev/null +++ b/frontend/src/components/workflow/FormFieldsEditor.tsx @@ -0,0 +1,318 @@ +import { useState, useRef, useCallback, useEffect } from 'react' +import { Plus, Trash2, GripVertical, Settings2 } from 'lucide-react' +import { Button } from '@/components/ui/button' +import { Input } from '@/components/ui/input' +import { Label } from '@/components/ui/label' +import { Checkbox } from '@/components/ui/checkbox' +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select' +import { + DndContext, + closestCenter, + KeyboardSensor, + PointerSensor, + useSensor, + useSensors, + DragEndEvent, +} from '@dnd-kit/core' +import { + arrayMove, + SortableContext, + sortableKeyboardCoordinates, + verticalListSortingStrategy, + useSortable, +} from '@dnd-kit/sortable' +import { CSS } from '@dnd-kit/utilities' +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover" + +export interface FormField { + id: string + label: string + type: string + required: boolean + placeholder?: string + description?: string + options?: string // For select/enum, comma separated +} + +interface InternalFormField extends FormField { + _uid: string +} + +interface FormFieldsEditorProps { + value: FormField[] + onChange: (value: FormField[]) => void +} + +interface SortableRowProps { + item: InternalFormField + onUpdate: (uid: string, updates: Partial) => void + onRemove: (uid: string) => void +} + +function SortableRow({ item, onUpdate, onRemove }: SortableRowProps) { + const { + attributes, + listeners, + setNodeRef, + transform, + transition, + isDragging, + } = useSortable({ id: item._uid }) + + const style = { + transform: CSS.Transform.toString(transform), + transition, + zIndex: isDragging ? 50 : 'auto', + opacity: isDragging ? 0.9 : 1, + } + + return ( +
+
+
+ +
+ +
+
+ + onUpdate(item._uid, { id: e.target.value })} + placeholder="e.g. email" + className="h-8 text-xs font-mono" + /> +
+
+ + onUpdate(item._uid, { label: e.target.value })} + placeholder="e.g. Your Email" + className="h-8 text-xs" + /> +
+
+ +
+
+ onUpdate(item._uid, { required: !!checked })} + /> + +
+ + + + + +
+ + +
+ +
+ + onUpdate(item._uid, { placeholder: e.target.value })} + className="h-8 text-xs" + /> +
+ + {item.type === 'enum' && ( +
+ + onUpdate(item._uid, { options: e.target.value })} + placeholder="Option 1, Option 2" + className="h-8 text-xs" + /> +
+ )} + + + + +
+
+
+ ) +} + +let idCounter = 0 +function generateUid(): string { + return `field_${Date.now()}_${++idCounter}` +} + +function toInternal(value: any): InternalFormField[] { + let list: any[] = [] + if (Array.isArray(value)) { + list = value + } else if (typeof value === 'string' && value.trim()) { + try { + const parsed = JSON.parse(value) + if (Array.isArray(parsed)) { + list = parsed + } else if (parsed && typeof parsed === 'object' && parsed.properties) { + // Handle legacy JSON Schema format + list = Object.entries(parsed.properties).map(([id, prop]: [string, any]) => ({ + id, + label: prop.title || id, + type: prop.type || 'string', + required: Array.isArray(parsed.required) ? parsed.required.includes(id) : false, + placeholder: prop.description || '', + })) + } + } catch (e) { + console.warn('Failed to parse legacy form fields', e) + } + } + return list.map((v: any) => ({ ...v, _uid: generateUid() })) +} + +function toExternal(items: InternalFormField[]): FormField[] { + return items.map(({ _uid, ...rest }) => rest) +} + +export function FormFieldsEditor({ value, onChange }: FormFieldsEditorProps) { + const [items, setItems] = useState(() => toInternal(value)) + const isLocalChange = useRef(false) + + useEffect(() => { + if (isLocalChange.current) { + isLocalChange.current = false + return + } + setItems(toInternal(value)) + }, [JSON.stringify(value)]) + + const sensors = useSensors( + useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), + useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }) + ) + + const propagateChange = useCallback((newItems: InternalFormField[]) => { + isLocalChange.current = true + setItems(newItems) + onChange(toExternal(newItems)) + }, [onChange]) + + const handleAdd = useCallback(() => { + const newItem: InternalFormField = { + _uid: generateUid(), + id: `field_${items.length + 1}`, + label: `Field ${items.length + 1}`, + type: 'string', + required: false, + } + propagateChange([...items, newItem]) + }, [items, propagateChange]) + + const handleRemove = useCallback((uid: string) => { + propagateChange(items.filter((item) => item._uid !== uid)) + }, [items, propagateChange]) + + const handleUpdate = useCallback((uid: string, updates: Partial) => { + propagateChange( + items.map((item) => (item._uid === uid ? { ...item, ...updates } : item)) + ) + }, [items, propagateChange]) + + const handleDragEnd = useCallback((event: DragEndEvent) => { + const { active, over } = event + if (!over || active.id === over.id) return + const oldIndex = items.findIndex((item) => item._uid === active.id) + const newIndex = items.findIndex((item) => item._uid === over.id) + if (oldIndex !== -1 && newIndex !== -1) { + propagateChange(arrayMove(items, oldIndex, newIndex)) + } + }, [items, propagateChange]) + + const itemIds = items.map((item) => item._uid) + + return ( +
+
+ + +
+ + {items.length === 0 ? ( +
+

No fields defined yet

+ +
+ ) : ( + + +
+ {items.map((item) => ( + + ))} +
+ + + )} +
+ ) +} diff --git a/frontend/src/components/workflow/HumanInputDialog.tsx b/frontend/src/components/workflow/HumanInputDialog.tsx new file mode 100644 index 00000000..d6f90c83 --- /dev/null +++ b/frontend/src/components/workflow/HumanInputDialog.tsx @@ -0,0 +1,57 @@ +import { useEffect, useState } from 'react' +import { api } from '@/services/api' +import { useWorkflowUiStore } from '@/store/workflowUiStore' +import { Dialog, DialogContent } from '@/components/ui/dialog' +import { Button } from '@/components/ui/button' +import { Loader2, AlertCircle } from 'lucide-react' +import { HumanInputResolutionView, type HumanInputRequest } from './HumanInputResolutionView' + +export function HumanInputDialog() { + const { humanInputRequestId, humanInputDialogOpen, closeHumanInputDialog } = useWorkflowUiStore() + + const [request, setRequest] = useState(null) + const [loading, setLoading] = useState(false) + const [error, setError] = useState(null) + + useEffect(() => { + if (humanInputDialogOpen && humanInputRequestId) { + setLoading(true) + setError(null) + api.humanInputs.get(humanInputRequestId) + .then(data => setRequest(data as unknown as HumanInputRequest)) + .catch(err => setError(err.message)) + .finally(() => setLoading(false)) + } else { + setRequest(null) + } + }, [humanInputDialogOpen, humanInputRequestId]) + + const isOpen = humanInputDialogOpen && !!humanInputRequestId + + return ( + !open && closeHumanInputDialog()}> + + {loading ? ( +
+ +

Loading request details...

+
+ ) : error ? ( +
+ +

{error}

+ +
+ ) : request ? ( +
+ closeHumanInputDialog()} + onCancel={() => closeHumanInputDialog()} + /> +
+ ) : null} + + + ) +} diff --git a/frontend/src/components/workflow/HumanInputResolutionView.tsx b/frontend/src/components/workflow/HumanInputResolutionView.tsx new file mode 100644 index 00000000..b033ae8d --- /dev/null +++ b/frontend/src/components/workflow/HumanInputResolutionView.tsx @@ -0,0 +1,466 @@ +import { useMemo, useState } from 'react' +import { Button } from '@/components/ui/button' +import { Badge } from '@/components/ui/badge' +import { Input } from '@/components/ui/input' +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select' +import { Textarea } from '@/components/ui/textarea' +import { Label } from '@/components/ui/label' +import { MarkdownView } from '@/components/ui/markdown' +import { Card, CardContent, CardDescription, CardHeader } from '@/components/ui/card' +import { CheckCircle, XCircle, Clock, Loader2 } from 'lucide-react' +import { cn } from '@/lib/utils' +import { api } from '@/services/api' +import { useToast } from '@/components/ui/use-toast' + +export interface HumanInputRequest { + id: string + runId: string + workflowId: string + nodeRef: string + status: 'pending' | 'resolved' | 'expired' | 'cancelled' + inputType: string + title: string + description: string | null + inputSchema: any | null + context: Record | null + resolveToken: string + timeoutAt: string | null + respondedAt: string | null + respondedBy: string | null + responseData: Record | null + createdAt: string + updatedAt: string +} + +interface HumanInputResolutionViewProps { + request: HumanInputRequest + onResolved?: (request: HumanInputRequest) => void + onCancel?: () => void + initialAction?: 'approve' | 'reject' | 'view' +} + +const STATUS_ICONS: Record = { + pending: Clock, + approved: CheckCircle, + rejected: XCircle, + expired: Clock, + cancelled: XCircle, +} + +const STATUS_VARIANTS: Record = { + pending: 'default', + approved: 'secondary', + rejected: 'destructive', + expired: 'outline', + cancelled: 'outline', +} + +const formatDateTime = (value?: string | null) => { + if (!value) return 'β€”' + const date = new Date(value) + return new Intl.DateTimeFormat('en-US', { + month: 'short', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + timeZoneName: 'short', + }).format(date) +} + +export function HumanInputResolutionView({ + request, + onResolved, + onCancel, + initialAction = 'approve' +}: HumanInputResolutionViewProps) { + const { toast } = useToast() + const [submitting, setSubmitting] = useState(false) + const [resolveAction, setResolveAction] = useState<'approve' | 'reject' | 'view'>( + request.status === 'pending' ? initialAction : 'view' + ) + const [responseNote, setResponseNote] = useState('') + const [formValues, setFormValues] = useState>({}) + const [selectedOptions, setSelectedOptions] = useState([]) + + const parsedInputSchema = useMemo(() => { + if (!request.inputSchema) return null + if (typeof request.inputSchema === 'object') return request.inputSchema + try { + return JSON.parse(request.inputSchema) + } catch (e) { + console.error('Failed to parse inputSchema:', e) + return null + } + }, [request.inputSchema]) + + const handleResolve = async () => { + if (request.status !== 'pending') return + + setSubmitting(true) + + try { + const isApprovalType = request.inputType === 'approval' || request.inputType === 'review' + const data: any = { + comment: responseNote || undefined, + approved: resolveAction === 'approve' + } + + if (isApprovalType) { + data.status = resolveAction === 'approve' ? 'approved' : 'rejected' + } + + if (request.inputType === 'selection') { + data.selection = parsedInputSchema?.multiple ? selectedOptions : selectedOptions[0] + } else if (request.inputType === 'form') { + Object.assign(data, formValues) + } + + const updatedRequest = await api.humanInputs.resolve(request.id, { + status: 'resolved', + responseData: data, + comment: responseNote || undefined + }) + + const actionText = request.inputType === 'acknowledge' ? 'Acknowledged' : (resolveAction === 'approve' ? 'Approved' : 'Rejected') + toast({ + title: actionText, + description: `"${request.title}" has been ${actionText.toLowerCase()}.`, + }) + + onResolved?.(updatedRequest as unknown as HumanInputRequest) + } catch (err) { + toast({ + title: 'Action failed', + description: err instanceof Error ? err.message : 'Try again in a moment.', + variant: 'destructive', + }) + } finally { + setSubmitting(false) + } + } + + const renderStatusBadge = (status: string) => { + const variant = STATUS_VARIANTS[status] || 'outline' + const label = status.charAt(0).toUpperCase() + status.slice(1) + const Icon = STATUS_ICONS[status] || Clock + return ( + + + {label} + + ) + } + + const isPending = request.status === 'pending' + + return ( +
+
+ + {request.inputType.toUpperCase()} + +
+ ID: {request.id.substring(0, 8)} +
+
+ +
+

{request.title}

+
+ Created {formatDateTime(request.createdAt)} +
+
+ + {request.description && ( +
+ +
+ +
+
+ )} + + {/* Input UI for Pending Tasks */} + {isPending && resolveAction !== 'view' && ( +
+ {request.inputType === 'approval' && ( +
+ +
+ + +
+
+ )} + + {request.inputType === 'review' && ( +
+
+ + +
+
+ )} + + {request.inputType === 'acknowledge' && ( +
+
+ +
+

+ Please acknowledge that you have reviewed the details above. +

+
+ )} + + {request.inputType === 'selection' && ( +
+ +
+ {(parsedInputSchema?.options || []).map((option: any) => { + const value = typeof option === 'string' ? option : option.value + const label = typeof option === 'string' ? option : option.label + const isSelected = selectedOptions.includes(value) + + return ( + + ) + })} +
+
+ )} + + {request.inputType === 'form' && parsedInputSchema?.properties && ( +
+ +
+ {Object.entries(parsedInputSchema.properties).map(([key, prop]: [string, any]) => ( +
+
+ +
+ {prop.type === 'string' && prop.enum ? ( + + ) : prop.type === 'string' ? ( + setFormValues(prev => ({ ...prev, [key]: e.target.value }))} + placeholder={prop.description || ""} + /> + ) : (prop.type === 'number' || prop.type === 'integer') ? ( + setFormValues(prev => ({ ...prev, [key]: parseFloat(e.target.value) }))} + /> + ) : prop.type === 'boolean' ? ( +
+ setFormValues(prev => ({ ...prev, [key]: e.target.checked }))} + /> + +
+ ) : ( +