magus-cli 7.12.2 → 7.14.0

package/src/ui/components/primitives/index.ts

@@ -2,9 +2,14 @@ export { SELECTED_MARK, SelectableRow, rowLead } from "./SelectableRow.js";
 export { ListCategoryRow } from "./ListCategoryRow.js";
 export { SCOPE_OFF, SCOPE_ON, ScopeSquares } from "./ScopeSquares.js";
 export { ScopeDetail, ScopeDot, ScopeKeyChip } from "./ScopeDetail.js";
+export { ScopeBadge } from "./ScopeBadge.js";
+export type { ScopeWord } from "./ScopeBadge.js";
 export { ActionHints } from "./ActionHints.js";
 export type { Hint } from "./ActionHints.js";
 export { MetaText } from "./MetaText.js";
 export { KeyValueLine } from "./KeyValueLine.js";
 export { DetailSection } from "./DetailSection.js";
 export { ErrorNotice } from "./ErrorNotice.js";
+export { ToneLine } from "./ToneLine.js";
+export type { LineTone } from "./ToneLine.js";
+export { ScopeVersionLine } from "./ScopeVersionLine.js";

package/src/ui/keymap.ts

@@ -70,7 +70,7 @@ export type KeyHandler = (key: KeyPress) => unknown;
 /** A binding whose id is known to the type system. */
 type Bound<Id extends string> = KeyBinding & { readonly id: Id };
 
-function bind<const Id extends string>(
+export function bind<const Id extends string>(
 	id: Id,
 	keys: readonly string[],
 	label: string,
@@ -81,7 +81,7 @@ function bind<const Id extends string>(
 }
 
 /** Listed in help, never in a footer. */
-const HELP_ONLY = 0;
+export const HELP_ONLY = 0;
 
 // ─── Shared bindings ────────────────────────────────────────────────────────
 
@@ -755,11 +755,27 @@ export function footerHints(
 				: [];
 	const global =
 		owner === "input" ? [] : GLOBAL_BINDINGS.filter((b) => b !== HELP);
-	const pool = [...own, ...SCROLL_BINDINGS, ...global].filter(
-		(b) => b.priority > HELP_ONLY,
+	return fitHints(
+		[...own, ...SCROLL_BINDINGS, ...global],
+		owner === "input" ? [] : [HELP],
+		width,
 	);
+}
 
-	const pinned: KeyBinding[] = owner === "input" ? [] : [HELP];
+/**
+ * The hints of `bindings` that fit a footer `width` cells wide, `pinned` kept
+ * whenever they fit and drawn last. The rest are taken in descending priority
+ * until one does not fit, then shown in declaration order — the rule
+ * `footerHints` applies to a tab of the main TUI, for any list of bindings.
+ */
+export function fitHints(
+	bindings: readonly KeyBinding[],
+	pinned: readonly KeyBinding[],
+	width: number,
+): KeyBinding[] {
+	const pool = bindings.filter(
+		(b) => b.priority > HELP_ONLY && !pinned.includes(b),
+	);
 	if (footerWidth(pinned) > width) return [];
 
 	const kept = new Set<KeyBinding>(pinned);

package/src/ui/market/MarketApp.tsx

@@ -0,0 +1,59 @@
+import { ModalContainer } from "../components/modals/index.js";
+import { KeyRouter } from "../input/KeyRouter.js";
+import { AppProvider } from "../state/AppContext.js";
+import {
+	DimensionsProvider,
+	useDimensions,
+} from "../state/DimensionsContext.js";
+import { MarketplaceScreen } from "./MarketplaceScreen.js";
+import { MarketplacesScreen } from "./MarketplacesScreen.js";
+import { useMarketState } from "./useMarketState.js";
+
+/** The app frame's side padding, the same as the main TUI's. */
+const FRAME_PADDING = 1;
+
+function MarketContent({ onExit }: { onExit: () => void }) {
+	const market = useMarketState();
+	const dimensions = useDimensions();
+	const { route } = market;
+
+	return (
+		<box flexDirection="column" height={dimensions.terminalHeight}>
+			<box
+				flexDirection="column"
+				height={dimensions.contentHeight}
+				paddingLeft={FRAME_PADDING}
+				paddingRight={FRAME_PADDING}
+			>
+				{route.screen === "marketplace" ? (
+					<MarketplaceScreen
+						market={market}
+						name={route.name}
+						onExit={onExit}
+					/>
+				) : (
+					<MarketplacesScreen market={market} onExit={onExit} />
+				)}
+			</box>
+			<ModalContainer />
+		</box>
+	);
+}
+
+/**
+ * The market TUI's root: the main TUI's modal and progress state, key router
+ * and dimensions, around two screens of its own. No startup questions and
+ * nothing added on open — the screens read, and change only what a confirmed
+ * plan says.
+ */
+export function MarketApp({ onExit }: { onExit: () => void }) {
+	return (
+		<AppProvider>
+			<KeyRouter>
+				<DimensionsProvider>
+					<MarketContent onExit={onExit} />
+				</DimensionsProvider>
+			</KeyRouter>
+		</AppProvider>
+	);
+}

package/src/ui/market/MarketplaceScreen.tsx

@@ -0,0 +1,280 @@
+import React from "react";
+import {
+	type MarketplaceItem,
+	fitRow,
+	freshnessWords,
+	marketplaceItems,
+	plural,
+	skillMark,
+} from "../adapters/marketAdapter.js";
+import { ScrollableList } from "../components/ScrollableList.js";
+import { ScreenLayout } from "../components/layout/index.js";
+import {
+	DetailSection,
+	ErrorNotice,
+	ListCategoryRow,
+	MetaText,
+	ScopeSquares,
+	SelectableRow,
+	ToneLine,
+} 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 { PluginDetail } from "./PluginDetail.snowflake.js";
+import { SkillDetail } from "./SkillDetail.snowflake.js";
+import {
+	MARKETPLACE_APP_KEYS,
+	MARKETPLACE_KEYS,
+	MARKET_HELP,
+	type MarketplaceKeyId,
+	marketHelpSections,
+} from "./marketKeymap.js";
+import type { MarketState } from "./useMarketState.js";
+
+/** Rows above the list: the heading. */
+const HEADING_ROWS = 1;
+/** Cells a skill row is indented under its plugin. */
+const SKILL_INDENT = 6;
+/** Cells a plugin row starts in. */
+const PLUGIN_INDENT = 2;
+
+/** 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,
+	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
+					user={item.installs.user !== null}
+					project={item.installs.project !== null}
+					local={item.installs.local !== null}
+					selected={selected}
+				/>
+				{item.expanded ? " ▼ " : " ▶ "}
+				<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}>
+			{fit.name}
+			{fit.secondary.map((p) => (
+				<React.Fragment key={p.text}>
+					{"  "}
+					<MetaText text={p.text} tone={p.tone} selected={selected} />
+				</React.Fragment>
+			))}
+		</SelectableRow>
+	);
+}
+
+/** Screen 2: one marketplace's plugins, each opening to its skill rows. */
+export function MarketplaceScreen({
+	market,
+	name,
+	onExit,
+}: {
+	market: MarketState;
+	name: string;
+	onExit: () => void;
+}) {
+	const modal = useModal();
+	const dimensions = useDimensions();
+	const value = asyncValue(market.data);
+	const entry = value?.marketplaces.find((m) => m.name === name);
+	const items = entry
+		? marketplaceItems(
+				entry,
+				value?.installs ?? {},
+				value?.status ?? [],
+				market.expanded,
+			)
+		: [];
+	const index = Math.max(
+		0,
+		Math.min(market.selected.marketplace, items.length - 1),
+	);
+	const item = items[index];
+
+	const select = (next: number) =>
+		market.setSelected((s) => ({
+			...s,
+			marketplace: Math.max(0, Math.min(items.length - 1, next)),
+		}));
+
+	const handlers: Record<MarketplaceKeyId, KeyHandler> = {
+		expand: () => {
+			if (item?.kind === "plugin") market.toggle(item.ref);
+		},
+		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: () => {
+			if (item) void market.addSkill(item.ref, name);
+		},
+		edit: () => {
+			if (item?.kind === "skill") {
+				void market.editSkill(item.skill, item.ref, name);
+			}
+		},
+		"remove-skill": () => {
+			if (item?.kind === "skill") {
+				void market.removeSkill(item.skill, item.ref, name);
+			}
+		},
+		new: () => void market.newPlugin(name),
+		delete: () => {
+			if (item) void market.deletePlugin(item.ref, name);
+		},
+		fetch: () => void market.fetchOne(name),
+		move: (key) => select(index + moveDirection(key)),
+	};
+	useKeyLayer("screen", true, (key) =>
+		runBindings(MARKETPLACE_KEYS, handlers, key),
+	);
+	useKeyLayer("global", true, (key) =>
+		runBindings(
+			MARKETPLACE_APP_KEYS,
+			{
+				help: () => modal.helpSections(marketHelpSections("marketplace")),
+				quit: onExit,
+				back: market.back,
+			},
+			key,
+		),
+	);
+
+	const failed = market.data.status === "error" ? market.data.error : null;
+	const note = market.notes[name];
+
+	return (
+		<ScreenLayout
+			title={`magus edit › ${name}`}
+			subtitle={
+				market.data.status === "loading"
+					? "reading…"
+					: entry
+						? `${entry.repo} · ${freshnessWords(entry.freshness)}`
+						: undefined
+			}
+			notice={
+				entry?.freshness === "stale" ? (
+					<ToneLine tone="warning">
+						⚠ {entry.reason} — r fetches from GitHub
+					</ToneLine>
+				) : undefined
+			}
+			keymap={{
+				bindings: [...MARKETPLACE_KEYS, ...MARKETPLACE_APP_KEYS],
+				pinned: [MARKET_HELP],
+			}}
+			listPanel={(width: number) =>
+				failed ? (
+					<ErrorNotice
+						title={`Could not read ${name}.`}
+						detail={failed.message}
+						hint="r fetches from GitHub and reads it again."
+					/>
+				) : (
+					<box flexDirection="column">
+						<ListCategoryRow
+							title="Plugins"
+							count={entry?.plugins.length ?? 0}
+							selected={false}
+							expandable={false}
+							width={width}
+						/>
+						{items.length === 0 && market.data.status !== "loading" ? (
+							<ToneLine tone="muted">
+								{entry
+									? "  No plugins yet — n creates one."
+									: `  ${name} is no longer a company marketplace here.`}
+							</ToneLine>
+						) : (
+							<ScrollableList
+								items={items}
+								selectedIndex={index}
+								renderItem={(it, _i, selected) =>
+									renderMarketplaceRow(it, selected, width)
+								}
+								maxHeight={Math.max(
+									1,
+									dimensions.listPanelHeight - HEADING_ROWS,
+								)}
+								getKey={(it) =>
+									it.kind === "plugin"
+										? `p:${it.ref}`
+										: `s:${it.ref}:${it.skill}`
+								}
+							/>
+						)}
+					</box>
+				)
+			}
+			detailPanel={
+				<box flexDirection="column">
+					{item?.kind === "plugin" ? <PluginDetail item={item} /> : null}
+					{item?.kind === "skill" ? <SkillDetail item={item} /> : null}
+					{note ? (
+						<DetailSection title="Last change">
+							<ToneLine>{note}</ToneLine>
+						</DetailSection>
+					) : null}
+				</box>
+			}
+			detailKey={
+				item
+					? item.kind === "plugin"
+						? item.ref
+						: `${item.ref}:${item.skill}`
+					: undefined
+			}
+		/>
+	);
+}

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

@@ -0,0 +1,161 @@
+import { displayPath } from "../../utils/display-path.js";
+import {
+	type MarketplacesItem,
+	freshnessTone,
+	freshnessWords,
+	localKindWords,
+	plural,
+} from "../adapters/marketAdapter.js";
+import {
+	DetailSection,
+	KeyValueLine,
+	MetaText,
+	ScopeBadge,
+	ToneLine,
+} from "../components/primitives/index.js";
+
+/**
+ * The detail panel for the marketplaces list: what Create and Connect do, or
+ * one company marketplace's repository, freshness and plugins.
+ *
+ * A snowflake: the Marketplaces 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 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 || 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">
+				<ToneLine>
+					Makes a new repository on GitHub for your team's plugins, and adds it
+					to this machine at USER scope.
+				</ToneLine>
+				<ToneLine tone="muted">
+					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>
+		);
+	}
+	if (item.kind === "connect") {
+		return (
+			<DetailSection title="Connect a company marketplace">
+				<ToneLine>
+					Uses a repository your team already has, from GitHub, a git URL or a
+					folder, and adds it to this machine at USER scope.
+				</ToneLine>
+				<ToneLine tone="muted">
+					Enter or o asks for the repository, then shows what it will do.
+				</ToneLine>
+			</DetailSection>
+		);
+	}
+	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" />}
+				/>
+				<KeyValueLine label="scope" value={<ScopeBadge scope="USER" />} />
+				<KeyValueLine
+					label="plugins"
+					value={plural(entry.plugins.length, "plugin")}
+				/>
+				<KeyValueLine
+					label="GitHub"
+					value={
+						<MetaText
+							text={freshnessWords(entry.freshness)}
+							tone={freshnessTone(entry.freshness)}
+						/>
+					}
+				/>
+				{entry.freshness === "stale" ? (
+					<ToneLine tone="muted">
+						{entry.reason} — r fetches from GitHub
+					</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) => (
+						<ToneLine key={p.name}>
+							{p.name}{" "}
+							<MetaText
+								text={`${p.version} · ${plural(p.skills.length, "skill")}`}
+							/>
+						</ToneLine>
+					))}
+				</DetailSection>
+			) : null}
+			{note ? (
+				<DetailSection title="Last change">
+					<ToneLine>{note}</ToneLine>
+				</DetailSection>
+			) : null}
+		</box>
+	);
+}