@harborppm/cli 0.12.0 → 0.13.0

package/README.md

@@ -29,7 +29,7 @@ harbor             # name your harbor and its first project, and you're in
 1. **Today**: today's focus (`f` adds or takes off the task you're on, up to three) and your check-in (`c`); 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.
 3. **Projects**: every portfolio, program and project with its health. A project opens on its board (columns side by side; `f` and `p` show only someone's cards or one priority), its list, or its budget and spend ledger (`v`); `e` changes its details: lead, dates, budget, health by hand with a note.
-4. **Programs**: a program's projects and milestones side by side (`m` adds a milestone, space ticks one), its next move and health.
+4. **Programs**: a program's projects and milestones side by side (`m` adds a milestone, space ticks one), its next move and health; `v` reads it project by project, each with its bar across the months, open tasks by status and worst risks. A portfolio opens as a board (programs, with risks, next milestones and money beside them); `v` reads it program by program.
 5. **Risks**: the register, worst first. Enter changes one (status, owner, likelihood, impact, mitigation); `n` logs a risk, issue or decision.
 6. **People**: open and late work and the next four weeks against each person's capacity; Enter changes their capacity, role, or the time they're promised to a program.
 7. **Roadmap**: a portfolio's programs and projects across the months, in their health's colour, ◆ for milestones.

package/dist/app.mjs

@@ -1485,6 +1485,97 @@ function forecastAtCompletion(item, now) {
 	};
 }
 
+//#endregion
+//#region src/lib/flow.ts
+function tasksInProgramOf(data, programId) {
+	const ids = new Set(data.projects.filter((p) => p.programId === programId).map((p) => p.id));
+	return data.tasks.filter((t) => ids.has(t.projectId));
+}
+function constraintOf(data, programId) {
+	const rows = data.constraints ?? [];
+	return rows.find((c) => c.programId === programId && c.status === "active") ?? rows.find((c) => c.programId === programId);
+}
+function activeConstraints(data) {
+	return (data.constraints ?? []).filter((c) => c.status === "active");
+}
+function constraintsOwnedBy(data, personId) {
+	return activeConstraints(data).filter((c) => c.ownerId === personId);
+}
+function constraintIdle(data, constraint) {
+	if (constraint.status !== "active" || !constraint.ownerId) return false;
+	const tasks = tasksInProgramOf(data, constraint.programId);
+	if (!tasks.some((t) => t.status !== "done")) return false;
+	if (tasks.some((t) => t.assigneeId === constraint.ownerId && t.status === "doing")) return false;
+	const here = new Set(tasks.map((t) => t.id));
+	return data.tasks.some((t) => t.assigneeId === constraint.ownerId && t.status === "doing" && !here.has(t.id));
+}
+
+//#endregion
+//#region src/lib/spend.ts
+function spendEntriesOf(data, projectId) {
+	return (data.spendEntries ?? []).filter((e) => e.projectId === projectId).sort((a, b) => a.date.localeCompare(b.date));
+}
+function spentFromEntries(entries) {
+	return entries.reduce((sum, e) => sum + e.amount, 0);
+}
+/** The entry that makes the ledger agree with a total typed by hand. */
+function adjustmentEntry(projectId, oldSpent, newSpent, date, id) {
+	const delta = Math.round((newSpent - oldSpent) * 100) / 100;
+	if (delta === 0) return null;
+	return {
+		id,
+		projectId,
+		amount: delta,
+		date,
+		note: "Adjusted the total by hand"
+	};
+}
+
+//#endregion
+//#region src/lib/selectors.ts
+function programsIn(data, portfolioId) {
+	return data.programs.filter((p) => p.portfolioId === portfolioId);
+}
+function projectsInProgram(data, programId) {
+	return data.projects.filter((p) => p.programId === programId);
+}
+/** Projects (or programs) still running, and the ones set to Done, which lists tuck away until asked for. */
+function splitDone(items) {
+	const open = [];
+	const done = [];
+	for (const item of items) (item.health === "done" ? done : open).push(item);
+	return {
+		open,
+		done
+	};
+}
+function projectsInPortfolio(data, portfolioId) {
+	const ids = new Set(programsIn(data, portfolioId).map((p) => p.id));
+	return data.projects.filter((p) => ids.has(p.programId));
+}
+function sum(values) {
+	return values.reduce((a, b) => a + b, 0);
+}
+/** Projects are the leaf: their own `spent` field, no rollup needed. */
+function programSpent(data, programId) {
+	return sum(projectsInProgram(data, programId).map((p) => p.spent));
+}
+/** Sum of a program's own projects' budgets — compare against the program's stated budget to see over/under-allocation. */
+function programBudgetAllocated(data, programId) {
+	return sum(projectsInProgram(data, programId).map((p) => p.budget));
+}
+/** This program's own items plus everything raised in its projects. */
+function programRaidItems(data, programId) {
+	const projectIds = new Set(projectsInProgram(data, programId).map((p) => p.id));
+	return data.raidItems.filter((r) => r.programId === programId || r.projectId != null && projectIds.has(r.projectId));
+}
+/** This portfolio's own items plus everything raised in its programs and their projects. */
+function portfolioRaidItems(data, portfolioId) {
+	const programIds = new Set(programsIn(data, portfolioId).map((p) => p.id));
+	const projectIds = new Set(projectsInPortfolio(data, portfolioId).map((p) => p.id));
+	return data.raidItems.filter((r) => r.portfolioId === portfolioId || r.programId != null && programIds.has(r.programId) || r.projectId != null && projectIds.has(r.projectId));
+}
+
 //#endregion
 //#region src/lib/baseline.ts
 const day$2 = (iso) => /* @__PURE__ */ new Date(`${iso}T12:00:00`);
@@ -1823,27 +1914,6 @@ function searchTasks(tasks, projects, query, limit = 12) {
 	}, limit);
 }
 
-//#endregion
-//#region src/lib/spend.ts
-function spendEntriesOf(data, projectId) {
-	return (data.spendEntries ?? []).filter((e) => e.projectId === projectId).sort((a, b) => a.date.localeCompare(b.date));
-}
-function spentFromEntries(entries) {
-	return entries.reduce((sum, e) => sum + e.amount, 0);
-}
-/** The entry that makes the ledger agree with a total typed by hand. */
-function adjustmentEntry(projectId, oldSpent, newSpent, date, id) {
-	const delta = Math.round((newSpent - oldSpent) * 100) / 100;
-	if (delta === 0) return null;
-	return {
-		id,
-		projectId,
-		amount: delta,
-		date,
-		note: "Adjusted the total by hand"
-	};
-}
-
 //#endregion
 //#region src/lib/work.ts
 /** Every task this one waits on that still exists, done or not. */
@@ -2096,6 +2166,74 @@ function filterTasks(tasks, f) {
 	if (f.who === "any" && f.priority === "any") return tasks;
 	return tasks.filter((t) => (f.who === "any" || (f.who === "none" ? t.assigneeId === null : t.assigneeId === f.who)) && (f.priority === "any" || t.priority === f.priority));
 }
+/**
+* Bands of lines, each line owned by one item (a program or a project):
+* the first line to show so the selected band fits, scrolling as little
+* as it can from the top.
+*/
+function bandStart(owners, selected, rows) {
+	const first = owners.indexOf(selected);
+	if (first < 0) return 0;
+	const last = owners.lastIndexOf(selected);
+	return Math.max(0, Math.min(first, last - rows + 1));
+}
+/** The next milestones still to reach, soonest first. */
+function nextMarks(data, programId, n) {
+	return data.milestones.filter((m) => m.programId === programId && !m.done).sort((a, b) => a.dueDate.localeCompare(b.dueDate)).slice(0, n);
+}
+/** Open risks and issues, worst first. */
+function worst(items, n) {
+	return sortRaid(items.filter(isActive)).slice(0, n);
+}
+function projectRow(data, project, today) {
+	const tasks = tasksOf(data.tasks, project.id);
+	const open = {};
+	let done = 0;
+	let late = 0;
+	for (const t of tasks) {
+		if (t.status === "done") done++;
+		else open[t.status] = (open[t.status] ?? 0) + 1;
+		if (isLate(t, today)) late++;
+	}
+	return {
+		project,
+		progress: tasks.length ? Math.round(done / tasks.length * 100) : 0,
+		late,
+		open
+	};
+}
+function activeConstraint(data, programId) {
+	const c = constraintOf(data, programId);
+	return c?.status === "active" ? c.title : null;
+}
+/** A portfolio read program by program, as the website's By program layout. */
+function programBands(data, portfolioId, today, showDone) {
+	const split = splitDone(data.programs.filter((p) => p.portfolioId === portfolioId));
+	return (showDone ? [...split.open, ...split.done] : split.open).map((program) => {
+		const mine = splitDone(data.projects.filter((p) => p.programId === program.id));
+		const rows = (showDone ? [...mine.open, ...mine.done] : mine.open).map((p) => projectRow(data, p, today));
+		const all = [...mine.open, ...mine.done].map((p) => tasksOf(data.tasks, p.id));
+		const total = all.reduce((n, t) => n + t.length, 0);
+		const done = all.reduce((n, t) => n + t.filter((x) => x.status === "done").length, 0);
+		return {
+			program,
+			progress: total ? Math.round(done / total * 100) : 0,
+			constraint: activeConstraint(data, program.id),
+			projects: rows,
+			doneProjects: showDone ? 0 : mine.done.length,
+			milestones: nextMarks(data, program.id, 2),
+			risks: worst(programRaidItems(data, program.id), 2)
+		};
+	});
+}
+/** A program read project by project, as the website's By project layout. */
+function projectBands(data, programId, today, showDone) {
+	const split = splitDone(data.projects.filter((p) => p.programId === programId));
+	return (showDone ? [...split.open, ...split.done] : split.open).map((p) => ({
+		...projectRow(data, p, today),
+		risks: worst(data.raidItems.filter((r) => r.projectId === p.id), 2)
+	}));
+}
 
 //#endregion
 //#region src/tui/theme.ts
@@ -2981,27 +3119,6 @@ function HistoryView({ active, width, height, go }) {
 	});
 }
 
-//#endregion
-//#region src/lib/flow.ts
-function tasksInProgramOf(data, programId) {
-	const ids = new Set(data.projects.filter((p) => p.programId === programId).map((p) => p.id));
-	return data.tasks.filter((t) => ids.has(t.projectId));
-}
-function activeConstraints(data) {
-	return (data.constraints ?? []).filter((c) => c.status === "active");
-}
-function constraintsOwnedBy(data, personId) {
-	return activeConstraints(data).filter((c) => c.ownerId === personId);
-}
-function constraintIdle(data, constraint) {
-	if (constraint.status !== "active" || !constraint.ownerId) return false;
-	const tasks = tasksInProgramOf(data, constraint.programId);
-	if (!tasks.some((t) => t.status !== "done")) return false;
-	if (tasks.some((t) => t.assigneeId === constraint.ownerId && t.status === "doing")) return false;
-	const here = new Set(tasks.map((t) => t.id));
-	return data.tasks.some((t) => t.assigneeId === constraint.ownerId && t.status === "doing" && !here.has(t.id));
-}
-
 //#endregion
 //#region src/lib/inbox.ts
 const KIND_RANK = {
@@ -3293,19 +3410,6 @@ function weeklyLoad(tasks, personId, now, weeks = 6) {
 	};
 }
 
-//#endregion
-//#region src/lib/selectors.ts
-/** Projects (or programs) still running, and the ones set to Done, which lists tuck away until asked for. */
-function splitDone(items) {
-	const open = [];
-	const done = [];
-	for (const item of items) (item.health === "done" ? done : open).push(item);
-	return {
-		open,
-		done
-	};
-}
-
 //#endregion
 //#region src/tui/views/lists.tsx
 const count = (n, noun) => `${n} ${noun}${n === 1 ? "" : "s"}`;
@@ -4737,12 +4841,293 @@ function PersonPanel({ id, width, height, go, active, onClose }) {
 	});
 }
 
+//#endregion
+//#region src/tui/views/bands.tsx
+/**
+* The website's band layouts in the terminal: a portfolio read program by
+* program, a program read project by project. Each band is a few lines; the
+* one you're on stays in view.
+*/
+const NAME$1 = 24;
+function Lines({ lines, selected, rows }) {
+	const start = bandStart(lines.map((l) => l.owner), selected, rows);
+	const shown = lines.slice(start, start + rows);
+	return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		height: rows,
+		children: shown.map((l, i) => /* @__PURE__ */ jsx(Box, { children: l.node }, start + i))
+	});
+}
+function fit(text, n) {
+	return text.length > n ? `${text.slice(0, n - 1)}…` : text.padEnd(n);
+}
+function riskLine(r, today) {
+	const score = scoreOf(r);
+	return /* @__PURE__ */ jsxs(Text, {
+		wrap: "truncate-end",
+		children: [
+			"    ",
+			/* @__PURE__ */ jsx(Text, {
+				color: r.kind === "issue" ? theme.bad : r.kind === "risk" ? theme.warn : theme.muted,
+				children: KIND_LABEL[r.kind].toLowerCase()
+			}),
+			" ",
+			r.title,
+			/* @__PURE__ */ jsxs(Text, {
+				color: theme.muted,
+				children: [score != null ? ` · score ${score}` : "", r.dueDate ? ` · review ${shortDay(r.dueDate, today)}` : ""]
+			})
+		]
+	});
+}
+function projectLine(row, w, bar, today, indent = 4) {
+	const p = row.project;
+	return /* @__PURE__ */ jsxs(Text, {
+		wrap: "truncate-end",
+		children: [
+			" ".repeat(indent),
+			/* @__PURE__ */ jsx(Text, {
+				color: HEALTH_COLOR[p.health],
+				children: "●"
+			}),
+			" ",
+			fit(p.name, NAME$1 - indent),
+			" ",
+			/* @__PURE__ */ jsx(Text, {
+				color: HEALTH_COLOR[p.health],
+				children: roadmapCells(p.startDate, p.endDate, [], w, bar)
+			}),
+			" ",
+			/* @__PURE__ */ jsxs(Text, {
+				color: theme.muted,
+				children: [String(row.progress).padStart(3), "%"]
+			}),
+			row.late ? /* @__PURE__ */ jsxs(Text, {
+				color: theme.bad,
+				children: [
+					" ",
+					row.late,
+					" late"
+				]
+			}) : null
+		]
+	});
+}
+/** The months over the bars, lined up with them. */
+function Axis({ w, bar }) {
+	return /* @__PURE__ */ jsxs(Text, {
+		color: theme.muted,
+		wrap: "truncate-end",
+		children: [" ".repeat(27), roadmapHeader(w, bar)]
+	});
+}
+/** A portfolio, program by program: each with its projects' bars, next milestones and worst risks. */
+function ProgramBands({ bands, at, active, width, height, w, today }) {
+	const bar = Math.max(10, width - NAME$1 - 19);
+	const lines = [];
+	bands.forEach((b, i) => {
+		const on = active && i === at;
+		const p = b.program;
+		lines.push({
+			owner: i,
+			node: /* @__PURE__ */ jsxs(Text, {
+				wrap: "truncate-end",
+				color: on ? theme.selected : void 0,
+				bold: on,
+				children: [
+					on ? "› " : "  ",
+					/* @__PURE__ */ jsx(Text, {
+						color: HEALTH_COLOR[p.health],
+						children: "●"
+					}),
+					" ",
+					p.name,
+					" ",
+					/* @__PURE__ */ jsxs(Text, {
+						color: theme.muted,
+						bold: false,
+						children: [
+							HEALTH_LABEL[p.health],
+							" · ",
+							b.progress,
+							"% done",
+							p.nextMove ? ` · next: ${p.nextMove}` : ""
+						]
+					})
+				]
+			})
+		});
+		if (b.constraint) lines.push({
+			owner: i,
+			node: /* @__PURE__ */ jsxs(Text, {
+				color: theme.warn,
+				wrap: "truncate-end",
+				children: [
+					"    ",
+					"Held back by ",
+					b.constraint
+				]
+			})
+		});
+		for (const row of b.projects) lines.push({
+			owner: i,
+			node: projectLine(row, w, bar, today)
+		});
+		if (b.projects.length === 0) lines.push({
+			owner: i,
+			node: /* @__PURE__ */ jsxs(Text, {
+				color: theme.muted,
+				children: ["    ", b.doneProjects ? "Every project here is done." : "No projects yet."]
+			})
+		});
+		else if (b.doneProjects) lines.push({
+			owner: i,
+			node: /* @__PURE__ */ jsxs(Text, {
+				color: theme.muted,
+				children: [
+					"    ",
+					b.doneProjects,
+					" done hidden (D)"
+				]
+			})
+		});
+		for (const m of b.milestones) lines.push({
+			owner: i,
+			node: /* @__PURE__ */ jsxs(Text, {
+				wrap: "truncate-end",
+				children: [
+					"    ",
+					/* @__PURE__ */ jsx(Text, {
+						color: m.dueDate < today ? theme.bad : theme.accent,
+						children: "◆"
+					}),
+					" ",
+					m.name,
+					/* @__PURE__ */ jsxs(Text, {
+						color: m.dueDate < today ? theme.bad : theme.muted,
+						children: [
+							" ",
+							"· ",
+							m.dueDate < today ? "late, " : "",
+							shortDay(m.dueDate, today)
+						]
+					})
+				]
+			})
+		});
+		for (const r of b.risks) lines.push({
+			owner: i,
+			node: riskLine(r, today)
+		});
+		lines.push({
+			owner: i,
+			node: /* @__PURE__ */ jsx(Text, { children: " " })
+		});
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		height,
+		children: [/* @__PURE__ */ jsx(Axis, {
+			w,
+			bar
+		}), /* @__PURE__ */ jsx(Lines, {
+			lines,
+			selected: at,
+			rows: Math.max(1, height - 1)
+		})]
+	});
+}
+/** A program, project by project: each with its bar, its open tasks by status and its worst risks. */
+function ProjectBands({ bands, at, active, width, height, w, today }) {
+	const bar = Math.max(10, width - NAME$1 - 14);
+	const lines = [];
+	bands.forEach((b, i) => {
+		const on = active && i === at;
+		const p = b.project;
+		lines.push({
+			owner: i,
+			node: /* @__PURE__ */ jsxs(Text, {
+				wrap: "truncate-end",
+				color: on ? theme.selected : void 0,
+				bold: on,
+				children: [
+					on ? "› " : "  ",
+					/* @__PURE__ */ jsx(Text, {
+						color: HEALTH_COLOR[p.health],
+						children: "●"
+					}),
+					" ",
+					fit(p.name, 22),
+					" ",
+					/* @__PURE__ */ jsx(Text, {
+						color: HEALTH_COLOR[p.health],
+						bold: false,
+						children: roadmapCells(p.startDate, p.endDate, [], w, bar)
+					}),
+					" ",
+					/* @__PURE__ */ jsxs(Text, {
+						color: theme.muted,
+						bold: false,
+						children: [String(b.progress).padStart(3), "%"]
+					})
+				]
+			})
+		});
+		const open = STATUS_ORDER.filter((s) => s !== "done" && b.open[s]).map((s) => `${STATUS_LABEL[s].toLowerCase()} ${b.open[s]}`);
+		lines.push({
+			owner: i,
+			node: /* @__PURE__ */ jsxs(Text, {
+				wrap: "truncate-end",
+				color: theme.muted,
+				children: [
+					"    ",
+					HEALTH_LABEL[p.health],
+					" · ",
+					open.length ? open.join(" · ") : "nothing open",
+					b.late ? /* @__PURE__ */ jsxs(Text, {
+						color: theme.bad,
+						children: [
+							" · ",
+							b.late,
+							" late"
+						]
+					}) : null,
+					" · ends",
+					" ",
+					shortDay(p.endDate, today)
+				]
+			})
+		});
+		for (const r of b.risks) lines.push({
+			owner: i,
+			node: riskLine(r, today)
+		});
+		lines.push({
+			owner: i,
+			node: /* @__PURE__ */ jsx(Text, { children: " " })
+		});
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		height,
+		children: [/* @__PURE__ */ jsx(Axis, {
+			w,
+			bar
+		}), /* @__PURE__ */ jsx(Lines, {
+			lines,
+			selected: at,
+			rows: Math.max(1, height - 1)
+		})]
+	});
+}
+
 //#endregion
 //#region src/tui/views/program.tsx
 /**
 * One program: its health (and why, when set by hand), next move, its
 * projects and its milestones. ←→ between the two lists. Projects set to
-* Done stay out of the list until D shows them.
+* Done stay out of the list until D shows them. v reads it project by
+* project instead, as the website's By project layout.
 */
 function ProgramView({ programId, active, width, height, go, onBack }) {
 	const { store, today } = useDeps();
@@ -4751,6 +5136,7 @@ function ProgramView({ programId, active, width, height, go, onBack }) {
 	const tasks = useHarbor((s) => s.tasks);
 	const milestones = useHarbor((s) => s.milestones);
 	const people = useHarbor((s) => s.people);
+	const raidItems = useHarbor((s) => s.raidItems);
 	const portfolio = useHarbor((s) => s.portfolios.find((p) => p.id === program?.portfolioId));
 	const [showDone, setShowDone] = useState(false);
 	const split = useMemo(() => splitDone(projects.filter((p) => p.programId === programId)), [projects, programId]);
@@ -4761,14 +5147,19 @@ function ProgramView({ programId, active, width, height, go, onBack }) {
 		today
 	]);
 	const [side, setSide] = useState("projects");
+	const [layout, setLayout] = useState("board");
 	const [pAt, setPAt] = useState(0);
 	const [mAt, setMAt] = useState(0);
 	const project = mine[Math.min(pAt, mine.length - 1)];
 	const mark = marks[Math.min(mAt, marks.length - 1)]?.milestone;
 	useInput((input, key) => {
 		if (key.escape || key.backspace) return onBack();
-		if (key.leftArrow || input === "h") return setSide("projects");
-		if (key.rightArrow || input === "l") return setSide("milestones");
+		if (input === "v") {
+			setSide("projects");
+			return setLayout((l) => l === "board" ? "bands" : "board");
+		}
+		if (layout === "board" && (key.leftArrow || input === "h")) return setSide("projects");
+		if (layout === "board" && (key.rightArrow || input === "l")) return setSide("milestones");
 		if (input === "e") return go.openPanel("program", programId);
 		if (input === "n") return go.create("project", { programId });
 		if (input === "m") return go.create("milestone", { programId });
@@ -4798,6 +5189,11 @@ function ProgramView({ programId, active, width, height, go, onBack }) {
 		tasks,
 		projects
 	};
+	const bands = layout === "bands" ? projectBands({
+		tasks,
+		projects,
+		raidItems
+	}, programId, today(), showDone) : [];
 	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		width,
@@ -4845,7 +5241,21 @@ function ProgramView({ programId, active, width, height, go, onBack }) {
 				children: ["Next move: ", program.nextMove || "none written yet (e to write one)"]
 			}),
 			/* @__PURE__ */ jsx(Text, { children: " " }),
-			/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsxs(Box, {
+			layout === "bands" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Heading, {
+				right: `${mine.length}${split.done.length > 0 ? ` · ${split.done.length} done ${showDone ? "shown" : "hidden"} (D)` : ""} · v board`,
+				children: "By project"
+			}), mine.length === 0 ? /* @__PURE__ */ jsx(Text, {
+				color: theme.muted,
+				children: split.done.length > 0 ? "Every project here is done. D shows them." : "None yet. n adds one."
+			}) : /* @__PURE__ */ jsx(ProjectBands, {
+				bands,
+				at: Math.min(pAt, bands.length - 1),
+				active,
+				width: width - 2,
+				height: height - 4,
+				w: roadmapWindow("half", today()),
+				today: today()
+			})] }) : /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsxs(Box, {
 				flexDirection: "column",
 				width: half,
 				marginRight: 1,
@@ -4930,20 +5340,54 @@ function ProgramView({ programId, active, width, height, go, onBack }) {
 		]
 	});
 }
-/** One portfolio: its health and its programs, each with theirs; Done ones wait for D. */
+/**
+* One portfolio, as the website's board: its programs, with its worst
+* risks, next milestones and money beside them when there's room. v reads
+* it program by program instead (By program). Done programs wait for D.
+*/
 function PortfolioView({ portfolioId, active, width, height, go, onBack }) {
+	const { today } = useDeps();
 	const portfolio = useHarbor((s) => s.portfolios.find((p) => p.id === portfolioId));
 	const programs = useHarbor((s) => s.programs);
 	const projects = useHarbor((s) => s.projects);
+	const tasks = useHarbor((s) => s.tasks);
+	const milestones = useHarbor((s) => s.milestones);
+	const raidItems = useHarbor((s) => s.raidItems);
+	const constraints = useHarbor((s) => s.constraints);
 	const [showDone, setShowDone] = useState(false);
+	const [layout, setLayout] = useState("board");
 	const split = useMemo(() => splitDone(programs.filter((p) => p.portfolioId === portfolioId)), [programs, portfolioId]);
 	const list = showDone ? [...split.open, ...split.done] : split.open;
 	const [at, setAt] = useState(0);
 	const program = list[Math.min(at, list.length - 1)];
+	const day = today();
+	const data = useMemo(() => ({
+		programs,
+		projects,
+		tasks,
+		milestones,
+		raidItems,
+		constraints
+	}), [
+		programs,
+		projects,
+		tasks,
+		milestones,
+		raidItems,
+		constraints
+	]);
+	const bands = useMemo(() => layout === "bands" ? programBands(data, portfolioId, day, showDone) : [], [
+		layout,
+		data,
+		portfolioId,
+		day,
+		showDone
+	]);
 	useInput((input, key) => {
 		if (key.escape || key.backspace) return onBack();
 		if (input === "e") return go.openPanel("portfolio", portfolioId);
 		if (input === "n") return go.create("program", { portfolioId });
+		if (input === "v") return setLayout((l) => l === "board" ? "bands" : "board");
 		if (input === "D" && split.done.length > 0) return setShowDone((v) => !v);
 		if (key.upArrow || input === "k") setAt((i) => step(i, -1, list.length));
 		else if (key.downArrow || input === "j") setAt((i) => step(i, 1, list.length));
@@ -4953,6 +5397,15 @@ function PortfolioView({ portfolioId, active, width, height, go, onBack }) {
 		color: theme.muted,
 		children: " That portfolio isn’t in this harbor any more. Esc goes back."
 	});
+	const side = layout === "board" && width >= 96 ? Math.floor((width - 3) * .4) : 0;
+	const main = width - 2 - (side ? side + 1 : 0);
+	const body = height - 4;
+	const risks = sortRaid(portfolioRaidItems(data, portfolioId).filter(isActive));
+	const ids = new Set(list.map((p) => p.id));
+	const next = milestones.filter((m) => ids.has(m.programId) && !m.done).sort((a, b) => a.dueDate.localeCompare(b.dueDate));
+	const budget = list.reduce((n, p) => n + programBudgetAllocated(data, p.id), 0);
+	const spent = list.reduce((n, p) => n + programSpent(data, p.id), 0);
+	const listRows = Math.max(1, body - 1);
 	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		width,
@@ -4981,50 +5434,136 @@ function PortfolioView({ portfolioId, active, width, height, go, onBack }) {
 					}) : null
 				]
 			}),
-			/* @__PURE__ */ jsx(Text, {
+			/* @__PURE__ */ jsxs(Text, {
 				color: theme.muted,
 				wrap: "truncate-end",
-				children: portfolio.theme || "Portfolio"
+				children: [
+					portfolio.theme || "Portfolio",
+					" · ",
+					layout === "board" ? "board" : "by program",
+					" · v switches"
+				]
 			}),
 			/* @__PURE__ */ jsx(Text, { children: " " }),
-			/* @__PURE__ */ jsx(Heading, {
-				right: `${list.length} program${list.length === 1 ? "" : "s"}${split.done.length > 0 ? ` · ${split.done.length} done ${showDone ? "shown" : "hidden"} (D)` : ""}`,
-				children: "Programs"
-			}),
-			list.length === 0 ? /* @__PURE__ */ jsx(Text, {
-				color: theme.muted,
-				children: split.done.length > 0 ? "Every program here is done. D shows them." : "None yet. n adds one."
-			}) : null,
-			windowOf(list, at, height - 5).items.map((p) => {
-				const on = active && p.id === program?.id;
-				const count = projects.filter((x) => x.programId === p.id).length;
-				return /* @__PURE__ */ jsxs(Text, {
-					color: on ? theme.selected : void 0,
-					bold: on,
-					wrap: "truncate-end",
-					children: [
-						on ? "› " : "  ",
-						/* @__PURE__ */ jsx(Text, {
-							color: HEALTH_COLOR[p.health],
-							children: "●"
-						}),
-						" ",
-						p.name,
-						" ",
-						/* @__PURE__ */ jsxs(Text, {
-							color: theme.muted,
-							children: [
-								HEALTH_LABEL[p.health],
-								" · ",
-								count,
-								" project",
-								count === 1 ? "" : "s",
-								p.nextMove ? ` · next: ${p.nextMove}` : ""
-							]
-						})
-					]
-				}, p.id);
-			})
+			/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsxs(Box, {
+				flexDirection: "column",
+				width: main,
+				children: [/* @__PURE__ */ jsx(Heading, {
+					right: `${list.length} program${list.length === 1 ? "" : "s"}${split.done.length > 0 ? ` · ${split.done.length} done ${showDone ? "shown" : "hidden"} (D)` : ""}`,
+					children: layout === "board" ? "Programs" : "By program"
+				}), list.length === 0 ? /* @__PURE__ */ jsx(Text, {
+					color: theme.muted,
+					children: split.done.length > 0 ? "Every program here is done. D shows them." : "None yet. n adds one."
+				}) : layout === "bands" ? /* @__PURE__ */ jsx(ProgramBands, {
+					bands,
+					at: Math.min(at, bands.length - 1),
+					active,
+					width: main,
+					height: listRows,
+					w: roadmapWindow("half", day),
+					today: day
+				}) : windowOf(list, at, listRows).items.map((p) => {
+					const on = active && p.id === program?.id;
+					const count = projects.filter((x) => x.programId === p.id).length;
+					return /* @__PURE__ */ jsxs(Text, {
+						color: on ? theme.selected : void 0,
+						bold: on,
+						wrap: "truncate-end",
+						children: [
+							on ? "› " : "  ",
+							/* @__PURE__ */ jsx(Text, {
+								color: HEALTH_COLOR[p.health],
+								children: "●"
+							}),
+							" ",
+							p.name,
+							" ",
+							/* @__PURE__ */ jsxs(Text, {
+								color: theme.muted,
+								children: [
+									HEALTH_LABEL[p.health],
+									" · ",
+									count,
+									" project",
+									count === 1 ? "" : "s",
+									p.nextMove ? ` · next: ${p.nextMove}` : ""
+								]
+							})
+						]
+					}, p.id);
+				})]
+			}), side ? /* @__PURE__ */ jsxs(Box, {
+				flexDirection: "column",
+				width: side,
+				marginLeft: 1,
+				children: [
+					/* @__PURE__ */ jsx(Heading, {
+						right: `${risks.length} open`,
+						children: "Risks & issues"
+					}),
+					risks.length === 0 ? /* @__PURE__ */ jsx(Text, {
+						color: theme.muted,
+						children: "Nothing open."
+					}) : null,
+					risks.slice(0, 5).map((r) => /* @__PURE__ */ jsxs(Text, {
+						wrap: "truncate-end",
+						children: [
+							/* @__PURE__ */ jsx(Text, {
+								color: r.kind === "issue" ? theme.bad : r.kind === "risk" ? theme.warn : theme.muted,
+								children: r.kind
+							}),
+							" ",
+							r.title
+						]
+					}, r.id)),
+					/* @__PURE__ */ jsx(Text, { children: " " }),
+					/* @__PURE__ */ jsx(Heading, { children: "Next milestones" }),
+					next.length === 0 ? /* @__PURE__ */ jsx(Text, {
+						color: theme.muted,
+						children: "None to come."
+					}) : null,
+					next.slice(0, 4).map((m) => /* @__PURE__ */ jsxs(Text, {
+						wrap: "truncate-end",
+						children: [
+							/* @__PURE__ */ jsx(Text, {
+								color: m.dueDate < day ? theme.bad : theme.accent,
+								children: "◆"
+							}),
+							" ",
+							m.name,
+							" ",
+							/* @__PURE__ */ jsx(Text, {
+								color: m.dueDate < day ? theme.bad : theme.muted,
+								children: shortDay(m.dueDate, day)
+							})
+						]
+					}, m.id)),
+					/* @__PURE__ */ jsx(Text, { children: " " }),
+					/* @__PURE__ */ jsx(Heading, { children: "Money" }),
+					/* @__PURE__ */ jsxs(Text, {
+						wrap: "truncate-end",
+						children: [
+							money(spent),
+							" ",
+							/* @__PURE__ */ jsx(Text, {
+								color: theme.muted,
+								children: "spent of"
+							}),
+							" ",
+							money(budget),
+							budget > 0 ? /* @__PURE__ */ jsxs(Text, {
+								color: spent > budget ? theme.bad : theme.muted,
+								children: [
+									" ",
+									"(",
+									Math.round(spent / budget * 100),
+									"%)"
+								]
+							}) : null
+						]
+					})
+				]
+			}) : null] })
 		]
 	});
 }
@@ -6722,6 +7261,7 @@ function App({ ui }) {
 		["Enter", "open"],
 		["e", "edit"],
 		["n", "new"],
+		["v", "layout"],
 		...page.kind === "program" ? [["m", "milestone"], ["←→", "lists"]] : [],
 		["Esc", "back"]
 	] : [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harborppm/cli",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Harbor from the terminal: a full-screen app with everything, plus commands for scripts and agents.",
   "keywords": [
     "harbor",