# DIS Master Copy — Front-End (UI / Cosmetics)

> **Version:** v3.1.2 (PENS removed)
> **Last Updated:** 2026-08-31
> **Source:** `https://bphen-dis.pages.dev` (Cloudflare Pages project `bphen-dis`)
> **Files Location:** `/workspace/dis_master_copy/frontend/`

## Overview

The DIS front-end is the user interface layer — the HTML shell, CSS styling ("cosmetics"), and client-side JavaScript that renders Ida's workspace in the browser. JU directed that the front-end be part of the master copy alongside the back-end, so the entire system — front-end and back-end — lives in a single master copy for disaster recovery and version control.

The front-end is served from a **separate Cloudflare Pages project** (`bphen-dis`) and proxied through the Cloudflare Worker (`ida-archive-supabase`). The worker fetches each asset from `bphen-dis.pages.dev`, optionally modifies it (HTML gets `stripPwaShell` + `stripWorkspaceMetadata` + `rewriteRetiredWorkspaceLanguage`; `main-navy.js` gets `replaceAll("BY CYCLE", "BY MICROCYCLE")` and has `CLIENT_SCRIPT` appended), then serves the result to the user.

## Architecture

```
User Browser
    ↓
https://ida.bphen.us  (Cloudflare Worker: ida-archive-supabase)
    ↓
    ├── /main-navy.js → serveEnhancedMainScript()
    │       Fetches from bphen-dis.pages.dev/main-navy.js
    │       Applies: .replaceAll("BY CYCLE", "BY MICROCYCLE")
    │       Appends: CLIENT_SCRIPT (worker-injected client code)
    │
    ├── /sw.js → Returns 410 (service worker retired)
    │
    └── Everything else → serveAsset()
            Fetches from bphen-dis.pages.dev/{path}
            If HTML: stripPwaShell → stripWorkspaceMetadata → rewriteRetiredWorkspaceLanguage
            If JS/CSS: rewriteRetiredWorkspaceLanguage
            If binary (PNG, etc.): served as-is
```

## File Inventory

| File | Size | Purpose | PENS References (v3.1.2) |
|------|------|---------|--------------------------|
| `index.html` | 6,629 bytes | HTML shell — page structure, workspace sidebar, chat interface | None (removed) |
| `styles-navy.css` | 37,078 bytes | All CSS styling — navy theme, layout, animations, responsive design | None (never had any) |
| `main-navy.js` | 99,780 bytes | Main client-side JavaScript — chat, folders, archive browser, Ida interaction | None (removed FOLDER_SEED.pens entry) |
| `era-data.js` | 13,371 bytes | Era data definitions — historical eras, categories, metadata for archive | None |
| `version.js` | 12,317 bytes | Version display and changelog logic | None |
| `manifest.json` | 841 bytes | PWA manifest — app name, icons, theme | None |
| `icon-192.png` | 6,933 bytes | App icon (192x192 PNG) | None |
| `sw.js` | 1,166 bytes | Service worker (retired by worker — returns 410) | None |

**Total front-end size:** ~177 KB (excluding retired sw.js)

## v3.1.2 Changes (PENS Removal)

### index.html
- **Removed:** The PENS Methodology project folder div from the workspace sidebar (was line 70):
  ```html
  <!-- REMOVED -->
  <div class="ws-folder" data-folder="pens">
    <div class="ws-folder-icon">📁</div>
    <div class="ws-folder-text">
      <div class="ws-folder-name">PENS Methodology</div>
      <div class="ws-folder-meta">Project folder</div>
    </div>
    <div class="ws-folder-chevron">›</div>
  </div>
  ```

### main-navy.js
- **Removed:** The `pens` entry from the `FOLDER_SEED` object (was lines 1909-1916):
  ```javascript
  // REMOVED from FOLDER_SEED
  pens: {
      label: 'PENS METHODOLOGY',
      title: 'PENS Methodology — Chat Thread',
      seed: [
          { ida: false, text: 'Ida, pull every C3 record tagged Eclipse from 2020–2022 for the PENS draft.' },
          { ida: true, text: 'Found the matching records for Institutional Response + Eclipse Detected, 2020–2022. Want me to summarize the pattern or export the list to this folder?' }
      ]
  },
  ```

### Other files
- `styles-navy.css`, `era-data.js`, `version.js`, `manifest.json`, `icon-192.png` — No changes needed (no PENS references existed)

## Worker-Injected Client Script (CLIENT_SCRIPT)

The worker appends a `CLIENT_SCRIPT` to `main-navy.js` at serve time. This script is defined in the back-end worker (`ida-archive-worker-v312.js`, line 90) and provides additional client-side functionality. As of v3.1.2, `CLIENT_SCRIPT` contains **no PENS references**.

## Deployment

The front-end is deployed to Cloudflare Pages using the Direct Upload API (4-stage process with BLAKE3 hashing):

```bash
python3 /workspace/dis_master_copy/deploy_frontend.py
```

This script:
1. Gets an upload JWT from Cloudflare
2. Uploads all front-end assets as a JSON array (base64-encoded)
3. Upserts the BLAKE3 hashes
4. Creates a new deployment with a manifest mapping paths to hashes

**Deploy script:** `/workspace/dis_master_copy/deploy_frontend.py`
**Target project:** `bphen-dis` (Cloudflare Pages)
**Live URL:** `https://bphen-dis.pages.dev` (direct) / `https://ida.bphen.us` (via worker proxy)