diff --git a/packages/app/src/composables/useCodeContext.ts b/packages/app/src/composables/useCodeContext.ts
index ab808ee6..ca9c461b 100644
--- a/packages/app/src/composables/useCodeContext.ts
+++ b/packages/app/src/composables/useCodeContext.ts
@@ -1,4 +1,4 @@
-import { ref, computed, shallowRef } from 'vue'
+import { ref, computed, shallowRef, readonly } from 'vue'
 
 export interface ProjectInfo {
   name: string
@@ -24,6 +24,8 @@ const activeFileContent = ref<string>('')
 const activeFileLanguage = ref<string>('plaintext')
 const selectedDesignTokens = ref<string[]>([])
 const selectedFiles = ref<string[]>([])
+const fileLoading = ref(false)
+const fileError = ref('')
 
 // Demo projects path
 const PROJECTS_ROOT = '/Users/dorian/Projects'
@@ -179,12 +181,19 @@ export function useCodeContext() {
   async function openFile(filePath: string): Promise<void> {
     activeFile.value = filePath
     activeFileLanguage.value = detectLanguage(filePath)
+    fileLoading.value = true
+    fileError.value = ''
 
     try {
       const fullPath = activeProject.value
         ? `${activeProject.value.path}/${filePath}`
         : filePath
       const response = await fetch(`/api/fs/read?path=${encodeURIComponent(fullPath)}`)
+      if (response.status === 413) {
+        fileError.value = 'File too large to preview (max 1MB)'
+        activeFileContent.value = ''
+        return
+      }
       if (response.ok) {
         const data = await response.json()
         activeFileContent.value = data.content ?? ''
@@ -192,6 +201,8 @@ export function useCodeContext() {
     } catch {
       // Demo fallback
       activeFileContent.value = getDemoFileContent(filePath)
+    } finally {
+      fileLoading.value = false
     }
   }
 
@@ -265,6 +276,8 @@ export function useCodeContext() {
     activeFileLanguage,
     selectedDesignTokens,
     selectedFiles,
+    fileLoading: readonly(fileLoading),
+    fileError: readonly(fileError),
 
     // Actions
     enterCodeMode,