@f0rbit/overview 0.1.0 → 0.2.1

package/packages/render/src/components/widgets/__tests__/widget-rendering.test.tsx

@@ -1,326 +0,0 @@
-import { describe, test, expect } from "bun:test";
-import { testRender } from "@opentui/solid";
-import { buildBorderLine, resolveSpan, type GridRow } from "../../../lib/widget-grid";
-
-// ── helpers ────────────────────────────────────────────────────────────────
-
-const twoColRow: GridRow = { widgets: [{} as any, {} as any], columns: 2 };
-const oneColRow: GridRow = { widgets: [{} as any], columns: 1 };
-const threeColRow: GridRow = { widgets: [{} as any, {} as any, {} as any], columns: 3 };
-
-// ── grid layout rendering ──────────────────────────────────────────────────
-
-describe("widget grid rendering (integration)", () => {
-	test("two half-width widgets render side-by-side with shared border", async () => {
-		const width = 60;
-		const junction_col = Math.floor(width / 2);
-		const { renderOnce, captureCharFrame } = await testRender(
-			() => (
-				<box flexDirection="column" width={width}>
-					<text content={buildBorderLine("top", width, null, twoColRow)} />
-					<box flexDirection="row" alignItems="stretch" width={width}>
-						<box width={junction_col} border={["left"]} borderStyle="rounded" flexDirection="column">
-							<text content="Widget A" />
-							<text content="content a" />
-						</box>
-						<box width={width - junction_col} border={["left", "right"]} borderStyle="rounded" flexDirection="column">
-							<text content="Widget B" />
-							<text content="content b" />
-						</box>
-					</box>
-					<text content={buildBorderLine("bottom", width, twoColRow, null)} />
-				</box>
-			),
-			{ width: 80, height: 20 },
-		);
-
-		await renderOnce();
-		const frame = captureCharFrame();
-
-		expect(frame).toContain("Widget A");
-		expect(frame).toContain("Widget B");
-		expect(frame).toContain("content a");
-		expect(frame).toContain("content b");
-
-		// top border has junction
-		expect(frame).toContain("┬");
-		// bottom border has junction
-		expect(frame).toContain("┴");
-
-		// no doubled borders — shared divider means no ╮╭ or ╯╰ adjacency
-		expect(frame).not.toContain("╮╭");
-		expect(frame).not.toContain("╯╰");
-	});
-
-	test("full-width widget renders with full border", async () => {
-		const width = 40;
-		const { renderOnce, captureCharFrame } = await testRender(
-			() => (
-				<box flexDirection="column" width={width}>
-					<text content={buildBorderLine("top", width, null, oneColRow)} />
-					<box flexDirection="row" width={width}>
-						<box width={width} border={["left", "right"]} borderStyle="rounded" flexDirection="column">
-							<text content="Full Widget" />
-							<text content="full content" />
-						</box>
-					</box>
-					<text content={buildBorderLine("bottom", width, oneColRow, null)} />
-				</box>
-			),
-			{ width: 60, height: 20 },
-		);
-
-		await renderOnce();
-		const frame = captureCharFrame();
-
-		expect(frame).toContain("Full Widget");
-		expect(frame).toContain("full content");
-
-		const lines = frame.split("\n").filter((l: string) => l.trim().length > 0);
-		const top_line = lines[0]!;
-		const bottom_line = lines[lines.length - 1]!;
-
-		// top border corners
-		expect(top_line.trimStart()).toMatch(/^╭/);
-		expect(top_line.trimEnd()).toMatch(/╮$/);
-
-		// bottom border corners
-		expect(bottom_line.trimStart()).toMatch(/^╰/);
-		expect(bottom_line.trimEnd()).toMatch(/╯$/);
-
-		// no junction characters in single-column layout
-		expect(frame).not.toContain("┬");
-		expect(frame).not.toContain("┴");
-		expect(frame).not.toContain("┼");
-	});
-
-	test("mixed layout — half-width row followed by full-width row", async () => {
-		const width = 60;
-		const junction_col = Math.floor(width / 2);
-		const { renderOnce, captureCharFrame } = await testRender(
-			() => (
-				<box flexDirection="column" width={width}>
-					<text content={buildBorderLine("top", width, null, twoColRow)} />
-					<box flexDirection="row" alignItems="stretch" width={width}>
-						<box width={junction_col} border={["left"]} borderStyle="rounded" flexDirection="column">
-							<text content="Half A" />
-						</box>
-						<box width={width - junction_col} border={["left", "right"]} borderStyle="rounded" flexDirection="column">
-							<text content="Half B" />
-						</box>
-					</box>
-					<text content={buildBorderLine("mid", width, twoColRow, oneColRow)} />
-					<box flexDirection="row" width={width}>
-						<box width={width} border={["left", "right"]} borderStyle="rounded" flexDirection="column">
-							<text content="Full C" />
-						</box>
-					</box>
-					<text content={buildBorderLine("bottom", width, oneColRow, null)} />
-				</box>
-			),
-			{ width: 80, height: 20 },
-		);
-
-		await renderOnce();
-		const frame = captureCharFrame();
-
-		expect(frame).toContain("Half A");
-		expect(frame).toContain("Half B");
-		expect(frame).toContain("Full C");
-
-		// verify border line characters directly from buildBorderLine output
-		const top_border = buildBorderLine("top", width, null, twoColRow);
-		const mid_border = buildBorderLine("mid", width, twoColRow, oneColRow);
-		const bottom_border = buildBorderLine("bottom", width, oneColRow, null);
-
-		// top border has ┬ at midpoint (2-col below)
-		expect(top_border).toContain("┬");
-
-		// mid border: 2-col above merges into 1-col below → ┴ at junction
-		expect(mid_border).toContain("┴");
-		// mid border starts with ├ and ends with ┤
-		expect(mid_border[0]).toBe("├");
-		expect(mid_border[mid_border.length - 1]).toBe("┤");
-
-		// bottom border has no junction chars
-		expect(bottom_border).not.toContain("┬");
-		expect(bottom_border).not.toContain("┴");
-		expect(bottom_border).not.toContain("┼");
-
-		// all border lines appear in the rendered frame
-		expect(frame).toContain(top_border);
-		expect(frame).toContain(mid_border);
-		expect(frame).toContain(bottom_border);
-	});
-
-	test("narrow panel falls back to single column", () => {
-		// pure function — no rendering needed
-		expect(resolveSpan("half", 39)).toBe("full");
-		expect(resolveSpan("half", 40)).toBe("half");
-		expect(resolveSpan("half", 50)).toBe("half");
-		expect(resolveSpan("half", 100)).toBe("half");
-		expect(resolveSpan("full", 100)).toBe("full");
-	});
-
-	test("collapsed widget shows label text", async () => {
-		const width = 40;
-		const { renderOnce, captureCharFrame } = await testRender(
-			() => (
-				<box flexDirection="row" width={width}>
-					<box width={width} border={["left", "right"]} borderStyle="rounded" flexDirection="column" minHeight={1}>
-						<text content="[>] Widget Name (collapsed)" />
-					</box>
-				</box>
-			),
-			{ width: 60, height: 20 },
-		);
-
-		await renderOnce();
-		const frame = captureCharFrame();
-
-		expect(frame).toContain("[>]");
-		expect(frame).toContain("collapsed");
-	});
-
-	test("three third-width widgets render side-by-side with correct borders", async () => {
-		const width = 90;
-		const j1 = Math.floor(width / 3); // 30
-		const j2 = Math.floor(2 * width / 3); // 60
-		const { renderOnce, captureCharFrame } = await testRender(
-			() => (
-				<box flexDirection="column" width={width}>
-					<text content={buildBorderLine("top", width, null, threeColRow)} />
-					<box flexDirection="row" alignItems="stretch" width={width}>
-						<box width={j1} border={["left"]} borderStyle="rounded" flexDirection="column">
-							<text content="Widget A" />
-							<text content="content a" />
-						</box>
-						<box width={j2 - j1} border={["left"]} borderStyle="rounded" flexDirection="column">
-							<text content="Widget B" />
-							<text content="content b" />
-						</box>
-						<box width={width - j2} border={["left", "right"]} borderStyle="rounded" flexDirection="column">
-							<text content="Widget C" />
-							<text content="content c" />
-						</box>
-					</box>
-					<text content={buildBorderLine("bottom", width, threeColRow, null)} />
-				</box>
-			),
-			{ width: 100, height: 20 },
-		);
-
-		await renderOnce();
-		const frame = captureCharFrame();
-
-		expect(frame).toContain("Widget A");
-		expect(frame).toContain("Widget B");
-		expect(frame).toContain("Widget C");
-
-		// Top border has two ┬ junctions
-		const top_border = buildBorderLine("top", width, null, threeColRow);
-		expect(top_border.split("┬").length - 1).toBe(2);
-		expect(frame).toContain(top_border);
-
-		// Bottom border has two ┴ junctions
-		const bottom_border = buildBorderLine("bottom", width, threeColRow, null);
-		expect(bottom_border.split("┴").length - 1).toBe(2);
-		expect(frame).toContain(bottom_border);
-
-		// No doubled borders
-		expect(frame).not.toContain("╮╭");
-		expect(frame).not.toContain("╯╰");
-	});
-
-	test("mixed 3-col and 2-col rows have correct junction characters", async () => {
-		const width = 60;
-		const j_third_1 = Math.floor(width / 3); // 20
-		const j_third_2 = Math.floor(2 * width / 3); // 40
-		const j_half = Math.floor(width / 2); // 30
-		const { renderOnce, captureCharFrame } = await testRender(
-			() => (
-				<box flexDirection="column" width={width}>
-					<text content={buildBorderLine("top", width, null, threeColRow)} />
-					<box flexDirection="row" alignItems="stretch" width={width}>
-						<box width={j_third_1} border={["left"]} borderStyle="rounded" flexDirection="column">
-							<text content="Third A" />
-						</box>
-						<box width={j_third_2 - j_third_1} border={["left"]} borderStyle="rounded" flexDirection="column">
-							<text content="Third B" />
-						</box>
-						<box width={width - j_third_2} border={["left", "right"]} borderStyle="rounded" flexDirection="column">
-							<text content="Third C" />
-						</box>
-					</box>
-					<text content={buildBorderLine("mid", width, threeColRow, twoColRow)} />
-					<box flexDirection="row" alignItems="stretch" width={width}>
-						<box width={j_half} border={["left"]} borderStyle="rounded" flexDirection="column">
-							<text content="Half D" />
-						</box>
-						<box width={width - j_half} border={["left", "right"]} borderStyle="rounded" flexDirection="column">
-							<text content="Half E" />
-						</box>
-					</box>
-					<text content={buildBorderLine("bottom", width, twoColRow, null)} />
-				</box>
-			),
-			{ width: 80, height: 20 },
-		);
-
-		await renderOnce();
-		const frame = captureCharFrame();
-
-		expect(frame).toContain("Third A");
-		expect(frame).toContain("Third B");
-		expect(frame).toContain("Third C");
-		expect(frame).toContain("Half D");
-		expect(frame).toContain("Half E");
-
-		// Mid border has junctions from both rows:
-		// 3-col junctions at 20, 40 (from above)
-		// 2-col junction at 30 (from below)
-		const mid_border = buildBorderLine("mid", width, threeColRow, twoColRow);
-		expect(mid_border[0]).toBe("├");
-		expect(mid_border[width - 1]).toBe("┤");
-		expect(mid_border[j_third_1]).toBe("┴");  // from 3-col above only
-		expect(mid_border[j_half]).toBe("┬");     // from 2-col below only
-		expect(mid_border[j_third_2]).toBe("┴");  // from 3-col above only
-		expect(frame).toContain(mid_border);
-	});
-
-	test("auto-expand: lone third renders as full-width", async () => {
-		const width = 40;
-		const { renderOnce, captureCharFrame } = await testRender(
-			() => (
-				<box flexDirection="column" width={width}>
-					<text content={buildBorderLine("top", width, null, oneColRow)} />
-					<box flexDirection="row" width={width}>
-						<box width={width} border={["left", "right"]} borderStyle="rounded" flexDirection="column">
-							<text content="Expanded Third" />
-							<text content="I have full width!" />
-						</box>
-					</box>
-					<text content={buildBorderLine("bottom", width, oneColRow, null)} />
-				</box>
-			),
-			{ width: 60, height: 20 },
-		);
-
-		await renderOnce();
-		const frame = captureCharFrame();
-
-		expect(frame).toContain("Expanded Third");
-		expect(frame).toContain("I have full width!");
-
-		// No junction characters — single-column row
-		expect(frame).not.toContain("┬");
-		expect(frame).not.toContain("┴");
-		expect(frame).not.toContain("┼");
-
-		// Full-width borders
-		const top_border = buildBorderLine("top", width, null, oneColRow);
-		const bottom_border = buildBorderLine("bottom", width, oneColRow, null);
-		expect(frame).toContain(top_border);
-		expect(frame).toContain(bottom_border);
-	});
-});

package/packages/render/src/components/widgets/branch-list.tsx

@@ -1,93 +0,0 @@
-import { For, Show, createMemo } from "solid-js";
-import type { WidgetRenderProps, RepoStatus, BranchInfo } from "@overview/core";
-import { registerWidget } from "./registry";
-import { theme } from "../../theme";
-import { truncate } from "../../lib/format";
-
-const size_hint = { span: "half" as const, min_height: 2 };
-const MAX_VISIBLE = 10;
-const STALE_THRESHOLD = 30 * 24 * 60 * 60; // 30 days in seconds
-
-function sortBranches(branches: BranchInfo[]): BranchInfo[] {
-	return [...branches].sort((a, b) => {
-		if (a.is_current !== b.is_current) return a.is_current ? -1 : 1;
-		return b.last_commit_time - a.last_commit_time;
-	});
-}
-
-function isStale(branch: BranchInfo): boolean {
-	const now = Math.floor(Date.now() / 1000);
-	return now - branch.last_commit_time > STALE_THRESHOLD;
-}
-
-function BranchListWidget(props: WidgetRenderProps & { status: RepoStatus | null }) {
-	const branches = createMemo(() =>
-		props.status ? sortBranches(props.status.branches) : []
-	);
-	const visible = () => branches().slice(0, MAX_VISIBLE);
-	const overflow = () => Math.max(0, branches().length - MAX_VISIBLE);
-	const has_sync = (b: BranchInfo) => b.ahead > 0 || b.behind > 0;
-
-	return (
-		<box flexDirection="column">
-			<Show
-				when={props.status}
-				fallback={
-					<text fg={theme.fg_dim} content="no repo selected" />
-				}
-			>
-				{(status) => (
-					<>
-						<text fg={theme.fg_dark} content={`Branches (${status().branches.length})`} />
-
-						<Show
-							when={branches().length > 0}
-							fallback={
-								<text fg={theme.fg_dim} content="(no branches)" />
-							}
-						>
-							<For each={visible()}>
-								{(branch) => (
-									<box flexDirection="row" height={1}>
-										<text
-											fg={branch.is_current ? theme.green : theme.fg}
-											content={branch.is_current ? "* " : "  "}
-										/>
-										<text
-											fg={branch.is_current ? theme.green : theme.fg}
-											content={truncate(branch.name, props.width - 20)}
-										/>
-										<Show when={has_sync(branch)}>
-											<Show when={branch.ahead > 0}>
-												<text fg={theme.yellow} content={` ↑${branch.ahead}`} />
-											</Show>
-											<Show when={branch.behind > 0}>
-												<text fg={theme.cyan} content={` ↓${branch.behind}`} />
-											</Show>
-										</Show>
-										<Show when={isStale(branch)}>
-											<text fg={theme.orange} content=" (stale)" />
-										</Show>
-									</box>
-								)}
-							</For>
-
-							<Show when={overflow() > 0}>
-								<text fg={theme.fg_dim} content={`+${overflow()} more`} />
-							</Show>
-						</Show>
-					</>
-				)}
-			</Show>
-		</box>
-	);
-}
-
-registerWidget({
-	id: "branch-list",
-	label: "Branches",
-	size_hint,
-	component: BranchListWidget,
-});
-
-export { BranchListWidget };

package/packages/render/src/components/widgets/commit-activity.tsx

@@ -1,112 +0,0 @@
-import { Show, createMemo } from "solid-js";
-import type { WidgetRenderProps, RepoStatus } from "@overview/core";
-import { registerWidget } from "./registry";
-import { theme } from "../../theme";
-
-const size_hint = { span: "third" as const, min_height: 2 };
-
-const BLOCKS = " ▁▂▃▄▅▆▇█";
-
-function renderSparkline(counts: number[]): string {
-	const max = Math.max(...counts, 1);
-	return counts
-		.map((c) => {
-			const level = Math.round((c / max) * 8);
-			return BLOCKS[level] ?? " ";
-		})
-		.join("");
-}
-
-function CommitActivityWidget(props: WidgetRenderProps & { status: RepoStatus | null }) {
-	const activity = () => props.status?.commit_activity ?? null;
-
-	const sparkline = createMemo(() => {
-		const a = activity();
-		if (!a) return "";
-		return renderSparkline(a.daily_counts);
-	});
-
-	const delta = createMemo(() => {
-		const a = activity();
-		if (!a) return 0;
-		return a.total_this_week - a.total_last_week;
-	});
-
-	const delta_str = createMemo(() => {
-		const d = delta();
-		if (d > 0) return `+${d}`;
-		if (d < 0) return `${d}`;
-		return "0";
-	});
-
-	const delta_color = createMemo(() => {
-		const d = delta();
-		if (d > 0) return theme.green;
-		if (d < 0) return theme.red;
-		return theme.fg_dim;
-	});
-
-	const total_14d = createMemo(() => {
-		const a = activity();
-		if (!a) return 0;
-		return a.daily_counts.reduce((sum, c) => sum + c, 0);
-	});
-
-	const sparkline_colored = createMemo(() => {
-		const a = activity();
-		if (!a) return [];
-		return a.daily_counts.map((c) => ({
-			char: BLOCKS[Math.round((c / Math.max(...a.daily_counts, 1)) * 8)] ?? " ",
-			color: c > 0 ? theme.green : theme.fg_dim,
-		}));
-	});
-
-	return (
-		<box flexDirection="column">
-			<Show
-				when={activity()}
-				fallback={
-					<text fg={theme.fg_dim} content="(no activity data)" />
-				}
-			>
-				{/* Row 1: Sparkline */}
-				<box flexDirection="row" height={1}>
-					{sparkline_colored().map((s) => (
-						<text fg={s.color} content={s.char} />
-					))}
-				</box>
-
-				{/* Row 2: Weekly stats */}
-				<box flexDirection="row" height={1} gap={2}>
-					<box flexDirection="row" gap={1}>
-						<text fg={theme.fg_dim} content="this week:" />
-						<text fg={theme.yellow} content={`${activity()!.total_this_week}`} />
-					</box>
-					<box flexDirection="row" gap={1}>
-						<text fg={theme.fg_dim} content="last week:" />
-						<text fg={theme.yellow} content={`${activity()!.total_last_week}`} />
-					</box>
-					<box flexDirection="row" gap={1}>
-						<text fg={theme.fg_dim} content="delta:" />
-						<text fg={delta_color()} content={delta_str()} />
-					</box>
-				</box>
-
-				{/* Row 3: Total */}
-				<box flexDirection="row" height={1} gap={1}>
-					<text fg={theme.yellow} content={`${total_14d()}`} />
-					<text fg={theme.fg_dim} content="commits in 14 days" />
-				</box>
-			</Show>
-		</box>
-	);
-}
-
-registerWidget({
-	id: "commit-activity",
-	label: "Commit Activity",
-	size_hint,
-	component: CommitActivityWidget,
-});
-
-export { CommitActivityWidget };

package/packages/render/src/components/widgets/devpad-milestones.tsx

@@ -1,88 +0,0 @@
-import { For, Show, Switch, Match, createMemo } from "solid-js";
-import type { WidgetRenderProps, RepoStatus, DevpadMilestone } from "@overview/core";
-import { registerWidget } from "./registry";
-import { theme } from "../../theme";
-import { truncate } from "../../lib/format";
-import { useDevpad } from "../../lib/use-devpad";
-
-const size_hint = { span: "half" as const, min_height: 2 };
-
-function progressBar(total: number, completed: number, width: number): string {
-	if (total === 0) return "░".repeat(width);
-	const filled = Math.round((completed / total) * width);
-	return "█".repeat(filled) + "░".repeat(width - filled);
-}
-
-function DevpadMilestonesWidget(props: WidgetRenderProps & { status: RepoStatus | null }) {
-	const remote_url = createMemo(() => props.status?.remote_url ?? null);
-	const repo_name = createMemo(() => props.status?.name ?? "");
-	const devpad = useDevpad(remote_url, repo_name);
-
-	const milestones = createMemo(() => devpad.data()?.milestones ?? []);
-	const max_visible = 4;
-	const visible = () => milestones().slice(0, max_visible);
-	const overflow = () => Math.max(0, milestones().length - max_visible);
-
-	return (
-		<box flexDirection="column">
-			<Switch>
-				<Match when={devpad.error()}>
-					{(err) => <text fg={theme.fg_dim} content={err()} />}
-				</Match>
-				<Match when={devpad.loading() && !devpad.data()}>
-					<text fg={theme.fg_dim} content="loading…" />
-				</Match>
-				<Match when={!devpad.data()?.project && devpad.data() !== null}>
-					<text fg={theme.fg_dim} content="no devpad project" />
-				</Match>
-				<Match when={true}>
-					<Show
-						when={milestones().length > 0}
-						fallback={<text fg={theme.fg_dim} content="no milestones" />}
-					>
-						<For each={visible()}>
-							{(ms) => {
-								const pct = () =>
-									ms.goals_total > 0
-										? Math.round((ms.goals_completed / ms.goals_total) * 100)
-										: 0;
-								const bar_width = 12;
-								const label = () => {
-									const version_str = ms.target_version ? ` (${ms.target_version})` : "";
-									return truncate(`${ms.name}${version_str}`, Math.max(1, props.width - bar_width - 8));
-								};
-								const bar = () => progressBar(ms.goals_total, ms.goals_completed, bar_width);
-								const bar_color = () => (pct() === 100 ? theme.green : theme.blue);
-
-								return (
-									<box flexDirection="column" height={2}>
-										<box flexDirection="row" height={1}>
-											<text content={label()} />
-											<text fg={theme.fg_dim} content={` ${ms.goals_completed}/${ms.goals_total}`} />
-										</box>
-										<box flexDirection="row" height={1}>
-											<text fg={bar_color()} content={bar()} />
-											<text fg={theme.fg_dim} content={` ${pct()}%`} />
-										</box>
-									</box>
-								);
-							}}
-						</For>
-						<Show when={overflow() > 0}>
-							<text fg={theme.fg_dim} content={`+${overflow()} more`} />
-						</Show>
-					</Show>
-				</Match>
-			</Switch>
-		</box>
-	);
-}
-
-registerWidget({
-	id: "devpad-milestones",
-	label: "Devpad Milestones",
-	size_hint,
-	component: DevpadMilestonesWidget,
-});
-
-export { DevpadMilestonesWidget };