; }; const splitCodeLines = (value: string): string[] => { const normalized = value.endsWith('\n') ? value.slice(0, -1) : value; return normalized.length === 0 ? [''] : normalized.split('\n'); }; const escapeHtml = (value: string) => value .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, '''); const languageAliases: Record = { cjs: 'javascript', conf: 'ini', cts: 'typescript', cxx: 'cpp', dockerfile: 'bash', env: 'ini', h: 'c', hpp: 'cpp', htm: 'xml', html: 'xml', js: 'javascript', jsonc: 'json', jsx: 'javascript', ksh: 'bash', m: 'objectivec', markdown: 'markdown', md: 'markdown', mjs: 'javascript', mm: 'objectivec', mts: 'typescript', patch: 'diff', pl: 'perl', pm: 'perl', pyw: 'python', rake: 'ruby', rs: 'rust', sh: 'bash', svg: 'xml', toml: 'ini', ts: 'typescript', tsx: 'typescript', txt: 'plaintext', yml: 'yaml', zsh: 'bash', }; const filenameLanguages: Record = { dockerfile: 'bash', gemfile: 'ruby', makefile: 'makefile', rakefile: 'ruby', }; const languageFromPath = (path?: string) => { if (!path) return undefined; const filename = path.split('/').pop()?.toLowerCase() ?? ''; if (filenameLanguages[filename]) return filenameLanguages[filename]; const extension = filename.includes('.') ? filename.split('.').pop() : filename; if (!extension) return undefined; return languageAliases[extension] ?? extension; }; const resolveHighlightLanguage = (language?: string, path?: string) => { const candidate = (language ?? languageFromPath(path))?.toLowerCase(); if (!candidate || candidate === 'plaintext' || candidate === 'text') return undefined; return hljs.getLanguage(candidate) ? candidate : undefined; }; const closeOpenSpans = (count: number) => ''.repeat(count); const splitHighlightedHtmlLines = (html: string): string[] => { const lineParts = html.split('\n'); const activeTags: string[] = []; return lineParts.map((linePart) => { const prefix = activeTags.join(''); for (const tag of linePart.match(/<\/?span\b[^>]*>/g) ?? []) { if (tag.startsWith(' { const normalized = text.endsWith('\n') ? text.slice(0, -1) : text; const fallback = () => splitCodeLines(normalized).map(escapeHtml); if (!language) return fallback(); try { const highlighted = hljs.highlight(normalized, { language, ignoreIllegals: true }).value; return splitHighlightedHtmlLines(highlighted); } catch { return fallback(); } }; const diffMetadataLine = (line: string) => line.startsWith('diff --git ') || line.startsWith('index ') || line.startsWith('---') || line.startsWith('+++') || line.startsWith('@@') || line.startsWith('Binary files ') || line.startsWith('new file mode ') || line.startsWith('deleted file mode ') || line.startsWith('old mode ') || line.startsWith('new mode ') || line.startsWith('similarity index ') || line.startsWith('dissimilarity index ') || line.startsWith('rename from ') || line.startsWith('rename to '); const highlightDiffLine = (line: string, language?: string) => { if (diffMetadataLine(line)) return escapeHtml(line); const marker = line[0]; const isChangedLine = marker === '+' || marker === '-' || marker === ' '; if (!isChangedLine) return escapeHtml(line); const content = line.slice(1); const highlighted = highlightCodeLines(content, language)[0] ?? escapeHtml(content); return `${escapeHtml(marker)}${highlighted}`; }; export const CodeView: Component<{ text: string; id?: string; wrap?: boolean; maxHeight?: string; diff?: boolean; path?: string; language?: string; }> = (props) => { const lines = createMemo(() => splitCodeLines(props.text)); const highlightedLines = createMemo(() => { const language = resolveHighlightLanguage(props.language, props.path); if (props.diff) return lines().map((line) => highlightDiffLine(line, language)); return highlightCodeLines(props.text, language); }); const lineClass = (line: string) => props.diff ? clsx( line.startsWith('+') && !line.startsWith('+++') && 'untangled-code-line-add', line.startsWith('-') && !line.startsWith('---') && 'untangled-code-line-del', line.startsWith('@@') && 'untangled-code-line-hunk', ) : undefined; return (

{(line, index) => (

{index() + 1}

)}

); }; interface DiffFile { path: string; text: string; additions: number; deletions: number; } const parseDiffFiles = (patch: string): DiffFile[] => { const files: DiffFile[] = []; let current: { path: string; lines: string[]; additions: number; deletions: number } | null = null; const pushCurrent = () => { if (!current) return; const hasRenderableDiff = current.lines.some( (line) => line.startsWith('@@') || line.startsWith('Binary files ') || line.startsWith('new file mode ') || line.startsWith('deleted file mode ') || line.startsWith('old mode ') || line.startsWith('similarity index ') || line.startsWith('rename from '), ); if (!hasRenderableDiff && current.additions === 0 && current.deletions === 0) { current = null; return; } files.push({ path: current.path, text: current.lines.join('\n'), additions: current.additions, deletions: current.deletions, }); }; for (const line of splitCodeLines(patch)) { if (line.startsWith('diff --git ')) { pushCurrent(); const match = /^diff --git a\/(.*?) b\/(.*)$/.exec(line); current = { path: match?.[2] ?? line.replace('diff --git ', ''), lines: [line], additions: 0, deletions: 0, }; continue; } if (!current) { current = { path: 'patch', lines: [], additions: 0, deletions: 0 }; } if (line.startsWith('+') && !line.startsWith('+++')) current.additions += 1; if (line.startsWith('-') && !line.startsWith('---')) current.deletions += 1; current.lines.push(line); } pushCurrent(); return files; }; const changedFilesLabel = (count: number) => `${count} changed file${count === 1 ? '' : 's'}`; const DiffToolbarStats: Component<{ additions: number; deletions: number; fileCount: number; class?: string }> = (props) => ( <> {changedFilesLabel(props.fileCount)} ); const DiffCollapseButton: Component<{ expanded: boolean; onToggle: () => void }> = (props) => ( ); export const DiffView: Component<{ patch: string; maxHeight?: string; wrap?: boolean; defaultExpanded?: boolean; showFileTree?: boolean; variant?: 'default' | 'commit'; }> = (props) => { const files = createMemo(() => parseDiffFiles(props.patch)); const stats = createMemo(() => totalDiffStats(files())); const [expanded, setExpanded] = createSignal(props.defaultExpanded ?? false); const [filesVisible, setFilesVisible] = createSignal(true); const previewLimit = 5; const showFileTree = createMemo(() => Boolean(props.showFileTree && files().length > 0)); const tree = createMemo(() => diffFileTree(files())); const visibleFiles = createMemo(() => (showFileTree() ? files() : files().slice(0, previewLimit))); const hiddenFiles = createMemo(() => (showFileTree() ? [] : files().slice(previewLimit))); return (

{(file) => (

{file.path}

)} 0}>

Show {hiddenFiles().length} more file{hiddenFiles().length === 1 ? '' : 's'} Hide {hiddenFiles().length} file{hiddenFiles().length === 1 ? '' : 's'}

{(file) => (

{file.path}

)}

No differences found.

); }; const totalDiffStats = (files: DiffFile[]) => files.reduce( (acc, file) => ({ additions: acc.additions + file.additions, deletions: acc.deletions + file.deletions, }), { additions: 0, deletions: 0 }, ); type DiffFileTreeNode = { name: string; path: string; file?: DiffFile; children?: DiffFileTreeNode[]; }; const sortDiffFileTree = (nodes: DiffFileTreeNode[]): DiffFileTreeNode[] => nodes .sort((a, b) => a.name.localeCompare(b.name)) .map((node) => ({ ...node, children: node.children ? sortDiffFileTree(node.children) : undefined, })); const diffFileTree = (files: DiffFile[]) => { const roots: DiffFileTreeNode[] = []; for (const file of files) { const parts = file.path.split('/').filter(Boolean); const pathParts = parts.length > 0 ? parts : [file.path || 'patch']; let siblings = roots; let path = ''; for (const [index, part] of pathParts.entries()) { path = path ? `${path}/${part}` : part; const isFile = index === pathParts.length - 1; if (isFile) { siblings.push({ name: part, path: file.path, file }); continue; } let node = siblings.find((child) => !child.file && child.name === part); if (!node) { node = { name: part, path, children: [] }; siblings.push(node); } siblings = node.children!; } } return sortDiffFileTree(roots); }; const diffFileElementId = (path: string) => `diff-${Array.from(path, (char) => char.codePointAt(0)!.toString(16).padStart(4, '0')).join('-')}`; const scrollToDiffFile = (path: string, event: MouseEvent) => { if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return; const target = document.getElementById(diffFileElementId(path)); if (!target) return; event.preventDefault(); target.scrollIntoView({ behavior: 'smooth', block: 'start' }); const hash = `#${target.id}`; if (window.location.hash !== hash) { window.history.pushState(null, '', `${window.location.pathname}${window.location.search}${hash}`); } }; const DiffFileTreeNodes: Component<{ nodes: DiffFileTreeNode[] }> = (props) => (

{(node) => }

); const DiffFileTreeNodeView: Component<{ node: DiffFileTreeNode }> = (props) => (

{props.node.name}

} > {(file) => ( scrollToDiffFile(file().path, event)} > {props.node.name} )}

); const DiffStatPill: Component<{ additions: number; deletions: number }> = (props) => (

0}> +{props.additions} 0}> -{props.deletions}

); export const PullDiffView: Component<{ patch: string; roundLabel: string; history: JSX.Element }> = (props) => { const files = createMemo(() => parseDiffFiles(props.patch)); const stats = createMemo(() => totalDiffStats(files())); const tree = createMemo(() => diffFileTree(files())); const [expanded, setExpanded] = createSignal(true); const [filesVisible, setFilesVisible] = createSignal(true); const [historyVisible, setHistoryVisible] = createSignal(true); return (

{(file) => (

{file.path}

reviewed

...

)}

); }; export const AsideCard: Component<{ title: string; children: JSX.Element }> = (props) => (

{props.title}

{props.children}

); export const BranchPill: Component<{ name: string }> = (props) => ( {props.name} ); export const AtUriPanel: Component<{ uri: string }> = (props) => { const selectUri: JSX.EventHandlerUnion = (event) => { const selection = window.getSelection(); if (!selection) return; const range = document.createRange(); range.selectNodeContents(event.currentTarget); selection.removeAllRanges(); selection.addRange(range); }; return (

AT URI

{props.uri}

); };