@burdenoff/microfe-botmanor 2026.813.1

package/dist/botlit/pages/BucketsPage.js

@@ -0,0 +1,604 @@
+import { useBotlit as e } from "../providers/BotlitProvider.js";
+import { formatRelativeTime as t } from "../utils/formatters.js";
+import { PageLayout as n } from "../components/PageLayout.js";
+import { Card as r, CardContent as i, CardDescription as a, CardHeader as o, CardTitle as s } from "../components/Card.js";
+import { Button as c } from "../components/Button.js";
+import { isNative as l, nativeImpact as u, nativeNotify as d } from "../../utils/nativeBridge.js";
+import { EmptyState as f } from "../components/EmptyState.js";
+import { FormField as p, Input as m, Textarea as h } from "../components/Input.js";
+import { ErrorState as g } from "../components/ErrorState.js";
+import { useBucketTree as ee, useBuckets as te, useCreateBucket as ne, useDeleteBucket as re, useUpdateBucket as ie } from "../hooks/useBuckets.js";
+import "../hooks/index.js";
+import { useState as _ } from "react";
+import { GlassCard as v, PagePurpose as ae } from "@burdenoff/fe-libs/ui";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { Link as S } from "react-router";
+import { ChevronDown as C, ChevronRight as w, Edit as T, Folder as E, FolderOpen as D, FolderTree as O, MoreHorizontal as k, Plus as A, Save as j, Search as oe, Settings as se, Trash2 as M, X as N } from "lucide-react";
+import { toast as P } from "sonner";
+//#region src/botlit/pages/BucketsPage.tsx
+var F = ({ bucket: e, level: t, expanded: n, onToggle: r, getPath: i, onEdit: a, onDelete: o, onCreateChild: s, activeMenu: l, setActiveMenu: u }) => {
+	let d = n.has(e.id), f = e.children.length > 0, p = l === e.id;
+	return /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b(S, {
+		to: i(`buckets/${e.id}`),
+		children: /* @__PURE__ */ x("div", {
+			className: "flex items-center gap-2 px-3 py-2 hover:bg-accent rounded-md transition-colors cursor-pointer group",
+			style: { paddingLeft: `${t * 24 + 12}px` },
+			children: [
+				f ? /* @__PURE__ */ b("button", {
+					onClick: (t) => {
+						t.preventDefault(), r(e.id);
+					},
+					className: "p-0.5 hover:bg-bg-sunken rounded",
+					children: b(d ? C : w, {
+						size: 16,
+						className: "text-text-secondary"
+					})
+				}) : /* @__PURE__ */ b("div", { className: "w-5" }),
+				d ? /* @__PURE__ */ b(D, {
+					size: 18,
+					className: "text-primary"
+				}) : /* @__PURE__ */ b(E, {
+					size: 18,
+					className: "text-text-secondary"
+				}),
+				/* @__PURE__ */ b("span", {
+					className: "flex-1 font-medium",
+					children: e.name
+				}),
+				/* @__PURE__ */ x("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ b(c, {
+						variant: "ghost",
+						size: "icon",
+						className: "h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity",
+						onClick: (t) => {
+							t.preventDefault(), t.stopPropagation(), u(p ? null : e.id);
+						},
+						children: /* @__PURE__ */ b(k, { size: 14 })
+					}), p && /* @__PURE__ */ x("div", {
+						className: "absolute right-0 top-8 bg-popover border rounded-md shadow-lg z-50 py-1 min-w-[160px]",
+						children: [
+							/* @__PURE__ */ x("button", {
+								className: "w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent text-left",
+								onClick: (t) => {
+									t.preventDefault(), t.stopPropagation(), s(e.id);
+								},
+								children: [/* @__PURE__ */ b(A, { size: 14 }), "Add Sub-Bucket"]
+							}),
+							/* @__PURE__ */ x("button", {
+								className: "w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent text-left",
+								onClick: (t) => {
+									t.preventDefault(), t.stopPropagation(), a(e);
+								},
+								children: [/* @__PURE__ */ b(T, { size: 14 }), "Edit"]
+							}),
+							/* @__PURE__ */ x("button", {
+								className: "w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent text-status-error-text text-left",
+								onClick: (t) => {
+									t.preventDefault(), t.stopPropagation(), o(e.id);
+								},
+								children: [/* @__PURE__ */ b(M, { size: 14 }), "Delete"]
+							})
+						]
+					})]
+				})
+			]
+		})
+	}), d && e.children.map((e) => /* @__PURE__ */ b(F, {
+		bucket: e,
+		level: t + 1,
+		expanded: n,
+		onToggle: r,
+		getPath: i,
+		onEdit: a,
+		onDelete: o,
+		onCreateChild: s,
+		activeMenu: l,
+		setActiveMenu: u
+	}, e.id))] });
+}, I = () => {
+	let { getPath: C } = e(), [w, T] = _(""), [D, k] = _("tree"), [I, L] = _(new Set(["bucket-1"])), [ce, R] = _(!1), [z, B] = _(null), [V, H] = _(null), [le, U] = _(null), [W, G] = _({
+		name: "",
+		description: "",
+		visibility: "PRIVATE",
+		parentBucketId: void 0
+	}), { data: K, loading: ue, error: de, refetch: q } = te({ search: w }), { data: J, loading: fe, error: pe, refetch: Y } = ee(), [me, he] = ne(), [ge, _e] = ie(), [ve, ye] = re(), be = (e) => {
+		L((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	}, xe = () => {
+		if (J) {
+			let e = /* @__PURE__ */ new Set(), t = (n) => {
+				for (let r of n) e.add(r.id), r.children && t(r.children);
+			};
+			t(J), L(e);
+		}
+	}, Se = () => {
+		L(/* @__PURE__ */ new Set());
+	}, X = D === "tree" ? fe : ue, Z = D === "tree" ? pe : de, Q = D === "tree" ? Y : q, Ce = async () => {
+		if (W.name) {
+			try {
+				await me({
+					name: W.name,
+					slug: W.name.toLowerCase().replace(/\s+/g, "-"),
+					description: W.description,
+					parentBucketId: W.parentBucketId,
+					metadata: { visibility: W.visibility }
+				});
+			} catch (e) {
+				P.error(e instanceof Error ? e.message : "Failed to create bucket");
+				return;
+			}
+			P.success(`Bucket "${W.name}" created`), q(), Y(), R(!1), G({
+				name: "",
+				description: "",
+				visibility: "PRIVATE",
+				parentBucketId: void 0
+			});
+		}
+	}, we = async () => {
+		if (!(!V || !W.name)) {
+			try {
+				await ge({
+					bucketId: V.id,
+					input: {
+						name: W.name,
+						description: W.description
+					}
+				});
+			} catch (e) {
+				P.error(e instanceof Error ? e.message : "Failed to update bucket");
+				return;
+			}
+			P.success("Bucket updated"), q(), Y(), H(null);
+		}
+	}, Te = async (e) => {
+		try {
+			await ve(e), l() && d("success"), P.success("Bucket deleted"), q(), Y();
+		} catch (e) {
+			l() && d("error"), P.error(e instanceof Error ? e.message : "Failed to delete bucket");
+			return;
+		}
+		B(null);
+	}, Ee = (e) => {
+		G({
+			name: e.name,
+			description: e.description ?? "",
+			visibility: "PRIVATE",
+			parentBucketId: void 0
+		}), H(e), U(null);
+	}, $ = (e) => {
+		G({
+			name: "",
+			description: "",
+			visibility: "PRIVATE",
+			parentBucketId: e
+		}), R(!0);
+	};
+	return /* @__PURE__ */ b(n, {
+		title: "Buckets",
+		description: "Organize your agents, apps, and resources into hierarchical folders",
+		actions: /* @__PURE__ */ b(c, {
+			leftIcon: /* @__PURE__ */ b(A, { size: 16 }),
+			onClick: () => $(),
+			children: "Create Bucket"
+		}),
+		children: /* @__PURE__ */ x("div", {
+			className: "space-y-6",
+			children: [
+				/* @__PURE__ */ b(ae, {
+					icon: /* @__PURE__ */ b(O, { size: 18 }),
+					children: "Buckets are folders for everything you build in Botlit — agents, bots, skills, knowledge and more — arranged in a hierarchy that mirrors how your team works. Group resources by team, project or environment so they stay organised, easy to find and simple to share as your account grows. Browse the tree or list view to manage that structure."
+				}),
+				K.length > 0 ? /* @__PURE__ */ x("div", {
+					className: "grid grid-cols-2 gap-4 sm:grid-cols-2",
+					children: [/* @__PURE__ */ x(v, {
+						treatment: "glass",
+						glow: !0,
+						className: "p-4",
+						children: [/* @__PURE__ */ b("p", {
+							className: "text-sm text-text-secondary",
+							children: "Total buckets"
+						}), /* @__PURE__ */ b("p", {
+							className: "mt-1 text-2xl font-semibold tabular-nums text-text-primary",
+							children: K.length
+						})]
+					}), /* @__PURE__ */ x(v, {
+						treatment: "metric",
+						className: "p-4",
+						children: [/* @__PURE__ */ b("p", {
+							className: "text-sm text-text-secondary",
+							children: "Top-level buckets"
+						}), /* @__PURE__ */ b("p", {
+							className: "mt-1 text-2xl font-semibold tabular-nums text-text-primary",
+							children: J.length
+						})]
+					})]
+				}) : null,
+				/* @__PURE__ */ x("div", {
+					className: "flex items-center justify-between gap-4",
+					children: [/* @__PURE__ */ x("div", {
+						className: "relative flex-1 max-w-md",
+						children: [/* @__PURE__ */ b(oe, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ b(m, {
+							placeholder: "Search buckets...",
+							value: w,
+							onChange: (e) => T(e.target.value),
+							className: "pl-9"
+						})]
+					}), /* @__PURE__ */ x("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ b(c, {
+								variant: "outline",
+								size: "sm",
+								onClick: xe,
+								children: "Expand All"
+							}),
+							/* @__PURE__ */ b(c, {
+								variant: "outline",
+								size: "sm",
+								onClick: Se,
+								children: "Collapse All"
+							}),
+							/* @__PURE__ */ x("div", {
+								className: "flex border border-border-subtle rounded-md overflow-hidden",
+								children: [/* @__PURE__ */ b(c, {
+									variant: D === "tree" ? "default" : "ghost",
+									size: "sm",
+									className: "rounded-none",
+									onClick: () => k("tree"),
+									children: /* @__PURE__ */ b(O, { size: 16 })
+								}), /* @__PURE__ */ b(c, {
+									variant: D === "list" ? "default" : "ghost",
+									size: "sm",
+									className: "rounded-none",
+									onClick: () => k("list"),
+									children: /* @__PURE__ */ b(se, { size: 16 })
+								})]
+							})
+						]
+					})]
+				}),
+				D === "tree" && /* @__PURE__ */ b(r, { children: /* @__PURE__ */ b(i, {
+					className: "p-2",
+					children: X ? /* @__PURE__ */ b("div", {
+						className: "space-y-2 p-4",
+						children: [
+							1,
+							2,
+							3,
+							4
+						].map((e) => /* @__PURE__ */ b("div", { className: "h-10 bg-bg-sunken motion-safe:animate-vc-shimmer rounded" }, e))
+					}) : Z ? /* @__PURE__ */ b(g, {
+						resource: "buckets",
+						error: Z,
+						onRetry: () => void Q()
+					}) : J.length > 0 ? /* @__PURE__ */ b("div", {
+						className: "py-2",
+						onClick: () => U(null),
+						children: J.map((e) => /* @__PURE__ */ b(F, {
+							bucket: e,
+							level: 0,
+							expanded: I,
+							onToggle: be,
+							getPath: C,
+							onEdit: Ee,
+							onDelete: (e) => B(e),
+							onCreateChild: (e) => $(e),
+							activeMenu: le,
+							setActiveMenu: U
+						}, e.id))
+					}) : /* @__PURE__ */ b(f, {
+						illustration: "empty-files",
+						title: "No buckets created",
+						description: "Create buckets to organize your Botlit resources.",
+						action: /* @__PURE__ */ b(c, {
+							leftIcon: /* @__PURE__ */ b(A, { size: 16 }),
+							onClick: () => $(),
+							children: "Create Bucket"
+						})
+					})
+				}) }),
+				D === "list" && /* @__PURE__ */ b(y, { children: X ? /* @__PURE__ */ b("div", {
+					className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+					children: [
+						1,
+						2,
+						3
+					].map((e) => /* @__PURE__ */ b("div", { className: "h-32 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg" }, e))
+				}) : Z ? /* @__PURE__ */ b(g, {
+					resource: "buckets",
+					error: Z,
+					onRetry: () => void Q()
+				}) : K.length > 0 ? /* @__PURE__ */ b("div", {
+					className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+					children: K.map((e) => /* @__PURE__ */ b(S, {
+						to: C(`buckets/${e.id}`),
+						children: /* @__PURE__ */ x(r, {
+							className: "h-full hover:border-primary/50 transition-colors cursor-pointer",
+							children: [/* @__PURE__ */ b(o, {
+								className: "pb-2",
+								children: /* @__PURE__ */ b("div", {
+									className: "flex items-start justify-between",
+									children: /* @__PURE__ */ x("div", {
+										className: "flex items-center gap-3",
+										children: [/* @__PURE__ */ b(E, { className: "h-5 w-5 text-primary" }), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b(s, {
+											className: "text-base",
+											children: e.name
+										}), /* @__PURE__ */ b(a, {
+											className: "text-xs",
+											children: e.path
+										})] })]
+									})
+								})
+							}), /* @__PURE__ */ b(i, { children: /* @__PURE__ */ x("div", {
+								className: "flex items-center justify-between text-sm",
+								children: [/* @__PURE__ */ b("span", {
+									className: "text-text-secondary",
+									children: e.slug
+								}), /* @__PURE__ */ b("span", {
+									className: "text-xs text-text-secondary",
+									children: t(e.createdAt)
+								})]
+							}) })]
+						})
+					}, e.id))
+				}) : /* @__PURE__ */ b(f, {
+					illustration: "empty-search",
+					title: "No buckets found",
+					description: "Create buckets to organize your Botlit resources.",
+					action: /* @__PURE__ */ b(c, {
+						leftIcon: /* @__PURE__ */ b(A, { size: 16 }),
+						onClick: () => $(),
+						children: "Create Bucket"
+					})
+				}) }),
+				/* @__PURE__ */ x(r, { children: [/* @__PURE__ */ x(o, { children: [/* @__PURE__ */ x(s, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ b(O, { size: 18 }), "Organizing with Buckets"]
+				}), /* @__PURE__ */ b(a, { children: "Buckets help you organize and manage permissions for your resources" })] }), /* @__PURE__ */ b(i, { children: /* @__PURE__ */ x("div", {
+					className: "grid grid-cols-1 md:grid-cols-3 gap-6",
+					children: [
+						/* @__PURE__ */ x("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ b("h4", {
+								className: "font-medium",
+								children: "Hierarchical Organization"
+							}), /* @__PURE__ */ b("p", {
+								className: "text-sm text-text-secondary",
+								children: "Create nested folder structures to organize apps, agents, and other resources by team, project, or domain."
+							})]
+						}),
+						/* @__PURE__ */ x("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ b("h4", {
+								className: "font-medium",
+								children: "Inherited Permissions"
+							}), /* @__PURE__ */ b("p", {
+								className: "text-sm text-text-secondary",
+								children: "Set owners, editors, and viewers at the bucket level. Permissions cascade to all items within."
+							})]
+						}),
+						/* @__PURE__ */ x("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ b("h4", {
+								className: "font-medium",
+								children: "Default Policies"
+							}), /* @__PURE__ */ b("p", {
+								className: "text-sm text-text-secondary",
+								children: "Configure default policy bindings for buckets. All new items inherit these policies automatically."
+							})]
+						})
+					]
+				}) })] }),
+				ce && /* @__PURE__ */ b("div", {
+					className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50",
+					children: /* @__PURE__ */ x(r, {
+						className: "w-full max-w-md mx-4",
+						children: [
+							/* @__PURE__ */ x(o, { children: [/* @__PURE__ */ x(s, {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ b("span", { children: "Create Bucket" }), /* @__PURE__ */ b(c, {
+									variant: "ghost",
+									size: "icon",
+									onClick: () => R(!1),
+									children: /* @__PURE__ */ b(N, { size: 16 })
+								})]
+							}), /* @__PURE__ */ b(a, { children: W.parentBucketId ? "Create a new sub-bucket" : "Create a new root bucket" })] }),
+							/* @__PURE__ */ x(i, {
+								className: "space-y-4",
+								children: [
+									/* @__PURE__ */ b(p, {
+										label: "Bucket Name",
+										required: !0,
+										children: /* @__PURE__ */ b(m, {
+											placeholder: "e.g., Marketing Team",
+											value: W.name,
+											onChange: (e) => G({
+												...W,
+												name: e.target.value
+											})
+										})
+									}),
+									/* @__PURE__ */ b(p, {
+										label: "Description",
+										children: /* @__PURE__ */ b(h, {
+											placeholder: "What is this bucket for?",
+											value: W.description,
+											onChange: (e) => G({
+												...W,
+												description: e.target.value
+											}),
+											rows: 2
+										})
+									}),
+									/* @__PURE__ */ b(p, {
+										label: "Visibility",
+										children: /* @__PURE__ */ x("select", {
+											className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+											value: W.visibility,
+											onChange: (e) => G({
+												...W,
+												visibility: e.target.value
+											}),
+											children: [
+												/* @__PURE__ */ b("option", {
+													value: "PRIVATE",
+													children: "Private"
+												}),
+												/* @__PURE__ */ b("option", {
+													value: "WORKSPACE",
+													children: "Workspace"
+												}),
+												/* @__PURE__ */ b("option", {
+													value: "PUBLIC",
+													children: "Public"
+												})
+											]
+										})
+									})
+								]
+							}),
+							/* @__PURE__ */ x("div", {
+								className: "flex justify-end gap-2 p-4 border-t",
+								children: [/* @__PURE__ */ b(c, {
+									variant: "outline",
+									onClick: () => R(!1),
+									children: "Cancel"
+								}), /* @__PURE__ */ b(c, {
+									onClick: Ce,
+									isLoading: he.loading,
+									disabled: !W.name,
+									leftIcon: /* @__PURE__ */ b(j, { size: 16 }),
+									children: "Create Bucket"
+								})]
+							})
+						]
+					})
+				}),
+				V && /* @__PURE__ */ b("div", {
+					className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50",
+					children: /* @__PURE__ */ x(r, {
+						className: "w-full max-w-md mx-4",
+						children: [
+							/* @__PURE__ */ x(o, { children: [/* @__PURE__ */ x(s, {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ b("span", { children: "Edit Bucket" }), /* @__PURE__ */ b(c, {
+									variant: "ghost",
+									size: "icon",
+									onClick: () => H(null),
+									children: /* @__PURE__ */ b(N, { size: 16 })
+								})]
+							}), /* @__PURE__ */ b(a, { children: "Update bucket details" })] }),
+							/* @__PURE__ */ x(i, {
+								className: "space-y-4",
+								children: [
+									/* @__PURE__ */ b(p, {
+										label: "Bucket Name",
+										required: !0,
+										children: /* @__PURE__ */ b(m, {
+											placeholder: "e.g., Marketing Team",
+											value: W.name,
+											onChange: (e) => G({
+												...W,
+												name: e.target.value
+											})
+										})
+									}),
+									/* @__PURE__ */ b(p, {
+										label: "Description",
+										children: /* @__PURE__ */ b(h, {
+											placeholder: "What is this bucket for?",
+											value: W.description,
+											onChange: (e) => G({
+												...W,
+												description: e.target.value
+											}),
+											rows: 2
+										})
+									}),
+									/* @__PURE__ */ b(p, {
+										label: "Visibility",
+										children: /* @__PURE__ */ x("select", {
+											className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+											value: W.visibility,
+											onChange: (e) => G({
+												...W,
+												visibility: e.target.value
+											}),
+											children: [
+												/* @__PURE__ */ b("option", {
+													value: "PRIVATE",
+													children: "Private"
+												}),
+												/* @__PURE__ */ b("option", {
+													value: "WORKSPACE",
+													children: "Workspace"
+												}),
+												/* @__PURE__ */ b("option", {
+													value: "PUBLIC",
+													children: "Public"
+												})
+											]
+										})
+									})
+								]
+							}),
+							/* @__PURE__ */ x("div", {
+								className: "flex justify-end gap-2 p-4 border-t",
+								children: [/* @__PURE__ */ b(c, {
+									variant: "outline",
+									onClick: () => H(null),
+									children: "Cancel"
+								}), /* @__PURE__ */ b(c, {
+									onClick: we,
+									isLoading: _e.loading,
+									disabled: !W.name,
+									leftIcon: /* @__PURE__ */ b(j, { size: 16 }),
+									children: "Save Changes"
+								})]
+							})
+						]
+					})
+				}),
+				z && /* @__PURE__ */ b("div", {
+					className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50",
+					children: /* @__PURE__ */ x(r, {
+						className: "w-full max-w-md mx-4",
+						children: [
+							/* @__PURE__ */ x(o, { children: [/* @__PURE__ */ x(s, {
+								className: "flex items-center gap-2 text-status-error-text",
+								children: [/* @__PURE__ */ b(M, { size: 18 }), "Delete Bucket"]
+							}), /* @__PURE__ */ b(a, { children: "Are you sure you want to delete this bucket? This action cannot be undone." })] }),
+							/* @__PURE__ */ b(i, { children: /* @__PURE__ */ b("p", {
+								className: "text-sm text-text-secondary",
+								children: "Note: Buckets with children or items cannot be deleted. You must delete or move all contents first."
+							}) }),
+							/* @__PURE__ */ x("div", {
+								className: "flex justify-end gap-2 p-4 border-t",
+								children: [/* @__PURE__ */ b(c, {
+									variant: "outline",
+									onClick: () => B(null),
+									children: "Cancel"
+								}), /* @__PURE__ */ b(c, {
+									variant: "destructive",
+									onClick: () => {
+										u("medium"), Te(z);
+									},
+									isLoading: ye.loading,
+									leftIcon: /* @__PURE__ */ b(M, { size: 16 }),
+									children: "Delete Bucket"
+								})]
+							})
+						]
+					})
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { I as BucketsPage };
+
+//# sourceMappingURL=BucketsPage.js.map