added rename/delete sessions modal to chat client

packages/chat-client/src/App.jsx

@@ -48,6 +48,7 @@ export default function App() {
         onNewChat={createSession}
         isOpen={leftOpen}
         onToggle={() => setLeftOpen(o => !o)}
+        onSessionsChange={refreshSessions}
       />
 
       <ChatWindow

packages/chat-client/src/components/SessionList.jsx

@@ -1,6 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
+import SessionModal from './SessionModal';
+import { useContextMenu } from '../hooks/useContextMenu';
+import { renameSession, deleteSession } from '../api/orchestration';
+
+export default function SessionList({ sessions, activeSession, onSelectSession, onNewChat, isOpen, onToggle, onSessionsChange }) {
+    const [modalSession, setModalSession] = useState(null);
+    const [hoveredId, setHoveredId] = useState(null);
+    const { menu, open: openMenu, close: closeMenu } = useContextMenu();
 
-export default function SessionList({ sessions, activeSession, onSelectSession, onNewChat, isOpen, onToggle }) {
     function formatDate(ts) {
         if (!ts) return '';
         const date = new Date(ts * 1000);
@@ -14,10 +21,29 @@ export default function SessionList({ sessions, activeSession, onSelectSession,
 
     function getPreview(session) {
         if (session.isNew) return 'New conversation';
-    return session.external_id;
+        return session.name || session.external_id;
+    }
+
+    async function handleRename(session, name) {
+        try {
+            await renameSession(session.external_id, name);
+            onSessionsChange();
+        } catch (err) {
+            console.error('[SessionList] Rename failed:', err.message);
+        }
+    }
+
+    async function handleDelete(session) {
+        try {
+            await deleteSession(session.external_id);
+            onSessionsChange();
+        } catch (err) {
+            console.error('[SessionList] Delete failed:', err.message);
+        }
     }
 
     return (
+        <>
         <div style={{
             width: isOpen ? 'var(--sidebar-width)' : '56px',
             flexShrink: 0,
@@ -57,25 +83,33 @@ export default function SessionList({ sessions, activeSession, onSelectSession,
             <div className="flex-1 scroll-y">
                 {isOpen && sessions.map(session => {
                     const isActive = activeSession?.external_id === session.external_id;
+                    const isHovered = hoveredId === session.external_id;
+
                     return (
-            <button
+                        <div
                             key={session.external_id}
+                            onMouseEnter={() => setHoveredId(session.external_id)}
+                            onMouseLeave={() => setHoveredId(null)}
+                            onContextMenu={e => !session.isNew && openMenu(e, session)}
+                            style={{
+                                position: 'relative',
+                                background: isActive ? 'var(--bg-elevated)' : isHovered ? 'var(--bg-elevated)' : 'transparent',
+                                borderLeft: isActive ? '2px solid var(--accent)' : '2px solid transparent',
+                                transition: 'background 0.1s',
+                            }}
+                        >
+                            <button
                                 onClick={() => onSelectSession(session)}
                                 className="btn-reset"
                                 style={{
                                     width: '100%',
                                     padding: '10px 16px',
-                background: isActive ? 'var(--bg-elevated)' : 'transparent',
-                borderLeft: isActive ? '2px solid var(--accent)' : '2px solid transparent',
                                     textAlign: 'left',
                                     flexDirection: 'column',
                                     gap: '3px',
-                transition: 'background 0.1s',
                                 }}
-              onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = 'var(--bg-elevated)'; }}
-              onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent'; }}
                             >
-              <div className="flex truncate" style={{ justifyContent: 'space-between', gap: '8px' }}>
+                                <div className="flex" style={{ justifyContent: 'space-between', gap: '8px', width: '100%' }}>
                                     <span className="text-base truncate" style={{
                                         color: isActive ? 'var(--text-primary)' : 'var(--text-secondary)',
                                         fontWeight: isActive ? 500 : 400,
@@ -83,12 +117,36 @@ export default function SessionList({ sessions, activeSession, onSelectSession,
                                     }}>
                                         {getPreview(session)}
                                     </span>
-                <span className="text-xs text-muted flex-shrink">{formatDate(session.updated_at)}</span>
+
+                                    {/* Hover action icons */}
+                                    {isHovered && !session.isNew ? (
+                                        <div className="flex flex-shrink" style={{ gap: '4px' }}
+                                            onClick={e => e.stopPropagation()}
+                                        >
+                                            <button
+                                                className="btn-icon"
+                                                title="Rename"
+                                                onClick={() => setModalSession(session)}
+                                                style={{ padding: '2px 4px', fontSize: '12px' }}
+                                            >✎</button>
+                                            <button
+                                                className="btn-icon"
+                                                title="Delete"
+                                                onClick={() => handleDelete(session)}
+                                                style={{ padding: '2px 4px', fontSize: '12px', color: '#ff6b6b' }}
+                                            >✕</button>
+                                        </div>
+                                    ) : (
+                                        <span className="text-xs text-muted flex-shrink">
+                                            {formatDate(session.updated_at)}
+                                        </span>
+                                    )}
                                 </div>
                                 {session.isNew && (
                                     <span className="text-xs text-accent" style={{ fontStyle: 'italic' }}>Unsaved</span>
                                 )}
                             </button>
+                        </div>
                     );
                 })}
 
@@ -99,5 +157,48 @@ export default function SessionList({ sessions, activeSession, onSelectSession,
                 )}
             </div>
         </div>
+
+        {/* Context menu */}
+        {menu && (
+            <div
+                onClick={e => e.stopPropagation()}
+                style={{
+                    position: 'fixed',
+                    top: menu.y,
+                    left: menu.x,
+                    background: 'var(--bg-elevated)',
+                    border: '1px solid var(--border)',
+                    borderRadius: 'var(--radius-md)',
+                    padding: '4px',
+                    zIndex: 50,
+                    minWidth: '140px',
+                }}
+            >
+                <button className="btn-reset text-base" onClick={() => { setModalSession(menu.session); closeMenu(); }}
+                    style={{ width: '100%', padding: '8px 12px', borderRadius: 'var(--radius-sm)', justifyContent: 'flex-start', color: 'var(--text-primary)' }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-surface)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                >
+                    ✎ Rename
+                </button>
+                <button className="btn-reset text-base" onClick={() => { handleDelete(menu.session); closeMenu(); }}
+                    style={{ width: '100%', padding: '8px 12px', borderRadius: 'var(--radius-sm)', justifyContent: 'flex-start', color: '#ff6b6b' }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-surface)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                >
+                    ✕ Delete
+                </button>
+            </div>
+        )}
+
+        {/* Rename modal */}
+        {modalSession && (
+            <SessionModal
+                session={modalSession}
+                onRename={handleRename}
+                onClose={() => setModalSession(null)}
+            />
+        )}
+        </>
     );
 }

packages/chat-client/src/components/SessionModal.jsx

@@ -0,0 +1,108 @@
+import React, {useState, useEffect, useRef} from "react";
+
+export default function SessionModal({ session, onRename, onClose}) {
+    const [name, setName] = useState(session?.name || '');
+    const inputRef = useRef(null)
+
+    //Focus input when modal opens
+    useEffect(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+    }, []);
+
+    function handleSubmit() {
+        const trimmed = name.trim();
+        if (!trimmed) return;
+
+        onRename(session, trimmed);
+        onClose();
+    }
+
+    function handleKeyDown(e) {
+        if (e.key === 'Enter') handleSubmit();
+        if(e.key === 'Escape') onClose();
+        
+    }
+
+    if (!session) return null;
+    return (
+        //Backdrop
+        <div
+            onClick={onClose}
+            style={{
+                position:'fixed',
+                inset: 0,
+                background: 'rgba(0,0,0,0.5)',
+                display:'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                zIndex: 100,
+            }}
+        >
+            {/* Modal - stop click propagating to backdrop */}
+            <div
+                onClick={e => e.stopPropagation()}
+                style={{
+                    background: 'var(--bg-surface)',
+                    border: '1px solid var(--border)',
+                    borderRadius: 'var(--radius-lg)',
+                    padding: '24px',
+                    width: '360px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '16px',
+                }}
+            >
+                {/* Modal Header*/}
+                <h2 style={{ fontSize: '15px', fontWeight: 600, color: 'var(--text-primary)' }}>
+                    Session Settings
+                </h2>
+
+                {/* Modal Session name input*/}
+                <div className="flex-col" style={{ gap: '8px' }}>
+                    <label className="label-upper">Name</label>
+                    <input
+                        ref={inputRef}
+                        value={name}
+                        onChange={e => setName(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        placeholder="Enter session name..."
+                        style={{
+                            background: 'var(--bg-elevated)',
+                            border: '1px solid var(--border)',
+                            borderRadius: 'var(--radius-md)',
+                            padding: '8px 12px',
+                            color: 'var(--text-primary)',
+                            fontSize: '14px',
+                            outline: 'none',
+                            width: '100%',
+                        }}
+                    />
+                </div>
+                
+                {/* Modal Buttons*/}
+                <div className="flex" style={{ gap: '8px', justifyContent: 'flex-end' }}>
+                    <button className="btn-reset text-base text-muted"
+                        onClick={onClose}
+                        style={{ padding: '8px 14px', borderRadius: 'var(--radius-md)' }}
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        className="btn-primary"
+                        onClick={handleSubmit}
+                        disabled={!name.trim()}
+                        style={{ padding: '8px 16px' }}
+                    >
+                        Save
+                    </button>
+                </div>
+
+            </div>
+
+        </div>
+
+
+
+    )
+}