numux 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "numux",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Terminal multiplexer with dependency orchestration",
   "type": "module",
   "license": "MIT",

package/src/ui/app.ts

@@ -20,7 +20,6 @@ export class App {
 	private sidebarWidth = 20
 
 	private config: ResolvedNumuxConfig
-	private processHexColors: Map<string, string>
 
 	private resizeTimer: ReturnType<typeof setTimeout> | null = null
 
@@ -34,7 +33,6 @@ export class App {
 		this.manager = manager
 		this.config = config
 		this.names = manager.getProcessNames()
-		this.processHexColors = buildProcessHexColorMap(this.names, config)
 	}
 
 	async start(): Promise<void> {
@@ -60,7 +58,8 @@ export class App {
 		})
 
 		// Tab bar (vertical sidebar)
-		this.tabBar = new TabBar(this.renderer, this.names)
+		const processHexColors = buildProcessHexColorMap(this.names, this.config)
+		this.tabBar = new TabBar(this.renderer, this.names, processHexColors)
 
 		// Content row: sidebar | pane
 		const contentRow = new BoxRenderable(this.renderer, {
@@ -91,15 +90,12 @@ export class App {
 		for (const name of this.names) {
 			const interactive = this.config.processes[name].interactive === true
 			const pane = new Pane(this.renderer, name, termCols, termRows, interactive)
-			pane.onScroll(() => {
-				if (name === this.activePane) this.updateScrollIndicator()
-			})
 			this.panes.set(name, pane)
 			paneContainer.add(pane.scrollBox)
 		}
 
-		// Status bar
-		this.statusBar = new StatusBar(this.renderer, this.names, this.processHexColors)
+		// Status bar (only visible during search)
+		this.statusBar = new StatusBar(this.renderer)
 
 		// Assemble layout
 		contentRow.add(sidebar)
@@ -117,13 +113,9 @@ export class App {
 			if (this.destroyed) return
 			if (event.type === 'output') {
 				this.panes.get(event.name)?.feed(event.data)
-				if (event.name === this.activePane) {
-					this.updateScrollIndicator()
-				}
 			} else if (event.type === 'status') {
 				const state = this.manager.getState(event.name)
 				this.tabBar.updateStatus(event.name, event.status, state?.exitCode, state?.restartCount)
-				this.statusBar.updateStatus(event.name, event.status)
 			}
 		})
 
@@ -227,19 +219,16 @@ export class App {
 						const pane = this.panes.get(this.activePane)
 						const delta = this.termRows - 2
 						pane?.scrollBy(key.name === 'pageup' ? -delta : delta)
-						this.updateScrollIndicator()
 						return
 					}
 
 					// Alt+Home/End: scroll to top/bottom
 					if (this.activePane && key.name === 'home') {
 						this.panes.get(this.activePane)?.scrollToTop()
-						this.updateScrollIndicator()
 						return
 					}
 					if (this.activePane && key.name === 'end') {
 						this.panes.get(this.activePane)?.scrollToBottom()
-						this.updateScrollIndicator()
 						return
 					}
 				}
@@ -253,18 +242,14 @@ export class App {
 					if (key.name === 'up' || key.name === 'down') {
 						const pane = this.panes.get(this.activePane)
 						pane?.scrollBy(key.name === 'up' ? -1 : 1)
-						this.updateScrollIndicator()
 					} else if (key.name === 'pageup' || key.name === 'pagedown') {
 						const pane = this.panes.get(this.activePane)
 						const delta = this.termRows - 2
 						pane?.scrollBy(key.name === 'pageup' ? -delta : delta)
-						this.updateScrollIndicator()
 					} else if (key.name === 'home') {
 						this.panes.get(this.activePane)?.scrollToTop()
-						this.updateScrollIndicator()
 					} else if (key.name === 'end') {
 						this.panes.get(this.activePane)?.scrollToBottom()
-						this.updateScrollIndicator()
 					}
 					return
 				}
@@ -296,14 +281,6 @@ export class App {
 		}
 		this.activePane = name
 		this.panes.get(name)?.show()
-		this.updateScrollIndicator()
-	}
-
-	private updateScrollIndicator(): void {
-		if (!this.activePane) return
-		const pane = this.panes.get(this.activePane)
-		if (!pane) return
-		this.statusBar.setScrollIndicator(!pane.isAtBottom)
 	}
 
 	private enterSearch(): void {
@@ -398,7 +375,6 @@ export class App {
 		if (!pane) return
 		const match = this.searchMatches[this.searchIndex]
 		pane.scrollToLine(match.line)
-		this.updateScrollIndicator()
 	}
 
 	async shutdown(): Promise<void> {

package/src/ui/status-bar.ts

@@ -1,24 +1,4 @@
-import {
-	type CliRenderer,
-	cyan,
-	fg,
-	green,
-	red,
-	reverse,
-	StyledText,
-	type TextChunk,
-	TextRenderable,
-	yellow
-} from '@opentui/core'
-import type { ProcessStatus } from '../types'
-
-const STATUS_STYLE: Partial<Record<ProcessStatus, (input: string) => TextChunk>> = {
-	ready: green,
-	running: cyan,
-	failed: red,
-	stopped: fg('#888'),
-	skipped: fg('#888')
-}
+import { type CliRenderer, cyan, red, reverse, StyledText, type TextChunk, TextRenderable, yellow } from '@opentui/core'
 
 function plain(text: string): TextChunk {
 	return { __isChunk: true, text } as TextChunk
@@ -26,20 +6,12 @@ function plain(text: string): TextChunk {
 
 export class StatusBar {
 	readonly renderable: TextRenderable
-	private statuses = new Map<string, ProcessStatus>()
-	private colors: Map<string, string>
-	private scrolledUp = false
 	private _searchMode = false
 	private _searchQuery = ''
 	private _searchMatchCount = 0
 	private _searchCurrentIndex = -1
 
-	constructor(renderer: CliRenderer, names: string[], colors?: Map<string, string>) {
-		this.colors = colors ?? new Map()
-		for (const name of names) {
-			this.statuses.set(name, 'pending')
-		}
-
+	constructor(renderer: CliRenderer) {
 		this.renderable = new TextRenderable(renderer, {
 			id: 'status-bar',
 			width: '100%',
@@ -50,17 +22,6 @@ export class StatusBar {
 		})
 	}
 
-	updateStatus(name: string, status: ProcessStatus): void {
-		this.statuses.set(name, status)
-		this.renderable.content = this.buildContent()
-	}
-
-	setScrollIndicator(scrolledUp: boolean): void {
-		if (this.scrolledUp === scrolledUp) return
-		this.scrolledUp = scrolledUp
-		this.renderable.content = this.buildContent()
-	}
-
 	setSearchMode(active: boolean, query = '', matchCount = 0, currentIndex = -1): void {
 		this._searchMode = active
 		this._searchQuery = query
@@ -73,29 +34,7 @@ export class StatusBar {
 		if (this._searchMode) {
 			return this.buildSearchContent()
 		}
-		const chunks: TextChunk[] = []
-		let first = true
-		for (const [name, status] of this.statuses) {
-			if (!first) chunks.push(plain('  '))
-			first = false
-			const styleFn = STATUS_STYLE[status]
-			const hexColor = this.colors.get(name)
-			if (styleFn) {
-				chunks.push(styleFn(`${name}:${status}`))
-			} else if (hexColor) {
-				chunks.push(fg(hexColor)(`${name}:${status}`))
-			} else {
-				chunks.push(plain(`${name}:${status}`))
-			}
-		}
-		if (this.scrolledUp) {
-			chunks.push(plain('  '))
-			chunks.push(yellow('[scrolled]'))
-		}
-		chunks.push(
-			plain('  Alt+\u2190\u2192/1-9: tabs  Alt+PgUp/Dn: scroll  Alt+R: restart  Alt+S: stop/start  Ctrl+C: quit')
-		)
-		return new StyledText(chunks)
+		return new StyledText([plain('')])
 	}
 
 	private buildSearchContent(): StyledText {

package/src/ui/tabs.ts

@@ -1,4 +1,11 @@
-import { type CliRenderer, SelectRenderable, SelectRenderableEvents } from '@opentui/core'
+import {
+	type CliRenderer,
+	type OptimizedBuffer,
+	parseColor,
+	type RGBA,
+	SelectRenderable,
+	SelectRenderableEvents
+} from '@opentui/core'
 import type { ProcessStatus } from '../types'
 
 const STATUS_ICONS: Record<ProcessStatus, string> = {
@@ -12,18 +19,82 @@ const STATUS_ICONS: Record<ProcessStatus, string> = {
 	skipped: '⊘'
 }
 
+/** Status-specific icon colors (override process colors) */
+const STATUS_ICON_HEX: Partial<Record<ProcessStatus, string>> = {
+	ready: '#00cc00',
+	failed: '#ff5555',
+	stopped: '#888888',
+	skipped: '#888888'
+}
+
+interface OptionColors {
+	icon: RGBA | null
+	name: RGBA | null
+}
+
+/**
+ * SelectRenderable subclass that supports per-option coloring.
+ * The base SelectRenderable draws all option text with a single color.
+ * This overrides renderSelf to repaint the icon and name with individual
+ * RGBA colors after the base render.
+ */
+class ColoredSelectRenderable extends SelectRenderable {
+	private _optionColors: OptionColors[] = []
+
+	setOptionColors(colors: OptionColors[]): void {
+		this._optionColors = colors
+		this.requestRender()
+	}
+
+	protected renderSelf(buffer: OptimizedBuffer, deltaTime: number): void {
+		const wasDirty = this.isDirty
+		super.renderSelf(buffer, deltaTime)
+		if (wasDirty && this.frameBuffer && this._optionColors.length > 0) {
+			this.colorizeOptions()
+		}
+	}
+
+	private colorizeOptions(): void {
+		const fb = this.frameBuffer!
+		// Access internal layout state (private in TS, accessible at runtime)
+		const scrollOffset = (this as any).scrollOffset as number
+		const maxVisibleItems = (this as any).maxVisibleItems as number
+		const linesPerItem = (this as any).linesPerItem as number
+		const options = this.options
+		const visibleCount = Math.min(maxVisibleItems, options.length - scrollOffset)
+
+		for (let i = 0; i < visibleCount; i++) {
+			const actualIndex = scrollOffset + i
+			const colors = this._optionColors[actualIndex]
+			if (!colors) continue
+			const itemY = i * linesPerItem
+			// Layout: "▶ ○ name" or "  ○ name" (drawText at x=1, prefix 2 chars)
+			// Icon at x=3, space at x=4, name starts at x=5
+			const optName = options[actualIndex].name
+			if (colors.icon) {
+				fb.drawText(optName.charAt(0), 3, itemY, colors.icon)
+			}
+			if (colors.name) {
+				fb.drawText(optName.slice(2), 5, itemY, colors.name)
+			}
+		}
+	}
+}
+
 export class TabBar {
-	readonly renderable: SelectRenderable
+	readonly renderable: ColoredSelectRenderable
 	private names: string[]
 	private statuses: Map<string, ProcessStatus>
 	private descriptions: Map<string, string>
+	private processColors: Map<string, string>
 
-	constructor(renderer: CliRenderer, names: string[]) {
+	constructor(renderer: CliRenderer, names: string[], colors?: Map<string, string>) {
 		this.names = names
 		this.statuses = new Map(names.map(n => [n, 'pending' as ProcessStatus]))
 		this.descriptions = new Map(names.map(n => [n, 'pending']))
+		this.processColors = colors ?? new Map()
 
-		this.renderable = new SelectRenderable(renderer, {
+		this.renderable = new ColoredSelectRenderable(renderer, {
 			id: 'tab-bar',
 			width: '100%',
 			height: '100%',
@@ -37,6 +108,7 @@ export class TabBar {
 			showDescription: true,
 			wrapSelection: true
 		})
+		this.updateOptionColors()
 	}
 
 	onSelect(handler: (index: number, name: string) => void): void {
@@ -58,6 +130,20 @@ export class TabBar {
 			name: this.formatTab(n, this.statuses.get(n)!),
 			description: this.descriptions.get(n)!
 		}))
+		this.updateOptionColors()
+	}
+
+	private updateOptionColors(): void {
+		const colors = this.names.map(name => {
+			const status = this.statuses.get(name)!
+			const statusHex = STATUS_ICON_HEX[status]
+			const processHex = this.processColors.get(name)
+			return {
+				icon: parseColor(statusHex ?? processHex ?? '#888888'),
+				name: processHex ? parseColor(processHex) : null
+			}
+		})
+		this.renderable.setOptionColors(colors)
 	}
 
 	private formatDescription(status: ProcessStatus, exitCode?: number | null, restartCount?: number): string {