kajji 0.1.0

package/src/commander/operations.ts

@@ -0,0 +1,313 @@
+import { type ExecuteResult, execute } from "./executor"
+
+export interface OperationResult extends ExecuteResult {
+	command: string
+}
+
+export interface OpLogEntry {
+	operationId: string
+	lines: string[]
+	isCurrent: boolean
+}
+
+function stripAnsi(str: string): string {
+	// biome-ignore lint/suspicious/noControlCharactersInRegex: ANSI escape sequence
+	return str.replace(/\x1b\[[0-9;]*m/g, "")
+}
+
+export function parseOpLog(lines: string[]): OpLogEntry[] {
+	const operations: OpLogEntry[] = []
+	let current: OpLogEntry | null = null
+
+	for (const line of lines) {
+		const stripped = stripAnsi(line)
+		const isHeader = stripped.startsWith("@") || stripped.startsWith("○")
+
+		if (isHeader) {
+			if (current) {
+				operations.push(current)
+			}
+			const parts = stripped.split(/\s+/)
+			const operationId = parts[1] || ""
+			current = {
+				operationId,
+				lines: [line],
+				isCurrent: stripped.startsWith("@"),
+			}
+		} else if (current && stripped.trim()) {
+			current.lines.push(line)
+		}
+	}
+
+	if (current) {
+		operations.push(current)
+	}
+
+	return operations
+}
+
+export async function jjNew(revision: string): Promise<OperationResult> {
+	const args = ["new", revision]
+	const result = await execute(args)
+	return {
+		...result,
+		command: `jj ${args.join(" ")}`,
+	}
+}
+
+export async function jjEdit(revision: string): Promise<OperationResult> {
+	const args = ["edit", revision]
+	const result = await execute(args)
+	return {
+		...result,
+		command: `jj ${args.join(" ")}`,
+	}
+}
+
+export async function jjSquash(
+	revision?: string,
+	options?: { ignoreImmutable?: boolean },
+): Promise<OperationResult> {
+	const args = revision ? ["squash", "-r", revision] : ["squash"]
+	if (options?.ignoreImmutable) {
+		args.push("--ignore-immutable")
+	}
+	const result = await execute(args)
+	return {
+		...result,
+		command: `jj ${args.join(" ")}`,
+	}
+}
+
+export function isImmutableError(result: OperationResult): boolean {
+	return (
+		!result.success &&
+		(result.stderr.includes("immutable") || result.stderr.includes("Immutable"))
+	)
+}
+
+export async function jjDescribe(
+	revision: string,
+	message: string,
+	options?: { ignoreImmutable?: boolean },
+): Promise<OperationResult> {
+	const args = ["describe", revision, "-m", message]
+	if (options?.ignoreImmutable) {
+		args.push("--ignore-immutable")
+	}
+	const result = await execute(args)
+	return {
+		...result,
+		command: `jj describe ${revision} -m "..."`,
+	}
+}
+
+export async function jjShowDescription(
+	revision: string,
+): Promise<{ subject: string; body: string }> {
+	const result = await execute([
+		"log",
+		"-r",
+		revision,
+		"--no-graph",
+		"-T",
+		"description",
+	])
+
+	if (!result.success) {
+		return { subject: "", body: "" }
+	}
+
+	const description = result.stdout.trim()
+	const lines = description.split("\n")
+	const subject = lines[0] ?? ""
+	const body = lines.slice(1).join("\n").trim()
+
+	return { subject, body }
+}
+
+export async function jjShowDescriptionStyled(
+	revision: string,
+): Promise<{ subject: string; body: string }> {
+	const styledTemplate = `if(empty, label("empty", "(empty) "), "") ++ if(description.first_line(), description.first_line(), label("description placeholder", "(no description set)"))`
+	const subjectResult = await execute([
+		"log",
+		"-r",
+		revision,
+		"--no-graph",
+		"--color",
+		"always",
+		"-T",
+		styledTemplate,
+	])
+
+	const bodyResult = await execute([
+		"log",
+		"-r",
+		revision,
+		"--no-graph",
+		"-T",
+		'if(description.first_line(), description.rest(), "")',
+	])
+
+	const subject = subjectResult.success ? subjectResult.stdout.trim() : ""
+	const body = bodyResult.success ? bodyResult.stdout.trim() : ""
+
+	return { subject, body }
+}
+
+export async function jjAbandon(revision: string): Promise<OperationResult> {
+	const args = ["abandon", revision]
+	const result = await execute(args)
+	return {
+		...result,
+		command: `jj ${args.join(" ")}`,
+	}
+}
+
+export async function fetchOpLog(limit?: number): Promise<string[]> {
+	const args = ["op", "log", "--color", "always"]
+	if (limit) {
+		args.push("--limit", String(limit))
+	}
+	const result = await execute(args)
+	if (!result.success) {
+		throw new Error(`jj op log failed: ${result.stderr}`)
+	}
+	return result.stdout.split("\n")
+}
+
+export async function fetchOpLogId(): Promise<string> {
+	const result = await execute([
+		"op",
+		"log",
+		"--limit",
+		"1",
+		"--no-graph",
+		"-T",
+		"self.id()",
+	])
+	return result.success ? result.stdout.trim() : ""
+}
+
+export async function jjUndo(): Promise<OperationResult> {
+	const args = ["undo"]
+	const result = await execute(args)
+	return {
+		...result,
+		command: "jj undo",
+	}
+}
+
+export async function jjRedo(): Promise<OperationResult> {
+	const args = ["redo"]
+	const result = await execute(args)
+	return {
+		...result,
+		command: "jj redo",
+	}
+}
+
+export async function jjOpRestore(
+	operationId: string,
+): Promise<OperationResult> {
+	const args = ["op", "restore", operationId]
+	const result = await execute(args)
+	return {
+		...result,
+		command: `jj op restore ${operationId}`,
+	}
+}
+
+export async function jjGitFetch(options?: {
+	allRemotes?: boolean
+}): Promise<OperationResult> {
+	const args = ["git", "fetch"]
+	if (options?.allRemotes) {
+		args.push("--all-remotes")
+	}
+	const result = await execute(args)
+	return {
+		...result,
+		command: `jj ${args.join(" ")}`,
+	}
+}
+
+export async function jjGitPush(options?: {
+	all?: boolean
+}): Promise<OperationResult> {
+	const args = ["git", "push"]
+	if (options?.all) {
+		args.push("--all")
+	}
+	const result = await execute(args)
+	return {
+		...result,
+		command: `jj ${args.join(" ")}`,
+	}
+}
+
+export async function jjRestore(
+	paths: string[],
+	revision?: string,
+): Promise<OperationResult> {
+	const args = ["restore"]
+	if (revision) {
+		args.push("-r", revision)
+	}
+	args.push(...paths)
+	const result = await execute(args)
+	return {
+		...result,
+		command: `jj ${args.join(" ")}`,
+	}
+}
+
+export interface DiffStats {
+	files: { path: string; insertions: number; deletions: number }[]
+	totalFiles: number
+	totalInsertions: number
+	totalDeletions: number
+}
+
+export async function jjDiffStats(revision: string): Promise<DiffStats> {
+	const result = await execute(["diff", "--stat", "-r", revision])
+
+	if (!result.success) {
+		return { files: [], totalFiles: 0, totalInsertions: 0, totalDeletions: 0 }
+	}
+
+	const lines = result.stdout.trim().split("\n")
+	const files: DiffStats["files"] = []
+	let totalFiles = 0
+	let totalInsertions = 0
+	let totalDeletions = 0
+
+	for (const line of lines) {
+		// Summary line: "14 files changed, 1448 insertions(+), 56 deletions(-)"
+		const summaryMatch = line.match(
+			/(\d+) files? changed(?:, (\d+) insertions?\(\+\))?(?:, (\d+) deletions?\(-\))?/,
+		)
+		if (summaryMatch) {
+			totalFiles = Number.parseInt(summaryMatch[1] ?? "0", 10)
+			totalInsertions = summaryMatch[2]
+				? Number.parseInt(summaryMatch[2], 10)
+				: 0
+			totalDeletions = summaryMatch[3]
+				? Number.parseInt(summaryMatch[3], 10)
+				: 0
+			continue
+		}
+
+		// File line: "src/foo.ts | 12 ++++----"
+		const fileMatch = line.match(/^(.+?)\s+\|\s+(\d+)\s+([+-]*)/)
+		if (fileMatch) {
+			const path = (fileMatch[1] ?? "").trim()
+			const plusCount = (fileMatch[3]?.match(/\+/g) || []).length
+			const minusCount = (fileMatch[3]?.match(/-/g) || []).length
+			files.push({ path, insertions: plusCount, deletions: minusCount })
+		}
+	}
+
+	return { files, totalFiles, totalInsertions, totalDeletions }
+}

package/src/commander/types.ts

@@ -0,0 +1,21 @@
+export interface Commit {
+	changeId: string
+	commitId: string
+	description: string
+	author: string
+	authorEmail: string
+	timestamp: string
+	lines: string[]
+	isWorkingCopy: boolean
+	immutable: boolean
+	empty: boolean
+}
+
+export type FileStatus = "added" | "modified" | "deleted" | "renamed" | "copied"
+
+export interface FileChange {
+	path: string
+	status: FileStatus
+	/** Original path for renamed/copied files */
+	oldPath?: string
+}

package/src/components/AnsiText.tsx

@@ -0,0 +1,77 @@
+import type { TerminalLine } from "ghostty-opentui"
+import { ptyToJson } from "ghostty-opentui"
+import { For, Show, createEffect, createMemo } from "solid-js"
+
+const PROFILE = process.env.KAJJI_PROFILE === "1"
+
+function profile(label: string) {
+	if (!PROFILE) return () => {}
+	const start = performance.now()
+	return (extra?: string) => {
+		const ms = (performance.now() - start).toFixed(2)
+		console.error(`[PROFILE] ${label}: ${ms}ms${extra ? ` (${extra})` : ""}`)
+	}
+}
+
+interface AnsiTextProps {
+	content: string
+	cols?: number
+	bold?: boolean
+	wrapMode?: "none" | "char" | "word"
+	maxLines?: number
+	onTotalLines?: (total: number) => void
+}
+
+export function AnsiText(props: AnsiTextProps) {
+	const allLines = createMemo(() => {
+		if (!props.content) return [] as TerminalLine[]
+		const endParse = profile("ptyToJson parse")
+		const result = ptyToJson(props.content, {
+			cols: props.cols ?? 9999,
+			rows: 1,
+		})
+		endParse(`${result.lines.length} lines from ${props.content.length} chars`)
+		return result.lines
+	})
+
+	createEffect(() => {
+		const total = allLines().length
+		props.onTotalLines?.(total)
+	})
+
+	const visibleLines = createMemo(() => {
+		const lines = allLines()
+		const limit = props.maxLines
+		if (limit !== undefined && lines.length > limit) {
+			return lines.slice(0, limit)
+		}
+		return lines
+	})
+
+	const renderSpans = (line: TerminalLine) => (
+		<For each={line.spans}>
+			{(span) => (
+				<span
+					style={{
+						fg: span.fg ?? undefined,
+						bg: span.bg ?? undefined,
+					}}
+				>
+					{span.text}
+				</span>
+			)}
+		</For>
+	)
+
+	return (
+		<For each={visibleLines()}>
+			{(line) => (
+				<text wrapMode={props.wrapMode ?? "word"}>
+					<Show when={props.bold} fallback={renderSpans(line)}>
+						<b>{renderSpans(line)}</b>
+					</Show>
+				</text>
+			)}
+		</For>
+	)
+}

package/src/components/BorderBox.tsx

@@ -0,0 +1,124 @@
+import type { BorderStyle } from "@opentui/core"
+import type { JSX } from "solid-js"
+import { Show, children as resolveChildren } from "solid-js"
+
+type Dimension = number | "auto" | `${number}%`
+type CornerContent = JSX.Element | string | (() => JSX.Element | string)
+
+interface BorderBoxProps {
+	topLeft?: CornerContent
+	topRight?: CornerContent
+	bottomLeft?: CornerContent
+	bottomRight?: CornerContent
+
+	border?: boolean
+	borderStyle?: BorderStyle
+	borderColor?: string
+	backgroundColor?: string
+	flexGrow?: number
+	flexDirection?: "row" | "column"
+	width?: Dimension
+	height?: Dimension
+	padding?: number
+	paddingLeft?: number
+	paddingRight?: number
+	paddingTop?: number
+	paddingBottom?: number
+	gap?: number
+	overflow?: "hidden" | "visible"
+	onMouseDown?: () => void
+
+	children: JSX.Element
+}
+
+export function BorderBox(props: BorderBoxProps) {
+	const resolved = resolveChildren(() => props.children)
+
+	const hasOverlays = () =>
+		props.topLeft || props.topRight || props.bottomLeft || props.bottomRight
+
+	const resolveCorner = (content: CornerContent | undefined) =>
+		typeof content === "function" ? content() : content
+
+	const renderCorner = (
+		position: "topLeft" | "topRight" | "bottomLeft" | "bottomRight",
+	) => {
+		const content = resolveCorner(props[position])
+		if (!content) return null
+
+		const isTop = position.startsWith("top")
+		const isLeft = position.endsWith("Left")
+
+		return (
+			<box
+				position="absolute"
+				top={isTop ? 0 : undefined}
+				bottom={!isTop ? 0 : undefined}
+				left={isLeft ? 1 : undefined}
+				right={!isLeft ? 1 : undefined}
+				zIndex={1}
+			>
+				{typeof content === "string" ? <text>{content}</text> : content}
+			</box>
+		)
+	}
+
+	if (!hasOverlays()) {
+		return (
+			<box
+				flexDirection={props.flexDirection ?? "column"}
+				flexGrow={props.flexGrow}
+				width={props.width}
+				height={props.height}
+				border={props.border}
+				borderStyle={props.borderStyle}
+				borderColor={props.borderColor}
+				backgroundColor={props.backgroundColor}
+				padding={props.padding}
+				paddingLeft={props.paddingLeft}
+				paddingRight={props.paddingRight}
+				paddingTop={props.paddingTop}
+				paddingBottom={props.paddingBottom}
+				gap={props.gap}
+				overflow={props.overflow}
+				onMouseDown={props.onMouseDown}
+			>
+				{resolved()}
+			</box>
+		)
+	}
+
+	return (
+		<box
+			position="relative"
+			flexDirection="column"
+			flexGrow={props.flexGrow}
+			width={props.width}
+			height={props.height}
+			onMouseDown={props.onMouseDown}
+		>
+			<Show when={props.topLeft}>{() => renderCorner("topLeft")}</Show>
+			<Show when={props.topRight}>{() => renderCorner("topRight")}</Show>
+			<Show when={props.bottomLeft}>{() => renderCorner("bottomLeft")}</Show>
+			<Show when={props.bottomRight}>{() => renderCorner("bottomRight")}</Show>
+
+			<box
+				flexDirection={props.flexDirection ?? "column"}
+				flexGrow={props.flexGrow}
+				border={props.border}
+				borderStyle={props.borderStyle}
+				borderColor={props.borderColor}
+				backgroundColor={props.backgroundColor}
+				padding={props.padding}
+				paddingLeft={props.paddingLeft}
+				paddingRight={props.paddingRight}
+				paddingTop={props.paddingTop}
+				paddingBottom={props.paddingBottom}
+				gap={props.gap}
+				overflow={props.overflow}
+			>
+				{resolved()}
+			</box>
+		</box>
+	)
+}

package/src/components/FileTreeList.tsx

@@ -0,0 +1,105 @@
+import { For, Show } from "solid-js"
+import { useFocus } from "../context/focus"
+import { useTheme } from "../context/theme"
+import { createDoubleClickDetector } from "../utils/double-click"
+import type { FlatFileNode } from "../utils/file-tree"
+
+const STATUS_CHARS: Record<string, string> = {
+	added: "A",
+	modified: "M",
+	deleted: "D",
+	renamed: "R",
+	copied: "C",
+}
+
+export interface FileTreeListProps {
+	files: () => FlatFileNode[]
+	selectedIndex: () => number
+	setSelectedIndex: (index: number) => void
+	collapsedPaths: () => Set<string>
+	toggleFolder: (path: string) => void
+}
+
+export function FileTreeList(props: FileTreeListProps) {
+	const focus = useFocus()
+	const { colors } = useTheme()
+
+	const statusColors = () => ({
+		added: colors().success,
+		modified: colors().warning,
+		deleted: colors().error,
+		renamed: colors().info,
+		copied: colors().info,
+	})
+
+	return (
+		<For each={props.files()}>
+			{(item, index) => {
+				const isSelected = () => index() === props.selectedIndex()
+				const node = item.node
+				const indent = "  ".repeat(item.visualDepth)
+				const isCollapsed = props.collapsedPaths().has(node.path)
+
+				const icon = node.isDirectory ? (isCollapsed ? "▶" : "▼") : " "
+
+				const statusChar = node.status
+					? (STATUS_CHARS[node.status] ?? " ")
+					: " "
+				const statusColor = node.status
+					? (statusColors()[
+							node.status as keyof ReturnType<typeof statusColors>
+						] ?? colors().text)
+					: colors().text
+
+				const handleDoubleClick = createDoubleClickDetector(() => {
+					if (node.isDirectory) {
+						props.toggleFolder(node.path)
+					} else {
+						focus.setPanel("detail")
+					}
+				})
+
+				const handleMouseDown = (e: { stopPropagation: () => void }) => {
+					e.stopPropagation()
+					props.setSelectedIndex(index())
+					if (node.isDirectory) {
+						props.toggleFolder(node.path)
+					} else {
+						handleDoubleClick()
+					}
+				}
+
+				return (
+					<box
+						backgroundColor={
+							isSelected() ? colors().selectionBackground : undefined
+						}
+						overflow="hidden"
+						onMouseDown={handleMouseDown}
+					>
+						<text>
+							<span style={{ fg: colors().textMuted }}>{indent}</span>
+							<span
+								style={{
+									fg: node.isDirectory ? colors().info : colors().textMuted,
+								}}
+							>
+								{icon}{" "}
+							</span>
+							<Show when={!node.isDirectory}>
+								<span style={{ fg: statusColor }}>{statusChar} </span>
+							</Show>
+							<span
+								style={{
+									fg: node.isDirectory ? colors().info : colors().text,
+								}}
+							>
+								{node.name}
+							</span>
+						</text>
+					</box>
+				)
+			}}
+		</For>
+	)
+}

package/src/components/Layout.tsx

@@ -0,0 +1,48 @@
+import type { JSX } from "solid-js"
+import { useTheme } from "../context/theme"
+import { StatusBar } from "./StatusBar"
+import { CommandLogPanel } from "./panels/CommandLogPanel"
+
+interface LayoutProps {
+	top: JSX.Element
+	bottom: JSX.Element
+	right: JSX.Element
+}
+
+export function Layout(props: LayoutProps) {
+	const { colors, style } = useTheme()
+
+	return (
+		<box
+			flexGrow={1}
+			flexDirection="column"
+			width="100%"
+			height="100%"
+			backgroundColor={colors().background}
+			padding={style().adaptToTerminal ? 0 : 1}
+			gap={0}
+		>
+			<box flexGrow={1} flexDirection="row" width="100%" gap={0}>
+				<box
+					flexGrow={1}
+					flexBasis={0}
+					height="100%"
+					flexDirection="column"
+					gap={0}
+				>
+					<box flexGrow={3} flexBasis={0}>
+						{props.top}
+					</box>
+					<box flexGrow={1} flexBasis={0}>
+						{props.bottom}
+					</box>
+				</box>
+				<box flexGrow={2} flexBasis={0} height="100%" flexDirection="column">
+					<box flexGrow={1}>{props.right}</box>
+					<CommandLogPanel />
+				</box>
+			</box>
+			<StatusBar />
+		</box>
+	)
+}