parallel-codex-tui 0.1.0 → 0.1.4

package/dist/tui/InputBar.js

@@ -1,39 +1,110 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Text } from "ink";
-import { compactTailByDisplayWidth, displayWidth } from "./display-width.js";
-const INPUT_BAR_BACKGROUND = "ansi256(234)";
-export function InputBar({ mode, busy = false, hasWorkers = false, nativeClosed = false, value, terminalWidth = process.stdout.columns || 120, onChange, onSubmit }) {
+import { compactEndByDisplayWidth, compactTailByDisplayWidth, displayWidth } from "./display-width.js";
+import { TUI_THEME } from "./theme.js";
+export function InputBar({ mode, ready = true, busy = false, routeFallback = false, collaborationDetail = false, collaborationUnresolved = false, collaborationBack = "workers", featureCanCancel = false, featureCancelConfirm = false, taskSessionAction = null, taskSessionsIncludeArchived = false, canRetry = false, hasWorkers = false, hasActiveTask = false, hasTaskResult = false, taskResultExpanded = false, chatScrollOffset = 0, chatMaxScrollOffset = 0, nativeClosed = false, searchMatchIndex = 0, searchMatchCount = 0, value, cursor, terminalWidth: providedTerminalWidth, onChange, onSubmit }) {
+    const terminalWidth = providedTerminalWidth ?? process.stdout.columns ?? 120;
+    const fillRail = providedTerminalWidth !== undefined || typeof process.stdout.columns === "number";
+    if (mode === "worker-search") {
+        const suffix = workerSearchInputSuffix(terminalWidth, searchMatchIndex, searchMatchCount);
+        const prefix = terminalWidth < 4 ? "/" : "/ ";
+        const textBudget = Math.max(1, terminalWidth - (terminalWidth > 1 ? 2 : 0));
+        const valueWidth = Math.max(1, textBudget - displayWidth(prefix) - 1 - displayWidth(suffix));
+        const display = chatInputDisplayParts(value, cursor ?? Array.from(value).length, valueWidth + 6);
+        const textWidth = displayWidth(`${prefix}${display.before}|${display.after}${suffix}`);
+        return (_jsxs(InputRail, { terminalWidth: terminalWidth, textWidth: textWidth, fill: fillRail, children: [_jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.accent, bold: true, children: prefix }), _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.text, children: display.before }), _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.accent, bold: true, children: "|" }), _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.text, children: display.after }), suffix ? _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.muted, children: suffix }) : null] }));
+    }
+    if (mode === "sessions") {
+        if (taskSessionAction?.type === "rename") {
+            const prefix = terminalWidth < 12 ? "> " : "rename > ";
+            const valueWidth = Math.max(1, terminalWidth - displayWidth(prefix) - 3);
+            const display = chatInputDisplayParts(taskSessionAction.value, taskSessionAction.cursor, valueWidth);
+            const textWidth = displayWidth(`${prefix}${display.before}|${display.after}`);
+            return (_jsxs(InputRail, { terminalWidth: terminalWidth, textWidth: textWidth, fill: fillRail, children: [_jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.accent, bold: true, children: prefix }), _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.text, children: display.before }), _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.accent, bold: true, children: "|" }), _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.text, children: display.after })] }));
+        }
+        if (taskSessionAction?.type === "delete") {
+            const hints = taskSessionDeleteInputHints(terminalWidth, taskSessionAction.title);
+            return (_jsxs(InputRail, { terminalWidth: terminalWidth, textWidth: displayWidth(`${hints.label}${hints.detail}`), fill: fillRail, children: [_jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.danger, bold: true, children: hints.label }), hints.detail ? _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.muted, children: hints.detail }) : null] }));
+        }
+        const hints = taskSessionsInputHints(terminalWidth, taskSessionsIncludeArchived);
+        return (_jsxs(InputRail, { terminalWidth: terminalWidth, textWidth: displayWidth(`${hints.label}${hints.detail}`), fill: fillRail, children: [_jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.accent, bold: true, children: hints.label }), hints.detail ? _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.muted, children: hints.detail }) : null] }));
+    }
+    if (mode === "collaboration") {
+        const hints = collaborationDetail
+            ? collaborationDetailInputHints(terminalWidth)
+            : collaborationTimelineInputHints(terminalWidth, collaborationUnresolved, collaborationBack);
+        return (_jsxs(InputRail, { terminalWidth: terminalWidth, textWidth: displayWidth(`${hints.label}${hints.detail}`), fill: fillRail, children: [_jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.accent, bold: true, children: hints.label }), hints.detail ? _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.muted, children: hints.detail }) : null] }));
+    }
+    if (mode === "features") {
+        const hints = featureBoardInputHints(terminalWidth, {
+            canCancel: featureCanCancel,
+            confirmCancel: featureCancelConfirm,
+            canRetry
+        });
+        return (_jsxs(InputRail, { terminalWidth: terminalWidth, textWidth: displayWidth(`${hints.label}${hints.detail}`), fill: fillRail, children: [_jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.accent, bold: true, children: hints.label }), hints.detail ? _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.muted, children: hints.detail }) : null] }));
+    }
+    if (mode === "workers") {
+        const hints = workerOverviewInputHints(terminalWidth);
+        return (_jsxs(InputRail, { terminalWidth: terminalWidth, textWidth: displayWidth(`${hints.label}${hints.detail}`), fill: fillRail, children: [_jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.accent, bold: true, children: hints.label }), hints.detail ? _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.muted, children: hints.detail }) : null] }));
+    }
     if (mode === "worker") {
         const hints = workerInputHints(terminalWidth);
-        return (_jsxs(InputRail, { terminalWidth: terminalWidth, textWidth: displayWidth(`${hints.label}${hints.detail}`), children: [_jsx(Text, { backgroundColor: INPUT_BAR_BACKGROUND, color: "cyan", bold: true, children: hints.label }), hints.detail ? _jsx(Text, { backgroundColor: INPUT_BAR_BACKGROUND, dimColor: true, children: hints.detail }) : null] }));
+        return (_jsxs(InputRail, { terminalWidth: terminalWidth, textWidth: displayWidth(`${hints.label}${hints.detail}`), fill: fillRail, children: [_jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.accent, bold: true, children: hints.label }), hints.detail ? _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.muted, children: hints.detail }) : null] }));
     }
     if (mode === "native") {
         const hints = nativeInputHints(terminalWidth, nativeClosed);
-        return (_jsxs(InputRail, { terminalWidth: terminalWidth, textWidth: displayWidth(`${hints.label}${hints.detail}`), children: [_jsx(Text, { backgroundColor: INPUT_BAR_BACKGROUND, color: "cyan", bold: true, children: hints.label }), hints.detail ? _jsx(Text, { backgroundColor: INPUT_BAR_BACKGROUND, dimColor: true, children: hints.detail }) : null] }));
+        return (_jsxs(InputRail, { terminalWidth: terminalWidth, textWidth: displayWidth(`${hints.label}${hints.detail}`), fill: fillRail, children: [_jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.accent, bold: true, children: hints.label }), hints.detail ? _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.muted, children: hints.detail }) : null] }));
+    }
+    if (mode === "router") {
+        const hints = routerInputHints(terminalWidth);
+        return (_jsxs(InputRail, { terminalWidth: terminalWidth, textWidth: displayWidth(`${hints.label}${hints.detail}`), fill: fillRail, children: [_jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.accent, bold: true, children: hints.label }), hints.detail ? _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.muted, children: hints.detail }) : null] }));
+    }
+    if (!ready) {
+        const starting = chatStartingDisplayValue(terminalWidth);
+        return (_jsx(InputRail, { terminalWidth: terminalWidth, textWidth: displayWidth(starting), fill: fillRail, children: _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.muted, children: starting }) }));
+    }
+    if (routeFallback) {
+        const hints = routeFallbackInputHints(terminalWidth);
+        return (_jsxs(InputRail, { terminalWidth: terminalWidth, textWidth: displayWidth(`${hints.label}${hints.detail}`), fill: fillRail, children: [_jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.warning, bold: true, children: hints.label }), hints.detail ? _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.text, children: hints.detail }) : null] }));
     }
     const busyText = chatBusyDisplayValue(terminalWidth);
     const prompt = busy ? "run" : ">";
     if (busy) {
-        return (_jsxs(InputRail, { terminalWidth: terminalWidth, textWidth: displayWidth(busyText ? `${prompt} ${busyText}` : prompt), children: [_jsx(Text, { backgroundColor: INPUT_BAR_BACKGROUND, color: "yellow", bold: true, children: prompt }), busyText ? (_jsxs(_Fragment, { children: [_jsx(Text, { backgroundColor: INPUT_BAR_BACKGROUND, children: " " }), _jsx(Text, { backgroundColor: INPUT_BAR_BACKGROUND, color: "yellow", children: busyText })] })) : null] }));
+        return (_jsxs(InputRail, { terminalWidth: terminalWidth, textWidth: displayWidth(busyText ? `${prompt} ${busyText}` : prompt), fill: fillRail, children: [_jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.warning, bold: true, children: prompt }), busyText ? (_jsxs(_Fragment, { children: [_jsx(Text, { backgroundColor: TUI_THEME.rail, children: " " }), _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.warning, children: busyText })] })) : null] }));
     }
     if (value) {
-        const displayValue = chatInputDisplayValue(value, terminalWidth);
-        return (_jsxs(InputRail, { terminalWidth: terminalWidth, textWidth: displayWidth(`${prompt} ${displayValue}|`), children: [_jsx(Text, { backgroundColor: INPUT_BAR_BACKGROUND, color: "cyan", bold: true, children: prompt }), _jsx(Text, { backgroundColor: INPUT_BAR_BACKGROUND, children: " " }), _jsxs(Text, { backgroundColor: INPUT_BAR_BACKGROUND, children: [displayValue, "|"] })] }));
+        const display = chatInputDisplayParts(value, cursor ?? Array.from(value).length, terminalWidth);
+        return (_jsxs(InputRail, { terminalWidth: terminalWidth, textWidth: displayWidth(`${prompt} ${display.before}|${display.after}`), fill: fillRail, children: [_jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.accent, bold: true, children: prompt }), _jsx(Text, { backgroundColor: TUI_THEME.rail, children: " " }), _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.text, children: display.before }), _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.accent, bold: true, children: "|" }), _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.text, children: display.after })] }));
     }
     const hasLeadingPromptSpace = terminalWidth >= 10;
-    const placeholder = chatPlaceholderDisplayText(terminalWidth, { hasWorkers }, { leadingSpace: hasLeadingPromptSpace });
-    return (_jsxs(InputRail, { terminalWidth: terminalWidth, textWidth: displayWidth(`${prompt}${hasLeadingPromptSpace ? " " : ""}|${placeholder}`), children: [_jsx(Text, { backgroundColor: INPUT_BAR_BACKGROUND, color: "cyan", bold: true, children: prompt }), hasLeadingPromptSpace ? _jsx(Text, { backgroundColor: INPUT_BAR_BACKGROUND, children: " " }) : null, _jsx(Text, { backgroundColor: INPUT_BAR_BACKGROUND, children: "|" }), _jsx(Text, { backgroundColor: INPUT_BAR_BACKGROUND, dimColor: true, children: placeholder })] }));
+    const placeholder = chatPlaceholderDisplayText(terminalWidth, {
+        hasWorkers,
+        hasActiveTask,
+        hasTaskResult,
+        taskResultExpanded,
+        canRetry,
+        scrollOffset: chatScrollOffset,
+        maxScrollOffset: chatMaxScrollOffset
+    }, { leadingSpace: hasLeadingPromptSpace });
+    return (_jsxs(InputRail, { terminalWidth: terminalWidth, textWidth: displayWidth(`${prompt}${hasLeadingPromptSpace ? " " : ""}|${placeholder}`), fill: fillRail, children: [_jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.accent, bold: true, children: prompt }), hasLeadingPromptSpace ? _jsx(Text, { backgroundColor: TUI_THEME.rail, children: " " }) : null, _jsx(Text, { backgroundColor: TUI_THEME.rail, color: TUI_THEME.accent, bold: true, children: "|" }), _jsx(Text, { backgroundColor: TUI_THEME.rail, color: canRetry ? TUI_THEME.warning : hasTaskResult ? TUI_THEME.accent : TUI_THEME.muted, children: placeholder })] }));
+}
+function InputRail({ fill, terminalWidth, textWidth, children }) {
+    const { leadingWidth, trailingWidth } = inputRailLayout(terminalWidth, textWidth, { fill });
+    return (_jsxs(Box, { children: [leadingWidth > 0 ? _jsx(Text, { backgroundColor: TUI_THEME.rail, children: " ".repeat(leadingWidth) }) : null, children, trailingWidth > 0 ? _jsx(Text, { backgroundColor: TUI_THEME.rail, children: " ".repeat(trailingWidth) }) : null] }));
 }
-function InputRail({ terminalWidth, textWidth, children }) {
+export function inputRailLayout(terminalWidth, textWidth, options = {}) {
     const leadingWidth = terminalWidth > 1 ? 1 : 0;
+    if (options.fill === false) {
+        return { leadingWidth, trailingWidth: 0 };
+    }
     const renderWidth = typeof process.stdout.columns === "number"
         ? Math.max(1, Math.min(terminalWidth, process.stdout.columns))
-        : null;
-    const barWidth = renderWidth === null ? null : Math.max(1, renderWidth - 1);
-    const trailingWidth = barWidth === null
-        ? 0
-        : Math.max(0, barWidth - leadingWidth - textWidth);
-    return (_jsxs(Box, { children: [leadingWidth > 0 ? _jsx(Text, { backgroundColor: INPUT_BAR_BACKGROUND, children: " ".repeat(leadingWidth) }) : null, children, trailingWidth > 0 ? _jsx(Text, { backgroundColor: INPUT_BAR_BACKGROUND, children: " ".repeat(trailingWidth) }) : null] }));
+        : Math.max(1, terminalWidth);
+    const barWidth = Math.max(1, renderWidth - 1);
+    return {
+        leadingWidth,
+        trailingWidth: Math.max(0, barWidth - leadingWidth - Math.max(0, textWidth))
+    };
 }
 export function chatPlaceholderDisplayText(terminalWidth, options = {}, display = {}) {
     const placeholder = chatPlaceholderDisplayValue(terminalWidth, options);
@@ -44,37 +115,211 @@ export function chatPlaceholderDisplayText(terminalWidth, options = {}, display
 }
 export function chatInputDisplayValue(value, terminalWidth) {
     const valueWidth = Math.max(1, terminalWidth - 6);
-    return compactTailByDisplayWidth(value, valueWidth);
+    return compactTailByDisplayWidth(chatInputVisibleValue(value), valueWidth);
+}
+export function chatInputDisplayParts(value, cursor, terminalWidth) {
+    const sourceChars = Array.from(value);
+    const chars = sourceChars.map(chatInputVisibleCharacter);
+    const clampedCursor = Math.min(sourceChars.length, Math.max(0, Math.trunc(cursor)));
+    const valueWidth = Math.max(1, terminalWidth - 6);
+    if (displayWidth(chars.join("")) <= valueWidth) {
+        return {
+            before: chars.slice(0, clampedCursor).join(""),
+            after: chars.slice(clampedCursor).join("")
+        };
+    }
+    const beforeCursor = chars.slice(0, clampedCursor).join("");
+    const afterCursor = chars.slice(clampedCursor).join("");
+    if (valueWidth < 6) {
+        return clampedCursor > 0
+            ? { before: compactTailByDisplayWidth(beforeCursor, valueWidth), after: "" }
+            : { before: "", after: compactEndByDisplayWidth(afterCursor, valueWidth) };
+    }
+    let start = clampedCursor;
+    let end = clampedCursor;
+    const renderedWidth = (nextStart, nextEnd) => displayWidth([
+        nextStart > 0 ? "..." : "",
+        chars.slice(nextStart, nextEnd).join(""),
+        nextEnd < chars.length ? "..." : ""
+    ].join(""));
+    while (true) {
+        const canExpandLeft = start > 0 && renderedWidth(start - 1, end) <= valueWidth;
+        const canExpandRight = end < chars.length && renderedWidth(start, end + 1) <= valueWidth;
+        if (!canExpandLeft && !canExpandRight) {
+            break;
+        }
+        if (canExpandLeft && canExpandRight) {
+            const leftWidth = displayWidth(chars.slice(start, clampedCursor).join(""));
+            const rightWidth = displayWidth(chars.slice(clampedCursor, end).join(""));
+            if (leftWidth <= rightWidth) {
+                start -= 1;
+            }
+            else {
+                end += 1;
+            }
+        }
+        else if (canExpandLeft) {
+            start -= 1;
+        }
+        else {
+            end += 1;
+        }
+    }
+    return {
+        before: `${start > 0 ? "..." : ""}${chars.slice(start, clampedCursor).join("")}`,
+        after: `${chars.slice(clampedCursor, end).join("")}${end < chars.length ? "..." : ""}`
+    };
+}
+function chatInputVisibleValue(value) {
+    return Array.from(value).map(chatInputVisibleCharacter).join("");
+}
+function chatInputVisibleCharacter(char) {
+    if (char === "\n" || char === "\r") {
+        return "↵";
+    }
+    if (char === "\t") {
+        return "⇥";
+    }
+    return char;
 }
 export function chatPlaceholderDisplayValue(terminalWidth, options = {}) {
-    if (options.hasWorkers) {
-        return chatTaskPlaceholderDisplayValue(terminalWidth);
+    if (options.canRetry) {
+        return selectChatPlaceholder(terminalWidth, options.hasActiveTask
+            ? ["message · ^R retry · ^N new", "^R retry · ^N", "^R retry", "retry"]
+            : ["message · ^R retry", "^R retry", "retry"]);
     }
-    if (terminalWidth < 14) {
-        return "msg";
+    const maxScrollOffset = Math.max(0, options.maxScrollOffset ?? 0);
+    const scrollOffset = Math.min(Math.max(0, options.scrollOffset ?? 0), maxScrollOffset);
+    if (options.hasTaskResult) {
+        return chatTaskResultPlaceholderDisplayValue(terminalWidth, Boolean(options.taskResultExpanded), Boolean(options.hasWorkers), Boolean(options.hasActiveTask), scrollOffset, maxScrollOffset);
     }
-    if (terminalWidth < 22) {
-        return "message";
+    if (scrollOffset > 0) {
+        return chatHistoryPlaceholderDisplayValue(terminalWidth, scrollOffset, maxScrollOffset);
     }
-    return chatInputDisplayValue("Type a message", terminalWidth);
+    if (options.hasActiveTask && !options.hasWorkers) {
+        return selectChatPlaceholder(terminalWidth, [
+            "message · ^N new · ^P project · ^T tasks · ^G routes",
+            "message · ^N new · ^P project · ^G routes",
+            "message · ^N new · ^P project",
+            "message · ^N new",
+            "msg · ^N",
+            "msg"
+        ]);
+    }
+    if (options.hasWorkers) {
+        return chatTaskPlaceholderDisplayValue(terminalWidth, maxScrollOffset > 0, options.hasActiveTask);
+    }
+    if (maxScrollOffset > 0 && terminalWidth >= 22) {
+        return selectChatPlaceholder(terminalWidth, ["message · scroll", "message", "msg"]);
+    }
+    return selectChatPlaceholder(terminalWidth, [
+        "message · ^P project · ^T tasks · ^G routes",
+        "message · ^P project · ^G routes",
+        "message · ^P project",
+        "message",
+        "msg"
+    ]);
+}
+function chatTaskResultPlaceholderDisplayValue(terminalWidth, expanded, hasWorkers, hasActiveTask, scrollOffset, maxScrollOffset) {
+    const toggle = expanded ? "^D compact" : "^D details";
+    const position = expanded && maxScrollOffset > 0
+        ? scrollOffset > 0 ? `result ${scrollOffset}/${maxScrollOffset}` : "result · scroll"
+        : "message";
+    const candidates = hasWorkers
+        ? [
+            `${position} · ${toggle} · ^N new · ^W logs · ^B workers · ^T tasks · Tab · ^O attach`,
+            `${position} · ${toggle} · ^N new · ^W logs · ^T tasks · Tab · ^O attach`,
+            `${position} · ${toggle} · ^W logs · ^B workers · ^T tasks · Tab · ^O attach`,
+            `${position} · ${toggle} · ^W logs · ^T tasks · Tab · ^O attach`,
+            `${position} · ${toggle} · ^W logs · Tab · ^O attach`,
+            `${position} · ${toggle} · ^W logs`,
+            `${toggle} · ^W logs`,
+            toggle,
+            "^D"
+        ]
+        : [
+            `${position} · ${toggle}${hasActiveTask ? " · ^N new" : ""}`,
+            `${position} · ${toggle}`,
+            toggle,
+            "^D"
+        ];
+    return selectChatPlaceholder(terminalWidth, candidates);
 }
-function chatTaskPlaceholderDisplayValue(terminalWidth) {
+function chatHistoryPlaceholderDisplayValue(terminalWidth, offset, maxOffset) {
     if (terminalWidth < 14) {
-        return "msg";
+        return "back";
     }
-    if (terminalWidth < 19) {
-        return "msg · ^W";
-    }
-    if (terminalWidth < 24) {
-        return "msg · ^W · ^O";
+    if (terminalWidth < 20) {
+        return `back ${offset}`;
     }
     if (terminalWidth < 38) {
-        return chatInputDisplayValue("Message · ^W · ^O", terminalWidth);
+        return selectChatPlaceholder(terminalWidth, [
+            `back ${offset}/${maxOffset} · PgDn`,
+            `back ${offset}/${maxOffset}`,
+            `back ${offset}`,
+            "back"
+        ]);
     }
-    if (terminalWidth < 64) {
-        return chatInputDisplayValue("Message · ^W logs · ^O attach", terminalWidth);
+    return selectChatPlaceholder(terminalWidth, [
+        `message · back ${offset}/${maxOffset} · PgDn latest`,
+        `back ${offset}/${maxOffset} · PgDn latest`,
+        `back ${offset}/${maxOffset} · PgDn`,
+        `back ${offset}/${maxOffset}`,
+        `back ${offset}`,
+        "back"
+    ]);
+}
+function chatTaskPlaceholderDisplayValue(terminalWidth, scrollable = false, activeTask = false) {
+    if (activeTask && terminalWidth >= 72) {
+        const activeCandidates = scrollable
+            ? [
+                "message · scroll · ^N new · ^W logs · ^B workers · ^T tasks · Tab · ^O attach · ^G routes",
+                "message · scroll · ^N new · ^W logs · ^B workers · Tab · ^O attach · ^G routes"
+            ]
+            : [
+                "message · ^N new · ^W logs · ^B workers · ^T tasks · Tab · ^O attach · ^G routes",
+                "message · ^N new · ^W logs · ^B workers · Tab · ^O attach · ^G routes"
+            ];
+        const active = activeCandidates.find((candidate) => displayWidth(candidate) <= chatPlaceholderValueWidth(terminalWidth));
+        if (active) {
+            return active;
+        }
     }
-    return chatInputDisplayValue("Type a message · ^W logs · ^O attach", terminalWidth);
+    return selectChatPlaceholder(terminalWidth, scrollable
+        ? [
+            "message · scroll · ^W logs · ^B workers · ^T tasks · Tab · ^O attach · ^G routes",
+            "message · scroll · ^W logs · ^B workers · Tab · ^O attach · ^G routes",
+            "message · scroll · ^W logs · Tab · ^O attach · ^G routes",
+            "message · scroll · ^W logs · Tab · ^O attach",
+            "scroll · ^W logs · Tab · ^O attach",
+            "scroll · ^W logs · ^O attach",
+            "^W logs · ^O attach",
+            "message · ^W logs",
+            "msg · ^W logs",
+            "^W logs",
+            "msg"
+        ]
+        : [
+            "message · ^W logs · ^B workers · ^T tasks · Tab · ^O attach · ^G routes",
+            "message · ^W logs · ^B workers · Tab · ^O attach · ^G routes",
+            "message · ^W logs · Tab · ^O attach · ^G routes",
+            "message · ^W logs · Tab · ^O attach",
+            "message · ^W logs · ^O attach",
+            "^W logs · ^O attach",
+            "message · ^W logs",
+            "msg · ^W logs",
+            "^W logs",
+            "msg"
+        ]);
+}
+function selectChatPlaceholder(terminalWidth, candidates) {
+    const valueWidth = chatPlaceholderValueWidth(terminalWidth);
+    return candidates.find((candidate) => displayWidth(candidate) <= valueWidth)
+        ?? candidates.at(-1)
+        ?? "";
+}
+function chatPlaceholderValueWidth(terminalWidth) {
+    return Math.max(1, terminalWidth - (terminalWidth >= 10 ? 6 : 4));
 }
 export function chatBusyDisplayValue(terminalWidth) {
     if (terminalWidth < 14) {
@@ -83,28 +328,228 @@ export function chatBusyDisplayValue(terminalWidth) {
     if (terminalWidth < 22) {
         return "busy";
     }
-    return "Running...";
+    if (terminalWidth >= 34) {
+        return "working · Esc stop";
+    }
+    return "working";
+}
+function routeFallbackInputHints(width) {
+    if (width < 10) {
+        return { label: "route", detail: "" };
+    }
+    if (width < 14) {
+        return { label: "choose", detail: "" };
+    }
+    if (width < 20) {
+        return { label: "1M", detail: " · 2P" };
+    }
+    if (width < 28) {
+        return { label: "1 Main", detail: " · 2 Pair" };
+    }
+    if (width < 40) {
+        return { label: "1 Main", detail: " · 2 Parallel" };
+    }
+    if (width < 54) {
+        return { label: "route", detail: " · 1 Main · 2 Parallel · Esc" };
+    }
+    if (width < 75) {
+        return { label: "route failed", detail: " · 1 Main · 2 Parallel · R · Esc" };
+    }
+    return { label: "route failed", detail: " · 1 Main · 2 Parallel · R retry · Esc cancel" };
+}
+export function chatStartingDisplayValue(terminalWidth) {
+    if (terminalWidth < 8) {
+        return "";
+    }
+    return terminalWidth < 12 ? "start" : "starting";
 }
 function workerInputHints(width) {
-    if (width < 12) {
+    if (width < 10) {
         return { label: "log", detail: "" };
     }
-    if (width < 15) {
-        return { label: "log", detail: " · ^O" };
+    if (width < 16) {
+        return { label: "Esc chat", detail: "" };
+    }
+    if (width < 17) {
+        return { label: "log", detail: " · Esc chat" };
+    }
+    if (width < 22) {
+        return { label: "logs", detail: " · Esc chat" };
     }
-    if (width < 18) {
-        return { label: "log", detail: " · Pg · ^O" };
+    if (width < 28) {
+        return { label: "logs", detail: " · Pg · Esc chat" };
+    }
+    if (width < 32) {
+        return { label: "logs", detail: " · Pg · Tab · Esc chat" };
+    }
+    if (width < 44) {
+        return { label: "logs", detail: " · scroll · Tab · Esc chat" };
+    }
+    if (width < 54) {
+        return { label: "logs", detail: " · scroll · Tab · ^O attach · Esc chat" };
+    }
+    if (width < 71) {
+        return { label: "logs", detail: " · scroll · ^F find · Tab · ^O attach · Esc chat" };
+    }
+    if (width < 84) {
+        return { label: "logs", detail: " · scroll · ^F find · E err · D diff · Tab · ^O attach · Esc chat" };
+    }
+    return { label: "logs", detail: " · scroll · ^F find · E err · D diff · Tab · ^B workers · ^O attach · Esc chat" };
+}
+function workerOverviewInputHints(width) {
+    if (width < 16) {
+        return { label: "wrk", detail: "" };
+    }
+    if (width < 20) {
+        return { label: "wrk", detail: " · Esc back" };
     }
     if (width < 28) {
-        return { label: "logs", detail: " · Pg · ^O" };
+        return { label: "workers", detail: " · Esc back" };
     }
-    if (width < 56) {
-        return { label: "logs", detail: " · Pg · Tab · ^O · Esc" };
+    if (width < 41) {
+        return { label: "workers", detail: " · Up/Dn · Esc back" };
+    }
+    if (width < 53) {
+        return { label: "workers", detail: " · Up/Dn · Enter logs · Esc back" };
     }
     if (width < 72) {
-        return { label: "logs", detail: " · Pg/wheel · Tab · ^O · Esc" };
+        return { label: "workers", detail: " · Up/Dn · Enter logs · ^O attach · Esc back" };
+    }
+    if (width < 86) {
+        return { label: "workers", detail: " · Up/Dn · Enter logs · F board · C flow · ^O attach · Esc back" };
     }
-    return { label: "logs", detail: " · read · wheel/Pg · Tab worker · ^O attach · Esc chat" };
+    return { label: "workers", detail: " · Up/Dn select · Enter logs · F features · C timeline · ^O attach · Esc back" };
+}
+function featureBoardInputHints(width, options) {
+    if (options.confirmCancel) {
+        return selectInputHints(width, [
+            { label: "cancel feature?", detail: " · X confirm · Esc keep" },
+            { label: "cancel?", detail: " · X confirm · Esc keep" },
+            { label: "cancel?", detail: " · Esc keep" },
+            { label: "Esc keep", detail: "" },
+            { label: "stop?", detail: "" },
+            { label: "?", detail: "" }
+        ]);
+    }
+    if (options.canCancel) {
+        return selectInputHints(width, [
+            { label: "features", detail: " · Up/Dn select · Enter timeline · X cancel · R refresh · Esc workers" },
+            { label: "features", detail: " · Up/Dn select · X cancel · R refresh · Esc workers" },
+            { label: "features", detail: " · Up/Dn select · X cancel · Esc workers" },
+            { label: "features", detail: " · X cancel · Esc workers" },
+            { label: "features", detail: " · Esc workers" },
+            { label: "features", detail: "" },
+            { label: "ft", detail: "" },
+            { label: "f", detail: "" }
+        ]);
+    }
+    if (options.canRetry) {
+        return selectInputHints(width, [
+            { label: "features", detail: " · Up/Dn select · Enter timeline · ^R retry task · R refresh · Esc workers" },
+            { label: "features", detail: " · Up/Dn select · ^R retry task · R refresh · Esc workers" },
+            { label: "features", detail: " · Up/Dn select · ^R retry · R refresh · Esc workers" },
+            { label: "features", detail: " · Up/Dn select · ^R retry · Esc workers" },
+            { label: "features", detail: " · ^R retry · Esc workers" },
+            { label: "features", detail: " · Esc workers" },
+            { label: "features", detail: "" },
+            { label: "ft", detail: "" },
+            { label: "f", detail: "" }
+        ]);
+    }
+    return selectInputHints(width, [
+        { label: "features", detail: " · Up/Dn select · Enter timeline · R refresh · Esc workers" },
+        { label: "features", detail: " · Up/Dn select · Enter timeline · Esc workers" },
+        { label: "features", detail: " · Up/Dn select · Esc workers" },
+        { label: "features", detail: " · Esc workers" },
+        { label: "features", detail: "" },
+        { label: "ft", detail: "" },
+        { label: "f", detail: "" }
+    ]);
+}
+function collaborationTimelineInputHints(width, unresolvedOnly, back) {
+    const backAction = `Esc ${back}`;
+    const filterAction = unresolvedOnly ? "U all" : "U unresolved";
+    const compactFilterAction = unresolvedOnly ? "U all" : "U open";
+    return selectInputHints(width, [
+        {
+            label: "timeline",
+            detail: ` · Up/Dn event · Enter detail · Tab feature · ${filterAction} · R refresh · ${backAction}`
+        },
+        {
+            label: "timeline",
+            detail: ` · Up/Dn event · Enter detail · Tab feature · ${compactFilterAction} · R refresh · ${backAction}`
+        },
+        {
+            label: "timeline",
+            detail: ` · Up/Dn event · Enter detail · Tab feature · ${compactFilterAction} · ${backAction}`
+        },
+        { label: "timeline", detail: ` · Up/Dn event · Enter detail · Tab feature · ${backAction}` },
+        { label: "timeline", detail: ` · Up/Dn event · Enter detail · ${backAction}` },
+        { label: "timeline", detail: ` · Enter detail · ${backAction}` },
+        { label: "timeline", detail: ` · ${backAction}` },
+        { label: backAction, detail: "" },
+        { label: "flow", detail: "" },
+        { label: "tl", detail: "" },
+        { label: "t", detail: "" }
+    ]);
+}
+function collaborationDetailInputHints(width) {
+    return selectInputHints(width, [
+        { label: "event detail", detail: " · scroll · Enter/Esc timeline" },
+        { label: "event", detail: " · Pg scroll · Enter/Esc timeline" },
+        { label: "event", detail: " · Pg scroll · Esc timeline" },
+        { label: "event", detail: " · Esc timeline" },
+        { label: "Esc timeline", detail: "" },
+        { label: "event", detail: "" },
+        { label: "e", detail: "" }
+    ]);
+}
+function taskSessionsInputHints(width, includeArchived) {
+    const archivedAction = includeArchived ? "H hide archived" : "H archived";
+    return selectInputHints(width, [
+        { label: "sessions", detail: ` · Up/Dn select · Enter restore · R rename · A archive · D delete · E export · ${archivedAction} · Esc back` },
+        { label: "sessions", detail: " · Up/Dn select · Enter restore · R rename · A archive · D delete · E export · Esc back" },
+        { label: "sessions", detail: " · Up/Dn select · Enter restore · R rename · A archive · D delete · Esc back" },
+        { label: "sessions", detail: " · Up/Dn select · Enter restore · R rename · A archive · Esc back" },
+        { label: "sessions", detail: " · Up/Dn select · Enter restore · R rename · Esc back" },
+        { label: "sessions", detail: " · Up/Dn select · Enter restore · Esc back" },
+        { label: "sessions", detail: " · Up/Dn select · Esc back" },
+        { label: "sessions", detail: " · Esc back" },
+        { label: "Esc back", detail: "" },
+        { label: "sessions", detail: "" },
+        { label: "ses", detail: "" },
+        { label: "s", detail: "" }
+    ]);
+}
+function taskSessionDeleteInputHints(width, title) {
+    const safeTitle = title.replace(/[\u0000-\u001f\u007f]/g, " ").replace(/\s+/g, " ").trim();
+    return selectInputHints(width, [
+        { label: "delete", detail: ` · ${safeTitle} · D confirm · Esc cancel` },
+        { label: "delete", detail: " · D confirm · Esc cancel" },
+        { label: "D confirm", detail: " · Esc cancel" },
+        { label: "D confirm", detail: "" },
+        { label: "D", detail: "" }
+    ]);
+}
+function workerSearchInputSuffix(width, matchIndex, matchCount) {
+    const count = Math.max(0, Math.trunc(matchCount));
+    const index = count > 0
+        ? Math.min(count - 1, Math.max(0, Math.trunc(matchIndex))) + 1
+        : 0;
+    const position = `${index}/${count}`;
+    if (width < 16) {
+        return "";
+    }
+    if (width < 24) {
+        return ` · ${position}`;
+    }
+    if (width < 36) {
+        return ` · ${position} · Esc`;
+    }
+    if (width < 52) {
+        return ` · ${position} · Enter · Esc`;
+    }
+    return ` · ${position} · Enter next · Up/Dn · Esc logs`;
 }
 function nativeInputHints(width, closed = false) {
     if (closed) {
@@ -117,13 +562,10 @@ function nativeInputHints(width, closed = false) {
         if (width < 24) {
             return { label: "closed", detail: " · ^]" };
         }
-        if (width < 36) {
+        if (width < 27) {
             return { label: "closed", detail: " · Pg · ^]" };
         }
-        if (width < 56) {
-            return { label: "closed", detail: " · Pg/wheel · ^]" };
-        }
-        return { label: "closed", detail: " · wheel/Pg · ^] back" };
+        return { label: "closed", detail: " · scroll · ^] logs" };
     }
     if (width < 12) {
         return { label: "nat", detail: " ^]" };
@@ -131,11 +573,26 @@ function nativeInputHints(width, closed = false) {
     if (width < 24) {
         return { label: "native", detail: " · ^]" };
     }
-    if (width < 36) {
+    if (width < 27) {
         return { label: "native", detail: " · Pg · ^]" };
     }
-    if (width < 56) {
-        return { label: "native", detail: " · Pg/wheel · ^]" };
-    }
-    return { label: "native", detail: " · wheel/Pg · ^] detach" };
+    return { label: "native", detail: " · scroll · ^] logs" };
+}
+function routerInputHints(width) {
+    return selectInputHints(width, [
+        { label: "routes", detail: " · scroll · Tab scope · ^G refresh · Esc chat" },
+        { label: "routes", detail: " · scroll · ^G refresh · Esc chat" },
+        { label: "routes", detail: " · Pg scroll · Esc chat" },
+        { label: "routes", detail: " · Esc chat" },
+        { label: "Esc chat", detail: "" },
+        { label: "routes", detail: "" },
+        { label: "rt", detail: "" },
+        { label: "r", detail: "" }
+    ]);
+}
+function selectInputHints(width, candidates) {
+    const contentWidth = Math.max(1, Math.trunc(width) - (width > 1 ? 2 : 0));
+    return candidates.find((candidate) => displayWidth(`${candidate.label}${candidate.detail}`) <= contentWidth)
+        ?? candidates.at(-1)
+        ?? { label: "", detail: "" };
 }