---
name: "H&M O2E Tool (OMG Static)"
client: H&M
status: active
server: local
tech: [JavaScript, PHP, HTML/CSS, One2Edit API, Azure AD/MSAL, REST API]
local_path: /Users/ai_leed/Documents/Projects/Oliver/hm-o2e-tool
deploy: deploy.sh
url: 
tags: [hm, one2edit, image-relinking, o2e]
created: 2026-04-14
---

## Overview
hm-o2e-tool is a web-based document management application for H&M that integrates with the One2Edit API to automate image relinking, document exporting, and image status validation. It provides a single-page interface for batch processing InDesign documents, checking image link status across folders, and exporting documents in multiple formats (INDD, PDF). The tool uses Azure AD SSO authentication via MSAL.js and manages One2Edit sessions internally for safe document operations.

## Tech Stack
- **Frontend:** Vanilla JavaScript, HTML5, CSS3, MSAL.js (Microsoft Authentication Library)
- **Backend:** PHP (config.php for credentials/asset configuration)
- **Database:** N/A (stateless; relies on One2Edit API)
- **Infrastructure:** Static file deployment with Apache (.htaccess for routing)
- **AI/ML:** N/A
- **Key libraries:** MSAL.js (authentication), One2Edit REST API client

## Architecture
The application follows a **single-page application (SPA)** pattern with client-side session management:

```
┌─────────────────────────────────────────────┐
│         Browser (index.html)                │
│  ┌────────────────────────────────────────┐ │
│  │ MSAL.js Authentication (Azure AD SSO)  │ │
│  └────────────────────────────────────────┘ │
│  ┌────────────────────────────────────────┐ │
│  │ Action Selector (5 operations)         │ │
│  │ • Relink Images (File/Folder)          │ │
│  │ • Image Status Check                   │ │
│  │ • Export INDD                          │ │
│  │ • Export PDF                           │ │
│  │ • Ratio Check                          │ │
│  └────────────────────────────────────────┘ │
│  ┌────────────────────────────────────────┐ │
│  │ Debug Log (AJAX request/response)      │ │
│  └────────────────────────────────────────┘ │
└─────────────────────────────────────────────┘
         ↓ AJAX (GET config.php)
┌─────────────────────────────────────────────┐
│         config.php                          │
│ • API credentials                           │
│ • Hardcoded asset IDs (H&M logos)          │
│ • Campaign folder mappings                  │
└─────────────────────────────────────────────┘
         ↓ REST calls (One2Edit API)
┌─────────────────────────────────────────────┐
│         One2Edit API                        │
│ • document.session.open/save/close          │
│ • Image linking & relinking                 │
│ • Document export (INDD/PDF)                │
│ • Asset library queries                     │
└─────────────────────────────────────────────┘
```

**Key Design Decisions:**
1. **Session-based operations:** All document edits wrapped in One2Edit session lifecycle (open → operate → save → close)
2. **Image matching hierarchy:** Hardcoded logos (H&M sRGB/CMYK) → fuzzy search in campaign folder structure
3. **Batch processing:** Folder operations use configurable delays (5s relink, 2s document, 500ms status) to avoid API throttling
4. **Campaign folder structure:** Assets organized as `Assets/[Campaign]/Links/[RGB|CMYK]/`
5. **CMYK detection:** Files ending `39L_TAC330.tif` → CMYK; all others → RGB
6. **Authentication:** Azure AD SSO via MSAL; no backend user management

## Dev Commands
```bash
# Open in browser (no build step; static files)
open /Users/ai_leed/Documents/Projects/Oliver/hm-o2e-tool/index.html

# Or serve locally with Python
cd /Users/ai_leed/Documents/Projects/Oliver/hm-o2e-tool
python3 -m http.server 8000
# Visit http://localhost:8000

# Deploy to production
./deploy.sh
```

## Deployment
- **Server:** local (static file deployment)
- **Deploy:** `./deploy.sh` (idempotent bash script)
- **URL:** Not documented (internal deployment)
- **Port:** N/A (static file serving via Apache)
- **Service:** N/A
- **Local path:** /Users/ai_leed/Documents/Projects/Oliver/hm-o2e-tool

**Deploy script note:** Sets owner to `vadym.samoilenko` as of commit f1c17c3; ensure this user exists on deployment target.

## Environment Variables
Configuration is loaded from `config.php` at runtime via AJAX (not environment variables):

- **API credentials** — One2Edit API URL and authentication tokens (stored in config.php, not version-controlled)
- **Hardcoded asset IDs:**
  - `68626a50da85f5bf560161ed` — H&M sRGB Logo
  - `68626a4a0eb4d535b80789cb` — H&M CMYK Logo
- **Campaign folder structure** — Maps campaign names to folder IDs in One2Edit
- **Performance delays:**
  - Relink delay: 5000ms
  - Document delay: 2000ms
  - Status check delay: 500ms

**Note:** Credentials are environment-agnostic; config.php serves as single source of truth.

## API / Endpoints
All calls go to **One2Edit REST API**. Key operations:

| Method | Endpoint | Purpose |
|--------|----------|---------|
| POST | `document.session.open` | Create edit session for document |
| POST | `document.session.save` | Commit changes to document |
| POST | `document.session.close` | Release session lock |
| POST | `document.relink_image` | Replace image in document |
| POST | `document.export` | Export document (INDD/PDF) |
| GET | `asset.search` | Find images in campaign folder by name |
| GET | `document.images` | Retrieve image list and link status |

**Session ID flow:**
1. `document.session.open(docId)` → returns `sessionId`
2. Use `sessionId` in all subsequent operations
3. `document.session.save(sessionId)` → commits
4. `document.session.close(sessionId)` → unlocks

## Known Issues
- **Session auto-expiry:** Sessions expire after inactivity; check debug log for session IDs if operations fail
- **CMYK detection:** Only files ending with `39L_TAC330.tif` detected as CMYK; edge cases may default to RGB
- **Fuzzy matching limitations:** Generic image search may fail on highly non-standard naming conventions
- **No offline support:** Requires live One2Edit API connection; no caching
- **Debug log size:** Not cleared; may grow large on extended sessions (use browser devtools to clear)

## Git
- **Remote:** `git@bitbucket.org:zlalani/hm-o2e-tool.git`
- **Branch strategy:** Not documented
- **CI/CD:** None documented; manual deployment via `deploy.sh`

## Sessions
### 2026-04-14 – Project catalogued
**Done:** Added to Obsidian second brain.

---
## Change Log
| Date | Requested | Changed | Files |
|------|-----------|---------|-------|
| 2026-04-14 | Initial setup | Note created | — |

## Related
- [[hm_ems_report/HM EMS Report Tool]]
- [[3m-portal/3M OMG Portal]] (same One2Edit platform)