diff --git a/apps/x/apps/renderer/src/components/docx-file-viewer.tsx b/apps/x/apps/renderer/src/components/docx-file-viewer.tsx
new file mode 100644
index 00000000..415ae4a0
--- /dev/null
+++ b/apps/x/apps/renderer/src/components/docx-file-viewer.tsx
@@ -0,0 +1,196 @@
+import { Suspense, lazy, useEffect, useRef, useState } from 'react'
+import { ExternalLinkIcon, FileTextIcon, Loader2Icon } from 'lucide-react'
+import type { DocxEditorRef } from '@eigenpal/docx-editor-react'
+
+// The editor (and its CSS) is heavy and only needed when a .docx is open, so it
+// loads in its own chunk the first time a Word document is viewed.
+const LazyDocxEditor = lazy(async () => {
+ const [mod] = await Promise.all([
+ import('@eigenpal/docx-editor-react'),
+ import('@eigenpal/docx-editor-react/styles.css'),
+ ])
+ return { default: mod.DocxEditor }
+})
+
+interface DocxFileViewerProps {
+ path: string
+}
+
+type LoadState = 'loading' | 'ready' | 'error'
+type SaveState = 'idle' | 'saving' | 'saved' | 'error'
+
+const SAVE_DEBOUNCE_MS = 800
+// onChange fires for the editor's own load-time normalization. Ignore changes
+// until shortly after the document settles so opening a file never rewrites it.
+const ARM_DELAY_MS = 500
+
+function base64ToArrayBuffer(base64: string): ArrayBuffer {
+ const binary = atob(base64)
+ const len = binary.length
+ const bytes = new Uint8Array(len)
+ for (let i = 0; i < len; i++) bytes[i] = binary.charCodeAt(i)
+ return bytes.buffer
+}
+
+function arrayBufferToBase64(buffer: ArrayBuffer): string {
+ const bytes = new Uint8Array(buffer)
+ let binary = ''
+ const chunk = 0x8000
+ for (let i = 0; i < bytes.length; i += chunk) {
+ binary += String.fromCharCode(...bytes.subarray(i, i + chunk))
+ }
+ return btoa(binary)
+}
+
+function baseName(path: string): string {
+ const segs = path.split('/')
+ return segs[segs.length - 1] || path
+}
+
+export function DocxFileViewer({ path }: DocxFileViewerProps) {
+ const [loadState, setLoadState] = useState
('loading')
+ const [buffer, setBuffer] = useState(null)
+ const [saveState, setSaveState] = useState('idle')
+
+ const editorRef = useRef(null)
+ const saveTimerRef = useRef | null>(null)
+ const armTimerRef = useRef | null>(null)
+ const armedRef = useRef(false)
+ const dirtyRef = useRef(false)
+ const savingRef = useRef(false)
+
+ // Load the .docx bytes whenever the path changes.
+ useEffect(() => {
+ let cancelled = false
+ setLoadState('loading')
+ setBuffer(null)
+ setSaveState('idle')
+ armedRef.current = false
+ dirtyRef.current = false
+ savingRef.current = false
+
+ ;(async () => {
+ try {
+ const result = await window.ipc.invoke('workspace:readFile', { path, encoding: 'base64' })
+ if (cancelled) return
+ setBuffer(base64ToArrayBuffer(result.data))
+ setLoadState('ready')
+ if (armTimerRef.current) clearTimeout(armTimerRef.current)
+ armTimerRef.current = setTimeout(() => { armedRef.current = true }, ARM_DELAY_MS)
+ } catch (err) {
+ console.error('Failed to load docx:', err)
+ if (!cancelled) setLoadState('error')
+ }
+ })()
+
+ return () => {
+ cancelled = true
+ if (armTimerRef.current) clearTimeout(armTimerRef.current)
+ }
+ }, [path])
+
+ // Serialize the current document and write it back to disk.
+ const persist = async () => {
+ const editor = editorRef.current
+ if (!editor || savingRef.current) return
+ savingRef.current = true
+ dirtyRef.current = false
+ setSaveState('saving')
+ try {
+ const out = await editor.save()
+ if (out) {
+ await window.ipc.invoke('workspace:writeFile', {
+ path,
+ data: arrayBufferToBase64(out),
+ opts: { encoding: 'base64' },
+ })
+ }
+ setSaveState('saved')
+ } catch (err) {
+ console.error('Failed to save docx:', err)
+ dirtyRef.current = true
+ setSaveState('error')
+ } finally {
+ savingRef.current = false
+ // A change landed while we were saving — flush it.
+ if (dirtyRef.current) scheduleSave()
+ }
+ }
+
+ const scheduleSave = () => {
+ if (saveTimerRef.current) clearTimeout(saveTimerRef.current)
+ saveTimerRef.current = setTimeout(() => { void persist() }, SAVE_DEBOUNCE_MS)
+ }
+
+ const handleChange = () => {
+ if (!armedRef.current) return
+ dirtyRef.current = true
+ scheduleSave()
+ }
+
+ // Flush a pending save when navigating away or unmounting.
+ useEffect(() => {
+ return () => {
+ if (saveTimerRef.current) clearTimeout(saveTimerRef.current)
+ if (dirtyRef.current) void persist()
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [path])
+
+ if (loadState === 'error') {
+ return (
+
+
+
Cannot open this document
+
The file may be corrupted or not a valid Word document.
+
+
+ {saveState === 'saving' ? 'Saving…' : saveState === 'saved' ? 'Saved' : 'Save failed'}
+
+ )}
+
+ )
+}
diff --git a/apps/x/apps/renderer/src/lib/file-types.ts b/apps/x/apps/renderer/src/lib/file-types.ts
index d4477f7a..c293ac6f 100644
--- a/apps/x/apps/renderer/src/lib/file-types.ts
+++ b/apps/x/apps/renderer/src/lib/file-types.ts
@@ -6,7 +6,7 @@
* also uses it to decide what to keep mounted.
*/
-export type ViewerType = 'html' | 'image' | 'video' | 'audio' | 'pdf'
+export type ViewerType = 'html' | 'image' | 'video' | 'audio' | 'pdf' | 'docx'
const VIEWER_BY_EXT: Record