When code relies on values or logic that can diverge from the rest of the system (CSS/layout, shared pagination sizes, status-to-UI rules, helper behavior), prefer a single source of truth.

Apply these rules:

• No magic numbers for behavior thresholds or pagination: reuse existing constants (e.g., SESSION_LIST_PAGE_SIZE).
• No JS hardcoded layout measurements that mirror CSS: read the real values from getComputedStyle(...) (including gap) instead of subtracting assumed pixels.
• No duplicated mapping logic: centralize repeated taskStatus -> label/tone/icon (use a config object) so adding a new status can’t mismatch UI parts.
• No duplicated helper logic: reuse shared helpers like getString(...) rather than inlining type checks that may drift.
• Keep layout responsibility with the shell/owning component: wrap custom slots (header/footer) in consistent container elements so hosts don’t need to add ad-hoc margins.
• Delete unused exported UI components or ensure they’re actually used (avoid orphan files).

Example (centralized status mapping + constants):

const TASK_STATUS_CONFIG = {
  completed: { labelKey: 'system.taskCompleted', tone: 'success', Icon: CircleCheckIcon },
  failed: { labelKey: 'system.taskFailed', tone: 'error', Icon: CircleXIcon },
  cancelled: { labelKey: 'system.taskCancelled', tone: 'neutral', Icon: CircleMinusIcon },
} as const;

const statusConfig =
  (taskStatus && TASK_STATUS_CONFIG[taskStatus as keyof typeof TASK_STATUS_CONFIG]) ??
  { labelKey: 'system.taskNotification', tone: 'neutral', Icon: InfoIcon };

const page = await workspace.client.listWorkspaceSessions(cwd, {
  pageSize: SESSION_LIST_PAGE_SIZE,
});

const style = getComputedStyle(header);
const headerGap = parseFloat(style.gap) || 0;

This reduces silent UI breakage when constants, CSS, or helper behavior change over time.