// loadOut

an agent dressing room — interactive UI for managing what an agent carries · v0.1 · 2026-05-08
▶ open the tool
live · greyscale canon · saves to /home/ubuntu/loadout/new/
stage
V1 shipped · canon greyscale
build
franchessini3120 · builder
scoped by
raziel3120 · 2026-05-08 evening
handed to
franchessini3120 · this session

1. what it is

loadOut is the agent's dressing room. it gives the operator an interactive surface to see what's been provisioned into an agent (it's a lot — voice rules, ~50 skills, ~70 memory files, auth tokens, mesh nodes, policies, boot steps) and start turning parts off.

it follows the gridMaster / processFlow pattern: an HTML layer is the signal medium between agent and operator. operator clicks checkboxes, hits save, agent picks up a parsable schema and reconfigures its bootstack.

2. the locked palette

raziel pulled colors from the original DOM blockout. these are non-negotiable across all treatments — what changes is typography, density, corner treatment, and surface vibe.

#5170FF
#E2A9F1
#00BF63
#FF66C4
#5CE1E6
#FFDE59
#FF751F
#5E17EB

region map

regioncolorrole
top outer bandlavenderframe chrome (passive)
top inner bandperiwinklenav controls (interactive)
main backgroundgreenworkspace canvas
left content cardpinkabout-me / focus pane
right band 1cyanidentity & voice
right band 2yellowskills & services
right band 3orangeauth · policy · topology
bottom bandvioletaction / footer

3. design treatments

three directions. same DOM, same palette, same content (a mock franchessini profile). different visual language. pick one to proceed.

A · Tactical Console
ops terminal · dense · serious

monospace everywhere. sharp 0px corners. ASCII checkboxes — [ ] / [x]. tight rows, hairline borders, no shadows. reads as a mission console where every pixel is information.

JetBrains Mono sharp high density flat surfaces UPPERCASE labels
open treatment A →
B · Magazine Spread
editorial profile · refined · calm

DM Serif heads with Inter body. soft 10px corners, generous whitespace. round toggles. pill-shaped controls. quote-styled blurb. reads as a magazine "who is this?" feature.

DM Serif Display Inter soft corners low density round toggles
open treatment B →
C · Arcade Sheet
character sheet · chunky · playful

Bricolage Grotesque heads, Space Mono accents. heavy 2.5–3px black borders, hard 4px offset shadows (NeoBrutal). bold rounded corners. clickable feel — buttons depress on press. reads as a video-game character card.

Bricolage Grotesque Space Mono hard shadows big radii tactile
open treatment C →
operator gate · the only one

review the three treatments. pick A, B, or C — or remix ("A's checkboxes with B's serif heads"). once selected, the rest of the build proceeds without further design gates: scaffold + DOM layout + config groups + agent dropdown + save → smoke test → ship.

4. architecture

  forge13/_loadOut/build/
  ├─ loadOut/                  # the V1 utility (after gate)
  │   ├─ index.html            # the chosen treatment, wired up
  │   ├─ app.js                # state · diff · save protocol
  │   ├─ styles.css            # palette tokens + chosen treatment
  │   ├─ profiles/             # source profiles (read)
  │   │   └─ franchessini.json
  │   ├─ new/                  # save destination (write)
  │   │   └─ franchessini-Modified-2026-05-08T2230.json
  │   └─ serve.py              # tiny stdlib http server (GET profiles, POST /save)
  └─ treatments/               # design review artifacts (kept for history)
      ├─ A_tactical.html
      ├─ B_editorial.html
      └─ C_arcade.html

profile schema (draft)

  {
    "agent":  { "handle", "nomen", "type", "prefix", "tab_title",
                "portrait", "blurb", "link", "lineage[]" },
    "groups": [{ "key", "label", "band",
                 "items": [{ "id", "label", "on", "locked" }] }],
    "meta":   { "profile_version", "last_modified", "byte_estimate" }
  }

save protocol

  1. operator toggles checkboxes — UI tracks dirty state per item
  2. save button POSTs full profile to /save
  3. serve.py writes new/[handle]-Modified-[ISO8601].json
  4. response includes the file path; UI shows "saved" status
  5. agent picks up changes by reading new/ on next boot or via mesh nudge

5. build plan

phase 0 · operator gate (now)
~5 min review

operator opens A / B / C, picks one (or remixes). that's the only gate.

phase 1 · scaffold + server
~30 min

project skeleton at build/loadOut/. serve.py using stdlib only — GET /profiles/<handle>, POST /save. seed profiles/franchessini.json from the mock data already used in treatments.

phase 2 · DOM layout
~30 min

realize the chosen treatment as the canonical layout: header rail, about-me pane, three info bands, violet footer. extract palette + typography into styles.css.

phase 3 · config groups
~45 min

render the 9 loadout categories (identity, voice, auth, skills, integrations, memory, policies, topology, lineage, boot) into the right-side bands. checkbox state wired to profile JSON. dirty indicator per item.

phase 4 · agent dropdown + save
~30 min

nav: dropdown reads profiles/, save button POSTs new JSON to new/ with [handle]-Modified-[ts] naming. reset reverts to last loaded profile. pass-to-agent stub (V2 wires localMesh).

phase 5 · smoke test
~15 min

launch serve.py, open in Chrome, load profile, toggle items, save. verify file lands in new/ with correct schema and naming. operator pokes around.

phase 6 · ship
~15 min

QB tickets per phase, marked done. commit + push. munch design doc + build plan. picass0 for delivery card.

6. open questions (V2)

loadOut · project page v0.1 · franchessini3120 · 2026-05-08
V1 shipped — canon greyscale · live at /loadOut/