refactor: update activity heatmap data structure format

packages/webapp/components/log/CardShare.tsx

@@ -9,6 +9,7 @@ import { ARCHETYPES, RECORDS } from '../../types/log';
 import { shareLog } from '../../hooks/log/shareLogImage';
 import styles from './Log.module.css';
 import type { ShareableCardProps } from './types';
+import { usePeakReadingHour } from '../../hooks/log/useLogStats';
 
 export default function CardShare({
   data,
@@ -27,25 +28,7 @@ export default function CardShare({
   const totalInteractions =
     data.upvotesGiven + data.commentsWritten + data.postsBookmarked;
 
-  // Find peak reading hour from heatmap
-  const peakHour = useMemo(() => {
-    let maxActivity = 0;
-    let bestHour = 0;
-    for (let hour = 0; hour < 24; hour += 1) {
-      let hourTotal = 0;
-      for (let day = 0; day < 7; day += 1) {
-        hourTotal += data.activityHeatmap[day]?.[hour] ?? 0;
-      }
-      if (hourTotal > maxActivity) {
-        maxActivity = hourTotal;
-        bestHour = hour;
-      }
-    }
-    // Format as 12-hour time
-    const suffix = bestHour >= 12 ? 'PM' : 'AM';
-    const displayHour = bestHour % 12 || 12;
-    return `${displayHour}${suffix}`;
-  }, [data.activityHeatmap]);
+  const { formatted: peakHour } = usePeakReadingHour(data.activityHeatmap);
 
   // Get the best record (prefer one with a percentile, or first available)
   const bestRecord = useMemo(() => {

packages/webapp/components/log/CardWhenYouRead.tsx

@@ -8,10 +8,11 @@ import type { BaseCardProps } from './types';
 import {
   ClockVisualization,
   SimpleHeadline,
-  calculateHourDistribution,
+  normalizeHourDistribution,
   formatHour,
   PATTERN_BANNER_TEXT,
 } from './primitives';
+import { usePeakReadingHour } from '../../hooks/log/useLogStats';
 
 export default function CardWhenYouRead({
   data,
@@ -20,11 +21,11 @@ export default function CardWhenYouRead({
   imageCache,
   onImageFetched,
 }: BaseCardProps): ReactElement {
-  // Calculate hour distribution from activity heatmap
-  const { distribution: hourDistribution, peakHour } = useMemo(
-    () => calculateHourDistribution(data.activityHeatmap),
+  const hourDistribution = useMemo(
+    () => normalizeHourDistribution(data.activityHeatmap),
     [data.activityHeatmap],
   );
+  const { hour: peakHour } = usePeakReadingHour(data.activityHeatmap);
 
   return (
     <>

packages/webapp/components/log/primitives/index.ts

@@ -21,7 +21,7 @@ export { default as EngagementPillars } from './EngagementPillars';
 // Shared utilities
 export {
   formatHour,
-  calculateHourDistribution,
+  normalizeHourDistribution,
   calculateClockAngle,
   PATTERN_BANNER_TEXT,
   PODIUM_MEDALS,

packages/webapp/components/log/primitives/utils.ts

@@ -128,35 +128,15 @@ export function findBestEngagementStat(data: {
 }
 
 /**
- * Calculate hour distribution from activity heatmap
- * Returns normalized values (0-1) and peak hour index
+ * Normalize hour distribution for bar chart visualization
+ * Returns values scaled to 0-1 range where the max value becomes 1
+ *
+ * The activityHeatmap is a 24-element array of floats that sum to 1,
+ * representing the distribution of reading activity across hours.
  */
-export function calculateHourDistribution(activityHeatmap: number[][]): {
-  distribution: number[];
-  peakHour: number;
-} {
-  const distribution = Array(24).fill(0);
-
-  activityHeatmap.forEach((day) => {
-    day.forEach((value, hourIndex) => {
-      distribution[hourIndex] += value;
-    });
-  });
-
-  const maxValue = Math.max(...distribution, 1);
-  const normalized = distribution.map((value) => value / maxValue);
-
-  // Find peak hour
-  let peakHour = 0;
-  let maxVal = 0;
-  normalized.forEach((val, idx) => {
-    if (val > maxVal) {
-      maxVal = val;
-      peakHour = idx;
-    }
-  });
-
-  return { distribution: normalized, peakHour };
+export function normalizeHourDistribution(activityHeatmap: number[]): number[] {
+  const maxValue = Math.max(...activityHeatmap, 0.001);
+  return activityHeatmap.map((value) => value / maxValue);
 }
 
 /**

packages/webapp/components/log/static/StaticCardShare.tsx

@@ -3,6 +3,7 @@ import React, { useMemo } from 'react';
 import type { LogData } from '../../../types/log';
 import { ARCHETYPES, RECORDS } from '../../../types/log';
 import styles from './StaticCards.module.css';
+import { getPeakReadingHour } from '../../../hooks/log/useLogStats';
 
 interface StaticCardProps {
   data: Pick<
@@ -36,27 +37,9 @@ export default function StaticCardShare({
   const totalInteractions =
     data.upvotesGiven + data.commentsWritten + data.postsBookmarked;
 
-  // Find peak reading hour from heatmap
-  const peakHour = useMemo(() => {
-    if (!data.activityHeatmap?.length) {
-      return '12PM';
-    }
-    let maxActivity = 0;
-    let bestHour = 0;
-    for (let hour = 0; hour < 24; hour += 1) {
-      let hourTotal = 0;
-      for (let day = 0; day < 7; day += 1) {
-        hourTotal += data.activityHeatmap[day]?.[hour] ?? 0;
-      }
-      if (hourTotal > maxActivity) {
-        maxActivity = hourTotal;
-        bestHour = hour;
-      }
-    }
-    const suffix = bestHour >= 12 ? 'PM' : 'AM';
-    const displayHour = bestHour % 12 || 12;
-    return `${displayHour}${suffix}`;
-  }, [data.activityHeatmap]);
+  const peakHour = data.activityHeatmap?.length
+    ? getPeakReadingHour(data.activityHeatmap).formatted
+    : '12PM';
 
   // Get the best record (prefer one with a percentile, or first available)
   const bestRecord = useMemo(() => {

packages/webapp/components/log/static/StaticCardWhenYouRead.tsx

@@ -5,10 +5,11 @@ import styles from './StaticCards.module.css';
 import {
   ClockVisualization,
   SimpleHeadline,
-  calculateHourDistribution,
+  normalizeHourDistribution,
   PATTERN_BANNER_TEXT,
 } from '../primitives';
 import TopPercentileBanner from '../TopPercentileBanner';
+import { getPeakReadingHour } from '../../../hooks/log/useLogStats';
 
 interface StaticCardProps {
   data: Pick<
@@ -25,11 +26,11 @@ interface StaticCardProps {
 export default function StaticCardWhenYouRead({
   data,
 }: StaticCardProps): ReactElement {
-  // Calculate hour distribution from activity heatmap
-  const { distribution: hourDistribution, peakHour } = useMemo(
-    () => calculateHourDistribution(data.activityHeatmap),
+  const hourDistribution = useMemo(
+    () => normalizeHourDistribution(data.activityHeatmap),
     [data.activityHeatmap],
   );
+  const { hour: peakHour } = getPeakReadingHour(data.activityHeatmap);
 
   return (
     <>

packages/webapp/hooks/log/useLogStats.ts

@@ -164,23 +164,21 @@ export function useTotalEngagement(
 /**
  * Find peak reading hour from activity heatmap
  * Returns formatted 12-hour time string
+ *
+ * The activityHeatmap is a 24-element array of floats that sum to 1.
  */
 export function getPeakReadingHour(
   activityHeatmap: LogData['activityHeatmap'],
 ): { hour: number; formatted: string } {
   let maxActivity = 0;
   let bestHour = 0;
 
-  for (let hour = 0; hour < 24; hour += 1) {
-    let hourTotal = 0;
-    for (let day = 0; day < 7; day += 1) {
-      hourTotal += activityHeatmap[day]?.[hour] ?? 0;
-    }
-    if (hourTotal > maxActivity) {
-      maxActivity = hourTotal;
+  activityHeatmap.forEach((activity, hour) => {
+    if (activity > maxActivity) {
+      maxActivity = activity;
       bestHour = hour;
     }
-  }
+  });
 
   // Format as 12-hour time
   const suffix = bestHour >= 12 ? 'PM' : 'AM';

packages/webapp/types/log.ts

@@ -192,7 +192,7 @@ export interface LogData {
   peakDay: string; // e.g., "Thursday"
   readingPattern: 'night' | 'early' | 'afternoon';
   patternPercentile: number;
-  activityHeatmap: number[][]; // 7 days x 24 hours
+  activityHeatmap: number[]; // 24 hours, values sum to 1
 
   // Card 3: Topic Evolution
   topicJourney: TopicQuarter[];