Aurora AI Sandbox

1"use client"
2 
3import * as React from "react"
4import { ExternalLink, FileText, Globe, Monitor, SquareTerminal } from "lucide-react"
5import { cn } from "@/lib/utils"
6import { Badge } from "@/registry/aurora/ui/badge"
7import { Button } from "@/registry/aurora/ui/button"
8import { safeHttpUrl } from "@/registry/aurora/lib/safe-url"
9 
10export interface SandboxProps extends React.HTMLAttributes<HTMLDivElement> {
11  title?: string
12  command?: string
13  status?: "ready" | "running" | "idle"
14  runtime?: string
15  /** Preview URL shown in the address bar. */
16  url?: string
17  /** Human-readable uptime, e.g. "4m 12s". Rendered as an "up …" chip. */
18  uptime?: string
19  paths?: string[]
20  envCount?: number
21}
22 
23const statusTone: Record<NonNullable<SandboxProps["status"]>, "success" | "info" | "neutral"> = {
24  running: "success",
25  ready: "info",
26  idle: "neutral",
27}
28 
29/** Monospace shell-prompt glyph (`>_`) used by the command chip and the
30 * "Attach shell" affordance, matching the Claude Design source. */
31function PromptGlyph({ color }: { color: string }) {
32  return (
33    <span
34      aria-hidden
35      style={{
36        fontFamily: "var(--aurora-font-mono, 'JetBrains Mono', monospace)",
37        fontSize: "12px",
38        fontWeight: 600,
39        lineHeight: 1,
40        color,
41        letterSpacing: 0,
42      }}
43    >
44      {">_"}
45    </span>
46  )
47}
48 
49const Sandbox = (
50    { ref,
51      title = "Sandbox",
52      command = "pnpm dev",
53      status = "running",
54      runtime = "Node 20",
55      url,
56      uptime,
57      paths = ["/workdir/app", "/workdir/.next"],
58      envCount = 8,
59      className,
60      style,
61      children,
62      ...props
63    }: SandboxProps & { ref?: React.Ref<HTMLDivElement> }
64  ) => (
65    <div
66      ref={ref}
67      className={cn("grid gap-4 p-[18px]", className)}
68      style={{
69        background: "var(--aurora-surface-raised)",
70        border: "1px solid var(--aurora-border-strong)",
71        borderRadius: "var(--aurora-radius-2)",
72        boxShadow: "var(--aurora-shadow-medium), var(--aurora-highlight-medium)",
73        ...style,
74      }}
75      {...props}
76    >
77      {/* Header: icon + title + status */}
78      <div className="flex items-center justify-between gap-3">
79        <span className="flex min-w-0 items-center gap-2.5">
80          <span
81            className="inline-flex size-7 shrink-0 items-center justify-center rounded-[8px]"
82            style={{
83              background: "var(--axon-orange-surface)",
84// … truncated