Polish the chat sidebar: relative timestamps, tag chips, hover states

Show a compact relative time per chat, render tags as chips instead
of plain "#tag" text, add an active-row accent border, and loosen
row spacing so the list breathes a bit more.

Author: voidstackloop

frontend/src/components/layout.tsx

@@ -35,6 +35,7 @@ import type { ChatOptions, ChatSession, Project, PromptPreset } from "@/types/el
 import { extractVariables, fillTemplate } from "@/lib/prompt-templates";
 import { PromptVariableDialog } from "@/components/prompt-variable-dialog";
 import { DEFAULT_KEYBINDINGS, matchesBinding, subscribeKeybindings, type KeybindingAction } from "@/lib/keybindings";
+import { formatRelativeTime } from "@/lib/format-time";
 
 function SessionRow({
     session,
@@ -68,17 +69,30 @@ function SessionRow({
         <div
             onClick={onOpen}
             className={cn(
-                "group flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-muted",
-                active ? "bg-muted text-foreground" : "text-muted-foreground"
+                "group relative flex cursor-pointer items-center gap-2 rounded-lg border-l-2 px-2 py-2 text-sm transition-colors",
+                active
+                    ? "border-primary bg-muted text-foreground"
+                    : "border-transparent text-muted-foreground hover:border-border hover:bg-muted/60"
             )}
         >
             <MessageSquare className="size-3.5 shrink-0" />
             <span className="flex-1 truncate">{session.title}</span>
             {tags.length > 0 && (
-                <span className="hidden shrink-0 truncate text-[10px] text-muted-foreground sm:inline">
-                    {tags.map((tg) => `#${tg}`).join(" ")}
+                <span className="hidden shrink-0 items-center gap-1 sm:flex">
+                    {tags.slice(0, 2).map((tg) => (
+                        <span
+                            key={tg}
+                            className="rounded-full bg-muted px-1.5 py-0.5 text-[10px] leading-none text-muted-foreground group-hover:bg-background"
+                        >
+                            {tg}
+                        </span>
+                    ))}
+                    {tags.length > 2 && <span className="text-[10px] text-muted-foreground">+{tags.length - 2}</span>}
                 </span>
             )}
+            <span className="hidden shrink-0 text-[10px] tabular-nums text-muted-foreground/70 group-hover:hidden sm:inline">
+                {formatRelativeTime(session.updatedAt)}
+            </span>
             <Popover>
                 <PopoverTrigger
                     render={
@@ -475,7 +489,7 @@ function ProjectGroup({
                 </Popover>
             </div>
             {!collapsed && (
-                <div className="ml-4 flex flex-col gap-0.5 border-l border-border pl-2">
+                <div className="ml-4 flex flex-col gap-1 border-l border-border pl-2">
                     {sessions.length === 0 && (
                         <p className="px-2 py-1 text-xs text-muted-foreground">No chats yet.</p>
                     )}

frontend/src/lib/format-time.test.ts

@@ -0,0 +1,41 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { formatRelativeTime } from "./format-time";
+
+describe("formatRelativeTime", () => {
+    const now = new Date("2026-01-15T12:00:00.000Z");
+
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+
+    it("returns 'now' for a timestamp seconds ago", () => {
+        vi.useFakeTimers();
+        vi.setSystemTime(now);
+        expect(formatRelativeTime(new Date(now.getTime() - 30_000).toISOString())).toBe("now");
+    });
+
+    it("returns minutes for a timestamp under an hour ago", () => {
+        vi.useFakeTimers();
+        vi.setSystemTime(now);
+        expect(formatRelativeTime(new Date(now.getTime() - 5 * 60_000).toISOString())).toBe("5m");
+    });
+
+    it("returns hours for a timestamp under a day ago", () => {
+        vi.useFakeTimers();
+        vi.setSystemTime(now);
+        expect(formatRelativeTime(new Date(now.getTime() - 3 * 3_600_000).toISOString())).toBe("3h");
+    });
+
+    it("returns days for a timestamp under a week ago", () => {
+        vi.useFakeTimers();
+        vi.setSystemTime(now);
+        expect(formatRelativeTime(new Date(now.getTime() - 2 * 86_400_000).toISOString())).toBe("2d");
+    });
+
+    it("falls back to a short date for anything a month or older", () => {
+        vi.useFakeTimers();
+        vi.setSystemTime(now);
+        const monthAgo = new Date(now.getTime() - 40 * 86_400_000).toISOString();
+        expect(formatRelativeTime(monthAgo)).not.toMatch(/^\d+[mhdw]$/);
+    });
+});

frontend/src/lib/format-time.ts

@@ -0,0 +1,17 @@
+// Compact relative timestamps for the chat sidebar ("5m", "2h", "3d") —
+// falls back to an absolute short date once a conversation is old enough
+// that "Nw" stops being a useful at-a-glance signal.
+export function formatRelativeTime(iso: string): string {
+    const diffMs = Date.now() - new Date(iso).getTime();
+    const diffSec = Math.round(diffMs / 1000);
+    if (diffSec < 60) return "now";
+    const diffMin = Math.round(diffSec / 60);
+    if (diffMin < 60) return `${diffMin}m`;
+    const diffHour = Math.round(diffMin / 60);
+    if (diffHour < 24) return `${diffHour}h`;
+    const diffDay = Math.round(diffHour / 24);
+    if (diffDay < 7) return `${diffDay}d`;
+    const diffWeek = Math.round(diffDay / 7);
+    if (diffWeek < 5) return `${diffWeek}w`;
+    return new Date(iso).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}