@ecmaos/coreutils 0.3.1 → 0.4.2

package/src/commands/view.ts

@@ -1,47 +1,46 @@
 import path from 'path'
 import chalk from 'chalk'
+import { marked } from 'marked'
+import '@alenaksu/json-viewer'
 import type { Kernel, Process, Shell, Terminal } from '@ecmaos/types'
 import { TerminalCommand } from '../shared/terminal-command.js'
 import { writelnStderr, writelnStdout } from '../shared/helpers.js'
 
-type FileType = 'pdf' | 'image' | 'audio' | 'video'
+type FileType = 'pdf' | 'image' | 'audio' | 'video' | 'markdown' | 'json' | 'application/octet-stream'
 
 function detectFileType(filePath: string): FileType {
   const ext = path.extname(filePath).toLowerCase()
   
   // PDF
-  if (ext === '.pdf') {
-    return 'pdf'
-  }
+  if (ext === '.pdf') return 'pdf'
+  
+  // Markdown
+  const markdownExts = ['.md', '.markdown', '.mdown', '.mkd', '.mkdn']
+  if (markdownExts.includes(ext)) return 'markdown'
+  
+  // JSON
+  const jsonExts = ['.json', '.jsonl', '.jsonc', '.jsonld']
+  if (jsonExts.includes(ext)) return 'json'
   
   // Images
   const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg', '.ico', '.tiff', '.tif']
-  if (imageExts.includes(ext)) {
-    return 'image'
-  }
+  if (imageExts.includes(ext)) return 'image'
   
   // Audio
   const audioExts = ['.mp3', '.wav', '.ogg', '.oga', '.opus', '.m4a', '.aac', '.flac', '.webm', '.wma', '.aiff', '.aif', '.3gp', '.amr']
-  if (audioExts.includes(ext)) {
-    return 'audio'
-  }
+  if (audioExts.includes(ext)) return 'audio'
   
   // Video
   const videoExts = ['.mp4', '.webm', '.ogg', '.ogv', '.mov', '.avi', '.mkv', '.m4v', '.flv', '.wmv', '.3gp']
-  if (videoExts.includes(ext)) {
-    return 'video'
-  }
+  if (videoExts.includes(ext)) return 'video'
   
-  // Default to image for unknown types (might be an image without extension)
-  return 'image'
+  return 'application/octet-stream'
 }
 
 function getMimeType(filePath: string, fileType: FileType): string {
   const ext = path.extname(filePath).toLowerCase()
   
-  if (fileType === 'pdf') {
-    return 'application/pdf'
-  }
+  if (fileType === 'pdf') return 'application/pdf'
   
   if (fileType === 'image') {
     const mimeTypes: Record<string, string> = {
@@ -95,13 +94,15 @@ function getMimeType(filePath: string, fileType: FileType): string {
     }
     return mimeTypes[ext] || 'video/mp4'
   }
-  
+
+  if (fileType === 'json') return 'application/json'
+
   return 'application/octet-stream'
 }
 
 function printUsage(process: Process | undefined, terminal: Terminal): void {
   const usage = `Usage: view [OPTIONS] [FILE...]
-View files in a new window. Supports PDF, images, audio, and video files.
+View files in a new window. Supports PDF, markdown, JSON, images, audio, and video files.
 
   --help                   display this help and exit
   
@@ -118,13 +119,15 @@ Audio/Video Options (for audio and video files):
 
 Examples:
   view document.pdf                    view a PDF file
+  view README.md                       view a markdown file
+  view data.json                       view a JSON file
   view image.png                       view an image
   view song.mp3                        view/play an audio file
   view movie.mp4                       view/play a video file
-  view --loop music.mp3               play audio in a loop
-  view --no-autoplay video.mp4        load video without auto-playing
-  view --volume 50 track.mp3         play at 50% volume
-  view --fullscreen movie.mp4         play video in fullscreen mode`
+  view --loop music.mp3                play audio in a loop
+  view --no-autoplay video.mp4         load video without auto-playing
+  view --volume 50 track.mp3           play at 50% volume
+  view --fullscreen movie.mp4          play video in fullscreen mode`
   writelnStderr(process, terminal, usage)
 }
 
@@ -182,6 +185,11 @@ function formatDuration(seconds: number): string {
   return `${minutes}:${secs.toString().padStart(2, '0')}`
 }
 
+function generateRandomClass(prefix: string): string {
+  const randomSuffix = Math.random().toString(36).substring(2, 8)
+  return `${prefix}-${randomSuffix}`
+}
+
 export function createCommand(kernel: Kernel, shell: Shell, terminal: Terminal): TerminalCommand {
   return new TerminalCommand({
     command: 'view',
@@ -307,7 +315,312 @@ export function createCommand(kernel: Kernel, shell: Shell, terminal: Terminal):
             ? `${path.basename(file)} (${files.indexOf(file) + 1}/${files.length})`
             : path.basename(file)
 
-          if (fileType === 'pdf') {
+          if (fileType === 'markdown') {
+            // Read and parse markdown file
+            const markdownText = new TextDecoder().decode(fileData)
+            const htmlContent = await marked.parse(markdownText)
+            
+            const containerClass = generateRandomClass('markdown-container')
+            
+            const container = document.createElement('div')
+            container.className = containerClass
+            container.style.width = '100%'
+            container.style.height = '100%'
+            container.style.display = 'flex'
+            container.style.flexDirection = 'column'
+            container.style.background = '#1e1e1e'
+            container.style.overflow = 'auto'
+            container.style.padding = '40px'
+            container.style.boxSizing = 'border-box'
+            container.style.fontFamily = "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif"
+            container.style.color = '#e0e0e0'
+            container.style.lineHeight = '1.6'
+            
+            const contentWrapper = document.createElement('div')
+            contentWrapper.style.maxWidth = '800px'
+            contentWrapper.style.margin = '0 auto'
+            contentWrapper.style.width = '100%'
+            contentWrapper.innerHTML = htmlContent
+            
+            const style = document.createElement('style')
+            style.textContent = `
+              .${containerClass} h1, .${containerClass} h2, .${containerClass} h3, .${containerClass} h4, .${containerClass} h5, .${containerClass} h6 { color: #fff; margin-top: 1.5em; margin-bottom: 0.5em; }
+              .${containerClass} h1 { font-size: 2em; border-bottom: 1px solid #444; padding-bottom: 0.3em; }
+              .${containerClass} h2 { font-size: 1.5em; border-bottom: 1px solid #444; padding-bottom: 0.3em; }
+              .${containerClass} h3 { font-size: 1.25em; }
+              .${containerClass} code { background-color: #2d2d2d; padding: 2px 6px; border-radius: 3px; font-family: 'Courier New', monospace; color: #f8f8f2; }
+              .${containerClass} pre { background-color: #2d2d2d; padding: 16px; border-radius: 6px; overflow-x: auto; }
+              .${containerClass} pre code { background-color: transparent; padding: 0; }
+              .${containerClass} a { color: #4a9eff; text-decoration: none; }
+              .${containerClass} a:hover { text-decoration: underline; }
+              .${containerClass} blockquote { border-left: 4px solid #4a9eff; padding-left: 16px; margin-left: 0; color: #b0b0b0; }
+              .${containerClass} table { border-collapse: collapse; width: 100%; margin: 1em 0; }
+              .${containerClass} th, .${containerClass} td { border: 1px solid #444; padding: 8px 12px; text-align: left; }
+              .${containerClass} th { background-color: #2d2d2d; font-weight: bold; }
+              .${containerClass} tr:nth-child(even) { background-color: #252525; }
+              .${containerClass} img { max-width: 100%; height: auto; }
+              .${containerClass} ul, .${containerClass} ol { padding-left: 2em; }
+              .${containerClass} hr { border: none; border-top: 1px solid #444; margin: 2em 0; }
+            `
+            
+            container.appendChild(style)
+            container.appendChild(contentWrapper)
+            
+            const win = kernel.windows.create({
+              title: windowTitle,
+              width: 900,
+              height: 700,
+              max: false
+            })
+            
+            win.mount(container)
+
+            await writelnStdout(process, terminal, chalk.green(`Viewing: ${file}`))
+          } else if (fileType === 'json') {
+            // Read and parse JSON file
+            const jsonText = new TextDecoder().decode(fileData)
+            let jsonData: unknown
+
+            try {
+              jsonData = JSON.parse(jsonText)
+            } catch (error) {
+              await writelnStderr(process, terminal, chalk.red(`view: invalid JSON in ${file}: ${error instanceof Error ? error.message : 'Unknown error'}`))
+              continue
+            }
+
+            type JsonViewerElement = HTMLElement & {
+              data?: unknown
+              filter(regexOrPath: RegExp | string): void
+              resetFilter(): void
+              expand(regexOrPath: RegExp | string): void
+              expandAll(): void
+              collapse(regexOrPath: RegExp | string): void
+              collapseAll(): void
+            }
+
+            const containerClass = generateRandomClass('json-container')
+            
+            const container = document.createElement('div')
+            container.className = containerClass
+            container.style.width = '100%'
+            container.style.height = '100%'
+            container.style.display = 'flex'
+            container.style.flexDirection = 'column'
+            container.style.background = '#2a2f3a'
+            container.style.overflow = 'hidden'
+            
+            const buttonBar = document.createElement('div')
+            buttonBar.style.cssText = `
+              display: flex;
+              flex-wrap: wrap;
+              gap: 6px;
+              padding: 6px;
+              background: #2a2f3a;
+              border-bottom: 1px solid #3c3c3c;
+              align-items: center;
+            `
+            
+            const createInput = (placeholder: string): HTMLInputElement => {
+              const input = document.createElement('input')
+              input.type = 'text'
+              input.placeholder = placeholder
+              input.style.cssText = `
+                background: #263040;
+                border: 1px solid #3c3c3c;
+                border-radius: 3px;
+                color: #fff;
+                padding: 0 8px;
+                font-size: 11px;
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                width: 120px;
+                height: 22px;
+                box-sizing: border-box;
+                line-height: 22px;
+                margin: 0;
+                vertical-align: middle;
+              `
+              return input
+            }
+            
+            const createButton = (text: string): HTMLButtonElement => {
+              const button = document.createElement('button')
+              button.textContent = text
+              button.style.cssText = `
+                background: #263040;
+                border: 1px solid #263040;
+                border-radius: 3px;
+                color: #fff;
+                cursor: pointer;
+                font-size: 11px;
+                font-weight: 600;
+                padding: 0;
+                height: 22px;
+                box-sizing: border-box;
+                line-height: 22px;
+                white-space: nowrap;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding-left: 8px;
+                padding-right: 8px;
+                margin: 0;
+                vertical-align: middle;
+              `
+              button.onmouseenter = () => {
+                button.style.background = '#333'
+                button.style.borderColor = '#333'
+              }
+              button.onmouseleave = () => {
+                button.style.background = '#263040'
+                button.style.borderColor = '#263040'
+              }
+              button.onmousedown = () => {
+                button.style.background = '#263040'
+              }
+              button.onmouseup = () => {
+                button.style.background = '#333'
+              }
+              return button
+            }
+            
+            const createSection = (label: string): HTMLDivElement => {
+              const section = document.createElement('div')
+              section.style.cssText = `
+                display: flex;
+                align-items: center;
+                gap: 4px;
+                height: 22px;
+              `
+              const labelEl = document.createElement('span')
+              labelEl.textContent = label
+              labelEl.style.cssText = `
+                color: #f8f8f2;
+                font-size: 11px;
+                font-weight: 600;
+                width: 50px;
+                flex-shrink: 0;
+                line-height: 22px;
+                display: flex;
+                align-items: center;
+                height: 22px;
+              `
+              section.appendChild(labelEl)
+              return section
+            }
+            
+            const filterSection = createSection('Filter:')
+            const filterInput = createInput('Regex or path')
+            filterSection.appendChild(filterInput)
+            
+            const expandSection = createSection('Expand:')
+            const expandInput = createInput('Regex or path')
+            const expandButton = createButton('Expand')
+            const expandAllButton = createButton('Expand All')
+            expandSection.appendChild(expandInput)
+            expandSection.appendChild(expandButton)
+            expandSection.appendChild(expandAllButton)
+            
+            const collapseSection = createSection('Collapse:')
+            const collapseInput = createInput('Regex or path')
+            const collapseButton = createButton('Collapse')
+            const collapseAllButton = createButton('Collapse All')
+            collapseSection.appendChild(collapseInput)
+            collapseSection.appendChild(collapseButton)
+            collapseSection.appendChild(collapseAllButton)
+            
+            buttonBar.appendChild(filterSection)
+            buttonBar.appendChild(expandSection)
+            buttonBar.appendChild(collapseSection)
+            
+            const jsonViewer = document.createElement('json-viewer') as JsonViewerElement
+            jsonViewer.style.width = '100%'
+            jsonViewer.style.flex = '1'
+            jsonViewer.style.padding = '0.5rem'
+            jsonViewer.style.overflow = 'auto'
+            jsonViewer.data = jsonData
+            
+            jsonViewer.style.setProperty('--background-color', '#2a2f3a')
+            jsonViewer.style.setProperty('--color', '#f8f8f2')
+            jsonViewer.style.setProperty('--font-family', "'Courier New', monospace")
+            jsonViewer.style.setProperty('--string-color', '#a3eea0')
+            jsonViewer.style.setProperty('--number-color', '#d19a66')
+            jsonViewer.style.setProperty('--boolean-color', '#4ba7ef')
+            jsonViewer.style.setProperty('--null-color', '#df9cf3')
+            jsonViewer.style.setProperty('--property-color', '#6fb3d2')
+            jsonViewer.style.setProperty('--preview-color', '#deae8f')
+            jsonViewer.style.setProperty('--highlight-color', '#c92a2a')
+            
+            filterInput.addEventListener('input', () => {
+              const value = filterInput.value.trim()
+              if (value) {
+                try {
+                  const regex = new RegExp(value)
+                  jsonViewer.filter(regex)
+                } catch {
+                  jsonViewer.filter(value)
+                }
+              } else {
+                jsonViewer.resetFilter()
+              }
+            })
+            
+            expandButton.onclick = () => {
+              const value = expandInput.value.trim()
+              if (value) {
+                try {
+                  const regex = new RegExp(value)
+                  jsonViewer.expand(regex)
+                } catch {
+                  jsonViewer.expand(value)
+                }
+              }
+            }
+            
+            expandAllButton.onclick = () => {
+              jsonViewer.expandAll()
+            }
+            
+            collapseButton.onclick = () => {
+              const value = collapseInput.value.trim()
+              if (value) {
+                try {
+                  const regex = new RegExp(value)
+                  jsonViewer.collapse(regex)
+                } catch {
+                  jsonViewer.collapse(value)
+                }
+              }
+            }
+            
+            collapseAllButton.onclick = () => {
+              jsonViewer.collapseAll()
+            }
+            
+            const handleEnterKey = (input: HTMLInputElement, button: HTMLButtonElement) => {
+              input.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                  button.click()
+                }
+              })
+            }
+            
+            handleEnterKey(expandInput, expandButton)
+            handleEnterKey(collapseInput, collapseButton)
+            
+            container.appendChild(buttonBar)
+            container.appendChild(jsonViewer)
+            
+            // Create window
+            const win = kernel.windows.create({
+              title: windowTitle,
+              width: 900,
+              height: 700,
+              max: false
+            })
+            
+            win.mount(container)
+            await writelnStdout(process, terminal, chalk.green(`Viewing: ${file}`))
+          } else if (fileType === 'pdf') {
             // Convert PDF to base64 and display in object tag
             // Use chunked encoding to avoid argument limit issues with large files
             const uint8Array = new Uint8Array(fileData)
@@ -320,24 +633,48 @@ export function createCommand(kernel: Kernel, shell: Shell, terminal: Terminal):
             const base64Data = btoa(binaryString)
             const dataUrl = `data:application/pdf;base64,${base64Data}`
             
-            const pdfHtml = `
-              <div style="width:100%;height:100%;display:flex;flex-direction:column;background:#1e1e1e;overflow:hidden;">
-                <object data="${dataUrl}" type="application/pdf" style="width:100%;height:100%;flex:1;">
-                  <p style="color:#fff;padding:20px;text-align:center;">
-                    Your browser does not support PDFs. 
-                    <a href="${dataUrl}" style="color:#4a9eff;" download="${path.basename(file)}">Download PDF</a>
-                  </p>
-                </object>
-              </div>
-            `
+            const containerClass = generateRandomClass('pdf-container')
+            
+            const container = document.createElement('div')
+            container.className = containerClass
+            container.style.width = '100%'
+            container.style.height = '100%'
+            container.style.display = 'flex'
+            container.style.flexDirection = 'column'
+            container.style.background = '#1e1e1e'
+            container.style.overflow = 'hidden'
+            
+            const object = document.createElement('object')
+            object.data = dataUrl
+            object.type = 'application/pdf'
+            object.style.width = '100%'
+            object.style.height = '100%'
+            object.style.flex = '1'
+            
+            const fallback = document.createElement('p')
+            fallback.style.color = '#fff'
+            fallback.style.padding = '20px'
+            fallback.style.textAlign = 'center'
+            fallback.textContent = 'Your browser does not support PDFs. '
+            
+            const downloadLink = document.createElement('a')
+            downloadLink.href = dataUrl
+            downloadLink.download = path.basename(file)
+            downloadLink.style.color = '#4a9eff'
+            downloadLink.textContent = 'Download PDF'
+            
+            fallback.appendChild(downloadLink)
+            object.appendChild(fallback)
+            container.appendChild(object)
 
-            kernel.windows.create({
+            const win = kernel.windows.create({
               title: windowTitle,
-              html: pdfHtml,
               width: 800,
               height: 600,
               max: false
             })
+            
+            win.mount(container)
 
             await writelnStdout(process, terminal, chalk.green(`Viewing: ${file}`))
           } else if (fileType === 'image') {
@@ -345,19 +682,37 @@ export function createCommand(kernel: Kernel, shell: Shell, terminal: Terminal):
             const blob = new Blob([new Uint8Array(fileData)], { type: mimeType })
             const url = URL.createObjectURL(blob)
 
-            const imageHtml = `
-              <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#1e1e1e;overflow:auto;padding:20px;box-sizing:border-box;">
-                <img src="${url}" style="max-width:100%;max-height:100%;object-fit:contain;" alt="${path.basename(file)}" />
-              </div>
-            `
+            const containerClass = generateRandomClass('image-container')
+            
+            const container = document.createElement('div')
+            container.className = containerClass
+            container.style.width = '100%'
+            container.style.height = '100%'
+            container.style.display = 'flex'
+            container.style.alignItems = 'center'
+            container.style.justifyContent = 'center'
+            container.style.background = '#1e1e1e'
+            container.style.overflow = 'auto'
+            container.style.padding = '20px'
+            container.style.boxSizing = 'border-box'
+            
+            const img = document.createElement('img')
+            img.src = url
+            img.alt = path.basename(file)
+            img.style.maxWidth = '100%'
+            img.style.maxHeight = '100%'
+            img.style.objectFit = 'contain'
+            
+            container.appendChild(img)
 
-            kernel.windows.create({
+            const win = kernel.windows.create({
               title: windowTitle,
-              html: imageHtml,
               width: 800,
               height: 600,
               max: false
             })
+            
+            win.mount(container)
 
             await writelnStdout(process, terminal, chalk.green(`Viewing: ${file}`))
           } else if (fileType === 'audio') {
@@ -401,30 +756,55 @@ export function createCommand(kernel: Kernel, shell: Shell, terminal: Terminal):
             } else {
               // Create a simple audio player window
               const audioId = `audio-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
-              const audioHtml = `
-                <div style="width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1e1e1e;color:#fff;font-family:monospace;padding:20px;box-sizing:border-box;">
-                  <div style="font-size:18px;margin-bottom:20px;text-align:center;word-break:break-word;">${path.basename(file)}</div>
-                  <audio id="${audioId}" src="${url}" ${options.autoplay ? 'autoplay' : ''} ${options.loop ? 'loop' : ''} ${options.muted ? 'muted' : ''} controls style="width:100%;max-width:600px;"></audio>
-                </div>
-                <script>
-                  (function() {
-                    const audio = document.getElementById('${audioId}');
-                    if (audio) {
-                      audio.volume = ${options.volume / 100};
-                      audio.addEventListener('play', () => console.log('Playing: ${file}'));
-                      audio.addEventListener('ended', () => console.log('Finished: ${file}'));
-                    }
-                  })();
-                </script>
-              `
+              const containerClass = generateRandomClass('audio-container')
+              
+              const container = document.createElement('div')
+              container.className = containerClass
+              container.style.width = '100%'
+              container.style.height = '100%'
+              container.style.display = 'flex'
+              container.style.flexDirection = 'column'
+              container.style.alignItems = 'center'
+              container.style.justifyContent = 'center'
+              container.style.background = '#1e1e1e'
+              container.style.color = '#fff'
+              container.style.fontFamily = 'monospace'
+              container.style.padding = '20px'
+              container.style.boxSizing = 'border-box'
+              
+              const title = document.createElement('div')
+              title.textContent = path.basename(file)
+              title.style.fontSize = '18px'
+              title.style.marginBottom = '20px'
+              title.style.textAlign = 'center'
+              title.style.wordBreak = 'break-word'
+              
+              const audio = document.createElement('audio')
+              audio.id = audioId
+              audio.src = url
+              audio.controls = true
+              audio.style.width = '100%'
+              audio.style.maxWidth = '600px'
+              
+              if (options.autoplay) audio.autoplay = true
+              if (options.loop) audio.loop = true
+              if (options.muted) audio.muted = true
+              
+              audio.volume = options.volume / 100
+              audio.addEventListener('play', () => console.log(`Playing: ${file}`))
+              audio.addEventListener('ended', () => console.log(`Finished: ${file}`))
+              
+              container.appendChild(title)
+              container.appendChild(audio)
 
-              kernel.windows.create({
+              const win = kernel.windows.create({
                 title: windowTitle,
-                html: audioHtml,
                 width: 500,
                 height: 200,
                 max: false
               })
+              
+              win.mount(container)
 
               if (duration > 0) {
                 const durationStr = formatDuration(duration)
@@ -487,24 +867,34 @@ export function createCommand(kernel: Kernel, shell: Shell, terminal: Terminal):
             windowWidth = Math.max(windowWidth, 320)
             windowHeight = Math.max(windowHeight, 180)
 
-            // Build video attributes
-            const videoAttrs: string[] = []
-            if (options.autoplay) videoAttrs.push('autoplay')
-            if (options.controls) videoAttrs.push('controls')
-            if (options.loop) videoAttrs.push('loop')
-            if (options.muted) videoAttrs.push('muted')
-            videoAttrs.push('style="width:100%;height:100%;object-fit:contain"')
+            const containerClass = generateRandomClass('video-container')
+            
+            const container = document.createElement('div')
+            container.className = containerClass
+            container.style.width = '100%'
+            container.style.height = '100%'
+            
+            const video = document.createElement('video')
+            video.src = url
+            video.style.width = '100%'
+            video.style.height = '100%'
+            video.style.objectFit = 'contain'
+            
+            if (options.autoplay) video.autoplay = true
+            if (options.controls) video.controls = true
+            if (options.loop) video.loop = true
+            if (options.muted) video.muted = true
 
-            const videoHtml = `<video src="${url}" ${videoAttrs.join(' ')}></video>`
+            container.appendChild(video)
 
-            // Create window
-            kernel.windows.create({
+            const win = kernel.windows.create({
               title: windowTitle,
-              html: videoHtml,
               width: windowWidth,
               height: windowHeight,
               max: options.fullscreen
             })
+            
+            win.mount(container)
 
             if (duration > 0) {
               const minutes = Math.floor(duration / 60)