repositories
loading repo index
repositories
loading repo index
repository
loading code, commits, and activity
public Clawd ADK gateway launch mirror
stars
latest
clone command
git clone gitlawb://did:key:z6Mkq5mY...iFZ5/my-project-publ...git clone gitlawb://did:key:z6Mkq5mY.../my-project-publ...2fa351d6docs: add automaton and perps launch sources16d ago| #1 | import { Cpu, HardDrive, MemoryStick, Plus, TerminalSquare } from "lucide-react"; |
| #2 | import type { DashboardState } from "../types"; |
| #3 | |
| #4 | interface SandboxPageProps { |
| #5 | state: DashboardState; |
| #6 | } |
| #7 | |
| #8 | export function SandboxPage({ state }: SandboxPageProps) { |
| #9 | const summary = state.sandbox.summary; |
| #10 | const cards = [ |
| #11 | { label: "Total Sandboxes", value: String(summary.totalSandboxes), sublabel: `${summary.runningSandboxes} running`, icon: TerminalSquare }, |
| #12 | { label: "Total vCPU", value: String(summary.totalVcpu), sublabel: "cores allocated", icon: Cpu }, |
| #13 | { label: "Total Memory", value: `${(summary.totalMemoryMb / 1024).toFixed(1)} GB`, sublabel: "allocated", icon: MemoryStick }, |
| #14 | { label: "Total Disk", value: `${summary.totalDiskGb} GB`, sublabel: "storage", icon: HardDrive }, |
| #15 | ]; |
| #16 | |
| #17 | return ( |
| #18 | <section className="page-grid"> |
| #19 | <div className="top-actions"> |
| #20 | <button className="ghost-button" type="button">CLAWD Repo ↗</button> |
| #21 | <button className="primary-button" type="button"> |
| #22 | <Plus size={18} /> |
| #23 | <span>New Sandbox</span> |
| #24 | </button> |
| #25 | </div> |
| #26 | |
| #27 | <div className="stat-grid"> |
| #28 | {cards.map(({ icon: Icon, ...card }) => ( |
| #29 | <article className="card stat-card" key={card.label}> |
| #30 | <div className="stat-card__head"> |
| #31 | <span>{card.label}</span> |
| #32 | <Icon size={18} /> |
| #33 | </div> |
| #34 | <div className="stat-card__value">{card.value}</div> |
| #35 | <div className="stat-card__sub">{card.sublabel}</div> |
| #36 | </article> |
| #37 | ))} |
| #38 | </div> |
| #39 | |
| #40 | <article className="card quickstart-card"> |
| #41 | <div className="section-header"> |
| #42 | <div> |
| #43 | <h2>Spawn Your Automation</h2> |
| #44 | <p>End-to-end quickstart from credits to launch, tuned for a sovereign lobster runtime.</p> |
| #45 | </div> |
| #46 | </div> |
| #47 | <div className="quickstart-steps"> |
| #48 | {state.sandbox.quickstart.map((step, index) => ( |
| #49 | <div className="quickstart-step" key={step.title}> |
| #50 | <div className="quickstart-step__index">{index + 1}</div> |
| #51 | <div className="quickstart-step__body"> |
| #52 | <h3>{step.title}</h3> |
| #53 | <p>{step.body}</p> |
| #54 | {step.command ? <code>{step.command}</code> : null} |
| #55 | </div> |
| #56 | </div> |
| #57 | ))} |
| #58 | </div> |
| #59 | </article> |
| #60 | </section> |
| #61 | ); |
| #62 | } |
| #63 |