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,103 +1,204 @@
-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 }) {
+export default function SessionList({ sessions, activeSession, onSelectSession, onNewChat, isOpen, onToggle, onSessionsChange }) {
-  function formatDate(ts) {
+    const [modalSession, setModalSession] = useState(null);
-    if (!ts) return '';
+    const [hoveredId, setHoveredId] = useState(null);
-    const date = new Date(ts * 1000);
+    const { menu, open: openMenu, close: closeMenu } = useContextMenu();
-    const now = new Date();
-    const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
-    if (diffDays === 0) return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-    if (diffDays === 1) return 'Yesterday';
-    if (diffDays < 7) return date.toLocaleDateString([], { weekday: 'long' });
-    return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
-  }
 
-  function getPreview(session) {
+    function formatDate(ts) {
-    if (session.isNew) return 'New conversation';
+        if (!ts) return '';
-    return session.external_id;
+        const date = new Date(ts * 1000);
-  }
+        const now = new Date();
+        const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
+        if (diffDays === 0) return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        if (diffDays === 1) return 'Yesterday';
+        if (diffDays < 7) return date.toLocaleDateString([], { weekday: 'long' });
+        return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
+    }
 
-  return (
+    function getPreview(session) {
-    <div style={{
+        if (session.isNew) return 'New conversation';
-      width: isOpen ? 'var(--sidebar-width)' : '56px',
+        return session.name || session.external_id;
-      flexShrink: 0,
+    }
-      background: 'var(--bg-surface)',
-      borderRight: '1px solid var(--border)',
-      transition: 'width 0.2s ease',
-      overflow: 'hidden',
-    }} className="flex-col">
 
-      {/* Header */}
+    async function handleRename(session, name) {
-      <div className="panel-header" style={{
+        try {
-        justifyContent: isOpen ? 'space-between' : 'center',
+            await renameSession(session.external_id, name);
-        padding: isOpen ? '0 12px 0 16px' : '0',
+            onSessionsChange();
-      }}>
+        } catch (err) {
-        {isOpen && <span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Conversations</span>}
+            console.error('[SessionList] Rename failed:', err.message);
-        <button className="btn-icon" onClick={onToggle}>{isOpen ? '◀' : '▶'}</button>
+        }
-      </div>
+    }
 
-      {/* New chat button */}
+    async function handleDelete(session) {
-      <div style={{ padding: isOpen ? '12px' : '12px 8px', flexShrink: 0 }}>
+        try {
-        <button className="btn-primary" onClick={onNewChat} style={{
+            await deleteSession(session.external_id);
-          width: '100%',
+            onSessionsChange();
-          padding: isOpen ? '8px 12px' : '8px',
+        } catch (err) {
-          display: 'flex',
+            console.error('[SessionList] Delete failed:', err.message);
-          alignItems: 'center',
+        }
-          justifyContent: isOpen ? 'flex-start' : 'center',
+    }
-          gap: '8px',
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-        }}>
-          <span style={{ fontSize: '18px', lineHeight: 1, flexShrink: 0 }}>+</span>
-          {isOpen && <span>New Chat</span>}
-        </button>
-      </div>
 
-      {/* Session list */}
+    return (
-      <div className="flex-1 scroll-y">
+        <>
-        {isOpen && sessions.map(session => {
+        <div style={{
-          const isActive = activeSession?.external_id === session.external_id;
+            width: isOpen ? 'var(--sidebar-width)' : '56px',
-          return (
+            flexShrink: 0,
-            <button
+            background: 'var(--bg-surface)',
-              key={session.external_id}
+            borderRight: '1px solid var(--border)',
-              onClick={() => onSelectSession(session)}
+            transition: 'width 0.2s ease',
-              className="btn-reset"
+            overflow: 'hidden',
-              style={{
+        }} className="flex-col">
-                width: '100%',
+
-                padding: '10px 16px',
+            {/* Header */}
-                background: isActive ? 'var(--bg-elevated)' : 'transparent',
+            <div className="panel-header" style={{
-                borderLeft: isActive ? '2px solid var(--accent)' : '2px solid transparent',
+                justifyContent: isOpen ? 'space-between' : 'center',
-                textAlign: 'left',
+                padding: isOpen ? '0 12px 0 16px' : '0',
-                flexDirection: 'column',
+            }}>
-                gap: '3px',
+                {isOpen && <span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Conversations</span>}
-                transition: 'background 0.1s',
+                <button className="btn-icon" onClick={onToggle}>{isOpen ? '◀' : '▶'}</button>
-              }}
+            </div>
-              onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = 'var(--bg-elevated)'; }}
+
-              onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent'; }}
+            {/* New chat button */}
-            >
+            <div style={{ padding: isOpen ? '12px' : '12px 8px', flexShrink: 0 }}>
-              <div className="flex truncate" style={{ justifyContent: 'space-between', gap: '8px' }}>
+                <button className="btn-primary" onClick={onNewChat} style={{
-                <span className="text-base truncate" style={{
+                    width: '100%',
-                  color: isActive ? 'var(--text-primary)' : 'var(--text-secondary)',
+                    padding: isOpen ? '8px 12px' : '8px',
-                  fontWeight: isActive ? 500 : 400,
+                    display: 'flex',
-                  flex: 1,
+                    alignItems: 'center',
+                    justifyContent: isOpen ? 'flex-start' : 'center',
+                    gap: '8px',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
                 }}>
-                  {getPreview(session)}
+                    <span style={{ fontSize: '18px', lineHeight: 1, flexShrink: 0 }}>+</span>
-                </span>
+                    {isOpen && <span>New Chat</span>}
-                <span className="text-xs text-muted flex-shrink">{formatDate(session.updated_at)}</span>
+                </button>
-              </div>
+            </div>
-              {session.isNew && (
-                <span className="text-xs text-accent" style={{ fontStyle: 'italic' }}>Unsaved</span>
-              )}
-            </button>
-          );
-        })}
 
-        {isOpen && sessions.length === 0 && (
+            {/* Session list */}
-          <div className="text-base text-muted" style={{ padding: '24px 16px', textAlign: 'center' }}>
+            <div className="flex-1 scroll-y">
-            No conversations yet
+                {isOpen && sessions.map(session => {
-          </div>
+                    const isActive = activeSession?.external_id === session.external_id;
+                    const isHovered = hoveredId === session.external_id;
+
+                    return (
+                        <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',
+                                    textAlign: 'left',
+                                    flexDirection: 'column',
+                                    gap: '3px',
+                                }}
+                            >
+                                <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,
+                                        flex: 1,
+                                    }}>
+                                        {getPreview(session)}
+                                    </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>
+                    );
+                })}
+
+                {isOpen && sessions.length === 0 && (
+                    <div className="text-base text-muted" style={{ padding: '24px 16px', textAlign: 'center' }}>
+                        No conversations yet
+                    </div>
+                )}
+            </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>
         )}
-      </div>
+
-    </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>
+
+
+
+    )
+}