refactor(gateway): split monolithic style.css and app.js into per-surface modules

[ilblackdragon]

Summary

• Splits the gateway's two largest files — static/style.css (6 887 lines) and static/app.js (11 189 lines) — into per-surface / per-concern modules so PRs touching different tabs stop colliding on the same file.
• STYLE_CSS and APP_JS in crates/ironclaw_gateway/src/assets.rs now concat!(include_str!(...)) the split pieces at compile time. /style.css and /app.js URLs are unchanged, the workspace custom.css overlay still works, and bytes served are the same (plus a \n separator between files).
• Admin assets move under static/admin/ for symmetry; docs + pre-commit-safety + CI workflow updated to point at the new layout and validate split files per-file.

Layout

• CSS — 20 files under static/styles/{base,layout}.css + styles/{components,primitives,surfaces}/*.css
• JS — 24 files under static/js/{core,surfaces}/*.js
• Admin — static/admin/{admin.css, admin.js}

Cuts land on function / top-level-symbol boundaries. A diff <(sort original) <(cat splits | sort) returned zero; node --check validates the concat.

Non-goals

No URL, CSP, behaviour, or logic change. This is a pure file-layout refactor — the follow-up design-system work (token restructure, primitives, Defuse-inspired visual language) lands on top of this clean split in separate PRs.

Test plan

• cargo check -p ironclaw_gateway — clean
• cargo clippy --all --benches --tests --examples --all-features — zero warnings
• cargo fmt --check — clean
• cargo test --lib 'channels::web' — 429 pass (incl. test_css_handler_returns_base_in_multi_tenant_mode)
• cargo test -p ironclaw_gateway --lib — 60 pass
• bash scripts/pre-commit-safety.sh — pass
• node --check on full concat'd JS — pass
• Manual smoke: cargo run gateway, open browser, click through every tab (reviewer)
• Playwright E2E suite green on CI

🤖 Generated with Claude Code

[Copilot]

Pull request overview

Refactors the IronClaw web gateway frontend by splitting the previously monolithic static/style.css and static/app.js into smaller per-surface / per-concern modules, while keeping the public /style.css and /app.js URLs stable via compile-time concatenation.

Changes:

• Split gateway JS into static/js/core/*.js and static/js/surfaces/*.js, concatenated into APP_JS at compile time.
• Split gateway CSS into static/styles/{base,layout,components,primitives,surfaces}/*.css, concatenated into STYLE_CSS at compile time.
• Update docs/tooling/CI (pre-commit safety + workflow checks + internal docs) to point at and validate the new module layout; move admin assets under static/admin/.

Reviewed changes

Copilot reviewed 52 out of 56 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/channels/web/platform/static_files.rs	Updates inline docs to reference new JS module path for layout config.
src/channels/web/CLAUDE.md	Updates docs to reference split onboarding module path.
scripts/pre-commit-safety.sh	Updates JS syntax validation from monolithic file to per-module checks.
crates/ironclaw_gateway/static/styles/surfaces/users.css	Adds Users-tab CSS module.
crates/ironclaw_gateway/static/styles/surfaces/tool-permissions.css	Adds Tool Permissions-tab CSS module.
crates/ironclaw_gateway/static/styles/surfaces/skills.css	Adds Skills-tab CSS module.
crates/ironclaw_gateway/static/styles/surfaces/settings.css	Adds Settings-tab CSS module.
crates/ironclaw_gateway/static/styles/surfaces/routines.css	Adds Routines-tab CSS module.
crates/ironclaw_gateway/static/styles/surfaces/projects.css	Adds Projects-tab CSS module.
crates/ironclaw_gateway/static/styles/surfaces/missions.css	Adds Missions-tab CSS module.
crates/ironclaw_gateway/static/styles/surfaces/memory.css	Adds Memory-tab CSS module.
crates/ironclaw_gateway/static/styles/surfaces/logs.css	Adds Logs-tab CSS module.
crates/ironclaw_gateway/static/styles/surfaces/config.css	Adds Config-tab CSS module.
crates/ironclaw_gateway/static/styles/surfaces/auth.css	Adds Auth-screen CSS module.
crates/ironclaw_gateway/static/styles/surfaces/activity.css	Adds Activity-tab CSS module.
crates/ironclaw_gateway/static/styles/primitives/toast.css	Adds toast primitive CSS module.
crates/ironclaw_gateway/static/styles/layout.css	Adds global layout CSS module.
crates/ironclaw_gateway/static/styles/components/markdown.css	Adds markdown component CSS module.
crates/ironclaw_gateway/static/styles/base.css	Adds base/reset CSS module.
crates/ironclaw_gateway/static/js/surfaces/users.js	Adds Users surface JS module.
crates/ironclaw_gateway/static/js/surfaces/tool-permissions.js	Adds Tool Permissions surface JS module (plus shared shortcut bindings).
crates/ironclaw_gateway/static/js/surfaces/skills.js	Adds Skills surface JS module.
crates/ironclaw_gateway/static/js/surfaces/routines.js	Adds Routines surface JS module.
crates/ironclaw_gateway/static/js/surfaces/memory.js	Adds Memory surface JS module.
crates/ironclaw_gateway/static/js/surfaces/logs.js	Adds Logs surface JS module.
crates/ironclaw_gateway/static/js/surfaces/chat.js	Adds Chat surface JS module.
crates/ironclaw_gateway/static/js/core/widgets.js	Moves widget + layout logic into a core module.
crates/ironclaw_gateway/static/js/core/tool-activity.js	Moves tool activity rendering logic into a core module.
crates/ironclaw_gateway/static/js/core/routing.js	Moves hash-routing + navigation helpers into a core module.
crates/ironclaw_gateway/static/js/core/render.js	Moves markdown/rendering/sanitization helpers into a core module.
crates/ironclaw_gateway/static/js/core/init-auth.js	Moves auth/bootstrap/API helper logic into a core module.
crates/ironclaw_gateway/static/js/core/gateway-tee.js	Moves gateway status + TEE UI logic into a core module.
crates/ironclaw_gateway/static/js/core/bootstrap.js	Establishes global state + theme bootstrap in a core module.
crates/ironclaw_gateway/static/js/core/activity-store.js	Moves active-work state tracking into a core module.
crates/ironclaw_gateway/src/assets.rs	Switches APP_JS/STYLE_CSS to compile-time concatenation; updates admin asset paths.
CLAUDE.md	Updates repo-level docs to reference new onboarding module path.
.github/workflows/code_style.yml	Updates CI JS syntax check to validate all split JS modules.
.claude/commands/trace.md	Updates internal tracing docs to reflect split frontend layout.
.claude/commands/add-sse-event.md	Updates internal guidance for adding SSE handlers/CSS in the split layout.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

engineV2 is referenced when building the Mod+1-5 tab list, but the rest of the codebase uses engineV2Enabled. As written this will throw a ReferenceError the first time the shortcut path runs, breaking keyboard navigation. Switch this to the correct global (or derive from activeWorkStore if that’s the intended source).

[gemini-code-assist]

Code Review

This pull request refactors the monolithic frontend by splitting app.js and style.css into modular components organized by core functionality and UI surfaces. It updates the asset compilation process, documentation, and pre-commit safety scripts to accommodate the new structure. Feedback identifies several issues, including undefined variable and function references (engineV2, autoGrow), inconsistent property access for engine settings, and a logic flaw in SSE event handling that leads to duplicate messages. Additionally, it was recommended to relocate core widget infrastructure from surface-specific files to a centralized core module.

[gemini-code-assist]

The variable engineV2 is not defined in this scope. Based on the global definitions in bootstrap.js and usage in other modules (like routing.js), this should be engineV2Enabled.

Suggested change

	const tabs = engineV2
	? ['chat', 'memory', 'projects', 'settings', 'jobs']
	: ['chat', 'memory', 'routines', 'settings', 'jobs'];
	const tabs = engineV2Enabled
	? ['chat', 'memory', 'projects', 'settings', 'jobs']
	: ['chat', 'memory', 'routines', 'settings', 'jobs'];

[gemini-code-assist]

The function autoGrow is not defined. It appears to be a typo for autoResizeTextarea, which is defined in history.js and used for similar purposes in chat.js.

Suggested change

	autoGrow(input);
	autoResizeTextarea(input);

[gemini-code-assist]

This logic will cause duplicate messages in the UI for streaming responses. When a response event arrives, it calls addMessage, which appends a new bubble to the chat. However, if the response was already being streamed via stream_chunk events, a bubble already exists (marked with data-streaming="true").

The code should check for an existing streaming message and update it in place instead of always adding a new one.

    // Finalize the response: update the streaming message if present, otherwise add a new one.
    const streamingMsg = document.querySelector('.message.assistant[data-streaming="true"]');
    if (streamingMsg) {
      streamingMsg.removeAttribute('data-streaming');
      const contentEl = streamingMsg.querySelector('.message-content');
      if (contentEl) {
        streamingMsg.setAttribute('data-raw', data.content);
        streamingMsg.setAttribute('data-copy-text', data.content);
        contentEl.innerHTML = renderMarkdown(data.content);
        upgradeStructuredData(contentEl);
      }
    } else {
      addMessage('assistant', data.content);
    }

    _turnResponseReceived = true;
    if (_doneWithoutResponseTimer) {
      clearTimeout(_doneWithoutResponseTimer);
      _doneWithoutResponseTimer = null;
    }
    finalizeActivityGroup();

[gemini-code-assist]

Inconsistent property access on the data object. Line 33 uses data.engine_v2 while line 42 uses data.engine_v2_enabled. This will likely result in engineV2Enabled being incorrectly set to false in one of the steps if the backend only provides one of these keys.

Suggested change

	activeWorkStore.setEngineV2Enabled(!!data.engine_v2);
	applyEngineModeUi();
	refreshPersistentActivityBar();
	// Update restart button visibility
	restartEnabled = data.restart_enabled || false;
	updateRestartButtonVisibility();
	// Apply engine v2 / v1 tab visibility once.
	if (!engineModeApplied) {
	activeWorkStore.setEngineV2Enabled(!!data.engine_v2_enabled);
	applyEngineModeUi();
	refreshPersistentActivityBar();
	// Update restart button visibility
	restartEnabled = data.restart_enabled || false;
	updateRestartButtonVisibility();
	// Apply engine v2 / v1 tab visibility once.
	if (!engineModeApplied) {
	engineV2Enabled = !!data.engine_v2_enabled;

[gemini-code-assist]

The Widget Extension System logic (defining window.IronClaw, registerWidget, and IronClaw.api) is core infrastructure and should ideally reside in a core module (e.g., static/js/core/widgets.js) rather than a surface-specific module like config.js. This would improve maintainability and ensure core APIs are initialized predictably.