claude-code/components/TeleportProgress.tsx

140 lines
16 KiB
TypeScript
Raw Permalink Normal View History

import { c as _c } from "react/compiler-runtime";
import figures from 'figures';
import * as React from 'react';
import { useState } from 'react';
import type { Root } from '../ink.js';
import { Box, Text, useAnimationFrame } from '../ink.js';
import { AppStateProvider } from '../state/AppState.js';
import { checkOutTeleportedSessionBranch, processMessagesForTeleportResume, type TeleportProgressStep, type TeleportResult, teleportResumeCodeSession } from '../utils/teleport.js';
type Props = {
currentStep: TeleportProgressStep;
sessionId?: string;
};
const SPINNER_FRAMES = ['◐', '◓', '◑', '◒'];
const STEPS: {
key: TeleportProgressStep;
label: string;
}[] = [{
key: 'validating',
label: 'Validating session'
}, {
key: 'fetching_logs',
label: 'Fetching session logs'
}, {
key: 'fetching_branch',
label: 'Getting branch info'
}, {
key: 'checking_out',
label: 'Checking out branch'
}];
export function TeleportProgress(t0) {
const $ = _c(16);
const {
currentStep,
sessionId
} = t0;
const [ref, time] = useAnimationFrame(100);
const frame = Math.floor(time / 100) % SPINNER_FRAMES.length;
let t1;
if ($[0] !== currentStep) {
t1 = s => s.key === currentStep;
$[0] = currentStep;
$[1] = t1;
} else {
t1 = $[1];
}
const currentStepIndex = STEPS.findIndex(t1);
const t2 = SPINNER_FRAMES[frame];
let t3;
if ($[2] !== t2) {
t3 = <Box marginBottom={1}><Text bold={true} color="claude">{t2} Teleporting session</Text></Box>;
$[2] = t2;
$[3] = t3;
} else {
t3 = $[3];
}
let t4;
if ($[4] !== sessionId) {
t4 = sessionId && <Box marginBottom={1}><Text dimColor={true}>{sessionId}</Text></Box>;
$[4] = sessionId;
$[5] = t4;
} else {
t4 = $[5];
}
let t5;
if ($[6] !== currentStepIndex || $[7] !== frame) {
t5 = STEPS.map((step, index) => {
const isComplete = index < currentStepIndex;
const isCurrent = index === currentStepIndex;
const isPending = index > currentStepIndex;
let icon;
let color;
if (isComplete) {
icon = figures.tick;
color = "green";
} else {
if (isCurrent) {
icon = SPINNER_FRAMES[frame];
color = "claude";
} else {
icon = figures.circle;
color = undefined;
}
}
return <Box key={step.key} flexDirection="row"><Box width={2}><Text color={color as never} dimColor={isPending}>{icon}</Text></Box><Text dimColor={isPending} bold={isCurrent}>{step.label}</Text></Box>;
});
$[6] = currentStepIndex;
$[7] = frame;
$[8] = t5;
} else {
t5 = $[8];
}
let t6;
if ($[9] !== t5) {
t6 = <Box flexDirection="column" marginLeft={2}>{t5}</Box>;
$[9] = t5;
$[10] = t6;
} else {
t6 = $[10];
}
let t7;
if ($[11] !== ref || $[12] !== t3 || $[13] !== t4 || $[14] !== t6) {
t7 = <Box ref={ref} flexDirection="column" paddingX={1} paddingY={1}>{t3}{t4}{t6}</Box>;
$[11] = ref;
$[12] = t3;
$[13] = t4;
$[14] = t6;
$[15] = t7;
} else {
t7 = $[15];
}
return t7;
}
/**
* Teleports to a remote session with progress UI rendered into the existing root.
* Fetches the session, checks out the branch, and returns the result.
*/
export async function teleportWithProgress(root: Root, sessionId: string): Promise<TeleportResult> {
// Capture the setState function from the rendered component
let setStep: (step: TeleportProgressStep) => void = () => {};
function TeleportProgressWrapper(): React.ReactNode {
const [step, _setStep] = useState<TeleportProgressStep>('validating');
setStep = _setStep;
return <TeleportProgress currentStep={step} sessionId={sessionId} />;
}
root.render(<AppStateProvider>
<TeleportProgressWrapper />
</AppStateProvider>);
const result = await teleportResumeCodeSession(sessionId, setStep);
setStep('checking_out');
const {
branchName,
branchError
} = await checkOutTeleportedSessionBranch(result.branch);
return {
messages: processMessagesForTeleportResume(result.log, branchError),
branchName
};
}
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJmaWd1cmVzIiwiUmVhY3QiLCJ1c2VTdGF0ZSIsIlJvb3QiLCJCb3giLCJUZXh0IiwidXNlQW5pbWF0aW9uRnJhbWUiLCJBcHBTdGF0ZVByb3ZpZGVyIiwiY2hlY2tPdXRUZWxlcG9ydGVkU2Vzc2lvbkJyYW5jaCIsInByb2Nlc3NNZXNzYWdlc0ZvclRlbGVwb3J0UmVzdW1lIiwiVGVsZXBvcnRQcm9ncmVzc1N0ZXAiLCJUZWxlcG9ydFJlc3VsdCIsInRlbGVwb3J0UmVzdW1lQ29kZVNlc3Npb24iLCJQcm9wcyIsImN1cnJlbnRTdGVwIiwic2Vzc2lvbklkIiwiU1BJTk5FUl9GUkFNRVMiLCJTVEVQUyIsImtleSIsImxhYmVsIiwiVGVsZXBvcnRQcm9ncmVzcyIsInQwIiwiJCIsIl9jIiwicmVmIiwidGltZSIsImZyYW1lIiwiTWF0aCIsImZsb29yIiwibGVuZ3RoIiwidDEiLCJzIiwiY3VycmVudFN0ZXBJbmRleCIsImZpbmRJbmRleCIsInQyIiwidDMiLCJ0NCIsInQ1IiwibWFwIiwic3RlcCIsImluZGV4IiwiaXNDb21wbGV0ZSIsImlzQ3VycmVudCIsImlzUGVuZGluZyIsImljb24iLCJjb2xvciIsInRpY2siLCJjaXJjbGUiLCJ1bmRlZmluZWQiLCJ0NiIsInQ3IiwidGVsZXBvcnRXaXRoUHJvZ3Jlc3MiLCJyb290IiwiUHJvbWlzZSIsInNldFN0ZXAiLCJUZWxlcG9ydFByb2dyZXNzV3JhcHBlciIsIlJlYWN0Tm9kZSIsIl9zZXRTdGVwIiwicmVuZGVyIiwicmVzdWx0IiwiYnJhbmNoTmFtZSIsImJyYW5jaEVycm9yIiwiYnJhbmNoIiwibWVzc2FnZXMiLCJsb2ciXSwic291cmNlcyI6WyJUZWxlcG9ydFByb2dyZXNzLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgZmlndXJlcyBmcm9tICdmaWd1cmVzJ1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHR5cGUgeyBSb290IH0gZnJvbSAnLi4vaW5rLmpzJ1xuaW1wb3J0IHsgQm94LCBUZXh0LCB1c2VBbmltYXRpb25GcmFtZSB9IGZyb20gJy4uL2luay5qcydcbmltcG9ydCB7IEFwcFN0YXRlUHJvdmlkZXIgfSBmcm9tICcuLi9zdGF0ZS9BcHBTdGF0ZS5qcydcbmltcG9ydCB7XG4gIGNoZWNrT3V0VGVsZXBvcnRlZFNlc3Npb25CcmFuY2gsXG4gIHByb2Nlc3NNZXNzYWdlc0ZvclRlbGVwb3J0UmVzdW1lLFxuICB0eXBlIFRlbGVwb3J0UHJvZ3Jlc3NTdGVwLFxuICB0eXBlIFRlbGVwb3J0UmVzdWx0LFxuICB0ZWxlcG9ydFJlc3VtZUNvZGVTZXNzaW9uLFxufSBmcm9tICcuLi91dGlscy90ZWxlcG9ydC5qcydcblxudHlwZSBQcm9wcyA9IHtcbiAgY3VycmVudFN0ZXA6IFRlbGVwb3J0UHJvZ3Jlc3NTdGVwXG4gIHNlc3Npb25JZD86IHN0cmluZ1xufVxuXG5jb25zdCBTUElOTkVSX0ZSQU1FUyA9IFsn4peQJywgJ+KXkycsICfil5EnLCAn4peSJ11cblxuY29uc3QgU1RFUFM6IHsga2V5OiBUZWxlcG9ydFByb2dyZXNzU3RlcDsgbGFiZWw6IHN0cmluZyB9W10gPSBbXG4gIHsga2V5OiAndmFsaWRhdGluZycsIGxhYmVsOiAnVmFsaWRhdGluZyBzZXNzaW9uJyB9LFxuICB7IGtleTogJ2ZldGNoaW5nX2xvZ3MnLCBsYWJlbDogJ0ZldGNoaW5nIHNlc3Npb24gbG9ncycgfSxcbiAgeyBrZXk6ICdmZXRjaGluZ19icmFuY2gnLCBsYWJlbDogJ0dldHRpbmcgYnJhbmNoIGluZm8nIH0sXG4gIHsga2V5OiAnY2hlY2tpbmdfb3V0JywgbGFiZWw6ICdDaGVja2luZyBvdXQgYnJhbmNoJyB9LFxuXVxuXG5leHBvcnQgZnVuY3Rpb24gVGVsZXBvcnRQcm9ncmVzcyh7XG4gIGN1cnJlbnRTdGVwLFxuICBzZXNzaW9uSWQsXG59OiBQcm9wcyk6IFJlYWN0LlJlYWN0Tm9kZSB7XG4gIGNvbnN0IFtyZWYsIHRpbWVdID0gdXNlQW5pbWF0aW9uRnJhbWUoMTAwKVxuICBjb25zdCBmcmFtZSA9IE1hdGguZmxvb3IodGltZSAvIDEwMCkgJSBTUElOTkVSX0ZSQU1FUy5sZW5ndGhcblxuICBjb25zdCBjdXJyZW50U3RlcEluZGV4ID0gU1RFUFMuZmluZEluZGV4KHMgPT4gcy5rZXkgPT09IGN1cnJlbnRTdGVwKVxuXG4gIHJldHVybiAoXG4gICAgPEJveCByZWY9e3JlZn0gZmxleERpcmVjdGlvbj1cImNvbHVtblwiIHBhZGRpbmdYPXsxfSBwYWRkaW5nWT17MX0+XG4gICAgICA8Qm94IG1hcmdpbkJvdHRvbT17MX0+XG4gICAgICAgIDxUZXh0IGJvbGQgY29sb3I9XCJjbGF1ZGVcIj5cbiAgICAgICAgICB7U1BJTk5FUl9GUkFNRVNbZnJhbWVdfSBUZWxlcG9ydGluZyBzZXNzaW9u4oCmXG4gICAgICAgIDwvVGV4dD5cbiAgICAgIDwvQm94PlxuXG4gICAgICB7c2Vzc2lvbklkICYmIChcbiAgICAgICAgPEJveCBtYXJnaW5Cb3R0b209ezF9PlxuICAgICAgICAgIDxUZXh0IGRpbUNvbG9yPntzZXNzaW9uSWR9PC9UZXh0PlxuICAgICAgICA8L0JveD5cbiAgICAgICl9XG5cbiAgICAgIDxCb3ggZmxleERpcmVjdGlvbj1cImNvbHVtblwiIG1hcmdpbkxlZnQ9ezJ9PlxuICAgICAgICB7U1RFUFMubWFwKChzdGVwLCBpbmRleCkgPT4ge1xuICAgICAgICAgIGNvbnN0IGlzQ29tcGxldGUgPSBpbmRleCA8IGN1cnJlbnRTdGVwSW5kZXhcbiAgICAgICAgICBjb25zdCBpc0N1cnJlbnQgPSBpbmRleCA9PT0gY3VycmVudFN0ZXBJbmRleFxuICAgICAgICAgIGNvbnN0IGlzUGVuZGluZyA9IGluZGV4ID4gY3VycmVudFN0ZXBJbmRleFxuXG4gICAgICAgICAgbGV0IGljb246IHN0cmluZ1xuICAgICAgICAgIGxldCBjb2xvcjogc3RyaW5nIHwgdW5kZWZpbmVkXG5cbiAgICAgICAgICBpZiAoaXNDb21wbGV0ZSkge1xuICAgICAgICAgICAgaWNvbiA9IGZpZ3VyZXMudGlja1xuICAgICAgICAgICAgY29sb3IgPSAnZ3JlZW4nXG4gICAgICAgICAgfSBlbHNlIGlmIChpc0N1cnJlbnQpIHtcbiAgICAgICAgICAgIGljb24gPSBTUElOTkVSX0ZSQU1FU1tmcmFtZV0hXG4gICAgICAgICAgICBjb2xvciA9ICdjbGF1ZGUnXG4gICAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIGljb24gPSBmaWd1cmVzLmNpcmNsZVxuICAgICAgICAgICAgY29sb3IgPSB1bmRlZmluZWRcbiAgICAgICAgICB9XG5cbiAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgPEJveCBrZXk9e3N0ZXAua2V5fSBmbGV