` 5. On error, fall back to `` 6. On success, render: - A `
` wrapper (the `paperclip-markdown` class activates existing hljs theme CSS) - A header bar: `
` with: - Language label from file extension (use extToLang mapping function) - Copy button using same pattern as ChatCodeBlock (Copy/Check icons from lucide-react, navigator.clipboard.writeText) - A `
` block. Use `hljs.highlight(content, { language: lang })` from `highlight.js/lib/core` to produce highlighted HTML. Render the highlighted output safely. hljs.highlight produces only `` tokens from source code — this is the same trust model as rehype-highlight used in ChatMarkdownMessage. If the language is not registered, fall back to `hljs.highlightAuto(content)`.
   - Max height: `max-h-[400px] overflow-auto`
   - Below the code block, render `` for the download button

Import highlight.js: `import hljs from "highlight.js/lib/core"`. Since rehype-highlight already uses highlight.js, the package is available. Register common languages explicitly (import from highlight.js/lib/languages/...) for: typescript, javascript, python, css, json, xml, bash, sql, go, rust, java, cpp, markdown, yaml.

Extension-to-language map function:
```typescript
function extToLang(filename: string): string {
  const ext = filename.split(".").pop()?.toLowerCase() ?? "";
  const map: Record = {
    ts: "typescript", tsx: "typescript", js: "javascript", jsx: "javascript",
    py: "python", rb: "ruby", rs: "rust", go: "go", java: "java",
    css: "css", html: "xml", json: "json", sh: "bash", bash: "bash",
    yaml: "yaml", yml: "yaml", toml: "ini", md: "markdown",
    c: "c", cpp: "cpp", cs: "csharp", kt: "kotlin", swift: "swift",
    php: "php", sql: "sql", xml: "xml",
  };
  return map[ext] ?? ext;
}
```
  
  
    cd /opt/nexus && npx tsc --noEmit -p ui/tsconfig.json 2>&1 | head -20
  
  
    - File `ui/src/components/ChatCodeFilePreview.tsx` exists
    - Contains `import hljs from` for highlight.js
    - Contains `fetch(contentPath` for loading file content
    - Contains `hljs.highlight` for rendering highlighted code
    - Contains `paperclip-markdown` class on wrapper div
    - Contains `ChatFileCard` import and render for download fallback
    - Contains `max-h-[400px]` for scroll containment
    - Contains `extToLang` or equivalent extension mapping function
  
  ChatCodeFilePreview component renders fetched code content with syntax highlighting, copy button, language label, and download card



  Task 2: Wire ChatCodeFilePreview into ChatFilePreview and update REQUIREMENTS.md
  ui/src/components/ChatFilePreview.tsx, .planning/REQUIREMENTS.md
  
    - ui/src/components/ChatFilePreview.tsx
    - ui/src/components/ChatCodeFilePreview.tsx
    - .planning/REQUIREMENTS.md
  
  
1. Update `ui/src/components/ChatFilePreview.tsx`:
   - Add import: `import { ChatCodeFilePreview } from "./ChatCodeFilePreview";`
   - Add a new branch before the fallback return, after the image branch:
     ```
     if (file.category === "code") {
       return ;
     }
     ```
   - Keep the existing fallback `return ` for document/other categories

2. Update `.planning/REQUIREMENTS.md`:
   - Change FILE-07 line from `- [ ] **FILE-07**` to `- [x] **FILE-07**` (ChatFileCard implements one-click download)
   - Change FILE-13 line from `- [ ] **FILE-13**` to `- [x] **FILE-13**` (GET /api/files/:fileId/content serves files over HTTP for cross-device access)
   - In the Traceability table, change FILE-07 status from `Pending` to `Complete`
   - In the Traceability table, change FILE-13 status from `Pending` to `Complete`
  
  
    cd /opt/nexus && grep -n "ChatCodeFilePreview" ui/src/components/ChatFilePreview.tsx && grep "FILE-07" .planning/REQUIREMENTS.md | head -3 && grep "FILE-13" .planning/REQUIREMENTS.md | head -3
  
  
    - `ui/src/components/ChatFilePreview.tsx` contains `import { ChatCodeFilePreview }`
    - `ui/src/components/ChatFilePreview.tsx` contains `file.category === "code"` branch routing to ChatCodeFilePreview
    - `.planning/REQUIREMENTS.md` contains `- [x] **FILE-07**`
    - `.planning/REQUIREMENTS.md` contains `- [x] **FILE-13**`
    - REQUIREMENTS.md Traceability table shows FILE-07 as Complete
    - REQUIREMENTS.md Traceability table shows FILE-13 as Complete
  
  Code files in chat messages render with syntax highlighting; FILE-07 and FILE-13 marked Complete in REQUIREMENTS.md





- `npx tsc --noEmit -p ui/tsconfig.json` passes
- `grep "ChatCodeFilePreview" ui/src/components/ChatFilePreview.tsx` shows import and usage
- `grep "\[x\].*FILE-07" .planning/REQUIREMENTS.md` matches
- `grep "\[x\].*FILE-13" .planning/REQUIREMENTS.md` matches



- Code file attachments in chat render with syntax-highlighted preview (not just a download card)
- FILE-07 and FILE-13 marked Complete in REQUIREMENTS.md
- TypeScript compiles without errors



After completion, create `.planning/phases/25-file-system/25-04-SUMMARY.md`