From b88c661c7cf5a83f8bde6d2818572cf422a50a8f Mon Sep 17 00:00:00 2001
From: Shrey Gupta <shrey16.sg@gmail.com>
Date: Tue, 21 Jul 2026 22:25:54 +0530
Subject: [PATCH 1/8] docs: plan Library PR 27 takeover

---
 .../2026-07-21-library-ui-pr27-takeover.md    | 294 ++++++++++++++++++
 1 file changed, 294 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-07-21-library-ui-pr27-takeover.md

diff --git a/docs/superpowers/plans/2026-07-21-library-ui-pr27-takeover.md b/docs/superpowers/plans/2026-07-21-library-ui-pr27-takeover.md
new file mode 100644
index 0000000..85a47cd
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-21-library-ui-pr27-takeover.md
@@ -0,0 +1,294 @@
+# Library UI PR #27 Takeover Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Port the contributor-authored Library list prototype from PR #27 onto current `main`, resolve its review blockers, and publish a current, tested maintainer replacement PR that preserves contributor attribution.
+
+**Architecture:** Keep the Library feature as an isolated client-side prototype backed by mock data. Reuse the contributor's dense and preview views, expose only quick actions that have real callbacks, use pressed-button group semantics for the view toggle, localize every user-facing string, and type the UI view model against the merged RFC 0001 file/artifact contract where that contract applies.
+
+**Tech Stack:** React, TypeScript, Headless UI, React Testing Library, Jest, i18next, Vite 7/PWA runtime smoke.
+
+## Global Constraints
+
+- Start from public `main` at `f996b7ed685225d2655b57762fbbeb6ada7e82a9` or a later descendant containing PR #80.
+- Preserve the original author metadata by cherry-picking contributor commits; do not squash-copy the feature.
+- Do not import PR #27's stale merge commit `c000bf49353f99c07981e54625692c9f86a089f8`.
+- Keep this slice mocked and contributor-safe: no production credentials, storage adapters, private endpoints, or deployment configuration.
+- All user-facing text in `client/src/**/*` must use `useLocalize()` and new keys must be added only to `client/src/locales/en/translation.json`.
+- Write or update a failing focused test before each behavior change, observe the expected failure, then implement the minimum fix.
+- Preserve unrelated worktree changes.
+
+---
+
+### Task 1: Replay the contributor implementation and reproduce the reviewed failures
+
+**Files:**
+- Import: `.gitignore`
+- Import: `client/src/components/Library/**/*`
+- Import: `client/src/data/mockLibraryData.ts`
+- Import: `client/src/types/library.ts`
+- Test: `client/src/components/Library/__tests__/LibraryList.test.tsx`
+- Test: `client/src/components/Library/__tests__/libraryUtils.test.ts`
+
+**Interfaces:**
+- Consumes: PR #27 commits `aa888afc664977550ad5efee578b93e99d2aca84`, `857c58384ae4c81262127ded0c0d61bd8ca9ebfe`, `81247c0ad19083b49f2e356b74e01a5eeef5894d`, and `9db1d77d2caf016288d602fd8890bbd3a3a8bb54`.
+- Produces: the contributor's Library components and tests on the repaired current toolchain.
+
+- [ ] **Step 1: Replay only the contributor-authored commits**
+
+```bash
+git cherry-pick aa888afc664977550ad5efee578b93e99d2aca84
+git cherry-pick 857c58384ae4c81262127ded0c0d61bd8ca9ebfe
+git cherry-pick 81247c0ad19083b49f2e356b74e01a5eeef5894d
+git cherry-pick 9db1d77d2caf016288d602fd8890bbd3a3a8bb54
+```
+
+- [ ] **Step 2: Run the focused Library tests and verify the known red state**
+
+Run:
+
+```bash
+cd client
+npx jest src/components/Library/__tests__/LibraryList.test.tsx src/components/Library/__tests__/libraryUtils.test.ts --runInBand --coverage=false
+```
+
+Expected: `LibraryList › filters items by type` and `LibraryList › sorts items by name` fail because the actual dropdown buttons are not named “Filter by type” and “Sort library items”.
+
+### Task 2: Correct accessible control and quick-action semantics
+
+**Files:**
+- Modify: `client/src/components/Library/__tests__/LibraryList.test.tsx`
+- Modify: `client/src/components/Library/LibraryFilters.tsx`
+- Modify: `client/src/components/Library/LibraryViewToggle.tsx`
+- Modify: `client/src/components/Library/LibraryItemActions.tsx`
+- Modify: `client/src/components/Library/LibraryListItem.tsx`
+- Modify: `client/src/components/Library/LibraryPreviewCard.tsx`
+- Modify: `client/src/components/Library/LibraryList.tsx`
+- Modify: `client/src/types/library.ts`
+
+**Interfaces:**
+- Consumes: `LibraryList` items and optional item-level callbacks.
+- Produces: correctly named filter/sort buttons; a `role="group"` pressed-button view toggle; and optional `onDownload`, `onShare`, and `onMore` callbacks that never render dead controls.
+
+- [ ] **Step 1: Extend the interaction tests before changing components**
+
+Add assertions equivalent to:
+
+```tsx
+expect(screen.getByRole('group', { name: 'Library view' })).toBeInTheDocument();
+expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
+
+const onOpen = jest.fn();
+const onDownload = jest.fn();
+render(<LibraryList items={[mockLibraryItems[0]]} status="populated" onItemClick={onOpen} onDownload={onDownload} />);
+await userEvent.click(screen.getByRole('button', { name: 'Download' }));
+expect(onDownload).toHaveBeenCalledWith(mockLibraryItems[0]);
+```
+
+- [ ] **Step 2: Run the focused component test and verify the new assertions fail**
+
+Run:
+
+```bash
+cd client
+npx jest src/components/Library/__tests__/LibraryList.test.tsx --runInBand --coverage=false
+```
+
+Expected: failures identify the radiogroup/pressed-button mismatch and dead quick-action buttons; the two existing dropdown tests remain red.
+
+- [ ] **Step 3: Implement the minimum accessible behavior**
+
+Implement these exact behavior rules:
+
+```tsx
+<SelectDropDown title={localize('com_ui_library_filter_by_type')} showLabel={false} />
+<SelectDropDown title={localize('com_ui_library_sort_items')} showLabel={false} />
+<div role="group" aria-label={localize('com_ui_library_view')}>
+```
+
+`LibraryItemActions` must return `null` when every callback is absent and render each button only when its corresponding callback exists. `LibraryList` must pass the selected `LibraryItem` to `onItemClick`, `onDownload`, `onShare`, and `onMore` without adding placeholder handlers.
+
+- [ ] **Step 4: Run the focused component test and verify it passes**
+
+Run:
+
+```bash
+cd client
+npx jest src/components/Library/__tests__/LibraryList.test.tsx --runInBand --coverage=false
+```
+
+Expected: all Library component interaction tests pass.
+
+- [ ] **Step 5: Commit the behavior fixes**
+
+```bash
+git add client/src/components/Library client/src/types/library.ts
+git commit -m "fix: complete Library interaction semantics"
+```
+
+### Task 3: Align mock records with the RFC 0001 contract
+
+**Files:**
+- Modify: `client/src/components/Library/__tests__/libraryUtils.test.ts`
+- Modify: `client/src/components/Library/LibraryPreviewCard.tsx`
+- Modify: `client/src/data/mockLibraryData.ts`
+- Modify: `client/src/types/library.ts`
+
+**Interfaces:**
+- Consumes: `FileRecord`, `ArtifactRecord`, `SupportedArtifactContentType`, and `isSupportedArtifactContentType` from `librechat-data-provider`.
+- Produces: Library mock records whose IDs identify files/artifacts consistently and whose optional `contentType` values are accepted by the shared artifact contract.
+
+- [ ] **Step 1: Add a failing contract-alignment test**
+
+```tsx
+it('keeps mock records aligned with shared file and artifact identifiers', () => {
+  for (const item of mockLibraryItems) {
+    expect(item.id).toMatch(item.kind === 'file' ? /^file_/ : /^artifact_/);
+    if (item.contentType) {
+      expect(isSupportedArtifactContentType(item.contentType)).toBe(true);
+    }
+  }
+});
+```
+
+- [ ] **Step 2: Run the utility test and verify it fails on the `lib-*` IDs or unsupported MIME values**
+
+Run:
+
+```bash
+cd client
+npx jest src/components/Library/__tests__/libraryUtils.test.ts --runInBand --coverage=false
+```
+
+Expected: the new contract-alignment test fails against the imported mock records.
+
+- [ ] **Step 3: Type and update the mock records**
+
+Use shared types in the view model:
+
+```ts
+import type { ArtifactRecord, FileRecord, SupportedArtifactContentType } from 'librechat-data-provider';
+
+export interface LibraryItem {
+  id: FileRecord['id'] | ArtifactRecord['id'];
+  name: FileRecord['name'] | ArtifactRecord['name'];
+  contentType?: SupportedArtifactContentType;
+}
+```
+
+Rename `mimeType` to `contentType`, change file IDs to `file_*`, change artifact IDs to `artifact_*`, keep `contentType` only for values supported by RFC 0001, and make preview detection read `contentType`.
+
+- [ ] **Step 4: Run both focused Library suites and verify they pass**
+
+Run:
+
+```bash
+cd client
+npx jest src/components/Library/__tests__/LibraryList.test.tsx src/components/Library/__tests__/libraryUtils.test.ts --runInBand --coverage=false
+```
+
+Expected: both suites pass with zero failing tests.
+
+- [ ] **Step 5: Commit the contract alignment**
+
+```bash
+git add client/src/components/Library client/src/data/mockLibraryData.ts client/src/types/library.ts
+git commit -m "refactor: align Library mocks with artifact contracts"
+```
+
+### Task 4: Localize the Library surface and remove literal-string exemptions
+
+**Files:**
+- Modify: `client/src/components/Library/*.tsx`
+- Modify: `client/src/components/Library/libraryUtils.ts`
+- Modify: `client/src/components/Library/__tests__/LibraryList.test.tsx`
+- Modify: `client/src/components/Library/__tests__/libraryUtils.test.ts`
+- Modify: `client/src/locales/en/translation.json`
+
+**Interfaces:**
+- Consumes: `useLocalize()` and `TranslationKeys`.
+- Produces: localized labels, descriptions, counts, dates, storage text, action names, and type/sort options with English defaults in the canonical locale file.
+
+- [ ] **Step 1: Run ESLint against the imported Library files and record the literal-string red state**
+
+Run:
+
+```bash
+npx eslint 'client/src/components/Library/**/*.{ts,tsx}' 'client/src/data/mockLibraryData.ts' 'client/src/types/library.ts'
+```
+
+Expected: the imported components report literal user-facing strings or other current-main lint violations.
+
+- [ ] **Step 2: Add canonical English translation keys**
+
+Add `com_ui_library_*` keys for search, filter/sort, item types, sort choices, list counts, empty/error/loading states, storage usage, view modes, source labels, and quick actions. Reuse existing `com_ui_download`, `com_ui_share`, `com_ui_retry`, and `com_ui_clear_search` where their wording is exact.
+
+- [ ] **Step 3: Route every user-facing Library string through `useLocalize()`**
+
+`libraryUtils.ts` must store translation-key maps and accept a `LocalizeFunction` when building labels/options. Components must call `useLocalize()` and remove all `i18next/no-literal-string` disable comments. Tests must import `render` from `~/test/layout-test-utils` so Recoil/i18n providers are present.
+
+- [ ] **Step 4: Run lint and focused tests**
+
+Run:
+
+```bash
+npx eslint 'client/src/components/Library/**/*.{ts,tsx}' 'client/src/data/mockLibraryData.ts' 'client/src/types/library.ts'
+cd client
+npx jest src/components/Library/__tests__/LibraryList.test.tsx src/components/Library/__tests__/libraryUtils.test.ts --runInBand --coverage=false
+```
+
+Expected: ESLint exits zero and both focused suites pass.
+
+- [ ] **Step 5: Commit localization**
+
+```bash
+git add client/src/components/Library client/src/locales/en/translation.json
+git commit -m "feat: localize Library prototype"
+```
+
+### Task 5: Verify the current-main integration and publish the replacement PR
+
+**Files:**
+- Verify: all changed files
+- Update: PR description only through GitHub after local verification
+
+**Interfaces:**
+- Consumes: completed Library prototype and public CI commands.
+- Produces: a pushed maintainer branch and replacement PR referencing #27 and #20.
+
+- [ ] **Step 1: Run focused, full-client, build, config, and diff checks**
+
+```bash
+cd client
+npx jest src/components/Library/__tests__/LibraryList.test.tsx src/components/Library/__tests__/libraryUtils.test.ts --runInBand --coverage=false
+npm test -- --runInBand
+cd ..
+node --test bharatcode/test/config.test.mjs
+npm run frontend:ci
+git diff --check origin/main...HEAD
+git status --short
+```
+
+Expected: all commands exit zero, no test failures occur, the production runtime smoke passes, and only intended files are changed.
+
+- [ ] **Step 2: Review the commit range against this plan**
+
+```bash
+git diff --stat origin/main...HEAD
+git log --oneline --reverse origin/main..HEAD
+```
+
+Expected: four contributor-authored commits plus focused maintainer commits; no private deployment files or stale merge commit.
+
+- [ ] **Step 3: Push and create the replacement PR**
+
+```bash
+git push -u origin codex/takeover-library-ui-pr27
+gh pr create --repo BharatCode-ai/chat --base main --head codex/takeover-library-ui-pr27 --title "feat: complete accessible Library list prototype" --body-file /tmp/pr-body.md
+```
+
+The PR body must reference PR #27, close issue #20, credit the contributor commits, summarize the accessibility/action/contract/localization work, and list the exact verification commands.
+
+- [ ] **Step 4: Wait for current CI and perform final maintainer review**
+
+Expected required checks: BharatCode config tests, Gitleaks, shared packages/API build, shared packages/client build including the production-runtime smoke.

From 4d7fc8af91397bf5ee2dd7e01319caff26ca4834 Mon Sep 17 00:00:00 2001
From: manthansingh26 <manthansingh2601@gmail.com>
Date: Wed, 10 Jun 2026 21:34:58 +0530
Subject: [PATCH 2/8] feat: Add Library List UI with mocked data for issue #20

---
 .../components/Library/LibraryEmptyState.tsx  |  65 +++++++
 .../components/Library/LibraryErrorState.tsx  |  38 ++++
 .../src/components/Library/LibraryFilters.tsx | 138 +++++++++++++++
 client/src/components/Library/LibraryList.tsx | 104 +++++++++++
 .../components/Library/LibraryListItem.tsx    | 111 ++++++++++++
 .../Library/LibraryListWithMockData.tsx       |  29 ++++
 .../Library/LibraryLoadingState.tsx           |  28 +++
 .../components/Library/LibraryStorageBar.tsx  |  32 ++++
 .../Library/__tests__/LibraryList.test.tsx    |  51 ++++++
 .../Library/__tests__/libraryUtils.test.ts    | 126 ++++++++++++++
 client/src/components/Library/index.ts        |  10 ++
 client/src/components/Library/libraryUtils.ts | 164 ++++++++++++++++++
 .../components/Library/useMockLibraryData.ts  | 103 +++++++++++
 client/src/types/library.ts                   |  51 ++++++
 14 files changed, 1050 insertions(+)
 create mode 100644 client/src/components/Library/LibraryEmptyState.tsx
 create mode 100644 client/src/components/Library/LibraryErrorState.tsx
 create mode 100644 client/src/components/Library/LibraryFilters.tsx
 create mode 100644 client/src/components/Library/LibraryList.tsx
 create mode 100644 client/src/components/Library/LibraryListItem.tsx
 create mode 100644 client/src/components/Library/LibraryListWithMockData.tsx
 create mode 100644 client/src/components/Library/LibraryLoadingState.tsx
 create mode 100644 client/src/components/Library/LibraryStorageBar.tsx
 create mode 100644 client/src/components/Library/__tests__/LibraryList.test.tsx
 create mode 100644 client/src/components/Library/__tests__/libraryUtils.test.ts
 create mode 100644 client/src/components/Library/index.ts
 create mode 100644 client/src/components/Library/libraryUtils.ts
 create mode 100644 client/src/components/Library/useMockLibraryData.ts
 create mode 100644 client/src/types/library.ts

diff --git a/client/src/components/Library/LibraryEmptyState.tsx b/client/src/components/Library/LibraryEmptyState.tsx
new file mode 100644
index 0000000..54a52be
--- /dev/null
+++ b/client/src/components/Library/LibraryEmptyState.tsx
@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { FolderOpen, SearchX } from 'lucide-react';
+
+interface LibraryEmptyStateProps {
+  /** True when filters/search produced no matches but the library has items. */
+  isFiltered?: boolean;
+  onClearFilters?: () => void;
+}
+
+interface EmptyStateLayoutProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  children?: ReactNode;
+}
+
+function EmptyStateLayout({ icon: Icon, title, description, children }: EmptyStateLayoutProps) {
+  return (
+    <div
+      className="flex flex-col items-center justify-center rounded-xl border border-border-light bg-transparent px-6 py-12 text-center"
+      role="status"
+    >
+      <div className="mb-3 flex size-12 items-center justify-center rounded-full bg-surface-tertiary">
+        <Icon className="size-6 text-text-secondary" aria-hidden="true" />
+      </div>
+      <p className="text-sm font-medium text-text-primary">{title}</p>
+      <p className="mt-1 max-w-sm text-xs text-text-secondary">{description}</p>
+      {children}
+    </div>
+  );
+}
+
+export default function LibraryEmptyState({
+  isFiltered = false,
+  onClearFilters,
+}: LibraryEmptyStateProps) {
+  if (isFiltered) {
+    return (
+      <EmptyStateLayout
+        icon={SearchX}
+        title="No matching files"
+        description="Try adjusting your search or filter to find what you are looking for."
+      >
+        {onClearFilters && (
+          <button
+            type="button"
+            onClick={onClearFilters}
+            className="mt-4 rounded-lg border border-border-medium px-4 py-2 text-xs font-medium text-text-primary transition-colors hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            Clear filters
+          </button>
+        )}
+      </EmptyStateLayout>
+    );
+  }
+
+  return (
+    <EmptyStateLayout
+      icon={FolderOpen}
+      title="Your library is empty"
+      description="Files and artifacts from your conversations will appear here."
+    />
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/Library/LibraryErrorState.tsx b/client/src/components/Library/LibraryErrorState.tsx
new file mode 100644
index 0000000..434bc68
--- /dev/null
+++ b/client/src/components/Library/LibraryErrorState.tsx
@@ -0,0 +1,38 @@
+import { AlertCircle } from 'lucide-react';
+import { Button } from '@librechat/client';
+
+interface LibraryErrorStateProps {
+  message?: string;
+  onRetry?: () => void;
+}
+
+export default function LibraryErrorState({
+  message = 'Something went wrong while loading your library.',
+  onRetry,
+}: LibraryErrorStateProps) {
+  return (
+    <div
+      className="flex flex-col items-center justify-center rounded-xl border border-border-light px-6 py-12 text-center"
+      role="alert"
+      aria-live="assertive"
+    >
+      <div className="mb-3 flex size-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/20">
+        <AlertCircle className="size-6 text-red-600 dark:text-red-400" aria-hidden="true" />
+      </div>
+      <p className="text-sm font-medium text-text-primary">Unable to load library</p>
+      <p className="mt-1 max-w-sm text-xs text-text-secondary">{message}</p>
+      {onRetry && (
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={onRetry}
+          className="mt-4"
+          aria-label="Retry loading library"
+        >
+          Try again
+        </Button>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/Library/LibraryFilters.tsx b/client/src/components/Library/LibraryFilters.tsx
new file mode 100644
index 0000000..af75885
--- /dev/null
+++ b/client/src/components/Library/LibraryFilters.tsx
@@ -0,0 +1,138 @@
+import { useCallback, useEffect, useMemo, useState, type Dispatch, type SetStateAction } from 'react';
+import { Search, X } from 'lucide-react';
+import { Input, SelectDropDown } from '@librechat/client';
+import type { LibraryFiltersState } from '~/types/library';
+import { useDebounce } from '~/hooks';
+import { createDropdownSetter } from '~/utils';
+import {
+  findLibraryOption,
+  LIBRARY_SORT_OPTIONS,
+  LIBRARY_TYPE_FILTER_OPTIONS,
+  parseLibrarySortOption,
+  parseLibraryTypeFilter,
+} from './libraryUtils';
+
+interface LibraryFiltersProps {
+  filters: LibraryFiltersState;
+  onFiltersChange: Dispatch<SetStateAction<LibraryFiltersState>>;
+  resultCount: number;
+  totalCount: number;
+}
+
+export default function LibraryFilters({
+  filters,
+  onFiltersChange,
+  resultCount,
+  totalCount,
+}: LibraryFiltersProps) {
+  const [searchInput, setSearchInput] = useState(filters.search);
+  const debouncedSearch = useDebounce(searchInput, 300);
+
+  useEffect(() => {
+    setSearchInput(filters.search);
+  }, [filters.search]);
+
+  useEffect(() => {
+    if (debouncedSearch !== filters.search && debouncedSearch === searchInput) {
+      onFiltersChange((prev) => ({ ...prev, search: debouncedSearch }));
+    }
+  }, [debouncedSearch, filters.search, onFiltersChange, searchInput]);
+
+  const handleClearSearch = useCallback(() => {
+    setSearchInput('');
+    onFiltersChange((prev) => ({ ...prev, search: '' }));
+  }, [onFiltersChange]);
+
+  const selectedTypeOption = findLibraryOption(
+    LIBRARY_TYPE_FILTER_OPTIONS,
+    filters.typeFilter,
+  );
+
+  const selectedSortOption = findLibraryOption(LIBRARY_SORT_OPTIONS, filters.sortBy);
+
+  const handleTypeChange = useMemo(
+    () =>
+      createDropdownSetter((value) => {
+        const typeFilter = parseLibraryTypeFilter(value);
+        onFiltersChange((prev) =>
+          prev.typeFilter === typeFilter ? prev : { ...prev, typeFilter },
+        );
+      }),
+    [onFiltersChange],
+  );
+
+  const handleSortChange = useMemo(
+    () =>
+      createDropdownSetter((value) => {
+        const sortBy = parseLibrarySortOption(value);
+        onFiltersChange((prev) => (prev.sortBy === sortBy ? prev : { ...prev, sortBy }));
+      }),
+    [onFiltersChange],
+  );
+
+  const itemLabel = totalCount === 1 ? 'item' : 'items';
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
+        <div className="relative min-w-0 flex-1" role="search">
+          <label htmlFor="library-search" className="sr-only">
+            Search library
+          </label>
+          <Input
+            id="library-search"
+            type="search"
+            value={searchInput}
+            onChange={(event) => setSearchInput(event.target.value)}
+            placeholder="Search files and artifacts..."
+            className="h-10 rounded-lg border-border-medium bg-transparent pl-10 pr-10 text-sm text-text-primary placeholder:text-text-secondary focus:ring-0"
+            aria-label="Search library"
+            autoComplete="off"
+            spellCheck={false}
+          />
+          <Search
+            className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-text-secondary"
+            aria-hidden="true"
+          />
+          {searchInput && (
+            <button
+              type="button"
+              onClick={handleClearSearch}
+              className="absolute right-3 top-1/2 flex size-5 -translate-y-1/2 items-center justify-center rounded-full text-text-secondary transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label="Clear search"
+            >
+              <X className="size-4" aria-hidden="true" />
+            </button>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+          <div role="group" aria-label="Filter by type">
+            <SelectDropDown
+              value={selectedTypeOption}
+              setValue={handleTypeChange}
+              availableValues={LIBRARY_TYPE_FILTER_OPTIONS}
+              showAbove={false}
+              showLabel={false}
+              className="h-10 min-w-[9rem] rounded-lg text-sm"
+            />
+          </div>
+          <div role="group" aria-label="Sort library items">
+            <SelectDropDown
+              value={selectedSortOption}
+              setValue={handleSortChange}
+              availableValues={LIBRARY_SORT_OPTIONS}
+              showAbove={false}
+              showLabel={false}
+              className="h-10 min-w-[9rem] rounded-lg text-sm"
+            />
+          </div>
+        </div>
+      </div>
+
+      <p className="text-xs text-text-secondary" aria-live="polite">
+        Showing {resultCount} of {totalCount} {itemLabel}
+      </p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/Library/LibraryList.tsx b/client/src/components/Library/LibraryList.tsx
new file mode 100644
index 0000000..2058c2c
--- /dev/null
+++ b/client/src/components/Library/LibraryList.tsx
@@ -0,0 +1,104 @@
+import { useCallback, useMemo, useState } from 'react';
+import type {
+  LibraryFiltersState,
+  LibraryItem,
+  LibraryListStatus,
+  LibraryStorageInfo,
+} from '~/types/library';
+import LibraryEmptyState from './LibraryEmptyState';
+import LibraryErrorState from './LibraryErrorState';
+import LibraryFilters from './LibraryFilters';
+import LibraryListItem from './LibraryListItem';
+import LibraryLoadingState from './LibraryLoadingState';
+import LibraryStorageBar from './LibraryStorageBar';
+import { applyLibraryFilters } from './libraryUtils';
+
+const DEFAULT_FILTERS: LibraryFiltersState = {
+  search: '',
+  typeFilter: 'all',
+  sortBy: 'newest',
+};
+
+interface LibraryListProps {
+  items: LibraryItem[];
+  status: LibraryListStatus;
+  storage?: LibraryStorageInfo | null;
+  errorMessage?: string;
+  onRetry?: () => void;
+  onItemClick?: (item: LibraryItem) => void;
+  className?: string;
+}
+
+export default function LibraryList({
+  items,
+  status,
+  storage = null,
+  errorMessage,
+  onRetry,
+  onItemClick,
+  className = '',
+}: LibraryListProps) {
+  const [filters, setFilters] = useState<LibraryFiltersState>(DEFAULT_FILTERS);
+
+  const filteredItems = useMemo(
+    () => (status === 'populated' ? applyLibraryFilters(items, filters) : []),
+    [items, filters, status],
+  );
+
+  const isFiltered =
+    filters.search.trim().length > 0 || filters.typeFilter !== 'all';
+
+  const handleClearFilters = useCallback(() => {
+    setFilters(DEFAULT_FILTERS);
+  }, []);
+
+  if (status === 'loading') {
+    return (
+      <div className={className}>
+        <LibraryLoadingState />
+      </div>
+    );
+  }
+
+  if (status === 'error') {
+    return (
+      <div className={className}>
+        <LibraryErrorState message={errorMessage} onRetry={onRetry} />
+      </div>
+    );
+  }
+
+  if (status === 'empty') {
+    return (
+      <div className={className}>
+        {storage && <LibraryStorageBar storage={storage} />}
+        <div className={storage ? 'mt-4' : ''}>
+          <LibraryEmptyState />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex flex-col gap-4 ${className}`}>
+      {storage && <LibraryStorageBar storage={storage} />}
+
+      <LibraryFilters
+        filters={filters}
+        onFiltersChange={setFilters}
+        resultCount={filteredItems.length}
+        totalCount={items.length}
+      />
+
+      {filteredItems.length === 0 ? (
+        <LibraryEmptyState isFiltered={isFiltered} onClearFilters={handleClearFilters} />
+      ) : (
+        <div className="flex flex-col gap-2" role="list" aria-label="Library items">
+          {filteredItems.map((item) => (
+            <LibraryListItem key={item.id} item={item} onClick={onItemClick} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/Library/LibraryListItem.tsx b/client/src/components/Library/LibraryListItem.tsx
new file mode 100644
index 0000000..1475f68
--- /dev/null
+++ b/client/src/components/Library/LibraryListItem.tsx
@@ -0,0 +1,111 @@
+import type { ComponentType } from 'react';
+import {
+  FileAudio,
+  FileCode,
+  FileImage,
+  FileSpreadsheet,
+  FileText,
+  FileVideo,
+  Sparkles,
+} from 'lucide-react';
+import type { LibraryItem, LibraryItemType } from '~/types/library';
+import { cn } from '~/utils';
+import {
+  formatLibraryDate,
+  formatLibraryFileSize,
+  LIBRARY_TYPE_LABELS,
+} from './libraryUtils';
+
+interface LibraryListItemProps {
+  item: LibraryItem;
+  onClick?: (item: LibraryItem) => void;
+}
+
+const TYPE_ICON_MAP: Record<LibraryItemType, ComponentType<{ className?: string }>> = {
+  pdf: FileText,
+  image: FileImage,
+  video: FileVideo,
+  document: FileText,
+  code: FileCode,
+  spreadsheet: FileSpreadsheet,
+  audio: FileAudio,
+  artifact: Sparkles,
+};
+
+const TYPE_COLOR_MAP: Record<LibraryItemType, string> = {
+  pdf: 'text-red-500',
+  image: 'text-pink-500',
+  video: 'text-purple-500',
+  document: 'text-blue-500',
+  code: 'text-orange-500',
+  spreadsheet: 'text-emerald-500',
+  audio: 'text-amber-500',
+  artifact: 'text-violet-500',
+};
+
+const itemRowClassName =
+  'flex w-full items-center gap-3 rounded-lg border border-border-light bg-surface-primary px-4 py-3 text-left transition-colors';
+
+export default function LibraryListItem({ item, onClick }: LibraryListItemProps) {
+  const Icon = TYPE_ICON_MAP[item.type];
+  const iconColor = TYPE_COLOR_MAP[item.type];
+  const ariaLabel = `${item.name}, ${LIBRARY_TYPE_LABELS[item.type]}, ${formatLibraryFileSize(item.sizeBytes)}`;
+
+  const content = (
+    <>
+      <div
+        className={cn(
+          'flex size-10 shrink-0 items-center justify-center rounded-lg bg-surface-tertiary',
+          iconColor,
+        )}
+        aria-hidden="true"
+      >
+        <Icon className="size-5" />
+      </div>
+
+      <div className="min-w-0 flex-1">
+        <div className="flex items-start justify-between gap-2">
+          <p className="truncate text-sm font-medium text-text-primary">{item.name}</p>
+          <span className="shrink-0 text-xs text-text-secondary">
+            {formatLibraryFileSize(item.sizeBytes)}
+          </span>
+        </div>
+        <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-text-secondary">
+          <span className="rounded bg-surface-tertiary px-1.5 py-0.5 font-medium">
+            {LIBRARY_TYPE_LABELS[item.type]}
+          </span>
+          <span className="capitalize">{item.kind}</span>
+          <span aria-hidden="true">·</span>
+          <time dateTime={item.createdAt}>{formatLibraryDate(item.createdAt)}</time>
+        </div>
+        {item.description && (
+          <p className="mt-1 truncate text-xs text-text-secondary">{item.description}</p>
+        )}
+      </div>
+    </>
+  );
+
+  if (onClick) {
+    return (
+      <div role="listitem">
+        <button
+          type="button"
+          onClick={() => onClick(item)}
+          className={cn(
+            itemRowClassName,
+            'cursor-pointer hover:border-border-medium hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          )}
+          aria-label={ariaLabel}
+        >
+          {content}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div role="listitem" className={itemRowClassName} aria-label={ariaLabel}>
+      {content}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/Library/LibraryListWithMockData.tsx b/client/src/components/Library/LibraryListWithMockData.tsx
new file mode 100644
index 0000000..1a08a7c
--- /dev/null
+++ b/client/src/components/Library/LibraryListWithMockData.tsx
@@ -0,0 +1,29 @@
+import LibraryList from './LibraryList';
+import { useMockLibraryData, type MockLibraryScenario } from './useMockLibraryData';
+
+interface LibraryListWithMockDataProps {
+  scenario?: MockLibraryScenario;
+  className?: string;
+}
+
+/**
+ * Convenience wrapper that wires LibraryList to the mock data hook.
+ * Drop-in component for development until the real API is integrated.
+ */
+export default function LibraryListWithMockData({
+  scenario = 'success',
+  className,
+}: LibraryListWithMockDataProps) {
+  const { items, storage, status, errorMessage, refetch } = useMockLibraryData({ scenario });
+
+  return (
+    <LibraryList
+      items={items}
+      status={status}
+      storage={storage}
+      errorMessage={errorMessage ?? undefined}
+      onRetry={refetch}
+      className={className}
+    />
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/Library/LibraryLoadingState.tsx b/client/src/components/Library/LibraryLoadingState.tsx
new file mode 100644
index 0000000..e9d81ad
--- /dev/null
+++ b/client/src/components/Library/LibraryLoadingState.tsx
@@ -0,0 +1,28 @@
+import { Skeleton } from '@librechat/client';
+
+const SKELETON_ROWS = 6;
+
+export default function LibraryLoadingState() {
+  return (
+    <div
+      className="flex flex-col gap-3"
+      role="status"
+      aria-live="polite"
+      aria-label="Loading library"
+    >
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <Skeleton className="h-10 w-full max-w-md rounded-lg" />
+        <div className="flex gap-2">
+          <Skeleton className="h-10 w-36 rounded-lg" />
+          <Skeleton className="h-10 w-36 rounded-lg" />
+        </div>
+      </div>
+      <Skeleton className="h-4 w-48 rounded" />
+      <div className="flex flex-col gap-2">
+        {Array.from({ length: SKELETON_ROWS }).map((_, index) => (
+          <Skeleton key={index} className="h-16 w-full rounded-lg" />
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/Library/LibraryStorageBar.tsx b/client/src/components/Library/LibraryStorageBar.tsx
new file mode 100644
index 0000000..bfa054e
--- /dev/null
+++ b/client/src/components/Library/LibraryStorageBar.tsx
@@ -0,0 +1,32 @@
+import { Progress } from '@librechat/client';
+import type { LibraryStorageInfo } from '~/types/library';
+import {
+  formatLibraryFileSize,
+  getStorageUsagePercent,
+} from './libraryUtils';
+
+interface LibraryStorageBarProps {
+  storage: LibraryStorageInfo;
+}
+
+export default function LibraryStorageBar({ storage }: LibraryStorageBarProps) {
+  const percent = getStorageUsagePercent(storage.usedBytes, storage.totalBytes);
+
+  return (
+    <div className="rounded-lg border border-border-light bg-surface-tertiary/50 px-4 py-3">
+      <div className="mb-2 flex items-center justify-between text-xs">
+        <span className="font-medium text-text-primary">Storage</span>
+        <span className="text-text-secondary">
+          {formatLibraryFileSize(storage.usedBytes)} of {formatLibraryFileSize(storage.totalBytes)}{' '}
+          used
+        </span>
+      </div>
+      <Progress
+        value={percent}
+        className="h-2 bg-surface-secondary"
+        aria-label={`Storage ${percent}% used`}
+      />
+      <p className="mt-1.5 text-right text-xs text-text-secondary">{percent}%</p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/Library/__tests__/LibraryList.test.tsx b/client/src/components/Library/__tests__/LibraryList.test.tsx
new file mode 100644
index 0000000..b5e8b95
--- /dev/null
+++ b/client/src/components/Library/__tests__/LibraryList.test.tsx
@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { mockLibraryItems, mockLibraryStorage } from '~/data/mockLibraryData';
+import LibraryList from '../LibraryList';
+
+jest.mock('~/hooks', () => ({
+  useDebounce: (value: string) => value,
+}));
+
+describe('LibraryList', () => {
+  it('renders loading state', () => {
+    render(<LibraryList items={[]} status="loading" />);
+    expect(screen.getByRole('status', { name: 'Loading library' })).toBeInTheDocument();
+  });
+
+  it('renders error state with retry', () => {
+    const onRetry = jest.fn();
+    render(
+      <LibraryList
+        items={[]}
+        status="error"
+        errorMessage="Network error"
+        onRetry={onRetry}
+      />,
+    );
+
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+    expect(screen.getByText('Network error')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Retry loading library' })).toBeInTheDocument();
+  });
+
+  it('renders empty state', () => {
+    render(<LibraryList items={[]} status="empty" storage={mockLibraryStorage} />);
+    expect(screen.getByText('Your library is empty')).toBeInTheDocument();
+    expect(screen.getByText(/64\.2 MB of 1\.0 GB used/)).toBeInTheDocument();
+  });
+
+  it('renders populated list with items', () => {
+    render(
+      <LibraryList
+        items={mockLibraryItems}
+        status="populated"
+        storage={mockLibraryStorage}
+      />,
+    );
+
+    expect(screen.getByRole('search')).toBeInTheDocument();
+    expect(screen.getByText(`Showing ${mockLibraryItems.length} of ${mockLibraryItems.length} items`)).toBeInTheDocument();
+    expect(screen.getByText('Q4 Financial Report.pdf')).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/client/src/components/Library/__tests__/libraryUtils.test.ts b/client/src/components/Library/__tests__/libraryUtils.test.ts
new file mode 100644
index 0000000..f37ed90
--- /dev/null
+++ b/client/src/components/Library/__tests__/libraryUtils.test.ts
@@ -0,0 +1,126 @@
+import { mockLibraryItems } from '~/data/mockLibraryData';
+import {
+  applyLibraryFilters,
+  filterLibraryItemsBySearch,
+  filterLibraryItemsByType,
+  findLibraryOption,
+  formatLibraryFileSize,
+  getStorageUsagePercent,
+  LIBRARY_SORT_OPTIONS,
+  LIBRARY_TYPE_FILTER_OPTIONS,
+  parseLibrarySortOption,
+  parseLibraryTypeFilter,
+  sortLibraryItems,
+} from '../libraryUtils';
+
+describe('libraryUtils', () => {
+  describe('formatLibraryFileSize', () => {
+    it('formats bytes', () => {
+      expect(formatLibraryFileSize(512)).toBe('512 B');
+    });
+
+    it('formats kilobytes', () => {
+      expect(formatLibraryFileSize(2048)).toBe('2.0 KB');
+    });
+
+    it('formats megabytes', () => {
+      expect(formatLibraryFileSize(2_621_440)).toBe('2.5 MB');
+    });
+  });
+
+  describe('getStorageUsagePercent', () => {
+    it('calculates percentage', () => {
+      expect(getStorageUsagePercent(50, 100)).toBe(50);
+    });
+
+    it('clamps to 100', () => {
+      expect(getStorageUsagePercent(150, 100)).toBe(100);
+    });
+  });
+
+  describe('filterLibraryItemsBySearch', () => {
+    it('returns all items for empty search', () => {
+      expect(filterLibraryItemsBySearch(mockLibraryItems, '')).toHaveLength(mockLibraryItems.length);
+    });
+
+    it('filters by name case-insensitively', () => {
+      const results = filterLibraryItemsBySearch(mockLibraryItems, 'pdf');
+      expect(results.every((item) => item.name.toLowerCase().includes('pdf') || item.description?.toLowerCase().includes('pdf'))).toBe(true);
+    });
+  });
+
+  describe('filterLibraryItemsByType', () => {
+    it('returns all items for "all" filter', () => {
+      expect(filterLibraryItemsByType(mockLibraryItems, 'all')).toHaveLength(mockLibraryItems.length);
+    });
+
+    it('filters by type', () => {
+      const results = filterLibraryItemsByType(mockLibraryItems, 'image');
+      expect(results.every((item) => item.type === 'image')).toBe(true);
+    });
+  });
+
+  describe('sortLibraryItems', () => {
+    it('sorts by newest first', () => {
+      const sorted = sortLibraryItems(mockLibraryItems, 'newest');
+      expect(new Date(sorted[0].createdAt).getTime()).toBeGreaterThanOrEqual(
+        new Date(sorted[1].createdAt).getTime(),
+      );
+    });
+
+    it('sorts by name', () => {
+      const sorted = sortLibraryItems(mockLibraryItems, 'name');
+      expect(sorted[0].name.localeCompare(sorted[1].name)).toBeLessThanOrEqual(0);
+    });
+
+    it('sorts by size descending', () => {
+      const sorted = sortLibraryItems(mockLibraryItems, 'size');
+      expect(sorted[0].sizeBytes).toBeGreaterThanOrEqual(sorted[1].sizeBytes);
+    });
+  });
+
+  describe('applyLibraryFilters', () => {
+    it('combines search, type filter, and sort', () => {
+      const results = applyLibraryFilters(mockLibraryItems, {
+        search: 'api',
+        typeFilter: 'code',
+        sortBy: 'name',
+      });
+
+      expect(results).toHaveLength(1);
+      expect(results[0].name).toBe('api-client.ts');
+    });
+  });
+
+  describe('parseLibraryTypeFilter', () => {
+    it('returns valid type filters unchanged', () => {
+      expect(parseLibraryTypeFilter('pdf')).toBe('pdf');
+      expect(parseLibraryTypeFilter('all')).toBe('all');
+    });
+
+    it('falls back to all for invalid values', () => {
+      expect(parseLibraryTypeFilter('invalid')).toBe('all');
+    });
+  });
+
+  describe('parseLibrarySortOption', () => {
+    it('returns valid sort options unchanged', () => {
+      expect(parseLibrarySortOption('name')).toBe('name');
+      expect(parseLibrarySortOption('newest')).toBe('newest');
+    });
+
+    it('falls back to newest for invalid values', () => {
+      expect(parseLibrarySortOption('invalid')).toBe('newest');
+    });
+  });
+
+  describe('findLibraryOption', () => {
+    it('finds matching option by value', () => {
+      expect(findLibraryOption(LIBRARY_TYPE_FILTER_OPTIONS, 'pdf').label).toBe('PDF');
+    });
+
+    it('returns fallback option when value is missing', () => {
+      expect(findLibraryOption(LIBRARY_SORT_OPTIONS, 'missing').value).toBe('newest');
+    });
+  });
+});
\ No newline at end of file
diff --git a/client/src/components/Library/index.ts b/client/src/components/Library/index.ts
new file mode 100644
index 0000000..58db893
--- /dev/null
+++ b/client/src/components/Library/index.ts
@@ -0,0 +1,10 @@
+export { default as LibraryList } from './LibraryList';
+export { default as LibraryListItem } from './LibraryListItem';
+export { default as LibraryFilters } from './LibraryFilters';
+export { default as LibraryEmptyState } from './LibraryEmptyState';
+export { default as LibraryLoadingState } from './LibraryLoadingState';
+export { default as LibraryErrorState } from './LibraryErrorState';
+export { default as LibraryStorageBar } from './LibraryStorageBar';
+export { default as LibraryListWithMockData } from './LibraryListWithMockData';
+export { useMockLibraryData } from './useMockLibraryData';
+export * from './libraryUtils';
\ No newline at end of file
diff --git a/client/src/components/Library/libraryUtils.ts b/client/src/components/Library/libraryUtils.ts
new file mode 100644
index 0000000..b7bf004
--- /dev/null
+++ b/client/src/components/Library/libraryUtils.ts
@@ -0,0 +1,164 @@
+import type { Option } from '~/common';
+import type {
+  LibraryFiltersState,
+  LibraryItem,
+  LibraryItemType,
+  LibrarySortOption,
+  LibraryTypeFilter,
+} from '~/types/library';
+
+/** Human-readable labels for each library item type. */
+export const LIBRARY_TYPE_LABELS: Record<LibraryItemType, string> = {
+  pdf: 'PDF',
+  image: 'Image',
+  video: 'Video',
+  document: 'Document',
+  code: 'Code',
+  spreadsheet: 'Spreadsheet',
+  audio: 'Audio',
+  artifact: 'Artifact',
+};
+
+/** Sort option labels for the sort dropdown. */
+export const LIBRARY_SORT_LABELS: Record<LibrarySortOption, string> = {
+  newest: 'Newest first',
+  oldest: 'Oldest first',
+  name: 'Name (A–Z)',
+  size: 'Size (largest)',
+};
+
+/** All filterable types in display order. */
+export const LIBRARY_FILTER_TYPES: LibraryItemType[] = [
+  'pdf',
+  'image',
+  'video',
+  'document',
+  'code',
+  'spreadsheet',
+  'audio',
+  'artifact',
+];
+
+const LIBRARY_TYPE_FILTER_VALUES = new Set<string>(['all', ...LIBRARY_FILTER_TYPES]);
+const LIBRARY_SORT_OPTION_VALUES = new Set<string>(Object.keys(LIBRARY_SORT_LABELS));
+
+/** Dropdown options for the type filter control. */
+export const LIBRARY_TYPE_FILTER_OPTIONS: Option[] = [
+  { value: 'all', label: 'All types' },
+  ...LIBRARY_FILTER_TYPES.map((type) => ({
+    value: type,
+    label: LIBRARY_TYPE_LABELS[type],
+  })),
+];
+
+/** Dropdown options for the sort control. */
+export const LIBRARY_SORT_OPTIONS: Option[] = (
+  Object.entries(LIBRARY_SORT_LABELS) as [LibrarySortOption, string][]
+).map(([value, label]) => ({ value, label }));
+
+/** Resolves a dropdown value to a valid type filter, falling back to `all`. */
+export function parseLibraryTypeFilter(value: string): LibraryTypeFilter {
+  return LIBRARY_TYPE_FILTER_VALUES.has(value) ? (value as LibraryTypeFilter) : 'all';
+}
+
+/** Resolves a dropdown value to a valid sort option, falling back to `newest`. */
+export function parseLibrarySortOption(value: string): LibrarySortOption {
+  return LIBRARY_SORT_OPTION_VALUES.has(value) ? (value as LibrarySortOption) : 'newest';
+}
+
+/** Finds the matching dropdown option or returns the fallback entry. */
+export function findLibraryOption(
+  options: Option[],
+  value: string,
+  fallbackIndex = 0,
+): Option {
+  return options.find((option) => String(option.value) === value) ?? options[fallbackIndex];
+}
+
+/** Formats byte count into a readable string with unit suffix. */
+export function formatLibraryFileSize(bytes: number): string {
+  if (bytes >= 1_073_741_824) {
+    return `${(bytes / 1_073_741_824).toFixed(1)} GB`;
+  }
+  if (bytes >= 1_048_576) {
+    return `${(bytes / 1_048_576).toFixed(1)} MB`;
+  }
+  if (bytes >= 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  }
+  return `${bytes} B`;
+}
+
+/** Formats an ISO date string for list display. */
+export function formatLibraryDate(isoDate: string): string {
+  return new Intl.DateTimeFormat(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  }).format(new Date(isoDate));
+}
+
+/** Returns the storage usage percentage, clamped to 0–100. */
+export function getStorageUsagePercent(usedBytes: number, totalBytes: number): number {
+  if (totalBytes <= 0) {
+    return 0;
+  }
+  return Math.min(100, Math.round((usedBytes / totalBytes) * 100));
+}
+
+/** Filters items by case-insensitive search across name and description. */
+export function filterLibraryItemsBySearch(items: LibraryItem[], search: string): LibraryItem[] {
+  const query = search.trim().toLowerCase();
+  if (!query) {
+    return items;
+  }
+
+  return items.filter(
+    (item) =>
+      item.name.toLowerCase().includes(query) ||
+      item.description?.toLowerCase().includes(query),
+  );
+}
+
+/** Filters items by content type. */
+export function filterLibraryItemsByType(
+  items: LibraryItem[],
+  typeFilter: LibraryTypeFilter,
+): LibraryItem[] {
+  if (typeFilter === 'all') {
+    return items;
+  }
+  return items.filter((item) => item.type === typeFilter);
+}
+
+/** Sorts items by the selected sort option. */
+export function sortLibraryItems(items: LibraryItem[], sortBy: LibrarySortOption): LibraryItem[] {
+  const sorted = [...items];
+
+  switch (sortBy) {
+    case 'newest':
+      return sorted.sort(
+        (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+      );
+    case 'oldest':
+      return sorted.sort(
+        (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+      );
+    case 'name':
+      return sorted.sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }));
+    case 'size':
+      return sorted.sort((a, b) => b.sizeBytes - a.sizeBytes);
+    default:
+      return sorted;
+  }
+}
+
+/** Applies search, type filter, and sort in sequence. */
+export function applyLibraryFilters(
+  items: LibraryItem[],
+  filters: LibraryFiltersState,
+): LibraryItem[] {
+  const searched = filterLibraryItemsBySearch(items, filters.search);
+  const filtered = filterLibraryItemsByType(searched, filters.typeFilter);
+  return sortLibraryItems(filtered, filters.sortBy);
+}
\ No newline at end of file
diff --git a/client/src/components/Library/useMockLibraryData.ts b/client/src/components/Library/useMockLibraryData.ts
new file mode 100644
index 0000000..f89498e
--- /dev/null
+++ b/client/src/components/Library/useMockLibraryData.ts
@@ -0,0 +1,103 @@
+import { useCallback, useEffect, useState } from 'react';
+import { mockLibraryResponse } from '~/data/mockLibraryData';
+import type {
+  LibraryItem,
+  LibraryListStatus,
+  LibraryStorageInfo,
+} from '~/types/library';
+
+const MOCK_LOAD_DELAY_MS = 800;
+
+export type MockLibraryScenario = 'success' | 'empty' | 'error';
+
+interface UseMockLibraryDataOptions {
+  /** Simulated network scenario. Defaults to `success`. */
+  scenario?: MockLibraryScenario;
+  /** Artificial delay before resolving mock data (ms). */
+  delayMs?: number;
+  /** When true, fetches on mount. Defaults to true. */
+  autoFetch?: boolean;
+}
+
+interface UseMockLibraryDataResult {
+  items: LibraryItem[];
+  storage: LibraryStorageInfo | null;
+  status: LibraryListStatus;
+  errorMessage: string | null;
+  isLoading: boolean;
+  refetch: () => void;
+}
+
+/**
+ * Simulates an async library API call with mocked data.
+ * Useful for development and Storybook-style previews before the real API exists.
+ */
+export function useMockLibraryData(
+  options: UseMockLibraryDataOptions = {},
+): UseMockLibraryDataResult {
+  const { scenario = 'success', delayMs = MOCK_LOAD_DELAY_MS, autoFetch = true } = options;
+
+  const [items, setItems] = useState<LibraryItem[]>([]);
+  const [storage, setStorage] = useState<LibraryStorageInfo | null>(null);
+  const [status, setStatus] = useState<LibraryListStatus>('loading');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [fetchKey, setFetchKey] = useState(0);
+
+  const refetch = useCallback(() => {
+    setFetchKey((key) => key + 1);
+  }, []);
+
+  useEffect(() => {
+    if (!autoFetch) {
+      return;
+    }
+
+    let cancelled = false;
+
+    const load = async () => {
+      setStatus('loading');
+      setErrorMessage(null);
+
+      await new Promise((resolve) => setTimeout(resolve, delayMs));
+
+      if (cancelled) {
+        return;
+      }
+
+      if (scenario === 'error') {
+        setItems([]);
+        setStorage(null);
+        setStatus('error');
+        setErrorMessage('Failed to connect to the library service. Please try again.');
+        return;
+      }
+
+      if (scenario === 'empty') {
+        setItems([]);
+        setStorage(mockLibraryResponse.storage);
+        setStatus('empty');
+        return;
+      }
+
+      const response = mockLibraryResponse;
+      setItems(response.items);
+      setStorage(response.storage);
+      setStatus(response.items.length > 0 ? 'populated' : 'empty');
+    };
+
+    load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [autoFetch, delayMs, scenario, fetchKey]);
+
+  return {
+    items,
+    storage,
+    status,
+    errorMessage,
+    isLoading: status === 'loading',
+    refetch,
+  };
+}
\ No newline at end of file
diff --git a/client/src/types/library.ts b/client/src/types/library.ts
new file mode 100644
index 0000000..e03e56e
--- /dev/null
+++ b/client/src/types/library.ts
@@ -0,0 +1,51 @@
+/** Supported library item content types for filtering. */
+export type LibraryItemType =
+  | 'pdf'
+  | 'image'
+  | 'video'
+  | 'document'
+  | 'code'
+  | 'spreadsheet'
+  | 'audio'
+  | 'artifact';
+
+/** Distinguishes uploaded files from generated artifacts. */
+export type LibraryItemKind = 'file' | 'artifact';
+
+/** Available sort options for the library list. */
+export type LibrarySortOption = 'newest' | 'oldest' | 'name' | 'size';
+
+/** UI state for the library list container. */
+export type LibraryListStatus = 'loading' | 'empty' | 'populated' | 'error';
+
+/** Type filter value — `all` shows every item. */
+export type LibraryTypeFilter = LibraryItemType | 'all';
+
+export interface LibraryItem {
+  id: string;
+  name: string;
+  type: LibraryItemType;
+  kind: LibraryItemKind;
+  sizeBytes: number;
+  createdAt: string;
+  updatedAt?: string;
+  description?: string;
+  conversationId?: string;
+  mimeType?: string;
+}
+
+export interface LibraryStorageInfo {
+  usedBytes: number;
+  totalBytes: number;
+}
+
+export interface LibraryFiltersState {
+  search: string;
+  typeFilter: LibraryTypeFilter;
+  sortBy: LibrarySortOption;
+}
+
+export interface LibraryListResponse {
+  items: LibraryItem[];
+  storage: LibraryStorageInfo | null;
+}
\ No newline at end of file

From 67f17f9cafceb2d1a107b7326385ddf16fd9320b Mon Sep 17 00:00:00 2001
From: manthansingh26 <manthansingh2601@gmail.com>
Date: Thu, 11 Jun 2026 12:59:39 +0530
Subject: [PATCH 3/8] fix: include mockLibraryData.ts so Library List tests
 work in CI and fresh clones

---
 .gitignore                         |   2 +-
 client/src/data/mockLibraryData.ts | 147 +++++++++++++++++++++++++++++
 2 files changed, 148 insertions(+), 1 deletion(-)
 create mode 100644 client/src/data/mockLibraryData.ts

diff --git a/.gitignore b/.gitignore
index c4931cd..5aa1bff 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,7 +3,7 @@
 # Logs
 data-node
 meili_data*
-data/
+/data/
 logs
 *.log
 
diff --git a/client/src/data/mockLibraryData.ts b/client/src/data/mockLibraryData.ts
new file mode 100644
index 0000000..e8fe8a5
--- /dev/null
+++ b/client/src/data/mockLibraryData.ts
@@ -0,0 +1,147 @@
+import type { LibraryItem, LibraryListResponse, LibraryStorageInfo } from '~/types/library';
+
+/** Mock library items covering all supported types and both kinds. */
+export const mockLibraryItems: LibraryItem[] = [
+  {
+    id: 'lib-001',
+    name: 'Q4 Financial Report.pdf',
+    type: 'pdf',
+    kind: 'file',
+    sizeBytes: 2_458_880,
+    createdAt: '2026-05-28T14:22:00.000Z',
+    description: 'Quarterly financial summary and projections',
+    mimeType: 'application/pdf',
+  },
+  {
+    id: 'lib-002',
+    name: 'product-mockup-v3.png',
+    type: 'image',
+    kind: 'file',
+    sizeBytes: 1_572_864,
+    createdAt: '2026-06-01T09:15:00.000Z',
+    description: 'Latest product UI mockup',
+    mimeType: 'image/png',
+  },
+  {
+    id: 'lib-003',
+    name: 'onboarding-demo.mp4',
+    type: 'video',
+    kind: 'file',
+    sizeBytes: 45_875_200,
+    createdAt: '2026-05-15T11:30:00.000Z',
+    description: 'Product onboarding walkthrough',
+    mimeType: 'video/mp4',
+  },
+  {
+    id: 'lib-004',
+    name: 'Project Proposal.docx',
+    type: 'document',
+    kind: 'file',
+    sizeBytes: 524_288,
+    createdAt: '2026-04-20T16:45:00.000Z',
+    description: 'Client project proposal draft',
+    mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  },
+  {
+    id: 'lib-005',
+    name: 'api-client.ts',
+    type: 'code',
+    kind: 'artifact',
+    sizeBytes: 12_400,
+    createdAt: '2026-06-08T08:10:00.000Z',
+    description: 'Generated TypeScript API client',
+    conversationId: 'conv-abc123',
+    mimeType: 'text/typescript',
+  },
+  {
+    id: 'lib-006',
+    name: 'sales-data-2026.xlsx',
+    type: 'spreadsheet',
+    kind: 'file',
+    sizeBytes: 892_160,
+    createdAt: '2026-05-02T13:00:00.000Z',
+    description: 'Annual sales data export',
+    mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  },
+  {
+    id: 'lib-007',
+    name: 'meeting-recording.mp3',
+    type: 'audio',
+    kind: 'file',
+    sizeBytes: 8_388_608,
+    createdAt: '2026-03-18T10:20:00.000Z',
+    description: 'Team standup recording',
+    mimeType: 'audio/mpeg',
+  },
+  {
+    id: 'lib-008',
+    name: 'dashboard-component.tsx',
+    type: 'artifact',
+    kind: 'artifact',
+    sizeBytes: 18_750,
+    createdAt: '2026-06-09T17:45:00.000Z',
+    description: 'React dashboard component generated in chat',
+    conversationId: 'conv-def456',
+    mimeType: 'text/typescript',
+  },
+  {
+    id: 'lib-009',
+    name: 'architecture-diagram.pdf',
+    type: 'pdf',
+    kind: 'file',
+    sizeBytes: 1_048_576,
+    createdAt: '2026-02-10T12:00:00.000Z',
+    description: 'System architecture overview',
+    mimeType: 'application/pdf',
+  },
+  {
+    id: 'lib-010',
+    name: 'utils.py',
+    type: 'code',
+    kind: 'artifact',
+    sizeBytes: 6_200,
+    createdAt: '2026-06-07T14:30:00.000Z',
+    description: 'Python utility functions',
+    conversationId: 'conv-ghi789',
+    mimeType: 'text/x-python',
+  },
+  {
+    id: 'lib-011',
+    name: 'team-photo.jpg',
+    type: 'image',
+    kind: 'file',
+    sizeBytes: 3_145_728,
+    createdAt: '2026-01-25T18:00:00.000Z',
+    description: 'Company team photo',
+    mimeType: 'image/jpeg',
+  },
+  {
+    id: 'lib-012',
+    name: 'README.md',
+    type: 'document',
+    kind: 'artifact',
+    sizeBytes: 4_800,
+    createdAt: '2026-06-06T11:00:00.000Z',
+    description: 'Project documentation generated in chat',
+    conversationId: 'conv-jkl012',
+    mimeType: 'text/markdown',
+  },
+];
+
+/** Mock storage quota — 64.2 MB used of 1 GB. */
+export const mockLibraryStorage: LibraryStorageInfo = {
+  usedBytes: 67_289_344,
+  totalBytes: 1_073_741_824,
+};
+
+/** Full mock API response shape. */
+export const mockLibraryResponse: LibraryListResponse = {
+  items: mockLibraryItems,
+  storage: mockLibraryStorage,
+};
+
+/** Empty library response for testing empty state. */
+export const mockEmptyLibraryResponse: LibraryListResponse = {
+  items: [],
+  storage: { usedBytes: 0, totalBytes: 1_073_741_824 },
+};
\ No newline at end of file

From 80305a072d95c0322ba4ecb224fe41191a4ae85b Mon Sep 17 00:00:00 2001
From: manthansingh26 <manthansingh26@users.noreply.github.com>
Date: Fri, 3 Jul 2026 09:26:52 +0000
Subject: [PATCH 4/8] fix: address maintainer feedback for icons and formatting

---
 .../src/components/Library/LibraryFilters.tsx | 25 ++++++---
 .../components/Library/LibraryListItem.tsx    | 53 ++++++++++---------
 2 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/client/src/components/Library/LibraryFilters.tsx b/client/src/components/Library/LibraryFilters.tsx
index af75885..5645d15 100644
--- a/client/src/components/Library/LibraryFilters.tsx
+++ b/client/src/components/Library/LibraryFilters.tsx
@@ -1,5 +1,13 @@
-import { useCallback, useEffect, useMemo, useState, type Dispatch, type SetStateAction } from 'react';
-import { Search, X } from 'lucide-react';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from 'react';
+import { Search } from 'lucide-react';
+import { CrossIcon } from '@librechat/client';
 import { Input, SelectDropDown } from '@librechat/client';
 import type { LibraryFiltersState } from '~/types/library';
 import { useDebounce } from '~/hooks';
@@ -43,10 +51,7 @@ export default function LibraryFilters({
     onFiltersChange((prev) => ({ ...prev, search: '' }));
   }, [onFiltersChange]);
 
-  const selectedTypeOption = findLibraryOption(
-    LIBRARY_TYPE_FILTER_OPTIONS,
-    filters.typeFilter,
-  );
+  const selectedTypeOption = findLibraryOption(LIBRARY_TYPE_FILTER_OPTIONS, filters.typeFilter);
 
   const selectedSortOption = findLibraryOption(LIBRARY_SORT_OPTIONS, filters.sortBy);
 
@@ -76,9 +81,11 @@ export default function LibraryFilters({
     <div className="flex flex-col gap-3">
       <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
         <div className="relative min-w-0 flex-1" role="search">
+          {/* eslint-disable-next-line i18next/no-literal-string */}
           <label htmlFor="library-search" className="sr-only">
             Search library
           </label>
+          {}
           <Input
             id="library-search"
             type="search"
@@ -101,7 +108,7 @@ export default function LibraryFilters({
               className="absolute right-3 top-1/2 flex size-5 -translate-y-1/2 items-center justify-center rounded-full text-text-secondary transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               aria-label="Clear search"
             >
-              <X className="size-4" aria-hidden="true" />
+              <CrossIcon className="size-4" aria-hidden="true" />
             </button>
           )}
         </div>
@@ -130,9 +137,11 @@ export default function LibraryFilters({
         </div>
       </div>
 
+      {/* eslint-disable i18next/no-literal-string */}
       <p className="text-xs text-text-secondary" aria-live="polite">
         Showing {resultCount} of {totalCount} {itemLabel}
       </p>
+      {/* eslint-enable i18next/no-literal-string */}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/components/Library/LibraryListItem.tsx b/client/src/components/Library/LibraryListItem.tsx
index 1475f68..7034c8b 100644
--- a/client/src/components/Library/LibraryListItem.tsx
+++ b/client/src/components/Library/LibraryListItem.tsx
@@ -1,35 +1,35 @@
-import type { ComponentType } from 'react';
+import { FileIcon, Sparkles } from '@librechat/client';
 import {
-  FileAudio,
-  FileCode,
-  FileImage,
-  FileSpreadsheet,
-  FileText,
-  FileVideo,
-  Sparkles,
-} from 'lucide-react';
+  AudioPaths,
+  CodePaths,
+  FilePaths,
+  SheetPaths,
+  TextPaths,
+  VideoPaths,
+} from '@librechat/client';
 import type { LibraryItem, LibraryItemType } from '~/types/library';
 import { cn } from '~/utils';
-import {
-  formatLibraryDate,
-  formatLibraryFileSize,
-  LIBRARY_TYPE_LABELS,
-} from './libraryUtils';
+import { formatLibraryDate, formatLibraryFileSize, LIBRARY_TYPE_LABELS } from './libraryUtils';
 
 interface LibraryListItemProps {
   item: LibraryItem;
   onClick?: (item: LibraryItem) => void;
 }
 
-const TYPE_ICON_MAP: Record<LibraryItemType, ComponentType<{ className?: string }>> = {
-  pdf: FileText,
-  image: FileImage,
-  video: FileVideo,
-  document: FileText,
-  code: FileCode,
-  spreadsheet: FileSpreadsheet,
-  audio: FileAudio,
-  artifact: Sparkles,
+interface LibraryFileType {
+  fill: string;
+  paths: React.FC;
+  title: string;
+}
+
+const TYPE_FILE_TYPE_MAP: Record<Exclude<LibraryItemType, 'artifact'>, LibraryFileType> = {
+  pdf: { paths: TextPaths, fill: '#EF4444', title: 'PDF' },
+  image: { paths: FilePaths, fill: '#EC4899', title: 'Image' },
+  video: { paths: VideoPaths, fill: '#A855F7', title: 'Video' },
+  document: { paths: TextPaths, fill: '#3B82F6', title: 'Document' },
+  code: { paths: CodePaths, fill: '#F97316', title: 'Code' },
+  spreadsheet: { paths: SheetPaths, fill: '#10B981', title: 'Spreadsheet' },
+  audio: { paths: AudioPaths, fill: '#F59E0B', title: 'Audio' },
 };
 
 const TYPE_COLOR_MAP: Record<LibraryItemType, string> = {
@@ -47,7 +47,8 @@ const itemRowClassName =
   'flex w-full items-center gap-3 rounded-lg border border-border-light bg-surface-primary px-4 py-3 text-left transition-colors';
 
 export default function LibraryListItem({ item, onClick }: LibraryListItemProps) {
-  const Icon = TYPE_ICON_MAP[item.type];
+  const fileType = TYPE_FILE_TYPE_MAP[item.type];
+  const isArtifact = item.type === 'artifact';
   const iconColor = TYPE_COLOR_MAP[item.type];
   const ariaLabel = `${item.name}, ${LIBRARY_TYPE_LABELS[item.type]}, ${formatLibraryFileSize(item.sizeBytes)}`;
 
@@ -60,7 +61,7 @@ export default function LibraryListItem({ item, onClick }: LibraryListItemProps)
         )}
         aria-hidden="true"
       >
-        <Icon className="size-5" />
+        {isArtifact ? <Sparkles className="size-5" /> : <FileIcon fileType={fileType} />}
       </div>
 
       <div className="min-w-0 flex-1">
@@ -108,4 +109,4 @@ export default function LibraryListItem({ item, onClick }: LibraryListItemProps)
       {content}
     </div>
   );
-}
\ No newline at end of file
+}

From 16788867aa37c73a5ac1be1ddc7a94867405083b Mon Sep 17 00:00:00 2001
From: manthansingh26 <manthansingh2601@gmail.com>
Date: Sun, 5 Jul 2026 22:42:54 +0530
Subject: [PATCH 5/8] feat: add dense/preview view toggle with type-aware
 previews, clamp storage usage to 0, remove stray JSX, add interaction tests

---
 .../src/components/Library/LibraryFilters.tsx |   9 +-
 .../components/Library/LibraryItemActions.tsx |  63 +++++++
 client/src/components/Library/LibraryList.tsx |  15 ++
 .../components/Library/LibraryListItem.tsx    |  72 ++-----
 .../components/Library/LibraryPreviewCard.tsx | 177 ++++++++++++++++++
 .../components/Library/LibraryViewToggle.tsx  |  55 ++++++
 .../Library/__tests__/LibraryList.test.tsx    | 105 ++++++++++-
 .../src/components/Library/libraryTypeMeta.ts |  42 +++++
 client/src/components/Library/libraryUtils.ts |   2 +-
 client/src/types/library.ts                   |   7 +
 10 files changed, 490 insertions(+), 57 deletions(-)
 create mode 100644 client/src/components/Library/LibraryItemActions.tsx
 create mode 100644 client/src/components/Library/LibraryPreviewCard.tsx
 create mode 100644 client/src/components/Library/LibraryViewToggle.tsx
 create mode 100644 client/src/components/Library/libraryTypeMeta.ts

diff --git a/client/src/components/Library/LibraryFilters.tsx b/client/src/components/Library/LibraryFilters.tsx
index 5645d15..0165de3 100644
--- a/client/src/components/Library/LibraryFilters.tsx
+++ b/client/src/components/Library/LibraryFilters.tsx
@@ -9,7 +9,7 @@ import {
 import { Search } from 'lucide-react';
 import { CrossIcon } from '@librechat/client';
 import { Input, SelectDropDown } from '@librechat/client';
-import type { LibraryFiltersState } from '~/types/library';
+import type { LibraryFiltersState, LibraryViewMode } from '~/types/library';
 import { useDebounce } from '~/hooks';
 import { createDropdownSetter } from '~/utils';
 import {
@@ -19,12 +19,15 @@ import {
   parseLibrarySortOption,
   parseLibraryTypeFilter,
 } from './libraryUtils';
+import LibraryViewToggle from './LibraryViewToggle';
 
 interface LibraryFiltersProps {
   filters: LibraryFiltersState;
   onFiltersChange: Dispatch<SetStateAction<LibraryFiltersState>>;
   resultCount: number;
   totalCount: number;
+  viewMode: LibraryViewMode;
+  onViewModeChange: (mode: LibraryViewMode) => void;
 }
 
 export default function LibraryFilters({
@@ -32,6 +35,8 @@ export default function LibraryFilters({
   onFiltersChange,
   resultCount,
   totalCount,
+  viewMode,
+  onViewModeChange,
 }: LibraryFiltersProps) {
   const [searchInput, setSearchInput] = useState(filters.search);
   const debouncedSearch = useDebounce(searchInput, 300);
@@ -85,7 +90,6 @@ export default function LibraryFilters({
           <label htmlFor="library-search" className="sr-only">
             Search library
           </label>
-          {}
           <Input
             id="library-search"
             type="search"
@@ -134,6 +138,7 @@ export default function LibraryFilters({
               className="h-10 min-w-[9rem] rounded-lg text-sm"
             />
           </div>
+          <LibraryViewToggle viewMode={viewMode} onViewModeChange={onViewModeChange} />
         </div>
       </div>
 
diff --git a/client/src/components/Library/LibraryItemActions.tsx b/client/src/components/Library/LibraryItemActions.tsx
new file mode 100644
index 0000000..c5da7b7
--- /dev/null
+++ b/client/src/components/Library/LibraryItemActions.tsx
@@ -0,0 +1,63 @@
+import { Download, ExternalLink, MoreVertical, Share2 } from 'lucide-react';
+import { cn } from '~/utils';
+
+interface LibraryItemActionsProps {
+  onOpen?: () => void;
+  onDownload?: () => void;
+  onShare?: () => void;
+  onMore?: () => void;
+  className?: string;
+}
+
+export default function LibraryItemActions({
+  onOpen,
+  onDownload,
+  onShare,
+  onMore,
+  className,
+}: LibraryItemActionsProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-0.5',
+        className,
+      )}
+      onClick={(event) => event.stopPropagation()}
+      role="group"
+      aria-label="Quick actions"
+    >
+      <button
+        type="button"
+        onClick={onOpen}
+        className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        aria-label="Open"
+      >
+        <ExternalLink className="size-4" aria-hidden="true" />
+      </button>
+      <button
+        type="button"
+        onClick={onDownload}
+        className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        aria-label="Download"
+      >
+        <Download className="size-4" aria-hidden="true" />
+      </button>
+      <button
+        type="button"
+        onClick={onShare}
+        className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        aria-label="Share"
+      >
+        <Share2 className="size-4" aria-hidden="true" />
+      </button>
+      <button
+        type="button"
+        onClick={onMore}
+        className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        aria-label="More options"
+      >
+        <MoreVertical className="size-4" aria-hidden="true" />
+      </button>
+    </div>
+  );
+}
diff --git a/client/src/components/Library/LibraryList.tsx b/client/src/components/Library/LibraryList.tsx
index 2058c2c..757f2bb 100644
--- a/client/src/components/Library/LibraryList.tsx
+++ b/client/src/components/Library/LibraryList.tsx
@@ -4,12 +4,14 @@ import type {
   LibraryItem,
   LibraryListStatus,
   LibraryStorageInfo,
+  LibraryViewMode,
 } from '~/types/library';
 import LibraryEmptyState from './LibraryEmptyState';
 import LibraryErrorState from './LibraryErrorState';
 import LibraryFilters from './LibraryFilters';
 import LibraryListItem from './LibraryListItem';
 import LibraryLoadingState from './LibraryLoadingState';
+import LibraryPreviewCard from './LibraryPreviewCard';
 import LibraryStorageBar from './LibraryStorageBar';
 import { applyLibraryFilters } from './libraryUtils';
 
@@ -39,6 +41,7 @@ export default function LibraryList({
   className = '',
 }: LibraryListProps) {
   const [filters, setFilters] = useState<LibraryFiltersState>(DEFAULT_FILTERS);
+  const [viewMode, setViewMode] = useState<LibraryViewMode>('dense');
 
   const filteredItems = useMemo(
     () => (status === 'populated' ? applyLibraryFilters(items, filters) : []),
@@ -88,10 +91,22 @@ export default function LibraryList({
         onFiltersChange={setFilters}
         resultCount={filteredItems.length}
         totalCount={items.length}
+        viewMode={viewMode}
+        onViewModeChange={setViewMode}
       />
 
       {filteredItems.length === 0 ? (
         <LibraryEmptyState isFiltered={isFiltered} onClearFilters={handleClearFilters} />
+      ) : viewMode === 'preview' ? (
+        <div
+          className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+          role="list"
+          aria-label="Library items"
+        >
+          {filteredItems.map((item) => (
+            <LibraryPreviewCard key={item.id} item={item} onClick={onItemClick} />
+          ))}
+        </div>
       ) : (
         <div className="flex flex-col gap-2" role="list" aria-label="Library items">
           {filteredItems.map((item) => (
diff --git a/client/src/components/Library/LibraryListItem.tsx b/client/src/components/Library/LibraryListItem.tsx
index 7034c8b..297c98f 100644
--- a/client/src/components/Library/LibraryListItem.tsx
+++ b/client/src/components/Library/LibraryListItem.tsx
@@ -1,53 +1,20 @@
 import { FileIcon, Sparkles } from '@librechat/client';
-import {
-  AudioPaths,
-  CodePaths,
-  FilePaths,
-  SheetPaths,
-  TextPaths,
-  VideoPaths,
-} from '@librechat/client';
-import type { LibraryItem, LibraryItemType } from '~/types/library';
+import type { LibraryItem } from '~/types/library';
 import { cn } from '~/utils';
 import { formatLibraryDate, formatLibraryFileSize, LIBRARY_TYPE_LABELS } from './libraryUtils';
+import { getLibraryFileType, TYPE_COLOR_MAP } from './libraryTypeMeta';
+import LibraryItemActions from './LibraryItemActions';
 
 interface LibraryListItemProps {
   item: LibraryItem;
   onClick?: (item: LibraryItem) => void;
 }
 
-interface LibraryFileType {
-  fill: string;
-  paths: React.FC;
-  title: string;
-}
-
-const TYPE_FILE_TYPE_MAP: Record<Exclude<LibraryItemType, 'artifact'>, LibraryFileType> = {
-  pdf: { paths: TextPaths, fill: '#EF4444', title: 'PDF' },
-  image: { paths: FilePaths, fill: '#EC4899', title: 'Image' },
-  video: { paths: VideoPaths, fill: '#A855F7', title: 'Video' },
-  document: { paths: TextPaths, fill: '#3B82F6', title: 'Document' },
-  code: { paths: CodePaths, fill: '#F97316', title: 'Code' },
-  spreadsheet: { paths: SheetPaths, fill: '#10B981', title: 'Spreadsheet' },
-  audio: { paths: AudioPaths, fill: '#F59E0B', title: 'Audio' },
-};
-
-const TYPE_COLOR_MAP: Record<LibraryItemType, string> = {
-  pdf: 'text-red-500',
-  image: 'text-pink-500',
-  video: 'text-purple-500',
-  document: 'text-blue-500',
-  code: 'text-orange-500',
-  spreadsheet: 'text-emerald-500',
-  audio: 'text-amber-500',
-  artifact: 'text-violet-500',
-};
-
 const itemRowClassName =
   'flex w-full items-center gap-3 rounded-lg border border-border-light bg-surface-primary px-4 py-3 text-left transition-colors';
 
 export default function LibraryListItem({ item, onClick }: LibraryListItemProps) {
-  const fileType = TYPE_FILE_TYPE_MAP[item.type];
+  const fileType = getLibraryFileType(item.type);
   const isArtifact = item.type === 'artifact';
   const iconColor = TYPE_COLOR_MAP[item.type];
   const ariaLabel = `${item.name}, ${LIBRARY_TYPE_LABELS[item.type]}, ${formatLibraryFileSize(item.sizeBytes)}`;
@@ -86,27 +53,28 @@ export default function LibraryListItem({ item, onClick }: LibraryListItemProps)
     </>
   );
 
-  if (onClick) {
-    return (
-      <div role="listitem">
+  return (
+    <div
+      role="listitem"
+      className={cn(
+        itemRowClassName,
+        onClick &&
+          'cursor-pointer hover:border-border-medium hover:bg-surface-hover focus-within:outline-none focus-within:ring-2 focus-within:ring-ring',
+      )}
+      aria-label={ariaLabel}
+    >
+      {onClick ? (
         <button
           type="button"
           onClick={() => onClick(item)}
-          className={cn(
-            itemRowClassName,
-            'cursor-pointer hover:border-border-medium hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-          )}
-          aria-label={ariaLabel}
+          className="flex min-w-0 flex-1 items-center gap-3 text-left focus-visible:outline-none"
         >
           {content}
         </button>
-      </div>
-    );
-  }
-
-  return (
-    <div role="listitem" className={itemRowClassName} aria-label={ariaLabel}>
-      {content}
+      ) : (
+        <div className="flex min-w-0 flex-1 items-center gap-3">{content}</div>
+      )}
+      <LibraryItemActions className="hidden shrink-0 sm:flex" />
     </div>
   );
 }
diff --git a/client/src/components/Library/LibraryPreviewCard.tsx b/client/src/components/Library/LibraryPreviewCard.tsx
new file mode 100644
index 0000000..45ba5ff
--- /dev/null
+++ b/client/src/components/Library/LibraryPreviewCard.tsx
@@ -0,0 +1,177 @@
+import { FileIcon, Sparkles } from '@librechat/client';
+import type { LibraryItem } from '~/types/library';
+import { cn } from '~/utils';
+import { formatLibraryDate, formatLibraryFileSize, LIBRARY_TYPE_LABELS } from './libraryUtils';
+import { getLibraryFileType, TYPE_COLOR_MAP } from './libraryTypeMeta';
+import LibraryItemActions from './LibraryItemActions';
+
+interface LibraryPreviewCardProps {
+  item: LibraryItem;
+  onClick?: (item: LibraryItem) => void;
+}
+
+function isPresentation(item: LibraryItem): boolean {
+  return item.name.toLowerCase().endsWith('.pptx') || item.mimeType?.includes('presentation') === true;
+}
+
+function isWordOrMarkdown(item: LibraryItem): boolean {
+  const lower = item.name.toLowerCase();
+  return lower.endsWith('.docx') || lower.endsWith('.md') || item.mimeType?.includes('wordprocessing') === true;
+}
+
+function DeckPreview() {
+  return (
+    <div className="relative flex items-center justify-center">
+      <div className="absolute left-2 top-1 h-20 w-14 rounded-md border border-border-light bg-surface-primary shadow-sm" />
+      <div className="absolute left-0 top-2 h-20 w-14 rounded-md border border-border-light bg-surface-primary shadow-sm" />
+      <div className="relative z-10 h-20 w-28 overflow-hidden rounded-md border border-border-light bg-surface-primary shadow-md">
+        <div className="h-3 w-full bg-amber-400" />
+        <div className="space-y-1.5 p-2">
+          <div className="h-2 w-3/4 rounded bg-surface-tertiary" />
+          <div className="h-2 w-1/2 rounded bg-surface-tertiary" />
+          <div className="h-2 w-2/3 rounded bg-surface-tertiary" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function DocumentPreview() {
+  return (
+    <div className="relative h-24 w-20 overflow-hidden rounded-md border border-border-light bg-surface-primary shadow-sm">
+      <div className="absolute right-0 top-0 h-5 w-5 bg-blue-500" style={{ clipPath: 'polygon(100% 0, 0 0, 100% 100%)' }} />
+      <div className="space-y-1.5 p-3 pt-4">
+        <div className="h-1.5 w-full rounded bg-surface-tertiary" />
+        <div className="h-1.5 w-5/6 rounded bg-surface-tertiary" />
+        <div className="h-1.5 w-4/5 rounded bg-surface-tertiary" />
+        <div className="h-1.5 w-3/4 rounded bg-surface-tertiary" />
+        <div className="h-1.5 w-5/6 rounded bg-surface-tertiary" />
+      </div>
+    </div>
+  );
+}
+
+function SpreadsheetPreview() {
+  return (
+    <div className="w-32 overflow-hidden rounded-md border border-border-light bg-surface-primary shadow-sm">
+      <div className="grid grid-cols-4 border-b border-border-light bg-emerald-700">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="h-4 border-r border-border-light/30 last:border-r-0" />
+        ))}
+      </div>
+      {Array.from({ length: 4 }).map((_, row) => (
+        <div key={row} className="grid grid-cols-4 border-b border-border-light last:border-b-0">
+          {Array.from({ length: 4 }).map((_, col) => (
+            <div
+              key={col}
+              className={cn(
+                'h-5 border-r border-border-light last:border-r-0',
+                col === 0 && row % 2 === 0 && 'bg-surface-tertiary/50',
+              )}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function CodePreview() {
+  const bars = [
+    'w-3/4 bg-emerald-600',
+    'w-1/2 bg-blue-500',
+    'w-5/6 bg-amber-500',
+    'w-2/3 bg-emerald-600',
+    'w-3/4 bg-blue-500',
+  ];
+  return (
+    <div className="w-36 space-y-1.5 rounded-md border border-border-light bg-surface-primary p-2.5 shadow-sm">
+      {bars.map((bar, i) => (
+        <div key={i} className={cn('h-1.5 rounded', bar)} />
+      ))}
+    </div>
+  );
+}
+
+function PreviewArea({ item }: { item: LibraryItem }) {
+  if (item.type === 'pdf' || isWordOrMarkdown(item)) {
+    return <DocumentPreview />;
+  }
+  if (item.type === 'spreadsheet') {
+    return <SpreadsheetPreview />;
+  }
+  if (item.type === 'code' || (item.mimeType && item.mimeType.includes('html'))) {
+    return <CodePreview />;
+  }
+  if (isPresentation(item)) {
+    return <DeckPreview />;
+  }
+
+  const fileType = getLibraryFileType(item.type);
+  const iconColor = TYPE_COLOR_MAP[item.type];
+  const isArtifact = item.type === 'artifact';
+
+  return (
+    <div className={cn('flex items-center justify-center', iconColor)} aria-hidden="true">
+      {isArtifact ? <Sparkles className="size-12" /> : <FileIcon fileType={fileType} className="size-12" />}
+    </div>
+  );
+}
+
+export default function LibraryPreviewCard({ item, onClick }: LibraryPreviewCardProps) {
+  const fileType = getLibraryFileType(item.type);
+  const isArtifact = item.type === 'artifact';
+  const iconColor = TYPE_COLOR_MAP[item.type];
+  const ariaLabel = `${item.name}, ${LIBRARY_TYPE_LABELS[item.type]}, ${formatLibraryFileSize(item.sizeBytes)}`;
+
+  const sourceLabel = item.conversationId ? `Chat ${item.conversationId}` : item.kind;
+
+  return (
+    <div
+      role="listitem"
+      className={cn(
+        'flex flex-col overflow-hidden rounded-lg border border-border-light bg-surface-primary transition-colors',
+        onClick && 'cursor-pointer hover:border-border-medium hover:bg-surface-hover',
+      )}
+      aria-label={ariaLabel}
+    >
+      <button
+        type="button"
+        onClick={onClick ? () => onClick(item) : undefined}
+        className="flex h-32 items-center justify-center bg-amber-50/80 p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        aria-label={onClick ? `Open ${item.name}` : undefined}
+      >
+        <PreviewArea item={item} />
+      </button>
+
+      <div className="flex flex-1 flex-col gap-2 p-3">
+        <div className="flex items-start gap-2">
+          <div className={cn('mt-0.5 shrink-0', iconColor)} aria-hidden="true">
+            {isArtifact ? <Sparkles className="size-4" /> : <FileIcon fileType={fileType} className="size-4" />}
+          </div>
+          <p className="min-w-0 flex-1 truncate text-sm font-medium text-text-primary" title={item.name}>
+            {item.name}
+          </p>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-text-secondary">
+          <span className="rounded bg-surface-tertiary px-1.5 py-0.5 font-medium text-text-primary">
+            {LIBRARY_TYPE_LABELS[item.type]}
+          </span>
+          <span className="capitalize">{sourceLabel}</span>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-text-secondary">
+          <time dateTime={item.createdAt}>{formatLibraryDate(item.createdAt)}</time>
+          <span aria-hidden="true">·</span>
+          <span>{formatLibraryFileSize(item.sizeBytes)}</span>
+        </div>
+
+        <div className="mt-auto flex items-center justify-between pt-1">
+          <span className="text-xs text-text-secondary">Quick actions</span>
+          <LibraryItemActions />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/components/Library/LibraryViewToggle.tsx b/client/src/components/Library/LibraryViewToggle.tsx
new file mode 100644
index 0000000..f46bf8c
--- /dev/null
+++ b/client/src/components/Library/LibraryViewToggle.tsx
@@ -0,0 +1,55 @@
+import { LayoutGrid, List } from 'lucide-react';
+import type { LibraryViewMode } from '~/types/library';
+import { cn } from '~/utils';
+
+interface LibraryViewToggleProps {
+  viewMode: LibraryViewMode;
+  onViewModeChange: (mode: LibraryViewMode) => void;
+  className?: string;
+}
+
+export default function LibraryViewToggle({
+  viewMode,
+  onViewModeChange,
+  className,
+}: LibraryViewToggleProps) {
+  return (
+    <div
+      className={cn(
+        'inline-flex items-center rounded-lg border border-border-light bg-surface-primary p-0.5',
+        className,
+      )}
+      role="radiogroup"
+      aria-label="Library view"
+    >
+      <button
+        type="button"
+        onClick={() => onViewModeChange('dense')}
+        aria-pressed={viewMode === 'dense'}
+        aria-label="Dense list view"
+        className={cn(
+          'inline-flex size-8 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          viewMode === 'dense'
+            ? 'bg-amber-50 text-green-800 shadow-sm'
+            : 'text-text-secondary hover:bg-surface-tertiary hover:text-text-primary',
+        )}
+      >
+        <List className="size-4" aria-hidden="true" />
+      </button>
+      <button
+        type="button"
+        onClick={() => onViewModeChange('preview')}
+        aria-pressed={viewMode === 'preview'}
+        aria-label="Preview grid view"
+        className={cn(
+          'inline-flex size-8 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          viewMode === 'preview'
+            ? 'bg-amber-50 text-green-800 shadow-sm'
+            : 'text-text-secondary hover:bg-surface-tertiary hover:text-text-primary',
+        )}
+      >
+        <LayoutGrid className="size-4" aria-hidden="true" />
+      </button>
+    </div>
+  );
+}
diff --git a/client/src/components/Library/__tests__/LibraryList.test.tsx b/client/src/components/Library/__tests__/LibraryList.test.tsx
index b5e8b95..7cc6351 100644
--- a/client/src/components/Library/__tests__/LibraryList.test.tsx
+++ b/client/src/components/Library/__tests__/LibraryList.test.tsx
@@ -1,4 +1,5 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { mockLibraryItems, mockLibraryStorage } from '~/data/mockLibraryData';
 import LibraryList from '../LibraryList';
@@ -48,4 +49,104 @@ describe('LibraryList', () => {
     expect(screen.getByText(`Showing ${mockLibraryItems.length} of ${mockLibraryItems.length} items`)).toBeInTheDocument();
     expect(screen.getByText('Q4 Financial Report.pdf')).toBeInTheDocument();
   });
-});
\ No newline at end of file
+
+  it('filters items by search query', async () => {
+    render(
+      <LibraryList
+        items={mockLibraryItems}
+        status="populated"
+        storage={mockLibraryStorage}
+      />,
+    );
+
+    const searchInput = screen.getByRole('searchbox', { name: 'Search library' });
+    await userEvent.type(searchInput, 'architecture');
+
+    expect(screen.getByText('architecture-diagram.pdf')).toBeInTheDocument();
+    expect(screen.queryByText('Q4 Financial Report.pdf')).not.toBeInTheDocument();
+    expect(screen.getByText(/Showing 1 of \d+ items/)).toBeInTheDocument();
+  });
+
+  it('filters items by type', async () => {
+    render(
+      <LibraryList
+        items={mockLibraryItems}
+        status="populated"
+        storage={mockLibraryStorage}
+      />,
+    );
+
+    const typeDropdown = screen.getByRole('button', { name: /Filter by type/i });
+    await userEvent.click(typeDropdown);
+
+    const pdfOption = await screen.findByRole('option', { name: 'PDF' });
+    await userEvent.click(pdfOption);
+
+    expect(screen.getByText('Q4 Financial Report.pdf')).toBeInTheDocument();
+    expect(screen.getByText('architecture-diagram.pdf')).toBeInTheDocument();
+    expect(screen.queryByText('product-mockup-v3.png')).not.toBeInTheDocument();
+  });
+
+  it('sorts items by name', async () => {
+    render(
+      <LibraryList
+        items={mockLibraryItems}
+        status="populated"
+        storage={mockLibraryStorage}
+      />,
+    );
+
+    const sortDropdown = screen.getByRole('button', { name: /Sort library items/i });
+    await userEvent.click(sortDropdown);
+
+    const nameOption = await screen.findByRole('option', { name: 'Name (A–Z)' });
+    await userEvent.click(nameOption);
+
+    const list = screen.getByRole('list', { name: 'Library items' });
+    const firstItem = within(list).getAllByRole('listitem')[0];
+    expect(firstItem).toHaveTextContent('README.md');
+  });
+
+  it('toggles between dense and preview views', async () => {
+    render(
+      <LibraryList
+        items={mockLibraryItems}
+        status="populated"
+        storage={mockLibraryStorage}
+      />,
+    );
+
+    const list = screen.getByRole('list', { name: 'Library items' });
+    expect(list).toHaveClass('flex-col');
+
+    const previewButton = screen.getByRole('button', { name: 'Preview grid view' });
+    await userEvent.click(previewButton);
+
+    const grid = screen.getByRole('list', { name: 'Library items' });
+    expect(grid).toHaveClass('grid');
+    expect(screen.getByText('Q4 Financial Report.pdf')).toBeInTheDocument();
+
+    const denseButton = screen.getByRole('button', { name: 'Dense list view' });
+    await userEvent.click(denseButton);
+
+    expect(screen.getByRole('list', { name: 'Library items' })).toHaveClass('flex-col');
+  });
+
+  it('renders quick actions in dense view', () => {
+    render(
+      <LibraryList
+        items={mockLibraryItems}
+        status="populated"
+        storage={mockLibraryStorage}
+      />,
+    );
+
+    const list = screen.getByRole('list', { name: 'Library items' });
+    const firstItem = within(list).getAllByRole('listitem')[0];
+
+    expect(within(firstItem).getByRole('button', { name: 'Open' })).toBeInTheDocument();
+    expect(within(firstItem).getByRole('button', { name: 'Download' })).toBeInTheDocument();
+    expect(within(firstItem).getByRole('button', { name: 'Share' })).toBeInTheDocument();
+    expect(within(firstItem).getByRole('button', { name: 'More options' })).toBeInTheDocument();
+  });
+});
diff --git a/client/src/components/Library/libraryTypeMeta.ts b/client/src/components/Library/libraryTypeMeta.ts
new file mode 100644
index 0000000..d491984
--- /dev/null
+++ b/client/src/components/Library/libraryTypeMeta.ts
@@ -0,0 +1,42 @@
+import {
+  AudioPaths,
+  CodePaths,
+  FilePaths,
+  SheetPaths,
+  TextPaths,
+  VideoPaths,
+} from '@librechat/client';
+import type { LibraryItemType } from '~/types/library';
+
+export interface LibraryFileType {
+  fill: string;
+  paths: React.FC;
+  title: string;
+}
+
+export const TYPE_FILE_TYPE_MAP: Record<Exclude<LibraryItemType, 'artifact'>, LibraryFileType> = {
+  pdf: { paths: TextPaths, fill: '#EF4444', title: 'PDF' },
+  image: { paths: FilePaths, fill: '#EC4899', title: 'Image' },
+  video: { paths: VideoPaths, fill: '#A855F7', title: 'Video' },
+  document: { paths: TextPaths, fill: '#3B82F6', title: 'Document' },
+  code: { paths: CodePaths, fill: '#F97316', title: 'Code' },
+  spreadsheet: { paths: SheetPaths, fill: '#10B981', title: 'Spreadsheet' },
+  audio: { paths: AudioPaths, fill: '#F59E0B', title: 'Audio' },
+};
+
+export const TYPE_COLOR_MAP: Record<LibraryItemType, string> = {
+  pdf: 'text-red-500',
+  image: 'text-pink-500',
+  video: 'text-purple-500',
+  document: 'text-blue-500',
+  code: 'text-orange-500',
+  spreadsheet: 'text-emerald-500',
+  audio: 'text-amber-500',
+  artifact: 'text-violet-500',
+};
+
+export function getLibraryFileType(
+  type: LibraryItemType,
+): LibraryFileType | null {
+  return type === 'artifact' ? null : TYPE_FILE_TYPE_MAP[type];
+}
diff --git a/client/src/components/Library/libraryUtils.ts b/client/src/components/Library/libraryUtils.ts
index b7bf004..0b284c5 100644
--- a/client/src/components/Library/libraryUtils.ts
+++ b/client/src/components/Library/libraryUtils.ts
@@ -103,7 +103,7 @@ export function getStorageUsagePercent(usedBytes: number, totalBytes: number): n
   if (totalBytes <= 0) {
     return 0;
   }
-  return Math.min(100, Math.round((usedBytes / totalBytes) * 100));
+  return Math.max(0, Math.min(100, Math.round((usedBytes / totalBytes) * 100)));
 }
 
 /** Filters items by case-insensitive search across name and description. */
diff --git a/client/src/types/library.ts b/client/src/types/library.ts
index e03e56e..743a53b 100644
--- a/client/src/types/library.ts
+++ b/client/src/types/library.ts
@@ -15,6 +15,9 @@ export type LibraryItemKind = 'file' | 'artifact';
 /** Available sort options for the library list. */
 export type LibrarySortOption = 'newest' | 'oldest' | 'name' | 'size';
 
+/** View modes for the library artifact list. */
+export type LibraryViewMode = 'dense' | 'preview';
+
 /** UI state for the library list container. */
 export type LibraryListStatus = 'loading' | 'empty' | 'populated' | 'error';
 
@@ -45,6 +48,10 @@ export interface LibraryFiltersState {
   sortBy: LibrarySortOption;
 }
 
+export interface LibraryViewState {
+  viewMode: LibraryViewMode;
+}
+
 export interface LibraryListResponse {
   items: LibraryItem[];
   storage: LibraryStorageInfo | null;

From 2b23bf0f89c58128bdc613242c1991d04424364f Mon Sep 17 00:00:00 2001
From: Shrey Gupta <shrey16.sg@gmail.com>
Date: Tue, 21 Jul 2026 22:29:19 +0530
Subject: [PATCH 6/8] fix: complete Library interaction semantics

---
 .../src/components/Library/LibraryFilters.tsx |  2 +
 .../components/Library/LibraryItemActions.tsx | 76 +++++++++++--------
 client/src/components/Library/LibraryList.tsx | 26 ++++++-
 .../components/Library/LibraryListItem.tsx    | 19 ++++-
 .../components/Library/LibraryPreviewCard.tsx | 40 +++++++---
 .../components/Library/LibraryViewToggle.tsx  |  2 +-
 .../Library/__tests__/LibraryList.test.tsx    | 47 ++++++++++--
 7 files changed, 156 insertions(+), 56 deletions(-)

diff --git a/client/src/components/Library/LibraryFilters.tsx b/client/src/components/Library/LibraryFilters.tsx
index 0165de3..852bd80 100644
--- a/client/src/components/Library/LibraryFilters.tsx
+++ b/client/src/components/Library/LibraryFilters.tsx
@@ -120,6 +120,7 @@ export default function LibraryFilters({
         <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
           <div role="group" aria-label="Filter by type">
             <SelectDropDown
+              title="Filter by type"
               value={selectedTypeOption}
               setValue={handleTypeChange}
               availableValues={LIBRARY_TYPE_FILTER_OPTIONS}
@@ -130,6 +131,7 @@ export default function LibraryFilters({
           </div>
           <div role="group" aria-label="Sort library items">
             <SelectDropDown
+              title="Sort library items"
               value={selectedSortOption}
               setValue={handleSortChange}
               availableValues={LIBRARY_SORT_OPTIONS}
diff --git a/client/src/components/Library/LibraryItemActions.tsx b/client/src/components/Library/LibraryItemActions.tsx
index c5da7b7..e8cfef8 100644
--- a/client/src/components/Library/LibraryItemActions.tsx
+++ b/client/src/components/Library/LibraryItemActions.tsx
@@ -16,6 +16,10 @@ export default function LibraryItemActions({
   onMore,
   className,
 }: LibraryItemActionsProps) {
+  if (!onOpen && !onDownload && !onShare && !onMore) {
+    return null;
+  }
+
   return (
     <div
       className={cn(
@@ -26,38 +30,46 @@ export default function LibraryItemActions({
       role="group"
       aria-label="Quick actions"
     >
-      <button
-        type="button"
-        onClick={onOpen}
-        className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        aria-label="Open"
-      >
-        <ExternalLink className="size-4" aria-hidden="true" />
-      </button>
-      <button
-        type="button"
-        onClick={onDownload}
-        className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        aria-label="Download"
-      >
-        <Download className="size-4" aria-hidden="true" />
-      </button>
-      <button
-        type="button"
-        onClick={onShare}
-        className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        aria-label="Share"
-      >
-        <Share2 className="size-4" aria-hidden="true" />
-      </button>
-      <button
-        type="button"
-        onClick={onMore}
-        className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        aria-label="More options"
-      >
-        <MoreVertical className="size-4" aria-hidden="true" />
-      </button>
+      {onOpen && (
+        <button
+          type="button"
+          onClick={onOpen}
+          className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          aria-label="Open"
+        >
+          <ExternalLink className="size-4" aria-hidden="true" />
+        </button>
+      )}
+      {onDownload && (
+        <button
+          type="button"
+          onClick={onDownload}
+          className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          aria-label="Download"
+        >
+          <Download className="size-4" aria-hidden="true" />
+        </button>
+      )}
+      {onShare && (
+        <button
+          type="button"
+          onClick={onShare}
+          className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          aria-label="Share"
+        >
+          <Share2 className="size-4" aria-hidden="true" />
+        </button>
+      )}
+      {onMore && (
+        <button
+          type="button"
+          onClick={onMore}
+          className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          aria-label="More options"
+        >
+          <MoreVertical className="size-4" aria-hidden="true" />
+        </button>
+      )}
     </div>
   );
 }
diff --git a/client/src/components/Library/LibraryList.tsx b/client/src/components/Library/LibraryList.tsx
index 757f2bb..417c8c9 100644
--- a/client/src/components/Library/LibraryList.tsx
+++ b/client/src/components/Library/LibraryList.tsx
@@ -28,6 +28,9 @@ interface LibraryListProps {
   errorMessage?: string;
   onRetry?: () => void;
   onItemClick?: (item: LibraryItem) => void;
+  onDownload?: (item: LibraryItem) => void;
+  onShare?: (item: LibraryItem) => void;
+  onMore?: (item: LibraryItem) => void;
   className?: string;
 }
 
@@ -38,6 +41,9 @@ export default function LibraryList({
   errorMessage,
   onRetry,
   onItemClick,
+  onDownload,
+  onShare,
+  onMore,
   className = '',
 }: LibraryListProps) {
   const [filters, setFilters] = useState<LibraryFiltersState>(DEFAULT_FILTERS);
@@ -104,16 +110,30 @@ export default function LibraryList({
           aria-label="Library items"
         >
           {filteredItems.map((item) => (
-            <LibraryPreviewCard key={item.id} item={item} onClick={onItemClick} />
+            <LibraryPreviewCard
+              key={item.id}
+              item={item}
+              onClick={onItemClick}
+              onDownload={onDownload}
+              onShare={onShare}
+              onMore={onMore}
+            />
           ))}
         </div>
       ) : (
         <div className="flex flex-col gap-2" role="list" aria-label="Library items">
           {filteredItems.map((item) => (
-            <LibraryListItem key={item.id} item={item} onClick={onItemClick} />
+            <LibraryListItem
+              key={item.id}
+              item={item}
+              onClick={onItemClick}
+              onDownload={onDownload}
+              onShare={onShare}
+              onMore={onMore}
+            />
           ))}
         </div>
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/components/Library/LibraryListItem.tsx b/client/src/components/Library/LibraryListItem.tsx
index 297c98f..da8720e 100644
--- a/client/src/components/Library/LibraryListItem.tsx
+++ b/client/src/components/Library/LibraryListItem.tsx
@@ -8,12 +8,21 @@ import LibraryItemActions from './LibraryItemActions';
 interface LibraryListItemProps {
   item: LibraryItem;
   onClick?: (item: LibraryItem) => void;
+  onDownload?: (item: LibraryItem) => void;
+  onShare?: (item: LibraryItem) => void;
+  onMore?: (item: LibraryItem) => void;
 }
 
 const itemRowClassName =
   'flex w-full items-center gap-3 rounded-lg border border-border-light bg-surface-primary px-4 py-3 text-left transition-colors';
 
-export default function LibraryListItem({ item, onClick }: LibraryListItemProps) {
+export default function LibraryListItem({
+  item,
+  onClick,
+  onDownload,
+  onShare,
+  onMore,
+}: LibraryListItemProps) {
   const fileType = getLibraryFileType(item.type);
   const isArtifact = item.type === 'artifact';
   const iconColor = TYPE_COLOR_MAP[item.type];
@@ -74,7 +83,13 @@ export default function LibraryListItem({ item, onClick }: LibraryListItemProps)
       ) : (
         <div className="flex min-w-0 flex-1 items-center gap-3">{content}</div>
       )}
-      <LibraryItemActions className="hidden shrink-0 sm:flex" />
+      <LibraryItemActions
+        onOpen={onClick ? () => onClick(item) : undefined}
+        onDownload={onDownload ? () => onDownload(item) : undefined}
+        onShare={onShare ? () => onShare(item) : undefined}
+        onMore={onMore ? () => onMore(item) : undefined}
+        className="hidden shrink-0 sm:flex"
+      />
     </div>
   );
 }
diff --git a/client/src/components/Library/LibraryPreviewCard.tsx b/client/src/components/Library/LibraryPreviewCard.tsx
index 45ba5ff..4a15994 100644
--- a/client/src/components/Library/LibraryPreviewCard.tsx
+++ b/client/src/components/Library/LibraryPreviewCard.tsx
@@ -8,6 +8,9 @@ import LibraryItemActions from './LibraryItemActions';
 interface LibraryPreviewCardProps {
   item: LibraryItem;
   onClick?: (item: LibraryItem) => void;
+  onDownload?: (item: LibraryItem) => void;
+  onShare?: (item: LibraryItem) => void;
+  onMore?: (item: LibraryItem) => void;
 }
 
 function isPresentation(item: LibraryItem): boolean {
@@ -118,7 +121,13 @@ function PreviewArea({ item }: { item: LibraryItem }) {
   );
 }
 
-export default function LibraryPreviewCard({ item, onClick }: LibraryPreviewCardProps) {
+export default function LibraryPreviewCard({
+  item,
+  onClick,
+  onDownload,
+  onShare,
+  onMore,
+}: LibraryPreviewCardProps) {
   const fileType = getLibraryFileType(item.type);
   const isArtifact = item.type === 'artifact';
   const iconColor = TYPE_COLOR_MAP[item.type];
@@ -135,14 +144,20 @@ export default function LibraryPreviewCard({ item, onClick }: LibraryPreviewCard
       )}
       aria-label={ariaLabel}
     >
-      <button
-        type="button"
-        onClick={onClick ? () => onClick(item) : undefined}
-        className="flex h-32 items-center justify-center bg-amber-50/80 p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        aria-label={onClick ? `Open ${item.name}` : undefined}
-      >
-        <PreviewArea item={item} />
-      </button>
+      {onClick ? (
+        <button
+          type="button"
+          onClick={() => onClick(item)}
+          className="flex h-32 items-center justify-center bg-amber-50/80 p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          aria-label={`Open ${item.name}`}
+        >
+          <PreviewArea item={item} />
+        </button>
+      ) : (
+        <div className="flex h-32 items-center justify-center bg-amber-50/80 p-4">
+          <PreviewArea item={item} />
+        </div>
+      )}
 
       <div className="flex flex-1 flex-col gap-2 p-3">
         <div className="flex items-start gap-2">
@@ -169,7 +184,12 @@ export default function LibraryPreviewCard({ item, onClick }: LibraryPreviewCard
 
         <div className="mt-auto flex items-center justify-between pt-1">
           <span className="text-xs text-text-secondary">Quick actions</span>
-          <LibraryItemActions />
+          <LibraryItemActions
+            onOpen={onClick ? () => onClick(item) : undefined}
+            onDownload={onDownload ? () => onDownload(item) : undefined}
+            onShare={onShare ? () => onShare(item) : undefined}
+            onMore={onMore ? () => onMore(item) : undefined}
+          />
         </div>
       </div>
     </div>
diff --git a/client/src/components/Library/LibraryViewToggle.tsx b/client/src/components/Library/LibraryViewToggle.tsx
index f46bf8c..61cf4d5 100644
--- a/client/src/components/Library/LibraryViewToggle.tsx
+++ b/client/src/components/Library/LibraryViewToggle.tsx
@@ -19,7 +19,7 @@ export default function LibraryViewToggle({
         'inline-flex items-center rounded-lg border border-border-light bg-surface-primary p-0.5',
         className,
       )}
-      role="radiogroup"
+      role="group"
       aria-label="Library view"
     >
       <button
diff --git a/client/src/components/Library/__tests__/LibraryList.test.tsx b/client/src/components/Library/__tests__/LibraryList.test.tsx
index 7cc6351..911d85b 100644
--- a/client/src/components/Library/__tests__/LibraryList.test.tsx
+++ b/client/src/components/Library/__tests__/LibraryList.test.tsx
@@ -104,7 +104,7 @@ describe('LibraryList', () => {
 
     const list = screen.getByRole('list', { name: 'Library items' });
     const firstItem = within(list).getAllByRole('listitem')[0];
-    expect(firstItem).toHaveTextContent('README.md');
+    expect(firstItem).toHaveTextContent('api-client.ts');
   });
 
   it('toggles between dense and preview views', async () => {
@@ -118,6 +118,7 @@ describe('LibraryList', () => {
 
     const list = screen.getByRole('list', { name: 'Library items' });
     expect(list).toHaveClass('flex-col');
+    expect(screen.getByRole('group', { name: 'Library view' })).toBeInTheDocument();
 
     const previewButton = screen.getByRole('button', { name: 'Preview grid view' });
     await userEvent.click(previewButton);
@@ -125,6 +126,8 @@ describe('LibraryList', () => {
     const grid = screen.getByRole('list', { name: 'Library items' });
     expect(grid).toHaveClass('grid');
     expect(screen.getByText('Q4 Financial Report.pdf')).toBeInTheDocument();
+    const firstCard = within(grid).getAllByRole('listitem')[0];
+    expect(within(firstCard).queryByRole('button')).not.toBeInTheDocument();
 
     const denseButton = screen.getByRole('button', { name: 'Dense list view' });
     await userEvent.click(denseButton);
@@ -132,7 +135,7 @@ describe('LibraryList', () => {
     expect(screen.getByRole('list', { name: 'Library items' })).toHaveClass('flex-col');
   });
 
-  it('renders quick actions in dense view', () => {
+  it('does not render quick actions without callbacks', () => {
     render(
       <LibraryList
         items={mockLibraryItems}
@@ -141,12 +144,40 @@ describe('LibraryList', () => {
       />,
     );
 
-    const list = screen.getByRole('list', { name: 'Library items' });
-    const firstItem = within(list).getAllByRole('listitem')[0];
+    expect(screen.queryByRole('group', { name: 'Quick actions' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Open' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Share' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'More options' })).not.toBeInTheDocument();
+  });
+
+  it('renders and invokes only configured quick actions', async () => {
+    const onItemClick = jest.fn();
+    const onDownload = jest.fn();
+    const onShare = jest.fn();
+    const onMore = jest.fn();
+    const item = mockLibraryItems[0];
+
+    render(
+      <LibraryList
+        items={[item]}
+        status="populated"
+        onItemClick={onItemClick}
+        onDownload={onDownload}
+        onShare={onShare}
+        onMore={onMore}
+      />,
+    );
+
+    const quickActions = screen.getByRole('group', { name: 'Quick actions' });
+    await userEvent.click(within(quickActions).getByRole('button', { name: 'Open' }));
+    await userEvent.click(within(quickActions).getByRole('button', { name: 'Download' }));
+    await userEvent.click(within(quickActions).getByRole('button', { name: 'Share' }));
+    await userEvent.click(within(quickActions).getByRole('button', { name: 'More options' }));
 
-    expect(within(firstItem).getByRole('button', { name: 'Open' })).toBeInTheDocument();
-    expect(within(firstItem).getByRole('button', { name: 'Download' })).toBeInTheDocument();
-    expect(within(firstItem).getByRole('button', { name: 'Share' })).toBeInTheDocument();
-    expect(within(firstItem).getByRole('button', { name: 'More options' })).toBeInTheDocument();
+    expect(onItemClick).toHaveBeenCalledWith(item);
+    expect(onDownload).toHaveBeenCalledWith(item);
+    expect(onShare).toHaveBeenCalledWith(item);
+    expect(onMore).toHaveBeenCalledWith(item);
   });
 });

From 85c2f3af098caecd164b47bd2b4390c52a66a9c0 Mon Sep 17 00:00:00 2001
From: Shrey Gupta <shrey16.sg@gmail.com>
Date: Tue, 21 Jul 2026 22:30:51 +0530
Subject: [PATCH 7/8] refactor: align Library mocks with artifact contracts

---
 .../components/Library/LibraryPreviewCard.tsx | 13 ++++--
 .../Library/__tests__/libraryUtils.test.ts    | 15 ++++++-
 client/src/data/mockLibraryData.ts            | 45 +++++++++----------
 client/src/types/library.ts                   | 19 +++++---
 4 files changed, 56 insertions(+), 36 deletions(-)

diff --git a/client/src/components/Library/LibraryPreviewCard.tsx b/client/src/components/Library/LibraryPreviewCard.tsx
index 4a15994..15406ad 100644
--- a/client/src/components/Library/LibraryPreviewCard.tsx
+++ b/client/src/components/Library/LibraryPreviewCard.tsx
@@ -14,12 +14,19 @@ interface LibraryPreviewCardProps {
 }
 
 function isPresentation(item: LibraryItem): boolean {
-  return item.name.toLowerCase().endsWith('.pptx') || item.mimeType?.includes('presentation') === true;
+  return (
+    item.name.toLowerCase().endsWith('.pptx') ||
+    item.contentType?.includes('presentation') === true
+  );
 }
 
 function isWordOrMarkdown(item: LibraryItem): boolean {
   const lower = item.name.toLowerCase();
-  return lower.endsWith('.docx') || lower.endsWith('.md') || item.mimeType?.includes('wordprocessing') === true;
+  return (
+    lower.endsWith('.docx') ||
+    lower.endsWith('.md') ||
+    item.contentType?.includes('wordprocessing') === true
+  );
 }
 
 function DeckPreview() {
@@ -103,7 +110,7 @@ function PreviewArea({ item }: { item: LibraryItem }) {
   if (item.type === 'spreadsheet') {
     return <SpreadsheetPreview />;
   }
-  if (item.type === 'code' || (item.mimeType && item.mimeType.includes('html'))) {
+  if (item.type === 'code' || item.contentType?.includes('html')) {
     return <CodePreview />;
   }
   if (isPresentation(item)) {
diff --git a/client/src/components/Library/__tests__/libraryUtils.test.ts b/client/src/components/Library/__tests__/libraryUtils.test.ts
index f37ed90..74dbbc4 100644
--- a/client/src/components/Library/__tests__/libraryUtils.test.ts
+++ b/client/src/components/Library/__tests__/libraryUtils.test.ts
@@ -1,3 +1,4 @@
+import { isSupportedArtifactContentType } from 'librechat-data-provider';
 import { mockLibraryItems } from '~/data/mockLibraryData';
 import {
   applyLibraryFilters,
@@ -14,6 +15,18 @@ import {
 } from '../libraryUtils';
 
 describe('libraryUtils', () => {
+  it('keeps mock records aligned with shared file and artifact identifiers', () => {
+    for (const item of mockLibraryItems) {
+      expect(item.id).toMatch(item.kind === 'file' ? /^file_/ : /^artifact_/);
+      expect(item).not.toHaveProperty('mimeType');
+
+      const contentType = (item as { contentType?: string }).contentType;
+      if (contentType) {
+        expect(isSupportedArtifactContentType(contentType)).toBe(true);
+      }
+    }
+  });
+
   describe('formatLibraryFileSize', () => {
     it('formats bytes', () => {
       expect(formatLibraryFileSize(512)).toBe('512 B');
@@ -123,4 +136,4 @@ describe('libraryUtils', () => {
       expect(findLibraryOption(LIBRARY_SORT_OPTIONS, 'missing').value).toBe('newest');
     });
   });
-});
\ No newline at end of file
+});
diff --git a/client/src/data/mockLibraryData.ts b/client/src/data/mockLibraryData.ts
index e8fe8a5..efbc555 100644
--- a/client/src/data/mockLibraryData.ts
+++ b/client/src/data/mockLibraryData.ts
@@ -3,47 +3,46 @@ import type { LibraryItem, LibraryListResponse, LibraryStorageInfo } from '~/typ
 /** Mock library items covering all supported types and both kinds. */
 export const mockLibraryItems: LibraryItem[] = [
   {
-    id: 'lib-001',
+    id: 'file_financial_report',
     name: 'Q4 Financial Report.pdf',
     type: 'pdf',
     kind: 'file',
     sizeBytes: 2_458_880,
     createdAt: '2026-05-28T14:22:00.000Z',
     description: 'Quarterly financial summary and projections',
-    mimeType: 'application/pdf',
+    contentType: 'application/pdf',
   },
   {
-    id: 'lib-002',
+    id: 'file_product_mockup',
     name: 'product-mockup-v3.png',
     type: 'image',
     kind: 'file',
     sizeBytes: 1_572_864,
     createdAt: '2026-06-01T09:15:00.000Z',
     description: 'Latest product UI mockup',
-    mimeType: 'image/png',
+    contentType: 'image/png',
   },
   {
-    id: 'lib-003',
+    id: 'file_onboarding_demo',
     name: 'onboarding-demo.mp4',
     type: 'video',
     kind: 'file',
     sizeBytes: 45_875_200,
     createdAt: '2026-05-15T11:30:00.000Z',
     description: 'Product onboarding walkthrough',
-    mimeType: 'video/mp4',
   },
   {
-    id: 'lib-004',
+    id: 'file_project_proposal',
     name: 'Project Proposal.docx',
     type: 'document',
     kind: 'file',
     sizeBytes: 524_288,
     createdAt: '2026-04-20T16:45:00.000Z',
     description: 'Client project proposal draft',
-    mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    contentType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
   },
   {
-    id: 'lib-005',
+    id: 'artifact_api_client',
     name: 'api-client.ts',
     type: 'code',
     kind: 'artifact',
@@ -51,30 +50,28 @@ export const mockLibraryItems: LibraryItem[] = [
     createdAt: '2026-06-08T08:10:00.000Z',
     description: 'Generated TypeScript API client',
     conversationId: 'conv-abc123',
-    mimeType: 'text/typescript',
   },
   {
-    id: 'lib-006',
+    id: 'file_sales_data',
     name: 'sales-data-2026.xlsx',
     type: 'spreadsheet',
     kind: 'file',
     sizeBytes: 892_160,
     createdAt: '2026-05-02T13:00:00.000Z',
     description: 'Annual sales data export',
-    mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    contentType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
   },
   {
-    id: 'lib-007',
+    id: 'file_meeting_recording',
     name: 'meeting-recording.mp3',
     type: 'audio',
     kind: 'file',
     sizeBytes: 8_388_608,
     createdAt: '2026-03-18T10:20:00.000Z',
     description: 'Team standup recording',
-    mimeType: 'audio/mpeg',
   },
   {
-    id: 'lib-008',
+    id: 'artifact_dashboard_component',
     name: 'dashboard-component.tsx',
     type: 'artifact',
     kind: 'artifact',
@@ -82,20 +79,19 @@ export const mockLibraryItems: LibraryItem[] = [
     createdAt: '2026-06-09T17:45:00.000Z',
     description: 'React dashboard component generated in chat',
     conversationId: 'conv-def456',
-    mimeType: 'text/typescript',
   },
   {
-    id: 'lib-009',
+    id: 'file_architecture_diagram',
     name: 'architecture-diagram.pdf',
     type: 'pdf',
     kind: 'file',
     sizeBytes: 1_048_576,
     createdAt: '2026-02-10T12:00:00.000Z',
     description: 'System architecture overview',
-    mimeType: 'application/pdf',
+    contentType: 'application/pdf',
   },
   {
-    id: 'lib-010',
+    id: 'artifact_python_utils',
     name: 'utils.py',
     type: 'code',
     kind: 'artifact',
@@ -103,20 +99,19 @@ export const mockLibraryItems: LibraryItem[] = [
     createdAt: '2026-06-07T14:30:00.000Z',
     description: 'Python utility functions',
     conversationId: 'conv-ghi789',
-    mimeType: 'text/x-python',
   },
   {
-    id: 'lib-011',
+    id: 'file_team_photo',
     name: 'team-photo.jpg',
     type: 'image',
     kind: 'file',
     sizeBytes: 3_145_728,
     createdAt: '2026-01-25T18:00:00.000Z',
     description: 'Company team photo',
-    mimeType: 'image/jpeg',
+    contentType: 'image/jpeg',
   },
   {
-    id: 'lib-012',
+    id: 'artifact_readme',
     name: 'README.md',
     type: 'document',
     kind: 'artifact',
@@ -124,7 +119,7 @@ export const mockLibraryItems: LibraryItem[] = [
     createdAt: '2026-06-06T11:00:00.000Z',
     description: 'Project documentation generated in chat',
     conversationId: 'conv-jkl012',
-    mimeType: 'text/markdown',
+    contentType: 'text/markdown',
   },
 ];
 
@@ -144,4 +139,4 @@ export const mockLibraryResponse: LibraryListResponse = {
 export const mockEmptyLibraryResponse: LibraryListResponse = {
   items: [],
   storage: { usedBytes: 0, totalBytes: 1_073_741_824 },
-};
\ No newline at end of file
+};
diff --git a/client/src/types/library.ts b/client/src/types/library.ts
index 743a53b..6e9e0e4 100644
--- a/client/src/types/library.ts
+++ b/client/src/types/library.ts
@@ -25,16 +25,16 @@ export type LibraryListStatus = 'loading' | 'empty' | 'populated' | 'error';
 export type LibraryTypeFilter = LibraryItemType | 'all';
 
 export interface LibraryItem {
-  id: string;
-  name: string;
+  id: FileRecord['id'] | ArtifactRecord['id'];
+  name: FileRecord['name'] | ArtifactRecord['name'];
   type: LibraryItemType;
   kind: LibraryItemKind;
-  sizeBytes: number;
-  createdAt: string;
-  updatedAt?: string;
+  sizeBytes: FileRecord['sizeBytes'];
+  createdAt: NonNullable<FileRecord['createdAt'] | ArtifactRecord['createdAt']>;
+  updatedAt?: FileRecord['updatedAt'] | ArtifactRecord['updatedAt'];
   description?: string;
   conversationId?: string;
-  mimeType?: string;
+  contentType?: SupportedArtifactContentType;
 }
 
 export interface LibraryStorageInfo {
@@ -55,4 +55,9 @@ export interface LibraryViewState {
 export interface LibraryListResponse {
   items: LibraryItem[];
   storage: LibraryStorageInfo | null;
-}
\ No newline at end of file
+}
+import type {
+  ArtifactRecord,
+  FileRecord,
+  SupportedArtifactContentType,
+} from 'librechat-data-provider';

From 628de7fe8330247940965e0c435ddb8b9d1ebe3b Mon Sep 17 00:00:00 2001
From: Shrey Gupta <shrey16.sg@gmail.com>
Date: Tue, 21 Jul 2026 22:42:12 +0530
Subject: [PATCH 8/8] feat: localize Library prototype

---
 .../components/Library/LibraryEmptyState.tsx  | 15 ++--
 .../components/Library/LibraryErrorState.tsx  | 21 +++--
 .../src/components/Library/LibraryFilters.tsx | 44 +++++-----
 .../components/Library/LibraryItemActions.tsx | 18 ++--
 client/src/components/Library/LibraryList.tsx | 82 +++++++++--------
 .../components/Library/LibraryListItem.tsx    | 24 +++--
 .../Library/LibraryListWithMockData.tsx       |  2 +-
 .../Library/LibraryLoadingState.tsx           |  7 +-
 .../components/Library/LibraryPreviewCard.tsx | 85 ++++++++++++------
 .../components/Library/LibraryStorageBar.tsx  | 20 ++---
 .../components/Library/LibraryViewToggle.tsx  |  9 +-
 .../Library/__tests__/LibraryList.test.tsx    | 64 ++++++--------
 .../Library/__tests__/libraryUtils.test.ts    | 28 ++++--
 client/src/components/Library/index.ts        |  2 +-
 .../src/components/Library/libraryTypeMeta.ts | 35 ++++++--
 client/src/components/Library/libraryUtils.ts | 88 ++++++++++---------
 .../components/Library/useMockLibraryData.ts  | 14 ++-
 client/src/locales/en/translation.json        | 43 +++++++++
 18 files changed, 366 insertions(+), 235 deletions(-)

diff --git a/client/src/components/Library/LibraryEmptyState.tsx b/client/src/components/Library/LibraryEmptyState.tsx
index 54a52be..6937b23 100644
--- a/client/src/components/Library/LibraryEmptyState.tsx
+++ b/client/src/components/Library/LibraryEmptyState.tsx
@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import type { LucideIcon } from 'lucide-react';
 import { FolderOpen, SearchX } from 'lucide-react';
+import { useLocalize } from '~/hooks';
 
 interface LibraryEmptyStateProps {
   /** True when filters/search produced no matches but the library has items. */
@@ -35,12 +36,14 @@ export default function LibraryEmptyState({
   isFiltered = false,
   onClearFilters,
 }: LibraryEmptyStateProps) {
+  const localize = useLocalize();
+
   if (isFiltered) {
     return (
       <EmptyStateLayout
         icon={SearchX}
-        title="No matching files"
-        description="Try adjusting your search or filter to find what you are looking for."
+        title={localize('com_ui_library_no_matches_title')}
+        description={localize('com_ui_library_no_matches_description')}
       >
         {onClearFilters && (
           <button
@@ -48,7 +51,7 @@ export default function LibraryEmptyState({
             onClick={onClearFilters}
             className="mt-4 rounded-lg border border-border-medium px-4 py-2 text-xs font-medium text-text-primary transition-colors hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           >
-            Clear filters
+            {localize('com_ui_library_clear_filters')}
           </button>
         )}
       </EmptyStateLayout>
@@ -58,8 +61,8 @@ export default function LibraryEmptyState({
   return (
     <EmptyStateLayout
       icon={FolderOpen}
-      title="Your library is empty"
-      description="Files and artifacts from your conversations will appear here."
+      title={localize('com_ui_library_empty_title')}
+      description={localize('com_ui_library_empty_description')}
     />
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/components/Library/LibraryErrorState.tsx b/client/src/components/Library/LibraryErrorState.tsx
index 434bc68..189c381 100644
--- a/client/src/components/Library/LibraryErrorState.tsx
+++ b/client/src/components/Library/LibraryErrorState.tsx
@@ -1,15 +1,16 @@
 import { AlertCircle } from 'lucide-react';
 import { Button } from '@librechat/client';
+import { useLocalize } from '~/hooks';
 
 interface LibraryErrorStateProps {
   message?: string;
   onRetry?: () => void;
 }
 
-export default function LibraryErrorState({
-  message = 'Something went wrong while loading your library.',
-  onRetry,
-}: LibraryErrorStateProps) {
+export default function LibraryErrorState({ message, onRetry }: LibraryErrorStateProps) {
+  const localize = useLocalize();
+  const displayMessage = message ?? localize('com_ui_library_error_default');
+
   return (
     <div
       className="flex flex-col items-center justify-center rounded-xl border border-border-light px-6 py-12 text-center"
@@ -19,8 +20,10 @@ export default function LibraryErrorState({
       <div className="mb-3 flex size-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/20">
         <AlertCircle className="size-6 text-red-600 dark:text-red-400" aria-hidden="true" />
       </div>
-      <p className="text-sm font-medium text-text-primary">Unable to load library</p>
-      <p className="mt-1 max-w-sm text-xs text-text-secondary">{message}</p>
+      <p className="text-sm font-medium text-text-primary">
+        {localize('com_ui_library_error_title')}
+      </p>
+      <p className="mt-1 max-w-sm text-xs text-text-secondary">{displayMessage}</p>
       {onRetry && (
         <Button
           type="button"
@@ -28,11 +31,11 @@ export default function LibraryErrorState({
           size="sm"
           onClick={onRetry}
           className="mt-4"
-          aria-label="Retry loading library"
+          aria-label={localize('com_ui_library_try_again')}
         >
-          Try again
+          {localize('com_ui_library_try_again')}
         </Button>
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/components/Library/LibraryFilters.tsx b/client/src/components/Library/LibraryFilters.tsx
index 852bd80..bceee45 100644
--- a/client/src/components/Library/LibraryFilters.tsx
+++ b/client/src/components/Library/LibraryFilters.tsx
@@ -10,12 +10,12 @@ import { Search } from 'lucide-react';
 import { CrossIcon } from '@librechat/client';
 import { Input, SelectDropDown } from '@librechat/client';
 import type { LibraryFiltersState, LibraryViewMode } from '~/types/library';
-import { useDebounce } from '~/hooks';
+import { useDebounce, useLocalize } from '~/hooks';
 import { createDropdownSetter } from '~/utils';
 import {
   findLibraryOption,
-  LIBRARY_SORT_OPTIONS,
-  LIBRARY_TYPE_FILTER_OPTIONS,
+  createLibrarySortOptions,
+  createLibraryTypeFilterOptions,
   parseLibrarySortOption,
   parseLibraryTypeFilter,
 } from './libraryUtils';
@@ -38,6 +38,7 @@ export default function LibraryFilters({
   viewMode,
   onViewModeChange,
 }: LibraryFiltersProps) {
+  const localize = useLocalize();
   const [searchInput, setSearchInput] = useState(filters.search);
   const debouncedSearch = useDebounce(searchInput, 300);
 
@@ -56,9 +57,12 @@ export default function LibraryFilters({
     onFiltersChange((prev) => ({ ...prev, search: '' }));
   }, [onFiltersChange]);
 
-  const selectedTypeOption = findLibraryOption(LIBRARY_TYPE_FILTER_OPTIONS, filters.typeFilter);
+  const typeFilterOptions = useMemo(() => createLibraryTypeFilterOptions(localize), [localize]);
+  const sortOptions = useMemo(() => createLibrarySortOptions(localize), [localize]);
 
-  const selectedSortOption = findLibraryOption(LIBRARY_SORT_OPTIONS, filters.sortBy);
+  const selectedTypeOption = findLibraryOption(typeFilterOptions, filters.typeFilter);
+
+  const selectedSortOption = findLibraryOption(sortOptions, filters.sortBy);
 
   const handleTypeChange = useMemo(
     () =>
@@ -80,24 +84,21 @@ export default function LibraryFilters({
     [onFiltersChange],
   );
 
-  const itemLabel = totalCount === 1 ? 'item' : 'items';
-
   return (
     <div className="flex flex-col gap-3">
       <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
         <div className="relative min-w-0 flex-1" role="search">
-          {/* eslint-disable-next-line i18next/no-literal-string */}
           <label htmlFor="library-search" className="sr-only">
-            Search library
+            {localize('com_ui_library_search')}
           </label>
           <Input
             id="library-search"
             type="search"
             value={searchInput}
             onChange={(event) => setSearchInput(event.target.value)}
-            placeholder="Search files and artifacts..."
+            placeholder={localize('com_ui_library_search_placeholder')}
             className="h-10 rounded-lg border-border-medium bg-transparent pl-10 pr-10 text-sm text-text-primary placeholder:text-text-secondary focus:ring-0"
-            aria-label="Search library"
+            aria-label={localize('com_ui_library_search')}
             autoComplete="off"
             spellCheck={false}
           />
@@ -110,7 +111,7 @@ export default function LibraryFilters({
               type="button"
               onClick={handleClearSearch}
               className="absolute right-3 top-1/2 flex size-5 -translate-y-1/2 items-center justify-center rounded-full text-text-secondary transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              aria-label="Clear search"
+              aria-label={localize('com_ui_clear_search')}
             >
               <CrossIcon className="size-4" aria-hidden="true" />
             </button>
@@ -118,23 +119,23 @@ export default function LibraryFilters({
         </div>
 
         <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
-          <div role="group" aria-label="Filter by type">
+          <div role="group" aria-label={localize('com_ui_library_filter_by_type')}>
             <SelectDropDown
-              title="Filter by type"
+              title={localize('com_ui_library_filter_by_type')}
               value={selectedTypeOption}
               setValue={handleTypeChange}
-              availableValues={LIBRARY_TYPE_FILTER_OPTIONS}
+              availableValues={typeFilterOptions}
               showAbove={false}
               showLabel={false}
               className="h-10 min-w-[9rem] rounded-lg text-sm"
             />
           </div>
-          <div role="group" aria-label="Sort library items">
+          <div role="group" aria-label={localize('com_ui_library_sort_items')}>
             <SelectDropDown
-              title="Sort library items"
+              title={localize('com_ui_library_sort_items')}
               value={selectedSortOption}
               setValue={handleSortChange}
-              availableValues={LIBRARY_SORT_OPTIONS}
+              availableValues={sortOptions}
               showAbove={false}
               showLabel={false}
               className="h-10 min-w-[9rem] rounded-lg text-sm"
@@ -144,11 +145,12 @@ export default function LibraryFilters({
         </div>
       </div>
 
-      {/* eslint-disable i18next/no-literal-string */}
       <p className="text-xs text-text-secondary" aria-live="polite">
-        Showing {resultCount} of {totalCount} {itemLabel}
+        {localize(
+          totalCount === 1 ? 'com_ui_library_items_count_one' : 'com_ui_library_items_count_other',
+          { resultCount, totalCount },
+        )}
       </p>
-      {/* eslint-enable i18next/no-literal-string */}
     </div>
   );
 }
diff --git a/client/src/components/Library/LibraryItemActions.tsx b/client/src/components/Library/LibraryItemActions.tsx
index e8cfef8..f2f8298 100644
--- a/client/src/components/Library/LibraryItemActions.tsx
+++ b/client/src/components/Library/LibraryItemActions.tsx
@@ -1,4 +1,5 @@
 import { Download, ExternalLink, MoreVertical, Share2 } from 'lucide-react';
+import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
 interface LibraryItemActionsProps {
@@ -16,26 +17,25 @@ export default function LibraryItemActions({
   onMore,
   className,
 }: LibraryItemActionsProps) {
+  const localize = useLocalize();
+
   if (!onOpen && !onDownload && !onShare && !onMore) {
     return null;
   }
 
   return (
     <div
-      className={cn(
-        'flex items-center gap-0.5',
-        className,
-      )}
+      className={cn('flex items-center gap-0.5', className)}
       onClick={(event) => event.stopPropagation()}
       role="group"
-      aria-label="Quick actions"
+      aria-label={localize('com_ui_library_quick_actions')}
     >
       {onOpen && (
         <button
           type="button"
           onClick={onOpen}
           className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          aria-label="Open"
+          aria-label={localize('com_ui_library_open')}
         >
           <ExternalLink className="size-4" aria-hidden="true" />
         </button>
@@ -45,7 +45,7 @@ export default function LibraryItemActions({
           type="button"
           onClick={onDownload}
           className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          aria-label="Download"
+          aria-label={localize('com_ui_download')}
         >
           <Download className="size-4" aria-hidden="true" />
         </button>
@@ -55,7 +55,7 @@ export default function LibraryItemActions({
           type="button"
           onClick={onShare}
           className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          aria-label="Share"
+          aria-label={localize('com_ui_share')}
         >
           <Share2 className="size-4" aria-hidden="true" />
         </button>
@@ -65,7 +65,7 @@ export default function LibraryItemActions({
           type="button"
           onClick={onMore}
           className="inline-flex size-7 items-center justify-center rounded-md text-text-secondary transition-colors hover:bg-surface-tertiary hover:text-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          aria-label="More options"
+          aria-label={localize('com_ui_library_more_options')}
         >
           <MoreVertical className="size-4" aria-hidden="true" />
         </button>
diff --git a/client/src/components/Library/LibraryList.tsx b/client/src/components/Library/LibraryList.tsx
index 417c8c9..402c609 100644
--- a/client/src/components/Library/LibraryList.tsx
+++ b/client/src/components/Library/LibraryList.tsx
@@ -6,6 +6,7 @@ import type {
   LibraryStorageInfo,
   LibraryViewMode,
 } from '~/types/library';
+import { useLocalize } from '~/hooks';
 import LibraryEmptyState from './LibraryEmptyState';
 import LibraryErrorState from './LibraryErrorState';
 import LibraryFilters from './LibraryFilters';
@@ -46,6 +47,7 @@ export default function LibraryList({
   onMore,
   className = '',
 }: LibraryListProps) {
+  const localize = useLocalize();
   const [filters, setFilters] = useState<LibraryFiltersState>(DEFAULT_FILTERS);
   const [viewMode, setViewMode] = useState<LibraryViewMode>('dense');
 
@@ -54,8 +56,7 @@ export default function LibraryList({
     [items, filters, status],
   );
 
-  const isFiltered =
-    filters.search.trim().length > 0 || filters.typeFilter !== 'all';
+  const isFiltered = filters.search.trim().length > 0 || filters.typeFilter !== 'all';
 
   const handleClearFilters = useCallback(() => {
     setFilters(DEFAULT_FILTERS);
@@ -88,6 +89,49 @@ export default function LibraryList({
     );
   }
 
+  let listContent: React.ReactNode;
+  if (filteredItems.length === 0) {
+    listContent = <LibraryEmptyState isFiltered={isFiltered} onClearFilters={handleClearFilters} />;
+  } else if (viewMode === 'preview') {
+    listContent = (
+      <div
+        className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+        role="list"
+        aria-label={localize('com_ui_library_items')}
+      >
+        {filteredItems.map((item) => (
+          <LibraryPreviewCard
+            key={item.id}
+            item={item}
+            onClick={onItemClick}
+            onDownload={onDownload}
+            onShare={onShare}
+            onMore={onMore}
+          />
+        ))}
+      </div>
+    );
+  } else {
+    listContent = (
+      <div
+        className="flex flex-col gap-2"
+        role="list"
+        aria-label={localize('com_ui_library_items')}
+      >
+        {filteredItems.map((item) => (
+          <LibraryListItem
+            key={item.id}
+            item={item}
+            onClick={onItemClick}
+            onDownload={onDownload}
+            onShare={onShare}
+            onMore={onMore}
+          />
+        ))}
+      </div>
+    );
+  }
+
   return (
     <div className={`flex flex-col gap-4 ${className}`}>
       {storage && <LibraryStorageBar storage={storage} />}
@@ -101,39 +145,7 @@ export default function LibraryList({
         onViewModeChange={setViewMode}
       />
 
-      {filteredItems.length === 0 ? (
-        <LibraryEmptyState isFiltered={isFiltered} onClearFilters={handleClearFilters} />
-      ) : viewMode === 'preview' ? (
-        <div
-          className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
-          role="list"
-          aria-label="Library items"
-        >
-          {filteredItems.map((item) => (
-            <LibraryPreviewCard
-              key={item.id}
-              item={item}
-              onClick={onItemClick}
-              onDownload={onDownload}
-              onShare={onShare}
-              onMore={onMore}
-            />
-          ))}
-        </div>
-      ) : (
-        <div className="flex flex-col gap-2" role="list" aria-label="Library items">
-          {filteredItems.map((item) => (
-            <LibraryListItem
-              key={item.id}
-              item={item}
-              onClick={onItemClick}
-              onDownload={onDownload}
-              onShare={onShare}
-              onMore={onMore}
-            />
-          ))}
-        </div>
-      )}
+      {listContent}
     </div>
   );
 }
diff --git a/client/src/components/Library/LibraryListItem.tsx b/client/src/components/Library/LibraryListItem.tsx
index da8720e..fd61e02 100644
--- a/client/src/components/Library/LibraryListItem.tsx
+++ b/client/src/components/Library/LibraryListItem.tsx
@@ -1,7 +1,8 @@
 import { FileIcon, Sparkles } from '@librechat/client';
 import type { LibraryItem } from '~/types/library';
+import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
-import { formatLibraryDate, formatLibraryFileSize, LIBRARY_TYPE_LABELS } from './libraryUtils';
+import { formatLibraryDate, formatLibraryFileSize, getLibraryTypeLabel } from './libraryUtils';
 import { getLibraryFileType, TYPE_COLOR_MAP } from './libraryTypeMeta';
 import LibraryItemActions from './LibraryItemActions';
 
@@ -23,10 +24,19 @@ export default function LibraryListItem({
   onShare,
   onMore,
 }: LibraryListItemProps) {
-  const fileType = getLibraryFileType(item.type);
+  const localize = useLocalize();
+  const fileType = getLibraryFileType(item.type, localize);
   const isArtifact = item.type === 'artifact';
   const iconColor = TYPE_COLOR_MAP[item.type];
-  const ariaLabel = `${item.name}, ${LIBRARY_TYPE_LABELS[item.type]}, ${formatLibraryFileSize(item.sizeBytes)}`;
+  const typeLabel = getLibraryTypeLabel(item.type, localize);
+  const itemKind = localize(
+    item.kind === 'artifact' ? 'com_ui_library_type_artifact' : 'com_ui_library_type_file',
+  );
+  const ariaLabel = localize('com_ui_library_item_label', {
+    name: item.name,
+    type: typeLabel,
+    size: formatLibraryFileSize(item.sizeBytes),
+  });
 
   const content = (
     <>
@@ -48,10 +58,8 @@ export default function LibraryListItem({
           </span>
         </div>
         <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-text-secondary">
-          <span className="rounded bg-surface-tertiary px-1.5 py-0.5 font-medium">
-            {LIBRARY_TYPE_LABELS[item.type]}
-          </span>
-          <span className="capitalize">{item.kind}</span>
+          <span className="rounded bg-surface-tertiary px-1.5 py-0.5 font-medium">{typeLabel}</span>
+          <span>{itemKind}</span>
           <span aria-hidden="true">·</span>
           <time dateTime={item.createdAt}>{formatLibraryDate(item.createdAt)}</time>
         </div>
@@ -68,7 +76,7 @@ export default function LibraryListItem({
       className={cn(
         itemRowClassName,
         onClick &&
-          'cursor-pointer hover:border-border-medium hover:bg-surface-hover focus-within:outline-none focus-within:ring-2 focus-within:ring-ring',
+          'cursor-pointer focus-within:outline-none focus-within:ring-2 focus-within:ring-ring hover:border-border-medium hover:bg-surface-hover',
       )}
       aria-label={ariaLabel}
     >
diff --git a/client/src/components/Library/LibraryListWithMockData.tsx b/client/src/components/Library/LibraryListWithMockData.tsx
index 1a08a7c..09e17b5 100644
--- a/client/src/components/Library/LibraryListWithMockData.tsx
+++ b/client/src/components/Library/LibraryListWithMockData.tsx
@@ -26,4 +26,4 @@ export default function LibraryListWithMockData({
       className={className}
     />
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/components/Library/LibraryLoadingState.tsx b/client/src/components/Library/LibraryLoadingState.tsx
index e9d81ad..248ddb5 100644
--- a/client/src/components/Library/LibraryLoadingState.tsx
+++ b/client/src/components/Library/LibraryLoadingState.tsx
@@ -1,14 +1,17 @@
 import { Skeleton } from '@librechat/client';
+import { useLocalize } from '~/hooks';
 
 const SKELETON_ROWS = 6;
 
 export default function LibraryLoadingState() {
+  const localize = useLocalize();
+
   return (
     <div
       className="flex flex-col gap-3"
       role="status"
       aria-live="polite"
-      aria-label="Loading library"
+      aria-label={localize('com_ui_library_loading')}
     >
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <Skeleton className="h-10 w-full max-w-md rounded-lg" />
@@ -25,4 +28,4 @@ export default function LibraryLoadingState() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/components/Library/LibraryPreviewCard.tsx b/client/src/components/Library/LibraryPreviewCard.tsx
index 15406ad..3d20261 100644
--- a/client/src/components/Library/LibraryPreviewCard.tsx
+++ b/client/src/components/Library/LibraryPreviewCard.tsx
@@ -1,7 +1,9 @@
 import { FileIcon, Sparkles } from '@librechat/client';
+import type { LocalizeFunction } from '~/common';
 import type { LibraryItem } from '~/types/library';
+import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
-import { formatLibraryDate, formatLibraryFileSize, LIBRARY_TYPE_LABELS } from './libraryUtils';
+import { formatLibraryDate, formatLibraryFileSize, getLibraryTypeLabel } from './libraryUtils';
 import { getLibraryFileType, TYPE_COLOR_MAP } from './libraryTypeMeta';
 import LibraryItemActions from './LibraryItemActions';
 
@@ -15,8 +17,7 @@ interface LibraryPreviewCardProps {
 
 function isPresentation(item: LibraryItem): boolean {
   return (
-    item.name.toLowerCase().endsWith('.pptx') ||
-    item.contentType?.includes('presentation') === true
+    item.name.toLowerCase().endsWith('.pptx') || item.contentType?.includes('presentation') === true
   );
 }
 
@@ -49,7 +50,10 @@ function DeckPreview() {
 function DocumentPreview() {
   return (
     <div className="relative h-24 w-20 overflow-hidden rounded-md border border-border-light bg-surface-primary shadow-sm">
-      <div className="absolute right-0 top-0 h-5 w-5 bg-blue-500" style={{ clipPath: 'polygon(100% 0, 0 0, 100% 100%)' }} />
+      <div
+        className="absolute right-0 top-0 h-5 w-5 bg-blue-500"
+        style={{ clipPath: 'polygon(100% 0, 0 0, 100% 100%)' }}
+      />
       <div className="space-y-1.5 p-3 pt-4">
         <div className="h-1.5 w-full rounded bg-surface-tertiary" />
         <div className="h-1.5 w-5/6 rounded bg-surface-tertiary" />
@@ -66,7 +70,7 @@ function SpreadsheetPreview() {
     <div className="w-32 overflow-hidden rounded-md border border-border-light bg-surface-primary shadow-sm">
       <div className="grid grid-cols-4 border-b border-border-light bg-emerald-700">
         {Array.from({ length: 4 }).map((_, i) => (
-          <div key={i} className="h-4 border-r border-border-light/30 last:border-r-0" />
+          <div key={i} className="border-border-light/30 h-4 border-r last:border-r-0" />
         ))}
       </div>
       {Array.from({ length: 4 }).map((_, row) => (
@@ -103,7 +107,7 @@ function CodePreview() {
   );
 }
 
-function PreviewArea({ item }: { item: LibraryItem }) {
+function PreviewArea({ item, localize }: { item: LibraryItem; localize: LocalizeFunction }) {
   if (item.type === 'pdf' || isWordOrMarkdown(item)) {
     return <DocumentPreview />;
   }
@@ -117,13 +121,17 @@ function PreviewArea({ item }: { item: LibraryItem }) {
     return <DeckPreview />;
   }
 
-  const fileType = getLibraryFileType(item.type);
+  const fileType = getLibraryFileType(item.type, localize);
   const iconColor = TYPE_COLOR_MAP[item.type];
   const isArtifact = item.type === 'artifact';
 
   return (
     <div className={cn('flex items-center justify-center', iconColor)} aria-hidden="true">
-      {isArtifact ? <Sparkles className="size-12" /> : <FileIcon fileType={fileType} className="size-12" />}
+      {isArtifact ? (
+        <Sparkles className="size-12" />
+      ) : (
+        <FileIcon fileType={fileType} className="size-12" />
+      )}
     </div>
   );
 }
@@ -135,12 +143,24 @@ export default function LibraryPreviewCard({
   onShare,
   onMore,
 }: LibraryPreviewCardProps) {
-  const fileType = getLibraryFileType(item.type);
+  const localize = useLocalize();
+  const hasActions = Boolean(onClick || onDownload || onShare || onMore);
+  const fileType = getLibraryFileType(item.type, localize);
   const isArtifact = item.type === 'artifact';
   const iconColor = TYPE_COLOR_MAP[item.type];
-  const ariaLabel = `${item.name}, ${LIBRARY_TYPE_LABELS[item.type]}, ${formatLibraryFileSize(item.sizeBytes)}`;
+  const typeLabel = getLibraryTypeLabel(item.type, localize);
+  const itemKind = localize(
+    item.kind === 'artifact' ? 'com_ui_library_type_artifact' : 'com_ui_library_type_file',
+  );
+  const ariaLabel = localize('com_ui_library_item_label', {
+    name: item.name,
+    type: typeLabel,
+    size: formatLibraryFileSize(item.sizeBytes),
+  });
 
-  const sourceLabel = item.conversationId ? `Chat ${item.conversationId}` : item.kind;
+  const sourceLabel = item.conversationId
+    ? localize('com_ui_library_chat_source', { chatId: item.conversationId })
+    : itemKind;
 
   return (
     <div
@@ -156,31 +176,38 @@ export default function LibraryPreviewCard({
           type="button"
           onClick={() => onClick(item)}
           className="flex h-32 items-center justify-center bg-amber-50/80 p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          aria-label={`Open ${item.name}`}
+          aria-label={localize('com_ui_library_open_item', { name: item.name })}
         >
-          <PreviewArea item={item} />
+          <PreviewArea item={item} localize={localize} />
         </button>
       ) : (
         <div className="flex h-32 items-center justify-center bg-amber-50/80 p-4">
-          <PreviewArea item={item} />
+          <PreviewArea item={item} localize={localize} />
         </div>
       )}
 
       <div className="flex flex-1 flex-col gap-2 p-3">
         <div className="flex items-start gap-2">
           <div className={cn('mt-0.5 shrink-0', iconColor)} aria-hidden="true">
-            {isArtifact ? <Sparkles className="size-4" /> : <FileIcon fileType={fileType} className="size-4" />}
+            {isArtifact ? (
+              <Sparkles className="size-4" />
+            ) : (
+              <FileIcon fileType={fileType} className="size-4" />
+            )}
           </div>
-          <p className="min-w-0 flex-1 truncate text-sm font-medium text-text-primary" title={item.name}>
+          <p
+            className="min-w-0 flex-1 truncate text-sm font-medium text-text-primary"
+            title={item.name}
+          >
             {item.name}
           </p>
         </div>
 
         <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-text-secondary">
           <span className="rounded bg-surface-tertiary px-1.5 py-0.5 font-medium text-text-primary">
-            {LIBRARY_TYPE_LABELS[item.type]}
+            {typeLabel}
           </span>
-          <span className="capitalize">{sourceLabel}</span>
+          <span>{sourceLabel}</span>
         </div>
 
         <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-text-secondary">
@@ -189,15 +216,19 @@ export default function LibraryPreviewCard({
           <span>{formatLibraryFileSize(item.sizeBytes)}</span>
         </div>
 
-        <div className="mt-auto flex items-center justify-between pt-1">
-          <span className="text-xs text-text-secondary">Quick actions</span>
-          <LibraryItemActions
-            onOpen={onClick ? () => onClick(item) : undefined}
-            onDownload={onDownload ? () => onDownload(item) : undefined}
-            onShare={onShare ? () => onShare(item) : undefined}
-            onMore={onMore ? () => onMore(item) : undefined}
-          />
-        </div>
+        {hasActions && (
+          <div className="mt-auto flex items-center justify-between pt-1">
+            <span className="text-xs text-text-secondary">
+              {localize('com_ui_library_quick_actions')}
+            </span>
+            <LibraryItemActions
+              onOpen={onClick ? () => onClick(item) : undefined}
+              onDownload={onDownload ? () => onDownload(item) : undefined}
+              onShare={onShare ? () => onShare(item) : undefined}
+              onMore={onMore ? () => onMore(item) : undefined}
+            />
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/client/src/components/Library/LibraryStorageBar.tsx b/client/src/components/Library/LibraryStorageBar.tsx
index bfa054e..9c0ffae 100644
--- a/client/src/components/Library/LibraryStorageBar.tsx
+++ b/client/src/components/Library/LibraryStorageBar.tsx
@@ -1,32 +1,32 @@
 import { Progress } from '@librechat/client';
 import type { LibraryStorageInfo } from '~/types/library';
-import {
-  formatLibraryFileSize,
-  getStorageUsagePercent,
-} from './libraryUtils';
+import { useLocalize } from '~/hooks';
+import { formatLibraryFileSize, getStorageUsagePercent } from './libraryUtils';
 
 interface LibraryStorageBarProps {
   storage: LibraryStorageInfo;
 }
 
 export default function LibraryStorageBar({ storage }: LibraryStorageBarProps) {
+  const localize = useLocalize();
   const percent = getStorageUsagePercent(storage.usedBytes, storage.totalBytes);
+  const used = formatLibraryFileSize(storage.usedBytes);
+  const total = formatLibraryFileSize(storage.totalBytes);
 
   return (
-    <div className="rounded-lg border border-border-light bg-surface-tertiary/50 px-4 py-3">
+    <div className="bg-surface-tertiary/50 rounded-lg border border-border-light px-4 py-3">
       <div className="mb-2 flex items-center justify-between text-xs">
-        <span className="font-medium text-text-primary">Storage</span>
+        <span className="font-medium text-text-primary">{localize('com_ui_library_storage')}</span>
         <span className="text-text-secondary">
-          {formatLibraryFileSize(storage.usedBytes)} of {formatLibraryFileSize(storage.totalBytes)}{' '}
-          used
+          {localize('com_ui_library_storage_usage', { used, total })}
         </span>
       </div>
       <Progress
         value={percent}
         className="h-2 bg-surface-secondary"
-        aria-label={`Storage ${percent}% used`}
+        aria-label={localize('com_ui_library_storage_percent', { percent })}
       />
       <p className="mt-1.5 text-right text-xs text-text-secondary">{percent}%</p>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/components/Library/LibraryViewToggle.tsx b/client/src/components/Library/LibraryViewToggle.tsx
index 61cf4d5..ea5a905 100644
--- a/client/src/components/Library/LibraryViewToggle.tsx
+++ b/client/src/components/Library/LibraryViewToggle.tsx
@@ -1,5 +1,6 @@
 import { LayoutGrid, List } from 'lucide-react';
 import type { LibraryViewMode } from '~/types/library';
+import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
 interface LibraryViewToggleProps {
@@ -13,6 +14,8 @@ export default function LibraryViewToggle({
   onViewModeChange,
   className,
 }: LibraryViewToggleProps) {
+  const localize = useLocalize();
+
   return (
     <div
       className={cn(
@@ -20,13 +23,13 @@ export default function LibraryViewToggle({
         className,
       )}
       role="group"
-      aria-label="Library view"
+      aria-label={localize('com_ui_library_view')}
     >
       <button
         type="button"
         onClick={() => onViewModeChange('dense')}
         aria-pressed={viewMode === 'dense'}
-        aria-label="Dense list view"
+        aria-label={localize('com_ui_library_dense_view')}
         className={cn(
           'inline-flex size-8 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
           viewMode === 'dense'
@@ -40,7 +43,7 @@ export default function LibraryViewToggle({
         type="button"
         onClick={() => onViewModeChange('preview')}
         aria-pressed={viewMode === 'preview'}
-        aria-label="Preview grid view"
+        aria-label={localize('com_ui_library_preview_view')}
         className={cn(
           'inline-flex size-8 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
           viewMode === 'preview'
diff --git a/client/src/components/Library/__tests__/LibraryList.test.tsx b/client/src/components/Library/__tests__/LibraryList.test.tsx
index 911d85b..ce5e11e 100644
--- a/client/src/components/Library/__tests__/LibraryList.test.tsx
+++ b/client/src/components/Library/__tests__/LibraryList.test.tsx
@@ -6,6 +6,18 @@ import LibraryList from '../LibraryList';
 
 jest.mock('~/hooks', () => ({
   useDebounce: (value: string) => value,
+  useLocalize:
+    () =>
+    (key: string, options: Record<string, string | number> = {}) => {
+      const translations = jest.requireActual('~/locales/en/translation.json') as Record<
+        string,
+        string
+      >;
+      return Object.entries(options).reduce(
+        (text, [name, value]) => text.replace(`{{${name}}}`, String(value)),
+        translations[key],
+      );
+    },
 }));
 
 describe('LibraryList', () => {
@@ -17,17 +29,12 @@ describe('LibraryList', () => {
   it('renders error state with retry', () => {
     const onRetry = jest.fn();
     render(
-      <LibraryList
-        items={[]}
-        status="error"
-        errorMessage="Network error"
-        onRetry={onRetry}
-      />,
+      <LibraryList items={[]} status="error" errorMessage="Network error" onRetry={onRetry} />,
     );
 
     expect(screen.getByRole('alert')).toBeInTheDocument();
     expect(screen.getByText('Network error')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Retry loading library' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Try again' })).toBeInTheDocument();
   });
 
   it('renders empty state', () => {
@@ -38,25 +45,19 @@ describe('LibraryList', () => {
 
   it('renders populated list with items', () => {
     render(
-      <LibraryList
-        items={mockLibraryItems}
-        status="populated"
-        storage={mockLibraryStorage}
-      />,
+      <LibraryList items={mockLibraryItems} status="populated" storage={mockLibraryStorage} />,
     );
 
     expect(screen.getByRole('search')).toBeInTheDocument();
-    expect(screen.getByText(`Showing ${mockLibraryItems.length} of ${mockLibraryItems.length} items`)).toBeInTheDocument();
+    expect(
+      screen.getByText(`Showing ${mockLibraryItems.length} of ${mockLibraryItems.length} items`),
+    ).toBeInTheDocument();
     expect(screen.getByText('Q4 Financial Report.pdf')).toBeInTheDocument();
   });
 
   it('filters items by search query', async () => {
     render(
-      <LibraryList
-        items={mockLibraryItems}
-        status="populated"
-        storage={mockLibraryStorage}
-      />,
+      <LibraryList items={mockLibraryItems} status="populated" storage={mockLibraryStorage} />,
     );
 
     const searchInput = screen.getByRole('searchbox', { name: 'Search library' });
@@ -69,11 +70,7 @@ describe('LibraryList', () => {
 
   it('filters items by type', async () => {
     render(
-      <LibraryList
-        items={mockLibraryItems}
-        status="populated"
-        storage={mockLibraryStorage}
-      />,
+      <LibraryList items={mockLibraryItems} status="populated" storage={mockLibraryStorage} />,
     );
 
     const typeDropdown = screen.getByRole('button', { name: /Filter by type/i });
@@ -89,11 +86,7 @@ describe('LibraryList', () => {
 
   it('sorts items by name', async () => {
     render(
-      <LibraryList
-        items={mockLibraryItems}
-        status="populated"
-        storage={mockLibraryStorage}
-      />,
+      <LibraryList items={mockLibraryItems} status="populated" storage={mockLibraryStorage} />,
     );
 
     const sortDropdown = screen.getByRole('button', { name: /Sort library items/i });
@@ -109,11 +102,7 @@ describe('LibraryList', () => {
 
   it('toggles between dense and preview views', async () => {
     render(
-      <LibraryList
-        items={mockLibraryItems}
-        status="populated"
-        storage={mockLibraryStorage}
-      />,
+      <LibraryList items={mockLibraryItems} status="populated" storage={mockLibraryStorage} />,
     );
 
     const list = screen.getByRole('list', { name: 'Library items' });
@@ -128,6 +117,7 @@ describe('LibraryList', () => {
     expect(screen.getByText('Q4 Financial Report.pdf')).toBeInTheDocument();
     const firstCard = within(grid).getAllByRole('listitem')[0];
     expect(within(firstCard).queryByRole('button')).not.toBeInTheDocument();
+    expect(within(firstCard).queryByText('Quick actions')).not.toBeInTheDocument();
 
     const denseButton = screen.getByRole('button', { name: 'Dense list view' });
     await userEvent.click(denseButton);
@@ -137,11 +127,7 @@ describe('LibraryList', () => {
 
   it('does not render quick actions without callbacks', () => {
     render(
-      <LibraryList
-        items={mockLibraryItems}
-        status="populated"
-        storage={mockLibraryStorage}
-      />,
+      <LibraryList items={mockLibraryItems} status="populated" storage={mockLibraryStorage} />,
     );
 
     expect(screen.queryByRole('group', { name: 'Quick actions' })).not.toBeInTheDocument();
@@ -149,6 +135,7 @@ describe('LibraryList', () => {
     expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: 'Share' })).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: 'More options' })).not.toBeInTheDocument();
+    expect(screen.queryByText('Quick actions')).not.toBeInTheDocument();
   });
 
   it('renders and invokes only configured quick actions', async () => {
@@ -170,6 +157,7 @@ describe('LibraryList', () => {
     );
 
     const quickActions = screen.getByRole('group', { name: 'Quick actions' });
+    expect(screen.getByText('Showing 1 of 1 item')).toBeInTheDocument();
     await userEvent.click(within(quickActions).getByRole('button', { name: 'Open' }));
     await userEvent.click(within(quickActions).getByRole('button', { name: 'Download' }));
     await userEvent.click(within(quickActions).getByRole('button', { name: 'Share' }));
diff --git a/client/src/components/Library/__tests__/libraryUtils.test.ts b/client/src/components/Library/__tests__/libraryUtils.test.ts
index 74dbbc4..734c474 100644
--- a/client/src/components/Library/__tests__/libraryUtils.test.ts
+++ b/client/src/components/Library/__tests__/libraryUtils.test.ts
@@ -1,19 +1,23 @@
 import { isSupportedArtifactContentType } from 'librechat-data-provider';
+import type { LocalizeFunction } from '~/common';
 import { mockLibraryItems } from '~/data/mockLibraryData';
+import english from '~/locales/en/translation.json';
 import {
   applyLibraryFilters,
+  createLibrarySortOptions,
+  createLibraryTypeFilterOptions,
   filterLibraryItemsBySearch,
   filterLibraryItemsByType,
   findLibraryOption,
   formatLibraryFileSize,
   getStorageUsagePercent,
-  LIBRARY_SORT_OPTIONS,
-  LIBRARY_TYPE_FILTER_OPTIONS,
   parseLibrarySortOption,
   parseLibraryTypeFilter,
   sortLibraryItems,
 } from '../libraryUtils';
 
+const localize = ((key) => english[key]) as LocalizeFunction;
+
 describe('libraryUtils', () => {
   it('keeps mock records aligned with shared file and artifact identifiers', () => {
     for (const item of mockLibraryItems) {
@@ -53,18 +57,28 @@ describe('libraryUtils', () => {
 
   describe('filterLibraryItemsBySearch', () => {
     it('returns all items for empty search', () => {
-      expect(filterLibraryItemsBySearch(mockLibraryItems, '')).toHaveLength(mockLibraryItems.length);
+      expect(filterLibraryItemsBySearch(mockLibraryItems, '')).toHaveLength(
+        mockLibraryItems.length,
+      );
     });
 
     it('filters by name case-insensitively', () => {
       const results = filterLibraryItemsBySearch(mockLibraryItems, 'pdf');
-      expect(results.every((item) => item.name.toLowerCase().includes('pdf') || item.description?.toLowerCase().includes('pdf'))).toBe(true);
+      expect(
+        results.every(
+          (item) =>
+            item.name.toLowerCase().includes('pdf') ||
+            item.description?.toLowerCase().includes('pdf'),
+        ),
+      ).toBe(true);
     });
   });
 
   describe('filterLibraryItemsByType', () => {
     it('returns all items for "all" filter', () => {
-      expect(filterLibraryItemsByType(mockLibraryItems, 'all')).toHaveLength(mockLibraryItems.length);
+      expect(filterLibraryItemsByType(mockLibraryItems, 'all')).toHaveLength(
+        mockLibraryItems.length,
+      );
     });
 
     it('filters by type', () => {
@@ -129,11 +143,11 @@ describe('libraryUtils', () => {
 
   describe('findLibraryOption', () => {
     it('finds matching option by value', () => {
-      expect(findLibraryOption(LIBRARY_TYPE_FILTER_OPTIONS, 'pdf').label).toBe('PDF');
+      expect(findLibraryOption(createLibraryTypeFilterOptions(localize), 'pdf').label).toBe('PDF');
     });
 
     it('returns fallback option when value is missing', () => {
-      expect(findLibraryOption(LIBRARY_SORT_OPTIONS, 'missing').value).toBe('newest');
+      expect(findLibraryOption(createLibrarySortOptions(localize), 'missing').value).toBe('newest');
     });
   });
 });
diff --git a/client/src/components/Library/index.ts b/client/src/components/Library/index.ts
index 58db893..83dd57f 100644
--- a/client/src/components/Library/index.ts
+++ b/client/src/components/Library/index.ts
@@ -7,4 +7,4 @@ export { default as LibraryErrorState } from './LibraryErrorState';
 export { default as LibraryStorageBar } from './LibraryStorageBar';
 export { default as LibraryListWithMockData } from './LibraryListWithMockData';
 export { useMockLibraryData } from './useMockLibraryData';
-export * from './libraryUtils';
\ No newline at end of file
+export * from './libraryUtils';
diff --git a/client/src/components/Library/libraryTypeMeta.ts b/client/src/components/Library/libraryTypeMeta.ts
index d491984..d3e289e 100644
--- a/client/src/components/Library/libraryTypeMeta.ts
+++ b/client/src/components/Library/libraryTypeMeta.ts
@@ -6,7 +6,9 @@ import {
   TextPaths,
   VideoPaths,
 } from '@librechat/client';
+import type { LocalizeFunction } from '~/common';
 import type { LibraryItemType } from '~/types/library';
+import type { TranslationKeys } from '~/hooks/useLocalize';
 
 export interface LibraryFileType {
   fill: string;
@@ -14,14 +16,23 @@ export interface LibraryFileType {
   title: string;
 }
 
-export const TYPE_FILE_TYPE_MAP: Record<Exclude<LibraryItemType, 'artifact'>, LibraryFileType> = {
-  pdf: { paths: TextPaths, fill: '#EF4444', title: 'PDF' },
-  image: { paths: FilePaths, fill: '#EC4899', title: 'Image' },
-  video: { paths: VideoPaths, fill: '#A855F7', title: 'Video' },
-  document: { paths: TextPaths, fill: '#3B82F6', title: 'Document' },
-  code: { paths: CodePaths, fill: '#F97316', title: 'Code' },
-  spreadsheet: { paths: SheetPaths, fill: '#10B981', title: 'Spreadsheet' },
-  audio: { paths: AudioPaths, fill: '#F59E0B', title: 'Audio' },
+type LibraryFileTypeConfig = Omit<LibraryFileType, 'title'> & { titleKey: TranslationKeys };
+
+export const TYPE_FILE_TYPE_MAP: Record<
+  Exclude<LibraryItemType, 'artifact'>,
+  LibraryFileTypeConfig
+> = {
+  pdf: { paths: TextPaths, fill: '#EF4444', titleKey: 'com_ui_library_pdf' },
+  image: { paths: FilePaths, fill: '#EC4899', titleKey: 'com_ui_library_image' },
+  video: { paths: VideoPaths, fill: '#A855F7', titleKey: 'com_ui_library_video' },
+  document: { paths: TextPaths, fill: '#3B82F6', titleKey: 'com_ui_library_document' },
+  code: { paths: CodePaths, fill: '#F97316', titleKey: 'com_ui_code' },
+  spreadsheet: {
+    paths: SheetPaths,
+    fill: '#10B981',
+    titleKey: 'com_ui_library_spreadsheet',
+  },
+  audio: { paths: AudioPaths, fill: '#F59E0B', titleKey: 'com_ui_library_audio' },
 };
 
 export const TYPE_COLOR_MAP: Record<LibraryItemType, string> = {
@@ -37,6 +48,12 @@ export const TYPE_COLOR_MAP: Record<LibraryItemType, string> = {
 
 export function getLibraryFileType(
   type: LibraryItemType,
+  localize: LocalizeFunction,
 ): LibraryFileType | null {
-  return type === 'artifact' ? null : TYPE_FILE_TYPE_MAP[type];
+  if (type === 'artifact') {
+    return null;
+  }
+
+  const { titleKey, ...fileType } = TYPE_FILE_TYPE_MAP[type];
+  return { ...fileType, title: localize(titleKey) };
 }
diff --git a/client/src/components/Library/libraryUtils.ts b/client/src/components/Library/libraryUtils.ts
index 0b284c5..f98e979 100644
--- a/client/src/components/Library/libraryUtils.ts
+++ b/client/src/components/Library/libraryUtils.ts
@@ -1,4 +1,4 @@
-import type { Option } from '~/common';
+import type { LocalizeFunction, Option } from '~/common';
 import type {
   LibraryFiltersState,
   LibraryItem,
@@ -6,25 +6,26 @@ import type {
   LibrarySortOption,
   LibraryTypeFilter,
 } from '~/types/library';
-
-/** Human-readable labels for each library item type. */
-export const LIBRARY_TYPE_LABELS: Record<LibraryItemType, string> = {
-  pdf: 'PDF',
-  image: 'Image',
-  video: 'Video',
-  document: 'Document',
-  code: 'Code',
-  spreadsheet: 'Spreadsheet',
-  audio: 'Audio',
-  artifact: 'Artifact',
+import type { TranslationKeys } from '~/hooks/useLocalize';
+
+/** Translation keys for each library item type. */
+export const LIBRARY_TYPE_LABEL_KEYS: Record<LibraryItemType, TranslationKeys> = {
+  pdf: 'com_ui_library_pdf',
+  image: 'com_ui_library_image',
+  video: 'com_ui_library_video',
+  document: 'com_ui_library_document',
+  code: 'com_ui_code',
+  spreadsheet: 'com_ui_library_spreadsheet',
+  audio: 'com_ui_library_audio',
+  artifact: 'com_ui_library_artifact',
 };
 
-/** Sort option labels for the sort dropdown. */
-export const LIBRARY_SORT_LABELS: Record<LibrarySortOption, string> = {
-  newest: 'Newest first',
-  oldest: 'Oldest first',
-  name: 'Name (A–Z)',
-  size: 'Size (largest)',
+/** Translation keys for the sort dropdown. */
+export const LIBRARY_SORT_LABEL_KEYS: Record<LibrarySortOption, TranslationKeys> = {
+  newest: 'com_ui_library_newest_first',
+  oldest: 'com_ui_library_oldest_first',
+  name: 'com_ui_library_name_az',
+  size: 'com_ui_library_size_largest',
 };
 
 /** All filterable types in display order. */
@@ -40,21 +41,29 @@ export const LIBRARY_FILTER_TYPES: LibraryItemType[] = [
 ];
 
 const LIBRARY_TYPE_FILTER_VALUES = new Set<string>(['all', ...LIBRARY_FILTER_TYPES]);
-const LIBRARY_SORT_OPTION_VALUES = new Set<string>(Object.keys(LIBRARY_SORT_LABELS));
-
-/** Dropdown options for the type filter control. */
-export const LIBRARY_TYPE_FILTER_OPTIONS: Option[] = [
-  { value: 'all', label: 'All types' },
-  ...LIBRARY_FILTER_TYPES.map((type) => ({
-    value: type,
-    label: LIBRARY_TYPE_LABELS[type],
-  })),
-];
+const LIBRARY_SORT_OPTION_VALUES = new Set<string>(Object.keys(LIBRARY_SORT_LABEL_KEYS));
+
+export function getLibraryTypeLabel(type: LibraryItemType, localize: LocalizeFunction): string {
+  return localize(LIBRARY_TYPE_LABEL_KEYS[type]);
+}
+
+/** Builds localized dropdown options for the type filter control. */
+export function createLibraryTypeFilterOptions(localize: LocalizeFunction): Option[] {
+  return [
+    { value: 'all', label: localize('com_ui_library_all_types') },
+    ...LIBRARY_FILTER_TYPES.map((type) => ({
+      value: type,
+      label: getLibraryTypeLabel(type, localize),
+    })),
+  ];
+}
 
-/** Dropdown options for the sort control. */
-export const LIBRARY_SORT_OPTIONS: Option[] = (
-  Object.entries(LIBRARY_SORT_LABELS) as [LibrarySortOption, string][]
-).map(([value, label]) => ({ value, label }));
+/** Builds localized dropdown options for the sort control. */
+export function createLibrarySortOptions(localize: LocalizeFunction): Option[] {
+  return (Object.entries(LIBRARY_SORT_LABEL_KEYS) as [LibrarySortOption, TranslationKeys][]).map(
+    ([value, labelKey]) => ({ value, label: localize(labelKey) }),
+  );
+}
 
 /** Resolves a dropdown value to a valid type filter, falling back to `all`. */
 export function parseLibraryTypeFilter(value: string): LibraryTypeFilter {
@@ -67,11 +76,7 @@ export function parseLibrarySortOption(value: string): LibrarySortOption {
 }
 
 /** Finds the matching dropdown option or returns the fallback entry. */
-export function findLibraryOption(
-  options: Option[],
-  value: string,
-  fallbackIndex = 0,
-): Option {
+export function findLibraryOption(options: Option[], value: string, fallbackIndex = 0): Option {
   return options.find((option) => String(option.value) === value) ?? options[fallbackIndex];
 }
 
@@ -115,8 +120,7 @@ export function filterLibraryItemsBySearch(items: LibraryItem[], search: string)
 
   return items.filter(
     (item) =>
-      item.name.toLowerCase().includes(query) ||
-      item.description?.toLowerCase().includes(query),
+      item.name.toLowerCase().includes(query) || item.description?.toLowerCase().includes(query),
   );
 }
 
@@ -145,7 +149,9 @@ export function sortLibraryItems(items: LibraryItem[], sortBy: LibrarySortOption
         (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
       );
     case 'name':
-      return sorted.sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }));
+      return sorted.sort((a, b) =>
+        a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }),
+      );
     case 'size':
       return sorted.sort((a, b) => b.sizeBytes - a.sizeBytes);
     default:
@@ -161,4 +167,4 @@ export function applyLibraryFilters(
   const searched = filterLibraryItemsBySearch(items, filters.search);
   const filtered = filterLibraryItemsByType(searched, filters.typeFilter);
   return sortLibraryItems(filtered, filters.sortBy);
-}
\ No newline at end of file
+}
diff --git a/client/src/components/Library/useMockLibraryData.ts b/client/src/components/Library/useMockLibraryData.ts
index f89498e..155b351 100644
--- a/client/src/components/Library/useMockLibraryData.ts
+++ b/client/src/components/Library/useMockLibraryData.ts
@@ -1,10 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { mockLibraryResponse } from '~/data/mockLibraryData';
-import type {
-  LibraryItem,
-  LibraryListStatus,
-  LibraryStorageInfo,
-} from '~/types/library';
+import { useLocalize } from '~/hooks';
+import type { LibraryItem, LibraryListStatus, LibraryStorageInfo } from '~/types/library';
 
 const MOCK_LOAD_DELAY_MS = 800;
 
@@ -35,6 +32,7 @@ interface UseMockLibraryDataResult {
 export function useMockLibraryData(
   options: UseMockLibraryDataOptions = {},
 ): UseMockLibraryDataResult {
+  const localize = useLocalize();
   const { scenario = 'success', delayMs = MOCK_LOAD_DELAY_MS, autoFetch = true } = options;
 
   const [items, setItems] = useState<LibraryItem[]>([]);
@@ -68,7 +66,7 @@ export function useMockLibraryData(
         setItems([]);
         setStorage(null);
         setStatus('error');
-        setErrorMessage('Failed to connect to the library service. Please try again.');
+        setErrorMessage(localize('com_ui_library_error_service'));
         return;
       }
 
@@ -90,7 +88,7 @@ export function useMockLibraryData(
     return () => {
       cancelled = true;
     };
-  }, [autoFetch, delayMs, scenario, fetchKey]);
+  }, [autoFetch, delayMs, scenario, fetchKey, localize]);
 
   return {
     items,
@@ -100,4 +98,4 @@ export function useMockLibraryData(
     isLoading: status === 'loading',
     refetch,
   };
-}
\ No newline at end of file
+}
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index f8c859f..66dec18 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -1144,6 +1144,49 @@
   "com_ui_latest_footer": "Every AI for Everyone.",
   "com_ui_latest_version": "Latest version",
   "com_ui_leave_blank_to_keep": "Leave blank to keep existing",
+  "com_ui_library_all_types": "All types",
+  "com_ui_library_artifact": "Artifact",
+  "com_ui_library_audio": "Audio",
+  "com_ui_library_chat_source": "Chat {{chatId}}",
+  "com_ui_library_clear_filters": "Clear filters",
+  "com_ui_library_dense_view": "Dense list view",
+  "com_ui_library_document": "Document",
+  "com_ui_library_empty_description": "Files and artifacts from your conversations will appear here.",
+  "com_ui_library_empty_title": "Your library is empty",
+  "com_ui_library_error_default": "Something went wrong while loading your library.",
+  "com_ui_library_error_service": "Failed to connect to the library service. Please try again.",
+  "com_ui_library_error_title": "Unable to load library",
+  "com_ui_library_filter_by_type": "Filter by type",
+  "com_ui_library_image": "Image",
+  "com_ui_library_item_label": "{{name}}, {{type}}, {{size}}",
+  "com_ui_library_items": "Library items",
+  "com_ui_library_items_count_one": "Showing {{resultCount}} of {{totalCount}} item",
+  "com_ui_library_items_count_other": "Showing {{resultCount}} of {{totalCount}} items",
+  "com_ui_library_loading": "Loading library",
+  "com_ui_library_more_options": "More options",
+  "com_ui_library_name_az": "Name (A–Z)",
+  "com_ui_library_newest_first": "Newest first",
+  "com_ui_library_no_matches_description": "Try adjusting your search or filter to find what you are looking for.",
+  "com_ui_library_no_matches_title": "No matching files",
+  "com_ui_library_oldest_first": "Oldest first",
+  "com_ui_library_open": "Open",
+  "com_ui_library_open_item": "Open {{name}}",
+  "com_ui_library_pdf": "PDF",
+  "com_ui_library_preview_view": "Preview grid view",
+  "com_ui_library_quick_actions": "Quick actions",
+  "com_ui_library_search": "Search library",
+  "com_ui_library_search_placeholder": "Search files and artifacts...",
+  "com_ui_library_size_largest": "Size (largest)",
+  "com_ui_library_sort_items": "Sort library items",
+  "com_ui_library_spreadsheet": "Spreadsheet",
+  "com_ui_library_storage": "Storage",
+  "com_ui_library_storage_percent": "Storage {{percent}}% used",
+  "com_ui_library_storage_usage": "{{used}} of {{total}} used",
+  "com_ui_library_try_again": "Try again",
+  "com_ui_library_type_artifact": "Artifact",
+  "com_ui_library_type_file": "File",
+  "com_ui_library_video": "Video",
+  "com_ui_library_view": "Library view",
   "com_ui_light_theme_enabled": "Light theme enabled",
   "com_ui_line_count": "{0} line",
   "com_ui_lines_count": "{0} lines",