Update VS Code and enable Intellisense (#6222)

**Problem:**
Our version of VS Code is extremely outdated and built using a reverse
engineered build, but since then the web version of VS Code has come a
long way and can now support Intellisense.

**Fix:**
This PR changes 3 fundamental things:

1. Rather than using IndexedDB for communicating between Utopia and the
VS Code extension, we now use VS Code's commands service. This allows us
to register a command handler on either side of the air gap, and pass
any arbitrary information in the command's parameters. We therefore are
able to use two new commands for passing messages directly across that
air gap, removing the reliance on async polling of the store.
2. The version of VS Code has been bumped up to 1.91.1, which required a
newer version of node, and a load of changes to the patch file to
actually be able to build it. When we first implemented the VS Code
embed, we had to reverse engineer a build file based on the electron
build. This newer version of VS Code includes a build script, so it was
a case of finding and calling that, and figuring out where the patches
needed to be applied now. The end result is significantly simpler than
the previous approach.
3. To actually support Intellisense, we needed to add some new cross
origin headers to the editor assets and vs code assets, and serve both
the editor and vs code iframe up on the same TLD to ensure that
`crossOriginIsolated` would be set to true. There is also a `vscode-coi`
query param that we have to include in the iframe's URL.

For the VS Code parts of the diff (the patch and the extension changes)
it might be easier to view some files in full rather than trying to read
the diff...

**Commit Details:**
- Update the vscode-build's `shell.nix` to use newer versions of node
and yarn, and supply an extra package required for building it
- Update the pulled version of VS Code to 1.91.1
- Remove the reliance on IndexedDB for communicating between the outer
edge of the iframe and the extension, and instead use VS Code's command
service for passing messages between the two, meaning that we no longer
need to use polling to watch for file changes, and can instead directly
trigger them
- This required the registering of some extra commands, and the code for
then communicating those across the iframe boundary
- Remove the `fs` files from `utopia-vscode-common`, and instead use an
in memory fs implementation in the extension. This stores the files in a
`Map<string, FSNode>`, and stores both the saved and unsaved content of
text files
- Since we are now passing messages directly between Utopia and VS Code,
I've flattened the message types (previously there were two types: one
for file changes; one for other changes such as cursor position,
highlight bounds etc)
- The server now passes down the headers required to enable
[`crossOriginIsolated`](https://developer.mozilla.org/en-US/docs/Web/API/Window/crossOriginIsolated).
`crossOriginIsolated` is required for full Intellisense on the web,
which requires 2 new cross origin headers, and for the code editor
iframe to be served up from the same TLD as the rest of the editor.
- This does mean that the code editor will be running on the same
process as Utopia
- To actually build this version of VS Code I had to:
- Disable code mangling. I'm, not sure why, but with that enabled the
build was just silently hanging on my machine
- Remove some native keyboard mapping code. This was causing an issue
related to electron, which we are clearly not interested in, so I just
ripped it out after failing to fix it.
- To simplify the VS Code UI I have:
- Forcibly enabled Zen mode (the `isZenModeActive` check always returns
true)
- Changed some Zen mode defaults to prevent the code editor trying to
fullscreen itself, or centre the code pane inside itself
- Forcibly hidden other parts of the UI that would normally still be
shown when in non-fullscreen Zen mode

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode

editor/src/components/code-editor/code-editor-container.tsx

@@ -1,17 +1,17 @@
 import React from 'react'
 import { Substores, useEditorState } from '../editor/store/store-hook'
-import { MONACO_EDITOR_IFRAME_BASE_URL } from '../../common/env-vars'
 import { createIframeUrl } from '../../core/shared/utils'
 import { getUnderlyingVSCodeBridgeID } from '../editor/store/editor-state'
 import { VSCodeLoadingScreen } from './vscode-editor-loading-screen'
-import { getEditorBranchNameFromURL, setBranchNameFromURL } from '../../utils/branches'
+import { setBranchNameFromURL } from '../../utils/branches'
 import { VSCODE_EDITOR_IFRAME_ID } from '../../core/vscode/vscode-bridge'
 
 const VSCodeIframeContainer = React.memo((props: { vsCodeSessionID: string }) => {
   const vsCodeSessionID = props.vsCodeSessionID
-  const baseIframeSrc = createIframeUrl(MONACO_EDITOR_IFRAME_BASE_URL, 'vscode-editor-iframe/')
+  const baseIframeSrc = createIframeUrl(window.location.origin, 'vscode-editor-iframe/')
   const url = new URL(baseIframeSrc)
   url.searchParams.append('vs_code_session_id', vsCodeSessionID)
+  url.searchParams.append('vscode-coi', '') // Required to enable intellisense
 
   setBranchNameFromURL(url.searchParams)
 

editor/src/components/editor/store/vscode-changes.ts

@@ -21,10 +21,8 @@ import {
 import type {
   UpdateDecorationsMessage,
   SelectedElementChanged,
-  AccumulatedToVSCodeMessage,
-  ToVSCodeMessageNoAccumulated,
+  FromUtopiaToVSCodeMessage,
 } from 'utopia-vscode-common'
-import { accumulatedToVSCodeMessage, toVSCodeExtensionMessage } from 'utopia-vscode-common'
 import type { EditorState } from './editor-state'
 import { getHighlightBoundsForElementPaths } from './editor-state'
 import { shallowEqual } from '../../../core/shared/equality-utils'
@@ -302,15 +300,15 @@ export const emptyProjectChanges: ProjectChanges = {
   selectedChanged: null,
 }
 
-export function projectChangesToVSCodeMessages(local: ProjectChanges): AccumulatedToVSCodeMessage {
-  let messages: Array<ToVSCodeMessageNoAccumulated> = []
+function projectChangesToVSCodeMessages(local: ProjectChanges): Array<FromUtopiaToVSCodeMessage> {
+  let messages: Array<FromUtopiaToVSCodeMessage> = []
   if (local.updateDecorations != null) {
     messages.push(local.updateDecorations)
   }
   if (local.selectedChanged != null) {
     messages.push(local.selectedChanged)
   }
-  return accumulatedToVSCodeMessage(messages)
+  return messages
 }
 
 export function getProjectChanges(
@@ -334,7 +332,5 @@ export function getProjectChanges(
 export function sendVSCodeChanges(changes: ProjectChanges) {
   applyProjectChanges(changes.fileChanges.changesForVSCode)
   const toVSCodeAccumulated = projectChangesToVSCodeMessages(changes)
-  if (toVSCodeAccumulated.messages.length > 0) {
-    sendMessage(toVSCodeExtensionMessage(toVSCodeAccumulated))
-  }
+  toVSCodeAccumulated.forEach((message) => sendMessage(message))
 }

editor/src/components/navigator/navigator-item/navigator-item-clickable-wrapper.tsx

@@ -21,7 +21,6 @@ import {
   selectedElementChangedMessageFromHighlightBounds,
   sendMessage,
 } from '../../../core/vscode/vscode-bridge'
-import { toVSCodeExtensionMessage } from 'utopia-vscode-common'
 import { isRegulaNavigatorRow, type NavigatorRow } from '../navigator-row'
 import { useDispatch } from '../../editor/store/dispatch-context'
 import { isRight } from '../../../core/shared/either'
@@ -100,9 +99,7 @@ export function useGetNavigatorClickActions(
         // when we click on an already selected item we should force vscode to navigate there
         if (selected && highlightBounds != null) {
           sendMessage(
-            toVSCodeExtensionMessage(
-              selectedElementChangedMessageFromHighlightBounds(highlightBounds, 'force-navigation'),
-            ),
+            selectedElementChangedMessageFromHighlightBounds(highlightBounds, 'force-navigation'),
           )
         }
         return actionsForSingleSelection(targetPath, row, conditionalOverrideUpdate)

editor/src/core/vscode/vscode-bridge.ts

@@ -14,19 +14,20 @@ import {
   deletePathChange,
   ensureDirectoryExistsChange,
   initProject,
-  isFromVSCodeExtensionMessage,
-  isIndexedDBFailure,
+  isClearLoadingScreen,
+  isEditorCursorPositionChanged,
   isMessageListenersReady,
+  isUtopiaVSCodeConfigValues,
   isVSCodeBridgeReady,
   isVSCodeFileChange,
   isVSCodeFileDelete,
+  isVSCodeReady,
   openFileMessage,
   projectDirectory,
   projectTextFile,
   selectedElementChanged,
   setFollowSelectionConfig,
   setVSCodeTheme,
-  toVSCodeExtensionMessage,
   updateDecorationsMessage,
   writeProjectFileChange,
 } from 'utopia-vscode-common'
@@ -131,27 +132,16 @@ export function initVSCodeBridge(
       // Store the source
       vscodeIFrame = messageEvent.source
       dispatch([markVSCodeBridgeReady(true)])
-    } else if (isFromVSCodeExtensionMessage(data)) {
-      const message = data.message
-      switch (message.type) {
-        case 'EDITOR_CURSOR_POSITION_CHANGED':
-          dispatch([selectFromFileAndPosition(message.filePath, message.line, message.column)])
-          break
-        case 'UTOPIA_VSCODE_CONFIG_VALUES':
-          dispatch([updateConfigFromVSCode(message.config)])
-          break
-        case 'VSCODE_READY':
-          dispatch([sendCodeEditorInitialisation()])
-          break
-        case 'CLEAR_LOADING_SCREEN':
-          if (!loadingScreenHidden) {
-            loadingScreenHidden = true
-            dispatch([hideVSCodeLoadingScreen()])
-          }
-          break
-        default:
-          const _exhaustiveCheck: never = message
-          throw new Error(`Unhandled message type${JSON.stringify(message)}`)
+    } else if (isEditorCursorPositionChanged(data)) {
+      dispatch([selectFromFileAndPosition(data.filePath, data.line, data.column)])
+    } else if (isUtopiaVSCodeConfigValues(data)) {
+      dispatch([updateConfigFromVSCode(data.config)])
+    } else if (isVSCodeReady(data)) {
+      dispatch([sendCodeEditorInitialisation()])
+    } else if (isClearLoadingScreen(data)) {
+      if (!loadingScreenHidden) {
+        loadingScreenHidden = true
+        dispatch([hideVSCodeLoadingScreen()])
       }
     } else if (isVSCodeFileChange(data)) {
       const { filePath, fileContent } = data
@@ -169,8 +159,6 @@ export function initVSCodeBridge(
       dispatch(actionsToDispatch)
     } else if (isVSCodeFileDelete(data)) {
       dispatch([deleteFileFromVSCode(data.filePath)])
-    } else if (isIndexedDBFailure(data)) {
-      dispatch([setIndexedDBFailed(true)])
     }
   }
 
@@ -182,11 +170,11 @@ export function sendMessage(message: FromUtopiaToVSCodeMessage) {
 }
 
 export function sendOpenFileMessage(filePath: string, bounds: Bounds | null) {
-  sendMessage(toVSCodeExtensionMessage(openFileMessage(filePath, bounds)))
+  sendMessage(openFileMessage(filePath, bounds))
 }
 
 export function sendSetFollowSelectionEnabledMessage(enabled: boolean) {
-  sendMessage(toVSCodeExtensionMessage(setFollowSelectionConfig(enabled)))
+  sendMessage(setFollowSelectionConfig(enabled))
 }
 
 export function applyProjectChanges(changes: Array<ProjectFileChange>) {
@@ -243,7 +231,7 @@ export function getCodeEditorDecorations(editorState: EditorState): UpdateDecora
 
 export function sendCodeEditorDecorations(editorState: EditorState) {
   const decorationsMessage = getCodeEditorDecorations(editorState)
-  sendMessage(toVSCodeExtensionMessage(decorationsMessage))
+  sendMessage(decorationsMessage)
 }
 
 export function getSelectedElementChangedMessage(
@@ -284,7 +272,7 @@ export function sendSelectedElement(newEditorState: EditorState) {
     'do-not-force-navigation',
   )
   if (selectedElementChangedMessage != null) {
-    sendMessage(toVSCodeExtensionMessage(selectedElementChangedMessage))
+    sendMessage(selectedElementChangedMessage)
   }
 }
 
@@ -302,5 +290,5 @@ function vsCodeThemeForTheme(theme: Theme): string {
 
 export function sendSetVSCodeTheme(theme: Theme) {
   const vsCodeTheme = vsCodeThemeForTheme(theme)
-  sendMessage(toVSCodeExtensionMessage(setVSCodeTheme(vsCodeTheme)))
+  sendMessage(setVSCodeTheme(vsCodeTheme))
 }

editor/src/templates/vscode-editor-iframe/index.html

@@ -10,9 +10,9 @@
     <meta id="vscode-workbench-builtin-extensions" data-settings="[]" />
 
     <link
-      data-name="vs/workbench/workbench.web.api"
+      data-name="vs/workbench/workbench.web.main"
       rel="stylesheet"
-      href="<%- UTOPIA_DOMAIN %>/vscode/vscode/vs/workbench/workbench.web.api.css?hash=<%- UTOPIA_SHA %>"
+      href="<%- UTOPIA_DOMAIN %>/vscode/vscode/vs/workbench/workbench.web.main.css?hash=<%- UTOPIA_SHA %>"
     />
     <script src="<%- UTOPIA_DOMAIN %>/vscode/extensions.js?hash=<%- UTOPIA_SHA %>"></script>
   </head>
@@ -36,8 +36,8 @@
   </script>
   <script src="<%- UTOPIA_DOMAIN %>/vscode/vscode/vs/loader.js?hash=<%- UTOPIA_SHA %>"></script>
 
-  <script src="<%- UTOPIA_DOMAIN %>/vscode/vscode/vs/workbench/workbench.web.api.nls.js?hash=<%- UTOPIA_SHA %>"></script>
-  <script src="<%- UTOPIA_DOMAIN %>/vscode/vscode/vs/workbench/workbench.web.api.js?hash=<%- UTOPIA_SHA %>"></script>
+  <script src="<%- UTOPIA_DOMAIN %>/vscode/vscode/vs/workbench/workbench.web.main.nls.js?hash=<%- UTOPIA_SHA %>"></script>
+  <script src="<%- UTOPIA_DOMAIN %>/vscode/vscode/vs/workbench/workbench.web.main.js?hash=<%- UTOPIA_SHA %>"></script>
   <script src="<%- UTOPIA_DOMAIN %>/vscode/vscode/vs/code/browser/workbench/workbench.js?hash=<%- UTOPIA_SHA %>"></script>
   <link rel="stylesheet" href="<%- UTOPIA_DOMAIN %>/editor/css/vscode-overrides.css" />
 </html>

release.nix

@@ -13,10 +13,10 @@ let
   }) { inherit config; };
 
   recentPkgs = import (builtins.fetchTarball {
-    name = "nixos-23.11";
-    url = https://github.com/NixOS/nixpkgs/archive/23.11.tar.gz;
+    name = "nixos-24.05";
+    url = https://github.com/NixOS/nixpkgs/archive/24.05.tar.gz;
     # Hash obtained using `nix-prefetch-url --unpack <url>`
-    sha256 = "1ndiv385w1qyb3b18vw13991fzb9wg4cl21wglk89grsfsnra41k";
+    sha256 = "1lr1h35prqkd1mkmzriwlpvxcb34kmhc9dnr48gkm8hh089hifmx";
   }) { inherit config; };
 
 in

server/src/Utopia/Web/Endpoints.hs

@@ -277,7 +277,7 @@ injectIntoPage toInject@(_, _, _, _, editorScriptTags) (TagComment "editorScript
 injectIntoPage toInject (firstTag : remainder) = firstTag : injectIntoPage toInject remainder
 injectIntoPage _ [] = []
 
-renderPageWithMetadata :: Maybe ProjectIdWithSuffix -> Maybe ProjectMetadata -> Maybe DB.DecodedProject -> Maybe Text -> Text -> ServerMonad H.Html
+renderPageWithMetadata :: Maybe ProjectIdWithSuffix -> Maybe ProjectMetadata -> Maybe DB.DecodedProject -> Maybe Text -> Text -> ServerMonad ProjectPageResponse
 renderPageWithMetadata possibleProjectID possibleMetadata possibleProject branchName pagePath = do
   indexHtml <- getEditorTextContent branchName pagePath
   siteRoot <- getSiteRoot
@@ -294,38 +294,38 @@ renderPageWithMetadata possibleProjectID possibleMetadata possibleProject branch
   let reversedEditorScriptTags = partitionOutScriptDefer False $ reverse parsedTags
   let editorScriptPreloads = preloadsForScripts $ reverse reversedEditorScriptTags
   let updatedContent = injectIntoPage (ogTags, projectIDScriptTags, dependenciesTags, vscodePreloadTags, editorScriptPreloads) parsedTags
-  return $ H.preEscapedToHtml $ renderTags updatedContent
+  return $ addHeader "cross-origin" $ addHeader "same-origin" $ addHeader "credentialless" $ H.preEscapedToHtml $ renderTags updatedContent
 
-innerProjectPage :: Maybe ProjectIdWithSuffix -> ProjectDetails -> Maybe DB.DecodedProject -> Maybe Text -> ServerMonad H.Html
+innerProjectPage :: Maybe ProjectIdWithSuffix -> ProjectDetails -> Maybe DB.DecodedProject -> Maybe Text -> ServerMonad ProjectPageResponse
 innerProjectPage (Just _) UnknownProject _ branchName = do
   projectNotFoundHtml <- getEditorTextContent branchName "project-not-found/index.html"
-  return $ H.preEscapedToHtml projectNotFoundHtml
+  return $ addHeader "cross-origin" $ addHeader "same-origin" $ addHeader "credentialless" $ H.preEscapedToHtml projectNotFoundHtml
 innerProjectPage possibleProjectID details possibleProject branchName =
   renderPageWithMetadata possibleProjectID (projectDetailsToPossibleMetadata details) possibleProject branchName "index.html"
 
-projectPage :: ProjectIdWithSuffix -> Maybe Text -> ServerMonad H.Html
+projectPage :: ProjectIdWithSuffix -> Maybe Text -> ServerMonad ProjectPageResponse
 projectPage projectIDWithSuffix@(ProjectIdWithSuffix projectID _) branchName = do
   possibleMetadata <- getProjectMetadata projectID
   possibleProject <- loadProject projectID
   innerProjectPage (Just projectIDWithSuffix) possibleMetadata possibleProject branchName
 
-emptyProjectPage :: Maybe Text -> ServerMonad H.Html
+emptyProjectPage :: Maybe Text -> ServerMonad ProjectPageResponse
 emptyProjectPage = innerProjectPage Nothing UnknownProject Nothing
 
-innerPreviewPage :: Maybe ProjectIdWithSuffix -> ProjectDetails -> Maybe DB.DecodedProject -> Maybe Text -> ServerMonad H.Html
+innerPreviewPage :: Maybe ProjectIdWithSuffix -> ProjectDetails -> Maybe DB.DecodedProject -> Maybe Text -> ServerMonad ProjectPageResponse
 innerPreviewPage (Just _) UnknownProject _ branchName = do
   projectNotFoundHtml <- getEditorTextContent branchName "project-not-found/index.html"
-  return $ H.preEscapedToHtml projectNotFoundHtml
+  return $ addHeader "cross-origin" $ addHeader "same-origin" $ addHeader "credentialless" $ H.preEscapedToHtml projectNotFoundHtml
 innerPreviewPage possibleProjectID details possibleProject branchName =
   renderPageWithMetadata possibleProjectID (projectDetailsToPossibleMetadata details) possibleProject branchName "preview/index.html"
 
-previewPage :: ProjectIdWithSuffix -> Maybe Text -> ServerMonad H.Html
+previewPage :: ProjectIdWithSuffix -> Maybe Text -> ServerMonad ProjectPageResponse
 previewPage projectIDWithSuffix@(ProjectIdWithSuffix projectID _) branchName = do
   possibleMetadata <- getProjectMetadata projectID
   possibleProject <- loadProject projectID
   innerPreviewPage (Just projectIDWithSuffix) possibleMetadata possibleProject branchName
 
-emptyPreviewPage :: Maybe Text -> ServerMonad H.Html
+emptyPreviewPage :: Maybe Text -> ServerMonad ProjectPageResponse
 emptyPreviewPage = innerPreviewPage Nothing UnknownProject Nothing
 
 getUserEndpoint :: Maybe Text -> ServerMonad UserResponse
@@ -529,12 +529,27 @@ addCacheControl = addMiddlewareHeader "Cache-Control" "public, immutable, max-ag
 addCacheControlRevalidate :: Middleware
 addCacheControlRevalidate = addMiddlewareHeader "Cache-Control" "public, must-revalidate, proxy-revalidate, max-age=0"
 
+addCrossOriginResourcePolicy :: Middleware
+addCrossOriginResourcePolicy = addMiddlewareHeader "Cross-Origin-Resource-Policy" "cross-origin"
+
+addCrossOriginOpenerPolicy :: Middleware
+addCrossOriginOpenerPolicy = addMiddlewareHeader "Cross-Origin-Opener-Policy" "same-origin"
+
+addCrossOriginEmbedderPolicy :: Middleware
+addCrossOriginEmbedderPolicy = addMiddlewareHeader "Cross-Origin-Embedder-Policy" "require-corp"
+
 addCDNHeaders :: Middleware
 addCDNHeaders = addCacheControl . addAccessControlAllowOrigin
 
 addCDNHeadersCacheRevalidate :: Middleware
 addCDNHeadersCacheRevalidate = addCacheControlRevalidate . addAccessControlAllowOrigin
 
+addEditorAssetsHeaders :: Middleware
+addEditorAssetsHeaders = addCDNHeaders . addCrossOriginResourcePolicy . addCrossOriginOpenerPolicy . addCrossOriginEmbedderPolicy
+
+addVSCodeHeaders :: Middleware
+addVSCodeHeaders = addCDNHeadersCacheRevalidate . addCrossOriginResourcePolicy . addCrossOriginOpenerPolicy . addCrossOriginEmbedderPolicy
+
 fallbackOn404 :: Application -> Application -> Application
 fallbackOn404 firstApplication secondApplication request sendResponse =
   firstApplication request $ \firstAppResponse -> do
@@ -557,7 +572,7 @@ editorAssetsEndpoint notProxiedPath possibleBranchName = do
   mainApp <- case possibleBranchName of
     Just _  -> pure loadLocally
     Nothing -> maybe (pure loadLocally) loadFromProxy possibleProxyManager
-  pure $ addCDNHeaders $ downloadWithFallbacks mainApp
+  pure $ addEditorAssetsHeaders $ downloadWithFallbacks mainApp
 
 downloadGithubProjectEndpoint :: Maybe Text -> Text -> Text -> ServerMonad BL.ByteString
 downloadGithubProjectEndpoint cookie owner repo = requireUser cookie $ \_ -> do
@@ -580,7 +595,7 @@ websiteAssetsEndpoint notProxiedPath = do
 vsCodeAssetsEndpoint :: ServerMonad Application
 vsCodeAssetsEndpoint = do
   pathToServeFrom <- getVSCodeAssetRoot
-  addCDNHeadersCacheRevalidate <$> servePath pathToServeFrom Nothing
+  addVSCodeHeaders <$> servePath pathToServeFrom Nothing
 
 wrappedWebAppLookup :: (Pieces -> IO LookupResult) -> Pieces -> IO LookupResult
 wrappedWebAppLookup defaultLookup _ =

server/src/Utopia/Web/Types.hs

@@ -76,15 +76,17 @@ type LogoutAPI = "logout" :> Get '[HTML] (SetSessionCookies H.Html)
 
 type GetUserAPI = "v1" :> "user" :> Get '[JSON] UserResponse
 
-type EmptyProjectPageAPI = "p" :> BranchNameParam :> Get '[HTML] H.Html
+type ProjectPageResponse = Headers '[Header "Cross-Origin-Resource-Policy" Text, Header "Cross-Origin-Opener-Policy" Text, Header "Cross-Origin-Embedder-Policy" Text] (H.Html)
 
-type ProjectPageAPI = "p" :> Capture "project_id" ProjectIdWithSuffix :> BranchNameParam :> Get '[HTML] H.Html
+type EmptyProjectPageAPI = "p" :> BranchNameParam :> Get '[HTML] ProjectPageResponse
+
+type ProjectPageAPI = "p" :> Capture "project_id" ProjectIdWithSuffix :> BranchNameParam :> Get '[HTML] ProjectPageResponse
 
 type LoadProjectFileAPI = "p" :> Capture "project_id" ProjectIdWithSuffix :> Header "If-None-Match" Text :> CaptureAll "file_path" Text :> RawM
 
-type EmptyPreviewPageAPI = "share" :> BranchNameParam :> Get '[HTML] H.Html
+type EmptyPreviewPageAPI = "share" :> BranchNameParam :> Get '[HTML] ProjectPageResponse
 
-type PreviewPageAPI = "share" :> Capture "project_id" ProjectIdWithSuffix :> BranchNameParam :> Get '[HTML] H.Html
+type PreviewPageAPI = "share" :> Capture "project_id" ProjectIdWithSuffix :> BranchNameParam :> Get '[HTML] ProjectPageResponse
 
 type DownloadProjectResponse = Headers '[Header "Access-Control-Allow-Origin" Text] Value
 
@@ -261,6 +263,4 @@ packagerAPI = Proxy
 packagerLink :: Text -> Text -> Text
 packagerLink jsPackageName jsPackageVersion =
   let versionedName = jsPackageName <> "@" <> jsPackageVersion
-   in toUrlPiece $ safeLink apiProxy packagerAPI versionedName
-
-
+   in toUrlPiece $ safeLink apiProxy packagerAPI versionedName

shell.nix

@@ -785,7 +785,7 @@ let
 
   pythonAndPackages = pkgs.python3.withPackages(ps: with ps; [ pyusb tkinter pkgconfig ]);
 
-  basePackages = [ node pkgs.libsecret pythonAndPackages pkgs.pkg-config pkgs.tmux pkgs.git pkgs.wget ] ++ nodePackages ++ linuxOnlyPackages ++ macOSOnlyPackages;
+  basePackages = [ node pkgs.libsecret pkgs.libkrb5 pythonAndPackages pkgs.pkg-config pkgs.tmux pkgs.git pkgs.wget ] ++ nodePackages ++ linuxOnlyPackages ++ macOSOnlyPackages;
   withServerBasePackages = basePackages ++ (lib.optionals includeServerBuildSupport baseServerPackages);
   withServerRunPackages = withServerBasePackages ++ (lib.optionals includeRunLocallySupport serverRunPackages);
   withReleasePackages = withServerRunPackages ++ (lib.optionals includeReleaseSupport releasePackages);