Roll reporting up past an absent manager, and say so on both sides

While somebody is on a long-term absence their reports report to the next
management level, and it keeps rolling up until it reaches somebody present.
Derived at read time in lib/acting-manager.ts rather than written to
employees.manager_id: the absent person stays formally in charge, so the
stand-in has to be visible as a stand-in rather than quietly replacing them.
Both ids therefore travel to the UI, and both sides carry a badge — the
absent person ("Abwesend · Vertretung: X") and anyone now reporting
elsewhere ("Vertretung für Y").

Three cases the walk has to survive, all covered by tests:
- Several absent levels in a row — it keeps climbing, and still names the
  *recorded* manager as the one being covered for, not the level skipped.
- Everyone above absent — it stops and keeps the recorded manager. Re-rooting
  a team to the top of the chart would distort more than showing an absent
  manager whose absence is labelled anyway.
- A manager_id cycle, which nothing in the schema forbids.

An absent lead needs no separate deputy field: their stand-in is simply
their own acting manager, the same one their reports moved to.

components/orgchart/EmployeeTree.tsx

@@ -51,6 +51,11 @@ export function EmployeeTree({ employees, focusId = null }: { employees: OrgEmpl
     return { childrenByManager: byManager, totalReportsById: totals, root: byManager.get("__root__") ?? [] };
   }, [employees]);
 
+  // Both badges name a person by id, so the lookup is shared rather than
+  // rebuilt per node.
+  const nameById = useMemo(() => new Map(employees.map((e) => [e.id, `${e.first_name} ${e.last_name}`])), [employees]);
+  const nameOf = useCallback((id: string | null) => (id ? nameById.get(id) : undefined), [nameById]);
+
   const matchIds = useMemo(() => {
     // A focus target behaves exactly like a search hit — same ancestor
     // auto-expand, same ring, same fitView in graph mode — until the user
@@ -119,11 +124,16 @@ export function EmployeeTree({ employees, focusId = null }: { employees: OrgEmpl
         avatar: { firstName: e.first_name, lastName: e.last_name },
         totalReports: total,
         matched: matchIds?.has(e.id) ?? false,
+        absent: e.absent,
+        // Who is standing in for this absent person: their own acting
+        // manager, which is the same one their reports moved to.
+        coveredBy: e.absent ? nameOf(e.manager_id) : undefined,
+        coveringFor: nameOf(e.formal_manager_id),
         children: children.map((c) => toChartNode(c, nextAncestors)),
       };
     }
     return root.map((r) => toChartNode(r, new Set()));
-  }, [root, childrenByManager, totalReportsById, matchIds]);
+  }, [root, childrenByManager, totalReportsById, matchIds, nameOf]);
 
   function renderNode(e: OrgEmployee, depth: number, ancestors: Set<string>) {
     const children = ancestors.has(e.id) ? [] : (childrenByManager.get(e.id) ?? []);
@@ -147,12 +157,26 @@ export function EmployeeTree({ employees, focusId = null }: { employees: OrgEmpl
             <span className="w-4 shrink-0" />
           )}
           <Avatar firstName={e.first_name} lastName={e.last_name} size="sm" />
-          <Link href={`/employees/${e.id}`} className="flex-1 hover:underline">
+          <Link href={`/employees/${e.id}`} className="min-w-0 flex-1 hover:underline">
             <span className="text-sm font-semibold text-ink">
               {e.first_name} {e.last_name}
             </span>
             <span className="ml-2 text-xs text-ink-muted">{e.job_title}</span>
           </Link>
+          {/* The stand-in arrangement is stated on both sides: on the absent
+              person (whose team has moved away) and on anyone now reporting
+              elsewhere — otherwise the chart would silently show a reporting
+              line that is not the recorded one. */}
+          {e.absent && (
+            <span className="shrink-0 rounded-full bg-warning-bg px-2 py-0.5 text-[11px] font-semibold text-warning-text">
+              Abwesend{nameOf(e.manager_id) ? ` · Vertretung: ${nameOf(e.manager_id)}` : ""}
+            </span>
+          )}
+          {e.formal_manager_id && (
+            <span className="shrink-0 rounded-full bg-info-bg px-2 py-0.5 text-[11px] font-semibold text-info-text">
+              Vertretung für {nameOf(e.formal_manager_id)}
+            </span>
+          )}
           {hasChildren && (
             <span className="shrink-0 text-xs text-ink-muted">
               {children.length} direkt · {totalReports} gesamt