@agimon-ai/po-template-advanced 0.0.0-alpha.21 → 0.0.0-alpha.22

package/dist/extensions/native.mjs

@@ -3,10 +3,23 @@ import { View } from "react-native-unistyles/components/native/View";
 import { Text } from "react-native-unistyles/components/native/Text";
 import { ScrollView } from "react-native-unistyles/components/native/ScrollView";
 import { Pressable } from "react-native-unistyles/components/native/Pressable";
-import { ActivityIcon, AlertIcon, Badge, BranchIcon, Button, EmptyState, FolderIcon, ForkIcon, Input, KebabIcon, Label, ListRow, PlusIcon, Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle, Spinner, UsersIcon, fontOf } from "@agimon-ai/po-native-components";
+import { ActivityIcon, AlertIcon, Badge, BranchIcon, Button, CheckIcon, EditIcon, EmptyState, FolderIcon, ForkIcon, Input, KebabIcon, Label, ListRow, PlusIcon, Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle, Spinner, TrashIcon, UsersIcon, fontOf } from "@agimon-ai/po-native-components";
 import { useEffect, useState } from "react";
 import { StyleSheet } from "react-native-unistyles";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+/** Every group some session uses, in rail order, with the other sessions in it. */
+function sessionGroupOptions(sessions, editedId, extra = []) {
+	return [.../* @__PURE__ */ new Set([...sessions.flatMap((session) => session.groups ?? []), ...extra])].map((name) => ({
+		name,
+		members: sessions.filter((session) => session.id !== editedId && session.groups?.includes(name) === true).map((session) => session.name || "Untitled")
+	}));
+}
+/** Why a typed name cannot become a group, or undefined when it can. */
+function createProblem(name, count) {
+	if (name.length > 32) return `group names are at most ${String(32)} characters.`;
+	if (count >= 8) return `a session can belong to at most ${String(8)} groups.`;
+}
+//#endregion
 //#region src/extensions/(frontend)/template/_components/AdvancedSessionMenus.native.tsx
 function Items({ items }) {
 	return /* @__PURE__ */ jsx(View, {
@@ -31,8 +44,8 @@ function Items({ items }) {
 		}, item.label))
 	});
 }
-/** A session card's ⋮: the cockpit's rename, resume, restart and remove, with remove confirmed first. */
-function SessionMenuSheet({ session, actions, onClose }) {
+/** A session card's ⋮: the cockpit's rename, groups, resume, restart and remove, with remove confirmed first. */
+function SessionMenuSheet({ session, actions, onGroups, onClose }) {
 	const [step, setStep] = useState("menu");
 	const [draft, setDraft] = useState("");
 	const [busy, setBusy] = useState(false);
@@ -125,6 +138,14 @@ function SessionMenuSheet({ session, actions, onClose }) {
 						setStep("rename");
 					}
 				},
+				...onGroups ? [{
+					label: "Groups",
+					hint: "Sessions in a group can message each other",
+					onPress: () => {
+						close();
+						onGroups(session);
+					}
+				}] : [],
 				{
 					label: "Resume",
 					hint: "Open an earlier conversation in this session",
@@ -239,6 +260,317 @@ function WorkspaceMenuSheet({ workspace, actions, onClose }) {
 		})] }) })
 	});
 }
+/**
+* The cockpit's groups dialog as a sheet. Rows check groups on and off and the typed name can
+* become a new one; rename and delete act on every session in the group at once, the checks wait for Save.
+*/
+function SessionGroupsSheet({ session, sessions, actions, onClose }) {
+	const [forId, setForId] = useState(null);
+	const [value, setValue] = useState([]);
+	const [query, setQuery] = useState("");
+	const [renaming, setRenaming] = useState();
+	const [deleting, setDeleting] = useState();
+	const [error, setError] = useState("");
+	const [busy, setBusy] = useState(false);
+	if ((session?.id ?? null) !== forId) {
+		setForId(session?.id ?? null);
+		setValue([...session?.groups ?? []]);
+		setQuery("");
+		setRenaming(void 0);
+		setDeleting(void 0);
+		setError("");
+	}
+	const close = () => {
+		if (!busy) onClose();
+	};
+	const rowCancel = () => {
+		setRenaming(void 0);
+		setDeleting(void 0);
+	};
+	const run = async (work, done) => {
+		setBusy(true);
+		setError("");
+		const result = await work();
+		setBusy(false);
+		if (result === void 0) done();
+		else setError(result.error);
+	};
+	const typed = query.trim();
+	const options = session === null ? [] : sessionGroupOptions(sessions, session.id, value);
+	const shown = options.filter((group) => group.name.includes(typed));
+	const canCreate = typed !== "" && !options.some((group) => group.name === typed);
+	const problem = canCreate ? createProblem(typed, value.length) : void 0;
+	const toggle = (group) => {
+		setError("");
+		if (value.includes(group)) setValue(value.filter((name) => name !== group));
+		else if (value.length >= 8) setError(createProblem("", value.length) ?? "");
+		else setValue([...value, group]);
+	};
+	const create = () => {
+		if (!canCreate || problem !== void 0) return;
+		setValue([...value, typed]);
+		setQuery("");
+	};
+	const renameConfirm = () => {
+		if (renaming === void 0) return;
+		const to = renaming.draft.trim();
+		if (to === "" || to === renaming.group) return rowCancel();
+		run(() => actions.renameGroup(renaming.group, to), () => {
+			setValue((current) => [...new Set(current.map((name) => name === renaming.group ? to : name))]);
+			rowCancel();
+		});
+	};
+	const deleteConfirm = () => {
+		if (deleting === void 0) return;
+		run(() => actions.deleteGroup(deleting), () => {
+			setValue((current) => current.filter((name) => name !== deleting));
+			rowCancel();
+		});
+	};
+	return /* @__PURE__ */ jsx(Sheet, {
+		open: session !== null,
+		onOpenChange: (open) => !open && close(),
+		children: /* @__PURE__ */ jsx(SheetContent, { children: session === null ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: "Session groups" }) }), /* @__PURE__ */ jsxs(SheetBody, {
+			style: styles$1.body,
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					style: styles$1.meta,
+					children: "Sessions that share a group can message each other."
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					value: query,
+					onChangeText: setQuery,
+					placeholder: value.length === 0 ? "Find or create a group" : "Add another",
+					autoCapitalize: "none",
+					autoCorrect: false,
+					returnKeyType: "done",
+					onSubmitEditing: () => {
+						if (canCreate) create();
+						else if (shown[0] !== void 0) {
+							toggle(shown[0].name);
+							setQuery("");
+						}
+					},
+					accessibilityLabel: "Find or create a group"
+				}),
+				shown.length > 0 || canCreate ? /* @__PURE__ */ jsxs(View, {
+					style: styles$1.list,
+					children: [shown.map((group, index) => {
+						const on = value.includes(group.name);
+						const total = group.members.length + (on ? 1 : 0);
+						const reach = total === 1 ? "its one session" : `all ${String(total)} sessions`;
+						const edge = index > 0 && styles$1.divider;
+						if (renaming?.group === group.name) return /* @__PURE__ */ jsxs(View, {
+							style: [styles$1.rowEdit, edge],
+							children: [
+								/* @__PURE__ */ jsx(Input, {
+									value: renaming.draft,
+									onChangeText: (draft) => setRenaming({
+										...renaming,
+										draft
+									}),
+									autoFocus: true,
+									autoCapitalize: "none",
+									autoCorrect: false,
+									onSubmitEditing: renameConfirm,
+									accessibilityLabel: `Rename ${group.name}`
+								}),
+								/* @__PURE__ */ jsxs(Text, {
+									style: styles$1.meta,
+									children: [
+										"Renames it on ",
+										reach,
+										"."
+									]
+								}),
+								/* @__PURE__ */ jsxs(View, {
+									style: styles$1.rowActions,
+									children: [/* @__PURE__ */ jsx(Button, {
+										variant: "ghost",
+										size: "sm",
+										disabled: busy,
+										onPress: rowCancel,
+										children: "Cancel"
+									}), /* @__PURE__ */ jsx(Button, {
+										variant: "outline",
+										size: "sm",
+										disabled: renaming.draft.trim() === "",
+										loading: busy,
+										loadingLabel: "Renaming",
+										onPress: renameConfirm,
+										children: "Rename"
+									})]
+								})
+							]
+						}, group.name);
+						if (deleting === group.name) return /* @__PURE__ */ jsxs(View, {
+							style: [styles$1.rowEdit, edge],
+							children: [/* @__PURE__ */ jsxs(Text, {
+								style: styles$1.text,
+								children: [
+									"Remove ",
+									/* @__PURE__ */ jsx(Text, {
+										style: styles$1.strong,
+										children: group.name
+									}),
+									" from ",
+									reach,
+									"? They can no longer message through it."
+								]
+							}), /* @__PURE__ */ jsxs(View, {
+								style: styles$1.rowActions,
+								children: [/* @__PURE__ */ jsx(Button, {
+									variant: "ghost",
+									size: "sm",
+									disabled: busy,
+									onPress: rowCancel,
+									children: "Cancel"
+								}), /* @__PURE__ */ jsx(Button, {
+									variant: "danger",
+									size: "sm",
+									loading: busy,
+									loadingLabel: "Deleting",
+									onPress: deleteConfirm,
+									children: "Delete"
+								})]
+							})]
+						}, group.name);
+						return /* @__PURE__ */ jsx(ListRow, {
+							title: group.name,
+							description: group.members.length === 0 ? "No other sessions yet" : group.members.join(", "),
+							selected: on,
+							leading: /* @__PURE__ */ jsx(View, {
+								style: styles$1.check,
+								children: on ? /* @__PURE__ */ jsx(CheckIcon, {
+									size: 16,
+									color: "green"
+								}) : null
+							}),
+							trailing: /* @__PURE__ */ jsxs(View, {
+								style: styles$1.rowActions,
+								children: [/* @__PURE__ */ jsx(Button, {
+									variant: "ghost",
+									size: "icon",
+									accessibilityLabel: `Rename ${group.name}`,
+									onPress: () => {
+										setDeleting(void 0);
+										setRenaming({
+											group: group.name,
+											draft: group.name
+										});
+									},
+									children: /* @__PURE__ */ jsx(EditIcon, {
+										size: 16,
+										color: "dim"
+									})
+								}), /* @__PURE__ */ jsx(Button, {
+									variant: "ghost",
+									size: "icon",
+									accessibilityLabel: `Delete ${group.name}`,
+									onPress: () => {
+										setRenaming(void 0);
+										setDeleting(group.name);
+									},
+									children: /* @__PURE__ */ jsx(TrashIcon, {
+										size: 16,
+										color: "dim"
+									})
+								})]
+							}),
+							disclosure: false,
+							onPress: () => toggle(group.name),
+							style: edge
+						}, group.name);
+					}), canCreate ? /* @__PURE__ */ jsx(ListRow, {
+						title: /* @__PURE__ */ jsxs(Text, {
+							style: styles$1.create(problem === void 0),
+							numberOfLines: 1,
+							children: [
+								"Create group “",
+								typed,
+								"”"
+							]
+						}),
+						description: problem === void 0 ? void 0 : /* @__PURE__ */ jsx(Text, {
+							style: styles$1.error,
+							children: problem
+						}),
+						leading: /* @__PURE__ */ jsx(PlusIcon, {
+							size: 16,
+							color: problem === void 0 ? "magenta" : "faint"
+						}),
+						disabled: problem !== void 0,
+						disclosure: false,
+						onPress: create,
+						style: shown.length > 0 && styles$1.divider
+					}) : null]
+				}) : null,
+				/* @__PURE__ */ jsxs(Text, {
+					style: styles$1.meta,
+					children: [
+						value.length,
+						" of ",
+						8,
+						" groups"
+					]
+				}),
+				error ? /* @__PURE__ */ jsx(Text, {
+					style: styles$1.error,
+					accessibilityRole: "alert",
+					children: error
+				}) : null,
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					size: "lg",
+					loading: busy && renaming === void 0 && deleting === void 0,
+					loadingLabel: "Saving",
+					disabled: busy,
+					onPress: () => void run(() => actions.setSessionGroups(session.id, value), onClose),
+					children: "Save"
+				})
+			]
+		})] }) })
+	});
+}
+/** A pending setup's ⋮: it has no runtime, so removing it is the only action, as in the cockpit. */
+function SetupMenuSheet({ target, removePendingSetup, onClose }) {
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState("");
+	const close = () => {
+		if (busy) return;
+		setError("");
+		onClose();
+	};
+	const remove = async () => {
+		if (target === null) return;
+		setBusy(true);
+		setError("");
+		const result = await removePendingSetup(target.sessionId, target.setup.id);
+		setBusy(false);
+		if (result === void 0) onClose();
+		else setError(result.error);
+	};
+	return /* @__PURE__ */ jsx(Sheet, {
+		open: target !== null,
+		onOpenChange: (open) => !open && close(),
+		children: /* @__PURE__ */ jsx(SheetContent, { children: target === null ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, {
+			numberOfLines: 1,
+			children: target.setup.name
+		}) }), /* @__PURE__ */ jsxs(SheetBody, {
+			style: styles$1.body,
+			children: [/* @__PURE__ */ jsx(Items, { items: [{
+				label: busy ? "Removing…" : "Remove setup",
+				danger: true,
+				disabled: busy,
+				onPress: () => void remove()
+			}] }), error ? /* @__PURE__ */ jsx(Text, {
+				style: styles$1.error,
+				accessibilityRole: "alert",
+				children: error
+			}) : null]
+		})] }) })
+	});
+}
 const SUGGESTION_DEBOUNCE_MS = 120;
 const TRAILING_SEPARATORS = /\/+$/u;
 function folderName(path) {
@@ -521,6 +853,24 @@ const styles$1 = StyleSheet.create((theme) => {
 			paddingBottom: theme.spacing(2),
 			uni__dependencies: [0]
 		},
+		rowEdit: {
+			gap: theme.spacing(2),
+			paddingHorizontal: theme.spacing(4),
+			paddingVertical: theme.spacing(3),
+			uni__dependencies: [0]
+		},
+		rowActions: {
+			flexDirection: "row",
+			alignItems: "center",
+			justifyContent: "flex-end",
+			gap: theme.spacing(1),
+			uni__dependencies: [0]
+		},
+		check: {
+			width: 16,
+			alignItems: "center"
+		},
+		create: (enabled) => text("base", enabled ? theme.colors.magenta : theme.colors.faint),
 		pressed: {
 			backgroundColor: theme.colors["tint-green"],
 			uni__dependencies: [0]
@@ -572,7 +922,7 @@ function IconButton({ label, onPress, children }) {
 		children
 	});
 }
-function SessionCard({ session, onOpen, onMenu }) {
+function SessionCard({ session, onOpen, onMenu, onSetupMenu }) {
 	const tone = statusTone(session.status);
 	const name = session.name || "Untitled";
 	const markColor = session.active ? "green" : "faint";
@@ -690,10 +1040,20 @@ function SessionCard({ session, onOpen, onMenu }) {
 	}), session.pendingSetups.map((setup) => /* @__PURE__ */ jsxs(View, {
 		style: styles.setup,
 		children: [
-			/* @__PURE__ */ jsx(Text, {
-				style: styles.name,
-				numberOfLines: 1,
-				children: setup.name
+			/* @__PURE__ */ jsxs(View, {
+				style: styles.setupHead,
+				children: [/* @__PURE__ */ jsx(Text, {
+					style: [styles.name, styles.setupName],
+					numberOfLines: 1,
+					children: setup.name
+				}), onSetupMenu ? /* @__PURE__ */ jsx(IconButton, {
+					label: `${setup.name} setup actions`,
+					onPress: () => onSetupMenu(setup),
+					children: /* @__PURE__ */ jsx(KebabIcon, {
+						size: 16,
+						color: "dim"
+					})
+				}) : null]
 			}),
 			/* @__PURE__ */ jsx(Text, {
 				style: styles.setupStatus(setup.failed),
@@ -707,7 +1067,7 @@ function SessionCard({ session, onOpen, onMenu }) {
 		]
 	}, setup.id))] });
 }
-function WorkspaceGroup({ workspace, onOpen, actions, onSessionMenu, onWorkspaceMenu }) {
+function WorkspaceGroup({ workspace, onOpen, actions, onSessionMenu, onSetupMenu, onWorkspaceMenu }) {
 	return /* @__PURE__ */ jsxs(View, {
 		style: styles.group,
 		children: [
@@ -759,7 +1119,8 @@ function WorkspaceGroup({ workspace, onOpen, actions, onSessionMenu, onWorkspace
 			}) : workspace.sessions.map((session) => /* @__PURE__ */ jsx(SessionCard, {
 				session,
 				onOpen,
-				onMenu: onSessionMenu
+				onMenu: onSessionMenu,
+				...onSetupMenu ? { onSetupMenu: (setup) => onSetupMenu(session.id, setup) } : {}
 			}, session.id))
 		]
 	});
@@ -793,6 +1154,8 @@ function NoWorkspaces({ actions }) {
 function AdvancedSessions({ workspaces, openSession, actions }) {
 	const [sessionMenu, setSessionMenu] = useState(null);
 	const [workspaceMenu, setWorkspaceMenu] = useState(null);
+	const [groupsFor, setGroupsFor] = useState(null);
+	const [setupMenu, setSetupMenu] = useState(null);
 	if (workspaces.length === 0) {
 		const { addWorkspace, searchDirectories, listDirectory } = actions;
 		return addWorkspace && searchDirectories && listDirectory ? /* @__PURE__ */ jsx(NoWorkspaces, { actions: {
@@ -808,6 +1171,12 @@ function AdvancedSessions({ workspaces, openSession, actions }) {
 		});
 	}
 	const sessions = workspaces.flatMap((workspace) => workspace.sessions);
+	const { setSessionGroups, renameGroup, deleteGroup, removePendingSetup } = actions;
+	const groupActions = setSessionGroups && renameGroup && deleteGroup ? {
+		setSessionGroups,
+		renameGroup,
+		deleteGroup
+	} : void 0;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx(ScrollView, {
 			style: styles.screen,
@@ -818,19 +1187,35 @@ function AdvancedSessions({ workspaces, openSession, actions }) {
 				onOpen: openSession,
 				actions,
 				onSessionMenu: (session) => setSessionMenu(session.id),
+				...removePendingSetup ? { onSetupMenu: (sessionId, setup) => setSetupMenu({
+					sessionId,
+					setup
+				}) } : {},
 				onWorkspaceMenu: (entry) => setWorkspaceMenu(entry.id)
 			}, workspace.id))
 		}),
 		/* @__PURE__ */ jsx(SessionMenuSheet, {
 			session: sessions.find((session) => session.id === sessionMenu) ?? null,
 			actions,
+			...groupActions ? { onGroups: (session) => setGroupsFor(session.id) } : {},
 			onClose: () => setSessionMenu(null)
 		}),
 		/* @__PURE__ */ jsx(WorkspaceMenuSheet, {
 			workspace: workspaces.find((workspace) => workspace.id === workspaceMenu) ?? null,
 			actions,
 			onClose: () => setWorkspaceMenu(null)
-		})
+		}),
+		groupActions ? /* @__PURE__ */ jsx(SessionGroupsSheet, {
+			session: sessions.find((session) => session.id === groupsFor) ?? null,
+			sessions,
+			actions: groupActions,
+			onClose: () => setGroupsFor(null)
+		}) : null,
+		removePendingSetup ? /* @__PURE__ */ jsx(SetupMenuSheet, {
+			target: setupMenu,
+			removePendingSetup,
+			onClose: () => setSetupMenu(null)
+		}) : null
 	] });
 }
 const styles = StyleSheet.create((theme) => {
@@ -1027,6 +1412,14 @@ const styles = StyleSheet.create((theme) => {
 			uni__dependencies: [0]
 		},
 		setupStatus: (failed) => text("sm", failed ? theme.colors.red : theme.colors.dim),
+		setupHead: {
+			flexDirection: "row",
+			alignItems: "center",
+			gap: theme.spacing(2),
+			marginVertical: -theme.spacing(2),
+			uni__dependencies: [0]
+		},
+		setupName: { flex: 1 },
 		recovery: text("sm", theme.colors.dim),
 		error: text("sm", theme.colors.red)
 	};