@markjaquith/agency 2.37.0 → 2.38.0

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/AGENTS.md

@@ -77,7 +77,6 @@ files, and `agency work` reconciles them before launching an agent.
 
 OpenCode can access the complete workbase tree, but this filesystem permission
 does not expand Agency write authority beyond the checkout reported by
-`agency context`. Agency launches expose the managed OpenCode config file at
-runtime and inject absolute access rules scoped to this workbase. Direct edits
-remain denied outside the writable checkout, and no machine-specific path is
-stored in the Git-synced config.
+`agency context`. OpenCode discovers the managed project config from task and
+epic launch directories. No machine-specific path or runtime permission overlay
+is required; agents must follow the authority reported by `agency context`.

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" },
+		])
 	})
 })