feat(admin): DB-backed integration toggles + sticky cols + dark contrast

Builds on the env-var INTEGRATIONS_DISABLED shipped with the nav-design
overhaul.  Adds a DB-backed admin UI so operators can flip integrations
without editing .env and restarting the container, plus the remaining
visual cleanup items from the design backlog.

Integration toggles
- Migration 081 — integration_settings table (key PK, disabled flag,
  reason, disabled_by audit, disabled_at).  Seeded with all 13 known
  integrations as enabled.
- GET / PATCH /api/admin/integrations — gated by requirePermission
  (admin, access).  PATCH clears the in-process integration-health
  cache so toggles take effect within seconds.
- /admin/integrations admin page with a Switch per integration, optional
  reason input, audit-info subtitle (disabled by, when, why), live
  status light from /api/dashboard/integration-health.
- integration-health service merges env-var disable list with DB rows;
  degrades gracefully if migration unapplied / DB unreachable.
- Wired into the Admin nav dropdown (eight items now).
- CLAUDE.md describes both env + DB sources.

Sticky first column on tables
- Table primitive accepts stickyFirstColumn?: boolean.  When true, TH
  and TD :first-child stay pinned during horizontal scroll, with
  background inheritance preserving hover and selected row tints.
- DataTable exposes the prop too — on by default for paginated tables.
- /addigy-devices opts in.

Dark-mode contrast
- --border lifted from 10% to 14% in .dark; --input from 15% to 18%;
  --sidebar-border to 14%.
- StatusLight outline ring lifted from /10 to /15 (light) and /20 (dark).
- DetailModal empty-cell em-dash lifted from /40 to /70 so missing
  values are legible on dark surfaces.

DESIGN.md
- Closed sticky-first-column, dark-mode contrast, and palette-audit
  items (palette deprioritized — most uses are semantic).
- Skeleton helpers documented as preferred for new code; existing
  ad-hoc patterns left in place.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

components/admin/DataTable.tsx

@@ -92,6 +92,8 @@ export interface DataTableProps<TData = any> {
   /** Empty-state slot. Defaults to a neutral "No results" message. */
   emptyTitle?: string;
   emptyDescription?: string;
+  /** Pin the first column when the table scrolls horizontally. Default true. */
+  stickyFirstColumn?: boolean;
 }
 
 export default function DataTable<TData = any>({
@@ -109,6 +111,7 @@ export default function DataTable<TData = any>({
   renderSubRow,
   emptyTitle = 'No data found',
   emptyDescription = 'Try adjusting your search or filters.',
+  stickyFirstColumn = true,
 }: DataTableProps<TData>) {
   const [searchQuery, setSearchQuery] = useState('');
   const [sorting, setSorting] = useState<SortingState>([]);
@@ -210,7 +213,7 @@ export default function DataTable<TData = any>({
       )}
 
       <div className="border rounded-md overflow-hidden bg-card">
-        <Table>
+        <Table stickyFirstColumn={stickyFirstColumn}>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id} className="bg-muted/50 hover:bg-muted/50">

components/admin/DetailModal.tsx

@@ -134,7 +134,7 @@ const COMPANY_GROUPS: FieldGroup[] = [
 
 function resolveLabel(key: string, value: any, type: FieldType | undefined, lookups: Lookups): { display: React.ReactNode; isEmpty: boolean } {
   if (value === null || value === undefined || value === '') {
-    return { display: <span className="text-muted-foreground/40 italic text-xs">—</span>, isEmpty: true };
+    return { display: <span className="text-muted-foreground/70 italic text-xs">—</span>, isEmpty: true };
   }
 
   switch (type) {

components/navigation/app-navigation.tsx

@@ -167,6 +167,12 @@ const navigationItems: NavItem[] = [
         icon: Database,
         description: 'Audit-driven changes pushed back to IT Glue; revert from here',
       },
+      {
+        title: 'Integrations',
+        href: '/admin/integrations',
+        icon: Activity,
+        description: 'Toggle integrations on or off — affects /status without a container restart',
+      },
       {
         title: 'Device-link conflicts',
         href: '/admin/device-link-conflicts',

components/ui/status-light.tsx

@@ -42,7 +42,7 @@ export function StatusLight({
       role="status"
       aria-label={label ?? state}
       className={cn(
-        'inline-block ring-1 ring-foreground/10 align-middle',
+        'inline-block ring-1 ring-foreground/15 dark:ring-foreground/20 align-middle',
         sizeMap[size],
         stateMap[state],
         pulse && state === 'pending' && 'animate-pulse',

components/ui/table.tsx

@@ -4,7 +4,13 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-function Table({ className, ...props }: React.ComponentProps<"table">) {
+interface TableProps extends React.ComponentProps<"table"> {
+  /** Pin the first column when the table scrolls horizontally. Useful on
+   *  wide list tables where the first column is an identifier. */
+  stickyFirstColumn?: boolean
+}
+
+function Table({ className, stickyFirstColumn, ...props }: TableProps) {
   return (
     <div
       data-slot="table-container"
@@ -12,7 +18,26 @@ function Table({ className, ...props }: React.ComponentProps<"table">) {
     >
       <table
         data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
+        className={cn(
+          "w-full caption-bottom text-sm",
+          stickyFirstColumn && [
+            // Header cell: sticky against the muted header bg.
+            "[&_thead_tr_th:first-child]:sticky",
+            "[&_thead_tr_th:first-child]:left-0",
+            "[&_thead_tr_th:first-child]:z-20",
+            "[&_thead_tr_th:first-child]:bg-muted",
+            // Body cell: sticky, inherits the row's background so hover +
+            // selected states still read; falls back to card surface.
+            "[&_tbody_tr_td:first-child]:sticky",
+            "[&_tbody_tr_td:first-child]:left-0",
+            "[&_tbody_tr_td:first-child]:z-10",
+            "[&_tbody_tr_td:first-child]:bg-card",
+            // When the parent row has its hover bg, override.
+            "[&_tbody_tr:hover_td:first-child]:bg-muted/50",
+            "[&_tbody_tr[data-state=selected]_td:first-child]:bg-muted",
+          ],
+          className,
+        )}
         {...props}
       />
     </div>