Fix Project file UI review regressions and sharing owner

Author: mzxchandra

apps/sim/app/o/[organizationId]/home/organization-home.test.tsx

@@ -1,6 +1,7 @@
 /** @vitest-environment jsdom */
 
 import { act, type ComponentProps, type ReactNode } from 'react'
+import { toast } from '@sim/emcn'
 import { authClientMock, authClientMockFns } from '@sim/testing/mocks/auth-client.mock'
 import {
   createMockDeploymentShape,
@@ -9,7 +10,6 @@ import {
 } from '@sim/testing/mocks/deployment-shape.mock'
 import { integrationMatcherMock } from '@sim/testing/mocks/integration-matcher.mock'
 import { kbConnectorsQueriesMock } from '@sim/testing/mocks/kb-connectors-queries.mock'
-import { nextNavigationMock } from '@sim/testing/mocks/next-navigation.mock'
 import {
   organizationProviderMock,
   organizationProviderMockFns,
@@ -24,6 +24,8 @@ import { useOrganizationChatModeStore } from '@/stores/organization-chat-mode/st
 
 const mocks = vi.hoisted(() => ({
   plan: false,
+  projects: true,
+  projectFiles: true,
   resourcePanel: vi.fn(),
   chat: vi.fn(),
   composer: vi.fn(),
@@ -40,11 +42,21 @@ const mocks = vi.hoisted(() => ({
   activeResource: null as string | null,
 }))
 vi.mock('@/app/workspace/[workspaceId]/providers/feature-flags-provider', () => ({
-  useFeatureFlag: (name: string) => (name === 'mothership-plan-mode' ? mocks.plan : false),
+  useFeatureFlag: (name: string) =>
+    name === 'mothership-plan-mode'
+      ? mocks.plan
+      : name === 'projects'
+        ? mocks.projects
+        : name === 'project-files'
+          ? mocks.projectFiles
+          : false,
 }))
 vi.mock('@/lib/core/config/deployment-shape', () => deploymentShapeMock)
 vi.mock('@/blocks/integration-matcher', () => integrationMatcherMock)
-vi.mock('next/navigation', () => nextNavigationMock)
+vi.mock(
+  'next/navigation',
+  async () => (await import('@sim/testing/mocks/next-navigation.mock')).nextNavigationMock
+)
 vi.mock('@tanstack/react-query', () => reactQueryMock)
 vi.mock('@/app/workspace/[workspaceId]/home/hooks/use-resource-panel', () => ({
   useResourcePanelController: () => ({
@@ -103,6 +115,8 @@ let root: Root
 let container: HTMLDivElement
 beforeEach(() => {
   useMothershipDraftsStore.setState({ drafts: {} })
+  mocks.projects = true
+  mocks.projectFiles = true
   mocks.plan = false
   mocks.activeResource = null
   mockSession.mockReturnValue({ data: { user: { id: 'reader' } } })
@@ -224,3 +238,31 @@ it('isolates saved drafts by user, organization, and conversation', async () =>
   await act(async () => renderHome(<OrganizationHome chatId='chat-a' requestMode='assistant' />))
   expect(composerProps().value).toBe('')
 })
+
+it.each([
+  [false, true],
+  [true, false],
+  [false, false],
+])(
+  'does not look up saved Project references with flags projects=%s, files=%s',
+  async (projects, projectFiles) => {
+    mocks.projects = projects
+    mocks.projectFiles = projectFiles
+    vi.spyOn(toast, 'error').mockReturnValue('lookup-error')
+    const fetch = vi.fn().mockRejectedValue(new Error('Project lookup is disabled'))
+    vi.stubGlobal('fetch', fetch)
+    await act(async () => renderHome(<OrganizationHome chatId='chat-a' />))
+    const selectResource = mocks.renderer.mock.lastCall?.[0].onWorkspaceResourceSelect
+    if (!selectResource) throw new Error('Chat resource selection is unavailable')
+    await act(async () =>
+      selectResource({
+        type: 'file',
+        id: 'file-a',
+        title: 'Saved Project file',
+        owner: { entityType: 'project', entityId: 'project-a' },
+      })
+    )
+    expect(fetch).not.toHaveBeenCalled()
+    expect(mocks.addResource).not.toHaveBeenCalled()
+  }
+)

apps/sim/app/o/[organizationId]/home/organization-home.tsx

@@ -97,6 +97,8 @@ function OrganizationHomeContent({
   const rememberMode = useOrganizationChatModeStore((state) => state.setMode)
   const [selectedMode, setSelectedMode] = useState<ChatRequestMode | null>(null)
   const planEnabled = useFeatureFlag('mothership-plan-mode')
+  const projectsEnabled = useFeatureFlag('projects')
+  const projectFilesEnabled = useFeatureFlag('project-files')
   const requestMode =
     selectedMode ??
     (urlSearchLevel && searchAccess.memberScoped && !chatId ? 'assistant' : undefined) ??
@@ -175,6 +177,7 @@ function OrganizationHomeContent({
     async (ref: WorkspaceResourceRef) => {
       try {
         if (ref.type === 'file' && ref.owner?.entityType === 'project') {
+          if (!projectsEnabled || !projectFilesEnabled) return
           if (!ref.id) throw new Error('Missing Project file identity')
           await requestJson(getProjectContract, {
             params: { id: ref.owner.entityId },
@@ -217,7 +220,7 @@ function OrganizationHomeContent({
         toast.error(`Couldn't open "${ref.title}". Check your access and try again.`)
       }
     },
-    [queryClient, addResource, organization.id]
+    [queryClient, addResource, organization.id, projectsEnabled, projectFilesEnabled]
   )
   const files = useFileAttachments({
     userId: session?.user?.id,

apps/sim/app/workspace/[workspaceId]/files/browser.tsx

@@ -80,7 +80,7 @@ interface FileOwnerTabsProps {
 }
 
 function FileOwnerTabs({ owner, projectId, workspaceId }: FileOwnerTabsProps) {
-  const { navigate } = useFileNavigation(owner)
+  const { navigate } = useFileNavigation({ owner })
   const { fileId } = useParams<{ fileId?: string }>()
   const [, setLocation] = useQueryStates({
     ...fileOwnerParsers,

apps/sim/app/workspace/[workspaceId]/files/components/file-detail/detail.tsx

@@ -28,7 +28,7 @@ interface FileDetailProps {
 /** Shared editor chrome; owner-specific queries and commands remain in their browser adapters. */
 export function FileDetail({ viewer, header, showSaveAction = false }: FileDetailProps) {
   const owner = viewer.owner ?? { entityType: 'workspace' as const, entityId: viewer.workspaceId }
-  const navigation = useFileNavigation(owner)
+  const navigation = useFileNavigation({ owner })
   const [previewMode, setPreviewMode] = useState<PreviewMode>(() =>
     !viewer.autoFocus && isPreviewable(viewer.file) ? 'preview' : 'editor'
   )

apps/sim/app/workspace/[workspaceId]/files/components/file-detail/navigation.tsx

@@ -103,7 +103,11 @@ export function FileNavigationProvider({ owner, fileId, children }: FileNavigati
   )
 }
 
-export function useFileNavigation(owner: EditableFileOwner) {
+interface UseFileNavigationProps {
+  owner: EditableFileOwner
+}
+
+export function useFileNavigation({ owner }: UseFileNavigationProps) {
   const controller = useContext(FileNavigationContext)
   if (
     !controller ||

apps/sim/app/workspace/[workspaceId]/files/components/file-history-modal.tsx

@@ -47,7 +47,7 @@ export function FileHistoryModal({
   const history = useFileHistory(owner, fileId, true)
   const revert = useRevertFileVersion(owner, fileId)
   const download = useDownloadFileVersion(owner, fileId)
-  const navigation = useFileNavigation(owner)
+  const navigation = useFileNavigation({ owner })
   const [scrollElement, setScrollElement] = useState<HTMLDivElement | null>(null)
   const [target, setTarget] = useState<{ version: number; expectedRevision: string } | null>(null)
   const edges = useScrollEdges(scrollElement)

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/editor-lifecycle.test.tsx

@@ -25,9 +25,11 @@ import { LoadedRichMarkdownEditor } from '@/app/workspace/[workspaceId]/files/co
 
 nextNavigationMockFns.mockUsePathname.mockReturnValue('/workspace/workspace-1/files')
 
-const { collaborationRef, uploadFile } = vi.hoisted(() => ({
+const { collaborationRef, uploadFile, uploadProjectFile, fileSource } = vi.hoisted(() => ({
   collaborationRef: { current: null as unknown },
   uploadFile: vi.fn(),
+  uploadProjectFile: vi.fn(),
+  fileSource: { owner: undefined as { entityType: 'project'; entityId: string } | undefined },
 }))
 
 vi.mock(
@@ -38,9 +40,12 @@ vi.mock('@/lib/auth/auth-client', () => authClientMock)
 vi.mock('@/hooks/queries/workspace-files', () => ({
   useUploadWorkspaceFile: () => ({ mutateAsync: uploadFile }),
 }))
+vi.mock('@/hooks/queries/project-files', () => ({
+  useUploadProjectFile: () => ({ mutateAsync: uploadProjectFile }),
+}))
 vi.mock('@/hooks/use-add-to-chat', () => ({ useAddToChat: () => vi.fn() }))
 vi.mock('@/hooks/use-file-content-source', () => ({
-  useFileContentSource: () => ({ resolveImageSrc: (src: string) => src }),
+  useFileContentSource: () => ({ owner: fileSource.owner, resolveImageSrc: (src: string) => src }),
 }))
 vi.mock('@/app/workspace/[workspaceId]/components', () => ({ FindBar: () => null }))
 vi.mock(
@@ -174,7 +179,7 @@ async function render(
           <Suspense fallback='Loading editor'>
             <LoadedRichMarkdownEditor
               file={FILE}
-              workspaceId={FILE.workspaceId}
+              workspaceId={fileSource.owner ? undefined : FILE.workspaceId}
               content={content}
               acceptedBaselineContent={acceptedBaselineContent}
               isStreaming={options.isStreaming ?? false}
@@ -207,6 +212,8 @@ function getEditor() {
 
 beforeEach(() => {
   uploadFile.mockReset()
+  uploadProjectFile.mockReset()
+  fileSource.owner = undefined
   collaborationRef.current = null
   vi.spyOn(toast, 'warning').mockReturnValue('test-toast')
   vi.spyOn(toast, 'info').mockReturnValue('uploading-toast')
@@ -484,3 +491,17 @@ describe('loaded rich editor lifecycle', () => {
     expect(abandonedSave).not.toHaveBeenCalled()
   })
 })
+
+it('inserts an uploaded inline image using its Project content address', async () => {
+  fileSource.owner = { entityType: 'project', entityId: 'project-a' }
+  uploadProjectFile.mockResolvedValue({ file: { id: 'image-a' } })
+  await render('Project document')
+  await act(async () => getEditor().storage.slashCommand.insertImage(1))
+  const input = container.querySelector<HTMLInputElement>('input[type="file"]')
+  if (!input) throw new Error('Editor image picker is unavailable')
+  Object.defineProperty(input, 'files', {
+    value: [new File(['image'], 'diagram.png', { type: 'image/png' })],
+  })
+  await act(async () => input.dispatchEvent(new Event('change', { bubbles: true })))
+  expect(getEditor().getHTML()).toContain('src="/api/projects/project-a/files/image-a/content"')
+})

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.tsx

@@ -689,7 +689,10 @@ export function LoadedRichMarkdownEditor({
               folderId: file.folderId ?? null,
               signal: controller.signal,
             })
-            .then((result) => `/api/files/view/${encodeURIComponent(result.file.id)}`)
+            .then(
+              (result) =>
+                `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(result.file.id)}/content`
+            )
         : workspaceId
           ? uploadFile
               .mutateAsync({

apps/sim/app/workspace/[workspaceId]/files/files.tsx

@@ -218,7 +218,7 @@ function FilesContent() {
     setIsDirty,
     setSaveStatus,
     navigate: handleNavigateFromFileDetail,
-  } = useFileNavigation({ entityType: 'workspace', entityId: workspaceId })
+  } = useFileNavigation({ owner: { entityType: 'workspace', entityId: workspaceId } })
 
   const posthog = usePostHog()
   const posthogRef = useRef(posthog)

apps/sim/app/workspace/[workspaceId]/files/project-files.tsx

@@ -110,7 +110,7 @@ function ProjectFilesContent({ project, workspaceId }: ProjectFilesProps) {
   useFileListRoom({ owner: { entityType: 'project', entityId: project.id } })
   const uploadInput = useRef<HTMLInputElement>(null)
   const downloadInFlight = useRef(false)
-  const navigation = useFileNavigation({ entityType: 'project', entityId: project.id })
+  const navigation = useFileNavigation({ owner: { entityType: 'project', entityId: project.id } })
   const [isDownloading, setIsDownloading] = useState(false)
   const [extractTarget, setExtractTarget] = useState<{ id: string; name: string } | null>(null)
   const [contextRowId, setContextRowId] = useState<string | null>(null)
@@ -196,7 +196,7 @@ function ProjectFilesContent({ project, workspaceId }: ProjectFilesProps) {
     : contextFile
       ? { kind: 'file' as const, ...contextFile }
       : null
-  const currentFolder = allFolders.find((folder) => folder.id === folderId)
+  const currentFolder = archived ? undefined : allFolders.find((folder) => folder.id === folderId)
   const base = `/workspace/${encodeURIComponent(workspaceId)}/files`
   const locationState = {
     owner: 'project' as const,