ClaudeTeX

LaTeX editor with AI and Overleaf sync

+ + +

+ ) : ( +

+ +

+ + {showFileTree && ( + <> + + + + + + )} + + + + + + + + + + + + + + {showTerminal && ( + <> + + + + + + )} + + + +

+ +

+ )} + + ) +} diff --git a/src/renderer/src/components/Editor.tsx b/src/renderer/src/components/Editor.tsx new file mode 100644 index 0000000..30a1e8b --- /dev/null +++ b/src/renderer/src/components/Editor.tsx @@ -0,0 +1,188 @@ +import { useEffect, useRef, useCallback } from 'react' +import { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter, drawSelection, rectangularSelection } from '@codemirror/view' +import { EditorState } from '@codemirror/state' +import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands' +import { bracketMatching, foldGutter, indentOnInput, StreamLanguage } from '@codemirror/language' +import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete' +import { searchKeymap, highlightSelectionMatches } from '@codemirror/search' +import { stex } from '@codemirror/legacy-modes/mode/stex' +import { useAppStore } from '../stores/appStore' + +// Cosmic Latte light theme +const cosmicLatteTheme = EditorView.theme({ + '&': { + height: '100%', + fontSize: '13.5px', + backgroundColor: '#FFF8E7' + }, + '.cm-content': { + caretColor: '#3B3228', + fontFamily: '"SF Mono", "Fira Code", "JetBrains Mono", monospace', + color: '#3B3228', + padding: '8px 0' + }, + '.cm-cursor': { borderLeftColor: '#3B3228' }, + '.cm-activeLine': { backgroundColor: '#F5EDD6' }, + '.cm-activeLineGutter': { backgroundColor: '#F5EDD6' }, + '.cm-selectionBackground, ::selection': { backgroundColor: '#B8D4E3 !important' }, + '.cm-gutters': { + backgroundColor: '#F5EDD6', + color: '#A09880', + border: 'none', + borderRight: '1px solid #D6CEBC', + paddingRight: '8px' + }, + '.cm-lineNumbers .cm-gutterElement': { padding: '0 8px' }, + '.cm-foldGutter': { width: '16px' }, + '.cm-matchingBracket': { backgroundColor: '#D4C9A8', outline: 'none' }, + // LaTeX syntax colors — warm earthy palette on Cosmic Latte + '.cm-keyword': { color: '#8B2252' }, // commands: \begin, \section + '.cm-atom': { color: '#B8860B' }, // constants + '.cm-string': { color: '#5B8A3C' }, // strings / text args + '.cm-comment': { color: '#A09880', fontStyle: 'italic' }, // % comments + '.cm-bracket': { color: '#4A6FA5' }, // braces {} + '.cm-tag': { color: '#8B2252' }, // LaTeX tags + '.cm-builtin': { color: '#6B5B3E' }, // builtins + '.ͼ5': { color: '#8B2252' }, // keywords like \begin + '.ͼ6': { color: '#4A6FA5' }, // braces/brackets + '.ͼ7': { color: '#5B8A3C' }, // strings + '.ͼ8': { color: '#A09880' }, // comments +}, { dark: false }) + +export default function Editor() { + const editorRef = useRef(null) + const viewRef = useRef(null) + const { activeTab, fileContents, openTabs, setFileContent, markModified } = useAppStore() + + const pendingGoTo = useAppStore((s) => s.pendingGoTo) + const content = activeTab ? fileContents[activeTab] ?? '' : '' + + // Handle goTo when file is already open (no editor recreation needed) + useEffect(() => { + if (!pendingGoTo || !viewRef.current) return + if (activeTab !== pendingGoTo.file) return + + const view = viewRef.current + const lineNum = Math.min(pendingGoTo.line, view.state.doc.lines) + const lineInfo = view.state.doc.line(lineNum) + view.dispatch({ + selection: { anchor: lineInfo.from }, + effects: EditorView.scrollIntoView(lineInfo.from, { y: 'center' }) + }) + view.focus() + useAppStore.getState().setPendingGoTo(null) + }, [pendingGoTo]) + + // Create/update editor + useEffect(() => { + if (!editorRef.current) return + + if (viewRef.current) { + viewRef.current.destroy() + } + + const updateListener = EditorView.updateListener.of((update) => { + if (update.docChanged && activeTab) { + const newContent = update.state.doc.toString() + setFileContent(activeTab, newContent) + markModified(activeTab, true) + } + }) + + const state = EditorState.create({ + doc: content, + extensions: [ + lineNumbers(), + highlightActiveLine(), + highlightActiveLineGutter(), + drawSelection(), + rectangularSelection(), + indentOnInput(), + bracketMatching(), + closeBrackets(), + foldGutter(), + history(), + highlightSelectionMatches(), + StreamLanguage.define(stex), + keymap.of([ + ...defaultKeymap, + ...historyKeymap, + ...closeBracketsKeymap, + ...searchKeymap, + indentWithTab + ]), + cosmicLatteTheme, + updateListener, + EditorView.lineWrapping + ] + }) + + const view = new EditorView({ + state, + parent: editorRef.current + }) + viewRef.current = view + + // Apply pending navigation (from log click) + const goTo = useAppStore.getState().pendingGoTo + if (goTo && goTo.file === activeTab && goTo.line) { + requestAnimationFrame(() => { + const lineNum = Math.min(goTo.line, view.state.doc.lines) + const lineInfo = view.state.doc.line(lineNum) + view.dispatch({ + selection: { anchor: lineInfo.from }, + effects: EditorView.scrollIntoView(lineInfo.from, { y: 'center' }) + }) + view.focus() + useAppStore.getState().setPendingGoTo(null) + }) + } + + return () => { + viewRef.current?.destroy() + viewRef.current = null + } + }, [activeTab]) // Re-create when tab changes + + if (!activeTab) { + return ( +

Open a file to start editing

+ Cmd+S Save · Cmd+B Compile · Cmd+` Terminal +

+ ) + } + + return ( +

+ {openTabs.map((tab) => ( +

useAppStore.getState().setActiveTab(tab.path)} + > + + {tab.modified && ●} + {tab.name} + + +

+ ))} +

+ ) +} diff --git a/src/renderer/src/components/FileTree.tsx b/src/renderer/src/components/FileTree.tsx new file mode 100644 index 0000000..3163485 --- /dev/null +++ b/src/renderer/src/components/FileTree.tsx @@ -0,0 +1,165 @@ +import { useState, useCallback } from 'react' +import { useAppStore } from '../stores/appStore' +import { showInput, showConfirm } from '../hooks/useModal' + +interface FileNode { + name: string + path: string + isDir: boolean + children?: FileNode[] +} + +function FileTreeNode({ node, depth }: { node: FileNode; depth: number }) { + const [expanded, setExpanded] = useState(depth < 2) + const { activeTab, mainDocument, openFile, setFileContent, setStatusMessage } = useAppStore() + const isActive = activeTab === node.path + const isMainDoc = mainDocument === node.path + + const handleClick = useCallback(async () => { + if (node.isDir) { + setExpanded(!expanded) + return + } + + const ext = node.name.split('.').pop()?.toLowerCase() + if (ext === 'pdf' || ext === 'png' || ext === 'jpg' || ext === 'jpeg' || ext === 'svg') { + if (ext === 'pdf') { + useAppStore.getState().setPdfPath(node.path) + } + return + } + + try { + const content = await window.api.readFile(node.path) + setFileContent(node.path, content) + openFile(node.path, node.name) + } catch { + setStatusMessage('Failed to read file') + } + }, [node, expanded, openFile, setFileContent, setStatusMessage]) + + const ext = node.name.split('.').pop()?.toLowerCase() ?? '' + const icon = node.isDir + ? expanded ? '📂' : '📁' + : ext === 'tex' ? '📄' + : ext === 'bib' ? '📚' + : ext === 'pdf' ? '📕' + : ext === 'png' || ext === 'jpg' ? '🖼️' + : '📝' + + const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null) + + const handleContextMenu = (e: React.MouseEvent) => { + e.preventDefault() + setContextMenu({ x: e.clientX, y: e.clientY }) + const handler = () => { setContextMenu(null); window.removeEventListener('click', handler) } + window.addEventListener('click', handler) + } + + const handleNewFile = async () => { + setContextMenu(null) + const name = await showInput('New File', 'main.tex') + if (!name) return + const dir = node.isDir ? node.path : node.path.substring(0, node.path.lastIndexOf('/')) + await window.api.createFile(dir, name) + } + + const handleNewFolder = async () => { + setContextMenu(null) + const name = await showInput('New Folder', 'figures') + if (!name) return + const dir = node.isDir ? node.path : node.path.substring(0, node.path.lastIndexOf('/')) + await window.api.createDir(dir, name) + } + + const handleRename = async () => { + setContextMenu(null) + const newName = await showInput('Rename', node.name, node.name) + if (!newName || newName === node.name) return + const dir = node.path.substring(0, node.path.lastIndexOf('/')) + await window.api.renameFile(node.path, dir + '/' + newName) + } + + const handleDelete = async () => { + setContextMenu(null) + const ok = await showConfirm('Delete', `Delete "${node.name}"?`, true) + if (!ok) return + await window.api.deleteFile(node.path) + } + + const handleSetMainDoc = () => { + setContextMenu(null) + useAppStore.getState().setMainDocument(node.path) + setStatusMessage(`Main document: ${node.name}`) + } + + const handleReveal = () => { + window.api.showInFinder(node.path) + setContextMenu(null) + } + + return ( +

+ {icon} + {node.name} + {isMainDoc && main} +

+ {contextMenu && ( +

+ {!node.isDir && ext === 'tex' && ( + <> +

+ {isMainDoc ? '✓ Main Document' : 'Set as Main Document'} +

+ + )} +

New File

New Folder

Rename

Delete

Reveal in Finder

+ )} + {node.isDir && expanded && node.children?.map((child) => ( + + ))} +

+ ) +} + +export default function FileTree() { + const { files, projectPath } = useAppStore() + + const handleNewFile = async () => { + if (!projectPath) return + const name = await showInput('New File', 'main.tex') + if (!name) return + await window.api.createFile(projectPath, name) + } + + return ( +

+ FILES + +

+ {files.map((node) => ( + + ))} + {files.length === 0 && ( +

No files found

+ )} +

+ ) +} diff --git a/src/renderer/src/components/ModalProvider.tsx b/src/renderer/src/components/ModalProvider.tsx new file mode 100644 index 0000000..75572d5 --- /dev/null +++ b/src/renderer/src/components/ModalProvider.tsx @@ -0,0 +1,123 @@ +import { useState, useEffect, useRef } from 'react' +import { useModalStore } from '../hooks/useModal' + +export default function ModalProvider() { + return ( + <> + + + + + ) +} + +function InputModal() { + const { inputOpen, inputTitle, inputPlaceholder, inputDefault, inputResolve } = useModalStore() + const [value, setValue] = useState('') + const inputRef = useRef(null) + + useEffect(() => { + if (inputOpen) { + setValue(inputDefault) + setTimeout(() => { + inputRef.current?.focus() + inputRef.current?.select() + }, 50) + } + }, [inputOpen, inputDefault]) + + if (!inputOpen) return null + + const close = (result: string | null) => { + useModalStore.setState({ inputOpen: false }) + inputResolve?.(result) + } + + return ( +

close(null)}> + +

+ ) +} + +function ConfirmModal() { + const { confirmOpen, confirmTitle, confirmMessage, confirmDanger, confirmResolve } = useModalStore() + const btnRef = useRef(null) + + useEffect(() => { + if (confirmOpen) setTimeout(() => btnRef.current?.focus(), 50) + }, [confirmOpen]) + + if (!confirmOpen) return null + + const close = (result: boolean) => { + useModalStore.setState({ confirmOpen: false }) + confirmResolve?.(result) + } + + return ( +

close(false)}> +

e.stopPropagation()}> +

{confirmTitle}

{confirmMessage}

+ + +

+ ) +} + +function AlertModal() { + const { alertOpen, alertTitle, alertMessage, alertResolve } = useModalStore() + const btnRef = useRef(null) + + useEffect(() => { + if (alertOpen) setTimeout(() => btnRef.current?.focus(), 50) + }, [alertOpen]) + + if (!alertOpen) return null + + const close = () => { + useModalStore.setState({ alertOpen: false }) + alertResolve?.() + } + + return ( +

e.stopPropagation()}> +

{alertTitle}

{alertMessage}

+ +

+ ) +} diff --git a/src/renderer/src/components/OverleafConnect.tsx b/src/renderer/src/components/OverleafConnect.tsx new file mode 100644 index 0000000..6258643 --- /dev/null +++ b/src/renderer/src/components/OverleafConnect.tsx @@ -0,0 +1,171 @@ +import { useState, useEffect } from 'react' +import { useAppStore } from '../stores/appStore' + +interface Props { + onConnected: (projectPath: string) => void + onCancel: () => void +} + +export default function OverleafConnect({ onConnected, onCancel }: Props) { + const [projectUrl, setProjectUrl] = useState('') + const [token, setToken] = useState('') + const [hasStoredToken, setHasStoredToken] = useState(false) + const [busy, setBusy] = useState(false) + const [busyText, setBusyText] = useState('') + const [rememberMe, setRememberMe] = useState(true) + const [error, setError] = useState('') + const { setStatusMessage } = useAppStore() + + // Check if we already have stored credentials + useEffect(() => { + window.api.overleafCheck().then(({ loggedIn }) => { + if (loggedIn) setHasStoredToken(true) + }) + }, []) + + const extractProjectId = (url: string): string | null => { + const cleaned = url.trim() + if (!cleaned) return null + const patterns = [ + /overleaf\.com\/project\/([a-zA-Z0-9]+)/, + /overleaf\.com\/read\/([a-zA-Z0-9]+)/, + /git\.overleaf\.com\/([a-zA-Z0-9]+)/, + /^([a-zA-Z0-9]{10,})$/, + ] + for (const p of patterns) { + const m = cleaned.match(p) + if (m) return m[1] + } + return null + } + + const projectId = extractProjectId(projectUrl) + + const handleClone = async () => { + if (!projectUrl.trim()) { + setError('Please paste an Overleaf project URL'); return + } + if (!projectId) { + setError('Could not find project ID in this URL.\nExpected: https://www.overleaf.com/project/abc123...'); return + } + if (!token.trim()) { + setError('Please enter your Git Authentication Token'); return + } + + setError('') + setBusy(true) + setBusyText('Choose where to save...') + setStatusMessage('Connecting to Overleaf...') + + const parentDir = await window.api.selectSaveDir() + if (!parentDir) { + setBusy(false) + return + } + const dest = parentDir + '/overleaf-' + projectId + + setBusyText('Verifying token & cloning...') + + const result = await window.api.overleafCloneWithAuth(projectId, dest, token.trim(), rememberMe) + + setBusy(false) + + if (result.success) { + setStatusMessage('Cloned successfully') + onConnected(dest) + } else { + setStatusMessage('Clone failed') + setError(result.detail || 'Unknown error') + } + } + + const handleClearToken = async () => { + await window.api.overleafLogout() + setHasStoredToken(false) + setToken('') + } + + return ( +

e.stopPropagation()}> +

Clone from Overleaf

+ +

+ + {error &&

{error}

} + + {busy ? ( +

{busyText}

+ ) : ( +

+ {/* Project URL */} + Project URL + { setProjectUrl(e.target.value); setError('') }} + placeholder="https://www.overleaf.com/project/..." + autoFocus + /> +

+ Copy from your browser address bar, or from Overleaf Menu → Sync → Git. +

+ {projectId && ( +

+ Project ID: {projectId} +

+ )} + + {/* Token */} +

+ Git Authentication Token + {hasStoredToken && ( + + (saved in Keychain — ) + + )} +

+ setToken(e.target.value)} + placeholder="olp_..." + onKeyDown={(e) => { if (e.key === 'Enter') handleClone() }} + /> + + setRememberMe(e.target.checked)} + /> + Remember token (saved in macOS Keychain) + + +

+ Generate at{' '} + window.api.openExternal('https://www.overleaf.com/user/settings')}> + Overleaf Account Settings + + {' '}→ Git Integration. Requires premium. +

+ +

+ + +

+ )} +

+ ) +} diff --git a/src/renderer/src/components/PdfViewer.tsx b/src/renderer/src/components/PdfViewer.tsx new file mode 100644 index 0000000..e702f15 --- /dev/null +++ b/src/renderer/src/components/PdfViewer.tsx @@ -0,0 +1,391 @@ +import { useEffect, useRef, useState, useCallback } from 'react' +import * as pdfjsLib from 'pdfjs-dist' +import { useAppStore } from '../stores/appStore' + +pdfjsLib.GlobalWorkerOptions.workerSrc = new URL( + 'pdfjs-dist/build/pdf.worker.mjs', + import.meta.url +).toString() + +// ── Log parsing (Overleaf-style) ────────────────────────────────── + +interface LogEntry { + level: 'error' | 'warning' | 'info' + message: string + file?: string + line?: number +} + +function parseCompileLog(raw: string): LogEntry[] { + const entries: LogEntry[] = [] + const lines = raw.split('\n') + + for (let i = 0; i < lines.length; i++) { + const ln = lines[i] + + // LaTeX Error: ... + if (/^!/.test(ln) || /LaTeX Error:/.test(ln)) { + let msg = ln.replace(/^!\s*/, '') + // Collect continuation lines + while (i + 1 < lines.length && lines[i + 1] && !lines[i + 1].startsWith('l.') && !lines[i + 1].startsWith('!')) { + i++ + if (lines[i].trim()) msg += ' ' + lines[i].trim() + } + // Try to get line number from "l.123" line + let lineNum: number | undefined + if (i + 1 < lines.length && /^l\.(\d+)/.test(lines[i + 1])) { + i++ + lineNum = parseInt(lines[i].match(/^l\.(\d+)/)![1]) + } + entries.push({ level: 'error', message: msg.trim(), line: lineNum }) + continue + } + + // file:line: error pattern (file-line-error mode) + const fileLineErr = ln.match(/^\.\/(.+?):(\d+):\s*(.+)/) + if (fileLineErr) { + const msg = fileLineErr[3] + const isWarning = /warning/i.test(msg) + entries.push({ + level: isWarning ? 'warning' : 'error', + message: msg, + file: fileLineErr[1], + line: parseInt(fileLineErr[2]) + }) + continue + } + + // Package ... Warning: + const pkgWarn = ln.match(/Package (\S+) Warning:\s*(.*)/) + if (pkgWarn) { + let msg = `[${pkgWarn[1]}] ${pkgWarn[2]}` + let warnLine: number | undefined + // Collect continuation lines starting with (pkgname) + while (i + 1 < lines.length && /^$/.test(lines[i + 1])) { + i++ + const contLine = lines[i] + msg += ' ' + contLine.replace(/^\([^)]*$\s*/, '').trim() + const lineMatch = contLine.match(/on input line (\d+)/) + if (lineMatch) warnLine = parseInt(lineMatch[1]) + } + // Also check the initial line for "on input line N" + if (!warnLine) { + const lineMatch = msg.match(/on input line (\d+)/) + if (lineMatch) warnLine = parseInt(lineMatch[1]) + } + entries.push({ level: 'warning', message: msg.trim(), line: warnLine }) + continue + } + + // LaTeX Warning: + const latexWarn = ln.match(/LaTeX Warning:\s*(.*)/) + if (latexWarn) { + let msg = latexWarn[1] + while (i + 1 < lines.length && lines[i + 1] && !lines[i + 1].match(/^[(!.]/) && lines[i + 1].startsWith(' ')) { + i++ + msg += ' ' + lines[i].trim() + } + const lineMatch = msg.match(/on input line (\d+)/) + entries.push({ level: 'warning', message: msg.trim(), line: lineMatch ? parseInt(lineMatch[1]) : undefined }) + continue + } + + // Overfull / Underfull + const overunder = ln.match(/^(Overfull|Underfull) .* at lines (\d+)--(\d+)/) + if (overunder) { + entries.push({ level: 'warning', message: ln.trim(), line: parseInt(overunder[2]) }) + continue + } + if (/^(Overfull|Underfull)/.test(ln)) { + const paraMatch = ln.match(/in paragraph at lines (\d+)--(\d+)/) + entries.push({ level: 'warning', message: ln.trim(), line: paraMatch ? parseInt(paraMatch[1]) : undefined }) + continue + } + + // Missing file + if (/File .* not found/.test(ln)) { + entries.push({ level: 'error', message: ln.trim() }) + continue + } + } + + // Deduplicate + const seen = new Set() + return entries.filter((e) => { + const key = `${e.level}:${e.message}` + if (seen.has(key)) return false + seen.add(key) + return true + }) +} + +// ── Component ───────────────────────────────────────────────────── + +type LogFilter = 'all' | 'error' | 'warning' + +export default function PdfViewer() { + const { pdfPath, compileLog, compiling } = useAppStore() + const containerRef = useRef(null) + const [scale, setScale] = useState(1.0) + const [numPages, setNumPages] = useState(0) + const [tab, setTab] = useState<'pdf' | 'log'>('pdf') + const [logFilter, setLogFilter] = useState('all') + const [error, setError] = useState(null) + const prevCompilingRef = useRef(false) + const renderingRef = useRef(false) + + // Parse and sort log entries (errors first, then warnings) + const logEntries = compileLog ? parseCompileLog(compileLog) : [] + const levelOrder = { error: 0, warning: 1, info: 2 } + logEntries.sort((a, b) => levelOrder[a.level] - levelOrder[b.level]) + + const errorCount = logEntries.filter((e) => e.level === 'error').length + const warningCount = logEntries.filter((e) => e.level === 'warning').length + + const filteredEntries = logFilter === 'all' + ? logEntries + : logEntries.filter((e) => e.level === logFilter) + + // Navigate to file:line in editor + const handleEntryClick = async (entry: LogEntry) => { + if (!entry.line) return + const { projectPath, mainDocument } = useAppStore.getState() + if (!projectPath) return + + // If no file specified, use the main document + const entryFile = entry.file || (mainDocument ? mainDocument.split('/').pop()! : null) + if (!entryFile) return + + // Try resolving the file path + const candidates = [ + entryFile.startsWith('/') ? entryFile : `${projectPath}/${entryFile}`, + ] + if (mainDocument) { + const dir = mainDocument.substring(0, mainDocument.lastIndexOf('/')) + candidates.push(`${dir}/${entryFile}`) + } + + for (const fullPath of candidates) { + try { + const content = await window.api.readFile(fullPath) + useAppStore.getState().setFileContent(fullPath, content) + useAppStore.getState().openFile(fullPath, fullPath.split('/').pop() || entryFile) + useAppStore.getState().setPendingGoTo({ file: fullPath, line: entry.line! }) + return + } catch { /* try next */ } + } + } + + // Auto-switch tab after compilation finishes + useEffect(() => { + if (prevCompilingRef.current && !compiling) { + if (pdfPath) { + setTab('pdf') + } else if (compileLog) { + setTab('log') + } + } + prevCompilingRef.current = compiling + }, [compiling, pdfPath, compileLog]) + + // Store page viewports for synctex coordinate conversion + const pageViewportsRef = useRef>(new Map()) + + // SyncTeX: double-click PDF → jump to source + const handlePdfDoubleClick = useCallback(async (e: MouseEvent) => { + if (!pdfPath) return + const canvas = (e.target as HTMLElement).closest('canvas.pdf-page') as HTMLCanvasElement | null + if (!canvas) return + + const container = containerRef.current + if (!container) return + + // Determine which page was clicked + const canvases = Array.from(container.querySelectorAll('canvas.pdf-page')) + const pageIndex = canvases.indexOf(canvas) + if (pageIndex < 0) return + const pageNum = pageIndex + 1 + + // Get click position relative to canvas (in CSS pixels) + const rect = canvas.getBoundingClientRect() + const clickX = e.clientX - rect.left + const clickY = e.clientY - rect.top + + // Convert to PDF points (72 DPI coordinate system, origin bottom-left) + const vpInfo = pageViewportsRef.current.get(pageNum) + if (!vpInfo) return + const pdfX = (clickX / rect.width) * vpInfo.width + const pdfY = vpInfo.height - (clickY / rect.height) * vpInfo.height + + const result = await window.api.synctexEdit(pdfPath, pageNum, pdfX, pdfY) + if (!result) return + + // Navigate to the source file:line + try { + const content = await window.api.readFile(result.file) + useAppStore.getState().setFileContent(result.file, content) + useAppStore.getState().openFile(result.file, result.file.split('/').pop() || result.file) + useAppStore.getState().setPendingGoTo({ file: result.file, line: result.line }) + } catch { /* file not found */ } + }, [pdfPath]) + + // Render PDF (with lock to prevent double-render) + const renderPdf = useCallback(async () => { + if (!pdfPath || !containerRef.current || tab !== 'pdf') return + if (renderingRef.current) return + renderingRef.current = true + + setError(null) + try { + const arrayBuffer = await window.api.readBinary(pdfPath) + const data = new Uint8Array(arrayBuffer) + const pdf = await pdfjsLib.getDocument({ data }).promise + setNumPages(pdf.numPages) + + const container = containerRef.current + if (!container) { renderingRef.current = false; return } + container.innerHTML = '' + pageViewportsRef.current.clear() + + for (let i = 1; i <= pdf.numPages; i++) { + const page = await pdf.getPage(i) + const viewport = page.getViewport({ scale }) + + const baseViewport = page.getViewport({ scale: 1 }) + pageViewportsRef.current.set(i, { width: baseViewport.width, height: baseViewport.height }) + + const canvas = document.createElement('canvas') + canvas.className = 'pdf-page' + const context = canvas.getContext('2d')! + canvas.width = viewport.width * window.devicePixelRatio + canvas.height = viewport.height * window.devicePixelRatio + canvas.style.width = `${viewport.width}px` + canvas.style.height = `${viewport.height}px` + context.scale(window.devicePixelRatio, window.devicePixelRatio) + container.appendChild(canvas) + await page.render({ canvasContext: context, viewport }).promise + } + } catch (err) { + setError(`Failed to load PDF: ${err}`) + } finally { + renderingRef.current = false + } + }, [pdfPath, scale, tab]) + + // Attach double-click listener to PDF container + useEffect(() => { + const container = containerRef.current + if (!container) return + container.addEventListener('dblclick', handlePdfDoubleClick) + return () => container.removeEventListener('dblclick', handlePdfDoubleClick) + }, [handlePdfDoubleClick]) + + useEffect(() => { + renderPdf() + }, [renderPdf]) + + // Empty state + if (!pdfPath && !compileLog) { + return ( +

No PDF to display

Compile a .tex file with Cmd+B

+ ) + } + + return ( +

+ + +

+ {tab === 'pdf' && ( + <> + + {Math.round(scale * 100)}% + + + + )} + {tab === 'log' && ( +

+ + + +

+ )} +

+ + {/* PDF view — always mounted, hidden when log is shown */} +

+ {error &&

{error}

} +

+ + {/* Log view */} + {tab === 'log' && ( +

+ {filteredEntries.length > 0 ? ( +

+ {filteredEntries.map((entry, i) => ( +

handleEntryClick(entry)} + > +

+ + {entry.level === 'error' ? 'Error' : entry.level === 'warning' ? 'Warning' : 'Info'} + + {entry.file && ( + + {entry.file}{entry.line ? `:${entry.line}` : ''} + + )} +

{entry.message}

+ ))} +

+ ) : compileLog ? ( +

+ Info +

No errors or warnings found.

+ ) : ( +

No compile log yet.

+ )} + {/* Raw log toggle */} +

Raw log output

{compileLog}

+ )} +

+ ) +} diff --git a/src/renderer/src/components/StatusBar.tsx b/src/renderer/src/components/StatusBar.tsx new file mode 100644 index 0000000..cd11bdd --- /dev/null +++ b/src/renderer/src/components/StatusBar.tsx @@ -0,0 +1,26 @@ +import { useAppStore } from '../stores/appStore' + +export default function StatusBar() { + const { statusMessage, isGitRepo, gitStatus, activeTab, compiling } = useAppStore() + + const lineInfo = activeTab ? activeTab.split('/').pop() : '' + + return ( +

+ {compiling && Compiling} + {statusMessage} +

+ {isGitRepo && ( + + Git{gitStatus ? ` (${gitStatus.split('\n').filter(Boolean).length} changes)` : ' (clean)'} + + )} + {lineInfo && {lineInfo}} + UTF-8 + LaTeX +

+ ) +} diff --git a/src/renderer/src/components/Terminal.tsx b/src/renderer/src/components/Terminal.tsx new file mode 100644 index 0000000..f7e306e --- /dev/null +++ b/src/renderer/src/components/Terminal.tsx @@ -0,0 +1,165 @@ +import { useEffect, useRef, useState } from 'react' +import { Terminal as XTerm } from '@xterm/xterm' +import { FitAddon } from '@xterm/addon-fit' +import '@xterm/xterm/css/xterm.css' +import { useAppStore } from '../stores/appStore' + +export default function Terminal() { + const termRef = useRef(null) + const xtermRef = useRef(null) + const fitAddonRef = useRef(null) + const { projectPath } = useAppStore() + const [mode, setMode] = useState<'terminal' | 'claude'>('terminal') + + useEffect(() => { + if (!termRef.current || !projectPath) return + + const xterm = new XTerm({ + theme: { + background: '#2D2A24', + foreground: '#E8DFC0', + cursor: '#FFF8E7', + selectionBackground: '#5C5040', + black: '#2D2A24', + red: '#C75643', + green: '#5B8A3C', + yellow: '#B8860B', + blue: '#4A6FA5', + magenta: '#8B6B8B', + cyan: '#5B8A8A', + white: '#E8DFC0', + brightBlack: '#6B5B3E', + brightRed: '#D46A58', + brightGreen: '#6FA050', + brightYellow: '#D4A020', + brightBlue: '#5E84B8', + brightMagenta: '#A080A0', + brightCyan: '#6FA0A0', + brightWhite: '#FFF8E7' + }, + fontFamily: '"SF Mono", "Fira Code", "JetBrains Mono", monospace', + fontSize: 13, + cursorBlink: true, + scrollback: 10000 + }) + + const fitAddon = new FitAddon() + xterm.loadAddon(fitAddon) + xterm.open(termRef.current) + + // Fit after a small delay to ensure container is sized + setTimeout(() => fitAddon.fit(), 100) + + xtermRef.current = xterm + fitAddonRef.current = fitAddon + + // Spawn shell + window.api.ptySpawn(projectPath) + + // Pipe data + const unsubData = window.api.onPtyData((data) => { + xterm.write(data) + }) + + const unsubExit = window.api.onPtyExit(() => { + xterm.writeln('\r\n[Process exited]') + }) + + // Send input + xterm.onData((data) => { + window.api.ptyWrite(data) + }) + + // Handle resize + const resizeObserver = new ResizeObserver(() => { + try { + fitAddon.fit() + window.api.ptyResize(xterm.cols, xterm.rows) + } catch { /* ignore */ } + }) + resizeObserver.observe(termRef.current) + + return () => { + resizeObserver.disconnect() + unsubData() + unsubExit() + window.api.ptyKill() + xterm.dispose() + } + }, [projectPath]) + + const launchClaude = () => { + if (!xtermRef.current) return + window.api.ptyWrite('claude\n') + setMode('claude') + } + + const sendToClaude = (prompt: string) => { + if (!xtermRef.current) return + window.api.ptyWrite(prompt + '\n') + } + + return ( +

+ + +

+ +

+ ) +} + +function QuickActions({ onSend }: { onSend: (cmd: string) => void }) { + const { activeTab, fileContents } = useAppStore() + + const actions = [ + { + label: 'Fix Errors', + action: () => { + const log = useAppStore.getState().compileLog + if (log) { + onSend(`Fix these LaTeX compilation errors:\n${log.slice(-2000)}`) + } + } + }, + { + label: 'Review', + action: () => { + if (activeTab && fileContents[activeTab]) { + onSend(`Review this LaTeX file for issues and improvements: ${activeTab}`) + } + } + }, + { + label: 'Explain', + action: () => { + if (activeTab) { + onSend(`Explain the structure and content of: ${activeTab}`) + } + } + } + ] + + return ( +

+ {actions.map((a) => ( + + ))} +

+ ) +} diff --git a/src/renderer/src/components/Toolbar.tsx b/src/renderer/src/components/Toolbar.tsx new file mode 100644 index 0000000..ac875bd --- /dev/null +++ b/src/renderer/src/components/Toolbar.tsx @@ -0,0 +1,75 @@ +import { useAppStore } from '../stores/appStore' + +interface ToolbarProps { + onCompile: () => void + onSave: () => void + onOpenProject: () => void +} + +export default function Toolbar({ onCompile, onSave, onOpenProject }: ToolbarProps) { + const { projectPath, compiling, toggleTerminal, toggleFileTree, showTerminal, showFileTree, isGitRepo, mainDocument } = useAppStore() + const projectName = projectPath?.split('/').pop() ?? 'ClaudeTeX' + + const handlePull = async () => { + if (!projectPath) return + useAppStore.getState().setStatusMessage('Pulling from Overleaf...') + const result = await window.api.gitPull(projectPath) + useAppStore.getState().setStatusMessage(result.success ? 'Pull complete' : 'Pull failed') + } + + const handlePush = async () => { + if (!projectPath) return + useAppStore.getState().setStatusMessage('Pushing to Overleaf...') + const result = await window.api.gitPush(projectPath) + useAppStore.getState().setStatusMessage(result.success ? 'Push complete' : 'Push failed') + } + + return ( +

+ + {projectName} +

+ + + + {mainDocument && ( + + {mainDocument.split('/').pop()} + + )} + {isGitRepo && ( + <> +

+ + + + )} +

+ +

+ ) +} diff --git a/src/renderer/src/hooks/useModal.ts b/src/renderer/src/hooks/useModal.ts new file mode 100644 index 0000000..fdf6eb3 --- /dev/null +++ b/src/renderer/src/hooks/useModal.ts @@ -0,0 +1,77 @@ +import { create } from 'zustand' + +interface ModalState { + // Input modal + inputOpen: boolean + inputTitle: string + inputPlaceholder: string + inputDefault: string + inputResolve: ((value: string | null) => void) | null + + // Confirm modal + confirmOpen: boolean + confirmTitle: string + confirmMessage: string + confirmDanger: boolean + confirmResolve: ((ok: boolean) => void) | null + + // Alert modal + alertOpen: boolean + alertTitle: string + alertMessage: string + alertResolve: (() => void) | null +} + +export const useModalStore = create(() => ({ + inputOpen: false, + inputTitle: '', + inputPlaceholder: '', + inputDefault: '', + inputResolve: null, + + confirmOpen: false, + confirmTitle: '', + confirmMessage: '', + confirmDanger: false, + confirmResolve: null, + + alertOpen: false, + alertTitle: '', + alertMessage: '', + alertResolve: null, +})) + +export function showInput(title: string, placeholder = '', defaultValue = ''): Promise { + return new Promise((resolve) => { + useModalStore.setState({ + inputOpen: true, + inputTitle: title, + inputPlaceholder: placeholder, + inputDefault: defaultValue, + inputResolve: resolve, + }) + }) +} + +export function showConfirm(title: string, message: string, danger = false): Promise { + return new Promise((resolve) => { + useModalStore.setState({ + confirmOpen: true, + confirmTitle: title, + confirmMessage: message, + confirmDanger: danger, + confirmResolve: resolve, + }) + }) +} + +export function showAlert(title: string, message: string): Promise { + return new Promise((resolve) => { + useModalStore.setState({ + alertOpen: true, + alertTitle: title, + alertMessage: message, + alertResolve: resolve, + }) + }) +} diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx new file mode 100644 index 0000000..136bef2 --- /dev/null +++ b/src/renderer/src/main.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App' +import './App.css' + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + +) diff --git a/src/renderer/src/stores/appStore.ts b/src/renderer/src/stores/appStore.ts new file mode 100644 index 0000000..6476239 --- /dev/null +++ b/src/renderer/src/stores/appStore.ts @@ -0,0 +1,139 @@ +import { create } from 'zustand' + +interface FileNode { + name: string + path: string + isDir: boolean + children?: FileNode[] +} + +interface OpenTab { + path: string + name: string + modified: boolean +} + +interface AppState { + // Project + projectPath: string | null + setProjectPath: (p: string | null) => void + + // File tree + files: FileNode[] + setFiles: (f: FileNode[]) => void + + // Editor tabs + openTabs: OpenTab[] + activeTab: string | null + openFile: (path: string, name: string) => void + closeTab: (path: string) => void + setActiveTab: (path: string) => void + markModified: (path: string, modified: boolean) => void + + // Editor content cache + fileContents: Record + setFileContent: (path: string, content: string) => void + + // Main document + mainDocument: string | null + setMainDocument: (p: string | null) => void + + // PDF + pdfPath: string | null + setPdfPath: (p: string | null) => void + + // Compile + compiling: boolean + setCompiling: (c: boolean) => void + compileLog: string + appendCompileLog: (log: string) => void + clearCompileLog: () => void + + // Panels + showTerminal: boolean + toggleTerminal: () => void + showFileTree: boolean + toggleFileTree: () => void + + // Git/Overleaf + isGitRepo: boolean + setIsGitRepo: (v: boolean) => void + gitStatus: string + setGitStatus: (s: string) => void + + // Navigation (from log click → editor) + pendingGoTo: { file: string; line: number } | null + setPendingGoTo: (g: { file: string; line: number } | null) => void + + // Status + statusMessage: string + setStatusMessage: (m: string) => void +} + +export const useAppStore = create((set) => ({ + projectPath: null, + setProjectPath: (p) => set({ projectPath: p }), + + files: [], + setFiles: (f) => set({ files: f }), + + openTabs: [], + activeTab: null, + openFile: (path, name) => + set((s) => { + const exists = s.openTabs.find((t) => t.path === path) + if (exists) return { activeTab: path } + return { + openTabs: [...s.openTabs, { path, name, modified: false }], + activeTab: path + } + }), + closeTab: (path) => + set((s) => { + const tabs = s.openTabs.filter((t) => t.path !== path) + const newContents = { ...s.fileContents } + delete newContents[path] + return { + openTabs: tabs, + activeTab: s.activeTab === path ? (tabs[tabs.length - 1]?.path ?? null) : s.activeTab, + fileContents: newContents + } + }), + setActiveTab: (path) => set({ activeTab: path }), + markModified: (path, modified) => + set((s) => ({ + openTabs: s.openTabs.map((t) => (t.path === path ? { ...t, modified } : t)) + })), + + fileContents: {}, + setFileContent: (path, content) => + set((s) => ({ fileContents: { ...s.fileContents, [path]: content } })), + + mainDocument: null, + setMainDocument: (p) => set({ mainDocument: p }), + + pdfPath: null, + setPdfPath: (p) => set({ pdfPath: p }), + + compiling: false, + setCompiling: (c) => set({ compiling: c }), + compileLog: '', + appendCompileLog: (log) => set((s) => ({ compileLog: s.compileLog + log })), + clearCompileLog: () => set({ compileLog: '' }), + + showTerminal: true, + toggleTerminal: () => set((s) => ({ showTerminal: !s.showTerminal })), + showFileTree: true, + toggleFileTree: () => set((s) => ({ showFileTree: !s.showFileTree })), + + isGitRepo: false, + setIsGitRepo: (v) => set({ isGitRepo: v }), + gitStatus: '', + setGitStatus: (s) => set({ gitStatus: s }), + + pendingGoTo: null, + setPendingGoTo: (g) => set({ pendingGoTo: g }), + + statusMessage: 'Ready', + setStatusMessage: (m) => set({ statusMessage: m }) +})) -- cgit v1.2.3