<!--
  Public educational copy — Division Agent skill pack.
  Scrubbed for public download: no personal emails, Drive folder IDs, or private paths.
  Status labels such as Working Draft refer to the draft→approved lifecycle, not a site watermark.
-->
---
name: Interactive HTML 3D layout viewer
description: >-
  Use when the user wants an interactive browser 3D (SketchUp/Argon-like) of a
  flat fit-out: orbit/pan/zoom, layer toggles, door/curtain angles, plan inset,
  from a DXF layout with cabinet heights — not a static PNG only.
---
# Interactive HTML 3D layout viewer

Build a **self-contained** Working Draft HTML viewer (Three.js via CDN) from a layout DXF + height schedule. Prefer one HTML file with geometry embedded so `file://` double-click works (CORS-safe). Needs network once for the CDN.

## Inputs to gather
1. Authoritative **plan DXF** (mm) and any revision notes.
2. **Clear height** floor→soffit (default only if user stated one).
3. **Cabinet / fixture schedule**: id, plan bbox, height type (full / half / table / AV / other mm).
4. Specials: glazing bands (Z from soffit), sheer curtains vs hard blinds, sanitary INSERTs (WC), wet walls, sofa XY.
5. Never invent prices; mark assumed heights as Working Draft.

## Steps
1. **Inventory DXF** with ezdxf: walls, cab polys, furniture, glazing, doors/curtain texts, SANI inserts, dims. Diff vs prior draft if revising.
2. **Build geom table** (mm→m): walls extruded to soffit; cabs by H; tables/desks low; AV mid; sheer curtains as translucent panels at labelled spans; toilet as recognisable fixture at INSERT; sofa as seat+back+arms (not a flat box); restore any missing wet/partition walls called out by user.
3. **Write single HTML**:
   - Three.js + OrbitControls (import map / jsDelivr).
   - Orbit / pan / zoom; optional preset cameras (iso, top, SE/SW).
   - **Layer toggles** by colour: walls, tall/half/desk/AV, fixtures, glazing, furniture, curtains, doors, floor, labels.
   - **C## (or id) labels** + hover tooltips.
   - **Door / curtain open-angle** sliders where openings exist.
   - **Corner plan inset** (2D canvas) toggleable, N↑.
   - Working Draft disclaimer in UI.
4. **Preview**: open or headless-check that layers and heights read correctly (tall ≠ floor boxes).
5. **Deliver**: HTML (+ optional geom JSON if split) to workspace, copy to user’s shared workspace mirror mirror, upload Drive Working Drafts for that bot. Tell user the local path and that CDN needs network once.
6. On corrections (missing wall, wrong typology, curtain type, WC id): patch geom + HTML; bump draft letter/version; re-copy and re-upload.

## Do not
- Contact anyone or treat as construction docs.
- Drop structural/wet walls the user drew without confirmation.
- Render sheer curtains as hard blinds or sofas as single boxes.
- Rely on external JSON fetch alone if the user will open via `file://`.