@knpkv/alchemy-console 0.3.2 → 0.4.0

package/dist/views/index.js

@@ -1,9 +1,591 @@
-import { Icon as e } from "@knpkv/rly/foundations";
-import { Button as t, Notice as n, Skeleton as r, Text as i } from "@knpkv/rly/primitives";
-import { useId as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region src/presentation/StackListView.tsx
-var c = new URL(new URL("empty-creature.svg", import.meta.url).href, "" + import.meta.url).href, l = (e) => e.source === "s3" ? e.reason === "denied" ? {
+import { Button as e, Notice as t, Skeleton as n, Tabs as r, Text as i } from "@knpkv/rly/primitives";
+import { useId as a, useMemo as o, useState as s } from "react";
+import { Icon as c } from "@knpkv/rly/foundations";
+import { DateTime as l, Option as u, Schema as d } from "effect";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/presentation/detail-parts.tsx
+var m = () => /* @__PURE__ */ f("span", {
+	className: "ac-detail-muted",
+	children: "Not available yet"
+}), h = ({ children: e, title: t, unavailable: n = !1 }) => /* @__PURE__ */ p("div", {
+	className: n ? "ac-detail-panel ac-detail-unavailable" : "ac-detail-panel",
+	children: [/* @__PURE__ */ f(i, {
+		as: "p",
+		className: "ac-detail-panel-title",
+		children: t
+	}), e === void 0 ? null : /* @__PURE__ */ f(i, {
+		as: "p",
+		tone: "secondary",
+		children: e
+	})]
+}), g = ({ status: e }) => {
+	if (e === null) return /* @__PURE__ */ f("span", {
+		className: "ac-detail-muted",
+		children: "Unknown"
+	});
+	let t = e === "created" || e === "updated" || e === "replaced";
+	return /* @__PURE__ */ p("span", {
+		className: `ac-resource-status ${t ? "ac-resource-success" : e === "failed" ? "ac-resource-failed" : "ac-resource-working"}`,
+		children: [
+			/* @__PURE__ */ f(c, {
+				name: t ? "check" : e === "failed" ? "alert" : "loader",
+				decorative: !0,
+				size: "small"
+			}),
+			e.slice(0, 1).toUpperCase(),
+			e.slice(1)
+		]
+	});
+}, _ = ({ value: e }) => {
+	let t = u.getOrNull(d.decodeUnknownOption(d.DateTimeUtcFromString)(e));
+	return t === null ? /* @__PURE__ */ f(m, {}) : /* @__PURE__ */ f("time", {
+		dateTime: l.formatIso(t),
+		children: new Intl.DateTimeFormat("en-GB", {
+			day: "numeric",
+			month: "short",
+			hour: "2-digit",
+			minute: "2-digit"
+		}).format(l.toEpochMillis(t))
+	});
+}, v = ({ resource: e }) => e.consoleUrl === null ? null : /* @__PURE__ */ p("a", {
+	"data-rly-hit-area": !0,
+	className: "ac-detail-link ac-provider-link",
+	href: e.consoleUrl,
+	target: "_blank",
+	rel: "noopener noreferrer",
+	children: [
+		"Open in ",
+		e.resourceType.startsWith("Cloudflare.") ? "Cloudflare" : "AWS",
+		" console",
+		" ",
+		/* @__PURE__ */ f("span", {
+			"aria-hidden": "true",
+			children: "↗"
+		}),
+		/* @__PURE__ */ p("span", {
+			className: "ac-sr-only",
+			children: [
+				" for ",
+				e.logicalId,
+				", opens in a new tab"
+			]
+		})
+	]
+}), y = ({ copy: t, onReadAgain: r, state: a }) => a._tag === "Loading" ? /* @__PURE__ */ p("div", {
+	"aria-busy": "true",
+	className: "ac-detail-loading",
+	children: [
+		/* @__PURE__ */ f("span", {
+			className: "ac-sr-only",
+			role: "status",
+			children: "Reading stack state…"
+		}),
+		/* @__PURE__ */ f(n, { className: "ac-detail-title-skeleton" }),
+		/* @__PURE__ */ f(n, {
+			variant: "block",
+			className: "ac-detail-body-skeleton"
+		})
+	]
+}) : /* @__PURE__ */ p("section", {
+	className: "ac-state-panel",
+	role: "status",
+	children: [
+		/* @__PURE__ */ f(i, {
+			as: "h1",
+			className: "ac-state-title",
+			variant: "section-title",
+			children: a._tag === "Unauthorized" ? a.reason === "bootstrap" ? "Sign-in failed or link already used." : `Your ${t.product} session has ended.` : a._tag === "NotFound" ? "This stack is no longer available." : "Stack state is unavailable right now."
+		}),
+		/* @__PURE__ */ f(i, {
+			as: "p",
+			tone: "secondary",
+			children: a._tag === "Unauthorized" ? "Sign in again to see stacks." : a._tag === "NotFound" ? "Return to Stacks and Read again. Nothing was changed." : "The stack state couldn’t be read, so no resources are shown. Nothing was changed."
+		}),
+		a._tag === "Unauthorized" ? /* @__PURE__ */ f(i, {
+			as: "p",
+			variant: "meta",
+			tone: "secondary",
+			children: t.signInInstruction
+		}) : a._tag === "Failed" ? /* @__PURE__ */ f(e, {
+			className: "ac-read",
+			onClick: r,
+			children: "Retry"
+		}) : null
+	]
+}), b = (e) => {
+	if (e.length > 5e4 || new Map(e.map((e) => [e.fqn, e])).size !== e.length) return null;
+	let t = new Map(e.map((e) => [e.fqn, []])), n = 0;
+	for (let r of e) {
+		if (r.downstream === null || (n += r.downstream.length, n > 1e5)) return null;
+		for (let e of new Set(r.downstream)) {
+			let n = t.get(e);
+			if (n === void 0 || e === r.fqn) return null;
+			n.push(r);
+		}
+	}
+	return t;
+}, x = ({ copy: e, resource: t, resourceHref: n, stack: r, stackHref: a }) => {
+	let s = o(() => b(r.resources), [r.resources])?.get(t.fqn) ?? null;
+	return /* @__PURE__ */ p("div", {
+		className: "ac-detail ac-resource-detail",
+		children: [
+			/* @__PURE__ */ p("a", {
+				"data-rly-hit-area": !0,
+				className: "ac-detail-link ac-resource-back",
+				href: a,
+				children: [
+					"← ",
+					r.app,
+					" ",
+					r.stage
+				]
+			}),
+			/* @__PURE__ */ p("header", {
+				className: "ac-detail-header",
+				children: [/* @__PURE__ */ f(i, {
+					as: "h1",
+					variant: "page-title",
+					className: "ac-title",
+					children: t.logicalId
+				}), /* @__PURE__ */ f(i, {
+					as: "p",
+					tone: "secondary",
+					children: t.resourceType
+				})]
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "ac-resource-identity",
+				children: [
+					/* @__PURE__ */ p("dl", {
+						className: "ac-identity-table",
+						children: [
+							/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("dt", { children: "Logical name" }), /* @__PURE__ */ f("dd", { children: t.logicalId })] }),
+							/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("dt", { children: "Type" }), /* @__PURE__ */ f("dd", {
+								className: "ac-resource-id",
+								children: t.resourceType
+							})] }),
+							/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("dt", { children: "Physical ID" }), /* @__PURE__ */ f("dd", {
+								className: "ac-resource-id",
+								children: t.providerId ?? /* @__PURE__ */ f(m, {})
+							})] }),
+							/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("dt", { children: "Region" }), /* @__PURE__ */ f("dd", { children: t.region ?? /* @__PURE__ */ f(m, {}) })] }),
+							/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("dt", { children: "Account" }), /* @__PURE__ */ f("dd", {
+								className: "ac-resource-id",
+								children: t.account ?? /* @__PURE__ */ f(m, {})
+							})] }),
+							/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("dt", { children: "Status" }), /* @__PURE__ */ f("dd", { children: /* @__PURE__ */ f(g, { status: t.status }) })] }),
+							/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("dt", { children: "Last updated" }), /* @__PURE__ */ f("dd", { children: /* @__PURE__ */ f(_, { value: t.updatedAt }) })] }),
+							/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("dt", { children: "Construct" }), /* @__PURE__ */ f("dd", { children: t.parent ?? /* @__PURE__ */ f(m, {}) })] })
+						]
+					}),
+					/* @__PURE__ */ f(i, {
+						as: "p",
+						variant: "meta",
+						tone: "secondary",
+						children: "Identity comes from this resource’s own state and is shown only to the signed-in owner."
+					}),
+					/* @__PURE__ */ f(v, { resource: t })
+				]
+			}),
+			s !== null && s.length > 0 ? /* @__PURE__ */ p("section", {
+				className: "ac-detail-section",
+				children: [/* @__PURE__ */ f(i, {
+					as: "h2",
+					variant: "section-title",
+					children: "Dependencies"
+				}), /* @__PURE__ */ f("ul", {
+					className: "ac-dependencies",
+					children: s.map((e) => /* @__PURE__ */ p("li", { children: [/* @__PURE__ */ f("a", {
+						"data-rly-hit-area": !0,
+						className: "ac-detail-link ac-resource-name",
+						href: n(e),
+						children: e.logicalId
+					}), /* @__PURE__ */ f("span", {
+						className: "ac-resource-type",
+						children: e.resourceType
+					})] }, e.fqn))
+				})]
+			}) : null,
+			/* @__PURE__ */ p("section", {
+				className: "ac-detail-section",
+				children: [/* @__PURE__ */ f(i, {
+					as: "h2",
+					variant: "section-title",
+					children: "Properties"
+				}), /* @__PURE__ */ p(h, {
+					title: "Not available yet",
+					children: [e.product, " shows resource identity only for now. Properties come later."]
+				})]
+			})
+		]
+	});
+}, S = new URL(new URL("empty-state-creature.svg", import.meta.url).href, "" + import.meta.url).href, C = (e) => {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) {
+		let e = t.get(n.parent);
+		e === void 0 && (e = {
+			parent: n.parent,
+			resources: [],
+			types: /* @__PURE__ */ new Map()
+		}, t.set(n.parent, e)), e.resources.push(n);
+		let r = e.types.get(n.resourceType);
+		r === void 0 ? e.types.set(n.resourceType, [n]) : r.push(n);
+	}
+	return [...t.values()];
+}, w = ({ app: e, resourceHref: t, resources: n, stage: r }) => {
+	let o = a(), s = C(n);
+	return /* @__PURE__ */ p("section", {
+		className: "ac-detail-section",
+		"aria-labelledby": o,
+		children: [/* @__PURE__ */ p("div", {
+			className: "ac-detail-section-heading",
+			children: [/* @__PURE__ */ f(i, {
+				as: "h2",
+				variant: "section-title",
+				id: o,
+				children: "Resources"
+			}), /* @__PURE__ */ p(i, {
+				variant: "meta",
+				tone: "secondary",
+				children: [
+					n.length,
+					" ",
+					n.length === 1 ? "resource" : "resources",
+					s.length === 0 ? "" : ` · ${s.filter((e) => e.parent !== null).length} constructs`
+				]
+			})]
+		}), n.length === 0 ? /* @__PURE__ */ p("div", {
+			className: "ac-detail-panel ac-empty-state",
+			children: [/* @__PURE__ */ f("img", {
+				className: "ac-empty-state-creature",
+				src: S,
+				alt: "",
+				"aria-hidden": "true",
+				width: "56",
+				height: "56"
+			}), /* @__PURE__ */ p("div", {
+				className: "ac-empty-state-copy",
+				children: [/* @__PURE__ */ f(i, {
+					as: "p",
+					className: "ac-detail-panel-title",
+					children: "No resources in state"
+				}), /* @__PURE__ */ p(i, {
+					as: "p",
+					tone: "secondary",
+					children: [
+						e,
+						" / ",
+						r,
+						" has state but records no resources. Nothing has been created yet, or everything was removed in an earlier deployment."
+					]
+				})]
+			})]
+		}) : /* @__PURE__ */ f("div", {
+			className: "ac-resource-tree",
+			children: s.map((e, n) => /* @__PURE__ */ f(T, {
+				construct: e,
+				initiallyOpen: n === 0 || s.length > 2 && n === 1,
+				resourceHref: t
+			}, e.parent ?? ""))
+		})]
+	});
+}, T = ({ construct: e, initiallyOpen: t, resourceHref: n }) => {
+	let [r, i] = s(t);
+	return /* @__PURE__ */ p("details", {
+		open: r,
+		onToggle: (e) => i(e.currentTarget.open),
+		className: "ac-construct",
+		children: [/* @__PURE__ */ p("summary", { children: [
+			/* @__PURE__ */ f(c, {
+				name: r ? "chevron-down" : "chevron-right",
+				decorative: !0,
+				size: "small"
+			}),
+			/* @__PURE__ */ f("span", {
+				className: "ac-construct-name",
+				children: e.parent ?? "No construct"
+			}),
+			/* @__PURE__ */ p("span", {
+				className: "ac-construct-count",
+				children: [
+					e.resources.length,
+					" ",
+					e.resources.length === 1 ? "resource" : "resources"
+				]
+			})
+		] }), /* @__PURE__ */ f("div", {
+			className: "ac-construct-types",
+			children: [...e.types].map(([e, t]) => /* @__PURE__ */ p("section", {
+				className: "ac-type-group",
+				"aria-label": e,
+				children: [/* @__PURE__ */ p("div", {
+					className: "ac-tree-type",
+					children: [
+						e,
+						" ",
+						/* @__PURE__ */ f("span", { children: t.length })
+					]
+				}), /* @__PURE__ */ f("ul", { children: t.map((e) => /* @__PURE__ */ f("li", { children: /* @__PURE__ */ p("a", {
+					href: n(e),
+					className: "ac-tree-resource ac-detail-link",
+					children: [/* @__PURE__ */ f("span", { children: e.logicalId }), /* @__PURE__ */ f(c, {
+						name: "chevron-right",
+						decorative: !0,
+						size: "small"
+					})]
+				}) }, e.fqn)) })]
+			}, e))
+		})]
+	});
+}, E = ({ children: e }) => /* @__PURE__ */ f("span", {
+	className: "ac-detail-mobile-label",
+	"aria-hidden": "true",
+	children: e
+}), D = ({ resourceHref: e, stack: t }) => {
+	let n = a(), r = t.resources.filter((e) => e.status === "failed").length, o = t.resources.filter((e) => e.status === null).length;
+	return /* @__PURE__ */ p("section", {
+		className: "ac-detail-section",
+		"aria-labelledby": n,
+		children: [/* @__PURE__ */ p("div", {
+			className: "ac-detail-section-heading",
+			children: [/* @__PURE__ */ f(i, {
+				as: "h2",
+				variant: "section-title",
+				id: n,
+				children: "Resources"
+			}), t.resources.length > 0 ? /* @__PURE__ */ p(i, {
+				variant: "meta",
+				tone: "secondary",
+				children: [
+					t.resources.length,
+					" ",
+					t.resources.length === 1 ? "resource" : "resources",
+					r > 0 ? ` · ${r} failed` : "",
+					o > 0 ? ` · ${o} Unknown` : ""
+				]
+			}) : null]
+		}), t.resources.length === 0 ? /* @__PURE__ */ f(h, {
+			title: "No resources in this stack’s state.",
+			children: "Resources appear here once a deployment records them."
+		}) : /* @__PURE__ */ f("div", {
+			className: "ac-detail-table-wrap",
+			children: /* @__PURE__ */ p("table", {
+				className: "ac-detail-table ac-resource-table",
+				"aria-labelledby": n,
+				children: [/* @__PURE__ */ f("thead", { children: /* @__PURE__ */ p("tr", { children: [
+					/* @__PURE__ */ f("th", {
+						scope: "col",
+						children: "Logical name"
+					}),
+					/* @__PURE__ */ f("th", {
+						scope: "col",
+						children: "Type"
+					}),
+					/* @__PURE__ */ f("th", {
+						scope: "col",
+						children: "Physical ID"
+					}),
+					/* @__PURE__ */ f("th", {
+						scope: "col",
+						children: "Status"
+					}),
+					/* @__PURE__ */ f("th", {
+						scope: "col",
+						children: "Last updated"
+					}),
+					/* @__PURE__ */ f("th", {
+						scope: "col",
+						children: /* @__PURE__ */ f("span", {
+							className: "ac-sr-only",
+							children: "Provider console"
+						})
+					})
+				] }) }), /* @__PURE__ */ f("tbody", { children: t.resources.map((t) => /* @__PURE__ */ p("tr", { children: [
+					/* @__PURE__ */ p("th", {
+						scope: "row",
+						children: [/* @__PURE__ */ f(E, { children: "Logical name" }), /* @__PURE__ */ f("a", {
+							"data-rly-hit-area": !0,
+							className: "ac-detail-link ac-resource-name",
+							href: e(t),
+							children: t.logicalId
+						})]
+					}),
+					/* @__PURE__ */ p("td", {
+						className: "ac-resource-type",
+						children: [/* @__PURE__ */ f(E, { children: "Type" }), t.resourceType]
+					}),
+					/* @__PURE__ */ p("td", {
+						className: "ac-resource-id",
+						children: [/* @__PURE__ */ f(E, { children: "Physical ID" }), t.providerId ?? /* @__PURE__ */ f(m, {})]
+					}),
+					/* @__PURE__ */ p("td", {
+						className: "ac-resource-status-cell",
+						children: [/* @__PURE__ */ f(E, { children: "Status" }), /* @__PURE__ */ f(g, { status: t.status })]
+					}),
+					/* @__PURE__ */ p("td", {
+						className: "ac-resource-time",
+						children: [/* @__PURE__ */ f(E, { children: "Last updated" }), /* @__PURE__ */ f(_, { value: t.updatedAt })]
+					}),
+					/* @__PURE__ */ f("td", {
+						className: "ac-resource-console",
+						children: /* @__PURE__ */ f(v, { resource: t })
+					})
+				] }, t.fqn)) })]
+			})
+		})]
+	});
+}, O = ({ outputs: e }) => {
+	let t = a(), n = e?.filter((e) => e.value._tag === "Hidden").length ?? 0;
+	return /* @__PURE__ */ p("section", {
+		className: "ac-detail-section",
+		"aria-labelledby": t,
+		children: [/* @__PURE__ */ p("div", {
+			className: "ac-detail-section-heading",
+			children: [/* @__PURE__ */ f(i, {
+				as: "h2",
+				variant: "section-title",
+				id: t,
+				children: "Outputs"
+			}), e !== null && e.length > 0 ? /* @__PURE__ */ p(i, {
+				variant: "meta",
+				tone: "secondary",
+				children: [
+					e.length,
+					" ",
+					e.length === 1 ? "output" : "outputs",
+					" · ",
+					n,
+					" hidden"
+				]
+			}) : null]
+		}), e === null ? /* @__PURE__ */ f(h, {
+			title: "Not available yet",
+			unavailable: !0,
+			children: "The outputs in this stack’s state can’t be read yet."
+		}) : e.length === 0 ? /* @__PURE__ */ f(h, { title: "This stack has no outputs." }) : /* @__PURE__ */ f("div", {
+			className: "ac-detail-table-wrap",
+			children: /* @__PURE__ */ p("table", {
+				className: "ac-detail-table ac-output-table",
+				"aria-labelledby": t,
+				children: [/* @__PURE__ */ f("thead", { children: /* @__PURE__ */ p("tr", { children: [
+					/* @__PURE__ */ f("th", {
+						scope: "col",
+						children: "Key"
+					}),
+					/* @__PURE__ */ f("th", {
+						scope: "col",
+						children: "Value"
+					}),
+					/* @__PURE__ */ f("th", {
+						scope: "col",
+						children: "Description"
+					})
+				] }) }), /* @__PURE__ */ f("tbody", { children: e.map((e) => /* @__PURE__ */ p("tr", { children: [
+					/* @__PURE__ */ p("th", {
+						scope: "row",
+						children: [/* @__PURE__ */ f(E, { children: "Key" }), /* @__PURE__ */ f("span", {
+							className: "ac-output-key",
+							children: e.key
+						})]
+					}),
+					/* @__PURE__ */ p("td", { children: [/* @__PURE__ */ f(E, { children: "Value" }), e.value._tag === "Hidden" ? /* @__PURE__ */ f("span", {
+						className: "ac-detail-muted",
+						children: "Hidden"
+					}) : /* @__PURE__ */ f("span", {
+						className: "ac-output-value",
+						children: e.value.text
+					})] }),
+					/* @__PURE__ */ p("td", {
+						className: "ac-detail-muted",
+						children: [/* @__PURE__ */ f(E, { children: "Description" }), e.description ?? /* @__PURE__ */ f(m, {})]
+					})
+				] }, e.key)) })]
+			})
+		})]
+	});
+}, k = ({ copy: e, onReadAgain: t, onTabChange: n, resourceHref: a, state: o, tab: s }) => {
+	if (o._tag !== "Ready") return /* @__PURE__ */ f("div", {
+		className: "ac-detail",
+		children: /* @__PURE__ */ f(y, {
+			state: o,
+			copy: e,
+			onReadAgain: t
+		})
+	});
+	let c = o.stack;
+	return /* @__PURE__ */ p("div", {
+		className: "ac-detail",
+		children: [
+			/* @__PURE__ */ p("header", {
+				className: "ac-detail-header",
+				children: [/* @__PURE__ */ p("div", {
+					className: "ac-detail-title-row",
+					children: [/* @__PURE__ */ f(i, {
+						as: "h1",
+						variant: "page-title",
+						className: "ac-title",
+						children: c.app
+					}), /* @__PURE__ */ f("span", {
+						className: "ac-stage-badge",
+						children: c.stage
+					})]
+				}), /* @__PURE__ */ f(i, {
+					as: "p",
+					tone: "secondary",
+					className: "ac-description",
+					children: "Infrastructure state. Read-only."
+				})]
+			}),
+			/* @__PURE__ */ p("dl", {
+				className: "ac-stack-metadata",
+				children: [
+					/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("dt", { children: "Region" }), /* @__PURE__ */ f("dd", { children: "Unknown" })] }),
+					/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("dt", { children: "Backend" }), /* @__PURE__ */ f("dd", { children: c.backend === "s3" ? "State bucket" : "Local" })] }),
+					/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("dt", { children: "Alchemy version" }), /* @__PURE__ */ f("dd", {
+						className: "ac-resource-id",
+						children: c.alchemyVersion ?? "Unknown"
+					})] }),
+					/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("dt", { children: "Last deploy" }), /* @__PURE__ */ f("dd", { children: c.lastDeploy === null ? "Unknown" : /* @__PURE__ */ f(_, { value: c.lastDeploy }) })] })
+				]
+			}),
+			/* @__PURE__ */ f(r, {
+				className: "ac-detail-tabs",
+				"aria-label": "Stack state",
+				size: "large",
+				value: s,
+				"data-mobile-layout": "single-row",
+				onValueChange: (e) => {
+					(e === "resources" || e === "outputs" || e === "state") && n(e);
+				},
+				items: [
+					{
+						value: "resources",
+						label: "Resources",
+						content: /* @__PURE__ */ f(D, {
+							stack: c,
+							resourceHref: a
+						})
+					},
+					{
+						value: "outputs",
+						label: "Outputs",
+						content: /* @__PURE__ */ f(O, { outputs: c.outputs })
+					},
+					{
+						value: "state",
+						label: "State",
+						content: /* @__PURE__ */ f(w, {
+							app: c.app,
+							stage: c.stage,
+							resources: c.resources,
+							resourceHref: a
+						})
+					}
+				]
+			})
+		]
+	});
+}, A = new URL(new URL("empty-creature.svg", import.meta.url).href, "" + import.meta.url).href, j = (e) => e.source === "s3" ? e.reason === "denied" ? {
 	tone: "critical",
 	title: "State bucket access denied.",
 	body: "Discovery is incomplete — stacks that could be read are listed.",
@@ -23,268 +605,286 @@ var c = new URL(new URL("empty-creature.svg", import.meta.url).href, "" + import
 	title: "Local discovery is incomplete.",
 	body: "A local state file couldn’t be read, so some local stacks may be missing. The stacks below were read normally.",
 	hint: "Discovery only reads state; it doesn’t repair it. Check local state, then Read again."
-}, u = ({ issue: e }) => {
-	let t = l(e);
-	return /* @__PURE__ */ s(n, {
+}, M = ({ issue: e }) => {
+	let n = j(e);
+	return /* @__PURE__ */ p(t, {
 		className: "ac-notice",
-		tone: t.tone,
-		children: [/* @__PURE__ */ s("p", { children: [
-			/* @__PURE__ */ o("strong", { children: t.title }),
+		tone: n.tone,
+		children: [/* @__PURE__ */ p("p", { children: [
+			/* @__PURE__ */ f("strong", { children: n.title }),
 			" ",
-			t.body
-		] }), /* @__PURE__ */ o("p", {
+			n.body
+		] }), /* @__PURE__ */ f("p", {
 			className: "ac-notice-hint",
-			children: t.hint
+			children: n.hint
 		})]
 	});
-}, d = ({ app: e, stacks: t }) => {
-	let n = a();
-	return /* @__PURE__ */ s("section", {
+}, N = ({ app: e, stackHref: t, stacks: n }) => {
+	let r = a();
+	return /* @__PURE__ */ p("section", {
 		className: "ac-group",
-		children: [/* @__PURE__ */ s("div", {
+		children: [/* @__PURE__ */ p("div", {
 			className: "ac-group-heading",
-			children: [/* @__PURE__ */ o(i, {
+			children: [/* @__PURE__ */ f(i, {
 				as: "h2",
-				id: n,
+				id: r,
 				variant: "section-title",
 				children: e
-			}), /* @__PURE__ */ s(i, {
+			}), /* @__PURE__ */ p(i, {
 				variant: "meta",
 				tone: "secondary",
 				children: [
-					t.length,
+					n.length,
 					" ",
-					t.length === 1 ? "stage" : "stages"
+					n.length === 1 ? "stage" : "stages"
 				]
 			})]
-		}), /* @__PURE__ */ o("div", {
+		}), /* @__PURE__ */ f("div", {
 			className: "ac-table-wrap",
-			children: /* @__PURE__ */ s("table", {
+			children: /* @__PURE__ */ p("table", {
 				className: "ac-table",
-				"aria-labelledby": n,
-				children: [/* @__PURE__ */ o("thead", { children: /* @__PURE__ */ s("tr", { children: [
-					/* @__PURE__ */ o("th", {
+				"aria-labelledby": r,
+				children: [/* @__PURE__ */ f("thead", { children: /* @__PURE__ */ p("tr", { children: [
+					/* @__PURE__ */ f("th", {
 						scope: "col",
 						children: "Stage"
 					}),
-					/* @__PURE__ */ o("th", {
+					/* @__PURE__ */ f("th", {
 						scope: "col",
 						children: "Backend"
 					}),
-					/* @__PURE__ */ o("th", {
+					/* @__PURE__ */ f("th", {
 						scope: "col",
 						children: "Alchemy"
 					}),
-					/* @__PURE__ */ o("th", {
+					/* @__PURE__ */ f("th", {
 						scope: "col",
 						children: "Last deploy"
 					}),
-					/* @__PURE__ */ o("th", {
+					/* @__PURE__ */ f("th", {
 						scope: "col",
 						children: "Resources"
 					})
-				] }) }), /* @__PURE__ */ o("tbody", { children: t.map((t) => /* @__PURE__ */ s("tr", { children: [
-					/* @__PURE__ */ o("th", {
+				] }) }), /* @__PURE__ */ f("tbody", { children: n.map((n) => /* @__PURE__ */ p("tr", { children: [
+					/* @__PURE__ */ f("th", {
 						scope: "row",
-						children: /* @__PURE__ */ s("span", {
+						children: t === void 0 ? /* @__PURE__ */ p("span", {
 							className: "ac-stage",
-							children: [/* @__PURE__ */ s("span", {
+							children: [/* @__PURE__ */ p("span", {
+								className: "ac-sr-only",
+								children: [e, " "]
+							}), n.stage]
+						}) : /* @__PURE__ */ p("a", {
+							className: "ac-stage ac-list-link",
+							"data-rly-hit-area": !0,
+							href: t(n),
+							children: [/* @__PURE__ */ p("span", {
 								className: "ac-sr-only",
 								children: [e, " "]
-							}), t.stage]
+							}), n.stage]
 						})
 					}),
-					/* @__PURE__ */ s("td", { children: [/* @__PURE__ */ o("span", {
+					/* @__PURE__ */ p("td", { children: [/* @__PURE__ */ f("span", {
 						className: "ac-sr-only",
 						children: "Backend: "
-					}), t.backend === "s3" ? "State bucket" : "Local"] }),
-					/* @__PURE__ */ s("td", {
+					}), n.backend === "s3" ? "State bucket" : "Local"] }),
+					/* @__PURE__ */ p("td", {
 						className: "ac-version",
-						children: [/* @__PURE__ */ o("span", {
+						children: [/* @__PURE__ */ f("span", {
 							className: "ac-mobile-label",
 							children: "Alchemy "
-						}), t.alchemyVersion ?? "Unknown"]
+						}), n.alchemyVersion ?? "Unknown"]
 					}),
-					/* @__PURE__ */ s("td", { children: [/* @__PURE__ */ o("span", {
+					/* @__PURE__ */ p("td", { children: [/* @__PURE__ */ f("span", {
 						className: "ac-mobile-label",
 						children: "Last deploy "
-					}), t.lastDeploy ?? "Unknown"] }),
-					/* @__PURE__ */ s("td", { children: [/* @__PURE__ */ o("span", {
-						className: "ac-mobile-label",
-						children: "Resources "
-					}), t.resourceCount ?? "Unknown"] })
-				] }, t.id)) })]
+					}), n.lastDeploy ?? "Unknown"] }),
+					/* @__PURE__ */ p("td", {
+						className: t === void 0 ? void 0 : "ac-list-count",
+						children: [/* @__PURE__ */ f("span", {
+							className: "ac-mobile-label",
+							children: "Resources "
+						}), n.resourceCount === null ? "Unknown" : t === void 0 ? n.resourceCount : /* @__PURE__ */ f("a", {
+							className: "ac-list-link",
+							"data-rly-hit-area": !0,
+							href: t(n),
+							"aria-label": `${e} ${n.stage}: ${n.resourceCount} resources`,
+							children: n.resourceCount
+						})]
+					})
+				] }, n.id)) })]
 			})
 		})]
 	});
-}, f = () => /* @__PURE__ */ o("div", {
+}, P = () => /* @__PURE__ */ f("div", {
 	className: "ac-skeletons",
 	"aria-hidden": "true",
 	children: [
 		"first",
 		"second",
 		"third"
-	].map((e) => /* @__PURE__ */ s("div", {
+	].map((e) => /* @__PURE__ */ p("div", {
 		className: `ac-skeleton-group ac-skeleton-${e}`,
-		children: [/* @__PURE__ */ o(r, { className: "ac-skeleton-heading" }), /* @__PURE__ */ o(r, {
+		children: [/* @__PURE__ */ f(n, { className: "ac-skeleton-heading" }), /* @__PURE__ */ f(n, {
 			className: "ac-skeleton-body",
 			variant: "block"
 		})]
 	}, e))
-}), p = ({ copy: n, onReadAgain: r, state: l }) => {
-	let p = a(), m = l._tag === "Ready" && l.list.stacks.length === 0 && l.list.issues.length === 0, h = l._tag === "Ready" ? l.list.issues.filter((e, t, n) => n.findIndex((t) => t.source === e.source && t.reason === e.reason) === t) : [], g = l._tag === "Ready" ? [...new Set(l.list.stacks.map((e) => e.app))].sort() : [], _ = l._tag === "Loading" ? "Looking in local state and the state bucket…" : l._tag === "Ready" ? h.length > 0 ? `${l.list.stacks.length} stacks found · discovery incomplete` : `${l.list.stacks.length} ${l.list.stacks.length === 1 ? "stack" : "stacks"} · ${g.length} ${g.length === 1 ? "app" : "apps"}` : l._tag === "Unauthorized" ? l.reason === "bootstrap" ? "Sign-in failed or link already used." : `Your ${n.product} session has ended.` : "Stacks are unavailable right now.";
-	return /* @__PURE__ */ s("div", {
+}), F = ({ copy: t, onReadAgain: n, stackHref: r, state: o }) => {
+	let s = a(), l = o._tag === "Ready" && o.list.stacks.length === 0 && o.list.issues.length === 0, u = o._tag === "Ready" ? o.list.issues.filter((e, t, n) => n.findIndex((t) => t.source === e.source && t.reason === e.reason) === t) : [], d = o._tag === "Ready" ? [...new Set(o.list.stacks.map((e) => e.app))].sort() : [], m = o._tag === "Loading" ? "Looking in local state and the state bucket…" : o._tag === "Ready" ? u.length > 0 ? `${o.list.stacks.length} stacks found · discovery incomplete` : `${o.list.stacks.length} ${o.list.stacks.length === 1 ? "stack" : "stacks"} · ${d.length} ${d.length === 1 ? "app" : "apps"}` : o._tag === "Unauthorized" ? o.reason === "bootstrap" ? "Sign-in failed or link already used." : `Your ${t.product} session has ended.` : "Stacks are unavailable right now.";
+	return /* @__PURE__ */ p("div", {
 		className: "ac-stacks",
 		children: [
-			/* @__PURE__ */ s("header", {
+			/* @__PURE__ */ p("header", {
 				className: "ac-list-header",
-				children: [/* @__PURE__ */ o(i, {
+				children: [/* @__PURE__ */ f(i, {
 					as: "h1",
 					className: "ac-title",
 					variant: "page-title",
 					children: "Stacks"
-				}), /* @__PURE__ */ s("div", {
+				}), /* @__PURE__ */ p("div", {
 					className: "ac-list-lead",
-					children: [/* @__PURE__ */ o(i, {
+					children: [/* @__PURE__ */ f(i, {
 						as: "p",
 						className: "ac-description",
 						tone: "secondary",
 						children: "Infrastructure state from local discovery and the state bucket. Read-only."
-					}), m || l._tag === "Unauthorized" || l._tag === "Failed" ? null : /* @__PURE__ */ o(t, {
+					}), l || o._tag === "Unauthorized" || o._tag === "Failed" ? null : /* @__PURE__ */ f(e, {
 						className: "ac-read",
-						disabled: l._tag === "Loading",
-						onClick: r,
-						children: l._tag === "Loading" ? "Reading…" : "Read again"
+						disabled: o._tag === "Loading",
+						onClick: n,
+						children: o._tag === "Loading" ? "Reading…" : "Read again"
 					})]
 				})]
 			}),
-			/* @__PURE__ */ o("div", {
+			/* @__PURE__ */ f("div", {
 				className: "ac-sr-only",
 				role: "status",
 				"aria-live": "polite",
 				"aria-atomic": "true",
-				children: _
+				children: m
 			}),
-			h.map((e) => /* @__PURE__ */ o(u, { issue: e }, `${e.source}-${e.reason}`)),
-			l._tag === "Unauthorized" ? /* @__PURE__ */ s("section", {
+			u.map((e) => /* @__PURE__ */ f(M, { issue: e }, `${e.source}-${e.reason}`)),
+			o._tag === "Unauthorized" ? /* @__PURE__ */ p("section", {
 				className: "ac-state-panel",
-				"aria-labelledby": p,
+				"aria-labelledby": s,
 				children: [
-					/* @__PURE__ */ s("div", {
+					/* @__PURE__ */ p("div", {
 						className: "ac-state-label ac-state-caution",
-						children: [/* @__PURE__ */ o(e, {
+						children: [/* @__PURE__ */ f(c, {
 							name: "alert",
 							size: "small",
 							decorative: !0
-						}), /* @__PURE__ */ o("span", { children: l.reason === "bootstrap" ? "Sign-in failed" : "Signed out" })]
+						}), /* @__PURE__ */ f("span", { children: o.reason === "bootstrap" ? "Sign-in failed" : "Signed out" })]
 					}),
-					/* @__PURE__ */ o(i, {
+					/* @__PURE__ */ f(i, {
 						as: "h2",
-						id: p,
+						id: s,
 						className: "ac-state-title",
 						variant: "section-title",
-						children: l.reason === "bootstrap" ? "Sign-in failed or link already used." : `Your ${n.product} session has ended.`
+						children: o.reason === "bootstrap" ? "Sign-in failed or link already used." : `Your ${t.product} session has ended.`
 					}),
-					/* @__PURE__ */ o(i, {
+					/* @__PURE__ */ f(i, {
 						as: "p",
 						className: "ac-state-body",
 						tone: "secondary",
 						children: "Sign in again to see stacks."
 					}),
-					/* @__PURE__ */ o(i, {
+					/* @__PURE__ */ f(i, {
 						as: "p",
 						className: "ac-state-instruction",
 						variant: "meta",
 						tone: "secondary",
-						children: n.signInInstruction
+						children: t.signInInstruction
 					})
 				]
-			}) : l._tag === "Failed" ? /* @__PURE__ */ s("section", {
+			}) : o._tag === "Failed" ? /* @__PURE__ */ p("section", {
 				className: "ac-state-panel",
-				"aria-labelledby": p,
+				"aria-labelledby": s,
 				children: [
-					/* @__PURE__ */ s("div", {
+					/* @__PURE__ */ p("div", {
 						className: "ac-state-label ac-state-critical",
-						children: [/* @__PURE__ */ o(e, {
+						children: [/* @__PURE__ */ f(c, {
 							name: "alert",
 							size: "small",
 							decorative: !0
-						}), /* @__PURE__ */ o("span", { children: "Unavailable" })]
+						}), /* @__PURE__ */ f("span", { children: "Unavailable" })]
 					}),
-					/* @__PURE__ */ o(i, {
+					/* @__PURE__ */ f(i, {
 						as: "h2",
-						id: p,
+						id: s,
 						className: "ac-state-title",
 						variant: "section-title",
 						children: "Stacks are unavailable right now."
 					}),
-					/* @__PURE__ */ o(i, {
+					/* @__PURE__ */ f(i, {
 						as: "p",
 						className: "ac-state-body",
 						tone: "secondary",
 						children: "The stack list couldn’t be read, so no stacks are shown. Nothing was changed."
 					}),
-					/* @__PURE__ */ o(t, {
+					/* @__PURE__ */ f(e, {
 						className: "ac-read",
-						onClick: r,
+						onClick: n,
 						children: "Retry"
 					})
 				]
-			}) : m ? /* @__PURE__ */ s("div", {
+			}) : l ? /* @__PURE__ */ p("div", {
 				className: "ac-empty",
 				children: [
-					/* @__PURE__ */ o("img", {
+					/* @__PURE__ */ f("img", {
 						className: "ac-empty-creature",
-						src: c,
+						src: A,
 						alt: "",
 						width: "88",
 						height: "88"
 					}),
-					/* @__PURE__ */ o(i, {
+					/* @__PURE__ */ f(i, {
 						as: "h2",
 						className: "ac-empty-title",
 						variant: "section-title",
 						children: "No stacks found in local state or the state bucket."
 					}),
-					/* @__PURE__ */ o(i, {
+					/* @__PURE__ */ f(i, {
 						as: "p",
 						className: "ac-empty-description",
 						tone: "secondary",
 						children: "Local discovery and the state bucket returned no stack state."
 					}),
-					/* @__PURE__ */ o(t, {
+					/* @__PURE__ */ f(e, {
 						className: "ac-read",
-						onClick: r,
+						onClick: n,
 						children: "Read again"
 					}),
-					/* @__PURE__ */ s(i, {
+					/* @__PURE__ */ p(i, {
 						as: "p",
 						className: "ac-empty-foot",
 						variant: "meta",
 						tone: "secondary",
 						children: [
 							"Checked ",
-							l.checkedAt,
+							o.checkedAt,
 							" · stacks appear here after their first deployment from the CLI."
 						]
 					})
 				]
-			}) : /* @__PURE__ */ s("div", {
+			}) : /* @__PURE__ */ p("div", {
 				className: "ac-results",
-				"aria-busy": l._tag === "Loading",
+				"aria-busy": o._tag === "Loading",
 				children: [
-					/* @__PURE__ */ o(i, {
+					/* @__PURE__ */ f(i, {
 						as: "p",
 						className: "ac-summary",
 						variant: "meta",
 						tone: "secondary",
-						children: _
+						children: m
 					}),
-					l._tag === "Loading" ? /* @__PURE__ */ o(f, {}) : l._tag === "Ready" ? g.map((e) => /* @__PURE__ */ o(d, {
+					o._tag === "Loading" ? /* @__PURE__ */ f(P, {}) : o._tag === "Ready" ? d.map((e) => /* @__PURE__ */ f(N, {
 						app: e,
-						stacks: l.list.stacks.filter((t) => t.app === e)
+						stacks: o.list.stacks.filter((t) => t.app === e),
+						stackHref: r
 					}, e)) : null,
-					l._tag === "Ready" && l.list.stacks.length === 0 ? /* @__PURE__ */ o(i, {
+					o._tag === "Ready" && o.list.stacks.length === 0 ? /* @__PURE__ */ f(i, {
 						as: "p",
 						tone: "secondary",
 						children: "No stacks could be read. Discovery is incomplete."
@@ -295,4 +895,4 @@ var c = new URL(new URL("empty-creature.svg", import.meta.url).href, "" + import
 	});
 };
 //#endregion
-export { p as StackListView };
+export { x as ResourceDetailView, k as StackDetailView, F as StackListView };