From f962bae98306ea9264967b78b803397f4821f9b0 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 4 Mar 2026 15:59:55 -0600
Subject: [PATCH] feat: improve XLSX preview + add code syntax highlighting

XLSX QoL:
- Custom table renderer (excelToTable.ts) with column letters,
  row numbers, right-aligned numbers, empty cell handling
- Monospace font, sticky headers + row nums, cell cursor
- Sheet tabs moved to bottom bar (like PPTX navigation)
- Unified styles between FileNav and FileItemModal

Code highlighting:
- Shiki-based syntax highlighting for code files in FileNav
- Line numbers, dark/light theme support
- Source/Preview toggle for code files
---
 src/lib/components/chat/FileNav.svelte        |  21 ++-
 .../chat/FileNav/FilePreview.svelte           | 146 ++++++++++++++++--
 .../components/common/FileItemModal.svelte    |  19 +--
 src/lib/utils/codeHighlight.ts                |  95 ++++++++++++
 src/lib/utils/excelToTable.ts                 |  86 +++++++++++
 5 files changed, 326 insertions(+), 41 deletions(-)
 create mode 100644 src/lib/utils/codeHighlight.ts
 create mode 100644 src/lib/utils/excelToTable.ts

diff --git a/src/lib/components/chat/FileNav.svelte b/src/lib/components/chat/FileNav.svelte
index 9daf03592..dfeb9064c 100644
--- a/src/lib/components/chat/FileNav.svelte
+++ b/src/lib/components/chat/FileNav.svelte
@@ -26,6 +26,7 @@
 		setCwd,
 		type FileEntry
 	} from '$lib/apis/terminal';
+	import { isCodeFile } from '$lib/utils/codeHighlight';
 	import Folder from '../icons/Folder.svelte';
 	import Document from '../icons/Document.svelte';
 	import PenAlt from '../icons/PenAlt.svelte';
@@ -116,6 +117,7 @@
 	$: isMarkdown = MD_EXTS.has(getFileExt(selectedFile));
 	$: isCsv = CSV_EXTS.has(getFileExt(selectedFile));
 	$: isHtml = HTML_EXTS.has(getFileExt(selectedFile));
+	$: isCode = isCodeFile(selectedFile);
 	$: isOfficeFile = OFFICE_EXTS.has(getFileExt(selectedFile));
 	$: isTextFile =
 		fileContent !== null && fileImageUrl === null && filePdfData === null && !isOfficeFile;
@@ -281,11 +283,9 @@
 						excelSheetNames = wb.SheetNames;
 						if (excelSheetNames.length > 0) {
 							selectedExcelSheet = excelSheetNames[0];
-							const ws = wb.Sheets[selectedExcelSheet];
-							const DOMPurify = (await import('dompurify')).default;
-							fileOfficeHtml = DOMPurify.sanitize(
-								XLSX.utils.sheet_to_html(ws, { id: 'excel-table', editable: false, header: '' })
-							);
+							const { excelToTable } = await import('$lib/utils/excelToTable');
+							const result = await excelToTable(wb.Sheets[selectedExcelSheet]);
+							fileOfficeHtml = result.html;
 						}
 					} else if (ext === 'pptx') {
 						const { pptxToImages } = await import('$lib/utils/pptxToHtml');
@@ -612,7 +612,7 @@
 					</button>
 				</Tooltip>
 			{/if}
-			{#if (isMarkdown || isCsv || isHtml) && fileContent !== null && !editing}
+			{#if (isMarkdown || isCsv || isHtml || isCode) && fileContent !== null && !editing}
 				<Tooltip content={showRaw ? $i18n.t('Preview') : $i18n.t('Source')}>
 					<button
 						class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
@@ -764,12 +764,9 @@
 					onSheetChange={async (sheet) => {
 						if (!excelWorkbook) return;
 						selectedExcelSheet = sheet;
-						const XLSX = await import('xlsx');
-						const ws = excelWorkbook.Sheets[sheet];
-						const DOMPurify = (await import('dompurify')).default;
-						fileOfficeHtml = DOMPurify.sanitize(
-							XLSX.utils.sheet_to_html(ws, { id: 'excel-table', editable: false, header: '' })
-						);
+						const { excelToTable } = await import('$lib/utils/excelToTable');
+						const result = await excelToTable(excelWorkbook.Sheets[sheet]);
+						fileOfficeHtml = result.html;
 					}}
 					{overlay}
 					onSave={async (content) => {
diff --git a/src/lib/components/chat/FileNav/FilePreview.svelte b/src/lib/components/chat/FileNav/FilePreview.svelte
index a192bff6b..a14b261d0 100644
--- a/src/lib/components/chat/FileNav/FilePreview.svelte
+++ b/src/lib/components/chat/FileNav/FilePreview.svelte
@@ -4,6 +4,7 @@
 	import { marked } from 'marked';
 	import DOMPurify from 'dompurify';
 	import { settings } from '$lib/stores';
+	import { isCodeFile, highlightCode } from '$lib/utils/codeHighlight';
 	import Spinner from '../../common/Spinner.svelte';
 	import PDFViewer from '../../common/PDFViewer.svelte';
 
@@ -74,6 +75,7 @@
 	$: isMarkdown = MD_EXTS.has(getExt(selectedFile));
 	$: isCsv = CSV_EXTS.has(getExt(selectedFile));
 	$: isHtml = HTML_EXTS.has(getExt(selectedFile));
+	$: isCode = isCodeFile(selectedFile);
 	$: csvDelimiter = getExt(selectedFile) === 'tsv' ? '\t' : ',';
 	$: renderedHtml =
 		isMarkdown && fileContent
@@ -123,6 +125,24 @@
 	$: csvHeader = csvRows.length > 0 ? csvRows[0] : [];
 	$: csvBody = csvRows.length > 1 ? csvRows.slice(1) : [];
 
+	// ── Shiki code highlighting ─────────────────────────────────────────
+	let highlightedHtml: string | null = null;
+	let highlightingFile: string | null = null; // track which file we're highlighting
+
+	$: if (isCode && fileContent !== null && selectedFile) {
+		const currentFile = selectedFile;
+		highlightingFile = currentFile;
+		highlightCode(fileContent, selectedFile)
+			.then((html) => {
+				if (highlightingFile === currentFile) highlightedHtml = html;
+			})
+			.catch(() => {
+				if (highlightingFile === currentFile) highlightedHtml = null;
+			});
+	} else {
+		highlightedHtml = null;
+	}
+
 	export let showRaw = false;
 	$: selectedFile, (showRaw = false); // reset to preview mode when switching files
 
@@ -181,7 +201,7 @@
 		<PDFViewer bind:this={pdfViewerRef} data={filePdfData} className="w-full h-full" />
 	{:else if fileOfficeHtml !== null}
 		<div class="flex flex-col h-full">
-			<div class="office-preview overflow-auto flex-1 min-h-0 p-3">
+			<div class="office-preview overflow-auto flex-1 min-h-0">
 				{@html fileOfficeHtml}
 			</div>
 			{#if excelSheetNames.length > 1}
@@ -278,6 +298,10 @@
 					</tbody>
 				</table>
 			</div>
+		{:else if isCode && highlightedHtml && !showRaw}
+			<div class="shiki-preview overflow-auto h-full text-xs">
+				{@html highlightedHtml}
+			</div>
 		{:else if editing}
 			<textarea
 				bind:this={editTextarea}
@@ -362,39 +386,91 @@
 	}
 	:global(.office-preview table) {
 		border-collapse: collapse;
-		font-size: 0.8rem;
-		line-height: 1.25rem;
+		font-size: 0.75rem;
+		font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+		line-height: 1.3;
 	}
 	:global(.office-preview table td),
 	:global(.office-preview table th) {
-		border: 1px solid rgba(128, 128, 128, 0.25);
-		padding: 0.5rem 0.75rem;
+		border: 1px solid rgba(200, 200, 200, 0.5);
+		padding: 4px 10px;
 		text-align: left;
 		white-space: nowrap;
+		user-select: text;
+		cursor: cell;
+		max-width: 300px;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 	:global(.dark .office-preview table td),
 	:global(.dark .office-preview table th) {
-		border-color: rgba(128, 128, 128, 0.35);
+		border-color: rgba(80, 80, 80, 0.5);
 	}
-	:global(.office-preview table th) {
-		background: rgba(243, 244, 246, 0.95);
-		font-weight: 600;
+	/* Column letter headers */
+	:global(.office-preview table th.excel-col-hdr) {
 		position: sticky;
 		top: 0;
+		z-index: 2;
+		background: #f0f0f0;
+		color: #666;
+		font-weight: 500;
+		font-size: 0.65rem;
+		text-align: center;
+		padding: 3px 10px;
+		border-bottom: 2px solid rgba(180, 180, 180, 0.6);
+	}
+	:global(.dark .office-preview table th.excel-col-hdr) {
+		background: #2a2a3e;
+		color: #888;
+		border-bottom-color: rgba(100, 100, 100, 0.6);
+	}
+	/* Row number cells */
+	:global(.office-preview .excel-row-num) {
+		position: sticky;
+		left: 0;
 		z-index: 1;
+		background: #f0f0f0;
+		color: #999;
+		font-size: 0.6rem;
+		text-align: right !important;
+		padding: 4px 8px 4px 4px !important;
+		user-select: none;
+		width: 1px;
+		white-space: nowrap;
+		border-right: 2px solid rgba(180, 180, 180, 0.6) !important;
 	}
-	:global(.dark .office-preview table th) {
-		background: rgba(31, 41, 55, 0.95);
+	:global(.dark .office-preview .excel-row-num) {
+		background: #2a2a3e;
+		color: #666;
+		border-right-color: rgba(100, 100, 100, 0.6) !important;
 	}
-	:global(.office-preview table tr:nth-child(even)) {
-		background: rgba(128, 128, 128, 0.04);
+	/* Corner cell (intersection of row nums and col headers) */
+	:global(.office-preview thead .excel-row-num) {
+		z-index: 3;
 	}
-	:global(.office-preview table tr:hover) {
+	/* Number cells right-aligned */
+	:global(.office-preview .excel-num) {
+		text-align: right;
+		font-variant-numeric: tabular-nums;
+	}
+	/* Row hover and selection */
+	:global(.office-preview table tbody tr:nth-child(even) td:not(.excel-row-num)) {
+		background: rgba(0, 0, 0, 0.015);
+	}
+	:global(.dark .office-preview table tbody tr:nth-child(even) td:not(.excel-row-num)) {
+		background: rgba(255, 255, 255, 0.02);
+	}
+	:global(.office-preview table tbody tr:hover td:not(.excel-row-num)) {
 		background: rgba(59, 130, 246, 0.06);
 	}
-	:global(.dark .office-preview table tr:hover) {
+	:global(.dark .office-preview table tbody tr:hover td:not(.excel-row-num)) {
 		background: rgba(59, 130, 246, 0.1);
 	}
+	:global(.office-preview table td:focus) {
+		outline: 2px solid rgba(59, 130, 246, 0.5);
+		outline-offset: -2px;
+	}
+	/* DOCX / generic office styles */
 	:global(.office-preview img) {
 		max-width: 100%;
 		height: auto;
@@ -405,5 +481,45 @@
 	:global(.office-preview p) { margin: 0.25em 0; }
 	:global(.office-preview ul),
 	:global(.office-preview ol) { padding-left: 1.5em; margin: 0.5em 0; }
+	/* ── Shiki code highlighting ─────────────────────────────────── */
+	.shiki-preview :global(pre.shiki) {
+		margin: 0;
+		padding: 0.75rem 1rem;
+		font-size: 0.75rem;
+		line-height: 1.6;
+		border-radius: 0;
+		overflow-x: auto;
+	}
+	.shiki-preview :global(pre.shiki code) {
+		counter-reset: line;
+	}
+	.shiki-preview :global(pre.shiki code > .line) {
+		counter-increment: line;
+		display: inline-block;
+		width: 100%;
+		white-space: pre;
+	}
+	.shiki-preview :global(pre.shiki code > .line::before) {
+		content: counter(line);
+		display: inline-block;
+		width: 2.5em;
+		text-align: right;
+		margin-right: 1em;
+		color: #9ca3af;
+		user-select: none;
+		font-size: 0.65rem;
+	}
+	:global(.dark) .shiki-preview :global(pre.shiki code > .line::before) {
+		color: #4b5563;
+	}
+	/* Shiki dual-theme: swap CSS variables in dark mode */
+	:global(.dark) .shiki-preview :global(.shiki),
+	:global(.dark) .shiki-preview :global(.shiki span) {
+		color: var(--shiki-dark) !important;
+		background-color: var(--shiki-dark-bg) !important;
+		font-style: var(--shiki-dark-font-style) !important;
+		font-weight: var(--shiki-dark-font-weight) !important;
+		text-decoration: var(--shiki-dark-text-decoration) !important;
+	}
 </style>
 
diff --git a/src/lib/components/common/FileItemModal.svelte b/src/lib/components/common/FileItemModal.svelte
index 0058cf637..f61f3e1aa 100644
--- a/src/lib/components/common/FileItemModal.svelte
+++ b/src/lib/components/common/FileItemModal.svelte
@@ -171,20 +171,11 @@
 
 	const renderExcelSheet = async () => {
 		if (!excelWorkbook || !selectedSheet) return;
-
+		const { excelToTable } = await import('$lib/utils/excelToTable');
 		const worksheet = excelWorkbook.Sheets[selectedSheet];
-		// Calculate row count
-		const XLSX = await import('xlsx');
-		const range = XLSX.utils.decode_range(worksheet['!ref'] || 'A1:A1');
-		rowCount = range.e.r - range.s.r + 1;
-
-		excelHtml = DOMPurify.sanitize(
-			XLSX.utils.sheet_to_html(worksheet, {
-				id: 'excel-table',
-				editable: false,
-				header: ''
-			})
-		);
+		const result = await excelToTable(worksheet);
+		excelHtml = result.html;
+		rowCount = result.rowCount;
 	};
 
 	$: if (selectedSheet && excelWorkbook) {
@@ -568,7 +559,7 @@
 							{/if}
 
 							{#if excelHtml}
-								<div class="excel-table-container overflow-auto max-h-[60vh]">
+								<div class="office-preview overflow-auto max-h-[60vh]">
 									{@html excelHtml}
 								</div>
 							{:else}
diff --git a/src/lib/utils/codeHighlight.ts b/src/lib/utils/codeHighlight.ts
new file mode 100644
index 000000000..fcd844353
--- /dev/null
+++ b/src/lib/utils/codeHighlight.ts
@@ -0,0 +1,95 @@
+import { codeToHtml, bundledLanguages } from 'shiki';
+
+/**
+ * Map file extensions to Shiki language identifiers.
+ * Only extensions whose Shiki lang id differs from the extension itself need explicit entries.
+ */
+const EXT_OVERRIDE: Record<string, string> = {
+	py: 'python',
+	js: 'javascript',
+	ts: 'typescript',
+	jsx: 'jsx',
+	tsx: 'tsx',
+	rb: 'ruby',
+	rs: 'rust',
+	kt: 'kotlin',
+	cs: 'csharp',
+	fs: 'fsharp',
+	sh: 'bash',
+	bash: 'bash',
+	zsh: 'bash',
+	yml: 'yaml',
+	md: 'markdown',
+	mdx: 'mdx',
+	dockerfile: 'dockerfile',
+	tf: 'terraform',
+	hcl: 'hcl',
+	ex: 'elixir',
+	exs: 'elixir',
+	erl: 'erlang',
+	hs: 'haskell',
+	ml: 'ocaml',
+	mli: 'ocaml',
+	pl: 'perl',
+	pm: 'perl',
+	r: 'r',
+	m: 'objective-c',
+	mm: 'objective-cpp',
+	h: 'c',
+	hpp: 'cpp',
+	cc: 'cpp',
+	cxx: 'cpp',
+	proto: 'proto',
+	nim: 'nim',
+	zig: 'zig',
+	v: 'v',
+	svelte: 'svelte',
+	vue: 'vue',
+	astro: 'astro',
+	prisma: 'prisma',
+	graphql: 'graphql',
+	gql: 'graphql',
+	jsonc: 'jsonc',
+	jsonl: 'jsonl'
+};
+
+const _langSet = new Set(Object.keys(bundledLanguages));
+
+/**
+ * Resolve a file extension to a Shiki language id, or null if not supported.
+ */
+export function extToLang(ext: string): string | null {
+	const lower = ext.toLowerCase();
+	// explicit override first
+	if (EXT_OVERRIDE[lower]) return EXT_OVERRIDE[lower];
+	// if the extension itself is a bundled language id (e.g. 'go', 'rust', 'sql', 'toml', ...)
+	if (_langSet.has(lower)) return lower;
+	return null;
+}
+
+/**
+ * Returns true if the given file path has a code-file extension that Shiki can highlight.
+ */
+export function isCodeFile(path: string | null): boolean {
+	if (!path) return false;
+	const ext = path.split('.').pop()?.toLowerCase() ?? '';
+	return extToLang(ext) !== null;
+}
+
+/**
+ * Highlight code using Shiki with dual light/dark themes via CSS variables.
+ * Returns an HTML string. Throws on failure.
+ */
+export async function highlightCode(code: string, filePath: string): Promise<string> {
+	const ext = filePath.split('.').pop()?.toLowerCase() ?? '';
+	const lang = extToLang(ext) ?? 'text';
+
+	return await codeToHtml(code, {
+		lang,
+		themes: {
+			light: 'github-light',
+			dark: 'github-dark'
+		},
+		defaultColor: 'light'
+	});
+}
diff --git a/src/lib/utils/excelToTable.ts b/src/lib/utils/excelToTable.ts
new file mode 100644
index 000000000..ef75f4555
--- /dev/null
+++ b/src/lib/utils/excelToTable.ts
@@ -0,0 +1,86 @@
+/**
+ * Shared Excel → HTML table renderer.
+ *
+ * Converts a worksheet to a styled HTML table with:
+ * - Column letter headers (A, B, C…)
+ * - Row numbers
+ * - Proper empty cell handling
+ * - Sanitized output
+ */
+
+import type { WorkSheet } from 'xlsx';
+
+/** Convert column index (0-based) to Excel-style letter (A, B, …, Z, AA, AB, …) */
+const colLetter = (i: number): string => {
+    let s = '';
+    let n = i;
+    while (n >= 0) {
+        s = String.fromCharCode(65 + (n % 26)) + s;
+        n = Math.floor(n / 26) - 1;
+    }
+    return s;
+};
+
+/** Escape HTML entities */
+const esc = (v: unknown): string => {
+    if (v === null || v === undefined || v === '') return '&nbsp;';
+    return String(v).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+};
+
+export interface ExcelTableResult {
+    html: string;
+    rowCount: number;
+    colCount: number;
+}
+
+/**
+ * Render a worksheet as an HTML table string.
+ * Uses sheet_to_json with header:1 for a raw 2D array.
+ */
+export async function excelToTable(worksheet: WorkSheet): Promise<ExcelTableResult> {
+    const XLSX = await import('xlsx');
+    const rows: unknown[][] = XLSX.utils.sheet_to_json(worksheet, { header: 1, defval: '' });
+
+    if (rows.length === 0) {
+        return { html: '<table><tbody><tr><td>&nbsp;</td></tr></tbody></table>', rowCount: 0, colCount: 0 };
+    }
+
+    // Determine column count from the widest row
+    const colCount = rows.reduce((max, row) => Math.max(max, row.length), 0);
+    const rowCount = rows.length;
+
+    const parts: string[] = [];
+    parts.push('<table>');
+
+    // Column letter header row
+    parts.push('<thead><tr>');
+    parts.push('<th class="excel-row-num"></th>'); // corner cell
+    for (let c = 0; c < colCount; c++) {
+        parts.push(`<th class="excel-col-hdr">${colLetter(c)}</th>`);
+    }
+    parts.push('</tr></thead>');
+
+    // Data rows
+    parts.push('<tbody>');
+    for (let r = 0; r < rowCount; r++) {
+        const row = rows[r];
+        parts.push('<tr>');
+        parts.push(`<td class="excel-row-num">${r + 1}</td>`);
+        for (let c = 0; c < colCount; c++) {
+            const val = c < row.length ? row[c] : '';
+            const isNum = typeof val === 'number';
+            parts.push(
+                `<td${isNum ? ' class="excel-num"' : ''}>${esc(val)}</td>`
+            );
+        }
+        parts.push('</tr>');
+    }
+    parts.push('</tbody></table>');
+
+    const DOMPurify = (await import('dompurify')).default;
+    return {
+        html: DOMPurify.sanitize(parts.join('')),
+        rowCount,
+        colCount
+    };
+}