diff --git a/.gitignore b/.gitignore
index 5dec777..2eda10f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,6 +19,8 @@ node_modules/
 # Internal development files
 internal/
 docs/superpowers/
+agents.md
+.agents/
 
 # Logs
 *.log
diff --git a/README.md b/README.md
index 5f1ed41..0fd4674 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ Easily explore, search, preview, and upload Cloudinary assets directly inside Vi
 
 ## Features
 
-- **Asset Explorer** – View Cloudinary folders and assets in a VS Code Tree View
+- **Asset Explorer** – View Cloudinary folders and assets in the sidebar media library
 - **Search & Filter** – Quickly locate assets by public ID or type
 - **Optimized Preview** – Preview images/videos with Cloudinary transformations applied (`f_auto`, `q_auto`)
 - **Right-click Actions** – Copy Public ID or URL instantly
@@ -75,7 +75,7 @@ Once a valid configuration has been added, the active environment will be shown
 
 ### Upload
 
-- Click **Upload** from the title bar to open the upload panel, or click **Upload here** on a folder entry to open with that folder pre-selected.
+- Click **Upload** from the library toolbar to open the upload panel, or click **Upload here** on a folder entry to open with that folder pre-selected.
 - Alternatively, run `Cloudinary: Upload` from the command palette.
 
 **Upload Panel Features:**
@@ -94,8 +94,8 @@ Once a valid configuration has been added, the active environment will be shown
 ![Uploading assets](https://res.cloudinary.com/demo/video/upload/w_1200/f_auto:animated/q_auto/e_accelerate:100/e_loop/docs/vscode-extension-vid3)
 
 ### Filter or Search
-- Click "Filter" in the title bar or run `Cloudinary: Filter` to narrow assets by type
-- Click "Search" in the title bar or run `Cloudinary: Search` to search by public ID
+- Use the always-visible filter controls in the media library to narrow assets by type or change sort order.
+- Use the always-visible search field in the media library to search by public ID.
 
 ![Filtering and searching](https://res.cloudinary.com/demo/video/upload/w_1200/f_auto:animated/q_auto/e_accelerate:50/e_loop/docs/vscode-extension-vid2)
 
@@ -113,16 +113,17 @@ Once a valid configuration has been added, the active environment will be shown
 - **Metadata** – View tags, context metadata, and structured metadata
 - **URLs** – Copy original or optimized URLs with one click
 - **Type Icons** – Tab icons indicate asset type (image, video, or file)
+- **Authenticated Assets** – Authenticated delivery assets are marked with a lock and use a signed original URL for preview/copy actions
 
-### Refresh Tree
-- Click "Refresh" to reload the tree
+### Refresh Library
+- Click **Refresh** to reload the media library
 
 ---
 
 ## Known Limitations
 - Asset filtering is limited to basic types (image, video, raw)
-- No options to control number of items returned in tree or root folder
-- Folder dropdown in upload panel only shows folders that have been browsed in the tree view
+- No user-facing option to control library page size or prefetch cap
+- Folder dropdown discovery is capped to a bounded folder depth for responsiveness
 
 ---
 
diff --git a/docs/adding-features.md b/docs/adding-features.md
index 5439ff0..69f0200 100644
--- a/docs/adding-features.md
+++ b/docs/adding-features.md
@@ -1,26 +1,32 @@
 # Adding Features
 
-This guide explains how to add new functionality to the Cloudinary VS Code Extension.
+This guide covers the current extension shape after the sidebar moved to webview-based homescreen and library views.
 
 ## Adding a New Command
 
-### 1. Create the Command File
+Commands still live in `src/commands/`, but they now work from shared services and webview providers rather than a sidebar tree state object.
 
-Create a new file in `src/commands/`:
+### 1. Create the Command File
 
 ```typescript
 // src/commands/myNewCommand.ts
 import * as vscode from "vscode";
-import { CloudinaryTreeDataProvider } from "../tree/treeDataProvider";
+import { CloudinaryService } from "../cloudinary/cloudinaryService";
 
 function registerMyNewCommand(
   context: vscode.ExtensionContext,
-  provider: CloudinaryTreeDataProvider
+  cloudinaryService: CloudinaryService
 ) {
   context.subscriptions.push(
     vscode.commands.registerCommand("cloudinary.myNewCommand", async () => {
-      // Implementation here
-      vscode.window.showInformationMessage("Command executed!");
+      if (!cloudinaryService.cloudName) {
+        vscode.window.showWarningMessage("Cloudinary is not configured.");
+        return;
+      }
+
+      vscode.window.showInformationMessage(
+        `Running against ${cloudinaryService.cloudName}`
+      );
     })
   );
 }
@@ -28,23 +34,29 @@ function registerMyNewCommand(
 export default registerMyNewCommand;
 ```
 
+If the command needs to update the library UI, accept `LibraryWebviewViewProvider` and call methods such as `refresh()`, `setSearch()`, or `applyView(...)`.
+
 ### 2. Register the Command
 
-Add to `src/commands/registerCommands.ts`:
+Add it in `src/commands/registerCommands.ts`:
 
 ```typescript
 import registerMyNewCommand from "./myNewCommand";
 
 function registerAllCommands(
   context: vscode.ExtensionContext,
-  provider: CloudinaryTreeDataProvider
+  cloudinaryService: CloudinaryService,
+  environmentTarget: Parameters<typeof registerSwitchEnv>[1],
+  statusBar: vscode.StatusBarItem,
+  homescreenProvider: HomescreenViewProvider,
+  libraryWebview?: LibraryWebviewViewProvider
 ) {
-  // ... existing registrations
-  registerMyNewCommand(context, provider);
+  // ...existing registrations
+  registerMyNewCommand(context, cloudinaryService);
 }
 ```
 
-### 3. Add to Package.json
+### 3. Add It to `package.json`
 
 ```json
 {
@@ -53,311 +65,155 @@ function registerAllCommands(
       {
         "command": "cloudinary.myNewCommand",
         "title": "My New Command",
-        "category": "Cloudinary",
-        "icon": "$(symbol-misc)"
+        "category": "Cloudinary"
       }
     ]
   }
 }
 ```
 
-### 4. Add Menu Placement (Optional)
+The library toolbar and context actions are rendered inside the webview, so most new UI affordances do not need `contributes.menus`.
 
-```json
-{
-  "contributes": {
-    "menus": {
-      "view/title": [
-        {
-          "command": "cloudinary.myNewCommand",
-          "when": "view == cloudinaryMediaLibrary",
-          "group": "navigation"
-        }
-      ],
-      "view/item/context": [
-        {
-          "command": "cloudinary.myNewCommand",
-          "when": "viewItem == asset",
-          "group": "inline"
-        }
-      ]
-    }
-  }
-}
-```
+## Extending the Library Webview
 
-## Adding a New Tree Item Type
+The media library is implemented by `src/webview/libraryView.ts` plus the client bundle in `src/webview/client/library.ts`.
 
-### 1. Add the Type
+### Host-side changes
 
-In `src/tree/cloudinaryItem.ts`:
+Use `LibraryWebviewViewProvider` when you need to:
 
-```typescript
-export type CloudinaryItemType = 
-  | 'asset' 
-  | 'folder' 
-  | 'loadMore' 
-  | 'myNewType';  // Add your type
-```
+- send new data into the webview
+- respond to `postMessage(...)` events from the client
+- persist small UI preferences in `context.globalState`
 
-### 2. Handle in Constructor
+Host messages are handled in `handleMessage(...)`. Outbound posts use the private `post(...)` helper, which wraps `webview.postMessage(...)` in a try/catch so late callbacks (prefetches, env-change broadcasts) do not throw `Webview is disposed` after a view collapses. Add new helpers via the same wrapper rather than calling `webview.postMessage` directly.
 
-```typescript
-else if (type === 'myNewType') {
-  this.contextValue = 'myNewType';
-  this.iconPath = new vscode.ThemeIcon('symbol-misc');
-  this.tooltip = 'My new item type';
-  this.command = {
-    command: 'cloudinary.handleMyNewType',
-    title: 'Handle',
-    arguments: [data],
-  };
-}
-```
+When something on the host changes that the client should reflect immediately (env switch, refresh), prefer the existing routes — `envChanged()`, `refresh()`, `setSearch()`, `applyView(...)` — instead of posting raw messages.
 
-### 3. Create Items in Provider
+### Client-side changes
 
-In `src/tree/treeDataProvider.ts`:
+Add interactive behavior in `src/webview/client/`:
 
-```typescript
-const myItem = new CloudinaryItem(
-  'Item Label',
-  vscode.TreeItemCollapsibleState.None,
-  'myNewType',
-  { customData: 'value' },
-  this.cloudName!,
-  this.dynamicFolders
-);
-items.push(myItem);
-```
+- `library.ts` — main row rendering, selection, keyboard nav, message dispatch
+- `libraryVirtualList.ts` — windowed render math (row height fixed at 22px)
+- `libraryRowSplice.ts` — depth-aware splice helper for streaming nested folder appends
+- `libraryIcons.ts` — duplicated SVG icon set used at row-render time (the client cannot import `src/webview/icons.ts`; keep these two in sync when adding a glyph used in both surfaces)
+- `libraryMenu.ts` — context menu
+- `libraryHoverPreview.ts` — delayed thumbnail hover card with metadata strip
 
-### 4. Add Context Menu (Optional)
+These files are bundled by `esbuild.js` into `media/scripts/`.
 
-```json
-{
-  "contributes": {
-    "menus": {
-      "view/item/context": [
-        {
-          "command": "cloudinary.myCommand",
-          "when": "viewItem == myNewType"
-        }
-      ]
-    }
-  }
-}
-```
+### Library UI conventions
 
-## Adding a New Webview
+- **Row height** is fixed at 22px (`--lib-row-height`). Do not introduce variable row heights — virtualization assumes a constant.
+- **Icon slots** are 18×22 flexbox-centered. New row kinds should follow the same pattern: `<indent><twistie><icon><name>` so vertical alignment matches existing rows.
+- **Brand accents** come from `tokens.css` — use `--lib-accent` (sky blue) and the `--lib-accent-soft/-strong` derivatives. Avoid hardcoded colors.
+- **Toolbar groups** are HTML siblings with `gap` for spacing instead of vertical hairline dividers; the utility group uses `margin-left: auto` to push to the right edge.
+- **Search and filters** stay visible in the library header. Do not add toolbar toggles for core browse controls unless the layout changes again.
 
-### 1. Create the Command File
+## Adding a New Webview Panel or View
+
+Use the shared webview helpers in `src/webview/webviewUtils.ts`:
 
 ```typescript
-// src/commands/myWebview.ts
 import * as vscode from "vscode";
-import { createWebviewDocument, getScriptUri } from "../webview/webviewUtils";
-import { escapeHtml } from "../webview/utils/helpers";
-
-let panel: vscode.WebviewPanel | undefined;
-
-function registerMyWebview(context: vscode.ExtensionContext) {
-  context.subscriptions.push(
-    vscode.commands.registerCommand("cloudinary.openMyWebview", () => {
-      if (panel) {
-        panel.reveal();
-        return;
-      }
-
-      panel = vscode.window.createWebviewPanel(
-        "cloudinaryMyWebview",
-        "My Webview",
-        vscode.ViewColumn.One,
-        {
-          enableScripts: true,
-          localResourceRoots: [
-            vscode.Uri.joinPath(context.extensionUri, "src", "webview", "media"),
-          ],
-        }
-      );
-
-      panel.webview.html = createWebviewDocument({
-        title: "My Webview",
-        webview: panel.webview,
-        extensionUri: context.extensionUri,
-        bodyContent: getContent(),
-        inlineScript: "initCommon();",
-      });
-
-      panel.webview.onDidReceiveMessage((message) => {
-        switch (message.command) {
-          case "doSomething":
-            // Handle message
-            break;
-        }
-      });
-
-      panel.onDidDispose(() => {
-        panel = undefined;
-      });
-    })
+import {
+  createWebviewDocument,
+  getScriptUri,
+  getStyleUri,
+} from "../webview/webviewUtils";
+
+function openMyPanel(context: vscode.ExtensionContext) {
+  const panel = vscode.window.createWebviewPanel(
+    "cloudinaryMyPanel",
+    "My Panel",
+    vscode.ViewColumn.One,
+    {
+      enableScripts: true,
+      localResourceRoots: [vscode.Uri.joinPath(context.extensionUri, "media")],
+    }
   );
-}
 
-function getContent(): string {
-  return `
-    <div class="container">
-      <div class="card card--elevated">
-        <div class="card__body">
-          <h2>My Webview</h2>
-          <p>Content here</p>
-          <button class="btn btn--primary" id="myButton">Click Me</button>
-        </div>
-      </div>
-    </div>
-  `;
+  const scriptUri = getScriptUri(panel.webview, context.extensionUri, "my-panel.js");
+  const styleUri = getStyleUri(panel.webview, context.extensionUri, "my-panel.css");
+
+  panel.webview.html = createWebviewDocument({
+    title: "My Panel",
+    webview: panel.webview,
+    extensionUri: context.extensionUri,
+    bodyContent: `<div id="root"></div>`,
+    additionalStyles: [styleUri],
+    additionalScripts: [scriptUri],
+  });
 }
-
-export default registerMyWebview;
-```
-
-### 2. Add Custom JavaScript (Optional)
-
-Create `src/webview/media/scripts/my-webview.js`:
-
-```javascript
-/**
- * My Webview functionality.
- */
-
-function initMyWebview() {
-  const button = document.getElementById('myButton');
-  if (button) {
-    button.addEventListener('click', () => {
-      vscode.postMessage({ command: 'doSomething' });
-    });
-  }
-}
-```
-
-Update the webview to include it:
-
-```typescript
-const myScriptUri = getScriptUri(panel.webview, context.extensionUri, "my-webview.js");
-
-panel.webview.html = createWebviewDocument({
-  // ...
-  additionalScripts: [myScriptUri],
-  inlineScript: "initCommon(); initMyWebview();",
-});
 ```
 
-### 3. Register and Add to Package.json
-
-Same as adding a command (see above).
+Keep styling on VS Code theme tokens such as `--vscode-editor-foreground`.
 
 ## Adding Configuration Options
 
-### 1. Update Configuration Interface
+Configuration still comes from Cloudinary environment files, not VS Code settings.
 
-In `src/config/configUtils.ts`:
+### 1. Update the Config Type
 
-```typescript
-export interface CloudinaryEnvironment {
-  apiKey: string;
-  apiSecret: string;
-  uploadPreset?: string;
-  myNewOption?: string;  // Add your option
-}
-```
+Add the field to `CloudinaryEnvironment` in `src/config/configUtils.ts`.
 
-### 2. Use in Code
+### 2. Thread It Through Activation
 
-```typescript
-const myOption = provider.getConfig().myNewOption || 'default';
-```
+If the option affects runtime behavior, read it during activation or environment switching and write it onto `CloudinaryService` or the specific provider/panel that needs it.
 
-### 3. Document the Option
+### 3. Document It
 
-Update `docs/configuration.md` with the new option.
+Update the relevant docs in `docs/`.
 
 ## Common Patterns
 
 ### Error Handling
 
 ```typescript
-import { handleCloudinaryError } from '../utils/cloudinaryErrorHandler';
+import { handleCloudinaryError } from "../utils/cloudinaryErrorHandler";
 
 try {
-  const result = await cloudinary.api.someMethod();
+  await cloudinaryService.fetchChildren("");
 } catch (err: any) {
-  handleCloudinaryError('Operation failed', err);
+  handleCloudinaryError("Failed to load assets", err);
 }
 ```
 
 ### User Input
 
 ```typescript
-// Input box
 const query = await vscode.window.showInputBox({
-  placeHolder: 'Enter search term',
-  prompt: 'Search assets by public ID',
-  validateInput: (value) => value ? null : 'Cannot be empty'
+  placeHolder: "Enter search term",
+  prompt: "Search assets by public ID",
 });
 
-if (!query) return;  // User cancelled
-
-// Quick pick
-const selected = await vscode.window.showQuickPick(
-  ['Option 1', 'Option 2', 'Option 3'],
-  { placeHolder: 'Select an option' }
-);
+if (!query) {
+  return;
+}
 ```
 
-### Progress Indicator
+### Refreshing the Sidebar
 
 ```typescript
-await vscode.window.withProgress(
-  {
-    location: vscode.ProgressLocation.Notification,
-    title: 'Loading assets...',
-    cancellable: false,
-  },
-  async (progress) => {
-    progress.report({ increment: 0 });
-    // Do work
-    progress.report({ increment: 50 });
-    // More work
-    progress.report({ increment: 100 });
-  }
-);
+await libraryWebview?.refresh();
+await homescreenProvider.refresh();
 ```
 
-### Refresh Tree View
-
-```typescript
-// After modifying data
-provider.refresh();  // Fires _onDidChangeTreeData
-```
+Use the narrowest refresh path you need. Do not recreate deprecated tree-provider refresh flows.
 
 ## Testing Your Changes
 
-1. **Compile**: `npm run compile`
-2. **Launch**: Press `F5` to open Extension Development Host
-3. **Test**: Verify functionality works as expected
-4. **Reload**: Press `Ctrl+R` / `Cmd+R` after code changes
-
-### Manual Testing Checklist
-
-- [ ] Feature works in light and dark themes
-- [ ] Error cases show user-friendly messages
-- [ ] Keyboard navigation works
-- [ ] No console errors in Developer Tools
+1. Run `npm run check-types`.
+2. Run `npm run compile`.
+3. Run `npm run lint` for command and extension changes.
+4. Run `npm run compile-tests` when you add or update tests.
+5. Launch the Extension Development Host with `F5` for manual verification.
 
 ## Code Style Guidelines
 
-1. **TypeScript strict mode** - Fix all type errors
-2. **Use existing patterns** - Follow conventions in similar files
-3. **Escape HTML** - Always use `escapeHtml()` for dynamic content
-4. **Use design system** - Use component classes from `components.css`
-5. **Handle errors** - Use `handleCloudinaryError()` for API errors
-6. **Document** - Add JSDoc comments for public functions
+1. Keep command registration patterns consistent with `src/commands/registerCommands.ts`.
+2. Use `CloudinaryService` for Cloudinary state and API access.
+3. Keep webview host logic in `src/webview/*.ts` and browser-side logic in `src/webview/client/*.ts`.
+4. Use `handleCloudinaryError()` for Cloudinary API failures.
+5. Prefer narrowing documentation claims over describing behavior that is not implemented.
diff --git a/docs/architecture.md b/docs/architecture.md
index 015952a..0d198b6 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -1,30 +1,30 @@
 # Architecture
 
-The extension is built on VS Code's extension API and integrates with Cloudinary's Admin and Upload APIs.
+The extension is a VS Code sidebar integration built around a shared `CloudinaryService` plus webview-based UI surfaces.
 
-### Core Components
+## Core Components
 
-```
+```text
 ┌─────────────────────────────────────────────────────────────┐
-│                     VS Code Extension                        │
+│                     VS Code Extension                       │
 ├─────────────────────────────────────────────────────────────┤
 │  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐       │
-│  │  Tree View   │  │   Webviews   │  │   Commands   │       │
-│  │  (Sidebar)   │  │  (Panels)    │  │  (Actions)   │       │
+│  │ Homescreen   │  │   Library    │  │   Commands   │       │
+│  │  Webview     │  │   Webview    │  │   & Panels   │       │
 │  └──────┬───────┘  └──────┬───────┘  └──────┬───────┘       │
 │         │                 │                 │               │
 │         └────────────┬────┴────────────────┘               │
 │                      │                                      │
 │         ┌────────────▼────────────┐                        │
-│         │  CloudinaryTreeProvider │                        │
-│         │  (State & API Layer)    │                        │
+│         │    CloudinaryService    │                        │
+│         │  State + API boundary   │                        │
 │         └────────────┬────────────┘                        │
 │                      │                                      │
 ├──────────────────────┼──────────────────────────────────────┤
 │                      │                                      │
 │         ┌────────────▼────────────┐                        │
-│         │    Cloudinary SDK       │                        │
-│         │    (Node.js v2)         │                        │
+│         │ Cloudinary SDK Adapter  │                        │
+│         │  wraps Node SDK usage   │                        │
 │         └────────────┬────────────┘                        │
 │                      │                                      │
 └──────────────────────┼──────────────────────────────────────┘
@@ -37,17 +37,13 @@ The extension is built on VS Code's extension API and integrates with Cloudinary
            └───────────────────────┘
 ```
 
-### Key Design Decisions
-
-1. **Configuration via files, not settings** - API secrets are stored in `~/.cloudinary/environments.json`, not VS Code settings (which could be committed to repos)
-
-2. **Singleton provider** - `CloudinaryTreeDataProvider` holds all state and manages API calls
-
-3. **External CSS/JS for webviews** - Styles and scripts are loaded from files, not embedded in HTML strings
+## Key Design Decisions
 
-4. **Centralized icons** - SVG icons are defined once in `src/webview/icons.ts`
-
-5. **Shared utilities** - Common functions like `escapeHtml` are in `src/webview/utils/helpers.ts`
+1. Configuration lives in Cloudinary environment files, not VS Code settings.
+2. `CloudinaryService` owns runtime Cloudinary state such as credentials, folder mode, and upload presets.
+3. The sidebar is webview-driven: `cloudinaryHomescreen` and `cloudinaryMediaLibrary` are both webview views.
+4. Webview host code lives in `src/webview/*.ts`; browser-side behavior lives in `src/webview/client/*.ts`.
+5. The Cloudinary SDK is wrapped behind `createCloudinarySdkAdapter()` so service logic stays testable.
 
 ## Technology Stack
 
@@ -56,85 +52,89 @@ The extension is built on VS Code's extension API and integrates with Cloudinary
 | Language | TypeScript (strict mode) |
 | Build | esbuild |
 | Runtime | VS Code Extension Host (Node.js) |
-| API Client | Cloudinary Node.js SDK v2.x |
+| API Client | Cloudinary Node.js SDK v2.x via adapter |
 | Testing | Mocha + VS Code Test Electron |
 | Linting | ESLint |
 
 ## Data Flow
 
-### Configuration Loading
+### Activation and Configuration
 
-```
+```text
 1. Extension activates
-2. Check for workspace config (.cloudinary/environments.json)
-3. Fall back to global config (~/.cloudinary/environments.json)
-4. Validate credentials (reject placeholder values)
-5. Configure Cloudinary SDK
-6. Detect folder mode (dynamic vs fixed)
+2. Load environments from .cloudinary/environments.json or ~/.cloudinary/environments.json
+3. Validate credentials and configure the Cloudinary SDK
+4. Detect folder mode and cache it in global state
+5. Create shared CloudinaryService
+6. Register homescreen and library webview providers
+7. Register commands against the shared service/providers
 ```
 
-### Tree View Population
+### Library Loading
 
-```
-1. VS Code calls provider.getChildren()
-2. Provider checks cache (assetMap)
-3. If not cached, fetch from API
-4. Transform to CloudinaryItem instances
-5. Return items to VS Code
+```text
+1. Library webview posts "ready"
+2. LibraryWebviewViewProvider reads current view state
+3. Provider calls CloudinaryService for folders/assets/search results
+4. Provider posts root/search/folder messages to the client
+5. Client renders the virtualized tree/list UI
 ```
 
+The library renders a compact header (brand strip, action toolbar, filter controls, and search field) above the virtualized list:
+
+- **Brand strip** — Cloudinary logo, wordmark, and active cloud name pill. The pill is populated from the `envChanged` message posted on `ready` and on every environment switch.
+- **Action toolbar** — icon-button groups for navigation, refresh, upload, and configuration. Search and filtering are not toolbar toggles; those controls remain visible below the toolbar.
+- **Search and filter controls** — resource type, sort order, and search input stay visible so the core browse controls are always one interaction away.
+- **Row grid** — every row is 22px tall with three uniform 18px slots (twistie · icon · spacer) so folders, assets, loading, and clear-search rows share an exact rhythm. Row content is flex-centered so glyphs and labels sit in the middle of the selection band.
+- **Folder iconography** — separate closed (stroked outline) and open (filled, two-tone) glyphs so expand state reads from the icon as well as the chevron rotation.
+- **Authenticated delivery** — assets with `type: authenticated` are marked with a lock in the list and preview. The service signs the original delivery URL and reuses it for preview fields instead of generating dynamic optimization/thumbnail transformations.
+- **Hover preview** — narrow card with a brand-gradient hairline, 176×176 thumbnail, resource-type chip, and truncated caption. Smart left/right placement based on viewport edges.
+- **Welcome empty state** — gradient-edged card shown when no credentials are configured; CTA button posts `runToolbar` `openGlobalConfig`.
+- **Reduced motion** — all animations and transitions are disabled under `@media (prefers-reduced-motion: reduce)`.
+
 ### Webview Communication
 
-```
-Extension                          Webview
-    │                                  │
-    │  panel.webview.html = ...        │
-    │──────────────────────────────────>│
-    │                                  │
-    │  vscode.postMessage({...})       │
-    │<──────────────────────────────────│
-    │                                  │
-    │  panel.webview.postMessage({...})│
-    │──────────────────────────────────>│
-    │                                  │
+```text
+Extension host                     Webview client
+     │                                  │
+     │ webview.html = ...               │
+     │─────────────────────────────────>│
+     │                                  │
+     │ postMessage({ command: ... })    │
+     │─────────────────────────────────>│
+     │                                  │
+     │ onDidReceiveMessage(...)         │
+     │<─────────────────────────────────│
 ```
 
+The homescreen drives navigation and search entry points. The library handles browsing, filtering, sorting, selection, context actions, and scroll state.
+
+Both webview view providers route outbound messages through a defensive `safePost` helper that swallows `Webview is disposed` errors. This protects against late callbacks (search prefetches, upload progress, env-change refreshes) firing after a view collapses or the user dismisses an editor panel.
+
 ## VS Code Integration Points
 
-### Package.json Contributions
+### `package.json` Contributions
 
 | Contribution | Purpose |
 |--------------|---------|
-| `viewsContainers.activitybar` | Cloudinary icon in sidebar |
-| `views.cloudinary` | Tree view registration |
-| `commands` | Command definitions |
-| `menus.view/title` | Tree view title bar buttons |
-| `menus.view/item/context` | Right-click context menu |
-
-### Tree Item Context Values
+| `viewsContainers.activitybar` | Cloudinary icon in the activity bar |
+| `views.cloudinary` | Registers the homescreen and library webview views |
+| `commands` | Command definitions used by webviews and panels |
 
-| Context Value | Description |
-|---------------|-------------|
-| `asset` | Media file (enables copy commands) |
-| `folder` | Directory (enables upload to folder) |
-| `loadMore` | Pagination trigger |
-| `clearSearch` | Clear search results |
+Most toolbar and context actions are now implemented inside the library webview rather than through `contributes.menus`.
 
 ## Error Handling
 
-All Cloudinary API errors flow through `handleCloudinaryError()`:
+Cloudinary-facing failures should go through `handleCloudinaryError()`:
 
 ```typescript
-import { handleCloudinaryError } from '../utils/cloudinaryErrorHandler';
+import { handleCloudinaryError } from "../utils/cloudinaryErrorHandler";
 
 try {
-  await cloudinary.search.execute();
+  await cloudinaryService.searchAssets("hero");
 } catch (err: any) {
-  handleCloudinaryError('Failed to search assets', err);
+  handleCloudinaryError("Failed to search assets", err);
 }
 ```
 
-The handler:
-1. Extracts message from various error formats
-2. Shows VS Code error notification
-3. Offers "Open Global Config" action for credential errors
+The handler normalizes Cloudinary SDK errors and surfaces user-facing actions for common credential problems.
diff --git a/docs/project-structure.md b/docs/project-structure.md
index 4de1ddd..3366833 100644
--- a/docs/project-structure.md
+++ b/docs/project-structure.md
@@ -1,23 +1,24 @@
 # Project Structure
 
-This document explains the organization of the Cloudinary VS Code Extension codebase.
+This document describes the current organization of the Cloudinary VS Code extension after the move to webview-based sidebar views.
 
 ## Directory Overview
 
-```
+```text
 cloudinary-vscode/
 ├── src/                        # TypeScript source code
 │   ├── extension.ts            # Extension entry point
-│   ├── commands/               # Command implementations
-│   ├── tree/                   # Tree view (sidebar)
+│   ├── cloudinary/             # Service layer and SDK adapter
+│   ├── commands/               # Command registrations and handlers
 │   ├── config/                 # Configuration utilities
 │   ├── utils/                  # Shared utilities
-│   ├── webview/                # Webview design system
+│   ├── webview/                # Webview hosts, client code, and design system
 │   └── test/                   # Test files
-├── dist/                       # Bundled output (esbuild)
-├── out/                        # TypeScript output (for tests)
+├── media/                      # Built webview CSS and JS assets
+├── dist/                       # Bundled extension output
+├── out/                        # TypeScript output for tests
 ├── docs/                       # Documentation
-├── resources/                  # Static assets (icons)
+├── resources/                  # Static assets and icons
 ├── package.json                # Extension manifest
 ├── tsconfig.json               # TypeScript configuration
 ├── esbuild.js                  # Build script
@@ -28,193 +29,173 @@ cloudinary-vscode/
 
 ### Entry Point
 
-**`extension.ts`** - Extension lifecycle management
+**`extension.ts`** initializes the shared runtime:
+
+- creates `CloudinaryService`
+- loads Cloudinary environment credentials
+- detects folder mode
+- registers `HomescreenViewProvider`
+- registers `LibraryWebviewViewProvider`
+- registers commands against the shared service and providers
+
+### Cloudinary Layer (`src/cloudinary/`)
 
-- `activate()` - Called when extension starts
-- Creates `CloudinaryTreeDataProvider`
-- Loads configuration
-- Registers commands and tree view
+| File | Purpose |
+|------|---------|
+| `cloudinaryService.ts` | Shared Cloudinary state and high-level operations |
+| `cloudinarySdkAdapter.ts` | Adapter that wraps the Cloudinary SDK |
+| `types.ts` | Shared Cloudinary-facing types |
 
 ### Commands (`src/commands/`)
 
-Each file exports a registration function:
+Each file exports a registration function.
 
 | File | Commands | Purpose |
 |------|----------|---------|
-| `registerCommands.ts` | - | Central registration, imports all commands |
+| `registerCommands.ts` | - | Central registration entry point |
 | `previewAsset.ts` | `cloudinary.openAsset` | Asset preview panel |
 | `uploadWidget.ts` | `cloudinary.openUploadWidget`, `cloudinary.uploadToFolder` | Upload panel |
-| `welcomeScreen.ts` | `cloudinary.showWelcome` | Welcome/onboarding screen |
-| `searchAssets.ts` | `cloudinary.searchAssets` | Search by public ID |
-| `copyCommands.ts` | `cloudinary.copyPublicId`, `cloudinary.copySecureUrl` | Clipboard operations |
+| `welcomeScreen.ts` | `cloudinary.openWelcomeScreen` | Welcome/onboarding panel |
+| `searchAssets.ts` | `cloudinary.searchAssets` | Focus homescreen search |
+| `copyCommands.ts` | `cloudinary.copyPublicId`, `cloudinary.copyUrl`, `cloudinary.copyOptimizedUrl` | Clipboard operations |
 | `switchEnvironment.ts` | `cloudinary.switchEnvironment` | Environment switching |
-| `clearSearch.ts` | `cloudinary.clearSearch` | Clear search filter |
-| `viewOptions.ts` | `cloudinary.setResourceFilter` | Filter by type |
+| `clearSearch.ts` | `cloudinary.clearSearch` | Clear library search |
+| `viewOptions.ts` | `cloudinary.viewOptions` | Filter and sort library contents |
+| `configureAiTools.ts` | `cloudinary.configureAiTools` | AI tools setup flow |
 
-### Tree View (`src/tree/`)
-
-| File | Purpose |
-|------|---------|
-| `treeDataProvider.ts` | `TreeDataProvider` implementation, state management, API calls |
-| `cloudinaryItem.ts` | `TreeItem` subclass for assets, folders, and UI elements |
-
-**CloudinaryTreeDataProvider** holds:
-- Credentials (`cloudName`, `apiKey`, `apiSecret`)
-- View state (current folder, search query, filter)
-- Asset cache (`assetMap`)
-- Upload presets
+Command handlers now generally accept `CloudinaryService`, a narrow environment target, or a webview provider rather than a tree provider.
 
 ### Configuration (`src/config/`)
 
 | File | Purpose |
 |------|---------|
-| `configUtils.ts` | Load/validate configuration files |
-| `detectFolderMode.ts` | Detect dynamic vs fixed folder mode |
+| `configUtils.ts` | Load and validate Cloudinary environment files |
+| `detectFolderMode.ts` | Detect dynamic versus fixed folder mode |
 
 ### Utilities (`src/utils/`)
 
 | File | Purpose |
 |------|---------|
-| `cloudinaryErrorHandler.ts` | Consistent error display with VS Code UI |
-| `userAgent.ts` | Generate user agent for API calls |
+| `cloudinaryErrorHandler.ts` | Consistent Cloudinary error handling |
+| `userAgent.ts` | Extension user-agent generation |
 
 ### Webview System (`src/webview/`)
 
-The webview module provides a design system for building consistent UIs:
+The webview module now contains both sidebar views and the reusable UI system used by panels.
 
-```
+```text
 src/webview/
-├── index.ts                    # Public exports
-├── tokens.ts                   # Design tokens (colors, spacing)
-├── baseStyles.ts               # CSS reset, typography
-├── icons.ts                    # Centralized SVG icons
+├── homescreenView.ts           # Sidebar homescreen host
+├── libraryView.ts              # Sidebar media library host
 ├── webviewUtils.ts             # HTML generation helpers
-├── components/                 # UI components
-│   ├── index.ts                # Component exports
-│   ├── button.ts               # Button styles
-│   ├── card.ts                 # Card/panel styles
-│   ├── tabs.ts                 # Tab navigation
-│   ├── input.ts                # Form inputs
-│   ├── dropZone.ts             # File upload drop zone
-│   ├── progressBar.ts          # Progress indicators
-│   ├── badge.ts                # Tags and badges
-│   ├── infoRow.ts              # Key-value display
-│   ├── lightbox.ts             # Image lightbox
-│   └── layout.ts               # Layout components
-├── utils/                      # Webview utilities
-│   ├── index.ts                # Utility exports
-│   ├── helpers.ts              # escapeHtml, formatFileSize, etc.
-│   ├── clipboard.ts            # Clipboard functionality
-│   └── messaging.ts            # VS Code API wrappers
-├── scripts/                    # TypeScript for client-side JS
-│   ├── index.ts
-│   ├── uploadWidget.ts
-│   ├── previewAsset.ts
-│   └── welcomeScreen.ts
-└── media/                      # External CSS/JS files
-    ├── styles/
-    │   ├── tokens.css          # CSS custom properties
-    │   ├── base.css            # Base styles
-    │   └── components.css      # Component styles
-    └── scripts/
-        ├── common.js           # Shared client-side utilities
-        ├── upload-widget.js    # Upload panel functionality
-        └── welcome.js          # Welcome screen functionality
+├── client/                     # Browser-side TypeScript
+│   ├── homescreen.ts
+│   ├── library.ts              # Library main client
+│   ├── libraryIcons.ts         # SVG glyphs (duplicate of host icons.ts subset)
+│   ├── libraryTypes.ts         # Duplicated message-protocol types
+│   ├── libraryVirtualList.ts   # Virtualization math (22px row height)
+│   ├── libraryRowSplice.ts     # Depth-aware splice helper
+│   ├── libraryMenu.ts          # Context menu
+│   ├── libraryHoverPreview.ts  # Hover thumbnail card with metadata
+│   ├── preview.ts
+│   ├── upload-widget.ts
+│   └── welcome.ts
+├── components/                 # Shared styles/helpers for webviews
+├── utils/                      # Webview-side utilities
+├── scripts/                    # Host-side script entry definitions
+├── baseStyles.ts
+├── icons.ts
+├── index.ts
+└── tokens.ts
 ```
 
-See [Webview System](./webview-system.md) for detailed documentation.
+`src/webview/client/` is bundled into `media/scripts/` by `esbuild.js`.
 
 ## Configuration Files
 
 ### `package.json`
 
-Extension manifest defining:
-- Extension metadata (name, version, publisher)
-- Activation events
-- Contributed commands, views, and menus
-- Dependencies
+Defines:
+
+- extension metadata
+- sidebar view contributions
+- command contributions
+- build and test scripts
+
+The sidebar now contributes two webview views: `cloudinaryHomescreen` and `cloudinaryMediaLibrary`.
 
 ### `tsconfig.json`
 
-TypeScript configuration:
-- Strict mode enabled
-- ES2022 target
-- CommonJS modules (for VS Code)
+TypeScript configuration for type checking and test compilation.
 
 ### `esbuild.js`
 
-Build configuration:
-- Entry: `src/extension.ts`
-- Output: `dist/extension.js`
-- Externals: `vscode` module
-- Source maps enabled
+Bundles the extension entry point into `dist/extension.js` and builds the webview client assets into `media/`.
 
 ## Output Directories
 
 ### `dist/`
 
-Production bundle created by esbuild:
-- `extension.js` - Bundled extension code
-- `extension.js.map` - Source map
+Bundled extension output used by VS Code.
 
 ### `out/`
 
-TypeScript compilation output (for tests):
-- Mirrors `src/` structure
-- Used by test runner
+Compiled test output used by the extension-host test runner.
+
+### `media/`
+
+Built JS and CSS consumed by webviews.
 
 ## Resources
 
 ### `resources/`
 
-Static assets:
-- `cloudinary_icon_blue.png` - Extension icon
-- `icon-image.svg`, `icon-video.svg`, `icon-file.svg` - Tree item icons
+Static extension assets such as the Cloudinary icon.
 
 ## Key Patterns
 
 ### Command Registration
 
 ```typescript
-// src/commands/myCommand.ts
 function registerMyCommand(
   context: vscode.ExtensionContext,
-  provider: CloudinaryTreeDataProvider
+  cloudinaryService: CloudinaryService
 ) {
   context.subscriptions.push(
     vscode.commands.registerCommand("cloudinary.myCommand", async () => {
+      if (!cloudinaryService.cloudName) {
+        return;
+      }
+
       // Implementation
     })
   );
 }
-export default registerMyCommand;
 ```
 
-### Tree Item Creation
+### Webview HTML Generation
 
 ```typescript
-new CloudinaryItem(
-  'Label',
-  vscode.TreeItemCollapsibleState.Collapsed,
-  'folder',  // type
-  { path: '/products' },  // data
-  cloudName,
-  dynamicFolders
-);
+import {
+  createWebviewDocument,
+  getScriptUri,
+  getStyleUri,
+} from "../webview/webviewUtils";
+
+view.webview.html = createWebviewDocument({
+  title: "My View",
+  webview: view.webview,
+  extensionUri: context.extensionUri,
+  bodyContent: `<div id="root"></div>`,
+  additionalStyles: [getStyleUri(view.webview, context.extensionUri, "my-view.css")],
+  additionalScripts: [getScriptUri(view.webview, context.extensionUri, "my-view.js")],
+});
 ```
 
-### Webview HTML Generation
+### Library Refresh
 
 ```typescript
-import { createWebviewDocument, getScriptUri } from "../webview/webviewUtils";
-
-panel.webview.html = createWebviewDocument({
-  title: "My Panel",
-  webview: panel.webview,
-  extensionUri: context.extensionUri,
-  bodyContent: getHtmlContent(),
-  additionalScripts: [getScriptUri(webview, extensionUri, "my-script.js")],
-  inlineScript: "initCommon(); initMyPanel();",
-});
+await libraryWebview?.refresh();
 ```
 
+Use provider methods instead of relying on removed tree-provider APIs.
diff --git a/docs/setup.md b/docs/setup.md
index 903904a..47053ab 100644
--- a/docs/setup.md
+++ b/docs/setup.md
@@ -85,9 +85,9 @@ npm test
 After making changes, verify:
 
 - [ ] Extension activates without errors
-- [ ] Tree view populates with folders/assets
+- [ ] Media library populates with folders/assets
 - [ ] Commands work from command palette
-- [ ] Context menus appear on correct items
+- [ ] Library context menu appears on asset and folder rows
 - [ ] Webviews display correctly in light and dark themes
 - [ ] Upload functionality works
 - [ ] Error messages are user-friendly
@@ -125,7 +125,7 @@ When debugging the extension:
 |---------|-------------|
 | `Developer: Reload Window` | Reload after code changes |
 | `Developer: Toggle Developer Tools` | Open browser dev tools for webviews |
-| `Cloudinary: Show Welcome` | Test the welcome screen |
+| `Cloudinary: Open Welcome Guide` | Test the welcome screen |
 | `Cloudinary: Upload` | Test the upload panel |
 
 ## Troubleshooting
@@ -136,7 +136,7 @@ When debugging the extension:
 2. Verify `main` in package.json points to `dist/extension.js`
 3. Run `npm run compile` to check for TypeScript errors
 
-### Tree View Empty
+### Media Library Empty
 
 1. Check credentials in config file
 2. Verify network connectivity
@@ -147,4 +147,3 @@ When debugging the extension:
 1. Open Developer Tools (`Help → Toggle Developer Tools`)
 2. Check Console tab for JavaScript errors
 3. Verify Content Security Policy allows your resources
-
diff --git a/docs/webview-system.md b/docs/webview-system.md
index 6b36580..a8c3f9d 100644
--- a/docs/webview-system.md
+++ b/docs/webview-system.md
@@ -1,23 +1,34 @@
 # Webview System
 
-The extension uses a modular design system for building webview UIs. CSS and JavaScript are loaded from external files, providing better maintainability and debugging.
+The extension uses a modular design system for building webview UIs. CSS is loaded from `media/styles/`, and browser-side TypeScript entry points are bundled into `media/scripts/` by `esbuild.js`.
 
 ## Architecture
 
 ```
 src/webview/
-├── media/                      # External files loaded at runtime
-│   ├── styles/
-│   │   ├── tokens.css          # Design tokens (CSS custom properties)
-│   │   ├── base.css            # Reset, typography, utilities
-│   │   └── components.css      # Component styles
-│   └── scripts/
-│       ├── common.js           # Shared utilities (tabs, copy, collapsibles)
-│       ├── upload-widget.js    # Upload-specific functionality
-│       └── welcome.js          # Welcome screen functionality
+├── client/                     # Browser-side TypeScript entry points
+│   ├── common.ts               # Shared webview utilities
+│   ├── homescreen.ts           # Homescreen sidebar client
+│   ├── library.ts              # Media library sidebar client
+│   ├── preview.ts              # Asset preview client
+│   ├── upload-widget.ts        # Upload panel client
+│   └── welcome.ts              # Welcome panel client
 ├── webviewUtils.ts             # HTML generation and CSP helpers
-├── icons.ts                    # Centralized SVG icons
+├── icons.ts                    # Centralized host-side SVG icons
 └── utils/helpers.ts            # Shared utilities (escapeHtml, etc.)
+
+media/
+├── styles/                     # CSS loaded by webviews
+│   ├── tokens.css              # Design tokens (CSS custom properties)
+│   ├── base.css                # Reset, typography, utilities
+│   ├── components.css          # Component styles
+│   └── library.css             # Library-specific styling
+└── scripts/                    # Built browser bundles from src/webview/client/
+    ├── homescreen.js
+    ├── library.js
+    ├── preview.js
+    ├── upload-widget.js
+    └── welcome.js
 ```
 
 ## Creating a Webview
@@ -37,12 +48,12 @@ function openMyPanel(context: vscode.ExtensionContext) {
     {
       enableScripts: true,
       localResourceRoots: [
-        vscode.Uri.joinPath(context.extensionUri, "src", "webview", "media"),
+        vscode.Uri.joinPath(context.extensionUri, "media"),
       ],
     }
   );
 
-  // Optional: Add custom script
+  // Optional: add a bundled client entry from media/scripts/.
   const myScriptUri = getScriptUri(panel.webview, context.extensionUri, "my-script.js");
 
   panel.webview.html = createWebviewDocument({
@@ -52,7 +63,6 @@ function openMyPanel(context: vscode.ExtensionContext) {
     bodyContent: getMyContent(),
     bodyClass: "layout-centered",  // Optional
     additionalScripts: [myScriptUri],  // Optional
-    inlineScript: "initCommon(); initMyPanel();",  // Required
   });
 
   // Handle messages from webview
@@ -64,10 +74,11 @@ function openMyPanel(context: vscode.ExtensionContext) {
 
 ### Key Points
 
-1. **Always call `initCommon()`** in the inline script - this initializes tabs, copy buttons, and collapsibles
-2. **Use `escapeHtml()`** for any dynamic content
-3. **Import icons** from the centralized module
-4. **Specify `localResourceRoots`** to allow loading external files
+1. **Bundle client behavior from `src/webview/client/`** and add the entry point to `esbuild.js`
+2. **Call `initCommon()` from the client entry** when you need tabs, copy buttons, collapsibles, or lightbox behavior
+3. **Use `escapeHtml()`** for any dynamic content
+4. **Import icons** from the centralized module
+5. **Specify `localResourceRoots`** to allow loading external files
 
 ## CSS Architecture
 
@@ -122,48 +133,48 @@ Styles for all UI components:
 | Drop Zone | `.drop-zone`, `.drop-zone--active` |
 | Lightbox | `.lightbox`, `.lightbox__content` |
 
-## JavaScript Architecture
+## Client Script Architecture
 
-### Common Script (`common.js`)
+### Common Client Module (`src/webview/client/common.ts`)
 
-Shared functionality loaded by all webviews:
+Shared functionality imported by webview client entries:
 
-```javascript
-// Initialize all common functionality
-function initCommon() {
-  initVSCode();      // acquireVsCodeApi()
-  initTabs();        // Tab switching
-  initCopyButtons(); // Copy to clipboard
-  initCollapsibles();// Expandable sections
-  initLightbox();    // Image lightbox
-}
+```typescript
+import { initCommon, getVSCode } from "./common";
 
-// Utility functions
-function copyToClipboard(text) { ... }
-function formatFileSize(bytes) { ... }
-function truncateString(str, maxLength) { ... }
+initCommon();
+const vscode = getVSCode();
 ```
 
+`initCommon()` initializes the VS Code API bridge plus shared tabs, copy buttons, collapsibles, and lightbox behavior. The module also exports helpers such as `copyToClipboard(...)`, `formatFileSize(...)`, and `truncateString(...)`.
+
 ### View-Specific Scripts
 
 Each webview can have its own script:
 
 | Script | Purpose | Init Function |
 |--------|---------|---------------|
-| `upload-widget.js` | File uploads, progress, presets | `initUploadWidget(config)` |
+| `homescreen.js` | Sidebar homescreen and AI tools setup | (auto-init) |
+| `library.js` | Sidebar media library browsing UI | (auto-init) |
+| `preview.js` | Asset preview panel behavior | (auto-init) |
+| `upload-widget.js` | File uploads, progress, presets | `initUploadWidget(config)` for server-provided config |
 | `welcome.js` | Welcome screen interactions | (auto-init) |
 
 ### Initialization Pattern
 
-```javascript
-// In inline script
-initCommon();  // Always first
-initUploadWidget({
-  cloudName: "my-cloud",
-  presets: [...]
+```typescript
+// src/webview/client/my-panel.ts
+import { initCommon, getVSCode } from "./common";
+
+initCommon();
+
+document.getElementById("myButton")?.addEventListener("click", () => {
+  getVSCode()?.postMessage({ command: "doSomething" });
 });
 ```
 
+Use `inlineScript` only when the extension host must pass runtime data into the already-loaded client bundle, as the upload panel does with `initUploadWidget({ ... })`.
+
 ## Content Security Policy
 
 The `createWebviewDocument` function generates a secure CSP:
@@ -317,8 +328,8 @@ panel.webview.onDidReceiveMessage((message) => {
 
 ## Adding a New Component
 
-1. **Add styles** to `src/webview/media/styles/components.css`
-2. **Add JavaScript** (if needed) to `src/webview/media/scripts/common.js`
+1. **Add styles** to the relevant file in `media/styles/`
+2. **Add TypeScript** (if needed) to `src/webview/client/`
 3. **Add TypeScript generator** (if complex) to `src/webview/components/`
 4. **Export** from `src/webview/components/index.ts`
 
diff --git a/esbuild.js b/esbuild.js
index c32bb96..b8b5f69 100644
--- a/esbuild.js
+++ b/esbuild.js
@@ -26,6 +26,7 @@ async function main() {
       "src/webview/client/upload-widget.ts",
       "src/webview/client/welcome.ts",
       "src/webview/client/homescreen.ts",
+      "src/webview/client/library.ts",
     ],
     bundle: true,
     format: "iife",
@@ -60,7 +61,7 @@ const esbuildProblemMatcherPlugin = {
         console.error(`✘ [ERROR] ${text}`);
         if (location == null) return;
         console.error(
-          `    ${location.file}:${location.line}:${location.column}:`
+          `    ${location.file}:${location.line}:${location.column}:`,
         );
       });
       console.log("[watch] build finished");
diff --git a/media/styles/components.css b/media/styles/components.css
index 31aa053..054a9ac 100644
--- a/media/styles/components.css
+++ b/media/styles/components.css
@@ -350,6 +350,7 @@
 .badge {
   display: inline-flex;
   align-items: center;
+  gap: 0.25rem;
   padding: 0.15rem 0.5rem;
   font-size: var(--font-xs);
   font-weight: 500;
@@ -364,6 +365,18 @@
   color: white;
 }
 
+.badge--auth {
+  background-color: color-mix(in srgb, var(--vscode-charts-yellow, #cca700) 18%, var(--vscode-badge-background));
+  color: var(--vscode-foreground);
+  border: 1px solid color-mix(in srgb, var(--vscode-charts-yellow, #cca700) 45%, transparent);
+}
+
+.badge svg {
+  flex: 0 0 auto;
+  width: 0.85rem;
+  height: 0.85rem;
+}
+
 .badge--pill { border-radius: var(--radius-full); }
 
 /* ========================================
@@ -768,6 +781,7 @@
   display: flex;
   align-items: center;
   gap: var(--space-sm);
+  flex-wrap: wrap;
 }
 
 /* Hero section */
diff --git a/media/styles/homescreen.css b/media/styles/homescreen.css
index c0eb507..1fbdf5f 100644
--- a/media/styles/homescreen.css
+++ b/media/styles/homescreen.css
@@ -2,9 +2,15 @@
  * Homescreen sidebar panel styles.
  */
 
-* { box-sizing: border-box; margin: 0; padding: 0; }
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
 
-body { background: var(--vscode-sideBar-background); }
+body {
+  background: var(--vscode-sideBar-background);
+}
 
 .hs-root {
   display: flex;
@@ -23,21 +29,27 @@ body { background: var(--vscode-sideBar-background); }
   flex-shrink: 0;
   animation: hs-in 0.18s ease both;
 }
+
 .hs-header::before {
   content: '';
   position: absolute;
-  top: -24px; right: -24px;
-  width: 110px; height: 110px;
-  background: rgba(255,255,255,0.06);
+  top: -24px;
+  right: -24px;
+  width: 110px;
+  height: 110px;
+  background: rgba(255, 255, 255, 0.06);
   border-radius: 50%;
   pointer-events: none;
 }
+
 .hs-header::after {
   content: '';
   position: absolute;
-  bottom: -32px; left: 30px;
-  width: 70px; height: 70px;
-  background: rgba(255,255,255,0.04);
+  bottom: -32px;
+  left: 30px;
+  width: 70px;
+  height: 70px;
+  background: rgba(255, 255, 255, 0.04);
   border-radius: 50%;
   pointer-events: none;
 }
@@ -50,18 +62,38 @@ body { background: var(--vscode-sideBar-background); }
   margin-bottom: 10px;
   position: relative;
 }
+
 .hs-brand-left {
   display: flex;
   align-items: center;
   gap: 8px;
 }
-.hs-brand-icon { width: 22px; height: 22px; flex-shrink: 0; }
+
+.hs-brand-logo-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 22px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid rgba(255, 255, 255, 0.38);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  flex-shrink: 0;
+}
+
+.hs-brand-logo {
+  display: block;
+  width: 19px;
+  height: auto;
+}
+
 .hs-brand-name {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.2px;
   text-transform: uppercase;
-  color: rgba(255,255,255,0.95);
+  color: rgba(255, 255, 255, 0.95);
 }
 
 .hs-cloud-row {
@@ -70,12 +102,14 @@ body { background: var(--vscode-sideBar-background); }
   justify-content: space-between;
   position: relative;
 }
+
 .hs-cloud-col {
   display: flex;
   flex-direction: column;
   gap: 3px;
   min-width: 0;
 }
+
 .hs-cloud-name {
   font-size: 15px;
   font-weight: 600;
@@ -85,42 +119,48 @@ body { background: var(--vscode-sideBar-background); }
   white-space: nowrap;
   max-width: 160px;
 }
+
 .hs-cloud-name--placeholder {
   font-size: 13px;
   font-weight: 400;
-  color: rgba(255,255,255,0.6);
+  color: rgba(255, 255, 255, 0.6);
   font-style: italic;
 }
+
 .hs-folder-mode {
   font-size: 10px;
-  color: rgba(255,255,255,0.5);
+  color: rgba(255, 255, 255, 0.5);
   font-weight: 400;
   letter-spacing: 0.2px;
   white-space: nowrap;
 }
+
 .hs-configure-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 22px;
   height: 22px;
-  background: rgba(255,255,255,0.1);
-  border: 1px solid rgba(255,255,255,0.12);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 4px;
   cursor: pointer;
-  color: rgba(255,255,255,0.7);
+  color: rgba(255, 255, 255, 0.7);
   flex-shrink: 0;
   transition: background 0.12s, color 0.12s;
   padding: 0;
 }
+
 .hs-configure-btn:hover {
-  background: rgba(255,255,255,0.2);
+  background: rgba(255, 255, 255, 0.2);
   color: #fff;
 }
+
 .hs-configure-btn:focus-visible {
-  outline: 1px solid rgba(255,255,255,0.5);
+  outline: 1px solid rgba(255, 255, 255, 0.5);
   outline-offset: 1px;
 }
+
 .hs-status-pill {
   display: inline-flex;
   align-items: center;
@@ -130,20 +170,23 @@ body { background: var(--vscode-sideBar-background); }
   font-size: 10px;
   font-weight: 500;
   letter-spacing: 0.2px;
-  color: rgba(255,255,255,0.92);
-  background: rgba(255,255,255,0.14);
+  color: rgba(255, 255, 255, 0.92);
+  background: rgba(255, 255, 255, 0.14);
   flex-shrink: 0;
 }
+
 .hs-status-dot {
-  width: 6px; height: 6px;
+  width: 6px;
+  height: 6px;
   border-radius: 50%;
   background: #4ade80;
-  box-shadow: 0 0 5px rgba(74,222,128,0.8);
+  box-shadow: 0 0 5px rgba(74, 222, 128, 0.8);
   flex-shrink: 0;
 }
+
 .hs-status-dot--warn {
   background: #fbbf24;
-  box-shadow: 0 0 5px rgba(251,191,36,0.8);
+  box-shadow: 0 0 5px rgba(251, 191, 36, 0.8);
 }
 
 /* ── Setup banner ── */
@@ -151,18 +194,27 @@ body { background: var(--vscode-sideBar-background); }
   margin: 10px 10px 0;
   padding: 9px 11px;
   border-radius: 8px;
-  background: rgba(251,191,36,0.08);
-  border: 1px solid rgba(251,191,36,0.22);
+  background: rgba(251, 191, 36, 0.08);
+  border: 1px solid rgba(251, 191, 36, 0.22);
   display: flex;
   align-items: center;
   gap: 8px;
   animation: hs-in 0.2s ease both;
 }
+
 .hs-setup-banner-icon {
-  font-size: 13px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--vscode-notificationsWarningIcon-foreground, #fbbf24);
   flex-shrink: 0;
-  line-height: 1;
 }
+
+.hs-setup-banner-icon svg {
+  width: 13px;
+  height: 13px;
+}
+
 .hs-setup-banner-text {
   flex: 1;
   font-size: 11px;
@@ -170,44 +222,52 @@ body { background: var(--vscode-sideBar-background); }
   opacity: 0.85;
   line-height: 1.4;
 }
+
 .hs-setup-banner-btn {
   flex-shrink: 0;
   font-size: 11px;
   font-weight: 600;
   color: #f59e0b;
-  background: rgba(251,191,36,0.14);
-  border: 1px solid rgba(251,191,36,0.3);
+  background: rgba(251, 191, 36, 0.14);
+  border: 1px solid rgba(251, 191, 36, 0.3);
   border-radius: 5px;
   padding: 3px 9px;
   cursor: pointer;
   font-family: var(--vscode-font-family);
   transition: background 0.12s;
 }
-.hs-setup-banner-btn:hover { background: rgba(251,191,36,0.24); }
+
+.hs-setup-banner-btn:hover {
+  background: rgba(251, 191, 36, 0.24);
+}
 
 /* ── Search ── */
 .hs-search {
   padding: 6px 8px 4px;
   animation: hs-in 0.18s ease 0.02s both;
 }
+
 .hs-search-wrap {
   display: flex;
   align-items: center;
   gap: 6px;
   background: var(--vscode-input-background);
-  border: 1px solid var(--vscode-input-border, rgba(128,128,128,0.28));
+  border: 1px solid var(--vscode-input-border, rgba(128, 128, 128, 0.28));
   border-radius: 6px;
   padding: 0 8px;
   transition: border-color 0.15s;
 }
+
 .hs-search-wrap:focus-within {
   border-color: var(--vscode-focusBorder);
 }
+
 .hs-search-icon {
   color: var(--vscode-input-placeholderForeground);
   flex-shrink: 0;
   pointer-events: none;
 }
+
 .hs-search-input {
   flex: 1;
   background: none;
@@ -219,9 +279,11 @@ body { background: var(--vscode-sideBar-background); }
   padding: 5px 0;
   min-width: 0;
 }
+
 .hs-search-input::placeholder {
   color: var(--vscode-input-placeholderForeground);
 }
+
 .hs-search-clear {
   background: none;
   border: none;
@@ -235,7 +297,11 @@ body { background: var(--vscode-sideBar-background); }
   border-radius: 3px;
   transition: color 0.1s;
 }
-.hs-search-clear:hover { color: var(--vscode-foreground); }
+
+.hs-search-clear:hover {
+  color: var(--vscode-foreground);
+}
+
 .hs-search-clear:focus-visible {
   outline: 1px solid var(--vscode-focusBorder);
 }
@@ -265,32 +331,61 @@ body { background: var(--vscode-sideBar-background); }
   text-align: left;
   transition: background 0.12s ease;
 }
-.hs-action:hover { background: var(--vscode-list-hoverBackground); }
+
+.hs-action:hover {
+  background: var(--vscode-list-hoverBackground);
+}
+
 .hs-action:focus-visible {
   outline: 1px solid var(--vscode-focusBorder);
   outline-offset: -1px;
   border-radius: 7px;
 }
+
 .hs-action:disabled {
   cursor: default;
   opacity: 0.55;
 }
-.hs-action:disabled:hover { background: transparent; }
+
+.hs-action:disabled:hover {
+  background: transparent;
+}
 
 .hs-action-icon {
-  width: 30px; height: 30px;
+  width: 30px;
+  height: 30px;
   border-radius: 7px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
-.hs-action-icon--blue  { background: rgba(52,72,197,0.14);  color: #3448C5; }
-.hs-action-icon--green { background: rgba(16,185,129,0.12);  color: #10b981; }
-.hs-action-icon--violet{ background: rgba(139,92,246,0.12);  color: #8b5cf6; }
-.hs-action-icon--amber { background: rgba(245,158,11,0.12);  color: #f59e0b; }
 
-.hs-action-text { flex: 1; min-width: 0; }
+.hs-action-icon--blue {
+  background: rgba(52, 72, 197, 0.14);
+  color: #3448C5;
+}
+
+.hs-action-icon--green {
+  background: rgba(16, 185, 129, 0.12);
+  color: #10b981;
+}
+
+.hs-action-icon--violet {
+  background: rgba(139, 92, 246, 0.12);
+  color: #8b5cf6;
+}
+
+.hs-action-icon--amber {
+  background: rgba(245, 158, 11, 0.12);
+  color: #f59e0b;
+}
+
+.hs-action-text {
+  flex: 1;
+  min-width: 0;
+}
+
 .hs-action-title {
   font-size: 12.5px;
   font-weight: 500;
@@ -300,6 +395,7 @@ body { background: var(--vscode-sideBar-background); }
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
 .hs-action-desc {
   font-size: 10.5px;
   color: var(--vscode-descriptionForeground);
@@ -318,9 +414,9 @@ body { background: var(--vscode-sideBar-background); }
   text-transform: uppercase;
   padding: 2px 6px;
   border-radius: 4px;
-  background: rgba(139,92,246,0.14);
+  background: rgba(139, 92, 246, 0.14);
   color: #8b5cf6;
-  border: 1px solid rgba(139,92,246,0.2);
+  border: 1px solid rgba(139, 92, 246, 0.2);
 }
 
 .hs-chevron {
@@ -329,20 +425,24 @@ body { background: var(--vscode-sideBar-background); }
   opacity: 0.4;
   transition: transform 0.2s;
 }
-.hs-chevron--open { transform: rotate(90deg); }
+
+.hs-chevron--open {
+  transform: rotate(90deg);
+}
 
 .hs-section-divider {
   height: 1px;
   margin: 4px 6px;
-  background: var(--vscode-panel-border, rgba(128,128,128,0.14));
+  background: var(--vscode-panel-border, rgba(128, 128, 128, 0.14));
 }
 
 /* ── Footer ── */
 .hs-footer {
   padding: 8px 16px 12px;
-  border-top: 1px solid var(--vscode-panel-border, rgba(128,128,128,0.12));
+  border-top: 1px solid var(--vscode-panel-border, rgba(128, 128, 128, 0.12));
   animation: hs-in 0.22s ease 0.08s both;
 }
+
 .hs-footer-link {
   display: inline-flex;
   align-items: center;
@@ -356,17 +456,33 @@ body { background: var(--vscode-sideBar-background); }
   font-family: var(--vscode-font-family);
   padding: 0;
 }
-.hs-footer-link:hover { text-decoration: underline; }
-.hs-footer-link:focus-visible { outline: 1px solid var(--vscode-focusBorder); }
+
+.hs-footer-link:hover {
+  text-decoration: underline;
+}
+
+.hs-footer-link:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder);
+}
 
 /* ── Animations ── */
 @keyframes hs-in {
-  from { opacity: 0; transform: translateY(6px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* ── AI Tools accordion ── */
-#hs-btn-ai-tools { user-select: none; }
+#hs-btn-ai-tools {
+  user-select: none;
+}
+
 #hs-btn-ai-tools.expanded {
   background: var(--vscode-list-hoverBackground);
   border-radius: 7px 7px 0 0;
@@ -377,13 +493,15 @@ body { background: var(--vscode-sideBar-background); }
   max-height: 0;
   transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   border-radius: 0 0 7px 7px;
-  background: rgba(255,255,255,0.02);
+  background: rgba(255, 255, 255, 0.02);
   border-top: 1px solid transparent;
 }
+
 .hs-ai-panel.open {
   max-height: 640px;
-  border-top-color: var(--vscode-panel-border, rgba(128,128,128,0.14));
+  border-top-color: var(--vscode-panel-border, rgba(128, 128, 128, 0.14));
 }
+
 .hs-ai-panel-inner {
   padding: 10px 10px 12px;
   display: flex;
@@ -424,10 +542,11 @@ body { background: var(--vscode-sideBar-background); }
   font-family: var(--vscode-font-family);
   color: var(--vscode-dropdown-foreground);
   background: var(--vscode-dropdown-background);
-  border: 1px solid var(--vscode-dropdown-border, rgba(128,128,128,0.3));
+  border: 1px solid var(--vscode-dropdown-border, rgba(128, 128, 128, 0.3));
   border-radius: 4px;
   cursor: pointer;
 }
+
 .hs-ai-platform-select:focus-visible {
   outline: 1px solid var(--vscode-focusBorder);
   outline-offset: 1px;
@@ -448,7 +567,7 @@ body { background: var(--vscode-sideBar-background); }
   align-items: center;
   gap: 2px;
   background: var(--vscode-input-background);
-  border: 1px solid var(--vscode-dropdown-border, rgba(128,128,128,0.3));
+  border: 1px solid var(--vscode-dropdown-border, rgba(128, 128, 128, 0.3));
   border-radius: 5px;
   padding: 2px;
 }
@@ -467,14 +586,17 @@ body { background: var(--vscode-sideBar-background); }
   transition: background 0.12s, color 0.12s;
   white-space: nowrap;
 }
+
 .hs-ai-scope-btn:hover {
   background: var(--vscode-list-hoverBackground);
   color: var(--vscode-foreground);
 }
+
 .hs-ai-scope-btn.active {
   background: var(--vscode-button-background);
   color: var(--vscode-button-foreground);
 }
+
 .hs-ai-scope-btn:focus-visible {
   outline: 1px solid var(--vscode-focusBorder);
   outline-offset: -1px;
@@ -500,24 +622,41 @@ body { background: var(--vscode-sideBar-background); }
 }
 
 /* Loading skeletons */
-.hs-ai-loading { display: flex; flex-direction: column; gap: 6px; }
+.hs-ai-loading {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
 .hs-skeleton {
   height: 22px;
   border-radius: 4px;
-  background: linear-gradient(
-    90deg,
-    rgba(255,255,255,0.04) 0%,
-    rgba(255,255,255,0.09) 50%,
-    rgba(255,255,255,0.04) 100%
-  );
+  background: linear-gradient(90deg,
+      rgba(255, 255, 255, 0.04) 0%,
+      rgba(255, 255, 255, 0.09) 50%,
+      rgba(255, 255, 255, 0.04) 100%);
   background-size: 200% 100%;
   animation: shimmer 1.4s ease infinite;
 }
-.hs-skeleton--short { width: 55%; }
-.hs-skeleton--label { height: 10px; width: 38%; margin-bottom: 4px; }
+
+.hs-skeleton--short {
+  width: 55%;
+}
+
+.hs-skeleton--label {
+  height: 10px;
+  width: 38%;
+  margin-bottom: 4px;
+}
+
 @keyframes shimmer {
-  0%   { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
 }
 
 /* Section headers */
@@ -533,11 +672,12 @@ body { background: var(--vscode-sideBar-background); }
   opacity: 0.8;
   margin-bottom: 5px;
 }
+
 .hs-ai-section-head::after {
   content: '';
   flex: 1;
   height: 1px;
-  background: var(--vscode-panel-border, rgba(128,128,128,0.14));
+  background: var(--vscode-panel-border, rgba(128, 128, 128, 0.14));
 }
 
 /* Checklist items */
@@ -551,15 +691,41 @@ body { background: var(--vscode-sideBar-background); }
   cursor: pointer;
   animation: hs-row-in 0.18s ease both;
 }
-.hs-ai-item:hover { background: var(--vscode-list-hoverBackground); }
-.hs-ai-item:nth-child(1) { animation-delay: .05s; }
-.hs-ai-item:nth-child(2) { animation-delay: .09s; }
-.hs-ai-item:nth-child(3) { animation-delay: .13s; }
-.hs-ai-item:nth-child(4) { animation-delay: .17s; }
-.hs-ai-item:nth-child(5) { animation-delay: .21s; }
+
+.hs-ai-item:hover {
+  background: var(--vscode-list-hoverBackground);
+}
+
+.hs-ai-item:nth-child(1) {
+  animation-delay: .05s;
+}
+
+.hs-ai-item:nth-child(2) {
+  animation-delay: .09s;
+}
+
+.hs-ai-item:nth-child(3) {
+  animation-delay: .13s;
+}
+
+.hs-ai-item:nth-child(4) {
+  animation-delay: .17s;
+}
+
+.hs-ai-item:nth-child(5) {
+  animation-delay: .21s;
+}
+
 @keyframes hs-row-in {
-  from { opacity: 0; transform: translateX(-4px); }
-  to   { opacity: 1; transform: translateX(0); }
+  from {
+    opacity: 0;
+    transform: translateX(-4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 /* Custom checkbox */
@@ -576,20 +742,25 @@ body { background: var(--vscode-sideBar-background); }
   position: relative;
   transition: border-color 0.1s, background 0.1s;
 }
+
 .hs-ai-cb:checked {
   background: var(--vscode-button-background);
   border-color: var(--vscode-button-background);
 }
+
 .hs-ai-cb:checked::after {
   content: '';
   position: absolute;
-  left: 2px; top: -1px;
-  width: 5px; height: 8px;
+  left: 2px;
+  top: -1px;
+  width: 5px;
+  height: 8px;
   border: 1.5px solid var(--vscode-button-foreground);
   border-top: none;
   border-left: none;
   transform: rotate(45deg);
 }
+
 .hs-ai-cb:focus-visible {
   outline: 1px solid var(--vscode-focusBorder);
   outline-offset: 1px;
@@ -615,6 +786,7 @@ body { background: var(--vscode-sideBar-background); }
   color: var(--vscode-descriptionForeground);
   white-space: nowrap;
 }
+
 .hs-ai-item-status::before {
   content: '';
   display: inline-block;
@@ -623,14 +795,22 @@ body { background: var(--vscode-sideBar-background); }
   border-radius: 1px;
   flex-shrink: 0;
 }
-.hs-ai-item-status--ok::before   { background: #4ade80; }
-.hs-ai-item-status--none::before { background: rgba(255,255,255,0.15); }
+
+.hs-ai-item-status--ok::before {
+  background: #4ade80;
+}
+
+.hs-ai-item-status--none::before {
+  background: rgba(255, 255, 255, 0.15);
+}
+
 .hs-ai-platform-badge {
   font-size: 9px;
   font-weight: 400;
   color: var(--vscode-descriptionForeground);
   margin-left: 4px;
 }
+
 .hs-ai-platform-sub {
   display: block;
   font-size: 9px;
@@ -639,7 +819,11 @@ body { background: var(--vscode-sideBar-background); }
   margin-top: 1px;
 }
 
-.hs-ai-item input[type="checkbox"]:disabled { opacity: 0.5; cursor: default; }
+.hs-ai-item input[type="checkbox"]:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
 .hs-ai-hint {
   font-size: 9px;
   color: var(--vscode-descriptionForeground);
@@ -656,14 +840,28 @@ body { background: var(--vscode-sideBar-background); }
   align-items: center;
   justify-content: center;
   font-size: 9px;
-  animation: tick-in 0.2s cubic-bezier(0.34,1.56,0.64,1) both;
+  animation: tick-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
 }
+
 @keyframes tick-in {
-  from { opacity: 0; transform: scale(0); }
-  to   { opacity: 1; transform: scale(1); }
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.hs-ai-item-tick--ok {
+  color: #4ade80;
+}
+
+.hs-ai-item-tick--err {
+  color: var(--vscode-errorForeground);
 }
-.hs-ai-item-tick--ok  { color: #4ade80; }
-.hs-ai-item-tick--err { color: var(--vscode-errorForeground); }
 
 /* Apply button */
 .hs-ai-apply {
@@ -683,16 +881,28 @@ body { background: var(--vscode-sideBar-background); }
   overflow: hidden;
   margin-top: 2px;
 }
+
 .hs-ai-apply::after {
   content: '';
   position: absolute;
   inset: 0;
-  background: rgba(255,255,255,0);
+  background: rgba(255, 255, 255, 0);
   transition: background 0.12s;
 }
-.hs-ai-apply:hover::after { background: rgba(255,255,255,0.08); }
-.hs-ai-apply:disabled { opacity: 0.35; cursor: default; }
-.hs-ai-apply:disabled::after { background: none; }
+
+.hs-ai-apply:hover::after {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.hs-ai-apply:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.hs-ai-apply:disabled::after {
+  background: none;
+}
+
 .hs-ai-apply:focus-visible {
   outline: 1px solid var(--vscode-focusBorder);
   outline-offset: 2px;
@@ -704,8 +914,10 @@ body { background: var(--vscode-sideBar-background); }
   color: var(--vscode-errorForeground);
   padding: 5px 7px;
   border-radius: 4px;
-  background: rgba(241,76,76,0.08);
-  border: 1px solid rgba(241,76,76,0.2);
+  background: rgba(241, 76, 76, 0.08);
+  border: 1px solid rgba(241, 76, 76, 0.2);
 }
 
-.hidden { display: none !important; }
+.hidden {
+  display: none !important;
+}
\ No newline at end of file
diff --git a/media/styles/library.css b/media/styles/library.css
new file mode 100644
index 0000000..3891c7c
--- /dev/null
+++ b/media/styles/library.css
@@ -0,0 +1,926 @@
+/**
+ * Cloudinary Media Library — sidebar webview.
+ * Considered utility: precise rhythm, brand accents, VS Code-native.
+ */
+
+:root {
+  --lib-row-height: 22px;
+  --lib-slot: 18px;
+  --lib-accent: var(--vscode-textLink-foreground, var(--cld-sky-blue));
+  --lib-accent-soft: color-mix(in srgb, var(--lib-accent) 14%, transparent);
+  --lib-accent-softer: color-mix(in srgb, var(--lib-accent) 8%, transparent);
+  --lib-accent-strong: color-mix(in srgb, var(--lib-accent) 26%, transparent);
+  --lib-header-bg: var(--vscode-sideBarSectionHeader-background, var(--vscode-sideBar-background));
+  --lib-header-border: var(--vscode-sideBarSectionHeader-border, var(--vscode-widget-border, transparent));
+  --lib-icon-muted: var(--vscode-icon-foreground);
+}
+
+html,
+body {
+  height: 100vh;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  font-family: var(--vscode-font-family);
+  font-size: var(--vscode-font-size);
+  color: var(--vscode-sideBar-foreground, var(--vscode-foreground));
+  background: var(--vscode-sideBar-background);
+}
+
+/* ========================================
+   Header (brand strip + toolbar)
+   ======================================== */
+.lib-header {
+  flex: 0 0 auto;
+  background: var(--lib-header-bg);
+  border-bottom: 1px solid var(--lib-header-border);
+}
+
+/* Brand strip */
+.lib-brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 12px 6px;
+  border-bottom: 1px solid var(--lib-header-border);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--vscode-descriptionForeground);
+}
+
+.lib-brand__logo-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 5px;
+  background: #fff;
+  border: 1px solid color-mix(in srgb, var(--lib-accent) 24%, transparent);
+  flex-shrink: 0;
+}
+
+.lib-brand__logo {
+  display: block;
+  width: 14px;
+  height: auto;
+}
+
+.lib-brand__name {
+  color: var(--vscode-foreground);
+  font-weight: 600;
+}
+
+.lib-brand__env {
+  margin-left: auto;
+  padding: 1px 7px;
+  max-width: 60%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: 10px;
+  font-family: var(--vscode-editor-font-family, ui-monospace, 'SF Mono', Menlo, monospace);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: none;
+  background: var(--lib-accent-soft);
+  color: var(--lib-accent);
+  transition: background-color 160ms ease;
+}
+
+.lib-brand__env:empty {
+  display: none;
+}
+
+.lib-brand__env:hover {
+  background: var(--lib-accent-strong);
+}
+
+/* Toolbar */
+.lib-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  min-height: 40px;
+}
+
+.lib-tb-group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.lib-tb-group + .lib-tb-group {
+  margin-left: 6px;
+}
+
+.lib-tb-group--utility {
+  margin-left: auto;
+}
+
+.lib-tb-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--lib-icon-muted);
+  cursor: pointer;
+  position: relative;
+  transition:
+    background-color 140ms ease,
+    color 140ms ease,
+    transform 140ms ease;
+}
+
+.lib-tb-btn svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+  transition: transform 140ms ease;
+}
+
+.lib-tb-btn:hover {
+  background: var(--vscode-toolbar-hoverBackground, rgba(90, 93, 94, 0.18));
+  color: var(--vscode-foreground);
+}
+
+.lib-tb-btn:hover svg {
+  transform: translateY(-0.5px);
+}
+
+.lib-tb-btn:active {
+  transform: scale(0.94);
+}
+
+.lib-tb-btn:focus-visible {
+  outline: 1.5px solid var(--lib-accent);
+  outline-offset: 1px;
+}
+
+/* ========================================
+   Filter / sort bar
+   ======================================== */
+.lib-filter {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px 8px;
+  border-top: 1px solid var(--lib-header-border);
+  animation: libFilterIn 140ms ease-out;
+}
+
+@keyframes libFilterIn {
+  from { opacity: 0; transform: translateY(-2px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.lib-filter__group {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+  padding: 0 8px 0 10px;
+  height: 26px;
+  background: var(--vscode-input-background);
+  border: 1px solid var(--vscode-input-border, var(--vscode-widget-border, transparent));
+  border-radius: 5px;
+  cursor: pointer;
+  transition: border-color 140ms ease, box-shadow 140ms ease;
+}
+
+.lib-filter__group:focus-within {
+  border-color: var(--lib-accent);
+  box-shadow: 0 0 0 1px var(--lib-accent-soft);
+}
+
+.lib-filter__label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--vscode-descriptionForeground);
+  flex-shrink: 0;
+}
+
+.lib-filter__select {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--vscode-input-foreground, var(--vscode-foreground));
+  font-family: inherit;
+  font-size: var(--vscode-font-size);
+  cursor: pointer;
+  appearance: none;
+  padding: 0 14px 0 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23999' d='M2 4l3 3 3-3'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0 center;
+}
+
+.lib-filter__select::-ms-expand {
+  display: none;
+}
+
+/* ========================================
+   Search bar
+   ======================================== */
+.lib-search {
+  padding: 6px 8px 8px;
+  border-top: 1px solid var(--lib-header-border);
+  animation: libSearchIn 140ms ease-out;
+}
+
+@keyframes libSearchIn {
+  from { opacity: 0; transform: translateY(-2px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.lib-search__wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 8px;
+  height: 26px;
+  background: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  border: 1px solid var(--vscode-input-border, var(--vscode-widget-border, transparent));
+  border-radius: 5px;
+  transition: border-color 140ms ease, box-shadow 140ms ease;
+}
+
+.lib-search__wrap:focus-within {
+  border-color: var(--lib-accent);
+  box-shadow: 0 0 0 1px var(--lib-accent-soft);
+}
+
+.lib-search__icon {
+  flex-shrink: 0;
+  color: var(--vscode-input-placeholderForeground, var(--lib-icon-muted));
+  opacity: 0.85;
+}
+
+.lib-search__wrap:focus-within .lib-search__icon {
+  color: var(--lib-accent);
+  opacity: 1;
+}
+
+.lib-search__input {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: var(--vscode-font-size);
+  line-height: 1;
+  padding: 0;
+}
+
+.lib-search__input::placeholder {
+  color: var(--vscode-input-placeholderForeground);
+  opacity: 0.7;
+}
+
+.lib-search__clear {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  color: var(--vscode-descriptionForeground);
+  cursor: pointer;
+  font-size: 11px;
+  line-height: 1;
+  padding: 0;
+  transition: background-color 100ms ease, color 100ms ease;
+}
+
+.lib-search__clear:hover {
+  background: var(--vscode-toolbar-hoverBackground, rgba(90, 93, 94, 0.18));
+  color: var(--vscode-foreground);
+}
+
+/* ========================================
+   Error banner
+   ======================================== */
+.lib-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 12px;
+  background: var(--vscode-inputValidation-errorBackground);
+  color: var(--vscode-inputValidation-errorForeground, var(--vscode-foreground));
+  border-bottom: 1px solid var(--vscode-inputValidation-errorBorder);
+  font-size: var(--vscode-font-size);
+  flex: 0 0 auto;
+  animation: libErrorIn 180ms ease-out;
+}
+
+@keyframes libErrorIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.lib-error__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--vscode-inputValidation-errorBorder, var(--cld-pink));
+  flex-shrink: 0;
+  animation: libErrorPulse 1.4s ease-in-out infinite;
+}
+
+@keyframes libErrorPulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50%      { transform: scale(1.3); opacity: 0.6; }
+}
+
+.lib-error__msg {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lib-error__retry {
+  flex-shrink: 0;
+  background: transparent;
+  color: inherit;
+  border: 1px solid currentColor;
+  border-radius: 3px;
+  padding: 2px 10px;
+  font-family: inherit;
+  font-size: calc(var(--vscode-font-size) - 1px);
+  cursor: pointer;
+  opacity: 0.85;
+  transition: opacity 140ms ease, background-color 140ms ease;
+}
+
+.lib-error__retry:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.08);
+}
+
+/* ========================================
+   List container
+   ======================================== */
+.lib-root {
+  flex: 1 1 auto;
+  position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+  outline: none;
+  padding: 4px 0;
+}
+
+/* ========================================
+   Rows — 22px precision grid
+   ======================================== */
+.lib-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: var(--lib-row-height);
+  padding: 0 10px 0 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  color: var(--vscode-sideBar-foreground, var(--vscode-foreground));
+  position: relative;
+}
+
+.lib-row::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 2px;
+  bottom: 2px;
+  width: 2px;
+  border-radius: 0 2px 2px 0;
+  background: transparent;
+  transition: background-color 120ms ease;
+}
+
+.lib-row:hover {
+  background: var(--vscode-list-hoverBackground);
+}
+
+.lib-row--selected,
+.lib-row--selected:hover {
+  background: var(--vscode-list-activeSelectionBackground);
+  color: var(--vscode-list-activeSelectionForeground);
+}
+
+.lib-row--selected::before {
+  background: var(--lib-accent);
+}
+
+.lib-root:focus-within .lib-row--selected {
+  background: var(--vscode-list-focusBackground, var(--vscode-list-activeSelectionBackground));
+}
+
+.lib-indent {
+  display: inline-block;
+  flex: 0 0 auto;
+  height: 1px;
+}
+
+/* Fixed-width slots for perfect alignment */
+.lib-twistie,
+.lib-twistie-spacer,
+.lib-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--lib-slot);
+  height: var(--lib-row-height);
+  flex: 0 0 var(--lib-slot);
+}
+
+.lib-twistie {
+  color: var(--lib-icon-muted);
+  cursor: pointer;
+  opacity: 0.75;
+}
+
+.lib-twistie svg {
+  display: block;
+  transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  transform-origin: 50% 50%;
+}
+
+.lib-twistie--open svg {
+  transform: rotate(90deg);
+}
+
+.lib-row--folder:hover .lib-twistie {
+  opacity: 1;
+}
+
+/* Icon colors — semantic per type */
+.lib-icon {
+  color: var(--lib-icon-muted);
+}
+
+.lib-icon svg {
+  display: block;
+}
+
+.lib-icon--folder {
+  color: color-mix(in srgb, var(--lib-accent) 75%, var(--lib-icon-muted));
+}
+
+.lib-row--folder-open .lib-icon--folder {
+  color: var(--lib-accent);
+}
+
+.lib-row--selected .lib-twistie,
+.lib-row--selected .lib-icon,
+.lib-row--selected .lib-icon--folder {
+  color: var(--vscode-list-activeSelectionForeground);
+}
+
+.lib-row--image .lib-icon--asset {
+  color: color-mix(in srgb, var(--cld-teal) 60%, var(--lib-icon-muted));
+}
+
+.lib-row--video .lib-icon--asset {
+  color: color-mix(in srgb, var(--cld-pink) 55%, var(--lib-icon-muted));
+}
+
+.lib-row--raw .lib-icon--asset {
+  color: var(--lib-icon-muted);
+  opacity: 0.7;
+}
+
+.lib-row--authenticated .lib-icon--asset {
+  color: color-mix(in srgb, var(--vscode-charts-yellow, #cca700) 65%, var(--lib-icon-muted));
+}
+
+/* Name */
+.lib-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--vscode-font-size);
+  line-height: normal;
+  letter-spacing: 0.01em;
+}
+
+.lib-row--folder .lib-name {
+  font-weight: 500;
+}
+
+.lib-row--folder-open .lib-name {
+  color: var(--vscode-foreground);
+}
+
+.lib-auth-lock {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 12px;
+  width: 12px;
+  height: var(--lib-row-height);
+  color: var(--vscode-charts-yellow, #cca700);
+  opacity: 0.9;
+}
+
+.lib-auth-lock svg {
+  display: block;
+}
+
+/* Asset metadata — format · size, right-aligned */
+.lib-meta {
+  flex: 0 0 auto;
+  margin-left: 6px;
+  font-size: calc(var(--vscode-font-size) - 1.5px);
+  color: var(--vscode-descriptionForeground);
+  letter-spacing: 0.02em;
+  line-height: normal;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  opacity: 0.85;
+  transition: opacity 100ms ease;
+}
+
+.lib-row:hover .lib-meta,
+.lib-row--selected .lib-meta {
+  opacity: 1;
+}
+
+.lib-row--selected .lib-meta {
+  color: inherit;
+}
+
+.lib-row--selected .lib-auth-lock,
+.lib-row--selected.lib-row--authenticated .lib-icon--asset {
+  color: inherit;
+}
+
+/* Loading row */
+.lib-row--loading {
+  cursor: default;
+  color: var(--vscode-descriptionForeground);
+  font-style: italic;
+}
+
+.lib-row--loading:hover {
+  background: transparent;
+}
+
+.lib-loader-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  width: var(--lib-slot);
+  height: var(--lib-row-height);
+  justify-content: center;
+  flex: 0 0 var(--lib-slot);
+}
+
+.lib-loader-dots i {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.3;
+  animation: libDot 1.2s infinite ease-in-out;
+}
+
+.lib-loader-dots i:nth-child(2) { animation-delay: 0.15s; }
+.lib-loader-dots i:nth-child(3) { animation-delay: 0.3s; }
+
+@keyframes libDot {
+  0%, 100% { opacity: 0.25; transform: scale(0.8); }
+  50%      { opacity: 1;    transform: scale(1); }
+}
+
+/* Clear-search chip row */
+.lib-row--clear {
+  padding: 0 10px 0 4px;
+}
+
+.lib-row--clear::before {
+  display: none;
+}
+
+.lib-row--clear:hover {
+  background: transparent;
+}
+
+.lib-clear-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 16px;
+  padding: 0 8px 0 6px;
+  border-radius: 10px;
+  background: var(--vscode-badge-background);
+  color: var(--vscode-badge-foreground);
+  font-size: calc(var(--vscode-font-size) - 1px);
+  font-weight: 500;
+  max-width: calc(100% - 12px);
+  transition:
+    background-color 140ms ease,
+    color 140ms ease,
+    transform 140ms ease;
+}
+
+.lib-row--clear:hover .lib-clear-chip {
+  background: var(--lib-accent);
+  color: var(--vscode-editor-background);
+  transform: translateX(1px);
+}
+
+.lib-clear-chip__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 10px;
+  height: 10px;
+}
+
+.lib-clear-chip__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ========================================
+   Context menu
+   ======================================== */
+.lib-menu {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 6px;
+  min-width: 200px;
+  max-width: 260px;
+  background: var(--vscode-menu-background, var(--vscode-editorWidget-background));
+  color: var(--vscode-menu-foreground, var(--vscode-foreground));
+  border: 1px solid var(--vscode-menu-border, var(--vscode-widget-border, transparent));
+  border-radius: 7px;
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.16),
+    0 10px 28px rgba(0, 0, 0, 0.32);
+  font-size: calc(var(--vscode-font-size) - 0.5px);
+  z-index: 1000;
+  overflow: hidden;
+  animation: libMenuIn 130ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.lib-menu::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--lib-accent-soft) 28%,
+    var(--lib-accent-soft) 72%,
+    transparent 100%
+  );
+  pointer-events: none;
+}
+
+@keyframes libMenuIn {
+  from { opacity: 0; transform: translateY(-3px) scale(0.97); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.lib-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 7px 12px 7px 11px;
+  background: transparent;
+  border: none;
+  border-radius: 5px;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  position: relative;
+  white-space: nowrap;
+  transition:
+    background-color 100ms ease,
+    color 100ms ease,
+    transform 100ms ease;
+}
+
+.lib-menu-item::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 5px;
+  bottom: 5px;
+  width: 2px;
+  border-radius: 0 2px 2px 0;
+  background: transparent;
+  transition: background-color 100ms ease;
+}
+
+.lib-menu-item__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  flex: 0 0 14px;
+  color: var(--lib-icon-muted);
+  opacity: 0.85;
+  transition: color 100ms ease, opacity 100ms ease;
+}
+
+.lib-menu-item__icon svg {
+  display: block;
+  width: 14px;
+  height: 14px;
+}
+
+.lib-menu-item__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  letter-spacing: 0.01em;
+}
+
+.lib-menu-item:hover,
+.lib-menu-item--active {
+  background: var(--vscode-menu-selectionBackground, var(--vscode-list-activeSelectionBackground));
+  color: var(--vscode-menu-selectionForeground, var(--vscode-list-activeSelectionForeground));
+}
+
+.lib-menu-item:hover::before,
+.lib-menu-item--active::before {
+  background: var(--lib-accent);
+}
+
+.lib-menu-item:hover .lib-menu-item__icon,
+.lib-menu-item--active .lib-menu-item__icon {
+  color: inherit;
+  opacity: 1;
+}
+
+.lib-menu-item:active {
+  transform: scale(0.99);
+}
+
+.lib-menu-item:focus-visible {
+  outline: none;
+}
+
+.lib-menu__divider {
+  height: 1px;
+  margin: 4px 6px;
+  background: var(--vscode-menu-separatorBackground, var(--vscode-widget-border, currentColor));
+  opacity: 0.35;
+}
+
+/* ========================================
+   Empty state
+   ======================================== */
+.lib-empty {
+  padding: 24px 16px;
+  color: var(--vscode-descriptionForeground);
+  text-align: center;
+  font-size: var(--vscode-font-size);
+  flex: 0 0 auto;
+}
+
+.lib-empty--welcome {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  margin: 18px 14px;
+  padding: 22px 18px 20px;
+  background: var(--vscode-editorWidget-background, var(--vscode-editor-background));
+  border: 1px solid var(--vscode-widget-border, transparent);
+  border-radius: 10px;
+  position: relative;
+  overflow: hidden;
+}
+
+.lib-empty--welcome::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    var(--cld-brand-blue) 0%,
+    var(--cld-sky-blue) 55%,
+    var(--cld-turquoise) 100%
+  );
+}
+
+.lib-empty__glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  background: var(--lib-accent-soft);
+  color: var(--lib-accent);
+}
+
+.lib-empty__glyph svg {
+  width: 20px;
+  height: 20px;
+}
+
+.lib-empty__title {
+  margin: 0;
+  font-size: var(--vscode-font-size);
+  line-height: 1.45;
+  color: var(--vscode-foreground);
+}
+
+.lib-empty__cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 14px;
+  border: none;
+  border-radius: 4px;
+  background: var(--vscode-button-background);
+  color: var(--vscode-button-foreground);
+  font-family: inherit;
+  font-size: var(--vscode-font-size);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 140ms ease, transform 140ms ease;
+}
+
+.lib-empty__cta:hover {
+  background: var(--vscode-button-hoverBackground);
+  transform: translateY(-0.5px);
+}
+
+.lib-empty__cta:focus-visible {
+  outline: 1.5px solid var(--lib-accent);
+  outline-offset: 2px;
+}
+
+/* ========================================
+   Reduced motion
+   ======================================== */
+@media (prefers-reduced-motion: reduce) {
+  .lib-tb-btn,
+  .lib-tb-btn svg,
+  .lib-twistie svg,
+  .lib-row::before,
+  .lib-loader-dots i,
+  .lib-error,
+  .lib-error__dot,
+  .lib-search,
+  .lib-search__wrap,
+  .lib-filter,
+  .lib-filter__group,
+  .lib-menu,
+  .lib-menu-item,
+  .lib-menu-item__icon,
+  .lib-clear-chip,
+  .lib-empty__cta,
+  .lib-brand__env {
+    transition: none;
+    animation: none;
+  }
+}
diff --git a/package.json b/package.json
index d1e3ff7..0a5f21f 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
         {
           "id": "cloudinaryMediaLibrary",
           "name": "",
+          "type": "webview",
           "when": "cloudinary.activeView == 'library'"
         }
       ]
@@ -136,60 +137,7 @@
         "title": "Configure AI Tools",
         "category": "Cloudinary"
       }
-    ],
-    "menus": {
-      "view/title": [
-        {
-          "command": "cloudinary.showHomescreen",
-          "when": "view == cloudinaryMediaLibrary",
-          "group": "navigation@0"
-        },
-        {
-          "command": "cloudinary.refresh",
-          "when": "view == cloudinaryMediaLibrary",
-          "group": "navigation@1"
-        },
-        {
-          "command": "cloudinary.openUploadWidget",
-          "when": "view == cloudinaryMediaLibrary",
-          "group": "navigation@2"
-        },
-        {
-          "command": "cloudinary.searchAssets",
-          "when": "view == cloudinaryMediaLibrary",
-          "group": "navigation@3"
-        },
-        {
-          "command": "cloudinary.viewOptions",
-          "when": "view == cloudinaryMediaLibrary",
-          "group": "navigation@4"
-        },
-        {
-          "command": "cloudinary.openGlobalConfig",
-          "when": "view == cloudinaryMediaLibrary",
-          "group": "navigation@5"
-        }
-      ],
-      "view/item/context": [
-        {
-          "command": "cloudinary.copyUrl",
-          "when": "view == cloudinaryMediaLibrary && viewItem == 'asset'"
-        },
-        {
-          "command": "cloudinary.copyPublicId",
-          "when": "view == cloudinaryMediaLibrary && viewItem == 'asset'"
-        },
-        {
-          "command": "cloudinary.copyOptimizedUrl",
-          "when": "view == cloudinaryMediaLibrary && viewItem == 'asset'"
-        },
-        {
-          "command": "cloudinary.uploadToFolder",
-          "when": "view == cloudinaryMediaLibrary && viewItem == 'folder'",
-          "group": "inline"
-        }
-      ]
-    }
+    ]
   },
   "scripts": {
     "compile": "npm run check-types && node esbuild.js",
diff --git a/src/aiToolsService.ts b/src/aiToolsService.ts
index 3e0adb7..80dedbb 100644
--- a/src/aiToolsService.ts
+++ b/src/aiToolsService.ts
@@ -58,22 +58,37 @@ export function detectEditor(): EditorType {
 
 export function getMcpFilePath(editor: EditorType): string {
   switch (editor) {
-    case "cursor":      return ".cursor/mcp.json";
-    case "windsurf":    return ".windsurf/mcp.json";
+    case "cursor": return ".cursor/mcp.json";
+    case "windsurf": return ".windsurf/mcp.json";
     case "antigravity": return ".agent/mcp_config.json";
     case "vscode":
-    default:            return ".vscode/mcp.json";
+    default: return ".vscode/mcp.json";
   }
 }
 
+export function getMcpRootKey(editor: EditorType): "servers" | "mcpServers" {
+  return editor === "vscode" ? "servers" : "mcpServers";
+}
+
+export function getEditorDisplayName(editor: EditorType): string | undefined {
+  const names: Partial<Record<EditorType, string>> = {
+    vscode: "VS Code", cursor: "Cursor", windsurf: "Windsurf", antigravity: "Antigravity",
+  };
+  return names[editor];
+}
+
+function stripTilde(dir: string): string {
+  return dir.replace(/^~\/?/, "");
+}
+
 export function detectEditorPlatform(): string {
   const editor = detectEditor();
   switch (editor) {
-    case "cursor":      return "cursor";
-    case "windsurf":    return "windsurf";
+    case "cursor": return "cursor";
+    case "windsurf": return "windsurf";
     case "antigravity": return "antigravity";
     case "vscode":
-    default:            return "github-copilot";
+    default: return "github-copilot";
   }
 }
 
@@ -408,7 +423,7 @@ export async function installSkill(
 ): Promise<void> {
   const base = scope === "global" ? os.homedir() : rootUri.fsPath;
   const rawDir = scope === "global" ? platform.globalSkillsDir : platform.skillsDir;
-  const dir = scope === "global" ? rawDir.replace(/^~\/?/, "") : rawDir;
+  const dir = scope === "global" ? stripTilde(rawDir) : rawDir;
 
   // Write SKILL.md (silent overwrite — matches `npx skills add -y` behaviour)
   const skillPath = path.join(dir, dirName, "SKILL.md");
@@ -466,7 +481,7 @@ export async function readInstalledSkillDirNames(
   }
 
   const projectDir = platform.skillsDir;
-  const globalDir = platform.globalSkillsDir.replace(/^~\/?/, "");
+  const globalDir = stripTilde(platform.globalSkillsDir);
 
   const [project, global] = await Promise.all([
     checkScope(projectBase, projectDir),
@@ -546,8 +561,7 @@ export async function installMcpServers(
   createdFiles: string[]
 ): Promise<void> {
   const mcpFilePath = getMcpFilePath(editor);
-  const isVscode = editor === "vscode";
-  const rootKey = isVscode ? "servers" : "mcpServers";
+  const rootKey = getMcpRootKey(editor);
   const mcpUri = vscode.Uri.joinPath(rootUri, mcpFilePath);
   let config: Record<string, unknown> = {};
   try {
diff --git a/src/cloudinary/cloudinarySdkAdapter.ts b/src/cloudinary/cloudinarySdkAdapter.ts
new file mode 100644
index 0000000..dc180b3
--- /dev/null
+++ b/src/cloudinary/cloudinarySdkAdapter.ts
@@ -0,0 +1,46 @@
+import { v2 as cloudinary } from 'cloudinary';
+import { CloudinarySdkAdapter } from './cloudinaryService';
+import { SortDirection } from './types';
+
+/**
+ * Production adapter wired to the real Cloudinary SDK.
+ */
+export function createCloudinarySdkAdapter(): CloudinarySdkAdapter {
+  return {
+    subFolders: async (path: string) => {
+      return cloudinary.api.sub_folders(path) as unknown as {
+        folders: Array<{ name: string; path: string }>;
+      };
+    },
+    search: async (opts) => {
+      const query = cloudinary.search
+        .expression(opts.expression)
+        .sort_by(opts.sortBy.field, opts.sortBy.direction as SortDirection)
+        .max_results(opts.maxResults);
+
+      if (opts.withField) {
+        query.with_field(opts.withField);
+      }
+
+      if (opts.nextCursor) {
+        query.next_cursor(opts.nextCursor);
+      }
+
+      const result = await query.execute();
+      return {
+        resources: result.resources || [],
+        next_cursor: result.next_cursor || null,
+      };
+    },
+    uploadPresets: async () => {
+      return cloudinary.api.upload_presets({ max_results: 500 }) as unknown as {
+        presets: Array<{
+          name: string;
+          unsigned: boolean;
+          settings?: Record<string, unknown>;
+        }>;
+      };
+    },
+    urlFor: (publicId, opts) => cloudinary.url(publicId, opts as any),
+  };
+}
diff --git a/src/cloudinary/cloudinaryService.ts b/src/cloudinary/cloudinaryService.ts
new file mode 100644
index 0000000..5daa653
--- /dev/null
+++ b/src/cloudinary/cloudinaryService.ts
@@ -0,0 +1,290 @@
+import {
+  ChildrenPage,
+  ClientAsset,
+  ClientFolder,
+  FetchChildrenOpts,
+  SortDirection,
+  UploadPreset,
+} from './types';
+
+/**
+ * Narrow view of the Cloudinary SDK used by the service. Injecting this makes
+ * the service testable without loading the real SDK.
+ */
+export interface CloudinarySdkAdapter {
+  subFolders(path: string): Promise<{ folders: Array<{ name: string; path: string }> }>;
+  search(opts: {
+    expression: string;
+    sortBy: { field: string; direction: SortDirection };
+    maxResults: number;
+    nextCursor?: string;
+    withField?: string[];
+  }): Promise<{ resources: any[]; next_cursor: string | null }>;
+  uploadPresets(): Promise<{ presets: Array<{ name: string; unsigned: boolean; settings?: Record<string, unknown> }> }>;
+  urlFor(publicId: string, opts: {
+    resource_type: string;
+    type?: string;
+    transformation?: unknown;
+    sign_url?: boolean;
+    secure?: boolean;
+    format?: string;
+  }): string;
+}
+
+export interface Credentials {
+  cloudName: string | null;
+  apiKey: string | null;
+  apiSecret: string | null;
+  uploadPreset?: string | null;
+  dynamicFolders?: boolean;
+}
+
+/**
+ * Pure data layer for the Cloudinary media library.
+ * No vscode.* imports. All methods return plain JSON.
+ */
+export class CloudinaryService {
+  cloudName: string | null = null;
+  apiKey: string | null = null;
+  apiSecret: string | null = null;
+  uploadPreset: string | null = null;
+  dynamicFolders = false;
+  uploadPresets: UploadPreset[] = [];
+
+  constructor(private readonly sdk: CloudinarySdkAdapter) {}
+
+  setCredentials(creds: Credentials): void {
+    this.cloudName = creds.cloudName;
+    this.apiKey = creds.apiKey;
+    this.apiSecret = creds.apiSecret;
+    this.uploadPreset = creds.uploadPreset ?? null;
+    this.dynamicFolders = creds.dynamicFolders ?? false;
+  }
+
+  async fetchChildren(folderPath: string, opts: FetchChildrenOpts): Promise<ChildrenPage> {
+    const expression = this.buildExpression(folderPath);
+    const [foldersResult, assetsResult] = await Promise.all([
+      this.sdk.subFolders(folderPath),
+      this.sdk.search({
+        expression,
+        sortBy: { field: 'created_at', direction: opts.sortDirection },
+        maxResults: 500,
+        nextCursor: opts.nextCursor,
+        withField: ['tags', 'context', 'metadata'],
+      }),
+    ]);
+
+    const folders: ClientFolder[] = (foldersResult.folders || []).map((f) => ({
+      name: f.name,
+      path: f.path,
+    }));
+
+    const filtered = (assetsResult.resources || []).filter((asset: any) => {
+      if (!this.dynamicFolders && folderPath === '' && typeof asset.public_id === 'string' && asset.public_id.includes('/')) {
+        return false;
+      }
+      if (opts.resourceTypeFilter === 'all') { return true; }
+      return String(asset.resource_type).toLowerCase() === opts.resourceTypeFilter;
+    });
+
+    const assets: ClientAsset[] = filtered.map((a: any) => this.toClientAsset(a));
+
+    return { folders, assets, nextCursor: assetsResult.next_cursor ?? null };
+  }
+
+  private buildExpression(folderPath: string): string {
+    if (this.dynamicFolders) {
+      return folderPath ? `asset_folder="${folderPath}"` : 'asset_folder=""';
+    }
+    // Fixed-folder root: empty expression returns ALL resources. fetchChildren
+    // then filters nested assets client-side. See the `public_id.includes('/')`
+    // guard in the resource filter.
+    return folderPath ? `folder="${folderPath}"` : '';
+  }
+
+  /**
+   * Streams remaining pages for a folder via callback. Caller can append to its
+   * own cache / forward over postMessage per batch. Stops when cursor is null
+   * or `cap` filtered assets have been delivered.
+   *
+   * NOTE: `cap` counts post-filter assets delivered to `onBatch`, not raw
+   * server resources. In fixed-folder-root mode with heavy client-side
+   * filtering, the actual API call volume may exceed `cap`.
+   */
+  async prefetchRemaining(
+    folderPath: string,
+    startCursor: string,
+    opts: FetchChildrenOpts,
+    onBatch: (assets: ClientAsset[], hasMore: boolean) => void,
+    cap: number = 5000,
+  ): Promise<void> {
+    let cursor: string | null = startCursor;
+    let total = 0;
+    const expression = this.buildExpression(folderPath);
+    while (cursor && total < cap) {
+      const result: { resources: any[]; next_cursor: string | null } = await this.sdk.search({
+        expression,
+        sortBy: { field: 'created_at', direction: opts.sortDirection },
+        maxResults: 500,
+        nextCursor: cursor,
+        withField: ['tags', 'context', 'metadata'],
+      });
+      const filtered = (result.resources || []).filter((asset: any) => {
+        if (!this.dynamicFolders && folderPath === '' && typeof asset.public_id === 'string' && asset.public_id.includes('/')) {
+          return false;
+        }
+        if (opts.resourceTypeFilter === 'all') { return true; }
+        return String(asset.resource_type).toLowerCase() === opts.resourceTypeFilter;
+      });
+      const assets = filtered.map((a: any) => this.toClientAsset(a));
+      cursor = result.next_cursor ?? null;
+      if (assets.length === 0) { continue; }
+      total += assets.length;
+      onBatch(assets, !!cursor && total < cap);
+    }
+  }
+
+  async searchAssets(query: string, opts: FetchChildrenOpts): Promise<{ assets: ClientAsset[]; nextCursor: string | null }> {
+    const result = await this.sdk.search({
+      expression: `${query}*`,
+      sortBy: { field: 'created_at', direction: opts.sortDirection },
+      maxResults: 500,
+      withField: ['tags', 'context', 'metadata'],
+    });
+    const assets = this.filterByResourceType(result.resources || [], opts.resourceTypeFilter)
+      .map((a: any) => this.toClientAsset(a));
+    return { assets, nextCursor: result.next_cursor ?? null };
+  }
+
+  async prefetchSearchResults(
+    query: string,
+    startCursor: string,
+    opts: FetchChildrenOpts,
+    onBatch: (assets: ClientAsset[], hasMore: boolean) => void,
+    cap: number = 5000,
+  ): Promise<void> {
+    let cursor: string | null = startCursor;
+    let total = 0;
+    while (cursor && total < cap) {
+      const result: { resources: any[]; next_cursor: string | null } = await this.sdk.search({
+        expression: `${query}*`,
+        sortBy: { field: 'created_at', direction: opts.sortDirection },
+        maxResults: 500,
+        nextCursor: cursor,
+        withField: ['tags', 'context', 'metadata'],
+      });
+      const assets = this.filterByResourceType(result.resources || [], opts.resourceTypeFilter)
+        .map((a: any) => this.toClientAsset(a));
+      cursor = result.next_cursor ?? null;
+      if (assets.length === 0) { continue; }
+      total += assets.length;
+      onBatch(assets, !!cursor && total < cap);
+    }
+  }
+
+  private filterByResourceType(resources: any[], filter: FetchChildrenOpts['resourceTypeFilter']): any[] {
+    return resources.filter((asset: any) => {
+      if (filter === 'all') {
+        return true;
+      }
+      return String(asset.resource_type).toLowerCase() === filter;
+    });
+  }
+
+  private toClientAsset(a: any): ClientAsset {
+    // Coerce unexpected resource_type values to 'image'; mirrors prior tree-provider fallback.
+    const resourceType = (a.resource_type === 'video' || a.resource_type === 'raw') ? a.resource_type : 'image';
+    const deliveryType = typeof a.type === 'string' ? a.type : undefined;
+    const isAuthenticated = deliveryType === 'authenticated';
+    const baseUrlOpts = {
+      resource_type: resourceType,
+      type: deliveryType,
+      secure: true,
+    };
+
+    const signedOriginal = isAuthenticated
+      ? this.sdk.urlFor(a.public_id, {
+          ...baseUrlOpts,
+          sign_url: true,
+          ...(resourceType !== 'raw' && a.format ? { format: String(a.format) } : {}),
+        })
+      : undefined;
+
+    const optimized = signedOriginal || this.sdk.urlFor(a.public_id, {
+      ...baseUrlOpts,
+      transformation: resourceType === 'raw'
+        ? undefined
+        : [{ fetch_format: resourceType === 'video' ? 'auto:video' : 'auto' }, { quality: 'auto' }],
+    });
+    const thumbnail = signedOriginal || (resourceType === 'raw'
+      ? optimized
+      : this.sdk.urlFor(a.public_id, {
+          ...baseUrlOpts,
+          transformation: [{ width: 160, height: 160, crop: 'fill', fetch_format: 'auto', quality: 'auto' }],
+        }));
+    return {
+      public_id: a.public_id,
+      display_name: a.display_name,
+      resource_type: resourceType,
+      type: deliveryType,
+      format: a.format,
+      bytes: a.bytes,
+      width: a.width,
+      height: a.height,
+      secure_url: signedOriginal || a.secure_url,
+      optimized_url: optimized,
+      thumbnail_url: thumbnail,
+      tags: a.tags,
+      context: a.context,
+      metadata: a.metadata,
+      created_at: a.created_at,
+    };
+  }
+
+  async fetchUploadPresets(): Promise<UploadPreset[]> {
+    if (!this.cloudName || !this.apiKey || !this.apiSecret) {
+      throw new Error('Cloudinary credentials not configured');
+    }
+    const result = await this.sdk.uploadPresets();
+    this.uploadPresets = result.presets.map((p) => ({
+      name: p.name,
+      signed: p.unsigned === false,
+      settings: p.settings,
+    }));
+    return this.uploadPresets;
+  }
+
+  async listAllFolders(maxDepth = 4): Promise<Array<{ path: string; name: string }>> {
+    const all: Array<{ path: string; name: string }> = [];
+
+    const visitLevel = async (paths: string[], depth: number): Promise<void> => {
+      if (paths.length === 0 || depth > maxDepth) {
+        return;
+      }
+
+      const results = await Promise.all(
+        paths.map((p) => this.sdk.subFolders(p))
+      );
+
+      const next: string[] = [];
+      for (const result of results) {
+        for (const folder of result.folders || []) {
+          all.push({ path: folder.path, name: folder.name });
+          next.push(folder.path);
+        }
+      }
+
+      await visitLevel(next, depth + 1);
+    };
+
+    await visitLevel([''], 0);
+    return all.sort((a, b) => a.path.localeCompare(b.path));
+  }
+
+  getCurrentUploadPreset(): string | null {
+    if (this.uploadPreset && this.uploadPresets.some((p) => p.name === this.uploadPreset)) {
+      return this.uploadPreset;
+    }
+    return null;
+  }
+}
diff --git a/src/cloudinary/types.ts b/src/cloudinary/types.ts
new file mode 100644
index 0000000..319655f
--- /dev/null
+++ b/src/cloudinary/types.ts
@@ -0,0 +1,51 @@
+/**
+ * Plain-JSON asset record passed between service, host bridge, and webview.
+ * Intentionally flat and free of vscode.* types so it can be postMessage'd.
+ */
+export interface ClientAsset {
+  public_id: string;
+  display_name?: string;
+  resource_type: 'image' | 'video' | 'raw';
+  /** Cloudinary delivery type: 'upload' | 'authenticated' | 'private' | 'fetch'. */
+  type?: string;
+  format?: string;
+  bytes?: number;
+  width?: number;
+  height?: number;
+  secure_url: string;
+  /** Pre-computed delivery URL with f_auto,q_auto. Authenticated assets use the signed original URL. */
+  optimized_url: string;
+  /** Pre-computed thumbnail URL. Authenticated assets use the signed original URL instead of dynamic transforms. */
+  thumbnail_url: string;
+  tags?: string[];
+  context?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+  created_at?: string;
+}
+
+export interface ClientFolder {
+  name: string;
+  path: string;
+}
+
+export interface ChildrenPage {
+  folders: ClientFolder[];
+  assets: ClientAsset[];
+  nextCursor: string | null;
+}
+
+export type ResourceTypeFilter = 'all' | 'image' | 'video' | 'raw';
+export type SortDirection = 'asc' | 'desc';
+
+export interface FetchChildrenOpts {
+  resourceTypeFilter: ResourceTypeFilter;
+  sortDirection: SortDirection;
+  /** Pass a cursor from a previous ChildrenPage. Omit (or pass `undefined`) to start from the beginning. */
+  nextCursor?: string;
+}
+
+export interface UploadPreset {
+  name: string;
+  signed: boolean;
+  settings?: Record<string, unknown>;
+}
diff --git a/src/commands/clearSearch.ts b/src/commands/clearSearch.ts
index 4e67424..f5774c6 100644
--- a/src/commands/clearSearch.ts
+++ b/src/commands/clearSearch.ts
@@ -1,26 +1,24 @@
 import * as vscode from "vscode";
-import { CloudinaryTreeDataProvider } from "../tree/treeDataProvider";
+import { LibraryWebviewViewProvider } from "../webview/libraryView";
+
+type SearchAwareLibraryWebview = LibraryWebviewViewProvider & {
+    setSearch?: (query: string | null) => Thenable<void> | Promise<void>;
+};
 
 /**
  * Registers a command that clears the active search filter in the Cloudinary view.
  * @param context - The VS Code extension context.
- * @param provider - The Cloudinary tree data provider instance.
+ * @param libraryWebview - The Cloudinary library webview provider.
  */
 function registerClearSearch(
     context: vscode.ExtensionContext,
-    provider: CloudinaryTreeDataProvider
+    libraryWebview?: LibraryWebviewViewProvider
 ) {
     context.subscriptions.push(
-        vscode.commands.registerCommand("cloudinary.clearSearch", () => {
-            provider.refresh({
-                folderPath: '',
-                nextCursor: null,
-                searchQuery: null,
-                resourceTypeFilter: 'all'
-            });
-            vscode.window.showInformationMessage("🔍 Search filter cleared.");
+        vscode.commands.registerCommand("cloudinary.clearSearch", async () => {
+            await (libraryWebview as SearchAwareLibraryWebview | undefined)?.setSearch?.(null);
         })
     );
 }
 
-export default registerClearSearch;
\ No newline at end of file
+export default registerClearSearch;
diff --git a/src/commands/configureAiTools.ts b/src/commands/configureAiTools.ts
index d4af0c4..23554c6 100644
--- a/src/commands/configureAiTools.ts
+++ b/src/commands/configureAiTools.ts
@@ -6,6 +6,7 @@ import {
   MCP_SERVERS,
   detectEditor,
   getMcpFilePath,
+  getMcpRootKey,
   fetchSkillList,
   fetchSkillContent,
   installForClaudeCode,
@@ -25,8 +26,7 @@ async function createMcpConfig(
   mcpFilePath: string,
   createdFiles: string[]
 ): Promise<void> {
-  const rootKey = editor === "vscode" ? "servers" : "mcpServers";
-  const configuredKeys = await readConfiguredMcpServerKeys(rootUri, mcpFilePath, rootKey);
+  const configuredKeys = await readConfiguredMcpServerKeys(rootUri, mcpFilePath, getMcpRootKey(editor));
 
   const selected = await vscode.window.showQuickPick(
     MCP_SERVERS.map((s) => ({
@@ -85,13 +85,13 @@ function registerConfigureAiTools(context: vscode.ExtensionContext): void {
         const editor = detectEditor();
         const ideOptions: vscode.QuickPickItem[] = [
           { label: "Claude Code", description: "Install to .claude/skills/" },
-          { label: "Cursor",      description: "Install to .cursor/rules/" },
+          { label: "Cursor", description: "Install to .cursor/rules/" },
           { label: "VS Code (Copilot)", description: "Append to .github/copilot-instructions.md" },
         ];
         const defaultLabel =
           editor === "cursor" ? "Cursor" :
-          editor === "vscode" ? "VS Code (Copilot)" :
-          "Claude Code";
+            editor === "vscode" ? "VS Code (Copilot)" :
+              "Claude Code";
 
         const qp = vscode.window.createQuickPick();
         qp.items = ideOptions;
@@ -171,7 +171,7 @@ function registerConfigureAiTools(context: vscode.ExtensionContext): void {
 
       if (createdFiles.length > 0) {
         const action = await vscode.window.showInformationMessage(
-          `✅ Configured AI tools: ${createdFiles.join(", ")}`,
+          `$(check) Configured AI tools: ${createdFiles.join(", ")}`,
           "Open File"
         );
         if (action === "Open File") {
diff --git a/src/commands/previewAsset.ts b/src/commands/previewAsset.ts
index 29d208d..de5fbd5 100644
--- a/src/commands/previewAsset.ts
+++ b/src/commands/previewAsset.ts
@@ -14,6 +14,7 @@ type AssetData = {
   filename: string;
   format?: string;
   resource_type?: string;
+  type?: string;
   tags?: string[];
   context?: Record<string, any>;
   metadata?: Record<string, any>;
@@ -135,6 +136,17 @@ function getAssetTypeIcon(type: string): string {
   return getAssetIcon(type);
 }
 
+function isAuthenticatedAsset(asset: AssetData): boolean {
+  return asset.type === "authenticated";
+}
+
+function buildAuthenticatedBadgeHtml(asset: AssetData): string {
+  if (!isAuthenticatedAsset(asset)) {
+    return "";
+  }
+  return `<span class="badge badge--auth">${actionIcons.lock("sm")} Authenticated</span>`;
+}
+
 /**
  * Build the preview section HTML based on asset type.
  */
@@ -219,6 +231,30 @@ function buildMetadataHtml(data: Record<string, any> | undefined, emptyText: str
     .join("");
 }
 
+function buildUrlItem(label: string, url: string): string {
+  return `
+    <div class="url-item">
+      <div class="url-item__label">${escapeHtml(label)}</div>
+      <div class="url-item__value">
+        <a href="${escapeHtml(url)}" target="_blank" class="url-item__link">${escapeHtml(url)}</a>
+        <button class="btn btn--secondary btn--sm btn--copy" data-copy="${escapeHtml(url)}">Copy</button>
+      </div>
+    </div>
+  `;
+}
+
+function buildUrlsHtml(asset: AssetData): string {
+  if (isAuthenticatedAsset(asset)) {
+    const signedUrl = asset.secure_url || asset.optimized_url;
+    const extraOptimized = asset.optimized_url && asset.optimized_url !== signedUrl
+      ? buildUrlItem("Optimized URL", asset.optimized_url)
+      : "";
+    return `${buildUrlItem("Signed authenticated URL", signedUrl)}${extraOptimized}`;
+  }
+
+  return `${buildUrlItem("Original URL", asset.secure_url)}${buildUrlItem("Optimized URL", asset.optimized_url)}`;
+}
+
 /**
  * Build the lightbox HTML.
  */
@@ -250,6 +286,8 @@ function getPreviewContent(asset: AssetData): string {
   const contextHtml = buildMetadataHtml(asset.context, "No context metadata");
   const metadataHtml = buildMetadataHtml(asset.metadata, "No structured metadata");
   const lightboxHtml = hasEnlarge ? buildLightboxHtml(asset) : "";
+  const authenticatedBadgeHtml = buildAuthenticatedBadgeHtml(asset);
+  const urlsHtml = buildUrlsHtml(asset);
 
   return `
     <div class="card card--elevated" style="max-width: 600px; width: 100%;">
@@ -261,6 +299,7 @@ function getPreviewContent(asset: AssetData): string {
             <h2 class="asset-header__title" title="${escapeHtml(asset.public_id)}">${escapeHtml(displayName || "")}</h2>
             <div class="asset-header__subtitle">
               <span class="badge">${escapeHtml((asset.format || asset.displayType || "unknown").toUpperCase())}</span>
+              ${authenticatedBadgeHtml}
               ${asset.width && asset.height ? `${asset.width} × ${asset.height}` : ""}
               ${asset.bytes ? ` • ${formatFileSize(asset.bytes)}` : ""}
             </div>
@@ -301,6 +340,10 @@ function getPreviewContent(asset: AssetData): string {
               <span class="info-row__label">Type</span>
               <span class="info-row__value">${escapeHtml(asset.displayType || "unknown")}</span>
             </div>
+            <div class="info-row">
+              <span class="info-row__label">Delivery</span>
+              <span class="info-row__value">${escapeHtml(asset.type || "upload")}${authenticatedBadgeHtml}</span>
+            </div>
           </div>
 
           <div class="tabs__content" id="tab-meta" role="tabpanel">
@@ -319,20 +362,7 @@ function getPreviewContent(asset: AssetData): string {
           </div>
 
           <div class="tabs__content" id="tab-urls" role="tabpanel">
-            <div class="url-item">
-              <div class="url-item__label">Original URL</div>
-              <div class="url-item__value">
-                <a href="${escapeHtml(asset.secure_url)}" target="_blank" class="url-item__link">${escapeHtml(asset.secure_url)}</a>
-                <button class="btn btn--secondary btn--sm btn--copy" data-copy="${escapeHtml(asset.secure_url)}">Copy</button>
-              </div>
-            </div>
-            <div class="url-item">
-              <div class="url-item__label">Optimized URL</div>
-              <div class="url-item__value">
-                <a href="${escapeHtml(asset.optimized_url)}" target="_blank" class="url-item__link">${escapeHtml(asset.optimized_url)}</a>
-                <button class="btn btn--secondary btn--sm btn--copy" data-copy="${escapeHtml(asset.optimized_url)}">Copy</button>
-              </div>
-            </div>
+            ${urlsHtml}
           </div>
         </div>
       </div>
diff --git a/src/commands/registerCommands.ts b/src/commands/registerCommands.ts
index 46929f4..5437641 100644
--- a/src/commands/registerCommands.ts
+++ b/src/commands/registerCommands.ts
@@ -8,21 +8,24 @@ import registerSwitchEnv from "./switchEnvironment";
 import registerClearSearch from "./clearSearch";
 import registerWelcomeScreen from "./welcomeScreen";
 import registerConfigureAiTools from "./configureAiTools";
-import { CloudinaryTreeDataProvider } from "../tree/treeDataProvider";
+import { CloudinaryService } from "../cloudinary/cloudinaryService";
 import { HomescreenViewProvider } from "../webview/homescreenView";
+import { LibraryWebviewViewProvider } from "../webview/libraryView";
 
 /**
  * Registers all Cloudinary-related commands with the VS Code command registry.
  * @param context - The extension context.
- * @param provider - The Cloudinary tree data provider.
+ * @param cloudinaryService - The shared Cloudinary service.
  * @param statusBar - Status bar item to show current environment.
  * @param homescreenProvider - The homescreen webview view provider.
  */
 function registerAllCommands(
   context: vscode.ExtensionContext,
-  provider: CloudinaryTreeDataProvider,
+  cloudinaryService: CloudinaryService,
+  environmentTarget: Parameters<typeof registerSwitchEnv>[1],
   statusBar: vscode.StatusBarItem,
-  homescreenProvider: HomescreenViewProvider
+  homescreenProvider: HomescreenViewProvider,
+  libraryWebview?: LibraryWebviewViewProvider
 ) {
   context.subscriptions.push(
     vscode.commands.registerCommand("cloudinary.showHomescreen", () => {
@@ -38,24 +41,19 @@ function registerAllCommands(
   );
 
   context.subscriptions.push(
-    vscode.commands.registerCommand("cloudinary.refresh", () =>
-      provider.refresh({
-        folderPath: '',
-        nextCursor: null,
-        searchQuery: null,
-        resourceTypeFilter: 'all'
-      })
-    )
+    vscode.commands.registerCommand("cloudinary.refresh", async () => {
+      await libraryWebview?.refresh();
+    })
   );
 
-  registerSearch(context, provider, homescreenProvider);
-  registerClearSearch(context, provider);
-  registerViewOptions(context, provider);
+  registerSearch(context, homescreenProvider);
+  registerClearSearch(context, libraryWebview);
+  registerViewOptions(context, libraryWebview);
   registerPreview(context);
-  registerUpload(context, provider);
+  registerUpload(context, cloudinaryService);
   registerClipboard(context);
-  registerSwitchEnv(context, provider, statusBar);
-  registerWelcomeScreen(context, provider);
+  registerSwitchEnv(context, environmentTarget, statusBar);
+  registerWelcomeScreen(context, cloudinaryService);
   registerConfigureAiTools(context);
 }
 
diff --git a/src/commands/searchAssets.ts b/src/commands/searchAssets.ts
index f432f34..bf88462 100644
--- a/src/commands/searchAssets.ts
+++ b/src/commands/searchAssets.ts
@@ -1,13 +1,8 @@
 import * as vscode from "vscode";
-import { CloudinaryTreeDataProvider } from "../tree/treeDataProvider";
 import { HomescreenViewProvider } from "../webview/homescreenView";
 
-/**
- * Registers the search command. Opens the dashboard and focuses its search input.
- */
 function registerSearch(
   context: vscode.ExtensionContext,
-  _provider: CloudinaryTreeDataProvider,
   homescreenProvider: HomescreenViewProvider
 ) {
   context.subscriptions.push(
diff --git a/src/commands/switchEnvironment.ts b/src/commands/switchEnvironment.ts
index 8600975..3b8c8c5 100644
--- a/src/commands/switchEnvironment.ts
+++ b/src/commands/switchEnvironment.ts
@@ -1,8 +1,8 @@
 import * as vscode from "vscode";
 import { v2 as cloudinary } from "cloudinary";
+import { CloudinaryService, Credentials } from "../cloudinary/cloudinaryService";
 import { loadEnvironments, getGlobalConfigPath } from "../config/configUtils";
 import detectFolderMode from "../config/detectFolderMode";
-import { CloudinaryTreeDataProvider } from "../tree/treeDataProvider";
 import { generateUserAgent } from "../utils/userAgent";
 
 interface CloudinaryEnvironment {
@@ -11,15 +11,49 @@ interface CloudinaryEnvironment {
   uploadPreset?: string;  // Optional: Default upload preset
 }
 
+type EnvironmentTarget = Pick<
+  CloudinaryService,
+  "cloudName" | "apiKey" | "apiSecret" | "uploadPreset" | "dynamicFolders"
+> & {
+  setCredentials?: (creds: Credentials) => void;
+};
+
+function updateEnvironmentTarget(
+  target: EnvironmentTarget,
+  credentials: Credentials
+) {
+  if (typeof target.setCredentials === "function") {
+    target.setCredentials(credentials);
+    return;
+  }
+
+  target.cloudName = credentials.cloudName;
+  target.apiKey = credentials.apiKey;
+  target.apiSecret = credentials.apiSecret;
+  target.uploadPreset = credentials.uploadPreset ?? null;
+  target.dynamicFolders = credentials.dynamicFolders ?? false;
+}
+
+function getStatusBarText(cloudName: string, dynamicFolders: boolean): string {
+  const folderMode = dynamicFolders ? "Dynamic" : "Fixed";
+  return `$(cloud) ${cloudName} $(folder) ${folderMode}`;
+}
+
+function getStatusBarTooltip(dynamicFolders: boolean): string {
+  return dynamicFolders
+    ? "Click to switch Cloudinary environment\n\nDynamic Folders: Assets can be organized independently of their public ID"
+    : "Click to switch Cloudinary environment\n\nFixed Folders: Asset folder is determined by public ID path";
+}
+
 /**
  * Registers commands for switching Cloudinary environments and editing global config.
  * @param context - Extension context (includes global state).
- * @param provider - Cloudinary data provider to update credentials.
+ * @param target - Cloudinary environment target to update credentials on.
  * @param statusBar - VS Code status bar item to reflect environment change.
  */
 function registerSwitchEnv(
   context: vscode.ExtensionContext,
-  provider: CloudinaryTreeDataProvider,
+  target: EnvironmentTarget,
   statusBar: vscode.StatusBarItem
 ) {
   context.subscriptions.push(
@@ -30,7 +64,7 @@ function registerSwitchEnv(
         const cloudNames = Object.keys(environments);
 
         if (cloudNames.length === 0) {
-          vscode.window.showErrorMessage("❌ No Cloudinary environments found in config.");
+          vscode.window.showErrorMessage("No Cloudinary environments found in config.");
           return;
         }
 
@@ -40,26 +74,29 @@ function registerSwitchEnv(
 
         if (selected) {
           const env = environments[selected];
-
-          provider.cloudName = selected;
-          provider.apiKey = env.apiKey;
-          provider.apiSecret = env.apiSecret;
-          provider.uploadPreset = env.uploadPreset || null;
-
           const cacheKey = `cloudinary.dynamicFolders.${selected}`;
           const cachedFolderMode = context.globalState.get(cacheKey) as boolean | undefined;
+          let dynamicFolders: boolean;
 
           if (typeof cachedFolderMode === "boolean") {
-            provider.dynamicFolders = cachedFolderMode;
+            dynamicFolders = cachedFolderMode;
           } else {
-            provider.dynamicFolders = await detectFolderMode(
+            dynamicFolders = await detectFolderMode(
               selected,
               env.apiKey,
               env.apiSecret
             );
-            context.globalState.update(cacheKey, provider.dynamicFolders);
+            await context.globalState.update(cacheKey, dynamicFolders);
           }
 
+          updateEnvironmentTarget(target, {
+            cloudName: selected,
+            apiKey: env.apiKey,
+            apiSecret: env.apiSecret,
+            uploadPreset: env.uploadPreset || null,
+            dynamicFolders,
+          });
+
           (cloudinary.utils as any).userPlatform = generateUserAgent();
 
           cloudinary.config({
@@ -68,24 +105,11 @@ function registerSwitchEnv(
             api_secret: env.apiSecret,
           });
 
-          // Update status bar with folder mode indicator
-          const folderMode = provider.dynamicFolders ? "Dynamic" : "Fixed";
-          statusBar.text = `$(cloud) ${selected} $(folder) ${folderMode}`;
-          statusBar.tooltip = provider.dynamicFolders
-            ? "Click to switch Cloudinary environment\n\nDynamic Folders: Assets can be organized independently of their public ID"
-            : "Click to switch Cloudinary environment\n\nFixed Folders: Asset folder is determined by public ID path";
-
-          provider.refresh({
-            folderPath: '',
-            nextCursor: null,
-            searchQuery: null,
-            resourceTypeFilter: 'all'
-          });
-
-          provider.notifyEnvironmentChange();
+          statusBar.text = getStatusBarText(selected, dynamicFolders);
+          statusBar.tooltip = getStatusBarTooltip(dynamicFolders);
 
           vscode.window.showInformationMessage(
-            `🔄 Switched to ${selected} environment.`
+            `$(cloud) Switched to ${selected} environment.`
           );
         }
       }
diff --git a/src/commands/uploadWidget.ts b/src/commands/uploadWidget.ts
index f510c9e..f3c4117 100644
--- a/src/commands/uploadWidget.ts
+++ b/src/commands/uploadWidget.ts
@@ -1,5 +1,6 @@
 import * as vscode from "vscode";
-import { CloudinaryTreeDataProvider } from "../tree/treeDataProvider";
+import { CloudinaryService } from "../cloudinary/cloudinaryService";
+import { UploadPreset } from "../cloudinary/types";
 import { v2 as cloudinary } from "cloudinary";
 import { Readable } from "stream";
 import {
@@ -16,6 +17,30 @@ interface FolderOption {
   label: string;
 }
 
+type UploadWidgetCloudinaryState = Pick<
+  CloudinaryService,
+  "cloudName" | "apiKey" | "apiSecret" | "uploadPresets" | "dynamicFolders"
+> & {
+  fetchUploadPresets(): Promise<UploadPreset[]>;
+  getCurrentUploadPreset(): string | null;
+  listAllFolders(maxDepth?: number): Promise<Array<{ path: string; name: string }>>;
+};
+
+type UploadWidgetCloudinaryStateTarget =
+  | UploadWidgetCloudinaryState
+  | {
+    service?: UploadWidgetCloudinaryState;
+  };
+
+function hasUploadWidgetCloudinaryState(
+  value: UploadWidgetCloudinaryStateTarget
+): value is UploadWidgetCloudinaryState {
+  return (
+    "fetchUploadPresets" in value &&
+    typeof value.fetchUploadPresets === "function"
+  );
+}
+
 /**
  * Singleton panel instance for the upload widget.
  */
@@ -36,18 +61,64 @@ const CHUNKED_UPLOAD_THRESHOLD = 20 * 1024 * 1024;
  */
 const UPLOAD_CHUNK_SIZE = 6 * 1024 * 1024;
 
+function getUploadAssetResourceType(asset: any): string {
+  return asset.resource_type || "raw";
+}
+
+function getSignedOriginalUrl(asset: any, resourceType: string): string | undefined {
+  if (asset.type !== "authenticated") {
+    return undefined;
+  }
+
+  return cloudinary.url(asset.public_id, {
+    resource_type: resourceType,
+    type: asset.type,
+    secure: true,
+    sign_url: true,
+    ...(resourceType !== "raw" && asset.format ? { format: asset.format } : {}),
+  });
+}
+
+function getOptimizedUrl(asset: any, resourceType: string): string {
+  const signedOriginalUrl = getSignedOriginalUrl(asset, resourceType);
+  if (signedOriginalUrl) {
+    return signedOriginalUrl;
+  }
+
+  return resourceType === "raw"
+    ? cloudinary.url(asset.public_id, { resource_type: "raw", type: asset.type, secure: true })
+    : cloudinary.url(asset.public_id, {
+      resource_type: resourceType,
+      type: asset.type,
+      secure: true,
+      transformation: [
+        { fetch_format: resourceType === "video" ? "auto:video" : "auto" },
+        { quality: "auto" },
+      ],
+    });
+}
+
+function withSignedAuthenticatedUrl(asset: any): any {
+  const resourceType = getUploadAssetResourceType(asset);
+  const signedOriginalUrl = getSignedOriginalUrl(asset, resourceType);
+  return signedOriginalUrl
+    ? { ...asset, secure_url: signedOriginalUrl }
+    : asset;
+}
+
 /**
  * Registers commands for the Cloudinary upload widget.
  */
 function registerUpload(
   context: vscode.ExtensionContext,
-  provider: CloudinaryTreeDataProvider
+  cloudinaryStateTarget: UploadWidgetCloudinaryStateTarget
 ) {
+  const cloudinaryState = getUploadCloudinaryState(cloudinaryStateTarget);
+
   context.subscriptions.push(
     vscode.commands.registerCommand("cloudinary.openUploadWidget", async () => {
       try {
-        await provider.fetchUploadPresets();
-        openOrRevealUploadPanel("", provider, context);
+        await openOrRevealUploadPanel("", cloudinaryState, context);
       } catch (err: any) {
         vscode.window.showErrorMessage(
           `Failed to open upload widget: ${err.message}`
@@ -61,9 +132,8 @@ function registerUpload(
       "cloudinary.uploadToFolder",
       async (folderItem: { label: string; data: { path?: string } }) => {
         try {
-          await provider.fetchUploadPresets();
           const folderPath = folderItem.data.path || "";
-          openOrRevealUploadPanel(folderPath, provider, context);
+          await openOrRevealUploadPanel(folderPath, cloudinaryState, context);
         } catch (err: any) {
           vscode.window.showErrorMessage(
             `Failed to open upload widget: ${err.message}`
@@ -87,32 +157,62 @@ export function resetUploadPanel(): void {
   uploadPanel = undefined;
 }
 
+function getUploadCloudinaryState(
+  cloudinaryStateTarget: UploadWidgetCloudinaryStateTarget
+): UploadWidgetCloudinaryState {
+  if (hasUploadWidgetCloudinaryState(cloudinaryStateTarget)) {
+    return cloudinaryStateTarget;
+  }
+
+  const service = cloudinaryStateTarget.service;
+  if (!service) {
+    throw new Error("Cloudinary service is unavailable");
+  }
+
+  return service;
+}
+
 /**
  * Opens the upload panel or reveals it if already open.
  */
-function openOrRevealUploadPanel(
+async function openOrRevealUploadPanel(
   folderPath: string,
-  provider: CloudinaryTreeDataProvider,
+  cloudinaryState: UploadWidgetCloudinaryState,
   context: vscode.ExtensionContext
-) {
+): Promise<void> {
   currentFolderPath = folderPath;
 
   if (uploadPanel) {
-    uploadPanel.reveal(vscode.ViewColumn.One);
-    uploadPanel.webview.postMessage({
-      command: "setFolder",
-      folderPath: folderPath,
-    });
-    return;
+    try {
+      uploadPanel.reveal(vscode.ViewColumn.One);
+      uploadPanel.webview.postMessage({
+        command: "setFolder",
+        folderPath: folderPath,
+      });
+      return;
+    } catch {
+      uploadPanel = undefined;
+    }
   }
 
-  uploadPanel = createUploadPanel(provider, context);
+  uploadPanel = await createUploadPanel(cloudinaryState, context);
 
   uploadPanel.onDidDispose(() => {
     uploadPanel = undefined;
   });
 }
 
+/**
+ * Posts a message to a webview panel, swallowing errors if the panel was disposed.
+ */
+function safePostToPanel(panel: vscode.WebviewPanel, message: unknown): void {
+  try {
+    panel.webview.postMessage(message);
+  } catch {
+    // Panel disposed between post calls; safe to ignore.
+  }
+}
+
 /**
  * Uploads a file with progress tracking.
  */
@@ -129,12 +229,12 @@ async function uploadWithProgress(
   return new Promise((resolve, reject) => {
     const uploadStream = useChunkedUpload
       ? cloudinary.uploader.upload_chunked_stream(
-          { ...options, chunk_size: UPLOAD_CHUNK_SIZE },
-          (error, result) => (error ? reject(error) : resolve(result))
-        )
+        { ...options, chunk_size: UPLOAD_CHUNK_SIZE },
+        (error, result) => (error ? reject(error) : resolve(result))
+      )
       : cloudinary.uploader.upload_stream(options, (error, result) =>
-          error ? reject(error) : resolve(result)
-        );
+        error ? reject(error) : resolve(result)
+      );
 
     let uploaded = 0;
     const total = buffer.length;
@@ -146,7 +246,7 @@ async function uploadWithProgress(
         if (chunk.length > 0) {
           uploaded += chunk.length;
           const percent = Math.round((uploaded / total) * 100);
-          panel.webview.postMessage({
+          safePostToPanel(panel, {
             command: "uploadProgress",
             fileId,
             percent,
@@ -163,13 +263,27 @@ async function uploadWithProgress(
 }
 
 /**
- * Collects folder options from the provider's cache.
+ * Collects folder options from the Cloudinary service.
  */
-function collectFolderOptions(provider: CloudinaryTreeDataProvider): FolderOption[] {
+async function collectFolderOptions(
+  cloudinaryState: UploadWidgetCloudinaryState
+): Promise<FolderOption[]> {
   const folders: FolderOption[] = [{ path: "", label: "/ (root)" }];
-  for (const folder of provider.getAvailableFolders()) {
-    folders.push({ path: folder.path, label: folder.path });
+  const seenPaths = new Set<string>();
+
+  try {
+    for (const folder of await cloudinaryState.listAllFolders()) {
+      if (!folder.path || seenPaths.has(folder.path)) {
+        continue;
+      }
+
+      seenPaths.add(folder.path);
+      folders.push({ path: folder.path, label: folder.path });
+    }
+  } catch {
+    return folders;
   }
+
   return folders;
 }
 
@@ -177,7 +291,7 @@ function collectFolderOptions(provider: CloudinaryTreeDataProvider): FolderOptio
  * Creates upload options for the Cloudinary API.
  */
 function getUploadOptions(
-  provider: CloudinaryTreeDataProvider,
+  cloudinaryState: UploadWidgetCloudinaryState,
   presetName: string | null | undefined,
   folder: string,
   publicId?: string,
@@ -191,7 +305,7 @@ function getUploadOptions(
   }
 
   if (folder) {
-    if (provider.dynamicFolders) {
+    if (cloudinaryState.dynamicFolders) {
       options.asset_folder = folder;
     } else {
       options.folder = folder;
@@ -200,7 +314,7 @@ function getUploadOptions(
 
   if (fileName) {
     options.filename_override = fileName;
-    if (provider.dynamicFolders) {
+    if (cloudinaryState.dynamicFolders) {
       options.display_name = fileName.replace(/\.[^/.]+$/, "");
     }
   }
@@ -222,11 +336,11 @@ function getUploadOptions(
 /**
  * Creates the webview panel with custom upload UI.
  */
-function createUploadPanel(
-  provider: CloudinaryTreeDataProvider,
+async function createUploadPanel(
+  cloudinaryState: UploadWidgetCloudinaryState,
   context: vscode.ExtensionContext
-): vscode.WebviewPanel {
-  const cloudName = provider.cloudName!;
+): Promise<vscode.WebviewPanel> {
+  const cloudName = cloudinaryState.cloudName!;
   const panel = vscode.window.createWebviewPanel(
     "cloudinaryUploadWidget",
     `Upload — ${cloudName}`,
@@ -246,8 +360,8 @@ function createUploadPanel(
     "cloudinary_icon_blue.png"
   );
 
-  const currentPreset = provider.getCurrentUploadPreset() || "";
-  const folders = collectFolderOptions(provider);
+  const currentPreset = cloudinaryState.getCurrentUploadPreset() || "";
+  const initialFolders: FolderOption[] = [{ path: "", label: "/ (root)" }];
 
   const uploadScriptUri = getScriptUri(
     panel.webview,
@@ -255,8 +369,9 @@ function createUploadPanel(
     "upload-widget.js"
   );
 
-  // Configuration to pass to the webview
-  const presetsJson = JSON.stringify(provider.uploadPresets);
+  // Configuration to pass to the webview. Render with cached presets/folders
+  // immediately; refresh asynchronously below to avoid blocking the panel open.
+  const presetsJson = JSON.stringify(cloudinaryState.uploadPresets);
   const initScript = `
     initUploadWidget({
       cloudName: ${JSON.stringify(cloudName)},
@@ -268,7 +383,12 @@ function createUploadPanel(
     title: "Upload to Cloudinary",
     webview: panel.webview,
     extensionUri: context.extensionUri,
-    bodyContent: getUploadContent(currentPreset, provider, currentFolderPath, folders),
+    bodyContent: getUploadContent(
+      currentPreset,
+      cloudinaryState.uploadPresets,
+      currentFolderPath,
+      initialFolders
+    ),
     bodyClass: "layout-centered",
     additionalScripts: [uploadScriptUri],
     inlineScript: initScript,
@@ -285,7 +405,7 @@ function createUploadPanel(
       const presetName = message.preset !== undefined ? message.preset : currentPreset;
       const folder = message.folderPath !== undefined ? message.folderPath : currentFolderPath;
       const options = getUploadOptions(
-        provider,
+        cloudinaryState,
         presetName,
         folder,
         message.publicId,
@@ -294,13 +414,15 @@ function createUploadPanel(
       );
 
       try {
-        panel.webview.postMessage({ command: "uploadStarted", fileId: message.fileId });
+        safePostToPanel(panel, { command: "uploadStarted", fileId: message.fileId });
 
-        const result = await uploadWithProgress(panel, message.dataUri, options, message.fileId);
+        const result = withSignedAuthenticatedUrl(
+          await uploadWithProgress(panel, message.dataUri, options, message.fileId)
+        );
         result._uploadedToFolder = folder || "(root)";
         result._originalFileName = message.fileName;
 
-        panel.webview.postMessage({
+        safePostToPanel(panel, {
           command: "uploadComplete",
           fileId: message.fileId,
           asset: result,
@@ -308,7 +430,7 @@ function createUploadPanel(
 
         vscode.commands.executeCommand("cloudinary.refresh");
       } catch (err: any) {
-        panel.webview.postMessage({
+        safePostToPanel(panel, {
           command: "uploadError",
           fileId: message.fileId,
           error: err.message || "Upload failed",
@@ -333,7 +455,7 @@ function createUploadPanel(
       }
 
       const options = getUploadOptions(
-        provider,
+        cloudinaryState,
         presetName,
         folder,
         message.publicId,
@@ -343,17 +465,19 @@ function createUploadPanel(
       const fileId = message.fileId || `url-${Date.now()}`;
 
       try {
-        panel.webview.postMessage({ command: "uploadStarted", fileId, fileName: message.url });
-        panel.webview.postMessage({ command: "uploadProgress", fileId, percent: 50 });
+        safePostToPanel(panel, { command: "uploadStarted", fileId, fileName: message.url });
+        safePostToPanel(panel, { command: "uploadProgress", fileId, percent: 50 });
 
-        const result = await cloudinary.uploader.upload(message.url, options);
+        const result = withSignedAuthenticatedUrl(
+          await cloudinary.uploader.upload(message.url, options)
+        );
         result._uploadedToFolder = folder || "(root)";
         result._originalFileName = urlFileName;
 
-        panel.webview.postMessage({ command: "uploadComplete", fileId, asset: result });
+        safePostToPanel(panel, { command: "uploadComplete", fileId, asset: result });
         vscode.commands.executeCommand("cloudinary.refresh");
       } catch (err: any) {
-        panel.webview.postMessage({
+        safePostToPanel(panel, {
           command: "uploadError",
           fileId,
           error: err.message || "Upload failed",
@@ -367,25 +491,15 @@ function createUploadPanel(
     }
 
     if (message.command === "refreshFolders") {
-      const updatedFolders = collectFolderOptions(provider);
-      panel.webview.postMessage({ command: "updateFolders", folders: updatedFolders });
+      const updatedFolders = await collectFolderOptions(cloudinaryState);
+      safePostToPanel(panel, { command: "updateFolders", folders: updatedFolders });
     }
 
     if (message.command === "openAsset" && message.asset) {
       const asset = message.asset;
-      const assetType = asset.resource_type || "raw";
-
-      const optimizedUrl =
-        assetType === "raw"
-          ? cloudinary.url(asset.public_id, { resource_type: "raw", type: asset.type })
-          : cloudinary.url(asset.public_id, {
-              resource_type: assetType,
-              type: asset.type,
-              transformation: [
-                { fetch_format: assetType === "video" ? "auto:video" : "auto" },
-                { quality: "auto" },
-              ],
-            });
+      const assetType = getUploadAssetResourceType(asset);
+      const signedOriginalUrl = getSignedOriginalUrl(asset, assetType);
+      const optimizedUrl = getOptimizedUrl(asset, assetType);
 
       const filename =
         asset._originalFileName ||
@@ -396,12 +510,36 @@ function createUploadPanel(
       vscode.commands.executeCommand("cloudinary.openAsset", {
         ...asset,
         displayType: assetType,
+        secure_url: signedOriginalUrl || asset.secure_url,
         optimized_url: optimizedUrl,
         filename,
       });
     }
   });
 
+  // Deferred load: fetch presets and folders in parallel without blocking the
+  // initial render. Posts updates to the client when each completes.
+  void (async () => {
+    const presetsTask = cloudinaryState
+      .fetchUploadPresets()
+      .then((presets) => {
+        safePostToPanel(panel, { command: "updatePresets", presets });
+      })
+      .catch((err) => {
+        console.error("Failed to fetch upload presets:", err);
+      });
+
+    const foldersTask = collectFolderOptions(cloudinaryState)
+      .then((folders) => {
+        safePostToPanel(panel, { command: "updateFolders", folders });
+      })
+      .catch((err) => {
+        console.error("Failed to load folders:", err);
+      });
+
+    await Promise.all([presetsTask, foldersTask]);
+  })();
+
   return panel;
 }
 
@@ -410,7 +548,7 @@ function createUploadPanel(
  */
 function getUploadContent(
   currentPreset: string,
-  provider: CloudinaryTreeDataProvider,
+  uploadPresets: UploadPreset[],
   initialFolderPath: string,
   folders: FolderOption[]
 ): string {
@@ -420,7 +558,7 @@ function getUploadContent(
     )
     .join("");
 
-  const presetOptionsHtml = provider.uploadPresets
+  const presetOptionsHtml = uploadPresets
     .map(
       (p) => `<option value="${escapeHtml(p.name)}" ${p.name === currentPreset ? "selected" : ""}>${escapeHtml(p.name)} (${p.signed ? "Signed" : "Unsigned"})</option>`
     )
@@ -442,7 +580,7 @@ function getUploadContent(
           <div class="form-group">
             <div class="preset-toggle">
               <label class="form-group__label" for="presetSelect">Upload Preset <span style="opacity: 0.7; font-weight: normal;">(optional)</span></label>
-              ${provider.uploadPresets.length > 0 ? '<button class="preset-toggle__btn" id="presetDetailsToggle">Settings</button>' : ""}
+              ${uploadPresets.length > 0 ? '<button class="preset-toggle__btn" id="presetDetailsToggle">Settings</button>' : ""}
             </div>
             <select id="presetSelect" class="select">
               <option value="">No preset (signed upload)</option>
diff --git a/src/commands/viewOptions.ts b/src/commands/viewOptions.ts
index 9e82f08..6a80dbf 100644
--- a/src/commands/viewOptions.ts
+++ b/src/commands/viewOptions.ts
@@ -1,24 +1,31 @@
 import * as vscode from "vscode";
-import { CloudinaryTreeDataProvider } from "../tree/treeDataProvider";
+import { LibraryWebviewViewProvider } from "../webview/libraryView";
 
 type ResourceType = "all" | "image" | "video" | "raw";
 type SortDirection = "asc" | "desc";
+type ViewStateUpdate = {
+  resourceTypeFilter?: ResourceType;
+  sortDirection?: SortDirection;
+};
+type ViewAwareLibraryWebview = LibraryWebviewViewProvider & {
+  applyView?: (opts: ViewStateUpdate) => Thenable<void> | Promise<void>;
+};
 
 interface ViewOption {
   label: string;
   description?: string;
   kind?: vscode.QuickPickItemKind;
-  action?: () => void;
+  viewState?: ViewStateUpdate;
 }
 
 /**
  * Registers a command that opens a Quick Pick with view options (filter and sort).
  * @param context - VS Code extension context.
- * @param provider - Cloudinary tree data provider instance.
+ * @param libraryWebview - Cloudinary library webview provider.
  */
 function registerViewOptions(
   context: vscode.ExtensionContext,
-  provider: CloudinaryTreeDataProvider
+  libraryWebview?: LibraryWebviewViewProvider
 ) {
   context.subscriptions.push(
     vscode.commands.registerCommand(
@@ -30,34 +37,34 @@ function registerViewOptions(
           {
             label: "$(file) All Types",
             description: "Show all asset types",
-            action: () => provider.refresh({ resourceTypeFilter: "all" as ResourceType }),
+            viewState: { resourceTypeFilter: "all" as ResourceType },
           },
           {
             label: "$(file-media) Images Only",
             description: "Show only images",
-            action: () => provider.refresh({ resourceTypeFilter: "image" as ResourceType }),
+            viewState: { resourceTypeFilter: "image" as ResourceType },
           },
           {
             label: "$(device-camera-video) Videos Only",
             description: "Show only videos",
-            action: () => provider.refresh({ resourceTypeFilter: "video" as ResourceType }),
+            viewState: { resourceTypeFilter: "video" as ResourceType },
           },
           {
             label: "$(file-binary) Raw Files Only",
             description: "Show only raw files",
-            action: () => provider.refresh({ resourceTypeFilter: "raw" as ResourceType }),
+            viewState: { resourceTypeFilter: "raw" as ResourceType },
           },
           // Sort section
           { label: "Sort Order", kind: vscode.QuickPickItemKind.Separator },
           {
             label: "$(arrow-down) Newest First",
             description: "Most recently uploaded assets first",
-            action: () => provider.refresh({ sortDirection: "desc" as SortDirection }),
+            viewState: { sortDirection: "desc" as SortDirection },
           },
           {
             label: "$(arrow-up) Oldest First",
             description: "Oldest uploaded assets first",
-            action: () => provider.refresh({ sortDirection: "asc" as SortDirection }),
+            viewState: { sortDirection: "asc" as SortDirection },
           },
         ];
 
@@ -66,8 +73,8 @@ function registerViewOptions(
           matchOnDescription: true,
         });
 
-        if (selected && selected.action) {
-          selected.action();
+        if (selected?.viewState) {
+          await (libraryWebview as ViewAwareLibraryWebview | undefined)?.applyView?.(selected.viewState);
         }
       }
     )
diff --git a/src/commands/welcomeScreen.ts b/src/commands/welcomeScreen.ts
index c32a18f..f89a4a7 100644
--- a/src/commands/welcomeScreen.ts
+++ b/src/commands/welcomeScreen.ts
@@ -1,21 +1,23 @@
 import * as vscode from "vscode";
-import { CloudinaryTreeDataProvider } from "../tree/treeDataProvider";
+import { CloudinaryService } from "../cloudinary/cloudinaryService";
 import {
   createWebviewDocument,
   getScriptUri,
 } from "../webview/webviewUtils";
 import { escapeHtml } from "../webview/utils/helpers";
 
+type WelcomeScreenCloudinaryState = Pick<CloudinaryService, "cloudName" | "apiKey">;
+
 /**
  * Registers the welcome screen command.
  */
 function registerWelcomeScreen(
   context: vscode.ExtensionContext,
-  provider: CloudinaryTreeDataProvider
+  cloudinaryState: WelcomeScreenCloudinaryState
 ) {
   context.subscriptions.push(
     vscode.commands.registerCommand("cloudinary.openWelcomeScreen", () => {
-      createWelcomePanel(context, provider);
+      createWelcomePanel(context, cloudinaryState);
     })
   );
 }
@@ -25,7 +27,7 @@ function registerWelcomeScreen(
  */
 function createWelcomePanel(
   context: vscode.ExtensionContext,
-  provider: CloudinaryTreeDataProvider
+  cloudinaryState: WelcomeScreenCloudinaryState
 ): vscode.WebviewPanel {
   const panel = vscode.window.createWebviewPanel(
     "cloudinaryWelcome",
@@ -56,7 +58,7 @@ function createWelcomePanel(
     title: "Welcome to Cloudinary",
     webview: panel.webview,
     extensionUri: context.extensionUri,
-    bodyContent: getWelcomeContent(provider),
+    bodyContent: getWelcomeContent(cloudinaryState),
     additionalScripts: [welcomeScriptUri],
   });
 
@@ -77,7 +79,7 @@ function createWelcomePanel(
           vscode.env.openExternal(vscode.Uri.parse(message.data));
         }
         break;
-      case "focusTreeView":
+      case "focusDashboard":
         vscode.commands.executeCommand("workbench.view.extension.cloudinary");
         break;
     }
@@ -89,9 +91,9 @@ function createWelcomePanel(
 /**
  * Generates the welcome screen body content.
  */
-function getWelcomeContent(provider: CloudinaryTreeDataProvider): string {
-  const hasConfig = !!(provider.cloudName && provider.apiKey);
-  const cloudName = escapeHtml(provider.cloudName || "");
+function getWelcomeContent(cloudinaryState: WelcomeScreenCloudinaryState): string {
+  const hasConfig = !!(cloudinaryState.cloudName && cloudinaryState.apiKey);
+  const cloudName = escapeHtml(cloudinaryState.cloudName || "");
 
   return `
   <style>
@@ -347,9 +349,9 @@ function getWelcomeContent(provider: CloudinaryTreeDataProvider): string {
           <div class="wg-status-detail">${hasConfig ? "Your environment is ready. Open the dashboard to explore your media." : "Add your Cloudinary API credentials to get started."}</div>
         </div>
         ${hasConfig
-          ? `<button class="wg-btn wg-btn--ghost" onclick="focusTreeView()">Open Dashboard →</button>`
-          : `<button class="wg-btn wg-btn--primary" onclick="openGlobalConfig()">Configure →</button>`
-        }
+      ? `<button class="wg-btn wg-btn--ghost" onclick="focusDashboard()">Open Dashboard →</button>`
+      : `<button class="wg-btn wg-btn--primary" onclick="openGlobalConfig()">Configure →</button>`
+    }
       </div>
 
       <!-- ── Setup steps ── -->
@@ -381,7 +383,7 @@ function getWelcomeContent(provider: CloudinaryTreeDataProvider): string {
             <div class="wg-step-title">Explore the Dashboard</div>
             <p class="wg-step-desc">The Cloudinary sidebar gives you instant access to your media library, upload tools, and AI integrations — all without leaving your editor. Open it from the activity bar on the left.</p>
             <div class="wg-step-actions">
-              <button class="wg-btn wg-btn--primary" onclick="focusTreeView()">Open Dashboard</button>
+              <button class="wg-btn wg-btn--primary" onclick="focusDashboard()">Open Dashboard</button>
             </div>
           </div>
         </div>
@@ -390,7 +392,7 @@ function getWelcomeContent(provider: CloudinaryTreeDataProvider): string {
           <div class="wg-step-num">3</div>
           <div class="wg-step-body">
             <div class="wg-step-title">Browse &amp; manage your media</div>
-            <p class="wg-step-desc">Search and explore assets in the tree view. Preview images and videos, copy delivery URLs, upload new files with drag-and-drop, and manage transformations — all from VS Code.</p>
+            <p class="wg-step-desc">Search and explore assets in the media library. Preview images and videos, copy delivery URLs, upload new files with drag-and-drop, and manage transformations — all from VS Code.</p>
             <div class="wg-step-actions">
               <button class="wg-btn wg-btn--ghost" onclick="openExternal('https://cloudinary.com/documentation/how_to_integrate_cloudinary')">View Documentation</button>
             </div>
diff --git a/src/config/configUtils.ts b/src/config/configUtils.ts
index c89a988..6d606cd 100644
--- a/src/config/configUtils.ts
+++ b/src/config/configUtils.ts
@@ -68,7 +68,7 @@ export function getGlobalConfigPath(): string {
     fs.writeFileSync(envPath, templateContent, 'utf-8');
 
     vscode.window.showInformationMessage(
-      '✅ Created global Cloudinary config at ~/.cloudinary/environments.json'
+      '$(new-file) Created global Cloudinary config at ~/.cloudinary/environments.json'
     );
   }
 
@@ -88,7 +88,7 @@ export async function loadEnvironments(): Promise<Record<string, CloudinaryEnvir
     globalEnvs = JSON.parse(raw);
   } catch (err: any) {
     vscode.window.showErrorMessage(
-      `❌ Failed to read global Cloudinary config: ${err.message}`
+      `Failed to read global Cloudinary config: ${err.message}`
     );
   }
 
@@ -105,9 +105,9 @@ export async function loadEnvironments(): Promise<Record<string, CloudinaryEnvir
     }
   } catch (err: any) {
     vscode.window.showErrorMessage(
-      `❌ Failed to read workspace Cloudinary config: ${err.message}`
+      `Failed to read workspace Cloudinary config: ${err.message}`
     );
   }
 
   return globalEnvs;
-}
\ No newline at end of file
+}
diff --git a/src/config/detectFolderMode.ts b/src/config/detectFolderMode.ts
index 5537b3d..fbfaace 100644
--- a/src/config/detectFolderMode.ts
+++ b/src/config/detectFolderMode.ts
@@ -15,7 +15,7 @@ export default async function detectFolderMode(
   apiSecret: string
 ): Promise<boolean> {
   if (!cloudName || !apiKey || !apiSecret) {
-    vscode.window.showErrorMessage("❌ Cloud name, API key, and API secret are required.");
+    vscode.window.showErrorMessage("Cloud name, API key, and API secret are required.");
     return false;
   }
 
@@ -47,4 +47,4 @@ export default async function detectFolderMode(
     // Default to fixed folder mode if the request fails
     return false;
   }
-}
\ No newline at end of file
+}
diff --git a/src/extension.ts b/src/extension.ts
index ab10f7d..9b3ef1c 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -8,10 +8,12 @@ import {
 } from "./config/configUtils";
 import detectFolderMode from "./config/detectFolderMode";
 import { registerAllCommands } from "./commands/registerCommands";
-import { CloudinaryTreeDataProvider } from "./tree/treeDataProvider";
+import { CloudinaryService, Credentials } from "./cloudinary/cloudinaryService";
+import { createCloudinarySdkAdapter } from "./cloudinary/cloudinarySdkAdapter";
 import { v2 as cloudinary } from "cloudinary";
 import { generateUserAgent } from "./utils/userAgent";
 import { HomescreenViewProvider } from "./webview/homescreenView";
+import { LibraryWebviewViewProvider } from "./webview/libraryView";
 import { resetUploadPanel } from "./commands/uploadWidget";
 import { resetAllPreviewPanels } from "./commands/previewAsset";
 
@@ -40,13 +42,29 @@ function getStatusBarTooltip(dynamicFolders: boolean): string {
  * @param context - Extension context provided by VS Code.
  */
 export async function activate(context: vscode.ExtensionContext) {
-  const cloudinaryProvider = new CloudinaryTreeDataProvider();
+  const cloudinaryService = new CloudinaryService(createCloudinarySdkAdapter());
 
   // Set initial view to homescreen
   vscode.commands.executeCommand("setContext", "cloudinary.activeView", "homescreen");
 
+  const libraryWebviewProvider = new LibraryWebviewViewProvider(
+    context.extensionUri,
+    cloudinaryService
+  );
+  context.subscriptions.push(
+    vscode.window.registerWebviewViewProvider(
+      LibraryWebviewViewProvider.viewType,
+      libraryWebviewProvider,
+      { webviewOptions: { retainContextWhenHidden: true } }
+    )
+  );
+
   // Register homescreen sidebar view
-  const homescreenProvider = new HomescreenViewProvider(context.extensionUri, cloudinaryProvider);
+  const homescreenProvider = new HomescreenViewProvider(
+    context.extensionUri,
+    cloudinaryService,
+    libraryWebviewProvider
+  );
   context.subscriptions.push(
     vscode.window.registerWebviewViewProvider(
       HomescreenViewProvider.viewType,
@@ -55,14 +73,87 @@ export async function activate(context: vscode.ExtensionContext) {
     )
   );
 
-  // Refresh all open webviews when the active environment changes.
-  context.subscriptions.push(
-    cloudinaryProvider.onDidChangeEnvironment(() => {
-      homescreenProvider.refresh();
-      resetUploadPanel();
-      resetAllPreviewPanels();
-    })
-  );
+  const refreshEnvironmentViews = async (): Promise<void> => {
+    homescreenProvider.refresh();
+    resetUploadPanel();
+    resetAllPreviewPanels();
+    await libraryWebviewProvider.envChanged();
+  };
+
+  const updateCloudinaryConfig = (
+    cloudName: string,
+    apiKey: string,
+    apiSecret: string
+  ): void => {
+    (cloudinary.utils as any).userPlatform = generateUserAgent();
+    cloudinary.config({
+      cloud_name: cloudName,
+      api_key: apiKey,
+      api_secret: apiSecret,
+    });
+  };
+
+  const resolveDynamicFolders = async (
+    cloudName: string,
+    apiKey: string,
+    apiSecret: string
+  ): Promise<boolean> => {
+    const cacheKey = `cloudinary.dynamicFolders.${cloudName}`;
+    const cachedFolderMode = context.globalState.get(cacheKey) as boolean | undefined;
+
+    if (typeof cachedFolderMode === "boolean") {
+      return cachedFolderMode;
+    }
+
+    const dynamicFolders = await detectFolderMode(cloudName, apiKey, apiSecret);
+    await context.globalState.update(cacheKey, dynamicFolders);
+    return dynamicFolders;
+  };
+
+  const environmentTarget: Pick<
+    CloudinaryService,
+    "cloudName" | "apiKey" | "apiSecret" | "uploadPreset" | "dynamicFolders"
+  > & {
+    setCredentials: (creds: Credentials) => void;
+  } = {
+    get cloudName() {
+      return cloudinaryService.cloudName;
+    },
+    set cloudName(value: string | null) {
+      cloudinaryService.cloudName = value;
+    },
+    get apiKey() {
+      return cloudinaryService.apiKey;
+    },
+    set apiKey(value: string | null) {
+      cloudinaryService.apiKey = value;
+    },
+    get apiSecret() {
+      return cloudinaryService.apiSecret;
+    },
+    set apiSecret(value: string | null) {
+      cloudinaryService.apiSecret = value;
+    },
+    get uploadPreset() {
+      return cloudinaryService.uploadPreset;
+    },
+    set uploadPreset(value: string | null) {
+      cloudinaryService.uploadPreset = value;
+    },
+    get dynamicFolders() {
+      return cloudinaryService.dynamicFolders;
+    },
+    set dynamicFolders(value: boolean) {
+      cloudinaryService.dynamicFolders = value;
+    },
+    setCredentials(creds: Credentials) {
+      cloudinaryService.setCredentials(creds);
+      if (creds.cloudName && creds.apiKey && creds.apiSecret) {
+        updateCloudinaryConfig(creds.cloudName, creds.apiKey, creds.apiSecret);
+      }
+      void refreshEnvironmentViews();
+    },
+  };
 
   // Check if this is the first run of the extension
   const isFirstRun = context.globalState.get('cloudinary.firstRun', true);
@@ -82,7 +173,7 @@ export async function activate(context: vscode.ExtensionContext) {
 
   if (!selectedEnv) {
     vscode.window.showErrorMessage(
-      "❌ No Cloudinary environment found in config."
+      "No Cloudinary environment found in config."
     );
     return;
   }
@@ -99,36 +190,32 @@ export async function activate(context: vscode.ExtensionContext) {
     statusBar.command = "cloudinary.openGlobalConfig";
     statusBar.show();
     context.subscriptions.push(statusBar);
-    
-    // Still register the tree view but don't make API calls
-    vscode.window.registerTreeDataProvider(
-      "cloudinaryMediaLibrary",
-      cloudinaryProvider
+
+    registerAllCommands(
+      context,
+      cloudinaryService,
+      environmentTarget,
+      statusBar,
+      homescreenProvider,
+      libraryWebviewProvider
     );
-    registerAllCommands(context, cloudinaryProvider, statusBar, homescreenProvider);
     return;
   }
 
-  cloudinaryProvider.cloudName = firstCloudName;
-  cloudinaryProvider.apiKey = selectedEnv.apiKey;
-  cloudinaryProvider.apiSecret = selectedEnv.apiSecret;
-  cloudinaryProvider.uploadPreset = selectedEnv.uploadPreset || null;
-
-  // Set user platform for analytics
-  (cloudinary.utils as any).userPlatform = generateUserAgent();
-
-  cloudinary.config({
-    cloud_name: firstCloudName,
-    api_key: selectedEnv.apiKey,
-    api_secret: selectedEnv.apiSecret,
+  cloudinaryService.setCredentials({
+    cloudName: firstCloudName,
+    apiKey: selectedEnv.apiKey,
+    apiSecret: selectedEnv.apiSecret,
+    uploadPreset: selectedEnv.uploadPreset || null,
   });
+  updateCloudinaryConfig(firstCloudName, selectedEnv.apiKey, selectedEnv.apiSecret);
 
   statusBar = vscode.window.createStatusBarItem(
     vscode.StatusBarAlignment.Right,
     500
   );
   // Status bar text will be updated after folder mode detection
-  statusBar.text = `$(cloud) ${cloudinaryProvider.cloudName}`;
+  statusBar.text = `$(cloud) ${cloudinaryService.cloudName}`;
   statusBar.tooltip = "Click to switch Cloudinary environment";
   statusBar.command = "cloudinary.switchEnvironment";
   statusBar.show();
@@ -148,12 +235,12 @@ export async function activate(context: vscode.ExtensionContext) {
     const cloudNames = Object.keys(updatedEnvs);
 
     if (cloudNames.length === 0) {
-      vscode.window.showErrorMessage("❌ No Cloudinary environments found in updated config.");
+      vscode.window.showErrorMessage("No Cloudinary environments found in updated config.");
       return;
     }
 
     // Try to keep the previously active cloud name
-    const preferredCloud = cloudinaryProvider.cloudName;
+    const preferredCloud = cloudinaryService.cloudName;
     const newCloudName = cloudNames.includes(preferredCloud || '')
       ? preferredCloud
       : cloudNames[0];
@@ -169,75 +256,51 @@ export async function activate(context: vscode.ExtensionContext) {
       return;
     }
 
-    cloudinaryProvider.cloudName = newCloudName;
-    cloudinaryProvider.apiKey = env.apiKey;
-    cloudinaryProvider.apiSecret = env.apiSecret;
-    cloudinaryProvider.uploadPreset = env.uploadPreset || null;
-
-    // Update user platform for analytics
-    (cloudinary.utils as any).userPlatform = generateUserAgent();
-
-    cloudinary.config({
-      cloud_name: newCloudName!,
-      api_key: env.apiKey,
-      api_secret: env.apiSecret,
+    const dynamicFolders = await resolveDynamicFolders(
+      newCloudName!,
+      env.apiKey,
+      env.apiSecret
+    );
+    cloudinaryService.setCredentials({
+      cloudName: newCloudName!,
+      apiKey: env.apiKey,
+      apiSecret: env.apiSecret,
+      uploadPreset: env.uploadPreset || null,
+      dynamicFolders,
     });
-
-    const cacheKey = `cloudinary.dynamicFolders.${newCloudName}`;
-    const cachedFolderMode = context.globalState.get(cacheKey) as boolean | undefined;
-
-    if (typeof cachedFolderMode === "boolean") {
-      cloudinaryProvider.dynamicFolders = cachedFolderMode;
-    } else {
-      cloudinaryProvider.dynamicFolders = await detectFolderMode(
-        newCloudName!,
-        env.apiKey,
-        env.apiSecret
-      );
-      context.globalState.update(cacheKey, cloudinaryProvider.dynamicFolders);
-    }
+    updateCloudinaryConfig(newCloudName!, env.apiKey, env.apiSecret);
 
     // Update status bar with folder mode indicator
-    statusBar.text = getStatusBarText(newCloudName!, cloudinaryProvider.dynamicFolders);
-    statusBar.tooltip = getStatusBarTooltip(cloudinaryProvider.dynamicFolders);
+    statusBar.text = getStatusBarText(newCloudName!, dynamicFolders);
+    statusBar.tooltip = getStatusBarTooltip(dynamicFolders);
     statusBar.command = "cloudinary.switchEnvironment";
 
-    cloudinaryProvider.refresh({
-      folderPath: '',
-      nextCursor: null,
-      searchQuery: null,
-      resourceTypeFilter: 'all'
-    });
-
-    cloudinaryProvider.notifyEnvironmentChange();
+    await refreshEnvironmentViews();
   });
 
   context.subscriptions.push(watcher);
 
   // Detect and cache folder mode
-  const cacheKey = `cloudinary.dynamicFolders.${cloudinaryProvider.cloudName}`;
-  const cachedFolderMode = context.globalState.get(cacheKey) as boolean | undefined;
-
-  if (typeof cachedFolderMode === "boolean") {
-    cloudinaryProvider.dynamicFolders = cachedFolderMode;
-  } else {
-    cloudinaryProvider.dynamicFolders = await detectFolderMode(
-      cloudinaryProvider.cloudName,
-      cloudinaryProvider.apiKey,
-      cloudinaryProvider.apiSecret
-    );
-    context.globalState.update(cacheKey, cloudinaryProvider.dynamicFolders);
-  }
+  cloudinaryService.dynamicFolders = await resolveDynamicFolders(
+    cloudinaryService.cloudName!,
+    cloudinaryService.apiKey!,
+    cloudinaryService.apiSecret!
+  );
 
   // Update status bar with folder mode indicator
-  statusBar.text = getStatusBarText(cloudinaryProvider.cloudName, cloudinaryProvider.dynamicFolders);
-  statusBar.tooltip = getStatusBarTooltip(cloudinaryProvider.dynamicFolders);
-
-  vscode.window.registerTreeDataProvider(
-    "cloudinaryMediaLibrary",
-    cloudinaryProvider
+  statusBar.text = getStatusBarText(cloudinaryService.cloudName!, cloudinaryService.dynamicFolders);
+  statusBar.tooltip = getStatusBarTooltip(cloudinaryService.dynamicFolders);
+
+  await refreshEnvironmentViews();
+
+  registerAllCommands(
+    context,
+    cloudinaryService,
+    environmentTarget,
+    statusBar,
+    homescreenProvider,
+    libraryWebviewProvider
   );
-  registerAllCommands(context, cloudinaryProvider, statusBar, homescreenProvider);
 }
 
 /**
diff --git a/src/test/suite/cloudinaryService.test.ts b/src/test/suite/cloudinaryService.test.ts
new file mode 100644
index 0000000..5ba4116
--- /dev/null
+++ b/src/test/suite/cloudinaryService.test.ts
@@ -0,0 +1,397 @@
+import * as assert from 'assert';
+import { CloudinaryService, CloudinarySdkAdapter } from '../../cloudinary/cloudinaryService';
+import { ClientAsset } from '../../cloudinary/types';
+
+function fakeAdapter(overrides: Partial<CloudinarySdkAdapter> = {}): CloudinarySdkAdapter {
+  return {
+    subFolders: async () => ({ folders: [] }),
+    search: async () => ({ resources: [], next_cursor: null }),
+    uploadPresets: async () => ({ presets: [] }),
+    urlFor: (publicId, opts) => {
+      const tx = Array.isArray(opts.transformation) ? (opts.transformation as any[]) : [];
+      const flat = Object.assign({}, ...tx);
+      const parts: string[] = [];
+      if (flat.width) { parts.push(`w_${flat.width}`); }
+      if (flat.height) { parts.push(`h_${flat.height}`); }
+      if (flat.crop) { parts.push(`c_${flat.crop}`); }
+      if (flat.fetch_format) { parts.push(`f_${flat.fetch_format}`); }
+      if (flat.quality) { parts.push(`q_${flat.quality}`); }
+      const tail = parts.length ? `/${parts.join(',')}` : '';
+      const signature = opts.sign_url ? '/s--signed--' : '';
+      const format = opts.format ? `.${opts.format}` : '';
+      return `https://res.cloudinary.com/demo/${opts.resource_type}/${opts.type || 'upload'}${signature}${tail}/${publicId}${format}`;
+    },
+    ...overrides,
+  };
+}
+
+suite('CloudinaryService', () => {
+  test('constructs without credentials', () => {
+    const svc = new CloudinaryService(fakeAdapter());
+    assert.strictEqual(svc.cloudName, null);
+    assert.strictEqual(svc.dynamicFolders, false);
+  });
+
+  test('setCredentials stores values', () => {
+    const svc = new CloudinaryService(fakeAdapter());
+    svc.setCredentials({ cloudName: 'demo', apiKey: 'k', apiSecret: 's', dynamicFolders: true });
+    assert.strictEqual(svc.cloudName, 'demo');
+    assert.strictEqual(svc.dynamicFolders, true);
+  });
+
+  test('setCredentials defaults uploadPreset to null when omitted', () => {
+    const svc = new CloudinaryService(fakeAdapter());
+    svc.setCredentials({ cloudName: 'demo', apiKey: 'k', apiSecret: 's' });
+    assert.strictEqual(svc.uploadPreset, null);
+    assert.strictEqual(svc.dynamicFolders, false);
+  });
+});
+
+suite('CloudinaryService.fetchChildren', () => {
+  test('returns folders and assets for root with dynamic folders', async () => {
+    const adapter = fakeAdapter({
+      subFolders: async (path) => {
+        assert.strictEqual(path, '');
+        return { folders: [{ name: 'photos', path: 'photos' }] };
+      },
+      search: async (opts) => {
+        assert.strictEqual(opts.expression, 'asset_folder=""');
+        return {
+          resources: [{
+            public_id: 'sample',
+            resource_type: 'image',
+            type: 'upload',
+            bytes: 1024,
+            secure_url: 'https://res.cloudinary.com/demo/image/upload/sample.jpg',
+          }],
+          next_cursor: null,
+        };
+      },
+    });
+    const svc = new CloudinaryService(adapter);
+    svc.setCredentials({ cloudName: 'demo', apiKey: 'k', apiSecret: 's', dynamicFolders: true });
+    const page = await svc.fetchChildren('', { resourceTypeFilter: 'all', sortDirection: 'desc' });
+    assert.strictEqual(page.folders.length, 1);
+    assert.strictEqual(page.folders[0].name, 'photos');
+    assert.strictEqual(page.assets.length, 1);
+    assert.strictEqual(page.assets[0].public_id, 'sample');
+    assert.ok(page.assets[0].optimized_url.startsWith('https://'));
+    assert.ok(page.assets[0].optimized_url.includes('f_auto'), 'optimized_url should include f_auto');
+    assert.ok(page.assets[0].optimized_url.includes('q_auto'), 'optimized_url should include q_auto');
+    assert.ok(page.assets[0].thumbnail_url.includes('w_160'));
+    assert.strictEqual(page.nextCursor, null);
+  });
+
+  test('filters out nested assets at root in fixed folder mode', async () => {
+    const adapter = fakeAdapter({
+      subFolders: async () => ({ folders: [] }),
+      search: async () => ({
+        resources: [
+          { public_id: 'root', resource_type: 'image', type: 'upload', secure_url: 'x' },
+          { public_id: 'foo/bar', resource_type: 'image', type: 'upload', secure_url: 'x' },
+        ],
+        next_cursor: null,
+      }),
+    });
+    const svc = new CloudinaryService(adapter);
+    svc.setCredentials({ cloudName: 'demo', apiKey: 'k', apiSecret: 's', dynamicFolders: false });
+    const page = await svc.fetchChildren('', { resourceTypeFilter: 'all', sortDirection: 'desc' });
+    assert.strictEqual(page.assets.length, 1);
+    assert.strictEqual(page.assets[0].public_id, 'root');
+  });
+
+  test('respects resourceTypeFilter', async () => {
+    const adapter = fakeAdapter({
+      search: async () => ({
+        resources: [
+          { public_id: 'a', resource_type: 'image', type: 'upload', secure_url: 'x' },
+          { public_id: 'b', resource_type: 'video', type: 'upload', secure_url: 'x' },
+        ],
+        next_cursor: null,
+      }),
+    });
+    const svc = new CloudinaryService(adapter);
+    svc.setCredentials({ cloudName: 'demo', apiKey: 'k', apiSecret: 's', dynamicFolders: true });
+    const page = await svc.fetchChildren('', { resourceTypeFilter: 'image', sortDirection: 'desc' });
+    assert.strictEqual(page.assets.length, 1);
+    assert.strictEqual(page.assets[0].public_id, 'a');
+  });
+
+  test('raw asset: thumbnail_url equals optimized_url', async () => {
+    const adapter = fakeAdapter({
+      search: async () => ({
+        resources: [
+          { public_id: 'doc.pdf', resource_type: 'raw', type: 'upload', secure_url: 'x' },
+        ],
+        next_cursor: null,
+      }),
+    });
+    const svc = new CloudinaryService(adapter);
+    svc.setCredentials({ cloudName: 'demo', apiKey: 'k', apiSecret: 's', dynamicFolders: true });
+    const page = await svc.fetchChildren('', { resourceTypeFilter: 'all', sortDirection: 'desc' });
+    assert.strictEqual(page.assets.length, 1);
+    assert.strictEqual(page.assets[0].thumbnail_url, page.assets[0].optimized_url);
+  });
+
+  test('authenticated asset uses signed original URL for preview fields', async () => {
+    const adapter = fakeAdapter({
+      search: async () => ({
+        resources: [
+          {
+            public_id: 'secure/sample',
+            resource_type: 'image',
+            type: 'authenticated',
+            format: 'jpg',
+            secure_url: 'https://res.cloudinary.com/demo/image/authenticated/secure/sample.jpg',
+          },
+        ],
+        next_cursor: null,
+      }),
+    });
+    const svc = new CloudinaryService(adapter);
+    svc.setCredentials({ cloudName: 'demo', apiKey: 'k', apiSecret: 's', dynamicFolders: true });
+    const page = await svc.fetchChildren('', { resourceTypeFilter: 'all', sortDirection: 'desc' });
+    const asset = page.assets[0];
+
+    assert.strictEqual(asset.type, 'authenticated');
+    assert.ok(asset.secure_url.includes('/authenticated/s--signed--/'), 'secure_url should be signed');
+    assert.strictEqual(asset.optimized_url, asset.secure_url);
+    assert.strictEqual(asset.thumbnail_url, asset.secure_url);
+    assert.ok(!asset.secure_url.includes('f_auto'), 'authenticated original URL should not add dynamic transformations');
+    assert.ok(asset.secure_url.endsWith('/secure/sample.jpg'));
+  });
+
+  test('propagates nextCursor into the search call', async () => {
+    let seenCursor: string | undefined;
+    const adapter = fakeAdapter({
+      search: async (opts) => {
+        seenCursor = opts.nextCursor;
+        return { resources: [], next_cursor: null };
+      },
+    });
+    const svc = new CloudinaryService(adapter);
+    svc.setCredentials({ cloudName: 'demo', apiKey: 'k', apiSecret: 's', dynamicFolders: true });
+    await svc.fetchChildren('', { resourceTypeFilter: 'all', sortDirection: 'desc', nextCursor: 'abc123' });
+    assert.strictEqual(seenCursor, 'abc123');
+  });
+
+  test('fixed folder mode at non-root uses folder="path" expression', async () => {
+    let seenExpr: string | undefined;
+    const adapter = fakeAdapter({
+      subFolders: async () => ({ folders: [] }),
+      search: async (opts) => {
+        seenExpr = opts.expression;
+        return { resources: [], next_cursor: null };
+      },
+    });
+    const svc = new CloudinaryService(adapter);
+    svc.setCredentials({ cloudName: 'demo', apiKey: 'k', apiSecret: 's', dynamicFolders: false });
+    await svc.fetchChildren('photos/2024', { resourceTypeFilter: 'all', sortDirection: 'desc' });
+    assert.strictEqual(seenExpr, 'folder="photos/2024"');
+  });
+});
+
+suite('CloudinaryService.prefetchRemaining', () => {
+  test('streams batches and stops when cursor is null', async () => {
+    let call = 0;
+    const adapter = fakeAdapter({
+      search: async () => {
+        call++;
+        if (call === 1) {
+          return { resources: [{ public_id: 'a', resource_type: 'image', type: 'upload', secure_url: 'x' }], next_cursor: 'c2' };
+        }
+        return { resources: [{ public_id: 'b', resource_type: 'image', type: 'upload', secure_url: 'x' }], next_cursor: null };
+      },
+    });
+    const svc = new CloudinaryService(adapter);
+    svc.setCredentials({ cloudName: 'demo', apiKey: 'k', apiSecret: 's', dynamicFolders: true });
+    const batches: Array<{ assets: ClientAsset[]; hasMore: boolean }> = [];
+    await svc.prefetchRemaining('', 'c1', { resourceTypeFilter: 'all', sortDirection: 'desc' }, (assets, hasMore) => {
+      batches.push({ assets, hasMore });
+    });
+    assert.strictEqual(batches.length, 2);
+    assert.strictEqual(batches[0].hasMore, true);
+    assert.strictEqual(batches[1].hasMore, false);
+  });
+
+  test('cap-terminated stream reports hasMore=false on final batch', async () => {
+    const adapter = fakeAdapter({
+      search: async () => ({
+        resources: [
+          { public_id: 'a', resource_type: 'image', type: 'upload', secure_url: 'x' },
+          { public_id: 'b', resource_type: 'image', type: 'upload', secure_url: 'x' },
+        ],
+        next_cursor: 'alive',
+      }),
+    });
+    const svc = new CloudinaryService(adapter);
+    svc.setCredentials({ cloudName: 'demo', apiKey: 'k', apiSecret: 's', dynamicFolders: true });
+    const batches: Array<{ hasMore: boolean; count: number }> = [];
+    await svc.prefetchRemaining(
+      '',
+      'c1',
+      { resourceTypeFilter: 'all', sortDirection: 'desc' },
+      (assets, hasMore) => batches.push({ hasMore, count: assets.length }),
+      2, // cap
+    );
+    assert.strictEqual(batches.length, 1);
+    assert.strictEqual(batches[0].count, 2);
+    assert.strictEqual(batches[0].hasMore, false, 'cap-terminated stream must report hasMore=false');
+  });
+
+  test('continues after empty filtered batch', async () => {
+    let call = 0;
+    const adapter = fakeAdapter({
+      search: async () => {
+        call++;
+        if (call === 1) {
+          // All resources filtered out: fixed-folder root + nested public_ids.
+          return {
+            resources: [
+              { public_id: 'foo/a', resource_type: 'image', type: 'upload', secure_url: 'x' },
+              { public_id: 'foo/b', resource_type: 'image', type: 'upload', secure_url: 'x' },
+            ],
+            next_cursor: 'alive',
+          };
+        }
+        return {
+          resources: [
+            { public_id: 'root', resource_type: 'image', type: 'upload', secure_url: 'x' },
+          ],
+          next_cursor: null,
+        };
+      },
+    });
+    const svc = new CloudinaryService(adapter);
+    svc.setCredentials({ cloudName: 'demo', apiKey: 'k', apiSecret: 's', dynamicFolders: false });
+    const batches: Array<{ count: number; hasMore: boolean }> = [];
+    await svc.prefetchRemaining(
+      '',
+      'c1',
+      { resourceTypeFilter: 'all', sortDirection: 'desc' },
+      (assets, hasMore) => batches.push({ count: assets.length, hasMore }),
+    );
+    assert.strictEqual(call, 2);
+    assert.strictEqual(batches.length, 1);
+    assert.strictEqual(batches[0].count, 1);
+    assert.strictEqual(batches[0].hasMore, false);
+  });
+});
+
+suite('CloudinaryService.searchAssets', () => {
+  test('returns results and pages via prefetch', async () => {
+    let call = 0;
+    const adapter = fakeAdapter({
+      search: async (opts) => {
+        call++;
+        assert.ok(opts.expression.startsWith('foo'));
+        if (call === 1) {
+          return { resources: [{ public_id: 'foo1', resource_type: 'image', type: 'upload', secure_url: 'x' }], next_cursor: 'c2' };
+        }
+        return { resources: [{ public_id: 'foo2', resource_type: 'image', type: 'upload', secure_url: 'x' }], next_cursor: null };
+      },
+    });
+    const svc = new CloudinaryService(adapter);
+    svc.setCredentials({ cloudName: 'demo', apiKey: 'k', apiSecret: 's', dynamicFolders: true });
+    const first = await svc.searchAssets('foo', { resourceTypeFilter: 'all', sortDirection: 'desc' });
+    assert.strictEqual(first.assets[0].public_id, 'foo1');
+    assert.strictEqual(first.nextCursor, 'c2');
+
+    const batches: ClientAsset[][] = [];
+    await svc.prefetchSearchResults('foo', 'c2', { resourceTypeFilter: 'all', sortDirection: 'desc' }, (a) => batches.push(a));
+    assert.strictEqual(batches.length, 1);
+    assert.strictEqual(batches[0][0].public_id, 'foo2');
+  });
+
+  test('applies resourceTypeFilter to search results', async () => {
+    const adapter = fakeAdapter({
+      search: async () => ({
+        resources: [
+          { public_id: 'image-1', resource_type: 'image', type: 'upload', secure_url: 'x' },
+          { public_id: 'video-1', resource_type: 'video', type: 'upload', secure_url: 'x' },
+        ],
+        next_cursor: null,
+      }),
+    });
+    const svc = new CloudinaryService(adapter);
+    svc.setCredentials({ cloudName: 'demo', apiKey: 'k', apiSecret: 's', dynamicFolders: true });
+    const result = await svc.searchAssets('foo', { resourceTypeFilter: 'image', sortDirection: 'desc' });
+    assert.strictEqual(result.assets.length, 1);
+    assert.strictEqual(result.assets[0].public_id, 'image-1');
+  });
+
+  test('prefetchSearchResults continues after empty filtered batch', async () => {
+    let call = 0;
+    const adapter = fakeAdapter({
+      search: async () => {
+        call++;
+        if (call === 1) {
+          return {
+            resources: [
+              { public_id: 'video-1', resource_type: 'video', type: 'upload', secure_url: 'x' },
+            ],
+            next_cursor: 'c2',
+          };
+        }
+
+        return {
+          resources: [
+            { public_id: 'image-1', resource_type: 'image', type: 'upload', secure_url: 'x' },
+          ],
+          next_cursor: null,
+        };
+      },
+    });
+    const svc = new CloudinaryService(adapter);
+    svc.setCredentials({ cloudName: 'demo', apiKey: 'k', apiSecret: 's', dynamicFolders: true });
+    const batches: ClientAsset[][] = [];
+
+    await svc.prefetchSearchResults(
+      'foo',
+      'c1',
+      { resourceTypeFilter: 'image', sortDirection: 'desc' },
+      (assets) => batches.push(assets),
+    );
+
+    assert.strictEqual(call, 2);
+    assert.strictEqual(batches.length, 1);
+    assert.strictEqual(batches[0][0].public_id, 'image-1');
+  });
+});
+
+suite('CloudinaryService.uploadPresets', () => {
+  test('fetchUploadPresets stores result', async () => {
+    const adapter = fakeAdapter({
+      uploadPresets: async () => ({ presets: [
+        { name: 'preset1', unsigned: true, settings: { folder: 'x' } },
+        { name: 'preset2', unsigned: false },
+      ]}),
+    });
+    const svc = new CloudinaryService(adapter);
+    svc.setCredentials({ cloudName: 'demo', apiKey: 'k', apiSecret: 's' });
+    const presets = await svc.fetchUploadPresets();
+    assert.strictEqual(presets.length, 2);
+    assert.strictEqual(presets[0].signed, false);
+    assert.strictEqual(presets[1].signed, true);
+    assert.strictEqual(svc.uploadPresets.length, 2);
+  });
+
+  test('getCurrentUploadPreset returns configured preset when it exists', async () => {
+    const svc = new CloudinaryService(fakeAdapter());
+    svc.setCredentials({ cloudName: 'demo', apiKey: 'k', apiSecret: 's', uploadPreset: 'p1' });
+    svc.uploadPresets = [{ name: 'p1', signed: true }];
+    assert.strictEqual(svc.getCurrentUploadPreset(), 'p1');
+  });
+
+  test('getCurrentUploadPreset returns null when configured preset missing', async () => {
+    const svc = new CloudinaryService(fakeAdapter());
+    svc.setCredentials({ cloudName: 'demo', apiKey: 'k', apiSecret: 's', uploadPreset: 'ghost' });
+    svc.uploadPresets = [{ name: 'p1', signed: true }];
+    assert.strictEqual(svc.getCurrentUploadPreset(), null);
+  });
+
+  test('fetchUploadPresets throws when credentials missing', async () => {
+    const svc = new CloudinaryService(fakeAdapter());
+    await assert.rejects(svc.fetchUploadPresets(), /credentials/i);
+  });
+});
diff --git a/src/test/suite/libraryRowSplice.test.ts b/src/test/suite/libraryRowSplice.test.ts
new file mode 100644
index 0000000..5ae4564
--- /dev/null
+++ b/src/test/suite/libraryRowSplice.test.ts
@@ -0,0 +1,18 @@
+import * as assert from 'assert';
+import { spliceOutRangeAtDepth } from '../../webview/client/libraryRowSplice';
+
+suite('spliceOutRangeAtDepth', () => {
+  test('removes contiguous rows at target depth (exclusive boundary)', () => {
+    const rows = [
+      { depth: 0 },
+      { depth: 1 },
+      { depth: 1 },
+      { depth: 2 },
+      { depth: 1 },
+      { depth: 0 },
+    ];
+
+    const end = spliceOutRangeAtDepth(rows, 1, 1);
+    assert.strictEqual(end, 5);
+  });
+});
diff --git a/src/test/suite/libraryVirtualList.test.ts b/src/test/suite/libraryVirtualList.test.ts
new file mode 100644
index 0000000..3c4710e
--- /dev/null
+++ b/src/test/suite/libraryVirtualList.test.ts
@@ -0,0 +1,30 @@
+import * as assert from 'assert';
+import { computeWindow } from '../../webview/client/libraryVirtualList';
+
+suite('libraryVirtualList.computeWindow', () => {
+  test('returns viewport range with buffer', () => {
+    const windowRange = computeWindow({
+      scrollTop: 100,
+      viewportHeight: 220,
+      rowHeight: 22,
+      totalRows: 1000,
+      buffer: 5,
+    });
+
+    assert.strictEqual(windowRange.startIdx, 0);
+    assert.strictEqual(windowRange.endIdx, 19);
+    assert.ok(windowRange.startOffset % 22 === 0);
+  });
+
+  test('clamps endIdx to total rows', () => {
+    const windowRange = computeWindow({
+      scrollTop: 10000,
+      viewportHeight: 100,
+      rowHeight: 22,
+      totalRows: 50,
+      buffer: 5,
+    });
+
+    assert.strictEqual(windowRange.endIdx, 50);
+  });
+});
diff --git a/src/tree/cloudinaryItem.ts b/src/tree/cloudinaryItem.ts
deleted file mode 100644
index 5514da4..0000000
--- a/src/tree/cloudinaryItem.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-// === 📁 src/tree/cloudinaryItem.ts ===
-import * as vscode from 'vscode';
-import { v2 as cloudinary } from 'cloudinary';
-
-export type CloudinaryItemType = 'asset' | 'folder' | 'divider' | 'clearSearch' | 'loading';
-
-interface AssetData {
-  public_id: string;
-  display_name?: string;
-  resource_type: string;
-  type?: string;
-  [key: string]: any;
-}
-
-interface FolderData {
-  name?: string;
-  path?: string;
-  [key: string]: any;
-}
-
-export type ItemData = AssetData | FolderData | Record<string, unknown>;
-
-/**
- * Represents a single item in the Cloudinary Tree View.
- */
-class CloudinaryItem extends vscode.TreeItem {
-  public type: CloudinaryItemType;
-  public data: ItemData;
-
-  constructor(
-    label: string,
-    collapsibleState: vscode.TreeItemCollapsibleState,
-    type: CloudinaryItemType,
-    data: ItemData,
-    cloudName?: string,
-    dynamicFolders = false
-  ) {
-    const isAsset = type === 'asset';
-    const labelToDisplay =
-      isAsset && dynamicFolders && 'display_name' in data
-        ? data.display_name || (data.public_id?.split('/').pop() ?? label)
-        : label;
-
-    // Truncate the label if it's too long, but keep the full name in tooltip
-    const truncatedLabel = truncateLabel(labelToDisplay);
-    super(truncatedLabel, collapsibleState);
-    this.tooltip = labelToDisplay; // Show full name on hover
-
-    this.type = type;
-    this.data = data;
-
-    if (type === 'asset' && 'public_id' in data && 'resource_type' in data) {
-      const assetType = data.resource_type;
-
-      let optimizedUrl =
-        assetType === 'raw'
-          ? cloudinary.url(data.public_id, {
-            resource_type: 'raw',
-            type: data.type,
-          })
-          : cloudinary.url(data.public_id, {
-            resource_type: assetType,
-            type: data.type,
-            transformation: [
-              { fetch_format: assetType === 'video' ? 'auto:video' : 'auto' },
-              { quality: 'auto' }
-            ],
-          });
-
-      data.optimized_url = optimizedUrl;
-      data.displayType = assetType;
-
-      // Format file size and type for display
-      const fileSize = data.bytes ? formatFileSize(data.bytes) : '';
-      const fileType = data.format ? data.format.toUpperCase() : assetType.toUpperCase();
-      this.description = `${fileType} • ${fileSize}`;
-
-      this.contextValue = 'asset';
-      this.iconPath = new vscode.ThemeIcon(
-        assetType === 'video'
-          ? 'device-camera-video'
-          : assetType === 'raw'
-            ? 'file'
-            : 'file-media'
-      );
-
-      this.command = {
-        command: 'cloudinary.openAsset',
-        title: 'Open Asset',
-        arguments: [data],
-      };
-    }
-
-    // === FOLDER NODE ===
-    else if (type === 'folder') {
-      this.contextValue = 'folder';
-      this.iconPath = new vscode.ThemeIcon('folder');
-    }
-
-    // === DIVIDER NODE ===
-    else if (type === 'divider') {
-      this.contextValue = undefined;
-      this.iconPath = new vscode.ThemeIcon('ellipsis');
-      this.tooltip = 'Additional assets loaded';
-      this.description = true;
-    }
-    // === CLEAR SEARCH NODE ===
-    else if (type === 'clearSearch') {
-      this.contextValue = 'clearSearch';
-      this.iconPath = new vscode.ThemeIcon('close');
-      this.command = {
-        command: 'cloudinary.clearSearch',
-        title: 'Clear Search',
-      };
-    }
-    // === LOADING INDICATOR NODE ===
-    else if (type === 'loading') {
-      this.contextValue = undefined;
-      this.iconPath = new vscode.ThemeIcon('loading~spin');
-      this.tooltip = 'Loading additional assets in the background...';
-    }
-  }
-}
-
-function truncateLabel(label: string, maxLength: number = 20): string {
-  if (label.length <= maxLength) { return label; }
-  const extension = label.includes('.') ? label.split('.').pop() : '';
-  const nameWithoutExt = extension ? label.slice(0, -(extension.length + 1)) : label;
-  const truncatedName = nameWithoutExt.slice(0, maxLength - 3) + '...';
-  return extension ? `${truncatedName}.${extension}` : truncatedName;
-}
-
-function formatFileSize(bytes: number): string {
-  if (bytes === 0) { return '0 B'; }
-  const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
-}
-
-export default CloudinaryItem;
\ No newline at end of file
diff --git a/src/tree/treeDataProvider.ts b/src/tree/treeDataProvider.ts
deleted file mode 100644
index b7c6250..0000000
--- a/src/tree/treeDataProvider.ts
+++ /dev/null
@@ -1,593 +0,0 @@
-import * as vscode from 'vscode';
-import { v2 as cloudinary } from 'cloudinary';
-import CloudinaryItem from './cloudinaryItem';
-import { handleCloudinaryError } from '../utils/cloudinaryErrorHandler';
-import { isPlaceholderConfig } from '../config/configUtils';
-
-export class CloudinaryTreeDataProvider implements vscode.TreeDataProvider<CloudinaryItem> {
-  // Cloudinary credentials
-  apiKey: string | null = null;
-  apiSecret: string | null = null;
-  cloudName: string | null = null;
-  uploadPreset: string | null = null;
-  uploadPresets: Array<{
-    name: string;
-    signed: boolean;
-    settings?: {}
-  }> = [];
-
-  dynamicFolders = false;
-
-  private viewState = {
-    folderPath: '',
-    nextCursor: null as string | null,
-    searchQuery: null as string | null,
-    isPaginating: false,
-    resourceTypeFilter: 'all' as 'image' | 'video' | 'raw' | 'all',
-    sortDirection: 'desc' as 'asc' | 'desc',
-  };
-
-  private assetMap: Map<string, CloudinaryItem[]> = new Map();
-
-  // Track folders currently being prefetched to prevent duplicate requests
-  private prefetchingFolders: Set<string> = new Set();
-
-  // Maximum assets to load per folder (to prevent endless fetching for huge folders)
-  private readonly MAX_ASSETS_PER_FOLDER = 5000;
-
-  private _onDidChangeTreeData = new vscode.EventEmitter<CloudinaryItem | undefined | void>();
-  readonly onDidChangeTreeData = this._onDidChangeTreeData.event;
-
-  private _onDidChangeEnvironment = new vscode.EventEmitter<void>();
-  readonly onDidChangeEnvironment = this._onDidChangeEnvironment.event;
-
-  /**
-   * Fires the onDidChangeEnvironment event to notify subscribers that
-   * credentials have changed to a new environment.
-   */
-  notifyEnvironmentChange(): void {
-    this._onDidChangeEnvironment.fire();
-  }
-
-  /**
-   * Refreshes the tree data view.
-   */
-  refresh(stateUpdate: Partial<typeof this.viewState> = {}, append = false) {
-    this.viewState = {
-      ...this.viewState,
-      ...stateUpdate,
-      isPaginating: !!stateUpdate.nextCursor,
-    };
-
-    if (!append && !this.viewState.isPaginating) {
-      this.assetMap.clear();
-    }
-
-    this._onDidChangeTreeData.fire();
-  }
-
-  getTreeItem(element: CloudinaryItem): vscode.TreeItem {
-    return element;
-  }
-
-  async getChildren(element?: CloudinaryItem): Promise<CloudinaryItem[]> {
-    if (!this.apiKey || !this.apiSecret || !this.cloudName) {
-      return [];
-    }
-
-    // Prevent API calls with placeholder credentials
-    if (isPlaceholderConfig(this.cloudName, this.apiKey, this.apiSecret)) {
-      return [];
-    }
-
-    if (!element) {
-      if (this.viewState.searchQuery) {
-        const results = await this.searchAssets(this.viewState.searchQuery);
-        const clear = new CloudinaryItem("Clear Search", vscode.TreeItemCollapsibleState.None, "clearSearch", {});
-        return [clear, ...results];
-      }
-      return this.assetMap.get('') || await this.fetchFoldersAndAssets('');
-    }
-
-    if (element.type === 'folder' && 'path' in element.data) {
-      const folderPath = element.data.path || '';
-      return this.assetMap.get(folderPath) || await this.fetchFoldersAndAssets(folderPath);
-    }
-
-    return [];
-  }
-
-  async fetchFoldersAndAssets(
-    folderPath = '',
-    nextCursor: string | null = null,
-    append = false
-  ): Promise<CloudinaryItem[]> {
-    try {
-      const maxResults = 500;
-
-      // Build expression based on folder mode
-      // Dynamic folders: use asset_folder field to prevent duplicates
-      // Fixed folders: use folder field (or empty for root to get all, then filter)
-      let expression: string;
-      if (this.dynamicFolders) {
-        // Dynamic folders: use asset_folder to only get assets in this specific folder
-        expression = folderPath ? `asset_folder="${folderPath}"` : 'asset_folder=""';
-      } else {
-        // Fixed folders: use folder field (empty returns all, filtered below)
-        expression = folderPath ? `folder="${folderPath}"` : '';
-      }
-
-      const folderPromise = cloudinary.api.sub_folders(folderPath);
-      const assetQuery = cloudinary.search
-        .expression(expression)
-        .sort_by('created_at', this.viewState.sortDirection)
-        .max_results(maxResults)
-        .with_field(["tags", "context", "metadata"]);
-
-      if (nextCursor) { assetQuery.next_cursor(nextCursor); }
-
-      const [foldersResult, assetsResult] = await Promise.all([
-        folderPromise,
-        assetQuery.execute(),
-      ]);
-
-      const folders = (foldersResult.folders || []).map(
-        (folder: any) =>
-          new CloudinaryItem(
-            folder.name,
-            vscode.TreeItemCollapsibleState.Collapsed,
-            'folder',
-            folder,
-            this.cloudName!,
-            this.dynamicFolders
-          )
-      );
-
-      const filteredAssets = assetsResult.resources.filter((asset: any) => {
-        // For fixed folders at root level, filter out nested assets (they'll appear in their folders)
-        if (!this.dynamicFolders && folderPath === '') {
-          const isNestedAsset = asset.public_id.includes('/');
-          if (isNestedAsset) { return false; }
-        }
-        // Apply resource type filter
-        if (this.viewState.resourceTypeFilter === 'all') { return true; }
-        return asset.resource_type?.toLowerCase() === this.viewState.resourceTypeFilter;
-      });
-
-      const newAssets = filteredAssets.map(
-        (asset: any) =>
-          new CloudinaryItem(
-            asset.public_id,
-            vscode.TreeItemCollapsibleState.None,
-            'asset',
-            asset,
-            this.cloudName!,
-            this.dynamicFolders
-          )
-      );
-
-      if (!append) {
-        this.assetMap.set(folderPath, [...folders, ...newAssets]);
-      } else {
-        const existing = this.assetMap.get(folderPath) || [];
-        this.assetMap.set(folderPath, [...existing, ...newAssets]);
-      }
-
-      // If there are more assets, start background pre-fetching
-      if (assetsResult.next_cursor && !append) {
-        this.viewState.nextCursor = assetsResult.next_cursor;
-
-        // Add a loading indicator while prefetching
-        const loadingItem = new CloudinaryItem(
-          'Loading more assets...',
-          vscode.TreeItemCollapsibleState.None,
-          'loading',
-          { folderPath }
-        );
-        const currentList = this.assetMap.get(folderPath) || [];
-        this.assetMap.set(folderPath, [...currentList, loadingItem]);
-
-        // Start background prefetch (don't await - let it run async)
-        this.prefetchRemainingAssets(folderPath, assetsResult.next_cursor);
-      } else if (assetsResult.next_cursor && append) {
-        // Continue prefetching if this was a prefetch call with more data
-        this.viewState.nextCursor = assetsResult.next_cursor;
-      } else {
-        this.viewState.nextCursor = null;
-      }
-
-      return this.assetMap.get(folderPath) || [];
-    } catch (err: any) {
-      handleCloudinaryError('Failed to fetch folders or assets', err);
-      return [];
-    }
-  }
-
-  /**
-   * Background pre-fetches remaining assets for a folder.
-   * Runs asynchronously and updates the tree as more assets are loaded.
-   */
-  private async prefetchRemainingAssets(folderPath: string, initialCursor: string): Promise<void> {
-    // Prevent duplicate prefetching for the same folder
-    if (this.prefetchingFolders.has(folderPath)) {
-      return;
-    }
-    this.prefetchingFolders.add(folderPath);
-
-    try {
-      let nextCursor: string | null = initialCursor;
-      let totalAssets = this.countAssetsInFolder(folderPath);
-
-      while (nextCursor && totalAssets < this.MAX_ASSETS_PER_FOLDER) {
-        const result = await this.fetchAssetsPage(folderPath, nextCursor);
-
-        if (result.assets.length === 0) {
-          break;
-        }
-
-        // Remove the loading indicator and append new assets
-        this.appendPrefetchedAssets(folderPath, result.assets, result.nextCursor);
-        totalAssets += result.assets.length;
-        nextCursor = result.nextCursor;
-
-        // Fire tree update to show new assets
-        this._onDidChangeTreeData.fire();
-      }
-
-      // Remove any remaining loading indicator
-      this.removeLoadingIndicator(folderPath);
-      this._onDidChangeTreeData.fire();
-    } catch (err: any) {
-      // Remove loading indicator on error
-      this.removeLoadingIndicator(folderPath);
-      this._onDidChangeTreeData.fire();
-      // Don't show error for background operations - they're non-critical
-      console.error('Background prefetch error:', err);
-    } finally {
-      this.prefetchingFolders.delete(folderPath);
-    }
-  }
-
-  /**
-   * Fetches a single page of assets for prefetching.
-   */
-  private async fetchAssetsPage(
-    folderPath: string,
-    cursor: string
-  ): Promise<{ assets: CloudinaryItem[]; nextCursor: string | null }> {
-    const maxResults = 500;
-
-    let expression: string;
-    if (this.dynamicFolders) {
-      expression = folderPath ? `asset_folder="${folderPath}"` : 'asset_folder=""';
-    } else {
-      expression = folderPath ? `folder="${folderPath}"` : '';
-    }
-
-    const assetQuery = cloudinary.search
-      .expression(expression)
-      .sort_by('created_at', this.viewState.sortDirection)
-      .max_results(maxResults)
-      .with_field(["tags", "context", "metadata"])
-      .next_cursor(cursor);
-
-    const assetsResult = await assetQuery.execute();
-
-    const filteredAssets = assetsResult.resources.filter((asset: any) => {
-      if (!this.dynamicFolders && folderPath === '') {
-        const isNestedAsset = asset.public_id.includes('/');
-        if (isNestedAsset) { return false; }
-      }
-      if (this.viewState.resourceTypeFilter === 'all') { return true; }
-      return asset.resource_type?.toLowerCase() === this.viewState.resourceTypeFilter;
-    });
-
-    const assets = filteredAssets.map(
-      (asset: any) =>
-        new CloudinaryItem(
-          asset.public_id,
-          vscode.TreeItemCollapsibleState.None,
-          'asset',
-          asset,
-          this.cloudName!,
-          this.dynamicFolders
-        )
-    );
-
-    return {
-      assets,
-      nextCursor: assetsResult.next_cursor || null,
-    };
-  }
-
-  /**
-   * Appends prefetched assets to the folder's cache.
-   */
-  private appendPrefetchedAssets(
-    folderPath: string,
-    newAssets: CloudinaryItem[],
-    hasMore: string | null
-  ): void {
-    const items = this.assetMap.get(folderPath) || [];
-
-    // Remove the loading indicator if present
-    const filteredItems = items.filter(item => item.type !== 'loading');
-
-    // Append new assets
-    const updatedItems = [...filteredItems, ...newAssets];
-
-    // Add loading indicator back if there's more to fetch
-    if (hasMore) {
-      updatedItems.push(
-        new CloudinaryItem(
-          'Loading more assets...',
-          vscode.TreeItemCollapsibleState.None,
-          'loading',
-          { folderPath }
-        )
-      );
-    }
-
-    this.assetMap.set(folderPath, updatedItems);
-  }
-
-  /**
-   * Removes the loading indicator from a folder.
-   */
-  private removeLoadingIndicator(folderPath: string): void {
-    const items = this.assetMap.get(folderPath);
-    if (!items) { return; }
-
-    const filteredItems = items.filter(item => item.type !== 'loading');
-    this.assetMap.set(folderPath, filteredItems);
-  }
-
-  /**
-   * Counts the number of assets currently loaded for a folder.
-   */
-  private countAssetsInFolder(folderPath: string): number {
-    const items = this.assetMap.get(folderPath) || [];
-    return items.filter(item => item.type === 'asset').length;
-  }
-
-  // Cache key for search results
-  private readonly SEARCH_CACHE_KEY = '__search__';
-
-  async searchAssets(query: string): Promise<CloudinaryItem[]> {
-    try {
-      const maxResults = 500;
-      const searchQuery = cloudinary.search
-        .expression(`${query}*`)
-        .sort_by('created_at', this.viewState.sortDirection)
-        .max_results(maxResults);
-
-      const assetsResult = await searchQuery.execute();
-
-      const assets = assetsResult.resources.map(
-        (asset: any) =>
-          new CloudinaryItem(
-            asset.public_id,
-            vscode.TreeItemCollapsibleState.None,
-            'asset',
-            asset,
-            this.cloudName!,
-            this.dynamicFolders
-          )
-      );
-
-      // Store in cache
-      this.assetMap.set(this.SEARCH_CACHE_KEY, assets);
-
-      // If there are more results, start background pre-fetching
-      if (assetsResult.next_cursor) {
-        // Add loading indicator
-        const loadingItem = new CloudinaryItem(
-          'Loading more results...',
-          vscode.TreeItemCollapsibleState.None,
-          'loading',
-          { query }
-        );
-        this.assetMap.set(this.SEARCH_CACHE_KEY, [...assets, loadingItem]);
-
-        // Start background prefetch
-        this.prefetchSearchResults(query, assetsResult.next_cursor);
-      }
-
-      return this.assetMap.get(this.SEARCH_CACHE_KEY) || assets;
-    } catch (err: any) {
-      handleCloudinaryError('Search failed', err);
-      return [];
-    }
-  }
-
-  /**
-   * Background pre-fetches remaining search results.
-   */
-  private async prefetchSearchResults(query: string, initialCursor: string): Promise<void> {
-    const prefetchKey = `search:${query}`;
-
-    // Prevent duplicate prefetching
-    if (this.prefetchingFolders.has(prefetchKey)) {
-      return;
-    }
-    this.prefetchingFolders.add(prefetchKey);
-
-    try {
-      let nextCursor: string | null = initialCursor;
-      let totalAssets = this.countSearchResults();
-
-      while (nextCursor && totalAssets < this.MAX_ASSETS_PER_FOLDER) {
-        const result = await this.fetchSearchPage(query, nextCursor);
-
-        if (result.assets.length === 0) {
-          break;
-        }
-
-        // Append new assets to search cache
-        this.appendSearchResults(result.assets, result.nextCursor);
-        totalAssets += result.assets.length;
-        nextCursor = result.nextCursor;
-
-        // Fire tree update
-        this._onDidChangeTreeData.fire();
-      }
-
-      // Remove loading indicator
-      this.removeSearchLoadingIndicator();
-      this._onDidChangeTreeData.fire();
-    } catch (err: any) {
-      this.removeSearchLoadingIndicator();
-      this._onDidChangeTreeData.fire();
-      console.error('Search prefetch error:', err);
-    } finally {
-      this.prefetchingFolders.delete(prefetchKey);
-    }
-  }
-
-  /**
-   * Fetches a single page of search results.
-   */
-  private async fetchSearchPage(
-    query: string,
-    cursor: string
-  ): Promise<{ assets: CloudinaryItem[]; nextCursor: string | null }> {
-    const maxResults = 500;
-
-    const searchQuery = cloudinary.search
-      .expression(`${query}*`)
-      .sort_by('created_at', this.viewState.sortDirection)
-      .max_results(maxResults)
-      .next_cursor(cursor);
-
-    const assetsResult = await searchQuery.execute();
-
-    const assets = assetsResult.resources.map(
-      (asset: any) =>
-        new CloudinaryItem(
-          asset.public_id,
-          vscode.TreeItemCollapsibleState.None,
-          'asset',
-          asset,
-          this.cloudName!,
-          this.dynamicFolders
-        )
-    );
-
-    return {
-      assets,
-      nextCursor: assetsResult.next_cursor || null,
-    };
-  }
-
-  /**
-   * Appends prefetched search results to the cache.
-   */
-  private appendSearchResults(newAssets: CloudinaryItem[], hasMore: string | null): void {
-    const items = this.assetMap.get(this.SEARCH_CACHE_KEY) || [];
-
-    // Remove loading indicator
-    const filteredItems = items.filter(item => item.type !== 'loading');
-
-    // Append new assets
-    const updatedItems = [...filteredItems, ...newAssets];
-
-    // Add loading indicator back if more to fetch
-    if (hasMore) {
-      updatedItems.push(
-        new CloudinaryItem(
-          'Loading more results...',
-          vscode.TreeItemCollapsibleState.None,
-          'loading',
-          {}
-        )
-      );
-    }
-
-    this.assetMap.set(this.SEARCH_CACHE_KEY, updatedItems);
-  }
-
-  /**
-   * Removes the loading indicator from search results.
-   */
-  private removeSearchLoadingIndicator(): void {
-    const items = this.assetMap.get(this.SEARCH_CACHE_KEY);
-    if (!items) { return; }
-
-    const filteredItems = items.filter(item => item.type !== 'loading');
-    this.assetMap.set(this.SEARCH_CACHE_KEY, filteredItems);
-  }
-
-  /**
-   * Counts the number of search results currently loaded.
-   */
-  private countSearchResults(): number {
-    const items = this.assetMap.get(this.SEARCH_CACHE_KEY) || [];
-    return items.filter(item => item.type === 'asset').length;
-  }
-
-  /**
-   * Fetches available upload presets from Cloudinary.
-   * @returns Array of upload presets with their names and signed status.
-   */
-  async fetchUploadPresets(): Promise<Array<{
-    name: string;
-    signed: boolean;
-    settings?: {}
-  }>> {
-    if (!this.cloudName || !this.apiKey || !this.apiSecret) {
-      throw new Error('Cloudinary credentials not configured');
-    }
-
-    try {
-      const result = await cloudinary.api.upload_presets({ max_results: 500 });
-      this.uploadPresets = result.presets.map((preset: any) => ({
-        name: preset.name,
-        signed: preset.unsigned === false,
-        settings: preset.settings
-      }));
-      return this.uploadPresets;
-    } catch (err: any) {
-      handleCloudinaryError('Failed to fetch upload presets', err);
-      return [];
-    }
-  }
-
-  /**
-   * Gets the currently configured default upload preset.
-   * @returns The configured upload preset name, or null if none configured (uses signed upload).
-   */
-  getCurrentUploadPreset(): string | null {
-    // Only return a preset if one is explicitly configured and exists
-    if (this.uploadPreset && this.uploadPresets.some(p => p.name === this.uploadPreset)) {
-      return this.uploadPreset;
-    }
-    // Default to null (signed upload) when no preset is configured
-    return null;
-  }
-
-  /**
-   * Gets all folder paths that have been loaded/cached.
-   * Returns folder items from the assetMap for use in folder selectors.
-   */
-  public getAvailableFolders(): Array<{ path: string; name: string }> {
-    const folders: Array<{ path: string; name: string }> = [];
-
-    for (const [, items] of this.assetMap.entries()) {
-      for (const item of items) {
-        if (item.type === 'folder') {
-          // FolderData has path and name properties
-          const folderData = item.data as { path?: string; name?: string };
-          if (folderData.path) {
-            folders.push({
-              path: folderData.path,
-              name: folderData.name || item.label?.toString() || folderData.path,
-            });
-          }
-        }
-      }
-    }
-
-    // Sort by path for consistent ordering
-    return folders.sort((a, b) => a.path.localeCompare(b.path));
-  }
-}
diff --git a/src/webview/client/homescreen.ts b/src/webview/client/homescreen.ts
index faf9999..10e9c5b 100644
--- a/src/webview/client/homescreen.ts
+++ b/src/webview/client/homescreen.ts
@@ -54,7 +54,6 @@ type InboundMessage = AiToolsDataMessage | AiToolsProgressMessage | AiToolsResul
 // ── Module state ──────────────────────────────────────────────────────────────
 
 let _isOpen = false;
-let _dataFetched = false;
 let _cachedData: Omit<AiToolsDataMessage, "command"> | null = null;
 
 
@@ -165,8 +164,7 @@ function toggleAccordion(): void {
   btn.setAttribute("aria-expanded", String(_isOpen));
   chevron.classList.toggle("hs-chevron--open", _isOpen);
 
-  if (_isOpen && !_dataFetched) {
-    _dataFetched = true;
+  if (_isOpen && !_cachedData) {
     showPanelState("loading");
     getVSCode()?.postMessage({ command: "aiToolsExpanded" });
   }
@@ -178,9 +176,9 @@ function handleApply(): void {
   if (!_cachedData) { return; }
 
   const skillCheckboxes = document.querySelectorAll<HTMLInputElement>(".hs-ai-cb[data-skill]");
-  const mcpCheckboxes   = document.querySelectorAll<HTMLInputElement>(".hs-ai-cb[data-mcp]");
+  const mcpCheckboxes = document.querySelectorAll<HTMLInputElement>(".hs-ai-cb[data-mcp]");
 
-  const selectedSkills  = [...skillCheckboxes].filter((c) => c.checked && !c.disabled).map((c) => c.dataset.skill!);
+  const selectedSkills = [...skillCheckboxes].filter((c) => c.checked && !c.disabled).map((c) => c.dataset.skill!);
   const selectedMcpKeys = [...mcpCheckboxes].filter((c) => c.checked && !c.disabled).map((c) => c.dataset.mcp!);
 
   document.querySelectorAll<HTMLInputElement>(".hs-ai-cb").forEach((c) => { c.disabled = true; });
@@ -193,8 +191,8 @@ function handleApply(): void {
   getVSCode()?.postMessage({
     command: "installAiTools",
     platform: _cachedData.platform,
-    scope:    _cachedData.scope,
-    skills:   selectedSkills,
+    scope: _cachedData.scope,
+    skills: selectedSkills,
     mcpServers: selectedMcpKeys,
   });
 }
@@ -263,7 +261,6 @@ function handleAiToolsData(msg: AiToolsDataMessage): void {
 }
 
 function handleAiToolsProgress(msg: AiToolsProgressMessage): void {
-  // Find the row by data-skill or data-mcp attribute
   const cb = document.querySelector<HTMLInputElement>(
     `[data-skill="${msg.item}"], [data-mcp="${msg.item}"]`
   );
@@ -272,7 +269,6 @@ function handleAiToolsProgress(msg: AiToolsProgressMessage): void {
   const row = cb.closest(".hs-ai-item");
   if (!row) { return; }
 
-  // Remove existing tick if any
   row.querySelector(".hs-ai-item-tick")?.remove();
 
   const tick = document.createElement("span");
@@ -282,7 +278,6 @@ function handleAiToolsProgress(msg: AiToolsProgressMessage): void {
 }
 
 function handleAiToolsResult(_msg: AiToolsResultMessage): void {
-  _dataFetched = false;
   _cachedData = null;
   showPanelState("loading");
   getVSCode()?.postMessage({ command: "aiToolsExpanded" });
@@ -322,7 +317,6 @@ function initPlatformDropdown(): void {
   const select = el<HTMLSelectElement>("hs-ai-platform-select");
   if (!select) { return; }
   select.addEventListener("change", () => {
-    // Clear pending checkbox selections on platform switch
     document.querySelectorAll<HTMLInputElement>(".hs-ai-cb:not(:disabled)").forEach((cb) => { cb.checked = false; });
     showPanelState("loading");
     getVSCode()?.postMessage({ command: "changePlatform", platform: select.value });
@@ -349,14 +343,12 @@ function initSearch(): void {
 
   if (!input) { return; }
 
-  // Show/hide clear button based on input value
   input.addEventListener("input", () => {
     if (clearBtn) {
       clearBtn.classList.toggle("hidden", input.value.trim() === "");
     }
   });
 
-  // Submit search on Enter
   input.addEventListener("keydown", (e: KeyboardEvent) => {
     if (e.key === "Enter") {
       const query = input.value.trim();
@@ -371,7 +363,6 @@ function initSearch(): void {
     }
   });
 
-  // Clear search
   clearBtn?.addEventListener("click", () => {
     input.value = "";
     clearBtn.classList.add("hidden");
diff --git a/src/webview/client/library.ts b/src/webview/client/library.ts
new file mode 100644
index 0000000..ed07f89
--- /dev/null
+++ b/src/webview/client/library.ts
@@ -0,0 +1,839 @@
+import { getVSCode, initVSCode } from './common';
+import {
+  ClientAsset,
+  ClientFolder,
+  InboundMessage,
+} from './libraryTypes';
+import { assetIcon, folderIcon, menuIcons, rowIcons } from './libraryIcons';
+import { showMenu } from './libraryMenu';
+import { spliceOutRangeAtDepth } from './libraryRowSplice';
+import { VirtualList } from './libraryVirtualList';
+
+type Row =
+  | { kind: 'folder'; folder: ClientFolder; depth: number; expanded: boolean }
+  | { kind: 'asset'; asset: ClientAsset; depth: number }
+  | { kind: 'loading'; depth: number }
+  | { kind: 'clearSearch'; label: string; depth: number };
+
+const ROW_HEIGHT = 22;
+
+let list: VirtualList<Row>;
+const flat: Row[] = [];
+const childrenByFolder = new Map<string, Row[]>();
+let selectedIdx = -1;
+let searchMode: { query: string } | null = null;
+
+initVSCode();
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function rebuild(): void {
+  list.setItems(flat.slice());
+}
+
+function formatFileSize(bytes: number | undefined): string {
+  if (!bytes || bytes <= 0) {
+    return '';
+  }
+  const units = ['B', 'KB', 'MB', 'GB'];
+  const k = 1024;
+  const i = Math.min(units.length - 1, Math.floor(Math.log(bytes) / Math.log(k)));
+  const value = bytes / Math.pow(k, i);
+  const rounded = i === 0 ? Math.round(value) : Number(value.toFixed(1));
+  return `${rounded} ${units[i]}`;
+}
+
+function isAuthenticatedAsset(asset: ClientAsset): boolean {
+  return asset.type === 'authenticated';
+}
+
+function getAssetMeta(asset: ClientAsset): string {
+  const format = asset.format
+    ? asset.format.toUpperCase()
+    : asset.resource_type.toUpperCase();
+  const size = formatFileSize(asset.bytes);
+  const parts = [format];
+  if (size) {
+    parts.push(size);
+  }
+  if (isAuthenticatedAsset(asset)) {
+    parts.unshift('AUTH');
+  }
+  return parts.join(' · ');
+}
+
+
+function getRowKey(row: Row | undefined): string | null {
+  if (!row) {
+    return null;
+  }
+
+  switch (row.kind) {
+    case 'folder':
+      return `folder:${row.folder.path}`;
+    case 'asset':
+      return `asset:${row.asset.public_id}`;
+    case 'clearSearch':
+      return 'clearSearch';
+    case 'loading':
+      return `loading:${row.depth}`;
+    default:
+      return null;
+  }
+}
+
+function findRowIdxByKey(key: string | null): number {
+  if (!key) {
+    return -1;
+  }
+
+  return flat.findIndex((row) => getRowKey(row) === key);
+}
+
+function showEmptyState(message: string, variant: 'welcome' | 'info' = 'info'): void {
+  let empty = document.getElementById('lib-empty') as HTMLDivElement | null;
+  if (!empty) {
+    empty = document.createElement('div');
+    empty.id = 'lib-empty';
+    empty.className = 'lib-empty';
+    const root = document.getElementById('lib-root');
+    if (root?.parentElement) {
+      root.parentElement.insertBefore(empty, root);
+    }
+  }
+  empty.classList.toggle('lib-empty--welcome', variant === 'welcome');
+  if (variant === 'welcome') {
+    empty.innerHTML = `
+      <div class="lib-empty__glyph">${rowIcons.folder()}</div>
+      <p class="lib-empty__title">${escapeHtml(message)}</p>
+      <button class="lib-empty__cta" data-action="openGlobalConfig">Open configuration</button>
+    `;
+    empty.querySelector<HTMLButtonElement>('.lib-empty__cta')?.addEventListener('click', () => {
+      getVSCode()?.postMessage({ command: 'runToolbar', action: 'openGlobalConfig' });
+    });
+  } else {
+    empty.textContent = message;
+  }
+}
+
+function hideEmptyState(): void {
+  document.getElementById('lib-empty')?.remove();
+}
+
+function showError(message: string): void {
+  let banner = document.getElementById('lib-error') as HTMLDivElement | null;
+  if (!banner) {
+    banner = document.createElement('div');
+    banner.id = 'lib-error';
+    banner.className = 'lib-error';
+    banner.setAttribute('role', 'alert');
+    banner.innerHTML =
+      '<span class="lib-error__dot" aria-hidden="true"></span>' +
+      '<span class="lib-error__msg"></span>' +
+      '<button class="lib-error__retry" type="button">Retry</button>';
+    const toolbar = document.getElementById('lib-toolbar');
+    if (toolbar?.parentElement) {
+      toolbar.parentElement.insertBefore(banner, toolbar.nextSibling);
+    }
+    banner.querySelector('.lib-error__retry')?.addEventListener('click', () => {
+      banner?.remove();
+      getVSCode()?.postMessage({ command: 'runToolbar', action: 'refresh' });
+    });
+  }
+
+  const messageEl = banner.querySelector('.lib-error__msg') as HTMLElement | null;
+  if (messageEl) {
+    messageEl.textContent = message;
+  }
+}
+
+function clearError(): void {
+  document.getElementById('lib-error')?.remove();
+}
+
+function snapshotScroll(): { rowKey: string | null; index: number; offsetRatio: number } {
+  const container = document.getElementById('lib-root') as HTMLElement | null;
+  if (!container) {
+    return { rowKey: null, index: 0, offsetRatio: 0 };
+  }
+
+  const rowHeight = ROW_HEIGHT;
+  const topIdx = Math.floor(container.scrollTop / rowHeight);
+  const row = flat[topIdx];
+  const offset = container.scrollTop - topIdx * rowHeight;
+  return {
+    rowKey: getRowKey(row),
+    index: topIdx,
+    offsetRatio: rowHeight > 0 ? offset / rowHeight : 0,
+  };
+}
+
+function restoreScroll(snapshot: { rowKey: string | null; index: number; offsetRatio: number }): void {
+  const container = document.getElementById('lib-root') as HTMLElement | null;
+  if (!container) {
+    return;
+  }
+
+  const rowHeight = ROW_HEIGHT;
+  const idx = findRowIdxByKey(snapshot.rowKey);
+  const targetIdx = idx >= 0
+    ? idx
+    : Math.max(0, Math.min(flat.length - 1, snapshot.index));
+  container.scrollTop = targetIdx * rowHeight + snapshot.offsetRatio * rowHeight;
+}
+
+function setSelected(idx: number): void {
+  selectedIdx = Math.max(-1, Math.min(flat.length - 1, idx));
+  list.render();
+
+  if (selectedIdx < 0) {
+    return;
+  }
+
+  const container = document.getElementById('lib-root') as HTMLElement | null;
+  if (!container) {
+    return;
+  }
+
+  const rowHeight = ROW_HEIGHT;
+  const rowTop = selectedIdx * rowHeight;
+  if (rowTop < container.scrollTop) {
+    container.scrollTop = rowTop;
+  }
+  if (rowTop + rowHeight > container.scrollTop + container.clientHeight) {
+    container.scrollTop = rowTop + rowHeight - container.clientHeight;
+  }
+}
+
+function renderRow(el: HTMLElement, row: Row, index: number): void {
+  el.className = 'lib-row';
+  el.removeAttribute('data-path');
+  el.removeAttribute('data-public-id');
+  el.removeAttribute('role');
+  el.removeAttribute('title');
+
+  if (index === selectedIdx) {
+    el.classList.add('lib-row--selected');
+  }
+
+  const indent = `<span class="lib-indent" style="width:${row.depth * 12}px"></span>`;
+
+  if (row.kind === 'folder') {
+    el.classList.add('lib-row--folder');
+    if (row.expanded) {
+      el.classList.add('lib-row--folder-open');
+    }
+    el.dataset.path = row.folder.path;
+    el.setAttribute('role', 'treeitem');
+    el.setAttribute('aria-expanded', String(row.expanded));
+    const twistieClass = row.expanded ? 'lib-twistie lib-twistie--open' : 'lib-twistie';
+    el.innerHTML = `${indent}<span class="${twistieClass}">${rowIcons.chevron()}</span><span class="lib-icon lib-icon--folder">${folderIcon(row.expanded)}</span><span class="lib-name">${escapeHtml(row.folder.name)}</span>`;
+    return;
+  }
+
+  if (row.kind === 'asset') {
+    el.classList.add('lib-row--asset');
+    el.classList.add(`lib-row--${row.asset.resource_type}`);
+    if (isAuthenticatedAsset(row.asset)) {
+      el.classList.add('lib-row--authenticated');
+    }
+    el.dataset.publicId = row.asset.public_id;
+    el.setAttribute('role', 'treeitem');
+    const name =
+      row.asset.display_name ||
+      row.asset.public_id.split('/').pop() ||
+      row.asset.public_id;
+    const meta = getAssetMeta(row.asset);
+    const authIcon = isAuthenticatedAsset(row.asset)
+      ? `<span class="lib-auth-lock" title="Authenticated delivery" aria-label="Authenticated delivery">${rowIcons.lock()}</span>`
+      : '';
+    el.title = isAuthenticatedAsset(row.asset) ? `${name} · authenticated delivery` : name;
+    el.innerHTML = `${indent}<span class="lib-twistie-spacer"></span><span class="lib-icon lib-icon--asset">${assetIcon(row.asset.resource_type)}</span><span class="lib-name">${escapeHtml(name)}</span>${authIcon}<span class="lib-meta">${escapeHtml(meta)}</span>`;
+    return;
+  }
+
+  if (row.kind === 'clearSearch') {
+    el.classList.add('lib-row--clear');
+    el.innerHTML = `${indent}<span class="lib-clear-chip"><span class="lib-clear-chip__icon">${rowIcons.close()}</span><span class="lib-clear-chip__label">${escapeHtml(row.label)}</span></span>`;
+    return;
+  }
+
+  el.classList.add('lib-row--loading');
+  el.innerHTML = `${indent}<span class="lib-twistie-spacer"></span><span class="lib-loader-dots" aria-hidden="true"><i></i><i></i><i></i></span><span class="lib-name">Loading</span>`;
+}
+
+function findFolderIdx(path: string): number {
+  return flat.findIndex(
+    (row) => row.kind === 'folder' && row.folder.path === path
+  );
+}
+
+function findAssetRow(publicId: string): Extract<Row, { kind: 'asset' }> | undefined {
+  const row = flat.find(
+    (item) => item.kind === 'asset' && item.asset.public_id === publicId
+  );
+  return row && row.kind === 'asset' ? row : undefined;
+}
+
+function findAssetIdx(publicId: string): number {
+  return flat.findIndex(
+    (item) => item.kind === 'asset' && item.asset.public_id === publicId
+  );
+}
+
+function collapseAt(idx: number): void {
+  const row = flat[idx];
+  if (row.kind !== 'folder') {
+    return;
+  }
+
+  row.expanded = false;
+  const end = spliceOutRangeAtDepth(
+    flat as Array<{ depth: number }>,
+    idx,
+    row.depth + 1
+  );
+
+  flat.splice(idx + 1, end - idx - 1);
+  rebuild();
+}
+
+function expandAt(idx: number, children: Row[]): void {
+  const row = flat[idx];
+  if (row.kind !== 'folder') {
+    return;
+  }
+
+  row.expanded = true;
+  flat.splice(idx + 1, 0, ...children);
+  rebuild();
+}
+
+function toggleFolder(path: string): void {
+  const idx = findFolderIdx(path);
+  if (idx < 0) {
+    return;
+  }
+
+  const row = flat[idx];
+  if (row.kind !== 'folder') {
+    return;
+  }
+
+  if (row.expanded) {
+    collapseAt(idx);
+    return;
+  }
+
+  const cached = childrenByFolder.get(path);
+  if (cached) {
+    expandAt(idx, cached);
+    return;
+  }
+
+  expandAt(idx, [{ kind: 'loading', depth: row.depth + 1 }]);
+  getVSCode()?.postMessage({ command: 'expandFolder', path });
+}
+
+function onRootData(folders: ClientFolder[], assets: ClientAsset[], hasMore: boolean): void {
+  const scrollSnapshot = snapshotScroll();
+  hideEmptyState();
+  clearError();
+  searchMode = null;
+  setSearchInputValue('');
+  flat.length = 0;
+  childrenByFolder.clear();
+
+  for (const folder of folders) {
+    flat.push({ kind: 'folder', folder, depth: 0, expanded: false });
+  }
+
+  for (const asset of assets) {
+    flat.push({ kind: 'asset', asset, depth: 0 });
+  }
+
+  if (hasMore) {
+    flat.push({ kind: 'loading', depth: 0 });
+  }
+
+  if (flat.length > 0 && selectedIdx < 0) {
+    selectedIdx = 0;
+  } else if (selectedIdx >= flat.length) {
+    selectedIdx = flat.length - 1;
+  }
+
+  rebuild();
+  restoreScroll(scrollSnapshot);
+}
+
+function onRootAssetsAppended(assets: ClientAsset[], hasMore: boolean): void {
+  const loadingIdx = flat.findIndex((row) => row.kind === 'loading' && row.depth === 0);
+  if (loadingIdx >= 0) {
+    flat.splice(loadingIdx, 1);
+  }
+
+  for (const asset of assets) {
+    flat.push({ kind: 'asset', asset, depth: 0 });
+  }
+
+  if (hasMore) {
+    flat.push({ kind: 'loading', depth: 0 });
+  }
+
+  rebuild();
+}
+
+function onFolderData(
+  path: string,
+  folders: ClientFolder[],
+  assets: ClientAsset[],
+  hasMore: boolean
+): void {
+  const scrollSnapshot = snapshotScroll();
+  hideEmptyState();
+  clearError();
+  const idx = findFolderIdx(path);
+  if (idx < 0) {
+    return;
+  }
+
+  const row = flat[idx];
+  if (row.kind !== 'folder') {
+    return;
+  }
+
+  const depth = row.depth + 1;
+  const children: Row[] = [];
+
+  for (const folder of folders) {
+    children.push({ kind: 'folder', folder, depth, expanded: false });
+  }
+
+  for (const asset of assets) {
+    children.push({ kind: 'asset', asset, depth });
+  }
+
+  if (hasMore) {
+    children.push({ kind: 'loading', depth });
+  }
+
+  childrenByFolder.set(path, children.slice());
+
+  const end = spliceOutRangeAtDepth(
+    flat as Array<{ depth: number }>,
+    idx,
+    depth
+  );
+
+  flat.splice(idx + 1, end - idx - 1, ...children);
+  row.expanded = true;
+  rebuild();
+  restoreScroll(scrollSnapshot);
+}
+
+function onNestedAssetsAppended(
+  path: string,
+  assets: ClientAsset[],
+  hasMore: boolean
+): void {
+  const idx = findFolderIdx(path);
+  if (idx < 0) {
+    return;
+  }
+
+  const folderRow = flat[idx];
+  if (folderRow.kind !== 'folder') {
+    return;
+  }
+
+  const depth = folderRow.depth + 1;
+
+  const newRows: Row[] = assets.map((asset) => ({
+    kind: 'asset',
+    asset,
+    depth,
+  }));
+
+  if (hasMore) {
+    newRows.push({ kind: 'loading', depth });
+  }
+
+  const cachedChildren = childrenByFolder.get(path) || [];
+  const nextCachedChildren = cachedChildren.filter(
+    (child) => !(child.kind === 'loading' && child.depth === depth)
+  );
+  nextCachedChildren.push(...newRows);
+  childrenByFolder.set(path, nextCachedChildren);
+
+  if (!folderRow.expanded) {
+    return;
+  }
+
+  let end = spliceOutRangeAtDepth(
+    flat as Array<{ depth: number }>,
+    idx,
+    depth
+  );
+
+  if (end > idx + 1) {
+    const lastChild = flat[end - 1];
+    if (lastChild.kind === 'loading' && lastChild.depth === depth) {
+      flat.splice(end - 1, 1);
+      end--;
+    }
+  }
+
+  flat.splice(end, 0, ...newRows);
+
+  rebuild();
+}
+
+function onSearchData(query: string, assets: ClientAsset[], hasMore: boolean): void {
+  const scrollSnapshot = snapshotScroll();
+  hideEmptyState();
+  clearError();
+  searchMode = { query };
+  setSearchInputValue(query);
+  flat.length = 0;
+  childrenByFolder.clear();
+  flat.push({ kind: 'clearSearch', label: `Clear search: ${query}`, depth: 0 });
+  for (const asset of assets) {
+    flat.push({ kind: 'asset', asset, depth: 0 });
+  }
+  if (hasMore) {
+    flat.push({ kind: 'loading', depth: 0 });
+  }
+  selectedIdx = flat.length > 0 ? 0 : -1;
+  rebuild();
+  restoreScroll(scrollSnapshot);
+}
+
+function onSearchAppended(assets: ClientAsset[], hasMore: boolean): void {
+  if (!searchMode) {
+    return;
+  }
+
+  const loadingIdx = flat.findIndex((row) => row.kind === 'loading');
+  if (loadingIdx >= 0) {
+    flat.splice(loadingIdx, 1);
+  }
+  for (const asset of assets) {
+    flat.push({ kind: 'asset', asset, depth: 0 });
+  }
+  if (hasMore) {
+    flat.push({ kind: 'loading', depth: 0 });
+  }
+  rebuild();
+}
+
+function onEnvChanged(cloudName: string, hasConfig: boolean): void {
+  clearError();
+  flat.length = 0;
+  childrenByFolder.clear();
+  searchMode = null;
+  selectedIdx = -1;
+  rebuild();
+
+  const envEl = document.getElementById('lib-env');
+  if (envEl) {
+    envEl.textContent = hasConfig && cloudName ? cloudName : '';
+  }
+
+  // Reset inline search bar so stale queries do not survive an env switch.
+  const searchInput = document.getElementById('lib-search-input') as HTMLInputElement | null;
+  const searchClear = document.getElementById('lib-search-clear') as HTMLButtonElement | null;
+  if (searchInput) {
+    searchInput.value = '';
+  }
+  searchClear?.classList.add('hidden');
+
+  if (!hasConfig) {
+    showEmptyState('Connect your Cloudinary account to browse media', 'welcome');
+    return;
+  }
+
+  hideEmptyState();
+}
+
+window.addEventListener('message', (event: MessageEvent<InboundMessage>) => {
+  const message = event.data;
+  switch (message.command) {
+    case 'rootData':
+      onRootData(message.folders, message.assets, message.hasMore);
+      break;
+    case 'folderData':
+      onFolderData(
+        message.path,
+        message.folders,
+        message.assets,
+        message.hasMore
+      );
+      break;
+    case 'assetsAppended':
+      if (message.path === '') {
+        onRootAssetsAppended(message.assets, message.hasMore);
+      } else {
+        onNestedAssetsAppended(message.path, message.assets, message.hasMore);
+      }
+      break;
+    case 'searchData':
+      onSearchData(message.query, message.assets, message.hasMore);
+      break;
+    case 'searchAppended':
+      onSearchAppended(message.assets, message.hasMore);
+      break;
+    case 'envChanged':
+      onEnvChanged(message.cloudName, message.hasConfig);
+      break;
+    case 'viewStateChanged':
+      syncFilterUi(message.resourceTypeFilter, message.sortDirection);
+      break;
+    case 'error':
+      showError(message.message);
+      break;
+    default:
+      break;
+  }
+});
+
+function initFilterBar(): void {
+  const typeSel = document.getElementById('lib-filter-type') as HTMLSelectElement | null;
+  const sortSel = document.getElementById('lib-filter-sort') as HTMLSelectElement | null;
+
+  const send = (): void => {
+    if (!typeSel || !sortSel) {
+      return;
+    }
+    getVSCode()?.postMessage({
+      command: 'setView',
+      resourceTypeFilter: typeSel.value,
+      sortDirection: sortSel.value,
+    });
+  };
+
+  typeSel?.addEventListener('change', send);
+  sortSel?.addEventListener('change', send);
+}
+
+function syncFilterUi(resourceTypeFilter: string, sortDirection: string): void {
+  const typeSel = document.getElementById('lib-filter-type') as HTMLSelectElement | null;
+  const sortSel = document.getElementById('lib-filter-sort') as HTMLSelectElement | null;
+  if (typeSel && typeSel.value !== resourceTypeFilter) {
+    typeSel.value = resourceTypeFilter;
+  }
+  if (sortSel && sortSel.value !== sortDirection) {
+    sortSel.value = sortDirection;
+  }
+}
+
+function setSearchInputValue(value: string): void {
+  const input = document.getElementById('lib-search-input') as HTMLInputElement | null;
+  const clearBtn = document.getElementById('lib-search-clear') as HTMLButtonElement | null;
+  if (input && input.value !== value) {
+    input.value = value;
+  }
+  clearBtn?.classList.toggle('hidden', value.trim() === '');
+}
+
+function initSearchBar(): void {
+  const input = document.getElementById('lib-search-input') as HTMLInputElement | null;
+  const clearBtn = document.getElementById('lib-search-clear') as HTMLButtonElement | null;
+  if (!input) {
+    return;
+  }
+
+  input.addEventListener('input', () => {
+    clearBtn?.classList.toggle('hidden', input.value.trim() === '');
+  });
+
+  input.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      const query = input.value.trim();
+      if (query) {
+        getVSCode()?.postMessage({ command: 'searchAssets', query });
+      }
+      return;
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      if (input.value !== '') {
+        setSearchInputValue('');
+        getVSCode()?.postMessage({ command: 'clearSearch' });
+        return;
+      }
+      document.getElementById('lib-root')?.focus();
+    }
+  });
+
+  clearBtn?.addEventListener('click', () => {
+    setSearchInputValue('');
+    input.focus();
+    getVSCode()?.postMessage({ command: 'clearSearch' });
+  });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const container = document.getElementById('lib-root') as HTMLElement;
+  container.setAttribute('tabindex', '0');
+  list = new VirtualList<Row>({
+    container,
+    rowHeight: ROW_HEIGHT,
+    renderRow,
+  });
+  document.documentElement.style.setProperty('--lib-row-height', `${ROW_HEIGHT}px`);
+
+  document.querySelectorAll<HTMLButtonElement>('#lib-toolbar .lib-tb-btn').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const action = btn.dataset.action;
+      if (!action) {
+        return;
+      }
+      getVSCode()?.postMessage({ command: 'runToolbar', action });
+    });
+  });
+
+  initSearchBar();
+  initFilterBar();
+
+  container.addEventListener('click', (event) => {
+    const target = event.target as HTMLElement;
+    const rowEl = target.closest('.lib-row') as HTMLElement | null;
+    if (!rowEl) {
+      return;
+    }
+
+    if (rowEl.classList.contains('lib-row--folder')) {
+      const path = rowEl.dataset.path || '';
+      const idx = findFolderIdx(path);
+      setSelected(idx);
+      toggleFolder(path);
+      return;
+    }
+
+    if (rowEl.classList.contains('lib-row--clear')) {
+      setSelected(0);
+      getVSCode()?.postMessage({ command: 'clearSearch' });
+      return;
+    }
+
+    if (rowEl.classList.contains('lib-row--asset')) {
+      const publicId = rowEl.dataset.publicId || '';
+      const idx = findAssetIdx(publicId);
+      setSelected(idx);
+      const row = findAssetRow(publicId);
+      if (row) {
+        getVSCode()?.postMessage({ command: 'openAsset', asset: row.asset });
+      }
+    }
+  });
+
+  container.addEventListener('contextmenu', (event) => {
+    event.preventDefault();
+
+    const rowEl = (event.target as HTMLElement).closest('.lib-row') as HTMLElement | null;
+    if (!rowEl) {
+      return;
+    }
+
+    if (rowEl.classList.contains('lib-row--asset')) {
+      const publicId = rowEl.dataset.publicId || '';
+      const row = findAssetRow(publicId);
+      if (!row) {
+        return;
+      }
+
+      setSelected(findAssetIdx(publicId));
+      showMenu(
+        event.clientX,
+        event.clientY,
+        [
+          { label: 'Copy URL', action: 'copyUrl', icon: menuIcons.link() },
+          { label: 'Copy Public ID', action: 'copyPublicId', icon: menuIcons.hash() },
+          {
+            label: 'Copy Optimized URL',
+            action: 'copyOptimizedUrl',
+            icon: menuIcons.bolt(),
+          },
+        ],
+        (action) => {
+          getVSCode()?.postMessage({
+            command: 'contextAction',
+            action,
+            data: row.asset,
+          });
+        }
+      );
+      return;
+    }
+
+    if (rowEl.classList.contains('lib-row--folder')) {
+      const path = rowEl.dataset.path || '';
+      const idx = findFolderIdx(path);
+      const row = idx >= 0 ? flat[idx] : undefined;
+      if (!row || row.kind !== 'folder') {
+        return;
+      }
+
+      setSelected(idx);
+      showMenu(
+        event.clientX,
+        event.clientY,
+        [
+          {
+            label: 'Upload here',
+            action: 'uploadToFolder',
+            icon: menuIcons.upload(),
+          },
+        ],
+        (action) => {
+          getVSCode()?.postMessage({
+            command: 'contextAction',
+            action,
+            data: row.folder,
+          });
+        }
+      );
+    }
+  });
+
+  container.addEventListener('keydown', (event) => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      setSelected(selectedIdx + 1);
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      setSelected(selectedIdx - 1);
+    } else if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      const row = flat[selectedIdx];
+      if (row && row.kind === 'folder' && !row.expanded) {
+        toggleFolder(row.folder.path);
+      }
+    } else if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      const row = flat[selectedIdx];
+      if (row && row.kind === 'folder' && row.expanded) {
+        toggleFolder(row.folder.path);
+      }
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      const row = flat[selectedIdx];
+      if (row?.kind === 'asset') {
+        getVSCode()?.postMessage({ command: 'openAsset', asset: row.asset });
+      } else if (row?.kind === 'folder') {
+        toggleFolder(row.folder.path);
+      } else if (row?.kind === 'clearSearch') {
+        getVSCode()?.postMessage({ command: 'clearSearch' });
+      }
+    }
+  });
+
+  getVSCode()?.postMessage({ command: 'ready' });
+});
diff --git a/src/webview/client/libraryIcons.ts b/src/webview/client/libraryIcons.ts
new file mode 100644
index 0000000..b271aa6
--- /dev/null
+++ b/src/webview/client/libraryIcons.ts
@@ -0,0 +1,77 @@
+const ICON_SIZE = 14;
+
+function icon(body: string): string {
+  return `<svg width="${ICON_SIZE}" height="${ICON_SIZE}" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+}
+
+function filled(body: string, extra = ''): string {
+  return `<svg width="${ICON_SIZE}" height="${ICON_SIZE}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"${extra ? ` ${extra}` : ''}>${body}</svg>`;
+}
+
+export const rowIcons = {
+  chevron: () =>
+    `<svg width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>`,
+
+  folder: () =>
+    icon(
+      '<path d="M3 6.25a1.25 1.25 0 0 1 1.25-1.25h3.6a1 1 0 0 1 .78.37l1.2 1.5a1 1 0 0 0 .78.38h5.14A1.25 1.25 0 0 1 17 8.5v7.25A1.25 1.25 0 0 1 15.75 17H4.25A1.25 1.25 0 0 1 3 15.75V6.25z"/>'
+    ),
+
+  folderOpen: () =>
+    filled(
+      '<path d="M3 6.25a1.25 1.25 0 0 1 1.25-1.25h3.6a1 1 0 0 1 .78.37l1.2 1.5a1 1 0 0 0 .78.38h5.14A1.25 1.25 0 0 1 17 8.5v.5H3V6.25z"/><path d="M3.1 10h13.8l-1.06 5.55A1.5 1.5 0 0 1 14.37 17H4.63a1.5 1.5 0 0 1-1.47-1.45L3.1 10z" opacity="0.85"/>'
+    ),
+
+  image: () =>
+    `<svg width="${ICON_SIZE}" height="${ICON_SIZE}" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.5" y="3.5" width="15" height="13" rx="1.5"/><circle cx="7" cy="8" r="1.3" fill="currentColor"/><path d="M3 14.5l4.3-4 3.2 2.6 2.5-2 4.5 3.9"/></svg>`,
+
+  video: () =>
+    `<svg width="${ICON_SIZE}" height="${ICON_SIZE}" viewBox="0 0 20 20" fill="currentColor" fill-rule="evenodd" aria-hidden="true"><path d="M3 5.5A1.5 1.5 0 0 1 4.5 4h11A1.5 1.5 0 0 1 17 5.5v9a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5v-9zm5.5 2.2v4.6l4-2.3-4-2.3z"/></svg>`,
+
+  file: () =>
+    `<svg width="${ICON_SIZE}" height="${ICON_SIZE}" viewBox="0 0 20 20" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M5.5 2.5h5.3l3.7 3.7v9.8a1.5 1.5 0 0 1-1.5 1.5h-7.5A1.5 1.5 0 0 1 4 16V4a1.5 1.5 0 0 1 1.5-1.5zm5 0v3.7h3.7"/></svg>`,
+
+  close: () =>
+    `<svg width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>`,
+
+  lock: () =>
+    `<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.45" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="7" width="9" height="6.5" rx="1.2"/><path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2"/></svg>`,
+};
+
+export function assetIcon(resourceType: 'image' | 'video' | 'raw'): string {
+  if (resourceType === 'video') {
+    return rowIcons.video();
+  }
+  if (resourceType === 'raw') {
+    return rowIcons.file();
+  }
+  return rowIcons.image();
+}
+
+export function folderIcon(expanded: boolean): string {
+  return expanded ? rowIcons.folderOpen() : rowIcons.folder();
+}
+
+const MENU_ICON_SIZE = 14;
+
+function menuSvg(body: string, viewBox = '0 0 24 24'): string {
+  return `<svg width="${MENU_ICON_SIZE}" height="${MENU_ICON_SIZE}" viewBox="${viewBox}" fill="currentColor" aria-hidden="true">${body}</svg>`;
+}
+
+export const menuIcons = {
+  link: () =>
+    menuSvg(
+      '<path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>'
+    ),
+
+  hash: () =>
+    menuSvg(
+      '<path d="M20 7h-4l1-4h-2l-1 4h-4l1-4h-2L8 7H4v2h3.5L6.5 13H3v2h3l-1 4h2l1-4h4l-1 4h2l1-4h4v-2h-3.5l1-4H20V7zm-5.5 6h-4l1-4h4l-1 4z"/>'
+    ),
+
+  bolt: () =>
+    menuSvg('<path d="M7 2v11h3v9l7-12h-4l4-8z"/>'),
+
+  upload: () =>
+    menuSvg('<path d="M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z"/>'),
+};
diff --git a/src/webview/client/libraryMenu.ts b/src/webview/client/libraryMenu.ts
new file mode 100644
index 0000000..802dc81
--- /dev/null
+++ b/src/webview/client/libraryMenu.ts
@@ -0,0 +1,251 @@
+const MENU_ID = '__lib-menu__';
+const VIEWPORT_MARGIN = 8;
+
+export interface MenuItem {
+  label: string;
+  action: string;
+  /** Optional inline SVG markup rendered before the label. */
+  icon?: string;
+  /** Render a separator before this item. */
+  divider?: boolean;
+}
+
+interface MenuState {
+  el: HTMLElement;
+  items: HTMLButtonElement[];
+  highlighted: number;
+  onPick: (action: string) => void;
+}
+
+let active: MenuState | undefined;
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function clamp(value: number, min: number, max: number): number {
+  if (max < min) {
+    return min;
+  }
+  return Math.max(min, Math.min(max, value));
+}
+
+function highlight(state: MenuState, idx: number): void {
+  if (state.items.length === 0) {
+    return;
+  }
+  const wrapped =
+    ((idx % state.items.length) + state.items.length) % state.items.length;
+  if (state.highlighted === wrapped) {
+    return;
+  }
+  if (state.highlighted >= 0 && state.items[state.highlighted]) {
+    state.items[state.highlighted].classList.remove('lib-menu-item--active');
+    state.items[state.highlighted].removeAttribute('aria-current');
+  }
+  state.highlighted = wrapped;
+  const next = state.items[wrapped];
+  next.classList.add('lib-menu-item--active');
+  next.setAttribute('aria-current', 'true');
+}
+
+function pick(state: MenuState, idx: number): void {
+  const item = state.items[idx];
+  if (!item) {
+    return;
+  }
+  const action = item.dataset.action;
+  hideMenu();
+  if (action) {
+    state.onPick(action);
+  }
+}
+
+function onDocumentMouseDown(event: MouseEvent): void {
+  if (!active) {
+    return;
+  }
+  const target = event.target;
+  if (target instanceof Node && active.el.contains(target)) {
+    return;
+  }
+  hideMenu();
+}
+
+function onWindowDismiss(): void {
+  hideMenu();
+}
+
+function onKey(event: KeyboardEvent): void {
+  if (!active) {
+    return;
+  }
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    event.stopPropagation();
+    hideMenu();
+    return;
+  }
+  if (event.key === 'ArrowDown') {
+    event.preventDefault();
+    highlight(active, active.highlighted + 1);
+    return;
+  }
+  if (event.key === 'ArrowUp') {
+    event.preventDefault();
+    highlight(active, active.highlighted - 1);
+    return;
+  }
+  if (event.key === 'Home') {
+    event.preventDefault();
+    highlight(active, 0);
+    return;
+  }
+  if (event.key === 'End') {
+    event.preventDefault();
+    highlight(active, active.items.length - 1);
+    return;
+  }
+  if (event.key === 'Enter' || event.key === ' ') {
+    if (active.highlighted >= 0) {
+      event.preventDefault();
+      pick(active, active.highlighted);
+    }
+  }
+}
+
+function attachListeners(): void {
+  document.addEventListener('mousedown', onDocumentMouseDown, true);
+  document.addEventListener('keydown', onKey, true);
+  window.addEventListener('blur', onWindowDismiss);
+  window.addEventListener('resize', onWindowDismiss);
+}
+
+function detachListeners(): void {
+  document.removeEventListener('mousedown', onDocumentMouseDown, true);
+  document.removeEventListener('keydown', onKey, true);
+  window.removeEventListener('blur', onWindowDismiss);
+  window.removeEventListener('resize', onWindowDismiss);
+}
+
+function positionMenu(menu: HTMLElement, anchorX: number, anchorY: number): void {
+  // Insert offscreen for measurement.
+  menu.style.left = '-9999px';
+  menu.style.top = '-9999px';
+  menu.style.visibility = 'hidden';
+  document.body.appendChild(menu);
+
+  const rect = menu.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const maxLeft = Math.max(VIEWPORT_MARGIN, vw - rect.width - VIEWPORT_MARGIN);
+  const maxTop = Math.max(VIEWPORT_MARGIN, vh - rect.height - VIEWPORT_MARGIN);
+
+  // Horizontal: prefer right of cursor; flip to left of cursor if overflow;
+  // finally clamp.
+  let left = anchorX;
+  if (left + rect.width + VIEWPORT_MARGIN > vw) {
+    const flipped = anchorX - rect.width;
+    left = flipped >= VIEWPORT_MARGIN ? flipped : maxLeft;
+  }
+  left = clamp(left, VIEWPORT_MARGIN, maxLeft);
+
+  // Vertical: prefer below cursor; flip above; clamp.
+  let top = anchorY;
+  if (top + rect.height + VIEWPORT_MARGIN > vh) {
+    const flipped = anchorY - rect.height;
+    top = flipped >= VIEWPORT_MARGIN ? flipped : maxTop;
+  }
+  top = clamp(top, VIEWPORT_MARGIN, maxTop);
+
+  menu.style.left = `${left}px`;
+  menu.style.top = `${top}px`;
+  menu.style.visibility = '';
+}
+
+function buildMenu(items: MenuItem[]): { el: HTMLElement; itemEls: HTMLButtonElement[] } {
+  const el = document.createElement('div');
+  el.className = 'lib-menu';
+  el.id = MENU_ID;
+  el.setAttribute('role', 'menu');
+  el.style.position = 'fixed';
+
+  const itemEls: HTMLButtonElement[] = [];
+
+  for (const item of items) {
+    if (item.divider) {
+      const sep = document.createElement('div');
+      sep.className = 'lib-menu__divider';
+      sep.setAttribute('role', 'separator');
+      el.appendChild(sep);
+    }
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'lib-menu-item';
+    btn.setAttribute('role', 'menuitem');
+    btn.dataset.action = item.action;
+    btn.tabIndex = -1;
+
+    const iconMarkup = item.icon
+      ? `<span class="lib-menu-item__icon">${item.icon}</span>`
+      : '<span class="lib-menu-item__icon" aria-hidden="true"></span>';
+    btn.innerHTML = `${iconMarkup}<span class="lib-menu-item__label">${escapeHtml(item.label)}</span>`;
+
+    el.appendChild(btn);
+    itemEls.push(btn);
+  }
+
+  return { el, itemEls };
+}
+
+export function showMenu(
+  anchorX: number,
+  anchorY: number,
+  items: MenuItem[],
+  onPick: (action: string) => void
+): void {
+  hideMenu();
+
+  if (items.length === 0) {
+    return;
+  }
+
+  const { el, itemEls } = buildMenu(items);
+  const state: MenuState = {
+    el,
+    items: itemEls,
+    highlighted: -1,
+    onPick,
+  };
+
+  positionMenu(el, anchorX, anchorY);
+
+  itemEls.forEach((btn, idx) => {
+    btn.addEventListener('click', () => pick(state, idx));
+    btn.addEventListener('mouseenter', () => highlight(state, idx));
+  });
+
+  active = state;
+  highlight(state, 0);
+
+  // Defer to skip the contextmenu event tail.
+  setTimeout(() => {
+    if (active === state) {
+      attachListeners();
+    }
+  }, 0);
+}
+
+export function hideMenu(): void {
+  if (!active) {
+    document.getElementById(MENU_ID)?.remove();
+    return;
+  }
+  detachListeners();
+  active.el.remove();
+  active = undefined;
+}
diff --git a/src/webview/client/libraryRowSplice.ts b/src/webview/client/libraryRowSplice.ts
new file mode 100644
index 0000000..fd36984
--- /dev/null
+++ b/src/webview/client/libraryRowSplice.ts
@@ -0,0 +1,16 @@
+/**
+ * Returns the index (exclusive) of the first row after `startIdx` whose depth
+ * is strictly less than `depth`. Use this to find where a folder's children
+ * block ends in the flat row array.
+ */
+export function spliceOutRangeAtDepth(
+  rows: Array<{ depth: number }>,
+  startIdx: number,
+  depth: number,
+): number {
+  let i = startIdx + 1;
+  while (i < rows.length && rows[i].depth >= depth) {
+    i++;
+  }
+  return i;
+}
diff --git a/src/webview/client/libraryTypes.ts b/src/webview/client/libraryTypes.ts
new file mode 100644
index 0000000..391c2fa
--- /dev/null
+++ b/src/webview/client/libraryTypes.ts
@@ -0,0 +1,57 @@
+export interface ClientAsset {
+  public_id: string;
+  display_name?: string;
+  resource_type: 'image' | 'video' | 'raw';
+  type?: string;
+  format?: string;
+  bytes?: number;
+  width?: number;
+  height?: number;
+  secure_url: string;
+  optimized_url: string;
+  thumbnail_url: string;
+  tags?: string[];
+  context?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+  created_at?: string;
+}
+
+export interface ClientFolder {
+  name: string;
+  path: string;
+}
+
+export type ResourceTypeFilter = 'all' | 'image' | 'video' | 'raw';
+export type SortDirection = 'asc' | 'desc';
+
+export type InboundMessage =
+  | { command: 'rootData'; folders: ClientFolder[]; assets: ClientAsset[]; hasMore: boolean }
+  | { command: 'folderData'; path: string; folders: ClientFolder[]; assets: ClientAsset[]; hasMore: boolean }
+  | { command: 'assetsAppended'; path: string; assets: ClientAsset[]; hasMore: boolean }
+  | { command: 'searchData'; query: string; assets: ClientAsset[]; hasMore: boolean }
+  | { command: 'searchAppended'; assets: ClientAsset[]; hasMore: boolean }
+  | { command: 'envChanged'; cloudName: string; folderMode: 'dynamic' | 'fixed'; hasConfig: boolean }
+  | {
+      command: 'viewStateChanged';
+      resourceTypeFilter: ResourceTypeFilter;
+      sortDirection: SortDirection;
+    }
+  | { command: 'error'; message: string }
+  | { command: 'focusSearch' };
+
+export type OutboundMessage =
+  | { command: 'ready' }
+  | { command: 'expandFolder'; path: string }
+  | { command: 'openAsset'; asset: ClientAsset }
+  | {
+      command: 'contextAction';
+      action: 'copyUrl' | 'copyPublicId' | 'copyOptimizedUrl' | 'uploadToFolder';
+      data: ClientAsset | ClientFolder;
+    }
+  | {
+      command: 'runToolbar';
+      action: 'refresh' | 'openUploadWidget' | 'showHomescreen' | 'openGlobalConfig';
+    }
+  | { command: 'setView'; resourceTypeFilter: ResourceTypeFilter; sortDirection: SortDirection }
+  | { command: 'searchAssets'; query: string }
+  | { command: 'clearSearch' };
diff --git a/src/webview/client/libraryVirtualList.ts b/src/webview/client/libraryVirtualList.ts
new file mode 100644
index 0000000..48dc352
--- /dev/null
+++ b/src/webview/client/libraryVirtualList.ts
@@ -0,0 +1,119 @@
+/// <reference lib="dom" />
+
+export interface WindowInput {
+  scrollTop: number;
+  viewportHeight: number;
+  rowHeight: number;
+  totalRows: number;
+  buffer: number;
+}
+
+export interface WindowRange {
+  startIdx: number;
+  endIdx: number;
+  startOffset: number;
+  totalHeight: number;
+}
+
+export function computeWindow(input: WindowInput): WindowRange {
+  const firstVisible = Math.floor(input.scrollTop / input.rowHeight);
+  const visibleCount = Math.ceil(input.viewportHeight / input.rowHeight);
+  const startIdx = Math.max(0, firstVisible - input.buffer);
+  const endIdx = Math.min(
+    input.totalRows,
+    firstVisible + visibleCount + input.buffer
+  );
+
+  return {
+    startIdx,
+    endIdx,
+    startOffset: startIdx * input.rowHeight,
+    totalHeight: input.totalRows * input.rowHeight,
+  };
+}
+
+export interface VirtualListOpts<T> {
+  container: HTMLElement;
+  rowHeight: number | (() => number);
+  buffer?: number;
+  renderRow(el: HTMLElement, item: T, index: number): void;
+}
+
+/**
+ * Simple fixed-row-height virtual list. Rows are recycled from a pool.
+ */
+export class VirtualList<T> {
+  private items: T[] = [];
+  private readonly getRowHeight: () => number;
+  private readonly buffer: number;
+  private readonly container: HTMLElement;
+  private readonly spacer: HTMLDivElement;
+  private readonly pool: HTMLDivElement[] = [];
+  private readonly renderRow: (el: HTMLElement, item: T, index: number) => void;
+
+  constructor(opts: VirtualListOpts<T>) {
+    this.container = opts.container;
+    const rowHeight = opts.rowHeight;
+    this.getRowHeight = typeof rowHeight === 'function'
+      ? rowHeight
+      : () => rowHeight;
+    this.buffer = opts.buffer ?? 5;
+    this.renderRow = opts.renderRow;
+
+    this.container.style.position = 'relative';
+    this.container.style.overflowY = 'auto';
+
+    this.spacer = document.createElement('div');
+    this.spacer.style.position = 'relative';
+    this.spacer.style.width = '100%';
+    this.container.appendChild(this.spacer);
+
+    this.container.addEventListener('scroll', () => this.render());
+  }
+
+  setItems(items: T[]): void {
+    this.items = items;
+    this.render();
+  }
+
+  appendItems(more: T[]): void {
+    this.items = this.items.concat(more);
+    this.render();
+  }
+
+  render(): void {
+    const rowHeight = this.getRowHeight();
+    const windowRange = computeWindow({
+      scrollTop: this.container.scrollTop,
+      viewportHeight: this.container.clientHeight,
+      rowHeight,
+      totalRows: this.items.length,
+      buffer: this.buffer,
+    });
+
+    this.spacer.style.height = `${windowRange.totalHeight}px`;
+
+    const needed = windowRange.endIdx - windowRange.startIdx;
+    while (this.pool.length < needed) {
+      const row = document.createElement('div');
+      row.style.position = 'absolute';
+      row.style.left = '0';
+      row.style.right = '0';
+      this.spacer.appendChild(row);
+      this.pool.push(row);
+    }
+
+    for (let i = 0; i < this.pool.length; i++) {
+      const row = this.pool[i];
+      row.style.height = `${rowHeight}px`;
+      if (i < needed) {
+        const idx = windowRange.startIdx + i;
+        row.style.top = `${idx * rowHeight}px`;
+        row.style.display = '';
+        this.renderRow(row, this.items[idx], idx);
+      } else {
+        row.style.display = 'none';
+      }
+    }
+  }
+}
diff --git a/src/webview/client/upload-widget.ts b/src/webview/client/upload-widget.ts
index afd73ec..a13de73 100644
--- a/src/webview/client/upload-widget.ts
+++ b/src/webview/client/upload-widget.ts
@@ -12,6 +12,7 @@ import {
 
 interface UploadPreset {
   name: string;
+  signed?: boolean;
   settings?: Record<string, unknown>;
 }
 
@@ -24,6 +25,7 @@ interface AssetData {
   public_id: string;
   secure_url: string;
   resource_type: string;
+  type?: string;
   _uploadedToFolder?: string;
 }
 
@@ -35,6 +37,7 @@ interface UploadMessage {
   error?: string;
   folderPath?: string;
   folders?: Array<{ path: string; label: string }>;
+  presets?: UploadPreset[];
 }
 
 // Configuration
@@ -365,6 +368,10 @@ function getThumbnailUrl(asset: AssetData): string | null {
   const publicId = asset.public_id;
   const resourceType = asset.resource_type;
 
+  if (asset.type === "authenticated") {
+    return resourceType === "image" ? asset.secure_url : null;
+  }
+
   if (resourceType === "image") {
     return `https://res.cloudinary.com/${cloudName}/image/upload/w_130,h_100,c_fill,g_auto,f_auto,q_auto/${publicId}`;
   } else if (resourceType === "video") {
@@ -524,6 +531,23 @@ function handleUploadMessage(message: UploadMessage): void {
         }
       }
       break;
+
+    case "updatePresets":
+      if (Array.isArray(message.presets)) {
+        presets = message.presets;
+        const presetSelect = document.getElementById("presetSelect") as HTMLSelectElement | null;
+        if (presetSelect) {
+          const currentValue = presetSelect.value;
+          presetSelect.innerHTML = presets
+            .map(
+              (p) =>
+                `<option value="${p.name}" ${p.name === currentValue ? "selected" : ""}>${p.name} (${p.signed ? "Signed" : "Unsigned"})</option>`
+            )
+            .join("");
+          presetSelect.dispatchEvent(new Event("change"));
+        }
+      }
+      break;
   }
 }
 
diff --git a/src/webview/client/welcome.ts b/src/webview/client/welcome.ts
index 533f32c..2f153a5 100644
--- a/src/webview/client/welcome.ts
+++ b/src/webview/client/welcome.ts
@@ -21,8 +21,8 @@ function openExternal(url: string): void {
 /**
  * Focus the Cloudinary sidebar (opens the dashboard).
  */
-function focusTreeView(): void {
-  getVSCode()?.postMessage({ command: "focusTreeView" });
+function focusDashboard(): void {
+  getVSCode()?.postMessage({ command: "focusDashboard" });
 }
 
 /**
@@ -46,14 +46,14 @@ declare global {
   interface Window {
     openGlobalConfig: typeof openGlobalConfig;
     openExternal: typeof openExternal;
-    focusTreeView: typeof focusTreeView;
+    focusDashboard: typeof focusDashboard;
     getConfigExample: typeof getConfigExample;
   }
 }
 
 window.openGlobalConfig = openGlobalConfig;
 window.openExternal = openExternal;
-window.focusTreeView = focusTreeView;
+window.focusDashboard = focusDashboard;
 window.getConfigExample = getConfigExample;
 
 // Initialize common functionality when this script loads
diff --git a/src/webview/components/dropZone.ts b/src/webview/components/dropZone.ts
index 2ac43da..fc77d37 100644
--- a/src/webview/components/dropZone.ts
+++ b/src/webview/components/dropZone.ts
@@ -428,7 +428,7 @@ export function createUploadedAssetsSection(
   return `
     <div id="uploaded-assets" class="uploaded-assets hidden">
       <div class="uploaded-assets__header">
-        <h3 class="uploaded-assets__title">✅ ${escapeHtml(title)}</h3>
+        <h3 class="uploaded-assets__title">${escapeHtml(title)}</h3>
         ${clearButtonHtml}
       </div>
       <div id="asset-grid" class="asset-grid">
@@ -437,4 +437,3 @@ export function createUploadedAssetsSection(
     </div>
   `;
 }
-
diff --git a/src/webview/homescreenView.ts b/src/webview/homescreenView.ts
index 5951330..39a492d 100644
--- a/src/webview/homescreenView.ts
+++ b/src/webview/homescreenView.ts
@@ -4,16 +4,20 @@
  */
 
 import * as vscode from "vscode";
-import { CloudinaryTreeDataProvider } from "../tree/treeDataProvider";
+import { CloudinaryService } from "../cloudinary/cloudinaryService";
 import { createWebviewDocument, getScriptUri, getStyleUri } from "./webviewUtils";
+import type { LibraryWebviewViewProvider } from "./libraryView";
 import { loadEnvironments } from "../config/configUtils";
 import skillsConfig from "../utils/skills-config.json";
+import { actionIcons } from "./icons";
 import {
   PlatformEntry,
   Scope,
   SkillInfo,
   MCP_SERVERS,
   detectEditor,
+  getMcpRootKey,
+  getEditorDisplayName,
   getMcpFilePath,
   fetchSkillList,
   fetchSkillContent,
@@ -31,8 +35,9 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
 
   constructor(
     private readonly _extensionUri: vscode.Uri,
-    private readonly _provider: CloudinaryTreeDataProvider
-  ) {}
+    private readonly _service: CloudinaryService,
+    private readonly _libraryWebview?: LibraryWebviewViewProvider
+  ) { }
 
   private _webviewView: vscode.WebviewView | undefined;
   private _cachedSkills: SkillInfo[] | undefined;
@@ -52,7 +57,10 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
 
     webviewView.webview.options = {
       enableScripts: true,
-      localResourceRoots: [vscode.Uri.joinPath(this._extensionUri, "media")],
+      localResourceRoots: [
+        vscode.Uri.joinPath(this._extensionUri, "media"),
+        vscode.Uri.joinPath(this._extensionUri, "resources"),
+      ],
     };
 
     const scriptUri = getScriptUri(
@@ -65,12 +73,15 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
       this._extensionUri,
       "homescreen.css"
     );
+    const logoUri = webviewView.webview.asWebviewUri(
+      vscode.Uri.joinPath(this._extensionUri, "resources", "cloudinary_icon_blue.png")
+    );
 
     webviewView.webview.html = createWebviewDocument({
       title: "Cloudinary",
       webview: webviewView.webview,
       extensionUri: this._extensionUri,
-      bodyContent: this._getBodyContent(),
+      bodyContent: this._getBodyContent(logoUri),
       additionalStyles: [homescreenCssUri],
       additionalScripts: [scriptUri],
     });
@@ -102,12 +113,13 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
             break;
           case "searchAssets":
             if (message.data?.trim()) {
-              this._provider.refresh({ searchQuery: message.data.trim() });
+              const query = message.data.trim();
+              await this._libraryWebview?.setSearch(query);
               vscode.commands.executeCommand("cloudinary.showLibrary");
             }
             break;
           case "clearSearch":
-            this._provider.refresh({ searchQuery: null });
+            await this._libraryWebview?.setSearch(null);
             break;
           case "switchEnvironment":
             vscode.commands.executeCommand("cloudinary.switchEnvironment");
@@ -152,10 +164,22 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
     vscode.commands.executeCommand("workbench.view.extension.cloudinary");
     // Post focusSearch after the view has had time to become visible
     setTimeout(() => {
-      this._webviewView?.webview.postMessage({ command: "focusSearch" });
+      this._safePost({ command: "focusSearch" });
     }, 250);
   }
 
+  private _safePost(message: unknown): void {
+    const targetView = this._webviewView;
+    if (!targetView) {
+      return;
+    }
+    try {
+      targetView.webview.postMessage(message);
+    } catch {
+      // Webview disposed between checks; safe to drop.
+    }
+  }
+
   async refresh(): Promise<void> {
     await this._sendHomescreenData();
   }
@@ -164,9 +188,9 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
     const view = this._webviewView;
     if (!view) { return; }
 
-    const hasConfig = !!(this._provider.cloudName && this._provider.apiKey);
-    const cloudName = this._provider.cloudName || "";
-    const folderMode = this._provider.dynamicFolders ? "Dynamic folders" : "Fixed folders";
+    const hasConfig = !!(this._service.cloudName && this._service.apiKey);
+    const cloudName = this._service.cloudName || "";
+    const folderMode = this._service.dynamicFolders ? "Dynamic folders" : "Fixed folders";
 
     let envCount = hasConfig ? 1 : 0;
     try {
@@ -174,19 +198,19 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
       envCount = Object.keys(envs).length;
     } catch { /* use default */ }
 
-    view.webview.postMessage({ command: "homescreenData", hasConfig, cloudName, folderMode, envCount });
+    this._safePost({ command: "homescreenData", hasConfig, cloudName, folderMode, envCount });
   }
 
-  private _getBodyContent(): string {
+  private _getBodyContent(logoUri: vscode.Uri): string {
     return `
 
       <div class="hs-root">
         <div class="hs-header">
           <div class="hs-brand">
             <div class="hs-brand-left">
-              <svg class="hs-brand-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-                <path d="M19.5 9.5a6.5 6.5 0 0 0-12.47-2A5 5 0 0 0 7 17.5h12a4.5 4.5 0 0 0 .5-8.97z" fill="rgba(255,255,255,0.9)" stroke="rgba(255,255,255,0.2)" stroke-width="0.5"/>
-              </svg>
+              <span class="hs-brand-logo-wrap" aria-hidden="true">
+                <img class="hs-brand-logo" src="${logoUri}" alt="" />
+              </span>
               <span class="hs-brand-name">Cloudinary</span>
             </div>
             <span class="hs-status-pill">
@@ -206,7 +230,7 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
         </div>
 
         <div id="hs-setup-banner" class="hs-setup-banner hidden">
-          <span class="hs-setup-banner-icon">⚠</span>
+          <span class="hs-setup-banner-icon" aria-hidden="true">${actionIcons.warning("sm")}</span>
           <span class="hs-setup-banner-text">Add your API credentials to connect</span>
           <button id="hs-btn-configure" class="hs-setup-banner-btn" data-command="openGlobalConfig">Configure</button>
         </div>
@@ -353,7 +377,7 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
 
     const workspaceFolders = vscode.workspace.workspaceFolders;
     if (!workspaceFolders || workspaceFolders.length === 0) {
-      view.webview.postMessage({ command: "aiToolsData", error: "Please open a workspace folder first." });
+      this._safePost({ command: "aiToolsData", error: "Please open a workspace folder first." });
       return;
     }
     const rootUri = workspaceFolders[0].uri;
@@ -366,27 +390,25 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
 
       const platform = getPlatformEntry(this._currentPlatform);
       if (!platform) {
-        view.webview.postMessage({ command: "aiToolsData", error: `Unknown platform: ${this._currentPlatform}` });
+        this._safePost({ command: "aiToolsData", error: `Unknown platform: ${this._currentPlatform}` });
         return;
       }
 
-      const { project, global: globalSet } = await readInstalledSkillDirNames(rootUri, platform, skills);
-      const inScope = this._currentScope === "project" ? project   : globalSet;
-      const inOther = this._currentScope === "project" ? globalSet : project;
-
       const covers = getPlatformCovers(platform, this._currentScope);
 
       const editor = detectEditor();
       const mcpFilePath = getMcpFilePath(editor);
-      const rootKey = editor === "vscode" ? "servers" : "mcpServers";
-      const configuredMcpSet = await readConfiguredMcpServerKeys(rootUri, mcpFilePath, rootKey);
 
-      const editorLabels: Record<string, string> = {
-        vscode: "VS Code", cursor: "Cursor", windsurf: "Windsurf", antigravity: "Antigravity",
-      };
-      const mcpEditorLabel = editorLabels[editor];
+      const [{ project, global: globalSet }, configuredMcpSet] = await Promise.all([
+        readInstalledSkillDirNames(rootUri, platform, skills),
+        readConfiguredMcpServerKeys(rootUri, mcpFilePath, getMcpRootKey(editor)),
+      ]);
+      const inScope = this._currentScope === "project" ? project : globalSet;
+      const inOther = this._currentScope === "project" ? globalSet : project;
+
+      const mcpEditorLabel = getEditorDisplayName(editor);
 
-      view.webview.postMessage({
+      this._safePost({
         command: "aiToolsData",
         platform: this._currentPlatform,
         scope: this._currentScope,
@@ -409,7 +431,7 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
         mcpEditorLabel,
       });
     } catch (err: any) {
-      view.webview.postMessage({ command: "aiToolsData", error: err.message ?? String(err) });
+      this._safePost({ command: "aiToolsData", error: err.message ?? String(err) });
     }
   }
 
@@ -424,7 +446,7 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
 
     const workspaceFolders = vscode.workspace.workspaceFolders;
     if (!workspaceFolders || workspaceFolders.length === 0) {
-      view.webview.postMessage({ command: "aiToolsResult", errors: ["No workspace folder open."] });
+      this._safePost({ command: "aiToolsResult", errors: ["No workspace folder open."] });
       return;
     }
     const rootUri = workspaceFolders[0].uri;
@@ -433,7 +455,7 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
     const platform = getPlatformEntry(platformId);
 
     if (!platform) {
-      view.webview.postMessage({ command: "aiToolsResult", errors: [`Unknown platform: ${platformId}`] });
+      this._safePost({ command: "aiToolsResult", errors: [`Unknown platform: ${platformId}`] });
       return;
     }
 
@@ -446,7 +468,7 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
         content = await fetchSkillContent(dirName);
       } catch (err: any) {
         errors.push(`${dirName}: ${err.message}`);
-        view.webview.postMessage({ command: "aiToolsProgress", item: dirName, status: "error" });
+        this._safePost({ command: "aiToolsProgress", item: dirName, status: "error" });
         continue;
       }
 
@@ -457,7 +479,7 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
       } catch (err: any) {
         errors.push(`${dirName}: ${err.message}`);
       }
-      view.webview.postMessage({
+      this._safePost({
         command: "aiToolsProgress",
         item: dirName,
         status: errors.length > errsBefore ? "error" : "done",
@@ -470,18 +492,16 @@ export class HomescreenViewProvider implements vscode.WebviewViewProvider {
       try {
         await installMcpServers(rootUri, editor, mcpServers, createdFiles);
         for (const key of mcpServers) {
-          view.webview.postMessage({ command: "aiToolsProgress", item: key, status: "done" });
+          this._safePost({ command: "aiToolsProgress", item: key, status: "done" });
         }
       } catch (err: any) {
         errors.push(`MCP: ${err.message}`);
         for (const key of mcpServers) {
-          view.webview.postMessage({ command: "aiToolsProgress", item: key, status: "error" });
+          this._safePost({ command: "aiToolsProgress", item: key, status: "error" });
         }
       }
     }
 
-    this._cachedSkills = undefined;
-    view.webview.postMessage({ command: "aiToolsResult", errors });
+    this._safePost({ command: "aiToolsResult", errors });
   }
 }
-
diff --git a/src/webview/icons.ts b/src/webview/icons.ts
index ba3f09a..09d3cfc 100644
--- a/src/webview/icons.ts
+++ b/src/webview/icons.ts
@@ -125,6 +125,24 @@ export const actionIcons = {
       `<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>`,
       size
     ),
+
+  lock: (size: IconSize = "md") =>
+    wrapSvg(
+      `<path d="M17 10h-1V7c0-2.21-1.79-4-4-4S8 4.79 8 7v3H7c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2zm-7-3c0-1.1.9-2 2-2s2 .9 2 2v3h-4V7zm7 13H7v-8h10v8z"/>`,
+      size
+    ),
+
+  home: (size: IconSize = "md") =>
+    wrapSvg(
+      `<path d="M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/>`,
+      size
+    ),
+
+  tune: (size: IconSize = "md") =>
+    wrapSvg(
+      `<path d="M4 6h8v2H4V6zm10 0h6v2h-6V6zm-4 5h10v2H10v-2zM4 11h4v2H4v-2zm12 5h4v2h-4v-2zM4 16h10v2H4v-2z"/><circle cx="13" cy="7" r="2"/><circle cx="9" cy="12" r="2"/><circle cx="15" cy="17" r="2"/>`,
+      size
+    ),
 };
 
 /**
diff --git a/src/webview/libraryView.ts b/src/webview/libraryView.ts
new file mode 100644
index 0000000..b8d3919
--- /dev/null
+++ b/src/webview/libraryView.ts
@@ -0,0 +1,474 @@
+import * as vscode from 'vscode';
+import { isPlaceholderConfig } from '../config/configUtils';
+import { CloudinaryService } from '../cloudinary/cloudinaryService';
+import {
+  ChildrenPage,
+  ClientAsset,
+  ResourceTypeFilter,
+  SortDirection,
+} from '../cloudinary/types';
+import { handleCloudinaryError } from '../utils/cloudinaryErrorHandler';
+import {
+  createWebviewDocument,
+  getScriptUri,
+  getStyleUri,
+} from './webviewUtils';
+import { actionIcons } from './icons';
+
+export class LibraryWebviewViewProvider implements vscode.WebviewViewProvider {
+  public static readonly viewType = 'cloudinaryMediaLibrary';
+
+  private _view: vscode.WebviewView | undefined;
+  private _viewState = {
+    folderPath: '',
+    searchQuery: null as string | null,
+    resourceTypeFilter: 'all' as ResourceTypeFilter,
+    sortDirection: 'desc' as SortDirection,
+  };
+  private _cache = new Map<string, ChildrenPage>();
+  private _prefetchingFolders = new Set<string>();
+
+  constructor(
+    private readonly _extensionUri: vscode.Uri,
+    private readonly _service: CloudinaryService,
+  ) {}
+
+  resolveWebviewView(view: vscode.WebviewView): void {
+    this._view = view;
+    view.onDidDispose(() => {
+      this._view = undefined;
+    });
+
+    view.webview.options = {
+      enableScripts: true,
+      localResourceRoots: [
+        vscode.Uri.joinPath(this._extensionUri, 'media'),
+        vscode.Uri.joinPath(this._extensionUri, 'resources'),
+      ],
+    };
+
+    const scriptUri = getScriptUri(view.webview, this._extensionUri, 'library.js');
+    const cssUri = getStyleUri(view.webview, this._extensionUri, 'library.css');
+    const logoUri = view.webview.asWebviewUri(
+      vscode.Uri.joinPath(this._extensionUri, 'resources', 'cloudinary_icon_blue.png')
+    );
+
+    const sel = (current: string, value: string): string =>
+      current === value ? ' selected' : '';
+    const rt = this._viewState.resourceTypeFilter;
+    const sd = this._viewState.sortDirection;
+
+    view.webview.html = createWebviewDocument({
+      title: 'Cloudinary Media Library',
+      webview: view.webview,
+      extensionUri: this._extensionUri,
+      bodyContent: `
+        <header class="lib-header">
+          <div class="lib-brand">
+            <span class="lib-brand__logo-wrap" aria-hidden="true">
+              <img class="lib-brand__logo" src="${logoUri}" alt="" />
+            </span>
+            <span class="lib-brand__name">Cloudinary</span>
+            <span class="lib-brand__env" id="lib-env" aria-label="Active cloud"></span>
+          </div>
+          <div id="lib-toolbar" class="lib-toolbar" role="toolbar" aria-label="Library actions">
+            <div class="lib-tb-group">
+              <button class="lib-tb-btn" data-action="showHomescreen" title="Home" aria-label="Home">${actionIcons.home('sm')}</button>
+              <button class="lib-tb-btn" data-action="refresh" title="Refresh" aria-label="Refresh">${actionIcons.refresh('sm')}</button>
+            </div>
+            <div class="lib-tb-group">
+              <button class="lib-tb-btn" data-action="openUploadWidget" title="Upload" aria-label="Upload">${actionIcons.upload('sm')}</button>
+            </div>
+            <div class="lib-tb-group lib-tb-group--utility">
+              <button class="lib-tb-btn" data-action="openGlobalConfig" title="Configuration" aria-label="Configuration">${actionIcons.settings('sm')}</button>
+            </div>
+          </div>
+          <div id="lib-filter" class="lib-filter" role="group" aria-label="Filter and sort">
+            <label class="lib-filter__group">
+              <span class="lib-filter__label">Type</span>
+              <select id="lib-filter-type" class="lib-filter__select" aria-label="Filter by resource type">
+                <option value="all"${sel(rt, 'all')}>All</option>
+                <option value="image"${sel(rt, 'image')}>Images</option>
+                <option value="video"${sel(rt, 'video')}>Videos</option>
+                <option value="raw"${sel(rt, 'raw')}>Raw</option>
+              </select>
+            </label>
+            <label class="lib-filter__group">
+              <span class="lib-filter__label">Sort</span>
+              <select id="lib-filter-sort" class="lib-filter__select" aria-label="Sort direction">
+                <option value="desc"${sel(sd, 'desc')}>Newest</option>
+                <option value="asc"${sel(sd, 'asc')}>Oldest</option>
+              </select>
+            </label>
+          </div>
+          <div id="lib-search" class="lib-search" role="search" aria-label="Search media library">
+            <div class="lib-search__wrap">
+              <svg class="lib-search__icon" width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.099zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
+              </svg>
+              <input
+                id="lib-search-input"
+                class="lib-search__input"
+                type="text"
+                placeholder="Search library…"
+                autocomplete="off"
+                spellcheck="false"
+                aria-label="Search media library"
+              />
+              <button id="lib-search-clear" class="lib-search__clear hidden" title="Clear search" aria-label="Clear search">✕</button>
+            </div>
+          </div>
+        </header>
+        <div id="lib-root" class="lib-root" role="tree" aria-label="Media library"></div>
+      `,
+      additionalStyles: [cssUri],
+      additionalScripts: [scriptUri],
+    });
+
+    view.webview.onDidReceiveMessage((message) => {
+      void this.handleMessage(message);
+    });
+  }
+
+  private async handleMessage(message: any): Promise<void> {
+    switch (message?.command) {
+      case 'ready':
+        this.post({
+          command: 'envChanged',
+          cloudName: this._service.cloudName || '',
+          folderMode: this._service.dynamicFolders ? 'dynamic' : 'fixed',
+          hasConfig: this.hasCredentials(),
+        });
+        await this.refreshCurrentView();
+        return;
+      case 'expandFolder':
+        await this.sendFolder(String(message.path || ''));
+        return;
+      case 'openAsset':
+        if (message.asset) {
+          const asset = message.asset as ClientAsset;
+          const filename =
+            asset.display_name ||
+            asset.public_id.split('/').pop() ||
+            asset.public_id;
+          void vscode.commands.executeCommand('cloudinary.openAsset', {
+            ...asset,
+            displayType: asset.resource_type,
+            filename,
+          });
+        }
+        return;
+      case 'runToolbar': {
+        const action = String(message.action || '');
+        const commandMap: Record<string, string> = {
+          refresh: 'cloudinary.refresh',
+          openUploadWidget: 'cloudinary.openUploadWidget',
+          showHomescreen: 'cloudinary.showHomescreen',
+          openGlobalConfig: 'cloudinary.openGlobalConfig',
+        };
+        const command = commandMap[action];
+        if (command) {
+          void vscode.commands.executeCommand(command);
+        }
+        return;
+      }
+      case 'contextAction': {
+        const action = String(message.action || '');
+        if (
+          action === 'copyUrl' ||
+          action === 'copyPublicId' ||
+          action === 'copyOptimizedUrl'
+        ) {
+          void vscode.commands.executeCommand(`cloudinary.${action}`, {
+            data: message.data,
+          });
+        } else if (action === 'uploadToFolder') {
+          void vscode.commands.executeCommand('cloudinary.uploadToFolder', {
+            label: message.data?.name || '',
+            data: message.data,
+          });
+        }
+        return;
+      }
+      case 'clearSearch':
+        await this.setSearch(null);
+        return;
+      case 'searchAssets': {
+        const query = typeof message.query === 'string' ? message.query : '';
+        await this.setSearch(query);
+        return;
+      }
+      case 'setView': {
+        await this.applyView({
+          resourceTypeFilter: message.resourceTypeFilter,
+          sortDirection: message.sortDirection,
+        });
+        return;
+      }
+      default:
+        return;
+    }
+  }
+
+  async setSearch(query: string | null): Promise<void> {
+    this._viewState.searchQuery = query && query.trim().length > 0
+      ? query.trim()
+      : null;
+    try {
+      await this.refreshCurrentView();
+    } catch (err: any) {
+      handleCloudinaryError('Failed to search library', err);
+      this.post({
+        command: 'error',
+        message: err?.message || 'Failed to search library',
+      });
+    }
+  }
+
+  async applyView(opts: {
+    resourceTypeFilter?: ResourceTypeFilter;
+    sortDirection?: SortDirection;
+  }): Promise<void> {
+    if (opts.resourceTypeFilter) {
+      this._viewState.resourceTypeFilter = opts.resourceTypeFilter;
+    }
+    if (opts.sortDirection) {
+      this._viewState.sortDirection = opts.sortDirection;
+    }
+
+    this._cache.clear();
+    this.post({
+      command: 'viewStateChanged',
+      resourceTypeFilter: this._viewState.resourceTypeFilter,
+      sortDirection: this._viewState.sortDirection,
+    });
+
+    try {
+      await this.refreshCurrentView();
+    } catch (err: any) {
+      handleCloudinaryError('Failed to apply library view options', err);
+      this.post({
+        command: 'error',
+        message: err?.message || 'Failed to refresh library view',
+      });
+    }
+  }
+
+  async refresh(): Promise<void> {
+    this._cache.clear();
+    try {
+      await this.refreshCurrentView();
+    } catch (err: any) {
+      handleCloudinaryError('Failed to refresh library', err);
+      this.post({
+        command: 'error',
+        message: err?.message || 'Failed to refresh library',
+      });
+    }
+  }
+
+  async envChanged(): Promise<void> {
+    this._cache.clear();
+    this._viewState = {
+      folderPath: '',
+      searchQuery: null,
+      resourceTypeFilter: 'all',
+      sortDirection: 'desc',
+    };
+    this.post({
+      command: 'envChanged',
+      cloudName: this._service.cloudName || '',
+      folderMode: this._service.dynamicFolders ? 'dynamic' : 'fixed',
+      hasConfig: this.hasCredentials(),
+    });
+    this.post({
+      command: 'viewStateChanged',
+      resourceTypeFilter: this._viewState.resourceTypeFilter,
+      sortDirection: this._viewState.sortDirection,
+    });
+    await this.sendRoot();
+  }
+
+  private async sendRoot(): Promise<void> {
+    if (!this.hasCredentials()) {
+      return;
+    }
+
+    const page = await this.loadFolder('');
+    this.post({
+      command: 'rootData',
+      folders: page.folders,
+      assets: page.assets,
+      hasMore: !!page.nextCursor,
+    });
+
+    if (page.nextCursor) {
+      this.startPrefetch('', page.nextCursor);
+    }
+  }
+
+  private async sendSearch(query: string): Promise<void> {
+    if (!this.hasCredentials()) {
+      return;
+    }
+
+    try {
+      const result = await this._service.searchAssets(query, {
+        resourceTypeFilter: this._viewState.resourceTypeFilter,
+        sortDirection: this._viewState.sortDirection,
+      });
+
+      this.post({
+        command: 'searchData',
+        query,
+        assets: result.assets,
+        hasMore: !!result.nextCursor,
+      });
+
+      if (result.nextCursor) {
+        this.startSearchPrefetch(query, result.nextCursor);
+      }
+    } catch (err: any) {
+      handleCloudinaryError('Failed to search library', err);
+      this.post({
+        command: 'error',
+        message: err?.message || 'Failed to search library',
+      });
+    }
+  }
+
+  private async sendFolder(path: string): Promise<void> {
+    if (!this.hasCredentials()) {
+      return;
+    }
+
+    const page = await this.loadFolder(path);
+    this.post({
+      command: 'folderData',
+      path,
+      folders: page.folders,
+      assets: page.assets,
+      hasMore: !!page.nextCursor,
+    });
+
+    if (page.nextCursor) {
+      this.startPrefetch(path, page.nextCursor);
+    }
+  }
+
+  private hasCredentials(): boolean {
+    const service = this._service;
+    if (!service.cloudName || !service.apiKey || !service.apiSecret) {
+      return false;
+    }
+
+    if (isPlaceholderConfig(service.cloudName, service.apiKey, service.apiSecret)) {
+      return false;
+    }
+
+    return true;
+  }
+
+  private async loadFolder(path: string): Promise<ChildrenPage> {
+    const cached = this._cache.get(path);
+    if (cached) {
+      return cached;
+    }
+
+    try {
+      const page = await this._service.fetchChildren(path, {
+        resourceTypeFilter: this._viewState.resourceTypeFilter,
+        sortDirection: this._viewState.sortDirection,
+      });
+      this._cache.set(path, page);
+      return page;
+    } catch (err: any) {
+      handleCloudinaryError('Failed to fetch folders or assets', err);
+      this.post({
+        command: 'error',
+        message: err?.message || 'Failed to load library',
+      });
+      return { folders: [], assets: [], nextCursor: null };
+    }
+  }
+
+  private async refreshCurrentView(): Promise<void> {
+    if (this._viewState.searchQuery) {
+      await this.sendSearch(this._viewState.searchQuery);
+      return;
+    }
+
+    await this.sendRoot();
+  }
+
+  private startPrefetch(path: string, startCursor: string): void {
+    if (this._prefetchingFolders.has(path)) {
+      return;
+    }
+
+    this._prefetchingFolders.add(path);
+
+    this._service.prefetchRemaining(
+      path,
+      startCursor,
+      {
+        resourceTypeFilter: this._viewState.resourceTypeFilter,
+        sortDirection: this._viewState.sortDirection,
+      },
+      (assets, hasMore) => {
+        const entry = this._cache.get(path);
+        if (entry) {
+          entry.assets = entry.assets.concat(assets);
+          entry.nextCursor = hasMore ? entry.nextCursor : null;
+        }
+
+        this.post({ command: 'assetsAppended', path, assets, hasMore });
+      }
+    )
+      .catch((err) => {
+        console.error('Prefetch error:', err);
+      })
+      .finally(() => {
+        this._prefetchingFolders.delete(path);
+      });
+  }
+
+  private startSearchPrefetch(query: string, startCursor: string): void {
+    const key = `search:${query}`;
+    if (this._prefetchingFolders.has(key)) {
+      return;
+    }
+
+    this._prefetchingFolders.add(key);
+
+    this._service.prefetchSearchResults(
+      query,
+      startCursor,
+      {
+        resourceTypeFilter: this._viewState.resourceTypeFilter,
+        sortDirection: this._viewState.sortDirection,
+      },
+      (assets, hasMore) => {
+        this.post({ command: 'searchAppended', assets, hasMore });
+      }
+    )
+      .catch((err) => {
+        console.error(err);
+      })
+      .finally(() => {
+        this._prefetchingFolders.delete(key);
+      });
+  }
+
+  private post(message: unknown): void {
+    const view = this._view;
+    if (!view) {
+      return;
+    }
+    try {
+      view.webview.postMessage(message);
+    } catch {
+      // Webview disposed between checks; safe to drop.
+    }
+  }
+}
diff --git a/src/webview/scripts/welcomeScreen.ts b/src/webview/scripts/welcomeScreen.ts
index 30994c2..bb3b40c 100644
--- a/src/webview/scripts/welcomeScreen.ts
+++ b/src/webview/scripts/welcomeScreen.ts
@@ -16,8 +16,8 @@ export function getWelcomeScreenScript(): string {
       vscode.postMessage({ command: 'openExternal', data: url });
     }
 
-    function focusTreeView() {
-      vscode.postMessage({ command: 'focusTreeView' });
+    function focusDashboard() {
+      vscode.postMessage({ command: 'focusDashboard' });
     }
 
     function getConfigExample() {