kajji 0.1.0

package/src/context/theme.tsx

@@ -0,0 +1,90 @@
+import { useRenderer } from "@opentui/solid"
+import { type Accessor, createSignal, onMount } from "solid-js"
+import { lazygitTheme } from "../theme/presets/lazygit"
+import { opencodeTheme } from "../theme/presets/opencode"
+import type { Theme, ThemeColors, ThemeStyle } from "../theme/types"
+import { createSimpleContext } from "./helper"
+
+const ACTIVE_THEME: "lazygit" | "opencode" = "lazygit"
+
+const themes = {
+	lazygit: lazygitTheme,
+	opencode: opencodeTheme,
+}
+
+function parseHexColor(
+	hex: string,
+): { r: number; g: number; b: number } | null {
+	if (!hex || !hex.startsWith("#") || hex.length !== 7) return null
+	const r = Number.parseInt(hex.slice(1, 3), 16)
+	const g = Number.parseInt(hex.slice(3, 5), 16)
+	const b = Number.parseInt(hex.slice(5, 7), 16)
+	if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) return null
+	return { r, g, b }
+}
+
+function calculateLuminance(r: number, g: number, b: number): number {
+	return (0.299 * r + 0.587 * g + 0.114 * b) / 255
+}
+
+function adjustBrightness(hex: string, amount: number): string {
+	const rgb = parseHexColor(hex)
+	if (!rgb) return hex
+	const adjust = (c: number) => Math.max(0, Math.min(255, c + amount))
+	const toHex = (c: number) => adjust(c).toString(16).padStart(2, "0")
+	return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`
+}
+
+export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
+	name: "Theme",
+	init: () => {
+		const renderer = useRenderer()
+		const [theme, setTheme] = createSignal<Theme>(themes[ACTIVE_THEME])
+		const [terminalBg, setTerminalBg] = createSignal<string | null>(null)
+		const [isDark, setIsDark] = createSignal(true)
+
+		onMount(async () => {
+			try {
+				const palette = await renderer.getPalette({ timeout: 1000 })
+				if (palette.defaultBackground) {
+					setTerminalBg(palette.defaultBackground)
+					const rgb = parseHexColor(palette.defaultBackground)
+					if (rgb) {
+						const luminance = calculateLuminance(rgb.r, rgb.g, rgb.b)
+						setIsDark(luminance <= 0.5)
+					}
+				}
+			} catch {}
+		})
+
+		const colors: Accessor<ThemeColors> = () => {
+			const base = theme().colors
+			const bg = terminalBg()
+
+			if (!theme().style.adaptToTerminal || !bg) {
+				return base
+			}
+
+			const brightnessDir = isDark() ? 1 : -1
+			return {
+				...base,
+				background: bg,
+				backgroundSecondary: adjustBrightness(bg, 10 * brightnessDir),
+				backgroundElement: adjustBrightness(bg, 20 * brightnessDir),
+			}
+		}
+
+		const style: Accessor<ThemeStyle> = () => theme().style
+
+		const setThemeByName = (name: "lazygit" | "opencode") => {
+			setTheme(themes[name])
+		}
+
+		return {
+			theme,
+			colors,
+			style,
+			setTheme: setThemeByName,
+		}
+	},
+})

package/src/context/types.ts

@@ -0,0 +1,51 @@
+/**
+ * Panel represents the physical UI region (derived from context's first segment)
+ */
+export type Panel = "log" | "refs" | "detail"
+
+/**
+ * Context represents the current interaction mode (what keys mean right now).
+ * Format: panel.mode (e.g., "log.revisions", "log.files")
+ *
+ * Modes are siblings, not hierarchical. "files" is NOT a child of "revisions".
+ * This prevents accidental command inheritance via prefix matching.
+ */
+export type Context =
+	// Special contexts
+	| "global"
+	| "help"
+	// Log panel modes
+	| "log"
+	| "log.revisions"
+	| "log.files"
+	| "log.oplog"
+	// Refs panel modes
+	| "refs"
+	| "refs.bookmarks"
+	| "refs.revisions"
+	| "refs.files"
+	// Detail panel
+	| "detail"
+
+export type CommandType = "action" | "navigation" | "view" | "git"
+
+/**
+ * Controls where a command appears:
+ * - "all": show in both status bar and help modal (default)
+ * - "help-only": show only in help modal (navigation, git ops, refresh)
+ * - "status-only": show only in status bar (modal hints)
+ * - "none": hidden everywhere (internal commands)
+ */
+export type CommandVisibility = "all" | "help-only" | "status-only" | "none"
+
+/**
+ * Extract the panel from a hierarchical context
+ */
+export function panelFromContext(context: Context): Panel | null {
+	if (context === "global" || context === "help") return null
+	const panel = context.split(".")[0]
+	if (panel === "log" || panel === "refs" || panel === "detail") {
+		return panel
+	}
+	return null
+}

package/src/index.tsx

@@ -0,0 +1,15 @@
+import { ConsolePosition } from "@opentui/core"
+import { extend, render } from "@opentui/solid"
+import { GhosttyTerminalRenderable } from "ghostty-opentui/terminal-buffer"
+import { App } from "./App"
+
+// Register ghostty-terminal component for ANSI rendering
+extend({ "ghostty-terminal": GhosttyTerminalRenderable })
+
+render(() => <App />, {
+	consoleOptions: {
+		position: ConsolePosition.BOTTOM,
+		maxStoredLogs: 1000,
+		sizePercent: 40,
+	},
+})

package/src/keybind/index.ts

@@ -0,0 +1,2 @@
+export * from "./types"
+export * from "./parser"

package/src/keybind/parser.ts

@@ -0,0 +1,88 @@
+import type { KeybindInfo } from "./types"
+
+export function parse(key: string): KeybindInfo[] {
+	if (key === "none") return []
+
+	return key.split(",").map((combo) => {
+		const parts = combo.split("+")
+		const info: KeybindInfo = {
+			ctrl: false,
+			meta: false,
+			shift: false,
+			name: "",
+		}
+
+		for (const part of parts) {
+			const lower = part.toLowerCase()
+			switch (lower) {
+				case "ctrl":
+					info.ctrl = true
+					break
+				case "alt":
+				case "meta":
+				case "option":
+					info.meta = true
+					break
+				case "shift":
+					info.shift = true
+					break
+				case "esc":
+					info.name = "escape"
+					break
+				default:
+					if (part.length === 1 && part !== lower) {
+						info.shift = true
+					}
+					info.name = lower
+					break
+			}
+		}
+
+		return info
+	})
+}
+
+export function match(a: KeybindInfo, b: KeybindInfo): boolean {
+	return (
+		a.name === b.name &&
+		a.ctrl === b.ctrl &&
+		a.meta === b.meta &&
+		a.shift === b.shift
+	)
+}
+
+export function keybindToString(info: KeybindInfo): string {
+	const parts: string[] = []
+
+	if (info.ctrl) parts.push("ctrl")
+	if (info.meta) parts.push("alt")
+
+	const isSingleLetter = info.name.length === 1 && /[a-z]/.test(info.name)
+	if (info.shift && !isSingleLetter) parts.push("shift")
+
+	if (info.name) {
+		if (info.name === "delete") parts.push("del")
+		else if (info.name === "escape") parts.push("esc")
+		else if (info.shift && isSingleLetter) parts.push(info.name.toUpperCase())
+		else parts.push(info.name)
+	}
+
+	return parts.join("+")
+}
+
+export function fromParsedKey(evt: {
+	name?: string
+	ctrl?: boolean
+	meta?: boolean
+	shift?: boolean
+}): KeybindInfo {
+	let name = evt.name ?? ""
+	if (name === "return") name = "enter"
+
+	return {
+		name,
+		ctrl: evt.ctrl ?? false,
+		meta: evt.meta ?? false,
+		shift: evt.shift ?? false,
+	}
+}

package/src/keybind/types.ts

@@ -0,0 +1,83 @@
+export interface KeybindInfo {
+	name: string
+	ctrl: boolean
+	meta: boolean
+	shift: boolean
+}
+
+export type KeybindConfigKey =
+	| "quit"
+	| "toggle_console"
+	| "focus_next"
+	| "focus_prev"
+	| "focus_panel_1"
+	| "focus_panel_2"
+	| "focus_panel_3"
+	| "nav_down"
+	| "nav_up"
+	| "nav_page_up"
+	| "nav_page_down"
+	| "help"
+	| "refresh"
+	| "enter"
+	| "escape"
+	| "prev_tab"
+	| "next_tab"
+	| "jj_new"
+	| "jj_edit"
+	| "jj_describe"
+	| "jj_squash"
+	| "jj_abandon"
+	| "jj_undo"
+	| "jj_redo"
+	| "jj_restore"
+	| "jj_git_fetch"
+	| "jj_git_fetch_all"
+	| "jj_git_push"
+	| "jj_git_push_all"
+	| "bookmark_create"
+	| "bookmark_delete"
+	| "bookmark_rename"
+	| "bookmark_forget"
+	| "bookmark_set"
+	| "bookmark_move"
+
+export type KeybindConfig = Record<KeybindConfigKey, string>
+
+export const DEFAULT_KEYBINDS: KeybindConfig = {
+	quit: "q",
+	toggle_console: "§",
+	focus_next: "tab",
+	focus_prev: "shift+tab",
+	focus_panel_1: "1",
+	focus_panel_2: "2",
+	focus_panel_3: "3",
+	nav_down: "j,down",
+	nav_up: "k,up",
+	nav_page_up: "ctrl+u",
+	nav_page_down: "ctrl+d",
+	help: "?",
+	refresh: "ctrl+r",
+	enter: "enter",
+	escape: "escape",
+	prev_tab: "[",
+	next_tab: "]",
+	jj_new: "n",
+	jj_edit: "e",
+	jj_describe: "d",
+	jj_squash: "s",
+	jj_abandon: "a",
+	jj_undo: "u",
+	jj_redo: "U",
+	jj_restore: "r",
+	jj_git_fetch: "f",
+	jj_git_fetch_all: "F",
+	jj_git_push: "p",
+	jj_git_push_all: "P",
+	bookmark_create: "c",
+	bookmark_delete: "d",
+	bookmark_rename: "r",
+	bookmark_forget: "x",
+	bookmark_set: "b",
+	bookmark_move: "m",
+}

package/src/theme/index.ts

@@ -0,0 +1,3 @@
+export type { Theme, ThemeColors, ThemeStyle } from "./types"
+export { lazygitTheme } from "./presets/lazygit"
+export { opencodeTheme } from "./presets/opencode"

package/src/theme/presets/lazygit.ts

@@ -0,0 +1,45 @@
+import type { Theme } from "../types"
+
+export const lazygitTheme: Theme = {
+	name: "lazygit",
+	colors: {
+		primary: "#7FD962",
+		secondary: "#56b6c2",
+		background: "#0a0a0a",
+		backgroundSecondary: "#141414",
+		backgroundElement: "#1e1e1e",
+
+		text: "#eeeeee",
+		textMuted: "#808080",
+
+		border: "#606060",
+		borderFocused: "#7FD962",
+
+		selectionBackground: "#323264",
+		selectionText: "#eeeeee",
+
+		success: "#7FD962",
+		warning: "#e5c07b",
+		error: "#e06c75",
+		info: "#56b6c2",
+
+		purple: "#c678dd",
+		orange: "#d19a66",
+		green: "#7FD962",
+
+		scrollbarTrack: "#303030",
+		scrollbarThumb: "#606060",
+	},
+	style: {
+		panel: {
+			borderStyle: "rounded",
+		},
+		statusBar: {
+			separator: "•",
+		},
+		dialog: {
+			overlayOpacity: 0,
+		},
+		adaptToTerminal: true,
+	},
+}

package/src/theme/presets/opencode.ts

@@ -0,0 +1,45 @@
+import type { Theme } from "../types"
+
+export const opencodeTheme: Theme = {
+	name: "opencode",
+	colors: {
+		primary: "#fab283",
+		secondary: "#5c9cf5",
+		background: "#0a0a0a",
+		backgroundSecondary: "#141414",
+		backgroundElement: "#1e1e1e",
+
+		text: "#eeeeee",
+		textMuted: "#808080",
+
+		border: "#484848",
+		borderFocused: "#eeeeee",
+
+		selectionBackground: "#1e1e1e",
+		selectionText: "#fab283",
+
+		success: "#12c905",
+		warning: "#fcd53a",
+		error: "#fc533a",
+		info: "#5c9cf5",
+
+		purple: "#9d7cd8",
+		orange: "#f5a742",
+		green: "#7fd88f",
+
+		scrollbarTrack: "#1e1e1e",
+		scrollbarThumb: "#484848",
+	},
+	style: {
+		panel: {
+			borderStyle: "single",
+		},
+		statusBar: {
+			separator: null,
+		},
+		dialog: {
+			overlayOpacity: 150,
+		},
+		adaptToTerminal: false,
+	},
+}

package/src/theme/types.ts

@@ -0,0 +1,47 @@
+export interface ThemeColors {
+	primary: string
+	secondary: string
+	background: string
+	backgroundSecondary: string
+	backgroundElement: string
+
+	text: string
+	textMuted: string
+
+	border: string
+	borderFocused: string
+
+	selectionBackground: string
+	selectionText: string
+
+	success: string
+	warning: string
+	error: string
+	info: string
+
+	purple: string
+	orange: string
+	green: string
+
+	scrollbarTrack: string
+	scrollbarThumb: string
+}
+
+export interface ThemeStyle {
+	panel: {
+		borderStyle: "rounded" | "single"
+	}
+	statusBar: {
+		separator: string | null
+	}
+	dialog: {
+		overlayOpacity: number
+	}
+	adaptToTerminal: boolean
+}
+
+export interface Theme {
+	name: string
+	colors: ThemeColors
+	style: ThemeStyle
+}

package/src/utils/double-click.ts

@@ -0,0 +1,59 @@
+/**
+ * Creates a double-click detector that distinguishes single vs double clicks.
+ *
+ * @param onSingleClick - Called on single click (after timeout confirms no second click)
+ * @param onDoubleClick - Called on double click
+ * @param timeout - Max time between clicks to count as double-click (default: 300ms)
+ */
+export function createDoubleClickHandler(
+	onSingleClick?: () => void,
+	onDoubleClick?: () => void,
+	timeout = 300,
+): () => void {
+	let lastClickTime = 0
+	let pendingTimeout: ReturnType<typeof setTimeout> | null = null
+
+	return () => {
+		const now = Date.now()
+		const timeSinceLastClick = now - lastClickTime
+
+		if (pendingTimeout) {
+			clearTimeout(pendingTimeout)
+			pendingTimeout = null
+		}
+
+		if (timeSinceLastClick < timeout) {
+			lastClickTime = 0
+			onDoubleClick?.()
+		} else {
+			lastClickTime = now
+			if (onSingleClick) {
+				pendingTimeout = setTimeout(() => {
+					pendingTimeout = null
+					onSingleClick()
+				}, timeout)
+			}
+		}
+	}
+}
+
+/**
+ * Simpler version that only detects double-clicks (no single-click delay).
+ * Use this when you don't need to distinguish single clicks.
+ */
+export function createDoubleClickDetector(
+	onDoubleClick: () => void,
+	timeout = 300,
+): () => void {
+	let lastClickTime = 0
+
+	return () => {
+		const now = Date.now()
+		if (now - lastClickTime < timeout) {
+			lastClickTime = 0
+			onDoubleClick()
+		} else {
+			lastClickTime = now
+		}
+	}
+}

package/src/utils/file-tree.ts

@@ -0,0 +1,154 @@
+import type { FileChange, FileStatus } from "../commander/types"
+
+export interface FileTreeNode {
+	name: string
+	path: string
+	isDirectory: boolean
+	status?: FileStatus
+	children: FileTreeNode[]
+	depth: number
+}
+
+export interface FlatFileNode {
+	node: FileTreeNode
+	visualDepth: number
+}
+
+function splitPath(path: string): string[] {
+	return path.split("/").filter((part) => part.length > 0)
+}
+
+function insertIntoTree(
+	root: FileTreeNode,
+	file: FileChange,
+	parts: string[],
+	depth: number,
+): void {
+	if (parts.length === 0) return
+
+	const [current, ...rest] = parts
+	if (!current) return
+
+	let child = root.children.find((c) => c.name === current)
+
+	if (!child) {
+		const isFile = rest.length === 0
+		const path = root.path ? `${root.path}/${current}` : current
+
+		child = {
+			name: current,
+			path,
+			isDirectory: !isFile,
+			status: isFile ? file.status : undefined,
+			children: [],
+			depth: depth,
+		}
+		root.children.push(child)
+	}
+
+	if (rest.length > 0) {
+		insertIntoTree(child, file, rest, depth + 1)
+	}
+}
+
+function sortTree(node: FileTreeNode): void {
+	node.children.sort((a, b) => {
+		if (a.isDirectory && !b.isDirectory) return -1
+		if (!a.isDirectory && b.isDirectory) return 1
+		return a.name.localeCompare(b.name)
+	})
+	for (const child of node.children) {
+		sortTree(child)
+	}
+}
+
+function compressNode(node: FileTreeNode): void {
+	while (
+		node.isDirectory &&
+		node.children.length === 1 &&
+		node.children[0]?.isDirectory
+	) {
+		const onlyChild = node.children[0]
+		node.name = node.name ? `${node.name}/${onlyChild.name}` : onlyChild.name
+		node.path = onlyChild.path
+		node.children = onlyChild.children
+	}
+}
+
+function compressTree(root: FileTreeNode): void {
+	for (const child of root.children) {
+		compressTreeRecursive(child)
+	}
+}
+
+function compressTreeRecursive(node: FileTreeNode): void {
+	for (const child of node.children) {
+		compressTreeRecursive(child)
+	}
+	compressNode(node)
+}
+
+export function buildFileTree(files: FileChange[]): FileTreeNode {
+	const root: FileTreeNode = {
+		name: "",
+		path: "",
+		isDirectory: true,
+		children: [],
+		depth: 0,
+	}
+
+	for (const file of files) {
+		const parts = splitPath(file.path)
+		insertIntoTree(root, file, parts, 1)
+	}
+
+	sortTree(root)
+	compressTree(root)
+
+	return root
+}
+
+export function flattenTree(
+	root: FileTreeNode,
+	collapsedPaths: Set<string>,
+): FlatFileNode[] {
+	const result: FlatFileNode[] = []
+
+	function traverse(node: FileTreeNode, visualDepth: number): void {
+		if (node.path) {
+			result.push({ node, visualDepth })
+		}
+
+		if (node.isDirectory && !collapsedPaths.has(node.path)) {
+			for (const child of node.children) {
+				traverse(child, node.path ? visualDepth + 1 : visualDepth)
+			}
+		}
+	}
+
+	traverse(root, 0)
+	return result
+}
+
+export function countVisibleNodes(
+	root: FileTreeNode,
+	collapsedPaths: Set<string>,
+): number {
+	return flattenTree(root, collapsedPaths).length
+}
+
+export function getFilePaths(node: FileTreeNode): string[] {
+	const paths: string[] = []
+
+	function collect(n: FileTreeNode): void {
+		if (!n.isDirectory) {
+			paths.push(n.path)
+		}
+		for (const child of n.children) {
+			collect(child)
+		}
+	}
+
+	collect(node)
+	return paths
+}