@akiojin/gwt 4.10.0 → 4.12.0

package/dist/cli/ui/screens/solid/BranchListScreen.js

@@ -0,0 +1,829 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@opentui/solid/jsx-runtime";
+/** @jsxImportSource @opentui/solid */
+import { createEffect, createMemo, createSignal, on } from "solid-js";
+import { useKeyboard, useTerminalDimensions } from "@opentui/solid";
+import { TextAttributes } from "@opentui/core";
+import { formatLocalDateTime, getLatestActivityTimestamp, } from "../../utils/branchFormatter.js";
+import stringWidth from "string-width";
+import { getAgentTerminalColor } from "../../../../utils/coding-agent-colors.js";
+import { Header } from "../../components/solid/Header.js";
+import { selectionStyle } from "../../core/theme.js";
+const VIEW_MODES = ["all", "local", "remote"];
+const getCharWidth = (char) => stringWidth(char);
+const measureDisplayWidth = (value) => stringWidth(value);
+const truncateToWidth = (value, maxWidth) => {
+    if (maxWidth <= 0) {
+        return "";
+    }
+    if (measureDisplayWidth(value) <= maxWidth) {
+        return value;
+    }
+    const ellipsis = "...";
+    const ellipsisWidth = measureDisplayWidth(ellipsis);
+    if (ellipsisWidth >= maxWidth) {
+        return ellipsis;
+    }
+    let currentWidth = 0;
+    let result = "";
+    for (const char of Array.from(value)) {
+        const charWidth = getCharWidth(char);
+        if (currentWidth + charWidth + ellipsisWidth > maxWidth) {
+            break;
+        }
+        result += char;
+        currentWidth += charWidth;
+    }
+    return result + ellipsis;
+};
+const padLine = (value, width) => {
+    let line = value;
+    if (measureDisplayWidth(line) > width) {
+        line = truncateToWidth(line, width);
+    }
+    const padding = Math.max(0, width - measureDisplayWidth(line));
+    return line + " ".repeat(padding);
+};
+const segmentStyleKey = (segment) => `${segment.fg ?? ""}|${segment.bg ?? ""}|${segment.attributes ?? ""}`;
+const appendSegment = (segments, segment) => {
+    if (!segment.text) {
+        return;
+    }
+    const last = segments[segments.length - 1];
+    if (last && segmentStyleKey(last) === segmentStyleKey(segment)) {
+        last.text += segment.text;
+        return;
+    }
+    segments.push({ ...segment });
+};
+const measureSegmentsWidth = (segments) => segments.reduce((total, segment) => total + measureDisplayWidth(segment.text), 0);
+const truncateSegmentsToWidth = (segments, maxWidth) => {
+    if (maxWidth <= 0) {
+        return [];
+    }
+    const ellipsis = "...";
+    const ellipsisWidth = measureDisplayWidth(ellipsis);
+    if (ellipsisWidth >= maxWidth) {
+        return [{ text: ellipsis }];
+    }
+    const targetWidth = maxWidth - ellipsisWidth;
+    const result = [];
+    let currentWidth = 0;
+    let truncated = false;
+    for (const segment of segments) {
+        for (const char of Array.from(segment.text)) {
+            const charWidth = getCharWidth(char);
+            if (currentWidth + charWidth > targetWidth) {
+                truncated = true;
+                break;
+            }
+            appendSegment(result, {
+                text: char,
+                fg: segment.fg,
+                bg: segment.bg,
+                attributes: segment.attributes,
+            });
+            currentWidth += charWidth;
+        }
+        if (truncated) {
+            break;
+        }
+    }
+    appendSegment(result, { text: ellipsis });
+    return result;
+};
+const fitSegmentsToWidth = (segments, width) => {
+    const totalWidth = measureSegmentsWidth(segments);
+    if (totalWidth === width) {
+        return segments;
+    }
+    if (totalWidth > width) {
+        return truncateSegmentsToWidth(segments, width);
+    }
+    const padding = " ".repeat(Math.max(0, width - totalWidth));
+    if (padding) {
+        return [...segments, { text: padding }];
+    }
+    return segments;
+};
+const applySelectionStyle = (segments) => segments.map((segment) => ({
+    text: segment.text,
+    fg: selectionStyle.fg,
+    bg: selectionStyle.bg,
+}));
+const CLEANUP_SPINNER_FRAMES = ["-", "\\", "|", "/"];
+const CURSOR_FRAMES = ["|", " "];
+const formatRelativeTime = (date) => {
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffSec = Math.floor(diffMs / 1000);
+    if (diffSec < 60) {
+        return `${diffSec}s ago`;
+    }
+    const diffMin = Math.floor(diffSec / 60);
+    if (diffMin < 60) {
+        return `${diffMin}m ago`;
+    }
+    const diffHour = Math.floor(diffMin / 60);
+    return `${diffHour}h ago`;
+};
+const formatViewModeLabel = (mode) => {
+    switch (mode) {
+        case "all":
+            return "All";
+        case "local":
+            return "Local";
+        case "remote":
+            return "Remote";
+    }
+};
+// Use shared color utility for consistent agent colors (SPEC-3b0ed29b FR-024~FR-027)
+const getToolColor = (label, toolId) => {
+    return getAgentTerminalColor(toolId, label);
+};
+function LoadingIndicator(props) {
+    const frames = ["|", "/", "-", "\\"];
+    const delay = props.delay ?? 300;
+    const [visible, setVisible] = createSignal(props.isLoading && delay <= 0);
+    const [frameIndex, setFrameIndex] = createSignal(0);
+    createEffect(() => {
+        let delayTimer;
+        let intervalTimer;
+        if (props.isLoading) {
+            if (delay <= 0) {
+                setVisible(true);
+            }
+            else {
+                delayTimer = setTimeout(() => {
+                    setVisible(true);
+                }, delay);
+            }
+        }
+        else {
+            setVisible(false);
+            setFrameIndex(0);
+        }
+        if (visible() && props.isLoading) {
+            intervalTimer = setInterval(() => {
+                setFrameIndex((current) => (current + 1) % frames.length);
+            }, 80);
+        }
+        return () => {
+            if (delayTimer) {
+                clearTimeout(delayTimer);
+            }
+            if (intervalTimer) {
+                clearInterval(intervalTimer);
+            }
+        };
+    });
+    if (!props.isLoading || !visible()) {
+        return null;
+    }
+    return (_jsx("text", { fg: "yellow", children: padLine(`${frames[frameIndex()]} ${props.message ?? "Loading... please wait"}`, props.width) }));
+}
+export function BranchListScreen(props) {
+    const terminal = useTerminalDimensions();
+    const [filterQuery, setFilterQuery] = createSignal("");
+    const [filterMode, setFilterMode] = createSignal(false);
+    const [viewMode, setViewMode] = createSignal("all");
+    // カーソル位置: 外部制御（props.cursorPosition）が優先、なければ内部状態を使用
+    const [internalSelectedIndex, setInternalSelectedIndex] = createSignal(props.cursorPosition ?? 0);
+    const selectedIndex = () => props.cursorPosition ?? internalSelectedIndex();
+    const setSelectedIndex = (value) => {
+        const newValue = typeof value === "function" ? value(selectedIndex()) : value;
+        setInternalSelectedIndex(newValue);
+        props.onCursorPositionChange?.(newValue);
+    };
+    const [scrollOffset, setScrollOffset] = createSignal(0);
+    const [cleanupSpinnerIndex, setCleanupSpinnerIndex] = createSignal(0);
+    const [cursorIndex, setCursorIndex] = createSignal(0);
+    const layoutWidth = createMemo(() => Math.max(20, terminal().width || 80));
+    const listWidth = createMemo(() => Math.max(20, layoutWidth()));
+    const fixedLines = createMemo(() => {
+        const headerLines = 2 + (props.workingDirectory ? 1 : 0);
+        const filterLines = 1;
+        const statsLines = 1;
+        const loadingLines = 1;
+        const footerMessageLines = props.cleanupUI?.footerMessage ? 1 : 0;
+        const branchLines = 1;
+        const footerLines = 1;
+        return (headerLines +
+            filterLines +
+            statsLines +
+            loadingLines +
+            footerMessageLines +
+            branchLines +
+            footerLines);
+    });
+    const contentHeight = createMemo(() => {
+        const height = terminal().height || 24;
+        return Math.max(3, height - fixedLines());
+    });
+    const selectedSet = createMemo(() => new Set(props.selectedBranches ?? []));
+    const hasSpinningIndicator = createMemo(() => {
+        if (!props.cleanupUI?.indicators) {
+            return false;
+        }
+        return Object.values(props.cleanupUI.indicators).some((indicator) => indicator.isSpinning);
+    });
+    const hasSpinningFooter = createMemo(() => props.cleanupUI?.footerMessage?.isSpinning ?? false);
+    const safetyPendingActive = createMemo(() => {
+        const pending = props.cleanupUI?.safetyPendingBranches;
+        if (pending) {
+            return pending.size > 0;
+        }
+        return props.cleanupUI?.safetyLoading === true;
+    });
+    const cleanupSpinnerActive = createMemo(() => hasSpinningIndicator() || hasSpinningFooter() || safetyPendingActive());
+    createEffect(() => {
+        let intervalTimer;
+        if (cleanupSpinnerActive()) {
+            intervalTimer = setInterval(() => {
+                setCleanupSpinnerIndex((current) => (current + 1) % CLEANUP_SPINNER_FRAMES.length);
+            }, 120);
+        }
+        else {
+            setCleanupSpinnerIndex(0);
+        }
+        return () => {
+            if (intervalTimer) {
+                clearInterval(intervalTimer);
+            }
+        };
+    });
+    const cleanupSpinnerFrame = createMemo(() => cleanupSpinnerActive()
+        ? (CLEANUP_SPINNER_FRAMES[cleanupSpinnerIndex()] ??
+            CLEANUP_SPINNER_FRAMES[0])
+        : null);
+    const filteredBranches = createMemo(() => {
+        let result = props.branches;
+        const mode = viewMode();
+        if (mode === "local") {
+            result = result.filter((branch) => branch.type === "local");
+        }
+        else if (mode === "remote") {
+            result = result.filter((branch) => branch.type === "remote" || branch.hasRemoteCounterpart === true);
+        }
+        const query = filterQuery().trim().toLowerCase();
+        if (query) {
+            result = result.filter((branch) => {
+                if (branch.name.toLowerCase().includes(query)) {
+                    return true;
+                }
+                if (branch.openPR?.title?.toLowerCase().includes(query)) {
+                    return true;
+                }
+                return false;
+            });
+        }
+        return result;
+    });
+    // ツールラベルの最大幅を動的に計算
+    const maxToolWidth = createMemo(() => {
+        const MIN_TOOL_WIDTH = 7; // "Unknown" の幅
+        let maxWidth = MIN_TOOL_WIDTH;
+        for (const branch of filteredBranches()) {
+            const toolLabel = branch.lastToolUsageLabel?.split("|")?.[0]?.trim() ??
+                branch.lastToolUsage?.toolId ??
+                "Unknown";
+            const width = stringWidth(toolLabel);
+            if (width > maxWidth) {
+                maxWidth = width;
+            }
+        }
+        return maxWidth;
+    });
+    // FR-037 / FR-037a: filterQueryまたはviewModeが実際に変更されたときのみカーソルをリセット
+    // defer: true により初回実行をスキップし、安全状態更新時のリセットを防止
+    createEffect(on(() => [filterQuery(), viewMode()], () => {
+        setSelectedIndex(0);
+        setScrollOffset(0);
+    }, { defer: true }));
+    createEffect(() => {
+        const total = filteredBranches().length;
+        if (total === 0) {
+            setSelectedIndex(0);
+            setScrollOffset(0);
+            return;
+        }
+        setSelectedIndex((prev) => Math.min(prev, total - 1));
+    });
+    createEffect(() => {
+        const total = filteredBranches().length;
+        const limit = contentHeight();
+        const index = selectedIndex();
+        setScrollOffset((prev) => {
+            if (total === 0) {
+                return 0;
+            }
+            let next = prev;
+            if (index < prev) {
+                next = index;
+            }
+            else if (index >= prev + limit) {
+                next = index - limit + 1;
+            }
+            const maxOffset = Math.max(0, total - limit);
+            return Math.min(Math.max(0, next), maxOffset);
+        });
+    });
+    createEffect(() => {
+        let intervalTimer;
+        if (filterMode()) {
+            intervalTimer = setInterval(() => {
+                setCursorIndex((current) => (current + 1) % CURSOR_FRAMES.length);
+            }, 500);
+        }
+        else {
+            setCursorIndex(0);
+        }
+        return () => {
+            if (intervalTimer) {
+                clearInterval(intervalTimer);
+            }
+        };
+    });
+    const cursorFrame = createMemo(() => filterMode()
+        ? (CURSOR_FRAMES[cursorIndex()] ?? CURSOR_FRAMES[0] ?? "")
+        : "");
+    const formatLatestCommit = (timestamp) => {
+        if (!timestamp || Number.isNaN(timestamp)) {
+            return "---";
+        }
+        const formatted = formatLocalDateTime(timestamp * 1000);
+        return formatted || "---";
+    };
+    useKeyboard((key) => {
+        // FR-044: ウィザードポップアップ表示中は入力を無効化
+        if (props.wizardVisible) {
+            return;
+        }
+        if (props.confirmVisible) {
+            return;
+        }
+        if (props.helpVisible) {
+            return;
+        }
+        if (props.cleanupUI?.inputLocked) {
+            return;
+        }
+        if (filterMode()) {
+            if (key.name === "down") {
+                const total = filteredBranches().length;
+                if (total > 0) {
+                    setSelectedIndex((prev) => Math.min(prev + 1, total - 1));
+                }
+                return;
+            }
+            if (key.name === "up") {
+                const total = filteredBranches().length;
+                if (total > 0) {
+                    setSelectedIndex((prev) => Math.max(prev - 1, 0));
+                }
+                return;
+            }
+            if (key.name === "escape") {
+                if (filterQuery()) {
+                    setFilterQuery("");
+                }
+                else {
+                    setFilterMode(false);
+                }
+                return;
+            }
+            if (key.name === "backspace") {
+                setFilterQuery((prev) => prev.slice(0, -1));
+                return;
+            }
+            if (key.name === "return" || key.name === "linefeed") {
+                setFilterMode(false);
+                return;
+            }
+            if (key.sequence &&
+                key.sequence.length === 1 &&
+                !key.ctrl &&
+                !key.meta &&
+                !key.super &&
+                !key.hyper) {
+                setFilterQuery((prev) => prev + key.sequence);
+            }
+            return;
+        }
+        if (key.ctrl && key.name === "c") {
+            props.onQuit?.();
+            return;
+        }
+        if (key.name === "escape" && filterQuery()) {
+            setFilterQuery("");
+            return;
+        }
+        if (key.name === "f" || key.sequence === "f") {
+            setFilterMode(true);
+            return;
+        }
+        if (key.name === "tab") {
+            const currentIndex = VIEW_MODES.indexOf(viewMode());
+            const nextIndex = (currentIndex + 1) % VIEW_MODES.length;
+            setViewMode(VIEW_MODES[nextIndex] ?? "all");
+            setSelectedIndex(0);
+            return;
+        }
+        if (key.name === "down") {
+            const total = filteredBranches().length;
+            if (total > 0) {
+                setSelectedIndex((prev) => Math.min(prev + 1, total - 1));
+            }
+            return;
+        }
+        if (key.name === "up") {
+            const total = filteredBranches().length;
+            if (total > 0) {
+                setSelectedIndex((prev) => Math.max(prev - 1, 0));
+            }
+            return;
+        }
+        if (key.name === "return" || key.name === "linefeed") {
+            key.preventDefault();
+            const selected = filteredBranches()[selectedIndex()];
+            if (selected) {
+                props.onSelect(selected);
+            }
+            return;
+        }
+        if (key.sequence === " " || key.name === "space") {
+            const selected = filteredBranches()[selectedIndex()];
+            if (selected) {
+                props.onToggleSelect?.(selected.name);
+            }
+            return;
+        }
+        if (key.name === "n" || key.sequence === "n") {
+            key.preventDefault();
+            const selected = filteredBranches()[selectedIndex()] ?? null;
+            props.onCreateBranch?.(selected);
+            return;
+        }
+        if (key.name === "c" || key.sequence === "c") {
+            props.onCleanupCommand?.();
+        }
+        else if (key.name === "x" || key.sequence === "x") {
+            props.onRepairWorktrees?.();
+        }
+        else if (key.name === "r" || key.sequence === "r") {
+            props.onRefresh?.();
+        }
+        else if (key.name === "p" || key.sequence === "p") {
+            props.onOpenProfiles?.();
+        }
+        else if (key.name === "l" || key.sequence === "l") {
+            const selected = filteredBranches()[selectedIndex()] ?? null;
+            props.onOpenLogs?.(selected);
+        }
+    });
+    const visibleBranches = createMemo(() => {
+        const start = scrollOffset();
+        const limit = contentHeight();
+        return filteredBranches().slice(start, start + limit);
+    });
+    const renderBranchLine = (branch, index) => {
+        const absoluteIndex = scrollOffset() + index;
+        const isSelected = absoluteIndex === selectedIndex();
+        const columns = listWidth();
+        const indicatorInfo = props.cleanupUI?.indicators?.[branch.name];
+        let leadingIndicator = "";
+        if (indicatorInfo) {
+            leadingIndicator = indicatorInfo.isSpinning
+                ? (CLEANUP_SPINNER_FRAMES[0] ?? "-")
+                : indicatorInfo.icon;
+        }
+        const indicatorColor = !isSelected && indicatorInfo?.color ? indicatorInfo.color : undefined;
+        const isChecked = selectedSet().has(branch.name);
+        const hasUncommitted = branch.worktree?.hasUncommittedChanges === true;
+        const hasUnpushed = branch.hasUnpushedCommits === true;
+        const isWarning = hasUnpushed || hasUncommitted;
+        const selectionIcon = isChecked ? "[*]" : "[ ]";
+        const selectionColor = isChecked && isWarning ? "red" : undefined;
+        let worktreeIcon = ".";
+        let worktreeColor = "gray";
+        if (branch.worktreeStatus === "active") {
+            worktreeIcon = "w";
+            worktreeColor = "brightGreen";
+        }
+        else if (branch.worktreeStatus === "inaccessible") {
+            worktreeIcon = "x";
+            worktreeColor = "red";
+        }
+        const isRemoteBranch = branch.type === "remote";
+        const safetyLoading = props.cleanupUI?.safetyLoading === true;
+        const safetyPendingBranches = props.cleanupUI?.safetyPendingBranches;
+        const isSafetyPending = safetyPendingBranches
+            ? safetyPendingBranches.has(branch.name)
+            : safetyLoading;
+        const spinnerFrame = cleanupSpinnerFrame();
+        let safeIcon = " ";
+        let safeColor;
+        if (isRemoteBranch) {
+            safeIcon = " ";
+            safeColor = undefined;
+        }
+        else if (isSafetyPending) {
+            safeIcon = spinnerFrame ?? "-";
+            safeColor = undefined;
+        }
+        else if (hasUncommitted) {
+            safeIcon = "!";
+            safeColor = "red";
+        }
+        else if (hasUnpushed) {
+            safeIcon = "!";
+            safeColor = "yellow";
+        }
+        else if (branch.isUnmerged) {
+            safeIcon = "*";
+            safeColor = "yellow";
+        }
+        else if (branch.safeToCleanup === true) {
+            safeIcon = "o";
+            safeColor = "brightGreen";
+        }
+        else {
+            safeIcon = "!";
+            safeColor = "red";
+        }
+        let commitText = "---";
+        const latestActivitySec = getLatestActivityTimestamp(branch);
+        if (latestActivitySec > 0) {
+            commitText = formatLatestCommit(latestActivitySec);
+        }
+        const toolLabelRaw = branch.lastToolUsageLabel?.split("|")?.[0]?.trim() ??
+            branch.lastToolUsage?.toolId ??
+            "Unknown";
+        const formatFixedWidth = (value, targetWidth) => {
+            let v = value;
+            if (measureDisplayWidth(v) > targetWidth) {
+                v = truncateToWidth(v, targetWidth);
+            }
+            const padding = Math.max(0, targetWidth - measureDisplayWidth(v));
+            return v + " ".repeat(padding);
+        };
+        const toolWidth = maxToolWidth();
+        const DATE_WIDTH = 16;
+        const paddedTool = formatFixedWidth(toolLabelRaw, toolWidth);
+        const paddedDate = commitText === "---"
+            ? " ".repeat(DATE_WIDTH)
+            : commitText.padStart(DATE_WIDTH, " ");
+        const timestampText = `${paddedTool} | ${paddedDate}`;
+        const timestampWidth = measureDisplayWidth(timestampText);
+        const toolColor = getToolColor(paddedTool, branch.lastToolUsage?.toolId);
+        const displayLabel = branch.type === "remote" && branch.remoteName
+            ? branch.remoteName
+            : branch.name;
+        const staticPrefix = `${leadingIndicator}${selectionIcon} ${worktreeIcon} ${safeIcon} `;
+        const staticPrefixWidth = measureDisplayWidth(staticPrefix);
+        const maxLeftDisplayWidth = Math.max(0, columns - timestampWidth - 1);
+        const maxLabelWidth = Math.max(0, maxLeftDisplayWidth - staticPrefixWidth);
+        let truncatedLabel = truncateToWidth(displayLabel, maxLabelWidth);
+        let leftText = `${staticPrefix}${truncatedLabel}`;
+        let leftDisplayWidth = measureDisplayWidth(leftText);
+        let gapWidth = Math.max(1, columns - leftDisplayWidth - timestampWidth);
+        const buildLine = () => `${leftText}${" ".repeat(gapWidth)}${timestampText}`;
+        let line = buildLine();
+        if (measureDisplayWidth(line) > columns) {
+            const overflow = measureDisplayWidth(line) - columns;
+            gapWidth = Math.max(1, gapWidth - overflow);
+            line = buildLine();
+            if (measureDisplayWidth(line) > columns) {
+                const extra = measureDisplayWidth(line) - columns;
+                const newLabelWidth = Math.max(0, measureDisplayWidth(truncatedLabel) - extra);
+                truncatedLabel = truncateToWidth(displayLabel, newLabelWidth);
+                leftText = `${staticPrefix}${truncatedLabel}`;
+                leftDisplayWidth = measureDisplayWidth(leftText);
+                gapWidth = Math.max(1, columns - leftDisplayWidth - timestampWidth);
+            }
+        }
+        const segments = [];
+        if (leadingIndicator) {
+            appendSegment(segments, { text: leadingIndicator, fg: indicatorColor });
+        }
+        appendSegment(segments, { text: selectionIcon, fg: selectionColor });
+        appendSegment(segments, { text: " " });
+        appendSegment(segments, { text: worktreeIcon, fg: worktreeColor });
+        appendSegment(segments, { text: " " });
+        appendSegment(segments, { text: safeIcon, fg: safeColor });
+        appendSegment(segments, { text: " " });
+        appendSegment(segments, { text: truncatedLabel });
+        appendSegment(segments, { text: " ".repeat(gapWidth) });
+        appendSegment(segments, { text: paddedTool, fg: toolColor });
+        appendSegment(segments, { text: " | " });
+        appendSegment(segments, { text: paddedDate });
+        const lineSegments = fitSegmentsToWidth(segments, columns);
+        return isSelected ? applySelectionStyle(lineSegments) : lineSegments;
+    };
+    const footerActions = [
+        { key: "r", description: "Refresh" },
+        { key: "c", description: "Cleanup" },
+        { key: "x", description: "Repair" },
+        { key: "l", description: "Logs" },
+    ];
+    const filterLineSegments = createMemo(() => {
+        const segments = [];
+        const query = filterQuery();
+        appendSegment(segments, {
+            text: "Filter(f): ",
+            attributes: TextAttributes.DIM,
+        });
+        if (filterMode()) {
+            if (query) {
+                appendSegment(segments, { text: query });
+            }
+            else {
+                appendSegment(segments, {
+                    text: "Type to search...",
+                    attributes: TextAttributes.DIM,
+                });
+            }
+            appendSegment(segments, { text: cursorFrame() });
+        }
+        else {
+            appendSegment(segments, {
+                text: query || "(press f to filter)",
+                attributes: TextAttributes.DIM,
+            });
+        }
+        if (query) {
+            appendSegment(segments, {
+                text: ` (Showing ${filteredBranches().length} of ${props.branches.length})`,
+                attributes: TextAttributes.DIM,
+            });
+        }
+        return fitSegmentsToWidth(segments, layoutWidth());
+    });
+    const statsSegments = createMemo(() => {
+        const segments = [];
+        const separator = "  ";
+        appendSegment(segments, {
+            text: "Mode(tab): ",
+            attributes: TextAttributes.DIM,
+        });
+        appendSegment(segments, {
+            text: formatViewModeLabel(viewMode()),
+            fg: "white",
+            attributes: TextAttributes.BOLD,
+        });
+        appendSegment(segments, {
+            text: separator,
+            attributes: TextAttributes.DIM,
+        });
+        const statsItems = [
+            { label: "Local", value: props.stats.localCount, color: "cyan" },
+            { label: "Remote", value: props.stats.remoteCount, color: "green" },
+            { label: "Worktrees", value: props.stats.worktreeCount, color: "yellow" },
+            { label: "Changes", value: props.stats.changesCount, color: "magenta" },
+        ];
+        statsItems.forEach((item, index) => {
+            appendSegment(segments, {
+                text: `${item.label}: `,
+                attributes: TextAttributes.DIM,
+            });
+            appendSegment(segments, {
+                text: String(item.value),
+                fg: item.color,
+                attributes: TextAttributes.BOLD,
+            });
+            if (index < statsItems.length - 1 || props.lastUpdated) {
+                appendSegment(segments, {
+                    text: separator,
+                    attributes: TextAttributes.DIM,
+                });
+            }
+        });
+        if (props.lastUpdated) {
+            appendSegment(segments, {
+                text: "Updated: ",
+                attributes: TextAttributes.DIM,
+            });
+            appendSegment(segments, {
+                text: formatRelativeTime(props.lastUpdated),
+                fg: "gray",
+            });
+        }
+        return fitSegmentsToWidth(segments, layoutWidth());
+    });
+    const statusLegendSegments = createMemo(() => {
+        const segments = [];
+        const separator = "  ";
+        appendSegment(segments, {
+            text: "Legend: ",
+            attributes: TextAttributes.DIM,
+        });
+        appendSegment(segments, {
+            text: "o",
+            fg: "brightGreen",
+            attributes: TextAttributes.BOLD,
+        });
+        appendSegment(segments, {
+            text: " Safe",
+            fg: "brightGreen",
+        });
+        appendSegment(segments, {
+            text: separator,
+            attributes: TextAttributes.DIM,
+        });
+        appendSegment(segments, {
+            text: "!",
+            fg: "red",
+            attributes: TextAttributes.BOLD,
+        });
+        appendSegment(segments, {
+            text: " Uncommitted",
+            fg: "red",
+        });
+        appendSegment(segments, {
+            text: separator,
+            attributes: TextAttributes.DIM,
+        });
+        appendSegment(segments, {
+            text: "!",
+            fg: "yellow",
+            attributes: TextAttributes.BOLD,
+        });
+        appendSegment(segments, {
+            text: " Unpushed",
+            fg: "yellow",
+        });
+        appendSegment(segments, {
+            text: separator,
+            attributes: TextAttributes.DIM,
+        });
+        appendSegment(segments, {
+            text: "*",
+            fg: "yellow",
+            attributes: TextAttributes.BOLD,
+        });
+        appendSegment(segments, {
+            text: " Unmerged",
+            fg: "yellow",
+        });
+        return fitSegmentsToWidth(segments, layoutWidth());
+    });
+    const footerSegments = createMemo(() => {
+        const segments = [];
+        const separator = "  ";
+        footerActions.forEach((action, index) => {
+            appendSegment(segments, { text: "[", attributes: TextAttributes.DIM });
+            appendSegment(segments, {
+                text: action.key,
+                fg: "cyan",
+                attributes: TextAttributes.BOLD,
+            });
+            appendSegment(segments, { text: "]", attributes: TextAttributes.DIM });
+            appendSegment(segments, { text: ` ${action.description}` });
+            if (index < footerActions.length - 1) {
+                appendSegment(segments, {
+                    text: separator,
+                    attributes: TextAttributes.DIM,
+                });
+            }
+        });
+        return fitSegmentsToWidth(segments, layoutWidth());
+    });
+    const renderSegmentLine = (segments) => (_jsx("box", { flexDirection: "row", children: segments.map((segment) => (_jsx("text", { ...(segment.fg ? { fg: segment.fg } : {}), ...(segment.bg ? { bg: segment.bg } : {}), ...(segment.attributes ? { attributes: segment.attributes } : {}), children: segment.text }))) }));
+    const selectedWorktreeLabel = createMemo(() => {
+        const branches = filteredBranches();
+        if (branches.length === 0) {
+            return "(none)";
+        }
+        const selected = branches[selectedIndex()];
+        if (!selected) {
+            return "(none)";
+        }
+        if (selected.worktree?.path) {
+            return selected.worktree.path;
+        }
+        if (selected.isCurrent && props.workingDirectory) {
+            return props.workingDirectory;
+        }
+        return "(none)";
+    });
+    return (_jsxs("box", { flexDirection: "column", height: terminal().height || 24, children: [_jsx(Header, { title: "gwt - Branch Selection", titleColor: "cyan", width: layoutWidth(), ...(props.version !== undefined ? { version: props.version } : {}), ...(props.workingDirectory
+                    ? { workingDirectory: props.workingDirectory }
+                    : {}), ...(props.activeProfile !== undefined
+                    ? { activeProfile: props.activeProfile }
+                    : {}) }), renderSegmentLine(filterLineSegments()), renderSegmentLine(statsSegments()), _jsxs("box", { flexDirection: "column", flexGrow: 1, children: [Boolean(props.loading) && props.branches.length === 0 ? (_jsx(LoadingIndicator, { isLoading: true, message: "Loading Git information...", width: layoutWidth(), ...(props.loadingIndicatorDelay !== undefined
+                            ? { delay: props.loadingIndicatorDelay }
+                            : {}) })) : (renderSegmentLine(statusLegendSegments())), props.error && (_jsxs(_Fragment, { children: [_jsx("text", { fg: "red", attributes: TextAttributes.BOLD, children: padLine(`Error: ${props.error.message}`, layoutWidth()) }), process.env.DEBUG && props.error.stack && (_jsxs(_Fragment, { children: [_jsx("text", { attributes: TextAttributes.DIM, children: padLine("", layoutWidth()) }), props.error.stack.split("\n").map((line) => (_jsx("text", { fg: "gray", attributes: TextAttributes.DIM, children: padLine(line, layoutWidth()) })))] }))] })), !props.loading && !props.error && props.branches.length === 0 && (_jsx("text", { attributes: TextAttributes.DIM, children: padLine("No branches found", layoutWidth()) })), !props.loading &&
+                        !props.error &&
+                        props.branches.length > 0 &&
+                        filteredBranches().length === 0 &&
+                        filterQuery() && (_jsx("text", { attributes: TextAttributes.DIM, children: padLine("No branches match your filter", layoutWidth()) })), !props.loading && !props.error && filteredBranches().length > 0 && (_jsxs(_Fragment, { children: [visibleBranches().map((branch, index) => {
+                                const rowSegments = renderBranchLine(branch, index);
+                                return renderSegmentLine(rowSegments);
+                            }), Array.from({
+                                length: Math.max(0, contentHeight() - visibleBranches().length),
+                            }).map(() => (_jsx("text", { children: padLine("", listWidth()) })))] }))] }), props.cleanupUI?.footerMessage && (_jsx("text", { ...(props.cleanupUI.footerMessage.color
+                    ? { fg: props.cleanupUI.footerMessage.color }
+                    : {}), children: padLine(props.cleanupUI.footerMessage.isSpinning && cleanupSpinnerFrame()
+                    ? `${cleanupSpinnerFrame()} ${props.cleanupUI.footerMessage.text}`
+                    : props.cleanupUI.footerMessage.text, layoutWidth()) })), _jsx("text", { attributes: TextAttributes.DIM, children: padLine(`Worktree: ${selectedWorktreeLabel()}`, layoutWidth()) }), renderSegmentLine(footerSegments())] }));
+}
+//# sourceMappingURL=BranchListScreen.js.map