From d2e10cd89a5f45c9152a7035f44d6a6caa4bd6b9 Mon Sep 17 00:00:00 2001
From: Federico Jaramillo Martinez <federicojaramillom@gmail.com>
Date: Thu, 2 Jul 2026 14:27:21 +0200
Subject: [PATCH] fix: use suffix for unnamed session labels

---
 .changeset/session-id-suffix-labels.md              |  5 +++++
 src/client/src/components/SessionList.ts            |  3 ++-
 src/client/src/components/appShell/AppContextBar.ts |  3 ++-
 src/client/src/sessionLabels.test.ts                | 12 ++++++++++++
 src/client/src/sessionLabels.ts                     |  3 +++
 5 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/session-id-suffix-labels.md
 create mode 100644 src/client/src/sessionLabels.test.ts
 create mode 100644 src/client/src/sessionLabels.ts

diff --git a/.changeset/session-id-suffix-labels.md b/.changeset/session-id-suffix-labels.md
new file mode 100644
index 0000000..4474f2f
--- /dev/null
+++ b/.changeset/session-id-suffix-labels.md
@@ -0,0 +1,5 @@
+---
+"@jmfederico/pi-web": patch
+---
+
+Show the random-looking suffix for unnamed sessions so newly created empty sessions are easier to distinguish.
diff --git a/src/client/src/components/SessionList.ts b/src/client/src/components/SessionList.ts
index 00b2427..376c878 100644
--- a/src/client/src/components/SessionList.ts
+++ b/src/client/src/components/SessionList.ts
@@ -2,6 +2,7 @@ import { LitElement, css, html, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import type { SessionActivity, SessionInfo, SessionStatus } from "../api";
 import { isCachedNewSessionInfo } from "../cachedNewSessions";
+import { shortSessionId } from "../sessionLabels";
 import { isSessionActive } from "../../../shared/activity";
 import { actionMenuPanelStyle } from "./actionMenu";
 import { renderActionActivityIndicator, type ActivityIndicatorKind } from "./activityBadge";
@@ -11,7 +12,7 @@ import { listStyles } from "./shared";
 
 function sessionLabel(session: SessionInfo): string {
   if (session.name !== undefined && session.name !== "") return session.name;
-  return session.firstMessage !== "" ? session.firstMessage : session.id.slice(0, 8);
+  return session.firstMessage !== "" ? session.firstMessage : shortSessionId(session.id);
 }
 
 export interface SessionRow {
diff --git a/src/client/src/components/appShell/AppContextBar.ts b/src/client/src/components/appShell/AppContextBar.ts
index 0b48445..a21c91d 100644
--- a/src/client/src/components/appShell/AppContextBar.ts
+++ b/src/client/src/components/appShell/AppContextBar.ts
@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import type { Machine, Project, SessionInfo, Workspace } from "../../api";
+import { shortSessionId } from "../../sessionLabels";
 import type { NavigationSection } from "../../appShell/navigationState";
 
 @customElement("app-context-bar")
@@ -193,7 +194,7 @@ function workspaceContextTitle(workspace: Workspace | undefined): string {
 function sessionContextLabel(session: SessionInfo | undefined): string {
   const name = session?.name?.trim();
   const firstMessage = session?.firstMessage.trim();
-  return name !== undefined && name !== "" ? name : firstMessage !== undefined && firstMessage !== "" ? firstMessage : session?.id.slice(0, 8) ?? "No session";
+  return name !== undefined && name !== "" ? name : firstMessage !== undefined && firstMessage !== "" ? firstMessage : session === undefined ? "No session" : shortSessionId(session.id);
 }
 
 function sessionContextTitle(session: SessionInfo | undefined): string {
diff --git a/src/client/src/sessionLabels.test.ts b/src/client/src/sessionLabels.test.ts
new file mode 100644
index 0000000..78d927c
--- /dev/null
+++ b/src/client/src/sessionLabels.test.ts
@@ -0,0 +1,12 @@
+import { describe, expect, it } from "vitest";
+import { shortSessionId } from "./sessionLabels";
+
+describe("shortSessionId", () => {
+  it("uses the random-looking suffix of UUIDv7 session ids", () => {
+    expect(shortSessionId("019f22c5-d53e-7489-997f-fce1e570a202")).toBe("e570a202");
+  });
+
+  it("keeps short ids intact", () => {
+    expect(shortSessionId("abc123")).toBe("abc123");
+  });
+});
diff --git a/src/client/src/sessionLabels.ts b/src/client/src/sessionLabels.ts
new file mode 100644
index 0000000..c38caf3
--- /dev/null
+++ b/src/client/src/sessionLabels.ts
@@ -0,0 +1,3 @@
+export function shortSessionId(id: string): string {
+  return id.slice(-8);
+}