magus-cli 7.13.0 → 7.14.1

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",

package/src/ui/market/useMarketState.ts

@@ -2,7 +2,8 @@
  * The market screens' state and actions.
  *
  * Reading is read-only: the overview (`marketOverview`), this project's skill
- * copies (`marketStatus`) and the installs (`installedVersionAt`)
+ * copies (`marketStatus`), the installs (`installedVersionAt`) and the
+ * skills and plugin folders here that no marketplace holds (`localItems`)
  * write nothing, so opening the screens changes nothing on the machine.
  *
  * Every change is a planner from the market services, shown in a confirm
@@ -14,13 +15,16 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { viewerLogin, viewerOrgs } from "../../services/github-cli.js";
+import { localItems } from "../../services/market-local.js";
 import {
+	planPluginAdd,
 	planPluginCreate,
 	planPluginDelete,
 } from "../../services/market-ops-plugin.js";
 import {
 	localSkillFolders,
 	marketStatus,
+	planPluginPublish,
 	planPublish,
 } from "../../services/market-ops-publish.js";
 import {
@@ -36,6 +40,8 @@ import {
 import {
 	type MarketOverviewEntry,
 	applyMarketPlan,
+	companyPluginNames,
+	companySkillNames,
 	errorResult,
 	marketFetch,
 	marketOverview,
@@ -44,6 +50,7 @@ import {
 import { installedVersionAt } from "../../services/market-publish.js";
 import type {
 	InstallScope,
+	LocalItem,
 	MarketResult,
 	PlanAnswer,
 	SkillStatusRow,
@@ -51,10 +58,11 @@ import type {
 import {
 	type ScopeVersions,
 	marketFailureReport,
+	plural,
 	resultNote,
 } from "../adapters/marketAdapter.js";
 import { useApp, useFailurePopup, useModal } from "../state/AppContext.js";
-import type { AsyncData } from "../state/types.js";
+import { type AsyncData, asyncValue } from "../state/types.js";
 
 export type MarketRoute =
 	| { screen: "marketplaces" }
@@ -66,6 +74,8 @@ export interface MarketData {
 	status: SkillStatusRow[];
 	/** Installed versions by `plugin@marketplace`. */
 	installs: Record<string, ScopeVersions>;
+	/** Skills and plugin folders here that no company marketplace holds. */
+	local: LocalItem[];
 }
 
 const SCOPES: readonly InstallScope[] = ["user", "project", "local"];
@@ -95,11 +105,16 @@ async function readInstalls(
 /** Everything the screens draw, read without writing anything. */
 async function readMarketData(cwd: string): Promise<MarketData> {
 	const marketplaces = await marketOverview();
-	const [status, installs] = await Promise.all([
+	const [status, installs, local] = await Promise.all([
 		marketStatus(undefined, cwd).then((r) => r.skills ?? []),
 		readInstalls(marketplaces, cwd),
+		localItems(
+			cwd,
+			companySkillNames(marketplaces),
+			companyPluginNames(marketplaces),
+		),
 	]);
-	return { marketplaces, status, installs };
+	return { marketplaces, status, installs, local };
 }
 
 /** What a confirmed action is, for its dialog and its failure popup. */
@@ -302,6 +317,14 @@ export function useMarketState() {
 			0,
 		);
 		if (!owner) return;
+		const company = (
+			await modal.input(
+				"Create a company marketplace",
+				'Company name (shown as "by <name>" in magus):',
+				owner,
+			)
+		)?.trim();
+		if (!company) return;
 		const repo = (
 			await modal.input(
 				"Create a company marketplace",
@@ -325,7 +348,7 @@ export function useMarketState() {
 				title: `Create ${owner}/${repo}?`,
 				subject: `${owner}/${repo}`,
 			},
-			() => planCreate({ repo: `${owner}/${repo}`, visibility }),
+			() => planCreate({ repo: `${owner}/${repo}`, visibility, company }),
 		);
 	}, [modal, runPlanned, showFailures]);
 
@@ -352,8 +375,124 @@ export function useMarketState() {
 		[cwd, runPlanned],
 	);
 
+	/**
+	 * Add a local skill or plugin folder to a company marketplace: pick the
+	 * marketplace (when there is more than one), then for a skill the plugin
+	 * it goes into, a new one included. One plan, one consent.
+	 */
+	const addLocal = useCallback(
+		async (item: LocalItem) => {
+			const marketplaces = asyncValue(data)?.marketplaces ?? [];
+			if (marketplaces.length === 0) {
+				await showFailures({
+					headline: `No company marketplace to add ${item.name} to`,
+					rows: [
+						{
+							subject: item.name,
+							reason: "this machine has no company marketplace yet",
+						},
+					],
+					fix: "Press c to create one, or o to connect one, then press a again",
+				});
+				return;
+			}
+			const title = `Add ${item.name} to a company marketplace`;
+			const marketplace =
+				marketplaces.length === 1
+					? marketplaces[0]?.name
+					: await modal.select(
+							title,
+							"Which marketplace?",
+							marketplaces.map((m) => ({
+								label: m.name,
+								value: m.name,
+								...(m.company ? { meta: `by ${m.company}` } : {}),
+							})),
+							0,
+						);
+			if (!marketplace) return;
+			if (item.kind === "plugin") {
+				await runPlanned(
+					{
+						title: `Add the plugin ${item.name} to ${marketplace}?`,
+						subject: item.name,
+						marketplace,
+					},
+					() => planPluginAdd({ path: item.path, to: marketplace }, cwd),
+				);
+				return;
+			}
+			const entry = marketplaces.find((m) => m.name === marketplace);
+			const NEW = "+new";
+			const choice = await modal.select(
+				title,
+				`Which plugin in ${marketplace}?`,
+				[
+					...(entry?.plugins ?? []).map((p) => ({
+						label: p.name,
+						value: p.name,
+						meta: plural(p.skills.length, "skill"),
+					})),
+					{ label: "+ New plugin", value: NEW },
+				],
+				0,
+			);
+			if (!choice) return;
+			let plugin = choice;
+			if (choice === NEW) {
+				const name = (
+					await modal.input(
+						`New plugin in ${marketplace}`,
+						`Plugin name (it is created with ${item.name} in it):`,
+						item.name,
+					)
+				)?.trim();
+				if (!name) return;
+				plugin = name;
+			}
+			const ref = `${plugin}@${marketplace}`;
+			await runPlanned(
+				{
+					title:
+						choice === NEW
+							? `Create ${ref} with ${item.name}?`
+							: `Add ${item.name} to ${ref}?`,
+					subject: item.name,
+					marketplace,
+				},
+				() =>
+					planSkillAdd(
+						{
+							skill: item.name,
+							plugin: ref,
+							from: item.scope === "user" ? "global" : "project",
+							keepLocal: false,
+							...(choice === NEW ? { createPlugin: true } : {}),
+						},
+						cwd,
+					),
+			);
+		},
+		[cwd, data, modal, runPlanned, showFailures],
+	);
+
 	// ─── Screen 2 actions ───────────────────────────────────────────────────
 
+	/** Push every skill of a plugin edited here, as one new version. */
+	const publishPlugin = useCallback(
+		async (ref: string, marketplace: string) => {
+			await runPlanned(
+				{
+					title: `Push a new version of ${ref}?`,
+					subject: ref,
+					marketplace,
+				},
+				() => planPluginPublish({ plugin: ref, keepLocal: false }, cwd),
+			);
+		},
+		[cwd, runPlanned],
+	);
+
 	const newPlugin = useCallback(
 		async (marketplace: string) => {
 			const name = (
@@ -541,6 +680,8 @@ export function useMarketState() {
 		create,
 		connect,
 		remove,
+		addLocal,
+		publishPlugin,
 		newPlugin,
 		deletePlugin,
 		addSkill,

package/src/utils/display-path.ts

@@ -0,0 +1,33 @@
+/**
+ * display-path.ts — a folder as a person reads it: relative to the project
+ * when it is inside it, `~/…` when it is under the home folder, else as is.
+ * For display only; JSON and every file operation keep the absolute path.
+ */
+
+import os from "node:os";
+import path from "node:path";
+
+/** `child` is `parent` itself or somewhere under it. */
+function within(parent: string, child: string): string | null {
+	const rel = path.relative(parent, child);
+	if (rel === "") return "";
+	if (rel.startsWith("..") || path.isAbsolute(rel)) return null;
+	return rel;
+}
+
+/**
+ * `abs` shortened for display: `.claude/skills/greet` inside `cwd`,
+ * `~/.claude/skills/team-tools` under the home folder, otherwise unchanged.
+ * The home folder is `$HOME` when set, as Claude Code and the shell read it.
+ */
+export function displayPath(
+	abs: string,
+	cwd: string,
+	home: string = process.env.HOME || os.homedir(),
+): string {
+	const inProject = within(path.resolve(cwd), path.resolve(abs));
+	if (inProject !== null) return inProject === "" ? "." : inProject;
+	const inHome = home ? within(path.resolve(home), path.resolve(abs)) : null;
+	if (inHome !== null) return inHome === "" ? "~" : `~/${inHome}`;
+	return abs;
+}