yetone · yetone · May 22, 2026 · May 22, 2026 · May 22, 2026 · May 22, 2026
diff --git a/.claude/skills/dark-mode-daisyui/SKILL.md b/.claude/skills/dark-mode-daisyui/SKILL.md
@@ -0,0 +1,18 @@
+---
+name: dark-mode-daisyui
+description: |
+  Implement dark mode theme switching using DaisyUI's data-theme attribute system
+  with localStorage persistence, system preference detection via matchMedia,
+  smooth CSS transitions, and accessible toggle buttons.
+metadata:
+  triggers:
+    - "dark mode"
+    - "theme toggle"
+    - "DaisyUI theme"
+    - "prefers-color-scheme"
+    - "light dark theme"
+    - "data-theme"
+  scope: project
+---
+
+See [README.md](references/README.md) for full documentation.
diff --git a/.claude/skills/dark-mode-daisyui/references/README.md b/.claude/skills/dark-mode-daisyui/references/README.md
@@ -0,0 +1,122 @@
+# Dark Mode Implementation with DaisyUI
+
+## Overview
+
+This project uses DaisyUI's theme system for dark mode. DaisyUI provides built-in light and dark themes that are activated by setting `data-theme` on the `<html>` element. All `bg-base-*` and `text-base-*` utility classes automatically adapt.
+
+## When to Use This Skill
+
+Use this skill when users request:
+- Adding dark mode to a DaisyUI/Tailwind project
+- Theme toggle with localStorage persistence
+- System preference detection (prefers-color-scheme)
+- Smooth theme transitions
+
+## Core Capabilities
+
+### 1. Theme Detection and Persistence
+
+Location: `web/src/js/main.js`
+
+```javascript
+function initTheme() {
+  const root = document.documentElement;
+  const savedTheme = localStorage.getItem('theme');
+
+  let theme;
+  if (savedTheme) {
+    theme = savedTheme;
+  } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    theme = 'dark';
+  } else {
+    theme = 'light';
+  }
+
+  root.setAttribute('data-theme', theme);
+
+  // Listen for system preference changes
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  mediaQuery.addEventListener('change', function(event) {
+    if (!localStorage.getItem('theme')) {
+      const newTheme = event.matches ? 'dark' : 'light';
+      root.setAttribute('data-theme', newTheme);
+    }
+  });
+
+  initThemeToggle();
+}
+```
+
+### 2. Toggle Button Handling
+
+```javascript
+function initThemeToggle() {
+  // IMPORTANT: Use querySelectorAll for multiple toggle buttons (desktop + mobile)
+  const toggleBtns = document.querySelectorAll('[data-testid="theme-toggle"]');
+  if (!toggleBtns.length) return;
+
+  toggleBtns.forEach(function(toggleBtn) {
+    toggleBtn.addEventListener('click', function() {
+      const root = document.documentElement;
+      const currentTheme = root.getAttribute('data-theme') || 'light';
+      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+      root.setAttribute('data-theme', newTheme);
+      localStorage.setItem('theme', newTheme);
+
+      // Update ALL toggle button icons/labels
+      toggleBtns.forEach(function(btn) {
+        updateToggleLabel(btn, newTheme);
+      });
+    });
+
+    const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
+    updateToggleLabel(toggleBtn, currentTheme);
+  });
+}
+
+function updateToggleLabel(button, theme) {
+  const isDark = theme === 'dark';
+  button.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode');
+  button.setAttribute('title', isDark ? 'Switch to light mode' : 'Switch to dark mode');
+
+  const icon = button.querySelector('.theme-icon');
+  if (icon) {
+    icon.textContent = isDark ? '☀' : '☽';
+  }
+}
+```
+
+### 3. CSS Transitions
+
+Location: `web/src/css/main.css`
+
+```css
+html {
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+body, .navbar, .hero, .card, .footer, section {
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+```
+
+## Best Practices
+
+- Use `querySelectorAll` not `querySelector` for toggle buttons when there are multiple (desktop + mobile)
+- Remove hardcoded `data-theme="light"` from `<html>` so JS can set it dynamically before render
+- Use DaisyUI semantic colors (`bg-base-100`, `text-base-content`) rather than explicit light/dark classes
+- Check localStorage before system preference — user's explicit choice should override OS settings
+- Update ALL toggle button labels/icons when theme changes, not just the clicked one
+
+## Resources
+
+### references/
+
+- `README.md` - This documentation
+
+### Related Files
+
+- `web/src/js/main.js` - Theme detection, toggle, and persistence logic
+- `web/src/css/main.css` - Theme transition styles
+- `web/templates/partials/nav.html` - Theme toggle buttons in nav
+- `tests/e2e/theme.spec.js` - Full E2E test suite for dark mode
diff --git a/.claude/skills/e2e-color-brightness-testing/SKILL.md b/.claude/skills/e2e-color-brightness-testing/SKILL.md
@@ -0,0 +1,18 @@
+---
+name: e2e-color-brightness-testing
+description: |
+  Extract normalized brightness from computed CSS colors in Playwright E2E tests.
+  Handles multiple color formats (rgb, rgba, oklch, oklab, hsl) that modern browsers
+  return from getComputedStyle, enabling robust color-based assertions across browsers.
+metadata:
+  triggers:
+    - "color brightness test"
+    - "computed color testing"
+    - "oklch test"
+    - "color format parsing"
+    - "getComputedStyle test"
+    - "dark mode color assertion"
+  scope: project
+---
+
+See [README.md](references/README.md) for full documentation.
diff --git a/.claude/skills/e2e-color-brightness-testing/references/README.md b/.claude/skills/e2e-color-brightness-testing/references/README.md
@@ -0,0 +1,100 @@
+# E2E Color Brightness Testing
+
+## Overview
+
+When testing dark mode or any color-dependent UI feature with Playwright, `getComputedStyle` returns colors in different formats depending on the browser and CSS engine. This skill provides a robust `getBrightness()` helper that normalizes any format to a 0-255 brightness scale.
+
+## When to Use This Skill
+
+Use this skill when users request:
+- Testing CSS colors in E2E tests
+- Handling oklch/oklab color formats from getComputedStyle
+- Writing assertions for dark/light mode color verification
+- Parsing multiple CSS color formats in tests
+
+## Core Capabilities
+
+### 1. Multi-Format Color Brightness Extraction
+
+```javascript
+function getBrightness(colorStr) {
+  if (!colorStr) return null;
+
+  // rgb/rgba: rgb(255, 255, 255) or rgba(255, 255, 255, 0.5)
+  const rgbMatch = colorStr.match(/rgba?\((\d+(?:\.\d+)?),\s*(\d+(?:\.\d+)?),\s*(\d+(?:\.\d+)?)/);
+  if (rgbMatch) {
+    const r = parseFloat(rgbMatch[1]);
+    const g = parseFloat(rgbMatch[2]);
+    const b = parseFloat(rgbMatch[3]);
+    return (r + g + b) / 3;
+  }
+
+  // oklch: oklch(0.278078 0.029596 256.848) — first value is lightness 0-1
+  const oklchMatch = colorStr.match(/oklch\(([\d.]+)/);
+  if (oklchMatch) {
+    return parseFloat(oklchMatch[1]) * 255;
+  }
+
+  // oklab: oklab(0.419385 0.00478227 -0.0474926) — first value is lightness 0-1
+  const oklabMatch = colorStr.match(/oklab\(([\d.]+)/);
+  if (oklabMatch) {
+    return parseFloat(oklabMatch[1]) * 255;
+  }
+
+  // hsl: hsl(210, 100%, 50%)
+  const hslMatch = colorStr.match(/hsl\([\d.]+,\s*[\d.]+%?,\s*([\d.]+)%?\)/);
+  if (hslMatch) {
+    return (parseFloat(hslMatch[1]) / 100) * 255;
+  }
+
+  return null;
+}
+```
+
+### 2. Usage in Playwright Tests
+
+```javascript
+const bodyBg = await body.evaluate(el => {
+  const computed = window.getComputedStyle(el);
+  return computed.backgroundColor;
+});
+
+const brightness = getBrightness(bodyBg);
+expect(brightness).not.toBeNull();
+expect(brightness).toBeGreaterThan(200); // Light background
+```
+
+### 3. Handling Playwright Strict Mode with Multiple Elements
+
+When multiple elements share the same `data-testid`, use the `:visible` pseudo-class:
+
+```javascript
+// Selects only the visible toggle based on viewport
+const toggleBtn = page.locator('[data-testid="theme-toggle"]:visible');
+```
+
+## Best Practices
+
+- Always normalize colors to brightness rather than comparing raw strings
+- Include parsers for oklch and oklab — modern Chromium returns these formats
+- Use empirically-determined thresholds based on your design system
+- Use `:visible` pseudo-class for elements that exist in both desktop and mobile layouts
+
+## Recommended Brightness Thresholds (DaisyUI)
+
+| Context | Threshold |
+|---------|-----------|
+| Light background | > 200 |
+| Dark background | < 100 |
+| Dark text (light mode) | < 120 |
+| Light text (dark mode) | > 180 |
+
+## Resources
+
+### references/
+
+- `README.md` - This documentation
+
+### Related Files
+
+- `tests/e2e/theme.spec.js` - Full implementation with getBrightness() helper
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,4 @@
 /target
 **/*.rs.bk
+.something/
+node_modules/
diff --git a/mirdb-server/Cargo.toml b/mirdb-server/Cargo.toml
@@ -15,6 +15,7 @@ tokio-proto = "0.1"
 tokio-service = "0.1"
 glob = "0.3.0"
 serde = { version = "1.0", features = ["derive"] }
+serde_json = "1.0"
 bincode = "1.1.2"
 integer-encoding = "1.0"
 snap = "0.2"

diff --git a/mirdb-server/src/main.rs b/mirdb-server/src/main.rs
@@ -53,6 +53,7 @@ mod test_utils;
 mod thread_pool;
 mod types;
 mod wal;
+mod web;
 
 pub struct Server {
     store: Arc<Store>,