kajji 0.1.0

package/src/components/Panel.tsx

@@ -0,0 +1,143 @@
+import { For, type JSX, Show } from "solid-js"
+import { useCommand } from "../context/command"
+import { useFocus } from "../context/focus"
+import { useTheme } from "../context/theme"
+import type { Context, Panel as PanelType } from "../context/types"
+import { BorderBox } from "./BorderBox"
+
+interface Tab {
+	id: string
+	label: string
+	context: Context
+}
+
+interface PanelProps {
+	title?: string
+	tabs?: Tab[]
+	activeTab?: string
+	onTabChange?: (tabId: string) => void
+	panelId?: PanelType
+	hotkey: string
+	focused: boolean
+	children: JSX.Element
+}
+
+export function Panel(props: PanelProps) {
+	const { colors, style } = useTheme()
+	const command = useCommand()
+	const focus = useFocus()
+
+	const hasTabs = () => props.tabs && props.tabs.length > 1
+
+	const cycleTab = (direction: 1 | -1) => {
+		if (!props.tabs || props.tabs.length <= 1 || !props.onTabChange) return
+		const currentIndex = props.tabs.findIndex((t) => t.id === props.activeTab)
+		const nextIndex =
+			(currentIndex + direction + props.tabs.length) % props.tabs.length
+		const nextTab = props.tabs[nextIndex]
+		if (nextTab) props.onTabChange(nextTab.id)
+	}
+
+	command.register(() => {
+		if (!hasTabs() || !props.panelId) return []
+
+		return [
+			{
+				id: `${props.panelId}.next_tab`,
+				title: "next tab",
+				keybind: "next_tab",
+				context: props.panelId,
+				type: "navigation",
+				panel: props.panelId,
+				visibility: "help-only" as const,
+				onSelect: () => cycleTab(1),
+			},
+			{
+				id: `${props.panelId}.prev_tab`,
+				title: "previous tab",
+				keybind: "prev_tab",
+				context: props.panelId,
+				type: "navigation",
+				panel: props.panelId,
+				visibility: "help-only" as const,
+				onSelect: () => cycleTab(-1),
+			},
+		]
+	})
+
+	const renderTitle = () => {
+		if (hasTabs()) {
+			return (
+				<text>
+					<Show
+						when={props.focused}
+						fallback={
+							<span style={{ fg: colors().textMuted }}>[{props.hotkey}]</span>
+						}
+					>
+						<span style={{ fg: colors().primary }}>[{props.hotkey}]</span>
+					</Show>
+					<span style={{ fg: colors().textMuted }}>─</span>
+					<For each={props.tabs}>
+						{(tab, i) => (
+							<>
+								<Show when={i() > 0}>
+									<span style={{ fg: colors().textMuted }}> </span>
+								</Show>
+								<span
+									style={{
+										fg:
+											tab.id === props.activeTab
+												? colors().primary
+												: colors().textMuted,
+									}}
+								>
+									{tab.label}
+								</span>
+							</>
+						)}
+					</For>
+				</text>
+			)
+		}
+
+		return (
+			<text>
+				<Show
+					when={props.focused}
+					fallback={
+						<span style={{ fg: colors().textMuted }}>
+							[{props.hotkey}]─{props.title}
+						</span>
+					}
+				>
+					<span style={{ fg: colors().primary }}>
+						[{props.hotkey}]─{props.title}
+					</span>
+				</Show>
+			</text>
+		)
+	}
+
+	const handleMouseDown = () => {
+		if (props.panelId) {
+			focus.setPanel(props.panelId)
+		}
+	}
+
+	return (
+		<BorderBox
+			topLeft={renderTitle}
+			border
+			borderStyle={style().panel.borderStyle}
+			borderColor={props.focused ? colors().borderFocused : colors().border}
+			flexGrow={1}
+			height="100%"
+			overflow="hidden"
+			gap={0}
+			onMouseDown={handleMouseDown}
+		>
+			{props.children}
+		</BorderBox>
+	)
+}

package/src/components/RevisionPicker.tsx

@@ -0,0 +1,165 @@
+import type { ScrollBoxRenderable } from "@opentui/core"
+import { useKeyboard } from "@opentui/solid"
+import { For, Show, createEffect, createSignal, onMount } from "solid-js"
+import type { Commit } from "../commander/types"
+import { useTheme } from "../context/theme"
+import { AnsiText } from "./AnsiText"
+
+export interface RevisionPickerProps {
+	commits: Commit[]
+	defaultRevision?: string
+	selectedRevision?: string
+	onSelect?: (commit: Commit) => void
+	focused?: boolean
+	height?: number
+}
+
+export function RevisionPicker(props: RevisionPickerProps) {
+	const { colors } = useTheme()
+
+	const findDefaultIndex = () => {
+		if (props.defaultRevision) {
+			const idx = props.commits.findIndex(
+				(c) => c.changeId === props.defaultRevision,
+			)
+			return idx >= 0 ? idx : 0
+		}
+		return 0
+	}
+
+	const [selectedIndex, setSelectedIndex] = createSignal(findDefaultIndex())
+
+	let scrollRef: ScrollBoxRenderable | undefined
+	const [scrollTop, setScrollTop] = createSignal(0)
+
+	const scrollToIndex = (index: number, force = false) => {
+		const commitList = props.commits
+		if (!scrollRef || commitList.length === 0) return
+
+		let lineOffset = 0
+		const clampedIndex = Math.min(index, commitList.length)
+		for (const commit of commitList.slice(0, clampedIndex)) {
+			lineOffset += commit.lines.length
+		}
+
+		const margin = 2
+		const refAny = scrollRef as unknown as Record<string, unknown>
+		const viewportHeight =
+			(typeof refAny.height === "number" ? refAny.height : null) ??
+			(typeof refAny.rows === "number" ? refAny.rows : null) ??
+			10
+		const currentScrollTop = scrollTop()
+
+		if (force) {
+			const targetScroll = Math.max(0, lineOffset - margin)
+			scrollRef.scrollTo(targetScroll)
+			setScrollTop(targetScroll)
+			return
+		}
+
+		const visibleStart = currentScrollTop
+		const visibleEnd = currentScrollTop + viewportHeight - 1
+		const safeStart = visibleStart + margin
+		const safeEnd = visibleEnd - margin
+
+		let newScrollTop = currentScrollTop
+		if (lineOffset < safeStart) {
+			newScrollTop = Math.max(0, lineOffset - margin)
+		} else if (lineOffset > safeEnd) {
+			newScrollTop = Math.max(0, lineOffset - viewportHeight + margin + 1)
+		}
+
+		if (newScrollTop !== currentScrollTop) {
+			scrollRef.scrollTo(newScrollTop)
+			setScrollTop(newScrollTop)
+		}
+	}
+
+	createEffect(() => {
+		const _ = props.commits
+		const __ = props.defaultRevision
+		setSelectedIndex(findDefaultIndex())
+	})
+
+	onMount(() => {
+		setTimeout(() => scrollToIndex(selectedIndex(), true), 1)
+	})
+
+	createEffect(() => {
+		scrollToIndex(selectedIndex())
+	})
+
+	const selectPrev = () => {
+		setSelectedIndex((i) => {
+			const newIndex = Math.max(0, i - 1)
+			const commit = props.commits[newIndex]
+			if (commit) props.onSelect?.(commit)
+			return newIndex
+		})
+	}
+
+	const selectNext = () => {
+		setSelectedIndex((i) => {
+			const newIndex = Math.min(props.commits.length - 1, i + 1)
+			const commit = props.commits[newIndex]
+			if (commit) props.onSelect?.(commit)
+			return newIndex
+		})
+	}
+
+	useKeyboard((evt) => {
+		if (!props.focused) return
+
+		if (evt.name === "j" || evt.name === "down") {
+			evt.preventDefault()
+			selectNext()
+		} else if (evt.name === "k" || evt.name === "up") {
+			evt.preventDefault()
+			selectPrev()
+		}
+	})
+
+	createEffect(() => {
+		const commit = props.commits[selectedIndex()]
+		if (commit) props.onSelect?.(commit)
+	})
+
+	return (
+		<Show
+			when={props.commits.length > 0}
+			fallback={<text fg={colors().textMuted}>No commits</text>}
+		>
+			<scrollbox
+				ref={scrollRef}
+				focused={props.focused}
+				flexGrow={1}
+				height={props.height}
+				scrollbarOptions={{ visible: false }}
+			>
+				<For each={props.commits}>
+					{(commit, index) => {
+						const isSelected = () => index() === selectedIndex()
+						return (
+							<For each={commit.lines}>
+								{(line) => (
+									<box
+										backgroundColor={
+											isSelected() ? colors().selectionBackground : undefined
+										}
+										overflow="hidden"
+									>
+										<AnsiText
+											content={line}
+											bold={commit.isWorkingCopy}
+											wrapMode="none"
+										/>
+									</box>
+								)}
+							</For>
+						)
+					}}
+				</For>
+			</scrollbox>
+		</Show>
+	)
+}

package/src/components/StatusBar.tsx

@@ -0,0 +1,158 @@
+import { For, Show, createMemo, createSignal, onCleanup } from "solid-js"
+import { useCommand } from "../context/command"
+import { useDialog } from "../context/dialog"
+import { useFocus } from "../context/focus"
+import { useKeybind } from "../context/keybind"
+import { useLoading } from "../context/loading"
+import { useTheme } from "../context/theme"
+import type { Context } from "../context/types"
+
+function contextMatches(
+	commandContext: Context,
+	activeContext: Context,
+): boolean {
+	if (commandContext === "global") return true
+	return commandContext === activeContext
+}
+
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
+
+export function StatusBar() {
+	const command = useCommand()
+	const dialog = useDialog()
+	const focus = useFocus()
+	const keybind = useKeybind()
+	const loading = useLoading()
+	const { colors, style } = useTheme()
+
+	const [spinnerFrame, setSpinnerFrame] = createSignal(0)
+
+	let spinnerInterval: ReturnType<typeof setInterval> | null = null
+	const startSpinner = () => {
+		if (spinnerInterval) return
+		spinnerInterval = setInterval(() => {
+			setSpinnerFrame((f) => (f + 1) % SPINNER_FRAMES.length)
+		}, 80)
+	}
+	const stopSpinner = () => {
+		if (spinnerInterval) {
+			clearInterval(spinnerInterval)
+			spinnerInterval = null
+		}
+	}
+
+	createMemo(() => {
+		if (loading.isLoading()) {
+			startSpinner()
+		} else {
+			stopSpinner()
+		}
+	})
+
+	onCleanup(() => stopSpinner())
+
+	const relevantCommands = createMemo(() => {
+		const all = command.all()
+		const activeCtx = focus.activeContext()
+		const activePanel = focus.panel()
+
+		const isRelevant = (cmd: (typeof all)[0]) => {
+			if (!cmd.keybind) return false
+			if (!contextMatches(cmd.context, activeCtx)) return false
+			if (cmd.panel && cmd.panel !== activePanel) return false
+			return true
+		}
+
+		const isVisibleInStatusBar = (cmd: (typeof all)[0]) => {
+			const v = cmd.visibility ?? "all"
+			return v === "all" || v === "status-only"
+		}
+
+		const contextCmds = all.filter(
+			(cmd) => isRelevant(cmd) && cmd.context !== "global",
+		)
+		const globalCmds = all.filter(
+			(cmd) => isRelevant(cmd) && cmd.context === "global",
+		)
+
+		const seen = new Set<string>()
+		return [...contextCmds, ...globalCmds].filter((cmd) => {
+			if (!isVisibleInStatusBar(cmd)) return false
+			if (seen.has(cmd.id)) return false
+			seen.add(cmd.id)
+			return true
+		})
+	})
+
+	const separator = () => style().statusBar.separator
+	const gap = () => (separator() ? 0 : 3)
+
+	const dialogHints = createMemo(() => {
+		const hints = dialog.hints()
+		if (hints.length === 0) return []
+		return [
+			...hints,
+			{ key: "esc", label: "close" },
+			{ key: "?", label: "help" },
+		]
+	})
+
+	return (
+		<box
+			height={1}
+			flexShrink={0}
+			paddingLeft={1}
+			paddingRight={1}
+			flexDirection="row"
+			gap={gap()}
+		>
+			<Show when={loading.isLoading()}>
+				<text>
+					<span style={{ fg: colors().warning }}>
+						{SPINNER_FRAMES[spinnerFrame()]}
+					</span>{" "}
+					<span style={{ fg: colors().text }}>{loading.loadingText()}</span>
+					<Show when={separator()}>
+						<span style={{ fg: colors().textMuted }}>{` ${separator()} `}</span>
+					</Show>
+				</text>
+			</Show>
+			<Show
+				when={dialog.isOpen() && dialogHints().length > 0}
+				fallback={
+					<For each={relevantCommands()}>
+						{(cmd, index) => (
+							<text>
+								<span style={{ fg: colors().primary }}>
+									{cmd.keybind ? keybind.print(cmd.keybind) : ""}
+								</span>{" "}
+								<span style={{ fg: colors().text }}>{cmd.title}</span>
+								<Show
+									when={separator() && index() < relevantCommands().length - 1}
+								>
+									<span style={{ fg: colors().textMuted }}>
+										{` ${separator()} `}
+									</span>
+								</Show>
+							</text>
+						)}
+					</For>
+				}
+			>
+				<For each={dialogHints()}>
+					{(hint, index) => (
+						<text>
+							<span style={{ fg: colors().primary }}>{hint.key}</span>{" "}
+							<span style={{ fg: colors().text }}>{hint.label}</span>
+							<Show when={separator() && index() < dialogHints().length - 1}>
+								<span style={{ fg: colors().textMuted }}>
+									{` ${separator()} `}
+								</span>
+							</Show>
+						</text>
+					)}
+				</For>
+			</Show>
+		</box>
+	)
+}

package/src/components/modals/BookmarkNameModal.tsx

@@ -0,0 +1,170 @@
+import { type InputRenderable, RGBA } from "@opentui/core"
+import { useKeyboard } from "@opentui/solid"
+import { Show, createSignal, onMount } from "solid-js"
+import type { Commit } from "../../commander/types"
+import { useDialog } from "../../context/dialog"
+import { useTheme } from "../../context/theme"
+import { RevisionPicker } from "../RevisionPicker"
+
+interface BookmarkNameModalProps {
+	title: string
+	commits?: Commit[]
+	defaultRevision?: string
+	initialValue?: string
+	placeholder?: string
+	width?: number | "auto" | `${number}%`
+	height?: number
+	onSave: (name: string, revision?: string) => void
+}
+
+export function BookmarkNameModal(props: BookmarkNameModalProps) {
+	const dialog = useDialog()
+	const { colors, style } = useTheme()
+
+	const hasRevisionPicker = () => (props.commits?.length ?? 0) > 0
+
+	const [selectedRevision, setSelectedRevision] = createSignal(
+		props.defaultRevision ?? props.commits?.[0]?.changeId ?? "",
+	)
+	const [name, setName] = createSignal(props.initialValue ?? "")
+	const [error, setError] = createSignal<string | null>(null)
+	const [focusedField, setFocusedField] = createSignal<"name" | "picker">(
+		"name",
+	)
+
+	let inputRef: InputRenderable | undefined
+
+	const focusInputAtEnd = (ref: InputRenderable | undefined) => {
+		if (!ref) return
+		ref.focus()
+		ref.cursorPosition = ref.value.length
+	}
+
+	onMount(() => {
+		setTimeout(() => focusInputAtEnd(inputRef), 1)
+	})
+
+	const generatedName = () => {
+		if (!hasRevisionPicker()) return props.placeholder ?? ""
+		const rev = selectedRevision()
+		return rev ? `push-${rev.slice(0, 8)}` : "push-bookmark"
+	}
+
+	const handleSave = () => {
+		const trimmed = name().trim()
+		const finalName = trimmed || generatedName()
+
+		if (!finalName) {
+			setError("Name cannot be empty")
+			return
+		}
+		if (/\s/.test(finalName)) {
+			setError("Name cannot contain spaces")
+			return
+		}
+
+		dialog.close()
+		if (hasRevisionPicker()) {
+			props.onSave(finalName, selectedRevision())
+		} else {
+			props.onSave(finalName)
+		}
+	}
+
+	useKeyboard((evt) => {
+		if (evt.name === "escape") {
+			evt.preventDefault()
+			dialog.close()
+		} else if (evt.name === "tab" && hasRevisionPicker()) {
+			evt.preventDefault()
+			if (focusedField() === "name") {
+				setFocusedField("picker")
+			} else {
+				setFocusedField("name")
+				focusInputAtEnd(inputRef)
+			}
+		} else if (evt.name === "return" && focusedField() === "picker") {
+			evt.preventDefault()
+			handleSave()
+		}
+	})
+
+	const handleRevisionSelect = (commit: Commit) => {
+		setSelectedRevision(commit.changeId)
+	}
+
+	const pickerHeight = () => props.height ?? 10
+
+	return (
+		<box flexDirection="column" width={props.width ?? "60%"} gap={0}>
+			<box
+				flexDirection="column"
+				border
+				borderStyle={style().panel.borderStyle}
+				borderColor={
+					focusedField() === "name" || !hasRevisionPicker()
+						? colors().borderFocused
+						: colors().border
+				}
+				backgroundColor={colors().background}
+				height={3}
+				padding={0}
+				title={props.title}
+			>
+				<input
+					ref={inputRef}
+					value={props.initialValue ?? ""}
+					placeholder={generatedName()}
+					onInput={(value) => {
+						setName(value)
+						setError(null)
+					}}
+					onSubmit={handleSave}
+					cursorColor={colors().primary}
+					textColor={colors().text}
+					focusedTextColor={colors().text}
+					focusedBackgroundColor={RGBA.fromInts(0, 0, 0, 0)}
+					flexGrow={1}
+				/>
+			</box>
+
+			<Show when={error()}>
+				<box
+					border
+					borderStyle={style().panel.borderStyle}
+					borderColor={colors().error}
+					backgroundColor={colors().background}
+					padding={0}
+					paddingLeft={1}
+				>
+					<text fg={colors().error}>{error()}</text>
+				</box>
+			</Show>
+
+			<Show when={hasRevisionPicker()}>
+				<box
+					flexDirection="column"
+					border
+					borderStyle={style().panel.borderStyle}
+					borderColor={
+						focusedField() === "picker"
+							? colors().borderFocused
+							: colors().border
+					}
+					backgroundColor={colors().background}
+					height={pickerHeight()}
+					padding={0}
+					title="Revision"
+				>
+					<RevisionPicker
+						commits={props.commits ?? []}
+						defaultRevision={props.defaultRevision}
+						focused={focusedField() === "picker"}
+						onSelect={handleRevisionSelect}
+						height={pickerHeight() - 2}
+					/>
+				</box>
+			</Show>
+		</box>
+	)
+}