feat(ui): add views for Responses (#2293)

# What does this PR do?
* Add responses list and detail views
* Refactored components to be shared as much as possible between chat
completions and responses

## Test Plan
<img width="2014" alt="image"
src="https://github.com/user-attachments/assets/6dee12ea-8876-4351-a6eb-2338058466ef"
/>
<img width="2021" alt="image"
src="https://github.com/user-attachments/assets/6c7c71b8-25b7-4199-9c57-6960be5580c8"
/>

added tests

llama_stack/ui/components/logs/logs-table.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { truncateText } from "@/lib/truncate-text";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Skeleton } from "@/components/ui/skeleton";
+
+// Generic table row data interface
+export interface LogTableRow {
+  id: string;
+  input: string;
+  output: string;
+  model: string;
+  createdTime: string;
+  detailPath: string;
+}
+
+interface LogsTableProps {
+  data: LogTableRow[];
+  isLoading: boolean;
+  error: Error | null;
+  caption: string;
+  emptyMessage: string;
+}
+
+export function LogsTable({
+  data,
+  isLoading,
+  error,
+  caption,
+  emptyMessage,
+}: LogsTableProps) {
+  const router = useRouter();
+
+  const tableHeader = (
+    <TableHeader>
+      <TableRow>
+        <TableHead>Input</TableHead>
+        <TableHead>Output</TableHead>
+        <TableHead>Model</TableHead>
+        <TableHead className="text-right">Created</TableHead>
+      </TableRow>
+    </TableHeader>
+  );
+
+  if (isLoading) {
+    return (
+      <Table>
+        <TableCaption>
+          <Skeleton className="h-4 w-[250px] mx-auto" />
+        </TableCaption>
+        {tableHeader}
+        <TableBody>
+          {[...Array(3)].map((_, i) => (
+            <TableRow key={`skeleton-${i}`}>
+              <TableCell>
+                <Skeleton className="h-4 w-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-3/4" />
+              </TableCell>
+              <TableCell className="text-right">
+                <Skeleton className="h-4 w-1/2 ml-auto" />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    );
+  }
+
+  if (error) {
+    return (
+      <p>Error fetching data: {error.message || "An unknown error occurred"}</p>
+    );
+  }
+
+  if (data.length === 0) {
+    return <p>{emptyMessage}</p>;
+  }
+
+  return (
+    <Table>
+      <TableCaption>{caption}</TableCaption>
+      {tableHeader}
+      <TableBody>
+        {data.map((row) => (
+          <TableRow
+            key={row.id}
+            onClick={() => router.push(row.detailPath)}
+            className="cursor-pointer hover:bg-muted/50"
+          >
+            <TableCell>{truncateText(row.input)}</TableCell>
+            <TableCell>{truncateText(row.output)}</TableCell>
+            <TableCell>{row.model}</TableCell>
+            <TableCell className="text-right">{row.createdTime}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}