feat: hide tunnel UI for terminal sessions and show session metadata

Backend:
- Add created_at to get_user_sessions response

Frontend:
- Hide tunnel error badges, probe output, and 'Recreate Tunnel' button for terminal-only sessions
- Show session start time (created_at) in active sessions list
- Show repository configuration (clone_mode, branch) for each session
- Skip health check polling for terminal-only sessions
- Update Session type to include created_at field
This commit is contained in:
Fusion
2026-05-24 13:02:06 +02:00
parent 2dd2f2ab06
commit cce3fa773a
3 changed files with 22 additions and 7 deletions
+1
View File
@@ -1437,6 +1437,7 @@ async def get_user_sessions(
"url": instance.url, "url": instance.url,
"clone_mode": instance.clone_mode, "clone_mode": instance.clone_mode,
"branch": instance.branch, "branch": instance.branch,
"created_at": instance.created_at.isoformat() if instance.created_at else None,
}) })
return {"sessions": sessions} return {"sessions": sessions}
+1
View File
@@ -29,6 +29,7 @@ export interface Session {
probe_status?: string; probe_status?: string;
clone_mode?: string; clone_mode?: string;
branch?: string | null; branch?: string | null;
created_at?: string;
} }
export async function listInstances( export async function listInstances(
+20 -7
View File
@@ -95,11 +95,12 @@ export const SessionsPage = () => {
// Poll health every 30 seconds for active instances // Poll health every 30 seconds for active web-enabled instances
useEffect(() => { useEffect(() => {
const checkHealth = async () => { const checkHealth = async () => {
const activeSessions = sessions.filter( const activeSessions = sessions.filter(
(s) => ["running", "starting", "unhealthy", "probing"].includes(s.status) (s) => ["running", "starting", "unhealthy", "probing"].includes(s.status)
&& s.tool_type_interfaces?.includes("web")
); );
for (const session of activeSessions) { for (const session of activeSessions) {
try { try {
@@ -335,13 +336,25 @@ export const SessionsPage = () => {
<p className="muted">No active sessions</p> <p className="muted">No active sessions</p>
) : ( ) : (
<div className="sessions-grid"> <div className="sessions-grid">
{activeSessions.map((session) => ( {activeSessions.map((session) => {
const isTerminalOnly = session.tool_type_interfaces?.includes("terminal") && !session.tool_type_interfaces?.includes("web");
return (
<div className="card session-card" key={session.id}> <div className="card session-card" key={session.id}>
<div className="session-info"> <div className="session-info">
<h4>{session.display_name}</h4> <h4>{session.display_name}</h4>
<p className="muted"> <p className="muted">
{session.tool_type_name} · {session.project_name} {session.tool_type_name} · {session.project_name}
</p> </p>
{session.created_at && (
<p className="session-meta">
Started: {new Date(session.created_at).toLocaleString()}
</p>
)}
{session.clone_mode && (
<p className="session-meta">
Repo: {session.clone_mode === "clone" ? `clone (${session.branch || "main"})` : "mount"}
</p>
)}
{session.url && ( {session.url && (
<p className="session-url"> <p className="session-url">
<a href={session.url} target="_blank" rel="noopener noreferrer"> <a href={session.url} target="_blank" rel="noopener noreferrer">
@@ -356,13 +369,13 @@ export const SessionsPage = () => {
{session.status === "probing" && ( {session.status === "probing" && (
<span className="status-badge probing">checking...</span> <span className="status-badge probing">checking...</span>
)} )}
{tunnelHealth[session.id] && tunnelHealth[session.id].tunnel_status === "unreachable" && ( {!isTerminalOnly && tunnelHealth[session.id] && tunnelHealth[session.id].tunnel_status === "unreachable" && (
<span className="status-badge error">tunnel error</span> <span className="status-badge error">tunnel error</span>
)} )}
{tunnelHealth[session.id] && tunnelHealth[session.id].tunnel_status === "error_response" && ( {!isTerminalOnly && tunnelHealth[session.id] && tunnelHealth[session.id].tunnel_status === "error_response" && (
<span className="status-badge warning">app error ({tunnelHealth[session.id].tunnel_status_code})</span> <span className="status-badge warning">app error ({tunnelHealth[session.id].tunnel_status_code})</span>
)} )}
{tunnelHealth[session.id]?.probe_status && tunnelHealth[session.id]?.probe_status !== "not_applicable" && ( {!isTerminalOnly && tunnelHealth[session.id]?.probe_status && tunnelHealth[session.id]?.probe_status !== "not_applicable" && (
<div className="probe-output-section"> <div className="probe-output-section">
<button <button
className={`probe-toggle probe-${tunnelHealth[session.id].probe_status}`} className={`probe-toggle probe-${tunnelHealth[session.id].probe_status}`}
@@ -402,7 +415,7 @@ export const SessionsPage = () => {
Open Open
</button> </button>
)} )}
{tunnelHealth[session.id] && tunnelHealth[session.id].tunnel_status === "unreachable" && ( {!isTerminalOnly && tunnelHealth[session.id] && tunnelHealth[session.id].tunnel_status === "unreachable" && (
<button <button
className="secondary-button small" className="secondary-button small"
onClick={() => void handleRecreateTunnel(session)} onClick={() => void handleRecreateTunnel(session)}
@@ -481,7 +494,7 @@ export const SessionsPage = () => {
)} )}
</div> </div>
</div> </div>
))} )})}
</div> </div>
)} )}
</div> </div>