Remote Config

The Remote Config tab is the primary view in the SkyState dashboard. It provides a JSON editor for viewing and pushing versioned config, environment switching, version history, and side-by-side diffs.

Overview

The Remote Config tab is accessible at / and is selected by default when you open the dashboard. It is scoped to the currently selected project.

The tab contains four main areas:

1. Environment selector — pills for switching between Development, Staging, and Production
2. Toolbar — View/Edit mode toggle and the Diff button
3. Config editor — the JSON editor pane (or diff view when active)
4. Action bar — appears when editing or diffing; contains version bump controls and the Push button

Environment Selector

Three fixed environments are available for every project, displayed as pill buttons above the editor:

• Development (green dot)
• Staging (yellow dot)
• Production (red dot)

Clicking a pill loads the latest config version for that environment. If you have unsaved edits when switching environments, the unsaved changes guard dialog appears.

View and Edit Modes

The toolbar below the environment selector contains a View / Edit mode toggle.

View mode (default)

• The editor is read-only
• The current latest version is displayed with syntax highlighting
• The version tag, comment, and push timestamp are shown in a header bar above the editor

Edit mode

• Click Edit to enter edit mode
• The editor becomes writable — you can modify the JSON directly
• A PushUpdateBar appears below the editor with version bump controls and the Push button
• While editing, navigating away triggers the unsaved changes guard

Version Info Bar

When a config version exists, a header bar is rendered inside the editor pane showing:

• Version tag — e.g. v1.2.3
• Comment — optional message attached when the version was pushed
• Pushed at — relative timestamp of when the version was created

In diff mode, this bar is split into two halves: one for the left pane (current version) and one for the right pane (diff target version).

Pushing a New Version

1. Click Edit in the toolbar
2. Make your changes to the JSON
3. The editor validates JSON as you type — invalid JSON disables the Push button
4. Select a version bump type in the PushUpdateBar:
   • Patch — for value-only changes (e.g. updating a flag value)
   • Minor — for additive structural changes (e.g. adding new keys)
   • Major — for breaking changes (e.g. removing keys or changing types)
5. Optionally add a comment describing the change
6. The next version number is shown as a preview (e.g. v1.2.3 → v1.3.0)
7. Click Push to publish the new version

After a successful push, the editor returns to view mode and the new version appears in the header bar.

Version Bump Rules

The version bump type follows semantic versioning conventions:

Bump type	When to use
Patch	Value-only changes — no keys added or removed
Minor	New keys added (non-breaking)
Major	Keys removed or value types changed (breaking)

When entering diff mode, SkyState automatically suggests a bump type based on the diff statistics.

Diff Mode

The Diff button in the top-right of the toolbar opens a dropdown for comparing the current environment's latest config against another version.

Selecting a Diff Target

1. Click Diff in the toolbar
2. Choose a target environment from the dropdown (Development, Staging, or Production)
3. The version list for the selected environment loads automatically
4. Choose a specific version to compare against (latest version is auto-selected)
5. The editor splits into a two-pane side-by-side view

When comparing the current environment against itself, the latest version is skipped (you cannot diff a version against itself) and the second-most-recent version is auto-selected instead.

Reading the Diff

The split pane shows:

• Left pane — the current environment's latest version (editable in edit mode)
• Right pane — the selected diff target (read-only)

Changed lines are highlighted with color coding:

• Lines with additions are highlighted in green
• Lines with removals are highlighted in red
• Lines with changed values (same key, different value) are highlighted in amber

A floating badge at the top center of the screen shows a summary of the diff statistics:

• +N — number of added fields (green)
• -N — number of removed fields (red)
• ~N — number of changed values (amber)

Saving from Diff Mode

When diff mode is active, a DiffSaveBar appears below the editor for the current (left-side) environment. This lets you push an update to the current environment without leaving diff mode:

1. Adjust the bump type if needed
2. Click Save to push a new version of the current environment

The right-side (diff target) pane is read-only and cannot be saved from this view.

Closing the Diff

To exit diff mode:

• Click the X button next to the Diff button in the toolbar, or
• Open the Diff dropdown and click Clear diff at the bottom

Empty State

If a project has no config versions yet for the selected environment, the editor area shows an empty state with a Create first version button. Clicking it enters edit mode with an empty JSON object ({}).

Keyboard and Interaction Notes

• The editor pane height is capped at 50vh (minimum 315px, maximum 600px) and scrolls vertically when content exceeds the visible area
• The editor preserves proper JSON indentation (2 spaces)
• JSON syntax errors are caught in real-time; the Push button is disabled until valid JSON is restored
• Pressing Cancel in edit mode discards changes and returns to view mode (with the unsaved changes guard if the editor is dirty)