From a4b58dc62ecbf24a16788bc072b0422963e290b0 Mon Sep 17 00:00:00 2001
From: Nathan Flurry <git@nathanflurry.com>
Date: Sun, 25 Jan 2026 04:17:57 -0800
Subject: [PATCH] feat: add no session selected state on initial load

---
 frontend/packages/web/src/App.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/frontend/packages/web/src/App.tsx b/frontend/packages/web/src/App.tsx
index 54c65ec..be2b065 100644
--- a/frontend/packages/web/src/App.tsx
+++ b/frontend/packages/web/src/App.tsx
@@ -203,7 +203,7 @@ export default function App() {
   const [permissionMode, setPermissionMode] = useState("default");
   const [model, setModel] = useState("");
   const [variant, setVariant] = useState("");
-  const [sessionId, setSessionId] = useState("demo-session");
+  const [sessionId, setSessionId] = useState("");
   const [sessionError, setSessionError] = useState<string | null>(null);
 
   const [message, setMessage] = useState("");
@@ -839,7 +839,7 @@ export default function App() {
             <div className="panel-header-left">
               <MessageSquare className="button-icon" />
               <span className="panel-title">Session</span>
-              <span className="session-id-display">{sessionId}</span>
+              {sessionId && <span className="session-id-display">{sessionId}</span>}
             </div>
             {polling && (
               <span className="pill accent">Live</span>
@@ -847,7 +847,15 @@ export default function App() {
           </div>
 
           <div className="messages-container">
-            {transcriptMessages.length === 0 && !sessionError ? (
+            {!sessionId ? (
+              <div className="empty-state">
+                <MessageSquare className="empty-state-icon" />
+                <div className="empty-state-title">No Session Selected</div>
+                <p className="empty-state-text">
+                  Click + in the sidebar to create a new session, or select an existing one.
+                </p>
+              </div>
+            ) : transcriptMessages.length === 0 && !sessionError ? (
               <div className="empty-state">
                 <Terminal className="empty-state-icon" />
                 <div className="empty-state-title">Ready to Chat</div>
@@ -884,13 +892,14 @@ export default function App() {
                 value={message}
                 onChange={(e) => setMessage(e.target.value)}
                 onKeyDown={handleKeyDown}
-                placeholder="Send a message..."
+                placeholder={sessionId ? "Send a message..." : "Select or create a session first"}
                 rows={1}
+                disabled={!sessionId}
               />
               <button
                 className="send-button"
                 onClick={sendMessage}
-                disabled={!message.trim()}
+                disabled={!sessionId || !message.trim()}
               >
                 <Send />
               </button>