From b391df0f71f4a909734a3e217c18a99f47373e18 Mon Sep 17 00:00:00 2001
From: Dominik Marti <dom@inik.ch>
Date: Tue, 30 Sep 2025 22:16:51 +0200
Subject: [PATCH] feat: add custom system prompts to projects, is combined with
 assistants system prompt when sending messages

---
 web-app/src/containers/ChatInput.tsx          |  29 +-
 web-app/src/containers/LeftPanel.tsx          |   6 +-
 .../containers/dialogs/AddProjectDialog.tsx   |  45 +-
 .../useChat.projectSystemPrompt.test.ts       | 441 ++++++++++++++++++
 .../__tests__/useThreadManagement.test.ts     | 232 +++++++++
 web-app/src/hooks/useChat.ts                  |  51 +-
 web-app/src/hooks/useThreadManagement.ts      |  17 +-
 web-app/src/locales/de-DE/common.json         |   6 +-
 web-app/src/locales/en/common.json            |   3 +-
 web-app/src/routes/project/index.tsx          |   6 +-
 10 files changed, 784 insertions(+), 52 deletions(-)
 create mode 100644 web-app/src/hooks/__tests__/useChat.projectSystemPrompt.test.ts
 create mode 100644 web-app/src/hooks/__tests__/useThreadManagement.test.ts

diff --git a/web-app/src/containers/ChatInput.tsx b/web-app/src/containers/ChatInput.tsx
index cba580ebd6..2035b3125f 100644
--- a/web-app/src/containers/ChatInput.tsx
+++ b/web-app/src/containers/ChatInput.tsx
@@ -4,7 +4,6 @@ import TextareaAutosize from 'react-textarea-autosize'
 import { cn } from '@/lib/utils'
 import { usePrompt } from '@/hooks/usePrompt'
 import { useThreads } from '@/hooks/useThreads'
-import { useThreadManagement } from '@/hooks/useThreadManagement'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Button } from '@/components/ui/button'
 import {
@@ -50,8 +49,7 @@ type ChatInputProps = {
 const ChatInput = ({
   model,
   className,
-  initialMessage,
-  projectId,
+  initialMessage
 }: ChatInputProps) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const [isFocused, setIsFocused] = useState(false)
@@ -65,8 +63,6 @@ const ChatInput = ({
   const prompt = usePrompt((state) => state.prompt)
   const setPrompt = usePrompt((state) => state.setPrompt)
   const currentThreadId = useThreads((state) => state.currentThreadId)
-  const updateThread = useThreads((state) => state.updateThread)
-  const { getFolderById } = useThreadManagement()
   const { t } = useTranslation()
   const spellCheckChatInput = useGeneralSetting(
     (state) => state.spellCheckChatInput
@@ -187,27 +183,8 @@ const ChatInput = ({
     )
     setUploadedFiles([])
 
-    // Handle project assignment for new threads
-    if (projectId && !currentThreadId) {
-      const project = getFolderById(projectId)
-      if (project) {
-        // Use setTimeout to ensure the thread is created first
-        setTimeout(() => {
-          const newCurrentThreadId = useThreads.getState().currentThreadId
-          if (newCurrentThreadId) {
-            updateThread(newCurrentThreadId, {
-              metadata: {
-                project: {
-                  id: project.id,
-                  name: project.name,
-                  updated_at: project.updated_at,
-                },
-              },
-            })
-          }
-        }, 100)
-      }
-    }
+    // Note: Project assignment for new threads is now handled directly in useChat.ts
+    // when creating the thread, ensuring the project system prompt is applied from the first message
   }
 
   useEffect(() => {
diff --git a/web-app/src/containers/LeftPanel.tsx b/web-app/src/containers/LeftPanel.tsx
index 24f3bf9119..9053f0af22 100644
--- a/web-app/src/containers/LeftPanel.tsx
+++ b/web-app/src/containers/LeftPanel.tsx
@@ -208,11 +208,11 @@ const LeftPanel = () => {
     }
   }
 
-  const handleProjectSave = (name: string) => {
+  const handleProjectSave = (name: string, systemPrompt?: string) => {
     if (editingProjectKey) {
-      updateFolder(editingProjectKey, name)
+      updateFolder(editingProjectKey, name, systemPrompt)
     } else {
-      addFolder(name)
+      addFolder(name, systemPrompt)
     }
     setProjectDialogOpen(false)
     setEditingProjectKey(null)
diff --git a/web-app/src/containers/dialogs/AddProjectDialog.tsx b/web-app/src/containers/dialogs/AddProjectDialog.tsx
index f0fda648c2..cf709e7c87 100644
--- a/web-app/src/containers/dialogs/AddProjectDialog.tsx
+++ b/web-app/src/containers/dialogs/AddProjectDialog.tsx
@@ -8,6 +8,7 @@ import {
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
 import { useThreadManagement } from '@/hooks/useThreadManagement'
 import { toast } from 'sonner'
 import { useTranslation } from '@/i18n/react-i18next-compat'
@@ -20,8 +21,9 @@ interface AddProjectDialogProps {
     id: string
     name: string
     updated_at: number
+    systemPrompt?: string
   }
-  onSave: (name: string) => void
+  onSave: (name: string, systemPrompt?: string) => void
 }
 
 export default function AddProjectDialog({
@@ -33,11 +35,13 @@ export default function AddProjectDialog({
 }: AddProjectDialogProps) {
   const { t } = useTranslation()
   const [name, setName] = useState(initialData?.name || '')
+  const [systemPrompt, setSystemPrompt] = useState(initialData?.systemPrompt || '')
   const { folders } = useThreadManagement()
 
   useEffect(() => {
     if (open) {
       setName(initialData?.name || '')
+      setSystemPrompt(initialData?.systemPrompt || '')
     }
   }, [open, initialData])
 
@@ -58,16 +62,23 @@ export default function AddProjectDialog({
       return
     }
 
-    onSave(trimmedName)
+    onSave(trimmedName, systemPrompt.trim() || undefined)
 
     // Show detailed success message
     if (editingKey && initialData) {
-      toast.success(
-        t('projects.addProjectDialog.renameSuccess', {
-          oldName: initialData.name,
-          newName: trimmedName
-        })
-      )
+      const nameChanged = trimmedName !== initialData.name
+
+      if (nameChanged) {
+        toast.success(
+          t('projects.addProjectDialog.renameSuccess', {
+            oldName: initialData.name,
+            newName: trimmedName
+          })
+        )
+      } else {
+        // Only system prompt changed
+        toast.success(t('projects.addProjectDialog.updateSuccess', { projectName: trimmedName }))
+      }
     } else {
       toast.success(t('projects.addProjectDialog.createSuccess', { projectName: trimmedName }))
     }
@@ -78,11 +89,15 @@ export default function AddProjectDialog({
   const handleCancel = () => {
     onOpenChange(false)
     setName('')
+    setSystemPrompt('')
   }
 
   // Check if the button should be disabled
   const isButtonDisabled =
-    !name.trim() || (editingKey && name.trim() === initialData?.name)
+    !name.trim() ||
+    (editingKey &&
+     name.trim() === initialData?.name &&
+     systemPrompt.trim() === (initialData?.systemPrompt))
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -110,6 +125,18 @@ export default function AddProjectDialog({
               }}
             />
           </div>
+          <div>
+            <label className="text-sm font-medium text-main-view-fg/80">
+              System Prompt (Optional)
+            </label>
+            <Textarea
+              value={systemPrompt}
+              onChange={(e) => setSystemPrompt(e.target.value)}
+              placeholder="Enter a custom system prompt that will be applied to all conversations in this project..."
+              className="mt-1"
+              rows={4}
+            />
+          </div>
         </div>
         <DialogFooter>
           <Button variant="link" onClick={handleCancel}>
diff --git a/web-app/src/hooks/__tests__/useChat.projectSystemPrompt.test.ts b/web-app/src/hooks/__tests__/useChat.projectSystemPrompt.test.ts
new file mode 100644
index 0000000000..0ccbf5548b
--- /dev/null
+++ b/web-app/src/hooks/__tests__/useChat.projectSystemPrompt.test.ts
@@ -0,0 +1,441 @@
+import { renderHook, act } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { useChat } from '../useChat'
+
+// Use hoisted storage for our mocks
+const hoisted = vi.hoisted(() => ({
+  builderMock: vi.fn(() => ({
+    addUserMessage: vi.fn(),
+    addAssistantMessage: vi.fn(),
+    getMessages: vi.fn(() => []),
+  })),
+  updateThreadMock: vi.fn(),
+  createThreadMock: vi.fn(),
+  getCurrentThreadMock: vi.fn(),
+  getFolderByIdMock: vi.fn(),
+  routerMock: {
+    navigate: vi.fn(),
+    state: {
+      location: {
+        pathname: '/',
+      },
+    },
+  },
+}))
+
+vi.mock('@/lib/messages', () => ({
+  CompletionMessagesBuilder: hoisted.builderMock,
+}))
+
+vi.mock('../usePrompt', () => ({
+  usePrompt: Object.assign(
+    (selector: any) => {
+      const state = { prompt: 'test prompt', setPrompt: vi.fn() }
+      return selector ? selector(state) : state
+    },
+    { getState: () => ({ prompt: 'test prompt', setPrompt: vi.fn() }) }
+  ),
+}))
+
+vi.mock('../useAppState', () => ({
+  useAppState: Object.assign(
+    (selector?: any) => {
+      const state = {
+        tools: [],
+        updateTokenSpeed: vi.fn(),
+        resetTokenSpeed: vi.fn(),
+        updateTools: vi.fn(),
+        updateStreamingContent: vi.fn(),
+        updatePromptProgress: vi.fn(),
+        updateLoadingModel: vi.fn(),
+        setAbortController: vi.fn(),
+      }
+      return selector ? selector(state) : state
+    },
+    { getState: vi.fn(() => ({ tokenSpeed: { tokensPerSecond: 10 } })) }
+  ),
+}))
+
+vi.mock('../useAssistant', () => ({
+  useAssistant: Object.assign(
+    (selector: any) => {
+      const state = {
+        assistants: [
+          {
+            id: 'test-assistant',
+            instructions: 'You are a helpful assistant.',
+            parameters: { stream: true },
+          },
+        ],
+        currentAssistant: {
+          id: 'test-assistant',
+          instructions: 'You are a helpful assistant.',
+          parameters: { stream: true },
+        },
+      }
+      return selector ? selector(state) : state
+    },
+    {
+      getState: () => ({
+        assistants: [
+          {
+            id: 'test-assistant',
+            instructions: 'You are a helpful assistant.',
+            parameters: { stream: true },
+          },
+        ],
+        currentAssistant: {
+          id: 'test-assistant',
+          instructions: 'You are a helpful assistant.',
+          parameters: { stream: true },
+        },
+      })
+    }
+  ),
+}))
+
+vi.mock('../useModelProvider', () => ({
+  useModelProvider: Object.assign(
+    (selector: any) => {
+      const state = {
+        getProviderByName: vi.fn(() => ({ provider: 'openai', models: [] })),
+        selectedModel: { id: 'test-model', capabilities: ['tools'] },
+        selectedProvider: 'openai',
+        updateProvider: vi.fn(),
+      }
+      return selector ? selector(state) : state
+    },
+    {
+      getState: () => ({
+        getProviderByName: vi.fn(() => ({ provider: 'openai', models: [] })),
+        selectedModel: { id: 'test-model', capabilities: ['tools'] },
+        selectedProvider: 'openai',
+        updateProvider: vi.fn(),
+      })
+    }
+  ),
+}))
+
+vi.mock('../useThreads', () => ({
+  useThreads: Object.assign(
+    (selector: any) => {
+      const state = {
+        getCurrentThread: hoisted.getCurrentThreadMock,
+        createThread: hoisted.createThreadMock,
+        updateThreadTimestamp: vi.fn(),
+        currentThreadId: null,
+        updateThread: hoisted.updateThreadMock,
+      }
+      return selector ? selector(state) : state
+    },
+    {
+      getState: () => ({
+        getCurrentThread: hoisted.getCurrentThreadMock,
+        createThread: hoisted.createThreadMock,
+        updateThreadTimestamp: vi.fn(),
+        currentThreadId: 'new-thread-id',
+        updateThread: hoisted.updateThreadMock,
+      })
+    }
+  ),
+}))
+
+vi.mock('../useThreadManagement', () => ({
+  useThreadManagement: Object.assign(
+    (selector: any) => {
+      const state = {
+        getFolderById: hoisted.getFolderByIdMock,
+      }
+      return selector ? selector(state) : state
+    },
+    {
+      getState: () => ({
+        getFolderById: hoisted.getFolderByIdMock,
+      })
+    }
+  ),
+}))
+
+vi.mock('../useMessages', () => ({
+  useMessages: (selector: any) => {
+    const state = {
+      getMessages: vi.fn(() => [
+        { role: 'user', content: 'Hello' },
+        { role: 'assistant', content: 'Hi there!' },
+      ]),
+      addMessage: vi.fn()
+    }
+    return selector ? selector(state) : state
+  },
+}))
+
+vi.mock('../useToolApproval', () => ({
+  useToolApproval: (selector: any) => {
+    const state = {
+      approvedTools: [],
+      showApprovalModal: vi.fn(),
+      allowAllMCPPermissions: false,
+    }
+    return selector ? selector(state) : state
+  },
+}))
+
+vi.mock('../useToolAvailable', () => ({
+  useToolAvailable: (selector: any) => {
+    const state = {
+      getDisabledToolsForThread: vi.fn(() => []),
+    }
+    return selector ? selector(state) : state
+  },
+}))
+
+vi.mock('../useModelContextApproval', () => ({
+  useContextSizeApproval: (selector: any) => {
+    const state = { showApprovalModal: vi.fn() }
+    return selector ? selector(state) : state
+  },
+}))
+
+vi.mock('../useModelLoad', () => ({
+  useModelLoad: (selector: any) => {
+    const state = { setModelLoadError: vi.fn() }
+    return selector ? selector(state) : state
+  },
+}))
+
+vi.mock('@tanstack/react-router', () => ({
+  useRouter: vi.fn(() => hoisted.routerMock),
+}))
+
+vi.mock('@/lib/completion', () => ({
+  emptyThreadContent: { thread_id: 'test-thread', content: '' },
+  extractToolCall: vi.fn(),
+  newUserThreadContent: vi.fn(() => ({
+    thread_id: 'test-thread',
+    content: 'user message',
+  })),
+  newAssistantThreadContent: vi.fn(() => ({
+    thread_id: 'test-thread',
+    content: 'assistant message',
+  })),
+  sendCompletion: vi.fn(() =>
+    Promise.resolve({ choices: [{ message: { content: '' } }] })
+  ),
+  postMessageProcessing: vi.fn(),
+  isCompletionResponse: vi.fn(() => true),
+}))
+
+vi.mock('@/services/mcp', () => ({
+  getTools: vi.fn(() => Promise.resolve([])),
+}))
+
+vi.mock('@/services/models', () => ({
+  startModel: vi.fn(() => Promise.resolve()),
+  stopModel: vi.fn(() => Promise.resolve()),
+  stopAllModels: vi.fn(() => Promise.resolve()),
+}))
+
+vi.mock('@/services/providers', () => ({
+  updateSettings: vi.fn(() => Promise.resolve()),
+}))
+
+vi.mock('@tauri-apps/api/event', () => ({
+  listen: vi.fn(() => Promise.resolve(vi.fn())),
+}))
+
+vi.mock('@/hooks/useServiceHub', () => ({
+  useServiceHub: () => ({
+    models: () => ({
+      startModel: vi.fn(() => Promise.resolve()),
+    }),
+  }),
+}))
+
+vi.mock('@/lib/instructionTemplate', () => ({
+  renderInstructions: vi.fn((instructions) => instructions),
+}))
+
+describe('useChat project system prompt integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    hoisted.routerMock.state.location.pathname = '/'
+    hoisted.getCurrentThreadMock.mockReturnValue(null)
+    hoisted.createThreadMock.mockResolvedValue({
+      id: 'new-thread-id',
+      model: { id: 'test-model', provider: 'openai' },
+    })
+  })
+
+  it('applies project system prompt when creating thread in project route', async () => {
+    // Set up project route
+    hoisted.routerMock.state.location.pathname = '/project/project-123'
+    hoisted.getFolderByIdMock.mockReturnValue({
+      id: 'project-123',
+      name: 'Test Project',
+      updated_at: Date.now(),
+      systemPrompt: 'You are a Python expert.',
+    })
+
+    const { result } = renderHook(() => useChat())
+
+    await act(async () => {
+      await result.current('Hello')
+    })
+
+    // Verify updateThread was called with project metadata
+    expect(hoisted.updateThreadMock).toHaveBeenCalledWith('new-thread-id', {
+      metadata: {
+        project: {
+          id: 'project-123',
+          name: 'Test Project',
+          updated_at: expect.any(Number),
+        },
+      },
+    })
+  })
+
+  it('does not apply project metadata when not in project route', async () => {
+    hoisted.routerMock.state.location.pathname = '/threads/some-thread'
+
+    const { result } = renderHook(() => useChat())
+
+    await act(async () => {
+      await result.current('Hello')
+    })
+
+    // Verify updateThread was not called
+    expect(hoisted.updateThreadMock).not.toHaveBeenCalled()
+  })
+
+  it('combines project system prompt with assistant instructions when sending message', async () => {
+    // Set up existing thread with project metadata
+    hoisted.getCurrentThreadMock.mockReturnValue({
+      id: 'existing-thread',
+      model: { id: 'test-model', provider: 'openai' },
+      metadata: {
+        project: {
+          id: 'project-456',
+          name: 'Coding Project',
+          updated_at: Date.now(),
+        },
+      },
+    })
+
+    hoisted.getFolderByIdMock.mockReturnValue({
+      id: 'project-456',
+      name: 'Coding Project',
+      updated_at: Date.now(),
+      systemPrompt: 'You are a JavaScript expert specializing in React.',
+    })
+
+    const { result } = renderHook(() => useChat())
+
+    await act(async () => {
+      await result.current('How do I use hooks?')
+    })
+
+    // Verify CompletionMessagesBuilder was called with combined instructions
+    expect(hoisted.builderMock).toHaveBeenCalled()
+    const calls = hoisted.builderMock.mock.calls as any[]
+    const lastCall = calls[calls.length - 1]
+
+    // The second parameter should be the combined system instructions
+    const combinedInstructions = lastCall[1]
+    expect(combinedInstructions).toContain('You are a JavaScript expert specializing in React.')
+    expect(combinedInstructions).toContain('You are a helpful assistant.')
+  })
+
+  it('uses only assistant instructions when thread has no project', async () => {
+    hoisted.getCurrentThreadMock.mockReturnValue({
+      id: 'existing-thread',
+      model: { id: 'test-model', provider: 'openai' },
+      metadata: {},
+    })
+
+    const { result } = renderHook(() => useChat())
+
+    await act(async () => {
+      await result.current('Hello')
+    })
+
+    // Verify CompletionMessagesBuilder was called with only assistant instructions
+    expect(hoisted.builderMock).toHaveBeenCalled()
+    const calls = hoisted.builderMock.mock.calls as any[]
+    const lastCall = calls[calls.length - 1]
+
+    const instructions = lastCall[1]
+    expect(instructions).toBe('You are a helpful assistant.')
+  })
+
+  it('uses only assistant instructions when project has no system prompt', async () => {
+    hoisted.getCurrentThreadMock.mockReturnValue({
+      id: 'existing-thread',
+      model: { id: 'test-model', provider: 'openai' },
+      metadata: {
+        project: {
+          id: 'project-789',
+          name: 'Project Without Prompt',
+          updated_at: Date.now(),
+        },
+      },
+    })
+
+    hoisted.getFolderByIdMock.mockReturnValue({
+      id: 'project-789',
+      name: 'Project Without Prompt',
+      updated_at: Date.now(),
+      // No systemPrompt
+    })
+
+    const { result } = renderHook(() => useChat())
+
+    await act(async () => {
+      await result.current('Hello')
+    })
+
+    expect(hoisted.builderMock).toHaveBeenCalled()
+    const calls = hoisted.builderMock.mock.calls as any[]
+    const lastCall = calls[calls.length - 1]
+
+    const instructions = lastCall[1]
+    expect(instructions).toBe('You are a helpful assistant.')
+  })
+
+  it('uses only project system prompt when combined with empty assistant instructions', async () => {
+    // For this test, we'll verify the behavior when assistant instructions are empty
+    // The combined instructions should just be the project system prompt
+    hoisted.getCurrentThreadMock.mockReturnValue({
+      id: 'existing-thread',
+      model: { id: 'test-model', provider: 'openai' },
+      metadata: {
+        project: {
+          id: 'project-999',
+          name: 'Project Only',
+          updated_at: Date.now(),
+        },
+      },
+    })
+
+    hoisted.getFolderByIdMock.mockReturnValue({
+      id: 'project-999',
+      name: 'Project Only',
+      updated_at: Date.now(),
+      systemPrompt: 'You are a data science expert.',
+    })
+
+    const { result } = renderHook(() => useChat())
+
+    await act(async () => {
+      await result.current('Analyze this data')
+    })
+
+    expect(hoisted.builderMock).toHaveBeenCalled()
+    const calls = hoisted.builderMock.mock.calls as any[]
+    const lastCall = calls[calls.length - 1]
+
+    const instructions = lastCall[1]
+    // Should contain both the project prompt and assistant instructions
+    expect(instructions).toContain('You are a data science expert.')
+    expect(instructions).toContain('You are a helpful assistant.')
+  })
+})
diff --git a/web-app/src/hooks/__tests__/useThreadManagement.test.ts b/web-app/src/hooks/__tests__/useThreadManagement.test.ts
new file mode 100644
index 0000000000..6a76d40801
--- /dev/null
+++ b/web-app/src/hooks/__tests__/useThreadManagement.test.ts
@@ -0,0 +1,232 @@
+import { renderHook, act } from '@testing-library/react'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { useThreadManagement } from '../useThreadManagement'
+
+describe('useThreadManagement', () => {
+  beforeEach(() => {
+    // Reset the store state before each test
+    const { result } = renderHook(() => useThreadManagement())
+    act(() => {
+      result.current.setFolders([])
+    })
+  })
+
+  describe('addFolder', () => {
+    it('adds a folder without system prompt', () => {
+      const { result } = renderHook(() => useThreadManagement())
+
+      act(() => {
+        result.current.addFolder('Test Project')
+      })
+
+      expect(result.current.folders).toHaveLength(1)
+      expect(result.current.folders[0].name).toBe('Test Project')
+      expect(result.current.folders[0].id).toBeDefined()
+      expect(result.current.folders[0].updated_at).toBeDefined()
+      expect(result.current.folders[0].systemPrompt).toBeUndefined()
+    })
+
+    it('adds a folder with system prompt', () => {
+      const { result } = renderHook(() => useThreadManagement())
+      const systemPrompt = 'You are a helpful coding assistant'
+
+      act(() => {
+        result.current.addFolder('Coding Project', systemPrompt)
+      })
+
+      expect(result.current.folders).toHaveLength(1)
+      expect(result.current.folders[0].name).toBe('Coding Project')
+      expect(result.current.folders[0].systemPrompt).toBe(systemPrompt)
+    })
+
+    it('adds multiple folders with different system prompts', () => {
+      const { result } = renderHook(() => useThreadManagement())
+
+      act(() => {
+        result.current.addFolder('Project 1', 'System prompt 1')
+        result.current.addFolder('Project 2', 'System prompt 2')
+        result.current.addFolder('Project 3')
+      })
+
+      expect(result.current.folders).toHaveLength(3)
+      expect(result.current.folders[0].systemPrompt).toBe('System prompt 1')
+      expect(result.current.folders[1].systemPrompt).toBe('System prompt 2')
+      expect(result.current.folders[2].systemPrompt).toBeUndefined()
+    })
+  })
+
+  describe('updateFolder', () => {
+    it('updates folder name only', () => {
+      const { result } = renderHook(() => useThreadManagement())
+
+      act(() => {
+        result.current.addFolder('Old Name', 'Original prompt')
+      })
+
+      const folderId = result.current.folders[0].id
+      const originalUpdatedAt = result.current.folders[0].updated_at
+
+      // Wait a bit to ensure updated_at changes
+      act(() => {
+        result.current.updateFolder(folderId, 'New Name')
+      })
+
+      expect(result.current.folders).toHaveLength(1)
+      expect(result.current.folders[0].name).toBe('New Name')
+      expect(result.current.folders[0].systemPrompt).toBeUndefined()
+      expect(result.current.folders[0].updated_at).toBeGreaterThanOrEqual(originalUpdatedAt)
+    })
+
+    it('updates folder name and system prompt', () => {
+      const { result } = renderHook(() => useThreadManagement())
+
+      act(() => {
+        result.current.addFolder('Project', 'Old prompt')
+      })
+
+      const folderId = result.current.folders[0].id
+
+      act(() => {
+        result.current.updateFolder(folderId, 'Updated Project', 'New prompt')
+      })
+
+      expect(result.current.folders[0].name).toBe('Updated Project')
+      expect(result.current.folders[0].systemPrompt).toBe('New prompt')
+    })
+
+    it('updates only system prompt', () => {
+      const { result } = renderHook(() => useThreadManagement())
+
+      act(() => {
+        result.current.addFolder('Project', 'Old prompt')
+      })
+
+      const folderId = result.current.folders[0].id
+
+      act(() => {
+        result.current.updateFolder(folderId, 'Project', 'Updated prompt')
+      })
+
+      expect(result.current.folders[0].name).toBe('Project')
+      expect(result.current.folders[0].systemPrompt).toBe('Updated prompt')
+    })
+
+    it('removes system prompt when undefined is passed', () => {
+      const { result } = renderHook(() => useThreadManagement())
+
+      act(() => {
+        result.current.addFolder('Project', 'Original prompt')
+      })
+
+      const folderId = result.current.folders[0].id
+
+      expect(result.current.folders[0].systemPrompt).toBe('Original prompt')
+
+      act(() => {
+        result.current.updateFolder(folderId, 'Project', undefined)
+      })
+
+      expect(result.current.folders[0].systemPrompt).toBeUndefined()
+    })
+
+    it('does not update non-matching folders', () => {
+      const { result } = renderHook(() => useThreadManagement())
+
+      act(() => {
+        result.current.addFolder('Project 1', 'Prompt 1')
+        result.current.addFolder('Project 2', 'Prompt 2')
+      })
+
+      const folderId = result.current.folders[0].id
+
+      act(() => {
+        result.current.updateFolder(folderId, 'Updated Project 1', 'Updated Prompt 1')
+      })
+
+      expect(result.current.folders[0].name).toBe('Updated Project 1')
+      expect(result.current.folders[0].systemPrompt).toBe('Updated Prompt 1')
+      expect(result.current.folders[1].name).toBe('Project 2')
+      expect(result.current.folders[1].systemPrompt).toBe('Prompt 2')
+    })
+  })
+
+  describe('deleteFolder', () => {
+    it('deletes a folder', () => {
+      const { result } = renderHook(() => useThreadManagement())
+
+      act(() => {
+        result.current.addFolder('Test Project', 'Test prompt')
+      })
+
+      const folderId = result.current.folders[0].id
+
+      expect(result.current.folders).toHaveLength(1)
+
+      act(() => {
+        result.current.deleteFolder(folderId)
+      })
+
+      expect(result.current.folders).toHaveLength(0)
+    })
+  })
+
+  describe('getFolderById', () => {
+    it('returns folder with system prompt', () => {
+      const { result } = renderHook(() => useThreadManagement())
+
+      act(() => {
+        result.current.addFolder('Test Project', 'Test system prompt')
+      })
+
+      const folderId = result.current.folders[0].id
+      const folder = result.current.getFolderById(folderId)
+
+      expect(folder).toBeDefined()
+      expect(folder?.name).toBe('Test Project')
+      expect(folder?.systemPrompt).toBe('Test system prompt')
+    })
+
+    it('returns folder without system prompt', () => {
+      const { result } = renderHook(() => useThreadManagement())
+
+      act(() => {
+        result.current.addFolder('Test Project')
+      })
+
+      const folderId = result.current.folders[0].id
+      const folder = result.current.getFolderById(folderId)
+
+      expect(folder).toBeDefined()
+      expect(folder?.systemPrompt).toBeUndefined()
+    })
+
+    it('returns undefined for non-existent folder', () => {
+      const { result } = renderHook(() => useThreadManagement())
+
+      const folder = result.current.getFolderById('non-existent-id')
+
+      expect(folder).toBeUndefined()
+    })
+  })
+
+  describe('setFolders', () => {
+    it('sets folders with system prompts', () => {
+      const { result } = renderHook(() => useThreadManagement())
+
+      const folders = [
+        { id: '1', name: 'Folder 1', updated_at: Date.now(), systemPrompt: 'Prompt 1' },
+        { id: '2', name: 'Folder 2', updated_at: Date.now(), systemPrompt: 'Prompt 2' },
+        { id: '3', name: 'Folder 3', updated_at: Date.now() },
+      ]
+
+      act(() => {
+        result.current.setFolders(folders)
+      })
+
+      expect(result.current.folders).toEqual(folders)
+      expect(result.current.folders[0].systemPrompt).toBe('Prompt 1')
+      expect(result.current.folders[1].systemPrompt).toBe('Prompt 2')
+      expect(result.current.folders[2].systemPrompt).toBeUndefined()
+    })
+  })
+})
diff --git a/web-app/src/hooks/useChat.ts b/web-app/src/hooks/useChat.ts
index 516a61b20c..eba20f98e7 100644
--- a/web-app/src/hooks/useChat.ts
+++ b/web-app/src/hooks/useChat.ts
@@ -32,6 +32,7 @@ import {
   extractReasoningFromMessage,
 } from '@/utils/reasoning'
 import { useAssistant } from './useAssistant'
+import { useThreadManagement } from './useThreadManagement'
 import { useShallow } from 'zustand/shallow'
 
 export const useChat = () => {
@@ -93,6 +94,7 @@ export const useChat = () => {
       const assistants = useAssistant.getState().assistants
       const selectedModel = useModelProvider.getState().selectedModel
       const selectedProvider = useModelProvider.getState().selectedProvider
+
       currentThread = await createThread(
         {
           id: selectedModel?.id ?? defaultModel(selectedProvider),
@@ -101,6 +103,39 @@ export const useChat = () => {
         currentPrompt,
         assistants.find((a) => a.id === currentAssistant?.id) || assistants[0]
       )
+
+      // Check if we're in a project route and assign project metadata after thread creation
+      const currentPath = router.state.location.pathname
+      const projectMatch = currentPath.match(/^\/project\/(.+)$/)
+      if (projectMatch) {
+        const projectId = projectMatch[1]
+        const project = useThreadManagement.getState().getFolderById(projectId)
+        if (project) {
+          const updateThread = useThreads.getState().updateThread
+          updateThread(currentThread.id, {
+            metadata: {
+              project: {
+                id: project.id,
+                name: project.name,
+                updated_at: project.updated_at,
+              },
+            },
+          })
+          // Update the local thread object with the new metadata
+          currentThread = {
+            ...currentThread,
+            metadata: {
+              ...currentThread.metadata,
+              project: {
+                id: project.id,
+                name: project.name,
+                updated_at: project.updated_at,
+              },
+            },
+          }
+        }
+      }
+
       router.navigate({
         to: route.threadsDetail,
         params: { threadId: currentThread.id },
@@ -247,11 +282,21 @@ export const useChat = () => {
           updateLoadingModel(false)
         }
         const currentAssistant = useAssistant.getState().currentAssistant
+
+        // Get project system prompt if thread belongs to a project
+        const projectSystemPrompt = activeThread.metadata?.project?.id
+          ? useThreadManagement.getState().getFolderById(activeThread.metadata.project.id)?.systemPrompt
+          : undefined
+
+        // Combine project system prompt with assistant instructions
+        const combinedInstructions = [
+          projectSystemPrompt,
+          currentAssistant ? renderInstructions(currentAssistant.instructions) : undefined
+        ].filter(Boolean).join('\n\n')
+
         const builder = new CompletionMessagesBuilder(
           messages,
-          currentAssistant
-            ? renderInstructions(currentAssistant.instructions)
-            : undefined
+          combinedInstructions || undefined
         )
         if (troubleshooting) builder.addUserMessage(message, attachments)
 
diff --git a/web-app/src/hooks/useThreadManagement.ts b/web-app/src/hooks/useThreadManagement.ts
index 84e5b0e34e..b1c7963d6c 100644
--- a/web-app/src/hooks/useThreadManagement.ts
+++ b/web-app/src/hooks/useThreadManagement.ts
@@ -8,13 +8,14 @@ type ThreadFolder = {
   id: string
   name: string
   updated_at: number
+  systemPrompt?: string
 }
 
 type ThreadManagementState = {
   folders: ThreadFolder[]
   setFolders: (folders: ThreadFolder[]) => void
-  addFolder: (name: string) => void
-  updateFolder: (id: string, name: string) => void
+  addFolder: (name: string, systemPrompt?: string) => void
+  updateFolder: (id: string, name: string, systemPrompt?: string) => void
   deleteFolder: (id: string) => void
   getFolderById: (id: string) => ThreadFolder | undefined
 }
@@ -28,22 +29,28 @@ export const useThreadManagement = create<ThreadManagementState>()(
         set({ folders })
       },
 
-      addFolder: (name) => {
+      addFolder: (name, systemPrompt) => {
         const newFolder: ThreadFolder = {
           id: ulid(),
           name,
           updated_at: Date.now(),
+          systemPrompt,
         }
         set((state) => ({
           folders: [...state.folders, newFolder],
         }))
       },
 
-      updateFolder: (id, name) => {
+      updateFolder: (id, name, systemPrompt) => {
         set((state) => ({
           folders: state.folders.map((folder) =>
             folder.id === id
-              ? { ...folder, name, updated_at: Date.now() }
+              ? {
+                  ...folder,
+                  name,
+                  updated_at: Date.now(),
+                  systemPrompt
+                }
               : folder
           ),
         }))
diff --git a/web-app/src/locales/de-DE/common.json b/web-app/src/locales/de-DE/common.json
index 4ce743b467..e657bc5718 100644
--- a/web-app/src/locales/de-DE/common.json
+++ b/web-app/src/locales/de-DE/common.json
@@ -263,7 +263,8 @@
       "updateButton": "Aktualisieren",
       "alreadyExists": "Projekt \"{{projectName}}\" existiert bereits",
       "createSuccess": "Projekt \"{{projectName}}\" erfolgreich erstellt",
-      "renameSuccess": "Projekt von \"{{oldName}}\" zu \"{{newName}}\" umbenannt"
+      "renameSuccess": "Projekt von \"{{oldName}}\" zu \"{{newName}}\" umbenannt",
+      "updateSuccess": "Projekt \"{{projectName}}\" erfolgreich aktualisiert"
     },
     "noConversationsIn": "Keine Gespräche in {{projectName}}",
     "startNewConversation": "Starten Sie ein neues Gespräch mit {{projectName}} unten",
@@ -419,7 +420,8 @@
       "updateButton": "Aktualisieren",
       "alreadyExists": "Projekt \"{{projectName}}\" existiert bereits",
       "createSuccess": "Projekt \"{{projectName}}\" erfolgreich erstellt",
-      "renameSuccess": "Projekt von \"{{oldName}}\" zu \"{{newName}}\" umbenannt"
+      "renameSuccess": "Projekt von \"{{oldName}}\" zu \"{{newName}}\" umbenannt",
+      "updateSuccess": "Projekt \"{{projectName}}\" erfolgreich aktualisiert"
     },
     "noConversationsIn": "Keine Gespräche in {{projectName}}",
     "startNewConversation": "Starten Sie ein neues Gespräch mit {{projectName}} unten",
diff --git a/web-app/src/locales/en/common.json b/web-app/src/locales/en/common.json
index c829dbdf84..57702cc4e5 100644
--- a/web-app/src/locales/en/common.json
+++ b/web-app/src/locales/en/common.json
@@ -265,7 +265,8 @@
       "updateButton": "Update",
       "alreadyExists": "Project \"{{projectName}}\" already exists",
       "createSuccess": "Project \"{{projectName}}\" created successfully",
-      "renameSuccess": "Project renamed from \"{{oldName}}\" to \"{{newName}}\""
+      "renameSuccess": "Project renamed from \"{{oldName}}\" to \"{{newName}}\"",
+      "updateSuccess": "Project \"{{projectName}}\" updated successfully"
     },
     "noConversationsIn": "No Conversations in {{projectName}}",
     "startNewConversation": "Start a new conversation with {{projectName}} below",
diff --git a/web-app/src/routes/project/index.tsx b/web-app/src/routes/project/index.tsx
index 5ab24bb396..8f2ab967cc 100644
--- a/web-app/src/routes/project/index.tsx
+++ b/web-app/src/routes/project/index.tsx
@@ -55,11 +55,11 @@ function ProjectContent() {
     }
   }
 
-  const handleSave = (name: string) => {
+  const handleSave = (name: string, systemPrompt?: string) => {
     if (editingKey) {
-      updateFolder(editingKey, name)
+      updateFolder(editingKey, name, systemPrompt)
     } else {
-      addFolder(name)
+      addFolder(name, systemPrompt)
     }
     setOpen(false)
     setEditingKey(null)