diff --git a/web/package-lock.json b/web/package-lock.json
index 891e401..0a2999c 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-router-dom": "^6.30.4"
+        "react-router-dom": "^6.30.4",
+        "recharts": "^3.9.2"
       },
       "devDependencies": {
         "@vitejs/plugin-react": "^4.3.4",
@@ -740,6 +741,32 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.12.0.tgz",
+      "integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.3.tgz",
@@ -1106,6 +1133,18 @@
         "win32"
       ]
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1151,6 +1190,69 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
@@ -1158,6 +1260,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
@@ -1247,6 +1355,15 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1254,6 +1371,127 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -1272,6 +1510,12 @@
         }
       }
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.393",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.393.tgz",
@@ -1279,6 +1523,16 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/es-toolkit": {
+      "version": "1.49.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.49.0.tgz",
+      "integrity": "sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -1328,6 +1582,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1353,6 +1613,25 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/immer": {
+      "version": "11.1.15",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.15.tgz",
+      "integrity": "sha512-VrNANlmnWQnh5COXIIOQXM9oOJw7naGKlBT74ZOOR6lpVXc3gFEu9FJLDFcpCJ2j+NWr8TIwtWD//T6ZX6TKiQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -1504,6 +1783,36 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-is": {
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.7.tgz",
+      "integrity": "sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/react-redux": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz",
+      "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -1546,6 +1855,57 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/recharts": {
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.9.2.tgz",
+      "integrity": "sha512-G4fy+Pk46RaXgwWMh+Nzhyo/lbFAVqXo9gtetlyehe6Ehge9CsgDuOTwQDD+i1+llaLktNBiNq4bhnGlDRXFtw==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^11.1.8",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.2.0",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.2.0.tgz",
+      "integrity": "sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==",
+      "license": "MIT"
+    },
     "node_modules/rollup": {
       "version": "4.62.2",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.2.tgz",
@@ -1620,6 +1980,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -1651,6 +2017,37 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/vite": {
       "version": "5.4.21",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
diff --git a/web/package.json b/web/package.json
index 6d9fffb..f820b5c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -12,7 +12,8 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.30.4"
+    "react-router-dom": "^6.30.4",
+    "recharts": "^3.9.2"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.4",
diff --git a/web/src/api.js b/web/src/api.js
index 6ee1014..e50a5aa 100644
--- a/web/src/api.js
+++ b/web/src/api.js
@@ -1,4 +1,3 @@
-// Thin client for the TORQ REST API (proxied to the FastAPI backend in dev).
 const BASE = "/api";
 
 async function j(path, opts) {
@@ -12,6 +11,12 @@ export const getEval = () => j("/eval");
 export const getWorkOrders = (status) =>
   j("/work-orders" + (status ? `?status=${status}` : ""));
 
+export const getTrend = () =>
+  j("/metrics/trend").catch(() => null);
+
+export const getFaultsPerMachine = () =>
+  j("/metrics/faults-per-machine").catch(() => null);
+
 export const reportFault = (body) =>
   j("/faults", {
     method: "POST",
diff --git a/web/src/components/Navbar.jsx b/web/src/components/Navbar.jsx
index 3650b14..9ba5f2b 100644
--- a/web/src/components/Navbar.jsx
+++ b/web/src/components/Navbar.jsx
@@ -1,8 +1,17 @@
 import { Link } from "react-router-dom";
 import ThemeToggle from "./ThemeToggle.jsx";
+import { useI18n } from "../i18n";
 import styles from "./Navbar.module.css";
 
+const LANGS = [
+  { code: "en", label: "EN" },
+  { code: "fr", label: "FR" },
+  { code: "ar", label: "AR" },
+];
+
 export default function Navbar() {
+  const { locale, changeLocale } = useI18n();
+
   return (
     <nav className={styles.nav}>
       <div className={styles.inner}>
@@ -18,6 +27,17 @@ export default function Navbar() {
         </Link>
         <div className={styles.right}>
           <Link to="/dashboard" className={styles.link}>Dashboard</Link>
+          <div className={styles.langGroup}>
+            {LANGS.map((l) => (
+              <button
+                key={l.code}
+                className={`${styles.langBtn} ${locale === l.code ? styles.langActive : ""}`}
+                onClick={() => changeLocale(l.code)}
+              >
+                {l.label}
+              </button>
+            ))}
+          </div>
           <ThemeToggle />
         </div>
       </div>
diff --git a/web/src/components/Navbar.module.css b/web/src/components/Navbar.module.css
index cb66d41..84be073 100644
--- a/web/src/components/Navbar.module.css
+++ b/web/src/components/Navbar.module.css
@@ -66,3 +66,34 @@
   background: var(--surface);
   color: var(--text-primary);
 }
+
+.langGroup {
+  display: flex;
+  gap: 2px;
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  padding: 2px;
+  transition: background 0.35s;
+}
+
+.langBtn {
+  font-family: "ALTGumbo", system-ui, sans-serif;
+  font-weight: 500;
+  font-size: 12px;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  padding: 5px 9px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+}
+
+.langBtn:hover {
+  color: var(--text-primary);
+}
+
+.langActive {
+  background: var(--text-primary);
+  color: var(--bg-primary) !important;
+}
diff --git a/web/src/i18n.jsx b/web/src/i18n.jsx
new file mode 100644
index 0000000..01995e7
--- /dev/null
+++ b/web/src/i18n.jsx
@@ -0,0 +1,193 @@
+import { createContext, useContext, useState, useCallback } from "react";
+
+const LOCALES = {
+  en: {
+    "dashboard.title": "Supervisor dashboard",
+    "dashboard.subtitle": "Approval queue and downtime metrics",
+    "dashboard.total": "Total work orders",
+    "dashboard.avg_diag": "Avg time to diagnosis",
+    "dashboard.avg_fix": "Avg time to fix",
+    "dashboard.res_rate": "Resolution rate",
+    "dashboard.pending": "Pending approval",
+    "dashboard.all": "All work orders",
+    "dashboard.queue_empty": "Queue empty",
+    "dashboard.no_orders": "No work orders yet",
+    "dashboard.id": "ID",
+    "dashboard.machine": "Machine",
+    "dashboard.fault": "Fault",
+    "dashboard.cause": "Root cause",
+    "dashboard.status": "Status",
+    "dashboard.assigned": "Assigned",
+    "dashboard.approve": "Approve",
+    "dashboard.reject": "Reject",
+    "dashboard.mark_fixed": "Mark fixed",
+    "dashboard.close": "close",
+    "dashboard.download_pdf": "Download PDF (EN/FR/AR)",
+    "dashboard.grounded_in": "Grounded in",
+    "dashboard.simulate": "Simulate fault (E-471, CM-350 Line 2)",
+    "dashboard.footer": "From fault code to fixed.",
+    "dashboard.live_feed": "Live fault feed",
+    "dashboard.repair_steps": "Repair steps",
+    "dashboard.parts": "Parts",
+    "dashboard.tools": "Tools",
+    "dashboard.safety": "Safety warnings",
+    "dashboard.confidence": "Confidence",
+    "dashboard.needs_review": "Needs human review",
+    "dashboard.trend": "Time-to-diagnosis / MTTR trend",
+    "dashboard.faults_per_machine": "Faults per machine",
+    "dashboard.search": "Search machine…",
+    "dashboard.all_statuses": "All statuses",
+    "dashboard.just_now": "just now",
+    "dashboard.min_ago": "min ago",
+    "dashboard.hours_saved": "Hours saved / week",
+    "dashboard.money_saved": "Money saved / year",
+    "dashboard.roi_title": "ROI & Savings Calculator",
+    "dashboard.eval_title": "Retrieval quality — MRR",
+    "dashboard.eval_scenarios": "labeled scenarios",
+    "dashboard.faults_per_week": "Faults / week",
+    "dashboard.downtime_cost": "Downtime cost / min ($)",
+    "dashboard.baseline_mttr": "Baseline MTTR (min)",
+    "dashboard.toast_approved": "Approved",
+    "dashboard.toast_dispatched": "Dispatched to",
+    "dashboard.toast_rejected": "Rejected",
+    "dashboard.toast_fixed": "Marked as fixed",
+    "dashboard.toast_simulated": "Fault simulated",
+  },
+  fr: {
+    "dashboard.title": "Tableau de bord superviseur",
+    "dashboard.subtitle": "File d'approbation et métriques de temps d'arrêt",
+    "dashboard.total": "Total ordres de travail",
+    "dashboard.avg_diag": "Temps moyen de diagnostic",
+    "dashboard.avg_fix": "Temps moyen de réparation",
+    "dashboard.res_rate": "Taux de résolution",
+    "dashboard.pending": "En attente d'approbation",
+    "dashboard.all": "Tous les ordres de travail",
+    "dashboard.queue_empty": "File d'attente vide",
+    "dashboard.no_orders": "Aucun ordre de travail",
+    "dashboard.id": "ID",
+    "dashboard.machine": "Machine",
+    "dashboard.fault": "Défaut",
+    "dashboard.cause": "Cause racine",
+    "dashboard.status": "Statut",
+    "dashboard.assigned": "Assigné à",
+    "dashboard.approve": "Approuver",
+    "dashboard.reject": "Rejeter",
+    "dashboard.mark_fixed": "Marquer réparé",
+    "dashboard.close": "fermer",
+    "dashboard.download_pdf": "Télécharger PDF (EN/FR/AR)",
+    "dashboard.grounded_in": "Basé sur",
+    "dashboard.simulate": "Simuler défaut (E-471, CM-350 Line 2)",
+    "dashboard.footer": "Du code défaut à la réparation.",
+    "dashboard.live_feed": "Flux de défauts en direct",
+    "dashboard.repair_steps": "Étapes de réparation",
+    "dashboard.parts": "Pièces",
+    "dashboard.tools": "Outils",
+    "dashboard.safety": "Avertissements de sécurité",
+    "dashboard.confidence": "Confiance",
+    "dashboard.needs_review": "Nécessite un examen humain",
+    "dashboard.trend": "Tendance temps de diagnostic / MTTR",
+    "dashboard.faults_per_machine": "Défauts par machine",
+    "dashboard.search": "Rechercher machine…",
+    "dashboard.all_statuses": "Tous les statuts",
+    "dashboard.just_now": "à l'instant",
+    "dashboard.min_ago": "min",
+    "dashboard.hours_saved": "Heures économisées / semaine",
+    "dashboard.money_saved": "Argent économisé / an",
+    "dashboard.roi_title": "Calculateur ROI & Économies",
+    "dashboard.eval_title": "Qualité de recherche — MRR",
+    "dashboard.eval_scenarios": "scénarios étiquetés",
+    "dashboard.faults_per_week": "Défauts / semaine",
+    "dashboard.downtime_cost": "Coût d'arrêt / min ($)",
+    "dashboard.baseline_mttr": "MTTR de référence (min)",
+    "dashboard.toast_approved": "Approuvé",
+    "dashboard.toast_dispatched": "Envoyé à",
+    "dashboard.toast_rejected": "Rejeté",
+    "dashboard.toast_fixed": "Marqué comme réparé",
+    "dashboard.toast_simulated": "Défaut simulé",
+  },
+  ar: {
+    "dashboard.title": "لوحة تحكم المشرف",
+    "dashboard.subtitle": "قائمة الموافقات ومقاييس وقت التوقف",
+    "dashboard.total": "إجمالي أوامر العمل",
+    "dashboard.avg_diag": "متوسط وقت التشخيص",
+    "dashboard.avg_fix": "متوسط وقت الإصلاح",
+    "dashboard.res_rate": "معدل الحل",
+    "dashboard.pending": "بانتظار الموافقة",
+    "dashboard.all": "جميع أوامر العمل",
+    "dashboard.queue_empty": "القائمة فارغة",
+    "dashboard.no_orders": "لا توجد أوامر عمل بعد",
+    "dashboard.id": "المعرف",
+    "dashboard.machine": "الآلة",
+    "dashboard.fault": "الخلل",
+    "dashboard.cause": "السبب الجذري",
+    "dashboard.status": "الحالة",
+    "dashboard.assigned": "مسند إلى",
+    "dashboard.approve": "موافقة",
+    "dashboard.reject": "رفض",
+    "dashboard.mark_fixed": "تحديد كمصلح",
+    "dashboard.close": "إغلاق",
+    "dashboard.download_pdf": "تنزيل PDF (EN/FR/AR)",
+    "dashboard.grounded_in": "مستند على",
+    "dashboard.simulate": "محاكاة خلل (E-471, CM-350 Line 2)",
+    "dashboard.footer": "من رمز الخلل إلى الإصلاح.",
+    "dashboard.live_feed": "تغذية الأخطاء المباشرة",
+    "dashboard.repair_steps": "خطوات الإصلاح",
+    "dashboard.parts": "قطع الغيار",
+    "dashboard.tools": "الأدوات",
+    "dashboard.safety": "تحذيرات السلامة",
+    "dashboard.confidence": "الثقة",
+    "dashboard.needs_review": "يحتاج مراجعة بشرية",
+    "dashboard.trend": "اتجاه وقت التشخيص / MTTR",
+    "dashboard.faults_per_machine": "الأعطال لكل آلة",
+    "dashboard.search": "بحث عن آلة…",
+    "dashboard.all_statuses": "جميع الحالات",
+    "dashboard.just_now": "الآن",
+    "dashboard.min_ago": "دقيقة",
+    "dashboard.hours_saved": "ساعات موفرة / أسبوع",
+    "dashboard.money_saved": "مال موفر / سنة",
+    "dashboard.roi_title": "حاسبة العائد على الاستثمار والتوفير",
+    "dashboard.eval_title": "جودة الاسترجاع — MRR",
+    "dashboard.eval_scenarios": "سيناريوهات موسومة",
+    "dashboard.faults_per_week": "أعطال / أسبوع",
+    "dashboard.downtime_cost": "تكلفة التوقف / دقيقة ($)",
+    "dashboard.baseline_mttr": "MTTR الأساسي (دقيقة)",
+    "dashboard.toast_approved": "تمت الموافقة",
+    "dashboard.toast_dispatched": "تم الإرسال إلى",
+    "dashboard.toast_rejected": "مرفوض",
+    "dashboard.toast_fixed": "تم التحديد كمصلح",
+    "dashboard.toast_simulated": "تم محاكاة الخلل",
+  },
+};
+
+const I18nContext = createContext();
+
+export function I18nProvider({ children }) {
+  const [locale, setLocale] = useState(() => {
+    return localStorage.getItem("torq-lang") || "en";
+  });
+
+  const t = useCallback((key) => {
+    return LOCALES[locale]?.[key] ?? LOCALES.en[key] ?? key;
+  }, [locale]);
+
+  const changeLocale = useCallback((l) => {
+    setLocale(l);
+    localStorage.setItem("torq-lang", l);
+    document.documentElement.setAttribute("lang", l);
+    if (l === "ar") {
+      document.documentElement.setAttribute("dir", "rtl");
+    } else {
+      document.documentElement.setAttribute("dir", "ltr");
+    }
+  }, []);
+
+  return (
+    <I18nContext.Provider value={{ locale, t, changeLocale }}>
+      {children}
+    </I18nContext.Provider>
+  );
+}
+
+export function useI18n() {
+  return useContext(I18nContext);
+}
diff --git a/web/src/main.jsx b/web/src/main.jsx
index 8fe5f15..46f15cf 100644
--- a/web/src/main.jsx
+++ b/web/src/main.jsx
@@ -2,12 +2,18 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import App from "./App.jsx";
+import { I18nProvider } from "./i18n";
+import { ToastProvider } from "./toast.jsx";
 import "./styles.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <BrowserRouter>
-      <App />
+      <I18nProvider>
+        <ToastProvider>
+          <App />
+        </ToastProvider>
+      </I18nProvider>
     </BrowserRouter>
   </React.StrictMode>
 );
diff --git a/web/src/pages/Dashboard.jsx b/web/src/pages/Dashboard.jsx
index 9222447..5da6e5c 100644
--- a/web/src/pages/Dashboard.jsx
+++ b/web/src/pages/Dashboard.jsx
@@ -1,8 +1,16 @@
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, useMemo } from "react";
+import {
+  LineChart, Line, BarChart, Bar, XAxis, YAxis, Tooltip as ReTooltip,
+  ResponsiveContainer, CartesianGrid,
+} from "recharts";
 import * as api from "../api.js";
 import Navbar from "../components/Navbar.jsx";
+import { useI18n } from "../i18n";
+import { useToast } from "../toast.jsx";
 import styles from "./Dashboard.module.css";
 
+const CONFIDENCE_THRESHOLD = 0.6;
+
 const FIX = {
   resolved: true,
   actual_fix: "Applied recommended fix; verified stable.",
@@ -22,6 +30,69 @@ function Badge({ status }) {
   return <span className={`${styles.badge} ${styles[status] || ""}`}>{status}</span>;
 }
 
+function ConfidenceBadge({ confidence }) {
+  if (confidence == null) return null;
+  const low = confidence < CONFIDENCE_THRESHOLD;
+  return (
+    <span className={`${styles.badge} ${low ? styles.lowConfidence : styles.highConfidence}`}>
+      {low ? "Needs human review" : `${(confidence * 100).toFixed(0)}%`}
+    </span>
+  );
+}
+
+function Skeleton({ width, height, style }) {
+  return (
+    <div
+      className="skeleton"
+      style={{ width: width || "100%", height: height || 20, ...style }}
+    />
+  );
+}
+
+function LiveFeed({ faults, t }) {
+  if (!faults || faults.length === 0) {
+    return (
+      <div className={styles.feedCard}>
+        <div className={styles.feedHead}>{t("dashboard.live_feed")}</div>
+        <div className={styles.feedEmpty}>No recent faults detected</div>
+      </div>
+    );
+  }
+  const displayed = faults.slice(0, 8);
+  return (
+    <div className={styles.feedCard}>
+      <div className={styles.feedHead}>{t("dashboard.live_feed")}</div>
+      <div className={styles.feedList}>
+        {displayed.map((f) => (
+          <div key={f.id} className={styles.feedItem}>
+            <div className={styles.feedDot} />
+            <div className={styles.feedBody}>
+              <div className={styles.feedTop}>
+                <span className={styles.feedMachine}>{f.machine}</span>
+                <span className={styles.feedCode}>{f.fault_code}</span>
+                <Badge status={f.status} />
+              </div>
+              <div className={styles.feedMeta}>
+                {f.root_cause && <span className={styles.feedCause}>{f.root_cause}</span>}
+                <span className={styles.feedTime}>{formatTime(f.created_at, t)}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function formatTime(ts, t) {
+  if (!ts) return "";
+  const diff = (Date.now() - new Date(ts).getTime()) / 1000;
+  if (diff < 60) return t("dashboard.just_now");
+  const mins = Math.floor(diff / 60);
+  if (mins < 120) return `${mins} ${t("dashboard.min_ago")}`;
+  return new Date(ts).toLocaleDateString();
+}
+
 function EvalCard({ data }) {
   if (!data || !data.configs?.length) return null;
   return (
@@ -42,20 +113,17 @@ function EvalCard({ data }) {
   );
 }
 
-function SavingsCalculator({ metrics }) {
+function SavingsCalculator({ metrics, t }) {
   const [faults, setFaults] = useState(10);
   const [cost, setCost] = useState(50);
   const [baseline, setBaseline] = useState(60);
 
+  const hasRealMetrics = metrics &&
+    (Number(metrics?.avg_time_to_diagnosis_sec) > 0 || Number(metrics?.avg_time_to_fix_min) > 0);
+
   const torqDiagnosis = (metrics?.avg_time_to_diagnosis_sec || 0) / 60;
   const torqFix = metrics?.avg_time_to_fix_min || 0;
-  let torqMttr = torqDiagnosis + torqFix;
-  let isEstimate = false;
-
-  if (torqMttr === 0) {
-    torqMttr = 5;
-    isEstimate = true;
-  }
+  const torqMttr = torqDiagnosis + torqFix;
 
   const savedMinsPerFault = Math.max(0, baseline - torqMttr);
   const savedHoursPerWeek = (savedMinsPerFault * faults) / 60;
@@ -64,34 +132,34 @@ function SavingsCalculator({ metrics }) {
 
   return (
     <div className={`${styles.card} ${styles.calcCard}`}>
-      <div className={styles.cardHead}>ROI &amp; Savings Calculator</div>
+      <div className={styles.cardHead}>{t("dashboard.roi_title")}</div>
       <div className={styles.calcGrid}>
         <div className={styles.calcInputs}>
           <label>
-            <span>Faults / week</span>
+            <span>{t("dashboard.faults_per_week")}</span>
             <input type="number" value={faults} onChange={e => setFaults(Number(e.target.value))} />
           </label>
           <label>
-            <span>Downtime cost / min ($)</span>
+            <span>{t("dashboard.downtime_cost")}</span>
             <input type="number" value={cost} onChange={e => setCost(Number(e.target.value))} />
           </label>
           <label>
-            <span>Baseline MTTR (min)</span>
+            <span>{t("dashboard.baseline_mttr")}</span>
             <input type="number" value={baseline} onChange={e => setBaseline(Number(e.target.value))} />
           </label>
         </div>
         <div className={styles.calcOutputs}>
           <div className={styles.calcRes}>
-            <small>Hours saved / week</small>
+            <small>{t("dashboard.hours_saved")}</small>
             <div className={styles.calcResRow}>
-              <b>{savedHoursPerWeek.toFixed(1)}h</b>
+              <b className={styles.hours}>{savedHoursPerWeek.toFixed(1)}h</b>
               <span className={styles.calcFormula}>
                 ({faults} faults &times; {savedMinsPerFault.toFixed(1)} min) &divide; 60
               </span>
             </div>
           </div>
           <div className={styles.calcRes}>
-            <small>Money saved / year</small>
+            <small>{t("dashboard.money_saved")}</small>
             <div className={styles.calcResRow}>
               <b className={styles.money}>${Math.round(savedMoneyPerYear).toLocaleString()}</b>
               <span className={styles.calcFormula}>
@@ -100,10 +168,10 @@ function SavingsCalculator({ metrics }) {
             </div>
           </div>
           <div className={styles.calcNote}>
-            {isEstimate ? (
-              <div>*based on est. TORQ avg MTTR of {torqMttr.toFixed(1)} mins</div>
-            ) : (
+            {hasRealMetrics ? (
               <div>*based on measured TORQ avg MTTR of {torqMttr.toFixed(1)} mins</div>
+            ) : (
+              <div>*configure your assumptions above to preview savings</div>
             )}
           </div>
         </div>
@@ -112,63 +180,252 @@ function SavingsCalculator({ metrics }) {
   );
 }
 
+function TrendChart({ data }) {
+  if (!data || data.length === 0) {
+    return (
+      <div className={styles.card} style={{ minHeight: 200, display: "flex", alignItems: "center", justifyContent: "center" }}>
+        <span className={styles.chartEmpty}>No trend data yet</span>
+      </div>
+    );
+  }
+  return (
+    <div className={styles.card}>
+      <div className={styles.cardHead}>Time-to-diagnosis / MTTR trend</div>
+      <ResponsiveContainer width="100%" height={200}>
+        <LineChart data={data}>
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--border-color)" />
+          <XAxis dataKey="label" tick={{ fontSize: 11, fill: "var(--text-muted)" }} />
+          <YAxis tick={{ fontSize: 11, fill: "var(--text-muted)" }} />
+          <ReTooltip contentStyle={{ background: "var(--surface)", border: "1px solid var(--border-color)", borderRadius: 8, fontSize: 12 }} />
+          <Line type="monotone" dataKey="diagnosis" stroke="var(--text-primary)" strokeWidth={2} name="Diagnosis (s)" dot={{ r: 3 }} />
+          <Line type="monotone" dataKey="mttr" stroke="#1a8a3a" strokeWidth={2} name="MTTR (min)" dot={{ r: 3 }} />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+function FaultsPerMachineChart({ data }) {
+  if (!data || data.length === 0) {
+    return (
+      <div className={styles.card} style={{ minHeight: 200, display: "flex", alignItems: "center", justifyContent: "center" }}>
+        <span className={styles.chartEmpty}>No machine data yet</span>
+      </div>
+    );
+  }
+  return (
+    <div className={styles.card}>
+      <div className={styles.cardHead}>Faults per machine</div>
+      <ResponsiveContainer width="100%" height={200}>
+        <BarChart data={data}>
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--border-color)" />
+          <XAxis dataKey="machine" tick={{ fontSize: 11, fill: "var(--text-muted)" }} />
+          <YAxis tick={{ fontSize: 11, fill: "var(--text-muted)" }} />
+          <ReTooltip contentStyle={{ background: "var(--surface)", border: "1px solid var(--border-color)", borderRadius: 8, fontSize: 12 }} />
+          <Bar dataKey="count" fill="var(--text-primary)" radius={[4, 4, 0, 0]} />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+function Drawer({ workOrder, onClose }) {
+  const w = workOrder;
+  if (!w) return null;
+
+  const meta = [
+    { label: "Status", value: w.status },
+    { label: "Assigned to", value: w.assigned_to },
+    { label: "Confidence", value: w.confidence != null ? `${(w.confidence * 100).toFixed(0)}%` : null },
+    { label: "Created", value: w.created_at ? new Date(w.created_at).toLocaleString() : null },
+    { label: "Resolved", value: w.resolved_at ? new Date(w.resolved_at).toLocaleString() : null },
+  ].filter((m) => m.value);
+
+  return (
+    <div className={styles.drawer} onClick={onClose}>
+      <div className={styles.panel} onClick={(e) => e.stopPropagation()}>
+        <button className={styles.closeBtn} onClick={onClose}>close</button>
+        <h3 className={styles.panelTitle}>{w.machine} &mdash; {w.fault_code}</h3>
+
+        <div className={styles.drawerMeta}>
+          {meta.map((m) => (
+            <div key={m.label} className={styles.drawerMetaRow}>
+              <span className={styles.drawerMetaLabel}>{m.label}</span>
+              <span className={styles.drawerMetaVal}>
+                {m.label === "Status" ? <Badge status={m.value} /> : m.value}
+              </span>
+            </div>
+          ))}
+          <ConfidenceBadge confidence={w.confidence} />
+        </div>
+
+        <a className={styles.pdfLink} href={`/api/work-orders/${w.id}/pdf`} target="_blank" rel="noreferrer">
+          Download PDF (EN/FR/AR)
+        </a>
+
+        {w.root_cause && <p className={styles.cause}>{w.root_cause}</p>}
+
+        {w.repair_steps && (
+          <div className={styles.drawerSection}>
+            <div className={styles.drawerSectionLabel}>Repair steps</div>
+            <pre className={styles.drawerPre}>{w.repair_steps}</pre>
+          </div>
+        )}
+
+        {w.parts?.length > 0 && (
+          <div className={styles.drawerSection}>
+            <div className={styles.drawerSectionLabel}>Parts</div>
+            <ul className={styles.drawerUl}>
+              {w.parts.map((p, i) => <li key={i}>{p}</li>)}
+            </ul>
+          </div>
+        )}
+
+        {w.tools?.length > 0 && (
+          <div className={styles.drawerSection}>
+            <div className={styles.drawerSectionLabel}>Tools</div>
+            <ul className={styles.drawerUl}>
+              {w.tools.map((t, i) => <li key={i}>{t}</li>)}
+            </ul>
+          </div>
+        )}
+
+        {w.safety_warnings?.length > 0 && (
+          <div className={styles.drawerSection}>
+            <div className={styles.drawerSectionLabel}>Safety warnings</div>
+            <ul className={styles.drawerUl}>
+              {w.safety_warnings.map((s, i) => <li key={i}>{s}</li>)}
+            </ul>
+          </div>
+        )}
+
+        {w.sources?.length > 0 && (
+          <div className={styles.sources}>
+            <div className={styles.sourceLabel}>Grounded in</div>
+            <ul>
+              {w.sources.map((s, i) => <li key={i}>{s}</li>)}
+            </ul>
+          </div>
+        )}
+
+        {["en", "fr", "ar"].map((lng) =>
+          w.content?.[lng] ? (
+            <div key={lng} className={styles.langBlock}>
+              <div className={styles.langLabel}>{lng.toUpperCase()}</div>
+              <pre dir={lng === "ar" ? "rtl" : "ltr"}>{w.content[lng]}</pre>
+            </div>
+          ) : null
+        )}
+      </div>
+    </div>
+  );
+}
+
+function StatusFilter({ value, onChange, t }) {
+  return (
+    <select className={styles.filterSelect} value={value} onChange={(e) => onChange(e.target.value)}>
+      <option value="">{t("dashboard.all_statuses")}</option>
+      <option value="pending">Pending</option>
+      <option value="dispatched">Dispatched</option>
+      <option value="resolved">Resolved</option>
+      <option value="rejected">Rejected</option>
+    </select>
+  );
+}
+
 export default function Dashboard() {
+  const { t } = useI18n();
+  const toast = useToast();
+
   const [metrics, setMetrics] = useState(null);
   const [evalData, setEvalData] = useState(null);
   const [pending, setPending] = useState([]);
   const [all, setAll] = useState([]);
+  const [trendData, setTrendData] = useState(null);
+  const [fpmData, setFpmData] = useState(null);
   const [selected, setSelected] = useState(null);
   const [busy, setBusy] = useState(false);
-  const [err, setErr] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [statusFilter, setStatusFilter] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
 
   const load = useCallback(async () => {
     try {
-      const [m, p, a, ev] = await Promise.all([
+      const [m, p, a, ev, trend, fpm] = await Promise.all([
         api.getMetrics(),
         api.getWorkOrders("pending"),
         api.getWorkOrders(),
         api.getEval().catch(() => null),
+        api.getTrend(),
+        api.getFaultsPerMachine(),
       ]);
       setMetrics(m);
       setPending(p);
       setAll(a);
       setEvalData(ev);
-      setErr(null);
+      setTrendData(trend);
+      setFpmData(fpm);
+      setLoading(false);
     } catch (e) {
-      setErr("Backend unreachable. Start it: uv run uvicorn torq.api.main:app");
+      setLoading(false);
     }
   }, []);
 
   useEffect(() => {
     load();
-    const t = setInterval(load, 4000);
-    return () => clearInterval(t);
+    const tId = setInterval(load, 4000);
+    return () => clearInterval(tId);
   }, [load]);
 
-  const act = async (fn) => {
+  const act = async (fn, toastMsg, toastType = "success") => {
     setBusy(true);
     try {
       await fn();
+      if (toastMsg) toast(toastMsg, toastType);
       await load();
     } catch (e) {
-      setErr(String(e.message || e));
+      toast(String(e.message || e), "error");
     } finally {
       setBusy(false);
     }
   };
 
   const simulate = () =>
-    act(() =>
-      api.reportFault({
+    act(
+      () => api.reportFault({
         fault_code: "E-471",
         machine: "CM-350 Line 2",
         context: "Motor tripped after hours running.",
-      })
+      }),
+      t("dashboard.toast_simulated")
     );
 
-  const pct = (x) => (x == null ? "-" : Math.round(x * 100) + "%");
-  const secs = (x) => (x == null ? "-" : x + "s");
-  const mins = (x) => (x == null ? "-" : x + " min");
+  const sortedFaults = useMemo(() => {
+    return [...all]
+      .filter((w) => w.created_at)
+      .sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
+      .slice(0, 10);
+  }, [all]);
+
+  const filteredAll = useMemo(() => {
+    let list = all;
+    if (statusFilter) {
+      list = list.filter((w) => w.status === statusFilter);
+    }
+    if (searchQuery) {
+      const q = searchQuery.toLowerCase();
+      list = list.filter((w) =>
+        (w.machine || "").toLowerCase().includes(q) ||
+        (w.fault_code || "").toLowerCase().includes(q) ||
+        (w.root_cause || "").toLowerCase().includes(q)
+      );
+    }
+    return list;
+  }, [all, statusFilter, searchQuery]);
+
+  const pct = (x) => (x == null || x === 0 ? "—" : Math.round(x * 100) + "%");
+  const secs = (x) => (x == null || x === 0 ? "—" : x + "s");
+  const mins = (x) => (x == null || x === 0 ? "—" : x + " min");
 
   return (
     <div className={styles.page}>
@@ -176,124 +433,152 @@ export default function Dashboard() {
 
       <div className={styles.app}>
         <header className={styles.header}>
-          <h1 className={styles.heading}>Supervisor dashboard</h1>
-          <p className={styles.sub}>Approval queue and downtime metrics</p>
+          <h1 className={styles.heading}>{t("dashboard.title")}</h1>
+          <p className={styles.sub}>{t("dashboard.subtitle")}</p>
         </header>
 
-        {err && <div className={styles.err}>{err}</div>}
-
         <section className={styles.tiles}>
-          <Tile label="Total work orders" value={metrics?.total_work_orders ?? "-"} />
-          <Tile label="Avg time to diagnosis" value={secs(metrics?.avg_time_to_diagnosis_sec)} />
-          <Tile label="Avg time to fix" value={mins(metrics?.avg_time_to_fix_min)} />
-          <Tile label="Resolution rate" value={pct(metrics?.resolution_rate)} />
+          {loading ? (
+            <>
+              <div className={styles.tile}><Skeleton height={32} width={80} /><Skeleton height={14} width={120} style={{ marginTop: 8 }} /></div>
+              <div className={styles.tile}><Skeleton height={32} width={80} /><Skeleton height={14} width={120} style={{ marginTop: 8 }} /></div>
+              <div className={styles.tile}><Skeleton height={32} width={80} /><Skeleton height={14} width={120} style={{ marginTop: 8 }} /></div>
+              <div className={styles.tile}><Skeleton height={32} width={80} /><Skeleton height={14} width={120} style={{ marginTop: 8 }} /></div>
+            </>
+          ) : (
+            <>
+              <Tile label={t("dashboard.total")} value={metrics?.total_work_orders ?? "-"} />
+              <Tile label={t("dashboard.avg_diag")} value={secs(metrics?.avg_time_to_diagnosis_sec)} />
+              <Tile label={t("dashboard.avg_fix")} value={mins(metrics?.avg_time_to_fix_min)} />
+              <Tile label={t("dashboard.res_rate")} value={pct(metrics?.resolution_rate)} />
+            </>
+          )}
         </section>
 
+        <LiveFeed faults={sortedFaults} t={t} />
+
         <div className={styles.grid}>
-          <EvalCard data={evalData} />
-          <SavingsCalculator metrics={metrics} />
+          {loading ? (
+            <>
+              <div className={styles.card}><Skeleton height={14} width={180} /><Skeleton height={10} style={{ marginTop: 16 }} /><Skeleton height={10} style={{ marginTop: 8 }} /><Skeleton height={10} style={{ marginTop: 8 }} /></div>
+              <div className={styles.card}><Skeleton height={14} width={180} /><Skeleton height={10} style={{ marginTop: 16 }} /><Skeleton height={10} style={{ marginTop: 8 }} /></div>
+            </>
+          ) : (
+            <>
+              <EvalCard data={evalData} />
+              <SavingsCalculator metrics={metrics} t={t} />
+            </>
+          )}
         </div>
 
-        <button className={styles.simBtn} disabled={busy} onClick={simulate}>
-          Simulate fault (E-471, CM-350 Line 2)
+        {loading ? (
+          <div style={{ display: "flex", gap: 16, marginBottom: 24 }}>
+            <div className={styles.card} style={{ flex: 1 }}><Skeleton height={200} /></div>
+            <div className={styles.card} style={{ flex: 1 }}><Skeleton height={200} /></div>
+          </div>
+        ) : (
+          <div className={styles.grid}>
+            <TrendChart data={trendData} />
+            <FaultsPerMachineChart data={fpmData} />
+          </div>
+        )}
+
+        <button className={styles.simBtn} disabled={busy || loading} onClick={simulate}>
+          {t("dashboard.simulate")}
         </button>
 
-        <h2 className={styles.sectionTitle}>Pending approval</h2>
+        <h2 className={styles.sectionTitle}>{t("dashboard.pending")}</h2>
         <div className={styles.tableWrap}>
           <table className={styles.table}>
             <thead>
               <tr>
-                <th>ID</th>
-                <th>Machine</th>
-                <th>Fault</th>
-                <th>Root cause</th>
+                <th>{t("dashboard.id")}</th>
+                <th>{t("dashboard.machine")}</th>
+                <th>{t("dashboard.fault")}</th>
+                <th>{t("dashboard.cause")}</th>
                 <th></th>
               </tr>
             </thead>
             <tbody>
-              {pending.length === 0 && (
-                <tr>
-                  <td colSpan={5} className={styles.muted}>Queue empty</td>
-                </tr>
+              {loading ? (
+                <tr><td colSpan={5} className={styles.muted}>Loading…</td></tr>
+              ) : pending.length === 0 ? (
+                <tr><td colSpan={5} className={styles.muted}>{t("dashboard.queue_empty")}</td></tr>
+              ) : (
+                pending.map((w) => (
+                  <tr key={w.id}>
+                    <td><a className={styles.link} onClick={() => setSelected(w)}>{w.id}</a></td>
+                    <td>{w.machine}</td>
+                    <td>{w.fault_code} <ConfidenceBadge confidence={w.confidence} /></td>
+                    <td className={styles.cause}>{w.root_cause}</td>
+                    <td className={styles.actions}>
+                      <button className={styles.approveBtn} disabled={busy} onClick={() => act(() => api.approve(w.id), `${t("dashboard.toast_approved")} — ${w.id}`)}>
+                        {t("dashboard.approve")}
+                      </button>
+                      <button className={styles.rejectBtn} disabled={busy} onClick={() => act(() => api.reject(w.id), `${t("dashboard.toast_rejected")} — ${w.id}`)}>
+                        {t("dashboard.reject")}
+                      </button>
+                    </td>
+                  </tr>
+                ))
               )}
-              {pending.map((w) => (
-                <tr key={w.id}>
-                  <td><a className={styles.link} onClick={() => setSelected(w)}>{w.id}</a></td>
-                  <td>{w.machine}</td>
-                  <td>{w.fault_code}</td>
-                  <td className={styles.cause}>{w.root_cause}</td>
-                  <td className={styles.actions}>
-                    <button className={styles.approveBtn} disabled={busy} onClick={() => act(() => api.approve(w.id))}>Approve</button>
-                    <button className={styles.rejectBtn} disabled={busy} onClick={() => act(() => api.reject(w.id))}>Reject</button>
-                  </td>
-                </tr>
-              ))}
             </tbody>
           </table>
         </div>
 
-        <h2 className={styles.sectionTitle}>All work orders</h2>
+        <h2 className={styles.sectionTitle}>{t("dashboard.all")}</h2>
+        <div className={styles.toolbar}>
+          <StatusFilter value={statusFilter} onChange={setStatusFilter} t={t} />
+          <input
+            className={styles.searchInput}
+            type="text"
+            placeholder={t("dashboard.search")}
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
         <div className={styles.tableWrap}>
           <table className={styles.table}>
             <thead>
               <tr>
-                <th>ID</th>
-                <th>Machine</th>
-                <th>Fault</th>
-                <th>Status</th>
-                <th>Assigned</th>
+                <th>{t("dashboard.id")}</th>
+                <th>{t("dashboard.machine")}</th>
+                <th>{t("dashboard.fault")}</th>
+                <th>{t("dashboard.status")}</th>
+                <th>{t("dashboard.assigned")}</th>
                 <th></th>
               </tr>
             </thead>
             <tbody>
-              {all.map((w) => (
-                <tr key={w.id}>
-                  <td><a className={styles.link} onClick={() => setSelected(w)}>{w.id}</a></td>
-                  <td>{w.machine}</td>
-                  <td>{w.fault_code}</td>
-                  <td><Badge status={w.status} /></td>
-                  <td>{w.assigned_to || "-"}</td>
-                  <td>
-                    {w.status === "dispatched" && (
-                      <button className={styles.approveBtn} disabled={busy} onClick={() => act(() => api.recordOutcome(w.id, FIX))}>Mark fixed</button>
-                    )}
-                  </td>
-                </tr>
-              ))}
+              {loading ? (
+                <tr><td colSpan={6} className={styles.muted}>Loading…</td></tr>
+              ) : filteredAll.length === 0 ? (
+                <tr><td colSpan={6} className={styles.muted}>{t("dashboard.no_orders")}</td></tr>
+              ) : (
+                filteredAll.map((w) => (
+                  <tr key={w.id}>
+                    <td><a className={styles.link} onClick={() => setSelected(w)}>{w.id}</a></td>
+                    <td>{w.machine}</td>
+                    <td>{w.fault_code}</td>
+                    <td><Badge status={w.status} /></td>
+                    <td>{w.assigned_to || "-"}</td>
+                    <td>
+                      {w.status === "dispatched" && (
+                        <button className={styles.approveBtn} disabled={busy} onClick={() => act(() => api.recordOutcome(w.id, FIX), `${t("dashboard.toast_fixed")} — ${w.id}`)}>
+                          {t("dashboard.mark_fixed")}
+                        </button>
+                      )}
+                    </td>
+                  </tr>
+                ))
+              )}
             </tbody>
           </table>
         </div>
 
-        {selected && (
-          <div className={styles.drawer} onClick={() => setSelected(null)}>
-            <div className={styles.panel} onClick={(e) => e.stopPropagation()}>
-              <button className={styles.closeBtn} onClick={() => setSelected(null)}>close</button>
-              <h3 className={styles.panelTitle}>{selected.machine} &mdash; {selected.fault_code}</h3>
-              <a className={styles.pdfLink} href={`/api/work-orders/${selected.id}/pdf`} target="_blank" rel="noreferrer">
-                Download PDF (EN/FR/AR)
-              </a>
-              <p className={styles.cause}>{selected.root_cause}</p>
-              {selected.sources?.length > 0 && (
-                <div className={styles.sources}>
-                  <div className={styles.sourceLabel}>Grounded in</div>
-                  <ul>
-                    {selected.sources.map((s, i) => <li key={i}>{s}</li>)}
-                  </ul>
-                </div>
-              )}
-              {["en", "fr", "ar"].map((lng) =>
-                selected.content?.[lng] ? (
-                  <div key={lng} className={styles.langBlock}>
-                    <div className={styles.langLabel}>{lng.toUpperCase()}</div>
-                    <pre dir={lng === "ar" ? "rtl" : "ltr"}>{selected.content[lng]}</pre>
-                  </div>
-                ) : null
-              )}
-            </div>
-          </div>
-        )}
+        <Drawer workOrder={selected} onClose={() => setSelected(null)} />
 
-        <p className={styles.footer}>From fault code to fixed.</p>
+        <p className={styles.footer}>{t("dashboard.footer")}</p>
       </div>
     </div>
   );
diff --git a/web/src/pages/Dashboard.module.css b/web/src/pages/Dashboard.module.css
index 9259115..c06ab63 100644
--- a/web/src/pages/Dashboard.module.css
+++ b/web/src/pages/Dashboard.module.css
@@ -34,17 +34,6 @@
   transition: color 0.35s;
 }
 
-.err {
-  background: rgba(248, 81, 73, 0.08);
-  color: #dc3545;
-  padding: 12px 16px;
-  border-radius: 10px;
-  margin: 20px 0;
-  font-size: 14px;
-  line-height: 1.5;
-  border: 1px solid rgba(248, 81, 73, 0.2);
-}
-
 /* ── Tiles ── */
 
 .tiles {
@@ -245,7 +234,11 @@
 }
 
 .calcRes b.money {
-  color: var(--text-primary);
+  color: #1a8a3a;
+}
+
+.calcRes b.hours {
+  color: #1a73e8;
 }
 
 .calcResRow {
@@ -437,8 +430,8 @@
 }
 
 .approveBtn {
-  background: var(--text-primary);
-  color: var(--bg-primary);
+  background: #1a8a3a;
+  color: #fff;
   border: none;
   border-radius: 6px;
   padding: 7px 16px;
@@ -447,11 +440,11 @@
   font-weight: 700;
   font-size: 12px;
   letter-spacing: 0.01em;
-  transition: opacity 0.2s, background 0.35s, color 0.35s;
+  transition: opacity 0.2s;
 }
 
 .approveBtn:disabled {
-  opacity: 0.4;
+  opacity: 0.35;
   cursor: default;
 }
 
@@ -461,26 +454,24 @@
 
 .rejectBtn {
   background: transparent;
-  color: var(--text-muted);
-  border: 1px solid var(--border-color);
+  color: #dc3545;
+  border: 1px solid #dc3545;
   border-radius: 6px;
   padding: 7px 16px;
   cursor: pointer;
   font-family: "ALTGumbo", system-ui, sans-serif;
-  font-weight: 500;
+  font-weight: 600;
   font-size: 12px;
   margin-left: 8px;
-  transition: color 0.2s, border-color 0.2s, background 0.2s;
+  transition: opacity 0.2s, background 0.2s;
 }
 
 .rejectBtn:hover:not(:disabled) {
-  color: #dc3545;
-  border-color: #dc3545;
-  background: rgba(248, 81, 73, 0.04);
+  background: rgba(248, 81, 73, 0.08);
 }
 
 .rejectBtn:disabled {
-  opacity: 0.4;
+  opacity: 0.35;
   cursor: default;
 }
 
@@ -608,6 +599,375 @@
   text-align: right;
 }
 
+/* ── Live fault feed ── */
+
+.feedCard {
+  background: var(--surface);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 20px 24px;
+  margin-bottom: 24px;
+  box-shadow: var(--shadow-sm);
+  transition: background 0.35s, border-color 0.35s;
+}
+
+.feedHead {
+  font-family: "ALTGumbo", system-ui, sans-serif;
+  font-weight: 700;
+  font-size: 12px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 16px;
+  transition: color 0.35s;
+}
+
+.feedList {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.feedItem {
+  display: flex;
+  gap: 14px;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--border-color);
+  transition: border-color 0.35s;
+}
+
+.feedItem:last-child {
+  border-bottom: none;
+}
+
+.feedDot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  margin-top: 6px;
+  flex-shrink: 0;
+  transition: background 0.35s;
+}
+
+.feedBody {
+  flex: 1;
+  min-width: 0;
+}
+
+.feedTop {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.feedMachine {
+  font-family: "ALTGumbo", system-ui, sans-serif;
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--text-primary);
+  transition: color 0.35s;
+}
+
+.feedCode {
+  font-family: "SF Mono", "Cascadia Code", "Consolas", monospace;
+  font-size: 12px;
+  color: var(--text-muted);
+  padding: 2px 8px;
+  background: var(--bg-secondary);
+  border-radius: 4px;
+  transition: color 0.35s, background 0.35s;
+}
+
+.feedMeta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 4px;
+  gap: 12px;
+}
+
+.feedCause {
+  font-family: "ALTGumbo", system-ui, sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: color 0.35s;
+}
+
+.feedTime {
+  font-family: "ALTGumbo", system-ui, sans-serif;
+  font-weight: 400;
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  opacity: 0.6;
+  transition: color 0.35s;
+}
+
+.feedEmpty {
+  font-family: "ALTGumbo", system-ui, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  color: var(--text-muted);
+  opacity: 0.5;
+  padding: 8px 0;
+  text-align: center;
+  transition: color 0.35s;
+}
+
+/* ── Confidence badge ── */
+
+.lowConfidence {
+  background: rgba(248, 81, 73, 0.12);
+  color: #dc3545;
+  font-weight: 700;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  margin-left: 6px;
+}
+
+.highConfidence {
+  background: rgba(63, 185, 80, 0.12);
+  color: #1a8a3a;
+  font-weight: 600;
+  font-size: 11px;
+  margin-left: 6px;
+}
+
+/* ── Drawer sections ── */
+
+.drawerMeta {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 16px;
+  background: var(--bg-secondary);
+  padding: 16px;
+  border-radius: 10px;
+  border: 1px solid var(--border-color);
+  transition: background 0.35s, border-color 0.35s;
+}
+
+.drawerMetaRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.drawerMetaLabel {
+  font-family: "ALTGumbo", system-ui, sans-serif;
+  font-weight: 700;
+  font-size: 11px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  transition: color 0.35s;
+}
+
+.drawerMetaVal {
+  font-family: "ALTGumbo", system-ui, sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  color: var(--text-primary);
+  transition: color 0.35s;
+}
+
+.drawerSection {
+  margin: 20px 0;
+}
+
+.drawerSectionLabel {
+  font-family: "ALTGumbo", system-ui, sans-serif;
+  font-weight: 700;
+  font-size: 11px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 8px;
+  transition: color 0.35s;
+}
+
+.drawerPre {
+  white-space: pre-wrap;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 14px;
+  font-family: "ALTGumbo", system-ui, sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 1.6;
+  margin: 0;
+  color: var(--text-primary);
+  transition: background 0.35s, border-color 0.35s, color 0.35s;
+}
+
+.drawerUl {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.drawerUl li {
+  font-family: "ALTGumbo", system-ui, sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-muted);
+  margin: 3px 0;
+  transition: color 0.35s;
+}
+
+/* ── Charts ── */
+
+.chartEmpty {
+  font-family: "ALTGumbo", system-ui, sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  color: var(--text-muted);
+  opacity: 0.5;
+  transition: color 0.35s;
+}
+
+/* ── Toolbar ── */
+
+.toolbar {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.filterSelect {
+  font-family: "ALTGumbo", system-ui, sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  color: var(--text-primary);
+  background: var(--surface);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background 0.35s, border-color 0.35s, color 0.35s;
+}
+
+.searchInput {
+  flex: 1;
+  font-family: "ALTGumbo", system-ui, sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  color: var(--text-primary);
+  background: var(--surface);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 8px 12px;
+  outline: none;
+  transition: background 0.35s, border-color 0.35s, color 0.35s;
+}
+
+.searchInput:focus {
+  border-color: var(--text-primary);
+}
+
+.searchInput::placeholder {
+  color: var(--text-muted);
+  opacity: 0.5;
+}
+
+/* ── Mobile responsive ── */
+
+@media (max-width: 720px) {
+  .app {
+    padding: 0 16px 40px;
+  }
+
+  .header {
+    padding: 24px 0 4px;
+  }
+
+  .heading {
+    font-size: 22px;
+  }
+
+  .tiles {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    margin: 16px 0;
+  }
+
+  .tile {
+    padding: 16px;
+  }
+
+  .tile b {
+    font-size: 24px;
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+    gap: 14px;
+  }
+
+  .tableWrap {
+    border-radius: 0;
+    margin: 0 -16px;
+    border-left: none;
+    border-right: none;
+  }
+
+  .table th,
+  .table td {
+    padding: 10px 12px;
+    font-size: 13px;
+  }
+
+  .panel {
+    width: 100vw;
+    padding: 24px 20px;
+  }
+
+  .toolbar {
+    flex-direction: column;
+  }
+
+  .feedItem {
+    padding: 10px 0;
+  }
+
+  .feedMeta {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+  }
+}
+
+@media (max-width: 480px) {
+  .tiles {
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+  }
+
+  .tile b {
+    font-size: 20px;
+  }
+
+  .table th,
+  .table td {
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+
+  .table td:last-child,
+  .table th:last-child {
+    display: none;
+  }
+}
+
 /* ── Footer ── */
 
 .footer {
diff --git a/web/src/styles.css b/web/src/styles.css
index 3c55f0f..ff2c8bc 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -112,3 +112,71 @@ body {
   background: var(--brand);
   color: var(--white);
 }
+
+/* ── Toast ── */
+
+.toastContainer {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.toast {
+  background: var(--text-primary);
+  color: var(--bg-primary);
+  padding: 12px 20px;
+  border-radius: 10px;
+  font-family: "ALTGumbo", system-ui, sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  box-shadow: var(--shadow-lg);
+  animation: toastIn 0.3s ease, toastOut 0.3s ease 3.2s forwards;
+  pointer-events: auto;
+  max-width: 360px;
+  line-height: 1.4;
+  transition: background 0.35s, color 0.35s;
+}
+
+.toast--success {
+  background: #1a8a3a;
+  color: #fff;
+}
+
+.toast--error {
+  background: #dc3545;
+  color: #fff;
+}
+
+.toast--info {
+  background: var(--text-primary);
+  color: var(--bg-primary);
+}
+
+@keyframes toastIn {
+  from { opacity: 0; transform: translateY(16px) scale(0.96); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes toastOut {
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(0.96); }
+}
+
+/* ── Loading skeleton ── */
+
+@keyframes shimmer {
+  0%   { background-position: -400px 0; }
+  100% { background-position: 400px 0; }
+}
+
+.skeleton {
+  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border-color) 50%, var(--bg-secondary) 75%);
+  background-size: 800px 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  border-radius: 8px;
+}
diff --git a/web/src/toast.jsx b/web/src/toast.jsx
new file mode 100644
index 0000000..9925fb3
--- /dev/null
+++ b/web/src/toast.jsx
@@ -0,0 +1,34 @@
+import { createContext, useContext, useState, useCallback } from "react";
+
+const ToastContext = createContext();
+
+let toastId = 0;
+
+export function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+
+  const toast = useCallback((message, type = "info") => {
+    const id = ++toastId;
+    setToasts((prev) => [...prev, { id, message, type }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, 3500);
+  }, []);
+
+  return (
+    <ToastContext.Provider value={toast}>
+      {children}
+      <div className="toastContainer">
+        {toasts.map((t) => (
+          <div key={t.id} className={`toast toast--${t.type}`}>
+            {t.message}
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  return useContext(ToastContext);
+}