Format session duration as human-readable time on analytics chart (#25)

Author: nickustinov

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Fix ASC rate limit errors when saving many locales at once
 - Only save changed locales instead of all locales on store listing and app details
 - Fix control characters from AI models causing ASC save failures on name and subtitle
+- Fix session duration chart showing raw seconds instead of human-readable durations
 - Fix all linting and React compiler errors, make lint failures block CI
 
 ## 1.6.1

src/app/dashboard/apps/[appId]/analytics/usage/page.tsx

@@ -22,7 +22,7 @@ import {
   ChartLegendContent,
   type ChartConfig,
 } from "@/components/ui/chart";
-import { formatDateShort } from "@/lib/format";
+import { formatDateShort, formatDuration } from "@/lib/format";
 import { useAnalytics } from "@/lib/analytics-context";
 import { parseRange, filterByDateRange, getStoredRange } from "@/lib/analytics-range";
 import { AnalyticsStateGuard } from "@/components/analytics-state-guard";
@@ -35,7 +35,7 @@ const sessionsConfig = {
 } satisfies ChartConfig;
 
 const durationConfig = {
-  avgDuration: { label: "Avg duration (s)", color: "var(--color-chart-3)" },
+  avgDuration: { label: "Avg duration", color: "var(--color-chart-3)" },
 } satisfies ChartConfig;
 
 const installDeleteConfig = {
@@ -193,16 +193,16 @@ export default function UsagePage() {
                 <YAxis
                   tickLine={false}
                   axisLine={false}
-                  width={35}
-                  tickFormatter={(v) => `${v}s`}
+                  width={45}
+                  tickFormatter={(v) => formatDuration(v as number, true)}
                 />
                 <ChartTooltip
                   content={
                     <ChartTooltipContent
                       labelFormatter={(v) => formatDateShort(v as string)}
                       formatter={(value) => (
                         <span className="font-mono font-medium tabular-nums">
-                          {value}s
+                          {formatDuration(value as number)}
                         </span>
                       )}
                     />

src/lib/format.ts

@@ -36,3 +36,22 @@ export function formatDateTimeLong(iso: string): string {
     minute: "2-digit",
   });
 }
+
+/**
+ * Format a duration in seconds to a human-readable string.
+ * Compact form for axis ticks: "45s", "12m", "2.5h"
+ * Long form for tooltips: "45s", "12m 30s", "2h 15m"
+ */
+export function formatDuration(seconds: number, compact = false): string {
+  if (seconds < 60) return `${Math.round(seconds)}s`;
+  if (seconds < 3600) {
+    const m = Math.floor(seconds / 60);
+    const s = Math.round(seconds % 60);
+    if (compact) return s === 0 ? `${m}m` : `${m}m`;
+    return s > 0 ? `${m}m ${s}s` : `${m}m`;
+  }
+  const h = Math.floor(seconds / 3600);
+  const m = Math.round((seconds % 3600) / 60);
+  if (compact) return m === 0 ? `${h}h` : `${h}h`;
+  return m > 0 ? `${h}h ${m}m` : `${h}h`;
+}