mirror of
https://github.com/harivansh-afk/sandbox-agent.git
synced 2026-04-15 05:02:11 +00:00
SDK: Add ensureServer() for automatic server recovery (#260)
* SDK sandbox provisioning: built-in providers, docs restructure, and quickstart overhaul - Add built-in sandbox providers (local, docker, e2b, daytona, vercel, cloudflare) to the TypeScript SDK so users import directly instead of passing client instances - Restructure docs: rename architecture to orchestration-architecture, add new architecture page for server overview, improve getting started flow - Rewrite quickstart to be TypeScript-first with provider CodeGroup and custom provider accordion - Update all examples to use new provider APIs - Update persist drivers and foundry for new SDK surface Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Fix SDK typecheck errors and update persist drivers for insertEvent signature - Fix insertEvent call in client.ts to pass sessionId as first argument - Update Daytona provider create options to use Partial type (image has default) - Update StrictUniqueSessionPersistDriver in tests to match new insertEvent signature - Sync persist packages, openapi spec, and docs with upstream changes Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Add Modal and ComputeSDK built-in providers, update examples and docs - Add `sandbox-agent/modal` provider using Modal SDK with node:22-slim image - Add `sandbox-agent/computesdk` provider using ComputeSDK's unified sandbox API - Update Modal and ComputeSDK examples to use new SDK providers - Update Modal and ComputeSDK deploy docs with provider-based examples - Add Modal to quickstart CodeGroup and docs.json navigation - Add provider test entries for Modal and ComputeSDK - Remove old standalone example files (modal.ts, computesdk.ts) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Fix Modal provider: pre-install agents in image, fire-and-forget exec for server - Pre-install agents in Dockerfile commands so they are cached across creates - Use fire-and-forget exec (no wait) to keep server alive in Modal sandbox - Add memoryMiB option (default 2GB) to avoid OOM during agent install Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Sync upstream changes: multiplayer docs, logos, openapi spec, foundry config Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * SDK: Add ensureServer() for automatic server recovery Add ensureServer() to SandboxProvider interface to handle cases where the sandbox-agent server stops or goes to sleep. The SDK now calls this method after 3 consecutive health-check failures, allowing providers to restart the server if needed. Most built-in providers (E2B, Daytona, Vercel, Modal, ComputeSDK) implement this. Docker and Cloudflare manage server lifecycle differently, and Local uses managed child processes. Also update docs for quickstart, architecture, multiplayer, and session persistence; mark persist-* packages as deprecated; and add ensureServer implementations to all applicable providers. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> * wip --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Nathan Flurry
GitHub
parent
3426cbc6ec
commit
cf7e2a92c6
112 changed files with 3739 additions and 3537 deletions
|
|
@ -6,10 +6,10 @@
|
|||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "SKIP_OPENAPI_GEN=1 pnpm --filter @sandbox-agent/persist-indexeddb build && pnpm --filter @sandbox-agent/react build && vite build",
|
||||
"build": "SKIP_OPENAPI_GEN=1 pnpm --filter @sandbox-agent/react build && vite build",
|
||||
"preview": "vite preview",
|
||||
"typecheck": "SKIP_OPENAPI_GEN=1 pnpm --filter @sandbox-agent/persist-indexeddb build && pnpm --filter @sandbox-agent/react build && tsc --noEmit",
|
||||
"test": "SKIP_OPENAPI_GEN=1 pnpm --filter @sandbox-agent/persist-indexeddb build && pnpm --filter @sandbox-agent/react build && vitest run"
|
||||
"typecheck": "SKIP_OPENAPI_GEN=1 pnpm --filter @sandbox-agent/react build && tsc --noEmit",
|
||||
"test": "SKIP_OPENAPI_GEN=1 pnpm --filter @sandbox-agent/react build && vitest run"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sandbox-agent/react": "workspace:*",
|
||||
|
|
@ -23,7 +23,6 @@
|
|||
"vitest": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@sandbox-agent/persist-indexeddb": "workspace:*",
|
||||
"lucide-react": "^0.469.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ type ConfigOption = {
|
|||
};
|
||||
type AgentModeInfo = { id: string; name: string; description: string };
|
||||
type AgentModelInfo = { id: string; name?: string };
|
||||
import { IndexedDbSessionPersistDriver } from "@sandbox-agent/persist-indexeddb";
|
||||
import { IndexedDbSessionPersistDriver } from "./persist-indexeddb";
|
||||
import ChatPanel from "./components/chat/ChatPanel";
|
||||
import ConnectScreen from "./components/ConnectScreen";
|
||||
import DebugPanel, { type DebugTab } from "./components/debug/DebugPanel";
|
||||
|
|
|
|||
320
frontend/packages/inspector/src/persist-indexeddb.ts
Normal file
320
frontend/packages/inspector/src/persist-indexeddb.ts
Normal file
|
|
@ -0,0 +1,320 @@
|
|||
import type { ListEventsRequest, ListPage, ListPageRequest, SessionEvent, SessionPersistDriver, SessionRecord } from "sandbox-agent";
|
||||
|
||||
const DEFAULT_DB_NAME = "sandbox-agent-session-store";
|
||||
const DEFAULT_DB_VERSION = 2;
|
||||
const SESSIONS_STORE = "sessions";
|
||||
const EVENTS_STORE = "events";
|
||||
const EVENTS_BY_SESSION_INDEX = "by_session_index";
|
||||
const DEFAULT_LIST_LIMIT = 100;
|
||||
|
||||
export interface IndexedDbSessionPersistDriverOptions {
|
||||
databaseName?: string;
|
||||
databaseVersion?: number;
|
||||
indexedDb?: IDBFactory;
|
||||
}
|
||||
|
||||
export class IndexedDbSessionPersistDriver implements SessionPersistDriver {
|
||||
private readonly indexedDb: IDBFactory;
|
||||
private readonly dbName: string;
|
||||
private readonly dbVersion: number;
|
||||
private readonly dbPromise: Promise<IDBDatabase>;
|
||||
|
||||
constructor(options: IndexedDbSessionPersistDriverOptions = {}) {
|
||||
const indexedDb = options.indexedDb ?? globalThis.indexedDB;
|
||||
if (!indexedDb) {
|
||||
throw new Error("IndexedDB is not available in this runtime.");
|
||||
}
|
||||
|
||||
this.indexedDb = indexedDb;
|
||||
this.dbName = options.databaseName ?? DEFAULT_DB_NAME;
|
||||
this.dbVersion = options.databaseVersion ?? DEFAULT_DB_VERSION;
|
||||
this.dbPromise = this.openDatabase();
|
||||
}
|
||||
|
||||
async getSession(id: string): Promise<SessionRecord | undefined> {
|
||||
const db = await this.dbPromise;
|
||||
const row = await requestToPromise<IDBValidKey | SessionRow | undefined>(db.transaction(SESSIONS_STORE, "readonly").objectStore(SESSIONS_STORE).get(id));
|
||||
if (!row || typeof row !== "object") {
|
||||
return undefined;
|
||||
}
|
||||
return decodeSessionRow(row as SessionRow);
|
||||
}
|
||||
|
||||
async listSessions(request: ListPageRequest = {}): Promise<ListPage<SessionRecord>> {
|
||||
const db = await this.dbPromise;
|
||||
const rows = await getAllRows<SessionRow>(db, SESSIONS_STORE);
|
||||
|
||||
rows.sort((a, b) => {
|
||||
if (a.createdAt !== b.createdAt) {
|
||||
return a.createdAt - b.createdAt;
|
||||
}
|
||||
return a.id.localeCompare(b.id);
|
||||
});
|
||||
|
||||
const offset = parseCursor(request.cursor);
|
||||
const limit = normalizeLimit(request.limit);
|
||||
const slice = rows.slice(offset, offset + limit).map(decodeSessionRow);
|
||||
const nextOffset = offset + slice.length;
|
||||
|
||||
return {
|
||||
items: slice,
|
||||
nextCursor: nextOffset < rows.length ? String(nextOffset) : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
async updateSession(session: SessionRecord): Promise<void> {
|
||||
const db = await this.dbPromise;
|
||||
await transactionPromise(db, [SESSIONS_STORE], "readwrite", (tx) => {
|
||||
tx.objectStore(SESSIONS_STORE).put(encodeSessionRow(session));
|
||||
});
|
||||
}
|
||||
|
||||
async listEvents(request: ListEventsRequest): Promise<ListPage<SessionEvent>> {
|
||||
const db = await this.dbPromise;
|
||||
const rows = (await getAllRows<EventRow>(db, EVENTS_STORE)).filter((row) => row.sessionId === request.sessionId).sort(compareEventRowsByOrder);
|
||||
|
||||
const offset = parseCursor(request.cursor);
|
||||
const limit = normalizeLimit(request.limit);
|
||||
const slice = rows.slice(offset, offset + limit).map(decodeEventRow);
|
||||
const nextOffset = offset + slice.length;
|
||||
|
||||
return {
|
||||
items: slice,
|
||||
nextCursor: nextOffset < rows.length ? String(nextOffset) : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
async insertEvent(_sessionId: string, event: SessionEvent): Promise<void> {
|
||||
const db = await this.dbPromise;
|
||||
await transactionPromise(db, [EVENTS_STORE], "readwrite", (tx) => {
|
||||
tx.objectStore(EVENTS_STORE).put(encodeEventRow(event));
|
||||
});
|
||||
}
|
||||
|
||||
async close(): Promise<void> {
|
||||
const db = await this.dbPromise;
|
||||
db.close();
|
||||
}
|
||||
|
||||
private openDatabase(): Promise<IDBDatabase> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const request = this.indexedDb.open(this.dbName, this.dbVersion);
|
||||
|
||||
request.onupgradeneeded = () => {
|
||||
const db = request.result;
|
||||
|
||||
if (!db.objectStoreNames.contains(SESSIONS_STORE)) {
|
||||
db.createObjectStore(SESSIONS_STORE, { keyPath: "id" });
|
||||
}
|
||||
|
||||
if (!db.objectStoreNames.contains(EVENTS_STORE)) {
|
||||
const events = db.createObjectStore(EVENTS_STORE, { keyPath: "id" });
|
||||
events.createIndex(EVENTS_BY_SESSION_INDEX, ["sessionId", "eventIndex", "id"], {
|
||||
unique: false,
|
||||
});
|
||||
} else {
|
||||
const tx = request.transaction;
|
||||
if (!tx) {
|
||||
return;
|
||||
}
|
||||
const events = tx.objectStore(EVENTS_STORE);
|
||||
if (!events.indexNames.contains(EVENTS_BY_SESSION_INDEX)) {
|
||||
events.createIndex(EVENTS_BY_SESSION_INDEX, ["sessionId", "eventIndex", "id"], {
|
||||
unique: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
request.onsuccess = () => resolve(request.result);
|
||||
request.onerror = () => reject(request.error ?? new Error("Unable to open IndexedDB"));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
type SessionRow = {
|
||||
id: string;
|
||||
agent: string;
|
||||
agentSessionId: string;
|
||||
lastConnectionId: string;
|
||||
createdAt: number;
|
||||
destroyedAt?: number;
|
||||
sandboxId?: string;
|
||||
sessionInit?: SessionRecord["sessionInit"];
|
||||
configOptions?: SessionRecord["configOptions"];
|
||||
modes?: SessionRecord["modes"];
|
||||
};
|
||||
|
||||
type EventRow = {
|
||||
id: number | string;
|
||||
eventIndex?: number;
|
||||
sessionId: string;
|
||||
createdAt: number;
|
||||
connectionId: string;
|
||||
sender: "client" | "agent";
|
||||
payload: unknown;
|
||||
};
|
||||
|
||||
function encodeSessionRow(session: SessionRecord): SessionRow {
|
||||
return {
|
||||
id: session.id,
|
||||
agent: session.agent,
|
||||
agentSessionId: session.agentSessionId,
|
||||
lastConnectionId: session.lastConnectionId,
|
||||
createdAt: session.createdAt,
|
||||
destroyedAt: session.destroyedAt,
|
||||
sandboxId: session.sandboxId,
|
||||
sessionInit: session.sessionInit,
|
||||
configOptions: session.configOptions,
|
||||
modes: session.modes,
|
||||
};
|
||||
}
|
||||
|
||||
function decodeSessionRow(row: SessionRow): SessionRecord {
|
||||
return {
|
||||
id: row.id,
|
||||
agent: row.agent,
|
||||
agentSessionId: row.agentSessionId,
|
||||
lastConnectionId: row.lastConnectionId,
|
||||
createdAt: row.createdAt,
|
||||
destroyedAt: row.destroyedAt,
|
||||
sandboxId: row.sandboxId,
|
||||
sessionInit: row.sessionInit,
|
||||
configOptions: row.configOptions,
|
||||
modes: row.modes,
|
||||
};
|
||||
}
|
||||
|
||||
function encodeEventRow(event: SessionEvent): EventRow {
|
||||
return {
|
||||
id: event.id,
|
||||
eventIndex: event.eventIndex,
|
||||
sessionId: event.sessionId,
|
||||
createdAt: event.createdAt,
|
||||
connectionId: event.connectionId,
|
||||
sender: event.sender,
|
||||
payload: event.payload,
|
||||
};
|
||||
}
|
||||
|
||||
function decodeEventRow(row: EventRow): SessionEvent {
|
||||
return {
|
||||
id: String(row.id),
|
||||
eventIndex: parseEventIndex(row.eventIndex, row.id),
|
||||
sessionId: row.sessionId,
|
||||
createdAt: row.createdAt,
|
||||
connectionId: row.connectionId,
|
||||
sender: row.sender,
|
||||
payload: row.payload as SessionEvent["payload"],
|
||||
};
|
||||
}
|
||||
|
||||
async function getAllRows<T>(db: IDBDatabase, storeName: string): Promise<T[]> {
|
||||
return await transactionPromise<T[]>(db, [storeName], "readonly", async (tx) => {
|
||||
const request = tx.objectStore(storeName).getAll();
|
||||
return (await requestToPromise(request)) as T[];
|
||||
});
|
||||
}
|
||||
|
||||
function normalizeLimit(limit: number | undefined): number {
|
||||
if (!Number.isFinite(limit) || (limit ?? 0) < 1) {
|
||||
return DEFAULT_LIST_LIMIT;
|
||||
}
|
||||
return Math.floor(limit as number);
|
||||
}
|
||||
|
||||
function parseCursor(cursor: string | undefined): number {
|
||||
if (!cursor) {
|
||||
return 0;
|
||||
}
|
||||
const parsed = Number.parseInt(cursor, 10);
|
||||
if (!Number.isFinite(parsed) || parsed < 0) {
|
||||
return 0;
|
||||
}
|
||||
return parsed;
|
||||
}
|
||||
|
||||
function compareEventRowsByOrder(a: EventRow, b: EventRow): number {
|
||||
const indexA = parseEventIndex(a.eventIndex, a.id);
|
||||
const indexB = parseEventIndex(b.eventIndex, b.id);
|
||||
if (indexA !== indexB) {
|
||||
return indexA - indexB;
|
||||
}
|
||||
return String(a.id).localeCompare(String(b.id));
|
||||
}
|
||||
|
||||
function parseEventIndex(value: number | undefined, fallback: number | string): number {
|
||||
if (typeof value === "number" && Number.isFinite(value)) {
|
||||
return Math.max(0, Math.floor(value));
|
||||
}
|
||||
|
||||
const parsed = Number.parseInt(String(fallback), 10);
|
||||
if (!Number.isFinite(parsed) || parsed < 0) {
|
||||
return 0;
|
||||
}
|
||||
return parsed;
|
||||
}
|
||||
|
||||
function requestToPromise<T>(request: IDBRequest<T>): Promise<T> {
|
||||
return new Promise((resolve, reject) => {
|
||||
request.onsuccess = () => resolve(request.result);
|
||||
request.onerror = () => reject(request.error ?? new Error("IndexedDB request failed"));
|
||||
});
|
||||
}
|
||||
|
||||
function transactionPromise<T>(db: IDBDatabase, stores: string[], mode: IDBTransactionMode, run: (tx: IDBTransaction) => T | Promise<T>): Promise<T> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const tx = db.transaction(stores, mode);
|
||||
let settled = false;
|
||||
let resultValue: T | undefined;
|
||||
let runCompleted = false;
|
||||
let txCompleted = false;
|
||||
|
||||
function tryResolve() {
|
||||
if (settled || !runCompleted || !txCompleted) {
|
||||
return;
|
||||
}
|
||||
settled = true;
|
||||
resolve(resultValue as T);
|
||||
}
|
||||
|
||||
tx.oncomplete = () => {
|
||||
txCompleted = true;
|
||||
tryResolve();
|
||||
};
|
||||
|
||||
tx.onerror = () => {
|
||||
if (settled) {
|
||||
return;
|
||||
}
|
||||
settled = true;
|
||||
reject(tx.error ?? new Error("IndexedDB transaction failed"));
|
||||
};
|
||||
|
||||
tx.onabort = () => {
|
||||
if (settled) {
|
||||
return;
|
||||
}
|
||||
settled = true;
|
||||
reject(tx.error ?? new Error("IndexedDB transaction aborted"));
|
||||
};
|
||||
|
||||
Promise.resolve(run(tx))
|
||||
.then((value) => {
|
||||
resultValue = value;
|
||||
runCompleted = true;
|
||||
tryResolve();
|
||||
})
|
||||
.catch((error) => {
|
||||
if (!settled) {
|
||||
settled = true;
|
||||
reject(error);
|
||||
}
|
||||
try {
|
||||
tx.abort();
|
||||
} catch {
|
||||
// no-op
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
3
frontend/packages/website/public/logos/cloudflare.svg
Normal file
3
frontend/packages/website/public/logos/cloudflare.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.5088 16.8447c.1475-.5068.0908-.9707-.1553-1.3154-.2246-.3164-.6045-.499-1.0615-.5205l-8.6592-.1123a.1559.1559 0 0 1-.1333-.0713c-.0283-.042-.0351-.0986-.021-.1553.0278-.084.1123-.1484.2036-.1562l8.7359-.1123c1.0351-.0489 2.1601-.8868 2.5537-1.9136l.499-1.3013c.0215-.0561.0293-.1128.0147-.168-.5625-2.5463-2.835-4.4453-5.5499-4.4453-2.5039 0-4.6284 1.6177-5.3876 3.8614-.4927-.3658-1.1187-.5625-1.794-.499-1.2026.119-2.1665 1.083-2.2861 2.2856-.0283.31-.0069.6128.0635.894C1.5683 13.171 0 14.7754 0 16.752c0 .1748.0142.3515.0352.5273.0141.083.0844.1475.1689.1475h15.9814c.0909 0 .1758-.0645.2032-.1553l.12-.4268zm2.7568-5.5634c-.0771 0-.1611 0-.2383.0112-.0566 0-.1054.0415-.127.0976l-.3378 1.1744c-.1475.5068-.0918.9707.1543 1.3164.2256.3164.6055.498 1.0625.5195l1.8437.1133c.0557 0 .1055.0263.1329.0703.0283.043.0351.1074.0214.1562-.0283.084-.1132.1485-.204.1553l-1.921.1123c-1.041.0488-2.1582.8867-2.5527 1.914l-.1406.3585c-.0283.0713.0215.1416.0986.1416h6.5977c.0771 0 .1474-.0489.169-.126.1122-.4082.1757-.837.1757-1.2803 0-2.6025-2.125-4.727-4.7344-4.727"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
3
frontend/packages/website/public/logos/computesdk.svg
Normal file
3
frontend/packages/website/public/logos/computesdk.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg viewBox="0 0 1711 1711" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1036.26 1002.28H1274.13L1273.2 1021.37C1264.82 1131.69 1223.39 1219.67 1149.38 1283.44C1076.29 1346.75 978.54 1378.87 858.9 1378.87C728.09 1378.87 623.35 1334.18 547.47 1245.27C472.99 1157.29 434.82 1035.79 434.82 884.04V823.53C434.82 726.7 452.52 640.12 486.5 566.1C521.41 491.15 571.69 432.49 636.39 392.47C701.09 352.43 776.51 331.95 861.69 331.95C979.46 331.95 1075.82 364.07 1147.98 427.85C1220.6 491.15 1262.96 581.46 1274.13 695.52L1275.99 714.6H1037.65L1036.72 698.77C1032.07 639.66 1015.77 596.83 988.77 571.69C961.77 546.09 918.94 533.52 861.69 533.52C799.78 533.52 754.63 554.47 724.36 598.69C692.71 643.84 676.42 716.46 675.49 814.22V888.7C675.49 991.11 690.85 1066.53 721.11 1112.61C749.97 1156.83 795.12 1178.24 858.9 1178.24C917.09 1178.24 960.38 1165.67 987.85 1140.07C1014.84 1114.93 1031.14 1073.97 1035.33 1018.57L1036.26 1002.27V1002.28Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 965 B |
3
frontend/packages/website/public/logos/docker.svg
Normal file
3
frontend/packages/website/public/logos/docker.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.983 11.078h2.119a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.119a.185.185 0 00-.185.185v1.888c0 .102.083.185.185.185m-2.954-5.43h2.118a.186.186 0 00.186-.186V3.574a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m0 2.716h2.118a.187.187 0 00.186-.186V6.29a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.887c0 .102.082.185.185.186m-2.93 0h2.12a.186.186 0 00.184-.186V6.29a.185.185 0 00-.185-.185H8.1a.185.185 0 00-.185.185v1.887c0 .102.083.185.185.186m-2.964 0h2.119a.186.186 0 00.185-.186V6.29a.185.185 0 00-.185-.185H5.136a.186.186 0 00-.186.185v1.887c0 .102.084.185.186.186m5.893 2.715h2.118a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m-2.93 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.083.185.185.185m-2.964 0h2.119a.185.185 0 00.185-.185V9.006a.185.185 0 00-.184-.186h-2.12a.186.186 0 00-.186.186v1.887c0 .102.084.185.186.185m-2.92 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.082.185.185.185M23.763 9.89c-.065-.051-.672-.51-1.954-.51-.338.001-.676.03-1.01.087-.248-1.7-1.653-2.53-1.716-2.566l-.344-.199-.226.327c-.284.438-.49.922-.612 1.43-.23.97-.09 1.882.403 2.661-.595.332-1.55.413-1.744.42H.751a.751.751 0 00-.75.748 11.376 11.376 0 00.692 4.062c.545 1.428 1.355 2.48 2.41 3.124 1.18.723 3.1 1.137 5.275 1.137.983.003 1.963-.086 2.93-.266a12.248 12.248 0 003.823-1.389c.98-.567 1.86-1.288 2.61-2.136 1.252-1.418 1.998-2.997 2.553-4.4h.221c1.372 0 2.215-.549 2.68-1.009.309-.293.55-.65.707-1.046l.098-.288Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
3
frontend/packages/website/public/logos/modal.svg
Normal file
3
frontend/packages/website/public/logos/modal.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.89 5.57 0 14.002l2.521 4.4h5.05l4.396-7.718 4.512 7.709 4.996.037L24 14.057l-4.857-8.452-5.073-.015-2.076 3.598L9.94 5.57Zm.837.729h3.787l1.845 3.252H7.572Zm9.189.021 3.803.012 4.228 7.355-3.736-.027zm-9.82.346L6.94 9.914l-4.209 7.389-1.892-3.3Zm9.187.014 4.297 7.343-1.892 3.282-4.3-7.344zm-6.713 3.6h3.79l-4.212 7.394H3.361Zm11.64 4.109 3.74.027-1.893 3.281-3.74-.027z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 476 B |
|
|
@ -5,8 +5,11 @@ import { Code, Server, GitBranch } from "lucide-react";
|
|||
import { CopyButton } from "./ui/CopyButton";
|
||||
|
||||
const sdkCodeRaw = `import { SandboxAgent } from "sandbox-agent";
|
||||
import { local } from "sandbox-agent/local";
|
||||
|
||||
const client = await SandboxAgent.start();
|
||||
const client = await SandboxAgent.start({
|
||||
sandbox: local(),
|
||||
});
|
||||
|
||||
await client.createSession("my-session", {
|
||||
agent: "claude-code",
|
||||
|
|
@ -32,13 +35,26 @@ function SdkCodeHighlighted() {
|
|||
<span className="text-zinc-300"> </span>
|
||||
<span className="text-green-400">"sandbox-agent"</span>
|
||||
<span className="text-zinc-300">;</span>
|
||||
{"\n"}
|
||||
<span className="text-purple-400">import</span>
|
||||
<span className="text-zinc-300">{" { "}</span>
|
||||
<span className="text-white">local</span>
|
||||
<span className="text-zinc-300">{" } "}</span>
|
||||
<span className="text-purple-400">from</span>
|
||||
<span className="text-zinc-300"> </span>
|
||||
<span className="text-green-400">"sandbox-agent/local"</span>
|
||||
<span className="text-zinc-300">;</span>
|
||||
{"\n\n"}
|
||||
<span className="text-purple-400">const</span>
|
||||
<span className="text-zinc-300"> client = </span>
|
||||
<span className="text-purple-400">await</span>
|
||||
<span className="text-zinc-300"> SandboxAgent.</span>
|
||||
<span className="text-blue-400">start</span>
|
||||
<span className="text-zinc-300">();</span>
|
||||
<span className="text-zinc-300">{"({"}</span>
|
||||
{"\n"}
|
||||
<span className="text-zinc-300">{" sandbox: local(),"}</span>
|
||||
{"\n"}
|
||||
<span className="text-zinc-300">{"});"}</span>
|
||||
{"\n\n"}
|
||||
<span className="text-purple-400">await</span>
|
||||
<span className="text-zinc-300"> client.</span>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue