@agimon-ai/po-template-advanced 0.0.0-alpha.1 → 0.0.0-alpha.3

package/dist/extensions/native.mjs

@@ -3,9 +3,308 @@ 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 { AlertIcon, BranchIcon, EmptyState, FolderIcon, Spinner, fontOf } from "@agimon-ai/po-native-components";
+import { AlertIcon, Badge, BranchIcon, Button, EmptyState, FolderIcon, Input, KebabIcon, PlusIcon, Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle, Spinner, UsersIcon, fontOf } from "@agimon-ai/po-native-components";
+import { useState } from "react";
 import { StyleSheet } from "react-native-unistyles";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/extensions/(frontend)/template/_components/AdvancedSessionMenus.native.tsx
+function Items({ items }) {
+	return /* @__PURE__ */ jsx(View, {
+		style: styles$1.list,
+		children: items.map((item, index) => /* @__PURE__ */ jsxs(Pressable, {
+			accessibilityRole: "button",
+			accessibilityState: { disabled: item.disabled === true },
+			disabled: item.disabled,
+			onPress: item.onPress,
+			style: ({ pressed }) => [
+				styles$1.item,
+				index > 0 && styles$1.divider,
+				pressed && styles$1.pressed
+			],
+			children: [/* @__PURE__ */ jsx(Text, {
+				style: styles$1.itemLabel(item.danger === true, item.disabled === true),
+				children: item.label
+			}), item.hint ? /* @__PURE__ */ jsx(Text, {
+				style: styles$1.meta,
+				children: item.hint
+			}) : null]
+		}, item.label))
+	});
+}
+/** A session card's ⋮: the cockpit's rename, resume, restart and remove, with remove confirmed first. */
+function SessionMenuSheet({ session, actions, onClose }) {
+	const [step, setStep] = useState("menu");
+	const [draft, setDraft] = useState("");
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState("");
+	const close = () => {
+		if (busy) return;
+		setStep("menu");
+		setError("");
+		onClose();
+	};
+	const name = session?.name || "Untitled";
+	const remove = async () => {
+		if (session === null) return;
+		setBusy(true);
+		setError("");
+		const result = await actions.removeSession(session.id);
+		setBusy(false);
+		if (result !== void 0) {
+			setError(result.error);
+			return;
+		}
+		setStep("menu");
+		onClose();
+	};
+	return /* @__PURE__ */ jsx(Sheet, {
+		open: session !== null,
+		onOpenChange: (open) => !open && close(),
+		children: /* @__PURE__ */ jsx(SheetContent, { children: session === null ? null : step === "rename" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: "Rename session" }) }), /* @__PURE__ */ jsxs(SheetBody, {
+			style: styles$1.body,
+			children: [/* @__PURE__ */ jsx(Input, {
+				value: draft,
+				onChangeText: setDraft,
+				autoFocus: true,
+				accessibilityLabel: "Session name"
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				size: "lg",
+				disabled: draft.trim() === "",
+				onPress: () => {
+					actions.renameSession(session.id, draft);
+					close();
+				},
+				children: "Rename"
+			})]
+		})] }) : step === "confirm" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: "Remove session" }) }), /* @__PURE__ */ jsxs(SheetBody, {
+			style: styles$1.body,
+			children: [
+				/* @__PURE__ */ jsxs(Text, {
+					style: styles$1.text,
+					children: [
+						"This stops ",
+						/* @__PURE__ */ jsx(Text, {
+							style: styles$1.strong,
+							children: name
+						}),
+						" and removes it from the list. Anything it is running ends now, but its saved history remains available to resume."
+					]
+				}),
+				error ? /* @__PURE__ */ jsx(Text, {
+					style: styles$1.error,
+					accessibilityRole: "alert",
+					children: error
+				}) : null,
+				/* @__PURE__ */ jsx(Button, {
+					variant: "danger",
+					size: "lg",
+					loading: busy,
+					loadingLabel: "Removing",
+					onPress: () => void remove(),
+					children: "Remove"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "lg",
+					disabled: busy,
+					onPress: () => setStep("menu"),
+					children: "Cancel"
+				})
+			]
+		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, {
+			numberOfLines: 1,
+			children: name
+		}) }), /* @__PURE__ */ jsx(SheetBody, {
+			style: styles$1.body,
+			children: /* @__PURE__ */ jsx(Items, { items: [
+				{
+					label: "Rename",
+					onPress: () => {
+						setDraft(session.name);
+						setStep("rename");
+					}
+				},
+				{
+					label: "Resume",
+					hint: "Open an earlier conversation in this session",
+					onPress: () => {
+						close();
+						actions.resumeSession(session.id);
+					}
+				},
+				{
+					label: "Restart",
+					hint: session.restartBlocked ? "Not while a turn runs" : "Reloads extensions",
+					disabled: session.restarting || session.restartBlocked === true,
+					onPress: () => {
+						close();
+						actions.restartSession(session.id);
+					}
+				},
+				{
+					label: "Remove",
+					danger: true,
+					onPress: () => setStep("confirm")
+				}
+			] })
+		})] }) })
+	});
+}
+/** A workspace's ⋮: resume a saved conversation here, or remove the workspace after confirming. */
+function WorkspaceMenuSheet({ workspace, actions, onClose }) {
+	const [confirming, setConfirming] = useState(false);
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState("");
+	const close = () => {
+		if (busy) return;
+		setConfirming(false);
+		setError("");
+		onClose();
+	};
+	const remove = async () => {
+		if (workspace === null) return;
+		setBusy(true);
+		setError("");
+		const result = await actions.deleteWorkspace(workspace.id);
+		setBusy(false);
+		if (result !== void 0) {
+			setError(result.error);
+			return;
+		}
+		setConfirming(false);
+		onClose();
+	};
+	return /* @__PURE__ */ jsx(Sheet, {
+		open: workspace !== null,
+		onOpenChange: (open) => !open && close(),
+		children: /* @__PURE__ */ jsx(SheetContent, { children: workspace === null ? null : confirming ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: "Remove workspace" }) }), /* @__PURE__ */ jsxs(SheetBody, {
+			style: styles$1.body,
+			children: [
+				/* @__PURE__ */ jsxs(Text, {
+					style: styles$1.text,
+					children: [
+						"This unregisters ",
+						/* @__PURE__ */ jsx(Text, {
+							style: styles$1.strong,
+							children: workspace.name
+						}),
+						" from Po only. Files at",
+						" ",
+						/* @__PURE__ */ jsx(Text, {
+							style: styles$1.mono,
+							children: workspace.root
+						}),
+						" stay on disk. Its sessions must be removed first."
+					]
+				}),
+				error ? /* @__PURE__ */ jsx(Text, {
+					style: styles$1.error,
+					accessibilityRole: "alert",
+					children: error
+				}) : null,
+				/* @__PURE__ */ jsx(Button, {
+					variant: "danger",
+					size: "lg",
+					loading: busy,
+					loadingLabel: "Removing",
+					onPress: () => void remove(),
+					children: "Remove"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "lg",
+					disabled: busy,
+					onPress: () => setConfirming(false),
+					children: "Cancel"
+				})
+			]
+		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, {
+			numberOfLines: 1,
+			children: workspace.name
+		}) }), /* @__PURE__ */ jsx(SheetBody, {
+			style: styles$1.body,
+			children: /* @__PURE__ */ jsx(Items, { items: [{
+				label: "Resume session",
+				disabled: !workspace.available,
+				onPress: () => {
+					close();
+					actions.resumeInWorkspace(workspace.id);
+				}
+			}, {
+				label: "Remove workspace",
+				danger: true,
+				onPress: () => setConfirming(true)
+			}] })
+		})] }) })
+	});
+}
+const styles$1 = StyleSheet.create((theme) => {
+	const sans = fontOf(theme.fontFamily.sans);
+	const text = (size, color) => ({
+		fontFamily: sans,
+		fontSize: theme.fontSize[size],
+		lineHeight: theme.lineHeight[size],
+		color
+	});
+	return {
+		body: {
+			gap: theme.spacing(3),
+			uni__dependencies: [0]
+		},
+		list: {
+			borderRadius: theme.borderRadius.lg,
+			borderWidth: 1,
+			borderColor: theme.colors["border-soft"],
+			overflow: "hidden",
+			uni__dependencies: [0]
+		},
+		item: {
+			minHeight: 48,
+			justifyContent: "center",
+			gap: 2,
+			paddingHorizontal: theme.spacing(4),
+			paddingVertical: theme.spacing(2.5),
+			uni__dependencies: [0]
+		},
+		divider: {
+			borderTopWidth: StyleSheet.hairlineWidth,
+			borderTopColor: theme.colors["border-soft"],
+			uni__dependencies: [0]
+		},
+		pressed: {
+			backgroundColor: theme.colors["tint-green"],
+			uni__dependencies: [0]
+		},
+		itemLabel: (danger, disabled) => ({
+			...text("base", disabled ? theme.colors.faint : danger ? theme.colors.red : theme.colors.hi),
+			fontWeight: theme.fontWeight.medium,
+			uni__dependencies: [0]
+		}),
+		meta: text("sm", theme.colors.dim),
+		text: {
+			...text("base", theme.colors.text),
+			lineHeight: theme.lineHeightRelaxed.base,
+			uni__dependencies: [0]
+		},
+		strong: {
+			fontWeight: theme.fontWeight.semibold,
+			color: theme.colors.hi,
+			uni__dependencies: [0]
+		},
+		mono: {
+			fontFamily: fontOf(theme.fontFamily.mono),
+			color: theme.colors.hi,
+			uni__dependencies: [0]
+		},
+		error: {
+			...text("sm", theme.colors.red),
+			lineHeight: theme.lineHeightRelaxed.sm,
+			uni__dependencies: [0]
+		}
+	};
+});
+//#endregion
 //#region src/extensions/(frontend)/template/_components/AdvancedSessions.native.tsx
 /** The same reading of the status line as the cockpit card. */
 function statusTone(status) {
@@ -13,7 +312,18 @@ function statusTone(status) {
 	if (status.startsWith("running")) return "running";
 	return "quiet";
 }
-function SessionCard({ session, onOpen }) {
+/** A 44 point icon target, as the cockpit's ghost icon buttons. */
+function IconButton({ label, onPress, children }) {
+	return /* @__PURE__ */ jsx(Pressable, {
+		accessibilityRole: "button",
+		accessibilityLabel: label,
+		hitSlop: 6,
+		onPress,
+		style: ({ pressed }) => [styles.iconButton, pressed && styles.iconPressed],
+		children
+	});
+}
+function SessionCard({ session, onOpen, onMenu }) {
 	const tone = statusTone(session.status);
 	const name = session.name || "Untitled";
 	return /* @__PURE__ */ jsxs(Pressable, {
@@ -29,38 +339,57 @@ function SessionCard({ session, onOpen }) {
 		children: [
 			/* @__PURE__ */ jsxs(View, {
 				style: styles.cardHead,
-				children: [session.profile ? /* @__PURE__ */ jsx(View, {
-					style: styles.avatar,
-					accessibilityLabel: session.profile.label,
-					children: /* @__PURE__ */ jsx(Text, {
-						style: styles.initials,
-						children: session.profile.initials
-					})
-				}) : null, /* @__PURE__ */ jsxs(View, {
-					style: styles.cardText,
-					children: [/* @__PURE__ */ jsx(Text, {
-						style: styles.name,
-						numberOfLines: 2,
-						children: name
-					}), /* @__PURE__ */ jsxs(View, {
-						style: styles.statusRow,
-						children: [session.awaitingInput ? /* @__PURE__ */ jsx(AlertIcon, {
-							size: 12,
-							color: "magenta",
-							accessibilityLabel: "Waiting for your input"
-						}) : tone === "running" ? /* @__PURE__ */ jsx(Spinner, {
-							size: "small",
-							color: "yellow"
-						}) : tone === "failed" ? /* @__PURE__ */ jsx(AlertIcon, {
-							size: 12,
-							color: "red"
-						}) : null, /* @__PURE__ */ jsx(Text, {
-							style: styles.status(tone),
-							numberOfLines: 1,
-							children: session.status
+				children: [
+					session.profile ? /* @__PURE__ */ jsx(View, {
+						style: styles.avatar,
+						accessibilityLabel: session.profile.label,
+						children: /* @__PURE__ */ jsx(Text, {
+							style: styles.initials,
+							children: session.profile.initials
+						})
+					}) : null,
+					/* @__PURE__ */ jsxs(View, {
+						style: styles.cardText,
+						children: [/* @__PURE__ */ jsx(Text, {
+							style: styles.name,
+							numberOfLines: 2,
+							children: name
+						}), /* @__PURE__ */ jsxs(View, {
+							style: styles.statusRow,
+							children: [
+								session.restarting ? /* @__PURE__ */ jsx(Spinner, {
+									size: "small",
+									color: "dim",
+									label: "Restarting"
+								}) : null,
+								session.awaitingInput ? /* @__PURE__ */ jsx(AlertIcon, {
+									size: 12,
+									color: "magenta",
+									accessibilityLabel: "Waiting for your input"
+								}) : tone === "running" ? /* @__PURE__ */ jsx(Spinner, {
+									size: "small",
+									color: "yellow"
+								}) : tone === "failed" ? /* @__PURE__ */ jsx(AlertIcon, {
+									size: 12,
+									color: "red"
+								}) : null,
+								/* @__PURE__ */ jsx(Text, {
+									style: styles.status(tone),
+									numberOfLines: 1,
+									children: session.status
+								})
+							]
 						})]
-					})]
-				})]
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						label: `${name} actions`,
+						onPress: () => onMenu(session),
+						children: /* @__PURE__ */ jsx(KebabIcon, {
+							size: 16,
+							color: "dim"
+						})
+					})
+				]
 			}),
 			session.git ? /* @__PURE__ */ jsxs(View, {
 				style: [styles.branchRow, session.profile && styles.underAvatar],
@@ -80,6 +409,21 @@ function SessionCard({ session, onOpen }) {
 					}) : null
 				]
 			}) : null,
+			session.groups !== void 0 && session.groups.length > 0 ? /* @__PURE__ */ jsxs(View, {
+				style: [styles.groupsRow, session.profile && styles.underAvatar],
+				accessibilityLabel: "groups",
+				children: [/* @__PURE__ */ jsx(UsersIcon, {
+					size: 13,
+					color: "dim"
+				}), /* @__PURE__ */ jsx(View, {
+					style: styles.groups,
+					children: session.groups.map((group) => /* @__PURE__ */ jsx(Badge, {
+						tone: "magenta",
+						size: "xs",
+						children: group
+					}, group))
+				})]
+			}) : null,
 			session.pendingSetups.map((setup) => /* @__PURE__ */ jsxs(View, {
 				style: [styles.setup, session.profile && styles.underAvatar],
 				children: [/* @__PURE__ */ jsxs(Text, {
@@ -103,29 +447,47 @@ function SessionCard({ session, onOpen }) {
 		]
 	});
 }
-function WorkspaceGroup({ workspace, onOpen }) {
+function WorkspaceGroup({ workspace, onOpen, actions, onSessionMenu, onWorkspaceMenu }) {
 	return /* @__PURE__ */ jsxs(View, {
 		style: styles.group,
 		children: [
 			/* @__PURE__ */ jsxs(View, {
 				style: styles.groupHead,
 				accessibilityRole: "header",
-				children: [/* @__PURE__ */ jsx(FolderIcon, {
-					size: 16,
-					color: "dim"
-				}), /* @__PURE__ */ jsxs(View, {
-					style: styles.groupText,
-					children: [/* @__PURE__ */ jsx(Text, {
-						style: styles.groupName,
-						numberOfLines: 1,
-						children: workspace.name
-					}), /* @__PURE__ */ jsx(Text, {
-						style: styles.groupRoot,
-						numberOfLines: 1,
-						ellipsizeMode: "middle",
-						children: workspace.root
-					})]
-				})]
+				children: [
+					/* @__PURE__ */ jsx(FolderIcon, {
+						size: 16,
+						color: "dim"
+					}),
+					/* @__PURE__ */ jsxs(View, {
+						style: styles.groupText,
+						children: [/* @__PURE__ */ jsx(Text, {
+							style: styles.groupName,
+							numberOfLines: 1,
+							children: workspace.name
+						}), /* @__PURE__ */ jsx(Text, {
+							style: styles.groupRoot,
+							numberOfLines: 1,
+							ellipsizeMode: "middle",
+							children: workspace.root
+						})]
+					}),
+					workspace.legacy ? null : /* @__PURE__ */ jsxs(Fragment, { children: [workspace.available ? /* @__PURE__ */ jsx(IconButton, {
+						label: `New session in ${workspace.name}`,
+						onPress: () => actions.createSession(workspace.id),
+						children: /* @__PURE__ */ jsx(PlusIcon, {
+							size: 18,
+							color: "dim"
+						})
+					}) : null, /* @__PURE__ */ jsx(IconButton, {
+						label: `${workspace.name} actions`,
+						onPress: () => onWorkspaceMenu(workspace),
+						children: /* @__PURE__ */ jsx(KebabIcon, {
+							size: 16,
+							color: "dim"
+						})
+					})] })
+				]
 			}),
 			!workspace.available ? /* @__PURE__ */ jsx(Text, {
 				style: styles.unavailable,
@@ -136,26 +498,45 @@ function WorkspaceGroup({ workspace, onOpen }) {
 				children: "No sessions yet. Start or resume one."
 			}) : workspace.sessions.map((session) => /* @__PURE__ */ jsx(SessionCard, {
 				session,
-				onOpen
+				onOpen,
+				onMenu: onSessionMenu
 			}, session.id))
 		]
 	});
 }
 /** The Advanced template's session list: the cockpit rail's workspace groups and cards, sized for a phone. */
-function AdvancedSessions({ workspaces, openSession }) {
+function AdvancedSessions({ workspaces, openSession, actions }) {
+	const [sessionMenu, setSessionMenu] = useState(null);
+	const [workspaceMenu, setWorkspaceMenu] = useState(null);
 	if (workspaces.length === 0) return /* @__PURE__ */ jsx(EmptyState, {
 		title: "No sessions yet.",
 		description: "Start one in Po on your computer."
 	});
-	return /* @__PURE__ */ jsx(ScrollView, {
-		style: styles.screen,
-		contentContainerStyle: styles.content,
-		contentInsetAdjustmentBehavior: "automatic",
-		children: workspaces.map((workspace) => /* @__PURE__ */ jsx(WorkspaceGroup, {
-			workspace,
-			onOpen: openSession
-		}, workspace.id))
-	});
+	const sessions = workspaces.flatMap((workspace) => workspace.sessions);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(ScrollView, {
+			style: styles.screen,
+			contentContainerStyle: styles.content,
+			contentInsetAdjustmentBehavior: "automatic",
+			children: workspaces.map((workspace) => /* @__PURE__ */ jsx(WorkspaceGroup, {
+				workspace,
+				onOpen: openSession,
+				actions,
+				onSessionMenu: (session) => setSessionMenu(session.id),
+				onWorkspaceMenu: (entry) => setWorkspaceMenu(entry.id)
+			}, workspace.id))
+		}),
+		/* @__PURE__ */ jsx(SessionMenuSheet, {
+			session: sessions.find((session) => session.id === sessionMenu) ?? null,
+			actions,
+			onClose: () => setSessionMenu(null)
+		}),
+		/* @__PURE__ */ jsx(WorkspaceMenuSheet, {
+			workspace: workspaces.find((workspace) => workspace.id === workspaceMenu) ?? null,
+			actions,
+			onClose: () => setWorkspaceMenu(null)
+		})
+	] });
 }
 const styles = StyleSheet.create((theme) => {
 	const sans = fontOf(theme.fontFamily.sans);
@@ -234,6 +615,17 @@ const styles = StyleSheet.create((theme) => {
 			marginLeft: theme.spacing(5),
 			uni__dependencies: [0]
 		},
+		iconButton: {
+			width: 36,
+			height: 36,
+			borderRadius: 18,
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		iconPressed: {
+			backgroundColor: theme.colors.panel,
+			uni__dependencies: [0]
+		},
 		cardHead: {
 			flexDirection: "row",
 			alignItems: "flex-start",
@@ -293,6 +685,19 @@ const styles = StyleSheet.create((theme) => {
 			uni__dependencies: [0]
 		},
 		modified: text("sm", theme.colors.yellow),
+		groupsRow: {
+			flexDirection: "row",
+			alignItems: "flex-start",
+			gap: theme.spacing(1.5),
+			uni__dependencies: [0]
+		},
+		groups: {
+			flex: 1,
+			flexDirection: "row",
+			flexWrap: "wrap",
+			gap: theme.spacing(1),
+			uni__dependencies: [0]
+		},
 		setup: {
 			gap: theme.spacing(.5),
 			uni__dependencies: [0]