Display session duration in sidebar and simplify date formatting

Show human-readable session duration (e.g. "23m", "1h 15m") in the
session list metadata row when duration > 0. Add formatSessionDuration
helper that handles sub-minute, minute-only, and hour+minute ranges.

Also replace try/catch in formatDate with an isNaN guard on the parsed
Date, which is more idiomatic and avoids swallowing unrelated errors.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-30 09:25:51 -05:00
parent 4b13e7eeb9
commit 50b29ff0a2

View File

@@ -96,6 +96,12 @@ export function SessionList({ sessions, loading, selectedId, onSelect }: Props)
<span>{formatDate(session.modified || session.created)}</span> <span>{formatDate(session.modified || session.created)}</span>
<span className="text-border">·</span> <span className="text-border">·</span>
<span className="tabular-nums">{session.messageCount} msgs</span> <span className="tabular-nums">{session.messageCount} msgs</span>
{session.duration && session.duration > 0 && (
<>
<span className="text-border">·</span>
<span className="tabular-nums">{formatSessionDuration(session.duration)}</span>
</>
)}
</div> </div>
</button> </button>
); );
@@ -154,17 +160,24 @@ function formatProjectName(project: string): string {
return project; return project;
} }
function formatSessionDuration(ms: number): string {
const minutes = Math.floor(ms / 60000);
if (minutes < 1) return "<1m";
if (minutes < 60) return `${minutes}m`;
const hours = Math.floor(minutes / 60);
const rem = minutes % 60;
if (rem === 0) return `${hours}h`;
return `${hours}h ${rem}m`;
}
function formatDate(dateStr: string): string { function formatDate(dateStr: string): string {
if (!dateStr) return ""; if (!dateStr) return "";
try {
const d = new Date(dateStr); const d = new Date(dateStr);
if (isNaN(d.getTime())) return dateStr;
return d.toLocaleDateString(undefined, { return d.toLocaleDateString(undefined, {
month: "short", month: "short",
day: "numeric", day: "numeric",
hour: "2-digit", hour: "2-digit",
minute: "2-digit", minute: "2-digit",
}); });
} catch {
return dateStr;
}
} }