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

Author: skulidropek

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(
             {