feat(files): let the user set a file's type from the header dropdown

The file-detail filename dropdown gains a Type submenu offering the text-editable
types (nine document formats plus a nested Code group). Picking one swaps the
file's extension and its stored contentType in a single write, leaving the bytes
untouched, so a file created as untitled.md can become untitled.json and open in
the right editor.

Renaming previously never touched contentType, so name and type could silently
diverge; the retype path keeps them in agreement and the server re-derives the
pairing rather than trusting the client.

Author: mzxchandra

.gitignore

@@ -111,3 +111,4 @@ __pycache__/
 # `apps/sim/lib/uploads/` — 61 files of tracked source — and silently ignore
 # anything added there later.
 /uploads
+.gstack/

apps/sim/app/api/workspaces/[id]/files/[fileId]/route.test.ts

@@ -0,0 +1,166 @@
+/**
+ * @vitest-environment node
+ */
+import { authMockFns, permissionsMock, permissionsMockFns } from '@sim/testing'
+import { NextRequest } from 'next/server'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockPerformRenameWorkspaceFile, mockPerformDeleteWorkspaceFileItems } = vi.hoisted(() => ({
+  mockPerformRenameWorkspaceFile: vi.fn(),
+  mockPerformDeleteWorkspaceFileItems: vi.fn(),
+}))
+
+vi.mock('@/lib/workspace-files/orchestration', () => ({
+  performDeleteWorkspaceFileItems: mockPerformDeleteWorkspaceFileItems,
+  performRenameWorkspaceFile: mockPerformRenameWorkspaceFile,
+}))
+
+vi.mock('@/lib/posthog/server', () => ({
+  captureServerEvent: vi.fn(),
+}))
+
+vi.mock('@/lib/workspaces/permissions/utils', () => permissionsMock)
+
+const WS = '7727ef3f-8cf6-4686-b063-2bb006a10785'
+const FILE_ID = 'ec28e5d5-898a-48f0-aa6f-2fd7427c9563'
+
+import { captureServerEvent } from '@/lib/posthog/server'
+import { PATCH } from '@/app/api/workspaces/[id]/files/[fileId]/route'
+
+const params = () => ({ params: Promise.resolve({ id: WS, fileId: FILE_ID }) })
+
+const patchRequest = (body: unknown) =>
+  new NextRequest(`http://localhost/api/workspaces/${WS}/files/${FILE_ID}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+
+const RENAMED_FILE = {
+  id: FILE_ID,
+  workspaceId: WS,
+  name: 'untitled.json',
+  key: `workspace/${WS}/mock-key`,
+  path: '/api/files/serve/mock-key?context=workspace',
+  size: 0,
+  type: 'application/json',
+  uploadedBy: 'user-1',
+  folderId: null,
+  uploadedAt: new Date('2026-04-13T00:00:00.000Z'),
+  updatedAt: new Date('2026-04-13T00:00:00.000Z'),
+}
+
+describe('PATCH /api/workspaces/[id]/files/[fileId]', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    authMockFns.mockGetSession.mockResolvedValue({
+      user: { id: 'user-1', name: 'User One', email: 'u@example.com' },
+    })
+    permissionsMockFns.mockGetUserEntityPermissions.mockResolvedValue('write')
+    mockPerformRenameWorkspaceFile.mockResolvedValue({ success: true, file: RENAMED_FILE })
+  })
+
+  describe('auth', () => {
+    it('returns 401 when unauthenticated', async () => {
+      authMockFns.mockGetSession.mockResolvedValueOnce(null)
+      const res = await PATCH(patchRequest({ name: 'notes.md' }), params())
+      expect(res.status).toBe(401)
+    })
+
+    it('returns 403 for a read-only member', async () => {
+      permissionsMockFns.mockGetUserEntityPermissions.mockResolvedValueOnce('read')
+      const res = await PATCH(patchRequest({ name: 'notes.md' }), params())
+      expect(res.status).toBe(403)
+      expect(mockPerformRenameWorkspaceFile).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('rename only', () => {
+    it('forwards the name with no contentType', async () => {
+      const res = await PATCH(patchRequest({ name: 'notes.md' }), params())
+
+      expect(res.status).toBe(200)
+      expect(mockPerformRenameWorkspaceFile).toHaveBeenCalledWith(
+        expect.objectContaining({ name: 'notes.md', contentType: undefined })
+      )
+      expect(captureServerEvent).toHaveBeenCalledWith(
+        'user-1',
+        'file_renamed',
+        expect.anything(),
+        expect.anything()
+      )
+    })
+
+    it('returns 409 on a name conflict', async () => {
+      mockPerformRenameWorkspaceFile.mockResolvedValueOnce({
+        success: false,
+        error: 'A file named "notes.md" already exists',
+        errorCode: 'conflict',
+      })
+      const res = await PATCH(patchRequest({ name: 'notes.md' }), params())
+      expect(res.status).toBe(409)
+    })
+  })
+
+  describe('retype', () => {
+    it('forwards a valid name and contentType pair', async () => {
+      const res = await PATCH(
+        patchRequest({ name: 'untitled.json', contentType: 'application/json' }),
+        params()
+      )
+
+      expect(res.status).toBe(200)
+      expect(await res.json()).toMatchObject({
+        success: true,
+        file: expect.objectContaining({ name: 'untitled.json', type: 'application/json' }),
+      })
+      expect(mockPerformRenameWorkspaceFile).toHaveBeenCalledWith(
+        expect.objectContaining({ name: 'untitled.json', contentType: 'application/json' })
+      )
+    })
+
+    it('reports a retype separately from a rename', async () => {
+      await PATCH(
+        patchRequest({ name: 'untitled.json', contentType: 'application/json' }),
+        params()
+      )
+
+      expect(captureServerEvent).toHaveBeenCalledWith(
+        'user-1',
+        'file_type_changed',
+        expect.objectContaining({ content_type: 'application/json' }),
+        expect.anything()
+      )
+    })
+
+    it('rejects a contentType outside the selectable allowlist', async () => {
+      const res = await PATCH(
+        patchRequest({ name: 'installer.exe', contentType: 'application/x-msdownload' }),
+        params()
+      )
+
+      expect(res.status).toBe(400)
+      expect(mockPerformRenameWorkspaceFile).not.toHaveBeenCalled()
+    })
+
+    it('rejects a contentType that disagrees with the name extension', async () => {
+      const res = await PATCH(
+        patchRequest({ name: 'untitled.json', contentType: 'text/markdown' }),
+        params()
+      )
+
+      expect(res.status).toBe(400)
+      expect(mockPerformRenameWorkspaceFile).not.toHaveBeenCalled()
+    })
+
+    it('rejects a contentType paired with an extension no type writes', async () => {
+      const res = await PATCH(
+        patchRequest({ name: 'notes.yml', contentType: 'application/x-yaml' }),
+        params()
+      )
+
+      expect(res.status).toBe(400)
+      expect(mockPerformRenameWorkspaceFile).not.toHaveBeenCalled()
+    })
+  })
+})

apps/sim/app/api/workspaces/[id]/files/[fileId]/route.ts

@@ -37,7 +37,7 @@ export const PATCH = withRouteHandler(
       const parsed = await parseRequest(renameWorkspaceFileContract, request, context)
       if (!parsed.success) return parsed.response
       const { id: workspaceId, fileId } = parsed.data.params
-      const { name } = parsed.data.body
+      const { name, contentType } = parsed.data.body
 
       const userPermission = await getUserEntityPermissions(
         session.user.id,
@@ -56,6 +56,7 @@ export const PATCH = withRouteHandler(
         fileId,
         name,
         userId: session.user.id,
+        contentType,
       })
       if (!result.success || !result.file) {
         return NextResponse.json(
@@ -66,12 +67,21 @@ export const PATCH = withRouteHandler(
 
       logger.info(`[${requestId}] Renamed workspace file: ${fileId} to "${result.file.name}"`)
 
-      captureServerEvent(
-        session.user.id,
-        'file_renamed',
-        { workspace_id: workspaceId },
-        { groups: { workspace: workspaceId } }
-      )
+      if (contentType) {
+        captureServerEvent(
+          session.user.id,
+          'file_type_changed',
+          { workspace_id: workspaceId, content_type: contentType },
+          { groups: { workspace: workspaceId } }
+        )
+      } else {
+        captureServerEvent(
+          session.user.id,
+          'file_renamed',
+          { workspace_id: workspaceId },
+          { groups: { workspace: workspaceId } }
+        )
+      }
       return NextResponse.json({
         success: true,
         file: result.file,

apps/sim/app/workspace/[workspaceId]/components/index.ts

@@ -13,7 +13,11 @@ export {
 export type {
   BreadcrumbEditing,
   BreadcrumbItem,
+  DropdownMenuOption,
   DropdownOption,
+  DropdownRadioGroup,
+  DropdownRadioItem,
+  DropdownSubmenuOption,
   ResourceAction,
 } from './resource/components/resource-header'
 export type {

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/index.ts

@@ -1,7 +1,11 @@
 export type {
   BreadcrumbEditing,
   BreadcrumbItem,
+  DropdownMenuOption,
   DropdownOption,
+  DropdownRadioGroup,
+  DropdownRadioItem,
+  DropdownSubmenuOption,
   ResourceAction,
 } from './resource-header'
 export { ResourceHeader } from './resource-header'

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx

@@ -20,6 +20,11 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
   FloatingTooltip,
   POPOVER_ANIMATION_CLASSES,
@@ -44,6 +49,77 @@ export interface DropdownOption {
   disabled?: boolean
 }
 
+export interface DropdownRadioItem {
+  /** Selection value, matched against {@link DropdownSubmenuOption.value}. */
+  id: string
+  label: string
+}
+
+export interface DropdownRadioGroup {
+  /**
+   * Nests the group behind a submenu of its own when set. Use it to keep a long tail of options
+   * (a language list, say) off the top level without losing them.
+   */
+  submenuLabel?: string
+  items: DropdownRadioItem[]
+}
+
+/**
+ * A dropdown entry that opens a submenu of mutually exclusive choices rather than firing an action.
+ * Distinguished from {@link DropdownOption} by `groups`, so the two can share one list.
+ */
+export interface DropdownSubmenuOption {
+  label: string
+  icon?: React.ElementType
+  groups: DropdownRadioGroup[]
+  /** The currently selected `id`, or undefined when the value is not one of the offered choices. */
+  value?: string
+  onValueChange: (id: string) => void
+  disabled?: boolean
+}
+
+export type DropdownMenuOption = DropdownOption | DropdownSubmenuOption
+
+function isSubmenuOption(option: DropdownMenuOption): option is DropdownSubmenuOption {
+  return 'groups' in option
+}
+
+interface DropdownRadioGroupContentProps {
+  group: DropdownRadioGroup
+  value?: string
+  onValueChange: (id: string) => void
+}
+
+/**
+ * One radio group inside a {@link DropdownSubmenuOption}, nested behind its own submenu when the
+ * group carries a `submenuLabel`. Every group is handed the same `value`; only the one that owns it
+ * renders a selected indicator, which is what lets the selection read correctly across groups.
+ */
+function DropdownRadioGroupContent({
+  group,
+  value,
+  onValueChange,
+}: DropdownRadioGroupContentProps) {
+  const items = (
+    <DropdownMenuRadioGroup value={value} onValueChange={onValueChange}>
+      {group.items.map((item) => (
+        <DropdownMenuRadioItem key={item.id} value={item.id}>
+          {item.label}
+        </DropdownMenuRadioItem>
+      ))}
+    </DropdownMenuRadioGroup>
+  )
+
+  if (!group.submenuLabel) return items
+
+  return (
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger>{group.submenuLabel}</DropdownMenuSubTrigger>
+      <DropdownMenuSubContent>{items}</DropdownMenuSubContent>
+    </DropdownMenuSub>
+  )
+}
+
 export interface BreadcrumbEditing {
   isEditing: boolean
   value: string
@@ -63,7 +139,7 @@ export interface BreadcrumbItem {
   label: string
   icon?: React.ElementType
   onClick?: () => void
-  dropdownItems?: DropdownOption[]
+  dropdownItems?: DropdownMenuOption[]
   editing?: BreadcrumbEditing
   /**
    * Marks a non-navigable trailing crumb (e.g. "New Chunk", "Loading...") so the
@@ -266,7 +342,7 @@ interface BreadcrumbSegmentProps {
   icon?: React.ElementType
   label: string
   onClick?: () => void
-  dropdownItems?: DropdownOption[]
+  dropdownItems?: DropdownMenuOption[]
   editing?: BreadcrumbEditing
   className?: string
 }
@@ -327,6 +403,26 @@ const BreadcrumbSegment = memo(function BreadcrumbSegment({
           <DropdownMenuContent align='start'>
             {dropdownItems.map((item) => {
               const ItemIcon = item.icon
+              if (isSubmenuOption(item)) {
+                return (
+                  <DropdownMenuSub key={item.label}>
+                    <DropdownMenuSubTrigger disabled={item.disabled}>
+                      {ItemIcon && <ItemIcon className='size-[14px]' />}
+                      {item.label}
+                    </DropdownMenuSubTrigger>
+                    <DropdownMenuSubContent>
+                      {item.groups.map((group) => (
+                        <DropdownRadioGroupContent
+                          key={group.submenuLabel ?? 'default'}
+                          group={group}
+                          value={item.value}
+                          onValueChange={item.onValueChange}
+                        />
+                      ))}
+                    </DropdownMenuSubContent>
+                  </DropdownMenuSub>
+                )
+              }
               return (
                 <DropdownMenuItem key={item.label} onClick={item.onClick} disabled={item.disabled}>
                   {ItemIcon && <ItemIcon className='size-[14px]' />}