feat(client): add Card header/footer, DescriptionList, and portal ContextMenu

- add Card header prop (primary/secondary variants) and footer prop (sticks to bottom)
- add Breadcrumbs to all 5 pages; remove duplicate h1 headings
- add pageToolbar layout for breadcrumbs + danger button aligned right
- add DescriptionList component replacing raw dl/dt/dd markup; supports truncate+tooltip
- rewrite ContextMenu to render dropdown via React portal to avoid clip/overflow issues
- update EnvironmentCard to use Card header (primary), footer (Timestamp), and truncated DescriptionList
- fix cog button contrast, square sizing, and right-edge alignment on colored header
- add border to Timestamp pill for dark-mode visibility
- add id badge pill styling to environment card header

client/src/ui/Card/Card.module.css

@@ -6,6 +6,44 @@
   font-family: var(--font-family);
 }
 
+.header {
+  padding: var(--space-3) var(--space-6);
+  font-weight: 600;
+  font-size: var(--font-size-sm);
+  border-radius: calc(var(--radius-lg) - var(--border-width)) calc(var(--radius-lg) - var(--border-width)) 0 0;
+}
+
+.header-primary {
+  background: var(--color-primary);
+  color: var(--color-primary-fg);
+  border-bottom: var(--border-width) solid var(--color-primary-active);
+}
+
+.header-secondary {
+  background: var(--color-secondary);
+  color: var(--color-secondary-fg);
+  border-bottom: var(--border-width) solid var(--color-secondary-border);
+}
+
+.withFooter {
+  display: flex;
+  flex-direction: column;
+}
+
+.withFooter .body {
+  flex: 1;
+}
+
+.body { }
+
+.footer {
+  padding: var(--space-2) var(--space-6);
+  border-top: var(--border-width) solid var(--color-border);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  background: var(--color-bg-subtle);
+}
+
 .sm { padding: var(--space-3) var(--space-4); }
 .md { padding: var(--space-4) var(--space-6); }
 .lg { padding: var(--space-6) var(--space-8); }

client/src/ui/Card/Card.tsx

@@ -5,12 +5,30 @@ export interface CardProps {
   children: React.ReactNode;
   className?: string;
   padding?: 'sm' | 'md' | 'lg';
+  header?: React.ReactNode;
+  headerVariant?: 'primary' | 'secondary';
+  footer?: React.ReactNode;
 }
 
-export function Card({ children, className, padding = 'md' }: CardProps) {
+export function Card({
+  children,
+  className,
+  padding = 'md',
+  header,
+  headerVariant = 'primary',
+  footer,
+}: CardProps) {
   return (
-    <div className={[styles.card, styles[padding], className].filter(Boolean).join(' ')}>
-      {children}
+    <div
+      className={[styles.card, footer !== undefined ? styles.withFooter : '', className]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {header !== undefined && (
+        <div className={[styles.header, styles[`header-${headerVariant}`]].join(' ')}>{header}</div>
+      )}
+      <div className={[styles.body, styles[padding]].join(' ')}>{children}</div>
+      {footer !== undefined && <div className={styles.footer}>{footer}</div>}
     </div>
   );
 }

client/src/ui/ContextMenu/ContextMenu.module.css

@@ -8,9 +8,7 @@
 }
 
 .menu {
-  position: absolute;
-  top: calc(100% + var(--space-1));
-  z-index: 100;
+  z-index: 9999;
   min-width: 160px;
   margin: 0;
   padding: var(--space-1) 0;
@@ -21,9 +19,6 @@
   box-shadow: var(--shadow-md);
 }
 
-.alignRight { right: 0; }
-.alignLeft  { left: 0; }
-
 .item {
   display: flex;
   align-items: center;

client/src/ui/ContextMenu/ContextMenu.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import styles from './ContextMenu.module.css';
 
 export interface ContextMenuItem {
@@ -17,12 +18,20 @@ export interface ContextMenuProps {
 
 export function ContextMenu({ items, trigger, align = 'right' }: ContextMenuProps) {
   const [open, setOpen] = useState(false);
-  const rootRef = useRef<HTMLDivElement>(null);
+  const [coords, setCoords] = useState({ top: 0, left: 0, right: 0 });
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLUListElement>(null);
 
   useEffect(() => {
     if (!open) return;
     function handleOutside(e: MouseEvent) {
-      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+      const target = e.target as Node;
+      if (
+        triggerRef.current &&
+        !triggerRef.current.contains(target) &&
+        menuRef.current &&
+        !menuRef.current.contains(target)
+      ) {
         setOpen(false);
       }
     }
@@ -39,44 +48,64 @@ export function ContextMenu({ items, trigger, align = 'right' }: ContextMenuProp
     return () => document.removeEventListener('keydown', handleKey);
   }, [open]);
 
+  function openMenu() {
+    if (!triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    setCoords({
+      top: rect.bottom + window.scrollY + 4,
+      left: rect.left + window.scrollX,
+      right: window.innerWidth - rect.right - window.scrollX,
+    });
+    setOpen((v) => !v);
+  }
+
+  const menuStyle =
+    align === 'right'
+      ? { top: coords.top, right: coords.right }
+      : { top: coords.top, left: coords.left };
+
   return (
-    <div className={styles.root} ref={rootRef}>
+    <div className={styles.root} ref={triggerRef}>
       <div
         className={styles.triggerWrap}
         onClick={(e) => {
           e.stopPropagation();
-          setOpen((v) => !v);
+          openMenu();
         }}
       >
         {trigger}
       </div>
-      {open && (
-        <ul
-          className={`${styles.menu} ${align === 'left' ? styles.alignLeft : styles.alignRight}`}
-          role="menu"
-        >
-          {items.map((item, i) => (
-            <li key={i} role="none">
-              <button
-                role="menuitem"
-                className={`${styles.item} ${item.variant === 'danger' ? styles.danger : ''}`}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setOpen(false);
-                  item.onClick();
-                }}
-              >
-                {item.icon && (
-                  <span className={styles.icon} aria-hidden="true">
-                    {item.icon}
-                  </span>
-                )}
-                {item.label}
-              </button>
-            </li>
-          ))}
-        </ul>
-      )}
+      {open &&
+        createPortal(
+          <ul
+            ref={menuRef}
+            className={styles.menu}
+            style={{ ...menuStyle, position: 'fixed' }}
+            role="menu"
+          >
+            {items.map((item, i) => (
+              <li key={i} role="none">
+                <button
+                  role="menuitem"
+                  className={`${styles.item} ${item.variant === 'danger' ? styles.danger : ''}`}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setOpen(false);
+                    item.onClick();
+                  }}
+                >
+                  {item.icon && (
+                    <span className={styles.icon} aria-hidden="true">
+                      {item.icon}
+                    </span>
+                  )}
+                  {item.label}
+                </button>
+              </li>
+            ))}
+          </ul>,
+          document.body,
+        )}
     </div>
   );
 }

client/src/ui/DescriptionList/DescriptionList.module.css

@@ -0,0 +1,39 @@
+.list {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.row {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0;
+  font-size: var(--font-size-sm);
+}
+
+.term {
+  color: var(--color-text-muted);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.detail {
+  margin: 0;
+  color: var(--color-text);
+  word-break: break-all;
+}
+
+.truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: normal;
+  max-width: 100%;
+}
+

client/src/ui/DescriptionList/DescriptionList.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import styles from './DescriptionList.module.css';
+
+function extractText(node: React.ReactNode): string {
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map(extractText).join('');
+  if (React.isValidElement(node)) return extractText(node.props.children);
+  return '';
+}
+
+export interface DescriptionListItem {
+  term: React.ReactNode;
+  detail: React.ReactNode;
+}
+
+export interface DescriptionListProps {
+  items: DescriptionListItem[];
+  /** 'compact' stacks term above detail; 'inline' places them side by side (default) */
+  layout?: 'inline' | 'compact';
+  /** Truncate detail values with ellipsis; full value shown in a tooltip on hover */
+  truncate?: boolean;
+  className?: string;
+}
+
+export function DescriptionList({ items, layout = 'inline', truncate, className }: DescriptionListProps) {
+  return (
+    <dl className={[styles.list, styles[layout], className].filter(Boolean).join(' ')}>
+      {items.map((item, i) => (
+        <div key={i} className={styles.row}>
+          <dt className={styles.term}>{item.term}</dt>
+          <dd
+            className={[styles.detail, truncate ? styles.truncate : ''].filter(Boolean).join(' ')}
+            title={truncate ? extractText(item.detail) : undefined}
+          >
+            {item.detail}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}

client/src/ui/Timestamp/Timestamp.module.css

@@ -10,6 +10,7 @@
   line-height: 1.6;
   background: var(--color-neutral-bg);
   color: var(--color-neutral-fg);
+  border: var(--border-width) solid var(--color-border);
   cursor: default;
 }
 

client/src/ui/index.ts

@@ -30,5 +30,8 @@ export type { PaginationProps } from './Pagination/Pagination';
 export { ContextMenu } from './ContextMenu/ContextMenu';
 export type { ContextMenuProps, ContextMenuItem } from './ContextMenu/ContextMenu';
 
+export { DescriptionList } from './DescriptionList/DescriptionList';
+export type { DescriptionListProps, DescriptionListItem } from './DescriptionList/DescriptionList';
+
 export { Table } from './Table/Table';
 export type { TableProps, TableColumn } from './Table/Table';