feat: item color map, fix regex matching, fix sort order, fix resize handle

web/components/ChartCard/TableViz.tsx

@@ -1,6 +1,9 @@
+import { useState, useEffect } from 'react';
 import { useApp } from '@/lib/context';
 import { resolveName } from '@/lib/localization';
 import { formatSI } from '@/lib/formatNumber';
+import { getColorMap, getItemColor } from '@/lib/colors';
+import type { ColorMap } from '@/lib/colors';
 import { CardShell } from './CardShell';
 import type { ChartConfig, SignalRow } from '@/lib/types';
 
@@ -13,6 +16,8 @@ interface Props {
 
 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) {
@@ -37,7 +42,11 @@ 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'}`}>