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:
@@ -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 });
|
||||
});
|
||||
|
||||
@@ -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 };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user