feat(08-02): identity header + 2x2 metric grid + page wiring (Task 1b)

- New EngagementProfileHeader: avatar (photo/initials fallback), name, jobTitle,
  department, mailto link, last-active relative/absolute label
- New EngagementProfileMetricGrid: 2x2 grid of Hours/Billable/Days/Meetings cards
- Page updated: imports Header+MetricGrid, placeholder div removed, real components mounted
- D-01/D-22 guard rails: EngagementUserRow.tsx and data endpoint untouched

components/mobile/EngagementProfileHeader.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+/* EngagementProfileHeader — phase 08 (D-05, D-06, D-07).
+ * Purpose: Identity header card — avatar (photo or initials), display name, jobTitle,
+ *          department, email mailto: link, and last-active row.
+ * Avatar: photo from /api/mobile/engagement/user/[userId]/photo; on error → initials.
+ * Last-active: relative (≤7d via date-fns) or absolute (>7d via formatInUserTimezone). */
+
+import { useState } from 'react';
+import { formatDistanceToNow } from 'date-fns';
+import { Card, CardContent } from '@/components/ui/card';
+import { getInitials } from '@/components/mobile/EngagementUserRow';
+import { useUserTimezone, formatInUserTimezone } from '@/lib/hooks/use-user-timezone';
+
+export interface EngagementProfileHeaderProps {
+  displayName: string;
+  email: string;
+  jobTitle: string | null;
+  department: string | null;
+  // Last-active source: caller derives from response (most recent of recentEntries[0].entry_date,
+  // or the most-recent snapshots[].period_end). null if no signal at all.
+  lastActiveAt: string | null;  // ISO date string or null (D-06)
+  // Used to build the photo URL — userId is the same value as the route segment
+  userId: string;
+}
+
+export function EngagementProfileHeader({
+  displayName,
+  email,
+  jobTitle,
+  department,
+  lastActiveAt,
+  userId,
+}: EngagementProfileHeaderProps) {
+  const [photoFailed, setPhotoFailed] = useState(false);
+  const tz = useUserTimezone();
+
+  // Compute last-active label (D-06)
+  let lastActiveLabel: string | null = null;
+  if (lastActiveAt) {
+    const ms = Date.now() - new Date(lastActiveAt).getTime();
+    if (ms <= 7 * 24 * 60 * 60 * 1000) {
+      // Relative — ≤7d
+      lastActiveLabel = `Active ${formatDistanceToNow(new Date(lastActiveAt), { addSuffix: true })}`;
+    } else {
+      // Absolute — >7d
+      const formatted = formatInUserTimezone(lastActiveAt, tz, { month: 'short', day: 'numeric', year: 'numeric' });
+      lastActiveLabel = `Last active ${formatted}`;
+    }
+  }
+
+  return (
+    <Card className="py-0 shadow-none">
+      <CardContent className="px-4 py-4 flex items-center gap-3">
+        {/* Avatar — photo or initials fallback */}
+        {!photoFailed ? (
+          <img
+            src={`/api/mobile/engagement/user/${userId}/photo`}
+            alt={displayName}
+            className="h-14 w-14 rounded-full object-cover shrink-0"
+            onError={() => setPhotoFailed(true)}
+          />
+        ) : (
+          <span
+            aria-hidden="true"
+            className="h-14 w-14 rounded-full bg-muted flex items-center justify-center shrink-0 text-xs font-semibold text-foreground"
+          >
+            {getInitials(displayName)}
+          </span>
+        )}
+
+        {/* Identity stack */}
+        <div className="flex-1 min-w-0 space-y-1">
+          <p className="text-xl font-semibold truncate">{displayName}</p>
+          {jobTitle && (
+            <p className="text-xs text-muted-foreground truncate">{jobTitle}</p>
+          )}
+          {department && (
+            <p className="text-xs text-muted-foreground truncate">{department}</p>
+          )}
+          <a
+            href={`mailto:${email}`}
+            className="text-sm text-primary underline-offset-4 hover:underline truncate block min-h-[44px] flex items-center"
+          >
+            {email}
+          </a>
+          {lastActiveLabel && (
+            <p className="text-xs text-muted-foreground">{lastActiveLabel}</p>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

components/mobile/EngagementProfileMetricGrid.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+/* EngagementProfileMetricGrid — phase 08 (D-11, D-12, D-13).
+ * Purpose: 2×2 grid of 4 hero metric cards (Hours worked / Billable hours /
+ *          Days worked / Meetings attended). Values always render as numbers —
+ *          never '—' (D-13). Layout mirrors Phase 3 dashboard KPI grid. */
+
+import { Card, CardContent } from '@/components/ui/card';
+
+export interface EngagementProfileMetricGridProps {
+  hoursWorked: number;       // already period-scoped by caller
+  billableHours: number;
+  daysWorked: number;
+  meetingsAttended: number;
+}
+
+export function EngagementProfileMetricGrid({
+  hoursWorked,
+  billableHours,
+  daysWorked,
+  meetingsAttended,
+}: EngagementProfileMetricGridProps) {
+  return (
+    <div className="grid grid-cols-2 gap-3">
+      <Card className="py-0 shadow-none">
+        <CardContent className="px-4 py-4">
+          <p className="text-2xl font-semibold text-foreground leading-none">{hoursWorked.toFixed(1)}h</p>
+          <p className="text-xs text-muted-foreground mt-2">Hours worked</p>
+        </CardContent>
+      </Card>
+      <Card className="py-0 shadow-none">
+        <CardContent className="px-4 py-4">
+          <p className="text-2xl font-semibold text-foreground leading-none">{billableHours.toFixed(1)}h</p>
+          <p className="text-xs text-muted-foreground mt-2">Billable hours</p>
+        </CardContent>
+      </Card>
+      <Card className="py-0 shadow-none">
+        <CardContent className="px-4 py-4">
+          <p className="text-2xl font-semibold text-foreground leading-none">{daysWorked.toString()}</p>
+          <p className="text-xs text-muted-foreground mt-2">Days worked</p>
+        </CardContent>
+      </Card>
+      <Card className="py-0 shadow-none">
+        <CardContent className="px-4 py-4">
+          <p className="text-2xl font-semibold text-foreground leading-none">{meetingsAttended.toString()}</p>
+          <p className="text-xs text-muted-foreground mt-2">Meetings attended</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}