docs(16-04): complete files section restyle plan summary

- DETAIL-04 delivered: @ui.Table, @ui.EmptyState, tr-based file rows
- All file handler tests pass; browser checkpoint auto-approved

.planning/phases/16-tablo-detail/16-04-SUMMARY.md

@@ -0,0 +1,119 @@
+---
+phase: 16-tablo-detail
+plan: "04"
+subsystem: ui
+tags: [htmx, templ, go, files, table, empty-state]
+
+# Dependency graph
+requires:
+  - phase: 16-tablo-detail/16-01
+    provides: download + chat icons in UIIcon; CSS Sections 19-25 in app.css
+  - phase: 16-tablo-detail/16-02
+    provides: Tablo detail header, metadata row, tab nav with design token classes
+  - phase: 16-tablo-detail/16-03
+    provides: Kanban board restyled with tasks-section layout and etape grouping
+
+provides:
+  - FilesTabFragment with .overview-section/.overview-section-heading layout
+  - fileTableHead and fileTableBody private templ helpers for @ui.Table
+  - FileListRow as <tr class="file-row-zone"> with Download and Delete IconButtons
+  - FileDeleteConfirmFragment as <tr class="file-row-zone"> with <td colspan="4">
+  - UploadErrorFragment updated to match new FilesTabFragment structure
+  - FileRowGone updated from <div> to <tr> for DOM consistency
+
+affects:
+  - Any future plan that modifies files.templ or the file upload/delete flow
+
+# Tech tracking
+tech-stack:
+  added: []
+  patterns:
+    - "@ui.Table with private fileTableHead/fileTableBody helpers for typed table rendering"
+    - "HTMX outerHTML swap requiring matching outer element type (tr) between trigger row and confirm fragment"
+    - ".overview-section-heading pattern applied to files section (same as tablos dashboard)"
+
+key-files:
+  created: []
+  modified:
+    - backend/templates/files.templ
+
+key-decisions:
+  - "FileRowGone converted from <div> to <tr> for DOM consistency with new tr-based file rows"
+  - "UploadErrorFragment updated to use new .overview-section layout and @ui.Table/EmptyState instead of legacy <ul> layout"
+  - "FileListEmpty retained (not deleted) for backward compatibility but no longer called from FilesTabFragment"
+
+patterns-established:
+  - "Pattern: private templ helpers (fileTableHead, fileTableBody) encapsulate table structure; passed as templ.Component to @ui.Table props"
+  - "Pattern: HTMX outerHTML swap zone requires matching element type in both the trigger row and the confirm fragment (<tr> not <div> or <li>)"
+
+requirements-completed:
+  - DETAIL-04
+
+# Metrics
+duration: 10min
+completed: 2026-05-16
+---
+
+# Phase 16 Plan 04: Files Section Restyling Summary
+
+**Files section restyled to @ui.Table with tr-based rows, .overview-section-heading Upload button, and @ui.EmptyState for consistent tablo detail UX**
+
+## Performance
+
+- **Duration:** ~10 min
+- **Started:** 2026-05-16T21:35:00Z
+- **Completed:** 2026-05-16T21:45:00Z
+- **Tasks:** 1 (+ 1 auto-approved checkpoint)
+- **Files modified:** 1
+
+## Accomplishments
+
+- Replaced `<ul>/<li>` file list with `@ui.Table` component using private `fileTableHead` and `fileTableBody` templ helpers
+- Added `.overview-section-heading` header with "Files" h3 on left and "Upload file" button on right (using HTMX hx-get to reveal upload form inline)
+- Converted `FileListRow` outer element from `<li class="file-row-zone">` to `<tr class="file-row-zone">` to work correctly inside `@ui.Table`'s `<tbody>`
+- Converted `FileDeleteConfirmFragment` outer element from `<div>` to `<tr class="file-row-zone">` with `<td colspan="4">` to preserve the HTMX outerHTML delete swap (both trigger row and confirm fragment must be same element type)
+- Replaced `@FileListEmpty()` with `@ui.EmptyState(Title: "No files yet", Description: "Upload your first file to get started.")`
+- Added Download `@ui.IconButton` (download icon, neutral/ghost) and Delete `@ui.IconButton` (trash icon, danger/ghost) in FileListRow actions column
+- Updated `UploadErrorFragment` to use the new `.overview-section` layout and `@ui.Table`/`@ui.EmptyState`
+
+## Task Commits
+
+1. **Task 1: Restyle FilesTabFragment, FileListRow, and FileDeleteConfirmFragment** - `ca693f1` (feat)
+
+**Checkpoint:** auto-approved (AUTO mode active)
+
+## Files Created/Modified
+
+- `backend/templates/files.templ` - Complete restyle: FilesTabFragment, fileTableHead, fileTableBody, FileListRow as tr, FileDeleteConfirmFragment as tr, UploadErrorFragment updated
+
+## Decisions Made
+
+- `FileRowGone` converted from `<div>` to `<tr>` for DOM consistency with the new tr-based file rows — ensures outerHTML removal does not leave invalid HTML when a file delete completes
+- `UploadErrorFragment` updated to use the new `.overview-section` layout with the upload form pre-expanded in `#file-upload-slot` (errMsg flows to `FileUploadForm` inside the slot)
+- `FileListEmpty` retained in file but no longer called — kept for backward compatibility in case any external reference exists
+
+## Deviations from Plan
+
+None - plan executed exactly as written. The `UploadErrorFragment` update was a logical extension of the FilesTabFragment restyle (same layout, same empty/table conditional) and required no deviation tracking.
+
+## Issues Encountered
+
+None.
+
+## User Setup Required
+
+None - no external service configuration required.
+
+## Next Phase Readiness
+
+Phase 16 is complete. All 4 waves delivered:
+- Wave 1 (16-01): UIIcon download/chat cases + CSS Sections 19-25
+- Wave 2 (16-02): Tablo detail header, metadata row, tab nav, overview tab desc
+- Wave 3 (16-03): Kanban board restyled with etape grouping
+- Wave 4 (16-04): Files section with @ui.Table and @ui.EmptyState
+
+All go tests pass (`go test ./internal/web/... -count=1`). Browser checkpoint auto-approved under AUTO mode.
+
+---
+*Phase: 16-tablo-detail*
+*Completed: 2026-05-16*