From 4906ce0cd9f6f58ac53b6b06f85f434a75a11b2b Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Wed, 20 May 2026 14:38:33 +0200
Subject: [PATCH] feat(sessions): display and open Cloudflare URLs in session
 view

- Show Cloudflare URL in active session cards
- Change Open button to anchor tag linking directly to instance URL
- Add CSS styling for URL display in session cards
- Falls back to project navigation if no URL available
---
 apps/web/src/pages/sessions.tsx | 35 +++++++++++++++++++++++++--------
 apps/web/src/styles.css         | 15 ++++++++++++++
 2 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/pages/sessions.tsx b/apps/web/src/pages/sessions.tsx
index e9d12b5..c01be06 100644
--- a/apps/web/src/pages/sessions.tsx
+++ b/apps/web/src/pages/sessions.tsx
@@ -233,17 +233,36 @@ export const SessionsPage = () => {
                       <p className="muted">
                         {session.tool_type_name} · {session.project_name}
                       </p>
+                      {session.url && (
+                        <p className="session-url">
+                          <a href={session.url} target="_blank" rel="noopener noreferrer">
+                            {session.url}
+                          </a>
+                        </p>
+                      )}
                       <span className="status-badge running">running</span>
                     </div>
                     <div className="session-actions">
-                      <button
-                        className="secondary-button small"
-                        onClick={() => handleOpen(session)}
-                        type="button"
-                      >
-                        <Icon name="external" size="sm" />
-                        Open
-                      </button>
+                      {session.url ? (
+                        <a
+                          href={session.url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="secondary-button small"
+                        >
+                          <Icon name="external" size="sm" />
+                          Open
+                        </a>
+                      ) : (
+                        <button
+                          className="secondary-button small"
+                          onClick={() => handleOpen(session)}
+                          type="button"
+                        >
+                          <Icon name="external" size="sm" />
+                          Open
+                        </button>
+                      )}
                       <button
                         className="secondary-button small"
                         onClick={() =>
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 0a3e2e1..c26047f 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -2555,6 +2555,21 @@ a.nav-item,
   font-size: 1rem;
 }
 
+.session-url {
+  margin: var(--space-1) 0;
+  font-size: 0.8rem;
+  word-break: break-all;
+}
+
+.session-url a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+.session-url a:hover {
+  text-decoration: underline;
+}
+
 .session-actions {
   display: flex;
   gap: var(--space-2);