From c52ec6a60464d9b12b6f0ef3f2757f3533ae8b5b Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrish+github@berri.ai>
Date: Thu, 23 Apr 2026 21:58:59 -0700
Subject: [PATCH] fix(ui/memory): full-width layout + user/teams-style columns

- Add `w-full` to the MemoryView outer div so the page fills the
  flex-flex-1 container (was collapsing to intrinsic width).
- Replace the combined "Scope" column with separate User ID / Team ID
  columns, matching the layout of the Users / Teams pages: ID, Name,
  Preview, User ID, Team ID, Updated, Actions.
- IDs render with a truncated mono label + copy-to-clipboard button,
  same pattern as view_users.
- Detail drawer now shows Memory ID / User ID / Team ID as separate
  fields instead of stacked color tags.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/components/MemoryView/MemoryView.tsx  | 104 ++++++++++++------
 1 file changed, 73 insertions(+), 31 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/MemoryView/MemoryView.tsx b/ui/litellm-dashboard/src/components/MemoryView/MemoryView.tsx
index b2f8c41436d..1cdff5f7295 100644
--- a/ui/litellm-dashboard/src/components/MemoryView/MemoryView.tsx
+++ b/ui/litellm-dashboard/src/components/MemoryView/MemoryView.tsx
@@ -11,12 +11,13 @@ import {
   Modal,
   Space,
   Table,
-  Tag,
+  Tooltip,
   Typography,
   message,
 } from "antd";
 import type { ColumnsType } from "antd/es/table";
 import {
+  CopyOutlined,
   DeleteOutlined,
   EditOutlined,
   EyeOutlined,
@@ -149,14 +150,45 @@ export const MemoryView: React.FC<MemoryViewProps> = ({ accessToken }) => {
     }
   };
 
+  const renderIdCell = (id?: string | null, labelOnCopy = "ID") => {
+    if (!id) return <Text type="secondary">-</Text>;
+    const short = id.length > 10 ? `${id.slice(0, 7)}...` : id;
+    return (
+      <Space size={4}>
+        <Tooltip title={id}>
+          <Text code style={{ fontSize: 12 }}>
+            {short}
+          </Text>
+        </Tooltip>
+        <Tooltip title={`Copy ${labelOnCopy}`}>
+          <CopyOutlined
+            onClick={(e) => {
+              e.stopPropagation();
+              navigator.clipboard?.writeText(id);
+              message.success(`${labelOnCopy} copied`);
+            }}
+            style={{ color: "#8c8c8c", cursor: "pointer", fontSize: 12 }}
+          />
+        </Tooltip>
+      </Space>
+    );
+  };
+
   const columns: ColumnsType<MemoryRow> = [
     {
-      title: "Key",
+      title: "ID",
+      dataIndex: "memory_id",
+      key: "memory_id",
+      width: 140,
+      render: (id: string) => renderIdCell(id, "Memory ID"),
+    },
+    {
+      title: "Name",
       dataIndex: "key",
       key: "key",
+      width: 200,
       render: (k: string) => <Text code>{k}</Text>,
       sorter: (a, b) => a.key.localeCompare(b.key),
-      width: 240,
     },
     {
       title: "Preview",
@@ -169,16 +201,18 @@ export const MemoryView: React.FC<MemoryViewProps> = ({ accessToken }) => {
       ),
     },
     {
-      title: "Scope",
-      key: "scope",
-      width: 220,
-      render: (_: unknown, r: MemoryRow) => (
-        <Space size={4} wrap>
-          {r.user_id && <Tag color="blue">user: {r.user_id}</Tag>}
-          {r.team_id && <Tag color="purple">team: {r.team_id}</Tag>}
-          {!r.user_id && !r.team_id && <Tag>global</Tag>}
-        </Space>
-      ),
+      title: "User ID",
+      dataIndex: "user_id",
+      key: "user_id",
+      width: 160,
+      render: (uid?: string | null) => renderIdCell(uid, "User ID"),
+    },
+    {
+      title: "Team ID",
+      dataIndex: "team_id",
+      key: "team_id",
+      width: 160,
+      render: (tid?: string | null) => renderIdCell(tid, "Team ID"),
     },
     {
       title: "Updated",
@@ -227,12 +261,8 @@ export const MemoryView: React.FC<MemoryViewProps> = ({ accessToken }) => {
   ];
 
   return (
-    <div style={{ padding: 24 }}>
-      <Space
-        direction="vertical"
-        size="large"
-        style={{ width: "100%" }}
-      >
+    <div className="w-full" style={{ padding: 24 }}>
+      <Space direction="vertical" size="large" style={{ width: "100%" }}>
         <div>
           <Title level={3} style={{ marginBottom: 4 }}>
             Memory
@@ -334,20 +364,32 @@ export const MemoryView: React.FC<MemoryViewProps> = ({ accessToken }) => {
       >
         {detailRow && (
           <Space direction="vertical" size="middle" style={{ width: "100%" }}>
-            <div>
-              <Text strong>Scope</Text>
+            <Space size="large" wrap>
               <div>
-                <Space size={4} wrap>
-                  {detailRow.user_id && (
-                    <Tag color="blue">user: {detailRow.user_id}</Tag>
-                  )}
-                  {detailRow.team_id && (
-                    <Tag color="purple">team: {detailRow.team_id}</Tag>
-                  )}
-                  {!detailRow.user_id && !detailRow.team_id && <Tag>global</Tag>}
-                </Space>
+                <Text strong style={{ display: "block" }}>
+                  Memory ID
+                </Text>
+                <Text code style={{ fontSize: 12 }}>
+                  {detailRow.memory_id}
+                </Text>
               </div>
-            </div>
+              <div>
+                <Text strong style={{ display: "block" }}>
+                  User ID
+                </Text>
+                <Text type={detailRow.user_id ? undefined : "secondary"}>
+                  {detailRow.user_id ?? "-"}
+                </Text>
+              </div>
+              <div>
+                <Text strong style={{ display: "block" }}>
+                  Team ID
+                </Text>
+                <Text type={detailRow.team_id ? undefined : "secondary"}>
+                  {detailRow.team_id ?? "-"}
+                </Text>
+              </div>
+            </Space>
             <div>
               <Text strong>Value</Text>
               <Paragraph