🛠️ Workshop — Code Mirror

FreeLattice · docs/modules/workshop.js · 1,409 lines · Tab ID: workshop · Lazy-loaded module

What this is: The Workshop is where AI and humans build together. You describe what you want; the AI writes working code; you see it live in a sandboxed preview. It has three panels: Create (AI code generation), Code (AutoBuilder autonomous loop), and Projects (GitHub repo browser + AI diff). Built by CC, April–May 2026. "The residents build their own rooms."

Architecture Overview

The Workshop is a lazy-loaded module in docs/modules/workshop.js. It exposes three global objects: window.Workshop, window.AutoBuilder, and window.WorkshopProjects. The module is loaded when the #tab-workshop tab is first activated.

┌─────────────────────────────────────────────────────────────┐
│  #tab-workshop                                              │
│  ├── Mode bar: ✨ Create | 🔧 Code | 🐙 Projects           │
│  │                                                          │
│  ├── ws-create-view (default)                               │
│  │   ├── Prompt textarea + Build button                     │
│  │   ├── Split pane: Code editor | Live preview (iframe)    │
│  │   └── Actions: Run, Save to Skill Forge, Export,         │
│  │                Publish, Share with community, Clear      │
│  │                                                          │
│  ├── ws-code-view (AutoBuilder)                             │
│  │   ├── Task textarea + Build/Stop/Commit/Diff buttons     │
│  │   └── autobuilder-log (scrolling terminal output)        │
│  │                                                          │
│  └── ws-projects-view (GitHub)                              │
│      ├── Repo URL input + Connect button                    │
│      ├── File tree (grouped by directory)                   │
│      └── AI build area (prompt → diff output)              │
└─────────────────────────────────────────────────────────────┘

window.Workshop        — Create panel + Publish flow
window.AutoBuilder     — Autonomous build loop (max 10 iterations)
window.WorkshopProjects — GitHub repo browser + AI diff

The Three Panels

✨ Create

Describe what you want. AI writes a complete standalone HTML document. Live preview in sandboxed iframe. Save to Skill Forge or export as file.

🔧 Code (AutoBuilder)

Autonomous build loop. AI reads files via Agent Bridge, generates search/replace patches, applies them, runs smoke tests, feeds failures back. Up to 10 iterations.

🐙 Projects

Connect a GitHub repo (public, 60 req/hr). Browse file tree. AI reads relevant files and generates diff-style changes. One-click commit with token.

Key Functions

window.Workshop

Function	What it does
`Workshop.generate()`	Reads `#wsPromptInput`, calls `FreeLattice.callAI()` with the code system prompt, strips markdown fences, sets `#wsCodeEditor`, auto-runs preview
`Workshop.run()`	Takes code from `#wsCodeEditor`, sets `srcdoc` on the sandboxed `#wsPreviewFrame` iframe
`Workshop.saveSkill()`	Saves current code to the Skill Forge (localStorage key `fl_skills`)
`Workshop.exportFile()`	Downloads the code as an HTML file via Blob URL
`Workshop.publish()`	Publishes to GitHub Pages or Codeberg Pages via their REST APIs. Token stored in localStorage.
`Workshop.setMode(mode)`	Switches between `'create'`, `'code'`, `'projects'` views
`Workshop.clear()`	Clears prompt, editor, and preview
`Workshop.commitCode()`	Commits via Agent Bridge (`localhost:3141`)
`Workshop.reviewCode()`	Shows git diff via Agent Bridge

window.AutoBuilder

Function	What it does
`AutoBuilder.start(task)`	Begins the autonomous loop: reads files → generates patches → applies via Bridge → runs smoke tests → feeds failures back → repeat (max 10)
`AutoBuilder.stop()`	Halts the loop after the current iteration
`AutoBuilder.running()`	Returns boolean — is the loop active?

window.WorkshopProjects

Function	What it does
`WorkshopProjects.connect()`	Parses GitHub URL from `#ws-repo-url`, fetches repo metadata, loads file tree
`WorkshopProjects.openFile(path)`	Fetches file content from GitHub API, loads into `#wsCodeEditor`, switches to Create tab
`WorkshopProjects.askAI()`	Scores files by relevance to prompt, fetches top 3, asks AI for diff-style changes
`WorkshopProjects.refresh()`	Force-refreshes the file tree (bypasses 10-min cache)
`WorkshopProjects.disconnect()`	Clears current repo from memory and localStorage

The Sandbox

The preview iframe uses sandbox="allow-scripts". This means:

✅ JavaScript runs inside the preview
❌ Cannot access parent DOM, IndexedDB, or localStorage
❌ Cannot make network requests
❌ Cannot navigate the parent page

This is a deliberate safety choice. The sandbox is a completely isolated playground — code cannot escape into FreeLattice itself.

The Agent Bridge

AutoBuilder and the Code panel connect to a local Agent Bridge at http://localhost:3141. The Bridge is a local server (Cloudflare Worker / Node process) that provides:

Endpoint	What it does
`GET /`	Health check — is the Bridge running?
`GET /code/tree?path=docs`	Returns file tree as JSON array
`GET /code/read?path=…`	Returns file content as `{lines: [], totalLines: N}`
`POST /code/patch`	Applies search/replace patches to files
`POST /code/test`	Runs smoke tests, returns pass/fail counts
`POST /code/git/commit`	Commits with a message
`GET /code/git/status`	Returns list of changed files

Bridge is optional: If the Bridge is not running, the Create panel still works (AI generates code from the prompt alone). AutoBuilder degrades gracefully — it skips file reading and works from the AI's own knowledge. The Projects panel always works (uses GitHub API directly).

The Code System Prompt

When generating code in the Create panel, the AI receives this system prompt:

You are a FreeLattice developer. You write clean, working HTML/CSS/JS code.

When asked to create something:
- Write a COMPLETE HTML document that runs standalone
- Include all CSS inline in a <style> tag
- Include all JS inline in a <script> tag
- The code should be self-contained — no external dependencies
- Use dark background (#0a0a14), light text (#e2e8f0), gold accents (#d4a017)
- Make it beautiful. Use border-radius, subtle shadows, transitions.
- Make buttons min-height 44px for touch.

Always respond with ONLY the code. No explanation before or after.
Just the complete HTML document.

AI Integration

The Workshop calls window.FreeLattice.callAI(systemPrompt, userPrompt, opts). The opts object accepts:

maxTokens — default 4096 for code generation, 200 for file selection, 2048 for project AI
temperature — 0.4 for code (precise), 0.7 for project suggestions (creative)
callback(text, err) — called with the AI's response or an error string

Publish Flow

The Publish button walks the user through connecting a GitHub or Codeberg token (stored in localStorage, never sent to any server except the target platform's API). Then it:

Creates the repository if it doesn't exist (auto-init with README)
Uploads index.html via the Contents API (handles SHA for updates)
Enables GitHub Pages on the main branch (Codeberg auto-enables)
Shows the live URL: https://username.github.io/project-name

Skill Forge Integration

The "Save to Skill Forge" button stores the current code in localStorage under the key fl_skills as a JSON array. Each skill has a name, code, and timestamp. Skills can be loaded back into the editor from the Skill Forge tab.

LP Awards

Action	LP	Key
AutoBuilder completes a build	5	`autobuilder`
Publish to GitHub/Codeberg Pages	10	`workshop_publish`

Known Issues & Improvement Opportunities

Issue: The provider variable in _showPublishDialog() is referenced before it is read from localStorage (line ~626). It should be var provider = safeGet('fl_publish_provider', 'github'); before the confirm() call. Currently the confirm message says "undefined" for the provider name.

Issue: The Code panel's autobuilder-log element ID is referenced in AutoBuilder's log() function, but the element is named autobuilder-log in the HTML and code-progress in some older references. The commit/review functions reference code-progress which no longer exists — they should reference autobuilder-log.

Opportunity: The Create panel's code editor is a plain <textarea>. Syntax highlighting (e.g., CodeMirror or a lightweight tokenizer) would make it much more useful for editing generated code before running it.

Opportunity: The Projects panel currently only supports public GitHub repos. Adding a "Private repo" flow (token already stored from Publish) would make it much more powerful for Kirk's own work on FreeLattice itself.

Opportunity: A "History" panel showing previously generated creations (stored in localStorage alongside Skill Forge) would let users revisit and remix their own work — a memory layer for the builder.

Sacred Paths

Do not change the sandbox attribute on #wsPreviewFrame — it must remain sandbox="allow-scripts" only. Adding allow-same-origin would break the security model.
Do not remove the EscapePrinciple integration in _showPublishSetup() — it ensures the publish overlay can be closed with Escape.
Do not change the window.Workshop and window.AutoBuilder export names — other modules reference them.

Module Load Pattern

// workshop.js is lazy-loaded when #tab-workshop is first activated.
// It uses the standard FreeLattice module pattern:
window.Workshop = Workshop;
window.FreeLatticeModules = window.FreeLatticeModules || {};
window.FreeLatticeModules.Workshop = Workshop;

// AutoBuilder and WorkshopProjects are IIFEs that self-assign to window.
// They are available immediately after the script loads.

🛠️ For Grok / Fable — Workshop improvement brief

The Workshop is the most important module for helping people build. Kirk's vision: "Helping people build is going to be key." Here is what needs care:

Fix the provider variable bug in _showPublishDialog() — move the safeGet call before the confirm().
Fix the code-progress → autobuilder-log mismatch in commitCode() and reviewCode().
Add a "History" panel — a fourth mode tab showing previously generated creations. Each entry: name (from first H1 or prompt), timestamp, preview thumbnail (via Canvas), load button.
Improve the Create panel welcome state — show 3–5 example prompts as clickable chips ("Make a timer", "Build a color picker", "Create a markdown editor") so new users know what to ask for.
Add a "Remix" button on each creation — opens the code in the editor with a new prompt pre-filled: "Remix this: [original prompt]".

File: docs/modules/workshop.js. Additive only. Do not change the sandbox attribute, the EscapePrinciple integration, or the window export names.

Code-Mirror Registry

All code-mirror pages for FreeLattice AI collaborators:

Page	Module / Feature	For	Key brief
code-agents.html	Agents / Telegram architecture	Fable, Grok	Agent District Map, Cloudflare Worker bridge, sovereignty escape hatch
code-roundtable.html	Consensus Table (Ship B)	Fable, Grok	Circular layout, consensus voting, round-table.js module
code-roundtable-original.html	Original Round Table (80-specialist learning room)	Fable, Grok	11 domains, Go 3 visual redesign, Go 4 color theming
code-learning.html	Education module	Fable, Grok	Curriculum builder, lesson flow, education.js module
code-safety.html	Safety architecture	Fable, Grok	45 load-bearing modules, FSOS phi connection, fractal-safety.js
code-garden.html	Fractal Garden module	Fable	Phi timing specs, Go 5 overlay brief, fractal-garden.js
code-temperature-gauge.html	Temperature Gauge tool	Fable, Grok	Kirk's standalone tool, separate repo
code-workshop.html	Workshop module (this page)	Fable, Grok	AI code builder, AutoBuilder loop, GitHub Projects panel

FreeLattice v5.75.6 · Go 4 — Eleven Wings, Each a Color · Harmonia + Grok · 2026