chore: move src/llama_stack/ui to src/llama_stack_ui (#4068)

# What does this PR do?
This better separates UI from backend code, which was a point of
confusion often for our beloved AI friends.


## Test Plan
CI

src/llama_stack_ui/components/chat-completions/chat-completion-detail.test.tsx

@@ -0,0 +1,193 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { ChatCompletionDetailView } from "./chat-completion-detail";
+import { ChatCompletion } from "@/lib/types";
+
+// Initial test file setup for ChatCompletionDetailView
+
+describe("ChatCompletionDetailView", () => {
+  test("renders skeleton UI when isLoading is true", () => {
+    const { container } = render(
+      <ChatCompletionDetailView
+        completion={null}
+        isLoading={true}
+        error={null}
+        id="test-id"
+      />
+    );
+    // Use the data-slot attribute for Skeletons
+    const skeletons = container.querySelectorAll('[data-slot="skeleton"]');
+    expect(skeletons.length).toBeGreaterThan(0);
+  });
+
+  test("renders error message when error prop is provided", () => {
+    render(
+      <ChatCompletionDetailView
+        completion={null}
+        isLoading={false}
+        error={{ name: "Error", message: "Network Error" }}
+        id="err-id"
+      />
+    );
+    expect(
+      screen.getByText(/Error loading details for ID err-id: Network Error/)
+    ).toBeInTheDocument();
+  });
+
+  test("renders default error message when error.message is empty", () => {
+    render(
+      <ChatCompletionDetailView
+        completion={null}
+        isLoading={false}
+        error={{ name: "Error", message: "" }}
+        id="err-id"
+      />
+    );
+    // Use regex to match the error message regardless of whitespace
+    expect(
+      screen.getByText(/Error loading details for ID\s*err-id\s*:/)
+    ).toBeInTheDocument();
+  });
+
+  test("renders error message when error prop is an object without message", () => {
+    render(
+      <ChatCompletionDetailView
+        completion={null}
+        isLoading={false}
+        error={{} as Error}
+        id="err-id"
+      />
+    );
+    // Use regex to match the error message regardless of whitespace
+    expect(
+      screen.getByText(/Error loading details for ID\s*err-id\s*:/)
+    ).toBeInTheDocument();
+  });
+
+  test("renders not found message when completion is null and not loading/error", () => {
+    render(
+      <ChatCompletionDetailView
+        completion={null}
+        isLoading={false}
+        error={null}
+        id="notfound-id"
+      />
+    );
+    expect(
+      screen.getByText("No details found for ID: notfound-id.")
+    ).toBeInTheDocument();
+  });
+
+  test("renders input, output, and properties for valid completion", () => {
+    const mockCompletion: ChatCompletion = {
+      id: "comp_123",
+      object: "chat.completion",
+      created: 1710000000,
+      model: "llama-test-model",
+      choices: [
+        {
+          index: 0,
+          message: { role: "assistant", content: "Test output" },
+          finish_reason: "stop",
+        },
+      ],
+      input_messages: [{ role: "user", content: "Test input" }],
+    };
+    render(
+      <ChatCompletionDetailView
+        completion={mockCompletion}
+        isLoading={false}
+        error={null}
+        id={mockCompletion.id}
+      />
+    );
+    // Input
+    expect(screen.getByText("Input")).toBeInTheDocument();
+    expect(screen.getByText("Test input")).toBeInTheDocument();
+    // Output
+    expect(screen.getByText("Output")).toBeInTheDocument();
+    expect(screen.getByText("Test output")).toBeInTheDocument();
+    // Properties
+    expect(screen.getByText("Properties")).toBeInTheDocument();
+    expect(screen.getByText("Created:")).toBeInTheDocument();
+    expect(
+      screen.getByText(new Date(1710000000 * 1000).toLocaleString())
+    ).toBeInTheDocument();
+    expect(screen.getByText("ID:")).toBeInTheDocument();
+    expect(screen.getByText("comp_123")).toBeInTheDocument();
+    expect(screen.getByText("Model:")).toBeInTheDocument();
+    expect(screen.getByText("llama-test-model")).toBeInTheDocument();
+    expect(screen.getByText("Finish Reason:")).toBeInTheDocument();
+    expect(screen.getByText("stop")).toBeInTheDocument();
+  });
+
+  test("renders tool call in output and properties when present", () => {
+    const toolCall = {
+      function: { name: "search", arguments: '{"query":"llama"}' },
+    };
+    const mockCompletion: ChatCompletion = {
+      id: "comp_tool",
+      object: "chat.completion",
+      created: 1710001000,
+      model: "llama-tool-model",
+      choices: [
+        {
+          index: 0,
+          message: {
+            role: "assistant",
+            content: "Tool output",
+            tool_calls: [toolCall],
+          },
+          finish_reason: "stop",
+        },
+      ],
+      input_messages: [{ role: "user", content: "Tool input" }],
+    };
+    render(
+      <ChatCompletionDetailView
+        completion={mockCompletion}
+        isLoading={false}
+        error={null}
+        id={mockCompletion.id}
+      />
+    );
+    // Output should include the tool call block (should be present twice: input and output)
+    const toolCallLabels = screen.getAllByText("Tool Call");
+    expect(toolCallLabels.length).toBeGreaterThanOrEqual(1); // At least one, but could be two
+    // The tool call block should contain the formatted tool call string in both input and output
+    const toolCallBlocks = screen.getAllByText('search({"query":"llama"})');
+    expect(toolCallBlocks.length).toBe(2);
+    // Properties should include the tool call name
+    expect(screen.getByText("Functions/Tools Called:")).toBeInTheDocument();
+    expect(screen.getByText("search")).toBeInTheDocument();
+  });
+
+  test("handles missing/empty fields gracefully", () => {
+    const mockCompletion: ChatCompletion = {
+      id: "comp_edge",
+      object: "chat.completion",
+      created: 1710002000,
+      model: "llama-edge-model",
+      choices: [], // No choices
+      input_messages: [], // No input messages
+    };
+    render(
+      <ChatCompletionDetailView
+        completion={mockCompletion}
+        isLoading={false}
+        error={null}
+        id={mockCompletion.id}
+      />
+    );
+    // Input section should be present but empty
+    expect(screen.getByText("Input")).toBeInTheDocument();
+    // Output section should show fallback message
+    expect(
+      screen.getByText("No message found in assistant's choice.")
+    ).toBeInTheDocument();
+    // Properties should show N/A for finish reason
+    expect(screen.getByText("Finish Reason:")).toBeInTheDocument();
+    expect(screen.getByText("N/A")).toBeInTheDocument();
+  });
+});

src/llama_stack_ui/components/chat-completions/chat-completion-detail.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { ChatMessage, ChatCompletion } from "@/lib/types";
+import { ChatMessageItem } from "@/components/chat-completions/chat-messasge-item";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  DetailLoadingView,
+  DetailErrorView,
+  DetailNotFoundView,
+  DetailLayout,
+  PropertiesCard,
+  PropertyItem,
+} from "@/components/layout/detail-layout";
+
+interface ChatCompletionDetailViewProps {
+  completion: ChatCompletion | null;
+  isLoading: boolean;
+  error: Error | null;
+  id: string;
+}
+
+export function ChatCompletionDetailView({
+  completion,
+  isLoading,
+  error,
+  id,
+}: ChatCompletionDetailViewProps) {
+  const title = "Chat Completion Details";
+
+  if (error) {
+    return <DetailErrorView title={title} id={id} error={error} />;
+  }
+
+  if (isLoading) {
+    return <DetailLoadingView title={title} />;
+  }
+
+  if (!completion) {
+    return <DetailNotFoundView title={title} id={id} />;
+  }
+
+  // Main content cards
+  const mainContent = (
+    <>
+      <Card>
+        <CardHeader>
+          <CardTitle>Input</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {completion.input_messages?.map((msg, index) => (
+            <ChatMessageItem key={`input-msg-${index}`} message={msg} />
+          ))}
+          {completion.choices?.[0]?.message?.tool_calls &&
+          Array.isArray(completion.choices[0].message.tool_calls) &&
+          !completion.input_messages?.some(
+            im =>
+              im.role === "assistant" &&
+              im.tool_calls &&
+              Array.isArray(im.tool_calls) &&
+              im.tool_calls.length > 0
+          )
+            ? completion.choices[0].message.tool_calls.map(
+                (toolCall: { function?: { name?: string } }, index: number) => {
+                  const assistantToolCallMessage: ChatMessage = {
+                    role: "assistant",
+                    tool_calls: [toolCall],
+                    content: "", // Ensure content is defined, even if empty
+                  };
+                  return (
+                    <ChatMessageItem
+                      key={`choice-tool-call-${index}`}
+                      message={assistantToolCallMessage}
+                    />
+                  );
+                }
+              )
+            : null}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Output</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {completion.choices?.[0]?.message ? (
+            <ChatMessageItem
+              message={completion.choices[0].message as ChatMessage}
+            />
+          ) : (
+            <p className="text-gray-500 italic text-sm">
+              No message found in assistant&apos;s choice.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+    </>
+  );
+
+  // Properties sidebar
+  const sidebar = (
+    <PropertiesCard>
+      <PropertyItem
+        label="Created"
+        value={new Date(completion.created * 1000).toLocaleString()}
+      />
+      <PropertyItem label="ID" value={completion.id} />
+      <PropertyItem label="Model" value={completion.model} />
+      <PropertyItem
+        label="Finish Reason"
+        value={completion.choices?.[0]?.finish_reason || "N/A"}
+        hasBorder
+      />
+      {(() => {
+        const toolCalls = completion.choices?.[0]?.message?.tool_calls;
+        if (toolCalls && Array.isArray(toolCalls) && toolCalls.length > 0) {
+          return (
+            <PropertyItem
+              label="Functions/Tools Called"
+              value={
+                <div>
+                  <ul className="list-disc list-inside pl-4 mt-1">
+                    {toolCalls.map(
+                      (
+                        toolCall: { function?: { name?: string } },
+                        index: number
+                      ) => (
+                        <li key={index}>
+                          <span className="text-gray-900 font-medium">
+                            {toolCall.function?.name || "N/A"}
+                          </span>
+                        </li>
+                      )
+                    )}
+                  </ul>
+                </div>
+              }
+              hasBorder
+            />
+          );
+        }
+        return null;
+      })()}
+    </PropertiesCard>
+  );
+
+  return (
+    <DetailLayout title={title} mainContent={mainContent} sidebar={sidebar} />
+  );
+}

src/llama_stack_ui/components/chat-completions/chat-completion-table.test.tsx

@@ -0,0 +1,427 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { ChatCompletionsTable } from "./chat-completions-table";
+import { ChatCompletion } from "@/lib/types";
+
+// Mock next/navigation
+const mockPush = jest.fn();
+jest.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
+}));
+
+// Mock next-auth
+jest.mock("next-auth/react", () => ({
+  useSession: () => ({
+    status: "authenticated",
+    data: { accessToken: "mock-token" },
+  }),
+}));
+
+// Mock helper functions
+jest.mock("@/lib/truncate-text");
+jest.mock("@/lib/format-message-content");
+
+// Mock the auth client hook
+const mockClient = {
+  chat: {
+    completions: {
+      list: jest.fn(),
+    },
+  },
+};
+
+jest.mock("@/hooks/use-auth-client", () => ({
+  useAuthClient: () => mockClient,
+}));
+
+// Mock the usePagination hook
+const mockLoadMore = jest.fn();
+jest.mock("@/hooks/use-pagination", () => ({
+  usePagination: jest.fn(() => ({
+    data: [],
+    status: "idle",
+    hasMore: false,
+    error: null,
+    loadMore: mockLoadMore,
+  })),
+}));
+
+// Import the mocked functions to set up default or specific implementations
+import { truncateText as originalTruncateText } from "@/lib/truncate-text";
+import {
+  extractTextFromContentPart as originalExtractTextFromContentPart,
+  extractDisplayableText as originalExtractDisplayableText,
+} from "@/lib/format-message-content";
+
+// Import the mocked hook
+import { usePagination } from "@/hooks/use-pagination";
+const mockedUsePagination = usePagination as jest.MockedFunction<
+  typeof usePagination
+>;
+
+// Cast to jest.Mock for typings
+const truncateText = originalTruncateText as jest.Mock;
+const extractTextFromContentPart =
+  originalExtractTextFromContentPart as jest.Mock;
+const extractDisplayableText = originalExtractDisplayableText as jest.Mock;
+
+describe("ChatCompletionsTable", () => {
+  const defaultProps = {};
+
+  beforeEach(() => {
+    // Reset all mocks before each test
+    mockPush.mockClear();
+    truncateText.mockClear();
+    extractTextFromContentPart.mockClear();
+    extractDisplayableText.mockClear();
+    mockLoadMore.mockClear();
+    jest.clearAllMocks();
+
+    // Default pass-through implementations
+    truncateText.mockImplementation((text: string | undefined) => text);
+    extractTextFromContentPart.mockImplementation((content: unknown) =>
+      typeof content === "string" ? content : "extracted text"
+    );
+    extractDisplayableText.mockImplementation((message: unknown) => {
+      const msg = message as { content?: string };
+      return msg?.content || "extracted output";
+    });
+
+    // Default hook return value
+    mockedUsePagination.mockReturnValue({
+      data: [],
+      status: "idle",
+      hasMore: false,
+      error: null,
+      loadMore: mockLoadMore,
+    });
+  });
+
+  test("renders without crashing with default props", () => {
+    render(<ChatCompletionsTable {...defaultProps} />);
+    expect(screen.getByText("No chat completions found.")).toBeInTheDocument();
+  });
+
+  test("click on a row navigates to the correct URL", () => {
+    const mockData: ChatCompletion[] = [
+      {
+        id: "completion_123",
+        choices: [
+          {
+            message: { role: "assistant", content: "Test response" },
+            finish_reason: "stop",
+            index: 0,
+          },
+        ],
+        object: "chat.completion",
+        created: 1234567890,
+        model: "test-model",
+        input_messages: [{ role: "user", content: "Test prompt" }],
+      },
+    ];
+
+    // Configure the mock to return our test data
+    mockedUsePagination.mockReturnValue({
+      data: mockData,
+      status: "idle",
+      hasMore: false,
+      error: null,
+      loadMore: mockLoadMore,
+    });
+
+    render(<ChatCompletionsTable {...defaultProps} />);
+
+    const row = screen.getByText("Test prompt").closest("tr");
+    if (row) {
+      fireEvent.click(row);
+      expect(mockPush).toHaveBeenCalledWith(
+        "/logs/chat-completions/completion_123"
+      );
+    } else {
+      throw new Error('Row with "Test prompt" not found for router mock test.');
+    }
+  });
+
+  describe("Loading State", () => {
+    test("renders skeleton UI when isLoading is true", () => {
+      mockedUsePagination.mockReturnValue({
+        data: [],
+        status: "loading",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      const { container } = render(<ChatCompletionsTable {...defaultProps} />);
+
+      // Check for skeleton in the table caption
+      const tableCaption = container.querySelector("caption");
+      expect(tableCaption).toBeInTheDocument();
+      if (tableCaption) {
+        const captionSkeleton = tableCaption.querySelector(
+          '[data-slot="skeleton"]'
+        );
+        expect(captionSkeleton).toBeInTheDocument();
+      }
+
+      // Check for skeletons in the table body cells
+      const tableBody = container.querySelector("tbody");
+      expect(tableBody).toBeInTheDocument();
+      if (tableBody) {
+        const bodySkeletons = tableBody.querySelectorAll(
+          '[data-slot="skeleton"]'
+        );
+        expect(bodySkeletons.length).toBeGreaterThan(0);
+      }
+    });
+  });
+
+  describe("Error State", () => {
+    test("renders error message when error prop is provided", () => {
+      const errorMessage = "Network Error";
+      mockedUsePagination.mockReturnValue({
+        data: [],
+        status: "error",
+        hasMore: false,
+        error: { name: "Error", message: errorMessage } as Error,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ChatCompletionsTable {...defaultProps} />);
+      expect(
+        screen.getByText("Unable to load chat completions")
+      ).toBeInTheDocument();
+      expect(screen.getByText(errorMessage)).toBeInTheDocument();
+    });
+
+    test.each([{ name: "Error", message: "" }, {}])(
+      "renders default error message when error has no message",
+      errorObject => {
+        mockedUsePagination.mockReturnValue({
+          data: [],
+          status: "error",
+          hasMore: false,
+          error: errorObject as Error,
+          loadMore: mockLoadMore,
+        });
+
+        render(<ChatCompletionsTable {...defaultProps} />);
+        expect(
+          screen.getByText("Unable to load chat completions")
+        ).toBeInTheDocument();
+        expect(
+          screen.getByText(
+            "An unexpected error occurred while loading the data."
+          )
+        ).toBeInTheDocument();
+      }
+    );
+  });
+
+  describe("Empty State", () => {
+    test('renders "No chat completions found." and no table when data array is empty', () => {
+      render(<ChatCompletionsTable {...defaultProps} />);
+      expect(
+        screen.getByText("No chat completions found.")
+      ).toBeInTheDocument();
+
+      // Ensure that the table structure is NOT rendered in the empty state
+      const table = screen.queryByRole("table");
+      expect(table).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Data Rendering", () => {
+    test("renders table caption, headers, and completion data correctly", () => {
+      const mockCompletions: ChatCompletion[] = [
+        {
+          id: "comp_1",
+          object: "chat.completion",
+          created: 1710000000,
+          model: "llama-test-model",
+          choices: [
+            {
+              index: 0,
+              message: { role: "assistant", content: "Test output" },
+              finish_reason: "stop",
+            },
+          ],
+          input_messages: [{ role: "user", content: "Test input" }],
+        },
+        {
+          id: "comp_2",
+          object: "chat.completion",
+          created: 1710001000,
+          model: "llama-another-model",
+          choices: [
+            {
+              index: 0,
+              message: { role: "assistant", content: "Another output" },
+              finish_reason: "stop",
+            },
+          ],
+          input_messages: [{ role: "user", content: "Another input" }],
+        },
+      ];
+
+      // Set up mocks to return expected values
+      extractTextFromContentPart.mockImplementation((content: unknown) => {
+        if (content === "Test input") return "Test input";
+        if (content === "Another input") return "Another input";
+        return "extracted text";
+      });
+      extractDisplayableText.mockImplementation((message: unknown) => {
+        const msg = message as { content?: string };
+        if (msg?.content === "Test output") return "Test output";
+        if (msg?.content === "Another output") return "Another output";
+        return "extracted output";
+      });
+
+      mockedUsePagination.mockReturnValue({
+        data: mockCompletions,
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ChatCompletionsTable {...defaultProps} />);
+
+      // Table caption
+      expect(
+        screen.getByText("A list of your recent chat completions.")
+      ).toBeInTheDocument();
+
+      // Table headers
+      expect(screen.getByText("Input")).toBeInTheDocument();
+      expect(screen.getByText("Output")).toBeInTheDocument();
+      expect(screen.getByText("Model")).toBeInTheDocument();
+      expect(screen.getByText("Created")).toBeInTheDocument();
+
+      // Data rows
+      expect(screen.getByText("Test input")).toBeInTheDocument();
+      expect(screen.getByText("Test output")).toBeInTheDocument();
+      expect(screen.getByText("llama-test-model")).toBeInTheDocument();
+      expect(
+        screen.getByText(new Date(1710000000 * 1000).toLocaleString())
+      ).toBeInTheDocument();
+
+      expect(screen.getByText("Another input")).toBeInTheDocument();
+      expect(screen.getByText("Another output")).toBeInTheDocument();
+      expect(screen.getByText("llama-another-model")).toBeInTheDocument();
+      expect(
+        screen.getByText(new Date(1710001000 * 1000).toLocaleString())
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("Text Truncation and Content Extraction", () => {
+    test("truncates long input and output text", () => {
+      // Specific mock implementation for this test
+      truncateText.mockImplementation(
+        (text: string | undefined, maxLength?: number) => {
+          const defaultTestMaxLength = 10;
+          const effectiveMaxLength = maxLength ?? defaultTestMaxLength;
+          return typeof text === "string" && text.length > effectiveMaxLength
+            ? text.slice(0, effectiveMaxLength) + "..."
+            : text;
+        }
+      );
+
+      const longInput =
+        "This is a very long input message that should be truncated.";
+      const longOutput =
+        "This is a very long output message that should also be truncated.";
+
+      extractTextFromContentPart.mockReturnValue(longInput);
+      extractDisplayableText.mockReturnValue(longOutput);
+
+      const mockCompletions: ChatCompletion[] = [
+        {
+          id: "comp_trunc",
+          object: "chat.completion",
+          created: 1710002000,
+          model: "llama-trunc-model",
+          choices: [
+            {
+              index: 0,
+              message: { role: "assistant", content: longOutput },
+              finish_reason: "stop",
+            },
+          ],
+          input_messages: [{ role: "user", content: longInput }],
+        },
+      ];
+
+      mockedUsePagination.mockReturnValue({
+        data: mockCompletions,
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ChatCompletionsTable {...defaultProps} />);
+
+      // The truncated text should be present for both input and output
+      const truncatedTexts = screen.getAllByText(
+        longInput.slice(0, 10) + "..."
+      );
+      expect(truncatedTexts.length).toBe(2); // one for input, one for output
+    });
+
+    test("uses content extraction functions correctly", () => {
+      const complexMessage = [
+        { type: "text", text: "Extracted input" },
+        { type: "image", url: "http://example.com/image.png" },
+      ];
+      const assistantMessage = {
+        role: "assistant",
+        content: "Extracted output from assistant",
+      };
+
+      const mockCompletions: ChatCompletion[] = [
+        {
+          id: "comp_extract",
+          object: "chat.completion",
+          created: 1710003000,
+          model: "llama-extract-model",
+          choices: [
+            {
+              index: 0,
+              message: assistantMessage,
+              finish_reason: "stop",
+            },
+          ],
+          input_messages: [{ role: "user", content: complexMessage }],
+        },
+      ];
+
+      extractTextFromContentPart.mockReturnValue("Extracted input");
+      extractDisplayableText.mockReturnValue("Extracted output from assistant");
+
+      mockedUsePagination.mockReturnValue({
+        data: mockCompletions,
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ChatCompletionsTable {...defaultProps} />);
+
+      // Verify the extraction functions were called
+      expect(extractTextFromContentPart).toHaveBeenCalledWith(complexMessage);
+      expect(extractDisplayableText).toHaveBeenCalledWith(assistantMessage);
+
+      // Verify the extracted text appears in the table
+      expect(screen.getByText("Extracted input")).toBeInTheDocument();
+      expect(
+        screen.getByText("Extracted output from assistant")
+      ).toBeInTheDocument();
+    });
+  });
+});

src/llama_stack_ui/components/chat-completions/chat-completions-table.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import {
+  ChatCompletion,
+  UsePaginationOptions,
+  ListChatCompletionsResponse,
+} from "@/lib/types";
+import { ListChatCompletionsParams } from "@/lib/llama-stack-client";
+import { LogsTable, LogTableRow } from "@/components/logs/logs-table";
+import {
+  extractTextFromContentPart,
+  extractDisplayableText,
+} from "@/lib/format-message-content";
+import { usePagination } from "@/hooks/use-pagination";
+
+interface ChatCompletionsTableProps {
+  /** Optional pagination configuration */
+  paginationOptions?: UsePaginationOptions;
+}
+
+function formatChatCompletionToRow(completion: ChatCompletion): LogTableRow {
+  return {
+    id: completion.id,
+    input: extractTextFromContentPart(completion.input_messages?.[0]?.content),
+    output: extractDisplayableText(completion.choices?.[0]?.message),
+    model: completion.model,
+    createdTime: new Date(completion.created * 1000).toLocaleString(),
+    detailPath: `/logs/chat-completions/${completion.id}`,
+  };
+}
+
+export function ChatCompletionsTable({
+  paginationOptions,
+}: ChatCompletionsTableProps) {
+  const fetchFunction = async (
+    client: ReturnType<typeof import("@/hooks/use-auth-client").useAuthClient>,
+    params: {
+      after?: string;
+      limit: number;
+      model?: string;
+      order?: string;
+    }
+  ) => {
+    const response = await client.chat.completions.list({
+      after: params.after,
+      limit: params.limit,
+      ...(params.model && { model: params.model }),
+      ...(params.order && { order: params.order }),
+    } as ListChatCompletionsParams);
+
+    return response as ListChatCompletionsResponse;
+  };
+
+  const { data, status, hasMore, error, loadMore } = usePagination({
+    ...paginationOptions,
+    fetchFunction,
+    errorMessagePrefix: "chat completions",
+  });
+
+  const formattedData = data.map(formatChatCompletionToRow);
+
+  return (
+    <LogsTable
+      data={formattedData}
+      status={status}
+      hasMore={hasMore}
+      error={error}
+      onLoadMore={loadMore}
+      caption="A list of your recent chat completions."
+      emptyMessage="No chat completions found."
+    />
+  );
+}

src/llama_stack_ui/components/chat-completions/chat-messasge-item.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { ChatMessage } from "@/lib/types";
+import React from "react";
+import { formatToolCallToString } from "@/lib/format-tool-call";
+import { extractTextFromContentPart } from "@/lib/format-message-content";
+import {
+  MessageBlock,
+  ToolCallBlock,
+} from "@/components/chat-playground/message-components";
+
+interface ChatMessageItemProps {
+  message: ChatMessage;
+}
+export function ChatMessageItem({ message }: ChatMessageItemProps) {
+  switch (message.role) {
+    case "system":
+      return (
+        <MessageBlock
+          label="System"
+          content={extractTextFromContentPart(message.content)}
+        />
+      );
+    case "user":
+      return (
+        <MessageBlock
+          label="User"
+          content={extractTextFromContentPart(message.content)}
+        />
+      );
+
+    case "assistant":
+      if (
+        message.tool_calls &&
+        Array.isArray(message.tool_calls) &&
+        message.tool_calls.length > 0
+      ) {
+        return (
+          <>
+            {message.tool_calls.map(
+              (
+                toolCall: { function?: { name?: string; arguments?: unknown } },
+                index: number
+              ) => {
+                const formattedToolCall = formatToolCallToString(toolCall);
+                const toolCallContent = (
+                  <ToolCallBlock>
+                    {formattedToolCall || "Error: Could not display tool call"}
+                  </ToolCallBlock>
+                );
+                return (
+                  <MessageBlock
+                    key={index}
+                    label="Tool Call"
+                    content={toolCallContent}
+                  />
+                );
+              }
+            )}
+          </>
+        );
+      } else {
+        return (
+          <MessageBlock
+            label="Assistant"
+            content={extractTextFromContentPart(message.content)}
+          />
+        );
+      }
+    case "tool":
+      const toolOutputContent = (
+        <ToolCallBlock>
+          {extractTextFromContentPart(message.content)}
+        </ToolCallBlock>
+      );
+      return (
+        <MessageBlock label="Tool Call Output" content={toolOutputContent} />
+      );
+  }
+  return null;
+}

src/llama_stack_ui/components/chat-playground/chat-message.tsx

@@ -0,0 +1,407 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { motion } from "framer-motion";
+import { Ban, ChevronRight, Code2, Loader2, Terminal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { FilePreview } from "@/components/ui/file-preview";
+import { MarkdownRenderer } from "@/components/chat-playground/markdown-renderer";
+
+const chatBubbleVariants = cva(
+  "group/message relative break-words rounded-lg p-3 text-sm sm:max-w-[70%]",
+  {
+    variants: {
+      isUser: {
+        true: "bg-primary text-primary-foreground",
+        false: "bg-muted text-foreground",
+      },
+      animation: {
+        none: "",
+        slide: "duration-300 animate-in fade-in-0",
+        scale: "duration-300 animate-in fade-in-0 zoom-in-75",
+        fade: "duration-500 animate-in fade-in-0",
+      },
+    },
+    compoundVariants: [
+      {
+        isUser: true,
+        animation: "slide",
+        class: "slide-in-from-right",
+      },
+      {
+        isUser: false,
+        animation: "slide",
+        class: "slide-in-from-left",
+      },
+      {
+        isUser: true,
+        animation: "scale",
+        class: "origin-bottom-right",
+      },
+      {
+        isUser: false,
+        animation: "scale",
+        class: "origin-bottom-left",
+      },
+    ],
+  }
+);
+
+type Animation = VariantProps<typeof chatBubbleVariants>["animation"];
+
+interface Attachment {
+  name?: string;
+  contentType?: string;
+  url: string;
+}
+
+interface PartialToolCall {
+  state: "partial-call";
+  toolName: string;
+}
+
+interface ToolCall {
+  state: "call";
+  toolName: string;
+}
+
+interface ToolResult {
+  state: "result";
+  toolName: string;
+  result: {
+    __cancelled?: boolean;
+    [key: string]: unknown;
+  };
+}
+
+type ToolInvocation = PartialToolCall | ToolCall | ToolResult;
+
+interface ReasoningPart {
+  type: "reasoning";
+  reasoning: string;
+}
+
+interface ToolInvocationPart {
+  type: "tool-invocation";
+  toolInvocation: ToolInvocation;
+}
+
+interface TextPart {
+  type: "text";
+  text: string;
+}
+
+// For compatibility with AI SDK types, not used
+interface SourcePart {
+  type: "source";
+  source?: unknown;
+}
+
+interface FilePart {
+  type: "file";
+  mimeType: string;
+  data: string;
+}
+
+interface StepStartPart {
+  type: "step-start";
+}
+
+type MessagePart =
+  | TextPart
+  | ReasoningPart
+  | ToolInvocationPart
+  | SourcePart
+  | FilePart
+  | StepStartPart;
+
+export interface Message {
+  id: string;
+  role: "user" | "assistant" | (string & {});
+  content: string;
+  createdAt?: Date;
+  experimental_attachments?: Attachment[];
+  toolInvocations?: ToolInvocation[];
+  parts?: MessagePart[];
+}
+
+export interface ChatMessageProps extends Message {
+  showTimeStamp?: boolean;
+  animation?: Animation;
+  actions?: React.ReactNode;
+}
+
+export const ChatMessage: React.FC<ChatMessageProps> = ({
+  role,
+  content,
+  createdAt,
+  showTimeStamp = false,
+  animation = "scale",
+  actions,
+  experimental_attachments,
+  toolInvocations,
+  parts,
+}) => {
+  const files = useMemo(() => {
+    return experimental_attachments?.map(attachment => {
+      const dataArray = dataUrlToUint8Array(attachment.url);
+      const file = new File([dataArray], attachment.name ?? "Unknown", {
+        type: attachment.contentType,
+      });
+      return file;
+    });
+  }, [experimental_attachments]);
+
+  const isUser = role === "user";
+
+  const formattedTime = createdAt
+    ? new Date(createdAt).toLocaleTimeString("en-US", {
+        hour: "2-digit",
+        minute: "2-digit",
+      })
+    : undefined;
+
+  if (isUser) {
+    return (
+      <div
+        className={cn("flex flex-col", isUser ? "items-end" : "items-start")}
+      >
+        {files ? (
+          <div className="mb-1 flex flex-wrap gap-2">
+            {files.map((file, index) => {
+              return <FilePreview file={file} key={index} />;
+            })}
+          </div>
+        ) : null}
+
+        <div className={cn(chatBubbleVariants({ isUser, animation }))}>
+          <MarkdownRenderer>{content}</MarkdownRenderer>
+        </div>
+
+        {showTimeStamp && createdAt ? (
+          <time
+            dateTime={new Date(createdAt).toISOString()}
+            className={cn(
+              "mt-1 block px-1 text-xs opacity-50",
+              animation !== "none" && "duration-500 animate-in fade-in-0"
+            )}
+          >
+            {formattedTime}
+          </time>
+        ) : null}
+      </div>
+    );
+  }
+
+  if (parts && parts.length > 0) {
+    return parts.map((part, index) => {
+      if (part.type === "text") {
+        return (
+          <div
+            className={cn(
+              "flex flex-col",
+              isUser ? "items-end" : "items-start"
+            )}
+            key={`text-${index}`}
+          >
+            <div className={cn(chatBubbleVariants({ isUser, animation }))}>
+              <MarkdownRenderer>{part.text}</MarkdownRenderer>
+              {actions ? (
+                <div className="absolute -bottom-4 right-2 flex space-x-1 rounded-lg border bg-background p-1 text-foreground opacity-0 transition-opacity group-hover/message:opacity-100">
+                  {actions}
+                </div>
+              ) : null}
+            </div>
+
+            {showTimeStamp && createdAt ? (
+              <time
+                dateTime={new Date(createdAt).toISOString()}
+                className={cn(
+                  "mt-1 block px-1 text-xs opacity-50",
+                  animation !== "none" && "duration-500 animate-in fade-in-0"
+                )}
+              >
+                {formattedTime}
+              </time>
+            ) : null}
+          </div>
+        );
+      } else if (part.type === "reasoning") {
+        return <ReasoningBlock key={`reasoning-${index}`} part={part} />;
+      } else if (part.type === "tool-invocation") {
+        return (
+          <ToolCall
+            key={`tool-${index}`}
+            toolInvocations={[part.toolInvocation]}
+          />
+        );
+      }
+      return null;
+    });
+  }
+
+  if (toolInvocations && toolInvocations.length > 0) {
+    return <ToolCall toolInvocations={toolInvocations} />;
+  }
+
+  return (
+    <div className={cn("flex flex-col", isUser ? "items-end" : "items-start")}>
+      <div className={cn(chatBubbleVariants({ isUser, animation }))}>
+        <MarkdownRenderer>{content}</MarkdownRenderer>
+        {actions ? (
+          <div className="absolute -bottom-4 right-2 flex space-x-1 rounded-lg border bg-background p-1 text-foreground opacity-0 transition-opacity group-hover/message:opacity-100">
+            {actions}
+          </div>
+        ) : null}
+      </div>
+
+      {showTimeStamp && createdAt ? (
+        <time
+          dateTime={new Date(createdAt).toISOString()}
+          className={cn(
+            "mt-1 block px-1 text-xs opacity-50",
+            animation !== "none" && "duration-500 animate-in fade-in-0"
+          )}
+        >
+          {formattedTime}
+        </time>
+      ) : null}
+    </div>
+  );
+};
+
+function dataUrlToUint8Array(data: string) {
+  const base64 = data.split(",")[1];
+  const buf = Buffer.from(base64, "base64");
+  return new Uint8Array(buf);
+}
+
+const ReasoningBlock = ({ part }: { part: ReasoningPart }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="mb-2 flex flex-col items-start sm:max-w-[70%]">
+      <Collapsible
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        className="group w-full overflow-hidden rounded-lg border bg-muted/50"
+      >
+        <div className="flex items-center p-2">
+          <CollapsibleTrigger asChild>
+            <button className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground">
+              <ChevronRight className="h-4 w-4 transition-transform group-data-[state=open]:rotate-90" />
+              <span>Thinking</span>
+            </button>
+          </CollapsibleTrigger>
+        </div>
+        <CollapsibleContent forceMount>
+          <motion.div
+            initial={false}
+            animate={isOpen ? "open" : "closed"}
+            variants={{
+              open: { height: "auto", opacity: 1 },
+              closed: { height: 0, opacity: 0 },
+            }}
+            transition={{ duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] }}
+            className="border-t"
+          >
+            <div className="p-2">
+              <div className="whitespace-pre-wrap text-xs">
+                {part.reasoning}
+              </div>
+            </div>
+          </motion.div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+function ToolCall({
+  toolInvocations,
+}: Pick<ChatMessageProps, "toolInvocations">) {
+  if (!toolInvocations?.length) return null;
+
+  return (
+    <div className="flex flex-col items-start gap-2">
+      {toolInvocations.map((invocation, index) => {
+        const isCancelled =
+          invocation.state === "result" &&
+          invocation.result.__cancelled === true;
+
+        if (isCancelled) {
+          return (
+            <div
+              key={index}
+              className="flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm text-muted-foreground"
+            >
+              <Ban className="h-4 w-4" />
+              <span>
+                Cancelled{" "}
+                <span className="font-mono">
+                  {"`"}
+                  {invocation.toolName}
+                  {"`"}
+                </span>
+              </span>
+            </div>
+          );
+        }
+
+        switch (invocation.state) {
+          case "partial-call":
+          case "call":
+            return (
+              <div
+                key={index}
+                className="flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm text-muted-foreground"
+              >
+                <Terminal className="h-4 w-4" />
+                <span>
+                  Calling{" "}
+                  <span className="font-mono">
+                    {"`"}
+                    {invocation.toolName}
+                    {"`"}
+                  </span>
+                  ...
+                </span>
+                <Loader2 className="h-3 w-3 animate-spin" />
+              </div>
+            );
+          case "result":
+            return (
+              <div
+                key={index}
+                className="flex flex-col gap-1.5 rounded-lg border bg-muted/50 px-3 py-2 text-sm"
+              >
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <Code2 className="h-4 w-4" />
+                  <span>
+                    Result from{" "}
+                    <span className="font-mono">
+                      {"`"}
+                      {invocation.toolName}
+                      {"`"}
+                    </span>
+                  </span>
+                </div>
+                <pre className="overflow-x-auto whitespace-pre-wrap text-foreground">
+                  {JSON.stringify(invocation.result, null, 2)}
+                </pre>
+              </div>
+            );
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+}

src/llama_stack_ui/components/chat-playground/chat.tsx

@@ -0,0 +1,357 @@
+"use client";
+
+import {
+  forwardRef,
+  useCallback,
+  useRef,
+  useState,
+  type ReactElement,
+} from "react";
+import { ArrowDown, ThumbsDown, ThumbsUp } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { useAutoScroll } from "@/hooks/use-auto-scroll";
+import { Button } from "@/components/ui/button";
+import { type Message } from "@/components/chat-playground/chat-message";
+import { CopyButton } from "@/components/ui/copy-button";
+import { MessageInput } from "@/components/chat-playground/message-input";
+import { MessageList } from "@/components/chat-playground/message-list";
+import { PromptSuggestions } from "@/components/chat-playground/prompt-suggestions";
+
+interface ChatPropsBase {
+  handleSubmit: (
+    event?: { preventDefault?: () => void },
+    options?: { experimental_attachments?: FileList }
+  ) => void;
+  messages: Array<Message>;
+  input: string;
+  className?: string;
+  handleInputChange: React.ChangeEventHandler<HTMLTextAreaElement>;
+  isGenerating: boolean;
+  stop?: () => void;
+  onRateResponse?: (
+    messageId: string,
+    rating: "thumbs-up" | "thumbs-down"
+  ) => void;
+  setMessages?: (messages: Message[]) => void;
+  transcribeAudio?: (blob: Blob) => Promise<string>;
+  onRAGFileUpload?: (file: File) => Promise<void>;
+}
+
+interface ChatPropsWithoutSuggestions extends ChatPropsBase {
+  append?: never;
+  suggestions?: never;
+}
+
+interface ChatPropsWithSuggestions extends ChatPropsBase {
+  append: (message: { role: "user"; content: string }) => void;
+  suggestions: string[];
+}
+
+type ChatProps = ChatPropsWithoutSuggestions | ChatPropsWithSuggestions;
+
+export function Chat({
+  messages,
+  handleSubmit,
+  input,
+  handleInputChange,
+  stop,
+  isGenerating,
+  append,
+  suggestions,
+  className,
+  onRateResponse,
+  setMessages,
+  transcribeAudio,
+  onRAGFileUpload,
+}: ChatProps) {
+  const lastMessage = messages.at(-1);
+  const isEmpty = messages.length === 0;
+  const isTyping = lastMessage?.role === "user";
+
+  const messagesRef = useRef(messages);
+  messagesRef.current = messages;
+
+  // Enhanced stop function that marks pending tool calls as cancelled
+  const handleStop = useCallback(() => {
+    stop?.();
+
+    if (!setMessages) return;
+
+    const latestMessages = [...messagesRef.current];
+    const lastAssistantMessage = latestMessages.findLast(
+      m => m.role === "assistant"
+    );
+
+    if (!lastAssistantMessage) return;
+
+    let needsUpdate = false;
+    let updatedMessage = { ...lastAssistantMessage };
+
+    if (lastAssistantMessage.toolInvocations) {
+      const updatedToolInvocations = lastAssistantMessage.toolInvocations.map(
+        toolInvocation => {
+          if (toolInvocation.state === "call") {
+            needsUpdate = true;
+            return {
+              ...toolInvocation,
+              state: "result",
+              result: {
+                content: "Tool execution was cancelled",
+                __cancelled: true, // Special marker to indicate cancellation
+              },
+            } as const;
+          }
+          return toolInvocation;
+        }
+      );
+
+      if (needsUpdate) {
+        updatedMessage = {
+          ...updatedMessage,
+          toolInvocations: updatedToolInvocations,
+        };
+      }
+    }
+
+    if (lastAssistantMessage.parts && lastAssistantMessage.parts.length > 0) {
+      const updatedParts = lastAssistantMessage.parts.map(
+        (part: {
+          type: string;
+          toolInvocation?: { state: string; toolName: string };
+        }) => {
+          if (
+            part.type === "tool-invocation" &&
+            part.toolInvocation &&
+            part.toolInvocation.state === "call"
+          ) {
+            needsUpdate = true;
+            return {
+              ...part,
+              toolInvocation: {
+                ...part.toolInvocation,
+                state: "result",
+                result: {
+                  content: "Tool execution was cancelled",
+                  __cancelled: true,
+                },
+              },
+            };
+          }
+          return part;
+        }
+      );
+
+      if (needsUpdate) {
+        updatedMessage = {
+          ...updatedMessage,
+          parts: updatedParts,
+        };
+      }
+    }
+
+    if (needsUpdate) {
+      const messageIndex = latestMessages.findIndex(
+        m => m.id === lastAssistantMessage.id
+      );
+      if (messageIndex !== -1) {
+        latestMessages[messageIndex] = updatedMessage;
+        setMessages(latestMessages);
+      }
+    }
+  }, [stop, setMessages, messagesRef]);
+
+  const messageOptions = useCallback(
+    (message: Message) => ({
+      actions: onRateResponse ? (
+        <>
+          <div className="border-r pr-1">
+            <CopyButton
+              content={message.content}
+              copyMessage="Copied response to clipboard!"
+            />
+          </div>
+          <Button
+            size="icon"
+            variant="ghost"
+            className="h-6 w-6"
+            onClick={() => onRateResponse(message.id, "thumbs-up")}
+          >
+            <ThumbsUp className="h-4 w-4" />
+          </Button>
+          <Button
+            size="icon"
+            variant="ghost"
+            className="h-6 w-6"
+            onClick={() => onRateResponse(message.id, "thumbs-down")}
+          >
+            <ThumbsDown className="h-4 w-4" />
+          </Button>
+        </>
+      ) : (
+        <CopyButton
+          content={message.content}
+          copyMessage="Copied response to clipboard!"
+        />
+      ),
+    }),
+    [onRateResponse]
+  );
+
+  return (
+    <ChatContainer className={className}>
+      <div className="flex-1 flex flex-col">
+        {isEmpty && append && suggestions ? (
+          <div className="flex-1 flex items-center justify-center">
+            <PromptSuggestions
+              label="Try these prompts ✨"
+              append={append}
+              suggestions={suggestions}
+            />
+          </div>
+        ) : null}
+
+        {messages.length > 0 ? (
+          <ChatMessages messages={messages}>
+            <MessageList
+              messages={messages}
+              isTyping={isTyping}
+              messageOptions={messageOptions}
+            />
+          </ChatMessages>
+        ) : null}
+      </div>
+
+      <div className="mt-auto border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container max-w-4xl py-4">
+          <ChatForm
+            isPending={isGenerating || isTyping}
+            handleSubmit={handleSubmit}
+          >
+            {() => (
+              <MessageInput
+                value={input}
+                onChange={handleInputChange}
+                allowAttachments={true}
+                files={null}
+                setFiles={() => {}}
+                stop={handleStop}
+                isGenerating={isGenerating}
+                transcribeAudio={transcribeAudio}
+                onRAGFileUpload={onRAGFileUpload}
+              />
+            )}
+          </ChatForm>
+        </div>
+      </div>
+    </ChatContainer>
+  );
+}
+Chat.displayName = "Chat";
+
+export function ChatMessages({
+  messages,
+  children,
+}: React.PropsWithChildren<{
+  messages: Message[];
+}>) {
+  const {
+    containerRef,
+    scrollToBottom,
+    handleScroll,
+    shouldAutoScroll,
+    handleTouchStart,
+  } = useAutoScroll([messages]);
+
+  return (
+    <div
+      className="grid grid-cols-1 overflow-y-auto pb-4"
+      ref={containerRef}
+      onScroll={handleScroll}
+      onTouchStart={handleTouchStart}
+    >
+      <div className="max-w-full [grid-column:1/1] [grid-row:1/1]">
+        {children}
+      </div>
+
+      {!shouldAutoScroll && (
+        <div className="pointer-events-none flex flex-1 items-end justify-end [grid-column:1/1] [grid-row:1/1]">
+          <div className="sticky bottom-0 left-0 flex w-full justify-end">
+            <Button
+              onClick={scrollToBottom}
+              className="pointer-events-auto h-8 w-8 rounded-full ease-in-out animate-in fade-in-0 slide-in-from-bottom-1"
+              size="icon"
+              variant="ghost"
+            >
+              <ArrowDown className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const ChatContainer = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn("flex flex-col max-h-full w-full", className)}
+      {...props}
+    />
+  );
+});
+ChatContainer.displayName = "ChatContainer";
+
+interface ChatFormProps {
+  className?: string;
+  isPending: boolean;
+  handleSubmit: (
+    event?: { preventDefault?: () => void },
+    options?: { experimental_attachments?: FileList }
+  ) => void;
+  children: (props: {
+    files: File[] | null;
+    setFiles: React.Dispatch<React.SetStateAction<File[] | null>>;
+  }) => ReactElement;
+}
+
+export const ChatForm = forwardRef<HTMLFormElement, ChatFormProps>(
+  ({ children, handleSubmit, isPending, className }, ref) => {
+    const [files, setFiles] = useState<File[] | null>(null);
+
+    const onSubmit = (event: React.FormEvent) => {
+      if (isPending) {
+        event.preventDefault();
+        return;
+      }
+
+      if (!files) {
+        handleSubmit(event);
+        return;
+      }
+
+      const fileList = createFileList(files);
+      handleSubmit(event, { experimental_attachments: fileList });
+      setFiles(null);
+    };
+
+    return (
+      <form ref={ref} onSubmit={onSubmit} className={className}>
+        {children({ files, setFiles })}
+      </form>
+    );
+  }
+);
+ChatForm.displayName = "ChatForm";
+
+function createFileList(files: File[] | FileList): FileList {
+  const dataTransfer = new DataTransfer();
+  for (const file of Array.from(files)) {
+    dataTransfer.items.add(file);
+  }
+  return dataTransfer.files;
+}

src/llama_stack_ui/components/chat-playground/conversations.test.tsx

@@ -0,0 +1,345 @@
+import React from "react";
+import { render, screen, waitFor, act } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { Conversations, SessionUtils } from "./conversations";
+import type { Message } from "@/components/chat-playground/chat-message";
+
+interface ChatSession {
+  id: string;
+  name: string;
+  messages: Message[];
+  selectedModel: string;
+  systemMessage: string;
+  agentId: string;
+  createdAt: number;
+  updatedAt: number;
+}
+
+const mockOnSessionChange = jest.fn();
+const mockOnNewSession = jest.fn();
+
+// Mock the auth client
+const mockClient = {
+  agents: {
+    session: {
+      list: jest.fn(),
+      create: jest.fn(),
+      delete: jest.fn(),
+      retrieve: jest.fn(),
+    },
+  },
+};
+
+// Mock the useAuthClient hook
+jest.mock("@/hooks/use-auth-client", () => ({
+  useAuthClient: jest.fn(() => mockClient),
+}));
+
+// Mock additional SessionUtils methods that are now being used
+jest.mock("./conversations", () => {
+  const actual = jest.requireActual("./conversations");
+  return {
+    ...actual,
+    SessionUtils: {
+      ...actual.SessionUtils,
+      saveSessionData: jest.fn(),
+      loadSessionData: jest.fn(),
+      saveAgentConfig: jest.fn(),
+      loadAgentConfig: jest.fn(),
+      clearAgentCache: jest.fn(),
+    },
+  };
+});
+
+const localStorageMock = {
+  getItem: jest.fn(),
+  setItem: jest.fn(),
+  removeItem: jest.fn(),
+  clear: jest.fn(),
+};
+
+Object.defineProperty(window, "localStorage", {
+  value: localStorageMock,
+  writable: true,
+});
+
+// Mock crypto.randomUUID for test environment
+let uuidCounter = 0;
+Object.defineProperty(globalThis, "crypto", {
+  value: {
+    randomUUID: jest.fn(() => `test-uuid-${++uuidCounter}`),
+  },
+  writable: true,
+});
+
+describe("SessionManager", () => {
+  const mockSession: ChatSession = {
+    id: "session_123",
+    name: "Test Session",
+    messages: [
+      {
+        id: "msg_1",
+        role: "user",
+        content: "Hello",
+        createdAt: new Date(),
+      },
+    ],
+    selectedModel: "test-model",
+    systemMessage: "You are a helpful assistant.",
+    agentId: "agent_123",
+    createdAt: 1710000000,
+    updatedAt: 1710001000,
+  };
+
+  const mockAgentSessions = [
+    {
+      session_id: "session_123",
+      session_name: "Test Session",
+      started_at: "2024-01-01T00:00:00Z",
+      turns: [],
+    },
+    {
+      session_id: "session_456",
+      session_name: "Another Session",
+      started_at: "2024-01-01T01:00:00Z",
+      turns: [],
+    },
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    localStorageMock.getItem.mockReturnValue(null);
+    localStorageMock.setItem.mockImplementation(() => {});
+    mockClient.agents.session.list.mockResolvedValue({
+      data: mockAgentSessions,
+    });
+    mockClient.agents.session.create.mockResolvedValue({
+      session_id: "new_session_123",
+    });
+    mockClient.agents.session.delete.mockResolvedValue(undefined);
+    mockClient.agents.session.retrieve.mockResolvedValue({
+      session_id: "test-session",
+      session_name: "Test Session",
+      started_at: new Date().toISOString(),
+      turns: [],
+    });
+    uuidCounter = 0; // Reset UUID counter for consistent test behavior
+  });
+
+  describe("Component Rendering", () => {
+    test("does not render when no agent is selected", async () => {
+      const { container } = await act(async () => {
+        return render(
+          <Conversations
+            selectedAgentId=""
+            currentSession={null}
+            onSessionChange={mockOnSessionChange}
+            onNewSession={mockOnNewSession}
+          />
+        );
+      });
+
+      expect(container.firstChild).toBeNull();
+    });
+
+    test("renders loading state initially", async () => {
+      mockClient.agents.session.list.mockImplementation(
+        () => new Promise(() => {}) // Never resolves to simulate loading
+      );
+
+      await act(async () => {
+        render(
+          <Conversations
+            selectedAgentId="agent_123"
+            currentSession={null}
+            onSessionChange={mockOnSessionChange}
+            onNewSession={mockOnNewSession}
+          />
+        );
+      });
+
+      expect(screen.getByText("Select Session")).toBeInTheDocument();
+      // When loading, the "+ New" button should be disabled
+      expect(screen.getByText("+ New")).toBeDisabled();
+    });
+
+    test("renders session selector when agent sessions are loaded", async () => {
+      await act(async () => {
+        render(
+          <Conversations
+            selectedAgentId="agent_123"
+            currentSession={null}
+            onSessionChange={mockOnSessionChange}
+            onNewSession={mockOnNewSession}
+          />
+        );
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText("Select Session")).toBeInTheDocument();
+      });
+    });
+
+    test("renders current session name when session is selected", async () => {
+      await act(async () => {
+        render(
+          <Conversations
+            selectedAgentId="agent_123"
+            currentSession={mockSession}
+            onSessionChange={mockOnSessionChange}
+            onNewSession={mockOnNewSession}
+          />
+        );
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText("Test Session")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("Agent API Integration", () => {
+    test("loads sessions from agent API on mount", async () => {
+      await act(async () => {
+        render(
+          <Conversations
+            selectedAgentId="agent_123"
+            currentSession={mockSession}
+            onSessionChange={mockOnSessionChange}
+            onNewSession={mockOnNewSession}
+          />
+        );
+      });
+
+      await waitFor(() => {
+        expect(mockClient.agents.session.list).toHaveBeenCalledWith(
+          "agent_123"
+        );
+      });
+    });
+
+    test("handles API errors gracefully", async () => {
+      mockClient.agents.session.list.mockRejectedValue(new Error("API Error"));
+      const consoleSpy = jest
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+
+      await act(async () => {
+        render(
+          <Conversations
+            selectedAgentId="agent_123"
+            currentSession={mockSession}
+            onSessionChange={mockOnSessionChange}
+            onNewSession={mockOnNewSession}
+          />
+        );
+      });
+
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          "Error loading agent sessions:",
+          expect.any(Error)
+        );
+      });
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe("Error Handling", () => {
+    test("component renders without crashing when API is unavailable", async () => {
+      mockClient.agents.session.list.mockRejectedValue(
+        new Error("Network Error")
+      );
+      const consoleSpy = jest
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+
+      await act(async () => {
+        render(
+          <Conversations
+            selectedAgentId="agent_123"
+            currentSession={mockSession}
+            onSessionChange={mockOnSessionChange}
+            onNewSession={mockOnNewSession}
+          />
+        );
+      });
+
+      // Should still render the session manager with the select trigger
+      expect(screen.getByRole("combobox")).toBeInTheDocument();
+      expect(screen.getByText("+ New")).toBeInTheDocument();
+      consoleSpy.mockRestore();
+    });
+  });
+});
+
+describe("SessionUtils", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    localStorageMock.getItem.mockReturnValue(null);
+    localStorageMock.setItem.mockImplementation(() => {});
+  });
+
+  describe("saveCurrentSessionId", () => {
+    test("saves session ID to localStorage", () => {
+      SessionUtils.saveCurrentSessionId("test-session-id");
+
+      expect(localStorageMock.setItem).toHaveBeenCalledWith(
+        "chat-playground-current-session",
+        "test-session-id"
+      );
+    });
+  });
+
+  describe("createDefaultSession", () => {
+    test("creates default session with agent ID", () => {
+      const result = SessionUtils.createDefaultSession("agent_123");
+
+      expect(result).toEqual(
+        expect.objectContaining({
+          name: "Default Session",
+          messages: [],
+          selectedModel: "",
+          systemMessage: "You are a helpful assistant.",
+          agentId: "agent_123",
+        })
+      );
+      expect(result.id).toBeTruthy();
+      expect(result.createdAt).toBeTruthy();
+      expect(result.updatedAt).toBeTruthy();
+    });
+
+    test("creates default session with inherited model", () => {
+      const result = SessionUtils.createDefaultSession(
+        "agent_123",
+        "inherited-model"
+      );
+
+      expect(result.selectedModel).toBe("inherited-model");
+      expect(result.agentId).toBe("agent_123");
+    });
+
+    test("creates unique session IDs", () => {
+      const originalNow = Date.now;
+      let mockTime = 1710005000;
+      Date.now = jest.fn(() => ++mockTime);
+
+      const session1 = SessionUtils.createDefaultSession("agent_123");
+      const session2 = SessionUtils.createDefaultSession("agent_123");
+
+      expect(session1.id).not.toBe(session2.id);
+
+      Date.now = originalNow;
+    });
+
+    test("sets creation and update timestamps", () => {
+      const result = SessionUtils.createDefaultSession("agent_123");
+
+      expect(result.createdAt).toBeTruthy();
+      expect(result.updatedAt).toBeTruthy();
+      expect(typeof result.createdAt).toBe("number");
+      expect(typeof result.updatedAt).toBe("number");
+    });
+  });
+});

src/llama_stack_ui/components/chat-playground/conversations.tsx

@@ -0,0 +1,565 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import { Card } from "@/components/ui/card";
+import { Trash2 } from "lucide-react";
+import type { Message } from "@/components/chat-playground/chat-message";
+import { useAuthClient } from "@/hooks/use-auth-client";
+import { cleanMessageContent } from "@/lib/message-content-utils";
+import type {
+  Session,
+  SessionCreateParams,
+} from "llama-stack-client/resources/agents";
+
+export interface ChatSession {
+  id: string;
+  name: string;
+  messages: Message[];
+  selectedModel: string;
+  systemMessage: string;
+  agentId: string;
+  session?: Session;
+  createdAt: number;
+  updatedAt: number;
+}
+
+interface SessionManagerProps {
+  currentSession: ChatSession | null;
+  onSessionChange: (session: ChatSession) => void;
+  onNewSession: () => void;
+  selectedAgentId: string;
+}
+
+const CURRENT_SESSION_KEY = "chat-playground-current-session";
+
+// ensures this only happens client side
+const safeLocalStorage = {
+  getItem: (key: string): string | null => {
+    if (typeof window === "undefined") return null;
+    try {
+      return localStorage.getItem(key);
+    } catch (err) {
+      console.error("Error accessing localStorage:", err);
+      return null;
+    }
+  },
+  setItem: (key: string, value: string): void => {
+    if (typeof window === "undefined") return;
+    try {
+      localStorage.setItem(key, value);
+    } catch (err) {
+      console.error("Error writing to localStorage:", err);
+    }
+  },
+  removeItem: (key: string): void => {
+    if (typeof window === "undefined") return;
+    try {
+      localStorage.removeItem(key);
+    } catch (err) {
+      console.error("Error removing from localStorage:", err);
+    }
+  },
+};
+
+const generateSessionId = (): string => {
+  return globalThis.crypto.randomUUID();
+};
+
+export function Conversations({
+  currentSession,
+  onSessionChange,
+  selectedAgentId,
+}: SessionManagerProps) {
+  const [sessions, setSessions] = useState<ChatSession[]>([]);
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  const [newSessionName, setNewSessionName] = useState("");
+  const [loading, setLoading] = useState(false);
+  const client = useAuthClient();
+
+  const loadAgentSessions = useCallback(async () => {
+    if (!selectedAgentId) return;
+
+    setLoading(true);
+    try {
+      const response = await client.agents.session.list(selectedAgentId);
+      console.log("Sessions response:", response);
+
+      if (!response.data || !Array.isArray(response.data)) {
+        console.warn("Invalid sessions response, starting fresh");
+        setSessions([]);
+        return;
+      }
+
+      const agentSessions: ChatSession[] = response.data
+        .filter(sessionData => {
+          const isValid =
+            sessionData &&
+            typeof sessionData === "object" &&
+            sessionData.session_id &&
+            sessionData.session_name;
+          if (!isValid) {
+            console.warn("Filtering out invalid session:", sessionData);
+          }
+          return isValid;
+        })
+        .map(sessionData => ({
+          id: sessionData.session_id,
+          name: sessionData.session_name,
+          messages: [],
+          selectedModel: currentSession?.selectedModel || "",
+          systemMessage:
+            currentSession?.systemMessage || "You are a helpful assistant.",
+          agentId: selectedAgentId,
+          session: sessionData,
+          createdAt: sessionData.started_at
+            ? new Date(sessionData.started_at).getTime()
+            : Date.now(),
+          updatedAt: sessionData.started_at
+            ? new Date(sessionData.started_at).getTime()
+            : Date.now(),
+        }));
+      setSessions(agentSessions);
+    } catch (error) {
+      console.error("Error loading agent sessions:", error);
+      setSessions([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [
+    selectedAgentId,
+    client,
+    currentSession?.selectedModel,
+    currentSession?.systemMessage,
+  ]);
+
+  useEffect(() => {
+    if (selectedAgentId) {
+      loadAgentSessions();
+    }
+  }, [selectedAgentId, loadAgentSessions]);
+
+  const createNewSession = async () => {
+    if (!selectedAgentId) return;
+
+    const sessionName =
+      newSessionName.trim() || `Session ${sessions.length + 1}`;
+    setLoading(true);
+
+    try {
+      const response = await client.agents.session.create(selectedAgentId, {
+        session_name: sessionName,
+      } as SessionCreateParams);
+
+      const newSession: ChatSession = {
+        id: response.session_id,
+        name: sessionName,
+        messages: [],
+        selectedModel: currentSession?.selectedModel || "",
+        systemMessage:
+          currentSession?.systemMessage || "You are a helpful assistant.",
+        agentId: selectedAgentId,
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+      };
+
+      setSessions(prev => [...prev, newSession]);
+      SessionUtils.saveCurrentSessionId(newSession.id, selectedAgentId);
+      onSessionChange(newSession);
+
+      setNewSessionName("");
+      setShowCreateForm(false);
+    } catch (error) {
+      console.error("Error creating session:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadSessionMessages = useCallback(
+    async (agentId: string, sessionId: string): Promise<Message[]> => {
+      try {
+        const session = await client.agents.session.retrieve(
+          agentId,
+          sessionId
+        );
+
+        if (!session || !session.turns || !Array.isArray(session.turns)) {
+          return [];
+        }
+
+        const messages: Message[] = [];
+        for (const turn of session.turns) {
+          // Add user messages from input_messages
+          if (turn.input_messages && Array.isArray(turn.input_messages)) {
+            for (const input of turn.input_messages) {
+              if (input.role === "user" && input.content) {
+                messages.push({
+                  id: `${turn.turn_id}-user-${messages.length}`,
+                  role: "user",
+                  content:
+                    typeof input.content === "string"
+                      ? input.content
+                      : JSON.stringify(input.content),
+                  createdAt: new Date(turn.started_at || Date.now()),
+                });
+              }
+            }
+          }
+
+          // Add assistant message from output_message
+          if (turn.output_message && turn.output_message.content) {
+            messages.push({
+              id: `${turn.turn_id}-assistant-${messages.length}`,
+              role: "assistant",
+              content: cleanMessageContent(turn.output_message.content),
+              createdAt: new Date(
+                turn.completed_at || turn.started_at || Date.now()
+              ),
+            });
+          }
+        }
+
+        return messages;
+      } catch (error) {
+        console.error("Error loading session messages:", error);
+        return [];
+      }
+    },
+    [client]
+  );
+
+  const switchToSession = useCallback(
+    async (sessionId: string) => {
+      const session = sessions.find(s => s.id === sessionId);
+      if (session) {
+        setLoading(true);
+        try {
+          // Load messages for this session
+          const messages = await loadSessionMessages(
+            selectedAgentId,
+            sessionId
+          );
+          const sessionWithMessages = {
+            ...session,
+            messages,
+          };
+
+          SessionUtils.saveCurrentSessionId(sessionId, selectedAgentId);
+          onSessionChange(sessionWithMessages);
+        } catch (error) {
+          console.error("Error switching to session:", error);
+          // Fallback to session without messages
+          SessionUtils.saveCurrentSessionId(sessionId, selectedAgentId);
+          onSessionChange(session);
+        } finally {
+          setLoading(false);
+        }
+      }
+    },
+    [sessions, selectedAgentId, loadSessionMessages, onSessionChange]
+  );
+
+  const deleteSession = async (sessionId: string) => {
+    if (!selectedAgentId) {
+      return;
+    }
+
+    if (
+      confirm(
+        "Are you sure you want to delete this session? This action cannot be undone."
+      )
+    ) {
+      setLoading(true);
+      try {
+        await client.agents.session.delete(selectedAgentId, sessionId);
+
+        const updatedSessions = sessions.filter(s => s.id !== sessionId);
+        setSessions(updatedSessions);
+
+        if (currentSession?.id === sessionId) {
+          const newCurrentSession = updatedSessions[0] || null;
+          if (newCurrentSession) {
+            SessionUtils.saveCurrentSessionId(
+              newCurrentSession.id,
+              selectedAgentId
+            );
+            onSessionChange(newCurrentSession);
+          } else {
+            SessionUtils.clearCurrentSession(selectedAgentId);
+            onNewSession();
+          }
+        }
+      } catch (error) {
+        console.error("Error deleting session:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (currentSession) {
+      setSessions(prevSessions => {
+        const updatedSessions = prevSessions.map(session =>
+          session.id === currentSession.id ? currentSession : session
+        );
+
+        if (!prevSessions.find(s => s.id === currentSession.id)) {
+          updatedSessions.push(currentSession);
+        }
+
+        return updatedSessions;
+      });
+    }
+  }, [currentSession]);
+
+  if (!selectedAgentId) {
+    return null;
+  }
+
+  return (
+    <div className="relative">
+      <div className="flex items-center gap-2">
+        <Select
+          value={currentSession?.id || ""}
+          onValueChange={switchToSession}
+        >
+          <SelectTrigger className="w-[200px]">
+            <SelectValue placeholder="Select Session" />
+          </SelectTrigger>
+          <SelectContent>
+            {sessions.map(session => (
+              <SelectItem key={session.id} value={session.id}>
+                {session.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <Button
+          onClick={() => setShowCreateForm(true)}
+          variant="outline"
+          size="sm"
+          disabled={loading || !selectedAgentId}
+        >
+          + New
+        </Button>
+
+        {currentSession && (
+          <Button
+            onClick={() => deleteSession(currentSession.id)}
+            variant="outline"
+            size="sm"
+            className="text-destructive hover:text-destructive hover:bg-destructive/10"
+            title="Delete current session"
+          >
+            <Trash2 className="h-3 w-3" />
+          </Button>
+        )}
+      </div>
+
+      {showCreateForm && (
+        <Card className="absolute top-full left-0 mt-2 p-4 space-y-3 w-80 z-50 bg-background border shadow-lg">
+          <h3 className="text-md font-semibold">Create New Session</h3>
+
+          <Input
+            value={newSessionName}
+            onChange={e => setNewSessionName(e.target.value)}
+            placeholder="Session name (optional)"
+            onKeyDown={e => {
+              if (e.key === "Enter") {
+                createNewSession();
+              } else if (e.key === "Escape") {
+                setShowCreateForm(false);
+                setNewSessionName("");
+              }
+            }}
+          />
+
+          <div className="flex gap-2">
+            <Button
+              onClick={createNewSession}
+              className="flex-1"
+              disabled={loading}
+            >
+              {loading ? "Creating..." : "Create"}
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setShowCreateForm(false);
+                setNewSessionName("");
+              }}
+              className="flex-1"
+            >
+              Cancel
+            </Button>
+          </div>
+        </Card>
+      )}
+
+      {currentSession && sessions.length > 1 && (
+        <div className="absolute top-full left-0 mt-1 text-xs text-gray-500 whitespace-nowrap">
+          {sessions.length} sessions • Current: {currentSession.name}
+          {currentSession.messages.length > 0 &&
+            ` • ${currentSession.messages.length} messages`}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const SessionUtils = {
+  loadCurrentSessionId: (agentId?: string): string | null => {
+    const key = agentId
+      ? `${CURRENT_SESSION_KEY}-${agentId}`
+      : CURRENT_SESSION_KEY;
+    return safeLocalStorage.getItem(key);
+  },
+
+  saveCurrentSessionId: (sessionId: string, agentId?: string) => {
+    const key = agentId
+      ? `${CURRENT_SESSION_KEY}-${agentId}`
+      : CURRENT_SESSION_KEY;
+    safeLocalStorage.setItem(key, sessionId);
+  },
+
+  createDefaultSession: (
+    agentId: string,
+    inheritModel?: string
+  ): ChatSession => ({
+    id: generateSessionId(),
+    name: "Default Session",
+    messages: [],
+    selectedModel: inheritModel || "",
+    systemMessage: "You are a helpful assistant.",
+    agentId,
+    createdAt: Date.now(),
+    updatedAt: Date.now(),
+  }),
+
+  clearCurrentSession: (agentId?: string) => {
+    const key = agentId
+      ? `${CURRENT_SESSION_KEY}-${agentId}`
+      : CURRENT_SESSION_KEY;
+    safeLocalStorage.removeItem(key);
+  },
+
+  loadCurrentAgentId: (): string | null => {
+    return safeLocalStorage.getItem("chat-playground-current-agent");
+  },
+
+  saveCurrentAgentId: (agentId: string) => {
+    safeLocalStorage.setItem("chat-playground-current-agent", agentId);
+  },
+
+  // Comprehensive session caching
+  saveSessionData: (agentId: string, sessionData: ChatSession) => {
+    const key = `chat-playground-session-data-${agentId}-${sessionData.id}`;
+    safeLocalStorage.setItem(
+      key,
+      JSON.stringify({
+        ...sessionData,
+        cachedAt: Date.now(),
+      })
+    );
+  },
+
+  loadSessionData: (agentId: string, sessionId: string): ChatSession | null => {
+    const key = `chat-playground-session-data-${agentId}-${sessionId}`;
+    const cached = safeLocalStorage.getItem(key);
+    if (!cached) return null;
+
+    try {
+      const data = JSON.parse(cached);
+      // Check if cache is fresh (less than 1 hour old)
+      const cacheAge = Date.now() - (data.cachedAt || 0);
+      if (cacheAge > 60 * 60 * 1000) {
+        safeLocalStorage.removeItem(key);
+        return null;
+      }
+
+      // Convert date strings back to Date objects
+      return {
+        ...data,
+        messages: data.messages.map(
+          (msg: { createdAt: string; [key: string]: unknown }) => ({
+            ...msg,
+            createdAt: new Date(msg.createdAt),
+          })
+        ),
+      };
+    } catch (error) {
+      console.error("Error parsing cached session data:", error);
+      safeLocalStorage.removeItem(key);
+      return null;
+    }
+  },
+
+  // Agent config caching
+  saveAgentConfig: (
+    agentId: string,
+    config: {
+      toolgroups?: Array<
+        string | { name: string; args: Record<string, unknown> }
+      >;
+      [key: string]: unknown;
+    }
+  ) => {
+    const key = `chat-playground-agent-config-${agentId}`;
+    safeLocalStorage.setItem(
+      key,
+      JSON.stringify({
+        config,
+        cachedAt: Date.now(),
+      })
+    );
+  },
+
+  loadAgentConfig: (
+    agentId: string
+  ): {
+    toolgroups?: Array<
+      string | { name: string; args: Record<string, unknown> }
+    >;
+    [key: string]: unknown;
+  } | null => {
+    const key = `chat-playground-agent-config-${agentId}`;
+    const cached = safeLocalStorage.getItem(key);
+    if (!cached) return null;
+
+    try {
+      const data = JSON.parse(cached);
+      // Check if cache is fresh (less than 30 minutes old)
+      const cacheAge = Date.now() - (data.cachedAt || 0);
+      if (cacheAge > 30 * 60 * 1000) {
+        safeLocalStorage.removeItem(key);
+        return null;
+      }
+      return data.config;
+    } catch (error) {
+      console.error("Error parsing cached agent config:", error);
+      safeLocalStorage.removeItem(key);
+      return null;
+    }
+  },
+
+  // Clear all cached data for an agent
+  clearAgentCache: (agentId: string) => {
+    const keys = Object.keys(localStorage).filter(
+      key =>
+        key.includes(`chat-playground-session-data-${agentId}`) ||
+        key.includes(`chat-playground-agent-config-${agentId}`)
+    );
+    keys.forEach(key => safeLocalStorage.removeItem(key));
+  },
+};

src/llama_stack_ui/components/chat-playground/interrupt-prompt.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { X } from "lucide-react";
+
+interface InterruptPromptProps {
+  isOpen: boolean;
+  close: () => void;
+}
+
+export function InterruptPrompt({ isOpen, close }: InterruptPromptProps) {
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ top: 0, filter: "blur(5px)" }}
+          animate={{
+            top: -40,
+            filter: "blur(0px)",
+            transition: {
+              type: "spring",
+              filter: { type: "tween" },
+            },
+          }}
+          exit={{ top: 0, filter: "blur(5px)" }}
+          className="absolute left-1/2 flex -translate-x-1/2 overflow-hidden whitespace-nowrap rounded-full border bg-background py-1 text-center text-sm text-muted-foreground"
+        >
+          <span className="ml-2.5">Press Enter again to interrupt</span>
+          <button
+            className="ml-1 mr-2.5 flex items-center"
+            type="button"
+            onClick={close}
+            aria-label="Close"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

src/llama_stack_ui/components/chat-playground/markdown-renderer.tsx

@@ -0,0 +1,240 @@
+import React, { Suspense, useEffect, useState } from "react";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+import { cn } from "@/lib/utils";
+import { CopyButton } from "@/components/ui/copy-button";
+
+interface MarkdownRendererProps {
+  children: string;
+}
+
+export function MarkdownRenderer({ children }: MarkdownRendererProps) {
+  return (
+    <div className="space-y-3">
+      <Markdown remarkPlugins={[remarkGfm]} components={COMPONENTS}>
+        {children}
+      </Markdown>
+    </div>
+  );
+}
+
+interface HighlightedPre extends React.HTMLAttributes<HTMLPreElement> {
+  children: string;
+  language: string;
+}
+
+const HighlightedPre = React.memo(
+  ({ children, language, ...props }: HighlightedPre) => {
+    const [tokens, setTokens] = useState<unknown[] | null>(null);
+    const [isSupported, setIsSupported] = useState(false);
+
+    useEffect(() => {
+      let mounted = true;
+
+      const loadAndHighlight = async () => {
+        try {
+          const { codeToTokens, bundledLanguages } = await import("shiki");
+
+          if (!mounted) return;
+
+          if (!(language in bundledLanguages)) {
+            setIsSupported(false);
+            return;
+          }
+
+          setIsSupported(true);
+
+          const { tokens: highlightedTokens } = await codeToTokens(children, {
+            lang: language as keyof typeof bundledLanguages,
+            defaultColor: false,
+            themes: {
+              light: "github-light",
+              dark: "github-dark",
+            },
+          });
+
+          if (mounted) {
+            setTokens(highlightedTokens);
+          }
+        } catch {
+          if (mounted) {
+            setIsSupported(false);
+          }
+        }
+      };
+
+      loadAndHighlight();
+
+      return () => {
+        mounted = false;
+      };
+    }, [children, language]);
+
+    if (!isSupported) {
+      return <pre {...props}>{children}</pre>;
+    }
+
+    if (!tokens) {
+      return <pre {...props}>{children}</pre>;
+    }
+
+    return (
+      <pre {...props}>
+        <code>
+          {tokens.map((line, lineIndex) => (
+            <React.Fragment key={lineIndex}>
+              <span>
+                {line.map((token, tokenIndex) => {
+                  const style =
+                    typeof token.htmlStyle === "string"
+                      ? undefined
+                      : token.htmlStyle;
+
+                  return (
+                    <span
+                      key={tokenIndex}
+                      className="text-shiki-light bg-shiki-light-bg dark:text-shiki-dark dark:bg-shiki-dark-bg"
+                      style={style}
+                    >
+                      {token.content}
+                    </span>
+                  );
+                })}
+              </span>
+              {lineIndex !== tokens.length - 1 && "\n"}
+            </React.Fragment>
+          ))}
+        </code>
+      </pre>
+    );
+  }
+);
+HighlightedPre.displayName = "HighlightedCode";
+
+interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement> {
+  children: React.ReactNode;
+  className?: string;
+  language: string;
+}
+
+const CodeBlock = ({
+  children,
+  className,
+  language,
+  ...restProps
+}: CodeBlockProps) => {
+  const code =
+    typeof children === "string"
+      ? children
+      : childrenTakeAllStringContents(children);
+
+  const preClass = cn(
+    "overflow-x-scroll rounded-md border bg-background/50 p-4 font-mono text-sm [scrollbar-width:none]",
+    className
+  );
+
+  return (
+    <div className="group/code relative mb-4">
+      <Suspense
+        fallback={
+          <pre className={preClass} {...restProps}>
+            {children}
+          </pre>
+        }
+      >
+        <HighlightedPre language={language} className={preClass}>
+          {code}
+        </HighlightedPre>
+      </Suspense>
+
+      <div className="invisible absolute right-2 top-2 flex space-x-1 rounded-lg p-1 opacity-0 transition-all duration-200 group-hover/code:visible group-hover/code:opacity-100">
+        <CopyButton content={code} copyMessage="Copied code to clipboard" />
+      </div>
+    </div>
+  );
+};
+
+function childrenTakeAllStringContents(element: unknown): string {
+  if (typeof element === "string") {
+    return element;
+  }
+
+  if (element?.props?.children) {
+    const children = element.props.children;
+
+    if (Array.isArray(children)) {
+      return children
+        .map(child => childrenTakeAllStringContents(child))
+        .join("");
+    } else {
+      return childrenTakeAllStringContents(children);
+    }
+  }
+
+  return "";
+}
+
+const COMPONENTS = {
+  h1: withClass("h1", "text-2xl font-semibold"),
+  h2: withClass("h2", "font-semibold text-xl"),
+  h3: withClass("h3", "font-semibold text-lg"),
+  h4: withClass("h4", "font-semibold text-base"),
+  h5: withClass("h5", "font-medium"),
+  strong: withClass("strong", "font-semibold"),
+  a: withClass("a", "text-primary underline underline-offset-2"),
+  blockquote: withClass("blockquote", "border-l-2 border-primary pl-4"),
+  code: ({
+    children,
+    className,
+    ...rest
+  }: {
+    children: React.ReactNode;
+    className?: string;
+  }) => {
+    const match = /language-(\w+)/.exec(className || "");
+    return match ? (
+      <CodeBlock className={className} language={match[1]} {...rest}>
+        {children}
+      </CodeBlock>
+    ) : (
+      <code
+        className={cn(
+          "font-mono [:not(pre)>&]:rounded-md [:not(pre)>&]:bg-background/50 [:not(pre)>&]:px-1 [:not(pre)>&]:py-0.5"
+        )}
+        {...rest}
+      >
+        {children}
+      </code>
+    );
+  },
+  pre: ({ children }: { children: React.ReactNode }) => children,
+  ol: withClass("ol", "list-decimal space-y-2 pl-6"),
+  ul: withClass("ul", "list-disc space-y-2 pl-6"),
+  li: withClass("li", "my-1.5"),
+  table: withClass(
+    "table",
+    "w-full border-collapse overflow-y-auto rounded-md border border-foreground/20"
+  ),
+  th: withClass(
+    "th",
+    "border border-foreground/20 px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
+  ),
+  td: withClass(
+    "td",
+    "border border-foreground/20 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
+  ),
+  tr: withClass("tr", "m-0 border-t p-0 even:bg-muted"),
+  p: withClass("p", "whitespace-pre-wrap"),
+  hr: withClass("hr", "border-foreground/20"),
+};
+
+function withClass(Tag: keyof JSX.IntrinsicElements, classes: string) {
+  const Component = ({ ...props }: Record<string, unknown>) => (
+    <Tag className={classes} {...props} />
+  );
+  Component.displayName = Tag;
+  return Component;
+}
+
+export default MarkdownRenderer;

src/llama_stack_ui/components/chat-playground/message-components.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+export interface MessageBlockProps {
+  label: string;
+  labelDetail?: string;
+  content: React.ReactNode;
+  className?: string;
+  contentClassName?: string;
+}
+
+export const MessageBlock: React.FC<MessageBlockProps> = ({
+  label,
+  labelDetail,
+  content,
+  className = "",
+  contentClassName = "",
+}) => {
+  return (
+    <div className={`mb-4 ${className}`}>
+      <p className="py-1 font-semibold text-muted-foreground mb-1">
+        {label}
+        {labelDetail && (
+          <span className="text-xs text-muted-foreground font-normal ml-1">
+            {labelDetail}
+          </span>
+        )}
+      </p>
+      <div className={`py-1 whitespace-pre-wrap ${contentClassName}`}>
+        {content}
+      </div>
+    </div>
+  );
+};
+
+export interface ToolCallBlockProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const ToolCallBlock = ({ children, className }: ToolCallBlockProps) => {
+  const baseClassName =
+    "p-3 bg-slate-50 border border-slate-200 rounded-md text-sm";
+
+  return (
+    <div className={`${baseClassName} ${className || ""}`}>
+      <pre className="whitespace-pre-wrap text-xs">{children}</pre>
+    </div>
+  );
+};

src/llama_stack_ui/components/chat-playground/message-input.tsx

@@ -0,0 +1,459 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowUp, Info, Loader2, Mic, Paperclip, Square } from "lucide-react";
+import { omit } from "remeda";
+
+import { cn } from "@/lib/utils";
+import { useAudioRecording } from "@/hooks/use-audio-recording";
+import { useAutosizeTextArea } from "@/hooks/use-autosize-textarea";
+import { AudioVisualizer } from "@/components/ui/audio-visualizer";
+import { Button } from "@/components/ui/button";
+import { FilePreview } from "@/components/ui/file-preview";
+import { InterruptPrompt } from "@/components/chat-playground/interrupt-prompt";
+
+interface MessageInputBaseProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  value: string;
+  submitOnEnter?: boolean;
+  stop?: () => void;
+  isGenerating: boolean;
+  enableInterrupt?: boolean;
+  transcribeAudio?: (blob: Blob) => Promise<string>;
+  onRAGFileUpload?: (file: File) => Promise<void>;
+}
+
+interface MessageInputWithoutAttachmentProps extends MessageInputBaseProps {
+  allowAttachments?: false;
+}
+
+interface MessageInputWithAttachmentsProps extends MessageInputBaseProps {
+  allowAttachments: true;
+  files: File[] | null;
+  setFiles: React.Dispatch<React.SetStateAction<File[] | null>>;
+}
+
+type MessageInputProps =
+  | MessageInputWithoutAttachmentProps
+  | MessageInputWithAttachmentsProps;
+
+export function MessageInput({
+  placeholder = "Ask AI...",
+  className,
+  onKeyDown: onKeyDownProp,
+  submitOnEnter = true,
+  stop,
+  isGenerating,
+  enableInterrupt = true,
+  transcribeAudio,
+  ...props
+}: MessageInputProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const [showInterruptPrompt, setShowInterruptPrompt] = useState(false);
+
+  const {
+    isListening,
+    isSpeechSupported,
+    isRecording,
+    isTranscribing,
+    audioStream,
+    toggleListening,
+    stopRecording,
+  } = useAudioRecording({
+    transcribeAudio,
+    onTranscriptionComplete: text => {
+      props.onChange?.({
+        target: { value: text },
+      } as React.ChangeEvent<HTMLTextAreaElement>);
+    },
+  });
+
+  useEffect(() => {
+    if (!isGenerating) {
+      setShowInterruptPrompt(false);
+    }
+  }, [isGenerating]);
+
+  const addFiles = (files: File[] | null) => {
+    if (props.allowAttachments) {
+      props.setFiles(currentFiles => {
+        if (currentFiles === null) {
+          return files;
+        }
+
+        if (files === null) {
+          return currentFiles;
+        }
+
+        return [...currentFiles, ...files];
+      });
+    }
+  };
+
+  const onDragOver = (event: React.DragEvent) => {
+    if (props.allowAttachments !== true) return;
+    event.preventDefault();
+    setIsDragging(true);
+  };
+
+  const onDragLeave = (event: React.DragEvent) => {
+    if (props.allowAttachments !== true) return;
+    event.preventDefault();
+    setIsDragging(false);
+  };
+
+  const onDrop = (event: React.DragEvent) => {
+    setIsDragging(false);
+    if (props.allowAttachments !== true) return;
+    event.preventDefault();
+    const dataTransfer = event.dataTransfer;
+    if (dataTransfer.files.length) {
+      addFiles(Array.from(dataTransfer.files));
+    }
+  };
+
+  const onPaste = (event: React.ClipboardEvent) => {
+    const items = event.clipboardData?.items;
+    if (!items) return;
+
+    const text = event.clipboardData.getData("text");
+    if (text && text.length > 500 && props.allowAttachments) {
+      event.preventDefault();
+      const blob = new Blob([text], { type: "text/plain" });
+      const file = new File([blob], "Pasted text", {
+        type: "text/plain",
+        lastModified: Date.now(),
+      });
+      addFiles([file]);
+      return;
+    }
+
+    const files = Array.from(items)
+      .map(item => item.getAsFile())
+      .filter(file => file !== null);
+
+    if (props.allowAttachments && files.length > 0) {
+      addFiles(files);
+    }
+  };
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (submitOnEnter && event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+
+      if (isGenerating && stop && enableInterrupt) {
+        if (showInterruptPrompt) {
+          stop();
+          setShowInterruptPrompt(false);
+          event.currentTarget.form?.requestSubmit();
+        } else if (
+          props.value ||
+          (props.allowAttachments && props.files?.length)
+        ) {
+          setShowInterruptPrompt(true);
+          return;
+        }
+      }
+
+      event.currentTarget.form?.requestSubmit();
+    }
+
+    onKeyDownProp?.(event);
+  };
+
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const [textAreaHeight, setTextAreaHeight] = useState<number>(0);
+
+  useEffect(() => {
+    if (textAreaRef.current) {
+      setTextAreaHeight(textAreaRef.current.offsetHeight);
+    }
+  }, [props.value]);
+
+  const showFileList =
+    props.allowAttachments && props.files && props.files.length > 0;
+
+  useAutosizeTextArea({
+    ref: textAreaRef,
+    maxHeight: 240,
+    borderWidth: 1,
+    dependencies: [props.value, showFileList],
+  });
+
+  return (
+    <div
+      className="relative flex w-full"
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
+    >
+      {enableInterrupt && (
+        <InterruptPrompt
+          isOpen={showInterruptPrompt}
+          close={() => setShowInterruptPrompt(false)}
+        />
+      )}
+
+      <RecordingPrompt
+        isVisible={isRecording}
+        onStopRecording={stopRecording}
+      />
+
+      <div className="relative flex w-full items-center space-x-2">
+        <div className="relative flex-1">
+          <textarea
+            aria-label="Write your prompt here"
+            placeholder={placeholder}
+            ref={textAreaRef}
+            onPaste={onPaste}
+            onKeyDown={onKeyDown}
+            className={cn(
+              "z-10 w-full grow resize-none rounded-xl border border-input bg-background p-3 pr-24 text-sm ring-offset-background transition-[border] placeholder:text-muted-foreground focus-visible:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+              showFileList && "pb-16",
+              className
+            )}
+            {...(props.allowAttachments
+              ? omit(props, [
+                  "allowAttachments",
+                  "files",
+                  "setFiles",
+                  "onRAGFileUpload",
+                ])
+              : omit(props, ["allowAttachments", "onRAGFileUpload"]))}
+          />
+
+          {props.allowAttachments && (
+            <div className="absolute inset-x-3 bottom-0 z-20 overflow-x-scroll py-3">
+              <div className="flex space-x-3">
+                <AnimatePresence mode="popLayout">
+                  {props.files?.map(file => {
+                    return (
+                      <FilePreview
+                        key={file.name + String(file.lastModified)}
+                        file={file}
+                        onRemove={() => {
+                          props.setFiles(files => {
+                            if (!files) return null;
+
+                            const filtered = Array.from(files).filter(
+                              f => f !== file
+                            );
+                            if (filtered.length === 0) return null;
+                            return filtered;
+                          });
+                        }}
+                      />
+                    );
+                  })}
+                </AnimatePresence>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="absolute right-3 top-3 z-20 flex gap-2">
+        {props.allowAttachments && (
+          <Button
+            type="button"
+            size="icon"
+            variant="outline"
+            className="h-8 w-8"
+            aria-label="Upload file to RAG"
+            disabled={false}
+            onClick={async () => {
+              const input = document.createElement("input");
+              input.type = "file";
+              input.accept = ".pdf,.txt,.md,.html,.csv,.json";
+              input.onchange = async e => {
+                const file = (e.target as HTMLInputElement).files?.[0];
+                if (file && props.onRAGFileUpload) {
+                  await props.onRAGFileUpload(file);
+                }
+              };
+              input.click();
+            }}
+          >
+            <Paperclip className="h-4 w-4" />
+          </Button>
+        )}
+        {isSpeechSupported && (
+          <Button
+            type="button"
+            variant="outline"
+            className={cn("h-8 w-8", isListening && "text-primary")}
+            aria-label="Voice input"
+            size="icon"
+            onClick={toggleListening}
+          >
+            <Mic className="h-4 w-4" />
+          </Button>
+        )}
+        {isGenerating && stop ? (
+          <Button
+            type="button"
+            size="icon"
+            className="h-8 w-8"
+            aria-label="Stop generating"
+            onClick={stop}
+          >
+            <Square className="h-3 w-3 animate-pulse" fill="currentColor" />
+          </Button>
+        ) : (
+          <Button
+            type="submit"
+            size="icon"
+            className="h-8 w-8 transition-opacity"
+            aria-label="Send message"
+            disabled={props.value === "" || isGenerating}
+          >
+            <ArrowUp className="h-5 w-5" />
+          </Button>
+        )}
+      </div>
+
+      {props.allowAttachments && <FileUploadOverlay isDragging={isDragging} />}
+
+      <RecordingControls
+        isRecording={isRecording}
+        isTranscribing={isTranscribing}
+        audioStream={audioStream}
+        textAreaHeight={textAreaHeight}
+        onStopRecording={stopRecording}
+      />
+    </div>
+  );
+}
+MessageInput.displayName = "MessageInput";
+
+interface FileUploadOverlayProps {
+  isDragging: boolean;
+}
+
+function FileUploadOverlay({ isDragging }: FileUploadOverlayProps) {
+  return (
+    <AnimatePresence>
+      {isDragging && (
+        <motion.div
+          className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center space-x-2 rounded-xl border border-dashed border-border bg-background text-sm text-muted-foreground"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
+          aria-hidden
+        >
+          <Paperclip className="h-4 w-4" />
+          <span>Drop your files here to attach them.</span>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+function TranscribingOverlay() {
+  return (
+    <motion.div
+      className="flex h-full w-full flex-col items-center justify-center rounded-xl bg-background/80 backdrop-blur-sm"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.2 }}
+    >
+      <div className="relative">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        <motion.div
+          className="absolute inset-0 h-8 w-8 animate-pulse rounded-full bg-primary/20"
+          initial={{ scale: 0.8, opacity: 0 }}
+          animate={{ scale: 1.2, opacity: 1 }}
+          transition={{
+            duration: 1,
+            repeat: Infinity,
+            repeatType: "reverse",
+            ease: "easeInOut",
+          }}
+        />
+      </div>
+      <p className="mt-4 text-sm font-medium text-muted-foreground">
+        Transcribing audio...
+      </p>
+    </motion.div>
+  );
+}
+
+interface RecordingPromptProps {
+  isVisible: boolean;
+  onStopRecording: () => void;
+}
+
+function RecordingPrompt({ isVisible, onStopRecording }: RecordingPromptProps) {
+  return (
+    <AnimatePresence>
+      {isVisible && (
+        <motion.div
+          initial={{ top: 0, filter: "blur(5px)" }}
+          animate={{
+            top: -40,
+            filter: "blur(0px)",
+            transition: {
+              type: "spring",
+              filter: { type: "tween" },
+            },
+          }}
+          exit={{ top: 0, filter: "blur(5px)" }}
+          className="absolute left-1/2 flex -translate-x-1/2 cursor-pointer overflow-hidden whitespace-nowrap rounded-full border bg-background py-1 text-center text-sm text-muted-foreground"
+          onClick={onStopRecording}
+        >
+          <span className="mx-2.5 flex items-center">
+            <Info className="mr-2 h-3 w-3" />
+            Click to finish recording
+          </span>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+interface RecordingControlsProps {
+  isRecording: boolean;
+  isTranscribing: boolean;
+  audioStream: MediaStream | null;
+  textAreaHeight: number;
+  onStopRecording: () => void;
+}
+
+function RecordingControls({
+  isRecording,
+  isTranscribing,
+  audioStream,
+  textAreaHeight,
+  onStopRecording,
+}: RecordingControlsProps) {
+  if (isRecording) {
+    return (
+      <div
+        className="absolute inset-[1px] z-50 overflow-hidden rounded-xl"
+        style={{ height: textAreaHeight - 2 }}
+      >
+        <AudioVisualizer
+          stream={audioStream}
+          isRecording={isRecording}
+          onClick={onStopRecording}
+        />
+      </div>
+    );
+  }
+
+  if (isTranscribing) {
+    return (
+      <div
+        className="absolute inset-[1px] z-50 overflow-hidden rounded-xl"
+        style={{ height: textAreaHeight - 2 }}
+      >
+        <TranscribingOverlay />
+      </div>
+    );
+  }
+
+  return null;
+}

src/llama_stack_ui/components/chat-playground/message-list.tsx

@@ -0,0 +1,45 @@
+import {
+  ChatMessage,
+  type ChatMessageProps,
+  type Message,
+} from "@/components/chat-playground/chat-message";
+import { TypingIndicator } from "@/components/chat-playground/typing-indicator";
+
+type AdditionalMessageOptions = Omit<ChatMessageProps, keyof Message>;
+
+interface MessageListProps {
+  messages: Message[];
+  showTimeStamps?: boolean;
+  isTyping?: boolean;
+  messageOptions?:
+    | AdditionalMessageOptions
+    | ((message: Message) => AdditionalMessageOptions);
+}
+
+export function MessageList({
+  messages,
+  showTimeStamps = true,
+  isTyping = false,
+  messageOptions,
+}: MessageListProps) {
+  return (
+    <div className="space-y-4 overflow-visible">
+      {messages.map((message, index) => {
+        const additionalOptions =
+          typeof messageOptions === "function"
+            ? messageOptions(message)
+            : messageOptions;
+
+        return (
+          <ChatMessage
+            key={index}
+            showTimeStamp={showTimeStamps}
+            {...message}
+            {...additionalOptions}
+          />
+        );
+      })}
+      {isTyping && <TypingIndicator />}
+    </div>
+  );
+}

src/llama_stack_ui/components/chat-playground/prompt-suggestions.tsx

@@ -0,0 +1,28 @@
+interface PromptSuggestionsProps {
+  label: string;
+  append: (message: { role: "user"; content: string }) => void;
+  suggestions: string[];
+}
+
+export function PromptSuggestions({
+  label,
+  append,
+  suggestions,
+}: PromptSuggestionsProps) {
+  return (
+    <div className="space-y-6">
+      <h2 className="text-center text-2xl font-bold">{label}</h2>
+      <div className="flex gap-6 text-sm">
+        {suggestions.map(suggestion => (
+          <button
+            key={suggestion}
+            onClick={() => append({ role: "user", content: suggestion })}
+            className="h-max flex-1 rounded-xl border bg-background p-4 hover:bg-muted"
+          >
+            <p>{suggestion}</p>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

src/llama_stack_ui/components/chat-playground/typing-indicator.tsx

@@ -0,0 +1,15 @@
+import { Dot } from "lucide-react";
+
+export function TypingIndicator() {
+  return (
+    <div className="justify-left flex space-x-1">
+      <div className="rounded-lg bg-muted p-3">
+        <div className="flex -space-x-2.5">
+          <Dot className="h-5 w-5 animate-typing-dot-1" />
+          <Dot className="h-5 w-5 animate-typing-dot-2" />
+          <Dot className="h-5 w-5 animate-typing-dot-3" />
+        </div>
+      </div>
+    </div>
+  );
+}

src/llama_stack_ui/components/chat-playground/vector-db-creator.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useAuthClient } from "@/hooks/use-auth-client";
+import type { Model } from "llama-stack-client/resources/models";
+
+interface VectorDBCreatorProps {
+  models: Model[];
+  onVectorDBCreated?: (vectorDbId: string) => void;
+  onCancel?: () => void;
+}
+
+interface VectorDBProvider {
+  api: string;
+  provider_id: string;
+  provider_type: string;
+}
+
+export function VectorDBCreator({
+  models,
+  onVectorDBCreated,
+  onCancel,
+}: VectorDBCreatorProps) {
+  const [vectorDbName, setVectorDbName] = useState("");
+  const [selectedEmbeddingModel, setSelectedEmbeddingModel] = useState("");
+  const [selectedProvider, setSelectedProvider] = useState("faiss");
+  const [availableProviders, setAvailableProviders] = useState<
+    VectorDBProvider[]
+  >([]);
+  const [isCreating, setIsCreating] = useState(false);
+  const [isLoadingProviders, setIsLoadingProviders] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const client = useAuthClient();
+
+  const embeddingModels = models.filter(
+    model => model.model_type === "embedding"
+  );
+
+  useEffect(() => {
+    const fetchProviders = async () => {
+      setIsLoadingProviders(true);
+      try {
+        const providersResponse = await client.providers.list();
+
+        const vectorIoProviders = providersResponse.filter(
+          (provider: VectorDBProvider) => provider.api === "vector_io"
+        );
+
+        setAvailableProviders(vectorIoProviders);
+
+        if (vectorIoProviders.length > 0) {
+          const faissProvider = vectorIoProviders.find(
+            (p: VectorDBProvider) => p.provider_id === "faiss"
+          );
+          setSelectedProvider(
+            faissProvider?.provider_id || vectorIoProviders[0].provider_id
+          );
+        }
+      } catch (err) {
+        console.error("Error fetching providers:", err);
+        setAvailableProviders([
+          {
+            api: "vector_io",
+            provider_id: "faiss",
+            provider_type: "inline::faiss",
+          },
+        ]);
+      } finally {
+        setIsLoadingProviders(false);
+      }
+    };
+
+    fetchProviders();
+  }, [client]);
+
+  const handleCreate = async () => {
+    if (!vectorDbName.trim() || !selectedEmbeddingModel) {
+      setError("Please provide a name and select an embedding model");
+      return;
+    }
+
+    setIsCreating(true);
+    setError(null);
+
+    try {
+      const embeddingModel = embeddingModels.find(
+        m => m.identifier === selectedEmbeddingModel
+      );
+
+      if (!embeddingModel) {
+        throw new Error("Selected embedding model not found");
+      }
+
+      const embeddingDimension = embeddingModel.metadata
+        ?.embedding_dimension as number;
+
+      if (!embeddingDimension) {
+        throw new Error("Embedding dimension not available for selected model");
+      }
+
+      const vectorDbId = vectorDbName.trim() || `vector_db_${Date.now()}`;
+
+      const response = await client.vectorDBs.register({
+        vector_db_id: vectorDbId,
+        embedding_model: selectedEmbeddingModel,
+        embedding_dimension: embeddingDimension,
+        provider_id: selectedProvider,
+      });
+
+      onVectorDBCreated?.(response.identifier || vectorDbId);
+    } catch (err) {
+      console.error("Error creating vector DB:", err);
+      setError(
+        err instanceof Error ? err.message : "Failed to create vector DB"
+      );
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  return (
+    <Card className="p-6 space-y-4">
+      <h3 className="text-lg font-semibold">Create Vector Database</h3>
+
+      <div className="space-y-4">
+        <div>
+          <label className="text-sm font-medium block mb-2">
+            Vector DB Name
+          </label>
+          <Input
+            value={vectorDbName}
+            onChange={e => setVectorDbName(e.target.value)}
+            placeholder="My Vector Database"
+          />
+        </div>
+
+        <div>
+          <label className="text-sm font-medium block mb-2">
+            Embedding Model
+          </label>
+          <Select
+            value={selectedEmbeddingModel}
+            onValueChange={setSelectedEmbeddingModel}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Select Embedding Model" />
+            </SelectTrigger>
+            <SelectContent>
+              {embeddingModels.map(model => (
+                <SelectItem key={model.identifier} value={model.identifier}>
+                  {model.identifier}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {selectedEmbeddingModel && (
+            <p className="text-xs text-muted-foreground mt-1">
+              Dimension:{" "}
+              {embeddingModels.find(
+                m => m.identifier === selectedEmbeddingModel
+              )?.metadata?.embedding_dimension || "Unknown"}
+            </p>
+          )}
+        </div>
+
+        <div>
+          <label className="text-sm font-medium block mb-2">
+            Vector Database Provider
+          </label>
+          <Select
+            value={selectedProvider}
+            onValueChange={setSelectedProvider}
+            disabled={isLoadingProviders}
+          >
+            <SelectTrigger>
+              <SelectValue
+                placeholder={
+                  isLoadingProviders
+                    ? "Loading providers..."
+                    : "Select Provider"
+                }
+              />
+            </SelectTrigger>
+            <SelectContent>
+              {availableProviders.map(provider => (
+                <SelectItem
+                  key={provider.provider_id}
+                  value={provider.provider_id}
+                >
+                  {provider.provider_id}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {selectedProvider && (
+            <p className="text-xs text-muted-foreground mt-1">
+              Selected provider: {selectedProvider}
+            </p>
+          )}
+        </div>
+
+        {error && (
+          <div className="text-destructive text-sm bg-destructive/10 p-2 rounded">
+            {error}
+          </div>
+        )}
+
+        <div className="flex gap-2 pt-2">
+          <Button
+            onClick={handleCreate}
+            disabled={
+              isCreating || !vectorDbName.trim() || !selectedEmbeddingModel
+            }
+            className="flex-1"
+          >
+            {isCreating ? "Creating..." : "Create Vector DB"}
+          </Button>
+          {onCancel && (
+            <Button variant="outline" onClick={onCancel} className="flex-1">
+              Cancel
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <div className="text-xs text-muted-foreground bg-muted/50 p-3 rounded">
+        <strong>Note:</strong> This will create a new vector database that can
+        be used with RAG tools. After creation, you&apos;ll be able to upload
+        documents and use it for knowledge search in your agent conversations.
+      </div>
+    </Card>
+  );
+}

src/llama_stack_ui/components/layout/app-sidebar.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import {
+  MessageSquareText,
+  MessagesSquare,
+  MoveUpRight,
+  Database,
+  MessageCircle,
+  Settings2,
+  Compass,
+  FileText,
+} from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarHeader,
+} from "@/components/ui/sidebar";
+
+const createItems = [
+  {
+    title: "Chat Playground",
+    url: "/chat-playground",
+    icon: MessageCircle,
+  },
+];
+
+const manageItems = [
+  {
+    title: "Chat Completions",
+    url: "/logs/chat-completions",
+    icon: MessageSquareText,
+  },
+  {
+    title: "Responses",
+    url: "/logs/responses",
+    icon: MessagesSquare,
+  },
+  {
+    title: "Vector Stores",
+    url: "/logs/vector-stores",
+    icon: Database,
+  },
+  {
+    title: "Prompts",
+    url: "/prompts",
+    icon: FileText,
+  },
+  {
+    title: "Documentation",
+    url: "https://llama-stack.readthedocs.io/en/latest/references/api_reference/index.html",
+    icon: MoveUpRight,
+  },
+];
+
+const optimizeItems: { title: string; url: string; icon: React.ElementType }[] =
+  [
+    {
+      title: "Evaluations",
+      url: "",
+      icon: Compass,
+    },
+    {
+      title: "Fine-tuning",
+      url: "",
+      icon: Settings2,
+    },
+  ];
+
+interface SidebarItem {
+  title: string;
+  url: string;
+  icon: React.ElementType;
+}
+
+export function AppSidebar() {
+  const pathname = usePathname();
+
+  const renderSidebarItems = (items: SidebarItem[]) => {
+    return items.map(item => {
+      const isActive = pathname.startsWith(item.url);
+      return (
+        <SidebarMenuItem key={item.title}>
+          <SidebarMenuButton
+            asChild
+            className={cn(
+              "justify-start",
+              isActive &&
+                "bg-gray-200 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100"
+            )}
+          >
+            <Link href={item.url}>
+              <item.icon
+                className={cn(
+                  isActive && "text-gray-900 dark:text-gray-100",
+                  "mr-2 h-4 w-4"
+                )}
+              />
+              <span>{item.title}</span>
+            </Link>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      );
+    });
+  };
+
+  return (
+    <Sidebar>
+      <SidebarHeader>
+        <Link href="/" className="flex items-center gap-2 p-2">
+          <Image
+            src="/logo.webp"
+            alt="Llama Stack"
+            width={32}
+            height={32}
+            className="h-8 w-8"
+          />
+          <span className="font-semibold text-lg">Llama Stack</span>
+        </Link>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Create</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>{renderSidebarItems(createItems)}</SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        <SidebarGroup>
+          <SidebarGroupLabel>Manage</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>{renderSidebarItems(manageItems)}</SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        <SidebarGroup>
+          <SidebarGroupLabel>Optimize</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {optimizeItems.map(item => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton
+                    disabled
+                    className="justify-start opacity-60 cursor-not-allowed"
+                  >
+                    <item.icon className="mr-2 h-4 w-4" />
+                    <span>{item.title}</span>
+                    <span className="ml-2 text-xs text-gray-500">
+                      (Coming Soon)
+                    </span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}

src/llama_stack_ui/components/layout/detail-layout.tsx

@@ -0,0 +1,145 @@
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function DetailLoadingView() {
+  return (
+    <>
+      <Skeleton className="h-8 w-3/4 mb-6" /> {/* Title Skeleton */}
+      <div className="flex flex-col md:flex-row gap-6">
+        <div className="flex-grow md:w-2/3 space-y-6">
+          {[...Array(2)].map((_, i) => (
+            <Card key={`main-skeleton-card-${i}`}>
+              <CardHeader>
+                <CardTitle>
+                  <Skeleton className="h-6 w-1/2" />
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-2">
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-3/4" />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+        <div className="md:w-1/3">
+          <div className="p-4 border rounded-lg shadow-sm bg-white space-y-3">
+            <Skeleton className="h-6 w-1/3 mb-3" />{" "}
+            {/* Properties Title Skeleton */}
+            {[...Array(5)].map((_, i) => (
+              <div key={`prop-skeleton-${i}`} className="space-y-1">
+                <Skeleton className="h-4 w-1/4" />
+                <Skeleton className="h-4 w-1/2" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export function DetailErrorView({
+  title,
+  id,
+  error,
+}: {
+  title: string;
+  id: string;
+  error: Error;
+}) {
+  return (
+    <>
+      <h1 className="text-2xl font-bold mb-6">{title}</h1>
+      <p>
+        Error loading details for ID {id}: {error.message}
+      </p>
+    </>
+  );
+}
+
+export function DetailNotFoundView({
+  title,
+  id,
+}: {
+  title: string;
+  id: string;
+}) {
+  return (
+    <>
+      <h1 className="text-2xl font-bold mb-6">{title}</h1>
+      <p>No details found for ID: {id}.</p>
+    </>
+  );
+}
+
+export interface PropertyItemProps {
+  label: string;
+  value: React.ReactNode;
+  className?: string;
+  hasBorder?: boolean;
+}
+
+export function PropertyItem({
+  label,
+  value,
+  className = "",
+  hasBorder = false,
+}: PropertyItemProps) {
+  return (
+    <li
+      className={`${hasBorder ? "pt-1 mt-1 border-t border-gray-200" : ""} ${className}`}
+    >
+      <strong>{label}:</strong>{" "}
+      {typeof value === "string" || typeof value === "number" ? (
+        <span className="text-gray-900 dark:text-gray-100 font-medium">
+          {value}
+        </span>
+      ) : (
+        value
+      )}
+    </li>
+  );
+}
+
+export interface PropertiesCardProps {
+  children: React.ReactNode;
+}
+
+export function PropertiesCard({ children }: PropertiesCardProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Properties</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
+          {children}
+        </ul>
+      </CardContent>
+    </Card>
+  );
+}
+
+export interface DetailLayoutProps {
+  title: string;
+  mainContent: React.ReactNode;
+  sidebar: React.ReactNode;
+}
+
+export function DetailLayout({
+  title,
+  mainContent,
+  sidebar,
+}: DetailLayoutProps) {
+  return (
+    <>
+      <h1 className="text-2xl font-bold mb-6">{title}</h1>
+      <div className="flex flex-col md:flex-row gap-6">
+        <div className="flex-grow md:w-2/3 space-y-6">{mainContent}</div>
+        <div className="md:w-1/3">{sidebar}</div>
+      </div>
+    </>
+  );
+}

src/llama_stack_ui/components/layout/logs-layout.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import React from "react";
+import { usePathname, useParams } from "next/navigation";
+import {
+  PageBreadcrumb,
+  BreadcrumbSegment,
+} from "@/components/layout/page-breadcrumb";
+import { truncateText } from "@/lib/truncate-text";
+
+interface LogsLayoutProps {
+  children: React.ReactNode;
+  sectionLabel: string;
+  basePath: string;
+}
+
+export default function LogsLayout({
+  children,
+  sectionLabel,
+  basePath,
+}: LogsLayoutProps) {
+  const pathname = usePathname();
+  const params = useParams();
+
+  let segments: BreadcrumbSegment[] = [];
+
+  if (pathname === basePath) {
+    segments = [{ label: sectionLabel }];
+  }
+
+  const idParam = params?.id;
+  if (idParam && typeof idParam === "string") {
+    segments = [
+      { label: sectionLabel, href: basePath },
+      { label: `Details (${truncateText(idParam, 20)})` },
+    ];
+  }
+
+  return (
+    <div className="container mx-auto p-4 h-[calc(100vh-64px)] flex flex-col">
+      {segments.length > 0 && (
+        <PageBreadcrumb segments={segments} className="mb-4" />
+      )}
+      <div className="flex-1 min-h-0 flex flex-col">{children}</div>
+    </div>
+  );
+}

src/llama_stack_ui/components/layout/page-breadcrumb.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import Link from "next/link";
+import React from "react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+
+export interface BreadcrumbSegment {
+  label: string;
+  href?: string;
+}
+
+interface PageBreadcrumbProps {
+  segments: BreadcrumbSegment[];
+  className?: string;
+}
+
+export function PageBreadcrumb({ segments, className }: PageBreadcrumbProps) {
+  if (!segments || segments.length === 0) {
+    return null;
+  }
+
+  return (
+    <Breadcrumb className={className}>
+      <BreadcrumbList>
+        {segments.map((segment, index) => (
+          <React.Fragment key={segment.label + index}>
+            <BreadcrumbItem>
+              {segment.href ? (
+                <BreadcrumbLink asChild>
+                  <Link href={segment.href}>{segment.label}</Link>
+                </BreadcrumbLink>
+              ) : (
+                <BreadcrumbPage>{segment.label}</BreadcrumbPage>
+              )}
+            </BreadcrumbItem>
+            {index < segments.length - 1 && <BreadcrumbSeparator />}
+          </React.Fragment>
+        ))}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}

src/llama_stack_ui/components/logs/logs-table-scroll.test.tsx

@@ -0,0 +1,138 @@
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { LogsTable, LogTableRow } from "./logs-table";
+import { PaginationStatus } from "@/lib/types";
+
+// Mock next/navigation
+jest.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+  }),
+}));
+
+// Mock the useInfiniteScroll hook
+jest.mock("@/hooks/use-infinite-scroll", () => ({
+  useInfiniteScroll: jest.fn((onLoadMore, options) => {
+    const ref = React.useRef(null);
+
+    React.useEffect(() => {
+      // Simulate the observer behavior
+      if (options?.enabled && onLoadMore) {
+        // Trigger load after a delay to simulate intersection
+        const timeout = setTimeout(() => {
+          onLoadMore();
+        }, 100);
+
+        return () => clearTimeout(timeout);
+      }
+    }, [options?.enabled, onLoadMore]);
+
+    return ref;
+  }),
+}));
+
+// IntersectionObserver mock is already in jest.setup.ts
+
+describe("LogsTable Viewport Loading", () => {
+  const mockData: LogTableRow[] = Array.from({ length: 10 }, (_, i) => ({
+    id: `row_${i}`,
+    input: `Input ${i}`,
+    output: `Output ${i}`,
+    model: "test-model",
+    createdTime: new Date().toISOString(),
+    detailPath: `/logs/test/${i}`,
+  }));
+
+  const defaultProps = {
+    data: mockData,
+    status: "idle" as PaginationStatus,
+    hasMore: true,
+    error: null,
+    caption: "Test table",
+    emptyMessage: "No data",
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("should trigger loadMore when sentinel is visible", async () => {
+    const mockLoadMore = jest.fn();
+
+    render(<LogsTable {...defaultProps} onLoadMore={mockLoadMore} />);
+
+    // Wait for the intersection observer to trigger
+    await waitFor(
+      () => {
+        expect(mockLoadMore).toHaveBeenCalled();
+      },
+      { timeout: 300 }
+    );
+
+    expect(mockLoadMore).toHaveBeenCalledTimes(1);
+  });
+
+  test("should not trigger loadMore when already loading", async () => {
+    const mockLoadMore = jest.fn();
+
+    render(
+      <LogsTable
+        {...defaultProps}
+        status="loading-more"
+        onLoadMore={mockLoadMore}
+      />
+    );
+
+    // Wait for possible triggers
+    await new Promise(resolve => setTimeout(resolve, 300));
+
+    expect(mockLoadMore).not.toHaveBeenCalled();
+  });
+
+  test("should not trigger loadMore when status is loading", async () => {
+    const mockLoadMore = jest.fn();
+
+    render(
+      <LogsTable {...defaultProps} status="loading" onLoadMore={mockLoadMore} />
+    );
+
+    // Wait for possible triggers
+    await new Promise(resolve => setTimeout(resolve, 300));
+
+    expect(mockLoadMore).not.toHaveBeenCalled();
+  });
+
+  test("should not trigger loadMore when hasMore is false", async () => {
+    const mockLoadMore = jest.fn();
+
+    render(
+      <LogsTable {...defaultProps} hasMore={false} onLoadMore={mockLoadMore} />
+    );
+
+    // Wait for possible triggers
+    await new Promise(resolve => setTimeout(resolve, 300));
+
+    expect(mockLoadMore).not.toHaveBeenCalled();
+  });
+
+  test("sentinel element should not be rendered when loading", () => {
+    const { container } = render(
+      <LogsTable {...defaultProps} status="loading-more" />
+    );
+
+    // Check that no sentinel row with height: 1 exists
+    const sentinelRow = container.querySelector('tr[style*="height: 1"]');
+    expect(sentinelRow).not.toBeInTheDocument();
+  });
+
+  test("sentinel element should be rendered when not loading and hasMore", () => {
+    const { container } = render(
+      <LogsTable {...defaultProps} hasMore={true} status="idle" />
+    );
+
+    // Check that sentinel row exists
+    const sentinelRow = container.querySelector('tr[style*="height: 1"]');
+    expect(sentinelRow).toBeInTheDocument();
+  });
+});

src/llama_stack_ui/components/logs/logs-table.test.tsx

@@ -0,0 +1,371 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { LogsTable, LogTableRow } from "./logs-table";
+import { PaginationStatus } from "@/lib/types";
+
+// Mock next/navigation
+const mockPush = jest.fn();
+jest.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
+}));
+
+// Mock helper functions
+jest.mock("@/lib/truncate-text");
+
+// Import the mocked functions
+import { truncateText as originalTruncateText } from "@/lib/truncate-text";
+
+// Cast to jest.Mock for typings
+const truncateText = originalTruncateText as jest.Mock;
+
+describe("LogsTable", () => {
+  const defaultProps = {
+    data: [] as LogTableRow[],
+    status: "idle" as PaginationStatus,
+    error: null,
+    caption: "Test table caption",
+    emptyMessage: "No data found",
+  };
+
+  beforeEach(() => {
+    // Reset all mocks before each test
+    mockPush.mockClear();
+    truncateText.mockClear();
+
+    // Default pass-through implementation
+    truncateText.mockImplementation((text: string | undefined) => text);
+  });
+
+  test("renders without crashing with default props", () => {
+    render(<LogsTable {...defaultProps} />);
+    expect(screen.getByText("No data found")).toBeInTheDocument();
+  });
+
+  test("click on a row navigates to the correct URL", () => {
+    const mockData: LogTableRow[] = [
+      {
+        id: "row_123",
+        input: "Test input",
+        output: "Test output",
+        model: "test-model",
+        createdTime: "2024-01-01 12:00:00",
+        detailPath: "/test/path/row_123",
+      },
+    ];
+
+    render(<LogsTable {...defaultProps} data={mockData} />);
+
+    const row = screen.getByText("Test input").closest("tr");
+    if (row) {
+      fireEvent.click(row);
+      expect(mockPush).toHaveBeenCalledWith("/test/path/row_123");
+    } else {
+      throw new Error('Row with "Test input" not found for router mock test.');
+    }
+  });
+
+  describe("Loading State", () => {
+    test("renders skeleton UI when isLoading is true", () => {
+      const { container } = render(
+        <LogsTable {...defaultProps} status="loading" />
+      );
+
+      // Check for skeleton in the table caption
+      const tableCaption = container.querySelector("caption");
+      expect(tableCaption).toBeInTheDocument();
+      if (tableCaption) {
+        const captionSkeleton = tableCaption.querySelector(
+          '[data-slot="skeleton"]'
+        );
+        expect(captionSkeleton).toBeInTheDocument();
+      }
+
+      // Check for skeletons in the table body cells
+      const tableBody = container.querySelector("tbody");
+      expect(tableBody).toBeInTheDocument();
+      if (tableBody) {
+        const bodySkeletons = tableBody.querySelectorAll(
+          '[data-slot="skeleton"]'
+        );
+        expect(bodySkeletons.length).toBeGreaterThan(0);
+      }
+
+      // Check that table headers are still rendered
+      expect(screen.getByText("Input")).toBeInTheDocument();
+      expect(screen.getByText("Output")).toBeInTheDocument();
+      expect(screen.getByText("Model")).toBeInTheDocument();
+      expect(screen.getByText("Created")).toBeInTheDocument();
+    });
+
+    test("renders correct number of skeleton rows", () => {
+      const { container } = render(
+        <LogsTable {...defaultProps} status="loading" />
+      );
+
+      const skeletonRows = container.querySelectorAll("tbody tr");
+      expect(skeletonRows.length).toBe(3); // Should render 3 skeleton rows
+    });
+  });
+
+  describe("Error State", () => {
+    test("renders error message when error prop is provided", () => {
+      const errorMessage = "Network Error";
+      render(
+        <LogsTable
+          {...defaultProps}
+          status="error"
+          error={{ name: "Error", message: errorMessage } as Error}
+        />
+      );
+      expect(
+        screen.getByText("Unable to load chat completions")
+      ).toBeInTheDocument();
+      expect(screen.getByText(errorMessage)).toBeInTheDocument();
+    });
+
+    test("renders default error message when error.message is not available", () => {
+      render(
+        <LogsTable
+          {...defaultProps}
+          status="error"
+          error={{ name: "Error", message: "" } as Error}
+        />
+      );
+      expect(
+        screen.getByText("Unable to load chat completions")
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText("An unexpected error occurred while loading the data.")
+      ).toBeInTheDocument();
+    });
+
+    test("renders default error message when error prop is an object without message", () => {
+      render(
+        <LogsTable {...defaultProps} status="error" error={{} as Error} />
+      );
+      expect(
+        screen.getByText("Unable to load chat completions")
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText("An unexpected error occurred while loading the data.")
+      ).toBeInTheDocument();
+    });
+
+    test("does not render table when in error state", () => {
+      render(
+        <LogsTable
+          {...defaultProps}
+          status="error"
+          error={{ name: "Error", message: "Test error" } as Error}
+        />
+      );
+      const table = screen.queryByRole("table");
+      expect(table).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Empty State", () => {
+    test("renders custom empty message when data array is empty", () => {
+      render(
+        <LogsTable
+          {...defaultProps}
+          data={[]}
+          emptyMessage="Custom empty message"
+        />
+      );
+      expect(screen.getByText("Custom empty message")).toBeInTheDocument();
+
+      // Ensure that the table structure is NOT rendered in the empty state
+      const table = screen.queryByRole("table");
+      expect(table).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Data Rendering", () => {
+    test("renders table caption, headers, and data correctly", () => {
+      const mockData: LogTableRow[] = [
+        {
+          id: "row_1",
+          input: "First input",
+          output: "First output",
+          model: "model-1",
+          createdTime: "2024-01-01 12:00:00",
+          detailPath: "/path/1",
+        },
+        {
+          id: "row_2",
+          input: "Second input",
+          output: "Second output",
+          model: "model-2",
+          createdTime: "2024-01-02 13:00:00",
+          detailPath: "/path/2",
+        },
+      ];
+
+      render(
+        <LogsTable
+          {...defaultProps}
+          data={mockData}
+          caption="Custom table caption"
+        />
+      );
+
+      // Table caption
+      expect(screen.getByText("Custom table caption")).toBeInTheDocument();
+
+      // Table headers
+      expect(screen.getByText("Input")).toBeInTheDocument();
+      expect(screen.getByText("Output")).toBeInTheDocument();
+      expect(screen.getByText("Model")).toBeInTheDocument();
+      expect(screen.getByText("Created")).toBeInTheDocument();
+
+      // Data rows
+      expect(screen.getByText("First input")).toBeInTheDocument();
+      expect(screen.getByText("First output")).toBeInTheDocument();
+      expect(screen.getByText("model-1")).toBeInTheDocument();
+      expect(screen.getByText("2024-01-01 12:00:00")).toBeInTheDocument();
+
+      expect(screen.getByText("Second input")).toBeInTheDocument();
+      expect(screen.getByText("Second output")).toBeInTheDocument();
+      expect(screen.getByText("model-2")).toBeInTheDocument();
+      expect(screen.getByText("2024-01-02 13:00:00")).toBeInTheDocument();
+    });
+
+    test("applies correct CSS classes to table rows", () => {
+      const mockData: LogTableRow[] = [
+        {
+          id: "row_1",
+          input: "Test input",
+          output: "Test output",
+          model: "test-model",
+          createdTime: "2024-01-01 12:00:00",
+          detailPath: "/test/path",
+        },
+      ];
+
+      render(<LogsTable {...defaultProps} data={mockData} />);
+
+      const row = screen.getByText("Test input").closest("tr");
+      expect(row).toHaveClass("cursor-pointer");
+      expect(row).toHaveClass("hover:bg-muted/50");
+    });
+
+    test("applies correct alignment to Created column", () => {
+      const mockData: LogTableRow[] = [
+        {
+          id: "row_1",
+          input: "Test input",
+          output: "Test output",
+          model: "test-model",
+          createdTime: "2024-01-01 12:00:00",
+          detailPath: "/test/path",
+        },
+      ];
+
+      render(<LogsTable {...defaultProps} data={mockData} />);
+
+      const createdCell = screen.getByText("2024-01-01 12:00:00").closest("td");
+      expect(createdCell).toHaveClass("text-right");
+    });
+  });
+
+  describe("Text Truncation", () => {
+    test("truncates input and output text using truncateText function", () => {
+      // Mock truncateText to return truncated versions
+      truncateText.mockImplementation((text: string | undefined) => {
+        if (typeof text === "string" && text.length > 10) {
+          return text.slice(0, 10) + "...";
+        }
+        return text;
+      });
+
+      const longInput =
+        "This is a very long input text that should be truncated";
+      const longOutput =
+        "This is a very long output text that should be truncated";
+
+      const mockData: LogTableRow[] = [
+        {
+          id: "row_1",
+          input: longInput,
+          output: longOutput,
+          model: "test-model",
+          createdTime: "2024-01-01 12:00:00",
+          detailPath: "/test/path",
+        },
+      ];
+
+      render(<LogsTable {...defaultProps} data={mockData} />);
+
+      // Verify truncateText was called
+      expect(truncateText).toHaveBeenCalledWith(longInput);
+      expect(truncateText).toHaveBeenCalledWith(longOutput);
+
+      // Verify truncated text is displayed
+      const truncatedTexts = screen.getAllByText("This is a ...");
+      expect(truncatedTexts).toHaveLength(2); // one for input, one for output
+      truncatedTexts.forEach(textElement =>
+        expect(textElement).toBeInTheDocument()
+      );
+    });
+
+    test("does not truncate model names", () => {
+      const mockData: LogTableRow[] = [
+        {
+          id: "row_1",
+          input: "Test input",
+          output: "Test output",
+          model: "very-long-model-name-that-should-not-be-truncated",
+          createdTime: "2024-01-01 12:00:00",
+          detailPath: "/test/path",
+        },
+      ];
+
+      render(<LogsTable {...defaultProps} data={mockData} />);
+
+      // Model name should not be passed to truncateText
+      expect(truncateText).not.toHaveBeenCalledWith(
+        "very-long-model-name-that-should-not-be-truncated"
+      );
+
+      // Full model name should be displayed
+      expect(
+        screen.getByText("very-long-model-name-that-should-not-be-truncated")
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("Accessibility", () => {
+    test("table has proper role and structure", () => {
+      const mockData: LogTableRow[] = [
+        {
+          id: "row_1",
+          input: "Test input",
+          output: "Test output",
+          model: "test-model",
+          createdTime: "2024-01-01 12:00:00",
+          detailPath: "/test/path",
+        },
+      ];
+
+      render(<LogsTable {...defaultProps} data={mockData} />);
+
+      const tables = screen.getAllByRole("table");
+      expect(tables).toHaveLength(2); // Fixed header table + body table
+
+      const columnHeaders = screen.getAllByRole("columnheader");
+      expect(columnHeaders).toHaveLength(4);
+
+      const rows = screen.getAllByRole("row");
+      expect(rows).toHaveLength(3); // 1 header row + 1 data row + 1 "no more items" row
+
+      expect(screen.getByText("Input")).toBeInTheDocument();
+      expect(screen.getByText("Output")).toBeInTheDocument();
+      expect(screen.getByText("Model")).toBeInTheDocument();
+      expect(screen.getByText("Created")).toBeInTheDocument();
+    });
+  });
+});

src/llama_stack_ui/components/logs/logs-table.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useRef } from "react";
+import { truncateText } from "@/lib/truncate-text";
+import { PaginationStatus } from "@/lib/types";
+import { useInfiniteScroll } from "@/hooks/use-infinite-scroll";
+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 {
+  /** Array of log table row data to display */
+  data: LogTableRow[];
+  /** Current loading/error status */
+  status: PaginationStatus;
+  /** Whether more data is available to load */
+  hasMore?: boolean;
+  /** Error state, null if no error */
+  error: Error | null;
+  /** Table caption for accessibility */
+  caption: string;
+  /** Message to show when no data is available */
+  emptyMessage: string;
+  /** Callback function to load more data */
+  onLoadMore?: () => void;
+}
+
+export function LogsTable({
+  data,
+  status,
+  hasMore = false,
+  error,
+  caption,
+  emptyMessage,
+  onLoadMore,
+}: LogsTableProps) {
+  const router = useRouter();
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+
+  // Use Intersection Observer for infinite scroll
+  const sentinelRef = useInfiniteScroll(onLoadMore, {
+    enabled: hasMore && status === "idle",
+    rootMargin: "100px",
+    threshold: 0.1,
+  });
+
+  // Fixed header component
+  const FixedHeader = () => (
+    <div className="bg-background border-b border-border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-1/4">Input</TableHead>
+            <TableHead className="w-1/4">Output</TableHead>
+            <TableHead className="w-1/4">Model</TableHead>
+            <TableHead className="w-1/4 text-right">Created</TableHead>
+          </TableRow>
+        </TableHeader>
+      </Table>
+    </div>
+  );
+
+  if (status === "loading") {
+    return (
+      <div className="h-full flex flex-col">
+        <FixedHeader />
+        <div ref={tableContainerRef} className="overflow-auto flex-1 min-h-0">
+          <Table>
+            <TableCaption>
+              <Skeleton className="h-4 w-[250px] mx-auto" />
+            </TableCaption>
+            <TableBody>
+              {[...Array(3)].map((_, i) => (
+                <TableRow key={`skeleton-${i}`}>
+                  <TableCell className="w-1/4">
+                    <Skeleton className="h-4 w-full" />
+                  </TableCell>
+                  <TableCell className="w-1/4">
+                    <Skeleton className="h-4 w-full" />
+                  </TableCell>
+                  <TableCell className="w-1/4">
+                    <Skeleton className="h-4 w-3/4" />
+                  </TableCell>
+                  <TableCell className="w-1/4 text-right">
+                    <Skeleton className="h-4 w-1/2 ml-auto" />
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    );
+  }
+
+  if (status === "error") {
+    return (
+      <div className="flex flex-col items-center justify-center p-8 space-y-4">
+        <div className="text-destructive font-medium">
+          Unable to load chat completions
+        </div>
+        <div className="text-sm text-muted-foreground text-center max-w-md">
+          {error?.message ||
+            "An unexpected error occurred while loading the data."}
+        </div>
+        <button
+          onClick={() => window.location.reload()}
+          className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  if (data.length === 0) {
+    return <p>{emptyMessage}</p>;
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      <FixedHeader />
+      <div ref={tableContainerRef} className="overflow-auto flex-1 min-h-0">
+        <Table>
+          <TableCaption className="sr-only">{caption}</TableCaption>
+          <TableBody>
+            {data.map(row => (
+              <TableRow
+                key={row.id}
+                onClick={() => router.push(row.detailPath)}
+                className="cursor-pointer hover:bg-muted/50"
+              >
+                <TableCell className="w-1/4">
+                  {truncateText(row.input)}
+                </TableCell>
+                <TableCell className="w-1/4">
+                  {truncateText(row.output)}
+                </TableCell>
+                <TableCell className="w-1/4">{row.model}</TableCell>
+                <TableCell className="w-1/4 text-right">
+                  {row.createdTime}
+                </TableCell>
+              </TableRow>
+            ))}
+            {/* Sentinel element for infinite scroll */}
+            {hasMore && status === "idle" && (
+              <TableRow ref={sentinelRef} style={{ height: 1 }}>
+                <TableCell colSpan={4} style={{ padding: 0, border: 0 }} />
+              </TableRow>
+            )}
+            {status === "loading-more" && (
+              <TableRow>
+                <TableCell colSpan={4} className="text-center py-4">
+                  <div className="flex items-center justify-center space-x-2">
+                    <Skeleton className="h-4 w-4 rounded-full" />
+                    <span className="text-sm text-muted-foreground">
+                      Loading more...
+                    </span>
+                  </div>
+                </TableCell>
+              </TableRow>
+            )}
+            {!hasMore && data.length > 0 && (
+              <TableRow>
+                <TableCell colSpan={4} className="text-center py-4">
+                  <span className="text-sm text-muted-foreground">
+                    No more items to load
+                  </span>
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

src/llama_stack_ui/components/prompts/index.ts

@@ -0,0 +1,4 @@
+export { PromptManagement } from "./prompt-management";
+export { PromptList } from "./prompt-list";
+export { PromptEditor } from "./prompt-editor";
+export * from "./types";

src/llama_stack_ui/components/prompts/prompt-editor.test.tsx

@@ -0,0 +1,309 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { PromptEditor } from "./prompt-editor";
+import type { Prompt, PromptFormData } from "./types";
+
+describe("PromptEditor", () => {
+  const mockOnSave = jest.fn();
+  const mockOnCancel = jest.fn();
+  const mockOnDelete = jest.fn();
+
+  const defaultProps = {
+    onSave: mockOnSave,
+    onCancel: mockOnCancel,
+    onDelete: mockOnDelete,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Create Mode", () => {
+    test("renders create form correctly", () => {
+      render(<PromptEditor {...defaultProps} />);
+
+      expect(screen.getByLabelText("Prompt Content *")).toBeInTheDocument();
+      expect(screen.getByText("Variables")).toBeInTheDocument();
+      expect(screen.getByText("Preview")).toBeInTheDocument();
+      expect(screen.getByText("Create Prompt")).toBeInTheDocument();
+      expect(screen.getByText("Cancel")).toBeInTheDocument();
+    });
+
+    test("shows preview placeholder when no content", () => {
+      render(<PromptEditor {...defaultProps} />);
+
+      expect(
+        screen.getByText("Enter content to preview the compiled prompt")
+      ).toBeInTheDocument();
+    });
+
+    test("submits form with correct data", () => {
+      render(<PromptEditor {...defaultProps} />);
+
+      const promptInput = screen.getByLabelText("Prompt Content *");
+      fireEvent.change(promptInput, {
+        target: { value: "Hello {{name}}, welcome!" },
+      });
+
+      fireEvent.click(screen.getByText("Create Prompt"));
+
+      expect(mockOnSave).toHaveBeenCalledWith({
+        prompt: "Hello {{name}}, welcome!",
+        variables: [],
+      });
+    });
+
+    test("prevents submission with empty prompt", () => {
+      render(<PromptEditor {...defaultProps} />);
+
+      fireEvent.click(screen.getByText("Create Prompt"));
+
+      expect(mockOnSave).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Edit Mode", () => {
+    const mockPrompt: Prompt = {
+      prompt_id: "prompt_123",
+      prompt: "Hello {{name}}, how is {{weather}}?",
+      version: 1,
+      variables: ["name", "weather"],
+      is_default: true,
+    };
+
+    test("renders edit form with existing data", () => {
+      render(<PromptEditor {...defaultProps} prompt={mockPrompt} />);
+
+      expect(
+        screen.getByDisplayValue("Hello {{name}}, how is {{weather}}?")
+      ).toBeInTheDocument();
+      expect(screen.getAllByText("name")).toHaveLength(2); // One in variables, one in preview
+      expect(screen.getAllByText("weather")).toHaveLength(2); // One in variables, one in preview
+      expect(screen.getByText("Update Prompt")).toBeInTheDocument();
+      expect(screen.getByText("Delete Prompt")).toBeInTheDocument();
+    });
+
+    test("submits updated data correctly", () => {
+      render(<PromptEditor {...defaultProps} prompt={mockPrompt} />);
+
+      const promptInput = screen.getByLabelText("Prompt Content *");
+      fireEvent.change(promptInput, {
+        target: { value: "Updated: Hello {{name}}!" },
+      });
+
+      fireEvent.click(screen.getByText("Update Prompt"));
+
+      expect(mockOnSave).toHaveBeenCalledWith({
+        prompt: "Updated: Hello {{name}}!",
+        variables: ["name", "weather"],
+      });
+    });
+  });
+
+  describe("Variables Management", () => {
+    test("adds new variable", () => {
+      render(<PromptEditor {...defaultProps} />);
+
+      const variableInput = screen.getByPlaceholderText(
+        "Add variable name (e.g. user_name, topic)"
+      );
+      fireEvent.change(variableInput, { target: { value: "testVar" } });
+      fireEvent.click(screen.getByText("Add"));
+
+      expect(screen.getByText("testVar")).toBeInTheDocument();
+    });
+
+    test("prevents adding duplicate variables", () => {
+      render(<PromptEditor {...defaultProps} />);
+
+      const variableInput = screen.getByPlaceholderText(
+        "Add variable name (e.g. user_name, topic)"
+      );
+
+      // Add first variable
+      fireEvent.change(variableInput, { target: { value: "test" } });
+      fireEvent.click(screen.getByText("Add"));
+
+      // Try to add same variable again
+      fireEvent.change(variableInput, { target: { value: "test" } });
+
+      // Button should be disabled
+      expect(screen.getByText("Add")).toBeDisabled();
+    });
+
+    test("removes variable", () => {
+      const mockPrompt: Prompt = {
+        prompt_id: "prompt_123",
+        prompt: "Hello {{name}}",
+        version: 1,
+        variables: ["name", "location"],
+        is_default: true,
+      };
+
+      render(<PromptEditor {...defaultProps} prompt={mockPrompt} />);
+
+      // Check that both variables are present initially
+      expect(screen.getAllByText("name").length).toBeGreaterThan(0);
+      expect(screen.getAllByText("location").length).toBeGreaterThan(0);
+
+      // Remove the location variable by clicking the X button with the specific title
+      const removeLocationButton = screen.getByTitle(
+        "Remove location variable"
+      );
+      fireEvent.click(removeLocationButton);
+
+      // Name should still be there, location should be gone from the variables section
+      expect(screen.getAllByText("name").length).toBeGreaterThan(0);
+      expect(
+        screen.queryByTitle("Remove location variable")
+      ).not.toBeInTheDocument();
+    });
+
+    test("adds variable on Enter key", () => {
+      render(<PromptEditor {...defaultProps} />);
+
+      const variableInput = screen.getByPlaceholderText(
+        "Add variable name (e.g. user_name, topic)"
+      );
+      fireEvent.change(variableInput, { target: { value: "enterVar" } });
+
+      // Simulate Enter key press
+      fireEvent.keyPress(variableInput, {
+        key: "Enter",
+        code: "Enter",
+        charCode: 13,
+        preventDefault: jest.fn(),
+      });
+
+      // Check if the variable was added by looking for the badge
+      expect(screen.getAllByText("enterVar").length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("Preview Functionality", () => {
+    test("shows live preview with variables", () => {
+      render(<PromptEditor {...defaultProps} />);
+
+      // Add prompt content
+      const promptInput = screen.getByLabelText("Prompt Content *");
+      fireEvent.change(promptInput, {
+        target: { value: "Hello {{name}}, welcome to {{place}}!" },
+      });
+
+      // Add variables
+      const variableInput = screen.getByPlaceholderText(
+        "Add variable name (e.g. user_name, topic)"
+      );
+      fireEvent.change(variableInput, { target: { value: "name" } });
+      fireEvent.click(screen.getByText("Add"));
+
+      fireEvent.change(variableInput, { target: { value: "place" } });
+      fireEvent.click(screen.getByText("Add"));
+
+      // Check that preview area shows the content
+      expect(screen.getByText("Compiled Prompt")).toBeInTheDocument();
+    });
+
+    test("shows variable value inputs in preview", () => {
+      const mockPrompt: Prompt = {
+        prompt_id: "prompt_123",
+        prompt: "Hello {{name}}",
+        version: 1,
+        variables: ["name"],
+        is_default: true,
+      };
+
+      render(<PromptEditor {...defaultProps} prompt={mockPrompt} />);
+
+      expect(screen.getByText("Variable Values")).toBeInTheDocument();
+      expect(
+        screen.getByPlaceholderText("Enter value for name")
+      ).toBeInTheDocument();
+    });
+
+    test("shows color legend for variable states", () => {
+      render(<PromptEditor {...defaultProps} />);
+
+      // Add content to show preview
+      const promptInput = screen.getByLabelText("Prompt Content *");
+      fireEvent.change(promptInput, {
+        target: { value: "Hello {{name}}" },
+      });
+
+      expect(screen.getByText("Used")).toBeInTheDocument();
+      expect(screen.getByText("Unused")).toBeInTheDocument();
+      expect(screen.getByText("Undefined")).toBeInTheDocument();
+    });
+  });
+
+  describe("Error Handling", () => {
+    test("displays error message", () => {
+      const errorMessage = "Prompt contains undeclared variables";
+      render(<PromptEditor {...defaultProps} error={errorMessage} />);
+
+      expect(screen.getByText(errorMessage)).toBeInTheDocument();
+    });
+  });
+
+  describe("Delete Functionality", () => {
+    const mockPrompt: Prompt = {
+      prompt_id: "prompt_123",
+      prompt: "Hello {{name}}",
+      version: 1,
+      variables: ["name"],
+      is_default: true,
+    };
+
+    test("shows delete button in edit mode", () => {
+      render(<PromptEditor {...defaultProps} prompt={mockPrompt} />);
+
+      expect(screen.getByText("Delete Prompt")).toBeInTheDocument();
+    });
+
+    test("hides delete button in create mode", () => {
+      render(<PromptEditor {...defaultProps} />);
+
+      expect(screen.queryByText("Delete Prompt")).not.toBeInTheDocument();
+    });
+
+    test("calls onDelete with confirmation", () => {
+      const originalConfirm = window.confirm;
+      window.confirm = jest.fn(() => true);
+
+      render(<PromptEditor {...defaultProps} prompt={mockPrompt} />);
+
+      fireEvent.click(screen.getByText("Delete Prompt"));
+
+      expect(window.confirm).toHaveBeenCalledWith(
+        "Are you sure you want to delete this prompt? This action cannot be undone."
+      );
+      expect(mockOnDelete).toHaveBeenCalledWith("prompt_123");
+
+      window.confirm = originalConfirm;
+    });
+
+    test("does not delete when confirmation is cancelled", () => {
+      const originalConfirm = window.confirm;
+      window.confirm = jest.fn(() => false);
+
+      render(<PromptEditor {...defaultProps} prompt={mockPrompt} />);
+
+      fireEvent.click(screen.getByText("Delete Prompt"));
+
+      expect(mockOnDelete).not.toHaveBeenCalled();
+
+      window.confirm = originalConfirm;
+    });
+  });
+
+  describe("Cancel Functionality", () => {
+    test("calls onCancel when cancel button is clicked", () => {
+      render(<PromptEditor {...defaultProps} />);
+
+      fireEvent.click(screen.getByText("Cancel"));
+
+      expect(mockOnCancel).toHaveBeenCalled();
+    });
+  });
+});

src/llama_stack_ui/components/prompts/prompt-editor.tsx

@@ -0,0 +1,346 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { X, Plus, Save, Trash2 } from "lucide-react";
+import { Prompt, PromptFormData } from "./types";
+
+interface PromptEditorProps {
+  prompt?: Prompt;
+  onSave: (prompt: PromptFormData) => void;
+  onCancel: () => void;
+  onDelete?: (promptId: string) => void;
+  error?: string | null;
+}
+
+export function PromptEditor({
+  prompt,
+  onSave,
+  onCancel,
+  onDelete,
+  error,
+}: PromptEditorProps) {
+  const [formData, setFormData] = useState<PromptFormData>({
+    prompt: "",
+    variables: [],
+  });
+
+  const [newVariable, setNewVariable] = useState("");
+  const [variableValues, setVariableValues] = useState<Record<string, string>>(
+    {}
+  );
+
+  useEffect(() => {
+    if (prompt) {
+      setFormData({
+        prompt: prompt.prompt || "",
+        variables: prompt.variables || [],
+      });
+    }
+  }, [prompt]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!formData.prompt.trim()) {
+      return;
+    }
+    onSave(formData);
+  };
+
+  const addVariable = () => {
+    if (
+      newVariable.trim() &&
+      !formData.variables.includes(newVariable.trim())
+    ) {
+      setFormData(prev => ({
+        ...prev,
+        variables: [...prev.variables, newVariable.trim()],
+      }));
+      setNewVariable("");
+    }
+  };
+
+  const removeVariable = (variableToRemove: string) => {
+    setFormData(prev => ({
+      ...prev,
+      variables: prev.variables.filter(
+        variable => variable !== variableToRemove
+      ),
+    }));
+  };
+
+  const renderPreview = () => {
+    const text = formData.prompt;
+    if (!text) return text;
+
+    // Split text by variable patterns and process each part
+    const parts = text.split(/(\{\{\s*\w+\s*\}\})/g);
+
+    return parts.map((part, index) => {
+      const variableMatch = part.match(/\{\{\s*(\w+)\s*\}\}/);
+      if (variableMatch) {
+        const variableName = variableMatch[1];
+        const isDefined = formData.variables.includes(variableName);
+        const value = variableValues[variableName];
+
+        if (!isDefined) {
+          // Variable not in variables list - likely a typo/bug (RED)
+          return (
+            <span
+              key={index}
+              className="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 px-1 rounded font-medium"
+            >
+              {part}
+            </span>
+          );
+        } else if (value && value.trim()) {
+          // Variable defined and has value - show the value (GREEN)
+          return (
+            <span
+              key={index}
+              className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-1 rounded font-medium"
+            >
+              {value}
+            </span>
+          );
+        } else {
+          // Variable defined but empty (YELLOW)
+          return (
+            <span
+              key={index}
+              className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 px-1 rounded font-medium"
+            >
+              {part}
+            </span>
+          );
+        }
+      }
+      return part;
+    });
+  };
+
+  const updateVariableValue = (variable: string, value: string) => {
+    setVariableValues(prev => ({
+      ...prev,
+      [variable]: value,
+    }));
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      {error && (
+        <div className="p-4 bg-destructive/10 border border-destructive/20 rounded-md">
+          <p className="text-destructive text-sm">{error}</p>
+        </div>
+      )}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Form Section */}
+        <div className="space-y-4">
+          <div>
+            <Label htmlFor="prompt">Prompt Content *</Label>
+            <Textarea
+              id="prompt"
+              value={formData.prompt}
+              onChange={e =>
+                setFormData(prev => ({ ...prev, prompt: e.target.value }))
+              }
+              placeholder="Enter your prompt content here. Use {{variable_name}} for dynamic variables."
+              className="min-h-32 font-mono mt-2"
+              required
+            />
+            <p className="text-xs text-muted-foreground mt-2">
+              Use double curly braces around variable names, e.g.,{" "}
+              {`{{user_name}}`} or {`{{topic}}`}
+            </p>
+          </div>
+
+          <div className="space-y-3">
+            <Label className="text-sm font-medium">Variables</Label>
+
+            <div className="flex gap-2 mt-2">
+              <Input
+                value={newVariable}
+                onChange={e => setNewVariable(e.target.value)}
+                placeholder="Add variable name (e.g. user_name, topic)"
+                onKeyPress={e =>
+                  e.key === "Enter" && (e.preventDefault(), addVariable())
+                }
+                className="flex-1"
+              />
+              <Button
+                type="button"
+                onClick={addVariable}
+                size="sm"
+                disabled={
+                  !newVariable.trim() ||
+                  formData.variables.includes(newVariable.trim())
+                }
+              >
+                <Plus className="h-4 w-4" />
+                Add
+              </Button>
+            </div>
+
+            {formData.variables.length > 0 && (
+              <div className="border rounded-lg p-3 bg-muted/20">
+                <div className="flex flex-wrap gap-2">
+                  {formData.variables.map(variable => (
+                    <Badge
+                      key={variable}
+                      variant="secondary"
+                      className="text-sm px-2 py-1"
+                    >
+                      {variable}
+                      <button
+                        type="button"
+                        onClick={() => removeVariable(variable)}
+                        className="ml-2 hover:text-destructive transition-colors"
+                        title={`Remove ${variable} variable`}
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <p className="text-xs text-muted-foreground">
+              Variables that can be used in the prompt template. Each variable
+              should match a {`{{variable}}`} placeholder in the content above.
+            </p>
+          </div>
+        </div>
+
+        {/* Preview Section */}
+        <div className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-lg">Preview</CardTitle>
+              <CardDescription>
+                Live preview of compiled prompt and variable substitution.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {formData.prompt ? (
+                <>
+                  {/* Variable Values */}
+                  {formData.variables.length > 0 && (
+                    <div className="space-y-3">
+                      <Label className="text-sm font-medium">
+                        Variable Values
+                      </Label>
+                      <div className="space-y-2">
+                        {formData.variables.map(variable => (
+                          <div
+                            key={variable}
+                            className="grid grid-cols-2 gap-3 items-center"
+                          >
+                            <div className="text-sm font-mono text-muted-foreground">
+                              {variable}
+                            </div>
+                            <Input
+                              id={`var-${variable}`}
+                              value={variableValues[variable] || ""}
+                              onChange={e =>
+                                updateVariableValue(variable, e.target.value)
+                              }
+                              placeholder={`Enter value for ${variable}`}
+                              className="text-sm"
+                            />
+                          </div>
+                        ))}
+                      </div>
+                      <Separator />
+                    </div>
+                  )}
+
+                  {/* Live Preview */}
+                  <div>
+                    <Label className="text-sm font-medium mb-2 block">
+                      Compiled Prompt
+                    </Label>
+                    <div className="bg-muted/50 p-4 rounded-lg border">
+                      <div className="text-sm leading-relaxed whitespace-pre-wrap">
+                        {renderPreview()}
+                      </div>
+                    </div>
+                    <div className="flex flex-wrap gap-4 mt-2 text-xs">
+                      <div className="flex items-center gap-1">
+                        <div className="w-3 h-3 bg-green-500 dark:bg-green-400 border rounded"></div>
+                        <span className="text-muted-foreground">Used</span>
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <div className="w-3 h-3 bg-yellow-500 dark:bg-yellow-400 border rounded"></div>
+                        <span className="text-muted-foreground">Unused</span>
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <div className="w-3 h-3 bg-red-500 dark:bg-red-400 border rounded"></div>
+                        <span className="text-muted-foreground">Undefined</span>
+                      </div>
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <div className="text-center py-8">
+                  <div className="text-muted-foreground text-sm">
+                    Enter content to preview the compiled prompt
+                  </div>
+                  <div className="text-xs text-muted-foreground mt-2">
+                    Use {`{{variable_name}}`} to add dynamic variables
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      <Separator />
+
+      <div className="flex justify-between">
+        <div>
+          {prompt && onDelete && (
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={() => {
+                if (
+                  confirm(
+                    `Are you sure you want to delete this prompt? This action cannot be undone.`
+                  )
+                ) {
+                  onDelete(prompt.prompt_id);
+                }
+              }}
+            >
+              <Trash2 className="h-4 w-4 mr-2" />
+              Delete Prompt
+            </Button>
+          )}
+        </div>
+        <div className="flex gap-2">
+          <Button type="button" variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button type="submit">
+            <Save className="h-4 w-4 mr-2" />
+            {prompt ? "Update" : "Create"} Prompt
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}

src/llama_stack_ui/components/prompts/prompt-list.test.tsx

@@ -0,0 +1,259 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { PromptList } from "./prompt-list";
+import type { Prompt } from "./types";
+
+describe("PromptList", () => {
+  const mockOnEdit = jest.fn();
+  const mockOnDelete = jest.fn();
+
+  const defaultProps = {
+    prompts: [],
+    onEdit: mockOnEdit,
+    onDelete: mockOnDelete,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Empty State", () => {
+    test("renders empty message when no prompts", () => {
+      render(<PromptList {...defaultProps} />);
+
+      expect(screen.getByText("No prompts yet")).toBeInTheDocument();
+    });
+
+    test("shows filtered empty message when search has no results", () => {
+      const prompts: Prompt[] = [
+        {
+          prompt_id: "prompt_123",
+          prompt: "Hello world",
+          version: 1,
+          variables: [],
+          is_default: false,
+        },
+      ];
+
+      render(<PromptList {...defaultProps} prompts={prompts} />);
+
+      // Search for something that doesn't exist
+      const searchInput = screen.getByPlaceholderText("Search prompts...");
+      fireEvent.change(searchInput, { target: { value: "nonexistent" } });
+
+      expect(
+        screen.getByText("No prompts match your filters")
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("Prompts Display", () => {
+    const mockPrompts: Prompt[] = [
+      {
+        prompt_id: "prompt_123",
+        prompt: "Hello {{name}}, how are you?",
+        version: 1,
+        variables: ["name"],
+        is_default: true,
+      },
+      {
+        prompt_id: "prompt_456",
+        prompt: "Summarize this {{text}} in {{length}} words",
+        version: 2,
+        variables: ["text", "length"],
+        is_default: false,
+      },
+      {
+        prompt_id: "prompt_789",
+        prompt: "Simple prompt with no variables",
+        version: 1,
+        variables: [],
+        is_default: false,
+      },
+    ];
+
+    test("renders prompts table with correct headers", () => {
+      render(<PromptList {...defaultProps} prompts={mockPrompts} />);
+
+      expect(screen.getByText("ID")).toBeInTheDocument();
+      expect(screen.getByText("Content")).toBeInTheDocument();
+      expect(screen.getByText("Variables")).toBeInTheDocument();
+      expect(screen.getByText("Version")).toBeInTheDocument();
+      expect(screen.getByText("Actions")).toBeInTheDocument();
+    });
+
+    test("renders prompt data correctly", () => {
+      render(<PromptList {...defaultProps} prompts={mockPrompts} />);
+
+      // Check prompt IDs
+      expect(screen.getByText("prompt_123")).toBeInTheDocument();
+      expect(screen.getByText("prompt_456")).toBeInTheDocument();
+      expect(screen.getByText("prompt_789")).toBeInTheDocument();
+
+      // Check content
+      expect(
+        screen.getByText("Hello {{name}}, how are you?")
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText("Summarize this {{text}} in {{length}} words")
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText("Simple prompt with no variables")
+      ).toBeInTheDocument();
+
+      // Check versions
+      expect(screen.getAllByText("1")).toHaveLength(2); // Two prompts with version 1
+      expect(screen.getByText("2")).toBeInTheDocument();
+
+      // Check default badge
+      expect(screen.getByText("Default")).toBeInTheDocument();
+    });
+
+    test("renders variables correctly", () => {
+      render(<PromptList {...defaultProps} prompts={mockPrompts} />);
+
+      // Check variables display
+      expect(screen.getByText("name")).toBeInTheDocument();
+      expect(screen.getByText("text")).toBeInTheDocument();
+      expect(screen.getByText("length")).toBeInTheDocument();
+      expect(screen.getByText("None")).toBeInTheDocument(); // For prompt with no variables
+    });
+
+    test("prompt ID links are clickable and call onEdit", () => {
+      render(<PromptList {...defaultProps} prompts={mockPrompts} />);
+
+      // Click on the first prompt ID link
+      const promptLink = screen.getByRole("button", { name: "prompt_123" });
+      fireEvent.click(promptLink);
+
+      expect(mockOnEdit).toHaveBeenCalledWith(mockPrompts[0]);
+    });
+
+    test("edit buttons call onEdit", () => {
+      const { container } = render(
+        <PromptList {...defaultProps} prompts={mockPrompts} />
+      );
+
+      // Find the action buttons in the table - they should be in the last column
+      const actionCells = container.querySelectorAll("td:last-child");
+      const firstActionCell = actionCells[0];
+      const editButton = firstActionCell?.querySelector("button");
+
+      expect(editButton).toBeInTheDocument();
+      fireEvent.click(editButton!);
+
+      expect(mockOnEdit).toHaveBeenCalledWith(mockPrompts[0]);
+    });
+
+    test("delete buttons call onDelete with confirmation", () => {
+      const originalConfirm = window.confirm;
+      window.confirm = jest.fn(() => true);
+
+      const { container } = render(
+        <PromptList {...defaultProps} prompts={mockPrompts} />
+      );
+
+      // Find the delete button (second button in the first action cell)
+      const actionCells = container.querySelectorAll("td:last-child");
+      const firstActionCell = actionCells[0];
+      const buttons = firstActionCell?.querySelectorAll("button");
+      const deleteButton = buttons?.[1]; // Second button should be delete
+
+      expect(deleteButton).toBeInTheDocument();
+      fireEvent.click(deleteButton!);
+
+      expect(window.confirm).toHaveBeenCalledWith(
+        "Are you sure you want to delete this prompt? This action cannot be undone."
+      );
+      expect(mockOnDelete).toHaveBeenCalledWith("prompt_123");
+
+      window.confirm = originalConfirm;
+    });
+
+    test("delete does not execute when confirmation is cancelled", () => {
+      const originalConfirm = window.confirm;
+      window.confirm = jest.fn(() => false);
+
+      const { container } = render(
+        <PromptList {...defaultProps} prompts={mockPrompts} />
+      );
+
+      const actionCells = container.querySelectorAll("td:last-child");
+      const firstActionCell = actionCells[0];
+      const buttons = firstActionCell?.querySelectorAll("button");
+      const deleteButton = buttons?.[1]; // Second button should be delete
+
+      expect(deleteButton).toBeInTheDocument();
+      fireEvent.click(deleteButton!);
+
+      expect(mockOnDelete).not.toHaveBeenCalled();
+
+      window.confirm = originalConfirm;
+    });
+  });
+
+  describe("Search Functionality", () => {
+    const mockPrompts: Prompt[] = [
+      {
+        prompt_id: "user_greeting",
+        prompt: "Hello {{name}}, welcome!",
+        version: 1,
+        variables: ["name"],
+        is_default: true,
+      },
+      {
+        prompt_id: "system_summary",
+        prompt: "Summarize the following text",
+        version: 1,
+        variables: [],
+        is_default: false,
+      },
+    ];
+
+    test("filters prompts by prompt ID", () => {
+      render(<PromptList {...defaultProps} prompts={mockPrompts} />);
+
+      const searchInput = screen.getByPlaceholderText("Search prompts...");
+      fireEvent.change(searchInput, { target: { value: "user" } });
+
+      expect(screen.getByText("user_greeting")).toBeInTheDocument();
+      expect(screen.queryByText("system_summary")).not.toBeInTheDocument();
+    });
+
+    test("filters prompts by content", () => {
+      render(<PromptList {...defaultProps} prompts={mockPrompts} />);
+
+      const searchInput = screen.getByPlaceholderText("Search prompts...");
+      fireEvent.change(searchInput, { target: { value: "welcome" } });
+
+      expect(screen.getByText("user_greeting")).toBeInTheDocument();
+      expect(screen.queryByText("system_summary")).not.toBeInTheDocument();
+    });
+
+    test("search is case insensitive", () => {
+      render(<PromptList {...defaultProps} prompts={mockPrompts} />);
+
+      const searchInput = screen.getByPlaceholderText("Search prompts...");
+      fireEvent.change(searchInput, { target: { value: "HELLO" } });
+
+      expect(screen.getByText("user_greeting")).toBeInTheDocument();
+      expect(screen.queryByText("system_summary")).not.toBeInTheDocument();
+    });
+
+    test("clearing search shows all prompts", () => {
+      render(<PromptList {...defaultProps} prompts={mockPrompts} />);
+
+      const searchInput = screen.getByPlaceholderText("Search prompts...");
+
+      // Filter first
+      fireEvent.change(searchInput, { target: { value: "user" } });
+      expect(screen.queryByText("system_summary")).not.toBeInTheDocument();
+
+      // Clear search
+      fireEvent.change(searchInput, { target: { value: "" } });
+      expect(screen.getByText("user_greeting")).toBeInTheDocument();
+      expect(screen.getByText("system_summary")).toBeInTheDocument();
+    });
+  });
+});

src/llama_stack_ui/components/prompts/prompt-list.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Input } from "@/components/ui/input";
+import { Edit, Search, Trash2 } from "lucide-react";
+import { Prompt, PromptFilters } from "./types";
+
+interface PromptListProps {
+  prompts: Prompt[];
+  onEdit: (prompt: Prompt) => void;
+  onDelete: (promptId: string) => void;
+}
+
+export function PromptList({ prompts, onEdit, onDelete }: PromptListProps) {
+  const [filters, setFilters] = useState<PromptFilters>({});
+
+  const filteredPrompts = prompts.filter(prompt => {
+    if (
+      filters.searchTerm &&
+      !(
+        prompt.prompt
+          ?.toLowerCase()
+          .includes(filters.searchTerm.toLowerCase()) ||
+        prompt.prompt_id
+          .toLowerCase()
+          .includes(filters.searchTerm.toLowerCase())
+      )
+    ) {
+      return false;
+    }
+    return true;
+  });
+
+  return (
+    <div className="space-y-4">
+      {/* Filters */}
+      <div className="flex flex-col sm:flex-row gap-4">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+          <Input
+            placeholder="Search prompts..."
+            value={filters.searchTerm || ""}
+            onChange={e =>
+              setFilters(prev => ({ ...prev, searchTerm: e.target.value }))
+            }
+            className="pl-10"
+          />
+        </div>
+      </div>
+
+      {/* Prompts Table */}
+      <div className="overflow-auto">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>ID</TableHead>
+              <TableHead>Content</TableHead>
+              <TableHead>Variables</TableHead>
+              <TableHead>Version</TableHead>
+              <TableHead>Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredPrompts.map(prompt => (
+              <TableRow key={prompt.prompt_id}>
+                <TableCell className="max-w-48">
+                  <Button
+                    variant="link"
+                    className="p-0 h-auto font-mono text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 max-w-full justify-start"
+                    onClick={() => onEdit(prompt)}
+                    title={prompt.prompt_id}
+                  >
+                    <div className="truncate">{prompt.prompt_id}</div>
+                  </Button>
+                </TableCell>
+                <TableCell className="max-w-64">
+                  <div
+                    className="font-mono text-xs text-muted-foreground truncate"
+                    title={prompt.prompt || "No content"}
+                  >
+                    {prompt.prompt || "No content"}
+                  </div>
+                </TableCell>
+                <TableCell>
+                  {prompt.variables.length > 0 ? (
+                    <div className="flex flex-wrap gap-1">
+                      {prompt.variables.map(variable => (
+                        <Badge
+                          key={variable}
+                          variant="outline"
+                          className="text-xs"
+                        >
+                          {variable}
+                        </Badge>
+                      ))}
+                    </div>
+                  ) : (
+                    <span className="text-muted-foreground text-sm">None</span>
+                  )}
+                </TableCell>
+                <TableCell className="text-sm">
+                  {prompt.version}
+                  {prompt.is_default && (
+                    <Badge variant="secondary" className="text-xs ml-2">
+                      Default
+                    </Badge>
+                  )}
+                </TableCell>
+                <TableCell>
+                  <div className="flex gap-1">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => onEdit(prompt)}
+                      className="h-8 w-8 p-0"
+                    >
+                      <Edit className="h-3 w-3" />
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => {
+                        if (
+                          confirm(
+                            `Are you sure you want to delete this prompt? This action cannot be undone.`
+                          )
+                        ) {
+                          onDelete(prompt.prompt_id);
+                        }
+                      }}
+                      className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      {filteredPrompts.length === 0 && (
+        <div className="text-center py-12">
+          <div className="text-muted-foreground">
+            {prompts.length === 0
+              ? "No prompts yet"
+              : "No prompts match your filters"}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/llama_stack_ui/components/prompts/prompt-management.test.tsx

@@ -0,0 +1,304 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { PromptManagement } from "./prompt-management";
+import type { Prompt } from "./types";
+
+// Mock the auth client
+const mockPromptsClient = {
+  list: jest.fn(),
+  create: jest.fn(),
+  update: jest.fn(),
+  delete: jest.fn(),
+};
+
+jest.mock("@/hooks/use-auth-client", () => ({
+  useAuthClient: () => ({
+    prompts: mockPromptsClient,
+  }),
+}));
+
+describe("PromptManagement", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Loading State", () => {
+    test("renders loading state initially", () => {
+      mockPromptsClient.list.mockReturnValue(new Promise(() => {})); // Never resolves
+      render(<PromptManagement />);
+
+      expect(screen.getByText("Loading prompts...")).toBeInTheDocument();
+      expect(screen.getByText("Prompts")).toBeInTheDocument();
+    });
+  });
+
+  describe("Empty State", () => {
+    test("renders empty state when no prompts", async () => {
+      mockPromptsClient.list.mockResolvedValue([]);
+      render(<PromptManagement />);
+
+      await waitFor(() => {
+        expect(screen.getByText("No prompts found.")).toBeInTheDocument();
+      });
+
+      expect(screen.getByText("Create Your First Prompt")).toBeInTheDocument();
+    });
+
+    test("opens modal when clicking 'Create Your First Prompt'", async () => {
+      mockPromptsClient.list.mockResolvedValue([]);
+      render(<PromptManagement />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("Create Your First Prompt")
+        ).toBeInTheDocument();
+      });
+
+      fireEvent.click(screen.getByText("Create Your First Prompt"));
+
+      expect(screen.getByText("Create New Prompt")).toBeInTheDocument();
+    });
+  });
+
+  describe("Error State", () => {
+    test("renders error state when API fails", async () => {
+      const error = new Error("API not found");
+      mockPromptsClient.list.mockRejectedValue(error);
+      render(<PromptManagement />);
+
+      await waitFor(() => {
+        expect(screen.getByText(/Error:/)).toBeInTheDocument();
+      });
+    });
+
+    test("renders specific error for 404", async () => {
+      const error = new Error("404 Not found");
+      mockPromptsClient.list.mockRejectedValue(error);
+      render(<PromptManagement />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText(/Prompts API endpoint not found/)
+        ).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("Prompts List", () => {
+    const mockPrompts: Prompt[] = [
+      {
+        prompt_id: "prompt_123",
+        prompt: "Hello {{name}}, how are you?",
+        version: 1,
+        variables: ["name"],
+        is_default: true,
+      },
+      {
+        prompt_id: "prompt_456",
+        prompt: "Summarize this {{text}}",
+        version: 2,
+        variables: ["text"],
+        is_default: false,
+      },
+    ];
+
+    test("renders prompts list correctly", async () => {
+      mockPromptsClient.list.mockResolvedValue(mockPrompts);
+      render(<PromptManagement />);
+
+      await waitFor(() => {
+        expect(screen.getByText("prompt_123")).toBeInTheDocument();
+      });
+
+      expect(screen.getByText("prompt_456")).toBeInTheDocument();
+      expect(
+        screen.getByText("Hello {{name}}, how are you?")
+      ).toBeInTheDocument();
+      expect(screen.getByText("Summarize this {{text}}")).toBeInTheDocument();
+    });
+
+    test("opens modal when clicking 'New Prompt' button", async () => {
+      mockPromptsClient.list.mockResolvedValue(mockPrompts);
+      render(<PromptManagement />);
+
+      await waitFor(() => {
+        expect(screen.getByText("prompt_123")).toBeInTheDocument();
+      });
+
+      fireEvent.click(screen.getByText("New Prompt"));
+
+      expect(screen.getByText("Create New Prompt")).toBeInTheDocument();
+    });
+  });
+
+  describe("Modal Operations", () => {
+    const mockPrompts: Prompt[] = [
+      {
+        prompt_id: "prompt_123",
+        prompt: "Hello {{name}}",
+        version: 1,
+        variables: ["name"],
+        is_default: true,
+      },
+    ];
+
+    test("closes modal when clicking cancel", async () => {
+      mockPromptsClient.list.mockResolvedValue(mockPrompts);
+      render(<PromptManagement />);
+
+      await waitFor(() => {
+        expect(screen.getByText("prompt_123")).toBeInTheDocument();
+      });
+
+      // Open modal
+      fireEvent.click(screen.getByText("New Prompt"));
+      expect(screen.getByText("Create New Prompt")).toBeInTheDocument();
+
+      // Close modal
+      fireEvent.click(screen.getByText("Cancel"));
+      expect(screen.queryByText("Create New Prompt")).not.toBeInTheDocument();
+    });
+
+    test("creates new prompt successfully", async () => {
+      const newPrompt: Prompt = {
+        prompt_id: "prompt_new",
+        prompt: "New prompt content",
+        version: 1,
+        variables: [],
+        is_default: false,
+      };
+
+      mockPromptsClient.list.mockResolvedValue(mockPrompts);
+      mockPromptsClient.create.mockResolvedValue(newPrompt);
+      render(<PromptManagement />);
+
+      await waitFor(() => {
+        expect(screen.getByText("prompt_123")).toBeInTheDocument();
+      });
+
+      // Open modal
+      fireEvent.click(screen.getByText("New Prompt"));
+
+      // Fill form
+      const promptInput = screen.getByLabelText("Prompt Content *");
+      fireEvent.change(promptInput, {
+        target: { value: "New prompt content" },
+      });
+
+      // Submit form
+      fireEvent.click(screen.getByText("Create Prompt"));
+
+      await waitFor(() => {
+        expect(mockPromptsClient.create).toHaveBeenCalledWith({
+          prompt: "New prompt content",
+          variables: [],
+        });
+      });
+    });
+
+    test("handles create error gracefully", async () => {
+      const error = {
+        detail: {
+          errors: [{ msg: "Prompt contains undeclared variables: ['test']" }],
+        },
+      };
+
+      mockPromptsClient.list.mockResolvedValue(mockPrompts);
+      mockPromptsClient.create.mockRejectedValue(error);
+      render(<PromptManagement />);
+
+      await waitFor(() => {
+        expect(screen.getByText("prompt_123")).toBeInTheDocument();
+      });
+
+      // Open modal
+      fireEvent.click(screen.getByText("New Prompt"));
+
+      // Fill form
+      const promptInput = screen.getByLabelText("Prompt Content *");
+      fireEvent.change(promptInput, { target: { value: "Hello {{test}}" } });
+
+      // Submit form
+      fireEvent.click(screen.getByText("Create Prompt"));
+
+      await waitFor(() => {
+        expect(
+          screen.getByText("Prompt contains undeclared variables: ['test']")
+        ).toBeInTheDocument();
+      });
+    });
+
+    test("updates existing prompt successfully", async () => {
+      const updatedPrompt: Prompt = {
+        ...mockPrompts[0],
+        prompt: "Updated content",
+      };
+
+      mockPromptsClient.list.mockResolvedValue(mockPrompts);
+      mockPromptsClient.update.mockResolvedValue(updatedPrompt);
+      const { container } = render(<PromptManagement />);
+
+      await waitFor(() => {
+        expect(screen.getByText("prompt_123")).toBeInTheDocument();
+      });
+
+      // Click edit button (first button in the action cell of the first row)
+      const actionCells = container.querySelectorAll("td:last-child");
+      const firstActionCell = actionCells[0];
+      const editButton = firstActionCell?.querySelector("button");
+
+      expect(editButton).toBeInTheDocument();
+      fireEvent.click(editButton!);
+
+      expect(screen.getByText("Edit Prompt")).toBeInTheDocument();
+
+      // Update content
+      const promptInput = screen.getByLabelText("Prompt Content *");
+      fireEvent.change(promptInput, { target: { value: "Updated content" } });
+
+      // Submit form
+      fireEvent.click(screen.getByText("Update Prompt"));
+
+      await waitFor(() => {
+        expect(mockPromptsClient.update).toHaveBeenCalledWith("prompt_123", {
+          prompt: "Updated content",
+          variables: ["name"],
+          version: 1,
+          set_as_default: true,
+        });
+      });
+    });
+
+    test("deletes prompt successfully", async () => {
+      mockPromptsClient.list.mockResolvedValue(mockPrompts);
+      mockPromptsClient.delete.mockResolvedValue(undefined);
+
+      // Mock window.confirm
+      const originalConfirm = window.confirm;
+      window.confirm = jest.fn(() => true);
+
+      const { container } = render(<PromptManagement />);
+
+      await waitFor(() => {
+        expect(screen.getByText("prompt_123")).toBeInTheDocument();
+      });
+
+      // Click delete button (second button in the action cell of the first row)
+      const actionCells = container.querySelectorAll("td:last-child");
+      const firstActionCell = actionCells[0];
+      const buttons = firstActionCell?.querySelectorAll("button");
+      const deleteButton = buttons?.[1]; // Second button should be delete
+
+      expect(deleteButton).toBeInTheDocument();
+      fireEvent.click(deleteButton!);
+
+      await waitFor(() => {
+        expect(mockPromptsClient.delete).toHaveBeenCalledWith("prompt_123");
+      });
+
+      // Restore window.confirm
+      window.confirm = originalConfirm;
+    });
+  });
+});

src/llama_stack_ui/components/prompts/prompt-management.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Plus } from "lucide-react";
+import { PromptList } from "./prompt-list";
+import { PromptEditor } from "./prompt-editor";
+import { Prompt, PromptFormData } from "./types";
+import { useAuthClient } from "@/hooks/use-auth-client";
+
+export function PromptManagement() {
+  const [prompts, setPrompts] = useState<Prompt[]>([]);
+  const [showPromptModal, setShowPromptModal] = useState(false);
+  const [editingPrompt, setEditingPrompt] = useState<Prompt | undefined>();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null); // For main page errors (loading, etc.)
+  const [modalError, setModalError] = useState<string | null>(null); // For form submission errors
+  const client = useAuthClient();
+
+  // Load prompts from API on component mount
+  useEffect(() => {
+    const fetchPrompts = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const response = await client.prompts.list();
+        setPrompts(response || []);
+      } catch (err: unknown) {
+        console.error("Failed to load prompts:", err);
+
+        // Handle different types of errors
+        const error = err as Error & { status?: number };
+        if (error?.message?.includes("404") || error?.status === 404) {
+          setError(
+            "Prompts API endpoint not found. Please ensure your Llama Stack server supports the prompts API."
+          );
+        } else if (
+          error?.message?.includes("not implemented") ||
+          error?.message?.includes("not supported")
+        ) {
+          setError(
+            "Prompts API is not yet implemented on this Llama Stack server."
+          );
+        } else {
+          setError(
+            `Failed to load prompts: ${error?.message || "Unknown error"}`
+          );
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPrompts();
+  }, [client]);
+
+  const handleSavePrompt = async (formData: PromptFormData) => {
+    try {
+      setModalError(null);
+
+      if (editingPrompt) {
+        // Update existing prompt
+        const response = await client.prompts.update(editingPrompt.prompt_id, {
+          prompt: formData.prompt,
+          variables: formData.variables,
+          version: editingPrompt.version,
+          set_as_default: true,
+        });
+
+        // Update local state
+        setPrompts(prev =>
+          prev.map(p =>
+            p.prompt_id === editingPrompt.prompt_id ? response : p
+          )
+        );
+      } else {
+        // Create new prompt
+        const response = await client.prompts.create({
+          prompt: formData.prompt,
+          variables: formData.variables,
+        });
+
+        // Add to local state
+        setPrompts(prev => [response, ...prev]);
+      }
+
+      setShowPromptModal(false);
+      setEditingPrompt(undefined);
+    } catch (err) {
+      console.error("Failed to save prompt:", err);
+
+      // Extract specific error message from API response
+      const error = err as Error & {
+        message?: string;
+        detail?: { errors?: Array<{ msg?: string }> };
+      };
+
+      // Try to parse JSON from error message if it's a string
+      let parsedError = error;
+      if (typeof error?.message === "string" && error.message.includes("{")) {
+        try {
+          const jsonMatch = error.message.match(/\d+\s+(.+)/);
+          if (jsonMatch) {
+            parsedError = JSON.parse(jsonMatch[1]);
+          }
+        } catch {
+          // If parsing fails, use original error
+        }
+      }
+
+      // Try to get the specific validation error message
+      const validationError = parsedError?.detail?.errors?.[0]?.msg;
+      if (validationError) {
+        // Clean up validation error messages (remove "Value error, " prefix if present)
+        const cleanMessage = validationError.replace(/^Value error,\s*/i, "");
+        setModalError(cleanMessage);
+      } else {
+        // For other errors, format them nicely with line breaks
+        const statusMatch = error?.message?.match(/(\d+)\s+(.+)/);
+        if (statusMatch) {
+          const statusCode = statusMatch[1];
+          const response = statusMatch[2];
+          setModalError(
+            `Failed to save prompt: Status Code ${statusCode}\n\nResponse: ${response}`
+          );
+        } else {
+          const message = error?.message || error?.detail || "Unknown error";
+          setModalError(`Failed to save prompt: ${message}`);
+        }
+      }
+    }
+  };
+
+  const handleEditPrompt = (prompt: Prompt) => {
+    setEditingPrompt(prompt);
+    setShowPromptModal(true);
+    setModalError(null); // Clear any previous modal errors
+  };
+
+  const handleDeletePrompt = async (promptId: string) => {
+    try {
+      setError(null);
+      await client.prompts.delete(promptId);
+      setPrompts(prev => prev.filter(p => p.prompt_id !== promptId));
+
+      // If we're deleting the currently editing prompt, close the modal
+      if (editingPrompt && editingPrompt.prompt_id === promptId) {
+        setShowPromptModal(false);
+        setEditingPrompt(undefined);
+      }
+    } catch (err) {
+      console.error("Failed to delete prompt:", err);
+      setError("Failed to delete prompt");
+    }
+  };
+
+  const handleCreateNew = () => {
+    setEditingPrompt(undefined);
+    setShowPromptModal(true);
+    setModalError(null); // Clear any previous modal errors
+  };
+
+  const handleCancel = () => {
+    setShowPromptModal(false);
+    setEditingPrompt(undefined);
+  };
+
+  const renderContent = () => {
+    if (loading) {
+      return <div className="text-muted-foreground">Loading prompts...</div>;
+    }
+
+    if (error) {
+      return <div className="text-destructive">Error: {error}</div>;
+    }
+
+    if (!prompts || prompts.length === 0) {
+      return (
+        <div className="text-center py-12">
+          <p className="text-muted-foreground mb-4">No prompts found.</p>
+          <Button onClick={handleCreateNew}>
+            <Plus className="h-4 w-4 mr-2" />
+            Create Your First Prompt
+          </Button>
+        </div>
+      );
+    }
+
+    return (
+      <PromptList
+        prompts={prompts}
+        onEdit={handleEditPrompt}
+        onDelete={handleDeletePrompt}
+      />
+    );
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-semibold">Prompts</h1>
+        <Button onClick={handleCreateNew} disabled={loading}>
+          <Plus className="h-4 w-4 mr-2" />
+          New Prompt
+        </Button>
+      </div>
+      {renderContent()}
+
+      {/* Create/Edit Prompt Modal */}
+      {showPromptModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-background border rounded-lg shadow-lg max-w-4xl w-full mx-4 max-h-[90vh] overflow-hidden">
+            <div className="p-6 border-b">
+              <h2 className="text-2xl font-bold">
+                {editingPrompt ? "Edit Prompt" : "Create New Prompt"}
+              </h2>
+            </div>
+            <div className="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
+              <PromptEditor
+                prompt={editingPrompt}
+                onSave={handleSavePrompt}
+                onCancel={handleCancel}
+                onDelete={handleDeletePrompt}
+                error={modalError}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/llama_stack_ui/components/prompts/types.ts

@@ -0,0 +1,16 @@
+export interface Prompt {
+  prompt_id: string;
+  prompt: string | null;
+  version: number;
+  variables: string[];
+  is_default: boolean;
+}
+
+export interface PromptFormData {
+  prompt: string;
+  variables: string[];
+}
+
+export interface PromptFilters {
+  searchTerm?: string;
+}

src/llama_stack_ui/components/providers/session-provider.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { SessionProvider as NextAuthSessionProvider } from "next-auth/react";
+
+export function SessionProvider({ children }: { children: React.ReactNode }) {
+  return <NextAuthSessionProvider>{children}</NextAuthSessionProvider>;
+}

src/llama_stack_ui/components/responses/grouping/grouped-items-display.tsx

@@ -0,0 +1,56 @@
+import { useFunctionCallGrouping } from "../hooks/function-call-grouping";
+import { ItemRenderer } from "../items/item-renderer";
+import { GroupedFunctionCallItemComponent } from "../items/grouped-function-call-item";
+import {
+  isFunctionCallItem,
+  isFunctionCallOutputItem,
+  AnyResponseItem,
+} from "../utils/item-types";
+
+interface GroupedItemsDisplayProps {
+  items: AnyResponseItem[];
+  keyPrefix: string;
+  defaultRole?: string;
+}
+
+export function GroupedItemsDisplay({
+  items,
+  keyPrefix,
+  defaultRole = "unknown",
+}: GroupedItemsDisplayProps) {
+  const groupedItems = useFunctionCallGrouping(items);
+
+  return (
+    <>
+      {groupedItems.map(groupedItem => {
+        // If this is a function call with an output, render the grouped component
+        if (
+          groupedItem.outputItem &&
+          isFunctionCallItem(groupedItem.item) &&
+          isFunctionCallOutputItem(groupedItem.outputItem)
+        ) {
+          return (
+            <GroupedFunctionCallItemComponent
+              key={`${keyPrefix}-${groupedItem.index}`}
+              functionCall={groupedItem.item}
+              output={groupedItem.outputItem}
+              index={groupedItem.index}
+              keyPrefix={keyPrefix}
+            />
+          );
+        }
+
+        // Otherwise, render the individual item
+        return (
+          <ItemRenderer
+            key={`${keyPrefix}-${groupedItem.index}`}
+            item={groupedItem.item}
+            index={groupedItem.index}
+            keyPrefix={keyPrefix}
+            defaultRole={defaultRole}
+          />
+        );
+      })}
+    </>
+  );
+}

src/llama_stack_ui/components/responses/hooks/function-call-grouping.ts

@@ -0,0 +1,92 @@
+import { useMemo } from "react";
+import {
+  isFunctionCallOutputItem,
+  AnyResponseItem,
+  FunctionCallOutputItem,
+} from "../utils/item-types";
+
+export interface GroupedItem {
+  item: AnyResponseItem;
+  index: number;
+  outputItem?: AnyResponseItem;
+  outputIndex?: number;
+}
+
+/**
+ * Hook to group function calls with their corresponding outputs
+ * @param items Array of items to group
+ * @returns Array of grouped items with their outputs
+ */
+export function useFunctionCallGrouping(
+  items: AnyResponseItem[]
+): GroupedItem[] {
+  return useMemo(() => {
+    const groupedItems: GroupedItem[] = [];
+    const processedIndices = new Set<number>();
+
+    // Build a map of call_id to indices for function_call_output items
+    const callIdToIndices = new Map<string, number[]>();
+
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (isFunctionCallOutputItem(item)) {
+        if (!callIdToIndices.has(item.call_id)) {
+          callIdToIndices.set(item.call_id, []);
+        }
+        callIdToIndices.get(item.call_id)!.push(i);
+      }
+    }
+
+    // Process items and group function calls with their outputs
+    for (let i = 0; i < items.length; i++) {
+      if (processedIndices.has(i)) {
+        continue;
+      }
+
+      const currentItem = items[i];
+
+      if (
+        currentItem.type === "function_call" &&
+        "name" in currentItem &&
+        "call_id" in currentItem
+      ) {
+        const functionCallId = currentItem.call_id as string;
+        let outputIndex = -1;
+        let outputItem: FunctionCallOutputItem | null = null;
+
+        const relatedIndices = callIdToIndices.get(functionCallId) || [];
+        for (const idx of relatedIndices) {
+          const potentialOutput = items[idx];
+          outputIndex = idx;
+          outputItem = potentialOutput as FunctionCallOutputItem;
+          break;
+        }
+
+        if (outputItem && outputIndex !== -1) {
+          // Group function call with its function_call_output
+          groupedItems.push({
+            item: currentItem,
+            index: i,
+            outputItem,
+            outputIndex,
+          });
+
+          // Mark both items as processed
+          processedIndices.add(i);
+          processedIndices.add(outputIndex);
+
+          // Matching function call and output found, skip to next item
+          continue;
+        }
+      }
+      // render normally
+      groupedItems.push({
+        item: currentItem,
+        index: i,
+      });
+      processedIndices.add(i);
+    }
+
+    return groupedItems;
+  }, [items]);
+}

src/llama_stack_ui/components/responses/items/function-call-item.tsx

@@ -0,0 +1,29 @@
+import {
+  MessageBlock,
+  ToolCallBlock,
+} from "@/components/chat-playground/message-components";
+import { FunctionCallItem } from "../utils/item-types";
+
+interface FunctionCallItemProps {
+  item: FunctionCallItem;
+  index: number;
+  keyPrefix: string;
+}
+
+export function FunctionCallItemComponent({
+  item,
+  index,
+  keyPrefix,
+}: FunctionCallItemProps) {
+  const name = item.name || "unknown";
+  const args = item.arguments || "{}";
+  const formattedFunctionCall = `${name}(${args})`;
+
+  return (
+    <MessageBlock
+      key={`${keyPrefix}-${index}`}
+      label="Function Call"
+      content={<ToolCallBlock>{formattedFunctionCall}</ToolCallBlock>}
+    />
+  );
+}

src/llama_stack_ui/components/responses/items/generic-item.tsx

@@ -0,0 +1,37 @@
+import {
+  MessageBlock,
+  ToolCallBlock,
+} from "@/components/chat-playground/message-components";
+import { BaseItem } from "../utils/item-types";
+
+interface GenericItemProps {
+  item: BaseItem;
+  index: number;
+  keyPrefix: string;
+}
+
+export function GenericItemComponent({
+  item,
+  index,
+  keyPrefix,
+}: GenericItemProps) {
+  // Handle other types like function calls, tool outputs, etc.
+  const itemData = item as Record<string, unknown>;
+
+  const content = itemData.content
+    ? typeof itemData.content === "string"
+      ? itemData.content
+      : JSON.stringify(itemData.content, null, 2)
+    : JSON.stringify(itemData, null, 2);
+
+  const label = keyPrefix === "input" ? "Input" : "Output";
+
+  return (
+    <MessageBlock
+      key={`${keyPrefix}-${index}`}
+      label={label}
+      labelDetail={`(${itemData.type})`}
+      content={<ToolCallBlock>{content}</ToolCallBlock>}
+    />
+  );
+}

src/llama_stack_ui/components/responses/items/grouped-function-call-item.tsx

@@ -0,0 +1,54 @@
+import {
+  MessageBlock,
+  ToolCallBlock,
+} from "@/components/chat-playground/message-components";
+import { FunctionCallItem, FunctionCallOutputItem } from "../utils/item-types";
+
+interface GroupedFunctionCallItemProps {
+  functionCall: FunctionCallItem;
+  output: FunctionCallOutputItem;
+  index: number;
+  keyPrefix: string;
+}
+
+export function GroupedFunctionCallItemComponent({
+  functionCall,
+  output,
+  index,
+  keyPrefix,
+}: GroupedFunctionCallItemProps) {
+  const name = functionCall.name || "unknown";
+  const args = functionCall.arguments || "{}";
+
+  // Extract the output content from function_call_output
+  let outputContent = "";
+  if (output.output) {
+    outputContent =
+      typeof output.output === "string"
+        ? output.output
+        : JSON.stringify(output.output);
+  } else {
+    outputContent = JSON.stringify(output, null, 2);
+  }
+
+  const functionCallContent = (
+    <div>
+      <div className="mb-2">
+        <span className="text-sm text-gray-600">Arguments</span>
+        <ToolCallBlock>{`${name}(${args})`}</ToolCallBlock>
+      </div>
+      <div>
+        <span className="text-sm text-gray-600">Output</span>
+        <ToolCallBlock>{outputContent}</ToolCallBlock>
+      </div>
+    </div>
+  );
+
+  return (
+    <MessageBlock
+      key={`${keyPrefix}-${index}`}
+      label="Function Call"
+      content={functionCallContent}
+    />
+  );
+}

src/llama_stack_ui/components/responses/items/index.ts

@@ -0,0 +1,6 @@
+export { MessageItemComponent } from "./message-item";
+export { FunctionCallItemComponent } from "./function-call-item";
+export { WebSearchItemComponent } from "./web-search-item";
+export { GenericItemComponent } from "./generic-item";
+export { GroupedFunctionCallItemComponent } from "./grouped-function-call-item";
+export { ItemRenderer } from "./item-renderer";

src/llama_stack_ui/components/responses/items/item-renderer.tsx

@@ -0,0 +1,60 @@
+import {
+  isMessageItem,
+  isFunctionCallItem,
+  isWebSearchCallItem,
+  AnyResponseItem,
+} from "../utils/item-types";
+import { MessageItemComponent } from "./message-item";
+import { FunctionCallItemComponent } from "./function-call-item";
+import { WebSearchItemComponent } from "./web-search-item";
+import { GenericItemComponent } from "./generic-item";
+
+interface ItemRendererProps {
+  item: AnyResponseItem;
+  index: number;
+  keyPrefix: string;
+  defaultRole?: string;
+}
+
+export function ItemRenderer({
+  item,
+  index,
+  keyPrefix,
+  defaultRole = "unknown",
+}: ItemRendererProps) {
+  if (isMessageItem(item)) {
+    return (
+      <MessageItemComponent
+        item={item}
+        index={index}
+        keyPrefix={keyPrefix}
+        defaultRole={defaultRole}
+      />
+    );
+  }
+
+  if (isFunctionCallItem(item)) {
+    return (
+      <FunctionCallItemComponent
+        item={item}
+        index={index}
+        keyPrefix={keyPrefix}
+      />
+    );
+  }
+
+  if (isWebSearchCallItem(item)) {
+    return (
+      <WebSearchItemComponent item={item} index={index} keyPrefix={keyPrefix} />
+    );
+  }
+
+  // Fallback to generic item for unknown types
+  return (
+    <GenericItemComponent
+      item={item as Record<string, unknown>}
+      index={index}
+      keyPrefix={keyPrefix}
+    />
+  );
+}

src/llama_stack_ui/components/responses/items/message-item.tsx

@@ -0,0 +1,41 @@
+import { MessageBlock } from "@/components/chat-playground/message-components";
+import { MessageItem } from "../utils/item-types";
+
+interface MessageItemProps {
+  item: MessageItem;
+  index: number;
+  keyPrefix: string;
+  defaultRole?: string;
+}
+
+export function MessageItemComponent({
+  item,
+  index,
+  keyPrefix,
+  defaultRole = "unknown",
+}: MessageItemProps) {
+  let content = "";
+
+  if (typeof item.content === "string") {
+    content = item.content;
+  } else if (Array.isArray(item.content)) {
+    content = item.content
+      .map(c => {
+        return c.type === "input_text" || c.type === "output_text"
+          ? c.text
+          : JSON.stringify(c);
+      })
+      .join(" ");
+  }
+
+  const role = item.role || defaultRole;
+  const label = role.charAt(0).toUpperCase() + role.slice(1);
+
+  return (
+    <MessageBlock
+      key={`${keyPrefix}-${index}`}
+      label={label}
+      content={content}
+    />
+  );
+}

src/llama_stack_ui/components/responses/items/web-search-item.tsx

@@ -0,0 +1,28 @@
+import {
+  MessageBlock,
+  ToolCallBlock,
+} from "@/components/chat-playground/message-components";
+import { WebSearchCallItem } from "../utils/item-types";
+
+interface WebSearchItemProps {
+  item: WebSearchCallItem;
+  index: number;
+  keyPrefix: string;
+}
+
+export function WebSearchItemComponent({
+  item,
+  index,
+  keyPrefix,
+}: WebSearchItemProps) {
+  const formattedWebSearch = `web_search_call(status: ${item.status})`;
+
+  return (
+    <MessageBlock
+      key={`${keyPrefix}-${index}`}
+      label="Function Call"
+      labelDetail="(Web Search)"
+      content={<ToolCallBlock>{formattedWebSearch}</ToolCallBlock>}
+    />
+  );
+}

src/llama_stack_ui/components/responses/responses-detail.test.tsx

@@ -0,0 +1,777 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { ResponseDetailView } from "./responses-detail";
+import { OpenAIResponse, InputItemListResponse } from "@/lib/types";
+
+describe("ResponseDetailView", () => {
+  const defaultProps = {
+    response: null,
+    inputItems: null,
+    isLoading: false,
+    isLoadingInputItems: false,
+    error: null,
+    inputItemsError: null,
+    id: "test_id",
+  };
+
+  describe("Loading State", () => {
+    test("renders loading skeleton when isLoading is true", () => {
+      const { container } = render(
+        <ResponseDetailView {...defaultProps} isLoading={true} />
+      );
+
+      // Check for skeleton elements
+      const skeletons = container.querySelectorAll('[data-slot="skeleton"]');
+      expect(skeletons.length).toBeGreaterThan(0);
+
+      // The title is replaced by a skeleton when loading, so we shouldn't expect the text
+    });
+  });
+
+  describe("Error State", () => {
+    test("renders error message when error prop is provided", () => {
+      const errorMessage = "Network Error";
+      render(
+        <ResponseDetailView
+          {...defaultProps}
+          error={{ name: "Error", message: errorMessage }}
+        />
+      );
+
+      expect(screen.getByText("Responses Details")).toBeInTheDocument();
+      // The error message is split across elements, so we check for parts
+      expect(
+        screen.getByText(/Error loading details for ID/)
+      ).toBeInTheDocument();
+      expect(screen.getByText(/test_id/)).toBeInTheDocument();
+      expect(screen.getByText(/Network Error/)).toBeInTheDocument();
+    });
+
+    test("renders default error message when error.message is not available", () => {
+      render(
+        <ResponseDetailView
+          {...defaultProps}
+          error={{ name: "Error", message: "" }}
+        />
+      );
+
+      expect(
+        screen.getByText(/Error loading details for ID/)
+      ).toBeInTheDocument();
+      expect(screen.getByText(/test_id/)).toBeInTheDocument();
+    });
+  });
+
+  describe("Not Found State", () => {
+    test("renders not found message when response is null and not loading/error", () => {
+      render(<ResponseDetailView {...defaultProps} response={null} />);
+
+      expect(screen.getByText("Responses Details")).toBeInTheDocument();
+      // The message is split across elements
+      expect(screen.getByText(/No details found for ID:/)).toBeInTheDocument();
+      expect(screen.getByText(/test_id/)).toBeInTheDocument();
+    });
+  });
+
+  describe("Response Data Rendering", () => {
+    const mockResponse: OpenAIResponse = {
+      id: "resp_123",
+      object: "response",
+      created_at: 1710000000,
+      model: "llama-test-model",
+      status: "completed",
+      output: [
+        {
+          type: "message",
+          role: "assistant",
+          content: "Test response output",
+        },
+      ],
+      input: [
+        {
+          type: "message",
+          role: "user",
+          content: "Test input message",
+        },
+      ],
+      temperature: 0.7,
+      top_p: 0.9,
+      parallel_tool_calls: true,
+      previous_response_id: "prev_resp_456",
+    };
+
+    test("renders response data with input and output sections", () => {
+      render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
+
+      // Check main sections
+      expect(screen.getByText("Responses Details")).toBeInTheDocument();
+      expect(screen.getByText("Input")).toBeInTheDocument();
+      expect(screen.getByText("Output")).toBeInTheDocument();
+
+      // Check input content
+      expect(screen.getByText("Test input message")).toBeInTheDocument();
+      expect(screen.getByText("User")).toBeInTheDocument();
+
+      // Check output content
+      expect(screen.getByText("Test response output")).toBeInTheDocument();
+      expect(screen.getByText("Assistant")).toBeInTheDocument();
+    });
+
+    test("renders properties sidebar with all response metadata", () => {
+      render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
+
+      // Check properties - use regex to handle text split across elements
+      expect(screen.getByText(/Created/)).toBeInTheDocument();
+      expect(
+        screen.getByText(new Date(1710000000 * 1000).toLocaleString())
+      ).toBeInTheDocument();
+
+      // Check for the specific ID label (not Previous Response ID)
+      expect(
+        screen.getByText((content, element) => {
+          return element?.tagName === "STRONG" && content === "ID:";
+        })
+      ).toBeInTheDocument();
+      expect(screen.getByText("resp_123")).toBeInTheDocument();
+
+      expect(screen.getByText(/Model/)).toBeInTheDocument();
+      expect(screen.getByText("llama-test-model")).toBeInTheDocument();
+
+      expect(screen.getByText(/Status/)).toBeInTheDocument();
+      expect(screen.getByText("completed")).toBeInTheDocument();
+
+      expect(screen.getByText(/Temperature/)).toBeInTheDocument();
+      expect(screen.getByText("0.7")).toBeInTheDocument();
+
+      expect(screen.getByText(/Top P/)).toBeInTheDocument();
+      expect(screen.getByText("0.9")).toBeInTheDocument();
+
+      expect(screen.getByText(/Parallel Tool Calls/)).toBeInTheDocument();
+      expect(screen.getByText("Yes")).toBeInTheDocument();
+
+      expect(screen.getByText(/Previous Response ID/)).toBeInTheDocument();
+      expect(screen.getByText("prev_resp_456")).toBeInTheDocument();
+    });
+
+    test("handles optional properties correctly", () => {
+      const minimalResponse: OpenAIResponse = {
+        id: "resp_minimal",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [],
+        input: [],
+      };
+
+      render(
+        <ResponseDetailView {...defaultProps} response={minimalResponse} />
+      );
+
+      // Should show required properties
+      expect(screen.getByText("resp_minimal")).toBeInTheDocument();
+      expect(screen.getByText("test-model")).toBeInTheDocument();
+      expect(screen.getByText("completed")).toBeInTheDocument();
+
+      // Should not show optional properties
+      expect(screen.queryByText("Temperature")).not.toBeInTheDocument();
+      expect(screen.queryByText("Top P")).not.toBeInTheDocument();
+      expect(screen.queryByText("Parallel Tool Calls")).not.toBeInTheDocument();
+      expect(
+        screen.queryByText("Previous Response ID")
+      ).not.toBeInTheDocument();
+    });
+
+    test("renders error information when response has error", () => {
+      const errorResponse: OpenAIResponse = {
+        ...mockResponse,
+        error: {
+          code: "invalid_request",
+          message: "The request was invalid",
+        },
+      };
+
+      render(<ResponseDetailView {...defaultProps} response={errorResponse} />);
+
+      // The error is shown in the properties sidebar, not as a separate "Error" label
+      expect(
+        screen.getByText("invalid_request: The request was invalid")
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("Input Items Handling", () => {
+    const mockResponse: OpenAIResponse = {
+      id: "resp_123",
+      object: "response",
+      created_at: 1710000000,
+      model: "test-model",
+      status: "completed",
+      output: [{ type: "message", role: "assistant", content: "output" }],
+      input: [{ type: "message", role: "user", content: "fallback input" }],
+    };
+
+    test("shows loading state for input items", () => {
+      render(
+        <ResponseDetailView
+          {...defaultProps}
+          response={mockResponse}
+          isLoadingInputItems={true}
+        />
+      );
+
+      // Check for skeleton loading in input items section
+      const { container } = render(
+        <ResponseDetailView
+          {...defaultProps}
+          response={mockResponse}
+          isLoadingInputItems={true}
+        />
+      );
+
+      const skeletons = container.querySelectorAll('[data-slot="skeleton"]');
+      expect(skeletons.length).toBeGreaterThan(0);
+    });
+
+    test("shows error message for input items with fallback", () => {
+      render(
+        <ResponseDetailView
+          {...defaultProps}
+          response={mockResponse}
+          inputItemsError={{
+            name: "Error",
+            message: "Failed to load input items",
+          }}
+        />
+      );
+
+      expect(
+        screen.getByText(
+          "Error loading input items: Failed to load input items"
+        )
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText("Falling back to response input data.")
+      ).toBeInTheDocument();
+
+      // Should still show fallback input data
+      expect(screen.getByText("fallback input")).toBeInTheDocument();
+    });
+
+    test("uses input items data when available", () => {
+      const mockInputItems: InputItemListResponse = {
+        object: "list",
+        data: [
+          {
+            type: "message",
+            role: "user",
+            content: "input from items API",
+          },
+        ],
+      };
+
+      render(
+        <ResponseDetailView
+          {...defaultProps}
+          response={mockResponse}
+          inputItems={mockInputItems}
+        />
+      );
+
+      // Should show input items data, not response.input
+      expect(screen.getByText("input from items API")).toBeInTheDocument();
+      expect(screen.queryByText("fallback input")).not.toBeInTheDocument();
+    });
+
+    test("falls back to response.input when input items is empty", () => {
+      const emptyInputItems: InputItemListResponse = {
+        object: "list",
+        data: [],
+      };
+
+      render(
+        <ResponseDetailView
+          {...defaultProps}
+          response={mockResponse}
+          inputItems={emptyInputItems}
+        />
+      );
+
+      // Should show fallback input data
+      expect(screen.getByText("fallback input")).toBeInTheDocument();
+    });
+
+    test("shows no input message when no data available", () => {
+      const responseWithoutInput: OpenAIResponse = {
+        ...mockResponse,
+        input: [],
+      };
+
+      render(
+        <ResponseDetailView
+          {...defaultProps}
+          response={responseWithoutInput}
+          inputItems={null}
+        />
+      );
+
+      expect(screen.getByText("No input data available.")).toBeInTheDocument();
+    });
+  });
+
+  describe("Input Display Components", () => {
+    test("renders string content input correctly", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_123",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [],
+        input: [
+          {
+            type: "message",
+            role: "user",
+            content: "Simple string input",
+          },
+        ],
+      };
+
+      render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
+
+      expect(screen.getByText("Simple string input")).toBeInTheDocument();
+      expect(screen.getByText("User")).toBeInTheDocument();
+    });
+
+    test("renders array content input correctly", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_123",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [],
+        input: [
+          {
+            type: "message",
+            role: "user",
+            content: [
+              { type: "input_text", text: "First part" },
+              { type: "output_text", text: "Second part" },
+            ],
+          },
+        ],
+      };
+
+      render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
+
+      expect(screen.getByText("First part Second part")).toBeInTheDocument();
+      expect(screen.getByText("User")).toBeInTheDocument();
+    });
+
+    test("renders non-message input types correctly", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_123",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [],
+        input: [
+          {
+            type: "function_call",
+            content: "function call content",
+          },
+        ],
+      };
+
+      render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
+
+      expect(screen.getByText("function call content")).toBeInTheDocument();
+      // Use getAllByText to find the specific "Input" with the type detail
+      const inputElements = screen.getAllByText("Input");
+      expect(inputElements.length).toBeGreaterThan(0);
+      expect(screen.getByText("(function_call)")).toBeInTheDocument();
+    });
+
+    test("handles input with object content", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_123",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [],
+        input: [
+          {
+            type: "custom_type",
+            content: JSON.stringify({ key: "value", nested: { data: "test" } }),
+          },
+        ],
+      };
+
+      render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
+
+      // Should show JSON stringified content (without quotes around keys in the rendered output)
+      expect(screen.getByText(/key.*value/)).toBeInTheDocument();
+      // Use getAllByText to find the specific "Input" with the type detail
+      const inputElements = screen.getAllByText("Input");
+      expect(inputElements.length).toBeGreaterThan(0);
+      expect(screen.getByText("(custom_type)")).toBeInTheDocument();
+    });
+
+    test("renders function call input correctly", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_123",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [],
+        input: [
+          {
+            type: "function_call",
+            id: "call_456",
+            status: "completed",
+            name: "input_function",
+            arguments: '{"param": "value"}',
+          },
+        ],
+      };
+
+      render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
+
+      expect(
+        screen.getByText('input_function({"param": "value"})')
+      ).toBeInTheDocument();
+      expect(screen.getByText("Function Call")).toBeInTheDocument();
+    });
+
+    test("renders web search call input correctly", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_123",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [],
+        input: [
+          {
+            type: "web_search_call",
+            id: "search_789",
+            status: "completed",
+          },
+        ],
+      };
+
+      render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
+
+      expect(
+        screen.getByText("web_search_call(status: completed)")
+      ).toBeInTheDocument();
+      expect(screen.getByText("Function Call")).toBeInTheDocument();
+      expect(screen.getByText("(Web Search)")).toBeInTheDocument();
+    });
+  });
+
+  describe("Output Display Components", () => {
+    test("renders message output with string content", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_123",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [
+          {
+            type: "message",
+            role: "assistant",
+            content: "Simple string output",
+          },
+        ],
+        input: [],
+      };
+
+      render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
+
+      expect(screen.getByText("Simple string output")).toBeInTheDocument();
+      expect(screen.getByText("Assistant")).toBeInTheDocument();
+    });
+
+    test("renders message output with array content", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_123",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [
+          {
+            type: "message",
+            role: "assistant",
+            content: [
+              { type: "output_text", text: "First output" },
+              { type: "input_text", text: "Second output" },
+            ],
+          },
+        ],
+        input: [],
+      };
+
+      render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
+
+      expect(
+        screen.getByText("First output Second output")
+      ).toBeInTheDocument();
+      expect(screen.getByText("Assistant")).toBeInTheDocument();
+    });
+
+    test("renders function call output correctly", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_123",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [
+          {
+            type: "function_call",
+            id: "call_123",
+            status: "completed",
+            name: "search_function",
+            arguments: '{"query": "test"}',
+          },
+        ],
+        input: [],
+      };
+
+      render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
+
+      expect(
+        screen.getByText('search_function({"query": "test"})')
+      ).toBeInTheDocument();
+      expect(screen.getByText("Function Call")).toBeInTheDocument();
+    });
+
+    test("renders function call output without arguments", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_123",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [
+          {
+            type: "function_call",
+            id: "call_123",
+            status: "completed",
+            name: "simple_function",
+          },
+        ],
+        input: [],
+      };
+
+      render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
+
+      expect(screen.getByText("simple_function({})")).toBeInTheDocument();
+      expect(screen.getByText(/Function Call/)).toBeInTheDocument();
+    });
+
+    test("renders web search call output correctly", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_123",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [
+          {
+            type: "web_search_call",
+            id: "search_123",
+            status: "completed",
+          },
+        ],
+        input: [],
+      };
+
+      render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
+
+      expect(
+        screen.getByText("web_search_call(status: completed)")
+      ).toBeInTheDocument();
+      expect(screen.getByText(/Function Call/)).toBeInTheDocument();
+      expect(screen.getByText("(Web Search)")).toBeInTheDocument();
+    });
+
+    test("renders unknown output types with JSON fallback", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_123",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [
+          {
+            type: "unknown_type",
+            custom_field: "custom_value",
+            data: { nested: "object" },
+          } as unknown,
+        ],
+        input: [],
+      };
+
+      render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
+
+      // Should show JSON stringified content
+      expect(
+        screen.getByText(/custom_field.*custom_value/)
+      ).toBeInTheDocument();
+      expect(screen.getByText("(unknown_type)")).toBeInTheDocument();
+    });
+
+    test("shows no output message when output array is empty", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_123",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [],
+        input: [],
+      };
+
+      render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
+
+      expect(screen.getByText("No output data available.")).toBeInTheDocument();
+    });
+
+    test("groups function call with its output correctly", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_123",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [
+          {
+            type: "function_call",
+            id: "call_123",
+            status: "completed",
+            name: "get_weather",
+            arguments: '{"city": "Tokyo"}',
+          },
+          {
+            type: "message",
+            role: "assistant",
+            call_id: "call_123",
+            content: "sunny and warm",
+          } as unknown, // Using any to bypass the type restriction for this test
+        ],
+        input: [],
+      };
+
+      render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
+
+      // Should show the function call and message as separate items (not grouped)
+      expect(screen.getByText("Function Call")).toBeInTheDocument();
+      expect(
+        screen.getByText('get_weather({"city": "Tokyo"})')
+      ).toBeInTheDocument();
+      expect(screen.getByText("Assistant")).toBeInTheDocument();
+      expect(screen.getByText("sunny and warm")).toBeInTheDocument();
+
+      // Should NOT have the grouped "Arguments" and "Output" labels
+      expect(screen.queryByText("Arguments")).not.toBeInTheDocument();
+    });
+
+    test("groups function call with function_call_output correctly", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_123",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [
+          {
+            type: "function_call",
+            call_id: "call_123",
+            status: "completed",
+            name: "get_weather",
+            arguments: '{"city": "Tokyo"}',
+          },
+          {
+            type: "function_call_output",
+            id: "fc_68364957013081...",
+            status: "completed",
+            call_id: "call_123",
+            output: "sunny and warm",
+          } as unknown,
+        ],
+        input: [],
+      };
+
+      render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
+
+      // Should show the function call grouped with its clean output
+      expect(screen.getByText("Function Call")).toBeInTheDocument();
+      expect(screen.getByText("Arguments")).toBeInTheDocument();
+      expect(
+        screen.getByText('get_weather({"city": "Tokyo"})')
+      ).toBeInTheDocument();
+      // Use getAllByText since there are multiple "Output" elements (card title and output label)
+      const outputElements = screen.getAllByText("Output");
+      expect(outputElements.length).toBeGreaterThan(0);
+      expect(screen.getByText("sunny and warm")).toBeInTheDocument();
+    });
+  });
+
+  describe("Edge Cases and Error Handling", () => {
+    test("handles missing role in message input", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_123",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [],
+        input: [
+          {
+            type: "message",
+            content: "Message without role",
+          },
+        ],
+      };
+
+      render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
+
+      expect(screen.getByText("Message without role")).toBeInTheDocument();
+      expect(screen.getByText("Unknown")).toBeInTheDocument(); // Default role
+    });
+
+    test("handles missing name in function call output", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_123",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [
+          {
+            type: "function_call",
+            id: "call_123",
+            status: "completed",
+          },
+        ],
+        input: [],
+      };
+
+      render(<ResponseDetailView {...defaultProps} response={mockResponse} />);
+
+      // When name is missing, it falls back to JSON.stringify of the entire output
+      const functionCallElements = screen.getAllByText(/function_call/);
+      expect(functionCallElements.length).toBeGreaterThan(0);
+      expect(screen.getByText(/call_123/)).toBeInTheDocument();
+    });
+  });
+});

src/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} />
+  );
+}

src/llama_stack_ui/components/responses/responses-table.test.tsx

@@ -0,0 +1,673 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { ResponsesTable } from "./responses-table";
+import { OpenAIResponse } from "@/lib/types";
+
+// Mock next/navigation
+const mockPush = jest.fn();
+jest.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
+}));
+
+// Mock next-auth
+jest.mock("next-auth/react", () => ({
+  useSession: () => ({
+    status: "authenticated",
+    data: { accessToken: "mock-token" },
+  }),
+}));
+
+// Mock helper functions
+jest.mock("@/lib/truncate-text");
+
+// Mock the auth client hook
+const mockClient = {
+  responses: {
+    list: jest.fn(),
+  },
+};
+
+jest.mock("@/hooks/use-auth-client", () => ({
+  useAuthClient: () => mockClient,
+}));
+
+// Mock the usePagination hook
+const mockLoadMore = jest.fn();
+jest.mock("@/hooks/use-pagination", () => ({
+  usePagination: jest.fn(() => ({
+    data: [],
+    status: "idle",
+    hasMore: false,
+    error: null,
+    loadMore: mockLoadMore,
+  })),
+}));
+
+// Import the mocked functions
+import { truncateText as originalTruncateText } from "@/lib/truncate-text";
+
+// Import the mocked hook
+import { usePagination } from "@/hooks/use-pagination";
+const mockedUsePagination = usePagination as jest.MockedFunction<
+  typeof usePagination
+>;
+
+// Cast to jest.Mock for typings
+const truncateText = originalTruncateText as jest.Mock;
+
+describe("ResponsesTable", () => {
+  const defaultProps = {};
+
+  beforeEach(() => {
+    // Reset all mocks before each test
+    mockPush.mockClear();
+    truncateText.mockClear();
+    mockLoadMore.mockClear();
+    jest.clearAllMocks();
+
+    // Default pass-through implementation
+    truncateText.mockImplementation((text: string | undefined) => text);
+
+    // Default hook return value
+    mockedUsePagination.mockReturnValue({
+      data: [],
+      status: "idle",
+      hasMore: false,
+      error: null,
+      loadMore: mockLoadMore,
+    });
+  });
+
+  test("renders without crashing with default props", () => {
+    render(<ResponsesTable {...defaultProps} />);
+    expect(screen.getByText("No responses found.")).toBeInTheDocument();
+  });
+
+  test("click on a row navigates to the correct URL", () => {
+    const mockResponse: OpenAIResponse = {
+      id: "resp_123",
+      object: "response",
+      created_at: Math.floor(Date.now() / 1000),
+      model: "llama-test-model",
+      status: "completed",
+      output: [
+        {
+          type: "message",
+          role: "assistant",
+          content: "Test output",
+        },
+      ],
+      input: [
+        {
+          type: "message",
+          role: "user",
+          content: "Test input",
+        },
+      ],
+    };
+
+    // Configure the mock to return our test data
+    mockedUsePagination.mockReturnValue({
+      data: [mockResponse],
+      status: "idle",
+      hasMore: false,
+      error: null,
+      loadMore: mockLoadMore,
+    });
+
+    render(<ResponsesTable {...defaultProps} />);
+
+    const row = screen.getByText("Test input").closest("tr");
+    if (row) {
+      fireEvent.click(row);
+      expect(mockPush).toHaveBeenCalledWith("/logs/responses/resp_123");
+    } else {
+      throw new Error('Row with "Test input" not found for router mock test.');
+    }
+  });
+
+  describe("Loading State", () => {
+    test("renders skeleton UI when status is loading", () => {
+      mockedUsePagination.mockReturnValue({
+        data: [],
+        status: "loading",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      const { container } = render(<ResponsesTable {...defaultProps} />);
+
+      // Check for skeleton in the table caption
+      const tableCaption = container.querySelector("caption");
+      expect(tableCaption).toBeInTheDocument();
+      if (tableCaption) {
+        const captionSkeleton = tableCaption.querySelector(
+          '[data-slot="skeleton"]'
+        );
+        expect(captionSkeleton).toBeInTheDocument();
+      }
+
+      // Check for skeletons in the table body cells
+      const tableBody = container.querySelector("tbody");
+      expect(tableBody).toBeInTheDocument();
+      if (tableBody) {
+        const bodySkeletons = tableBody.querySelectorAll(
+          '[data-slot="skeleton"]'
+        );
+        expect(bodySkeletons.length).toBeGreaterThan(0);
+      }
+    });
+  });
+
+  describe("Error State", () => {
+    test("renders error message when error is provided", () => {
+      const errorMessage = "Network Error";
+      mockedUsePagination.mockReturnValue({
+        data: [],
+        status: "error",
+        hasMore: false,
+        error: { name: "Error", message: errorMessage } as Error,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
+      expect(
+        screen.getByText("Unable to load chat completions")
+      ).toBeInTheDocument();
+      expect(screen.getByText(errorMessage)).toBeInTheDocument();
+    });
+
+    test.each([{ name: "Error", message: "" }, {}])(
+      "renders default error message when error has no message",
+      errorObject => {
+        mockedUsePagination.mockReturnValue({
+          data: [],
+          status: "error",
+          hasMore: false,
+          error: errorObject as Error,
+          loadMore: mockLoadMore,
+        });
+
+        render(<ResponsesTable {...defaultProps} />);
+        expect(
+          screen.getByText("Unable to load chat completions")
+        ).toBeInTheDocument();
+        expect(
+          screen.getByText(
+            "An unexpected error occurred while loading the data."
+          )
+        ).toBeInTheDocument();
+      }
+    );
+  });
+
+  describe("Empty State", () => {
+    test('renders "No responses found." and no table when data array is empty', () => {
+      render(<ResponsesTable {...defaultProps} />);
+      expect(screen.getByText("No responses found.")).toBeInTheDocument();
+
+      // Ensure that the table structure is NOT rendered in the empty state
+      const table = screen.queryByRole("table");
+      expect(table).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Data Rendering", () => {
+    test("renders table caption, headers, and response data correctly", () => {
+      const mockResponses: OpenAIResponse[] = [
+        {
+          id: "resp_1",
+          object: "response" as const,
+          created_at: 1710000000,
+          model: "llama-test-model",
+          status: "completed",
+          output: [
+            {
+              type: "message" as const,
+              role: "assistant" as const,
+              content: "Test output",
+            },
+          ],
+          input: [
+            {
+              type: "message",
+              role: "user",
+              content: "Test input",
+            },
+          ],
+        },
+        {
+          id: "resp_2",
+          object: "response" as const,
+          created_at: 1710001000,
+          model: "llama-another-model",
+          status: "completed",
+          output: [
+            {
+              type: "message" as const,
+              role: "assistant" as const,
+              content: "Another output",
+            },
+          ],
+          input: [
+            {
+              type: "message",
+              role: "user",
+              content: "Another input",
+            },
+          ],
+        },
+      ];
+
+      mockedUsePagination.mockReturnValue({
+        data: mockResponses,
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
+
+      // Table caption
+      expect(
+        screen.getByText("A list of your recent responses.")
+      ).toBeInTheDocument();
+
+      // Table headers
+      expect(screen.getByText("Input")).toBeInTheDocument();
+      expect(screen.getByText("Output")).toBeInTheDocument();
+      expect(screen.getByText("Model")).toBeInTheDocument();
+      expect(screen.getByText("Created")).toBeInTheDocument();
+
+      // Data rows
+      expect(screen.getByText("Test input")).toBeInTheDocument();
+      expect(screen.getByText("Test output")).toBeInTheDocument();
+      expect(screen.getByText("llama-test-model")).toBeInTheDocument();
+      expect(
+        screen.getByText(new Date(1710000000 * 1000).toLocaleString())
+      ).toBeInTheDocument();
+
+      expect(screen.getByText("Another input")).toBeInTheDocument();
+      expect(screen.getByText("Another output")).toBeInTheDocument();
+      expect(screen.getByText("llama-another-model")).toBeInTheDocument();
+      expect(
+        screen.getByText(new Date(1710001000 * 1000).toLocaleString())
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("Input Text Extraction", () => {
+    test("extracts text from string content", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_string",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [{ type: "message", role: "assistant", content: "output" }],
+        input: [
+          {
+            type: "message",
+            role: "user",
+            content: "Simple string input",
+          },
+        ],
+      };
+
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
+      expect(screen.getByText("Simple string input")).toBeInTheDocument();
+    });
+
+    test("extracts text from array content with input_text type", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_array",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [{ type: "message", role: "assistant", content: "output" }],
+        input: [
+          {
+            type: "message",
+            role: "user",
+            content: [
+              { type: "input_text", text: "Array input text" },
+              { type: "input_text", text: "Should not be used" },
+            ],
+          },
+        ],
+      };
+
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
+      expect(screen.getByText("Array input text")).toBeInTheDocument();
+    });
+
+    test("returns empty string when no message input found", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_no_input",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [{ type: "message", role: "assistant", content: "output" }],
+        input: [
+          {
+            type: "other_type",
+            content: "Not a message",
+          },
+        ],
+      };
+
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      const { container } = render(<ResponsesTable {...defaultProps} />);
+
+      // Find the input cell (first cell in the data row) and verify it's empty
+      const inputCell = container.querySelector("tbody tr td:first-child");
+      expect(inputCell).toBeInTheDocument();
+      expect(inputCell).toHaveTextContent("");
+    });
+  });
+
+  describe("Output Text Extraction", () => {
+    test("extracts text from string message content", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_string_output",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [
+          {
+            type: "message",
+            role: "assistant",
+            content: "Simple string output",
+          },
+        ],
+        input: [{ type: "message", content: "input" }],
+      };
+
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
+      expect(screen.getByText("Simple string output")).toBeInTheDocument();
+    });
+
+    test("extracts text from array message content with output_text type", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_array_output",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [
+          {
+            type: "message",
+            role: "assistant",
+            content: [
+              { type: "output_text", text: "Array output text" },
+              { type: "output_text", text: "Should not be used" },
+            ],
+          },
+        ],
+        input: [{ type: "message", content: "input" }],
+      };
+
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
+      expect(screen.getByText("Array output text")).toBeInTheDocument();
+    });
+
+    test("formats function call output", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_function_call",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [
+          {
+            type: "function_call",
+            id: "call_123",
+            status: "completed",
+            name: "search_function",
+            arguments: '{"query": "test"}',
+          },
+        ],
+        input: [{ type: "message", content: "input" }],
+      };
+
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
+      expect(
+        screen.getByText('search_function({"query": "test"})')
+      ).toBeInTheDocument();
+    });
+
+    test("formats function call output without arguments", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_function_no_args",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [
+          {
+            type: "function_call",
+            id: "call_123",
+            status: "completed",
+            name: "simple_function",
+          },
+        ],
+        input: [{ type: "message", content: "input" }],
+      };
+
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
+      expect(screen.getByText("simple_function({})")).toBeInTheDocument();
+    });
+
+    test("formats web search call output", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_web_search",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [
+          {
+            type: "web_search_call",
+            id: "search_123",
+            status: "completed",
+          },
+        ],
+        input: [{ type: "message", content: "input" }],
+      };
+
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
+      expect(
+        screen.getByText("web_search_call(status: completed)")
+      ).toBeInTheDocument();
+    });
+
+    test("falls back to JSON.stringify for unknown tool call types", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_unknown_tool",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [
+          {
+            type: "unknown_call",
+            id: "unknown_123",
+            status: "completed",
+            custom_field: "custom_value",
+          } as unknown,
+        ],
+        input: [{ type: "message", content: "input" }],
+      };
+
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
+      // Should contain the JSON stringified version
+      expect(screen.getByText(/unknown_call/)).toBeInTheDocument();
+    });
+
+    test("falls back to JSON.stringify for entire output when no message or tool call found", () => {
+      const mockResponse: OpenAIResponse = {
+        id: "resp_fallback",
+        object: "response",
+        created_at: 1710000000,
+        model: "test-model",
+        status: "completed",
+        output: [
+          {
+            type: "unknown_type",
+            data: "some data",
+          } as unknown,
+        ],
+        input: [{ type: "message", content: "input" }],
+      };
+
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
+      // Should contain the JSON stringified version of the output array
+      expect(screen.getByText(/unknown_type/)).toBeInTheDocument();
+    });
+  });
+
+  describe("Text Truncation", () => {
+    test("truncates long input and output text", () => {
+      // Specific mock implementation for this test
+      truncateText.mockImplementation(
+        (text: string | undefined, maxLength?: number) => {
+          const defaultTestMaxLength = 10;
+          const effectiveMaxLength = maxLength ?? defaultTestMaxLength;
+          return typeof text === "string" && text.length > effectiveMaxLength
+            ? text.slice(0, effectiveMaxLength) + "..."
+            : text;
+        }
+      );
+
+      const longInput =
+        "This is a very long input message that should be truncated.";
+      const longOutput =
+        "This is a very long output message that should also be truncated.";
+
+      const mockResponse: OpenAIResponse = {
+        id: "resp_trunc",
+        object: "response",
+        created_at: 1710002000,
+        model: "llama-trunc-model",
+        status: "completed",
+        output: [
+          {
+            type: "message",
+            role: "assistant",
+            content: longOutput,
+          },
+        ],
+        input: [
+          {
+            type: "message",
+            role: "user",
+            content: longInput,
+          },
+        ],
+      };
+
+      mockedUsePagination.mockReturnValue({
+        data: [mockResponse],
+        status: "idle",
+        hasMore: false,
+        error: null,
+        loadMore: mockLoadMore,
+      });
+
+      render(<ResponsesTable {...defaultProps} />);
+
+      // The truncated text should be present for both input and output
+      const truncatedTexts = screen.getAllByText(
+        longInput.slice(0, 10) + "..."
+      );
+      expect(truncatedTexts.length).toBe(2); // one for input, one for output
+    });
+  });
+});

src/llama_stack_ui/components/responses/responses-table.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import {
+  OpenAIResponse,
+  ResponseInputMessageContent,
+  UsePaginationOptions,
+} from "@/lib/types";
+import { LogsTable, LogTableRow } from "@/components/logs/logs-table";
+import { usePagination } from "@/hooks/use-pagination";
+import type { ResponseListResponse } from "llama-stack-client/resources/responses/responses";
+import {
+  isMessageInput,
+  isMessageItem,
+  isFunctionCallItem,
+  isWebSearchCallItem,
+  MessageItem,
+  FunctionCallItem,
+  WebSearchCallItem,
+} from "./utils/item-types";
+
+interface ResponsesTableProps {
+  /** Optional pagination configuration */
+  paginationOptions?: UsePaginationOptions;
+}
+
+/**
+ * Helper function to convert ResponseListResponse.Data to OpenAIResponse
+ */
+const convertResponseListData = (
+  responseData: ResponseListResponse.Data
+): OpenAIResponse => {
+  return {
+    id: responseData.id,
+    created_at: responseData.created_at,
+    model: responseData.model,
+    object: responseData.object,
+    status: responseData.status,
+    output: responseData.output as OpenAIResponse["output"],
+    input: responseData.input as OpenAIResponse["input"],
+    error: responseData.error,
+    parallel_tool_calls: responseData.parallel_tool_calls,
+    previous_response_id: responseData.previous_response_id,
+    temperature: responseData.temperature,
+    top_p: responseData.top_p,
+    truncation: responseData.truncation,
+  };
+};
+
+function getInputText(response: OpenAIResponse): string {
+  const firstInput = response.input.find(isMessageInput);
+  if (firstInput) {
+    return extractContentFromItem(firstInput);
+  }
+  return "";
+}
+
+function getOutputText(response: OpenAIResponse): string {
+  const firstMessage = response.output.find(item =>
+    isMessageItem(item as Record<string, unknown>)
+  );
+  if (firstMessage) {
+    const content = extractContentFromItem(firstMessage as MessageItem);
+    if (content) {
+      return content;
+    }
+  }
+
+  const functionCall = response.output.find(item =>
+    isFunctionCallItem(item as Record<string, unknown>)
+  );
+  if (functionCall) {
+    return formatFunctionCall(functionCall as FunctionCallItem);
+  }
+
+  const webSearchCall = response.output.find(item =>
+    isWebSearchCallItem(item as Record<string, unknown>)
+  );
+  if (webSearchCall) {
+    return formatWebSearchCall(webSearchCall as WebSearchCallItem);
+  }
+
+  return JSON.stringify(response.output);
+}
+
+function extractContentFromItem(item: {
+  content?: string | ResponseInputMessageContent[];
+}): string {
+  if (!item.content) {
+    return "";
+  }
+
+  if (typeof item.content === "string") {
+    return item.content;
+  } else if (Array.isArray(item.content)) {
+    const textContent = item.content.find(
+      (c: ResponseInputMessageContent) =>
+        c.type === "input_text" || c.type === "output_text"
+    );
+    return textContent?.text || "";
+  }
+  return "";
+}
+
+function formatFunctionCall(functionCall: FunctionCallItem): string {
+  const args = functionCall.arguments || "{}";
+  const name = functionCall.name || "unknown";
+  return `${name}(${args})`;
+}
+
+function formatWebSearchCall(webSearchCall: WebSearchCallItem): string {
+  return `web_search_call(status: ${webSearchCall.status})`;
+}
+
+function formatResponseToRow(response: OpenAIResponse): LogTableRow {
+  return {
+    id: response.id,
+    input: getInputText(response),
+    output: getOutputText(response),
+    model: response.model,
+    createdTime: new Date(response.created_at * 1000).toLocaleString(),
+    detailPath: `/logs/responses/${response.id}`,
+  };
+}
+
+export function ResponsesTable({ paginationOptions }: ResponsesTableProps) {
+  const fetchFunction = async (
+    client: ReturnType<typeof import("@/hooks/use-auth-client").useAuthClient>,
+    params: {
+      after?: string;
+      limit: number;
+      model?: string;
+      order?: string;
+    }
+  ) => {
+    const response = await client.responses.list({
+      after: params.after,
+      limit: params.limit,
+      ...(params.model && { model: params.model }),
+      ...(params.order && { order: params.order }),
+    } as Parameters<typeof client.responses.list>[0]);
+
+    const listResponse = response as ResponseListResponse;
+
+    return {
+      ...listResponse,
+      data: listResponse.data.map(convertResponseListData),
+    };
+  };
+
+  const { data, status, hasMore, error, loadMore } = usePagination({
+    ...paginationOptions,
+    fetchFunction,
+    errorMessagePrefix: "responses",
+  });
+
+  const formattedData = data.map(formatResponseToRow);
+
+  return (
+    <LogsTable
+      data={formattedData}
+      status={status}
+      hasMore={hasMore}
+      error={error}
+      onLoadMore={loadMore}
+      caption="A list of your recent responses."
+      emptyMessage="No responses found."
+    />
+  );
+}

src/llama_stack_ui/components/responses/utils/item-types.ts

@@ -0,0 +1,61 @@
+/**
+ * Type guards for different item types in responses
+ */
+
+import type {
+  ResponseInput,
+  ResponseOutput,
+  ResponseMessage,
+  ResponseToolCall,
+} from "@/lib/types";
+
+export interface BaseItem {
+  type: string;
+  [key: string]: unknown;
+}
+
+export type MessageItem = ResponseMessage;
+export type FunctionCallItem = ResponseToolCall & { type: "function_call" };
+export type WebSearchCallItem = ResponseToolCall & { type: "web_search_call" };
+export type FunctionCallOutputItem = BaseItem & {
+  type: "function_call_output";
+  call_id: string;
+  output?: string | object;
+};
+
+export type AnyResponseItem =
+  | ResponseInput
+  | ResponseOutput
+  | FunctionCallOutputItem;
+
+export function isMessageInput(
+  item: ResponseInput
+): item is ResponseInput & { type: "message" } {
+  return item.type === "message";
+}
+
+export function isMessageItem(item: AnyResponseItem): item is MessageItem {
+  return item.type === "message" && "content" in item;
+}
+
+export function isFunctionCallItem(
+  item: AnyResponseItem
+): item is FunctionCallItem {
+  return item.type === "function_call" && "name" in item;
+}
+
+export function isWebSearchCallItem(
+  item: AnyResponseItem
+): item is WebSearchCallItem {
+  return item.type === "web_search_call";
+}
+
+export function isFunctionCallOutputItem(
+  item: AnyResponseItem
+): item is FunctionCallOutputItem {
+  return (
+    item.type === "function_call_output" &&
+    "call_id" in item &&
+    typeof (item as Record<string, unknown>).call_id === "string"
+  );
+}

src/llama_stack_ui/components/ui/audio-visualizer.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+// Configuration constants for the audio analyzer
+const AUDIO_CONFIG = {
+  FFT_SIZE: 512,
+  SMOOTHING: 0.8,
+  MIN_BAR_HEIGHT: 2,
+  MIN_BAR_WIDTH: 2,
+  BAR_SPACING: 1,
+  COLOR: {
+    MIN_INTENSITY: 100, // Minimum gray value (darker)
+    MAX_INTENSITY: 255, // Maximum gray value (brighter)
+    INTENSITY_RANGE: 155, // MAX_INTENSITY - MIN_INTENSITY
+  },
+} as const;
+
+interface AudioVisualizerProps {
+  stream: MediaStream | null;
+  isRecording: boolean;
+  onClick: () => void;
+}
+
+export function AudioVisualizer({
+  stream,
+  isRecording,
+  onClick,
+}: AudioVisualizerProps) {
+  // Refs for managing audio context and animation
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const analyserRef = useRef<AnalyserNode | null>(null);
+  const animationFrameRef = useRef<number>();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Cleanup function to stop visualization and close audio context
+  const cleanup = () => {
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+    }
+    if (audioContextRef.current) {
+      audioContextRef.current.close();
+    }
+  };
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return cleanup;
+  }, []);
+
+  // Start or stop visualization based on recording state
+  useEffect(() => {
+    if (stream && isRecording) {
+      startVisualization();
+    } else {
+      cleanup();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stream, isRecording]);
+
+  // Handle window resize
+  useEffect(() => {
+    const handleResize = () => {
+      if (canvasRef.current && containerRef.current) {
+        const container = containerRef.current;
+        const canvas = canvasRef.current;
+        const dpr = window.devicePixelRatio || 1;
+
+        // Set canvas size based on container and device pixel ratio
+        const rect = container.getBoundingClientRect();
+        // Account for the 2px total margin (1px on each side)
+        canvas.width = (rect.width - 2) * dpr;
+        canvas.height = (rect.height - 2) * dpr;
+
+        // Scale canvas CSS size to match container minus margins
+        canvas.style.width = `${rect.width - 2}px`;
+        canvas.style.height = `${rect.height - 2}px`;
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+    // Initial setup
+    handleResize();
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  // Initialize audio context and start visualization
+  const startVisualization = async () => {
+    try {
+      const audioContext = new AudioContext();
+      audioContextRef.current = audioContext;
+
+      const analyser = audioContext.createAnalyser();
+      analyser.fftSize = AUDIO_CONFIG.FFT_SIZE;
+      analyser.smoothingTimeConstant = AUDIO_CONFIG.SMOOTHING;
+      analyserRef.current = analyser;
+
+      const source = audioContext.createMediaStreamSource(stream!);
+      source.connect(analyser);
+
+      draw();
+    } catch (error) {
+      console.error("Error starting visualization:", error);
+    }
+  };
+
+  // Calculate the color intensity based on bar height
+  const getBarColor = (normalizedHeight: number) => {
+    const intensity =
+      Math.floor(normalizedHeight * AUDIO_CONFIG.COLOR.INTENSITY_RANGE) +
+      AUDIO_CONFIG.COLOR.MIN_INTENSITY;
+    return `rgb(${intensity}, ${intensity}, ${intensity})`;
+  };
+
+  // Draw a single bar of the visualizer
+  const drawBar = (
+    ctx: CanvasRenderingContext2D,
+    x: number,
+    centerY: number,
+    width: number,
+    height: number,
+    color: string
+  ) => {
+    ctx.fillStyle = color;
+    // Draw upper bar (above center)
+    ctx.fillRect(x, centerY - height, width, height);
+    // Draw lower bar (below center)
+    ctx.fillRect(x, centerY, width, height);
+  };
+
+  // Main drawing function
+  const draw = () => {
+    if (!isRecording) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!canvas || !ctx || !analyserRef.current) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    ctx.scale(dpr, dpr);
+
+    const analyser = analyserRef.current;
+    const bufferLength = analyser.frequencyBinCount;
+    const frequencyData = new Uint8Array(bufferLength);
+
+    const drawFrame = () => {
+      animationFrameRef.current = requestAnimationFrame(drawFrame);
+
+      // Get current frequency data
+      analyser.getByteFrequencyData(frequencyData);
+
+      // Clear canvas - use CSS pixels for clearing
+      ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
+
+      // Calculate dimensions in CSS pixels
+      const barWidth = Math.max(
+        AUDIO_CONFIG.MIN_BAR_WIDTH,
+        canvas.width / dpr / bufferLength - AUDIO_CONFIG.BAR_SPACING
+      );
+      const centerY = canvas.height / dpr / 2;
+      let x = 0;
+
+      // Draw each frequency bar
+      for (let i = 0; i < bufferLength; i++) {
+        const normalizedHeight = frequencyData[i] / 255; // Convert to 0-1 range
+        const barHeight = Math.max(
+          AUDIO_CONFIG.MIN_BAR_HEIGHT,
+          normalizedHeight * centerY
+        );
+
+        drawBar(
+          ctx,
+          x,
+          centerY,
+          barWidth,
+          barHeight,
+          getBarColor(normalizedHeight)
+        );
+
+        x += barWidth + AUDIO_CONFIG.BAR_SPACING;
+      }
+    };
+
+    drawFrame();
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className="h-full w-full cursor-pointer rounded-lg bg-background/80 backdrop-blur"
+      onClick={onClick}
+    >
+      <canvas ref={canvasRef} className="h-full w-full" />
+    </div>
+  );
+}

src/llama_stack_ui/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

src/llama_stack_ui/components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

src/llama_stack_ui/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

src/llama_stack_ui/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};

src/llama_stack_ui/components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  );
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  );
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

src/llama_stack_ui/components/ui/copy-button.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { Check, Copy } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
+import { Button } from "@/components/ui/button";
+
+type CopyButtonProps = {
+  content: string;
+  copyMessage?: string;
+};
+
+export function CopyButton({ content, copyMessage }: CopyButtonProps) {
+  const { isCopied, handleCopy } = useCopyToClipboard({
+    text: content,
+    copyMessage,
+  });
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="relative h-6 w-6"
+      aria-label="Copy to clipboard"
+      onClick={handleCopy}
+    >
+      <div className="absolute inset-0 flex items-center justify-center">
+        <Check
+          className={cn(
+            "h-4 w-4 transition-transform ease-in-out",
+            isCopied ? "scale-100" : "scale-0"
+          )}
+        />
+      </div>
+      <Copy
+        className={cn(
+          "h-4 w-4 transition-transform ease-in-out",
+          isCopied ? "scale-0" : "scale-100"
+        )}
+      />
+    </Button>
+  );
+}

src/llama_stack_ui/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  );
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};

src/llama_stack_ui/components/ui/file-preview.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { motion } from "framer-motion";
+import { FileIcon, X } from "lucide-react";
+
+interface FilePreviewProps {
+  file: File;
+  onRemove?: () => void;
+}
+
+export const FilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
+  (props, ref) => {
+    if (props.file.type.startsWith("image/")) {
+      return <ImageFilePreview {...props} ref={ref} />;
+    }
+
+    if (
+      props.file.type.startsWith("text/") ||
+      props.file.name.endsWith(".txt") ||
+      props.file.name.endsWith(".md")
+    ) {
+      return <TextFilePreview {...props} ref={ref} />;
+    }
+
+    return <GenericFilePreview {...props} ref={ref} />;
+  }
+);
+FilePreview.displayName = "FilePreview";
+
+const ImageFilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
+  ({ file, onRemove }, ref) => {
+    return (
+      <motion.div
+        ref={ref}
+        className="relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs"
+        layout
+        initial={{ opacity: 0, y: "100%" }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: "100%" }}
+      >
+        <div className="flex w-full items-center space-x-2">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            alt={`Attachment ${file.name}`}
+            className="grid h-10 w-10 shrink-0 place-items-center rounded-sm border bg-muted object-cover"
+            src={URL.createObjectURL(file)}
+          />
+          <span className="w-full truncate text-muted-foreground">
+            {file.name}
+          </span>
+        </div>
+
+        {onRemove ? (
+          <button
+            className="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full border bg-background"
+            type="button"
+            onClick={onRemove}
+            aria-label="Remove attachment"
+          >
+            <X className="h-2.5 w-2.5" />
+          </button>
+        ) : null}
+      </motion.div>
+    );
+  }
+);
+ImageFilePreview.displayName = "ImageFilePreview";
+
+const TextFilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
+  ({ file, onRemove }, ref) => {
+    const [preview, setPreview] = React.useState<string>("");
+
+    useEffect(() => {
+      const reader = new FileReader();
+      reader.onload = e => {
+        const text = e.target?.result as string;
+        setPreview(text.slice(0, 50) + (text.length > 50 ? "..." : ""));
+      };
+      reader.readAsText(file);
+    }, [file]);
+
+    return (
+      <motion.div
+        ref={ref}
+        className="relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs"
+        layout
+        initial={{ opacity: 0, y: "100%" }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: "100%" }}
+      >
+        <div className="flex w-full items-center space-x-2">
+          <div className="grid h-10 w-10 shrink-0 place-items-center rounded-sm border bg-muted p-0.5">
+            <div className="h-full w-full overflow-hidden text-[6px] leading-none text-muted-foreground">
+              {preview || "Loading..."}
+            </div>
+          </div>
+          <span className="w-full truncate text-muted-foreground">
+            {file.name}
+          </span>
+        </div>
+
+        {onRemove ? (
+          <button
+            className="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full border bg-background"
+            type="button"
+            onClick={onRemove}
+            aria-label="Remove attachment"
+          >
+            <X className="h-2.5 w-2.5" />
+          </button>
+        ) : null}
+      </motion.div>
+    );
+  }
+);
+TextFilePreview.displayName = "TextFilePreview";
+
+const GenericFilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(
+  ({ file, onRemove }, ref) => {
+    return (
+      <motion.div
+        ref={ref}
+        className="relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs"
+        layout
+        initial={{ opacity: 0, y: "100%" }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: "100%" }}
+      >
+        <div className="flex w-full items-center space-x-2">
+          <div className="grid h-10 w-10 shrink-0 place-items-center rounded-sm border bg-muted">
+            <FileIcon className="h-6 w-6 text-foreground" />
+          </div>
+          <span className="w-full truncate text-muted-foreground">
+            {file.name}
+          </span>
+        </div>
+
+        {onRemove ? (
+          <button
+            className="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full border bg-background"
+            type="button"
+            onClick={onRemove}
+            aria-label="Remove attachment"
+          >
+            <X className="h-2.5 w-2.5" />
+          </button>
+        ) : null}
+      </motion.div>
+    );
+  }
+);
+GenericFilePreview.displayName = "GenericFilePreview";

src/llama_stack_ui/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

src/llama_stack_ui/components/ui/label.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

src/llama_stack_ui/components/ui/mode-toggle.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function ModeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/llama_stack_ui/components/ui/select.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

src/llama_stack_ui/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@/lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

src/llama_stack_ui/components/ui/sheet.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

src/llama_stack_ui/components/ui/sidebar.tsx

@@ -0,0 +1,726 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps, cva } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
+
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+
+  return context;
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open]
+  );
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);
+  }, [isMobile, setOpen, setOpenMobile]);
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed";
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  );
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  );
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("size-7", className)}
+      onClick={event => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  );
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : "button";
+  const { isMobile, state } = useSidebar();
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+
+  if (!tooltip) {
+    return button;
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    };
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  );
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  showOnHover?: boolean;
+}) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean;
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+  size?: "sm" | "md";
+  isActive?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};

src/llama_stack_ui/components/ui/sign-in-button.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { User } from "lucide-react";
+import Link from "next/link";
+import { useSession } from "next-auth/react";
+import { Button } from "./button";
+
+export function SignInButton() {
+  const { data: session, status } = useSession();
+
+  return (
+    <Button variant="ghost" size="sm" asChild>
+      <Link href="/auth/signin" className="flex items-center">
+        <User className="mr-2 h-4 w-4" />
+        <span>
+          {status === "loading"
+            ? "Loading..."
+            : session
+              ? session.user?.email || "Signed In"
+              : "Sign In"}
+        </span>
+      </Link>
+    </Button>
+  );
+}

src/llama_stack_ui/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

src/llama_stack_ui/components/ui/sonner.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

src/llama_stack_ui/components/ui/table.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

src/llama_stack_ui/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

src/llama_stack_ui/components/ui/textarea.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };

src/llama_stack_ui/components/ui/theme-provider.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

src/llama_stack_ui/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

src/llama_stack_ui/components/vector-stores/vector-store-detail.test.tsx

@@ -0,0 +1,315 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { VectorStoreDetailView } from "./vector-store-detail";
+import type { VectorStore } from "llama-stack-client/resources/vector-stores/vector-stores";
+import type { VectorStoreFile } from "llama-stack-client/resources/vector-stores/files";
+
+const mockPush = jest.fn();
+jest.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
+}));
+
+describe("VectorStoreDetailView", () => {
+  const defaultProps = {
+    store: null,
+    files: [],
+    isLoadingStore: false,
+    isLoadingFiles: false,
+    errorStore: null,
+    errorFiles: null,
+    id: "test_vector_store_id",
+  };
+
+  beforeEach(() => {
+    mockPush.mockClear();
+  });
+
+  describe("Loading States", () => {
+    test("renders loading skeleton when store is loading", () => {
+      const { container } = render(
+        <VectorStoreDetailView {...defaultProps} isLoadingStore={true} />
+      );
+
+      const skeletons = container.querySelectorAll('[data-slot="skeleton"]');
+      expect(skeletons.length).toBeGreaterThan(0);
+    });
+
+    test("renders files loading skeleton when files are loading", () => {
+      const mockStore: VectorStore = {
+        id: "vs_123",
+        name: "Test Vector Store",
+        created_at: 1710000000,
+        status: "ready",
+        file_counts: { total: 5 },
+        usage_bytes: 1024,
+        metadata: {
+          provider_id: "test_provider",
+          provider_vector_db_id: "test_db_id",
+        },
+      };
+
+      const { container } = render(
+        <VectorStoreDetailView
+          {...defaultProps}
+          store={mockStore}
+          isLoadingFiles={true}
+        />
+      );
+
+      expect(screen.getByText("Vector Store Details")).toBeInTheDocument();
+      expect(screen.getByText("Files")).toBeInTheDocument();
+      const skeletons = container.querySelectorAll('[data-slot="skeleton"]');
+      expect(skeletons.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("Error States", () => {
+    test("renders error message when store error occurs", () => {
+      render(
+        <VectorStoreDetailView
+          {...defaultProps}
+          errorStore={{ name: "Error", message: "Failed to load store" }}
+        />
+      );
+
+      expect(screen.getByText("Vector Store Details")).toBeInTheDocument();
+      expect(
+        screen.getByText(/Error loading details for ID test_vector_store_id/)
+      ).toBeInTheDocument();
+      expect(screen.getByText(/Failed to load store/)).toBeInTheDocument();
+    });
+
+    test("renders files error when files fail to load", () => {
+      const mockStore: VectorStore = {
+        id: "vs_123",
+        name: "Test Vector Store",
+        created_at: 1710000000,
+        status: "ready",
+        file_counts: { total: 5 },
+        usage_bytes: 1024,
+        metadata: {
+          provider_id: "test_provider",
+          provider_vector_db_id: "test_db_id",
+        },
+      };
+
+      render(
+        <VectorStoreDetailView
+          {...defaultProps}
+          store={mockStore}
+          errorFiles={{ name: "Error", message: "Failed to load files" }}
+        />
+      );
+
+      expect(screen.getByText("Files")).toBeInTheDocument();
+      expect(
+        screen.getByText("Error loading files: Failed to load files")
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("Not Found State", () => {
+    test("renders not found message when store is null", () => {
+      render(<VectorStoreDetailView {...defaultProps} store={null} />);
+
+      expect(screen.getByText("Vector Store Details")).toBeInTheDocument();
+      expect(
+        screen.getByText(/No details found for ID: test_vector_store_id/)
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("Store Data Rendering", () => {
+    const mockStore: VectorStore = {
+      id: "vs_123",
+      name: "Test Vector Store",
+      created_at: 1710000000,
+      status: "ready",
+      file_counts: { total: 3 },
+      usage_bytes: 2048,
+      metadata: {
+        provider_id: "test_provider",
+        provider_vector_db_id: "test_db_id",
+      },
+    };
+
+    test("renders store properties correctly", () => {
+      render(<VectorStoreDetailView {...defaultProps} store={mockStore} />);
+
+      expect(screen.getByText("Vector Store Details")).toBeInTheDocument();
+      expect(screen.getByText("vs_123")).toBeInTheDocument();
+      expect(screen.getByText("Test Vector Store")).toBeInTheDocument();
+      expect(
+        screen.getByText(new Date(1710000000 * 1000).toLocaleString())
+      ).toBeInTheDocument();
+      expect(screen.getByText("ready")).toBeInTheDocument();
+      expect(screen.getByText("3")).toBeInTheDocument();
+      expect(screen.getByText("2048")).toBeInTheDocument();
+      expect(screen.getByText("test_provider")).toBeInTheDocument();
+      expect(screen.getByText("test_db_id")).toBeInTheDocument();
+    });
+
+    test("handles empty/missing optional fields", () => {
+      const minimalStore: VectorStore = {
+        id: "vs_minimal",
+        name: "",
+        created_at: 1710000000,
+        status: "ready",
+        file_counts: { total: 0 },
+        usage_bytes: 0,
+        metadata: {},
+      };
+
+      render(<VectorStoreDetailView {...defaultProps} store={minimalStore} />);
+
+      expect(screen.getByText("vs_minimal")).toBeInTheDocument();
+      expect(screen.getByText("ready")).toBeInTheDocument();
+      const zeroTexts = screen.getAllByText("0");
+      expect(zeroTexts.length).toBeGreaterThanOrEqual(2);
+    });
+
+    test("shows empty files message when no files", () => {
+      render(
+        <VectorStoreDetailView {...defaultProps} store={mockStore} files={[]} />
+      );
+
+      expect(screen.getByText("Files")).toBeInTheDocument();
+      expect(
+        screen.getByText("No files in this vector store.")
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("Files Table", () => {
+    const mockStore: VectorStore = {
+      id: "vs_123",
+      name: "Test Vector Store",
+      created_at: 1710000000,
+      status: "ready",
+      file_counts: { total: 2 },
+      usage_bytes: 2048,
+      metadata: {},
+    };
+
+    const mockFiles: VectorStoreFile[] = [
+      {
+        id: "file_123",
+        status: "completed",
+        created_at: 1710001000,
+        usage_bytes: 1024,
+      },
+      {
+        id: "file_456",
+        status: "processing",
+        created_at: 1710002000,
+        usage_bytes: 512,
+      },
+    ];
+
+    test("renders files table with correct data", () => {
+      render(
+        <VectorStoreDetailView
+          {...defaultProps}
+          store={mockStore}
+          files={mockFiles}
+        />
+      );
+
+      expect(screen.getByText("Files")).toBeInTheDocument();
+      expect(
+        screen.getByText("Files in this vector store")
+      ).toBeInTheDocument();
+
+      expect(screen.getByText("ID")).toBeInTheDocument();
+      expect(screen.getByText("Status")).toBeInTheDocument();
+      expect(screen.getByText("Created")).toBeInTheDocument();
+      expect(screen.getByText("Usage Bytes")).toBeInTheDocument();
+
+      expect(screen.getByText("file_123")).toBeInTheDocument();
+      expect(screen.getByText("completed")).toBeInTheDocument();
+      expect(
+        screen.getByText(new Date(1710001000 * 1000).toLocaleString())
+      ).toBeInTheDocument();
+      expect(screen.getByText("1024")).toBeInTheDocument();
+
+      expect(screen.getByText("file_456")).toBeInTheDocument();
+      expect(screen.getByText("processing")).toBeInTheDocument();
+      expect(
+        screen.getByText(new Date(1710002000 * 1000).toLocaleString())
+      ).toBeInTheDocument();
+      expect(screen.getByText("512")).toBeInTheDocument();
+    });
+
+    test("file ID links are clickable and navigate correctly", () => {
+      render(
+        <VectorStoreDetailView
+          {...defaultProps}
+          store={mockStore}
+          files={mockFiles}
+          id="vs_123"
+        />
+      );
+
+      const fileButton = screen.getByRole("button", { name: "file_123" });
+      expect(fileButton).toBeInTheDocument();
+
+      fireEvent.click(fileButton);
+      expect(mockPush).toHaveBeenCalledWith(
+        "/logs/vector-stores/vs_123/files/file_123"
+      );
+    });
+
+    test("handles multiple file clicks correctly", () => {
+      render(
+        <VectorStoreDetailView
+          {...defaultProps}
+          store={mockStore}
+          files={mockFiles}
+          id="vs_123"
+        />
+      );
+
+      const file1Button = screen.getByRole("button", { name: "file_123" });
+      const file2Button = screen.getByRole("button", { name: "file_456" });
+
+      fireEvent.click(file1Button);
+      expect(mockPush).toHaveBeenCalledWith(
+        "/logs/vector-stores/vs_123/files/file_123"
+      );
+
+      fireEvent.click(file2Button);
+      expect(mockPush).toHaveBeenCalledWith(
+        "/logs/vector-stores/vs_123/files/file_456"
+      );
+
+      expect(mockPush).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe("Layout Structure", () => {
+    const mockStore: VectorStore = {
+      id: "vs_layout_test",
+      name: "Layout Test Store",
+      created_at: 1710000000,
+      status: "ready",
+      file_counts: { total: 1 },
+      usage_bytes: 1024,
+      metadata: {},
+    };
+
+    test("renders main content and sidebar in correct layout", () => {
+      render(<VectorStoreDetailView {...defaultProps} store={mockStore} />);
+
+      expect(screen.getByText("Files")).toBeInTheDocument();
+
+      expect(screen.getByText("vs_layout_test")).toBeInTheDocument();
+      expect(screen.getByText("Layout Test Store")).toBeInTheDocument();
+      expect(screen.getByText("ready")).toBeInTheDocument();
+      expect(screen.getByText("1")).toBeInTheDocument();
+      expect(screen.getByText("1024")).toBeInTheDocument();
+    });
+  });
+});

src/llama_stack_ui/components/vector-stores/vector-store-detail.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import type { VectorStore } from "llama-stack-client/resources/vector-stores/vector-stores";
+import type { VectorStoreFile } from "llama-stack-client/resources/vector-stores/files";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button";
+import {
+  DetailLoadingView,
+  DetailErrorView,
+  DetailNotFoundView,
+  DetailLayout,
+  PropertiesCard,
+  PropertyItem,
+} from "@/components/layout/detail-layout";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+interface VectorStoreDetailViewProps {
+  store: VectorStore | null;
+  files: VectorStoreFile[];
+  isLoadingStore: boolean;
+  isLoadingFiles: boolean;
+  errorStore: Error | null;
+  errorFiles: Error | null;
+  id: string;
+}
+
+export function VectorStoreDetailView({
+  store,
+  files,
+  isLoadingStore,
+  isLoadingFiles,
+  errorStore,
+  errorFiles,
+  id,
+}: VectorStoreDetailViewProps) {
+  const title = "Vector Store Details";
+  const router = useRouter();
+
+  const handleFileClick = (fileId: string) => {
+    router.push(`/logs/vector-stores/${id}/files/${fileId}`);
+  };
+
+  if (errorStore) {
+    return <DetailErrorView title={title} id={id} error={errorStore} />;
+  }
+  if (isLoadingStore) {
+    return <DetailLoadingView title={title} />;
+  }
+  if (!store) {
+    return <DetailNotFoundView title={title} id={id} />;
+  }
+
+  const mainContent = (
+    <>
+      <Card>
+        <CardHeader>
+          <CardTitle>Files</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {isLoadingFiles ? (
+            <Skeleton className="h-4 w-full" />
+          ) : errorFiles ? (
+            <div className="text-destructive text-sm">
+              Error loading files: {errorFiles.message}
+            </div>
+          ) : files.length > 0 ? (
+            <Table>
+              <TableCaption>Files in this vector store</TableCaption>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>ID</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Created</TableHead>
+                  <TableHead>Usage Bytes</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {files.map(file => (
+                  <TableRow key={file.id}>
+                    <TableCell>
+                      <Button
+                        variant="link"
+                        className="p-0 h-auto font-mono text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+                        onClick={() => handleFileClick(file.id)}
+                      >
+                        {file.id}
+                      </Button>
+                    </TableCell>
+                    <TableCell>{file.status}</TableCell>
+                    <TableCell>
+                      {new Date(file.created_at * 1000).toLocaleString()}
+                    </TableCell>
+                    <TableCell>{file.usage_bytes}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          ) : (
+            <p className="text-gray-500 italic text-sm">
+              No files in this vector store.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+    </>
+  );
+
+  const sidebar = (
+    <PropertiesCard>
+      <PropertyItem label="ID" value={store.id} />
+      <PropertyItem label="Name" value={store.name || ""} />
+      <PropertyItem
+        label="Created"
+        value={new Date(store.created_at * 1000).toLocaleString()}
+      />
+      <PropertyItem label="Status" value={store.status} />
+      <PropertyItem label="Total Files" value={store.file_counts.total} />
+      <PropertyItem label="Usage Bytes" value={store.usage_bytes} />
+      <PropertyItem
+        label="Provider ID"
+        value={(store.metadata.provider_id as string) || ""}
+      />
+      <PropertyItem
+        label="Provider DB ID"
+        value={(store.metadata.provider_vector_db_id as string) || ""}
+      />
+    </PropertiesCard>
+  );
+
+  return (
+    <DetailLayout title={title} mainContent={mainContent} sidebar={sidebar} />
+  );
+}