Removing node sass middleware

.nvmrc

@@ -0,0 +1 @@
+v20.8

Makefile

@@ -1,12 +1,17 @@
 REPORTER = spec
 
-all:    build
+all:    build css
 
 build:
 	@./node_modules/coffee-script/bin/coffee \
     -c \
     -o lib src
 
+css:
+	@./node_modules/.bin/node-sass \
+    lib/http/public/stylesheets/main.scss \
+    lib/http/public/stylesheets/main.css
+
 test-tdd:
 	@./node_modules/.bin/mocha \
     --reporter $(REPORTER) \

docs/cline-plan-correct-styles.md

@@ -0,0 +1,108 @@
+# CSS Fix Plan for Kue Dashboard
+
+## 1. Scratchbook
+
+### File Analysis Notes:
+
+*   **`lib/http/public/stylesheets/main.scss`**:
+    *   Imports other SCSS files: `nib.scss`, `config.scss`, `scrollbar.scss`, `menu.scss`, `context-menu.scss`, `job.scss`, `actions.scss`, `error.scss`.
+    *   Defines a `font-smoothing` mixin.
+    *   Uses mixins like `font-smoothing`, `bold-button`, `reset-table`.
+    *   Uses variables like `$bg`, `$light`.
+*   **`lib/http/public/stylesheets/mixins.scss`**:
+    *   Defines `reset-list`, `decorated-box`, `bold-button` mixins.
+    *   `bold-button` is used in `main.scss`.
+*   **`lib/http/public/stylesheets/nib.scss`**:
+    *   Contains a comprehensive set of mixins for positioning (`fixed`, `absolute`, `relative`), resets (`reset-table`, `global-reset`, `normalize-css`), vendor prefixes (`vendor`), flexbox, images, and gradients.
+    *   Notably, it also defines a `font-smoothing` mixin and `reset-table` which are also used/defined elsewhere.
+    *   The `fixed` mixin is likely the intended source for positioning, but it seems to be compiling incorrectly.
+*   **`lib/http/public/stylesheets/config.scss`**:
+    *   Defines color variables like `$dark`, `$light`, `$lighter`, `$bg`, and status/menu colors.
+    *   `$dark` and `$light` are used in `main.scss`.
+*   **`lib/http/public/stylesheets/main.css` (Compiled Output - *Stale/Incorrect*)**:
+    *   **Critical Issue 1**: Large sections of crucial CSS (for `html`, `body` layout, and `::-webkit-scrollbar`) are commented out. This is the primary reason for the broken layout and unstyled scrollbars. This file is likely stale or incorrectly generated.
+    *   **Critical Issue 2**: Invalid CSS property values for positioning. Examples:
+        *   `#menu`: `top: top; right: left;`
+        *   `#menu li .count`: `top: top 15px; right: left;`
+        *   `.block h2`: `top: top 5px; right: left -15px;`
+        *   `.job .block .progress`: `top: top 15px; right: right 20px;`
+        *   `.job .block .remove`, `.job .block .restart`: `top: top 30px; right: right -6px;`
+        *   `#actions`: `top: top -2px; right: right -2px;`
+        *   `#error`: `fixed: top -50px right 15px;` (invalid property name `fixed` and values).
+        This indicates a problem with how the `fixed`, `absolute`, or `relative` mixins from `nib.scss` are being called or compiled in the SCSS. The arguments (e.g., `top`, `left`, `right`) are being outputted as literal strings instead of being correctly interpreted as part of the mixin's logic.
+    *   **Critical Issue 3**: Unresolved SCSS variable. `#sort, #filter, #search` have `color: dark;` instead of `color: #3b3b3b;` (from `$dark` in `config.scss`). This means the SCSS variable `$dark` is not being correctly interpolated.
+    *   **Minor Issue**: Duplicate `font-smoothing` mixin definition in `main.scss` and `nib.scss`. The `nib.scss` version is more complete.
+*   **`lib/http/views/layout.pug`**:
+    *   Confirms `main.css` is linked: `link(rel='stylesheet', href='./stylesheets/main.css')`.
+    *   Includes partials like `_menu`, `_search`, `_filter`, `_sort`, `_job`, `_row`.
+*   **`lib/http/views/_job.pug`**:
+    *   Defines the structure of a job block, using classes like `.job`, `.block`, `.remove`, `.restart`, `.progress`, `.details`. These classes are targeted by the CSS.
+*   **`Makefile`**:
+    *   Currently lacks a target for compiling SCSS files.
+
+### Patterns Learned:
+
+*   The project uses SCSS for styling, which is then compiled into `main.css`.
+*   There's a clear modular structure with separate SCSS files for different components/concerns (e.g., `menu`, `job`, `scrollbar`).
+*   Mixins are heavily used for reusability and vendor prefixing (from `nib.scss`).
+*   Variables are used for colors and other configurations (from `config.scss`).
+*   The compilation process seems to be failing or misinterpreting certain SCSS constructs, particularly mixin calls and variable interpolations, leading to invalid CSS. The commented-out sections in `main.css` suggest that the original SCSS might have had these sections commented out, or the compilation process itself is flawed and commenting them out.
+*   A `Makefile` is used for build processes, and a new target is needed to automate SCSS compilation.
+
+## 2. Image Analysis
+
+### Image 1: Broken CSS (Current State)
+
+The first image shows a dashboard with severely broken CSS. Key observations:
+*   **Layout Disarray**: The main content area is not properly positioned. The "Search", "Filter by", and "Sort" elements are stacked horizontally on the top left, instead of being horizontally aligned on the top right.
+*   **Missing Sidebar**: The left navigation menu (which should contain "Queued", "Active", "Failed", "Complete", "Delayed" job counts) is not visible as a distinct sidebar. Its contents overlap each other and job blocks overlap over it, rendering it not visible.
+*   **Unstyled Job Blocks**: The individual job entries (e.g., "update_custom_field_cache") are simple white blocks with minimal styling. They lack proper padding, alignment, and the visual "decorated box" appearance suggested by `mixins.scss`. The text within them is also misaligned and overlapping.
+*   **Unstyled Scrollbars**: The scrollbars are default browser scrollbars, indicating that the custom scrollbar styles defined in the SCSS (and commented out in `main.css`) are not applied.
+*   **Text Overlap**: Text elements, particularly in the left menu and within job blocks, are overlapping, indicating issues with `width`, `height`, `padding`, `margin`, or `position` properties.
+*   **Missing Icons/Buttons**: The "x" and "restart" icons/buttons on the job blocks are visible on hover but they are aigned on the top left instead of being aligned on the top right.
+
+Overall, the page appears to have lost its entire structural and aesthetic styling, suggesting a fundamental breakdown in the CSS application or compilation.
+
+### Image 2: Expected CSS (Target State)
+
+The second image shows the dashboard as it is expected to be rendered, demonstrating a clean and functional UI. Key observations:
+*   **Proper Layout**: The page has a clear two-column layout. A dark sidebar on the left contains the navigation menu, and the main content area on the right displays the job list.
+*   **Styled Sidebar**: The left sidebar is a distinct, dark-colored navigation menu with clearly separated job status categories ("Queued", "Active", "Failed", "Complete", "Delayed") and their respective counts. The text is well-aligned and readable.
+*   **Horizontal Top Bar**: The "Search", "Filter by", and "Sort" elements are horizontally aligned at the top of the main content area, functioning as a header for the job list.
+*   **Styled Job Blocks**: Individual job entries are well-defined, visually appealing blocks with proper spacing, borders, and shadows (consistent with `decorated-box` mixin). The job ID is clearly visible in a styled tag on the top left of each block.
+*   **Functional Icons/Buttons**: The "x" (delete) and "restart" icons are visible and correctly positioned on the top right of the job blocks, indicating proper styling and functionality.
+*   **Styled Scrollbars**: Although not explicitly clear from the crop, a well-designed UI like this would typically have custom scrollbar styling, which was present in the commented-out CSS.
+
+Comparing the two images, the goal is to restore the layout, positioning, and styling of all elements to match the expected screenshot. This primarily involves addressing the compilation issues and ensuring the SCSS is correctly processed.
+
+## 3. Checklist of Todos
+
+- [x] **Task 1: Update `Makefile` to compile SCSS**
+    - [ ] Add a new target `css` to the `Makefile` that uses `node-sass` to compile `lib/http/public/stylesheets/main.scss` to `lib/http/public/stylesheets/main.css`.
+    - [ ] Ensure `node-sass` is installed or add a step to install it if necessary.
+- [x] **Task 2: Uncomment essential styles in SCSS**
+    - [ ] Locate the SCSS files that correspond to the commented-out sections in the current `main.css` (likely `main.scss` or `scrollbar.scss`).
+    - [ ] Uncomment or re-add the `html`, `body` (with `position: absolute` and related properties), and `::-webkit-scrollbar` styles in the relevant SCSS files.
+    - [ ] Run the `css` target in the `Makefile` to recompile `main.css` and verify these styles are now present and active.
+- [x] **Task 3: Fix incorrect position property compilation in SCSS**
+    - [x] Identify the SCSS files where mixins like `fixed`, `absolute`, or `relative` are called with incorrect arguments (e.g., `top`, `left`, `right` as literal strings).
+    - [x] Correct the mixin calls to pass valid CSS values (e.g., `0`, `15px`, `auto`) instead of literal keywords.
+    - [x] Specifically target:
+        - [x] `#menu` positioning.
+        - [x] `#menu li .count` positioning.
+        - [x] `.block h2` positioning.
+        - [x] `.job .block .progress` positioning.
+        - [x] `.job .block .remove` and `.job .block .restart` positioning.
+        - [x] `#actions` positioning.
+        - [x] `#error` positioning (correct `fixed` property usage).
+    - [x] Run the `css` target in the `Makefile` to recompile `main.css` and verify correct CSS properties are generated.
+- [x] **Task 4: Resolve unresolved SCSS variable `$dark`**
+    - [x] Locate the SCSS file where `color: dark;` is used for `#sort, #filter, #search`.
+    - [x] Change `color: dark;` to `color: $dark;` to correctly interpolate the variable.
+    - [x] Run the `css` target in the `Makefile` to recompile `main.css` and verify the correct color value (`#3b3b3b`) is applied.
+- [x] **Task 5: Review and potentially consolidate `font-smoothing` mixin**
+    - [ ] Decide whether to keep the `font-smoothing` mixin in `main.scss` or rely solely on the one in `nib.scss`. Given `nib.scss`'s version is more complete, it's likely better to remove the duplicate from `main.scss` if it's causing conflicts or is redundant.
+    - [ ] Run the `css` target in the `Makefile` to recompile `main.css`.
+- [ ] **Task 6: Verify overall dashboard rendering**
+    - [ ] After applying all SCSS fixes and recompiling, ensure the dashboard renders correctly according to the "Expected CSS" screenshot.
+    - [ ] Pay attention to layout, element positioning, styling of job blocks, and visibility of action buttons/icons.

docs/cline-plan-filter.md

@@ -0,0 +1,114 @@
+# Stylus to SCSS Conversion Plan
+
+## Scratchbook
+
+### Initial Analysis of `lib/http/public/stylesheets/actions.scss`
+
+The file `actions.scss` exhibits Stylus-like syntax, which needs to be converted to valid SCSS. Key observations include:
+
+*   **Missing Curly Braces:** Rule sets (e.g., `#actions`, `#sort`, `#filter`, `#search`) lack the opening and closing curly braces `{}` required by SCSS.
+*   **Missing Semicolons:** Property declarations (e.g., `fixed: top -2px right -2px`, `z-index: 20`) do not terminate with semicolons `;`, which are mandatory in SCSS.
+*   **Indentation-Based Nesting:** Nesting is primarily controlled by indentation, which is common in Stylus. While SCSS also supports nesting, it typically uses curly braces to define blocks. The current structure is compatible with SCSS's nesting, but the missing braces are the primary issue.
+*   **Pseudo-classes:** `&:hover` syntax is used, which is compatible with SCSS.
+*   **Color Arithmetic:** An expression like `#eee - 10%` is used for color manipulation. In SCSS, this needs to be converted to a built-in color function, such as `darken(#eee, 10%)`.
+
+### Analysis of `lib/http/public/stylesheets/config.scss`
+
+This file primarily defines variables.
+
+*   **Variable Definition:** Stylus uses `=` for variable assignment (e.g., `dark = #3b3b3b`), while SCSS uses `$variable-name: value;` (e.g., `$dark: #3b3b3b;`).
+
+### Analysis of `lib/http/public/stylesheets/context-menu.scss`
+
+This file introduces `@import` statements and mixin calls.
+
+*   **`@import` without quotes:** Stylus allows `@import mixins` while SCSS requires `@import 'mixins';` or `@import "mixins";`.
+*   **Mixin Calls:** Stylus mixin calls (e.g., `reset-list()`, `decorated-box()`) need to be prefixed with `@include` in SCSS (e.g., `@include reset-list();`).
+*   **Color Arithmetic with `+`:** Confirmed the need to convert `color + value` to SCSS color functions like `lighten(color, percentage)`.
+
+### Analysis of `lib/http/public/stylesheets/error.scss`
+
+This file demonstrates variable usage within CSS functions.
+
+*   **Variable usage in functions:** When using variables within SCSS functions like `rgba()`, they must be prefixed with a `$` (e.g., `rgba($dark, .2)`).
+
+### Analysis of `lib/http/public/stylesheets/job.scss`
+
+This file introduces mixin definitions and local variable assignments.
+
+*   **Mixin Definition:** Stylus mixin definitions (e.g., `bar(color)`) need to be converted to SCSS `@mixin` syntax (e.g., `@mixin bar($color) { ... }`).
+*   **Local Variable Assignment:** Stylus allows local variable assignment within rules (e.g., `width: size = 20px`). In SCSS, this should be separated into a variable definition and then used (e.g., `$size: 20px; width: $size;`).
+
+### Analysis of `lib/http/public/stylesheets/main.scss`
+
+This file introduces mixin definitions with `arguments` and further confirms `@import` and mixin calls.
+
+*   **Mixin Definition with `arguments`:** Stylus mixin definitions like `font-smoothing()` with `arguments` need to be converted to SCSS `@mixin` syntax with rest parameters (e.g., `@mixin font-smoothing($args...) { -webkit-font-smoothing: $args; }`).
+*   **Mixin Calls with Named Arguments:** Stylus mixin calls with named arguments (e.g., `bold-button(glow:#00ABFA)`) are compatible with SCSS, but the mixin definition needs to be converted first.
+
+### Analysis of `lib/http/public/stylesheets/menu.scss`
+
+This file introduces conditional statements and color assignment with operators.
+
+*   **Conditional Statements (`if`):** Stylus `if condition` needs to be converted to SCSS `@if condition { ... }`.
+*   **Color Assignment with Operators:** Stylus `background: menu-bg -= 2%` needs to be converted to SCSS color functions like `background: darken($menu-bg, 2%);`.
+*   **Color Arithmetic with Division:** `menu-fg + (menu-intensity / 2)` confirms the need for SCSS color functions.
+
+### Analysis of `lib/http/public/stylesheets/mixins.scss`
+
+This file contains mixin definitions without parameters.
+
+*   **Mixin Definition without parameters:** Stylus mixin definitions like `reset-list()` and `decorated-box()` need to be converted to SCSS `@mixin` syntax (e.g., `@mixin reset-list() { ... }`).
+
+### Analysis of `lib/http/public/stylesheets/scrollbar.scss`
+
+This file confirms variable definitions, usage, and arithmetic operations.
+
+*   **Variable Definitions and Usage:** Confirms the need to convert `=` to `:` for definitions and prefix with `$` for usage.
+*   **Arithmetic Operations:** Confirms the need for SCSS arithmetic (e.g., `(width / 2)`).
+
+### General Conversion Rules
+
+Based on the comprehensive analysis of all files, the general rules for converting these Stylus-like SCSS files to proper SCSS syntax will be:
+
+1.  **Add Curly Braces:** Enclose every rule set (selectors, nested rules, mixin calls, etc.) within `{}`.
+2.  **Add Semicolons:** Terminate every property declaration with a semicolon `;`.
+3.  **Convert Color Arithmetic:** Replace Stylus-style color arithmetic (e.g., `color - value`, `color + value`, `color / value`) with equivalent SCSS color functions (e.g., `darken(color, percentage)`, `lighten(color, percentage)`, `mix(color1, color2, percentage)` or direct arithmetic if applicable).
+4.  **Convert Variable Definitions:** Replace Stylus variable definitions (`variable = value`) with SCSS variable definitions (`$variable: value;`).
+5.  **Convert `@import` Statements:** Add quotes and semicolons to `@import` statements (e.g., `@import 'mixins';`).
+6.  **Convert Mixin Calls:** Prefix mixin calls with `@include` and add a semicolon (e.g., `@include mixin-name();`).
+7.  **Ensure Variable Prefix in Functions:** Ensure variables used within CSS functions (e.g., `rgba()`) are prefixed with `$`.
+8.  **Convert Mixin Definitions:** Convert Stylus mixin definitions to SCSS `@mixin` syntax, including handling `arguments` with SCSS rest parameters and mixins without parameters.
+9.  **Convert Local Variable Assignments:** Convert local variable assignments within rules to SCSS variable definitions and usage.
+10. **Convert Conditional Statements:** Convert Stylus `if` statements to SCSS `@if` statements.
+11. **Convert Color Assignment Operators:** Convert Stylus color assignment operators (e.g., `-=`, `+=`) to equivalent SCSS color functions.
+12. **Review Functions:** If any Stylus-specific function definitions are encountered, they will need to be converted to SCSS `@function` syntax. (No explicit Stylus functions found beyond mixins, but will keep this in mind during implementation).
+
+## To-Do Checklist
+
+- [ ] **Phase 1: Planning and Analysis**
+    - [x] Read `lib/http/public/stylesheets/actions.scss` to understand Stylus syntax.
+    - [x] Create `docs/cline-plan-filter.md` with scratchbook and initial todos.
+    - [x] Read `lib/http/public/stylesheets/config.scss` to identify more Stylus patterns.
+    - [x] Read `lib/http/public/stylesheets/context-menu.scss` to identify more Stylus patterns.
+    - [x] Read `lib/http/public/stylesheets/error.scss` to identify more Stylus patterns.
+    - [x] Read `lib/http/public/stylesheets/job.scss` to identify more Stylus patterns.
+    - [x] Read `lib/http/public/stylesheets/main.scss` to identify more Stylus patterns.
+    - [x] Read `lib/http/public/stylesheets/menu.scss` to identify more Stylus patterns.
+    - [x] Read `lib/http/public/stylesheets/mixins.scss` to identify more Stylus patterns (especially for mixin conversion).
+    - [x] Read `lib/http/public/stylesheets/scrollbar.scss` to identify more Stylus patterns.
+    - [x] Finalize conversion rules based on all analyzed files.
+    - [**x**] Present the complete plan and ask to switch to Act Mode.
+
+- [ ] **Phase 2: Implementation (Act Mode)**
+    - [x] Convert `lib/http/public/stylesheets/actions.scss` to SCSS.
+    - [x] Convert `lib/http/public/stylesheets/config.scss` to SCSS.
+    - [x] Convert `lib/http/public/stylesheets/context-menu.scss` to SCSS.
+    - [x] Convert `lib/http/public/stylesheets/error.scss` to SCSS.
+    - [x] Convert `lib/http/public/stylesheets/job.scss` to SCSS.
+    - [x] Convert `lib/http/public/stylesheets/main.scss` to SCSS.
+- [x] Convert `lib/http/public/stylesheets/menu.scss` to SCSS.
+- [x] Convert `lib/http/public/stylesheets/mixins.scss` to SCSS.
+    - [x] Convert `lib/http/public/stylesheets/scrollbar.scss` to SCSS.
+    - [x] Verify conversion by checking for compilation errors (if possible with `node-sass`).
+    - [x] Confirm successful conversion and completion of the task.