@cryptiklemur/lattice 1.47.0 → 2.0.0

package/{client/src → src/client}/components/sidebar/SessionList.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState, useMemo, useCallback } from "react";
 import { createPortal } from "react-dom";
-import { Clock, MessageSquare, Cpu, DollarSign } from "lucide-react";
+import { Clock, MessageSquare, Cpu, DollarSign, Pencil, Trash2 } from "lucide-react";
+import { ContextMenu, useContextMenu } from "../ui/ContextMenu";
 import type { SessionSummary, SessionPreview, SessionListMessage, SessionCreatedMessage, SessionPreviewMessage } from "@lattice/shared";
 import type { ServerMessage } from "@lattice/shared";
 import { useWebSocket } from "../../hooks/useWebSocket";
@@ -60,12 +61,6 @@ function groupByTime(sessions: SessionSummary[]): SessionGroup[] {
 
 var knownUpdatedAt = new Map<string, number>();
 
-interface ContextMenu {
-  x: number;
-  y: number;
-  session: SessionSummary;
-}
-
 export interface DateRange {
   from?: number;
   to?: number;
@@ -199,7 +194,7 @@ export function SessionList(props: SessionListProps) {
   var [totalCount, setTotalCount] = useState<number>(0);
   var [renameId, setRenameId] = useState<string | null>(null);
   var [renameValue, setRenameValue] = useState<string>("");
-  var [contextMenu, setContextMenu] = useState<ContextMenu | null>(null);
+  var ctxMenu = useContextMenu<SessionSummary>();
   var [unreadTick, setUnreadTick] = useState<number>(0);
   var [hoveredId, setHoveredId] = useState<string | null>(null);
   var [hoveredRect, setHoveredRect] = useState<DOMRect | null>(null);
@@ -351,19 +346,6 @@ export function SessionList(props: SessionListProps) {
     }
   }, [renameId]);
 
-  useEffect(function () {
-    if (!contextMenu) {
-      return;
-    }
-    function dismiss() {
-      setContextMenu(null);
-    }
-    document.addEventListener("mousedown", dismiss);
-    return function () {
-      document.removeEventListener("mousedown", dismiss);
-    };
-  }, [contextMenu]);
-
   function handleActivate(session: SessionSummary) {
     if (!props.projectSlug) {
       return;
@@ -377,12 +359,11 @@ export function SessionList(props: SessionListProps) {
   }
 
   function handleContextMenu(e: React.MouseEvent, session: SessionSummary) {
-    e.preventDefault();
-    setContextMenu({ x: e.clientX, y: e.clientY, session });
+    ctxMenu.open(e, session);
   }
 
   function handleRenameStart(session: SessionSummary) {
-    setContextMenu(null);
+    ctxMenu.close();
     setRenameId(session.id);
     setRenameValue(session.title);
   }
@@ -416,7 +397,7 @@ export function SessionList(props: SessionListProps) {
   }
 
   function handleDeleteSession(session: SessionSummary) {
-    setContextMenu(null);
+    ctxMenu.close();
     ws.send({ type: "session:delete", sessionId: session.id });
     setSessions(function (prev) {
       return prev.filter(function (s) { return s.id !== session.id; });
@@ -452,9 +433,16 @@ export function SessionList(props: SessionListProps) {
     var displayed = sessions;
     if (props.filter) {
       var term = props.filter.toLowerCase();
-      displayed = displayed.filter(function (s) {
-        return s.title.toLowerCase().includes(term);
-      });
+      if (term.startsWith("*")) {
+        var idSuffix = term.slice(1);
+        displayed = displayed.filter(function (s) {
+          return s.id.toLowerCase().endsWith(idSuffix) || s.id.toLowerCase().includes(idSuffix);
+        });
+      } else {
+        displayed = displayed.filter(function (s) {
+          return s.title.toLowerCase().includes(term) || s.id.toLowerCase().includes(term);
+        });
+      }
     }
     if (props.dateRange) {
       var from = props.dateRange.from;
@@ -594,27 +582,17 @@ export function SessionList(props: SessionListProps) {
         <PreviewPopover preview={activePreview} anchorRect={hoveredRect} />
       )}
 
-      {contextMenu !== null && (
-        <div
-          role="menu"
-          aria-label="Session actions"
-          onMouseDown={function (e) { e.stopPropagation(); }}
-          className="fixed z-[9999] bg-base-200 border border-base-content/20 rounded-md shadow-xl p-1 min-w-[140px]"
-          style={{ top: contextMenu.y, left: contextMenu.x }}
-        >
-          <button
-            onClick={function () { handleRenameStart(contextMenu!.session); }}
-            className="block w-full px-2.5 py-1.5 rounded text-[13px] text-base-content/70 text-left hover:bg-base-300 hover:text-base-content transition-colors duration-[120ms] cursor-pointer"
-          >
-            Rename
-          </button>
-          <button
-            onClick={function () { handleDeleteSession(contextMenu!.session); }}
-            className="block w-full px-2.5 py-1.5 rounded text-[13px] text-error text-left hover:bg-base-300 transition-colors duration-[120ms] cursor-pointer"
-          >
-            Delete
-          </button>
-        </div>
+      {ctxMenu.state !== null && (
+        <ContextMenu
+          x={ctxMenu.state.x}
+          y={ctxMenu.state.y}
+          items={[
+            { label: "Rename", icon: <Pencil size={14} />, onClick: function () { handleRenameStart(ctxMenu.state!.data); } },
+            { label: "Delete", icon: <Trash2 size={14} />, onClick: function () { handleDeleteSession(ctxMenu.state!.data); }, danger: true },
+          ]}
+          onClose={ctxMenu.close}
+          label="Session actions"
+        />
       )}
     </div>
   );

package/{client/src → src/client}/components/sidebar/Sidebar.tsx

@@ -12,7 +12,6 @@ import { clearSession } from "../../stores/session";
 import { useOnline } from "../../hooks/useOnline";
 import { openTab, openSessionTab, closeTab, getWorkspaceStore } from "../../stores/workspace";
 import { getSidebarStore, goToAnalytics, openSettings } from "../../stores/sidebar";
-import { setAnalyticsScope } from "../../stores/analytics";
 import { ProjectRail } from "./ProjectRail";
 import { SessionList } from "./SessionList";
 import { UserIsland } from "./UserIsland";
@@ -259,7 +258,7 @@ export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
       <div className="flex flex-col flex-1 overflow-hidden min-h-0 bg-base-200 border-r border-base-300">
         {sidebar.sidebarMode === "project" ? (
           <>
-            {sidebar.activeView.type === "dashboard" ? (
+            {(sidebar.activeView.type === "dashboard" || (sidebar.activeView.type === "analytics" && !sidebar.activeProjectSlug)) ? (
               <>
                 <div className="px-4 h-12 border-b border-base-300 flex-shrink-0 flex items-center gap-2">
                   <LatticeLogomark size={18} />
@@ -287,10 +286,7 @@ export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
                     </button>
                     <button
                       type="button"
-                      onClick={function () {
-                        setAnalyticsScope("global");
-                        openTab("analytics");
-                      }}
+                      onClick={goToAnalytics}
                       className="flex items-center gap-2 w-full px-2 py-1.5 rounded-lg text-[11px] text-base-content/40 hover:text-base-content/70 hover:bg-base-300/30 transition-colors"
                     >
                       <BarChart3 size={12} />

package/{client/src → src/client}/components/sidebar/UserIsland.tsx

@@ -5,9 +5,9 @@ import { useTheme } from "../../hooks/useTheme";
 import { useSidebar } from "../../hooks/useSidebar";
 import { useInstallPrompt } from "../../hooks/useInstallPrompt";
 import { useWebSocket } from "../../hooks/useWebSocket";
-import { getSessionStore, loadCachedRateLimits } from "../../stores/session";
+import { getSessionStore, loadCachedRateLimits, updateRateLimit } from "../../stores/session";
 import type { RateLimitEntry } from "../../stores/session";
-import pkg from "../../../package.json";
+import pkg from "../../../../package.json";
 import type { ServerMessage } from "@lattice/shared";
 
 interface UserIslandProps {
@@ -66,7 +66,25 @@ export function UserIsland(props: UserIslandProps) {
   var [latestVersion, setLatestVersion] = useState<string | null>(null);
   var [currentVersion, setCurrentVersion] = useState(pkg.version);
 
-  useEffect(function () { loadCachedRateLimits(); }, []);
+  useEffect(function () {
+    loadCachedRateLimits();
+    function handleRateLimit(msg: ServerMessage) {
+      var m = msg as { type: string; status: "allowed" | "allowed_warning" | "rejected"; utilization?: number; resetsAt?: number; rateLimitType?: string; overageStatus?: string; overageResetsAt?: number; isUsingOverage?: boolean };
+      if (!m.rateLimitType) return;
+      updateRateLimit({
+        status: m.status,
+        utilization: m.utilization,
+        resetsAt: m.resetsAt,
+        rateLimitType: m.rateLimitType,
+        overageStatus: m.overageStatus,
+        overageResetsAt: m.overageResetsAt,
+        isUsingOverage: m.isUsingOverage,
+        updatedAt: Date.now(),
+      });
+    }
+    ws.subscribe("chat:rate_limit", handleRateLimit);
+    return function () { ws.unsubscribe("chat:rate_limit", handleRateLimit); };
+  }, []);
 
   useEffect(function () {
     function handleUpdateStatus(msg: ServerMessage) {
@@ -120,7 +138,8 @@ export function UserIsland(props: UserIslandProps) {
 
   var usageBar = null;
   if (primaryEntry) {
-    var utilPct = Math.min(100, Math.round((primaryEntry.utilization ?? 0) * 100));
+    var hasUtilization = primaryEntry.utilization !== undefined && primaryEntry.utilization !== null;
+    var utilPct = hasUtilization ? Math.min(100, Math.round((primaryEntry.utilization as number) * 100)) : 0;
 
     usageBar = (
       <div
@@ -133,7 +152,7 @@ export function UserIsland(props: UserIslandProps) {
             {getRateLimitLabel(primaryEntry.rateLimitType)} usage
           </span>
           <span className={"text-[9px] font-mono tabular-nums " + getStatusColor(primaryEntry)}>
-            {utilPct}%
+            {hasUtilization ? utilPct + "%" : "—"}
           </span>
         </div>
         <div className="h-1 rounded-full bg-base-content/8 overflow-hidden">

package/{client/src → src/client}/components/sidebar/UserMenu.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { Settings, RefreshCw, Power } from "lucide-react";
 import { useWebSocket } from "../../hooks/useWebSocket";
 
@@ -77,7 +78,7 @@ export function UserMenu(props: UserMenuProps) {
   var itemClass = "w-full flex items-center gap-2 px-2.5 py-[6px] rounded text-[11px] text-left cursor-pointer transition-colors duration-[120ms] text-base-content/70 hover:bg-base-content/5 hover:text-base-content outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset";
   var dangerClass = "w-full flex items-center gap-2 px-2.5 py-[6px] rounded text-[11px] text-left cursor-pointer transition-colors duration-[120ms] text-error hover:bg-error/10 outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset";
 
-  return (
+  return createPortal(
     <div
       ref={menuRef}
       role="menu"
@@ -100,6 +101,7 @@ export function UserMenu(props: UserMenuProps) {
         <span className="opacity-60 flex-shrink-0"><Power size={13} /></span>
         {confirmingShutdown ? "Click again to shutdown" : "Shutdown"}
       </button>
-    </div>
+    </div>,
+    document.body
   );
 }

package/src/client/components/ui/ContextMenu.tsx

@@ -0,0 +1,153 @@
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import type { ReactNode } from "react";
+
+export interface ContextMenuItem {
+  label: string;
+  icon?: ReactNode;
+  onClick: () => void;
+  danger?: boolean;
+  disabled?: boolean;
+  hidden?: boolean;
+}
+
+export interface ContextMenuDivider {
+  type: "divider";
+  hidden?: boolean;
+}
+
+export type ContextMenuEntry = ContextMenuItem | ContextMenuDivider;
+
+interface ContextMenuProps {
+  x: number;
+  y: number;
+  items: ContextMenuEntry[];
+  onClose: () => void;
+  label?: string;
+}
+
+export function ContextMenu(props: ContextMenuProps) {
+  var menuRef = useRef<HTMLDivElement>(null);
+  var [focusIndex, setFocusIndex] = useState(-1);
+  var visibleItems = props.items.filter(function (item) { return !item.hidden; });
+
+  useEffect(function () {
+    function handleClick(e: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        props.onClose();
+      }
+    }
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        props.onClose();
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setFocusIndex(function (prev) {
+          var next = prev + 1;
+          while (next < visibleItems.length && (visibleItems[next] as ContextMenuDivider).type === "divider") next++;
+          return next < visibleItems.length ? next : prev;
+        });
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setFocusIndex(function (prev) {
+          var next = prev - 1;
+          while (next >= 0 && (visibleItems[next] as ContextMenuDivider).type === "divider") next--;
+          return next >= 0 ? next : prev;
+        });
+        return;
+      }
+      if (e.key === "Enter" && focusIndex >= 0) {
+        e.preventDefault();
+        var item = visibleItems[focusIndex] as ContextMenuItem;
+        if (item && !item.disabled && (item as unknown as ContextMenuDivider).type !== "divider") {
+          item.onClick();
+          props.onClose();
+        }
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKey);
+    return function () {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [props.onClose, focusIndex, visibleItems]);
+
+  useEffect(function () {
+    if (!menuRef.current) return;
+    var rect = menuRef.current.getBoundingClientRect();
+    var vw = window.innerWidth;
+    var vh = window.innerHeight;
+    if (rect.right > vw) {
+      menuRef.current.style.left = Math.max(4, props.x - rect.width) + "px";
+    }
+    if (rect.bottom > vh) {
+      menuRef.current.style.top = Math.max(4, props.y - rect.height) + "px";
+    }
+  }, [props.x, props.y]);
+
+  return createPortal(
+    <div
+      ref={menuRef}
+      role="menu"
+      aria-label={props.label || "Context menu"}
+      onMouseDown={function (e) { e.stopPropagation(); }}
+      className="fixed z-[99999] bg-base-200 border border-base-content/20 rounded-lg shadow-xl p-1 min-w-[180px] animate-in fade-in zoom-in-95 duration-100"
+      style={{ top: props.y, left: props.x }}
+    >
+      {visibleItems.map(function (entry, i) {
+        if ((entry as ContextMenuDivider).type === "divider") {
+          return <div key={"d-" + i} className="my-1 border-t border-base-content/10" />;
+        }
+        var item = entry as ContextMenuItem;
+        var isFocused = i === focusIndex;
+        return (
+          <button
+            key={i}
+            role="menuitem"
+            tabIndex={isFocused ? 0 : -1}
+            disabled={item.disabled}
+            onClick={function () {
+              if (!item.disabled) {
+                item.onClick();
+                props.onClose();
+              }
+            }}
+            onMouseEnter={function () { setFocusIndex(i); }}
+            className={
+              "flex items-center gap-2 w-full px-2.5 py-1.5 rounded text-[13px] text-left transition-colors duration-[80ms] cursor-pointer " +
+              (item.disabled ? "opacity-40 cursor-not-allowed " : "") +
+              (item.danger ? "text-error hover:bg-error/10 " : "text-base-content/70 hover:bg-base-300 hover:text-base-content ") +
+              (isFocused ? (item.danger ? "bg-error/10" : "bg-base-300 text-base-content") : "")
+            }
+          >
+            {item.icon && <span className="w-4 h-4 opacity-60 shrink-0">{item.icon}</span>}
+            {item.label}
+          </button>
+        );
+      })}
+    </div>,
+    document.body,
+  );
+}
+
+export function useContextMenu<T>() {
+  var [state, setState] = useState<{ x: number; y: number; data: T } | null>(null);
+
+  function open(e: React.MouseEvent, data: T) {
+    e.preventDefault();
+    e.stopPropagation();
+    setState({ x: e.clientX, y: e.clientY, data });
+  }
+
+  function close() {
+    setState(null);
+  }
+
+  return { state, open, close };
+}

package/{client/src → src/client}/components/ui/PopupMenu.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
 
 export interface PopupMenuItem {
   id: string;
@@ -84,7 +85,7 @@ export function PopupMenu(props: PopupMenuProps) {
     }
   }
 
-  return (
+  return createPortal(
     <div
       ref={menuRef}
       role="menu"
@@ -113,6 +114,7 @@ export function PopupMenu(props: PopupMenuProps) {
           </button>
         );
       })}
-    </div>
+    </div>,
+    document.body
   );
 }

package/{client/src → src/client}/components/ui/SaveFooter.tsx

@@ -18,7 +18,7 @@ export function SaveFooter({ dirty, saving, saveState, onSave, extraStatus }: Sa
   useEffect(function () {
     if (prevStateRef.current !== saveState) {
       if (saveState === "saved") {
-        showToast("Settings saved", "success");
+        showToast("Settings saved", "info");
       } else if (saveState === "error") {
         showToast("Failed to save settings — server did not respond within 5 seconds", "error");
       }

package/{client/src → src/client}/components/workspace/TabBar.tsx

@@ -1,22 +1,16 @@
-import { useState, useEffect, useRef } from "react";
 import { X, Columns2, Rows2, MessageSquare, FolderOpen, TerminalSquare, StickyNote, Calendar, Bookmark, BarChart3 } from "lucide-react";
 import { useWorkspace } from "../../hooks/useWorkspace";
 import { useSession } from "../../hooks/useSession";
 import type { Tab, TabType } from "../../stores/workspace";
 import { pinTab } from "../../stores/workspace";
 import { formatSessionTitle } from "../../utils/formatSessionTitle";
+import { ContextMenu, useContextMenu } from "../ui/ContextMenu";
 
 interface TabBarProps {
   paneId?: string;
   isActivePane?: boolean;
 }
 
-interface ContextMenuState {
-  tabId: string;
-  x: number;
-  y: number;
-}
-
 var TAB_ICONS: Record<TabType, typeof MessageSquare> = {
   chat: MessageSquare,
   files: FolderOpen,
@@ -30,31 +24,7 @@ var TAB_ICONS: Record<TabType, typeof MessageSquare> = {
 export function TabBar({ paneId, isActivePane }: TabBarProps) {
   var workspace = useWorkspace();
   var session = useSession();
-  var [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
-  var menuRef = useRef<HTMLDivElement>(null);
-
-  useEffect(function () {
-    if (!contextMenu) return;
-
-    function handleClickOutside(e: MouseEvent) {
-      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
-        setContextMenu(null);
-      }
-    }
-
-    function handleEscape(e: KeyboardEvent) {
-      if (e.key === "Escape") {
-        setContextMenu(null);
-      }
-    }
-
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleEscape);
-    return function () {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
-    };
-  }, [contextMenu]);
+  var ctxMenu = useContextMenu<string>();
 
   var paneTabs: Tab[];
   var activeTabId: string;
@@ -102,25 +72,18 @@ export function TabBar({ paneId, isActivePane }: TabBarProps) {
   }
 
   function handleContextMenu(e: React.MouseEvent, tabId: string) {
-    e.preventDefault();
     if (workspace.panes.length >= 2) return;
     var contextPane = paneId
       ? workspace.panes.find(function (p) { return p.id === paneId; })
       : workspace.panes[0];
     if (!contextPane || contextPane.tabIds.length < 2) return;
-    var menuWidth = 160;
-    var menuHeight = 80;
-    var x = e.clientX;
-    var y = e.clientY;
-    if (x + menuWidth > window.innerWidth) x = window.innerWidth - menuWidth - 8;
-    if (y + menuHeight > window.innerHeight) y = window.innerHeight - menuHeight - 8;
-    setContextMenu({ tabId, x, y });
+    ctxMenu.open(e, tabId);
   }
 
   function handleSplit(direction: "horizontal" | "vertical") {
-    if (!contextMenu) return;
-    workspace.splitPane(contextMenu.tabId, direction);
-    setContextMenu(null);
+    if (!ctxMenu.state) return;
+    workspace.splitPane(ctxMenu.state.data, direction);
+    ctxMenu.close();
   }
 
   function handleMiddleClick(e: React.MouseEvent, tab: Tab) {
@@ -190,27 +153,17 @@ export function TabBar({ paneId, isActivePane }: TabBarProps) {
           );
         })}
       </div>
-      {contextMenu && (
-        <div
-          ref={menuRef}
-          className="fixed z-50 bg-base-300 border border-base-content/15 rounded-lg shadow-lg py-1 min-w-[160px]"
-          style={{ left: contextMenu.x, top: contextMenu.y }}
-        >
-          <button
-            onClick={function () { handleSplit("horizontal"); }}
-            className="flex items-center gap-2 w-full px-3 py-1.5 text-[12px] font-mono text-base-content/80 hover:bg-base-content/15 hover:text-base-content transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
-          >
-            <Columns2 size={14} />
-            Split Right
-          </button>
-          <button
-            onClick={function () { handleSplit("vertical"); }}
-            className="flex items-center gap-2 w-full px-3 py-1.5 text-[12px] font-mono text-base-content/80 hover:bg-base-content/15 hover:text-base-content transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
-          >
-            <Rows2 size={14} />
-            Split Down
-          </button>
-        </div>
+      {ctxMenu.state !== null && (
+        <ContextMenu
+          x={ctxMenu.state.x}
+          y={ctxMenu.state.y}
+          items={[
+            { label: "Split Right", icon: <Columns2 size={14} />, onClick: function () { handleSplit("horizontal"); } },
+            { label: "Split Down", icon: <Rows2 size={14} />, onClick: function () { handleSplit("vertical"); } },
+          ]}
+          onClose={ctxMenu.close}
+          label="Tab actions"
+        />
       )}
     </>
   );

package/{client/src → src/client}/hooks/useAnalytics.ts

@@ -2,10 +2,12 @@ import { useEffect, useRef } from "react";
 import { useStore } from "@tanstack/react-store";
 import { useWebSocket } from "./useWebSocket";
 import type { ServerMessage } from "@lattice/shared";
-import type { AnalyticsPeriod, AnalyticsScope } from "@lattice/shared";
+import type { AnalyticsPeriod, AnalyticsScope, AnalyticsSectionName } from "@lattice/shared";
+import type { AnalyticsPayload } from "@lattice/shared";
 import {
   getAnalyticsStore,
-  setAnalyticsData,
+  mergeAnalyticsSection,
+  clearAnalyticsForRequest,
   setAnalyticsLoading,
   setAnalyticsError,
   setAnalyticsPeriod,
@@ -26,7 +28,7 @@ export function useAnalytics(): AnalyticsState & {
 
   function requestAnalytics(forceRefresh?: boolean) {
     var s = getAnalyticsStore().state;
-    setAnalyticsLoading(true);
+    clearAnalyticsForRequest();
     sendRef.current({
       type: "analytics:request",
       requestId: crypto.randomUUID(),
@@ -38,9 +40,13 @@ export function useAnalytics(): AnalyticsState & {
   }
 
   useEffect(function () {
-    function handleData(msg: ServerMessage) {
-      var m = msg as { type: string; data: any };
-      setAnalyticsData(m.data);
+    function handleSection(msg: ServerMessage) {
+      var m = msg as { type: string; section: AnalyticsSectionName; data: Partial<AnalyticsPayload> };
+      mergeAnalyticsSection(m.section, m.data);
+    }
+
+    function handleComplete() {
+      setAnalyticsLoading(false);
     }
 
     function handleError(msg: ServerMessage) {
@@ -48,11 +54,13 @@ export function useAnalytics(): AnalyticsState & {
       setAnalyticsError(m.message);
     }
 
-    subscribe("analytics:data", handleData);
+    subscribe("analytics:section", handleSection);
+    subscribe("analytics:complete", handleComplete);
     subscribe("analytics:error", handleError);
 
     return function () {
-      unsubscribe("analytics:data", handleData);
+      unsubscribe("analytics:section", handleSection);
+      unsubscribe("analytics:complete", handleComplete);
       unsubscribe("analytics:error", handleError);
     };
   }, [subscribe, unsubscribe]);
@@ -63,6 +71,7 @@ export function useAnalytics(): AnalyticsState & {
 
   return {
     data: state.data,
+    loadedSections: state.loadedSections,
     loading: state.loading,
     error: state.error,
     period: state.period,