Sky: UI Component Layer 🌌

Sky is the UI component layer of Land.

• Sky is built with the Astro framework.
• It renders the editor interface - editor, side bar, activity bar, status bar, and panels - inside the Tauri WebView.
• It loads the VS Code workbench from @codeeditorland/output.
• It communicates via SkyBridge for event routing.

Table of Contents

1. Overview
2. Architecture
3. Page Structure
4. Workbench Variants
5. SkyBridge
6. Build-time Variant Selection
7. Static Asset Layout
8. Related Documentation

graph TB
    subgraph Sky["Sky UI Component Layer"]
        PAGES["pages/<br/>index.astro<br/>Mountain.astro<br/>Browser.astro<br/>Electron.astro"]
        WB["Workbench Variants<br/>Mountain / Browser<br/>Electron / Default"]
        BRIDGE["SkyBridge<br/>event routing<br/>Tauri <-> Workbench"]
        BUILD["Build-time Selection<br/>TierWorkbench env var"]

        PAGES --> BUILD
        BUILD --> WB
        WB --> BRIDGE
    end

    OUTPUT["@codeeditorland/output"] --> WB
    MOUNTAIN["Mountain<br/>Tauri events"] -->|"IPC events"| BRIDGE
    BRIDGE -->|"channel dispatch"| WORKBENCH["VS Code Workbench"]

Overview 📋

Sky is the rendering layer that presents the Land editor to the user.

• It uses Astro for page composition.
• It loads the VS Code workbench from @codeeditorland/output.
• It bridges Tauri events to the workbench through SkyBridge.

Architecture 🏗️

+------------------------------------------------------------------+
|                          Sky                                      |
|                                                                   |
|  +------------------+  +------------------+  +------------------+ |
|  | pages/           |  | Workbench/       |  | Function/        | |
|  | - index.astro    |  | - Mountain.astro |  | - SkyBridge.ts   | |
|  | - entry points   |  | - Browser.astro  |  | - Debug.ts       | |
|  |                  |  | - Electron.astro |  | - Shared.ts      | |
|  +------------------+  +------------------+  +------------------+ |
|                                                                   |
|  +------------------+  +------------------+                       |
|  | Bundled/         |  | astro.config.ts  |                       |
|  | Pre-compiled     |  | Vite/Rollup      |                       |
|  | workbench chunks |  | compilation cfg  |                       |
|  +------------------+  +------------------+                       |
+------------------------------------------------------------------+

Module Map 🗺️

Page Structure 📄

Sky provides multiple page entry points, each selecting a different workbench variant.

index.astro

The default entry point. It selects the active workbench at build time based on environment variables:

---
// Pseudo-code from Sky's build-time conditional import
const WorkbenchComponent =
	TierWorkbench === "Mountain"
		? MountainWorkbench
		: TierWorkbench === "Electron"
			? ElectronWorkbench
			: TierWorkbench === "Browser"
				? BrowserWorkbench
				: DefaultWorkbench;
---

<WorkbenchComponent />

Pages Overview

Workbench Variants 🖥️

Sky supports multiple workbench variants compiled through Vite/Rollup:

Variant Selection

The active variant is selected at build time and compiled by Vite. Unused variants are tree-shaken and do not enter the production module graph:

// astro.config.ts maps TierWorkbench to import path
const workbenchPath =
	{
		mountain: "./Workbench/Mountain.astro",
		browser: "./Workbench/Browser.astro",
		electron: "./Workbench/Electron.astro",
	}[TierWorkbench] || "./Workbench/Default.astro";

SkyBridge 🌉

SkyBridge (Source/Function/SkyBridge.ts, ~2900 lines) is the runtime event routing bridge between Tauri’s IPC system and the VS Code workbench’s internal message channel system.

Event Translation Table

Bridge Architecture

Mountain emits Tauri event
    |
    v
Tauri WebView event listener
    |
    v
SkyBridge intercepts event
    |
    +---> Translates to VS Code internal channel format
    +---> Dispatches to registered workbench handlers
    +---> Handles async responses if required
    |
    v
VS Code workbench service receives notification

Webview Panel Management

SkyBridge manages webview content injection through first-set-html logging:

Extension calls vscode.window.createWebviewPanel()
    |
    v
Cocoon sends gRPC createWebviewPanel request
    |
    v
Mountain creates Wry webview
    |
    v
SkyBridge sets HTML content:
    applied=method  -> Content reached real WebviewInput
    applied=setter  -> Content stored, view not yet parked
    applied=skipped -> No parked view available (silent drop)

Build-time Variant Selection 🔧

Sky uses Vite’s conditional dynamic imports to select the active workbench at build time:

// vite.config.ts / astro.config.ts
// The TierWorkbench env var determines which variant is compiled
const activeWorkbench = process.env.TierWorkbench || "Mountain";

Bundle Output

Each variant produces its own bundle:

Sky/Target/Static/
+-- Bundled/
    +-- Mountain/          # When TierWorkbench=Mountain
    |   +-- workbench.js
    |   +-- workbench.css
    +-- Electron/          # When TierWorkbench=Electron
    |   +-- workbench.js
    |   +-- workbench.css
    +-- Browser/           # When TierWorkbench=Browser
        +-- workbench.js
        +-- workbench.css
+-- Application/          # Static assets (non-bundled mode)

Static Asset Layout 📁

After a successful build, Sky’s output is organized as:

Sky/Target/
+-- Static/
    +-- Bundled/
    |   +-- {Variant}/
    |       +-- workbench.js          # Compiled workbench bundle
    |       +-- workbench.css         # Compiled workbench styles
    |       +-- chunks/               # Lazy-loaded code chunks
    +-- Application/                  # Dev mode static assets
        +-- index.html                # Compiled entry page
        +-- assets/                   # CSS, JS, fonts
        +-- worker.js                 # Service worker script

Related Documentation 📚

• Wind - Service layer (Sky consumes)
• Cocoon - Extension host (SkyBridge target)
• Worker - Service worker (Sky integrates)
• Output - Compiled workbench source
• Mountain - Backend (IPC source)
• Polyfills - SkyBridge and preload shim details
• BuildPipeline - Build pipeline for workbench variants

Project Maintainers: Source Open (Source/[email protected]) | GitHub Repository | Report an Issue

See Also

• 🟠 Low-Level Shim - Engine-level prototype hooks
• 🔵 Coverage / Telemetry - Application-level service routing