Feat/file browser rich preview

.agents/plans/PLANS.md

@@ -10,7 +10,7 @@ Persistent plans for multi-step work on **blxcode**. Individual plans live as Ma
 | planned | [coordinated-subagents.md](coordinated-subagents.md) | Coordinated Subagents: Rollen, i18n Subcards, Provider-Reuse, Environment/Shell/Git/Web-Tools, scoped Toolgruppen, Inline-Timeline |
 | planned | [kanban-board-view.md](kanban-board-view.md) | Kanban-View im Plans-Panel: Status-Spalten, DnD fuer Karten/Spalten, Spalten ein-/ausblenden, Markdown-Writeback |
 | planned | [terminal-grid-drag-drop.md](terminal-grid-drag-drop.md) | Terminal-Slots per Drag-Handle im Grid umsortieren; Cross-Workspace-Transfer per Sidebar-Drop mit PTY-Erhalt, Session- und Notification-Migration |
-| planned | [file-browser-rich-preview.md](file-browser-rich-preview.md) | File-Browser-Preview: Bilder (SVG/Raster), Video, gerendertes Markdown, Mermaid; neue Topbar mit Datei-Metadaten und sandboxed Backend-Commands |
+| active | [file-browser-rich-preview.md](file-browser-rich-preview.md) | File-Browser-Preview: Bilder (SVG/Raster), Video, gerendertes Markdown, Mermaid; neue Topbar mit Datei-Metadaten und sandboxed Backend-Commands |
 | done | [agent-chat-maximize.md](agent-chat-maximize.md) | Agent-Tab: Chat-Maximize-Toggle vor Reset; Voice-Hero kompakt, mehr Platz fuer Chat-Verlauf |
 | done | [agent-image-context.md](agent-image-context.md) | Bilder per Drag/Drop und Paste an Agent-Kontext; Drop-Zone, Preview-Dialog, einmaliges Senden, dann read |
 | done | [agent-image-modus.md](agent-image-modus.md) | Agent Image-Modus: Chat-Toggle, Settings-Tab Image, Referenzbilder, Generierung via OpenAI/OpenRouter, Workspace-Speicherung und Download |

.agents/plans/file-browser-rich-preview.md

@@ -216,19 +216,27 @@ Erinnerung aus `CLAUDE.md`: Alle Sprach-Locale-Files müssen die neuen Keys habe
 
 ## Tasks
 
-- [ ] `backend-meta` - `FileMeta`, `FileKind`, `stat_workspace_file` Command + Unit-Tests
-- [ ] `backend-image` - `BinaryFilePreview` + `read_workspace_image_file` + Cap + Tests
-- [ ] `backend-video` - `read_workspace_video_file` + Cap + Tests
-- [ ] `backend-register` - Commands in `lib.rs` registrieren
-- [ ] `bridge-types` - Serde-Spiegel + async Wrapper in `tauri_bridge.rs`
-- [ ] `frontend-module` - Neues `file_preview/`-Modul mit `mod.rs` Dispatcher + `util.rs` (classify, format)
-- [ ] `frontend-header` - Topbar mit Name/Pfad/Größe/mtime + Refresh
-- [ ] `frontend-image` - SVG-Inline + Raster-`<img>` mit Data-URL + Centered-Stage
-- [ ] `frontend-video` - `<video>`-Renderer mit Cap-Hinweis
-- [ ] `frontend-markdown` - `pulldown-cmark` Pipeline + Sanitization + Mermaid-Sentinel
-- [ ] `mermaid-asset` - Vendored `mermaid.esm.min.mjs` unter `public/vendor/mermaid/`
-- [ ] `frontend-mermaid` - Lazy-Loader + `mermaid.run` Integration für `.mmd` und Markdown-Blöcke
-- [ ] `workspace-panel-wire` - Alte `FilePreviewDock`-Impl in `workspace_panel.rs` entfernen, neues Modul nutzen
-- [ ] `i18n-keys` - Neue Keys in `keys.rs` + alle `locales/*.rs`
-- [ ] `styles` - `.file-preview__stage`, `__image`, `__video`, `__markdown`, `__mermaid` Stile
-- [ ] `manual-verify` - Manuelle Checks aus Test-Tabelle inkl. PNG, SVG, MD, MMD, MP4
+- [x] `backend-meta` - `FileMeta`, `FileKind`, `stat_workspace_file` Command + Unit-Tests
+- [x] `backend-image` - `BinaryFilePreview` + `read_workspace_image_file` + Cap + Tests
+- [x] `backend-video` - `read_workspace_video_file` + Cap + Tests
+- [x] `backend-register` - Commands in `lib.rs` registrieren
+- [x] `bridge-types` - Serde-Spiegel + async Wrapper in `tauri_bridge.rs`
+- [x] `frontend-module` - Neues `file_preview/`-Modul mit `mod.rs` Dispatcher + `util.rs` (classify, format)
+- [x] `frontend-header` - Topbar mit Name/Pfad/Größe/mtime + Refresh
+- [x] `frontend-image` - SVG-Inline + Raster-`<img>` mit Data-URL + Centered-Stage
+- [x] `frontend-video` - `<video>`-Renderer mit Cap-Hinweis
+- [x] `frontend-markdown` - `pulldown-cmark` Pipeline + Sanitization + Mermaid-Sentinel
+- [x] `mermaid-asset` - Vendored Mermaid-Bundle unter `public/vendor/mermaid/` (UMD `mermaid.min.js`)
+- [x] `frontend-mermaid` - Lazy-Loader + `mermaid.run` Integration für `.mmd` und Markdown-Blöcke
+- [x] `workspace-panel-wire` - Alte `FilePreviewDock`-Impl in `workspace_panel.rs` entfernen, neues Modul nutzen
+- [x] `i18n-keys` - Neue Keys in `keys.rs` + alle `locales/*.rs`
+- [x] `styles` - `.file-preview__stage`, `__image`, `__video`, `__markdown`, `__mermaid` Stile
+- [x] `code-vendor` - Vendor `public/vendor/highlight/highlight.min.js` (highlight.js 11 common bundle)
+- [x] `code-backend` - Neue `FileKind::Code`, erweiterte `classify_kind`, MIME für ts/js/yaml/toml/csv
+- [x] `code-bridge` - `FileKind::Code` im Frontend-Bridge-Spiegel
+- [x] `code-util` - `hljs_lang_for_ext`, `html_escape`, `split_highlighted_into_lines` + Unit-Tests
+- [x] `code-glue` - `hljs_glue.rs` mit `ensure_hljs_loaded` + `highlight`
+- [x] `code-view` - `CodeView` mit Line-Numbers, Syntax-Highlighting, Row-Selection
+- [x] `code-dispatch` - Dispatcher routet `Code | Text` → `CodeView`
+- [x] `code-styles` - `.code-view` Layout + hljs-Token-Mapping mit Theme-Tokens (dark + light)
+- [ ] `manual-verify` - Manuelle Checks aus Test-Tabelle inkl. PNG, SVG, MD, MMD, MP4, sowie TS/JS/RS-Files mit Line-Selection

CHANGELOG.md

@@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - **Closeable Terminals tab + Settings without workspace**: every center tab — including the pinned Terminals tab — now exposes a close button. Clicking the Terminals close button raises a new confirmation overlay (`src/workbench/close_terminals_tab_dialog/`) with a 3-second countdown that keeps the primary button disabled; confirming routes through `WorkbenchService::close_center_terminals_tab`, which saves the workspace, terminates its PTYs, and pushes it onto the recent list (same path as the sidebar close). Closing the last non-Terminals tab in a real workspace likewise triggers `close_workspace` so the welcome screen reappears when no workspaces remain. **Settings** can now open without an active workspace: `open_center_settings_tab` lazily provisions an ephemeral "shell workspace" (empty `cwd`, `configuring: false`, no terminal slots) that hosts only the Settings tab and is hidden from the sidebar via the new `is_shell_workspace` filter; closing the shell's Settings tab disposes the shell automatically. `ensure_center_tabs` was renamed to `repair_center_tab_state` and no longer auto-reinserts a Terminals tab; `open_center_terminals_tab` is the explicit reopener and `open_new_terminal` calls it before appending a slot. `HarnessUiService` gained a `close_terminals_confirm` signal + generation guard (so rapid re-opens cancel stale timers); the harness keyboard handler swallows shortcuts while the dialog is up and routes `Escape` to dismiss. New command palette entry **Terminals** (`PaletteAction::OpenTerminalsTab`, `CmdTermTitle/Sub`) reopens the Terminals tab without spawning a new PTY. `finalize_workspace_close` centralizes wizard-draft cleanup (`workspace_drafts` + `workspace_config_steps`) so every close path drops state. 7 new i18n keys (`CmdTermTitle`, `CmdTermSub`, `CenterTabCloseTerminalsTitle/Body/Confirm/Cancel`, `CenterTabCloseAria`) localized into all 13 locales. 4 new unit tests (`center_tab_tests`) cover the repair semantics, empty-tabs branch, dangling active-id repair, and shell-workspace predicate.
+- **Code preview with line numbers, syntax highlighting & row selection**: the file preview now ships a dedicated `CodeView` (`src/workbench/file_preview/code_view.rs`) that handles every source-code file with a real two-column layout — a sticky line-number gutter (right-aligned, tabular numerals, hairline divider) and an `hljs`-colored code column — instead of the prior plain `<pre><code>` fallback. Clicking any row toggles a selection highlight (accent-soft background + accent-color left bar, click again to clear) so users can mark and refer back to a specific line. Backend `classify_kind` in `src-tauri/src/fs_entries.rs` now distinguishes `FileKind::Code` (Rust/TS/JS/JSX/TSX/MJS/CJS, Python, Go, Java/Kotlin/Scala/Groovy/Gradle, Swift/Obj-C, C/C++/C#/F#/VB, Ruby/PHP/Lua/Perl/Dart/R/Julia, Clojure/Elixir/Erlang/Haskell/Elm/Nim/Zig/OCaml, HTML/Vue/Svelte/CSS/SCSS/Sass/Less, JSON/JSON5/JSONC/TOML/YAML/XML/Plist, Shell/Bash/Zsh/Fish/PowerShell/Bat/Cmd, SQL/GraphQL/Protobuf/Thrift/HCL/Terraform/Nix, Dockerfile/Makefile/CMake, diff/patch) from plain `FileKind::Text` (txt/log/ini/conf/env/properties/csv/tsv/gitignore/editorconfig); both kinds route through `CodeView`, but only `Code` gets syntax highlighting. The 11-test fs_entries unit suite now asserts the new mapping including ts/tsx/js/py/go/html/json → Code and txt/log/env/gitignore → Text. The frontend bridge (`tauri_bridge.rs`) mirrors the new `FileKind::Code` variant. New module `src/workbench/file_preview/hljs_glue.rs` lazy-loads the vendored highlight.js 11.11 common bundle (`public/vendor/highlight/highlight.min.js`, ~127 KiB, 38 languages) via a `<script>` tag inserted on first use, polls `globalThis.hljs` for up to 5 s, and exposes `highlight(code, language)` calling `hljs.highlight(..., { ignoreIllegals: true })`. `src/workbench/file_preview/util.rs` adds `hljs_lang_for_ext` (full extension → hljs alias map covering 60+ extensions), `html_escape` (used for unhighlighted plain-text branches), and `split_highlighted_into_lines` — a UTF-8-safe HTML splitter that walks hljs output, tracks the open-`<span>` stack, and at every `\n` closes all open spans (in reverse order) before pushing the line and reopening the same spans on the next line, producing one valid balanced HTML fragment per source line. Six new unit tests cover simple text, UTF-8 codepoints, balanced cross-line spans, nested span reopening, blank-line preservation, and the extension/escape helpers. The `CodeView` component pre-renders one `<div class="code-view__row" data-line="N">` per line (no `<For>` clone overhead on large files), tracks selection in an `RwSignal<Option<usize>>` and uses event-delegated click on the container (`closest("[data-line]")`) to toggle the row. Truncation notice (`FilePreviewTextTruncated`) still surfaces above the gutter when the backend's 512 KiB text cap kicks in. CSS adds `.code-view`, `.code-view__row[--selected]`, `.code-view__lineno`, `.code-view__line` plus an hljs token mapping that uses `color-mix` against existing theme tokens (`--accent`, `--text`, `--text-muted`, `--surface`, `--border`) for the gutter / hover / selection chrome, with bespoke light-theme overrides for `[data-theme="blxcode-light"|"solarized-light"|"gruvbox-light"|"catppuccin-latte"]` so strings/numbers/types stay legible on light backgrounds. Mermaid lazy-load pattern is reused (single `<script>` insertion + polling) so the highlight bundle is paid for only when a code file is opened. Pre-existing `TextFallbackView` was removed; the dispatcher now routes `Code | Text → CodeView`.
+- **Rich file-browser preview (images, video, Markdown, Mermaid)**: clicking a file in the sidebar Project Explorer now opens a typed renderer instead of always interpreting bytes as UTF-8 — PNG/JPEG/JPG/WebP/GIF/AVIF/BMP/ICO/SVG load as centered images (raster via `data:` URL, SVG sanitized + inlined so themes apply), MP4/WebM/MOV/M4V/MKV play in a native `<video controls>` (cap-aware), `.md`/`.markdown` render through `pulldown-cmark` with tables/strikethrough/tasklists/footnotes/smart-punctuation and `.mmd`/`.mermaid` render via the vendored Mermaid 11.x UMD bundle (`public/vendor/mermaid/mermaid.min.js`, ~3.3 MiB, lazy-loaded; `globalThis.mermaid` initialized once with `securityLevel: strict`, `theme: dark`); fenced ```mermaid blocks inside Markdown are detected during the cmark event stream and replaced with `<pre class="mermaid">` sentinels that the post-mount effect feeds to `mermaid.run({ nodes })`. A new **topbar** shows file name, relative path (copyable, with “copied” toast), formatted byte size, locale-aware mtime, type-specific Lucide icon (image/film/file-text/git-branch), plus Copy-path and Refresh actions. Backend adds three sandboxed Tauri commands in `src-tauri/src/fs_entries.rs` (registered in `src-tauri/src/lib.rs`): `stat_workspace_file` → `FileMeta { name, relPath, byteLen, modifiedMs, kind, mime }` with extension-based `FileKind` (`Image`/`Video`/`Markdown`/`Mermaid`/`Text`/`Binary`) and best-effort MIME guess, `read_workspace_image_file` capped at **16 MiB** (`MAX_IMAGE_PREVIEW_BYTES`), and `read_workspace_video_file` capped at **64 MiB** (`MAX_VIDEO_PREVIEW_BYTES`); both reject non-matching extensions (`not an image file` / `not a video file`) and return `BinaryFilePreview { base64, mime, byteLen, truncated }` reusing the existing `canonical_root` / `resolve_under_root` sandbox so traversal-out-of-root and missing-file errors behave identically to `read_workspace_text_file`. Frontend module `src/workbench/file_preview/` is the new dispatcher: `mod.rs` loads metadata once and routes to `ImageView` / `VideoView` / `MarkdownView` / `MermaidView` / `TextFallbackView` / `UnsupportedView`; `header.rs` renders the topbar; `util.rs` ships `format_bytes`, `format_mtime` (via `js_sys::Date.to_locale_string`), `icon_for_kind`, allowlist-based `sanitize_svg` + `sanitize_markdown_html` (strips `<script>`/`<style>`/`<iframe>`/`<object>`/`<embed>`/`<foreignObject>`, `on*=` event handlers, and neutralizes `javascript:` / `vbscript:` URIs), plus a shared `FilePreviewError` enum (`NoTauri` / `WorkspaceNotFound` / `TooLarge(u64)` / `Failed(String)`) and `render_load_error(i18n, failed_label, error)` helper used by every renderer for consistent, fully-localized error banners (per-renderer labels: `FilePreviewLoadFailedImage/Video/Markdown/Mermaid/Text/Meta`). Mermaid runtime failures log to `console.warn` and surface the translated `FilePreviewMermaidError` chip without leaking English internals. `tauri_bridge.rs` mirrors the Serde types (`FileMeta`, `FileKind`, `BinaryFilePreview`) and exposes async wrappers for the three new commands. Existing inline `FilePreviewDock` in `workspace_panel.rs` removed in favor of `file_preview::FilePreviewDock`. 19 new i18n keys (`FilePreviewSize`, `FilePreviewModified`, `FilePreviewTooLarge` (with `{size}` placeholder), `FilePreviewUnsupported`, `FilePreviewLoadingMermaid`, `FilePreviewMermaidError`, `FilePreviewRefresh`, `FilePreviewLoading`, `FilePreviewCopyPath`, `FilePreviewPathCopied`, `FilePreviewNoTauri`, `FilePreviewWorkspaceNotFound`, `FilePreviewTextTruncated` (with `{bytes}` placeholder), and six `FilePreviewLoadFailed*` labels) localized into all 13 locales. 5 new fs_entries unit tests cover `classify_kind`, `stat_workspace_file` happy path, image base64 round-trip, and non-image/non-video extension rejection.
 
 ### Changed
 

docs/README.md

@@ -12,6 +12,7 @@ Welcome to the BLXCode docs. User guides explain how to run and use the app; dev
 |-------|--------|
 | Settings (API Keys, BLXCode Agent, Workspace, **Appearance / themes**) | [Settings](user/settings.md) · [Appearance & Themes](user/appearance-themes.md) |
 | Workbench, terminals, sidebar, handoff | [Workspaces](user/workspaces.md) |
+| File preview (images, video, Markdown, Mermaid) | [File Preview](user/file-preview.md) |
 | Memory, learnings, graph, categories | [Memory And Tasks](user/memory-and-tasks.md) |
 | Markdown plans and plan-linked tasks | [Plans](user/plans.md) |
 | Workspace rules and skills | [Rules And Skills](user/rules-and-skills.md) |
@@ -31,6 +32,7 @@ Welcome to the BLXCode docs. User guides explain how to run and use the app; dev
 - [Settings](user/settings.md) — docked center-tab settings, API Keys, BLXCode Agent grid, Workspace, **Appearance / themes**.
 - [Appearance & Themes](user/appearance-themes.md) — theme picker, presets, persistence, exceptions.
 - [Workspaces](user/workspaces.md) — creation, terminal grids, sidebar explorer, Git graph, handoff, persistence.
+- [File Preview](user/file-preview.md) — center-tab previews for images (incl. SVG), video, rendered Markdown, and Mermaid diagrams with a topbar showing name/path/size/mtime.
 - [Memory And Tasks](user/memory-and-tasks.md) — Memory panel (Files, Graph, Search), dynamic categories, tasks, agent memory tools.
 - [Plans](user/plans.md) — `.agents/plans/`, Kanban board, task syntax, Plans panel, agent tools.
 - [Rules And Skills](user/rules-and-skills.md) — expandable rule/skill cards, core vs user skills, install dialog.