From 799f02b58515b6dcc4b736ca2a5098d58de8e0f2 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Wed, 6 May 2026 15:03:15 -0700
Subject: [PATCH] feat(ui/agents): add SessionRow component

Single sidebar entry showing session title, status pill (antd Tag, gold for
provisioning), branch and last-updated timestamp. Links to the three-pane
view at /agents/{aid}/sessions/{sid}.
---
 .../agents/components/session-row.tsx         | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/agents/components/session-row.tsx

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/agents/components/session-row.tsx b/ui/litellm-dashboard/src/app/(dashboard)/agents/components/session-row.tsx
new file mode 100644
index 00000000000..27f27c77c54
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/agents/components/session-row.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+/**
+ * SessionRow — single entry in the SessionList sidebar.
+ *
+ * Status pill colors map session.status to antd Tag colors. We avoid
+ * "yellow" intentionally (per CLAUDE.md UI rules); use "gold" for amber.
+ */
+import Link from "next/link";
+import { Tag, Typography } from "antd";
+import dayjs from "dayjs";
+import type { CloudAgentSession, CloudAgentSessionStatus } from "@/types/cloud-agents";
+
+const { Text, Paragraph } = Typography;
+
+const STATUS_TO_COLOR: Record<CloudAgentSessionStatus, string> = {
+  provisioning: "gold",
+  running: "blue",
+  paused: "default",
+  completed: "green",
+  failed: "red",
+};
+
+interface SessionRowProps {
+  session: CloudAgentSession;
+  active: boolean;
+}
+
+export default function SessionRow({ session, active }: SessionRowProps) {
+  const updated = dayjs(session.updated_at);
+  const updatedLabel = updated.fromNow?.() ?? updated.format("YYYY-MM-DD HH:mm");
+  return (
+    <Link
+      href={`/agents/${session.agent_id}/sessions/${session.session_id}`}
+      data-testid={`session-row-${session.session_id}`}
+      data-active={active ? "true" : "false"}
+      className={`block border-l-2 px-3 py-2 transition-colors ${
+        active ? "border-blue-500 bg-blue-50" : "border-transparent hover:bg-gray-50"
+      }`}
+    >
+      <div className="flex items-center justify-between gap-2">
+        <Text strong className="!truncate !text-sm">
+          {session.title || "Untitled session"}
+        </Text>
+        <Tag color={STATUS_TO_COLOR[session.status]} className="!m-0 !text-xs">
+          {session.status}
+        </Tag>
+      </div>
+      <Paragraph type="secondary" className="!mb-0 !mt-1 !text-xs">
+        {session.branch} • {updatedLabel}
+      </Paragraph>
+    </Link>
+  );
+}