try optimize setup

Dockerfile

@@ -0,0 +1,31 @@
+FROM node:20-alpine AS build
+WORKDIR /app
+
+# Install deps first
+COPY package.json package-lock.json* yarn.lock* ./
+RUN if [ -f package-lock.json ]; then npm ci; \
+    elif [ -f yarn.lock ]; then yarn install --frozen-lockfile; \
+    else npm install; fi
+
+# Copy sources
+COPY . .
+
+# Build-time env vars for Vite
+ARG VITE_SENTRY_DSN
+ARG VITE_API_BASE_URL
+ARG VITE_API_BASE_STORAGE_URL
+ENV VITE_SENTRY_DSN=${VITE_SENTRY_DSN}
+ENV VITE_API_BASE_URL=${VITE_API_BASE_URL}
+ENV VITE_API_BASE_STORAGE_URL=${VITE_API_BASE_STORAGE_URL}
+
+RUN npm run build
+
+FROM nginx:alpine AS runtime
+COPY --from=build /app/dist /usr/share/nginx/html
+
+# Minimal SPA-friendly Nginx config
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
+

README.md

@@ -2,6 +2,16 @@
 
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
+## Environment variables
+
+Copy `.env.example` to `.env` (or provide the same variables through your deployment system) and adjust the URLs if needed. All frontend traffic (админка, загрузка, просмотр) завязан на `VITE_API_BASE_URL`, поэтому указывайте полный путь до `/api/v1` нужной ноды.
+
+```
+VITE_API_BASE_URL=https://my-public-node-103.projscale.dev/api/v1
+```
+
+При таком значении фронт автоматически отправляет tus-запросы на `https://my-public-node-103.projscale.dev/tus/files`, а прогрессивные загрузки (обложки, метаданные) — на `https://my-public-node-103.projscale.dev/api/v1.5/storage`.
+
 Currently, two official plugins are available:
 
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh

nginx.conf

@@ -0,0 +1,23 @@
+server {
+  listen 80;
+  server_name _;
+
+  # Increase limits for large uploads if needed
+  client_max_body_size 10G;
+  client_body_timeout 300s;
+  client_header_timeout 300s;
+
+  # Access logs with request id
+  access_log /var/log/nginx/access.log main;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location / {
+    try_files $uri /index.html;
+    # Propagate a request id to clients; backend (API) can echo as session id
+    add_header X-Request-Id $request_id always;
+    add_header X-Content-Type-Options nosniff always;
+    add_header Referrer-Policy no-referrer-when-downgrade always;
+  }
+}

package-lock.json

@@ -16,7 +16,6 @@
         "axios": "^1.6.7",
         "buffer": "^6.0.3",
         "clsx": "^2.1.0",
-        "jssha": "^3.3.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.51.0",
@@ -25,6 +24,7 @@
         "react-router-dom": "^6.22.2",
         "react-tag-input": "^6.10.3",
         "tailwind-merge": "^2.2.1",
+        "tus-js-client": "^4.3.1",
         "zod": "^3.22.4",
         "zustand": "^4.5.2"
       },
@@ -2298,6 +2298,12 @@
         "ieee754": "^1.2.1"
       }
     },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "license": "MIT"
+    },
     "node_modules/call-bind": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -2434,6 +2440,15 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
+    "node_modules/combine-errors": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/combine-errors/-/combine-errors-3.0.3.tgz",
+      "integrity": "sha512-C8ikRNRMygCwaTx+Ek3Yr+OuZzgZjduCOfSQBjbM8V3MfgcjSTeto/GXP6PAwKvJz/v15b7GHZvx5rOlczFw/Q==",
+      "dependencies": {
+        "custom-error-instance": "2.1.1",
+        "lodash.uniqby": "4.5.0"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2496,6 +2511,12 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/custom-error-instance": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/custom-error-instance/-/custom-error-instance-2.1.1.tgz",
+      "integrity": "sha512-p6JFxJc3M4OTD2li2qaHkDCw9SfMw82Ldr6OC9Je1aXiGfhx2W8p3GaoeaGrPJTUN9NirTM/KTxHWMUdR1rsUg==",
+      "license": "ISC"
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -3683,6 +3704,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -4062,6 +4089,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-string": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
@@ -4158,6 +4197,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-base64": {
+      "version": "3.7.8",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.8.tgz",
+      "integrity": "sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/js-sha3": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
@@ -4222,15 +4267,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/jssha": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/jssha/-/jssha-3.3.1.tgz",
-      "integrity": "sha512-VCMZj12FCFMQYcFLPRm/0lOBbLi8uM2BhXPTqw3U4YAfs4AZfiApOoBLoN8cQE60Z50m1MYMTQVCfgF/KaCVhQ==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -4294,12 +4330,74 @@
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
       "license": "MIT"
     },
+    "node_modules/lodash._baseiteratee": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash._baseiteratee/-/lodash._baseiteratee-4.7.0.tgz",
+      "integrity": "sha512-nqB9M+wITz0BX/Q2xg6fQ8mLkyfF7MU7eE+MNBNjTHFKeKaZAPEzEg+E8LWxKWf1DQVflNEn9N49yAuqKh2mWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash._stringtopath": "~4.8.0"
+      }
+    },
+    "node_modules/lodash._basetostring": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-4.12.0.tgz",
+      "integrity": "sha512-SwcRIbyxnN6CFEEK4K1y+zuApvWdpQdBHM/swxP962s8HIxPO3alBH5t3m/dl+f4CMUug6sJb7Pww8d13/9WSw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash._baseuniq": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz",
+      "integrity": "sha512-Ja1YevpHZctlI5beLA7oc5KNDhGcPixFhcqSiORHNsp/1QTv7amAXzw+gu4YOvErqVlMVyIJGgtzeepCnnur0A==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash._createset": "~4.0.0",
+        "lodash._root": "~3.0.0"
+      }
+    },
+    "node_modules/lodash._createset": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/lodash._createset/-/lodash._createset-4.0.3.tgz",
+      "integrity": "sha512-GTkC6YMprrJZCYU3zcqZj+jkXkrXzq3IPBcF/fIPpNEAB4hZEtXU8zp/RwKOvZl43NUmwDbyRk3+ZTbeRdEBXA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash._root": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._root/-/lodash._root-3.0.1.tgz",
+      "integrity": "sha512-O0pWuFSK6x4EXhM1dhZ8gchNtG7JMqBtrHdoUFUWXD7dJnNSUze1GuyQr5sOs0aCvgGeI3o/OJW8f4ca7FDxmQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash._stringtopath": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/lodash._stringtopath/-/lodash._stringtopath-4.8.0.tgz",
+      "integrity": "sha512-SXL66C731p0xPDC5LZg4wI5H+dJo/EO4KTqOMwLYCH3+FmmfAKJEZCm6ohGpI+T1xwsDsJCfL4OnhorllvlTPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash._basetostring": "~4.12.0"
+      }
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.uniqby": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.5.0.tgz",
+      "integrity": "sha512-IRt7cfTtHy6f1aRVA5n7kT8rgN3N1nH6MOWLcHfpWG2SH19E3JksLK38MktLxZDhlAjCP9jpIXkOnRXlu6oByQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash._baseiteratee": "~4.7.0",
+        "lodash._baseuniq": "~4.6.0"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -5053,6 +5151,23 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proper-lockfile": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-4.1.2.tgz",
+      "integrity": "sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "retry": "^0.12.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "node_modules/proper-lockfile/node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "license": "ISC"
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -5067,6 +5182,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "license": "MIT"
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -5341,6 +5462,12 @@
       "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
       "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
     },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -5367,6 +5494,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -6040,6 +6176,24 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
       "dev": true
     },
+    "node_modules/tus-js-client": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/tus-js-client/-/tus-js-client-4.3.1.tgz",
+      "integrity": "sha512-ZLeYmjrkaU1fUsKbIi8JML52uAocjEZtBx4DKjRrqzrZa0O4MYwT6db+oqePlspV+FxXJAyFBc/L5gwUi2OFsg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.1.2",
+        "combine-errors": "^3.0.3",
+        "is-stream": "^2.0.0",
+        "js-base64": "^3.7.2",
+        "lodash.throttle": "^4.1.1",
+        "proper-lockfile": "^4.1.2",
+        "url-parse": "^1.5.7"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tweetnacl": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz",
@@ -6257,6 +6411,16 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",

package.json

@@ -26,6 +26,7 @@
     "react-router-dom": "^6.22.2",
     "react-tag-input": "^6.10.3",
     "tailwind-merge": "^2.2.1",
+    "tus-js-client": "^4.3.1",
     "zod": "^3.22.4",
     "zustand": "^4.5.2"
   },

src/app/index.tsx

@@ -1,27 +1,35 @@
-import "~/app/styles/globals.css";
+import '~/app/styles/globals.css';
 import '~/shared/libs/buffer';
 
-import { useEffect } from "react";
-import { useExpand, useWebApp } from "@vkruglikov/react-telegram-web-app";
+import { useEffect } from 'react';
+import { useExpand, useWebApp } from '@vkruglikov/react-telegram-web-app';
 
-import { Providers } from "~/app/providers";
-import { AppRouter } from "~/app/router";
+import { Providers } from '~/app/providers';
+import { AppRouter } from '~/app/router';
+import { Notification } from '~/shared/ui/notification';
 
 export const App = () => {
-  const WebApp = useWebApp();
-  const [, expand] = useExpand();
+    const WebApp = useWebApp();
+    const [, expand] = useExpand();
 
-  useEffect(() => {
-    WebApp.enableClosingConfirmation();
-    expand();
+    useEffect(() => {
+        if (!WebApp) {
+            return;
+        }
 
-    WebApp.setHeaderColor("#1d1d1b");
-    WebApp.setBackgroundColor("#1d1d1b");
-  }, []);
+        WebApp.enableClosingConfirmation?.();
+        if (typeof expand === 'function') {
+            expand();
+        }
 
-  return (
-    <Providers>
-      <AppRouter />
-    </Providers>
-  );
+        WebApp.setHeaderColor?.('#1d1d1b');
+        WebApp.setBackgroundColor?.('#1d1d1b');
+    }, [WebApp, expand]);
+
+    return (
+        <Providers>
+            <AppRouter />
+            <Notification />
+        </Providers>
+    );
 };

src/app/providers/index.tsx

@@ -14,7 +14,7 @@ export const Providers = ({ children }: ProvidersProps) => {
     <WebAppProvider options={{ smoothButtonsTransition: true }}>
       <TonConnectUIProvider
         manifestUrl={
-          "https://my-public-node-1.projscale.dev/api/tonconnect-manifest.json"
+          "https://my-public-node-103.projscale.dev/api/tonconnect-manifest.json"
         }
       >
         <QueryClientProvider client={queryClient}>

src/app/router/constants/index.ts

@@ -2,4 +2,5 @@ export const Routes = {
   Root: "/uploadContent",
   ViewContent: "/viewContent",
   SentryCheck: "/sentryCheck",
+  Admin: "/admin",
 };

src/app/router/index.tsx

@@ -3,6 +3,22 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { Routes } from "~/app/router/constants";
 import { RootPage } from "~/pages/root";
 import { ViewContentPage } from "~/pages/view-content";
+import { AdminPage, AdminIndexRedirect } from "~/pages/admin";
+import {
+  AdminOverviewPage,
+  AdminStoragePage,
+  AdminUploadsPage,
+  AdminUsersPage,
+  AdminEventsPage,
+  AdminLicensesPage,
+  AdminStarsPage,
+  AdminSystemPage,
+  AdminBlockchainPage,
+  AdminNodesPage,
+  AdminStatusPage,
+  AdminNetworkPage,
+  AdminNetworkSettingsPage,
+} from "~/pages/admin/sections";
 import { ProtectedLayout } from "./protected-layout";
 
 const router = createBrowserRouter([
@@ -11,8 +27,8 @@ const router = createBrowserRouter([
     children: [
       { path: Routes.Root, element: <RootPage /> },
       { path: Routes.ViewContent, element: <ViewContentPage /> },
-      { 
-        path: Routes.SentryCheck, 
+      {
+        path: Routes.SentryCheck,
         element: (
           <div className="flex h-screen items-center justify-center">
             <button
@@ -29,6 +45,26 @@ const router = createBrowserRouter([
       },
     ],
   },
+  {
+    path: Routes.Admin,
+    element: <AdminPage />,
+    children: [
+      { index: true, element: <AdminIndexRedirect /> },
+      { path: "overview", element: <AdminOverviewPage /> },
+      { path: "storage", element: <AdminStoragePage /> },
+      { path: "uploads", element: <AdminUploadsPage /> },
+      { path: "events", element: <AdminEventsPage /> },
+      { path: "users", element: <AdminUsersPage /> },
+      { path: "licenses", element: <AdminLicensesPage /> },
+      { path: "stars", element: <AdminStarsPage /> },
+      { path: "system", element: <AdminSystemPage /> },
+      { path: "blockchain", element: <AdminBlockchainPage /> },
+      { path: "nodes", element: <AdminNodesPage /> },
+      { path: "status", element: <AdminStatusPage /> },
+      { path: "network", element: <AdminNetworkPage /> },
+      { path: "network-settings", element: <AdminNetworkSettingsPage /> },
+    ],
+  },
 ]);
 
 export const AppRouter = () => {

src/pages/admin/components/Badge.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+type BadgeTone = "neutral" | "success" | "danger" | "warn";
+
+const toneClassMap: Record<BadgeTone, string> = {
+  neutral: "bg-slate-800 text-slate-200",
+  success: "bg-emerald-900/70 text-emerald-200",
+  danger: "bg-rose-900/60 text-rose-100",
+  warn: "bg-amber-900/60 text-amber-100",
+};
+
+export const Badge = ({ children, tone = "neutral" }: { children: ReactNode; tone?: BadgeTone }) => {
+  return (
+    <span
+      className={clsx(
+        "inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide",
+        toneClassMap[tone],
+      )}
+    >
+      {children}
+    </span>
+  );
+};

src/pages/admin/components/CopyButton.tsx

@@ -0,0 +1,87 @@
+import { ReactNode, useCallback } from "react";
+import clsx from "clsx";
+
+import { useAdminContext } from "../context";
+
+type CopyButtonProps = {
+  value: string | number;
+  className?: string;
+  "aria-label"?: string;
+  successMessage?: string;
+  children?: ReactNode;
+};
+
+const copyFallback = (text: string) => {
+  if (typeof document === "undefined") {
+    throw new Error("Clipboard API недоступен");
+  }
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.style.position = "fixed";
+  textarea.style.top = "-1000px";
+  textarea.style.left = "-1000px";
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+  try {
+    document.execCommand("copy");
+  } finally {
+    document.body.removeChild(textarea);
+  }
+};
+
+export const CopyButton = ({ value, className, "aria-label": ariaLabel, successMessage, children }: CopyButtonProps) => {
+  const { pushFlash } = useAdminContext();
+
+  const handleCopy = useCallback(async () => {
+    const text = String(value ?? "");
+    if (!text) {
+      return;
+    }
+    try {
+      if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        copyFallback(text);
+      }
+      pushFlash({
+        type: "success",
+        message: successMessage ?? "Значение скопировано в буфер обмена",
+      });
+    } catch (error) {
+      pushFlash({
+        type: "error",
+        message: error instanceof Error ? `Не удалось скопировать: ${error.message}` : "Не удалось скопировать значение",
+      });
+    }
+  }, [pushFlash, successMessage, value]);
+
+  return (
+    <button
+      type="button"
+      className={clsx(
+        "inline-flex shrink-0 items-center justify-center rounded-md border border-slate-700 bg-slate-900 text-slate-300 transition hover:border-sky-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-sky-500/40",
+        children ? "h-7 px-3" : "h-7 w-7",
+        className,
+      )}
+      aria-label={ariaLabel ?? "Скопировать значение"}
+      onClick={handleCopy}
+    >
+      {children ?? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-4 w-4"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+        </svg>
+      )}
+    </button>
+  );
+};

src/pages/admin/components/InfoRow.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+import { CopyButton } from "./CopyButton";
+
+type InfoRowProps = {
+  label: string;
+  children: ReactNode;
+  copyValue?: string | number | null;
+  copyMessage?: string;
+  className?: string;
+};
+
+export const InfoRow = ({ label, children, copyValue, copyMessage, className }: InfoRowProps) => {
+  const canCopy = copyValue !== null && copyValue !== undefined && `${copyValue}`.length > 0;
+
+  return (
+    <div
+      className={clsx(
+        "flex flex-col gap-1 overflow-hidden rounded-lg border border-slate-800 bg-slate-950/60 p-3",
+        className,
+      )}
+    >
+      <span className="text-xs uppercase tracking-wide text-slate-500">{label}</span>
+      <div className="flex items-start gap-2 text-sm text-slate-100">
+        <div className="min-w-0 break-words text-left">{children}</div>
+        {canCopy ? (
+          <CopyButton
+            value={copyValue as string | number}
+            aria-label={`Скопировать значение «${label}»`}
+            successMessage={copyMessage}
+            className="mt-0.5"
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+};

src/pages/admin/components/PaginationControls.tsx

@@ -0,0 +1,49 @@
+type PaginationControlsProps = {
+  total: number;
+  limit: number;
+  page: number;
+  onPageChange: (next: number) => void;
+};
+
+const numberFormatter = new Intl.NumberFormat("ru-RU");
+
+export const PaginationControls = ({ total, limit, page, onPageChange }: PaginationControlsProps) => {
+  const safeLimit = Math.max(limit, 1);
+  const totalPages = Math.max(1, Math.ceil(Math.max(total, 0) / safeLimit));
+  const clampedPage = Math.min(Math.max(page, 0), totalPages - 1);
+  const startIndex = total === 0 ? 0 : clampedPage * safeLimit + 1;
+  const endIndex = total === 0 ? 0 : Math.min(total, (clampedPage + 1) * safeLimit);
+  const canGoPrev = clampedPage > 0;
+  const canGoNext = clampedPage + 1 < totalPages;
+
+  return (
+    <div className="flex flex-col gap-2 rounded-xl bg-slate-950/40 px-3 py-2 ring-1 ring-slate-800 sm:flex-row sm:items-center sm:justify-between">
+      <div className="text-xs text-slate-400">
+        {total === 0
+          ? "Нет записей"
+          : `Показаны ${numberFormatter.format(startIndex)}–${numberFormatter.format(endIndex)} из ${numberFormatter.format(total)}`}
+      </div>
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          className="rounded-lg bg-slate-900/60 px-3 py-1 text-xs font-semibold text-slate-300 ring-1 ring-slate-700 transition hover:bg-slate-800 disabled:bg-slate-900/30 disabled:text-slate-600 disabled:ring-slate-800"
+          onClick={() => onPageChange(Math.max(clampedPage - 1, 0))}
+          disabled={!canGoPrev}
+        >
+          Назад
+        </button>
+        <span className="text-xs text-slate-300">
+          Стр. {numberFormatter.format(clampedPage + 1)} из {numberFormatter.format(totalPages)}
+        </span>
+        <button
+          type="button"
+          className="rounded-lg bg-slate-900/60 px-3 py-1 text-xs font-semibold text-slate-300 ring-1 ring-slate-700 transition hover:bg-slate-800 disabled:bg-slate-900/30 disabled:text-slate-600 disabled:ring-slate-800"
+          onClick={() => onPageChange(Math.min(clampedPage + 1, totalPages - 1))}
+          disabled={!canGoNext}
+        >
+          Вперёд
+        </button>
+      </div>
+    </div>
+  );
+};

src/pages/admin/components/Section.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import clsx from "clsx";
+
+type SectionProps = {
+  id?: string;
+  title: string;
+  description?: string;
+  actions?: ReactNode;
+  children: ReactNode;
+  className?: string;
+};
+
+export const Section = ({ id, title, description, actions, children, className }: SectionProps) => {
+  return (
+    <section
+      id={id}
+      className={clsx(
+        "relative w-full overflow-hidden rounded-2xl bg-slate-900/60 p-6 shadow-inner shadow-black/40 ring-1 ring-slate-800",
+        className,
+      )}
+    >
+      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="min-w-0">
+          <h2 className="text-2xl font-semibold text-slate-100">{title}</h2>
+          {description ? <p className="mt-1 max-w-3xl break-words text-sm text-slate-400">{description}</p> : null}
+        </div>
+        {actions ? <div className="flex h-full shrink-0 flex-wrap items-center gap-3">{actions}</div> : null}
+      </div>
+      <div className="space-y-6 text-sm text-slate-200">{children}</div>
+    </section>
+  );
+};

src/pages/admin/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./Section";
+export * from "./Badge";
+export * from "./PaginationControls";
+export * from "./InfoRow";
+export * from "./CopyButton";

src/pages/admin/config.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+
+export type AdminSectionId =
+  | "overview"
+  | "storage"
+  | "uploads"
+  | "events"
+  | "users"
+  | "licenses"
+  | "stars"
+  | "system"
+  | "blockchain"
+  | "nodes"
+  | "status"
+  | "network"
+  | "network-settings";
+
+export type AdminSection = {
+  id: AdminSectionId;
+  label: string;
+  description: string;
+  path: string;
+  icon?: ReactNode;
+};
+
+export const ADMIN_SECTIONS: AdminSection[] = [
+  { id: "overview", label: "Обзор", description: "Краткий срез состояния узла, окружения и служб", path: "overview" },
+  { id: "storage", label: "Хранилище", description: "Загруженность диска и директории контента", path: "storage" },
+  { id: "uploads", label: "Загрузки", description: "Отслеживание статуса загрузок и деривативов", path: "uploads" },
+  { id: "events", label: "События", description: "Журнал действий ноды и сети", path: "events" },
+  { id: "users", label: "Пользователи", description: "Мониторинг пользователей, кошельков и активности", path: "users" },
+  { id: "licenses", label: "Лицензии", description: "Статус лицензий и фильтрация по типам", path: "licenses" },
+  { id: "stars", label: "Платежи Stars", description: "Управление счетами и анализ платежей", path: "stars" },
+  { id: "system", label: "Система", description: "Настройки окружения и состояние сервисов", path: "system" },
+  { id: "blockchain", label: "Блокчейн", description: "История задач и метрики блокчейн-интеграции", path: "blockchain" },
+  { id: "nodes", label: "Ноды", description: "Роли, версии и последнее появление узлов", path: "nodes" },
+  { id: "status", label: "Статус & лимиты", description: "IPFS, очереди и лимиты синхронизации", path: "status" },
+  { id: "network", label: "Состояние сети", description: "Мониторинг децентрализованного слоя и репликаций", path: "network" },
+  { id: "network-settings", label: "Сеть → Настройки", description: "Интервалы heartbeat/gossip и бэк-офф", path: "network-settings" },
+];
+
+export const DEFAULT_ADMIN_SECTION = ADMIN_SECTIONS[0];

src/pages/admin/context.tsx

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+
+import type { AdminContextValue } from "./types";
+
+export const AdminContext = createContext<AdminContextValue | undefined>(undefined);
+
+export const useAdminContext = () => {
+  const ctx = useContext(AdminContext);
+  if (!ctx) {
+    throw new Error("useAdminContext must be used within <AdminContext.Provider>");
+  }
+  return ctx;
+};

src/pages/admin/index.tsx

@@ -0,0 +1,356 @@
+import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+import { NavLink, Navigate, Outlet, useLocation } from "react-router-dom";
+import clsx from "clsx";
+import { useQueryClient } from "react-query";
+
+import { Routes } from "~/app/router/constants";
+import {
+  useAdminLogin,
+  useAdminLogout,
+  useAdminOverview,
+} from "~/shared/services/admin";
+import { clearAdminAuth, getAdminAuthSnapshot } from "~/shared/libs/admin-auth";
+import { isUnauthorizedError } from "~/shared/services/admin";
+import { ADMIN_SECTIONS, DEFAULT_ADMIN_SECTION, type AdminSection } from "./config";
+import { AdminContext } from "./context";
+import type { AuthState, FlashMessage } from "./types";
+
+const initialAuthState: AuthState = getAdminAuthSnapshot().token ? "checking" : "unauthorized";
+
+const resolveErrorMessage = (error: unknown) => {
+  if (error && typeof error === "object" && "message" in error && typeof (error as any).message === "string") {
+    return (error as any).message as string;
+  }
+  return "Неизвестная ошибка";
+};
+
+const AdminFlash = ({ flash, onClose }: { flash: FlashMessage | null; onClose: () => void }) => {
+  if (!flash) {
+    return null;
+  }
+  const tone =
+    flash.type === "success"
+      ? "border-emerald-500/60 bg-emerald-500/15 text-emerald-50"
+      : flash.type === "error"
+      ? "border-rose-500/60 bg-rose-500/15 text-rose-50"
+      : "border-sky-500/60 bg-sky-500/15 text-sky-50";
+  return (
+    <div className="pointer-events-none fixed inset-x-4 top-4 z-50 flex justify-center sm:inset-x-auto sm:left-auto sm:right-6">
+      <div
+        className={clsx(
+          "pointer-events-auto flex w-full max-w-md items-start gap-4 rounded-2xl border px-5 py-4 text-sm shadow-2xl shadow-black/40 backdrop-blur-md",
+          tone,
+        )}
+      >
+        <span className="flex-1 break-words">{flash.message}</span>
+        <button
+          type="button"
+          className="text-xs font-semibold uppercase tracking-wide text-slate-200 transition hover:text-white"
+          onClick={onClose}
+        >
+          Закрыть
+        </button>
+      </div>
+    </div>
+  );
+};
+
+const AdminLoginForm = ({
+  token,
+  onTokenChange,
+  onSubmit,
+  isSubmitting,
+}: {
+  token: string;
+  onTokenChange: (value: string) => void;
+  onSubmit: () => void;
+  isSubmitting: boolean;
+}) => {
+  return (
+    <div className="mx-auto max-w-xl rounded-2xl border border-slate-800 bg-slate-900/60 p-8 shadow-xl shadow-black/50">
+      <h1 className="text-3xl font-semibold text-slate-100">Админ-панель узла</h1>
+      <p className="mt-2 text-sm text-slate-400">
+        Введите секретный токен ADMIN_API_TOKEN, чтобы получить доступ к мониторингу и управлению.
+      </p>
+      <form
+        className="mt-6 space-y-4"
+        onSubmit={(event) => {
+          event.preventDefault();
+          onSubmit();
+        }}
+      >
+        <label className="block text-sm font-medium text-slate-200">
+          Админ-токен
+          <input
+            type="password"
+            className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-base text-slate-100 shadow-inner focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500/40"
+            value={token}
+            onChange={(event) => onTokenChange(event.target.value)}
+            placeholder="••••••"
+            autoComplete="off"
+          />
+        </label>
+        <div className="flex items-center justify-between">
+          <button
+            type="submit"
+            className="inline-flex items-center justify-center rounded-lg bg-sky-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500/60 disabled:cursor-not-allowed disabled:bg-slate-700"
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? "Проверяем…" : "Войти"}
+          </button>
+          <span className="text-xs text-slate-500">
+            Cookie max-age {Math.round(172800 / 3600)} ч
+          </span>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+const MobileNav = ({ sections, currentPath }: { sections: AdminSection[]; currentPath: string }) => (
+  <select
+    className="w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-200 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 md:hidden"
+    value={currentPath}
+    onChange={(event) => {
+      const next = event.target.value;
+      if (next !== currentPath) {
+        window.location.assign(next);
+      }
+    }}
+  >
+    {sections.map((section) => {
+      const to = `${Routes.Admin}/${section.path}`;
+      return (
+        <option key={section.id} value={to}>
+          {section.label}
+        </option>
+      );
+    })}
+  </select>
+);
+
+const DesktopNav = ({
+  sections,
+  currentPath,
+}: {
+  sections: AdminSection[];
+  currentPath: string;
+}) => {
+  return (
+    <nav className="hidden w-60 shrink-0 flex-col gap-1 md:flex">
+      {sections.map((section) => {
+        const to = `${Routes.Admin}/${section.path}`;
+        const isActive = currentPath.startsWith(to);
+        return (
+          <NavLink
+            key={section.id}
+            to={to}
+            className={clsx(
+              "rounded-xl px-4 py-3 text-sm font-medium transition",
+              isActive
+                ? "bg-sky-500/10 text-sky-200 ring-1 ring-sky-500/40"
+                : "text-slate-300 hover:bg-slate-900/60 hover:text-white",
+            )}
+            end
+          >
+            <div className="flex flex-col">
+              <span>{section.label}</span>
+              <span className="mt-1 text-xs text-slate-500">{section.description}</span>
+            </div>
+          </NavLink>
+        );
+      })}
+    </nav>
+  );
+};
+
+const AdminLayoutFrame = ({ children }: { children: ReactNode }) => {
+  const location = useLocation();
+  const currentPath = location.pathname;
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100">
+      <header className="border-b border-slate-800 bg-slate-950/70 backdrop-blur">
+        <div className="flex w-full items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8">
+          <div>
+            <h1 className="text-xl font-semibold text-white">MY Admin</h1>
+            <p className="text-xs text-slate-500">Мониторинг и управление узлом</p>
+          </div>
+          <div className="flex items-center gap-3 md:hidden">
+            <MobileNav sections={ADMIN_SECTIONS} currentPath={currentPath} />
+          </div>
+        </div>
+      </header>
+      <main className="flex w-full flex-1 flex-col gap-6 px-4 py-6 sm:px-6 lg:px-8 md:flex-row">
+        <DesktopNav sections={ADMIN_SECTIONS} currentPath={currentPath} />
+        <div className="w-full max-w-full md:flex-1">
+          <MobileNav sections={ADMIN_SECTIONS} currentPath={currentPath} />
+          <div className="mt-4 space-y-6 md:mt-0">
+            {children}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export const AdminShell = () => {
+  const queryClient = useQueryClient();
+  const [authState, setAuthState] = useState<AuthState>(initialAuthState);
+  const [token, setToken] = useState("");
+  const [flash, setFlash] = useState<FlashMessage | null>(null);
+
+  useEffect(() => {
+    if (!flash) {
+      return;
+    }
+    const timeout = setTimeout(() => setFlash(null), 6000);
+    return () => clearTimeout(timeout);
+  }, [flash]);
+
+  useEffect(() => {
+    if (authState === "unauthorized") {
+      queryClient.removeQueries({
+        predicate: (query) => Array.isArray(query.queryKey) && query.queryKey[0] === "admin",
+      });
+    }
+  }, [authState, queryClient]);
+
+  const pushFlash = useCallback((message: FlashMessage) => {
+    setFlash(message);
+  }, []);
+
+  const clearFlash = useCallback(() => {
+    setFlash(null);
+  }, []);
+
+  const handleRequestError = useCallback(
+    (error: unknown, fallbackMessage: string) => {
+      if (isUnauthorizedError(error)) {
+        clearAdminAuth();
+        setAuthState("unauthorized");
+        pushFlash({ type: "info", message: "Сессия истекла. Введите админ-токен заново." });
+        return;
+      }
+      const tail = resolveErrorMessage(error);
+      pushFlash({
+        type: "error",
+        message: `${fallbackMessage}: ${tail}`,
+      });
+    },
+    [pushFlash],
+  );
+
+  const invalidateAll = useCallback(async () => {
+    await queryClient.invalidateQueries({
+      predicate: (query) => Array.isArray(query.queryKey) && query.queryKey[0] === "admin",
+    });
+  }, [queryClient]);
+
+  useAdminOverview({
+    enabled: authState === "checking",
+    retry: false,
+    onSuccess: () => {
+      setAuthState("authorized");
+    },
+    onError: (error) => {
+      handleRequestError(error, "Не удалось проверить админ-сессию");
+    },
+  });
+
+  const loginMutation = useAdminLogin({
+    onSuccess: async () => {
+      setAuthState("authorized");
+      setToken("");
+      pushFlash({ type: "success", message: "Админ-сессия активирована" });
+      await invalidateAll();
+    },
+    onError: (error) => {
+      if (isUnauthorizedError(error)) {
+        clearAdminAuth();
+        pushFlash({ type: "error", message: "Неверный токен" });
+        return;
+      }
+      handleRequestError(error, "Ошибка входа");
+    },
+  });
+
+  const logoutMutation = useAdminLogout({
+    onSuccess: async () => {
+      setAuthState("unauthorized");
+      pushFlash({ type: "info", message: "Сессия завершена" });
+      await invalidateAll();
+    },
+    onError: (error) => {
+      handleRequestError(error, "Ошибка выхода");
+    },
+  });
+
+  const contextValue = useMemo(
+    () => ({
+      authState,
+      isAuthorized: authState === "authorized",
+      pushFlash,
+      clearFlash,
+      handleRequestError,
+      invalidateAll,
+    }),
+    [authState, pushFlash, clearFlash, handleRequestError, invalidateAll],
+  );
+
+  return (
+    <AdminContext.Provider value={contextValue}>
+      {authState !== "authorized" ? (
+        <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 px-6 py-10">
+          <div className="w-full max-w-xl space-y-6">
+            <AdminLoginForm
+              token={token}
+              onTokenChange={setToken}
+              onSubmit={() => {
+                if (!token) {
+                  pushFlash({ type: "info", message: "Введите токен" });
+                  return;
+                }
+                loginMutation.mutate({ secret: token });
+              }}
+              isSubmitting={loginMutation.isLoading}
+            />
+          </div>
+        </div>
+      ) : (
+        <AdminLayoutFrame>
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex items-center gap-3">
+              <span className="rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-200 ring-1 ring-emerald-500/40">
+                Авторизован
+              </span>
+              <button
+                type="button"
+                className="rounded-lg border border-slate-700 px-3 py-1 text-xs font-semibold text-slate-300 transition hover:border-sky-500 hover:text-white"
+                onClick={() => invalidateAll()}
+              >
+                Обновить все данные
+              </button>
+            </div>
+            <button
+              type="button"
+              className="rounded-lg bg-rose-600 px-3 py-1 text-xs font-semibold text-white transition hover:bg-rose-500 disabled:cursor-not-allowed disabled:bg-rose-900/50"
+              onClick={() => logoutMutation.mutate()}
+              disabled={logoutMutation.isLoading}
+            >
+              Выйти
+            </button>
+          </div>
+          <Outlet />
+        </AdminLayoutFrame>
+      )}
+      <AdminFlash flash={flash} onClose={clearFlash} />
+    </AdminContext.Provider>
+  );
+};
+
+export const AdminPage = AdminShell;
+
+export const AdminIndexRedirect = () => {
+  return <Navigate to={`${Routes.Admin}/${DEFAULT_ADMIN_SECTION.path}`} replace />;
+};

src/pages/admin/sections/Blockchain.tsx

@@ -0,0 +1,171 @@
+import { useAdminBlockchain } from "~/shared/services/admin";
+import { Section, Badge, CopyButton } from "../components";
+import { useAdminContext } from "../context";
+import { formatDate, formatUnknown, numberFormatter } from "../utils/format";
+
+const MetricCard = ({ label, value }: { label: string; value: string }) => {
+  return (
+    <div className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
+      <p className="text-xs uppercase tracking-wide text-slate-500">{label}</p>
+      <p className="mt-2 text-lg font-semibold text-slate-100">{value}</p>
+    </div>
+  );
+};
+
+export const AdminBlockchainPage = () => {
+  const { isAuthorized, handleRequestError } = useAdminContext();
+
+  const blockchainQuery = useAdminBlockchain({
+    enabled: isAuthorized,
+    refetchInterval: 30_000,
+    onError: (error) => handleRequestError(error, "Не удалось загрузить данные блокчейна"),
+  });
+
+  if (!blockchainQuery.data) {
+    return blockchainQuery.isLoading ? (
+      <Section id="blockchain" title="Блокчейн" description="Очередь задач и последние транзакции">
+        Загрузка…
+      </Section>
+    ) : null;
+  }
+
+  const { counts, recent } = blockchainQuery.data;
+
+  return (
+    <Section
+      id="blockchain"
+      title="Блокчейн"
+      description="Очередь задач и последние транзакции"
+      actions={
+        <button
+          type="button"
+          className="rounded-lg bg-slate-800 px-3 py-2 text-xs font-semibold text-slate-200 ring-1 ring-slate-700 transition hover:bg-slate-700"
+          onClick={() => blockchainQuery.refetch()}
+          disabled={blockchainQuery.isFetching}
+        >
+          {blockchainQuery.isFetching ? "Обновляем…" : "Обновить"}
+        </button>
+      }
+    >
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {Object.entries(counts).map(([key, value]) => (
+          <MetricCard key={key} label={key} value={numberFormatter.format(value)} />
+        ))}
+      </div>
+      <div className="hidden overflow-x-auto rounded-2xl border border-slate-800 md:block">
+        <table className="min-w-full divide-y divide-slate-800 text-left text-sm">
+          <thead className="bg-slate-950/70 text-xs uppercase tracking-wide text-slate-400">
+            <tr>
+              <th className="px-3 py-3">ID</th>
+              <th className="px-3 py-3">Назначение</th>
+              <th className="px-3 py-3">Сумма</th>
+              <th className="px-3 py-3">Статус</th>
+              <th className="px-3 py-3">Epoch · Seqno</th>
+              <th className="px-3 py-3">Hash</th>
+              <th className="px-3 py-3">Обновлено</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-900/60">
+            {recent.map((task) => (
+              <tr key={task.id} className="hover:bg-slate-900/50">
+                <td className="px-3 py-2">
+                  <div className="flex items-center gap-2">
+                    <span className="font-mono text-xs text-slate-300">{task.id}</span>
+                    <CopyButton
+                      value={task.id}
+                      aria-label="Скопировать ID задачи"
+                      successMessage="ID задачи скопирован"
+                      className="h-6 w-6"
+                    />
+                  </div>
+                </td>
+                <td className="px-3 py-2 break-words">{task.destination || "—"}</td>
+                <td className="px-3 py-2">{formatUnknown(task.amount)}</td>
+                <td className="px-3 py-2">
+                  <Badge tone={task.status === "done" ? "success" : task.status === "failed" ? "danger" : "neutral"}>
+                    {task.status}
+                  </Badge>
+                </td>
+                <td className="px-3 py-2">
+                  {task.epoch ?? "—"} · {task.seqno ?? "—"}
+                </td>
+                <td className="px-3 py-2">
+                  {task.transaction_hash ? (
+                    <div className="flex items-center gap-2">
+                      <span className="break-all font-mono text-xs text-slate-500">{task.transaction_hash}</span>
+                      <CopyButton
+                        value={task.transaction_hash}
+                        aria-label="Скопировать хеш транзакции"
+                        successMessage="Хеш транзакции скопирован"
+                        className="h-6 w-6"
+                      />
+                    </div>
+                  ) : (
+                    <span className="text-xs text-slate-500">—</span>
+                  )}
+                </td>
+                <td className="px-3 py-2">{formatDate(task.updated)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className="grid gap-3 md:hidden">
+        {recent.map((task) => (
+          <div key={`task-card-${task.id}`} className="rounded-2xl border border-slate-800 bg-slate-950/40 p-4 shadow-inner shadow-black/30">
+            <div className="flex items-center justify-between gap-2">
+              <div className="flex items-center gap-2">
+                <span className="font-mono text-xs text-slate-300">{task.id}</span>
+                <CopyButton
+                  value={task.id}
+                  aria-label="Скопировать ID задачи"
+                  successMessage="ID задачи скопирован"
+                  className="h-6 w-6"
+                />
+              </div>
+              <Badge tone={task.status === "done" ? "success" : task.status === "failed" ? "danger" : "neutral"}>
+                {task.status}
+              </Badge>
+            </div>
+            <div className="mt-3 grid gap-2 text-xs text-slate-300">
+              <div className="flex flex-col gap-1">
+                <span className="text-slate-500">Назначение</span>
+                <span className="break-words">{task.destination || "—"}</span>
+              </div>
+              <div className="flex flex-col gap-1">
+                <span className="text-slate-500">Сумма</span>
+                <span>{formatUnknown(task.amount)}</span>
+              </div>
+              <div className="flex flex-col gap-1">
+                <span className="text-slate-500">Epoch · Seqno</span>
+                <span>
+                  {task.epoch ?? "—"} · {task.seqno ?? "—"}
+                </span>
+              </div>
+              <div className="flex flex-col gap-1">
+                <span className="text-slate-500">Hash</span>
+                {task.transaction_hash ? (
+                  <div className="flex items-center gap-2">
+                    <span className="break-all font-mono text-[11px] text-slate-500">{task.transaction_hash}</span>
+                    <CopyButton
+                      value={task.transaction_hash}
+                      aria-label="Скопировать хеш транзакции"
+                      successMessage="Хеш транзакции скопирован"
+                      className="h-6 w-6"
+                    />
+                  </div>
+                ) : (
+                  <span className="text-slate-500">—</span>
+                )}
+              </div>
+              <div className="flex flex-col gap-1">
+                <span className="text-slate-500">Обновлено</span>
+                <span>{formatDate(task.updated)}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+};

src/pages/admin/sections/Events.tsx

@@ -0,0 +1,307 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { Routes } from "~/app/router/constants";
+import { useAdminEvents } from "~/shared/services/admin";
+import { Section, PaginationControls, CopyButton, Badge } from "../components";
+import { useAdminContext } from "../context";
+import { formatDate, numberFormatter } from "../utils/format";
+
+const EVENT_TYPE_LABELS: Record<string, string> = {
+  content_uploaded: "Загрузка контента",
+  content_indexed: "Индексация контента",
+  stars_payment: "Платёж Stars",
+  node_registered: "Регистрация ноды",
+  user_role_changed: "Изменение ролей",
+};
+
+const EVENT_STATUS_TONES: Record<string, "success" | "warn" | "danger" | "neutral"> = {
+  local: "neutral",
+  recorded: "neutral",
+  processing: "warn",
+  applied: "success",
+  failed: "danger",
+};
+
+const linkLabels: Record<string, string> = {
+  admin_uploads: "К загрузкам",
+  content_view: "Просмотр контента",
+  admin_stars: "К платежам",
+  admin_user: "К пользователю",
+};
+
+export const AdminEventsPage = () => {
+  const { isAuthorized, handleRequestError } = useAdminContext();
+  const [search, setSearch] = useState("");
+  const [typeFilter, setTypeFilter] = useState<string | null>(null);
+  const [statusFilter, setStatusFilter] = useState<string | null>(null);
+  const [originFilter, setOriginFilter] = useState<string | null>(null);
+  const [page, setPage] = useState(0);
+  const limit = 50;
+  const navigate = useNavigate();
+
+  const normalizedSearch = search.trim() || null;
+
+  useEffect(() => {
+    setPage(0);
+  }, [normalizedSearch, typeFilter, statusFilter, originFilter]);
+
+  const eventsQuery = useAdminEvents(
+    {
+      limit,
+      offset: page * limit,
+      search: normalizedSearch || undefined,
+      type: typeFilter || undefined,
+      status: statusFilter || undefined,
+      origin: originFilter || undefined,
+    },
+    {
+      enabled: isAuthorized,
+      keepPreviousData: true,
+      refetchInterval: 60_000,
+      onError: (error) => handleRequestError(error, "Не удалось загрузить события"),
+    },
+  );
+
+  const availableFilters = eventsQuery.data?.available_filters ?? {
+    types: {},
+    statuses: {},
+    origins: {},
+  };
+
+  const renderLink = (key: string, url: string | null) => {
+    if (!url) {
+      return null;
+    }
+    const label = linkLabels[key] ?? key;
+    if (url.startsWith("http")) {
+      return (
+        <a
+          key={`${key}-${url}`}
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="rounded-lg border border-sky-500/40 px-3 py-1 text-[11px] font-semibold text-sky-100 transition hover:border-sky-400 hover:text-white"
+        >
+          {label}
+        </a>
+      );
+    }
+    const normalized = url.startsWith("/") ? url.slice(1) : url;
+    return (
+      <button
+        key={`${key}-${url}`}
+        type="button"
+        onClick={() => navigate(`${Routes.Admin}/${normalized}`)}
+        className="rounded-lg border border-slate-700 px-3 py-1 text-[11px] font-semibold text-slate-200 transition hover:border-slate-500 hover:text-white"
+      >
+        {label}
+      </button>
+    );
+  };
+
+  const events = eventsQuery.data?.items ?? [];
+  const total = eventsQuery.data?.total ?? 0;
+
+  return (
+    <Section
+      id="events"
+      title="События"
+      description="Журнал контента, платежей и сетевых операций"
+      actions={
+        <button
+          type="button"
+          className="rounded-lg bg-slate-800 px-3 py-2 text-xs font-semibold text-slate-200 ring-1 ring-slate-700 transition hover:bg-slate-700"
+          onClick={() => eventsQuery.refetch()}
+          disabled={eventsQuery.isFetching}
+        >
+          {eventsQuery.isFetching ? "Обновляем…" : "Обновить"}
+        </button>
+      }
+    >
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        <div className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800 shadow-inner shadow-black/40">
+          <p className="text-xs uppercase tracking-wide text-slate-500">Всего событий</p>
+          <p className="mt-2 text-lg font-semibold text-slate-100">{numberFormatter.format(total)}</p>
+          <p className="mt-1 text-xs text-slate-500">На странице {numberFormatter.format(events.length)}</p>
+        </div>
+        <div className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800 shadow-inner shadow-black/40">
+          <p className="text-xs uppercase tracking-wide text-slate-500">Типы</p>
+          <p className="mt-2 text-lg font-semibold text-slate-100">{Object.keys(availableFilters.types).length}</p>
+          <p className="mt-1 text-xs text-slate-500">Фильтр по типу помогает сузить список</p>
+        </div>
+        <div className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800 shadow-inner shadow-black/40">
+          <p className="text-xs uppercase tracking-wide text-slate-500">Статусы</p>
+          <p className="mt-2 text-lg font-semibold text-slate-100">{Object.keys(availableFilters.statuses).length}</p>
+          <p className="mt-1 text-xs text-slate-500">Например, только требующие действий</p>
+        </div>
+        <div className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800 shadow-inner shadow-black/40">
+          <p className="text-xs uppercase tracking-wide text-slate-500">Источники</p>
+          <p className="mt-2 text-lg font-semibold text-slate-100">{Object.keys(availableFilters.origins).length}</p>
+          <p className="mt-1 text-xs text-slate-500">Отслеживайте trusted-нод</p>
+        </div>
+      </div>
+
+      <div className="mt-6 grid gap-3 md:grid-cols-4">
+        <div className="flex flex-col gap-1">
+          <label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Поиск</label>
+          <input
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder="UID, CID, invoice, json"
+            className="w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-500 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Тип</label>
+          <select
+            value={typeFilter ?? ""}
+            onChange={(event) => setTypeFilter(event.target.value || null)}
+            className="w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
+          >
+            <option value="">Все типы</option>
+            {Object.entries(availableFilters.types).map(([type, count]) => (
+              <option key={`event-type-${type}`} value={type}>
+                {EVENT_TYPE_LABELS[type] ?? type} — {numberFormatter.format(count)}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="flex flex-col gap-1">
+          <label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Статус</label>
+          <select
+            value={statusFilter ?? ""}
+            onChange={(event) => setStatusFilter(event.target.value || null)}
+            className="w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
+          >
+            <option value="">Все статусы</option>
+            {Object.entries(availableFilters.statuses).map(([status, count]) => (
+              <option key={`event-status-${status}`} value={status}>
+                {status} — {numberFormatter.format(count)}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="flex flex-col gap-1">
+          <label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Источник</label>
+          <select
+            value={originFilter ?? ""}
+            onChange={(event) => setOriginFilter(event.target.value || null)}
+            className="w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
+          >
+            <option value="">Все источники</option>
+            {Object.entries(availableFilters.origins).map(([origin, count]) => (
+              <option key={`event-origin-${origin}`} value={origin}>
+                {origin} — {numberFormatter.format(count)}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <div className="mt-3 flex flex-wrap items-center gap-2">
+        <button
+          type="button"
+          className="rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-slate-300 ring-1 ring-slate-700 transition hover:bg-slate-800"
+          onClick={() => {
+            setSearch("");
+            setTypeFilter(null);
+            setStatusFilter(null);
+            setOriginFilter(null);
+          }}
+        >
+          Сбросить фильтры
+        </button>
+      </div>
+
+      {eventsQuery.isLoading && !eventsQuery.data ? (
+        <div className="mt-6 rounded-2xl border border-slate-800 bg-slate-950/40 px-4 py-6 text-center text-sm text-slate-400">
+          Загружаем события…
+        </div>
+      ) : null}
+
+      <div className="mt-6 grid gap-4">
+        {events.length === 0 ? (
+          <div className="rounded-2xl border border-slate-800 bg-slate-950/40 px-4 py-6 text-center text-sm text-slate-400">
+            События не найдены.
+          </div>
+        ) : (
+          events.map((event) => {
+            const typeLabel = EVENT_TYPE_LABELS[event.event_type] ?? event.event_type;
+            const statusTone = EVENT_STATUS_TONES[event.status] ?? 'neutral';
+            const statusBadgeTone: "success" | "warn" | "danger" | "neutral" = statusTone;
+            const linkEntries = Object.entries(event.links ?? {});
+            return (
+              <div key={`event-${event.id}`} className="rounded-2xl border border-slate-800 bg-slate-950/50 p-5 shadow-inner shadow-black/40">
+                <div className="flex flex-wrap items-start justify-between gap-3">
+                  <div className="flex flex-col gap-2">
+                    <div className="flex flex-wrap items-center gap-2 text-sm text-slate-200">
+                      <span className="font-semibold">#{numberFormatter.format(event.seq)}</span>
+                      <Badge tone="neutral">{typeLabel}</Badge>
+                      <Badge tone={statusBadgeTone}>{event.status}</Badge>
+                    </div>
+                    <div className="flex flex-wrap items-center gap-2 text-xs text-slate-400">
+                      <span>UID: {event.uid}</span>
+                      <CopyButton
+                        value={event.uid}
+                        aria-label="Скопировать UID"
+                        successMessage="UID скопирован"
+                        className="h-6 w-6"
+                      />
+                    </div>
+                  </div>
+                  <div className="text-xs text-slate-400 text-right">
+                    <div>Создано: {formatDate(event.created_at)}</div>
+                    <div>Получено: {formatDate(event.received_at)}</div>
+                    <div>Применено: {formatDate(event.applied_at)}</div>
+                  </div>
+                </div>
+                <div className="mt-3 grid gap-2 text-xs text-slate-300 md:grid-cols-2">
+                  <div>
+                    <span className="text-slate-500">Источник</span>
+                    <div className="mt-1 flex flex-wrap items-center gap-2 break-all text-[11px] text-slate-300">
+                      <span>{event.origin_public_key ?? "—"}</span>
+                      {event.origin_public_key ? (
+                        <CopyButton
+                          value={event.origin_public_key}
+                          aria-label="Скопировать ключ"
+                          successMessage="Публичный ключ скопирован"
+                          className="h-6 w-6"
+                        />
+                      ) : null}
+                    </div>
+                    <div className="text-[11px] text-slate-500">{event.origin_host ?? "—"}</div>
+                  </div>
+                  <div>
+                    <span className="text-slate-500">Ссылки</span>
+                    {linkEntries.length === 0 ? (
+                      <div className="mt-1 text-[11px] text-slate-500">Нет прямых ссылок</div>
+                    ) : (
+                      <div className="mt-1 flex flex-wrap items-center gap-2 text-xs">
+                        {linkEntries.map(([key, url]) => renderLink(key, url))}
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <details className="mt-4 rounded-xl border border-slate-800 bg-slate-950/40">
+                  <summary className="cursor-pointer px-4 py-2 text-xs font-semibold text-slate-200">Показать payload</summary>
+                  <pre className="max-h-60 overflow-auto px-4 py-3 text-[11px] leading-relaxed text-slate-200">
+                    {JSON.stringify(event.payload ?? {}, null, 2)}
+                  </pre>
+                </details>
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      <div className="mt-6">
+        <PaginationControls
+          total={total}
+          limit={limit}
+          page={page}
+          onPageChange={(next) => setPage(next)}
+        />
+      </div>
+    </Section>
+  );
+};

src/pages/admin/sections/Licenses.tsx

@@ -0,0 +1,385 @@
+import { useEffect, useState } from "react";
+
+import { useAdminLicenses } from "~/shared/services/admin";
+import { Section, PaginationControls, CopyButton, Badge } from "../components";
+import { useAdminContext } from "../context";
+import { formatDate, numberFormatter } from "../utils/format";
+
+export const AdminLicensesPage = () => {
+  const { isAuthorized, handleRequestError } = useAdminContext();
+  const [search, setSearch] = useState("");
+  const [statusFilter, setStatusFilter] = useState("all");
+  const [typeFilter, setTypeFilter] = useState("all");
+  const [licenseTypeFilter, setLicenseTypeFilter] = useState("all");
+  const [page, setPage] = useState(0);
+
+  const limit = 50;
+  const normalizedSearch = search.trim();
+
+  const licensesQuery = useAdminLicenses(
+    {
+      limit,
+      offset: page * limit,
+      search: normalizedSearch || undefined,
+      status: statusFilter !== "all" ? statusFilter : undefined,
+      type: typeFilter !== "all" ? typeFilter : undefined,
+      license_type: licenseTypeFilter !== "all" ? licenseTypeFilter : undefined,
+    },
+    {
+      enabled: isAuthorized,
+      keepPreviousData: true,
+      refetchInterval: 60_000,
+      onError: (error) => handleRequestError(error, "Не удалось загрузить лицензии"),
+    },
+  );
+
+  useEffect(() => {
+    setPage(0);
+  }, [normalizedSearch, statusFilter, typeFilter, licenseTypeFilter]);
+
+  if (licensesQuery.isLoading && !licensesQuery.data) {
+    return (
+      <Section id="licenses" title="Лицензии" description="On-chain лицензии и связанные активы">
+        Загрузка…
+      </Section>
+    );
+  }
+
+  if (!licensesQuery.data) {
+    return (
+      <Section id="licenses" title="Лицензии" description="On-chain лицензии и связанные активы">
+        <p className="text-sm text-slate-400">Выберите вкладку «Лицензии», чтобы загрузить данные.</p>
+      </Section>
+    );
+  }
+
+  const { items, counts, total } = licensesQuery.data;
+  const statusOptions = Object.keys(counts.status || {});
+  const typeOptions = Object.keys(counts.type || {});
+  const kindOptions = Object.keys(counts.license_type || {});
+
+  return (
+    <Section
+      id="licenses"
+      title="Лицензии"
+      description="Привязанные лицензии со сведениями о владельцах и контенте"
+      actions={
+        <button
+          type="button"
+          className="rounded-lg bg-slate-800 px-3 py-2 text-xs font-semibold text-slate-200 ring-1 ring-slate-700 transition hover:bg-slate-700"
+          onClick={() => licensesQuery.refetch()}
+          disabled={licensesQuery.isFetching}
+        >
+          {licensesQuery.isFetching ? "Обновляем…" : "Обновить"}
+        </button>
+      }
+    >
+      <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
+        <div className="flex flex-col gap-2 md:flex-row md:items-end">
+          <div className="flex flex-col gap-1">
+            <label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Поиск</label>
+            <input
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+              placeholder="Адрес, владелец, hash"
+              className="w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-500 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 md:w-64"
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Статус</label>
+            <select
+              value={statusFilter}
+              onChange={(event) => setStatusFilter(event.target.value)}
+              className="rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
+            >
+              <option value="all">Все</option>
+              {statusOptions.map((option) => (
+                <option key={`license-status-${option}`} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Тип</label>
+            <select
+              value={typeFilter}
+              onChange={(event) => setTypeFilter(event.target.value)}
+              className="rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
+            >
+              <option value="all">Все</option>
+              {typeOptions.map((option) => (
+                <option key={`license-type-${option}`} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <label className="text-xs font-semibold uppercase tracking-wide text-slate-400">license_type</label>
+            <select
+              value={licenseTypeFilter}
+              onChange={(event) => setLicenseTypeFilter(event.target.value)}
+              className="rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
+            >
+              <option value="all">Все</option>
+              {kindOptions.map((option) => (
+                <option key={`license-kind-${option}`} value={option}>
+                  {option === "unknown" ? "Не указано" : option}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            className="rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-slate-300 ring-1 ring-slate-700 transition hover:bg-slate-800"
+            onClick={() => {
+              setSearch("");
+              setStatusFilter("all");
+              setTypeFilter("all");
+              setLicenseTypeFilter("all");
+            }}
+          >
+            Сбросить
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-4 hidden overflow-x-auto rounded-2xl border border-slate-800 md:block">
+        <table className="min-w-full divide-y divide-slate-800 text-left text-sm">
+          <thead className="bg-slate-950/70 text-xs uppercase tracking-wide text-slate-400">
+            <tr>
+              <th className="px-3 py-3">Лицензия</th>
+              <th className="px-3 py-3">On-chain</th>
+              <th className="px-3 py-3">Пользователь</th>
+              <th className="px-3 py-3">Контент</th>
+              <th className="px-3 py-3">Дата</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-900/60">
+            {items.length === 0 ? (
+              <tr>
+                <td colSpan={5} className="px-3 py-6 text-center text-sm text-slate-400">
+                  Ничего не найдено.
+                </td>
+              </tr>
+            ) : (
+              items.map((license) => (
+                <tr key={`license-${license.id}`} className="hover:bg-slate-900/40">
+                  <td className="px-3 py-3 align-top">
+                    <div className="flex flex-wrap items-center gap-2 font-semibold text-slate-100">
+                      <span>#{numberFormatter.format(license.id)}</span>
+                      <CopyButton
+                        value={license.id}
+                        aria-label="Скопировать ID лицензии"
+                        successMessage="ID лицензии скопирован"
+                        className="h-6 w-6"
+                      />
+                    </div>
+                    <div className="text-xs text-slate-400">{license.type ?? "—"} · {license.status ?? "—"}</div>
+                    <div className="text-[10px] uppercase tracking-wide text-slate-500">
+                      license_type: {license.license_type ?? "—"}
+                    </div>
+                  </td>
+                  <td className="px-3 py-3 align-top">
+                    <div className="flex flex-col gap-1">
+                      {license.onchain_address ? (
+                        <div className="flex items-center gap-2 text-xs">
+                          <a
+                            href={`https://tonviewer.com/${license.onchain_address}`}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="break-all text-sky-300 hover:text-sky-200"
+                          >
+                            {license.onchain_address}
+                          </a>
+                          <CopyButton
+                            value={license.onchain_address}
+                            aria-label="Скопировать on-chain адрес"
+                            successMessage="On-chain адрес скопирован"
+                            className="h-6 w-6"
+                          />
+                        </div>
+                      ) : (
+                        <div className="text-xs text-slate-500">—</div>
+                      )}
+                      <div className="flex items-center gap-2 text-[10px] uppercase tracking-wide text-slate-500">
+                        <span className="break-all">
+                          Владелец: {license.owner_address ?? "—"}
+                        </span>
+                        {license.owner_address ? (
+                          <CopyButton
+                            value={license.owner_address}
+                            aria-label="Скопировать адрес владельца"
+                            successMessage="Адрес владельца скопирован"
+                            className="h-6 w-6"
+                          />
+                        ) : null}
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-3 py-3 align-top">
+                    {license.user ? (
+                      <div className="flex flex-col gap-1 text-xs text-slate-300">
+                        <div className="flex flex-wrap items-center gap-2">
+                          <span>ID {numberFormatter.format(license.user.id)}</span>
+                          <CopyButton
+                            value={license.user.id}
+                            aria-label="Скопировать ID пользователя"
+                            successMessage="ID пользователя скопирован"
+                            className="h-6 w-6"
+                          />
+                        </div>
+                        <div className="flex flex-wrap items-center gap-2">
+                          <span>TG {numberFormatter.format(license.user.telegram_id)}</span>
+                          <CopyButton
+                            value={license.user.telegram_id}
+                            aria-label="Скопировать Telegram ID"
+                            successMessage="Telegram ID скопирован"
+                            className="h-6 w-6"
+                          />
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="text-xs text-slate-500">—</div>
+                    )}
+                  </td>
+                  <td className="px-3 py-3 align-top">
+                    {license.content ? (
+                      <>
+                        <div className="text-xs text-slate-300">{license.content.title}</div>
+                        <div className="flex items-center gap-2 text-[10px] uppercase tracking-wide text-slate-500">
+                          <span className="break-all">{license.content.hash}</span>
+                          {license.content.hash ? (
+                            <CopyButton
+                              value={license.content.hash}
+                              aria-label="Скопировать хеш контента"
+                              successMessage="Хеш контента скопирован"
+                              className="h-6 w-6"
+                            />
+                          ) : null}
+                        </div>
+                      </>
+                    ) : (
+                      <div className="text-xs text-slate-500">—</div>
+                    )}
+                  </td>
+                  <td className="px-3 py-3 align-top text-xs text-slate-400">
+                    <div>Создано: {formatDate(license.created_at)}</div>
+                    <div>Обновлено: {formatDate(license.updated_at)}</div>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+      <div className="mt-4 grid gap-4 md:hidden">
+        {items.length === 0 ? (
+          <div className="rounded-2xl border border-slate-800 bg-slate-950/40 px-4 py-6 text-center text-sm text-slate-400">
+            Ничего не найдено.
+          </div>
+        ) : (
+          items.map((license) => (
+            <div key={`license-card-${license.id}`} className="rounded-2xl border border-slate-800 bg-slate-950/40 p-4 shadow-inner shadow-black/30">
+              <div className="flex items-start justify-between gap-2">
+                <div className="flex flex-wrap items-center gap-2 text-sm font-semibold text-slate-100">
+                  <span>#{numberFormatter.format(license.id)}</span>
+                  <CopyButton
+                    value={license.id}
+                    aria-label="Скопировать ID лицензии"
+                    successMessage="ID лицензии скопирован"
+                    className="h-6 w-6"
+                  />
+                </div>
+                <Badge tone={license.status === "active" ? "success" : "neutral"}>
+                  {license.status ?? "—"}
+                </Badge>
+              </div>
+              <div className="mt-2 text-xs text-slate-400">
+                <span>{license.type ?? "—"}</span> · <span>license_type: {license.license_type ?? "—"}</span>
+              </div>
+              <div className="mt-3 space-y-3 text-xs text-slate-300">
+                <div className="flex flex-col gap-1">
+                  <span className="text-slate-500">On-chain адрес</span>
+                  <div className="flex items-center gap-2">
+                    <span className="break-all text-sky-300">
+                      {license.onchain_address ?? "—"}
+                    </span>
+                    {license.onchain_address ? (
+                      <CopyButton
+                        value={license.onchain_address}
+                        aria-label="Скопировать on-chain адрес"
+                        successMessage="On-chain адрес скопирован"
+                        className="h-6 w-6"
+                      />
+                    ) : null}
+                  </div>
+                </div>
+                <div className="flex flex-col gap-1">
+                  <span className="text-slate-500">Адрес владельца</span>
+                  <div className="flex items-center gap-2 text-[11px] text-slate-400">
+                    <span className="break-all">{license.owner_address ?? "—"}</span>
+                    {license.owner_address ? (
+                      <CopyButton
+                        value={license.owner_address}
+                        aria-label="Скопировать адрес владельца"
+                        successMessage="Адрес владельца скопирован"
+                        className="h-6 w-6"
+                      />
+                    ) : null}
+                  </div>
+                </div>
+                {license.user ? (
+                  <div className="flex flex-wrap items-center gap-2 text-slate-300">
+                    <span>ID {numberFormatter.format(license.user.id)}</span>
+                    <CopyButton
+                      value={license.user.id}
+                      aria-label="Скопировать ID пользователя"
+                      successMessage="ID пользователя скопирован"
+                      className="h-6 w-6"
+                    />
+                    <span>· TG {numberFormatter.format(license.user.telegram_id)}</span>
+                    <CopyButton
+                      value={license.user.telegram_id}
+                      aria-label="Скопировать Telegram ID"
+                      successMessage="Telegram ID скопирован"
+                      className="h-6 w-6"
+                    />
+                  </div>
+                ) : null}
+                {license.content ? (
+                  <div className="flex flex-col gap-1">
+                    <span className="text-slate-500">Контент</span>
+                    <span>{license.content.title}</span>
+                    <div className="flex items-center gap-2 text-[10px] uppercase tracking-wide text-slate-500">
+                      <span className="break-all">{license.content.hash}</span>
+                      {license.content.hash ? (
+                        <CopyButton
+                          value={license.content.hash}
+                          aria-label="Скопировать хеш контента"
+                          successMessage="Хеш контента скопирован"
+                          className="h-6 w-6"
+                        />
+                      ) : null}
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+              <div className="mt-3 text-[11px] text-slate-500">
+                <div>Создано: {formatDate(license.created_at)}</div>
+                <div>Обновлено: {formatDate(license.updated_at)}</div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      <div className="mt-4">
+        <PaginationControls total={total} limit={limit} page={page} onPageChange={setPage} />
+      </div>
+    </Section>
+  );
+};

src/pages/admin/sections/Network.tsx

@@ -0,0 +1,329 @@
+import React, { useMemo, useState } from "react";
+import { useQuery } from "react-query";
+import { request } from "~/shared/libs/request";
+
+const ratioTone = (v: number) => {
+  if (v >= 0.9) return "text-emerald-400";
+  if (v >= 0.6) return "text-yellow-400";
+  return "text-red-400";
+};
+
+export const AdminNetworkPage: React.FC = () => {
+  const [filterText, setFilterText] = useState("");
+  const [reachabilityFilter, setReachabilityFilter] = useState<"all" | "healthy" | "islands">("all");
+  const [sortBy, setSortBy] = useState<"leases" | "leaderships" | "reachability">("leases");
+  const [roleFilter, setRoleFilter] = useState<"all" | "trusted" | "read-only" | "deny">("all");
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
+
+  const { data, isLoading, error, refetch } = useQuery(
+    ["admin", "network", page, pageSize],
+    async () => {
+      const { data } = await request.get("/admin.network", { params: { page, page_size: pageSize } });
+      return data as any;
+    },
+    { keepPreviousData: true },
+  );
+
+  const members = data?.members ?? [];
+  const replication = data?.per_node_replication ?? {};
+  const summary = data?.summary;
+  const receipts = data?.receipts ?? [];
+
+  const [selectedNode, setSelectedNode] = useState<any | null>(null);
+
+  const total = data?.paging?.total ?? (data?.members?.length ?? 0);
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+
+  const columns = [
+    { key: "node_id", label: "NodeID" },
+    { key: "public_host", label: "Публичный адрес" },
+    { key: "version", label: "Версия" },
+    { key: "role", label: "Роль" },
+    { key: "ip", label: "IP" },
+    { key: "asn", label: "ASN" },
+    { key: "reachability_ratio", label: "Достижимость" },
+    { key: "leases", label: "Реплики" },
+    { key: "leaderships", label: "Лидерства" },
+    { key: "receipts", label: "Квитанции" },
+  ];
+
+  const rows = useMemo(() => {
+    let list = members.map((m: any) => {
+      const p = replication[m.node_id] ?? { leases_held: 0, leaderships: 0, sample_contents: [] };
+      return {
+        ...m,
+        leases: p.leases_held,
+        leaderships: p.leaderships,
+        _samples: p.sample_contents,
+      };
+    });
+    // filter by text
+    if (filterText.trim()) {
+      const t = filterText.trim().toLowerCase();
+      list = list.filter((r: any) =>
+        (r.public_host ?? "").toLowerCase().includes(t) ||
+        (r.ip ?? "").toLowerCase().includes(t) ||
+        (r.node_id ?? "").toLowerCase().includes(t)
+      );
+    }
+    // role filter
+    if (roleFilter !== "all") {
+      list = list.filter((r: any) => (r.role ?? "read-only") === roleFilter);
+    }
+    // reachability filter
+    if (reachabilityFilter === "healthy") {
+      list = list.filter((r: any) => r.reachability_ratio >= 0.6);
+    } else if (reachabilityFilter === "islands") {
+      list = list.filter((r: any) => r.reachability_ratio < 0.6);
+    }
+    // sorting
+    list.sort((a: any, b: any) => {
+      if (sortBy === "leases") return b.leases - a.leases;
+      if (sortBy === "leaderships") return b.leaderships - a.leaderships;
+      return b.reachability_ratio - a.reachability_ratio;
+    });
+    // reset page if filters reduce list
+    return list;
+  }, [members, replication, filterText, reachabilityFilter, sortBy, roleFilter]);
+  const paged = rows; // сервер уже порезал список
+
+  if (isLoading) return <div className="p-4">Загрузка сети…</div>;
+  if (error) return <div className="p-4 text-red-400">Ошибка загрузки: {String(error)}</div>;
+
+  return (
+    <div className="flex flex-col gap-6 p-4">
+      <div className="grid grid-cols-2 md:grid-cols-6 gap-4">
+        <div className="rounded-lg bg-slate-800/50 p-3">
+          <div className="text-xs text-slate-400">Оценка размера сети</div>
+          <div className="text-2xl font-semibold">{summary?.n_estimate ?? 0}</div>
+        </div>
+        <div className="rounded-lg bg-slate-800/50 p-3">
+          <div className="text-xs text-slate-400">Оценка trusted‑сети</div>
+          <div className="text-2xl font-semibold">{summary?.n_estimate_trusted ?? 0}</div>
+        </div>
+        <div className="rounded-lg bg-slate-800/50 p-3">
+          <div className="text-xs text-slate-400">Активные (все)</div>
+          <div className="text-2xl font-semibold">{summary?.active ?? 0}</div>
+        </div>
+        <div className="rounded-lg bg-slate-800/50 p-3">
+          <div className="text-xs text-slate-400">Активные (trusted)</div>
+          <div className="text-2xl font-semibold">{summary?.active_trusted ?? 0}</div>
+        </div>
+        <div className="rounded-lg bg-slate-800/50 p-3">
+          <div className="text-xs text-slate-400">Острова</div>
+          <div className="text-2xl font-semibold text-yellow-400">{summary?.islands ?? 0}</div>
+        </div>
+        <div className="rounded-lg bg-slate-800/50 p-3">
+          <div className="text-xs text-slate-400">Конфликты репликаций</div>
+          <div className="text-sm">Недобор: <span className="text-red-400">{summary?.replication_conflicts.under ?? 0}</span></div>
+          <div className="text-sm">Перебор: <span className="text-yellow-400">{summary?.replication_conflicts.over ?? 0}</span></div>
+        </div>
+        <div className="rounded-lg bg-slate-800/50 p-3">
+          <div className="text-xs text-slate-400">Gossip/Backoff</div>
+          <div className="text-sm">Интервал: {summary?.config?.gossip_interval_sec ?? '-'} c</div>
+          <div className="text-sm">База: {summary?.config?.gossip_backoff_base_sec ?? '-'} c</div>
+          <div className="text-sm">Потолок: {summary?.config?.gossip_backoff_cap_sec ?? '-' } c</div>
+        </div>
+      </div>
+
+      <div className="rounded-lg bg-slate-800/50 overflow-hidden">
+        <div className="px-3 py-2 text-sm text-slate-300 border-b border-slate-700 flex justify-between items-center">
+          <div className="flex items-center gap-3 flex-wrap">
+            <div>Узлы сети</div>
+            <input
+              className="bg-slate-900/50 text-sm px-2 py-1 rounded border border-slate-700 outline-none"
+              placeholder="Фильтр: host/IP/NodeID"
+              value={filterText}
+              onChange={(e) => setFilterText(e.target.value)}
+            />
+            <select
+              className="bg-slate-900/50 text-sm px-2 py-1 rounded border border-slate-700"
+              value={roleFilter}
+              onChange={(e) => setRoleFilter(e.target.value as any)}
+            >
+              <option value="all">Любая роль</option>
+              <option value="trusted">Только trusted</option>
+              <option value="read-only">Только read-only</option>
+              <option value="deny">Только deny</option>
+            </select>
+            <select
+              className="bg-slate-900/50 text-sm px-2 py-1 rounded border border-slate-700"
+              value={reachabilityFilter}
+              onChange={(e) => setReachabilityFilter(e.target.value as any)}
+            >
+              <option value="all">Все</option>
+              <option value="healthy">Только здоровые</option>
+              <option value="islands">Только острова</option>
+            </select>
+            <select
+              className="bg-slate-900/50 text-sm px-2 py-1 rounded border border-slate-700"
+              value={sortBy}
+              onChange={(e) => setSortBy(e.target.value as any)}
+            >
+              <option value="leases">По репликам</option>
+              <option value="leaderships">По лидерствам</option>
+              <option value="reachability">По достижимости</option>
+            </select>
+            <select
+              className="bg-slate-900/50 text-sm px-2 py-1 rounded border border-slate-700"
+              value={pageSize}
+              onChange={(e) => { setPage(1); setPageSize(parseInt(e.target.value)); }}
+            >
+              <option value={25}>25</option>
+              <option value={50}>50</option>
+              <option value={100}>100</option>
+            </select>
+          </div>
+          <button onClick={() => refetch()} className="text-xs px-2 py-1 bg-slate-700 hover:bg-slate-600 rounded">
+            Обновить
+          </button>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="min-w-full text-sm">
+            <thead>
+              <tr className="bg-slate-900/40">
+                {columns.map((c) => (
+                  <th key={c.key} className="px-3 py-2 text-left text-slate-400 font-medium whitespace-nowrap">{c.label}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {paged.map((r: any) => (
+                <tr key={r.node_id} className="hover:bg-slate-900/30 cursor-pointer" onClick={() => setSelectedNode(r)}>
+                  <td className="px-3 py-2 font-mono text-xs whitespace-nowrap">{r.node_id.slice(0, 10)}…</td>
+                  <td className="px-3 py-2 whitespace-nowrap">{r.public_host ?? '-'}</td>
+                  <td className="px-3 py-2 whitespace-nowrap">{r.version ?? '-'}</td>
+                  <td className="px-3 py-2 whitespace-nowrap">{r.role}</td>
+                  <td className="px-3 py-2 whitespace-nowrap">{r.ip ?? '-'}</td>
+                  <td className="px-3 py-2 whitespace-nowrap">{r.asn ?? '-'}</td>
+                  <td className={`px-3 py-2 whitespace-nowrap ${ratioTone(r.reachability_ratio)}`}>{(r.reachability_ratio * 100).toFixed(0)}%</td>
+                  <td className="px-3 py-2 whitespace-nowrap">{r.leases}</td>
+                  <td className="px-3 py-2 whitespace-nowrap">{r.leaderships}</td>
+                  <td className="px-3 py-2 whitespace-nowrap">{r.receipts_asn_unique ?? 0}/{r.receipts_total ?? 0}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        {/* Pagination controls */}
+        <div className="px-3 py-2 border-t border-slate-700 flex items-center justify-between text-xs text-slate-400">
+          <div>Стр. {page} из {totalPages} • Всего: {total}</div>
+          <div className="flex gap-2">
+            <button className="px-2 py-1 bg-slate-700 rounded disabled:opacity-50" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>Назад</button>
+            <button className="px-2 py-1 bg-slate-700 rounded disabled:opacity-50" onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={page >= totalPages}>Вперёд</button>
+          </div>
+        </div>
+      </div>
+
+      {/* Reachability receipts table */}
+      <div className="rounded-lg bg-slate-800/50 overflow-hidden">
+        <div className="px-3 py-2 text-sm text-slate-300 border-b border-slate-700 flex justify-between items-center">
+          <div>Квитанции достижимости</div>
+          <div className="text-xs text-slate-400">{receipts.length} шт.</div>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="min-w-full text-sm">
+            <thead>
+              <tr className="bg-slate-900/40">
+                <th className="px-3 py-2 text-left text-slate-400 font-medium whitespace-nowrap">Target</th>
+                <th className="px-3 py-2 text-left text-slate-400 font-medium whitespace-nowrap">Issuer</th>
+                <th className="px-3 py-2 text-left text-slate-400 font-medium whitespace-nowrap">ASN</th>
+                <th className="px-3 py-2 text-left text-slate-400 font-medium whitespace-nowrap">Статус</th>
+              </tr>
+            </thead>
+            <tbody>
+              {receipts.map((r: any, i: number) => (
+                <tr key={`${r.issuer_id}:${r.target_id}:${i}`} className="hover:bg-slate-900/30">
+                  <td className="px-3 py-2 font-mono text-xs whitespace-nowrap">{r.target_id.slice(0, 10)}…</td>
+                  <td className="px-3 py-2 font-mono text-xs whitespace-nowrap">{r.issuer_id.slice(0, 10)}…</td>
+                  <td className="px-3 py-2 whitespace-nowrap">{r.asn ?? '-'}</td>
+                  <td className="px-3 py-2 whitespace-nowrap">
+                    {r.status === 'valid' && <span className="text-emerald-400">подпись ок</span>}
+                    {r.status === 'bad_signature' && <span className="text-red-400">ошибка подписи</span>}
+                    {r.status === 'unknown_issuer' && <span className="text-yellow-400">неизвестный эмитент</span>}
+                    {r.status === 'mismatch_node_id' && <span className="text-orange-400">node_id≠pubkey</span>}
+                    {r.status === 'unknown' && <span className="text-slate-400">—</span>}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="text-xs text-slate-500">
+        Подсказка: недобор/перебор репликаций сигнализируют о проблемах с диверсификацией или подсчётом N_estimate.
+      </div>
+
+      {selectedNode && (
+        <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
+          <div className="bg-slate-900 rounded-lg border border-slate-700 w-[min(92vw,720px)] max-h-[80vh] overflow-auto">
+            <div className="px-4 py-3 border-b border-slate-700 flex items-center justify-between">
+              <div className="text-sm text-slate-300">Детали узла</div>
+              <button className="text-xs px-2 py-1 bg-slate-700 hover:bg-slate-600 rounded" onClick={() => setSelectedNode(null)}>Закрыть</button>
+            </div>
+            <div className="p-4 text-sm space-y-2">
+              <div><span className="text-slate-400">NodeID:</span> <span className="font-mono text-xs">{selectedNode.node_id}</span></div>
+              <div><span className="text-slate-400">Публичный адрес:</span> {selectedNode.public_host ?? '—'}</div>
+              <div className="grid grid-cols-2 gap-3">
+                <div><span className="text-slate-400">Версия:</span> {selectedNode.version ?? '—'}</div>
+                <div><span className="text-slate-400">Роль:</span> {selectedNode.role}</div>
+                <div><span className="text-slate-400">IP:</span> {selectedNode.ip ?? '—'}</div>
+                <div><span className="text-slate-400">ASN:</span> {selectedNode.asn ?? '—'}</div>
+                <div><span className="text-slate-400">Достижимость:</span> {(selectedNode.reachability_ratio * 100).toFixed(0)}%</div>
+                <div><span className="text-slate-400">Квитанции:</span> {selectedNode.receipts_asn_unique ?? 0}/{selectedNode.receipts_total ?? 0}</div>
+                <div><span className="text-slate-400">Реплики:</span> {selectedNode.leases}</div>
+                <div><span className="text-slate-400">Лидерства:</span> {selectedNode.leaderships}</div>
+              </div>
+              <div>
+                <div className="text-slate-400 mb-1">Примеры контента:</div>
+                <div className="flex flex-wrap gap-2">
+                  {(selectedNode._samples ?? []).map((c: string) => (
+                    <span key={c} className="px-2 py-1 bg-slate-800 rounded text-xs font-mono">{c.slice(0,10)}…</span>
+                  ))}
+                  {(!selectedNode._samples || selectedNode._samples.length === 0) && (
+                    <span className="text-slate-500">—</span>
+                  )}
+                </div>
+              </div>
+              <div>
+                <div className="text-slate-400 mb-1">Конфликты:</div>
+                <div className="max-h-40 overflow-auto border border-slate-800 rounded">
+                  <table className="min-w-full text-xs">
+                    <thead className="bg-slate-900">
+                      <tr>
+                        <th className="px-2 py-1 text-left text-slate-400">Тип</th>
+                        <th className="px-2 py-1 text-left text-slate-400">Время</th>
+                        <th className="px-2 py-1 text-left text-slate-400">Content</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {(selectedNode.conflict_samples ?? []).map((item: any, idx: number) => (
+                        <tr key={idx} className="odd:bg-slate-900/40">
+                          <td className="px-2 py-1 whitespace-nowrap">{item.type}</td>
+                          <td className="px-2 py-1 whitespace-nowrap">{item.ts ? new Date(item.ts * 1000).toLocaleString() : '—'}</td>
+                          <td className="px-2 py-1 font-mono whitespace-nowrap">{(item.content_id || '').slice(0, 10)}…</td>
+                        </tr>
+                      ))}
+                      {(!selectedNode.conflict_samples || selectedNode.conflict_samples.length === 0) && (
+                        <tr><td colSpan={3} className="px-2 py-2 text-slate-500 text-center">Нет данных</td></tr>
+                      )}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+              {selectedNode.public_host && (
+                <div className="pt-2">
+                  <a href={selectedNode.public_host} target="_blank" rel="noreferrer" className="text-emerald-400 hover:underline">Открыть узел</a>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AdminNetworkPage;

src/pages/admin/sections/NetworkSettings.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react";
+import { request } from "~/shared/libs/request";
+
+type Config = {
+  heartbeat_interval: number;
+  lease_ttl: number;
+  gossip_interval_sec: number;
+  gossip_backoff_base_sec: number;
+  gossip_backoff_cap_sec: number;
+};
+
+export const AdminNetworkSettingsPage: React.FC = () => {
+  const [cfg, setCfg] = useState<Config | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const load = async () => {
+    try {
+      const { data } = await request.get("/admin.network.config");
+      setCfg(data.config);
+    } catch (e: any) {
+      setError(String(e?.message || e));
+    }
+  };
+  useEffect(() => { void load(); }, []);
+
+  const update = async () => {
+    if (!cfg) return;
+    setSaving(true);
+    setError(null);
+    try {
+      await request.post("/admin.network.config.set", cfg);
+      await load();
+    } catch (e: any) {
+      setError(String(e?.message || e));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!cfg) return <div className="p-4">Загрузка настроек…</div>;
+
+  const Field: React.FC<{ label: string; value: number; onChange: (v:number)=>void; tip?: string }> = ({label, value, onChange, tip}) => (
+    <label className="flex flex-col gap-1">
+      <span className="text-xs text-slate-400">{label}</span>
+      <input type="number" className="bg-slate-900/50 px-2 py-1 rounded border border-slate-700" value={value} onChange={(e)=>onChange(parseInt(e.target.value || '0'))} />
+      {tip && <span className="text-[10px] text-slate-500">{tip}</span>}
+    </label>
+  );
+
+  return (
+    <div className="p-4 flex flex-col gap-4">
+      <div className="text-lg font-semibold">Сеть → Настройки</div>
+      {error && <div className="text-sm text-red-400">Ошибка: {error}</div>}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <Field label="Интервал heartbeat (сек)" value={cfg.heartbeat_interval} onChange={(v)=>setCfg({...cfg, heartbeat_interval: v})} tip="Период обновления лизов" />
+        <Field label="TTL лиза (сек)" value={cfg.lease_ttl} onChange={(v)=>setCfg({...cfg, lease_ttl: v})} tip="Время жизни лиза до истечения" />
+        <Field label="Интервал gossip (сек)" value={cfg.gossip_interval_sec} onChange={(v)=>setCfg({...cfg, gossip_interval_sec: v})} tip="Период рассылки снимка DHT" />
+        <Field label="Бэк-офф база (сек)" value={cfg.gossip_backoff_base_sec} onChange={(v)=>setCfg({...cfg, gossip_backoff_base_sec: v})} tip="Начальный бэк-офф для неуспешных пиров" />
+        <Field label="Бэк-офф потолок (сек)" value={cfg.gossip_backoff_cap_sec} onChange={(v)=>setCfg({...cfg, gossip_backoff_cap_sec: v})} tip="Максимальный бэк-офф" />
+      </div>
+      <div className="flex gap-2">
+        <button className="px-3 py-2 bg-emerald-700 hover:bg-emerald-600 rounded disabled:opacity-50" onClick={()=>void update()} disabled={saving}>Сохранить</button>
+        <button className="px-3 py-2 bg-slate-700 hover:bg-slate-600 rounded" onClick={()=>void load()}>Сбросить</button>
+      </div>
+      <div className="text-xs text-slate-500">Примечание: некоторые параметры читаются задачами-демонами при каждом цикле и применяются без перезапуска.</div>
+    </div>
+  );
+};
+
+export default AdminNetworkSettingsPage;
+

src/pages/admin/sections/Nodes.tsx

@@ -0,0 +1,205 @@
+import { ChangeEvent, useMemo } from "react";
+
+import { useAdminNodeSetRole, useAdminNodes } from "~/shared/services/admin";
+import { Section, CopyButton } from "../components";
+import { useAdminContext } from "../context";
+import { formatDate, formatUnknown } from "../utils/format";
+
+export const AdminNodesPage = () => {
+  const { isAuthorized, handleRequestError, pushFlash } = useAdminContext();
+
+  const nodesQuery = useAdminNodes({
+    enabled: isAuthorized,
+    refetchInterval: 60_000,
+    onError: (error) => handleRequestError(error, "Не удалось загрузить список нод"),
+  });
+
+  const nodeRoleMutation = useAdminNodeSetRole({
+    onSuccess: async ({ node }) => {
+      pushFlash({
+        type: "success",
+        message: `Роль узла ${node.public_key ?? node.ip ?? ""} обновлена до ${node.role}`,
+      });
+      await nodesQuery.refetch();
+    },
+    onError: (error) => handleRequestError(error, "Не удалось обновить роль узла"),
+  });
+
+  const items = nodesQuery.data?.items ?? [];
+
+  const handleRoleChange = (publicKey: string | null, host: string | null) => {
+    return (event: ChangeEvent<HTMLSelectElement>) => {
+      const role = event.target.value as "trusted" | "read-only" | "deny";
+      nodeRoleMutation.mutate({
+        role,
+        public_key: publicKey ?? undefined,
+        host: host ?? undefined,
+      });
+    };
+  };
+
+  const sortedItems = useMemo(() => {
+    return [...items].sort((a, b) => {
+      const aSeen = a.last_seen ? new Date(a.last_seen).getTime() : 0;
+      const bSeen = b.last_seen ? new Date(b.last_seen).getTime() : 0;
+      return bSeen - aSeen;
+    });
+  }, [items]);
+
+  if (!nodesQuery.data) {
+    return nodesQuery.isLoading ? (
+      <Section id="nodes" title="Ноды" description="Доверенные и внешние узлы">
+        Загрузка…
+      </Section>
+    ) : null;
+  }
+
+  return (
+    <Section id="nodes" title="Ноды" description="Роли, версии и последнее появление">
+      <div className="hidden overflow-x-auto rounded-2xl border border-slate-800 md:block">
+        <table className="min-w-full divide-y divide-slate-800 text-left text-sm">
+          <thead className="bg-slate-950/70 text-xs uppercase tracking-wide text-slate-400">
+            <tr>
+              <th className="px-3 py-3">IP</th>
+              <th className="px-3 py-3">Порт</th>
+              <th className="px-3 py-3">Публичный ключ</th>
+              <th className="px-3 py-3">Роль</th>
+              <th className="px-3 py-3">Версия</th>
+              <th className="px-3 py-3">Последний онлайн</th>
+              <th className="px-3 py-3">Заметки</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-900/60">
+            {sortedItems.map((node, index) => (
+              <tr key={node.public_key ?? node.ip ?? `node-${index}`} className="hover:bg-slate-900/50">
+                <td className="px-3 py-2">
+                  {node.ip ? (
+                    <div className="flex items-center gap-2 text-sm text-slate-200">
+                      <span className="break-all font-mono text-xs text-slate-300">{node.ip}</span>
+                      <CopyButton
+                        value={node.ip}
+                        aria-label="Скопировать IP-адрес"
+                        successMessage="IP-адрес узла скопирован"
+                      />
+                    </div>
+                  ) : (
+                    <span className="text-xs text-slate-500">—</span>
+                  )}
+                </td>
+                <td className="px-3 py-2">
+                  {node.port != null ? (
+                    <div className="flex items-center gap-2 text-sm text-slate-200">
+                      <span className="font-mono text-xs text-slate-300">{node.port}</span>
+                      <CopyButton
+                        value={node.port}
+                        aria-label="Скопировать порт"
+                        successMessage="Порт узла скопирован"
+                      />
+                    </div>
+                  ) : (
+                    <span className="text-xs text-slate-500">—</span>
+                  )}
+                </td>
+                <td className="px-3 py-2">
+                  {node.public_key ? (
+                    <div className="flex items-center gap-2">
+                      <span className="break-all font-mono text-[11px] text-slate-300">{node.public_key}</span>
+                      <CopyButton
+                        value={node.public_key}
+                        aria-label="Скопировать публичный ключ"
+                        successMessage="Публичный ключ узла скопирован"
+                      />
+                    </div>
+                  ) : (
+                    <span className="text-xs text-slate-500">—</span>
+                  )}
+                </td>
+                <td className="px-3 py-2">
+                  <select
+                    className="rounded-lg border border-slate-700 bg-slate-950 px-2 py-1 text-xs text-slate-100 focus:border-sky-500 focus:outline-none"
+                    value={node.role}
+                    onChange={handleRoleChange(node.public_key, node.ip)}
+                    disabled={nodeRoleMutation.isLoading}
+                  >
+                    <option value="trusted">trusted</option>
+                    <option value="read-only">read-only</option>
+                    <option value="deny">deny</option>
+                  </select>
+                </td>
+                <td className="px-3 py-2">{node.version || "—"}</td>
+                <td className="px-3 py-2">{formatDate(node.last_seen)}</td>
+                <td className="px-3 py-2 break-words">{formatUnknown(node.notes)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className="grid gap-3 md:hidden">
+        {sortedItems.map((node, index) => (
+          <div
+            key={node.public_key ?? node.ip ?? `node-card-${index}`}
+            className="rounded-2xl border border-slate-800 bg-slate-950/50 p-4 shadow-inner shadow-black/30"
+          >
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <div className="flex items-center gap-2">
+                <span className="text-xs uppercase tracking-wide text-slate-500">IP</span>
+                <span className="font-mono text-xs text-slate-200">{node.ip ?? "—"}</span>
+                {node.ip ? <CopyButton value={node.ip} aria-label="Скопировать IP-адрес" successMessage="IP-адрес узла скопирован" /> : null}
+              </div>
+              <span className="rounded-full bg-slate-900/80 px-3 py-1 text-[11px] uppercase tracking-wide text-slate-300">
+                {node.role}
+              </span>
+            </div>
+            <div className="mt-3 grid gap-3 text-xs text-slate-300">
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="text-slate-500">Порт</span>
+                <span className="font-mono text-xs text-slate-200">{node.port ?? "—"}</span>
+                {node.port != null ? (
+                  <CopyButton value={node.port} aria-label="Скопировать порт" successMessage="Порт узла скопирован" />
+                ) : null}
+              </div>
+              <div className="flex flex-col gap-2">
+                <span className="text-slate-500">Публичный ключ</span>
+                <div className="flex items-center gap-2">
+                  <span className="break-all font-mono text-[11px] text-slate-300">{node.public_key ?? "—"}</span>
+                  {node.public_key ? (
+                    <CopyButton
+                      value={node.public_key}
+                      aria-label="Скопировать публичный ключ"
+                      successMessage="Публичный ключ узла скопирован"
+                    />
+                  ) : null}
+                </div>
+              </div>
+              <div className="flex flex-col gap-1">
+                <span className="text-slate-500">Версия</span>
+                <span>{node.version || "—"}</span>
+              </div>
+              <div className="flex flex-col gap-1">
+                <span className="text-slate-500">Последний онлайн</span>
+                <span>{formatDate(node.last_seen)}</span>
+              </div>
+              <div className="flex flex-col gap-1">
+                <span className="text-slate-500">Заметки</span>
+                <span className="break-words text-slate-200">{formatUnknown(node.notes)}</span>
+              </div>
+            </div>
+            <div className="mt-3">
+              <label className="text-xs uppercase tracking-wide text-slate-500">Роль</label>
+              <select
+                className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-2 py-2 text-xs text-slate-100 focus:border-sky-500 focus:outline-none"
+                value={node.role}
+                onChange={handleRoleChange(node.public_key, node.ip)}
+                disabled={nodeRoleMutation.isLoading}
+              >
+                <option value="trusted">trusted</option>
+                <option value="read-only">read-only</option>
+                <option value="deny">deny</option>
+              </select>
+            </div>
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+};

src/pages/admin/sections/Overview.tsx

@@ -0,0 +1,220 @@
+import { useMemo } from "react";
+
+import { useAdminOverview } from "~/shared/services/admin";
+import { Section, Badge, InfoRow, CopyButton } from "../components";
+import { useAdminContext } from "../context";
+import { formatBytes, formatDate, formatUnknown, numberFormatter } from "../utils/format";
+
+export const AdminOverviewPage = () => {
+  const { isAuthorized, handleRequestError } = useAdminContext();
+
+  const overviewQuery = useAdminOverview({
+    enabled: isAuthorized,
+    retry: false,
+    refetchInterval: 60_000,
+    onError: (error) => {
+      handleRequestError(error, "Не удалось загрузить обзор");
+    },
+  });
+
+  const overviewCards = useMemo(() => {
+    const data = overviewQuery.data;
+    if (!data) {
+      return [];
+    }
+    const { project, content, node, ipfs, codebase, runtime } = data;
+    return [
+      {
+        label: "Хост",
+        value: project.host || "локальный",
+        helper: project.name,
+        copyValue: project.host ?? null,
+        successMessage: "Хост скопирован",
+      },
+      {
+        label: "TON Master",
+        value: node.ton_master,
+        helper: "Платформа",
+        copyValue: node.ton_master ?? null,
+        successMessage: "TON Master скопирован",
+      },
+      {
+        label: "Service Wallet",
+        value: node.service_wallet,
+        helper: node.id,
+        copyValue: node.service_wallet ?? null,
+        successMessage: "Service wallet скопирован",
+      },
+      {
+        label: "Highload Wallet",
+        value: node.highload_wallet ?? "—",
+        helper: "Высоконагрузочный",
+        copyValue: node.highload_wallet ?? null,
+        successMessage: "Highload wallet скопирован",
+      },
+      {
+        label: "Контент",
+        value: `${numberFormatter.format(content.encrypted_total)} зашифр.`,
+        helper: `${numberFormatter.format(content.derivatives_ready)} деривативов`,
+      },
+      {
+        label: "IPFS Repo",
+        value: formatBytes(Number((ipfs.repo as Record<string, unknown>)?.RepoSize ?? 0)),
+        helper: "Размер репозитория",
+      },
+      {
+        label: "Bitswap",
+        value: numberFormatter.format(Number((ipfs.bitswap as Record<string, unknown>)?.Peers ?? 0)),
+        helper: "Пиры",
+      },
+      {
+        label: "Билд",
+        value: codebase.commit ?? "n/a",
+        helper: codebase.branch ?? "",
+        copyValue: codebase.commit ?? null,
+        successMessage: "Хеш коммита скопирован",
+      },
+      {
+        label: "Python",
+        value: runtime.python,
+        helper: runtime.implementation,
+      },
+    ];
+  }, [overviewQuery.data]);
+
+  if (!overviewQuery.data) {
+    return overviewQuery.isLoading ? (
+      <Section id="overview" title="Обзор" description="Краткий срез состояния узла, окружения и служб">
+        Загрузка…
+      </Section>
+    ) : null;
+  }
+
+  const { project, services, ton, runtime, ipfs } = overviewQuery.data;
+  const ipfsIdentity = (ipfs.identity ?? {}) as Record<string, unknown>;
+  const ipfsBitswap = (ipfs.bitswap ?? {}) as Record<string, unknown>;
+  const ipfsRepo = (ipfs.repo ?? {}) as Record<string, unknown>;
+  const ipfsId = ipfsIdentity["ID"];
+  const ipfsAgent = ipfsIdentity["AgentVersion"];
+
+  return (
+    <Section
+      id="overview"
+      title="Обзор"
+      description="Краткий срез состояния узла, окружения и служб"
+      actions={
+        <button
+          type="button"
+          className="rounded-lg bg-slate-800 px-3 py-2 text-xs font-semibold text-slate-200 ring-1 ring-slate-700 transition hover:bg-slate-700"
+          onClick={() => overviewQuery.refetch()}
+          disabled={overviewQuery.isFetching}
+        >
+          {overviewQuery.isFetching ? "Обновляем…" : "Обновить"}
+        </button>
+      }
+    >
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        {overviewCards.map((card) => (
+          <div
+            key={card.label}
+            className="overflow-hidden rounded-xl bg-slate-950/60 p-4 shadow-inner shadow-black/40 ring-1 ring-slate-800"
+          >
+            <div className="flex items-start justify-between gap-2">
+              <p className="text-xs uppercase tracking-wide text-slate-500">{card.label}</p>
+              {card.copyValue ? (
+                <CopyButton
+                  value={card.copyValue}
+                  successMessage={card.successMessage}
+                  aria-label={`Скопировать значение «${card.label}»`}
+                />
+              ) : null}
+            </div>
+            <p className="mt-2 break-all text-lg font-semibold text-slate-100">{card.value}</p>
+            {card.helper ? <p className="mt-1 break-words text-xs text-slate-500">{card.helper}</p> : null}
+          </div>
+        ))}
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <div className="space-y-3">
+          <h3 className="text-lg font-semibold text-slate-100">Проект</h3>
+          <dl className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <InfoRow label="Хост" copyValue={project.host ?? null}>
+              {project.host || "—"}
+            </InfoRow>
+            <InfoRow label="Имя">{project.name}</InfoRow>
+            <InfoRow label="Приватность">{project.privacy}</InfoRow>
+            <InfoRow label="TON Testnet">{ton.testnet ? "Да" : "Нет"}</InfoRow>
+            <InfoRow label="TON API Key">{ton.api_key_configured ? "Настроен" : "Нет"}</InfoRow>
+            <InfoRow label="TON Host" copyValue={ton.host ?? null}>
+              {ton.host || "—"}
+            </InfoRow>
+          </dl>
+        </div>
+        <div className="space-y-3">
+          <h3 className="text-lg font-semibold text-slate-100">Среда выполнения</h3>
+          <dl className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <InfoRow label="Python">{runtime.python}</InfoRow>
+            <InfoRow label="Имплементация">{runtime.implementation}</InfoRow>
+            <InfoRow label="Платформа">{runtime.platform}</InfoRow>
+            <InfoRow label="UTC сейчас">{formatDate(runtime.utc_now)}</InfoRow>
+          </dl>
+        </div>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <div className="space-y-3">
+          <h3 className="text-lg font-semibold text-slate-100">IPFS</h3>
+          <div className="grid gap-3 overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
+            <InfoRow label="ID" copyValue={(ipfsId as string) ?? null}>
+              {formatUnknown(ipfsId)}
+            </InfoRow>
+            <InfoRow label="Agent">{formatUnknown(ipfsAgent)}</InfoRow>
+            <InfoRow label="Peers">
+              {numberFormatter.format(Number(ipfsBitswap?.Peers ?? 0))}
+            </InfoRow>
+            <InfoRow label="Repo size">
+              {formatBytes(Number(ipfsRepo?.RepoSize ?? 0))}
+            </InfoRow>
+            <InfoRow label="Storage max">
+              {formatBytes(Number(ipfsRepo?.StorageMax ?? 0))}
+            </InfoRow>
+          </div>
+        </div>
+        <div className="space-y-3">
+          <h3 className="text-lg font-semibold text-slate-100">Сервисы</h3>
+          <ul className="space-y-2">
+            {services.length === 0 ? (
+              <li className="text-sm text-slate-400">Нет зарегистрированных сервисов</li>
+            ) : (
+              services.map((service) => {
+                const status = service.status ?? "—";
+                const tone: "success" | "warn" | "danger" | "neutral" = status.includes("working")
+                  ? "success"
+                  : status.includes("timeout")
+                  ? "danger"
+                  : "neutral";
+                return (
+                  <li
+                    key={service.name}
+                    className="flex items-center justify-between rounded-lg bg-slate-950/40 px-3 py-2 ring-1 ring-slate-800"
+                  >
+                    <span className="max-w-[50%] break-words text-sm font-medium text-slate-100">{service.name}</span>
+                    <div className="flex items-center gap-3 text-xs text-slate-400">
+                      <span>
+                        {service.last_reported_seconds != null
+                          ? `Обновлён ${Math.round(service.last_reported_seconds)} сек назад`
+                          : "Нет данных"}
+                      </span>
+                      <Badge tone={tone}>{status}</Badge>
+                    </div>
+                  </li>
+                );
+              })
+            )}
+          </ul>
+        </div>
+      </div>
+    </Section>
+  );
+};

src/pages/admin/sections/Stars.tsx

@@ -0,0 +1,227 @@
+import { useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router-dom";
+
+import { useAdminStars } from "~/shared/services/admin";
+import { Section, PaginationControls, Badge } from "../components";
+import { useAdminContext } from "../context";
+import { formatDate, formatStars, numberFormatter } from "../utils/format";
+
+export const AdminStarsPage = () => {
+  const { isAuthorized, handleRequestError } = useAdminContext();
+  const location = useLocation();
+  const initialSearch = useMemo(() => {
+    const params = new URLSearchParams(location.search);
+    return params.get("search") ?? "";
+  }, [location.search]);
+  const [search, setSearch] = useState(initialSearch);
+  const [paidFilter, setPaidFilter] = useState<"all" | "paid" | "unpaid">("all");
+  const [typeFilter, setTypeFilter] = useState("all");
+  const [page, setPage] = useState(0);
+
+  const limit = 50;
+  const normalizedSearch = search.trim();
+
+  const starsQuery = useAdminStars(
+    {
+      limit,
+      offset: page * limit,
+      search: normalizedSearch || undefined,
+      type: typeFilter !== "all" ? typeFilter : undefined,
+      paid: paidFilter === "all" ? undefined : paidFilter === "paid",
+    },
+    {
+      enabled: isAuthorized,
+      keepPreviousData: true,
+      refetchInterval: 60_000,
+      onError: (error) => handleRequestError(error, "Не удалось загрузить платежи"),
+    },
+  );
+
+  useEffect(() => {
+    setSearch(initialSearch);
+  }, [initialSearch]);
+
+  useEffect(() => {
+    setPage(0);
+  }, [normalizedSearch, paidFilter, typeFilter]);
+
+  if (starsQuery.isLoading && !starsQuery.data) {
+    return (
+      <Section id="stars" title="Платежи Stars" description="Телеграм Stars счета и связанные пользователи">
+        Загрузка…
+      </Section>
+    );
+  }
+
+  if (!starsQuery.data) {
+    return (
+      <Section id="stars" title="Платежи Stars" description="Телеграм Stars счета и связанные пользователи">
+        <p className="text-sm text-slate-400">Выберите вкладку «Платежи Stars», чтобы загрузить данные.</p>
+      </Section>
+    );
+  }
+
+  const { items, stats, total } = starsQuery.data;
+  const typeOptions = Object.keys(stats.by_type || {});
+
+  const statCards = [
+    { label: "Всего платежей", value: numberFormatter.format(stats.total) },
+    { label: "Оплачено", value: `${numberFormatter.format(stats.paid)} · ${formatStars(stats.amount_paid)}` },
+    { label: "Неоплачено", value: `${numberFormatter.format(stats.unpaid)} · ${formatStars(stats.amount_unpaid)}` },
+  ];
+
+  return (
+    <Section
+      id="stars"
+      title="Платежи Stars"
+      description="Телеграм Stars счета и связанные пользователи"
+      actions={
+        <button
+          type="button"
+          className="rounded-lg bg-slate-800 px-3 py-2 text-xs font-semibold text-slate-200 ring-1 ring-slate-700 transition hover:bg-slate-700"
+          onClick={() => starsQuery.refetch()}
+          disabled={starsQuery.isFetching}
+        >
+          {starsQuery.isFetching ? "Обновляем…" : "Обновить"}
+        </button>
+      }
+    >
+      <div className="grid gap-4 md:grid-cols-3">
+        {statCards.map((card) => (
+          <div key={card.label} className="rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800 shadow-inner shadow-black/40">
+            <p className="text-xs uppercase tracking-wide text-slate-500">{card.label}</p>
+            <p className="mt-2 text-lg font-semibold text-slate-100">{card.value}</p>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-6 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
+        <div className="flex flex-col gap-2 md:flex-row md:items-end">
+          <div className="flex flex-col gap-1">
+            <label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Поиск</label>
+            <input
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+              placeholder="ID, ссылка, контент"
+              className="w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-500 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 md:w-64"
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Статус</label>
+            <select
+              value={paidFilter}
+              onChange={(event) => setPaidFilter(event.target.value as "all" | "paid" | "unpaid")}
+              className="rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
+            >
+              <option value="all">Все</option>
+              <option value="paid">Оплачено</option>
+              <option value="unpaid">Не оплачено</option>
+            </select>
+          </div>
+          <div className="flex flex-col gap-1">
+            <label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Тип</label>
+            <select
+              value={typeFilter}
+              onChange={(event) => setTypeFilter(event.target.value)}
+              className="rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
+            >
+              <option value="all">Все</option>
+              {typeOptions.map((option) => (
+                <option key={`stars-type-${option}`} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            className="rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-slate-300 ring-1 ring-slate-700 transition hover:bg-slate-800"
+            onClick={() => {
+              setSearch("");
+              setPaidFilter("all");
+              setTypeFilter("all");
+            }}
+          >
+            Сбросить
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-4 overflow-x-auto">
+        <table className="min-w-full divide-y divide-slate-800 text-left text-sm">
+          <thead className="bg-slate-950/70 text-xs uppercase tracking-wide text-slate-400">
+            <tr>
+              <th className="px-3 py-3">Инвойс</th>
+              <th className="px-3 py-3">Сумма</th>
+              <th className="px-3 py-3">Пользователь</th>
+              <th className="px-3 py-3">Контент</th>
+              <th className="px-3 py-3">Создан</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-900/60">
+            {items.length === 0 ? (
+              <tr>
+                <td colSpan={5} className="px-3 py-6 text-center text-sm text-slate-400">
+                  Платежей не найдено.
+                </td>
+              </tr>
+            ) : (
+              items.map((invoice) => (
+                <tr key={`stars-${invoice.id}`} className="hover:bg-slate-900/40">
+                  <td className="px-3 py-3 align-top">
+                    <div className="font-semibold text-slate-100">
+                      #{numberFormatter.format(invoice.id)} · {invoice.type ?? "—"}
+                    </div>
+                    <div className="text-xs text-slate-400 break-all">{invoice.external_id}</div>
+                    {invoice.invoice_url ? (
+                      <a
+                        href={invoice.invoice_url}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="text-xs text-sky-300 hover:text-sky-200"
+                      >
+                        Открыть счёт
+                      </a>
+                    ) : null}
+                  </td>
+                  <td className="px-3 py-3 align-top">
+                    <div className="font-semibold text-slate-100">{formatStars(invoice.amount)}</div>
+                    <Badge tone={invoice.paid ? "success" : "warn"}>{invoice.status}</Badge>
+                  </td>
+                  <td className="px-3 py-3 align-top">
+                    {invoice.user ? (
+                      <div className="text-xs text-slate-300">
+                        ID {numberFormatter.format(invoice.user.id)} · TG {numberFormatter.format(invoice.user.telegram_id)}
+                      </div>
+                    ) : (
+                      <div className="text-xs text-slate-500">—</div>
+                    )}
+                  </td>
+                  <td className="px-3 py-3 align-top">
+                    {invoice.content ? (
+                      <>
+                        <div className="text-xs text-slate-300">{invoice.content.title}</div>
+                        <div className="break-all text-[10px] uppercase tracking-wide text-slate-500">
+                          {invoice.content.hash}
+                        </div>
+                      </>
+                    ) : (
+                      <div className="text-xs text-slate-500">—</div>
+                    )}
+                  </td>
+                  <td className="px-3 py-3 align-top text-xs text-slate-400">{formatDate(invoice.created_at)}</td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="mt-4">
+        <PaginationControls total={total} limit={limit} page={page} onPageChange={setPage} />
+      </div>
+    </Section>
+  );
+};

src/pages/admin/sections/Status.tsx

@@ -0,0 +1,251 @@
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+
+import {
+  useAdminCacheCleanup,
+  useAdminCacheSetLimits,
+  useAdminStatus,
+  useAdminSyncSetLimits,
+} from "~/shared/services/admin";
+import { Section, InfoRow } from "../components";
+import { useAdminContext } from "../context";
+import { formatBytes, numberFormatter } from "../utils/format";
+
+type CacheLimitsFormValues = {
+  max_gb: number;
+  ttl_days: number;
+};
+
+type CacheFitFormValues = {
+  max_gb: number;
+};
+
+type SyncLimitsFormValues = {
+  max_concurrent_pins: number;
+  disk_low_watermark_pct: number;
+};
+
+export const AdminStatusPage = () => {
+  const { isAuthorized, handleRequestError, pushFlash } = useAdminContext();
+
+  const statusQuery = useAdminStatus({
+    enabled: isAuthorized,
+    refetchInterval: 30_000,
+    onError: (error) => handleRequestError(error, "Не удалось загрузить статус синхронизации"),
+  });
+
+  const cacheLimitsForm = useForm<CacheLimitsFormValues>({
+    values: {
+      max_gb: statusQuery.data?.limits.DERIVATIVE_CACHE_MAX_GB ?? 50,
+      ttl_days: statusQuery.data?.limits.DERIVATIVE_CACHE_TTL_DAYS ?? 0,
+    },
+  });
+
+  const cacheFitForm = useForm<CacheFitFormValues>({
+    defaultValues: {
+      max_gb: statusQuery.data?.limits.DERIVATIVE_CACHE_MAX_GB ?? 50,
+    },
+  });
+
+  const syncLimitsForm = useForm<SyncLimitsFormValues>({
+    values: {
+      max_concurrent_pins: statusQuery.data?.limits.SYNC_MAX_CONCURRENT_PINS ?? 4,
+      disk_low_watermark_pct: statusQuery.data?.limits.SYNC_DISK_LOW_WATERMARK_PCT ?? 90,
+    },
+  });
+
+  useEffect(() => {
+    if (!statusQuery.data) {
+      return;
+    }
+    cacheLimitsForm.reset({
+      max_gb: statusQuery.data.limits.DERIVATIVE_CACHE_MAX_GB ?? 50,
+      ttl_days: statusQuery.data.limits.DERIVATIVE_CACHE_TTL_DAYS ?? 0,
+    });
+    cacheFitForm.reset({
+      max_gb: statusQuery.data.limits.DERIVATIVE_CACHE_MAX_GB ?? 50,
+    });
+    syncLimitsForm.reset({
+      max_concurrent_pins: statusQuery.data.limits.SYNC_MAX_CONCURRENT_PINS ?? 4,
+      disk_low_watermark_pct: statusQuery.data.limits.SYNC_DISK_LOW_WATERMARK_PCT ?? 90,
+    });
+  }, [cacheFitForm, cacheLimitsForm, statusQuery.data, syncLimitsForm]);
+
+  const cacheLimitsMutation = useAdminCacheSetLimits({
+    onSuccess: async () => {
+      pushFlash({ type: "success", message: "Лимиты кэша обновлены" });
+      await statusQuery.refetch();
+    },
+    onError: (error) => handleRequestError(error, "Не удалось сохранить лимиты кэша"),
+  });
+
+  const cacheCleanupMutation = useAdminCacheCleanup({
+    onSuccess: async (data) => {
+      const removed = typeof data.removed === "number" ? `Удалено файлов: ${data.removed}` : "";
+      pushFlash({ type: "success", message: `Очистка кэша выполнена. ${removed}`.trim() });
+      await statusQuery.refetch();
+    },
+    onError: (error) => handleRequestError(error, "Ошибка очистки кэша"),
+  });
+
+  const syncLimitsMutation = useAdminSyncSetLimits({
+    onSuccess: async () => {
+      pushFlash({ type: "success", message: "Параметры синхронизации обновлены" });
+      await statusQuery.refetch();
+    },
+    onError: (error) => handleRequestError(error, "Не удалось обновить лимиты синхронизации"),
+  });
+
+  if (!statusQuery.data) {
+    return statusQuery.isLoading ? (
+      <Section id="status" title="Статус & лимиты" description="IPFS, пины и лимиты">
+        Загрузка…
+      </Section>
+    ) : null;
+  }
+
+  const { ipfs, pin_counts, derivatives, convert_backlog } = statusQuery.data;
+
+  return (
+    <Section id="status" title="Статус & лимиты" description="Информация о синхронизации, кэше и лимитах">
+      <div className="grid gap-6 xl:grid-cols-[1.8fr_1fr]">
+        <div className="space-y-6">
+          <div className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
+            <h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">IPFS</h3>
+            <dl className="mt-3 grid grid-cols-2 gap-3 text-sm">
+              <InfoRow label="Repo Size">
+                {formatBytes(Number((ipfs.repo as Record<string, unknown>)?.RepoSize ?? 0))}
+              </InfoRow>
+              <InfoRow label="Storage Max">
+                {formatBytes(Number((ipfs.repo as Record<string, unknown>)?.StorageMax ?? 0))}
+              </InfoRow>
+              <InfoRow label="Bitswap Peers">
+                {numberFormatter.format(Number((ipfs.bitswap as Record<string, unknown>)?.Peers ?? 0))}
+              </InfoRow>
+              <InfoRow label="Blocks Received">
+                {numberFormatter.format(Number((ipfs.bitswap as Record<string, unknown>)?.BlocksReceived ?? 0))}
+              </InfoRow>
+            </dl>
+          </div>
+          <div className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
+            <h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Pin-статистика</h3>
+            <dl className="mt-3 grid grid-cols-2 gap-3 text-sm">
+              {Object.entries(pin_counts).map(([key, value]) => (
+                <InfoRow key={key} label={key}>
+                  {numberFormatter.format(value)}
+                </InfoRow>
+              ))}
+              <InfoRow label="Backlog деривативов">{numberFormatter.format(convert_backlog)}</InfoRow>
+              <InfoRow label="Деривативы">{formatBytes(derivatives.total_bytes)}</InfoRow>
+            </dl>
+          </div>
+        </div>
+        <div className="space-y-6">
+          <form
+            className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800"
+            onSubmit={cacheLimitsForm.handleSubmit((values) => {
+              cacheLimitsMutation.mutate(values);
+            })}
+          >
+            <h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Лимиты кэша</h3>
+            <div className="mt-3 space-y-3 text-sm">
+              <label className="block">
+                <span className="text-xs uppercase text-slate-400">Максимум, GB</span>
+                <input
+                  type="number"
+                  step="0.1"
+                  className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-slate-100 focus:border-sky-500 focus:outline-none"
+                  {...cacheLimitsForm.register("max_gb", { valueAsNumber: true })}
+                />
+              </label>
+              <label className="block">
+                <span className="text-xs uppercase text-slate-400">TTL, дней</span>
+                <input
+                  type="number"
+                  className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-slate-100 focus:border-sky-500 focus:outline-none"
+                  {...cacheLimitsForm.register("ttl_days", { valueAsNumber: true })}
+                />
+              </label>
+            </div>
+            <button
+              type="submit"
+              className="mt-4 w-full rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-slate-700"
+              disabled={cacheLimitsMutation.isLoading}
+            >
+              {cacheLimitsMutation.isLoading ? "Сохраняем…" : "Сохранить"}
+            </button>
+          </form>
+
+          <form
+            className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800"
+            onSubmit={cacheFitForm.handleSubmit((values) => {
+              cacheCleanupMutation.mutate({ mode: "fit", max_gb: values.max_gb });
+            })}
+          >
+            <h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Очистка по размеру</h3>
+            <label className="mt-3 block text-sm">
+              <span className="text-xs uppercase text-slate-400">Целевой размер, GB</span>
+              <input
+                type="number"
+                step="0.1"
+                className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-slate-100 focus:border-sky-500 focus:outline-none"
+                {...cacheFitForm.register("max_gb", { valueAsNumber: true })}
+              />
+            </label>
+            <div className="mt-4 flex flex-col gap-2">
+              <button
+                type="submit"
+                className="w-full rounded-lg bg-sky-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-sky-500 disabled:cursor-not-allowed disabled:bg-slate-700"
+                disabled={cacheCleanupMutation.isLoading}
+              >
+                {cacheCleanupMutation.isLoading ? "Очищаем…" : "Очистить до размера"}
+              </button>
+              <button
+                type="button"
+                onClick={() => cacheCleanupMutation.mutate({ mode: "ttl" })}
+                className="w-full rounded-lg bg-amber-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-amber-500 disabled:cursor-not-allowed disabled:bg-slate-700"
+                disabled={cacheCleanupMutation.isLoading}
+              >
+                Очистить по TTL
+              </button>
+            </div>
+          </form>
+
+          <form
+            className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800"
+            onSubmit={syncLimitsForm.handleSubmit((values) => {
+              syncLimitsMutation.mutate(values);
+            })}
+          >
+            <h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Sync лимиты</h3>
+            <div className="mt-3 space-y-3 text-sm">
+              <label className="block">
+                <span className="text-xs uppercase text-slate-400">Одновременные пины</span>
+                <input
+                  type="number"
+                  className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-slate-100 focus:border-sky-500 focus:outline-none"
+                  {...syncLimitsForm.register("max_concurrent_pins", { valueAsNumber: true })}
+                />
+              </label>
+              <label className="block">
+                <span className="text-xs uppercase text-slate-400">Нижний предел диска, %</span>
+                <input
+                  type="number"
+                  className="mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-slate-100 focus:border-sky-500 focus:outline-none"
+                  {...syncLimitsForm.register("disk_low_watermark_pct", { valueAsNumber: true })}
+                />
+              </label>
+            </div>
+            <button
+              type="submit"
+              className="mt-4 w-full rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-slate-700"
+              disabled={syncLimitsMutation.isLoading}
+            >
+              {syncLimitsMutation.isLoading ? "Сохраняем…" : "Сохранить"}
+            </button>
+          </form>
+        </div>
+      </div>
+    </Section>
+  );
+};

src/pages/admin/sections/Storage.tsx

@@ -0,0 +1,121 @@
+import { useAdminStorage } from "~/shared/services/admin";
+import { Section, Badge, InfoRow, CopyButton } from "../components";
+import { useAdminContext } from "../context";
+import { formatBytes, numberFormatter } from "../utils/format";
+
+export const AdminStoragePage = () => {
+  const { isAuthorized, handleRequestError } = useAdminContext();
+
+  const storageQuery = useAdminStorage({
+    enabled: isAuthorized,
+    refetchInterval: 60_000,
+    onError: (error) => {
+      handleRequestError(error, "Не удалось загрузить данные хранилища");
+    },
+  });
+
+  if (storageQuery.isLoading && !storageQuery.data) {
+    return (
+      <Section id="storage" title="Хранилище" description="Пути, размеры и деривативы">
+        Загрузка…
+      </Section>
+    );
+  }
+
+  if (!storageQuery.data) {
+    return null;
+  }
+
+  const { directories, disk, derivatives } = storageQuery.data;
+
+  return (
+    <Section id="storage" title="Хранилище" description="Пути на диске, использование и кэш деривативов">
+      <div className="hidden overflow-x-auto rounded-2xl border border-slate-800 md:block">
+        <table className="min-w-full divide-y divide-slate-800 text-left text-sm">
+          <thead className="bg-slate-950/70 text-xs uppercase tracking-wide text-slate-400">
+            <tr>
+              <th className="px-3 py-3">Путь</th>
+              <th className="px-3 py-3">Файлов</th>
+              <th className="px-3 py-3">Размер</th>
+              <th className="px-3 py-3">Состояние</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-900/60">
+            {directories.map((dir) => (
+              <tr key={dir.path} className="hover:bg-slate-900/50">
+                <td className="px-3 py-2">
+                  <div className="flex items-center gap-2">
+                    <span className="break-all font-mono text-xs text-slate-300">{dir.path}</span>
+                    <CopyButton
+                      value={dir.path}
+                      aria-label="Скопировать путь"
+                      successMessage="Путь скопирован"
+                      className="h-6 w-6"
+                    />
+                  </div>
+                </td>
+                <td className="px-3 py-2">{numberFormatter.format(dir.file_count)}</td>
+                <td className="px-3 py-2">{formatBytes(dir.size_bytes)}</td>
+                <td className="px-3 py-2">
+                  <Badge tone={dir.exists ? "success" : "danger"}>{dir.exists ? "OK" : "Нет"}</Badge>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className="grid gap-3 md:hidden">
+        {directories.map((dir) => (
+          <div key={`dir-card-${dir.path}`} className="rounded-2xl border border-slate-800 bg-slate-950/40 p-4 shadow-inner shadow-black/30">
+            <div className="flex items-center justify-between gap-2">
+              <div className="flex items-center gap-2">
+                <span className="break-all font-mono text-[11px] text-slate-200">{dir.path}</span>
+                <CopyButton
+                  value={dir.path}
+                  aria-label="Скопировать путь"
+                  successMessage="Путь скопирован"
+                  className="h-6 w-6"
+                />
+              </div>
+              <Badge tone={dir.exists ? "success" : "danger"}>{dir.exists ? "OK" : "Нет"}</Badge>
+            </div>
+            <div className="mt-3 grid grid-cols-2 gap-3 text-xs text-slate-300">
+              <div>
+                <span className="text-slate-500">Файлов</span>
+                <div>{numberFormatter.format(dir.file_count)}</div>
+              </div>
+              <div>
+                <span className="text-slate-500">Размер</span>
+                <div>{formatBytes(dir.size_bytes)}</div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      {disk ? (
+        <div className="rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
+          <h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Снимок диска</h3>
+          <div className="mt-2 grid grid-cols-2 gap-3 text-sm">
+            <InfoRow label="Путь" copyValue={disk.path}>
+              {disk.path}
+            </InfoRow>
+            <InfoRow label="Свободно">{formatBytes(disk.free_bytes)}</InfoRow>
+            <InfoRow label="Занято">{formatBytes(disk.used_bytes)}</InfoRow>
+            <InfoRow label="Всего">{formatBytes(disk.total_bytes)}</InfoRow>
+            <InfoRow label="Загруженность">{disk.percent_used != null ? `${disk.percent_used}%` : "—"}</InfoRow>
+          </div>
+        </div>
+      ) : null}
+      <div className="rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
+        <h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Деривативы</h3>
+        <div className="mt-2 grid grid-cols-2 gap-3 text-sm sm:grid-cols-3">
+          <InfoRow label="Готово">{numberFormatter.format(derivatives.ready)}</InfoRow>
+          <InfoRow label="В обработке">{numberFormatter.format(derivatives.processing)}</InfoRow>
+          <InfoRow label="Ожидает">{numberFormatter.format(derivatives.pending)}</InfoRow>
+          <InfoRow label="С ошибкой">{numberFormatter.format(derivatives.failed)}</InfoRow>
+          <InfoRow label="Суммарно">{formatBytes(derivatives.total_bytes)}</InfoRow>
+        </div>
+      </div>
+    </Section>
+  );
+};

src/pages/admin/sections/System.tsx

@@ -0,0 +1,136 @@
+import { useAdminSystem } from "~/shared/services/admin";
+import { Section, InfoRow, Badge, CopyButton } from "../components";
+import { useAdminContext } from "../context";
+import { formatDate, formatUnknown, numberFormatter } from "../utils/format";
+
+export const AdminSystemPage = () => {
+  const { isAuthorized, handleRequestError } = useAdminContext();
+
+  const systemQuery = useAdminSystem({
+    enabled: isAuthorized,
+    refetchInterval: 60_000,
+    onError: (error) => handleRequestError(error, "Не удалось загрузить системную информацию"),
+  });
+
+  if (!systemQuery.data) {
+    return systemQuery.isLoading ? (
+      <Section id="system" title="Система" description="Переменные окружения и конфиг">
+        Загрузка…
+      </Section>
+    ) : null;
+  }
+
+  const { env, service_config, services, blockchain_tasks, latest_index_items, telegram_bots } = systemQuery.data;
+  const bots = telegram_bots ?? [];
+
+  return (
+    <Section id="system" title="Система" description="Ключевые переменные и внутренние конфиги">
+      <div className="grid gap-6 lg:grid-cols-2">
+        <div className="rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
+          <h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Окружение</h3>
+          <dl className="mt-3 space-y-2">
+            {Object.entries(env).map(([key, value]) => (
+              <InfoRow key={key} label={key}>
+                {formatUnknown(value)}
+              </InfoRow>
+            ))}
+          </dl>
+        </div>
+        <div className="rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
+          <h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Telegram-боты</h3>
+          {bots.length === 0 ? (
+            <p className="mt-3 text-xs text-slate-500">Боты не настроены.</p>
+          ) : (
+            <ul className="mt-3 space-y-3 text-sm text-slate-200">
+              {bots.map((bot) => (
+                <li
+                  key={`${bot.role}-${bot.username}`}
+                  className="flex flex-col gap-2 rounded-lg border border-slate-800 bg-slate-900/50 px-3 py-3"
+                >
+                  <div className="flex flex-wrap items-center gap-3">
+                    <Badge tone="neutral">{bot.role}</Badge>
+                    <span className="font-semibold">@{bot.username}</span>
+                    <CopyButton
+                      value={bot.username}
+                      aria-label="Скопировать username бота"
+                      successMessage="Username скопирован"
+                      className="h-6 w-6"
+                    />
+                  </div>
+                  <div className="flex flex-wrap items-center gap-3 text-xs text-slate-400">
+                    <span>t.me/{bot.username}</span>
+                    <a
+                      href={bot.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="rounded-lg border border-sky-500/40 px-3 py-1 text-[11px] font-semibold text-sky-200 transition hover:border-sky-400 hover:text-white"
+                    >
+                      Открыть бота
+                    </a>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+        <div className="rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
+          <h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Задачи блокчейна</h3>
+          <dl className="mt-3 grid grid-cols-2 gap-3">
+            {Object.entries(blockchain_tasks).map(([key, value]) => (
+              <InfoRow key={key} label={key}>
+                {numberFormatter.format(value)}
+              </InfoRow>
+            ))}
+          </dl>
+          <h4 className="mt-4 text-xs uppercase tracking-wide text-slate-500">Последние индексы</h4>
+          <ul className="mt-2 space-y-2">
+            {latest_index_items.length === 0 ? (
+              <li className="text-xs text-slate-500">Список пуст</li>
+            ) : (
+              latest_index_items.map((item) => (
+                <li key={item.encrypted_cid || item.updated_at} className="rounded-lg bg-slate-900/60 px-3 py-2 text-xs">
+                  <div className="font-mono text-slate-200">{item.encrypted_cid ?? "—"}</div>
+                  <div className="text-slate-500">{formatDate(item.updated_at)}</div>
+                </li>
+              ))
+            )}
+          </ul>
+        </div>
+      </div>
+      <div className="rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
+        <h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">ServiceConfig</h3>
+        <div className="mt-3 overflow-x-auto">
+          <table className="min-w-full divide-y divide-slate-800 text-left text-sm">
+            <thead className="bg-slate-950/70 text-xs uppercase tracking-wide text-slate-400">
+              <tr>
+                <th className="px-3 py-3">Ключ</th>
+                <th className="px-3 py-3">Значение</th>
+                <th className="px-3 py-3">RAW</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-900/60">
+              {service_config.map((item) => (
+                <tr key={item.key}>
+                  <td className="px-3 py-2 font-mono text-xs text-slate-300">{item.key}</td>
+                  <td className="px-3 py-2">{formatUnknown(item.value)}</td>
+                  <td className="px-3 py-2 font-mono text-xs text-slate-500">{formatUnknown(item.raw)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div className="rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
+        <h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Сервисы</h3>
+        <ul className="mt-2 space-y-2">
+          {services.map((service) => (
+            <li key={service.name} className="flex items-center justify-between rounded-lg bg-slate-900/40 px-3 py-2">
+              <span className="text-sm text-slate-200">{service.name}</span>
+              <Badge tone={service.status?.includes("working") ? "success" : "neutral"}>{service.status ?? "—"}</Badge>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </Section>
+  );
+};

src/pages/admin/sections/Uploads.tsx

@@ -0,0 +1,706 @@
+import { useEffect, useMemo, useState } from "react";
+import clsx from "clsx";
+import { useLocation } from "react-router-dom";
+
+import {
+  useAdminUploads,
+  type AdminUploadsContent,
+  type AdminUploadsContentFlags,
+} from "~/shared/services/admin";
+import { Section, Badge, InfoRow, CopyButton } from "../components";
+import { useAdminContext } from "../context";
+import { formatBytes, formatDate, numberFormatter } from "../utils/format";
+
+type UploadCategory = "issues" | "processing" | "ready" | "unindexed";
+type UploadFilter = "all" | UploadCategory;
+
+type UploadDecoration = {
+  item: AdminUploadsContent;
+  categories: Set<UploadCategory>;
+  searchText: string;
+  hasIssue: boolean;
+  isReady: boolean;
+  isProcessing: boolean;
+  isUnindexed: boolean;
+  flags: AdminUploadsContentFlags | null;
+};
+
+const numberCompact = new Intl.NumberFormat("ru-RU", { notation: "compact" });
+
+const computeFlags = (item: AdminUploadsContent): AdminUploadsContentFlags => {
+  const normalize = (value: string | null | undefined) => (value ?? "").toLowerCase();
+  const uploadState = normalize(item.status.upload_state);
+  const conversionState = normalize(item.status.conversion_state);
+  const ipfsState = normalize(item.status.ipfs_state);
+  const pinState = normalize(item.ipfs?.pin_state);
+  const derivativeStates = item.derivatives.map((derivative) => normalize(derivative.status));
+  const statusValues = [uploadState, conversionState, ipfsState, pinState, ...derivativeStates];
+
+  const hasIssue =
+    statusValues.some((value) => value.includes("fail") || value.includes("error") || value.includes("timeout")) ||
+    item.upload_history.some((event) => Boolean(event.error)) ||
+    item.derivatives.some((derivative) => Boolean(derivative.error)) ||
+    Boolean(item.ipfs?.pin_error);
+
+  const isOnchainIndexed = item.status.onchain?.indexed ?? false;
+  const isUnindexed = !isOnchainIndexed;
+
+  const conversionDone =
+    conversionState.includes("converted") ||
+    conversionState.includes("ready") ||
+    derivativeStates.some((state) => state.includes("ready") || state.includes("converted") || state.includes("complete"));
+
+  const ipfsDone =
+    ipfsState.includes("pinned") ||
+    ipfsState.includes("ready") ||
+    pinState.includes("pinned") ||
+    pinState.includes("ready");
+
+  const isReady = !hasIssue && conversionDone && ipfsDone && isOnchainIndexed;
+
+  const hasProcessingKeywords =
+    uploadState.includes("pending") ||
+    uploadState.includes("process") ||
+    uploadState.includes("queue") ||
+    uploadState.includes("upload") ||
+    conversionState.includes("pending") ||
+    conversionState.includes("process") ||
+    conversionState.includes("queue") ||
+    conversionState.includes("convert") ||
+    ipfsState.includes("pin") ||
+    ipfsState.includes("sync") ||
+    pinState.includes("pin") ||
+    pinState.includes("sync") ||
+    derivativeStates.some((state) => state.includes("pending") || state.includes("process") || state.includes("queue"));
+
+  const isProcessingCandidate = !isReady && !hasIssue && hasProcessingKeywords;
+  const isProcessing = isProcessingCandidate || (!isReady && !hasIssue && !isProcessingCandidate);
+
+  return {
+    issues: hasIssue,
+    processing: isProcessing,
+    ready: isReady,
+    unindexed: isUnindexed,
+  };
+};
+
+const classifyUpload = (item: AdminUploadsContent): UploadDecoration => {
+  const flags = item.flags ?? computeFlags(item);
+  const categories = new Set<UploadCategory>();
+  if (flags.issues) {
+    categories.add("issues");
+  }
+  if (flags.processing) {
+    categories.add("processing");
+  }
+  if (flags.ready) {
+    categories.add("ready");
+  }
+  if (flags.unindexed) {
+    categories.add("unindexed");
+  }
+  if (categories.size === 0) {
+    if (!(item.status.onchain?.indexed ?? false)) {
+      categories.add("unindexed");
+    }
+    categories.add("processing");
+  }
+
+  const searchParts: Array<string | number | null | undefined> = [
+    item.title,
+    item.description,
+    item.encrypted_cid,
+    item.metadata_cid,
+    item.content_hash,
+    item.status.onchain?.item_address,
+    item.stored?.owner_address,
+  ];
+  if (item.stored?.user) {
+    const user = item.stored.user;
+    searchParts.push(user.id, user.telegram_id, user.username, user.first_name, user.last_name);
+  }
+  item.distribution?.nodes?.forEach((node) => {
+    searchParts.push(node.host, node.public_host, node.content.encrypted_cid);
+  });
+  const searchText = searchParts
+    .filter((value) => value !== null && value !== undefined && `${value}`.length > 0)
+    .map((value) => `${value}`.toLowerCase())
+    .join(" ");
+
+  return {
+    item,
+    categories,
+    searchText,
+    hasIssue: Boolean(flags.issues),
+    isReady: Boolean(flags.ready),
+    isProcessing: Boolean(flags.processing),
+    isUnindexed: Boolean(flags.unindexed),
+    flags: item.flags ?? flags,
+  };
+};
+
+const getProblemMessages = (item: AdminUploadsContent): string[] => {
+  const messages: string[] = [];
+  for (let index = item.upload_history.length - 1; index >= 0; index -= 1) {
+    const event = item.upload_history[index];
+    if (event.error) {
+      messages.push(`Загрузка: ${event.error}`);
+      break;
+    }
+  }
+  const derivativeError = item.derivatives.find((derivative) => Boolean(derivative.error));
+  if (derivativeError?.error) {
+    messages.push(`Дериватив ${derivativeError.kind}: ${derivativeError.error}`);
+  }
+  if (item.ipfs?.pin_error) {
+    messages.push(`IPFS: ${item.ipfs.pin_error}`);
+  }
+  const conversionState = item.status.conversion_state;
+  if (!messages.length && conversionState && conversionState.toLowerCase().includes("fail")) {
+    messages.push(`Конверсия: ${conversionState}`);
+  }
+  const uploadState = item.status.upload_state;
+  if (!messages.length && uploadState && uploadState.toLowerCase().includes("fail")) {
+    messages.push(`Загрузка: ${uploadState}`);
+  }
+  return messages;
+};
+
+const UploadCard = ({ decoration }: { decoration: UploadDecoration }) => {
+  const { item, flags } = decoration;
+  const problemMessages = decoration.hasIssue ? getProblemMessages(item) : [];
+  const derivativeDownloads = item.links.download_derivatives ?? [];
+  const distributionNodes = item.distribution?.nodes ?? [];
+
+  return (
+    <div className="overflow-hidden rounded-2xl border border-slate-800 bg-slate-950/40 p-5 shadow-inner shadow-black/40">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <h3 className="text-lg font-semibold text-slate-100">{item.title || "Без названия"}</h3>
+          <p className="text-xs text-slate-400">{item.description || "Описание не задано"}</p>
+          <div className="mt-2 flex flex-wrap items-center gap-2 text-[11px] uppercase tracking-wide text-slate-500">
+            {flags?.ready ? <Badge tone="success">готово</Badge> : null}
+            {flags?.issues ? <Badge tone="danger">проблемы</Badge> : null}
+            {flags?.processing ? <Badge tone="warn">в обработке</Badge> : null}
+            {flags?.unindexed ? <Badge tone="neutral">без индекса</Badge> : null}
+          </div>
+        </div>
+        <div className="flex flex-col items-end gap-1 text-xs text-slate-400">
+          <span>{formatDate(item.created_at)}</span>
+          <span>{formatDate(item.updated_at)}</span>
+          {item.size.plain ? <span>{formatBytes(item.size.plain)}</span> : null}
+        </div>
+      </div>
+
+      <div className="mt-4 grid gap-4 lg:grid-cols-[1.3fr_1fr]">
+        <div className="space-y-4">
+          <div className="rounded-xl bg-slate-900/60 p-4 ring-1 ring-slate-800">
+            <h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">On-chain</h4>
+            <div className="mt-2 grid gap-2 text-xs text-slate-300 sm:grid-cols-2">
+              <InfoRow label="Encrypted CID" copyValue={item.encrypted_cid}>
+                <span className="break-all font-mono">{item.encrypted_cid}</span>
+              </InfoRow>
+              <InfoRow label="Metadata CID" copyValue={item.metadata_cid ?? null}>
+                <span className="break-all font-mono">{item.metadata_cid ?? "—"}</span>
+              </InfoRow>
+              <InfoRow label="Content hash" copyValue={item.content_hash ?? null}>
+                <span className="break-all font-mono">{item.content_hash ?? "—"}</span>
+              </InfoRow>
+              <InfoRow label="On-chain индекс">
+                {item.status.onchain?.indexed ? (
+                  <span className="inline-flex items-center gap-2">
+                    <Badge tone="success">indexed</Badge>
+                    {item.status.onchain?.onchain_index ?? "—"}
+                  </span>
+                ) : (
+                  <Badge tone="warn">не опубликовано</Badge>
+                )}
+              </InfoRow>
+              <InfoRow label="On-chain адрес" copyValue={item.status.onchain?.item_address ?? null}>
+                <span className="break-all font-mono text-xs">{item.status.onchain?.item_address ?? "—"}</span>
+              </InfoRow>
+            </div>
+          </div>
+
+          <div className="rounded-xl bg-slate-900/60 p-4 ring-1 ring-slate-800">
+            <h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">Статусы</h4>
+            <div className="mt-2 grid gap-3 text-xs text-slate-300 md:grid-cols-2">
+              <div>
+                <p className="font-semibold text-slate-200">Загрузка</p>
+                <p>{item.status.upload_state ?? "—"}</p>
+              </div>
+              <div>
+                <p className="font-semibold text-slate-200">Конверсия</p>
+                <p>{item.status.conversion_state ?? "—"}</p>
+              </div>
+              <div>
+                <p className="font-semibold text-slate-200">IPFS</p>
+                <p>{item.status.ipfs_state ?? "—"}</p>
+              </div>
+            </div>
+          </div>
+
+          {distributionNodes.length > 0 ? (
+            <div className="rounded-xl bg-slate-900/60 p-4 ring-1 ring-slate-800">
+              <h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">Синхронизация</h4>
+              <ul className="mt-3 space-y-3 text-xs text-slate-300">
+                {distributionNodes.map((node) => {
+                  const nodeTitle = node.is_local ? "Эта нода" : node.public_host ?? node.host ?? "Неизвестная нода";
+                  const sizeLabel = node.content.size_bytes ? formatBytes(node.content.size_bytes) : null;
+                  const updatedLabel = node.content.updated_at ? formatDate(node.content.updated_at) : null;
+                  const lastSeenLabel = node.last_seen ? formatDate(node.last_seen) : null;
+                  return (
+                    <li key={`${item.encrypted_cid}-${node.node_id ?? "local"}`} className="rounded-lg border border-slate-800 bg-slate-950/50 p-3">
+                      <div className="flex flex-wrap items-start justify-between gap-2">
+                        <div className="space-y-1">
+                          <div className="flex flex-wrap items-center gap-2 text-[11px] uppercase tracking-wide text-slate-400">
+                            <span className="font-semibold text-slate-200">{nodeTitle}</span>
+                            <Badge tone={node.is_local ? "success" : "neutral"}>{node.is_local ? "локально" : "удаленно"}</Badge>
+                            {node.role ? <Badge tone="neutral">{node.role}</Badge> : null}
+                          </div>
+                          <div className="space-y-1 text-[11px] text-slate-400">
+                            {sizeLabel ? <p>Размер: {sizeLabel}</p> : null}
+                            {updatedLabel ? <p>Обновлено: {updatedLabel}</p> : null}
+                            {lastSeenLabel && !node.is_local ? <p>Нода активна: {lastSeenLabel}</p> : null}
+                            {node.version ? <p>Версия: {node.version}</p> : null}
+                          </div>
+                        </div>
+                        <div className="flex flex-wrap items-center gap-2">
+                          {node.links.web_view ? (
+                            <a
+                              href={node.links.web_view}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="rounded-lg border border-emerald-500/40 px-3 py-1 text-[11px] font-semibold text-emerald-200 transition hover:border-emerald-400 hover:text-emerald-100"
+                            >
+                              Web
+                            </a>
+                          ) : null}
+                          {node.links.api_view ? (
+                            <>
+                              <a
+                                href={node.links.api_view}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="rounded-lg border border-indigo-500/40 px-3 py-1 text-[11px] font-semibold text-indigo-200 transition hover:border-indigo-400 hover:text-indigo-100"
+                              >
+                                API
+                              </a>
+                              <CopyButton
+                                className="border border-indigo-500/40 text-indigo-200 hover:border-indigo-400 hover:text-indigo-100"
+                                value={node.links.api_view}
+                              >
+                                копировать API
+                              </CopyButton>
+                            </>
+                          ) : null}
+                          {node.links.gateway_view ? (
+                            <a
+                              href={node.links.gateway_view}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="rounded-lg border border-amber-500/40 px-3 py-1 text-[11px] font-semibold text-amber-200 transition hover:border-amber-400 hover:text-amber-100"
+                            >
+                              Gateway
+                            </a>
+                          ) : null}
+                        </div>
+                      </div>
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          ) : null}
+
+          <div className="rounded-xl bg-slate-900/60 p-4 ring-1 ring-slate-800">
+            <h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">История загрузки</h4>
+            <ul className="mt-2 space-y-2 text-xs text-slate-300">
+              {item.upload_history.map((event) => (
+                <li key={`${item.encrypted_cid}-${event.filename}-${event.state}`} className="rounded-lg border border-slate-800 bg-slate-950/40 px-3 py-2">
+                  <div className="flex flex-wrap items-center justify-between gap-2">
+                    <span className="font-semibold text-slate-200">{event.state}</span>
+                    <span className="text-[11px] text-slate-500">{formatDate(event.at)}</span>
+                  </div>
+                  {event.error ? <p className="mt-1 text-rose-300">{event.error}</p> : null}
+                  {event.filename ? <p className="mt-1 text-slate-400">{event.filename}</p> : null}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {problemMessages.length > 0 ? (
+            <div className="rounded-xl border border-rose-500/40 bg-rose-500/10 p-4 text-xs text-rose-100">
+              <h4 className="font-semibold uppercase tracking-wide">Проблемы</h4>
+              <ul className="mt-2 space-y-1">
+                {problemMessages.map((message, index) => (
+                  <li key={`${item.encrypted_cid}-issue-${index}`}>{message}</li>
+                ))}
+              </ul>
+            </div>
+          ) : null}
+        </div>
+
+        <div className="space-y-4">
+          <div className="rounded-xl bg-slate-900/40 p-4 ring-1 ring-slate-800">
+            <h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">Деривативы</h4>
+            <ul className="mt-2 space-y-2 text-xs text-slate-300">
+              {item.derivatives.map((derivative) => (
+                <li key={`${item.encrypted_cid}-${derivative.kind}`} className="rounded-lg border border-slate-800 bg-slate-950/40 px-3 py-2">
+                  <div className="flex items-center justify-between">
+                    <span className="font-semibold text-slate-200">{derivative.kind}</span>
+                    <Badge tone={derivative.status === "ready" ? "success" : derivative.status === "failed" ? "danger" : "warn"}>
+                      {derivative.status}
+                    </Badge>
+                  </div>
+                  <div className="mt-1 space-y-1 text-[11px] text-slate-400">
+                    <div>Размер: {formatBytes(derivative.size_bytes)}</div>
+                    <div>Попытки: {derivative.attempts}</div>
+                    <div>Создан: {formatDate(derivative.created_at)}</div>
+                    <div>Обновлён: {formatDate(derivative.updated_at)}</div>
+                    {derivative.error ? <div className="text-rose-300">{derivative.error}</div> : null}
+                    {derivative.download_url ? (
+                      <a
+                        href={derivative.download_url}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="inline-flex items-center text-sky-300 hover:text-sky-200"
+                      >
+                        Скачать
+                      </a>
+                    ) : null}
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="rounded-xl bg-slate-900/40 p-4 ring-1 ring-slate-800">
+            <h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">IPFS</h4>
+            {item.ipfs ? (
+              <div className="mt-2 text-xs text-slate-300">
+                <div>Статус: {item.ipfs.pin_state ?? "—"}</div>
+                <div>Ошибка: {item.ipfs.pin_error ?? "—"}</div>
+                <div>Fetched: {formatBytes(item.ipfs.bytes_fetched)}</div>
+                <div>Total: {formatBytes(item.ipfs.bytes_total)}</div>
+                <div className="text-slate-500">{formatDate(item.ipfs.updated_at)}</div>
+              </div>
+            ) : (
+              <p className="mt-2 text-xs text-slate-500">Нет информации.</p>
+            )}
+          </div>
+
+          <div className="rounded-xl bg-slate-900/40 p-4 ring-1 ring-slate-800">
+            <h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">Хранение</h4>
+            {item.stored ? (
+              <div className="mt-2 space-y-1 text-xs text-slate-300">
+                <div className="flex flex-wrap items-center gap-2">
+                  <span className="font-semibold text-slate-200">ID:</span>
+                  <span className="break-all font-mono">{item.stored.stored_id ?? "—"}</span>
+                  {item.stored.stored_id ? (
+                    <CopyButton
+                      value={item.stored.stored_id}
+                      aria-label="Скопировать ID хранения"
+                      successMessage="ID хранения скопирован"
+                      className="h-6 w-6"
+                    />
+                  ) : null}
+                </div>
+                <div className="flex flex-wrap items-center gap-2">
+                  <span className="font-semibold text-slate-200">Владелец:</span>
+                  <span className="break-all font-mono text-[11px] text-slate-300">{item.stored.owner_address ?? "—"}</span>
+                  {item.stored.owner_address ? (
+                    <CopyButton
+                      value={item.stored.owner_address}
+                      aria-label="Скопировать адрес владельца хранения"
+                      successMessage="Адрес владельца скопирован"
+                      className="h-6 w-6"
+                    />
+                  ) : null}
+                </div>
+                <div>Тип: {item.stored.type ?? "—"}</div>
+                {item.stored.user ? (
+                  <div className="flex flex-wrap items-center gap-2 text-slate-400">
+                    <span>Пользователь #{item.stored.user.id}</span>
+                    <CopyButton
+                      value={item.stored.user.id}
+                      aria-label="Скопировать ID пользователя"
+                      successMessage="ID пользователя скопирован"
+                      className="h-6 w-6"
+                    />
+                    <span>· TG {item.stored.user.telegram_id}</span>
+                    <CopyButton
+                      value={item.stored.user.telegram_id}
+                      aria-label="Скопировать Telegram ID"
+                      successMessage="Telegram ID скопирован"
+                      className="h-6 w-6"
+                    />
+                  </div>
+                ) : null}
+                {item.stored.download_url ? (
+                  <a
+                    href={item.stored.download_url}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="inline-flex items-center gap-2 text-xs font-semibold text-sky-300 hover:text-sky-200"
+                  >
+                    Скачать оригинал
+                  </a>
+                ) : null}
+              </div>
+            ) : (
+              <p className="mt-2 text-xs text-slate-500">В хранилище не найден.</p>
+            )}
+          </div>
+
+          {derivativeDownloads.length > 0 ? (
+            <div className="rounded-xl bg-slate-900/40 p-4 ring-1 ring-slate-800">
+              <h4 className="text-xs font-semibold uppercase tracking-wide text-slate-500">Прямые ссылки</h4>
+              <ul className="mt-2 space-y-1 text-xs text-slate-300">
+                {derivativeDownloads.map((entry) => (
+                  <li key={`${item.encrypted_cid}-link-${entry.kind}`}>
+                    <a href={entry.url} target="_blank" rel="noreferrer" className="text-sky-300 hover:text-sky-200">
+                      {entry.kind} · {entry.size_bytes ? formatBytes(entry.size_bytes) : "размер неизвестен"}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const AdminUploadsPage = () => {
+  const { isAuthorized, handleRequestError } = useAdminContext();
+  const location = useLocation();
+  const [uploadsFilter, setUploadsFilter] = useState<UploadFilter>("all");
+  const initialUploadsSearch = useMemo(() => {
+    const params = new URLSearchParams(location.search);
+    return params.get("search") ?? "";
+  }, [location.search]);
+  const [uploadsSearch, setUploadsSearch] = useState(initialUploadsSearch);
+
+  useEffect(() => {
+    setUploadsSearch(initialUploadsSearch);
+  }, [initialUploadsSearch]);
+
+  const normalizedUploadsSearch = uploadsSearch.trim();
+  const hasUploadsSearch = normalizedUploadsSearch.length > 0;
+  const isUploadsFilterActive = uploadsFilter !== "all";
+  const uploadsScanLimit = isUploadsFilterActive || hasUploadsSearch ? 200 : 100;
+
+  const uploadsQuery = useAdminUploads(
+    {
+      filter: isUploadsFilterActive ? uploadsFilter : undefined,
+      search: hasUploadsSearch ? normalizedUploadsSearch : undefined,
+      limit: 40,
+      scan: uploadsScanLimit,
+    },
+    {
+      enabled: isAuthorized,
+      keepPreviousData: true,
+      refetchInterval: 30_000,
+      onError: (error) => handleRequestError(error, "Не удалось загрузить список загрузок"),
+    },
+  );
+
+  const uploadContents = uploadsQuery.data?.contents ?? [];
+  const decoratedContents = useMemo(() => uploadContents.map((item) => classifyUpload(item)), [uploadContents]);
+
+  if (uploadsQuery.isLoading && !uploadsQuery.data) {
+    return (
+      <Section id="uploads" title="Загрузки" description="Мониторинг загрузок и конвертации">
+        Загрузка…
+      </Section>
+    );
+  }
+
+  if (!uploadsQuery.data) {
+    return null;
+  }
+
+  const { states, total, recent, matching_total: matchingTotalRaw, category_totals: categoryTotalsRaw } = uploadsQuery.data;
+
+  const categoryTotals = categoryTotalsRaw ?? {};
+  const categoryCounts: Record<UploadCategory, number> = {
+    issues: categoryTotals.issues ?? 0,
+    processing: categoryTotals.processing ?? 0,
+    ready: categoryTotals.ready ?? 0,
+    unindexed: categoryTotals.unindexed ?? 0,
+  };
+
+  const searchNeedle = normalizedUploadsSearch.toLowerCase();
+  const filteredEntries = decoratedContents.filter((entry) => {
+    if (uploadsFilter !== "all" && !entry.categories.has(uploadsFilter)) {
+      return false;
+    }
+    if (searchNeedle && !entry.searchText.includes(searchNeedle)) {
+      return false;
+    }
+    return true;
+  });
+
+  const filteredContents = filteredEntries.map((entry) => entry.item);
+  const totalMatches = typeof matchingTotalRaw === "number" ? matchingTotalRaw : filteredEntries.length;
+  const filtersActive = isUploadsFilterActive || hasUploadsSearch;
+  const noMatches = totalMatches === 0;
+  const issueEntries = filteredEntries.filter((entry) => entry.categories.has("issues")).slice(0, 3);
+  const filterOptions: Array<{ id: UploadFilter; label: string; count: number }> = [
+    { id: "all", label: "Все", count: totalMatches },
+    { id: "issues", label: "Ошибки", count: categoryCounts.issues },
+    { id: "processing", label: "В обработке", count: categoryCounts.processing },
+    { id: "ready", label: "Готово", count: categoryCounts.ready },
+    { id: "unindexed", label: "Без on-chain", count: categoryCounts.unindexed },
+  ];
+
+  const handleResetFilters = () => {
+    setUploadsFilter("all");
+    setUploadsSearch("");
+  };
+
+  return (
+    <Section
+      id="uploads"
+      title="Загрузки"
+      description="Полная картина обработки контента: цепочка загрузки, конверсия, IPFS и публикация"
+      actions={
+        <button
+          type="button"
+          className="rounded-lg bg-slate-800 px-3 py-2 text-xs font-semibold text-slate-200 ring-1 ring-slate-700 transition hover:bg-slate-700"
+          onClick={() => uploadsQuery.refetch()}
+          disabled={uploadsQuery.isFetching}
+        >
+          {uploadsQuery.isFetching ? "Обновляем…" : "Обновить"}
+        </button>
+      }
+    >
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        {Object.entries(states ?? {}).map(([key, value]) => (
+          <div key={key} className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
+            <p className="text-xs uppercase tracking-wide text-slate-500">{key}</p>
+            <p className="mt-2 text-lg font-semibold text-slate-100">{numberFormatter.format(value)}</p>
+          </div>
+        ))}
+        <div className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
+          <p className="text-xs uppercase tracking-wide text-slate-500">Всего</p>
+          <p className="mt-2 text-lg font-semibold text-slate-100">{numberFormatter.format(total)}</p>
+          <p className="mt-1 text-xs text-slate-500">Отфильтровано: {numberFormatter.format(filteredContents.length)}</p>
+        </div>
+        <div className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800">
+          <p className="text-xs uppercase tracking-wide text-slate-500">Активные задачи</p>
+          <p className="mt-2 text-lg font-semibold text-slate-100">{numberCompact.format(categoryCounts.processing)}</p>
+          <p className="mt-1 text-xs text-slate-500">{numberFormatter.format(categoryCounts.issues)} с ошибками</p>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="flex flex-wrap items-center gap-2">
+          {filterOptions.map((option) => {
+            const isActive = option.id === uploadsFilter;
+            return (
+              <button
+                key={`upload-filter-${option.id}`}
+                type="button"
+                onClick={() => setUploadsFilter(option.id)}
+                className={clsx(
+                  "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold transition",
+                  isActive
+                    ? "border-sky-500 bg-sky-500/20 text-sky-100 shadow-inner shadow-sky-500/20"
+                    : "border-slate-700 text-slate-300 hover:border-slate-500 hover:text-slate-100",
+                )}
+              >
+                {option.label}
+                <span className="rounded-full bg-slate-900/60 px-2 py-0.5 text-[10px] font-semibold tracking-wide text-slate-300">
+                  {numberFormatter.format(option.count)}
+                </span>
+              </button>
+            );
+          })}
+          {filtersActive ? (
+            <button
+              type="button"
+              onClick={handleResetFilters}
+              className="inline-flex items-center rounded-full border border-slate-700 px-3 py-1 text-xs font-semibold text-slate-300 transition hover:border-slate-500 hover:text-slate-100"
+            >
+              Сбросить
+            </button>
+          ) : null}
+        </div>
+        <div className="relative w-full md:w-72">
+          <input
+            type="search"
+            value={uploadsSearch}
+            onChange={(event) => setUploadsSearch(event.target.value)}
+            placeholder="Название, CID, пользователь…"
+            className="w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-500 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
+          />
+        </div>
+      </div>
+
+      {issueEntries.length > 0 ? (
+        <div className="rounded-xl border border-amber-500/40 bg-amber-500/10 p-4 text-xs text-amber-100">
+          <h3 className="text-sm font-semibold text-amber-50">Последние проблемы</h3>
+          <ul className="mt-2 space-y-1">
+            {issueEntries.map((entry) => (
+              <li key={`issue-${entry.item.encrypted_cid}`} className="flex items-center justify-between gap-2">
+                <span className="truncate text-sm text-amber-50">{entry.item.title || entry.item.encrypted_cid}</span>
+                <span className="text-[11px] text-amber-200">{formatDate(entry.item.updated_at)}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+
+      {noMatches ? (
+        <div className="rounded-xl border border-slate-800 bg-slate-950/40 p-6 text-sm text-slate-400">
+          Под подходящие условия не найдено загрузок.
+        </div>
+      ) : (
+        <div className="grid gap-5">
+          {filteredEntries.map((entry) => (
+            <UploadCard key={entry.item.encrypted_cid} decoration={entry} />
+          ))}
+        </div>
+      )}
+
+      <div className="rounded-xl bg-slate-950/40 p-4 ring-1 ring-slate-800">
+        <h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">Последние события</h3>
+        <div className="mt-2 overflow-x-auto">
+          <table className="min-w-full divide-y divide-slate-800 text-left text-xs">
+            <thead className="bg-slate-950/70 text-[11px] uppercase tracking-wide text-slate-400">
+              <tr>
+                <th className="px-3 py-2">ID</th>
+                <th className="px-3 py-2">Файл</th>
+                <th className="px-3 py-2">Размер</th>
+                <th className="px-3 py-2">Состояние</th>
+                <th className="px-3 py-2">CID</th>
+                <th className="px-3 py-2">Ошибка</th>
+                <th className="px-3 py-2">Обновлено</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-900/60">
+              {recent.map((task) => (
+                <tr key={task.id} className="hover:bg-slate-900/50">
+                  <td className="px-3 py-2 font-mono text-[10px] text-slate-400">{task.id}</td>
+                  <td className="px-3 py-2">{task.filename ?? "—"}</td>
+                  <td className="px-3 py-2">{formatBytes(task.size_bytes)}</td>
+                  <td className="px-3 py-2">
+                    <Badge tone={task.state === "done" ? "success" : task.state === "failed" ? "danger" : "warn"}>
+                      {task.state}
+                    </Badge>
+                  </td>
+                  <td className="px-3 py-2 font-mono text-[10px] text-slate-500">{task.encrypted_cid ?? "—"}</td>
+                  <td className="px-3 py-2 text-rose-200">{task.error ?? "—"}</td>
+                  <td className="px-3 py-2 text-slate-400">{formatDate(task.updated_at)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </Section>
+  );
+};

src/pages/admin/sections/Users.tsx

@@ -0,0 +1,406 @@
+import { useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router-dom";
+
+import { useAdminUsers, useAdminSetUserAdmin } from "~/shared/services/admin";
+import { Section, PaginationControls, CopyButton, Badge } from "../components";
+import { useAdminContext } from "../context";
+import { formatDate, formatStars, numberFormatter } from "../utils/format";
+
+export const AdminUsersPage = () => {
+  const { isAuthorized, handleRequestError, pushFlash } = useAdminContext();
+  const location = useLocation();
+  const initialSearchValue = useMemo(() => {
+    const params = new URLSearchParams(location.search);
+    return params.get("search") ?? "";
+  }, [location.search]);
+  const [search, setSearch] = useState(initialSearchValue);
+  const [page, setPage] = useState(0);
+  const [pendingUserId, setPendingUserId] = useState<number | null>(null);
+
+  const limit = 50;
+  const normalizedSearch = search.trim();
+
+  const usersQuery = useAdminUsers(
+    {
+      limit,
+      offset: page * limit,
+      search: normalizedSearch || undefined,
+    },
+    {
+      enabled: isAuthorized,
+      keepPreviousData: true,
+      refetchInterval: 60_000,
+      onError: (error) => handleRequestError(error, "Не удалось загрузить пользователей"),
+    },
+  );
+
+  const setUserAdmin = useAdminSetUserAdmin({
+    onMutate: ({ user_id }) => {
+      setPendingUserId(user_id);
+    },
+    onSuccess: ({ user }) => {
+      pushFlash({
+        type: "success",
+        message: user.is_admin ? "Пользователь назначен администратором" : "Права администратора сняты",
+      });
+      void usersQuery.refetch();
+    },
+    onError: (error) => {
+      handleRequestError(error, "Не удалось обновить права администратора");
+    },
+    onSettled: () => {
+      setPendingUserId(null);
+    },
+  });
+
+  const handleToggleAdmin = (userId: number, nextValue: boolean) => {
+    setUserAdmin.mutate({ user_id: userId, is_admin: nextValue });
+  };
+
+  useEffect(() => {
+    setSearch(initialSearchValue);
+  }, [initialSearchValue]);
+
+  useEffect(() => {
+    setPage(0);
+  }, [normalizedSearch]);
+
+  if (usersQuery.isLoading && !usersQuery.data) {
+    return (
+      <Section id="users" title="Пользователи" description="Мониторинг пользователей, кошельков и активности">
+        Загрузка…
+      </Section>
+    );
+  }
+
+  if (!usersQuery.data) {
+    return (
+      <Section id="users" title="Пользователи" description="Мониторинг пользователей, кошельков и активности">
+        <p className="text-sm text-slate-400">Выберите вкладку «Пользователи», чтобы загрузить данные.</p>
+      </Section>
+    );
+  }
+
+  const { items, summary, total } = usersQuery.data;
+  const summaryCards = [
+    {
+      label: "Всего пользователей",
+      value: numberFormatter.format(total),
+      helper: `На странице: ${numberFormatter.format(summary.users_returned)}`,
+    },
+    {
+      label: "Администраторы",
+      value: numberFormatter.format(summary.admins_total ?? 0),
+      helper: summary.admins_total ? "Имеют доступ к /admin" : "Назначьте администраторов",
+    },
+    {
+      label: "Кошельки (активные/всего)",
+      value: `${numberFormatter.format(summary.wallets_active)} / ${numberFormatter.format(summary.wallets_total)}`,
+    },
+    {
+      label: "Оплачено Stars",
+      value: formatStars(summary.stars_amount_paid),
+      helper: `${numberFormatter.format(summary.stars_paid)} платежей`,
+    },
+    {
+      label: "Неоплачено",
+      value: formatStars(summary.stars_amount_unpaid),
+      helper: `${numberFormatter.format(summary.stars_unpaid)} счетов`,
+    },
+  ];
+
+  return (
+    <Section
+      id="users"
+      title="Пользователи"
+      description="Просмотр учетных записей, кошельков и активности"
+      actions={
+        <button
+          type="button"
+          className="rounded-lg bg-slate-800 px-3 py-2 text-xs font-semibold text-slate-200 ring-1 ring-slate-700 transition hover:bg-slate-700"
+          onClick={() => usersQuery.refetch()}
+          disabled={usersQuery.isFetching}
+        >
+          {usersQuery.isFetching ? "Обновляем…" : "Обновить"}
+        </button>
+      }
+    >
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        {summaryCards.map((card) => (
+          <div
+            key={card.label}
+            className="overflow-hidden rounded-xl bg-slate-950/60 p-4 ring-1 ring-slate-800 shadow-inner shadow-black/40"
+          >
+            <p className="text-xs uppercase tracking-wide text-slate-500">{card.label}</p>
+            <p className="mt-2 text-lg font-semibold text-slate-100">{card.value}</p>
+            {card.helper ? <p className="mt-1 text-xs text-slate-500">{card.helper}</p> : null}
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-6 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
+        <div className="flex flex-col gap-1">
+          <label className="text-xs font-semibold uppercase tracking-wide text-slate-400">Поиск</label>
+          <input
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder="ID, Telegram, username, адрес"
+            className="w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-500 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 md:w-72"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            className="rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-slate-300 ring-1 ring-slate-700 transition hover:bg-slate-800"
+            onClick={() => setSearch("")}
+          >
+            Сбросить
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-4 hidden overflow-x-auto rounded-2xl border border-slate-800 md:block">
+        <table className="min-w-full divide-y divide-slate-800 text-left text-sm">
+          <thead className="bg-slate-950/70 text-xs uppercase tracking-wide text-slate-400">
+            <tr>
+              <th className="px-3 py-3">Пользователь</th>
+              <th className="px-3 py-3">Кошельки</th>
+              <th className="px-3 py-3">Stars</th>
+              <th className="px-3 py-3">Лицензии</th>
+              <th className="px-3 py-3">Активность</th>
+              <th className="px-3 py-3">Дата</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-900/60">
+            {items.length === 0 ? (
+              <tr>
+                <td colSpan={6} className="px-3 py-6 text-center text-sm text-slate-400">
+                  Нет пользователей, удовлетворяющих условиям.
+                </td>
+              </tr>
+            ) : (
+              items.map((user) => (
+                <tr key={`admin-user-${user.id}`} className="hover:bg-slate-900/40">
+                  <td className="px-3 py-3 align-top">
+                    <div className="font-semibold text-slate-100">{user.username ? `@${user.username}` : "Без username"}</div>
+                    <div className="flex flex-wrap items-center gap-2 text-xs text-slate-400">
+                      <span>ID {numberFormatter.format(user.id)}</span>
+                      <CopyButton
+                        value={user.id}
+                        aria-label="Скопировать ID пользователя"
+                        successMessage="ID пользователя скопирован"
+                        className="h-6 w-6"
+                      />
+                      <span>· TG {numberFormatter.format(user.telegram_id)}</span>
+                      <CopyButton
+                        value={user.telegram_id}
+                        aria-label="Скопировать Telegram ID"
+                        successMessage="Telegram ID скопирован"
+                        className="h-6 w-6"
+                      />
+                    </div>
+                    {user.first_name || user.last_name ? (
+                      <div className="text-xs text-slate-500">
+                        {(user.first_name ?? "")} {(user.last_name ?? "")}
+                      </div>
+                    ) : null}
+                    <div className="mt-2 flex flex-wrap items-center gap-2 text-xs">
+                      <Badge tone={user.is_admin ? "success" : "neutral"}>
+                        {user.is_admin ? "Администратор" : "Пользователь"}
+                      </Badge>
+                      <button
+                        type="button"
+                        onClick={() => handleToggleAdmin(user.id, !user.is_admin)}
+                        className="rounded-lg border border-slate-700 px-3 py-1 text-[11px] font-semibold text-slate-200 transition hover:border-slate-500 hover:text-white disabled:cursor-not-allowed disabled:opacity-60"
+                        disabled={setUserAdmin.isLoading}
+                      >
+                        {pendingUserId === user.id && setUserAdmin.isLoading
+                          ? "Сохраняем…"
+                          : user.is_admin
+                          ? "Снять права"
+                          : "Назначить админом"}
+                      </button>
+                    </div>
+                  </td>
+                  <td className="px-3 py-3 align-top">
+                    <div className="text-xs text-slate-400">
+                      Активных {numberFormatter.format(user.wallets.active_count)} / всего{" "}
+                      {numberFormatter.format(user.wallets.total_count)}
+                    </div>
+                    <div className="mt-1 flex flex-wrap items-center gap-2 break-all text-xs text-slate-300">
+                      <span className="break-all">{user.wallets.primary_address ?? "—"}</span>
+                      {user.wallets.primary_address ? (
+                        <CopyButton
+                          value={user.wallets.primary_address}
+                          aria-label="Скопировать адрес кошелька"
+                          successMessage="Адрес кошелька скопирован"
+                          className="h-6 w-6"
+                        />
+                      ) : null}
+                    </div>
+                  </td>
+                  <td className="px-3 py-3 align-top">
+                    <div className="font-semibold text-slate-100">{formatStars(user.stars.amount_total)}</div>
+                    <div className="text-xs text-slate-400">Оплачено: {formatStars(user.stars.amount_paid)}</div>
+                    <div className="text-xs text-slate-400">Неоплачено: {formatStars(user.stars.amount_unpaid)}</div>
+                  </td>
+                  <td className="px-3 py-3 align-top">
+                    <div className="text-xs text-slate-300">Всего {numberFormatter.format(user.licenses.total)}</div>
+                    <div className="text-xs text-slate-300">Активных {numberFormatter.format(user.licenses.active)}</div>
+                  </td>
+                  <td className="px-3 py-3 align-top">
+                    {user.ip_activity.last ? (
+                      <div className="flex flex-col gap-1 text-xs text-slate-300">
+                        <div className="flex flex-wrap items-center gap-2">
+                          <span className="break-all">{user.ip_activity.last.ip ?? "—"}</span>
+                          {user.ip_activity.last.ip ? (
+                            <CopyButton
+                              value={user.ip_activity.last.ip}
+                              aria-label="Скопировать IP-адрес"
+                              successMessage="IP-адрес скопирован"
+                              className="h-6 w-6"
+                            />
+                          ) : null}
+                        </div>
+                        <span>{formatDate(user.ip_activity.last.seen_at)}</span>
+                      </div>
+                    ) : (
+                      <div className="text-xs text-slate-500">Нет данных</div>
+                    )}
+                  </td>
+                  <td className="px-3 py-3 align-top text-xs text-slate-400">
+                    <div>Создан: {formatDate(user.created_at)}</div>
+                    <div>Последний вход: {formatDate(user.last_use)}</div>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+      <div className="mt-4 grid gap-4 md:hidden">
+        {items.length === 0 ? (
+          <div className="rounded-2xl border border-slate-800 bg-slate-950/40 px-4 py-6 text-center text-sm text-slate-400">
+            Нет пользователей, удовлетворяющих условиям.
+          </div>
+        ) : (
+          items.map((user) => (
+            <div key={`user-card-${user.id}`} className="rounded-2xl border border-slate-800 bg-slate-950/50 p-4 shadow-inner shadow-black/30">
+              <div className="flex flex-wrap items-center gap-2 text-sm font-semibold text-slate-100">
+                <span>{user.username ? `@${user.username}` : "Без username"}</span>
+                <CopyButton
+                  value={user.id}
+                  aria-label="Скопировать ID пользователя"
+                  successMessage="ID пользователя скопирован"
+                  className="h-6 w-6"
+                />
+                <CopyButton
+                  value={user.telegram_id}
+                  aria-label="Скопировать Telegram ID"
+                  successMessage="Telegram ID скопирован"
+                  className="h-6 w-6"
+                />
+              </div>
+              {user.first_name || user.last_name ? (
+                <div className="mt-1 text-xs text-slate-400">
+                  {(user.first_name ?? "")} {(user.last_name ?? "")}
+                </div>
+              ) : null}
+              <div className="mt-3 grid gap-3 text-xs text-slate-300">
+                <div className="flex flex-col gap-1">
+                  <span className="text-slate-500">ID · Telegram</span>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span>ID {numberFormatter.format(user.id)}</span>
+                    <span>· TG {numberFormatter.format(user.telegram_id)}</span>
+                  </div>
+                </div>
+                <div className="flex flex-col gap-1">
+                  <span className="text-slate-500">Кошельки</span>
+                  <div className="flex flex-wrap items-center gap-2 text-slate-300">
+                    <span>
+                      Активных {numberFormatter.format(user.wallets.active_count)} / всего{" "}
+                      {numberFormatter.format(user.wallets.total_count)}
+                    </span>
+                    {user.wallets.primary_address ? (
+                      <CopyButton
+                        value={user.wallets.primary_address}
+                        aria-label="Скопировать адрес кошелька"
+                        successMessage="Адрес кошелька скопирован"
+                        className="h-6 w-6"
+                      />
+                    ) : null}
+                  </div>
+                  <span className="break-all text-[11px] text-slate-400">{user.wallets.primary_address ?? "—"}</span>
+                </div>
+                <div className="flex flex-col gap-1">
+                  <span className="text-slate-500">Stars</span>
+                  <div className="flex flex-col">
+                    <span className="font-semibold text-slate-100">{formatStars(user.stars.amount_total)}</span>
+                    <span>Оплачено: {formatStars(user.stars.amount_paid)}</span>
+                    <span>Неоплачено: {formatStars(user.stars.amount_unpaid)}</span>
+                  </div>
+                </div>
+                <div className="flex flex-col gap-1">
+                  <span className="text-slate-500">Лицензии</span>
+                  <span>
+                    Всего {numberFormatter.format(user.licenses.total)} · Активных{" "}
+                    {numberFormatter.format(user.licenses.active)}
+                  </span>
+                </div>
+                <div className="flex flex-col gap-1">
+                  <span className="text-slate-500">Роль</span>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <Badge tone={user.is_admin ? "success" : "neutral"}>
+                      {user.is_admin ? "Администратор" : "Пользователь"}
+                    </Badge>
+                    <button
+                      type="button"
+                      onClick={() => handleToggleAdmin(user.id, !user.is_admin)}
+                      className="rounded-lg border border-slate-700 px-3 py-1 text-[11px] font-semibold text-slate-200 transition hover:border-slate-500 hover:text-white disabled:cursor-not-allowed disabled:opacity-60"
+                      disabled={setUserAdmin.isLoading}
+                    >
+                      {pendingUserId === user.id && setUserAdmin.isLoading
+                        ? "Сохраняем…"
+                        : user.is_admin
+                        ? "Снять права"
+                        : "Назначить админом"}
+                    </button>
+                  </div>
+                </div>
+                <div className="flex flex-col gap-1">
+                  <span className="text-slate-500">Последняя активность</span>
+                  {user.ip_activity.last ? (
+                    <div className="flex flex-col gap-1">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <span className="break-all">{user.ip_activity.last.ip ?? "—"}</span>
+                        {user.ip_activity.last.ip ? (
+                          <CopyButton
+                            value={user.ip_activity.last.ip}
+                            aria-label="Скопировать IP-адрес"
+                            successMessage="IP-адрес скопирован"
+                            className="h-6 w-6"
+                          />
+                        ) : null}
+                      </div>
+                      <span className="text-slate-400">{formatDate(user.ip_activity.last.seen_at)}</span>
+                    </div>
+                  ) : (
+                    <span className="text-slate-500">Нет данных</span>
+                  )}
+                </div>
+              </div>
+              <div className="mt-3 text-[11px] text-slate-500">
+                <div>Создан: {formatDate(user.created_at)}</div>
+                <div>Последний вход: {formatDate(user.last_use)}</div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      <div className="mt-4">
+        <PaginationControls total={total} limit={limit} page={page} onPageChange={setPage} />
+      </div>
+    </Section>
+  );
+};

src/pages/admin/sections/index.ts

@@ -0,0 +1,13 @@
+export { AdminOverviewPage } from "./Overview";
+export { AdminStoragePage } from "./Storage";
+export { AdminUploadsPage } from "./Uploads";
+export { AdminEventsPage } from "./Events";
+export { AdminUsersPage } from "./Users";
+export { AdminLicensesPage } from "./Licenses";
+export { AdminStarsPage } from "./Stars";
+export { AdminSystemPage } from "./System";
+export { AdminBlockchainPage } from "./Blockchain";
+export { AdminNodesPage } from "./Nodes";
+export { AdminStatusPage } from "./Status";
+export { AdminNetworkPage } from "./Network";
+export { AdminNetworkSettingsPage } from "./NetworkSettings";

src/pages/admin/types.ts

@@ -0,0 +1,15 @@
+export type FlashMessage = {
+  type: "success" | "error" | "info";
+  message: string;
+};
+
+export type AuthState = "checking" | "authorized" | "unauthorized";
+
+export type AdminContextValue = {
+  authState: AuthState;
+  isAuthorized: boolean;
+  pushFlash: (message: FlashMessage) => void;
+  clearFlash: () => void;
+  handleRequestError: (error: unknown, fallbackMessage: string) => void;
+  invalidateAll: () => Promise<void>;
+};

src/pages/admin/utils/format.ts

@@ -0,0 +1,62 @@
+const numberFormatter = new Intl.NumberFormat("ru-RU");
+
+const dateTimeFormatter = new Intl.DateTimeFormat("ru-RU", {
+  dateStyle: "short",
+  timeStyle: "medium",
+});
+
+export const formatBytes = (input?: number | null) => {
+  if (!input) {
+    return "0 B";
+  }
+  const units = ["B", "KB", "MB", "GB", "TB", "PB"] as const;
+  let value = input;
+  let unitIndex = 0;
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024;
+    unitIndex += 1;
+  }
+  const precision = value >= 10 || value < 0.1 ? 0 : 1;
+  return `${value.toFixed(precision)} ${units[unitIndex]}`;
+};
+
+export const formatStars = (input?: number | null) => {
+  const value = Number(input ?? 0);
+  return `${numberFormatter.format(value)} ⭑`;
+};
+
+export const formatDate = (iso?: string | null) => {
+  if (!iso) {
+    return "—";
+  }
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return iso;
+  }
+  return dateTimeFormatter.format(date);
+};
+
+export const formatUnknown = (value: unknown): string => {
+  if (value === null || value === undefined) {
+    return "—";
+  }
+  if (typeof value === "string") {
+    return value || "—";
+  }
+  if (typeof value === "number" || typeof value === "bigint") {
+    return numberFormatter.format(Number(value));
+  }
+  if (typeof value === "boolean") {
+    return value ? "Да" : "Нет";
+  }
+  if (value instanceof Date) {
+    return formatDate(value.toISOString());
+  }
+  try {
+    return JSON.stringify(value);
+  } catch (error) {
+    return String(value);
+  }
+};
+
+export { numberFormatter, dateTimeFormatter };

src/pages/root/steps/presubmit-step/index.tsx

@@ -8,7 +8,7 @@ import ReactPlayer from "react-player/lazy";
 import { Button } from "~/shared/ui/button";
 import { useRootStore } from "~/shared/stores/root";
 import { FormLabel } from "~/shared/ui/form-label";
-import { useUploadFile } from "~/shared/services/file";
+import { useLegacyUploadFile, useTusUpload } from "~/shared/services/file";
 import { Progress } from "~/shared/ui/progress";
 import { useCreateNewContent } from "~/shared/services/content";
 import { BackButton } from "~/shared/ui/back-button";
@@ -31,8 +31,8 @@ export const PresubmitStep = ({ prevStep }: PresubmitStepProps) => {
 
   const [isCoverExpanded, setCoverExpanded] = useState(false);
 
-  const uploadCover = useUploadFile();
-  const uploadFile = useUploadFile();
+  const uploadCover = useLegacyUploadFile();
+  const uploadFile = useTusUpload();
 
   const createContent = useCreateNewContent();
 
@@ -42,28 +42,85 @@ export const PresubmitStep = ({ prevStep }: PresubmitStepProps) => {
     setIsErrorUploadModal(false);
     uploadFile.resetUploadError();
     uploadCover.resetUploadError();
+    console.info("[App2Client][Presubmit] Пользователь закрыл модалку ошибок загрузки");
   };
 
   useEffect(() => {
     if (uploadFile.uploadError || uploadCover.uploadError) {
+      console.error("[App2Client][Presubmit] Обнаружены ошибки загрузки", {
+        fileError: uploadFile.uploadError,
+        coverError: uploadCover.uploadError,
+      });
       setIsErrorUploadModal(true);
     }
   }, [uploadFile.uploadError, uploadCover.uploadError]);
 
   const handleSubmit = async () => {
     try {
+      console.info("[App2Client][Presubmit] Начинаем отправку контента", {
+        name: rootStore.name,
+        author: rootStore.author,
+        fileName: rootStore.file?.name,
+        fileSize: rootStore.file?.size,
+        fileType: rootStore.file?.type,
+        allowCover: rootStore.allowCover,
+        hasCover: Boolean(rootStore.cover),
+        allowDownload: rootStore.allowDwnld,
+        hashtags: rootStore.hashtags,
+        royaltyCount: rootStore.royalty.length,
+        allowResale: rootStore.allowResale,
+      });
+
       let coverUploadResult = { content_id_v1: "" };
 
-      const fileUploadResult = await uploadFile.mutateAsync(
-          rootStore.file as File,
-      );
+      console.info("[App2Client][Presubmit] Загружаем основной файл через tus");
+      const fileUploadResult = await uploadFile.mutateAsync({
+        file: rootStore.file as File,
+        metadata: {
+          title: rootStore.name,
+          description: "",
+          content_type: rootStore.file?.type || "application/octet-stream",
+          preview_start_ms: 0,
+          preview_duration_ms: 30000,
+          downloadable: rootStore.allowDwnld ? "1" : "0",
+        },
+      });
+
+      if (!fileUploadResult.encryptedCid) {
+        throw new Error("Tus upload did not return encrypted cid");
+      }
+
+      console.info("[App2Client][Presubmit] Основной файл загружен", {
+        encryptedCid: fileUploadResult.encryptedCid,
+        uploadId: fileUploadResult.uploadId,
+        state: fileUploadResult.state,
+        sizeBytes: fileUploadResult.sizeBytes,
+      });
 
       if (rootStore.allowCover && rootStore.cover) {
+        console.info("[App2Client][Presubmit] Начинаем загрузку обложки", {
+          fileName: rootStore.cover.name,
+          fileSize: rootStore.cover.size,
+          fileType: rootStore.cover.type,
+        });
         coverUploadResult = await uploadCover.mutateAsync(
             rootStore.cover as File,
         );
+
+        console.info("[App2Client][Presubmit] Обложка загружена", {
+          contentIdV1: coverUploadResult.content_id_v1,
+        });
+      } else {
+        console.info("[App2Client][Presubmit] Обложка не загружается", {
+          allowCover: rootStore.allowCover,
+          hasCoverFile: Boolean(rootStore.cover),
+        });
       }
 
+      console.info("[App2Client][Presubmit] Отправляем метаданные контента", {
+        downloadable: rootStore.allowDwnld,
+        coverIncluded: Boolean(coverUploadResult.content_id_v1),
+      });
       const createContentResponse = await createContent.mutateAsync({
         title: rootStore.name,
 
@@ -76,7 +133,7 @@ export const PresubmitStep = ({ prevStep }: PresubmitStepProps) => {
         // следует отметить что вы должны еще откомментровать AuthorsStep в RootPage
         // authors: rootStore.authors,
         downloadable: rootStore.allowDwnld,
-        content: fileUploadResult.content_id_v1,
+        content: fileUploadResult.encryptedCid,
         image: coverUploadResult.content_id_v1,
         price: String(rootStore.price * 10 ** 9),
         hashtags: rootStore.hashtags,
@@ -100,6 +157,10 @@ export const PresubmitStep = ({ prevStep }: PresubmitStepProps) => {
 
       if (createContentResponse.data) {
         if (createContentResponse.data.address != "free") {
+          console.info("[App2Client][Presubmit] Отправляем транзакцию через TonConnect", {
+            address: createContentResponse.data.address,
+            amount: createContentResponse.data.amount,
+          });
           const transactionResponse = await tonConnectUI.sendTransaction({
             validUntil: Math.floor(Date.now() / 1000) + 120,
             messages: [
@@ -111,19 +172,29 @@ export const PresubmitStep = ({ prevStep }: PresubmitStepProps) => {
             ],
           });
           if (transactionResponse.boc) {
+            console.info("[App2Client][Presubmit] Транзакция успешно отправлена", {
+              bocLength: transactionResponse.boc.length,
+            });
             WebApp.close();
           } else {
             console.error("Transaction failed:", transactionResponse);
+            console.error("[App2Client][Presubmit] Транзакция не отправлена", {
+              response: transactionResponse,
+            });
           }
         }
       }
 
+      console.info("[App2Client][Presubmit] Завершаем процесс и закрываем WebApp");
       WebApp.close();
       // @ts-expect-error Type issues
     } catch (error: never) {
 
 
       console.error("An error occurred during the submission process:", error);
+      console.error("[App2Client][Presubmit] Ошибка во время отправки", {
+        error,
+      });
 
       if (error?.status === 400) {
         alert(

src/pages/view-content/index.tsx

@@ -5,11 +5,12 @@ import { useWebApp } from '@vkruglikov/react-telegram-web-app';
 import { Button } from '~/shared/ui/button';
 import { usePurchaseContent, useViewContent } from '~/shared/services/content';
 import { fromNanoTON } from '~/shared/utils';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AudioPlayer } from '~/shared/ui/audio-player';
 import { useAuth } from '~/shared/services/auth';
 import { CongratsModal } from './components/congrats-modal';
 import { ErrorModal } from './components/error-modal';
+import { resolveStartPayload } from '~/shared/utils/start-payload';
 
 type InvoiceStatus = 'paid' | 'failed' | 'cancelled' | 'pending';
 
@@ -21,9 +22,10 @@ interface InvoiceEvent {
 
 export const ViewContentPage = () => {
     const WebApp = useWebApp();
+    const { contentId } = resolveStartPayload();
 
     const { data: content, refetch: refetchContent } = useViewContent(
-        WebApp.initDataUnsafe?.start_param
+        contentId
     );
 
     const { mutateAsync: purchaseContent } = usePurchaseContent();
@@ -34,47 +36,104 @@ export const ViewContentPage = () => {
     const [isCongratsModal, setIsCongratsModal] = useState(false);
     const [isErrorModal, setIsErrorModal] = useState(false);
 
+    const statusState = content?.data?.status?.state ?? "uploaded";
+    const conversionState = content?.data?.conversion?.state;
+    const uploadState = content?.data?.upload?.state;
+    const statusMessage = useMemo(() => {
+        switch (statusState) {
+            case "processing":
+                return "Контент обрабатывается";
+            case "failed":
+                return "Ошибка обработки";
+            case "ready":
+                return null;
+            default:
+                return "Файл загружен";
+        }
+    }, [statusState]);
+
+    const haveLicense = useMemo(() => (
+        content?.data?.have_licenses?.includes('listen') ||
+        content?.data?.have_licenses?.includes('resale')
+    ), [content]);
+
+    const contentMime = content?.data?.content_mime ?? null;
+    const contentKind = content?.data?.display_options?.content_kind ?? null;
+    const mediaUrl = content?.data?.display_options?.content_url ?? null;
+    const isAudio = contentKind === 'audio' || Boolean(content?.data?.content_type?.startsWith('audio'));
+    const isVideo = contentKind === 'video' || Boolean(content?.data?.content_type?.startsWith('video'));
+    const isBinary = contentKind === 'binary' || (!isAudio && !isVideo);
+    const hasInlinePlayer = Boolean(mediaUrl) && (isAudio || isVideo);
+    const binaryDownloadReady = Boolean(mediaUrl) && isBinary;
+    const isReadyState = statusState === "ready";
+    const previewAvailable = Boolean(content?.data?.display_options?.has_preview);
+    const coverImage = content?.data?.display_options?.metadata?.image ?? null;
+    const metadataName = content?.data?.display_options?.metadata?.name;
+    const contentTitle = metadataName || content?.data?.encrypted?.title || 'Контент';
+    const processingDetails = useMemo(() => {
+        if (!statusMessage) {
+            return null;
+        }
+        return {
+            conversion: conversionState,
+            upload: uploadState,
+        };
+    }, [conversionState, statusMessage, uploadState]);
+
+    const canDownload = Boolean(mediaUrl) && haveLicense && ((content?.data?.downloadable ?? false) || isBinary);
+    const binaryAwaitingAccess = isBinary && !binaryDownloadReady;
+    const isFailed = statusState === "failed";
+
     const handleBuyContentTON = useCallback(async () => {
+        if (!contentId) {
+            console.error('No content identifier available for purchase');
+            return;
+        }
         try {
-            // Helper function to wait for wallet connection
-            const waitForConnection = async (timeoutMs = 30000, intervalMs = 500) => {
-                const startTime = Date.now();
-
-                while (Date.now() - startTime < timeoutMs) {
-                    if (tonConnectUI.connected) {
-                        return true;
-                    }
-                    await new Promise((resolve) => setTimeout(resolve, intervalMs));
-                }
-
-                return false; // Timed out
-            };
-
-            // If not connected, start connection process
+            // Если не подключен, начинаем процесс подключения через auth
             if (!tonConnectUI.connected) {
-                console.log('DEBUG: Wallet not connected, opening modal');
+                console.log('DEBUG: Wallet not connected, using auth flow first');
 
-                // Open connection modal
-                await tonConnectUI.openModal();
+                // Вызываем auth.mutateAsync() до открытия модального окна
+                // Это настроит параметры подключения с TonProof
+                try {
+                    await auth.mutateAsync();
 
-                // Wait for connection
-                const connected = await waitForConnection();
-                if (!connected) {
-                    console.log('DEBUG: Connection timed out or was cancelled');
+                    // Проверяем, установилось ли подключение после auth
+                    if (!tonConnectUI.connected) {
+                        console.log('DEBUG: Auth did not establish connection, returning');
+                        return;
+                    }
+
+                    console.log('DEBUG: Connection and authentication successful');
+                } catch (error) {
+                    console.log('Ошибка подключения кошелька', 'danger');
+                    console.error('DEBUG: Auth failed during connection:', error);
                     return;
                 }
-
-                console.log('DEBUG: Connection successful, authenticating');
-                await auth.mutateAsync();
             } else {
-                // Already connected, just authenticate
+                // Если уже подключены, просто аутентифицируемся
+                console.log('DEBUG: Already connected, authenticating');
                 await auth.mutateAsync();
             }
 
-            // Proceed with purchase
+            // Проверка наличия TonProof
+            if (
+                tonConnectUI.wallet?.connectItems?.tonProof &&
+                !('error' in tonConnectUI.wallet.connectItems.tonProof)
+            ) {
+                console.log(
+                    'DEBUG: TonProof available:',
+                    tonConnectUI.wallet.connectItems.tonProof
+                );
+            } else {
+                console.warn('DEBUG: TonProof not available after connection');
+            }
+
+            // Теперь продолжаем с покупкой
             console.log('DEBUG: Proceeding with purchase');
             const contentResponse = await purchaseContent({
-                content_address: WebApp.initDataUnsafe?.start_param,
+                content_address: contentId,
                 license_type: 'resale',
             });
 
@@ -101,7 +160,7 @@ export const ViewContentPage = () => {
             setIsErrorModal(true);
             console.error('Error handling Ton Connect subscription:', error);
         }
-    }, [auth, purchaseContent, refetchContent, tonConnectUI, WebApp.initDataUnsafe?.start_param]);
+    }, [auth, contentId, purchaseContent, refetchContent, tonConnectUI]);
 
     const handleBuyContentStars = useCallback(async () => {
         try {
@@ -143,21 +202,34 @@ export const ViewContentPage = () => {
         }
     }, [content, refetchContent]);
 
-    const haveLicense = useMemo(() => {
-        document.title = content?.data?.display_options?.metadata?.name;
-        return (
-            content?.data?.have_licenses?.includes('listen') ||
-            content?.data?.have_licenses?.includes('resale')
-        );
-    }, [content]);
+    const hadLicenseRef = useRef<boolean>(haveLicense);
 
     useEffect(() => {
+        if (haveLicense && !hadLicenseRef.current) {
+            hadLicenseRef.current = true;
+            void refetchContent();
+        } else if (!haveLicense) {
+            hadLicenseRef.current = false;
+        }
+    }, [haveLicense, refetchContent]);
+
+    useEffect(() => {
+        if (contentTitle) {
+            document.title = contentTitle;
+        }
+    }, [contentTitle]);
+
+    useEffect(() => {
+        if (!contentId) {
+            return () => undefined;
+        }
+
         const interval = setInterval(() => {
             void refetchContent();
         }, 5000);
 
         return () => clearInterval(interval);
-    }, []);
+    }, [contentId, refetchContent]);
 
     const handleConfirmCongrats = () => {
         setIsCongratsModal(!isCongratsModal);
@@ -170,11 +242,15 @@ export const ViewContentPage = () => {
     const handleDwnldContent = async () => {
         try {
             const fileUrl = content?.data?.display_options?.content_url;
+            if (!fileUrl) {
+                return;
+            }
             const fileName = content?.data?.display_options?.metadata?.name || 'content';
-            const fileFormat = content?.data?.content_ext || '.raw';
+            const rawExt = content?.data?.content_ext ?? 'bin';
+            const normalizedExt = rawExt.replace(/^\.+/, '');
             await WebApp.downloadFile({
                 url: fileUrl,
-                file_name: fileName + '.' + fileFormat,
+                file_name: `${fileName}.${normalizedExt}`,
             });
         } catch (error) {
             console.error('Error downloading content:', error);
@@ -182,94 +258,151 @@ export const ViewContentPage = () => {
     };
 
     return (
-        <main className={'min-h-screen flex w-full flex-col gap-[50px] px-4 '}>
+        <main className={'min-h-screen flex w-full flex-col gap-[40px] px-4 '}>
             {isCongratsModal && <CongratsModal onConfirm={handleConfirmCongrats} />}
             {isErrorModal && <ErrorModal onConfirm={handleErrorModal} />}
-            {content?.data?.content_type.startsWith('audio') &&
-                content?.data?.display_options?.metadata?.image && (
-                    <div className={'mt-[30px] h-[314px] w-full'}>
-                        <img
-                            alt={'content_image'}
-                            className={'h-full w-full object-cover object-center'}
-                            src={content?.data?.display_options?.metadata?.image}
-                        />
+            {coverImage && (
+                <div className="mt-[30px] flex w-full justify-center">
+                    <div className="relative aspect-square w-full max-w-[320px] rounded-3xl border border-slate-900/60 bg-transparent">
+                        <div className="absolute inset-0 flex items-center justify-center overflow-hidden">
+                            <img
+                                alt={'content cover'}
+                                className={'max-h-full max-w-full object-contain'}
+                                src={coverImage}
+                                loading="lazy"
+                            />
+                        </div>
                     </div>
-                )}
-
-            {content?.data?.content_type.startsWith('audio') ? (
-                <AudioPlayer src={content?.data?.display_options?.content_url} />
-            ) : (
-                <ReactPlayer
-                    playsinline={true}
-                    controls={true}
-                    width="100%"
-                    config={{
-                        file: {
-                            attributes: {
-                                playsInline: true,
-                                autoPlay: true,
-                                poster:
-                                    content?.data?.display_options?.metadata?.image || undefined,
-                            },
-                        },
-                    }}
-                    url={content?.data?.display_options?.content_url}
-                />
+                </div>
             )}
 
-            <section className={'flex flex-col'}>
-                <h1 className={'text-[20px] font-bold'}>
-                    {content?.data?.display_options?.metadata?.name}
-                </h1>
-                {/*<h2>Russian</h2>*/}
-                {/*<h2>2022</h2>*/}
-                <p className={'mt-2 text-[12px]'}>
-                    {content?.data?.display_options?.metadata?.description}
-                </p>
-            </section>
+            {isReadyState ? (
+                <>
+                    {hasInlinePlayer && (
+                        isAudio ? (
+                            <AudioPlayer src={mediaUrl ?? ''} />
+                        ) : (
+                            <ReactPlayer
+                                playsinline={true}
+                                controls={true}
+                                width="100%"
+                                config={{
+                                    file: {
+                                        attributes: {
+                                            playsInline: true,
+                                            autoPlay: true,
+                                            poster: content?.data?.display_options?.metadata?.image || undefined,
+                                        },
+                                    },
+                                }}
+                                url={mediaUrl ?? ''}
+                                light={coverImage || undefined}
+                            />
+                        )
+                    )}
 
-            <div className="mt-auto pb-2">
-                {content?.data?.downloadable && (
-                    <Button
-                        onClick={() => handleDwnldContent()}
-                        className={'h-[48px] mb-4'}
-                        label={`Скачать контент`}
-                    />
-                )}
-                {!haveLicense && (
-                    <div className="flex flex-row gap-4">
-                        <Button
-                            onClick={handleBuyContentTON}
-                            className={'mb-4 h-[48px] px-2'}
-                            label={`Купить за ${fromNanoTON(content?.data?.encrypted?.license?.resale?.price)} ТОН`}
-                            includeArrows={content?.data?.invoice ? false : true}
-                        />
-                        {content?.data?.invoice && (
+                    {binaryDownloadReady && (
+                        <div className="rounded-2xl border border-slate-800 bg-slate-950/70 px-6 py-5 shadow-inner shadow-black/20">
+                            <h2 className="text-base font-semibold text-slate-100">Файл готов к скачиванию</h2>
+                            <p className="mt-2 text-sm text-slate-300">
+                                {contentMime ? `Тип файла: ${contentMime}` : 'Скачайте оригинальные данные на устройство.'}
+                            </p>
+                        </div>
+                    )}
+
+                    <section className={'flex flex-col'}>
+                        <h1 className={'text-[20px] font-bold'}>{metadataName}</h1>
+                        <p className={'mt-2 text-[12px]'}>
+                            {content?.data?.display_options?.metadata?.description}
+                        </p>
+                    </section>
+
+                    {binaryAwaitingAccess && (
+                        <div className="rounded-2xl border border-slate-800 bg-slate-950/70 px-6 py-5 text-sm text-slate-300">
+                            <h2 className="text-base font-semibold text-slate-100">Предпросмотр недоступен</h2>
+                            <p className="mt-2">
+                                Этот файл нельзя открыть в браузере. Получите доступ, чтобы скачать оригинал на устройство.
+                            </p>
+                            {!previewAvailable && (
+                                <p className="mt-2 text-xs text-slate-500">
+                                    Предпросмотр не формируется для бинарных данных.
+                                </p>
+                            )}
+                        </div>
+                    )}
+
+                    <div className="mt-auto pb-2">
+                        {canDownload && (
                             <Button
-                                onClick={handleBuyContentStars}
-                                className={'mb-4 h-[48px] px-2'}
-                                label={`Купить за ${content?.data?.invoice?.amount} ⭐️`}
+                                onClick={() => handleDwnldContent()}
+                                className={'h-[48px] mb-4'}
+                                label={`Скачать ${isBinary ? 'файл' : 'контент'}`}
+                            />
+                        )}
+                        {!haveLicense && (
+                            <div className="flex gap-4 pb-2 flex-nowrap overflow-hidden">
+                                <Button
+                                    onClick={handleBuyContentTON}
+                                    className={'mb-4 h-[48px] px-2 flex-1 min-w-0 w-auto truncate'}
+                                    label={`Купить за ${fromNanoTON(content?.data?.encrypted?.license?.resale?.price)} ТОН`}
+                                    includeArrows={content?.data?.invoice ? false : true}
+                                />
+                                {content?.data?.invoice && (
+                                    <Button
+                                        onClick={handleBuyContentStars}
+                                        className={'mb-4 h-[48px] px-2 flex-1 min-w-0 w-auto truncate'}
+                                        label={`Купить за ${content?.data?.invoice?.amount} ⭐️`}
+                                    />
+                                )}
+                            </div>
+                        )}
+                        <Button
+                            onClick={() => {
+                                WebApp.openTelegramLink(`https://t.me/MY_UploaderRobot`);
+                            }}
+                            className={'h-[48px] bg-darkred'}
+                            label={`Загрузить свой контент`}
+                        />
+                        {tonConnectUI.connected && (
+                            <Button
+                                onClick={() => {
+                                    tonConnectUI.disconnect();
+                                }}
+                                className={'h-[48px] bg-darkred mt-4'}
+                                label={`Отключить кошелек`}
                             />
                         )}
                     </div>
-                )}
-                <Button
-                    onClick={() => {
-                        WebApp.openTelegramLink(`https://t.me/MY_UploaderRobot`);
-                    }}
-                    className={'h-[48px] bg-darkred'}
-                    label={`Загрузить свой контент`}
-                />
-                {tonConnectUI.connected && (
-                    <Button
-                        onClick={() => {
-                            tonConnectUI.disconnect();
-                        }}
-                        className={'h-[48px] bg-darkred mt-4'}
-                        label={`Отключить кошелек`}
-                    />
-                )}
-            </div>
+                </>
+            ) : (
+                <div className="flex flex-1 flex-col items-center justify-center py-16">
+                    <div className="max-w-md rounded-2xl border border-slate-800 bg-slate-950/70 px-6 py-8 text-center shadow-lg shadow-black/30">
+                        <h1 className="text-lg font-semibold text-slate-100">
+                            {isFailed ? 'Не удалось подготовить контент' : 'Контент скоро будет здесь'}
+                        </h1>
+                        <p className="mt-3 text-sm text-slate-300">
+                            {isFailed
+                                ? 'При обработке файла произошла ошибка. Попробуйте обновить страницу или повторно загрузить контент.'
+                                : 'Мы уже обрабатываем загруженный файл и обновим страницу автоматически, как только появится доступ к полному контенту.'}
+                        </p>
+                        {statusMessage && (
+                            <p className="mt-4 text-[12px] text-slate-500">
+                                Текущее состояние: {statusMessage}
+                            </p>
+                        )}
+                        {processingDetails?.conversion && (
+                            <p className="mt-2 text-[12px] text-slate-500">
+                                Статус конвертера: {processingDetails.conversion}
+                            </p>
+                        )}
+                        {processingDetails?.upload && (
+                            <p className="mt-2 text-[12px] text-slate-500">
+                                Загрузка: {processingDetails.upload}
+                            </p>
+                        )}
+                    </div>
+                </div>
+            )}
         </main>
     );
 };

src/shared/libs/admin-auth.ts

@@ -0,0 +1,97 @@
+const TOKEN_STORAGE_KEY = '__admin_panel_token__';
+const HEADER_STORAGE_KEY = '__admin_panel_header__';
+const COOKIE_STORAGE_KEY = '__admin_panel_cookie__';
+const DEFAULT_HEADER_NAME = 'X-Admin-Token';
+const DEFAULT_COOKIE_NAME = 'admin_session';
+const DEFAULT_MAX_AGE = 172800; // 48h
+
+const isBrowser = typeof window !== 'undefined';
+
+export type AdminAuthSnapshot = {
+  token: string | null;
+  headerName: string;
+  cookieName: string;
+  maxAge: number;
+};
+
+export const getAdminAuthSnapshot = (): AdminAuthSnapshot => {
+  if (!isBrowser) {
+    return {
+      token: null,
+      headerName: DEFAULT_HEADER_NAME,
+      cookieName: DEFAULT_COOKIE_NAME,
+      maxAge: DEFAULT_MAX_AGE,
+    };
+  }
+
+  const token = window.localStorage.getItem(TOKEN_STORAGE_KEY);
+  const headerName = window.localStorage.getItem(HEADER_STORAGE_KEY) || DEFAULT_HEADER_NAME;
+  const cookieName = window.localStorage.getItem(COOKIE_STORAGE_KEY) || DEFAULT_COOKIE_NAME;
+  return {
+    token,
+    headerName,
+    cookieName,
+    maxAge: DEFAULT_MAX_AGE,
+  };
+};
+
+export const persistAdminAuth = ({
+  token,
+  headerName,
+  cookieName,
+  maxAge,
+}: {
+  token: string;
+  headerName?: string | null;
+  cookieName?: string | null;
+  maxAge?: number | null;
+}) => {
+  if (!isBrowser) {
+    return;
+  }
+
+  window.localStorage.setItem(TOKEN_STORAGE_KEY, token);
+  if (headerName) {
+    window.localStorage.setItem(HEADER_STORAGE_KEY, headerName);
+  }
+  if (cookieName) {
+    window.localStorage.setItem(COOKIE_STORAGE_KEY, cookieName);
+  }
+
+  // Best effort: mirror cookie locally to support same-origin deployments.
+  const targetCookieName = cookieName || DEFAULT_COOKIE_NAME;
+  const cookieParts = [
+    `${targetCookieName}=${encodeURIComponent(token)}`,
+    'Path=/',
+    `Max-Age=${maxAge ?? DEFAULT_MAX_AGE}`,
+    'SameSite=Lax',
+  ];
+  if (window.location.protocol === 'https:') {
+    cookieParts.push('Secure');
+  }
+  document.cookie = cookieParts.join('; ');
+};
+
+export const clearAdminAuth = () => {
+  if (!isBrowser) {
+    return;
+  }
+
+  const snapshot = getAdminAuthSnapshot();
+  window.localStorage.removeItem(TOKEN_STORAGE_KEY);
+  window.localStorage.removeItem(HEADER_STORAGE_KEY);
+  window.localStorage.removeItem(COOKIE_STORAGE_KEY);
+
+  if (snapshot.cookieName) {
+    const cookieParts = [
+      `${snapshot.cookieName}=`,
+      'Path=/',
+      'Max-Age=0',
+      'SameSite=Lax',
+    ];
+    if (window.location.protocol === 'https:') {
+      cookieParts.push('Secure');
+    }
+    document.cookie = cookieParts.join('; ');
+  }
+};

src/shared/libs/request/index.ts

@@ -1,17 +1,67 @@
-import axios from 'axios';
+import axios, { InternalAxiosRequestConfig } from 'axios';
 
-export const APP_API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+import { getAdminAuthSnapshot } from '~/shared/libs/admin-auth';
 
-export const request = axios.create({
-    baseURL: APP_API_BASE_URL,
-});
+const API_BASE_PATH = '/api/v1';
 
-request.interceptors.request.use((config) => {
-    const auth_v1_token = localStorage.getItem('auth_v1_token');
+const isBrowser = typeof window !== 'undefined';
 
-    if (auth_v1_token) {
-        config.headers.Authorization = auth_v1_token;
+const readStorage = (key: string) => {
+    if (!isBrowser) {
+        return null;
+    }
+    try {
+        return window.localStorage.getItem(key);
+    } catch (error) {
+        console.error('Failed to access localStorage', error);
+        return null;
+    }
+};
+
+type RequestConfig = InternalAxiosRequestConfig;
+
+const resolveDefaultBaseUrl = () => {
+    const envBase = (import.meta.env.VITE_API_BASE_URL ?? '').trim();
+    if (envBase) {
+        return envBase.replace(/\/$/, '');
+    }
+
+    if (isBrowser) {
+        return `${window.location.origin.replace(/\/$/, '')}${API_BASE_PATH}`;
+    }
+
+    return API_BASE_PATH;
+};
+
+const DEFAULT_API_BASE_URL = resolveDefaultBaseUrl();
+
+export const request = axios.create({ withCredentials: true });
+
+request.interceptors.request.use((config: RequestConfig) => {
+    config.headers = config.headers ?? {};
+    const headers = config.headers as Record<string, any>;
+    const authToken = readStorage('auth_v1_token');
+
+    if (authToken && !headers.Authorization) {
+        headers.Authorization = authToken;
+    }
+
+    const urlPath = config.url ?? '';
+    if (urlPath.startsWith('/admin')) {
+        const { token, headerName } = getAdminAuthSnapshot();
+        if (token) {
+            const headerKey = headerName || 'X-Admin-Token';
+            if (!headers[headerKey]) {
+                headers[headerKey] = token;
+            }
+        }
+    }
+
+    if (!config.baseURL) {
+        config.baseURL = DEFAULT_API_BASE_URL;
     }
 
     return config;
 });
+
+request.interceptors.response.use((response) => response);

src/shared/services/auth/index.ts

@@ -1,11 +1,11 @@
-import { useRef, useEffect } from 'react';
+import { useRef } from 'react';
 import { useTonConnectUI } from '@tonconnect/ui-react';
 import { useMutation } from 'react-query';
 import { request } from '~/shared/libs';
 import { useWebApp } from '@vkruglikov/react-telegram-web-app';
+import { appendReferral } from '~/shared/utils/start-payload';
 
 const sessionStorageKey = 'auth_v1_token';
-const tonProofStorageKey = 'stored_ton_proof';
 const payloadTTLMS = 1000 * 60 * 20;
 
 export const useAuth = () => {
@@ -13,25 +13,6 @@ export const useAuth = () => {
     const [tonConnectUI] = useTonConnectUI();
     const interval = useRef<ReturnType<typeof setInterval> | undefined>();
 
-    // Store ton_proof when it becomes available
-    useEffect(() => {
-        if (
-            tonConnectUI.wallet?.connectItems?.tonProof &&
-            !('error' in tonConnectUI.wallet.connectItems.tonProof) &&
-            tonConnectUI.wallet.account
-        ) {
-            console.log('DEBUG: Storing ton_proof for future use');
-            localStorage.setItem(
-                tonProofStorageKey,
-                JSON.stringify({
-                    timestamp: Date.now(),
-                    account: tonConnectUI.wallet.account,
-                    proof: tonConnectUI.wallet.connectItems.tonProof.proof,
-                })
-            );
-        }
-    }, [tonConnectUI.wallet?.connectItems?.tonProof, tonConnectUI.wallet?.account]);
-
     const makeAuthRequest = async (params: {
         twa_data: string;
         ton_proof?: {
@@ -47,7 +28,7 @@ export const useAuth = () => {
                     ton_balance: string;
                 };
                 auth_v1_token: string;
-            }>('/auth.twa', params);
+            }>('/auth.twa', appendReferral(params));
 
             if (res?.data?.auth_v1_token) {
                 localStorage.setItem(sessionStorageKey, res.data.auth_v1_token);
@@ -61,11 +42,6 @@ export const useAuth = () => {
             }
             return res;
         } catch (error) {
-            // If we were using ton_proof and it failed, clear stored proof
-            if (params.ton_proof) {
-                console.log('DEBUG: Auth with proof failed, clearing stored proof');
-                localStorage.removeItem(tonProofStorageKey);
-            }
             throw error;
         }
     };
@@ -76,15 +52,14 @@ export const useAuth = () => {
             return res;
         } catch (error: any) {
             // Check for 404 error (wallet not found or invalid)
-            if (error.response?.status === 404) {
-                console.log('DEBUG: Wallet selection failed with 404, disconnecting');
-                await tonConnectUI.disconnect();
-                localStorage.removeItem(sessionStorageKey);
-                localStorage.removeItem(tonProofStorageKey);
+                if (error.response?.status === 404) {
+                    console.log('DEBUG: Wallet selection failed with 404, disconnecting');
+                    await tonConnectUI.disconnect();
+                    localStorage.removeItem(sessionStorageKey);
+                }
+                throw error;
             }
-            throw error;
-        }
-    };
+        };
 
     // Helper to prepare the connection parameters with proof requirements
     const prepareConnectParams = async () => {
@@ -95,9 +70,9 @@ export const useAuth = () => {
 
         try {
             // Get the payload/token from backend
-            const value = await request.post<{ auth_v1_token: string }>('/auth.twa', {
+            const value = await request.post<{ auth_v1_token: string }>('/auth.twa', appendReferral({
                 twa_data: WebApp.initData,
-            });
+            }));
 
             if (value?.data?.auth_v1_token) {
                 console.log('DEBUG: Got token for connect params');
@@ -129,6 +104,26 @@ export const useAuth = () => {
         return true;
     };
 
+    // Helper для ожидания подключения с таймаутом
+    const waitForConnection = async (timeoutMs = 30000, checkIntervalMs = 500) => {
+        console.log('DEBUG: Waiting for wallet connection');
+        const startTime = Date.now();
+
+        while (Date.now() - startTime < timeoutMs) {
+            if (tonConnectUI.connected) {
+                console.log('DEBUG: Connection detected');
+                // Даем дополнительное время для инициализации connectItems
+                await new Promise((resolve) => setTimeout(resolve, 1000));
+                return true;
+            }
+            // Проверяем статус каждые checkIntervalMs
+            await new Promise((resolve) => setTimeout(resolve, checkIntervalMs));
+        }
+
+        console.log('DEBUG: Connection wait timed out');
+        return false;
+    };
+
     return useMutation(['auth'], async () => {
         clearInterval(interval.current);
         let authResult;
@@ -150,13 +145,34 @@ export const useAuth = () => {
                 // Start periodic refresh of the payload
                 interval.current = setInterval(prepareConnectParams, payloadTTLMS);
 
-                // Open the modal - this will not resolve until connection or cancellation
-                await tonConnectUI.openModal();
+                // Open the modal and wait for connection
+                try {
+                    console.log('DEBUG: Opening wallet connect modal');
+                    tonConnectUI.openModal();
 
-                // Check if connection was successful
-                if (!tonConnectUI.connected) {
-                    console.log('DEBUG: Connection cancelled or failed');
-                    throw new Error('Wallet connection cancelled or failed');
+                    // Ждем подключения кошелька
+                    const connected = await waitForConnection();
+
+                    if (!connected || !tonConnectUI.connected) {
+                        console.log('DEBUG: Connection cancelled or failed after waiting');
+                        throw new Error('Wallet connection cancelled or failed');
+                    }
+
+                    // Даем дополнительное время для полной инициализации wallet
+                    if (!tonConnectUI.wallet || !tonConnectUI.wallet.connectItems) {
+                        console.log('DEBUG: Wallet object not fully initialized, waiting...');
+                        await new Promise((resolve) => setTimeout(resolve, 1500));
+                    }
+
+                    console.log('DEBUG: Connection successful, wallet details:', {
+                        connected: tonConnectUI.connected,
+                        hasWallet: !!tonConnectUI.wallet,
+                        hasConnectItems: !!tonConnectUI.wallet?.connectItems,
+                        hasTonProof: !!tonConnectUI.wallet?.connectItems?.tonProof,
+                    });
+                } catch (error) {
+                    console.error('DEBUG: Error during wallet connection:', error);
+                    throw new Error('Wallet connection process failed');
                 }
 
                 // Check if we have a proof after connection
@@ -188,93 +204,13 @@ export const useAuth = () => {
                     });
                 }
             } else {
-                // Case 2: Already connected - try to use stored proof first
+                // Case 2: Already connected
                 console.log('DEBUG: Already connected');
-
-                // Check if we have a valid stored proof
-                const storedProofData = localStorage.getItem(tonProofStorageKey);
-                if (storedProofData) {
-                    try {
-                        const proofData = JSON.parse(storedProofData);
-
-                        // Check if the proof matches current wallet and is not too old
-                        if (tonConnectUI.wallet?.account?.address === proofData.account.address) {
-                            console.log('DEBUG: Using stored proof');
-
-                            // Try auth with stored proof but ignore errors
-                            try {
-                                authResult = await makeAuthRequest({
-                                    twa_data: WebApp.initData,
-                                    ton_proof: {
-                                        account: proofData.account,
-                                        ton_proof: proofData.proof,
-                                    },
-                                });
-
-                                // If successful, remove stored proof as it's been used
-                                localStorage.removeItem(tonProofStorageKey);
-                            } catch (error) {
-                                console.log(
-                                    'DEBUG: Auth with stored proof failed, proceeding without it'
-                                );
-
-                                // Fall back to auth without proof
-                                authResult = await makeAuthRequest({
-                                    twa_data: WebApp.initData,
-                                });
-                            }
-                        } else {
-                            console.log('DEBUG: Stored proof address mismatch');
-                            localStorage.removeItem(tonProofStorageKey);
-
-                            // Auth without proof
-                            authResult = await makeAuthRequest({
-                                twa_data: WebApp.initData,
-                            });
-                        }
-                    } catch (error) {
-                        console.error('DEBUG: Error parsing stored proof:', error);
-                        localStorage.removeItem(tonProofStorageKey);
-
-                        // Auth without proof
-                        authResult = await makeAuthRequest({
-                            twa_data: WebApp.initData,
-                        });
-                    }
-                } else {
-                    // No stored proof, check if we have a live proof
-                    if (
-                        tonConnectUI.wallet?.connectItems?.tonProof &&
-                        !('error' in tonConnectUI.wallet.connectItems.tonProof)
-                    ) {
-                        console.log('DEBUG: Using live proof from wallet');
-                        try {
-                            // Try auth with the live proof
-                            authResult = await makeAuthRequest({
-                                twa_data: WebApp.initData,
-                                ton_proof: {
-                                    account: tonConnectUI.wallet.account,
-                                    ton_proof: tonConnectUI.wallet.connectItems.tonProof.proof,
-                                },
-                            });
-                        } catch (error) {
-                            console.log(
-                                'DEBUG: Auth with live proof failed, proceeding without it'
-                            );
-
-                            // Fall back to auth without proof
-                            authResult = await makeAuthRequest({
-                                twa_data: WebApp.initData,
-                            });
-                        }
-                    } else {
-                        // Connected without proof - already authenticated
-                        console.log('DEBUG: Connected without proof, proceeding without it');
-                        authResult = await makeAuthRequest({
-                            twa_data: WebApp.initData,
-                        });
-                    }
-                }
+                // TonConnect proofs are meant for initial wallet binding; reusing old proofs
+                // commonly fails server-side (replay/unknown payload). Use TWA auth without proof.
+                authResult = await makeAuthRequest({
+                    twa_data: WebApp.initData,
+                });
             }
 
             // Always try to select wallet after auth (this validates the connection)
@@ -290,7 +226,6 @@ export const useAuth = () => {
                         console.log('DEBUG: Connection validation failed, disconnecting');
                         await tonConnectUI.disconnect();
                         localStorage.removeItem(sessionStorageKey);
-                        localStorage.removeItem(tonProofStorageKey);
                         throw new Error('Connection validation failed');
                     }
                 } catch (error) {

src/shared/services/authTwa/index.ts

@@ -1,6 +1,7 @@
 import { useMutation } from "react-query";
 import { request } from "~/shared/libs";
 import { useWebApp } from "@vkruglikov/react-telegram-web-app";
+import { appendReferral } from "~/shared/utils/start-payload";
 
 const sessionStorageKey = "auth_v1_token";
 
@@ -10,9 +11,9 @@ export const useAuthTwa = () => {
   const makeAuthRequest = async () => {
     const res = await request.post<{
       auth_v1_token: string;
-    }>("/auth.twa", {
+    }>("/auth.twa", appendReferral({
       twa_data: WebApp.initData,
-    });
+    }));
 
     if (res?.data?.auth_v1_token) {
       localStorage.setItem(sessionStorageKey, res.data.auth_v1_token);
@@ -23,4 +24,4 @@ export const useAuthTwa = () => {
   };
 
   return useMutation(["auth"], makeAuthRequest);
-};
+};

src/shared/services/content/index.ts

@@ -3,6 +3,15 @@ import { useMutation, useQuery } from "react-query";
 import { request } from "~/shared/libs";
 import { Royalty } from "~/shared/stores/root";
 
+const VIEW_CONTENT_NODE_ORIGINS = [
+  "https://my-public-node-103.projscale.dev",
+  "https://my-public-node-7.projscale.dev",
+  "https://my-public-node-9.projscale.dev",
+  "https://my-public-node-10.projscale.dev",
+  "http://localhost:3000",
+] as const;
+const VIEW_CONTENT_API_PATH = "/api/v1";
+
 type UseCreateNewContentPayload = {
   title: string;
   content: string;
@@ -20,16 +29,44 @@ type UseCreateNewContentPayload = {
 export const useCreateNewContent = () => {
   return useMutation(
       ["create-new-content"],
-      (payload: UseCreateNewContentPayload) => {
-        return request.post<{
-          address: string;
-          amount: string;
-          payload: string;
-        }>("/blockchain.sendNewContentMessage", payload, {
-            headers: {
-                Authorization: localStorage.getItem('auth_v1_token') ?? ""
-            }
+      async (payload: UseCreateNewContentPayload) => {
+        console.info("[App2Client][Content] Отправляем контент на создание", {
+          title: payload.title,
+          hasImage: Boolean(payload.image),
+          contentCid: payload.content,
+          hashtags: payload.hashtags,
+          authorsCount: payload.authors.length,
+          royaltyCount: payload.royaltyParams.length,
+          downloadable: payload.downloadable,
+          allowResale: payload.allowResale,
         });
+
+        try {
+          const response = await request.post<{
+            address: string;
+            amount: string;
+            payload: string;
+          }>("/blockchain.sendNewContentMessage", payload, {
+              headers: {
+                  Authorization: localStorage.getItem('auth_v1_token') ?? ""
+              }
+          });
+
+          console.info("[App2Client][Content] Сервер вернул данные для транзакции", {
+            title: payload.title,
+            hasAddress: Boolean(response.data.address),
+            amount: response.data.amount,
+            payloadLength: response.data.payload?.length ?? 0,
+          });
+
+          return response;
+        } catch (error) {
+          console.error("[App2Client][Content] Ошибка при создании контента", {
+            title: payload.title,
+            error,
+          });
+          throw error;
+        }
       },
   );
 };
@@ -45,14 +82,42 @@ export const useCreateNewContent = () => {
 //   );
 // };
 
-export const useViewContent = (contentId: string) => {
-  return useQuery(["view", "content", contentId], () => {
-    return request.get(`/content.view/${contentId}`, {
-        headers: {
-            Authorization: localStorage.getItem('auth_v1_token') ?? ""
+export const useViewContent = (contentId: string | null | undefined) => {
+  return useQuery(
+      ["view", "content", contentId],
+      async () => {
+        if (!contentId) {
+          throw new Error("contentId is required");
         }
-    });
-  });
+
+        let lastError: unknown = null;
+        for (const origin of VIEW_CONTENT_NODE_ORIGINS) {
+          const baseURL = `${origin.replace(/\/$/, "")}${VIEW_CONTENT_API_PATH}`;
+          try {
+            const response = await request.get(`/content.view/${contentId}`, {
+              baseURL,
+            });
+            if (origin !== VIEW_CONTENT_NODE_ORIGINS[0]) {
+              console.info("[App2Client][ContentView] Используем резервную ноду", {
+                origin,
+              });
+            }
+            return response;
+          } catch (error) {
+            lastError = error;
+            console.warn("[App2Client][ContentView] Нода недоступна", {
+              origin,
+              error,
+            });
+          }
+        }
+
+        throw lastError ?? new Error("All content nodes are unreachable");
+      },
+      {
+          enabled: Boolean(contentId),
+      }
+  );
 };
 
 export const usePurchaseContent = () => {

src/shared/services/file/index.ts

@@ -1,201 +1,722 @@
 import { useMutation } from "react-query";
-import { useState } from "react";
+import { useRef, useState } from "react";
+import { Upload } from "tus-js-client";
+
 import { request } from "~/shared/libs";
 
-const STORAGE_API_URL = import.meta.env.VITE_API_BASE_STORAGE_URL;
+const resolveApiBaseUrl = () => {
+  const envBase = (import.meta.env.VITE_API_BASE_URL ?? "").trim();
+  if (envBase) {
+    return envBase.replace(/\/$/, "");
+  }
+
+  if (typeof window !== "undefined") {
+    return `${window.location.origin.replace(/\/$/, "")}/api/v1`;
+  }
+
+  return "/api/v1";
+};
+
+const DEFAULT_API_BASE_URL = resolveApiBaseUrl();
+
+const resolveUploadEndpoints = () => {
+  try {
+    const apiUrl = new URL(DEFAULT_API_BASE_URL);
+    const origin = apiUrl.origin.replace(/\/$/, "");
+    return {
+      storage: `${origin}/api/v1.5/storage`,
+      tus: `${origin}/tus/files`,
+    };
+  } catch (error) {
+    if (typeof window !== "undefined") {
+      const origin = window.location.origin.replace(/\/$/, "");
+      return {
+        storage: `${origin}/api/v1.5/storage`,
+        tus: `${origin}/tus/files`,
+      };
+    }
+
+    console.warn("[App2Client][Upload] Cannot derive upload endpoints from VITE_API_BASE_URL", {
+      error,
+    });
+    return {
+      storage: '/api/v1.5/storage',
+      tus: '/tus/files',
+    };
+  }
+};
+
+const { storage: STORAGE_API_URL, tus: TUS_ENDPOINT } = resolveUploadEndpoints();
 const MAX_CHUNK_SIZE = 80 * 1024 * 1024; // 80 MB
 
-export const useUploadFile = () => {
+const TUS_STATUS_POLL_INTERVAL_MS = 2000;
+const TUS_STATUS_POLL_TIMEOUT_MS = 5 * 60 * 1000;
+
+const sleep = (ms: number) => new Promise<void>((resolve) => {
+  setTimeout(resolve, ms);
+});
+
+const normalizeError = (error: unknown, fallbackMessage: string) => {
+  if (error instanceof Error) {
+    return error;
+  }
+
+  if (typeof error === "string") {
+    return new Error(error);
+  }
+
+  if (error && typeof error === "object" && "message" in error) {
+    const message = (error as { message?: unknown }).message;
+    if (typeof message === "string") {
+      return new Error(message);
+    }
+  }
+
+  return new Error(fallbackMessage);
+};
+
+const sanitizeMetadataKey = (key: string) => {
+  return key.replace(/[^A-Za-z0-9_.-]/g, "_");
+};
+
+const normalizeMetadata = (
+  metadata?: Record<string, string | number | boolean | undefined>,
+) => {
+  if (!metadata) {
+    return {} as Record<string, string>;
+  }
+
+  return Object.entries(metadata).reduce((acc, [rawKey, rawValue]) => {
+    if (rawValue === undefined || rawValue === null) {
+      return acc;
+    }
+
+    const key = sanitizeMetadataKey(rawKey);
+    if (!key) {
+      return acc;
+    }
+
+    acc[key] = String(rawValue);
+    return acc;
+  }, {} as Record<string, string>);
+};
+
+const extractUploadId = (uploadUrl: string) => {
+  try {
+    const url = new URL(uploadUrl);
+    const parts = url.pathname.split("/").filter(Boolean);
+    const uploadId = parts[parts.length - 1];
+    if (!uploadId) {
+      throw new Error("Empty upload id");
+    }
+    return uploadId;
+  } catch (error) {
+    const normalized = uploadUrl.split("/").filter(Boolean);
+    const uploadId = normalized[normalized.length - 1];
+    if (!uploadId) {
+      throw new Error("Unable to extract upload id from tus Location");
+    }
+    return uploadId;
+  }
+};
+
+type UploadSessionState = "uploading" | "processing" | "pinned" | "failed";
+
+type UploadStatusResponse = {
+  id: string;
+  state: UploadSessionState;
+  encrypted_cid?: string | null;
+  size_bytes?: number | null;
+  error?: string | null;
+};
+
+const pollUploadStatus = async (
+  uploadId: string,
+  signal?: AbortSignal,
+): Promise<UploadStatusResponse> => {
+  const startedAt = Date.now();
+  let attempt = 0;
+
+  console.info("[App2Client][TusUpload] Запускаем polling статуса", {
+    uploadId,
+    intervalMs: TUS_STATUS_POLL_INTERVAL_MS,
+    timeoutMs: TUS_STATUS_POLL_TIMEOUT_MS,
+  });
+
+  while (true) {
+    attempt += 1;
+    if (signal?.aborted) {
+      throw new DOMException("Tus status polling aborted", "AbortError");
+    }
+
+    try {
+      const { data } = await request.get<UploadStatusResponse>(
+        `/upload.status/${uploadId}`,
+        {
+          headers: { "Cache-Control": "no-store" },
+        },
+      );
+
+      console.info("[App2Client][TusUpload] Получен статус tus", {
+        uploadId,
+        attempt,
+        state: data.state,
+        hasEncryptedCid: Boolean(data.encrypted_cid),
+      });
+
+      if (data.state === "failed") {
+        throw new Error(data.error || "Tus upload failed on server");
+      }
+
+      if (data.state === "pinned" && data.encrypted_cid) {
+        console.info("[App2Client][TusUpload] Статус tus завершен", {
+          uploadId,
+          state: data.state,
+          encryptedCid: data.encrypted_cid,
+          sizeBytes: data.size_bytes,
+          attempts: attempt,
+          durationMs: Date.now() - startedAt,
+        });
+        return data;
+      }
+    } catch (error) {
+      const maybeAxios = error as { response?: { status?: number } };
+      if (maybeAxios?.response?.status === 404) {
+        // Hook has not recorded the upload session yet; continue polling.
+        console.info("[App2Client][TusUpload] Статус tus еще не готов (404)", {
+          uploadId,
+          attempt,
+        });
+      } else if (error instanceof DOMException && error.name === "AbortError") {
+        console.warn("[App2Client][TusUpload] Поллинг tus прерван", {
+          uploadId,
+          attempt,
+        });
+        throw error;
+      } else {
+        console.error("[App2Client][TusUpload] Ошибка во время polling", {
+          uploadId,
+          attempt,
+          error,
+        });
+        throw normalizeError(error, "Tus status polling failed");
+      }
+    }
+
+    if (Date.now() - startedAt > TUS_STATUS_POLL_TIMEOUT_MS) {
+      console.error("[App2Client][TusUpload] Поллинг tus превысил таймаут", {
+        uploadId,
+        attempts: attempt,
+        durationMs: Date.now() - startedAt,
+      });
+      throw new Error("Timed out waiting for tus upload finalization");
+    }
+
+    await sleep(TUS_STATUS_POLL_INTERVAL_MS);
+  }
+};
+
+type TusUploadArgs = {
+  file: File;
+  metadata?: Record<string, string | number | boolean | undefined>;
+  signal?: AbortSignal;
+};
+
+type TusUploadResult = {
+  kind: "tus";
+  uploadId: string;
+  encryptedCid: string;
+  sizeBytes?: number;
+  state: UploadSessionState;
+};
+
+export const useTusUpload = () => {
   const [uploadProgress, setUploadProgress] = useState(0);
   const [isUploading, setIsUploading] = useState(false);
   const [uploadError, setUploadError] = useState<Error | null>(null);
+  const activeUploadRef = useRef<Upload | null>(null);
+  const lastLoggedProgressRef = useRef(-10);
 
-  const mutation = useMutation(["upload-file"], async (file: File) => {
-    console.log(`Начинаем загрузку файла: ${file.name} (${file.size} байт)`);
-    setIsUploading(true);
-    setUploadProgress(0);
-    setUploadError(null); // Сбрасываем ошибку перед началом новой загрузки
+  const mutation = useMutation<TusUploadResult, Error, TusUploadArgs>(
+    ["upload-file", "tus"],
+    async ({ file, metadata, signal }) => {
+      if (!file) {
+        throw new Error("File is required for tus upload");
+      }
 
-    try {
-      // Для маленьких файлов используем обычную загрузку, но с теми же заголовками
-      if (file.size <= MAX_CHUNK_SIZE) {
-        console.log("Используем обычную загрузку (файл <= MAX_CHUNK_SIZE)");
-        
-        // Подготавливаем заголовки - такие же, как для чанковой загрузки
-        const headers: Record<string, string> = {
-          "X-File-Name": btoa(unescape(encodeURIComponent(file.name))), // Имя файла в base64
-          "X-Chunk-Start": "0", // Начинаем с позиции 0
-          "Content-Type": file.type || "application/octet-stream",
-          "X-Last-Chunk": "1" // Это единственный и последний чанк
-        };
-        
-        // Добавляем заголовок авторизации
-        const authToken = localStorage.getItem('auth_v1_token');
-        if (authToken) {
-          headers["Authorization"] = authToken;
+      setIsUploading(true);
+      setUploadProgress(0);
+      setUploadError(null);
+      let lastError: Error | null = null;
+
+      try {
+        if (!TUS_ENDPOINT) {
+          throw new Error("Tus endpoint is not configured");
         }
-        
-        console.log("Заголовки запроса:", headers);
-        
-        try {
-          const response = await request.post<{
-            upload_id?: string;
-            content_sha256?: string;
-            content_id?: string;
-            content_id_v1?: string;
-            content_url?: string;
-          }>("", file, { // Отправляем файл напрямую вместо FormData
-            baseURL: STORAGE_API_URL,
+
+        const result = await new Promise<TusUploadResult>((resolve, reject) => {
+          const token = localStorage.getItem("auth_v1_token") ?? "";
+          const normalizedMeta = normalizeMetadata(metadata);
+          const headers: Record<string, string> = { "Cache-Control": "no-store" };
+          if (token) {
+            headers.Authorization = token;
+          }
+
+          console.info("[App2Client][TusUpload] Начинаем загрузку", {
+            fileName: file.name,
+            fileSize: file.size,
+            fileType: file.type,
+            metadata: normalizedMeta,
+          });
+
+          const upload = new Upload(file, {
+            endpoint: TUS_ENDPOINT,
+            metadata: {
+              filename: file.name,
+              content_type: file.type || "application/octet-stream",
+              ...normalizedMeta,
+            },
             headers,
-            onUploadProgress: (progressEvent) => {
-              const percentCompleted = Math.round(
-                (progressEvent.loaded * 100) / (progressEvent?.total as number || file.size)
-              );
-              setUploadProgress(Math.min(99, percentCompleted));
+            retryDelays: [0, 1000, 3000, 5000],
+            removeFingerprintOnSuccess: true,
+            uploadDataDuringCreation: true,
+            onError: (err) => {
+              const normalized = normalizeError(err, "Tus upload failed");
+              lastError = normalized;
+              setUploadError(normalized);
+              setIsUploading(false);
+              setUploadProgress(0);
+              activeUploadRef.current = null;
+              reject(normalized);
+            },
+            onProgress: (bytesUploaded, bytesTotal) => {
+              const percent = bytesTotal
+                ? Math.floor((bytesUploaded / bytesTotal) * 100)
+                : 0;
+              setUploadProgress(Math.min(99, Math.max(0, percent)));
+
+              if (percent >= lastLoggedProgressRef.current + 5 || percent === 100) {
+                lastLoggedProgressRef.current = percent;
+                console.info("[App2Client][TusUpload] Прогресс загрузки", {
+                  fileName: file.name,
+                  bytesUploaded,
+                  bytesTotal,
+                  percent,
+                });
+              }
+            },
+            onSuccess: () => {
+              (async () => {
+                try {
+                  setUploadProgress(99);
+                  const uploadUrl = upload.url;
+                  if (!uploadUrl) {
+                    throw new Error("Tus upload finished without Location header");
+                  }
+
+                  const uploadId = extractUploadId(uploadUrl);
+                  console.info("[App2Client][TusUpload] Загрузка завершена на tus, начинаем финализацию", {
+                    fileName: file.name,
+                    uploadId,
+                  });
+                  const status = await pollUploadStatus(uploadId, signal);
+                  const encryptedCid = status.encrypted_cid;
+                  if (!encryptedCid) {
+                    throw new Error("Tus upload finalized without encrypted CID");
+                  }
+
+                  setUploadProgress(100);
+                  setIsUploading(false);
+                  activeUploadRef.current = null;
+
+                  console.info("[App2Client][TusUpload] Финализация tus завершена", {
+                    fileName: file.name,
+                    uploadId,
+                    encryptedCid,
+                    finalState: status.state,
+                    sizeBytes: status.size_bytes,
+                  });
+
+                  resolve({
+                    kind: "tus",
+                    uploadId,
+                    encryptedCid,
+                    sizeBytes: status.size_bytes ?? undefined,
+                    state: status.state,
+                  });
+                } catch (statusError) {
+                  const normalized = normalizeError(
+                    statusError,
+                    "Failed to finalize tus upload",
+                  );
+                  lastError = normalized;
+                  console.error("[App2Client][TusUpload] Ошибка финализации tus", {
+                    fileName: file.name,
+                    error: normalized,
+                  });
+                  setUploadError(normalized);
+                  setIsUploading(false);
+                  activeUploadRef.current = null;
+                  reject(normalized);
+                }
+              })();
             },
           });
-          
-          console.log("Ответ на обычную загрузку:", response.data);
-          setUploadProgress(100);
-          
-          return {
-            content_sha256: response.data.content_sha256 || "",
-            content_id_v1: response.data.content_id_v1 || response.data.content_id || "",
-            content_url: response.data.content_url || ""
-          };
-        } catch (error) {
-          console.error("Ошибка при обычной загрузке:", error);
-          setUploadError(error instanceof Error ? error : new Error('Ошибка при загрузке файла'));
-          throw error;
+
+          activeUploadRef.current = upload;
+          lastLoggedProgressRef.current = 0;
+
+          console.info("[App2Client][TusUpload] Запрашиваем предыдущие загрузки для возобновления", {
+            fileName: file.name,
+          });
+
+          if (signal) {
+            signal.addEventListener(
+              "abort",
+              () => {
+                upload.abort();
+                const abortError = new DOMException(
+                  "Tus upload aborted",
+                  "AbortError",
+                );
+                console.warn("[App2Client][TusUpload] Загрузка прервана внешним сигналом", {
+                  fileName: file.name,
+                });
+                lastError = abortError;
+                setUploadError(abortError);
+                setIsUploading(false);
+                activeUploadRef.current = null;
+                reject(abortError);
+              },
+              { once: true },
+            );
+          }
+
+          upload
+            .findPreviousUploads()
+            .then((previousUploads) => {
+              console.info("[App2Client][TusUpload] Результат поиска предыдущих загрузок", {
+                fileName: file.name,
+                count: previousUploads.length,
+              });
+              if (previousUploads.length > 0) {
+                upload.resumeFromPreviousUpload(previousUploads[0]);
+                console.info("[App2Client][TusUpload] Возобновляем загрузку", {
+                  fileName: file.name,
+                });
+              }
+              upload.start();
+              console.info("[App2Client][TusUpload] Стартуем загрузку", {
+                fileName: file.name,
+                chunkSize: upload.options.chunkSize,
+              });
+            })
+            .catch((resumeError) => {
+              const normalized = normalizeError(
+                resumeError,
+                "Failed to resume tus upload",
+              );
+              lastError = normalized;
+              console.error("[App2Client][TusUpload] Не удалось возобновить загрузку", {
+                fileName: file.name,
+                error: normalized,
+              });
+              setUploadError(normalized);
+              setIsUploading(false);
+              activeUploadRef.current = null;
+              reject(normalized);
+            });
+        });
+
+        return result;
+      } catch (error) {
+        const normalized = normalizeError(error, "Tus upload failed");
+        if (!lastError) {
+          lastError = normalized;
+          console.error("[App2Client][TusUpload] Ошибка во время загрузки", {
+            fileName: file.name,
+            error: normalized,
+          });
+          setUploadError(normalized);
         }
+        setIsUploading(false);
+        throw normalized;
+      } finally {
+        activeUploadRef.current = null;
+        setIsUploading(false);
+        console.info("[App2Client][TusUpload] Завершили работу загрузчика", {
+          fileName: file?.name,
+          hasError: Boolean(lastError),
+        });
       }
-      
-      // Для больших файлов используем чанковую загрузку
-      console.log("Используем чанкированную загрузку (файл > MAX_CHUNK_SIZE)");
-      
+    },
+  );
+
+  const resetUploadError = () => setUploadError(null);
+
+  const abortUpload = () => {
+    if (activeUploadRef.current) {
+      activeUploadRef.current.abort();
+      activeUploadRef.current = null;
+      setIsUploading(false);
+      setUploadProgress(0);
+      console.warn("[App2Client][TusUpload] Принудительно остановили загрузку", {
+        reason: "manual",
+      });
+    }
+  };
+
+  return {
+    ...mutation,
+    uploadProgress,
+    isUploading,
+    uploadError,
+    resetUploadError,
+    abortUpload,
+  };
+};
+
+export const useLegacyUploadFile = () => {
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadError, setUploadError] = useState<Error | null>(null);
+  const lastLoggedProgressRef = useRef(-10);
+
+  const mutation = useMutation(["upload-file", "legacy"], async (file: File) => {
+    setIsUploading(true);
+    setUploadProgress(0);
+    setUploadError(null);
+    lastLoggedProgressRef.current = 0;
+    let lastError: Error | null = null;
+
+    console.info("[App2Client][LegacyUpload] Начинаем загрузку", {
+      fileName: file.name,
+      fileSize: file.size,
+      fileType: file.type,
+      isChunked: file.size > MAX_CHUNK_SIZE,
+    });
+
+    try {
+      if (file.size <= MAX_CHUNK_SIZE) {
+        const headers: Record<string, string> = {
+          "X-File-Name": btoa(unescape(encodeURIComponent(file.name))),
+          "X-Chunk-Start": "0",
+          "Content-Type": file.type || "application/octet-stream",
+          "X-Last-Chunk": "1",
+        };
+
+        const authToken = localStorage.getItem("auth_v1_token");
+        if (authToken) {
+          headers.Authorization = authToken;
+        }
+
+        const response = await request.post<{
+          upload_id?: string;
+          content_sha256?: string;
+          content_id?: string;
+          content_id_v1?: string;
+          content_url?: string;
+        }>("", file, {
+          baseURL: STORAGE_API_URL,
+          headers,
+          onUploadProgress: (progressEvent) => {
+            const total = progressEvent?.total ?? file.size;
+            const percentCompleted = Math.round(
+              (progressEvent.loaded * 100) / total,
+            );
+            setUploadProgress(Math.min(99, percentCompleted));
+
+            if (
+              percentCompleted >= lastLoggedProgressRef.current + 5 ||
+              percentCompleted === 100
+            ) {
+              lastLoggedProgressRef.current = percentCompleted;
+              console.info("[App2Client][LegacyUpload] Прогресс загрузки", {
+                fileName: file.name,
+                percent: percentCompleted,
+                loaded: progressEvent.loaded,
+                total,
+              });
+            }
+          },
+        });
+
+        setUploadProgress(100);
+
+        console.info("[App2Client][LegacyUpload] Загрузка завершена", {
+          fileName: file.name,
+          response: {
+            hasContentId: Boolean(
+              response.data.content_id_v1 || response.data.content_id,
+            ),
+            hasSha256: Boolean(response.data.content_sha256),
+            uploadId: response.data.upload_id,
+          },
+        });
+
+        return {
+          content_sha256: response.data.content_sha256 || "",
+          content_id_v1:
+            response.data.content_id_v1 || response.data.content_id || "",
+          content_url: response.data.content_url || "",
+        };
+      }
+
       let offset = 0;
       let uploadId: string | null = null;
-      let chunkNumber = 0;
-      
-      // Загружаем файл по чанкам
+
       while (offset < file.size) {
-        chunkNumber++;
         const chunkEnd = Math.min(offset + MAX_CHUNK_SIZE, file.size);
         const chunk = file.slice(offset, chunkEnd);
-        console.log(`Загрузка чанка #${chunkNumber} начиная с байта ${offset}`);
-        
-        // Определяем, является ли текущий чанк последним
         const isLastChunk = chunkEnd === file.size;
-        
-        // Подготавливаем заголовки
+
         const headers: Record<string, string> = {
-          "X-File-Name": btoa(unescape(encodeURIComponent(file.name))), // Имя файла в base64
+          "X-File-Name": btoa(unescape(encodeURIComponent(file.name))),
           "X-Chunk-Start": offset.toString(),
-          "Content-Type": file.type || "application/octet-stream"
+          "Content-Type": file.type || "application/octet-stream",
         };
-        
-        // Добавляем маркер последнего чанка, если это последний чанк
+
         if (isLastChunk) {
           headers["X-Last-Chunk"] = "1";
         }
-        
-        // Добавляем заголовок авторизации
-        const authToken = localStorage.getItem('auth_v1_token');
+
+        const authToken = localStorage.getItem("auth_v1_token");
         if (authToken) {
-          headers["Authorization"] = authToken;
+          headers.Authorization = authToken;
         }
-        
-        // Если есть uploadId, добавляем его в заголовки
+
         if (uploadId) {
           headers["X-Upload-ID"] = uploadId;
         }
-        
-        console.log("Заголовки запроса:", headers);
-        
-        try {
-          const response = await request.post<{
-            upload_id?: string;
-            current_size?: number;
-            content_id?: string;
-            content_sha256?: string;
-            content_id_v1?: string;
-            content_url?: string;
-          }>("", chunk, {
-            baseURL: STORAGE_API_URL,
-            headers,
-            onUploadProgress: (progressEvent) => {
-              // Прогресс загрузки текущего чанка
-              const overallProgress = offset + progressEvent.loaded;
-              const percentCompleted = Math.round((overallProgress / file.size) * 100);
-              setUploadProgress(Math.min(99, percentCompleted));
-            },
+
+        console.info("[App2Client][LegacyUpload] Отправляем chunk", {
+          fileName: file.name,
+          chunkStart: offset,
+          chunkEnd,
+          chunkSize: chunk.size,
+          isLastChunk,
+          uploadId,
+        });
+
+        const response = await request.post<{
+          upload_id?: string;
+          current_size?: number;
+          content_id?: string;
+          content_sha256?: string;
+          content_id_v1?: string;
+          content_url?: string;
+        }>("", chunk, {
+          baseURL: STORAGE_API_URL,
+          headers,
+          onUploadProgress: (progressEvent) => {
+            const overallProgress = offset + progressEvent.loaded;
+            const percentCompleted = Math.round(
+              (overallProgress / file.size) * 100,
+            );
+            setUploadProgress(Math.min(99, percentCompleted));
+
+            if (
+              percentCompleted >= lastLoggedProgressRef.current + 5 ||
+              percentCompleted === 100
+            ) {
+              lastLoggedProgressRef.current = percentCompleted;
+              console.info("[App2Client][LegacyUpload] Прогресс загрузки", {
+                fileName: file.name,
+                percent: percentCompleted,
+                loaded: overallProgress,
+                total: file.size,
+              });
+            }
+          },
+        });
+
+        if (!uploadId && response.data.upload_id) {
+          uploadId = response.data.upload_id;
+          console.info("[App2Client][LegacyUpload] Получили upload_id", {
+            fileName: file.name,
+            uploadId,
+          });
+        }
+
+        if (response.data.content_id) {
+          setUploadProgress(100);
+
+          console.info("[App2Client][LegacyUpload] Сервер вернул итоговые данные", {
+            fileName: file.name,
+            uploadId,
+            hasContentId: Boolean(
+              response.data.content_id_v1 || response.data.content_id,
+            ),
+            hasSha256: Boolean(response.data.content_sha256),
+          });
+
+          return {
+            content_sha256: response.data.content_sha256 || "",
+            content_id_v1:
+              response.data.content_id_v1 || response.data.content_id || "",
+            content_url: response.data.content_url || "",
+          };
+        }
+
+        if (response.data.current_size !== undefined) {
+          offset = response.data.current_size;
+          console.info("[App2Client][LegacyUpload] Продолжаем загрузку", {
+            fileName: file.name,
+            nextOffset: offset,
+          });
+        } else {
+          const error = new Error("Missing current_size in response");
+          setUploadError(error);
+          lastError = error;
+          console.error("[App2Client][LegacyUpload] Сервер не вернул current_size", {
+            fileName: file.name,
+            response,
           });
-          
-          console.log(`Ответ на чанк #${chunkNumber}:`, response.data);
-          
-          // Сохраняем uploadId из первого ответа, если не установлен
-          if (!uploadId && response.data.upload_id) {
-            uploadId = response.data.upload_id;
-            console.log("Получен upload_id:", uploadId);
-          }
-          
-          // Проверка на наличие content_id
-          if (response.data.content_id) {
-            console.log("Загрузка завершена. ID файла:", response.data.content_id);
-            setUploadProgress(100);
-            
-            return {
-              content_sha256: response.data.content_sha256 || "",
-              content_id_v1: response.data.content_id_v1 || response.data.content_id || "",
-              content_url: response.data.content_url || ""
-            };
-          }
-          
-          // Обновляем смещение на основе ответа сервера
-          if (response.data.current_size !== undefined) {
-            offset = response.data.current_size;
-            console.log(`Сервер сообщает current_size: ${offset}`);
-          } else {
-            console.warn("Неожиданный ответ от сервера, отсутствует current_size");
-            const error = new Error("Missing current_size in response");
-            setUploadError(error);
-            throw error;
-          }
-        } catch (error: any) {
-          console.error(`Ошибка при загрузке чанка #${chunkNumber}:`, error);
-          if (error.response) {
-            console.error("Ответ сервера:", error.response.status, error.response.data);
-          }
-          setUploadError(error instanceof Error ? error : new Error(`Ошибка при загрузке чанка #${chunkNumber}`));
           throw error;
         }
       }
-      
-      const error = new Error("Ошибка загрузки файла: все чанки загружены, но content_id не получен");
-      console.error(error.message);
+
+      const error = new Error(
+        "All chunks uploaded but server did not return content_id",
+      );
       setUploadError(error);
+      lastError = error;
+      console.error("[App2Client][LegacyUpload] Все чанки отправлены, но content_id отсутствует", {
+        fileName: file.name,
+      });
       throw error;
-    } catch (error: any) {
-      console.error("Ошибка при загрузке:", error);
-      if (error.response) {
-        console.error("Ответ сервера:", error.response.status, error.response.data);
-      }
-      setUploadError(error instanceof Error ? error : new Error("Неизвестная ошибка при загрузке"));
+    } catch (error) {
+      const normalized = normalizeError(
+        error,
+        "Unknown error during legacy upload",
+      );
+      setUploadError(normalized);
       setIsUploading(false);
-      throw error;
+      lastError = normalized;
+      console.error("[App2Client][LegacyUpload] Ошибка во время загрузки", {
+        fileName: file.name,
+        error: normalized,
+      });
+      throw normalized;
     } finally {
       setIsUploading(false);
+      console.info("[App2Client][LegacyUpload] Завершили работу загрузчика", {
+        fileName: file.name,
+        hasError: Boolean(lastError),
+      });
     }
   });
 
-  // Сбросить ошибку
   const resetUploadError = () => setUploadError(null);
 
-  return { 
-    ...mutation, 
-    uploadProgress, 
-    isUploading, 
+  return {
+    ...mutation,
+    uploadProgress,
+    isUploading,
     uploadError,
-    resetUploadError
+    resetUploadError,
   };
-};
+};
+
+export { useTusUpload as useUploadFile };
+export type { TusUploadArgs, TusUploadResult, UploadSessionState };

src/shared/stores/root/index.ts

@@ -1,100 +1,135 @@
-import { create } from "zustand";
+import { create } from 'zustand';
 
 export type Royalty = {
-  address: string;
-  value: number;
+    address: string;
+    value: number;
 };
 
+type NotificationType = 'success' | 'danger' | 'warning' | 'info';
+
+interface Notification {
+    id: string;
+    message: string;
+    type: NotificationType;
+    createdAt: number;
+}
+
 type RootStore = {
-  name: string;
-  setName: (name: string) => void;
+    name: string;
+    setName: (name: string) => void;
 
-  author: string;
-  setAuthor: (author: string) => void;
+    author: string;
+    setAuthor: (author: string) => void;
 
-  file: File | null;
-  setFile: (file: File | null) => void;
+    file: File | null;
+    setFile: (file: File | null) => void;
 
-  fileType: string;
-  setFileType: (type: string) => void;
+    fileType: string;
+    setFileType: (type: string) => void;
 
-  fileSrc: string;
-  setFileSrc: (fileSrc: string) => void;
+    fileSrc: string;
+    setFileSrc: (fileSrc: string) => void;
 
-  allowCover: boolean;
-  setAllowCover: (allowCover: boolean) => void;
+    allowCover: boolean;
+    setAllowCover: (allowCover: boolean) => void;
 
-  allowDwnld: boolean;
-  setAllowDwnld: (allowDwnld: boolean) => void;
+    allowDwnld: boolean;
+    setAllowDwnld: (allowDwnld: boolean) => void;
 
-  cover: File | null;
-  setCover: (cover: File | null) => void;
+    cover: File | null;
+    setCover: (cover: File | null) => void;
 
-  isPercentHintOpen: boolean;
-  setPercentHintOpen: (isPercentHintOpen: boolean) => void;
+    isPercentHintOpen: boolean;
+    setPercentHintOpen: (isPercentHintOpen: boolean) => void;
 
-  authors: string[];
-  setAuthors: (authors: string[]) => void;
+    authors: string[];
+    setAuthors: (authors: string[]) => void;
 
-  royalty: Royalty[];
-  setRoyalty: (authors: Royalty[]) => void;
+    royalty: Royalty[];
+    setRoyalty: (authors: Royalty[]) => void;
 
-  price: number;
-  setPrice: (price: number) => void;
+    price: number;
+    setPrice: (price: number) => void;
 
-  allowResale: boolean;
-  setAllowResale: (allowResale: boolean) => void;
+    allowResale: boolean;
+    setAllowResale: (allowResale: boolean) => void;
 
-  licenseResalePrice: number;
-  setLicenseResalePrice: (licenseResalePrice: number) => void;
+    licenseResalePrice: number;
+    setLicenseResalePrice: (licenseResalePrice: number) => void;
 
-  hashtags: string[];
-  setHashtags: (hashtags: string[]) => void;
+    hashtags: string[];
+    setHashtags: (hashtags: string[]) => void;
+
+    notifications: Notification[];
+    addNotification: (message: string, type: NotificationType) => void;
+    removeNotification: (id: string) => void;
 };
 
 export const useRootStore = create<RootStore>((set) => ({
-  name: "",
-  setName: (name) => set({ name }),
+    name: '',
+    setName: (name) => set({ name }),
 
-  author: "",
-  setAuthor: (author) => set({ author }),
+    author: '',
+    setAuthor: (author) => set({ author }),
 
-  file: null,
-  setFile: (file) => set({ file }),
+    file: null,
+    setFile: (file) => set({ file }),
 
-  fileType: "",
-  setFileType: (fileType) => set({ fileType }),
+    fileType: '',
+    setFileType: (fileType) => set({ fileType }),
 
-  fileSrc: "",
-  setFileSrc: (fileSrc) => set({ fileSrc }),
+    fileSrc: '',
+    setFileSrc: (fileSrc) => set({ fileSrc }),
 
-  allowCover: false,
-  setAllowCover: (allowCover) => set({ allowCover }),
+    allowCover: false,
+    setAllowCover: (allowCover) => set({ allowCover }),
 
-  allowDwnld: false,
-  setAllowDwnld: (allowDwnld) => set({ allowDwnld }),
-  
-  cover: null,
-  setCover: (cover) => set({ cover }),
+    allowDwnld: false,
+    setAllowDwnld: (allowDwnld) => set({ allowDwnld }),
 
-  isPercentHintOpen: true,
-  setPercentHintOpen: (isPercentHintOpen) => set({ isPercentHintOpen }),
+    cover: null,
+    setCover: (cover) => set({ cover }),
 
-  authors: [],
-  setAuthors: (authors) => set({ authors }),
+    isPercentHintOpen: true,
+    setPercentHintOpen: (isPercentHintOpen) => set({ isPercentHintOpen }),
 
-  royalty: [],
-  setRoyalty: (royalty) => set({ royalty }),
+    authors: [],
+    setAuthors: (authors) => set({ authors }),
 
-  price: 0.15,
-  setPrice: (price: number) => set({ price }),
+    royalty: [],
+    setRoyalty: (royalty) => set({ royalty }),
 
-  allowResale: false,
-  setAllowResale: (allowResale) => set({ allowResale }),
+    price: 0.15,
+    setPrice: (price: number) => set({ price }),
 
-  licenseResalePrice: 0,
-  setLicenseResalePrice: (licenseResalePrice) => set({ licenseResalePrice }),
+    allowResale: false,
+    setAllowResale: (allowResale) => set({ allowResale }),
 
-  hashtags: [],
-  setHashtags: (hashtags: string[]) => set({ hashtags }),
+    licenseResalePrice: 0,
+    setLicenseResalePrice: (licenseResalePrice) => set({ licenseResalePrice }),
+
+    hashtags: [],
+    setHashtags: (hashtags: string[]) => set({ hashtags }),
+
+    notifications: [],
+
+    addNotification: (message: string, type: NotificationType = 'info') => {
+        const id = Date.now().toString();
+        const notification = {
+            id,
+            message,
+            type,
+            createdAt: Date.now(),
+        };
+
+        set((state) => ({
+            notifications: [...state.notifications, notification],
+        }));
+    },
+
+    removeNotification: (id: string) => {
+        set((state) => ({
+            notifications: state.notifications.filter((notification) => notification.id !== id),
+        }));
+    },
 }));

src/shared/ui/notification/index.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import { useRootStore } from '~/shared/stores/root';
+
+interface AnimatedNotification {
+    id: string;
+    message: string;
+    type: 'success' | 'danger' | 'warning' | 'info';
+    isExiting: boolean;
+}
+
+export const Notification = () => {
+    const { notifications, removeNotification } = useRootStore();
+    const [animatedNotifications, setAnimatedNotifications] = useState<AnimatedNotification[]>([]);
+
+    useEffect(() => {
+        const currentIds = animatedNotifications.map((n) => n.id);
+        const newNotifications = notifications
+            .filter((n) => !currentIds.includes(n.id))
+            .map((n) => ({ ...n, isExiting: false }));
+
+        if (newNotifications.length > 0) {
+            newNotifications.forEach((notification) => {
+                setTimeout(() => {
+                    handleRemove(notification.id);
+                }, 4000);
+            });
+
+            setAnimatedNotifications((prev) => [...prev, ...newNotifications]);
+        }
+    }, [notifications]);
+
+    // Функция для начала анимации удаления
+    const handleRemove = (id: string) => {
+        setAnimatedNotifications((prev) =>
+            prev.map((n) => (n.id === id ? { ...n, isExiting: true } : n))
+        );
+        setTimeout(() => {
+            setAnimatedNotifications((prev) => prev.filter((n) => n.id !== id));
+            removeNotification(id);
+        }, 300);
+    };
+
+    return (
+        <div className="fixed inset-x-0 top-2 z-50 flex flex-col items-center gap-2 pointer-events-none">
+            {animatedNotifications.map((notification) => (
+                <div
+                    key={notification.id}
+                    onClick={() => handleRemove(notification.id)}
+                    className={`
+                        p-2 rounded shadow-md relative transition-all duration-300 max-w-sm
+                        transform origin-top pointer-events-auto cursor-pointer
+                        ${notification.isExiting ? 'animate-fade-out' : 'animate-slide-in-top'}
+                        ${getNotificationClass(notification.type)}
+                    `}
+                >
+                    <div className="text-center">{notification.message}</div>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+const getNotificationClass = (type: 'success' | 'danger' | 'warning' | 'info'): string => {
+    const baseStyle = 'border border-white bg-opacity-70 backdrop-blur-sm';
+
+    switch (type) {
+        case 'success':
+            return `${baseStyle} bg-primary text-white`;
+        case 'danger':
+            return `${baseStyle} bg-primary text-white`;
+        case 'warning':
+            return `${baseStyle} bg-primary text-white`;
+        case 'info':
+        default:
+            return `${baseStyle} bg-primary text-white`;
+    }
+};

src/shared/utils/start-payload.ts

@@ -0,0 +1,85 @@
+export const START_PARAM_SEPARATOR = '!';
+const REF_STORAGE_KEY = 'ref_id';
+
+type StartPayload = {
+    contentId: string | null;
+    referralId: string | null;
+};
+
+const safeSessionStorage = (): Storage | null => {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    try {
+        return window.sessionStorage;
+    } catch (error) {
+        return null;
+    }
+};
+
+export const resolveStartPayload = (): StartPayload => {
+    if (typeof window === 'undefined') {
+        return { contentId: null, referralId: null };
+    }
+
+    const searchParams = new URLSearchParams(window.location.search);
+    const telegramApp = (window as any)?.Telegram?.WebApp;
+    const rawStartParam = telegramApp?.initDataUnsafe?.start_param ?? null;
+
+    let contentId: string | null = null;
+    let referralId: string | null = null;
+
+    const parsePayload = (payload: string | null) => {
+        if (!payload) {
+            return;
+        }
+        const [contentPart, refPart] = payload.split(START_PARAM_SEPARATOR, 2);
+        if (contentPart) {
+            contentId = contentPart;
+        }
+        if (refPart) {
+            referralId = refPart;
+        }
+    };
+
+    parsePayload(rawStartParam);
+
+    if (!contentId) {
+        const queryContent =
+            searchParams.get('content') ||
+            searchParams.get('cid') ||
+            searchParams.get('start_param');
+        if (queryContent) {
+            contentId = queryContent;
+        }
+    }
+
+    if (!referralId) {
+        const queryRef = searchParams.get('ref') || searchParams.get('ref_id');
+        if (queryRef) {
+            referralId = queryRef;
+        }
+    }
+
+    const storage = safeSessionStorage();
+    if (storage) {
+        if (referralId) {
+            storage.setItem(REF_STORAGE_KEY, referralId);
+        } else {
+            const stored = storage.getItem(REF_STORAGE_KEY);
+            if (stored) {
+                referralId = stored;
+            }
+        }
+    }
+
+    return { contentId, referralId };
+};
+
+export const appendReferral = <T extends Record<string, unknown>>(payload: T): T => {
+    const { referralId } = resolveStartPayload();
+    if (referralId && !payload.ref_id) {
+        return { ...payload, ref_id: referralId } as T;
+    }
+    return payload;
+};

tailwind.config.ts

@@ -1,13 +1,33 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      colors: {
-        gray: "#1d1d1b",
-        primary: "#e40615",
-      },
+    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+    theme: {
+        extend: {
+            colors: {
+                gray: '#1d1d1b',
+                primary: '#e40615',
+            },
+            keyframes: {
+                'slide-in-top': {
+                    '0%': {
+                        transform: 'translateY(-1rem)',
+                        opacity: '0',
+                    },
+                    '100%': {
+                        transform: 'translateY(0)',
+                        opacity: '1',
+                    },
+                },
+                'fade-out': {
+                    '0%': { opacity: '1' },
+                    '100%': { opacity: '0' },
+                },
+            },
+            animation: {
+                'slide-in-top': 'slide-in-top 0.3s ease-out forwards',
+                'fade-out': 'fade-out 0.3s ease-out forwards',
+            },
+        },
     },
-  },
-  plugins: [],
+    plugins: [],
 };

yarn.lock

@@ -225,10 +225,10 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
-"@esbuild/win32-x64@0.19.12":
+"@esbuild/linux-x64@0.19.12":
   version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz"
-  integrity sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==
+  resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz"
+  integrity sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==
 
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
@@ -381,10 +381,15 @@
   resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.15.2.tgz"
   integrity sha512-+Rnav+CaoTE5QJc4Jcwh5toUpnVLKYbpU6Ys0zqbakqbaLQHeglLVHPfxOiQqdNmUy5C2lXz5dwC6tQNX2JW2Q==
 
-"@rollup/rollup-win32-x64-msvc@4.12.0":
+"@rollup/rollup-linux-x64-gnu@4.12.0":
   version "4.12.0"
-  resolved "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.12.0.tgz"
-  integrity sha512-ZYmr5mS2wd4Dew/JjT0Fqi2NPB/ZhZ2VvPp7SmvPZb4Y1CG/LRcS6tcRo2cYU7zLK5A7cdbhWnnWmUjoI4qapg==
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.12.0.tgz"
+  integrity sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA==
+
+"@rollup/rollup-linux-x64-musl@4.12.0":
+  version "4.12.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.12.0.tgz"
+  integrity sha512-LfFdRhNnW0zdMvdCb5FNuWlls2WbbSridJvxOvYWgSBOYZtgBfW9UGNJG//rwMqTX1xQE9BAodvMH9tAusKDUw==
 
 "@sentry-internal/browser-utils@9.1.0":
   version "9.1.0"
@@ -976,6 +981,11 @@ browserslist@^4.22.2, browserslist@^4.23.0, "browserslist@>= 4.21.0":
     node-releases "^2.0.14"
     update-browserslist-db "^1.0.13"
 
+buffer-from@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
 buffer@^6.0.3:
   version "6.0.3"
   resolved "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz"
@@ -1081,6 +1091,14 @@ color-name@1.1.3:
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
+combine-errors@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/combine-errors/-/combine-errors-3.0.3.tgz"
+  integrity sha512-C8ikRNRMygCwaTx+Ek3Yr+OuZzgZjduCOfSQBjbM8V3MfgcjSTeto/GXP6PAwKvJz/v15b7GHZvx5rOlczFw/Q==
+  dependencies:
+    custom-error-instance "2.1.1"
+    lodash.uniqby "4.5.0"
+
 combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz"
@@ -1122,6 +1140,11 @@ csstype@^3.0.2, csstype@^3.1.1:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
+custom-error-instance@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/custom-error-instance/-/custom-error-instance-2.1.1.tgz"
+  integrity sha512-p6JFxJc3M4OTD2li2qaHkDCw9SfMw82Ldr6OC9Je1aXiGfhx2W8p3GaoeaGrPJTUN9NirTM/KTxHWMUdR1rsUg==
+
 debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz"
@@ -1769,6 +1792,11 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
+graceful-fs@^4.2.4:
+  version "4.2.11"
+  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
 graphemer@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz"
@@ -1975,6 +2003,11 @@ is-shared-array-buffer@^1.0.2, is-shared-array-buffer@^1.0.3:
   dependencies:
     call-bind "^1.0.7"
 
+is-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
+
 is-string@^1.0.5, is-string@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz"
@@ -2027,6 +2060,11 @@ jiti@^1.19.1:
   resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz"
   integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
 
+js-base64@^3.7.2:
+  version "3.7.8"
+  resolved "https://registry.npmjs.org/js-base64/-/js-base64-3.7.8.tgz"
+  integrity sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow==
+
 js-sha3@0.8.0:
   version "0.8.0"
   resolved "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz"
@@ -2076,11 +2114,6 @@ json5@^2.2.3:
   resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
-jssha@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.npmjs.org/jssha/-/jssha-3.3.1.tgz"
-  integrity sha512-VCMZj12FCFMQYcFLPRm/0lOBbLi8uM2BhXPTqw3U4YAfs4AZfiApOoBLoN8cQE60Z50m1MYMTQVCfgF/KaCVhQ==
-
 jssha@3.2.0:
   version "3.2.0"
   resolved "https://registry.npmjs.org/jssha/-/jssha-3.2.0.tgz"
@@ -2133,11 +2166,61 @@ lodash-es@^4.17.21:
   resolved "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
 
+lodash._baseiteratee@~4.7.0:
+  version "4.7.0"
+  resolved "https://registry.npmjs.org/lodash._baseiteratee/-/lodash._baseiteratee-4.7.0.tgz"
+  integrity sha512-nqB9M+wITz0BX/Q2xg6fQ8mLkyfF7MU7eE+MNBNjTHFKeKaZAPEzEg+E8LWxKWf1DQVflNEn9N49yAuqKh2mWQ==
+  dependencies:
+    lodash._stringtopath "~4.8.0"
+
+lodash._basetostring@~4.12.0:
+  version "4.12.0"
+  resolved "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-4.12.0.tgz"
+  integrity sha512-SwcRIbyxnN6CFEEK4K1y+zuApvWdpQdBHM/swxP962s8HIxPO3alBH5t3m/dl+f4CMUug6sJb7Pww8d13/9WSw==
+
+lodash._baseuniq@~4.6.0:
+  version "4.6.0"
+  resolved "https://registry.npmjs.org/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz"
+  integrity sha512-Ja1YevpHZctlI5beLA7oc5KNDhGcPixFhcqSiORHNsp/1QTv7amAXzw+gu4YOvErqVlMVyIJGgtzeepCnnur0A==
+  dependencies:
+    lodash._createset "~4.0.0"
+    lodash._root "~3.0.0"
+
+lodash._createset@~4.0.0:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/lodash._createset/-/lodash._createset-4.0.3.tgz"
+  integrity sha512-GTkC6YMprrJZCYU3zcqZj+jkXkrXzq3IPBcF/fIPpNEAB4hZEtXU8zp/RwKOvZl43NUmwDbyRk3+ZTbeRdEBXA==
+
+lodash._root@~3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/lodash._root/-/lodash._root-3.0.1.tgz"
+  integrity sha512-O0pWuFSK6x4EXhM1dhZ8gchNtG7JMqBtrHdoUFUWXD7dJnNSUze1GuyQr5sOs0aCvgGeI3o/OJW8f4ca7FDxmQ==
+
+lodash._stringtopath@~4.8.0:
+  version "4.8.0"
+  resolved "https://registry.npmjs.org/lodash._stringtopath/-/lodash._stringtopath-4.8.0.tgz"
+  integrity sha512-SXL66C731p0xPDC5LZg4wI5H+dJo/EO4KTqOMwLYCH3+FmmfAKJEZCm6ohGpI+T1xwsDsJCfL4OnhorllvlTPQ==
+  dependencies:
+    lodash._basetostring "~4.12.0"
+
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz"
+  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
+
+lodash.uniqby@4.5.0:
+  version "4.5.0"
+  resolved "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.5.0.tgz"
+  integrity sha512-IRt7cfTtHy6f1aRVA5n7kT8rgN3N1nH6MOWLcHfpWG2SH19E3JksLK38MktLxZDhlAjCP9jpIXkOnRXlu6oByQ==
+  dependencies:
+    lodash._baseiteratee "~4.7.0"
+    lodash._baseuniq "~4.6.0"
+
 loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
@@ -2544,6 +2627,15 @@ prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+proper-lockfile@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-4.1.2.tgz"
+  integrity sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==
+  dependencies:
+    graceful-fs "^4.2.4"
+    retry "^0.12.0"
+    signal-exit "^3.0.2"
+
 proxy-from-env@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
@@ -2554,6 +2646,11 @@ punycode@^2.1.0:
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
+querystringify@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
@@ -2697,6 +2794,11 @@ remove-accents@0.5.0:
   resolved "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz"
   integrity sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==
 
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
+  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
@@ -2711,6 +2813,11 @@ resolve@^1.1.7, resolve@^1.22.2, resolve@^1.22.4:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+retry@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz"
+  integrity sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==
+
 reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
@@ -2834,6 +2941,11 @@ side-channel@^1.0.4:
     get-intrinsic "^1.2.4"
     object-inspect "^1.13.1"
 
+signal-exit@^3.0.2:
+  version "3.0.7"
+  resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
 signal-exit@^4.0.1:
   version "4.1.0"
   resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz"
@@ -3080,6 +3192,19 @@ tslib@^2.6.2:
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
+tus-js-client@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.npmjs.org/tus-js-client/-/tus-js-client-4.3.1.tgz"
+  integrity sha512-ZLeYmjrkaU1fUsKbIi8JML52uAocjEZtBx4DKjRrqzrZa0O4MYwT6db+oqePlspV+FxXJAyFBc/L5gwUi2OFsg==
+  dependencies:
+    buffer-from "^1.1.2"
+    combine-errors "^3.0.3"
+    is-stream "^2.0.0"
+    js-base64 "^3.7.2"
+    lodash.throttle "^4.1.1"
+    proper-lockfile "^4.1.2"
+    url-parse "^1.5.7"
+
 tweetnacl-util@^0.15.1:
   version "0.15.1"
   resolved "https://registry.npmjs.org/tweetnacl-util/-/tweetnacl-util-0.15.1.tgz"
@@ -3194,6 +3319,14 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+url-parse@^1.5.7:
+  version "1.5.10"
+  resolved "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
 use-sync-external-store@1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"