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/responses/responses-detail.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { OpenAIResponse, InputItemListResponse } from "@/lib/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  DetailLoadingView,
+  DetailErrorView,
+  DetailNotFoundView,
+  DetailLayout,
+  PropertiesCard,
+  PropertyItem,
+} from "@/components/layout/detail-layout";
+import { GroupedItemsDisplay } from "./grouping/grouped-items-display";
+
+interface ResponseDetailViewProps {
+  response: OpenAIResponse | null;
+  inputItems: InputItemListResponse | null;
+  isLoading: boolean;
+  isLoadingInputItems: boolean;
+  error: Error | null;
+  inputItemsError: Error | null;
+  id: string;
+}
+
+export function ResponseDetailView({
+  response,
+  inputItems,
+  isLoading,
+  isLoadingInputItems,
+  error,
+  inputItemsError,
+  id,
+}: ResponseDetailViewProps) {
+  const title = "Responses Details";
+
+  if (error) {
+    return <DetailErrorView title={title} id={id} error={error} />;
+  }
+
+  if (isLoading) {
+    return <DetailLoadingView title={title} />;
+  }
+
+  if (!response) {
+    return <DetailNotFoundView title={title} id={id} />;
+  }
+
+  // Main content cards
+  const mainContent = (
+    <>
+      <Card>
+        <CardHeader>
+          <CardTitle>Input</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {/* Show loading state for input items */}
+          {isLoadingInputItems ? (
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="h-4 w-1/2" />
+            </div>
+          ) : inputItemsError ? (
+            <div className="text-red-500 text-sm">
+              Error loading input items: {inputItemsError.message}
+              <br />
+              <span className="text-gray-500 text-xs">
+                Falling back to response input data.
+              </span>
+            </div>
+          ) : null}
+
+          {/* Display input items if available, otherwise fall back to response.input */}
+          {(() => {
+            const dataToDisplay =
+              inputItems?.data && inputItems.data.length > 0
+                ? inputItems.data
+                : response.input;
+
+            if (dataToDisplay && dataToDisplay.length > 0) {
+              return (
+                <GroupedItemsDisplay
+                  items={dataToDisplay}
+                  keyPrefix="input"
+                  defaultRole="unknown"
+                />
+              );
+            } else {
+              return (
+                <p className="text-gray-500 italic text-sm">
+                  No input data available.
+                </p>
+              );
+            }
+          })()}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Output</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {response.output?.length > 0 ? (
+            <GroupedItemsDisplay
+              items={response.output}
+              keyPrefix="output"
+              defaultRole="assistant"
+            />
+          ) : (
+            <p className="text-gray-500 italic text-sm">
+              No output data available.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+    </>
+  );
+
+  // Properties sidebar
+  const sidebar = (
+    <PropertiesCard>
+      <PropertyItem
+        label="Created"
+        value={new Date(response.created_at * 1000).toLocaleString()}
+      />
+      <PropertyItem label="ID" value={response.id} />
+      <PropertyItem label="Model" value={response.model} />
+      <PropertyItem label="Status" value={response.status} hasBorder />
+      {response.temperature && (
+        <PropertyItem
+          label="Temperature"
+          value={response.temperature}
+          hasBorder
+        />
+      )}
+      {response.top_p && <PropertyItem label="Top P" value={response.top_p} />}
+      {response.parallel_tool_calls && (
+        <PropertyItem
+          label="Parallel Tool Calls"
+          value={response.parallel_tool_calls ? "Yes" : "No"}
+        />
+      )}
+      {response.previous_response_id && (
+        <PropertyItem
+          label="Previous Response ID"
+          value={
+            <span className="text-xs">{response.previous_response_id}</span>
+          }
+          hasBorder
+        />
+      )}
+      {response.error && (
+        <PropertyItem
+          label="Error"
+          value={
+            <span className="text-red-900 font-medium">
+              {response.error.code}: {response.error.message}
+            </span>
+          }
+          className="pt-1 mt-1 border-t border-red-200"
+        />
+      )}
+    </PropertiesCard>
+  );
+
+  return (
+    <DetailLayout title={title} mainContent={mainContent} sidebar={sidebar} />
+  );
+}