magus-cli 7.13.0 → 7.14.0

package/src/ui/market/MarketplaceScreen.tsx

@@ -1,6 +1,7 @@
-import type React from "react";
+import React from "react";
 import {
 	type MarketplaceItem,
+	fitRow,
 	freshnessWords,
 	marketplaceItems,
 	plural,
@@ -40,12 +41,36 @@ const SKILL_INDENT = 6;
 /** Cells a plugin row starts in. */
 const PLUGIN_INDENT = 2;
 
-function renderRow(
+/** Columns the scope squares and the ▶ marker take before a plugin's name. */
+const PLUGIN_PREFIX = 6;
+
+/**
+ * One row of screen 2 in `width` columns, never wrapped: the name always
+ * shows; the version, the skill count and the marks are cut from the end.
+ */
+export function renderMarketplaceRow(
 	item: MarketplaceItem,
-	_index: number,
 	selected: boolean,
+	width: number,
 ): React.ReactNode {
 	if (item.kind === "plugin") {
+		const fit = fitRow(
+			Math.max(1, width - PLUGIN_INDENT),
+			item.name,
+			PLUGIN_PREFIX,
+			[
+				{ text: item.version, tone: "muted" as const },
+				{ text: plural(item.skills.length, "skill"), tone: "muted" as const },
+				...(item.edited.length > 0
+					? [
+							{
+								text: `● ${plural(item.edited.length, "skill")} edited here`,
+								tone: "warning" as const,
+							},
+						]
+					: []),
+			],
+		);
 		return (
 			<SelectableRow selected={selected} indent={PLUGIN_INDENT}>
 				<ScopeSquares
@@ -55,31 +80,32 @@ function renderRow(
 					selected={selected}
 				/>
 				{item.expanded ? " ▼ " : " ▶ "}
-				<strong>{item.name}</strong>
-				{"  "}
-				<MetaText text={item.version} selected={selected} />
-				{"  "}
-				<MetaText
-					text={plural(item.skills.length, "skill")}
-					selected={selected}
-				/>
+				<strong>{fit.name}</strong>
+				{fit.secondary.map((p) => (
+					<React.Fragment key={p.text}>
+						{"  "}
+						<MetaText text={p.text} tone={p.tone} selected={selected} />
+					</React.Fragment>
+				))}
 			</SelectableRow>
 		);
 	}
 	const mark = skillMark(item.local);
+	const fit = fitRow(
+		Math.max(1, width - SKILL_INDENT),
+		item.skill,
+		0,
+		mark ? [{ text: `${mark.glyph} ${mark.words}`, tone: mark.tone }] : [],
+	);
 	return (
 		<SelectableRow selected={selected} indent={SKILL_INDENT}>
-			{item.skill}
-			{mark ? (
-				<>
+			{fit.name}
+			{fit.secondary.map((p) => (
+				<React.Fragment key={p.text}>
 					{"  "}
-					<MetaText
-						text={`${mark.glyph} ${mark.words}`}
-						tone={mark.tone}
-						selected={selected}
-					/>
-				</>
-			) : null}
+					<MetaText text={p.text} tone={p.tone} selected={selected} />
+				</React.Fragment>
+			))}
 		</SelectableRow>
 	);
 }
@@ -125,6 +151,8 @@ export function MarketplaceScreen({
 		publish: () => {
 			if (item?.kind === "skill" && item.local) {
 				void market.publish(item.skill, item.ref, name, item.local);
+			} else if (item?.kind === "plugin") {
+				void market.publishPlugin(item.ref, name);
 			}
 		},
 		add: () => {
@@ -167,7 +195,7 @@ export function MarketplaceScreen({
 
 	return (
 		<ScreenLayout
-			title={`magus market › ${name}`}
+			title={`magus edit › ${name}`}
 			subtitle={
 				market.data.status === "loading"
 					? "reading…"
@@ -186,7 +214,7 @@ export function MarketplaceScreen({
 				bindings: [...MARKETPLACE_KEYS, ...MARKETPLACE_APP_KEYS],
 				pinned: [MARKET_HELP],
 			}}
-			listPanel={
+			listPanel={(width: number) =>
 				failed ? (
 					<ErrorNotice
 						title={`Could not read ${name}.`}
@@ -200,6 +228,7 @@ export function MarketplaceScreen({
 							count={entry?.plugins.length ?? 0}
 							selected={false}
 							expandable={false}
+							width={width}
 						/>
 						{items.length === 0 && market.data.status !== "loading" ? (
 							<ToneLine tone="muted">
@@ -211,7 +240,9 @@ export function MarketplaceScreen({
 							<ScrollableList
 								items={items}
 								selectedIndex={index}
-								renderItem={renderRow}
+								renderItem={(it, _i, selected) =>
+									renderMarketplaceRow(it, selected, width)
+								}
 								maxHeight={Math.max(
 									1,
 									dimensions.listPanelHeight - HEADING_ROWS,

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

@@ -1,7 +1,9 @@
+import { displayPath } from "../../utils/display-path.js";
 import {
 	type MarketplacesItem,
 	freshnessTone,
 	freshnessWords,
+	localKindWords,
 	plural,
 } from "../adapters/marketAdapter.js";
 import {
@@ -22,12 +24,53 @@ import {
  */
 export function MarketplacesDetail({
 	item,
+	canAdd,
+	cwd,
 	note,
 }: {
 	item: MarketplacesItem | undefined;
+	/** Whether there is a company marketplace to add a local row to. */
+	canAdd: boolean;
+	/** The project, against which a local folder is shown. */
+	cwd: string;
 	note: string | undefined;
 }) {
-	if (!item) return null;
+	if (!item || item.kind === "local-heading") return null;
+	if (item.kind === "local") {
+		const local = item.item;
+		return (
+			<DetailSection title={local.name}>
+				<KeyValueLine label="kind" value={localKindWords(local)} />
+				<KeyValueLine
+					label="scope"
+					value={
+						<ScopeBadge scope={local.scope === "user" ? "USER" : "PROJECT"} />
+					}
+				/>
+				<KeyValueLine
+					label="folder"
+					value={<MetaText text={displayPath(local.path, cwd)} />}
+				/>
+				<ToneLine>
+					{local.kind === "plugin"
+						? "A plugin folder of your own, in no company marketplace."
+						: "A skill of your own, in no company plugin."}
+				</ToneLine>
+				{canAdd ? (
+					<ToneLine tone="muted">
+						{local.kind === "plugin"
+							? "a adds it to a company marketplace as a new plugin; the folder stays."
+							: "a adds it to a plugin of a company marketplace, or to a new one."}
+					</ToneLine>
+				) : (
+					<ToneLine tone="muted">
+						To add it, first create a company marketplace (c) or connect one
+						(o).
+					</ToneLine>
+				)}
+			</DetailSection>
+		);
+	}
 	if (item.kind === "create") {
 		return (
 			<DetailSection title="Create a company marketplace">
@@ -36,8 +79,8 @@ export function MarketplacesDetail({
 					to this machine at USER scope.
 				</ToneLine>
 				<ToneLine tone="muted">
-					Enter or c asks for the owner, the name and who can see it, then shows
-					what it will do.
+					Enter or c asks for the owner, the company name magus shows it by, the
+					repository name and who can see it, then shows what it will do.
 				</ToneLine>
 			</DetailSection>
 		);
@@ -55,10 +98,13 @@ export function MarketplacesDetail({
 			</DetailSection>
 		);
 	}
-	const { entry } = item;
+	const { entry, toPush } = item;
 	return (
 		<box flexDirection="column">
 			<DetailSection title={entry.name}>
+				{entry.company ? (
+					<KeyValueLine label="company" value={entry.company} />
+				) : null}
 				<KeyValueLine
 					label="repository"
 					value={<MetaText text={entry.repo} tone="info" />}
@@ -83,6 +129,16 @@ export function MarketplacesDetail({
 					</ToneLine>
 				) : null}
 			</DetailSection>
+			{toPush.length > 0 ? (
+				<DetailSection title="To push">
+					<ToneLine tone="warning">
+						● {toPush.join(", ")} — skills edited here
+					</ToneLine>
+					<ToneLine tone="muted">
+						Enter opens the marketplace; p on a plugin pushes a new version.
+					</ToneLine>
+				</DetailSection>
+			) : null}
 			{entry.plugins.length > 0 ? (
 				<DetailSection title="Plugins">
 					{entry.plugins.map((p) => (

package/src/ui/market/MarketplacesScreen.tsx

@@ -1,8 +1,12 @@
-import type React from "react";
+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";
@@ -18,6 +22,7 @@ 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,
@@ -31,37 +36,99 @@ import type { MarketState } from "./useMarketState.js";
 /** Rows above the list: the heading. */
 const HEADING_ROWS = 1;
 
-function renderRow(
+/** 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,
-	_index: number,
 	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={2}>
-				{item.kind === "create" ? "+ Create…" : "+ Connect…"}
+			<SelectableRow selected={selected} variant="action" indent={ROW_INDENT}>
+				{truncate(item.kind === "create" ? "+ Create…" : "+ Connect…", room)}
 			</SelectableRow>
 		);
 	}
-	const { entry } = item;
-	return (
-		<SelectableRow selected={selected} indent={2}>
-			<strong>{entry.name}</strong>
-			{"  "}
-			<MetaText text={entry.repo} tone="info" selected={selected} />
-			{"  "}
-			<MetaText
-				text={plural(entry.plugins.length, "plugin")}
-				selected={selected}
+	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} />
-			{entry.freshness === "stale" ? (
-				<>
-					{"  "}
-					<MetaText text="⚠ not current" tone="warning" selected={selected} />
-				</>
-			) : null}
+			<Secondary parts={fit.secondary} selected={selected} />
 		</SelectableRow>
 	);
 }
@@ -77,8 +144,15 @@ export function MarketplacesScreen({
 	const modal = useModal();
 	const dimensions = useDimensions();
 	const value = asyncValue(market.data);
-	const items = marketplacesItems(value?.marketplaces ?? []);
-	const index = Math.min(market.selected.marketplaces, items.length - 1);
+	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) =>
@@ -92,6 +166,10 @@ export function MarketplacesScreen({
 			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(),
@@ -99,7 +177,7 @@ export function MarketplacesScreen({
 			if (item?.kind === "marketplace") void market.remove(item.entry.name);
 		},
 		fetch: () => void market.fetch(),
-		move: (key) => select(index + moveDirection(key)),
+		move: (key) => select(nextSelectable(items, index, moveDirection(key))),
 	};
 	useKeyLayer("screen", true, (key) =>
 		runBindings(MARKETPLACES_KEYS, handlers, key),
@@ -122,13 +200,13 @@ export function MarketplacesScreen({
 
 	return (
 		<ScreenLayout
-			title="magus market"
+			title="magus edit"
 			subtitle={loading ? "reading…" : "company plugin marketplaces"}
 			keymap={{
 				bindings: [...MARKETPLACES_KEYS, ...MARKETPLACES_APP_KEYS],
 				pinned: [MARKET_HELP],
 			}}
-			listPanel={
+			listPanel={(width: number) =>
 				failed ? (
 					<ErrorNotice
 						title="Could not read the company marketplaces."
@@ -142,14 +220,21 @@ export function MarketplacesScreen({
 							count={count}
 							selected={false}
 							expandable={false}
+							width={width}
 						/>
 						<ScrollableList
 							items={items}
 							selectedIndex={index}
-							renderItem={renderRow}
+							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
+								it.kind === "marketplace"
+									? `m:${it.entry.name}`
+									: it.kind === "local"
+										? `l:${it.item.scope}:${it.item.name}`
+										: it.kind
 							}
 						/>
 					</box>
@@ -158,6 +243,8 @@ export function MarketplacesScreen({
 			detailPanel={
 				<MarketplacesDetail
 					item={item}
+					canAdd={count > 0}
+					cwd={market.cwd}
 					note={
 						item?.kind === "marketplace"
 							? market.notes[item.entry.name]
@@ -166,7 +253,11 @@ export function MarketplacesScreen({
 				/>
 			}
 			detailKey={
-				item?.kind === "marketplace" ? `m:${item.entry.name}` : item?.kind
+				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

@@ -3,6 +3,7 @@ import {
 	DetailSection,
 	KeyValueLine,
 	ScopeVersionLine,
+	ToneLine,
 } from "../components/primitives/index.js";
 
 const SCOPE_WORDS = [
@@ -12,7 +13,8 @@ const SCOPE_WORDS = [
 ] as const;
 
 /**
- * The detail panel for a company plugin's row: its version, skills and installs.
+ * 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
@@ -36,6 +38,15 @@ export function PluginDetail({
 					}
 				/>
 			</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

package/src/ui/market/marketKeymap.ts

@@ -33,6 +33,13 @@ export const MARKETPLACES_KEYS = [
 		"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"],
@@ -59,7 +66,13 @@ export const MARKETPLACE_KEYS = [
 		"Show or hide the plugin's skills",
 		90,
 	),
-	bind("publish", ["p"], "publish", "Publish this project's edits", 88),
+	bind(
+		"publish",
+		["p"],
+		"publish",
+		"Publish edits: the skill's, or on a plugin every edited skill as one new version",
+		88,
+	),
 	bind(
 		"add",
 		["a"],
@@ -134,6 +147,16 @@ export const MARKETPLACE_APP_KEYS = [
 
 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 = [
 	{
@@ -141,7 +164,10 @@ const MARKETPLACE_LEGEND = [
 		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" },
+	{
+		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" },
@@ -155,6 +181,7 @@ export function marketHelpSections(
 	const one: HelpSection = {
 		title: "Company marketplaces",
 		bindings: MARKETPLACES_KEYS,
+		legend: MARKETPLACES_LEGEND,
 	};
 	const two: HelpSection = {
 		title: "A marketplace",