feat(web): show docker container for active SSH session (#49)

* feat(web): show container for active SSH terminal sessions

* test(web): add coverage for terminal session container display

Author: skulidropek

packages/web/package.json

@@ -6,7 +6,8 @@
     "dev": "concurrently -k \"next dev\" \"node scripts/terminal-ws.mjs\"",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "test": "vitest run"
   },
   "dependencies": {
     "@effect-template/lib": "workspace:*",
@@ -29,6 +30,7 @@
     "eslint": "^9",
     "eslint-config-next": "16.1.6",
     "tailwindcss": "^4",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vitest": "^4.0.17"
   }
 }

packages/web/src/app/page.tsx

@@ -533,9 +533,13 @@ export default function Home() {
 
   useEffect(() => () => disposeTerminal(), [disposeTerminal])
 
-  const connectedLabel = activeProject?.displayName ?? "none"
+  const activeTerminalSession = terminalSessions.find((session) => session.id === activeSessionId)
+  const connectedContainerLabel = terminalStatus === "detached"
+    ? "none"
+    : activeTerminalSession?.containerName ?? activeProject?.containerName ?? "unknown"
   const statusLabel = activeProject?.statusLabel ?? "unknown"
   const sshLabel = activeProject?.ssh ?? "-"
+  const containerLabel = activeProject?.containerName ?? "-"
   const repoLabel = activeProject?.displayName ?? "-"
   const refLabel = activeProject?.repoRef ?? "-"
   const recreateStatus = activeProject?.recreateStatus
@@ -558,7 +562,7 @@ export default function Home() {
         <div className="brand">docker-git</div>
         <div className="status-chip">
           <span className="status-dot" />
-          Connected · {connectedLabel}
+          Connected SSH · {connectedContainerLabel}
         </div>
       </header>
 
@@ -603,6 +607,7 @@ export default function Home() {
             <div className="topbar">
               <div className="topbar-meta">
                 <span className="pill">SSH: {sshLabel}</span>
+                <span className="pill">Container: {containerLabel}</span>
                 <span className="pill">Repo: {repoLabel}</span>
                 <span className="pill">Ref: {refLabel}</span>
                 <span className="pill">Status: {statusLabel}</span>
@@ -685,43 +690,46 @@ export default function Home() {
                         {showDetails ? "No active terminals" : "None"}
                       </div>
                     ) : (
-                      terminalSessions.map((session) => (
-                        <div
-                          key={session.id}
-                          className={`list-item ${session.id === activeSessionId ? "active" : ""}`}
-                          role="button"
-                          tabIndex={0}
-                          onClick={() => handleSessionSelect(session)}
-                          onKeyDown={(event) => {
-                            if (event.key === "Enter" || event.key === " ") {
-                              event.preventDefault()
-                              handleSessionSelect(session)
-                            }
-                          }}
-                        >
-                          <div className="list-item-row">
-                            <strong>{session.displayName}</strong>
-                            <div className="list-item-actions">
-                              <span className={session.status === "connected" ? "badge" : "badge warn"}>
-                                {session.status}
-                              </span>
-                              <button
-                                className="icon-button"
-                                type="button"
-                                onClick={(event) => {
-                                  event.stopPropagation()
-                                  handleSessionClose(session)
-                                }}
-                              >
-                                delete
-                              </button>
+                      terminalSessions.map((session) => {
+                        const sessionContainer = session.containerName ?? session.projectId
+                        return (
+                          <div
+                            key={session.id}
+                            className={`list-item ${session.id === activeSessionId ? "active" : ""}`}
+                            role="button"
+                            tabIndex={0}
+                            onClick={() => handleSessionSelect(session)}
+                            onKeyDown={(event) => {
+                              if (event.key === "Enter" || event.key === " ") {
+                                event.preventDefault()
+                                handleSessionSelect(session)
+                              }
+                            }}
+                          >
+                            <div className="list-item-row">
+                              <strong>{session.displayName}</strong>
+                              <div className="list-item-actions">
+                                <span className={session.status === "connected" ? "badge" : "badge warn"}>
+                                  {session.status}
+                                </span>
+                                <button
+                                  className="icon-button"
+                                  type="button"
+                                  onClick={(event) => {
+                                    event.stopPropagation()
+                                    handleSessionClose(session)
+                                  }}
+                                >
+                                  delete
+                                </button>
+                              </div>
                             </div>
+                            <small>
+                              {session.source} · {session.mode} · {sessionContainer}
+                            </small>
                           </div>
-                          <small>
-                            {session.source} · {session.mode} · {session.projectId}
-                          </small>
-                        </div>
-                      ))
+                        )
+                      })
                     )}
                   </div>
                 </div>

packages/web/src/lib/api-schema.ts

@@ -108,6 +108,7 @@ const TerminalSessionSchema = Schema.Struct({
   id: Schema.String,
   projectId: Schema.String,
   displayName: Schema.String,
+  containerName: Schema.optional(Schema.String),
   mode: TerminalSessionModeSchema,
   source: Schema.String,
   status: TerminalSessionStatusSchema,

packages/web/src/lib/api-types.ts

@@ -65,6 +65,7 @@ export type TerminalSession = {
   readonly id: string
   readonly projectId: string
   readonly displayName: string
+  readonly containerName?: string
   readonly mode: TerminalSessionMode
   readonly source: string
   readonly status: TerminalSessionStatus

packages/web/src/server/terminal-ws.ts

@@ -23,6 +23,7 @@ type TerminalSessionRegistry = {
   readonly id: string
   readonly projectId: string
   readonly displayName: string
+  readonly containerName?: string
   readonly mode: TerminalSessionMode
   readonly source: string
   readonly status: TerminalSessionStatus
@@ -181,8 +182,15 @@ export const attachTerminalWs = (wss: WebSocketServer) => {
         const privateKey = fs.readFileSync(target.identityPath)
 
         client.on("ready", () => {
-          updateSession(sessionId, { status: "connected", displayName: details.displayName })
-          sendMessage(socket, { type: "info", data: `[docker-git] attached to ${details.displayName}` })
+          updateSession(sessionId, {
+            status: "connected",
+            displayName: details.displayName,
+            containerName: details.containerName
+          })
+          sendMessage(socket, {
+            type: "info",
+            data: `[docker-git] attached to ${details.displayName} (${details.containerName})`
+          })
 
           client.shell(
             {

packages/web/tests/api/terminal-sessions-route.test.ts

@@ -0,0 +1,69 @@
+import fs from "node:fs"
+
+import { afterEach, beforeEach, describe, expect, it } from "vitest"
+
+import { GET } from "../../src/app/api/terminal-sessions/route"
+
+const sessionsFile = "/tmp/docker-git-terminal-sessions.json"
+
+let previousSessionsFileContent: string | null = null
+
+beforeEach(() => {
+  previousSessionsFileContent = fs.existsSync(sessionsFile)
+    ? fs.readFileSync(sessionsFile, "utf8")
+    : null
+})
+
+afterEach(() => {
+  if (previousSessionsFileContent === null) {
+    if (fs.existsSync(sessionsFile)) {
+      fs.unlinkSync(sessionsFile)
+    }
+    return
+  }
+  fs.writeFileSync(sessionsFile, previousSessionsFileContent, "utf8")
+})
+
+describe("GET /api/terminal-sessions", () => {
+  it("returns sessions with containerName", async () => {
+    fs.writeFileSync(
+      sessionsFile,
+      JSON.stringify({
+        sessions: [
+          {
+            id: "session-1",
+            projectId: "/tmp/project",
+            displayName: "org/repo",
+            containerName: "dg-repo-issue-47",
+            mode: "default",
+            source: "web",
+            status: "connected",
+            connectedAt: "2026-02-16T15:00:00.000Z",
+            updatedAt: "2026-02-16T15:00:01.000Z"
+          }
+        ]
+      }),
+      "utf8"
+    )
+
+    const response = GET()
+    const body = await response.json()
+    const sessions = Reflect.get(body as object, "sessions")
+    expect(Array.isArray(sessions)).toBe(true)
+    const first = Array.isArray(sessions) ? sessions[0] : null
+    expect(first).toMatchObject({
+      id: "session-1",
+      containerName: "dg-repo-issue-47",
+      status: "connected"
+    })
+  })
+
+  it("returns an empty list when sessions file is missing", async () => {
+    if (fs.existsSync(sessionsFile)) {
+      fs.unlinkSync(sessionsFile)
+    }
+    const response = GET()
+    const body = await response.json()
+    expect(body).toEqual({ sessions: [] })
+  })
+})

packages/web/tests/lib/api-schema-terminal-sessions.test.ts

@@ -0,0 +1,58 @@
+import { Either } from "effect"
+import * as Schema from "effect/Schema"
+import { describe, expect, it } from "vitest"
+
+import { ApiSchema } from "../../src/lib/api-schema"
+
+const decodeTerminalSessions = Schema.decodeUnknownEither(ApiSchema.TerminalSessions)
+
+describe("ApiSchema.TerminalSessions", () => {
+  it("decodes sessions with containerName", () => {
+    const payload = {
+      sessions: [
+        {
+          id: "session-1",
+          projectId: "/tmp/project",
+          displayName: "org/repo",
+          containerName: "dg-repo-issue-47",
+          mode: "default",
+          source: "web",
+          status: "connected",
+          connectedAt: "2026-02-16T15:00:00.000Z",
+          updatedAt: "2026-02-16T15:00:01.000Z"
+        }
+      ]
+    }
+
+    const decoded = decodeTerminalSessions(payload)
+    expect(Either.isRight(decoded)).toBe(true)
+    if (Either.isLeft(decoded)) {
+      return
+    }
+    expect(decoded.right.sessions[0]?.containerName).toBe("dg-repo-issue-47")
+  })
+
+  it("keeps backward compatibility when containerName is absent", () => {
+    const payload = {
+      sessions: [
+        {
+          id: "session-legacy",
+          projectId: "/tmp/project-legacy",
+          displayName: "org/repo",
+          mode: "default",
+          source: "web",
+          status: "connected",
+          connectedAt: "2026-02-16T15:00:00.000Z",
+          updatedAt: "2026-02-16T15:00:01.000Z"
+        }
+      ]
+    }
+
+    const decoded = decodeTerminalSessions(payload)
+    expect(Either.isRight(decoded)).toBe(true)
+    if (Either.isLeft(decoded)) {
+      return
+    }
+    expect(decoded.right.sessions[0]?.containerName).toBeUndefined()
+  })
+})