fix(web-ui): replace vcStatus any casts with shared VCStatusData

control-plane/web/client/src/components/WorkflowDAG/HoverDetailPanel.tsx

@@ -142,8 +142,8 @@ export const HoverDetailPanel = memo(({ node, position, visible }: HoverDetailPa
   const tone = statusTone[toneKey];
 
   // Handle optional fields that may not exist on WorkflowDAGLightweightNode
-  const agentNameField = (node as any).agent_name;
-  const taskNameField = (node as any).task_name;
+  const agentNameField = node.agent_name;
+  const taskNameField = node.task_name;
 
   const agentColor = agentColorManager.getAgentColor(
     agentNameField || node.agent_node_id,

control-plane/web/client/src/components/execution/CompactExecutionHeader.tsx

@@ -8,6 +8,7 @@ import {
 import { ArrowDown, ArrowUp } from "@/components/ui/icon-bridge";
 import { useNavigate } from "react-router-dom";
 import type { WorkflowExecution } from "../../types/executions";
+import type { VCStatusData } from "../../types/vc";
 import { DIDDisplay } from "../did/DIDDisplay";
 import { Button } from "../ui/button";
 import { CopyButton } from "../ui/copy-button";
@@ -18,13 +19,7 @@ import { normalizeExecutionStatus } from "../../utils/status";
 
 interface CompactExecutionHeaderProps {
   execution: WorkflowExecution;
-  vcStatus?: {
-    has_vc: boolean;
-    vc_id?: string;
-    status: string;
-    created_at?: string;
-    vc_document?: any;
-  } | null;
+  vcStatus?: VCStatusData | null;
   vcLoading?: boolean;
   onClose?: () => void;
 }
@@ -245,7 +240,7 @@ export function CompactExecutionHeader({
               <VerifiableCredentialBadge
                 hasVC={vcStatus.has_vc}
                 status={vcStatus.status}
-                vcData={vcStatus as any}
+                vcData={vcStatus}
                 executionId={execution.execution_id}
                 showCopyButton={false}
                 showVerifyButton={false}

control-plane/web/client/src/components/execution/EnhancedExecutionHeader.tsx

@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/icon-bridge";
 import { useNavigate } from "react-router-dom";
 import type { WorkflowExecution } from "../../types/executions";
+import type { VCStatusData } from "../../types/vc";
 import { DIDDisplay } from "../did/DIDDisplay";
 import { Button } from "../ui/button";
 import { Badge } from "../ui/badge";
@@ -22,13 +23,7 @@ import { CopyButton } from "../ui/copy-button";
 
 interface EnhancedExecutionHeaderProps {
   execution: WorkflowExecution;
-  vcStatus?: {
-    has_vc: boolean;
-    vc_id?: string;
-    status: string;
-    created_at?: string;
-    vc_document?: any;
-  } | null;
+  vcStatus?: VCStatusData | null;
   vcLoading?: boolean;
   onClose?: () => void;
 }
@@ -326,7 +321,7 @@ export function EnhancedExecutionHeader({
                 <VerifiableCredentialBadge
                   hasVC={vcStatus.has_vc}
                   status={vcStatus.status}
-                  vcData={vcStatus as any}
+                  vcData={vcStatus}
                   executionId={execution.execution_id}
                   showCopyButton={false}
                   showVerifyButton={false}

control-plane/web/client/src/components/execution/EnhancedModal.tsx

@@ -100,6 +100,10 @@ function EnhancedModal({
 export function DataModal({ isOpen, onClose, title, icon, data }: DataModalProps) {
   const [viewMode, setViewMode] = React.useState<"formatted" | "raw" | "markdown">("formatted");
 
+  const isViewMode = (value: string): value is "formatted" | "raw" | "markdown" => {
+    return value === "formatted" || value === "raw" || value === "markdown";
+  };
+
   const jsonString = React.useMemo(() => {
     try {
       return JSON.stringify(data, null, 2);
@@ -149,7 +153,11 @@ export function DataModal({ isOpen, onClose, title, icon, data }: DataModalProps
         <div className="flex-shrink-0 border-b border-border bg-background/95">
           <Tabs
             value={viewMode}
-            onValueChange={(value) => setViewMode(value as any)}
+            onValueChange={(value) => {
+              if (isViewMode(value)) {
+                setViewMode(value);
+              }
+            }}
             className="w-full"
           >
             <TabsList variant="underline" className="grid w-full grid-cols-3 h-12">

control-plane/web/client/src/components/execution/ExecutionHeader.tsx

@@ -8,6 +8,7 @@ import {
 } from "@/components/ui/icon-bridge";
 import { useNavigate } from "react-router-dom";
 import type { WorkflowExecution } from "../../types/executions";
+import type { VCStatusData } from "../../types/vc";
 import type { CanonicalStatus } from "../../utils/status";
 import { DIDDisplay } from "../did/DIDDisplay";
 import StatusIndicator from "../ui/status-indicator";
@@ -25,13 +26,7 @@ import {
 
 interface ExecutionHeaderProps {
   execution: WorkflowExecution;
-  vcStatus?: {
-    has_vc: boolean;
-    vc_id?: string;
-    status: string;
-    created_at?: string;
-    vc_document?: any;
-  } | null;
+  vcStatus?: VCStatusData | null;
   vcLoading?: boolean;
   onNavigateBack?: () => void;
 }
@@ -271,7 +266,7 @@ export function ExecutionHeader({
                 <VerifiableCredentialBadge
                   hasVC={vcStatus.has_vc}
                   status={vcStatus.status}
-                  vcData={vcStatus as any}
+                  vcData={vcStatus}
                   executionId={execution.execution_id}
                   showCopyButton={false}
                   showVerifyButton={false}

control-plane/web/client/src/components/execution/ExecutionHero.tsx

@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/icon-bridge";
 import { useNavigate } from "react-router-dom";
 import type { WorkflowExecution } from "../../types/executions";
+import type { VCStatusData } from "../../types/vc";
 import { DIDDisplay } from "../did/DIDDisplay";
 import { Button } from "../ui/button";
 import { Card, CardContent } from "../ui/card";
@@ -20,16 +21,11 @@ import { CopyButton } from "../ui/copy-button";
 import { ExecutionTimeline } from "./ExecutionTimeline";
 import { statusTone } from "@/lib/theme";
 import { cn } from "@/lib/utils";
+import { normalizeExecutionStatus } from "../../utils/status";
 
 interface ExecutionHeroProps {
   execution: WorkflowExecution;
-  vcStatus?: {
-    has_vc: boolean;
-    vc_id?: string;
-    status: string;
-    created_at?: string;
-    vc_document?: any;
-  } | null;
+  vcStatus?: VCStatusData | null;
   vcLoading?: boolean;
 }
 
@@ -38,13 +34,7 @@ function VCStatusCard({
   vcLoading,
   executionId,
 }: {
-  vcStatus?: {
-    has_vc: boolean;
-    vc_id?: string;
-    status: string;
-    created_at?: string;
-    vc_document?: any;
-  } | null;
+  vcStatus?: VCStatusData | null;
   vcLoading?: boolean;
   executionId: string;
 }) {
@@ -69,7 +59,7 @@ function VCStatusCard({
           <VerifiableCredentialBadge
             hasVC={vcStatus.has_vc}
             status={vcStatus.status}
-            vcData={vcStatus as any}
+            vcData={vcStatus}
             executionId={executionId}
             showCopyButton={true}
             showVerifyButton={true}
@@ -134,7 +124,7 @@ export function ExecutionHero({
                   {execution.reasoner_id}
                 </h1>
                 <StatusIndicator
-                  status={execution.status as any}
+                  status={normalizeExecutionStatus(execution.status)}
                   animated={execution.status === "running"}
                   className="text-base"
                 />

control-plane/web/client/src/components/execution/ExecutionIdentityPanel.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Shield, ExternalLink, AlertCircle, CheckCircle, Eye, Download, Loader2 } from "@/components/ui/icon-bridge";
 import { ResponsiveGrid } from "@/components/layout/ResponsiveGrid";
 import type { WorkflowExecution } from "../../types/executions";
+import type { VCStatusData } from "../../types/vc";
 import { DIDDisplay } from "../did/DIDDisplay";
 import { Button } from "../ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
@@ -13,13 +14,7 @@ import { CopyButton } from "../ui/copy-button";
 
 interface ExecutionIdentityPanelProps {
   execution: WorkflowExecution;
-  vcStatus?: {
-    has_vc: boolean;
-    vc_id?: string;
-    status: string;
-    created_at?: string;
-    vc_document?: any;
-  } | null;
+  vcStatus?: VCStatusData | null;
   vcLoading?: boolean;
 }
 
@@ -166,7 +161,7 @@ export function ExecutionIdentityPanel({
                     <VerifiableCredentialBadge
                       hasVC={vcStatus.has_vc}
                       status={vcStatus.status}
-                      vcData={vcStatus as any}
+                      vcData={vcStatus}
                       executionId={execution.execution_id}
                       showCopyButton={false}
                       showVerifyButton={false}

control-plane/web/client/src/components/layout/ResponsiveGrid.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type ElementType, type HTMLAttributes } from "react";
+import { forwardRef, type ElementType, type HTMLAttributes, type Ref } from "react";
 import { cn } from "@/lib/utils";
 
 type Breakpoint = "base" | "sm" | "md" | "lg" | "xl" | "2xl";
@@ -330,7 +330,7 @@ const ResponsiveGridItem = forwardRef<HTMLDivElement, ResponsiveGridItemProps>(
 
     return (
       <Component
-        ref={ref as any}
+        ref={ref as Ref<HTMLDivElement>}
         className={cn(spanClasses, className)}
         {...props}
       >