kajji 0.1.0

package/src/components/panels/MainArea.tsx

@@ -0,0 +1,354 @@
+import type { ScrollBoxRenderable } from "@opentui/core"
+import {
+	For,
+	Show,
+	createEffect,
+	createMemo,
+	createSignal,
+	onCleanup,
+	onMount,
+} from "solid-js"
+import type { DiffStats } from "../../commander/operations"
+import type { Commit } from "../../commander/types"
+import { useCommand } from "../../context/command"
+import { useFocus } from "../../context/focus"
+import { type CommitDetails, useSync } from "../../context/sync"
+import { useTheme } from "../../context/theme"
+import { AnsiText } from "../AnsiText"
+import { Panel } from "../Panel"
+
+const INITIAL_LIMIT = 1000
+const LIMIT_INCREMENT = 200
+const LOAD_THRESHOLD = 200
+
+function formatTimestamp(timestamp: string): string {
+	// Input: "2026-01-02 14:30:45 -0800"
+	// Output: "Thu Jan 2 14:30:45 2026 -0800"
+	const match = timestamp.match(
+		/(\d{4})-(\d{2})-(\d{2}) (\d{2}:\d{2}:\d{2}) (.+)/,
+	)
+	if (!match) return timestamp
+
+	const [, year, month, day, time, tz] = match
+	const date = new Date(`${year}-${month}-${day}T${time}`)
+	const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
+	const monthNames = [
+		"Jan",
+		"Feb",
+		"Mar",
+		"Apr",
+		"May",
+		"Jun",
+		"Jul",
+		"Aug",
+		"Sep",
+		"Oct",
+		"Nov",
+		"Dec",
+	]
+	const dayName = dayNames[date.getDay()]
+	const monthName = monthNames[date.getMonth()]
+	const dayNum = date.getDate()
+
+	return `${dayName} ${monthName} ${dayNum} ${time} ${year} ${tz}`
+}
+
+function FileStats(props: { stats: DiffStats; maxWidth: number }) {
+	const { colors } = useTheme()
+	const s = () => props.stats
+
+	const separatorWidth = 3 // " | "
+	const barMargin = 2 // margin on right side
+
+	// Scale +/- counts to fit within available width while preserving ratio
+	const scaleBar = (
+		insertions: number,
+		deletions: number,
+		availableWidth: number,
+	) => {
+		const total = insertions + deletions
+		if (total === 0) return { plus: 0, minus: 0 }
+		if (total <= availableWidth) return { plus: insertions, minus: deletions }
+
+		// Scale down proportionally
+		const scale = availableWidth / total
+		const scaledPlus = Math.round(insertions * scale)
+		const scaledMinus = Math.round(deletions * scale)
+
+		// Ensure at least 1 char if there were any changes
+		const plus = insertions > 0 ? Math.max(1, scaledPlus) : 0
+		const minus = deletions > 0 ? Math.max(1, scaledMinus) : 0
+
+		return { plus, minus }
+	}
+
+	return (
+		<>
+			<text> </text>
+			<For each={s().files}>
+				{(file) => {
+					// Calculate available width for bar based on actual path length
+					const pathLen = file.path.length
+					const availableBarWidth = Math.max(
+						1,
+						props.maxWidth - pathLen - separatorWidth - barMargin,
+					)
+					const bar = scaleBar(
+						file.insertions,
+						file.deletions,
+						availableBarWidth,
+					)
+					return (
+						<text wrapMode="none">
+							{file.path}
+							{" | "}
+							<span style={{ fg: colors().success }}>
+								{"+".repeat(bar.plus)}
+							</span>
+							<span style={{ fg: colors().error }}>
+								{"-".repeat(bar.minus)}
+							</span>
+						</text>
+					)
+				}}
+			</For>
+			<text>
+				{s().totalFiles} file{s().totalFiles !== 1 ? "s" : ""} changed
+				<Show when={s().totalInsertions > 0}>
+					{", "}
+					<span style={{ fg: colors().success }}>
+						{s().totalInsertions} insertion
+						{s().totalInsertions !== 1 ? "s" : ""}(+)
+					</span>
+				</Show>
+				<Show when={s().totalDeletions > 0}>
+					{", "}
+					<span style={{ fg: colors().error }}>
+						{s().totalDeletions} deletion
+						{s().totalDeletions !== 1 ? "s" : ""}(-)
+					</span>
+				</Show>
+			</text>
+			<text fg={colors().textMuted}>{"─".repeat(props.maxWidth)}</text>
+		</>
+	)
+}
+
+function CommitHeader(props: {
+	commit: Commit
+	details: CommitDetails | null
+	maxWidth: number
+}) {
+	const { colors } = useTheme()
+
+	// Stale-while-revalidate: show details as-is (may be stale from previous commit)
+	// until new details arrive. This prevents flash during navigation.
+	const subject = () => props.details?.subject || props.commit.description
+	const stats = () => props.details?.stats
+
+	const bodyLines = createMemo(() => {
+		const b = props.details?.body
+		return b ? b.split("\n") : null
+	})
+
+	return (
+		<box flexDirection="column" flexShrink={0}>
+			<text>
+				<span style={{ fg: colors().warning }}>{props.commit.changeId}</span>{" "}
+				<span style={{ fg: colors().textMuted }}>{props.commit.commitId}</span>
+			</text>
+			<text>
+				{"Author: "}
+				<span style={{ fg: colors().secondary }}>
+					{`${props.commit.author} <${props.commit.authorEmail}>`}
+				</span>
+			</text>
+			<text>
+				{"Date:   "}
+				<span style={{ fg: colors().secondary }}>
+					{formatTimestamp(props.commit.timestamp)}
+				</span>
+			</text>
+			<text> </text>
+			<box flexDirection="row">
+				<text>{"    "}</text>
+				<AnsiText content={subject()} wrapMode="none" />
+			</box>
+			<Show when={bodyLines()}>
+				{(lines: () => string[]) => (
+					<box flexDirection="column">
+						<text> </text>
+						<For each={lines()}>
+							{(line) => (
+								<text>
+									{"    "}
+									{line}
+								</text>
+							)}
+						</For>
+					</box>
+				)}
+			</Show>
+			<Show when={stats()?.totalFiles ? stats() : undefined}>
+				{(s: () => DiffStats) => (
+					<box flexDirection="column">
+						<FileStats stats={s()} maxWidth={props.maxWidth} />
+					</box>
+				)}
+			</Show>
+			<text> </text>
+		</box>
+	)
+}
+
+export function MainArea() {
+	const {
+		activeCommit,
+		commitDetails,
+		diff,
+		diffLoading,
+		diffError,
+		diffLineCount,
+		mainAreaWidth,
+	} = useSync()
+	const { colors } = useTheme()
+	const focus = useFocus()
+	const command = useCommand()
+
+	let scrollRef: ScrollBoxRenderable | undefined
+
+	const [scrollTop, setScrollTop] = createSignal(0)
+	const [limit, setLimit] = createSignal(INITIAL_LIMIT)
+	const [currentCommitId, setCurrentCommitId] = createSignal<string | null>(
+		null,
+	)
+
+	createEffect(() => {
+		const commit = activeCommit()
+		if (commit && commit.changeId !== currentCommitId()) {
+			setCurrentCommitId(commit.changeId)
+			setScrollTop(0)
+			setLimit(INITIAL_LIMIT)
+			scrollRef?.scrollTo(0)
+		}
+	})
+
+	const loadMoreIfNeeded = () => {
+		if (!scrollRef) return
+		const viewportHeight = scrollRef.viewport?.height ?? 30
+		const scrollHeight = scrollRef.scrollHeight ?? 0
+		const currentScroll = scrollRef.scrollTop ?? 0
+
+		const distanceFromBottom = scrollHeight - (currentScroll + viewportHeight)
+		if (distanceFromBottom < LOAD_THRESHOLD && limit() < diffLineCount()) {
+			setLimit((l) => Math.min(l + LIMIT_INCREMENT, diffLineCount()))
+		}
+	}
+
+	onMount(() => {
+		const pollInterval = setInterval(() => {
+			if (scrollRef) {
+				const currentScroll = scrollRef.scrollTop ?? 0
+				if (currentScroll !== scrollTop()) {
+					setScrollTop(currentScroll)
+					loadMoreIfNeeded()
+				}
+			}
+		}, 100)
+		onCleanup(() => clearInterval(pollInterval))
+	})
+
+	const isFocused = () => focus.isPanel("detail")
+
+	command.register(() => [
+		{
+			id: "detail.page_up",
+			title: "Page up",
+			keybind: "nav_page_up",
+			context: "detail",
+			type: "navigation",
+			onSelect: () => scrollRef?.scrollBy(-0.5, "viewport"),
+		},
+		{
+			id: "detail.page_down",
+			title: "Page down",
+			keybind: "nav_page_down",
+			context: "detail",
+			type: "navigation",
+			onSelect: () => {
+				scrollRef?.scrollBy(0.5, "viewport")
+				loadMoreIfNeeded()
+			},
+		},
+		{
+			id: "detail.scroll_down",
+			title: "scroll down",
+			keybind: "nav_down",
+			context: "detail",
+			type: "navigation",
+			visibility: "help-only",
+			onSelect: () => {
+				scrollRef?.scrollTo((scrollTop() || 0) + 1)
+				setScrollTop((scrollTop() || 0) + 1)
+				loadMoreIfNeeded()
+			},
+		},
+		{
+			id: "detail.scroll_up",
+			title: "scroll up",
+			keybind: "nav_up",
+			context: "detail",
+			type: "navigation",
+			visibility: "help-only",
+			onSelect: () => {
+				const newPos = Math.max(0, (scrollTop() || 0) - 1)
+				scrollRef?.scrollTo(newPos)
+				setScrollTop(newPos)
+			},
+		},
+	])
+
+	return (
+		<Panel title="Detail" hotkey="3" panelId="detail" focused={isFocused()}>
+			<Show when={diffLoading() && !diff()}>
+				<text>Loading diff...</text>
+			</Show>
+			<Show when={diffError()}>
+				<text>Error: {diffError()}</text>
+			</Show>
+			<Show when={diff() || (!diffLoading() && !diffError())}>
+				<scrollbox
+					ref={scrollRef}
+					focused={isFocused()}
+					flexGrow={1}
+					scrollbarOptions={{
+						trackOptions: {
+							backgroundColor: colors().scrollbarTrack,
+							foregroundColor: colors().scrollbarThumb,
+						},
+					}}
+				>
+					<Show when={activeCommit()}>
+						{(commit: () => Commit) => (
+							<CommitHeader
+								commit={commit()}
+								details={commitDetails()}
+								maxWidth={mainAreaWidth()}
+							/>
+						)}
+					</Show>
+					<Show when={diff()}>
+						<ghostty-terminal
+							ansi={diff() ?? ""}
+							cols={mainAreaWidth()}
+							limit={limit()}
+						/>
+					</Show>
+					<Show when={!diff()}>
+						<text>No changes in this commit.</text>
+					</Show>
+				</scrollbox>
+			</Show>
+		</Panel>
+	)
+}

package/src/context/command.tsx

@@ -0,0 +1,106 @@
+import { useKeyboard } from "@opentui/solid"
+import { type Accessor, createMemo, createSignal, onCleanup } from "solid-js"
+import type { KeybindConfigKey } from "../keybind"
+import { useDialog } from "./dialog"
+import { useFocus } from "./focus"
+import { createSimpleContext } from "./helper"
+import { useKeybind } from "./keybind"
+import type { CommandType, CommandVisibility, Context, Panel } from "./types"
+
+export type { CommandType, CommandVisibility, Context }
+
+export type CommandOption = {
+	id: string
+	title: string
+	keybind?: KeybindConfigKey
+	context: Context
+	type: CommandType
+	panel?: Panel
+	visibility?: CommandVisibility
+	onSelect: () => void
+}
+
+function contextMatches(
+	commandContext: Context,
+	activeContext: Context,
+): boolean {
+	if (commandContext === "global") return true
+	if (commandContext === activeContext) return true
+	return activeContext.startsWith(`${commandContext}.`)
+}
+
+export const { use: useCommand, provider: CommandProvider } =
+	createSimpleContext({
+		name: "Command",
+		init: () => {
+			const [registrations, setRegistrations] = createSignal<
+				Accessor<CommandOption[]>[]
+			>([])
+			const keybind = useKeybind()
+			const focus = useFocus()
+			const dialog = useDialog()
+
+			const allCommands = createMemo(() => {
+				return registrations().flatMap((r) => r())
+			})
+
+			useKeyboard((evt) => {
+				if (evt.defaultPrevented) return
+
+				const dialogOpen = dialog.isOpen()
+				const activeCtx = focus.activeContext()
+				const activePanel = focus.panel()
+
+				let mostSpecificMatch: CommandOption | null = null
+				let highestContextSpecificity = -1
+
+				for (const cmd of allCommands()) {
+					if (dialogOpen && cmd.keybind !== "help") {
+						continue
+					}
+
+					if (!dialogOpen) {
+						if (!contextMatches(cmd.context, activeCtx)) {
+							continue
+						}
+						if (cmd.panel && cmd.panel !== activePanel) {
+							continue
+						}
+					}
+
+					if (cmd.keybind && keybind.match(cmd.keybind, evt)) {
+						const contextSpecificity =
+							cmd.context === activeCtx
+								? Number.MAX_SAFE_INTEGER
+								: cmd.context.length
+						if (contextSpecificity > highestContextSpecificity) {
+							mostSpecificMatch = cmd
+							highestContextSpecificity = contextSpecificity
+						}
+					}
+				}
+
+				if (mostSpecificMatch) {
+					evt.preventDefault()
+					mostSpecificMatch.onSelect()
+				}
+			})
+
+			return {
+				register: (cb: () => CommandOption[]) => {
+					const accessor = createMemo(cb)
+					setRegistrations((arr) => [...arr, accessor])
+					onCleanup(() => {
+						setRegistrations((arr) => arr.filter((r) => r !== accessor))
+					})
+				},
+
+				trigger: (id: string) => {
+					const cmd = allCommands().find((c) => c.id === id)
+					cmd?.onSelect()
+				},
+
+				all: allCommands,
+			}
+		},
+	})

package/src/context/commandlog.tsx

@@ -0,0 +1,45 @@
+import { createSignal } from "solid-js"
+import type { OperationResult } from "../commander/operations"
+import { createSimpleContext } from "./helper"
+
+export interface CommandLogEntry {
+	id: string
+	command: string
+	output: string
+	success: boolean
+	timestamp: Date
+}
+
+export const { use: useCommandLog, provider: CommandLogProvider } =
+	createSimpleContext({
+		name: "CommandLog",
+		init: () => {
+			const [entries, setEntries] = createSignal<CommandLogEntry[]>([])
+
+			const addEntry = (result: OperationResult) => {
+				const entry: CommandLogEntry = {
+					id: crypto.randomUUID(),
+					command: result.command,
+					output: result.success
+						? result.stdout.trim() || "Done"
+						: result.stderr.trim() || result.stdout.trim() || "Failed",
+					success: result.success,
+					timestamp: new Date(),
+				}
+				setEntries((prev) => [...prev, entry])
+			}
+
+			const clear = () => {
+				setEntries([])
+			}
+
+			const latest = () => entries().at(-1)
+
+			return {
+				entries,
+				addEntry,
+				clear,
+				latest,
+			}
+		},
+	})

package/src/context/dialog.tsx

@@ -0,0 +1,217 @@
+import { RGBA } from "@opentui/core"
+import { useKeyboard, useRenderer } from "@opentui/solid"
+import {
+	type JSX,
+	type ParentProps,
+	Show,
+	createSignal,
+	onCleanup,
+	onMount,
+} from "solid-js"
+import { createSimpleContext } from "./helper"
+import { useTheme } from "./theme"
+
+export interface DialogHint {
+	key: string
+	label: string
+}
+
+interface DialogState {
+	id?: string
+	render: () => JSX.Element
+	onClose?: () => void
+	hints?: DialogHint[]
+}
+
+interface ConfirmOptions {
+	message: string
+}
+
+function ConfirmDialogContent(props: {
+	message: string
+	onResolve: (confirmed: boolean) => void
+}) {
+	const { colors, style } = useTheme()
+
+	useKeyboard((evt) => {
+		if (evt.name === "y" || evt.name === "return") {
+			evt.preventDefault()
+			props.onResolve(true)
+		} else if (evt.name === "n" || evt.name === "escape") {
+			evt.preventDefault()
+			props.onResolve(false)
+		}
+	})
+
+	return (
+		<box
+			flexDirection="column"
+			border
+			borderStyle={style().panel.borderStyle}
+			borderColor={colors().borderFocused}
+			backgroundColor={colors().background}
+			paddingLeft={2}
+			width="50%"
+		>
+			<text fg={colors().text}>{props.message}</text>
+		</box>
+	)
+}
+
+export const { use: useDialog, provider: DialogProvider } = createSimpleContext(
+	{
+		name: "Dialog",
+		init: () => {
+			const [stack, setStack] = createSignal<DialogState[]>([])
+
+			const close = () => {
+				const current = stack().at(-1)
+				current?.onClose?.()
+				setStack((s) => s.slice(0, -1))
+			}
+
+			useKeyboard((evt) => {
+				if (stack().length > 0 && evt.name === "escape") {
+					evt.preventDefault()
+					close()
+				}
+			})
+
+			const open = (
+				render: () => JSX.Element,
+				options?: { id?: string; onClose?: () => void; hints?: DialogHint[] },
+			) => {
+				setStack((s) => [
+					...s,
+					{
+						id: options?.id,
+						render,
+						onClose: options?.onClose,
+						hints: options?.hints,
+					},
+				])
+			}
+
+			const toggle = (
+				id: string,
+				render: () => JSX.Element,
+				options?: { onClose?: () => void; hints?: DialogHint[] },
+			) => {
+				const current = stack().at(-1)
+				if (current?.id === id) {
+					close()
+				} else {
+					open(render, { id, onClose: options?.onClose, hints: options?.hints })
+				}
+			}
+
+			const confirm = (options: ConfirmOptions): Promise<boolean> => {
+				return new Promise((resolve) => {
+					let resolved = false
+					const handleResolve = (confirmed: boolean) => {
+						if (resolved) return
+						resolved = true
+						close()
+						resolve(confirmed)
+					}
+					open(
+						() => (
+							<ConfirmDialogContent
+								message={options.message}
+								onResolve={handleResolve}
+							/>
+						),
+						{
+							id: "confirm-dialog",
+							hints: [
+								{ key: "y", label: "confirm" },
+								{ key: "n", label: "cancel" },
+							],
+							onClose: () => {
+								if (!resolved) {
+									resolved = true
+									resolve(false)
+								}
+							},
+						},
+					)
+				})
+			}
+
+			return {
+				isOpen: () => stack().length > 0,
+				current: () => stack().at(-1),
+				hints: () => stack().at(-1)?.hints ?? [],
+				setHints: (hints: DialogHint[]) => {
+					setStack((s) => {
+						if (s.length === 0) return s
+						const last = s[s.length - 1]
+						if (!last) return s
+						return [...s.slice(0, -1), { ...last, hints }]
+					})
+				},
+				open,
+				toggle,
+				close,
+				confirm,
+				clear: () => {
+					for (const item of stack()) {
+						item.onClose?.()
+					}
+					setStack([])
+				},
+			}
+		},
+	},
+)
+
+function DialogBackdrop(props: { onClose: () => void; children: JSX.Element }) {
+	const renderer = useRenderer()
+	const { style } = useTheme()
+	const [dimensions, setDimensions] = createSignal({
+		width: renderer.width,
+		height: renderer.height,
+	})
+
+	onMount(() => {
+		const handleResize = (width: number, height: number) => {
+			setDimensions({ width, height })
+		}
+		renderer.on("resize", handleResize)
+		onCleanup(() => renderer.off("resize", handleResize))
+	})
+
+	const overlayColor = () =>
+		RGBA.fromInts(0, 0, 0, style().dialog.overlayOpacity)
+
+	return (
+		<box
+			position="absolute"
+			left={0}
+			top={0}
+			width={dimensions().width}
+			height={dimensions().height}
+			backgroundColor={overlayColor()}
+			flexDirection="column"
+			justifyContent="center"
+			alignItems="center"
+		>
+			{props.children}
+		</box>
+	)
+}
+
+export function DialogContainer(props: ParentProps) {
+	const dialog = useDialog()
+
+	return (
+		<box flexGrow={1} width="100%" height="100%">
+			{props.children}
+			<Show when={dialog.isOpen()}>
+				<DialogBackdrop onClose={dialog.close}>
+					{dialog.current()?.render()}
+				</DialogBackdrop>
+			</Show>
+		</box>
+	)
+}