diff --git a/.design/project-log/2026-06-01-docs-landing-slide-content.md b/.design/project-log/2026-06-01-docs-landing-slide-content.md new file mode 100644 index 000000000..bdd05c69d --- /dev/null +++ b/.design/project-log/2026-06-01-docs-landing-slide-content.md @@ -0,0 +1,25 @@ +# Docs Landing Page: Slide Content Integration + +**Date:** 2026-06-01 +**PR:** https://github.com/ptone/scion/pull/117 +**Branch:** scion/dev-docs-landing + +## What Changed + +Updated the docs-site landing page (`docs-site/src/pages/landing.astro`) to incorporate content from the Scion explainer slide deck at `https://storage.googleapis.com/scion-intro-slides/index.html`. + +### Key Changes + +1. **New "Scion Core" pipeline section** — A five-card grid showing the orchestration pipeline: Define → Run → Spawn → Notify → Sync. Each card includes a step number, title, subtitle, and description pulled from the slides. + +2. **Expanded feature cards** — Replaced the original six generic feature cards with detailed, slide-sourced descriptions for Agent Definition, Agent Runtime, Agent Collaborators, Agent Notifications, Shared Filesystem, and Harness Agnostic. Each card now includes bullet-pointed sub-features. + +3. **Terminology update** — All instances of "Boot" from the slides replaced with "Run". Also updated "grove" to "project" in the quickstart steps. + +4. **Slides embed update** — Replaced the old Google Slides embed iframe with the interactive HTML slides deck URL. + +## Process Notes + +- The slides were fetched via curl since the WebFetch tool had model availability issues. +- Node.js 22+ was required for the Astro build, which wasn't available in the sandbox. Validated the file structure (frontmatter syntax, balanced HTML tags) programmatically instead. +- The landing page is a standalone Astro page (not a Starlight content doc), so it uses raw HTML/CSS rather than MDX components. diff --git a/docs-site/src/pages/landing.astro b/docs-site/src/pages/landing.astro index ffc0664eb..d066dbec3 100644 --- a/docs-site/src/pages/landing.astro +++ b/docs-site/src/pages/landing.astro @@ -186,13 +186,73 @@ const base = import.meta.env.BASE_URL; font-weight: 300; } - /* Feature grid */ - .features { + /* Pipeline section */ + .pipeline { background: var(--bg-secondary); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } + .pipeline-grid { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 1rem; + position: relative; + } + + .pipeline-card { + background: var(--bg-card); + border: 1px solid var(--border-subtle); + border-radius: 12px; + padding: 1.5rem; + text-align: center; + transition: border-color 0.2s ease, transform 0.2s ease; + position: relative; + } + + .pipeline-card:hover { + border-color: var(--accent-green-dim); + transform: translateY(-2px); + } + + .pipeline-num { + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 50%; + background: var(--accent-green-dim); + color: var(--accent-green); + font-weight: 600; + font-size: 0.85rem; + margin-bottom: 0.75rem; + } + + .pipeline-card h3 { + font-size: 1.05rem; + font-weight: 600; + color: var(--text-primary); + margin-bottom: 0.25rem; + } + + .pipeline-card .pipeline-label { + font-size: 0.8rem; + color: var(--accent-emerald); + margin-bottom: 0.5rem; + } + + .pipeline-card p.pipeline-body { + font-size: 0.82rem; + color: var(--text-secondary); + line-height: 1.5; + } + + /* Feature grid */ + .features { + background: var(--bg-primary); + } + .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); @@ -233,9 +293,34 @@ const base = import.meta.env.BASE_URL; line-height: 1.6; } + .feature-card ul { + list-style: none; + padding: 0; + margin: 0.5rem 0 0; + } + + .feature-card ul li { + font-size: 0.85rem; + color: var(--text-secondary); + line-height: 1.6; + padding-left: 1.1rem; + position: relative; + margin-bottom: 0.3rem; + } + + .feature-card ul li::before { + content: '›'; + position: absolute; + left: 0; + color: var(--accent-green); + font-weight: 600; + } + /* Video section */ .video-section { - background: var(--bg-primary); + background: var(--bg-secondary); + border-top: 1px solid var(--border-subtle); + border-bottom: 1px solid var(--border-subtle); } .video-container { @@ -261,9 +346,7 @@ const base = import.meta.env.BASE_URL; /* Slides section */ .slides-section { - background: var(--bg-secondary); - border-top: 1px solid var(--border-subtle); - border-bottom: 1px solid var(--border-subtle); + background: var(--bg-primary); } .slides-container { @@ -289,7 +372,9 @@ const base = import.meta.env.BASE_URL; /* How it works */ .how-it-works { - background: var(--bg-primary); + background: var(--bg-secondary); + border-top: 1px solid var(--border-subtle); + border-bottom: 1px solid var(--border-subtle); } .steps { @@ -342,8 +427,7 @@ const base = import.meta.env.BASE_URL; /* CTA */ .cta { - background: var(--bg-secondary); - border-top: 1px solid var(--border-subtle); + background: var(--bg-primary); text-align: center; padding: 5rem 2rem; } @@ -378,6 +462,12 @@ const base = import.meta.env.BASE_URL; } /* Responsive */ + @media (max-width: 900px) { + .pipeline-grid { + grid-template-columns: repeat(3, 1fr); + } + } + @media (max-width: 640px) { .hero { padding: 3rem 1.5rem 2rem; @@ -388,6 +478,9 @@ const base = import.meta.env.BASE_URL; .section-title { font-size: 1.5rem; } + .pipeline-grid { + grid-template-columns: 1fr 1fr; + } .feature-grid { grid-template-columns: 1fr; } @@ -401,7 +494,8 @@ const base = import.meta.env.BASE_URL; Scion

sci·on /ˈsīən/ — a young shoot or twig, cut for grafting or rooting.

- Run multiple AI agents in parallel — each in its own container, with isolated workspaces — + A containerized orchestration system for multi-agent workflows. + Run multiple AI agents in parallel — each in its own sandbox, with isolated workspaces — collaborating on your code simultaneously.

@@ -420,41 +514,111 @@ const base = import.meta.env.BASE_URL;
- + +
+
+

Scion Core

+

A five-part orchestration pipeline for containerized multi-agent workflows.

+
+
+
01
+

Define

+

Agent Templates

+

Parses declarative agent templates containing system instructions, prompts, custom skills, and MCP configurations.

+
+
+
02
+

Run

+

Sandbox Runtimes

+

Launches standard execution sandboxes, isolating credentials, variables, and runtime boundaries dynamically.

+
+
+
03
+

Spawn

+

Swarm Hierarchies

+

Coordinates human actors and P2P agent hierarchies with lateral peer-to-peer messaging brokers.

+
+
+
04
+

Notify

+

Reactive Wakeups

+

Enforces reactive wakeup sleep cycles — suspends parent, wakes instantly on child completion notification.

+
+
+
05
+

Sync

+

Shared Filesystem

+

Shares folder filesystems concurrently to pass large context by reference and exchange shared progress notes.

+
+
+
+
+ +
-

Why Scion?

-

Orchestrate deep agents with true isolation, real parallelism, and zero conflicts.

+

How It Works

+

Each pillar of Scion addresses a core challenge in multi-agent orchestration.

- -

Harness Agnostic

-

Works with Claude Code, Gemini CLI, OpenCode, and Codex. Adaptable to anything that runs in a container.

+ +

Agent Definition

+

Agents are defined declaratively through templates combining four layers:

+
    +
  • System Instruction — the agent's primary purpose, persona, and core role.
    • +
  • Agent Instructions — operational context, dynamically appended based on workspace.
    • +
  • Agent Skills — deterministic CLI skills conforming to the Agent Skills Specification.
    • +
  • MCP Servers — optional Model Context Protocol connections for external tools.
    • +
- -

True Isolation

-

Each agent gets its own container, credentials, config, and a dedicated git worktree — no merge conflicts.

+ +

Agent Runtime

+

Scion abstracts complex system execution, managing secure, isolated processes across varied backends.

+
    +
  • Lifecycle control — uniform create, start, stop, attach, delete commands.
    • +
  • Container runtimes — Docker, Podman, Apple Virtualization, or Kubernetes.
    • +
  • Env & mounts — explicit environment variables, read-only secrets, and isolated tmpfs volumes.
    • +
  • Federated identity — binds project-scoped identities to GCP service accounts or Agent Platform credentials.
    • +
- -

Parallel Execution

-

Run multiple agents concurrently as fully independent processes, on your laptop or across clusters.

+ +

Agent Collaborators

+

Teams of humans working with teams of agents. Both are treated as actors in the system.

+
    +
  • Actor interaction — humans and agents can query, message, or inspect any agent.
    • +
  • Self-directed management — agents use the scion CLI to dynamically spawn or stop sub-agents.
    • +
  • Async messaging — asynchronous communication across safe, pluggable brokers.
    • +
  • Interactive inspection — attach or look at running agent processes via tmux or logs.
    • +
- -

Attach / Detach

-

Agents run in tmux sessions for background operation. Attach for human-in-the-loop interaction anytime.

+ +

Agent Notifications

+

State and messages combine into notifications for robust asynchronous, event-driven orchestration.

+
    +
  • State transitions — events fire when agents move between states (e.g. working to waiting_for_input).
    • +
  • Suspend pattern — parent delegates a task, updates activity to blocked, and sleeps. No polling.
    • +
  • Event-driven wakeup — notification hook automatically wakes the parent on child completion.
    • +
  • Human alerts — triggers notifications to Slack, terminals, or dashboards when agents need help.
    • +
- -

Specialization via Templates

-

Define agent roles like "Security Auditor" or "QA Tester" with custom system prompts and skill sets.

+ +

Shared Filesystem

+

High-performance shared volumes enable frictionless code modification, test execution, and file exchange.

+
    +
  • Shared volume mounts — agents share the same physical project directory, avoiding clone delays.
    • +
  • Context by reference — pass file path references instead of bloating LLM payloads with large files.
    • +
  • Shared learnings — sibling agents exchange progress summaries and execution logs in real time.
    • +
  • Branch isolation — when needed, agents initialize local branches or isolated worktrees on shared storage.
    • +
- -

Multi-Runtime

-

Docker, Podman, Apple containers, and Kubernetes — manage execution across runtimes via named profiles.

+ +

Harness Agnostic

+

Works with Claude Code, Gemini CLI, OpenCode, and Codex. The underlying container harness is an optional execution detail — adaptable to anything that runs in a container.

@@ -483,7 +647,7 @@ const base = import.meta.env.BASE_URL;

Dive deeper into the architecture and design.

@@ -506,7 +670,7 @@ const base = import.meta.env.BASE_URL;
2

Initialize

-

Create a grove in your project.

+

Create a project in your repo.

scion init