fix: correct relative imports after component reorganization

Fixed import paths for 43 components moved into features/ directories.
Key fixes:
- api/, types/, hooks/, state/, utils/ imports need ../../../ from features/*/
- components/ imports need ../../ from features/*/
- Cross-feature imports use relative paths (e.g., ../tool/tools-bottom-sheet)
- app-shell.tsx updated to import from features/ subdirectories

Frontend typecheck now passes except for one pre-existing error:
xterm-addon-webgl missing type declarations.

Quality gates: ruff passed on backend, py_compile passed on all backend files.

apps/web/src/components/app-shell.tsx

@@ -10,11 +10,11 @@ import { useMobileViewport } from "../hooks/use-mobile-viewport";
 import { EventProvider } from "../state/events";
 import { ToastProvider } from "../state/toast";
 import { NotificationProvider } from "../state/notifications";
-import { EventToastBridge } from "./event-toast-bridge";
+import { EventToastBridge } from "./features/notification/event-toast-bridge";
-import { NotificationCenter } from "./notification-center";
+import { NotificationCenter } from "./features/notification/notification-center";
 import { Icon } from "./icon";
-import { MobileNav } from "./mobile-nav";
+import { MobileNav } from "./features/mobile/mobile-nav";
-import { StartToolFAB } from "./start-tool-fab";
+import { StartToolFAB } from "./features/tool/start-tool-fab";
 import type { IconName } from "../utils/icons";
 
 const NAV_ITEMS: {

apps/web/src/components/features/git/commit-dialog.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
 
 interface CommitDialogProps {
   isOpen: boolean;

apps/web/src/components/features/git/commit-panel.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { commitChanges } from "../api/git-repositories";
+import { commitChanges } from "../../../api/git-repositories";
 
 interface CommitPanelProps {
   projectId: string;

apps/web/src/components/features/git/file-editor.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
-import { apiClient } from "../api/client";
+import { apiClient } from "../../../api/client";
-import { useAuth } from "../state/auth";
+import { useAuth } from "../../../state/auth";
-import { CodeEditor } from "../components/code-editor";
+import { CodeEditor } from "../../code-editor";
-import { CommitDialog } from "../components/features/git/commit-dialog";
+import { CommitDialog } from "./commit-dialog";
-import { Icon } from "../components/icon";
+import { Icon } from "../../icon";
-import { SyntaxHighlighter } from "../components/syntax-highlighter";
+import { SyntaxHighlighter } from "../../syntax-highlighter";
-import { detectLanguage } from "../utils/language";
+import { detectLanguage } from "../../../utils/language";
 
 interface FileEditorProps {
   projectId: string;

apps/web/src/components/features/git/git-mount-editor.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
-import { validateGitUrl } from "../api/config_profiles";
+import { validateGitUrl } from "../../../api/config_profiles";
-import type { GitMount, GitMountMapping } from "../api/config_profiles";
+import type { GitMount, GitMountMapping } from "../../../api/config_profiles";
 
 interface GitMountEditorProps {
 	mounts: GitMount[];

apps/web/src/components/features/git/git-toolbar.tsx

@@ -8,8 +8,8 @@ import {
   pullRepository,
   pushRepository,
   type GitStatus,
-} from "../api/git-repositories";
+} from "../../../api/git-repositories";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
 import { MergeDialog } from "./merge-dialog";
 
 interface GitToolbarProps {

apps/web/src/components/features/git/merge-dialog.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
-import { mergeBranches } from "../api/git-repositories";
+import { mergeBranches } from "../../../api/git-repositories";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
 
 interface MergeDialogProps {
   projectId: string;

apps/web/src/components/features/mobile/mobile-action-sheet.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
-import type { IconName } from "./icon";
+import type { IconName } from "../../icon";
 
 export interface MobileActionSheetItem {
   id: string;

apps/web/src/components/features/mobile/mobile-detail-view.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
 
 interface Field {
   label: string;

apps/web/src/components/features/mobile/mobile-fab.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
 
 interface MobileFABProps {
   onClick: () => void;

apps/web/src/components/features/mobile/mobile-list-view.tsx

@@ -1,5 +1,5 @@
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
-import type { IconName } from "../utils/icons";
+import type { IconName } from "../../../utils/icons";
 
 interface MobileListItem {
   id: string;

apps/web/src/components/features/mobile/mobile-nav.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { NavLink, useLocation } from "react-router-dom";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
-import { ToolsBottomSheet } from "./tools-bottom-sheet";
+import { ToolsBottomSheet } from "../tool/tools-bottom-sheet";
-import type { IconName } from "../utils/icons";
+import type { IconName } from "../../../utils/icons";
 
 interface MobileNavProps {
   sessionCount?: number;

apps/web/src/components/features/mobile/mobile-page-header.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
-import { useMobileViewport } from "../hooks/use-mobile-viewport";
+import { useMobileViewport } from "../../../hooks/use-mobile-viewport";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
 
 interface MobilePageHeaderProps {
   title: string;

apps/web/src/components/features/mobile/mobile-terminal-header.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
 
 interface MobileTerminalHeaderProps {
   instanceName?: string;

apps/web/src/components/features/mobile/mobile-terminal-wrapper.tsx

@@ -1,12 +1,12 @@
 import React, { useState, useCallback } from "react";
-import { TerminalComponent } from "./terminal";
+import { TerminalComponent } from "../terminal/terminal";
 import { MobileTerminalHeader } from "./mobile-terminal-header";
-import { SpecialKeysStrip } from "./special-keys-strip";
+import { SpecialKeysStrip } from "../terminal/special-keys-strip";
-import { SpecialKeysPanel } from "./special-keys-panel";
+import { SpecialKeysPanel } from "../terminal/special-keys-panel";
-import { useMobileViewport } from "../hooks/use-mobile-viewport";
+import { useMobileViewport } from "../../../hooks/use-mobile-viewport";
-import { useVirtualKeyboard } from "../hooks/use-virtual-keyboard";
+import { useVirtualKeyboard } from "../../../hooks/use-virtual-keyboard";
-import { useAutoHide } from "../hooks/use-auto-hide";
+import { useAutoHide } from "../../../hooks/use-auto-hide";
-import type { ModifierKey } from "../hooks/use-special-keys";
+import type { ModifierKey } from "../../../hooks/use-special-keys";
 
 interface MobileTerminalWrapperProps {
   instanceId: string;

apps/web/src/components/features/notification/event-toast-bridge.test.tsx

@@ -2,15 +2,15 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { render, act } from "@testing-library/react";
 import { EventToastBridge } from "./event-toast-bridge";
 import { useEventContext } from "../state/events";
-import { getUserConfig } from "../api/settings";
+import { getUserConfig } from "../../../api/settings";
 import { handleEventToast } from "./toast-rules";
-import type { InstanceEventPayload } from "../types/events";
+import type { InstanceEventPayload } from "../../../types/events";
 
 vi.mock("../state/events", () => ({
 	useEventContext: vi.fn(),
 }));
 
-vi.mock("../api/settings", () => ({
+vi.mock("../../../api/settings", () => ({
 	getUserConfig: vi.fn(),
 }));
 

apps/web/src/components/features/notification/event-toast-bridge.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useRef, useState } from "react";
-import { useEventContext } from "../state/events";
+import { useEventContext } from "../../../state/events";
 import {
 	handleEventToast,
 	mapEventToCategory,
 	mapEventToSeverity,
-} from "./toast-rules";
+} from "../../toast-rules";
-import { getUserConfig } from "../api/settings";
+import { getUserConfig } from "../../../api/settings";
-import type { UserConfig } from "../api/settings";
+import type { UserConfig } from "../../../api/settings";
 
 interface ToastConfig {
 	notification_toast_level: string;

apps/web/src/components/features/notification/notification-center.test.tsx

@@ -3,7 +3,7 @@ import { render, screen, fireEvent, cleanup } from "@testing-library/react";
 import { NotificationCenter } from "./notification-center";
 import { NotificationProvider } from "../state/notifications";
 
-vi.mock("../api/notifications", () => ({
+vi.mock("../../../api/notifications", () => ({
 	getNotifications: vi.fn(),
 	getUnreadCount: vi.fn(),
 	markNotificationRead: vi.fn(),
@@ -12,7 +12,7 @@ vi.mock("../api/notifications", () => ({
 	clearAllNotifications: vi.fn(),
 }));
 
-import { getNotifications, getUnreadCount } from "../api/notifications";
+import { getNotifications, getUnreadCount } from "../../../api/notifications";
 
 const mockedGetNotifications = vi.mocked(getNotifications);
 const mockedGetUnreadCount = vi.mocked(getUnreadCount);
@@ -142,7 +142,7 @@ describe("NotificationCenter", () => {
 		fireEvent.click(screen.getByRole("button", { name: /mark all as read/i }));
 
 		const { markAllNotificationsRead: mockMarkAll } = await import(
-			"../api/notifications"
+			"../../../api/notifications"
 		);
 		expect(vi.mocked(mockMarkAll)).toHaveBeenCalled();
 	});
@@ -162,7 +162,7 @@ describe("NotificationCenter", () => {
 		fireEvent.click(screen.getByRole("button", { name: /clear all/i }));
 
 		const { clearAllNotifications: mockClearAll } = await import(
-			"../api/notifications"
+			"../../../api/notifications"
 		);
 		expect(vi.mocked(mockClearAll)).toHaveBeenCalled();
 	});

apps/web/src/components/features/notification/notification-center.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
-import { useNotifications } from "../hooks/use-notifications";
+import { useNotifications } from "../../../hooks/use-notifications";
 import { NotificationItem } from "./notification-item";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
 
 interface NotificationCenterProps {
 	isMobileTerminal?: boolean;

apps/web/src/components/features/notification/notification-item.tsx

@@ -1,6 +1,6 @@
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
-import { formatRelativeTime } from "../utils/time";
+import { formatRelativeTime } from "../../../utils/time";
-import type { NotificationItem as NotificationItemType } from "../api/notifications";
+import type { NotificationItem as NotificationItemType } from "../../../api/notifications";
 
 export interface NotificationItemProps {
 	notification: NotificationItemType;
@@ -8,7 +8,7 @@ export interface NotificationItemProps {
 	onDismiss: (id: string) => void;
 }
 
-import type { IconName } from "../utils/icons";
+import type { IconName } from "../../../utils/icons";
 
 const severityIconMap: Record<string, IconName> = {
 	info: "info",

apps/web/src/components/features/project/repositories-settings-tab.test.tsx

@@ -2,7 +2,7 @@ import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/re
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 import { RepositoriesSettingsTab } from "./repositories-settings-tab";
-import * as gitRepositoriesApi from "../api/git-repositories";
+import * as gitRepositoriesApi from "../../../api/git-repositories";
 
 const mockRepositories = [
   {

apps/web/src/components/features/project/repositories-settings-tab.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 
-import { deleteRepository, listRepositories, type GitRepository } from "../api/git-repositories";
+import { deleteRepository, listRepositories, type GitRepository } from "../../../api/git-repositories";
 import { RepositoryCreateDialog } from "./repository-create-dialog";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
 
 export const RepositoriesSettingsTab: React.FC = () => {
   const { projectId } = useParams<{ projectId: string }>();

apps/web/src/components/features/project/repository-create-dialog.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef, useState } from "react";
 
-import { createRepository, parseGitUrl, type GitRepositoryCreate, type URLParseResult } from "../api/git-repositories";
+import { createRepository, parseGitUrl, type GitRepositoryCreate, type URLParseResult } from "../../../api/git-repositories";
-import { listSSHKeys, type SSHKey } from "../api/ssh-keys";
+import { listSSHKeys, type SSHKey } from "../../../api/ssh-keys";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
 
 type CreateMode = "clone" | "blank";
 type UrlValidationStatus = "idle" | "validating" | "valid" | "needs-parsing" | "invalid";

apps/web/src/components/features/session/create-session-form.tsx

@@ -1,11 +1,11 @@
 import { useState, useEffect } from "react";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
-import { createInstance, startInstance, type ToolInstance } from "../api/sessions";
+import { createInstance, startInstance, type ToolInstance } from "../../../api/sessions";
-import type { Project } from "../types";
+import type { Project } from "../../../types";
-import { listRepositoryBranches, type GitRepository, type Branch } from "../api/git-repositories";
+import { listRepositoryBranches, type GitRepository, type Branch } from "../../../api/git-repositories";
-import type { ToolType } from "../api/tool-types";
+import type { ToolType } from "../../../api/tool-types";
-import { listSSHKeys, type SSHKey } from "../api/ssh-keys";
+import { listSSHKeys, type SSHKey } from "../../../api/ssh-keys";
-import { listConfigProfiles, type ConfigProfile } from "../api/config_profiles";
+import { listConfigProfiles, type ConfigProfile } from "../../../api/config_profiles";
 
 interface CreateSessionFormProps {
   projects: Project[];

apps/web/src/components/features/session/session-card.tsx

@@ -1,9 +1,9 @@
 import { useState } from "react";
-import type { Session } from "../api/sessions";
+import type { Session } from "../../../api/sessions";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
-import { useMobileViewport } from "../hooks/use-mobile-viewport";
+import { useMobileViewport } from "../../../hooks/use-mobile-viewport";
-import { MobileActionSheet } from "./mobile-action-sheet";
+import { MobileActionSheet } from "../mobile/mobile-action-sheet";
-import type { IconName } from "./icon";
+import type { IconName } from "../../icon";
 
 export interface SessionCardProps {
 	session: Session;

apps/web/src/components/features/session/session-list.tsx

@@ -1,6 +1,6 @@
-import type { Session } from "../api/sessions";
+import type { Session } from "../../../api/sessions";
 import { SessionCard } from "./session-card";
-import type { InstanceHealth } from "../api/sessions";
+import type { InstanceHealth } from "../../../api/sessions";
 
 export interface SessionListProps {
   sessions: Session[];

apps/web/src/components/features/terminal/special-keys-panel.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { getSequenceWithModifier, type SpecialKey, type ModifierKey } from "../hooks/use-special-keys";
+import { getSequenceWithModifier, type SpecialKey, type ModifierKey } from "../../../hooks/use-special-keys";
 
 interface SpecialKeysPanelProps {
   onSend: (data: string) => void;

apps/web/src/components/features/terminal/special-keys-strip.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { getSequenceWithModifier, type SpecialKey, type ModifierKey } from "../hooks/use-special-keys";
+import { getSequenceWithModifier, type SpecialKey, type ModifierKey } from "../../../hooks/use-special-keys";
 
 interface SpecialKeysStripProps {
   onSend: (data: string) => void;

apps/web/src/components/features/terminal/terminal.tsx

@@ -14,7 +14,7 @@ import "xterm/css/xterm.css";
 import {
 	applyModifierToChar,
 	type ModifierKey,
-} from "../hooks/use-special-keys";
+} from "../../../hooks/use-special-keys";
 
 export interface TerminalProps {
 	instanceId: string;

apps/web/src/components/features/tool/instance-list.tsx

@@ -1,19 +1,19 @@
 import { useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
-import type { ToolInstance } from "../api/sessions";
+import type { ToolInstance } from "../../../api/sessions";
 import {
 	deleteInstance,
 	listInstances,
 	restartInstance,
 	startInstance,
 	stopInstance,
-} from "../api/sessions";
+} from "../../../api/sessions";
-import type { ToolType } from "../api/tool-types";
+import type { ToolType } from "../../../api/tool-types";
-import { CreateSessionForm } from "./create-session-form";
+import { CreateSessionForm } from "../session/create-session-form";
-import { listConfigProfiles, type ConfigProfile } from "../api/config_profiles";
+import { listConfigProfiles, type ConfigProfile } from "../../../api/config_profiles";
-import { listSSHKeys, type SSHKey } from "../api/ssh-keys";
+import { listSSHKeys, type SSHKey } from "../../../api/ssh-keys";
-import { useEventContext } from "../state/events";
+import { useEventContext } from "../../../state/events";
 
 const API_BASE_URL =
 	import.meta.env.VITE_API_BASE_URL ?? "http://localhost:8000";

apps/web/src/components/features/tool/manifest-editor.tsx

@@ -1,10 +1,10 @@
 import { useState, useEffect, useCallback, useRef } from "react";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
-import { extractErrorMessage } from "../utils/errors";
+import { extractErrorMessage } from "../../../utils/errors";
 import {
 	compileToolDefinition,
 	type ToolDefinitionManifest,
-} from "../api/tool_definitions";
+} from "../../../api/tool_definitions";
 
 interface PackageEntry {
 	name: string;

apps/web/src/components/features/tool/start-tool-fab.tsx

@@ -1,10 +1,10 @@
 /** Floating action button to start a tool from any page. */
 
 import { useState } from "react";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
 import { ToolStarter } from "./tool-starter";
-import type { Workspace } from "../types/workspace";
+import type { Workspace } from "../../../types/workspace";
-import { listAllWorkspaces } from "../api/workspaces";
+import { listAllWorkspaces } from "../../../api/workspaces";
 
 export function StartToolFAB() {
 	const [open, setOpen] = useState(false);

apps/web/src/components/features/tool/start-tool-modal.tsx

@@ -1,10 +1,10 @@
 /** Modal for starting a tool on a workspace. */
 
 import { useState } from "react";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
-import { listToolTypes, type ToolType } from "../api/tool-types";
+import { listToolTypes, type ToolType } from "../../../api/tool-types";
-import { useAsyncData } from "../hooks/use-async-data";
+import { useAsyncData } from "../../../hooks/use-async-data";
-import type { Workspace } from "../types/workspace";
+import type { Workspace } from "../../../types/workspace";
 
 export interface StartToolModalProps {
 	workspace: Workspace;

apps/web/src/components/features/tool/tool-starter.tsx

@@ -1,12 +1,12 @@
 /** Unified tool starter — workspace-first, fetches real tool types and config profiles. */
 
 import { useState, useEffect, useCallback } from "react";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
-import { listToolTypes, type ToolType } from "../api/tool-types";
+import { listToolTypes, type ToolType } from "../../../api/tool-types";
-import { listConfigProfiles, type ConfigProfile } from "../api/config_profiles";
+import { listConfigProfiles, type ConfigProfile } from "../../../api/config_profiles";
-import { listSSHKeys, type SSHKey } from "../api/ssh-keys";
+import { listSSHKeys, type SSHKey } from "../../../api/ssh-keys";
-import type { Workspace } from "../types/workspace";
+import type { Workspace } from "../../../types/workspace";
-import type { ToolInstance } from "../api/sessions";
+import type { ToolInstance } from "../../../api/sessions";
 
 export interface ToolStarterProps {
 	workspace: Workspace;
@@ -114,7 +114,7 @@ export function ToolStarter({
 		setStarting(true);
 		setError(null);
 		try {
-			const { createInstance, startInstance } = await import("../api/sessions");
+			const { createInstance, startInstance } = await import("../../../api/sessions");
 			const instance = await createInstance(
 				workspace.project_id,
 				workspace.repo_id,

apps/web/src/components/features/tool/tools-bottom-sheet.tsx

@@ -1,5 +1,5 @@
 import { useLocation, useNavigate } from "react-router-dom";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
 
 interface ToolsBottomSheetProps {
   isOpen: boolean;

apps/web/src/components/features/workspace/workspace-card.tsx

@@ -1,9 +1,9 @@
 /** Card component for displaying a workspace. */
 
 import { Link } from "react-router-dom";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
 import { WorkspaceInstanceChips } from "./workspace-instance-chips";
-import type { Workspace } from "../types/workspace";
+import type { Workspace } from "../../../types/workspace";
 
 export interface WorkspaceCardProps {
 	workspace: Workspace;

apps/web/src/components/features/workspace/workspace-create-form.tsx

@@ -1,13 +1,13 @@
 /** Unified workspace creation form with project/repo/branch selectors. */
 
 import { useState, useEffect, useCallback } from "react";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
-import { listProjects } from "../api/projects";
+import { listProjects } from "../../../api/projects";
-import { listRepositories } from "../api/git-repositories";
+import { listRepositories } from "../../../api/git-repositories";
-import { createWorkspaceTopLevel } from "../api/workspaces";
+import { createWorkspaceTopLevel } from "../../../api/workspaces";
-import { useGitRepo } from "../hooks/use-git-repo";
+import { useGitRepo } from "../../../hooks/use-git-repo";
-import type { ProjectWithRepos } from "../types";
+import type { ProjectWithRepos } from "../../../types";
-import type { GitRepository } from "../api/git-repositories";
+import type { GitRepository } from "../../../api/git-repositories";
 
 export interface WorkspaceCreateFormProps {
 	/** Called after successful creation. */

apps/web/src/components/features/workspace/workspace-header.tsx

@@ -1,5 +1,5 @@
 import { Link } from "react-router-dom";
-import { Icon } from "./icon";
+import { Icon } from "../../icon";
 
 interface WorkspaceHeaderProps {
   project: {

apps/web/src/components/features/workspace/workspace-instance-chips.tsx

@@ -1,8 +1,8 @@
 /** Small component showing running instances for a workspace. */
 
 import { useEffect, useState } from "react";
-import { listWorkspaceInstances } from "../api/workspace-instances";
+import { listWorkspaceInstances } from "../../../api/workspace-instances";
-import type { ToolInstance } from "../api/sessions";
+import type { ToolInstance } from "../../../api/sessions";
 
 interface WorkspaceInstanceChipsProps {
 	workspaceId: string;