@f0rbit/overview 0.1.0 → 0.2.1

package/packages/render/src/components/__tests__/widget-container.integration.test.tsx

@@ -1,304 +0,0 @@
-import { describe, test, expect } from "bun:test";
-import { testRender } from "@opentui/solid";
-import { createSignal } from "solid-js";
-import type { ScrollBoxRenderable, Renderable } from "@opentui/core";
-import type { WidgetConfig, RepoStatus, WidgetId } from "@overview/core";
-
-import { WidgetContainer } from "../widget-container";
-import "../widgets/index";
-
-function mockRepoStatus(): RepoStatus {
-	return {
-		path: "/tmp/test-repo",
-		name: "test-repo",
-		display_path: "test-repo",
-		current_branch: "main",
-		head_commit: "abc1234",
-		head_message: "test commit",
-		head_time: Date.now() / 1000,
-		remote_url: null,
-		ahead: 2,
-		behind: 0,
-		modified_count: 3,
-		staged_count: 1,
-		untracked_count: 1,
-		conflict_count: 0,
-		changes: [],
-		stashes: [],
-		stash_count: 0,
-		branches: [
-			{
-				name: "main",
-				is_current: true,
-				upstream: "origin/main",
-				ahead: 2,
-				behind: 0,
-				last_commit_time: Date.now() / 1000,
-			},
-		],
-		local_branch_count: 1,
-		remote_branch_count: 1,
-		tags: ["v1.0"],
-		total_commits: 50,
-		repo_size_bytes: 1024000,
-		contributor_count: 3,
-		recent_commits: [
-			{
-				hash: "abc1234",
-				message: "test commit",
-				author: "test",
-				time: Date.now() / 1000,
-			},
-		],
-		is_clean: false,
-		health: "ahead" as const,
-	};
-}
-
-const ALL_WIDGET_IDS: WidgetId[] = [
-	"git-status",
-	"devpad-milestones",
-	"github-prs",
-	"devpad-tasks",
-	"file-changes",
-	"repo-meta",
-	"github-ci",
-	"branch-list",
-	"commit-activity",
-	"github-release",
-	"github-issues",
-];
-
-function defaultTestWidgetConfigs(): WidgetConfig[] {
-	return ALL_WIDGET_IDS.map((id, i) => ({
-		id,
-		enabled: true,
-		collapsed: false,
-		priority: i,
-	}));
-}
-
-describe("widget container (integration)", () => {
-	test("renders all enabled widgets in grid layout", async () => {
-		const { renderOnce, captureCharFrame } = await testRender(
-			() => (
-				<box flexDirection="column" width={80} height={50}>
-					<WidgetContainer
-						status={mockRepoStatus()}
-						repoName="test-repo"
-						loading={false}
-						focused={true}
-						height={50}
-						availableWidth={80}
-						widgetConfigs={defaultTestWidgetConfigs()}
-					/>
-				</box>
-			),
-			{ width: 80, height: 50 },
-		);
-
-		await renderOnce();
-		const frame = captureCharFrame();
-
-		// Border characters present (scrollbar may replace right-side corners ╮/╯)
-		expect(frame).toContain("╭");
-		expect(frame).toContain("╰");
-		expect(frame).toContain("─");
-
-		// Widget labels visible (first widget + a few others)
-		expect(frame).toContain("Git Status");
-		expect(frame).toContain("Branches");
-		expect(frame).toContain("Repo Meta");
-	});
-
-	test("focused widget has highlight marker", async () => {
-		const { renderOnce, captureCharFrame } = await testRender(
-			() => (
-				<box flexDirection="column" width={80} height={50}>
-					<WidgetContainer
-						status={mockRepoStatus()}
-						repoName="test-repo"
-						loading={false}
-						focused={true}
-						height={50}
-						availableWidth={80}
-						widgetConfigs={defaultTestWidgetConfigs()}
-					/>
-				</box>
-			),
-			{ width: 80, height: 50 },
-		);
-
-		await renderOnce();
-		const frame = captureCharFrame();
-
-		// The focused widget (first by priority = git-status) shows ▸ marker
-		expect(frame).toContain("▸");
-		expect(frame).toContain("▸ Git Status");
-	});
-
-	test("j/k navigation changes focused widget", async () => {
-		const { renderOnce, captureCharFrame, mockInput } = await testRender(
-			() => (
-				<box flexDirection="column" width={80} height={50}>
-					<WidgetContainer
-						status={mockRepoStatus()}
-						repoName="test-repo"
-						loading={false}
-						focused={true}
-						height={50}
-						availableWidth={80}
-						widgetConfigs={defaultTestWidgetConfigs()}
-					/>
-				</box>
-			),
-			{ width: 80, height: 50 },
-		);
-
-		await renderOnce();
-		const frame_before = captureCharFrame();
-		expect(frame_before).toContain("▸ Git Status");
-
-		// Press j to move focus down
-		mockInput.pressKey("j");
-		await renderOnce();
-		const frame_after_j = captureCharFrame();
-
-		// Git Status should no longer have the ▸ marker
-		expect(frame_after_j).not.toContain("▸ Git Status");
-		// The next widget visually is Repo Meta (same row, next column)
-		expect(frame_after_j).toContain("▸ Repo Meta");
-
-		// Press k to go back
-		mockInput.pressKey("k");
-		await renderOnce();
-		const frame_after_k = captureCharFrame();
-
-		expect(frame_after_k).toContain("▸ Git Status");
-		expect(frame_after_k).not.toContain("▸ Repo Meta");
-	});
-
-	test("collapsed widget shows collapsed indicator", async () => {
-		const configs = defaultTestWidgetConfigs();
-		// Collapse the first widget
-		configs[0] = { ...configs[0]!, collapsed: true };
-
-		const { renderOnce, captureCharFrame } = await testRender(
-			() => (
-				<box flexDirection="column" width={80} height={50}>
-					<WidgetContainer
-						status={mockRepoStatus()}
-						repoName="test-repo"
-						loading={false}
-						focused={true}
-						height={50}
-						availableWidth={80}
-						widgetConfigs={configs}
-					/>
-				</box>
-			),
-			{ width: 80, height: 50 },
-		);
-
-		await renderOnce();
-		const frame = captureCharFrame();
-
-		expect(frame).toContain("[>]");
-		expect(frame).toContain("collapsed");
-	});
-
-	test("scroll-to-focused reaches bottom widgets in nested layout", async () => {
-		const { renderOnce, captureCharFrame, mockInput } = await testRender(
-			() => (
-				<box flexDirection="column" width="100%" height="100%">
-					<box height={1}>
-						<text content="header" />
-					</box>
-					<box flexDirection="row" flexGrow={1}>
-						<box width={40}>
-							<text content="left" />
-						</box>
-						<box flexDirection="column" flexGrow={1}>
-							<box height="50%">
-								<text content="graph" />
-							</box>
-							<WidgetContainer
-								status={mockRepoStatus()}
-								repoName="test-repo"
-								loading={false}
-								focused={true}
-								height="50%"
-								availableWidth={80}
-								widgetConfigs={defaultTestWidgetConfigs()}
-							/>
-						</box>
-					</box>
-					<box height={1}>
-						<text content="status" />
-					</box>
-				</box>
-			),
-			{ width: 120, height: 40 },
-		);
-
-		await renderOnce();
-
-		// Navigate to the last widget by pressing j many times
-		for (let i = 0; i < 15; i++) {
-			mockInput.pressKey("j");
-			await renderOnce();
-		}
-
-		const frame = captureCharFrame();
-
-		// The ▸ marker should always be visible (scroll-to-focused keeps it in view)
-		expect(frame).toContain("▸");
-
-		// The last widget (by priority order: github-issues, label "GitHub Issues") should be visible
-		// or at least the focus marker should be present proving scroll worked
-		const lines = frame.split("\n");
-		const marker_line = lines.find((l: string) => l.includes("▸"));
-		expect(marker_line).toBeDefined();
-	});
-
-	test("c key toggles widget collapse", async () => {
-		const [updated_configs, setUpdatedConfigs] = createSignal<WidgetConfig[] | null>(null);
-
-		const { renderOnce, mockInput } = await testRender(
-			() => (
-				<box flexDirection="column" width={80} height={50}>
-					<WidgetContainer
-						status={mockRepoStatus()}
-						repoName="test-repo"
-						loading={false}
-						focused={true}
-						height={50}
-						availableWidth={80}
-						widgetConfigs={defaultTestWidgetConfigs()}
-						onWidgetConfigChange={(configs) => setUpdatedConfigs(configs)}
-					/>
-				</box>
-			),
-			{ width: 80, height: 50 },
-		);
-
-		await renderOnce();
-
-		// Press c to toggle collapse on the focused (first) widget
-		mockInput.pressKey("c");
-		await renderOnce();
-
-		const result = updated_configs();
-		expect(result).not.toBeNull();
-
-		// First widget (git-status) should now be collapsed
-		const git_status_config = result!.find((c) => c.id === "git-status");
-		expect(git_status_config).toBeDefined();
-		expect(git_status_config!.collapsed).toBe(true);
-
-		// Other widgets should remain uncollapsed
-		const other = result!.find((c) => c.id === "github-issues");
-		expect(other).toBeDefined();
-		expect(other!.collapsed).toBe(false);
-	});
-});

package/packages/render/src/components/git-graph.tsx

@@ -1,127 +0,0 @@
-import { Show, For } from "solid-js";
-import type { GitGraphOutput } from "@overview/core";
-import { theme } from "../theme";
-
-interface GitGraphProps {
-	graph: GitGraphOutput | null;
-	repoName: string;
-	loading: boolean;
-	focused: boolean;
-	height: number | `${number}%` | "auto";
-}
-
-interface Segment {
-	text: string;
-	color: string;
-}
-
-// Graph characters: * | / \ _ (edges and merge points)
-const GRAPH_CHARS = /^[*|/\\_\s.]+/;
-// Short hash: 7+ hex chars
-const HASH_RE = /^[0-9a-f]{7,12}/;
-// Ref decoration: (HEAD -> main, origin/main, tag: v1.0)
-const REF_RE = /^\([^)]+\)/;
-
-function parseGraphLine(line: string): Segment[] {
-	const segments: Segment[] = [];
-
-	// 1. Graph prefix (lines, merge points)
-	const graphMatch = line.match(GRAPH_CHARS);
-	let rest = line;
-
-	if (graphMatch) {
-		const graphPart = graphMatch[0];
-		// Color the * merge points differently from the | / \ lines
-		if (graphPart.includes("*")) {
-			const starIdx = graphPart.indexOf("*");
-			if (starIdx > 0) {
-				segments.push({ text: graphPart.slice(0, starIdx), color: theme.fg_dim });
-			}
-			segments.push({ text: "*", color: theme.green });
-			const after = graphPart.slice(starIdx + 1);
-			if (after) {
-				segments.push({ text: after, color: theme.fg_dim });
-			}
-		} else {
-			segments.push({ text: graphPart, color: theme.fg_dim });
-		}
-		rest = line.slice(graphPart.length);
-	}
-
-	if (!rest) return segments;
-
-	// 2. Hash
-	const hashMatch = rest.match(HASH_RE);
-	if (hashMatch) {
-		segments.push({ text: hashMatch[0], color: theme.yellow });
-		rest = rest.slice(hashMatch[0].length);
-	}
-
-	if (!rest) return segments;
-
-	// 3. Space before ref
-	if (rest.startsWith(" ")) {
-		segments.push({ text: " ", color: theme.fg });
-		rest = rest.slice(1);
-	}
-
-	// 4. Ref decoration
-	const refMatch = rest.match(REF_RE);
-	if (refMatch) {
-		segments.push({ text: refMatch[0], color: theme.cyan });
-		rest = rest.slice(refMatch[0].length);
-	}
-
-	// 5. Commit message (everything remaining)
-	if (rest) {
-		segments.push({ text: rest, color: theme.fg });
-	}
-
-	return segments;
-}
-
-function GraphLine(props: { line: string }) {
-	const segments = () => parseGraphLine(props.line);
-
-	return (
-		<box flexDirection="row" height={1}>
-			<For each={segments()}>
-				{(seg) => <text fg={seg.color} content={seg.text} />}
-			</For>
-		</box>
-	);
-}
-
-export function GitGraph(props: GitGraphProps) {
-	return (
-		<box
-			borderStyle="rounded"
-			borderColor={props.focused ? theme.border_highlight : theme.border}
-			title={`git graph: ${props.repoName}`}
-			titleAlignment="left"
-			flexDirection="column"
-			flexGrow={1}
-			height={props.height}
-		>
-			<Show
-				when={!props.loading && props.graph && props.graph.lines.length > 0}
-				fallback={
-				<text fg={theme.fg_dim} content={props.loading ? "loading..." : "(no commits)"} />
-				}
-			>
-				<scrollbox
-					focused={props.focused}
-					viewportCulling={true}
-					flexGrow={1}
-				>
-					<For each={props.graph!.lines}>
-						{(line) => <GraphLine line={line} />}
-					</For>
-				</scrollbox>
-			<box height={1}>
-				<text fg={theme.fg_dim} content={`(${props.graph!.total_lines} commits)`} />
-			</box>
-			</Show>
-		</box>
-	);
-}

package/packages/render/src/components/help-overlay.tsx

@@ -1,108 +0,0 @@
-import { Show, For } from "solid-js";
-import { useKeyboard } from "@opentui/solid";
-import { theme } from "../theme";
-
-interface HelpOverlayProps {
-	visible: boolean;
-	onClose: () => void;
-}
-
-const SECTIONS = [
-	{
-		title: "Navigation",
-		items: [
-			{ key: "j / ↓", desc: "Move down" },
-			{ key: "k / ↑", desc: "Move up" },
-			{ key: "g", desc: "First repo" },
-			{ key: "G", desc: "Last repo" },
-			{ key: "Enter", desc: "Expand/collapse or enter detail mode" },
-		],
-	},
-	{
-		title: "Actions",
-		items: [
-			{ key: "g (in detail)", desc: "Launch ggi" },
-			{ key: "o", desc: "Open in $EDITOR" },
-			{ key: "t", desc: "Open tmux session" },
-			{ key: "r", desc: "Refresh selected repo" },
-			{ key: "R", desc: "Full rescan" },
-		],
-	},
-	{
-		title: "View",
-		items: [
-			{ key: "h / l", desc: "Switch panel focus" },
-			{ key: "Tab", desc: "Cycle panel focus" },
-			{ key: "f", desc: "Cycle filter (all/dirty/clean/ahead/behind)" },
-			{ key: "s", desc: "Cycle sort (name/status/last-commit)" },
-			{ key: "/", desc: "Search repos" },
-		],
-	},
-	{
-		title: "Widgets (stats panel focused)",
-		items: [
-			{ key: "j / k", desc: "Navigate between widgets" },
-			{ key: "c", desc: "Collapse/expand focused widget" },
-			{ key: "C", desc: "Collapse/expand all widgets" },
-		],
-	},
-	{
-		title: "General",
-		items: [
-			{ key: "q", desc: "Quit / back" },
-			{ key: "?", desc: "Toggle help" },
-			{ key: "Esc", desc: "Cancel / close" },
-		],
-	},
-] as const;
-
-function Section(props: { title: string; items: ReadonlyArray<{ key: string; desc: string }> }) {
-	return (
-		<box flexDirection="column">
-			<text fg={theme.yellow} content={props.title} />
-			<For each={props.items}>
-				{(item) => (
-					<box flexDirection="row" height={1}>
-					<text fg={theme.blue} content={item.key.padEnd(16)} />
-					<text fg={theme.fg} content={item.desc} />
-					</box>
-				)}
-			</For>
-		</box>
-	);
-}
-
-export function HelpOverlay(props: HelpOverlayProps) {
-	useKeyboard((key) => {
-		if (!props.visible) return;
-
-		if (key.name === "q" || key.name === "escape" || key.raw === "?") {
-			props.onClose();
-		}
-	});
-
-	return (
-		<Show when={props.visible}>
-			<box
-				position="absolute"
-				width="60%"
-				height="80%"
-				left="20%"
-				top="10%"
-				backgroundColor={theme.bg_dark}
-				borderStyle="rounded"
-				borderColor={theme.blue}
-				title="Help"
-				titleAlignment="center"
-				padding={2}
-				flexDirection="column"
-				gap={1}
-				zIndex={100}
-			>
-				<For each={SECTIONS}>
-					{(section) => <Section title={section.title} items={section.items} />}
-				</For>
-			</box>
-		</Show>
-	);
-}

package/packages/render/src/components/index.ts

@@ -1,7 +0,0 @@
-export { GitGraph } from "./git-graph";
-export { RepoList } from "./repo-list";
-export { WidgetContainer } from "./widget-container";
-export { StatusBar } from "./status-bar";
-export type { AppMode } from "./status-bar";
-export { StatusBadge } from "./status-badge";
-export { HelpOverlay } from "./help-overlay";

package/packages/render/src/components/repo-list.tsx

@@ -1,127 +0,0 @@
-import { createSignal, createMemo, createEffect, For } from "solid-js";
-import { useKeyboard } from "@opentui/solid";
-import type { RepoNode } from "@overview/core";
-import { theme } from "../theme";
-import { StatusBadge } from "./status-badge";
-
-interface RepoListProps {
-	repos: RepoNode[];
-	focused: boolean;
-	onSelect: (node: RepoNode) => void;
-}
-
-interface FlatNode {
-	node: RepoNode;
-	depth: number;
-	is_last: boolean;
-}
-
-function flattenTree(nodes: RepoNode[], depth: number = 0): FlatNode[] {
-	return nodes.flatMap((node, i) => {
-		const entry: FlatNode = { node, depth, is_last: i === nodes.length - 1 };
-		if (node.type === "directory" && node.expanded && node.children.length > 0) {
-			return [entry, ...flattenTree(node.children, depth + 1)];
-		}
-		return [entry];
-	});
-}
-
-function connector(is_last: boolean): string {
-	return is_last ? "└──" : "├──";
-}
-
-function icon(node: RepoNode): string {
-	if (node.type === "directory") return node.expanded ? "▾ " : "▸ ";
-	if (node.type === "worktree") return "⊞ ";
-	return "  ";
-}
-
-export function RepoList(props: RepoListProps) {
-	const [selectedIndex, setSelectedIndex] = createSignal(0);
-
-	const visible = createMemo(() => flattenTree(props.repos));
-
-	const clampIndex = (idx: number) => Math.max(0, Math.min(idx, visible().length - 1));
-
-	createEffect(() => {
-		const items = visible();
-		if (items.length === 0) return;
-		const idx = clampIndex(selectedIndex());
-		if (idx !== selectedIndex()) setSelectedIndex(idx);
-		const item = items[idx];
-		if (item) props.onSelect(item.node);
-	});
-
-	useKeyboard((key) => {
-		if (!props.focused) return;
-		const items = visible();
-		if (items.length === 0) return;
-
-		switch (key.name) {
-			case "j":
-			case "down": {
-				const next = clampIndex(selectedIndex() + 1);
-				setSelectedIndex(next);
-				const item = items[next];
-				if (item) props.onSelect(item.node);
-				break;
-			}
-			case "k":
-			case "up": {
-				const next = clampIndex(selectedIndex() - 1);
-				setSelectedIndex(next);
-				const item = items[next];
-				if (item) props.onSelect(item.node);
-				break;
-			}
-			case "g": {
-				setSelectedIndex(0);
-				const item = items[0];
-				if (item) props.onSelect(item.node);
-				break;
-			}
-			case "G": {
-				const last = items.length - 1;
-				setSelectedIndex(last);
-				const item = items[last];
-				if (item) props.onSelect(item.node);
-				break;
-			}
-			case "return": {
-				const item = items[selectedIndex()];
-				if (item && item.node.type === "directory") {
-					item.node.expanded = !item.node.expanded;
-					setSelectedIndex(clampIndex(selectedIndex()));
-				}
-				break;
-			}
-		}
-	});
-
-	return (
-		<box flexDirection="column" width="100%" height="100%">
-			<For each={visible()}>
-				{(entry, i) => {
-					const selected = () => i() === selectedIndex();
-					const indent = "  ".repeat(entry.depth);
-					const conn = connector(entry.is_last);
-					const prefix = icon(entry.node);
-					const label = `${indent}${conn} ${prefix}${entry.node.name}`;
-
-					return (
-						<box
-							flexDirection="row"
-							width="100%"
-							height={1}
-							backgroundColor={selected() ? theme.selection : undefined}
-						>
-							<text fg={selected() ? theme.fg : theme.fg_dark} content={label} />
-							<box flexGrow={1} />
-							<StatusBadge status={entry.node.status} />
-						</box>
-					);
-				}}
-			</For>
-		</box>
-	);
-}