headquarter/openspec/changes/archive/2026-05-19-file-editor/tasks.md

File Editor - Tasks

Phase 1: Dependencies and Setup

• Task 1.1: Install dependencies

  • react-simple-code-editor
  • prismjs
  • @types/prismjs
  • Add Prism CSS theme

• Task 1.2: Create language detection utility

  • Map file extensions to Prism.js language names
  • Handle common extensions (.js, .ts, .py, .md, etc.)
  • Default to plaintext for unknown extensions

Phase 2: Syntax Highlighting

• Task 2.1: Create SyntaxHighlighter component

  • Use Prism.js to tokenize code
  • Render highlighted HTML
  • Add line numbers
  • Copy-to-clipboard button

• Task 2.2: Add Prism.js themes

  • Light theme (matches app)
  • Dark theme support
  • CSS custom properties integration

• Task 2.3: Lazy load language support

  • Only load language grammar when needed
  • Dynamic imports for language files

Phase 3: Edit Mode

• Task 3.1: Create CodeEditor component

  • Use react-simple-code-editor
  • Prism.js highlighting overlay
  • Line numbers
  • Tab key support

• Task 3.2: Add keyboard shortcuts

  • Ctrl/Cmd + E: Toggle edit
  • Ctrl/Cmd + S: Save
  • Escape: Cancel
  • Tab: Insert spaces

Phase 4: Commit Dialog

• Task 4.1: Create CommitDialog component

  • Diff preview (simple comparison)
  • Commit message input (required)
  • Author info display
  • Cancel and Commit buttons

• Task 4.2: Add diff generation

  • Simple line-by-line diff
  • Show added/removed lines
  • Highlight changes

Phase 5: FileEditor Integration

• Task 5.1: Create FileEditor component

  • Manage view/edit state
  • Load file content
  • Toggle modes
  • Handle save flow

• Task 5.2: Replace FileViewer in RepoWorkspace

  • Update imports
  • Pass required props
  • Handle file selection

Phase 6: Styling

• Task 6.1: Add editor CSS

  • Toolbar styling
  • Editor container
  • Line numbers
  • Syntax colors
  • Commit dialog styles

• Task 6.2: Add responsive styles

  • Mobile layout
  • Touch-friendly buttons
  • Collapsible toolbar

Phase 7: Quality Gates

• Task 7.1: Run backend checks

  • ruff
  • mypy

• Task 7.2: Run frontend checks

  • TypeScript typecheck
  • ESLint
  • Build

• Task 7.3: Manual testing

  • Test various file types
  • Test commit flow
  • Test error handling
  • Test responsive design