@ikie-dev/cli 9.8.1

package/src/extensions/teleport/ui/progress.ts

@@ -0,0 +1,345 @@
+import type { ExtensionUIContext, Theme } from "@earendil-works/pi-coding-agent"
+import { type Component, Key, matchesKey, truncateToWidth } from "@earendil-works/pi-tui"
+import { GitTokenPromptComponent, type GitTokenPromptResult } from "./git-token-prompt.js"
+
+const SPIN_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
+const SPIN_MS = 80
+
+interface FunPhase {
+	readonly frames: readonly string[]
+	readonly message: string
+	readonly intervalMs: number
+}
+
+const TELEPORT_FUN_PHASES: readonly FunPhase[] = [
+	{ frames: ["|", "/", "-", "\\"], message: "Packing the jar", intervalMs: 140 },
+	{ frames: ["○", "◔", "◑", "◕", "●", "◕", "◑", "◔"], message: "Sealing the jar for transit", intervalMs: 80 },
+	{ frames: ["·", "+", "·", "×", "·", "+"], message: "Loading the cart", intervalMs: 93 },
+	{ frames: ["◐", "◓", "◑", "◒"], message: "Spinning up the kitchen", intervalMs: 140 },
+	{ frames: ["~", "-", "~", "-"], message: "Riding the conveyor", intervalMs: 140 },
+	{ frames: ["◐", "◓", "◑", "◒"], message: "Unpacking at the remote kitchen", intervalMs: 140 },
+]
+
+const PHASE_CYCLE_MS = 4_000
+
+interface ProgressStep {
+	label: string
+	done: boolean
+}
+
+export interface SessionInfo {
+	id: string
+	url: string
+	description: string
+}
+
+interface PanelTui {
+	requestRender(force?: boolean): void
+}
+
+class TeleportProgressPanel implements Component {
+	private readonly steps: ProgressStep[] = []
+	private finished = false
+	private cancelling = false
+	private sessionInfo: SessionInfo | undefined
+	private currentStepDetail: string | undefined
+
+	private phaseIdx = 0
+	private phaseFrameIdx = 0
+	private stepSpinIdx = 0
+
+	private phaseSpinId: ReturnType<typeof setInterval> | undefined
+	private stepSpinId: ReturnType<typeof setInterval> | undefined
+	private phaseCycleId: ReturnType<typeof setInterval> | undefined
+
+	private mode: "progress" | "git-token" = "progress"
+	private gitTokenPrompt: GitTokenPromptComponent | undefined
+	private gitTokenResolver: ((result: GitTokenPromptResult) => void) | undefined
+
+	constructor(
+		private readonly tui: PanelTui,
+		private readonly theme: Theme,
+		private readonly onCancel: (() => void) | undefined,
+	) {}
+
+	start(): void {
+		this.restartPhaseSpin()
+		this.stepSpinId = setInterval(() => {
+			this.stepSpinIdx = (this.stepSpinIdx + 1) % SPIN_FRAMES.length
+			this.tui.requestRender()
+		}, SPIN_MS)
+		this.phaseCycleId = setInterval(() => {
+			this.phaseIdx = (this.phaseIdx + 1) % TELEPORT_FUN_PHASES.length
+			this.phaseFrameIdx = 0
+			this.restartPhaseSpin()
+			this.tui.requestRender()
+		}, PHASE_CYCLE_MS)
+	}
+
+	stopTimers(): void {
+		if (this.phaseSpinId) clearInterval(this.phaseSpinId)
+		if (this.stepSpinId) clearInterval(this.stepSpinId)
+		if (this.phaseCycleId) clearInterval(this.phaseCycleId)
+		this.phaseSpinId = undefined
+		this.stepSpinId = undefined
+		this.phaseCycleId = undefined
+	}
+
+	private restartPhaseSpin(): void {
+		if (this.phaseSpinId) clearInterval(this.phaseSpinId)
+		this.phaseSpinId = setInterval(() => {
+			this.phaseFrameIdx++
+			this.tui.requestRender()
+		}, this.currentPhase().intervalMs)
+	}
+
+	private currentPhase(): FunPhase {
+		return TELEPORT_FUN_PHASES[this.phaseIdx]
+	}
+
+	appendStep(label: string): void {
+		this.steps.push({ label, done: false })
+		this.currentStepDetail = undefined
+		this.tui.requestRender()
+	}
+
+	completeStep(doneLabel?: string): void {
+		const cur = this.steps.at(-1)
+		if (cur) {
+			cur.done = true
+			if (doneLabel) cur.label = doneLabel
+		}
+		this.currentStepDetail = undefined
+		this.tui.requestRender()
+	}
+
+	setStepDetail(detail: string | undefined): void {
+		// No requestRender — the stepSpinId interval (every 80ms) re-renders
+		// the panel and will pick up the new detail. Avoids amplifying rsync's
+		// per-tick flurry of updates into render storms.
+		this.currentStepDetail = detail
+	}
+
+	setCancelling(): void {
+		if (this.cancelling) return
+		this.cancelling = true
+		this.tui.requestRender()
+	}
+
+	setFinished(info: SessionInfo): void {
+		const cur = this.steps.at(-1)
+		if (cur) cur.done = true
+		this.finished = true
+		this.sessionInfo = info
+		this.tui.requestRender()
+	}
+
+	enterGitTokenMode(host: string, resolve: (result: GitTokenPromptResult) => void): void {
+		this.mode = "git-token"
+		this.gitTokenResolver = resolve
+		this.gitTokenPrompt = new GitTokenPromptComponent(
+			this.theme,
+			host,
+			(result) => {
+				const r = this.gitTokenResolver
+				this.gitTokenResolver = undefined
+				this.gitTokenPrompt = undefined
+				this.mode = "progress"
+				this.tui.requestRender()
+				r?.(result)
+			},
+			() => this.tui.requestRender(),
+		)
+		this.tui.requestRender()
+	}
+
+	forceCloseGitTokenMode(): void {
+		if (this.mode !== "git-token") return
+		const r = this.gitTokenResolver
+		this.gitTokenResolver = undefined
+		this.gitTokenPrompt = undefined
+		this.mode = "progress"
+		r?.({ outcome: "skipped" })
+	}
+
+	handleInput(data: string): void {
+		if (this.mode === "git-token" && this.gitTokenPrompt) {
+			this.gitTokenPrompt.handleInput(data)
+			return
+		}
+		if (this.finished || this.cancelling) return
+		if (matchesKey(data, Key.escape) || matchesKey(data, Key.ctrl("c"))) {
+			this.onCancel?.()
+		}
+	}
+
+	invalidate(): void {}
+
+	dispose(): void {
+		this.stopTimers()
+	}
+
+	render(width: number): string[] {
+		const { theme } = this
+		const b = (s: string) => theme.fg("border", s)
+		const dim = (s: string) => theme.fg("dim", s)
+		const innerW = Math.max(20, width - 2)
+		const contentW = innerW - 2
+
+		const lines: string[] = []
+
+		const titleText = " Teleport "
+		const borderLen = Math.max(0, innerW - titleText.length)
+		const leftB = Math.floor(borderLen / 2)
+		const rightB = borderLen - leftB
+		lines.push(`${b(`╭${"─".repeat(leftB)}`)}${dim(titleText)}${b(`${"─".repeat(rightB)}╮`)}`)
+
+		const ansiRow = (content: string, rawLen: number) =>
+			`${b("│")} ${content}${" ".repeat(Math.max(0, contentW - rawLen))} ${b("│")}`
+		const emptyRow = () => `${b("│")}${" ".repeat(innerW)}${b("│")}`
+		const trunc = (line: string) => truncateToWidth(line, contentW, "")
+		const visibleLen = (s: string): number => {
+			// biome-ignore lint/suspicious/noControlCharactersInRegex: stripping ANSI escapes
+			return s.replace(/\x1b\[[0-9;]*m/g, "").length
+		}
+		const pushBody = (content: string) => {
+			const truncated = trunc(content)
+			lines.push(ansiRow(truncated, visibleLen(truncated)))
+		}
+
+		lines.push(emptyRow())
+
+		// Progress header line + steps
+		const progressLines = this.renderProgressLines(theme)
+		for (const line of progressLines) pushBody(line)
+
+		if (this.mode === "git-token" && this.gitTokenPrompt) {
+			lines.push(emptyRow())
+			lines.push(ansiRow(dim("─".repeat(contentW)), contentW))
+			const promptLines = this.gitTokenPrompt.render(contentW)
+			for (const line of promptLines) pushBody(line)
+		} else if (!this.finished) {
+			lines.push(emptyRow())
+			const hint = "Teleporting in progress — input disabled"
+			pushBody(dim(hint))
+		}
+
+		lines.push(emptyRow())
+		lines.push(b(`╰${"─".repeat(innerW)}╯`))
+
+		return lines
+	}
+
+	private renderProgressLines(theme: Theme): string[] {
+		const lines: string[] = []
+		const dim = (t: string) => theme.fg("dim", t)
+
+		if (this.finished) {
+			lines.push(`${theme.fg("success", "✓")} ${theme.fg("success", "Teleported")}`)
+		} else if (this.cancelling) {
+			lines.push(`${dim("⚠")} ${dim("Cancelling…")}`)
+		} else {
+			const p = this.currentPhase()
+			const char = p.frames[this.phaseFrameIdx % p.frames.length]
+			lines.push(`${theme.fg("accent", char)} ${theme.fg("accent", p.message)}`)
+		}
+
+		for (const s of this.steps) {
+			if (s.done) {
+				lines.push(`  ${theme.fg("success", "✓")} ${dim(s.label)}`)
+			} else {
+				const frame = SPIN_FRAMES[this.stepSpinIdx]
+				const suffix = this.currentStepDetail ? dim(` · ${this.currentStepDetail}`) : ""
+				lines.push(`  ${theme.fg("accent", frame)} ${s.label}${suffix}`)
+			}
+		}
+
+		if (this.finished && this.sessionInfo) {
+			lines.push("")
+			const labelW = 4
+			const pad = (l: string) => l.padEnd(labelW)
+			lines.push(`  ${dim("┌")} ${theme.fg("success", this.sessionInfo.description)}`)
+			lines.push(`  ${dim("│")} ${dim(pad("id"))} ${this.sessionInfo.id}`)
+			lines.push(`  ${dim("└")} ${dim(pad("url"))} ${this.sessionInfo.url}`)
+		}
+
+		return lines
+	}
+}
+
+export interface TeleportProgress {
+	step(label: string): void
+	complete(doneLabel?: string): void
+	setStepDetail(detail: string | undefined): void
+	setCancelling(): void
+	finish(info: SessionInfo): void
+	stop(): void
+	promptGitToken(host: string): Promise<GitTokenPromptResult>
+}
+
+export interface CreateTeleportProgressOptions {
+	onCancel?: () => void
+}
+
+export function createTeleportProgress(
+	ui: ExtensionUIContext,
+	options: CreateTeleportProgressOptions = {},
+): TeleportProgress {
+	let panel: TeleportProgressPanel | undefined
+	let resolveDone: (() => void) | undefined
+	let closed = false
+	const pending: Array<(p: TeleportProgressPanel) => void> = []
+
+	const withPanel = (fn: (p: TeleportProgressPanel) => void) => {
+		if (panel) fn(panel)
+		else pending.push(fn)
+	}
+
+	ui.custom<void>(
+		(tui, theme, _kb, done) => {
+			resolveDone = () => done(undefined)
+			panel = new TeleportProgressPanel(tui, theme, options.onCancel)
+			panel.start()
+			for (const fn of pending) fn(panel)
+			pending.length = 0
+			return panel
+		},
+		{ overlay: true, overlayOptions: { anchor: "center", width: "80%", maxHeight: "80%" } },
+	).catch(() => {})
+
+	const closeOnce = () => {
+		if (closed) return
+		closed = true
+		panel?.stopTimers()
+		resolveDone?.()
+	}
+
+	return {
+		step(label) {
+			withPanel((p) => p.appendStep(label))
+		},
+		complete(doneLabel) {
+			withPanel((p) => p.completeStep(doneLabel))
+		},
+		setStepDetail(detail) {
+			withPanel((p) => p.setStepDetail(detail))
+		},
+		setCancelling() {
+			withPanel((p) => p.setCancelling())
+		},
+		finish(info) {
+			withPanel((p) => p.setFinished(info))
+			closeOnce()
+		},
+		stop() {
+			panel?.forceCloseGitTokenMode()
+			closeOnce()
+		},
+		promptGitToken(host) {
+			if (closed) return Promise.resolve<GitTokenPromptResult>({ outcome: "skipped" })
+			return new Promise<GitTokenPromptResult>((resolve) => {
+				withPanel((p) => p.enterGitTokenMode(host, resolve))
+			})
+		},
+	}
+}

package/src/extensions/teleport/ui/remote-sessions-panel.test.ts

@@ -0,0 +1,221 @@
+import { describe, expect, it, vi } from "vitest"
+import { RemoteSessionsPanel, createRemoteSessionsPanel } from "./remote-sessions-panel.js"
+import type { RemoteSessionNode, RemoteWorkspaceNode } from "./remote-sessions-panel.js"
+
+const NOW = new Date("2026-05-17T12:00:00Z")
+
+function session(over: Partial<RemoteSessionNode> = {}): RemoteSessionNode {
+	return {
+		workspaceId: "ws-aaaaaaaa-1",
+		workspaceName: "alpha",
+		sessionName: "pty-abc12",
+		status: "active",
+		clientConnected: true,
+		lastActivityAt: new Date(NOW.getTime() - 60_000),
+		...over,
+	}
+}
+
+function node(over: Partial<RemoteWorkspaceNode> = {}): RemoteWorkspaceNode {
+	const row: RemoteWorkspaceNode["row"] = {
+		id: "ws-aaaaaaaa-1",
+		name: "alpha",
+		status: "active",
+		createdAt: new Date(NOW.getTime() - 3_600_000),
+		lastActivityAt: new Date(NOW.getTime() - 60_000),
+		host: "host.example",
+		sessionCount: 2,
+		...over.row,
+	}
+	return {
+		row,
+		sessions: over.sessions ?? [],
+		unreachable: over.unreachable ?? false,
+	}
+}
+
+const treeNodes: RemoteWorkspaceNode[] = [
+	node({
+		row: { id: "ws-aaaaaaaa-1", name: "alpha", status: "active", sessionCount: 2 },
+		sessions: [
+			session({ sessionName: "pty-abc12", status: "active", clientConnected: true }),
+			session({ sessionName: "pty-def34", status: "disconnected", clientConnected: false }),
+		],
+	}),
+	node({
+		row: { id: "ws-bbbbbbbb-2", name: "beta", status: "idle", sessionCount: 0 },
+		sessions: [],
+	}),
+]
+
+function makePanel(nodes: RemoteWorkspaceNode[] = treeNodes, opts?: { termRows?: number; termCols?: number }) {
+	const tui = {
+		requestRender: vi.fn(),
+		terminal: { rows: opts?.termRows ?? 40, cols: opts?.termCols ?? 120 },
+	}
+	const done = vi.fn()
+	const panel = createRemoteSessionsPanel(nodes, tui, done)
+	return { panel, tui, done }
+}
+
+function stripAnsi(s: string): string {
+	// biome-ignore lint/suspicious/noControlCharactersInRegex: needed for ANSI stripping
+	return s.replace(/\x1b\[[0-9;]*m/g, "")
+}
+
+function selectedLine(panel: RemoteSessionsPanel): string | undefined {
+	return panel
+		.render(120)
+		.map(stripAnsi)
+		.find((l) => l.includes("> "))
+}
+
+describe("RemoteSessionsPanel", () => {
+	describe("render", () => {
+		it("renders title, headers, hint, workspaces and nested sessions with connectors", () => {
+			const { panel } = makePanel()
+			const text = panel.render(120).map(stripAnsi).join("\n")
+
+			expect(text).toContain("Remote Sessions")
+			expect(text).toContain("NAME / SESSION")
+			expect(text).toContain("STATUS")
+			expect(text).toContain("LAST ACTIVITY")
+			expect(text).toContain("alpha")
+			expect(text).toContain("beta")
+			expect(text).toContain("pty-abc12")
+			expect(text).toContain("pty-def34")
+			// tree connectors: non-last session uses ├─, last uses └─
+			expect(text).toContain("├─ pty-abc12")
+			expect(text).toContain("└─ pty-def34")
+			expect(text).toContain("navigate")
+			expect(text).toContain("rename")
+		})
+
+		it("renders unreachable status for a workspace whose worker failed, and no children", () => {
+			const { panel } = makePanel([
+				node({ row: { id: "ws-x", name: "gamma", status: "active", sessionCount: "?" }, unreachable: true }),
+			])
+			const text = panel.render(120).map(stripAnsi).join("\n")
+			expect(text).toContain("gamma")
+			expect(text).toContain("unreachable")
+		})
+
+		it("renders '(no workspaces)' when empty", () => {
+			const { panel } = makePanel([])
+			const text = panel.render(120).map(stripAnsi).join("\n")
+			expect(text).toContain("(no workspaces)")
+		})
+	})
+
+	describe("navigation", () => {
+		it("walks across workspace and session entries with j/k", () => {
+			const { panel } = makePanel()
+			// entries: [alpha, pty-abc12, pty-def34, beta]
+			expect(selectedLine(panel)).toContain("alpha")
+			panel.handleInput("j")
+			expect(selectedLine(panel)).toContain("pty-abc12")
+			panel.handleInput("j")
+			expect(selectedLine(panel)).toContain("pty-def34")
+			panel.handleInput("j")
+			expect(selectedLine(panel)).toContain("beta")
+			panel.handleInput("k")
+			expect(selectedLine(panel)).toContain("pty-def34")
+		})
+
+		it("clamps at top and bottom", () => {
+			const { panel } = makePanel()
+			panel.handleInput("k")
+			expect(selectedLine(panel)).toContain("alpha")
+			for (let i = 0; i < 10; i++) panel.handleInput("j")
+			expect(selectedLine(panel)).toContain("beta")
+		})
+	})
+
+	describe("actions", () => {
+		it("Enter on a workspace resolves action='open-terminal'", () => {
+			const { panel, done } = makePanel()
+			panel.handleInput("\r")
+			expect(done).toHaveBeenCalledWith({ action: "open-terminal", node: treeNodes[0] })
+		})
+
+		it("Enter on a session resolves action='open-session'", () => {
+			const { panel, done } = makePanel()
+			panel.handleInput("j")
+			panel.handleInput("\r")
+			expect(done).toHaveBeenCalledWith({ action: "open-session", node: treeNodes[0]?.sessions[0] })
+		})
+
+		it("'d' on a workspace resolves action='delete-workspace'", () => {
+			const { panel, done } = makePanel()
+			panel.handleInput("d")
+			expect(done).toHaveBeenCalledWith({ action: "delete-workspace", node: treeNodes[0] })
+		})
+
+		it("'d' on a session resolves action='delete-session'", () => {
+			const { panel, done } = makePanel()
+			panel.handleInput("j")
+			panel.handleInput("d")
+			expect(done).toHaveBeenCalledWith({ action: "delete-session", node: treeNodes[0]?.sessions[0] })
+		})
+
+		it("'r' on a workspace resolves action='rename-workspace'", () => {
+			const { panel, done } = makePanel()
+			panel.handleInput("r")
+			expect(done).toHaveBeenCalledWith({ action: "rename-workspace", node: treeNodes[0] })
+		})
+
+		it("'r' is a no-op on a session entry (no session rename)", () => {
+			const { panel, done } = makePanel()
+			panel.handleInput("j")
+			panel.handleInput("r")
+			expect(done).not.toHaveBeenCalled()
+		})
+
+		it("Esc / q / x resolve done with undefined", () => {
+			for (const key of ["\x1b", "q", "x"]) {
+				const { panel, done } = makePanel()
+				panel.handleInput(key)
+				expect(done).toHaveBeenCalledWith(undefined)
+			}
+		})
+
+		it("Enter and 'd' are no-ops when the tree is empty", () => {
+			const { panel, done } = makePanel([])
+			panel.handleInput("\r")
+			panel.handleInput("d")
+			expect(done).not.toHaveBeenCalled()
+		})
+	})
+
+	describe("stable height", () => {
+		it("emits the same line count across navigation when entries exceed viewport", () => {
+			const manyNodes: RemoteWorkspaceNode[] = Array.from({ length: 12 }, (_, i) =>
+				node({
+					row: { id: `ws-${i}`, name: `n-${i}`, status: "active", sessionCount: 1 },
+					sessions: [session({ workspaceId: `ws-${i}`, sessionName: `s-${i}` })],
+				}),
+			)
+			const { panel } = makePanel(manyNodes, { termRows: 18 })
+			const baseline = panel.render(120).length
+			for (let i = 0; i < 23; i++) {
+				panel.handleInput("j")
+				expect(panel.render(120).length).toBe(baseline)
+			}
+		})
+
+		it("emits the same line count for empty and populated trees", () => {
+			const { panel: empty } = makePanel([], { termRows: 20 })
+			const { panel: full } = makePanel(treeNodes, { termRows: 20 })
+			expect(empty.render(120).length).toBe(full.render(120).length)
+		})
+	})
+
+	describe("direct instantiation", () => {
+		it("can be constructed without the helper", () => {
+			const tui = { requestRender: vi.fn(), terminal: { rows: 24, cols: 80 } }
+			const done = vi.fn()
+			const panel = new RemoteSessionsPanel(treeNodes, tui, done)
+			expect(panel.render(80).length).toBeGreaterThan(0)
+		})
+	})
+})