feat(sandbox): use extension field for file icon type mapping

Enhance getFileIconType to accept an extension parameter and cover all
13 FileAppearanceTypeEnum types using an O(1) Map lookup. Update all
call sites to pass the API-provided extension for accurate icon display.

web/app/components/workflow/skill/file-tree/artifacts-tree.tsx

@@ -58,7 +58,7 @@ const ArtifactsTreeNode: FC<ArtifactsTreeNodeProps> = ({
     onDownload(node)
   }, [node, onDownload])
 
-  const fileIconType = !isFolder ? getFileIconType(node.name) : null
+  const fileIconType = !isFolder ? getFileIconType(node.name, node.extension) : null
 
   return (
     <div>

web/app/components/workflow/skill/file-tree/tree-node-icon.tsx

@@ -14,6 +14,7 @@ type TreeNodeIconProps = {
   isFolder: boolean
   isOpen: boolean
   fileName: string
+  extension?: string
   isDirty: boolean
   onToggle?: (e: React.MouseEvent) => void
 }
@@ -22,6 +23,7 @@ export const TreeNodeIcon: FC<TreeNodeIconProps> = ({
   isFolder,
   isOpen,
   fileName,
+  extension,
   isDirty,
   onToggle,
 }) => {
@@ -46,7 +48,7 @@ export const TreeNodeIcon: FC<TreeNodeIconProps> = ({
     )
   }
 
-  const fileIconType = getFileIconType(fileName)
+  const fileIconType = getFileIconType(fileName, extension)
 
   return (
     <div className="relative flex size-full items-center justify-center">

web/app/components/workflow/skill/file-tree/tree-node.tsx

@@ -126,6 +126,7 @@ const TreeNode = ({ node, style, dragHandle, treeChildren }: TreeNodeProps) => {
             isFolder={isFolder}
             isOpen={node.isOpen}
             fileName={node.data.name}
+            extension={node.data.extension}
             isDirty={isDirty}
             onToggle={handleToggle}
           />