Передаем на тест

frontend/src/components/Navbar.svelte

@@ -51,6 +51,7 @@
                 <a href="/tools/search" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.tools_search}</a>
                 <a href="/tools/mapper" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.tools_mapper}</a>
                 <a href="/tools/debug" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.tools_debug}</a>
+                <a href="/tools/storage" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.tools_storage}</a>
             </div>
         </div>
         <div class="relative inline-block group">

frontend/src/components/storage/FileList.svelte

@@ -0,0 +1,85 @@
+<!-- [DEF:FileList:Component] -->
+<!--
+@SEMANTICS: storage, files, list, table
+@PURPOSE:   Displays a table of files with metadata and actions.
+@LAYER:     Component
+@RELATION:  DEPENDS_ON -> storageService
+
+@PROPS:     files (Array) - List of StoredFile objects.
+@EVENTS:    delete (filename) - Dispatched when a file is deleted.
+-->
+
+<script lang="ts">
+  // [SECTION: IMPORTS]
+  import { createEventDispatcher } from 'svelte';
+  import { downloadFileUrl } from '../../services/storageService';
+  // [/SECTION: IMPORTS]
+
+  export let files = [];
+  const dispatch = createEventDispatcher();
+
+  function formatSize(bytes) {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  }
+
+  function formatDate(dateStr) {
+    return new Date(dateStr).toLocaleString();
+  }
+</script>
+
+<!-- [SECTION: TEMPLATE] -->
+<div class="overflow-x-auto">
+  <table class="min-w-full bg-white border border-gray-200">
+    <thead class="bg-gray-50">
+      <tr>
+        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
+        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th>
+        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created At</th>
+        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-gray-200">
+      {#each files as file}
+        <tr class="hover:bg-gray-50">
+          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{file.name}</td>
+          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 capitalize">{file.category}</td>
+          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{formatSize(file.size)}</td>
+          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{formatDate(file.created_at)}</td>
+          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+            <a 
+              href={downloadFileUrl(file.category, file.name)} 
+              download={file.name}
+              class="text-indigo-600 hover:text-indigo-900 mr-4"
+            >
+              Download
+            </a>
+            <button 
+              on:click={() => dispatch('delete', { category: file.category, filename: file.name })}
+              class="text-red-600 hover:text-red-900"
+            >
+              Delete
+            </button>
+          </td>
+        </tr>
+      {:else}
+        <tr>
+          <td colspan="5" class="px-6 py-10 text-center text-sm text-gray-500">
+            No files found.
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+<!-- [/SECTION: TEMPLATE] -->
+
+<style>
+  /* ... */
+</style>
+
+<!-- [/DEF:FileList:Component] -->

frontend/src/components/storage/FileUpload.svelte

@@ -0,0 +1,126 @@
+<!-- [DEF:FileUpload:Component] -->
+<!--
+@SEMANTICS: storage, upload, files
+@PURPOSE:   Provides a form for uploading files to a specific category.
+@LAYER:     Component
+@RELATION:  DEPENDS_ON -> storageService
+
+@PROPS:     None
+@EVENTS:    uploaded - Dispatched when a file is successfully uploaded.
+-->
+
+<script lang="ts">
+  // [SECTION: IMPORTS]
+  import { createEventDispatcher } from 'svelte';
+  import { uploadFile } from '../../services/storageService';
+  import { addToast } from '../../lib/toasts';
+  // [/SECTION: IMPORTS]
+
+  // [DEF:handleUpload:Function]
+  /**
+   * @purpose Handles the file upload process.
+   * @pre     A file must be selected in the file input.
+   * @post    The file is uploaded to the server and a success toast is shown.
+   */
+  const dispatch = createEventDispatcher();
+  let fileInput;
+  let category = 'backup';
+  let isUploading = false;
+  let dragOver = false;
+
+  async function handleUpload() {
+    const file = fileInput.files[0];
+    if (!file) return;
+
+    isUploading = true;
+    try {
+      await uploadFile(file, category);
+      addToast(`File ${file.name} uploaded successfully.`, 'success');
+      fileInput.value = '';
+      dispatch('uploaded');
+    } catch (error) {
+      addToast(`Upload failed: ${error.message}`, 'error');
+    } finally {
+      isUploading = false;
+    }
+  }
+  // [/DEF:handleUpload:Function]
+
+  // [DEF:handleDrop:Function]
+  /**
+   * @purpose Handles the file drop event for drag-and-drop.
+   * @param   {DragEvent} event - The drop event.
+   */
+  function handleDrop(event) {
+    event.preventDefault();
+    dragOver = false;
+    const files = event.dataTransfer.files;
+    if (files.length > 0) {
+      fileInput.files = files;
+      handleUpload();
+    }
+  }
+  // [/DEF:handleDrop:Function]
+</script>
+
+<!-- [SECTION: TEMPLATE] -->
+<div class="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
+  <h2 class="text-lg font-semibold mb-4">Upload File</h2>
+  
+  <div class="space-y-4">
+    <div>
+      <label class="block text-sm font-medium text-gray-700 mb-1">Target Category</label>
+      <select 
+        bind:value={category}
+        class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+      >
+        <option value="backup">Backup</option>
+        <option value="repository">Repository</option>
+      </select>
+    </div>
+
+    <div 
+      class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-dashed rounded-md transition-colors
+        {dragOver ? 'border-indigo-500 bg-indigo-50' : 'border-gray-300'}"
+      on:dragover|preventDefault={() => dragOver = true}
+      on:dragleave|preventDefault={() => dragOver = false}
+      on:drop|preventDefault={handleDrop}
+    >
+      <div class="space-y-1 text-center">
+        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
+          <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+        <div class="flex text-sm text-gray-600">
+          <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
+            <span>Upload a file</span>
+            <input 
+              id="file-upload" 
+              name="file-upload" 
+              type="file" 
+              class="sr-only" 
+              bind:this={fileInput}
+              on:change={handleUpload}
+              disabled={isUploading}
+            >
+          </label>
+          <p class="pl-1">or drag and drop</p>
+        </div>
+        <p class="text-xs text-gray-500">ZIP, YAML, JSON up to 50MB</p>
+      </div>
+    </div>
+
+    {#if isUploading}
+      <div class="flex items-center justify-center space-x-2 text-indigo-600">
+        <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-indigo-600"></div>
+        <span class="text-sm font-medium">Uploading...</span>
+      </div>
+    {/if}
+  </div>
+</div>
+<!-- [/SECTION: TEMPLATE] -->
+
+<style>
+  /* ... */
+</style>
+
+<!-- [/DEF:FileUpload:Component] -->