feat: refresh casWOW screens with library-based layouts

.claude/skills/caswow-release/SKILL.md

@@ -135,15 +135,15 @@ pnpm build:eleventy
 **If reinstalling from GitHub (CI / clean install):**
 ```bash
 pnpm install          # pulls latest from the GitHub URL
-pnpm copy-cas         # copies caswow.css from node_modules into src/css/
+pnpm copy-cas         # rebuilds Eleventy and copies canonical library assets into docs/library/
 pnpm build:eleventy   # rebuilds the Eleventy site
 ```
 
 ### 4b. Verify the update
 
 ```bash
 # Confirm the CSS file was updated
-head -5 src/css/caswow.css   # should show the new build timestamp or token values
+head -5 docs/library/caswow.css   # should show the new build timestamp or token values
 
 # Check the built site
 pnpm show   # dev server — open browser and spot-check affected components
@@ -166,7 +166,7 @@ This version appears in the Storybook footer and build metadata — it's cosmeti
 ## Step 5: Commit casWOW changes
 
 ```bash
-git add src/css/caswow.css src/_data/meta.js
+git add docs/library/caswow.css src/_data/meta.js
 git commit -m "chore: update caswow.library to v0.7.4"
 git push origin main
 ```
@@ -183,7 +183,7 @@ git push origin main
 - [ ] `package.json` version bumped correctly
 - [ ] Git commit and tag created (`v{VERSION}`)
 - [ ] Tag pushed to origin (`git push origin main --tags`)
-- [ ] `casWOW`: `pnpm copy-cas` run and `src/css/caswow.css` updated
+- [ ] `casWOW`: `pnpm copy-cas` run and `docs/library/caswow.css` updated
 - [ ] `casWOW`: Eleventy build passes (`pnpm build`)
 - [ ] `casWOW`: visual spot-check in dev server (`pnpm show`)
 - [ ] `casWOW`: changes committed and pushed
@@ -196,6 +196,6 @@ git push origin main
 
 **`pnpm css` fails with SCSS compilation error** — a variable used in `scss/caswow.scss` or its imports is missing from `_tokens-generated.scss`. Run `pnpm tokens:build` first, or check that the token path mapping in `sd.config.mjs` is correct.
 
-**casWOW still shows old styles after `pnpm copy-cas`** — Eleventy may have cached the old file. Run `pnpm build:eleventy` explicitly, or delete `docs/css/caswow.css` and rebuild.
+**casWOW still shows old styles after `pnpm copy-cas`** — Eleventy may have cached the old file. Run `pnpm build:eleventy` explicitly, or delete `docs/library/caswow.css` and rebuild.
 
 **`pnpm vitest run` fails on a Storybook story test** — the component factory function likely has a breaking change. Fix the component or update the test to match the new API before tagging.

.eleventy.js

@@ -20,21 +20,10 @@ module.exports = function (eleventyConfig) {
     words:
       'simply,obviously,basically,of course,clearly,just,everyone knows,however,easy'
   });
-  // eleventyConfig.addWatchTarget('src/css/*.css');
 
   eleventyConfig.addPassthroughCopy('dependencies/js/bootstrap.min.js');
   eleventyConfig.addPassthroughCopy('dependencies/js/chart.js');
-  eleventyConfig.addPassthroughCopy('src/css/caswow.css');
-  eleventyConfig.addPassthroughCopy('src/css/variables.css');
-  eleventyConfig.addPassthroughCopy('src/css/tokens.css');
-  eleventyConfig.addPassthroughCopy('src/css/site.css');
-  eleventyConfig.addPassthroughCopy('src/css/colors.css');
-  eleventyConfig.addPassthroughCopy('src/css/fontawesome.css');
-  eleventyConfig.addPassthroughCopy('src/css/brands.css');
-  eleventyConfig.addPassthroughCopy('src/css/solid.css');
-  eleventyConfig.addPassthroughCopy('src/css/print.css');
   eleventyConfig.addPassthroughCopy('src/img');
-  eleventyConfig.addPassthroughCopy('src/webfonts');
   eleventyConfig.addPassthroughCopy('src/js/**');
   eleventyConfig.addPassthroughCopy('src/favicon.ico');
   eleventyConfig.addPassthroughCopy('src/favicon.png');
@@ -60,6 +49,17 @@ module.exports = function (eleventyConfig) {
     }
   });
 
+  eleventyConfig.addPassthroughCopy({ 'node_modules/caswow.library/css/caswow.css': 'library/caswow.css' });
+  eleventyConfig.addPassthroughCopy({ 'node_modules/caswow.library/css/fonts': 'library/fonts' });
+  eleventyConfig.addPassthroughCopy({ 'node_modules/caswow.library/css/caswow.css.map': 'library/caswow.css.map' });
+  eleventyConfig.addPassthroughCopy({ 'node_modules/@fortawesome/fontawesome-free/css/all.min.css': 'vendor/fontawesome/css/all.min.css' });
+  eleventyConfig.addPassthroughCopy({ 'node_modules/@fortawesome/fontawesome-free/webfonts': 'vendor/fontawesome/webfonts' });
+  eleventyConfig.addPassthroughCopy({ 'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js': 'js/bootstrap.bundle.min.js' });
+  eleventyConfig.addPassthroughCopy({ 'node_modules/chart.js/dist/chart.umd.js': 'js/chart.umd.js' });
+  eleventyConfig.addFilter('money', value => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(value));
+  eleventyConfig.addFilter('number', value => new Intl.NumberFormat('en-US').format(value));
+  eleventyConfig.addFilter('jsonAttribute', value => JSON.stringify(value));
+
   // Markdown
   eleventyConfig.setLibrary('md');
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -9,7 +9,7 @@ Please check the boxes that apply before requesting review.
 
 - [ ] I ran the site locally (`pnpm show`) and verified the changed pages
 - [ ] I ran the production build (`pnpm css && pnpm build`) and checked `docs/` output
-- [ ] I updated or copied vendor assets using the package.json copy scripts if required (`pnpm copy-css|copy-js|copy-fa|copy-cas`)
+- [ ] I updated or copied vendor assets using the package.json copy scripts if required (`pnpm copy-js|copy-cas`)
 - [ ] If this change depends on `caswow.library`, I documented whether it was linked with `npm link` or included in CI
 - [ ] I verified there are no uncaught exceptions in the browser console (common: dialog script in `base.njk`)
 - [ ] I added notes in this PR about any assumptions made (missing vendor files, local links, env variables)

.github/copilot-instructions.md

@@ -19,20 +19,20 @@ These notes are meant to get an AI coding agent immediately productive in this r
   - pnpm watch:eleventy — equivalent eleventy serve command.
 
 - Build for production:
-  - pnpm css — compiles SASS and runs postcss/autoprefixer (produces `docs/css/` files).
+  - pnpm css — rebuilds the site and copies the canonical library assets into `docs/library/`.
   - pnpm build — sets ELEVENTY_ENV=prod, runs CSS pipeline then Eleventy.
 
 - Useful asset-copy helpers (run when vendor files change or after npm install):
-  - pnpm copy-css, pnpm copy-js, pnpm copy-fa, pnpm copy-chartjs, pnpm copy-cas
+  - pnpm copy-js, pnpm copy-chartjs, pnpm copy-cas
 
 3) Project-specific conventions & patterns
 - Template engine: Nunjucks. Shared layout at `src/_includes/base.njk` — note it reads `meta` data (from `src/_data/meta.*`) and sets `pageTitle` and `pageDescription` using frontmatter variables `title`/`description`.
   - Example dynamic behavior: `base.njk` checks `page.sidebar`. If `page.sidebar == "sidebar"` it includes `sidebar.njk`; otherwise it falls back to `cas-sidebar.njk`. When adding a page that needs the left navigation, set `page.sidebar: "sidebar"` in frontmatter.
 
-- Local library dependency: `caswow.library` is consumed via a local link by default (`package.json` shows `"caswow.library": "file:../caswow.library"`). The canonical setup uses `npm link caswow.library` + `pnpm copy-cas` which copies `node_modules/caswow.library/css/caswow.css` -> `src/css/caswow.css`.
+- Local library dependency: `caswow.library` is consumed via a local link by default (`package.json` shows `"caswow.library": "file:../caswow.library"`). The canonical setup uses `npm link caswow.library` + `pnpm copy-cas` which rebuilds the site and copies `node_modules/caswow.library/css/caswow.css` -> `docs/library/caswow.css`.
 
 - Asset locations
-  - Vendor CSS/JS used for the built site are copied into `dependencies/css`, `dependencies/js`, `dependencies/webfonts` (scripts under `package.json` perform these copies). The `docs/` folder contains compiled site assets used for hosting.
+  - The only application stylesheet and its fonts are copied from caswow.library into `docs/library/` by Eleventy. Vendor JavaScript assets have separate copy scripts. The `docs/` folder contains compiled site assets used for hosting.
   - `src/js/` contains the project javascript sources (e.g. `renderDataTable.js`, `renderDashboard.js`, `app.js`). The templates include them near the bottom of `base.njk`.
 
 4) Integration & runtime gotchas (things that cause common runtime errors)
@@ -62,7 +62,7 @@ These notes are meant to get an AI coding agent immediately productive in this r
 - Error modes to watch for: missing vendor assets (run copy-* scripts), unhandled DOM queries added to `base.njk` (add null checks), broken frontmatter (11ty will skip rendering as expected).
 
 8) Edge cases / common tasks
-- If updating Font Awesome or bootstrap, run `pnpm copy-fa`, `pnpm copy-css`, `pnpm copy-js` and then rebuild.
+- If updating Font Awesome or bootstrap, run `pnpm copy-js` when needed and rebuild. Do not copy standalone vendor CSS into this project.
 - If caswow.library changes, either `npm link` again from the library repo, or run `pnpm config` to re-link and copy its CSS.
 
 If anything here is out-of-date or you want deeper coverage (example tests, CI steps, or specific coding style rules), tell me which area to expand and I'll iterate.

AGENT.md

@@ -4,15 +4,15 @@
 Purpose: get an AI coding agent instantly productive editing this Eleventy site and making safe, testable changes.
 
 - Project type: Eleventy (11ty) static site. Source in `src/`, built output in `docs/`.
-- Local dependency: `caswow.library` is used as a linked npm package and its CSS is copied into `src/css/` by `pnpm copy-cas`.
+- Local dependency: `caswow.library` is used as a linked npm package and Eleventy copies its CSS, source map and fonts directly into `docs/library/`. There are no local CSS source files.
 
 Key commands (use exactly):
 
 - `pnpm config` — install deps, link `caswow.library`, copy vendor files, run initial build
 - `pnpm show` — start Eleventy in dev mode with auto-reload (ELEVENTY_ENV=dev)
-- `pnpm build` — production build (runs css pipeline then eleventy)
-- `pnpm css` — compile SASS and run autoprefixer
-- `pnpm copy-css`, `pnpm copy-js`, `pnpm copy-fa`, `pnpm copy-chartjs`, `pnpm copy-cas` — copy vendor assets when needed
+- `pnpm build` — production build (Eleventy copies the library assets and generates pages)
+- `pnpm css` — rebuild the site and copy the canonical library assets
+- `pnpm copy-js`, `pnpm copy-chartjs`, `pnpm copy-cas` — copy vendor assets when needed
 
 Important files and places to read first:
 

CHANGELOG.md

@@ -0,0 +1,49 @@
+# Changelog
+
+## [Unreleased]
+
+### Changed
+
+- Unified financial project layouts, clarified the demo office/data scope, persisted the library theme with a dark dashboard surface, strengthened selected navigation and corrected breadcrumbs, and restored XPress baseline help and visible chart-filter scope
+  — `src/_includes/`, `src/pages/`, `src/js/` (design consistency and accessible context using library styles and Bootstrap; regression coverage for theme and chart/table/CSV synchronization)
+
+- Updated Project costs to the supplied N819 reference with a project heading, four financial metrics, and responsive project/contact and billing panels using only library Bootstrap classes
+  — `src/pages/project-costs/`, `src/_includes/workspace.njk` (shared illustrative financial data and project export)
+
+- Removed unused CSS copies and obsolete stylesheet maps from source, output and vendor directories; removed scripts that recreated them and updated existing setup instructions
+  — `src/css/`, `src/dependencies/css/`, `docs/css/`, `dependencies/css/`, `docs/library/`, `package.json` (retain only the canonical library stylesheet, its source map and fonts)
+
+- Replaced custom navigation, tables, metric grids and page styling with Bootstrap 5 classes from caswow.css; removed extra stylesheet loading and the legacy CSS compilation step
+  — `src/_includes/`, `src/pages/`, `.eleventy.js`, `package.json`, `src/js/workspace.js` (preserve the library stylesheet as the sole visual source of truth)
+
+- Replaced remaining legacy pages and placeholders with library-based cost analysis, reports, vendor and employee directories, drawing previews, component examples, scripted chat, and a page directory
+  — `src/pages/`, `src/_data/samples.js`, `src/_includes/workspace.njk`, `src/js/workspace.js` (sample layouts with working filters, previews and exports)
+
+- Updated Dashboard, XPress, and Project information with library components, shared illustrative data, meaningful labels, accessible chart data, and project-specific navigation
+  — `src/_includes/workspace.njk`, `src/_includes/overview.njk`, `src/_includes/project-details.njk`, `src/pages/`, `src/_data/reviewed.js` (first three screens of the design refresh)
+
+### Fixed
+
+- Restored bundled Font Awesome 7 CSS and webfonts, plus navigation, office, theme, print/export and chart-option icons with accessible labels
+  — `.eleventy.js`, `src/_includes/`, `docs/vendor/fontawesome/` (icon-only vendor styles alongside canonical caswow.css)
+
+- Replaced the dashboard timeframe badge with a dropdown that filters all four charts, chart data tables and exported chart rows to six months, three months or October
+  — `src/_includes/workspace.njk`, `src/_includes/overview.njk`, `src/js/workspace.js` (use available sample months; preserve overall location totals)
+
+- Apply the requested #F4F6F7 body background only to dashboard screens
+  — `src/_includes/workspace.njk` (correct the conditional; retain other page backgrounds)
+
+- Restored the office dropdown on every shared page using the existing company list, accessible Bootstrap controls and a selection remembered across navigation
+  — `src/_includes/workspace.njk`, `src/js/workspace.js` (demo selection does not change sample records)
+
+- Bundle caswow.library CSS and fonts together, use local Chart.js, and implement status/search filters, chart hiding/restoring, print and CSV export for the refreshed screens
+  — `.eleventy.js`, `src/js/workspace.js`, `src/css/workspace.css` (replace conflicting legacy styles and inert demo controls on these screens)
+
+- Corrected the production build command so it generates Eleventy pages after compiling styles, and added generated-screen integrity checks
+  — `package.json`, `tests/screens.test.cjs` (prevent stale page output and mismatched project identities)
+
+- Added working sample-directory and report filters, drawing preview dialogs, local-only chat/form interactions, and complete legacy/error-page layouts
+  — `src/js/workspace.js`, `src/404.njk`, `src/index-old.njk`, `src/_includes/sample-chat.njk` (no remote services or live records used)
+
+- Added checks for all application routes, bundled assets, project identity, and reconciled sample cost/hour totals
+  — `tests/screens.test.cjs`, `src/_data/samples.js`, `src/_data/reviewed.js` (align N819 sample activity date with its October ledger)

README.md

@@ -59,35 +59,19 @@ pnpm link ../caswow.library // path to your local caswow.library
 pnpm install
 ```
 
-Then copy the caswow CSS files into the dependencies folder:
+Build the site to copy the library stylesheet and its self-hosted fonts directly into the published output:
 
 ```sh
-pnpm copy-cas
+pnpm build
 ```
 
-or you can import it into `site.css`:
+The application loads only `docs/library/caswow.css`. Eleventy copies it, its source map, and `docs/library/fonts/` from the linked `caswow.library` package. Do not add local CSS copies or extra stylesheets.
 
-```javascript
-@import "caswow.library/css/caswow.css";
-```
-
-> if the caswow.library is ever published, replace `pnpm link caswow.library` with `pnpm install caswow.library` to add it to the package.json dependencies.
-
-## Font Awesome
-
-CASWOW uses [Font Awesome](https://fontawesome.com/) for icons, with the current version set at `v7.0.1`.
-
-### Updates / Upgrades
-
-To upgrade the version of Font Awesome, the following steps must be taken:
+`pnpm copy-cas` and `pnpm css` also rebuild the site. `pnpm watch:cas` watches the linked library and rebuilds when its CSS or fonts change.
 
-1. Update the version in `package.json`
-1. Run `pnpm install`
-1. Run `copy-fa` to copy the latest Font Awesome webfonts and CSS files to their respective CASWOW directories
-1. Run `pnpm build` to rebuild the CASWOW project with the new dependencies
-1. Verify the build has picked up the latest changes by checking the version under `docs/css/fontawesome.css`
+## Local Views
 
-You should now be able to run `pnpm dev` to view the icons with the newest version. If any icons are missing that are specific to the latest version, be sure to check `dependencies/` and `src/css/fontawesome.css` to verify that the correct version has been copied over.
+The casWOW demo site has two entry points - `/casWOW/` and `/casWOW/index-old/`. The baseline `/casWOW/` page is the dashboard, whereas `/casWOW/index-old/` shows all of the available pages, without having to dive into each according to the standard user workflow.
 
 ## Notes