Chat history rename and delete are implemented

assets/app.js

@@ -185,15 +185,20 @@ function persistActiveSession() {
 
   const sessions = loadSessions();
   const now = Date.now();
+  const index = sessions.findIndex((session) => session.id === state.sessionId);
+  const existing = index >= 0 ? sessions[index] : null;
+  const title = existing?.titleManuallySet
+    ? existing.title
+    : sessionTitle(state.history);
+
   const payload = {
     id: state.sessionId,
-    title: sessionTitle(state.history),
+    title,
     updatedAt: now,
     history: state.history,
     globeState: state.globeState,
   };
 
-  const index = sessions.findIndex((session) => session.id === state.sessionId);
   if (index >= 0) {
     sessions[index] = { ...sessions[index], ...payload };
   } else {
@@ -204,6 +209,97 @@ function persistActiveSession() {
   saveSessions(sessions);
 }
 
+function updateSessionTitle(sessionId, title) {
+  const trimmed = String(title || "").trim();
+  if (!trimmed) {
+    return false;
+  }
+
+  const sessions = loadSessions();
+  const index = sessions.findIndex((session) => session.id === sessionId);
+  if (index < 0) {
+    return false;
+  }
+
+  sessions[index] = {
+    ...sessions[index],
+    title: trimmed,
+    titleManuallySet: true,
+    updatedAt: Date.now(),
+  };
+  sessions.sort((left, right) => right.updatedAt - left.updatedAt);
+  saveSessions(sessions);
+
+  if (!els.historyDialog.hidden) {
+    renderHistoryList();
+  }
+  return true;
+}
+
+function deleteSession(sessionId) {
+  const sessions = loadSessions().filter((session) => session.id !== sessionId);
+  saveSessions(sessions);
+
+  if (sessionId === state.sessionId) {
+    state.sessionId = crypto.randomUUID();
+    state.history = [];
+    state.globeState = emptyGlobeState();
+    resetForm();
+    els.chatInput.value = "";
+    renderMessages();
+    applyGlobeState(state.globeState);
+    showFormView();
+  }
+
+  renderHistoryList();
+}
+
+function startSessionRename(session, titleElement) {
+  const previousTitle = session.title || "Untitled chat";
+  const input = document.createElement("input");
+  input.type = "text";
+  input.className = "history-item-rename-input";
+  input.value = previousTitle;
+  input.setAttribute("aria-label", "Chat title");
+
+  titleElement.replaceWith(input);
+  input.focus();
+  input.select();
+
+  let finished = false;
+
+  function finish(save) {
+    if (finished) {
+      return;
+    }
+    finished = true;
+
+    if (save) {
+      const newTitle = input.value.trim();
+      if (newTitle && newTitle !== previousTitle) {
+        if (updateSessionTitle(session.id, newTitle)) {
+          return;
+        }
+      }
+    }
+
+    renderHistoryList();
+  }
+
+  input.addEventListener("keydown", (event) => {
+    event.stopPropagation();
+    if (event.key === "Enter") {
+      event.preventDefault();
+      finish(true);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      finish(false);
+    }
+  });
+
+  input.addEventListener("blur", () => finish(true));
+}
+
 function openHistoryDialog() {
   renderHistoryList();
   els.historyDialog.hidden = false;
@@ -226,13 +322,16 @@ function renderHistoryList() {
   }
 
   for (const session of sessions) {
-    const button = document.createElement("button");
-    button.type = "button";
-    button.className = "history-item";
+    const row = document.createElement("div");
+    row.className = "history-item-row";
     if (session.id === state.sessionId) {
-      button.classList.add("is-active");
+      row.classList.add("is-active");
     }
 
+    const mainButton = document.createElement("button");
+    mainButton.type = "button";
+    mainButton.className = "history-item-main";
+
     const title = document.createElement("span");
     title.className = "history-item-title";
     title.textContent = session.title || "Untitled chat";
@@ -241,10 +340,41 @@ function renderHistoryList() {
     meta.className = "history-item-meta";
     meta.textContent = formatSessionDate(session.updatedAt || session.createdAt);
 
-    button.appendChild(title);
-    button.appendChild(meta);
-    button.addEventListener("click", () => loadSession(session.id));
-    els.historyList.appendChild(button);
+    mainButton.appendChild(title);
+    mainButton.appendChild(meta);
+    mainButton.addEventListener("click", () => loadSession(session.id));
+
+    const actions = document.createElement("div");
+    actions.className = "history-item-actions";
+
+    const renameButton = document.createElement("button");
+    renameButton.type = "button";
+    renameButton.className = "history-item-action";
+    renameButton.textContent = "Rename";
+    renameButton.setAttribute("aria-label", "Rename chat");
+    renameButton.addEventListener("click", (event) => {
+      event.stopPropagation();
+      startSessionRename(session, title);
+    });
+
+    const deleteButton = document.createElement("button");
+    deleteButton.type = "button";
+    deleteButton.className = "history-item-action history-item-action-delete";
+    deleteButton.textContent = "Delete";
+    deleteButton.setAttribute("aria-label", "Delete chat");
+    deleteButton.addEventListener("click", (event) => {
+      event.stopPropagation();
+      if (confirm("Delete this chat? This cannot be undone.")) {
+        deleteSession(session.id);
+      }
+    });
+
+    actions.appendChild(renameButton);
+    actions.appendChild(deleteButton);
+
+    row.appendChild(mainButton);
+    row.appendChild(actions);
+    els.historyList.appendChild(row);
   }
 }
 

assets/server.css

@@ -697,24 +697,69 @@ button:disabled {
   font-size: 0.9rem;
 }
 
-.history-item {
+.history-item-row {
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+  border-radius: 8px;
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  background: rgba(17, 24, 39, 0.9);
+}
+
+.history-item-row.is-active {
+  border-color: #f59e0b;
+  background: rgba(245, 158, 11, 0.08);
+}
+
+.history-item-main {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 4px;
-  width: 100%;
+  flex: 1;
+  min-width: 0;
   text-align: left;
   padding: 10px 12px;
+  border: none;
+  background: transparent;
+  color: inherit;
 }
 
-.history-item.is-active {
-  border-color: #f59e0b;
-  background: rgba(245, 158, 11, 0.08);
+.history-item-main:hover {
+  background: rgba(148, 163, 184, 0.08);
+}
+
+.history-item-actions {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  flex-shrink: 0;
+  padding: 6px 8px 6px 0;
+}
+
+.history-item-action {
+  font-size: 0.75rem;
+  padding: 4px 8px;
+  white-space: nowrap;
+}
+
+.history-item-action-delete {
+  color: #fca5a5;
+  border-color: rgba(248, 113, 113, 0.35);
+}
+
+.history-item-action-delete:hover {
+  background: rgba(248, 113, 113, 0.12);
 }
 
 .history-item-title {
   font-weight: 600;
   color: #f9fafb;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .history-item-meta {
@@ -722,6 +767,18 @@ button:disabled {
   color: #9ca3af;
 }
 
+.history-item-rename-input {
+  width: 100%;
+  font-weight: 600;
+  font-size: inherit;
+  font-family: inherit;
+  color: #f9fafb;
+  background: rgba(2, 6, 23, 0.6);
+  border: 1px solid rgba(245, 158, 11, 0.5);
+  border-radius: 4px;
+  padding: 2px 6px;
+}
+
 @media (max-width: 900px) {
   .app-shell {
     height: auto;