jvcs 1.5.0 → 1.5.1

package/controllers/diff-engine/ui.js

@@ -1,7 +1,6 @@
 const blessed = require("blessed")
 
 function startUI(state) {
-
     const screen = blessed.screen({
         smartCSR: true,
         title: "JVCS Diff Viewer"
@@ -10,24 +9,23 @@ function startUI(state) {
     // ---------------------------------------
     // HEADER
     // ---------------------------------------
-
     const header = blessed.box({
         top: 0,
         height: 1,
         width: "100%",
         content: ` JVCS DIFF VIEW (${state.mode}) | ↑↓ Navigate | Enter Open | Esc Back | Tab Switch | Q Quit `,
         style: {
-            fg: "black",
-            bg: "cyan"
+            fg: "white",
+            bg: "blue",
+            bold: true,
+            underline: true
         }
     })
-
     screen.append(header)
 
     // ---------------------------------------
     // FILE LIST VIEW
     // ---------------------------------------
-
     const fileList = blessed.list({
         top: 1,
         left: 0,
@@ -38,19 +36,23 @@ function startUI(state) {
         border: "line",
         label: " Changed Files ",
         style: {
-            selected: {
-                bg: "blue"
-            }
+            selected: { bg: "blue" },
+            item: { fg: "white" }
         }
     })
-
     screen.append(fileList)
 
     function renderFileList() {
-        const items = state.files.map((file, index) => {
-            return `${file.status.toUpperCase()}  ${file.path}`
+        const items = state.files.map(file => {
+            let statusColored
+            switch(file.status) {
+                case "added": statusColored = `{green-fg}${file.status.toUpperCase()}{/green-fg}`; break
+                case "deleted": statusColored = `{red-fg}${file.status.toUpperCase()}{/red-fg}`; break
+                case "modified": statusColored = `{yellow-fg}${file.status.toUpperCase()}{/yellow-fg}`; break
+                default: statusColored = file.status.toUpperCase()
+            }
+            return `${statusColored}  ${file.path}`
         })
-
         fileList.setItems(items)
         fileList.select(state.selectedIndex)
         fileList.focus()
@@ -60,7 +62,6 @@ function startUI(state) {
     // ---------------------------------------
     // FILE VIEW (3 PANELS)
     // ---------------------------------------
-
     const leftBox = blessed.box({
         top: 1,
         left: 0,
@@ -71,7 +72,9 @@ function startUI(state) {
         scrollable: true,
         alwaysScroll: true,
         keys: true,
-        vi: true
+        vi: true,
+        scrollbar: { ch: "│", track: { bg: "black" }, style: { bg: "yellow" } },
+        padding: { left: 1, right: 1 }
     })
 
     const rightBox = blessed.box({
@@ -84,7 +87,9 @@ function startUI(state) {
         scrollable: true,
         alwaysScroll: true,
         keys: true,
-        vi: true
+        vi: true,
+        scrollbar: { ch: "│", track: { bg: "black" }, style: { bg: "yellow" } },
+        padding: { left: 1, right: 1 }
     })
 
     const aiBox = blessed.box({
@@ -97,25 +102,32 @@ function startUI(state) {
         scrollable: true,
         alwaysScroll: true,
         keys: true,
-        vi: true
+        vi: true,
+        scrollbar: { ch: "│", track: { bg: "black" }, style: { bg: "yellow" } },
+        padding: { left: 1, right: 1 }
     })
 
-    function renderFileView() {
+    function colorDiffContent(content, type) {
+        return content.split("\n").map(line => {
+            if(type === "added") return `{green-fg}+ ${line}{/green-fg}`
+            if(type === "removed") return `{red-fg}- ${line}{/red-fg}`
+            return `  ${line}`
+        }).join("\n")
+    }
 
+    function renderFileView() {
         const file = state.getCurrentFile()
         if (!file) return
 
-        leftBox.setContent(file.leftContent || "")
-        rightBox.setContent(file.rightContent || "")
+        leftBox.setContent(colorDiffContent(file.leftContent, "removed"))
+        rightBox.setContent(colorDiffContent(file.rightContent, "added"))
 
         aiBox.setContent(`
-Summary:
-Changes detected in file.
-
-Status: ${file.status}
+{bold}Summary:{/bold}
+Status: ${file.status.toUpperCase()}
 
-Lines Added: ${file.stats.added}
-Lines Removed: ${file.stats.removed}
+{green-fg}Lines Added: ${file.stats.added}{/green-fg}
+{red-fg}Lines Removed: ${file.stats.removed}{/red-fg}
 
 (Real AI analysis will appear here later)
         `)
@@ -125,7 +137,6 @@ Lines Removed: ${file.stats.removed}
         screen.append(aiBox)
 
         updateActiveTabHighlight()
-
         screen.render()
     }
 
@@ -137,23 +148,13 @@ Lines Removed: ${file.stats.removed}
     }
 
     function updateActiveTabHighlight() {
+        leftBox.style.border.fg = state.activeTab === 0 ? "yellow" : "grey"
+        rightBox.style.border.fg = state.activeTab === 1 ? "yellow" : "grey"
+        aiBox.style.border.fg = state.activeTab === 2 ? "yellow" : "grey"
 
-        leftBox.style.border.fg = "white"
-        rightBox.style.border.fg = "white"
-        aiBox.style.border.fg = "white"
-
-        if (state.activeTab === 0) {
-            leftBox.style.border.fg = "yellow"
-            leftBox.focus()
-        }
-        else if (state.activeTab === 1) {
-            rightBox.style.border.fg = "yellow"
-            rightBox.focus()
-        }
-        else {
-            aiBox.style.border.fg = "yellow"
-            aiBox.focus()
-        }
+        if(state.activeTab === 0) leftBox.focus()
+        else if(state.activeTab === 1) rightBox.focus()
+        else aiBox.focus()
 
         screen.render()
     }
@@ -161,21 +162,17 @@ Lines Removed: ${file.stats.removed}
     // ---------------------------------------
     // KEYBOARD CONTROLS
     // ---------------------------------------
-
-    screen.key(["q", "C-c"], () => {
-        return process.exit(0)
-    })
+    screen.key(["q", "C-c"], () => process.exit(0))
 
     // Navigate list
     fileList.key(["up"], () => {
-        if (state.selectedIndex > 0) {
+        if(state.selectedIndex > 0) {
             state.selectFile(state.selectedIndex - 1)
             renderFileList()
         }
     })
-
     fileList.key(["down"], () => {
-        if (state.selectedIndex < state.files.length - 1) {
+        if(state.selectedIndex < state.files.length - 1) {
             state.selectFile(state.selectedIndex + 1)
             renderFileList()
         }
@@ -190,7 +187,7 @@ Lines Removed: ${file.stats.removed}
 
     // ESC → Back to list
     screen.key(["escape"], () => {
-        if (state.screen === "FILE_VIEW") {
+        if(state.screen === "FILE_VIEW") {
             state.goToListView()
             destroyFileView()
             screen.append(fileList)
@@ -200,7 +197,7 @@ Lines Removed: ${file.stats.removed}
 
     // TAB → switch active panel
     screen.key(["tab"], () => {
-        if (state.screen === "FILE_VIEW") {
+        if(state.screen === "FILE_VIEW") {
             state.switchTab((state.activeTab + 1) % 3)
             updateActiveTabHighlight()
         }
@@ -209,7 +206,6 @@ Lines Removed: ${file.stats.removed}
     // ---------------------------------------
     // INITIAL RENDER
     // ---------------------------------------
-
     renderFileList()
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvcs",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "bin": {
     "jvcs": "index.js"
   },