Add analysis charts and utilities

- Introduced `StanceDistributionChart`, `TimeSeriesChart`, and `TopicFrequencyChart` components for visualizing analysis results.
- Implemented utility functions for calculating stance statistics, topic frequency, and time-based statistics.
- Updated `AnalysisPage` to include new charts and display user analysis statistics.
- Added `recharts` library for charting capabilities and updated dependencies in `package.json` and `package-lock.json`.

package-lock.json

@@ -17,6 +17,7 @@
         "react-dom": "^19.1.0",
         "react-router-dom": "^7.10.1",
         "react-scripts": "5.0.1",
+        "recharts": "^3.5.1",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -3005,6 +3006,42 @@
         }
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.1.tgz",
+      "integrity": "sha512-HjhlEREguAyBTGNzRlGNiDHGQ2EjLSPWwdhhpoEqHYy8hWak3Dp6/fU72OfqVsiMb8S6rbfPsWUF24fxpilrVA==",
+      "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/@reduxjs/toolkit/node_modules/immer": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.0.1.tgz",
+      "integrity": "sha512-naDCyggtcBWANtIrjQEajhhBEuL9b0Zg4zmlWK2CzS6xCWSE39/vvf4LqnMjUAWHBhot4m9MHCM/Z+mfWhUkiA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3120,6 +3157,18 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
+      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+      "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/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -3575,6 +3624,69 @@
         "@types/node": "*"
       }
     },
+    "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.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+      "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/eslint": {
       "version": "8.56.12",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz",
@@ -3838,6 +3950,12 @@
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
       "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/@types/ws": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -5616,6 +5734,15 @@
         "wrap-ansi": "^7.0.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/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -6354,6 +6481,127 @@
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
       "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.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "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/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -6448,6 +6696,12 @@
       "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
       "license": "MIT"
     },
+    "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/dedent": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
@@ -7097,6 +7351,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-toolkit": {
+      "version": "1.43.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.43.0.tgz",
+      "integrity": "sha512-SKCT8AsWvYzBBuUqMk4NPwFlSdqLpJwmy6AP322ERn8W2YLIB6JBXnwMI2Qsh2gfphT3q7EKAxKb23cvFHFwKA==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -9240,6 +9504,15 @@
         "node": ">= 0.4"
       }
     },
+    "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/ipaddr.js": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.3.0.tgz",
@@ -13790,6 +14063,29 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "license": "MIT"
     },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+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.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -13958,6 +14254,52 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/recharts": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.5.1.tgz",
+      "integrity": "sha512-+v+HJojK7gnEgG6h+b2u7k8HH7FhyFUzAc4+cPrsjL4Otdgqr/ecXzAnHciqlzV1ko064eNcsdzrYOM78kankA==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "1.x.x || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^10.1.1",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.1.1",
+        "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/recharts/node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "license": "MIT"
+    },
+    "node_modules/recharts/node_modules/immer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/recursive-readdir": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
@@ -13983,6 +14325,21 @@
         "node": ">=8"
       }
     },
+    "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/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -14136,6 +14493,12 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "license": "MIT"
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -16080,6 +16443,12 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "license": "MIT"
     },
+    "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/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -16635,6 +17004,15 @@
         "requires-port": "^1.0.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/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -16717,6 +17095,28 @@
         "node": ">= 0.8"
       }
     },
+    "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/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",

package.json

@@ -12,6 +12,7 @@
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.10.1",
     "react-scripts": "5.0.1",
+    "recharts": "^3.5.1",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {

src/app/components/analysis/StanceDistributionChart.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
+import type { StanceStats } from '../../utils/analysis.utils.ts';
+
+type StanceDistributionChartProps = {
+  stats: StanceStats;
+};
+
+const COLORS = {
+  PRO: '#10b981', // green-500
+  CON: '#ef4444', // red-500
+};
+
+const StanceDistributionChart: React.FC<StanceDistributionChartProps> = ({ stats }) => {
+  const data = [
+    { name: 'PRO', value: stats.pro, percentage: stats.proPercentage },
+    { name: 'CON', value: stats.con, percentage: stats.conPercentage },
+  ];
+
+  return (
+    <div className="h-64 w-full">
+      <ResponsiveContainer width="100%" height="100%">
+        <PieChart>
+          <Pie
+            data={data}
+            cx="50%"
+            cy="50%"
+            labelLine={false}
+            label={({ name, percentage }) => `${name}: ${percentage.toFixed(1)}%`}
+            outerRadius={80}
+            fill="#8884d8"
+            dataKey="value"
+          >
+            {data.map((entry, index) => (
+              <Cell
+                key={`cell-${index}`}
+                fill={entry.name === 'PRO' ? COLORS.PRO : COLORS.CON}
+              />
+            ))}
+          </Pie>
+          <Tooltip
+            formatter={(value: number, name: string, props: any) => [
+              `${value} (${props.payload.percentage.toFixed(1)}%)`,
+              name,
+            ]}
+          />
+          <Legend />
+        </PieChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default StanceDistributionChart;
+

src/app/components/analysis/TimeSeriesChart.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import type { TimeStats } from '../../utils/analysis.utils.ts';
+
+type TimeSeriesChartProps = {
+  data: TimeStats[];
+};
+
+const TimeSeriesChart: React.FC<TimeSeriesChartProps> = ({ data }) => {
+  // Format date for display
+  const chartData = data.map((item) => ({
+    ...item,
+    dateDisplay: new Date(item.date).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+    }),
+  }));
+
+  return (
+    <div className="h-64 w-full">
+      <ResponsiveContainer width="100%" height="100%">
+        <LineChart
+          data={chartData}
+          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+        >
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="dateDisplay" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Line
+            type="monotone"
+            dataKey="count"
+            stroke="#3b82f6"
+            strokeWidth={2}
+            name="Arguments Analyzed"
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default TimeSeriesChart;
+

src/app/components/analysis/TopicFrequencyChart.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import type { TopicFrequency } from '../../utils/analysis.utils.ts';
+
+type TopicFrequencyChartProps = {
+  data: TopicFrequency[];
+};
+
+const TopicFrequencyChart: React.FC<TopicFrequencyChartProps> = ({ data }) => {
+  // Truncate long topic names for display
+  const chartData = data.map((item) => ({
+    ...item,
+    topicDisplay: item.topic.length > 40 ? `${item.topic.substring(0, 40)}...` : item.topic,
+  }));
+
+  return (
+    <div className="h-96 w-full">
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart
+          layout="vertical"
+          data={chartData}
+          margin={{ top: 5, right: 30, left: 150, bottom: 5 }}
+        >
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis type="number" />
+          <YAxis
+            type="category"
+            dataKey="topicDisplay"
+            width={140}
+            style={{ fontSize: '12px' }}
+          />
+          <Tooltip
+            formatter={(value: number, name: string) => [value, name === 'proCount' ? 'PRO' : name === 'conCount' ? 'CON' : 'Total']}
+            contentStyle={{ fontSize: '12px' }}
+          />
+          <Legend
+            formatter={(value) => (value === 'proCount' ? 'PRO' : value === 'conCount' ? 'CON' : 'Total')}
+          />
+          <Bar dataKey="proCount" fill="#10b981" name="proCount" />
+          <Bar dataKey="conCount" fill="#ef4444" name="conCount" />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default TopicFrequencyChart;
+

src/app/pages/AnalysisPage.tsx

@@ -1,8 +1,21 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { parseCsv, formatError } from '../utils/index.ts';
 import { CsvRow } from '../types/index.ts';
 import { AnalysisResult } from '../types/analysis.types.ts';
-import { analyzeArgumentsFromCsv } from '../services/analysis.service.ts';
+import { analyzeArgumentsFromCsv, getAnalysisResults } from '../services/analysis.service.ts';
+import {
+  calculateStanceStats,
+  calculateTopicFrequency,
+  calculateTimeStats,
+  getUniqueTopicsCount,
+  getAverageArgumentLength,
+  getMostRecentAnalysisDate,
+  getOldestAnalysisDate,
+} from '../utils/analysis.utils.ts';
+import StanceDistributionChart from '../components/analysis/StanceDistributionChart.tsx';
+import TopicFrequencyChart from '../components/analysis/TopicFrequencyChart.tsx';
+import TimeSeriesChart from '../components/analysis/TimeSeriesChart.tsx';
+import Loading from '../components/common/Loading.tsx';
 
 const AnalysisPage: React.FC = () => {
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
@@ -11,12 +24,65 @@ const AnalysisPage: React.FC = () => {
   const [error, setError] = useState<string | null>(null);
   const [isAnalyzing, setIsAnalyzing] = useState<boolean>(false);
   const [analysisResults, setAnalysisResults] = useState<AnalysisResult[]>([]);
+  
+  // User's historical analysis data
+  const [userAnalysisData, setUserAnalysisData] = useState<AnalysisResult[]>([]);
+  const [isLoadingStats, setIsLoadingStats] = useState<boolean>(true);
+  const [statsError, setStatsError] = useState<string | null>(null);
 
   const fileName = useMemo(
     () => selectedFile?.name ?? 'Select a CSV file with arguments',
     [selectedFile]
   );
 
+  // Fetch user's analysis data on mount
+  useEffect(() => {
+    const fetchUserAnalysis = async () => {
+      setIsLoadingStats(true);
+      setStatsError(null);
+      try {
+        const response = await getAnalysisResults(1000, 0);
+        setUserAnalysisData(response.results);
+      } catch (err) {
+        setStatsError(formatError(err));
+      } finally {
+        setIsLoadingStats(false);
+      }
+    };
+
+    fetchUserAnalysis();
+  }, []);
+
+  // Calculate statistics from user's analysis data
+  const stanceStats = useMemo(
+    () => calculateStanceStats(userAnalysisData),
+    [userAnalysisData]
+  );
+  const topicFrequency = useMemo(
+    () => calculateTopicFrequency(userAnalysisData, 10),
+    [userAnalysisData]
+  );
+  const timeStats = useMemo(
+    () => calculateTimeStats(userAnalysisData),
+    [userAnalysisData]
+  );
+  const uniqueTopicsCount = useMemo(
+    () => getUniqueTopicsCount(userAnalysisData),
+    [userAnalysisData]
+  );
+  const avgArgumentLength = useMemo(
+    () => getAverageArgumentLength(userAnalysisData),
+    [userAnalysisData]
+  );
+  const mostRecentDate = useMemo(
+    () => getMostRecentAnalysisDate(userAnalysisData),
+    [userAnalysisData]
+  );
+  const oldestDate = useMemo(
+    () => getOldestAnalysisDate(userAnalysisData),
+    [userAnalysisData]
+  );
+
   const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0] ?? null;
     setSelectedFile(file);
@@ -62,6 +128,9 @@ const AnalysisPage: React.FC = () => {
     try {
       const response = await analyzeArgumentsFromCsv(selectedFile);
       setAnalysisResults(response.results);
+      // Refresh user analysis data after successful analysis
+      const updatedResponse = await getAnalysisResults(1000, 0);
+      setUserAnalysisData(updatedResponse.results);
     } catch (err) {
       setError(formatError(err));
     } finally {
@@ -71,17 +140,121 @@ const AnalysisPage: React.FC = () => {
 
   return (
     <div className="min-h-screen bg-slate-50 px-4 py-10">
-      <div className="mx-auto max-w-4xl rounded-lg border border-slate-200 bg-white shadow-sm">
-        <div className="border-b border-slate-200 px-6 py-4">
-          <h1 className="text-lg font-semibold text-slate-800">
-            Analysis page (open static)
-          </h1>
-          <p className="text-sm text-slate-500">
-            Upload a CSV file containing arguments to preview its contents.
-          </p>
-        </div>
+      <div className="mx-auto max-w-7xl space-y-6">
+        {/* Statistics Section */}
+        {!isLoadingStats && userAnalysisData.length > 0 && (
+          <div className="rounded-lg border border-slate-200 bg-white shadow-sm">
+            <div className="border-b border-slate-200 px-6 py-4">
+              <h2 className="text-lg font-semibold text-slate-800">
+                Your Analysis Statistics
+              </h2>
+              <p className="text-sm text-slate-500">
+                Overview of all your analyzed arguments
+              </p>
+            </div>
+
+            {isLoadingStats ? (
+              <div className="flex items-center justify-center py-12">
+                <Loading />
+              </div>
+            ) : statsError ? (
+              <div className="px-6 py-4">
+                <p className="text-sm text-red-600">{statsError}</p>
+              </div>
+            ) : (
+              <div className="p-6 space-y-8">
+                {/* Summary Statistics */}
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                  <div className="bg-slate-50 rounded-lg p-4">
+                    <div className="text-2xl font-bold text-slate-800">
+                      {stanceStats.total}
+                    </div>
+                    <div className="text-sm text-slate-600">Total Arguments</div>
+                  </div>
+                  <div className="bg-slate-50 rounded-lg p-4">
+                    <div className="text-2xl font-bold text-slate-800">
+                      {uniqueTopicsCount}
+                    </div>
+                    <div className="text-sm text-slate-600">Unique Topics</div>
+                  </div>
+                  <div className="bg-slate-50 rounded-lg p-4">
+                    <div className="text-2xl font-bold text-slate-800">
+                      {avgArgumentLength}
+                    </div>
+                    <div className="text-sm text-slate-600">Avg Length (chars)</div>
+                  </div>
+                  <div className="bg-slate-50 rounded-lg p-4">
+                    <div className="text-2xl font-bold text-slate-800">
+                      {stanceStats.pro}
+                    </div>
+                    <div className="text-sm text-slate-600">PRO Arguments</div>
+                  </div>
+                </div>
+
+                {/* Charts Grid */}
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                  {/* Stance Distribution */}
+                  <div className="rounded-lg border border-slate-200 p-4">
+                    <h3 className="text-sm font-semibold text-slate-700 mb-4">
+                      Stance Distribution
+                    </h3>
+                    <StanceDistributionChart stats={stanceStats} />
+                    <div className="mt-4 flex justify-center gap-6 text-sm">
+                      <div>
+                        <span className="font-semibold text-green-700">
+                          PRO: {stanceStats.pro} ({stanceStats.proPercentage.toFixed(1)}%)
+                        </span>
+                      </div>
+                      <div>
+                        <span className="font-semibold text-red-700">
+                          CON: {stanceStats.con} ({stanceStats.conPercentage.toFixed(1)}%)
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Time Series */}
+                  {timeStats.length > 0 && (
+                    <div className="rounded-lg border border-slate-200 p-4">
+                      <h3 className="text-sm font-semibold text-slate-700 mb-4">
+                        Analysis Timeline
+                      </h3>
+                      <TimeSeriesChart data={timeStats} />
+                      {oldestDate && mostRecentDate && (
+                        <div className="mt-4 text-center text-xs text-slate-500">
+                          From {oldestDate} to {mostRecentDate}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
 
-        <div className="space-y-6 p-6">
+                {/* Topic Frequency */}
+                {topicFrequency.length > 0 && (
+                  <div className="rounded-lg border border-slate-200 p-4">
+                    <h3 className="text-sm font-semibold text-slate-700 mb-4">
+                      Most Discussed Topics (Top 10)
+                    </h3>
+                    <TopicFrequencyChart data={topicFrequency} />
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* CSV Upload and Analysis Section */}
+        <div className="rounded-lg border border-slate-200 bg-white shadow-sm">
+          <div className="border-b border-slate-200 px-6 py-4">
+            <h1 className="text-lg font-semibold text-slate-800">
+              Analyze New Arguments
+            </h1>
+            <p className="text-sm text-slate-500">
+              Upload a CSV file containing arguments to analyze them.
+            </p>
+          </div>
+
+          <div className="space-y-6 p-6">
           <div className="flex flex-col gap-3">
             <label className="text-sm font-medium text-slate-700">
               Upload a CSV file
@@ -219,6 +392,7 @@ const AnalysisPage: React.FC = () => {
               </div>
             </div>
           )}
+          </div>
         </div>
       </div>
     </div>

src/app/utils/analysis.utils.ts

@@ -0,0 +1,139 @@
+/**
+ * Utility functions for analyzing analysis results and calculating statistics
+ */
+
+import type { AnalysisResult } from '../types/analysis.types.ts';
+
+/**
+ * Statistics about stance distribution
+ */
+export type StanceStats = {
+  total: number;
+  pro: number;
+  con: number;
+  proPercentage: number;
+  conPercentage: number;
+};
+
+/**
+ * Topic frequency data
+ */
+export type TopicFrequency = {
+  topic: string;
+  count: number;
+  proCount: number;
+  conCount: number;
+};
+
+/**
+ * Time-based statistics
+ */
+export type TimeStats = {
+  date: string;
+  count: number;
+};
+
+/**
+ * Calculate stance distribution statistics
+ */
+export function calculateStanceStats(results: AnalysisResult[]): StanceStats {
+  const total = results.length;
+  const pro = results.filter((r) => r.predicted_stance === 'PRO').length;
+  const con = results.filter((r) => r.predicted_stance === 'CON').length;
+
+  return {
+    total,
+    pro,
+    con,
+    proPercentage: total > 0 ? (pro / total) * 100 : 0,
+    conPercentage: total > 0 ? (con / total) * 100 : 0,
+  };
+}
+
+/**
+ * Calculate topic frequency statistics
+ */
+export function calculateTopicFrequency(
+  results: AnalysisResult[],
+  limit: number = 10
+): TopicFrequency[] {
+  const topicMap = new Map<string, { count: number; proCount: number; conCount: number }>();
+
+  results.forEach((result) => {
+    const topic = result.topic.trim();
+    if (!topic) return;
+
+    const existing = topicMap.get(topic) || { count: 0, proCount: 0, conCount: 0 };
+    existing.count += 1;
+    if (result.predicted_stance === 'PRO') {
+      existing.proCount += 1;
+    } else {
+      existing.conCount += 1;
+    }
+    topicMap.set(topic, existing);
+  });
+
+  return Array.from(topicMap.entries())
+    .map(([topic, stats]) => ({
+      topic,
+      count: stats.count,
+      proCount: stats.proCount,
+      conCount: stats.conCount,
+    }))
+    .sort((a, b) => b.count - a.count)
+    .slice(0, limit);
+}
+
+/**
+ * Calculate time-based statistics (grouped by date)
+ */
+export function calculateTimeStats(results: AnalysisResult[]): TimeStats[] {
+  const dateMap = new Map<string, number>();
+
+  results.forEach((result) => {
+    const date = new Date(result.created_at).toISOString().split('T')[0];
+    dateMap.set(date, (dateMap.get(date) || 0) + 1);
+  });
+
+  return Array.from(dateMap.entries())
+    .map(([date, count]) => ({ date, count }))
+    .sort((a, b) => a.date.localeCompare(b.date));
+}
+
+/**
+ * Get unique topics count
+ */
+export function getUniqueTopicsCount(results: AnalysisResult[]): number {
+  const uniqueTopics = new Set(results.map((r) => r.topic.trim()).filter((t) => t));
+  return uniqueTopics.size;
+}
+
+/**
+ * Get average argument length (in characters)
+ */
+export function getAverageArgumentLength(results: AnalysisResult[]): number {
+  if (results.length === 0) return 0;
+  const totalLength = results.reduce((sum, r) => sum + r.argument.length, 0);
+  return Math.round(totalLength / results.length);
+}
+
+/**
+ * Get most recent analysis date
+ */
+export function getMostRecentAnalysisDate(results: AnalysisResult[]): string | null {
+  if (results.length === 0) return null;
+  const dates = results.map((r) => new Date(r.created_at).getTime());
+  const mostRecent = new Date(Math.max(...dates));
+  return mostRecent.toISOString().split('T')[0];
+}
+
+/**
+ * Get oldest analysis date
+ */
+export function getOldestAnalysisDate(results: AnalysisResult[]): string | null {
+  if (results.length === 0) return null;
+  const dates = results.map((r) => new Date(r.created_at).getTime());
+  const oldest = new Date(Math.min(...dates));
+  return oldest.toISOString().split('T')[0];
+}
+

src/app/utils/index.ts

@@ -7,6 +7,9 @@ import { CsvParseResult, CsvRow } from '../types/index.ts';
 // Export user utilities
 export * from './user.utils.ts';
 
+// Export analysis utilities
+export * from './analysis.utils.ts';
+
 /**
  * Debounce function - delays execution until after wait time
  */