@baochunli/flakes 0.0.4 → 0.0.5

package/dist/node_modules/@flakes/console/.output/server/_chunks/ProjectsPage.mjs

@@ -0,0 +1,589 @@
+import { o as __toESM } from "../_runtime.mjs";
+import { c as require_jsx_runtime } from "../_libs/@radix-ui/react-arrow+[...].mjs";
+import { d as Link } from "../_libs/@tanstack/react-router+[...].mjs";
+import { u as require_react } from "../_libs/@floating-ui/react-dom+[...].mjs";
+import { A as Inbox, B as Clock3, D as LoaderCircle, H as CircleDashed, M as Folder, P as FolderCog, Q as Archive, U as CircleCheck, V as CircleX, W as CircleAlert, d as Server, j as HardDrive } from "../_libs/lucide-react.mjs";
+import { C as bindingValidationView, T as poolChoicesForBinding, a as useHosts, b as useUpsertHostProjectBinding, f as useRuns, h as useSetHostProjectWorkspaceRoot, i as useHostProjectBindings, o as useProjects, r as useHostPools, t as cn, w as hostProjectWorkspacePath } from "./utils.mjs";
+import { t as Button } from "./button.mjs";
+import { i as splitProjectsByStatus, r as projectMatchesRun } from "./project-navigation.mjs";
+import { a as CardTitle, i as CardHeader, n as CardContent, t as Card } from "./card.mjs";
+import { c as timeAgo, d as Skeleton, f as Badge, l as useClockTick } from "./bits.mjs";
+//#region src/views/ProjectsPage.tsx
+var import_react = /* @__PURE__ */ __toESM(require_react(), 1);
+var import_jsx_runtime = require_jsx_runtime();
+function ProjectsPage() {
+	const projects = useProjects();
+	const runs = useRuns();
+	const projectList = projects.data?.projects ?? [];
+	const loadedRuns = (runs.data?.pages ?? []).flatMap((page) => page.runs);
+	const { active, archived } = splitProjectsByStatus(projectList);
+	useClockTick(3e4);
+	if (projects.isPending && projects.data === void 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
+		className: "grid gap-5",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageHeader, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProjectSkeleton, {})]
+	});
+	if (projects.isError && projects.data === void 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
+		className: "grid gap-5",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageHeader, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, {
+			className: "py-10 text-center",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, {
+				className: "grid justify-items-center gap-2",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleAlert, { className: "size-8 text-status-failed" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "font-medium",
+						children: "Cannot list projects"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "max-w-md text-sm text-muted-foreground",
+						children: String(projects.error)
+					})
+				]
+			})
+		})]
+	});
+	if (projectList.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
+		className: "grid gap-5",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageHeader, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, {
+			className: "py-12 text-center",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, {
+				className: "grid justify-items-center gap-2",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Inbox, { className: "size-8 text-muted-foreground" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "font-medium",
+						children: "No projects yet"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "text-sm text-muted-foreground",
+						children: "Create a project from the CLI or API and it will appear here."
+					})
+				]
+			})
+		})]
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
+		className: "grid gap-5",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageHeader, {}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProjectSection, {
+				title: "Active projects",
+				projects: active,
+				runs: loadedRuns
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProjectPlacementManager, { projects: active }),
+			archived.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProjectSection, {
+				title: "Archived projects",
+				projects: archived,
+				runs: loadedRuns,
+				archived: true
+			}) : null
+		]
+	});
+}
+function ProjectPlacementManager(props) {
+	const hosts = useHosts();
+	const hostList = hosts.data?.hosts ?? [];
+	const [selectedHostId, setSelectedHostId] = (0, import_react.useState)(null);
+	const [selectedProjectKey, setSelectedProjectKey] = (0, import_react.useState)(null);
+	(0, import_react.useEffect)(() => {
+		const next = hostList.some((host) => host.hostId === selectedHostId) ? selectedHostId : hostList[0]?.hostId ?? null;
+		if (next !== selectedHostId) setSelectedHostId(next);
+	}, [hostList, selectedHostId]);
+	(0, import_react.useEffect)(() => {
+		const next = props.projects.some((project) => project.projectKey === selectedProjectKey) ? selectedProjectKey : props.projects[0]?.projectKey ?? null;
+		if (next !== selectedProjectKey) setSelectedProjectKey(next);
+	}, [props.projects, selectedProjectKey]);
+	if (props.projects.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, {
+		className: "border-dashed",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, {
+			className: "flex items-center gap-3 p-4 text-sm text-muted-foreground",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FolderCog, { className: "size-4" }), "No active projects to place on hosts."]
+		})
+	});
+	if (hosts.isPending && hosts.data === void 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProjectPlacementSkeleton, {});
+	if (hosts.isError && hosts.data === void 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, {
+		className: "py-8 text-center",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, {
+			className: "grid justify-items-center gap-2",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleAlert, { className: "size-8 text-status-failed" }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "font-medium",
+					children: "Cannot list hosts"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "max-w-md text-sm text-muted-foreground",
+					children: String(hosts.error)
+				})
+			]
+		})
+	});
+	if (hostList.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, {
+		className: "border-dashed py-8 text-center",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, {
+			className: "grid justify-items-center gap-2",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Server, { className: "size-8 text-muted-foreground" }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "font-medium",
+					children: "No hosts available"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "max-w-md text-sm text-muted-foreground",
+					children: "Add a host before assigning project workspace roots or pool bindings."
+				})
+			]
+		})
+	});
+	const selectedHost = hostList.find((host) => host.hostId === selectedHostId) ?? hostList[0];
+	const selectedProject = props.projects.find((project) => project.projectKey === selectedProjectKey) ?? props.projects[0];
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, {
+		className: "gap-4",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 items-start gap-3",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-md border bg-background",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FolderCog, { className: "size-4 text-muted-foreground" })
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
+					className: "text-base",
+					children: "Host placement"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "mt-1 text-sm text-muted-foreground",
+					children: "Manage project workspace roots and host pool bindings."
+				})]
+			})]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "grid gap-3 md:grid-cols-2",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
+				className: "grid gap-1.5 text-sm",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "console-callout",
+					children: "Host"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", {
+					value: selectedHost?.hostId ?? "",
+					onChange: (event) => setSelectedHostId(event.target.value),
+					className: "h-9 min-w-0 rounded-md border bg-background px-2 text-sm",
+					children: hostList.map((host) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("option", {
+						value: host.hostId,
+						children: [
+							host.name,
+							" (",
+							host.hostId,
+							")"
+						]
+					}, host.hostId))
+				})]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
+				className: "grid gap-1.5 text-sm",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "console-callout",
+					children: "Project"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", {
+					value: selectedProject?.projectKey ?? "",
+					onChange: (event) => setSelectedProjectKey(event.target.value),
+					className: "h-9 min-w-0 rounded-md border bg-background px-2 text-sm",
+					children: props.projects.map((project) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("option", {
+						value: project.projectKey,
+						children: [
+							project.name,
+							" (",
+							project.projectKey,
+							")"
+						]
+					}, project.projectId))
+				})]
+			})]
+		})]
+	}), selectedHost && selectedProject ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostProjectPlacementEditor, {
+		host: selectedHost,
+		project: selectedProject
+	}, `${selectedHost.hostId}:${selectedProject.projectKey}`) : null] });
+}
+function HostProjectPlacementEditor(props) {
+	const rootMutation = useSetHostProjectWorkspaceRoot();
+	const bindingMutation = useUpsertHostProjectBinding();
+	const pools = useHostPools(props.host.hostId);
+	const projectWorkspaceRoot = props.host.projectWorkspaceRoot;
+	const rootConfigured = typeof projectWorkspaceRoot === "string" && projectWorkspaceRoot.trim().length > 0;
+	const bindings = useHostProjectBindings(props.host.hostId, rootConfigured);
+	const bindingLoading = rootConfigured && bindings.isPending && bindings.data === void 0;
+	const binding = bindings.data?.bindings.find((entry) => entry.projectKey === props.project.projectKey);
+	const savedPoolKeySignature = (binding?.poolKeys ?? []).join("\0");
+	const [rootDraft, setRootDraft] = (0, import_react.useState)(projectWorkspaceRoot ?? "");
+	const [selectedPoolKeys, setSelectedPoolKeys] = (0, import_react.useState)([]);
+	(0, import_react.useEffect)(() => {
+		setRootDraft(projectWorkspaceRoot ?? "");
+	}, [projectWorkspaceRoot]);
+	(0, import_react.useEffect)(() => {
+		setSelectedPoolKeys(savedPoolKeySignature === "" ? [] : savedPoolKeySignature.split("\0"));
+	}, [savedPoolKeySignature]);
+	const poolList = pools.data?.hostPools ?? [];
+	const currentPoolKeys = new Set(poolList.map((pool) => pool.poolKey));
+	const selectedCurrentPoolKeys = selectedPoolKeys.filter((poolKey) => currentPoolKeys.has(poolKey));
+	const rootChanged = rootDraft !== (projectWorkspaceRoot ?? "");
+	const workspacePath = binding?.workspacePath ?? (rootConfigured ? hostProjectWorkspacePath(projectWorkspaceRoot, props.project.projectKey) : void 0);
+	function togglePool(poolKey) {
+		setSelectedPoolKeys((current) => current.includes(poolKey) ? current.filter((entry) => entry !== poolKey) : [...current, poolKey]);
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, {
+		className: "grid gap-4",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", {
+			className: "grid gap-3 rounded-md border p-3",
+			onSubmit: (event) => {
+				event.preventDefault();
+				rootMutation.mutate({
+					hostId: props.host.hostId,
+					path: rootDraft
+				});
+			},
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex min-w-0 flex-wrap items-center gap-3",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(HardDrive, { className: "size-4 text-muted-foreground" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
+								className: "text-sm font-medium",
+								children: "Project workspace root"
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+								className: "truncate font-mono text-xs text-muted-foreground",
+								children: props.host.hostId
+							})]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostStatusBadge, { host: props.host })
+					]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "grid gap-2 md:grid-cols-[minmax(0,1fr)_auto]",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+						value: rootDraft,
+						onChange: (event) => setRootDraft(event.target.value),
+						placeholder: "/srv/flakes/projects",
+						className: "h-9 min-w-0 rounded-md border bg-background px-3 font-mono text-sm"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+						type: "submit",
+						size: "sm",
+						disabled: rootMutation.isPending || rootDraft.trim().length === 0 || !rootChanged,
+						children: [rootMutation.isPending ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoaderCircle, { className: "size-4 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleCheck, { className: "size-4" }), "Save root"]
+					})]
+				}),
+				rootMutation.isError ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+					className: "text-sm text-destructive",
+					children: ["Cannot save root: ", String(rootMutation.error)]
+				}) : null
+			]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "grid gap-3 rounded-md border p-3",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex min-w-0 flex-wrap items-center gap-3",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FolderCog, { className: "size-4 text-muted-foreground" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
+								className: "text-sm font-medium",
+								children: "Project host binding"
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+								className: "truncate font-mono text-xs text-muted-foreground",
+								children: props.project.projectKey
+							})]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BindingValidationBadge, {
+							binding,
+							loading: bindingLoading
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReadOnlyField, {
+					label: "Workspace path",
+					value: workspacePath ?? "Root required",
+					muted: workspacePath === void 0
+				}),
+				!rootConfigured ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InlineState, {
+					icon: HardDrive,
+					title: "Workspace root required",
+					detail: "Set a host project workspace root before creating bindings."
+				}) : pools.isPending && pools.data === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PoolSkeleton, {}) : pools.isError && pools.data === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InlineState, {
+					icon: CircleAlert,
+					title: "Cannot list pools",
+					detail: String(pools.error),
+					tone: "error"
+				}) : poolList.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InlineState, {
+					icon: Server,
+					title: "No host pools",
+					detail: "This host has not reported any pool keys."
+				}) : bindingLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BindingLoadingState, {}) : bindings.isError && bindings.data === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InlineState, {
+					icon: CircleAlert,
+					title: "Cannot list bindings",
+					detail: String(bindings.error),
+					tone: "error"
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", {
+					className: "grid gap-3",
+					onSubmit: (event) => {
+						event.preventDefault();
+						bindingMutation.mutate({
+							hostId: props.host.hostId,
+							projectKey: props.project.projectKey,
+							poolKeys: selectedCurrentPoolKeys
+						});
+					},
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PoolChoiceList, {
+							pools: poolList,
+							binding: { poolKeys: selectedPoolKeys },
+							onToggle: togglePool
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "flex min-w-0 flex-wrap items-center gap-3",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+								type: "submit",
+								size: "sm",
+								disabled: bindingMutation.isPending || selectedCurrentPoolKeys.length === 0,
+								children: [bindingMutation.isPending ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoaderCircle, { className: "size-4 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleCheck, { className: "size-4" }), "Save binding"]
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+								className: "min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground",
+								children: [
+									selectedCurrentPoolKeys.length,
+									" selected pool",
+									selectedCurrentPoolKeys.length === 1 ? "" : "s"
+								]
+							})]
+						}),
+						bindingMutation.isError ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+							className: "text-sm text-destructive",
+							children: ["Cannot save binding: ", String(bindingMutation.error)]
+						}) : null
+					]
+				})
+			]
+		})]
+	});
+}
+function HostStatusBadge(props) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Badge, {
+		variant: "outline",
+		className: "gap-1.5 font-mono text-[11px]",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn("size-1.5 rounded-full", props.host.status === "online" ? "bg-status-succeeded" : props.host.status === "disabled" ? "bg-status-failed" : "bg-status-idle") }), props.host.status.toUpperCase()]
+	});
+}
+function BindingValidationBadge(props) {
+	if (props.loading === true) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Badge, {
+		variant: "outline",
+		className: "gap-1.5 font-mono text-[11px] uppercase tracking-[0.08em] text-status-warn",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoaderCircle, { className: "size-3.5 animate-spin" }), "Loading binding"]
+	});
+	const view = bindingValidationView(props.binding);
+	const Icon = validationIcon(view.tone);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Badge, {
+		variant: "outline",
+		className: cn("gap-1.5 font-mono text-[11px] uppercase tracking-[0.08em]", validationToneClass(view.tone)),
+		title: view.detail,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "size-3.5" }), view.label]
+	});
+}
+function BindingLoadingState() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex min-w-0 items-start gap-3 rounded-md border border-dashed p-3",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoaderCircle, { className: "mt-0.5 size-4 shrink-0 animate-spin text-status-warn" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-sm font-medium",
+				children: "Loading bindings"
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "mt-1 text-sm text-muted-foreground",
+				children: "Loading current host project bindings before edits are enabled."
+			})]
+		})]
+	});
+}
+function PoolChoiceList(props) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "grid gap-2 sm:grid-cols-2",
+		children: poolChoicesForBinding(props.pools, props.binding).map((choice) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
+			className: cn("flex min-w-0 items-center gap-3 rounded-md border p-3 text-sm transition-colors", choice.selected ? "bg-secondary/70" : "hover:bg-secondary/40"),
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+					type: "checkbox",
+					checked: choice.selected,
+					onChange: () => props.onToggle(choice.poolKey),
+					className: "size-4 shrink-0 accent-primary"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "min-w-0 flex-1 truncate font-mono text-xs",
+					children: choice.poolKey
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+					variant: "outline",
+					className: "font-mono text-[10px]",
+					children: choice.statusLabel
+				})
+			]
+		}, choice.poolKey))
+	});
+}
+function ReadOnlyField(props) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
+		className: "grid gap-1.5 text-sm",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: "console-callout",
+			children: props.label
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+			readOnly: true,
+			value: props.value,
+			className: cn("h-9 min-w-0 rounded-md border bg-muted px-3 font-mono text-sm", props.muted && "text-muted-foreground")
+		})]
+	});
+}
+function InlineState(props) {
+	const Icon = props.icon;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex min-w-0 items-start gap-3 rounded-md border border-dashed p-3",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: cn("mt-0.5 size-4 shrink-0", props.tone === "error" ? "text-status-failed" : "text-muted-foreground") }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-sm font-medium",
+				children: props.title
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "mt-1 text-sm text-muted-foreground",
+				children: props.detail
+			})]
+		})]
+	});
+}
+function ProjectPlacementSkeleton() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-5 w-40" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-4 w-80 max-w-full" })] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, {
+		className: "grid gap-3",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-24 w-full" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-36 w-full" })]
+	})] });
+}
+function PoolSkeleton() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "grid gap-2 sm:grid-cols-2",
+		children: [0, 1].map((index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-12 w-full" }, index))
+	});
+}
+function validationIcon(tone) {
+	switch (tone) {
+		case "available": return CircleCheck;
+		case "unavailable": return CircleX;
+		case "pending": return Clock3;
+		case "idle": return CircleDashed;
+	}
+}
+function validationToneClass(tone) {
+	switch (tone) {
+		case "available": return "text-status-succeeded";
+		case "unavailable": return "text-status-failed";
+		case "pending": return "text-status-warn";
+		case "idle": return "text-muted-foreground";
+	}
+}
+function PageHeader() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
+		className: "text-lg font-semibold tracking-tight",
+		children: "Projects"
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+		className: "text-sm text-muted-foreground",
+		children: "Project-scoped run history for this account."
+	})] });
+}
+function ProjectSection(props) {
+	if (props.projects.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, {
+		className: "py-8 text-center",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, {
+			className: "text-sm text-muted-foreground",
+			children: "No active projects."
+		})
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "grid gap-2",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
+			className: "console-callout",
+			children: props.title
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "grid gap-3 md:grid-cols-2",
+			children: props.projects.map((project) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProjectCard, {
+				project,
+				runCount: countProjectRuns(project, props.runs),
+				archived: props.archived === true
+			}, project.projectId))
+		})]
+	});
+}
+function ProjectCard(props) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, {
+		className: props.archived ? "border-dashed opacity-80" : void 0,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardHeader, {
+			className: "gap-3",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex min-w-0 items-start gap-3",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-md border bg-background",
+					children: props.archived ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Archive, { className: "size-4 text-muted-foreground" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Folder, { className: "size-4 text-muted-foreground" })
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "flex min-w-0 flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, {
+							className: "truncate text-base",
+							children: props.project.name
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+							variant: props.archived ? "outline" : "secondary",
+							children: props.project.status
+						})]
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "mt-1 font-mono text-xs text-muted-foreground",
+						children: props.project.projectKey
+					})]
+				})]
+			})
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, {
+			className: "flex flex-wrap items-center gap-3",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: "font-mono text-xs text-muted-foreground",
+					"data-num": true,
+					children: [props.runCount, " loaded runs"]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: "font-mono text-xs text-muted-foreground",
+					title: props.project.updatedAt,
+					"data-num": true,
+					children: ["Updated ", timeAgo(props.project.updatedAt)]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+					asChild: true,
+					size: "sm",
+					variant: "outline",
+					className: "ml-auto",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
+						to: "/runs",
+						search: { project: props.project.projectKey },
+						children: "Runs"
+					})
+				})
+			]
+		})]
+	});
+}
+function ProjectSkeleton() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "grid gap-3 md:grid-cols-2",
+		children: [
+			0,
+			1,
+			2,
+			3
+		].map((index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-5 w-40" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-4 w-24" })] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-8 w-full" }) })] }, index))
+	});
+}
+function countProjectRuns(project, runs) {
+	return runs.filter((run) => projectMatchesRun(project, run)).length;
+}
+//#endregion
+export { ProjectsPage };

package/dist/node_modules/@flakes/console/.output/server/_chunks/RunPage.mjs

@@ -4,9 +4,10 @@ import { f as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
 import { l as require_react_dom, u as require_react } from "../_libs/@floating-ui/react-dom+[...].mjs";
 import { t as cva } from "../_libs/class-variance-authority+clsx.mjs";
 import { i as Trigger, n as List, r as Root2, t as Content } from "../_libs/radix-ui__react-tabs.mjs";
-import { D as LoaderCircle, E as Lock, F as Download, I as Clock, M as FileText, P as Expand, S as Maximize2, n as ZoomIn, r as X, s as Trash2, t as ZoomOut } from "../_libs/lucide-react.mjs";
-import { a as useRunFileReservations, g as downloadFile, i as useRunArtifacts, n as useDeleteRun, o as useRunMetrics, r as useRun, s as useRunTasks, t as cn } from "./utils.mjs";
+import { D as LoaderCircle, E as Lock, F as FileText, L as Expand, R as Download, S as Maximize2, n as ZoomIn, r as X, s as Trash2, t as ZoomOut, z as Clock } from "../_libs/lucide-react.mjs";
+import { S as downloadFile, c as useRunArtifacts, d as useRunTasks, l as useRunFileReservations, n as useDeleteRun, o as useProjects, s as useRun, t as cn, u as useRunMetrics } from "./utils.mjs";
 import { t as Button } from "./button.mjs";
+import { n as projectLabelForRun } from "./project-navigation.mjs";
 import { n as CardContent, t as Card } from "./card.mjs";
 import { a as taskDisplayName, c as timeAgo, d as Skeleton, f as Badge, i as hashDelay, l as useClockTick, n as StatusBar, o as taskOrdinals, r as fmtTime, t as StateBadge, u as useFlash } from "./bits.mjs";
 import { a as TableHeader, i as TableHead, n as TableBody, o as TableRow, r as TableCell, t as Table } from "./table.mjs";
@@ -1165,6 +1166,7 @@ function runElapsed(run) {
 }
 function RunPage(props) {
 	const run = useRun(props.runId);
+	const projects = useProjects();
 	const tasks = useRunTasks(props.runId);
 	const artifacts = useRunArtifacts(props.runId);
 	const metrics = useRunMetrics(props.runId);
@@ -1192,6 +1194,7 @@ function RunPage(props) {
 	const terminalTasks = terminalTaskStatuses.reduce((sum, status) => sum + (counts[status] ?? 0), 0);
 	const terminalFlash = useFlash(terminalTasks);
 	const elapsed = runElapsed(run.data);
+	const projectLabel = run.data === void 0 ? void 0 : projectLabelForRun(projects.data?.projects ?? [], run.data);
 	const canvasShown = canvasChoice ?? taskList.length <= MAP_AUTO_COLLAPSE_TASKS;
 	const canDeleteRun = run.data !== void 0 && terminalRunStates.has(run.data.state);
 	async function deleteThisRun() {
@@ -1265,10 +1268,14 @@ function RunPage(props) {
 				}),
 				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
 					className: "font-mono text-xs text-muted-foreground",
-					children: [props.runId, run.data ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [" · created ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-						title: run.data.createdAt,
-						children: timeAgo(run.data.createdAt)
-					})] }) : null]
+					children: [
+						props.runId,
+						projectLabel !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [" · ", projectLabel] }) : null,
+						run.data ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [" · created ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							title: run.data.createdAt,
+							children: timeAgo(run.data.createdAt)
+						})] }) : null
+					]
 				}),
 				deleteError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
 					className: "text-xs text-destructive",