This directory contains the refactored, modular version of the WebUI assets.

✅ constants.js - API URLs, localStorage keys, default values ✅ state.js - Global application state (models, chat history, settings) ✅ dom.js - DOM element references and initialization ✅ helpers.js - Utility functions (debounce, localStorage, formatting)

✅ variables.css - CSS custom properties for theming ✅ base.css - Reset, typography, global styles

static/
├── README.md (this file)
├── QUICKSTART.md (how to use the modules)
├── js/
│   ├── constants.js
│   ├── state.js
│   ├── dom.js
│   ├── helpers.js
│   ├── models/      (create these as you migrate)
│   ├── ui/
│   ├── chat/
│   ├── api/
│   └── logs/
└── css/
    ├── variables.css
    ├── base.css
    ├── components/  (create these as you migrate)
    └── features/

Keep webui.js and webui.css working, gradually extract modules:

1. Create static/js/main.js that imports from both old and new:

   // Import new modules
   import { state } from "./state.js";
   import { dom, initializeDOMReferences } from "./dom.js";
   
   // Keep old webui.js functions temporarily
   // Gradually move them to modules

2. Update functions one at a time

3. Test after each change

4. Remove old files when done

1. Update index.html:

   <!-- OLD -->
   <link rel="stylesheet" href="webui.css" />
   <script src="webui.js" defer></script>
   
   <!-- NEW -->
   <link rel="stylesheet" href="static/css/main.css" />
   <script type="module" src="static/js/main.js"></script>

2. Create static/css/main.css:

   @import "./variables.css";
   @import "./base.css";
   /* Import other CSS modules as you create them */

3. Create static/js/main.js (see QUICKSTART.md for example)

1. Read QUICKSTART.md for detailed usage examples
2. Read INTEGRATION.md for HTML integration guide
3. Read ../REFACTORING.md for the full migration plan
4. Start extracting feature modules (models, chat, ui, api, logs)
5. Test after each module extraction
6. Update HTML to use new modular imports
7. Remove old monolithic files when migration complete

function loadModelList() {
  // 50 lines of tightly coupled code
  // Uses global variables
  // Hard to test
}

import { state } from "../state.js";
import { dom } from "../dom.js";

export async function loadModelList() {
  // Same logic, but:
  // - Clear dependencies
  // - Easy to test
  // - Reusable
}

• Create directory structure
• Extract constants.js
• Extract state.js
• Extract dom.js
• Extract helpers.js
• Create CSS variables.css
• Create CSS base.css
• Create main.js entry point
• Extract models/* modules
• Extract chat/* modules
• Extract ui/* modules
• Extract api/* modules
• Extract logs/* modules
• Create remaining CSS modules
• Test all functionality
• Remove old files
• Update documentation

• Check QUICKSTART.md for usage examples
• Check ../REFACTORING.md for detailed migration plan
• Each module file has JSDoc comments
• Use ES6 imports/exports throughout

1. Keep modules small - Max 200 lines per file
2. One responsibility - Each module does one thing well
3. Clear imports - Always import what you need
4. Test independently - Write unit tests for each module
5. Document well - Use JSDoc comments

Happy refactoring! 🚀