fix: replace addEventListener with onmouseleave to prevent listener leak

.gitea/workflows/build.yml

@@ -34,18 +34,44 @@ jobs:
           username: ${{ secrets.REGISTRY_USERNAME }}
           password: ${{ secrets.REGISTRY_TOKEN }}
 
-      - name: Build and push app
-        uses: https://git.sebse.de/sebse/actions/docker-build-push@v1
+      - name: Extract metadata (app)
+        id: meta
+        uses: docker/metadata-action@v5
         with:
-          image: ${{ env.IMAGE }}
-          build-context: ./web
+          images: ${{ env.IMAGE }}
+          tags: |
+            type=sha,prefix=,format=short
+            type=raw,value=latest
+            type=raw,value=${{ steps.version.outputs.version }}
+
+      - name: Build and push app
+        uses: docker/build-push-action@v5
+        with:
+          context: ./web
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          cache-from: type=registry,ref=${{ env.IMAGE }}:latest
+          cache-to: type=inline
+
+      - name: Extract metadata (migrate)
+        id: meta-migrate
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.IMAGE_MIGRATE }}
+          tags: |
+            type=sha,prefix=,format=short
+            type=raw,value=latest
+            type=raw,value=${{ steps.version.outputs.version }}
 
       - name: Build and push migrate
-        uses: https://git.sebse.de/sebse/actions/docker-build-push@v1
+        uses: docker/build-push-action@v5
         with:
-          image: ${{ env.IMAGE_MIGRATE }}
-          build-context: ./web
-          dockerfile: ./web/Dockerfile.migrate
+          context: ./web
+          file: ./web/Dockerfile.migrate
+          push: true
+          tags: ${{ steps.meta-migrate.outputs.tags }}
+          cache-from: type=registry,ref=${{ env.IMAGE_MIGRATE }}:latest
+          cache-to: type=inline
 
       - name: Package and push helm chart
         uses: https://git.sebse.de/sebse/actions/helm-package-push@v1

web/.prettierignore

@@ -0,0 +1,6 @@
+node_modules
+.next
+out
+dist
+charts
+public/*.csv

web/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 100
+}

web/AGENTS.md

@@ -1,5 +1,7 @@
 <!-- BEGIN:nextjs-agent-rules -->
+
 # This is NOT the Next.js you know
 
 This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+
 <!-- END:nextjs-agent-rules -->

web/README.md

@@ -20,3 +20,4 @@ DATABASE_URL=postgresql://factorio:factorio@localhost:5432/factorio npm run migr
 # 4. Start dev server
 cp .env.local.example .env.local   # fill in API_TOKEN
 npm run dev
+```

web/app/api/alerts/[id]/route.ts

@@ -1,11 +1,13 @@
-import { NextRequest, NextResponse } from 'next/server';
-import pool from '@/lib/db';
+import { type NextRequest, NextResponse } from 'next/server';
+
 import { withAuth } from '@/lib/apiHelpers';
+import pool from '@/lib/db';
 
 export const PUT = withAuth(async (req: NextRequest, { params }) => {
   const { id } = await params;
   const body = await req.json();
-  const { item_key, item_key_is_regex, combinator, signal_type, condition, threshold, active } = body;
+  const { item_key, item_key_is_regex, combinator, signal_type, condition, threshold, active } =
+    body;
 
   const result = await pool.query(
     `UPDATE alerts SET

web/app/api/alerts/check/route.ts

@@ -1,9 +1,11 @@
 import { NextResponse } from 'next/server';
-import pool from '@/lib/db';
+
+import type { AlertConfig, TriggeredAlert } from '@/lib/types';
+
 import { withAuth } from '@/lib/apiHelpers';
+import pool from '@/lib/db';
 import { getServerLocaleMap } from '@/lib/localeServer';
 import { resolveName } from '@/lib/localization';
-import type { AlertConfig, TriggeredAlert } from '@/lib/types';
 
 export const GET = withAuth(async () => {
   const alertsResult = await pool.query<AlertConfig>(
@@ -13,7 +15,10 @@ export const GET = withAuth(async () => {
   if (alertsResult.rows.length === 0) return NextResponse.json([]);
 
   const latestResult = await pool.query<{
-    combinator: string; item_key: string; green: number; red: number;
+    combinator: string;
+    item_key: string;
+    green: number;
+    red: number;
   }>(
     `SELECT DISTINCT ON (combinator, item_key) combinator, item_key, green, red
      FROM signals
@@ -22,9 +27,7 @@ export const GET = withAuth(async () => {
 
   const localeMap = getServerLocaleMap();
 
-  const latestMap = new Map(
-    latestResult.rows.map(r => [`${r.combinator}::${r.item_key}`, r]),
-  );
+  const latestMap = new Map(latestResult.rows.map((r) => [`${r.combinator}::${r.item_key}`, r]));
 
   const triggered: TriggeredAlert[] = [];
 
@@ -49,12 +52,13 @@ export const GET = withAuth(async () => {
 
       const value = alert.signal_type === 'green' ? vals.green : vals.red;
       const fired = alert.condition === 'above' ? value > alert.threshold : value < alert.threshold;
-      if (fired) triggered.push({
-        ...alert,
-        current_value:    value,
-        combinator_match: combinator,
-        matched_item_key: item_key,
-      });
+      if (fired)
+        triggered.push({
+          ...alert,
+          current_value: value,
+          combinator_match: combinator,
+          matched_item_key: item_key,
+        });
     }
   }
 

web/app/api/alerts/route.ts

@@ -1,6 +1,7 @@
-import { NextRequest, NextResponse } from 'next/server';
-import pool from '@/lib/db';
+import { type NextRequest, NextResponse } from 'next/server';
+
 import { withAuth } from '@/lib/apiHelpers';
+import pool from '@/lib/db';
 
 export const GET = withAuth(async () => {
   const result = await pool.query('SELECT * FROM alerts ORDER BY created_at DESC');
@@ -10,15 +11,16 @@ export const GET = withAuth(async () => {
 export const POST = withAuth(async (req: NextRequest) => {
   const body = await req.json();
   const {
-    item_key, item_key_is_regex = false,
-    combinator = null, signal_type = 'green', condition, threshold,
+    item_key,
+    item_key_is_regex = false,
+    combinator = null,
+    signal_type = 'green',
+    condition,
+    threshold,
   } = body;
 
   if (!item_key || !condition || threshold === undefined) {
-    return NextResponse.json(
-      { error: 'item_key, condition, threshold required' },
-      { status: 400 },
-    );
+    return NextResponse.json({ error: 'item_key, condition, threshold required' }, { status: 400 });
   }
 
   const result = await pool.query(

web/app/api/charts/[id]/route.ts

@@ -1,22 +1,31 @@
-import { NextRequest, NextResponse } from 'next/server';
-import pool from '@/lib/db';
+import { type NextRequest, NextResponse } from 'next/server';
+
 import { withAuth } from '@/lib/apiHelpers';
+import pool from '@/lib/db';
 
 export const PUT = withAuth(async (req: NextRequest, { params }) => {
   const { id } = await params;
   const body = await req.json();
   const {
-    title, pos_x, pos_y, width, height,
-    signal_type, chart_type, viz_type,
-    filter_items_regex, y_scale,
-    series_limit, order_by,
+    title,
+    pos_x,
+    pos_y,
+    width,
+    height,
+    signal_type,
+    chart_type,
+    viz_type,
+    filter_items_regex,
+    y_scale,
+    series_limit,
+    order_by,
   } = body;
 
-  const hasFilterCombinators  = 'filter_combinators'   in body;
-  const hasFilterItems        = 'filter_items'         in body;
+  const hasFilterCombinators = 'filter_combinators' in body;
+  const hasFilterItems = 'filter_items' in body;
   const hasFilterItemsExclude = 'filter_items_exclude' in body;
-  const hasYMin               = 'y_min'                in body;
-  const hasYMax               = 'y_max'                in body;
+  const hasYMin = 'y_min' in body;
+  const hasYMax = 'y_max' in body;
 
   const result = await pool.query(
     `UPDATE charts SET
@@ -40,15 +49,28 @@ export const PUT = withAuth(async (req: NextRequest, { params }) => {
     WHERE id = $23
     RETURNING *`,
     [
-      title, pos_x, pos_y, width, height, signal_type, chart_type, viz_type,
-      hasFilterCombinators,  body.filter_combinators   ?? null,
-      hasFilterItems,        body.filter_items         ?? null,
-      hasFilterItemsExclude, body.filter_items_exclude ?? null,
+      title,
+      pos_x,
+      pos_y,
+      width,
+      height,
+      signal_type,
+      chart_type,
+      viz_type,
+      hasFilterCombinators,
+      body.filter_combinators ?? null,
+      hasFilterItems,
+      body.filter_items ?? null,
+      hasFilterItemsExclude,
+      body.filter_items_exclude ?? null,
       filter_items_regex,
-      hasYMin, body.y_min ?? null,
-      hasYMax, body.y_max ?? null,
+      hasYMin,
+      body.y_min ?? null,
+      hasYMax,
+      body.y_max ?? null,
       y_scale,
-      series_limit, order_by,
+      series_limit,
+      order_by,
       id,
     ],
   );

web/app/api/charts/route.ts

@@ -1,6 +1,7 @@
-import { NextRequest, NextResponse } from 'next/server';
-import pool from '@/lib/db';
+import { type NextRequest, NextResponse } from 'next/server';
+
 import { withAuth } from '@/lib/apiHelpers';
+import pool from '@/lib/db';
 
 export const GET = withAuth(async () => {
   const result = await pool.query('SELECT * FROM charts ORDER BY pos_y ASC, pos_x ASC');
@@ -11,12 +12,22 @@ export const POST = withAuth(async (req: NextRequest) => {
   const body = await req.json();
   const {
     title,
-    pos_x = 0, pos_y = 0, width = 2, height = 4,
-    signal_type = 'both', chart_type = 'signals', viz_type = 'line',
-    filter_combinators = null, filter_items = null,
-    filter_items_exclude = null, filter_items_regex = false,
-    y_min = null, y_max = null, y_scale = 'linear',
-    series_limit = 20, order_by = 'time',
+    pos_x = 0,
+    pos_y = 0,
+    width = 2,
+    height = 4,
+    signal_type = 'both',
+    chart_type = 'signals',
+    viz_type = 'line',
+    filter_combinators = null,
+    filter_items = null,
+    filter_items_exclude = null,
+    filter_items_regex = false,
+    y_min = null,
+    y_max = null,
+    y_scale = 'linear',
+    series_limit = 20,
+    order_by = 'value_asc',
   } = body;
 
   if (!title) return NextResponse.json({ error: 'title required' }, { status: 400 });
@@ -28,9 +39,25 @@ export const POST = withAuth(async (req: NextRequest) => {
        y_min,y_max,y_scale,series_limit,order_by)
      VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9,$10,$11,$12,$13,$14,$15,$16,$17)
      RETURNING *`,
-    [title,pos_x,pos_y,width,height,signal_type,chart_type,viz_type,
-     filter_combinators,filter_items,filter_items_exclude,filter_items_regex,
-     y_min,y_max,y_scale,series_limit,order_by],
+    [
+      title,
+      pos_x,
+      pos_y,
+      width,
+      height,
+      signal_type,
+      chart_type,
+      viz_type,
+      filter_combinators,
+      filter_items,
+      filter_items_exclude,
+      filter_items_regex,
+      y_min,
+      y_max,
+      y_scale,
+      series_limit,
+      order_by,
+    ],
   );
   return NextResponse.json(result.rows[0], { status: 201 });
 });

web/app/api/ingest/[combinator]/route.ts

@@ -1,14 +1,15 @@
-import { NextRequest, NextResponse } from 'next/server';
-import pool from '@/lib/db';
+import { type NextRequest, NextResponse } from 'next/server';
+
 import { withAuth } from '@/lib/apiHelpers';
+import pool from '@/lib/db';
 
 interface CircuitNetwork {
   green: Record<string, number>;
-  red:   Record<string, number>;
+  red: Record<string, number>;
 }
 
 interface IngestBody {
-  game_tick:       number;
+  game_tick: number;
   circuit_network: CircuitNetwork;
   logistic_network: Record<string, number>;
 }
@@ -31,10 +32,10 @@ export const POST = withAuth(async (req: NextRequest, { params }) => {
     return NextResponse.json({ error: 'Missing game_tick' }, { status: 400 });
   }
 
-  const green    = circuit_network?.green   ?? {};
-  const red      = circuit_network?.red     ?? {};
-  const logistic = logistic_network         ?? {};
-  const allKeys  = new Set([...Object.keys(green), ...Object.keys(red), ...Object.keys(logistic)]);
+  const green = circuit_network?.green ?? {};
+  const red = circuit_network?.red ?? {};
+  const logistic = logistic_network ?? {};
+  const allKeys = new Set([...Object.keys(green), ...Object.keys(red), ...Object.keys(logistic)]);
 
   if (allKeys.size === 0) return NextResponse.json({ ok: true, rows: 0 });
 
@@ -47,7 +48,15 @@ export const POST = withAuth(async (req: NextRequest, { params }) => {
     let idx = 1;
     for (const key of allKeys) {
       placeholders.push(`($${idx++},$${idx++},$${idx++},$${idx++},$${idx++},$${idx++},$${idx++})`);
-      values.push(realTime, game_tick, combinator, key, green[key] ?? 0, red[key] ?? 0, logistic[key] ?? null);
+      values.push(
+        realTime,
+        game_tick,
+        combinator,
+        key,
+        green[key] ?? 0,
+        red[key] ?? 0,
+        logistic[key] ?? null,
+      );
     }
 
     await client.query(

web/app/api/sessions/route.ts

@@ -1,11 +1,14 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { getSessionBoundaries } from '@/lib/sessions';
+import { type NextRequest, NextResponse } from 'next/server';
+
 import { withAuth } from '@/lib/apiHelpers';
+import { getSessionBoundaries } from '@/lib/sessions';
 
 export const GET = withAuth(async (req: NextRequest) => {
   const p = req.nextUrl.searchParams;
-  const from = p.get('from') ? new Date(p.get('from')!) : new Date(Date.now() - 86_400_000);
-  const to   = p.get('to')   ? new Date(p.get('to')!)   : new Date();
+  const fromVal = p.get('from');
+  const toVal = p.get('to');
+  const from = fromVal ? new Date(fromVal) : new Date(Date.now() - 86_400_000);
+  const to = toVal ? new Date(toVal) : new Date();
   const boundaries = await getSessionBoundaries(from, to);
   return NextResponse.json(boundaries);
 });

web/app/api/signals/route.ts

@@ -1,107 +1,72 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { type NextRequest, NextResponse } from 'next/server';
+
+import { withAuth, buildItemFilter } from '@/lib/apiHelpers';
 import pool from '@/lib/db';
-import { withAuth } from '@/lib/apiHelpers';
-import { getServerLocaleMap } from '@/lib/localeServer';
-import { matchKeys } from '@/lib/localization';
 
 export const GET = withAuth(async (req: NextRequest) => {
   const p = req.nextUrl.searchParams;
-  const combinators    = p.getAll('combinator');
+  const combinators = p.getAll('combinator');
   const itemsWhitelist = p.getAll('item');
   const itemsBlacklist = p.getAll('exclude');
-  const signalType     = p.get('signal') ?? 'both';
-  const from           = p.get('from');
-  const to             = p.get('to');
-  const useRegex       = p.get('regex') === 'true';
-  const orderBy        = p.get('order_by') ?? 'time';
-  const limit          = p.get('limit') ? parseInt(p.get('limit')!, 10) : null;
+  const signalType = p.get('signal') ?? 'both';
+  const from = p.get('from');
+  const to = p.get('to');
+  const useRegex = p.get('regex') === 'true';
+  const orderBy = p.get('order_by') ?? 'value_asc';
+  const limitStr = p.get('limit');
+  const limit = limitStr ? parseInt(limitStr, 10) : null;
 
   const conditions: string[] = [];
   const values: unknown[] = [];
-  let i = 1;
+  const param = { current: 1 };
 
   if (combinators.length > 0) {
-    conditions.push(`combinator = ANY($${i++})`);
+    conditions.push(`combinator = ANY($${param.current++})`);
     values.push(combinators);
   }
 
-  if (itemsWhitelist.length > 0) {
-    if (useRegex) {
-      const localeMap = getServerLocaleMap();
-      // Each pattern is expanded to matching keys (tested against key AND localized name).
-      // Union all patterns — if a pattern matches nothing, it contributes no keys.
-      const keys = [...new Set(itemsWhitelist.flatMap(p => matchKeys(p, localeMap)))];
-      if (keys.length === 0) return NextResponse.json([]);
-      conditions.push(`item_key = ANY($${i++})`);
-      values.push(keys);
-    } else {
-      conditions.push(`item_key = ANY($${i++})`);
-      values.push(itemsWhitelist);
-    }
-  }
+  const wlClause = buildItemFilter(itemsWhitelist, useRegex, true, values, param);
+  if (wlClause) conditions.push(wlClause);
 
-  if (itemsBlacklist.length > 0) {
-    if (useRegex) {
-      const localeMap = getServerLocaleMap();
-      const keys = [...new Set(itemsBlacklist.flatMap(p => matchKeys(p, localeMap)))];
-      // If blacklist pattern matches nothing, nothing to exclude — skip condition
-      if (keys.length > 0) {
-        conditions.push(`item_key != ALL($${i++})`);
-        values.push(keys);
-      }
-    } else {
-      conditions.push(`item_key != ALL($${i++})`);
-      values.push(itemsBlacklist);
-    }
-  }
+  const blClause = buildItemFilter(itemsBlacklist, useRegex, false, values, param);
+  if (blClause) conditions.push(blClause);
 
-  if (from) { conditions.push(`real_time >= $${i++}`); values.push(new Date(from)); }
-  if (to)   { conditions.push(`real_time <= $${i++}`); values.push(new Date(to));   }
+  if (from) {
+    conditions.push(`real_time >= $${param.current++}`);
+    values.push(new Date(from));
+  }
+  if (to) {
+    conditions.push(`real_time <= $${param.current++}`);
+    values.push(new Date(to));
+  }
 
   const where = conditions.length > 0 ? `WHERE ${conditions.join(' AND ')}` : '';
 
-  const valueCol   = signalType === 'red' ? 'red' : 'green';
+  const valueCol = signalType === 'red' ? 'red' : 'green';
   const selectCols =
-    signalType === 'green' ? 'real_time, game_tick, combinator, item_key, green'
-    : signalType === 'red' ? 'real_time, game_tick, combinator, item_key, red'
-    : 'real_time, game_tick, combinator, item_key, green, red';
+    signalType === 'green'
+      ? 'real_time, game_tick, combinator, item_key, green'
+      : signalType === 'red'
+        ? 'real_time, game_tick, combinator, item_key, red'
+        : 'real_time, game_tick, combinator, item_key, green, red';
 
   if ((orderBy === 'delta_asc' || orderBy === 'delta_desc') && limit !== null) {
     const baseConditions: string[] = [];
     const baseValues: unknown[] = [];
-    let j = 1;
+    const baseParam = { current: 1 };
 
     if (combinators.length > 0) {
-      baseConditions.push(`combinator = ANY($${j++})`);
+      baseConditions.push(`combinator = ANY($${baseParam.current++})`);
       baseValues.push(combinators);
     }
-    if (itemsWhitelist.length > 0) {
-      if (useRegex) {
-        const localeMap = getServerLocaleMap();
-        const keys = [...new Set(itemsWhitelist.flatMap(p => matchKeys(p, localeMap)))];
-        if (keys.length === 0) return NextResponse.json([]);
-        baseConditions.push(`item_key = ANY($${j++})`);
-        baseValues.push(keys);
-      } else {
-        baseConditions.push(`item_key = ANY($${j++})`);
-        baseValues.push(itemsWhitelist);
-      }
-    }
-    if (itemsBlacklist.length > 0) {
-      if (useRegex) {
-        const localeMap = getServerLocaleMap();
-        const keys = [...new Set(itemsBlacklist.flatMap(p => matchKeys(p, localeMap)))];
-        if (keys.length > 0) {
-          baseConditions.push(`item_key != ALL($${j++})`);
-          baseValues.push(keys);
-        }
-      } else {
-        baseConditions.push(`item_key != ALL($${j++})`);
-        baseValues.push(itemsBlacklist);
-      }
-    }
 
-    const baseWhere    = baseConditions.length > 0 ? `WHERE ${baseConditions.join(' AND ')}` : '';
+    const wlBase = buildItemFilter(itemsWhitelist, useRegex, true, baseValues, baseParam);
+    if (wlBase) baseConditions.push(wlBase);
+
+    const blBase = buildItemFilter(itemsBlacklist, useRegex, false, baseValues, baseParam);
+    if (blBase) baseConditions.push(blBase);
+
+    const baseWhere = baseConditions.length > 0 ? `WHERE ${baseConditions.join(' AND ')}` : '';
     const baseWhereAnd = baseConditions.length > 0 ? `AND ${baseConditions.join(' AND ')}` : '';
 
     const deltaQuery = `
@@ -132,30 +97,45 @@ export const GET = withAuth(async (req: NextRequest) => {
       SELECT combinator, item_key, delta
       FROM deltas
       ORDER BY delta ${orderBy === 'delta_asc' ? 'ASC' : 'DESC'}
-      LIMIT $${j}
+      LIMIT $${baseParam.current}
     `;
 
-    const deltaResult = await pool.query<{ combinator: string; item_key: string; delta: number }>(
-      deltaQuery,
-      [...baseValues, limit],
-    );
+    const deltaResult = await pool.query<{
+      combinator: string;
+      item_key: string;
+      delta: number;
+    }>(deltaQuery, [...baseValues, limit]);
 
     const top = deltaResult.rows;
     if (top.length === 0) return NextResponse.json([]);
 
-    const seriesConditions = top.map((_, idx) =>
-      `(combinator = $${i + idx * 2} AND item_key = $${i + idx * 2 + 1})`,
+    const seriesConditions = top.map(
+      (_, idx) =>
+        `(combinator = $${param.current + idx * 2} AND item_key = $${param.current + idx * 2 + 1})`,
     );
     const fullWhere = `${where ? where + ' AND' : 'WHERE'} (${seriesConditions.join(' OR ')})`;
+    const orderCase = top
+      .map(
+        (_, idx) =>
+          `WHEN combinator = $${param.current + idx * 2} AND item_key = $${param.current + idx * 2 + 1} THEN ${idx}`,
+      )
+      .join(' ');
     const result = await pool.query(
-      `SELECT ${selectCols} FROM signals ${fullWhere} ORDER BY real_time ASC`,
-      [...values, ...top.flatMap(r => [r.combinator, r.item_key])],
+      `SELECT ${selectCols} FROM signals ${fullWhere} ORDER BY CASE ${orderCase} ELSE ${top.length} END, real_time ASC`,
+      [...values, ...top.flatMap((r) => [r.combinator, r.item_key])],
     );
     return NextResponse.json(result.rows);
   }
 
-  if ((orderBy === 'value_asc' || orderBy === 'value_desc' || orderBy === 'abs_desc') && limit !== null) {
-    const latestVals = await pool.query<{ combinator: string; item_key: string; val: number }>(
+  if (
+    (orderBy === 'value_asc' || orderBy === 'value_desc' || orderBy === 'abs_desc') &&
+    limit !== null
+  ) {
+    const latestVals = await pool.query<{
+      combinator: string;
+      item_key: string;
+      val: number;
+    }>(
       `SELECT DISTINCT ON (combinator, item_key)
          combinator, item_key, ${valueCol} AS val
        FROM signals ${where}
@@ -164,20 +144,28 @@ export const GET = withAuth(async (req: NextRequest) => {
     );
 
     let sorted = latestVals.rows;
-    if (orderBy === 'value_asc')  sorted = [...sorted].sort((a, b) => a.val - b.val);
+    if (orderBy === 'value_asc') sorted = [...sorted].sort((a, b) => a.val - b.val);
     if (orderBy === 'value_desc') sorted = [...sorted].sort((a, b) => b.val - a.val);
-    if (orderBy === 'abs_desc')   sorted = [...sorted].sort((a, b) => Math.abs(b.val) - Math.abs(a.val));
+    if (orderBy === 'abs_desc')
+      sorted = [...sorted].sort((a, b) => Math.abs(b.val) - Math.abs(a.val));
 
     const top = sorted.slice(0, limit);
     if (top.length === 0) return NextResponse.json([]);
 
-    const seriesConditions = top.map((_, idx) =>
-      `(combinator = $${i + idx * 2} AND item_key = $${i + idx * 2 + 1})`,
+    const seriesConditions = top.map(
+      (_, idx) =>
+        `(combinator = $${param.current + idx * 2} AND item_key = $${param.current + idx * 2 + 1})`,
     );
     const fullWhere = `${where ? where + ' AND' : 'WHERE'} (${seriesConditions.join(' OR ')})`;
+    const orderCase = top
+      .map(
+        (_, idx) =>
+          `WHEN combinator = $${param.current + idx * 2} AND item_key = $${param.current + idx * 2 + 1} THEN ${idx}`,
+      )
+      .join(' ');
     const result = await pool.query(
-      `SELECT ${selectCols} FROM signals ${fullWhere} ORDER BY real_time ASC`,
-      [...values, ...top.flatMap(r => [r.combinator, r.item_key])],
+      `SELECT ${selectCols} FROM signals ${fullWhere} ORDER BY CASE ${orderCase} ELSE ${top.length} END, real_time ASC`,
+      [...values, ...top.flatMap((r) => [r.combinator, r.item_key])],
     );
     return NextResponse.json(result.rows);
   }

web/app/api/ups/route.ts

@@ -1,12 +1,15 @@
-import { NextRequest, NextResponse } from 'next/server';
-import pool from '@/lib/db';
+import { type NextRequest, NextResponse } from 'next/server';
+
 import { withAuth } from '@/lib/apiHelpers';
+import pool from '@/lib/db';
 
 export const GET = withAuth(async (req: NextRequest) => {
   const p = req.nextUrl.searchParams;
   const combinator = p.get('combinator');
-  const from = p.get('from') ? new Date(p.get('from')!) : new Date(Date.now() - 86_400_000);
-  const to   = p.get('to')   ? new Date(p.get('to')!)   : new Date();
+  const fromVal = p.get('from');
+  const toVal = p.get('to');
+  const from = fromVal ? new Date(fromVal) : new Date(Date.now() - 86_400_000);
+  const to = toVal ? new Date(toVal) : new Date();
 
   const conditions = ['real_time BETWEEN $1 AND $2'];
   const values: unknown[] = [from, to];
@@ -17,7 +20,9 @@ export const GET = withAuth(async (req: NextRequest) => {
   }
 
   const result = await pool.query<{
-    real_time: Date; game_tick: string; combinator: string;
+    real_time: Date;
+    game_tick: string;
+    combinator: string;
   }>(
     `SELECT real_time, game_tick, combinator
      FROM tick_timing
@@ -43,14 +48,14 @@ export const GET = withAuth(async (req: NextRequest) => {
       const prev = combiRows[i - 1];
       const curr = combiRows[i];
       const deltaRealMs = curr.real_time.getTime() - prev.real_time.getTime();
-      const deltaTicks  = parseInt(curr.game_tick, 10) - parseInt(prev.game_tick, 10);
+      const deltaTicks = parseInt(curr.game_tick, 10) - parseInt(prev.game_tick, 10);
       // Skip session gaps and bad data
       if (deltaRealMs > 30 * 60 * 1000 || deltaRealMs <= 0 || deltaTicks <= 0) continue;
       points.push({
-        real_time:  curr.real_time.toISOString(),
-        game_tick:  parseInt(curr.game_tick, 10),
+        real_time: curr.real_time.toISOString(),
+        game_tick: parseInt(curr.game_tick, 10),
         combinator: combi,
-        ups:        Math.round((deltaTicks / deltaRealMs) * 1000 * 10) / 10,
+        ups: Math.round((deltaTicks / deltaRealMs) * 1000 * 10) / 10,
       });
     }
   }

web/app/globals.css

@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 :root {
   --background: #111827;

web/app/layout.tsx

@@ -1,14 +1,12 @@
-import type { Metadata } from "next";
-import "./globals.css";
+import type { Metadata } from 'next';
+import './globals.css';
 
 export const metadata: Metadata = {
-  title: "Factorio Dashboard",
-  description: "Factorio signal monitor",
+  title: 'Factorio Dashboard',
+  description: 'Factorio signal monitor',
 };
 
-export default function RootLayout({
-  children,
-}: Readonly<{ children: React.ReactNode }>) {
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
     <html lang="en" className="h-full antialiased">
       <body className="min-h-full flex flex-col">{children}</body>

web/app/page.tsx

@@ -1,15 +1,17 @@
 'use client';
 
-import { useEffect, useState, Suspense } from 'react';
 import { useSearchParams } from 'next/navigation';
-import { AppProvider, useApp } from '@/lib/context';
-import { setToken, fetchAlerts } from '@/lib/api';
-import { getLocaleMap } from '@/lib/localization';
-import type { AlertConfig } from '@/lib/types';
+import { useEffect, useState, Suspense } from 'react';
+
 import type { LocaleMap } from '@/lib/localization';
-import TimeRangeSelector from '@/components/TimeRangeSelector';
+import type { AlertConfig } from '@/lib/types';
+
 import AlertPanel from '@/components/AlertPanel';
 import Dashboard from '@/components/Dashboard';
+import TimeRangeSelector from '@/components/TimeRangeSelector';
+import { setToken, fetchAlerts } from '@/lib/api';
+import { AppProvider, useApp } from '@/lib/context';
+import { getLocaleMap } from '@/lib/localization';
 
 function AppShell({ alerts }: { alerts: AlertConfig[] }) {
   const { triggeredAlerts } = useApp();
@@ -48,8 +50,8 @@ function DashboardApp() {
   const searchParams = useSearchParams();
   const token = searchParams.get('token') ?? '';
 
-  const [ready,     setReady]     = useState(false);
-  const [alerts,    setAlerts]    = useState<AlertConfig[]>([]);
+  const [ready, setReady] = useState(false);
+  const [alerts, setAlerts] = useState<AlertConfig[]>([]);
   const [localeMap, setLocaleMap] = useState<LocaleMap>(new Map());
 
   useEffect(() => {
@@ -72,9 +74,7 @@ function DashboardApp() {
 
   if (!ready) {
     return (
-      <div className="flex min-h-screen items-center justify-center text-gray-400">
-        Loading…
-      </div>
+      <div className="flex min-h-screen items-center justify-center text-gray-400">Loading…</div>
     );
   }
 

web/bin/fix-colors.ts

@@ -0,0 +1,139 @@
+import { readFileSync, writeFileSync } from 'fs';
+const CSV = 'public/factorio_item_colors.csv';
+
+function hexToHsl(h: string): [number, number, number] {
+  const r = parseInt(h.slice(1, 3), 16) / 255,
+    g = parseInt(h.slice(3, 5), 16) / 255,
+    b = parseInt(h.slice(5, 7), 16) / 255;
+  const mx = Math.max(r, g, b),
+    mn = Math.min(r, g, b),
+    l = (mx + mn) / 2;
+  if (mx === mn) return [0, 0, Math.round(l * 100)];
+  const d = mx - mn,
+    s = l > 0.5 ? d / (2 - mx - mn) : d / (mx + mn);
+  let hue: number;
+  if (mx === r) hue = ((g - b) / d + (g < b ? 6 : 0)) * 60;
+  else if (mx === g) hue = ((b - r) / d + 2) * 60;
+  else hue = ((r - g) / d + 4) * 60;
+  return [Math.round(hue), Math.round(s * 100), Math.round(l * 100)];
+}
+function hslToHex(h: number, s: number, l: number): string {
+  s /= 100;
+  l /= 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s,
+    x = c * (1 - Math.abs(((h / 60) % 2) - 1)),
+    m = l - c / 2;
+  let r = 0,
+    g = 0,
+    b = 0;
+  if (h < 60) {
+    r = c;
+    g = x;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+  } else if (h < 180) {
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    b = c;
+  } else {
+    r = c;
+    b = x;
+  }
+  const to = (v: number) =>
+    Math.round((v + m) * 255)
+      .toString(16)
+      .padStart(2, '0');
+  return '#' + to(r) + to(g) + to(b);
+}
+function djb2(s: string): number {
+  let h = 5381;
+  for (let i = 0; i < s.length; i++) h = (h * 33) ^ s.charCodeAt(i);
+  return h >>> 0;
+}
+function hueDist(a: number, b: number): number {
+  const d = Math.abs(a - b);
+  return Math.min(d, 360 - d);
+}
+
+let rawText: string;
+try {
+  rawText = readFileSync(CSV, 'utf-8');
+} catch (e) {
+  console.error('Failed to read CSV:', e);
+  process.exit(1);
+}
+const lines = rawText.trim().split('\n');
+const header = lines[0];
+const raw = lines
+  .slice(1)
+  .filter((l) => l.trim())
+  .map((l) => {
+    const [k, c] = l.split(',');
+    return { key: k.trim(), color: c.trim() };
+  });
+
+// Dedup by key
+const seen = new Set<string>();
+const rows: typeof raw = [];
+for (const r of raw) {
+  if (seen.has(r.key)) continue;
+  seen.add(r.key);
+  rows.push(r);
+}
+
+const n = rows.length;
+const parent = Array.from({ length: n }, (_, i) => i);
+function find(x: number): number {
+  while (parent[x] !== x) {
+    parent[x] = parent[parent[x]];
+    x = parent[x];
+  }
+  return x;
+}
+function union(a: number, b: number) {
+  parent[find(a)] = find(b);
+}
+
+const hsl = rows.map((r, i) => ({ ...r, hsl: hexToHsl(r.color), idx: i }));
+
+for (let i = 0; i < n; i++) {
+  for (let j = i + 1; j < n; j++) {
+    if (
+      hueDist(hsl[i].hsl[0], hsl[j].hsl[0]) <= 0.5 &&
+      Math.abs(hsl[i].hsl[2] - hsl[j].hsl[2]) <= 0.5
+    )
+      union(i, j);
+  }
+}
+
+const groups = new Map<number, typeof hsl>();
+for (let i = 0; i < n; i++) {
+  const root = find(i);
+  const group = groups.get(root) ?? [];
+  if (!groups.has(root)) groups.set(root, group);
+  group.push(hsl[i]);
+}
+
+let fixed = 0;
+for (const [, items] of groups) {
+  if (items.length < 2) continue;
+  items.sort((a, b) => a.idx - b.idx);
+  const [oh, os, ol] = items[0].hsl;
+  for (let i = 1; i < items.length; i++) {
+    const hash = djb2(items[i].key);
+    const h = (oh + ((hash % 5) - 2) + i * 7 + 360) % 360;
+    const l = Math.max(0, Math.min(100, ol + (((hash >> 4) % 5) - 2)));
+    items[i].color = hslToHex(h, os, l);
+    fixed++;
+  }
+}
+
+hsl.sort((a, b) => a.idx - b.idx);
+writeFileSync(CSV, header + '\n' + hsl.map((r) => `${r.key},${r.color}`).join('\n') + '\n');
+if (fixed) console.log(`Fixed ${fixed} close colors`);

web/charts/factorio-signal-exporter/Chart.yaml

@@ -3,4 +3,4 @@ name: factorio-signal-exporter
 description: Factorio Signal Exporter — Next.js dashboard with TimescaleDB
 type: application
 version: 0.0.0-dev
-appVersion: "latest"
+appVersion: 'latest'

web/charts/factorio-signal-exporter/values.yaml

@@ -13,10 +13,10 @@ imagePullSecrets: []
 app:
   replicaCount: 1
   ## API token for ingest POST and dashboard GET ?token=
-  apiToken: ""
+  apiToken: ''
   ## If set, use this existing K8s secret instead of creating one.
   ## Secret must contain keys: API_TOKEN, DATABASE_URL
-  existingSecret: ""
+  existingSecret: ''
 
 db:
   ## TimescaleDB credentials — used to build DATABASE_URL and configure the StatefulSet
@@ -25,7 +25,7 @@ db:
   name: factorio
   port: 5432
   storage: 10Gi
-  storageClassName: ""
+  storageClassName: ''
 
 service:
   type: ClusterIP
@@ -33,10 +33,10 @@ service:
 
 ingress:
   enabled: false
-  className: ""
+  className: ''
   host: factorio.example.com
   tls: false
-  tlsSecretName: ""
+  tlsSecretName: ''
   annotations: {}
 
 resources: {}

web/components/AlertPanel.tsx

@@ -1,40 +1,51 @@
 'use client';
 
 import { useState, useEffect, useRef } from 'react';
-import { useApp } from '@/lib/context';
-import { fetchAlerts, createAlert, updateAlert, deleteAlert } from '@/lib/api';
-import { resolveName, resolveKey } from '@/lib/localization';
+
 import type { AlertConfig } from '@/lib/types';
 
+import { fetchAlerts, createAlert, updateAlert, deleteAlert } from '@/lib/api';
+import { useApp } from '@/lib/context';
+import { resolveName, resolveKey } from '@/lib/localization';
+
 interface Props {
-  open:    boolean;
+  open: boolean;
   onClose: () => void;
 }
 
-const inputCls  = 'w-full bg-gray-800 border border-gray-600 rounded px-2 py-1 text-sm text-white focus:outline-none focus:border-indigo-500';
-const selectCls = 'flex-1 bg-gray-800 border border-gray-600 rounded px-2 py-1 text-sm text-white focus:outline-none';
+const inputCls =
+  'w-full bg-gray-800 border border-gray-600 rounded px-2 py-1 text-sm text-white focus:outline-none focus:border-indigo-500';
+const selectCls =
+  'flex-1 bg-gray-800 border border-gray-600 rounded px-2 py-1 text-sm text-white focus:outline-none';
 
 interface AlertFormState {
-  itemKey:        string;
+  itemKey: string;
   itemKeyIsRegex: boolean;
-  combinator:     string;
-  signalType:     'green' | 'red';
-  condition:      'above' | 'below';
-  threshold:      string;
+  combinator: string;
+  signalType: 'green' | 'red';
+  condition: 'above' | 'below';
+  threshold: string;
 }
 
 function emptyForm(): AlertFormState {
-  return { itemKey: '', itemKeyIsRegex: false, combinator: '', signalType: 'green', condition: 'below', threshold: '0' };
+  return {
+    itemKey: '',
+    itemKeyIsRegex: false,
+    combinator: '',
+    signalType: 'green',
+    condition: 'below',
+    threshold: '0',
+  };
 }
 
 function alertToForm(a: AlertConfig): AlertFormState {
   return {
-    itemKey:        a.item_key,
+    itemKey: a.item_key,
     itemKeyIsRegex: a.item_key_is_regex,
-    combinator:     a.combinator ?? '',
-    signalType:     a.signal_type,
-    condition:      a.condition,
-    threshold:      String(a.threshold),
+    combinator: a.combinator ?? '',
+    signalType: a.signal_type,
+    condition: a.condition,
+    threshold: String(a.threshold),
   };
 }
 
@@ -50,48 +61,80 @@ function Tooltip({ text }: { text: string }) {
 }
 
 function AlertForm({
-  value, onChange, onSubmit, onCancel, submitLabel,
+  value,
+  onChange,
+  onSubmit,
+  onCancel,
+  submitLabel,
 }: {
-  value:       AlertFormState;
-  onChange:    (s: AlertFormState) => void;
-  onSubmit:    () => void;
-  onCancel?:   () => void;
+  value: AlertFormState;
+  onChange: (s: AlertFormState) => void;
+  onSubmit: () => void;
+  onCancel?: () => void;
   submitLabel: string;
 }) {
   return (
     <div className="space-y-2">
       <input
         value={value.itemKey}
-        onChange={e => onChange({ ...value, itemKey: e.target.value })}
+        onChange={(e) => onChange({ ...value, itemKey: e.target.value })}
         placeholder={value.itemKeyIsRegex ? 'iron-.*|Iron Plate' : 'Iron Plate or item-key'}
         className={inputCls}
       />
       <label className="flex items-center gap-1.5 text-xs text-gray-400 cursor-pointer">
-        <input type="checkbox" checked={value.itemKeyIsRegex}
-          onChange={e => onChange({ ...value, itemKeyIsRegex: e.target.checked })}
-          className="accent-indigo-500" />
+        <input
+          type="checkbox"
+          checked={value.itemKeyIsRegex}
+          onChange={(e) => onChange({ ...value, itemKeyIsRegex: e.target.checked })}
+          className="accent-indigo-500"
+        />
         Item key is regex
       </label>
-      <input value={value.combinator} onChange={e => onChange({ ...value, combinator: e.target.value })}
-        placeholder="combinator (empty = all)" className={inputCls} />
+      <input
+        value={value.combinator}
+        onChange={(e) => onChange({ ...value, combinator: e.target.value })}
+        placeholder="combinator (empty = all)"
+        className={inputCls}
+      />
       <div className="flex gap-2">
-        <select value={value.signalType} onChange={e => onChange({ ...value, signalType: e.target.value as 'green' | 'red' })} className={selectCls}>
+        <select
+          value={value.signalType}
+          onChange={(e) => onChange({ ...value, signalType: e.target.value as 'green' | 'red' })}
+          className={selectCls}
+        >
           <option value="green">Green</option>
           <option value="red">Red</option>
         </select>
-        <select value={value.condition} onChange={e => onChange({ ...value, condition: e.target.value as 'above' | 'below' })} className={selectCls}>
+        <select
+          value={value.condition}
+          onChange={(e) => onChange({ ...value, condition: e.target.value as 'above' | 'below' })}
+          className={selectCls}
+        >
           <option value="below">Below</option>
           <option value="above">Above</option>
         </select>
       </div>
-      <input type="number" value={value.threshold} onChange={e => onChange({ ...value, threshold: e.target.value })}
-        placeholder="threshold" className={inputCls} />
+      <input
+        type="number"
+        value={value.threshold}
+        onChange={(e) => onChange({ ...value, threshold: e.target.value })}
+        placeholder="threshold"
+        className={inputCls}
+      />
       <div className="flex gap-2">
-        <button onClick={onSubmit} className="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white text-sm rounded py-1.5">
+        <button
+          aria-label={submitLabel}
+          onClick={onSubmit}
+          className="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white text-sm rounded py-1.5"
+        >
           {submitLabel}
         </button>
         {onCancel && (
-          <button onClick={onCancel} className="px-3 py-1.5 text-sm text-gray-400 hover:text-white rounded hover:bg-gray-700">
+          <button
+            aria-label="Cancel"
+            onClick={onCancel}
+            className="px-3 py-1.5 text-sm text-gray-400 hover:text-white rounded hover:bg-gray-700"
+          >
             Cancel
           </button>
         )}
@@ -102,10 +145,10 @@ function AlertForm({
 
 export default function AlertPanel({ open, onClose }: Props) {
   const { triggeredAlerts, refreshAlerts, localeMap, reverseMap } = useApp();
-  const [alerts,    setAlerts]    = useState<AlertConfig[]>([]);
-  const [newForm,   setNewForm]   = useState<AlertFormState>(emptyForm());
+  const [alerts, setAlerts] = useState<AlertConfig[]>([]);
+  const [newForm, setNewForm] = useState<AlertFormState>(emptyForm());
   const [editingId, setEditingId] = useState<string | null>(null);
-  const [editForm,  setEditForm]  = useState<AlertFormState>(emptyForm());
+  const [editForm, setEditForm] = useState<AlertFormState>(emptyForm());
   const prevTriggeredCount = useRef(0);
 
   useEffect(() => {
@@ -115,8 +158,8 @@ export default function AlertPanel({ open, onClose }: Props) {
   useEffect(() => {
     if (triggeredAlerts.length > prevTriggeredCount.current) {
       try {
-        const ctx  = new AudioContext();
-        const osc  = ctx.createOscillator();
+        const ctx = new AudioContext();
+        const osc = ctx.createOscillator();
         const gain = ctx.createGain();
         osc.connect(gain);
         gain.connect(ctx.destination);
@@ -125,7 +168,9 @@ export default function AlertPanel({ open, onClose }: Props) {
         gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.4);
         osc.start();
         osc.stop(ctx.currentTime + 0.4);
-      } catch { /* AudioContext blocked */ }
+      } catch {
+        /* AudioContext blocked */
+      }
     }
     prevTriggeredCount.current = triggeredAlerts.length;
   }, [triggeredAlerts.length]);
@@ -139,14 +184,14 @@ export default function AlertPanel({ open, onClose }: Props) {
   async function handleCreate() {
     if (!newForm.itemKey.trim()) return;
     const created = await createAlert({
-      item_key:          normalizeItemKey(newForm),
+      item_key: normalizeItemKey(newForm),
       item_key_is_regex: newForm.itemKeyIsRegex,
-      combinator:        newForm.combinator.trim() || null,
-      signal_type:       newForm.signalType,
-      condition:         newForm.condition,
-      threshold:         parseInt(newForm.threshold, 10),
+      combinator: newForm.combinator.trim() || null,
+      signal_type: newForm.signalType,
+      condition: newForm.condition,
+      threshold: parseInt(newForm.threshold, 10),
     });
-    setAlerts(a => [created, ...a]);
+    setAlerts((a) => [created, ...a]);
     setNewForm(emptyForm());
     await refreshAlerts();
   }
@@ -154,21 +199,21 @@ export default function AlertPanel({ open, onClose }: Props) {
   async function handleEdit(id: string) {
     if (!editForm.itemKey.trim()) return;
     const updated = await updateAlert(id, {
-      item_key:          normalizeItemKey(editForm),
+      item_key: normalizeItemKey(editForm),
       item_key_is_regex: editForm.itemKeyIsRegex,
-      combinator:        editForm.combinator.trim() || null,
-      signal_type:       editForm.signalType,
-      condition:         editForm.condition,
-      threshold:         parseInt(editForm.threshold, 10),
+      combinator: editForm.combinator.trim() || null,
+      signal_type: editForm.signalType,
+      condition: editForm.condition,
+      threshold: parseInt(editForm.threshold, 10),
     });
-    setAlerts(a => a.map(x => x.id === id ? updated : x));
+    setAlerts((a) => a.map((x) => (x.id === id ? updated : x)));
     setEditingId(null);
     await refreshAlerts();
   }
 
   async function handleDelete(id: string) {
     await deleteAlert(id);
-    setAlerts(a => a.filter(x => x.id !== id));
+    setAlerts((a) => a.filter((x) => x.id !== id));
     await refreshAlerts();
   }
 
@@ -178,21 +223,33 @@ export default function AlertPanel({ open, onClose }: Props) {
   }
 
   return (
-    <div className={`fixed top-0 right-0 h-full w-80 bg-gray-900 border-l border-gray-700 shadow-xl z-40 transform transition-transform duration-200 ${open ? 'translate-x-0' : 'translate-x-full'}`}>
+    <div
+      className={`fixed top-0 right-0 h-full w-80 bg-gray-900 border-l border-gray-700 shadow-xl z-40 transform transition-transform duration-200 ${open ? 'translate-x-0' : 'translate-x-full'}`}
+    >
       <div className="flex items-center justify-between px-4 py-3 border-b border-gray-700">
         <span className="font-semibold text-white">Alerts</span>
-        <button onClick={onClose} className="text-gray-400 hover:text-white">✕</button>
+        <button
+          aria-label="Close alerts panel"
+          onClick={onClose}
+          className="text-gray-400 hover:text-white"
+        >
+          ✕
+        </button>
       </div>
 
       {triggeredAlerts.length > 0 && (
         <div className="px-4 py-2 bg-red-900/40 border-b border-red-800">
-          <p className="text-red-300 text-xs font-semibold mb-1">🔴 TRIGGERED ({triggeredAlerts.length})</p>
+          <p className="text-red-300 text-xs font-semibold mb-1">
+            🔴 TRIGGERED ({triggeredAlerts.length})
+          </p>
           {triggeredAlerts.map((a, i) => (
             <div key={i} className="text-xs text-red-200 flex items-center gap-1 flex-wrap">
               <span>{resolveName(a.matched_item_key, localeMap)}</span>
               <span className="text-red-400">({a.combinator_match})</span>
               <span>[{a.signal_type}]</span>
-              <span>= {a.current_value} {a.condition} {a.threshold}</span>
+              <span>
+                = {a.current_value} {a.condition} {a.threshold}
+              </span>
               {a.item_key_is_regex && a.matched_item_key !== a.item_key && (
                 <Tooltip text={`Matched by regex: /${a.item_key}/`} />
               )}
@@ -203,12 +260,17 @@ export default function AlertPanel({ open, onClose }: Props) {
 
       <div className="p-4 border-b border-gray-700 space-y-2">
         <p className="text-xs text-gray-400 font-semibold uppercase">New Alert</p>
-        <AlertForm value={newForm} onChange={setNewForm} onSubmit={handleCreate} submitLabel="Add Alert" />
+        <AlertForm
+          value={newForm}
+          onChange={setNewForm}
+          onSubmit={handleCreate}
+          submitLabel="Add Alert"
+        />
       </div>
 
       <div className="overflow-y-auto flex-1 p-4 space-y-2">
         {alerts.length === 0 && <p className="text-gray-500 text-sm">No alerts configured.</p>}
-        {alerts.map(a => (
+        {alerts.map((a) => (
           <div key={a.id} className="bg-gray-800 rounded p-2 text-xs text-gray-300">
             {editingId === a.id ? (
               <AlertForm
@@ -221,18 +283,32 @@ export default function AlertPanel({ open, onClose }: Props) {
             ) : (
               <div className="flex justify-between items-start">
                 <div>
-                  <span className="font-medium text-white">{resolveName(a.item_key, localeMap)}</span>
-                  {a.item_key_is_regex && (
-                    <Tooltip text={`Regex pattern: /${a.item_key}/`} />
-                  )}
+                  <span className="font-medium text-white">
+                    {resolveName(a.item_key, localeMap)}
+                  </span>
+                  {a.item_key_is_regex && <Tooltip text={`Regex pattern: /${a.item_key}/`} />}
                   {a.combinator && <span className="text-gray-400"> @ {a.combinator}</span>}
                   <br />
-                  <span className={a.signal_type === 'green' ? 'text-green-400' : 'text-red-400'}>[{a.signal_type}]</span>
-                  {' '}{a.condition} {a.threshold}
+                  <span className={a.signal_type === 'green' ? 'text-green-400' : 'text-red-400'}>
+                    [{a.signal_type}]
+                  </span>{' '}
+                  {a.condition} {a.threshold}
                 </div>
                 <div className="flex gap-1 ml-2 shrink-0">
-                  <button onClick={() => startEdit(a)} className="text-gray-500 hover:text-indigo-400">✏️</button>
-                  <button onClick={() => handleDelete(a.id)} className="text-gray-500 hover:text-red-400">✕</button>
+                  <button
+                    aria-label="Edit alert"
+                    onClick={() => startEdit(a)}
+                    className="text-gray-500 hover:text-indigo-400"
+                  >
+                    ✏️
+                  </button>
+                  <button
+                    aria-label="Delete alert"
+                    onClick={() => handleDelete(a.id)}
+                    className="text-gray-500 hover:text-red-400"
+                  >
+                    ✕
+                  </button>
                 </div>
               </div>
             )}

web/components/ChartCard/CardShell.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useRef, useState, useCallback } from 'react';
 
 interface HeaderProps {
-  title:    string;
-  onEdit:   () => void;
+  title: string;
+  onEdit: () => void;
   onDelete: () => void;
 }
 
@@ -11,8 +11,20 @@ export function Header({ title, onEdit, onDelete }: HeaderProps) {
     <div className="flex items-center justify-between px-3 py-1.5 border-b border-gray-700 shrink-0">
       <span className="text-sm font-medium text-gray-200 truncate">{title}</span>
       <div className="flex gap-1 ml-2 shrink-0">
-        <button onClick={onEdit}   className="text-xs text-gray-400 hover:text-white px-1.5 py-0.5 rounded hover:bg-gray-700">✏️</button>
-        <button onClick={onDelete} className="text-xs text-gray-400 hover:text-red-400 px-1.5 py-0.5 rounded hover:bg-gray-700">🗑</button>
+        <button
+          aria-label="Edit chart"
+          onClick={onEdit}
+          className="text-xs text-gray-400 hover:text-white px-1.5 py-0.5 rounded hover:bg-gray-700"
+        >
+          ✏️
+        </button>
+        <button
+          aria-label="Delete chart"
+          onClick={onDelete}
+          className="text-xs text-gray-400 hover:text-red-400 px-1.5 py-0.5 rounded hover:bg-gray-700"
+        >
+          🗑
+        </button>
       </div>
     </div>
   );
@@ -25,29 +37,79 @@ export function EmptyState() {
 }
 
 interface CardShellProps extends HeaderProps {
-  empty:              boolean;
-  children:           React.ReactNode;
+  empty: boolean;
+  children: React.ReactNode;
   /** Ref to the div where the uPlot legend will be mounted */
-  legendContainerRef?: React.RefObject<HTMLDivElement>;
+  legendContainerRef?: React.RefObject<HTMLDivElement | null>;
 }
 
-export function CardShell({ title, onEdit, onDelete, empty, children, legendContainerRef }: CardShellProps) {
+export function CardShell({
+  title,
+  onEdit,
+  onDelete,
+  empty,
+  children,
+  legendContainerRef,
+}: CardShellProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [legendHeight, setLegendHeight] = useState<number | null>(null);
+  const dragRef = useRef<{ startY: number; startH: number } | null>(null);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const el = legendContainerRef?.current;
+      if (!el) return;
+      dragRef.current = { startY: e.clientY, startH: el.offsetHeight };
+
+      function onMove(ev: MouseEvent) {
+        if (!dragRef.current) return;
+        const delta = dragRef.current.startY - ev.clientY;
+        const containerH = containerRef.current?.offsetHeight ?? 400;
+        const newH = Math.max(32, Math.min(containerH - 64, dragRef.current.startH + delta));
+        setLegendHeight(newH);
+      }
+      function onUp() {
+        dragRef.current = null;
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+      }
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+    },
+    [legendContainerRef],
+  );
+
   return (
-    <div className="h-full flex flex-col bg-gray-900 rounded border border-gray-700 overflow-hidden">
+    <div
+      ref={containerRef}
+      className="h-full flex flex-col bg-gray-900 rounded border border-gray-700 overflow-hidden"
+    >
       <Header title={title} onEdit={onEdit} onDelete={onDelete} />
       {empty ? (
         <EmptyState />
       ) : (
         <>
-          {/* Plot fills remaining space */}
-          <div className="flex-1 min-h-0">
-            {children}
-          </div>
-          {/* Legend scrolls independently, capped at 25% card height */}
-          <div
-            ref={legendContainerRef}
-            className="shrink-0 max-h-[25%] overflow-y-auto border-t border-gray-800 px-2 py-1 text-[10px] text-gray-400 [&_.u-legend]:w-full [&_.u-series]:flex [&_.u-series]:items-center [&_.u-series_th]:flex [&_.u-series_th]:items-center [&_.u-series_th]:gap-1 [&_.u-marker]:w-3 [&_.u-marker]:h-0.5 [&_.u-marker]:shrink-0 [&_.u-label]:truncate [&_.u-value]:ml-auto [&_.u-value]:font-mono [&_.u-value]:shrink-0"
-          />
+          <div className="flex-1 min-h-0">{children}</div>
+          {legendContainerRef && (
+            <>
+              <div
+                onMouseDown={handleMouseDown}
+                className="shrink-0 h-1.5 cursor-row-resize bg-gray-800 hover:bg-gray-700 active:bg-gray-600"
+              />
+              <div
+                ref={legendContainerRef}
+                className="shrink-0 overflow-y-auto px-2 py-1 text-[10px] text-gray-400 [&_.u-legend]:w-full [&_.u-series]:flex [&_.u-series]:items-center [&_.u-series_th]:flex [&_.u-series_th]:items-center [&_.u-series_th]:gap-1 [&_.u-marker]:w-3 [&_.u-marker]:h-0.5 [&_.u-marker]:shrink-0 [&_.u-label]:truncate [&_.u-value]:ml-auto [&_.u-value]:font-mono [&_.u-value]:shrink-0"
+                style={
+                  legendHeight != null
+                    ? { height: legendHeight, maxHeight: legendHeight }
+                    : { maxHeight: '25%' }
+                }
+              />
+              <style>{'.u-legend .u-series:first-child { display: none; }'}</style>
+            </>
+          )}
         </>
       )}
     </div>

web/components/ChartCard/DividerCard.tsx

@@ -1,17 +1,31 @@
 interface Props {
-  title:    string;
-  onEdit:   () => void;
+  title: string;
+  onEdit: () => void;
   onDelete: () => void;
 }
 
 export default function DividerCard({ title, onEdit, onDelete }: Props) {
   return (
     <div className="h-full flex items-center bg-gray-900/30 rounded border border-gray-600/40 px-4 gap-4 overflow-hidden">
-      <span className="text-sm font-bold text-gray-200 uppercase tracking-widest shrink-0">{title}</span>
+      <span className="text-sm font-bold text-gray-200 uppercase tracking-widest shrink-0">
+        {title}
+      </span>
       <div className="flex-1 h-px bg-gray-600" />
       <div className="flex gap-1 shrink-0">
-        <button onClick={onEdit}   className="text-xs text-gray-500 hover:text-white px-1.5 py-0.5 rounded hover:bg-gray-700">✏️</button>
-        <button onClick={onDelete} className="text-xs text-gray-500 hover:text-red-400 px-1.5 py-0.5 rounded hover:bg-gray-700">🗑</button>
+        <button
+          aria-label="Edit divider"
+          onClick={onEdit}
+          className="text-xs text-gray-500 hover:text-white px-1.5 py-0.5 rounded hover:bg-gray-700"
+        >
+          ✏️
+        </button>
+        <button
+          aria-label="Delete divider"
+          onClick={onDelete}
+          className="text-xs text-gray-500 hover:text-red-400 px-1.5 py-0.5 rounded hover:bg-gray-700"
+        >
+          🗑
+        </button>
       </div>
     </div>
   );

web/components/ChartCard/SignalsChart.tsx

@@ -1,28 +1,52 @@
 'use client';
 
 import 'uplot/dist/uPlot.min.css';
+import { useState, useEffect } from 'react';
 import uPlot from 'uplot';
-import { useApp } from '@/lib/context';
-import { resolveName } from '@/lib/localization';
+
 import { CardShell } from './CardShell';
-import { makeYScale, makeAnnotationHooks, makeSignalsSeries, makeSignalsAxes, CURSOR_NO_DRAG } from './plotHelpers';
+import {
+  makeYScale,
+  makeAnnotationHooks,
+  makeSignalsSeries,
+  makeSignalsAxes,
+  CURSOR_NO_DRAG,
+} from './plotHelpers';
 import { buildSeriesData } from './seriesData';
 import { usePlot } from './usePlot';
-import type { AlertConfig, ChartConfig, SessionBoundary, SignalRow } from '@/lib/types';
-import type { TimeMode } from '@/lib/types';
+
+import type { ColorMap } from '@/lib/colors';
+import type { AlertConfig, ChartConfig, SessionBoundary, SignalRow, TimeMode } from '@/lib/types';
+
+import { getColorMap } from '@/lib/colors';
+import { useApp } from '@/lib/context';
+import { resolveName } from '@/lib/localization';
 
 interface Props {
-  config:   ChartConfig;
-  rows:     SignalRow[];
+  config: ChartConfig;
+  rows: SignalRow[];
   sessions: SessionBoundary[];
-  alerts:   AlertConfig[];
+  alerts: AlertConfig[];
   timeMode: TimeMode;
-  onEdit:   () => void;
+  onEdit: () => void;
   onDelete: () => void;
 }
 
-export default function SignalsChart({ config, rows, sessions, alerts, timeMode, onEdit, onDelete }: Props) {
+export default function SignalsChart({
+  config,
+  rows,
+  sessions,
+  alerts,
+  timeMode,
+  onEdit,
+  onDelete,
+}: Props) {
   const { localeMap } = useApp();
+  const locale = typeof navigator !== 'undefined' ? navigator.language : 'de-DE';
+  const [colorMap, setColorMap] = useState<ColorMap>(new Map());
+  useEffect(() => {
+    getColorMap().then(setColorMap);
+  }, []);
 
   const { containerRef, legendRef } = usePlot(
     (el, w, h, lRef) => {
@@ -30,34 +54,56 @@ export default function SignalsChart({ config, rows, sessions, alerts, timeMode,
       if (!data) return null;
 
       const { keys, allXs, data: seriesData } = data;
-      const sessionXs       = sessions.map(s => timeMode === 'tick' ? s.game_tick : new Date(s.real_time).getTime() / 1000);
+      const sessionXs = sessions.map((s) =>
+        timeMode === 'tick' ? s.game_tick : new Date(s.real_time).getTime() / 1000,
+      );
       const alertThresholds = alerts
-        .filter(a => config.signal_type === 'both' || config.signal_type === a.signal_type)
-        .map(a => a.threshold);
+        .filter((a) => config.signal_type === 'both' || config.signal_type === a.signal_type)
+        .map((a) => a.threshold);
 
-      return new uPlot({
-        width:  w,
-        height: h,
-        cursor: CURSOR_NO_DRAG,
-        legend: {
-          mount: (_u, legendEl) => {
-            if (lRef.current) lRef.current.appendChild(legendEl);
+      return new uPlot(
+        {
+          width: w,
+          height: h,
+          cursor: CURSOR_NO_DRAG,
+          legend: {
+            mount: (_u, legendEl) => {
+              if (lRef.current) lRef.current.appendChild(legendEl);
+            },
           },
+          series: makeSignalsSeries(keys, timeMode, (key) => resolveName(key, localeMap), colorMap),
+          axes: makeSignalsAxes(timeMode, locale),
+          scales: {
+            x: { time: false },
+            y: makeYScale(config.y_min ?? null, config.y_max ?? null, config.y_scale),
+          },
+          hooks: makeAnnotationHooks(sessionXs, alertThresholds),
         },
-        series: makeSignalsSeries(keys, timeMode, key => resolveName(key, localeMap)),
-        axes:   makeSignalsAxes(timeMode),
-        scales: {
-          x: { time: false },
-          y: makeYScale(config.y_min ?? null, config.y_max ?? null, config.y_scale),
-        },
-        hooks: makeAnnotationHooks(sessionXs, alertThresholds),
-      }, [allXs, ...seriesData], el);
+        [allXs, ...seriesData],
+        el,
+      );
     },
-    [rows, sessions, alerts, config, timeMode, localeMap],
+    [
+      rows,
+      sessions,
+      alerts,
+      config.signal_type,
+      config.y_min,
+      config.y_max,
+      config.y_scale,
+      timeMode,
+      localeMap,
+    ],
   );
 
   return (
-    <CardShell title={config.title} onEdit={onEdit} onDelete={onDelete} empty={rows.length === 0} legendContainerRef={legendRef}>
+    <CardShell
+      title={config.title}
+      onEdit={onEdit}
+      onDelete={onDelete}
+      empty={rows.length === 0}
+      legendContainerRef={legendRef}
+    >
       <div ref={containerRef as React.RefObject<HTMLDivElement>} className="w-full h-full" />
     </CardShell>
   );

web/components/ChartCard/TableViz.tsx

@@ -1,23 +1,34 @@
-import { useApp } from '@/lib/context';
-import { resolveName } from '@/lib/localization';
+import { useState, useEffect } from 'react';
+
 import { CardShell } from './CardShell';
+
+import type { ColorMap } from '@/lib/colors';
 import type { ChartConfig, SignalRow } from '@/lib/types';
 
+import { getColorMap, getItemColor } from '@/lib/colors';
+import { useApp } from '@/lib/context';
+import { formatSI } from '@/lib/formatNumber';
+import { resolveName } from '@/lib/localization';
+
 interface Props {
-  config:   ChartConfig;
-  rows:     SignalRow[];
-  onEdit:   () => void;
+  config: ChartConfig;
+  rows: SignalRow[];
+  onEdit: () => void;
   onDelete: () => void;
 }
 
 export default function TableViz({ config, rows, onEdit, onDelete }: Props) {
   const { localeMap } = useApp();
+  const [colorMap, setColorMap] = useState<ColorMap>(new Map());
+  useEffect(() => {
+    getColorMap().then(setColorMap);
+  }, []);
 
   const latest = new Map<string, { green?: number; red?: number }>();
   for (const row of rows) {
     latest.set(`${row.combinator}::${row.item_key}`, { green: row.green, red: row.red });
   }
-  const tableRows = [...latest.entries()].sort((a, b) => (a[1].green ?? 0) - (b[1].green ?? 0));
+  const tableRows = [...latest.entries()].slice(0, config.series_limit);
 
   return (
     <CardShell title={config.title} onEdit={onEdit} onDelete={onDelete} empty={rows.length === 0}>
@@ -27,8 +38,12 @@ export default function TableViz({ config, rows, onEdit, onDelete }: Props) {
             <tr>
               <th className="text-left px-2 py-1">Item</th>
               <th className="text-left px-2 py-1">Combinator</th>
-              {config.signal_type !== 'red'   && <th className="text-right px-2 py-1 text-green-400">Green</th>}
-              {config.signal_type !== 'green' && <th className="text-right px-2 py-1 text-red-400">Red (NP)</th>}
+              {config.signal_type !== 'red' && (
+                <th className="text-right px-2 py-1 text-green-400">Green</th>
+              )}
+              {config.signal_type !== 'green' && (
+                <th className="text-right px-2 py-1 text-red-400">Red (NP)</th>
+              )}
             </tr>
           </thead>
           <tbody>
@@ -36,16 +51,24 @@ export default function TableViz({ config, rows, onEdit, onDelete }: Props) {
               const [combinator, item_key] = key.split('::');
               return (
                 <tr key={key} className="border-t border-gray-800 hover:bg-gray-800/50">
-                  <td className="px-2 py-0.5">{resolveName(item_key, localeMap)}</td>
+                  <td className="px-2 py-0.5 flex items-center gap-1.5">
+                    <span
+                      className="inline-block w-2 h-2 rounded-full shrink-0"
+                      style={{ backgroundColor: getItemColor(item_key, colorMap) }}
+                    />
+                    {resolveName(item_key, localeMap)}
+                  </td>
                   <td className="px-2 py-0.5 text-gray-500">{combinator}</td>
                   {config.signal_type !== 'red' && (
-                    <td className={`px-2 py-0.5 text-right font-mono ${(vals.green ?? 0) < 0 ? 'text-red-400' : 'text-green-400'}`}>
-                      {vals.green?.toLocaleString() ?? '--'}
+                    <td
+                      className={`px-2 py-0.5 text-right font-mono ${(vals.green ?? 0) < 0 ? 'text-red-400' : 'text-green-400'}`}
+                    >
+                      {vals.green != null ? formatSI(vals.green, undefined, 0) : '--'}
                     </td>
                   )}
                   {config.signal_type !== 'green' && (
                     <td className="px-2 py-0.5 text-right font-mono text-orange-400">
-                      {vals.red?.toLocaleString() ?? '--'}
+                      {vals.red != null ? formatSI(vals.red, undefined, 0) : '--'}
                     </td>
                   )}
                 </tr>

web/components/ChartCard/UpsChart.tsx

@@ -2,17 +2,20 @@
 
 import 'uplot/dist/uPlot.min.css';
 import uPlot from 'uplot';
+
 import { CardShell } from './CardShell';
 import { AXIS_BASE, CURSOR_NO_DRAG, makeYScale } from './plotHelpers';
 import { usePlot } from './usePlot';
-import type { ChartConfig, UpsRow } from '@/lib/types';
-import type { TimeMode } from '@/lib/types';
+
+import type { ChartConfig, UpsRow, TimeMode } from '@/lib/types';
+
+import { formatSI } from '@/lib/formatNumber';
 
 interface Props {
-  config:   ChartConfig;
-  upsRows:  UpsRow[];
+  config: ChartConfig;
+  upsRows: UpsRow[];
   timeMode: TimeMode;
-  onEdit:   () => void;
+  onEdit: () => void;
   onDelete: () => void;
 }
 
@@ -26,41 +29,58 @@ export default function UpsChart({ config, upsRows, timeMode, onEdit, onDelete }
           ? a.game_tick - b.game_tick
           : new Date(a.real_time).getTime() - new Date(b.real_time).getTime(),
       );
-      const xs = sorted.map(r => timeMode === 'tick' ? r.game_tick : new Date(r.real_time).getTime() / 1000);
-      const ys = sorted.map(r => r.ups);
+      const xs = sorted.map((r) =>
+        timeMode === 'tick' ? r.game_tick : new Date(r.real_time).getTime() / 1000,
+      );
+      const ys = sorted.map((r) => r.ups);
 
       const xAxis: uPlot.Axis = {
         ...AXIS_BASE,
-        ...(timeMode === 'real' && {
-          values: (_u, vals) => vals.map(v => v == null ? '' : new Date(v * 1000).toLocaleTimeString()),
-        }),
+        values:
+          timeMode === 'real'
+            ? (_u, vals) =>
+                vals.map((v) => (v == null ? '' : new Date(v * 1000).toLocaleTimeString()))
+            : (_u, vals) => vals.map((v) => (v == null ? '' : formatSI(v))),
       };
 
-      return new uPlot({
-        width:  w,
-        height: h,
-        cursor: CURSOR_NO_DRAG,
-        legend: {
-          mount: (_u, legendEl) => {
-            if (lRef.current) lRef.current.appendChild(legendEl);
+      return new uPlot(
+        {
+          width: w,
+          height: h,
+          cursor: CURSOR_NO_DRAG,
+          legend: {
+            mount: (_u, legendEl) => {
+              if (lRef.current) lRef.current.appendChild(legendEl);
+            },
+          },
+          series: [
+            { label: timeMode === 'tick' ? 'Tick' : 'Time' },
+            { label: 'UPS', stroke: '#4ade80', width: 1.5 },
+          ],
+          axes: [
+            xAxis,
+            { ...AXIS_BASE, values: (_u, vals) => vals.map((v) => (v == null ? '' : formatSI(v))) },
+          ],
+          scales: {
+            x: { time: false },
+            y: makeYScale(config.y_min ?? null, config.y_max ?? null, config.y_scale),
           },
         },
-        series: [
-          { label: timeMode === 'tick' ? 'Tick' : 'Time' },
-          { label: 'UPS', stroke: '#4ade80', width: 1.5 },
-        ],
-        axes:   [xAxis, { ...AXIS_BASE }],
-        scales: {
-          x: { time: false },
-          y: makeYScale(config.y_min ?? null, config.y_max ?? null, config.y_scale),
-        },
-      }, [xs, ys], el);
+        [xs, ys],
+        el,
+      );
     },
     [upsRows, config.y_min, config.y_max, config.y_scale, timeMode],
   );
 
   return (
-    <CardShell title={config.title} onEdit={onEdit} onDelete={onDelete} empty={upsRows.length === 0} legendContainerRef={legendRef}>
+    <CardShell
+      title={config.title}
+      onEdit={onEdit}
+      onDelete={onDelete}
+      empty={upsRows.length === 0}
+      legendContainerRef={legendRef}
+    >
       <div ref={containerRef as React.RefObject<HTMLDivElement>} className="w-full h-full" />
     </CardShell>
   );

web/components/ChartCard/index.tsx

@@ -1,25 +1,41 @@
-import type { AlertConfig, ChartConfig, SessionBoundary, SignalRow, UpsRow } from '@/lib/types';
-import type { TimeMode } from '@/lib/types';
-import UpsChart from './UpsChart';
+import DividerCard from './DividerCard';
 import SignalsChart from './SignalsChart';
 import TableViz from './TableViz';
-import DividerCard from './DividerCard';
+import UpsChart from './UpsChart';
+
+import type {
+  AlertConfig,
+  ChartConfig,
+  SessionBoundary,
+  SignalRow,
+  UpsRow,
+  TimeMode,
+} from '@/lib/types';
 
 export interface ChartCardProps {
-  config:   ChartConfig;
-  rows:     SignalRow[];
-  upsRows:  UpsRow[];
+  config: ChartConfig;
+  rows: SignalRow[];
+  upsRows: UpsRow[];
   sessions: SessionBoundary[];
-  alerts:   AlertConfig[];
+  alerts: AlertConfig[];
   timeMode: TimeMode;
-  onEdit:   () => void;
+  onEdit: () => void;
   onDelete: () => void;
 }
 
 export default function ChartCard(props: ChartCardProps) {
   const { config } = props;
-  if (config.chart_type === 'divider') return <DividerCard title={config.title} onEdit={props.onEdit} onDelete={props.onDelete} />;
-  if (config.chart_type === 'ups')     return <UpsChart     {...props} />;
-  if (config.viz_type   === 'table')   return <TableViz     config={props.config} rows={props.rows} onEdit={props.onEdit} onDelete={props.onDelete} />;
-  return                                      <SignalsChart  {...props} />;
+  if (config.chart_type === 'divider')
+    return <DividerCard title={config.title} onEdit={props.onEdit} onDelete={props.onDelete} />;
+  if (config.chart_type === 'ups') return <UpsChart {...props} />;
+  if (config.viz_type === 'table')
+    return (
+      <TableViz
+        config={props.config}
+        rows={props.rows}
+        onEdit={props.onEdit}
+        onDelete={props.onDelete}
+      />
+    );
+  return <SignalsChart {...props} />;
 }

web/components/ChartCard/plotHelpers.ts

@@ -1,32 +1,24 @@
-import uPlot from 'uplot';
+import type { ColorMap } from '@/lib/colors';
 import type { ChartConfig } from '@/lib/types';
+import type uPlot from 'uplot';
 
-// --- Color helpers ---
-
-function djb2(s: string): number {
-  let h = 5381;
-  for (let i = 0; i < s.length; i++) h = (h * 33) ^ s.charCodeAt(i);
-  return h >>> 0;
-}
-
-function hslColor(key: string): string {
-  const hue = djb2(key) % 360;
-  return `hsl(${hue},70%,60%)`;
-}
+import { getItemColor } from '@/lib/colors';
+import { formatSI } from '@/lib/formatNumber';
 
 const SEMANTIC_GREEN = '#4ade80';
-const SEMANTIC_RED   = '#f87171';
+const SEMANTIC_RED = '#f87171';
 
 export interface SeriesStyle {
   color: string;
-  dash:  number[] | undefined;
+  dash: number[] | undefined;
 }
 
 export function getSeriesStyle(
-  key:    string,
+  key: string,
   uCombs: number,
   uItems: number,
-  uSigs:  number,
+  uSigs: number,
+  colorMap: ColorMap = new Map(),
 ): SeriesStyle {
   const [combinator, item_key, sig] = key.split('::');
 
@@ -34,9 +26,15 @@ export function getSeriesStyle(
     return { color: sig === 'green' ? SEMANTIC_GREEN : SEMANTIC_RED, dash: undefined };
   }
   if (uItems > 1) {
-    return { color: hslColor(item_key), dash: uSigs > 1 && sig === 'red' ? [4, 2] : undefined };
+    return {
+      color: getItemColor(item_key, colorMap),
+      dash: uSigs > 1 && sig === 'red' ? [4, 2] : undefined,
+    };
   }
-  return { color: hslColor(combinator), dash: uSigs > 1 && sig === 'red' ? [4, 2] : undefined };
+  return {
+    color: getItemColor(combinator, colorMap),
+    dash: uSigs > 1 && sig === 'red' ? [4, 2] : undefined,
+  };
 }
 
 /**
@@ -44,10 +42,10 @@ export function getSeriesStyle(
  * @param displayName Pre-resolved localized name for the item.
  */
 export function getSeriesLabel(
-  key:         string,
-  uCombs:      number,
-  uItems:      number,
-  uSigs:       number,
+  key: string,
+  uCombs: number,
+  uItems: number,
+  uSigs: number,
   displayName: string,
 ): string {
   const [combinator, , sig] = key.split('::');
@@ -55,7 +53,7 @@ export function getSeriesLabel(
   const parts: string[] = [];
   if (uItems > 1) parts.push(displayName);
   if (uCombs > 1) parts.push(`(${combinator})`);
-  if (uSigs  > 1) parts.push(`[${sig}]`);
+  if (uSigs > 1) parts.push(`[${sig}]`);
   return parts.join(' ');
 }
 
@@ -63,8 +61,8 @@ export function getSeriesLabel(
 
 export const AXIS_BASE: uPlot.Axis = {
   stroke: '#9ca3af',
-  ticks:  { stroke: '#374151' },
-  grid:   { stroke: '#1f2937' },
+  ticks: { stroke: '#374151' },
+  grid: { stroke: '#1f2937' },
 };
 
 export const CURSOR_NO_DRAG: uPlot.Cursor = {
@@ -76,17 +74,19 @@ export const CURSOR_NO_DRAG: uPlot.Cursor = {
  * 'log' uses arcsinh distribution (distr:4) — handles negatives, zero, positives.
  */
 export function makeYScale(
-  yMin:   number | null,
-  yMax:   number | null,
+  yMin: number | null,
+  yMax: number | null,
   yScale: ChartConfig['y_scale'] = 'linear',
 ): uPlot.Scale {
   if (yScale === 'log') {
     return {
       distr: 4,
       asinh: 1,
-      ...(yMin !== null || yMax !== null ? {
-        range: (_u, dataMin, dataMax) => [yMin ?? dataMin, yMax ?? dataMax],
-      } : {}),
+      ...(yMin !== null || yMax !== null
+        ? {
+            range: (_u, dataMin, dataMax) => [yMin ?? dataMin, yMax ?? dataMax],
+          }
+        : {}),
     };
   }
 
@@ -94,52 +94,61 @@ export function makeYScale(
   return {
     dir: 1,
     range: (_u, dataMin, dataMax) => {
-      const lo  = yMin ?? (dataMin ?? 0);
-      const hi  = yMax ?? (dataMax ?? 1);
+      const lo = yMin ?? dataMin ?? 0;
+      const hi = yMax ?? dataMax ?? 1;
       if (lo === hi) return [lo - 1, hi + 1];
-      const pad = (yMin == null || yMax == null) ? Math.abs(hi - lo) * 0.05 : 0;
+      const pad = yMin == null || yMax == null ? Math.abs(hi - lo) * 0.05 : 0;
       return [lo - pad, hi + pad];
     },
   };
 }
 
 export function makeAnnotationHooks(
-  sessionXs:       number[],
+  sessionXs: number[],
   alertThresholds: number[],
 ): uPlot.Options['hooks'] {
   return {
-    draw: [(u) => {
-      const { ctx, bbox } = u;
-      ctx.save();
+    draw: [
+      (u) => {
+        const { ctx, bbox } = u;
+        ctx.save();
 
-      ctx.strokeStyle = 'rgba(251,191,36,0.6)';
-      ctx.lineWidth = 1;
-      ctx.setLineDash([4, 4]);
-      for (const sx of sessionXs) {
-        const cx = Math.round(u.valToPos(sx, 'x', true));
-        ctx.beginPath(); ctx.moveTo(cx, bbox.top); ctx.lineTo(cx, bbox.top + bbox.height); ctx.stroke();
-      }
+        ctx.strokeStyle = 'rgba(251,191,36,0.6)';
+        ctx.lineWidth = 1;
+        ctx.setLineDash([4, 4]);
+        for (const sx of sessionXs) {
+          const cx = Math.round(u.valToPos(sx, 'x', true));
+          ctx.beginPath();
+          ctx.moveTo(cx, bbox.top);
+          ctx.lineTo(cx, bbox.top + bbox.height);
+          ctx.stroke();
+        }
 
-      ctx.strokeStyle = 'rgba(248,113,113,0.7)';
-      ctx.setLineDash([6, 3]);
-      for (const t of alertThresholds) {
-        const cy = Math.round(u.valToPos(t, 'y', true));
-        ctx.beginPath(); ctx.moveTo(bbox.left, cy); ctx.lineTo(bbox.left + bbox.width, cy); ctx.stroke();
-      }
+        ctx.strokeStyle = 'rgba(248,113,113,0.7)';
+        ctx.setLineDash([6, 3]);
+        for (const t of alertThresholds) {
+          const cy = Math.round(u.valToPos(t, 'y', true));
+          ctx.beginPath();
+          ctx.moveTo(bbox.left, cy);
+          ctx.lineTo(bbox.left + bbox.width, cy);
+          ctx.stroke();
+        }
 
-      ctx.restore();
-    }],
+        ctx.restore();
+      },
+    ],
   };
 }
 
 export function makeSignalsSeries(
-  keys:        string[],
-  timeMode:    'real' | 'tick',
+  keys: string[],
+  timeMode: 'real' | 'tick',
   resolveName: (key: string) => string,
+  colorMap: ColorMap = new Map(),
 ): uPlot.Series[] {
-  const uCombs = new Set(keys.map(k => k.split('::')[0])).size;
-  const uItems = new Set(keys.map(k => k.split('::')[1])).size;
-  const uSigs  = new Set(keys.map(k => k.split('::')[2])).size;
+  const uCombs = new Set(keys.map((k) => k.split('::')[0])).size;
+  const uItems = new Set(keys.map((k) => k.split('::')[1])).size;
+  const uSigs = new Set(keys.map((k) => k.split('::')[2])).size;
 
   const xSeries: uPlot.Series = {
     label: timeMode === 'tick' ? 'Tick' : 'Time',
@@ -151,28 +160,34 @@ export function makeSignalsSeries(
 
   return [
     xSeries,
-    ...keys.map(k => {
+    ...keys.map((k) => {
       const [, item_key] = k.split('::');
-      const { color, dash } = getSeriesStyle(k, uCombs, uItems, uSigs);
+      const { color, dash } = getSeriesStyle(k, uCombs, uItems, uSigs, colorMap);
       return {
-        label:  getSeriesLabel(k, uCombs, uItems, uSigs, resolveName(item_key)),
+        label: getSeriesLabel(k, uCombs, uItems, uSigs, resolveName(item_key)),
         stroke: color,
-        width:  1.5,
+        width: 1.5,
         dash,
       };
     }),
   ];
 }
 
-export function makeSignalsAxes(timeMode: 'real' | 'tick'): uPlot.Axis[] {
+export function makeSignalsAxes(timeMode: 'real' | 'tick', locale?: string): uPlot.Axis[] {
   return [
     {
       ...AXIS_BASE,
-      ...(timeMode === 'real' && {
-        values: (_u: uPlot, vals: (number | null)[]) =>
-          vals.map(v => v == null ? '' : new Date(v * 1000).toLocaleTimeString()),
-      }),
+      values:
+        timeMode === 'real'
+          ? (_u: uPlot, vals: (number | null)[]) =>
+              vals.map((v) => (v == null ? '' : new Date(v * 1000).toLocaleTimeString()))
+          : (_u: uPlot, vals: (number | null)[]) =>
+              vals.map((v) => (v == null ? '' : formatSI(v, locale))),
+    },
+    {
+      ...AXIS_BASE,
+      values: (_u: uPlot, vals: (number | null)[]) =>
+        vals.map((v) => (v == null ? '' : formatSI(v, locale))),
     },
-    { ...AXIS_BASE },
   ];
 }

web/components/ChartCard/seriesData.ts

@@ -1,42 +1,52 @@
-import type { SignalRow, ChartConfig } from '@/lib/types';
-import type { TimeMode } from '@/lib/types';
+import type { SignalRow, ChartConfig, TimeMode } from '@/lib/types';
 
 const MAX_SERIES = 80;
 
 export interface SeriesData {
-  keys:  string[];
+  keys: string[];
   allXs: number[];
-  data:  (number | undefined)[][];
+  data: (number | undefined)[][];
 }
 
 export function buildSeriesData(
-  rows:       SignalRow[],
+  rows: SignalRow[],
   signalType: ChartConfig['signal_type'],
-  timeMode:   TimeMode,
+  timeMode: TimeMode,
 ): SeriesData | null {
   const seriesMap = new Map<string, Map<number, number>>();
 
   for (const row of rows) {
-    for (const [sig, val] of [['green', row.green], ['red', row.red]] as ['green' | 'red', number | undefined][]) {
+    for (const [sig, val] of [
+      ['green', row.green],
+      ['red', row.red],
+    ] as ['green' | 'red', number | undefined][]) {
       if (signalType !== 'both' && signalType !== sig) continue;
       if (val === undefined) continue;
       const key = `${row.combinator}::${row.item_key}::${sig}`;
-      const x = timeMode === 'tick'
-        ? parseInt(row.game_tick, 10)
-        : new Date(row.real_time).getTime() / 1000;
+      const x =
+        timeMode === 'tick'
+          ? parseInt(row.game_tick, 10)
+          : new Date(row.real_time).getTime() / 1000;
       if (!seriesMap.has(key)) seriesMap.set(key, new Map());
-      seriesMap.get(key)!.set(x, val);
+      seriesMap.get(key)?.set(x, val);
     }
   }
 
   if (seriesMap.size === 0) return null;
 
-  const keys  = [...seriesMap.keys()].slice(0, MAX_SERIES);
-  const allXs = [...new Set(keys.flatMap(k => [...seriesMap.get(k)!.keys()]))].sort((a, b) => a - b);
+  const keys = [...seriesMap.keys()].slice(0, MAX_SERIES);
+  const allXs = [
+    ...new Set(
+      keys.flatMap((k) => {
+        const m = seriesMap.get(k);
+        return m ? [...m.keys()] : [];
+      }),
+    ),
+  ].sort((a, b) => a - b);
 
-  const data = keys.map(k => {
-    const m = seriesMap.get(k)!;
-    return allXs.map(x => m.get(x)); // undefined = gap
+  const data = keys.map((k) => {
+    const m = seriesMap.get(k);
+    return m ? allXs.map((x) => m.get(x)) : []; // undefined = gap
   });
 
   return { keys, allXs, data };

web/components/ChartCard/usePlot.ts

@@ -1,11 +1,12 @@
-import { useCallback, useEffect, useRef } from 'react';
-import uPlot from 'uplot';
+import { useCallback, useEffect, useRef, type DependencyList } from 'react';
+
+import type uPlot from 'uplot';
 
 export type BuildFn = (
-  el:        HTMLDivElement,
-  w:         number,
-  h:         number,
-  legendRef: React.RefObject<HTMLDivElement>,
+  el: HTMLDivElement,
+  w: number,
+  h: number,
+  legendRef: React.RefObject<HTMLDivElement | null>,
 ) => uPlot | null;
 
 /** Converts a data index to the pixel x position uPlot expects for setCursor */
@@ -24,18 +25,21 @@ function idxToPixel(plot: uPlot, idx: number): number {
  */
 export function usePlot(
   build: BuildFn,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  deps:  any[],
-): { containerRef: React.RefObject<HTMLDivElement | null>; legendRef: React.RefObject<HTMLDivElement> } {
+  deps: DependencyList,
+): {
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  legendRef: React.RefObject<HTMLDivElement | null>;
+} {
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const legendRef    = useRef<HTMLDivElement>(null!);
-  const plotRef      = useRef<uPlot | null>(null);
-  const lastIdxRef   = useRef<number>(0);
+  const legendRef = useRef<HTMLDivElement>(null);
+  const plotRef = useRef<uPlot | null>(null);
+  const lastIdxRef = useRef<number>(0);
 
   const rebuild = useCallback(() => {
     const el = containerRef.current;
     if (!el) return;
-    const w = el.clientWidth, h = el.clientHeight;
+    const w = el.clientWidth,
+      h = el.clientHeight;
     if (w < 10 || h < 10) return;
 
     plotRef.current?.destroy();
@@ -53,19 +57,23 @@ export function usePlot(
 
       // Defer mouseleave — prevents React hydration events firing before lastIdxRef set
       requestAnimationFrame(() => {
-        plot.over.addEventListener('mouseleave', () => {
+        plot.over.onmouseleave = () => {
           const p = plotRef.current;
           if (!p) return;
           p.setCursor({ left: idxToPixel(p, lastIdxRef.current), top: -10 });
-        });
+        };
       });
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // deps is intentionally dynamic — passed by parent to allow external rebuild triggers
+    // eslint-disable-next-line react-x/exhaustive-deps
   }, deps);
 
   useEffect(() => {
     rebuild();
-    return () => { plotRef.current?.destroy(); plotRef.current = null; };
+    return () => {
+      plotRef.current?.destroy();
+      plotRef.current = null;
+    };
   }, [rebuild]);
 
   useEffect(() => {

web/components/ChartEditor.tsx

@@ -1,15 +1,17 @@
 'use client';
 
 import { useState } from 'react';
+
+import type { ChartConfig } from '@/lib/types';
+
 import { useApp } from '@/lib/context';
 import { resolveKey } from '@/lib/localization';
-import type { ChartConfig } from '@/lib/types';
 
 type DraftChart = Omit<ChartConfig, 'id'>;
 
 interface Props {
   initial?: ChartConfig;
-  onSave:  (draft: DraftChart) => void;
+  onSave: (draft: DraftChart) => void;
   onClose: () => void;
 }
 
@@ -21,32 +23,42 @@ const inputCls =
  * to raw item_keys. Unknown tokens are kept as-is.
  */
 function normalizeList(raw: string, reverseMap: Map<string, string>): string[] | null {
-  const arr = raw.split(',').map(x => x.trim()).filter(Boolean);
+  const arr = raw
+    .split(',')
+    .map((x) => x.trim())
+    .filter(Boolean);
   if (arr.length === 0) return null;
-  return arr.map(t => resolveKey(t, reverseMap));
+  return arr.map((t) => resolveKey(t, reverseMap));
 }
 
 export default function ChartEditor({ initial, onSave, onClose }: Props) {
   const { reverseMap } = useApp();
 
-  const [title,       setTitle]       = useState(initial?.title ?? '');
-  const [chartType,   setChartType]   = useState<ChartConfig['chart_type']>(initial?.chart_type ?? 'signals');
-  const [vizType,     setVizType]     = useState<ChartConfig['viz_type']>(initial?.viz_type ?? 'line');
-  const [signalType,  setSignalType]  = useState<ChartConfig['signal_type']>(initial?.signal_type ?? 'both');
+  const [title, setTitle] = useState(initial?.title ?? '');
+  const [chartType, setChartType] = useState<ChartConfig['chart_type']>(
+    initial?.chart_type ?? 'signals',
+  );
+  const [vizType, setVizType] = useState<ChartConfig['viz_type']>(initial?.viz_type ?? 'line');
+  const [signalType, setSignalType] = useState<ChartConfig['signal_type']>(
+    initial?.signal_type ?? 'both',
+  );
   const [combinators, setCombinators] = useState((initial?.filter_combinators ?? []).join(', '));
-  const [whitelist,   setWhitelist]   = useState((initial?.filter_items ?? []).join(', '));
-  const [blacklist,   setBlacklist]   = useState((initial?.filter_items_exclude ?? []).join(', '));
-  const [useRegex,    setUseRegex]    = useState(initial?.filter_items_regex ?? false);
-  const [orderBy,     setOrderBy]     = useState<ChartConfig['order_by']>(initial?.order_by ?? 'time');
+  const [whitelist, setWhitelist] = useState((initial?.filter_items ?? []).join(', '));
+  const [blacklist, setBlacklist] = useState((initial?.filter_items_exclude ?? []).join(', '));
+  const [useRegex, setUseRegex] = useState(initial?.filter_items_regex ?? false);
+  const [orderBy, setOrderBy] = useState<ChartConfig['order_by']>(initial?.order_by ?? 'value_asc');
   const [seriesLimit, setSeriesLimit] = useState(initial?.series_limit ?? 20);
-  const [yMin,        setYMin]        = useState(initial?.y_min?.toString() ?? '');
-  const [yMax,        setYMax]        = useState(initial?.y_max?.toString() ?? '');
-  const [yScale,      setYScale]      = useState<ChartConfig['y_scale']>(initial?.y_scale ?? 'linear');
-  const [width,       setWidth]       = useState(initial?.width  ?? 2);
-  const [height,      setHeight]      = useState(initial?.height ?? 4);
+  const [yMin, setYMin] = useState(initial?.y_min?.toString() ?? '');
+  const [yMax, setYMax] = useState(initial?.y_max?.toString() ?? '');
+  const [yScale, setYScale] = useState<ChartConfig['y_scale']>(initial?.y_scale ?? 'linear');
+  const [width, setWidth] = useState(initial?.width ?? 2);
+  const [height, setHeight] = useState(initial?.height ?? 4);
 
   function splitCombinators(): string[] | null {
-    const arr = combinators.split(',').map(x => x.trim()).filter(Boolean);
+    const arr = combinators
+      .split(',')
+      .map((x) => x.trim())
+      .filter(Boolean);
     return arr.length > 0 ? arr : null;
   }
 
@@ -55,30 +67,35 @@ export default function ChartEditor({ initial, onSave, onClose }: Props) {
 
     // Regex mode: store pattern exactly as typed — server expands via matchKeys at query time.
     // Non-regex mode: resolve each comma-token (localized name or raw key) to raw key.
-    const filter_items         = useRegex
-      ? (whitelist.trim() ? [whitelist.trim()] : null)
+    const filter_items = useRegex
+      ? whitelist.trim()
+        ? [whitelist.trim()]
+        : null
       : normalizeList(whitelist, reverseMap);
     const filter_items_exclude = useRegex
-      ? (blacklist.trim() ? [blacklist.trim()] : null)
+      ? blacklist.trim()
+        ? [blacklist.trim()]
+        : null
       : normalizeList(blacklist, reverseMap);
 
     onSave({
-      title:                title.trim(),
-      chart_type:           chartType,
-      viz_type:             chartType === 'divider' ? 'line' : vizType,
-      signal_type:          signalType,
-      pos_x:                initial?.pos_x ?? 0,
-      pos_y:                initial?.pos_y ?? 0,
-      width, height,
-      filter_combinators:   chartType === 'divider' ? null : splitCombinators(),
-      filter_items:         chartType === 'divider' ? null : filter_items,
+      title: title.trim(),
+      chart_type: chartType,
+      viz_type: chartType === 'divider' ? 'line' : vizType,
+      signal_type: signalType,
+      pos_x: initial?.pos_x ?? 0,
+      pos_y: initial?.pos_y ?? 0,
+      width,
+      height,
+      filter_combinators: chartType === 'divider' ? null : splitCombinators(),
+      filter_items: chartType === 'divider' ? null : filter_items,
       filter_items_exclude: chartType === 'divider' ? null : filter_items_exclude,
-      filter_items_regex:   useRegex,
-      order_by:             orderBy,
-      series_limit:         seriesLimit,
-      y_min:                yMin !== '' ? parseFloat(yMin) : null,
-      y_max:                yMax !== '' ? parseFloat(yMax) : null,
-      y_scale:              yScale,
+      filter_items_regex: useRegex,
+      order_by: orderBy,
+      series_limit: seriesLimit,
+      y_min: yMin !== '' ? parseFloat(yMin) : null,
+      y_max: yMax !== '' ? parseFloat(yMax) : null,
+      y_scale: yScale,
     });
   }
 
@@ -86,114 +103,203 @@ export default function ChartEditor({ initial, onSave, onClose }: Props) {
   const isDivider = chartType === 'divider';
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60" onClick={onClose}>
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+      onClick={onClose}
+    >
       <div
         className="bg-gray-900 border border-gray-700 rounded-lg p-6 w-full max-w-md shadow-xl overflow-y-auto max-h-[90vh]"
-        onClick={e => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
       >
         <h2 className="text-lg font-semibold text-white mb-4">
           {initial ? 'Edit Chart' : 'New Chart'}
         </h2>
 
         <label className="block text-sm text-gray-400 mb-1">Title</label>
-        <input value={title} onChange={e => setTitle(e.target.value)} className={`${inputCls} mb-3`} />
+        <input
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          className={`${inputCls} mb-3`}
+        />
 
         <label className="block text-sm text-gray-400 mb-1">Chart Type</label>
-        <select value={chartType} onChange={e => setChartType(e.target.value as ChartConfig['chart_type'])} className={`${inputCls} mb-3`}>
+        <select
+          value={chartType}
+          onChange={(e) => setChartType(e.target.value as ChartConfig['chart_type'])}
+          className={`${inputCls} mb-3`}
+        >
           <option value="signals">Signals</option>
           <option value="ups">UPS / Game Tick Rate</option>
           <option value="divider">Divider / Section Label</option>
         </select>
 
-        {!isDivider && <>
-          <label className="block text-sm text-gray-400 mb-1">Visualization</label>
-          <select value={vizType} onChange={e => setVizType(e.target.value as ChartConfig['viz_type'])} className={`${inputCls} mb-3`}>
-            <option value="line">Line Chart</option>
-            <option value="table">Table</option>
-          </select>
-        </>}
+        {!isDivider && (
+          <>
+            <label className="block text-sm text-gray-400 mb-1">Visualization</label>
+            <select
+              value={vizType}
+              onChange={(e) => setVizType(e.target.value as ChartConfig['viz_type'])}
+              className={`${inputCls} mb-3`}
+            >
+              <option value="line">Line Chart</option>
+              <option value="table">Table</option>
+            </select>
+          </>
+        )}
 
-        {isSignals && <>
-          <label className="block text-sm text-gray-400 mb-1">Signal</label>
-          <select value={signalType} onChange={e => setSignalType(e.target.value as ChartConfig['signal_type'])} className={`${inputCls} mb-3`}>
-            <option value="both">Both (green + red)</option>
-            <option value="green">Green only</option>
-            <option value="red">Red only</option>
-          </select>
+        {isSignals && (
+          <>
+            <label className="block text-sm text-gray-400 mb-1">Signal</label>
+            <select
+              value={signalType}
+              onChange={(e) => setSignalType(e.target.value as ChartConfig['signal_type'])}
+              className={`${inputCls} mb-3`}
+            >
+              <option value="both">Both (green + red)</option>
+              <option value="green">Green only</option>
+              <option value="red">Red only</option>
+            </select>
 
-          <label className="block text-sm text-gray-400 mb-1">Sort series by</label>
-          <select value={orderBy} onChange={e => setOrderBy(e.target.value as ChartConfig['order_by'])} className={`${inputCls} mb-3`}>
-            <option value="time">Time (no sort)</option>
-            <option value="value_asc">Latest lowest values</option>
-            <option value="value_desc">Latest highest values</option>
-            <option value="delta_asc">Biggest decrease (last 10 min)</option>
-            <option value="delta_desc">Biggest increase (last 10 min)</option>
-          </select>
+            <label className="block text-sm text-gray-400 mb-1">Sort series by</label>
+            <select
+              value={orderBy}
+              onChange={(e) => setOrderBy(e.target.value as ChartConfig['order_by'])}
+              className={`${inputCls} mb-3`}
+            >
+              <option value="value_asc">Latest lowest values</option>
+              <option value="value_desc">Latest highest values</option>
+              <option value="delta_asc">Biggest decrease (last 10 min)</option>
+              <option value="delta_desc">Biggest increase (last 10 min)</option>
+            </select>
 
-          <label className="block text-sm text-gray-400 mb-1">Max series (lines)</label>
-          <input type="number" min={1} max={200} value={seriesLimit}
-            onChange={e => setSeriesLimit(Number(e.target.value))}
-            className={`${inputCls} mb-3`} />
+            <label className="block text-sm text-gray-400 mb-1">Max series (lines)</label>
+            <input
+              type="number"
+              min={1}
+              max={200}
+              value={seriesLimit}
+              onChange={(e) => setSeriesLimit(Number(e.target.value))}
+              className={`${inputCls} mb-3`}
+            />
 
-          <label className="block text-sm text-gray-400 mb-1">Combinators (comma-separated, empty = all)</label>
-          <input value={combinators} onChange={e => setCombinators(e.target.value)}
-            placeholder="nauvis, nauvis-orbit" className={`${inputCls} mb-3`} />
-
-          <div className="flex items-center gap-2 mb-2">
-            <label className="text-sm text-gray-400 flex-1">Item filters</label>
-            <label className="flex items-center gap-1.5 text-xs text-gray-400 cursor-pointer">
-              <input type="checkbox" checked={useRegex} onChange={e => setUseRegex(e.target.checked)}
-                className="accent-indigo-500" />
-              Use regex
+            <label className="block text-sm text-gray-400 mb-1">
+              Combinators (comma-separated, empty = all)
             </label>
-          </div>
-          <input value={whitelist} onChange={e => setWhitelist(e.target.value)}
-            placeholder={useRegex ? 'wissen.*|Iron Plate' : 'Iron Plate, copper-plate'}
-            className={`${inputCls} mb-1`} />
-          <p className="text-xs text-gray-500 mb-2">Whitelist — localized names or item keys accepted (empty = all)</p>
-          <input value={blacklist} onChange={e => setBlacklist(e.target.value)}
-            placeholder={useRegex ? 'Holz|stone' : 'Wood, stone'}
-            className={`${inputCls} mb-1`} />
-          <p className="text-xs text-gray-500 mb-3">Blacklist — localized names or item keys accepted</p>
-        </>}
+            <input
+              value={combinators}
+              onChange={(e) => setCombinators(e.target.value)}
+              placeholder="nauvis, nauvis-orbit"
+              className={`${inputCls} mb-3`}
+            />
 
-        {!isDivider && <>
-          <div className="flex gap-3 mb-3">
-            <div className="flex-1">
-              <label className="block text-sm text-gray-400 mb-1">Y Min (empty = auto)</label>
-              <input type="number" value={yMin} onChange={e => setYMin(e.target.value)}
-                placeholder="auto" className={inputCls} />
+            <div className="flex items-center gap-2 mb-2">
+              <label className="text-sm text-gray-400 flex-1">Item filters</label>
+              <label className="flex items-center gap-1.5 text-xs text-gray-400 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={useRegex}
+                  onChange={(e) => setUseRegex(e.target.checked)}
+                  className="accent-indigo-500"
+                />
+                Use regex
+              </label>
             </div>
-            <div className="flex-1">
-              <label className="block text-sm text-gray-400 mb-1">Y Max (empty = auto)</label>
-              <input type="number" value={yMax} onChange={e => setYMax(e.target.value)}
-                placeholder="auto" className={inputCls} />
-            </div>
-          </div>
+            <input
+              value={whitelist}
+              onChange={(e) => setWhitelist(e.target.value)}
+              placeholder={useRegex ? 'wissen.*|Iron Plate' : 'Iron Plate, copper-plate'}
+              className={`${inputCls} mb-1`}
+            />
+            <p className="text-xs text-gray-500 mb-2">
+              Whitelist — localized names or item keys accepted (empty = all)
+            </p>
+            <input
+              value={blacklist}
+              onChange={(e) => setBlacklist(e.target.value)}
+              placeholder={useRegex ? 'Holz|stone' : 'Wood, stone'}
+              className={`${inputCls} mb-1`}
+            />
+            <p className="text-xs text-gray-500 mb-3">
+              Blacklist — localized names or item keys accepted
+            </p>
+          </>
+        )}
 
-          <label className="block text-sm text-gray-400 mb-1">Y Scale</label>
-          <select value={yScale} onChange={e => setYScale(e.target.value as ChartConfig['y_scale'])} className={`${inputCls} mb-3`}>
-            <option value="linear">Linear</option>
-            <option value="log">Symmetric Log (arcsinh)</option>
-          </select>
-        </>}
+        {!isDivider && (
+          <>
+            <div className="flex gap-3 mb-3">
+              <div className="flex-1">
+                <label className="block text-sm text-gray-400 mb-1">Y Min (empty = auto)</label>
+                <input
+                  type="number"
+                  value={yMin}
+                  onChange={(e) => setYMin(e.target.value)}
+                  placeholder="auto"
+                  className={inputCls}
+                />
+              </div>
+              <div className="flex-1">
+                <label className="block text-sm text-gray-400 mb-1">Y Max (empty = auto)</label>
+                <input
+                  type="number"
+                  value={yMax}
+                  onChange={(e) => setYMax(e.target.value)}
+                  placeholder="auto"
+                  className={inputCls}
+                />
+              </div>
+            </div>
+
+            <label className="block text-sm text-gray-400 mb-1">Y Scale</label>
+            <select
+              value={yScale}
+              onChange={(e) => setYScale(e.target.value as ChartConfig['y_scale'])}
+              className={`${inputCls} mb-3`}
+            >
+              <option value="linear">Linear</option>
+              <option value="log">Symmetric Log (arcsinh)</option>
+            </select>
+          </>
+        )}
 
         <div className="flex gap-3 mb-4">
           <div className="flex-1">
             <label className="block text-sm text-gray-400 mb-1">Width (1–6 cols)</label>
-            <input type="number" min={1} max={6} value={width}
-              onChange={e => setWidth(Number(e.target.value))} className={inputCls} />
+            <input
+              type="number"
+              min={1}
+              max={6}
+              value={width}
+              onChange={(e) => setWidth(Number(e.target.value))}
+              className={inputCls}
+            />
           </div>
           <div className="flex-1">
             <label className="block text-sm text-gray-400 mb-1">Height (rows)</label>
-            <input type="number" min={2} max={20} value={height}
-              onChange={e => setHeight(Number(e.target.value))} className={inputCls} />
+            <input
+              type="number"
+              min={2}
+              max={20}
+              value={height}
+              onChange={(e) => setHeight(Number(e.target.value))}
+              className={inputCls}
+            />
           </div>
         </div>
 
         <div className="flex justify-end gap-2">
-          <button onClick={onClose}    className="px-4 py-1.5 text-sm text-gray-400 hover:text-white rounded hover:bg-gray-700">Cancel</button>
-          <button onClick={handleSave} className="px-4 py-1.5 text-sm bg-indigo-600 hover:bg-indigo-500 text-white rounded">Save</button>
+          <button
+            onClick={onClose}
+            className="px-4 py-1.5 text-sm text-gray-400 hover:text-white rounded hover:bg-gray-700"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            className="px-4 py-1.5 text-sm bg-indigo-600 hover:bg-indigo-500 text-white rounded"
+          >
+            Save
+          </button>
         </div>
       </div>
     </div>

web/components/Dashboard.tsx

@@ -2,16 +2,27 @@
 
 import { useState, useEffect, useRef, useCallback } from 'react';
 import GridLayout from 'react-grid-layout';
-import type { Layout, LayoutItem } from 'react-grid-layout';
-import 'react-grid-layout/css/styles.css';
-import 'react-resizable/css/styles.css';
-import { useApp } from '@/lib/context';
-import { fetchCharts, createChart, updateChart, deleteChart, fetchSignals, fetchSessions, fetchUps } from '@/lib/api';
-import type { ChartConfig, SignalRow, UpsRow, SessionBoundary, AlertConfig } from '@/lib/types';
+
 import ChartCard from './ChartCard';
 import ChartEditor from './ChartEditor';
 
-const COLS       = 6;
+import type { ChartConfig, SignalRow, UpsRow, SessionBoundary, AlertConfig } from '@/lib/types';
+import type { Layout, LayoutItem } from 'react-grid-layout';
+
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
+import {
+  fetchCharts,
+  createChart,
+  updateChart,
+  deleteChart,
+  fetchSignals,
+  fetchSessions,
+  fetchUps,
+} from '@/lib/api';
+import { useApp } from '@/lib/context';
+
+const COLS = 6;
 const ROW_HEIGHT = 80;
 
 interface Props {
@@ -20,21 +31,25 @@ interface Props {
 
 export default function Dashboard({ alerts }: Props) {
   const { timeRange, timeMode, getFromTo } = useApp();
-  const [charts,      setCharts]      = useState<ChartConfig[]>([]);
-  const [signalData,  setSignalData]  = useState<Map<string, SignalRow[]>>(new Map());
-  const [upsData,     setUpsData]     = useState<Map<string, UpsRow[]>>(new Map());
-  const [sessions,    setSessions]    = useState<SessionBoundary[]>([]);
-  const [editingChart,   setEditingChart]   = useState<ChartConfig | null>(null);
-  const [creatingChart,  setCreatingChart]  = useState(false);
+  const [charts, setCharts] = useState<ChartConfig[]>([]);
+  const [signalData, setSignalData] = useState<Map<string, SignalRow[]>>(new Map());
+  const [upsData, setUpsData] = useState<Map<string, UpsRow[]>>(new Map());
+  const [sessions, setSessions] = useState<SessionBoundary[]>([]);
+  const [editingChart, setEditingChart] = useState<ChartConfig | null>(null);
+  const [creatingChart, setCreatingChart] = useState(false);
   const [containerWidth, setContainerWidth] = useState(1200);
 
-  const containerRef    = useRef<HTMLDivElement>(null);
-  const chartsRef       = useRef<ChartConfig[]>([]);
-  const refreshingRef   = useRef(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const chartsRef = useRef<ChartConfig[]>([]);
+  const refreshingRef = useRef(false);
   const layoutSaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  useEffect(() => { chartsRef.current = charts; }, [charts]);
-  useEffect(() => { fetchCharts().then(setCharts); }, []);
+  useEffect(() => {
+    chartsRef.current = charts;
+  }, [charts]);
+  useEffect(() => {
+    fetchCharts().then(setCharts);
+  }, []);
 
   const refreshData = useCallback(async () => {
     if (refreshingRef.current) return;
@@ -44,24 +59,27 @@ export default function Dashboard({ alerts }: Props) {
     refreshingRef.current = true;
     try {
       const { from, to } = getFromTo();
-      const signalCharts = current.filter(c => c.chart_type === 'signals');
-      const upsCharts    = current.filter(c => c.chart_type === 'ups');
+      const signalCharts = current.filter((c) => c.chart_type === 'signals');
+      const upsCharts = current.filter((c) => c.chart_type === 'ups');
 
       if (signalCharts.length === 0 && upsCharts.length === 0) return;
 
       const [newSessions, ...results] = await Promise.all([
         fetchSessions(from, to),
-        ...signalCharts.map(c => fetchSignals({
-          combinator: c.filter_combinators ?? undefined,
-          item:       c.filter_items       ?? undefined,
-          exclude:    c.filter_items_exclude ?? undefined,
-          signal:     c.signal_type,
-          time_mode:  timeMode,
-          from, to,
-          regex:      c.filter_items_regex || undefined,
-          ...(c.order_by !== 'time' ? { order_by: c.order_by, limit: c.series_limit } : {}),
-        })),
-        ...upsCharts.map(c => fetchUps({ combinator: c.filter_combinators?.[0], from, to })),
+        ...signalCharts.map((c) =>
+          fetchSignals({
+            combinator: c.filter_combinators ?? undefined,
+            item: c.filter_items ?? undefined,
+            exclude: c.filter_items_exclude ?? undefined,
+            signal: c.signal_type,
+            time_mode: timeMode,
+            from,
+            to,
+            regex: c.filter_items_regex || undefined,
+            ...(c.order_by !== 'time' ? { order_by: c.order_by, limit: c.series_limit } : {}),
+          }),
+        ),
+        ...upsCharts.map((c) => fetchUps({ combinator: c.filter_combinators?.[0], from, to })),
       ]);
 
       setSessions(newSessions as SessionBoundary[]);
@@ -98,47 +116,56 @@ export default function Dashboard({ alerts }: Props) {
 
   async function handleCreate(draft: Omit<ChartConfig, 'id'>) {
     const created = await createChart(draft);
-    setCharts(cs => [...cs, created]);
+    setCharts((cs) => [...cs, created]);
     setCreatingChart(false);
   }
 
   async function handleUpdate(id: string, draft: Omit<ChartConfig, 'id'>) {
     const updated = await updateChart(id, draft);
-    setCharts(cs => cs.map(c => c.id === id ? updated : c));
+    setCharts((cs) => cs.map((c) => (c.id === id ? updated : c)));
     setEditingChart(null);
   }
 
   async function handleDelete(id: string) {
     await deleteChart(id);
-    setCharts(cs => cs.filter(c => c.id !== id));
+    setCharts((cs) => cs.filter((c) => c.id !== id));
   }
 
   function handleLayoutChange(layout: Layout) {
     const items = layout as readonly LayoutItem[];
-    const changed = items.filter(item => {
-      const chart = chartsRef.current.find(c => c.id === item.i);
-      return chart && (
-        chart.pos_x !== item.x || chart.pos_y !== item.y ||
-        chart.width !== item.w || chart.height !== item.h
+    const changed = items.filter((item) => {
+      const chart = chartsRef.current.find((c) => c.id === item.i);
+      return (
+        chart &&
+        (chart.pos_x !== item.x ||
+          chart.pos_y !== item.y ||
+          chart.width !== item.w ||
+          chart.height !== item.h)
       );
     });
     if (changed.length === 0) return;
 
-    setCharts(cs => cs.map(c => {
-      const l = changed.find(item => item.i === c.id);
-      return l ? { ...c, pos_x: l.x, pos_y: l.y, width: l.w, height: l.h } : c;
-    }));
+    setCharts((cs) =>
+      cs.map((c) => {
+        const l = changed.find((item) => item.i === c.id);
+        return l ? { ...c, pos_x: l.x, pos_y: l.y, width: l.w, height: l.h } : c;
+      }),
+    );
 
     if (layoutSaveTimer.current) clearTimeout(layoutSaveTimer.current);
     layoutSaveTimer.current = setTimeout(() => {
-      changed.forEach(item =>
+      changed.forEach((item) =>
         updateChart(item.i, { pos_x: item.x, pos_y: item.y, width: item.w, height: item.h }),
       );
     }, 500);
   }
 
-  const layout: Layout = charts.map(c => ({
-    i: c.id, x: c.pos_x, y: c.pos_y, w: c.width, h: c.height,
+  const layout: Layout = charts.map((c) => ({
+    i: c.id,
+    x: c.pos_x,
+    y: c.pos_y,
+    w: c.width,
+    h: c.height,
     minW: 1,
     minH: c.chart_type === 'divider' ? 1 : 2,
   }));
@@ -151,17 +178,32 @@ export default function Dashboard({ alerts }: Props) {
         onLayoutChange={handleLayoutChange}
         gridConfig={{ cols: COLS, rowHeight: ROW_HEIGHT, margin: [8, 8] }}
         dragConfig={{ handle: '.drag-handle' }}
+        resizeConfig={{
+          handleComponent: (axis, ref) => (
+            <span
+              ref={ref}
+              className="react-resizable-handle react-resizable-handle-se"
+              style={{
+                borderRight: '3px solid #4b5563',
+                borderBottom: '3px solid #4b5563',
+                opacity: 0.6,
+              }}
+            />
+          ),
+        }}
       >
-        {charts.map(c => (
+        {charts.map((c) => (
           <div key={c.id} className="drag-handle cursor-grab active:cursor-grabbing">
             <ChartCard
               config={c}
               rows={signalData.get(c.id) ?? []}
               upsRows={upsData.get(c.id) ?? []}
               sessions={sessions}
-              alerts={alerts.filter(a =>
-                !c.filter_combinators || !a.combinator ||
-                c.filter_combinators.includes(a.combinator),
+              alerts={alerts.filter(
+                (a) =>
+                  !c.filter_combinators ||
+                  !a.combinator ||
+                  c.filter_combinators.includes(a.combinator),
               )}
               timeMode={timeMode}
               onEdit={() => setEditingChart(c)}
@@ -172,6 +214,7 @@ export default function Dashboard({ alerts }: Props) {
       </GridLayout>
 
       <button
+        aria-label="Create chart"
         onClick={() => setCreatingChart(true)}
         className="fixed bottom-6 right-6 w-12 h-12 bg-indigo-600 hover:bg-indigo-500 text-white rounded-full text-2xl shadow-lg flex items-center justify-center z-30"
       >
@@ -184,7 +227,7 @@ export default function Dashboard({ alerts }: Props) {
       {editingChart && (
         <ChartEditor
           initial={editingChart}
-          onSave={draft => handleUpdate(editingChart.id, draft)}
+          onSave={(draft) => handleUpdate(editingChart.id, draft)}
           onClose={() => setEditingChart(null)}
         />
       )}

web/components/TimeRangeSelector.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { useApp } from '@/lib/context';
 import type { TimeRange, TimeMode } from '@/lib/types';
 
+import { useApp } from '@/lib/context';
+
 const RANGES: TimeRange[] = ['30m', '1h', '6h', '24h', '7d', '30d'];
 
 export default function TimeRangeSelector() {
@@ -11,7 +12,7 @@ export default function TimeRangeSelector() {
   return (
     <div className="flex items-center gap-3 flex-wrap">
       <div className="flex rounded overflow-hidden border border-gray-700">
-        {RANGES.map(r => (
+        {RANGES.map((r) => (
           <button
             key={r}
             onClick={() => setTimeRange(r)}
@@ -27,7 +28,7 @@ export default function TimeRangeSelector() {
       </div>
 
       <div className="flex rounded overflow-hidden border border-gray-700">
-        {(['real', 'tick'] as TimeMode[]).map(m => (
+        {(['real', 'tick'] as TimeMode[]).map((m) => (
           <button
             key={m}
             onClick={() => setTimeMode(m)}

web/docker-compose.yml

@@ -7,7 +7,7 @@ services:
       POSTGRES_PASSWORD: factorio
       POSTGRES_DB: factorio
     ports:
-      - "5432:5432"
+      - '5432:5432'
     volumes:
       - db_data:/var/lib/postgresql/data
 

web/eslint.config.mjs

@@ -0,0 +1,62 @@
+import js from '@eslint/js';
+import importX from 'eslint-plugin-import-x';
+import reactX from 'eslint-plugin-react-x';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  {
+    ignores: ['**/node_modules', '**/.next', '**/dist', '**/out'],
+  },
+  {
+    files: ['**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    languageOptions: { globals: { ...globals.browser, ...globals.node } },
+  },
+  js.configs.recommended,
+  tseslint.configs.recommended,
+  reactX.configs.recommended,
+  {
+    plugins: {
+      'import-x': importX,
+    },
+    rules: {
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        { prefer: 'type-imports', fixStyle: 'inline-type-imports' },
+      ],
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/no-non-null-assertion': 'error',
+      '@typescript-eslint/ban-ts-comment': [
+        'error',
+        {
+          'ts-expect-error': 'allow-with-description',
+          'ts-ignore': 'allow-with-description',
+          'ts-nocheck': true,
+          'ts-check': true,
+        },
+      ],
+      'react-x/exhaustive-deps': 'error',
+      'react-x/use-state': 'off',
+      'react-x/no-context-provider': 'off',
+      'react-x/no-array-index-key': 'off',
+      'react-x/no-use-context': 'off',
+      'import-x/no-duplicates': 'error',
+      'import-x/order': [
+        'warn',
+        {
+          groups: [
+            'builtin',
+            'external',
+            'internal',
+            ['parent', 'sibling'],
+            'index',
+            'object',
+            'type',
+          ],
+          'newlines-between': 'always',
+          alphabetize: { order: 'asc', caseInsensitive: true },
+        },
+      ],
+    },
+  },
+);

web/lib/api.ts

@@ -1,20 +1,39 @@
-import type { ChartConfig, AlertConfig, TriggeredAlert, SignalRow, SessionBoundary, UpsRow, TimeMode } from './types';
+import type {
+  ChartConfig,
+  AlertConfig,
+  TriggeredAlert,
+  SignalRow,
+  SessionBoundary,
+  UpsRow,
+  TimeMode,
+} from './types';
 
 let _token = '';
-export function setToken(token: string) { _token = token; }
+export function setToken(token: string) {
+  _token = token;
+}
 
-function url(path: string, params: Record<string, string | string[] | boolean | number | undefined> = {}) {
-  const u = new URL(path, typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000');
+function url(
+  path: string,
+  params: Record<string, string | string[] | boolean | number | undefined> = {},
+) {
+  const u = new URL(
+    path,
+    typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000',
+  );
   u.searchParams.set('token', _token);
   for (const [k, v] of Object.entries(params)) {
     if (v === undefined) continue;
-    if (Array.isArray(v)) v.forEach(val => u.searchParams.append(k, String(val)));
+    if (Array.isArray(v)) v.forEach((val) => u.searchParams.append(k, String(val)));
     else u.searchParams.set(k, String(v));
   }
   return u.toString();
 }
 
-async function get<T>(path: string, params?: Record<string, string | string[] | boolean | number | undefined>): Promise<T> {
+async function get<T>(
+  path: string,
+  params?: Record<string, string | string[] | boolean | number | undefined>,
+): Promise<T> {
   const res = await fetch(url(path, params));
   if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
   return res.json();
@@ -45,7 +64,11 @@ export function fetchSignals(params: {
   return get('/api/signals', params as Record<string, string | string[]>);
 }
 
-export function fetchUps(params: { combinator?: string; from?: string; to?: string }): Promise<UpsRow[]> {
+export function fetchUps(params: {
+  combinator?: string;
+  from?: string;
+  to?: string;
+}): Promise<UpsRow[]> {
   return get('/api/ups', params);
 }
 
@@ -53,13 +76,31 @@ export function fetchSessions(from: string, to: string): Promise<SessionBoundary
   return get('/api/sessions', { from, to });
 }
 
-export function fetchCharts(): Promise<ChartConfig[]>                              { return get('/api/charts'); }
-export function createChart(body: Omit<ChartConfig, 'id'>): Promise<ChartConfig>  { return mutate('POST', '/api/charts', body); }
-export function updateChart(id: string, body: Partial<ChartConfig>): Promise<ChartConfig> { return mutate('PUT', `/api/charts/${id}`, body); }
-export function deleteChart(id: string): Promise<{ ok: boolean }>                 { return mutate('DELETE', `/api/charts/${id}`); }
+export function fetchCharts(): Promise<ChartConfig[]> {
+  return get('/api/charts');
+}
+export function createChart(body: Omit<ChartConfig, 'id'>): Promise<ChartConfig> {
+  return mutate('POST', '/api/charts', body);
+}
+export function updateChart(id: string, body: Partial<ChartConfig>): Promise<ChartConfig> {
+  return mutate('PUT', `/api/charts/${id}`, body);
+}
+export function deleteChart(id: string): Promise<{ ok: boolean }> {
+  return mutate('DELETE', `/api/charts/${id}`);
+}
 
-export function fetchAlerts(): Promise<AlertConfig[]>                                      { return get('/api/alerts'); }
-export function createAlert(body: Omit<AlertConfig, 'id' | 'active'>): Promise<AlertConfig> { return mutate('POST', '/api/alerts', body); }
-export function updateAlert(id: string, body: Partial<AlertConfig>): Promise<AlertConfig>   { return mutate('PUT', `/api/alerts/${id}`, body); }
-export function deleteAlert(id: string): Promise<{ ok: boolean }>                          { return mutate('DELETE', `/api/alerts/${id}`); }
-export function checkAlerts(): Promise<TriggeredAlert[]>                                   { return get('/api/alerts/check'); }
+export function fetchAlerts(): Promise<AlertConfig[]> {
+  return get('/api/alerts');
+}
+export function createAlert(body: Omit<AlertConfig, 'id' | 'active'>): Promise<AlertConfig> {
+  return mutate('POST', '/api/alerts', body);
+}
+export function updateAlert(id: string, body: Partial<AlertConfig>): Promise<AlertConfig> {
+  return mutate('PUT', `/api/alerts/${id}`, body);
+}
+export function deleteAlert(id: string): Promise<{ ok: boolean }> {
+  return mutate('DELETE', `/api/alerts/${id}`);
+}
+export function checkAlerts(): Promise<TriggeredAlert[]> {
+  return get('/api/alerts/check');
+}

web/lib/apiHelpers.ts

@@ -1,5 +1,8 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { type NextRequest, NextResponse } from 'next/server';
+
 import { isAuthorized, unauthorized } from './auth';
+import { getServerLocaleMap } from './localeServer';
+import { matchKeys } from './localization';
 
 type RouteContext = { params: Promise<Record<string, string>> };
 type Handler = (req: NextRequest, ctx: RouteContext) => Promise<NextResponse>;
@@ -24,3 +27,53 @@ export function withAuth(handler: Handler): Handler {
     }
   };
 }
+
+/**
+ * Builds a SQL WHERE clause fragment for item whitelist/blacklist filtering.
+ *
+ * - `isWhitelist=true`:  `item_key ~* $N OR item_key = ANY($N+1)`  (regex),  `item_key = ANY($N)`  (exact)
+ * - `isWhitelist=false`: `item_key !~* $N AND item_key != ALL($N+1)` (regex), `item_key != ALL($N)` (exact)
+ *
+ * Mutates `values` and `param.current` to track parameter bindings.
+ */
+export function buildItemFilter(
+  items: string[],
+  useRegex: boolean,
+  isWhitelist: boolean,
+  values: unknown[],
+  param: { current: number },
+): string | null {
+  if (items.length === 0) return null;
+
+  if (useRegex) {
+    const localeMap = getServerLocaleMap();
+    const localeKeys = [...new Set(items.flatMap((p) => matchKeys(p, localeMap)))];
+    const sqlPattern = items.map((p) => `(${p})`).join('|');
+
+    if (isWhitelist) {
+      const orConds: string[] = [`item_key ~* $${param.current++}`];
+      values.push(sqlPattern);
+      if (localeKeys.length > 0) {
+        orConds.push(`item_key = ANY($${param.current++})`);
+        values.push(localeKeys);
+      }
+      return `(${orConds.join(' OR ')})`;
+    } else {
+      const andConds: string[] = [`item_key !~* $${param.current++}`];
+      values.push(sqlPattern);
+      if (localeKeys.length > 0) {
+        andConds.push(`item_key != ALL($${param.current++})`);
+        values.push(localeKeys);
+      }
+      return `(${andConds.join(' AND ')})`;
+    }
+  }
+
+  if (isWhitelist) {
+    values.push(items);
+    return `item_key = ANY($${param.current++})`;
+  } else {
+    values.push(items);
+    return `item_key != ALL($${param.current++})`;
+  }
+}

web/lib/auth.ts

@@ -1,4 +1,4 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { type NextRequest, NextResponse } from 'next/server';
 
 /**
  * Returns true if the request carries a valid API token.

web/lib/colors.ts

@@ -0,0 +1,37 @@
+export type ColorMap = Map<string, string>;
+
+declare global {
+  var __colorMapCache: ColorMap | undefined;
+}
+
+export function parseColorCsv(text: string): ColorMap {
+  const map: ColorMap = new Map();
+  const lines = text.split(/\r?\n/).slice(1);
+  for (const line of lines) {
+    if (!line.trim()) continue;
+    const [key, color] = line.split(',');
+    if (key && color) map.set(key.trim(), color.trim());
+  }
+  return map;
+}
+
+export async function getColorMap(): Promise<ColorMap> {
+  if (globalThis.__colorMapCache) return globalThis.__colorMapCache;
+  try {
+    const res = await fetch('/factorio_item_colors.csv');
+    globalThis.__colorMapCache = res.ok ? parseColorCsv(await res.text()) : new Map();
+  } catch {
+    globalThis.__colorMapCache = new Map();
+  }
+  return globalThis.__colorMapCache;
+}
+
+function djb2(s: string): number {
+  let h = 5381;
+  for (let i = 0; i < s.length; i++) h = (h * 33) ^ s.charCodeAt(i);
+  return h >>> 0;
+}
+
+export function getItemColor(key: string, colorMap: ColorMap): string {
+  return colorMap.get(key) ?? `hsl(${djb2(key) % 360},70%,60%)`;
+}

web/lib/context.tsx

@@ -1,49 +1,43 @@
 'use client';
 
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from 'react';
-import type { TimeRange, TimeMode, TriggeredAlert } from './types';
-import { TIME_RANGE_MS } from './types';
+import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+
 import { checkAlerts } from './api';
 import { buildReverseMap } from './localization';
+import { TIME_RANGE_MS } from './types';
+
 import type { LocaleMap, ReverseMap } from './localization';
+import type { TimeRange, TimeMode, TriggeredAlert } from './types';
 
 interface AppContextValue {
-  timeRange:      TimeRange;
-  setTimeRange:   (r: TimeRange) => void;
-  timeMode:       TimeMode;
-  setTimeMode:    (m: TimeMode) => void;
+  timeRange: TimeRange;
+  setTimeRange: (r: TimeRange) => void;
+  timeMode: TimeMode;
+  setTimeMode: (m: TimeMode) => void;
   triggeredAlerts: TriggeredAlert[];
-  refreshAlerts:  () => Promise<void>;
-  getFromTo:      () => { from: string; to: string };
-  localeMap:      LocaleMap;
-  reverseMap:     ReverseMap;
+  refreshAlerts: () => Promise<void>;
+  getFromTo: () => { from: string; to: string };
+  localeMap: LocaleMap;
+  reverseMap: ReverseMap;
 }
 
 const AppContext = createContext<AppContextValue | null>(null);
 
 export function AppProvider({
-  token: _token,
   localeMap,
   children,
 }: {
-  token:     string;
   localeMap: LocaleMap;
-  children:  React.ReactNode;
-}) {
-  const [timeRange,       setTimeRange]       = useState<TimeRange>('6h');
-  const [timeMode,        setTimeMode]        = useState<TimeMode>('real');
+  children: React.ReactNode;
+} & { token?: string }) {
+  const [timeRange, setTimeRange] = useState<TimeRange>('6h');
+  const [timeMode, setTimeMode] = useState<TimeMode>('real');
   const [triggeredAlerts, setTriggeredAlerts] = useState<TriggeredAlert[]>([]);
 
   const reverseMap = buildReverseMap(localeMap);
 
   const getFromTo = useCallback(() => {
-    const to   = new Date();
+    const to = new Date();
     const from = new Date(to.getTime() - TIME_RANGE_MS[timeRange]);
     return { from: from.toISOString(), to: to.toISOString() };
   }, [timeRange]);
@@ -54,20 +48,30 @@ export function AppProvider({
 
   useEffect(() => {
     let cancelled = false;
-    const poll = () => checkAlerts().then(a => { if (!cancelled) setTriggeredAlerts(a); });
+    const poll = () =>
+      checkAlerts().then((a) => {
+        if (!cancelled) setTriggeredAlerts(a);
+      });
     poll();
     const id = setInterval(poll, 30_000);
-    return () => { cancelled = true; clearInterval(id); };
+    return () => {
+      cancelled = true;
+      clearInterval(id);
+    };
   }, []);
 
   return (
     <AppContext.Provider
       value={{
-        timeRange, setTimeRange,
-        timeMode,  setTimeMode,
-        triggeredAlerts, refreshAlerts,
+        timeRange,
+        setTimeRange,
+        timeMode,
+        setTimeMode,
+        triggeredAlerts,
+        refreshAlerts,
         getFromTo,
-        localeMap, reverseMap,
+        localeMap,
+        reverseMap,
       }}
     >
       {children}

web/lib/db.ts

@@ -1,7 +1,6 @@
 import { Pool } from 'pg';
 
 declare global {
-  // eslint-disable-next-line no-var
   var __pgPool: Pool | undefined;
 }
 

web/lib/formatNumber.ts

@@ -0,0 +1,23 @@
+const SI_THRESHOLDS = [
+  { limit: 1_000_000_000, divisor: 1_000_000_000, suffix: 'G' },
+  { limit: 1_000_000, divisor: 1_000_000, suffix: 'M' },
+  { limit: 1_000, divisor: 1_000, suffix: 'K' },
+] as const;
+
+export function formatSI(v: number, locale?: string, fractionDigits?: number): string {
+  const abs = Math.abs(v);
+  const fd = fractionDigits ?? 3;
+  for (const { limit, divisor, suffix } of SI_THRESHOLDS) {
+    if (abs >= limit) {
+      const formatted = new Intl.NumberFormat(locale, {
+        maximumFractionDigits: fd,
+        minimumFractionDigits: 0,
+      }).format(v / divisor);
+      return `${formatted}${suffix}`;
+    }
+  }
+  return new Intl.NumberFormat(locale, {
+    maximumFractionDigits: fractionDigits != null ? fractionDigits : 0,
+    minimumFractionDigits: 0,
+  }).format(v);
+}

web/lib/localeServer.ts

@@ -1,9 +1,13 @@
 import fs from 'fs';
 import path from 'path';
+
 import { parseCsv } from './localization';
+
 import type { LocaleMap } from './localization';
 
-declare global { var __serverLocaleCache: LocaleMap | undefined; }
+declare global {
+  var __serverLocaleCache: LocaleMap | undefined;
+}
 
 /**
  * Loads and merges EN + DE locale CSVs from the public directory.
@@ -23,7 +27,10 @@ export function getServerLocaleMap(): LocaleMap {
     }
   }
 
-  const merged: LocaleMap = new Map([...load('factorio_english_items.csv'), ...load('factorio_german_items.csv')]);
+  const merged: LocaleMap = new Map([
+    ...load('factorio_english_items.csv'),
+    ...load('factorio_german_items.csv'),
+  ]);
   globalThis.__serverLocaleCache = merged;
   return merged;
 }

web/lib/localization.ts

@@ -20,8 +20,10 @@ function splitCsvLine(line: string): string[] {
   for (let i = 0; i < line.length; i++) {
     const ch = line[i];
     if (ch === '"') {
-      if (inQuote && line[i + 1] === '"') { cur += '"'; i++; }
-      else inQuote = !inQuote;
+      if (inQuote && line[i + 1] === '"') {
+        cur += '"';
+        i++;
+      } else inQuote = !inQuote;
     } else if (ch === ',' && !inQuote) {
       cols.push(cur);
       cur = '';
@@ -33,7 +35,9 @@ function splitCsvLine(line: string): string[] {
   return cols;
 }
 
-declare global { var __localeCache: LocaleMap | undefined; }
+declare global {
+  var __localeCache: LocaleMap | undefined;
+}
 
 async function loadCsv(path: string): Promise<LocaleMap> {
   try {

web/lib/sessions.ts

@@ -1,14 +1,12 @@
-import pool from '@/lib/db';
 import type { SessionBoundary } from '@/lib/types';
 
+import pool from '@/lib/db';
+
 /**
  * Returns session-start timestamps where any gap > 30 min exists
  * in the global tick_timing timeline.
  */
-export async function getSessionBoundaries(
-  from: Date,
-  to: Date,
-): Promise<SessionBoundary[]> {
+export async function getSessionBoundaries(from: Date, to: Date): Promise<SessionBoundary[]> {
   const result = await pool.query<{ real_time: Date; game_tick: string }>(
     `SELECT real_time, game_tick
      FROM tick_timing
@@ -20,10 +18,12 @@ export async function getSessionBoundaries(
   const rows = result.rows;
   if (rows.length === 0) return [];
 
-  const boundaries: SessionBoundary[] = [{
-    real_time: rows[0].real_time.toISOString(),
-    game_tick: parseInt(rows[0].game_tick, 10),
-  }];
+  const boundaries: SessionBoundary[] = [
+    {
+      real_time: rows[0].real_time.toISOString(),
+      game_tick: parseInt(rows[0].game_tick, 10),
+    },
+  ];
 
   for (let i = 1; i < rows.length; i++) {
     if (rows[i].real_time.getTime() - rows[i - 1].real_time.getTime() > 30 * 60 * 1000) {

web/lib/types.ts

@@ -31,7 +31,7 @@ export interface AlertConfig {
 }
 
 export interface TriggeredAlert extends AlertConfig {
-  current_value:    number;
+  current_value: number;
   combinator_match: string;
   /** Actual matched item_key — differs from item_key when item_key_is_regex=true */
   matched_item_key: string;
@@ -63,9 +63,9 @@ export type TimeRange = '30m' | '1h' | '6h' | '24h' | '7d' | '30d';
 
 export const TIME_RANGE_MS: Record<TimeRange, number> = {
   '30m': 30 * 60 * 1000,
-  '1h':  60 * 60 * 1000,
-  '6h':  6 * 60 * 60 * 1000,
+  '1h': 60 * 60 * 1000,
+  '6h': 6 * 60 * 60 * 1000,
   '24h': 24 * 60 * 60 * 1000,
-  '7d':  7 * 24 * 60 * 60 * 1000,
+  '7d': 7 * 24 * 60 * 60 * 1000,
   '30d': 30 * 24 * 60 * 60 * 1000,
 };

web/migrations/001_initial_schema.js

@@ -2,51 +2,67 @@
 exports.up = (pgm) => {
   pgm.sql(`CREATE EXTENSION IF NOT EXISTS timescaledb CASCADE`);
 
-  pgm.createTable('signals', {
-    real_time:  { type: 'timestamptz', notNull: true },
-    game_tick:  { type: 'bigint',      notNull: true },
-    combinator: { type: 'text',        notNull: true },
-    item_key:   { type: 'text',        notNull: true },
-    green:      { type: 'integer',     notNull: true, default: 0 },
-    red:        { type: 'integer',     notNull: true, default: 0 },
-    logistic:   { type: 'integer' },
-  }, { ifNotExists: true });
+  pgm.createTable(
+    'signals',
+    {
+      real_time: { type: 'timestamptz', notNull: true },
+      game_tick: { type: 'bigint', notNull: true },
+      combinator: { type: 'text', notNull: true },
+      item_key: { type: 'text', notNull: true },
+      green: { type: 'integer', notNull: true, default: 0 },
+      red: { type: 'integer', notNull: true, default: 0 },
+      logistic: { type: 'integer' },
+    },
+    { ifNotExists: true },
+  );
 
   pgm.sql(`SELECT create_hypertable('signals', 'real_time', if_not_exists => true)`);
-  pgm.sql(`CREATE INDEX IF NOT EXISTS signals_combinator_item_key_real_time_idx ON signals (combinator, item_key, real_time DESC)`);
+  pgm.sql(
+    `CREATE INDEX IF NOT EXISTS signals_combinator_item_key_real_time_idx ON signals (combinator, item_key, real_time DESC)`,
+  );
   pgm.sql(`CREATE INDEX IF NOT EXISTS signals_game_tick_idx ON signals (game_tick DESC)`);
   pgm.sql(`SELECT add_retention_policy('signals', INTERVAL '30 days', if_not_exists => true)`);
 
-  pgm.createTable('tick_timing', {
-    real_time:  { type: 'timestamptz', notNull: true },
-    game_tick:  { type: 'bigint',      notNull: true },
-    combinator: { type: 'text',        notNull: true },
-  }, { ifNotExists: true });
+  pgm.createTable(
+    'tick_timing',
+    {
+      real_time: { type: 'timestamptz', notNull: true },
+      game_tick: { type: 'bigint', notNull: true },
+      combinator: { type: 'text', notNull: true },
+    },
+    { ifNotExists: true },
+  );
 
   pgm.sql(`SELECT create_hypertable('tick_timing', 'real_time', if_not_exists => true)`);
-  pgm.sql(`CREATE INDEX IF NOT EXISTS tick_timing_combinator_real_time_idx ON tick_timing (combinator, real_time DESC)`);
+  pgm.sql(
+    `CREATE INDEX IF NOT EXISTS tick_timing_combinator_real_time_idx ON tick_timing (combinator, real_time DESC)`,
+  );
   pgm.sql(`SELECT add_retention_policy('tick_timing', INTERVAL '30 days', if_not_exists => true)`);
 
-  pgm.createTable('charts', {
-    id:                   { type: 'uuid', primaryKey: true, default: pgm.func('gen_random_uuid()') },
-    title:                { type: 'text',        notNull: true },
-    pos_x:                { type: 'integer',     notNull: true, default: 0 },
-    pos_y:                { type: 'integer',     notNull: true, default: 0 },
-    width:                { type: 'integer',     notNull: true, default: 2 },
-    height:               { type: 'integer',     notNull: true, default: 4 },
-    signal_type:          { type: 'text',        notNull: true, default: 'both' },
-    chart_type:           { type: 'text',        notNull: true, default: 'signals' },
-    viz_type:             { type: 'text',        notNull: true, default: 'line' },
-    filter_combinators:   { type: 'text[]' },
-    filter_items:         { type: 'text[]' },
-    filter_items_exclude: { type: 'text[]' },
-    filter_items_regex:   { type: 'boolean',     notNull: true, default: false },
-    y_min:                { type: 'real' },
-    y_max:                { type: 'real' },
-    series_limit:         { type: 'integer',     notNull: true, default: 20 },
-    order_by:             { type: 'text',        notNull: true, default: 'time' },
-    created_at:           { type: 'timestamptz', notNull: true, default: pgm.func('now()') },
-  }, { ifNotExists: true });
+  pgm.createTable(
+    'charts',
+    {
+      id: { type: 'uuid', primaryKey: true, default: pgm.func('gen_random_uuid()') },
+      title: { type: 'text', notNull: true },
+      pos_x: { type: 'integer', notNull: true, default: 0 },
+      pos_y: { type: 'integer', notNull: true, default: 0 },
+      width: { type: 'integer', notNull: true, default: 2 },
+      height: { type: 'integer', notNull: true, default: 4 },
+      signal_type: { type: 'text', notNull: true, default: 'both' },
+      chart_type: { type: 'text', notNull: true, default: 'signals' },
+      viz_type: { type: 'text', notNull: true, default: 'line' },
+      filter_combinators: { type: 'text[]' },
+      filter_items: { type: 'text[]' },
+      filter_items_exclude: { type: 'text[]' },
+      filter_items_regex: { type: 'boolean', notNull: true, default: false },
+      y_min: { type: 'real' },
+      y_max: { type: 'real' },
+      series_limit: { type: 'integer', notNull: true, default: 20 },
+      order_by: { type: 'text', notNull: true, default: 'time' },
+      created_at: { type: 'timestamptz', notNull: true, default: pgm.func('now()') },
+    },
+    { ifNotExists: true },
+  );
 
   // Use DO blocks so constraints are idempotent on existing DBs
   pgm.sql(`DO $$ BEGIN
@@ -58,24 +74,28 @@ exports.up = (pgm) => {
   EXCEPTION WHEN duplicate_object THEN NULL; END $$`);
 
   pgm.sql(`DO $$ BEGIN
-    ALTER TABLE charts ADD CONSTRAINT charts_viz_type_check CHECK (viz_type IN ('line','stacked','table'));
+    ALTER TABLE charts ADD CONSTRAINT charts_viz_type_check CHECK (viz_type IN ('line','table'));
   EXCEPTION WHEN duplicate_object THEN NULL; END $$`);
 
   pgm.sql(`DO $$ BEGIN
     ALTER TABLE charts ADD CONSTRAINT charts_order_by_check CHECK (order_by IN ('time','value_asc','value_desc','abs_desc','delta_asc','delta_desc'));
   EXCEPTION WHEN duplicate_object THEN NULL; END $$`);
 
-  pgm.createTable('alerts', {
-    id:                { type: 'uuid', primaryKey: true, default: pgm.func('gen_random_uuid()') },
-    item_key:          { type: 'text',        notNull: true },
-    item_key_is_regex: { type: 'boolean',     notNull: true, default: false },
-    combinator:        { type: 'text' },
-    signal_type:       { type: 'text',        notNull: true, default: 'green' },
-    condition:         { type: 'text',        notNull: true },
-    threshold:         { type: 'integer',     notNull: true },
-    active:            { type: 'boolean',     notNull: true, default: true },
-    created_at:        { type: 'timestamptz', notNull: true, default: pgm.func('now()') },
-  }, { ifNotExists: true });
+  pgm.createTable(
+    'alerts',
+    {
+      id: { type: 'uuid', primaryKey: true, default: pgm.func('gen_random_uuid()') },
+      item_key: { type: 'text', notNull: true },
+      item_key_is_regex: { type: 'boolean', notNull: true, default: false },
+      combinator: { type: 'text' },
+      signal_type: { type: 'text', notNull: true, default: 'green' },
+      condition: { type: 'text', notNull: true },
+      threshold: { type: 'integer', notNull: true },
+      active: { type: 'boolean', notNull: true, default: true },
+      created_at: { type: 'timestamptz', notNull: true, default: pgm.func('now()') },
+    },
+    { ifNotExists: true },
+  );
 
   pgm.sql(`DO $$ BEGIN
     ALTER TABLE alerts ADD CONSTRAINT alerts_signal_type_check CHECK (signal_type IN ('green','red'));
@@ -85,10 +105,14 @@ exports.up = (pgm) => {
     ALTER TABLE alerts ADD CONSTRAINT alerts_condition_check CHECK (condition IN ('above','below'));
   EXCEPTION WHEN duplicate_object THEN NULL; END $$`);
 
-  pgm.createTable('settings', {
-    key:   { type: 'text', primaryKey: true },
-    value: { type: 'text', notNull: true },
-  }, { ifNotExists: true });
+  pgm.createTable(
+    'settings',
+    {
+      key: { type: 'text', primaryKey: true },
+      value: { type: 'text', notNull: true },
+    },
+    { ifNotExists: true },
+  );
 };
 
 exports.down = () => Promise.resolve();

web/migrations/002_add_y_scale_delta_order.js

@@ -7,12 +7,16 @@ exports.up = (pgm) => {
   EXCEPTION WHEN duplicate_object THEN NULL; END $$`);
 
   pgm.sql(`ALTER TABLE charts DROP CONSTRAINT IF EXISTS charts_order_by_check`);
-  pgm.sql(`ALTER TABLE charts ADD CONSTRAINT charts_order_by_check CHECK (order_by IN ('time','value_asc','value_desc','abs_desc','delta_asc','delta_desc'))`);
+  pgm.sql(
+    `ALTER TABLE charts ADD CONSTRAINT charts_order_by_check CHECK (order_by IN ('time','value_asc','value_desc','abs_desc','delta_asc','delta_desc'))`,
+  );
 };
 
 exports.down = (pgm) => {
   pgm.sql(`ALTER TABLE charts DROP CONSTRAINT IF EXISTS charts_order_by_check`);
-  pgm.sql(`ALTER TABLE charts ADD CONSTRAINT charts_order_by_check CHECK (order_by IN ('time','value_asc','value_desc','abs_desc'))`);
+  pgm.sql(
+    `ALTER TABLE charts ADD CONSTRAINT charts_order_by_check CHECK (order_by IN ('time','value_asc','value_desc','abs_desc'))`,
+  );
   pgm.sql(`ALTER TABLE charts DROP CONSTRAINT IF EXISTS charts_y_scale_check`);
   pgm.sql(`ALTER TABLE charts DROP COLUMN IF EXISTS y_scale`);
 };

web/migrations/003_remove_stacked_add_divider.js

@@ -1,10 +1,14 @@
 /** @type {import('node-pg-migrate').MigrationBuilder} */
 exports.up = (pgm) => {
   pgm.sql(`ALTER TABLE charts DROP CONSTRAINT IF EXISTS charts_viz_type_check`);
-  pgm.sql(`ALTER TABLE charts ADD CONSTRAINT charts_viz_type_check CHECK (viz_type IN ('line','table'))`);
+  pgm.sql(
+    `ALTER TABLE charts ADD CONSTRAINT charts_viz_type_check CHECK (viz_type IN ('line','table'))`,
+  );
 
   pgm.sql(`ALTER TABLE charts DROP CONSTRAINT IF EXISTS charts_chart_type_check`);
-  pgm.sql(`ALTER TABLE charts ADD CONSTRAINT charts_chart_type_check CHECK (chart_type IN ('signals','ups','divider'))`);
+  pgm.sql(
+    `ALTER TABLE charts ADD CONSTRAINT charts_chart_type_check CHECK (chart_type IN ('signals','ups','divider'))`,
+  );
 
   // Migrate any existing stacked charts to line
   pgm.sql(`UPDATE charts SET viz_type = 'line' WHERE viz_type = 'stacked'`);
@@ -12,8 +16,12 @@ exports.up = (pgm) => {
 
 exports.down = (pgm) => {
   pgm.sql(`ALTER TABLE charts DROP CONSTRAINT IF EXISTS charts_viz_type_check`);
-  pgm.sql(`ALTER TABLE charts ADD CONSTRAINT charts_viz_type_check CHECK (viz_type IN ('line','stacked','table'))`);
+  pgm.sql(
+    `ALTER TABLE charts ADD CONSTRAINT charts_viz_type_check CHECK (viz_type IN ('line','stacked','table'))`,
+  );
 
   pgm.sql(`ALTER TABLE charts DROP CONSTRAINT IF EXISTS charts_chart_type_check`);
-  pgm.sql(`ALTER TABLE charts ADD CONSTRAINT charts_chart_type_check CHECK (chart_type IN ('signals','ups'))`);
+  pgm.sql(
+    `ALTER TABLE charts ADD CONSTRAINT charts_chart_type_check CHECK (chart_type IN ('signals','ups'))`,
+  );
 };

web/next.config.ts

@@ -1,7 +1,7 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
-  output: "standalone",
+  output: 'standalone',
 };
 
 export default nextConfig;

web/package.json

@@ -6,7 +6,9 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint . --max-warnings 0",
+    "format": "prettier --check .",
+    "format:fix": "prettier --write .",
     "migrate": "node-pg-migrate up -m migrations",
     "migrate:down": "node-pg-migrate down -m migrations",
     "migrate:create": "node-pg-migrate create -m migrations"
@@ -22,13 +24,20 @@
     "uplot": "^1.6.32"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
     "@types/node": "^24",
     "@types/pg": "^8.20.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "eslint": "^10.4.1",
+    "eslint-plugin-import-x": "^4.16.2",
+    "eslint-plugin-react-x": "^5.8.11",
+    "globals": "^17.6.0",
     "node-pg-migrate": "^8.0.4",
     "postcss": "^8.5.14",
+    "prettier": "^3.8.3",
     "tailwindcss": "^4.3.0",
-    "typescript": "^6.0.3"
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.60.1"
   }
 }

web/postcss.config.mjs

@@ -1,6 +1,6 @@
 const config = {
   plugins: {
-    "@tailwindcss/postcss": {},
+    '@tailwindcss/postcss': {},
   },
 };
 

web/public/factorio_item_colors.csv

@@ -0,0 +1,379 @@
+item_key,color
+copper-ore,#bf8040
+copper-plate,#b87333
+copper-cable,#e65100
+iron-ore,#8d6e63
+iron-plate,#bdbdbd
+iron-gear-wheel,#a0a0a0
+iron-stick,#888888
+steel-plate,#757575
+steel-gear-wheel,#5a5a5a
+steel-beam,#424242
+stone,#a1887f
+stone-brick,#b8956a
+coal,#37474f
+uranium-ore,#66bb6a
+uranium-238,#7cb342
+uranium-235,#64dd17
+crude-oil,#1a1a1a
+heavy-oil,#4e342e
+light-oil,#ff8a65
+petroleum-gas,#3d006b
+lubricant,#1b5e20
+sulfuric-acid,#b2dfdb
+water,#1565c0
+steam,#e1f5fe
+wood,#6d4c41
+raw-wood,#3e2723
+plastic-bar,#b0bec5
+sulfur,#fff176
+explosives,#ef5350
+battery,#ff9800
+empty-barrel,#90a4ae
+filled-barrel,#546e7a
+electronic-circuit,#4caf50
+advanced-circuit,#e53935
+processing-unit,#1565d2
+automation-science-pack,#d32f2f
+logistic-science-pack,#43a047
+military-science-pack,#616161
+chemical-science-pack,#00acc1
+production-science-pack,#ff8f00
+utility-science-pack,#7b1fa2
+space-science-pack,#f48fb1
+pipe,#78909c
+engine-unit,#795548
+electric-engine-unit,#4fc3f7
+flying-robot-frame,#5e35b1
+rocket-fuel,#ff5722
+rocket-control-unit,#2e7d32
+low-density-structure,#bcaaa4
+heat-pipe,#bf360c
+heat-exchanger,#263238
+steam-turbine,#455a64
+concrete,#9e9e9e
+refined-concrete,#6d6d6d
+landfill,#388e3c
+cliff-explosives,#d84315
+nuclear-fuel,#00c853
+solid-fuel,#0d47a1
+grenade,#5d4037
+cluster-grenade,#c62828
+landmine,#4a148c
+fish,#29b6f6
+glass,#4dd0e1
+rail,#9e9e9e
+rail-signal,#449c53
+rail-chain-signal,#e33d2b
+train-stop,#323f48
+locomotive,#ce3c2c
+cargo-wagon,#937966
+fluid-wagon,#1450b8
+artillery-wagon,#3d3d3d
+artillery-turret,#383838
+flamethrower-turret,#cc4e14
+gun-turret,#5c5c5c
+laser-turret,#e45d2f
+radar,#378b45
+roboport,#2196f3
+construction-robot,#449c5f
+logistic-robot,#133baa
+speed-module,#f44336
+speed-module-2,#e91e63
+speed-module-3,#9c27b0
+speed-module-5,#4c1178
+effectivity-module,#4cae70
+effectivity-module-2,#3a9256
+effectivity-module-3,#30823f
+effectivity-module-4,#1d6327
+productivity-module,#ffb005
+productivity-module-2,#ef6c00
+productivity-module-3,#eb6600
+productivity-module-5,#c5500d
+beacon,#2078f3
+substation,#b427b4
+medium-electric-pole,#687d8d
+big-electric-pole,#566c7b
+small-electric-pole,#8c9eab
+small-iron-electric-pole,#8996a9
+steel-chest,#cb3f2a
+iron-chest,#907c64
+wooden-chest,#634b3b
+transport-belt,#b3b3b3
+fast-transport-belt,#50b1f7
+express-transport-belt,#e56f34
+underground-belt,#bfbfbf
+fast-underground-belt,#4193f6
+express-underground-belt,#e48d2f
+splitter,#bdbdbd
+fast-splitter,#3277f5
+express-splitter,#dd8a1d
+long-handed-inserter,#80604d
+fast-inserter,#80664d
+burner-inserter,#7c694b
+inserter,#7c704b
+stack-inserter,#47322a
+burner-mining-drill,#706943
+electric-mining-drill,#737345
+area-mining-drill,#7c804d
+electric-furnace,#384751
+industrial-furnace,#475666
+assembling-machine-3,#666666
+centrifuge,#546578
+chemical-plant,#0092c7
+oil-refinery,#0f0f0f
+pumpjack,#433428
+offshore-pump,#162eca
+boiler,#9e9e9e
+steam-engine,#6c7d93
+solar-panel,#ffb74d
+accumulator,#0c59e9
+lamp,#ffeb3b
+constant-combinator,#495369
+decider-combinator,#4d556f
+arithmetic-combinator,#585b7e
+power-switch,#ffb405
+programmable-speaker,#751a89
+aai-signal-receiver,#323c48
+aai-signal-transmitter,#2a2f3c
+textplate-small-copper,#e68600
+used-up-uranium-fuel-cell,#34384b
+uranium-fuel-cell,#5db669
+electric-motor,#5976f7
+motor,#4652f6
+automation-core,#1712a5
+iron-beam,#878787
+kr-advanced-solar-panel,#ffc23d
+kr-advanced-transport-belt,#26c6da
+kr-advanced-loader,#0070a3
+kr-advanced-splitter,#00bcd4
+kr-superior-inserter,#74804d
+kr-superior-filter-inserter,#5d4437
+kr-superior-long-inserter,#6f804d
+kr-superior-long-filter-inserter,#5d4737
+kr-superior-underground-belt,#0054a8
+kr-superior-loader,#0048bd
+kr-fuel-refinery,#bb580c
+kr-quarry-drill,#68804d
+kr-express-loader,#00838f
+kr-electric-mining-drill-mk2,#47382a
+kr-steel-pipe,#666666
+kr-steel-pipe-to-ground,#cb522a
+kr-fluid-storage-2,#2415c1
+kr-se-loader,#434960
+beryllium,#81c784
+beryllium-ore,#558b2f
+beryllium-sulfate,#00695c
+holmium,#ba68c8
+holmium-ore,#ab47bc
+holmium-solution,#e1bee7
+cryonite,#00a8e0
+cryonite-rod,#29aedb
+cryonite-solution,#80deea
+iridium,#cfd8dc
+iridium-ore,#689f38
+iridium-ingot,#e0e0e0
+vulcanite,#ff7043
+vulcanite-block,#e64a19
+vulcanite-powder,#ffab91
+imersite,#8e24aa
+imersite-crystal,#283593
+imersite-powder,#ce93d8
+vita,#8bc34a
+vita-extract,#19572a
+vita-germination,#006064
+naquium,#ffd54f
+naquium-ore,#ffca28
+naquium-ingot,#fff9c4
+methane-ice,#b2ebf2
+core-fragment,#4db6ac
+rare-metals,#b0b0b0
+raw-rare-metals,#a8a8a8
+raw-imersite,#821e8f
+sand,#c2b280
+silicon,#6c7893
+quartz,#e6e6e6
+coke,#474747
+se-copper-ingot,#b08130
+se-iron-ingot,#84755c
+se-steel-ingot,#707070
+se-beryllium-ingot,#87c995
+se-holmium-ingot,#c056c2
+se-iridium-ingot,#d6dce1
+se-cryonite-rod,#2397d1
+se-cryonite-slush,#7bccea
+se-vulcanite-crushed,#ff7b29
+se-vulcanite-enriched,#ff6d29
+se-vulcanite-block,#dc5a18
+imersium-plate,#8e1d9a
+se-kr-imersium-sulfide,#9f1e96
+se-kr-fine-imersite-powder,#d58bd5
+enriched-iron,#7e7358
+electronic-components,#4eb183
+empty-data-card,#512da8
+heat-shielding,#00bfa5
+thermodynamic-boiler,#311b92
+cryogenic-plant,#0097a7
+core-drill,#3d5afe
+core-miner,#1a237e
+se-quantum-processor,#123db5
+se-holmium-cable,#c256bb
+se-holmium-solenoid,#c45aae
+se-superconductive-cable,#1c176e
+se-data-storage-substrate,#4527a0
+se-machine-learning-data,#3949ab
+se-empty-data,#5c6bc0
+se-broken-data,#7986cb
+se-junk-data,#9fa8da
+se-scrap,#757575
+se-contaminated-scrap,#3a3122
+se-genetic-data,#64b979
+se-significant-data,#3f9751
+se-experimental-genetic-data,#308249
+se-atomic-data,#008fd6
+se-star-probe-data,#ffea4d
+se-significant-specimen,#00bdb6
+se-specimen,#26a69a
+se-bio-sludge,#2c7749
+se-nutrient-gel,#005c5a
+se-nutrient-gel-barrel,#004d40
+mineral-water,#3236f5
+chlorine,#b0dbde
+nitric-acid,#ffcc80
+se-bioscrubber,#174f30
+se-space-coolant-hot,#f58700
+se-space-water,#6c59f7
+se-chemical-gel,#ad25aa
+se-vitalic-acid,#7ec44f
+se-vitalic-reagent,#49de17
+se-vitalic-epoxy,#5d9f38
+se-neural-gel,#b39ddb
+se-neural-gel-2,#9575cd
+se-plasma-stream,#d50000
+se-proton-stream,#e040fb
+se-ion-stream,#651fff
+se-particle-stream,#304ffe
+se-vitamelange-extract,#427a2a
+se-vitamelange-spice,#498c31
+se-water-ice,#e3f2fd
+lithium,#9eadb7
+lithium-chloride,#b0b8c4
+lithium-sulfur-battery,#db9ad7
+fertilizer,#4a432b
+biomass,#33691e
+biomethanol,#419b5d
+se-surface-teleporter,#24166a
+se-observation-frame,#5eab3f
+se-observation-frame-blank,#5eb83d
+se-core-fragment-se-beryllium,#6bbd80
+se-core-fragment-se-cryonite,#0070e0
+se-core-fragment-se-holmium,#ca6dad
+se-core-fragment-se-imersite,#931f80
+se-core-fragment-se-iridium,#c7ced6
+se-core-fragment-se-naquium,#ffdf29
+se-core-fragment-se-vita,#62c247
+se-core-fragment-se-vulcanite,#ca6a16
+se-core-fragment-omni,#46a5aa
+se-core-fragment-se-iridium-ore,#409f38
+se-core-fragment-se-vitamelange,#4ac144
+se-aeroframe-bulkhead,#4ea9b7
+se-aeroframe-scaffold,#26a2a6
+se-aeroframe-pole,#00897b
+se-heavy-girder,#686f8d
+se-heavy-bearing,#607d8b
+se-heavy-composite,#484766
+se-space-pipe,#4e9bb7
+se-space-transport-belt,#2280c9
+se-space-underground-belt,#001cbd
+se-space-splitter,#0057d1
+se-space-accumulator,#734bf7
+se-space-solar-panel,#ffe438
+se-space-solar-panel-2,#ffa726
+se-space-elevator-cable,#4b2494
+se-space-pipe-to-ground,#5191b8
+se-space-mirror,#d9d9d9
+se-space-rail,#787a9b
+se-space-platform-scaffold,#b8b8b8
+se-space-probe-rocket,#ff913d
+se-space-capsule,#42a5f5
+se-meteor-defence-ammo,#ed533b
+se-dynamic-emitter,#3913aa
+se-gammaray-detector,#009bb3
+se-pylon-substation,#ffff52
+se-rocket-launch-pad,#6b6b6b
+se-rocket-landing-pad,#5e5e5e
+se-cargo-rocket-fuel-tank,#ff7a05
+se-cargo-rocket-cargo-pod,#ff985c
+se-cargo-rocket-section,#ffa570
+se-cargo-rocket-section-packed,#ffdd75
+se-lifesupport-canister,#7a32f5
+se-used-lifesupport-canister,#929bb0
+se-canister,#898fa9
+se-magnetic-canister,#ca6da3
+se-iridium-ore,#348c31
+se-iridium-ore-crushed,#35973d
+se-beryllium-ore,#3b7a2a
+se-beryllium-sulfate,#005461
+se-holmium-ore,#a53eac
+se-holmium-ore-crushed,#a93da0
+se-compact-beacon,#491e7b
+se-recycling-facility,#49a780
+se-rocket-science-pack,#e3e3e3
+lubricant-barrel,#ffc107
+heavy-oil-barrel,#434028
+light-oil-barrel,#ffb56b
+petroleum-gas-barrel,#4d007e
+se-material-science-pack-1,#fffc42
+se-material-science-pack-2,#ffbe1a
+se-material-science-pack-3,#f5c800
+se-material-science-pack-4,#e67e00
+se-material-testing-pack,#f57c00
+se-material-insight,#ffe0b2
+se-material-catalogue-1,#efff42
+se-material-catalogue-2,#ffd11a
+se-material-catalogue-3,#f5e400
+se-material-catalogue-4,#e6a100
+se-astronomic-science-pack-1,#565abd
+se-astronomic-science-pack-2,#373aa4
+se-astronomic-insight,#c5cae9
+se-astronomic-catalogue-1,#6c61c2
+se-astronomic-catalogue-2,#423bb0
+se-astronomic-catalogue-3,#2a2c98
+se-astronomic-catalogue-4,#371b83
+se-biological-science-pack-1,#69f0ae
+se-biological-science-pack-2,#00e676
+se-biological-science-pack-3,#00ad5f
+se-biological-science-pack-4,#009624
+se-biological-insight,#b9f6ca
+se-biological-catalogue-1,#6af0c1
+se-biological-catalogue-2,#00e68a
+se-biological-catalogue-3,#00c77e
+se-biological-catalogue-4,#009431
+se-energy-science-pack-1,#f17493
+se-energy-science-pack-2,#f06292
+se-energy-science-pack-3,#ec407a
+se-energy-science-pack-4,#d81b60
+se-energy-insight,#fce4ec
+se-energy-catalogue-1,#f17482
+se-energy-catalogue-2,#ee446f
+se-energy-catalogue-3,#e92549
+se-energy-catalogue-4,#bf183f
+se-deep-space-science-pack-1,#bfa6de
+se-deep-space-science-pack-2,#a27cd0
+se-deep-space-science-pack-3,#7e57c2
+se-deep-space-science-pack-4,#6f37b9
+se-kr-matter-science-pack-1,#ffef8a
+se-kr-matter-science-pack-2,#e0ff57
+se-kr-matter-liberation-data,#ffe494
+blank-tech-card,#898ca9
+singularity-tech-card,#351566
+ltn-combinator,#4c1b83
+ltn-stop,#383a51
+ltn-delivery-address,#286c4b
+ltn-provider-stack-threshold,#f34a1b
+ltn-requester-stack-threshold,#1643f3
+ltn-provider-threshold,#d45d35
+ltn-requester-threshold,#5c12a5
+ltn-max-trains,#621281
+ltn-max-train-length,#66127d
+ltn-locked-slots,#534d6f