chat: rename sessions in Claude's store + delete confirm

Rename appends a {"type":"summary",...} entry to the session's JSONL transcript
(Claude's own format, so the title lives in .claude); the reader takes the last
summary as the title, without a timestamp so it doesn't reorder the list.
PATCH /chat/sessions/:id/title backs it. The list gets inline rename (pencil ->
edit in place) and a two-step delete confirm so a stray click can't nuke a
transcript. Rename verified against a synthetic store.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-24 12:01:16 +00:00
co-authored by Claude Opus 4.8
parent 4215c8df0a
commit b3b8a59863
4 changed files with 161 additions and 49 deletions
+11 -1
View File
@@ -1,5 +1,5 @@
import { createRouter } from '../../create-router';
import { getClaudeSessionsCwd, listClaudeSessions, loadClaudeSession, deleteClaudeSession } from './claude-sessions';
import { getClaudeSessionsCwd, listClaudeSessions, loadClaudeSession, deleteClaudeSession, renameClaudeSession } from './claude-sessions';
export const chatRouter = createRouter();
@@ -26,3 +26,13 @@ chatRouter.delete('/sessions/:id', (ctx) => {
if (!ok) return ctx.text('Not found', 404);
return ctx.json({ ok: true });
});
// PATCH /chat/sessions/:id/title — rename by writing a summary entry into Claude's transcript.
chatRouter.patch('/sessions/:id/title', async (ctx) => {
const email = ctx.get('user').email;
const { title } = await ctx.req.json<{ title?: string }>();
if (!title?.trim()) return ctx.text('title is required', 400);
const ok = renameClaudeSession(email, getClaudeSessionsCwd(email), ctx.req.param('id'), title.trim());
if (!ok) return ctx.text('Not found', 404);
return ctx.json({ ok: true });
});
+40 -6
View File
@@ -1,4 +1,4 @@
import { readdirSync, readFileSync, existsSync, statSync, mkdirSync, rmSync } from 'node:fs';
import { readdirSync, readFileSync, existsSync, statSync, mkdirSync, rmSync, appendFileSync } from 'node:fs';
import { join } from 'node:path';
import { DATA_PATH } from '../../data-path';
@@ -52,6 +52,8 @@ type Entry = {
timestamp?: string;
sessionId?: string;
cwd?: string;
uuid?: string;
summary?: string;
message?: { role?: string; content?: unknown };
isMeta?: boolean;
};
@@ -64,7 +66,8 @@ function summarizeTranscript(filePath: string, id: string): ClaudeSessionSummary
return null;
}
let title = '';
let firstUserText = '';
let summaryTitle = ''; // a `summary` entry (our rename, appended to the transcript) wins over the first message
let cwd = '';
let firstTs = '';
let lastTs = '';
@@ -83,10 +86,12 @@ function summarizeTranscript(filePath: string, id: string): ClaudeSessionSummary
if (!firstTs) firstTs = entry.timestamp;
lastTs = entry.timestamp;
}
if (entry.type === 'user' || entry.type === 'assistant') {
if (entry.type === 'summary' && typeof entry.summary === 'string') {
summaryTitle = entry.summary; // last one wins
} else if (entry.type === 'user' || entry.type === 'assistant') {
messageCount += 1;
if (!title && entry.type === 'user' && !entry.isMeta) {
title = entryText(entry.message).split('\n')[0]!.trim();
if (!firstUserText && entry.type === 'user' && !entry.isMeta) {
firstUserText = entryText(entry.message).split('\n')[0]!.trim();
}
}
}
@@ -94,7 +99,7 @@ function summarizeTranscript(filePath: string, id: string): ClaudeSessionSummary
const mtime = statSync(filePath).mtime.toISOString();
return {
id,
title: title || '(untitled)',
title: summaryTitle || firstUserText || '(untitled)',
cwd,
createdAt: firstTs || mtime,
updatedAt: lastTs || mtime,
@@ -195,6 +200,35 @@ export function deleteClaudeSession(email: string, cwd: string, sessionId: strin
return true;
}
/**
* Rename a session by appending a `summary` entry to its transcript — Claude's own on-disk format, so
* the title lives in .claude (source of truth). Our reader takes the last summary as the title; no
* timestamp is written so the rename doesn't reorder the list.
*/
export function renameClaudeSession(email: string, cwd: string, sessionId: string, title: string): boolean {
const filePath = join(claudeProjectsDir(email), projectSlug(cwd), `${sessionId}.jsonl`);
if (!existsSync(filePath)) return false;
// Attach the summary to the transcript's tip (the last entry carrying a uuid).
let leafUuid = sessionId;
const lines = readFileSync(filePath, 'utf-8').split('\n');
for (let i = lines.length - 1; i >= 0; i--) {
if (!lines[i]!.trim()) continue;
try {
const entry = JSON.parse(lines[i]!) as Entry;
if (entry.uuid) {
leafUuid = entry.uuid;
break;
}
} catch {
/* skip */
}
}
appendFileSync(filePath, `${JSON.stringify({ type: 'summary', summary: title, leafUuid })}\n`);
return true;
}
/** List sessions Claude has stored for a given working directory, newest first. */
export function listClaudeSessions(email: string, cwd: string): ClaudeSessionSummary[] {
const dir = join(claudeProjectsDir(email), projectSlug(cwd));
@@ -1,6 +1,6 @@
import { useRef, useState, useCallback } from 'react';
import { useNavigate } from 'react-router';
import { Plus, MessageSquare, RefreshCw, Loader2, Trash2 } from 'lucide-react';
import { Plus, MessageSquare, RefreshCw, Loader2, Trash2, Pencil, Check, X } from 'lucide-react';
import { usePanelChannel } from 'hooks/usePanelChannel';
import { useClaudeSessions } from 'state/useClaudeSessions';
import type { SelectedSession } from './ChatDetailPanel';
@@ -10,9 +10,12 @@ import type { ChatMessage } from '../Chat/types';
// Clicking a session loads its transcript and continues the real Claude session via --resume.
export const SessionList = () => {
const navigate = useNavigate();
const { sessions, isLoading, refetch, loadSession, deleteSession } = useClaudeSessions();
const { sessions, isLoading, refetch, loadSession, deleteSession, renameSession } = useClaudeSessions();
const [selected, setSelected] = usePanelChannel<SelectedSession>('chat:selected-session', null);
const [openingId, setOpeningId] = useState<string | null>(null);
const [editingId, setEditingId] = useState<string | null>(null);
const [editValue, setEditValue] = useState('');
const [confirmingId, setConfirmingId] = useState<string | null>(null);
const scrolledRef = useRef(false);
const selectedRef = useCallback((node: HTMLDivElement | null) => {
@@ -23,23 +26,32 @@ export const SessionList = () => {
}, []);
const handleSelect = async (id: string) => {
if (openingId) return;
if (openingId || editingId) return;
setOpeningId(id);
try {
const detail = await loadSession(id);
setSelected({
id,
model: detail.model,
resumeSessionId: id,
initialMessages: detail.messages as ChatMessage[],
});
setSelected({ id, model: detail.model, resumeSessionId: id, initialMessages: detail.messages as ChatMessage[] });
} finally {
setOpeningId(null);
}
};
const startRename = (id: string, current: string) => {
setConfirmingId(null);
setEditingId(id);
setEditValue(current);
};
const commitRename = async () => {
const id = editingId;
const title = editValue.trim();
setEditingId(null);
if (id && title) await renameSession(id, title);
};
const handleDelete = async (id: string) => {
if (selected?.id === id) setSelected(null);
setConfirmingId(null);
await deleteSession(id);
};
@@ -79,6 +91,8 @@ export const SessionList = () => {
{sessions.map((session) => {
const isActive = selected?.id === session.id;
const isEditing = editingId === session.id;
const isConfirming = confirmingId === session.id;
return (
<div
key={session.id}
@@ -89,39 +103,85 @@ export const SessionList = () => {
: 'border-duck-dark/10 dark:border-foreground/10 bg-background/80 hover:bg-background/90'
}`}
>
<button
onClick={() => handleSelect(session.id)}
disabled={!!openingId}
className="flex flex-1 items-center gap-3 px-4 py-3 min-w-0 text-left cursor-pointer"
>
{openingId === session.id ? (
<Loader2 className="h-4 w-4 shrink-0 text-duck-teal/60 animate-spin" />
) : (
<MessageSquare className="h-4 w-4 shrink-0 text-duck-teal/60" />
)}
<div className="min-w-0 flex-1">
<div className="text-sm font-medium text-duck-dark/80 dark:text-foreground/80 truncate">{session.title}</div>
<div className="flex items-center gap-2 text-xs text-duck-dark/40 dark:text-foreground/40">
<span>
{new Date(session.updatedAt).toLocaleDateString(undefined, {
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
})}
</span>
<span>·</span>
<span>{session.messageCount} msg{session.messageCount === 1 ? '' : 's'}</span>
</div>
{isEditing ? (
<div className="flex flex-1 items-center gap-2 px-4 py-3 min-w-0">
<input
autoFocus
value={editValue}
onChange={(ev) => setEditValue(ev.target.value)}
onKeyDown={(ev) => {
if (ev.key === 'Enter') commitRename();
if (ev.key === 'Escape') setEditingId(null);
}}
onBlur={commitRename}
className="flex-1 min-w-0 bg-transparent border-b border-duck-teal/40 text-sm outline-none"
/>
<button onMouseDown={(ev) => ev.preventDefault()} onClick={commitRename} className="p-1 text-duck-teal hover:opacity-80 cursor-pointer" title="Save">
<Check className="h-3.5 w-3.5" />
</button>
<button onMouseDown={(ev) => ev.preventDefault()} onClick={() => setEditingId(null)} className="p-1 opacity-50 hover:opacity-100 cursor-pointer" title="Cancel">
<X className="h-3.5 w-3.5" />
</button>
</div>
</button>
<button
onClick={() => handleDelete(session.id)}
className="shrink-0 mr-2 p-1.5 rounded text-duck-dark/30 dark:text-foreground/30 opacity-0 group-hover:opacity-100 hover:text-red-500 cursor-pointer transition-colors"
title="Delete session"
>
<Trash2 className="h-3.5 w-3.5" />
</button>
) : (
<>
<button
onClick={() => handleSelect(session.id)}
disabled={!!openingId}
className="flex flex-1 items-center gap-3 px-4 py-3 min-w-0 text-left cursor-pointer"
>
{openingId === session.id ? (
<Loader2 className="h-4 w-4 shrink-0 text-duck-teal/60 animate-spin" />
) : (
<MessageSquare className="h-4 w-4 shrink-0 text-duck-teal/60" />
)}
<div className="min-w-0 flex-1">
<div className="text-sm font-medium text-duck-dark/80 dark:text-foreground/80 truncate">{session.title}</div>
<div className="flex items-center gap-2 text-xs text-duck-dark/40 dark:text-foreground/40">
<span>
{new Date(session.updatedAt).toLocaleDateString(undefined, {
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
})}
</span>
<span>·</span>
<span>{session.messageCount} msg{session.messageCount === 1 ? '' : 's'}</span>
</div>
</div>
</button>
{isConfirming ? (
<div className="flex shrink-0 items-center gap-1 mr-2">
<span className="text-xs text-red-500">Delete?</span>
<button onClick={() => handleDelete(session.id)} className="p-1 rounded text-red-500 hover:bg-red-500/10 cursor-pointer" title="Confirm delete">
<Check className="h-3.5 w-3.5" />
</button>
<button onClick={() => setConfirmingId(null)} className="p-1 rounded opacity-50 hover:opacity-100 cursor-pointer" title="Cancel">
<X className="h-3.5 w-3.5" />
</button>
</div>
) : (
<div className="flex shrink-0 items-center mr-2 opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={() => startRename(session.id, session.title)}
className="p-1.5 rounded text-duck-dark/30 dark:text-foreground/30 hover:text-duck-teal cursor-pointer transition-colors"
title="Rename"
>
<Pencil className="h-3.5 w-3.5" />
</button>
<button
onClick={() => setConfirmingId(session.id)}
className="p-1.5 rounded text-duck-dark/30 dark:text-foreground/30 hover:text-red-500 cursor-pointer transition-colors"
title="Delete session"
>
<Trash2 className="h-3.5 w-3.5" />
</button>
</div>
)}
</>
)}
</div>
);
})}
@@ -47,5 +47,13 @@ export function useClaudeSessions() {
[client, invalidate],
);
return { sessions: data?.sessions ?? [], isLoading, refetch, loadSession, deleteSession, invalidate };
const renameSession = useCallback(
async (id: string, title: string) => {
await client.patch(`/chat/sessions/${id}/title`, { title });
invalidate();
},
[client, invalidate],
);
return { sessions: data?.sessions ?? [], isLoading, refetch, loadSession, deleteSession, renameSession, invalidate };
}