Fix TypeScript build errors, CSS scoping issues, and CI workflow failures

[Copilot]

Summary

TypeScript build was failing with 35 errors, blocking CI. Primary issue: <style jsx> syntax used without styled-jsx configuration in LaunchApprovalCard.tsx. Additionally addressed CSS scoping concerns by namespacing all class names to prevent global conflicts. Fixed CI workflow failures caused by Node.js version incompatibility with Prisma dependencies.

What changed

• Removed styled-jsx dependency: Converted <style jsx> to standard <style> tags in LaunchApprovalCard.tsx (line 145) and MissionDashboard.tsx (line 223)
• CSS scoping: Namespaced all CSS class names to prevent global scope conflicts
  • LaunchApprovalCard.tsx: Added launch-approval- prefix to all classes (e.g., .launch-approval-card, .launch-approval-header, .launch-approval-pill)
  • MissionDashboard.tsx: Added mission-dashboard- prefix to all classes (e.g., .mission-dashboard-container, .mission-dashboard-card, .mission-dashboard-grid)
  • Fixed CSS conflicts in select element styling (removed duplicate/conflicting properties)
• Type definitions: Added @types/express, @types/ws, @types/uuid for server-side code
• Type fixes:
  • Updated Stripe API version: 2025-11-17.clover → 2025-12-15.clover
  • Fixed ImageData constructor in VideoPrivacyPipeline (Uint8ClampedArray type mismatch)
  • Fixed stream write callback signature in VideoStreamHandler
  • Cast waypoint action to as const in mvp/server.ts
• Cleanup: Removed unused variables/methods to satisfy noUnusedLocals/noUnusedParameters
• Commented incomplete code: FlightOrchestrator usage in webhookRoutes (methods generateMission/executeMission don't exist)
• CI workflow fixes: Updated Node.js version from 18 to 20 in .github/workflows/security.yml for all security jobs (CodeQL Security Analysis, Dependency Vulnerability Scan, TypeScript Security Checks) to fix Prisma dependency compatibility (requires Node.js 20.19+, 22.12+, or 24.0+)

Testing

• Build passes: npm run build completes successfully
• No TypeScript errors (35 → 0)
• CodeQL security scan: 0 vulnerabilities
• CSS properly scoped with namespaced classes preventing conflicts
• CI security workflows now compatible with Prisma and other Node.js 20+ dependencies

Security/Compliance

• No secrets committed
• Logging avoids PHI (unless PHI_ENABLED + private endpoints + KV configured)

Screenshots

N/A - Build fix, CSS scoping improvements, and CI workflow updates

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[Copilot]

Pull request overview

This PR fixes 35 TypeScript build errors that were blocking CI, primarily caused by styled-jsx syntax incompatibilities with Vite and various type mismatches.

Changes:

• Converted <style jsx> to standard <style> tags in React components (removes scoped styling)
• Added missing TypeScript type definitions for server-side dependencies (@types/express, @types/ws, @types/uuid)
• Fixed type issues in services (ImageData constructor, Promise types, stream callbacks, unused parameters)
• Updated Stripe API version and commented out incomplete FlightOrchestrator functionality
• Removed genuinely unused code (dead methods, unused variables/imports)

Reviewed changes

Copilot reviewed 12 out of 13 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/services/VideoStreamHandler.ts	Fixed WriteStream callback signature with proper error handling and Promise typing
src/services/VideoPrivacyPipeline.ts	Fixed ImageData constructor to use Uint8ClampedArray, prefixed unused parameter
src/services/ThermalAnalyzer.ts	Prefixed unused parameter with underscore
src/services/FlightOrchestrator.ts	Removed unused imports, methods (awaitMissionCompletion, delay), and variables (currentMission, PreFlightCheckResult)
src/services/EventDispatcher.ts	Removed unused threatThresholds object
src/services/AutelDroneSDK.ts	Prefixed unused parameters with underscores
src/routes/webhookRoutes.ts	Commented out FlightOrchestrator usage with TODO notes, added type guards, prefixed unused request parameters
src/mvp/server.ts	Added const assertion to waypoint action for type narrowing
src/lib/stripe.ts	Updated Stripe API version from 2025-11-17.clover to 2025-12-15.clover
src/components/MissionDashboard.tsx	Converted styled-jsx to standard style tag, prefixed unused missionId parameter
src/components/LaunchApprovalCard.tsx	Converted styled-jsx to standard style tag
package.json	Added @types/express, @types/ws, @types/uuid dev dependencies
package-lock.json	Lockfile updates for new type definition packages

[Copilot]

The type guard for eventId is unnecessary. Express route parameters (from req.params) are always of type string, not string | string[]. The array type comes from query parameters (req.query), not route parameters.

This code can be simplified to:

const { eventId } = req.params;
const event = eventDispatcher.getEvent(eventId);
const droneResponse = eventDispatcher.getDroneResponse(eventId);

However, this change doesn't cause any issues and the code functions correctly as-is.

[Copilot]

Changing from <style jsx> to <style> removes CSS scoping and makes these styles global. This could cause naming conflicts with other components if they use the same class names (e.g., .header, .pill, .actions, button, select, etc.).

Consider using one of these alternatives:

1. CSS Modules with .module.css files for automatic scoping
2. Tailwind classes inline (already used elsewhere in the project)
3. A CSS-in-JS library compatible with Vite (e.g., styled-components, emotion)

If keeping regular <style> tags, namespace the class names to avoid conflicts (e.g., .launch-approval-card-header instead of .header).

[Copilot]

Fixed in commit 4df6a16. All CSS class names in LaunchApprovalCard.tsx are now namespaced with launch-approval- prefix to prevent global scope conflicts (e.g., .launch-approval-card, .launch-approval-header, .launch-approval-pill, etc.).

[Copilot]

Changing from <style jsx> to <style> removes CSS scoping and makes these styles global. This could cause naming conflicts with other components if they use the same class names (e.g., .card, .grid, .header, button, etc.).

Consider using one of these alternatives:

1. CSS Modules with .module.css files for automatic scoping
2. Tailwind classes inline (already used elsewhere in the project)
3. A CSS-in-JS library compatible with Vite (e.g., styled-components, emotion)

If keeping regular <style> tags, namespace the class names to avoid conflicts (e.g., .mission-dashboard-card instead of .card).

[Copilot]

Fixed in commit 4df6a16. All CSS class names in MissionDashboard.tsx are now namespaced with mission-dashboard- prefix to prevent global scope conflicts (e.g., .mission-dashboard-container, .mission-dashboard-card, .mission-dashboard-grid, etc.).

[aurelianware]

@copilot apply changes based on the comments in this thread

[Copilot]

@copilot apply changes based on the comments in this thread

Applied all changes from the review comments in commits 4df6a16 and 8de0210:

• Namespaced CSS classes in LaunchApprovalCard.tsx with launch-approval- prefix
• Namespaced CSS classes in MissionDashboard.tsx with mission-dashboard- prefix
• Fixed CSS conflicts in select element styling
• Note: The type guard for eventId in webhookRoutes.ts is actually necessary - TypeScript types route params as string | string[], so the check prevents type errors.

[aurelianware]

@copilot csn you fix the failing checks?

[Copilot]

@copilot csn you fix the failing checks?

Fixed in commit 1c136ab. Updated Node.js version from 18 to 20 in all security workflow jobs (.github/workflows/security.yml) to fix the Prisma dependency error that requires Node.js 20.19+, 22.12+, or 24.0+.

The Security Scanning workflow should now pass. The Azure ACR push failure is due to missing Azure credentials (AZURE_CLIENT_ID, AZURE_TENANT_ID) which are environment secrets and need to be configured in the repository settings - this cannot be fixed in code.