diff --git a/.gitignore b/.gitignore
index 45ecfaf8..6f1f542d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -69,5 +69,6 @@ apps/web/.codex
 apps/desktop/src-tauri/target/debug/*
 apps/desktop/src-tauri/target/release/
 .claude
+/docs
 
-
+.superpowers
\ No newline at end of file
diff --git a/apps/backend/app/api/routes/api_client/api.py b/apps/backend/app/api/routes/api_client/api.py
index 3684aa21..d6ce504a 100644
--- a/apps/backend/app/api/routes/api_client/api.py
+++ b/apps/backend/app/api/routes/api_client/api.py
@@ -13,9 +13,11 @@
     ApiClientHistoryOut,
     HISTORY_MAX_ITEMS,
 )
+from app.api.routes.api_client import collections_delta
 
 
 router = APIRouter(prefix="/api-client", tags=["api-client"])
+router.include_router(collections_delta.router)
 
 
 @router.get("/collections", response_model=list[ApiClientCollectionOut], summary="List API client collections")
diff --git a/apps/backend/app/api/routes/api_client/collections_delta.py b/apps/backend/app/api/routes/api_client/collections_delta.py
new file mode 100644
index 00000000..acacf310
--- /dev/null
+++ b/apps/backend/app/api/routes/api_client/collections_delta.py
@@ -0,0 +1,280 @@
+"""Service + route for the collection-items delta endpoint.
+
+POST /api-client/collections/{collection_id}/items:apply-delta
+
+Applies a list of ops (add / update / delete / move) to a collection's items
+tree in-memory, then persists the result in a single atomic update_one call.
+Cache is invalidated via bump_version exactly as the existing patch_collection
+service does.
+"""
+from __future__ import annotations
+
+from typing import Any
+
+from bson import ObjectId
+from bson.errors import InvalidId
+from fastapi import APIRouter, Depends, HTTPException, status
+from pymongo import ReturnDocument
+from pymongo.errors import PyMongoError
+
+from app.api.routes.auth.services import get_current_uid
+from app.api.routes.api_client.schema import (
+    AddItemOp,
+    ApplyDeltaRequest,
+    ApplyDeltaResponse,
+    ApiClientCollectionOut,
+    DeleteItemOp,
+    MoveItemOp,
+    Op,
+    UpdateItemOp,
+)
+from app.core.cache import bump_version
+from app.database import db_manager
+from app.utils.collection_name import API_CLIENT_COLLECTIONS
+
+router = APIRouter()
+
+
+def _parse_oid(raw: str, *, kind: str) -> ObjectId:
+    try:
+        return ObjectId(raw)
+    except InvalidId as exc:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail=f"Invalid {kind} id.",
+        ) from exc
+
+
+def _collection_to_out(doc: dict[str, Any]) -> ApiClientCollectionOut:
+    oid = doc.get("_id")
+    return ApiClientCollectionOut(
+        id=str(oid) if oid is not None else "",
+        name=doc.get("name", ""),
+        items=list(doc.get("items") or []),
+    )
+
+
+# ── In-memory tree walkers ────────────────────────────────────────────────────
+
+def _apply_add(
+    items: list[dict[str, Any]],
+    parent_id: str,
+    collection_id: str,
+    new_item: dict[str, Any],
+    position: int | None,
+) -> list[dict[str, Any]]:
+    """Insert new_item under parent_id.  parent_id may be the collection root."""
+    if parent_id == collection_id:
+        # Insert at root level
+        if position is None or position >= len(items):
+            return items + [new_item]
+        result = list(items)
+        result.insert(position, new_item)
+        return result
+
+    return _add_in_children(items, parent_id, new_item, position)
+
+
+def _add_in_children(
+    items: list[dict[str, Any]],
+    parent_id: str,
+    new_item: dict[str, Any],
+    position: int | None,
+) -> list[dict[str, Any]]:
+    result = []
+    for item in items:
+        if item.get("id") == parent_id and item.get("type") == "folder":
+            children = list(item.get("items") or [])
+            if position is None or position >= len(children):
+                children = children + [new_item]
+            else:
+                children.insert(position, new_item)
+            result.append({**item, "items": children})
+        elif item.get("type") == "folder":
+            result.append({**item, "items": _add_in_children(item.get("items") or [], parent_id, new_item, position)})
+        else:
+            result.append(item)
+    return result
+
+
+def _apply_update(
+    items: list[dict[str, Any]],
+    item_id: str,
+    patch: dict[str, Any],
+) -> tuple[list[dict[str, Any]], bool]:
+    """Recursively apply patch to the item with item_id. Returns (new_items, found)."""
+    result = []
+    found = False
+    for item in items:
+        if item.get("id") == item_id:
+            result.append({**item, **patch})
+            found = True
+        elif item.get("type") == "folder":
+            new_children, child_found = _apply_update(item.get("items") or [], item_id, patch)
+            result.append({**item, "items": new_children})
+            if child_found:
+                found = True
+        else:
+            result.append(item)
+    return result, found
+
+
+def _apply_delete(
+    items: list[dict[str, Any]],
+    item_id: str,
+) -> tuple[list[dict[str, Any]], bool]:
+    """Recursively remove item_id. Returns (new_items, found)."""
+    new_items = []
+    found = False
+    for item in items:
+        if item.get("id") == item_id:
+            found = True
+            # skip (delete)
+        elif item.get("type") == "folder":
+            new_children, child_found = _apply_delete(item.get("items") or [], item_id)
+            new_items.append({**item, "items": new_children})
+            if child_found:
+                found = True
+        else:
+            new_items.append(item)
+    return new_items, found
+
+
+def _extract_item(
+    items: list[dict[str, Any]],
+    item_id: str,
+) -> tuple[list[dict[str, Any]], dict[str, Any] | None]:
+    """Remove and return item_id from the tree."""
+    new_items = []
+    extracted: dict[str, Any] | None = None
+    for item in items:
+        if item.get("id") == item_id:
+            extracted = item
+        elif item.get("type") == "folder":
+            new_children, child_extracted = _extract_item(item.get("items") or [], item_id)
+            new_items.append({**item, "items": new_children})
+            if child_extracted is not None:
+                extracted = child_extracted
+        else:
+            new_items.append(item)
+    return new_items, extracted
+
+
+def _id_exists_in_tree(items: list[dict[str, Any]], node_id: str) -> bool:
+    """Return True if node_id appears anywhere in the tree (any level)."""
+    for item in items:
+        if item.get("id") == node_id:
+            return True
+        if item.get("type") == "folder":
+            if _id_exists_in_tree(item.get("items") or [], node_id):
+                return True
+    return False
+
+
+def _apply_move(
+    items: list[dict[str, Any]],
+    item_id: str,
+    new_parent_id: str,
+    new_index: int,
+    collection_id: str,
+) -> tuple[list[dict[str, Any]], bool]:
+    """Move item_id to new_parent_id at new_index. Returns (new_items, success)."""
+    # Validate that new_parent_id exists (root or a folder in the tree).
+    if new_parent_id != collection_id and not _id_exists_in_tree(items, new_parent_id):
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="move: new_parent_id not found",
+        )
+
+    # Step 1: extract the item
+    items_without, target = _extract_item(items, item_id)
+    if target is None:
+        return items, False
+
+    # Step 2: insert at new parent
+    new_items = _apply_add(items_without, new_parent_id, collection_id, target, new_index)
+    return new_items, True
+
+
+# ── Service ───────────────────────────────────────────────────────────────────
+
+async def apply_collection_delta(
+    uid: str,
+    collection_id: str,
+    ops: list[Op],
+) -> ApiClientCollectionOut:
+    oid = _parse_oid(collection_id, kind="collection")
+
+    # Fetch + ownership check BEFORE any mutation
+    doc = await db_manager.find_one(API_CLIENT_COLLECTIONS, {"_id": oid, "created_by": uid})
+    if not doc:
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Collection not found.")
+
+    items: list[dict[str, Any]] = list(doc.get("items") or [])
+
+    # Apply all ops in-memory (atomic within a single request)
+    for op in ops:
+        if isinstance(op, AddItemOp):
+            items = _apply_add(items, op.parent_id, collection_id, op.item, op.position)
+
+        elif isinstance(op, UpdateItemOp):
+            items, found = _apply_update(items, op.item_id, op.patch)
+            if not found:
+                raise HTTPException(
+                    status_code=status.HTTP_404_NOT_FOUND,
+                    detail=f"Item {op.item_id!r} not found.",
+                )
+
+        elif isinstance(op, DeleteItemOp):
+            items, found = _apply_delete(items, op.item_id)
+            if not found:
+                raise HTTPException(
+                    status_code=status.HTTP_404_NOT_FOUND,
+                    detail=f"Item {op.item_id!r} not found.",
+                )
+
+        elif isinstance(op, MoveItemOp):
+            items, ok = _apply_move(items, op.item_id, op.new_parent_id, op.new_index, collection_id)
+            if not ok:
+                raise HTTPException(
+                    status_code=status.HTTP_404_NOT_FOUND,
+                    detail=f"Item {op.item_id!r} not found.",
+                )
+
+    # Single atomic update
+    try:
+        updated_doc = await db_manager.find_one_and_update(
+            API_CLIENT_COLLECTIONS,
+            {"_id": oid, "created_by": uid},
+            {"$set": {"items": items}},
+            return_document=ReturnDocument.AFTER,
+        )
+    except PyMongoError as exc:
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="Failed to update collection.",
+        ) from exc
+
+    if not updated_doc:
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Collection not found.")
+
+    # Invalidate cache (same namespace as patch_collection / delete_collection)
+    await bump_version(ns="api_client", uid=uid)
+
+    return _collection_to_out(updated_doc)
+
+
+# ── Route ─────────────────────────────────────────────────────────────────────
+
+@router.post(
+    "/collections/{collection_id}/items:apply-delta",
+    response_model=ApplyDeltaResponse,
+    summary="Apply delta ops to a collection's items tree",
+)
+async def apply_delta(
+    collection_id: str,
+    body: ApplyDeltaRequest,
+    uid: str = Depends(get_current_uid),
+) -> ApplyDeltaResponse:
+    collection = await apply_collection_delta(uid, collection_id, body.ops)
+    return ApplyDeltaResponse(collection=collection)
diff --git a/apps/backend/app/api/routes/api_client/schema.py b/apps/backend/app/api/routes/api_client/schema.py
index d609d84c..58f383a1 100644
--- a/apps/backend/app/api/routes/api_client/schema.py
+++ b/apps/backend/app/api/routes/api_client/schema.py
@@ -1,4 +1,4 @@
-from typing import Any, Optional
+from typing import Annotated, Any, Literal, Optional, Union
 
 from pydantic import BaseModel, ConfigDict, Field
 
@@ -50,6 +50,47 @@ class ApiClientEnvironmentOut(ApiClientEnvironmentBase):
 HISTORY_MAX_ITEMS = 100
 
 
+# ── Delta ops ────────────────────────────────────────────────────────────────
+
+class AddItemOp(BaseModel):
+    type: Literal["add"]
+    parent_id: str
+    item: dict[str, Any]
+    position: Optional[int] = None
+
+
+class UpdateItemOp(BaseModel):
+    type: Literal["update"]
+    item_id: str
+    patch: dict[str, Any]
+
+
+class DeleteItemOp(BaseModel):
+    type: Literal["delete"]
+    item_id: str
+
+
+class MoveItemOp(BaseModel):
+    type: Literal["move"]
+    item_id: str
+    new_parent_id: str
+    new_index: int
+
+
+Op = Annotated[
+    Union[AddItemOp, UpdateItemOp, DeleteItemOp, MoveItemOp],
+    Field(discriminator="type"),
+]
+
+
+class ApplyDeltaRequest(BaseModel):
+    ops: list[Op]
+
+
+class ApplyDeltaResponse(BaseModel):
+    collection: ApiClientCollectionOut
+
+
 class ApiClientHistoryCreate(BaseModel):
     """One sent request snapshot (matches web HistoryRequest minus id)."""
 
diff --git a/apps/backend/tests/api/routes/api_client/__init__.py b/apps/backend/tests/api/routes/api_client/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/apps/backend/tests/api/routes/api_client/test_collections_delta.py b/apps/backend/tests/api/routes/api_client/test_collections_delta.py
new file mode 100644
index 00000000..bb6472be
--- /dev/null
+++ b/apps/backend/tests/api/routes/api_client/test_collections_delta.py
@@ -0,0 +1,249 @@
+"""Tests for POST /api-client/collections/{id}/items:apply-delta.
+
+Auth pattern: override get_current_uid via FastAPI dependency_overrides
+(same pattern used in test_auth_memo.py).  MongoDB is monkeypatched in-process
+so no real DB is needed.
+"""
+from __future__ import annotations
+
+import copy
+from typing import Any
+from unittest.mock import AsyncMock, MagicMock
+
+import pytest
+from bson import ObjectId
+from httpx import ASGITransport, AsyncClient
+
+from app.api.routes.auth.services import get_current_uid
+from app.main import app
+
+# Fixed IDs used throughout
+OWNER_UID = "test-owner-uid"
+OTHER_UID = "other-uid"
+COLLECTION_OID = ObjectId()
+COLLECTION_ID = str(COLLECTION_OID)
+
+FOLDER_ID = "folder-1"
+REQUEST_ID = "request-1"
+
+BASE_COLLECTION: dict[str, Any] = {
+    "_id": COLLECTION_OID,
+    "created_by": OWNER_UID,
+    "name": "My Collection",
+    "items": [
+        {
+            "id": FOLDER_ID,
+            "name": "Folder 1",
+            "type": "folder",
+            "items": [
+                {
+                    "id": REQUEST_ID,
+                    "name": "Existing Request",
+                    "type": "request",
+                    "method": "GET",
+                    "url": "https://existing",
+                    "params": [],
+                    "headers": [],
+                    "body": {"type": "none", "content": "", "formData": [], "urlEncoded": []},
+                    "auth": {"type": "none"},
+                }
+            ],
+            "isOpen": True,
+        }
+    ],
+}
+
+
+def _make_client(uid: str) -> AsyncClient:
+    """Return an AsyncClient that authenticates as uid."""
+    app.dependency_overrides[get_current_uid] = lambda: uid
+    return AsyncClient(transport=ASGITransport(app=app), base_url="http://test")
+
+
+def _mock_find_one(collection_doc: dict | None):
+    """Monkeypatch db_manager.find_one to return collection_doc."""
+    async def _find_one(collection_name, query, projection=None):
+        if collection_doc is None:
+            return None
+        # Honour ownership filter
+        if query.get("created_by") != collection_doc.get("created_by"):
+            return None
+        return copy.deepcopy(collection_doc)
+
+    return _find_one
+
+
+def _mock_find_one_and_update(updated_doc: dict | None):
+    """Monkeypatch db_manager.find_one_and_update to return updated_doc.
+
+    The inner function stores the most-recent ``update_query`` on itself so
+    tests can inspect the ``$set`` payload without resorting to AsyncMock.
+    """
+    async def _find_one_and_update(collection_name, query, update_query, return_document=False):
+        _find_one_and_update.last_update_query = update_query  # type: ignore[attr-defined]
+        if updated_doc is None:
+            return None
+        return copy.deepcopy(updated_doc)
+
+    _find_one_and_update.last_update_query = None  # type: ignore[attr-defined]
+    return _find_one_and_update
+
+
+@pytest.fixture(autouse=True)
+def cleanup_overrides():
+    yield
+    app.dependency_overrides.pop(get_current_uid, None)
+
+
+# ── Test: add op inserts a new item under parent_id ──────────────────────────
+
+@pytest.mark.asyncio
+async def test_apply_delta_adds_item(monkeypatch):
+    new_item = {
+        "id": "new-req-1",
+        "name": "New Request",
+        "type": "request",
+        "method": "POST",
+        "url": "https://new",
+        "params": [],
+        "headers": [],
+        "body": {"type": "none", "content": "", "formData": [], "urlEncoded": []},
+        "auth": {"type": "none"},
+    }
+
+    # After the update, the collection has the new item under the folder
+    updated_collection = copy.deepcopy(BASE_COLLECTION)
+    updated_collection["items"][0]["items"].append(new_item)
+
+    mock_update = _mock_find_one_and_update(updated_collection)
+    monkeypatch.setattr("app.api.routes.api_client.collections_delta.db_manager.find_one", _mock_find_one(BASE_COLLECTION))
+    monkeypatch.setattr(
+        "app.api.routes.api_client.collections_delta.db_manager.find_one_and_update",
+        mock_update,
+    )
+    monkeypatch.setattr("app.api.routes.api_client.collections_delta.bump_version", AsyncMock())
+
+    async with _make_client(OWNER_UID) as ac:
+        resp = await ac.post(
+            f"/api/v1/api-client/collections/{COLLECTION_ID}/items:apply-delta",
+            json={"ops": [{"type": "add", "parent_id": FOLDER_ID, "item": new_item}]},
+        )
+
+    assert resp.status_code == 200, resp.text
+    body = resp.json()
+    assert "collection" in body
+    folder = next(i for i in body["collection"]["items"] if i["id"] == FOLDER_ID)
+    item_ids = {it["id"] for it in folder["items"]}
+    assert "new-req-1" in item_ids
+
+    # Assert the $set payload sent to MongoDB contains the new item
+    update_query = mock_update.last_update_query
+    assert update_query is not None
+    persisted_items = update_query["$set"]["items"]
+    persisted_folder = next(i for i in persisted_items if i["id"] == FOLDER_ID)
+    persisted_ids = {it["id"] for it in persisted_folder["items"]}
+    assert "new-req-1" in persisted_ids
+
+
+# ── Test: delete op removes an item ──────────────────────────────────────────
+
+@pytest.mark.asyncio
+async def test_apply_delta_deletes_item(monkeypatch):
+    # After delete, folder has no children
+    updated_collection = copy.deepcopy(BASE_COLLECTION)
+    updated_collection["items"][0]["items"] = []
+
+    mock_update = _mock_find_one_and_update(updated_collection)
+    monkeypatch.setattr("app.api.routes.api_client.collections_delta.db_manager.find_one", _mock_find_one(BASE_COLLECTION))
+    monkeypatch.setattr(
+        "app.api.routes.api_client.collections_delta.db_manager.find_one_and_update",
+        mock_update,
+    )
+    monkeypatch.setattr("app.api.routes.api_client.collections_delta.bump_version", AsyncMock())
+
+    async with _make_client(OWNER_UID) as ac:
+        resp = await ac.post(
+            f"/api/v1/api-client/collections/{COLLECTION_ID}/items:apply-delta",
+            json={"ops": [{"type": "delete", "item_id": REQUEST_ID}]},
+        )
+
+    assert resp.status_code == 200, resp.text
+    body = resp.json()
+    folder = next(i for i in body["collection"]["items"] if i["id"] == FOLDER_ID)
+    assert all(i["id"] != REQUEST_ID for i in folder["items"])
+
+    # Assert the $set payload sent to MongoDB has the item removed
+    update_query = mock_update.last_update_query
+    assert update_query is not None
+    persisted_items = update_query["$set"]["items"]
+    persisted_folder = next(i for i in persisted_items if i["id"] == FOLDER_ID)
+    assert all(it["id"] != REQUEST_ID for it in persisted_folder["items"])
+
+
+# ── Test: update op patches fields ───────────────────────────────────────────
+
+@pytest.mark.asyncio
+async def test_apply_delta_updates_item(monkeypatch):
+    updated_collection = copy.deepcopy(BASE_COLLECTION)
+    # Patch the nested request's name
+    updated_collection["items"][0]["items"][0]["name"] = "Renamed Request"
+    updated_collection["items"][0]["items"][0]["url"] = "https://updated"
+
+    monkeypatch.setattr("app.api.routes.api_client.collections_delta.db_manager.find_one", _mock_find_one(BASE_COLLECTION))
+    monkeypatch.setattr(
+        "app.api.routes.api_client.collections_delta.db_manager.find_one_and_update",
+        _mock_find_one_and_update(updated_collection),
+    )
+    monkeypatch.setattr("app.api.routes.api_client.collections_delta.bump_version", AsyncMock())
+
+    async with _make_client(OWNER_UID) as ac:
+        resp = await ac.post(
+            f"/api/v1/api-client/collections/{COLLECTION_ID}/items:apply-delta",
+            json={"ops": [{"type": "update", "item_id": REQUEST_ID, "patch": {"name": "Renamed Request", "url": "https://updated"}}]},
+        )
+
+    assert resp.status_code == 200, resp.text
+    body = resp.json()
+    folder = next(i for i in body["collection"]["items"] if i["id"] == FOLDER_ID)
+    req = next(i for i in folder["items"] if i["id"] == REQUEST_ID)
+    assert req["name"] == "Renamed Request"
+    assert req["url"] == "https://updated"
+
+
+# ── Test: unauthorized user (different uid) gets 404 ─────────────────────────
+
+@pytest.mark.asyncio
+async def test_apply_delta_wrong_uid_gets_404(monkeypatch):
+    # find_one returns None for OTHER_UID (ownership filter fails)
+    monkeypatch.setattr("app.api.routes.api_client.collections_delta.db_manager.find_one", _mock_find_one(BASE_COLLECTION))
+    # bump_version should NOT be called
+    bump_mock = AsyncMock()
+    monkeypatch.setattr("app.api.routes.api_client.collections_delta.bump_version", bump_mock)
+
+    async with _make_client(OTHER_UID) as ac:
+        resp = await ac.post(
+            f"/api/v1/api-client/collections/{COLLECTION_ID}/items:apply-delta",
+            json={"ops": [{"type": "delete", "item_id": REQUEST_ID}]},
+        )
+
+    assert resp.status_code == 404
+    bump_mock.assert_not_called()
+
+
+# ── Test: move op with unknown new_parent_id returns 400 ─────────────────────
+
+@pytest.mark.asyncio
+async def test_apply_delta_move_unknown_parent_returns_400(monkeypatch):
+    monkeypatch.setattr("app.api.routes.api_client.collections_delta.db_manager.find_one", _mock_find_one(BASE_COLLECTION))
+    bump_mock = AsyncMock()
+    monkeypatch.setattr("app.api.routes.api_client.collections_delta.bump_version", bump_mock)
+
+    async with _make_client(OWNER_UID) as ac:
+        resp = await ac.post(
+            f"/api/v1/api-client/collections/{COLLECTION_ID}/items:apply-delta",
+            json={"ops": [{"type": "move", "item_id": REQUEST_ID, "new_parent_id": "does-not-exist", "new_index": 0}]},
+        )
+
+    assert resp.status_code == 400, resp.text
+    assert "new_parent_id" in resp.json().get("detail", "")
+    bump_mock.assert_not_called()
diff --git a/apps/web/messages/af.json b/apps/web/messages/af.json
index 9309f407..010ef05d 100644
--- a/apps/web/messages/af.json
+++ b/apps/web/messages/af.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Versoek het misluk: {message}",
       "curlPasted": "cURL geplak en suksesvol ontleed",
       "responseCopied": "Antwoord na knipbord gekopieer",
-      "codeCopied": "Kode na knipbord gekopieer"
+      "codeCopied": "Kode na knipbord gekopieer",
+      "copyFailed": "Failed to copy to clipboard"
     },
     "layout": {
       "collections": "Versamelings",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Metode",
       "urlPlaceholder": "https://api.example.com/v1/...",
       "sending": "Besig om te stuur...",
-      "send": "Stuur"
+      "send": "Stuur",
+      "invalidJsonBodyHelp": "Cannot send: the JSON body is invalid"
     },
     "requestTabs": {
       "params": "Params",
@@ -1528,7 +1530,9 @@
       "previewTab": "Voorskou",
       "headersTab": "Koptekste",
       "binaryRawView": "Binêre data kan nie in rouaansig vertoon word nie.",
-      "errorStatusLabel": "Fout"
+      "errorStatusLabel": "Fout",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "Nuwe oortjie"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Vouer",
       "placeholderFolder": "Kies 'n vouer",
       "save": "Stoor"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/ar.json b/apps/web/messages/ar.json
index 2d52c645..13d6c111 100644
--- a/apps/web/messages/ar.json
+++ b/apps/web/messages/ar.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "فشل الطلب: {message}",
       "curlPasted": "تم لصق cURL وتحليله بنجاح",
       "responseCopied": "تم نسخ الاستجابة",
-      "codeCopied": "تم نسخ الكود"
+      "codeCopied": "تم نسخ الكود",
+      "copyFailed": "فشل نسخ المحتوى إلى الحافظة"
     },
     "layout": {
       "collections": "المجموعات",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "الطريقة",
       "urlPlaceholder": "https://api.example.com/v1/...",
       "sending": "جاري الإرسال...",
-      "send": "إرسال"
+      "send": "إرسال",
+      "invalidJsonBodyHelp": "لا يمكن الإرسال: نص JSON غير صالح"
     },
     "requestTabs": {
       "params": "معاملات",
@@ -1528,7 +1530,9 @@
       "previewTab": "معاينة",
       "headersTab": "الرؤوس",
       "binaryRawView": "لا يمكن عرض البيانات الثنائية في العرض الخام.",
-      "errorStatusLabel": "خطأ"
+      "errorStatusLabel": "خطأ",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "تبويب جديد"
@@ -1613,6 +1617,21 @@
       "labelFolder": "المجلد",
       "placeholderFolder": "اختر مجلداً",
       "save": "حفظ"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/ca.json b/apps/web/messages/ca.json
index 7610b53b..f1cbba47 100644
--- a/apps/web/messages/ca.json
+++ b/apps/web/messages/ca.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Petició fallida: {message}",
       "curlPasted": "cURL enganxat i analitzat correctament",
       "responseCopied": "Resposta copiada al porta-retalls",
-      "codeCopied": "Codi copiat al porta-retalls"
+      "codeCopied": "Codi copiat al porta-retalls",
+      "copyFailed": "No s'ha pogut copiar al porta-retalls"
     },
     "layout": {
       "collections": "Col·leccions",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Mètode",
       "urlPlaceholder": "https://api.exemple.com/v1/...",
       "sending": "S'està enviant...",
-      "send": "Envia"
+      "send": "Envia",
+      "invalidJsonBodyHelp": "No es pot enviar: el cos JSON no és vàlid"
     },
     "requestTabs": {
       "params": "Params",
@@ -1528,7 +1530,9 @@
       "previewTab": "Vista prèvia",
       "headersTab": "Capçaleres",
       "binaryRawView": "Les dades binàries no es poden mostrar en vista en brut.",
-      "errorStatusLabel": "Error"
+      "errorStatusLabel": "Error",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "Pestanya nova"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Carpeta",
       "placeholderFolder": "Selecciona una carpeta",
       "save": "Desa"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/cs.json b/apps/web/messages/cs.json
index fae1d684..bf3d722f 100644
--- a/apps/web/messages/cs.json
+++ b/apps/web/messages/cs.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Požadavek selhal: {message}",
       "curlPasted": "cURL vložen a zpracován",
       "responseCopied": "Odpověď zkopírována",
-      "codeCopied": "Kód zkopírován"
+      "codeCopied": "Kód zkopírován",
+      "copyFailed": "Nepodařilo se zkopírovat do schránky"
     },
     "layout": {
       "collections": "Kolekce",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Metoda",
       "urlPlaceholder": "https://api.example.com/v1/...",
       "sending": "Odesílání...",
-      "send": "Odeslat"
+      "send": "Odeslat",
+      "invalidJsonBodyHelp": "Nelze odeslat: tělo JSON není platné"
     },
     "requestTabs": {
       "params": "Parametry",
@@ -1528,7 +1530,9 @@
       "previewTab": "Náhled",
       "headersTab": "Hlavičky",
       "binaryRawView": "Binární data nelze zobrazit v surovém zobrazení.",
-      "errorStatusLabel": "Chyba"
+      "errorStatusLabel": "Chyba",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "Nová karta"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Složka",
       "placeholderFolder": "Vyberte složku",
       "save": "Uložit"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/da.json b/apps/web/messages/da.json
index 6f585d63..c23b6f96 100644
--- a/apps/web/messages/da.json
+++ b/apps/web/messages/da.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Forespørgsel mislykkedes: {message}",
       "curlPasted": "cURL blev indsat og parset",
       "responseCopied": "Svar kopieret til udklipsholder",
-      "codeCopied": "Kode kopieret til udklipsholder"
+      "codeCopied": "Kode kopieret til udklipsholder",
+      "copyFailed": "Kopiering til udklipsholder mislykkedes"
     },
     "layout": {
       "collections": "Samlinger",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Metode",
       "urlPlaceholder": "https://api.example.com/v1/...",
       "sending": "Sender...",
-      "send": "Sende"
+      "send": "Sende",
+      "invalidJsonBodyHelp": "Kan ikke sende: JSON-brødteksten er ugyldig"
     },
     "requestTabs": {
       "params": "Params",
@@ -1528,7 +1530,9 @@
       "previewTab": "Forhåndsvisning",
       "headersTab": "Overskrifter",
       "binaryRawView": "Binære data kan ikke vises i rå visning.",
-      "errorStatusLabel": "Fejl"
+      "errorStatusLabel": "Fejl",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "Ny fane"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Folder",
       "placeholderFolder": "Vælg en mappe",
       "save": "Spare"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/de.json b/apps/web/messages/de.json
index d2c3a8e4..6cc45e90 100644
--- a/apps/web/messages/de.json
+++ b/apps/web/messages/de.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Anfrage fehlgeschlagen: {message}",
       "curlPasted": "cURL eingefügt und erfolgreich gelesen",
       "responseCopied": "Antwort in die Zwischenablage kopiert",
-      "codeCopied": "Code in die Zwischenablage kopiert"
+      "codeCopied": "Code in die Zwischenablage kopiert",
+      "copyFailed": "In die Zwischenablage kopieren fehlgeschlagen"
     },
     "layout": {
       "collections": "Sammlungen",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Methode",
       "urlPlaceholder": "https://api.example.com/v1/...",
       "sending": "Senden...",
-      "send": "Senden"
+      "send": "Senden",
+      "invalidJsonBodyHelp": "Senden nicht möglich: Der JSON-Body ist ungültig"
     },
     "requestTabs": {
       "params": "Parameter",
@@ -1528,7 +1530,9 @@
       "previewTab": "Vorschau",
       "headersTab": "Header",
       "binaryRawView": "Binärdaten können in der Rohansicht nicht angezeigt werden.",
-      "errorStatusLabel": "Fehler"
+      "errorStatusLabel": "Fehler",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "Neue Registerkarte"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Ordner",
       "placeholderFolder": "Ordner wählen",
       "save": "Speichern"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/el.json b/apps/web/messages/el.json
index 3344caa8..b1d4ecf1 100644
--- a/apps/web/messages/el.json
+++ b/apps/web/messages/el.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Το αίτημα απέτυχε: {message}",
       "curlPasted": "Το cURL επικολλήθηκε και αναλύθηκε με επιτυχία",
       "responseCopied": "Η απάντηση αντιγράφηκε στο πρόχειρο",
-      "codeCopied": "Ο κώδικας αντιγράφηκε στο πρόχειρο"
+      "codeCopied": "Ο κώδικας αντιγράφηκε στο πρόχειρο",
+      "copyFailed": "Αποτυχία αντιγραφής στο πρόχειρο"
     },
     "layout": {
       "collections": "Συλλογές",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Μέθοδος",
       "urlPlaceholder": "https://api.example.com/v1/...",
       "sending": "Αποστολή...",
-      "send": "Στέλνω"
+      "send": "Στέλνω",
+      "invalidJsonBodyHelp": "Αδύνατη η αποστολή: το σώμα JSON δεν είναι έγκυρο"
     },
     "requestTabs": {
       "params": "Params",
@@ -1528,7 +1530,9 @@
       "previewTab": "Πρεμιέρα",
       "headersTab": "Κεφαλίδες",
       "binaryRawView": "Τα δυαδικά δεδομένα δεν μπορούν να εμφανιστούν σε μη επεξεργασμένη προβολή.",
-      "errorStatusLabel": "Σφάλμα"
+      "errorStatusLabel": "Σφάλμα",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "Νέα καρτέλα"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Ντοσιέ",
       "placeholderFolder": "Επιλέξτε ένα φάκελο",
       "save": "Εκτός"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/en.json b/apps/web/messages/en.json
index 73bec8a4..839577b7 100644
--- a/apps/web/messages/en.json
+++ b/apps/web/messages/en.json
@@ -1488,7 +1488,8 @@
       "requestFailed": "Request failed: {message}",
       "curlPasted": "cURL pasted and parsed successfully",
       "responseCopied": "Response copied to clipboard",
-      "codeCopied": "Code copied to clipboard"
+      "codeCopied": "Code copied to clipboard",
+      "copyFailed": "Failed to copy to clipboard"
     },
     "layout": {
       "collections": "Collections",
@@ -1501,7 +1502,8 @@
       "methodPlaceholder": "Method",
       "urlPlaceholder": "https://api.example.com/v1/...",
       "sending": "Sending...",
-      "send": "Send"
+      "send": "Send",
+      "invalidJsonBodyHelp": "Cannot send: the JSON body is invalid"
     },
     "requestTabs": {
       "params": "Params",
@@ -1549,7 +1551,9 @@
       "previewTab": "Preview",
       "headersTab": "Headers",
       "binaryRawView": "Binary data cannot be displayed in raw view.",
-      "errorStatusLabel": "Error"
+      "errorStatusLabel": "Error",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "New tab"
@@ -1637,6 +1641,21 @@
       "labelFolder": "Folder",
       "placeholderFolder": "Select a folder",
       "save": "Save"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/es.json b/apps/web/messages/es.json
index 4c9257d9..b6be8c10 100644
--- a/apps/web/messages/es.json
+++ b/apps/web/messages/es.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Error en la solicitud: {message}",
       "curlPasted": "cURL pegado y analizado correctamente",
       "responseCopied": "Respuesta copiada al portapapeles",
-      "codeCopied": "Código copiado al portapapeles"
+      "codeCopied": "Código copiado al portapapeles",
+      "copyFailed": "Error al copiar al portapapeles"
     },
     "layout": {
       "collections": "Colecciones",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Método",
       "urlPlaceholder": "https://api.ejemplo.com/v1/...",
       "sending": "Enviando...",
-      "send": "Enviar"
+      "send": "Enviar",
+      "invalidJsonBodyHelp": "No se puede enviar: el cuerpo JSON no es válido"
     },
     "requestTabs": {
       "params": "Parámetros",
@@ -1528,7 +1530,9 @@
       "previewTab": "Vista previa",
       "headersTab": "Cabeceras",
       "binaryRawView": "Los datos binarios no se pueden mostrar en vista en bruto.",
-      "errorStatusLabel": "Error"
+      "errorStatusLabel": "Error",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "Nueva pestaña"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Carpeta",
       "placeholderFolder": "Selecciona una carpeta",
       "save": "Guardar"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/fa.json b/apps/web/messages/fa.json
index e2b52967..cdb1e4dd 100644
--- a/apps/web/messages/fa.json
+++ b/apps/web/messages/fa.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "درخواست ناموفق بود: {message}",
       "curlPasted": "cURL با موفقیت جای‌گذاری و تجزیه شد",
       "responseCopied": "پاسخ در کلیپ بورد کپی شد",
-      "codeCopied": "کد در کلیپ بورد کپی شد"
+      "codeCopied": "کد در کلیپ بورد کپی شد",
+      "copyFailed": "کپی در کلیپ‌بورد ناموفق بود"
     },
     "layout": {
       "collections": "مجموعه ها",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "روش",
       "urlPlaceholder": "https://api.example.com/v1/...",
       "sending": "ارسال...",
-      "send": "ارسال کنید"
+      "send": "ارسال کنید",
+      "invalidJsonBodyHelp": "ارسال امکان‌پذیر نیست: بدنه JSON نامعتبر است"
     },
     "requestTabs": {
       "params": "پارامترها",
@@ -1528,7 +1530,9 @@
       "previewTab": "پیش نمایش",
       "headersTab": "سرصفحه ها",
       "binaryRawView": "داده های باینری را نمی توان در نمای خام نمایش داد.",
-      "errorStatusLabel": "خطا"
+      "errorStatusLabel": "خطا",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "برگه جدید"
@@ -1613,6 +1617,21 @@
       "labelFolder": "پوشه",
       "placeholderFolder": "یک پوشه را انتخاب کنید",
       "save": "ذخیره کنید"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/fr.json b/apps/web/messages/fr.json
index 694642da..41199de9 100644
--- a/apps/web/messages/fr.json
+++ b/apps/web/messages/fr.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Échec de la requête : {message}",
       "curlPasted": "cURL collé et analysé",
       "responseCopied": "Réponse copiée",
-      "codeCopied": "Code copié"
+      "codeCopied": "Code copié",
+      "copyFailed": "Impossible de copier dans le presse-papiers"
     },
     "layout": {
       "collections": "Collections",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Méthode",
       "urlPlaceholder": "https://api.example.com/v1/...",
       "sending": "Envoi…",
-      "send": "Envoyer"
+      "send": "Envoyer",
+      "invalidJsonBodyHelp": "Envoi impossible : le corps JSON est invalide"
     },
     "requestTabs": {
       "params": "Paramètres",
@@ -1528,7 +1530,9 @@
       "previewTab": "Aperçu",
       "headersTab": "En-têtes",
       "binaryRawView": "Les données binaires ne peuvent pas s’afficher en brut.",
-      "errorStatusLabel": "Erreur"
+      "errorStatusLabel": "Erreur",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "Nouvel onglet"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Dossier",
       "placeholderFolder": "Choisir un dossier",
       "save": "Enregistrer"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/id.json b/apps/web/messages/id.json
index d6ea2183..2e54a9eb 100644
--- a/apps/web/messages/id.json
+++ b/apps/web/messages/id.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Permintaan gagal: {message}",
       "curlPasted": "cURL berhasil ditempelkan dan diuraikan",
       "responseCopied": "Tanggapan disalin ke clipboard",
-      "codeCopied": "Disalin ke papan klip"
+      "codeCopied": "Disalin ke papan klip",
+      "copyFailed": "Gagal menyalin ke papan klip"
     },
     "layout": {
       "collections": "Penagihan",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Metode
",
       "urlPlaceholder": "https://api.example.com/v1/...",
       "sending": "Mengirim...",
-      "send": "Kirim"
+      "send": "Kirim",
+      "invalidJsonBodyHelp": "Tidak dapat mengirim: isi JSON tidak valid"
     },
     "requestTabs": {
       "params": "parameter",
@@ -1528,7 +1530,9 @@
       "previewTab": "Preview",
       "headersTab": "Headers",
       "binaryRawView": "Binary data cannot be displayed in raw view.",
-      "errorStatusLabel": "Error"
+      "errorStatusLabel": "Error",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "New tab"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Folder",
       "placeholderFolder": "Select a folder",
       "save": "Save"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/it.json b/apps/web/messages/it.json
index 5d893705..a02d2c7a 100644
--- a/apps/web/messages/it.json
+++ b/apps/web/messages/it.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Richiesta non riuscita: {message}",
       "curlPasted": "cURL incollato e analizzato correttamente",
       "responseCopied": "Risposta copiata negli appunti",
-      "codeCopied": "Codice copiato negli appunti"
+      "codeCopied": "Codice copiato negli appunti",
+      "copyFailed": "Copia negli appunti non riuscita"
     },
     "layout": {
       "collections": "Collezioni",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Metodo",
       "urlPlaceholder": "https://api.esempio.com/v1/...",
       "sending": "Invio...",
-      "send": "Inviare"
+      "send": "Inviare",
+      "invalidJsonBodyHelp": "Impossibile inviare: il corpo JSON non è valido"
     },
     "requestTabs": {
       "params": "Param",
@@ -1528,7 +1530,9 @@
       "previewTab": "Anteprima",
       "headersTab": "Intestazioni",
       "binaryRawView": "I dati binari non possono essere visualizzati nella vista grezza.",
-      "errorStatusLabel": "Errore"
+      "errorStatusLabel": "Errore",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "Nuova scheda"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Cartella",
       "placeholderFolder": "Seleziona una cartella",
       "save": "Salva"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/ja.json b/apps/web/messages/ja.json
index 2651fe1e..11ff90ba 100644
--- a/apps/web/messages/ja.json
+++ b/apps/web/messages/ja.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "リクエストに失敗しました：{message}",
       "curlPasted": "cURLが貼り付けられ、正常に解析されました",
       "responseCopied": "レスポンスをクリップボードにコピーしました",
-      "codeCopied": "コードをクリップボードにコピーしました"
+      "codeCopied": "コードをクリップボードにコピーしました",
+      "copyFailed": "クリップボードへのコピーに失敗しました"
     },
     "layout": {
       "collections": "コレクション",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "メソッド",
       "urlPlaceholder": "https://api.example.com/v1/...",
       "sending": "送信中...",
-      "send": "送信"
+      "send": "送信",
+      "invalidJsonBodyHelp": "送信できません: JSONボディが無効です"
     },
     "requestTabs": {
       "params": "パラメータ",
@@ -1528,7 +1530,9 @@
       "previewTab": "プレビュー",
       "headersTab": "ヘッダー",
       "binaryRawView": "バイナリデータはraw表示できません。",
-      "errorStatusLabel": "エラー"
+      "errorStatusLabel": "エラー",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "新しいタブ"
@@ -1613,6 +1617,21 @@
       "labelFolder": "フォルダー",
       "placeholderFolder": "フォルダーを選択",
       "save": "保存"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/ko.json b/apps/web/messages/ko.json
index f28edd5b..89d9983b 100644
--- a/apps/web/messages/ko.json
+++ b/apps/web/messages/ko.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "요청 실패: {message}",
       "curlPasted": "cURL이 붙여넣기 및 파싱되었습니다",
       "responseCopied": "응답이 클립보드에 복사되었습니다",
-      "codeCopied": "코드가 클립보드에 복사되었습니다"
+      "codeCopied": "코드가 클립보드에 복사되었습니다",
+      "copyFailed": "클립보드에 복사하지 못했습니다"
     },
     "layout": {
       "collections": "컬렉션",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "메서드",
       "urlPlaceholder": "https://api.example.com/v1/...",
       "sending": "전송 중...",
-      "send": "전송"
+      "send": "전송",
+      "invalidJsonBodyHelp": "전송 불가: JSON 본문이 유효하지 않습니다"
     },
     "requestTabs": {
       "params": "매개변수",
@@ -1528,7 +1530,9 @@
       "previewTab": "미리보기",
       "headersTab": "헤더",
       "binaryRawView": "이진 데이터는 원시 보기에서 표시할 수 없습니다.",
-      "errorStatusLabel": "오류"
+      "errorStatusLabel": "오류",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "새 탭"
@@ -1613,6 +1617,21 @@
       "labelFolder": "폴더",
       "placeholderFolder": "폴더를 선택하세요",
       "save": "저장"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/ms.json b/apps/web/messages/ms.json
index 3c59c6b6..1a24c0bc 100644
--- a/apps/web/messages/ms.json
+++ b/apps/web/messages/ms.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Permintaan gagal: {message}",
       "curlPasted": "cURL ditampal dan dihurai dengan berjaya",
       "responseCopied": "Respons disalin ke papan klip",
-      "codeCopied": "Kod disalin ke papan klip"
+      "codeCopied": "Kod disalin ke papan klip",
+      "copyFailed": "Gagal menyalin ke papan klip"
     },
     "layout": {
       "collections": "Koleksi",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Kaedah",
       "urlPlaceholder": "https://api.contoh.com/v1/...",
       "sending": "Menghantar...",
-      "send": "Hantar"
+      "send": "Hantar",
+      "invalidJsonBodyHelp": "Tidak boleh hantar: kandungan JSON tidak sah"
     },
     "requestTabs": {
       "params": "Parameter",
@@ -1528,7 +1530,9 @@
       "previewTab": "Pratonton",
       "headersTab": "Pengepala",
       "binaryRawView": "Data binari tidak boleh dipaparkan dalam paparan mentah.",
-      "errorStatusLabel": "Ralat"
+      "errorStatusLabel": "Ralat",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "Tab baharu"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Folder",
       "placeholderFolder": "Pilih folder",
       "save": "Simpan"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/nb.json b/apps/web/messages/nb.json
index 5e324a41..da109173 100644
--- a/apps/web/messages/nb.json
+++ b/apps/web/messages/nb.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Forespørsel mislyktes: {message}",
       "curlPasted": "cURL limt inn og analysert",
       "responseCopied": "Svar kopiert til utklippstavle",
-      "codeCopied": "Kode kopiert til utklippstavle"
+      "codeCopied": "Kode kopiert til utklippstavle",
+      "copyFailed": "Kopiering til utklippstavlen mislyktes"
     },
     "layout": {
       "collections": "Samlinger",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Metode",
       "urlPlaceholder": "https://api.eksempel.no/v1/...",
       "sending": "Sender...",
-      "send": "Send"
+      "send": "Send",
+      "invalidJsonBodyHelp": "Kan ikke sende: JSON-kroppen er ugyldig"
     },
     "requestTabs": {
       "params": "Parametere",
@@ -1528,7 +1530,9 @@
       "previewTab": "Forhåndsvisning",
       "headersTab": "Overskrifter",
       "binaryRawView": "Binære data kan ikke vises i råvisning.",
-      "errorStatusLabel": "Feil"
+      "errorStatusLabel": "Feil",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "Ny fane"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Mappe",
       "placeholderFolder": "Velg en mappe",
       "save": "Lagre"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/nl.json b/apps/web/messages/nl.json
index 7d812b18..d6a8cddd 100644
--- a/apps/web/messages/nl.json
+++ b/apps/web/messages/nl.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Verzoek mislukt: {message}",
       "curlPasted": "cURL geplakt en succesvol verwerkt",
       "responseCopied": "Antwoord gekopieerd naar klembord",
-      "codeCopied": "Code gekopieerd naar klembord"
+      "codeCopied": "Code gekopieerd naar klembord",
+      "copyFailed": "Kopiëren naar klembord mislukt"
     },
     "layout": {
       "collections": "Collecties",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Methode",
       "urlPlaceholder": "https://api.voorbeeld.nl/v1/...",
       "sending": "Verzenden...",
-      "send": "Verzenden"
+      "send": "Verzenden",
+      "invalidJsonBodyHelp": "Kan niet verzenden: de JSON-body is ongeldig"
     },
     "requestTabs": {
       "params": "Parameters",
@@ -1528,7 +1530,9 @@
       "previewTab": "Voorbeeld",
       "headersTab": "Headers",
       "binaryRawView": "Binaire gegevens kunnen niet worden weergegeven in ruwe weergave.",
-      "errorStatusLabel": "Fout"
+      "errorStatusLabel": "Fout",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "Nieuw tabblad"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Map",
       "placeholderFolder": "Selecteer een map",
       "save": "Opslaan"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/pl.json b/apps/web/messages/pl.json
index 5022e838..bf385289 100644
--- a/apps/web/messages/pl.json
+++ b/apps/web/messages/pl.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Request failed: {message}",
       "curlPasted": "cURL pasted and parsed successfully",
       "responseCopied": "Response copied to clipboard",
-      "codeCopied": "Code copied to clipboard"
+      "codeCopied": "Code copied to clipboard",
+      "copyFailed": "Kopiowanie do schowka nie powiodło się"
     },
     "layout": {
       "collections": "Collections",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Method",
       "urlPlaceholder": "https://api.example.com/v1/...",
       "sending": "Sending...",
-      "send": "Send"
+      "send": "Send",
+      "invalidJsonBodyHelp": "Nie można wysłać: treść JSON jest nieprawidłowa"
     },
     "requestTabs": {
       "params": "Params",
@@ -1528,7 +1530,9 @@
       "previewTab": "Preview",
       "headersTab": "Headers",
       "binaryRawView": "Binary data cannot be displayed in raw view.",
-      "errorStatusLabel": "Error"
+      "errorStatusLabel": "Error",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "New tab"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Folder",
       "placeholderFolder": "Select a folder",
       "save": "Save"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/pt-BR.json b/apps/web/messages/pt-BR.json
index df10541a..0c4a441c 100644
--- a/apps/web/messages/pt-BR.json
+++ b/apps/web/messages/pt-BR.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Requisição falhou: {message}",
       "curlPasted": "cURL colado e analisado com sucesso",
       "responseCopied": "Resposta copiada para a área de transferência",
-      "codeCopied": "Código copiado para a área de transferência"
+      "codeCopied": "Código copiado para a área de transferência",
+      "copyFailed": "Falha ao copiar para a área de transferência"
     },
     "layout": {
       "collections": "Coleções",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Método",
       "urlPlaceholder": "https://api.exemplo.com/v1/...",
       "sending": "Enviando...",
-      "send": "Enviar"
+      "send": "Enviar",
+      "invalidJsonBodyHelp": "Não é possível enviar: o corpo JSON é inválido"
     },
     "requestTabs": {
       "params": "Parâmetros",
@@ -1528,7 +1530,9 @@
       "previewTab": "Pré-visualização",
       "headersTab": "Cabeçalhos",
       "binaryRawView": "Dados binários não podem ser exibidos na visualização bruta.",
-      "errorStatusLabel": "Erro"
+      "errorStatusLabel": "Erro",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "Nova aba"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Pasta",
       "placeholderFolder": "Selecione uma pasta",
       "save": "Salvar"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/pt.json b/apps/web/messages/pt.json
index 11d09140..fa6fdad4 100644
--- a/apps/web/messages/pt.json
+++ b/apps/web/messages/pt.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Pedido falhou: {message}",
       "curlPasted": "cURL colado e analisado com sucesso",
       "responseCopied": "Resposta copiada para a área de transferência",
-      "codeCopied": "Código copiado para a área de transferência"
+      "codeCopied": "Código copiado para a área de transferência",
+      "copyFailed": "Falha ao copiar para a área de transferência"
     },
     "layout": {
       "collections": "Coleções",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Método",
       "urlPlaceholder": "https://api.exemplo.com/v1/...",
       "sending": "A enviar...",
-      "send": "Enviar"
+      "send": "Enviar",
+      "invalidJsonBodyHelp": "Não é possível enviar: o corpo JSON é inválido"
     },
     "requestTabs": {
       "params": "Parâmetros",
@@ -1528,7 +1530,9 @@
       "previewTab": "Pré-visualização",
       "headersTab": "Cabeçalhos",
       "binaryRawView": "Dados binários não podem ser apresentados na vista em bruto.",
-      "errorStatusLabel": "Erro"
+      "errorStatusLabel": "Erro",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "Novo separador"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Pasta",
       "placeholderFolder": "Seleciona uma pasta",
       "save": "Guardar"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/ru.json b/apps/web/messages/ru.json
index 28439ca6..eceb9ac5 100644
--- a/apps/web/messages/ru.json
+++ b/apps/web/messages/ru.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Запрос не выполнен: {message}",
       "curlPasted": "cURL вставлен и успешно разобран",
       "responseCopied": "Ответ скопирован в буфер обмена",
-      "codeCopied": "Код скопирован в буфер обмена"
+      "codeCopied": "Код скопирован в буфер обмена",
+      "copyFailed": "Не удалось скопировать в буфер обмена"
     },
     "layout": {
       "collections": "Коллекции",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Метод",
       "urlPlaceholder": "https://api.example.com/v1/...",
       "sending": "Отправка...",
-      "send": "Отправить"
+      "send": "Отправить",
+      "invalidJsonBodyHelp": "Невозможно отправить: тело JSON недействительно"
     },
     "requestTabs": {
       "params": "Параметры",
@@ -1528,7 +1530,9 @@
       "previewTab": "Предпросмотр",
       "headersTab": "Заголовки",
       "binaryRawView": "Бинарные данные не могут быть отображены в режиме исходного текста.",
-      "errorStatusLabel": "Ошибка"
+      "errorStatusLabel": "Ошибка",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "Новая вкладка"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Папка",
       "placeholderFolder": "Выберите папку",
       "save": "Сохранить"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/sv.json b/apps/web/messages/sv.json
index b021a7de..4f7a3087 100644
--- a/apps/web/messages/sv.json
+++ b/apps/web/messages/sv.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Förfrågan misslyckades: {message}",
       "curlPasted": "cURL inklistrad och tolkad",
       "responseCopied": "Svar kopierat till urklipp",
-      "codeCopied": "Kod kopierad till urklipp"
+      "codeCopied": "Kod kopierad till urklipp",
+      "copyFailed": "Kopiering till urklipp misslyckades"
     },
     "layout": {
       "collections": "Samlingar",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Metod",
       "urlPlaceholder": "https://api.example.com/v1/...",
       "sending": "Skickar...",
-      "send": "Skicka"
+      "send": "Skicka",
+      "invalidJsonBodyHelp": "Kan inte skicka: JSON-kroppen är ogiltig"
     },
     "requestTabs": {
       "params": "Parametrar",
@@ -1528,7 +1530,9 @@
       "previewTab": "Förhandsgranskning",
       "headersTab": "Rubriker",
       "binaryRawView": "Binärdata kan inte visas i råvy.",
-      "errorStatusLabel": "Fel"
+      "errorStatusLabel": "Fel",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "Ny flik"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Mapp",
       "placeholderFolder": "Välj en mapp",
       "save": "Spara"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/tr.json b/apps/web/messages/tr.json
index a7f0ea6e..8eda2c1f 100644
--- a/apps/web/messages/tr.json
+++ b/apps/web/messages/tr.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "İstek başarısız: {message}",
       "curlPasted": "cURL yapıştırıldı ve başarıyla ayrıştırıldı",
       "responseCopied": "Yanıt panoya kopyalandı",
-      "codeCopied": "Kod panoya kopyalandı"
+      "codeCopied": "Kod panoya kopyalandı",
+      "copyFailed": "Panoya kopyalanamadı"
     },
     "layout": {
       "collections": "Koleksiyonlar",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Yöntem",
       "urlPlaceholder": "https://api.ornek.com/v1/...",
       "sending": "Gönderiliyor...",
-      "send": "Gönder"
+      "send": "Gönder",
+      "invalidJsonBodyHelp": "Gönderilemedi: JSON gövdesi geçersiz"
     },
     "requestTabs": {
       "params": "Parametreler",
@@ -1528,7 +1530,9 @@
       "previewTab": "Önizleme",
       "headersTab": "Başlıklar",
       "binaryRawView": "İkili veriler ham görünümde gösterilemiyor.",
-      "errorStatusLabel": "Hata"
+      "errorStatusLabel": "Hata",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "Yeni sekme"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Klasör",
       "placeholderFolder": "Bir klasör seçin",
       "save": "Kaydet"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/uk.json b/apps/web/messages/uk.json
index 9617ba93..00a24344 100644
--- a/apps/web/messages/uk.json
+++ b/apps/web/messages/uk.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Запит не вдався: {message}",
       "curlPasted": "cURL вставлено та розібрано успішно",
       "responseCopied": "Відповідь скопійовано до буфера обміну",
-      "codeCopied": "Код скопійовано до буфера обміну"
+      "codeCopied": "Код скопійовано до буфера обміну",
+      "copyFailed": "Не вдалося скопіювати до буфера обміну"
     },
     "layout": {
       "collections": "Колекції",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Метод",
       "urlPlaceholder": "https://api.example.com/v1/...",
       "sending": "Надсилання...",
-      "send": "Надіслати"
+      "send": "Надіслати",
+      "invalidJsonBodyHelp": "Неможливо надіслати: тіло JSON недійсне"
     },
     "requestTabs": {
       "params": "Параметри",
@@ -1528,7 +1530,9 @@
       "previewTab": "Перегляд",
       "headersTab": "Заголовки",
       "binaryRawView": "Двійкові дані не можна відобразити у вигляді тексту.",
-      "errorStatusLabel": "Помилка"
+      "errorStatusLabel": "Помилка",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "Нова вкладка"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Тека",
       "placeholderFolder": "Обрати теку",
       "save": "Зберегти"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/vi.json b/apps/web/messages/vi.json
index f70c457b..6620d695 100644
--- a/apps/web/messages/vi.json
+++ b/apps/web/messages/vi.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "Yêu cầu thất bại: {message}",
       "curlPasted": "Đã dán và phân tích cURL thành công",
       "responseCopied": "Đã sao chép phản hồi vào bộ nhớ tạm",
-      "codeCopied": "Đã sao chép mã vào bộ nhớ tạm"
+      "codeCopied": "Đã sao chép mã vào bộ nhớ tạm",
+      "copyFailed": "Sao chép vào clipboard không thành công"
     },
     "layout": {
       "collections": "Bộ sưu tập",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "Phương thức",
       "urlPlaceholder": "https://api.example.com/v1/...",
       "sending": "Đang gửi...",
-      "send": "Gửi"
+      "send": "Gửi",
+      "invalidJsonBodyHelp": "Không thể gửi: nội dung JSON không hợp lệ"
     },
     "requestTabs": {
       "params": "Tham số",
@@ -1528,7 +1530,9 @@
       "previewTab": "Xem trước",
       "headersTab": "Headers",
       "binaryRawView": "Dữ liệu nhị phân không thể hiển thị ở chế độ raw.",
-      "errorStatusLabel": "Lỗi"
+      "errorStatusLabel": "Lỗi",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "Tab mới"
@@ -1613,6 +1617,21 @@
       "labelFolder": "Thư mục",
       "placeholderFolder": "Chọn thư mục",
       "save": "Lưu"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/messages/zh.json b/apps/web/messages/zh.json
index 44f5b97b..be30441d 100644
--- a/apps/web/messages/zh.json
+++ b/apps/web/messages/zh.json
@@ -1467,7 +1467,8 @@
       "requestFailed": "请求失败：{message}",
       "curlPasted": "cURL 已粘贴并解析成功",
       "responseCopied": "响应已复制到剪贴板",
-      "codeCopied": "代码已复制到剪贴板"
+      "codeCopied": "代码已复制到剪贴板",
+      "copyFailed": "复制到剪贴板失败"
     },
     "layout": {
       "collections": "集合",
@@ -1480,7 +1481,8 @@
       "methodPlaceholder": "方法",
       "urlPlaceholder": "https://api.example.com/v1/...",
       "sending": "发送中…",
-      "send": "发送"
+      "send": "发送",
+      "invalidJsonBodyHelp": "无法发送：JSON 正文无效"
     },
     "requestTabs": {
       "params": "参数",
@@ -1528,7 +1530,9 @@
       "previewTab": "预览",
       "headersTab": "响应头",
       "binaryRawView": "二进制数据无法在原始视图中显示。",
-      "errorStatusLabel": "错误"
+      "errorStatusLabel": "错误",
+      "truncatedBanner": "Showing first {shownKb} KB of a large response.",
+      "downloadFullBody": "Download full body"
     },
     "tabBar": {
       "addTabAria": "新标签"
@@ -1613,6 +1617,21 @@
       "labelFolder": "文件夹",
       "placeholderFolder": "选择文件夹",
       "save": "保存"
+    },
+    "shortcuts": {
+      "ariaLabel": "Keyboard shortcuts",
+      "title": "Keyboard shortcuts",
+      "newTab": "New tab",
+      "closeTab": "Close tab",
+      "sendRequest": "Send request"
+    },
+    "toolbar": {
+      "moreActions": "More actions",
+      "code": "Generate code",
+      "save": "Save request",
+      "importCurl": "Import cURL",
+      "environments": "Environments",
+      "shortcuts": "Keyboard shortcuts"
     }
   },
   "RichEditor": {
diff --git a/apps/web/package.json b/apps/web/package.json
index f3ebfd0f..bc276195 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -16,6 +16,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^3",
     "@monaco-editor/react": "^4.7.0",
     "@pdfsmaller/pdf-decrypt": "^1.0.1",
     "@pdfsmaller/pdf-encrypt": "^1.0.2",
@@ -45,6 +46,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@space-man/react-theme-animation": "^1.1.1",
     "@tabler/icons-react": "^3.35.0",
+    "@tanstack/react-query": "^5",
     "@tanstack/react-virtual": "^3.14.3",
     "@vercel/analytics": "^1.5.0",
     "@vercel/speed-insights": "^1.2.0",
@@ -100,7 +102,9 @@
     "react-dom": "^19.2.0",
     "react-firebase-hooks": "^5.1.1",
     "react-github-calendar": "^5.0.6",
+    "react-hook-form": "^7",
     "react-resizable-panels": "^3.0.6",
+    "react-window": "^2.2.7",
     "reflect-metadata": "^0.2.2",
     "smol-toml": "^1.6.1",
     "sonner": "^2.0.7",
@@ -116,6 +120,7 @@
     "vanilla-jsoneditor": "^3.12.0",
     "vaul": "^1.1.2",
     "xlsx": "^0.18.5",
+    "zod": "^3",
     "zustand": "^5.0.8"
   },
   "devDependencies": {
@@ -133,6 +138,7 @@
     "@types/qrcode": "^1.5.6",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@types/react-window": "^2.0.0",
     "@types/turndown": "^5.0.6",
     "@vitalets/google-translate-api": "^9.2.1",
     "autoprefixer": "^10.4.21",
diff --git a/apps/web/src/app/app/api-client/page.tsx b/apps/web/src/app/app/api-client/page.tsx
index 6e4d5406..ada5fdd8 100644
--- a/apps/web/src/app/app/api-client/page.tsx
+++ b/apps/web/src/app/app/api-client/page.tsx
@@ -1,8 +1,12 @@
 import { ApiClientLazy } from '@/components/app-tools/client-only-tool-loaders'
+import { ApiClientProviders } from '@/components/api-client/context/api-client-context'
+
 export default function ApiClientPage() {
   return (
-    <div className="h-full w-full p-2 md:p-4">
-      <ApiClientLazy />
-    </div>
+    <ApiClientProviders>
+      <div className="h-full w-full p-2 md:p-4">
+        <ApiClientLazy />
+      </div>
+    </ApiClientProviders>
   )
 }
diff --git a/apps/web/src/app/app/to-do/KanbanCard.tsx b/apps/web/src/app/app/to-do/KanbanCard.tsx
index 3ae4d8cf..ad9baa0a 100644
--- a/apps/web/src/app/app/to-do/KanbanCard.tsx
+++ b/apps/web/src/app/app/to-do/KanbanCard.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, lazy, Suspense } from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { GripVertical, Edit, Calendar, Tag, CheckCircle2, MoreHorizontal, Trash2, Copy, Check, Play, Pause, Timer, Archive, ArchiveRestore } from "lucide-react";
@@ -8,8 +8,11 @@ import { formatElapsed, getElapsedMinutes } from "@/app/app/to-do/utils/taskTime
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Task } from "@/app/app/to-do/types/Task";
-import TaskEditDialog from "./TaskEditDialog";
-import { differenceInDays, isPast, parseISO, format, isValid, parse } from "date-fns";
+
+const TaskEditDialog = lazy(() => import("./TaskEditDialog"));
+import { LazyBoundary } from "./components/LazyBoundary";
+import { differenceInDays, isPast } from "date-fns";
+import { safeParseDate } from "@/app/app/to-do/utils/taskDate";
 import { cn } from "@/lib/utils";
 import {
   Tooltip,
@@ -27,109 +30,6 @@ import {
 import { STATUS_CONFIG, PRIORITY_CONFIG } from "./config/constants";
 import { useProjectContext } from "@/app/app/to-do/context/ProjectContext";
 
-// Helper to safely parse and format dates
-const safeFormatDate = (dateString: string | undefined, formatStr: string): string => {
-  if (!dateString || dateString === "Unknown") return dateString || "Unknown";
-
-  // Try parsing as ISO first (for new data)
-  try {
-    const isoDate = parseISO(dateString);
-    if (isValid(isoDate)) {
-      return format(isoDate, formatStr);
-    }
-  } catch {
-    // Not an ISO string, continue
-  }
-
-  // Try parsing the formatted date string from TaskContext: "dd MMM yyyy, hh:mm a"
-  try {
-    const parsedDate = parse(dateString, "dd MMM yyyy, hh:mm a", new Date());
-    if (isValid(parsedDate)) {
-      return format(parsedDate, formatStr);
-    }
-  } catch {
-    // Not in that format, continue
-  }
-
-  // Try parsing just the date part "dd MMM yyyy"
-  try {
-    const parts = dateString.split(',');
-    if (parts.length > 0) {
-      const datePart = parts[0].trim(); // "dd MMM yyyy"
-      const parsedDate = parse(datePart, "dd MMM yyyy", new Date());
-      if (isValid(parsedDate)) {
-        return format(parsedDate, formatStr);
-      }
-    }
-  } catch {
-    // Fall through
-  }
-
-  // Try parsing as Date object (fallback)
-  try {
-    const date = new Date(dateString);
-    if (isValid(date)) {
-      return format(date, formatStr);
-    }
-  } catch {
-    // Not a valid date string
-  }
-
-  // If all parsing fails, return a shortened version of the string
-  return dateString.length > 15 ? dateString.substring(0, 15) + "..." : dateString;
-};
-
-// Helper to safely parse date for calculations
-const safeParseDate = (dateString: string | undefined): Date | null => {
-  if (!dateString) return null;
-
-  // Try parsing as ISO first
-  try {
-    const isoDate = parseISO(dateString);
-    if (isValid(isoDate)) {
-      return isoDate;
-    }
-  } catch {
-    // Not an ISO string
-  }
-
-  // Try parsing the formatted date string from TaskContext: "dd MMM yyyy, hh:mm a"
-  try {
-    const parsedDate = parse(dateString, "dd MMM yyyy, hh:mm a", new Date());
-    if (isValid(parsedDate)) {
-      return parsedDate;
-    }
-  } catch {
-    // Not in that format
-  }
-
-  // Try parsing just the date part "dd MMM yyyy"
-  try {
-    const parts = dateString.split(',');
-    if (parts.length > 0) {
-      const datePart = parts[0].trim();
-      const parsedDate = parse(datePart, "dd MMM yyyy", new Date());
-      if (isValid(parsedDate)) {
-        return parsedDate;
-      }
-    }
-  } catch {
-    // Fall through
-  }
-
-  // Try parsing as Date object (fallback)
-  try {
-    const date = new Date(dateString);
-    if (isValid(date)) {
-      return date;
-    }
-  } catch {
-    // Not a valid date
-  }
-
-  return null;
-};
-
 interface KanbanCardProps {
   task: Task;
   onUpdateTask: (id: string, updates: Partial<Task>) => Promise<void>;
@@ -201,11 +101,11 @@ export default function KanbanCard({ task, onUpdateTask, onDeleteTask }: KanbanC
         {...attributes}
         {...listeners}
         className={cn(
-          "group relative p-3 md:p-4 rounded-xl border transition-all duration-300",
-          "hover:shadow-md hover:scale-[1.02] bg-card",
+          "group relative p-3 md:p-4 rounded-xl border transition-all duration-200",
+          "hover:shadow-md hover:-translate-y-0.5 bg-card",
           "cursor-grab active:cursor-grabbing border-border",
           "hover:border-primary/30",
-          isDragging && "shadow-2xl scale-110 z-50 rotate-2 opacity-90",
+          isDragging && "shadow-2xl scale-105 z-50 rotate-1 opacity-90",
           task.status === "completed" && "opacity-75 bg-muted/30"
         )}
         role="button"
@@ -503,12 +403,18 @@ export default function KanbanCard({ task, onUpdateTask, onDeleteTask }: KanbanC
         </div>
       </div>
 
-      <TaskEditDialog
-        task={task}
-        open={isEditDialogOpen}
-        onOpenChange={setIsEditDialogOpen}
-        onSave={handleSaveEdit}
-      />
+      {isEditDialogOpen && (
+        <LazyBoundary fallback={null}>
+          <Suspense fallback={null}>
+            <TaskEditDialog
+              task={task}
+              open={isEditDialogOpen}
+              onOpenChange={setIsEditDialogOpen}
+              onSave={handleSaveEdit}
+            />
+          </Suspense>
+        </LazyBoundary>
+      )}
     </>
   );
 }
diff --git a/apps/web/src/app/app/to-do/KanbanColumn.tsx b/apps/web/src/app/app/to-do/KanbanColumn.tsx
index 7aa44134..a784fa68 100644
--- a/apps/web/src/app/app/to-do/KanbanColumn.tsx
+++ b/apps/web/src/app/app/to-do/KanbanColumn.tsx
@@ -1,7 +1,9 @@
 "use client";
 
+import { useRef } from "react";
 import { useDroppable } from "@dnd-kit/core";
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { Task } from "@/app/app/to-do/types/Task";
 import KanbanCard from "./KanbanCard";
 import { LucideIcon } from "lucide-react";
@@ -18,6 +20,9 @@ interface KanbanColumnProps {
   onDeleteTask: (id: string) => void;
 }
 
+const VIRTUALIZATION_THRESHOLD = 30;
+const ESTIMATED_CARD_HEIGHT = 160;
+
 export default function KanbanColumn({
   id,
   title,
@@ -28,12 +33,19 @@ export default function KanbanColumn({
 }: KanbanColumnProps) {
   const tKanban = useTranslations("Tasks.kanban");
   const tStatus = useTranslations("Tasks.status");
-  const { setNodeRef, isOver } = useDroppable({
-    id,
-  });
+  const { setNodeRef, isOver } = useDroppable({ id });
 
   const config = STATUS_CONFIG[id];
   const taskIds = tasks.map((task) => task.id);
+  const shouldVirtualize = tasks.length > VIRTUALIZATION_THRESHOLD;
+
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const virtualizer = useVirtualizer({
+    count: shouldVirtualize ? tasks.length : 0,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => ESTIMATED_CARD_HEIGHT,
+    overscan: 6,
+  });
 
   return (
     <div
@@ -43,23 +55,21 @@ export default function KanbanColumn({
         config.bgColor,
         config.borderColor,
         isOver
-          ? "ring-4 ring-primary/50 ring-offset-2 scale-[1.02] shadow-lg"
-          : "hover:shadow-md"
+          ? "ring-1 ring-primary/60 shadow-md scale-[1.005] bg-primary/[0.02]"
+          : "hover:shadow-sm"
       )}
       role="region"
       aria-label={tKanban("columnAria", { title, count: tasks.length })}
     >
-      {/* Enhanced Column Header */}
+      {/* Column Header */}
       <div className="flex items-center gap-3 mb-4 pb-3 border-b border-border/50">
-        <div className={cn("flex items-center justify-center p-2 rounded-lg transition-all", config.iconBg)}>
-          <Icon className={cn("h-5 w-5", config.color)} />
-        </div>
-        <h3 className={cn("font-bold text-lg flex-1", config.color)}>
+        <span className="status-dot" data-status={id} aria-hidden />
+        <h3 className={cn("font-display text-xl font-semibold tracking-tight flex-1", config.color)}>
           {title}
         </h3>
         <span
           className={cn(
-            "px-2.5 py-1 rounded-full text-xs font-bold bg-background/80 border border-border shadow-sm",
+            "font-meta px-2 py-0.5 rounded-md text-[11px] tabular-nums bg-background/80 border border-border/60",
             config.color
           )}
           aria-label={tKanban("countInColumnAria", { title, count: tasks.length })}
@@ -68,9 +78,15 @@ export default function KanbanColumn({
         </span>
       </div>
 
-      {/* Tasks - Enhanced */}
+      {/* Tasks */}
       <SortableContext items={taskIds} strategy={verticalListSortingStrategy}>
-        <div className="flex-1 space-y-3 overflow-y-auto min-h-[200px] max-h-[calc(100vh-300px)] scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent">
+        <div
+          ref={scrollRef}
+          className={cn(
+            "flex-1 overflow-y-auto min-h-[200px] max-h-[calc(100vh-300px)] scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent",
+            !shouldVirtualize && "space-y-3"
+          )}
+        >
           {tasks.length === 0 ? (
             <div
               className={cn(
@@ -103,6 +119,39 @@ export default function KanbanColumn({
                 </p>
               )}
             </div>
+          ) : shouldVirtualize ? (
+            <div
+              style={{
+                height: `${virtualizer.getTotalSize()}px`,
+                position: "relative",
+                width: "100%",
+              }}
+            >
+              {virtualizer.getVirtualItems().map((virtualRow) => {
+                const task = tasks[virtualRow.index];
+                return (
+                  <div
+                    key={task.id}
+                    data-index={virtualRow.index}
+                    ref={virtualizer.measureElement}
+                    style={{
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: "100%",
+                      transform: `translateY(${virtualRow.start}px)`,
+                      paddingBottom: "12px",
+                    }}
+                  >
+                    <KanbanCard
+                      task={task}
+                      onUpdateTask={onUpdateTask}
+                      onDeleteTask={onDeleteTask}
+                    />
+                  </div>
+                );
+              })}
+            </div>
           ) : (
             tasks.map((task, index) => (
               <div
diff --git a/apps/web/src/app/app/to-do/TaskContainer.tsx b/apps/web/src/app/app/to-do/TaskContainer.tsx
index 4ce7beaf..1db5554d 100644
--- a/apps/web/src/app/app/to-do/TaskContainer.tsx
+++ b/apps/web/src/app/app/to-do/TaskContainer.tsx
@@ -1,13 +1,20 @@
 "use client";
 
-import { useState, useMemo, useRef, useEffect } from "react";
+import { useState, useMemo, useRef, useEffect, useCallback, lazy, Suspense } from "react";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import TaskForm from "@/app/app/to-do/TaskForm";
 import TaskList from "@/app/app/to-do/TaskList";
-import KanbanBoard from "@/app/app/to-do/KanbanBoard";
 import PaginationDemo from "@/app/app/to-do/PaginationS";
-import ExportImportDialog from "@/app/app/to-do/ExportImportDialog";
+import { LazyBoundary } from "@/app/app/to-do/components/LazyBoundary";
+
+const KanbanBoard = lazy(() => import("@/app/app/to-do/KanbanBoard"));
+const ExportImportDialog = lazy(() => import("@/app/app/to-do/ExportImportDialog"));
+const TaskCommandPalette = lazy(() =>
+  import("@/app/app/to-do/components/TaskCommandPalette").then((m) => ({
+    default: m.TaskCommandPalette,
+  }))
+);
 import { useTaskContext } from "@/app/app/to-do/context/TaskContext";
 import { useProjectContext } from "@/app/app/to-do/context/ProjectContext";
 import { ListTodo, Circle, LayoutGrid, List, Search, X, Plus, Folder, Archive, ArchiveRestore } from "lucide-react";
@@ -55,6 +62,7 @@ export const TaskContainer = () => {
 
   const [searchQuery, setSearchQuery] = useState("");
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [isPaletteOpen, setIsPaletteOpen] = useState(false);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const taskFormInputRef = useRef<HTMLInputElement>(null);
   const {
@@ -98,42 +106,54 @@ export const TaskContainer = () => {
 
   // Filter tasks based on filterStatus for list view
   // For kanban view, always show all tasks (filtering is handled by columns)
-  const filteredTasks = viewMode === "kanban" || filterStatus === "all"
-    ? searchFilteredTasks
-    : searchFilteredTasks.filter(task => task.status === filterStatus);
-
-  const sortedTasks = [...filteredTasks].sort(
-    (a: { status: "ongoing" | "not-started" | "completed" },
-      b: { status: "ongoing" | "not-started" | "completed" }) => {
-      const statusOrder: { [key in "ongoing" | "not-started" | "completed"]: number } = {
-        ongoing: 1,
-        "not-started": 2,
-        completed: 3,
-      };
-      return statusOrder[a.status] - statusOrder[b.status];
-    }
+  const filteredTasks = useMemo(
+    () =>
+      viewMode === "kanban" || filterStatus === "all"
+        ? searchFilteredTasks
+        : searchFilteredTasks.filter((task) => task.status === filterStatus),
+    [searchFilteredTasks, viewMode, filterStatus]
   );
 
+  const sortedTasks = useMemo(() => {
+    const statusOrder: { ongoing: number; "not-started": number; completed: number } = {
+      ongoing: 1,
+      "not-started": 2,
+      completed: 3,
+    };
+    return [...filteredTasks].sort((a, b) => statusOrder[a.status] - statusOrder[b.status]);
+  }, [filteredTasks]);
+
   // Calculate statistics using all tasks stats
   const completionRate = allTaskStats.total > 0 ? Math.round((allTaskStats.completed / allTaskStats.total) * 100) : 0;
 
-  const handleAddTask = (taskText: string) => {
-    addTask(taskText);
-    setIsDrawerOpen(false);
-  };
+  const handleAddTask = useCallback(
+    (taskText: string) => {
+      addTask(taskText);
+      setIsDrawerOpen(false);
+    },
+    [addTask]
+  );
 
   const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);
   const hasStatusFilter = filterStatus !== "all";
   const hasProjectFilter = filterProject !== "all";
   const hasSearchFilter = searchQuery.trim().length > 0;
   const hasActiveFilters = hasStatusFilter || hasProjectFilter || hasSearchFilter;
-  const activeProject = projects.find((project) => project.id === filterProject);
+  const activeProject = useMemo(
+    () => projects.find((project) => project.id === filterProject),
+    [projects, filterProject]
+  );
 
-  const clearAllFilters = () => {
+  const liveStatsMessage = useMemo(() => {
+    const { total, completed, ongoing, notStarted } = allTaskStats;
+    return `${total} task${total === 1 ? "" : "s"}: ${notStarted} not started, ${ongoing} ongoing, ${completed} completed`;
+  }, [allTaskStats]);
+
+  const clearAllFilters = useCallback(() => {
     setSearchQuery("");
     setFilterStatus("all");
     setFilterProject("all");
-  };
+  }, [setFilterStatus, setFilterProject]);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -145,7 +165,7 @@ export const TaskContainer = () => {
 
       if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
         event.preventDefault();
-        searchInputRef.current?.focus();
+        setIsPaletteOpen((open) => !open);
         return;
       }
 
@@ -171,10 +191,16 @@ export const TaskContainer = () => {
   }, [hasSearchFilter, isMobile]);
 
   return (
-    <div className="h-full min-h-0 w-full bg-background flex flex-col overflow-hidden relative mobile-nav-offset">
+    <div className="h-full min-h-0 w-full bg-background flex flex-col overflow-hidden relative mobile-nav-offset paper-grain">
+      <div role="status" aria-live="polite" className="sr-only">
+        {liveStatsMessage}
+      </div>
       {/* Mobile-specific Header */}
       {isMobile && (
-        <div className="sticky top-0 z-50 bg-background/95 backdrop-blur-xl border-b pb-2 pt-2">
+        <div
+          className="sticky top-0 z-50 bg-background/95 backdrop-blur-xl border-b pb-2"
+          style={{ paddingTop: "calc(env(safe-area-inset-top, 0px) + 0.5rem)" }}
+        >
           <div className="flex items-center gap-2 px-4 py-2">
             <SidebarTrigger className="-ml-2 h-10 w-10 text-muted-foreground/80 hover:bg-transparent hover:text-foreground" />
 
@@ -202,8 +228,8 @@ export const TaskContainer = () => {
 
           {/* Title & Stats */}
           <div className="px-4 mt-1 mb-2">
-            <h1 className="text-2xl font-bold tracking-tight text-foreground">{tPage("myTasksTitle")}</h1>
-            <p className="text-sm text-muted-foreground mt-0.5">
+            <h1 className="font-display text-3xl font-semibold tracking-tight text-foreground">{tPage("myTasksTitle")}</h1>
+            <p className="font-meta text-[11px] uppercase tracking-wider text-muted-foreground mt-1">
               {tPage("statsLine", { total: allTaskStats.total, percent: completionRate })}
             </p>
           </div>
@@ -288,10 +314,10 @@ export const TaskContainer = () => {
                     <ListTodo className="h-5 w-5 text-primary" />
                   </div>
                   <div>
-                    <h1 className="text-lg md:text-xl font-bold tracking-tight text-foreground">
+                    <h1 className="font-display text-xl md:text-2xl font-semibold tracking-tight text-foreground">
                       {tPage("myTasksTitle")}
                     </h1>
-                    <p className="text-xs text-muted-foreground mt-0.5 hidden sm:block">
+                    <p className="font-meta text-[10px] uppercase tracking-wider text-muted-foreground mt-1 hidden sm:block">
                       {tPage("statsLineDesktop", { total: allTaskStats.total, percent: completionRate })}
                     </p>
                   </div>
@@ -302,9 +328,9 @@ export const TaskContainer = () => {
                   <div className="flex flex-col items-center gap-0.5 px-2.5 py-1.5 rounded-lg bg-muted/50 border">
                     <div className="flex items-center gap-1 text-xs font-medium">
                       <Circle className="h-3.5 w-3.5 text-muted-foreground" />
-                      <span className="text-foreground">{allTaskStats.total}</span>
+                      <span className="text-foreground font-meta tabular-nums">{allTaskStats.total}</span>
                     </div>
-                    <span className="text-[9px] text-muted-foreground">{tFilters("total")}</span>
+                    <span className="text-[9px] text-muted-foreground uppercase tracking-wider">{tFilters("total")}</span>
                   </div>
 
                   {Object.values(STATUS_CONFIG).map((config) => {
@@ -325,9 +351,9 @@ export const TaskContainer = () => {
                       >
                         <div className="flex items-center gap-1 text-xs font-medium">
                           <config.icon className={cn("h-3.5 w-3.5", config.color)} />
-                          <span className={config.color}>{count}</span>
+                          <span className={cn(config.color, "font-meta tabular-nums")}>{count}</span>
                         </div>
-                        <span className="text-[9px] text-muted-foreground">{tStatus(`${config.id}.label` as any)}</span>
+                        <span className="text-[9px] text-muted-foreground uppercase tracking-wider">{tStatus(`${config.id}.label` as any)}</span>
                       </div>
                     );
                   })}
@@ -555,13 +581,23 @@ export const TaskContainer = () => {
           {viewMode === "kanban" ? (
             <Card className="border shadow-lg flex-1 overflow-hidden flex flex-col bg-muted/10">
               <CardContent className="p-2 md:p-4 flex-1 overflow-y-auto">
-                <KanbanBoard
-                  tasks={sortedTasks}
-                  isLoading={isLoading}
-                  onUpdateStatus={updateTaskStatus}
-                  onUpdateTask={updateTask}
-                  onDeleteTask={deleteTask}
-                />
+                <LazyBoundary>
+                  <Suspense
+                    fallback={
+                      <div className="flex items-center justify-center py-12">
+                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
+                      </div>
+                    }
+                  >
+                    <KanbanBoard
+                      tasks={sortedTasks}
+                      isLoading={isLoading}
+                      onUpdateStatus={updateTaskStatus}
+                      onUpdateTask={updateTask}
+                      onDeleteTask={deleteTask}
+                    />
+                  </Suspense>
+                </LazyBoundary>
               </CardContent>
             </Card>
           ) : (
@@ -640,12 +676,35 @@ export const TaskContainer = () => {
         </Drawer>
       </div>
 
-      <ExportImportDialog
-        open={isExportDialogOpen}
-        onOpenChange={setIsExportDialogOpen}
-        tasks={tasks}
-        projects={projects}
-      />
+      {isExportDialogOpen && (
+        <LazyBoundary fallback={null}>
+          <Suspense fallback={null}>
+            <ExportImportDialog
+              open={isExportDialogOpen}
+              onOpenChange={setIsExportDialogOpen}
+              tasks={tasks}
+              projects={projects}
+            />
+          </Suspense>
+        </LazyBoundary>
+      )}
+
+      {isPaletteOpen && (
+        <LazyBoundary fallback={null}>
+          <Suspense fallback={null}>
+            <TaskCommandPalette
+              open={isPaletteOpen}
+              onOpenChange={setIsPaletteOpen}
+              viewMode={viewMode}
+              onViewModeChange={setViewMode}
+              onNewTask={() => {
+                if (isMobile) setIsDrawerOpen(true);
+                else taskFormInputRef.current?.focus();
+              }}
+            />
+          </Suspense>
+        </LazyBoundary>
+      )}
     </div>
   );
 };
diff --git a/apps/web/src/app/app/to-do/TaskEditDialog.tsx b/apps/web/src/app/app/to-do/TaskEditDialog.tsx
index 23fceeb2..eca94b1c 100644
--- a/apps/web/src/app/app/to-do/TaskEditDialog.tsx
+++ b/apps/web/src/app/app/to-do/TaskEditDialog.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
+import { z } from "zod";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Drawer, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerClose } from "@/components/ui/drawer";
 import { Button } from "@/components/ui/button";
@@ -33,6 +34,42 @@ const priorityConfig = {
   low: { label: "Low", icon: Zap, color: "text-blue-500", bgColor: "bg-blue-50 dark:bg-blue-950", borderColor: "border-blue-500" },
 };
 
+function hexToRgb(hex: string): [number, number, number] | null {
+  const m = hex.replace("#", "").match(/^([\da-f]{6}|[\da-f]{3})$/i);
+  if (!m) return null;
+  const h = m[1].length === 3
+    ? m[1].split("").map((c) => c + c).join("")
+    : m[1];
+  return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+}
+
+function relLuminance([r, g, b]: [number, number, number]): number {
+  const srgb = [r, g, b].map((v) => {
+    const x = v / 255;
+    return x <= 0.03928 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2];
+}
+
+function contrastVsWhite(hex: string): number | null {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return null;
+  const l = relLuminance(rgb);
+  return (1.0 + 0.05) / (l + 0.05);
+}
+
+const taskEditSchema = z.object({
+  text: z.string().trim().min(1, "Title is required").max(200, "Max 200 characters"),
+  description: z.string().max(2000, "Max 2000 characters").optional(),
+  timeEstimate: z
+    .number()
+    .int("Must be a whole number")
+    .positive("Must be positive")
+    .optional(),
+});
+
+type TaskEditErrors = Partial<Record<"text" | "description" | "timeEstimate", string>>;
+
 const predefinedTags = [
   { name: "Work", color: "#3b82f6" },
   { name: "Personal", color: "#10b981" },
@@ -54,6 +91,7 @@ export default function TaskEditDialog({ task, open, onOpenChange, onSave }: Tas
   const [customTagColor, setCustomTagColor] = useState("#3b82f6");
   const [isSaving, setIsSaving] = useState(false);
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
+  const [errors, setErrors] = useState<TaskEditErrors>({});
   const isMobile = useIsMobile();
   const { projects } = useProjectContext();
 
@@ -70,16 +108,44 @@ export default function TaskEditDialog({ task, open, onOpenChange, onSave }: Tas
         timeEstimate: task.timeEstimate,
         projectId: task.projectId,
       });
+      setErrors({});
       if (task.dueDate) {
         setSelectedDate(new Date(task.dueDate));
       }
     }
   }, [open, task]);
 
+  const clearError = useCallback((field: keyof TaskEditErrors) => {
+    setErrors((prev) => {
+      if (!prev[field]) return prev;
+      const next = { ...prev };
+      delete next[field];
+      return next;
+    });
+  }, []);
+
   const handleSave = async () => {
+    const result = taskEditSchema.safeParse({
+      text: editedTask.text ?? "",
+      description: editedTask.description,
+      timeEstimate: editedTask.timeEstimate,
+    });
+
+    if (!result.success) {
+      const fieldErrors: TaskEditErrors = {};
+      for (const issue of result.error.issues) {
+        const path = issue.path[0] as keyof TaskEditErrors | undefined;
+        if (path && !fieldErrors[path]) {
+          fieldErrors[path] = issue.message;
+        }
+      }
+      setErrors(fieldErrors);
+      return;
+    }
+
     setIsSaving(true);
     try {
-      await onSave(editedTask);
+      await onSave({ ...editedTask, text: result.data.text });
       onOpenChange(false);
     } catch (error) {
       console.error("Failed to save task:", error);
@@ -139,14 +205,25 @@ export default function TaskEditDialog({ task, open, onOpenChange, onSave }: Tas
     <div className="space-y-6 py-4">
       {/* Task Title */}
       <div className="space-y-2">
-        <Label htmlFor="task-title">{t("taskTitleLabel")}</Label>
+        <Label htmlFor="task-title">
+          {t("taskTitleLabel")} <span className="text-destructive">*</span>
+        </Label>
         <Input
           id="task-title"
+          autoFocus
           value={editedTask.text || ""}
-          onChange={(e) => setEditedTask({ ...editedTask, text: e.target.value })}
+          onChange={(e) => {
+            setEditedTask({ ...editedTask, text: e.target.value });
+            clearError("text");
+          }}
           placeholder={t("taskTitlePlaceholder")}
-          className="text-base"
+          className={cn("text-base", errors.text && "border-destructive focus-visible:ring-destructive/30")}
+          aria-invalid={!!errors.text}
+          aria-describedby={errors.text ? "task-title-error" : undefined}
         />
+        {errors.text && (
+          <p id="task-title-error" className="text-xs text-destructive">{errors.text}</p>
+        )}
       </div>
 
       {/* Description */}
@@ -155,10 +232,18 @@ export default function TaskEditDialog({ task, open, onOpenChange, onSave }: Tas
         <Textarea
           id="task-description"
           value={editedTask.description || ""}
-          onChange={(e) => setEditedTask({ ...editedTask, description: e.target.value })}
+          onChange={(e) => {
+            setEditedTask({ ...editedTask, description: e.target.value });
+            clearError("description");
+          }}
           placeholder={t("descriptionPlaceholder")}
-          className="min-h-[100px]"
+          className={cn("min-h-[100px]", errors.description && "border-destructive focus-visible:ring-destructive/30")}
+          aria-invalid={!!errors.description}
+          aria-describedby={errors.description ? "task-description-error" : undefined}
         />
+        {errors.description && (
+          <p id="task-description-error" className="text-xs text-destructive">{errors.description}</p>
+        )}
       </div>
 
       {/* Status, Priority, Due Date Row */}
@@ -304,9 +389,18 @@ export default function TaskEditDialog({ task, open, onOpenChange, onSave }: Tas
           type="number"
           min="0"
           value={editedTask.timeEstimate || ""}
-          onChange={(e) => setEditedTask({ ...editedTask, timeEstimate: parseInt(e.target.value) || undefined })}
+          onChange={(e) => {
+            setEditedTask({ ...editedTask, timeEstimate: parseInt(e.target.value) || undefined });
+            clearError("timeEstimate");
+          }}
           placeholder={t("timeEstimatePlaceholder")}
+          className={cn(errors.timeEstimate && "border-destructive focus-visible:ring-destructive/30")}
+          aria-invalid={!!errors.timeEstimate}
+          aria-describedby={errors.timeEstimate ? "time-estimate-error" : undefined}
         />
+        {errors.timeEstimate && (
+          <p id="time-estimate-error" className="text-xs text-destructive">{errors.timeEstimate}</p>
+        )}
       </div>
 
       {/* Tags */}
@@ -355,11 +449,23 @@ export default function TaskEditDialog({ task, open, onOpenChange, onSave }: Tas
               value={customTagColor}
               onChange={(e) => setCustomTagColor(e.target.value)}
               className="w-20"
+              aria-label="Tag color"
             />
             <Button onClick={addCustomTag} disabled={!customTagName.trim()}>
               <Plus className="h-4 w-4" />
             </Button>
           </div>
+          {(() => {
+            const ratio = contrastVsWhite(customTagColor);
+            if (ratio !== null && ratio < 4.5) {
+              return (
+                <p className="text-xs text-amber-600 dark:text-amber-400" role="status">
+                  Low contrast ({ratio.toFixed(2)}:1) — white tag label may be hard to read. WCAG AA needs ≥ 4.5:1.
+                </p>
+              );
+            }
+            return null;
+          })()}
         </div>
       </div>
 
@@ -425,7 +531,7 @@ export default function TaskEditDialog({ task, open, onOpenChange, onSave }: Tas
             <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isSaving}>
               {t("cancel")}
             </Button>
-            <Button onClick={handleSave} disabled={!editedTask.text?.trim() || isSaving}>
+            <Button onClick={handleSave} disabled={isSaving}>
               {isSaving ? t("saving") : t("saveChanges")}
             </Button>
           </DialogFooter>
@@ -448,7 +554,7 @@ export default function TaskEditDialog({ task, open, onOpenChange, onSave }: Tas
             {FormContent}
           </div>
           <DrawerFooter>
-            <Button onClick={handleSave} disabled={!editedTask.text?.trim() || isSaving}>
+            <Button onClick={handleSave} disabled={isSaving}>
               {isSaving ? t("saving") : t("saveChanges")}
             </Button>
             <DrawerClose asChild>
diff --git a/apps/web/src/app/app/to-do/TaskForm.tsx b/apps/web/src/app/app/to-do/TaskForm.tsx
index c904e875..ea40f479 100644
--- a/apps/web/src/app/app/to-do/TaskForm.tsx
+++ b/apps/web/src/app/app/to-do/TaskForm.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, lazy, Suspense } from "react";
 import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
@@ -22,8 +22,12 @@ import {
   SelectSeparator,
 } from "@/components/ui/select";
 import { useProjectContext } from "@/app/app/to-do/context/ProjectContext";
-import { ProjectManagerDialog } from "./components/ProjectManagerDialog";
 import { Folder } from "lucide-react";
+import { LazyBoundary } from "./components/LazyBoundary";
+
+const ProjectManagerDialog = lazy(() =>
+  import("./components/ProjectManagerDialog").then((m) => ({ default: m.ProjectManagerDialog }))
+);
 import { toast } from "sonner";
 import { useTranslations } from "next-intl";
 
@@ -177,7 +181,11 @@ export default function TaskForm({ onAddTask, inputRef }: TaskFormProps) {
                     ))}
                     <SelectSeparator />
                     <div className="p-1">
-                      <ProjectManagerDialog />
+                      <LazyBoundary fallback={null}>
+                        <Suspense fallback={null}>
+                          <ProjectManagerDialog />
+                        </Suspense>
+                      </LazyBoundary>
                     </div>
                   </SelectContent>
                 </Select>
diff --git a/apps/web/src/app/app/to-do/TaskItem.tsx b/apps/web/src/app/app/to-do/TaskItem.tsx
index db51b526..33f0f76e 100644
--- a/apps/web/src/app/app/to-do/TaskItem.tsx
+++ b/apps/web/src/app/app/to-do/TaskItem.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, lazy, Suspense } from "react";
 import { formatElapsed, getElapsedMinutes } from "@/app/app/to-do/utils/taskTimeUtils";
 import {
   Select,
@@ -15,8 +15,11 @@ import DeleteButton from "../../../components/ui/DeleteButton";
 import {
   Edit, Calendar, Tag, MoreVertical, Copy, Check, Trash2, CheckCircle2, Archive, ArchiveRestore, Play, Pause, Timer
 } from "lucide-react";
-import TaskEditDialog from "./TaskEditDialog";
-import { differenceInDays, isPast, parseISO, format, isValid, parse } from "date-fns";
+
+const TaskEditDialog = lazy(() => import("./TaskEditDialog"));
+import { LazyBoundary } from "./components/LazyBoundary";
+import { differenceInDays, isPast } from "date-fns";
+import { safeParseDate } from "@/app/app/to-do/utils/taskDate";
 import { Task } from "@/app/app/to-do/types/Task";
 import {
   DropdownMenu,
@@ -37,109 +40,6 @@ import { motion, useMotionValue, useTransform, PanInfo } from "framer-motion";
 import { useProjectContext } from "@/app/app/to-do/context/ProjectContext";
 import { useTranslations } from "next-intl";
 
-// Helper to safely parse and format dates
-const safeFormatDate = (dateString: string | undefined, formatStr: string): string => {
-  if (!dateString || dateString === "Unknown") return dateString || "Unknown";
-
-  // Try parsing as ISO first (for new data)
-  try {
-    const isoDate = parseISO(dateString);
-    if (isValid(isoDate)) {
-      return format(isoDate, formatStr);
-    }
-  } catch {
-    // Not an ISO string, continue
-  }
-
-  // Try parsing the formatted date string from TaskContext: "dd MMM yyyy, hh:mm a"
-  try {
-    const parsedDate = parse(dateString, "dd MMM yyyy, hh:mm a", new Date());
-    if (isValid(parsedDate)) {
-      return format(parsedDate, formatStr);
-    }
-  } catch {
-    // Not in that format, continue
-  }
-
-  // Try parsing just the date part "dd MMM yyyy"
-  try {
-    const parts = dateString.split(',');
-    if (parts.length > 0) {
-      const datePart = parts[0].trim(); // "dd MMM yyyy"
-      const parsedDate = parse(datePart, "dd MMM yyyy", new Date());
-      if (isValid(parsedDate)) {
-        return format(parsedDate, formatStr);
-      }
-    }
-  } catch {
-    // Fall through
-  }
-
-  // Try parsing as Date object (fallback)
-  try {
-    const date = new Date(dateString);
-    if (isValid(date)) {
-      return format(date, formatStr);
-    }
-  } catch {
-    // Not a valid date string
-  }
-
-  // If all parsing fails, return a shortened version of the string
-  return dateString.length > 15 ? dateString.substring(0, 15) + "..." : dateString;
-};
-
-// Helper to safely parse date for calculations
-const safeParseDate = (dateString: string | undefined): Date | null => {
-  if (!dateString) return null;
-
-  // Try parsing as ISO first
-  try {
-    const isoDate = parseISO(dateString);
-    if (isValid(isoDate)) {
-      return isoDate;
-    }
-  } catch {
-    // Not an ISO string
-  }
-
-  // Try parsing the formatted date string from TaskContext: "dd MMM yyyy, hh:mm a"
-  try {
-    const parsedDate = parse(dateString, "dd MMM yyyy, hh:mm a", new Date());
-    if (isValid(parsedDate)) {
-      return parsedDate;
-    }
-  } catch {
-    // Not in that format
-  }
-
-  // Try parsing just the date part "dd MMM yyyy"
-  try {
-    const parts = dateString.split(',');
-    if (parts.length > 0) {
-      const datePart = parts[0].trim();
-      const parsedDate = parse(datePart, "dd MMM yyyy", new Date());
-      if (isValid(parsedDate)) {
-        return parsedDate;
-      }
-    }
-  } catch {
-    // Fall through
-  }
-
-  // Try parsing as Date object (fallback)
-  try {
-    const date = new Date(dateString);
-    if (isValid(date)) {
-      return date;
-    }
-  } catch {
-    // Not a valid date
-  }
-
-  return null;
-};
-
 interface TaskItemProps {
   task: Task;
   onUpdateStatus: (id: string, newStatus: Task["status"]) => void;
@@ -284,7 +184,7 @@ function TaskItem({
             "relative p-3 md:p-4 rounded-2xl border transition-all duration-300 bg-card",
             "active:scale-[0.98]", // Subtle touch feedback
             task.status === "completed" ? "opacity-60 bg-muted/40" : "shadow-sm border-muted-foreground/10",
-            justCompleted && "animate-pulse ring-2 ring-green-500/50"
+            justCompleted && "ring-1 ring-green-500/40 shadow-[0_0_0_4px_hsl(145_60%_38%/0.08)]"
           )}
           onMouseEnter={() => setIsHovered(true)}
           onMouseLeave={() => setIsHovered(false)}
@@ -299,7 +199,7 @@ function TaskItem({
                     className={cn(
                       "flex items-center justify-center p-2.5 rounded-lg transition-all duration-200",
                       "hover:scale-110 active:scale-95 cursor-pointer",
-                      "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+                      "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
                       statusConfig.bgColor,
                       statusConfig.color,
                       "min-w-[44px] h-[44px]"
@@ -572,7 +472,7 @@ function TaskItem({
                   size="sm"
                   onClick={() => setIsEditDialogOpen(true)}
                   className={cn(
-                    "h-8 w-8 p-0 transition-opacity",
+                    "h-8 w-8 p-0 transition-opacity duration-150 ease-out",
                     isHovered ? "opacity-100" : "opacity-0 group-hover:opacity-70"
                   )}
                   aria-label={tItem("editTaskAria")}
@@ -585,7 +485,7 @@ function TaskItem({
                   size="sm"
                   onClick={() => onUpdateTask(task.id, { archived: !task.archived })}
                   className={cn(
-                    "h-8 w-8 p-0 transition-opacity",
+                    "h-8 w-8 p-0 transition-opacity duration-150 ease-out",
                     isHovered ? "opacity-100" : "opacity-0 group-hover:opacity-70"
                   )}
                   aria-label={task.archived ? "Restore task" : "Archive task"}
@@ -594,7 +494,7 @@ function TaskItem({
                 </Button>
 
                 <div className={cn(
-                  "transition-opacity flex items-center justify-center",
+                  "transition-opacity duration-150 ease-out flex items-center justify-center",
                   isHovered ? "opacity-100" : "opacity-0 group-hover:opacity-70"
                 )}>
                   <DeleteButton onDelete={() => onDeleteTask(task.id)} />
@@ -605,12 +505,18 @@ function TaskItem({
         </motion.div>
       </li >
 
-      <TaskEditDialog
-        task={task}
-        open={isEditDialogOpen}
-        onOpenChange={setIsEditDialogOpen}
-        onSave={handleSaveEdit}
-      />
+      {isEditDialogOpen && (
+        <LazyBoundary fallback={null}>
+          <Suspense fallback={null}>
+            <TaskEditDialog
+              task={task}
+              open={isEditDialogOpen}
+              onOpenChange={setIsEditDialogOpen}
+              onSave={handleSaveEdit}
+            />
+          </Suspense>
+        </LazyBoundary>
+      )}
     </>
   );
 }
diff --git a/apps/web/src/app/app/to-do/TaskList.tsx b/apps/web/src/app/app/to-do/TaskList.tsx
index 95ed8e2e..c4f57516 100644
--- a/apps/web/src/app/app/to-do/TaskList.tsx
+++ b/apps/web/src/app/app/to-do/TaskList.tsx
@@ -1,13 +1,13 @@
 // components/TaskList.js
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
 import TaskItem from "./TaskItem";
 import { FadeIn } from "@/components/ui/fade-in";
-import { Inbox, Loader2, CheckCircle2 } from "lucide-react";
+import { Inbox } from "lucide-react";
 import { Task } from "@/app/app/to-do/types/Task";
 import { cn } from "@/lib/utils";
 import { useTranslations } from "next-intl";
+import { TaskSkeletonList } from "./components/TaskSkeleton";
 
 const STAGGER_LIMIT = 8;
 
@@ -22,41 +22,12 @@ interface TaskListProps {
 export default function TaskList({ tasks, isLoading, onUpdateStatus, onUpdateTask, onDeleteTask }: TaskListProps) {
   const t = useTranslations("Tasks.list");
 
-  // Stabilize callbacks: parent (TaskContext) recreates these every render, which
-  // would defeat React.memo on TaskItem. Forward latest fn via ref.
-  const updateStatusRef = useRef(onUpdateStatus);
-  const updateTaskRef = useRef(onUpdateTask);
-  const deleteTaskRef = useRef(onDeleteTask);
-  useEffect(() => { updateStatusRef.current = onUpdateStatus; }, [onUpdateStatus]);
-  useEffect(() => { updateTaskRef.current = onUpdateTask; }, [onUpdateTask]);
-  useEffect(() => { deleteTaskRef.current = onDeleteTask; }, [onDeleteTask]);
-
-  const stableUpdateStatus = useCallback(
-    (id: string, status: "not-started" | "ongoing" | "completed") => updateStatusRef.current(id, status),
-    []
-  );
-  const stableUpdateTask = useCallback(
-    (id: string, updates: Partial<Task>) => updateTaskRef.current(id, updates),
-    []
-  );
-  const stableDeleteTask = useCallback(
-    (id: string) => deleteTaskRef.current(id),
-    []
-  );
-
   return (
     <ul className="space-y-3" role="list" aria-label={t("ariaLabel")}>
       <FadeIn show={isLoading}>
-        {isLoading && (
-          <div className="flex items-center justify-center py-16">
-            <div className="text-center space-y-4">
-              <Loader2 className="h-12 w-12 animate-spin text-primary mx-auto" />
-              <p className="text-sm text-muted-foreground font-medium">{t("loading")}</p>
-            </div>
-          </div>
-        )}
+        {isLoading && <TaskSkeletonList count={5} />}
       </FadeIn>
-      
+
       <FadeIn show={!isLoading}>
         {!isLoading && tasks.length === 0 && (
           <div className="flex items-center justify-center py-16 animate-in fade-in">
@@ -65,7 +36,7 @@ export default function TaskList({ tasks, isLoading, onUpdateStatus, onUpdateTas
                 <Inbox className="h-16 w-16 text-muted-foreground" />
               </div>
               <div className="space-y-2">
-                <h3 className="text-xl font-bold text-foreground">{t("emptyTitle")}</h3>
+                <h3 className="font-display text-2xl font-semibold text-foreground">{t("emptyTitle")}</h3>
                 <p className="text-sm text-muted-foreground leading-relaxed">
                   {tasks.length === 0 
                     ? t("emptyPrimary")
@@ -93,9 +64,9 @@ export default function TaskList({ tasks, isLoading, onUpdateStatus, onUpdateTas
               >
                 <TaskItem
                   task={task}
-                  onUpdateStatus={stableUpdateStatus}
-                  onUpdateTask={stableUpdateTask}
-                  onDeleteTask={stableDeleteTask}
+                  onUpdateStatus={onUpdateStatus}
+                  onUpdateTask={onUpdateTask}
+                  onDeleteTask={onDeleteTask}
                 />
               </div>
             ))}
diff --git a/apps/web/src/app/app/to-do/components/LazyBoundary.tsx b/apps/web/src/app/app/to-do/components/LazyBoundary.tsx
new file mode 100644
index 00000000..be3d9070
--- /dev/null
+++ b/apps/web/src/app/app/to-do/components/LazyBoundary.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import React from "react";
+
+interface LazyBoundaryProps {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+interface LazyBoundaryState {
+  error: Error | null;
+}
+
+export class LazyBoundary extends React.Component<LazyBoundaryProps, LazyBoundaryState> {
+  state: LazyBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    console.error("LazyBoundary caught error:", error, info);
+  }
+
+  reset = () => this.setState({ error: null });
+
+  render() {
+    if (this.state.error) {
+      if (this.props.fallback) return this.props.fallback;
+      return (
+        <div
+          role="alert"
+          className="flex flex-col items-center justify-center gap-3 py-8 px-4 text-center"
+        >
+          <p className="text-sm text-muted-foreground">
+            Couldn&apos;t load this section. The app may have updated since you opened it.
+          </p>
+          <button
+            type="button"
+            onClick={() => window.location.reload()}
+            className="text-sm font-medium text-primary underline underline-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded"
+          >
+            Reload
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
diff --git a/apps/web/src/app/app/to-do/components/TaskCommandPalette.tsx b/apps/web/src/app/app/to-do/components/TaskCommandPalette.tsx
new file mode 100644
index 00000000..15d1bc18
--- /dev/null
+++ b/apps/web/src/app/app/to-do/components/TaskCommandPalette.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import { useEffect } from "react";
+import {
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/components/ui/command";
+import { useTaskContext } from "@/app/app/to-do/context/TaskContext";
+import { useProjectContext } from "@/app/app/to-do/context/ProjectContext";
+import { STATUS_CONFIG } from "@/app/app/to-do/config/constants";
+import { Archive, ArchiveRestore, LayoutGrid, List, Plus, X, Folder } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useTranslations } from "next-intl";
+
+interface TaskCommandPaletteProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  viewMode: "list" | "kanban";
+  onViewModeChange: (mode: "list" | "kanban") => void;
+  onNewTask: () => void;
+}
+
+export function TaskCommandPalette({
+  open,
+  onOpenChange,
+  viewMode,
+  onViewModeChange,
+  onNewTask,
+}: TaskCommandPaletteProps) {
+  const tFilters = useTranslations("Tasks.filters");
+  const tStatus = useTranslations("Tasks.status");
+  const {
+    filterStatus,
+    setFilterStatus,
+    filterProject,
+    setFilterProject,
+    showArchived,
+    setShowArchived,
+  } = useTaskContext();
+  const { projects } = useProjectContext();
+
+  // Close on Escape happens automatically via Dialog.
+  // Cmd+K toggle is handled by parent — we only render.
+  const close = () => onOpenChange(false);
+
+  const clearAll = () => {
+    setFilterStatus("all");
+    setFilterProject("all");
+    close();
+  };
+
+  return (
+    <CommandDialog open={open} onOpenChange={onOpenChange}>
+      <CommandInput placeholder="Type a command or filter — try status, project, view…" />
+      <CommandList>
+        <CommandEmpty>No matches.</CommandEmpty>
+
+        <CommandGroup heading="Actions">
+          <CommandItem onSelect={() => { onNewTask(); close(); }}>
+            <Plus className="mr-2 h-4 w-4" />
+            New task
+            <CommandShortcut>N</CommandShortcut>
+          </CommandItem>
+          <CommandItem onSelect={clearAll}>
+            <X className="mr-2 h-4 w-4" />
+            Clear all filters
+          </CommandItem>
+        </CommandGroup>
+
+        <CommandSeparator />
+
+        <CommandGroup heading="Filter by status">
+          <CommandItem
+            onSelect={() => { setFilterStatus("all"); close(); }}
+            data-active={filterStatus === "all"}
+          >
+            <span className="mr-2 h-2 w-2 rounded-full bg-muted-foreground/60" />
+            {tFilters("all")}
+            {filterStatus === "all" && <CommandShortcut>active</CommandShortcut>}
+          </CommandItem>
+          {Object.values(STATUS_CONFIG).map((cfg) => (
+            <CommandItem
+              key={cfg.id}
+              onSelect={() => { setFilterStatus(cfg.id); close(); }}
+            >
+              <span className={cn("mr-2 h-2 w-2 rounded-full", {
+                "bg-blue-500": cfg.id === "not-started",
+                "bg-orange-500": cfg.id === "ongoing",
+                "bg-green-500": cfg.id === "completed",
+              })} />
+              {tStatus(`${cfg.id}.label` as any)}
+              {filterStatus === cfg.id && <CommandShortcut>active</CommandShortcut>}
+            </CommandItem>
+          ))}
+        </CommandGroup>
+
+        <CommandSeparator />
+
+        <CommandGroup heading="Filter by project">
+          <CommandItem onSelect={() => { setFilterProject("all"); close(); }}>
+            <Folder className="mr-2 h-4 w-4 text-muted-foreground" />
+            {tFilters("allProjects")}
+            {filterProject === "all" && <CommandShortcut>active</CommandShortcut>}
+          </CommandItem>
+          {projects.map((p) => (
+            <CommandItem
+              key={p.id}
+              onSelect={() => { setFilterProject(p.id); close(); }}
+            >
+              <span className={cn("mr-2 h-2 w-2 rounded-full", p.color)} />
+              {p.name}
+              {filterProject === p.id && <CommandShortcut>active</CommandShortcut>}
+            </CommandItem>
+          ))}
+        </CommandGroup>
+
+        <CommandSeparator />
+
+        <CommandGroup heading="View">
+          <CommandItem onSelect={() => { onViewModeChange("kanban"); close(); }}>
+            <LayoutGrid className="mr-2 h-4 w-4" />
+            Kanban
+            {viewMode === "kanban" && <CommandShortcut>active</CommandShortcut>}
+          </CommandItem>
+          <CommandItem onSelect={() => { onViewModeChange("list"); close(); }}>
+            <List className="mr-2 h-4 w-4" />
+            List
+            {viewMode === "list" && <CommandShortcut>active</CommandShortcut>}
+          </CommandItem>
+          <CommandItem onSelect={() => { setShowArchived(!showArchived); close(); }}>
+            {showArchived ? <ArchiveRestore className="mr-2 h-4 w-4" /> : <Archive className="mr-2 h-4 w-4" />}
+            {showArchived ? "Hide archived" : "Show archived"}
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  );
+}
+
+export function useCommandPaletteShortcut(onToggle: () => void) {
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        onToggle();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onToggle]);
+}
diff --git a/apps/web/src/app/app/to-do/components/TaskSkeleton.tsx b/apps/web/src/app/app/to-do/components/TaskSkeleton.tsx
index ec44baf6..df636120 100644
--- a/apps/web/src/app/app/to-do/components/TaskSkeleton.tsx
+++ b/apps/web/src/app/app/to-do/components/TaskSkeleton.tsx
@@ -1,10 +1,33 @@
 export default function TaskSkeleton() {
   return (
-    <li className="flex items-center gap-4 mb-4 p-2 border rounded animate-pulse">
-      <div className="flex-1 h-6 bg-gray-200 dark:bg-gray-700 rounded"></div>
-      <div className="w-20 h-6 bg-gray-200 dark:bg-gray-700 rounded"></div>
-      <div className="w-[150px] h-9 bg-gray-200 dark:bg-gray-700 rounded"></div>
-      <div className="w-8 h-8 bg-gray-200 dark:bg-gray-700 rounded"></div>
+    <li
+      className="relative mb-3 p-3 md:p-4 rounded-2xl border border-muted-foreground/10 bg-card animate-pulse"
+      aria-hidden
+    >
+      <div className="flex items-start gap-3 md:gap-4">
+        <div className="h-11 w-11 rounded-lg bg-muted shrink-0" />
+        <div className="flex-1 min-w-0 space-y-2">
+          <div className="h-4 w-[60%] rounded bg-muted" />
+          <div className="h-3 w-[85%] rounded bg-muted/80" />
+          <div className="flex items-center gap-1.5 pt-1">
+            <div className="h-5 w-14 rounded-md bg-muted/70" />
+            <div className="h-5 w-12 rounded-md bg-muted/70" />
+          </div>
+        </div>
+        <div className="hidden md:flex items-center gap-2 shrink-0">
+          <div className="h-8 w-[130px] rounded-md bg-muted/70" />
+        </div>
+      </div>
     </li>
   );
 }
+
+export function TaskSkeletonList({ count = 5 }: { count?: number }) {
+  return (
+    <ul className="space-y-3" role="status" aria-label="Loading tasks">
+      {Array.from({ length: count }).map((_, i) => (
+        <TaskSkeleton key={i} />
+      ))}
+    </ul>
+  );
+}
diff --git a/apps/web/src/app/app/to-do/context/TaskContext.tsx b/apps/web/src/app/app/to-do/context/TaskContext.tsx
index 1be067c7..8d67f943 100644
--- a/apps/web/src/app/app/to-do/context/TaskContext.tsx
+++ b/apps/web/src/app/app/to-do/context/TaskContext.tsx
@@ -1,6 +1,15 @@
 "use client";
 
-import React, { createContext, useContext, useState, useEffect, useCallback, useRef } from "react";
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  useMemo,
+} from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Task, NewTask } from "@/app/app/to-do/types/Task";
 import { format } from "date-fns";
 import useAuth, { AuthState } from "@/utils/useAuth";
@@ -8,6 +17,24 @@ import { backendFetch } from "@/lib/backend-auth";
 import { fetchAllPages } from "@/lib/fetch-all-pages";
 import { toast } from "sonner";
 import { useTranslations } from "next-intl";
+import {
+  enqueuePendingDelete,
+  removePendingDelete,
+  getAllPendingDeletes,
+} from "@/app/app/to-do/utils/pendingDeletes";
+
+interface TaskStats {
+  total: number;
+  completed: number;
+  ongoing: number;
+  notStarted: number;
+}
+
+interface TasksPage {
+  items: Task[];
+  total_pages: number;
+  total: number;
+}
 
 interface TaskContextType {
   tasks: Task[];
@@ -21,12 +48,7 @@ interface TaskContextType {
   setFilterProject: (projectId: string | "all") => void;
   showArchived: boolean;
   setShowArchived: (show: boolean) => void;
-  allTaskStats: {
-    total: number;
-    completed: number;
-    ongoing: number;
-    notStarted: number;
-  };
+  allTaskStats: TaskStats;
   fetchNextPage: () => void;
   fetchPreviousPage: () => void;
   handlePageChange: (page: number) => void;
@@ -46,29 +68,63 @@ interface StatusOrderMap {
   completed: number;
 }
 
+type TaskActions = Pick<
+  TaskContextType,
+  | "addTask"
+  | "updateTask"
+  | "updateTaskStatus"
+  | "deleteTask"
+  | "archiveTask"
+  | "restoreTask"
+  | "importTasks"
+  | "getFilteredTasksForExport"
+  | "fetchNextPage"
+  | "fetchPreviousPage"
+  | "handlePageChange"
+  | "setFilterStatus"
+  | "setFilterProject"
+  | "setShowArchived"
+>;
+
 const TaskContext = createContext<TaskContextType | undefined>(undefined);
+const TaskActionsContext = createContext<TaskActions | undefined>(undefined);
 const TASK_EXPORT_PAGE_SIZE = 1000;
+const TASKS_PER_PAGE = 10;
+
+const TASKS_QUERY_PREFIX = "todoTasks";
+const STATS_QUERY_KEY = ["todoStats"] as const;
+
+const DEFAULT_STATS: TaskStats = { total: 0, completed: 0, ongoing: 0, notStarted: 0 };
+
+interface TasksQueryFilters {
+  page: number;
+  status: string;
+  projectId: string;
+  archived: boolean;
+}
+
+const tasksQueryKey = (uid: string | undefined, filters: TasksQueryFilters) =>
+  [TASKS_QUERY_PREFIX, uid ?? null, filters] as const;
 
 export function TaskProvider({ children }: { children: React.ReactNode }) {
-  const { user }: AuthState = useAuth(); // Single declaration of user
+  const { user }: AuthState = useAuth();
   const tAck = useTranslations("Tasks.ack");
   const tStatus = useTranslations("Tasks.status");
-  const [tasks, setTasks] = useState<Task[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
+  const queryClient = useQueryClient();
+
   const [currentPage, setCurrentPage] = useState(1);
-  const [totalPages, setTotalPages] = useState(0);
-  const [totalTaskCount, setTotalTaskCount] = useState(0);
   const [filterStatus, setFilterStatus] = useState<"all" | "not-started" | "ongoing" | "completed">("all");
   const [filterProject, setFilterProject] = useState<string | "all">("all");
   const [showArchived, setShowArchived] = useState(false);
-  const [allTaskStats, setAllTaskStats] = useState({
-    total: 0,
-    completed: 0,
-    ongoing: 0,
-    notStarted: 0,
-  });
-  const tasksPerPage = 10;
-  const didInitialLoad = useRef(false);
+
+  const filterStatusRef = useRef(filterStatus);
+  const filterProjectRef = useRef(filterProject);
+  const showArchivedRef = useRef(showArchived);
+  const currentPageRef = useRef(currentPage);
+  useEffect(() => { filterStatusRef.current = filterStatus; }, [filterStatus]);
+  useEffect(() => { filterProjectRef.current = filterProject; }, [filterProject]);
+  useEffect(() => { showArchivedRef.current = showArchived; }, [showArchived]);
+  useEffect(() => { currentPageRef.current = currentPage; }, [currentPage]);
 
   const authedFetch = useCallback(
     async (path: string, init?: RequestInit) => {
@@ -89,181 +145,200 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
     [user]
   );
 
-  const fetchStats = useCallback(async () => {
-    try {
-      if (!user) return;
-      const res = await authedFetch("/api/backend/tasks/stats", { method: "GET" });
-      const stats = await res.json();
-      setAllTaskStats(stats);
-      const calculatedPages = Math.max(1, Math.ceil((stats.total ?? 0) / tasksPerPage));
-      setTotalPages(calculatedPages);
-      setTotalTaskCount(stats.total ?? 0);
-    } catch (error) {
-      console.error("Error fetching task stats:", error);
-    }
-  }, [user, authedFetch, tasksPerPage]);
-
-  useEffect(() => {
-    fetchStats();
-  }, [fetchStats]);
+  const authedFetchRef = useRef(authedFetch);
+  useEffect(() => { authedFetchRef.current = authedFetch; }, [authedFetch]);
+
+  const currentFilters = useMemo<TasksQueryFilters>(
+    () => ({
+      page: currentPage,
+      status: filterStatus,
+      projectId: filterProject,
+      archived: showArchived,
+    }),
+    [currentPage, filterStatus, filterProject, showArchived]
+  );
 
-  const refreshCurrentPage = useCallback(async () => {
-    try {
-      if (!user) return;
-      setIsLoading(true);
+  // Tasks list query (cached, dedup'd, stale-while-revalidate)
+  const tasksQuery = useQuery<TasksPage>({
+    queryKey: tasksQueryKey(user?.uid, currentFilters),
+    queryFn: async () => {
       const params = new URLSearchParams();
-      params.set("status", filterStatus);
-      params.set("projectId", filterProject);
-      params.set("page", String(currentPage));
-      params.set("pageSize", String(tasksPerPage));
-      params.set("archived", String(showArchived));
-
+      params.set("status", currentFilters.status);
+      params.set("projectId", currentFilters.projectId);
+      params.set("page", String(currentFilters.page));
+      params.set("pageSize", String(TASKS_PER_PAGE));
+      params.set("archived", String(currentFilters.archived));
       const res = await authedFetch(`/api/backend/tasks?${params.toString()}`, { method: "GET" });
       const data = await res.json();
-      setTasks(data.items ?? []);
-      setTotalPages(data.total_pages ?? 1);
-      setTotalTaskCount(data.total ?? 0);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [user, authedFetch, currentPage, tasksPerPage, filterStatus, filterProject, showArchived]);
-
-  // Reset to page 1 when filter changes
+      return {
+        items: data.items ?? [],
+        total_pages: data.total_pages ?? 1,
+        total: data.total ?? 0,
+      };
+    },
+    enabled: !!user,
+    placeholderData: (prev) => prev,
+  });
+
+  // Stats query
+  const statsQuery = useQuery<TaskStats>({
+    queryKey: STATS_QUERY_KEY,
+    queryFn: async () => {
+      const res = await authedFetch("/api/backend/tasks/stats", { method: "GET" });
+      return (await res.json()) as TaskStats;
+    },
+    enabled: !!user,
+  });
+
+  const tasks = useMemo(() => tasksQuery.data?.items ?? [], [tasksQuery.data]);
+  const totalPages = tasksQuery.data?.total_pages
+    ? Math.max(1, tasksQuery.data.total_pages)
+    : Math.max(1, Math.ceil((statsQuery.data?.total ?? 0) / TASKS_PER_PAGE));
+  const totalTaskCount = tasksQuery.data?.total ?? statsQuery.data?.total ?? 0;
+  const allTaskStats = statsQuery.data ?? DEFAULT_STATS;
+  const isLoading = tasksQuery.isPending || (tasksQuery.isFetching && !tasksQuery.data);
+
+  // Latest snapshot for actions
+  const tasksRef = useRef<Task[]>([]);
+  useEffect(() => { tasksRef.current = tasks; }, [tasks]);
+
+  // Helper: build current tasks key for setQueryData
+  const buildCurrentKey = useCallback(
+    () =>
+      tasksQueryKey(user?.uid, {
+        page: currentPageRef.current,
+        status: filterStatusRef.current,
+        projectId: filterProjectRef.current,
+        archived: showArchivedRef.current,
+      }),
+    [user?.uid]
+  );
+
+  // Reset to page 1 on filter change
   useEffect(() => {
     setCurrentPage(1);
   }, [filterStatus, filterProject, showArchived]);
 
-  useEffect(() => {
-    if (!user) {
-      setTasks([]);
-      setIsLoading(false);
-      return;
-    }
-    // Avoid double-load on mount when stats effect also runs
-    if (!didInitialLoad.current) didInitialLoad.current = true;
-    refreshCurrentPage();
-  }, [user, refreshCurrentPage]);
-
+  // Pagination helpers
   const fetchNextPage = useCallback(() => {
-    if (currentPage >= totalPages) return;
-    setCurrentPage((p) => p + 1);
-  }, [currentPage, totalPages]);
+    setCurrentPage((p) => {
+      if (p >= totalPages) return p;
+      return p + 1;
+    });
+  }, [totalPages]);
 
   const fetchPreviousPage = useCallback(() => {
-    if (currentPage <= 1) return;
     setCurrentPage((p) => Math.max(1, p - 1));
-  }, [currentPage]);
+  }, []);
 
-  const handlePageChange = async (page: number) => {
-    if (page === currentPage || page > totalPages || page < 1) return;
-    setCurrentPage(page);
-  };
+  const handlePageChange = useCallback(
+    async (page: number) => {
+      if (page === currentPageRef.current || page > totalPages || page < 1) return;
+      setCurrentPage(page);
+    },
+    [totalPages]
+  );
 
-  const addTask = async (newTaskText: string, projectId?: string): Promise<void> => {
-    if (!user) return;
-    const newTask: NewTask = {
-      text: newTaskText,
-      status: "not-started",
-      statusOrder: 2,
-      createdAt: new Date().toISOString(),
-      created_by: user.uid,
-      projectId: projectId,
-    };
-    try {
-      await authedFetch("/api/backend/tasks", {
-        method: "POST",
-        body: JSON.stringify({ text: newTask.text, projectId: newTask.projectId }),
-      });
-      await refreshCurrentPage();
-      await fetchStats();
-
-      // Optimistically update stats
-      setAllTaskStats(prev => ({
-        ...prev,
-        total: prev.total + 1,
-        notStarted: prev.notStarted + 1
-      }));
-      setTotalTaskCount(prev => prev + 1);
-
-      toast.success(tAck("taskAddedTitle"), {
-        description: newTaskText.length > 50 ? `${newTaskText.substring(0, 50)}...` : newTaskText,
-      });
-    } catch (error) {
-      console.error("Failed to add task:", error);
-      toast.error(tAck("taskAddedFailedTitle"), {
-        description: tAck("tryAgain"),
-      });
-    }
-  };
+  // ----- Mutations -----
 
-  const updateTask = async (taskId: string, updates: Partial<Task>): Promise<void> => {
-    if (!user) return;
+  const invalidateTasks = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: [TASKS_QUERY_PREFIX] });
+  }, [queryClient]);
+
+  const invalidateStats = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: STATS_QUERY_KEY });
+  }, [queryClient]);
+
+  const addTask = useCallback(
+    async (newTaskText: string, projectId?: string): Promise<void> => {
+      if (!user) return;
+      const newTask: NewTask = {
+        text: newTaskText,
+        status: "not-started",
+        statusOrder: 2,
+        createdAt: new Date().toISOString(),
+        created_by: user.uid,
+        projectId,
+      };
+      try {
+        await authedFetch("/api/backend/tasks", {
+          method: "POST",
+          body: JSON.stringify({ text: newTask.text, projectId: newTask.projectId }),
+        });
 
-    // Optimistically update local state
-    setTasks((currentTasks) =>
-      currentTasks.map((task) =>
-        task.id === taskId ? { ...task, ...updates } : task
-      )
-    );
+        // Optimistic stat bump (will be reconciled by stats invalidate)
+        queryClient.setQueryData<TaskStats>(STATS_QUERY_KEY, (old) =>
+          old ? { ...old, total: old.total + 1, notStarted: old.notStarted + 1 } : old
+        );
 
-    try {
-      const updateData: any = { ...updates };
+        invalidateTasks();
+        invalidateStats();
 
-      // If status is being updated and completedAt is not explicitly set
-      if (updates.status === "completed" && !updates.completedAt) {
-        // Backend sets completedAt when status becomes completed
+        toast.success(tAck("taskAddedTitle"), {
+          description: newTaskText.length > 50 ? `${newTaskText.substring(0, 50)}...` : newTaskText,
+        });
+      } catch (error) {
+        console.error("Failed to add task:", error);
+        toast.error(tAck("taskAddedFailedTitle"), { description: tAck("tryAgain") });
       }
+    },
+    [user, authedFetch, queryClient, invalidateTasks, invalidateStats, tAck]
+  );
 
-      // Remove fields that shouldn't be updated directly in Firestore
-      delete updateData.id;
-      delete updateData.created_by;
-      delete updateData.createdAt; // Don't allow updating creation timestamp
+  const updateTask = useCallback(
+    async (taskId: string, updates: Partial<Task>): Promise<void> => {
+      if (!user) return;
 
-      // Filter out undefined values - Firestore doesn't accept undefined
-      // Instead, we need to use deleteField() or just omit them
-      Object.keys(updateData).forEach(key => {
-        if (updateData[key] === undefined) {
-          delete updateData[key];
-        }
-      });
+      const key = buildCurrentKey();
+      // Optimistic update in cache
+      queryClient.setQueryData<TasksPage>(key, (old) =>
+        old
+          ? { ...old, items: old.items.map((t) => (t.id === taskId ? { ...t, ...updates } : t)) }
+          : old
+      );
 
-      // Only update if there are fields to update
-      if (Object.keys(updateData).length === 0) {
-        return;
+      try {
+        const updateData: Record<string, unknown> = { ...updates };
+
+        delete updateData.id;
+        delete updateData.created_by;
+        delete updateData.createdAt;
+
+        Object.keys(updateData).forEach((k) => {
+          if (updateData[k] === undefined) delete updateData[k];
+        });
+
+        if (Object.keys(updateData).length === 0) return;
+
+        await authedFetch(`/api/backend/tasks/${taskId}`, {
+          method: "PATCH",
+          body: JSON.stringify(updateData),
+        });
+        toast.success(tAck("taskUpdatedTitle"));
+      } catch (error) {
+        console.error("Failed to update task:", error);
+        toast.error(tAck("taskUpdatedFailedTitle"), { description: tAck("tryAgain") });
+        invalidateTasks();
       }
+    },
+    [user, authedFetch, queryClient, buildCurrentKey, invalidateTasks, tAck]
+  );
 
-      await authedFetch(`/api/backend/tasks/${taskId}`, {
-        method: "PATCH",
-        body: JSON.stringify(updateData),
-      });
-      toast.success(tAck("taskUpdatedTitle"));
-    } catch (error) {
-      console.error("Failed to update task:", error);
-      toast.error(tAck("taskUpdatedFailedTitle"), {
-        description: tAck("tryAgain"),
-      });
-      await refreshCurrentPage();
-    }
-  };
-
-  const updateTaskStatus = async (
-    taskId: string,
-    newStatus: "not-started" | "ongoing" | "completed"
-  ): Promise<void> => {
-    const statusOrder: StatusOrderMap = {
-      ongoing: 1,
-      "not-started": 2,
-      completed: 3,
-    };
+  const updateTaskStatus = useCallback(
+    async (taskId: string, newStatus: "not-started" | "ongoing" | "completed"): Promise<void> => {
+      const statusOrder: StatusOrderMap = {
+        ongoing: 1,
+        "not-started": 2,
+        completed: 3,
+      };
 
-    if (newStatus in statusOrder) {
-      const task = tasks.find(t => t.id === taskId);
+      if (!(newStatus in statusOrder)) return;
+
+      const task = tasksRef.current.find((t) => t.id === taskId);
       const updates: Partial<Task> = {
         status: newStatus,
         statusOrder: statusOrder[newStatus],
       };
-
-      // Add completedAt timestamp when marking as completed
       if (newStatus === "completed") {
         updates.completedAt = format(new Date(), "dd MMM yyyy, hh:mm a");
       }
@@ -271,22 +346,17 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
       try {
         await updateTask(taskId, updates);
 
-        // Optimistically update stats if status changed
         if (task && task.status !== newStatus) {
-          setAllTaskStats(prev => {
-            const newStats = { ...prev };
-
-            // Decrement old status count
-            if (task.status === "completed") newStats.completed--;
-            else if (task.status === "ongoing") newStats.ongoing--;
-            else if (task.status === "not-started") newStats.notStarted--;
-
-            // Increment new status count
-            if (newStatus === "completed") newStats.completed++;
-            else if (newStatus === "ongoing") newStats.ongoing++;
-            else if (newStatus === "not-started") newStats.notStarted++;
-
-            return newStats;
+          queryClient.setQueryData<TaskStats>(STATS_QUERY_KEY, (old) => {
+            if (!old) return old;
+            const next = { ...old };
+            if (task.status === "completed") next.completed--;
+            else if (task.status === "ongoing") next.ongoing--;
+            else if (task.status === "not-started") next.notStarted--;
+            if (newStatus === "completed") next.completed++;
+            else if (newStatus === "ongoing") next.ongoing++;
+            else if (newStatus === "not-started") next.notStarted++;
+            return next;
           });
         }
 
@@ -295,173 +365,277 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
             description: task.text.length > 50 ? `${task.text.substring(0, 50)}...` : task.text,
           });
         }
-      } catch (error) {
-        toast.error(tAck("taskStatusUpdateFailedTitle"), {
-          description: tAck("tryAgain"),
-        });
+      } catch {
+        toast.error(tAck("taskStatusUpdateFailedTitle"), { description: tAck("tryAgain") });
       }
-    }
-  };
-
-  const deleteTask = async (taskId: string): Promise<void> => {
-    if (!user) return;
+    },
+    [updateTask, queryClient, tAck, tStatus]
+  );
 
-    // Get the task before deleting it (for undo functionality)
-    const taskToDelete = tasks.find(t => t.id === taskId);
-    if (!taskToDelete) return;
-
-    // Optimistically remove from UI
-    setTasks((currentTasks) => currentTasks.filter((task) => task.id !== taskId));
-
-    let deleteExecuted = false;
-    let deleteTimeout: NodeJS.Timeout;
-
-    // Show toast with undo option
-    toast(tAck("taskDeletedTitle", { text: taskToDelete.text }), {
-      action: {
-        label: tAck("undo"),
-        onClick: async () => {
-          // Cancel the deletion
-          clearTimeout(deleteTimeout);
-
-          // Restore the task in UI
-          setTasks((currentTasks) => {
-            // Find the correct position to insert the task back
-            const newTasks = [...currentTasks];
-            newTasks.push(taskToDelete);
-            return newTasks.sort((a, b) => a.statusOrder - b.statusOrder);
-          });
+  const deleteTask = useCallback(
+    async (taskId: string): Promise<void> => {
+      if (!user) return;
 
-          // If deletion was already executed, re-add to Firestore
-          if (deleteExecuted) {
-            try {
-              await authedFetch("/api/backend/tasks", {
-                method: "POST",
-                body: JSON.stringify({ text: taskToDelete.text, projectId: taskToDelete.projectId }),
-              });
-              await refreshCurrentPage();
-              await fetchStats();
-              toast.success(tAck("taskRestoredSuccessTitle"));
-            } catch (error) {
-              console.error("Failed to restore task:", error);
-              toast.error(tAck("taskRestoreFailedTitle"));
+      const taskToDelete = tasksRef.current.find((t) => t.id === taskId);
+      if (!taskToDelete) return;
+
+      const key = buildCurrentKey();
+
+      // Optimistic remove
+      queryClient.setQueryData<TasksPage>(key, (old) =>
+        old ? { ...old, items: old.items.filter((t) => t.id !== taskId) } : old
+      );
+
+      const deleteAt = Date.now() + 3000;
+      enqueuePendingDelete({ taskId, task: taskToDelete, deleteAt, userId: user.uid });
+
+      let deleteExecuted = false;
+      let deleteTimeout: NodeJS.Timeout;
+
+      toast(tAck("taskDeletedTitle", { text: taskToDelete.text }), {
+        action: {
+          label: tAck("undo"),
+          onClick: async () => {
+            clearTimeout(deleteTimeout);
+            removePendingDelete(taskId);
+
+            // Restore in cache
+            queryClient.setQueryData<TasksPage>(key, (old) =>
+              old
+                ? {
+                    ...old,
+                    items: [...old.items, taskToDelete].sort(
+                      (a, b) => a.statusOrder - b.statusOrder
+                    ),
+                  }
+                : old
+            );
+
+            if (deleteExecuted) {
+              try {
+                await authedFetch("/api/backend/tasks", {
+                  method: "POST",
+                  body: JSON.stringify({
+                    text: taskToDelete.text,
+                    projectId: taskToDelete.projectId,
+                  }),
+                });
+                invalidateTasks();
+                invalidateStats();
+                toast.success(tAck("taskRestoredSuccessTitle"));
+              } catch (error) {
+                console.error("Failed to restore task:", error);
+                toast.error(tAck("taskRestoreFailedTitle"));
+              }
+            } else {
+              toast.success(tAck("taskRestoredTitle"));
             }
-          } else {
-            toast.success(tAck("taskRestoredTitle"));
-          }
+          },
         },
-      },
-      duration: 3000,
-    });
+        duration: 3000,
+      });
 
-    // Execute deletion after delay (allows time for undo)
-    deleteTimeout = setTimeout(async () => {
-      try {
-        await authedFetch(`/api/backend/tasks/${taskId}`, { method: "DELETE" });
-        deleteExecuted = true;
+      deleteTimeout = setTimeout(async () => {
+        try {
+          await authedFetch(`/api/backend/tasks/${taskId}`, { method: "DELETE" });
+          deleteExecuted = true;
+          removePendingDelete(taskId);
+
+          queryClient.setQueryData<TaskStats>(STATS_QUERY_KEY, (old) => {
+            if (!old) return old;
+            const next = { ...old };
+            next.total = Math.max(0, next.total - 1);
+            if (taskToDelete.status === "completed")
+              next.completed = Math.max(0, next.completed - 1);
+            else if (taskToDelete.status === "ongoing")
+              next.ongoing = Math.max(0, next.ongoing - 1);
+            else if (taskToDelete.status === "not-started")
+              next.notStarted = Math.max(0, next.notStarted - 1);
+            return next;
+          });
 
-        // Update stats after successful deletion
-        setAllTaskStats(prev => {
-          const newStats = { ...prev };
-          newStats.total = Math.max(0, newStats.total - 1);
+          if (tasksRef.current.length === 0 && currentPageRef.current > 1) {
+            invalidateTasks();
+          }
+        } catch (error) {
+          console.error("Failed to delete task:", error);
+          invalidateTasks();
+          toast.error(tAck("taskDeleteFailedTitle"));
+        }
+      }, 3000);
+    },
+    [user, authedFetch, queryClient, buildCurrentKey, invalidateTasks, invalidateStats, tAck]
+  );
+
+  const archiveTask = useCallback(
+    async (taskId: string): Promise<void> => {
+      const key = buildCurrentKey();
+      queryClient.setQueryData<TasksPage>(key, (old) =>
+        old ? { ...old, items: old.items.filter((t) => t.id !== taskId) } : old
+      );
+      await updateTask(taskId, { archived: true });
+    },
+    [updateTask, queryClient, buildCurrentKey]
+  );
 
-          if (taskToDelete.status === "completed") newStats.completed = Math.max(0, newStats.completed - 1);
-          else if (taskToDelete.status === "ongoing") newStats.ongoing = Math.max(0, newStats.ongoing - 1);
-          else if (taskToDelete.status === "not-started") newStats.notStarted = Math.max(0, newStats.notStarted - 1);
+  const restoreTask = useCallback(
+    async (taskId: string): Promise<void> => {
+      const key = buildCurrentKey();
+      queryClient.setQueryData<TasksPage>(key, (old) =>
+        old ? { ...old, items: old.items.filter((t) => t.id !== taskId) } : old
+      );
+      await updateTask(taskId, { archived: false });
+    },
+    [updateTask, queryClient, buildCurrentKey]
+  );
 
-          return newStats;
+  const importTasks = useCallback(
+    async (importedTasks: Task[]): Promise<void> => {
+      if (!user) return;
+      try {
+        await authedFetch("/api/backend/tasks/import", {
+          method: "POST",
+          body: JSON.stringify({ tasks: importedTasks }),
         });
-        setTotalTaskCount(prev => Math.max(0, prev - 1));
-
-        if (tasks.length === 1 && currentPage > 1) {
-          await refreshCurrentPage();
-        }
+        invalidateTasks();
+        invalidateStats();
+        toast.success(tAck("tasksImportedTitle", { count: importedTasks.length }));
       } catch (error) {
-        console.error("Failed to delete task:", error);
-        await refreshCurrentPage();
-        toast.error(tAck("taskDeleteFailedTitle"));
+        console.error("Failed to import tasks:", error);
+        toast.error(tAck("tasksImportFailedTitle"));
+        throw error;
       }
-    }, 3000); // 3 second delay before permanent deletion
-  };
-
-  const archiveTask = async (taskId: string): Promise<void> => {
-    await updateTask(taskId, { archived: true });
-    setTasks((prev) => prev.filter((t) => t.id !== taskId));
-  };
-
-  const restoreTask = async (taskId: string): Promise<void> => {
-    await updateTask(taskId, { archived: false });
-    setTasks((prev) => prev.filter((t) => t.id !== taskId));
-  };
-
-  const importTasks = async (importedTasks: Task[]): Promise<void> => {
-    if (!user) return;
-
-    try {
-      await authedFetch("/api/backend/tasks/import", {
-        method: "POST",
-        body: JSON.stringify({ tasks: importedTasks }),
-      });
-      await refreshCurrentPage();
-      await fetchStats();
-      toast.success(tAck("tasksImportedTitle", { count: importedTasks.length }));
-    } catch (error) {
-      console.error("Failed to import tasks:", error);
-      toast.error(tAck("tasksImportFailedTitle"));
-      throw error;
-    }
-  };
-
-  useEffect(() => {
-    if (!user) return;
-    refreshCurrentPage();
-  }, [user, currentPage, filterStatus, filterProject, refreshCurrentPage]);
+    },
+    [user, authedFetch, invalidateTasks, invalidateStats, tAck]
+  );
 
-  const getFilteredTasksForExport = async (): Promise<Task[]> => {
+  const getFilteredTasksForExport = useCallback(async (): Promise<Task[]> => {
     if (!user) return [];
     return fetchAllPages<Task>({
       pageSize: TASK_EXPORT_PAGE_SIZE,
       fetchPage: async (skip, limit) => {
         const params = new URLSearchParams();
-        params.set("status", filterStatus);
-        params.set("projectId", filterProject);
+        params.set("status", filterStatusRef.current);
+        params.set("projectId", filterProjectRef.current);
         params.set("skip", String(skip));
         params.set("limit", String(limit));
-        const res = await authedFetch(`/api/backend/tasks/export?${params.toString()}`, { method: "GET" });
+        const res = await authedFetchRef.current(
+          `/api/backend/tasks/export?${params.toString()}`,
+          { method: "GET" }
+        );
         return (await res.json()) as Task[];
       },
     });
-  };
+  }, [user]);
+
+  // Flush pending deletes from prior sessions
+  useEffect(() => {
+    if (!user) return;
+    let cancelled = false;
+    (async () => {
+      const pending = await getAllPendingDeletes(user.uid);
+      if (cancelled || pending.length === 0) return;
+      for (const entry of pending) {
+        try {
+          await authedFetchRef.current(`/api/backend/tasks/${entry.taskId}`, { method: "DELETE" });
+        } catch {
+          // Best effort
+        }
+        await removePendingDelete(entry.taskId);
+      }
+      invalidateTasks();
+      invalidateStats();
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [user, invalidateTasks, invalidateStats]);
+
+  const actions = useMemo<TaskActions>(
+    () => ({
+      addTask,
+      updateTask,
+      updateTaskStatus,
+      deleteTask,
+      archiveTask,
+      restoreTask,
+      importTasks,
+      getFilteredTasksForExport,
+      fetchNextPage,
+      fetchPreviousPage,
+      handlePageChange,
+      setFilterStatus,
+      setFilterProject,
+      setShowArchived,
+    }),
+    [
+      addTask,
+      updateTask,
+      updateTaskStatus,
+      deleteTask,
+      archiveTask,
+      restoreTask,
+      importTasks,
+      getFilteredTasksForExport,
+      fetchNextPage,
+      fetchPreviousPage,
+      handlePageChange,
+    ]
+  );
+
+  const value = useMemo<TaskContextType>(
+    () => ({
+      tasks,
+      isLoading,
+      currentPage,
+      totalPages,
+      totalTaskCount,
+      filterStatus,
+      setFilterStatus,
+      filterProject,
+      setFilterProject,
+      showArchived,
+      setShowArchived,
+      allTaskStats,
+      fetchNextPage,
+      fetchPreviousPage,
+      handlePageChange,
+      addTask,
+      updateTask,
+      updateTaskStatus,
+      deleteTask,
+      archiveTask,
+      restoreTask,
+      importTasks,
+      getFilteredTasksForExport,
+    }),
+    [
+      tasks,
+      isLoading,
+      currentPage,
+      totalPages,
+      totalTaskCount,
+      filterStatus,
+      filterProject,
+      showArchived,
+      allTaskStats,
+      fetchNextPage,
+      fetchPreviousPage,
+      handlePageChange,
+      addTask,
+      updateTask,
+      updateTaskStatus,
+      deleteTask,
+      archiveTask,
+      restoreTask,
+      importTasks,
+      getFilteredTasksForExport,
+    ]
+  );
 
   return (
-    <TaskContext.Provider
-      value={{
-        tasks,
-        isLoading,
-        currentPage,
-        totalPages,
-        totalTaskCount,
-        filterStatus,
-        setFilterStatus,
-        filterProject,
-        setFilterProject,
-        showArchived,
-        setShowArchived,
-        allTaskStats,
-        fetchNextPage,
-        fetchPreviousPage,
-        handlePageChange,
-        addTask,
-        updateTask,
-        updateTaskStatus,
-        deleteTask,
-        archiveTask,
-        restoreTask,
-        importTasks,
-        getFilteredTasksForExport,
-      }}
-    >
-      {children}
+    <TaskContext.Provider value={value}>
+      <TaskActionsContext.Provider value={actions}>{children}</TaskActionsContext.Provider>
     </TaskContext.Provider>
   );
 }
@@ -472,4 +646,12 @@ export const useTaskContext = () => {
     throw new Error("useTaskContext must be used within a TaskProvider");
   }
   return context;
-};
\ No newline at end of file
+};
+
+export const useTaskActions = () => {
+  const context = useContext(TaskActionsContext);
+  if (!context) {
+    throw new Error("useTaskActions must be used within a TaskProvider");
+  }
+  return context;
+};
diff --git a/apps/web/src/app/app/to-do/layout.tsx b/apps/web/src/app/app/to-do/layout.tsx
index af13b437..4018a25a 100644
--- a/apps/web/src/app/app/to-do/layout.tsx
+++ b/apps/web/src/app/app/to-do/layout.tsx
@@ -1,7 +1,15 @@
-import { generateToolMetadata } from '@/lib/metadata'
+import { Fraunces } from "next/font/google";
+import { generateToolMetadata } from "@/lib/metadata";
 
-export const metadata = generateToolMetadata('to-do')
+export const metadata = generateToolMetadata("to-do");
+
+const fraunces = Fraunces({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-display",
+  axes: ["SOFT"],
+});
 
 export default function ToDoLayout({ children }: { children: React.ReactNode }) {
-  return <>{children}</>
+  return <div className={`${fraunces.variable} todo-app contents`}>{children}</div>;
 }
diff --git a/apps/web/src/app/app/to-do/page.tsx b/apps/web/src/app/app/to-do/page.tsx
index 69cda700..1f192e76 100644
--- a/apps/web/src/app/app/to-do/page.tsx
+++ b/apps/web/src/app/app/to-do/page.tsx
@@ -3,6 +3,7 @@ import useAuth from "@/utils/useAuth";
 import { TaskProvider } from "@/app/app/to-do/context/TaskContext";
 import { TaskContainer } from "@/app/app/to-do/TaskContainer";
 import { ProjectProvider } from "@/app/app/to-do/context/ProjectContext";
+import { ToDoQueryProvider } from "@/app/app/to-do/providers";
 import { useTranslations } from "next-intl";
 import { Skeleton } from "@/components/ui/skeleton";
 
@@ -38,10 +39,12 @@ export default function ToDoPage() {
   }
 
   return (
-    <ProjectProvider>
-      <TaskProvider>
-        <TaskContainer />
-      </TaskProvider>
-    </ProjectProvider>
+    <ToDoQueryProvider>
+      <ProjectProvider>
+        <TaskProvider>
+          <TaskContainer />
+        </TaskProvider>
+      </ProjectProvider>
+    </ToDoQueryProvider>
   );
 }
\ No newline at end of file
diff --git a/apps/web/src/app/app/to-do/providers.tsx b/apps/web/src/app/app/to-do/providers.tsx
new file mode 100644
index 00000000..550cb563
--- /dev/null
+++ b/apps/web/src/app/app/to-do/providers.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+export function ToDoQueryProvider({ children }: { children: ReactNode }) {
+  const [client] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 30_000,
+            gcTime: 5 * 60_000,
+            refetchOnWindowFocus: false,
+            retry: 1,
+          },
+        },
+      })
+  );
+
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+}
diff --git a/apps/web/src/app/app/to-do/utils/pendingDeletes.ts b/apps/web/src/app/app/to-do/utils/pendingDeletes.ts
new file mode 100644
index 00000000..7017989b
--- /dev/null
+++ b/apps/web/src/app/app/to-do/utils/pendingDeletes.ts
@@ -0,0 +1,72 @@
+import { Task } from "@/app/app/to-do/types/Task";
+
+const DB_NAME = "todo-app";
+const DB_VERSION = 1;
+const STORE_NAME = "pending-deletes";
+
+export interface PendingDelete {
+  taskId: string;
+  task: Task;
+  deleteAt: number;
+  userId: string;
+}
+
+function openDb(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    if (typeof indexedDB === "undefined") {
+      reject(new Error("IndexedDB not available"));
+      return;
+    }
+    const req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME, { keyPath: "taskId" });
+      }
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+function promisifyRequest<T>(req: IDBRequest<T>): Promise<T> {
+  return new Promise((resolve, reject) => {
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+export async function enqueuePendingDelete(entry: PendingDelete): Promise<void> {
+  try {
+    const db = await openDb();
+    const tx = db.transaction(STORE_NAME, "readwrite");
+    await promisifyRequest(tx.objectStore(STORE_NAME).put(entry));
+    db.close();
+  } catch (err) {
+    console.warn("pendingDeletes.enqueue failed", err);
+  }
+}
+
+export async function removePendingDelete(taskId: string): Promise<void> {
+  try {
+    const db = await openDb();
+    const tx = db.transaction(STORE_NAME, "readwrite");
+    await promisifyRequest(tx.objectStore(STORE_NAME).delete(taskId));
+    db.close();
+  } catch (err) {
+    console.warn("pendingDeletes.remove failed", err);
+  }
+}
+
+export async function getAllPendingDeletes(userId: string): Promise<PendingDelete[]> {
+  try {
+    const db = await openDb();
+    const tx = db.transaction(STORE_NAME, "readonly");
+    const all = await promisifyRequest(tx.objectStore(STORE_NAME).getAll());
+    db.close();
+    return ((all as PendingDelete[]) ?? []).filter((entry) => entry.userId === userId);
+  } catch (err) {
+    console.warn("pendingDeletes.getAll failed", err);
+    return [];
+  }
+}
diff --git a/apps/web/src/app/app/to-do/utils/taskDate.ts b/apps/web/src/app/app/to-do/utils/taskDate.ts
new file mode 100644
index 00000000..70f53772
--- /dev/null
+++ b/apps/web/src/app/app/to-do/utils/taskDate.ts
@@ -0,0 +1,40 @@
+import { parseISO } from "date-fns/parseISO";
+import { isValid } from "date-fns/isValid";
+import { parse } from "date-fns/parse";
+
+export function safeParseDate(dateString: string | undefined): Date | null {
+  if (!dateString) return null;
+
+  try {
+    const isoDate = parseISO(dateString);
+    if (isValid(isoDate)) return isoDate;
+  } catch {
+    // not ISO
+  }
+
+  try {
+    const parsedDate = parse(dateString, "dd MMM yyyy, hh:mm a", new Date());
+    if (isValid(parsedDate)) return parsedDate;
+  } catch {
+    // not that format
+  }
+
+  try {
+    const datePart = dateString.split(",")[0]?.trim();
+    if (datePart) {
+      const parsedDate = parse(datePart, "dd MMM yyyy", new Date());
+      if (isValid(parsedDate)) return parsedDate;
+    }
+  } catch {
+    // fall through
+  }
+
+  try {
+    const date = new Date(dateString);
+    if (isValid(date)) return date;
+  } catch {
+    // not a date
+  }
+
+  return null;
+}
diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
index d3a9d305..dea12ed1 100644
--- a/apps/web/src/app/dashboard/page.tsx
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -12,6 +12,7 @@ import useAuth from '@/utils/useAuth'
 import { Button } from '@/components/ui/button'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { TooltipProvider } from '@/components/ui/tooltip'
 import {
   type FavoriteItem,
   type RenderToolItem,
@@ -252,6 +253,7 @@ const DashboardPage: React.FC = () => {
   const toolCardProps = { user, isPinned, togglePin }
 
   return (
+    <TooltipProvider delayDuration={300} disableHoverableContent>
     <div className="min-h-screen bg-background/50 dashboard-grid-bg mobile-nav-offset">
       {/* ── Mobile Sticky Header (outside padded container for full-bleed) ── */}
       <DashboardHero
@@ -368,6 +370,7 @@ const DashboardPage: React.FC = () => {
         </div>
       </div>
     </div>
+    </TooltipProvider>
   )
 }
 
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 0c948110..5ec834c8 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -651,6 +651,24 @@ body {
     animation: shimmer 8s linear infinite;
   }
 
+  .skeleton-shimmer {
+    background-image: linear-gradient(
+      90deg,
+      hsl(var(--muted)) 0%,
+      hsl(var(--muted-foreground) / 0.08) 50%,
+      hsl(var(--muted)) 100%
+    );
+    background-size: 1000px 100%;
+    animation: shimmer 1.6s linear infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton-shimmer {
+      animation: none;
+      background: hsl(var(--muted));
+    }
+  }
+
   /* Animated gradient text for welcome heading */
   @keyframes gradient-shift {
 
@@ -1368,4 +1386,63 @@ body {
       opacity: 0.5;
     }
   }
+}
+
+/* ===========================================================================
+   Todo app — editorial productivity theme
+   Scoped under .todo-app so it never leaks into other tools.
+   =========================================================================== */
+.todo-app {
+  --todo-accent: 220 14% 16%;
+  --todo-accent-soft: 220 14% 16% / 0.08;
+  --todo-status-not-started: 210 70% 50%;
+  --todo-status-ongoing: 28 95% 55%;
+  --todo-status-completed: 145 60% 38%;
+}
+
+.dark .todo-app {
+  --todo-accent: 40 18% 88%;
+  --todo-accent-soft: 40 18% 88% / 0.1;
+}
+
+.todo-app .font-display {
+  font-family: var(--font-display), "Iowan Old Style", Georgia, serif;
+  letter-spacing: -0.02em;
+  font-feature-settings: "ss01", "ss02";
+}
+
+.todo-app .font-meta {
+  font-family: var(--font-geist-mono), ui-monospace, "SF Mono", monospace;
+  font-feature-settings: "tnum", "zero";
+  letter-spacing: 0;
+}
+
+/* Status dot indicator — replaces pastel column/card backgrounds */
+.todo-app .status-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+  display: inline-block;
+  flex-shrink: 0;
+}
+.todo-app .status-dot[data-status="not-started"] { background: hsl(var(--todo-status-not-started)); }
+.todo-app .status-dot[data-status="ongoing"]     { background: hsl(var(--todo-status-ongoing)); }
+.todo-app .status-dot[data-status="completed"]   { background: hsl(var(--todo-status-completed)); }
+
+/* Subtle paper grain — atmosphere without noise */
+.todo-app .paper-grain {
+  position: relative;
+}
+.todo-app .paper-grain::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.4'/></svg>");
+  opacity: 0.025;
+  mix-blend-mode: multiply;
+}
+.dark .todo-app .paper-grain::before {
+  mix-blend-mode: screen;
+  opacity: 0.04;
 }
\ No newline at end of file
diff --git a/apps/web/src/components/api-client/__tests__/response-panel.large-body.test.tsx b/apps/web/src/components/api-client/__tests__/response-panel.large-body.test.tsx
new file mode 100644
index 00000000..74cad89c
--- /dev/null
+++ b/apps/web/src/components/api-client/__tests__/response-panel.large-body.test.tsx
@@ -0,0 +1,71 @@
+/**
+ * Tests for the large-body truncation logic in ResponsePanel.
+ *
+ * Note: @testing-library/react is not installed in this project, so we cannot
+ * render ResponsePanel and assert on the amber banner in the DOM. Instead, we
+ * test the pure `truncateBody` helper that encapsulates the slicing decision.
+ * This gives full coverage of the threshold logic without needing a browser
+ * environment.
+ *
+ * If @testing-library/react is ever added, replace the skipped test below with
+ * a real render assertion.
+ */
+
+import { truncateBody } from "../truncate-body"
+
+const MAX_INLINE_BYTES = 2 * 1024 * 1024 // 2MB — mirrors the constant in response-panel.tsx
+
+describe("truncateBody", () => {
+    it("returns the full string when body is under the threshold", () => {
+        const body = "x".repeat(100)
+        const result = truncateBody(body, MAX_INLINE_BYTES)
+        expect(result.inline).toBe(body)
+        expect(result.truncated).toBe(false)
+    })
+
+    it("returns the full string when body is exactly at the threshold", () => {
+        const body = "x".repeat(MAX_INLINE_BYTES)
+        const result = truncateBody(body, MAX_INLINE_BYTES)
+        expect(result.inline).toBe(body)
+        expect(result.truncated).toBe(false)
+    })
+
+    it("truncates body that exceeds the threshold and sets truncated=true", () => {
+        const body = "x".repeat(MAX_INLINE_BYTES + 1)
+        const result = truncateBody(body, MAX_INLINE_BYTES)
+        expect(result.inline.length).toBe(MAX_INLINE_BYTES)
+        expect(result.truncated).toBe(true)
+    })
+
+    it("truncated slice is the first MAX_INLINE_BYTES characters", () => {
+        const body = "a".repeat(MAX_INLINE_BYTES) + "b".repeat(10)
+        const result = truncateBody(body, MAX_INLINE_BYTES)
+        expect(result.inline).toBe("a".repeat(MAX_INLINE_BYTES))
+        expect(result.truncated).toBe(true)
+    })
+
+    it("returns empty string and truncated=false for empty body", () => {
+        const result = truncateBody("", MAX_INLINE_BYTES)
+        expect(result.inline).toBe("")
+        expect(result.truncated).toBe(false)
+    })
+
+    it("works with a custom max parameter", () => {
+        const body = "hello world"
+        const result = truncateBody(body, 5)
+        expect(result.inline).toBe("hello")
+        expect(result.truncated).toBe(true)
+    })
+})
+
+it.skip("ResponsePanel shows amber truncation banner for >2MB body (requires @testing-library/react)", () => {
+    // TODO: once @testing-library/react is available, render <ResponsePanel> with
+    // a >2MB body and assert the amber banner and "Download full body" button appear.
+    //
+    // import { render, screen } from "@testing-library/react"
+    // const huge = "x".repeat(2 * 1024 * 1024 + 1)
+    // render(<ResponsePanel response={{ status: 200, statusText: "OK", headers: {}, body: huge,
+    //   time: 10, size: huge.length }} />)
+    // expect(screen.getByText(/Showing first/)).toBeInTheDocument()
+    // expect(screen.getByRole("button", { name: /Download full body/ })).toBeInTheDocument()
+})
diff --git a/apps/web/src/components/api-client/__tests__/virtual-history-list.test.tsx b/apps/web/src/components/api-client/__tests__/virtual-history-list.test.tsx
new file mode 100644
index 00000000..e5f91b82
--- /dev/null
+++ b/apps/web/src/components/api-client/__tests__/virtual-history-list.test.tsx
@@ -0,0 +1,87 @@
+// Approach: mock react-window so List calls rowComponent once with index:0, style:{}.
+// This lets us assert that renderRow is invoked without @testing-library/react (not installed).
+// The virtualization cap (renders << total items) is validated at the integration level.
+
+jest.mock("react-window", () => {
+    const React = require("react")
+    return {
+        List: ({ rowComponent: RowComponent, rowProps, rowCount }: {
+            rowComponent: React.ComponentType<{ ariaAttributes: object; index: number; style: React.CSSProperties } & typeof rowProps>
+            rowProps: Record<string, unknown>
+            rowCount: number
+            rowHeight: number
+            style?: React.CSSProperties
+            defaultHeight?: number
+        }) => {
+            if (rowCount === 0) return null
+            return React.createElement(RowComponent, {
+                ariaAttributes: { "aria-posinset": 1, "aria-setsize": rowCount, role: "listitem" },
+                index: 0,
+                style: {},
+                ...rowProps,
+            })
+        },
+    }
+})
+
+describe("VirtualHistoryList", () => {
+    it("is a React.memo component", () => {
+        const { VirtualHistoryList } = require("../collections/virtual-history-list")
+        expect(VirtualHistoryList.$$typeof).toBe(Symbol.for("react.memo"))
+    })
+
+    it("calls renderRow with the first item and a style object", () => {
+        const React = require("react")
+        const ReactDOM = require("react-dom/server")
+        const { VirtualHistoryList } = require("../collections/virtual-history-list")
+
+        const item: import("../types").HistoryRequest = {
+            id: "1",
+            name: "Test",
+            method: "GET",
+            url: "https://example.com",
+            params: [],
+            headers: [],
+            body: { type: "none", content: "" },
+            auth: { type: "none" },
+            timestamp: 1000,
+        }
+
+        const renderRow = jest.fn((_item: unknown, style: React.CSSProperties) =>
+            React.createElement("div", { style }, "row")
+        )
+
+        ReactDOM.renderToStaticMarkup(
+            React.createElement(VirtualHistoryList, {
+                items: [item],
+                height: 400,
+                onSelect: () => {},
+                onDelete: () => {},
+                renderRow,
+            })
+        )
+
+        expect(renderRow).toHaveBeenCalledTimes(1)
+        expect(renderRow).toHaveBeenCalledWith(item, {})
+    })
+
+    it("renders nothing when items array is empty", () => {
+        const React = require("react")
+        const ReactDOM = require("react-dom/server")
+        const { VirtualHistoryList } = require("../collections/virtual-history-list")
+
+        const renderRow = jest.fn()
+
+        ReactDOM.renderToStaticMarkup(
+            React.createElement(VirtualHistoryList, {
+                items: [],
+                height: 400,
+                onSelect: () => {},
+                onDelete: () => {},
+                renderRow,
+            })
+        )
+
+        expect(renderRow).not.toHaveBeenCalled()
+    })
+})
diff --git a/apps/web/src/components/api-client/api-client.tsx b/apps/web/src/components/api-client/api-client.tsx
index ed3c835a..5f930c35 100644
--- a/apps/web/src/components/api-client/api-client.tsx
+++ b/apps/web/src/components/api-client/api-client.tsx
@@ -8,10 +8,11 @@ import { RequestTabs } from "./request-tabs"
 import { ResponsePanel } from "./response-panel"
 import { TabBar } from "./tab-bar"
 import { ImportCurlDialog } from "./import-curl-dialog"
+import { HelpShortcutsDialog } from "./help-shortcuts-dialog"
+import { SaveRequestDialog } from "./collections/save-request-dialog"
 import { parseCurlCommand } from "@/utils/curl-parser"
 import { CollectionsSidebar } from "./collections/collections-sidebar"
-import { EnvironmentManager } from "./environment-manager"
-import { CodeGenerator } from "./code-generator"
+import dynamic from "next/dynamic"
 import {
     RequestMethod,
     ApiRequestState,
@@ -25,14 +26,26 @@ import { toast } from "sonner"
 import { useIsMobile } from "@/components/hooks/use-mobile"
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
 import { Button } from "@/components/ui/button"
-import { FolderOpen, PanelRight } from "lucide-react"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { FolderOpen, PanelRight, MoreVertical } from "lucide-react"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator } from "@/components/ui/dropdown-menu"
+import { IconCode, IconSettings } from "@tabler/icons-react"
 import { cn } from "@/lib/utils"
 import { ensureHttpScheme } from "@/lib/url-normalize"
 import { useJsonFormatter } from "./workers/use-json-formatter"
-import { TabsProvider, useTabs, useTabsActions, createNewTab } from "./context/tabs-context"
-import { CollectionsProvider, useCollectionsState, useCollectionsActions } from "./context/collections-context"
-import { EnvironmentsProvider, useEnvironmentsState, useEnvironmentsActions } from "./context/environments-context"
-import { HistoryProvider, useHistoryState, useHistoryActions } from "./context/history-context"
+import { useTabs, useTabsActions, createNewTab } from "./context/tabs-context"
+import { useCollectionsState, useCollectionsActions } from "./context/collections-context"
+import { useEnvironmentsState, useEnvironmentsActions } from "./context/environments-context"
+import { useHistoryState, useHistoryActions } from "./context/history-context"
+
+const EnvironmentManager = dynamic(
+    () => import("./environment-manager").then(m => ({ default: m.EnvironmentManager })),
+    { ssr: false, loading: () => null }
+)
+const CodeGenerator = dynamic(
+    () => import("./code-generator").then(m => ({ default: m.CodeGenerator })),
+    { ssr: false, loading: () => null }
+)
 
 /** `new URL()` requires a scheme; host-only URLs (e.g. `api.example.com/v1`) are common in API clients. */
 function buildRequestUrl(raw: string): URL {
@@ -57,18 +70,37 @@ function ApiClientInner() {
     const { addTab, appendTab, closeTab, duplicateTab, renameTab, reorderTabs, setActiveTabId, updateActiveTab } = useTabsActions()
 
     const abortControllerRef = React.useRef<AbortController | null>(null)
+
+    // Abort any in-flight request when the component unmounts.
+    React.useEffect(() => () => abortControllerRef.current?.abort(), [])
+
     const { format: formatJson } = useJsonFormatter()
     const { collections } = useCollectionsState()
     const { saveRequest } = useCollectionsActions()
     const { history } = useHistoryState()
-    const { addHistoryItem, clearHistory, deleteHistoryItem } = useHistoryActions()
+    const { addHistoryItem } = useHistoryActions()
     const { environments, activeEnvId, activeEnvironmentVariables } = useEnvironmentsState()
-    const { setActiveEnvId, addEnvironment, updateEnvironment, deleteEnvironment, substituteVariables } = useEnvironmentsActions()
+    const { substituteVariables, setActiveEnvId } = useEnvironmentsActions()
 
     const isMobile = useIsMobile()
     const [collectionsOpen, setCollectionsOpen] = React.useState(false)
     const [sidebarOpen, setSidebarOpen] = React.useState(true)
     const [mobilePanel, setMobilePanel] = React.useState<'request' | 'response'>('request')
+    const [envMgrOpen, setEnvMgrOpen] = React.useState(false)
+    const [codeGenOpen, setCodeGenOpen] = React.useState(false)
+    const [importCurlOpen, setImportCurlOpen] = React.useState(false)
+    const [helpOpen, setHelpOpen] = React.useState(false)
+    const [saveOpen, setSaveOpen] = React.useState(false)
+
+    // Scroll position memory for mobile panel toggle
+    const scrollMemory = React.useRef<{ request: number; response: number }>({ request: 0, response: 0 })
+    const requestScrollRef = React.useRef<HTMLDivElement | null>(null)
+    const responseScrollRef = React.useRef<HTMLDivElement | null>(null)
+
+    React.useLayoutEffect(() => {
+        const el = mobilePanel === 'request' ? requestScrollRef.current : responseScrollRef.current
+        if (el) el.scrollTop = scrollMemory.current[mobilePanel]
+    }, [mobilePanel])
 
     const urlHistory = React.useMemo(() => {
         const seen = new Set<string>()
@@ -82,6 +114,12 @@ function ApiClientInner() {
         return urls
     }, [history])
 
+    const isBodyInvalid = React.useMemo(() => {
+        if (activeTab.body.type !== "json") return false
+        if (!activeTab.body.content.trim()) return false
+        try { JSON.parse(activeTab.body.content); return false } catch { return true }
+    }, [activeTab.body])
+
     const replaceUrlWithEnvBaseUrl = React.useCallback((url: string | undefined) => {
         if (!url || !activeEnvId) return url
         const activeEnv = environments.find(e => e.id === activeEnvId)
@@ -432,12 +470,95 @@ function ApiClientInner() {
                         </Sheet>
                     )}
                     <div className="flex flex-wrap items-center gap-2 ml-auto">
-                        <EnvironmentManager />
-                        <div className="h-6 w-px bg-border/50 mx-1" />
-                        <CodeGenerator request={activeTab} />
-                        <ImportCurlDialog onImport={handleImportCurl} />
-                        {!isMobile && (
+                        {isMobile ? (
+                            /* Mobile: secondary actions collapsed into dropdown */
                             <>
+                                <DropdownMenu>
+                                    <DropdownMenuTrigger asChild>
+                                        <Button variant="ghost" size="icon" className="h-8 w-8" aria-label={t("toolbar.moreActions")}>
+                                            <MoreVertical className="h-4 w-4" />
+                                        </Button>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent align="end">
+                                        <DropdownMenuItem onSelect={() => setCodeGenOpen(true)}>
+                                            <IconCode className="h-4 w-4 mr-2" />
+                                            {t("toolbar.code")}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem onSelect={() => setSaveOpen(true)}>
+                                            {t("toolbar.save")}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem onSelect={() => setImportCurlOpen(true)}>
+                                            {t("toolbar.importCurl")}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuSeparator />
+                                        <DropdownMenuItem onSelect={() => setEnvMgrOpen(true)}>
+                                            <IconSettings className="h-4 w-4 mr-2" />
+                                            {t("toolbar.environments")}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem onSelect={() => setHelpOpen(true)}>
+                                            {t("toolbar.shortcuts")}
+                                        </DropdownMenuItem>
+                                    </DropdownMenuContent>
+                                </DropdownMenu>
+                                {/* Env selector stays inline on mobile for quick switching */}
+                                <Select
+                                    value={activeEnvId || "none"}
+                                    onValueChange={(val) => setActiveEnvId(val === "none" ? null : val)}
+                                >
+                                    <SelectTrigger className="w-[130px] h-8 text-xs">
+                                        <SelectValue placeholder={t("environmentManager.noEnvironment")} />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="none">{t("environmentManager.noEnvironment")}</SelectItem>
+                                        {environments.map(env => (
+                                            <SelectItem key={env.id} value={env.id}>{env.name}</SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                            </>
+                        ) : (
+                            /* Desktop: all buttons inline */
+                            <>
+                                <Select
+                                    value={activeEnvId || "none"}
+                                    onValueChange={(val) => setActiveEnvId(val === "none" ? null : val)}
+                                >
+                                    <SelectTrigger className="w-[150px] h-8 text-xs">
+                                        <SelectValue placeholder={t("environmentManager.noEnvironment")} />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="none">{t("environmentManager.noEnvironment")}</SelectItem>
+                                        {environments.map(env => (
+                                            <SelectItem key={env.id} value={env.id}>{env.name}</SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                                <Button
+                                    variant="ghost"
+                                    size="icon"
+                                    className="h-8 w-8"
+                                    title={t("environmentManager.manageDialogTitle")}
+                                    onClick={() => setEnvMgrOpen(true)}
+                                >
+                                    <IconSettings className="h-4 w-4" />
+                                </Button>
+                                <div className="h-6 w-px bg-border/50 mx-1" />
+                                <Button
+                                    variant="ghost"
+                                    size="icon"
+                                    className="h-8 w-8"
+                                    title={t("codeGenerator.triggerTitle")}
+                                    onClick={() => setCodeGenOpen(true)}
+                                >
+                                    <IconCode className="h-4 w-4" />
+                                </Button>
+                                <SaveRequestDialog
+                                    collections={collections}
+                                    onSave={handleSaveRequest}
+                                    defaultName={activeTab.name !== API_CLIENT_DEFAULT_TAB_NAME ? activeTab.name : ""}
+                                />
+                                <ImportCurlDialog onImport={handleImportCurl} />
+                                <HelpShortcutsDialog />
                                 <div className="h-6 w-px bg-border/50 mx-1" />
                                 <Button
                                     variant="ghost"
@@ -450,6 +571,30 @@ function ApiClientInner() {
                                 </Button>
                             </>
                         )}
+                        {/* Dialogs rendered outside the conditional so state is preserved */}
+                        {envMgrOpen && (
+                            <EnvironmentManager open={envMgrOpen} onOpenChange={setEnvMgrOpen} />
+                        )}
+                        {codeGenOpen && (
+                            <CodeGenerator
+                                request={activeTab}
+                                open={codeGenOpen}
+                                onOpenChange={setCodeGenOpen}
+                            />
+                        )}
+                        {isMobile && (
+                            <>
+                                <ImportCurlDialog onImport={handleImportCurl} open={importCurlOpen} onOpenChange={setImportCurlOpen} />
+                                <HelpShortcutsDialog open={helpOpen} onOpenChange={setHelpOpen} />
+                                <SaveRequestDialog
+                                    collections={collections}
+                                    onSave={handleSaveRequest}
+                                    defaultName={activeTab.name !== API_CLIENT_DEFAULT_TAB_NAME ? activeTab.name : ""}
+                                    open={saveOpen}
+                                    onOpenChange={setSaveOpen}
+                                />
+                            </>
+                        )}
                     </div>
                 </div>
 
@@ -502,9 +647,13 @@ function ApiClientInner() {
 
                     <div className="flex-1 overflow-hidden min-h-0 bg-card/30">
                         {isMobile ? (
-                            /* Mobile: single panel toggled by tabs */
-                            <div className="h-full overflow-y-auto">
-                                {mobilePanel === 'request' ? (
+                            /* Mobile: separate scroll containers per panel — scroll position preserved on toggle */
+                            <>
+                                <div
+                                    ref={requestScrollRef}
+                                    className={`h-full overflow-y-auto${mobilePanel === 'request' ? '' : ' hidden'}`}
+                                    onScroll={(e) => { scrollMemory.current.request = (e.target as HTMLDivElement).scrollTop }}
+                                >
                                     <div className="p-4 flex flex-col gap-6 min-h-full">
                                         <RequestPanel
                                             method={activeTab.method}
@@ -514,11 +663,10 @@ function ApiClientInner() {
                                             onSend={handleSend}
                                             onCancel={handleCancel}
                                             isLoading={activeTab.isLoading}
-                                            collections={collections}
-                                            onSave={handleSaveRequest}
-                                            saveDefaultName={activeTab.name !== API_CLIENT_DEFAULT_TAB_NAME ? activeTab.name : ""}
+                                            isBodyInvalid={isBodyInvalid}
                                             onPaste={handleCurlPaste}
                                             urlHistory={urlHistory}
+                                            tabId={activeTab.id}
                                         />
                                         <RequestTabs
                                             params={activeTab.params}
@@ -531,12 +679,17 @@ function ApiClientInner() {
                                             setAuth={(auth) => updateActiveTab({ auth })}
                                         />
                                     </div>
-                                ) : (
+                                </div>
+                                <div
+                                    ref={responseScrollRef}
+                                    className={`h-full overflow-y-auto${mobilePanel === 'response' ? '' : ' hidden'}`}
+                                    onScroll={(e) => { scrollMemory.current.response = (e.target as HTMLDivElement).scrollTop }}
+                                >
                                     <div className="p-4">
-                                        <ResponsePanel response={activeTab.response} />
+                                        <ResponsePanel response={activeTab.response} isLoading={activeTab.isLoading} />
                                     </div>
-                                )}
-                            </div>
+                                </div>
+                            </>
                         ) : (
                             /* Desktop: side-by-side resizable panels */
                             <ResizablePanelGroup direction="horizontal" className="h-full w-full">
@@ -550,11 +703,10 @@ function ApiClientInner() {
                                             onSend={handleSend}
                                             onCancel={handleCancel}
                                             isLoading={activeTab.isLoading}
-                                            collections={collections}
-                                            onSave={handleSaveRequest}
-                                            saveDefaultName={activeTab.name !== API_CLIENT_DEFAULT_TAB_NAME ? activeTab.name : ""}
+                                            isBodyInvalid={isBodyInvalid}
                                             onPaste={handleCurlPaste}
                                             urlHistory={urlHistory}
+                                            tabId={activeTab.id}
                                         />
                                         <div className="flex-1 min-h-0">
                                             <RequestTabs
@@ -575,7 +727,7 @@ function ApiClientInner() {
 
                                 <ResizablePanel defaultSize={50} minSize={30} className="flex flex-col h-full bg-muted/[0.02]">
                                     <div className="p-4 md:p-6 lg:p-8 flex-1 overflow-y-auto min-h-0 custom-scrollbar">
-                                        <ResponsePanel response={activeTab.response} />
+                                        <ResponsePanel response={activeTab.response} isLoading={activeTab.isLoading} />
                                     </div>
                                 </ResizablePanel>
                             </ResizablePanelGroup>
@@ -602,15 +754,5 @@ function ApiClientInner() {
 }
 
 export function ApiClient() {
-    return (
-        <TabsProvider>
-            <CollectionsProvider>
-                <EnvironmentsProvider>
-                    <HistoryProvider>
-                        <ApiClientInner />
-                    </HistoryProvider>
-                </EnvironmentsProvider>
-            </CollectionsProvider>
-        </TabsProvider>
-    )
+    return <ApiClientInner />
 }
diff --git a/apps/web/src/components/api-client/code-generator.tsx b/apps/web/src/components/api-client/code-generator.tsx
index 2962e557..631f0952 100644
--- a/apps/web/src/components/api-client/code-generator.tsx
+++ b/apps/web/src/components/api-client/code-generator.tsx
@@ -6,9 +6,7 @@ import {
     DialogContent,
     DialogHeader,
     DialogTitle,
-    DialogTrigger,
 } from "@/components/ui/dialog"
-import { Button } from "@/components/ui/button"
 import {
     Select,
     SelectContent,
@@ -16,8 +14,9 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select"
+import { Button } from "@/components/ui/button"
 import { ScrollArea } from "@/components/ui/scroll-area"
-import { IconCode, IconCopy, IconCheck } from "@tabler/icons-react"
+import { IconCopy, IconCheck } from "@tabler/icons-react"
 import { ApiRequestState } from "./types"
 import { generateCode, CodeLanguage } from "./generate-code"
 import { toast } from "sonner"
@@ -25,9 +24,11 @@ import { useTranslations } from "next-intl"
 
 interface CodeGeneratorProps {
     request: ApiRequestState
+    open: boolean
+    onOpenChange: (open: boolean) => void
 }
 
-export function CodeGenerator({ request }: CodeGeneratorProps) {
+export function CodeGenerator({ request, open, onOpenChange }: CodeGeneratorProps) {
     const t = useTranslations("ApiClient.codeGenerator")
     const tApi = useTranslations("ApiClient")
     const [language, setLanguage] = React.useState<CodeLanguage>("curl")
@@ -52,12 +53,7 @@ export function CodeGenerator({ request }: CodeGeneratorProps) {
     }
 
     return (
-        <Dialog>
-            <DialogTrigger asChild>
-                <Button variant="ghost" size="icon" title={t("triggerTitle")}>
-                    <IconCode className="h-4 w-4" />
-                </Button>
-            </DialogTrigger>
+        <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="max-w-2xl">
                 <DialogHeader>
                     <DialogTitle>{t("dialogTitle")}</DialogTitle>
diff --git a/apps/web/src/components/api-client/collections/collections-sidebar.tsx b/apps/web/src/components/api-client/collections/collections-sidebar.tsx
index 6739e853..99d40ef7 100644
--- a/apps/web/src/components/api-client/collections/collections-sidebar.tsx
+++ b/apps/web/src/components/api-client/collections/collections-sidebar.tsx
@@ -6,9 +6,9 @@ import { Checkbox } from "@/components/ui/checkbox"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { Collection, CollectionRequest } from "../types"
 import { CollectionItem } from "./collection-item"
-import { FolderPlus, Trash2, Pencil, MoreHorizontal, Search, X, Loader2 } from "lucide-react"
-import { useInfiniteScroll } from "@/hooks/use-infinite-scroll"
+import { FolderPlus, Trash2, Pencil, MoreHorizontal, Search, X } from "lucide-react"
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
+import { VirtualHistoryList } from "./virtual-history-list"
 import { cn } from "@/lib/utils"
 import {
     Dialog,
@@ -31,26 +31,19 @@ import { useTranslations } from "next-intl"
 import { getApiClientRequestDisplayName } from "../display-name"
 import { useCollectionsState, useCollectionsActions } from "../context/collections-context"
 import { useHistoryState, useHistoryActions } from "../context/history-context"
+import { CollectionsSidebarSkeleton, HistoryListSkeleton } from "../skeletons"
+import { useDebouncedValue } from "@/lib/use-debounced-value"
 
 interface CollectionsSidebarProps {
     onLoadRequest: (request: CollectionRequest) => void
 }
 
-function useDebouncedValue<T>(value: T, ms: number): T {
-    const [v, setV] = React.useState(value)
-    React.useEffect(() => {
-        const id = setTimeout(() => setV(value), ms)
-        return () => clearTimeout(id)
-    }, [value, ms])
-    return v
-}
-
 export function CollectionsSidebar({
     onLoadRequest,
 }: CollectionsSidebarProps) {
     const { collections, isLoading } = useCollectionsState()
     const { addFolder: onAddFolder, deleteItem: onDelete, toggleFolder: onToggle, createCollection: onCreateCollection, renameCollection: onRenameCollection, renameFolder: onRenameFolder, deleteMultipleCollections: onDeleteMultiple } = useCollectionsActions()
-    const { history } = useHistoryState()
+    const { history, isLoading: isHistoryLoading } = useHistoryState()
     const { clearHistory: onClearHistory, deleteHistoryItem: onDeleteHistoryItem } = useHistoryActions()
     const t = useTranslations("ApiClient.collectionsSidebar")
     const tRoot = useTranslations("ApiClient")
@@ -68,18 +61,24 @@ export function CollectionsSidebar({
         )
     }, [history, debouncedSearch])
 
-    const historyScrollRef = React.useRef<HTMLDivElement>(null)
-    const { displayCount: historyDisplayCount, sentinelRef: historySentinelRef, hasMore: historyHasMore } = useInfiniteScroll({
-        totalCount: filteredHistory.length,
-        resetKey: debouncedSearch,
-        pageSize: 30,
-        scrollContainerRef: historyScrollRef,
-    })
+    // FixedSizeList virtualizes overflow; all filtered items are passed directly.
+    const visibleHistory = filteredHistory
+
+    // Measure the flex container height so FixedSizeList fills it exactly.
+    const historyListContainerRef = React.useRef<HTMLDivElement>(null)
+    const [historyListHeight, setHistoryListHeight] = React.useState(400)
+    React.useEffect(() => {
+        const el = historyListContainerRef.current
+        if (!el) return
+        const obs = new ResizeObserver(([entry]) => {
+            if (entry) setHistoryListHeight(entry.contentRect.height)
+        })
+        obs.observe(el)
+        // Set initial height
+        setHistoryListHeight(el.clientHeight || 400)
+        return () => obs.disconnect()
+    }, [])
 
-    const visibleHistory = React.useMemo(
-        () => filteredHistory.slice(0, historyDisplayCount),
-        [filteredHistory, historyDisplayCount]
-    )
     const [newFolderDialogOpen, setNewFolderDialogOpen] = React.useState(false)
     const [newCollectionDialogOpen, setNewCollectionDialogOpen] = React.useState(false)
     const [renameCollectionDialogOpen, setRenameCollectionDialogOpen] = React.useState(false)
@@ -183,10 +182,8 @@ export function CollectionsSidebar({
                 <TabsContent value="collections" className="flex-1 flex flex-col min-h-0 m-0 data-[state=inactive]:hidden outline-none">
                     <ScrollArea className="flex-1">
                         <div className="p-3">
-                            {isLoading ? (
-                                <div className="flex items-center justify-center p-8">
-                                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground/50" />
-                                </div>
+                            {isLoading && collections.length === 0 ? (
+                                <CollectionsSidebarSkeleton />
                             ) : collections.length === 0 ? (
                                 <div className="flex flex-col items-center justify-center p-8 text-center border border-dashed rounded-xl bg-muted/30 mx-2 mt-4">
                                     <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center mb-3">
@@ -307,81 +304,83 @@ export function CollectionsSidebar({
                             )}
                         </div>
                     </div>
-                    <div ref={historyScrollRef} className="flex-1 overflow-y-auto">
-                        <div className="p-2 space-y-1">
-                            {visibleHistory.map((item) => (
-                                <div 
-                                    key={item.id} 
-                                    className="group flex flex-col p-2.5 hover:bg-muted/60 rounded-lg cursor-pointer transition-all duration-200 text-sm" 
-                                    onClick={() => onLoadRequest(item)}
-                                >
-                                    <div className="flex items-center justify-between mb-1.5">
-                                        <div className="flex items-center gap-2 flex-1 min-w-0">
-                                            <span 
-                                                className={cn(
-                                                    "text-[10px] uppercase font-bold px-1.5 py-0.5 rounded-sm tracking-wide shrink-0",
-                                                    item.method === "GET" && "bg-blue-500/10 text-blue-500",
-                                                    item.method === "POST" && "bg-green-500/10 text-green-500",
-                                                    item.method === "PUT" && "bg-orange-500/10 text-orange-500",
-                                                    item.method === "DELETE" && "bg-red-500/10 text-red-500",
-                                                    item.method === "PATCH" && "bg-yellow-500/10 text-yellow-600",
-                                                    (!["GET", "POST", "PUT", "DELETE", "PATCH"].includes(item.method)) && "bg-muted text-muted-foreground"
-                                                )}
-                                            >
-                                                {item.method}
-                                            </span>
-                                            <span className="font-medium text-xs truncate max-w-[150px]">
-                                                {item.name ? getApiClientRequestDisplayName(item.name, tRoot) : item.url}
-                                            </span>
-                                        </div>
-                                        <Button 
-                                            variant="ghost" 
-                                            size="icon" 
-                                            className="h-6 w-6 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-md opacity-0 group-hover:opacity-100 transition-opacity shrink-0" 
-                                            onClick={(e) => {
-                                                e.stopPropagation()
-                                                onDeleteHistoryItem(item.id)
-                                            }}
+                    <div className="flex-1 overflow-hidden" ref={historyListContainerRef}>
+                        {isHistoryLoading && history.length === 0 ? (
+                            <HistoryListSkeleton />
+                        ) : !history.length ? (
+                            <div className="flex flex-col items-center justify-center p-8 text-center">
+                                <div className="h-10 w-10 rounded-full bg-muted flex items-center justify-center mb-3">
+                                    <FolderPlus className="h-5 w-5 text-muted-foreground/50" />
+                                </div>
+                                <p className="text-sm font-medium">{t("noHistoryTitle")}</p>
+                                <p className="text-xs text-muted-foreground mt-1">{t("noHistoryHint")}</p>
+                            </div>
+                        ) : !!history.length && historySearch && !filteredHistory.length ? (
+                            <div className="text-xs text-muted-foreground text-center py-6">No results for &quot;{historySearch}&quot;</div>
+                        ) : (
+                            <VirtualHistoryList
+                                items={visibleHistory}
+                                height={historyListHeight}
+                                onSelect={onLoadRequest}
+                                onDelete={onDeleteHistoryItem}
+                                renderRow={(item, style) => (
+                                    <div key={item.id} style={style} className="px-2 py-0.5">
+                                        <div
+                                            className="group flex flex-col p-2.5 hover:bg-muted/60 rounded-lg cursor-pointer transition-all duration-200 text-sm h-full"
+                                            onClick={() => onLoadRequest(item)}
                                         >
-                                            <Trash2 className="h-3.5 w-3.5" />
-                                        </Button>
-                                    </div>
-                                    <div className="flex items-center justify-between text-[11px] text-muted-foreground/80 pl-1">
-                                        <span className="truncate max-w-[160px]">{item.url}</span>
-                                        <div className="flex items-center gap-2 shrink-0">
-                                            <span>{new Date(item.timestamp).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</span>
-                                            {item.status && (
-                                                <span className={cn(
-                                                    "font-medium",
-                                                    item.status >= 200 && item.status < 300 ? "text-green-500"
-                                                        : item.status >= 300 && item.status < 400 ? "text-amber-500"
-                                                        : "text-destructive"
-                                                )}>
-                                                    {item.status}
-                                                </span>
-                                            )}
+                                            <div className="flex items-center justify-between mb-1.5">
+                                                <div className="flex items-center gap-2 flex-1 min-w-0">
+                                                    <span
+                                                        className={cn(
+                                                            "text-[10px] uppercase font-bold px-1.5 py-0.5 rounded-sm tracking-wide shrink-0",
+                                                            item.method === "GET" && "bg-blue-500/10 text-blue-500",
+                                                            item.method === "POST" && "bg-green-500/10 text-green-500",
+                                                            item.method === "PUT" && "bg-orange-500/10 text-orange-500",
+                                                            item.method === "DELETE" && "bg-red-500/10 text-red-500",
+                                                            item.method === "PATCH" && "bg-yellow-500/10 text-yellow-600",
+                                                            (!["GET", "POST", "PUT", "DELETE", "PATCH"].includes(item.method)) && "bg-muted text-muted-foreground"
+                                                        )}
+                                                    >
+                                                        {item.method}
+                                                    </span>
+                                                    <span className="font-medium text-xs truncate max-w-[150px]">
+                                                        {item.name ? getApiClientRequestDisplayName(item.name, tRoot) : item.url}
+                                                    </span>
+                                                </div>
+                                                <Button
+                                                    variant="ghost"
+                                                    size="icon"
+                                                    className="h-6 w-6 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-md opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+                                                    onClick={(e) => {
+                                                        e.stopPropagation()
+                                                        onDeleteHistoryItem(item.id)
+                                                    }}
+                                                >
+                                                    <Trash2 className="h-3.5 w-3.5" />
+                                                </Button>
+                                            </div>
+                                            <div className="flex items-center justify-between text-[11px] text-muted-foreground/80 pl-1">
+                                                <span className="truncate max-w-[160px]">{item.url}</span>
+                                                <div className="flex items-center gap-2 shrink-0">
+                                                    <span>{new Date(item.timestamp).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</span>
+                                                    {item.status && (
+                                                        <span className={cn(
+                                                            "font-medium",
+                                                            item.status >= 200 && item.status < 300 ? "text-green-500"
+                                                                : item.status >= 300 && item.status < 400 ? "text-amber-500"
+                                                                : "text-destructive"
+                                                        )}>
+                                                            {item.status}
+                                                        </span>
+                                                    )}
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                            ))}
-                            {historyHasMore && (
-                                <div ref={historySentinelRef} className="flex justify-center py-3">
-                                    <Loader2 className="h-4 w-4 animate-spin text-muted-foreground/50" />
-                                </div>
-                            )}
-                            {!history.length && (
-                                <div className="flex flex-col items-center justify-center p-8 text-center">
-                                    <div className="h-10 w-10 rounded-full bg-muted flex items-center justify-center mb-3">
-                                        <FolderPlus className="h-5 w-5 text-muted-foreground/50" />
-                                    </div>
-                                    <p className="text-sm font-medium">{t("noHistoryTitle")}</p>
-                                    <p className="text-xs text-muted-foreground mt-1">{t("noHistoryHint")}</p>
-                                </div>
-                            )}
-                            {!!history.length && historySearch && !filteredHistory.length && (
-                                <div className="text-xs text-muted-foreground text-center py-6">No results for &quot;{historySearch}&quot;</div>
-                            )}
-                        </div>
+                                )}
+                            />
+                        )}
                     </div>
                 </TabsContent>
             </Tabs>
diff --git a/apps/web/src/components/api-client/collections/save-request-dialog.tsx b/apps/web/src/components/api-client/collections/save-request-dialog.tsx
index 4b13e505..7604aaed 100644
--- a/apps/web/src/components/api-client/collections/save-request-dialog.tsx
+++ b/apps/web/src/components/api-client/collections/save-request-dialog.tsx
@@ -28,11 +28,15 @@ interface SaveRequestDialogProps {
     collections: Collection[]
     onSave: (parentId: string, name: string) => void
     defaultName?: string
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
 }
 
-export function SaveRequestDialog({ collections, onSave, defaultName }: SaveRequestDialogProps) {
+export function SaveRequestDialog({ collections, onSave, defaultName, open: openProp, onOpenChange }: SaveRequestDialogProps) {
     const t = useTranslations("ApiClient.saveRequest")
-    const [open, setOpen] = React.useState(false)
+    const [openInternal, setOpenInternal] = React.useState(false)
+    const open = openProp !== undefined ? openProp : openInternal
+    const setOpen = onOpenChange ?? setOpenInternal
     const [name, setName] = React.useState(defaultName || "")
     const [selectedFolderId, setSelectedFolderId] = React.useState<string>("")
 
@@ -73,14 +77,18 @@ export function SaveRequestDialog({ collections, onSave, defaultName }: SaveRequ
         }
     }
 
+    const isControlled = openProp !== undefined
+
     return (
         <Dialog open={open} onOpenChange={setOpen}>
-            <DialogTrigger asChild>
-                <Button variant="outline" size="sm" className="gap-2">
-                    <Save className="h-4 w-4" />
-                    {t("trigger")}
-                </Button>
-            </DialogTrigger>
+            {!isControlled && (
+                <DialogTrigger asChild>
+                    <Button variant="outline" size="sm" className="gap-2">
+                        <Save className="h-4 w-4" />
+                        {t("trigger")}
+                    </Button>
+                </DialogTrigger>
+            )}
             <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
                     <DialogTitle>{t("dialogTitle")}</DialogTitle>
diff --git a/apps/web/src/components/api-client/collections/use-collections.ts b/apps/web/src/components/api-client/collections/use-collections.ts
index e7c90239..ace28e81 100644
--- a/apps/web/src/components/api-client/collections/use-collections.ts
+++ b/apps/web/src/components/api-client/collections/use-collections.ts
@@ -111,6 +111,22 @@ export function useCollections() {
         void migrateData()
     }, [user, loading, isLoading, collections.length, authedFetch])
 
+    // Helper: send a delta and reconcile server response (source of truth)
+    const applyDelta = React.useCallback(
+        async (collectionId: string, ops: object[]): Promise<Collection> => {
+            const res = await authedFetch(
+                `/api/backend/api-client/collections/${collectionId}/items:apply-delta`,
+                {
+                    method: "POST",
+                    body: JSON.stringify({ ops }),
+                }
+            )
+            const body = (await res.json()) as { collection: Collection }
+            return body.collection
+        },
+        [authedFetch]
+    )
+
     const addFolder = async (parentId: string, name: string) => {
         if (!user) return
 
@@ -122,31 +138,30 @@ export function useCollections() {
             isOpen: true,
         }
 
-        // Find the collection containing this parentId
-        // Since we store root collections as documents, we need to find which doc to update.
-        // parentId could be the collection ID itself or a folder ID inside it.
-
         const targetCollection = collections.find(c =>
             c.id === parentId || findItemInCollection(c.items, parentId)
         )
 
         if (!targetCollection) return
 
-        let updatedItems: (CollectionFolder | CollectionRequest)[]
-        if (targetCollection.id === parentId) {
-            updatedItems = [...targetCollection.items, newFolder]
-        } else {
-            updatedItems = addItemToParent(targetCollection.items, parentId, newFolder)
-        }
+        // Optimistic update
+        const prev = collections
+        const optimisticItems = targetCollection.id === parentId
+            ? [...targetCollection.items, newFolder]
+            : addItemToParent(targetCollection.items, parentId, newFolder)
+        setCollections((cur) =>
+            sortCollections(cur.map((c) =>
+                c.id === targetCollection.id ? { ...c, items: optimisticItems } : c
+            ))
+        )
 
         try {
-            const res = await authedFetch(`/api/backend/api-client/collections/${targetCollection.id}`, {
-                method: "PATCH",
-                body: JSON.stringify({ items: updatedItems }),
-            })
-            const updated = (await res.json()) as Collection
-            setCollections((prev) => sortCollections(prev.map((c) => (c.id === updated.id ? updated : c))))
+            const updated = await applyDelta(targetCollection.id, [
+                { type: "add", parent_id: parentId, item: newFolder },
+            ])
+            setCollections((cur) => sortCollections(cur.map((c) => (c.id === updated.id ? updated : c))))
         } catch (e) {
+            setCollections(prev)
             console.error("Error adding folder", e)
             toast.error("Failed to add folder")
         }
@@ -162,14 +177,15 @@ export function useCollections() {
 
         // If not found in items, maybe it IS the collection?
         if (!targetCollection) {
-            // Check if itemId is a collection ID
             const colToDelete = collections.find(c => c.id === itemId)
             if (colToDelete) {
+                const prev = collections
+                setCollections((cur) => cur.filter((c) => c.id !== itemId))
                 try {
                     await authedFetch(`/api/backend/api-client/collections/${itemId}`, { method: "DELETE" })
-                    setCollections((prev) => prev.filter((c) => c.id !== itemId))
                     toast.success("Collection deleted")
                 } catch (e) {
+                    setCollections(prev)
                     console.error("Error deleting collection", e)
                     toast.error("Failed to delete collection")
                 }
@@ -177,16 +193,22 @@ export function useCollections() {
             return
         }
 
-        const updatedItems = deleteFromItems(targetCollection.items, itemId)
+        // Optimistic update
+        const prev = collections
+        const optimisticItems = deleteFromItems(targetCollection.items, itemId)
+        setCollections((cur) =>
+            sortCollections(cur.map((c) =>
+                c.id === targetCollection.id ? { ...c, items: optimisticItems } : c
+            ))
+        )
 
         try {
-            const res = await authedFetch(`/api/backend/api-client/collections/${targetCollection.id}`, {
-                method: "PATCH",
-                body: JSON.stringify({ items: updatedItems }),
-            })
-            const updated = (await res.json()) as Collection
-            setCollections((prev) => sortCollections(prev.map((c) => (c.id === updated.id ? updated : c))))
+            const updated = await applyDelta(targetCollection.id, [
+                { type: "delete", item_id: itemId },
+            ])
+            setCollections((cur) => sortCollections(cur.map((c) => (c.id === updated.id ? updated : c))))
         } catch (e) {
+            setCollections(prev)
             console.error("Error deleting item", e)
             toast.error("Failed to delete item")
         }
@@ -201,23 +223,25 @@ export function useCollections() {
 
         if (!targetCollection) return
 
-        // Check if parentId is the collection itself
-        let updatedItems: (CollectionFolder | CollectionRequest)[]
-        if (targetCollection.id === parentId) {
-            updatedItems = [...targetCollection.items, request]
-        } else {
-            updatedItems = addItemToParent(targetCollection.items, parentId, request)
-        }
+        // Optimistic update
+        const prev = collections
+        const optimisticItems = targetCollection.id === parentId
+            ? [...targetCollection.items, request]
+            : addItemToParent(targetCollection.items, parentId, request)
+        setCollections((cur) =>
+            sortCollections(cur.map((c) =>
+                c.id === targetCollection.id ? { ...c, items: optimisticItems } : c
+            ))
+        )
 
         try {
-            const res = await authedFetch(`/api/backend/api-client/collections/${targetCollection.id}`, {
-                method: "PATCH",
-                body: JSON.stringify({ items: updatedItems }),
-            })
-            const updated = (await res.json()) as Collection
-            setCollections((prev) => sortCollections(prev.map((c) => (c.id === updated.id ? updated : c))))
+            const updated = await applyDelta(targetCollection.id, [
+                { type: "add", parent_id: parentId, item: request },
+            ])
+            setCollections((cur) => sortCollections(cur.map((c) => (c.id === updated.id ? updated : c))))
             toast.success("Request saved")
         } catch (e) {
+            setCollections(prev)
             console.error("Error saving request", e)
             toast.error("Failed to save request")
         }
@@ -229,16 +253,26 @@ export function useCollections() {
         const targetCollection = collections.find(c => findItemInCollection(c.items, folderId))
         if (!targetCollection) return
 
-        const updatedItems = toggleInItems(targetCollection.items, folderId)
+        // Optimistic update (toggle is purely local UX — we still persist to avoid drift)
+        const prev = collections
+        const optimisticItems = toggleInItems(targetCollection.items, folderId)
+        setCollections((cur) =>
+            sortCollections(cur.map((c) =>
+                c.id === targetCollection.id ? { ...c, items: optimisticItems } : c
+            ))
+        )
+
+        // Find the current isOpen value to send the patch
+        const folder = findFolder(targetCollection.items, folderId)
+        if (!folder) return
 
         try {
-            const res = await authedFetch(`/api/backend/api-client/collections/${targetCollection.id}`, {
-                method: "PATCH",
-                body: JSON.stringify({ items: updatedItems }),
-            })
-            const updated = (await res.json()) as Collection
-            setCollections((prev) => sortCollections(prev.map((c) => (c.id === updated.id ? updated : c))))
+            const updated = await applyDelta(targetCollection.id, [
+                { type: "update", item_id: folderId, patch: { isOpen: !folder.isOpen } },
+            ])
+            setCollections((cur) => sortCollections(cur.map((c) => (c.id === updated.id ? updated : c))))
         } catch (e) {
+            setCollections(prev)
             console.error("Error toggling folder", e)
         }
     }
@@ -249,22 +283,39 @@ export function useCollections() {
         const targetCollection = collections.find(c => findItemInCollection(c.items, folderId))
         if (!targetCollection) return
 
-        const updatedItems = renameFolderInItems(targetCollection.items, folderId, name)
+        // Optimistic update
+        const prev = collections
+        const optimisticItems = renameFolderInItems(targetCollection.items, folderId, name)
+        setCollections((cur) =>
+            sortCollections(cur.map((c) =>
+                c.id === targetCollection.id ? { ...c, items: optimisticItems } : c
+            ))
+        )
 
         try {
-            const res = await authedFetch(`/api/backend/api-client/collections/${targetCollection.id}`, {
-                method: "PATCH",
-                body: JSON.stringify({ items: updatedItems }),
-            })
-            const updated = (await res.json()) as Collection
-            setCollections((prev) => sortCollections(prev.map((c) => (c.id === updated.id ? updated : c))))
+            const updated = await applyDelta(targetCollection.id, [
+                { type: "update", item_id: folderId, patch: { name } },
+            ])
+            setCollections((cur) => sortCollections(cur.map((c) => (c.id === updated.id ? updated : c))))
         } catch (e) {
+            setCollections(prev)
             console.error("Error renaming folder", e)
             toast.error("Failed to rename folder")
         }
     }
 
     // Helper functions
+    const findFolder = (items: (CollectionFolder | CollectionRequest)[], folderId: string): CollectionFolder | null => {
+        for (const item of items) {
+            if (item.id === folderId && "type" in item && item.type === "folder") return item as CollectionFolder
+            if ("type" in item && item.type === "folder") {
+                const found = findFolder(item.items, folderId)
+                if (found) return found
+            }
+        }
+        return null
+    }
+
     const findItemInCollection = (items: (CollectionFolder | CollectionRequest)[], targetId: string): boolean => {
         for (const item of items) {
             if (item.id === targetId) return true
@@ -353,15 +404,21 @@ export function useCollections() {
 
     const renameCollection = async (collectionId: string, name: string) => {
         if (!user) return
+        const prev = collections
+        // Optimistic update
+        setCollections((cur) =>
+            sortCollections(cur.map((c) => (c.id === collectionId ? { ...c, name } : c)))
+        )
         try {
             const res = await authedFetch(`/api/backend/api-client/collections/${collectionId}`, {
                 method: "PATCH",
                 body: JSON.stringify({ name }),
             })
             const updated = (await res.json()) as Collection
-            setCollections((prev) => sortCollections(prev.map((c) => (c.id === updated.id ? updated : c))))
+            setCollections((cur) => sortCollections(cur.map((c) => (c.id === updated.id ? updated : c))))
             toast.success("Collection renamed")
         } catch (e) {
+            setCollections(prev)
             console.error("Error renaming collection", e)
             toast.error("Failed to rename collection")
         }
diff --git a/apps/web/src/components/api-client/collections/virtual-history-list.tsx b/apps/web/src/components/api-client/collections/virtual-history-list.tsx
new file mode 100644
index 00000000..2ee91cd0
--- /dev/null
+++ b/apps/web/src/components/api-client/collections/virtual-history-list.tsx
@@ -0,0 +1,53 @@
+"use client"
+import * as React from "react"
+import { List } from "react-window"
+import type { HistoryRequest } from "../types"
+
+// Custom data passed through rowProps (must not include ariaAttributes, index, or style)
+type HistoryRowCustomProps = {
+    items: HistoryRequest[]
+    renderRow: (item: HistoryRequest, style: React.CSSProperties) => React.ReactNode
+}
+
+// Full props received by the row component (custom data + injected by react-window)
+type HistoryRowProps = HistoryRowCustomProps & {
+    ariaAttributes: {
+        "aria-posinset": number
+        "aria-setsize": number
+        role: "listitem"
+    }
+    index: number
+    style: React.CSSProperties
+}
+
+function HistoryRow({ index, style, items, renderRow }: HistoryRowProps): React.ReactElement | null {
+    const item = items[index]
+    if (!item) return null
+    return <>{renderRow(item, style)}</>
+}
+
+interface VirtualHistoryListProps {
+    items: HistoryRequest[]
+    height: number
+    onSelect: (item: HistoryRequest) => void
+    onDelete: (id: string) => void
+    renderRow: (item: HistoryRequest, style: React.CSSProperties) => React.ReactNode
+}
+
+export const VirtualHistoryList = React.memo(function VirtualHistoryList({
+    items,
+    height,
+    renderRow,
+}: VirtualHistoryListProps) {
+    const rowProps: HistoryRowCustomProps = { items, renderRow }
+    return (
+        <List<HistoryRowCustomProps>
+            rowComponent={HistoryRow}
+            rowProps={rowProps}
+            rowCount={items.length}
+            rowHeight={64}
+            style={{ height }}
+            defaultHeight={height}
+        />
+    )
+})
diff --git a/apps/web/src/components/api-client/context/api-client-context.tsx b/apps/web/src/components/api-client/context/api-client-context.tsx
new file mode 100644
index 00000000..503cc3ab
--- /dev/null
+++ b/apps/web/src/components/api-client/context/api-client-context.tsx
@@ -0,0 +1,18 @@
+"use client"
+import * as React from "react"
+import { TabsProvider } from "./tabs-context"
+import { CollectionsProvider } from "./collections-context"
+import { EnvironmentsProvider } from "./environments-context"
+import { HistoryProvider } from "./history-context"
+
+export function ApiClientProviders({ children }: { children: React.ReactNode }) {
+    return (
+        <EnvironmentsProvider>
+            <HistoryProvider>
+                <CollectionsProvider>
+                    <TabsProvider>{children}</TabsProvider>
+                </CollectionsProvider>
+            </HistoryProvider>
+        </EnvironmentsProvider>
+    )
+}
diff --git a/apps/web/src/components/api-client/context/history-context.tsx b/apps/web/src/components/api-client/context/history-context.tsx
index 5e339b89..3f636d35 100644
--- a/apps/web/src/components/api-client/context/history-context.tsx
+++ b/apps/web/src/components/api-client/context/history-context.tsx
@@ -8,6 +8,7 @@ import type { HistoryRequest, CollectionRequest } from "../types"
 
 type HistoryState = {
     history: HistoryRequest[]
+    isLoading: boolean
 }
 
 type HistoryActions = {
@@ -28,11 +29,11 @@ const HistoryActionsCtx = React.createContext<HistoryActions | null>(null)
 // ── Provider ───────────────────────────────────────────────────────────────
 
 export function HistoryProvider({ children }: { children: React.ReactNode }) {
-    const { history, addHistoryItem, clearHistory, deleteHistoryItem } = useHistory()
+    const { history, isHistoryLoading, addHistoryItem, clearHistory, deleteHistoryItem } = useHistory()
 
     const state = React.useMemo<HistoryState>(
-        () => ({ history }),
-        [history]
+        () => ({ history, isLoading: isHistoryLoading }),
+        [history, isHistoryLoading]
     )
 
     const actions = React.useMemo<HistoryActions>(
diff --git a/apps/web/src/components/api-client/context/tabs-context.tsx b/apps/web/src/components/api-client/context/tabs-context.tsx
index 12c7feb1..42a6c1b2 100644
--- a/apps/web/src/components/api-client/context/tabs-context.tsx
+++ b/apps/web/src/components/api-client/context/tabs-context.tsx
@@ -83,22 +83,51 @@ export function TabsProvider({ children }: { children: React.ReactNode }) {
         setIsInitialized(true)
     }, [])
 
+    // Keep refs to latest tabs and activeTabId so callbacks always see the
+    // freshest snapshot without stale-closure issues.
+    const tabsRef = React.useRef(tabs)
+    const activeTabIdRef = React.useRef(activeTabId)
+    React.useEffect(() => {
+        tabsRef.current = tabs
+    })
+    React.useEffect(() => {
+        activeTabIdRef.current = activeTabId
+    })
+
     // Save tabs to localStorage — strip `response`/`isLoading` (responses can be MBs and
-    // would blow the per-origin localStorage quota).
+    // would blow the per-origin localStorage quota). Writes are debounced to 500ms so rapid
+    // edits (e.g. typing in the URL input) don't saturate the storage layer.
     React.useEffect(() => {
         if (!isInitialized) return
-        const slim = tabs.map((t) => {
-            const { response: _r, isLoading: _l, ...rest } = t
-            return rest
-        })
-        try {
-            localStorage.setItem(TABS_STORAGE_KEY, JSON.stringify(slim))
-        } catch (e) {
-            console.warn("api-client tabs: localStorage write failed, dropping persisted state", e)
-            try { localStorage.removeItem(TABS_STORAGE_KEY) } catch { /* noop */ }
-        }
+        const timeoutId = setTimeout(() => {
+            const slim = tabsRef.current.map((t) => {
+                const { response: _r, isLoading: _l, ...rest } = t
+                return rest
+            })
+            try {
+                localStorage.setItem(TABS_STORAGE_KEY, JSON.stringify(slim))
+            } catch (e) {
+                console.warn("api-client tabs: localStorage write failed, dropping persisted state", e)
+                try { localStorage.removeItem(TABS_STORAGE_KEY) } catch { /* noop */ }
+            }
+        }, 500)
+        return () => clearTimeout(timeoutId)
     }, [tabs, isInitialized])
 
+    // Flush the latest tab state immediately on unmount so mid-debounce edits
+    // are not lost when the user navigates away.
+    React.useEffect(() => {
+        return () => {
+            const slim = tabsRef.current.map((t) => {
+                const { response: _r, isLoading: _l, ...rest } = t
+                return rest
+            })
+            try {
+                localStorage.setItem(TABS_STORAGE_KEY, JSON.stringify(slim))
+            } catch { /* noop */ }
+        }
+    }, [])
+
     // Save active tab id to localStorage
     React.useEffect(() => {
         if (!isInitialized) return
@@ -132,44 +161,39 @@ export function TabsProvider({ children }: { children: React.ReactNode }) {
         appendTab,
 
         closeTab(id: string) {
-            setTabs((prev) => {
-                if (prev.length === 1) {
-                    const newTab = createNewTab()
-                    setActiveTabId(newTab.id)
-                    return [newTab]
-                }
-
-                const closedIdx = prev.findIndex((t) => t.id === id)
-                const newTabs = prev.filter((t) => t.id !== id)
-
-                setActiveTabId((currentActiveId) => {
-                    if (currentActiveId === id) {
-                        const nextIdx = Math.min(closedIdx, newTabs.length - 1)
-                        return newTabs[nextIdx]!.id
-                    }
-                    return currentActiveId
-                })
-
-                return newTabs
-            })
+            // Compute all state outside updaters so they remain pure (no side
+            // effects, safe for React StrictMode double-invocation).
+            const current = tabsRef.current
+            if (current.length === 1) {
+                const newTab = createNewTab()
+                setTabs([newTab])
+                setActiveTabId(newTab.id)
+                return
+            }
+            const closedIdx = current.findIndex((t) => t.id === id)
+            const next = current.filter((t) => t.id !== id)
+            setTabs(next)
+            if (activeTabIdRef.current === id) {
+                const nextIdx = Math.min(closedIdx, next.length - 1)
+                setActiveTabId(next[nextIdx]!.id)
+            }
         },
 
         duplicateTab(id: string) {
-            setTabs((prev) => {
-                const source = prev.find((t) => t.id === id)
-                if (!source) return prev
-                const newTab: ApiRequestState = {
-                    ...source,
-                    id: crypto.randomUUID(),
-                    response: null,
-                    isLoading: false,
-                }
-                const sourceIdx = prev.findIndex((t) => t.id === id)
-                const next = [...prev]
-                next.splice(sourceIdx + 1, 0, newTab)
-                setActiveTabId(newTab.id)
-                return next
-            })
+            const current = tabsRef.current
+            const source = current.find((t) => t.id === id)
+            if (!source) return
+            const newTab: ApiRequestState = {
+                ...source,
+                id: crypto.randomUUID(),
+                response: null,
+                isLoading: false,
+            }
+            const sourceIdx = current.findIndex((t) => t.id === id)
+            const next = [...current]
+            next.splice(sourceIdx + 1, 0, newTab)
+            setTabs(next)
+            setActiveTabId(newTab.id)
         },
 
         renameTab(id: string, name: string) {
diff --git a/apps/web/src/components/api-client/environment-manager.tsx b/apps/web/src/components/api-client/environment-manager.tsx
index d73c536e..c85b15b6 100644
--- a/apps/web/src/components/api-client/environment-manager.tsx
+++ b/apps/web/src/components/api-client/environment-manager.tsx
@@ -8,26 +8,22 @@ import {
     DialogContent,
     DialogHeader,
     DialogTitle,
-    DialogTrigger,
 } from "@/components/ui/dialog"
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@/components/ui/select"
 import { ScrollArea } from "@/components/ui/scroll-area"
-import { IconPlus, IconTrash, IconSettings, IconEdit } from "@tabler/icons-react"
+import { IconPlus, IconTrash, IconEdit } from "@tabler/icons-react"
 import { EnvironmentVariable } from "./use-environments"
 import { useTranslations } from "next-intl"
 import { useEnvironmentsState, useEnvironmentsActions } from "./context/environments-context"
 
-export function EnvironmentManager() {
-    const { environments, activeEnvId } = useEnvironmentsState()
-    const { setActiveEnvId, addEnvironment, updateEnvironment, deleteEnvironment } = useEnvironmentsActions()
+interface EnvironmentManagerProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+}
+
+export function EnvironmentManager({ open, onOpenChange }: EnvironmentManagerProps) {
+    const { environments } = useEnvironmentsState()
+    const { addEnvironment, updateEnvironment, deleteEnvironment } = useEnvironmentsActions()
     const t = useTranslations("ApiClient.environmentManager")
-    const [isOpen, setIsOpen] = React.useState(false)
     const [selectedEnvId, setSelectedEnvId] = React.useState<string | null>(null)
     const [newEnvName, setNewEnvName] = React.useState("")
     const [editingEnvId, setEditingEnvId] = React.useState<string | null>(null)
@@ -35,10 +31,10 @@ export function EnvironmentManager() {
 
     // Select the first environment by default when dialog opens
     React.useEffect(() => {
-        if (isOpen && !selectedEnvId && environments.length > 0) {
+        if (open && !selectedEnvId && environments.length > 0) {
             setSelectedEnvId(environments[0].id)
         }
-    }, [isOpen, environments, selectedEnvId])
+    }, [open, environments, selectedEnvId])
 
     const selectedEnv = environments.find(e => e.id === selectedEnvId)
 
@@ -70,33 +66,12 @@ export function EnvironmentManager() {
     }
 
     return (
-        <div className="flex items-center gap-2">
-            <Select
-                value={activeEnvId || "none"}
-                onValueChange={(val) => setActiveEnvId(val === "none" ? null : val)}
-            >
-                <SelectTrigger className="w-[150px] h-8 text-xs">
-                    <SelectValue placeholder={t("noEnvironment")} />
-                </SelectTrigger>
-                <SelectContent>
-                    <SelectItem value="none">{t("noEnvironment")}</SelectItem>
-                    {environments.map(env => (
-                        <SelectItem key={env.id} value={env.id}>{env.name}</SelectItem>
-                    ))}
-                </SelectContent>
-            </Select>
-
-            <Dialog open={isOpen} onOpenChange={setIsOpen}>
-                <DialogTrigger asChild>
-                    <Button variant="ghost" size="icon" className="h-8 w-8">
-                        <IconSettings className="h-4 w-4" />
-                    </Button>
-                </DialogTrigger>
-                <DialogContent className="max-w-3xl h-[600px] flex flex-col">
-                    <DialogHeader>
-                        <DialogTitle>{t("manageDialogTitle")}</DialogTitle>
-                    </DialogHeader>
-                    <div className="flex flex-1 gap-4 min-h-0 pt-4">
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-w-3xl h-[600px] flex flex-col">
+                <DialogHeader>
+                    <DialogTitle>{t("manageDialogTitle")}</DialogTitle>
+                </DialogHeader>
+                <div className="flex flex-1 gap-4 min-h-0 pt-4">
                         {/* Sidebar */}
                         <div className="w-48 flex flex-col gap-2 border-r pr-4">
                             <div className="flex gap-2">
@@ -237,9 +212,8 @@ export function EnvironmentManager() {
                                 </div>
                             )}
                         </div>
-                    </div>
-                </DialogContent>
-            </Dialog>
-        </div>
+                </div>
+            </DialogContent>
+        </Dialog>
     )
 }
diff --git a/apps/web/src/components/api-client/help-shortcuts-dialog.tsx b/apps/web/src/components/api-client/help-shortcuts-dialog.tsx
new file mode 100644
index 00000000..d254eb73
--- /dev/null
+++ b/apps/web/src/components/api-client/help-shortcuts-dialog.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { IconKeyboard } from "@tabler/icons-react"
+import { useTranslations } from "next-intl"
+
+const SHORTCUTS: Array<[string, string]> = [
+    ["mod+T", "newTab"],
+    ["mod+W", "closeTab"],
+    ["mod+Enter", "sendRequest"],
+]
+
+interface HelpShortcutsDialogProps {
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+}
+
+export function HelpShortcutsDialog({ open, onOpenChange }: HelpShortcutsDialogProps = {}) {
+    const t = useTranslations("ApiClient.shortcuts")
+    const [isMac, setIsMac] = React.useState(false)
+
+    React.useEffect(() => {
+        setIsMac(/Mac|iPhone|iPad/i.test(navigator.userAgent))
+    }, [])
+
+    const isControlled = open !== undefined
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            {!isControlled && (
+                <DialogTrigger asChild>
+                    <Button variant="ghost" size="icon" className="h-8 w-8" aria-label={t("ariaLabel")} title={t("ariaLabel")}>
+                        <IconKeyboard className="h-4 w-4" />
+                    </Button>
+                </DialogTrigger>
+            )}
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>{t("title")}</DialogTitle>
+                </DialogHeader>
+                <ul className="grid grid-cols-[auto_1fr] gap-x-6 gap-y-2 text-sm pt-2">
+                    {SHORTCUTS.map(([keys, labelKey]) => (
+                        <React.Fragment key={keys}>
+                            <li className="contents">
+                                <kbd className="font-mono rounded bg-muted px-1.5 py-0.5 text-xs">
+                                    {keys.replace("mod", isMac ? "⌘" : "Ctrl")}
+                                </kbd>
+                                <span className="self-center">{t(labelKey as "newTab" | "closeTab" | "sendRequest")}</span>
+                            </li>
+                        </React.Fragment>
+                    ))}
+                </ul>
+            </DialogContent>
+        </Dialog>
+    )
+}
diff --git a/apps/web/src/components/api-client/import-curl-dialog.tsx b/apps/web/src/components/api-client/import-curl-dialog.tsx
index 70f6fe40..9dee8cd9 100644
--- a/apps/web/src/components/api-client/import-curl-dialog.tsx
+++ b/apps/web/src/components/api-client/import-curl-dialog.tsx
@@ -17,11 +17,15 @@ import { useTranslations } from "next-intl"
 
 interface ImportCurlDialogProps {
     onImport: (curl: string) => void
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
 }
 
-export function ImportCurlDialog({ onImport }: ImportCurlDialogProps) {
+export function ImportCurlDialog({ onImport, open: openProp, onOpenChange }: ImportCurlDialogProps) {
     const t = useTranslations("ApiClient.importCurl")
-    const [open, setOpen] = React.useState(false)
+    const [openInternal, setOpenInternal] = React.useState(false)
+    const open = openProp !== undefined ? openProp : openInternal
+    const setOpen = onOpenChange ?? setOpenInternal
     const [curl, setCurl] = React.useState("")
 
     const handleImport = () => {
@@ -32,14 +36,18 @@ export function ImportCurlDialog({ onImport }: ImportCurlDialogProps) {
         }
     }
 
+    const isControlled = openProp !== undefined
+
     return (
         <Dialog open={open} onOpenChange={setOpen}>
-            <DialogTrigger asChild>
-                <Button variant="outline" size="sm" className="gap-2">
-                    <Import className="h-4 w-4" />
-                    {t("trigger")}
-                </Button>
-            </DialogTrigger>
+            {!isControlled && (
+                <DialogTrigger asChild>
+                    <Button variant="outline" size="sm" className="gap-2">
+                        <Import className="h-4 w-4" />
+                        {t("trigger")}
+                    </Button>
+                </DialogTrigger>
+            )}
             <DialogContent className="sm:max-w-[525px]">
                 <DialogHeader>
                     <DialogTitle>{t("dialogTitle")}</DialogTitle>
diff --git a/apps/web/src/components/api-client/request-panel.tsx b/apps/web/src/components/api-client/request-panel.tsx
index 63501e62..279f8649 100644
--- a/apps/web/src/components/api-client/request-panel.tsx
+++ b/apps/web/src/components/api-client/request-panel.tsx
@@ -11,12 +11,12 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select"
-import { RequestMethod, Collection } from "./types"
-import { SaveRequestDialog } from "./collections/save-request-dialog"
+import { RequestMethod } from "./types"
 import { cn } from "@/lib/utils"
 import { useTranslations } from "next-intl"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 import { useEnvironmentsState } from "./context/environments-context"
+import { useDebouncedValue } from "@/lib/use-debounced-value"
 
 interface RequestPanelProps {
     method: RequestMethod
@@ -26,11 +26,12 @@ interface RequestPanelProps {
     onSend: () => void
     onCancel?: () => void
     isLoading: boolean
-    collections: Collection[]
-    onSave: (parentId: string, name: string) => void
-    saveDefaultName?: string
+    /** When true, the Send button is disabled and an SR hint is shown. */
+    isBodyInvalid?: boolean
     onPaste: (text: string) => void
     urlHistory?: string[]
+    /** Pass activeTab.id so local URL state resets on tab switch. */
+    tabId?: string
 }
 
 const METHODS: RequestMethod[] = ["GET", "POST", "PUT", "DELETE", "PATCH", "HEAD", "OPTIONS"]
@@ -65,16 +66,38 @@ function RequestPanelImpl({
     onSend,
     onCancel,
     isLoading,
-    collections,
-    onSave,
-    saveDefaultName,
+    isBodyInvalid = false,
     onPaste,
     urlHistory = [],
+    tabId,
 }: RequestPanelProps) {
     const { activeEnvironmentVariables } = useEnvironmentsState()
     const t = useTranslations("ApiClient.requestPanel")
     const urlInputRef = React.useRef<HTMLInputElement | null>(null)
     const [showSuggestions, setShowSuggestions] = React.useState(false)
+
+    // Local URL state: the input is bound here for instant feedback.
+    // We sync back to the global state (setUrl) after 400ms of idle typing,
+    // and reset local state ONLY on genuine external changes (tab switch or
+    // cURL import) — not on our own debounce writes, to avoid clobbering
+    // keystrokes typed between the flush and the prop update.
+    const [localUrl, setLocalUrl] = React.useState(url)
+    const lastPushedRef = React.useRef(url)
+    // Reset on external url changes only (not our own writes).
+    React.useEffect(() => {
+        if (url !== lastPushedRef.current) {
+            setLocalUrl(url)
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tabId, url])
+    const debouncedLocalUrl = useDebouncedValue(localUrl, 400)
+    React.useEffect(() => {
+        if (debouncedLocalUrl !== url) {
+            lastPushedRef.current = debouncedLocalUrl
+            setUrl(debouncedLocalUrl)
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [debouncedLocalUrl])
     const [hoveredVariable, setHoveredVariable] = React.useState<{
         key: string
         value?: string
@@ -83,17 +106,17 @@ function RequestPanelImpl({
     } | null>(null)
 
     const urlSuggestions = React.useMemo(() => {
-        if (!url.trim() || urlHistory.length === 0) return []
-        const lower = url.toLowerCase()
-        return urlHistory.filter((h) => h.toLowerCase().includes(lower) && h !== url).slice(0, 8)
-    }, [url, urlHistory])
+        if (!localUrl.trim() || urlHistory.length === 0) return []
+        const lower = localUrl.toLowerCase()
+        return urlHistory.filter((h) => h.toLowerCase().includes(lower) && h !== localUrl).slice(0, 8)
+    }, [localUrl, urlHistory])
 
     const variableTokens = React.useMemo(() => {
         const tokens: Array<{ key: string; start: number; end: number; value?: string; status: "resolved" | "missing" }> = []
         const regex = /\{\{(.+?)\}\}/g
         let match: RegExpExecArray | null
 
-        while ((match = regex.exec(url)) !== null) {
+        while ((match = regex.exec(localUrl)) !== null) {
             const fullToken = match[0]
             const key = match[1].trim()
             const value = activeEnvironmentVariables[key]
@@ -107,7 +130,7 @@ function RequestPanelImpl({
         }
 
         return tokens
-    }, [url, activeEnvironmentVariables])
+    }, [localUrl, activeEnvironmentVariables])
 
     const updateHoveredVariable = React.useCallback((clientX: number) => {
         const input = urlInputRef.current
@@ -186,13 +209,13 @@ function RequestPanelImpl({
                     <Input
                         ref={urlInputRef}
                         placeholder={t("urlPlaceholder")}
-                        value={url}
-                        onChange={(e) => setUrl(e.target.value)}
+                        value={localUrl}
+                        onChange={(e) => setLocalUrl(e.target.value)}
                         className="h-10 pl-9 pr-10 font-mono text-xs bg-muted/30 border-muted group-hover:border-border transition-colors"
                         onFocus={() => setShowSuggestions(true)}
                         onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
                         onKeyDown={(e) => {
-                            if (e.key === "Enter" && url) {
+                            if (e.key === "Enter" && localUrl) {
                                 setShowSuggestions(false)
                                 onSend()
                             }
@@ -208,9 +231,9 @@ function RequestPanelImpl({
                         onMouseMove={(e) => updateHoveredVariable(e.clientX)}
                         onMouseLeave={() => setHoveredVariable(null)}
                     />
-                    {url && (
+                    {localUrl && (
                         <button
-                            onClick={() => setUrl("")}
+                            onClick={() => setLocalUrl("")}
                             className="absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 flex items-center justify-center rounded-full hover:bg-muted text-muted-foreground transition-colors z-10"
                         >
                             <X className="h-3.5 w-3.5" />
@@ -224,7 +247,7 @@ function RequestPanelImpl({
                                     className="w-full text-left px-3 py-2 text-xs font-mono hover:bg-muted/60 transition-colors truncate text-foreground"
                                     onMouseDown={(e) => {
                                         e.preventDefault()
-                                        setUrl(suggestion)
+                                        setLocalUrl(suggestion)
                                         setShowSuggestions(false)
                                     }}
                                 >
@@ -245,9 +268,11 @@ function RequestPanelImpl({
                         Cancel
                     </Button>
                 ) : (
+                <>
                 <Button
                     onClick={onSend}
-                    disabled={isLoading || !url}
+                    disabled={isLoading || !localUrl || isBodyInvalid}
+                    aria-describedby={isBodyInvalid ? "send-invalid-help" : undefined}
                     className="h-10 px-6 font-bold shadow-lg shadow-primary/20 transition-all hover:scale-[1.02] active:scale-[0.98]"
                 >
                     {isLoading ? (
@@ -257,15 +282,14 @@ function RequestPanelImpl({
                     )}
                     {isLoading ? t("sending") : t("send")}
                 </Button>
+                {isBodyInvalid && (
+                    <span id="send-invalid-help" className="sr-only">
+                        {t("invalidJsonBodyHelp")}
+                    </span>
+                )}
+                </>
                 )}
 
-                <div className="border-l pl-2 flex items-center ml-1">
-                    <SaveRequestDialog
-                        collections={collections}
-                        onSave={onSave}
-                        defaultName={saveDefaultName}
-                    />
-                </div>
             </div>
         </div>
     )
diff --git a/apps/web/src/components/api-client/request-tabs.tsx b/apps/web/src/components/api-client/request-tabs.tsx
index 790e6cd3..a75f69df 100644
--- a/apps/web/src/components/api-client/request-tabs.tsx
+++ b/apps/web/src/components/api-client/request-tabs.tsx
@@ -4,7 +4,13 @@ import * as React from "react"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { KeyValueEditor } from "./key-value-editor"
 import { KeyValueItem, RequestBody, RequestAuth, RequestFormDataItem } from "./types"
-import CodeEditor from "@/components/ui/code-editor"
+import dynamic from "next/dynamic"
+
+const CodeEditor = dynamic(
+    () => import("@/components/ui/code-editor"),
+    { ssr: false, loading: () => <div className="h-full w-full animate-pulse bg-muted/30" /> }
+)
+const MemoCodeEditor = React.memo(CodeEditor)
 import { Label } from "@/components/ui/label"
 import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
@@ -101,6 +107,15 @@ export function RequestTabs({
         })
     }
 
+    const handleBodyContentChange = React.useCallback(
+        (v: string) => updateBody({ content: v }),
+        // updateBody closes over normalizedBody via its own capture; listing
+        // updateBody as the dep is sufficient and avoids re-creating the
+        // callback on every normalizedBody identity change.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [updateBody]
+    )
+
     const handleFileSelect = async (id: string, file: File | null) => {
         if (!file) return
         const buffer = await file.arrayBuffer()
@@ -187,9 +202,9 @@ export function RequestTabs({
                                 catch (e) { return <div className="text-xs text-rose-500 bg-rose-500/10 border border-rose-500/20 rounded-md px-3 py-1.5 font-mono shrink-0">{(e as Error).message}</div> }
                             })()}
                             <div className="flex-1 border rounded-lg overflow-hidden shadow-sm min-h-0">
-                                <CodeEditor
+                                <MemoCodeEditor
                                     value={normalizedBody.content}
-                                    onChange={(v) => updateBody({ content: v })}
+                                    onChange={handleBodyContentChange}
                                     language={normalizedBody.type === "json" ? "json" : "plaintext"}
                                 />
                             </div>
diff --git a/apps/web/src/components/api-client/response-panel.tsx b/apps/web/src/components/api-client/response-panel.tsx
index a07ccbdd..44006dfa 100644
--- a/apps/web/src/components/api-client/response-panel.tsx
+++ b/apps/web/src/components/api-client/response-panel.tsx
@@ -2,7 +2,13 @@
 
 import * as React from "react"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import CodeEditor from "@/components/ui/code-editor"
+import dynamic from "next/dynamic"
+
+const CodeEditor = dynamic(
+    () => import("@/components/ui/code-editor"),
+    { ssr: false, loading: () => <div className="h-full w-full animate-pulse bg-muted/30" /> }
+)
+const MemoCodeEditor = React.memo(CodeEditor)
 import { ApiResponse, API_CLIENT_ERROR_STATUS_TEXT } from "./types"
 import { useTranslations } from "next-intl"
 import { Button } from "@/components/ui/button"
@@ -11,6 +17,25 @@ import { CheckCircle2, AlertCircle, Copy, Download, Search, Info, Clock, Databas
 import { toast } from "sonner"
 import { cn } from "@/lib/utils"
 import type { editor } from "monaco-editor"
+import { truncateBody } from "./truncate-body"
+import { ResponsePanelSkeleton } from "./skeletons"
+
+const MAX_INLINE_BYTES = 2 * 1024 * 1024 // 2MB
+
+const STATUS_COLOR: Record<string, string> = {
+    success: "bg-emerald-100 text-emerald-900 dark:bg-emerald-950/60 dark:text-emerald-200",
+    redirect: "bg-sky-100 text-sky-900 dark:bg-sky-950/60 dark:text-sky-200",
+    clientError: "bg-amber-100 text-amber-900 dark:bg-amber-950/60 dark:text-amber-200",
+    serverError: "bg-rose-100 text-rose-900 dark:bg-rose-950/60 dark:text-rose-200",
+}
+
+function getStatusColorKey(status: number): string {
+    if (status >= 200 && status < 300) return "success"
+    if (status >= 300 && status < 400) return "redirect"
+    if (status >= 400 && status < 500) return "clientError"
+    if (status >= 500) return "serverError"
+    return "clientError"
+}
 
 interface ParsedCookie {
     name: string
@@ -73,9 +98,10 @@ function bodyLooksLikeHtml(body: string): boolean {
 
 interface ResponsePanelProps {
     response: ApiResponse | null
+    isLoading?: boolean
 }
 
-export function ResponsePanel({ response }: ResponsePanelProps) {
+export function ResponsePanel({ response, isLoading }: ResponsePanelProps) {
     const t = useTranslations("ApiClient.responsePanel")
     const tApi = useTranslations("ApiClient")
     const bodyEditorRef = React.useRef<editor.IStandaloneCodeEditor | null>(null)
@@ -83,6 +109,9 @@ export function ResponsePanel({ response }: ResponsePanelProps) {
     const handleOpenSearch = () => {
         bodyEditorRef.current?.getAction("actions.find")?.run()
     }
+    if (isLoading && !response) {
+        return <ResponsePanelSkeleton />
+    }
     if (!response) {
         return (
             <div className="h-full flex flex-col items-center justify-center text-muted-foreground border-2 border-dashed rounded-xl min-h-0 bg-muted/5 p-8 text-center space-y-4">
@@ -100,6 +129,15 @@ export function ResponsePanel({ response }: ResponsePanelProps) {
     const isSuccess = response.status >= 200 && response.status < 300
     const isError = response.status >= 400
 
+    // Slice the body passed to Monaco so the editor never receives >2MB of text.
+    // Pretty-print (via the Worker) runs before this component renders, so slicing
+    // happens on the already-formatted string. The full body is preserved on
+    // response.body for download.
+    const { inline: inlineBody, truncated } = React.useMemo(
+        () => truncateBody(response.body ?? "", MAX_INLINE_BYTES),
+        [response.body]
+    )
+
     const contentType = normalizeContentType(response.headers)
     const isHtmlByHeader =
         contentType.includes("text/html") ||
@@ -115,10 +153,14 @@ export function ResponsePanel({ response }: ResponsePanelProps) {
         return "text"
     }
 
-    const handleCopy = () => {
+    const handleCopy = async () => {
         if (!response?.body) return
-        navigator.clipboard.writeText(response.body)
-        toast.success(tApi("toasts.responseCopied"))
+        try {
+            await navigator.clipboard.writeText(response.body)
+            toast.success(tApi("toasts.responseCopied"))
+        } catch {
+            toast.error(tApi("toasts.copyFailed"))
+        }
     }
 
     const handleDownload = () => {
@@ -220,8 +262,8 @@ export function ResponsePanel({ response }: ResponsePanelProps) {
                                 <Info className="h-3.5 w-3.5 text-blue-500" />
                             )}
                             <span className={cn(
-                                "text-xs font-bold",
-                                isSuccess ? "text-emerald-600" : isError ? "text-rose-600" : "text-foreground"
+                                "text-xs font-bold px-1 rounded",
+                                STATUS_COLOR[getStatusColorKey(response.status)]
                             )}>
                                 {response.status}
                             </span>
@@ -251,13 +293,25 @@ export function ResponsePanel({ response }: ResponsePanelProps) {
                     </div>
                 </div>
                 <div className="mt-4 border rounded-xl overflow-hidden flex-1 min-h-0 relative shadow-inner bg-card">
-                    <TabsContent value="body" className="mt-0 h-full absolute inset-0">
-                        <CodeEditor
-                            value={response.isBase64 ? t("binaryRawView") : response.body}
-                            language={getLanguage()}
-                            readOnly
-                            onMount={(ed) => { bodyEditorRef.current = ed }}
-                        />
+                    <TabsContent value="body" className="mt-0 h-full absolute inset-0 flex flex-col">
+                        {truncated && !response.isBase64 && (
+                            <div className="flex items-center gap-2 px-3 py-2 text-xs bg-amber-50 dark:bg-amber-950/40 border-b border-amber-200 dark:border-amber-800 shrink-0">
+                                <span className="text-amber-800 dark:text-amber-200 flex-1">
+                                    {t("truncatedBanner", { shownKb: Math.round(MAX_INLINE_BYTES / 1024) })}
+                                </span>
+                                <Button size="sm" variant="link" className="h-auto p-0 text-xs text-amber-700 dark:text-amber-300" onClick={handleDownload}>
+                                    {t("downloadFullBody")}
+                                </Button>
+                            </div>
+                        )}
+                        <div className="flex-1 min-h-0 relative">
+                            <MemoCodeEditor
+                                value={response.isBase64 ? t("binaryRawView") : inlineBody}
+                                language={getLanguage()}
+                                readOnly
+                                onMount={(ed) => { bodyEditorRef.current = ed }}
+                            />
+                        </div>
                     </TabsContent>
                     {hasPreview && (
                         <TabsContent value="preview" className="mt-0 h-full absolute inset-0">
diff --git a/apps/web/src/components/api-client/skeletons.tsx b/apps/web/src/components/api-client/skeletons.tsx
new file mode 100644
index 00000000..3ed7e5a6
--- /dev/null
+++ b/apps/web/src/components/api-client/skeletons.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import { Skeleton } from "@/components/ui/skeleton"
+
+export function CollectionsSidebarSkeleton() {
+    return (
+        <div className="space-y-2 p-3" role="status" aria-busy="true" aria-label="Loading collections">
+            {Array.from({ length: 6 }).map((_, i) => (
+                <Skeleton key={i} className="h-9 w-full rounded-md" />
+            ))}
+        </div>
+    )
+}
+
+export function HistoryListSkeleton() {
+    return (
+        <div className="space-y-2 p-3" role="status" aria-busy="true" aria-label="Loading history">
+            {Array.from({ length: 8 }).map((_, i) => (
+                <Skeleton key={i} className="h-12 w-full rounded-md" />
+            ))}
+        </div>
+    )
+}
+
+export function ResponsePanelSkeleton() {
+    return (
+        <div className="space-y-2 p-4" role="status" aria-busy="true" aria-label="Loading response">
+            <Skeleton className="h-5 w-40" />
+            <Skeleton className="h-32 w-full" />
+            <Skeleton className="h-5 w-1/2" />
+        </div>
+    )
+}
diff --git a/apps/web/src/components/api-client/tab-bar.tsx b/apps/web/src/components/api-client/tab-bar.tsx
index b3d12b7f..29f6b497 100644
--- a/apps/web/src/components/api-client/tab-bar.tsx
+++ b/apps/web/src/components/api-client/tab-bar.tsx
@@ -5,10 +5,10 @@ import { X, Plus, Copy } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 import { ApiRequestState } from "./types"
 import { getApiClientRequestDisplayName } from "./display-name"
 import { useTranslations } from "next-intl"
-import { motion, AnimatePresence } from "framer-motion"
 
 interface TabBarProps {
     tabs: ApiRequestState[]
@@ -52,6 +52,27 @@ export function TabBar({
     const [draggedId, setDraggedId] = React.useState<string | null>(null)
     const [dragOverId, setDragOverId] = React.useState<string | null>(null)
 
+    // Refs for measuring active-tab indicator position
+    const tabListRef = React.useRef<HTMLDivElement>(null)
+    const tabRefs = React.useRef<Record<string, HTMLDivElement | null>>({})
+    const [indicatorStyle, setIndicatorStyle] = React.useState<{ left: number; width: number } | null>(null)
+
+    // Measure the active tab and update the indicator synchronously before paint
+    React.useLayoutEffect(() => {
+        const activeEl = tabRefs.current[activeTabId]
+        const listEl = tabListRef.current
+        if (!activeEl || !listEl) {
+            setIndicatorStyle(null)
+            return
+        }
+        const tabRect = activeEl.getBoundingClientRect()
+        const listRect = listEl.getBoundingClientRect()
+        setIndicatorStyle({
+            left: tabRect.left - listRect.left,
+            width: tabRect.width,
+        })
+    }, [activeTabId, tabs])
+
     const handleDoubleClick = (tab: ApiRequestState) => {
         if (!onTabRename) return
         setEditingTabId(tab.id)
@@ -100,109 +121,117 @@ export function TabBar({
 
     return (
         <div className="flex items-center border-b bg-muted/30 backdrop-blur-sm h-11">
+            <TooltipProvider delayDuration={500}>
             <ScrollArea className="flex-initial min-w-0 h-full">
-                <div className="flex w-max items-center h-full px-1">
-                    <AnimatePresence initial={false} mode="popLayout">
-                        {tabs.map((tab) => (
-                            <motion.div
-                                key={tab.id}
-                                layout
-                                initial={{ opacity: 0, x: -10 }}
-                                animate={{ opacity: 1, x: 0 }}
-                                exit={{ opacity: 0, scale: 0.9 }}
-                                transition={{ duration: 0.2 }}
-                                draggable={!!onTabReorder}
-                                onDragStart={(e) => handleDragStart(e as unknown as React.DragEvent, tab.id)}
-                                onDragOver={(e) => handleDragOver(e as unknown as React.DragEvent, tab.id)}
-                                onDrop={(e) => handleDrop(e as unknown as React.DragEvent, tab.id)}
-                                onDragEnd={handleDragEnd}
-                                className={cn(
-                                    "group relative flex items-center gap-2 px-3 py-1.5 text-sm font-medium cursor-pointer select-none min-w-[140px] max-w-[220px] h-[34px] rounded-md transition-colors m-0.5",
-                                    activeTabId === tab.id
-                                        ? "bg-background text-foreground shadow-sm"
-                                        : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
-                                    dragOverId === tab.id && draggedId !== tab.id && "ring-2 ring-primary/50 ring-inset",
-                                    draggedId === tab.id && "opacity-50"
-                                )}
-                                onClick={() => {
-                                    if (editingTabId !== tab.id) onTabChange(tab.id)
-                                }}
-                                onDoubleClick={() => handleDoubleClick(tab)}
-                            >
-                                {activeTabId === tab.id && (
-                                    <motion.div
-                                        layoutId="active-tab"
-                                        className="absolute inset-0 bg-background rounded-md shadow-sm -z-10"
-                                        transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
-                                    />
-                                )}
-
-                                <span className={cn(
-                                    "text-[10px] font-black uppercase w-8 flex-shrink-0 tracking-tighter",
-                                    getMethodColor(tab.method)
-                                )}>
-                                    {tab.method}
-                                </span>
-
-                                {editingTabId === tab.id ? (
-                                    <input
-                                        ref={editInputRef}
-                                        className="flex-1 text-xs bg-transparent border-b border-primary outline-none min-w-0 text-foreground"
-                                        value={editValue}
-                                        onChange={(e) => setEditValue(e.target.value)}
-                                        onBlur={commitRename}
-                                        onKeyDown={(e) => {
-                                            if (e.key === "Enter") commitRename()
-                                            if (e.key === "Escape") setEditingTabId(null)
-                                            e.stopPropagation()
-                                        }}
-                                        onClick={(e) => e.stopPropagation()}
-                                    />
-                                ) : (
-                                    <span className="truncate flex-1 text-xs">
+                {/* relative container so the sliding indicator is positioned within it */}
+                <div ref={tabListRef} className="relative flex w-max items-center h-full px-1">
+                    {/* Sliding active-tab background + underline indicator */}
+                    {indicatorStyle && (
+                        <span
+                            aria-hidden="true"
+                            className="pointer-events-none absolute top-0.5 bottom-0.5 bg-background rounded-md shadow-sm -z-0 transition-all duration-200"
+                            style={{ left: indicatorStyle.left, width: indicatorStyle.width }}
+                        />
+                    )}
+                    {/* Sliding underline indicator */}
+                    {indicatorStyle && (
+                        <span
+                            aria-hidden="true"
+                            className="pointer-events-none absolute bottom-0 h-0.5 bg-primary rounded-full -z-0 transition-all duration-200"
+                            style={{
+                                left: indicatorStyle.left + 8,
+                                width: Math.max(0, indicatorStyle.width - 16),
+                            }}
+                        />
+                    )}
+
+                    {tabs.map((tab) => (
+                        <div
+                            key={tab.id}
+                            ref={(el) => { tabRefs.current[tab.id] = el }}
+                            draggable={!!onTabReorder}
+                            onDragStart={(e) => handleDragStart(e, tab.id)}
+                            onDragOver={(e) => handleDragOver(e, tab.id)}
+                            onDrop={(e) => handleDrop(e, tab.id)}
+                            onDragEnd={handleDragEnd}
+                            className={cn(
+                                "group relative flex items-center gap-2 px-3 py-1.5 text-sm font-medium cursor-pointer select-none min-w-[140px] max-w-[220px] h-[34px] rounded-md transition-colors m-0.5",
+                                activeTabId === tab.id
+                                    ? "text-foreground"
+                                    : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+                                dragOverId === tab.id && draggedId !== tab.id && "ring-2 ring-primary/50 ring-inset",
+                                draggedId === tab.id && "opacity-50"
+                            )}
+                            onClick={() => {
+                                if (editingTabId !== tab.id) onTabChange(tab.id)
+                            }}
+                            onDoubleClick={() => handleDoubleClick(tab)}
+                        >
+                            <span className={cn(
+                                "text-[10px] font-black uppercase w-8 flex-shrink-0 tracking-tighter",
+                                getMethodColor(tab.method)
+                            )}>
+                                {tab.method}
+                            </span>
+
+                            {editingTabId === tab.id ? (
+                                <input
+                                    ref={editInputRef}
+                                    className="flex-1 text-xs bg-transparent border-b border-primary outline-none min-w-0 text-foreground"
+                                    value={editValue}
+                                    onChange={(e) => setEditValue(e.target.value)}
+                                    onBlur={commitRename}
+                                    onKeyDown={(e) => {
+                                        if (e.key === "Enter") commitRename()
+                                        if (e.key === "Escape") setEditingTabId(null)
+                                        e.stopPropagation()
+                                    }}
+                                    onClick={(e) => e.stopPropagation()}
+                                />
+                            ) : (
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <span className="truncate flex-1 text-xs">
+                                            {getApiClientRequestDisplayName(tab.name, t)}
+                                        </span>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
                                         {getApiClientRequestDisplayName(tab.name, t)}
-                                    </span>
-                                )}
+                                    </TooltipContent>
+                                </Tooltip>
+                            )}
 
-                                {onTabDuplicate && (
-                                    <button
-                                        className="flex items-center justify-center h-4 w-4 rounded-full transition-all opacity-0 group-hover:opacity-100 hover:bg-muted text-muted-foreground hover:text-foreground"
-                                        onClick={(e) => {
-                                            e.stopPropagation()
-                                            onTabDuplicate(tab.id)
-                                        }}
-                                        title="Duplicate tab"
-                                    >
-                                        <Copy className="h-2.5 w-2.5" />
-                                    </button>
-                                )}
+                            {onTabDuplicate && (
                                 <button
-                                    className={cn(
-                                        "flex items-center justify-center h-4 w-4 rounded-full transition-all",
-                                        activeTabId === tab.id ? "opacity-100" : "opacity-0 group-hover:opacity-100",
-                                        "hover:bg-muted text-muted-foreground hover:text-foreground"
-                                    )}
+                                    className="flex items-center justify-center h-4 w-4 rounded-full transition-all opacity-0 group-hover:opacity-100 hover:bg-muted text-muted-foreground hover:text-foreground"
                                     onClick={(e) => {
                                         e.stopPropagation()
-                                        onTabClose(tab.id)
+                                        onTabDuplicate(tab.id)
                                     }}
+                                    title="Duplicate tab"
                                 >
-                                    <X className="h-2.5 w-2.5" />
+                                    <Copy className="h-2.5 w-2.5" />
                                 </button>
-
-                                {activeTabId === tab.id && (
-                                    <motion.div
-                                        layoutId="active-underline"
-                                        className="absolute bottom-0 left-2 right-2 h-0.5 bg-primary rounded-full"
-                                        transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
-                                    />
+                            )}
+                            <button
+                                className={cn(
+                                    "flex items-center justify-center h-4 w-4 rounded-full transition-all",
+                                    activeTabId === tab.id ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+                                    "hover:bg-muted text-muted-foreground hover:text-foreground"
                                 )}
-                            </motion.div>
-                        ))}
-                    </AnimatePresence>
+                                onClick={(e) => {
+                                    e.stopPropagation()
+                                    onTabClose(tab.id)
+                                }}
+                            >
+                                <X className="h-2.5 w-2.5" />
+                            </button>
+                        </div>
+                    ))}
                 </div>
                 <ScrollBar orientation="horizontal" className="h-1.5 invisible" />
             </ScrollArea>
+            </TooltipProvider>
             <Button
                 variant="ghost"
                 size="icon"
diff --git a/apps/web/src/components/api-client/truncate-body.ts b/apps/web/src/components/api-client/truncate-body.ts
new file mode 100644
index 00000000..ba43a8ed
--- /dev/null
+++ b/apps/web/src/components/api-client/truncate-body.ts
@@ -0,0 +1,14 @@
+/**
+ * Pure helper for truncating large response bodies before passing them to Monaco.
+ * Extracted so tests can import it without pulling in React/next-intl.
+ */
+
+export interface TruncateResult {
+    inline: string
+    truncated: boolean
+}
+
+export function truncateBody(body: string, max: number): TruncateResult {
+    if (body.length <= max) return { inline: body, truncated: false }
+    return { inline: body.slice(0, max), truncated: true }
+}
diff --git a/apps/web/src/components/api-client/use-history.ts b/apps/web/src/components/api-client/use-history.ts
index 9deef585..72879b76 100644
--- a/apps/web/src/components/api-client/use-history.ts
+++ b/apps/web/src/components/api-client/use-history.ts
@@ -12,6 +12,7 @@ const HISTORY_LIMIT = 100
 export function useHistory() {
     const [user, loading] = useAuthState(auth)
     const [history, setHistory] = useState<HistoryRequest[]>([])
+    const [isHistoryLoading, setIsHistoryLoading] = useState(true)
     const migrationRanRef = useRef(false)
 
     const authedFetch = useCallback(
@@ -53,6 +54,7 @@ export function useHistory() {
             } else {
                 setHistory([])
             }
+            setIsHistoryLoading(false)
             return
         }
 
@@ -64,10 +66,16 @@ export function useHistory() {
                     { method: "GET" }
                 )
                 const items = (await res.json()) as HistoryRequest[]
-                if (!cancelled) setHistory(items)
+                if (!cancelled) {
+                    setHistory(items)
+                    setIsHistoryLoading(false)
+                }
             } catch (e) {
                 console.error("Failed to load API client history", e)
-                if (!cancelled) setHistory([])
+                if (!cancelled) {
+                    setHistory([])
+                    setIsHistoryLoading(false)
+                }
             }
         })()
 
@@ -208,5 +216,5 @@ export function useHistory() {
         [user, authedFetch]
     )
 
-    return { history, addHistoryItem, clearHistory, deleteHistoryItem }
+    return { history, isHistoryLoading, addHistoryItem, clearHistory, deleteHistoryItem }
 }
diff --git a/apps/web/src/components/dashboard/dashboard-pinned-section.tsx b/apps/web/src/components/dashboard/dashboard-pinned-section.tsx
index e0b69e13..ac62b22a 100644
--- a/apps/web/src/components/dashboard/dashboard-pinned-section.tsx
+++ b/apps/web/src/components/dashboard/dashboard-pinned-section.tsx
@@ -18,7 +18,7 @@ interface DashboardPinnedSectionProps {
 const VISIBLE_CAP = 8
 
 const SKELETON_GRID_CLASS =
-  'hidden md:grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 md:gap-4'
+  'hidden md:grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 md:gap-4 xl:gap-5'
 
 /**
  * Pinned tools section.
@@ -93,7 +93,7 @@ export function DashboardPinnedSection({
             {pinnedItems.map((item, index) => (
               <div
                 key={`pinned-mobile-${item.originalId}`}
-                className="scroll-snap-item w-[min(280px,75vw)] flex-shrink-0"
+                className="scroll-snap-item w-[260px] flex-shrink-0 snap-start"
               >
                 <ToolCard item={item} id={item.originalId!} index={index} {...toolCardProps} />
               </div>
@@ -102,7 +102,7 @@ export function DashboardPinnedSection({
         </HScrollFade>
       </div>
       {/* Desktop: grid */}
-      <div className="hidden md:grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 md:gap-4">
+      <div className="hidden md:grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 md:gap-4 xl:gap-5">
         {visible.map((item, index) => (
           <ToolCard
             key={`pinned-${item.originalId}`}
diff --git a/apps/web/src/components/dashboard/dashboard-recent-tools.tsx b/apps/web/src/components/dashboard/dashboard-recent-tools.tsx
index 7009e6e5..7a7d3bbe 100644
--- a/apps/web/src/components/dashboard/dashboard-recent-tools.tsx
+++ b/apps/web/src/components/dashboard/dashboard-recent-tools.tsx
@@ -62,7 +62,7 @@ export function DashboardRecentTools({
             {recentItems.map((item, index) => (
               <div
                 key={`recent-mobile-${item.id}`}
-                className="scroll-snap-item w-[min(280px,75vw)] flex-shrink-0"
+                className="scroll-snap-item w-[260px] flex-shrink-0 snap-start"
               >
                 <ToolCard
                   item={item}
@@ -77,7 +77,7 @@ export function DashboardRecentTools({
         </HScrollFade>
       </div>
       {/* Desktop: grid */}
-      <div className="hidden md:grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 md:gap-4">
+      <div className="hidden md:grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 md:gap-4 xl:gap-5">
         {visible.map((item, index) => (
           <ToolCard
             key={`recent-${item.id}`}
diff --git a/apps/web/src/components/dashboard/dashboard-tool-card.tsx b/apps/web/src/components/dashboard/dashboard-tool-card.tsx
index 2ff9626d..a8737d0c 100644
--- a/apps/web/src/components/dashboard/dashboard-tool-card.tsx
+++ b/apps/web/src/components/dashboard/dashboard-tool-card.tsx
@@ -5,10 +5,11 @@ import Link from 'next/link'
 import { Sparkles, Pin } from 'lucide-react'
 import { useTranslations } from 'next-intl'
 import { Card, CardContent } from '@/components/ui/card'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { requiresAuth } from '@/lib/tool-config'
 import { TOOL_PATH_TO_MESSAGE_KEY } from '@/lib/tool-i18n'
 import { cn } from '@/lib/utils'
-import { type ToolCardProps, formatRelativeTime } from './types'
+import { type ToolCardProps, DEFAULT_ACCENT, formatRelativeTime } from './types'
 
 /** Wraps a horizontal scroll row with a right-edge fade affordance. */
 export const HScrollFade = ({ children }: { children: React.ReactNode }) => (
@@ -20,25 +21,29 @@ export const HScrollFade = ({ children }: { children: React.ReactNode }) => (
 
 /** Matches ToolCard footprint so layout doesn't shift on hydration. */
 export const ToolCardSkeleton = () => (
-  <div className="rounded-lg h-full" aria-hidden>
+  <div className="rounded-xl h-full" aria-hidden>
     <div className="block h-full">
-      <Card className="bg-card border border-border h-full overflow-hidden rounded-lg">
-        <CardContent className="flex items-center gap-2.5 p-2.5 md:p-3">
-          <div className="shrink-0 h-9 w-9 md:h-10 md:w-10 rounded-lg bg-muted animate-pulse" />
-          <div className="min-w-0 flex-1 h-4 rounded bg-muted animate-pulse" />
+      <Card className="bg-card border border-border h-full overflow-hidden rounded-xl relative">
+        <CardContent className="flex items-center gap-2.5 p-3 md:p-3.5">
+          <div className="shrink-0 h-9 w-9 md:h-10 md:w-10 rounded-lg bg-muted skeleton-shimmer" />
+          <div className="min-w-0 flex-1 space-y-1.5">
+            <div className="h-3.5 w-3/4 rounded bg-muted skeleton-shimmer" />
+            <div className="h-2.5 w-1/2 rounded bg-muted/70 skeleton-shimmer" />
+          </div>
         </CardContent>
       </Card>
     </div>
   </div>
 )
 
-/** A compact single-line tool card: icon + title, with hover pin action. */
+/** A compact tool card: accented icon + title (+ optional description), with hover pin action. */
 export const ToolCard = React.memo(function ToolCard({
   item,
   user,
   isPinned,
   togglePin,
   timestamp,
+  accent,
 }: ToolCardProps) {
   const tTools = useTranslations('Dashboard.tools')
   const pathname = item.url?.toString().split('?')[0] ?? ''
@@ -46,8 +51,18 @@ export const ToolCard = React.memo(function ToolCard({
   const displayTitle = toolKey
     ? tTools(`${toolKey}.title` as Parameters<typeof tTools>[0])
     : item.title
+  const displayDescription = toolKey
+    ? (() => {
+        try {
+          return tTools(`${toolKey}.description` as Parameters<typeof tTools>[0])
+        } catch {
+          return item.description
+        }
+      })()
+    : item.description
 
   const itemRequiresAuth = item.url ? requiresAuth(item.url.toString()) : false
+  const a = accent ?? DEFAULT_ACCENT
 
   const handleClick = (e: React.MouseEvent) => {
     if (itemRequiresAuth && !user) {
@@ -59,16 +74,30 @@ export const ToolCard = React.memo(function ToolCard({
   const pinned = item.url ? isPinned(item.url.toString()) : false
 
   return (
-    <div className="rounded-lg h-full">
+    <div className="rounded-xl h-full">
       <Link
         href={item.url || '#'}
-        className="block group h-full rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        className="block group h-full rounded-xl focus-visible:outline-none"
         onClick={handleClick}
         title={displayTitle}
       >
-        <Card className="bg-card border border-border hover:border-primary/40 hover:bg-accent/20 hover:shadow-sm active:scale-[0.99] transition-[colors,background-color,transform,box-shadow] duration-200 h-full relative overflow-hidden rounded-lg">
-          <CardContent className="flex items-center gap-2.5 p-2.5 md:p-3 relative z-10">
-            <div className="shrink-0 p-2 md:p-2.5 rounded-lg bg-primary/10 text-primary">
+        <Card
+          className={cn(
+            'relative h-full overflow-hidden rounded-xl border border-border bg-gradient-to-br from-card to-card/60',
+            'transition-[colors,transform,box-shadow,border-color] duration-200 ease-out',
+            'hover:border-primary/40 hover:shadow-md motion-safe:hover:-translate-y-0.5',
+            'group-focus-visible:ring-2 group-focus-visible:ring-primary/60 group-focus-visible:border-primary',
+          )}
+        >
+          <CardContent className="flex items-start gap-3 p-3 md:p-3.5 relative z-10">
+            <div
+              className={cn(
+                'shrink-0 p-2 md:p-2.5 rounded-lg transition-transform duration-200 ease-out',
+                'motion-safe:group-hover:scale-110',
+                a.bg,
+                a.text,
+              )}
+            >
               {item.icon ? (
                 <item.icon size={18} strokeWidth={1.5} className="md:w-5 md:h-5" />
               ) : (
@@ -76,48 +105,66 @@ export const ToolCard = React.memo(function ToolCard({
               )}
             </div>
 
-            <h3 className="min-w-0 flex-1 truncate text-sm font-medium text-foreground group-hover:text-primary transition-colors">
-              {displayTitle}
-            </h3>
-
-            {item.badge && (
-              <span className="shrink-0 bg-primary/10 text-primary text-[9px] md:text-[10px] font-semibold px-1.5 py-0.5 rounded-full uppercase tracking-wider border border-primary/20">
-                {item.badge}
-              </span>
-            )}
-
-            {timestamp && !item.badge && (
-              <span className="shrink-0 text-[10px] text-muted-foreground/50 tabular-nums">
-                {formatRelativeTime(timestamp)}
-              </span>
-            )}
+            <div className="min-w-0 flex-1 pr-7">
+              <div className="flex items-center gap-1.5">
+                <h3 className="min-w-0 flex-1 truncate text-sm font-medium text-foreground transition-colors group-hover:text-primary">
+                  {displayTitle}
+                </h3>
+                {item.badge && (
+                  <span className="shrink-0 bg-primary/10 text-primary text-[9px] md:text-[10px] font-semibold px-1.5 py-0.5 rounded-full uppercase tracking-wider border border-primary/20">
+                    {item.badge}
+                  </span>
+                )}
+              </div>
+              {displayDescription && (
+                <p className="mt-0.5 truncate text-[11px] md:text-xs text-muted-foreground/80">
+                  {displayDescription}
+                </p>
+              )}
+              {timestamp && (
+                <p className="mt-0.5 text-[10px] text-muted-foreground/60 tabular-nums">
+                  {formatRelativeTime(timestamp)}
+                </p>
+              )}
+            </div>
 
             {item.url && (
-              <button
-                type="button"
-                aria-label={`${pinned ? 'Unpin' : 'Pin'} ${displayTitle}`}
-                aria-pressed={pinned}
-                className={cn(
-                  'shrink-0 rounded-md hover:bg-muted/80 transition-colors cursor-pointer',
-                  'flex items-center justify-center min-h-11 min-w-11 md:min-h-0 md:min-w-0 md:p-1 -m-2 md:m-0',
-                  'opacity-60 md:opacity-0 md:group-hover:opacity-100 focus-visible:opacity-100',
-                )}
-                onClick={(e) => {
-                  e.preventDefault()
-                  e.stopPropagation()
-                  togglePin(item.url!.toString())
-                }}
-              >
-                <Pin
-                  className={cn(
-                    'transition-colors',
-                    pinned
-                      ? 'text-primary fill-primary'
-                      : 'text-muted-foreground/60 hover:text-primary',
-                  )}
-                  size={14}
-                />
-              </button>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    role="switch"
+                    aria-checked={pinned}
+                    aria-label={`${pinned ? 'Unpin' : 'Pin'} ${displayTitle}`}
+                    className={cn(
+                      'absolute top-1.5 right-1.5 rounded-md transition-all cursor-pointer',
+                      'flex items-center justify-center h-7 w-7',
+                      'hover:bg-muted/80',
+                      pinned
+                        ? 'opacity-100'
+                        : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100',
+                    )}
+                    onClick={(e) => {
+                      e.preventDefault()
+                      e.stopPropagation()
+                      togglePin(item.url!.toString())
+                    }}
+                  >
+                    <Pin
+                      className={cn(
+                        'transition-colors',
+                        pinned
+                          ? 'text-primary fill-primary'
+                          : 'text-muted-foreground/70 hover:text-primary',
+                      )}
+                      size={14}
+                    />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="top" sideOffset={4} className="text-xs">
+                  {pinned ? 'Unpin' : 'Pin'}
+                </TooltipContent>
+              </Tooltip>
             )}
           </CardContent>
         </Card>
diff --git a/apps/web/src/components/dashboard/dashboard-tool-grid.tsx b/apps/web/src/components/dashboard/dashboard-tool-grid.tsx
index 4fd4cb3d..4b1ab152 100644
--- a/apps/web/src/components/dashboard/dashboard-tool-grid.tsx
+++ b/apps/web/src/components/dashboard/dashboard-tool-grid.tsx
@@ -59,7 +59,7 @@ export function DashboardToolGrid({
               </span>
             </div>
           </div>
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 md:gap-4">
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 md:gap-4 xl:gap-5">
             {group.items.map((item: any, itemIndex: number) => (
               <React.Fragment key={`${groupIndex}-${itemIndex}`}>
                 {/* Render search result items (flattened) */}
@@ -68,6 +68,7 @@ export function DashboardToolGrid({
                     item={item}
                     id={item.originalId}
                     index={itemIndex}
+                    accent={accent}
                     {...toolCardProps}
                   />
                 )}
@@ -80,6 +81,7 @@ export function DashboardToolGrid({
                       item={{ ...subItem, icon: subItem.icon ?? item.icon }}
                       id={createItemId(group.originalGroupIndex, itemIndex, subIndex)}
                       index={subIndex}
+                      accent={accent}
                       {...toolCardProps}
                     />
                   ))}
@@ -101,7 +103,7 @@ export function DashboardToolGrid({
               <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider px-1">
                 {t('popularTools')}
               </p>
-              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 md:gap-4">
+              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 md:gap-4 xl:gap-5">
                 {popularItems.map((item, index) => (
                   <ToolCard
                     key={`popular-${item.originalId}`}
diff --git a/apps/web/src/components/dashboard/types.ts b/apps/web/src/components/dashboard/types.ts
index 5f26adb5..ca746129 100644
--- a/apps/web/src/components/dashboard/types.ts
+++ b/apps/web/src/components/dashboard/types.ts
@@ -38,6 +38,7 @@ export interface ToolCardProps {
   isPinned: (url: string) => boolean
   togglePin: (url: string) => void
   timestamp?: number
+  accent?: { bg: string; text: string }
 }
 
 // ─── Helpers ────────────────────────────────────────────────────────────────
diff --git a/apps/web/src/lib/use-debounced-value.ts b/apps/web/src/lib/use-debounced-value.ts
new file mode 100644
index 00000000..9f3500a7
--- /dev/null
+++ b/apps/web/src/lib/use-debounced-value.ts
@@ -0,0 +1,14 @@
+import * as React from "react"
+
+/**
+ * Returns a debounced version of `value` that only updates after `ms`
+ * milliseconds of inactivity.
+ */
+export function useDebouncedValue<T>(value: T, ms: number): T {
+    const [v, setV] = React.useState(value)
+    React.useEffect(() => {
+        const id = setTimeout(() => setV(value), ms)
+        return () => clearTimeout(id)
+    }, [value, ms])
+    return v
+}
diff --git a/pitchdeck.md b/pitchdeck.md
deleted file mode 100644
index 8e653e68..00000000
--- a/pitchdeck.md
+++ /dev/null
@@ -1,307 +0,0 @@
-# MyDevTools — Pitch Deck
-
-> Working draft. Each `## Slide` maps to one deck slide. Speaker notes in blockquotes.
-> **Numbers are filled with modeled/illustrative values for a 10K-paying-user Year 1.** Items marked **⚠️ VERIFY** (traction, founder bio, final raise terms) are placeholders only you can confirm — replace with live data before sending. See the Appendix checklist.
-
----
-
-## Slide 1 — Title
-
-# MyDevTools.tech
-### The all-in-one developer toolkit — fast, private, beautifully crafted.
-
-- **The only tool that unifies SQL, NoSQL, and Redis in one workspace** — alongside 60+ developer utilities and productivity apps.
-- Client-side first. Privacy by design. Open source (GPLv3).
-> One-liner: "One client for every database, plus the 60+ tools developers keep in 20 browser tabs — unified, private, and beautiful."
-
----
-
-## Slide 2 — The Problem
-
-**Developers waste time and trust on fragmented tooling.**
-
-- **Scattered.** A typical workflow touches 10–20 single-purpose sites (JSON formatter, JWT decoder, regex tester, cron builder…) — and 2–3 separate apps just for SQL, NoSQL, and Redis.
-- **Ad-riddled & slow.** Most free dev-tool sites monetize with intrusive ads and SEO spam.
-- **Privacy risk.** Pasting tokens, secrets, certs, or production data into unknown servers is a real security exposure.
-- **No continuity.** No saved history, no shared environments, no team state. Every session starts from zero.
-- **Context-switching tax.** Constant tab- and app-hopping breaks flow and kills productivity.
-
-> Pain is daily, universal, and currently "solved" by a junk drawer of bookmarks and three open database GUIs.
-
----
-
-## Slide 3 — The Solution
-
-**One workspace. Every tool. Your data stays yours.**
-
-- **One client for every database** — SQL, NoSQL (MongoDB), and Redis, side by side. No more juggling three separate apps.
-- **60+ tools unified** — utilities, an API client, database clients, and productivity apps in one home.
-- **Client-side first** — data processed in-browser wherever possible; no server round-trips for sensitive input.
-- **Persistent & personal** — saved snippets, notes, environments, vault, bookmarks — synced across sessions.
-- **Premium UX** — dark/light mode, fluid animations, fully responsive, command palette, i18n.
-- **Open source & self-hostable** — trust through transparency.
-
-> We replace 20 sketchy tabs and 3 database apps with one tool developers want open all day.
-
----
-
-## Slide 4 — Product & USPs
-
-### Unique Selling Points
-1. **The only all-in-one database client** — SQL + NoSQL (MongoDB) + Redis in one workspace. Tools force devs into 3 separate apps; we're one. This is the wedge.
-2. **Breadth + depth in one app** — 60+ tools; no competitor bundles this range with this polish.
-3. **Privacy-first architecture** — client-side processing; secrets never leave the browser.
-4. **Open source (GPLv3) + self-host** — developer trust moat.
-5. **Persistence & sync** — tools remember your work; productivity apps live alongside utilities.
-6. **Beautiful, fast, ad-free** — premium UX vs. the ad-spam incumbents.
-
-### The Toolbox (60+)
-
-**Database & Connectivity (the wedge):** SQL Client · NoSQL Explorer (MongoDB) · Redis Commander · S3 Drive · API Client (Postman-like)
-
-**Developer Utilities:** Base64 · Certificate/PEM Decoder · Color Picker · Contrast Checker · Cron Builder · CSV/Excel/JSON · Diff Checker · Docker Compose Generator · Email Validator · Encryption Playground · Environment Manager · Format Converter (YAML/TOML/JSON/XML) · GraphQL Formatter · Hash Generator · HMAC Generator · HTTP Status Codes · Image Compressor · Image→Base64 · IP Subnet Calculator · JSON Formatter (Monaco) · JSON Schema Generator · .gitignore Generator · JWT Decoder · Lorem Ipsum · Markdown Preview · MIME Lookup · Mock Data Generator · Number Base Converter · Regex Tester · QR Code Generator · Secret/API Key Generator · Snippet Manager · SQL Formatter · SVG Optimizer · Timestamp Converter · TOTP Generator · Unit Converter · URL Encode/Decode · URL Parser · User Agent Parser · UUID Generator · CSS Gradient Builder
-
-**Productivity Apps:** Bookmarks · Break Room · Notes (Tiptap) · Password Manager (client-side encrypted) · Task Manager
-
-**Built-in distribution:** Public developer profile at `mydevtools.tech/<username>` — shareable, GitHub stats, social links.
-
-> Demo flow: connect a Postgres DB + a Redis instance side by side → run queries → save to snippets → share profile. Show the wedge + breadth + persistence in 90 seconds.
-
----
-
-## Slide 5 — Security & Trust
-
-**We connect to your databases. Earning trust is the product.**
-
-- **Why this slide exists:** the unified DB client touches users' SQL/NoSQL/Redis — potentially production credentials. This is both our biggest responsibility and our strongest differentiator vs. ad-funded web tools.
-- **Architecture commitments:**
-  - Credentials encrypted at rest; **no plaintext secret storage**; client-side encryption for the vault.
-  - Minimal-trust connection handling; transparent, open-source codebase users (and acquirers) can audit.
-  - Self-host option for teams that won't put DB access in any SaaS.
-- **Compliance roadmap:** SOC 2 Type II path post-raise; GDPR-aligned data handling; clear data-residency story for Team/Enterprise.
-
-> Turn the scariest objection into a moat: "We're the database tool you can actually trust — open source, encrypted, self-hostable." ⚠️ VERIFY exact current architecture before claiming specifics on stage.
-
----
-
-## Slide 6 — Why Now
-
-- **Developer population exploding** — ~30M+ developers worldwide today, projected toward ~45M by 2030.
-- **PLG is the proven motion** — bottoms-up adoption (Postman, Vercel, Linear) wins developer markets.
-- **Privacy backlash** — rising distrust of where pasted data and credentials go; client-side + open source is a selling point.
-- **Tool sprawl is worsening** — AI-era workflows mean devs juggle more tools, data, and databases than ever; a unified, trusted hub matters more.
-- **Open-source distribution compounds cheaply** — GitHub, Product Hunt, and SEO drive near-zero-CAC growth.
-
----
-
-## Slide 7 — Market
-
-- **TAM:** 30M+ professional developers globally. At $96/yr that's a ~$2.9B addressable spend; broaden to "developer productivity SaaS" and the category is tens of billions.
-- **SAM:** Developers who work with databases (SQL/NoSQL/Redis) and want unified tooling — ~8–10M reachable via PLG/SEO.
-- **SOM (5-yr target):** ~160K paying users — well under 2% of SAM.
-
-> We don't need to win the market. Capturing <2% of SAM as paid yields a $15M+ ARR business.
-
----
-
-## Slide 8 — Business Model
-
-**Freemium → Pro subscription.**
-
-| Tier | Price | Who | What |
-|---|---|---|---|
-| **Free** | $0 | Top-of-funnel | Limited tool/usage access; drives discovery & SEO (scope TBD) |
-| **Pro** | **$8/mo** ($80/yr annual) | Power users | All 60+ tools, the unified DB client (SQL/NoSQL/Redis), unlimited persistence, sync, vault |
-| **Team** | $8/seat/mo (future) | Small teams | Shared environments, collections, RBAC |
-| **Enterprise / Self-host** | Custom (future) | Orgs | SSO, on-prem, support, compliance |
-
-- **Headline unit:** $8/mo = **$96/yr per paid user**. ARR = paid users × $96.
-- **Free tier (live)** is the low-CAC growth engine; usage/tool limits nudge upgrade — the unified DB client is the "aha" that converts.
-- **Year 1 target: 10,000 paying users**, drawn from a larger free base.
-- **Expansion revenue (future):** team seats and enterprise/self-host licenses lift ARPU well above $96.
-
-> Free tier widens the funnel cheaply via SEO/OSS; Pro monetizes daily-active power users at $96/yr.
-
----
-
-## Slide 9 — Traction
-
-> ⚠️ VERIFY — numbers below are illustrative launch-stage figures. Replace with your live metrics; this is the most scrutinized slide.
-
-- Launched on Product Hunt (featured).
-- Open source on GitHub — **10 stars**, **3 contributors**.
-- **50 registered users**, **10 weekly active**, **250 paying** to date.
-- Month-over-month growth: **25%**. Monthly churn: **5%**.
-- 60+ tools shipped; weekly release cadence.
-
-> If revenue is still early, lead with usage + growth rate + the wedge's pull. Honesty beats inflated metrics with VCs — swap every number here for real data.
-
----
-
-## Slide 10 — Go-to-Market
-
-**Product-Led Growth — compounding and low-CAC.**
-
-1. **SEO moat** — 60+ tool pages ranking for high-intent queries ("redis gui", "jwt decoder", "cron builder"). Organic = near-zero marginal CAC.
-2. **The DB wedge** — lead acquisition with the one thing no one else does: SQL + NoSQL + Redis in one place.
-3. **Open-source flywheel** — GitHub stars, contributors, self-host advocates → credibility + inbound.
-4. **Built-in virality** — public developer profiles shared publicly, branded with MyDevTools.
-5. **Community** — Product Hunt, Hacker News, Reddit (r/webdev, r/database), dev Twitter/X, Dev.to.
-6. **Conversion** — free usage → $8/mo Pro at the DB-client / persistence wall. Target ~7%+ free→paid.
-
-> Channel mix is cheap and compounding — the foundation of the unit economics two slides down.
-
----
-
-## Slide 11 — Competition
-
-| | MyDevTools | DBeaver / TablePlus | Single-tool sites | Postman / niche SaaS |
-|---|---|---|---|---|
-| **SQL + NoSQL + Redis in one** | ✅ | ⚠️ SQL-first, partial | ❌ | ❌ |
-| Breadth (60+ tools) | ✅ | ❌ | ❌ | ❌ |
-| Privacy / client-side | ✅ | ✅ desktop | ❌ ads/trackers | ⚠️ |
-| Web + persistence + sync | ✅ | ❌ desktop only | ❌ | ✅ (one domain) |
-| Open source / self-host | ✅ | ⚠️ | ❌ | ❌ |
-| Productivity apps + profile | ✅ | ❌ | ❌ | ❌ |
-
-**Moat (defensibility):** features are copyable — the durable moat is the **compound**: the DB-trifecta wedge × 60+-tool breadth × privacy/trust brand × open-source distribution × switching costs from saved snippets/environments/vault × the viral profile network. Each tool added and each saved workspace deepens lock-in.
-
----
-
-## Slide 12 — 5-Year Financial Forecast
-
-**Model:** Freemium. Pro = $8/mo = $96/yr. ARR = paying users × $96. Conversion improves with product depth & retention.
-
-| Year | Registered Users | Free→Paid Conv | Paying Users | ARPU/yr | **ARR** |
-|---|---|---|---|---|---|
-| **1** | ~143,000 | 7% | 10,000 | $96 | **$0.96M** |
-| **2** | ~375,000 | 8% | 30,000 | $96 | **$2.88M** |
-| **3** | ~667,000 | 9% | 60,000 | $96 | **$5.76M** |
-| **4** | ~1,000,000 | 10% | 100,000 | $96 | **$9.60M** |
-| **5** | ~1,450,000 | 11% | 160,000 | $96 | **$15.36M** |
-
-**Sensitivity (Year 1 paying users):**
-- Conservative: 7,000 paid → $672K ARR
-- Base: 10,000 paid → $960K ARR
-- Aggressive: 15,000 paid → $1.44M ARR
-
-> Year 1 goal: **10K paying users → ~$1M ARR**, from a ~140K free base at ~7% conversion. ARPU is held flat at $96 (conservative) — Team/Enterprise seats are upside not yet modeled.
-
----
-
-## Slide 13 — Unit Economics & CAC
-
-- **Price:** $8/mo · **ARPU:** ~$96/yr · **Avg. paid lifetime:** ~24 mo → **LTV ≈ $192 gross** (~$165 contribution)
-- **Gross margin:** target ~85–90% (validate vs. DB-connection infra cost)
-
-### Can ₹10.5L marketing deliver 10K paying users?
-
-**The funnel (Year 1):** ~143K registered → **10K paying** (7% conversion).
-
-| Channel | Share of signups | New signups | Cost | Note |
-|---|---|---|---|---|
-| **Organic** (SEO on 60+ tool pages, OSS, Product Hunt, viral profiles) | ~75% | ~107K | ~₹0 marginal | The engine — compounds |
-| **Paid** (dev newsletters, content/social ads, sponsorships) | ~25% | ~36K | ₹10.5L (~$12.6K) | The accelerant |
-
-- **Paid cost per signup:** ₹10.5L ÷ 36K ≈ **₹29 (~$0.35)**
-- **Paid-channel CAC per paying user:** ₹29 ÷ 7% ≈ **₹417 (~$5)**
-- **Blended CAC** (all marketing ÷ all 10K paid): ₹10.5L ÷ 10K ≈ **₹105 (~$1.27)**
-
-### Why this is safe
-- **LTV:CAC** — blended ~150x; paid-channel ~38x. Even at a pessimistic **$30 cold-paid CAC, still ~6x** and payback < 4 months.
-- **Break-even headroom:** could pay up to **~$64/paying user** (3:1 threshold) and stay healthy — we budget ~$5. Huge margin of safety.
-
-> The math only works because organic carries ~75% of the funnel. ⚠️ The real risk isn't CAC — it's hitting **143K registered** and **7% conversion**. Prove both with early cohort data; that's what an angel should underwrite.
-
----
-
-## Slide 14 — Milestones & Roadmap
-
-**₹15L funds ~12 months of marketing + infra to reach 10K paying users (~$1M ARR).**
-
-| Quarter | Product | Growth / GTM | Target |
-|---|---|---|---|
-| **Q1** | Free tier limits live; DB client hardening | SEO content sprint, Product Hunt relaunch | 25K registered |
-| **Q2** | Team tier (shared envs/collections) | Community + OSS push | First 3K paying |
-| **Q3** | Security: SOC 2 path kickoff; vault hardening | Paid-channel CAC tests | 6K paying, churn <4% |
-| **Q4** | Enterprise/self-host packaging | Partnerships / integrations | **10K paying · ~$1M ARR** |
-| **Y2** | SSO, RBAC, audit logs | Outbound to teams | 30K paying · ~$2.9M ARR |
-
-> Tie spend to gates. Show you know exactly what each rupee unlocks. ⚠️ VERIFY quarterly targets against your real ramp.
-
----
-
-## Slide 15 — Team
-
-- **Akhil** — Founder / Lead Engineer. Full-stack developer who designed, built, and shipped 60+ production tools solo at a weekly release cadence. ⚠️ VERIFY — add prior role/company, notable wins, and why you'll win this market.
-- Open-source contributor community — 18 contributors and growing.
-- **Lean & capital-efficient:** product fully built solo; this round funds marketing + infra, not headcount. Part-time/contract help for content & design as needed.
-- **Single-founder risk (addressed head-on):** actively seeking a technical co-founder and onboarding 2 advisors (a devtools GTM operator + a security/compliance lead) to de-risk execution. FTE hiring deferred to the next round once ARR justifies it.
-
-> Investors back people. Proof of execution: 60+ tools shipped solo at weekly cadence. Pre-empt the solo-founder objection — name it before they do.
-
----
-
-## Slide 16 — The Ask
-
-- **Raising:** ₹10–20 lakh (~$12K–24K) angel / pre-seed round. ⚠️ VERIFY final amount & terms.
-- **Use of funds (₹15 lakh midpoint):**
-  - **70% marketing (~₹10.5 lakh)** — SEO content, paid-channel tests, community, Product Hunt, partnerships → drive the free funnel to 10K paying users
-  - **30% infrastructure (~₹4.5 lakh)** — hosting, database-connection infra, reliability, security hardening
-- **What it buys:** runway to scale the free funnel toward **10K paying users (~$1M ARR)** in Year 1, founder-led and capital-efficient.
-- **Why raise vs. self-fund:** the product is built and shipping — we want to validate the growth engine on investor capital first, de-risking before we commit our own. Founder is prepared to invest personally in later stages once the funnel is proven.
-
-> Lean raise, focused spend. The product is built (60+ tools shipped solo) — this money buys distribution, not R&D.
-
----
-
-## Slide 17 — Vision
-
-**The default workspace developers keep open all day.**
-
-Start as the unified database client + utility belt. Become the trusted, private, collaborative hub for individual developers and teams — data tools, utilities, productivity, and identity in one open platform.
-
-> Closing line: "One tool for every database, and every utility. The workspace developers keep open all day."
-
----
-
-## Slide 18 — Exit & Investor Upside
-
-**Your early check buys equity now. Returns come via the next round, or a strategic acquisition.**
-
-- **Nearest upside — the next round:** ₹10–20L today funds the growth that unlocks a priced seed/Series-A at a higher valuation. Early angel equity marks up as ARR climbs ($0.96M → $2.88M Y1→Y2).
-- **Why we're acquirable later:** a sticky, daily-active developer base + a unified SQL/NoSQL/Redis client is a natural bolt-on for devtool, cloud, and database platforms (GitLab, Atlassian, DigitalOcean, MongoDB, Redis…).
-- **Comparable M&A:** developer SaaS exits at **8–15x ARR** strategically — meaningful upside on an early, small check as the company scales.
-- **Founder committed:** building through scale, no early bail-out. Any founder liquidity happens alongside investors, never ahead.
-
-> Angel-stage framing: lead with the **path to the next round** (concrete, 12–24 months out), not a Year-5 acquisition fantasy. The acquisition story is the ceiling, not the pitch. ⚠️ Set entry valuation with your angel.
-
----
-
-## Appendix — Assumptions & Pre-Pitch Checklist
-
-**Key assumptions (validate before pitching):**
-- Freemium: live limited free tier + $8/mo Pro; annual discount to $80/yr. Free-tier scope (tool/usage limits) TBD.
-- Year 1 target = 10,000 paying users, from ~140K free base at ~7% conversion.
-- Paid growth 10K → 160K over 5 years; conversion ramp 7%→11% (assumed; validate with cohort data). **Note: 7% free→paid is at the optimistic end (typical SaaS 2–5%) — be ready to defend it with the wedge's stickiness.**
-- Avg paid lifetime 24 months; CAC $15–30 via PLG/SEO/OSS.
-- Developer TAM ~30M, growing ~45M by 2030 (cite source: e.g. SlashData/Evans Data).
-
-**⚠️ VERIFY — filled with illustrative values; replace with real before sending (only you have these):**
-- [ ] Real traction numbers (Slide 9) — currently placeholders: 400 stars, 18 contributors, 12K registered, 3.5K WAU, 250 paying, 25% MoM, 5% churn.
-- [ ] Founder bio + prior wins (Slide 15) — generic placeholder text in place.
-- [ ] Raise terms (Slide 16) — modeled as ₹10–20 lakh angel round (70% marketing / 30% infra); set exact amount, valuation & instrument.
-- [ ] Milestone targets (Slide 14) — modeled quarterly ramp; check against your real plan.
-- [ ] Security architecture specifics (Slide 5) — confirm what's actually implemented today.
-- [ ] Exit / next-round upside (Slide 18) — set entry valuation with your angel; keep return framing consistent with the ₹10–20L raise.
-
-**Defend-with-data (investors will probe):**
-- [ ] **Churn / retention** — the 24-mo lifetime and LTV rest on it.
-- [ ] **CAC proof** — show real cost per paid user, not just "SEO is cheap."
-- [ ] **Margin** — if any DB proxying is server-side, infra scales with usage; confirm 85–90% holds.
-- [ ] **Conversion rate** — prove the 7% with early cohort data.
-
-**Polish for the designed deck:**
-- [ ] Visual charts: ARR curve, funnel, market-size pyramid.
-- [ ] Verify market-size citation with a real source.
-- [ ] One-line demo GIF/video of SQL + Redis side by side.