scriptoriumadmin/fabro
1
0
Fork 0
mirror of https://github.com/fabro-sh/fabro.git synced 2026-10-10 03:30:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix(web): show sandbox id in terminal status

Browse source
This commit is contained in:
Bryan Helmkamp 2026-05-09 17:21:33 -04:00
parent fb577b1fcb
commit 7e9edcf229
No known key found for this signature in database
2 changed files with 24 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
apps/fabro-web/app/routes/run-terminal.test.ts
View file

@ -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();
});
});

19
apps/fabro-web/app/routes/run-terminal.tsx
View file

@ -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