@myrialabs/clopen 0.2.1 → 0.2.3

package/frontend/{lib/components → components}/chat/message/ChatMessage.svelte

@@ -12,19 +12,19 @@
 <script lang="ts">
 	import type { SDKMessage } from '$shared/types/messaging';
 	import type { SDKMessageFormatter } from '$shared/types/database/schema';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import type { IconName } from '$shared/types/ui/icons';
-	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
-	import { appState } from '$frontend/lib/stores/core/app.svelte';
-	import { sessionState, loadMessagesForSession } from '$frontend/lib/stores/core/sessions.svelte';
-	import { setInputText } from '$frontend/lib/stores/ui/chat-input.svelte';
-	import { startEdit, shouldDimMessage } from '$frontend/lib/stores/ui/edit-mode.svelte';
+	import { addNotification } from '$frontend/stores/ui/notification.svelte';
+	import { appState } from '$frontend/stores/core/app.svelte';
+	import { sessionState, loadMessagesForSession } from '$frontend/stores/core/sessions.svelte';
+	import { setInputText } from '$frontend/stores/ui/chat-input.svelte';
+	import { startEdit, shouldDimMessage } from '$frontend/stores/ui/edit-mode.svelte';
 	import { debug } from '$shared/utils/logger';
 	import MessageBubble from './MessageBubble.svelte';
 	import TokenUsageModal from '../modal/TokenUsageModal.svelte';
 	import DebugModal from '../modal/DebugModal.svelte';
-	import Dialog from '$frontend/lib/components/common/Dialog.svelte';
-	import ws from '$frontend/lib/utils/ws';
+	import Dialog from '$frontend/components/common/overlay/Dialog.svelte';
+	import ws from '$frontend/utils/ws';
 
 	const {
 		message,

package/frontend/{lib/components → components}/chat/message/ChatMessages.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { sessionState } from '$frontend/lib/stores/core/sessions.svelte';
-	import { appState } from '$frontend/lib/stores/core/app.svelte';
+	import { sessionState } from '$frontend/stores/core/sessions.svelte';
+	import { appState } from '$frontend/stores/core/app.svelte';
 	import ChatMessage from './ChatMessage.svelte';
 	import DateSeparator from './DateSeparator.svelte';
 	import { onMount, tick } from 'svelte';
 	import { fade } from 'svelte/transition';
 
 	// Import utilities
-	import { shouldFilterMessage } from '$frontend/lib/utils/chat/message-processor';
-	import { groupMessages, embedToolResults } from '$frontend/lib/utils/chat/message-grouper';
-	import { addDateSeparators, type DateSeparatorItem } from '$frontend/lib/utils/chat/date-separator';
-	import { editModeState } from '$frontend/lib/stores/ui/edit-mode.svelte';
-	import { createVirtualScroll, VS_CONFIG } from '$frontend/lib/utils/chat/virtual-scroll.svelte';
+	import { shouldFilterMessage } from '$frontend/utils/chat/message-processor';
+	import { groupMessages, embedToolResults } from '$frontend/utils/chat/message-grouper';
+	import { addDateSeparators, type DateSeparatorItem } from '$frontend/utils/chat/date-separator';
+	import { editModeState } from '$frontend/stores/ui/edit-mode.svelte';
+	import { createVirtualScroll, VS_CONFIG } from '$frontend/utils/chat/virtual-scroll.svelte';
 
 	interface Props {
 		scrollContainer?: HTMLElement | undefined;

package/frontend/{lib/components → components}/chat/message/MessageBubble.svelte

@@ -11,7 +11,7 @@
 <script lang="ts">
 	import type { SDKMessageFormatter } from '$shared/types/database/schema';
 	import type { IconName } from '$shared/types/ui/icons';
-	import Card from '$frontend/lib/components/common/Card.svelte';
+	import Card from '$frontend/components/common/display/Card.svelte';
 	import MessageFormatter from '../formatters/MessageFormatter.svelte';
 	import MessageHeader from './MessageHeader.svelte';
 

package/frontend/{lib/components → components}/chat/message/MessageHeader.svelte

@@ -11,8 +11,8 @@
 <script lang="ts">
 	import type { SDKMessageFormatter } from '$shared/types/database/schema';
 	import type { IconName } from '$shared/types/ui/icons';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import { appState } from '$frontend/lib/stores/core/app.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import { appState } from '$frontend/stores/core/app.svelte';
 
 	const {
 		message,

package/frontend/{lib/components → components}/chat/modal/DebugModal.svelte

@@ -9,8 +9,8 @@
 
 <script lang="ts">
 	import type { SDKMessageFormatter } from '$shared/types/database/schema';
-	import Modal from '$frontend/lib/components/common/Modal.svelte';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Modal from '$frontend/components/common/overlay/Modal.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 
 	let {
 		isOpen = $bindable(),

package/frontend/{lib/components → components}/chat/modal/TokenUsageModal.svelte

@@ -8,8 +8,8 @@
 -->
 
 <script lang="ts">
-	import Modal from '$frontend/lib/components/common/Modal.svelte';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Modal from '$frontend/components/common/overlay/Modal.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 
 	let {
 		isOpen = $bindable(),

package/frontend/{lib/components → components}/chat/tools/AskUserQuestionTool.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { AskUserQuestionToolInput } from '$shared/types/messaging';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import ws from '$frontend/lib/utils/ws';
-	import { currentSessionId } from '$frontend/lib/stores/core/sessions.svelte';
-	import { appState, updateSessionProcessState } from '$frontend/lib/stores/core/app.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import ws from '$frontend/utils/ws';
+	import { currentSessionId } from '$frontend/stores/core/sessions.svelte';
+	import { appState, updateSessionProcessState } from '$frontend/stores/core/app.svelte';
 	import { debug } from '$shared/utils/logger';
 
 	const { toolInput }: { toolInput: AskUserQuestionToolInput } = $props();

package/frontend/{lib/components → components}/chat/tools/CustomMcpTool.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { FileHeader, CodeBlock } from './components';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import type { ToolInput } from '$shared/types/messaging';
 
 	const { toolInput }: { toolInput: ToolInput } = $props();

package/frontend/{lib/components → components}/chat/tools/EditTool.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { EditToolInput } from '$shared/types/messaging';
 	import { FileHeader, DiffBlock } from './components';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 
 	const { toolInput }: { toolInput: EditToolInput } = $props();
 

package/frontend/{lib/components → components}/chat/tools/TodoWriteTool.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 type { TodoWriteToolInput } from '$shared/types/messaging';
 	import type { IconName } from '$shared/types/ui/icons';
 

package/frontend/{lib/components → components}/chat/tools/components/CodeBlock.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import type { IconName } from '$shared/types/ui/icons';
 	import { removeCommonIndentation } from '../../shared/utils';
-	import { isTerminalOutput, processAnsiCodes, escapeHtml } from '$frontend/lib/utils/terminalFormatter';
+	import { isTerminalOutput, processAnsiCodes, escapeHtml } from '$frontend/utils/terminal-formatter';
 
 	interface Props {
 		code: string;

package/frontend/{lib/components → components}/chat/tools/components/DiffBlock.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 { removeCommonIndentationFromLines } from '../../shared/utils';
 
 	interface Props {

package/frontend/{lib/components → components}/chat/tools/components/FileHeader.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import type { IconName } from '$shared/types/ui/icons';
-	import { getFileIcon } from '$frontend/lib/utils/file-icon-mappings';
+	import { getFileIcon } from '$frontend/utils/file-icon-mappings';
 	import { formatPath } from '../../shared/utils';
 
 	interface Props {

package/frontend/{lib/components → components}/chat/tools/components/InfoLine.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 type { IconName } from '$shared/types/ui/icons';
 
 	interface Props {

package/frontend/{lib/components → components}/chat/widgets/FloatingTodoList.svelte

@@ -6,15 +6,106 @@
 -->
 
 <script lang="ts">
-	import { sessionState } from '$frontend/lib/stores/core/sessions.svelte';
-	import { appState } from '$frontend/lib/stores/core/app.svelte';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import { fade, fly } from 'svelte/transition';
+	import { sessionState } from '$frontend/stores/core/sessions.svelte';
+	import { appState } from '$frontend/stores/core/app.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import { fly } from 'svelte/transition';
 	import type { TodoWriteToolInput } from '$shared/types/messaging';
 
 	let isExpanded = $state(true);
 	let isMinimized = $state(false);
 
+	// Drag & snap state
+	let posY = $state(80);
+	let posX = $state(0);
+	let snapSide = $state<'left' | 'right'>('right');
+	let isDragging = $state(false);
+
+	// Minimized button ref for measuring width at snap time
+	let minimizedBtn = $state<HTMLButtonElement | null>(null);
+
+	// Non-reactive drag tracking
+	let _sx = 0, _sy = 0, _mx = 0, _my = 0, _hasDragged = false;
+
+	function getPanelWidth() {
+		return isExpanded ? 330 : 230;
+	}
+
+	// Always use `left` property so CSS can transition in both directions
+	const panelDisplayLeft = $derived(
+		isDragging ? posX : snapSide === 'right' ? window.innerWidth - getPanelWidth() - 16 : 16
+	);
+
+	const minimizedDisplayLeft = $derived(
+		isDragging
+			? posX
+			: snapSide === 'right'
+				? window.innerWidth - (minimizedBtn?.offsetWidth ?? 90) - 16
+				: 16
+	);
+
+	// --- Main panel drag (from header) ---
+	function startDrag(e: PointerEvent) {
+		if ((e.target as HTMLElement).closest('button')) return;
+		isDragging = true;
+		// Use actual rendered position for accuracy
+		const panel = (e.currentTarget as HTMLElement).parentElement!;
+		const rect = panel.getBoundingClientRect();
+		_sx = rect.left;
+		_sy = rect.top;
+		_mx = e.clientX;
+		_my = e.clientY;
+		posX = _sx;
+		posY = _sy;
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+	}
+
+	function onDrag(e: PointerEvent) {
+		if (!isDragging) return;
+		posX = _sx + e.clientX - _mx;
+		posY = Math.max(0, Math.min(window.innerHeight - 56, _sy + e.clientY - _my));
+	}
+
+	function endDrag(e: PointerEvent) {
+		if (!isDragging) return;
+		isDragging = false;
+		snapSide = posX + getPanelWidth() / 2 < window.innerWidth / 2 ? 'left' : 'right';
+	}
+
+	// --- Minimized button drag (click = restore, drag = move) ---
+	function startMinimizedDrag(e: PointerEvent) {
+		isDragging = true;
+		_hasDragged = false;
+		const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+		_sx = rect.left;
+		_sy = rect.top;
+		_mx = e.clientX;
+		_my = e.clientY;
+		posX = _sx;
+		posY = _sy;
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+	}
+
+	function onMinimizedDrag(e: PointerEvent) {
+		if (!isDragging) return;
+		const dx = e.clientX - _mx;
+		const dy = e.clientY - _my;
+		if (Math.abs(dx) > 5 || Math.abs(dy) > 5) _hasDragged = true;
+		posX = _sx + dx;
+		posY = Math.max(0, Math.min(window.innerHeight - 56, _sy + dy));
+	}
+
+	function endMinimizedDrag(e: PointerEvent) {
+		if (!isDragging) return;
+		isDragging = false;
+		if (!_hasDragged) {
+			restore();
+			return;
+		}
+		const el = e.currentTarget as HTMLElement;
+		snapSide = posX + el.offsetWidth / 2 < window.innerWidth / 2 ? 'left' : 'right';
+	}
+
 	// Extract the latest TodoWrite data from messages
 	const latestTodos = $derived.by(() => {
 		if (!sessionState.currentSession || sessionState.messages.length === 0) {
@@ -104,11 +195,22 @@
 
 {#if shouldShow && !appState.isRestoring}
 	{#if isMinimized}
-		<!-- Minimized state - small floating button -->
+		<!-- Minimized state - small floating button, draggable -->
 		<button
-			onclick={restore}
-			class="fixed top-20 right-4 z-30 bg-violet-600 hover:bg-violet-700 dark:bg-violet-500 dark:hover:bg-violet-600 text-white rounded-full p-3 shadow-lg transition-all duration-200 flex items-center gap-2"
-			transition:fly={{ x: 100, duration: 200 }}
+			bind:this={minimizedBtn}
+			onpointerdown={startMinimizedDrag}
+			onpointermove={onMinimizedDrag}
+			onpointerup={endMinimizedDrag}
+			onpointercancel={endMinimizedDrag}
+			class="fixed z-30 bg-violet-600 hover:bg-violet-700 dark:bg-violet-500 dark:hover:bg-violet-600 text-white rounded-full p-3 shadow-lg flex items-center gap-2"
+			style="
+				top: {posY}px;
+				left: {minimizedDisplayLeft}px;
+				touch-action: none;
+				cursor: {isDragging ? 'grabbing' : 'grab'};
+				transition: {isDragging ? 'none' : 'left 0.25s ease, top 0.15s ease'};
+			"
+			transition:fly={{ x: snapSide === 'right' ? 100 : -100, duration: 200 }}
 		>
 			<Icon name="lucide:list-todo" class="w-5 h-5" />
 			<span class="text-sm font-medium">{progress.completed}/{progress.total}</span>
@@ -116,13 +218,25 @@
 	{:else}
 		<!-- Floating panel -->
 		<div
-			class="fixed top-20 right-4 z-30 bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-slate-200 dark:border-slate-700 overflow-hidden transition-all duration-300"
-			style="width: {isExpanded ? '330px' : '230px'}; max-height: {isExpanded ? '600px' : '56px'}"
-			transition:fly={{ x: 100, duration: 300 }}
+			class="fixed z-30 bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-slate-200 dark:border-slate-700 overflow-hidden"
+			style="
+				top: {posY}px;
+				left: {panelDisplayLeft}px;
+				width: {isExpanded ? '330px' : '230px'};
+				max-height: {isExpanded ? '600px' : '56px'};
+				transition: {isDragging ? 'none' : 'left 0.25s ease, top 0.15s ease, width 0.3s, max-height 0.3s'};
+			"
+			transition:fly={{ x: snapSide === 'right' ? 100 : -100, duration: 300 }}
 		>
-			<!-- Header -->
+			<!-- Header (drag handle) -->
 			<div
 				class="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-violet-50 to-violet-50 dark:from-slate-800 dark:to-slate-800 border-b border-slate-200 dark:border-slate-700"
+				style="touch-action: none; cursor: {isDragging ? 'grabbing' : 'grab'};"
+				onpointerdown={startDrag}
+				onpointermove={onDrag}
+				onpointerup={endDrag}
+				onpointercancel={endDrag}
+				role="none"
 			>
 				<div class="flex items-center gap-3">
 					<Icon name="lucide:list-todo" class="w-5 h-5 text-violet-600 dark:text-violet-400" />
@@ -246,4 +360,4 @@
 	:global(.dark) div::-webkit-scrollbar-thumb:hover {
 		background: rgb(71 85 105);
 	}
-</style>
+</style>

package/frontend/{lib/components → components}/chat/widgets/TokenUsage.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { sessionState } from '$frontend/lib/stores/core/sessions.svelte';
-	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
-	import { manageConversationContext } from '$frontend/lib/utils/context-manager';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import { sessionState } from '$frontend/stores/core/sessions.svelte';
+	import { addNotification } from '$frontend/stores/ui/notification.svelte';
+	import { manageConversationContext } from '$frontend/utils/context-manager';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 	
 	const tokenUsage = $derived.by(() => {
 		const context = manageConversationContext(sessionState.messages);

package/frontend/{lib/components → components}/checkpoint/TimelineModal.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-	import Modal from '$frontend/lib/components/common/Modal.svelte';
-	import Dialog from '$frontend/lib/components/common/Dialog.svelte';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import DiffBlock from '$frontend/lib/components/chat/tools/components/DiffBlock.svelte';
+	import Modal from '$frontend/components/common/overlay/Modal.svelte';
+	import Dialog from '$frontend/components/common/overlay/Dialog.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import DiffBlock from '$frontend/components/chat/tools/components/DiffBlock.svelte';
 	import TimelineGraph from './timeline/TimelineGraph.svelte';
-	import { sessionState, loadMessagesForSession } from '$frontend/lib/stores/core/sessions.svelte';
-	import { appState } from '$frontend/lib/stores/core/app.svelte';
-	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
+	import { sessionState, loadMessagesForSession } from '$frontend/stores/core/sessions.svelte';
+	import { appState } from '$frontend/stores/core/app.svelte';
+	import { addNotification } from '$frontend/stores/ui/notification.svelte';
 	import { debug } from '$shared/utils/logger';
 	import { buildGraph } from './timeline/graph-builder';
 	import { startAnimation } from './timeline/animation';
-	import { snapshotService } from '$frontend/lib/services/snapshot/snapshot.service';
-	import type { RestoreConflict, ConflictResolution } from '$frontend/lib/services/snapshot/snapshot.service';
+	import { snapshotService } from '$frontend/services/snapshot/snapshot.service';
+	import type { RestoreConflict, ConflictResolution } from '$frontend/services/snapshot/snapshot.service';
 	import type { TimelineResponse, GraphNode, GraphEdge, VersionGroup, AnimationState } from './timeline/types';
-	import ws from '$frontend/lib/utils/ws';
+	import ws from '$frontend/utils/ws';
 
 	let {
 		isOpen = $bindable(false),

package/frontend/{lib/components → components}/checkpoint/timeline/TimelineNode.svelte

@@ -3,7 +3,7 @@
 	import { formatTime } from './utils';
 	import type { GraphNode, AnimationState } from './types';
 	import { getInterpolatedPosition, getInterpolatedNodeClass } from './animation';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 
 	const {
 		node,

package/frontend/{lib/components/common → components/common/display}/Icon.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	// Import organized icon registries
-	import { lucideIconRegistry } from './lucide-icons';
-	import { materialIconRegistry } from './material-icons';
+	import { lucideIconRegistry } from '../lucide-icons';
+	import { materialIconRegistry } from '../material-icons';
 	import lucideData from '@iconify-json/lucide/icons.json';
 	import materialData from '@iconify-json/material-icon-theme/icons.json';
 	import type { IconName } from '$shared/types/ui/icons';

package/frontend/{lib/components/common → components/common/display}/PageTemplate.svelte

@@ -11,7 +11,7 @@
 
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { setPageInfo } from '$frontend/lib/stores/core/app.svelte';
+	import { setPageInfo } from '$frontend/stores/core/app.svelte';
 
 	interface Props {
 		title: string;

package/frontend/{lib/components/common → components/common/display}/ProjectUserAvatars.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import AvatarBubble from './AvatarBubble.svelte';
-	import type { ProjectStatus } from '$frontend/lib/services/project';
+	import type { ProjectStatus } from '$frontend/services/project';
 
 	interface UserData {
 		userId: string;

package/frontend/{lib/components/common → components/common/display}/ThemeToggle.svelte

@@ -6,7 +6,7 @@
 
 <script lang="ts">
 	import Icon from './Icon.svelte';
-	import { themeStore, setTheme as setStoreTheme, themes } from '$frontend/lib/stores/ui/theme.svelte';
+	import { themeStore, setTheme as setStoreTheme, themes } from '$frontend/stores/ui/theme.svelte';
 
 	let isOpen = $state(false);
 	

package/frontend/{lib/components/common → components/common/editor}/MonacoEditor.svelte

@@ -2,8 +2,8 @@
 	import { onMount } from 'svelte';
 	import loader from '@monaco-editor/loader';
 	import type { editor } from 'monaco-editor';
-	import { themeStore } from '$frontend/lib/stores/ui/theme.svelte';
-	import { settings } from '$frontend/lib/stores/features/settings.svelte';
+	import { themeStore } from '$frontend/stores/ui/theme.svelte';
+	import { settings } from '$frontend/stores/features/settings.svelte';
 	import { debug } from '$shared/utils/logger';
 
 	interface Props {

package/frontend/{lib/components/common → components/common/feedback}/Alert.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { fade, scale } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
-	import Icon from './Icon.svelte';
+	import Icon from '../display/Icon.svelte';
 	import type { IconName } from '$shared/types/ui/icons';
 
 	interface Props {

package/frontend/{lib/components/common → components/common/feedback}/ConnectionBanner.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { connectionState } from '$frontend/lib/stores/ui/connection.svelte';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import ws from '$frontend/lib/utils/ws';
+	import { connectionState } from '$frontend/stores/ui/connection.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import ws from '$frontend/utils/ws';
 	import { slide } from 'svelte/transition';
 
 	const showBanner = $derived(

package/frontend/{lib/components/common → components/common/feedback}/LoadingScreen.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
-	import Icon from './Icon.svelte';
+	import Icon from '../display/Icon.svelte';
 	
 	let { isVisible = $bindable(), progress = 0, loadingText = 'Initializing workspace...' } = $props();
 </script>

package/frontend/{lib/components/common → components/common/feedback}/NotificationToast.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { removeNotification } from '$frontend/lib/stores/ui/notification.svelte';
+	import { removeNotification } from '$frontend/stores/ui/notification.svelte';
 	import type { ToastNotification } from '$shared/types/ui/notifications';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import type { IconName } from '$shared/types/ui/icons';
 
 	const { notification }: { notification: ToastNotification } = $props();

package/frontend/{lib/components/common → components/common/feedback}/UpdateBanner.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { updateState, runUpdate, dismissUpdate, checkForUpdate } from '$frontend/lib/stores/ui/update.svelte';
-	import { systemSettings, updateSystemSettings } from '$frontend/lib/stores/features/settings.svelte';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import { updateState, runUpdate, dismissUpdate, checkForUpdate } from '$frontend/stores/ui/update.svelte';
+	import { systemSettings, updateSystemSettings } from '$frontend/stores/features/settings.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import { slide } from 'svelte/transition';
 
 	const showBanner = $derived(
@@ -49,12 +49,12 @@
 			<span>Updated to v{updateState.latestVersion} — restart clopen to apply</span>
 		{:else if updateState.error}
 			<Icon name="lucide:package-x" class="w-4 h-4" />
-			<span>Update failed</span>
+			<span>{updateState.errorType === 'check' ? 'Unable to check for updates' : 'Update failed'}</span>
 			<button
 				onclick={handleRetry}
 				class="ml-1 px-2 py-0.5 text-xs font-semibold rounded bg-white/20 hover:bg-white/30 transition-colors"
 			>
-				Retry
+				{updateState.errorType === 'check' ? 'Check again' : 'Retry'}
 			</button>
 			<button
 				onclick={handleDismiss}

package/frontend/{lib/components/common → components/common/form}/Checkbox.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 type { Snippet } from 'svelte';
 
 	interface Props {

package/frontend/{lib/components/common → components/common/form}/FolderBrowser.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	// import { onMount } from 'svelte';
-	import Button from './Button.svelte';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
-	import Modal from './Modal.svelte';
-	import Dialog from './Dialog.svelte';
+	import Button from '../display/Button.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import Modal from '../overlay/Modal.svelte';
+	import Dialog from '../overlay/Dialog.svelte';
 	import { debug } from '$shared/utils/logger';
-	import ws from '$frontend/lib/utils/ws';
-	import { systemSettings } from '$frontend/lib/stores/features/settings.svelte';
+	import ws from '$frontend/utils/ws';
+	import { systemSettings } from '$frontend/stores/features/settings.svelte';
 	
 	interface FileItem {
 		name: string;

package/frontend/{lib/components/common → components/common/form}/Input.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { InputProps } from '$shared/types/ui/components';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 
 	let {
 		value = $bindable(''),

package/frontend/{lib/components/common → components/common/form}/ModelSelector.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { DEFAULT_MODEL } from '$shared/constants/engines';
 	import type { EngineModel } from '$shared/types/engine';
-	import { settings } from '$frontend/lib/stores/features/settings.svelte';
-	import { modelStore } from '$frontend/lib/stores/features/models.svelte';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import { settings } from '$frontend/stores/features/settings.svelte';
+	import { modelStore } from '$frontend/stores/features/models.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 
 	let {
 		value = $bindable(DEFAULT_MODEL),

package/frontend/{lib/components/common → components/common/form}/Select.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { SelectProps } from '$shared/types/ui/components';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 
 	let {
 		value = $bindable(''),

package/frontend/{lib/components/common → components/common/form}/Textarea.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { TextareaProps } from '$shared/types/ui/components';
-	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 
 	let {
 		value = $bindable(''),

package/frontend/{lib/components/common → components/common/overlay}/Dialog.svelte

@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 	import { fade, scale } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
-	import Icon from './Icon.svelte';
+	import Icon from '../display/Icon.svelte';
 	import type { IconName } from '$shared/types/ui/icons';
 
 	interface Props {