feat(sessions): add detail page, Notification component, and session API improvements

- add SessionDetailPage with breadcrumbs, DescriptionList, status badge, masked token
- add Notification component (info/success/error/warning/note variants) for contextual messages
- use Notification for 404 errors on session and environment detail pages
- add GET /sessions/:id endpoint; sanitize token (head…tail) and strip cookies/localStorage
- change DELETE /sessions/:id to return 204 No Content so client redirect works correctly
- add onRowClick prop to Table for clickable rows; stop propagation on actions column
- update status badges: open=success (green), closed=error (red) on both list and detail

client/src/ui/Notification/Notification.module.css

@@ -0,0 +1,63 @@
+.notification {
+  display: flex;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  border-left: 3px solid;
+  font-size: var(--font-size-sm);
+  margin-bottom: var(--space-4);
+}
+
+.icon {
+  flex-shrink: 0;
+  margin-top: 1px;
+  display: flex;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.title {
+  margin: 0;
+  font-weight: 600;
+}
+
+.message {
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* ── Variants ───────────────────────────────────────────────── */
+
+.info {
+  background: var(--color-info-bg);
+  color: var(--color-info-fg);
+  border-left-color: var(--color-secondary-fg);
+}
+
+.success {
+  background: var(--color-success-bg);
+  color: var(--color-success-fg);
+  border-left-color: var(--color-primary-hover);
+}
+
+.error {
+  background: var(--color-error-bg);
+  color: var(--color-error-fg);
+  border-left-color: var(--color-danger);
+}
+
+.warning {
+  background: var(--color-warning-bg);
+  color: var(--color-warning-fg);
+  border-left-color: #E09000;
+}
+
+.note {
+  background: var(--color-neutral-bg);
+  color: var(--color-neutral-fg);
+  border-left-color: var(--color-border);
+}

client/src/ui/Notification/Notification.tsx

@@ -0,0 +1,36 @@
+import { AlertCircle, AlertTriangle, CheckCircle2, Info, StickyNote } from 'lucide-react';
+import styles from './Notification.module.css';
+
+export type NotificationVariant = 'info' | 'success' | 'error' | 'warning' | 'note';
+
+export interface NotificationProps {
+  variant?: NotificationVariant;
+  title?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const ICONS: Record<NotificationVariant, React.ReactNode> = {
+  info:    <Info size={16} />,
+  success: <CheckCircle2 size={16} />,
+  error:   <AlertCircle size={16} />,
+  warning: <AlertTriangle size={16} />,
+  note:    <StickyNote size={16} />,
+};
+
+export function Notification({
+  variant = 'info',
+  title,
+  children,
+  className,
+}: NotificationProps) {
+  return (
+    <div className={[styles.notification, styles[variant], className].filter(Boolean).join(' ')}>
+      <span className={styles.icon}>{ICONS[variant]}</span>
+      <div className={styles.body}>
+        {title && <p className={styles.title}>{title}</p>}
+        <p className={styles.message}>{children}</p>
+      </div>
+    </div>
+  );
+}

client/src/ui/Table/Table.module.css

@@ -43,6 +43,10 @@
   background: var(--color-secondary-hover);
 }
 
+.clickable {
+  cursor: pointer;
+}
+
 .tr:not(:last-child) .td {
   border-bottom: var(--border-width) solid var(--color-border);
 }

client/src/ui/Table/Table.tsx

@@ -21,6 +21,8 @@ export interface TableProps<T> {
   pageSize?: number;
   /** Offer a page-size selector when pagination is enabled */
   pageSizeOptions?: number[];
+  /** Called when a row is clicked */
+  onRowClick?: (row: T) => void;
 }
 
 export function Table<T>({
@@ -32,6 +34,7 @@ export function Table<T>({
   className,
   pageSize: defaultPageSize,
   pageSizeOptions,
+  onRowClick,
 }: TableProps<T>) {
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(defaultPageSize ?? 0);
@@ -77,12 +80,17 @@ export function Table<T>({
             </tr>
           ) : (
             visibleData.map((row) => (
-              <tr key={rowKey(row)} className={styles.tr}>
+              <tr
+                key={rowKey(row)}
+                className={[styles.tr, onRowClick ? styles.clickable : ''].filter(Boolean).join(' ')}
+                onClick={onRowClick ? () => onRowClick(row) : undefined}
+              >
                 {columns.map((col) => (
                   <td
                     key={col.key}
                     className={styles.td}
                     style={{ textAlign: col.align ?? 'left' }}
+                    onClick={col.key === 'actions' ? (e) => e.stopPropagation() : undefined}
                   >
                     {col.render(row)}
                   </td>

client/src/ui/index.ts

@@ -33,5 +33,8 @@ export type { ContextMenuProps, ContextMenuItem } from './ContextMenu/ContextMen
 export { DescriptionList } from './DescriptionList/DescriptionList';
 export type { DescriptionListProps, DescriptionListItem } from './DescriptionList/DescriptionList';
 
+export { Notification } from './Notification/Notification';
+export type { NotificationProps, NotificationVariant } from './Notification/Notification';
+
 export { Table } from './Table/Table';
 export type { TableProps, TableColumn } from './Table/Table';