perf(file-panel): add line-range API + virtualization + size guard for large files (#723)#724
Merged
Conversation
…r large files (#723) Hybrid approach to fix UI hang when opening large files on PC: Viewer-only (code/log files): - Add line-range mode (`?startLine=N&endLine=M`) to GET /api/worktrees/:id/files/:path - Server-side streaming via createReadStream + readline (memory O(chunk)) - New `readFileLineRange` helper in src/lib/file-operations.ts - CodeViewer rewritten with @tanstack/react-virtual for visible-range + overscan - Per-chunk hljs highlighting with Map cache - Line-range mode skips If-Modified-Since and always returns 200 - Disable polling when content >= POLLING_DISABLED_THRESHOLD_BYTES (1MB) Editable files (.md, .yaml, .yml): - New 2MB GET pre-guard returning FILE_TOO_LARGE (HTTP 413) - TEXT_MAX_SIZE_BYTES raised from 1MB to 2MB as single PUT/GET constant - HTML (.html/.htm) excluded; existing 5MB guard (Issue #490) preserved - New i18n keys: fileTooLarge.editableLimit / fileTooLarge.viewerLimit Hooks / shared: - useFileContentSearch: debounce 300ms + min 2 chars via SEARCH_DEBOUNCE_MS / SEARCH_MIN_QUERY_LENGTH (shared with useTerminalSearch) - useFileContentPolling: large-file disable with POLLING_DISABLED_THRESHOLD_BYTES boundary (undefined keeps polling enabled) - FileViewer inline search replaced by useFileContentSearch Type / config: - FileContent extended with optional totalLines / totalBytes / encoding / range (backward compatible) - New src/config/file-viewer-config.ts (VIEWER_CHUNK_LINE_SIZE=500, VIEWER_OVERSCAN_LINES=100, POLLING_DISABLED_THRESHOLD_BYTES=1MB) Breaking change: - .md/.yaml/.yml > 2MB now return 413 on GET (previously opened but failed on PUT). HTML > 5MB behaviour unchanged. Tests: - 6588 unit / 76 issue-related integration tests pass - New readFileLineRange suite with 100MB streaming RSS verification (<50MB increment) - New line-range API + 2MB pre-guard integration suites Docs: - CHANGELOG.md [Unreleased] entries (Performance / Added / Changed / Breaking Changes) - CLAUDE.md module reference updates (editable-extensions, file-viewer-config, file-operations, FilePanelContent, FileViewer, useFileContentPolling, useFileContentSearch) - dev-reports/issue/723/ multi-stage Issue review (Stage 1-4), work plan, TDD/acceptance/refactor results Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Issue #723 対応。PC版で数MB以上の大規模ファイルを開くとUIがハングする問題に対し、閲覧専用ファイル（行ベースAPI + 仮想スクロール）と編集系ファイル（GET事前2MBサイズ上限）のハイブリッド方式で根本対応する。
GET /api/worktrees/:id/files/:path?startLine=N&endLine=Mで行範囲取得 +@tanstack/react-virtualで可視範囲のみマウント.md/.yaml/.yml等）: GET時にサイズ上限2MB事前ガード (FILE_TOO_LARGE/ HTTP 413)POLLING_DISABLED_THRESHOLD_BYTES）変更内容
新規ファイル
src/config/file-viewer-config.ts— チャンクサイズ・オーバースキャン・閾値定数tests/unit/config/file-viewer-config.test.ts既存ファイル変更
src/lib/file-operations.ts—readFileLineRange追加（createReadStream+readline、メモリ O(チャンク)）src/app/api/worktrees/[id]/files/[...path]/route.ts— 行範囲分岐 + 編集系2MB事前ガードsrc/components/worktree/FilePanelContent.tsx—CodeViewerを仮想化対応に書き換えsrc/hooks/useFileContentPolling.ts— 大ファイル時無効化条件追加src/hooks/useFileContentSearch.ts— debounce + 最小2文字src/config/editable-extensions.ts— 編集系拡張子サイズ上限定数src/types/models.ts—FileContentにtotalLines/totalBytesメタ追加package.json—@tanstack/react-virtual追加CLAUDE.md— モジュールリファレンス更新CHANGELOG.md— [Unreleased] 追記破壊的変更
.md/.yaml/.yml等 編集系FILE_TOO_LARGE）.html/.htm詳細は
CHANGELOG.md参照。品質チェック
npm run lintnpx tsc --noEmitnpm run test:unitnpm run build実行フロー
/orchestrate 723→/pm-auto-issue2dev 723:--full未指定）関連
dev-reports/issue/723/pm-auto-dev/iteration-1/progress-report.mddev-reports/issue/723/work-plan.mddev-reports/issue/723/issue-review/summary-report.mdTest plan
.mdファイルを開くとエラー「ファイルが大きすぎます」が表示される (HTTP 413).md/.yamlファイルの編集・保存に影響なし🤖 Generated with Claude Code