cli: show team and project after sandbox creation (#18)

# Problem

When creating a new sandbox via the CLI (`sandbox create`), the output
only shows the sandbox ID but doesn't indicate which team or project the
sandbox belongs to. This leaves users confused about where their sandbox
was created.

# Solution

Display team and project info in a framed format after sandbox creation:

```
✅ Sandbox sbx_abc123 created.
   │ team: team_slug
   ╰ project: my-project
```

With ports:

```
✅ Sandbox sbx_abc123 created.
   │ team: team_slug
   │ project: my-project
   │ ports:
   │ • 3000 -> https://...
   ╰ • 8080 -> https://...
```

Changes:

- Extract `owner` and `project` slugs from OIDC token claims (with
backwards compatibility for tokens without these fields)
- Thread slug values through the scope parser to make them available in
commands
- Integrate port listing into the same framed view with consistent
indentation
- Remove redundant sandbox ID from interactive shell spinner and command
prompt

Supersedes #15 and therefore also resolves EC-4722.

Resolves EC-4761

Author: Schniz

.changeset/dull-icons-worry.md

@@ -0,0 +1,5 @@
+---
+"sandbox": patch
+---
+
+Display team and project info in a framed format after sandbox creation

packages/sandbox/src/args/scope.ts

@@ -59,6 +59,8 @@ export const scope: ArgParser<{
   token: string;
   project: string;
   team: string;
+  projectSlug?: string;
+  teamSlug?: string;
 }> &
   ProvidesHelp = {
   register(ctx) {
@@ -91,6 +93,9 @@ export const scope: ArgParser<{
       return teamId;
     }
 
+    let projectSlug: string | undefined;
+    let teamSlug: string | undefined;
+
     if (
       typeof projectId.value === "undefined" ||
       typeof teamId.value === "undefined"
@@ -102,6 +107,8 @@ export const scope: ArgParser<{
         });
         projectId.value ??= scope.projectId;
         teamId.value ??= scope.ownerId;
+        projectSlug = scope.projectSlug;
+        teamSlug = scope.ownerSlug;
       } catch (err) {
         return {
           _tag: "error",
@@ -127,6 +134,8 @@ export const scope: ArgParser<{
         token: t.value,
         project: projectId.value,
         team: teamId.value,
+        projectSlug,
+        teamSlug,
       },
     };
   },

packages/sandbox/src/commands/create.ts

@@ -73,12 +73,6 @@ export const create = cmd.command({
         });
     spinner?.stop();
 
-    if (!silent) {
-      process.stderr.write("✅ Sandbox ");
-      process.stdout.write(chalk.cyan(sandbox.sandboxId));
-      process.stderr.write(" created.\n");
-    }
-
     if (!sandbox.interactivePort) {
       throw new Error(
         [
@@ -93,11 +87,35 @@ export const create = cmd.command({
       (x) => x.port !== sandbox.interactivePort,
     );
 
-    if (routes.length) {
-      console.log();
-      console.log(chalk.bold("Mapped ports:"));
-      for (const route of routes) {
-        console.log(`  • ${route.port} -> ${route.url}`);
+    if (!silent) {
+      const teamDisplay = scope.teamSlug ?? scope.team;
+      const projectDisplay = scope.projectSlug ?? scope.project;
+      const hasPorts = routes.length > 0;
+
+      process.stderr.write("✅ Sandbox ");
+      process.stdout.write(chalk.cyan(sandbox.sandboxId));
+      process.stderr.write(" created.\n");
+      process.stderr.write(
+        chalk.dim("   │ ") + "team: " + chalk.cyan(teamDisplay) + "\n",
+      );
+
+      if (hasPorts) {
+        process.stderr.write(
+          chalk.dim("   │ ") + "project: " + chalk.cyan(projectDisplay) + "\n",
+        );
+        process.stderr.write(chalk.dim("   │ ") + "ports:\n");
+        for (let i = 0; i < routes.length; i++) {
+          const route = routes[i];
+          const isLast = i === routes.length - 1;
+          const prefix = isLast ? chalk.dim("   ╰ ") : chalk.dim("   │ ");
+          process.stderr.write(
+            prefix + "• " + route.port + " -> " + chalk.cyan(route.url) + "\n",
+          );
+        }
+      } else {
+        process.stderr.write(
+          chalk.dim("   ╰ ") + "project: " + chalk.cyan(projectDisplay) + "\n",
+        );
       }
     }
 

packages/sandbox/src/commands/exec.ts

@@ -114,7 +114,7 @@ export const exec = cmd.command({
     }
 
     if (!interactive) {
-      console.error(printCommand(sandbox.sandboxId, command, args));
+      console.error(printCommand(command, args));
       const result = await sandbox.runCommand({
         cmd: command,
         args,

packages/sandbox/src/commands/run.ts

@@ -5,7 +5,7 @@ import { omit } from "../util/omit";
 import ora from "ora";
 
 const args = {
-  ...omit(Create.args, "silent"),
+  ...Create.args,
   ...omit(Exec.args, "sandbox"),
   removeAfterUse: cmd.flag({
     long: "rm",
@@ -18,9 +18,7 @@ export const run = cmd.command({
   description: "Create and run a command in a sandbox",
   args,
   async handler({ removeAfterUse, ...rest }) {
-    const spinner = ora("Creating sandbox...").start();
-    const sandbox = await Create.create.handler({ ...rest, silent: true });
-    spinner.stop();
+    const sandbox = await Create.create.handler({ ...rest });
     try {
       await Exec.exec.handler({ ...rest, sandbox });
     } finally {

packages/sandbox/src/interactive-shell/interactive-shell.ts

@@ -190,12 +190,8 @@ export async function startInteractiveShell(options: {
   process.once("beforeExit", cleanup);
   using _cleanup = defer(cleanup);
 
-  const spinner = { ...spinners.dots };
-  spinner.frames = spinner.frames.map(
-    (frame) => chalk.gray.dim(`${options.sandbox.sandboxId} `) + frame,
-  );
   using progress = acquireRelease(
-    () => ora({ discardStdin: false, spinner }).start(),
+    () => ora({ discardStdin: false }).start(),
     (s) => s.clear(),
   );
 
@@ -231,11 +227,7 @@ export async function startInteractiveShell(options: {
       skipExtendingTimeout: options.skipExtendingTimeout,
       printCommand: () =>
         console.error(
-          printCommand(
-            options.sandbox.sandboxId,
-            options.execution[0],
-            options.execution.slice(1),
-          ),
+          printCommand(options.execution[0], options.execution.slice(1)),
         ),
     }),
   ]).catch(waitForProcess.ignoreInterruptions);

packages/sandbox/src/util/infer-scope.ts

@@ -5,13 +5,20 @@ import * as Auth from "@vercel/sandbox/dist/auth/index.js";
 
 const debug = createDebugger("sandbox:scope");
 
+export type InferredScope = {
+  projectId: string;
+  ownerId: string;
+  projectSlug?: string;
+  ownerSlug?: string;
+};
+
 export async function inferScope({
   token,
   team,
 }: {
   token: string;
   team?: string;
-}): Promise<{ projectId: string; ownerId: string }> {
+}): Promise<InferredScope> {
   // If the token is a JWT (OIDC token), extract scope from its claims
   const jwt = z.jwt().safeParse(token);
   if (jwt.success) {
@@ -40,9 +47,16 @@ const JwtSchema = z
   .object({
     project_id: z.string(),
     owner_id: z.string(),
+    project: z.string().optional(),
+    owner: z.string().optional(),
   })
   .transform((data) => {
-    return { projectId: data.project_id, ownerId: data.owner_id };
+    return {
+      projectId: data.project_id,
+      ownerId: data.owner_id,
+      projectSlug: data.project,
+      ownerSlug: data.owner,
+    };
   });
 
 async function inferFromJwt(jwt: string) {
@@ -55,5 +69,11 @@ async function inferFromToken(token: string, requestedTeam?: string) {
     token,
     teamId: requestedTeam,
   });
-  return { ownerId: teamId, projectId };
+  // Auth.inferScope returns team slug (not ID) and project name
+  return {
+    ownerId: teamId,
+    projectId,
+    ownerSlug: teamId,
+    projectSlug: projectId,
+  };
 }

packages/sandbox/src/util/print-command.ts

@@ -1,5 +1,5 @@
 import chalk from "chalk";
 
-export function printCommand(sandbox: string, command: string, args: string[]) {
-  return chalk.gray(chalk.dim(`${sandbox} $ `) + [command, ...args].join(" "));
+export function printCommand(command: string, args: string[]) {
+  return chalk.gray(chalk.dim("$ ") + [command, ...args].join(" "));
 }

packages/sandbox/test/args/scope.test.ts

@@ -41,11 +41,15 @@ describe("scope", () => {
       team: string;
       project: string;
       token: string;
+      projectSlug?: string;
+      teamSlug?: string;
     }>();
     expect(result.scope).toEqual({
       team: "team",
       project: "proj",
       token: "123",
+      projectSlug: undefined,
+      teamSlug: undefined,
     });
   });
 
@@ -56,11 +60,15 @@ describe("scope", () => {
       team: string;
       project: string;
       token: string;
+      projectSlug?: string;
+      teamSlug?: string;
     }>();
     expect(result.scope).toEqual({
       team: "team",
       project: "proj",
       token: "from-env",
+      projectSlug: undefined,
+      teamSlug: undefined,
     });
   });
 
@@ -70,23 +78,40 @@ describe("scope", () => {
     // Create two different OIDC tokens with different project/team claims.
     // Note: We use a fake signature because inferScope only parses the JWT
     // payload for claims extraction - it doesn't validate the signature.
-    const createOidcToken = (projectId: string, ownerId: string) => {
+    const createOidcToken = (
+      projectId: string,
+      ownerId: string,
+      project: string,
+      owner: string,
+    ) => {
       const header = Buffer.from(JSON.stringify({ alg: "RS256" })).toString(
         "base64url",
       );
       const payload = Buffer.from(
         JSON.stringify({
           project_id: projectId,
           owner_id: ownerId,
+          project,
+          owner,
           exp: Math.floor(Date.now() / 1000) + 3600,
         }),
       ).toString("base64url");
       const signature = "fake-signature";
       return `${header}.${payload}.${signature}`;
     };
 
-    const oldToken = createOidcToken("old-project", "old-team");
-    const newToken = createOidcToken("new-project", "new-team");
+    const oldToken = createOidcToken(
+      "old-project",
+      "old-team",
+      "old-project-slug",
+      "old-team-slug",
+    );
+    const newToken = createOidcToken(
+      "new-project",
+      "new-team",
+      "new-project-slug",
+      "new-team-slug",
+    );
 
     // Env var has OLD token
     process.env.VERCEL_OIDC_TOKEN = oldToken;