wip 21

api/v1/admin.go

@@ -941,7 +941,16 @@ func (s *Server) GetLogs(ctx context.Context, request GetLogsRequestObject) (Get
 		return GetLogs401JSONResponse{Code: 401, Message: "Unauthorized"}, nil
 	}
 
-	// Get filter parameter (mirroring legacy)
+	page := int64(1)
+	if request.Params.Page != nil && *request.Params.Page > 0 {
+		page = *request.Params.Page
+	}
+
+	limit := int64(100)
+	if request.Params.Limit != nil && *request.Params.Limit > 0 {
+		limit = *request.Params.Limit
+	}
+
 	filter := ""
 	if request.Params.Filter != nil {
 		filter = strings.TrimSpace(*request.Params.Filter)
@@ -967,7 +976,6 @@ func (s *Server) GetLogs(ctx context.Context, request GetLogsRequestObject) (Get
 		}
 	}
 
-	// Open Log File (mirroring legacy)
 	logPath := filepath.Join(s.cfg.ConfigPath, "logs/antholume.log")
 	logFile, err := os.Open(logPath)
 	if err != nil {
@@ -975,58 +983,90 @@ func (s *Server) GetLogs(ctx context.Context, request GetLogsRequestObject) (Get
 	}
 	defer logFile.Close()
 
-	// Log Lines (mirroring legacy)
+	offset := (page - 1) * limit
-	var logLines []string
+	logLines := make([]string, 0, limit)
+	matchedCount := int64(0)
+
 	scanner := bufio.NewScanner(logFile)
 	for scanner.Scan() {
-		rawLog := scanner.Text()
+		formattedLog, matched := formatLogLine(scanner.Text(), basicFilter, jqFilter)
-
+		if !matched {
-		// Attempt JSON Pretty (mirroring legacy)
-		var jsonMap map[string]any
-		err := json.Unmarshal([]byte(rawLog), &jsonMap)
-		if err != nil {
-			logLines = append(logLines, rawLog)
 			continue
 		}
 
-		// Parse JSON (mirroring legacy)
+		if matchedCount >= offset && int64(len(logLines)) < limit {
-		rawData, err := json.MarshalIndent(jsonMap, "", "  ")
+			logLines = append(logLines, formattedLog)
-		if err != nil {
-			logLines = append(logLines, rawLog)
-			continue
 		}
+		matchedCount++
+	}
 
-		// Basic Filter (mirroring legacy)
+	if err := scanner.Err(); err != nil {
-		if basicFilter != "" && strings.Contains(string(rawData), basicFilter) {
+		return GetLogs500JSONResponse{Code: 500, Message: "Unable to read AnthoLume log file"}, nil
-			logLines = append(logLines, string(rawData))
+	}
-			continue
-		}
 
-		// No JQ Filter (mirroring legacy)
+	var nextPage *int64
-		if jqFilter == nil {
+	var previousPage *int64
-			continue
+	if page > 1 {
-		}
+		previousPage = ptrOf(page - 1)
-
+	}
-		// Error or nil (mirroring legacy)
+	if offset+int64(len(logLines)) < matchedCount {
-		result, _ := jqFilter.Run(jsonMap).Next()
+		nextPage = ptrOf(page + 1)
-		if _, ok := result.(error); ok {
-			logLines = append(logLines, string(rawData))
-			continue
-		} else if result == nil {
-			continue
-		}
-
-		// Attempt filtered json (mirroring legacy)
-		filteredData, err := json.MarshalIndent(result, "", "  ")
-		if err == nil {
-			rawData = filteredData
-		}
-
-		logLines = append(logLines, string(rawData))
 	}
 
 	return GetLogs200JSONResponse{
-		Logs:   &logLines,
+		Logs:         &logLines,
-		Filter: &filter,
+		Filter:       &filter,
+		Page:         &page,
+		Limit:        &limit,
+		NextPage:     nextPage,
+		PreviousPage: previousPage,
+		Total:        &matchedCount,
 	}, nil
 }
+
+func formatLogLine(rawLog string, basicFilter string, jqFilter *gojq.Code) (string, bool) {
+	var jsonMap map[string]any
+	if err := json.Unmarshal([]byte(rawLog), &jsonMap); err != nil {
+		if basicFilter == "" && jqFilter == nil {
+			return rawLog, true
+		}
+		if basicFilter != "" && strings.Contains(rawLog, basicFilter) {
+			return rawLog, true
+		}
+		return "", false
+	}
+
+	rawData, err := json.MarshalIndent(jsonMap, "", "  ")
+	if err != nil {
+		if basicFilter == "" && jqFilter == nil {
+			return rawLog, true
+		}
+		if basicFilter != "" && strings.Contains(rawLog, basicFilter) {
+			return rawLog, true
+		}
+		return "", false
+	}
+
+	formattedLog := string(rawData)
+	if basicFilter != "" {
+		return formattedLog, strings.Contains(formattedLog, basicFilter)
+	}
+	if jqFilter == nil {
+		return formattedLog, true
+	}
+
+	result, _ := jqFilter.Run(jsonMap).Next()
+	if _, ok := result.(error); ok {
+		return formattedLog, true
+	}
+	if result == nil {
+		return "", false
+	}
+
+	filteredData, err := json.MarshalIndent(result, "", "  ")
+	if err == nil {
+		formattedLog = string(filteredData)
+	}
+
+	return formattedLog, true
+}

api/v1/admin_test.go

@@ -0,0 +1,152 @@
+package v1
+
+import (
+	"bytes"
+	"context"
+	"crypto/md5"
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"net/http/httptest"
+	"os"
+	"path/filepath"
+	"testing"
+
+	argon2 "github.com/alexedwards/argon2id"
+	"github.com/stretchr/testify/require"
+	"reichard.io/antholume/config"
+	"reichard.io/antholume/database"
+)
+
+func createAdminTestUser(t *testing.T, db *database.DBManager, username, password string) {
+	t.Helper()
+
+	md5Hash := fmt.Sprintf("%x", md5.Sum([]byte(password)))
+	hashedPassword, err := argon2.CreateHash(md5Hash, argon2.DefaultParams)
+	require.NoError(t, err)
+
+	authHash := "test-auth-hash"
+	_, err = db.Queries.CreateUser(context.Background(), database.CreateUserParams{
+		ID:       username,
+		Pass:     &hashedPassword,
+		AuthHash: &authHash,
+		Admin:    true,
+	})
+	require.NoError(t, err)
+}
+
+func loginAdminTestUser(t *testing.T, srv *Server, username, password string) *http.Cookie {
+	t.Helper()
+
+	body, err := json.Marshal(LoginRequest{Username: username, Password: password})
+	require.NoError(t, err)
+
+	req := httptest.NewRequest(http.MethodPost, "/api/v1/auth/login", bytes.NewReader(body))
+	w := httptest.NewRecorder()
+	srv.ServeHTTP(w, req)
+
+	require.Equal(t, http.StatusOK, w.Code)
+	cookies := w.Result().Cookies()
+	require.Len(t, cookies, 1)
+
+	return cookies[0]
+}
+
+func TestGetLogsPagination(t *testing.T) {
+	configPath := t.TempDir()
+	require.NoError(t, os.MkdirAll(filepath.Join(configPath, "logs"), 0o755))
+	require.NoError(t, os.WriteFile(filepath.Join(configPath, "logs", "antholume.log"), []byte(
+		"{\"level\":\"info\",\"msg\":\"one\"}\n"+
+			"plain two\n"+
+			"{\"level\":\"error\",\"msg\":\"three\"}\n"+
+			"plain four\n",
+	), 0o644))
+
+	cfg := &config.Config{
+		ListenPort:          "8080",
+		DBType:              "memory",
+		DBName:              "test",
+		ConfigPath:          configPath,
+		CookieAuthKey:       "test-auth-key-32-bytes-long-enough",
+		CookieEncKey:        "0123456789abcdef",
+		CookieSecure:        false,
+		CookieHTTPOnly:      true,
+		Version:             "test",
+		DemoMode:            false,
+		RegistrationEnabled: true,
+	}
+
+	db := database.NewMgr(cfg)
+	srv := NewServer(db, cfg, nil)
+	createAdminTestUser(t, db, "admin", "password")
+	cookie := loginAdminTestUser(t, srv, "admin", "password")
+
+	req := httptest.NewRequest(http.MethodGet, "/api/v1/admin/logs?page=2&limit=2", nil)
+	req.AddCookie(cookie)
+	w := httptest.NewRecorder()
+	srv.ServeHTTP(w, req)
+
+	require.Equal(t, http.StatusOK, w.Code)
+
+	var resp LogsResponse
+	require.NoError(t, json.Unmarshal(w.Body.Bytes(), &resp))
+	require.NotNil(t, resp.Logs)
+	require.Len(t, *resp.Logs, 2)
+	require.NotNil(t, resp.Page)
+	require.Equal(t, int64(2), *resp.Page)
+	require.NotNil(t, resp.Limit)
+	require.Equal(t, int64(2), *resp.Limit)
+	require.NotNil(t, resp.Total)
+	require.Equal(t, int64(4), *resp.Total)
+	require.Nil(t, resp.NextPage)
+	require.NotNil(t, resp.PreviousPage)
+	require.Equal(t, int64(1), *resp.PreviousPage)
+	require.Contains(t, (*resp.Logs)[0], "three")
+	require.Contains(t, (*resp.Logs)[1], "plain four")
+}
+
+func TestGetLogsPaginationWithBasicFilter(t *testing.T) {
+	configPath := t.TempDir()
+	require.NoError(t, os.MkdirAll(filepath.Join(configPath, "logs"), 0o755))
+	require.NoError(t, os.WriteFile(filepath.Join(configPath, "logs", "antholume.log"), []byte(
+		"{\"level\":\"info\",\"msg\":\"match-1\"}\n"+
+			"{\"level\":\"info\",\"msg\":\"skip\"}\n"+
+			"plain match-2\n"+
+			"{\"level\":\"info\",\"msg\":\"match-3\"}\n",
+	), 0o644))
+
+	cfg := &config.Config{
+		ListenPort:          "8080",
+		DBType:              "memory",
+		DBName:              "test",
+		ConfigPath:          configPath,
+		CookieAuthKey:       "test-auth-key-32-bytes-long-enough",
+		CookieEncKey:        "0123456789abcdef",
+		CookieSecure:        false,
+		CookieHTTPOnly:      true,
+		Version:             "test",
+		DemoMode:            false,
+		RegistrationEnabled: true,
+	}
+
+	db := database.NewMgr(cfg)
+	srv := NewServer(db, cfg, nil)
+	createAdminTestUser(t, db, "admin", "password")
+	cookie := loginAdminTestUser(t, srv, "admin", "password")
+
+	req := httptest.NewRequest(http.MethodGet, "/api/v1/admin/logs?filter=%22match%22&page=1&limit=2", nil)
+	req.AddCookie(cookie)
+	w := httptest.NewRecorder()
+	srv.ServeHTTP(w, req)
+
+	require.Equal(t, http.StatusOK, w.Code)
+
+	var resp LogsResponse
+	require.NoError(t, json.Unmarshal(w.Body.Bytes(), &resp))
+	require.NotNil(t, resp.Logs)
+	require.Len(t, *resp.Logs, 2)
+	require.NotNil(t, resp.Total)
+	require.Equal(t, int64(3), *resp.Total)
+	require.NotNil(t, resp.NextPage)
+	require.Equal(t, int64(2), *resp.NextPage)
+}

api/v1/api.gen.go

@@ -314,8 +314,13 @@ type LoginResponse struct {
 
 // LogsResponse defines model for LogsResponse.
 type LogsResponse struct {
-	Filter *string     `json:"filter,omitempty"`
+	Filter       *string     `json:"filter,omitempty"`
-	Logs   *[]LogEntry `json:"logs,omitempty"`
+	Limit        *int64      `json:"limit,omitempty"`
+	Logs         *[]LogEntry `json:"logs,omitempty"`
+	NextPage     *int64      `json:"next_page,omitempty"`
+	Page         *int64      `json:"page,omitempty"`
+	PreviousPage *int64      `json:"previous_page,omitempty"`
+	Total        *int64      `json:"total,omitempty"`
 }
 
 // MessageResponse defines model for MessageResponse.
@@ -465,6 +470,8 @@ type PostImportFormdataBody struct {
 // GetLogsParams defines parameters for GetLogs.
 type GetLogsParams struct {
 	Filter *string `form:"filter,omitempty" json:"filter,omitempty"`
+	Page   *int64  `form:"page,omitempty" json:"page,omitempty"`
+	Limit  *int64  `form:"limit,omitempty" json:"limit,omitempty"`
 }
 
 // UpdateUserFormdataBody defines parameters for UpdateUser.
@@ -862,6 +869,22 @@ func (siw *ServerInterfaceWrapper) GetLogs(w http.ResponseWriter, r *http.Reques
 		return
 	}
 
+	// ------------- Optional query parameter "page" -------------
+
+	err = runtime.BindQueryParameterWithOptions("form", true, false, "page", r.URL.Query(), &params.Page, runtime.BindQueryParameterOptions{Type: "integer", Format: "int64"})
+	if err != nil {
+		siw.ErrorHandlerFunc(w, r, &InvalidParamFormatError{ParamName: "page", Err: err})
+		return
+	}
+
+	// ------------- Optional query parameter "limit" -------------
+
+	err = runtime.BindQueryParameterWithOptions("form", true, false, "limit", r.URL.Query(), &params.Limit, runtime.BindQueryParameterOptions{Type: "integer", Format: "int64"})
+	if err != nil {
+		siw.ErrorHandlerFunc(w, r, &InvalidParamFormatError{ParamName: "limit", Err: err})
+		return
+	}
+
 	handler := http.Handler(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		siw.Handler.GetLogs(w, r, params)
 	}))

api/v1/openapi.yaml

@@ -594,6 +594,21 @@ components:
             $ref: '#/components/schemas/LogEntry'
         filter:
           type: string
+        page:
+          type: integer
+          format: int64
+        limit:
+          type: integer
+          format: int64
+        next_page:
+          type: integer
+          format: int64
+        previous_page:
+          type: integer
+          format: int64
+        total:
+          type: integer
+          format: int64
 
     InfoResponse:
       type: object
@@ -1764,6 +1779,18 @@ paths:
           in: query
           schema:
             type: string
+        - name: page
+          in: query
+          schema:
+            type: integer
+            format: int64
+            minimum: 1
+        - name: limit
+          in: query
+          schema:
+            type: integer
+            format: int64
+            minimum: 1
       security:
         - BearerAuth: []
       responses:

frontend/AGENTS.md

@@ -18,6 +18,7 @@ Also follow the repository root guide at `../AGENTS.md`.
 - Do not add external icon libraries.
 - Prefer generated types from `src/generated/model/` over `any`.
 - Avoid custom class names in JSX `className` values unless the Tailwind lint config already allows them.
+- Prefer `LoadingState` for result-area loading indicators; avoid early returns that unmount search/filter forms during fetches.
 
 ## 3) Generated API client
 
@@ -51,6 +52,9 @@ Also follow the repository root guide at `../AGENTS.md`.
 
 - ESLint ignores `src/generated/**`.
 - Frontend unit tests use Vitest and live alongside source as `src/**/*.test.ts(x)`.
+- Read `TESTING_STRATEGY.md` before adding or expanding frontend tests.
+- Prefer tests for meaningful app behavior, branching logic, side effects, and user-visible outcomes.
+- Avoid low-value tests that mainly assert exact styling classes, duplicate existing coverage, or re-test framework/library behavior.
 - `bun run lint` includes test files but does not typecheck.
 - Use `bun run typecheck` to run TypeScript validation for app code and colocated tests without a full production build.
 - Run frontend tests with `bun run test`.

frontend/TESTING_STRATEGY.md

@@ -0,0 +1,73 @@
+# Frontend Testing Strategy
+
+This project prefers meaningful frontend tests over high test counts.
+
+## What we want to test
+
+Prioritize tests for app-owned behavior such as:
+
+- user-visible page and component behavior
+- auth and routing behavior
+- branching logic and business rules
+- data normalization and error handling
+- timing behavior with real app logic
+- side effects that could regress, such as token handling or redirects
+- algorithmic or formatting logic that defines product behavior
+
+Good examples in this repo:
+
+- login and registration flows
+- protected-route behavior
+- auth interceptor token injection and cleanup
+- error message extraction
+- debounce timing
+- human-readable formatting logic
+- graph/algorithm output where exact parity matters
+
+## What we usually do not want to test
+
+Avoid tests that mostly prove:
+
+- the language/runtime works
+- React forwards basic props correctly
+- a third-party library behaves as documented
+- exact Tailwind class strings with no product meaning
+- implementation details not observable in behavior
+- duplicated examples that re-assert the same logic
+
+In other words, do not add tests equivalent to checking that JavaScript can compute `1 + 1`.
+
+## Preferred test style
+
+- Prefer behavior-focused assertions over implementation-detail assertions.
+- Prefer user-visible outcomes over internal state inspection.
+- Mock at module boundaries when needed.
+- Keep test setup small and local.
+- Use exact-output assertions only when the output itself is the contract.
+
+## When exact assertions are appropriate
+
+Exact assertions are appropriate when they protect a real contract, for example:
+
+- a formatter's exact human-readable output
+- auth decision outcomes for a given API response shape
+- exact algorithm output that must remain stable
+
+Exact assertions are usually not appropriate for:
+
+- incidental class names
+- framework internals
+- non-observable React keys
+
+## Cleanup rule of thumb
+
+Keep tests that would catch meaningful regressions in product behavior.
+Trim or remove tests that are brittle, duplicated, or mostly validate tooling rather than app logic.
+
+## Validation
+
+For frontend test work, validate with:
+
+- `cd frontend && bun run lint`
+- `cd frontend && bun run typecheck`
+- `cd frontend && bun run test`

frontend/bun.lock

@@ -17,6 +17,9 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.17.0",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
+        "@testing-library/user-event": "^14.6.1",
         "@types/react": "^19.0.8",
         "@types/react-dom": "^19.0.8",
         "@typescript-eslint/eslint-plugin": "^8.13.0",
@@ -29,6 +32,7 @@
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-react-hooks": "^5.0.0",
         "eslint-plugin-tailwindcss": "^3.18.2",
+        "jsdom": "^29.0.1",
         "postcss": "^8.4.49",
         "prettier": "^3.3.3",
         "tailwindcss": "^3.4.17",
@@ -39,8 +43,16 @@
     },
   },
   "packages": {
+    "@adobe/css-tools": ["@adobe/css-tools@4.4.4", "", {}, "sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg=="],
+
     "@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="],
 
+    "@asamuzakjp/css-color": ["@asamuzakjp/css-color@5.0.1", "", { "dependencies": { "@csstools/css-calc": "^3.1.1", "@csstools/css-color-parser": "^4.0.2", "@csstools/css-parser-algorithms": "^4.0.0", "@csstools/css-tokenizer": "^4.0.0", "lru-cache": "^11.2.6" } }, "sha512-2SZFvqMyvboVV1d15lMf7XiI3m7SDqXUuKaTymJYLN6dSGadqp+fVojqJlVoMlbZnlTmu3S0TLwLTJpvBMO1Aw=="],
+
+    "@asamuzakjp/dom-selector": ["@asamuzakjp/dom-selector@7.0.4", "", { "dependencies": { "@asamuzakjp/nwsapi": "^2.3.9", "bidi-js": "^1.0.3", "css-tree": "^3.2.1", "is-potential-custom-element-name": "^1.0.1", "lru-cache": "^11.2.7" } }, "sha512-jXR6x4AcT3eIrS2fSNAwJpwirOkGcd+E7F7CP3zjdTqz9B/2huHOL8YJZBgekKwLML+u7qB/6P1LXQuMScsx0w=="],
+
+    "@asamuzakjp/nwsapi": ["@asamuzakjp/nwsapi@2.3.9", "", {}, "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q=="],
+
     "@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
 
     "@babel/compat-data": ["@babel/compat-data@7.29.0", "", {}, "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg=="],
@@ -73,14 +85,30 @@
 
     "@babel/plugin-transform-react-jsx-source": ["@babel/plugin-transform-react-jsx-source@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw=="],
 
+    "@babel/runtime": ["@babel/runtime@7.29.2", "", {}, "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g=="],
+
     "@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
 
     "@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
 
     "@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
 
+    "@bramus/specificity": ["@bramus/specificity@2.4.2", "", { "dependencies": { "css-tree": "^3.0.0" }, "bin": { "specificity": "bin/cli.js" } }, "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw=="],
+
     "@commander-js/extra-typings": ["@commander-js/extra-typings@14.0.0", "", { "peerDependencies": { "commander": "~14.0.0" } }, "sha512-hIn0ncNaJRLkZrxBIp5AsW/eXEHNKYQBh0aPdoUqNgD+Io3NIykQqpKFyKcuasZhicGaEZJX/JBSIkZ4e5x8Dg=="],
 
+    "@csstools/color-helpers": ["@csstools/color-helpers@6.0.2", "", {}, "sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q=="],
+
+    "@csstools/css-calc": ["@csstools/css-calc@3.1.1", "", { "peerDependencies": { "@csstools/css-parser-algorithms": "^4.0.0", "@csstools/css-tokenizer": "^4.0.0" } }, "sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ=="],
+
+    "@csstools/css-color-parser": ["@csstools/css-color-parser@4.0.2", "", { "dependencies": { "@csstools/color-helpers": "^6.0.2", "@csstools/css-calc": "^3.1.1" }, "peerDependencies": { "@csstools/css-parser-algorithms": "^4.0.0", "@csstools/css-tokenizer": "^4.0.0" } }, "sha512-0GEfbBLmTFf0dJlpsNU7zwxRIH0/BGEMuXLTCvFYxuL1tNhqzTbtnFICyJLTNK4a+RechKP75e7w42ClXSnJQw=="],
+
+    "@csstools/css-parser-algorithms": ["@csstools/css-parser-algorithms@4.0.0", "", { "peerDependencies": { "@csstools/css-tokenizer": "^4.0.0" } }, "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w=="],
+
+    "@csstools/css-syntax-patches-for-csstree": ["@csstools/css-syntax-patches-for-csstree@1.1.1", "", { "peerDependencies": { "css-tree": "^3.2.1" }, "optionalPeers": ["css-tree"] }, "sha512-BvqN0AMWNAnLk9G8jnUT77D+mUbY/H2b3uDTvg2isJkHaOufUE2R3AOwxWo7VBQKT1lOdwdvorddo2B/lk64+w=="],
+
+    "@csstools/css-tokenizer": ["@csstools/css-tokenizer@4.0.0", "", {}, "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA=="],
+
     "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.12", "", { "os": "aix", "cpu": "ppc64" }, "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA=="],
 
     "@esbuild/android-arm": ["@esbuild/android-arm@0.25.12", "", { "os": "android", "cpu": "arm" }, "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg=="],
@@ -151,6 +179,8 @@
 
     "@eslint/plugin-kit": ["@eslint/plugin-kit@0.4.1", "", { "dependencies": { "@eslint/core": "^0.17.0", "levn": "^0.4.1" } }, "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA=="],
 
+    "@exodus/bytes": ["@exodus/bytes@1.15.0", "", { "peerDependencies": { "@noble/hashes": "^1.8.0 || ^2.0.0" }, "optionalPeers": ["@noble/hashes"] }, "sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ=="],
+
     "@gerrit0/mini-shiki": ["@gerrit0/mini-shiki@3.23.0", "", { "dependencies": { "@shikijs/engine-oniguruma": "^3.23.0", "@shikijs/langs": "^3.23.0", "@shikijs/themes": "^3.23.0", "@shikijs/types": "^3.23.0", "@shikijs/vscode-textmate": "^10.0.2" } }, "sha512-bEMORlG0cqdjVyCEuU0cDQbORWX+kYCeo0kV1lbxF5bt4r7SID2l9bqsxJEM0zndaxpOUT7riCyIVEuqq/Ynxg=="],
 
     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
@@ -283,6 +313,16 @@
 
     "@tanstack/react-query": ["@tanstack/react-query@5.90.21", "", { "dependencies": { "@tanstack/query-core": "5.90.20" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-0Lu6y5t+tvlTJMTO7oh5NSpJfpg/5D41LlThfepTixPYkJ0sE2Jj0m0f6yYqujBwIXlId87e234+MxG3D3g7kg=="],
 
+    "@testing-library/dom": ["@testing-library/dom@10.4.1", "", { "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", "@types/aria-query": "^5.0.1", "aria-query": "5.3.0", "dom-accessibility-api": "^0.5.9", "lz-string": "^1.5.0", "picocolors": "1.1.1", "pretty-format": "^27.0.2" } }, "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg=="],
+
+    "@testing-library/jest-dom": ["@testing-library/jest-dom@6.9.1", "", { "dependencies": { "@adobe/css-tools": "^4.4.0", "aria-query": "^5.0.0", "css.escape": "^1.5.1", "dom-accessibility-api": "^0.6.3", "picocolors": "^1.1.1", "redent": "^3.0.0" } }, "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA=="],
+
+    "@testing-library/react": ["@testing-library/react@16.3.2", "", { "dependencies": { "@babel/runtime": "^7.12.5" }, "peerDependencies": { "@testing-library/dom": "^10.0.0", "@types/react": "^18.0.0 || ^19.0.0", "@types/react-dom": "^18.0.0 || ^19.0.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g=="],
+
+    "@testing-library/user-event": ["@testing-library/user-event@14.6.1", "", { "peerDependencies": { "@testing-library/dom": ">=7.21.4" } }, "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw=="],
+
+    "@types/aria-query": ["@types/aria-query@5.0.4", "", {}, "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw=="],
+
     "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
 
     "@types/babel__generator": ["@types/babel__generator@7.27.0", "", { "dependencies": { "@babel/types": "^7.0.0" } }, "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg=="],
@@ -369,6 +409,8 @@
 
     "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
 
+    "aria-query": ["aria-query@5.3.2", "", {}, "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw=="],
+
     "array-buffer-byte-length": ["array-buffer-byte-length@1.0.2", "", { "dependencies": { "call-bound": "^1.0.3", "is-array-buffer": "^3.0.5" } }, "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw=="],
 
     "array-includes": ["array-includes@3.1.9", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.4", "define-properties": "^1.2.1", "es-abstract": "^1.24.0", "es-object-atoms": "^1.1.1", "get-intrinsic": "^1.3.0", "is-string": "^1.1.1", "math-intrinsics": "^1.1.0" } }, "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ=="],
@@ -399,6 +441,8 @@
 
     "baseline-browser-mapping": ["baseline-browser-mapping@2.10.8", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-PCLz/LXGBsNTErbtB6i5u4eLpHeMfi93aUv5duMmj6caNu6IphS4q6UevDnL36sZQv9lrP11dbPKGMaXPwMKfQ=="],
 
+    "bidi-js": ["bidi-js@1.0.3", "", { "dependencies": { "require-from-string": "^2.0.2" } }, "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw=="],
+
     "binary-extensions": ["binary-extensions@2.3.0", "", {}, "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="],
 
     "brace-expansion": ["brace-expansion@1.1.12", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg=="],
@@ -445,10 +489,16 @@
 
     "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
 
+    "css-tree": ["css-tree@3.2.1", "", { "dependencies": { "mdn-data": "2.27.1", "source-map-js": "^1.2.1" } }, "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA=="],
+
+    "css.escape": ["css.escape@1.5.1", "", {}, "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="],
+
     "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
 
     "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
 
+    "data-urls": ["data-urls@7.0.0", "", { "dependencies": { "whatwg-mimetype": "^5.0.0", "whatwg-url": "^16.0.0" } }, "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA=="],
+
     "data-view-buffer": ["data-view-buffer@1.0.2", "", { "dependencies": { "call-bound": "^1.0.3", "es-errors": "^1.3.0", "is-data-view": "^1.0.2" } }, "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ=="],
 
     "data-view-byte-length": ["data-view-byte-length@1.0.2", "", { "dependencies": { "call-bound": "^1.0.3", "es-errors": "^1.3.0", "is-data-view": "^1.0.2" } }, "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ=="],
@@ -457,6 +507,8 @@
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
+    "decimal.js": ["decimal.js@10.6.0", "", {}, "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg=="],
+
     "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
 
     "define-data-property": ["define-data-property@1.1.4", "", { "dependencies": { "es-define-property": "^1.0.0", "es-errors": "^1.3.0", "gopd": "^1.0.1" } }, "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A=="],
@@ -465,19 +517,23 @@
 
     "delayed-stream": ["delayed-stream@1.0.0", "", {}, "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="],
 
+    "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
+
     "didyoumean": ["didyoumean@1.2.2", "", {}, "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="],
 
     "dlv": ["dlv@1.1.3", "", {}, "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="],
 
     "doctrine": ["doctrine@2.1.0", "", { "dependencies": { "esutils": "^2.0.2" } }, "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw=="],
 
+    "dom-accessibility-api": ["dom-accessibility-api@0.6.3", "", {}, "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w=="],
+
     "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
 
     "electron-to-chromium": ["electron-to-chromium@1.5.313", "", {}, "sha512-QBMrTWEf00GXZmJyx2lbYD45jpI3TUFnNIzJ5BBc8piGUDwMPa1GV6HJWTZVvY/eiN3fSopl7NRbgGp9sZ9LTA=="],
 
     "enquirer": ["enquirer@2.4.1", "", { "dependencies": { "ansi-colors": "^4.1.1", "strip-ansi": "^6.0.1" } }, "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ=="],
 
-    "entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
+    "entities": ["entities@6.0.1", "", {}, "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g=="],
 
     "es-abstract": ["es-abstract@1.24.1", "", { "dependencies": { "array-buffer-byte-length": "^1.0.2", "arraybuffer.prototype.slice": "^1.0.4", "available-typed-arrays": "^1.0.7", "call-bind": "^1.0.8", "call-bound": "^1.0.4", "data-view-buffer": "^1.0.2", "data-view-byte-length": "^1.0.2", "data-view-byte-offset": "^1.0.1", "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.1.1", "es-set-tostringtag": "^2.1.0", "es-to-primitive": "^1.3.0", "function.prototype.name": "^1.1.8", "get-intrinsic": "^1.3.0", "get-proto": "^1.0.1", "get-symbol-description": "^1.1.0", "globalthis": "^1.0.4", "gopd": "^1.2.0", "has-property-descriptors": "^1.0.2", "has-proto": "^1.2.0", "has-symbols": "^1.1.0", "hasown": "^2.0.2", "internal-slot": "^1.1.0", "is-array-buffer": "^3.0.5", "is-callable": "^1.2.7", "is-data-view": "^1.0.2", "is-negative-zero": "^2.0.3", "is-regex": "^1.2.1", "is-set": "^2.0.3", "is-shared-array-buffer": "^1.0.4", "is-string": "^1.1.1", "is-typed-array": "^1.1.15", "is-weakref": "^1.1.1", "math-intrinsics": "^1.1.0", "object-inspect": "^1.13.4", "object-keys": "^1.1.1", "object.assign": "^4.1.7", "own-keys": "^1.0.1", "regexp.prototype.flags": "^1.5.4", "safe-array-concat": "^1.1.3", "safe-push-apply": "^1.0.0", "safe-regex-test": "^1.1.0", "set-proto": "^1.0.0", "stop-iteration-iterator": "^1.1.0", "string.prototype.trim": "^1.2.10", "string.prototype.trimend": "^1.0.9", "string.prototype.trimstart": "^1.0.8", "typed-array-buffer": "^1.0.3", "typed-array-byte-length": "^1.0.3", "typed-array-byte-offset": "^1.0.4", "typed-array-length": "^1.0.7", "unbox-primitive": "^1.1.0", "which-typed-array": "^1.1.19" } }, "sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw=="],
 
@@ -619,6 +675,8 @@
 
     "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
 
+    "html-encoding-sniffer": ["html-encoding-sniffer@6.0.0", "", { "dependencies": { "@exodus/bytes": "^1.6.0" } }, "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg=="],
+
     "human-signals": ["human-signals@8.0.1", "", {}, "sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ=="],
 
     "ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],
@@ -627,6 +685,8 @@
 
     "imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],
 
+    "indent-string": ["indent-string@4.0.0", "", {}, "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg=="],
+
     "internal-slot": ["internal-slot@1.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "hasown": "^2.0.2", "side-channel": "^1.1.0" } }, "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw=="],
 
     "is-array-buffer": ["is-array-buffer@3.0.5", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.3", "get-intrinsic": "^1.2.6" } }, "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A=="],
@@ -667,6 +727,8 @@
 
     "is-plain-obj": ["is-plain-obj@4.1.0", "", {}, "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg=="],
 
+    "is-potential-custom-element-name": ["is-potential-custom-element-name@1.0.1", "", {}, "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="],
+
     "is-regex": ["is-regex@1.2.1", "", { "dependencies": { "call-bound": "^1.0.2", "gopd": "^1.2.0", "has-tostringtag": "^1.0.2", "hasown": "^2.0.2" } }, "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g=="],
 
     "is-set": ["is-set@2.0.3", "", {}, "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg=="],
@@ -701,6 +763,8 @@
 
     "js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="],
 
+    "jsdom": ["jsdom@29.0.1", "", { "dependencies": { "@asamuzakjp/css-color": "^5.0.1", "@asamuzakjp/dom-selector": "^7.0.3", "@bramus/specificity": "^2.4.2", "@csstools/css-syntax-patches-for-csstree": "^1.1.1", "@exodus/bytes": "^1.15.0", "css-tree": "^3.2.1", "data-urls": "^7.0.0", "decimal.js": "^10.6.0", "html-encoding-sniffer": "^6.0.0", "is-potential-custom-element-name": "^1.0.1", "lru-cache": "^11.2.7", "parse5": "^8.0.0", "saxes": "^6.0.0", "symbol-tree": "^3.2.4", "tough-cookie": "^6.0.1", "undici": "^7.24.5", "w3c-xmlserializer": "^5.0.0", "webidl-conversions": "^8.0.1", "whatwg-mimetype": "^5.0.0", "whatwg-url": "^16.0.1", "xml-name-validator": "^5.0.0" }, "peerDependencies": { "canvas": "^3.0.0" }, "optionalPeers": ["canvas"] }, "sha512-z6JOK5gRO7aMybVq/y/MlIpKh8JIi68FBKMUtKkK2KH/wMSRlCxQ682d08LB9fYXplyY/UXG8P4XXTScmdjApg=="],
+
     "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
 
     "json-buffer": ["json-buffer@3.0.1", "", {}, "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="],
@@ -735,16 +799,20 @@
 
     "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
 
-    "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
+    "lru-cache": ["lru-cache@11.2.7", "", {}, "sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA=="],
 
     "lunr": ["lunr@2.3.9", "", {}, "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="],
 
+    "lz-string": ["lz-string@1.5.0", "", { "bin": { "lz-string": "bin/bin.js" } }, "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ=="],
+
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
     "markdown-it": ["markdown-it@14.1.1", "", { "dependencies": { "argparse": "^2.0.1", "entities": "^4.4.0", "linkify-it": "^5.0.0", "mdurl": "^2.0.0", "punycode.js": "^2.3.1", "uc.micro": "^2.1.0" }, "bin": { "markdown-it": "bin/markdown-it.mjs" } }, "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA=="],
 
     "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
 
+    "mdn-data": ["mdn-data@2.27.1", "", {}, "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ=="],
+
     "mdurl": ["mdurl@2.0.0", "", {}, "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="],
 
     "merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
@@ -755,6 +823,8 @@
 
     "mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
 
+    "min-indent": ["min-indent@1.0.1", "", {}, "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="],
+
     "minimatch": ["minimatch@3.1.5", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w=="],
 
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
@@ -805,6 +875,8 @@
 
     "parse-ms": ["parse-ms@4.0.0", "", {}, "sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw=="],
 
+    "parse5": ["parse5@8.0.0", "", { "dependencies": { "entities": "^6.0.0" } }, "sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA=="],
+
     "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
 
     "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
@@ -843,6 +915,8 @@
 
     "prettier-linter-helpers": ["prettier-linter-helpers@1.0.1", "", { "dependencies": { "fast-diff": "^1.1.2" } }, "sha512-SxToR7P8Y2lWmv/kTzVLC1t/GDI2WGjMwNhLLE9qtH8Q13C+aEmuRlzDst4Up4s0Wc8sF2M+J57iB3cMLqftfg=="],
 
+    "pretty-format": ["pretty-format@27.5.1", "", { "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", "react-is": "^17.0.1" } }, "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ=="],
+
     "pretty-ms": ["pretty-ms@9.3.0", "", { "dependencies": { "parse-ms": "^4.0.0" } }, "sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ=="],
 
     "prop-types": ["prop-types@15.8.1", "", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
@@ -871,6 +945,8 @@
 
     "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
 
+    "redent": ["redent@3.0.0", "", { "dependencies": { "indent-string": "^4.0.0", "strip-indent": "^3.0.0" } }, "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg=="],
+
     "reflect.getprototypeof": ["reflect.getprototypeof@1.0.10", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.9", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.7", "get-proto": "^1.0.1", "which-builtin-type": "^1.2.1" } }, "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw=="],
 
     "regexp.prototype.flags": ["regexp.prototype.flags@1.5.4", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-errors": "^1.3.0", "get-proto": "^1.0.1", "gopd": "^1.2.0", "set-function-name": "^2.0.2" } }, "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA=="],
@@ -895,6 +971,8 @@
 
     "safe-regex-test": ["safe-regex-test@1.1.0", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "is-regex": "^1.2.1" } }, "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw=="],
 
+    "saxes": ["saxes@6.0.0", "", { "dependencies": { "xmlchars": "^2.2.0" } }, "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA=="],
+
     "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
 
     "semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
@@ -949,6 +1027,8 @@
 
     "strip-final-newline": ["strip-final-newline@4.0.0", "", {}, "sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw=="],
 
+    "strip-indent": ["strip-indent@3.0.0", "", { "dependencies": { "min-indent": "^1.0.0" } }, "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ=="],
+
     "strip-json-comments": ["strip-json-comments@3.1.1", "", {}, "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="],
 
     "sucrase": ["sucrase@3.35.1", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.2", "commander": "^4.0.0", "lines-and-columns": "^1.1.6", "mz": "^2.7.0", "pirates": "^4.0.1", "tinyglobby": "^0.2.11", "ts-interface-checker": "^0.1.9" }, "bin": { "sucrase": "bin/sucrase", "sucrase-node": "bin/sucrase-node" } }, "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw=="],
@@ -957,6 +1037,8 @@
 
     "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
 
+    "symbol-tree": ["symbol-tree@3.2.4", "", {}, "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="],
+
     "synckit": ["synckit@0.11.12", "", { "dependencies": { "@pkgr/core": "^0.2.9" } }, "sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ=="],
 
     "tailwind-merge": ["tailwind-merge@3.5.0", "", {}, "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A=="],
@@ -975,8 +1057,16 @@
 
     "tinyrainbow": ["tinyrainbow@3.1.0", "", {}, "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw=="],
 
+    "tldts": ["tldts@7.0.27", "", { "dependencies": { "tldts-core": "^7.0.27" }, "bin": { "tldts": "bin/cli.js" } }, "sha512-I4FZcVFcqCRuT0ph6dCDpPuO4Xgzvh+spkcTr1gK7peIvxWauoloVO0vuy1FQnijT63ss6AsHB6+OIM4aXHbPg=="],
+
+    "tldts-core": ["tldts-core@7.0.27", "", {}, "sha512-YQ7uPjgWUibIK6DW5lrKujGwUKhLevU4hcGbP5O6TcIUb+oTjJYJVWPS4nZsIHrEEEG6myk/oqAJUEQmpZrHsg=="],
+
     "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
 
+    "tough-cookie": ["tough-cookie@6.0.1", "", { "dependencies": { "tldts": "^7.0.5" } }, "sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw=="],
+
+    "tr46": ["tr46@6.0.0", "", { "dependencies": { "punycode": "^2.3.1" } }, "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw=="],
+
     "ts-api-utils": ["ts-api-utils@2.4.0", "", { "peerDependencies": { "typescript": ">=4.8.4" } }, "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA=="],
 
     "ts-interface-checker": ["ts-interface-checker@0.1.13", "", {}, "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="],
@@ -1005,6 +1095,8 @@
 
     "unbox-primitive": ["unbox-primitive@1.1.0", "", { "dependencies": { "call-bound": "^1.0.3", "has-bigints": "^1.0.2", "has-symbols": "^1.1.0", "which-boxed-primitive": "^1.1.1" } }, "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw=="],
 
+    "undici": ["undici@7.24.5", "", {}, "sha512-3IWdCpjgxp15CbJnsi/Y9TCDE7HWVN19j1hmzVhoAkY/+CJx449tVxT5wZc1Gwg8J+P0LWvzlBzxYRnHJ+1i7Q=="],
+
     "undici-types": ["undici-types@7.18.2", "", {}, "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="],
 
     "unicorn-magic": ["unicorn-magic@0.3.0", "", {}, "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA=="],
@@ -1021,6 +1113,14 @@
 
     "vitest": ["vitest@4.1.0", "", { "dependencies": { "@vitest/expect": "4.1.0", "@vitest/mocker": "4.1.0", "@vitest/pretty-format": "4.1.0", "@vitest/runner": "4.1.0", "@vitest/snapshot": "4.1.0", "@vitest/spy": "4.1.0", "@vitest/utils": "4.1.0", "es-module-lexer": "^2.0.0", "expect-type": "^1.3.0", "magic-string": "^0.30.21", "obug": "^2.1.1", "pathe": "^2.0.3", "picomatch": "^4.0.3", "std-env": "^4.0.0-rc.1", "tinybench": "^2.9.0", "tinyexec": "^1.0.2", "tinyglobby": "^0.2.15", "tinyrainbow": "^3.0.3", "vite": "^6.0.0 || ^7.0.0 || ^8.0.0-0", "why-is-node-running": "^2.3.0" }, "peerDependencies": { "@edge-runtime/vm": "*", "@opentelemetry/api": "^1.9.0", "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0", "@vitest/browser-playwright": "4.1.0", "@vitest/browser-preview": "4.1.0", "@vitest/browser-webdriverio": "4.1.0", "@vitest/ui": "4.1.0", "happy-dom": "*", "jsdom": "*" }, "optionalPeers": ["@edge-runtime/vm", "@opentelemetry/api", "@types/node", "@vitest/browser-playwright", "@vitest/browser-preview", "@vitest/browser-webdriverio", "@vitest/ui", "happy-dom", "jsdom"], "bin": { "vitest": "vitest.mjs" } }, "sha512-YbDrMF9jM2Lqc++2530UourxZHmkKLxrs4+mYhEwqWS97WJ7wOYEkcr+QfRgJ3PW9wz3odRijLZjHEaRLTNbqw=="],
 
+    "w3c-xmlserializer": ["w3c-xmlserializer@5.0.0", "", { "dependencies": { "xml-name-validator": "^5.0.0" } }, "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA=="],
+
+    "webidl-conversions": ["webidl-conversions@8.0.1", "", {}, "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ=="],
+
+    "whatwg-mimetype": ["whatwg-mimetype@5.0.0", "", {}, "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw=="],
+
+    "whatwg-url": ["whatwg-url@16.0.1", "", { "dependencies": { "@exodus/bytes": "^1.11.0", "tr46": "^6.0.0", "webidl-conversions": "^8.0.1" } }, "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw=="],
+
     "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
 
     "which-boxed-primitive": ["which-boxed-primitive@1.1.1", "", { "dependencies": { "is-bigint": "^1.1.0", "is-boolean-object": "^1.2.1", "is-number-object": "^1.1.1", "is-string": "^1.1.1", "is-symbol": "^1.1.1" } }, "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA=="],
@@ -1035,6 +1135,10 @@
 
     "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
 
+    "xml-name-validator": ["xml-name-validator@5.0.0", "", {}, "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg=="],
+
+    "xmlchars": ["xmlchars@2.2.0", "", {}, "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="],
+
     "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
 
     "yaml": ["yaml@2.8.2", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A=="],
@@ -1045,6 +1149,8 @@
 
     "zod": ["zod@4.3.6", "", {}, "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg=="],
 
+    "@babel/helper-compilation-targets/lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
+
     "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
 
     "@eslint/eslintrc/ajv": ["ajv@6.14.0", "", { "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" } }, "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw=="],
@@ -1057,6 +1163,10 @@
 
     "@scalar/openapi-upgrader/@scalar/openapi-types": ["@scalar/openapi-types@0.5.4", "", { "dependencies": { "zod": "^4.3.5" } }, "sha512-2pEbhprh8lLGDfUI6mNm9EV104pjb3+aJsXrFaqfgOSre7r6NlgM5HcSbsLjzDAnTikjJhJ3IMal1Rz8WVwiOw=="],
 
+    "@testing-library/dom/aria-query": ["aria-query@5.3.0", "", { "dependencies": { "dequal": "^2.0.3" } }, "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A=="],
+
+    "@testing-library/dom/dom-accessibility-api": ["dom-accessibility-api@0.5.16", "", {}, "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="],
+
     "@typescript-eslint/typescript-estree/minimatch": ["minimatch@10.2.4", "", { "dependencies": { "brace-expansion": "^5.0.2" } }, "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg=="],
 
     "@typescript-eslint/typescript-estree/semver": ["semver@7.7.4", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
@@ -1075,6 +1185,8 @@
 
     "globby/unicorn-magic": ["unicorn-magic@0.4.0", "", {}, "sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw=="],
 
+    "markdown-it/entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
+
     "micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
 
     "npm-run-path/path-key": ["path-key@4.0.0", "", {}, "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ=="],
@@ -1085,6 +1197,10 @@
 
     "postcss-import/resolve": ["resolve@1.22.11", "", { "dependencies": { "is-core-module": "^2.16.1", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ=="],
 
+    "pretty-format/ansi-styles": ["ansi-styles@5.2.0", "", {}, "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="],
+
+    "pretty-format/react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
+
     "readdirp/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
 
     "sucrase/commander": ["commander@4.1.1", "", {}, "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="],

frontend/package.json

@@ -28,6 +28,9 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.8",
     "@typescript-eslint/eslint-plugin": "^8.13.0",
@@ -40,6 +43,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-tailwindcss": "^3.18.2",
+    "jsdom": "^29.0.1",
     "postcss": "^8.4.49",
     "prettier": "^3.3.3",
     "tailwindcss": "^3.4.17",

frontend/src/auth/AuthContext.tsx

@@ -8,12 +8,13 @@ import {
   useGetMe,
   useRegister,
 } from '../generated/anthoLumeAPIV1';
-
+import {
-interface AuthState {
+  type AuthState,
-  isAuthenticated: boolean;
+  getAuthenticatedAuthState,
-  user: { username: string; is_admin: boolean } | null;
+  getUnauthenticatedAuthState,
-  isCheckingAuth: boolean;
+  resolveAuthStateFromMe,
-}
+  validateAuthMutationResponse,
+} from './authHelpers';
 
 interface AuthContextType extends AuthState {
   login: (_username: string, _password: string) => Promise<void>;
@@ -23,12 +24,14 @@ interface AuthContextType extends AuthState {
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
+const initialAuthState: AuthState = {
+  isAuthenticated: false,
+  user: null,
+  isCheckingAuth: true,
+};
+
 export function AuthProvider({ children }: { children: ReactNode }) {
-  const [authState, setAuthState] = useState<AuthState>({
+  const [authState, setAuthState] = useState<AuthState>(initialAuthState);
-    isAuthenticated: false,
-    user: null,
-    isCheckingAuth: true,
-  });
 
   const loginMutation = useLogin();
   const registerMutation = useRegister();
@@ -40,26 +43,14 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const navigate = useNavigate();
 
   useEffect(() => {
-    setAuthState(prev => {
+    setAuthState(prev =>
-      if (meLoading) {
+      resolveAuthStateFromMe({
-        return { ...prev, isCheckingAuth: true };
+        meData,
-      } else if (meData?.data && meData.status === 200) {
+        meError,
-        const userData = 'username' in meData.data ? meData.data : null;
+        meLoading,
-        return {
+        previousState: prev,
-          isAuthenticated: true,
+      })
-          user: userData as { username: string; is_admin: boolean } | null,
+    );
-          isCheckingAuth: false,
-        };
-      } else if (meError || (meData && meData.status === 401)) {
-        return {
-          isAuthenticated: false,
-          user: null,
-          isCheckingAuth: false,
-        };
-      }
-
-      return { ...prev, isCheckingAuth: false };
-    });
   }, [meData, meError, meLoading]);
 
   const login = useCallback(
@@ -72,29 +63,18 @@ export function AuthProvider({ children }: { children: ReactNode }) {
           },
         });
 
-        if (response.status !== 200 || !('username' in response.data)) {
+        const user = validateAuthMutationResponse(response, 200);
-          setAuthState({
+        if (!user) {
-            isAuthenticated: false,
+          setAuthState(getUnauthenticatedAuthState());
-            user: null,
-            isCheckingAuth: false,
-          });
           throw new Error('Login failed');
         }
 
-        setAuthState({
+        setAuthState(getAuthenticatedAuthState(user));
-          isAuthenticated: true,
-          user: response.data as { username: string; is_admin: boolean },
-          isCheckingAuth: false,
-        });
 
         await queryClient.invalidateQueries({ queryKey: getGetMeQueryKey() });
         navigate('/');
       } catch (_error) {
-        setAuthState({
+        setAuthState(getUnauthenticatedAuthState());
-          isAuthenticated: false,
-          user: null,
-          isCheckingAuth: false,
-        });
         throw new Error('Login failed');
       }
     },
@@ -111,29 +91,18 @@ export function AuthProvider({ children }: { children: ReactNode }) {
           },
         });
 
-        if (response.status !== 201 || !('username' in response.data)) {
+        const user = validateAuthMutationResponse(response, 201);
-          setAuthState({
+        if (!user) {
-            isAuthenticated: false,
+          setAuthState(getUnauthenticatedAuthState());
-            user: null,
-            isCheckingAuth: false,
-          });
           throw new Error('Registration failed');
         }
 
-        setAuthState({
+        setAuthState(getAuthenticatedAuthState(user));
-          isAuthenticated: true,
-          user: response.data as { username: string; is_admin: boolean },
-          isCheckingAuth: false,
-        });
 
         await queryClient.invalidateQueries({ queryKey: getGetMeQueryKey() });
         navigate('/');
       } catch (_error) {
-        setAuthState({
+        setAuthState(getUnauthenticatedAuthState());
-          isAuthenticated: false,
-          user: null,
-          isCheckingAuth: false,
-        });
         throw new Error('Registration failed');
       }
     },
@@ -143,11 +112,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const logout = useCallback(() => {
     logoutMutation.mutate(undefined, {
       onSuccess: async () => {
-        setAuthState({
+        setAuthState(getUnauthenticatedAuthState());
-          isAuthenticated: false,
-          user: null,
-          isCheckingAuth: false,
-        });
         await queryClient.removeQueries({ queryKey: getGetMeQueryKey() });
         navigate('/login');
       },

frontend/src/auth/ProtectedRoute.test.tsx

@@ -0,0 +1,90 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { ProtectedRoute } from './ProtectedRoute';
+import { useAuth } from './AuthContext';
+
+vi.mock('./AuthContext', () => ({
+  useAuth: vi.fn(),
+}));
+
+const mockedUseAuth = vi.mocked(useAuth);
+
+describe('ProtectedRoute', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('shows a loading state while auth is being checked', () => {
+    mockedUseAuth.mockReturnValue({
+      isAuthenticated: false,
+      isCheckingAuth: true,
+      user: null,
+      login: vi.fn(),
+      register: vi.fn(),
+      logout: vi.fn(),
+    });
+
+    render(
+      <MemoryRouter initialEntries={['/private']}>
+        <ProtectedRoute>
+          <div>Secret</div>
+        </ProtectedRoute>
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+    expect(screen.queryByText('Secret')).not.toBeInTheDocument();
+  });
+
+  it('redirects unauthenticated users to the login page', () => {
+    mockedUseAuth.mockReturnValue({
+      isAuthenticated: false,
+      isCheckingAuth: false,
+      user: null,
+      login: vi.fn(),
+      register: vi.fn(),
+      logout: vi.fn(),
+    });
+
+    render(
+      <MemoryRouter initialEntries={['/private']}>
+        <Routes>
+          <Route
+            path="/private"
+            element={
+              <ProtectedRoute>
+                <div>Secret</div>
+              </ProtectedRoute>
+            }
+          />
+          <Route path="/login" element={<div>Login Page</div>} />
+        </Routes>
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText('Login Page')).toBeInTheDocument();
+    expect(screen.queryByText('Secret')).not.toBeInTheDocument();
+  });
+
+  it('renders children for authenticated users', () => {
+    mockedUseAuth.mockReturnValue({
+      isAuthenticated: true,
+      isCheckingAuth: false,
+      user: { username: 'evan', is_admin: false },
+      login: vi.fn(),
+      register: vi.fn(),
+      logout: vi.fn(),
+    });
+
+    render(
+      <MemoryRouter>
+        <ProtectedRoute>
+          <div>Secret</div>
+        </ProtectedRoute>
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText('Secret')).toBeInTheDocument();
+  });
+});

frontend/src/auth/authHelpers.test.ts

@@ -0,0 +1,157 @@
+import { describe, expect, it } from 'vitest';
+import {
+  getCheckingAuthState,
+  getUnauthenticatedAuthState,
+  normalizeAuthenticatedUser,
+  resolveAuthStateFromMe,
+  validateAuthMutationResponse,
+  type AuthState,
+} from './authHelpers';
+
+const previousState: AuthState = {
+  isAuthenticated: false,
+  user: null,
+  isCheckingAuth: true,
+};
+
+describe('authHelpers', () => {
+  it('normalizes a valid authenticated user payload', () => {
+    expect(normalizeAuthenticatedUser({ username: 'evan', is_admin: true })).toEqual({
+      username: 'evan',
+      is_admin: true,
+    });
+  });
+
+  it('rejects invalid authenticated user payloads', () => {
+    expect(normalizeAuthenticatedUser(null)).toBeNull();
+    expect(normalizeAuthenticatedUser({ username: 'evan' })).toBeNull();
+    expect(normalizeAuthenticatedUser({ username: 123, is_admin: true })).toBeNull();
+    expect(normalizeAuthenticatedUser({ username: 'evan', is_admin: 'yes' })).toBeNull();
+  });
+
+  it('returns a checking state while preserving previous auth information', () => {
+    expect(
+      getCheckingAuthState({
+        isAuthenticated: true,
+        user: { username: 'evan', is_admin: false },
+        isCheckingAuth: false,
+      })
+    ).toEqual({
+      isAuthenticated: true,
+      user: { username: 'evan', is_admin: false },
+      isCheckingAuth: true,
+    });
+  });
+
+  it('resolves auth state from a successful /auth/me response', () => {
+    expect(
+      resolveAuthStateFromMe({
+        meData: {
+          status: 200,
+          data: { username: 'evan', is_admin: false },
+        },
+        meError: undefined,
+        meLoading: false,
+        previousState,
+      })
+    ).toEqual({
+      isAuthenticated: true,
+      user: { username: 'evan', is_admin: false },
+      isCheckingAuth: false,
+    });
+  });
+
+  it('resolves auth state to unauthenticated on 401 or query error', () => {
+    expect(
+      resolveAuthStateFromMe({
+        meData: {
+          status: 401,
+        },
+        meError: undefined,
+        meLoading: false,
+        previousState,
+      })
+    ).toEqual(getUnauthenticatedAuthState());
+
+    expect(
+      resolveAuthStateFromMe({
+        meData: undefined,
+        meError: new Error('failed'),
+        meLoading: false,
+        previousState,
+      })
+    ).toEqual(getUnauthenticatedAuthState());
+  });
+
+  it('keeps checking state while /auth/me is still loading', () => {
+    expect(
+      resolveAuthStateFromMe({
+        meData: undefined,
+        meError: undefined,
+        meLoading: true,
+        previousState: {
+          isAuthenticated: true,
+          user: { username: 'evan', is_admin: true },
+          isCheckingAuth: false,
+        },
+      })
+    ).toEqual({
+      isAuthenticated: true,
+      user: { username: 'evan', is_admin: true },
+      isCheckingAuth: true,
+    });
+  });
+
+  it('returns the previous state with checking disabled when there is no decisive me result', () => {
+    expect(
+      resolveAuthStateFromMe({
+        meData: {
+          status: 204,
+        },
+        meError: undefined,
+        meLoading: false,
+        previousState: {
+          isAuthenticated: false,
+          user: null,
+          isCheckingAuth: true,
+        },
+      })
+    ).toEqual({
+      isAuthenticated: false,
+      user: null,
+      isCheckingAuth: false,
+    });
+  });
+
+  it('validates auth mutation responses by expected status and payload shape', () => {
+    expect(
+      validateAuthMutationResponse(
+        {
+          status: 200,
+          data: { username: 'evan', is_admin: false },
+        },
+        200
+      )
+    ).toEqual({ username: 'evan', is_admin: false });
+
+    expect(
+      validateAuthMutationResponse(
+        {
+          status: 201,
+          data: { username: 'evan', is_admin: false },
+        },
+        200
+      )
+    ).toBeNull();
+
+    expect(
+      validateAuthMutationResponse(
+        {
+          status: 200,
+          data: { username: 'evan' },
+        },
+        200
+      )
+    ).toBeNull();
+  });
+});

frontend/src/auth/authHelpers.ts

@@ -0,0 +1,98 @@
+export interface AuthUser {
+  username: string;
+  is_admin: boolean;
+}
+
+export interface AuthState {
+  isAuthenticated: boolean;
+  user: AuthUser | null;
+  isCheckingAuth: boolean;
+}
+
+interface ResponseLike {
+  status?: number;
+  data?: unknown;
+}
+
+export function getUnauthenticatedAuthState(): AuthState {
+  return {
+    isAuthenticated: false,
+    user: null,
+    isCheckingAuth: false,
+  };
+}
+
+export function getCheckingAuthState(previousState?: AuthState): AuthState {
+  return {
+    isAuthenticated: previousState?.isAuthenticated ?? false,
+    user: previousState?.user ?? null,
+    isCheckingAuth: true,
+  };
+}
+
+export function getAuthenticatedAuthState(user: AuthUser): AuthState {
+  return {
+    isAuthenticated: true,
+    user,
+    isCheckingAuth: false,
+  };
+}
+
+export function normalizeAuthenticatedUser(value: unknown): AuthUser | null {
+  if (!value || typeof value !== 'object') {
+    return null;
+  }
+
+  if (!('username' in value) || typeof value.username !== 'string') {
+    return null;
+  }
+
+  if (!('is_admin' in value) || typeof value.is_admin !== 'boolean') {
+    return null;
+  }
+
+  return {
+    username: value.username,
+    is_admin: value.is_admin,
+  };
+}
+
+export function resolveAuthStateFromMe(params: {
+  meData?: ResponseLike;
+  meError?: unknown;
+  meLoading: boolean;
+  previousState: AuthState;
+}): AuthState {
+  const { meData, meError, meLoading, previousState } = params;
+
+  if (meLoading) {
+    return getCheckingAuthState(previousState);
+  }
+
+  if (meData?.status === 200) {
+    const user = normalizeAuthenticatedUser(meData.data);
+    if (user) {
+      return getAuthenticatedAuthState(user);
+    }
+  }
+
+  if (meError || meData?.status === 401) {
+    return getUnauthenticatedAuthState();
+  }
+
+  return {
+    ...previousState,
+    isCheckingAuth: false,
+  };
+}
+
+export function validateAuthMutationResponse(
+  response: ResponseLike,
+  expectedStatus: number
+): AuthUser | null {
+  if (response.status !== expectedStatus) {
+    return null;
+  }
+
+  return normalizeAuthenticatedUser(response.data);
+}

frontend/src/auth/authInterceptor.test.ts

@@ -0,0 +1,115 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { setupAuthInterceptors, TOKEN_KEY } from './authInterceptor';
+
+type RequestConfig = {
+  headers?: Record<string, string>;
+};
+
+type ResponseValue = {
+  status?: number;
+  data?: unknown;
+};
+
+type ResponseError = {
+  response?: {
+    status?: number;
+  };
+};
+
+function createMockAxiosInstance() {
+  let nextRequestId = 1;
+  let nextResponseId = 1;
+
+  const requestHandlers = new Map<
+    number,
+    [(config: RequestConfig) => RequestConfig, (error: unknown) => Promise<never>]
+  >();
+  const responseHandlers = new Map<
+    number,
+    [(response: ResponseValue) => ResponseValue, (error: ResponseError) => Promise<never>]
+  >();
+
+  return {
+    interceptors: {
+      request: {
+        use: vi.fn((fulfilled, rejected) => {
+          const id = nextRequestId++;
+          requestHandlers.set(id, [fulfilled, rejected]);
+          return id;
+        }),
+        eject: vi.fn((id: number) => {
+          requestHandlers.delete(id);
+        }),
+      },
+      response: {
+        use: vi.fn((fulfilled, rejected) => {
+          const id = nextResponseId++;
+          responseHandlers.set(id, [fulfilled, rejected]);
+          return id;
+        }),
+        eject: vi.fn((id: number) => {
+          responseHandlers.delete(id);
+        }),
+      },
+    },
+    getRequestHandler(id = 1) {
+      return requestHandlers.get(id);
+    },
+    getResponseHandler(id = 1) {
+      return responseHandlers.get(id);
+    },
+  };
+}
+
+describe('setupAuthInterceptors', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('registers request and response interceptors and adds the auth header when a token exists', () => {
+    const axiosInstance = createMockAxiosInstance();
+
+    setupAuthInterceptors(axiosInstance as never);
+
+    expect(axiosInstance.interceptors.request.use).toHaveBeenCalledTimes(1);
+    expect(axiosInstance.interceptors.response.use).toHaveBeenCalledTimes(1);
+
+    localStorage.setItem(TOKEN_KEY, 'token-123');
+
+    const requestHandler = axiosInstance.getRequestHandler()?.[0];
+    const config: { headers: Record<string, string> } = { headers: {} };
+    const nextConfig = requestHandler?.(config);
+
+    expect(nextConfig).toBe(config);
+    expect(config.headers.Authorization).toBe('Bearer token-123');
+  });
+
+  it('clears the auth token on 401 responses', async () => {
+    const axiosInstance = createMockAxiosInstance();
+    setupAuthInterceptors(axiosInstance as never);
+
+    localStorage.setItem(TOKEN_KEY, 'token-123');
+
+    const responseErrorHandler = axiosInstance.getResponseHandler()?.[1];
+
+    await expect(responseErrorHandler?.({ response: { status: 401 } })).rejects.toEqual({
+      response: { status: 401 },
+    });
+    expect(localStorage.getItem(TOKEN_KEY)).toBeNull();
+  });
+
+  it('ejects previous interceptors before installing a new set', () => {
+    const firstInstance = createMockAxiosInstance();
+    const secondInstance = createMockAxiosInstance();
+
+    const cleanup = setupAuthInterceptors(firstInstance as never);
+    setupAuthInterceptors(secondInstance as never);
+
+    expect(firstInstance.interceptors.request.eject).toHaveBeenCalledWith(1);
+    expect(firstInstance.interceptors.response.eject).toHaveBeenCalledWith(1);
+
+    cleanup();
+    expect(firstInstance.interceptors.request.eject).toHaveBeenCalledWith(1);
+    expect(firstInstance.interceptors.response.eject).toHaveBeenCalledWith(1);
+  });
+});

frontend/src/auth/authInterceptor.ts

@@ -1,35 +1,46 @@
-import axios from 'axios';
+import axios, { type AxiosInstance } from 'axios';
 
 const TOKEN_KEY = 'antholume_token';
 
-// Request interceptor to add auth token to requests
+let interceptorCleanup: (() => void) | null = null;
-axios.interceptors.request.use(
-  config => {
-    const token = localStorage.getItem(TOKEN_KEY);
-    if (token && config.headers) {
-      config.headers.Authorization = `Bearer ${token}`;
-    }
-    return config;
-  },
-  error => {
-    return Promise.reject(error);
-  }
-);
 
-// Response interceptor to handle auth errors
+export function setupAuthInterceptors(axiosInstance: AxiosInstance = axios) {
-axios.interceptors.response.use(
+  if (interceptorCleanup) {
-  response => {
+    interceptorCleanup();
-    return response;
-  },
-  error => {
-    if (error.response?.status === 401) {
-      // Clear token on auth failure
-      localStorage.removeItem(TOKEN_KEY);
-      // Optionally redirect to login
-      // window.location.href = '/login';
-    }
-    return Promise.reject(error);
   }
-);
 
+  const requestInterceptorId = axiosInstance.interceptors.request.use(
+    config => {
+      const token = localStorage.getItem(TOKEN_KEY);
+      if (token && config.headers) {
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+      return config;
+    },
+    error => {
+      return Promise.reject(error);
+    }
+  );
+
+  const responseInterceptorId = axiosInstance.interceptors.response.use(
+    response => {
+      return response;
+    },
+    error => {
+      if (error.response?.status === 401) {
+        localStorage.removeItem(TOKEN_KEY);
+      }
+      return Promise.reject(error);
+    }
+  );
+
+  interceptorCleanup = () => {
+    axiosInstance.interceptors.request.eject(requestInterceptorId);
+    axiosInstance.interceptors.response.eject(responseInterceptorId);
+  };
+
+  return interceptorCleanup;
+}
+
+export { TOKEN_KEY };
 export default axios;

frontend/src/components/LoadingState.tsx

@@ -0,0 +1,26 @@
+import { LoadingIcon } from '../icons';
+import { cn } from '../utils/cn';
+
+interface LoadingStateProps {
+  message?: string;
+  className?: string;
+  iconSize?: number;
+}
+
+export function LoadingState({
+  message = 'Loading...',
+  className = '',
+  iconSize = 24,
+}: LoadingStateProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center gap-3 text-gray-500 dark:text-gray-400',
+        className,
+      )}
+    >
+      <LoadingIcon size={iconSize} className="text-purple-600 dark:text-purple-400" />
+      <span className="text-sm font-medium">{message}</span>
+    </div>
+  );
+}

frontend/src/components/ReadingHistoryGraph.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import { getSVGGraphData } from './ReadingHistoryGraph';
 
-// Test data matching Go test exactly
+// Intentionally exact fixture data for algorithm parity coverage
 const testInput = [
   { date: '2024-01-01', minutes_read: 10 },
   { date: '2024-01-02', minutes_read: 90 },
@@ -23,7 +23,7 @@ describe('ReadingHistoryGraph', () => {
     it('should match exactly', () => {
       const result = getSVGGraphData(testInput, svgWidth, svgHeight);
 
-      // Expected values from Go test
+      // Expected exact algorithm output
       const expectedBezierPath =
         'M 50,95 C63,95 80,50 100,50 C120,50 128,73 150,73 C172,73 180,98 200,98 C220,98 230,95 250,95 C270,95 279,98 300,98 C321,98 330,62 350,62 C370,62 380,67 400,67 C420,67 430,73 450,73 C470,73 489,50 500,50';
       const expectedBezierFill = 'L 500,98 L 50,98 Z';
@@ -37,13 +37,13 @@ describe('ReadingHistoryGraph', () => {
       expect(svgHeight).toBe(expectedHeight);
       expect(result.Offset).toBe(expectedOffset);
 
-      // Verify line points are integers like Go
+      // Verify line points are integer pixel values
       result.LinePoints.forEach((p, _i) => {
         expect(Number.isInteger(p.x)).toBe(true);
         expect(Number.isInteger(p.y)).toBe(true);
       });
 
-      // Expected line points from Go calculation:
+      // Expected line points from the current algorithm:
       // idx 0: itemSize=5, itemY=95, lineX=50
       // idx 1: itemSize=45, itemY=55, lineX=100
       // idx 2: itemSize=25, itemY=75, lineX=150

frontend/src/components/Table.test.tsx

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Table, type Column } from './Table';
+
+interface TestRow {
+  id: string;
+  name: string;
+  role: string;
+}
+
+const columns: Column<TestRow>[] = [
+  {
+    key: 'name',
+    header: 'Name',
+  },
+  {
+    key: 'role',
+    header: 'Role',
+  },
+];
+
+const data: TestRow[] = [
+  { id: 'user-1', name: 'Ada', role: 'Admin' },
+  { id: 'user-2', name: 'Grace', role: 'Reader' },
+];
+
+describe('Table', () => {
+  it('renders a skeleton table while loading', () => {
+    const { container } = render(<Table columns={columns} data={[]} loading />);
+
+    expect(screen.queryByText('No Results')).not.toBeInTheDocument();
+    expect(container.querySelectorAll('tbody tr')).toHaveLength(5);
+  });
+
+  it('renders the empty state message when there is no data', () => {
+    render(<Table columns={columns} data={[]} emptyMessage="Nothing here" />);
+
+    expect(screen.getByText('Nothing here')).toBeInTheDocument();
+  });
+
+  it('uses a custom render function for column output', () => {
+    const customColumns: Column<TestRow>[] = [
+      {
+        key: 'name',
+        header: 'Name',
+        render: (_value, row, index) => `${index + 1}. ${row.name.toUpperCase()}`,
+      },
+    ];
+
+    render(<Table columns={customColumns} data={data} />);
+
+    expect(screen.getByText('1. ADA')).toBeInTheDocument();
+    expect(screen.getByText('2. GRACE')).toBeInTheDocument();
+  });
+
+});

frontend/src/components/index.ts

@@ -17,6 +17,7 @@ export {
   PageLoader,
   InlineLoader,
 } from './Skeleton';
+export { LoadingState } from './LoadingState';
 
 // Field components
 export { Field, FieldLabel, FieldValue, FieldActions } from './Field';

frontend/src/generated/model/getLogsParams.ts

@@ -8,4 +8,12 @@
 
 export type GetLogsParams = {
 filter?: string;
+/**
+ * @minimum 1
+ */
+page?: number;
+/**
+ * @minimum 1
+ */
+limit?: number;
 };

frontend/src/generated/model/logsResponse.ts

@@ -10,4 +10,9 @@ import type { LogEntry } from './logEntry';
 export interface LogsResponse {
   logs?: LogEntry[];
   filter?: string;
+  page?: number;
+  limit?: number;
+  next_page?: number;
+  previous_page?: number;
+  total?: number;
 }

frontend/src/hooks/useDebounce.test.tsx

@@ -0,0 +1,69 @@
+import { describe, expect, it, vi, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useDebounce } from './useDebounce';
+
+describe('useDebounce', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('returns the initial value immediately', () => {
+    const { result } = renderHook(({ value, delay }) => useDebounce(value, delay), {
+      initialProps: { value: 'initial', delay: 300 },
+    });
+
+    expect(result.current).toBe('initial');
+  });
+
+  it('delays updates until the debounce interval has passed', () => {
+    vi.useFakeTimers();
+
+    const { result, rerender } = renderHook(({ value, delay }) => useDebounce(value, delay), {
+      initialProps: { value: 'initial', delay: 300 },
+    });
+
+    rerender({ value: 'updated', delay: 300 });
+
+    expect(result.current).toBe('initial');
+
+    act(() => {
+      vi.advanceTimersByTime(299);
+    });
+
+    expect(result.current).toBe('initial');
+
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+
+    expect(result.current).toBe('updated');
+  });
+
+  it('cancels the previous timer when the value changes again', () => {
+    vi.useFakeTimers();
+
+    const { result, rerender } = renderHook(({ value, delay }) => useDebounce(value, delay), {
+      initialProps: { value: 'first', delay: 300 },
+    });
+
+    rerender({ value: 'second', delay: 300 });
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    rerender({ value: 'third', delay: 300 });
+
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    expect(result.current).toBe('first');
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(result.current).toBe('third');
+  });
+});

frontend/src/main.tsx

@@ -2,15 +2,18 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import axios from 'axios';
 import { ToastProvider } from './components/ToastContext';
-import './auth/authInterceptor';
+import { setupAuthInterceptors } from './auth/authInterceptor';
 import App from './App';
 import './index.css';
 
+setupAuthInterceptors(axios);
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: 1000 * 60 * 5, // 5 minutes
+      staleTime: 1000 * 60 * 5,
       retry: 1,
     },
     mutations: {

frontend/src/pages/AdminLogsPage.tsx

@@ -1,25 +1,29 @@
-import { useState, FormEvent } from 'react';
+import { useState, useEffect, FormEvent } from 'react';
 import { useGetLogs } from '../generated/anthoLumeAPIV1';
 import type { LogsResponse } from '../generated/model';
 import { Button } from '../components/Button';
-import { SearchIcon } from '../icons';
+import { LoadingState } from '../components';
+import { useDebounce } from '../hooks/useDebounce';
+import { Search2Icon } from '../icons';
 
 export default function AdminLogsPage() {
   const [filter, setFilter] = useState('');
+  const [activeFilter, setActiveFilter] = useState('');
+  const debouncedFilter = useDebounce(filter, 300);
 
-  const { data: logsData, isLoading, refetch } = useGetLogs(filter ? { filter } : {});
+  useEffect(() => {
+    setActiveFilter(debouncedFilter);
+  }, [debouncedFilter]);
+
+  const { data: logsData, isLoading } = useGetLogs(activeFilter ? { filter: activeFilter } : {});
 
   const logs = logsData?.status === 200 ? ((logsData.data as LogsResponse).logs ?? []) : [];
 
   const handleFilterSubmit = (e: FormEvent) => {
     e.preventDefault();
-    refetch();
+    setActiveFilter(filter);
   };
 
-  if (isLoading) {
-    return <div className="text-gray-500 dark:text-white">Loading...</div>;
-  }
-
   return (
     <div>
       <div className="mb-4 flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
@@ -27,7 +31,7 @@ export default function AdminLogsPage() {
           <div className="flex w-full grow flex-col">
             <div className="relative flex">
               <span className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm">
-                <SearchIcon size={15} />
+                <Search2Icon size={15} />
               </span>
               <input
                 type="text"
@@ -50,11 +54,15 @@ export default function AdminLogsPage() {
         className="flex w-full flex-col-reverse overflow-scroll text-black dark:text-white"
         style={{ fontFamily: 'monospace' }}
       >
-        {logs.map((log, index) => (
+        {isLoading ? (
-          <span key={index} className="whitespace-nowrap hover:whitespace-pre">
+          <LoadingState className="min-h-40 w-full" />
-            {typeof log === 'string' ? log : JSON.stringify(log)}
+        ) : (
-          </span>
+          logs.map((log, index) => (
-        ))}
+            <span key={index} className="whitespace-nowrap hover:whitespace-pre">
+              {typeof log === 'string' ? log : JSON.stringify(log)}
+            </span>
+          ))
+        )}
       </div>
     </div>
   );

frontend/src/pages/DocumentsPage.tsx

@@ -2,8 +2,9 @@ import { useState, FormEvent, useRef, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { useGetDocuments, useCreateDocument } from '../generated/anthoLumeAPIV1';
 import type { Document, DocumentsResponse } from '../generated/model';
-import { ActivityIcon, DownloadIcon, SearchIcon, UploadIcon } from '../icons';
+import { ActivityIcon, DownloadIcon, Search2Icon, UploadIcon } from '../icons';
 import { Button } from '../components/Button';
+import { LoadingState } from '../components';
 import { useToasts } from '../components/ToastContext';
 import { formatDuration } from '../utils/formatters';
 import { useDebounce } from '../hooks/useDebounce';
@@ -136,7 +137,7 @@ export default function DocumentsPage() {
           <div className="flex w-full grow flex-col">
             <div className="relative flex">
               <span className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm">
-                <SearchIcon size={15} />
+                <Search2Icon size={15} />
               </span>
               <input
                 type="text"
@@ -159,7 +160,7 @@ export default function DocumentsPage() {
       {/* Document Grid */}
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
         {isLoading ? (
-          <div className="col-span-full text-center text-gray-500 dark:text-white">Loading...</div>
+          <LoadingState className="col-span-full min-h-48" />
         ) : (
           docs?.map(doc => <DocumentCard key={doc.id} doc={doc} />)
         )}

frontend/src/pages/LoginPage.test.tsx

@@ -0,0 +1,190 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import LoginPage from './LoginPage';
+import { useAuth } from '../auth/AuthContext';
+import { useToasts } from '../components/ToastContext';
+import { useGetInfo } from '../generated/anthoLumeAPIV1';
+
+const navigateMock = vi.fn();
+
+vi.mock('react-router-dom', async importOriginal => {
+  const actual = await importOriginal<typeof import('react-router-dom')>();
+  return {
+    ...actual,
+    useNavigate: () => navigateMock,
+  };
+});
+
+vi.mock('../auth/AuthContext', () => ({
+  useAuth: vi.fn(),
+}));
+
+vi.mock('../components/ToastContext', () => ({
+  useToasts: vi.fn(),
+}));
+
+vi.mock('../generated/anthoLumeAPIV1', () => ({
+  useGetInfo: vi.fn(),
+}));
+
+const mockedUseAuth = vi.mocked(useAuth);
+const mockedUseToasts = vi.mocked(useToasts);
+const mockedUseGetInfo = vi.mocked(useGetInfo);
+
+describe('LoginPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockedUseAuth.mockReturnValue({
+      isAuthenticated: false,
+      isCheckingAuth: false,
+      user: null,
+      login: vi.fn().mockResolvedValue(undefined),
+      register: vi.fn(),
+      logout: vi.fn(),
+    });
+
+    mockedUseToasts.mockReturnValue({
+      showToast: vi.fn(),
+      showInfo: vi.fn(),
+      showWarning: vi.fn(),
+      showError: vi.fn(),
+      removeToast: vi.fn(),
+      clearToasts: vi.fn(),
+    });
+
+    mockedUseGetInfo.mockReturnValue({
+      data: {
+        status: 200,
+        data: {
+          registration_enabled: false,
+        },
+      },
+    } as ReturnType<typeof useGetInfo>);
+  });
+
+  it('submits the username and password to login', async () => {
+    const user = userEvent.setup();
+    const loginMock = vi.fn().mockResolvedValue(undefined);
+
+    mockedUseAuth.mockReturnValue({
+      isAuthenticated: false,
+      isCheckingAuth: false,
+      user: null,
+      login: loginMock,
+      register: vi.fn(),
+      logout: vi.fn(),
+    });
+
+    render(
+      <MemoryRouter>
+        <LoginPage />
+      </MemoryRouter>
+    );
+
+    await user.type(screen.getByPlaceholderText('Username'), 'evan');
+    await user.type(screen.getByPlaceholderText('Password'), 'secret');
+    await user.click(screen.getByRole('button', { name: 'Login' }));
+
+    await waitFor(() => {
+      expect(loginMock).toHaveBeenCalledWith('evan', 'secret');
+    });
+  });
+
+  it('shows a toast error when login fails', async () => {
+    const user = userEvent.setup();
+    const loginMock = vi.fn().mockRejectedValue(new Error('bad credentials'));
+    const showErrorMock = vi.fn();
+
+    mockedUseAuth.mockReturnValue({
+      isAuthenticated: false,
+      isCheckingAuth: false,
+      user: null,
+      login: loginMock,
+      register: vi.fn(),
+      logout: vi.fn(),
+    });
+
+    mockedUseToasts.mockReturnValue({
+      showToast: vi.fn(),
+      showInfo: vi.fn(),
+      showWarning: vi.fn(),
+      showError: showErrorMock,
+      removeToast: vi.fn(),
+      clearToasts: vi.fn(),
+    });
+
+    render(
+      <MemoryRouter>
+        <LoginPage />
+      </MemoryRouter>
+    );
+
+    await user.type(screen.getByPlaceholderText('Username'), 'evan');
+    await user.type(screen.getByPlaceholderText('Password'), 'wrong');
+    await user.click(screen.getByRole('button', { name: 'Login' }));
+
+    await waitFor(() => {
+      expect(showErrorMock).toHaveBeenCalledWith('Invalid credentials');
+    });
+  });
+
+  it('redirects when the user is already authenticated', async () => {
+    mockedUseAuth.mockReturnValue({
+      isAuthenticated: true,
+      isCheckingAuth: false,
+      user: { username: 'evan', is_admin: false },
+      login: vi.fn(),
+      register: vi.fn(),
+      logout: vi.fn(),
+    });
+
+    render(
+      <MemoryRouter>
+        <LoginPage />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(navigateMock).toHaveBeenCalledWith('/', { replace: true });
+    });
+  });
+
+  it('shows the registration link only when registration is enabled', () => {
+    mockedUseGetInfo.mockReturnValue({
+      data: {
+        status: 200,
+        data: {
+          registration_enabled: true,
+        },
+      },
+    } as ReturnType<typeof useGetInfo>);
+
+    const { rerender } = render(
+      <MemoryRouter>
+        <LoginPage />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByRole('link', { name: 'Register here.' })).toBeInTheDocument();
+
+    mockedUseGetInfo.mockReturnValue({
+      data: {
+        status: 200,
+        data: {
+          registration_enabled: false,
+        },
+      },
+    } as ReturnType<typeof useGetInfo>);
+
+    rerender(
+      <MemoryRouter>
+        <LoginPage />
+      </MemoryRouter>
+    );
+
+    expect(screen.queryByRole('link', { name: 'Register here.' })).not.toBeInTheDocument();
+  });
+});

frontend/src/pages/LoginPage.tsx

@@ -5,57 +5,57 @@ import { Button } from '../components/Button';
 import { useToasts } from '../components/ToastContext';
 import { useGetInfo } from '../generated/anthoLumeAPIV1';
 
-export default function LoginPage() {
+interface LoginPageViewProps {
-  const [username, setUsername] = useState('');
+  username: string;
-  const [password, setPassword] = useState('');
+  password: string;
-  const [isLoading, setIsLoading] = useState(false);
+  isLoading: boolean;
+  registrationEnabled: boolean;
+  onUsernameChange: (value: string) => void;
+  onPasswordChange: (value: string) => void;
+  onSubmit: (e: FormEvent<HTMLFormElement>) => void | Promise<void>;
+}
 
-  const { login, isAuthenticated, isCheckingAuth } = useAuth();
+export function getRegistrationEnabled(infoData: unknown): boolean {
-  const navigate = useNavigate();
+  if (!infoData || typeof infoData !== 'object') {
-  const { showError } = useToasts();
+    return false;
-  const { data: infoData } = useGetInfo({
+  }
-    query: {
-      staleTime: Infinity,
-    },
-  });
 
-  const registrationEnabled =
+  if (!('data' in infoData) || !infoData.data || typeof infoData.data !== 'object') {
-    infoData && 'data' in infoData && infoData.data && 'registration_enabled' in infoData.data
+    return false;
-      ? infoData.data.registration_enabled
+  }
-      : false;
 
-  useEffect(() => {
+  if (
-    if (!isCheckingAuth && isAuthenticated) {
+    !('registration_enabled' in infoData.data) ||
-      navigate('/', { replace: true });
+    typeof infoData.data.registration_enabled !== 'boolean'
-    }
+  ) {
-  }, [isAuthenticated, isCheckingAuth, navigate]);
+    return false;
+  }
 
-  const handleSubmit = async (e: FormEvent) => {
+  return infoData.data.registration_enabled;
-    e.preventDefault();
+}
-    setIsLoading(true);
-
-    try {
-      await login(username, password);
-    } catch (_err) {
-      showError('Invalid credentials');
-    } finally {
-      setIsLoading(false);
-    }
-  };
 
+export function LoginPageView({
+  username,
+  password,
+  isLoading,
+  registrationEnabled,
+  onUsernameChange,
+  onPasswordChange,
+  onSubmit,
+}: LoginPageViewProps) {
   return (
     <div className="min-h-screen bg-gray-100 dark:bg-gray-800 dark:text-white">
       <div className="flex w-full flex-wrap">
         <div className="flex w-full flex-col md:w-1/2">
           <div className="my-auto flex flex-col justify-center px-8 pt-8 md:justify-start md:px-24 md:pt-0 lg:px-32">
             <p className="text-center text-3xl">Welcome.</p>
-            <form className="flex flex-col pt-3 md:pt-8" onSubmit={handleSubmit}>
+            <form className="flex flex-col pt-3 md:pt-8" onSubmit={onSubmit}>
               <div className="flex flex-col pt-4">
                 <div className="relative flex">
                   <input
                     type="text"
                     value={username}
-                    onChange={e => setUsername(e.target.value)}
+                    onChange={e => onUsernameChange(e.target.value)}
                     className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
                     placeholder="Username"
                     required
@@ -68,7 +68,7 @@ export default function LoginPage() {
                   <input
                     type="password"
                     value={password}
-                    onChange={e => setPassword(e.target.value)}
+                    onChange={e => onPasswordChange(e.target.value)}
                     className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
                     placeholder="Password"
                     required
@@ -111,3 +111,51 @@ export default function LoginPage() {
     </div>
   );
 }
+
+export default function LoginPage() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { login, isAuthenticated, isCheckingAuth } = useAuth();
+  const navigate = useNavigate();
+  const { showError } = useToasts();
+  const { data: infoData } = useGetInfo({
+    query: {
+      staleTime: Infinity,
+    },
+  });
+
+  const registrationEnabled = getRegistrationEnabled(infoData);
+
+  useEffect(() => {
+    if (!isCheckingAuth && isAuthenticated) {
+      navigate('/', { replace: true });
+    }
+  }, [isAuthenticated, isCheckingAuth, navigate]);
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      await login(username, password);
+    } catch (_err) {
+      showError('Invalid credentials');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <LoginPageView
+      username={username}
+      password={password}
+      isLoading={isLoading}
+      registrationEnabled={registrationEnabled}
+      onUsernameChange={setUsername}
+      onPasswordChange={setPassword}
+      onSubmit={handleSubmit}
+    />
+  );
+}

frontend/src/pages/RegisterPage.test.tsx

@@ -0,0 +1,199 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import RegisterPage from './RegisterPage';
+import { useAuth } from '../auth/AuthContext';
+import { useToasts } from '../components/ToastContext';
+import { useGetInfo } from '../generated/anthoLumeAPIV1';
+
+const navigateMock = vi.fn();
+
+vi.mock('react-router-dom', async importOriginal => {
+  const actual = await importOriginal<typeof import('react-router-dom')>();
+  return {
+    ...actual,
+    useNavigate: () => navigateMock,
+  };
+});
+
+vi.mock('../auth/AuthContext', () => ({
+  useAuth: vi.fn(),
+}));
+
+vi.mock('../components/ToastContext', () => ({
+  useToasts: vi.fn(),
+}));
+
+vi.mock('../generated/anthoLumeAPIV1', () => ({
+  useGetInfo: vi.fn(),
+}));
+
+const mockedUseAuth = vi.mocked(useAuth);
+const mockedUseToasts = vi.mocked(useToasts);
+const mockedUseGetInfo = vi.mocked(useGetInfo);
+
+describe('RegisterPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockedUseAuth.mockReturnValue({
+      isAuthenticated: false,
+      isCheckingAuth: false,
+      user: null,
+      login: vi.fn(),
+      register: vi.fn().mockResolvedValue(undefined),
+      logout: vi.fn(),
+    });
+
+    mockedUseToasts.mockReturnValue({
+      showToast: vi.fn(),
+      showInfo: vi.fn(),
+      showWarning: vi.fn(),
+      showError: vi.fn(),
+      removeToast: vi.fn(),
+      clearToasts: vi.fn(),
+    });
+
+    mockedUseGetInfo.mockReturnValue({
+      data: {
+        status: 200,
+        data: {
+          registration_enabled: true,
+        },
+      },
+      isLoading: false,
+    } as ReturnType<typeof useGetInfo>);
+  });
+
+  it('submits the username and password to register', async () => {
+    const user = userEvent.setup();
+    const registerMock = vi.fn().mockResolvedValue(undefined);
+
+    mockedUseAuth.mockReturnValue({
+      isAuthenticated: false,
+      isCheckingAuth: false,
+      user: null,
+      login: vi.fn(),
+      register: registerMock,
+      logout: vi.fn(),
+    });
+
+    render(
+      <MemoryRouter>
+        <RegisterPage />
+      </MemoryRouter>
+    );
+
+    await user.type(screen.getByPlaceholderText('Username'), 'evan');
+    await user.type(screen.getByPlaceholderText('Password'), 'secret');
+    await user.click(screen.getByRole('button', { name: 'Register' }));
+
+    await waitFor(() => {
+      expect(registerMock).toHaveBeenCalledWith('evan', 'secret');
+    });
+  });
+
+  it('shows a registration failed toast when registration fails while enabled', async () => {
+    const user = userEvent.setup();
+    const registerMock = vi.fn().mockRejectedValue(new Error('failed'));
+    const showErrorMock = vi.fn();
+
+    mockedUseAuth.mockReturnValue({
+      isAuthenticated: false,
+      isCheckingAuth: false,
+      user: null,
+      login: vi.fn(),
+      register: registerMock,
+      logout: vi.fn(),
+    });
+
+    mockedUseToasts.mockReturnValue({
+      showToast: vi.fn(),
+      showInfo: vi.fn(),
+      showWarning: vi.fn(),
+      showError: showErrorMock,
+      removeToast: vi.fn(),
+      clearToasts: vi.fn(),
+    });
+
+    render(
+      <MemoryRouter>
+        <RegisterPage />
+      </MemoryRouter>
+    );
+
+    await user.type(screen.getByPlaceholderText('Username'), 'evan');
+    await user.type(screen.getByPlaceholderText('Password'), 'secret');
+    await user.click(screen.getByRole('button', { name: 'Register' }));
+
+    await waitFor(() => {
+      expect(showErrorMock).toHaveBeenCalledWith('Registration failed');
+    });
+  });
+
+  it('redirects to home when the user is already authenticated', async () => {
+    mockedUseAuth.mockReturnValue({
+      isAuthenticated: true,
+      isCheckingAuth: false,
+      user: { username: 'evan', is_admin: false },
+      login: vi.fn(),
+      register: vi.fn(),
+      logout: vi.fn(),
+    });
+
+    render(
+      <MemoryRouter>
+        <RegisterPage />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(navigateMock).toHaveBeenCalledWith('/', { replace: true });
+    });
+  });
+
+  it('redirects to login when registration is disabled', async () => {
+    mockedUseGetInfo.mockReturnValue({
+      data: {
+        status: 200,
+        data: {
+          registration_enabled: false,
+        },
+      },
+      isLoading: false,
+    } as ReturnType<typeof useGetInfo>);
+
+    render(
+      <MemoryRouter>
+        <RegisterPage />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(navigateMock).toHaveBeenCalledWith('/login', { replace: true });
+    });
+  });
+
+  it('disables the form when registration is disabled', () => {
+    mockedUseGetInfo.mockReturnValue({
+      data: {
+        status: 200,
+        data: {
+          registration_enabled: false,
+        },
+      },
+      isLoading: false,
+    } as ReturnType<typeof useGetInfo>);
+
+    render(
+      <MemoryRouter>
+        <RegisterPage />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByPlaceholderText('Username')).toBeDisabled();
+    expect(screen.getByPlaceholderText('Password')).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Register' })).toBeDisabled();
+  });
+});

frontend/src/pages/SearchPage.test.tsx

@@ -0,0 +1,131 @@
+import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest';
+import { render, screen, act, fireEvent } from '@testing-library/react';
+import SearchPage from './SearchPage';
+import { useGetSearch } from '../generated/anthoLumeAPIV1';
+import { GetSearchSource } from '../generated/model/getSearchSource';
+
+vi.mock('../generated/anthoLumeAPIV1', () => ({
+  useGetSearch: vi.fn(),
+}));
+
+const mockedUseGetSearch = vi.mocked(useGetSearch);
+
+describe('SearchPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockedUseGetSearch.mockReturnValue({
+      data: {
+        status: 200,
+        data: {
+          results: [],
+        },
+      },
+      isLoading: false,
+    } as ReturnType<typeof useGetSearch>);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('keeps the search disabled until a non-empty query is entered', () => {
+    render(<SearchPage />);
+
+    expect(mockedUseGetSearch).toHaveBeenLastCalledWith(
+      {
+        query: '',
+        source: GetSearchSource.LibGen,
+      },
+      {
+        query: {
+          enabled: false,
+        },
+      },
+    );
+  });
+
+  it('shows a loading state while results are being fetched', () => {
+    mockedUseGetSearch.mockReturnValue({
+      data: undefined,
+      isLoading: true,
+    } as ReturnType<typeof useGetSearch>);
+
+    render(<SearchPage />);
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('shows an empty state when there are no results', () => {
+    render(<SearchPage />);
+
+    expect(screen.getByText('No Results')).toBeInTheDocument();
+  });
+
+  it('renders search results from the generated hook response', () => {
+    mockedUseGetSearch.mockReturnValue({
+      data: {
+        status: 200,
+        data: {
+          results: [
+            {
+              id: 'doc-1',
+              author: 'Ursula Le Guin',
+              title: 'A Wizard of Earthsea',
+              series: 'Earthsea',
+              file_type: 'epub',
+              file_size: '1 MB',
+              upload_date: '2025-01-01',
+            },
+          ],
+        },
+      },
+      isLoading: false,
+    } as ReturnType<typeof useGetSearch>);
+
+    render(<SearchPage />);
+
+    expect(screen.getByText('Ursula Le Guin - A Wizard of Earthsea')).toBeInTheDocument();
+    expect(screen.getByText('Earthsea')).toBeInTheDocument();
+    expect(screen.getByText('epub')).toBeInTheDocument();
+    expect(screen.getByText('1 MB')).toBeInTheDocument();
+  });
+
+  it('updates the generated hook args after the query debounce and source change', () => {
+    vi.useFakeTimers();
+
+    render(<SearchPage />);
+
+    fireEvent.change(screen.getByPlaceholderText('Query'), { target: { value: 'dune' } });
+    fireEvent.change(screen.getByRole('combobox'), {
+      target: { value: GetSearchSource.Annas_Archive },
+    });
+
+    expect(mockedUseGetSearch).toHaveBeenLastCalledWith(
+      {
+        query: '',
+        source: GetSearchSource.Annas_Archive,
+      },
+      {
+        query: {
+          enabled: false,
+        },
+      },
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+
+    expect(mockedUseGetSearch).toHaveBeenLastCalledWith(
+      {
+        query: 'dune',
+        source: GetSearchSource.Annas_Archive,
+      },
+      {
+        query: {
+          enabled: true,
+        },
+      },
+    );
+  });
+});

frontend/src/pages/SearchPage.tsx

@@ -1,37 +1,65 @@
-import { useState, FormEvent } from 'react';
+import { useState, useEffect, FormEvent } from 'react';
 import { useGetSearch } from '../generated/anthoLumeAPIV1';
 import { GetSearchSource } from '../generated/model/getSearchSource';
 import type { SearchItem } from '../generated/model';
-import { SearchIcon, DownloadIcon, BookIcon } from '../icons';
 import { Button } from '../components/Button';
+import { LoadingState } from '../components';
+import { useDebounce } from '../hooks/useDebounce';
+import { Search2Icon, DownloadIcon, BookIcon } from '../icons';
 
-export default function SearchPage() {
+interface SearchPageViewProps {
-  const [query, setQuery] = useState('');
+  query: string;
-  const [source, setSource] = useState<GetSearchSource>(GetSearchSource.LibGen);
+  source: GetSearchSource;
+  isLoading: boolean;
+  results: SearchItem[];
+  onQueryChange: (value: string) => void;
+  onSourceChange: (value: GetSearchSource) => void;
+  onSubmit: (e: FormEvent<HTMLFormElement>) => void;
+}
 
-  const { data, isLoading } = useGetSearch({ query, source });
+export function getSearchResults(data: unknown): SearchItem[] {
-  const results = data?.status === 200 ? data.data.results : [];
+  if (!data || typeof data !== 'object') {
+    return [];
+  }
 
-  const handleSubmit = (e: FormEvent) => {
+  if (!('status' in data) || data.status !== 200) {
-    e.preventDefault();
+    return [];
-    // Trigger refetch by updating query
+  }
-  };
 
+  if (!('data' in data) || !data.data || typeof data.data !== 'object') {
+    return [];
+  }
+
+  if (!('results' in data.data) || !Array.isArray(data.data.results)) {
+    return [];
+  }
+
+  return data.data.results as SearchItem[];
+}
+
+export function SearchPageView({
+  query,
+  source,
+  isLoading,
+  results,
+  onQueryChange,
+  onSourceChange,
+  onSubmit,
+}: SearchPageViewProps) {
   return (
     <div className="flex w-full flex-col gap-4 md:flex-row">
       <div className="flex grow flex-col gap-4">
-        {/* Search Form */}
         <div className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
-          <form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleSubmit}>
+          <form className="flex flex-col gap-4 lg:flex-row" onSubmit={onSubmit}>
             <div className="flex w-full grow flex-col">
               <div className="relative flex">
                 <span className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm">
-                  <SearchIcon size={15} />
+                  <Search2Icon size={15} />
                 </span>
                 <input
                   type="text"
                   value={query}
-                  onChange={e => setQuery(e.target.value)}
+                  onChange={e => onQueryChange(e.target.value)}
                   className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
                   placeholder="Query"
                 />
@@ -43,11 +71,11 @@ export default function SearchPage() {
               </span>
               <select
                 value={source}
-                onChange={e => setSource(e.target.value as GetSearchSource)}
+                onChange={e => onSourceChange(e.target.value as GetSearchSource)}
                 className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
               >
-                <option value="LibGen">Library Genesis</option>
+                <option value={GetSearchSource.LibGen}>Library Genesis</option>
-                <option value="Annas Archive">Annas Archive</option>
+                <option value={GetSearchSource.Annas_Archive}>Annas Archive</option>
               </select>
             </div>
             <div className="lg:w-60">
@@ -58,7 +86,6 @@ export default function SearchPage() {
           </form>
         </div>
 
-        {/* Search Results Table */}
         <div className="inline-block min-w-full overflow-hidden rounded shadow">
           <table className="min-w-full bg-white text-sm leading-normal md:text-sm dark:bg-gray-700">
             <thead className="text-gray-800 dark:text-gray-400">
@@ -85,11 +112,11 @@ export default function SearchPage() {
               {isLoading && (
                 <tr>
                   <td className="p-3 text-center" colSpan={6}>
-                    Loading...
+                    <LoadingState />
                   </td>
                 </tr>
               )}
-              {!isLoading && !results && (
+              {!isLoading && results.length === 0 && (
                 <tr>
                   <td className="p-3 text-center" colSpan={6}>
                     No Results
@@ -97,8 +124,7 @@ export default function SearchPage() {
                 </tr>
               )}
               {!isLoading &&
-                results &&
+                results.map(item => (
-                results.map((item: SearchItem) => (
                   <tr key={item.id}>
                     <td className="border-b border-gray-200 p-3 text-gray-500 dark:text-gray-500">
                       <button className="hover:text-purple-600" title="Download">
@@ -129,3 +155,41 @@ export default function SearchPage() {
     </div>
   );
 }
+
+export default function SearchPage() {
+  const [query, setQuery] = useState('');
+  const [activeQuery, setActiveQuery] = useState('');
+  const [source, setSource] = useState<GetSearchSource>(GetSearchSource.LibGen);
+  const debouncedQuery = useDebounce(query, 300);
+
+  useEffect(() => {
+    setActiveQuery(debouncedQuery);
+  }, [debouncedQuery]);
+
+  const { data, isLoading } = useGetSearch(
+    { query: activeQuery, source },
+    {
+      query: {
+        enabled: activeQuery.trim().length > 0,
+      },
+    },
+  );
+  const results = getSearchResults(data);
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setActiveQuery(query.trim());
+  };
+
+  return (
+    <SearchPageView
+      query={query}
+      source={source}
+      isLoading={isLoading}
+      results={results}
+      onQueryChange={setQuery}
+      onSourceChange={setSource}
+      onSubmit={handleSubmit}
+    />
+  );
+}

frontend/src/test/renderWithProviders.tsx

@@ -0,0 +1,77 @@
+import type { ReactElement, ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { ToastProvider } from '../components/ToastContext';
+
+interface RenderWithProvidersOptions {
+  route?: string;
+  queryClient?: QueryClient;
+  withQueryClient?: boolean;
+  withToastProvider?: boolean;
+}
+
+interface RenderWithProvidersWrapperProps {
+  children: ReactNode;
+  route: string;
+  queryClient: QueryClient;
+  withQueryClient: boolean;
+  withToastProvider: boolean;
+}
+
+function createTestQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+      mutations: {
+        retry: false,
+      },
+    },
+  });
+}
+
+function RenderWithProvidersWrapper({
+  children,
+  route,
+  queryClient,
+  withQueryClient,
+  withToastProvider,
+}: RenderWithProvidersWrapperProps) {
+  let content = <MemoryRouter initialEntries={[route]}>{children}</MemoryRouter>;
+
+  if (withQueryClient) {
+    content = <QueryClientProvider client={queryClient}>{content}</QueryClientProvider>;
+  }
+
+  if (withToastProvider) {
+    content = <ToastProvider>{content}</ToastProvider>;
+  }
+
+  return content;
+}
+
+export function renderWithProviders(
+  ui: ReactElement,
+  {
+    route = '/',
+    queryClient = createTestQueryClient(),
+    withQueryClient = true,
+    withToastProvider = false,
+  }: RenderWithProvidersOptions = {}
+) {
+  return {
+    ui,
+    wrapper: ({ children }: { children: ReactNode }) => (
+      <RenderWithProvidersWrapper
+        route={route}
+        queryClient={queryClient}
+        withQueryClient={withQueryClient}
+        withToastProvider={withToastProvider}
+      >
+        {children}
+      </RenderWithProvidersWrapper>
+    ),
+    queryClient,
+  };
+}

frontend/src/test/setup.ts

@@ -0,0 +1,7 @@
+import { afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+
+afterEach(() => {
+  cleanup();
+});

frontend/src/utils/errors.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import { getErrorMessage } from './errors';
+
+describe('getErrorMessage', () => {
+  it('returns Error.message for Error instances', () => {
+    expect(getErrorMessage(new Error('Boom'))).toBe('Boom');
+  });
+
+  it('prefers response.data.message over top-level message', () => {
+    expect(
+      getErrorMessage({
+        message: 'Top-level message',
+        response: {
+          data: {
+            message: 'Response message',
+          },
+        },
+      })
+    ).toBe('Response message');
+  });
+
+  it('falls back to top-level message when response.data.message is unavailable', () => {
+    expect(
+      getErrorMessage({
+        message: 'Top-level message',
+      })
+    ).toBe('Top-level message');
+  });
+
+  it('uses the fallback for null, empty, and unknown values', () => {
+    expect(getErrorMessage(null, 'Fallback message')).toBe('Fallback message');
+    expect(getErrorMessage(undefined, 'Fallback message')).toBe('Fallback message');
+    expect(getErrorMessage({}, 'Fallback message')).toBe('Fallback message');
+    expect(getErrorMessage({ message: '   ' }, 'Fallback message')).toBe('Fallback message');
+    expect(
+      getErrorMessage(
+        {
+          response: {
+            data: {
+              message: '',
+            },
+          },
+        },
+        'Fallback message'
+      )
+    ).toBe('Fallback message');
+  });
+});

frontend/src/utils/formatters.test.ts

@@ -34,12 +34,6 @@ describe('formatNumber', () => {
     expect(formatNumber(-1500000)).toBe('-1.50M');
   });
 
-  it('matches Go test cases exactly', () => {
-    expect(formatNumber(0)).toBe('0');
-    expect(formatNumber(19823)).toBe('19.8k');
-    expect(formatNumber(1500000)).toBe('1.50M');
-    expect(formatNumber(-12345)).toBe('-12.3k');
-  });
 });
 
 describe('formatDuration', () => {
@@ -68,9 +62,4 @@ describe('formatDuration', () => {
     expect(formatDuration(1928371)).toBe('22d 7h 39m 31s');
   });
 
-  it('matches Go test cases exactly', () => {
-    expect(formatDuration(0)).toBe('N/A');
-    expect(formatDuration(22 * 24 * 60 * 60 + 7 * 60 * 60 + 39 * 60 + 31)).toBe('22d 7h 39m 31s');
-    expect(formatDuration(5 * 60 + 15)).toBe('5m 15s');
-  });
 });

frontend/vite.config.ts

@@ -22,4 +22,8 @@ export default defineConfig({
   build: {
     outDir: 'dist',
   },
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+  },
 });