feat(ui): show session names alongside IDs

[MarcoFPO]

What

Shows the human-readable session name next to the session ID in three places: the AgentCard footer, the Dashboard, and the Run picker.

Why

Session IDs alone are hard to tell apart. A name makes it much easier to identify what each session is doing at a glance.

How

• Renders name alongside id in AgentCard.tsx, Dashboard.tsx and Run.tsx (falls back to the ID when no name is set).
• Names are assigned via the existing PATCH /api/sessions/:id { name } endpoint (hooks don't supply real names).

Notes

• Purely additive UI change; no behaviour change when a session has no name.
• Files: client/src/components/AgentCard.tsx, client/src/pages/Dashboard.tsx, client/src/pages/Run.tsx.

[github-actions]

✅ All contributors have signed the CLA. Thank you!
_{Posted by the CLA Assistant Lite bot.}

[MarcoFPO]

recheck

[gemini-code-assist]

Code Review

This pull request enhances the dashboard, agent cards, and session picker by fetching and displaying user-defined session names instead of auto-generated session IDs. The feedback suggests refactoring the inline IIFE and duplicated session name parsing logic in Dashboard.tsx into a reusable helper function, and adding a maximum width constraint to the session name in Run.tsx to prevent layout overflow.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

To avoid duplicating the session name parsing logic and using an IIFE inside the JSX render loop, we can define a helper function getSessionLabel right after the sessionsById state definition. This keeps the component clean and maintainable.

Suggested change

	const [sessionsById, setSessionsById] = useState<Map<string, Session>>(new Map());
	const [sessionsById, setSessionsById] = useState<Map<string, Session>>(new Map());
	const getSessionLabel = useCallback((sessionId: string) => {
	const name = sessionsById.get(sessionId)?.name?.trim() || "";
	return name && !/^Session [0-9a-f]{8}$/i.test(name) ? name : null;
	}, [sessionsById]);

[gemini-code-assist]

Using an IIFE inside JSX makes the render tree harder to read and maintain. We can simplify this by using the getSessionLabel helper function we defined earlier, resulting in much cleaner and more idiomatic React code.

                      <span
                        className="text-[11px] text-gray-500 truncate max-w-[9rem] flex-shrink-0"
                        title={event.session_id}
                      >
                        {getSessionLabel(event.session_id) || (
                          <span className="font-mono">{event.session_id.slice(0, 8)}</span>
                        )}
                      </span>

[gemini-code-assist]

If a session has an extremely long name, it can push other elements (like the ID and date) out of the container or cause layout overflow because the span lacks a width constraint. Adding max-w-[10rem] ensures it truncates gracefully, matching the truncation behavior used in AgentCard.tsx and Dashboard.tsx.

Suggested change

	{s.name?.trim() && (
	<span className="text-[11px] text-gray-200 truncate">{s.name.trim()}</span>
	)}
	{s.name?.trim() && (
	<span className="text-[11px] text-gray-200 truncate max-w-[10rem]">{s.name.trim()}</span>
	)}

[MarcoFPO]

I have read the CLA Document and I hereby sign the CLA