@myrialabs/clopen 0.2.1 → 0.2.3

package/frontend/{lib/components → components}/index.ts

@@ -1,13 +1,13 @@
 // Component exports
-export { default as ThemeToggle } from './common/ThemeToggle.svelte';
-export { default as LoadingSpinner } from './common/LoadingSpinner.svelte';
-export { default as Button } from './common/Button.svelte';
-export { default as Input } from './common/Input.svelte';
-export { default as Card } from './common/Card.svelte';
-export { default as ModelSelector } from './common/ModelSelector.svelte';
-export { default as MonacoEditor } from './common/MonacoEditor.svelte';
-export { default as PageTemplate } from './common/PageTemplate.svelte';
-export { default as Modal } from './common/Modal.svelte';
+export { default as ThemeToggle } from './common/display/ThemeToggle.svelte';
+export { default as LoadingSpinner } from './common/feedback/LoadingSpinner.svelte';
+export { default as Button } from './common/display/Button.svelte';
+export { default as Input } from './common/form/Input.svelte';
+export { default as Card } from './common/display/Card.svelte';
+export { default as ModelSelector } from './common/form/ModelSelector.svelte';
+export { default as MonacoEditor } from './common/editor/MonacoEditor.svelte';
+export { default as PageTemplate } from './common/display/PageTemplate.svelte';
+export { default as Modal } from './common/overlay/Modal.svelte';
 
 // Chat components
 export { default as ChatMessages } from './chat/message/ChatMessages.svelte';

package/frontend/{lib/components → components}/preview/browser/BrowserPreview.svelte

@@ -4,15 +4,15 @@
 	import VirtualCursor from './components/VirtualCursor.svelte';
 	import SelectDropdown from './components/SelectDropdown.svelte';
 	import ContextMenu from './components/ContextMenu.svelte';
-	import type { BrowserSelectInfo, BrowserContextMenuInfo } from '$frontend/lib/types/native-ui';
+	import type { BrowserSelectInfo, BrowserContextMenuInfo } from '$frontend/utils/native-ui';
 	import { fly } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import { onMount, onDestroy } from 'svelte';
-	import type { DeviceSize, Rotation } from '$frontend/lib/constants/preview';
+	import type { DeviceSize, Rotation } from '$frontend/utils/preview-constants';
 	import { debug } from '$shared/utils/logger';
 	import { createBrowserCoordinator } from './core/coordinator.svelte';
 	import { sendScaleUpdate } from './core/interactions.svelte';
-	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
+	import { projectState } from '$frontend/stores/core/projects.svelte';
 
 	let {
 		url = $bindable(''),

package/frontend/{lib/components → components}/preview/browser/components/Canvas.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import { getViewportDimensions, type DeviceSize, type Rotation } from '$frontend/lib/constants/preview';
-	import { BrowserWebCodecsService, type BrowserWebCodecsStreamStats } from '$frontend/lib/services/preview/browser/browser-webcodecs.service';
+	import { getViewportDimensions, type DeviceSize, type Rotation } from '$frontend/utils/preview-constants';
+	import { BrowserWebCodecsService, type BrowserWebCodecsStreamStats } from '$frontend/services/preview/browser/browser-webcodecs.service';
 	import { debug } from '$shared/utils/logger';
 
 	let {

package/frontend/{lib/components → components}/preview/browser/components/ConsolePanel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import { fly } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 

package/frontend/{lib/components → components}/preview/browser/components/Container.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import Canvas from './Canvas.svelte';
 	import VirtualCursor from './VirtualCursor.svelte';
 	import { scale } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import { onDestroy } from 'svelte';
-	import { getViewportDimensions, type DeviceSize, type Rotation } from '$frontend/lib/constants/preview';
+	import { getViewportDimensions, type DeviceSize, type Rotation } from '$frontend/utils/preview-constants';
 	import { debug } from '$shared/utils/logger';
 	import { sendScaleUpdate } from '../core/interactions.svelte';
 

package/frontend/{lib/components → components}/preview/browser/components/ContextMenu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { BrowserContextMenuInfo, BrowserContextMenuItem } from '$frontend/lib/types/native-ui';
+	import type { BrowserContextMenuInfo, BrowserContextMenuItem } from '$frontend/utils/native-ui';
 	import { onMount } from 'svelte';
 
 	let {

package/frontend/{lib/components → components}/preview/browser/components/SelectDropdown.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { BrowserSelectInfo, BrowserSelectOption } from '$frontend/lib/types/native-ui';
+	import type { BrowserSelectInfo, BrowserSelectOption } from '$frontend/utils/native-ui';
 	import { onMount } from 'svelte';
 
 	let {

package/frontend/{lib/components → components}/preview/browser/components/Toolbar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import { addNotification } from '$frontend/stores/ui/notification.svelte';
 	import { onDestroy } from 'svelte';
 
 	let {

package/frontend/{lib/components → components}/preview/browser/core/cleanup.svelte.ts

@@ -11,7 +11,7 @@
  * - Tab is explicitly closed via UI
  */
 
-import ws from '$frontend/lib/utils/ws';
+import ws from '$frontend/utils/ws';
 import { debug } from '$shared/utils/logger';
 
 class BrowserCleanupManager {

package/frontend/{lib/components → components}/preview/browser/core/coordinator.svelte.ts

@@ -4,7 +4,7 @@
  */
 
 import { debug } from '$shared/utils/logger';
-import type { DeviceSize, Rotation } from '$frontend/lib/constants/preview';
+import type { DeviceSize, Rotation } from '$frontend/utils/preview-constants';
 import { createTabManager, type TabManager, type PreviewTab, getTabTitle } from './tab-manager.svelte';
 import { createStreamMessageHandler, type StreamMessageHandler } from './stream-handler.svelte';
 import { createNativeUIHandler, type NativeUIHandler } from './native-ui-handlers.svelte';
@@ -20,7 +20,7 @@ import {
 } from './tab-operations.svelte';
 import { browserCleanup } from './cleanup.svelte';
 import { sendInteraction, updateViewport, setInteractionProjectId } from './interactions.svelte';
-import type { BrowserSelectInfo, BrowserContextMenuInfo } from '$frontend/lib/types/native-ui';
+import type { BrowserSelectInfo, BrowserContextMenuInfo } from '$frontend/utils/native-ui';
 
 export interface BrowserCoordinatorConfig {
 	// Project ID getter (REQUIRED for project isolation)
@@ -590,7 +590,7 @@ export function createBrowserCoordinator(config: BrowserCoordinatorConfig) {
 
 		// Import ws synchronously (should already be loaded in app context)
 		// This is critical to ensure listeners are ready before any events arrive
-		import('$frontend/lib/utils/ws').then(({ default: ws }) => {
+		import('$frontend/utils/ws').then(({ default: ws }) => {
 			debug.log('preview', '✅ WebSocket module loaded, registering tab event listeners');
 
 			// Listen for tab opened events (from MCP or backend)
@@ -724,7 +724,7 @@ export function createBrowserCoordinator(config: BrowserCoordinatorConfig) {
 	 */
 	function setupNavigationListeners() {
 		// Import ws at runtime to avoid circular dependencies
-		import('$frontend/lib/utils/ws').then(({ default: ws }) => {
+		import('$frontend/utils/ws').then(({ default: ws }) => {
 			// Listen for navigation loading events
 			ws.on('preview:browser-navigation-loading', (data: { sessionId: string; type: string; url: string; timestamp: number }) => {
 				debug.log('preview', `🔄 Navigation loading event received: ${data.sessionId} → ${data.url}`);

package/frontend/{lib/components → components}/preview/browser/core/interactions.svelte.ts

@@ -5,9 +5,9 @@
  * All interactions work with active tab on backend.
  */
 
-import ws from '$frontend/lib/utils/ws';
+import ws from '$frontend/utils/ws';
 import { debug } from '$shared/utils/logger';
-import type { DeviceSize, Rotation } from '$frontend/lib/constants/preview';
+import type { DeviceSize, Rotation } from '$frontend/utils/preview-constants';
 
 export interface InteractionAction {
 	type:
@@ -86,7 +86,7 @@ export async function updateViewport(
 	scale: number
 ): Promise<void> {
 	// Import here to avoid circular dependency
-	const { getViewportDimensions } = await import('$frontend/lib/constants/preview.js');
+	const { getViewportDimensions } = await import('$frontend/utils/preview-constants.js');
 
 	// Use getViewportDimensions for consistent viewport calculation
 	const { width, height } = getViewportDimensions(deviceSize, rotation);

package/frontend/{lib/components → components}/preview/browser/core/mcp-handlers.svelte.ts

@@ -4,8 +4,8 @@
  */
 
 import { debug } from '$shared/utils/logger';
-import { showInfo, showWarning } from '$frontend/lib/stores/ui/notification.svelte';
-import ws from '$frontend/lib/utils/ws';
+import { showInfo, showWarning } from '$frontend/stores/ui/notification.svelte';
+import ws from '$frontend/utils/ws';
 import type { TabManager } from './tab-manager.svelte';
 
 // MCP Control State interface

package/frontend/{lib/components → components}/preview/browser/core/native-ui-handlers.svelte.ts

@@ -4,8 +4,8 @@
  */
 
 import { debug } from '$shared/utils/logger';
-import ws from '$frontend/lib/utils/ws';
-import type { BrowserDialogEvent, BrowserPrintEvent, BrowserSelectInfo, BrowserContextMenuInfo } from '$frontend/lib/types/native-ui';
+import ws from '$frontend/utils/ws';
+import type { BrowserDialogEvent, BrowserPrintEvent, BrowserSelectInfo, BrowserContextMenuInfo } from '$frontend/utils/native-ui';
 import type { TabManager } from './tab-manager.svelte';
 
 export interface NativeUIHandlerConfig {

package/frontend/{lib/components → components}/preview/browser/core/tab-manager.svelte.ts

@@ -4,7 +4,7 @@
  */
 
 import { debug } from '$shared/utils/logger';
-import type { DeviceSize, Rotation } from '$frontend/lib/constants/preview';
+import type { DeviceSize, Rotation } from '$frontend/utils/preview-constants';
 
 // Console message type (temporary placeholder)
 type ConsoleMessage = any;

package/frontend/{lib/components → components}/preview/browser/core/tab-operations.svelte.ts

@@ -10,10 +10,10 @@
  * - Frontend reconnects to backend tabs and restarts streaming
  */
 
-import ws from '$frontend/lib/utils/ws';
+import ws from '$frontend/utils/ws';
 import { debug } from '$shared/utils/logger';
-import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
-import type { DeviceSize, Rotation } from '$frontend/lib/constants/preview';
+import { addNotification } from '$frontend/stores/ui/notification.svelte';
+import type { DeviceSize, Rotation } from '$frontend/utils/preview-constants';
 
 export interface BrowserSessionInfo {
 	quality: string;

package/frontend/{lib/components → components}/settings/SettingsModal.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
 	import { fade, scale, fly } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import {
 		settingsModalState,
 		closeSettingsModal,
 		setActiveSection,
 		settingsSections,
 		type SettingsSection
-	} from '$frontend/lib/stores/ui/settings-modal.svelte';
-	import { authStore } from '$frontend/lib/stores/features/auth.svelte';
-	import { systemSettings } from '$frontend/lib/stores/features/settings.svelte';
+	} from '$frontend/stores/ui/settings-modal.svelte';
+	import { authStore } from '$frontend/stores/features/auth.svelte';
+	import { systemSettings } from '$frontend/stores/features/settings.svelte';
 
 	// Import settings components
 	import ModelSettings from './model/ModelSettings.svelte';

package/frontend/{lib/components → components}/settings/SettingsView.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { authStore } from '$frontend/lib/stores/features/auth.svelte';
-	import PageTemplate from '../common/PageTemplate.svelte';
+	import { authStore } from '$frontend/stores/features/auth.svelte';
+	import PageTemplate from '../common/display/PageTemplate.svelte';
 
 	// Import modular components
 	import ModelSettings from './model/ModelSettings.svelte';

package/frontend/{lib/components → components}/settings/admin/InviteManagement.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { authStore } from '$frontend/lib/stores/features/auth.svelte';
-	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
-	import Icon from '../../common/Icon.svelte';
-	import Dialog from '../../common/Dialog.svelte';
-	import ws from '$frontend/lib/utils/ws';
+	import { authStore } from '$frontend/stores/features/auth.svelte';
+	import { addNotification } from '$frontend/stores/ui/notification.svelte';
+	import Icon from '../../common/display/Icon.svelte';
+	import Dialog from '../../common/overlay/Dialog.svelte';
+	import ws from '$frontend/utils/ws';
 	import { debug } from '$shared/utils/logger';
 
 	interface Invite {

package/frontend/{lib/components → components}/settings/admin/UserManagement.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { authStore } from '$frontend/lib/stores/features/auth.svelte';
-	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
-	import Icon from '../../common/Icon.svelte';
-	import Dialog from '../../common/Dialog.svelte';
-	import ws from '$frontend/lib/utils/ws';
+	import { authStore } from '$frontend/stores/features/auth.svelte';
+	import { addNotification } from '$frontend/stores/ui/notification.svelte';
+	import Icon from '../../common/display/Icon.svelte';
+	import Dialog from '../../common/overlay/Dialog.svelte';
+	import ws from '$frontend/utils/ws';
 	import { debug } from '$shared/utils/logger';
 
 	interface User {

package/frontend/{lib/components → components}/settings/appearance/AppearanceSettings.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { themeStore, toggleDarkMode } from '$frontend/lib/stores/ui/theme.svelte';
-	import { settings, updateSettings, applyFontSize } from '$frontend/lib/stores/features/settings.svelte';
-	import Icon from '../../common/Icon.svelte';
+	import { themeStore, toggleDarkMode } from '$frontend/stores/ui/theme.svelte';
+	import { settings, updateSettings, applyFontSize } from '$frontend/stores/features/settings.svelte';
+	import Icon from '../../common/display/Icon.svelte';
 
-	const FONT_SIZE_MIN = 10;
-	const FONT_SIZE_MAX = 20;
+	const FONT_SIZE_MIN = 8;
+	const FONT_SIZE_MAX = 24;
 
 	function handleFontSizeChange(e: Event) {
 		const value = Number((e.target as HTMLInputElement).value);

package/frontend/{lib/components → components}/settings/appearance/LayoutPresetSettings.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import Icon from '../../common/Icon.svelte';
+	import Icon from '../../common/display/Icon.svelte';
 	import LayoutPreview from './LayoutPreview.svelte';
-	import { builtInPresets } from '$frontend/lib/stores/ui/workspace.svelte';
-	import { settings, updateSettings } from '$frontend/lib/stores/features/settings.svelte';
+	import { builtInPresets } from '$frontend/stores/ui/workspace.svelte';
+	import { settings, updateSettings } from '$frontend/stores/features/settings.svelte';
 	import type { IconName } from '$shared/types/ui/icons';
 
 	// Group presets by category

package/frontend/{lib/components → components}/settings/appearance/LayoutPreview.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { SplitNode, PanelId } from '$frontend/lib/stores/ui/workspace.svelte';
+	import type { SplitNode, PanelId } from '$frontend/stores/ui/workspace.svelte';
 
 	interface Props {
 		layout: SplitNode;

package/frontend/{lib/components → components}/settings/engines/AIEnginesSettings.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
-	import { browser } from '$frontend/lib/app-environment';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import Dialog from '$frontend/lib/components/common/Dialog.svelte';
-	import ws from '$frontend/lib/utils/ws';
-	import { isDarkMode } from '$frontend/lib/utils/theme';
+	import { browser } from '$frontend/app-environment';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import Dialog from '$frontend/components/common/overlay/Dialog.svelte';
+	import ws from '$frontend/utils/ws';
+	import { isDarkMode } from '$frontend/utils/theme';
 	import { ENGINES } from '$shared/constants/engines';
-	import { claudeAccountsStore, type ClaudeAccountItem as ClaudeCodeAccountItem } from '$frontend/lib/stores/features/claude-accounts.svelte';
+	import { claudeAccountsStore, type ClaudeAccountItem as ClaudeCodeAccountItem } from '$frontend/stores/features/claude-accounts.svelte';
 	import type { Terminal } from '@xterm/xterm';
 	import type { FitAddon } from '@xterm/addon-fit';
 

package/frontend/{lib/components → components}/settings/general/AdvancedSettings.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { systemSettings, updateSystemSettings } from '$frontend/lib/stores/features/settings.svelte';
-	import { authStore } from '$frontend/lib/stores/features/auth.svelte';
-	import Icon from '../../common/Icon.svelte';
-	import Dialog from '../../common/Dialog.svelte';
-	import { detectPlatform } from '$frontend/lib/utils/platform';
+	import { systemSettings, updateSystemSettings } from '$frontend/stores/features/settings.svelte';
+	import { authStore } from '$frontend/stores/features/auth.svelte';
+	import Icon from '../../common/display/Icon.svelte';
+	import Dialog from '../../common/overlay/Dialog.svelte';
+	import { detectPlatform } from '$frontend/utils/platform';
 
 	const isAdmin = $derived(authStore.isAdmin);
 	const settings = $derived(systemSettings);

package/frontend/{lib/components → components}/settings/general/AuthModeSettings.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { systemSettings, updateSystemSettings } from '$frontend/lib/stores/features/settings.svelte';
-	import { authStore } from '$frontend/lib/stores/features/auth.svelte';
-	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
-	import Icon from '../../common/Icon.svelte';
-	import Dialog from '../../common/Dialog.svelte';
+	import { systemSettings, updateSystemSettings } from '$frontend/stores/features/settings.svelte';
+	import { authStore } from '$frontend/stores/features/auth.svelte';
+	import { addNotification } from '$frontend/stores/ui/notification.svelte';
+	import Icon from '../../common/display/Icon.svelte';
+	import Dialog from '../../common/overlay/Dialog.svelte';
 	import type { AuthMode } from '$shared/types/stores/settings';
 	import { debug } from '$shared/utils/logger';
 

package/frontend/{lib/components → components}/settings/general/DataManagementSettings.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { initializeProjects, projectState } from '$frontend/lib/stores/core/projects.svelte';
-	import { initializeStore } from '$frontend/lib/stores/core/app.svelte';
-	import { sessionState } from '$frontend/lib/stores/core/sessions.svelte';
-	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
-	import { settings, resetToDefaults } from '$frontend/lib/stores/features/settings.svelte';
-	import { showConfirm } from '$frontend/lib/stores/ui/dialog.svelte';
-	import { terminalStore } from '$frontend/lib/stores/features/terminal.svelte';
-	import Icon from '../../common/Icon.svelte';
+	import { initializeProjects, projectState } from '$frontend/stores/core/projects.svelte';
+	import { initializeStore } from '$frontend/stores/core/app.svelte';
+	import { sessionState } from '$frontend/stores/core/sessions.svelte';
+	import { addNotification } from '$frontend/stores/ui/notification.svelte';
+	import { settings, resetToDefaults } from '$frontend/stores/features/settings.svelte';
+	import { showConfirm } from '$frontend/stores/ui/dialog.svelte';
+	import { terminalStore } from '$frontend/stores/features/terminal.svelte';
+	import Icon from '../../common/display/Icon.svelte';
 	import { debug } from '$shared/utils/logger';
-	import ws from '$frontend/lib/utils/ws';
+	import ws from '$frontend/utils/ws';
 
 	let isExporting = $state(false);
 	let isClearing = $state(false);

package/frontend/{lib/components → components}/settings/general/UpdateSettings.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { systemSettings, updateSystemSettings } from '$frontend/lib/stores/features/settings.svelte';
-	import { updateState, checkForUpdate, runUpdate } from '$frontend/lib/stores/ui/update.svelte';
-	import Icon from '../../common/Icon.svelte';
+	import { systemSettings, updateSystemSettings } from '$frontend/stores/features/settings.svelte';
+	import { updateState, checkForUpdate, runUpdate } from '$frontend/stores/ui/update.svelte';
+	import Icon from '../../common/display/Icon.svelte';
 
 	function toggleAutoUpdate() {
 		updateSystemSettings({ autoUpdate: !systemSettings.autoUpdate });

package/frontend/{lib/components → components}/settings/model/ModelSettings.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { settings, updateSettings } from '$frontend/lib/stores/features/settings.svelte';
-	import { modelStore } from '$frontend/lib/stores/features/models.svelte';
+	import { settings, updateSettings } from '$frontend/stores/features/settings.svelte';
+	import { modelStore } from '$frontend/stores/features/models.svelte';
 	import { ENGINES, type EngineType } from '$shared/constants/engines';
 	import type { EngineModel } from '$shared/types/engine';
 

package/frontend/{lib/components → components}/settings/notifications/NotificationSettings.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
-	import { settings, updateSettings } from '$frontend/lib/stores/features/settings.svelte';
-	import { soundNotification, pushNotification } from '$frontend/lib/services/notification';
-	import Icon from '../../common/Icon.svelte';
+	import { addNotification } from '$frontend/stores/ui/notification.svelte';
+	import { settings, updateSettings } from '$frontend/stores/features/settings.svelte';
+	import { soundNotification, pushNotification } from '$frontend/services/notification';
+	import Icon from '../../common/display/Icon.svelte';
 
 	let isTestingSound = $state(false);
 	let isTestingPush = $state(false);

package/frontend/{lib/components → components}/settings/user/UserSettings.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { authStore } from '$frontend/lib/stores/features/auth.svelte';
-	import { systemSettings } from '$frontend/lib/stores/features/settings.svelte';
-	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
-	import Icon from '../../common/Icon.svelte';
-	import Dialog from '../../common/Dialog.svelte';
+	import { authStore } from '$frontend/stores/features/auth.svelte';
+	import { systemSettings } from '$frontend/stores/features/settings.svelte';
+	import { addNotification } from '$frontend/stores/ui/notification.svelte';
+	import Icon from '../../common/display/Icon.svelte';
+	import Dialog from '../../common/overlay/Dialog.svelte';
 	import { debug } from '$shared/utils/logger';
 
 	const isNoAuth = $derived(systemSettings.authMode === 'none');

package/frontend/{lib/components → components}/terminal/Terminal.svelte

@@ -3,13 +3,13 @@
 	All terminal functionality handled by xterm.js
 -->
 <script lang="ts">
-	import { terminalStore } from '$frontend/lib/stores/features/terminal.svelte';
-	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
-	import { getShortcutLabels } from '$frontend/lib/utils/platform';
+	import { terminalStore } from '$frontend/stores/features/terminal.svelte';
+	import { projectState } from '$frontend/stores/core/projects.svelte';
+	import { getShortcutLabels } from '$frontend/utils/platform';
 	import TerminalTabs from './TerminalTabs.svelte';
-	import LoadingSpinner from '../common/LoadingSpinner.svelte';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import XTerm from '$frontend/lib/components/common/xterm/XTerm.svelte';
+	import LoadingSpinner from '../common/feedback/LoadingSpinner.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import XTerm from '$frontend/components/common/xterm/XTerm.svelte';
 
 	// Project-aware state
 	const hasActiveProject = $derived(projectState.currentProject !== null);
@@ -37,8 +37,8 @@
 			const checkAndInitialize = async () => {
 				if (typeof window !== 'undefined') {
 					try {
-						const { backgroundTerminalService } = await import('$frontend/lib/services/terminal/background');
-						const { terminalProjectManager } = await import('$frontend/lib/services/terminal');
+						const { backgroundTerminalService } = await import('$frontend/services/terminal/background');
+						const { terminalProjectManager } = await import('$frontend/services/terminal');
 
 						// Initialize terminalProjectManager first
 						terminalProjectManager.initialize();
@@ -195,7 +195,7 @@
 
 		// Use terminalProjectManager to create new session for current project
 		try {
-			const { terminalProjectManager } = await import('$frontend/lib/services/terminal');
+			const { terminalProjectManager } = await import('$frontend/services/terminal');
 
 			// Pass project ID and path directly to ensure it works even if currentProjectId isn't set
 			const newSessionId = terminalProjectManager.addTerminalToCurrentProject(projectId, projectPath);

package/frontend/{lib/components → components}/terminal/TerminalTabs.svelte

@@ -4,7 +4,7 @@
 -->
 <script lang="ts">
 	import type { TerminalSession } from '$shared/types/terminal';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 
 	const {
 		sessions = [],

package/frontend/{lib/components → components}/terminal/TerminalView.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import Terminal from './Terminal.svelte';
-	import PageTemplate from '../common/PageTemplate.svelte';
-	import Button from '../common/Button.svelte';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import { terminalStore } from '$frontend/lib/stores/features/terminal.svelte';
-	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
+	import PageTemplate from '../common/display/PageTemplate.svelte';
+	import Button from '../common/display/Button.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import { terminalStore } from '$frontend/stores/features/terminal.svelte';
+	import { projectState } from '$frontend/stores/core/projects.svelte';
 	
 	// Project-aware state
 	const hasActiveProject = $derived(projectState.currentProject !== null);

package/frontend/{lib/components → components}/tunnel/TunnelActive.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { tunnelStore } from '$frontend/lib/stores/features/tunnel.svelte';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import { tunnelStore } from '$frontend/stores/features/tunnel.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import TunnelQRCode from './TunnelQRCode.svelte';
-	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
+	import { addNotification } from '$frontend/stores/ui/notification.svelte';
 
 	import { onMount } from 'svelte';
 

package/frontend/{lib/components → components}/tunnel/TunnelButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import { tunnelStore } from '$frontend/lib/stores/features/tunnel.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import { tunnelStore } from '$frontend/stores/features/tunnel.svelte';
 
 	interface Props {
 		collapsed?: boolean;

package/frontend/{lib/components → components}/tunnel/TunnelInactive.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { tunnelStore } from '$frontend/lib/stores/features/tunnel.svelte';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import Modal from '$frontend/lib/components/common/Modal.svelte';
-	import Checkbox from '$frontend/lib/components/common/Checkbox.svelte';
+	import { tunnelStore } from '$frontend/stores/features/tunnel.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import Modal from '$frontend/components/common/overlay/Modal.svelte';
+	import Checkbox from '$frontend/components/common/form/Checkbox.svelte';
 
 	let port = $state(3000);
 	let autoStopMinutes = $state(60);

package/frontend/{lib/components → components}/tunnel/TunnelModal.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import Modal from '$frontend/lib/components/common/Modal.svelte';
+	import Modal from '$frontend/components/common/overlay/Modal.svelte';
 	import TunnelInactive from './TunnelInactive.svelte';
 	import TunnelActive from './TunnelActive.svelte';
-	import { tunnelStore } from '$frontend/lib/stores/features/tunnel.svelte';
+	import { tunnelStore } from '$frontend/stores/features/tunnel.svelte';
 
 	interface Props {
 		isOpen: boolean;