@markjaquith/agency 2.37.1 → 2.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markjaquith/agency",
-  "version": "2.37.1",
+  "version": "2.38.0",
   "description": "Manage agentic work across repositories with durable workbases",
   "keywords": [
     "agents",

package/src/utils/chooser.test.ts

@@ -77,6 +77,53 @@ describe("chooser", () => {
 		})
 	})
 
+	test("passes hierarchy depth only to the native renderer", async () => {
+		let offered: readonly {
+			readonly key: string
+			readonly label: string
+			readonly depth?: number
+			readonly segments?: readonly {
+				readonly text: string
+				readonly color?: string
+			}[]
+		}[] = []
+		const io = createIO({
+			select: async (_prompt, choices) => {
+				offered = choices
+				return choices[0]!.key
+			},
+		})
+
+		await Effect.runPromise(
+			choose(
+				"Pick one",
+				[
+					{
+						key: "parent",
+						label: "Parent",
+						depth: 0,
+						segments: [{ text: "P", color: "#c6a0f6" }],
+						value: 1,
+					},
+					{ key: "child", label: "Child", depth: 1, value: 2 },
+				],
+				undefined,
+				io,
+			),
+		)
+
+		expect(offered).toEqual([
+			{
+				key: "parent",
+				label: "Parent",
+				depth: 0,
+				segments: [{ text: "P", color: "#c6a0f6" }],
+			},
+			{ key: "child", label: "Child", depth: 1 },
+		])
+		expect(io.inputs).toEqual([])
+	})
+
 	test("preserves colors for configured external choosers", async () => {
 		const io = createIO({ color: true })
 

package/src/utils/chooser.ts

@@ -4,9 +4,16 @@ export interface Choice<T> {
 	readonly key: string
 	readonly label: string
 	readonly plainLabel?: string
+	readonly depth?: number
+	readonly segments?: readonly ChoiceSegment[]
 	readonly value: T
 }
 
+export interface ChoiceSegment {
+	readonly text: string
+	readonly color?: string
+}
+
 export type ChooserErrorReason =
 	| "invalid-choices"
 	| "input-unavailable"
@@ -36,7 +43,12 @@ export interface ChooserIO {
 	readonly color: boolean
 	readonly select: (
 		prompt: string,
-		choices: readonly { readonly key: string; readonly label: string }[],
+		choices: readonly {
+			readonly key: string
+			readonly label: string
+			readonly depth?: number
+			readonly segments?: readonly ChoiceSegment[]
+		}[],
 	) => Promise<string | null>
 	readonly run: (
 		command: readonly string[],
@@ -175,6 +187,8 @@ const nativeChoice = async <T>(
 			choices.map((choice) => ({
 				key: choice.key,
 				label: displayLabel(choice, false),
+				...(choice.depth === undefined ? {} : { depth: choice.depth }),
+				...(choice.segments === undefined ? {} : { segments: choice.segments }),
 			})),
 		)
 	} catch (cause) {

package/src/utils/interactive.test.tsx

@@ -6,9 +6,11 @@ import { tmpdir } from "node:os"
 import { dirname, join } from "node:path"
 import {
 	fuzzyChoices,
+	hierarchyPrefix,
 	InteractiveSelectPrompt,
 	InteractiveTextPrompt,
 	interactiveRendererConfig,
+	interactiveSelectRendererConfig,
 } from "./interactive"
 
 const submitEditedText = async (
@@ -44,6 +46,7 @@ describe("OpenTUI interaction", () => {
 		const source = await Bun.file(
 			new URL("./interactive.tsx", import.meta.url),
 		).text()
+		const theme = await Bun.file(new URL("./theme.ts", import.meta.url)).text()
 		const root = await mkdtemp(join(tmpdir(), "agency-interactive-jsx-"))
 		const entrypoint = join(
 			root,
@@ -54,6 +57,7 @@ describe("OpenTUI interaction", () => {
 		)
 		await mkdir(dirname(entrypoint), { recursive: true })
 		await writeFile(entrypoint, source)
+		await writeFile(join(dirname(entrypoint), "theme.ts"), theme)
 
 		try {
 			const result = await Bun.build({
@@ -79,6 +83,61 @@ describe("OpenTUI interaction", () => {
 		})
 	})
 
+	test("uses the full alternate screen for selectors", () => {
+		expect(interactiveSelectRendererConfig).toMatchObject({
+			screenMode: "alternate-screen",
+			externalOutputMode: "passthrough",
+			clearOnShutdown: false,
+		})
+	})
+
+	test("fills the available rows and keeps the selection visible after resize", async () => {
+		const setup = await testRender(
+			() => (
+				<InteractiveSelectPrompt
+					prompt="Work on"
+					choices={Array.from({ length: 10 }, (_, index) => ({
+						key: String(index),
+						label: `choice-${index}`,
+					}))}
+					onDone={() => undefined}
+				/>
+			),
+			{ width: 40, height: 8 },
+		)
+		try {
+			await setup.renderer.setupTerminal()
+			await setup.renderOnce()
+			await Bun.sleep(0)
+
+			let frame = setup.captureCharFrame()
+			for (let index = 0; index < 5; index++) {
+				expect(frame).toContain(`choice-${index}`)
+			}
+			expect(frame).not.toContain("choice-5")
+
+			for (let index = 0; index < 7; index++) {
+				setup.mockInput.pressArrow("down")
+			}
+			await setup.flush()
+			frame = setup.captureCharFrame()
+			expect(frame).toContain("choice-5")
+			expect(frame).toContain("▌ choice-7")
+			expect(frame).toContain("choice-9")
+
+			setup.resize(40, 5)
+			await setup.flush()
+			frame = setup.captureCharFrame()
+			expect(frame).not.toContain("choice-5")
+			expect(frame).toContain("choice-6")
+			expect(frame).toContain("▌ choice-7")
+			expect(frame).not.toContain("choice-8")
+			expect(frame).not.toContain("choice-9")
+		} finally {
+			setup.renderer.destroy()
+		}
+	})
+
 	test("ranks case-insensitive fuzzy matches", () => {
 		const choices = [
 			{ key: "nested", label: "Manage Agency" },
@@ -96,6 +155,218 @@ describe("OpenTUI interaction", () => {
 		expect(fuzzyChoices(choices, "zzz")).toEqual([])
 	})
 
+	test("builds continuous hierarchy connectors for roots, children, and phases", () => {
+		const choices = [
+			{ key: "epic", label: "epic delivery", depth: 0 },
+			{ key: "multi", label: "task multi", depth: 1 },
+			{ key: "build", label: "phase build", depth: 2 },
+			{ key: "verify", label: "phase verify", depth: 2 },
+			{ key: "single", label: "task single", depth: 1 },
+			{ key: "empty", label: "epic empty", depth: 0 },
+			{ key: "standalone", label: "task standalone", depth: 0 },
+		]
+
+		expect(choices.map((_, index) => hierarchyPrefix(choices, index))).toEqual([
+			"╭─ ",
+			"│  ╭─ ",
+			"│  │  ╭─ ",
+			"│  │  ╰─ ",
+			"│  ╰─ ",
+			"├─ ",
+			"╰─ ",
+		])
+		expect(hierarchyPrefix([{ key: "only", label: "Only", depth: 0 }], 0)).toBe(
+			"╰─ ",
+		)
+		expect(hierarchyPrefix([{ key: "flat", label: "Flat" }], 0)).toBe("")
+	})
+
+	test("renders hierarchy only while the filter is empty", async () => {
+		const setup = await testRender(
+			() => (
+				<InteractiveSelectPrompt
+					prompt="Work on"
+					choices={[
+						{ key: "epic", label: "epic delivery", depth: 0 },
+						{ key: "child", label: "task delivery-child", depth: 1 },
+						{ key: "standalone", label: "task standalone", depth: 0 },
+					]}
+					onDone={() => undefined}
+				/>
+			),
+			{ width: 40, height: 5 },
+		)
+		try {
+			await setup.renderer.setupTerminal()
+			await setup.renderOnce()
+			await Bun.sleep(0)
+
+			let frame = setup.captureCharFrame()
+			expect(frame).toContain("▌ ╭─ epic delivery")
+			expect(frame).toContain("  │  ╰─ task delivery-child")
+
+			setup.mockInput.pressArrow("down")
+			await setup.flush()
+			frame = setup.captureCharFrame()
+			expect(frame).toContain("  ╭─ epic delivery")
+			expect(frame).toContain("▌ │  ╰─ task delivery-child")
+
+			await setup.mockInput.typeText("delivery")
+			await setup.flush()
+			frame = setup.captureCharFrame()
+			expect(frame).toContain("▌ epic delivery")
+			expect(frame).toContain("  task delivery-child")
+			expect(frame).not.toMatch(/[╭│├╰─]/)
+
+			setup.mockInput.pressKey("u", { ctrl: true })
+			await setup.flush()
+			setup.resize(32, 5)
+			await setup.flush()
+			frame = setup.captureCharFrame()
+			expect(frame).toContain("▌ ╭─ epic delivery")
+			expect(frame).toContain("  │  ╰─ task delivery-child")
+		} finally {
+			setup.renderer.destroy()
+		}
+	})
+
+	test("keeps connectors stable while highlighting the full active row", async () => {
+		const setup = await testRender(
+			() => (
+				<InteractiveSelectPrompt
+					prompt="Work on"
+					choices={[
+						{ key: "agency", label: "agency", depth: 0 },
+						{ key: "web", label: "web", depth: 0 },
+					]}
+					onDone={() => undefined}
+				/>
+			),
+			{ width: 40, height: 5 },
+		)
+		try {
+			await setup.renderer.setupTerminal()
+			await setup.renderOnce()
+			await Bun.sleep(0)
+
+			let lines = setup.captureSpans().lines
+			let active = lines.find((line) =>
+				line.spans.some((span) => span.text === "▌ "),
+			)!
+			expect(
+				active.spans.find((span) => span.text === "▌ ")?.fg.toInts(),
+			).toEqual([198, 160, 246, 255])
+			expect(
+				active.spans.find((span) => span.text === "╭─ ")?.fg.toInts(),
+			).toEqual([128, 135, 162, 255])
+			expect(active.spans.map((span) => span.bg.toInts())).toEqual(
+				Array.from({ length: active.spans.length }, () => [73, 77, 100, 255]),
+			)
+
+			setup.mockInput.pressArrow("down")
+			await setup.flush()
+			lines = setup.captureSpans().lines
+			active = lines.find((line) =>
+				line.spans.some((span) => span.text === "▌ "),
+			)!
+			expect(
+				lines
+					.flatMap((line) => line.spans)
+					.find((span) => span.text === "╭─ ")
+					?.fg.toInts(),
+			).toEqual([128, 135, 162, 255])
+			expect(
+				active.spans.find((span) => span.text === "╰─ ")?.fg.toInts(),
+			).toEqual([128, 135, 162, 255])
+			expect(active.spans.map((span) => span.bg.toInts())).toEqual(
+				Array.from({ length: active.spans.length }, () => [73, 77, 100, 255]),
+			)
+		} finally {
+			setup.renderer.destroy()
+		}
+	})
+
+	test("renders entity and status Nerd Font icons in distinct colors", async () => {
+		const setup = await testRender(
+			() => (
+				<InteractiveSelectPrompt
+					prompt="Work on"
+					choices={[
+						{
+							key: "verify",
+							label: "[done] phase verify",
+							depth: 0,
+							segments: [
+								{ text: "󰄬", color: "#a6da95" },
+								{ text: " " },
+								{ text: "󰔚", color: "#eed49f" },
+								{ text: " verify" },
+							],
+						},
+					]}
+					onDone={() => undefined}
+				/>
+			),
+			{ width: 40, height: 4 },
+		)
+		try {
+			await setup.renderer.setupTerminal()
+			await setup.renderOnce()
+			await Bun.sleep(0)
+
+			expect(setup.captureCharFrame()).toContain("▌ ╰─ 󰄬 󰔚 verify")
+			const spans = setup.captureSpans().lines.flatMap((line) => line.spans)
+			expect(spans.find((span) => span.text === "󰄬")?.fg.toInts()).toEqual([
+				166, 218, 149, 255,
+			])
+			expect(spans.find((span) => span.text === "󰔚")?.fg.toInts()).toEqual([
+				238, 212, 159, 255,
+			])
+		} finally {
+			setup.renderer.destroy()
+		}
+	})
+
+	test("clears a non-empty filter before escape cancels", async () => {
+		let selected: string | null | undefined
+		const setup = await testRender(
+			() => (
+				<InteractiveSelectPrompt
+					prompt="Work on"
+					choices={[
+						{ key: "agency", label: "agency", depth: 0 },
+						{ key: "web", label: "web", depth: 0 },
+					]}
+					onDone={(value) => {
+						selected = value
+					}}
+				/>
+			),
+			{ width: 40, height: 5, kittyKeyboard: true },
+		)
+		try {
+			await setup.renderer.setupTerminal()
+			await setup.renderOnce()
+			await Bun.sleep(0)
+			await setup.mockInput.typeText("web")
+			await setup.flush()
+			expect(setup.captureCharFrame()).toContain("▌ web")
+
+			setup.mockInput.pressEscape()
+			await setup.flush()
+			expect(selected).toBeUndefined()
+			const cleared = setup.captureCharFrame()
+			expect(cleared).toContain("▌ ╭─ agency")
+			expect(cleared).toContain("  ╰─ web")
+
+			setup.mockInput.pressEscape()
+			await setup.waitFor(() => selected !== undefined)
+			expect(selected).toBeNull()
+		} finally {
+			setup.renderer.destroy()
+		}
+	})
+
 	test("selects choices with ctrl-p, ctrl-n, and arrow navigation", async () => {
 		const selectAfter = async (key: "p" | "n" | "up" | "down") => {
 			let selected: string | null | undefined
@@ -501,7 +772,7 @@ describe("OpenTUI interaction", () => {
 			await setup.renderOnce()
 			await setup.mockInput.typeText("docs")
 			await setup.renderOnce()
-			expect(setup.captureCharFrame()).toContain("> docs")
+			expect(setup.captureCharFrame()).toContain("▌ docs")
 			setup.mockInput.pressEnter()
 			await setup.waitFor(() => selected !== undefined)
 			expect(selected).toBe("docs")

package/src/utils/interactive.tsx

@@ -5,13 +5,23 @@ import {
 	type CliRenderer,
 	type CliRendererConfig,
 	type TextareaRenderable,
+	type TextNodeOptions,
 } from "@opentui/core"
-import { render, useKeyboard, type JSX } from "@opentui/solid"
+import {
+	render,
+	useKeyboard,
+	useTerminalDimensions,
+	type JSX,
+} from "@opentui/solid"
 import { createMemo, createSignal, For } from "solid-js"
+import type { ChoiceSegment } from "./chooser"
+import { macchiato } from "./theme"
 
 export interface InteractiveChoice {
 	readonly key: string
 	readonly label: string
+	readonly depth?: number
+	readonly segments?: readonly ChoiceSegment[]
 }
 
 export const interactiveRendererConfig = {
@@ -26,6 +36,12 @@ export const interactiveRendererConfig = {
 	openConsoleOnError: false,
 } satisfies CliRendererConfig
 
+export const interactiveSelectRendererConfig = {
+	...interactiveRendererConfig,
+	screenMode: "alternate-screen",
+	externalOutputMode: "passthrough",
+} satisfies CliRendererConfig
+
 interface PromptProps<T> {
 	readonly prompt: string
 	readonly onDone: (value: T | null) => void
@@ -120,12 +136,22 @@ export const InteractiveTextPrompt = (props: PromptProps<string>) => {
 	})
 
 	return (
-		<box flexDirection="column" width="100%" height="100%">
-			<text fg="#7aa2f7">{props.prompt}</text>
+		<box
+			flexDirection="column"
+			width="100%"
+			height="100%"
+			backgroundColor={macchiato.base}
+		>
+			<text fg={macchiato.blue}>{props.prompt}</text>
 			<textarea
 				focused
 				height={2}
 				wrapMode="word"
+				backgroundColor={macchiato.mantle}
+				focusedBackgroundColor={macchiato.surface0}
+				textColor={macchiato.text}
+				focusedTextColor={macchiato.text}
+				cursorColor={macchiato.rosewater}
 				keyBindings={[{ name: "return", action: "submit" }]}
 				onContentChange={() => {
 					editing.handleInput(input?.plainText ?? "")
@@ -137,7 +163,7 @@ export const InteractiveTextPrompt = (props: PromptProps<string>) => {
 					})
 				}}
 			/>
-			<text fg="#6c7086" wrapMode="none">
+			<text fg={macchiato.overlay1} wrapMode="none">
 				enter submit | esc cancel | ctrl-y yank
 			</text>
 		</box>
@@ -213,18 +239,72 @@ export const fuzzyChoices = (
 		.map((match) => match.choice)
 }
 
+const choiceDepth = (choice: InteractiveChoice) => choice.depth ?? 0
+
+const hasSibling = (
+	choices: readonly InteractiveChoice[],
+	index: number,
+	direction: -1 | 1,
+) => {
+	const depth = choiceDepth(choices[index]!)
+	for (
+		let siblingIndex = index + direction;
+		siblingIndex >= 0 && siblingIndex < choices.length;
+		siblingIndex += direction
+	) {
+		const siblingDepth = choiceDepth(choices[siblingIndex]!)
+		if (siblingDepth < depth) return false
+		if (siblingDepth === depth) return true
+	}
+	return false
+}
+
+export const hierarchyPrefix = (
+	choices: readonly InteractiveChoice[],
+	index: number,
+) => {
+	const choice = choices[index]
+	if (!choice || choice.depth === undefined) return ""
+	const depth = choiceDepth(choice)
+	let prefix = ""
+	let ancestorIndex = index
+
+	for (let ancestorDepth = depth - 1; ancestorDepth >= 0; ancestorDepth--) {
+		for (ancestorIndex--; ancestorIndex >= 0; ancestorIndex--) {
+			if (choiceDepth(choices[ancestorIndex]!) === ancestorDepth) break
+		}
+		prefix = `${ancestorIndex >= 0 && hasSibling(choices, ancestorIndex, 1) ? "│  " : "   "}${prefix}`
+	}
+
+	const hasPrevious = hasSibling(choices, index, -1)
+	const hasNext = hasSibling(choices, index, 1)
+	return `${prefix}${!hasPrevious && hasNext ? "╭" : hasNext ? "├" : "╰"}─ `
+}
+
 export const InteractiveSelectPrompt = (props: SelectPromptProps) => {
 	let input: TextareaRenderable | undefined
+	const dimensions = useTerminalDimensions()
 	const [query, setQuery] = createSignal("")
 	const editing = createReadlineEditing(() => input, setQuery)
 	const [selected, setSelected] = createSignal(0)
 	const choices = createMemo(() => fuzzyChoices(props.choices, query()))
+	const displaySegments = (choice: InteractiveChoice) =>
+		choice.segments ?? [{ text: choice.label }]
 	const move = (offset: -1 | 1) => {
 		const count = choices().length
 		if (count === 0) return
 		setSelected((current) => (current + offset + count) % count)
 	}
 	useKeyboard((key) => {
+		if (key.name === "escape" && query()) {
+			key.preventDefault()
+			key.stopPropagation()
+			input?.clear()
+			editing.handleInput("")
+			setQuery("")
+			setSelected(0)
+			return
+		}
 		if (isCancel(key)) {
 			key.preventDefault()
 			key.stopPropagation()
@@ -252,25 +332,32 @@ export const InteractiveSelectPrompt = (props: SelectPromptProps) => {
 	})
 
 	const visible = () => {
+		const visibleCount = Math.max(dimensions().height - 3, 1)
 		const start = Math.min(
-			Math.max(selected() - 1, 0),
-			Math.max(choices().length - 2, 0),
+			Math.max(selected() - Math.floor(visibleCount / 2), 0),
+			Math.max(choices().length - visibleCount, 0),
 		)
 		return choices()
-			.slice(start, start + 2)
+			.slice(start, start + visibleCount)
 			.map((choice, offset) => ({
 				choice,
 				index: start + offset,
+				originalIndex: props.choices.indexOf(choice),
 			}))
 	}
 
 	return (
-		<box flexDirection="column" width="100%" height="100%">
+		<box
+			flexDirection="column"
+			width="100%"
+			height="100%"
+			backgroundColor={macchiato.base}
+		>
 			<box flexDirection="row" width="100%">
-				<text fg="#7aa2f7" flexShrink={1} wrapMode="none">
+				<text fg={macchiato.blue} flexShrink={1} wrapMode="none">
 					{props.prompt}
 				</text>
-				<text fg="#7aa2f7">{" > "}</text>
+				<text fg={macchiato.blue}>{" > "}</text>
 				<textarea
 					focused
 					flexGrow={1}
@@ -278,6 +365,12 @@ export const InteractiveSelectPrompt = (props: SelectPromptProps) => {
 					height={2}
 					wrapMode="word"
 					placeholder="filter"
+					placeholderColor={macchiato.overlay0}
+					backgroundColor={macchiato.mantle}
+					focusedBackgroundColor={macchiato.surface0}
+					textColor={macchiato.text}
+					focusedTextColor={macchiato.text}
+					cursorColor={macchiato.rosewater}
 					keyBindings={[{ name: "return", action: "submit" }]}
 					onContentChange={() => {
 						editing.handleInput(input?.plainText ?? "")
@@ -291,21 +384,50 @@ export const InteractiveSelectPrompt = (props: SelectPromptProps) => {
 					}}
 				/>
 			</box>
-			<box flexDirection="column" height={2}>
-				<For each={visible()} fallback={<text fg="#6c7086">No matches</text>}>
-					{({ choice, index }) => (
-						<text
-							fg={index === selected() ? "#c0caf5" : "#6c7086"}
-							wrapMode="none"
+			<box flexDirection="column" flexGrow={1}>
+				<For
+					each={visible()}
+					fallback={<text fg={macchiato.overlay1}>No matches</text>}
+				>
+					{({ choice, index, originalIndex }) => (
+						<box
+							width="100%"
+							height={1}
+							backgroundColor={
+								index === selected() ? macchiato.surface1 : macchiato.base
+							}
 						>
-							{index === selected() ? "> " : "  "}
-							{choice.label}
-						</text>
+							<text
+								fg={index === selected() ? macchiato.text : macchiato.subtext0}
+								bg={index === selected() ? macchiato.surface1 : macchiato.base}
+								wrapMode="none"
+							>
+								<span
+									style={
+										{
+											fg: index === selected() ? macchiato.mauve : undefined,
+										} as TextNodeOptions
+									}
+								>
+									{index === selected() ? "▌ " : "  "}
+								</span>
+								<span style={{ fg: macchiato.overlay1 } as TextNodeOptions}>
+									{query() ? "" : hierarchyPrefix(props.choices, originalIndex)}
+								</span>
+								<For each={displaySegments(choice)}>
+									{(segment) => (
+										<span style={{ fg: segment.color } as TextNodeOptions}>
+											{segment.text}
+										</span>
+									)}
+								</For>
+							</text>
+						</box>
 					)}
 				</For>
 			</box>
-			<text fg="#6c7086" wrapMode="none">
-				enter select | esc cancel | arrows/ctrl-n/p | ctrl-y yank
+			<text fg={macchiato.overlay1} wrapMode="none">
+				enter select | esc clear/cancel | arrows/ctrl-n/p | ctrl-y yank
 			</text>
 		</box>
 	)
@@ -323,6 +445,7 @@ const shutdown = async (renderer: CliRenderer) => {
 
 async function runInteractive<T>(
 	view: (finish: (value: T | null) => void) => JSX.Element,
+	config: CliRendererConfig = interactiveRendererConfig,
 ) {
 	let finish!: (value: T | null) => void
 	let settled = false
@@ -336,7 +459,7 @@ async function runInteractive<T>(
 	let renderer: CliRenderer | undefined
 	try {
 		renderer = await createCliRenderer({
-			...interactiveRendererConfig,
+			...config,
 			onDestroy: () => finish(null),
 		})
 		await render(() => view(finish), renderer)
@@ -361,10 +484,13 @@ export const promptSelect = (
 	prompt: string,
 	choices: readonly InteractiveChoice[],
 ) =>
-	runInteractive<string>((finish) => (
-		<InteractiveSelectPrompt
-			prompt={prompt}
-			choices={choices}
-			onDone={finish}
-		/>
-	))
+	runInteractive<string>(
+		(finish) => (
+			<InteractiveSelectPrompt
+				prompt={prompt}
+				choices={choices}
+				onDone={finish}
+			/>
+		),
+		interactiveSelectRendererConfig,
+	)

package/src/utils/theme.ts

@@ -0,0 +1,17 @@
+export const macchiato = {
+	rosewater: "#f4dbd6",
+	red: "#ed8796",
+	yellow: "#eed49f",
+	green: "#a6da95",
+	sapphire: "#7dc4e4",
+	blue: "#8aadf4",
+	mauve: "#c6a0f6",
+	text: "#cad3f5",
+	subtext0: "#a5adcb",
+	overlay1: "#8087a2",
+	overlay0: "#6e738d",
+	surface1: "#494d64",
+	surface0: "#363a4f",
+	base: "#24273a",
+	mantle: "#1e2030",
+} as const

package/src/workbase/work-target.test.ts

@@ -61,14 +61,14 @@ describe("work target choices", () => {
 		)
 
 		expect(choices.map((choice) => choice.label)).toEqual([
-			"\x1b[35m\x1b[0m delivery\x1b[2m - Ship the release\x1b[0m",
-			"  \x1b[36m󰗡\x1b[0m multi",
-			"    \x1b[34m◐\x1b[0m \x1b[33m󰔚\x1b[0m build",
-			"    \x1b[32m✓\x1b[0m \x1b[33m󰔚\x1b[0m verify",
-			"    \x1b[31m⊘\x1b[0m \x1b[33m󰔚\x1b[0m unlisted",
-			"  \x1b[32m✓\x1b[0m \x1b[36m󰗡\x1b[0m single",
-			"\x1b[2m○\x1b[0m \x1b[36m󰗡\x1b[0m standalone\x1b[2m - Independent work\x1b[0m",
-			"\x1b[35m↗\x1b[0m \x1b[36m󰗡\x1b[0m delegated",
+			"\x1b[38;2;198;160;246m\x1b[0m delivery\x1b[2m - Ship the release\x1b[0m",
+			"\x1b[38;2;125;196;228m󰗡\x1b[0m multi",
+			"\x1b[38;2;138;173;244m󰔟\x1b[0m \x1b[38;2;238;212;159m󰔚\x1b[0m build",
+			"\x1b[38;2;166;218;149m󰄬\x1b[0m \x1b[38;2;238;212;159m󰔚\x1b[0m verify",
+			"\x1b[38;2;237;135;150m󰅖\x1b[0m \x1b[38;2;238;212;159m󰔚\x1b[0m unlisted",
+			"\x1b[38;2;166;218;149m󰄬\x1b[0m \x1b[38;2;125;196;228m󰗡\x1b[0m single",
+			"\x1b[38;2;128;135;162m󰄱\x1b[0m \x1b[38;2;125;196;228m󰗡\x1b[0m standalone\x1b[2m - Independent work\x1b[0m",
+			"\x1b[38;2;198;160;246m󰁕\x1b[0m \x1b[38;2;125;196;228m󰗡\x1b[0m delegated",
 		])
 		expect(choices.map((choice) => choice.target.kind)).toEqual([
 			"epic",
@@ -82,13 +82,27 @@ describe("work target choices", () => {
 		])
 		expect(choices.map((choice) => choice.plainLabel)).toEqual([
 			"epic delivery - Ship the release",
-			"  task multi",
-			"    [working] phase build",
-			"    [done] phase verify",
-			"    [dropped] phase unlisted",
-			"  [done] task single",
+			"task multi",
+			"[working] phase build",
+			"[done] phase verify",
+			"[dropped] phase unlisted",
+			"[done] task single",
 			"[open] task standalone - Independent work",
 			"[delegated] task delegated",
 		])
+		expect(choices.map((choice) => choice.depth)).toEqual([
+			0, 1, 2, 2, 2, 1, 0, 0,
+		])
+		expect(choices[0]!.segments).toEqual([
+			{ text: "", color: "#c6a0f6" },
+			{ text: " delivery" },
+			{ text: " - Ship the release", color: "#6e738d" },
+		])
+		expect(choices[2]!.segments).toEqual([
+			{ text: "󰔟", color: "#8aadf4" },
+			{ text: " " },
+			{ text: "󰔚", color: "#eed49f" },
+			{ text: " build" },
+		])
 	})
 })

package/src/workbase/work-target.ts

@@ -1,6 +1,7 @@
 import { Effect } from "effect"
 import type { WorkStatus } from "./schemas"
-import { choose } from "../utils/chooser"
+import { choose, type ChoiceSegment } from "../utils/chooser"
+import { macchiato } from "../utils/theme"
 
 export type WorkTarget =
 	| {
@@ -56,58 +57,98 @@ interface PhaseRecord {
 export interface WorkTargetChoice {
 	readonly label: string
 	readonly plainLabel: string
+	readonly depth: number
+	readonly segments: readonly ChoiceSegment[]
 	readonly target: WorkTarget
 }
 
-const statusIcons: Record<WorkStatus, string> = {
-	open: "\x1b[2m○\x1b[0m",
-	working: "\x1b[34m◐\x1b[0m",
-	delegated: "\x1b[35m↗\x1b[0m",
-	done: "\x1b[32m✓\x1b[0m",
-	dropped: "\x1b[31m⊘\x1b[0m",
+const statuses: Record<
+	WorkStatus,
+	{ readonly icon: string; readonly color: string }
+> = {
+	open: { icon: "󰄱", color: macchiato.overlay1 },
+	working: { icon: "󰔟", color: macchiato.blue },
+	delegated: { icon: "󰁕", color: macchiato.mauve },
+	done: { icon: "󰄬", color: macchiato.green },
+	dropped: { icon: "󰅖", color: macchiato.red },
 }
 
+const kinds: Record<
+	WorkTarget["kind"],
+	{ readonly icon: string; readonly color: string }
+> = {
+	epic: { icon: "", color: macchiato.mauve },
+	task: { icon: "󰗡", color: macchiato.sapphire },
+	phase: { icon: "󰔚", color: macchiato.yellow },
+}
+
+const hexToAnsi = (color: string) => {
+	const value = color.slice(1)
+	return [0, 2, 4]
+		.map((offset) => Number.parseInt(value.slice(offset, offset + 2), 16))
+		.join(";")
+}
+
+const colorize = (item: { readonly icon: string; readonly color: string }) =>
+	`\x1b[38;2;${hexToAnsi(item.color)}m${item.icon}\x1b[0m`
+
 const label = (
-	indent: string,
 	kind: WorkTarget["kind"],
 	id: string,
 	description?: string,
 	status?: WorkStatus,
 ) =>
-	`${indent}${status === undefined ? "" : `${statusIcons[status]} `}${
-		{
-			epic: "\x1b[35m\x1b[0m",
-			task: "\x1b[36m󰗡\x1b[0m",
-			phase: "\x1b[33m󰔚\x1b[0m",
-		}[kind]
-	} ${id}${description === undefined ? "" : `\x1b[2m - ${description}\x1b[0m`}`
+	`${status === undefined ? "" : `${colorize(statuses[status])} `}${colorize(kinds[kind])} ${id}${description === undefined ? "" : `\x1b[2m - ${description}\x1b[0m`}`
+
+const segments = (
+	kind: WorkTarget["kind"],
+	id: string,
+	description?: string,
+	status?: WorkStatus,
+): readonly ChoiceSegment[] => [
+	...(status === undefined
+		? []
+		: [
+				{ text: statuses[status].icon, color: statuses[status].color },
+				{ text: " " },
+			]),
+	{ text: kinds[kind].icon, color: kinds[kind].color },
+	{ text: ` ${id}` },
+	...(description === undefined
+		? []
+		: [{ text: ` - ${description}`, color: macchiato.overlay0 }]),
+]
 
 const plainLabel = (
-	indent: string,
 	kind: WorkTarget["kind"],
 	id: string,
 	description?: string,
 	status?: WorkStatus,
 ) =>
-	`${indent}${status === undefined ? "" : `[${status}] `}${kind} ${id}${description === undefined ? "" : ` - ${description}`}`
+	`${status === undefined ? "" : `[${status}] `}${kind} ${id}${description === undefined ? "" : ` - ${description}`}`
 
 const taskChoices = (
 	task: TaskRecord,
 	phaseRecords: readonly PhaseRecord[],
-	indent: string,
+	depth: number,
 ): readonly WorkTargetChoice[] => {
 	const multiPhase = "phases" in task.data
 	const choices: WorkTargetChoice[] = [
 		{
 			label: label(
-				indent,
 				"task",
 				task.id,
 				task.data.description,
 				multiPhase ? undefined : (task.data.status ?? "open"),
 			),
 			plainLabel: plainLabel(
-				indent,
+				"task",
+				task.id,
+				task.data.description,
+				multiPhase ? undefined : (task.data.status ?? "open"),
+			),
+			depth,
+			segments: segments(
 				"task",
 				task.id,
 				task.data.description,
@@ -132,14 +173,19 @@ const taskChoices = (
 		renderedPhases.add(record.id)
 		choices.push({
 			label: label(
-				`${indent}  `,
 				"phase",
 				record.id,
 				record.data.description,
 				record.data.status ?? "open",
 			),
 			plainLabel: plainLabel(
-				`${indent}  `,
+				"phase",
+				record.id,
+				record.data.description,
+				record.data.status ?? "open",
+			),
+			depth: depth + 1,
+			segments: segments(
 				"phase",
 				record.id,
 				record.data.description,
@@ -158,14 +204,19 @@ const taskChoices = (
 		if (renderedPhases.has(record.id)) continue
 		choices.push({
 			label: label(
-				`${indent}  `,
 				"phase",
 				record.id,
 				record.data.description,
 				record.data.status ?? "open",
 			),
 			plainLabel: plainLabel(
-				`${indent}  `,
+				"phase",
+				record.id,
+				record.data.description,
+				record.data.status ?? "open",
+			),
+			depth: depth + 1,
+			segments: segments(
 				"phase",
 				record.id,
 				record.data.description,
@@ -200,21 +251,23 @@ export const buildWorkTargetChoices = (
 
 	for (const epic of epicRecords) {
 		choices.push({
-			label: label("", "epic", epic.id, epic.data.description),
-			plainLabel: plainLabel("", "epic", epic.id, epic.data.description),
+			label: label("epic", epic.id, epic.data.description),
+			plainLabel: plainLabel("epic", epic.id, epic.data.description),
+			depth: 0,
+			segments: segments("epic", epic.id, epic.data.description),
 			target: { kind: "epic", epicId: epic.id, path: epic.path },
 		})
 		for (const child of epic.data.tasks) {
 			const task = tasks.get(child.id)
 			if (!task || nestedTasks.has(task.id)) continue
 			nestedTasks.add(task.id)
-			choices.push(...taskChoices(task, phases.get(task.id) ?? [], "  "))
+			choices.push(...taskChoices(task, phases.get(task.id) ?? [], 1))
 		}
 	}
 
 	for (const task of taskRecords) {
 		if (nestedTasks.has(task.id)) continue
-		choices.push(...taskChoices(task, phases.get(task.id) ?? [], ""))
+		choices.push(...taskChoices(task, phases.get(task.id) ?? [], 0))
 	}
 
 	return choices
@@ -232,6 +285,8 @@ export const pickWorkTarget: PickWorkTarget = (choices, command) =>
 			key: String(index),
 			label: choice.label,
 			plainLabel: choice.plainLabel,
+			depth: choice.depth,
+			segments: choice.segments,
 			value: choice.target,
 		})),
 		command,