diff --git a/src/stores/activity.ts b/src/stores/activity.ts
index eae1adecb..681845320 100644
--- a/src/stores/activity.ts
+++ b/src/stores/activity.ts
@@ -22,6 +22,12 @@ import { useBucketsStore } from '~/stores/buckets';
 import { useCategoryStore } from '~/stores/categories';
 
 import { getClient } from '~/util/awclient';
+import { PeriodCache } from '~/util/periodCache';
+
+const categoryPeriodCaches = new WeakMap<object, PeriodCache<any>>();
+const categoryRequests = new WeakMap<object, object>();
+// Key of the request that produced the current category.by_period.
+const categoryHistoryKeys = new WeakMap<object, string>();
 import {
   FullDesktopQueryResult,
   mergeFullDesktopResults,
@@ -95,6 +101,7 @@ export interface QueryOptions {
   filter_afk?: boolean;
   include_audible?: boolean;
   include_stopwatch?: boolean;
+  include_category_history?: boolean;
   filter_categories?: string[][];
   dont_query_inactive?: boolean;
   force?: boolean;
@@ -337,8 +344,19 @@ export const useActivityStore = defineStore('activity', {
         }
 
         // Perform this last, as it takes the longest
-        if (this.window.available || this.android.available) {
+        const canQueryCategories = this.window.available || this.android.available;
+        if (canQueryCategories && query_options.include_category_history !== false) {
           await this.query_category_time_by_period(query_options);
+        } else if (
+          canQueryCategories &&
+          (query_options.force ||
+            categoryHistoryKeys.get(this) !== this.category_history_request(query_options).key)
+        ) {
+          // This load skipped category history, but the retained periods were
+          // computed for different inputs (range, filters, category rules or
+          // buckets), so they no longer describe the current query and must not
+          // be served to views like Report that read them without reloading.
+          this.query_category_time_by_period_completed({ by_period: null });
         }
       } else {
         console.warn(
@@ -405,6 +423,8 @@ export const useActivityStore = defineStore('activity', {
     },
 
     async reset() {
+      categoryRequests.delete(this);
+      categoryPeriodCaches.delete(this);
       getClient().abort();
       this.query_window_completed({});
       this.query_browser_completed({});
@@ -512,16 +532,18 @@ export const useActivityStore = defineStore('activity', {
       this.query_active_history_completed({ active_history });
     },
 
-    async query_category_time_by_period({
+    // The periods and query that category history is built from. The key
+    // identifies everything the result depends on, including the current
+    // category rules and resolved bucket IDs baked into the query.
+    category_history_request({
       timeperiod,
       filter_categories,
       filter_afk,
       include_stopwatch,
-      dontQueryInactive,
       always_active_pattern,
-    }: QueryOptions & { dontQueryInactive: boolean }) {
+    }: QueryOptions): { periods: string[]; query: string[]; key: string } {
       // TODO: Needs to be adapted for Android
-      let periods: string[];
+      let periods: string[] = [];
       const count = timeperiod.length[0];
       const res = timeperiod.length[1];
       if (res.startsWith('day') && count == 1) {
@@ -544,76 +566,74 @@ export const useActivityStore = defineStore('activity', {
       // Filter out periods that start in the future
       periods = periods.filter(period => new Date(period.split('/')[0]) < new Date());
 
-      const signal = getClient().controller.signal;
-      let cancelled = false;
-      signal.onabort = () => {
-        cancelled = true;
-        console.debug('Request aborted');
-      };
+      // Prefer ScreenTime bucket over Android watcher for consistency with query_android
+      const iosBucketForCategory = this.buckets.android.find((id: string) =>
+        id.startsWith('aw-import-screentime')
+      );
+      const iosOrAndroidBucket = iosBucketForCategory || this.buckets.android[0];
+      const isAndroid = iosOrAndroidBucket !== undefined;
+      // ScreenTime (iOS) buckets carry a "title" key; aw-watcher-android buckets do not.
+      // Pass isIos so canonicalEvents uses the correct merge keys and titles are preserved.
+      const isIosForCategory = !!iosBucketForCategory;
+      const categories = useCategoryStore().classes_for_query;
+      // TODO: Clean up call, pass QueryParams in fullDesktopQuery as well
+      // TODO: Unify QueryOptions and QueryParams
+      const query = queries.categoryQuery({
+        bid_browsers: this.buckets.browser,
+        bid_stopwatch:
+          include_stopwatch && this.buckets.stopwatch.length > 0
+            ? this.buckets.stopwatch[0]
+            : undefined,
+        categories,
+        filter_categories,
+        filter_afk,
+        always_active_pattern,
+        ...(isAndroid
+          ? {
+              bid_android: iosOrAndroidBucket,
+              isIos: isIosForCategory,
+            }
+          : {
+              bid_afk: this.buckets.afk[0],
+              bid_window: this.buckets.window[0],
+            }),
+      });
+      return { periods, query, key: JSON.stringify([query, periods]) };
+    },
 
-      // Query one period at a time, to avoid timeout on slow queries
-      let data = [];
-      for (const period of periods) {
-        // Not stable
-        //signal.throwIfAborted();
-        if (cancelled) {
-          throw signal['reason'] || 'unknown reason';
-        }
+    async query_category_time_by_period(query_options: QueryOptions) {
+      const { periods, query, key } = this.category_history_request(query_options);
 
-        // Only query periods with known data from AFK bucket
-        if (dontQueryInactive && this.active.events.length > 0) {
-          const start = new Date(period.split('/')[0]);
-          const end = new Date(period.split('/')[1]);
+      const request = {};
+      categoryRequests.set(this, request);
+      const signal = getClient().controller.signal;
+      let cache = categoryPeriodCaches.get(this);
+      if (!cache) {
+        cache = new PeriodCache();
+        categoryPeriodCaches.set(this, cache);
+      }
+      if (query_options.force) cache.clear();
 
-          // Retrieve active time in period
-          const period_activity = this.active.events.find((e: IEvent) => {
-            return start < new Date(e.timestamp) && new Date(e.timestamp) < end;
+      const queryKey = JSON.stringify(query);
+      const data = [];
+      // Retain sequential requests to avoid long server queries/timeouts.
+      for (const period of periods) {
+        if (signal.aborted || categoryRequests.get(this) !== request) return;
+        const periodKey = JSON.stringify([queryKey, period]);
+        const periodClosed = new Date(period.split('/')[1]).getTime() <= Date.now();
+        let result = periodClosed ? cache.get(periodKey) : undefined;
+        if (result === undefined) {
+          const revision = cache.version;
+          const response = await getClient().query([period], query, {
+            cache: false, // This bounded cache owns freshness and invalidation.
+            name: 'categoryQuery',
           });
-
-          // Check if there was active time
-          if (!(period_activity && period_activity.duration > 0)) {
-            data = data.concat([{ cat_events: [] }]);
-            continue;
-          }
+          if (signal.aborted || categoryRequests.get(this) !== request) return;
+          result = response[0];
+          if (periodClosed && result !== undefined && revision === cache.version)
+            cache.set(periodKey, result);
         }
-
-        // Prefer ScreenTime bucket over Android watcher for consistency with query_android
-        const iosBucketForCategory = this.buckets.android.find((id: string) =>
-          id.startsWith('aw-import-screentime')
-        );
-        const iosOrAndroidBucket = iosBucketForCategory || this.buckets.android[0];
-        const isAndroid = iosOrAndroidBucket !== undefined;
-        // ScreenTime (iOS) buckets carry a "title" key; aw-watcher-android buckets do not.
-        // Pass isIos so canonicalEvents uses the correct merge keys and titles are preserved.
-        const isIosForCategory = !!iosBucketForCategory;
-        const categories = useCategoryStore().classes_for_query;
-        // TODO: Clean up call, pass QueryParams in fullDesktopQuery as well
-        // TODO: Unify QueryOptions and QueryParams
-        const query = queries.categoryQuery({
-          bid_browsers: this.buckets.browser,
-          bid_stopwatch:
-            include_stopwatch && this.buckets.stopwatch.length > 0
-              ? this.buckets.stopwatch[0]
-              : undefined,
-          categories,
-          filter_categories,
-          filter_afk,
-          always_active_pattern,
-          ...(isAndroid
-            ? {
-                bid_android: iosOrAndroidBucket,
-                isIos: isIosForCategory,
-              }
-            : {
-                bid_afk: this.buckets.afk[0],
-                bid_window: this.buckets.window[0],
-              }),
-        });
-        const result = await getClient().query([period], query, {
-          verbose: true,
-          name: 'categoryQuery',
-        });
-        data = data.concat(result);
+        data.push(result);
       }
 
       // Zip periods
@@ -621,7 +641,7 @@ export const useActivityStore = defineStore('activity', {
       // Filter out values that are undefined (no longer needed, only used when visualization was progressive (looks buggy))
       by_period = _.fromPairs(_.toPairs(by_period).filter(o => o[1]));
 
-      this.query_category_time_by_period_completed({ by_period });
+      this.query_category_time_by_period_completed({ by_period, key });
     },
 
     async query_active_history_android({ timeperiod }: QueryOptions) {
@@ -763,6 +783,7 @@ export const useActivityStore = defineStore('activity', {
 
     // mutations
     start_loading(this: State, query_options: QueryOptions) {
+      categoryRequests.delete(this);
       this.loaded = true;
       this.query_options = query_options;
 
@@ -781,7 +802,13 @@ export const useActivityStore = defineStore('activity', {
       this.editor.top_projects = null;
 
       this.category.top = null;
-      this.category.by_period = null;
+      // When this load refreshes category history, clear it up front like the
+      // rest of the state. When it skips it, ensure_loaded decides after buckets
+      // resolve whether the retained periods still match the current query.
+      if (query_options.include_category_history !== false) {
+        this.category.by_period = null;
+        categoryHistoryKeys.delete(this);
+      }
 
       this.active.duration = null;
 
@@ -841,8 +868,13 @@ export const useActivityStore = defineStore('activity', {
       };
     },
 
-    query_category_time_by_period_completed(this: State, { by_period } = { by_period: [] }) {
+    query_category_time_by_period_completed(
+      this: State,
+      { by_period, key }: { by_period: any; key?: string } = { by_period: [] }
+    ) {
       this.category.by_period = by_period;
+      if (key) categoryHistoryKeys.set(this, key);
+      else categoryHistoryKeys.delete(this);
     },
   },
 });
diff --git a/src/util/awclient.ts b/src/util/awclient.ts
index 666534dfa..7eb6c313b 100644
--- a/src/util/awclient.ts
+++ b/src/util/awclient.ts
@@ -1,4 +1,5 @@
 import { AWClient } from 'aw-client';
+import { invalidatePeriodCaches } from './periodCache';
 import type { AxiosInstance } from 'axios';
 
 import { useSettingsStore } from '~/stores/settings';
@@ -107,6 +108,15 @@ export function createClient(force?: boolean): AWClient {
       testing: !production,
       baseURL,
     });
+    invalidatePeriodCaches();
+    _client.req.interceptors.response.use(response => {
+      const method = (response.config.method || 'get').toLowerCase();
+      const path = (response.config.url || '').split('?')[0];
+      if (!['get', 'head', 'options'].includes(method) && !/\/query\/?$/.test(path)) {
+        invalidatePeriodCaches();
+      }
+      return response;
+    });
     applyApiToken(_client, loadApiTokenFromBrowser());
   } else {
     throw 'Tried to instantiate global AWClient twice!';
diff --git a/src/util/classes.ts b/src/util/classes.ts
index 94c72aca0..a4a29539e 100644
--- a/src/util/classes.ts
+++ b/src/util/classes.ts
@@ -462,43 +462,65 @@ function pickHighestRanked(categories: Category[]) {
   return _.maxBy(categories, categoryRank);
 }
 
+interface CompiledRule {
+  source: string;
+  ignoreCase: boolean;
+  rawKeys: string[] | undefined;
+  keys: string[] | undefined;
+  regex: RegExp;
+}
+
+// Rule objects can be edited in place by the category editor. Compare the
+// compilation inputs rather than relying only on array/object identity.
+const compiledRules = new WeakMap<Rule, CompiledRule>();
+function compileRule(rule: Rule): CompiledRule {
+  const cached = compiledRules.get(rule);
+  const rawKeys = rule.select_keys;
+  if (
+    cached &&
+    cached.source === rule.regex &&
+    cached.ignoreCase === !!rule.ignore_case &&
+    cached.rawKeys?.length === rawKeys?.length &&
+    (rawKeys || []).every((key, i) => key === cached.rawKeys[i])
+  ) {
+    return cached;
+  }
+  const compiled = {
+    source: rule.regex,
+    ignoreCase: !!rule.ignore_case,
+    rawKeys: rawKeys?.slice(),
+    keys: normalizeSelectKeys(rawKeys),
+    regex: new RegExp(rule.regex, (rule.ignore_case ? 'i' : '') + 'm'),
+  };
+  compiledRules.set(rule, compiled);
+  return compiled;
+}
+
 export function matchString(
   str: string,
   categories: Category[] | null,
   event?: IEvent
 ): Category | null {
-  if (!categories) {
-    console.log(
-      'Categories not passed, loading... (if you see this outside of a test, you should probably pass them)'
-    );
-    categories = loadClasses();
-  }
-
-  // Compile regexes
-  const regexes: [Category, RegExp][] = categories
-    .filter(c => c.rule.type == 'regex')
-    .map(c => {
-      // using 'm' flag to make `$` and `^` in rules work
-      const re = RegExp(c.rule.regex, (c.rule.ignore_case ? 'i' : '') + 'm');
-      return [c, re];
-    });
-
-  // Find the matching category.
-  // If several categories match, explicit priority wins; otherwise depth wins.
-  const matchingCats: [Category, RegExp][] = regexes.filter(([category, re]) => {
-    const selectKeys = normalizeSelectKeys(category.rule.select_keys);
-    if (event && selectKeys) {
-      return selectKeys.some(key => {
-        const value = event.data[key];
-        return typeof value === 'string' && re.test(value);
-      });
+  categories = categories || loadClasses();
+  let best: Category | null = null;
+  let bestRank = -Infinity;
+  for (const category of categories) {
+    if (category.rule.type !== 'regex') continue;
+    const { regex, keys } = compileRule(category.rule);
+    const matches =
+      event && keys
+        ? keys.some(key => typeof event.data[key] === 'string' && regex.test(event.data[key]))
+        : regex.test(str);
+    if (matches) {
+      const rank = categoryRank(category);
+      // Strictly greater preserves the original first-match tie breaking.
+      if (rank > bestRank) {
+        best = category;
+        bestRank = rank;
+      }
     }
-    return re.test(str);
-  });
-  if (matchingCats.length > 0) {
-    return pickHighestRanked(matchingCats.map(c => c[0]));
   }
-  return null;
+  return best;
 }
 
 // this is used only in tests
diff --git a/src/util/color.ts b/src/util/color.ts
index 431f0f4ef..7465f120d 100644
--- a/src/util/color.ts
+++ b/src/util/color.ts
@@ -2,7 +2,7 @@ import _ from 'lodash';
 import { Category, matchString, loadClasses } from './classes';
 import Color from 'color';
 import * as d3 from 'd3';
-import { IEvent, IBucket } from './interfaces';
+import { IEvent } from './interfaces';
 
 // See here for examples:
 //   https://bl.ocks.org/pstuffa/3393ff2711a53975040077b7453781a9
@@ -140,7 +140,10 @@ export function getTitleAttr(bucket: { type?: string }, e: IEvent) {
   }
 }
 
-export function getCategorizationStringFromEvent(bucket: IBucket, e: IEvent): string | null {
+export function getCategorizationStringFromEvent(
+  bucket: { type?: string },
+  e: IEvent
+): string | null {
   if (bucket.type == 'currentwindow') {
     // using linebreak and "m" regex flag to make `$` and `^` work
     return e.data.app + '\n' + e.data.title;
@@ -156,7 +159,7 @@ export function getCategorizationStringFromEvent(bucket: IBucket, e: IEvent): st
   return null;
 }
 
-export function getCategoryColorFromEvent(bucket: IBucket, e: IEvent) {
+export function getCategoryColorFromEvent(bucket: { type?: string }, e: IEvent) {
   const categorizationString = getCategorizationStringFromEvent(bucket, e);
   if (categorizationString !== null) {
     const allCats = loadClasses();
diff --git a/src/util/datasets.ts b/src/util/datasets.ts
index d47b1ab71..cedf6835c 100644
--- a/src/util/datasets.ts
+++ b/src/util/datasets.ts
@@ -1,10 +1,7 @@
-import _ from 'lodash';
-
 import { split_by_hour_into_data } from '~/util/transforms';
 import { getColorFromCategory } from '~/util/color';
 import { Category } from '~/util/classes';
 import { IEvent } from './interfaces';
-import { useCategoryStore } from '~/stores/categories';
 
 interface HourlyData {
   cat_events: IEvent[];
@@ -16,45 +13,35 @@ interface Dataset {
   data: number[];
 }
 
-export function buildBarchartDataset(data_by_hour: HourlyData[], classes: Category[]): Dataset[] {
-  const SEP = '>>>';
-  const data = data_by_hour;
-  if (data) {
-    const category_names: Set<string> = new Set(
-      Object.values(data)
-        .map(result => {
-          return result.cat_events.map(e => e.data['$category'].join(SEP));
-        })
-        .flat()
-    );
-    const ds: Dataset[] = [...category_names]
-      .map(c_ => {
-        const categoryStore = useCategoryStore();
-        const c = categoryStore.get_category(c_.split(SEP));
-
-        if (c) {
-          const values = Object.values(data).map(results => {
-            const cat = results.cat_events.find(e => _.isEqual(e.data['$category'], c.name));
-            if (cat) return Math.round((cat.duration / (60 * 60)) * 1000) / 1000;
-            else return null;
-          });
-          return {
-            label: c.name.join(' > '),
-            backgroundColor: getColorFromCategory(c, classes),
-            data: values,
-          } as Dataset;
-        } else {
-          // FIXME: This shouldn't happen
-          // This may for example happen if one doesn't have an 'Uncategorized' category,
-          // as can happen when one upgrades from an old version where there wasn't one in the default classes.
-          console.error('missing category:', c_);
-        }
-      })
-      .filter(x => x);
-    return ds;
-  } else {
-    return [];
+export function buildBarchartDataset(
+  data_by_hour: HourlyData[] | Record<string, HourlyData>,
+  classes: Category[]
+): Dataset[] {
+  if (!data_by_hour) return [];
+  const periods = Object.values(data_by_hour);
+  const categoryPaths = new Map<string, string[]>();
+  const totals = periods.map(period => {
+    const sums = new Map<string, number>();
+    for (const event of period.cat_events) {
+      const path = event.data.$category || [];
+      const key = JSON.stringify(path);
+      if (!categoryPaths.has(key)) categoryPaths.set(key, path);
+      sums.set(key, (sums.get(key) || 0) + event.duration);
+    }
+    return sums;
+  });
+  const categories = new Map<string, Category>();
+  for (const category of classes) {
+    const key = JSON.stringify(category.name);
+    if (!categories.has(key)) categories.set(key, category);
   }
+  return Array.from(categoryPaths, ([key, path]) => ({
+    label: path.length ? path.join(' > ') : 'Uncategorized',
+    backgroundColor: getColorFromCategory(categories.get(key), classes),
+    data: totals.map(sums =>
+      sums.has(key) ? Math.round((sums.get(key) / 3600) * 1000) / 1000 : null
+    ),
+  }));
 }
 
 export function buildBarchartDatasetActive(events_active: IEvent[]) {
diff --git a/src/util/graphData.ts b/src/util/graphData.ts
new file mode 100644
index 000000000..274cc1c3b
--- /dev/null
+++ b/src/util/graphData.ts
@@ -0,0 +1,38 @@
+import { IEvent } from './interfaces';
+
+export function buildGraphData(
+  events: IEvent[],
+  maxDepth: number,
+  colorForCategory: (path: string[]) => string
+) {
+  const categories = new Map<string, { path: string[]; duration: number }>();
+  const transitions = new Map<string, { source: string; target: string; value: number }>();
+  let previous: string | undefined;
+  for (const event of events) {
+    const path = event.data.$category.slice(0, maxDepth);
+    const id = JSON.stringify(path);
+    const category = categories.get(id);
+    if (category) category.duration += event.duration;
+    else categories.set(id, { path, duration: event.duration });
+
+    if (previous !== undefined && previous !== id) {
+      const key = JSON.stringify([previous, id]);
+      const link = transitions.get(key);
+      if (link) link.value++;
+      else transitions.set(key, { source: previous, target: id, value: 1 });
+    }
+    previous = id;
+  }
+  const groups = new Map<string, number>([['Uncategorized', 0]]);
+  const nodes = Array.from(categories, ([id, category]) => {
+    const root = category.path[0] || '';
+    if (!groups.has(root)) groups.set(root, groups.size);
+    return {
+      id,
+      group: groups.get(root),
+      color: colorForCategory(category.path),
+      value: category.duration,
+    };
+  });
+  return { nodes, links: Array.from(transitions.values()) };
+}
diff --git a/src/util/interfaces.ts b/src/util/interfaces.ts
index bde00fd3b..65febc742 100644
--- a/src/util/interfaces.ts
+++ b/src/util/interfaces.ts
@@ -6,6 +6,7 @@ export interface IEvent {
 
 export interface IBucket {
   id: string;
+  client?: string;
   hostname: string;
   device_id: string;
   type: string;
diff --git a/src/util/periodCache.ts b/src/util/periodCache.ts
new file mode 100644
index 000000000..275998a90
--- /dev/null
+++ b/src/util/periodCache.ts
@@ -0,0 +1,38 @@
+// Shared invalidation for writes made through this UI. A short expiry also
+// bounds staleness from external importers/watchers that cannot notify us.
+let revision = 0;
+export function invalidatePeriodCaches(): void {
+  revision++;
+}
+
+export class PeriodCache<T> {
+  private entries = new Map<string, { value: T; expires: number }>();
+  private revision = revision;
+  constructor(private limit = 256, private ttl = 60_000) {}
+
+  get version(): number {
+    return revision;
+  }
+
+  clear(): void {
+    this.entries.clear();
+    this.revision = revision;
+  }
+
+  get(key: string, now = Date.now()): T | undefined {
+    if (this.revision !== revision) this.clear();
+    const entry = this.entries.get(key);
+    if (!entry || entry.expires <= now) {
+      this.entries.delete(key);
+      return undefined;
+    }
+    return entry.value;
+  }
+
+  set(key: string, value: T, now = Date.now()): void {
+    if (this.revision !== revision) this.clear();
+    this.entries.delete(key);
+    this.entries.set(key, { value, expires: now + this.ttl });
+    while (this.entries.size > this.limit) this.entries.delete(this.entries.keys().next().value);
+  }
+}
diff --git a/src/util/timelineIndex.ts b/src/util/timelineIndex.ts
new file mode 100644
index 000000000..5797f3415
--- /dev/null
+++ b/src/util/timelineIndex.ts
@@ -0,0 +1,64 @@
+import { IEvent } from './interfaces';
+
+export interface IndexedEvent {
+  id: string;
+  bucket: { id: string; type?: string };
+  event: IEvent & { id?: number };
+  start: number;
+  end: number;
+}
+
+export function indexTimelineEvents(buckets, filterShort = true) {
+  const entries: IndexedEvent[] = [];
+  for (const bucket of buckets) {
+    (bucket.events || []).forEach((event, index) => {
+      if (filterShort && event.duration <= 1) return;
+      const start = new Date(event.timestamp).getTime();
+      const end = start + event.duration * 1000;
+      if (!Number.isFinite(start) || !Number.isFinite(end)) return;
+      entries.push({
+        id: JSON.stringify([bucket.id, event.id ?? [event.timestamp, index]]),
+        bucket,
+        event,
+        start,
+        end,
+      });
+    });
+  }
+  entries.sort((a, b) => a.start - b.start);
+  let maxEnd = -Infinity;
+  const ends = entries.map(e => (maxEnd = Math.max(maxEnd, e.end)));
+  return { entries, ends, groups: new Set(entries.map(item => item.bucket.id)) };
+}
+
+// Prefix maximum ends keep events that begin before the viewport but overlap it.
+export function visibleTimelineEvents(
+  index: ReturnType<typeof indexTimelineEvents>,
+  start: number,
+  end: number
+): IndexedEvent[] {
+  let low = 0;
+  let high = index.ends.length;
+  while (low < high) {
+    const mid = (low + high) >>> 1;
+    if (index.ends[mid] < start) low = mid + 1;
+    else high = mid;
+  }
+  const result: IndexedEvent[] = [];
+  for (let i = low; i < index.entries.length && index.entries[i].start <= end; i++) {
+    if (index.entries[i].end >= start) result.push(index.entries[i]);
+  }
+  return result;
+}
+
+// DataSet updates notify vis-timeline. Avoid notifications for unchanged items.
+export function syncTimelineData(dataset, next: Record<string, any>[]): void {
+  const ids = new Set(next.map(item => item.id));
+  const removed = dataset.getIds().filter(id => !ids.has(id));
+  if (removed.length) dataset.remove(removed);
+  const changed = next.filter(item => {
+    const previous = dataset.get(item.id);
+    return !previous || Object.keys(item).some(key => item[key] !== previous[key]);
+  });
+  if (changed.length) dataset.update(changed);
+}
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index b57723ce7..9d5ccd4a0 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -61,6 +61,7 @@ div
 <script lang="ts">
 import _ from 'lodash';
 import moment from 'moment';
+import { buildGraphData } from '~/util/graphData';
 
 import 'vue-awesome/icons/search';
 import 'vue-awesome/icons/spinner';
@@ -140,71 +141,9 @@ export default {
       return this.events;
     },
     generateGraphData: function (events) {
-      // generate graph data from events
-      // iterate through events, and count the number of category transitions
-      // for each category, add a node to the graphdata with the group of its parent category
-      // for each transition-pair, add a link to the graphdata with the number of transitions as weight
-      const SEP = '>';
-
-      // copy all events, slice off category depth deeper than maxDepth
-      events = events.map(e => {
-        const $category = e.data.$category.slice(0, this.maxDepth);
-        return { ...e, data: { ...e.data, $category } };
-      });
-
-      const allCategories: Set<string> = new Set(
-        events.map(e => e.data.$category).map(c => c.join(SEP))
+      return buildGraphData(events, this.maxDepth, path =>
+        this.categoryStore.get_category_color(path)
       );
-      const groups = { Uncategorized: 0 };
-
-      // Generate groups
-      for (const category of allCategories) {
-        const rootcat = category.split(SEP)[0];
-        if (!Object.prototype.hasOwnProperty.call(groups, rootcat)) {
-          groups[rootcat] = Object.keys(groups).length;
-        }
-      }
-
-      // Generate nodes
-      const nodes = [];
-      for (const category of allCategories) {
-        const rootcat = category.split(SEP)[0];
-        // Size nodes depending on time spent
-        const catTime = events
-          .filter(e => e.data.$category.join(SEP) == category)
-          .map(e => moment(e.timestamp).add(e.duration).diff(e.timestamp))
-          .reduce((a, b) => a + b, 0);
-        nodes.push({
-          id: category,
-          group: groups[rootcat],
-          color: this.categoryStore.get_category_color(category.split(SEP)),
-          value: catTime,
-        });
-      }
-
-      // Generate links
-      const links = [];
-      for (let i = 0; i < events.length - 1; i++) {
-        const e1 = events[i];
-        const e2 = events[i + 1];
-        const e1cat = e1.data.$category;
-        const e2cat = e2.data.$category;
-        if (_.isEqual(e1cat, e2cat)) continue;
-
-        const link = links.find(l => l.source == e1cat.join(SEP) && l.target == e2cat.join(SEP));
-        if (link) {
-          link.value++;
-        } else {
-          links.push({
-            source: e1cat.join(SEP),
-            target: e2cat.join(SEP),
-            value: 1,
-          });
-        }
-      }
-
-      console.log('generated nodes & links');
-      return { nodes, links };
     },
     extendByWeek() {
       this.queryOptions.start = moment(this.queryOptions.start)
diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index 06cb4a842..ed1e83796 100644
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@@ -79,7 +79,7 @@ div
       title="Display options"
       aria-label="Display options"
     )
-      template(v-slot:button-content)
+      template(v-slot:button-content="")
         icon(name="ellipsis-v")
       b-dropdown-header Swimlanes
       b-dropdown-item-button(
@@ -220,11 +220,21 @@ export default {
       this.updateTimelineWindow = false;
       this.getBuckets();
     },
-    swimlane() {
-      this.updateTimelineWindow = false;
+    always_active_pattern() {
       this.getBuckets();
     },
   },
+  created() {
+    // Keep request promises outside Vue's reactive event graph. Retain only the
+    // current range; revisiting a range refreshes edits and newly imported data.
+    this.eventRequests = new Map();
+    this.requestRange = '';
+    this.requestGeneration = 0;
+  },
+  beforeDestroy() {
+    this.requestGeneration++;
+    this.eventRequests.clear();
+  },
   methods: {
     onCategorySelect(event) {
       const text = event.target.value;
@@ -241,28 +251,56 @@ export default {
     getBuckets: async function () {
       if (this.daterange == null) return;
 
-      this.all_buckets = Object.freeze(
-        await useBucketsStore().getBucketsWithEvents({
-          start: this.daterange[0].format(),
-          end: this.daterange[1].format(),
+      const generation = ++this.requestGeneration;
+      const start = this.daterange[0].format();
+      const end = this.daterange[1].format();
+      const range = `${start}/${end}`;
+      if (range !== this.requestRange) {
+        this.eventRequests.clear();
+        this.requestRange = range;
+      }
+      const store = useBucketsStore();
+      await store.ensureLoaded();
+      if (generation !== this.requestGeneration) return;
+      this.hosts = [...new Set(store.buckets.map(b => b.hostname))];
+      this.clients = [...new Set(store.buckets.map(b => b.client))];
+      const selected = store.buckets.filter(
+        b =>
+          (!this.filter_hostname || b.hostname === this.filter_hostname) &&
+          (!this.filter_client || b.client === this.filter_client)
+      );
+      const filterAfk = this.filter_afk;
+      const pattern = this.always_active_pattern;
+      const raw = await Promise.all(
+        selected.map(bucket => {
+          const afkId =
+            filterAfk && bucket.type === 'currentwindow' && bucket.hostname
+              ? store.bucketsAFK(bucket.hostname)[0]
+              : null;
+          if (filterAfk && bucket.type === 'afkstatus') return null;
+          const key = JSON.stringify([range, bucket.id, afkId, afkId ? pattern : null]);
+          if (!this.eventRequests.has(key)) {
+            const request = afkId
+              ? this._queryAfkFilteredEvents(bucket.id, afkId, start, end, pattern).then(
+                  events => ({ ...bucket, events })
+                )
+              : store.getBucketWithEvents({ id: bucket.id, start, end });
+            this.eventRequests.set(key, request);
+            request.catch(() => {
+              if (this.eventRequests.get(key) === request) this.eventRequests.delete(key);
+            });
+          }
+          return this.eventRequests.get(key).catch(error => {
+            if (!afkId) throw error;
+            console.warn('AFK filter query failed, falling back to raw events:', error);
+            return store.getBucketWithEvents({ id: bucket.id, start, end });
+          });
         })
       );
-
-      this.hosts = this.all_buckets
-        .map(a => a.hostname)
-        .filter((value, index, array) => array.indexOf(value) === index);
-      this.clients = this.all_buckets
-        .map(a => a.client)
-        .filter((value, index, array) => array.indexOf(value) === index);
-
-      let buckets = this.all_buckets;
-      if (this.filter_hostname) {
-        buckets = _.filter(buckets, b => b.hostname == this.filter_hostname);
-      }
-      if (this.filter_client) {
-        buckets = _.filter(buckets, b => b.client == this.filter_client);
-      }
-
+      if (generation !== this.requestGeneration) return;
+      this.all_buckets = Object.freeze(raw.filter(Boolean));
+      // Filters replace arrays on copies, so clearing a filter restores raw events.
+      let buckets = this.all_buckets.map(bucket => ({ ...bucket }));
       if (this.filter_duration > 0) {
         for (const bucket of buckets) {
           bucket.events = _.filter(bucket.events, e => e.duration >= this.filter_duration);
@@ -289,11 +327,6 @@ export default {
         }
       }
 
-      // AFK filtering: use query engine to filter window events by AFK status
-      if (this.filter_afk) {
-        buckets = await this._applyAfkFilter(buckets);
-      }
-
       // Merge adjacent events by app name for window buckets.
       // Runs after AFK filtering so merges operate on already-filtered events.
       // Reduces visual clutter from apps that produce many small events (e.g.
@@ -343,57 +376,21 @@ export default {
       });
     },
 
-    // Replaces raw window bucket events with AFK-filtered events via aw query engine.
-    // Also hides AFK status buckets since they're used for filtering, not display.
-    _applyAfkFilter: async function (buckets) {
-      const bucketsStore = useBucketsStore();
-      const result = [];
-
-      for (const bucket of buckets) {
-        // Hide AFK status buckets when AFK filtering is active
-        if (bucket.type === 'afkstatus') {
-          continue;
-        }
-
-        // For window buckets, replace events with AFK-filtered query results
-        if (bucket.type === 'currentwindow' && bucket.hostname) {
-          const afkBucketIds = bucketsStore.bucketsAFK(bucket.hostname);
-          if (afkBucketIds.length > 0) {
-            try {
-              const filteredEvents = await this._queryAfkFilteredEvents(bucket.id, afkBucketIds[0]);
-              // Create a copy with filtered events to avoid mutating frozen all_buckets
-              result.push({ ...bucket, events: filteredEvents });
-              continue;
-            } catch (e) {
-              console.warn('AFK filter query failed, falling back to raw events:', e);
-            }
-          }
-        }
-
-        // Keep other buckets unchanged
-        result.push(bucket);
-      }
-
-      return result;
-    },
-
     // Runs a canonicalEvents query to get window events filtered by AFK status,
     // respecting the user's always_active_pattern setting.
-    _queryAfkFilteredEvents: async function (windowBucketId, afkBucketId) {
+    _queryAfkFilteredEvents: async function (windowBucketId, afkBucketId, start, end, pattern) {
       const queryCode =
         canonicalEvents({
           bid_window: windowBucketId,
           bid_afk: afkBucketId,
           filter_afk: true,
-          always_active_pattern: this.always_active_pattern || undefined,
+          always_active_pattern: pattern || undefined,
           categories: [],
           filter_categories: null,
         }) + '\nRETURN = events;';
 
       const queryArray = querystr_to_array(queryCode);
 
-      const start = this.daterange[0].format();
-      const end = this.daterange[1].format();
       const timeperiods = [`${start}/${end}`];
 
       const data = await getClient().query(timeperiods, queryArray);
diff --git a/src/views/activity/Activity.vue b/src/views/activity/Activity.vue
index 557b8a23f..85d1477cd 100644
--- a/src/views/activity/Activity.vue
+++ b/src/views/activity/Activity.vue
@@ -270,6 +270,8 @@ export default {
       // stopwatch run produced "No data" unless they also flipped the
       // dev-only "Include manually logged events" checkbox.
       include_stopwatch: true,
+      refreshing: false,
+      refreshGeneration: 0,
       filter_afk: true,
       new_view: {},
     };
@@ -349,6 +351,9 @@ export default {
     currentView: function () {
       return this.views.find(v => v.id == this.$route.params.view_id) || this.views[0];
     },
+    needsCategoryHistory() {
+      return !!this.currentView?.elements.some(el => el.type === 'timeline_barchart');
+    },
     currentViewId: function () {
       // If localStore is not yet initialized, then currentView can be undefined. In that case, we return an empty string (which should route to the default view)
       return this.currentView !== undefined ? this.currentView.id : '';
@@ -423,6 +428,16 @@ export default {
     },
   },
   watch: {
+    async needsCategoryHistory(needed) {
+      if (
+        needed &&
+        !this.refreshing &&
+        this.activityStore.query_options?.timeperiod &&
+        (this.activityStore.window.available || this.activityStore.android.available)
+      ) {
+        await this.activityStore.query_category_time_by_period(this.activityStore.query_options);
+      }
+    },
     host: function () {
       this.refresh();
     },
@@ -535,10 +550,26 @@ export default {
         filter_afk: this.filter_afk,
         include_audible: this.include_audible,
         include_stopwatch: this.include_stopwatch,
+        include_category_history: this.needsCategoryHistory,
         filter_categories: this.filter_categories,
         always_active_pattern: this.always_active_pattern,
       };
-      await this.activityStore.ensure_loaded(queryOptions);
+      const generation = ++this.refreshGeneration;
+      this.refreshing = true;
+      try {
+        await this.activityStore.ensure_loaded(queryOptions);
+        // A view may finish loading or change while the main queries run.
+        if (
+          generation === this.refreshGeneration &&
+          this.needsCategoryHistory &&
+          !queryOptions.include_category_history &&
+          (this.activityStore.window.available || this.activityStore.android.available)
+        ) {
+          await this.activityStore.query_category_time_by_period(queryOptions);
+        }
+      } finally {
+        if (generation === this.refreshGeneration) this.refreshing = false;
+      }
     },
 
     load_demo: async function () {
diff --git a/src/visualizations/ForceGraph.vue b/src/visualizations/ForceGraph.vue
index 28ab7d0ce..b19a31cd6 100644
--- a/src/visualizations/ForceGraph.vue
+++ b/src/visualizations/ForceGraph.vue
@@ -31,6 +31,10 @@ export default {
   mounted() {
     this.drawGraph(this.data);
   },
+  beforeDestroy() {
+    this.cancelPromise && this.cancelPromise();
+    this.cancelPromise = null;
+  },
   methods: {
     drawGraph({ nodes, links }) {
       console.log('rendering...');
diff --git a/src/visualizations/VisTimeline.vue b/src/visualizations/VisTimeline.vue
index 90501f76d..b28bb01cb 100644
--- a/src/visualizations/VisTimeline.vue
+++ b/src/visualizations/VisTimeline.vue
@@ -53,12 +53,17 @@ div#visualization {
 
 <script lang="ts">
 import _ from 'lodash';
-import moment from 'moment';
+import { markRaw } from 'vue';
 import Color from 'color';
 import { buildTooltip } from '../util/tooltip.js';
 import { getCategoryColorFromEvent, getTitleAttr } from '../util/color';
 import { getSwimlane } from '../util/swimlane.js';
-import { IEvent } from '../util/interfaces';
+import {
+  indexTimelineEvents,
+  visibleTimelineEvents,
+  syncTimelineData,
+} from '../util/timelineIndex';
+import { DataSet } from 'vis-data';
 import { formatTimelineBucketLabelHtml, shortenBucketLabel } from '../util/timelineLabels';
 
 import { Timeline } from 'vis-timeline/esnext';
@@ -69,16 +74,6 @@ let isAlertWarningShown = false;
 const PIXELS_PER_WHEEL_LINE = 40;
 const PIXELS_PER_WHEEL_PAGE = 800;
 
-interface IChartDataItem {
-  bucketId: string;
-  title: string;
-  tooltip: string;
-  start: Date;
-  end: Date;
-  color: string;
-  event: IEvent;
-  swimlane: string;
-}
 export default {
   components: {
     EventEditor,
@@ -124,7 +119,10 @@ export default {
   computed: {
     bucketsFromEither() {
       if (this.buckets) {
-        return this.buckets;
+        return this.buckets.map((bucket, i) => ({
+          ...bucket,
+          id: bucket.id ?? (this.buckets.length === 1 ? 'events' : `bucket-${i}`),
+        }));
       } else if (this.events) {
         // If buckets not passed, check if events have been passed and generate a bucket from those events
         return [
@@ -139,37 +137,14 @@ export default {
         return [];
       }
     },
-    chartData(): IChartDataItem[] {
-      const data: IChartDataItem[] = [];
-      _.each(this.bucketsFromEither, bucket => {
-        if (bucket.events === undefined) {
-          return;
-        }
-        let events = bucket.events;
-        // Filter out events shorter than 1 second (notably including 0-duration events)
-        // TODO: Use flooding instead, preferably with some additional method of removing/simplifying short events for even greater performance
-        if (this.filterShortEvents) {
-          events = _.filter(events, e => e.duration > 1);
-          console.log(`Filtered ${bucket.events.length - events.length} events`);
-        }
-        events.sort((a, b) => a.timestamp.valueOf() - b.timestamp.valueOf());
-        _.each(events, e => {
-          data.push({
-            bucketId: bucket.id,
-            title: getTitleAttr(bucket, e),
-            tooltip: buildTooltip(bucket, e),
-            start: new Date(e.timestamp),
-            end: new Date(moment(e.timestamp).add(e.duration, 'seconds').valueOf()),
-            color: getCategoryColorFromEvent(bucket, e),
-            event: e,
-            swimlane: getSwimlane(bucket, e.color, this.swimlane, e),
-          });
-        });
-      });
-      return data;
+    eventIndex() {
+      return indexTimelineEvents(this.bucketsFromEither, this.filterShortEvents);
     },
   },
   watch: {
+    swimlane() {
+      this.update();
+    },
     buckets() {
       // For some reason, an object is passed here, after which the correct array arrives
       if (this.buckets.length === undefined) {
@@ -187,14 +162,25 @@ export default {
       this.update();
     },
   },
+  created() {
+    this.itemData = new DataSet();
+    this.groupData = new DataSet();
+    this.itemEvents = new Map();
+    this.preparedItems = new Map();
+    this.hasInitialRange = false;
+    this.viewportFrame = null;
+  },
   mounted() {
     this.$nextTick(() => {
+      if (this._isDestroyed || this._isBeingDestroyed) return;
       const el = this.$el.querySelector('#visualization');
       el.addEventListener('wheel', this.onHorizontalWheel, {
         capture: true,
         passive: false,
       });
-      this.timeline = new Timeline(el, [], [], this.options);
+      this.options.tooltip.template = item => item.title || this.tooltipForItem(item.id);
+      this.timeline = markRaw(new Timeline(el, this.itemData, this.groupData, this.options));
+      this.timeline.on('rangechange', this.scheduleViewportUpdate);
       this.timeline.on('select', properties => {
         // Sends both 'press' and 'tap' events, only one should trigger
         if (properties.event.type == 'tap') {
@@ -206,12 +192,40 @@ export default {
     });
   },
   beforeDestroy() {
+    if (this.viewportFrame != null) cancelAnimationFrame(this.viewportFrame);
+    this.itemEvents?.clear();
+    this.preparedItems?.clear();
     const el = this.$el.querySelector('#visualization');
     if (el) {
       el.removeEventListener('wheel', this.onHorizontalWheel, { capture: true });
     }
+    if (this.timeline) {
+      this.timeline.destroy();
+      this.timeline = null;
+    }
   },
   methods: {
+    scheduleViewportUpdate() {
+      if (this.viewportFrame != null) return;
+      this.viewportFrame = requestAnimationFrame(() => {
+        this.viewportFrame = null;
+        if (this.timeline) this.update(false);
+      });
+    },
+    tooltipForItem(id) {
+      if (id === 'queried-interval' && this.queriedInterval) {
+        return buildTooltip(
+          { type: 'test' },
+          {
+            timestamp: this.queriedInterval[0],
+            duration: this.queriedInterval[1].diff(this.queriedInterval[0], 'seconds'),
+            data: { title: 'query' },
+          }
+        );
+      }
+      const item = this.itemEvents.get(id);
+      return item ? buildTooltip({ ...item.bucket, type: item.bucket.type || '' }, item.event) : '';
+    },
     onHorizontalWheel: function (event: WheelEvent) {
       if (!this.timeline || Math.abs(event.deltaX) <= Math.abs(event.deltaY)) {
         return;
@@ -241,10 +255,10 @@ export default {
       if (properties.items.length == 0) {
         return;
       } else if (properties.items.length == 1) {
-        const event = this.chartData[properties.items[0]].event;
-        const groupId = this.items[properties.items[0]].group;
-        // Use group.id (not group.content) — content is '' when showRowLabels=false
-        const bucketId = _.find(this.groups, g => g.id == groupId).id;
+        const selected = this.itemEvents.get(properties.items[0]);
+        if (!selected) return;
+        const event = selected.event;
+        const bucketId = selected.bucket.id;
 
         // Skip editing if event has no ID (e.g. merged query results) or bucket is a placeholder
         if (!event.id || !bucketId || bucketId === 'events' || bucketId === 'search') {
@@ -311,14 +325,23 @@ export default {
         this.update();
       }
     },
-    update() {
+    update(resetWindow = true) {
       // Guard against the buckets/events watch firing before mounted's
       // $nextTick has constructed the vis Timeline. Otherwise revisiting
       // the route with the keep-alive cache cleared throws
       // "can't access property setData, this.timeline is null".
       if (!this.timeline) return;
 
-      // Used by unsureUpdate to check if ran
+      const index = this.eventIndex;
+      if (resetWindow && (this.updateTimelineWindow || !this.hasInitialRange)) {
+        const start = this.queriedInterval?.[0]?.valueOf() ?? index.entries[0]?.start;
+        const end = this.queriedInterval?.[1]?.valueOf() ?? index.ends[index.ends.length - 1];
+        if (start !== undefined && end !== undefined) {
+          this.hasInitialRange = true;
+          this.timeline.setOptions({ min: start, max: end });
+          this.timeline.setWindow(start, end, { animation: false });
+        }
+      }
       this.updateHasRun = true;
 
       // Build groups
@@ -369,82 +392,47 @@ export default {
         return { id: bucket.id, content: label };
       });
 
-      // Build items
-      const items = _.map(this.chartData, (item, i) => {
-        const bgColor = item.color;
-        const borderColor = Color(bgColor).darken(0.3);
+      const timelineWindow = this.timeline.getWindow();
+      const start = timelineWindow.start.valueOf();
+      const end = timelineWindow.end.valueOf();
+      const buffer = (end - start) / 2;
+      const visible = visibleTimelineEvents(index, start - buffer, end + buffer);
+      this.itemEvents = new Map(visible.map(item => [item.id, item]));
+      const colors = new Map();
+      const items = visible.map(item => {
+        if (!resetWindow && this.preparedItems.has(item.id)) return this.preparedItems.get(item.id);
+        const color = getCategoryColorFromEvent(item.bucket, item.event);
+        if (!colors.has(color)) colors.set(color, Color(color).darken(0.3).toString());
         return {
-          id: String(i),
-          group: item.bucketId,
-          content: item.title,
-          title: item.tooltip,
-          start: moment(item.start),
-          end: moment(item.end),
-          style: `background-color: ${bgColor}; border-color: ${borderColor}`,
-          subgroup: item.swimlane,
+          id: item.id,
+          group: item.bucket.id,
+          content: getTitleAttr(item.bucket, item.event),
+          start: item.start,
+          end: item.end,
+          style: `background-color: ${color}; border-color: ${colors.get(color)}`,
+          subgroup: getSwimlane(item.bucket, color, this.swimlane, item.event),
         };
       });
 
-      if (groups.length > 0 && items.length > 0) {
-        if (this.queriedInterval && this.showQueriedInterval) {
-          const duration = this.queriedInterval[1].diff(this.queriedInterval[0], 'seconds');
-          groups.push({ id: String(groups.length), content: 'queried interval' });
-          items.push({
-            id: String(items.length + 1),
-            group: groups.length - 1,
-            title: buildTooltip(
-              { type: 'test' },
-              {
-                timestamp: this.queriedInterval[0],
-                duration: duration,
-                data: { title: 'test' },
-              }
-            ),
-            content: 'query',
-            start: this.queriedInterval[0],
-            end: this.queriedInterval[1],
-            style: 'background-color: #aaa; height: 10px',
-            subgroup: ``,
-          });
-        }
-
-        if (this.updateTimelineWindow) {
-          const start =
-            (this.queriedInterval && this.queriedInterval[0]) ||
-            _.min(_.map(items, item => item.start));
-          const end =
-            (this.queriedInterval && this.queriedInterval[1]) ||
-            _.max(_.map(items, item => item.end));
-          this.options.min = start;
-          this.options.max = end;
-          this.timeline.setOptions(this.options);
-          this.timeline.setWindow(start, end);
-        }
-
-        // Hide buckets with no events in the queried range
-        const count = _.countBy(items, i => i.group);
-        groups = _.filter(groups, g => {
-          return count[g.id] && count[g.id] > 0;
+      // Keep group rows stable while panning through gaps in a bucket's data.
+      this.preparedItems = new Map(items.map(item => [item.id, item]));
+      groups = groups.filter(group => index.groups.has(group.id));
+      if (this.queriedInterval && this.showQueriedInterval) {
+        groups.push({ id: 'queried-interval', content: 'queried interval' });
+        items.push({
+          id: 'queried-interval',
+          group: 'queried-interval',
+          content: 'query',
+          start: this.queriedInterval[0].valueOf(),
+          end: this.queriedInterval[1].valueOf(),
+          style: 'background-color: #aaa; height: 10px',
+          subgroup: '',
         });
-        this.timeline.setData({ groups: groups, items: items });
-
-        this.items = items;
-        this.groups = groups;
-      } else {
-        // update the timeline range (only if a queried interval is provided;
-        // some callers like the Bucket detail view don't pass one)
-        if (this.queriedInterval) {
-          this.options.min = this.queriedInterval[0];
-          this.options.max = this.queriedInterval[1];
-          this.timeline.setOptions(this.options);
-          this.timeline.setWindow(this.queriedInterval[0], this.queriedInterval[1]);
-        }
-
-        // clear the data
-        this.timeline.setData({ groups: [], items: [] });
-        this.items = [];
-        this.groups = [];
       }
+      syncTimelineData(this.groupData, groups);
+      syncTimelineData(this.itemData, items);
+      this.items = items;
+      this.groups = groups;
     },
   },
 };
diff --git a/test/unit/Timeline.test.js b/test/unit/Timeline.test.js
new file mode 100644
index 000000000..c44376a98
--- /dev/null
+++ b/test/unit/Timeline.test.js
@@ -0,0 +1,84 @@
+import Timeline from '~/views/Timeline.vue';
+import { useBucketsStore } from '~/stores/buckets';
+
+jest.mock('~/stores/buckets', () => ({ useBucketsStore: jest.fn() }));
+
+const event = duration => ({ timestamp: '2026-01-01T10:00:00Z', duration, data: { app: 'A' } });
+function setup() {
+  const store = {
+    buckets: [
+      { id: 'a', hostname: 'one' },
+      { id: 'b', hostname: 'two' },
+    ],
+    ensureLoaded: jest.fn().mockResolvedValue(),
+    getBucketWithEvents: jest.fn(({ id }) =>
+      Promise.resolve({ id, events: [event(5), event(20)] })
+    ),
+    bucketsAFK: jest.fn(() => ['afk']),
+  };
+  useBucketsStore.mockReturnValue(store);
+  const vm = { ...Timeline.data(), ...Timeline.methods };
+  vm.daterange = [{ format: () => '2026-01-01' }, { format: () => '2026-01-02' }];
+  Timeline.created.call(vm);
+  return { vm, store };
+}
+
+test('local filters reuse raw events and clearing them restores all events', async () => {
+  const { vm, store } = setup();
+  await vm.getBuckets();
+  vm.filter_duration = 10;
+  await vm.getBuckets();
+  expect(vm.buckets[0].events).toHaveLength(1);
+  vm.filter_duration = null;
+  await vm.getBuckets();
+  expect(vm.buckets[0].events).toHaveLength(2);
+  expect(store.getBucketWithEvents).toHaveBeenCalledTimes(2);
+});
+
+test('fetches selected hosts only and refreshes when range changes', async () => {
+  const { vm, store } = setup();
+  vm.filter_hostname = 'one';
+  await vm.getBuckets();
+  expect(store.getBucketWithEvents).toHaveBeenCalledTimes(1);
+  expect(store.getBucketWithEvents.mock.calls[0][0].id).toBe('a');
+  vm.daterange[1] = { format: () => '2026-01-03' };
+  await vm.getBuckets();
+  expect(store.getBucketWithEvents).toHaveBeenCalledTimes(2);
+});
+
+test('deduplicates in-flight requests and ignores an older range response', async () => {
+  const { vm, store } = setup();
+  vm.filter_hostname = 'one';
+  let resolveOld;
+  store.getBucketWithEvents.mockImplementationOnce(
+    () =>
+      new Promise(resolve => {
+        resolveOld = resolve;
+      })
+  );
+  const old = vm.getBuckets();
+  await Promise.resolve();
+  const duplicate = vm.getBuckets();
+  await Promise.resolve();
+  expect(store.getBucketWithEvents).toHaveBeenCalledTimes(1);
+  vm.daterange[1] = { format: () => '2026-01-03' };
+  await vm.getBuckets();
+  resolveOld({ id: 'old', events: [] });
+  await Promise.all([old, duplicate]);
+  expect(vm.buckets[0].id).toBe('a');
+});
+
+test('applies duration filtering after AFK results and reuses the query', async () => {
+  const { vm, store } = setup();
+  store.buckets = [{ id: 'a', hostname: 'one', type: 'currentwindow' }];
+  vm.filter_afk = true;
+  vm._queryAfkFilteredEvents = jest.fn().mockResolvedValue([event(5), event(20)]);
+  vm.filter_duration = 10;
+  await vm.getBuckets();
+  expect(vm.buckets[0].events).toHaveLength(1);
+  vm.filter_duration = null;
+  await vm.getBuckets();
+  expect(vm.buckets[0].events).toHaveLength(2);
+  expect(vm._queryAfkFilteredEvents).toHaveBeenCalledTimes(1);
+  expect(store.getBucketWithEvents).not.toHaveBeenCalled();
+});
diff --git a/test/unit/VisTimeline.test.js b/test/unit/VisTimeline.test.js
index 924ad3e1c..5e12334e4 100644
--- a/test/unit/VisTimeline.test.js
+++ b/test/unit/VisTimeline.test.js
@@ -150,3 +150,77 @@ describe('VisTimeline zoom-anchor regression (#847)', () => {
     });
   });
 });
+
+describe('timeline teardown', () => {
+  test('destroys the library instance and releases the wheel listener', () => {
+    const el = { removeEventListener: jest.fn() };
+    const destroy = jest.fn();
+    const vm = {
+      $el: { querySelector: () => el },
+      timeline: { destroy },
+      onHorizontalWheel: jest.fn(),
+    };
+    VisTimeline.beforeDestroy.call(vm);
+    expect(destroy).toHaveBeenCalledTimes(1);
+    expect(vm.timeline).toBeNull();
+    expect(el.removeEventListener).toHaveBeenCalledWith('wheel', vm.onHorizontalWheel, {
+      capture: true,
+    });
+    VisTimeline.beforeDestroy.call(vm);
+    expect(destroy).toHaveBeenCalledTimes(1);
+  });
+
+  test('does not create an instance after destruction while nextTick is pending', () => {
+    let mount;
+    const vm = {
+      $nextTick: callback => {
+        mount = callback;
+      },
+      _isDestroyed: false,
+    };
+    VisTimeline.mounted.call(vm);
+    vm._isDestroyed = true;
+    expect(() => mount()).not.toThrow();
+  });
+});
+
+// Exercise the viewport/DataSet integration without constructing browser layout.
+test('panning preserves item IDs and editing uses the original bucket and event', async () => {
+  const vm = { ...VisTimeline.data(), ...VisTimeline.methods };
+  VisTimeline.created.call(vm);
+  const event = {
+    id: 42,
+    timestamp: '2020-01-01T00:00:00Z',
+    duration: 20,
+    data: { status: 'not-afk' },
+  };
+  vm.bucketsFromEither = [{ id: 'afk-host', type: 'afkstatus', events: [event] }];
+  vm.eventIndex = VisTimeline.computed.eventIndex.call(vm);
+  const start = new Date(event.timestamp).getTime();
+  vm.timeline = {
+    getWindow: () => ({ start: new Date(start), end: new Date(start + 10000) }),
+    setOptions: jest.fn(),
+    setWindow: jest.fn(),
+  };
+  vm.update();
+  const ids = vm.itemData.getIds();
+  expect(ids).toHaveLength(1);
+  const update = jest.spyOn(vm.itemData, 'update');
+  vm.update(false);
+  expect(update).not.toHaveBeenCalled();
+  expect(vm.itemData.get(ids[0]).title).toBeUndefined();
+  expect(vm.tooltipForItem(ids[0])).toContain('Duration');
+  vm.$aw = { getEvent: jest.fn().mockResolvedValue(event) };
+  vm.$nextTick = jest.fn();
+  vm.editRefreshHintDismissed = () => true;
+  await vm.onSelect({ items: ids });
+  expect(vm.$aw.getEvent).toHaveBeenCalledWith('afk-host', 42);
+  vm.timeline.getWindow = () => ({
+    start: new Date(start + 100000),
+    end: new Date(start + 110000),
+  });
+  vm.update(false);
+  expect(vm.itemData.getIds()).toEqual([]);
+  // The group remains present while passing through a gap.
+  expect(vm.groupData.getIds()).toEqual(['afk-host']);
+});
diff --git a/test/unit/awclient.test.js b/test/unit/awclient.test.js
index 8376fbf28..140ab2105 100644
--- a/test/unit/awclient.test.js
+++ b/test/unit/awclient.test.js
@@ -1,6 +1,7 @@
 jest.mock('aw-client', () => ({
   AWClient: jest.fn().mockImplementation(() => ({
     req: {
+      interceptors: { response: { use: jest.fn() } },
       defaults: {
         headers: {
           common: {},
@@ -60,4 +61,18 @@ describe('awclient auth bootstrap', () => {
     expect(client.req.defaults.headers.common.Authorization).toBe('Bearer secret');
     expect(window.location.search).toBe('');
   });
+  test('invalidates period caches after writes but not query POSTs', async () => {
+    const { PeriodCache } = await import('~/util/periodCache');
+    const client = createClient(true);
+    const cache = new PeriodCache();
+    const onResponse = client.req.interceptors.response.use.mock.calls[0][0];
+    cache.set('period', 42);
+    onResponse({ config: { method: 'post', url: '/0/query/' } });
+    expect(cache.get('period')).toBe(42);
+    for (const url of ['/0/buckets/window/events', '/0/import']) {
+      cache.set('period', 42);
+      onResponse({ config: { method: 'post', url } });
+      expect(cache.get('period')).toBeUndefined();
+    }
+  });
 });
diff --git a/test/unit/classes.test.node.ts b/test/unit/classes.test.node.ts
index 5ec793768..2e91e3354 100644
--- a/test/unit/classes.test.node.ts
+++ b/test/unit/classes.test.node.ts
@@ -130,3 +130,40 @@ test('normalizeSelectKeys rejects empty lists', () => {
   expect(classes.normalizeSelectKeys(null)).toBeUndefined();
   expect(classes.normalizeSelectKeys(['app', 'title'])).toEqual(['app', 'title']);
 });
+
+describe('compiled category rule reuse', () => {
+  test('reuses regex objects while respecting in-place rule edits', () => {
+    const cats: Category[] = [{ name: ['Work'], rule: { type: 'regex', regex: '^vim$' } }];
+    const construct = jest.spyOn(global, 'RegExp');
+    try {
+      expect(classes.matchString('vim', cats)).toBe(cats[0]);
+      expect(classes.matchString('other', cats)).toBeNull();
+      expect(construct).toHaveBeenCalledTimes(1);
+      cats[0].rule.ignore_case = true;
+      expect(classes.matchString('VIM', cats)).toBe(cats[0]);
+      cats[0].rule.regex = '^code$';
+      expect(classes.matchString('vim', cats)).toBeNull();
+      expect(classes.matchString('CODE', cats)).toBe(cats[0]);
+      expect(construct).toHaveBeenCalledTimes(3);
+    } finally {
+      construct.mockRestore();
+    }
+  });
+
+  test('refreshes edited selectors and ranking without stale matches', () => {
+    const cats: Category[] = [
+      { name: ['First'], rule: { type: 'regex', regex: 'vim', select_keys: ['app'] } },
+      { name: ['Second'], rule: { type: 'regex', regex: 'vim' } },
+    ];
+    const event: IEvent = { timestamp: '', duration: 1, data: { app: 'vim', title: 'other' } };
+    expect(classes.matchString('vim', cats, event)).toBe(cats[0]);
+    cats[0].rule.select_keys[0] = 'title';
+    expect(classes.matchString('vim', cats, event)).toBe(cats[1]);
+    delete cats[0].rule.select_keys;
+    expect(classes.matchString('vim', cats, event)).toBe(cats[0]);
+    cats[1].rule.priority = 100;
+    expect(classes.matchString('vim', cats, event)).toBe(cats[1]);
+    cats[1].rule.type = 'none';
+    expect(classes.matchString('vim', cats, event)).toBe(cats[0]);
+  });
+});
diff --git a/test/unit/datasets.test.node.ts b/test/unit/datasets.test.node.ts
new file mode 100644
index 000000000..000d34d45
--- /dev/null
+++ b/test/unit/datasets.test.node.ts
@@ -0,0 +1,27 @@
+import { buildBarchartDataset } from '~/util/datasets';
+const event = (path, duration) => ({ timestamp: '', duration, data: { $category: path } });
+
+test('aggregates duplicate categories and preserves missing versus zero values and period order', () => {
+  const data = {
+    first: { cat_events: [event(['Work'], 1800), event(['Work'], 900), event([], 0)] },
+    second: { cat_events: [] },
+    third: { cat_events: [event(['Work'], 360), event(['Break'], 1)] },
+  };
+  const before = JSON.stringify(data);
+  const result = buildBarchartDataset(data, [
+    { name: ['Work'], rule: { type: 'none' }, data: { color: '#123456' } },
+  ]);
+  expect(result.map(d => d.label)).toEqual(['Work', 'Uncategorized', 'Break']);
+  expect(result.map(d => d.data)).toEqual([
+    [0.75, null, 0.1],
+    [0, null, null],
+    [null, null, 0],
+  ]);
+  expect(result[0].backgroundColor).toBe('#123456');
+  expect(JSON.stringify(data)).toBe(before);
+});
+
+test('empty input produces no datasets', () => {
+  expect(buildBarchartDataset([], [])).toEqual([]);
+  expect(buildBarchartDataset(null, [])).toEqual([]);
+});
diff --git a/test/unit/graphData.test.node.ts b/test/unit/graphData.test.node.ts
new file mode 100644
index 000000000..2b652f80b
--- /dev/null
+++ b/test/unit/graphData.test.node.ts
@@ -0,0 +1,31 @@
+import { buildGraphData } from '~/util/graphData';
+const event = (path, duration) => ({ timestamp: '', duration, data: { $category: path } });
+
+test('sums seconds and directed transitions in encounter order without mutating events', () => {
+  const events = [
+    event(['Work', 'Code'], 1.5),
+    event(['Work', 'Docs'], 2),
+    event(['Break'], 3),
+    event(['Work'], 4),
+    event(['Break'], 5),
+  ];
+  const before = JSON.stringify(events);
+  const result = buildGraphData(events, 1, path => path[0]);
+  expect(result.nodes.map(n => n.value)).toEqual([7.5, 8]);
+  expect(result.nodes.map(n => n.color)).toEqual(['Work', 'Break']);
+  expect(result.links).toEqual([
+    { source: '["Work"]', target: '["Break"]', value: 2 },
+    { source: '["Break"]', target: '["Work"]', value: 1 },
+  ]);
+  expect(JSON.stringify(events)).toBe(before);
+});
+
+test('category names containing separators remain distinct', () => {
+  const result = buildGraphData([event(['A>B'], 1), event(['A', 'B'], 2)], 3, () => 'gray');
+  expect(new Set(result.nodes.map(n => n.id)).size).toBe(2);
+  expect(result.links).toHaveLength(1);
+});
+
+test('handles an empty graph', () => {
+  expect(buildGraphData([], 3, () => 'gray')).toEqual({ nodes: [], links: [] });
+});
diff --git a/test/unit/store/categoryHistoryCache.test.node.ts b/test/unit/store/categoryHistoryCache.test.node.ts
new file mode 100644
index 000000000..d3948ed3e
--- /dev/null
+++ b/test/unit/store/categoryHistoryCache.test.node.ts
@@ -0,0 +1,99 @@
+import { createPinia, setActivePinia } from 'pinia';
+import moment from 'moment';
+import { useActivityStore } from '~/stores/activity';
+import { useCategoryStore } from '~/stores/categories';
+import { useSettingsStore } from '~/stores/settings';
+import { useBucketsStore } from '~/stores/buckets';
+import { createClient } from '~/util/awclient';
+import { invalidatePeriodCaches, PeriodCache } from '~/util/periodCache';
+
+function setup() {
+  setActivePinia(createPinia());
+  const client = createClient(true);
+  const query = jest.spyOn(client, 'query').mockResolvedValue([{ cat_events: [] }]);
+  const store = useActivityStore();
+  store.buckets.window = ['window'];
+  store.buckets.afk = ['afk'];
+  const options = {
+    host: 'test',
+    timeperiod: { start: moment('2020-01-01').format(), length: [2, 'day'] as [number, string] },
+  };
+  return { store, query, options };
+}
+
+test('reuses closed periods including empty results, invalidates on query changes and writes', async () => {
+  const { store, query, options } = setup();
+  await store.query_category_time_by_period(options);
+  await store.query_category_time_by_period(options);
+  expect(query).toHaveBeenCalledTimes(2);
+  useCategoryStore().classes = [{ name: ['Work'], rule: { type: 'regex', regex: 'vim' } }];
+  await store.query_category_time_by_period(options);
+  expect(query).toHaveBeenCalledTimes(4);
+  invalidatePeriodCaches();
+  await store.query_category_time_by_period(options);
+  expect(query).toHaveBeenCalledTimes(6);
+  await store.query_category_time_by_period({ ...options, force: true });
+  expect(query).toHaveBeenCalledTimes(8);
+  expect(query.mock.calls[0][2]).toMatchObject({ cache: false });
+});
+
+test('refreshes the open period while reusing completed hours', async () => {
+  const { store, query } = setup();
+  const options = {
+    host: 'test',
+    timeperiod: { start: moment().startOf('day').format(), length: [1, 'day'] as [number, string] },
+  };
+  await store.query_category_time_by_period(options);
+  const first = query.mock.calls.length;
+  await store.query_category_time_by_period(options);
+  expect(query).toHaveBeenCalledTimes(first + 1);
+});
+
+test('expired entries and bounded eviction trigger a fresh lookup', () => {
+  const cache = new PeriodCache<number>(2, 100);
+  cache.set('a', 1, 0);
+  cache.set('b', 2, 0);
+  cache.set('c', 3, 0);
+  expect(cache.get('a', 50)).toBeUndefined();
+  expect(cache.get('c', 50)).toBe(3);
+  expect(cache.get('c', 100)).toBeUndefined();
+});
+
+test('skips history for views that do not consume it', async () => {
+  const { store, options } = setup();
+  jest.spyOn(useSettingsStore(), 'ensureLoaded').mockResolvedValue();
+  jest.spyOn(useBucketsStore(), 'ensureLoaded').mockResolvedValue();
+  jest.spyOn(store, 'get_buckets').mockResolvedValue();
+  jest.spyOn(store, 'query_desktop_full').mockResolvedValue();
+  jest.spyOn(store, 'query_active_history').mockResolvedValue();
+  const historySpy = jest.spyOn(store, 'query_category_time_by_period').mockResolvedValue();
+  await store.ensure_loaded({ ...options, include_category_history: false });
+  expect(historySpy).not.toHaveBeenCalled();
+  await store.ensure_loaded({ ...options, include_category_history: true });
+  expect(historySpy).toHaveBeenCalledTimes(1);
+});
+
+test('skipped loads keep history only while its inputs are unchanged', async () => {
+  const { store, options } = setup();
+  jest.spyOn(useSettingsStore(), 'ensureLoaded').mockResolvedValue();
+  jest.spyOn(useBucketsStore(), 'ensureLoaded').mockResolvedValue();
+  jest.spyOn(store, 'get_buckets').mockResolvedValue();
+  jest.spyOn(store, 'query_desktop_full').mockResolvedValue();
+  jest.spyOn(store, 'query_active_history').mockResolvedValue();
+
+  await store.ensure_loaded({ ...options, include_category_history: true });
+  const loaded = store.category.by_period;
+  expect(loaded).not.toBeNull();
+
+  // Same inputs: a view that doesn't render history leaves it in place for
+  // consumers like Report that read it without reloading.
+  await store.ensure_loaded({ ...options, include_category_history: false });
+  expect(store.category.by_period).toBe(loaded);
+
+  // Changed category rules alter the query, so the retained periods no longer
+  // describe the current data and must be dropped even though the range and
+  // filters are unchanged.
+  useCategoryStore().classes = [{ name: ['Work'], rule: { type: 'regex', regex: 'vim' } }];
+  await store.ensure_loaded({ ...options, include_category_history: false });
+  expect(store.category.by_period).toBeNull();
+});
diff --git a/test/unit/timelineIndex.test.node.ts b/test/unit/timelineIndex.test.node.ts
new file mode 100644
index 000000000..780af5b0c
--- /dev/null
+++ b/test/unit/timelineIndex.test.node.ts
@@ -0,0 +1,61 @@
+import { indexTimelineEvents, visibleTimelineEvents, syncTimelineData } from '~/util/timelineIndex';
+import { DataSet } from 'vis-data';
+
+const event = (id, start, duration) => ({
+  id,
+  timestamp: new Date(start).toISOString(),
+  duration,
+  data: {},
+});
+test('includes overlapping long events and boundaries, excludes offscreen events', () => {
+  const events = [
+    event(1, 0, 100),
+    event(2, 10_000, 2),
+    event(3, 90_000, 10),
+    event(4, 200_000, 5),
+  ];
+  const index = indexTimelineEvents([{ id: 'a', events }]);
+  expect(visibleTimelineEvents(index, 95_000, 100_000).map(e => e.event.id)).toEqual([1, 3]);
+  expect(visibleTimelineEvents(index, 100_000, 110_000).map(e => e.event.id)).toEqual([1, 3]);
+  expect(visibleTimelineEvents(index, 110_001, 120_000)).toEqual([]);
+  expect(events.map(e => e.id)).toEqual([1, 2, 3, 4]);
+});
+
+test('IDs distinguish buckets and remain stable across viewport changes and event edits', () => {
+  const index = indexTimelineEvents([
+    { id: 'a', events: [event(1, 0, 10)] },
+    { id: 'b', events: [event(1, 0, 10)] },
+  ]);
+  expect(new Set(index.entries.map(e => e.id)).size).toBe(2);
+  const changed = indexTimelineEvents([{ id: 'a', events: [event(1, 1000, 20)] }]);
+  expect(changed.entries[0].id).toBe(index.entries[0].id);
+});
+
+test('large ranges prepare only nearby events', () => {
+  const events = Array.from({ length: 10000 }, (_, i) => event(i, i * 10_000, 5));
+  const index = indexTimelineEvents([{ id: 'a', events }]);
+  expect(visibleTimelineEvents(index, 50_000_001, 50_020_000)).toHaveLength(3);
+});
+
+test('incremental updates notify only for changed, added and removed items', () => {
+  const data = new DataSet([
+    { id: 'a', start: 1 },
+    { id: 'b', start: 2 },
+  ]);
+  const update = jest.spyOn(data, 'update');
+  const remove = jest.spyOn(data, 'remove');
+  syncTimelineData(data, [
+    { id: 'a', start: 1 },
+    { id: 'b', start: 2 },
+  ]);
+  expect(update).not.toHaveBeenCalled();
+  syncTimelineData(data, [
+    { id: 'a', start: 3 },
+    { id: 'c', start: 4 },
+  ]);
+  expect(update).toHaveBeenCalledWith([
+    { id: 'a', start: 3 },
+    { id: 'c', start: 4 },
+  ]);
+  expect(remove).toHaveBeenCalledWith(['b']);
+});