From 9aeaaff11adf42c508dd548a6a3fd1b9a114fbc7 Mon Sep 17 00:00:00 2001
From: busya <uglypod@gmail.com>
Date: Wed, 3 Jun 2026 14:32:13 +0300
Subject: [PATCH] =?UTF-8?q?refactor(frontend):=20migrate=20legacy=20src/co?=
 =?UTF-8?q?mponents/=20=E2=86=92=20/components/,=20remove=20console.count?=
 =?UTF-8?q?=20from=20Sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/DynamicForm.svelte    |  92 ---------
 frontend/src/components/EnvSelector.svelte    |  61 ------
 frontend/src/components/PasswordPrompt.svelte | 184 ------------------
 frontend/src/components/TaskList.svelte       | 113 -----------
 .../src/components/auth/ProtectedRoute.svelte | 145 --------------
 .../components/llm/ValidationReport.svelte    |  82 --------
 .../lib/components/auth/ProtectedRoute.svelte | 108 ++++++++++
 .../components/backups/BackupList.svelte      |   6 +-
 .../components/backups/BackupManager.svelte   |   8 +-
 .../dashboard}/DashboardGrid.svelte           |  10 +-
 .../dashboard}/RepositoryDashboardGrid.svelte |  10 +-
 .../components/git/BranchSelector.svelte      |   0
 .../components/git/CommitHistory.svelte       |   6 +-
 .../components/git/CommitModal.svelte         |   0
 .../components/git/ConflictResolver.svelte    |   0
 .../components/git/DeploymentModal.svelte     |   0
 .../components/git/GitInitPanel.svelte        |   0
 .../components/git/GitManager.svelte          |   2 +-
 .../components/git/GitMergeDialog.svelte      |   0
 .../components/git/GitOperationsPanel.svelte  |   0
 .../components/git/GitReleasePanel.svelte     |   2 +-
 .../components/git/GitWorkspacePanel.svelte   |   0
 ...nager.unfinished_merge.integration.test.ts |   6 +-
 .../{ => lib}/components/git/useGitManager.ts |   6 +-
 .../components/layout}/Footer.svelte          |   5 -
 .../components/layout}/Navbar.svelte          |   2 +-
 .../src/lib/components/layout/Sidebar.svelte  |   4 -
 .../lib/components/layout/TaskDrawer.svelte   |   4 +-
 .../components/llm/DocPreview.svelte          |   2 +-
 .../components/llm/ProviderConfig.svelte      |   4 +-
 .../provider_config.integration.test.ts       |   2 +-
 .../migration}/MissingMappingModal.svelte     |   0
 .../migration/PasswordPrompt.svelte           | 153 +++++++++++++++
 .../components/storage/FileList.svelte        |   4 +-
 .../components/storage/FileUpload.svelte      |   4 +-
 .../components/tasks/LogEntryRow.svelte       |   0
 .../components/tasks/LogFilterBar.svelte      |   0
 .../components/tasks}/TaskHistory.svelte      |   4 +-
 .../components/tasks/TaskLogPanel.svelte      |   0
 .../components/tasks}/TaskLogViewer.svelte    |   8 +-
 .../components/tasks/TaskResultPanel.svelte   |   0
 .../components/tasks}/TaskRunner.svelte       |  10 +-
 .../tasks/__tests__/TaskLogViewer.test.ts}    |   4 +-
 .../components/tools/DebugTool.svelte         |   6 +-
 .../components/tools/MapperTool.svelte        |   8 +-
 .../src/lib/components/ui/EnvSelector.svelte  |  49 +++++
 .../components/ui}/MappingTable.svelte        |   2 +-
 .../ui}/StartupEnvironmentWizard.svelte       |   2 +-
 .../components/ui}/Toast.svelte               |  17 +-
 frontend/src/routes/+layout.svelte            |  10 +-
 frontend/src/routes/admin/roles/+page.svelte  |   2 +-
 .../src/routes/admin/settings/+page.svelte    |   2 +-
 .../routes/admin/settings/llm/+page.svelte    |   2 +-
 frontend/src/routes/admin/users/+page.svelte  |   4 +-
 frontend/src/routes/dashboards/+page.svelte   |   4 +-
 .../dashboards/MigrateDashboardModal.svelte   |   2 +-
 .../src/routes/dashboards/[id]/+page.svelte   |   6 +-
 .../[id]/components/DashboardHeader.svelte    |   2 +-
 frontend/src/routes/git/+page.svelte          |   2 +-
 frontend/src/routes/migration/+page.svelte    |  14 +-
 .../routes/migration/mappings/+page.svelte    |   4 +-
 .../src/routes/settings/LlmSettings.svelte    |   2 +-
 .../src/routes/tools/backups/+page.svelte     |   2 +-
 frontend/src/routes/tools/debug/+page.svelte  |   4 +-
 frontend/src/routes/tools/mapper/+page.svelte |   4 +-
 .../src/routes/tools/storage/+page.svelte     |   4 +-
 66 files changed, 412 insertions(+), 793 deletions(-)
 delete mode 100755 frontend/src/components/DynamicForm.svelte
 delete mode 100644 frontend/src/components/EnvSelector.svelte
 delete mode 100644 frontend/src/components/PasswordPrompt.svelte
 delete mode 100644 frontend/src/components/TaskList.svelte
 delete mode 100644 frontend/src/components/auth/ProtectedRoute.svelte
 delete mode 100644 frontend/src/components/llm/ValidationReport.svelte
 create mode 100644 frontend/src/lib/components/auth/ProtectedRoute.svelte
 rename frontend/src/{ => lib}/components/backups/BackupList.svelte (96%)
 rename frontend/src/{ => lib}/components/backups/BackupManager.svelte (97%)
 rename frontend/src/{components => lib/components/dashboard}/DashboardGrid.svelte (97%)
 rename frontend/src/{components => lib/components/dashboard}/RepositoryDashboardGrid.svelte (98%)
 rename frontend/src/{ => lib}/components/git/BranchSelector.svelte (100%)
 rename frontend/src/{ => lib}/components/git/CommitHistory.svelte (95%)
 rename frontend/src/{ => lib}/components/git/CommitModal.svelte (100%)
 rename frontend/src/{ => lib}/components/git/ConflictResolver.svelte (100%)
 rename frontend/src/{ => lib}/components/git/DeploymentModal.svelte (100%)
 rename frontend/src/{ => lib}/components/git/GitInitPanel.svelte (100%)
 rename frontend/src/{ => lib}/components/git/GitManager.svelte (99%)
 rename frontend/src/{ => lib}/components/git/GitMergeDialog.svelte (100%)
 rename frontend/src/{ => lib}/components/git/GitOperationsPanel.svelte (100%)
 rename frontend/src/{ => lib}/components/git/GitReleasePanel.svelte (98%)
 rename frontend/src/{ => lib}/components/git/GitWorkspacePanel.svelte (100%)
 rename frontend/src/{ => lib}/components/git/__tests__/git_manager.unfinished_merge.integration.test.ts (87%)
 rename frontend/src/{ => lib}/components/git/useGitManager.ts (99%)
 rename frontend/src/{components => lib/components/layout}/Footer.svelte (74%)
 rename frontend/src/{components => lib/components/layout}/Navbar.svelte (98%)
 rename frontend/src/{ => lib}/components/llm/DocPreview.svelte (96%)
 rename frontend/src/{ => lib}/components/llm/ProviderConfig.svelte (99%)
 rename frontend/src/{ => lib}/components/llm/__tests__/provider_config.integration.test.ts (98%)
 rename frontend/src/{components => lib/components/migration}/MissingMappingModal.svelte (100%)
 create mode 100644 frontend/src/lib/components/migration/PasswordPrompt.svelte
 rename frontend/src/{ => lib}/components/storage/FileList.svelte (97%)
 rename frontend/src/{ => lib}/components/storage/FileUpload.svelte (97%)
 rename frontend/src/{ => lib}/components/tasks/LogEntryRow.svelte (100%)
 rename frontend/src/{ => lib}/components/tasks/LogFilterBar.svelte (100%)
 rename frontend/src/{components => lib/components/tasks}/TaskHistory.svelte (98%)
 rename frontend/src/{ => lib}/components/tasks/TaskLogPanel.svelte (100%)
 rename frontend/src/{components => lib/components/tasks}/TaskLogViewer.svelte (96%)
 rename frontend/src/{ => lib}/components/tasks/TaskResultPanel.svelte (100%)
 rename frontend/src/{components => lib/components/tasks}/TaskRunner.svelte (98%)
 rename frontend/src/{components/__tests__/task_log_viewer.test.ts => lib/components/tasks/__tests__/TaskLogViewer.test.ts} (98%)
 rename frontend/src/{ => lib}/components/tools/DebugTool.svelte (97%)
 rename frontend/src/{ => lib}/components/tools/MapperTool.svelte (98%)
 create mode 100644 frontend/src/lib/components/ui/EnvSelector.svelte
 rename frontend/src/{components => lib/components/ui}/MappingTable.svelte (98%)
 rename frontend/src/{components => lib/components/ui}/StartupEnvironmentWizard.svelte (99%)
 rename frontend/src/{components => lib/components/ui}/Toast.svelte (89%)
 mode change 100755 => 100644

diff --git a/frontend/src/components/DynamicForm.svelte b/frontend/src/components/DynamicForm.svelte
deleted file mode 100755
index 6b5a0a236..000000000
--- a/frontend/src/components/DynamicForm.svelte
+++ /dev/null
@@ -1,92 +0,0 @@
-<!-- #region DynamicForm [C:3] [TYPE Component] [SEMANTICS form, schema, dynamic, json-schema, generate] -->
-<!-- @BRIEF Component component: components/DynamicForm.svelte -->
-<!-- @LAYER UI -->
-<!--
-@SEMANTICS: form, schema, dynamic, json-schema
-@PURPOSE: Generates a form dynamically based on a JSON schema.
-@LAYER UI
-@RELATION BINDS_TO -> [onsubmit callback]
-
-@PROPS:
-- schema: Object - JSON schema for the form.
-@EVENTS:
-- submit: Object - Dispatched when the form is submitted, containing the form data.
--->
-<script lang="ts">
-  let {
-    schema,
-    onsubmit = () => {},
-  } = $props();
-
-    let formData = {};
-
-    // #region handleSubmit:Function [TYPE Function]
-    /**
-     * @purpose Emits submitted form data via callback prop.
-     * @pre formData contains user input.
-     * @post Parent callback receives formData snapshot.
-     */
-    function handleSubmit() {
-        console.log("[DynamicForm][Action] Submitting form data.", { formData });
-        onsubmit(formData);
-    }
-    // #endregion handleSubmit:Function
-
-    // #region initializeForm:Function [TYPE Function]
-    /**
-     * @purpose Initialize form data with default values from the schema.
-     * @pre schema is provided and contains properties.
-     * @post formData is initialized with default values or empty strings.
-     */
-    function initializeForm() {
-        if (schema && schema.properties) {
-            for (const key in schema.properties) {
-                formData[key] = schema.properties[key].default || '';
-            }
-        }
-    }
-    // #endregion initializeForm:Function
-
-    initializeForm();
-</script>
-
-<!-- [SECTION: TEMPLATE] -->
-<form onsubmit={(event) => { event.preventDefault(); handleSubmit(); }} class="space-y-4">
-    {#if schema && schema.properties}
-        {#each Object.entries(schema.properties) as [key, prop]}
-            <div class="flex flex-col">
-                <label for={key} class="mb-1 font-semibold text-text">{prop.title || key}</label>
-                {#if prop.type === 'string'}
-                    <input
-                        type="text"
-                        id={key}
-                        bind:value={formData[key]}
-                        placeholder={prop.description || ''}
-                        class="p-2 border rounded-md"
-                    />
-                {:else if prop.type === 'number' || prop.type === 'integer'}
-                    <input
-                        type="number"
-                        id={key}
-                        bind:value={formData[key]}
-                        placeholder={prop.description || ''}
-                        class="p-2 border rounded-md"
-                    />
-                {:else if prop.type === 'boolean'}
-                    <input
-                        type="checkbox"
-                        id={key}
-                        bind:checked={formData[key]}
-                        class="h-5 w-5"
-                    />
-                {/if}
-            </div>
-        {/each}
-        <button type="submit" class="w-full bg-success text-white p-2 rounded-md hover:bg-success">
-            Run Task
-        </button>
-    {/if}
-</form>
-<!-- [/SECTION] -->
-
-<!-- #endregion DynamicForm -->
diff --git a/frontend/src/components/EnvSelector.svelte b/frontend/src/components/EnvSelector.svelte
deleted file mode 100644
index cf888261f..000000000
--- a/frontend/src/components/EnvSelector.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<!-- #region EnvSelector [C:3] [TYPE Component] [SEMANTICS environment, selector, dropdown, migration] -->
-<!-- @BRIEF Component component: components/EnvSelector.svelte -->
-<!-- @LAYER UI -->
-<!--
-@SEMANTICS: environment, selector, dropdown, migration
-@PURPOSE:   Provides a UI component for selecting source and target environments.
-@LAYER     Feature
-@RELATION  BINDS_TO -> [environments store]
-
-@INVARIANT: Source and target environments must be selectable from the list of configured environments.
--->
-
-<script lang="ts">
-  // [SECTION: IMPORTS]
-  import { t } from '$lib/i18n/index.svelte.js';
-  // [/SECTION]
-
-  // [SECTION: PROPS]
-  let {
-    label = "",
-    selectedId = $bindable(""),
-    environments = [],
-    onchange = () => {},
-  } = $props();
-
-  // [/SECTION]
-
-  // #region handleSelect:Function [TYPE Function]
-  /**
-   * @purpose Propagates the selection change through a callback prop.
-   * @pre     event.target must be an HTMLSelectElement.
-   * @post    selectedId is updated and parent callback receives the selected environment id.
-   * @param   {Event} event - The change event from the select element.
-   */
-  function handleSelect(event: Event) {
-    const target = event.target as HTMLSelectElement;
-    selectedId = target.value;
-    onchange({ id: selectedId });
-  }
-  // #endregion handleSelect:Function
-</script>
-
-<!-- [SECTION: TEMPLATE] -->
-<div class="flex flex-col space-y-1">
-  <label for="env-select" class="text-sm font-medium text-text">{label}</label>
-  <select
-    id="env-select"
-    class="block w-full pl-3 pr-10 py-2 text-base border-border-strong focus:outline-none focus:ring-primary-ring focus:border-primary-ring sm:text-sm rounded-md"
-    value={selectedId}
-    onchange={handleSelect}
-  >
-    <option value="" disabled>{$t.common?.choose_environment}</option>
-    {#each environments as env}
-      <option value={env.id}>{env.name} ({env.url})</option>
-    {/each}
-  </select>
-</div>
-<!-- [/SECTION] -->
-
-
-<!-- #endregion EnvSelector -->
diff --git a/frontend/src/components/PasswordPrompt.svelte b/frontend/src/components/PasswordPrompt.svelte
deleted file mode 100644
index 6b7295743..000000000
--- a/frontend/src/components/PasswordPrompt.svelte
+++ /dev/null
@@ -1,184 +0,0 @@
-<!-- #region PasswordPrompt [C:3] [TYPE Component] [SEMANTICS password, prompt, modal, security, input] -->
-<!-- @BRIEF Component component: components/PasswordPrompt.svelte -->
-<!-- @LAYER UI -->
-<!--
-@SEMANTICS: password, prompt, modal, input, security
-@PURPOSE: A modal component to prompt the user for database passwords when a migration task is paused.
-@LAYER UI
-@RELATION USES -> [ApiModule]
-@RELATION BINDS_TO -> [EXT:frontend:onresume]
-@RELATION BINDS_TO -> [EXT:frontend:oncancel]
--->
-<script lang="ts">
-    let {
-        show = false,
-        databases = [],
-        errorMessage = "",
-        onresume = () => {},
-        oncancel = () => {},
-    } = $props();
-
-    let passwords = $state({});
-    let submitting = $state(false);
-
-    // #region handleSubmit:Function [TYPE Function]
-    // @PURPOSE: Validates and forwards passwords to resume the task.
-    // @PRE: All database passwords must be entered.
-    // @POST: Parent resume callback receives passwords payload.
-    function handleSubmit() {
-        if (submitting) return;
-
-        // Validate all passwords entered
-        const missing = databases.filter((db) => !passwords[db]);
-        if (missing.length > 0) {
-            alert(`Please enter passwords for: ${missing.join(", ")}`);
-            return;
-        }
-
-        submitting = true;
-        onresume({ passwords });
-        // Reset submitting state is handled by parent or on close
-    }
-    // #endregion handleSubmit:Function
-
-    // #region handleCancel:Function [TYPE Function]
-    // @PURPOSE: Cancels the password prompt.
-    // @PRE: Modal is open.
-    // @POST: Parent cancel callback is invoked and show is set to false.
-    function handleCancel() {
-        oncancel();
-        show = false;
-    }
-    // #endregion handleCancel:Function
-
-    // Reset passwords when modal opens/closes
-    $effect(() => {
-        if (!show) {
-            passwords = {};
-            submitting = false;
-        }
-    });
-</script>
-
-{#if show}
-    <div
-        class="fixed inset-0 z-50 overflow-y-auto"
-        aria-labelledby="modal-title"
-        role="dialog"
-        aria-modal="true"
-    >
-        <div
-            class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
-        >
-            <!-- Background overlay -->
-            <div
-                class="fixed inset-0 bg-surface-muted bg-opacity-75 transition-opacity"
-                aria-hidden="true"
-                onclick={handleCancel}
-            ></div>
-
-            <span
-                class="hidden sm:inline-block sm:align-middle sm:h-screen"
-                aria-hidden="true">&#8203;</span
-            >
-
-            <div
-                class="inline-block align-bottom bg-surface-card rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
-            >
-                <div class="bg-surface-card px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                    <div class="sm:flex sm:items-start">
-                        <div
-                            class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-destructive-light sm:mx-0 sm:h-10 sm:w-10"
-                        >
-                            <!-- Heroicon name: outline/lock-closed -->
-                            <svg
-                                class="h-6 w-6 text-destructive"
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                                aria-hidden="true"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-                                />
-                            </svg>
-                        </div>
-                        <div
-                            class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"
-                        >
-                            <h3
-                                class="text-lg leading-6 font-medium text-text"
-                                id="modal-title"
-                            >
-                                Database Password Required
-                            </h3>
-                            <div class="mt-2">
-                                <p class="text-sm text-text-muted mb-4">
-                                    The migration process requires passwords for
-                                    the following databases to proceed.
-                                </p>
-
-                                {#if errorMessage}
-                                    <div
-                                        class="mb-4 p-2 bg-destructive-light text-destructive text-xs rounded border border-destructive-light"
-                                    >
-                                        Error: {errorMessage}
-                                    </div>
-                                {/if}
-
-                                <form
-                                    onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}
-                                    class="space-y-4"
-                                >
-                                    {#each databases as dbName}
-                                        <div>
-                                            <label
-                                                for="password-{dbName}"
-                                                class="block text-sm font-medium text-text"
-                                            >
-                                                Password for {dbName}
-                                            </label>
-                                            <input
-                                                type="password"
-                                                id="password-{dbName}"
-                                                bind:value={passwords[dbName]}
-                                                class="mt-1 block w-full border-border-strong rounded-md shadow-sm focus:ring-primary-ring focus:border-primary-ring sm:text-sm p-2 border"
-                                                placeholder="Enter password"
-                                                required
-                                            />
-                                        </div>
-                                    {/each}
-                                </form>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    class="bg-surface-muted px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
-                >
-                    <button
-                        type="button"
-                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-ring sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50"
-                        onclick={handleSubmit}
-                        disabled={submitting}
-                    >
-                        {submitting ? "Resuming..." : "Resume Migration"}
-                    </button>
-                    <button
-                        type="button"
-                        class="mt-3 w-full inline-flex justify-center rounded-md border border-border-strong shadow-sm px-4 py-2 bg-surface-card text-base font-medium text-text hover:bg-surface-muted focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-ring sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-                        onclick={handleCancel}
-                        disabled={submitting}
-                    >
-                        Cancel
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-{/if}
-<!-- #endregion PasswordPrompt -->
diff --git a/frontend/src/components/TaskList.svelte b/frontend/src/components/TaskList.svelte
deleted file mode 100644
index ae35d459e..000000000
--- a/frontend/src/components/TaskList.svelte
+++ /dev/null
@@ -1,113 +0,0 @@
-<!-- #region TaskList [C:3] [TYPE Component] [SEMANTICS task, list, status, history, timeline] -->
-<!-- @BRIEF Component component: components/TaskList.svelte -->
-<!-- @LAYER UI -->
-<!--
-@SEMANTICS: tasks, list, status, history
-@PURPOSE:   Displays a list of tasks with their status and execution details.
-@LAYER     Component
-@RELATION  USES -> [EXT:frontend:api.js]
--->
-
-<script lang="ts">
-  import { formatDistanceToNow } from 'date-fns';
-  import { t } from '$lib/i18n/index.svelte.js';
-
-  let {
-    tasks = [],
-    loading = false,
-    selectedTaskId = null,
-    onselect = () => {},
-  } = $props();
-
-  // #region getStatusColor:Function [TYPE Function]
-  // @PURPOSE: Returns the CSS color class for a given task status.
-  // @PRE: status string is provided.
-  // @POST: Returns tailwind color class string.
-  function getStatusColor(status: string) {
-    switch (status) {
-      case 'SUCCESS': return 'bg-success-light text-success';
-      case 'FAILED': return 'bg-destructive-light text-destructive';
-      case 'RUNNING': return 'bg-primary-light text-primary animate-pulse';
-      case 'PENDING': return 'bg-surface-muted text-text';
-      case 'AWAITING_INPUT':
-      case 'AWAITING_MAPPING': return 'bg-warning-light text-warning';
-      default: return 'bg-surface-muted text-text';
-    }
-  }
-  // #endregion getStatusColor:Function
-
-  // #region formatTime:Function [TYPE Function]
-  // @PURPOSE: Formats a date string using date-fns.
-  // @PRE: dateStr is a valid date string or null.
-  // @POST: Returns human-readable relative time string.
-  function formatTime(dateStr: string | null) {
-    if (!dateStr) return 'N/A';
-    try {
-      return formatDistanceToNow(new Date(dateStr), { addSuffix: true });
-    } catch (e) {
-      return 'Invalid date';
-    }
-  }
-  // #endregion formatTime:Function
-
-  // #region handleTaskClick:Function [TYPE Function]
-  // @PURPOSE: Forwards the selected task through a callback prop.
-  // @PRE: taskId is provided.
-  // @POST: Parent callback receives task id and task payload.
-  function handleTaskClick(task: any) {
-    onselect({ id: task.id, task });
-  }
-  // #endregion handleTaskClick:Function
-</script>
-
-<div class="bg-surface-card shadow overflow-hidden sm:rounded-md">
-  {#if loading && tasks.length === 0}
-    <div class="p-4 text-center text-text-muted">{$t.tasks?.loading}</div>
-  {:else if tasks.length === 0}
-    <div class="p-4 text-center text-text-muted">{$t.tasks?.no_tasks}</div>
-  {:else}
-    <ul class="divide-y divide-border">
-      {#each tasks as task (task.id)}
-        <li>
-          <button
-            class="block w-full text-left transition duration-150 ease-in-out focus:outline-none hover:bg-surface-muted {selectedTaskId === task.id ? 'bg-primary-light' : ''}"
-            onclick={() => handleTaskClick(task)}
-          >
-            <div class="px-4 py-4 sm:px-6">
-              <div class="flex items-center justify-between">
-                <div class="text-sm font-medium text-primary truncate">
-                  {task.plugin_id.toUpperCase()}
-                  <span class="ml-2 text-xs text-text-subtle font-mono">{task.id.substring(0, 8)}</span>
-                </div>
-                <div class="ml-2 flex-shrink-0 flex">
-                  <p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {getStatusColor(task.status)}">
-                    {task.status}
-                  </p>
-                </div>
-              </div>
-              <div class="mt-2 sm:flex sm:justify-between">
-                <div class="sm:flex">
-                  <p class="flex items-center text-sm text-text-muted">
-                    {#if task.params?.environment_id || task.params?.source_env_id}
-                      <span class="mr-2">Env: {task.params.environment_id || task.params.source_env_id}</span>
-                    {/if}
-                  </p>
-                </div>
-                <div class="mt-2 flex items-center text-sm text-text-muted sm:mt-0">
-                  <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-text-subtle" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
-                  </svg>
-                  <p>
-                    {$t.tasks?.started?.replace('{time}', formatTime(task.started_at))}
-                  </p>
-                </div>
-              </div>
-            </div>
-          </button>
-        </li>
-      {/each}
-    </ul>
-  {/if}
-</div>
-
-<!-- #endregion TaskList -->
diff --git a/frontend/src/components/auth/ProtectedRoute.svelte b/frontend/src/components/auth/ProtectedRoute.svelte
deleted file mode 100644
index 6d7b0b048..000000000
--- a/frontend/src/components/auth/ProtectedRoute.svelte
+++ /dev/null
@@ -1,145 +0,0 @@
-<!-- #region ProtectedRoute [C:3] [TYPE Component] [SEMANTICS auth, route-guard, permission, session, redirect] -->
-<!-- @BRIEF Component component: components/auth/ProtectedRoute.svelte -->
-<!-- @LAYER UI -->
-<!--
-@SEMANTICS: auth, route-guard, permission, redirect, session-validation
-@PURPOSE: Enforces authenticated and authorized access before protected route content is rendered.
-@LAYER UI
-@RELATION BINDS_TO ->[EXT:frontend:authStore]
-@RELATION CALLS ->[EXT:frontend:goto]
-@RELATION DEPENDS_ON ->[PermissionsModule]
-@RELATION CALLS ->[EXT:frontend:fetchApi]
-@INVARIANT: Unauthenticated users are redirected to /login, unauthorized users are redirected to fallbackPath, and protected slot renders only when access is verified.
-@UX_STATE: Idle -> Component mounted, verification not yet started.
-@UX_STATE: Loading -> Spinner is rendered while auth/session/permission validation is in progress.
-@UX_STATE: Error -> Session validation failure triggers logout and /login redirect.
-@UX_STATE: Success -> Protected slot content is rendered for authenticated users with valid access.
-@UX_FEEDBACK: Spinner feedback during Loading and navigation redirect feedback on Error/Unauthorized outcomes.
-@UX_RECOVERY: Re-authenticate via /login after logout; retry occurs automatically on next protected navigation.
-@UX_REACTIVITY: Props are bound via $props; local mutable UI flags use $state; auth store is consumed through Svelte store subscription ($auth).
-@TEST_CONTRACT: [token:user:requiredPermission] -> [redirect:/login | redirect:fallbackPath | render:slot]
-@TEST_SCENARIO: MissingTokenRedirect -> Navigates to /login and suppresses slot render.
-@TEST_SCENARIO: PermissionDeniedRedirect -> Navigates to fallbackPath and suppresses slot render.
-@TEST_SCENARIO: AuthorizedRender -> Renders slot when authenticated and permission passes.
-@TEST_FIXTURE: AuthGuardStateMatrix -> INLINE_JSON
-@TEST_EDGE: missing_field -> user payload missing in store triggers /auth/me fetch, then logout+redirect on failure.
-@TEST_EDGE: invalid_type -> requiredPermission malformed (non-string/null) resolves to denied path and fallback redirect.
-@TEST_EDGE: external_fail -> /auth/me network/API failure triggers logout and /login redirect.
-@TEST_INVARIANT: GuardRedirectPolicy -> VERIFIED_BY: [MissingTokenRedirect, PermissionDeniedRedirect]
-@TEST_INVARIANT: ProtectedRenderGate -> VERIFIED_BY: [AuthorizedRender]
--->
-
-<!-- @INVARIANT All routes except login gated behind authenticated session and RBAC check. -->
-<!--
-@PURPOSE: Wraps protected slot content with session and permission verification guards.
-@PRE: auth store and navigation API are available in runtime; component is mounted in a browser context.
-@POST: Slot renders only when $auth.isAuthenticated and hasRouteAccess are both true.
-@SIDE_EFFECT: Performs /auth/me request, mutates auth store state, emits console instrumentation logs, and executes navigation redirects.
-@DATA_CONTRACT: Input[$props.requiredPermission?: string|null, $props.fallbackPath?: string] -> Output[UIState{isCheckingAccess:boolean, hasRouteAccess:boolean}]
--->
-
-<script lang="ts">
-    import { onMount } from "svelte";
-    import { auth } from "../../lib/auth/store.svelte.js";
-    import { api } from "../../lib/api";
-    import { goto } from "$app/navigation";
-    import { ROUTES } from "$lib/routes";
-    import { hasPermission } from "$lib/auth/permissions.js";
-
-    const { requiredPermission = null, fallbackPath = "/profile", children } = $props();
-
-    let hasRouteAccess = $state(false);
-    let isCheckingAccess = $state(true);
-
-    const belief_scope = async (scopeId, run) => {
-        console.info(`[${scopeId}][REASON] belief_scope.enter`);
-        try {
-            return await run();
-        } finally {
-            console.info(`[${scopeId}][REFLECT] belief_scope.exit`);
-        }
-    };
-
-    // #region verifySessionAndAccess:Function [TYPE Function]
-    /**
-     * @PURPOSE: Validates session and optional permission gate before allowing protected content render.
-     * @PRE: auth store is initialized and can provide token/user state; navigation is available.
-     * @POST: hasRouteAccess=true only when user identity is valid and permission check (if provided) passes.
-     * @SIDE_EFFECT: Mutates auth loading/user state, performs API I/O to /auth/me, and may redirect.
-     * @DATA_CONTRACT: Input[AuthState, requiredPermission, fallbackPath] -> Output[RouteDecision{login_redirect|fallback_redirect|grant}]
-     */
-    async function verifySessionAndAccess() {
-        return belief_scope("ProtectedRoute.verifySessionAndAccess", async () => {
-            console.info("[ProtectedRoute.verifySessionAndAccess][REASON] Starting route access verification");
-            isCheckingAccess = true;
-
-            try {
-                if (!$auth.token) {
-                    auth.setLoading(false);
-                    console.info("[ProtectedRoute.verifySessionAndAccess][REFLECT] Missing token, redirecting to /login");
-                    await goto(ROUTES.login());
-                    return;
-                }
-
-                let currentUser = $auth.user;
-                if (!currentUser) {
-                    auth.setLoading(true);
-                    try {
-                        const user = await api.fetchApi("/auth/me");
-                        auth.setUser(user);
-                        currentUser = user;
-                        console.info("[ProtectedRoute.verifySessionAndAccess][REASON] Session user hydrated from /auth/me");
-                    } catch (error) {
-                        console.warn("[ProtectedRoute.verifySessionAndAccess][EXPLORE] Session validation failed", { error });
-                        auth.logout();
-                    await goto(ROUTES.login());
-                    return;
-                    } finally {
-                        auth.setLoading(false);
-                    }
-                }
-
-                if (!currentUser) {
-                    auth.logout();
-                    console.info("[ProtectedRoute.verifySessionAndAccess][REFLECT] User unresolved, redirecting to /login");
-                    await goto(ROUTES.login());
-                    return;
-                }
-
-                if (requiredPermission && !hasPermission(currentUser, requiredPermission, "READ")) {
-                    console.info("[ProtectedRoute.verifySessionAndAccess][REFLECT] Permission denied, redirecting to fallback", {
-                        requiredPermission,
-                        fallbackPath,
-                    });
-                    hasRouteAccess = false;
-                    await goto(fallbackPath);
-                    return;
-                }
-
-                hasRouteAccess = true;
-                console.info("[ProtectedRoute.verifySessionAndAccess][REFLECT] Access granted");
-            } finally {
-                isCheckingAccess = false;
-                console.info("[ProtectedRoute.verifySessionAndAccess][REFLECT] Verification cycle completed", {
-                    isCheckingAccess,
-                    hasRouteAccess,
-                });
-            }
-        });
-    }
-    // #endregion verifySessionAndAccess:Function
-
-    onMount(() => {
-        void verifySessionAndAccess();
-    });
-</script>
-
-{#if $auth.loading || isCheckingAccess}
-    <div class="flex items-center justify-center min-h-screen">
-        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-ring"></div>
-    </div>
-{:else if $auth.isAuthenticated && hasRouteAccess}
-    {@render children?.()}
-{/if}
-
-<!-- #endregion ProtectedRoute -->
diff --git a/frontend/src/components/llm/ValidationReport.svelte b/frontend/src/components/llm/ValidationReport.svelte
deleted file mode 100644
index 471399e85..000000000
--- a/frontend/src/components/llm/ValidationReport.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<!-- #region ValidationReport [C:3] [TYPE Component] [SEMANTICS llm, validation, report, issues, dashboard] -->
-<!-- @BRIEF Displays the results of an LLM-based dashboard validation task with status, issues, and recommendations. -->
-<!-- @LAYER UI -->
-<!-- @RELATION DEPENDS_ON -> [EXT:frontend:DashboardValidationService] -->
-<!-- @RELATION CALLS -> [EXT:frontend:api_module] -->
-<!-- @PURPOSE: Displays the results of an LLM-based dashboard validation task. -->
-
-<script lang="ts">
-  import { t } from '$lib/i18n/index.svelte.js';
-  let {
-    report,
-  } = $props();
-
-
-    function getStatusColor(status) {
-        switch (status) {
-            case 'PASS': return 'text-success bg-success-light';
-            case 'WARN': return 'text-warning bg-warning-light';
-            case 'FAIL': return 'text-destructive bg-destructive-light';
-            default: return 'text-text-muted bg-surface-muted';
-        }
-    }
-</script>
-
-{#if result}
-    <div class="bg-surface-card shadow rounded-lg p-6 space-y-6">
-        <div class="flex items-center justify-between">
-            <h2 class="text-xl font-bold text-text">{$t.llm?.validation_report_title}</h2>
-            <span class={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(result.status)}`}>
-                {result.status}
-            </span>
-        </div>
-
-        <div class="prose max-w-none">
-            <h3 class="text-lg font-semibold">{$t.reports?.summary}</h3>
-            <p>{result.summary}</p>
-        </div>
-
-        {#if result.issues && result.issues.length > 0}
-            <div class="space-y-4">
-                <h3 class="text-lg font-semibold">{$t.tasks?.issues}</h3>
-                <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
-                    <table class="min-w-full divide-y divide-gray-300">
-                        <thead class="bg-surface-muted">
-                            <tr>
-                                <th class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-text">{$t.reports?.severity}</th>
-                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-text">{$t.reports?.message}</th>
-                                <th class="px-3 py-3.5 text-left text-sm font-semibold text-text">{$t.tasks?.location}</th>
-                            </tr>
-                        </thead>
-                        <tbody class="divide-y divide-border bg-surface-card">
-                            {#each result.issues as issue}
-                                <tr>
-                                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm">
-                                        <span class={`px-2 py-1 rounded text-xs font-medium ${getStatusColor(issue.severity)}`}>
-                                            {issue.severity}
-                                        </span>
-                                    </td>
-                                    <td class="px-3 py-4 text-sm text-text-muted">{issue.message}</td>
-                                    <td class="px-3 py-4 text-sm text-text-muted">{issue.location || $t.common?.not_available}</td>
-                                </tr>
-                            {/each}
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        {/if}
-
-        {#if result.screenshot_path}
-            <div class="space-y-4">
-                <h3 class="text-lg font-semibold">{$t.dashboard?.screenshot_strategy}</h3>
-                <img src={`/api/storage/file?path=${encodeURIComponent(result.screenshot_path)}`} alt={$t.dashboard?.dashboard_validation} class="rounded-lg border border-border shadow-sm max-w-full" />
-            </div>
-        {/if}
-    </div>
-{:else}
-    <div class="text-center py-12 bg-surface-muted rounded-lg border-2 border-dashed border-border-strong">
-        <p class="text-text-muted">{$t.llm?.no_validation_result}</p>
-    </div>
-{/if}
-
-<!-- #endregion ValidationReport -->
diff --git a/frontend/src/lib/components/auth/ProtectedRoute.svelte b/frontend/src/lib/components/auth/ProtectedRoute.svelte
new file mode 100644
index 000000000..43f76243e
--- /dev/null
+++ b/frontend/src/lib/components/auth/ProtectedRoute.svelte
@@ -0,0 +1,108 @@
+<!-- #region ProtectedRoute [C:3] [TYPE Component] [SEMANTICS auth, route-guard, permission, session, redirect] -->
+<!-- @BRIEF Enforces authenticated and authorized access before protected slot content is rendered. -->
+<!-- @LAYER UI -->
+<!-- @RELATION BINDS_TO -> [EXT:frontend:authStore] -->
+<!-- @RELATION CALLS -> [EXT:frontend:goto] -->
+<!-- @RELATION DEPENDS_ON -> [EXT:frontend:PermissionsModule] -->
+<!-- @RELATION CALLS -> [EXT:frontend:fetchApi] -->
+<!-- @INVARIANT Unauthenticated users are redirected to /login, unauthorized to fallbackPath, protected slot renders only when access is verified. -->
+<!-- @UX_STATE: Loading -> Spinner rendered while auth/session/permission validation is in progress. -->
+<!-- @UX_STATE: Error -> Session validation failure triggers logout and /login redirect. -->
+<!-- @UX_STATE: Success -> Protected slot content rendered for authenticated users with valid access. -->
+<!-- @UX_FEEDBACK Spinner during Loading; navigation redirect on Error/Unauthorized. -->
+<!-- @UX_RECOVERY Re-authenticate via /login after logout; retry on next protected navigation. -->
+<!-- @UX_REACTIVITY Props -> $props(); local state -> $state(); auth store -> $auth subscription. -->
+<!-- @RATIONALE Uses log() from $lib/cot-logger for all belief markers; replaces inline belief_scope function and console.* calls per MolecularCoTLogging protocol. -->
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { auth } from "$lib/auth/store.svelte.js";
+    import { fetchApi } from "$lib/api";
+    import { goto } from "$app/navigation";
+    import { ROUTES } from "$lib/routes";
+    import { hasPermission } from "$lib/auth/permissions.js";
+    import { log } from "$lib/cot-logger";
+
+    const { requiredPermission = null, fallbackPath = "/profile", children } = $props<{
+        requiredPermission?: string | null;
+        fallbackPath?: string;
+        children?: import("svelte").Snippet;
+    }>();
+
+    let hasRouteAccess = $state(false);
+    let isCheckingAccess = $state(true);
+
+    // #region verifySessionAndAccess [C:3] [TYPE Function] [SEMANTICS auth,session,permission]
+    // @BRIEF Validates session and optional permission gate before allowing protected content render.
+    // @PRE auth store is initialized and can provide token/user state; navigation is available.
+    // @POST hasRouteAccess=true only when user identity is valid and permission check (if provided) passes.
+    // @SIDE_EFFECT Mutates auth loading/user state, performs API I/O to /auth/me, and may redirect.
+    async function verifySessionAndAccess() {
+        log("ProtectedRoute.verifySessionAndAccess", "REASON", "Starting route access verification");
+
+        isCheckingAccess = true;
+
+        try {
+            if (!$auth.token) {
+                auth.setLoading(false);
+                log("ProtectedRoute.verifySessionAndAccess", "REFLECT", "Missing token, redirecting to /login");
+                await goto(ROUTES.login());
+                return;
+            }
+
+            let currentUser = $auth.user;
+            if (!currentUser) {
+                auth.setLoading(true);
+                try {
+                    const user = await fetchApi("/auth/me");
+                    auth.setUser(user);
+                    currentUser = user;
+                    log("ProtectedRoute.verifySessionAndAccess", "REASON", "Session user hydrated from /auth/me");
+                } catch (error) {
+                    log("ProtectedRoute.verifySessionAndAccess", "EXPLORE", "Session validation failed",
+                        {}, error instanceof Error ? error.message : "Unknown error");
+                    auth.logout();
+                    await goto(ROUTES.login());
+                    return;
+                } finally {
+                    auth.setLoading(false);
+                }
+            }
+
+            if (!currentUser) {
+                auth.logout();
+                log("ProtectedRoute.verifySessionAndAccess", "REFLECT", "User unresolved, redirecting to /login");
+                await goto(ROUTES.login());
+                return;
+            }
+
+            if (requiredPermission && !hasPermission(currentUser, requiredPermission, "READ")) {
+                log("ProtectedRoute.verifySessionAndAccess", "REFLECT", "Permission denied, redirecting to fallback",
+                    { requiredPermission, fallbackPath });
+                hasRouteAccess = false;
+                await goto(fallbackPath);
+                return;
+            }
+
+            hasRouteAccess = true;
+            log("ProtectedRoute.verifySessionAndAccess", "REFLECT", "Access granted");
+        } finally {
+            isCheckingAccess = false;
+            log("ProtectedRoute.verifySessionAndAccess", "REFLECT", "Verification cycle completed",
+                { isCheckingAccess, hasRouteAccess });
+        }
+    }
+    // #endregion verifySessionAndAccess
+
+    onMount(() => {
+        void verifySessionAndAccess();
+    });
+</script>
+
+{#if $auth.loading || isCheckingAccess}
+    <div class="flex items-center justify-center min-h-screen">
+        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-ring"></div>
+    </div>
+{:else if $auth.isAuthenticated && hasRouteAccess}
+    {@render children?.()}
+{/if}
+<!-- #endregion ProtectedRoute -->
diff --git a/frontend/src/components/backups/BackupList.svelte b/frontend/src/lib/components/backups/BackupList.svelte
similarity index 96%
rename from frontend/src/components/backups/BackupList.svelte
rename to frontend/src/lib/components/backups/BackupList.svelte
index 08591ce5a..13d902945 100644
--- a/frontend/src/components/backups/BackupList.svelte
+++ b/frontend/src/lib/components/backups/BackupList.svelte
@@ -1,5 +1,5 @@
 <!-- #region BackupList [C:3] [TYPE Component] [SEMANTICS backup, list, files, navigation, explorer] -->
-<!-- @BRIEF Component component: components/backups/BackupList.svelte -->
+<!-- @BRIEF Displays a list of existing backups. -->
 <!-- @LAYER UI -->
 <!--
 @SEMANTICS: backup, list, table
@@ -11,8 +11,8 @@
 <script lang="ts">
   // [SECTION: IMPORTS]
   import { t } from '$lib/i18n/index.svelte.js';
-  import { Button } from '../../lib/ui';
-  import type { Backup } from '../../types/backup';
+  import { Button } from '$lib/ui';
+  import type { Backup } from '../../../types/backup';
   // [/SECTION]
 
   // [SECTION: PROPS]
diff --git a/frontend/src/components/backups/BackupManager.svelte b/frontend/src/lib/components/backups/BackupManager.svelte
similarity index 97%
rename from frontend/src/components/backups/BackupManager.svelte
rename to frontend/src/lib/components/backups/BackupManager.svelte
index cef2e22ff..d77cabefa 100644
--- a/frontend/src/components/backups/BackupManager.svelte
+++ b/frontend/src/lib/components/backups/BackupManager.svelte
@@ -1,5 +1,5 @@
 <!-- #region BackupManager [C:3] [TYPE Component] [SEMANTICS backup, orchestrator, schedule, crud, manager] -->
-<!-- @BRIEF Component component: components/backups/BackupManager.svelte -->
+<!-- @BRIEF Main container for backup management, handling creation and listing. -->
 <!-- @LAYER UI -->
 <!--
 @SEMANTICS: backup, manager, orchestrator
@@ -15,11 +15,11 @@
   // [SECTION: IMPORTS]
   import { onMount } from 'svelte';
   import { t } from '$lib/i18n/index.svelte.js';
-  import { api, requestApi } from '../../lib/api';
+  import { api, requestApi } from '$lib/api';
   import { addToast } from '$lib/toasts.svelte.js';
-  import { Button, Card, Select, Input } from '../../lib/ui';
+  import { Button, Card, Select, Input } from '$lib/ui';
   import BackupList from './BackupList.svelte';
-  import type { Backup } from '../../types/backup';
+  import type { Backup } from '../../../types/backup';
   // [/SECTION]
 
   // [SECTION: STATE]
diff --git a/frontend/src/components/DashboardGrid.svelte b/frontend/src/lib/components/dashboard/DashboardGrid.svelte
similarity index 97%
rename from frontend/src/components/DashboardGrid.svelte
rename to frontend/src/lib/components/dashboard/DashboardGrid.svelte
index 34e0dfd75..a6676cdf2 100644
--- a/frontend/src/components/DashboardGrid.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardGrid.svelte
@@ -1,5 +1,5 @@
 <!-- #region DashboardGrid [C:3] [TYPE Component] [SEMANTICS dashboard, grid, pagination, sort, filter] -->
-<!-- @BRIEF Component component: components/DashboardGrid.svelte -->
+<!-- @BRIEF Displays a grid of dashboards with selection and pagination. -->
 <!-- @LAYER UI -->
 <!--
 @UX_STATE: Loading -> Default
@@ -14,11 +14,11 @@
 
 <script lang="ts">
   // [SECTION: IMPORTS]
-  import type { DashboardMetadata } from "../types/dashboard";
+  import type { DashboardMetadata } from "../../types/dashboard";
   import { t } from '$lib/i18n/index.svelte.js';
-  import { Button, Input } from "../lib/ui";
-  import GitManager from "./git/GitManager.svelte";
-  import { api } from "../lib/api";
+  import { Button, Input } from "$lib/ui";
+  import GitManager from "$lib/components/git/GitManager.svelte";
+  import { api } from "$lib/api";
   import { addToast as toast } from "$lib/toasts.svelte.js";
   // [/SECTION]
 
diff --git a/frontend/src/components/RepositoryDashboardGrid.svelte b/frontend/src/lib/components/dashboard/RepositoryDashboardGrid.svelte
similarity index 98%
rename from frontend/src/components/RepositoryDashboardGrid.svelte
rename to frontend/src/lib/components/dashboard/RepositoryDashboardGrid.svelte
index 7c55c32fa..4d7a655c2 100644
--- a/frontend/src/components/RepositoryDashboardGrid.svelte
+++ b/frontend/src/lib/components/dashboard/RepositoryDashboardGrid.svelte
@@ -1,5 +1,5 @@
 <!-- #region RepositoryDashboardGrid [C:3] [TYPE Component] [SEMANTICS dashboard, grid, pagination, selection, repository] -->
-<!-- @BRIEF Component component: components/RepositoryDashboardGrid.svelte -->
+<!-- @BRIEF Displays a grid of dashboards with repository integration, selection and pagination. -->
 <!-- @LAYER UI -->
 <!--
 @SEMANTICS: dashboard, grid, selection, pagination
@@ -13,11 +13,11 @@
 <script lang="ts">
   // [SECTION: IMPORTS]
   import { untrack } from "svelte";
-  import type { DashboardMetadata } from "../types/dashboard";
+  import type { DashboardMetadata } from "../../types/dashboard";
   import { t } from '$lib/i18n/index.svelte.js';
-  import { Button, Input } from "../lib/ui";
-  import GitManager from "./git/GitManager.svelte";
-  import { gitService } from "../services/gitService";
+  import { Button, Input } from "$lib/ui";
+  import GitManager from "$lib/components/git/GitManager.svelte";
+  import { gitService } from "../../../services/gitService";
   import { addToast } from "$lib/toasts.svelte.js";
   // [/SECTION]
 
diff --git a/frontend/src/components/git/BranchSelector.svelte b/frontend/src/lib/components/git/BranchSelector.svelte
similarity index 100%
rename from frontend/src/components/git/BranchSelector.svelte
rename to frontend/src/lib/components/git/BranchSelector.svelte
diff --git a/frontend/src/components/git/CommitHistory.svelte b/frontend/src/lib/components/git/CommitHistory.svelte
similarity index 95%
rename from frontend/src/components/git/CommitHistory.svelte
rename to frontend/src/lib/components/git/CommitHistory.svelte
index 0741e19b6..958a0f8f5 100644
--- a/frontend/src/components/git/CommitHistory.svelte
+++ b/frontend/src/lib/components/git/CommitHistory.svelte
@@ -11,10 +11,10 @@
 <script lang="ts">
     // [SECTION: IMPORTS]
     import { onMount } from 'svelte';
-    import { gitService } from '../../services/gitService';
-    import { addToast as toast } from '$lib/toasts.svelte.js';
+    import { gitService } from '../../../services/gitService';
     import { t } from '$lib/i18n/index.svelte.js';
-    import { Button } from '../../lib/ui';
+    import { Tooltip } from '$lib/ui';
+    import { Button } from '$lib/ui';
     // [/SECTION]
 
     // [SECTION: PROPS]
diff --git a/frontend/src/components/git/CommitModal.svelte b/frontend/src/lib/components/git/CommitModal.svelte
similarity index 100%
rename from frontend/src/components/git/CommitModal.svelte
rename to frontend/src/lib/components/git/CommitModal.svelte
diff --git a/frontend/src/components/git/ConflictResolver.svelte b/frontend/src/lib/components/git/ConflictResolver.svelte
similarity index 100%
rename from frontend/src/components/git/ConflictResolver.svelte
rename to frontend/src/lib/components/git/ConflictResolver.svelte
diff --git a/frontend/src/components/git/DeploymentModal.svelte b/frontend/src/lib/components/git/DeploymentModal.svelte
similarity index 100%
rename from frontend/src/components/git/DeploymentModal.svelte
rename to frontend/src/lib/components/git/DeploymentModal.svelte
diff --git a/frontend/src/components/git/GitInitPanel.svelte b/frontend/src/lib/components/git/GitInitPanel.svelte
similarity index 100%
rename from frontend/src/components/git/GitInitPanel.svelte
rename to frontend/src/lib/components/git/GitInitPanel.svelte
diff --git a/frontend/src/components/git/GitManager.svelte b/frontend/src/lib/components/git/GitManager.svelte
similarity index 99%
rename from frontend/src/components/git/GitManager.svelte
rename to frontend/src/lib/components/git/GitManager.svelte
index 7c4413673..093a106d3 100644
--- a/frontend/src/components/git/GitManager.svelte
+++ b/frontend/src/lib/components/git/GitManager.svelte
@@ -25,7 +25,7 @@
     import { onMount } from 'svelte';
     import { t } from '$lib/i18n/index.svelte.js';
     import { HelpTooltip } from '$lib/ui';
-    import { stageBadgeClass, resolveDefaultConfig } from '../../services/git-utils.js';
+    import { stageBadgeClass, resolveDefaultConfig } from '../../../services/git-utils.js';
     import { GitManagerModel } from '$lib/models/GitManagerModel.svelte.ts';
     import BranchSelector from './BranchSelector.svelte';
     import DeploymentModal from './DeploymentModal.svelte';
diff --git a/frontend/src/components/git/GitMergeDialog.svelte b/frontend/src/lib/components/git/GitMergeDialog.svelte
similarity index 100%
rename from frontend/src/components/git/GitMergeDialog.svelte
rename to frontend/src/lib/components/git/GitMergeDialog.svelte
diff --git a/frontend/src/components/git/GitOperationsPanel.svelte b/frontend/src/lib/components/git/GitOperationsPanel.svelte
similarity index 100%
rename from frontend/src/components/git/GitOperationsPanel.svelte
rename to frontend/src/lib/components/git/GitOperationsPanel.svelte
diff --git a/frontend/src/components/git/GitReleasePanel.svelte b/frontend/src/lib/components/git/GitReleasePanel.svelte
similarity index 98%
rename from frontend/src/components/git/GitReleasePanel.svelte
rename to frontend/src/lib/components/git/GitReleasePanel.svelte
index f7397b130..ae9323b23 100644
--- a/frontend/src/components/git/GitReleasePanel.svelte
+++ b/frontend/src/lib/components/git/GitReleasePanel.svelte
@@ -8,7 +8,7 @@
 <script lang="ts">
   import { t } from "$lib/i18n/index.svelte.js";
   import { Button, Input, Select } from "$lib/ui";
-  import { stageBadgeClass } from "../../services/git-utils.js";
+  import { stageBadgeClass } from "../../../services/git-utils.js";
 
   let {
     currentEnvStage,
diff --git a/frontend/src/components/git/GitWorkspacePanel.svelte b/frontend/src/lib/components/git/GitWorkspacePanel.svelte
similarity index 100%
rename from frontend/src/components/git/GitWorkspacePanel.svelte
rename to frontend/src/lib/components/git/GitWorkspacePanel.svelte
diff --git a/frontend/src/components/git/__tests__/git_manager.unfinished_merge.integration.test.ts b/frontend/src/lib/components/git/__tests__/git_manager.unfinished_merge.integration.test.ts
similarity index 87%
rename from frontend/src/components/git/__tests__/git_manager.unfinished_merge.integration.test.ts
rename to frontend/src/lib/components/git/__tests__/git_manager.unfinished_merge.integration.test.ts
index 2ddb6d05a..905b7c540 100644
--- a/frontend/src/components/git/__tests__/git_manager.unfinished_merge.integration.test.ts
+++ b/frontend/src/lib/components/git/__tests__/git_manager.unfinished_merge.integration.test.ts
@@ -7,10 +7,10 @@ import { describe, it, expect } from 'vitest';
 import fs from 'node:fs';
 import path from 'node:path';
 
-const MANAGER_PATH = path.resolve(process.cwd(), 'src/components/git/GitManager.svelte');
+const MANAGER_PATH = path.resolve(process.cwd(), 'src/lib/components/git/GitManager.svelte');
 const UTILS_PATH = path.resolve(process.cwd(), 'src/services/git-utils.ts');
-const HANDLER_PATH = path.resolve(process.cwd(), 'src/components/git/useGitManager.ts');
-const DIALOG_PATH = path.resolve(process.cwd(), 'src/components/git/GitMergeDialog.svelte');
+const HANDLER_PATH = path.resolve(process.cwd(), 'src/lib/components/git/useGitManager.ts');
+const DIALOG_PATH = path.resolve(process.cwd(), 'src/lib/components/git/GitMergeDialog.svelte');
 
 describe('GitManager unfinished merge dialog contract', () => {
   it('keeps 409 unfinished-merge detection and WebUI dialog recovery flow in pull handler', () => {
diff --git a/frontend/src/components/git/useGitManager.ts b/frontend/src/lib/components/git/useGitManager.ts
similarity index 99%
rename from frontend/src/components/git/useGitManager.ts
rename to frontend/src/lib/components/git/useGitManager.ts
index dc8ef3b5a..f881e89cf 100644
--- a/frontend/src/components/git/useGitManager.ts
+++ b/frontend/src/lib/components/git/useGitManager.ts
@@ -7,9 +7,9 @@
 // @RELATION DEPENDS_ON -> [EXT:frontend:gitService]
 // @RELATION DEPENDS_ON -> [GitUtils]
 // @RATIONALE Extracted handler logic from GitManager (1220→~350 lines) to meet INV_7 <150 line contract limit.
-import { gitService } from '../../services/gitService';
-import { api } from '../../lib/api';
-import { isNumericDashboardRef, resolveDefaultConfig, extractUnfinishedMergeContext, buildSuggestedRepoName } from '../../services/git-utils';
+import { gitService } from '../../../services/gitService';
+import { api } from '$lib/api';
+import { isNumericDashboardRef, resolveDefaultConfig, extractUnfinishedMergeContext, buildSuggestedRepoName } from '../../../services/git-utils';
 
 interface GitError {
   message: string;
diff --git a/frontend/src/components/Footer.svelte b/frontend/src/lib/components/layout/Footer.svelte
similarity index 74%
rename from frontend/src/components/Footer.svelte
rename to frontend/src/lib/components/layout/Footer.svelte
index 54b2fcaf3..21049a252 100644
--- a/frontend/src/components/Footer.svelte
+++ b/frontend/src/lib/components/layout/Footer.svelte
@@ -2,11 +2,6 @@
 <!-- @BRIEF Application footer displaying copyright information. -->
 <!-- @LAYER UI -->
 <!-- @RELATION DEPENDS_ON -> [RootLayout] -->
-<!--
-@SEMANTICS: footer, layout, copyright
-@PURPOSE:   Displays the application footer with copyright information.
-@LAYER     UI
--->
 <footer class="bg-surface-card border-t p-4 mt-8 text-center text-text-muted text-sm">
     &copy; 2025 Superset Tools. All rights reserved.
 </footer>
diff --git a/frontend/src/components/Navbar.svelte b/frontend/src/lib/components/layout/Navbar.svelte
similarity index 98%
rename from frontend/src/components/Navbar.svelte
rename to frontend/src/lib/components/layout/Navbar.svelte
index d725494a2..1057143c7 100644
--- a/frontend/src/components/Navbar.svelte
+++ b/frontend/src/lib/components/layout/Navbar.svelte
@@ -1,5 +1,5 @@
 <!-- #region Navbar [C:3] [TYPE Component] [SEMANTICS navigation, header, auth, layout] -->
-<!-- @BRIEF Component component: components/Navbar.svelte -->
+<!-- @BRIEF Main navigation bar for the application. -->
 <!-- @LAYER UI -->
 <!--
 @SEMANTICS: navbar, navigation, header, layout
diff --git a/frontend/src/lib/components/layout/Sidebar.svelte b/frontend/src/lib/components/layout/Sidebar.svelte
index d0ee995e6..3bc08cdba 100644
--- a/frontend/src/lib/components/layout/Sidebar.svelte
+++ b/frontend/src/lib/components/layout/Sidebar.svelte
@@ -92,7 +92,6 @@
   // Keep active category valid after RBAC filtering.
   // @RATIONALE Uses untrack(activeCategory) to avoid reading and writing the same _state
   $effect(() => {
-    console.count("[Sidebar.effect93]");
     allCategories;
     const cat = untrack(() => activeCategory);
     if (allCategories.length > 0 && !allCategories.some((c) => c.id === cat)) {
@@ -105,7 +104,6 @@
 
   // Keep active category expanded after route/user change.
   $effect(() => {
-    console.count("[Sidebar.effect106]");
     if (activeCategory && !expandedCategories.has(activeCategory)) {
       withExpandedCategory(activeCategory);
     }
@@ -114,7 +112,6 @@
   // Update active item when page changes
   // @RATIONALE Uses untrack(activeItem) to avoid reading and writing the same _state
   $effect(() => {
-    console.count("[Sidebar.effect113]");
     page.url.pathname;
     allCategories;
     const item = untrack(() => activeItem);
@@ -185,7 +182,6 @@
 
   // Close mobile overlay on route change
   $effect(() => {
-    console.count("[Sidebar.effect180]");
     page.url.pathname;
     untrack(() => closeMobile());
   });
diff --git a/frontend/src/lib/components/layout/TaskDrawer.svelte b/frontend/src/lib/components/layout/TaskDrawer.svelte
index c9d37bfeb..b82cf6a08 100644
--- a/frontend/src/lib/components/layout/TaskDrawer.svelte
+++ b/frontend/src/lib/components/layout/TaskDrawer.svelte
@@ -55,8 +55,8 @@
   import { onDestroy } from "svelte";
   import { taskDrawerStore, closeDrawer } from "$lib/stores/taskDrawer.svelte.js";
   import { assistantChatStore } from "$lib/stores/assistantChat.svelte.js";
-  import TaskLogViewer from "../../../components/TaskLogViewer.svelte";
-  import PasswordPrompt from "../../../components/PasswordPrompt.svelte";
+  import TaskLogViewer from "$lib/components/tasks/TaskLogViewer.svelte";
+  import PasswordPrompt from "$lib/components/migration/PasswordPrompt.svelte";
   import { getReportTypeProfile } from "../reports/reportTypeProfiles.js";
   import { t } from "$lib/i18n/index.svelte.js";
   import { ROUTES } from "$lib/routes";
diff --git a/frontend/src/components/llm/DocPreview.svelte b/frontend/src/lib/components/llm/DocPreview.svelte
similarity index 96%
rename from frontend/src/components/llm/DocPreview.svelte
rename to frontend/src/lib/components/llm/DocPreview.svelte
index a531b2fac..e988b51a1 100644
--- a/frontend/src/components/llm/DocPreview.svelte
+++ b/frontend/src/lib/components/llm/DocPreview.svelte
@@ -1,5 +1,5 @@
 <!-- #region DocPreview [C:3] [TYPE Component] [SEMANTICS llm, documentation, preview, review, dataset] -->
-<!-- @BRIEF Component component: components/llm/DocPreview.svelte -->
+<!-- @BRIEF UI component for previewing generated dataset documentation before saving. -->
 <!-- @LAYER UI -->
 <!--
 @UX_STATE: Loading -> Default
diff --git a/frontend/src/components/llm/ProviderConfig.svelte b/frontend/src/lib/components/llm/ProviderConfig.svelte
similarity index 99%
rename from frontend/src/components/llm/ProviderConfig.svelte
rename to frontend/src/lib/components/llm/ProviderConfig.svelte
index 924633e87..02df9e2ed 100644
--- a/frontend/src/components/llm/ProviderConfig.svelte
+++ b/frontend/src/lib/components/llm/ProviderConfig.svelte
@@ -1,5 +1,5 @@
 <!-- #region ProviderConfig [C:3] [TYPE Component] [SEMANTICS llm, provider, config, form, crud] -->
-<!-- @BRIEF Component component: components/llm/ProviderConfig.svelte -->
+<!-- @BRIEF UI form for managing LLM provider configurations. -->
 <!-- @LAYER UI -->
 <!--
 @UX_STATE: Loading -> Default
@@ -11,7 +11,7 @@
 
 <script lang="ts">
   import { t } from '$lib/i18n/index.svelte.js';
-  import { requestApi } from "../../lib/api";
+  import { requestApi } from "$lib/api";
   import { addToast } from "$lib/toasts.svelte.js";
   import HelpTooltip from "$lib/ui/HelpTooltip.svelte";
 
diff --git a/frontend/src/components/llm/__tests__/provider_config.integration.test.ts b/frontend/src/lib/components/llm/__tests__/provider_config.integration.test.ts
similarity index 98%
rename from frontend/src/components/llm/__tests__/provider_config.integration.test.ts
rename to frontend/src/lib/components/llm/__tests__/provider_config.integration.test.ts
index e3ed95776..ca2945571 100644
--- a/frontend/src/components/llm/__tests__/provider_config.integration.test.ts
+++ b/frontend/src/lib/components/llm/__tests__/provider_config.integration.test.ts
@@ -11,7 +11,7 @@ import path from 'node:path';
 
 const COMPONENT_PATH = path.resolve(
   process.cwd(),
-  'src/components/llm/ProviderConfig.svelte',
+  'src/lib/components/llm/ProviderConfig.svelte',
 );
 
 // #region provider_config_edit_contract_tests:Function [TYPE Function]
diff --git a/frontend/src/components/MissingMappingModal.svelte b/frontend/src/lib/components/migration/MissingMappingModal.svelte
similarity index 100%
rename from frontend/src/components/MissingMappingModal.svelte
rename to frontend/src/lib/components/migration/MissingMappingModal.svelte
diff --git a/frontend/src/lib/components/migration/PasswordPrompt.svelte b/frontend/src/lib/components/migration/PasswordPrompt.svelte
new file mode 100644
index 000000000..7a511edaf
--- /dev/null
+++ b/frontend/src/lib/components/migration/PasswordPrompt.svelte
@@ -0,0 +1,153 @@
+<!-- #region PasswordPrompt [C:3] [TYPE Component] [SEMANTICS password, prompt, modal, security, input] -->
+<!-- @BRIEF Modal prompt for database passwords when a migration task is paused awaiting credentials. -->
+<!-- @LAYER UI -->
+<!-- @RELATION BINDS_TO -> [EXT:frontend:onresume] -->
+<!-- @RELATION BINDS_TO -> [EXT:frontend:oncancel] -->
+<!-- @UX_STATE: Hidden -> Modal is closed, password state is reset. -->
+<!-- @UX_STATE: Visible -> Modal open, password fields rendered for each database. -->
+<!-- @UX_STATE: Submitting -> Submit button disabled, spinner/text indicates submission. -->
+<!-- @UX_STATE: Error -> Error message banner displayed above form fields. -->
+<!-- @UX_FEEDBACK Error banner on submission failure. -->
+<!-- @UX_FEEDBACK Submit button disabled during submission. -->
+<!-- @UX_RECOVERY Close modal or correct passwords and re-submit. -->
+<script lang="ts">
+    import { t } from '$lib/i18n/index.svelte.js';
+    import { Button } from '$lib/ui';
+
+    let {
+        show = false,
+        databases = [],
+        errorMessage = "",
+        onresume = () => {},
+        oncancel = () => {},
+    }: {
+        show?: boolean;
+        databases?: string[];
+        errorMessage?: string;
+        onresume?: (payload: { passwords: Record<string, string> }) => void;
+        oncancel?: () => void;
+    } = $props();
+
+    let passwords = $state<Record<string, string>>({});
+    let submitting = $state(false);
+
+    // #region handleSubmit [C:2] [TYPE Function] [SEMANTICS form,validation]
+    // @BRIEF Validates all passwords and calls parent onresume callback.
+    // @PRE All database passwords must be entered; submitting flag is false.
+    // @POST Parent onresume callback receives passwords payload; submitting remains true until parent resets.
+    function handleSubmit() {
+        if (submitting) return;
+
+        const missing = databases.filter((db) => !passwords[db]);
+        if (missing.length > 0) {
+            alert($t.migration?.password_required || "Please enter passwords for: " + missing.join(", "));
+            return;
+        }
+
+        submitting = true;
+        onresume({ passwords });
+    }
+    // #endregion handleSubmit
+
+    // #region handleCancel [C:1] [TYPE Function]
+    // @BRIEF Closes modal without resuming.
+    // @PRE Modal is open.
+    // @POST Parent oncancel callback is invoked and show is set to false.
+    function handleCancel() {
+        oncancel();
+        show = false;
+    }
+    // #endregion handleCancel
+
+    // Reset passwords when modal closes
+    $effect(() => {
+        if (!show) {
+            passwords = {};
+            submitting = false;
+        }
+    });
+</script>
+
+{#if show}
+    <div
+        class="fixed inset-0 z-50 overflow-y-auto"
+        aria-labelledby="modal-title"
+        role="dialog"
+        aria-modal="true"
+    >
+        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            <!-- Background overlay -->
+            <div
+                class="fixed inset-0 bg-surface-muted bg-opacity-75 transition-opacity"
+                aria-hidden="true"
+                onclick={handleCancel}
+            ></div>
+
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+            <div class="inline-block align-bottom bg-surface-card rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+                <div class="bg-surface-card px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                    <div class="sm:flex sm:items-start">
+                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-destructive-light sm:mx-0 sm:h-10 sm:w-10">
+                            <svg
+                                class="h-6 w-6 text-destructive"
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                                aria-hidden="true"
+                            >
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                            </svg>
+                        </div>
+                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
+                            <h3 class="text-lg leading-6 font-medium text-text" id="modal-title">
+                                {$t.migration?.db_password_title || "Database Password Required"}
+                            </h3>
+                            <div class="mt-2">
+                                <p class="text-sm text-text-muted mb-4">
+                                    {$t.migration?.db_password_description || "The migration process requires passwords for the following databases to proceed."}
+                                </p>
+
+                                {#if errorMessage}
+                                    <div class="mb-4 p-2 bg-destructive-light text-destructive text-xs rounded border border-destructive-light">
+                                        {$t.migration?.error_prefix || "Error:"} {errorMessage}
+                                    </div>
+                                {/if}
+
+                                <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-4">
+                                    {#each databases as dbName}
+                                        <div>
+                                            <label for="password-{dbName}" class="block text-sm font-medium text-text">
+                                                {$t.migration?.password_for || "Password for"} {dbName}
+                                            </label>
+                                            <input
+                                                type="password"
+                                                id="password-{dbName}"
+                                                bind:value={passwords[dbName]}
+                                                class="mt-1 block w-full border-border-strong rounded-md shadow-sm focus:ring-primary-ring focus:border-primary-ring sm:text-sm p-2 border"
+                                                placeholder={$t.migration?.enter_password || "Enter password"}
+                                                required
+                                            />
+                                        </div>
+                                    {/each}
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-surface-muted px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                    <Button variant="primary" onclick={handleSubmit} disabled={submitting}>
+                        {submitting
+                            ? ($t.migration?.resuming || "Resuming...")
+                            : ($t.migration?.resume || "Resume Migration")}
+                    </Button>
+                    <Button variant="secondary" onclick={handleCancel} disabled={submitting}>
+                        {$t.actions?.cancel || "Cancel"}
+                    </Button>
+                </div>
+            </div>
+        </div>
+    </div>
+{/if}
+<!-- #endregion PasswordPrompt -->
diff --git a/frontend/src/components/storage/FileList.svelte b/frontend/src/lib/components/storage/FileList.svelte
similarity index 97%
rename from frontend/src/components/storage/FileList.svelte
rename to frontend/src/lib/components/storage/FileList.svelte
index 082cae1ee..5565a1535 100644
--- a/frontend/src/components/storage/FileList.svelte
+++ b/frontend/src/lib/components/storage/FileList.svelte
@@ -1,5 +1,5 @@
 <!-- #region FileList [C:3] [TYPE Component] [SEMANTICS storage, file, table, navigation, explorer] -->
-<!-- @BRIEF Component component: components/storage/FileList.svelte -->
+<!-- @BRIEF Displays a table of files with metadata and actions. -->
 <!-- @LAYER UI -->
 <!--
 @UX_STATE: Loading -> Default
@@ -15,7 +15,7 @@
 
 <script lang="ts">
   // [SECTION: IMPORTS]
-  import { downloadFile } from '../../services/storageService';
+  import { downloadFile } from '../../../services/storageService.js';
   import { t } from '$lib/i18n/index.svelte.js';
   import { addToast } from '$lib/toasts.svelte.js';
   // [/SECTION: IMPORTS]
diff --git a/frontend/src/components/storage/FileUpload.svelte b/frontend/src/lib/components/storage/FileUpload.svelte
similarity index 97%
rename from frontend/src/components/storage/FileUpload.svelte
rename to frontend/src/lib/components/storage/FileUpload.svelte
index b032bacf5..03b8efe70 100644
--- a/frontend/src/components/storage/FileUpload.svelte
+++ b/frontend/src/lib/components/storage/FileUpload.svelte
@@ -1,5 +1,5 @@
 <!-- #region FileUpload [C:3] [TYPE Component] [SEMANTICS storage, upload, drag-drop, file, form] -->
-<!-- @BRIEF Component component: components/storage/FileUpload.svelte -->
+<!-- @BRIEF Provides a form for uploading files to a specific category. -->
 <!-- @LAYER UI -->
 <!--
 @UX_STATE: Loading -> Default
@@ -15,7 +15,7 @@
 
 <script lang="ts">
   // [SECTION: IMPORTS]
-  import { uploadFile } from '../../services/storageService';
+  import { uploadFile } from '../../../services/storageService.js';
   import { addToast } from '$lib/toasts.svelte.js';
   import { t } from '$lib/i18n/index.svelte.js';
   // [/SECTION: IMPORTS]
diff --git a/frontend/src/components/tasks/LogEntryRow.svelte b/frontend/src/lib/components/tasks/LogEntryRow.svelte
similarity index 100%
rename from frontend/src/components/tasks/LogEntryRow.svelte
rename to frontend/src/lib/components/tasks/LogEntryRow.svelte
diff --git a/frontend/src/components/tasks/LogFilterBar.svelte b/frontend/src/lib/components/tasks/LogFilterBar.svelte
similarity index 100%
rename from frontend/src/components/tasks/LogFilterBar.svelte
rename to frontend/src/lib/components/tasks/LogFilterBar.svelte
diff --git a/frontend/src/components/TaskHistory.svelte b/frontend/src/lib/components/tasks/TaskHistory.svelte
similarity index 98%
rename from frontend/src/components/TaskHistory.svelte
rename to frontend/src/lib/components/tasks/TaskHistory.svelte
index 86ef3f1ec..03cbd4863 100644
--- a/frontend/src/components/TaskHistory.svelte
+++ b/frontend/src/lib/components/tasks/TaskHistory.svelte
@@ -1,5 +1,5 @@
 <!-- #region TaskHistory [C:3] [TYPE Component] [SEMANTICS task, history, list, status, monitoring] -->
-<!-- @BRIEF Component component: components/TaskHistory.svelte -->
+<!-- @BRIEF Displays a list of recent tasks with their status and allows selecting them for viewing logs. -->
 <!-- @LAYER UI -->
 <!--
 @SEMANTICS: task, history, list, status, monitoring
@@ -11,7 +11,7 @@
 <script lang="ts">
     import { onMount, onDestroy } from 'svelte';
     import { selectedTask } from '$lib/stores.svelte.js';
-    import { api, getTaskEventsWsUrl } from '../lib/api.js';
+    import { api, getTaskEventsWsUrl } from '$lib/api';
     import { t } from '$lib/i18n/index.svelte.js';
     
     /** @type {string | undefined} — if set, only shows tasks with this plugin_id (e.g. "superset-migration") */
diff --git a/frontend/src/components/tasks/TaskLogPanel.svelte b/frontend/src/lib/components/tasks/TaskLogPanel.svelte
similarity index 100%
rename from frontend/src/components/tasks/TaskLogPanel.svelte
rename to frontend/src/lib/components/tasks/TaskLogPanel.svelte
diff --git a/frontend/src/components/TaskLogViewer.svelte b/frontend/src/lib/components/tasks/TaskLogViewer.svelte
similarity index 96%
rename from frontend/src/components/TaskLogViewer.svelte
rename to frontend/src/lib/components/tasks/TaskLogViewer.svelte
index 9af254aaa..d70d6699b 100644
--- a/frontend/src/components/TaskLogViewer.svelte
+++ b/frontend/src/lib/components/tasks/TaskLogViewer.svelte
@@ -1,5 +1,5 @@
 <!-- #region TaskLogViewer [C:3] [TYPE Component] [SEMANTICS task, log, viewer, realtime, websocket] -->
-<!-- @BRIEF Component component: components/TaskLogViewer.svelte -->
+<!-- @BRIEF Displays task logs inline (in drawer) or as modal. Merges real-time WebSocket logs with polled historical logs. -->
 <!-- @LAYER UI -->
 <!--
 @UX_STATE: Loading -> Default
@@ -12,10 +12,10 @@
 @INVARIANT: Real-time logs are always appended without duplicates.
 -->
 <script lang="ts">
-    import { getTaskLogs } from "../services/taskService.js";
+    import { getTaskLogs } from "../../../services/taskService.js";
     import { t } from '$lib/i18n/index.svelte.js';
-    import TaskLogPanel from "./tasks/TaskLogPanel.svelte";
-    import Icon from "../lib/ui/Icon.svelte";
+    import TaskLogPanel from "./TaskLogPanel.svelte";
+    import Icon from "$lib/ui/Icon.svelte";
 
     let {
         show = $bindable(false),
diff --git a/frontend/src/components/tasks/TaskResultPanel.svelte b/frontend/src/lib/components/tasks/TaskResultPanel.svelte
similarity index 100%
rename from frontend/src/components/tasks/TaskResultPanel.svelte
rename to frontend/src/lib/components/tasks/TaskResultPanel.svelte
diff --git a/frontend/src/components/TaskRunner.svelte b/frontend/src/lib/components/tasks/TaskRunner.svelte
similarity index 98%
rename from frontend/src/components/TaskRunner.svelte
rename to frontend/src/lib/components/tasks/TaskRunner.svelte
index 10fea8d09..3597c969f 100755
--- a/frontend/src/components/TaskRunner.svelte
+++ b/frontend/src/lib/components/tasks/TaskRunner.svelte
@@ -1,5 +1,5 @@
 <!-- #region TaskRunner [C:3] [TYPE Component] [SEMANTICS task, runner, websocket, realtime, log] -->
-<!-- @BRIEF Component component: components/TaskRunner.svelte -->
+<!-- @BRIEF Connects to a WebSocket to display real-time logs for a running task with filtering support. -->
 <!-- @LAYER UI -->
 <!--
 @UX_STATE: Loading -> Default
@@ -13,11 +13,11 @@
     // [SECTION: IMPORTS]
     import { onMount, onDestroy } from 'svelte';
     import { selectedTask, taskLogs } from '$lib/stores.svelte.js';
-    import { getWsUrl, api } from '../lib/api.js';
+    import { getWsUrl, api } from '$lib/api';
     import { addToast } from '$lib/toasts.svelte.js';
-    import MissingMappingModal from './MissingMappingModal.svelte';
-    import PasswordPrompt from './PasswordPrompt.svelte';
-    import TaskLogPanel from './tasks/TaskLogPanel.svelte';
+    import MissingMappingModal from '$lib/components/migration/MissingMappingModal.svelte';
+    import PasswordPrompt from '$lib/components/migration/PasswordPrompt.svelte';
+    import TaskLogPanel from './TaskLogPanel.svelte';
     import { t } from '$lib/i18n/index.svelte.js';
     // [/SECTION]
 
diff --git a/frontend/src/components/__tests__/task_log_viewer.test.ts b/frontend/src/lib/components/tasks/__tests__/TaskLogViewer.test.ts
similarity index 98%
rename from frontend/src/components/__tests__/task_log_viewer.test.ts
rename to frontend/src/lib/components/tasks/__tests__/TaskLogViewer.test.ts
index 74149f288..f188a490e 100644
--- a/frontend/src/components/__tests__/task_log_viewer.test.ts
+++ b/frontend/src/lib/components/tasks/__tests__/TaskLogViewer.test.ts
@@ -15,9 +15,9 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/svelte';
 import TaskLogViewer from '../TaskLogViewer.svelte';
-import { getTaskLogs } from '../../services/taskService.js';
+import { getTaskLogs } from '../../../../services/taskService.js';
 
-vi.mock('../../services/taskService.js', () => ({
+vi.mock('../../../../services/taskService.js', () => ({
     getTaskLogs: vi.fn()
 }));
 
diff --git a/frontend/src/components/tools/DebugTool.svelte b/frontend/src/lib/components/tools/DebugTool.svelte
similarity index 97%
rename from frontend/src/components/tools/DebugTool.svelte
rename to frontend/src/lib/components/tools/DebugTool.svelte
index 5ef95d15d..e7650de0c 100644
--- a/frontend/src/components/tools/DebugTool.svelte
+++ b/frontend/src/lib/components/tools/DebugTool.svelte
@@ -1,5 +1,5 @@
 <!-- #region DebugTool [C:3] [TYPE Component] [SEMANTICS debug, diagnostic, api, tool, test] -->
-<!-- @BRIEF Component component: components/tools/DebugTool.svelte -->
+<!-- @BRIEF UI component for system diagnostics and debugging API responses. -->
 <!-- @LAYER UI -->
 <!--
 @SEMANTICS: debug, tool, api, structure
@@ -10,8 +10,8 @@
 <script lang="ts">
     // [SECTION: IMPORTS]
     import { onMount } from 'svelte';
-    import { api } from '../../lib/api.js';
-    import { runTask, getTaskStatus } from '../../services/toolsService.js';
+    import { api } from '$lib/api';
+    import { runTask, getTaskStatus } from '../../../services/toolsService.js';
     import { selectedTask } from '$lib/stores.svelte.js';
     import { addToast } from '$lib/toasts.svelte.js';
     import { t } from '$lib/i18n/index.svelte.js';
diff --git a/frontend/src/components/tools/MapperTool.svelte b/frontend/src/lib/components/tools/MapperTool.svelte
similarity index 98%
rename from frontend/src/components/tools/MapperTool.svelte
rename to frontend/src/lib/components/tools/MapperTool.svelte
index fe0a1e204..7a9db2fcb 100644
--- a/frontend/src/components/tools/MapperTool.svelte
+++ b/frontend/src/lib/components/tools/MapperTool.svelte
@@ -15,13 +15,13 @@
 <script lang="ts">
     // [SECTION: IMPORTS]
     import { onMount } from 'svelte';
-    import { runTask } from '../../services/toolsService.js';
-    import { api } from '../../lib/api';
+    import { runTask } from '../../../services/toolsService.js';
+    import { api } from '$lib/api';
     import { selectedTask } from '$lib/stores.svelte.js';
     import { addToast } from '$lib/toasts.svelte.js';
     import { t } from '$lib/i18n/index.svelte.js';
-    import { Button, Card, Select, Input, Icon } from '../../lib/ui';
-    import DocPreview from '../llm/DocPreview.svelte';
+    import { Button, Card, Select, Input, Icon } from '$lib/ui';
+    import DocPreview from '$lib/components/llm/DocPreview.svelte';
     // [/SECTION]
 
     let envs = [];
diff --git a/frontend/src/lib/components/ui/EnvSelector.svelte b/frontend/src/lib/components/ui/EnvSelector.svelte
new file mode 100644
index 000000000..26b009c39
--- /dev/null
+++ b/frontend/src/lib/components/ui/EnvSelector.svelte
@@ -0,0 +1,49 @@
+<!-- #region EnvSelector [C:3] [TYPE Component] [SEMANTICS environment, selector, dropdown, migration] -->
+<!-- @BRIEF Dropdown selector for choosing a Superset environment (source/target). -->
+<!-- @LAYER UI -->
+<!-- @RELATION BINDS_TO -> [EXT:frontend:environments] -->
+<!-- @INVARIANT Source and target environments must be selectable from the list of configured environments. -->
+<!-- @UX_STATE: Empty -> Placeholder "choose environment" shown, no env selected. -->
+<!-- @UX_STATE: Selected -> Selected environment name and URL displayed. -->
+<script lang="ts">
+    import { t } from '$lib/i18n/index.svelte.js';
+
+    let {
+        label = "",
+        selectedId = $bindable(""),
+        environments = [],
+        onchange = () => {},
+    }: {
+        label?: string;
+        selectedId: string;
+        environments: Array<{ id: string; name: string; url: string }>;
+        onchange?: (payload: { id: string }) => void;
+    } = $props();
+
+    // #region handleSelect [C:2] [TYPE Function] [SEMANTICS selection,event]
+    // @BRIEF Propagates the selection change through callback prop.
+    // @PRE event.target is an HTMLSelectElement.
+    // @POST selectedId is updated and parent callback receives the selected environment id.
+    function handleSelect(event: Event) {
+        const target = event.target as HTMLSelectElement;
+        selectedId = target.value;
+        onchange({ id: selectedId });
+    }
+    // #endregion handleSelect
+</script>
+
+<div class="flex flex-col space-y-1">
+    <label for="env-select" class="text-sm font-medium text-text">{label}</label>
+    <select
+        id="env-select"
+        class="block w-full pl-3 pr-10 py-2 text-base border-border-strong focus:outline-none focus:ring-primary-ring focus:border-primary-ring sm:text-sm rounded-md"
+        value={selectedId}
+        onchange={handleSelect}
+    >
+        <option value="" disabled>{$t.common?.choose_environment}</option>
+        {#each environments as env}
+            <option value={env.id}>{env.name} ({env.url})</option>
+        {/each}
+    </select>
+</div>
+<!-- #endregion EnvSelector -->
diff --git a/frontend/src/components/MappingTable.svelte b/frontend/src/lib/components/ui/MappingTable.svelte
similarity index 98%
rename from frontend/src/components/MappingTable.svelte
rename to frontend/src/lib/components/ui/MappingTable.svelte
index 2a093aac2..cdc9e6a0f 100644
--- a/frontend/src/components/MappingTable.svelte
+++ b/frontend/src/lib/components/ui/MappingTable.svelte
@@ -1,5 +1,5 @@
 <!-- #region MappingTable [C:3] [TYPE Component] [SEMANTICS mapping, database, editor, crud, migration] -->
-<!-- @BRIEF Component component: components/MappingTable.svelte -->
+<!-- @BRIEF Displays and allows editing of database mappings. -->
 <!-- @LAYER UI -->
 <!--
 @SEMANTICS: mapping, table, database, editor
diff --git a/frontend/src/components/StartupEnvironmentWizard.svelte b/frontend/src/lib/components/ui/StartupEnvironmentWizard.svelte
similarity index 99%
rename from frontend/src/components/StartupEnvironmentWizard.svelte
rename to frontend/src/lib/components/ui/StartupEnvironmentWizard.svelte
index 6a40fda50..034087b44 100644
--- a/frontend/src/components/StartupEnvironmentWizard.svelte
+++ b/frontend/src/lib/components/ui/StartupEnvironmentWizard.svelte
@@ -1,5 +1,5 @@
 <!-- #region StartupEnvironmentWizard [C:3] [TYPE Component] [SEMANTICS wizard, environment, setup, onboarding, form] -->
-<!-- @BRIEF Component component: components/StartupEnvironmentWizard.svelte -->
+<!-- @BRIEF Blocking startup wizard for creating the first Superset environment from zero-state screens. -->
 <!-- @LAYER UI -->
 <!-- @RATIONALE Fixed (1) missing connections.json locale — $t.connections?.name/user/pass rendered empty spans causing floating form fields. Created en/ru locales. (2) header bg-surface-page created visible white strip at top in darkened modal overlay; changed to bg-surface-card, border-b provides sufficient separation. -->
 <script lang="ts">
diff --git a/frontend/src/components/Toast.svelte b/frontend/src/lib/components/ui/Toast.svelte
old mode 100755
new mode 100644
similarity index 89%
rename from frontend/src/components/Toast.svelte
rename to frontend/src/lib/components/ui/Toast.svelte
index 166ce7ed3..c6bcdb66c
--- a/frontend/src/components/Toast.svelte
+++ b/frontend/src/lib/components/ui/Toast.svelte
@@ -2,18 +2,15 @@
 <!-- @BRIEF Toast notifications: transient (auto-dismiss) and persistent (close button only).
      Persistent toasts render above modals (z-[100]) with warning style and close button. -->
 <!-- @LAYER UI -->
-<!--
-@RELATION BINDS_TO -> [EXT:frontend:toasts]
-
-@UX_STATE: Empty -> Toast viewport stays mounted without visible notifications.
-@UX_STATE: Visible -> Active toast items render with type-specific emphasis and optional close button.
-@UX_STATE: Persistent -> Warning-style toast with close button, stays until manually dismissed.
-@UX_FEEDBACK Close button on persistent toasts; auto-dismiss on transient toasts.
--->
+<!-- @RELATION BINDS_TO -> [EXT:frontend:toasts] -->
+<!-- @UX_STATE: Empty -> Toast viewport stays mounted without visible notifications. -->
+<!-- @UX_STATE: Visible -> Active toast items render with type-specific emphasis and optional close button. -->
+<!-- @UX_STATE: Persistent -> Warning-style toast with close button, stays until manually dismissed. -->
+<!-- @UX_FEEDBACK Close button on persistent toasts; auto-dismiss on transient toasts. -->
 <script lang="ts">
     import { toasts, removeToast } from '$lib/toasts.svelte.js';
 
-    function handleDismiss(id) {
+    function handleDismiss(id: string) {
         removeToast(id);
     }
 </script>
@@ -75,6 +72,4 @@
         </div>
     {/each}
 </div>
-<!-- [/SECTION] -->
-
 <!-- #endregion Toast -->
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 014641bf5..0d4d78163 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
 <!-- @RELATION DEPENDS_ON -> [EXT:frontend:TopNavbar] -->
 <!-- @RELATION DEPENDS_ON -> [Footer] -->
 <!-- @RELATION DEPENDS_ON -> [Toast] -->
-<!-- @RELATION DEPENDS_ON -> [EXT:frontend:ProtectedRoute] -->
+<!-- @RELATION DEPENDS_ON -> [ProtectedRoute] -->
 <!-- @RELATION DEPENDS_ON -> [EXT:frontend:TaskDrawer] -->
 <!-- @RELATION DEPENDS_ON -> [EXT:frontend:Breadcrumbs] -->
 <!-- @RELATION DEPENDS_ON -> [EXT:frontend:AssistantChatPanel] -->
@@ -21,10 +21,10 @@
 <!-- @INVARIANT Sidebar width adapts (ml-60 vs ml-16) based on sidebar expanded state. -->
 <script lang="ts">
     import '../app.css';
-    import Navbar from '../components/Navbar.svelte';
-    import Footer from '../components/Footer.svelte';
-    import Toast from '../components/Toast.svelte';
-    import ProtectedRoute from '../components/auth/ProtectedRoute.svelte';
+    import Navbar from '$lib/components/layout/Navbar.svelte';
+    import Footer from '$lib/components/layout/Footer.svelte';
+    import Toast from '$lib/components/ui/Toast.svelte';
+    import ProtectedRoute from '$lib/components/auth/ProtectedRoute.svelte';
     import Breadcrumbs from '$lib/components/layout/Breadcrumbs.svelte';
     import Sidebar from '$lib/components/layout/Sidebar.svelte';
     import TopNavbar from '$lib/components/layout/TopNavbar.svelte';
diff --git a/frontend/src/routes/admin/roles/+page.svelte b/frontend/src/routes/admin/roles/+page.svelte
index bd1db322b..550833f94 100644
--- a/frontend/src/routes/admin/roles/+page.svelte
+++ b/frontend/src/routes/admin/roles/+page.svelte
@@ -17,7 +17,7 @@
   // [SECTION: IMPORTS]
   import { onMount } from 'svelte';
   import { t } from '$lib/i18n/index.svelte.js';
-  import ProtectedRoute from '../../../components/auth/ProtectedRoute.svelte';
+  import ProtectedRoute from '$lib/components/auth/ProtectedRoute.svelte';
   import { adminService } from '../../../services/adminService';
   // [/SECTION: IMPORTS]
 
diff --git a/frontend/src/routes/admin/settings/+page.svelte b/frontend/src/routes/admin/settings/+page.svelte
index ba8081b80..12cb0662e 100644
--- a/frontend/src/routes/admin/settings/+page.svelte
+++ b/frontend/src/routes/admin/settings/+page.svelte
@@ -17,7 +17,7 @@
   // [SECTION: IMPORTS]
   import { onMount } from 'svelte';
   import { t } from '$lib/i18n/index.svelte.js';
-  import ProtectedRoute from '../../../components/auth/ProtectedRoute.svelte';
+  import ProtectedRoute from '$lib/components/auth/ProtectedRoute.svelte';
   import { adminService } from '../../../services/adminService';
   // [/SECTION: IMPORTS]
 
diff --git a/frontend/src/routes/admin/settings/llm/+page.svelte b/frontend/src/routes/admin/settings/llm/+page.svelte
index c15dd24fd..a9e2057ad 100644
--- a/frontend/src/routes/admin/settings/llm/+page.svelte
+++ b/frontend/src/routes/admin/settings/llm/+page.svelte
@@ -12,7 +12,7 @@
 
 <script lang="ts">
   import { onMount } from 'svelte';
-  import ProviderConfig from '../../../../components/llm/ProviderConfig.svelte';
+  import ProviderConfig from '$lib/components/llm/ProviderConfig.svelte';
   import { t } from '$lib/i18n/index.svelte.js';
   import { addToast } from '$lib/toasts.svelte.js';
   import { requestApi } from '../../../../lib/api';
diff --git a/frontend/src/routes/admin/users/+page.svelte b/frontend/src/routes/admin/users/+page.svelte
index fc99f0f28..d349ebbe1 100644
--- a/frontend/src/routes/admin/users/+page.svelte
+++ b/frontend/src/routes/admin/users/+page.svelte
@@ -8,7 +8,7 @@
 @RELATION  IMPLEMENTS -> [EXT:frontend:RoutePages]
 @RELATION  IMPLEMENTS -> [PageContracts]
 @RELATION  DEPENDS_ON -> [frontend.src.services.adminService]
-@RELATION  DEPENDS_ON -> [frontend.src.components.auth.ProtectedRoute]
+@RELATION  DEPENDS_ON -> [ProtectedRoute]
 @UX_STATE:  Loading -> User table and role assignments wait for admin data.
 @UX_STATE:  Ready -> User list and create-edit controls are interactive.
 @UX_STATE:  Modal -> User create or edit dialog is active while background list stays intact.
@@ -21,7 +21,7 @@
   // [SECTION: IMPORTS]
   import { onMount } from 'svelte';
   import { t } from '$lib/i18n/index.svelte.js';
-  import ProtectedRoute from '../../../components/auth/ProtectedRoute.svelte';
+  import ProtectedRoute from '$lib/components/auth/ProtectedRoute.svelte';
   import { adminService } from '../../../services/adminService';
   // [/SECTION: IMPORTS]
 
diff --git a/frontend/src/routes/dashboards/+page.svelte b/frontend/src/routes/dashboards/+page.svelte
index 64e1939b1..0ac3250ea 100644
--- a/frontend/src/routes/dashboards/+page.svelte
+++ b/frontend/src/routes/dashboards/+page.svelte
@@ -24,8 +24,8 @@
   import { debounce } from "$lib/utils/debounce.js";
   import { addToast } from "$lib/toasts.svelte.js";
   import { gitService } from "../../services/gitService.js";
-  import MappingTable from "../../components/MappingTable.svelte";
-  import StartupEnvironmentWizard from "../../components/StartupEnvironmentWizard.svelte";
+  import MappingTable from "$lib/components/ui/MappingTable.svelte";
+  import StartupEnvironmentWizard from "$lib/components/ui/StartupEnvironmentWizard.svelte";
   import SearchableMultiSelect from "$lib/components/ui/SearchableMultiSelect.svelte";
   import DashboardMaintenanceBadge from "$lib/components/DashboardMaintenanceBadge.svelte";
   import { MigrationModel } from "../../lib/models/MigrationModel.svelte.ts";
diff --git a/frontend/src/routes/dashboards/MigrateDashboardModal.svelte b/frontend/src/routes/dashboards/MigrateDashboardModal.svelte
index 7ab332d95..1bdb6c74d 100644
--- a/frontend/src/routes/dashboards/MigrateDashboardModal.svelte
+++ b/frontend/src/routes/dashboards/MigrateDashboardModal.svelte
@@ -6,7 +6,7 @@
 <script lang="ts">
   import { t } from '$lib/i18n/index.svelte.js';
   import { openDrawerForTaskIfPreferred } from '$lib/stores/taskDrawer.svelte.js';
-  import MappingTable from '../../components/MappingTable.svelte';
+  import MappingTable from '$lib/components/ui/MappingTable.svelte';
   import type { DashboardHubModel } from '$lib/models/DashboardHubModel.svelte';
 
   let { model, environments = [] }: {
diff --git a/frontend/src/routes/dashboards/[id]/+page.svelte b/frontend/src/routes/dashboards/[id]/+page.svelte
index 775f4c12c..c7ff2466a 100644
--- a/frontend/src/routes/dashboards/[id]/+page.svelte
+++ b/frontend/src/routes/dashboards/[id]/+page.svelte
@@ -17,9 +17,9 @@
   import { openDrawerForTaskIfPreferred } from '$lib/stores/taskDrawer.svelte.js';
   import { DashboardDetailModel } from '$lib/models/DashboardDetailModel.svelte';
   import Icon from '$lib/ui/Icon.svelte';
-  import BranchSelector from '../../../components/git/BranchSelector.svelte';
-  import CommitHistory from '../../../components/git/CommitHistory.svelte';
-  import GitManager from '../../../components/git/GitManager.svelte';
+  import BranchSelector from '$lib/components/git/BranchSelector.svelte';
+  import CommitHistory from '$lib/components/git/CommitHistory.svelte';
+  import GitManager from '$lib/components/git/GitManager.svelte';
   import DashboardHeader from './components/DashboardHeader.svelte';
   import DashboardGitManager from './components/DashboardGitManager.svelte';
   import DashboardLinkedResources from './components/DashboardLinkedResources.svelte';
diff --git a/frontend/src/routes/dashboards/[id]/components/DashboardHeader.svelte b/frontend/src/routes/dashboards/[id]/components/DashboardHeader.svelte
index 36ebdec22..3da00fd7d 100644
--- a/frontend/src/routes/dashboards/[id]/components/DashboardHeader.svelte
+++ b/frontend/src/routes/dashboards/[id]/components/DashboardHeader.svelte
@@ -7,7 +7,7 @@
 <script lang="ts">
   import { t } from "$lib/i18n/index.svelte.js";
   import Icon from "$lib/ui/Icon.svelte";
-  import BranchSelector from "../../../../components/git/BranchSelector.svelte";
+  import BranchSelector from "$lib/components/git/BranchSelector.svelte";
 
   let {
     dashboard,
diff --git a/frontend/src/routes/git/+page.svelte b/frontend/src/routes/git/+page.svelte
index 88225efac..b02585c67 100644
--- a/frontend/src/routes/git/+page.svelte
+++ b/frontend/src/routes/git/+page.svelte
@@ -13,7 +13,7 @@
 <!-- @INVARIANT "Repositories" tab only shows dashboards with initialized Git repos. -->
 <script lang="ts">
   import { onMount, untrack } from 'svelte';
-  import RepositoryDashboardGrid from '../../components/RepositoryDashboardGrid.svelte';
+  import RepositoryDashboardGrid from '$lib/components/dashboard/RepositoryDashboardGrid.svelte';
   import { addToast as toast } from '$lib/toasts.svelte.js';
   import { api } from '../../lib/api.js';
   import { gitService } from '../../services/gitService.js';
diff --git a/frontend/src/routes/migration/+page.svelte b/frontend/src/routes/migration/+page.svelte
index 4d267c692..38a05136d 100644
--- a/frontend/src/routes/migration/+page.svelte
+++ b/frontend/src/routes/migration/+page.svelte
@@ -35,13 +35,13 @@
 
 <script lang="ts">
   import { onMount } from "svelte";
-  import EnvSelector from "../../components/EnvSelector.svelte";
-  import DashboardGrid from "../../components/DashboardGrid.svelte";
-  import MappingTable from "../../components/MappingTable.svelte";
-  import TaskRunner from "../../components/TaskRunner.svelte";
-  import TaskHistory from "../../components/TaskHistory.svelte";
-  import TaskLogViewer from "../../components/TaskLogViewer.svelte";
-  import PasswordPrompt from "../../components/PasswordPrompt.svelte";
+  import EnvSelector from "$lib/components/ui/EnvSelector.svelte";
+  import DashboardGrid from "$lib/components/dashboard/DashboardGrid.svelte";
+  import MappingTable from "$lib/components/ui/MappingTable.svelte";
+  import TaskRunner from "$lib/components/tasks/TaskRunner.svelte";
+  import TaskHistory from "$lib/components/tasks/TaskHistory.svelte";
+  import TaskLogViewer from "$lib/components/tasks/TaskLogViewer.svelte";
+  import PasswordPrompt from "$lib/components/migration/PasswordPrompt.svelte";
   import { MigrationModel } from "../../lib/models/MigrationModel.svelte.ts";
   import type {
     DashboardMetadata,
diff --git a/frontend/src/routes/migration/mappings/+page.svelte b/frontend/src/routes/migration/mappings/+page.svelte
index 16327be96..30402dce0 100644
--- a/frontend/src/routes/migration/mappings/+page.svelte
+++ b/frontend/src/routes/migration/mappings/+page.svelte
@@ -31,8 +31,8 @@
 
   import { onMount } from 'svelte';
   import { MappingsModel } from '$lib/models/MappingsModel.svelte.ts';
-  import EnvSelector from '../../../components/EnvSelector.svelte';
-  import MappingTable from '../../../components/MappingTable.svelte';
+  import EnvSelector from '$lib/components/ui/EnvSelector.svelte';
+  import MappingTable from '$lib/components/ui/MappingTable.svelte';
   import { t } from '$lib/i18n/index.svelte.js';
   import { Button, PageHeader } from '$lib/ui';
 
diff --git a/frontend/src/routes/settings/LlmSettings.svelte b/frontend/src/routes/settings/LlmSettings.svelte
index 56fa640bb..f45b63c01 100644
--- a/frontend/src/routes/settings/LlmSettings.svelte
+++ b/frontend/src/routes/settings/LlmSettings.svelte
@@ -9,7 +9,7 @@
 <!-- @UX_FEEDBACK Toast on save. -->
 <script lang="ts">
   import { t } from "$lib/i18n/index.svelte.js";
-  import ProviderConfig from "../../components/llm/ProviderConfig.svelte";
+  import ProviderConfig from "$lib/components/llm/ProviderConfig.svelte";
   import HelpTooltip from "$lib/ui/HelpTooltip.svelte";
 
   let { settings = $bindable(), onSave } = $props();
diff --git a/frontend/src/routes/tools/backups/+page.svelte b/frontend/src/routes/tools/backups/+page.svelte
index b3ac703f1..ee2463d84 100644
--- a/frontend/src/routes/tools/backups/+page.svelte
+++ b/frontend/src/routes/tools/backups/+page.svelte
@@ -18,7 +18,7 @@
   // [SECTION: IMPORTS]
   import { t } from '$lib/i18n/index.svelte.js';
   import { PageHeader } from '../../../lib/ui';
-  import BackupManager from '../../../components/backups/BackupManager.svelte';
+  import BackupManager from '$lib/components/backups/BackupManager.svelte';
   // [/SECTION]
 </script>
 
diff --git a/frontend/src/routes/tools/debug/+page.svelte b/frontend/src/routes/tools/debug/+page.svelte
index 835742f81..c406d7089 100644
--- a/frontend/src/routes/tools/debug/+page.svelte
+++ b/frontend/src/routes/tools/debug/+page.svelte
@@ -15,8 +15,8 @@
 @UX_STATE: Error -> Nested diagnostic failures remain scoped to the debug workspace.
 -->
 <script lang="ts">
-    import DebugTool from '../../../components/tools/DebugTool.svelte';
-    import TaskRunner from '../../../components/TaskRunner.svelte';
+    import DebugTool from '$lib/components/tools/DebugTool.svelte';
+    import TaskRunner from '$lib/components/tasks/TaskRunner.svelte';
     import { PageHeader } from '$lib/ui';
     import { t } from '$lib/i18n/index.svelte.js';
 </script>
diff --git a/frontend/src/routes/tools/mapper/+page.svelte b/frontend/src/routes/tools/mapper/+page.svelte
index 891d26275..52c417892 100644
--- a/frontend/src/routes/tools/mapper/+page.svelte
+++ b/frontend/src/routes/tools/mapper/+page.svelte
@@ -15,8 +15,8 @@
 @UX_STATE: Error -> Mapping-specific validation or execution failures remain visible without route changes.
 -->
 <script lang="ts">
-    import MapperTool from '../../../components/tools/MapperTool.svelte';
-    import TaskRunner from '../../../components/TaskRunner.svelte';
+    import MapperTool from '$lib/components/tools/MapperTool.svelte';
+    import TaskRunner from '$lib/components/tasks/TaskRunner.svelte';
     import { PageHeader } from '$lib/ui';
     import { t } from '$lib/i18n/index.svelte.js';
 </script>
diff --git a/frontend/src/routes/tools/storage/+page.svelte b/frontend/src/routes/tools/storage/+page.svelte
index b7bd1c13e..2faf90312 100644
--- a/frontend/src/routes/tools/storage/+page.svelte
+++ b/frontend/src/routes/tools/storage/+page.svelte
@@ -21,8 +21,8 @@
   import { listFiles, deleteFile } from '../../../services/storageService';
   import { addToast } from '$lib/toasts.svelte.js';
   import { t } from '$lib/i18n/index.svelte.js';
-  import FileList from '../../../components/storage/FileList.svelte';
-  import FileUpload from '../../../components/storage/FileUpload.svelte';
+  import FileList from '$lib/components/storage/FileList.svelte';
+  import FileUpload from '$lib/components/storage/FileUpload.svelte';
   // [/SECTION: IMPORTS]
 
   // #region loadFiles:Function [TYPE Function]