feat(client): add ContextMenu component, environment cards, detail page, and breadcrumbs

- add ContextMenu component with click-outside/Escape dismiss, align prop, and danger variant
- replace EnvironmentsPage table with responsive card grid
- add cog button to each card opening a context menu with view and delete actions
- add EnvironmentDetailPage at /environments/:id with meta grid, URLs card, and delete
- add Breadcrumbs to all pages; detail page uses two-item trail with delete button inline
- add Table stories for pagination and Timestamp column

client/src/pages/Page.module.css

@@ -5,6 +5,17 @@
   color: var(--color-text);
 }
 
+.breadcrumbs {
+  margin-bottom: var(--space-4);
+}
+
+.pageToolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-4);
+}
+
 .error {
   margin-bottom: var(--space-4);
   padding: var(--space-3) var(--space-4);
@@ -13,3 +24,146 @@
   border-radius: var(--radius-md);
   font-size: var(--font-size-sm);
 }
+
+.muted {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+/* ── Environment cards ──────────────────────────────────────── */
+
+.envGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--space-4);
+}
+
+.envCard {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.envCardHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+.envCardId {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+
+.envCardName {
+  font-weight: 700;
+  font-size: var(--font-size-sm);
+  flex: 1;
+}
+
+.envCardUrls {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.envCardUrlRow {
+  display: flex;
+  gap: var(--space-2);
+  align-items: baseline;
+  font-size: var(--font-size-xs);
+}
+
+.envCardUrlKey {
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.envCardUrlVal {
+  margin: 0;
+  color: var(--color-text);
+  word-break: break-all;
+}
+
+.envCardEmpty {
+  margin: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+}
+
+/* ── Environment detail page ────────────────────────────────────────────── */
+
+.detailToolbar {
+  margin-bottom: var(--space-4);
+}
+
+.detailHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  margin-bottom: var(--space-4);
+}
+
+.detailHeader .heading {
+  margin: 0;
+  flex: 1;
+}
+
+.detailMeta {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: var(--space-1) var(--space-4);
+  margin-bottom: var(--space-6);
+  font-size: var(--font-size-sm);
+}
+
+.metaLabel {
+  color: var(--color-text-muted);
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: var(--font-size-xs);
+  letter-spacing: 0.04em;
+  align-self: center;
+}
+
+.sectionHeading {
+  margin: 0 0 var(--space-3);
+  font-size: var(--font-size-md);
+  font-weight: 700;
+}
+
+.envDetailUrls {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.envDetailUrlRow {
+  display: grid;
+  grid-template-columns: 140px 1fr;
+  gap: var(--space-2);
+  align-items: baseline;
+  font-size: var(--font-size-sm);
+}
+
+.envDetailUrlVal {
+  margin: 0;
+  word-break: break-all;
+}
+
+.envDetailUrlVal a {
+  color: var(--color-text-muted);
+  text-decoration: none;
+}
+
+.envDetailUrlVal a:hover {
+  text-decoration: underline;
+}