Visual polish: toolbar, sidebar, input, output, status bar

.gitignore

@@ -1,29 +1,30 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-# Sentry Config File
-.sentryclirc
-dist/
-.aider*
-.env
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+# Sentry Config File
+.sentryclirc
+dist/
+.aider*
+.env
+screenshots/

CLAUDE.md

@@ -0,0 +1,11 @@
+# Mongoose Web Client
+
+## Visual Screenshots
+
+Screenshot tool for visual comparison during UI work:
+- Script: `scripts/take-screenshot.mjs`
+- Usage: `node scripts/take-screenshot.mjs <label>`
+- Output: `screenshots/<label>-desktop.png` (1280x800 viewport)
+- Requires: Dev server running at localhost:5173
+- Auto-login: Uses `?username=guest&password=guest`
+- Screenshots dir is gitignored (do not commit screenshots)

package.json

@@ -50,6 +50,7 @@
     "last 2 Safari versions"
   ],
   "devDependencies": {
+    "@playwright/test": "^1.58.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^20.19.4",

prompts/fix-collapse-button-final.md

@@ -0,0 +1,77 @@
+# Task: Make Collapse Button Prominent
+
+## Objective
+Make the sidebar collapse button impossible to miss. Currently it's a tiny subtle chevron.
+
+## Files to Edit
+- `src/components/sidebar.css` - lines 18-39 (`.sidebar-collapse-btn` styles)
+- `src/components/sidebar.tsx` - lines 200-207 (button markup, if needed)
+
+## Requirements
+1. Add visible background (use existing CSS variables)
+2. Increase size - bigger click target
+3. Add text label alongside icon: "Collapse" when expanded, "Expand" when collapsed
+4. Make hover state obvious
+5. Keep it functional in both expanded (250px) and collapsed (50px) states
+   - In collapsed state: icon only is fine (no room for text)
+   - In expanded state: icon + text
+
+## Implementation
+
+### CSS Changes (sidebar.css)
+```css
+.sidebar-collapse-btn {
+  background: var(--color-bg-secondary, #1e1e2e);
+  border: 1px solid var(--color-border, #333);
+  border-radius: var(--border-radius, 4px);
+  padding: 10px 14px;
+  margin: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.875rem;
+  color: var(--color-text, #fff);
+  transition: all 0.2s ease;
+  width: calc(100% - 16px);
+}
+
+.sidebar-collapse-btn:hover {
+  background: var(--color-bg-hover, #2a2a3e);
+  border-color: var(--color-accent, #4a9eff);
+}
+
+.sidebar.collapsed .sidebar-collapse-btn {
+  width: auto;
+  padding: 10px;
+  justify-content: center;
+}
+
+.sidebar-collapse-btn span {
+  /* Label text */
+}
+
+.sidebar.collapsed .sidebar-collapse-btn span {
+  display: none;
+}
+```
+
+### TSX Changes (sidebar.tsx)
+Add text label to button:
+```tsx
+<button
+  className="sidebar-collapse-btn"
+  onClick={onToggleCollapse}
+  title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+  aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+>
+  {collapsed ? <FaChevronLeft /> : <FaChevronRight />}
+  <span>{collapsed ? "Expand" : "Collapse"}</span>
+</button>
+```
+
+## Output
+Write brief status to `./reports/fix-collapse-button-final.md`
+
+## CRITICAL: File Modified Error Workaround
+If Edit/Write fails: Read file again, retry Edit. Try path formats: `./relative`, `C:/forward/slashes`, `C:\back\slashes`. NEVER use bash.

prompts/fix-collapse-button-visibility.md

@@ -0,0 +1,64 @@
+# Task: Make Collapse Button More Visible
+
+## Context
+The sidebar collapse button was implemented but it's nearly invisible - a tiny chevron with no background that blends into the UI. Users can't find it.
+
+## Objective
+Make the collapse button prominent and easy to find/use.
+
+## File to Edit
+`src/components/sidebar.css` - the `.sidebar-collapse-btn` styles (around line 18)
+
+## Changes Needed
+
+Replace the current subtle styling with something more visible:
+
+```css
+.sidebar-collapse-btn {
+  background: var(--color-bg-secondary, #1a1a2e);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  padding: 8px 12px;
+  margin: 8px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1rem;
+  color: var(--color-text);
+  transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+.sidebar-collapse-btn:hover {
+  background: var(--color-bg-hover, #2a2a4e);
+  transform: scale(1.05);
+}
+
+.sidebar-collapse-btn:focus {
+  outline: 2px solid var(--color-accent, #4a9eff);
+  outline-offset: 2px;
+}
+```
+
+Key improvements:
+- Visible background color
+- Border to define the button
+- Border-radius for modern look
+- Margin so it's not flush against edges
+- Hover effect with slight scale
+- Better focus indicator
+
+## Also Consider
+In collapsed mode, the button should still be clearly visible within the 50px width. May need:
+```css
+.sidebar.collapsed .sidebar-collapse-btn {
+  margin: 8px 4px;
+  padding: 8px;
+}
+```
+
+## Output
+Write brief status to `./reports/collapse-button-fix-report.md`
+
+## CRITICAL: File Modified Error Workaround
+If Edit/Write fails: Read file again, retry Edit, try path formats: `./relative`, `C:/forward/slashes`, `C:\back\slashes`. NEVER use bash for file edits.