v0.1.19 - Throughput overview & responsive header

- Throughput: new "Throughput Overview" header with Gauge icon and brand-green
  badge icons on each card (Today, This week, 4-week average, Horse Mix, Grain Mix)
- Throughput: inline rolling-range selector (7d / 4w / 6w / 12w, default 4 weeks)
  driving the customer-mix cards; stats window widened to 12 weeks so switching
  range is a pure client-side re-filter
- Throughput: cards collapse to a single even 5-across row on laptop and up,
  with container-query value text that scales to each card's width
- Throughput: date logic pinned to Australian Eastern time (fixes the day-early
  date); This week subtitle shows the Mon-Sun date range
- Throughput: subtler tinted add-form; removed the inline-entry kicker and the
  "Open full form" link
- Topbar: fix cramped laptop header - action toggles no longer wrap above the
  user button; search drops to its own row earlier

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/lib/components/navigation/ClientTopbar.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { Settings } from 'lucide-svelte';
+  import { Settings, Sparkles } from 'lucide-svelte';
 
   import ThemeToggle from '$lib/components/ThemeToggle.svelte';
   import WorkspaceSearchTrigger from '$lib/components/navigation/WorkspaceSearchTrigger.svelte';
+  import { tooltip } from '$lib/actions/tooltip';
   import type { AppSession } from '$lib/session';
   import type { Crumb } from '$lib/navigation/client-navigation';
 
@@ -18,7 +19,8 @@
     onOpenPalette,
     onToggleUserMenu,
     onOpenSettings,
-    onSignOut
+    onSignOut,
+    onShowWhatsNew
   }: {
     breadcrumbs: Crumb[];
     title: string;
@@ -32,6 +34,7 @@
     onToggleUserMenu: () => void;
     onOpenSettings: () => void;
     onSignOut: () => void;
+    onShowWhatsNew: () => void;
   } = $props();
 </script>
 
@@ -64,6 +67,16 @@
   {/if}
 
   <div class="topbar-actions">
+    <button
+      class="whats-new-toggle"
+      type="button"
+      onclick={onShowWhatsNew}
+      aria-label="What's new"
+      use:tooltip={"What's new — latest updates and changes"}
+    >
+      <Sparkles size={18} strokeWidth={1.75} />
+    </button>
+
     <ThemeToggle />
 
     <div class="menu-wrap user-menu-wrap">
@@ -122,7 +135,10 @@
 <style>
   .topbar {
     display: grid;
-    grid-template-columns: 1fr minmax(20rem, 36rem) 1fr;
+    /* Left flexes/truncates, search shrinks within a cap, and the actions take
+       exactly their content width (auto) so they're never squeezed into
+       wrapping. */
+    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem) auto;
     align-items: center;
     gap: 0.75rem;
     padding: 0.72rem 1.2rem;
@@ -141,7 +157,8 @@
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
-    padding-right: 0.9rem;
+    /* Extra right padding gives the scaled-up logo room before the divider. */
+    padding-right: 1.6rem;
     border-right: 1px solid var(--color-border);
   }
 
@@ -149,6 +166,16 @@
     height: 2rem;
     width: auto;
     display: block;
+    /* Zoom the wide logo lockup in so the wordmark is legible, without growing
+       the header: transform scales the visual only, leaving the 2rem layout box
+       (and therefore the topbar height) untouched. Anchored left so it grows
+       rightward from the topbar's left padding edge. */
+    transform: scale(1.45);
+    transform-origin: left center;
+  }
+
+  .topbar-copy {
+    min-width: 0;
   }
 
   .topbar-copy h1 {
@@ -156,6 +183,11 @@
     font-size: 1.34rem;
     font-weight: 700;
     letter-spacing: -0.01em;
+    /* Yield gracefully when space is tight rather than pushing the actions
+       into a wrap. */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .breadcrumbs {
@@ -202,11 +234,33 @@
   .topbar-actions {
     display: flex;
     align-items: center;
-    gap: 0.68rem;
-    flex-wrap: wrap;
+    gap: 0.6rem;
+    /* Never let the What's-new / theme toggles wrap above the user button. */
+    flex-wrap: nowrap;
     justify-content: flex-end;
   }
 
+  /* Matches the ThemeToggle button so the two sit as a pair. */
+  .whats-new-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.6rem;
+    height: 2.6rem;
+    flex-shrink: 0;
+    border: 1px solid var(--color-border);
+    border-radius: 0.82rem;
+    background: var(--color-bg-surface);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
+  }
+
+  .whats-new-toggle:hover {
+    background: var(--color-surface-hover);
+    color: var(--color-text-primary);
+  }
+
   .workspace-label {
     color: var(--muted);
     font-size: 0.76rem;
@@ -390,7 +444,10 @@
     background: var(--panel-soft);
   }
 
-  @media (max-width: 1180px) {
+  /* Drop the search to its own row early: with the 252px sidebar present, a
+     laptop's content width is already tight well above the sidebar's own
+     collapse point, so keep the top row to brand + actions only. */
+  @media (max-width: 1280px) {
     .topbar {
       grid-template-columns: minmax(0, 1fr) auto;
       grid-template-areas:
@@ -417,13 +474,19 @@
     }
 
     .topbar-brand {
-      padding-right: 0.6rem;
+      padding-right: 1.1rem;
     }
 
     .topbar-brand img {
       height: 1.6rem;
     }
 
+    /* On phones let the user button drop onto its own line below the icon
+       toggles again (the desktop nowrap rule would otherwise overflow). */
+    .topbar-actions {
+      flex-wrap: wrap;
+    }
+
     .user-trigger {
       min-width: auto;
       width: 100%;