@harborppm/cli 0.4.0 → 0.5.1

package/README.md

@@ -12,7 +12,7 @@ Needs Node 22 or later.
 
 ## The full-screen app
 
-`harbor` on its own takes over the terminal, like `htop` or `lazygit`, and gives it back when you press `q`. It opens on Harbor's mark (the teal tile, the H and three boats, drawn in half blocks) while your harbor loads, and keeps a small one at the foot of the sidebar when the terminal is tall enough (21 rows or more; the larger one from 110 columns). Then:
+`harbor` on its own takes over the terminal, like `htop` or `lazygit`, and gives it back when you press `q`. It opens on Harbor's mark (the teal tile, the H and three boats, drawn in half blocks) while your harbor loads; after that the sidebar holds just the screens. Then:
 
 1. **Today**: what's on you, late first; who's waiting on you; your risks and issues.
 2. **Inbox**: the same pings as the website: waiting on you, sign-offs, mentions. Enter opens one; it's marked read.
@@ -27,6 +27,8 @@ A task changes in place too: title, status, owner, due date (`2026-10-14`, `toda
 
 Keys: `↑↓` (or `j k`) and `←→` (or `h l`) move, Enter opens, Esc goes back, `:` finds anything (a screen, "new project", a project or program by name), `/` finds a task by its key or words, `n` makes something new, `e` changes what's open, `[` `]` move a card a column, `x` marks it done, `d` deletes (it asks first), `u` undoes your last change, `H` switches harbor, `?` lists them all.
 
+It has colours for dark terminals and for light ones, and picks by asking the terminal for its background (or reading `COLORFGBG`); a terminal that doesn't say gets the dark ones. `harbor theme light` or `harbor theme dark` settles it, `harbor theme auto` goes back to asking, and `HARBOR_THEME` overrides it for one run.
+
 `harbor help` shows the mark too, in a terminal with colour; piped, or with `NO_COLOR` set, it's plain text. `harbor --version` says which version you have.
 
 ## Staying up to date

package/dist/app.mjs

@@ -192,137 +192,6 @@ const createImpl = (createState) => {
 };
 const create$1 = ((createState) => createState ? createImpl(createState) : createImpl);
 
-//#endregion
-//#region cli/lib/logo.mjs
-/**
-* Harbor's mark for the terminal: the favicon (public/favicon.svg) as
-* pixels, a teal tile with the white H and three coral boats. Each
-* terminal row draws two pixel rows with half blocks (▀ ▄ █), so a square
-* grid comes out square. `harbor help` prints it; the full-screen app draws
-* it on its splash and its keys overlay (src/tui/logo.tsx).
-*
-* T teal, W white, C coral, P a boat's pointed bow (coral in the middle of
-* the two pixels, drawn with quarter blocks), . nothing (the rounded corners).
-*/
-/** 24 by 24: posts three wide, a pixel of water between each boat and the posts. */
-const LOGO = [
-	"...TTTTTTTTTTTTTTTTTT...",
-	"..TTTTTTTTTTTTTTTTTTTT..",
-	".TTTTTTTTTTTTTTTTTTTTTT.",
-	"TTTTTWWWTTTTTTTTWWWTTTTT",
-	"TTTTTWWWTTTTTTTTWWWTTTTT",
-	"TTPPTWWWTTTTTTTTWWWTTTTT",
-	"TTCCTWWWTTTTTTTTWWWTTTTT",
-	"TTCCTWWWTTTTTTTTWWWTTTTT",
-	"TTCCTWWWTTTTTTTTWWWTTTTT",
-	"TTCCTWWWTTTTTTTTWWWTTTTT",
-	"TTTTTWWWTTTTTTTTWWWTTTTT",
-	"TTTTTWWWWWWWWWWWWWWTTTTT",
-	"TTTTTWWWWWWWWWWWWWWTTTTT",
-	"TTTTTWWWTTTTTTTTWWWTTTTT",
-	"TTTTTWWWTTTTTTTTWWWTPPTT",
-	"TTTTTWWWTTTPPTTTWWWTCCTT",
-	"TTTTTWWWTTTCCTTTWWWTCCTT",
-	"TTTTTWWWTTTCCTTTWWWTCCTT",
-	"TTTTTWWWTTTCCTTTWWWTCCTT",
-	"TTTTTWWWTTTCCTTTWWWTTTTT",
-	"TTTTTWWWTTTTTTTTWWWTTTTT",
-	".TTTTTTTTTTTTTTTTTTTTTT.",
-	"..TTTTTTTTTTTTTTTTTTTT..",
-	"...TTTTTTTTTTTTTTTTTT..."
-];
-/** 16 by 16, for narrow places. */
-const LOGO_SMALL = [
-	"..TTTTTTTTTTTT..",
-	".TTTTTTTTTTTTTT.",
-	"TTTTWWTTTTWWTTTT",
-	"TTTTWWTTTTWWTTTT",
-	"TPPTWWTTTTWWTTTT",
-	"TCCTWWTTTTWWTTTT",
-	"TCCTWWTTTTWWTTTT",
-	"TTTTWWWWWWWWTTTT",
-	"TTTTWWWWWWWWTTTT",
-	"TTTTWWTTTTWWTPPT",
-	"TTTTWWTPPTWWTCCT",
-	"TTTTWWTCCTWWTCCT",
-	"TTTTWWTCCTWWTTTT",
-	"TTTTWWTTTTWWTTTT",
-	".TTTTTTTTTTTTTT.",
-	"..TTTTTTTTTTTT.."
-];
-/** 12 by 12, for the full-screen app's sidebar: posts and side boats a pixel wide, no bows. */
-const LOGO_MINI = [
-	"..TTTTTTTT..",
-	".TTTTTTTTTT.",
-	"TTTWTTTTWTTT",
-	"TCTWTTTTWTTT",
-	"TCTWTTTTWTTT",
-	"TCTWWWWWWTTT",
-	"TTTWWWWWWTTT",
-	"TTTWTTTTWTCT",
-	"TTTWTCCTWTCT",
-	"TTTWTCCTWTCT",
-	".TTTTTTTTTT.",
-	"..TTTTTTTT.."
-];
-/** The brand's fills, as in favicon.svg and src/styles.css. */
-const LOGO_COLOURS = {
-	T: "#0f6e64",
-	W: "#ffffff",
-	C: "#c44a2c"
-};
-/**
-* @typedef {{ text: string, fg?: string, bg?: string }} Run
-* One stretch of a terminal row in the same colours.
-*/
-/**
-* The logo as terminal rows, each a list of runs: the top pixel is the
-* half block's colour, the bottom one its background.
-* @param {string[]} pixels
-* @returns {Run[][]}
-*/
-function logoRows(pixels = LOGO) {
-	/** @type {Run[][]} */
-	const rows = [];
-	for (let y = 0; y < pixels.length; y += 2) {
-		/** @type {Run[]} */
-		const runs = [];
-		const top = pixels[y] ?? "";
-		const bottom = pixels[y + 1] ?? "";
-		for (let x = 0; x < top.length; x++) {
-			const t = LOGO_COLOURS[top[x]];
-			const b = LOGO_COLOURS[bottom[x]];
-			const bowRow = top[x] === "P" ? top : bottom[x] === "P" ? bottom : null;
-			const left = bowRow ? bowRow[x - 1] !== "P" : false;
-			/** @type {Run} */
-			const cell = top[x] === "P" ? {
-				text: left ? "▟" : "▙",
-				fg: LOGO_COLOURS.C,
-				bg: LOGO_COLOURS.T
-			} : bottom[x] === "P" ? {
-				text: left ? "▗" : "▖",
-				fg: LOGO_COLOURS.C,
-				bg: t
-			} : !t && !b ? { text: " " } : t === b || !b ? {
-				text: t === b ? "█" : "▀",
-				fg: t
-			} : !t ? {
-				text: "▄",
-				fg: b
-			} : {
-				text: "▀",
-				fg: t,
-				bg: b
-			};
-			const last = runs.at(-1);
-			if (last && last.fg === cell.fg && last.bg === cell.bg) last.text += cell.text;
-			else runs.push(cell);
-		}
-		rows.push(runs);
-	}
-	return rows;
-}
-
 //#endregion
 //#region src/tui/context.tsx
 /**
@@ -341,71 +210,6 @@ function useHarbor(selector) {
 	return useStore(useDeps().store, selector);
 }
 
-//#endregion
-//#region src/tui/theme.ts
-const theme = {
-	accent: "#3dbcab",
-	coral: "#e0714f",
-	muted: "gray",
-	selected: "#3dbcab"
-};
-const HEALTH_COLOR = {
-	"on-track": "green",
-	"at-risk": "yellow",
-	"off-track": "red",
-	paused: "gray",
-	done: "cyan"
-};
-const PRIORITY_COLOR = {
-	urgent: "red",
-	high: "#e0714f",
-	medium: void 0,
-	low: "gray"
-};
-
-//#endregion
-//#region src/tui/logo.tsx
-/** Harbor's mark in half blocks (cli/lib/logo.mjs holds the pixels). */
-function Logo({ pixels = LOGO }) {
-	return /* @__PURE__ */ jsx(Box, {
-		flexDirection: "column",
-		flexShrink: 0,
-		children: logoRows(pixels).map((runs, y) => /* @__PURE__ */ jsx(Text, { children: runs.map((r, i) => /* @__PURE__ */ jsx(Text, {
-			color: r.fg,
-			backgroundColor: r.bg,
-			children: r.text
-		}, i)) }, y))
-	});
-}
-/** What shows while the harbor loads: the mark, centred, and which harbor. */
-function Splash({ opening }) {
-	const { columns, rows } = useWindowSize();
-	const mark = rows >= 18 && columns >= 30;
-	const height = (mark ? LOGO.length / 2 + 1 : 0) + 2;
-	return /* @__PURE__ */ jsxs(Box, {
-		width: columns,
-		height: rows,
-		flexDirection: "column",
-		alignItems: "center",
-		paddingTop: Math.max(0, Math.floor((rows - height) / 2)),
-		children: [
-			mark ? /* @__PURE__ */ jsx(Box, {
-				marginBottom: 1,
-				children: /* @__PURE__ */ jsx(Logo, {})
-			}) : null,
-			/* @__PURE__ */ jsx(Text, {
-				bold: true,
-				color: theme.accent,
-				children: "Harbor"
-			}),
-			/* @__PURE__ */ jsx(Text, {
-				color: theme.muted,
-				children: opening ? `Opening ${opening}…` : "Opening your harbor…"
-			})
-		]
-	});
-}
-
 //#endregion
 //#region node_modules/date-fns/constants.js
 /**
@@ -2271,6 +2075,66 @@ function forecastLine(f) {
 	return `At this rate it ends at ${money(Math.round(f.eac))} (${money(gap)} ${side} budget)`;
 }
 
+//#endregion
+//#region src/tui/theme.ts
+/**
+* Dark: Harbor's teal and coral lifted so they read on black, and status in
+* softened hues rather than the terminal's own loud green and yellow (a
+* 16-colour terminal still gets its nearest plain colour). Light: the brand's own darker teal
+* and coral, and status in hues dark enough for text on white (4.5:1 or more).
+*/
+const PALETTES = {
+	dark: {
+		accent: "#3dbcab",
+		coral: "#e0714f",
+		muted: "gray",
+		selected: "#3dbcab",
+		border: "gray",
+		good: "#86c294",
+		warn: "#e3b55c",
+		bad: "#f2665d",
+		done: "#7fb6cc"
+	},
+	light: {
+		accent: "#0f6e64",
+		coral: "#b8432c",
+		muted: "#5f5e58",
+		selected: "#0f6e64",
+		border: "#a8a69e",
+		good: "#1f7a3a",
+		warn: "#8a5a0a",
+		bad: "#b8432c",
+		done: "#146c6b"
+	}
+};
+const theme = {
+	name: "dark",
+	...PALETTES.dark
+};
+const HEALTH_COLOR = {};
+const PRIORITY_COLOR = {};
+/** Switch every colour to one set. Call before the app draws. */
+function applyTheme(name) {
+	Object.assign(theme, {
+		name,
+		...PALETTES[name]
+	});
+	Object.assign(HEALTH_COLOR, {
+		"on-track": theme.good,
+		"at-risk": theme.warn,
+		"off-track": theme.bad,
+		paused: theme.muted,
+		done: theme.done
+	});
+	Object.assign(PRIORITY_COLOR, {
+		urgent: theme.bad,
+		high: theme.coral,
+		medium: void 0,
+		low: theme.muted
+	});
+}
+applyTheme("dark");
+
 //#endregion
 //#region src/tui/ui.tsx
 /**
@@ -2292,7 +2156,7 @@ function TextField({ label, initial = "", placeholder, hint, onSubmit, onCancel
 	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		borderStyle: "round",
-		borderColor: theme.accent,
+		borderColor: theme.border,
 		paddingX: 1,
 		children: [
 			/* @__PURE__ */ jsx(Text, {
@@ -2326,7 +2190,7 @@ function Picker({ title, choices, initial = 0, rows = 10, onPick, onCancel }) {
 	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		borderStyle: "round",
-		borderColor: theme.accent,
+		borderColor: theme.border,
 		paddingX: 1,
 		children: [
 			/* @__PURE__ */ jsx(Text, {
@@ -2395,7 +2259,6 @@ function Hints({ keys }) {
 		children: keys.map(([k, label], i) => /* @__PURE__ */ jsxs(Text, { children: [
 			i > 0 ? "  " : "",
 			/* @__PURE__ */ jsx(Text, {
-				color: theme.accent,
 				bold: true,
 				children: k
 			}),
@@ -2423,7 +2286,6 @@ function Heading({ children, right }) {
 		justifyContent: "space-between",
 		children: [/* @__PURE__ */ jsx(Text, {
 			bold: true,
-			color: theme.accent,
 			children
 		}), right ? /* @__PURE__ */ jsx(Text, {
 			color: theme.muted,
@@ -2518,7 +2380,7 @@ function DetailPanel({ title, subtitle, fields, width, height, keys = {}, hints,
 		width,
 		height,
 		borderStyle: "round",
-		borderColor: theme.accent,
+		borderColor: theme.border,
 		paddingX: 1,
 		children: [
 			/* @__PURE__ */ jsx(Text, {
@@ -2861,7 +2723,7 @@ function TaskLine({ task, projects, people, today, selected, width, showProject
 				"  ",
 				/* @__PURE__ */ jsx(PriorityMark, { priority: task.priority }),
 				task.dueDate ? /* @__PURE__ */ jsxs(Text, {
-					color: late ? "red" : theme.muted,
+					color: late ? theme.bad : theme.muted,
 					children: [
 						" ",
 						late ? "late · " : "",
@@ -2869,7 +2731,7 @@ function TaskLine({ task, projects, people, today, selected, width, showProject
 					]
 				}) : null,
 				blocked ? /* @__PURE__ */ jsx(Text, {
-					color: "yellow",
+					color: theme.warn,
 					children: " waits"
 				}) : null,
 				who ? /* @__PURE__ */ jsxs(Text, {
@@ -3023,7 +2885,7 @@ function HistoryView({ active, width, height, go }) {
 				children: "Loading…"
 			}) : null,
 			state === "failed" ? /* @__PURE__ */ jsx(Text, {
-				color: "red",
+				color: theme.bad,
 				children: "Couldn’t load History. It tries again after the next save."
 			}) : null,
 			state === "ready" && rows.length === 0 ? /* @__PURE__ */ jsx(Text, {
@@ -3601,17 +3463,19 @@ function PeopleView({ active, width, height, go }) {
 	const { today } = useDeps();
 	const rows = useMemo(() => {
 		const now = /* @__PURE__ */ new Date(`${today()}T12:00:00`);
+		const nameWidth = Math.max(0, ...people.map((p) => p.name.length));
 		return people.map((p) => {
 			const open = tasks.filter((t) => t.assigneeId === p.id && t.status !== "done");
 			const load = weeklyLoad(tasks, p.id, now, 4);
 			const cap = p.weeklyCapacity ?? 5;
-			const weeks = load.weeks.map((w) => w.due > cap ? `${w.due}!` : String(w.due)).join(" ");
+			const weeks = load.weeks.map((w) => (w.due === 0 ? "·" : w.due > cap ? `${w.due}!` : String(w.due)).padStart(3)).join("");
+			const late = load.overdue ? `${load.overdue} late` : "";
 			return {
 				id: p.id,
 				kind: "person",
 				depth: 0,
-				title: p.name,
-				detail: `${p.role} · ${open.length} open${load.overdue ? ` · ${load.overdue} late` : ""} · next 4 weeks ${weeks} of ${cap}`
+				title: p.name.padEnd(nameWidth),
+				detail: `${String(open.length).padStart(3)} open  ${late.padEnd(7)}  weeks${weeks}  of ${cap}  · ${p.role}`
 			};
 		});
 	}, [
@@ -3631,6 +3495,165 @@ function PeopleView({ active, width, height, go }) {
 	});
 }
 
+//#endregion
+//#region cli/lib/logo.mjs
+/**
+* Harbor's mark for the terminal: the favicon (public/favicon.svg) as
+* pixels, a teal tile with the white H and three coral boats. Each
+* terminal row draws two pixel rows with half blocks (▀ ▄ █), so a square
+* grid comes out square. `harbor help` prints it; the full-screen app draws
+* it on its splash and its keys overlay (src/tui/logo.tsx).
+*
+* T teal, W white, C coral, P a boat's pointed bow (coral in the middle of
+* the two pixels, drawn with quarter blocks), . nothing (the rounded corners).
+*/
+/** 24 by 24: posts three wide, a pixel of water between each boat and the posts. */
+const LOGO = [
+	"...TTTTTTTTTTTTTTTTTT...",
+	"..TTTTTTTTTTTTTTTTTTTT..",
+	".TTTTTTTTTTTTTTTTTTTTTT.",
+	"TTTTTWWWTTTTTTTTWWWTTTTT",
+	"TTTTTWWWTTTTTTTTWWWTTTTT",
+	"TTPPTWWWTTTTTTTTWWWTTTTT",
+	"TTCCTWWWTTTTTTTTWWWTTTTT",
+	"TTCCTWWWTTTTTTTTWWWTTTTT",
+	"TTCCTWWWTTTTTTTTWWWTTTTT",
+	"TTCCTWWWTTTTTTTTWWWTTTTT",
+	"TTTTTWWWTTTTTTTTWWWTTTTT",
+	"TTTTTWWWWWWWWWWWWWWTTTTT",
+	"TTTTTWWWWWWWWWWWWWWTTTTT",
+	"TTTTTWWWTTTTTTTTWWWTTTTT",
+	"TTTTTWWWTTTTTTTTWWWTPPTT",
+	"TTTTTWWWTTTPPTTTWWWTCCTT",
+	"TTTTTWWWTTTCCTTTWWWTCCTT",
+	"TTTTTWWWTTTCCTTTWWWTCCTT",
+	"TTTTTWWWTTTCCTTTWWWTCCTT",
+	"TTTTTWWWTTTCCTTTWWWTTTTT",
+	"TTTTTWWWTTTTTTTTWWWTTTTT",
+	".TTTTTTTTTTTTTTTTTTTTTT.",
+	"..TTTTTTTTTTTTTTTTTTTT..",
+	"...TTTTTTTTTTTTTTTTTT..."
+];
+/** 16 by 16, for the keys overlay. */
+const LOGO_SMALL = [
+	"..TTTTTTTTTTTT..",
+	".TTTTTTTTTTTTTT.",
+	"TTTTWWTTTTWWTTTT",
+	"TTTTWWTTTTWWTTTT",
+	"TPPTWWTTTTWWTTTT",
+	"TCCTWWTTTTWWTTTT",
+	"TCCTWWTTTTWWTTTT",
+	"TTTTWWWWWWWWTTTT",
+	"TTTTWWWWWWWWTTTT",
+	"TTTTWWTTTTWWTPPT",
+	"TTTTWWTPPTWWTCCT",
+	"TTTTWWTCCTWWTCCT",
+	"TTTTWWTCCTWWTTTT",
+	"TTTTWWTTTTWWTTTT",
+	".TTTTTTTTTTTTTT.",
+	"..TTTTTTTTTTTT.."
+];
+/** The brand's fills, as in favicon.svg and src/styles.css. */
+const LOGO_COLOURS = {
+	T: "#0f6e64",
+	W: "#ffffff",
+	C: "#c44a2c"
+};
+/**
+* @typedef {{ text: string, fg?: string, bg?: string }} Run
+* One stretch of a terminal row in the same colours.
+*/
+/**
+* The logo as terminal rows, each a list of runs: the top pixel is the
+* half block's colour, the bottom one its background.
+* @param {string[]} pixels
+* @returns {Run[][]}
+*/
+function logoRows(pixels = LOGO) {
+	/** @type {Run[][]} */
+	const rows = [];
+	for (let y = 0; y < pixels.length; y += 2) {
+		/** @type {Run[]} */
+		const runs = [];
+		const top = pixels[y] ?? "";
+		const bottom = pixels[y + 1] ?? "";
+		for (let x = 0; x < top.length; x++) {
+			const t = LOGO_COLOURS[top[x]];
+			const b = LOGO_COLOURS[bottom[x]];
+			const bowRow = top[x] === "P" ? top : bottom[x] === "P" ? bottom : null;
+			const left = bowRow ? bowRow[x - 1] !== "P" : false;
+			/** @type {Run} */
+			const cell = top[x] === "P" ? {
+				text: left ? "▟" : "▙",
+				fg: LOGO_COLOURS.C,
+				bg: LOGO_COLOURS.T
+			} : bottom[x] === "P" ? {
+				text: left ? "▗" : "▖",
+				fg: LOGO_COLOURS.C,
+				bg: t
+			} : !t && !b ? { text: " " } : t === b || !b ? {
+				text: t === b ? "█" : "▀",
+				fg: t
+			} : !t ? {
+				text: "▄",
+				fg: b
+			} : {
+				text: "▀",
+				fg: t,
+				bg: b
+			};
+			const last = runs.at(-1);
+			if (last && last.fg === cell.fg && last.bg === cell.bg) last.text += cell.text;
+			else runs.push(cell);
+		}
+		rows.push(runs);
+	}
+	return rows;
+}
+
+//#endregion
+//#region src/tui/logo.tsx
+/** Harbor's mark in half blocks (cli/lib/logo.mjs holds the pixels). */
+function Logo({ pixels = LOGO }) {
+	return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		flexShrink: 0,
+		children: logoRows(pixels).map((runs, y) => /* @__PURE__ */ jsx(Text, { children: runs.map((r, i) => /* @__PURE__ */ jsx(Text, {
+			color: r.fg,
+			backgroundColor: r.bg,
+			children: r.text
+		}, i)) }, y))
+	});
+}
+/** What shows while the harbor loads: the mark, centred, and which harbor. */
+function Splash({ opening }) {
+	const { columns, rows } = useWindowSize();
+	const mark = rows >= 18 && columns >= 30;
+	const height = (mark ? LOGO.length / 2 + 1 : 0) + 2;
+	return /* @__PURE__ */ jsxs(Box, {
+		width: columns,
+		height: rows,
+		flexDirection: "column",
+		alignItems: "center",
+		paddingTop: Math.max(0, Math.floor((rows - height) / 2)),
+		children: [
+			mark ? /* @__PURE__ */ jsx(Box, {
+				marginBottom: 1,
+				children: /* @__PURE__ */ jsx(Logo, {})
+			}) : null,
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: theme.accent,
+				children: "Harbor"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: theme.muted,
+				children: opening ? `Opening ${opening}…` : "Opening your harbor…"
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/tui/moves.ts
 /**
@@ -3696,7 +3719,7 @@ function SearchBox({ width, onOpen, onClose }) {
 		flexDirection: "column",
 		width,
 		borderStyle: "round",
-		borderColor: theme.accent,
+		borderColor: theme.border,
 		paddingX: 1,
 		children: [
 			/* @__PURE__ */ jsxs(Text, { children: [
@@ -3833,6 +3856,12 @@ const HELP = [
 	["r", "retry saving now"],
 	["q", "quit (saves first)"]
 ];
+/**
+* The mark sits beside the keys only when both fit: the longest line, a gap,
+* the 16-pixel mark, and the box's border and padding. Narrower, the lines
+* would wrap and split the mark.
+*/
+const HELP_WITH_MARK = 11 + Math.max(...HELP.map(([, what]) => what.length)) + 2 + LOGO_SMALL[0].length + 4;
 function Help({ width, onClose }) {
 	useInput((input, key) => {
 		if (key.escape || key.return || input === "?" || input === "q") onClose();
@@ -3840,7 +3869,7 @@ function Help({ width, onClose }) {
 	return /* @__PURE__ */ jsxs(Box, {
 		width,
 		borderStyle: "round",
-		borderColor: theme.accent,
+		borderColor: theme.border,
 		paddingX: 1,
 		children: [/* @__PURE__ */ jsxs(Box, {
 			flexDirection: "column",
@@ -3860,7 +3889,7 @@ function Help({ width, onClose }) {
 					children: "Everything saves as you go, and shows on the website for everyone."
 				})
 			]
-		}), width >= 90 ? /* @__PURE__ */ jsxs(Box, {
+		}), width >= HELP_WITH_MARK ? /* @__PURE__ */ jsxs(Box, {
 			flexDirection: "column",
 			alignItems: "center",
 			marginLeft: 2,
@@ -3942,7 +3971,7 @@ function Palette({ width, base, open, onClose }) {
 		flexDirection: "column",
 		width,
 		borderStyle: "round",
-		borderColor: theme.accent,
+		borderColor: theme.border,
 		paddingX: 1,
 		children: [
 			/* @__PURE__ */ jsxs(Text, { children: [
@@ -4332,7 +4361,7 @@ function MilestonePanel({ id, width, height, go, onClose }) {
 		{
 			label: "Due",
 			value: `${shortDay(milestone.dueDate, today())}${late ? " (late)" : ""}`,
-			color: late ? "red" : void 0,
+			color: late ? theme.bad : void 0,
 			edit: {
 				kind: "date",
 				initial: milestone.dueDate,
@@ -4795,7 +4824,7 @@ function ProgramView({ programId, active, width, height, go, onBack }) {
 								}) : m.name,
 								" ",
 								/* @__PURE__ */ jsxs(Text, {
-									color: late ? "red" : theme.muted,
+									color: late ? theme.bad : theme.muted,
 									children: [late ? "late · " : "", shortDay(m.dueDate, today())]
 								}),
 								m.approverId ? /* @__PURE__ */ jsx(Text, {
@@ -5064,7 +5093,7 @@ function ProjectView({ projectId, active, width, height, go, onBack }) {
 						flexDirection: "column",
 						width: w,
 						borderStyle: "round",
-						borderColor: on ? theme.accent : "gray",
+						borderColor: on ? theme.accent : theme.border,
 						paddingX: 1,
 						children: [
 							/* @__PURE__ */ jsxs(Text, {
@@ -5075,7 +5104,7 @@ function ProjectView({ projectId, active, width, height, go, onBack }) {
 									c.label.toUpperCase(),
 									" ",
 									/* @__PURE__ */ jsxs(Text, {
-										color: over ? "red" : theme.muted,
+										color: over ? theme.bad : theme.muted,
 										children: [c.tasks.length, c.limit != null ? `/${c.limit}` : ""]
 									})
 								]
@@ -5140,7 +5169,7 @@ function ProjectView({ projectId, active, width, height, go, onBack }) {
 		]
 	});
 }
-/** One card on the board: its key, owner and due date, then the title on up to two lines. */
+/** One card on the board: its key, due date and owner, then the title on up to two lines. */
 function Card({ taskKey, title, owner, due, late, waits, priority, selected }) {
 	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
@@ -5156,17 +5185,17 @@ function Card({ taskKey, title, owner, due, late, waits, priority, selected }) {
 				}),
 				" ",
 				/* @__PURE__ */ jsx(PriorityMark, { priority }),
-				owner ? /* @__PURE__ */ jsxs(Text, {
-					color: selected ? void 0 : theme.muted,
-					children: [" ", owner]
-				}) : null,
 				due ? /* @__PURE__ */ jsxs(Text, {
-					color: late ? "red" : selected ? void 0 : theme.muted,
+					color: late ? theme.bad : selected ? void 0 : theme.muted,
 					children: [" ", due]
 				}) : null,
 				waits ? /* @__PURE__ */ jsx(Text, {
-					color: "yellow",
+					color: theme.warn,
 					children: " waits"
+				}) : null,
+				owner ? /* @__PURE__ */ jsxs(Text, {
+					color: selected ? void 0 : theme.muted,
+					children: [" ", owner]
 				}) : null
 			]
 		}), /* @__PURE__ */ jsx(Box, {
@@ -5183,7 +5212,7 @@ function Card({ taskKey, title, owner, due, late, waits, priority, selected }) {
 /** A project's money: budget, spent, what's left and the forecast, then the ledger. */
 function BudgetPane({ project, spendEntries, at, active, height, today }) {
 	const b = budgetOf({ spendEntries }, project, /* @__PURE__ */ new Date(`${today}T12:00:00`));
-	const tone = b.forecast?.tone === "over" ? "red" : b.forecast?.tone === "tight" ? "yellow" : "green";
+	const tone = b.forecast?.tone === "over" ? theme.bad : b.forecast?.tone === "tight" ? theme.warn : theme.good;
 	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		height,
@@ -5211,7 +5240,7 @@ function BudgetPane({ project, spendEntries, at, active, height, today }) {
 				" ",
 				/* @__PURE__ */ jsxs(Text, {
 					bold: true,
-					color: b.left < 0 ? "red" : void 0,
+					color: b.left < 0 ? theme.bad : void 0,
 					children: [money(Math.abs(b.left)), b.left < 0 ? " over" : ""]
 				})
 			] }),
@@ -5438,7 +5467,7 @@ function TaskPanel({ taskId, width, height, go, onClose }) {
 		status: STATUS_LABEL[task.status],
 		assignee: owner?.name ?? "Nobody yet",
 		due: task.dueDate ? `${shortDay(task.dueDate, day)}${isLate(task, day) ? " (late)" : ""}` : "None",
-		priority: task.priority,
+		priority: PRIORITY_LABEL[task.priority],
 		project: project ? `${project.name}${project.key ? ` (${project.key})` : ""}` : "",
 		notes: task.description.replace(/\s+/g, " ").trim() || "None"
 	};
@@ -5499,7 +5528,7 @@ function TaskPanel({ taskId, width, height, go, onClose }) {
 		} else if (f === "priority") editor = /* @__PURE__ */ jsx(Picker, {
 			title: "Priority",
 			choices: PRIORITIES.map((p) => ({
-				label: p,
+				label: PRIORITY_LABEL[p],
 				value: p
 			})),
 			initial: PRIORITIES.indexOf(task.priority),
@@ -5551,7 +5580,7 @@ function TaskPanel({ taskId, width, height, go, onClose }) {
 		width,
 		height,
 		borderStyle: "round",
-		borderColor: theme.accent,
+		borderColor: theme.border,
 		paddingX: 1,
 		children: [
 			/* @__PURE__ */ jsxs(Text, {
@@ -5568,7 +5597,7 @@ function TaskPanel({ taskId, width, height, go, onClose }) {
 						children: task.title
 					}),
 					viewOnly ? /* @__PURE__ */ jsx(Text, {
-						color: "yellow",
+						color: theme.warn,
 						children: " view only"
 					}) : null
 				]
@@ -5588,7 +5617,7 @@ function TaskPanel({ taskId, width, height, go, onClose }) {
 				]
 			}, f.field)),
 			waits.length > 0 ? /* @__PURE__ */ jsxs(Text, {
-				color: "yellow",
+				color: theme.warn,
 				wrap: "truncate-end",
 				children: [
 					"  ",
@@ -5602,7 +5631,7 @@ function TaskPanel({ taskId, width, height, go, onClose }) {
 				children: [
 					"  ",
 					"Checklist",
-					task.checklist.length ? ` ${task.checklist.filter((c) => c.done).length}/${task.checklist.length}` : ""
+					task.checklist.length ? ` ${task.checklist.filter((c) => c.done).length}/${task.checklist.length}` : " · none yet, a adds a step"
 				]
 			}),
 			task.checklist.map((item, i) => {
@@ -5772,7 +5801,7 @@ function TodayView({ active, width, height, go }) {
 					children: [
 						"  ",
 						/* @__PURE__ */ jsx(Text, {
-							color: r.kind === "risk" ? "yellow" : r.kind === "issue" ? "red" : theme.muted,
+							color: r.kind === "risk" ? theme.warn : r.kind === "issue" ? theme.bad : theme.muted,
 							children: r.kind
 						}),
 						" ",
@@ -5826,14 +5855,15 @@ const NAV = [
 		label: "History"
 	}
 ];
-/** The sidebar's lines: the screens, a gap, then Harbors and Anything. */
-const NAV_LINES = NAV.length + 3;
+/** The sidebar's width: its longest line ("8 History", ": Anything") with room either side. */
+const NAV_WIDTH = 15;
+/** What the corner says about saving, and in which of the theme's colours. */
 const SAVE_LABEL = {
-	saved: ["● saved", "green"],
-	pending: ["● saving soon", "yellow"],
-	saving: ["● saving…", "yellow"],
-	retrying: ["● not saved, retrying", "red"],
-	offline: ["● offline, will save", "red"]
+	saved: ["● saved", "good"],
+	pending: ["● saving soon", "warn"],
+	saving: ["● saving…", "warn"],
+	retrying: ["● not saved, retrying", "bad"],
+	offline: ["● offline, will save", "bad"]
 };
 function App({ ui }) {
 	const { store, sync, account, harbors, today } = useDeps();
@@ -6021,11 +6051,10 @@ function App({ ui }) {
 		if (input === "u" && !store.undoLast()) notify("Nothing to undo.");
 	}, { isActive: !covered && panel !== null });
 	const bodyHeight = Math.max(8, rows - 1 - 2);
-	const mark = columns >= 110 && bodyHeight >= NAV_LINES + 1 + LOGO_SMALL.length / 2 ? LOGO_SMALL : bodyHeight >= NAV_LINES + 1 + LOGO_MINI.length / 2 ? LOGO_MINI : null;
-	const navWidth = (mark?.[0]?.length ?? LOGO_MINI.length) + 3;
-	const mainWidth = Math.max(30, columns - navWidth - 1);
+	const mainWidth = Math.max(30, columns - NAV_WIDTH - 1);
 	const mainActive = focus === "main" && !covered && panel === null;
-	const [saveText, saveColor] = SAVE_LABEL[save];
+	const [saveText, saveTone] = SAVE_LABEL[save];
+	const saveColor = theme[saveTone];
 	const viewProps = {
 		active: mainActive,
 		width: mainWidth,
@@ -6256,7 +6285,7 @@ function App({ ui }) {
 							children: harborName ?? "…"
 						}),
 						viewOnly ? /* @__PURE__ */ jsx(Text, {
-							color: "yellow",
+							color: theme.warn,
 							children: " · view only"
 						}) : null
 					]
@@ -6272,13 +6301,13 @@ function App({ ui }) {
 				height: bodyHeight,
 				children: [/* @__PURE__ */ jsxs(Box, {
 					flexDirection: "column",
-					width: navWidth,
+					width: NAV_WIDTH,
 					paddingX: 1,
 					borderStyle: "single",
 					borderTop: false,
 					borderBottom: false,
 					borderLeft: false,
-					borderColor: focus === "nav" ? theme.accent : "gray",
+					borderColor: focus === "nav" ? theme.accent : theme.border,
 					children: [
 						NAV.map((x, i) => {
 							const on = x.screen === screen && stack.length === 0;
@@ -6300,8 +6329,7 @@ function App({ ui }) {
 						/* @__PURE__ */ jsx(Text, {
 							color: theme.muted,
 							children: ": Anything"
-						}),
-						mark ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Box, { flexGrow: 1 }), /* @__PURE__ */ jsx(Logo, { pixels: mark })] }) : null
+						})
 					]
 				}), /* @__PURE__ */ jsxs(Box, {
 					flexDirection: "column",
@@ -7036,12 +7064,24 @@ function sessionSlice({ set, get, write }) {
 			keepInterval: k.interval,
 			stripeReady: k.stripe
 		}),
-		ensureAccountPerson: ({ accountId, name }) => {
+		ensureAccountPerson: ({ accountId, name, personId }) => {
 			const hit = get().people.find((p) => p.accountId === accountId);
 			if (hit) {
 				if (get().currentUserId !== hit.id) set({ currentUserId: hit.id });
 				return hit.id;
 			}
+			const named = personId ? get().people.find((p) => p.id === personId && !p.accountId) : null;
+			if (named) {
+				set({
+					people: get().people.map((p) => p.id === named.id ? {
+						...p,
+						accountId
+					} : p),
+					currentUserId: named.id
+				});
+				get().log("came aboard", "/people");
+				return named.id;
+			}
 			const used = new Set(get().people.map((p) => p.swatch));
 			const swatch = SWATCHES.find((s) => !used.has(s)) ?? "pine";
 			const id = uid("p");
@@ -7402,7 +7442,8 @@ function hierarchySlice({ get, write }) {
 			write({
 				programs: add(state.programs, rows.programs),
 				projects: add(state.projects, rows.projects),
-				tasks: add(state.tasks, rows.tasks)
+				tasks: add(state.tasks, rows.tasks),
+				people: add(state.people, rows.people)
 			});
 			const n = rows.tasks?.length ?? 0;
 			get().log(`imported ${n} task${n === 1 ? "" : "s"} from a spreadsheet`);
@@ -7412,12 +7453,18 @@ function hierarchySlice({ get, write }) {
 			const gone = {
 				programs: new Set(ids.programs ?? []),
 				projects: new Set(ids.projects ?? []),
-				tasks: new Set(ids.tasks ?? [])
+				tasks: new Set(ids.tasks ?? []),
+				people: new Set(ids.people ?? [])
 			};
+			const tasks = state.tasks.filter((r) => !gone.tasks.has(r.id));
+			if (gone.people.size) {
+				for (const t of tasks) if (t.assigneeId) gone.people.delete(t.assigneeId);
+			}
 			write({
 				programs: state.programs.filter((r) => !gone.programs.has(r.id)),
 				projects: state.projects.filter((r) => !gone.projects.has(r.id)),
-				tasks: state.tasks.filter((r) => !gone.tasks.has(r.id)),
+				tasks,
+				people: gone.people.size ? state.people.filter((r) => !gone.people.has(r.id)) : state.people,
 				selectedTaskId: gone.tasks.has(state.selectedTaskId ?? "") ? null : state.selectedTaskId
 			});
 		},
@@ -8899,6 +8946,53 @@ function createSync(opts) {
 	};
 }
 
+//#endregion
+//#region src/tui/theme-detect.ts
+const isThemeSetting = (v) => v === "auto" || v === "light" || v === "dark";
+/** COLORFGBG is "fg;bg" (sometimes "fg;x;bg"): background 7 or 15 is a light terminal. */
+function themeFromColorFgBg(value) {
+	const bg = value?.split(";").at(-1);
+	if (!bg || !/^\d+$/.test(bg)) return null;
+	return bg === "7" || bg === "15" ? "light" : "dark";
+}
+/** A terminal's answer to OSC 11, like "\x1b]11;rgb:ffff/ffff/ffff\x07": light when its luminance is over half. */
+function themeFromReply(reply) {
+	const m = /rgba?:([0-9a-f]+)\/([0-9a-f]+)\/([0-9a-f]+)/i.exec(reply);
+	if (!m) return null;
+	const [r, g, b] = m.slice(1, 4).map((hex) => parseInt(hex, 16) / (16 ** hex.length - 1));
+	return .2126 * r + .7152 * g + .0722 * b > .5 ? "light" : "dark";
+}
+/** Ask the terminal for its background colour; null when it doesn't say in time. */
+function askBackground(stdin, stdout, ms = 300) {
+	if (!stdin.isTTY || !stdout.isTTY || typeof stdin.setRawMode !== "function") return Promise.resolve(null);
+	return new Promise((resolve) => {
+		let reply = "";
+		const done = (theme) => {
+			clearTimeout(timer);
+			stdin.off("data", onData);
+			stdin.setRawMode(false);
+			stdin.pause();
+			resolve(theme);
+		};
+		const onData = (chunk) => {
+			reply += chunk.toString();
+			if (/\x07|\x1b\\/.test(reply)) done(themeFromReply(reply));
+		};
+		const timer = setTimeout(() => done(null), ms);
+		stdin.setRawMode(true);
+		stdin.resume();
+		stdin.on("data", onData);
+		stdout.write("\x1B]11;?\x1B\\");
+	});
+}
+/** The set to draw with, from the saved setting, the environment, then the terminal itself. */
+async function pickTheme(setting, env = process.env, ask = () => askBackground(process.stdin, process.stdout)) {
+	const fromEnv = env.HARBOR_THEME?.toLowerCase();
+	const chosen = isThemeSetting(fromEnv) ? fromEnv : setting;
+	if (chosen === "light" || chosen === "dark") return chosen;
+	return themeFromColorFgBg(env.COLORFGBG) ?? await ask() ?? "dark";
+}
+
 //#endregion
 //#region src/tui/ui-state.ts
 /** What the shell shows beside the harbor: the save state and the latest notice. */
@@ -8924,6 +9018,7 @@ const SPLASH_MS = 1200;
 * most, the store and the sync loop, drawn with Ink.
 */
 async function startApp(deps, options = {}) {
+	applyTheme(deps.theme ?? "dark");
 	const transport = plainTransport(deps.transport);
 	const account = plainDeep(deps.account);
 	const harbors = plainDeep(deps.harbors);
@@ -8970,6 +9065,7 @@ async function startApp(deps, options = {}) {
 }
 /** `harbor`: sign-in already done, take over the terminal until q. */
 async function runApp(opts) {
+	const theme = await pickTheme(opts.theme);
 	const transport = httpTransport(opts.source, opts.fetcher);
 	const { account, harbors } = await transport.harbors();
 	if (harbors.length === 0) throw new Error("You don't belong to a harbor yet. Make one at harborppm.com first.");
@@ -8981,7 +9077,8 @@ async function runApp(opts) {
 		account,
 		harbors,
 		workspaceId: pick?.id,
-		splashMs: SPLASH_MS
+		splashMs: SPLASH_MS,
+		theme
 	}, { alternateScreen: true });
 	await instance.waitUntilExit();
 }

package/lib/cli.mjs

@@ -8,7 +8,14 @@ import { readFileSync } from "node:fs";
 import { parseArgs } from "./args.mjs";
 import { hasFullAccess, loadApp, tokenSource } from "./app.mjs";
 import { login } from "./auth.mjs";
-import { DEFAULT_SERVER, forgetCredentials, readCredentials, writeCredentials } from "./config.mjs";
+import {
+  DEFAULT_SERVER,
+  forgetCredentials,
+  readCredentials,
+  readSettings,
+  writeCredentials,
+  writeSettings,
+} from "./config.mjs";
 import { harbors, myWork, taskLine, taskList, todayLocal } from "./format.mjs";
 import { colourDepth, logoLines } from "./logo.mjs";
 import { HarborError, createClient } from "./mcp.mjs";
@@ -20,6 +27,7 @@ export const HELP = `harbor: Harbor from the terminal
   harbor login [--server URL] [--read-only]   sign in (opens your browser once)
   harbor logout                               forget the sign-in on this machine
   harbor harbors                              the harbors you belong to
+  harbor theme [auto|light|dark]              the app's colours (auto asks the terminal)
   harbor --version                            which version this is
 
   harbor mine                                 what's on you, late first
@@ -55,6 +63,8 @@ function banner(io, env, words) {
   return `\n${logoLines(depth, words({ bold, dim })).join("\n")}\n`;
 }
 
+const THEMES = ["auto", "light", "dark"];
+
 const COMMON = { flags: ["json", "help"], options: ["harbor"] };
 const spec = (flags = [], options = []) => ({
   flags: [...COMMON.flags, ...flags],
@@ -184,6 +194,7 @@ export async function run(argv, io = {}) {
       source: tokenSource({ creds, save: (c) => writeCredentials(c, env), fetcher }),
       fetcher,
       harbor: values.harbor,
+      theme: (await readSettings(env)).theme,
     });
     return 0;
   }
@@ -216,6 +227,26 @@ export async function run(argv, io = {}) {
     return 0;
   }
 
+  if (command === "theme") {
+    const { positionals } = parseArgs(rest, { flags: [], options: [] });
+    const settings = await readSettings(env);
+    const [choice] = positionals;
+    if (!choice) {
+      out(`The app's colours: ${settings.theme ?? "auto"}.`);
+      return 0;
+    }
+    if (!THEMES.includes(choice)) {
+      throw new HarborError(`Pick auto, light or dark (not "${choice}").`);
+    }
+    await writeSettings({ ...settings, theme: choice }, env);
+    out(
+      choice === "auto"
+        ? "The app will ask the terminal for its background and match it."
+        : `The app will use its ${choice} colours.`,
+    );
+    return 0;
+  }
+
   if (command === "logout") {
     await forgetCredentials(env);
     out(

package/lib/config.mjs

@@ -38,3 +38,19 @@ export async function writeCredentials(creds, env = process.env) {
 export async function forgetCredentials(env = process.env) {
   await rm(file(env), { force: true });
 }
+
+const settingsFile = (env) => join(configDir(env), "settings.json");
+
+/** Choices that aren't a sign-in (the app's colours), or {} when none are saved. */
+export async function readSettings(env = process.env) {
+  try {
+    return JSON.parse(await readFile(settingsFile(env), "utf8"));
+  } catch {
+    return {};
+  }
+}
+
+export async function writeSettings(settings, env = process.env) {
+  await mkdir(configDir(env), { recursive: true, mode: 0o700 });
+  await writeFile(settingsFile(env), JSON.stringify(settings, null, 2));
+}

package/lib/logo.mjs

@@ -37,7 +37,7 @@ export const LOGO = [
   "...TTTTTTTTTTTTTTTTTT...",
 ];
 
-/** 16 by 16, for narrow places. */
+/** 16 by 16, for the keys overlay. */
 export const LOGO_SMALL = [
   "..TTTTTTTTTTTT..",
   ".TTTTTTTTTTTTTT.",
@@ -57,22 +57,6 @@ export const LOGO_SMALL = [
   "..TTTTTTTTTTTT..",
 ];
 
-/** 12 by 12, for the full-screen app's sidebar: posts and side boats a pixel wide, no bows. */
-export const LOGO_MINI = [
-  "..TTTTTTTT..",
-  ".TTTTTTTTTT.",
-  "TTTWTTTTWTTT",
-  "TCTWTTTTWTTT",
-  "TCTWTTTTWTTT",
-  "TCTWWWWWWTTT",
-  "TTTWWWWWWTTT",
-  "TTTWTTTTWTCT",
-  "TTTWTCCTWTCT",
-  "TTTWTCCTWTCT",
-  ".TTTTTTTTTT.",
-  "..TTTTTTTT..",
-];
-
 /** The brand's fills, as in favicon.svg and src/styles.css. */
 export const LOGO_COLOURS = { T: "#0f6e64", W: "#ffffff", C: "#c44a2c" };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harborppm/cli",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Harbor from the terminal: a full-screen app with everything, plus commands for scripts and agents.",
   "type": "module",
   "bin": {