diff --git a/frontend/packages/web/index.html b/frontend/packages/web/index.html
index d9a3257..f4b616a 100644
--- a/frontend/packages/web/index.html
+++ b/frontend/packages/web/index.html
@@ -539,41 +539,10 @@
         color: var(--muted);
       }
 
-      .session-input {
+      .session-id-display {
         font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
         font-size: 12px;
-        color: var(--text);
-        background: var(--surface);
-        border: 1px solid var(--border-2);
-        padding: 4px 10px;
-        border-radius: 4px;
-        outline: none;
-        width: 140px;
-        transition: border-color var(--transition);
-      }
-
-      .session-input:focus {
-        border-color: var(--accent);
-      }
-
-      .session-input::placeholder {
-        color: var(--muted-2);
-      }
-
-      .session-new-btn {
-        background: var(--accent);
-        border: none;
-        border-radius: 4px;
-        padding: 4px 10px;
-        font-size: 11px;
-        font-weight: 600;
-        color: #fff;
-        cursor: pointer;
-        transition: background var(--transition);
-      }
-
-      .session-new-btn:hover {
-        background: var(--accent-hover);
+        color: var(--text-secondary);
       }
 
       .messages-container {
diff --git a/frontend/packages/web/src/App.tsx b/frontend/packages/web/src/App.tsx
index d4b4d52..54c65ec 100644
--- a/frontend/packages/web/src/App.tsx
+++ b/frontend/packages/web/src/App.tsx
@@ -424,13 +424,34 @@ export default function App() {
     setSessionError(null);
   };
 
-  const generateSessionId = () => {
+  const createNewSession = async () => {
     const chars = "abcdefghijklmnopqrstuvwxyz0123456789";
     let id = "session-";
     for (let i = 0; i < 8; i++) {
       id += chars[Math.floor(Math.random() * chars.length)];
     }
     setSessionId(id);
+    setEvents([]);
+    setOffset(0);
+    offsetRef.current = 0;
+    setSessionError(null);
+
+    // Create the session
+    try {
+      const body: Record<string, string> = { agent: agentId };
+      if (agentMode) body.agentMode = agentMode;
+      if (permissionMode) body.permissionMode = permissionMode;
+      if (model) body.model = model;
+      if (variant) body.variant = variant;
+
+      await apiFetch(`${API_PREFIX}/sessions/${id}`, {
+        method: "POST",
+        body
+      });
+      await fetchSessions();
+    } catch (error) {
+      setSessionError(error instanceof Error ? error.message : "Unable to create session");
+    }
   };
 
   const appendEvents = useCallback((incoming: UniversalEvent[]) => {
@@ -774,8 +795,8 @@ export default function App() {
             <span className="sidebar-title">Sessions</span>
             <button
               className="sidebar-add-btn"
-              onClick={generateSessionId}
-              title="New session ID"
+              onClick={createNewSession}
+              title="New session"
             >
               <Plus size={14} />
             </button>
@@ -818,19 +839,7 @@ export default function App() {
             <div className="panel-header-left">
               <MessageSquare className="button-icon" />
               <span className="panel-title">Session</span>
-              <input
-                className="session-input"
-                value={sessionId}
-                onChange={(e) => setSessionId(e.target.value)}
-                placeholder="session-id"
-              />
-              <button
-                className="session-new-btn"
-                onClick={createSession}
-                title="Create new session"
-              >
-                New
-              </button>
+              <span className="session-id-display">{sessionId}</span>
             </div>
             {polling && (
               <span className="pill accent">Live</span>