magus-cli 7.12.2 → 7.14.0

package/src/ui/market/MarketplacesScreen.tsx

@@ -0,0 +1,264 @@
+import React from "react";
+import {
+	type MarketplacesItem,
+	fitRow,
+	localKindWords,
+	marketplacesItems,
+	nextSelectable,
+	plural,
+	selectable,
+} from "../adapters/marketAdapter.js";
+import { ScrollableList } from "../components/ScrollableList.js";
+import { ScreenLayout } from "../components/layout/index.js";
+import {
+	ErrorNotice,
+	ListCategoryRow,
+	MetaText,
+	ScopeBadge,
+	SelectableRow,
+} from "../components/primitives/index.js";
+import { useKeyLayer } from "../input/KeyRouter.js";
+import { type KeyHandler, moveDirection, runBindings } from "../keymap.js";
+import { useModal } from "../state/AppContext.js";
+import { useDimensions } from "../state/DimensionsContext.js";
+import { asyncValue } from "../state/types.js";
+import { truncate } from "../text-width.js";
+import { MarketplacesDetail } from "./MarketplacesDetail.snowflake.js";
+import {
+	MARKETPLACES_APP_KEYS,
+	MARKETPLACES_KEYS,
+	MARKET_HELP,
+	type MarketplacesKeyId,
+	marketHelpSections,
+} from "./marketKeymap.js";
+import type { MarketState } from "./useMarketState.js";
+
+/** Rows above the list: the heading. */
+const HEADING_ROWS = 1;
+
+/** Cells a row starts in, the lead cell included. */
+const ROW_INDENT = 2;
+
+type Part = { text: string; tone: "muted" | "info" | "warning" };
+
+/** The secondary texts after a row's name and badge, cut first when narrow. */
+function Secondary({
+	parts,
+	selected,
+}: {
+	parts: readonly Part[];
+	selected: boolean;
+}) {
+	return (
+		<>
+			{parts.map((p) => (
+				<React.Fragment key={p.text}>
+					{"  "}
+					<MetaText text={p.text} tone={p.tone} selected={selected} />
+				</React.Fragment>
+			))}
+		</>
+	);
+}
+
+/**
+ * One row of screen 1 in `width` columns, never wrapped: the name and the
+ * scope badge always show, the rest is cut or dropped from the end.
+ */
+export function renderMarketplacesRow(
+	item: MarketplacesItem,
+	selected: boolean,
+	width: number,
+): React.ReactNode {
+	const room = Math.max(1, width - ROW_INDENT);
+	if (item.kind === "create" || item.kind === "connect") {
+		return (
+			<SelectableRow selected={selected} variant="action" indent={ROW_INDENT}>
+				{truncate(item.kind === "create" ? "+ Create…" : "+ Connect…", room)}
+			</SelectableRow>
+		);
+	}
+	if (item.kind === "local-heading") {
+		return (
+			<ListCategoryRow
+				title="Here, in no marketplace"
+				count={item.count}
+				selected={false}
+				expandable={false}
+				width={width}
+			/>
+		);
+	}
+	if (item.kind === "local") {
+		const scope = item.item.scope === "user" ? "USER" : "PROJECT";
+		const fit = fitRow<Part>(room, item.item.name, scope.length + 4, [
+			{ text: localKindWords(item.item), tone: "muted" },
+		]);
+		return (
+			<SelectableRow selected={selected} indent={ROW_INDENT}>
+				<strong>{fit.name}</strong>
+				{"  "}
+				<ScopeBadge scope={scope} selected={selected} />
+				<Secondary parts={fit.secondary} selected={selected} />
+			</SelectableRow>
+		);
+	}
+	const { entry, toPush } = item;
+	const parts: Part[] = [
+		...(entry.company
+			? [{ text: `by ${entry.company}`, tone: "muted" as const }]
+			: []),
+		...(toPush.length > 0
+			? [
+					{
+						text: `● ${plural(toPush.length, "plugin")} to push`,
+						tone: "warning" as const,
+					},
+				]
+			: []),
+		...(entry.freshness === "stale"
+			? [{ text: "⚠ not current", tone: "warning" as const }]
+			: []),
+		{ text: plural(entry.plugins.length, "plugin"), tone: "muted" },
+		{ text: entry.repo, tone: "info" },
+	];
+	const fit = fitRow(room, entry.name, "USER".length + 4, parts);
+	return (
+		<SelectableRow selected={selected} indent={ROW_INDENT}>
+			<strong>{fit.name}</strong>
+			{"  "}
+			<ScopeBadge scope="USER" selected={selected} />
+			<Secondary parts={fit.secondary} selected={selected} />
+		</SelectableRow>
+	);
+}
+
+/** Screen 1: the company marketplaces on this machine. */
+export function MarketplacesScreen({
+	market,
+	onExit,
+}: {
+	market: MarketState;
+	onExit: () => void;
+}) {
+	const modal = useModal();
+	const dimensions = useDimensions();
+	const value = asyncValue(market.data);
+	const items = marketplacesItems(
+		value?.marketplaces ?? [],
+		value?.status ?? [],
+		value?.local ?? [],
+	);
+	const clamped = Math.min(market.selected.marketplaces, items.length - 1);
+	const index = selectable(items[clamped])
+		? clamped
+		: nextSelectable(items, clamped, -1);
+	const item = items[index];
+
+	const select = (next: number) =>
+		market.setSelected((s) => ({
+			...s,
+			marketplaces: Math.max(0, Math.min(items.length - 1, next)),
+		}));
+
+	const handlers: Record<MarketplacesKeyId, KeyHandler> = {
+		open: () => {
+			if (item?.kind === "marketplace") market.open(item.entry.name);
+			else if (item?.kind === "create") void market.create();
+			else if (item?.kind === "connect") void market.connect();
+			else if (item?.kind === "local") void market.addLocal(item.item);
+		},
+		add: () => {
+			if (item?.kind === "local") void market.addLocal(item.item);
+		},
+		create: () => void market.create(),
+		connect: () => void market.connect(),
+		remove: () => {
+			if (item?.kind === "marketplace") void market.remove(item.entry.name);
+		},
+		fetch: () => void market.fetch(),
+		move: (key) => select(nextSelectable(items, index, moveDirection(key))),
+	};
+	useKeyLayer("screen", true, (key) =>
+		runBindings(MARKETPLACES_KEYS, handlers, key),
+	);
+	useKeyLayer("global", true, (key) =>
+		runBindings(
+			MARKETPLACES_APP_KEYS,
+			{
+				help: () => modal.helpSections(marketHelpSections("marketplaces")),
+				quit: onExit,
+				back: onExit,
+			},
+			key,
+		),
+	);
+
+	const count = value?.marketplaces.length ?? 0;
+	const loading = market.data.status === "loading";
+	const failed = market.data.status === "error" ? market.data.error : null;
+
+	return (
+		<ScreenLayout
+			title="magus edit"
+			subtitle={loading ? "reading…" : "company plugin marketplaces"}
+			keymap={{
+				bindings: [...MARKETPLACES_KEYS, ...MARKETPLACES_APP_KEYS],
+				pinned: [MARKET_HELP],
+			}}
+			listPanel={(width: number) =>
+				failed ? (
+					<ErrorNotice
+						title="Could not read the company marketplaces."
+						detail={failed.message}
+						hint="r fetches from GitHub and reads them again."
+					/>
+				) : (
+					<box flexDirection="column">
+						<ListCategoryRow
+							title="Company marketplaces"
+							count={count}
+							selected={false}
+							expandable={false}
+							width={width}
+						/>
+						<ScrollableList
+							items={items}
+							selectedIndex={index}
+							renderItem={(it, _i, selected) =>
+								renderMarketplacesRow(it, selected, width)
+							}
+							maxHeight={Math.max(1, dimensions.listPanelHeight - HEADING_ROWS)}
+							getKey={(it) =>
+								it.kind === "marketplace"
+									? `m:${it.entry.name}`
+									: it.kind === "local"
+										? `l:${it.item.scope}:${it.item.name}`
+										: it.kind
+							}
+						/>
+					</box>
+				)
+			}
+			detailPanel={
+				<MarketplacesDetail
+					item={item}
+					canAdd={count > 0}
+					cwd={market.cwd}
+					note={
+						item?.kind === "marketplace"
+							? market.notes[item.entry.name]
+							: undefined
+					}
+				/>
+			}
+			detailKey={
+				item?.kind === "marketplace"
+					? `m:${item.entry.name}`
+					: item?.kind === "local"
+						? `l:${item.item.scope}:${item.item.name}`
+						: item?.kind
+			}
+		/>
+	);
+}

package/src/ui/market/PluginDetail.snowflake.tsx

@@ -0,0 +1,61 @@
+import type { MarketplaceItem } from "../adapters/marketAdapter.js";
+import {
+	DetailSection,
+	KeyValueLine,
+	ScopeVersionLine,
+	ToneLine,
+} from "../components/primitives/index.js";
+
+const SCOPE_WORDS = [
+	["user", "USER"],
+	["project", "PROJECT"],
+	["local", "LOCAL"],
+] as const;
+
+/**
+ * The detail panel for a company plugin's row: its version, skills, the
+ * skills edited here and its installs.
+ *
+ * A snowflake: the Marketplace screen's own panel, over the market adapter's
+ * row type and that screen's words. It is composed only from library
+ * primitives and sets no colour, border or text style of its own.
+ */
+export function PluginDetail({
+	item,
+}: {
+	item: Extract<MarketplaceItem, { kind: "plugin" }>;
+}) {
+	return (
+		<box flexDirection="column">
+			<DetailSection title={item.ref}>
+				<KeyValueLine label="version" value={item.version} />
+				<KeyValueLine
+					label="skills"
+					value={
+						item.skills.length > 0
+							? item.skills.join(", ")
+							: "none yet — a adds one"
+					}
+				/>
+			</DetailSection>
+			{item.edited.length > 0 ? (
+				<DetailSection title="Edited here">
+					<ToneLine tone="warning">● {item.edited.join(", ")}</ToneLine>
+					<ToneLine>p push a new version</ToneLine>
+					<ToneLine tone="muted">
+						Every edited skill goes out together, as one new version.
+					</ToneLine>
+				</DetailSection>
+			) : null}
+			<DetailSection title="Installed">
+				{SCOPE_WORDS.map(([scope, word]) => (
+					<ScopeVersionLine
+						key={scope}
+						scope={word}
+						version={item.installs[scope]}
+					/>
+				))}
+			</DetailSection>
+		</box>
+	);
+}

package/src/ui/market/SkillDetail.snowflake.tsx

@@ -0,0 +1,71 @@
+import {
+	type MarketplaceItem,
+	copyWords,
+	publishable,
+	skillMark,
+} from "../adapters/marketAdapter.js";
+import {
+	DetailSection,
+	KeyValueLine,
+	MetaText,
+	ScopeBadge,
+	ToneLine,
+} from "../components/primitives/index.js";
+
+/**
+ * The detail panel for a company skill's row: which plugin holds it, the
+ * local copy here and how it stands, and what publishing would do.
+ *
+ * A snowflake: the Marketplace screen's own panel, over the market adapter's
+ * row type and that screen's words. It is composed only from library
+ * primitives and sets no colour, border or text style of its own.
+ */
+export function SkillDetail({
+	item,
+}: {
+	item: Extract<MarketplaceItem, { kind: "skill" }>;
+}) {
+	const mark = skillMark(item.local);
+	const local = item.local;
+	return (
+		<box flexDirection="column">
+			<DetailSection title={item.skill}>
+				<KeyValueLine label="plugin" value={item.ref} />
+				<KeyValueLine
+					label="here"
+					value={
+						local ? (
+							<>
+								<ScopeBadge
+									scope={local.from === "user" ? "USER" : "PROJECT"}
+								/>{" "}
+								{copyWords(local)}
+							</>
+						) : (
+							<MetaText text="no copy in this project — e copies it here to edit" />
+						)
+					}
+				/>
+				{mark ? (
+					<ToneLine tone={mark.tone}>
+						{mark.glyph} {mark.words}
+					</ToneLine>
+				) : local ? (
+					<ToneLine tone="muted">the same as the plugin's</ToneLine>
+				) : null}
+				{local?.reason ? (
+					<ToneLine tone="muted">{local.reason}</ToneLine>
+				) : null}
+			</DetailSection>
+			{publishable(local) ? (
+				<DetailSection title="Publish">
+					<ToneLine tone="muted">
+						{local?.state === "edited"
+							? "p shows what publishing changes, then asks."
+							: "p shows both versions and asks twice before replacing the plugin's."}
+					</ToneLine>
+				</DetailSection>
+			) : null}
+		</box>
+	);
+}

package/src/ui/market/marketKeymap.ts

@@ -0,0 +1,243 @@
+/**
+ * Every key the market screens bind, in one place: the footers, the help
+ * overlay and the key handling all read this file, the way the main TUI reads
+ * ui/keymap.ts. Bindings are built with the same `bind` and matched by the
+ * same `runBindings`, so a key means the same thing in both apps.
+ */
+
+import {
+	HELP_ONLY,
+	type HelpSection,
+	type KeyBinding,
+	SCROLL_BINDINGS,
+	bind,
+	runBindings,
+} from "../keymap.js";
+
+const MOVE = bind(
+	"move",
+	["↑", "↓", "j", "k"],
+	"move",
+	"Move the selection",
+	20,
+);
+
+/** Screen 1: the company marketplaces on this machine. */
+export const MARKETPLACES_KEYS = [
+	bind("open", ["Enter"], "open", "Open the marketplace, or start the row", 90),
+	bind("create", ["c"], "create", "Create a company marketplace on GitHub", 80),
+	bind(
+		"connect",
+		["o"],
+		"connect",
+		"Connect an existing repository as a company marketplace",
+		75,
+	),
+	bind(
+		"add",
+		["a"],
+		"add",
+		"Add the skill or plugin folder here to a company marketplace",
+		70,
+	),
+	bind(
+		"remove",
+		["d"],
+		"remove",
+		"Remove the marketplace from this machine (the repository stays)",
+		60,
+	),
+	bind(
+		"fetch",
+		["r"],
+		"fetch",
+		"Fetch what changed on GitHub in every company marketplace",
+		50,
+	),
+	MOVE,
+] as const;
+
+/** Screen 2: one marketplace's plugins, each opening to its skills. */
+export const MARKETPLACE_KEYS = [
+	bind(
+		"expand",
+		["Enter", "→"],
+		"expand",
+		"Show or hide the plugin's skills",
+		90,
+	),
+	bind(
+		"publish",
+		["p"],
+		"publish",
+		"Publish edits: the skill's, or on a plugin every edited skill as one new version",
+		88,
+	),
+	bind(
+		"add",
+		["a"],
+		"add skill",
+		"Add a skill from this project or your USER skills",
+		85,
+	),
+	bind(
+		"edit",
+		["e"],
+		"edit here",
+		"Copy the skill into this project to edit it",
+		80,
+	),
+	bind(
+		"remove-skill",
+		["x"],
+		"remove skill",
+		"Remove the skill from its plugin",
+		70,
+	),
+	bind("new", ["n"], "new plugin", "Create a plugin in this marketplace", 65),
+	bind(
+		"delete",
+		["D"],
+		"delete plugin",
+		"Delete the plugin from this marketplace",
+		55,
+	),
+	bind(
+		"fetch",
+		["r"],
+		"fetch",
+		"Fetch what changed on GitHub in this marketplace",
+		HELP_ONLY,
+	),
+	MOVE,
+] as const;
+
+export type MarketplacesKeyId = (typeof MARKETPLACES_KEYS)[number]["id"];
+export type MarketplaceKeyId = (typeof MARKETPLACE_KEYS)[number]["id"];
+
+export const MARKET_HELP = bind(
+	"help",
+	["?"],
+	"help",
+	"Show every key (this list)",
+	100,
+);
+
+const QUIT = bind(
+	"quit",
+	["q"],
+	"quit",
+	"Quit (Ctrl+C quits from anywhere, even a dialog)",
+	30,
+);
+
+/** The app keys on screen 1: Esc quits, as `q` does. */
+export const MARKETPLACES_APP_KEYS = [
+	MARKET_HELP,
+	QUIT,
+	bind("back", ["Esc"], "quit", "Quit", HELP_ONLY),
+] as const;
+
+/** The app keys on screen 2: Esc goes back to the marketplaces. */
+export const MARKETPLACE_APP_KEYS = [
+	MARKET_HELP,
+	QUIT,
+	bind("back", ["Esc"], "back", "Back to the company marketplaces", 35),
+] as const;
+
+export type AppKeyId = (typeof MARKETPLACES_APP_KEYS)[number]["id"];
+
+/** What the marks on screen 1 mean. */
+const MARKETPLACES_LEGEND = [
+	{ symbol: "●", meaning: "plugins with skills edited here, ready to push" },
+	{
+		symbol: "USER",
+		meaning:
+			"under Here, in no marketplace: your USER skills; PROJECT is this project's",
+	},
+] as const;
+
+/** What the glyphs on screen 2 mean. */
+const MARKETPLACE_LEGEND = [
+	{
+		symbol: "■",
+		meaning: "installed at that scope; the squares are user, project, local",
+	},
+	{ symbol: "□", meaning: "not installed at that scope" },
+	{
+		symbol: "●",
+		meaning: "edited here, ready to publish; on a plugin, how many skills",
+	},
+	{ symbol: "◇", meaning: "edited here, origin unknown; publish asks twice" },
+	{ symbol: "⚠", meaning: "changed here and on GitHub; publish asks twice" },
+	{ symbol: "↓", meaning: "the plugin has a newer version than this copy" },
+	{ symbol: "?", meaning: "not checked against GitHub; r fetches" },
+] as const;
+
+/** The help overlay for the screen that is showing, its own keys first. */
+export function marketHelpSections(
+	screen: "marketplaces" | "marketplace",
+): HelpSection[] {
+	const one: HelpSection = {
+		title: "Company marketplaces",
+		bindings: MARKETPLACES_KEYS,
+		legend: MARKETPLACES_LEGEND,
+	};
+	const two: HelpSection = {
+		title: "A marketplace",
+		bindings: MARKETPLACE_KEYS,
+		legend: MARKETPLACE_LEGEND,
+	};
+	const [first, second] = screen === "marketplaces" ? [one, two] : [two, one];
+	return [
+		{ ...first, title: `${first.title} (this screen)` },
+		second,
+		{
+			title: "Everywhere",
+			bindings:
+				screen === "marketplaces"
+					? MARKETPLACES_APP_KEYS
+					: MARKETPLACE_APP_KEYS,
+		},
+		{ title: "Scrolling the right-hand panel", bindings: SCROLL_BINDINGS },
+	];
+}
+
+/**
+ * Refuse a keymap that claims one key twice on a screen, counting the app
+ * keys and the scroll keys. Runs when the module loads.
+ */
+function assertMarketKeymap(): void {
+	const screens: Array<readonly KeyBinding[]> = [
+		[...MARKETPLACES_KEYS, ...MARKETPLACES_APP_KEYS],
+		[...MARKETPLACE_KEYS, ...MARKETPLACE_APP_KEYS],
+	];
+	const tokens = (b: KeyBinding) =>
+		b.keys.flatMap((k) => (k === "/" ? [k] : k.split("/")));
+	for (const bindings of screens) {
+		const seen = new Map<string, string>();
+		for (const binding of [...bindings, ...SCROLL_BINDINGS]) {
+			// Parsing every key once is what makes a typo fail at load.
+			runBindings([binding], {}, NO_KEY);
+			for (const token of tokens(binding)) {
+				const owner = seen.get(token);
+				if (owner) {
+					throw new Error(
+						`market keymap: "${token}" is claimed by ${owner} and ${binding.id}`,
+					);
+				}
+				seen.set(token, binding.id);
+			}
+		}
+	}
+}
+
+const NO_KEY = {
+	name: "",
+	sequence: "",
+	ctrl: false,
+	meta: false,
+	shift: false,
+};
+
+assertMarketKeymap();