From dcb63328fadeee035588ffbc708b9a551fcf45ee Mon Sep 17 00:00:00 2001
From: Orca <orca@openab.dev>
Date: Sun, 16 Aug 2026 14:52:42 +0800
Subject: [PATCH] feat(compose): template/skills library + compose (deploy
 slice 1)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Slice 1 of the accepted agent-deployment ADR (#63): the compose seam.
Author a template/overlay/skills library and preview the composed
{path -> bytes} agent bundle. Studio-local, zero AWS/upstream.

- crates/studio-compose: pure compose core (template ⊕ overlay + skills
  by-reference -> deterministic Bundle + image tag), last-writer-wins
  (overlay > skills > template), sha256 bundle digest. 17 unit tests.
- src-tauri: compose_library_get/set + compose_preview commands;
  library persisted as one JSON doc under app config dir (like config.rs).
- console: Compose tab (JSON library editor + template/overlay picker +
  bundle preview). Pure render helpers unit-tested.

Verified: cargo test -p studio-compose (17), console tsc + 65 vitest +
vite build. src-tauri Rust compiles under bundle-macos CI (GTK dep).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 Cargo.toml                       |   2 +-
 console/index.html               |  47 +++
 console/src/compose.test.ts      |  65 ++++
 console/src/compose.ts           | 211 ++++++++++
 console/src/main.ts              |   4 +
 console/src/styles.css           | 133 +++++++
 crates/studio-compose/Cargo.toml |  15 +
 crates/studio-compose/src/lib.rs | 638 +++++++++++++++++++++++++++++++
 src-tauri/Cargo.toml             |   6 +
 src-tauri/src/compose.rs         |  60 +++
 src-tauri/src/lib.rs             |  37 ++
 11 files changed, 1217 insertions(+), 1 deletion(-)
 create mode 100644 console/src/compose.test.ts
 create mode 100644 console/src/compose.ts
 create mode 100644 crates/studio-compose/Cargo.toml
 create mode 100644 crates/studio-compose/src/lib.rs
 create mode 100644 src-tauri/src/compose.rs

diff --git a/Cargo.toml b/Cargo.toml
index 361b1a9..7f80650 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,5 +1,5 @@
 [workspace]
-members = ["crates/agent-lifecycle", "crates/oabctl", "crates/studio-cp", "crates/oab-mcp", "crates/acp-tunnel"]
+members = ["crates/agent-lifecycle", "crates/oabctl", "crates/studio-cp", "crates/studio-compose", "crates/oab-mcp", "crates/acp-tunnel"]
 resolver = "2"
 
 # Fast profile for the CI-built `oab-mcp` sidecar (desktop.yml). The sidecar is an
diff --git a/console/index.html b/console/index.html
index 34eb947..8dccee8 100644
--- a/console/index.html
+++ b/console/index.html
@@ -50,10 +50,57 @@
         <nav class="tabs" id="tabs">
           <button class="tab is-active" data-target="log">Activity</button>
           <button class="tab" data-target="mcpio">MCP · oab-mcp</button>
+          <button class="tab" data-target="compose">Compose</button>
           <button class="tab" data-target="config">Config</button>
         </nav>
         <div id="log" class="log pane"></div>
         <div id="mcpio" class="log pane mcpio" hidden></div>
+        <div id="compose" class="pane compose" hidden>
+          <div class="compose-grid">
+            <div class="compose-lib">
+              <div class="compose-lib-head">
+                <span class="compose-label">Library</span>
+                <span class="compose-lib-path">template ⊕ overlay + skills</span>
+                <span class="compose-spacer"></span>
+                <button type="button" id="compose-save" class="cfg-btn">Save library</button>
+              </div>
+              <textarea
+                id="compose-lib-text"
+                class="compose-lib-text"
+                spellcheck="false"
+                autocomplete="off"
+                placeholder='{ "templates": {}, "overlays": {}, "skills": { "skills": {} } }'
+              ></textarea>
+            </div>
+            <div class="compose-preview-col">
+              <form id="compose-form" class="compose-form" autocomplete="off">
+                <label
+                  >Template
+                  <select id="compose-template" class="compose-select"></select>
+                </label>
+                <label
+                  >Overlay
+                  <select id="compose-overlay" class="compose-select">
+                    <option value="">— none (bare template) —</option>
+                  </select>
+                </label>
+                <div class="compose-actions">
+                  <button type="submit" id="compose-preview-btn">Preview bundle</button>
+                  <span class="compose-status" id="compose-status"></span>
+                </div>
+              </form>
+              <div id="compose-preview" class="compose-preview"></div>
+            </div>
+          </div>
+          <p class="config-hint">
+            Author a reusable <strong>template</strong> (golden bundle + default
+            image tag) and per-agent <strong>overlays</strong>; skills are shared
+            by reference. Compose is deterministic, last-writer-wins per path
+            (overlay &gt; skills &gt; template), and produces a
+            <code>{path → bytes}</code> bundle. Preview is local — no deploy. The
+            provider drivers that land a bundle on a runtime are a later slice.
+          </p>
+        </div>
         <div id="config" class="pane config" hidden>
           <form id="config-form" class="config-form" autocomplete="off">
             <label
diff --git a/console/src/compose.test.ts b/console/src/compose.test.ts
new file mode 100644
index 0000000..fde8570
--- /dev/null
+++ b/console/src/compose.test.ts
@@ -0,0 +1,65 @@
+import { describe, it, expect } from "vitest";
+import { renderPreviewHtml, libraryNames, type BundlePreview, type Library } from "./compose";
+
+const PREVIEW: BundlePreview = {
+  image_tag: "ghcr.io/openabdev/openab:0.9.0-claude",
+  digest: "sha256:abc123",
+  files: [
+    { path: ".claude/skills/memory/SKILL.md", text: "# memory\n", bytes: 9, binary: false },
+    { path: "CLAUDE.md", text: "# persona\n", bytes: 10, binary: false },
+  ],
+};
+
+describe("renderPreviewHtml", () => {
+  it("shows the image tag, digest and file count", () => {
+    const html = renderPreviewHtml(PREVIEW);
+    expect(html).toContain("ghcr.io/openabdev/openab:0.9.0-claude");
+    expect(html).toContain("sha256:abc123");
+    // file count
+    expect(html).toContain("files</span> 2");
+  });
+
+  it("lists each file path with its content", () => {
+    const html = renderPreviewHtml(PREVIEW);
+    expect(html).toContain(".claude/skills/memory/SKILL.md");
+    expect(html).toContain("CLAUDE.md");
+    expect(html).toContain("# persona\n");
+  });
+
+  it("escapes HTML in paths and content (no injection)", () => {
+    const html = renderPreviewHtml({
+      image_tag: "img",
+      digest: "sha256:x",
+      files: [{ path: "<evil>.md", text: "<script>alert(1)</script>", bytes: 5, binary: false }],
+    });
+    expect(html).not.toContain("<script>alert(1)</script>");
+    expect(html).toContain("&lt;script&gt;");
+    expect(html).toContain("&lt;evil&gt;.md");
+  });
+
+  it("does not dump content for a binary file", () => {
+    const html = renderPreviewHtml({
+      image_tag: "img",
+      digest: "sha256:x",
+      files: [{ path: "blob", text: "�", bytes: 3, binary: true }],
+    });
+    expect(html).toContain("binary");
+    expect(html).toContain("not shown");
+  });
+});
+
+describe("libraryNames", () => {
+  it("returns sorted template and overlay names", () => {
+    const lib: Library = {
+      templates: { zeta: {} as never, alpha: {} as never },
+      overlays: { orca: {} as never },
+      skills: { skills: {} },
+    };
+    expect(libraryNames(lib)).toEqual({ templates: ["alpha", "zeta"], overlays: ["orca"] });
+  });
+
+  it("tolerates missing maps", () => {
+    const lib = { skills: { skills: {} } } as unknown as Library;
+    expect(libraryNames(lib)).toEqual({ templates: [], overlays: [] });
+  });
+});
diff --git a/console/src/compose.ts b/console/src/compose.ts
new file mode 100644
index 0000000..7b6b1fd
--- /dev/null
+++ b/console/src/compose.ts
@@ -0,0 +1,211 @@
+// Compose tab: author the template/overlay/skills library and preview the
+// composed `{path → bytes}` agent bundle (agent-deployment ADR, slice 1).
+//
+// The library is edited as one JSON document (same "edit the config text, save,
+// reload" idiom as fleets.toml / remote.toml) and the preview is rendered
+// read-only. Everything real runs through the backend: the library is persisted
+// by `compose_library_set`, and the preview is composed by `compose_preview`
+// (the pure Rust `studio-compose` seam) — so the browser build, which has no
+// backend, disables the panel rather than re-implementing compose in TS.
+//
+// These types mirror `studio_compose`'s serde shapes 1:1.
+
+export interface Template {
+  name: string;
+  image_tag: string;
+  files: Record<string, string>;
+  skills: string[];
+}
+export interface Overlay {
+  name: string;
+  image_tag?: string | null;
+  files: Record<string, string>;
+  skills: string[];
+}
+export interface Skill {
+  files: Record<string, string>;
+}
+export interface SkillsLibrary {
+  skills: Record<string, Skill>;
+}
+export interface Library {
+  templates: Record<string, Template>;
+  overlays: Record<string, Overlay>;
+  skills: SkillsLibrary;
+}
+export interface FilePreview {
+  path: string;
+  text: string;
+  bytes: number;
+  binary: boolean;
+}
+export interface BundlePreview {
+  image_tag: string;
+  digest: string;
+  files: FilePreview[];
+}
+
+type Invoke = <T>(cmd: string, args?: Record<string, unknown>) => Promise<T>;
+
+function tauriInvoke(): Invoke | null {
+  const t = (globalThis as { __TAURI__?: { core?: { invoke?: Invoke } } }).__TAURI__;
+  return t?.core?.invoke ?? null;
+}
+
+// Tauri command rejections arrive as plain strings, not Error objects.
+function errText(e: unknown): string {
+  return e instanceof Error ? e.message : String(e);
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+/** Render the composed-bundle preview to HTML — a pure view (unit-tested). */
+export function renderPreviewHtml(preview: BundlePreview): string {
+  const rows = preview.files
+    .map((f) => {
+      const meta = f.binary ? `${f.bytes} bytes · binary` : `${f.bytes} bytes`;
+      const body = f.binary
+        ? `<pre class="compose-file-body compose-file-binary">(binary — ${f.bytes} bytes, not shown)</pre>`
+        : `<pre class="compose-file-body">${escapeHtml(f.text)}</pre>`;
+      return (
+        `<details class="compose-file">` +
+        `<summary><code>${escapeHtml(f.path)}</code><span class="compose-file-meta">${escapeHtml(meta)}</span></summary>` +
+        body +
+        `</details>`
+      );
+    })
+    .join("");
+  const count = preview.files.length;
+  return (
+    `<div class="compose-bundle-head">` +
+    `<div><span class="compose-k">image</span> <code>${escapeHtml(preview.image_tag)}</code></div>` +
+    `<div><span class="compose-k">digest</span> <code>${escapeHtml(preview.digest)}</code></div>` +
+    `<div><span class="compose-k">files</span> ${count}</div>` +
+    `</div>` +
+    `<div class="compose-files">${rows}</div>`
+  );
+}
+
+/** Names present in the parsed library, sorted — drives the picker `<option>`s. */
+export function libraryNames(lib: Library): { templates: string[]; overlays: string[] } {
+  const keys = (o: Record<string, unknown> | undefined): string[] =>
+    o ? Object.keys(o).sort() : [];
+  return { templates: keys(lib.templates), overlays: keys(lib.overlays) };
+}
+
+function fillOptions(sel: HTMLSelectElement, names: string[], keepNoneFirst: boolean): void {
+  const prev = sel.value;
+  const opts = keepNoneFirst ? ['<option value="">— none (bare template) —</option>'] : [];
+  for (const n of names) opts.push(`<option value="${escapeHtml(n)}">${escapeHtml(n)}</option>`);
+  sel.innerHTML = opts.join("");
+  // Preserve the operator's selection across a repopulate if it still exists.
+  if ([...sel.options].some((o) => o.value === prev)) sel.value = prev;
+}
+
+export function initComposeTab(): void {
+  const text = document.getElementById("compose-lib-text") as HTMLTextAreaElement | null;
+  const tmplSel = document.getElementById("compose-template") as HTMLSelectElement | null;
+  const ovlSel = document.getElementById("compose-overlay") as HTMLSelectElement | null;
+  const form = document.getElementById("compose-form") as HTMLFormElement | null;
+  const saveBtn = document.getElementById("compose-save") as HTMLButtonElement | null;
+  const out = document.getElementById("compose-preview");
+  const statusEl = document.getElementById("compose-status");
+  if (!text || !tmplSel || !ovlSel || !form) return;
+
+  const setStatus = (msg: string, cls = ""): void => {
+    if (statusEl) {
+      statusEl.textContent = msg;
+      statusEl.className = cls ? `compose-status ${cls}` : "compose-status";
+    }
+  };
+
+  const invoke = tauriInvoke();
+  if (!invoke) {
+    setStatus("browser build — compose unavailable");
+    text.disabled = true;
+    tmplSel.disabled = true;
+    ovlSel.disabled = true;
+    for (const b of form.querySelectorAll("button")) b.disabled = true;
+    if (saveBtn) saveBtn.disabled = true;
+    return;
+  }
+
+  // Best-effort: parse the editor text and refresh the pickers so newly authored
+  // templates/overlays are selectable before a save. Silent on parse error — the
+  // Preview/Save buttons surface it with a real message.
+  const syncPickers = (): void => {
+    try {
+      const lib = JSON.parse(text.value) as Library;
+      const { templates, overlays } = libraryNames(lib);
+      fillOptions(tmplSel, templates, false);
+      fillOptions(ovlSel, overlays, true);
+    } catch {
+      /* leave pickers as-is until the JSON is valid */
+    }
+  };
+
+  const parseLibrary = (): Library => JSON.parse(text.value) as Library;
+
+  invoke<Library>("compose_library_get")
+    .then((lib) => {
+      text.value = JSON.stringify(lib, null, 2);
+      syncPickers();
+    })
+    .catch((e) => setStatus(`load failed: ${errText(e)}`, "err"));
+
+  text.addEventListener("input", syncPickers);
+
+  saveBtn?.addEventListener("click", async () => {
+    let lib: Library;
+    try {
+      lib = parseLibrary();
+    } catch (e) {
+      setStatus(`invalid JSON: ${errText(e)}`, "err");
+      return;
+    }
+    saveBtn.disabled = true;
+    setStatus("saving…");
+    try {
+      const saved = await invoke<Library>("compose_library_set", { library: lib });
+      text.value = JSON.stringify(saved, null, 2);
+      syncPickers();
+      setStatus("saved", "ok");
+    } catch (e) {
+      setStatus(`save failed: ${errText(e)}`, "err");
+    } finally {
+      saveBtn.disabled = false;
+    }
+  });
+
+  form.addEventListener("submit", async (ev) => {
+    ev.preventDefault();
+    let lib: Library;
+    try {
+      lib = parseLibrary();
+    } catch (e) {
+      setStatus(`invalid JSON: ${errText(e)}`, "err");
+      return;
+    }
+    const template = tmplSel.value;
+    if (!template) {
+      setStatus("pick a template to preview", "err");
+      return;
+    }
+    const overlay = ovlSel.value || null;
+    setStatus("composing…");
+    try {
+      const preview = await invoke<BundlePreview>("compose_preview", { library: lib, template, overlay });
+      if (out) out.innerHTML = renderPreviewHtml(preview);
+      setStatus(`composed — ${preview.files.length} files`, "ok");
+    } catch (e) {
+      if (out) out.innerHTML = "";
+      setStatus(`compose failed: ${errText(e)}`, "err");
+    }
+  });
+}
diff --git a/console/src/main.ts b/console/src/main.ts
index d3c8e3e..8847741 100644
--- a/console/src/main.ts
+++ b/console/src/main.ts
@@ -1,5 +1,6 @@
 import { defaultSource } from "./source";
 import { initConfigTab } from "./config";
+import { initComposeTab } from "./compose";
 import {
   renderRoster,
   renderIdentity,
@@ -754,6 +755,9 @@ async function boot(): Promise<void> {
   // Config tab: pin the oab-mcp target (cluster/profile/region → hermetic env);
   // on save the backend reloads the core, so refresh the roster after.
   initConfigTab({ onSaved: () => void tick() });
+  // Compose tab: author the template/overlay/skills library + preview the
+  // composed bundle (agent-deployment ADR, slice 1). Self-contained; no polling.
+  initComposeTab();
   void refreshConfig();
   void refreshIdentity();
   void refreshRemote();
diff --git a/console/src/styles.css b/console/src/styles.css
index 5cdedfa..26705ff 100644
--- a/console/src/styles.css
+++ b/console/src/styles.css
@@ -870,3 +870,136 @@ button.act:disabled {
   line-height: 1.5;
   color: var(--muted);
 }
+
+/* Compose tab (agent-deployment ADR, slice 1): library editor + bundle preview. */
+.pane.compose {
+  padding: 16px;
+  overflow: auto;
+}
+.compose-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 16px;
+}
+.compose-lib-head,
+.compose-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.compose-lib-head {
+  margin-bottom: 6px;
+}
+.compose-spacer {
+  flex: 1;
+}
+.compose-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+}
+.compose-lib-path {
+  font-size: 11px;
+  color: var(--muted);
+}
+.compose-lib-text {
+  width: 100%;
+  min-height: 360px;
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  resize: vertical;
+}
+.compose-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+.compose-form label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--muted);
+}
+.compose-select {
+  padding: 6px 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--text);
+  font: inherit;
+}
+.compose-actions button {
+  padding: 6px 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--panel);
+  color: var(--text);
+  cursor: pointer;
+}
+.compose-status {
+  font-size: 12px;
+  color: var(--muted);
+}
+.compose-status.ok {
+  color: var(--ok);
+}
+.compose-status.err {
+  color: var(--s-unhealthy);
+}
+.compose-bundle-head {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 10px;
+  margin-bottom: 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--panel);
+  font-size: 12px;
+}
+.compose-k {
+  display: inline-block;
+  width: 52px;
+  color: var(--muted);
+}
+.compose-file {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  margin-bottom: 6px;
+  background: var(--bg);
+}
+.compose-file summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  cursor: pointer;
+  font-size: 12px;
+}
+.compose-file-meta {
+  color: var(--muted);
+  font-size: 11px;
+}
+.compose-file-body {
+  margin: 0;
+  padding: 8px 10px;
+  border-top: 1px solid var(--border);
+  overflow: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.compose-file-binary {
+  color: var(--muted);
+  font-style: italic;
+}
diff --git a/crates/studio-compose/Cargo.toml b/crates/studio-compose/Cargo.toml
new file mode 100644
index 0000000..74d1c80
--- /dev/null
+++ b/crates/studio-compose/Cargo.toml
@@ -0,0 +1,15 @@
+[package]
+name = "studio-compose"
+version = "0.1.0"
+edition = "2021"
+description = "Studio bundle composition — template ⊕ overlay + skills-by-reference → a deterministic {path → bytes} agent bundle (ADR: agent deployment)"
+license = "MIT"
+
+# Deliberately dependency-light and **pure**: no async, no AWS, no filesystem. This
+# is the compose seam of the deployment ADR (slice 1) — everything here is unit
+# testable with `cargo test` alone. The provider drivers (slice 2+: S3/ConfigMap)
+# consume a `Bundle` but live elsewhere.
+[dependencies]
+serde = { version = "1.0", features = ["derive"] }
+serde_json = "1"
+sha2 = "0.10"
diff --git a/crates/studio-compose/src/lib.rs b/crates/studio-compose/src/lib.rs
new file mode 100644
index 0000000..fcc6299
--- /dev/null
+++ b/crates/studio-compose/src/lib.rs
@@ -0,0 +1,638 @@
+//! Bundle composition — the **compose** seam of the agent-deployment ADR (slice 1).
+//!
+//! An agent's identity is **plain files** ([`Bundle`]): `config.toml`, persona
+//! (`CLAUDE.md`, `agent_profiling/…`), and skills (`.claude/skills/…`). Nothing
+//! here compiles or touches a runtime — this crate turns an authored
+//! **[`Template`] ⊕ [`Overlay`]** (plus a shared [`SkillsLibrary`]) into one
+//! deterministic `{path → bytes}` bundle + an image tag. The provider drivers
+//! (slice 2+: push to S3 state / ConfigMap) consume a [`Bundle`]; they are the
+//! only layer that knows the carrier. Keeping compose pure is what lets the whole
+//! slice be verified with `cargo test` — no AWS, no bundle-macos.
+//!
+//! ## Layers & precedence (last-writer-wins per path)
+//!
+//! Later layers overwrite earlier ones at the same path — the "Helm chart +
+//! values" model the ADR calls for:
+//!
+//! 1. **template files** — the golden base bundle.
+//! 2. **skills**, resolved by reference from the library into
+//!    `.claude/skills/<name>/…`. Template-referenced skills first, then
+//!    overlay-referenced ones (an overlay re-reference is a no-op — same files).
+//! 3. **overlay files** — the per-agent specifics, highest precedence.
+//!
+//! The image tag is `overlay.image_tag`, falling back to `template.image_tag`.
+//!
+//! ## Text in, bytes out
+//!
+//! Authored inputs are UTF-8 text (config/persona/skills all are), so the editor
+//! surface stays simple; the composed [`Bundle`] holds `Vec<u8>` because the ADR's
+//! transport contract is `{path → bytes}` and the drivers write raw bytes. Binary
+//! authored assets are out of scope for this slice.
+
+use std::collections::BTreeMap;
+use std::fmt;
+
+use serde::{Deserialize, Serialize};
+use sha2::{Digest, Sha256};
+
+/// Directory prefix a referenced skill's files are placed under in the bundle.
+/// A skill named `foo` with file `SKILL.md` lands at `.claude/skills/foo/SKILL.md`.
+const SKILLS_PREFIX: &str = ".claude/skills";
+
+/// A reusable base bundle — the "golden bundle" an operator authors once and
+/// reuses across agents. `BTreeMap` keeps files ordered so composition (and the
+/// resulting digest) is deterministic regardless of insert order.
+#[derive(Clone, Debug, Default, PartialEq, Eq, Serialize, Deserialize)]
+pub struct Template {
+    pub name: String,
+    /// Default image tag for agents built from this template. May be overridden
+    /// per agent by [`Overlay::image_tag`].
+    #[serde(default)]
+    pub image_tag: String,
+    /// Base files keyed by bundle-relative path (e.g. `config.toml`, `CLAUDE.md`).
+    #[serde(default)]
+    pub files: BTreeMap<String, String>,
+    /// Skills pulled from the shared library by name (attached by reference).
+    #[serde(default)]
+    pub skills: Vec<String>,
+}
+
+/// Per-agent specifics layered on a template. Everything is optional: an empty
+/// overlay composes to exactly the template.
+#[derive(Clone, Debug, Default, PartialEq, Eq, Serialize, Deserialize)]
+pub struct Overlay {
+    pub name: String,
+    /// Overrides the template's default image tag when set + non-empty.
+    #[serde(default)]
+    pub image_tag: Option<String>,
+    /// Per-agent files; override template/skill files at the same path.
+    #[serde(default)]
+    pub files: BTreeMap<String, String>,
+    /// Extra skills attached to this agent, by reference.
+    #[serde(default)]
+    pub skills: Vec<String>,
+}
+
+/// A single reusable skill: the files that live under its
+/// `.claude/skills/<name>/` directory in a composed bundle.
+#[derive(Clone, Debug, Default, PartialEq, Eq, Serialize, Deserialize)]
+pub struct Skill {
+    /// Files keyed by path **relative to the skill's own directory** (e.g.
+    /// `SKILL.md`, `scripts/run.sh`) — never an absolute or `.claude/…` path.
+    #[serde(default)]
+    pub files: BTreeMap<String, String>,
+}
+
+/// The shared, author-once skills library referenced from templates/overlays.
+#[derive(Clone, Debug, Default, PartialEq, Eq, Serialize, Deserialize)]
+pub struct SkillsLibrary {
+    #[serde(default)]
+    pub skills: BTreeMap<String, Skill>,
+}
+
+impl SkillsLibrary {
+    /// Build a library from `(name, skill)` pairs — convenience for callers/tests.
+    pub fn from_iter<I, N>(it: I) -> Self
+    where
+        I: IntoIterator<Item = (N, Skill)>,
+        N: Into<String>,
+    {
+        SkillsLibrary {
+            skills: it.into_iter().map(|(n, s)| (n.into(), s)).collect(),
+        }
+    }
+}
+
+/// The composed, deterministic result: one image tag + a `{path → bytes}` file
+/// map, ready for a provider driver to land on a runtime's file carrier.
+#[derive(Clone, Debug, PartialEq, Eq)]
+pub struct Bundle {
+    pub image_tag: String,
+    /// Sorted (`BTreeMap`) so iteration order — and thus [`Bundle::digest`] — is
+    /// stable across composes of equal inputs.
+    pub files: BTreeMap<String, Vec<u8>>,
+}
+
+impl Bundle {
+    /// Bundle-relative paths, sorted.
+    pub fn paths(&self) -> impl Iterator<Item = &str> {
+        self.files.keys().map(String::as_str)
+    }
+
+    /// A content-address for the bundle: `sha256:<hex>` over the image tag and
+    /// every `(path, bytes)` in sorted order, length-prefixed so no
+    /// concatenation collision is possible. This is the stable identity the
+    /// desired-state record (slice 2 / fleet-store #18) keys on: equal inputs →
+    /// equal digest, and any change to a path or a byte changes it.
+    pub fn digest(&self) -> String {
+        let mut h = Sha256::new();
+        // Domain-separate + length-prefix every field so distinct structures can't
+        // hash to the same stream (e.g. tag "ab"+path "c" vs tag "a"+path "bc").
+        h.update((self.image_tag.len() as u64).to_le_bytes());
+        h.update(self.image_tag.as_bytes());
+        h.update((self.files.len() as u64).to_le_bytes());
+        for (path, bytes) in &self.files {
+            h.update((path.len() as u64).to_le_bytes());
+            h.update(path.as_bytes());
+            h.update((bytes.len() as u64).to_le_bytes());
+            h.update(bytes);
+        }
+        format!("sha256:{:x}", h.finalize())
+    }
+}
+
+/// A UTF-8-lossy, serde-friendly view of one bundle file for the preview UI.
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
+pub struct FilePreview {
+    pub path: String,
+    /// Content decoded as UTF-8 (lossy). Authored files are always valid UTF-8;
+    /// `binary` flags the rare case a byte sequence wasn't, so the UI can say so
+    /// instead of showing replacement characters as if they were real content.
+    pub text: String,
+    pub bytes: usize,
+    pub binary: bool,
+}
+
+/// Everything the compose-preview panel renders without holding raw bytes.
+#[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
+pub struct BundlePreview {
+    pub image_tag: String,
+    pub digest: String,
+    pub files: Vec<FilePreview>,
+}
+
+impl Bundle {
+    /// A serde-friendly, text-oriented view for the UI — paths in sorted order,
+    /// content decoded UTF-8-lossy, plus the image tag and digest.
+    pub fn preview(&self) -> BundlePreview {
+        let files = self
+            .files
+            .iter()
+            .map(|(path, bytes)| {
+                let text = String::from_utf8_lossy(bytes);
+                FilePreview {
+                    path: path.clone(),
+                    binary: text.as_bytes() != bytes.as_slice(),
+                    bytes: bytes.len(),
+                    text: text.into_owned(),
+                }
+            })
+            .collect();
+        BundlePreview {
+            image_tag: self.image_tag.clone(),
+            digest: self.digest(),
+            files,
+        }
+    }
+}
+
+/// The authored library the operator edits in Studio: named templates + overlays
+/// over a shared skills library. Persisted as one JSON document (like Studio's
+/// other in-app config surfaces) and the input to [`compose_named`].
+#[derive(Clone, Debug, Default, PartialEq, Eq, Serialize, Deserialize)]
+pub struct Library {
+    #[serde(default)]
+    pub templates: BTreeMap<String, Template>,
+    #[serde(default)]
+    pub overlays: BTreeMap<String, Overlay>,
+    #[serde(default)]
+    pub skills: SkillsLibrary,
+}
+
+/// Compose a named `template ⊕ overlay` out of a [`Library`]. `overlay` is
+/// optional — `None` composes the bare template (empty overlay).
+pub fn compose_named(
+    library: &Library,
+    template: &str,
+    overlay: Option<&str>,
+) -> Result<Bundle, ComposeError> {
+    let tmpl = library
+        .templates
+        .get(template)
+        .ok_or_else(|| ComposeError::UnknownTemplate {
+            template: template.to_string(),
+        })?;
+    let empty;
+    let ovl = match overlay {
+        Some(name) => library
+            .overlays
+            .get(name)
+            .ok_or_else(|| ComposeError::UnknownOverlay {
+                overlay: name.to_string(),
+            })?,
+        None => {
+            empty = Overlay::default();
+            &empty
+        }
+    };
+    compose(tmpl, ovl, &library.skills)
+}
+
+/// Why a compose failed. Compose is total apart from these authoring mistakes.
+#[derive(Clone, Debug, PartialEq, Eq)]
+pub enum ComposeError {
+    /// [`compose_named`] was given a template name absent from the library.
+    UnknownTemplate { template: String },
+    /// [`compose_named`] was given an overlay name absent from the library.
+    UnknownOverlay { overlay: String },
+    /// A template/overlay referenced a skill name absent from the library.
+    /// `referenced_by` records where, to point the operator at the right layer.
+    UnknownSkill {
+        skill: String,
+        referenced_by: SkillRef,
+    },
+    /// Neither the overlay nor the template supplied a non-empty image tag — the
+    /// composed agent has nothing to run.
+    MissingImageTag,
+}
+
+/// Which layer referenced a skill — for actionable [`ComposeError::UnknownSkill`].
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub enum SkillRef {
+    Template,
+    Overlay,
+}
+
+impl fmt::Display for ComposeError {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            ComposeError::UnknownTemplate { template } => {
+                write!(f, "no template named \"{template}\" in the library")
+            }
+            ComposeError::UnknownOverlay { overlay } => {
+                write!(f, "no overlay named \"{overlay}\" in the library")
+            }
+            ComposeError::UnknownSkill {
+                skill,
+                referenced_by,
+            } => {
+                let layer = match referenced_by {
+                    SkillRef::Template => "template",
+                    SkillRef::Overlay => "overlay",
+                };
+                write!(
+                    f,
+                    "{layer} references skill \"{skill}\" which is not in the skills library"
+                )
+            }
+            ComposeError::MissingImageTag => write!(
+                f,
+                "no image tag: neither the overlay nor the template set a non-empty image_tag"
+            ),
+        }
+    }
+}
+
+impl std::error::Error for ComposeError {}
+
+/// Compose a concrete agent bundle from `template ⊕ overlay`, resolving skills by
+/// reference from `library`. Deterministic and pure; see the module docs for the
+/// precedence order.
+pub fn compose(
+    template: &Template,
+    overlay: &Overlay,
+    library: &SkillsLibrary,
+) -> Result<Bundle, ComposeError> {
+    // Image tag: overlay override (if non-empty) wins, else the template default.
+    let image_tag = overlay
+        .image_tag
+        .as_deref()
+        .filter(|s| !s.is_empty())
+        .unwrap_or(template.image_tag.as_str())
+        .to_string();
+    if image_tag.is_empty() {
+        return Err(ComposeError::MissingImageTag);
+    }
+
+    let mut files: BTreeMap<String, Vec<u8>> = BTreeMap::new();
+
+    // Layer 1: template base files.
+    for (path, content) in &template.files {
+        files.insert(path.clone(), content.clone().into_bytes());
+    }
+
+    // Layer 2: skills by reference. Template-referenced first, then overlay's, so
+    // an overlay that re-lists a template skill is a harmless no-op (identical
+    // files) and a genuinely new skill layers on top. Unknown names are errors,
+    // attributed to the layer that referenced them.
+    for skill in &template.skills {
+        resolve_skill(skill, SkillRef::Template, library, &mut files)?;
+    }
+    for skill in &overlay.skills {
+        resolve_skill(skill, SkillRef::Overlay, library, &mut files)?;
+    }
+
+    // Layer 3: overlay files — highest precedence, override anything above.
+    for (path, content) in &overlay.files {
+        files.insert(path.clone(), content.clone().into_bytes());
+    }
+
+    Ok(Bundle { image_tag, files })
+}
+
+/// Expand one referenced skill's files under `.claude/skills/<name>/…` into the
+/// accumulating bundle (last-writer-wins, like every other layer).
+fn resolve_skill(
+    name: &str,
+    referenced_by: SkillRef,
+    library: &SkillsLibrary,
+    files: &mut BTreeMap<String, Vec<u8>>,
+) -> Result<(), ComposeError> {
+    let skill = library
+        .skills
+        .get(name)
+        .ok_or_else(|| ComposeError::UnknownSkill {
+            skill: name.to_string(),
+            referenced_by,
+        })?;
+    for (rel, content) in &skill.files {
+        let path = format!("{SKILLS_PREFIX}/{name}/{rel}");
+        files.insert(path, content.clone().into_bytes());
+    }
+    Ok(())
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn tmpl() -> Template {
+        Template {
+            name: "base".into(),
+            image_tag: "ghcr.io/openabdev/openab:0.9.0-claude".into(),
+            files: BTreeMap::from([
+                ("config.toml".into(), "[agent]\nname = \"base\"\n".into()),
+                ("CLAUDE.md".into(), "# base persona\n".into()),
+            ]),
+            skills: vec![],
+        }
+    }
+
+    fn skill_with(files: &[(&str, &str)]) -> Skill {
+        Skill {
+            files: files
+                .iter()
+                .map(|(k, v)| (k.to_string(), v.to_string()))
+                .collect(),
+        }
+    }
+
+    #[test]
+    fn empty_overlay_composes_to_template() {
+        let b = compose(&tmpl(), &Overlay::default(), &SkillsLibrary::default()).unwrap();
+        assert_eq!(b.image_tag, "ghcr.io/openabdev/openab:0.9.0-claude");
+        assert_eq!(
+            b.paths().collect::<Vec<_>>(),
+            vec!["CLAUDE.md", "config.toml"]
+        );
+        assert_eq!(b.files["CLAUDE.md"], b"# base persona\n");
+    }
+
+    #[test]
+    fn overlay_file_overrides_template_last_writer_wins() {
+        let overlay = Overlay {
+            name: "orca".into(),
+            files: BTreeMap::from([("CLAUDE.md".into(), "# orca persona\n".into())]),
+            ..Default::default()
+        };
+        let b = compose(&tmpl(), &overlay, &SkillsLibrary::default()).unwrap();
+        assert_eq!(b.files["CLAUDE.md"], b"# orca persona\n");
+        // untouched template file survives
+        assert_eq!(b.files["config.toml"], b"[agent]\nname = \"base\"\n");
+    }
+
+    #[test]
+    fn overlay_image_tag_overrides_template() {
+        let overlay = Overlay {
+            image_tag: Some("ghcr.io/openabdev/openab:edge".into()),
+            ..Default::default()
+        };
+        let b = compose(&tmpl(), &overlay, &SkillsLibrary::default()).unwrap();
+        assert_eq!(b.image_tag, "ghcr.io/openabdev/openab:edge");
+    }
+
+    #[test]
+    fn empty_overlay_image_tag_falls_back_to_template() {
+        let overlay = Overlay {
+            image_tag: Some(String::new()),
+            ..Default::default()
+        };
+        let b = compose(&tmpl(), &overlay, &SkillsLibrary::default()).unwrap();
+        assert_eq!(b.image_tag, "ghcr.io/openabdev/openab:0.9.0-claude");
+    }
+
+    #[test]
+    fn skills_resolve_by_reference_under_prefix() {
+        let lib = SkillsLibrary::from_iter([(
+            "memory",
+            skill_with(&[("SKILL.md", "# memory\n"), ("scripts/run.sh", "echo hi\n")]),
+        )]);
+        let mut t = tmpl();
+        t.skills = vec!["memory".into()];
+        let b = compose(&t, &Overlay::default(), &lib).unwrap();
+        assert_eq!(b.files[".claude/skills/memory/SKILL.md"], b"# memory\n");
+        assert_eq!(
+            b.files[".claude/skills/memory/scripts/run.sh"],
+            b"echo hi\n"
+        );
+        // base files still present alongside the skill
+        assert!(b.files.contains_key("config.toml"));
+    }
+
+    #[test]
+    fn overlay_skills_add_to_template_skills() {
+        let lib = SkillsLibrary::from_iter([
+            ("a", skill_with(&[("SKILL.md", "a\n")])),
+            ("b", skill_with(&[("SKILL.md", "b\n")])),
+        ]);
+        let mut t = tmpl();
+        t.skills = vec!["a".into()];
+        let overlay = Overlay {
+            skills: vec!["b".into()],
+            ..Default::default()
+        };
+        let b = compose(&t, &overlay, &lib).unwrap();
+        assert_eq!(b.files[".claude/skills/a/SKILL.md"], b"a\n");
+        assert_eq!(b.files[".claude/skills/b/SKILL.md"], b"b\n");
+    }
+
+    #[test]
+    fn overlay_file_overrides_skill_file() {
+        let lib = SkillsLibrary::from_iter([("s", skill_with(&[("SKILL.md", "from skill\n")]))]);
+        let mut t = tmpl();
+        t.skills = vec!["s".into()];
+        let overlay = Overlay {
+            files: BTreeMap::from([(
+                ".claude/skills/s/SKILL.md".into(),
+                "from overlay\n".into(),
+            )]),
+            ..Default::default()
+        };
+        let b = compose(&t, &overlay, &lib).unwrap();
+        assert_eq!(b.files[".claude/skills/s/SKILL.md"], b"from overlay\n");
+    }
+
+    #[test]
+    fn unknown_template_skill_errors_attributed_to_template() {
+        let mut t = tmpl();
+        t.skills = vec!["nope".into()];
+        let err = compose(&t, &Overlay::default(), &SkillsLibrary::default()).unwrap_err();
+        assert_eq!(
+            err,
+            ComposeError::UnknownSkill {
+                skill: "nope".into(),
+                referenced_by: SkillRef::Template,
+            }
+        );
+        assert!(err.to_string().contains("template references skill \"nope\""));
+    }
+
+    #[test]
+    fn unknown_overlay_skill_errors_attributed_to_overlay() {
+        let overlay = Overlay {
+            skills: vec!["ghost".into()],
+            ..Default::default()
+        };
+        let err = compose(&tmpl(), &overlay, &SkillsLibrary::default()).unwrap_err();
+        assert_eq!(
+            err,
+            ComposeError::UnknownSkill {
+                skill: "ghost".into(),
+                referenced_by: SkillRef::Overlay,
+            }
+        );
+    }
+
+    #[test]
+    fn missing_image_tag_errors() {
+        let t = Template {
+            name: "n".into(),
+            image_tag: String::new(),
+            ..Default::default()
+        };
+        let err = compose(&t, &Overlay::default(), &SkillsLibrary::default()).unwrap_err();
+        assert_eq!(err, ComposeError::MissingImageTag);
+    }
+
+    #[test]
+    fn digest_is_stable_and_order_independent() {
+        // Two templates with the same files inserted in different orders must
+        // produce byte-identical bundles and digests (BTreeMap canonicalises).
+        let a = Template {
+            name: "a".into(),
+            image_tag: "t".into(),
+            files: BTreeMap::from([("x".into(), "1".into()), ("y".into(), "2".into())]),
+            skills: vec![],
+        };
+        let mut b_files = BTreeMap::new();
+        b_files.insert("y".to_string(), "2".to_string());
+        b_files.insert("x".to_string(), "1".to_string());
+        let b = Template {
+            name: "b".into(),
+            image_tag: "t".into(),
+            files: b_files,
+            skills: vec![],
+        };
+        let ba = compose(&a, &Overlay::default(), &SkillsLibrary::default()).unwrap();
+        let bb = compose(&b, &Overlay::default(), &SkillsLibrary::default()).unwrap();
+        assert_eq!(ba.digest(), bb.digest());
+        assert!(ba.digest().starts_with("sha256:"));
+    }
+
+    #[test]
+    fn digest_changes_when_a_byte_changes() {
+        let base = compose(&tmpl(), &Overlay::default(), &SkillsLibrary::default()).unwrap();
+        let mut t = tmpl();
+        t.files.insert("config.toml".into(), "[agent]\nname = \"x\"\n".into());
+        let changed = compose(&t, &Overlay::default(), &SkillsLibrary::default()).unwrap();
+        assert_ne!(base.digest(), changed.digest());
+    }
+
+    #[test]
+    fn digest_no_field_boundary_collision() {
+        // image_tag "ab" + path "c" must not collide with image_tag "a" + path "bc".
+        let t1 = Template {
+            name: "n".into(),
+            image_tag: "ab".into(),
+            files: BTreeMap::from([("c".into(), String::new())]),
+            skills: vec![],
+        };
+        let t2 = Template {
+            name: "n".into(),
+            image_tag: "a".into(),
+            files: BTreeMap::from([("bc".into(), String::new())]),
+            skills: vec![],
+        };
+        let b1 = compose(&t1, &Overlay::default(), &SkillsLibrary::default()).unwrap();
+        let b2 = compose(&t2, &Overlay::default(), &SkillsLibrary::default()).unwrap();
+        assert_ne!(b1.digest(), b2.digest());
+    }
+
+    #[test]
+    fn compose_named_resolves_template_and_overlay() {
+        let lib = Library {
+            templates: BTreeMap::from([("base".into(), tmpl())]),
+            overlays: BTreeMap::from([(
+                "orca".into(),
+                Overlay {
+                    name: "orca".into(),
+                    files: BTreeMap::from([("CLAUDE.md".into(), "# orca\n".into())]),
+                    ..Default::default()
+                },
+            )]),
+            skills: SkillsLibrary::default(),
+        };
+        let b = compose_named(&lib, "base", Some("orca")).unwrap();
+        assert_eq!(b.files["CLAUDE.md"], b"# orca\n");
+        // None overlay composes the bare template
+        let bare = compose_named(&lib, "base", None).unwrap();
+        assert_eq!(bare.files["CLAUDE.md"], b"# base persona\n");
+    }
+
+    #[test]
+    fn compose_named_unknown_names_error() {
+        let lib = Library {
+            templates: BTreeMap::from([("base".into(), tmpl())]),
+            ..Default::default()
+        };
+        assert_eq!(
+            compose_named(&lib, "ghost", None).unwrap_err(),
+            ComposeError::UnknownTemplate {
+                template: "ghost".into()
+            }
+        );
+        assert_eq!(
+            compose_named(&lib, "base", Some("ghost")).unwrap_err(),
+            ComposeError::UnknownOverlay {
+                overlay: "ghost".into()
+            }
+        );
+    }
+
+    #[test]
+    fn preview_is_sorted_text_with_digest() {
+        let lib = SkillsLibrary::from_iter([("s", skill_with(&[("SKILL.md", "hi\n")]))]);
+        let mut t = tmpl();
+        t.skills = vec!["s".into()];
+        let p = compose(&t, &Overlay::default(), &lib).unwrap().preview();
+        assert_eq!(p.image_tag, "ghcr.io/openabdev/openab:0.9.0-claude");
+        assert!(p.digest.starts_with("sha256:"));
+        let paths: Vec<_> = p.files.iter().map(|f| f.path.as_str()).collect();
+        assert_eq!(
+            paths,
+            vec![".claude/skills/s/SKILL.md", "CLAUDE.md", "config.toml"]
+        );
+        let claude = p.files.iter().find(|f| f.path == "CLAUDE.md").unwrap();
+        assert_eq!(claude.text, "# base persona\n");
+        assert!(!claude.binary);
+    }
+
+    #[test]
+    fn round_trips_through_json() {
+        // The Tauri boundary shuttles these as JSON; make sure serde is wired.
+        let t = tmpl();
+        let s = serde_json::to_string(&t).unwrap();
+        let back: Template = serde_json::from_str(&s).unwrap();
+        assert_eq!(t, back);
+    }
+}
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index ea4ea35..ecafc78 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -32,6 +32,12 @@ tokio = { version = "1", features = ["sync", "rt", "macros", "net", "time"] }
 # session state machine + remote-connection config live in `acp-tunnel`; the WS
 # transport here dials `/acp` and relays tunnelled MCP to the sidecar `McpClient`.
 acp-tunnel = { path = "../crates/acp-tunnel" }
+
+# Bundle composition (ADR: agent deployment, slice 1): the pure `template ⊕ overlay
+# → {path → bytes}` compose seam. No AWS/runtime here — the desktop authors the
+# library + previews the composed bundle; the provider drivers (slice 2+) consume a
+# `Bundle`.
+studio-compose = { path = "../crates/studio-compose" }
 tokio-tungstenite = { version = "0.23", features = ["rustls-tls-webpki-roots"] }
 futures-util = "0.3"
 uuid = { version = "1", features = ["v4"] }
diff --git a/src-tauri/src/compose.rs b/src-tauri/src/compose.rs
new file mode 100644
index 0000000..3a5dc99
--- /dev/null
+++ b/src-tauri/src/compose.rs
@@ -0,0 +1,60 @@
+//! The **authoring + preview** side of the agent-deployment ADR (slice 1):
+//! persist the operator's template/overlay/skills [`Library`] and compose a
+//! preview of a concrete agent bundle from it.
+//!
+//! This is Studio-local and provider-neutral: composing produces a
+//! `{path → bytes}` bundle ([`studio_compose::Bundle`]) and nothing more — no S3,
+//! no ECS, no build. The provider drivers that land a bundle on a runtime's file
+//! carrier are slice 2+. Persistence mirrors `config.rs`: one JSON document under
+//! the app config dir, best-effort load (a corrupt/absent file → empty library so
+//! the panel still opens), validated write.
+
+use std::path::PathBuf;
+
+use studio_compose::{compose_named, BundlePreview, Library};
+use tauri::Manager;
+
+fn library_path<R: tauri::Runtime>(app: &tauri::AppHandle<R>) -> Result<PathBuf, String> {
+    let dir = app
+        .path()
+        .app_config_dir()
+        .map_err(|e| format!("resolve app config dir: {e}"))?;
+    Ok(dir.join("compose-library.json"))
+}
+
+/// Load the persisted library, or an empty one if absent / unreadable / corrupt.
+/// Never fails: like `config::load`, a bad file falls back rather than blocking
+/// the panel.
+pub fn load<R: tauri::Runtime>(app: &tauri::AppHandle<R>) -> Library {
+    let Ok(path) = library_path(app) else {
+        return Library::default();
+    };
+    match std::fs::read_to_string(&path) {
+        Ok(s) => serde_json::from_str(&s).unwrap_or_default(),
+        Err(_) => Library::default(),
+    }
+}
+
+/// Persist the library (creating the config dir if needed), pretty-printed so the
+/// on-disk document is diff-friendly.
+pub fn save<R: tauri::Runtime>(app: &tauri::AppHandle<R>, library: &Library) -> Result<(), String> {
+    let path = library_path(app)?;
+    if let Some(dir) = path.parent() {
+        std::fs::create_dir_all(dir).map_err(|e| format!("create config dir: {e}"))?;
+    }
+    let json = serde_json::to_string_pretty(library).map_err(|e| e.to_string())?;
+    std::fs::write(&path, json).map_err(|e| format!("write {}: {e}", path.display()))
+}
+
+/// Compose a preview of `template ⊕ overlay` from the given (possibly unsaved)
+/// library. Pure passthrough to [`compose_named`]; the compose error's `Display`
+/// is the operator-facing message (unknown template/overlay/skill, missing tag).
+pub fn preview(
+    library: &Library,
+    template: &str,
+    overlay: Option<&str>,
+) -> Result<BundlePreview, String> {
+    compose_named(library, template, overlay)
+        .map(|bundle| bundle.preview())
+        .map_err(|e| e.to_string())
+}
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index ba32a0a..95e90be 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -1,3 +1,4 @@
+mod compose;
 mod config;
 mod mcp;
 mod remote;
@@ -82,6 +83,39 @@ async fn mcp_target_set(
     }
 }
 
+// ---- Bundle composition (ADR: agent deployment, slice 1) --------------------
+
+/// The persisted template/overlay/skills library for the Compose panel to
+/// render/edit. Empty on first run (or if the file is missing/corrupt).
+#[tauri::command]
+async fn compose_library_get(app: tauri::AppHandle) -> Result<studio_compose::Library, String> {
+    Ok(compose::load(&app))
+}
+
+/// Persist the edited library and return it back (round-tripped through the same
+/// serde the preview uses, so the editor and disk agree).
+#[tauri::command]
+async fn compose_library_set(
+    app: tauri::AppHandle,
+    library: studio_compose::Library,
+) -> Result<studio_compose::Library, String> {
+    compose::save(&app, &library)?;
+    Ok(library)
+}
+
+/// Compose a preview of `template ⊕ overlay` from the (possibly unsaved) library
+/// the editor currently holds — so the operator sees the effect of edits before
+/// saving. Compose errors (unknown template/overlay/skill, missing image tag)
+/// surface to the panel.
+#[tauri::command]
+async fn compose_preview(
+    library: studio_compose::Library,
+    template: String,
+    overlay: Option<String>,
+) -> Result<studio_compose::BundlePreview, String> {
+    compose::preview(&library, &template, overlay.as_deref())
+}
+
 /// List services (`deploy_list`) then fetch each one's per-instance 6-state
 /// (`deploy_get`), all over MCP — the two-step the in-process bridge used,
 /// now over the wire. Console view-model shape is unchanged.
@@ -398,6 +432,9 @@ pub fn run() {
             start_core,
             mcp_target_get,
             mcp_target_set,
+            compose_library_get,
+            compose_library_set,
+            compose_preview,
             deploy_list,
             runtime_context,
             fleet_config,