feat: Working on biggest refactor of this project

[kfirfer]

Hello,
I’m currently working on a major refactor of this project. It started from version 1.15.0, but it wasn’t finished at the time. I’m now close to completing the refactor and have added many bug fixes and new features.

I’d love your suggestions on how we should proceed with this work.
This is the fork and branch:
https://github.com/kfirfer/claudecodeui/tree/lints-and-more

I dont really want to start all over again or pull request change one by one.

[blackmammoth]

Hello @kfirfer, I'm already doing this. What I recommend is to do some small refactors and send them as separate and small PRs so that it's easier to review and approve.

In your PRs, include your design decisions, why you made the changes, and what improvements it showed.

[kfirfer]

@blackmammoth this is really huge refactor. lets compare both branches , what is your branch name ?
and ill also write here little later full high level things that has been changed/added

[kfirfer]

The following is all the changes:

Changelog Summary

Overview

This branch (lints-and-more) introduces comprehensive linting infrastructure, testing framework, session navigation improvements, and various code quality enhancements.

---

Linting Infrastructure

OxLint Configuration (.oxlintrc.json)

• Added 600+ lint rules covering React, TypeScript, Unicorn, JSX-A11y, Promise, JSDoc, and more
• Configured plugins: react, typescript, unicorn, jest, jsx-a11y, import, react-perf, promise, jsdoc, node, vitest
• Organized rules by category: correctness (error), suspicious (warn), pedantic (warn), perf (warn)

ESLint Configuration (eslint.config.js)

• Modern flat config format with extensive plugin ecosystem
• Includes: sonarjs, security, unicorn, react-perf, promise, array-func, testing-library, jest-dom, no-loops, no-secrets, compat, jsdoc, boundaries, no-unsanitized
• Separate rule sets for JS/JSX and TypeScript files

---

Testing Infrastructure

Playwright E2E Tests

• Added notification settings tests covering permission states, toggle behavior, localStorage persistence
• Tests for notification trigger on Claude completion
• Project workflow tests for session navigation

Configuration

• Test artifacts ignored: test-results/, playwright-report/, tests/.auth/
• Test credentials via environment variables (TEST_USERNAME, TEST_PASSWORD)

---

Session State Management

New Hooks

• useSessionNavigation.js: State machine with states idle, switching, loading, ready, error
• useChatSessionState.js: Atomic session processing state with reducer pattern
  • Guards against race conditions and flickering
  • Completion timestamp tracking to prevent stale status updates

New Context

• SessionNavigationContext.jsx: Cross-component session navigation state sharing

Race Condition Fixes

• Message queueing during navigation
• Timeout failsafe (10s) for stuck navigation states
• React state batching mitigation via forceSessionSwitchCounter object pattern

---

Code Quality Improvements

Accessibility

• Added type="button" to ~50+ button elements
• Added data-testid attributes for testing

Code Style

• Trailing comments moved to separate lines
• Template literal modernization (\${var}`instead ofvar + ''`)
• React import cleanup (direct imports vs React.xyz)
• parseInt radix parameter standardized to base 10

Component Fixes

• ClaudeStatus: Debounced visibility to prevent flickering, preserved elapsed time during state changes
• ChatInterface: Improved new session handling with synchronous flag for race condition prevention
• Added "Force Reset" UI for stuck sessions

---

Removed Code

• TaskMasterSetupWizard.jsx - Deleted (603 lines)
• useAudioRecorder.js - Deleted (109 lines)

---

Environment Updates

• Node.js: v20.19.3 → v24.13.0
• Context window: 160000 → 200000 tokens
• Added test credential placeholders to .env.example

---

DevOps

• Added Ansible playbook (ansible/deploy.yml) for PM2 deployment
• Added inventory file for target servers

---

Documentation

• Added CLAUDE.md - Project instructions for Claude Code
• Added AGENTS.md - Agent configuration documentation

---

Dependencies

• Added many ESLint plugins and TypeScript tooling (see package-lock.json changes)
• Updated various transitive dependencies

[blackmammoth]

@blackmammoth this is really huge refactor. lets compare both branches , what is your branch name ? and ill also write here little later full high level things that has been changed/added

Doing a review on a big PR is bad practice since many small cases that need to be checked will be missed. Please submit your changes as separate PRs

[blackmammoth]

@blackmammoth this is really huge refactor. lets compare both branches , what is your branch name ? and ill also write here little later full high level things that has been changed/added

In addition, I'm working on refactors as small PRs so there is no branch to compare it against. Right now, I'm working on refactoring WebSocket logic. The branch is ws-context-latest-message-platform-config

[kfirfer]

@blackmammoth this is the branch:
https://github.com/kfirfer/claudecodeui/tree/lints-and-more