From 7e9edcf2290a86fbc295c095464c1a2c09e1a3f7 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Sat, 9 May 2026 17:21:33 -0400
Subject: [PATCH] fix(web): show sandbox id in terminal status

---
 .../fabro-web/app/routes/run-terminal.test.ts | 10 ++++++++++
 apps/fabro-web/app/routes/run-terminal.tsx    | 19 ++++++++++++++-----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/apps/fabro-web/app/routes/run-terminal.test.ts b/apps/fabro-web/app/routes/run-terminal.test.ts
index 5f93b7e65..f8af1f71e 100644
--- a/apps/fabro-web/app/routes/run-terminal.test.ts
+++ b/apps/fabro-web/app/routes/run-terminal.test.ts
@@ -3,6 +3,7 @@ import { describe, expect, test } from "bun:test";
 import {
   buildTerminalWebSocketUrl,
   parseTerminalServerMessage,
+  sandboxStatusDetail,
   TERMINAL_DOCK_CLEARANCE_CLASS,
   terminalAccessCommandLabel,
 } from "./run-terminal";
@@ -44,4 +45,13 @@ describe("run terminal route helpers", () => {
     expect(terminalAccessCommandLabel("local")).toBeNull();
     expect(terminalAccessCommandLabel(null)).toBeNull();
   });
+
+  test("uses sandbox identifier as terminal status detail", () => {
+    expect(sandboxStatusDetail({ provider: "docker", identifier: "container-abc123" }))
+      .toBe("container-abc123");
+    expect(sandboxStatusDetail({ provider: "daytona", id: "sandbox-name" }))
+      .toBe("sandbox-name");
+    expect(sandboxStatusDetail({ provider: "docker" })).toBe("docker");
+    expect(sandboxStatusDetail(null)).toBeNull();
+  });
 });
diff --git a/apps/fabro-web/app/routes/run-terminal.tsx b/apps/fabro-web/app/routes/run-terminal.tsx
index de467ad81..fd189b932 100644
--- a/apps/fabro-web/app/routes/run-terminal.tsx
+++ b/apps/fabro-web/app/routes/run-terminal.tsx
@@ -114,6 +114,12 @@ function getString(value: Record<string, unknown> | null, key: string): string |
   return typeof child === "string" ? child : null;
 }
 
+export function sandboxStatusDetail(sandbox: Record<string, unknown> | null): string | null {
+  return getString(sandbox, "identifier")
+    ?? getString(sandbox, "id")
+    ?? getString(sandbox, "provider");
+}
+
 function sendResize(socket: WebSocket | null, terminal: XtermTerminal | null) {
   if (!socket || socket.readyState !== WebSocket.OPEN || !terminal) return;
   socket.send(JSON.stringify({
@@ -151,10 +157,10 @@ function statusLabel(status: ConnectionStatus): string {
 
 function StatusPill({
   status,
-  provider,
+  detail,
 }: {
   status: ConnectionStatus;
-  provider: string | null;
+  detail: string | null;
 }) {
   return (
     <span
@@ -167,10 +173,12 @@ function StatusPill({
         aria-hidden="true"
       />
       <span>{statusLabel(status)}</span>
-      {provider ? (
+      {detail ? (
         <>
           <span className="text-fg-muted" aria-hidden="true">·</span>
-          <span className="text-fg-3">{provider}</span>
+          <span className="max-w-72 truncate font-mono text-fg-3" title={detail}>
+            {detail}
+          </span>
         </>
       ) : null}
     </span>
@@ -183,6 +191,7 @@ export default function RunTerminal({ params }: { params: { id: string } }) {
   const sandbox = getObject(getObject(stateQuery.data, "run"), "sandbox")
     ?? getObject(stateQuery.data, "sandbox");
   const provider = getString(sandbox, "provider");
+  const sandboxDetail = sandboxStatusDetail(sandbox);
   const accessCommandLabel = terminalAccessCommandLabel(provider);
   const [connectionKey, setConnectionKey] = useState(0);
   const [status, setStatus] = useState<ConnectionStatus>("connecting");
@@ -332,7 +341,7 @@ export default function RunTerminal({ params }: { params: { id: string } }) {
     >
       <h2 id={terminalId} className="sr-only">Terminal</h2>
       <div className="mb-2 flex shrink-0 flex-wrap items-center justify-between gap-3">
-        <StatusPill status={status} provider={provider} />
+        <StatusPill status={status} detail={sandboxDetail} />
         <div className="flex items-center gap-2">
           <Tooltip label="Reconnect">
             <button