@thegitai/cli 1.0.0-beta.15 → 1.0.0-beta.17

package/dist/src/tools/shell-job-kill.js

@@ -0,0 +1,48 @@
+import { killBackgroundJob } from '../background-jobs.js';
+import { redactConnectionStringCredentials } from '../secret-preview.js';
+const MAX_JOB_TOOL_OUTPUT_CHARS = 64 * 1024;
+function boundJobToolOutput(output) {
+    if (output.length <= MAX_JOB_TOOL_OUTPUT_CHARS)
+        return output;
+    const headSize = Math.floor(MAX_JOB_TOOL_OUTPUT_CHARS * 0.2);
+    const tailSize = MAX_JOB_TOOL_OUTPUT_CHARS - headSize;
+    return (output.slice(0, headSize) +
+        `\n\n... (${output.length - headSize - tailSize} chars truncated) ...\n\n` +
+        output.slice(-tailSize));
+}
+export async function shellJobKill(context, args) {
+    const jobId = String(args.job_id ?? '').trim();
+    if (!jobId) {
+        return {
+            ok: false,
+            error: 'job_id is required',
+            failureCategory: 'missing_required_argument',
+        };
+    }
+    const result = await killBackgroundJob(jobId, {
+        sessionId: context.sessionId,
+    });
+    if (!result.ok || !result.snapshot) {
+        return {
+            ok: false,
+            error: result.error ?? 'Background job lookup failed.',
+            failureCategory: 'not_found',
+        };
+    }
+    const snapshot = result.snapshot;
+    let finalOutput = redactConnectionStringCredentials(result.finalOutput ?? '');
+    if (result.droppedChars) {
+        finalOutput = `... (${result.droppedChars} chars of older output dropped) ...\n${finalOutput}`;
+    }
+    finalOutput = boundJobToolOutput(finalOutput);
+    return {
+        ok: true,
+        jobId: snapshot.id,
+        command: snapshot.command,
+        status: snapshot.status,
+        exitCode: snapshot.exitCode,
+        alreadyFinished: result.alreadyFinished === true,
+        ranMs: (snapshot.endedAt ?? Date.now()) - snapshot.startedAt,
+        finalOutput,
+    };
+}

package/dist/src/tools/shell-job-output.js

@@ -0,0 +1,51 @@
+import { MAX_JOB_WAIT_MS, readBackgroundJobOutput, } from '../background-jobs.js';
+import { redactConnectionStringCredentials } from '../secret-preview.js';
+const MAX_JOB_TOOL_OUTPUT_CHARS = 64 * 1024;
+function boundJobToolOutput(output) {
+    if (output.length <= MAX_JOB_TOOL_OUTPUT_CHARS)
+        return output;
+    const headSize = Math.floor(MAX_JOB_TOOL_OUTPUT_CHARS * 0.2);
+    const tailSize = MAX_JOB_TOOL_OUTPUT_CHARS - headSize;
+    return (output.slice(0, headSize) +
+        `\n\n... (${output.length - headSize - tailSize} chars truncated) ...\n\n` +
+        output.slice(-tailSize));
+}
+export async function shellJobOutput(context, args) {
+    const jobId = String(args.job_id ?? '').trim();
+    if (!jobId) {
+        return {
+            ok: false,
+            error: 'job_id is required',
+            failureCategory: 'missing_required_argument',
+        };
+    }
+    const waitMs = typeof args.wait_ms === 'number' && args.wait_ms > 0
+        ? Math.min(args.wait_ms, MAX_JOB_WAIT_MS)
+        : 0;
+    const result = await readBackgroundJobOutput(jobId, {
+        waitMs,
+        sessionId: context.sessionId,
+    });
+    if (!result.ok || !result.snapshot) {
+        return {
+            ok: false,
+            error: result.error ?? 'Background job lookup failed.',
+            failureCategory: 'not_found',
+        };
+    }
+    const snapshot = result.snapshot;
+    let newOutput = redactConnectionStringCredentials(result.newOutput ?? '');
+    if (result.droppedChars) {
+        newOutput = `... (${result.droppedChars} chars of older output dropped) ...\n${newOutput}`;
+    }
+    newOutput = boundJobToolOutput(newOutput);
+    return {
+        ok: true,
+        jobId: snapshot.id,
+        command: snapshot.command,
+        status: snapshot.status,
+        exitCode: snapshot.exitCode,
+        elapsedMs: (snapshot.endedAt ?? Date.now()) - snapshot.startedAt,
+        newOutput,
+    };
+}

package/dist/src/ui/repl.js

@@ -1,11 +1,13 @@
 import { createRatatuiBridge } from './tui/bridge.js';
-import { buildTuiFrame, renderTranscriptEntryLines } from './tui/build-frame.js';
+import { buildTuiFrame, formatJobElapsed, renderTranscriptEntryLines, } from './tui/build-frame.js';
 export { getSlashCommandSuggestions } from './tui/build-frame.js';
 import { agentModeLabel, nextAgentMode, } from '../agent-mode.js';
 import { chat, models } from '../api/index.js';
 import { isTurnCancelledError } from '../api/chat.js';
+import { getJobBufferedOutput, getJobOutputPreview, hasRunningBackgroundJobs, killAllBackgroundJobs, killBackgroundJob, listBackgroundJobs, setBackgroundJobSession, setBackgroundJobUpdateHook, } from '../background-jobs.js';
 import { cancelActiveCommand } from '../executor.js';
 import { setCommandOutputHook, withTuiMode } from '../runtime-mode.js';
+import { collectBackgroundJobUiKillMutations, collectBackgroundJobUiOutputMutations, } from '../tool-executor.js';
 import { clearConversation, } from '../session.js';
 import { applySessionSnapshot, listSessionMetadata, loadSessionSnapshot, saveSessionState, } from '../session-store.js';
 import { truncate } from '../utils.js';
@@ -102,6 +104,10 @@ export const SLASH_COMMANDS = [
         command: '/resume',
         description: 'Open the session picker',
     },
+    {
+        command: '/jobs',
+        description: 'Background jobs: pick to view output or kill',
+    },
     {
         command: '/clear',
         description: 'Clear conversation history',
@@ -643,12 +649,33 @@ function buildWorkingToolEntry(event) {
         : '';
     if (call.name === 'run_command') {
         const command = String(call.args?.command ?? result?.command ?? '').trim();
+        if (result?.backgrounded === true && result?.jobId) {
+            return {
+                body: `$ ${truncate(command, 180)}\nBackground job ${String(result.jobId)} started.${error}`,
+                kind: result?.ok === true ? 'tool' : 'error',
+                preformatted: true,
+                title: 'Shell',
+            };
+        }
         return {
             body: `$ ${truncate(command, 180)}\n${formatRunCommandResultState(result)}${error}`,
             kind: result?.ok === true ? 'tool' : 'error',
             title: 'Shell',
         };
     }
+    if (call.name === 'shell_job_output' || call.name === 'shell_job_kill') {
+        const jobId = String(result?.jobId ?? call.args?.job_id ?? '').trim();
+        const status = String(result?.status ?? '').trim();
+        const exitCode = result?.exitCode;
+        const stateText = status
+            ? `${status}${exitCode != null ? ` (code ${exitCode})` : ''}`
+            : formatToolResultState(result);
+        return {
+            body: `${jobId || '(unknown job)'} · ${stateText}${error}`,
+            kind: result?.ok === true ? 'tool' : 'error',
+            title: call.name === 'shell_job_kill' ? 'Kill job' : 'Job output',
+        };
+    }
     if (call.name === 'run_node_script') {
         return {
             body: `node --input-type=module <script via stdin>\n${formatRunCommandResultState(result)}${error}`,
@@ -666,6 +693,32 @@ function buildWorkingToolEntry(event) {
         title: 'Tool',
     };
 }
+function buildBackgroundJobNoticeEntry(snapshot) {
+    const command = truncate(snapshot.command, 120);
+    const ran = formatJobElapsed((snapshot.endedAt ?? Date.now()) - snapshot.startedAt);
+    if (snapshot.status === 'error') {
+        return {
+            body: `✖ ${snapshot.id} (${command}) failed to start`,
+            kind: 'error',
+            preformatted: true,
+            title: 'Background job',
+        };
+    }
+    if (snapshot.status === 'killed') {
+        return {
+            body: `■ ${snapshot.id} (${command}) killed · ran ${ran}`,
+            kind: 'system',
+            preformatted: true,
+            title: 'Background job',
+        };
+    }
+    return {
+        body: `${snapshot.exitCode === 0 ? '✓' : '✖'} ${snapshot.id} (${command}) exited (code ${snapshot.exitCode ?? 1}) · ran ${ran}`,
+        kind: snapshot.exitCode === 0 ? 'system' : 'error',
+        preformatted: true,
+        title: 'Background job',
+    };
+}
 function findPendingToolCallByName(pendingCalls, name) {
     for (const [id, call] of pendingCalls) {
         if (call.name !== name)
@@ -868,6 +921,7 @@ function createInitialShellState(session, serverModels, debugUi) {
         approvalCursor: getDefaultApprovalCursor(),
         approvalPrompt: null,
         autoYes: session.autoYes,
+        backgroundJobs: [],
         busy: false,
         busySince: null,
         clockNow: Date.now(),
@@ -879,6 +933,9 @@ function createInitialShellState(session, serverModels, debugUi) {
         exiting: false,
         input: '',
         maxToolSteps: session.maxToolSteps,
+        jobsPickerExpandedId: null,
+        jobsPickerIndex: 0,
+        jobsPickerOpen: false,
         modelPickerIndex: getDefaultModelPickerIndex(session.modelId, serverModels.models),
         modelPickerOpen: false,
         projectRoot: session.rootDir,
@@ -1183,6 +1240,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
         throw new Error('Client TUI requires an interactive terminal.');
     }
     await withTuiMode(async () => {
+        setBackgroundJobSession(session.sessionId);
         const store = createShellStore(createInitialShellState(session, serverModels, debugUi));
         store.replaceTranscript(createSessionTranscript(session));
         let currentServerModels = serverModels;
@@ -1240,7 +1298,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
             const elapsedSeconds = state.busySince
                 ? Math.max(0, Math.floor((Date.now() - state.busySince) / 1000))
                 : 0;
-            bridge.render(buildTuiFrame(state, terminalCols, terminalRows, spinnerFrame, elapsedSeconds));
+            bridge.render(buildTuiFrame(state, terminalCols, terminalRows, spinnerFrame, elapsedSeconds, Date.now()));
         };
         const remountTui = async () => {
             if (remountPromise) {
@@ -1522,6 +1580,7 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
             dismissPendingApproval();
             dismissPendingSudoPassword();
             exiting = true;
+            killAllBackgroundJobs();
             store.update((current) => ({
                 ...current,
                 exiting: true,
@@ -1676,6 +1735,87 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                 title: 'Model',
             });
         };
+        const openJobsPicker = () => {
+            syncBackgroundJobsState();
+            store.update((current) => ({
+                ...current,
+                commandCursor: 0,
+                cursor: 0,
+                input: '',
+                jobsPickerExpandedId: null,
+                jobsPickerIndex: 0,
+                jobsPickerOpen: true,
+                status: 'Background jobs',
+            }));
+        };
+        const appendJobOutputEntry = async (jobId) => {
+            const id = jobId.trim();
+            await collectBackgroundJobUiOutputMutations({
+                session,
+                projectIndex,
+                jobId: id,
+            });
+            const job = listBackgroundJobs().find((candidate) => candidate.id === id);
+            const buffered = getJobBufferedOutput(id);
+            if (!job || !buffered) {
+                appendError(`Unknown background job id: ${id}`);
+                return;
+            }
+            const dropped = buffered.droppedChars > 0
+                ? `... (${buffered.droppedChars} chars of older output dropped) ...\n`
+                : '';
+            appendStaticEntry({
+                body: `${dropped}${buffered.output || '(no output captured)'}`,
+                kind: 'system',
+                preformatted: true,
+                title: `${job.id} output — ${truncate(job.command, 80)}`,
+            });
+        };
+        const selectedJobsPickerId = () => {
+            const current = store.getState();
+            if (!current.backgroundJobs.length)
+                return null;
+            const index = Math.min(Math.max(current.jobsPickerIndex, 0), current.backgroundJobs.length - 1);
+            return current.backgroundJobs[index]?.id ?? null;
+        };
+        const handleJobsPickerOutput = async () => {
+            const jobId = selectedJobsPickerId();
+            if (!jobId)
+                return;
+            await collectBackgroundJobUiOutputMutations({
+                session,
+                projectIndex,
+                jobId,
+            });
+            syncBackgroundJobsState();
+            store.update((current) => ({
+                ...current,
+                jobsPickerExpandedId: current.jobsPickerExpandedId === jobId ? null : jobId,
+            }));
+        };
+        const handleJobsPickerKill = async () => {
+            const jobId = selectedJobsPickerId();
+            if (!jobId)
+                return;
+            const killed = await killBackgroundJob(jobId);
+            await collectBackgroundJobUiKillMutations({
+                session,
+                projectIndex,
+                jobId,
+                result: killed,
+            });
+            syncBackgroundJobsState();
+            if (!killed.ok) {
+                appendError(killed.error ?? 'Background job kill failed.');
+            }
+            else if (killed.alreadyFinished) {
+                appendStaticEntry({
+                    body: `${jobId} had already finished.`,
+                    kind: 'system',
+                    title: 'Background jobs',
+                });
+            }
+        };
         const handleInlineModelSelection = async () => {
             const current = store.getState();
             const options = buildModelPickerOptions(current.currentModelId, current.serverModels);
@@ -1762,6 +1902,8 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
             try {
                 const snapshot = await loadInteractiveSession(selected.id);
                 applySessionSnapshot(session, snapshot);
+                setBackgroundJobSession(session.sessionId);
+                syncBackgroundJobsState();
                 await saveActiveSession();
                 syncShellStateFromSession();
                 store.update((next) => ({
@@ -1883,6 +2025,46 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
                 });
                 return;
             }
+            if (input === '/jobs' || input.startsWith('/jobs ')) {
+                const jobsArgs = input.slice('/jobs'.length).trim();
+                if (!jobsArgs) {
+                    openJobsPicker();
+                    return;
+                }
+                const killMatch = jobsArgs.match(/^kill\s+(\S+)$/);
+                if (killMatch) {
+                    const jobId = killMatch[1];
+                    const killed = await killBackgroundJob(jobId);
+                    await collectBackgroundJobUiKillMutations({
+                        session,
+                        projectIndex,
+                        jobId,
+                        result: killed,
+                    });
+                    if (!killed.ok) {
+                        appendError(killed.error ?? 'Background job kill failed.');
+                    }
+                    else if (killed.alreadyFinished) {
+                        appendStaticEntry({
+                            body: `${jobId} had already finished.`,
+                            kind: 'system',
+                            title: 'Background jobs',
+                        });
+                    }
+                    return;
+                }
+                const outputMatch = jobsArgs.match(/^output\s+(\S+)$/);
+                if (outputMatch) {
+                    await appendJobOutputEntry(outputMatch[1]);
+                    return;
+                }
+                appendStaticEntry({
+                    body: 'Usage: /jobs — open the jobs picker · /jobs output <id> — full output · /jobs kill <id> — kill one',
+                    kind: 'system',
+                    title: 'Background jobs',
+                });
+                return;
+            }
             if (input === '/usage') {
                 store.update((current) => ({
                     ...current,
@@ -2121,6 +2303,52 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
             }
             store.appendWorkingTool(buildWorkingToolEntry(event));
         };
+        const jobDetailLines = (jobId) => {
+            const buffered = getJobBufferedOutput(jobId);
+            if (!buffered)
+                return [];
+            const lines = buffered.output
+                .replace(/\r\n/g, '\n')
+                .replace(/\r/g, '\n')
+                .split('\n')
+                .filter((line) => line.trim().length > 0);
+            const visible = lines.slice(-20);
+            return buffered.droppedChars > 0
+                ? [
+                    `... (${buffered.droppedChars} chars of older output dropped) ...`,
+                    ...visible,
+                ]
+                : visible;
+        };
+        const syncBackgroundJobsState = () => {
+            const jobsForDisplay = listBackgroundJobs().map((job) => {
+                const preview = getJobOutputPreview(job.id, 3);
+                return {
+                    id: job.id,
+                    command: job.command,
+                    status: job.status,
+                    exitCode: job.exitCode,
+                    startedAt: job.startedAt,
+                    endedAt: job.endedAt,
+                    firstOutputLine: preview?.firstLine ?? '',
+                    tailLines: preview?.tailLines ?? [],
+                    detailLines: jobDetailLines(job.id),
+                };
+            });
+            store.update((current) => ({
+                ...current,
+                backgroundJobs: jobsForDisplay,
+                jobsPickerExpandedId: jobsForDisplay.some((job) => job.id === current.jobsPickerExpandedId)
+                    ? current.jobsPickerExpandedId
+                    : null,
+            }));
+        };
+        setBackgroundJobUpdateHook((snapshot) => {
+            syncBackgroundJobsState();
+            if (snapshot.status !== 'running') {
+                appendTurnAwareEntry(buildBackgroundJobNoticeEntry(snapshot));
+            }
+        });
         projectIndex.onStatus = session.onStatus;
         projectIndex.onContextLog = session.onContextLog;
         session.requestSudoPassword = async ({ command, prompt, signal }) => openSudoPasswordPrompt(command, prompt, signal);
@@ -2180,6 +2408,8 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
             onResumeSession: handleInlineResumeSelection,
             onSelectionCopy: handleAppSelectionCopy,
             onSelectModel: handleInlineModelSelection,
+            onJobsPickerOutput: handleJobsPickerOutput,
+            onJobsPickerKill: handleJobsPickerKill,
             onSudoPasswordInput: handleSudoPasswordInput,
             onSubmit: handleSubmit,
         };
@@ -2193,7 +2423,10 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
             }
         }, 120);
         const clockTimer = setInterval(() => {
-            if (store.getState().busy) {
+            if (hasRunningBackgroundJobs()) {
+                syncBackgroundJobsState();
+            }
+            if (store.getState().busy || hasRunningBackgroundJobs()) {
                 renderCurrentFrame();
             }
         }, 1000);
@@ -2237,6 +2470,9 @@ export async function runClientInteractive({ appendPromptHistory, authConfig, de
             clearInterval(clockTimer);
             unsubscribe();
             clearLiveFrameRemountTimer();
+            killAllBackgroundJobs();
+            setBackgroundJobSession(null);
+            setBackgroundJobUpdateHook(null);
             await bridge.close();
             setCommandOutputHook(null);
         }

package/dist/src/ui/tui/build-frame.js

@@ -160,6 +160,7 @@ const CLIENT_SLASH_COMMANDS = [
     { command: '/usage', description: 'Show account usage percentage and reset times' },
     { command: '/model', description: 'Switch the active model' },
     { command: '/resume', description: 'Open the session picker to resume a previous session' },
+    { command: '/jobs', description: 'Background jobs: pick to view output or kill' },
     { command: '/clear', description: 'Clear conversation history' },
     { command: '/exit', description: 'Quit the current session' },
 ];
@@ -341,6 +342,83 @@ function composerFooterLines(state) {
     lines.push(line(...footerSpans));
     return lines;
 }
+export function formatJobElapsed(elapsedMs) {
+    const totalSeconds = Math.max(0, Math.floor(elapsedMs / 1000));
+    if (totalSeconds < 60)
+        return `${totalSeconds}s`;
+    const minutes = Math.floor(totalSeconds / 60);
+    if (minutes < 60) {
+        return `${minutes}m${String(totalSeconds % 60).padStart(2, '0')}s`;
+    }
+    return `${Math.floor(minutes / 60)}h${String(minutes % 60).padStart(2, '0')}m`;
+}
+function buildBackgroundJobsLine(state, width, nowMs) {
+    const running = (state.backgroundJobs ?? []).filter((job) => job.status === 'running');
+    if (running.length === 0)
+        return null;
+    const countLabel = `${running.length} job${running.length === 1 ? '' : 's'}`;
+    const parts = running.map((job) => {
+        const elapsed = nowMs > 0 ? ` · ${formatJobElapsed(nowMs - job.startedAt)}` : '';
+        return `${truncate(job.command, 48)}${elapsed}`;
+    });
+    const text = truncate(`${countLabel} · ${parts.join(' · ')}`, Math.max(8, width - 2));
+    return line(span('● ', { color: 'green' }), span(text, { color: 'gray', dim: true }));
+}
+const JOB_LIVE_TAIL_LINES = 8;
+const JOB_FINISHED_TAIL_LINES = 3;
+function jobStatusDescriptor(job, nowMs) {
+    const ran = formatJobElapsed((job.endedAt ?? (nowMs > 0 ? nowMs : Date.now())) - job.startedAt);
+    if (job.status === 'running') {
+        return { glyph: '●', color: 'green', text: `running · ${ran}` };
+    }
+    if (job.status === 'killed') {
+        return { glyph: '■', color: 'gray', text: `killed · ran ${ran}` };
+    }
+    if (job.status === 'error') {
+        return { glyph: '✖', color: 'red', text: 'failed to start' };
+    }
+    return job.exitCode === 0
+        ? { glyph: '✓', color: 'green', text: `exited (0) · ran ${ran}` }
+        : { glyph: '✖', color: 'red', text: `exited (${job.exitCode ?? 1}) · ran ${ran}` };
+}
+function renderBackgroundJobEntryLines(entry, state, width, nowMs) {
+    const job = (state.backgroundJobs ?? []).find((candidate) => candidate.id === entry.jobId);
+    if (!job) {
+        return renderTranscriptEntryLines({ ...entry, jobId: undefined }, width);
+    }
+    const { glyph, color, text } = jobStatusDescriptor(job, nowMs);
+    const header = line(span(`${glyph} `, { color }), span(`${job.id} · ${truncate(job.command, Math.max(12, width - 24))}`, {
+        color,
+        bold: true,
+    }), span(` · ${text}`, { color: 'gray' }));
+    const tailBudget = job.status === 'running' ? JOB_LIVE_TAIL_LINES : JOB_FINISHED_TAIL_LINES;
+    const tail = (job.tailLines ?? []).slice(-tailBudget).map((tailLine) => line(span('│ ', { color: 'gray', dim: true }), span(truncate(tailLine, Math.max(8, width - 4)), {
+        color: 'gray',
+        dim: true,
+    })));
+    return [header, ...tail];
+}
+function buildJobsPickerLines(state, width, nowMs) {
+    const jobs = state.backgroundJobs ?? [];
+    const lines = [
+        plainLine('Background jobs', { color: 'cyan', bold: true }),
+    ];
+    if (jobs.length === 0) {
+        lines.push(plainLine('No background jobs in this session.', { color: 'gray' }));
+    }
+    for (const [index, job] of jobs.entries()) {
+        const selected = index === state.jobsPickerIndex;
+        const { glyph, color, text } = jobStatusDescriptor(job, nowMs);
+        lines.push(line(span(selected ? '› ' : '  ', { color: selected ? 'cyan' : 'gray' }), span(`${glyph} `, { color }), span(job.id.padEnd(6), { color: selected ? 'cyan' : undefined, bold: selected }), span(` ${truncate(job.command, Math.max(12, width - 34)).padEnd(Math.max(12, Math.min(40, width - 34)))}`, {
+            color: selected ? 'cyan' : undefined,
+            bold: selected,
+        }), span(` ${text}`, { color: 'gray' })));
+    }
+    lines.push(plainLine('↑/↓ move    enter output    k kill    esc close', {
+        color: 'gray',
+    }));
+    return lines;
+}
 function buildLiveLines(state, width, spinnerFrame, elapsedSeconds) {
     if (!state.busy)
         return [];
@@ -551,7 +629,7 @@ function buildCommandPalettePanel(suggestions, selectedIndex, width) {
     body.push(modelPickerPanelSideLine(plainLine(''), innerWidth), modelPickerPanelSideLine(line(span('─'.repeat(innerWidth), { color: MODEL_PICKER_BORDER_COLOR })), innerWidth), modelPickerPanelSideLine(plainLine('↑/↓ choose  •  Tab or Enter accept  •  Esc cancel', { color: 'gray' }), innerWidth), plainLine(`╰${'─'.repeat(panelWidth - 2)}╯`, { color: MODEL_PICKER_BORDER_COLOR }));
     return [...margin, ...body, ...margin];
 }
-function buildOverlayLines(state, width) {
+function buildOverlayLines(state, width, nowMs) {
     const lines = [];
     const panelWidth = Math.max(24, Math.min(width, OVERLAY_PANEL_MAX_WIDTH));
     const innerWidth = Math.max(1, panelWidth - 4);
@@ -626,6 +704,9 @@ function buildOverlayLines(state, width) {
         const options = buildModelPickerOptions(state.currentModelId, state.serverModels);
         lines.push(...buildModelPickerPanel(options, state.modelPickerIndex, width));
     }
+    if (state.jobsPickerOpen) {
+        lines.push(...buildJobsPickerLines(state, width, nowMs));
+    }
     if (state.resumePickerOpen) {
         const filtered = filterResumeSessions(state.resumePickerSessions, state.resumePickerFilter, state.serverModels);
         lines.push(plainLine('Resume a previous session', { color: 'cyan', bold: true }));
@@ -667,10 +748,12 @@ function sliceTranscriptLines(lines, maxLines, scrollOffset) {
     const start = Math.max(0, lines.length - maxLines - offset);
     return lines.slice(start, start + maxLines);
 }
-export function buildTuiFrame(state, cols, rows, spinnerFrame, elapsedSeconds) {
+export function buildTuiFrame(state, cols, rows, spinnerFrame, elapsedSeconds, nowMs = 0) {
     const contentWidth = Math.max(20, Math.floor(cols * 0.95) - 2);
     const gutter = Math.max(Math.floor((cols - contentWidth) / 2), 0);
-    const transcriptBlocks = state.transcript.map((entry) => renderTranscriptEntryLines(entry, contentWidth));
+    const transcriptBlocks = state.transcript.map((entry) => entry.jobId
+        ? renderBackgroundJobEntryLines(entry, state, contentWidth, nowMs)
+        : renderTranscriptEntryLines(entry, contentWidth));
     const transcriptLines = [];
     transcriptBlocks.forEach((block, index) => {
         if (index > 0) {
@@ -684,7 +767,11 @@ export function buildTuiFrame(state, cols, rows, spinnerFrame, elapsedSeconds) {
         sections.push({ kind: 'live', lines: liveLines });
     }
     const overlayActive = Boolean(state.approvalPrompt || state.sudoPrompt);
-    if (!state.resumePickerOpen && !state.modelPickerOpen && !overlayActive) {
+    if (!state.resumePickerOpen && !state.modelPickerOpen && !state.jobsPickerOpen && !overlayActive) {
+        const jobsLine = buildBackgroundJobsLine(state, contentWidth, nowMs);
+        if (jobsLine) {
+            sections.push({ kind: 'busyFooter', lines: [jobsLine, plainLine('')] });
+        }
         const composerLines = [];
         if (state.queuedMessage) {
             const preview = truncate(state.queuedMessage.body.trim().replace(/\s+/g, ' '), 60);
@@ -705,7 +792,7 @@ export function buildTuiFrame(state, cols, rows, spinnerFrame, elapsedSeconds) {
             lines: [...composerLines, plainLine(''), ...composerFooterLines(state)],
         });
     }
-    const overlayLines = buildOverlayLines(state, contentWidth);
+    const overlayLines = buildOverlayLines(state, contentWidth, nowMs);
     if (overlayLines.length > 0) {
         sections.push({ kind: 'overlay', lines: overlayLines });
     }

package/dist/src/ui/tui/shell-input.js

@@ -12,6 +12,7 @@ function isClipboardImagePasteKey(key) {
 function shouldShowCommandPalette(state) {
     if (state.busy ||
         state.exiting ||
+        state.jobsPickerOpen ||
         state.modelPickerOpen ||
         state.resumePickerOpen) {
         return false;
@@ -57,6 +58,7 @@ function pasteTextFromClipboard(store, handlers) {
     const current = store.getState();
     if (current.exiting ||
         current.approvalPrompt ||
+        current.jobsPickerOpen ||
         current.modelPickerOpen ||
         current.resumePickerOpen ||
         current.sudoPrompt) {
@@ -210,6 +212,35 @@ export function handleShellKeyEvent(store, handlers, event) {
         });
         return;
     }
+    if (state.jobsPickerOpen) {
+        if (key.escape) {
+            store.update((current) => ({
+                ...current,
+                jobsPickerOpen: false,
+                status: 'Ready',
+            }));
+            return;
+        }
+        if (key.upArrow || key.downArrow) {
+            store.update((current) => {
+                const count = (current.backgroundJobs ?? []).length;
+                const next = current.jobsPickerIndex + (key.upArrow ? -1 : 1);
+                return {
+                    ...current,
+                    jobsPickerIndex: Math.max(0, Math.min(next, Math.max(count - 1, 0))),
+                };
+            });
+            return;
+        }
+        if (key.returnKey) {
+            void handlers.onJobsPickerOutput();
+            return;
+        }
+        if (key.input === 'k' && !key.ctrl && !key.meta && !key.shift) {
+            void handlers.onJobsPickerKill();
+        }
+        return;
+    }
     if (state.modelPickerOpen) {
         if (key.escape) {
             store.update((current) => ({ ...current, modelPickerOpen: false }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thegitai/cli",
-  "version": "1.0.0-beta.15",
+  "version": "1.0.0-beta.17",
   "description": "TheGitAI CLI client (source-visible, proprietary)",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://thegit.ai",
@@ -25,10 +25,10 @@
     "@lydell/node-pty-linux-x64": "1.1.0",
     "@lydell/node-pty-win32-arm64": "1.1.0",
     "@lydell/node-pty-win32-x64": "1.1.0",
-    "@thegitai/tui-darwin-arm64": "1.0.0-beta.15",
-    "@thegitai/tui-darwin-x64": "1.0.0-beta.15",
-    "@thegitai/tui-linux-x64": "1.0.0-beta.15",
-    "@thegitai/tui-win32-x64": "1.0.0-beta.15",
+    "@thegitai/tui-darwin-arm64": "1.0.0-beta.17",
+    "@thegitai/tui-darwin-x64": "1.0.0-beta.17",
+    "@thegitai/tui-linux-x64": "1.0.0-beta.17",
+    "@thegitai/tui-win32-x64": "1.0.0-beta.17",
     "@vscode/ripgrep": "1.18.0"
   },
   "publishConfig": {