@agent-native/core 0.76.9 → 0.76.10

package/corpus/core/src/server/og-fonts.ts

@@ -5,14 +5,16 @@ import path from "node:path";
 import {
   LIBERATION_SANS_BOLD_BASE64,
   LIBERATION_SANS_REGULAR_BASE64,
+  NOTO_NASKH_ARABIC_BASE64,
 } from "./og-fonts-data.js";
 
 /**
  * Liberation Sans is the metric-compatible libre replacement for
- * Arial/Helvetica that the OG image SVG asks for. It ships embedded as base64
+ * Arial/Helvetica that the OG image SVG asks for. Noto Naskh Arabic fills the
+ * Arabic script gap for localized docs titles. They ship embedded as base64
  * (see {@link ./og-fonts-data.ts}) so the renderer never depends on the host's
- * system fonts — Linux serverless runtimes (Netlify/Lambda) have neither Arial
- * nor Inter, which previously left every `<text>` element rendering nothing.
+ * system fonts — Linux serverless runtimes (Netlify/Lambda) have neither Arial,
+ * Inter, nor Arabic fallback fonts.
  */
 const OG_FONT_FILES = [
   {
@@ -20,9 +22,14 @@ const OG_FONT_FILES = [
     base64: LIBERATION_SANS_REGULAR_BASE64,
   },
   { filename: "LiberationSans-Bold.ttf", base64: LIBERATION_SANS_BOLD_BASE64 },
+  {
+    filename: "NotoNaskhArabic-Variable.ttf",
+    base64: NOTO_NASKH_ARABIC_BASE64,
+  },
 ] as const;
 
 export const OG_FONT_FAMILY = "Liberation Sans";
+export const OG_ARABIC_FONT_FAMILY = "Noto Naskh Arabic";
 
 let cachedFontFiles: string[] | null | undefined;
 

package/corpus/core/src/server/social-og-image.ts

@@ -11,7 +11,11 @@ import {
   resolveBuiltInAuthMarketingByName,
 } from "./auth-marketing.js";
 import { getAppName } from "./app-name.js";
-import { OG_FONT_FAMILY, resolveOgFontFiles } from "./og-fonts.js";
+import {
+  OG_ARABIC_FONT_FAMILY,
+  OG_FONT_FAMILY,
+  resolveOgFontFiles,
+} from "./og-fonts.js";
 
 export interface AgentNativeOgImageInput {
   appName?: string | null;
@@ -32,7 +36,8 @@ const BRAND_BLUE = "#00B5FF";
 const BRAND_MINT = "#48FFE4";
 const BG = "#000000";
 const FG = "#f5f5f5";
-const FONT_FAMILY = `${OG_FONT_FAMILY}, Arial, Helvetica, system-ui, sans-serif`;
+const DEFAULT_FONT_FAMILY = `${OG_FONT_FAMILY}, Arial, Helvetica, system-ui, sans-serif`;
+const ARABIC_FONT_FAMILY = `${OG_ARABIC_FONT_FAMILY}, ${OG_FONT_FAMILY}, Arial, Helvetica, system-ui, sans-serif`;
 const DEFAULT_ACCENT_TEXT = "100% free and open source";
 
 const LOGO_MARK = `
@@ -101,6 +106,16 @@ function estimateTextWidth(value: string, fontSize: number): number {
   return units * fontSize;
 }
 
+function containsArabicText(value: string): boolean {
+  return /[\u0600-\u06ff\u0750-\u077f\u0870-\u089f\ufb50-\ufdff\ufe70-\ufeff]/u.test(
+    value,
+  );
+}
+
+function fontFamilyForText(value: string): string {
+  return containsArabicText(value) ? ARABIC_FONT_FAMILY : DEFAULT_FONT_FAMILY;
+}
+
 function trimTextToWidth(
   value: string,
   fontSize: number,
@@ -205,6 +220,8 @@ function textBlock({
   weight,
   fill,
   anchor = "start",
+  direction,
+  fontFamily = DEFAULT_FONT_FAMILY,
 }: {
   lines: string[];
   x: number;
@@ -213,9 +230,14 @@ function textBlock({
   lineHeight: number;
   weight: number;
   fill: string;
-  anchor?: "start" | "middle";
+  anchor?: "start" | "middle" | "end";
+  direction?: "ltr" | "rtl";
+  fontFamily?: string;
 }): string {
-  return `<text x="${x}" y="${y}" text-anchor="${anchor}" font-family="${FONT_FAMILY}" font-size="${fontSize}" font-weight="${weight}" fill="${fill}">${lines
+  const directionAttrs = direction
+    ? ` direction="${direction}" unicode-bidi="plaintext"`
+    : "";
+  return `<text x="${x}" y="${y}" text-anchor="${anchor}"${directionAttrs} font-family="${fontFamily}" font-size="${fontSize}" font-weight="${weight}" fill="${fill}">${lines
     .map(
       (line, index) =>
         `<tspan x="${x}" dy="${index === 0 ? 0 : lineHeight}">${escapeSvg(line)}</tspan>`,
@@ -289,6 +311,10 @@ export function renderAgentNativeOgImageSvg(
   const title = cleanText(input.title) || titleFromAppName(appName);
   const accentText = cleanText(input.accentText) || DEFAULT_ACCENT_TEXT;
   const titleLayout = getTitleLayout(title);
+  const titleIsRtl = containsArabicText(title);
+  const textX = titleIsRtl ? WIDTH - 80 : 80;
+  const accentX = titleIsRtl ? WIDTH - 84 : 84;
+  const textAnchor = titleIsRtl ? "end" : "start";
   const titleY = titleLayout.lines.length > 1 ? 288 : 330;
   const accentY =
     titleY + titleLayout.lineHeight * (titleLayout.lines.length - 1) + 70;
@@ -312,7 +338,7 @@ export function renderAgentNativeOgImageSvg(
   <g>
     ${textBlock({
       lines: titleLayout.lines,
-      x: 80,
+      x: textX,
       y: titleY,
       fontSize: titleLayout.fontSize,
       lineHeight: titleLayout.lineHeight,
@@ -321,8 +347,21 @@ export function renderAgentNativeOgImageSvg(
       // bundle, which is the intended look for the display title.
       weight: 800,
       fill: FG,
+      anchor: textAnchor,
+      direction: titleIsRtl ? "rtl" : undefined,
+      fontFamily: fontFamilyForText(title),
+    })}
+    ${textBlock({
+      lines: [accentText],
+      x: accentX,
+      y: accentY,
+      fontSize: 34,
+      lineHeight: 40,
+      weight: 800,
+      fill: BRAND_BLUE,
+      anchor: textAnchor,
+      fontFamily: fontFamilyForText(accentText),
     })}
-    <text x="84" y="${accentY}" font-family="${FONT_FAMILY}" font-size="34" font-weight="800" fill="${BRAND_BLUE}">${escapeSvg(accentText)}</text>
   </g>
 </svg>`;
 }

package/corpus/templates/analytics/app/components/dashboard/SqlChart.tsx

@@ -97,6 +97,10 @@ const CHART_LEGEND_PROPS = {
   wrapperStyle: CHART_LEGEND_WRAPPER_STYLE,
 } as const;
 
+const PARTIAL_DAY_TIME_ZONE = "America/Los_Angeles";
+const PARTIAL_DAY_DASH = "3 5";
+const PARTIAL_DAY_KEY_PREFIX = "__sql_chart_partial_day";
+
 function formatYValue(
   value: number,
   formatter?: "number" | "currency" | "percent",
@@ -167,6 +171,122 @@ function truncateLabel(value: string, max = 48): string {
   return `${value.slice(0, max - 3)}...`;
 }
 
+function parseCalendarDate(value: string): Date | null {
+  const normalized = /^\d{8}$/.test(value)
+    ? `${value.slice(0, 4)}-${value.slice(4, 6)}-${value.slice(6, 8)}`
+    : value;
+  const dateOnly = /^(\d{4})-(\d{2})-(\d{2})$/.exec(normalized);
+  if (dateOnly) {
+    return new Date(
+      Number(dateOnly[1]),
+      Number(dateOnly[2]) - 1,
+      Number(dateOnly[3]),
+    );
+  }
+  const parsed = new Date(normalized);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+
+export function toSqlChartDateKey(value: unknown): string | null {
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    const ymd = /^(\d{4})-(\d{2})-(\d{2})$/.exec(trimmed);
+    if (ymd) return `${ymd[1]}-${ymd[2]}-${ymd[3]}`;
+    const compact = /^(\d{4})(\d{2})(\d{2})$/.exec(trimmed);
+    if (compact) return `${compact[1]}-${compact[2]}-${compact[3]}`;
+  }
+
+  const parsed = new Date(String(value ?? ""));
+  return Number.isNaN(parsed.getTime()) ? null : sqlChartLocalDateKey(parsed);
+}
+
+export function sqlChartLocalDateKey(
+  date = new Date(),
+  timeZone = PARTIAL_DAY_TIME_ZONE,
+): string {
+  try {
+    const parts = new Intl.DateTimeFormat("en-US", {
+      timeZone,
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    }).formatToParts(date);
+    const get = (type: string) =>
+      parts.find((part) => part.type === type)?.value ?? "";
+    const year = get("year");
+    const month = get("month");
+    const day = get("day");
+    if (year && month && day) return `${year}-${month}-${day}`;
+  } catch {}
+  return date.toISOString().slice(0, 10);
+}
+
+export interface SplitTimeSeries {
+  key: string;
+  solidKey: string;
+  partialKey: string | null;
+}
+
+export function splitCurrentDayTimeSeriesRows(
+  rows: Record<string, unknown>[],
+  xKey: string,
+  yKeys: string[],
+  todayKey = sqlChartLocalDateKey(),
+): { rows: Record<string, unknown>[]; series: SplitTimeSeries[] } {
+  const todayIndexes = rows
+    .map((row, index) => ({ index, dateKey: toSqlChartDateKey(row[xKey]) }))
+    .filter((entry) => entry.dateKey === todayKey)
+    .map((entry) => entry.index);
+  const firstTodayIndex = todayIndexes[0] ?? -1;
+
+  if (firstTodayIndex <= 0 || yKeys.length === 0) {
+    return {
+      rows,
+      series: yKeys.map((key) => ({ key, solidKey: key, partialKey: null })),
+    };
+  }
+
+  const todaySet = new Set(todayIndexes);
+  const previousIndex = firstTodayIndex - 1;
+  const series = yKeys.map((key, index) => ({
+    key,
+    solidKey: `${PARTIAL_DAY_KEY_PREFIX}_${index}_solid`,
+    partialKey: `${PARTIAL_DAY_KEY_PREFIX}_${index}_partial`,
+  }));
+  const splitRows = rows.map((row, index) => {
+    const next = { ...row };
+    const isToday = todaySet.has(index);
+    const isPartialSegmentStart = index === previousIndex;
+    for (const item of series) {
+      next[item.solidKey] = isToday ? null : row[item.key];
+      next[item.partialKey] =
+        isToday || isPartialSegmentStart ? row[item.key] : null;
+    }
+    return next;
+  });
+
+  return { rows: splitRows, series };
+}
+
+export function shouldSplitCurrentDayTimeSeries(
+  panel: Pick<SqlPanel, "source">,
+  xKey: string,
+): boolean {
+  if (panel.source === "prometheus") return false;
+
+  const normalizedKey = xKey.trim().toLowerCase();
+  if (normalizedKey === "timestamp" || normalizedKey.endsWith("_timestamp")) {
+    return false;
+  }
+
+  return (
+    normalizedKey === "date" ||
+    normalizedKey === "day" ||
+    normalizedKey.endsWith("_date") ||
+    normalizedKey.endsWith("_day")
+  );
+}
+
 function formatSeriesLabel(value: string): string {
   const { metric, labels } = parsePrometheusSeriesLabel(value);
   const target =
@@ -232,11 +352,8 @@ function formatSeriesLabelForPanel(panel: SqlPanel, value: string): string {
 function formatXLabel(value: string, panel: SqlPanel): string {
   try {
     const s = String(value);
-    const normalized = /^\d{8}$/.test(s)
-      ? `${s.slice(0, 4)}-${s.slice(4, 6)}-${s.slice(6, 8)}`
-      : s;
-    const d = new Date(normalized);
-    if (!isNaN(d.getTime()) && s.length >= 8) {
+    const d = parseCalendarDate(s);
+    if (d && s.length >= 8) {
       return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
     }
   } catch {}
@@ -252,12 +369,21 @@ function numericTooltipValue(value: unknown): number {
   return Number.isFinite(numeric) ? numeric : Number.NEGATIVE_INFINITY;
 }
 
+function tooltipItemName(item: {
+  dataKey?: string | number;
+  name?: string | number;
+}): string {
+  return String(item.name ?? item.dataKey ?? "");
+}
+
 export function sortTooltipPayloadItems<
   T extends {
+    dataKey?: string | number;
+    name?: string | number;
     value?: unknown;
   },
 >(items: T[]): T[] {
-  return items
+  const sorted = items
     .map((item, index) => ({ item, index }))
     .sort((a, b) => {
       const diff =
@@ -265,6 +391,13 @@ export function sortTooltipPayloadItems<
       return diff !== 0 ? diff : a.index - b.index;
     })
     .map(({ item }) => item);
+  const seen = new Set<string>();
+  return sorted.filter((item) => {
+    const name = tooltipItemName(item);
+    if (seen.has(name)) return false;
+    seen.add(name);
+    return true;
+  });
 }
 
 function useSeriesVisibility(keys: string[]): {
@@ -1390,6 +1523,21 @@ function TimeSeriesRenderer({
   const seriesNameFormatter = (name: string) =>
     formatSeriesLabelForPanel(panel, name);
   const { hiddenKeys, visibleKeys, toggleSeries } = useSeriesVisibility(yKeys);
+  const splitPartialDay = shouldSplitCurrentDayTimeSeries(panel, xKey);
+  const { rows: chartRows, series } = useMemo(
+    () =>
+      splitPartialDay
+        ? splitCurrentDayTimeSeriesRows(rows, xKey, yKeys)
+        : {
+            rows,
+            series: yKeys.map((key) => ({
+              key,
+              solidKey: key,
+              partialKey: null,
+            })),
+          },
+    [rows, xKey, yKeys, splitPartialDay],
+  );
 
   if (chartType === "line") {
     return (
@@ -1402,7 +1550,7 @@ function TimeSeriesRenderer({
         showCustomLegend
       >
         <ResponsiveContainer width="100%" height="100%">
-          <LineChart data={rows}>
+          <LineChart data={chartRows}>
             <XAxis
               dataKey={xKey}
               stroke="hsl(var(--muted-foreground))"
@@ -1435,18 +1583,33 @@ function TimeSeriesRenderer({
               }
               itemSorter={(item) => -(Number(item.value) || 0)}
             />
-            {yKeys.map((key, i) => (
+            {series.map((item, i) => (
               <Line
-                key={key}
+                key={item.solidKey}
                 type="monotone"
-                dataKey={key}
-                name={seriesNameFormatter(key)}
+                dataKey={item.solidKey}
+                name={seriesNameFormatter(item.key)}
                 stroke={colors[i % colors.length]}
                 strokeWidth={2}
                 dot={false}
-                hide={hiddenKeys.has(key)}
+                hide={hiddenKeys.has(item.key)}
               />
             ))}
+            {series.map((item, i) =>
+              item.partialKey ? (
+                <Line
+                  key={item.partialKey}
+                  type="monotone"
+                  dataKey={item.partialKey}
+                  name={seriesNameFormatter(item.key)}
+                  stroke={colors[i % colors.length]}
+                  strokeWidth={2}
+                  strokeDasharray={PARTIAL_DAY_DASH}
+                  dot={false}
+                  hide={hiddenKeys.has(item.key)}
+                />
+              ) : null,
+            )}
           </LineChart>
         </ResponsiveContainer>
       </ChartFrame>
@@ -1468,7 +1631,7 @@ function TimeSeriesRenderer({
       showCustomLegend
     >
       <ResponsiveContainer width="100%" height="100%">
-        <AreaChart data={rows}>
+        <AreaChart data={chartRows}>
           {showFill && (
             <defs>
               {yKeys.map((key, i) => (
@@ -1526,20 +1689,37 @@ function TimeSeriesRenderer({
             }
             itemSorter={(item) => -(Number(item.value) || 0)}
           />
-          {yKeys.map((key, i) => (
+          {series.map((item, i) => (
             <Area
-              key={key}
+              key={item.solidKey}
               type="monotone"
-              dataKey={key}
-              name={seriesNameFormatter(key)}
+              dataKey={item.solidKey}
+              name={seriesNameFormatter(item.key)}
               stroke={colors[i % colors.length]}
               strokeWidth={2}
               fillOpacity={showFill ? 1 : 0}
-              fill={showFill ? `url(#sql-gradient-${key})` : "none"}
+              fill={showFill ? `url(#sql-gradient-${item.key})` : "none"}
               stackId={stacked ? "stack" : undefined}
-              hide={hiddenKeys.has(key)}
+              hide={hiddenKeys.has(item.key)}
             />
           ))}
+          {series.map((item, i) =>
+            item.partialKey ? (
+              <Area
+                key={item.partialKey}
+                type="monotone"
+                dataKey={item.partialKey}
+                name={seriesNameFormatter(item.key)}
+                stroke={colors[i % colors.length]}
+                strokeWidth={2}
+                strokeDasharray={PARTIAL_DAY_DASH}
+                fill="none"
+                fillOpacity={0}
+                stackId={stacked ? "partial-stack" : undefined}
+                hide={hiddenKeys.has(item.key)}
+              />
+            ) : null,
+          )}
         </AreaChart>
       </ResponsiveContainer>
     </ChartFrame>

package/corpus/templates/analytics/app/pages/adhoc/AdhocRouter.tsx

@@ -1,9 +1,8 @@
 import { Suspense, lazy, useEffect } from "react";
 import { useParams } from "react-router";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
 import { dashboardComponents } from "./registry";
 import { incrementItemView } from "@/lib/item-popularity";
+import { DashboardSkeleton } from "./DashboardSkeleton";
 
 const SqlDashboardPage = lazy(() => import("./sql-dashboard"));
 
@@ -11,25 +10,6 @@ const SqlDashboardPage = lazy(() => import("./sql-dashboard"));
 // Suspense → dashboard config load. Matches the real SqlChartCard shape (Card
 // chrome + title row + chart-body skeleton) so the user sees one continuous
 // skeleton state rather than four different ones morphing into each other.
-function DashboardSkeleton() {
-  return (
-    <div className="space-y-4">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        {[0, 1].map((i) => (
-          <Card key={i} className="flex flex-col overflow-visible">
-            <CardHeader className="pb-2 shrink-0">
-              <Skeleton className="h-4 w-32" />
-            </CardHeader>
-            <CardContent className="flex flex-1 flex-col pt-0">
-              <Skeleton className="w-full flex-1 min-h-[250px]" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-    </div>
-  );
-}
-
 function SqlDashboardLoader() {
   return (
     <Suspense fallback={<DashboardSkeleton />}>

package/corpus/templates/analytics/app/pages/adhoc/DashboardSkeleton.tsx

@@ -0,0 +1,35 @@
+import type { CSSProperties } from "react";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+interface DashboardSkeletonProps {
+  columns?: number;
+  count?: number;
+}
+
+export function DashboardSkeleton({
+  columns = 2,
+  count = 2,
+}: DashboardSkeletonProps) {
+  return (
+    <div className="dashboard-grid-container space-y-4">
+      <div
+        className="dashboard-grid"
+        style={{ "--dash-cols": columns } as CSSProperties}
+      >
+        {Array.from({ length: count }, (_, i) => (
+          <div key={i} className="dashboard-grid-cell h-full">
+            <Card className="flex h-full flex-col overflow-visible">
+              <CardHeader className="pb-2 shrink-0">
+                <Skeleton className="h-4 w-32" />
+              </CardHeader>
+              <CardContent className="flex flex-1 flex-col pt-0">
+                <Skeleton className="w-full flex-1 min-h-[250px]" />
+              </CardContent>
+            </Card>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/corpus/templates/analytics/app/pages/adhoc/explorer-dashboard/index.tsx

@@ -3,7 +3,7 @@ import { useSearchParams, useNavigate } from "react-router";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -21,7 +21,6 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
-import { Skeleton } from "@/components/ui/skeleton";
 import {
   IconPlus,
   IconTrash,
@@ -82,6 +81,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { DashboardSkeleton } from "../DashboardSkeleton";
 
 export interface DashboardChart {
   id: string;
@@ -485,27 +485,7 @@ export default function ExplorerDashboardPage() {
   }
 
   if (!loaded) {
-    // Match the eventual DashboardChartCard layout (Card chrome + title row +
-    // chart-body skeleton) so the transition from "dashboard config loading"
-    // to "queries loading" doesn't morph skeleton shape — the title text just
-    // fills in. Otherwise the bare h-64 rectangles jump into Card-chromed
-    // panels and the page visibly shifts.
-    return (
-      <div className="space-y-4">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {[0, 1].map((i) => (
-            <Card key={i} className="flex flex-col overflow-visible">
-              <CardHeader className="pb-2 shrink-0">
-                <Skeleton className="h-4 w-32" />
-              </CardHeader>
-              <CardContent className="flex flex-1 flex-col pt-0">
-                <Skeleton className="w-full flex-1 min-h-[250px]" />
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-    );
+    return <DashboardSkeleton />;
   }
 
   if (!dashboard) return null;

package/corpus/templates/analytics/app/pages/adhoc/sql-dashboard/index.tsx

@@ -12,8 +12,7 @@ import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent } from "@/components/ui/card";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
   AlertDialog,
@@ -90,6 +89,7 @@ import {
   sqlDashboardPrefetchKey,
   type PrefetchSnapshot,
 } from "@/lib/prefetch-keys";
+import { DashboardSkeleton } from "../DashboardSkeleton";
 import {
   resourceCanEdit,
   resourceCanManage,
@@ -1119,30 +1119,7 @@ export default function SqlDashboardPage() {
   }
 
   if (!loaded) {
-    // Match the eventual SqlChartCard layout exactly (Card chrome + title row +
-    // chart-body skeleton) so the transition from "dashboard config loading" to
-    // "queries loading" doesn't morph the skeleton's shape — only the title
-    // text fills in. Otherwise the bare h-64 rectangles jump into Card-chromed
-    // panels and the page visibly shifts.
-    return (
-      <div className="dashboard-grid-container space-y-4">
-        <div
-          className="dashboard-grid"
-          style={{ "--dash-cols": 2 } as React.CSSProperties}
-        >
-          {[0, 1].map((i) => (
-            <Card key={i} className="flex flex-col overflow-visible">
-              <CardHeader className="pb-2 shrink-0">
-                <Skeleton className="h-4 w-32" />
-              </CardHeader>
-              <CardContent className="flex flex-1 flex-col pt-0">
-                <Skeleton className="w-full flex-1 min-h-[250px]" />
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </div>
-    );
+    return <DashboardSkeleton />;
   }
 
   if (!dashboard) return <BlankDashboard />;

package/corpus/templates/analytics/changelog/2026-06-24-daily-dashboard-charts-now-use-local-day-buckets-and-show-th.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-24
+---
+
+Daily dashboard charts now show the in-progress day as a dashed segment.

package/corpus/templates/analytics/changelog/2026-06-24-dashboard-loading-placeholders-now-span-the-available-page-w.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-24
+---
+
+Dashboard loading placeholders now span the available page width.

package/corpus/templates/analytics/changelog/2026-06-24-first-party-dashboard-dates-now-align-to-pacific-time-for-da.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-24
+---
+
+First-party dashboard dates now align to Pacific time for daily activity and retention panels.