[Web UI] Replace `vcStatus as any` pattern across execution components

[santoshkumarradha]

Summary

The vcStatus as any type suppression is duplicated across 4+ execution-related TSX components. A single proper type definition would fix all of them simultaneously.

Current State

The following components all cast vcStatus as any when passing VC status data to child components:

File	Line	Code
CompactExecutionHeader.tsx	L248	vcData={vcStatus as any}
ExecutionHeader.tsx	L274	vcData={vcStatus as any}
EnhancedExecutionHeader.tsx	L329	vcData={vcStatus as any}
ExecutionIdentityPanel.tsx	L169	vcData={vcStatus as any}
ExecutionHero.tsx	L72	vcData={vcStatus as any}

Additionally, ExecutionHero.tsx has status={execution.status as any} at L137.

Root Cause

The vcStatus variable's type (likely from an API response or hook) doesn't match the vcData prop type expected by VC display components (e.g., VCVerificationCard, SimpleVCTag). Instead of fixing the type mismatch, as any was used as a workaround.

Proposed Fix

1. Define a shared VCStatusData interface that represents the VC status shape:

// src/types/vc.ts (or alongside existing VC components)
export interface VCStatusData {
  verified: boolean;
  credentialId?: string;
  issuerDid?: string;
  subjectDid?: string;
  issuanceDate?: string;
  // ... other fields from actual API response
}

2. Update the VC display components (VCVerificationCard, SimpleVCTag, etc.) to accept VCStatusData as their vcData prop type.

3. Update the hooks/API response types to return VCStatusData.

4. Remove all as any casts — TypeScript should now type-check cleanly.

Additional as any in Web UI TSX

While fixing this pattern, also consider these other TSX as any instances found in the audit:

File	Line	Code	Fix
HoverDetailPanel.tsx	L145-146	(node as any).agent_name	Add agent_name/task_name to workflow node type
ExecutionQueue.tsx	L455, 568	e as any	Fix React event type for click handler
EnhancedJsonViewer.tsx	L91, 116	typeof obj as any, type as any	Use proper JSON value type union
EnhancedModal.tsx	L152	value as any	Type Radix UI onValueChange callback
ResponsiveGrid.tsx	L333	ref as any	Fix React ref forwarding type

Total: 14 as any across 10 TSX files.

Acceptance Criteria

• VCStatusData type defined and shared across components
• All vcStatus as any casts removed (5 instances in 5 files)
• Remaining 9 as any in other TSX files addressed
• TypeScript compilation passes
• npm run lint passes
• No @ts-ignore or @ts-expect-error introduced

Files

• src/components/execution/CompactExecutionHeader.tsx
• src/components/execution/ExecutionHeader.tsx
• src/components/execution/EnhancedExecutionHeader.tsx
• src/components/execution/ExecutionIdentityPanel.tsx
• src/components/execution/ExecutionHero.tsx
• src/components/WorkflowDAG/HoverDetailPanel.tsx
• src/components/reasoners/ExecutionQueue.tsx
• src/components/reasoners/EnhancedJsonViewer.tsx
• src/components/execution/EnhancedModal.tsx
• src/components/layout/ResponsiveGrid.tsx

Related Issues

• [Web UI] Replace any types in ExecutionForm.tsx #105 — Replace any types in ExecutionForm.tsx (same pattern, different file)
• feat: abstract SDK-injected prompt text into a configurable PromptTemplates layer #229 — PromptTemplates (broader SDK quality initiative)

---

Using AI to solve this issue? Read our AI-Assisted Contributions guide for testing requirements, prompt strategies, and common pitfalls to avoid.

[anujboddu]

Hi! I’d like to work on this issue.

[github-actions]

Thanks for picking this up, @anujboddu! 🎉

Here's what to expect:

• We'll check in after 7 days if we haven't heard an update
• After 14 days, we'll send a second reminder
• After 21 days without activity, we'll unassign to let others contribute

Tips for success:

• Drop a comment when you start working on it
• Share any blockers - we're here to help!
• Link your PR with Fixes #233 in the description

Happy coding! 🚀