perf(app): add file size guard and loading state to code file reader

Handles 413 status for files > 1MB with user-friendly error message.
Adds fileLoading and fileError state for loading indicator support.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-04 22:51:10 +00:00
co-authored by Claude Opus 4.6
parent 04db18c35a
commit 290aa047d7
+14 -1
View File
@@ -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,