feat(sessions): add detail page, Notification component, and session API improvements

- add SessionDetailPage with breadcrumbs, DescriptionList, status badge, masked token
- add Notification component (info/success/error/warning/note variants) for contextual messages
- use Notification for 404 errors on session and environment detail pages
- add GET /sessions/:id endpoint; sanitize token (head…tail) and strip cookies/localStorage
- change DELETE /sessions/:id to return 204 No Content so client redirect works correctly
- add onRowClick prop to Table for clickable rows; stop propagation on actions column
- update status badges: open=success (green), closed=error (red) on both list and detail

client/src/App.tsx

@@ -6,6 +6,7 @@ import { CreateEnvironmentPage } from './pages/CreateEnvironmentPage';
 import { EditEnvironmentPage } from './pages/EditEnvironmentPage';
 import { KeysPage } from './pages/KeysPage';
 import { SessionsPage } from './pages/SessionsPage';
+import { SessionDetailPage } from './pages/SessionDetailPage';
 import { ScenariosPage } from './pages/ScenariosPage';
 import { NavLink, Navigate, Route, Routes } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -58,6 +59,7 @@ export default function App() {
           <Route path="/environments/:id" element={<EnvironmentDetailPage />} />
           <Route path="/keys" element={<KeysPage />} />
           <Route path="/sessions" element={<SessionsPage />} />
+          <Route path="/sessions/:id" element={<SessionDetailPage />} />
           <Route path="/scenarios" element={<ScenariosPage />} />
           <Route path="*" element={<Navigate to="/scenarios" replace />} />
         </Routes>

client/src/api/client.ts

@@ -21,8 +21,11 @@ async function request<T>(path: string, init?: RequestInit): Promise<T> {
     const text = await res.text().catch(() => res.statusText);
     throw new Error(`${res.status} ${text}`);
   }
-  if (res.status === 204) return undefined as T;
+  const contentLength = res.headers.get('content-length');
-  return res.json() as Promise<T>;
+  if (res.status === 204 || contentLength === '0') return undefined as T;
+  const text = await res.text();
+  if (!text) return undefined as T;
+  return JSON.parse(text) as T;
 }
 
 // ── Environments ──────────────────────────────────────────────────────────────
@@ -65,6 +68,9 @@ export const sessions = {
   list(page = 1, limit = 50): Promise<PaginatedResponse<Session>> {
     return request(`/sessions?page=${page}&limit=${limit}`);
   },
+  get(id: number): Promise<Session> {
+    return request(`/sessions/${id}`);
+  },
   remove(id: number): Promise<void> {
     return request(`/sessions/${id}`, { method: 'DELETE' });
   },

client/src/i18n/locales/en.json

@@ -1,4 +1,10 @@
 {
+  "errors": {
+    "not_found": "Not found",
+    "not_found_session": "Session {{id}} does not exist or has been deleted.",
+    "not_found_environment": "Environment {{id}} does not exist or has been deleted.",
+    "generic": "Something went wrong. Please try again."
+  },
   "nav": {
     "environments": "Environments",
     "keys": "Keys",
@@ -48,7 +54,15 @@
     "col_status": "Status",
     "col_lastUsed": "Last Used",
     "empty": "No sessions yet.",
-    "action_delete": "Delete"
+    "loading": "Loading…",
+    "action_delete": "Delete",
+    "field_id": "ID",
+    "field_name": "Name",
+    "field_token": "Token",
+    "field_status": "Status",
+    "field_created": "Created",
+    "field_updated": "Updated",
+    "field_lastUsed": "Last Used"
   },
   "scenarios": {
     "title": "Scenarios",

client/src/pages/EnvironmentDetailPage.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Pencil, Trash2 } from 'lucide-react';
 import { environments } from '../api';
 import type { Environment } from '../api';
-import { Breadcrumbs, Button, Card, DescriptionList, Timestamp } from '../ui';
+import { Breadcrumbs, Button, Card, DescriptionList, Notification, Timestamp } from '../ui';
 import styles from './Page.module.css';
 
 export function EnvironmentDetailPage() {
@@ -53,7 +53,14 @@ export function EnvironmentDetailPage() {
         )}
       </div>
 
-      {error && <p className={styles.error}>{error}</p>}
+      {error && (
+        <Notification
+          variant="error"
+          title={error.startsWith('404') ? t('errors.not_found') : undefined}
+        >
+          {error.startsWith('404') ? t('errors.not_found_environment', { id }) : error}
+        </Notification>
+      )}
 
       {loading && <p className={styles.muted}>{t('environments.loading')}</p>}
 

client/src/pages/Page.module.css

@@ -36,6 +36,17 @@
   font-size: var(--font-size-sm);
 }
 
+.codeInline {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.85em;
+  padding: 0.15em 0.45em;
+  background: var(--color-code-bg, color-mix(in srgb, var(--color-bg-raised) 60%, var(--color-secondary) 40%));
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  color: var(--color-secondary-fg);
+  word-break: break-all;
+}
+
 /* ── Environment cards ──────────────────────────────────────── */
 
 .envGrid {

client/src/pages/SessionDetailPage.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Trash2 } from 'lucide-react';
+import { sessions } from '../api';
+import type { Session } from '../api';
+import { Badge, Breadcrumbs, Button, Card, DescriptionList, Notification, Timestamp } from '../ui';
+import styles from './Page.module.css';
+
+export function SessionDetailPage() {
+  const { t } = useTranslation();
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [session, setSession] = useState<Session | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!id) return;
+    sessions
+      .get(Number(id))
+      .then(setSession)
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  const handleDelete = async () => {
+    if (!session) return;
+    await sessions.remove(session.id);
+    navigate('/sessions');
+  };
+
+  return (
+    <div>
+      <div className={styles.pageToolbar}>
+        <Breadcrumbs
+          items={[
+            { label: t('sessions.title'), onClick: () => navigate('/sessions') },
+            { label: session?.sessionName ?? `#${id}` },
+          ]}
+        />
+        {session && (
+          <Button variant="danger" size="sm" onClick={handleDelete}>
+            <Trash2 size={14} />
+            {t('sessions.action_delete')}
+          </Button>
+        )}
+      </div>
+
+      {error && (
+        <Notification
+          variant="error"
+          title={error.startsWith('404') ? t('errors.not_found') : undefined}
+        >
+          {error.startsWith('404') ? t('errors.not_found_session', { id }) : error}
+        </Notification>
+      )}
+      {loading && <p className={styles.muted}>{t('sessions.loading')}</p>}
+
+      {session && (
+        <Card>
+          <DescriptionList
+            items={[
+              { term: t('sessions.field_id'), detail: session.id },
+              { term: t('sessions.field_name'), detail: session.sessionName },
+              {
+                term: t('sessions.field_status'),
+                detail: (
+                  <Badge variant={session.status === 'open' ? 'success' : 'error'}>
+                    {session.status}
+                  </Badge>
+                ),
+              },
+              { term: t('sessions.field_token'), detail: <code className={styles.codeInline}>{session.token}</code> },
+              {
+                term: t('sessions.field_lastUsed'),
+                detail: session.lastUsedAt ? <Timestamp value={session.lastUsedAt} /> : '—',
+              },
+              {
+                term: t('sessions.field_created'),
+                detail: <Timestamp value={session.createdAt} />,
+              },
+              {
+                term: t('sessions.field_updated'),
+                detail: <Timestamp value={session.updatedAt} />,
+              },
+            ]}
+          />
+        </Card>
+      )}
+    </div>
+  );
+}

client/src/pages/SessionsPage.tsx

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { Trash2 } from 'lucide-react';
 import { sessions } from '../api';
 import type { Session } from '../api';
 import { Badge, Breadcrumbs, Button, Table, type TableColumn, Timestamp } from '../ui';
@@ -7,6 +9,7 @@ import styles from './Page.module.css';
 
 export function SessionsPage() {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const [items, setItems] = useState<Session[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -37,7 +40,7 @@ export function SessionsPage() {
       header: t('sessions.col_status'),
       width: 100,
       render: (s) => (
-        <Badge variant={s.status === 'open' ? 'success' : 'neutral'}>{s.status}</Badge>
+        <Badge variant={s.status === 'open' ? 'success' : 'error'}>{s.status}</Badge>
       ),
     },
     {
@@ -49,11 +52,16 @@ export function SessionsPage() {
     {
       key: 'actions',
       header: '',
-      width: 80,
+      width: 48,
       align: 'right',
       render: (s) => (
-        <Button variant="secondary" size="sm" onClick={() => handleDelete(s.id)}>
+        <Button
-          {t('sessions.action_delete')}
+          variant="danger"
+          size="sm"
+          title={t('sessions.action_delete')}
+          onClick={() => handleDelete(s.id)}
+        >
+          <Trash2 size={14} />
         </Button>
       ),
     },
@@ -71,6 +79,7 @@ export function SessionsPage() {
         emptyMessage={t('sessions.empty')}
         pageSize={10}
         pageSizeOptions={[10, 25, 50]}
+        onRowClick={(s) => navigate(`/sessions/${s.id}`)}
       />
     </div>
   );

client/src/ui/Notification/Notification.module.css

@@ -0,0 +1,63 @@
+.notification {
+  display: flex;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  border-left: 3px solid;
+  font-size: var(--font-size-sm);
+  margin-bottom: var(--space-4);
+}
+
+.icon {
+  flex-shrink: 0;
+  margin-top: 1px;
+  display: flex;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.title {
+  margin: 0;
+  font-weight: 600;
+}
+
+.message {
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* ── Variants ───────────────────────────────────────────────── */
+
+.info {
+  background: var(--color-info-bg);
+  color: var(--color-info-fg);
+  border-left-color: var(--color-secondary-fg);
+}
+
+.success {
+  background: var(--color-success-bg);
+  color: var(--color-success-fg);
+  border-left-color: var(--color-primary-hover);
+}
+
+.error {
+  background: var(--color-error-bg);
+  color: var(--color-error-fg);
+  border-left-color: var(--color-danger);
+}
+
+.warning {
+  background: var(--color-warning-bg);
+  color: var(--color-warning-fg);
+  border-left-color: #E09000;
+}
+
+.note {
+  background: var(--color-neutral-bg);
+  color: var(--color-neutral-fg);
+  border-left-color: var(--color-border);
+}

client/src/ui/Notification/Notification.tsx

@@ -0,0 +1,36 @@
+import { AlertCircle, AlertTriangle, CheckCircle2, Info, StickyNote } from 'lucide-react';
+import styles from './Notification.module.css';
+
+export type NotificationVariant = 'info' | 'success' | 'error' | 'warning' | 'note';
+
+export interface NotificationProps {
+  variant?: NotificationVariant;
+  title?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const ICONS: Record<NotificationVariant, React.ReactNode> = {
+  info:    <Info size={16} />,
+  success: <CheckCircle2 size={16} />,
+  error:   <AlertCircle size={16} />,
+  warning: <AlertTriangle size={16} />,
+  note:    <StickyNote size={16} />,
+};
+
+export function Notification({
+  variant = 'info',
+  title,
+  children,
+  className,
+}: NotificationProps) {
+  return (
+    <div className={[styles.notification, styles[variant], className].filter(Boolean).join(' ')}>
+      <span className={styles.icon}>{ICONS[variant]}</span>
+      <div className={styles.body}>
+        {title && <p className={styles.title}>{title}</p>}
+        <p className={styles.message}>{children}</p>
+      </div>
+    </div>
+  );
+}

client/src/ui/Table/Table.module.css

@@ -43,6 +43,10 @@
   background: var(--color-secondary-hover);
 }
 
+.clickable {
+  cursor: pointer;
+}
+
 .tr:not(:last-child) .td {
   border-bottom: var(--border-width) solid var(--color-border);
 }

client/src/ui/Table/Table.tsx

@@ -21,6 +21,8 @@ export interface TableProps<T> {
   pageSize?: number;
   /** Offer a page-size selector when pagination is enabled */
   pageSizeOptions?: number[];
+  /** Called when a row is clicked */
+  onRowClick?: (row: T) => void;
 }
 
 export function Table<T>({
@@ -32,6 +34,7 @@ export function Table<T>({
   className,
   pageSize: defaultPageSize,
   pageSizeOptions,
+  onRowClick,
 }: TableProps<T>) {
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(defaultPageSize ?? 0);
@@ -77,12 +80,17 @@ export function Table<T>({
             </tr>
           ) : (
             visibleData.map((row) => (
-              <tr key={rowKey(row)} className={styles.tr}>
+              <tr
+                key={rowKey(row)}
+                className={[styles.tr, onRowClick ? styles.clickable : ''].filter(Boolean).join(' ')}
+                onClick={onRowClick ? () => onRowClick(row) : undefined}
+              >
                 {columns.map((col) => (
                   <td
                     key={col.key}
                     className={styles.td}
                     style={{ textAlign: col.align ?? 'left' }}
+                    onClick={col.key === 'actions' ? (e) => e.stopPropagation() : undefined}
                   >
                     {col.render(row)}
                   </td>

client/src/ui/index.ts

@@ -33,5 +33,8 @@ export type { ContextMenuProps, ContextMenuItem } from './ContextMenu/ContextMen
 export { DescriptionList } from './DescriptionList/DescriptionList';
 export type { DescriptionListProps, DescriptionListItem } from './DescriptionList/DescriptionList';
 
+export { Notification } from './Notification/Notification';
+export type { NotificationProps, NotificationVariant } from './Notification/Notification';
+
 export { Table } from './Table/Table';
 export type { TableProps, TableColumn } from './Table/Table';

server/package.json

@@ -1,5 +1,6 @@
 {
   "name": "liquio-qa-bot",
+  "version": "1.2.0",
   "description": "",
   "main": "index.js",
   "scripts": {

server/src/session/session.controller.ts

@@ -2,6 +2,8 @@ import {
   Controller,
   Delete,
   Get,
+  HttpCode,
+  NotFoundException,
   Param,
   ParseIntPipe,
   Query,
@@ -12,6 +14,11 @@ import { SessionContextService } from "./session-context.service";
 import { PaginationQueryDto } from "../common/dto/pagination.dto";
 import { SessionOrderBy } from "./session.service";
 
+function maskToken(token: string, head = 6, tail = 4): string {
+  if (token.length <= head + tail + 1) return token;
+  return `${token.slice(0, head)}\u2026${token.slice(-tail)}`;
+}
+
 @ApiTags("sessions")
 @Controller("sessions")
 export class SessionController {
@@ -27,9 +34,24 @@ export class SessionController {
     return this.sessionService.findAll(query);
   }
 
+  @Get(":id")
+  @ApiOperation({ summary: "Get a session by ID" })
+  @ApiResponse({ status: 200, description: "Session found" })
+  @ApiResponse({ status: 404, description: "Session not found" })
+  async findOne(@Param("id", ParseIntPipe) id: number) {
+    const session = await this.sessionService.findById(id);
+    if (!session) throw new NotFoundException(`Session ${id} not found`);
+    const { token, cookies, localStorage, ...rest } = session;
+    return {
+      ...rest,
+      token: maskToken(token),
+    };
+  }
+
   @Delete(":id")
+  @HttpCode(204)
   @ApiOperation({ summary: "Delete a session by ID (closes it first if open)" })
-  @ApiResponse({ status: 200, description: "Session deleted" })
+  @ApiResponse({ status: 204, description: "Session deleted" })
   @ApiResponse({ status: 404, description: "Session not found" })
   async remove(@Param("id", ParseIntPipe) id: number): Promise<void> {
     await this.sessionContextService.delete(id);