From 64d0f7ab029c01da5e89111d53e708811ada2c20 Mon Sep 17 00:00:00 2001 From: Andrew Park Date: Fri, 17 Apr 2026 12:33:29 -0700 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20cleaner=20UI=20pass=20?= =?UTF-8?q?=E2=80=94=20consistent=20layout,=20tokens,=20skeleton=20loading?= =?UTF-8?q?=20(#258)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/index.html | 2 +- frontend/package-lock.json | 69 ++++ frontend/package.json | 1 + frontend/src/components/Chat/AudioPlayer.tsx | 12 +- frontend/src/components/Chat/ChatArea.tsx | 2 +- frontend/src/components/Chat/InputArea.tsx | 2 +- frontend/src/components/CommandPalette.tsx | 8 +- .../components/Dashboard/CostComparison.tsx | 20 +- .../components/Dashboard/EnergyDashboard.tsx | 35 +- .../components/Dashboard/TraceDebugger.tsx | 24 +- frontend/src/components/ErrorBoundary.tsx | 2 +- frontend/src/components/Layout.tsx | 15 +- frontend/src/components/OptInModal.tsx | 6 +- frontend/src/components/SetupScreen.tsx | 6 +- frontend/src/components/Sidebar/Sidebar.tsx | 14 +- frontend/src/components/SystemPulse.tsx | 6 +- .../src/components/setup/IngestDashboard.tsx | 8 +- frontend/src/components/setup/ReadyScreen.tsx | 2 +- .../components/setup/SourceConnectFlow.tsx | 22 +- frontend/src/index.css | 361 ++++++++++++++---- frontend/src/lib/store.ts | 14 + frontend/src/pages/AgentsPage.tsx | 249 ++++++------ frontend/src/pages/DashboardPage.tsx | 25 +- frontend/src/pages/DataSourcesPage.tsx | 325 +++++++++------- frontend/src/pages/GetStartedPage.tsx | 8 +- frontend/src/pages/LogsPage.tsx | 57 +-- frontend/src/pages/SettingsPage.tsx | 41 +- 27 files changed, 863 insertions(+), 473 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 9eb5a08e..eeced653 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,7 @@ - + diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 8635841a..89d44755 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -23,6 +23,7 @@ "clsx": "^2.1.1", "katex": "^0.16.38", "lucide-react": "^0.576.0", + "motion": "^12.38.0", "react": "^19.0.0", "react-dom": "^19.0.0", "react-markdown": "^10.1.0", @@ -5931,6 +5932,33 @@ "node": ">= 0.6" } }, + "node_modules/framer-motion": { + "version": "12.38.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.38.0.tgz", + "integrity": "sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.38.0", + "motion-utils": "^12.36.0", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fresh": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz", @@ -8834,6 +8862,47 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/motion": { + "version": "12.38.0", + "resolved": "https://registry.npmjs.org/motion/-/motion-12.38.0.tgz", + "integrity": "sha512-uYfXzeHlgThchzwz5Te47dlv5JOUC7OB4rjJ/7XTUgtBZD8CchMN8qEJ4ZVsUmTyYA44zjV0fBwsiktRuFnn+w==", + "license": "MIT", + "dependencies": { + "framer-motion": "^12.38.0", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, + "node_modules/motion-dom": { + "version": "12.38.0", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.38.0.tgz", + "integrity": "sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.36.0" + } + }, + "node_modules/motion-utils": { + "version": "12.36.0", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.36.0.tgz", + "integrity": "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==", + "license": "MIT" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index 7f2adce5..89a20478 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -29,6 +29,7 @@ "clsx": "^2.1.1", "katex": "^0.16.38", "lucide-react": "^0.576.0", + "motion": "^12.38.0", "react": "^19.0.0", "react-dom": "^19.0.0", "react-markdown": "^10.1.0", diff --git a/frontend/src/components/Chat/AudioPlayer.tsx b/frontend/src/components/Chat/AudioPlayer.tsx index 15d7f057..9e28555b 100644 --- a/frontend/src/components/Chat/AudioPlayer.tsx +++ b/frontend/src/components/Chat/AudioPlayer.tsx @@ -63,8 +63,8 @@ export function AudioPlayer({ src }: AudioPlayerProps) {