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/.storybook/stories/Card.stories.tsx

@@ -18,6 +18,7 @@ const meta: Meta<typeof Card> = {
   ],
   argTypes: {
     padding: { control: 'select', options: ['sm', 'md', 'lg'] },
+    headerVariant: { control: 'select', options: ['primary', 'secondary'] },
   },
 };
 export default meta;
@@ -27,6 +28,31 @@ export const Default: Story = {
   args: { children: 'Card content goes here.', padding: 'md' },
 };
 
+export const WithPrimaryHeader: Story = {
+  args: {
+    header: 'Section Title',
+    headerVariant: 'primary',
+    children: 'Card content with a primary header.',
+  },
+};
+
+export const WithSecondaryHeader: Story = {
+  args: {
+    header: 'Section Title',
+    headerVariant: 'secondary',
+    children: 'Card content with a secondary header.',
+  },
+};
+
+export const WithFooter: Story = {
+  args: {
+    header: 'My Card',
+    headerVariant: 'primary',
+    children: 'Card body content.',
+    footer: 'Last updated 2 minutes ago',
+  },
+};
+
 export const ScenarioCard: Story = {
   render: () => (
     <Card>

client/.storybook/stories/DescriptionList.stories.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DescriptionList } from '../../src/ui/DescriptionList/DescriptionList';
+
+const meta: Meta<typeof DescriptionList> = {
+  title: 'UI/DescriptionList',
+  component: DescriptionList,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div style={{ width: 360 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    layout: { control: 'select', options: ['inline', 'compact'] },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof DescriptionList>;
+
+const urlItems = [
+  { term: 'ID_URL', detail: 'https://id.example.com/' },
+  { term: 'CABINET_URL', detail: 'https://cabinet.example.com/messages' },
+  { term: 'ADMIN_URL', detail: 'https://admin.example.com/' },
+];
+
+export const Inline: Story = {
+  args: { items: urlItems, layout: 'inline' },
+};
+
+export const Compact: Story = {
+  args: { items: urlItems, layout: 'compact' },
+};
+
+export const WithLinks: Story = {
+  args: {
+    layout: 'inline',
+    items: urlItems.map(({ term, detail }) => ({
+      term,
+      detail: (
+        <a href={detail as string} target="_blank" rel="noopener noreferrer">
+          {detail}
+        </a>
+      ),
+    })),
+  },
+};

client/src/pages/EnvironmentDetailPage.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Trash2 } from 'lucide-react';
 import { environments } from '../api';
 import type { Environment } from '../api';
-import { Breadcrumbs, Button, Card, Timestamp } from '../ui';
+import { Breadcrumbs, Button, Card, DescriptionList, Timestamp } from '../ui';
 import styles from './Page.module.css';
 
 export function EnvironmentDetailPage() {
@@ -54,12 +54,19 @@ export function EnvironmentDetailPage() {
       {env && (
         <>
           <div className={styles.detailMeta}>
-            <span className={styles.metaLabel}>{t('environments.field_id')}</span>
+            <DescriptionList
-            <span>{env.id}</span>
+              items={[
-            <span className={styles.metaLabel}>{t('environments.field_created')}</span>
+                { term: t('environments.field_id'), detail: env.id },
-            <Timestamp value={env.createdAt} />
+                {
-            <span className={styles.metaLabel}>{t('environments.field_updated')}</span>
+                  term: t('environments.field_created'),
-            <Timestamp value={env.updatedAt} />
+                  detail: <Timestamp value={env.createdAt} />,
+                },
+                {
+                  term: t('environments.field_updated'),
+                  detail: <Timestamp value={env.updatedAt} />,
+                },
+              ]}
+            />
           </div>
 
           <h2 className={styles.sectionHeading}>{t('environments.section_urls')}</h2>
@@ -67,20 +74,18 @@ export function EnvironmentDetailPage() {
             {Object.entries(env.urls).filter(([, v]) => v).length === 0 ? (
               <p className={styles.muted}>{t('environments.no_urls')}</p>
             ) : (
-              <dl className={styles.envDetailUrls}>
+              <DescriptionList
-                {Object.entries(env.urls)
+                items={Object.entries(env.urls)
                   .filter(([, v]) => v)
-                  .map(([key, value]) => (
+                  .map(([key, value]) => ({
-                    <div key={key} className={styles.envDetailUrlRow}>
+                    term: key,
-                      <dt className={styles.envCardUrlKey}>{key}</dt>
+                    detail: (
-                      <dd className={styles.envDetailUrlVal}>
+                      <a href={value} target="_blank" rel="noopener noreferrer">
-                        <a href={value} target="_blank" rel="noopener noreferrer">
+                        {value}
-                          {value}
+                      </a>
-                        </a>
+                    ),
-                      </dd>
+                  }))}
-                    </div>
+              />
-                  ))}
-              </dl>
             )}
           </Card>
         </>

client/src/pages/EnvironmentsPage.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Settings, ExternalLink, Trash2 } from 'lucide-react';
 import { environments } from '../api';
 import type { Environment } from '../api';
-import { Breadcrumbs, Button, Card, ContextMenu, Timestamp } from '../ui';
+import { Breadcrumbs, Button, Card, ContextMenu, DescriptionList, Timestamp } from '../ui';
 import styles from './Page.module.css';
 
 function EnvironmentCard({ env, onDelete }: { env: Environment; onDelete: (id: number) => void }) {
@@ -12,43 +12,43 @@ function EnvironmentCard({ env, onDelete }: { env: Environment; onDelete: (id: n
   const navigate = useNavigate();
   const urlEntries = Object.entries(env.urls).filter(([, v]) => v);
 
+  const header = (
+    <div className={styles.envCardHeader}>
+      <span className={styles.envCardId}>#{env.id}</span>
+      <span className={styles.envCardName}>{env.name}</span>
+      <ContextMenu
+        align="right"
+        trigger={
+          <Button variant="ghost" size="sm" aria-label={t('environments.menu_label')}>
+            <Settings size={14} />
+          </Button>
+        }
+        items={[
+          {
+            label: t('environments.action_view'),
+            icon: <ExternalLink size={14} />,
+            onClick: () => navigate(`/environments/${env.id}`),
+          },
+          {
+            label: t('environments.action_delete'),
+            icon: <Trash2 size={14} />,
+            variant: 'danger',
+            onClick: () => onDelete(env.id),
+          },
+        ]}
+      />
+    </div>
+  );
+
   return (
-    <Card className={styles.envCard}>
+    <Card
-      <div className={styles.envCardHeader}>
+      className={styles.envCard}
-        <span className={styles.envCardId}>#{env.id}</span>
+      header={header}
-        <span className={styles.envCardName}>{env.name}</span>
+      headerVariant="primary"
-        <Timestamp value={env.updatedAt} />
+      footer={<Timestamp value={env.updatedAt} />}
-        <ContextMenu
+    >
-          align="right"
-          trigger={
-            <Button variant="ghost" size="sm" aria-label={t('environments.menu_label')}>
-              <Settings size={14} />
-            </Button>
-          }
-          items={[
-            {
-              label: t('environments.action_view'),
-              icon: <ExternalLink size={14} />,
-              onClick: () => navigate(`/environments/${env.id}`),
-            },
-            {
-              label: t('environments.action_delete'),
-              icon: <Trash2 size={14} />,
-              variant: 'danger',
-              onClick: () => onDelete(env.id),
-            },
-          ]}
-        />
-      </div>
       {urlEntries.length > 0 && (
-        <dl className={styles.envCardUrls}>
+        <DescriptionList truncate items={urlEntries.map(([key, value]) => ({ term: key, detail: value }))} />
-          {urlEntries.map(([key, value]) => (
-            <div key={key} className={styles.envCardUrlRow}>
-              <dt className={styles.envCardUrlKey}>{key}</dt>
-              <dd className={styles.envCardUrlVal}>{value}</dd>
-            </div>
-          ))}
-        </dl>
       )}
       {urlEntries.length === 0 && (
         <p className={styles.envCardEmpty}>{t('environments.no_urls')}</p>

client/src/pages/Page.module.css

@@ -53,8 +53,25 @@
 
 .envCardId {
   font-size: var(--font-size-xs);
-  color: var(--color-text-muted);
+  font-weight: 700;
+  color: inherit;
   flex-shrink: 0;
+  background: rgba(0, 0, 0, 0.22);
+  border: 1px solid rgba(0, 0, 0, 0.35);
+  border-radius: 9999px;
+  padding: 1px var(--space-2);
+  line-height: 1.6;
+}
+
+.envCardHeader button {
+  color: inherit;
+  padding: var(--space-1);
+  aspect-ratio: 1;
+  margin-right: calc(-1 * var(--space-1));
+}
+
+.envCardHeader button:hover {
+  background: color-mix(in srgb, currentColor 15%, transparent) !important;
 }
 
 .envCardName {

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(' ')}>
+    <div
-      {children}
+      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;
+  z-index: 9999;
-  top: calc(100% + var(--space-1));
-  z-index: 100;
   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 && (
+      {open &&
-        <ul
+        createPortal(
-          className={`${styles.menu} ${align === 'left' ? styles.alignLeft : styles.alignRight}`}
+          <ul
-          role="menu"
+            ref={menuRef}
-        >
+            className={styles.menu}
-          {items.map((item, i) => (
+            style={{ ...menuStyle, position: 'fixed' }}
-            <li key={i} role="none">
+            role="menu"
-              <button
+          >
-                role="menuitem"
+            {items.map((item, i) => (
-                className={`${styles.item} ${item.variant === 'danger' ? styles.danger : ''}`}
+              <li key={i} role="none">
-                onClick={(e) => {
+                <button
-                  e.stopPropagation();
+                  role="menuitem"
-                  setOpen(false);
+                  className={`${styles.item} ${item.variant === 'danger' ? styles.danger : ''}`}
-                  item.onClick();
+                  onClick={(e) => {
-                }}
+                    e.stopPropagation();
-              >
+                    setOpen(false);
-                {item.icon && (
+                    item.onClick();
-                  <span className={styles.icon} aria-hidden="true">
+                  }}
-                    {item.icon}
+                >
-                  </span>
+                  {item.icon && (
-                )}
+                    <span className={styles.icon} aria-hidden="true">
-                {item.label}
+                      {item.icon}
-              </button>
+                    </span>
-            </li>
+                  )}
-          ))}
+                  {item.label}
-        </ul>
+                </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';