feat(copilot): persist desktop resources across chats

Author: Sg312

apps/sim/app/api/copilot/chat/resources/route.ts

@@ -16,24 +16,12 @@ import {
   createNotFoundResponse,
   createUnauthorizedResponse,
 } from '@/lib/copilot/request/http'
-import type { ChatResource, ResourceType } from '@/lib/copilot/resources/persistence'
+import type { ChatResource } from '@/lib/copilot/resources/persistence'
 import { GENERIC_RESOURCE_TITLES } from '@/lib/copilot/resources/types'
 import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
 
 const logger = createLogger('CopilotChatResourcesAPI')
 
-const VALID_RESOURCE_TYPES = new Set<ResourceType>([
-  'table',
-  'file',
-  'workflow',
-  'knowledgebase',
-  'folder',
-  'scheduledtask',
-  'log',
-  'integration',
-  'browser',
-])
-
 export const POST = withRouteHandler(async (req: NextRequest) => {
   try {
     const { userId, isAuthenticated } = await authenticateCopilotRequestSessionOnly()
@@ -58,10 +46,6 @@ export const POST = withRouteHandler(async (req: NextRequest) => {
       return NextResponse.json({ success: true })
     }
 
-    if (!VALID_RESOURCE_TYPES.has(resource.type)) {
-      return createBadRequestResponse(`Invalid resource type: ${resource.type}`)
-    }
-
     const [chat] = await db
       .select({ resources: copilotChats.resources })
       .from(copilotChats)

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx

@@ -189,7 +189,7 @@ const ResourceTabItem = memo(function ResourceTabItem({
         onMouseDown={(e) => {
           if (e.button === 1) {
             e.preventDefault()
-            if (chatId) onRemove(e, resource)
+            onRemove(e, resource)
           }
         }}
         onClick={(e) => onTabClick(e, idx)}
@@ -204,7 +204,10 @@ const ResourceTabItem = memo(function ResourceTabItem({
       >
         {config.renderTabIcon(resource, 'mr-1.5 size-[14px]')}
         {displayName}
-        {(isHovered || isActive) && chatId && (
+        {/* Closable without a chat, matching the add control: a resource opened
+            while composing the first prompt has to be removable too, and
+            removal already skips the server delete when nothing is persisted. */}
+        {(isHovered || isActive) && (
           <span
             role='button'
             tabIndex={-1}
@@ -327,9 +330,11 @@ export function ResourceTabs({
 
   const handleAdd = useCallback(
     (resource: MothershipResource) => {
-      if (!chatId) return
-      // Synthetic result/preview panels are in-memory only.
-      if (!isEphemeralResource(resource)) {
+      // Opening a resource before the first message is sent is allowed: there
+      // is simply no chat to attach it to yet. `onAddResource` queues it and
+      // persists once the chat exists, so only the server call is conditional.
+      // Synthetic result/preview panels are in-memory only either way.
+      if (chatId && !isEphemeralResource(resource)) {
         addResource.mutate({ chatId, resource })
       }
       onAddResource(resource)
@@ -618,15 +623,16 @@ export function ResourceTabs({
             )
           })}
         </div>
-        {chatId && (
-          <AddResourceDropdown
-            workspaceId={workspaceId}
-            existingKeys={existingKeys}
-            onAdd={handleAdd}
-            onSwitch={selectResource}
-            excludeTypes={ADD_RESOURCE_EXCLUDED_TYPES}
-          />
-        )}
+        {/* Offered before the chat exists too: a resource opened while composing
+            the first prompt is context for that prompt, and gating on a chat id
+            meant the panel could be opened but not filled. */}
+        <AddResourceDropdown
+          workspaceId={workspaceId}
+          existingKeys={existingKeys}
+          onAdd={handleAdd}
+          onSwitch={selectResource}
+          excludeTypes={ADD_RESOURCE_EXCLUDED_TYPES}
+        />
       </div>
       {(actions || (previewMode && onCyclePreviewMode)) && (
         <div className={cn('ml-auto flex shrink-0 items-center', RESOURCE_TAB_GAP_CLASS)}>

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

@@ -11,7 +11,7 @@ import {
   useRef,
   useState,
 } from 'react'
-import { Button } from '@sim/emcn'
+import { Button, cn } from '@sim/emcn'
 import { PanelLeft } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { useParams, useRouter } from 'next/navigation'
@@ -411,70 +411,85 @@ export function Home({ chatId, userName, userId }: HomeProps) {
   const showChatSkeleton = Boolean(chatId) && !hasMessages && isChatHistoryPending
   const draftScopeKey = `${workspaceId}:${chatId ?? 'new'}`
 
-  if (!hasMessages && !showChatSkeleton) {
-    return (
-      <div className='relative h-full overflow-y-auto bg-[var(--bg)] [scrollbar-gutter:stable_both-edges]'>
-        <div className='absolute top-[8.5px] right-[16px] z-10'>
-          <CreditsChip />
-        </div>
-        {/* Asymmetric padding biases the group up so the full cluster (heading + input + suggestions) sits at the optical center */}
-        <div className='flex min-h-full flex-col items-center justify-center px-6 pt-[2vh] pb-[22vh]'>
-          <h1 className='mb-7 max-w-[48rem] text-balance font-season text-[30px] text-[var(--text-primary)]'>
-            What should we get done{firstName ? `, ${firstName}` : ''}?
-          </h1>
-          <div ref={initialViewInputRef} className='relative w-full max-w-[48rem]'>
-            <ChatSurfaceProvider
-              userId={userId}
-              onContextAdd={handleContextAdd}
-              onContextRemove={handleInitialContextRemove}
-            >
-              <UserInput
-                ref={initialViewUserInputRef}
-                defaultValue={initialPrompt}
-                draftScopeKey={draftScopeKey}
-                onSubmit={handleSubmit}
-                isSending={isSending}
-                onStopGeneration={handleStopGeneration}
-              />
-            </ChatSurfaceProvider>
-            {/* Anchored out of flow so expanding/collapsing never shifts the centered input */}
-            <div className='absolute inset-x-0 top-full'>
-              <SuggestedActions
-                onSelectPrompt={(prompt) => initialViewUserInputRef.current?.populatePrompt(prompt)}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
+  // The empty state is the chat pane's content, not a layout of its own. It
+  // used to return early, which meant the resource panel and its toggle did
+  // not exist until the first message — so there was no way to open a resource
+  // while composing the very prompt that needed one.
+  const showEmptyState = !hasMessages && !showChatSkeleton
 
   return (
     <div className='relative flex h-full bg-[var(--bg)]'>
-      <div className='flex h-full min-w-[320px] flex-1 flex-col'>
-        <MothershipChat
-          messages={messages}
-          isSending={isSending}
-          isReconnecting={isReconnecting}
-          isLoading={showChatSkeleton}
-          onSubmit={handleSubmit}
-          onStopGeneration={handleStopGeneration}
-          messageQueue={messageQueue}
-          editingQueuedId={editingQueuedId}
-          dispatchingHeadId={dispatchingHeadId}
-          onRemoveQueuedMessage={removeFromQueue}
-          onSendQueuedMessage={sendNow}
-          onEditQueuedMessage={editQueuedMessage}
-          onCancelQueueEdit={cancelQueueEdit}
-          userId={userId}
-          chatId={resolvedChatId}
-          onContextAdd={handleContextAdd}
-          onWorkspaceResourceSelect={handleWorkspaceResourceSelect}
-          draftScopeKey={draftScopeKey}
-          animateInput={isInputEntering}
-          onInputAnimationEnd={isInputEntering ? () => setIsInputEntering(false) : undefined}
-          initialScrollBlocked={resources.length > 0 && isResourceCollapsed}
-        />
+      <div className='relative flex h-full min-w-[320px] flex-1 flex-col'>
+        {/* Clears the expand button when the panel is closed and that button is
+            occupying the same corner. */}
+        {showEmptyState && (
+          <div
+            className={cn(
+              'absolute top-[8.5px] z-10',
+              isResourceCollapsed ? 'right-[54px]' : 'right-[16px]'
+            )}
+          >
+            <CreditsChip />
+          </div>
+        )}
+        {showEmptyState ? (
+          <div className='h-full overflow-y-auto [scrollbar-gutter:stable_both-edges]'>
+            {/* Asymmetric padding biases the group up so the full cluster (heading + input + suggestions) sits at the optical center */}
+            <div className='flex min-h-full flex-col items-center justify-center px-6 pt-[2vh] pb-[22vh]'>
+              <h1 className='mb-7 max-w-[48rem] text-balance font-season text-[30px] text-[var(--text-primary)]'>
+                What should we get done{firstName ? `, ${firstName}` : ''}?
+              </h1>
+              <div ref={initialViewInputRef} className='relative w-full max-w-[48rem]'>
+                <ChatSurfaceProvider
+                  userId={userId}
+                  onContextAdd={handleContextAdd}
+                  onContextRemove={handleInitialContextRemove}
+                >
+                  <UserInput
+                    ref={initialViewUserInputRef}
+                    defaultValue={initialPrompt}
+                    draftScopeKey={draftScopeKey}
+                    onSubmit={handleSubmit}
+                    isSending={isSending}
+                    onStopGeneration={handleStopGeneration}
+                  />
+                </ChatSurfaceProvider>
+                {/* Anchored out of flow so expanding/collapsing never shifts the centered input */}
+                <div className='absolute inset-x-0 top-full'>
+                  <SuggestedActions
+                    onSelectPrompt={(prompt) =>
+                      initialViewUserInputRef.current?.populatePrompt(prompt)
+                    }
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <MothershipChat
+            messages={messages}
+            isSending={isSending}
+            isReconnecting={isReconnecting}
+            isLoading={showChatSkeleton}
+            onSubmit={handleSubmit}
+            onStopGeneration={handleStopGeneration}
+            messageQueue={messageQueue}
+            editingQueuedId={editingQueuedId}
+            dispatchingHeadId={dispatchingHeadId}
+            onRemoveQueuedMessage={removeFromQueue}
+            onSendQueuedMessage={sendNow}
+            onEditQueuedMessage={editQueuedMessage}
+            onCancelQueueEdit={cancelQueueEdit}
+            userId={userId}
+            chatId={resolvedChatId}
+            onContextAdd={handleContextAdd}
+            onWorkspaceResourceSelect={handleWorkspaceResourceSelect}
+            draftScopeKey={draftScopeKey}
+            animateInput={isInputEntering}
+            onInputAnimationEnd={isInputEntering ? () => setIsInputEntering(false) : undefined}
+            initialScrollBlocked={resources.length > 0 && isResourceCollapsed}
+          />
+        )}
       </div>
 
       {/* Resize handle — zero-width flex child whose absolute child straddles the border */}

apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts

@@ -59,6 +59,7 @@ import {
   isFilePreviewSession,
 } from '@/lib/copilot/request/session/file-preview-session-contract'
 import type { StreamBatchEvent } from '@/lib/copilot/request/session/types'
+import { canDisplayResource } from '@/lib/copilot/resources/availability'
 import {
   BROWSER_SESSION_RESOURCE_ID,
   isEphemeralResource,
@@ -1150,6 +1151,14 @@ export function useChat(
   }, [])
   const resourcesRef = useRef(resources)
   resourcesRef.current = resources
+  /**
+   * Stored resources this client cannot display — the desktop-only panels when
+   * there is no bridge. Held so they survive a session that never shows them:
+   * a reorder sends the full stored set, and the server rejects one that does
+   * not match what it has, so leaving them out would both break reordering and
+   * make the tabs disappear for the desktop app too.
+   */
+  const undisplayableResourcesRef = useRef<MothershipResource[]>([])
   const pendingPersistResourceKeysRef = useRef<Set<string>>(new Set())
   const inFlightResourceAddsRef = useRef<Map<string, Promise<unknown>>>(new Map())
   const reorderNeededAfterFlushRef = useRef(false)
@@ -1385,6 +1394,7 @@ export function useChat(
     setTransportIdle()
     setResources([])
     setActiveResourceId(null)
+    undisplayableResourcesRef.current = []
     pendingPersistResourceKeysRef.current.clear()
     inFlightResourceAddsRef.current.clear()
     reorderNeededAfterFlushRef.current = false
@@ -1430,10 +1440,14 @@ export function useChat(
     await Promise.allSettled(flushPromises)
     if (!reorderNeededAfterFlushRef.current) return
     reorderNeededAfterFlushRef.current = false
-    const localOrder = resourcesRef.current.filter(
-      (r) =>
-        r.id !== 'streaming-file' && !pendingPersistResourceKeysRef.current.has(`${r.type}:${r.id}`)
-    )
+    const localOrder = [
+      ...resourcesRef.current.filter(
+        (r) =>
+          r.id !== 'streaming-file' &&
+          !pendingPersistResourceKeysRef.current.has(`${r.type}:${r.id}`)
+      ),
+      ...undisplayableResourcesRef.current,
+    ]
     if (localOrder.length === 0) return
     requestJson(reorderMothershipChatResourcesContract, {
       body: { chatId, resources: localOrder },
@@ -1565,11 +1579,14 @@ export function useChat(
           reorderNeededAfterFlushRef.current = false
           const chatId = chatIdRef.current ?? selectedChatIdRef.current
           if (!chatId) return
-          const order = resourcesRef.current.filter(
-            (r) =>
-              !isEphemeralResource(r) &&
-              !pendingPersistResourceKeysRef.current.has(`${r.type}:${r.id}`)
-          )
+          const order = [
+            ...resourcesRef.current.filter(
+              (r) =>
+                !isEphemeralResource(r) &&
+                !pendingPersistResourceKeysRef.current.has(`${r.type}:${r.id}`)
+            ),
+            ...undisplayableResourcesRef.current,
+          ]
           if (order.length === 0) return
           requestJson(reorderMothershipChatResourcesContract, {
             body: { chatId, resources: order },
@@ -1580,7 +1597,10 @@ export function useChat(
       }
       return
     }
-    const persistableResources = newOrder.filter((r) => !isEphemeralResource(r))
+    const persistableResources = [
+      ...newOrder.filter((r) => !isEphemeralResource(r)),
+      ...undisplayableResourcesRef.current,
+    ]
     if (persistableResources.length === 0) return
     requestJson(reorderMothershipChatResourcesContract, {
       body: { chatId: persistChatId, resources: persistableResources },
@@ -1874,6 +1894,13 @@ export function useChat(
     flushPendingResources(chatHistory.id)
 
     const persistedResources = chatHistory.resources.filter((r) => r.id !== 'streaming-file')
+    // A stored panel this client cannot open is kept out of the tab strip
+    // rather than restored onto an error, but stays in the stored set so the
+    // desktop app still gets it back.
+    const restorableResources = persistedResources.filter(canDisplayResource)
+    undisplayableResourcesRef.current = persistedResources.filter((r) => !canDisplayResource(r))
+    // Keyed on everything the server holds, not just what is restorable, so a
+    // resource being hidden cannot make it look local-only and get re-added.
     const serverKeys = new Set(persistedResources.map((r) => `${r.type}:${r.id}`))
     const localOnly = resourcesRef.current.filter(
       (r) => r.id !== 'streaming-file' && !serverKeys.has(`${r.type}:${r.id}`)
@@ -1883,7 +1910,7 @@ export function useChat(
     // keep their current on-screen position — hydration reruns on every send
     // and stream completion, and appending them at the end made those tabs
     // visibly jump/flash each time.
-    const mergedResources = [...persistedResources]
+    const mergedResources = [...restorableResources]
     for (const resource of localOnly) {
       const currentIndex = resourcesRef.current.findIndex(
         (r) => r.type === resource.type && r.id === resource.id

apps/sim/lib/api/contracts/copilot.ts

@@ -12,6 +12,7 @@ import {
   COPILOT_BILLING_PROTOCOL_HEADER,
   COPILOT_BILLING_PROTOCOL_VALUES,
 } from '@/lib/copilot/generated/billing-protocol-v1'
+import { PERSISTED_RESOURCE_TYPES } from '@/lib/copilot/resources/types'
 
 export const copilotApiKeySchema = z.object({
   id: z.string(),
@@ -117,15 +118,7 @@ export const renameCopilotChatBodySchema = z.object({
 })
 export type RenameCopilotChatBody = z.input<typeof renameCopilotChatBodySchema>
 
-const copilotResourceTypeSchema = z.enum([
-  'table',
-  'file',
-  'workflow',
-  'knowledgebase',
-  'folder',
-  'scheduledtask',
-  'log',
-])
+const copilotResourceTypeSchema = z.enum(PERSISTED_RESOURCE_TYPES)
 
 export const addCopilotChatResourceBodySchema = z.object({
   chatId: z.string(),