Fix AI chat UX

- Show user message immediately while waiting for AI
- Add delete button for each conversation

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/app/ai/page.tsx

@@ -77,6 +77,17 @@ export default function AIChatPage() {
     const userContent = input.trim();
     setInput("");
 
+    // Show user message immediately in UI
+    const tempUserMsg = { id: "temp-" + Date.now(), role: "user" as const, content: userContent, createdAt: new Date().toISOString() };
+    if (currentSessionId) {
+      const sessionIdx = sessions.findIndex(s => s.id === currentSessionId);
+      if (sessionIdx >= 0) {
+        const updatedSessions = [...sessions];
+        updatedSessions[sessionIdx] = { ...updatedSessions[sessionIdx], messages: [...(updatedSessions[sessionIdx].messages || []), tempUserMsg] };
+        setSessions(updatedSessions);
+      }
+    }
+
     // Auto-create session if none selected
     let sessionId = currentSessionId;
     if (!sessionId && childId) {
@@ -89,7 +100,7 @@ export default function AIChatPage() {
         const data = await res.json();
         if (data.session) {
           sessionId = data.session.id;
-          const newSession = { ...data.session, messages: [] };
+          const newSession = { ...data.session, messages: [tempUserMsg] };
           setSessions([newSession, ...sessions]);
           setCurrentSessionId(sessionId);
         }
@@ -166,10 +177,18 @@ export default function AIChatPage() {
               <div
                 key={session.id}
                 onClick={() => setCurrentSessionId(session.id)}
-                className={`p-2 rounded-lg cursor-pointer ${session.id === currentSessionId ? "bg-rose-100" : ""}`}
+                className={`p-2 rounded-lg cursor-pointer flex justify-between items-center ${session.id === currentSessionId ? "bg-rose-100" : ""}`}
               >
-                <div className="text-sm font-medium truncate">{session.title}</div>
+                <div className="flex-1">
-                <div className="text-xs text-gray-400">{new Date(session.updatedAt).toLocaleDateString()}</div>
+                  <div className="text-sm font-medium truncate">{session.title}</div>
+                  <div className="text-xs text-gray-400">{new Date(session.updatedAt).toLocaleDateString()}</div>
+                </div>
+                <button
+                  onClick={(e) => { e.stopPropagation(); deleteSession(session.id); }}
+                  className="text-red-400 p-1"
+                >
+                  🗑️
+                </button>
               </div>
             ))}
           </div>