Bump underscore from 1.13.6 to 1.13.8

Bumps [underscore](https://github.com/jashkenas/underscore) from 1.13.6 to 1.13.8. - [Commits](https://github.com/jashkenas/underscore/compare/1.13.6...1.13.8) --- updated-dependencies: - dependency-name: underscore dependency-version: 1.13.8 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>
2026-03-06 19:29:51 +00:00
34 changed files with 3192 additions and 2434 deletions
--- a/.claude/skills/jsdoc/SKILL.md
+++ b/.claude/skills/jsdoc/SKILL.md
@@ -1,379 +0,0 @@
---
-name: jsdoc
-description: Commenting and documentation guidelines. Auto-activate when the user discusses comments, documentation, docstrings, code clarity, API docs, JSDoc, or asks about commenting strategies.
---
-
-Auto-activate when: User discusses comments, documentation, docstrings, code clarity, code quality, API docs, JSDoc, Python docstrings, or asks about commenting strategies.
-Core Principle
-
-Write code that speaks for itself. Comment only when necessary to explain WHY, not WHAT.
-
-Most code does not need comments. Well-written code with clear naming and structure is self-documenting.
-
-The best comment is the one you don't need to write because the code is already obvious.
-The Commenting Philosophy
-When to Comment
-
-✅ DO comment when explaining:
-
-    WHY something is done (business logic, design decisions)
-    Complex algorithms and their reasoning
-    Non-obvious trade-offs or constraints
-    Workarounds for bugs or limitations
-    API contracts and public interfaces
-    Regex patterns and what they match
-    Performance considerations or optimizations
-    Constants and magic numbers
-    Gotchas or surprising behaviors
-
-❌ DON'T comment when:
-
-    The code is obvious and self-explanatory
-    The comment repeats the code (redundant)
-    Better naming would eliminate the need
-    The comment would become outdated quickly
-    It's decorative or organizational noise
-    It states what a standard language construct does
-
-Comment Anti-Patterns
-❌ 1. Obvious Comments
-
-BAD:
-
-counter = 0  # Initialize counter to zero
-counter += 1  # Increment counter by one
-user_name = input("Enter name: ")  # Get user name from input
-
-Better: No comment needed - the code is self-explanatory.
-❌ 2. Redundant Comments
-
-BAD:
-
-def get_user_name(user):
-    return user.name  # Return the user's name
-
-def calculate_total(items):
-    # Loop through items and sum the prices
-    total = 0
-    for item in items:
-        total += item.price
-    return total
-
-Better:
-
-def get_user_name(user):
-    return user.name
-
-def calculate_total(items):
-    return sum(item.price for item in items)
-
-❌ 3. Outdated Comments
-
-BAD:
-
-# Calculate tax at 5% rate
-tax = price * 0.08  # Actually 8%, comment is wrong
-
-# DEPRECATED: Use new_api_function() instead
-def old_function():  # Still being used, comment is misleading
-    pass
-
-Better: Keep comments in sync with code, or remove them entirely.
-❌ 4. Noise Comments
-
-BAD:
-
-# Start of function
-def calculate():
-    # Declare variable
-    result = 0
-    # Return result
-    return result
-# End of function
-
-Better: Remove all of these comments.
-❌ 5. Dead Code & Changelog Comments
-
-BAD:
-
-# Don't comment out code - use version control
-# def old_function():
-#     return "deprecated"
-
-# Don't maintain history in comments
-# Modified by John on 2023-01-15
-# Fixed bug reported by Sarah on 2023-02-03
-
-Better: Delete the code. Git has the history.
-Good Comment Examples
-✅ Complex Business Logic
-
-# Apply progressive tax brackets: 10% up to $10k, 20% above
-# This matches IRS publication 501 for 2024
-def calculate_progressive_tax(income):
-    if income <= 10000:
-        return income * 0.10
-    else:
-        return 1000 + (income - 10000) * 0.20
-
-✅ Non-obvious Algorithms
-
-# Using Floyd-Warshall for all-pairs shortest paths
-# because we need distances between all nodes.
-# Time: O(n³), Space: O(n²)
-for k in range(vertices):
-    for i in range(vertices):
-        for j in range(vertices):
-            dist[i][j] = min(dist[i][j], dist[i][k] + dist[k][j])
-
-✅ Regex Patterns
-
-# Match email format: username@domain.extension
-# Allows letters, numbers, dots, hyphens in username
-# Requires valid domain and 2+ char extension
-email_pattern = r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$'
-
-✅ API Constraints or Gotchas
-
-# GitHub API rate limit: 5000 requests/hour for authenticated users
-# We implement exponential backoff to handle rate limiting
-await rate_limiter.wait()
-response = await fetch(github_api_url)
-
-✅ Workarounds for Bugs
-
-# HACK: Workaround for bug in library v2.1.0
-# Remove after upgrading to v2.2.0
-# See: https://github.com/library/issues/123
-if library_version == "2.1.0":
-    apply_workaround()
-
-Decision Framework
-
-Before writing a comment, ask yourself:
-Step 1: Is the code self-explanatory?
-
-    If YES → No comment needed
-    If NO → Continue to step 2
-
-Step 2: Would a better variable/function name eliminate the need?
-
-    If YES → Refactor the code instead
-    If NO → Continue to step 3
-
-Step 3: Does this explain WHY, not WHAT?
-
-    If explaining WHAT → Refactor code to be clearer
-    If explaining WHY → Good comment candidate
-
-Step 4: Will this help future maintainers?
-
-    If YES → Write the comment
-    If NO → Skip it
-
-Special Cases for Comments
-Public APIs and Docstrings
-Python Docstrings
-
-def calculate_compound_interest(
-    principal: float,
-    rate: float,
-    time: int,
-    compound_frequency: int = 1
-) -> float:
-    """
-    Calculate compound interest using the standard formula.
-
-    Args:
-        principal: Initial amount invested
-        rate: Annual interest rate as decimal (e.g., 0.05 for 5%)
-        time: Time period in years
-        compound_frequency: Times per year interest compounds (default: 1)
-
-    Returns:
-        Final amount after compound interest
-
-    Raises:
-        ValueError: If any parameter is negative
-
-    Example:
-        >>> calculate_compound_interest(1000, 0.05, 10)
-        1628.89
-    """
-    if principal < 0 or rate < 0 or time < 0:
-        raise ValueError("Parameters must be non-negative")
-
-    # Compound interest formula: A = P(1 + r/n)^(nt)
-    return principal * (1 + rate / compound_frequency) ** (compound_frequency * time)
-
-JavaScript/TypeScript JSDoc
-
-/**
- * Fetch user data from the API.
- *
- * @param {string} userId - The unique user identifier
- * @param {Object} options - Configuration options
- * @param {boolean} options.includeProfile - Include profile data (default: true)
- * @param {number} options.timeout - Request timeout in ms (default: 5000)
- *
- * @returns {Promise<User>} User object with requested fields
- *
- * @throws {Error} If userId is invalid or request fails
- *
- * @example
- * const user = await fetchUser('123', { includeProfile: true });
- */
-async function fetchUser(userId, options = {}) {
-  // Implementation
-}
-
-Constants and Configuration
-
-# Based on network reliability studies (95th percentile)
-MAX_RETRIES = 3
-
-# AWS Lambda timeout is 15s, leaving 5s buffer for cleanup
-API_TIMEOUT = 10000  # milliseconds
-
-# Cache duration optimized for balance between freshness and load
-# See: docs/performance-tuning.md
-CACHE_TTL = 300  # 5 minutes
-
-Annotations for TODOs and Warnings
-
-# TODO: Replace with proper authentication after security review
-# Issue: #456
-def temporary_auth(user):
-    return True
-
-# WARNING: This function modifies the original array instead of creating a copy
-def sort_in_place(arr):
-    arr.sort()
-    return arr
-
-# FIXME: Memory leak in production - investigate connection pooling
-# Ticket: JIRA-789
-def get_connection():
-    return create_connection()
-
-# PERF: Consider caching this result if called frequently in hot path
-def expensive_calculation(data):
-    return complex_algorithm(data)
-
-# SECURITY: Validate input to prevent SQL injection before using in query
-def build_query(user_input):
-    sanitized = escape_sql(user_input)
-    return f"SELECT * FROM users WHERE name = '{sanitized}'"
-
-Common Annotation Keywords
-
-    TODO: - Work that needs to be done
-    FIXME: - Known bugs that need fixing
-    HACK: - Temporary workarounds
-    NOTE: - Important information or context
-    WARNING: - Critical information about usage
-    PERF: - Performance considerations
-    SECURITY: - Security-related notes
-    BUG: - Known bug documentation
-    REFACTOR: - Code that needs refactoring
-    DEPRECATED: - Soon-to-be-removed code
-
-Refactoring Over Commenting
-Instead of Commenting Complex Code...
-
-BAD: Complex code with comment
-
-# Check if user is admin or has special permissions
-if user.role == "admin" or (user.permissions and "special" in user.permissions):
-    grant_access()
-
-...Extract to Named Function
-
-GOOD: Self-explanatory through naming
-
-def user_has_admin_access(user):
-    return user.role == "admin" or has_special_permission(user)
-
-def has_special_permission(user):
-    return user.permissions and "special" in user.permissions
-
-if user_has_admin_access(user):
-    grant_access()
-
-Language-Specific Examples
-JavaScript
-
-// Good: Explains WHY we debounce
-// Debounce search to reduce API calls (500ms wait after last keystroke)
-const debouncedSearch = debounce(searchAPI, 500);
-
-// Bad: Obvious
-let count = 0;  // Initialize count to zero
-count++;  // Increment count
-
-// Good: Explains algorithm choice
-// Using Set for O(1) lookup instead of Array.includes() which is O(n)
-const seen = new Set(ids);
-
-Python
-
-# Good: Explains the algorithm choice
-# Using binary search because data is sorted and we need O(log n) performance
-index = bisect.bisect_left(sorted_list, target)
-
-# Bad: Redundant
-def get_total(items):
-    return sum(items)  # Return the sum of items
-
-# Good: Explains why we're doing this
-# Extract to separate function for type checking in mypy
-def validate_user(user):
-    if not user or not user.id:
-        raise ValueError("Invalid user")
-    return user
-
-TypeScript
-
-// Good: Explains the type assertion
-// TypeScript can't infer this is never null after the check
-const element = document.getElementById('app') as HTMLElement;
-
-// Bad: Obvious
-const sum = a + b;  // Add a and b
-
-// Good: Explains non-obvious behavior
-// spread operator creates shallow copy; use JSON for deep copy
-const newConfig = { ...config };
-
-Comment Quality Checklist
-
-Before committing, ensure your comments:
-
-    Explain WHY, not WHAT
-    Are grammatically correct and clear
-    Will remain accurate as code evolves
-    Add genuine value to code understanding
-    Are placed appropriately (above the code they describe)
-    Use proper spelling and professional language
-    Follow team conventions for annotation keywords
-    Could not be replaced by better naming or structure
-    Are not obvious statements about language features
-    Reference tickets/issues when applicable
-
-Summary
-
-Priority order:
-
-    Clear code - Self-explanatory through naming and structure
-    Good comments - Explain WHY when necessary
-    Documentation - API docs, docstrings for public interfaces
-    No comments - Better than bad comments that lie or clutter
-
-Remember: Comments are a failure to make the code self-explanatory. Use them sparingly and wisely.
-Key Takeaways
-Goal 	Approach
-Reduce comments 	Improve naming, extract functions, simplify logic
-Improve clarity 	Use self-explanatory code structure, clear variable names
-Document APIs 	Use docstrings/JSDoc for public interfaces
-Explain WHY 	Comment only business logic, algorithms, workarounds
-Maintain accuracy 	Update comments when code changes, or remove them
--- a/.claude/skills/typescript/SKILL.md
+++ b/.claude/skills/typescript/SKILL.md
@@ -1,353 +0,0 @@
---
-name: typescript
-description: TypeScript engineering guidelines based on Google's style guide. Use when writing, reviewing, or refactoring TypeScript code in this project.
---
-
-Comprehensive guidelines for writing production-quality TypeScript based on Google's TypeScript Style Guide.
-Naming Conventions
-Type 	Convention 	Example
-Classes, Interfaces, Types, Enums 	UpperCamelCase 	UserService, HttpClient
-Variables, Parameters, Functions 	lowerCamelCase 	userName, processData
-Global Constants, Enum Values 	CONSTANT_CASE 	MAX_RETRIES, Status.ACTIVE
-Type Parameters 	Single letter or UpperCamelCase 	T, ResponseType
-Naming Principles
-
-    Descriptive names, avoid ambiguous abbreviations
-    Treat acronyms as words: loadHttpUrl not loadHTTPURL
-    No prefixes like opt_ for optional parameters
-    No trailing underscores for private properties
-    Single-letter variables only when scope is <10 lines
-
-Variable Declarations
-
-// Always use const by default
-const users = getUsers();
-
-// Use let only when reassignment is needed
-let count = 0;
-count++;
-
-// Never use var
-// var x = 1;  // WRONG
-
-// One variable per declaration
-const a = 1;
-const b = 2;
-// const a = 1, b = 2;  // WRONG
-
-Types and Interfaces
-Prefer Interfaces Over Type Aliases
-
-// Good: interface for object shapes
-interface User {
-  id: string;
-  name: string;
-  email?: string;
-}
-
-// Avoid: type alias for object shapes
-type User = {
-  id: string;
-  name: string;
-};
-
-// Type aliases OK for unions, intersections, mapped types
-type Status = 'active' | 'inactive';
-type Combined = TypeA & TypeB;
-
-Type Inference
-
-Leverage inference for trivially inferred types:
-
-// Good: inference is clear
-const name = 'Alice';
-const items = [1, 2, 3];
-
-// Good: explicit for complex expressions
-const result: ProcessedData = complexTransformation(input);
-
-Array Types
-
-// Simple types: use T[]
-const numbers: number[];
-const names: readonly string[];
-
-// Multi-dimensional: use T[][]
-const matrix: number[][];
-
-// Complex types: use Array<T>
-const handlers: Array<(event: Event) => void>;
-
-Null and Undefined
-
-// Prefer optional fields over union with undefined
-interface Config {
-  timeout?: number;        // Good
-  // timeout: number | undefined;  // Avoid
-}
-
-// Type aliases must NOT include |null or |undefined
-type UserId = string;  // Good
-// type UserId = string | null;  // WRONG
-
-// May use == for null comparison (catches both null and undefined)
-if (value == null) {
-  // handles both null and undefined
-}
-
-Types to Avoid
-
-// Avoid any - use unknown instead
-function parse(input: unknown): Data { }
-
-// Avoid {} - use unknown, Record<string, T>, or object
-function process(obj: Record<string, unknown>): void { }
-
-// Use lowercase primitives
-let name: string;    // Good
-// let name: String;  // WRONG
-
-// Never use wrapper objects
-// new String('hello')  // WRONG
-
-Classes
-Structure
-
-class UserService {
-  // Fields first, initialized where declared
-  private readonly cache = new Map<string, User>();
-  private lastAccess: Date | null = null;
-
-  // Constructor with parameter properties
-  constructor(
-    private readonly api: ApiClient,
-    private readonly logger: Logger,
-  ) {}
-
-  // Methods separated by blank lines
-  async getUser(id: string): Promise<User> {
-    // ...
-  }
-
-  private validateId(id: string): boolean {
-    // ...
-  }
-}
-
-Visibility
-
-class Example {
-  // private by default, only use public when needed externally
-  private internalState = 0;
-
-  // readonly for properties never reassigned after construction
-  readonly id: string;
-
-  // Never use #private syntax - use TypeScript visibility
-  // #field = 1;  // WRONG
-  private field = 1;  // Good
-}
-
-Avoid Arrow Functions as Properties
-
-class Handler {
-  // Avoid: arrow function as property
-  // handleClick = () => { ... };
-
-  // Good: instance method
-  handleClick(): void {
-    // ...
-  }
-}
-
-// Bind at call site if needed
-element.addEventListener('click', () => handler.handleClick());
-
-Static Methods
-
-    Never use this in static methods
-    Call on defining class, not subclasses
-
-Functions
-Prefer Function Declarations
-
-// Good: function declaration for named functions
-function processData(input: Data): Result {
-  return transform(input);
-}
-
-// Arrow functions when type annotation needed
-const handler: EventHandler = (event) => {
-  // ...
-};
-
-Arrow Function Bodies
-
-// Concise body only when return value is used
-const double = (x: number) => x * 2;
-
-// Block body when return should be void
-const log = (msg: string) => {
-  console.log(msg);
-};
-
-Parameters
-
-// Use rest parameters, not arguments
-function sum(...numbers: number[]): number {
-  return numbers.reduce((a, b) => a + b, 0);
-}
-
-// Destructuring for multiple optional params
-interface Options {
-  timeout?: number;
-  retries?: number;
-}
-function fetch(url: string, { timeout = 5000, retries = 3 }: Options = {}) {
-  // ...
-}
-
-// Never name a parameter 'arguments'
-
-Imports and Exports
-Always Use Named Exports
-
-// Good: named exports
-export function processData() { }
-export class UserService { }
-export interface Config { }
-
-// Never use default exports
-// export default class UserService { }  // WRONG
-
-Import Styles
-
-// Module import for large APIs
-import * as fs from 'fs';
-
-// Named imports for frequently used symbols
-import { readFile, writeFile } from 'fs/promises';
-
-// Type-only imports when only used as types
-import type { User, Config } from './types';
-
-Module Organization
-
-    Use modules, never namespace Foo { }
-    Never use require() - use ES6 imports
-    Use relative imports within same project
-    Avoid excessive ../../../
-
-Control Structures
-Always Use Braces
-
-// Good
-if (condition) {
-  doSomething();
-}
-
-// Exception: single-line if
-if (condition) return early;
-
-Loops
-
-// Prefer for...of for arrays
-for (const item of items) {
-  process(item);
-}
-
-// Use Object methods with for...of for objects
-for (const [key, value] of Object.entries(obj)) {
-  // ...
-}
-
-// Never use unfiltered for...in on arrays
-
-Equality
-
-// Always use === and !==
-if (a === b) { }
-
-// Exception: == null catches both null and undefined
-if (value == null) { }
-
-Switch Statements
-
-switch (status) {
-  case Status.Active:
-    handleActive();
-    break;
-  case Status.Inactive:
-    handleInactive();
-    break;
-  default:
-    // Always include default, even if empty
-    break;
-}
-
-Exception Handling
-
-// Always throw Error instances
-throw new Error('Something went wrong');
-// throw 'error';  // WRONG
-
-// Catch with unknown type
-try {
-  riskyOperation();
-} catch (e: unknown) {
-  if (e instanceof Error) {
-    logger.error(e.message);
-  }
-  throw e;
-}
-
-// Empty catch needs justification comment
-try {
-  optional();
-} catch {
-  // Intentionally ignored: fallback behavior handles this
-}
-
-Type Assertions
-
-// Use 'as' syntax, not angle brackets
-const input = value as string;
-// const input = <string>value;  // WRONG in TSX, avoid everywhere
-
-// Double assertion through unknown when needed
-const config = (rawData as unknown) as Config;
-
-// Add comment explaining why assertion is safe
-const element = document.getElementById('app') as HTMLElement;
-// Safe: element exists in index.html
-
-Strings
-
-// Use single quotes for string literals
-const name = 'Alice';
-
-// Template literals for interpolation or multiline
-const message = `Hello, ${name}!`;
-const query = `
-  SELECT *
-  FROM users
-  WHERE id = ?
-`;
-
-// Never use backslash line continuations
-
-Disallowed Features
-Feature 	Alternative
-var 	const or let
-Array() constructor 	[] literal
-Object() constructor 	{} literal
-any type 	unknown
-namespace 	modules
-require() 	import
-Default exports 	Named exports
-#private fields 	private modifier
-eval() 	Never use
-const enum 	Regular enum
-debugger 	Remove before commit
-with 	Never use
-Prototype modification 	Never modify
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -13,8 +13,7 @@
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "codegen": "wait-on http-get://localhost:3000/graphql/health && graphql-codegen",
-    "codegen:watch": "graphql-codegen --config codegen.yml --watch",
-    "knip": "knip"
+    "codegen:watch": "graphql-codegen --config codegen.yml --watch"
  },
  "author": "Rishi Ghan",
  "license": "MIT",
@@ -26,7 +25,7 @@
    "@floating-ui/react-dom": "^2.1.7",
    "@fortawesome/fontawesome-free": "^7.2.0",
    "@popperjs/core": "^2.11.8",
-    "@tanstack/react-query": "^5.90.21",
+"@tanstack/react-query": "^5.90.21",
    "@tanstack/react-table": "^8.21.3",
    "@types/mime-types": "^3.0.1",
    "@types/react-router-dom": "^5.3.3",
@@ -53,7 +52,6 @@
    "immer": "^11.1.4",
    "jsdoc": "^4.0.5",
    "lodash": "^4.17.23",
-    "motion": "^12.38.0",
    "pretty-bytes": "^7.1.0",
    "prop-types": "^15.8.1",
    "qs": "^6.15.0",
@@ -79,7 +77,6 @@
    "socket.io-client": "^4.8.3",
    "styled-components": "^6.3.11",
    "threetwo-ui-typings": "^1.0.14",
-    "vaul": "^1.1.2",
    "vite": "^7.3.1",
    "vite-plugin-html": "^3.2.2",
    "websocket": "^1.0.35",
@@ -112,7 +109,7 @@
    "@types/ellipsize": "^0.1.3",
    "@types/jest": "^30.0.0",
    "@types/lodash": "^4.17.24",
-    "@types/node": "^25.5.2",
+    "@types/node": "^25.3.0",
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
    "@types/react-redux": "^7.1.34",
@@ -141,7 +138,7 @@
    "tailwindcss": "^4.2.1",
    "ts-jest": "^29.4.6",
    "tui-jsdoc-template": "^1.2.2",
-    "typescript": "^6.0.2",
+    "typescript": "^5.9.3",
    "wait-on": "^9.0.4"
  },
  "resolutions": {
--- a/src/client/README.md
+++ b/src/client/README.md
@@ -7,12 +7,11 @@ This folder houses all the components, utils and libraries that make up ThreeTwo

 It is based on React 18, and uses:

-1. _zustand_ for state management
+1. _Redux_ for state management
 2. _socket.io_ for transferring data in real-time
 3. _React Router_ for routing
 4. React DnD for drag-and-drop
 5. @tanstack/react-table for all tables
-6. @tanstack/react-query for API calls



--- a/src/client/components/ComicDetail/ComicDetail.tsx
+++ b/src/client/components/ComicDetail/ComicDetail.tsx
@@ -1,4 +1,4 @@
-import React, { useState, ReactElement, useCallback, useMemo } from "react";
+import React, { useState, ReactElement, useCallback } from "react";
 import { useParams } from "react-router-dom";
 import Card from "../shared/Carda";
 import { RawFileDetails } from "./RawFileDetails";
@@ -10,7 +10,7 @@ import "react-sliding-pane/dist/react-sliding-pane.css";
 import SlidingPane from "react-sliding-pane";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
 import { styled } from "styled-components";
-import type { RawFileDetails as RawFileDetailsType, InferredMetadata } from "../../graphql/generated";
+import { RawFileDetails as RawFileDetailsType } from "../../graphql/generated";

 // Extracted modules
 import { useComicVineMatching } from "./useComicVineMatching";
@@ -23,47 +23,57 @@ const StyledSlidingPanel = styled(SlidingPane)`
  background: #ccc;
 `;

-interface ComicVineMetadata {
+type InferredIssue = {
  name?: string;
-  volumeInformation?: Record<string, unknown>;
-  [key: string]: unknown;
-}
+  number?: number;
+  year?: string;
+  subtitle?: string;
+  [key: string]: any;
+};

-interface Acquisition {
+type ComicVineMetadata = {
+  name?: string;
+  volumeInformation?: any;
+  [key: string]: any;
+};
+
+type Acquisition = {
  directconnect?: {
-    downloads?: unknown[];
+    downloads?: any[];
  };
-  torrent?: unknown[];
-  [key: string]: unknown;
-}
+  torrent?: any[];
+  [key: string]: any;
+};

-interface ComicDetailProps {
+type ComicDetailProps = {
  data: {
    _id: string;
    rawFileDetails?: RawFileDetailsType;
-    inferredMetadata: InferredMetadata;
+    inferredMetadata: {
+      issue?: InferredIssue;
+    };
    sourcedMetadata: {
      comicvine?: ComicVineMetadata;
-      locg?: Record<string, unknown>;
-      comicInfo?: Record<string, unknown>;
+      locg?: any;
+      comicInfo?: any;
    };
    acquisition?: Acquisition;
    createdAt: string;
    updatedAt: string;
  };
-  userSettings?: Record<string, unknown>;
-  queryClient?: unknown;
+  userSettings?: any;
+  queryClient?: any;
  comicObjectId?: string;
-}
+};

 /**
- * Displays full comic detail: cover, file info, action menu, and tabbed panels
- * for metadata, archive operations, and acquisition.
+ * Component for displaying the metadata for a comic in greater detail.
 *
- * @param data.queryClient - react-query client passed through to the CV match
- *   panel so it can invalidate queries after a match is applied.
- * @param data.comicObjectId - optional override for the comic ID; used when the
- *   component is rendered outside a route that provides the ID via `useParams`.
+ * @component
+ * @example
+ * return (
+ *   <ComicDetail/>
+ * )
 */
 export const ComicDetail = (data: ComicDetailProps): ReactElement => {
  const {
@@ -74,6 +84,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
      sourcedMetadata: { comicvine, locg, comicInfo },
      acquisition,
      createdAt,
+      updatedAt,
    },
    userSettings,
    queryClient,
@@ -83,10 +94,24 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
  const [activeTab, setActiveTab] = useState<number | undefined>(undefined);
  const [visible, setVisible] = useState(false);
  const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
+  const [modalIsOpen, setIsOpen] = useState(false);

  const { comicObjectId } = useParams<{ comicObjectId: string }>();
  const { comicVineMatches, prepareAndFetchMatches } = useComicVineMatching();

+  // Modal handlers (currently unused but kept for future use)
+  const openModal = useCallback((filePath: string) => {
+    setIsOpen(true);
+  }, []);
+
+  const afterOpenModal = useCallback((things: any) => {
+    // Modal opened callback
+  }, []);
+
+  const closeModal = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
  // Action event handlers
  const openDrawerWithCVMatches = () => {
    prepareAndFetchMatches(rawFileDetails, comicvine);
@@ -99,8 +124,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
    setVisible(true);
  }, []);

-  // Hide "match on Comic Vine" when there are no raw file details — matching
-  // requires file metadata to seed the search query.
+  // Action menu handler
  const Placeholder = components.Placeholder;
  const filteredActionOptions = filter(actionOptions, (item) => {
    if (isUndefined(rawFileDetails)) {
@@ -126,11 +150,6 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
  const isComicBookMetadataAvailable =
    !isUndefined(comicvine) && !isUndefined(comicvine?.volumeInformation);

-  const hasAnyMetadata =
-    isComicBookMetadataAvailable ||
-    !isEmpty(comicInfo) ||
-    !isNil(locg);
-
  const areRawFileDetailsAvailable =
    !isUndefined(rawFileDetails) && !isEmpty(rawFileDetails);

@@ -141,29 +160,26 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
  });

  // Query for airdc++
-  const airDCPPQuery = useMemo(() => ({
-    issue: { name: issueName },
-  }), [issueName]);
+  const airDCPPQuery = {
+    issue: {
+      name: issueName,
+    },
+  };

  // Create tab configuration
-  const openReconcilePanel = useCallback(() => {
-    setSlidingPanelContentId("metadataReconciliation");
-    setVisible(true);
-  }, []);
-
-  const tabGroup = useMemo(() => createTabConfig({
+  const tabGroup = createTabConfig({
    data: data.data,
-    hasAnyMetadata,
+    comicInfo,
+    isComicBookMetadataAvailable,
    areRawFileDetailsAvailable,
    airDCPPQuery,
    comicObjectId: _id,
    userSettings,
    issueName,
    acquisition,
-    onReconcileMetadata: openReconcilePanel,
-  }), [data.data, hasAnyMetadata, areRawFileDetailsAvailable, airDCPPQuery, _id, userSettings, issueName, acquisition, openReconcilePanel]);
+  });

-  const filteredTabs = useMemo(() => tabGroup.filter((tab) => tab.shouldShow), [tabGroup]);
+  const filteredTabs = tabGroup.filter((tab) => tab.shouldShow);

  // Sliding panel content mapping
  const renderSlidingPanelContent = () => {
@@ -174,7 +190,6 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
            rawFileDetails={rawFileDetails}
            inferredMetadata={inferredMetadata}
            comicVineMatches={comicVineMatches}
-            // Prefer the route param; fall back to the data ID when rendered outside a route.
            comicObjectId={comicObjectId || _id}
            queryClient={queryClient}
            onMatchApplied={() => {
@@ -209,9 +224,10 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
                    <div className="grid">
                      <RawFileDetails
                        data={{
-                          rawFileDetails,
-                          inferredMetadata,
-                          createdAt,
+                          rawFileDetails: rawFileDetails,
+                          inferredMetadata: inferredMetadata,
+                          created_at: createdAt,
+                          updated_at: updatedAt,
                        }}
                      >
                        {/* action dropdown */}
--- a/src/client/components/ComicDetail/ComicVineMatchPanel.tsx
+++ b/src/client/components/ComicDetail/ComicVineMatchPanel.tsx
@@ -1,21 +1,12 @@
 import React, { ReactElement } from "react";
+import { ComicVineSearchForm } from "../ComicVineSearchForm";
 import MatchResult from "./MatchResult";
 import { isEmpty } from "lodash";
 import { useStore } from "../../store";
 import { useShallow } from "zustand/react/shallow";

-interface ComicVineMatchPanelProps {
-  props: {
-    comicObjectId: string;
-    comicVineMatches: any[];
-    queryClient?: any;
-    onMatchApplied?: () => void;
-  };
-}
-
-/** Displays ComicVine search results or a status message while searching. */
-export const ComicVineMatchPanel = ({ props: comicVineData }: ComicVineMatchPanelProps): ReactElement => {
-  const { comicObjectId, comicVineMatches, queryClient, onMatchApplied } = comicVineData;
+export const ComicVineMatchPanel = (comicVineData): ReactElement => {
+  const { comicObjectId, comicVineMatches, queryClient, onMatchApplied } = comicVineData.props;
  const { comicvine } = useStore(
    useShallow((state) => ({
      comicvine: state.comicvine,
--- a/src/client/components/ComicDetail/EditMetadataPanel.tsx
+++ b/src/client/components/ComicDetail/EditMetadataPanel.tsx
@@ -1,41 +1,55 @@
-import React, { ReactElement } from "react";
-import { Form, Field, FieldRenderProps } from "react-final-form";
+import React, { ReactElement, useCallback, useEffect, useState } from "react";
+import { Form, Field } from "react-final-form";
 import arrayMutators from "final-form-arrays";
 import { FieldArray } from "react-final-form-arrays";
 import AsyncSelectPaginate from "./AsyncSelectPaginate/AsyncSelectPaginate";
 import TextareaAutosize from "react-textarea-autosize";

-interface EditMetadataPanelProps {
-  data: {
-    name?: string | null;
-    [key: string]: any;
-  };
-}
-
-/** Adapts react-final-form's Field render prop to AsyncSelectPaginate. */
-const AsyncSelectPaginateAdapter = ({ input, ...rest }: FieldRenderProps<any>) => (
-  <AsyncSelectPaginate {...input} {...rest} onChange={(value) => input.onChange(value)} />
-);
-
-/** Adapts react-final-form's Field render prop to TextareaAutosize. */
-const TextareaAutosizeAdapter = ({ input, ...rest }: FieldRenderProps<any>) => (
-  <TextareaAutosize {...input} {...rest} onChange={(value) => input.onChange(value)} />
-);
-
-/** Sliding panel form for manually editing comic metadata fields. */
-export const EditMetadataPanel = ({ data }: EditMetadataPanelProps): ReactElement => {
+export const EditMetadataPanel = (props): ReactElement => {
+  const validate = async () => {};
  const onSubmit = async () => {};

+  const { data } = props;
+
+  const AsyncSelectPaginateAdapter = ({ input, ...rest }) => {
+    return (
+      <AsyncSelectPaginate
+        {...input}
+        {...rest}
+        onChange={(value) => input.onChange(value)}
+      />
+    );
+  };
+  const TextareaAutosizeAdapter = ({ input, ...rest }) => {
+    return (
+      <TextareaAutosize
+        {...input}
+        {...rest}
+        onChange={(value) => input.onChange(value)}
+      />
+    );
+  };
+  // const rawFileDetails = useSelector(
+  //   (state: RootState) => state.comicInfo.comicBookDetail.rawFileDetails.name,
+  // );
+
  return (
    <>
      <Form
        onSubmit={onSubmit}
-        mutators={{ ...arrayMutators }}
+        validate={validate}
+        mutators={{
+          ...arrayMutators,
+        }}
        render={({
          handleSubmit,
          form: {
            mutators: { push, pop },
-          },
+          }, // injected from final-form-arrays above
+          pristine,
+          form,
+          submitting,
+          values,
        }) => (
          <form onSubmit={handleSubmit}>
            {/* Issue Name */}
@@ -66,6 +80,7 @@ export const EditMetadataPanel = ({ data }: EditMetadataPanelProps): ReactElemen
                <p className="text-xs">Do not enter the first zero</p>
              </div>
              <div>
+                {/* year */}
                <div className="text-sm">Issue Year</div>
                <Field
                  name="issue_year"
@@ -85,6 +100,8 @@ export const EditMetadataPanel = ({ data }: EditMetadataPanelProps): ReactElemen
              </div>
            </div>

+            {/* page count */}
+
            {/* Description */}
            <div className="mt-2">
              <label className="text-sm">Description</label>
@@ -96,7 +113,7 @@ export const EditMetadataPanel = ({ data }: EditMetadataPanelProps): ReactElemen
              />
            </div>

-            <hr />
+            <hr size="1" />

            <div className="field is-horizontal">
              <div className="field-label">
@@ -136,7 +153,7 @@ export const EditMetadataPanel = ({ data }: EditMetadataPanelProps): ReactElemen
              </div>
            </div>

-            <hr />
+            <hr size="1" />

            {/* Publisher */}
            <div className="field is-horizontal">
@@ -207,7 +224,7 @@ export const EditMetadataPanel = ({ data }: EditMetadataPanelProps): ReactElemen
              </div>
            </div>

-            <hr />
+            <hr size="1" />

            {/* team credits */}
            <div className="field is-horizontal">
@@ -285,6 +302,7 @@ export const EditMetadataPanel = ({ data }: EditMetadataPanelProps): ReactElemen
                ))
              }
            </FieldArray>
+            <pre>{JSON.stringify(values, undefined, 2)}</pre>
          </form>
        )}
      />
--- a/src/client/components/ComicDetail/MatchResult.tsx
+++ b/src/client/components/ComicDetail/MatchResult.tsx
@@ -4,7 +4,6 @@ import { convert } from "html-to-text";
 import ellipsize from "ellipsize";
 import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";
 import axios from "axios";
-import { useGetComicByIdQuery } from "../../graphql/generated";

 interface MatchResultProps {
  matchData: any;
@@ -32,7 +31,7 @@ export const MatchResult = (props: MatchResultProps) => {
      // Invalidate and refetch the comic book metadata
      if (props.queryClient) {
        await props.queryClient.invalidateQueries({
-          queryKey: useGetComicByIdQuery.getKey({ id: comicObjectId }),
+          queryKey: ["comicBookMetadata", comicObjectId],
        });
      }
      
--- a/src/client/components/ComicDetail/RawFileDetails.tsx
+++ b/src/client/components/ComicDetail/RawFileDetails.tsx
@@ -1,24 +1,29 @@
 import React, { ReactElement, ReactNode } from "react";
 import prettyBytes from "pretty-bytes";
 import { isEmpty } from "lodash";
-import { format, parseISO, isValid } from "date-fns";
-import {
-  RawFileDetails as RawFileDetailsType,
-  InferredMetadata,
-} from "../../graphql/generated";
+import { format, parseISO } from "date-fns";
+import { RawFileDetails as RawFileDetailsType } from "../../graphql/generated";

 type RawFileDetailsProps = {
  data?: {
    rawFileDetails?: RawFileDetailsType;
-    inferredMetadata?: InferredMetadata;
-    createdAt?: string;
+    inferredMetadata?: {
+      issue?: {
+        year?: string;
+        name?: string;
+        number?: number;
+        subtitle?: string;
+      };
+    };
+    created_at?: string;
+    updated_at?: string;
  };
  children?: ReactNode;
 };

-/** Renders raw file info, inferred metadata, and import timestamp for a comic. */
 export const RawFileDetails = (props: RawFileDetailsProps): ReactElement => {
-  const { rawFileDetails, inferredMetadata, createdAt } = props.data || {};
+  const { rawFileDetails, inferredMetadata, created_at, updated_at } =
+    props.data || {};
  return (
    <>
      <div className="max-w-2xl ml-5">
@@ -92,10 +97,10 @@ export const RawFileDetails = (props: RawFileDetailsProps): ReactElement => {
                Import Details
              </dt>
              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
-                {createdAt && isValid(parseISO(createdAt)) ? (
+                {created_at ? (
                  <>
-                    {format(parseISO(createdAt), "dd MMMM, yyyy")},{" "}
-                    {format(parseISO(createdAt), "h aaaa")}
+                    {format(parseISO(created_at), "dd MMMM, yyyy")},{" "}
+                    {format(parseISO(created_at), "h aaaa")}
                  </>
                ) : "N/A"}
              </dd>
--- a/src/client/components/ComicDetail/SlidingPanelContent.tsx
+++ b/src/client/components/ComicDetail/SlidingPanelContent.tsx
@@ -2,27 +2,27 @@ import React from "react";
 import { ComicVineSearchForm } from "./ComicVineSearchForm";
 import { ComicVineMatchPanel } from "./ComicVineMatchPanel";
 import { EditMetadataPanel } from "./EditMetadataPanel";
-import type { RawFileDetails, InferredMetadata } from "../../graphql/generated";
+import { RawFileDetails } from "../../graphql/generated";

-interface CVMatchesPanelProps {
+type InferredIssue = {
+  name?: string;
+  number?: number;
+  year?: string;
+  subtitle?: string;
+  [key: string]: any;
+};
+
+type CVMatchesPanelProps = {
  rawFileDetails?: RawFileDetails;
-  inferredMetadata: InferredMetadata;
+  inferredMetadata: {
+    issue?: InferredIssue;
+  };
  comicVineMatches: any[];
  comicObjectId: string;
  queryClient: any;
  onMatchApplied: () => void;
 };

-/**
- * Sliding panel content for ComicVine match search.
- *
- * Renders a search form pre-populated from `rawFileDetails`, a preview of the
- * inferred issue being searched for, and a list of ComicVine match candidates
- * the user can apply to the comic.
- *
- * @param props.onMatchApplied - Called after the user selects and applies a match,
- *   allowing the parent to close the panel and refresh state.
- */
 export const CVMatchesPanel: React.FC<CVMatchesPanelProps> = ({
  rawFileDetails,
  inferredMetadata,
@@ -62,4 +62,4 @@ type EditMetadataPanelWrapperProps = {

 export const EditMetadataPanelWrapper: React.FC<EditMetadataPanelWrapperProps> = ({
  rawFileDetails,
-}) => <EditMetadataPanel data={rawFileDetails ?? {}} />;
+}) => <EditMetadataPanel data={rawFileDetails} />;
--- a/src/client/components/ComicDetail/TabControls.tsx
+++ b/src/client/components/ComicDetail/TabControls.tsx
@@ -47,12 +47,10 @@ export const TabControls = (props): ReactElement => {
          </nav>
        </div>
      </div>
-      <Suspense fallback={null}>
-        {filteredTabs.map(({ id, content }) => (
-          <React.Fragment key={id}>
-            {currentActive === id ? content : null}
-          </React.Fragment>
-        ))}
+      <Suspense>
+        {filteredTabs.map(({ id, content }) => {
+          return currentActive === id ? content : null;
+        })}
      </Suspense>
    </>
  );
--- a/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx
+++ b/src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx
@@ -131,12 +131,10 @@ export const ArchiveOperations = (props: { data: any }): ReactElement => {
    enabled: false,
  });

-  useEffect(() => {
-    if (isSuccess && shouldRefetchComicBookData) {
-      queryClient.invalidateQueries({ queryKey: ["comicBookMetadata"] });
-      setShouldRefetchComicBookData(false);
-    }
-  }, [isSuccess, shouldRefetchComicBookData, queryClient]);
+  if (isSuccess && shouldRefetchComicBookData) {
+    queryClient.invalidateQueries({ queryKey: ["comicBookMetadata"] });
+    setShouldRefetchComicBookData(false);
+  }

  // sliding panel init
  const contentForSlidingPanel: Record<string, { content: () => JSX.Element }> = {
--- a/src/client/components/ComicDetail/Tabs/VolumeInformation.tsx
+++ b/src/client/components/ComicDetail/Tabs/VolumeInformation.tsx
@@ -1,165 +1,15 @@
-import React, { ReactElement, useMemo, useState } from "react";
-import { isEmpty, isNil } from "lodash";
-import { Drawer } from "vaul";
+import React, { ReactElement } from "react";
 import ComicVineDetails from "../ComicVineDetails";

-interface ComicVineMetadata {
-  volumeInformation?: Record<string, unknown>;
-  name?: string;
-  number?: string;
-  resource_type?: string;
-  id?: number;
-}
-
-interface SourcedMetadata {
-  comicvine?: ComicVineMetadata;
-  locg?: Record<string, unknown>;
-  comicInfo?: unknown;
-  metron?: unknown;
-  gcd?: unknown;
-  [key: string]: unknown;
-}
-
-interface VolumeInformationData {
-  sourcedMetadata?: SourcedMetadata;
-  inferredMetadata?: { issue?: unknown };
-  updatedAt?: string;
-}
-
-interface VolumeInformationProps {
-  data: VolumeInformationData;
-  onReconcile?: () => void;
-}
-
-/** Sources stored under `sourcedMetadata` — excludes `inferredMetadata`, which is checked separately. */
-const SOURCED_METADATA_KEYS = [
-  "comicvine",
-  "locg",
-  "comicInfo",
-  "metron",
-  "gcd",
-];
-
-const SOURCE_LABELS: Record<string, string> = {
-  comicvine: "ComicVine",
-  locg: "League of Comic Geeks",
-  comicInfo: "ComicInfo.xml",
-  metron: "Metron",
-  gcd: "Grand Comics Database",
-  inferredMetadata: "Local File",
-};
-
-const SOURCE_ICONS: Record<string, string> = {
-  comicvine: "icon-[solar--database-bold]",
-  locg: "icon-[solar--users-group-rounded-outline]",
-  comicInfo: "icon-[solar--file-text-outline]",
-  metron: "icon-[solar--planet-outline]",
-  gcd: "icon-[solar--book-outline]",
-  inferredMetadata: "icon-[solar--folder-outline]",
-};
-
-const MetadataSourceChips = ({
-  sources,
-}: {
-  sources: string[];
-}): ReactElement => {
-  const [isSheetOpen, setSheetOpen] = useState(false);
-
-  return (
-    <>
-      <div className="flex flex-col gap-2 mb-5 p-3 w-fit">
-        <div className="flex flex-row items-center justify-between">
-          <span className="text-md text-slate-500 dark:text-slate-400">
-            <i className="icon-[solar--database-outline] w-4 h-4 inline-block align-middle mr-1" />
-            {sources.length} metadata sources detected
-          </span>
-        </div>
-        <div className="flex flex-row flex-wrap gap-2">
-          {sources.map((source) => (
-            <span
-              key={source}
-              className="inline-flex items-center gap-1 bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 text-xs font-medium px-2 py-1 rounded-md border border-slate-200 dark:border-slate-600"
-            >
-              <i
-                className={`${SOURCE_ICONS[source] ?? "icon-[solar--check-circle-outline]"} w-3 h-3`}
-              />
-              {SOURCE_LABELS[source] ?? source}
-            </span>
-          ))}
-        </div>
-      </div>
-      <button
-        className="flex space-x-1 mb-2 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-2 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
-        onClick={() => setSheetOpen(true)}
-      >
-        <i className="icon-[solar--refresh-outline] w-4 h-4 px-3" />
-        Reconcile sources
-      </button>
-
-      <Drawer.Root open={isSheetOpen} onOpenChange={setSheetOpen}>
-        <Drawer.Portal>
-          <Drawer.Overlay className="fixed inset-0 bg-black/40" />
-          <Drawer.Content aria-describedby={undefined} className="fixed bottom-0 left-0 right-0 rounded-t-2xl bg-white dark:bg-slate-800 p-4 outline-none">
-            <Drawer.Title className="sr-only">Reconcile metadata sources</Drawer.Title>
-            <div className="mx-auto mb-4 h-1.5 w-12 rounded-full bg-slate-300 dark:bg-slate-600" />
-            <div className="p-4">
-              {/* Reconciliation UI goes here */}
-            </div>
-          </Drawer.Content>
-        </Drawer.Portal>
-      </Drawer.Root>
-    </>
-  );
-};
-
-/**
- * Displays volume metadata for a comic.
- *
- * - When multiple sources are present, renders a chip bar listing each source
- *   with a "Reconcile sources" action to merge them.
- * - When exactly one source is present and it is ComicVine, renders the full
- *   ComicVine detail panel directly.
- *
- * @param props.data - Comic data containing sourced and inferred metadata.
- * @param props.onReconcile - Called when the user triggers source reconciliation.
- */
-export const VolumeInformation = (
-  props: VolumeInformationProps,
-): ReactElement => {
+export const VolumeInformation = (props): ReactElement => {
  const { data } = props;

-  const presentSources = useMemo(() => {
-    const sources = SOURCED_METADATA_KEYS.filter((key) => {
-      const val = (data?.sourcedMetadata ?? {})[key];
-      if (isNil(val) || isEmpty(val)) return false;
-      // locg returns an object even when empty; require at least one non-null value
-      if (key === "locg")
-        return Object.values(val as Record<string, unknown>).some(
-          (v) => !isNil(v) && v !== "",
-        );
-      return true;
-    });
-    if (
-      !isNil(data?.inferredMetadata?.issue) &&
-      !isEmpty(data?.inferredMetadata?.issue)
-    ) {
-      sources.push("inferredMetadata");
-    }
-    return sources;
-  }, [data?.sourcedMetadata, data?.inferredMetadata]);
-
  return (
    <div key={1}>
-      {presentSources.length > 1 && (
-        <MetadataSourceChips sources={presentSources} />
-      )}
-      {presentSources.length === 1 &&
-        data.sourcedMetadata?.comicvine?.volumeInformation && (
-          <ComicVineDetails
-            data={data.sourcedMetadata.comicvine}
-            updatedAt={data.updatedAt}
-          />
-        )}
+      <ComicVineDetails
+        data={data.sourcedMetadata.comicvine}
+        updatedAt={data.updatedAt}
+      />
    </div>
  );
 };
--- a/src/client/components/ComicDetail/tabConfig.tsx
+++ b/src/client/components/ComicDetail/tabConfig.tsx
@@ -2,6 +2,7 @@ import React, { lazy } from "react";
 import { isNil, isEmpty } from "lodash";

 const VolumeInformation = lazy(() => import("./Tabs/VolumeInformation").then(m => ({ default: m.VolumeInformation })));
+const ComicInfoXML = lazy(() => import("./Tabs/ComicInfoXML").then(m => ({ default: m.ComicInfoXML })));
 const ArchiveOperations = lazy(() => import("./Tabs/ArchiveOperations").then(m => ({ default: m.ArchiveOperations })));
 const AcquisitionPanel = lazy(() => import("./AcquisitionPanel"));
 const TorrentSearchPanel = lazy(() => import("./TorrentSearchPanel"));
@@ -17,26 +18,26 @@ interface TabConfig {

 interface TabConfigParams {
  data: any;
-  hasAnyMetadata: boolean;
+  comicInfo: any;
+  isComicBookMetadataAvailable: boolean;
  areRawFileDetailsAvailable: boolean;
  airDCPPQuery: any;
  comicObjectId: string;
  userSettings: any;
  issueName: string;
  acquisition?: any;
-  onReconcileMetadata?: () => void;
 }

 export const createTabConfig = ({
  data,
-  hasAnyMetadata,
+  comicInfo,
+  isComicBookMetadataAvailable,
  areRawFileDetailsAvailable,
  airDCPPQuery,
  comicObjectId,
  userSettings,
  issueName,
  acquisition,
-  onReconcileMetadata,
 }: TabConfigParams): TabConfig[] => {
  return [
    {
@@ -45,10 +46,23 @@ export const createTabConfig = ({
      icon: (
        <i className="h-5 w-5 icon-[solar--book-2-bold] text-slate-500 dark:text-slate-300"></i>
      ),
-      content: hasAnyMetadata ? (
-        <VolumeInformation data={data} onReconcile={onReconcileMetadata} />
+      content: isComicBookMetadataAvailable ? (
+        <VolumeInformation data={data} key={1} />
      ) : null,
-      shouldShow: hasAnyMetadata,
+      shouldShow: isComicBookMetadataAvailable,
+    },
+    {
+      id: 2,
+      name: "ComicInfo.xml",
+      icon: (
+        <i className="h-5 w-5 icon-[solar--code-file-bold-duotone] text-slate-500 dark:text-slate-300" />
+      ),
+      content: (
+        <div key={2}>
+          {!isNil(comicInfo) && <ComicInfoXML json={comicInfo} />}
+        </div>
+      ),
+      shouldShow: !isEmpty(comicInfo),
    },
    {
      id: 3,
@@ -56,7 +70,7 @@ export const createTabConfig = ({
        <i className="h-5 w-5 icon-[solar--winrar-bold-duotone] text-slate-500 dark:text-slate-300" />
      ),
      name: "Archive Operations",
-      content: <ArchiveOperations data={data} />,
+      content: <ArchiveOperations data={data} key={3} />,
      shouldShow: areRawFileDetailsAvailable,
    },
    {
@@ -71,6 +85,7 @@ export const createTabConfig = ({
          comicObjectId={comicObjectId}
          comicObject={data}
          settings={userSettings}
+          key={4}
        />
      ),
      shouldShow: true,
@@ -97,7 +112,7 @@ export const createTabConfig = ({
      ),
      content:
        !isNil(data) && !isEmpty(data) ? (
-          <DownloadsPanel />
+          <DownloadsPanel key={5} />
        ) : (
          <div className="column is-three-fifths">
            <article className="message is-info">
--- a/src/client/components/Dashboard/LibraryStatistics.tsx
+++ b/src/client/components/Dashboard/LibraryStatistics.tsx
@@ -1,105 +1,105 @@
 import React, { ReactElement } from "react";
+import { isEmpty, isUndefined, map } from "lodash";
 import Header from "../shared/Header";
-import { GetLibraryStatisticsQuery, DirectorySize } from "../../graphql/generated";
+import { GetLibraryStatisticsQuery } from "../../graphql/generated";

-type Stats = Omit<GetLibraryStatisticsQuery["getLibraryStatistics"], "comicDirectorySize"> & {
-  comicDirectorySize: DirectorySize;
-  comicsMissingFiles: number;
+type LibraryStatisticsProps = {
+  stats: GetLibraryStatisticsQuery['getLibraryStatistics'];
 };

-/** Props for {@link LibraryStatistics}. */
-interface LibraryStatisticsProps {
-  stats: Stats | null | undefined;
-}
-
-/**
- * Displays a snapshot of library metrics: total comic files, tagging coverage,
- * file-type breakdown, and the publisher with the most issues.
- *
- * Returns `null` when `stats` is absent or the statistics array is empty.
- */
-export const LibraryStatistics = ({ stats }: LibraryStatisticsProps): ReactElement | null => {
-  if (!stats || !stats.totalDocuments) return null;
-
-  const facet = stats.statistics?.[0];
-  if (!facet) return null;
-
-  const { issues, issuesWithComicInfoXML, fileTypes, publisherWithMostComicsInLibrary } = facet;
-  const topPublisher = publisherWithMostComicsInLibrary?.[0];
-
+export const LibraryStatistics = (
+  props: LibraryStatisticsProps,
+): ReactElement => {
+  const { stats } = props;
  return (
    <div className="mt-5">
      <Header
        headerContent="Your Library In Numbers"
-        subHeaderContent={<span className="text-md">A brief snapshot of your library.</span>}
+        subHeaderContent={
+          <span className="text-md">A brief snapshot of your library.</span>
+        }
        iconClassNames="fa-solid fa-binoculars mr-2"
      />

-      <div className="mt-3 flex flex-row gap-5">
-        {/* Total records in database */}
-        <div className="flex flex-col rounded-lg bg-card-info px-4 py-6 text-center">
-          <dt className="text-lg font-medium text-gray-500">In database</dt>
-          <dd className="text-3xl text-gray-700 md:text-5xl">
-            {stats.totalDocuments} comics
-          </dd>
-        </div>
-
-        {/* Missing files */}
-        <div className="flex flex-col rounded-lg bg-card-missing px-4 py-6 text-center">
-          <dt className="text-lg font-medium text-gray-500">Missing files</dt>
-          <dd className="text-3xl text-red-600 md:text-5xl">
-            {stats.comicsMissingFiles}
-          </dd>
-        </div>
-
-        {/* Disk space consumed */}
-        {stats.comicDirectorySize.totalSizeInGB != null && (
-          <div className="flex flex-col rounded-lg bg-card-info px-4 py-6 text-center">
-            <dt className="text-lg font-medium text-gray-500">Size on disk</dt>
-            <dd className="text-3xl text-gray-700 md:text-5xl">
-              {stats.comicDirectorySize.totalSizeInGB.toFixed(2)} GB
+      <div className="mt-3">
+        <div className="flex flex-row gap-5">
+          <div className="flex flex-col rounded-lg bg-green-100 dark:bg-green-200 px-4 py-6 text-center">
+            <dt className="text-lg font-medium text-gray-500">Library size</dt>
+            <dd className="text-3xl text-green-600 md:text-5xl">
+              {props.stats.totalDocuments} files
            </dd>
+            {props.stats.comicDirectorySize?.fileCount && (
+              <dd>
+                <span className="text-2xl text-green-600">
+                  {props.stats.comicDirectorySize.fileCount} comic files
+                </span>
+              </dd>
+            )}
+          </div>
+          {/* comicinfo and comicvine tagged issues */}
+          <div className="flex flex-col gap-4">
+            {!isUndefined(props.stats.statistics) &&
+              !isEmpty(props.stats.statistics?.[0]?.issues) && (
+                <div className="flex flex-col h-fit rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3 text-center">
+                  <span className="text-xl">
+                    {props.stats.statistics?.[0]?.issues?.length || 0}
+                  </span>{" "}
+                  tagged with ComicVine
+                </div>
+              )}
+            {!isUndefined(props.stats.statistics) &&
+              !isEmpty(props.stats.statistics?.[0]?.issuesWithComicInfoXML) && (
+                <div className="flex flex-col h-fit rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3 text-center">
+                  <span className="text-xl">
+                    {props.stats.statistics?.[0]?.issuesWithComicInfoXML?.length || 0}
+                  </span>{" "}
+                  <span className="tag is-warning has-text-weight-bold mr-2 ml-1">
+                    with ComicInfo.xml
+                  </span>
+                </div>
+              )}
          </div>
-        )}

-        {/* Tagging coverage */}
-        <div className="flex flex-col gap-4">
-          {issues && issues.length > 0 && (
-            <div className="flex flex-col h-fit rounded-lg bg-card-info px-4 py-3 text-center">
-              <span className="text-xl text-gray-700">{issues.length}</span>
-              tagged with ComicVine
-            </div>
-          )}
-          {issuesWithComicInfoXML && issuesWithComicInfoXML.length > 0 && (
-            <div className="flex flex-col h-fit rounded-lg bg-card-info px-4 py-3 text-center">
-              <span className="text-xl text-gray-700">{issuesWithComicInfoXML.length}</span>
-              with ComicInfo.xml
-            </div>
-          )}
+          <div className="">
+            {!isUndefined(props.stats.statistics) &&
+              !isEmpty(props.stats.statistics?.[0]?.fileTypes) &&
+              map(props.stats.statistics?.[0]?.fileTypes, (fileType, idx) => {
+                return (
+                  <span
+                    key={idx}
+                    className="flex flex-col mb-4 h-fit text-xl rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3 text-center"
+                  >
+                    {fileType.data.length} {fileType.id}
+                  </span>
+                );
+              })}
+          </div>
+
+          {/* file types */}
+          <div className="flex flex-col h-fit text-lg rounded-lg bg-green-100 dark:bg-green-200 px-4 py-3">
+            {/* publisher with most issues */}
+            {!isUndefined(props.stats.statistics) &&
+              !isEmpty(
+                props.stats.statistics?.[0]?.publisherWithMostComicsInLibrary?.[0],
+              ) && (
+                <>
+                  <span className="">
+                    {
+                      props.stats.statistics?.[0]
+                        ?.publisherWithMostComicsInLibrary?.[0]?.id
+                    }
+                  </span>
+                  {" has the most issues "}
+                  <span className="">
+                    {
+                      props.stats.statistics?.[0]
+                        ?.publisherWithMostComicsInLibrary?.[0]?.count
+                    }
+                  </span>
+                </>
+              )}
+          </div>
        </div>
-
-        {/* File-type breakdown */}
-        {fileTypes && fileTypes.length > 0 && (
-          <div>
-            {fileTypes.map((ft) => (
-              <span
-                key={ft.id}
-                className="flex flex-col mb-4 h-fit text-xl rounded-lg bg-card-info px-4 py-3 text-center text-gray-700"
-              >
-                {ft.data.length} {ft.id}
-              </span>
-            ))}
-          </div>
-        )}
-
-        {/* Publisher with most issues */}
-        {topPublisher && (
-          <div className="flex flex-col h-fit text-lg rounded-lg bg-card-info px-4 py-3 text-gray-700">
-            <span>{topPublisher.id}</span>
-            {" has the most issues "}
-            <span>{topPublisher.count}</span>
-          </div>
-        )}
      </div>
    </div>
  );
--- a/src/client/components/Dashboard/RecentlyImported.tsx
+++ b/src/client/components/Dashboard/RecentlyImported.tsx
@@ -42,7 +42,6 @@ export const RecentlyImported = (
              sourcedMetadata,
              canonicalMetadata,
              inferredMetadata,
-              importStatus,
            } = comic;

            // Parse sourced metadata (GraphQL returns as strings)
@@ -64,10 +63,7 @@ export const RecentlyImported = (
              !isUndefined(comicvine) &&
              !isUndefined(comicvine.volumeInformation);
            const hasComicInfo = !isNil(comicInfo) && !isEmpty(comicInfo);
-            const isMissingFile = importStatus?.isRawFileMissing === true;
-            const cardState = isMissingFile
-              ? "missing"
-              : (hasComicInfo || isComicVineMetadataAvailable) ? "scraped" : "imported";
+            const cardState = (hasComicInfo || isComicVineMetadataAvailable) ? "scraped" : "imported";
            return (
              <div
                key={idx}
@@ -131,6 +127,12 @@ export const RecentlyImported = (
                      </span>
                    )}
                  </div>
+                  {/* Raw file presence  */}
+                  {isNil(rawFileDetails) && (
+                    <span className="h-6 w-5 sm:shrink-0 sm:items-center sm:gap-2">
+                      <i className="icon-[solar--file-corrupted-outline] h-5 w-5" />
+                    </span>
+                  )}
                </div>
              </Card>
              </div>
--- a/src/client/components/Dashboard/VolumeGroups.tsx
+++ b/src/client/components/Dashboard/VolumeGroups.tsx
@@ -11,11 +11,9 @@ type VolumeGroupsProps = {
  volumeGroups?: GetVolumeGroupsQuery['getComicBookGroups'];
 };

-export const VolumeGroups = (props: VolumeGroupsProps): ReactElement | null => {
+export const VolumeGroups = (props: VolumeGroupsProps): ReactElement => {
  // Till mongo gives us back the deduplicated results with the ObjectId
  const deduplicatedGroups = unionBy(props.volumeGroups, "volumes.id");
-  if (!deduplicatedGroups || deduplicatedGroups.length === 0) return null;
-
  const navigate = useNavigate();
  const navigateToVolumes = (row: any) => {
    navigate(`/volumes/all`);
--- a/src/client/components/Dashboard/WantedComicsList.tsx
+++ b/src/client/components/Dashboard/WantedComicsList.tsx
@@ -15,9 +15,7 @@ type WantedComicsListProps = {

 export const WantedComicsList = ({
  comics,
-}: WantedComicsListProps): ReactElement | null => {
-  if (!comics || comics.length === 0) return null;
-
+}: WantedComicsListProps): ReactElement => {
  const navigate = useNavigate();

  // embla carousel
--- a/src/client/components/Import/Import.tsx
+++ b/src/client/components/Import/Import.tsx
@@ -1,17 +1,30 @@
-import { ReactElement, useEffect, useRef, useState } from "react";
+import React, { ReactElement, useCallback, useEffect, useState } from "react";
 import { format } from "date-fns";
-import { isEmpty } from "lodash";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { isEmpty, isNil, isUndefined } from "lodash";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useStore } from "../../store";
 import { useShallow } from "zustand/react/shallow";
 import axios from "axios";
-import { useGetJobResultStatisticsQuery } from "../../graphql/generated";
+import {
+  useGetJobResultStatisticsQuery,
+  useGetImportStatisticsQuery,
+  useStartIncrementalImportMutation
+} from "../../graphql/generated";
 import { RealTimeImportStats } from "./RealTimeImportStats";
 import { useImportSessionStatus } from "../../hooks/useImportSessionStatus";

-export const Import = (): ReactElement => {
-  const [importError, setImportError] = useState<string | null>(null);
+interface ImportProps {
+  path: string;
+}
+
+/**
+ * Import component for adding comics to the ThreeTwo library.
+ * Provides preview statistics, smart import, and queue management.
+ */
+export const Import = (props: ImportProps): ReactElement => {
  const queryClient = useQueryClient();
+  const [socketReconnectTrigger, setSocketReconnectTrigger] = useState(0);
+  const [importError, setImportError] = useState<string | null>(null);
  const { importJobQueue, getSocket, disconnectSocket } = useStore(
    useShallow((state) => ({
      importJobQueue: state.importJobQueue,
@@ -20,6 +33,30 @@ export const Import = (): ReactElement => {
    })),
  );

+  const { mutate: startIncrementalImport, isPending: isStartingImport } = useStartIncrementalImportMutation({
+    onSuccess: (data) => {
+      if (data.startIncrementalImport.success) {
+        importJobQueue.setStatus("running");
+        setImportError(null);
+      }
+    },
+    onError: (error: any) => {
+      console.error("Failed to start import:", error);
+      setImportError(error?.message || "Failed to start import. Please try again.");
+    },
+  });
+
+  const { mutate: initiateImport } = useMutation({
+    mutationFn: async () => {
+      const sessionId = localStorage.getItem("sessionId");
+      return await axios.request({
+        url: `http://localhost:3000/api/library/newImport`,
+        method: "POST",
+        data: { sessionId },
+      });
+    },
+  });
+
  // Force re-import mutation - re-imports all files regardless of import status
  const { mutate: forceReImport, isPending: isForceReImporting } = useMutation({
    mutationFn: async () => {
@@ -41,57 +78,101 @@ export const Import = (): ReactElement => {
    },
  });

-  const { data, isLoading, refetch } = useGetJobResultStatisticsQuery();
-
-  const importSession = useImportSessionStatus();
-  const hasActiveSession = importSession.isActive;
-  const wasComplete = useRef(false);
-
-  // React to importSession.isComplete rather than socket events — more reliable
-  // since it's derived from the actual GraphQL state, not a raw socket event.
-  useEffect(() => {
-    if (importSession.isComplete && !wasComplete.current) {
-      wasComplete.current = true;
-      // Small delay so the backend has time to commit job result stats
-      setTimeout(() => {
-        // Invalidate the cache to force a fresh fetch of job result statistics
-        queryClient.invalidateQueries({ queryKey: ["GetJobResultStatistics"] });
-        refetch();
-      }, 1500);
-      importJobQueue.setStatus("drained");
-    } else if (!importSession.isComplete) {
-      wasComplete.current = false;
+  const { data, isError, isLoading, refetch } = useGetJobResultStatisticsQuery();
+  
+  // Get import statistics to determine if Start Import button should be shown
+  const { data: importStats } = useGetImportStatisticsQuery(
+    {},
+    {
+      refetchOnWindowFocus: false,
+      refetchInterval: false,
    }
-  }, [importSession.isComplete, refetch, importJobQueue, queryClient]);
+  );
+
+  // Use custom hook for definitive import session status tracking
+  // NO POLLING - relies on Socket.IO events only
+  const importSession = useImportSessionStatus();
+
+  const hasActiveSession = importSession.isActive;
+
+  // Determine if we should show the Start Import button
+  const hasNewFiles = importStats?.getImportStatistics?.success &&
+    importStats.getImportStatistics.stats &&
+    importStats.getImportStatistics.stats.newFiles > 0;

-  // Listen to socket events to update Past Imports table in real-time
  useEffect(() => {
    const socket = getSocket("/");
-
-    const handleImportCompleted = () => {
-      console.log("[Import] IMPORT_SESSION_COMPLETED event - refreshing Past Imports");
-      // Small delay to ensure backend has committed the job results
-      setTimeout(() => {
-        queryClient.invalidateQueries({ queryKey: ["GetJobResultStatistics"] });
-      }, 1500);
+    const handleQueueDrained = () => refetch();
+    const handleCoverExtracted = () => refetch();
+    
+    const handleSessionStarted = () => {
+      importJobQueue.setStatus("running");
    };

-    const handleQueueDrained = () => {
-      console.log("[Import] LS_IMPORT_QUEUE_DRAINED event - refreshing Past Imports");
-      // Small delay to ensure backend has committed the job results
-      setTimeout(() => {
-        queryClient.invalidateQueries({ queryKey: ["GetJobResultStatistics"] });
-      }, 1500);
+    const handleSessionCompleted = () => {
+      refetch();
+      importJobQueue.setStatus("drained");
    };

-    socket.on("IMPORT_SESSION_COMPLETED", handleImportCompleted);
    socket.on("LS_IMPORT_QUEUE_DRAINED", handleQueueDrained);
+    socket.on("LS_COVER_EXTRACTED", handleCoverExtracted);
+    socket.on("IMPORT_SESSION_STARTED", handleSessionStarted);
+    socket.on("IMPORT_SESSION_COMPLETED", handleSessionCompleted);

    return () => {
-      socket.off("IMPORT_SESSION_COMPLETED", handleImportCompleted);
      socket.off("LS_IMPORT_QUEUE_DRAINED", handleQueueDrained);
+      socket.off("LS_COVER_EXTRACTED", handleCoverExtracted);
+      socket.off("IMPORT_SESSION_STARTED", handleSessionStarted);
+      socket.off("IMPORT_SESSION_COMPLETED", handleSessionCompleted);
    };
-  }, [getSocket, queryClient]);
+  }, [getSocket, refetch, importJobQueue, socketReconnectTrigger]);
+
+  /**
+   * Toggles import queue pause/resume state
+   */
+  const toggleQueue = (queueAction: string, queueStatus: string) => {
+    const socket = getSocket("/");
+    socket.emit(
+      "call",
+      "socket.setQueueStatus",
+      {
+        queueAction,
+        queueStatus,
+      },
+    );
+  };
+
+  /**
+   * Starts smart import with race condition prevention
+   */
+  const handleStartSmartImport = async () => {
+    // Clear any previous errors
+    setImportError(null);
+
+    // Check for active session before starting using definitive status
+    if (hasActiveSession) {
+      setImportError(
+        `Cannot start import: An import session "${importSession.sessionId}" is already active. Please wait for it to complete.`
+      );
+      return;
+    }
+
+    if (importJobQueue.status === "drained") {
+      localStorage.removeItem("sessionId");
+      disconnectSocket("/");
+      setTimeout(() => {
+        getSocket("/");
+        setSocketReconnectTrigger(prev => prev + 1);
+        setTimeout(() => {
+          const sessionId = localStorage.getItem("sessionId") || "";
+          startIncrementalImport({ sessionId });
+        }, 500);
+      }, 100);
+    } else {
+      const sessionId = localStorage.getItem("sessionId") || "";
+      startIncrementalImport({ sessionId });
+    }
+  };

  /**
   * Handles force re-import - re-imports all files to fix indexing issues
@@ -116,6 +197,7 @@ export const Import = (): ReactElement => {
        disconnectSocket("/");
        setTimeout(() => {
          getSocket("/");
+          setSocketReconnectTrigger(prev => prev + 1);
          setTimeout(() => {
            forceReImport();
          }, 500);
@@ -126,6 +208,54 @@ export const Import = (): ReactElement => {
    }
  };

+  /**
+   * Renders pause/resume controls based on queue status
+   */
+  const renderQueueControls = (status: string): ReactElement | null => {
+    switch (status) {
+      case "running":
+        return (
+          <div>
+            <button
+              className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+              onClick={() => {
+                toggleQueue("pause", "paused");
+                importJobQueue.setStatus("paused");
+              }}
+            >
+              <span className="text-md">Pause</span>
+              <span className="w-5 h-5">
+                <i className="h-5 w-5 icon-[solar--pause-bold]"></i>
+              </span>
+            </button>
+          </div>
+        );
+      case "paused":
+        return (
+          <div>
+            <button
+              className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+              onClick={() => {
+                toggleQueue("resume", "running");
+                importJobQueue.setStatus("running");
+              }}
+            >
+              <span className="text-md">Resume</span>
+              <span className="w-5 h-5">
+                <i className="h-5 w-5 icon-[solar--play-bold]"></i>
+              </span>
+            </button>
+          </div>
+        );
+
+      case "drained":
+        return null;
+
+      default:
+        return null;
+    }
+  };
+
  return (
    <div>
      <section>
@@ -197,10 +327,53 @@ export const Import = (): ReactElement => {
            </div>
          )}

-          {/* Force Re-Import Button - always shown when no import is running */}
-          {!hasActiveSession &&
-           (importJobQueue.status === "drained" || importJobQueue.status === undefined) && (
-            <div className="my-6 max-w-screen-lg">
+          {/* Active Session Warning */}
+          {hasActiveSession && !hasNewFiles && (
+            <div className="my-6 max-w-screen-lg rounded-lg border-s-4 border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20 p-4">
+              <div className="flex items-start gap-3">
+                <span className="w-6 h-6 text-yellow-600 dark:text-yellow-400 mt-0.5">
+                  <i className="h-6 w-6 icon-[solar--info-circle-bold]"></i>
+                </span>
+                <div className="flex-1">
+                  <p className="font-semibold text-yellow-800 dark:text-yellow-300">
+                    Import In Progress
+                  </p>
+                  <p className="text-sm text-yellow-700 dark:text-yellow-400 mt-1">
+                    An import session is currently active. New imports cannot be started until it completes.
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Import Action Buttons */}
+          <div className="my-6 max-w-screen-lg flex flex-col sm:flex-row gap-3">
+            {/* Start Smart Import Button - shown when there are new files, no active session, and no import is running */}
+            {hasNewFiles &&
+             !hasActiveSession &&
+             (importJobQueue.status === "drained" || importJobQueue.status === undefined) && (
+              <button
+                className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-5 py-3 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                onClick={handleStartSmartImport}
+                disabled={isStartingImport || hasActiveSession}
+              >
+                <span className="text-md font-medium">
+                  {isStartingImport
+                    ? "Starting Import..."
+                    : importStats?.getImportStatistics?.stats?.alreadyImported === 0
+                      ? `Start Import (${importStats?.getImportStatistics?.stats?.newFiles} files)`
+                      : `Start Incremental Import (${importStats?.getImportStatistics?.stats?.newFiles} new files)`
+                  }
+                </span>
+                <span className="w-6 h-6">
+                  <i className="h-6 w-6 icon-[solar--file-left-bold-duotone]"></i>
+                </span>
+              </button>
+            )}
+
+            {/* Force Re-Import Button - always shown when no import is running */}
+            {!hasActiveSession &&
+             (importJobQueue.status === "drained" || importJobQueue.status === undefined) && (
              <button
                className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-orange-400 dark:border-orange-200 bg-orange-200 px-5 py-3 text-gray-700 hover:bg-transparent hover:text-orange-600 focus:outline-none focus:ring active:text-orange-500 disabled:opacity-50 disabled:cursor-not-allowed"
                onClick={handleForceReImport}
@@ -214,8 +387,8 @@ export const Import = (): ReactElement => {
                  <i className="h-6 w-6 icon-[solar--refresh-bold-duotone]"></i>
                </span>
              </button>
-            </div>
-          )}
+            )}
+          </div>

          {/* Import activity is now shown in the RealTimeImportStats component above */}

--- a/src/client/components/Import/RealTimeImportStats.tsx
+++ b/src/client/components/Import/RealTimeImportStats.tsx
@@ -1,167 +1,93 @@
-import { ReactElement, useEffect, useState } from "react";
-import { Link } from "react-router-dom";
-import { useQueryClient } from "@tanstack/react-query";
+import React, { ReactElement, useEffect, useState } from "react";
 import {
  useGetImportStatisticsQuery,
-  useGetWantedComicsQuery,
-  useStartIncrementalImportMutation,
+  useStartIncrementalImportMutation
 } from "../../graphql/generated";
 import { useStore } from "../../store";
 import { useShallow } from "zustand/react/shallow";
 import { useImportSessionStatus } from "../../hooks/useImportSessionStatus";

 /**
- * Import statistics with card-based layout and progress bar.
- * Three states: pre-import (idle), importing (active), and post-import (complete).
- * Also surfaces missing files detected by the file watcher.
+ * Import statistics with card-based layout and progress bar
+ * Updates in real-time via the useImportSessionStatus hook
 */
 export const RealTimeImportStats = (): ReactElement => {
  const [importError, setImportError] = useState<string | null>(null);
-  const [detectedFile, setDetectedFile] = useState<string | null>(null);
-  const [socketImport, setSocketImport] = useState<{
-    active: boolean;
-    completed: number;
-    total: number;
-    failed: number;
-  } | null>(null);
-  const queryClient = useQueryClient();
-
  const { getSocket, disconnectSocket, importJobQueue } = useStore(
    useShallow((state) => ({
      getSocket: state.getSocket,
      disconnectSocket: state.disconnectSocket,
      importJobQueue: state.importJobQueue,
-    })),
+    }))
  );

-  const { data: importStats, isLoading } = useGetImportStatisticsQuery(
+  // Get filesystem statistics (new files vs already imported)
+  const { data: importStats, isLoading, refetch: refetchStats } = useGetImportStatisticsQuery(
    {},
-    { refetchOnWindowFocus: false, refetchInterval: false },
+    { refetchOnWindowFocus: false, refetchInterval: false }
  );

-  const stats = importStats?.getImportStatistics?.stats;
-
-  // File list for the detail panel — only fetched when there are missing files
-  const { data: missingComicsData } = useGetWantedComicsQuery(
-    {
-      paginationOptions: { limit: 3, page: 1 },
-      predicate: { "importStatus.isRawFileMissing": true },
-    },
-    {
-      refetchOnWindowFocus: false,
-      refetchInterval: false,
-      enabled: (stats?.missingFiles ?? 0) > 0,
-    },
-  );
-
-  const missingDocs = missingComicsData?.getComicBooks?.docs ?? [];
-
-  const getMissingComicLabel = (comic: any): string => {
-    const series =
-      comic.canonicalMetadata?.series?.value ??
-      comic.inferredMetadata?.issue?.name;
-    const issueNum =
-      comic.canonicalMetadata?.issueNumber?.value ??
-      comic.inferredMetadata?.issue?.number;
-    if (series && issueNum) return `${series} #${issueNum}`;
-    if (series) return series;
-    return comic.rawFileDetails?.name ?? comic.id;
-  };
-
+  // Get definitive import session status (handles Socket.IO events internally)
  const importSession = useImportSessionStatus();

-  const { mutate: startIncrementalImport, isPending: isStartingImport } =
-    useStartIncrementalImportMutation({
-      onSuccess: (data) => {
-        if (data.startIncrementalImport.success) {
-          importJobQueue.setStatus("running");
-          setImportError(null);
-        }
-      },
-      onError: (error: any) => {
-        setImportError(
-          error?.message || "Failed to start import. Please try again.",
-        );
-      },
-    });
+  const { mutate: startIncrementalImport, isPending: isStartingImport } = useStartIncrementalImportMutation({
+    onSuccess: (data) => {
+      if (data.startIncrementalImport.success) {
+        importJobQueue.setStatus("running");
+        setImportError(null);
+      }
+    },
+    onError: (error: any) => {
+      console.error("Failed to start import:", error);
+      setImportError(error?.message || "Failed to start import. Please try again.");
+    },
+  });

+  const stats = importStats?.getImportStatistics?.stats;
  const hasNewFiles = stats && stats.newFiles > 0;
-  const missingCount = stats?.missingFiles ?? 0;

-  // LS_LIBRARY_STATISTICS fires after every filesystem change and every import job completion.
-  // Invalidating GetImportStatistics covers: total files, imported, new files, and missing count.
-  // Invalidating GetWantedComics refreshes the missing file name list in the detail panel.
+  // Refetch filesystem stats when import completes
+  useEffect(() => {
+    if (importSession.isComplete && importSession.status === "completed") {
+      console.log("[RealTimeImportStats] Import completed, refetching filesystem stats");
+      refetchStats();
+      importJobQueue.setStatus("drained");
+    }
+  }, [importSession.isComplete, importSession.status, refetchStats, importJobQueue]);
+
+  // Listen to filesystem change events to refetch stats
  useEffect(() => {
    const socket = getSocket("/");

-    const handleStatsChange = () => {
-      queryClient.invalidateQueries({ queryKey: ["GetImportStatistics"] });
-      queryClient.invalidateQueries({ queryKey: ["GetWantedComics"] });
+    const handleFilesystemChange = () => {
+      refetchStats();
    };

-    const handleFileDetected = (payload: { filePath: string }) => {
-      handleStatsChange();
-      const name = payload.filePath.split("/").pop() ?? payload.filePath;
-      setDetectedFile(name);
-      setTimeout(() => setDetectedFile(null), 5000);
-    };
-
-    const handleImportStarted = () => {
-      setSocketImport({ active: true, completed: 0, total: 0, failed: 0 });
-    };
-
-    const handleCoverExtracted = (payload: {
-      completedJobCount: number;
-      totalJobCount: number;
-      importResult: unknown;
-    }) => {
-      setSocketImport((prev) => ({
-        active: true,
-        completed: payload.completedJobCount,
-        total: payload.totalJobCount,
-        failed: prev?.failed ?? 0,
-      }));
-    };
-
-    const handleCoverExtractionFailed = (payload: {
-      failedJobCount: number;
-      importResult: unknown;
-    }) => {
-      setSocketImport((prev) =>
-        prev ? { ...prev, failed: payload.failedJobCount } : null,
-      );
-    };
-
-    const handleQueueDrained = () => {
-      setSocketImport((prev) => (prev ? { ...prev, active: false } : null));
-      handleStatsChange();
-    };
-
-    socket.on("LS_LIBRARY_STATS", handleStatsChange);
-    socket.on("LS_FILES_MISSING", handleStatsChange);
-    socket.on("LS_FILE_DETECTED", handleFileDetected);
-    socket.on("LS_INCREMENTAL_IMPORT_STARTED", handleImportStarted);
-    socket.on("LS_COVER_EXTRACTED", handleCoverExtracted);
-    socket.on("LS_COVER_EXTRACTION_FAILED", handleCoverExtractionFailed);
-    socket.on("LS_IMPORT_QUEUE_DRAINED", handleQueueDrained);
+    // File system changes that affect import statistics
+    socket.on("LS_FILE_ADDED", handleFilesystemChange);
+    socket.on("LS_FILE_REMOVED", handleFilesystemChange);
+    socket.on("LS_FILE_CHANGED", handleFilesystemChange);
+    socket.on("LS_DIRECTORY_ADDED", handleFilesystemChange);
+    socket.on("LS_DIRECTORY_REMOVED", handleFilesystemChange);
+    socket.on("LS_LIBRARY_STATISTICS", handleFilesystemChange);

    return () => {
-      socket.off("LS_LIBRARY_STATS", handleStatsChange);
-      socket.off("LS_FILES_MISSING", handleStatsChange);
-      socket.off("LS_FILE_DETECTED", handleFileDetected);
-      socket.off("LS_INCREMENTAL_IMPORT_STARTED", handleImportStarted);
-      socket.off("LS_COVER_EXTRACTED", handleCoverExtracted);
-      socket.off("LS_COVER_EXTRACTION_FAILED", handleCoverExtractionFailed);
-      socket.off("LS_IMPORT_QUEUE_DRAINED", handleQueueDrained);
+      socket.off("LS_FILE_ADDED", handleFilesystemChange);
+      socket.off("LS_FILE_REMOVED", handleFilesystemChange);
+      socket.off("LS_FILE_CHANGED", handleFilesystemChange);
+      socket.off("LS_DIRECTORY_ADDED", handleFilesystemChange);
+      socket.off("LS_DIRECTORY_REMOVED", handleFilesystemChange);
+      socket.off("LS_LIBRARY_STATISTICS", handleFilesystemChange);
    };
-  }, [getSocket, queryClient]);
+  }, [getSocket, refetchStats]);

  const handleStartImport = async () => {
    setImportError(null);

+    // Check if import is already active using definitive status
    if (importSession.isActive) {
      setImportError(
-        `Cannot start import: An import session "${importSession.sessionId}" is already active. Please wait for it to complete.`,
+        `Cannot start import: An import session "${importSession.sessionId}" is already active. Please wait for it to complete.`
      );
      return;
    }
@@ -186,26 +112,24 @@ export const RealTimeImportStats = (): ReactElement => {
    return <div className="text-gray-500 dark:text-gray-400">Loading...</div>;
  }

+  // Determine button text based on whether there are already imported files
  const isFirstImport = stats.alreadyImported === 0;
  const buttonText = isFirstImport
    ? `Start Import (${stats.newFiles} files)`
    : `Start Incremental Import (${stats.newFiles} new files)`;

-  // Determine what to show in each card based on current phase
-  const sessionStats = importSession.stats;
-  const hasSessionStats = importSession.isActive && sessionStats !== null;
-
-  const totalFiles = stats.totalLocalFiles;
-  const importedCount = stats.alreadyImported;
-  const failedCount = hasSessionStats ? sessionStats!.filesFailed : 0;
-
-  const showProgressBar = socketImport !== null;
-  const socketProgressPct =
-    socketImport && socketImport.total > 0
-      ? Math.round((socketImport.completed / socketImport.total) * 100)
-      : 0;
-  const showFailedCard = hasSessionStats && failedCount > 0;
-  const showMissingCard = missingCount > 0;
+  // Calculate display statistics
+  const displayStats = importSession.isActive && importSession.stats
+    ? {
+        totalFiles: importSession.stats.filesQueued + stats.alreadyImported,
+        filesQueued: importSession.stats.filesQueued,
+        filesSucceeded: importSession.stats.filesSucceeded,
+      }
+    : {
+        totalFiles: stats.totalLocalFiles,
+        filesQueued: stats.newFiles,
+        filesSucceeded: stats.alreadyImported,
+      };

  return (
    <div className="space-y-6">
@@ -217,161 +141,89 @@ export const RealTimeImportStats = (): ReactElement => {
              <i className="h-6 w-6 icon-[solar--danger-circle-bold]"></i>
            </span>
            <div className="flex-1">
-              <p className="font-semibold text-red-800 dark:text-red-300">
-                Import Error
-              </p>
-              <p className="text-sm text-red-700 dark:text-red-400 mt-1">
-                {importError}
-              </p>
+              <p className="font-semibold text-red-800 dark:text-red-300">Import Error</p>
+              <p className="text-sm text-red-700 dark:text-red-400 mt-1">{importError}</p>
            </div>
            <button
              onClick={() => setImportError(null)}
              className="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200"
            >
-              <i className="h-5 w-5 icon-[solar--close-circle-bold]"></i>
+              <span className="w-5 h-5">
+                <i className="h-5 w-5 icon-[solar--close-circle-bold]"></i>
+              </span>
            </button>
          </div>
        </div>
      )}

-      {/* File detected toast */}
-      {detectedFile && (
-        <div className="rounded-lg border-l-4 border-blue-500 bg-blue-50 dark:bg-blue-900/20 p-3 flex items-center gap-3">
-          <i className="h-5 w-5 text-blue-600 dark:text-blue-400 icon-[solar--document-add-bold-duotone] shrink-0"></i>
-          <p className="text-sm text-blue-800 dark:text-blue-300 font-mono truncate">
-            New file detected: {detectedFile}
-          </p>
-        </div>
-      )}
-
-      {/* Start Import button — only when idle with new files */}
+      {/* Import Button - only show when there are new files and no active import */}
      {hasNewFiles && !importSession.isActive && (
        <button
          onClick={handleStartImport}
          disabled={isStartingImport}
-          className="flex items-center gap-2 rounded-lg bg-green-500 hover:bg-green-600 disabled:bg-gray-400 px-6 py-3 text-white font-medium transition-colors disabled:cursor-not-allowed"
+          className="w-full flex items-center justify-center gap-2 rounded-lg bg-green-500 hover:bg-green-600 disabled:bg-gray-400 px-6 py-3 text-white font-medium transition-colors disabled:cursor-not-allowed"
        >
-          <i className="h-6 w-6 icon-[solar--file-left-bold-duotone]"></i>
+          <span className="w-6 h-6">
+            <i className="h-6 w-6 icon-[solar--file-left-bold-duotone]"></i>
+          </span>
          <span>{isStartingImport ? "Starting Import..." : buttonText}</span>
        </button>
      )}

-      {/* Progress bar — shown while importing and once complete */}
-      {showProgressBar && (
-        <div className="space-y-1.5">
-          <div className="flex items-center justify-between text-sm">
-            <span className="font-medium text-gray-700 dark:text-gray-300">
-              {socketImport!.active
-                ? `Importing ${socketImport!.completed} / ${socketImport!.total}`
-                : `${socketImport!.completed} / ${socketImport!.total} imported`}
+      {/* Active Import Progress Bar */}
+      {importSession.isActive && (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              Importing {importSession.stats?.filesSucceeded || 0} / {importSession.stats?.filesQueued || 0}...
            </span>
-            <span className="font-semibold text-gray-900 dark:text-white">
-              {socketProgressPct}% complete
+            <span className="text-sm font-semibold text-gray-900 dark:text-white">
+              {Math.round(importSession.progress)}%
            </span>
          </div>
          <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 overflow-hidden">
            <div
              className="bg-blue-600 dark:bg-blue-500 h-3 rounded-full transition-all duration-300 relative"
-              style={{ width: `${socketProgressPct}%` }}
+              style={{ width: `${importSession.progress}%` }}
            >
-              {socketImport!.active && (
-                <div className="absolute inset-0 bg-linear-to-r from-transparent via-white/20 to-transparent animate-shimmer" />
-              )}
+              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-shimmer"></div>
            </div>
          </div>
        </div>
      )}

-      {/* Stats cards */}
-      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-        {/* Total files */}
-        <div
-          className="rounded-lg p-6 text-center"
-          style={{ backgroundColor: "#6b7280" }}
-        >
-          <div className="text-4xl font-bold text-white mb-2">{totalFiles}</div>
-          <div className="text-sm text-gray-200 font-medium">in import folder</div>
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        {/* Files Detected Card */}
+        <div className="rounded-lg p-6 text-center" style={{ backgroundColor: '#6b7280' }}>
+          <div className="text-4xl font-bold text-white mb-2">
+            {displayStats.totalFiles}
+          </div>
+          <div className="text-sm text-gray-200 font-medium">
+            files detected
+          </div>
        </div>

-        {/* Imported */}
-        <div
-          className="rounded-lg p-6 text-center"
-          style={{ backgroundColor: "#d8dab2" }}
-        >
+        {/* To Import Card */}
+        <div className="rounded-lg p-6 text-center" style={{ backgroundColor: '#60a5fa' }}>
+          <div className="text-4xl font-bold text-white mb-2">
+            {displayStats.filesQueued}
+          </div>
+          <div className="text-sm text-gray-100 font-medium">
+            to import
+          </div>
+        </div>
+
+        {/* Already Imported Card */}
+        <div className="rounded-lg p-6 text-center" style={{ backgroundColor: '#d8dab2' }}>
          <div className="text-4xl font-bold text-gray-800 mb-2">
-            {importedCount}
+            {displayStats.filesSucceeded}
          </div>
          <div className="text-sm text-gray-700 font-medium">
-            {importSession.isActive ? "imported so far" : "imported in database"}
+            already imported
          </div>
        </div>
-
-        {/* Failed — only shown after a session with failures */}
-        {showFailedCard && (
-          <div className="rounded-lg p-6 text-center bg-red-500">
-            <div className="text-4xl font-bold text-white mb-2">
-              {failedCount}
-            </div>
-            <div className="text-sm text-red-100 font-medium">failed</div>
-          </div>
-        )}
-
-        {/* Missing files — shown when watcher detects moved/deleted files */}
-        {showMissingCard && (
-          <div className="rounded-lg p-6 text-center bg-card-missing">
-            <div className="text-4xl font-bold text-slate-700 mb-2">
-              {missingCount}
-            </div>
-            <div className="text-sm text-slate-800 font-medium">missing</div>
-          </div>
-        )}
      </div>
-
-      {/* Missing files detail panel */}
-      {showMissingCard && (
-        <div className="rounded-lg border border-amber-300 bg-amber-50 dark:bg-amber-900/20 p-4">
-          <div className="flex items-start gap-3">
-            <i className="h-6 w-6 text-amber-600 dark:text-amber-400 mt-0.5 icon-[solar--danger-triangle-bold] shrink-0"></i>
-            <div className="flex-1 min-w-0">
-              <p className="font-semibold text-amber-800 dark:text-amber-300">
-                {missingCount} {missingCount === 1 ? "file" : "files"} missing
-              </p>
-              <p className="text-sm text-amber-700 dark:text-amber-400 mt-1">
-                These files were previously imported but can no longer be found
-                on disk. Move them back to restore access.
-              </p>
-              {missingDocs.length > 0 && (
-                <ul className="mt-2 space-y-1">
-                  {missingDocs.map((comic, i) => (
-                    <li
-                      key={i}
-                      className="text-xs text-amber-700 dark:text-amber-400 truncate"
-                    >
-                      {getMissingComicLabel(comic)} is missing
-                    </li>
-                  ))}
-                  {missingCount > 3 && (
-                    <li className="text-xs text-amber-600 dark:text-amber-500">
-                      and {missingCount - 3} more.
-                    </li>
-                  )}
-                </ul>
-              )}
-              <Link
-                to="/library?filter=missingFiles"
-                className="inline-flex items-center gap-1.5 mt-3 text-xs font-medium text-amber-800 dark:text-amber-300 underline underline-offset-2 hover:text-amber-600"
-              >
-                
-                <span className="underline">
-                  <i className="icon-[solar--file-corrupted-outline] w-4 h-4 px-3" />
-                  View Missing Files In Library
-                  <i className="icon-[solar--arrow-right-up-outline] w-3 h-3" />
-                </span>
-              </Link>
-            </div>
-          </div>
-        </div>
-      )}
    </div>
  );
 };
--- a/src/client/components/Library/Library.tsx
+++ b/src/client/components/Library/Library.tsx
@@ -1,5 +1,6 @@
-import React, { useMemo, ReactElement, useState } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import React, { useMemo, ReactElement, useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { useNavigate } from "react-router-dom";
 import { isEmpty, isNil, isUndefined } from "lodash";
 import MetadataPanel from "../shared/MetadataPanel";
 import T2Table from "../shared/T2Table";
@@ -11,130 +12,79 @@ import {
  useQueryClient,
 } from "@tanstack/react-query";
 import axios from "axios";
-import { format, parseISO } from "date-fns";
-import { useGetWantedComicsQuery } from "../../graphql/generated";
-
-type FilterOption = "all" | "missingFiles";
-
-interface SearchQuery {
-  query: Record<string, any>;
-  pagination: { size: number; from: number };
-  type: string;
-  trigger: string;
-}
-
-const FILTER_OPTIONS: { value: FilterOption; label: string }[] = [
-  { value: "all", label: "All Comics" },
-  { value: "missingFiles", label: "Missing Files" },
-];
+import { format, fromUnixTime, parseISO } from "date-fns";

 /**
- * Library page component. Displays a paginated, searchable table of all comics
- * in the collection, with an optional filter for comics with missing raw files.
+ * Component that tabulates the contents of the user's ThreeTwo Library.
+ *
+ * @component
+ * @example
+ * <Library />
 */
 export const Library = (): ReactElement => {
-  const [searchParams] = useSearchParams();
-  const initialFilter = (searchParams.get("filter") as FilterOption) ?? "all";
-
-  const [activeFilter, setActiveFilter] = useState<FilterOption>(initialFilter);
-  const [searchQuery, setSearchQuery] = useState<SearchQuery>({
+  // Default page state
+  // offset: 0
+  const [offset, setOffset] = useState(0);
+  const [searchQuery, setSearchQuery] = useState({
    query: {},
-    pagination: { size: 25, from: 0 },
+    pagination: {
+      size: 25,
+      from: offset,
+    },
    type: "all",
    trigger: "libraryPage",
  });
-
  const queryClient = useQueryClient();

-  /** Fetches a page of issues from the search API. */
-  const fetchIssues = async (q: SearchQuery) => {
-    const { pagination, query, type } = q;
+  /**
+   * Method that queries the Elasticsearch index "comics" for issues specified by the query
+   * @param searchQuery - A searchQuery object that contains the search term, type, and pagination params.
+   */
+  const fetchIssues = async (searchQuery) => {
+    const { pagination, query, type } = searchQuery;
    return await axios({
      method: "POST",
      url: "http://localhost:3000/api/search/searchIssue",
-      data: { query, pagination, type },
+      data: {
+        query,
+        pagination,
+        type,
+      },
    });
  };

-  const { data, isPlaceholderData } = useQuery({
-    queryKey: ["comics", searchQuery],
-    queryFn: () => fetchIssues(searchQuery),
-    placeholderData: keepPreviousData,
-    enabled: activeFilter === "all",
-  });
-
-  const { data: missingFilesData, isLoading: isMissingLoading } = useGetWantedComicsQuery(
-    {
-      paginationOptions: { limit: 25, page: 1 },
-      predicate: { "importStatus.isRawFileMissing": true },
-    },
-    { enabled: activeFilter === "missingFiles" },
-  );
-
-  const { data: missingIdsData } = useGetWantedComicsQuery(
-    {
-      paginationOptions: { limit: 1000, page: 1 },
-      predicate: { "importStatus.isRawFileMissing": true },
-    },
-    { enabled: activeFilter === "all" },
-  );
-
-  /** Set of comic IDs whose raw files are missing, used to highlight rows in the main table. */
-  const missingIdSet = useMemo(
-    () => new Set((missingIdsData?.getComicBooks?.docs ?? []).map((doc: any) => doc.id)),
-    [missingIdsData],
-  );
-
-  const searchResults = data?.data;
-  const navigate = useNavigate();
-
-  const navigateToComicDetail = (row: any) => navigate(`/comic/details/${row.original._id}`);
-  const navigateToMissingComicDetail = (row: any) => navigate(`/comic/details/${row.original.id}`);
-
-  /** Triggers a search by volume name and resets pagination. */
-  const searchIssues = (e: any) => {
+  const searchIssues = (e) => {
    queryClient.invalidateQueries({ queryKey: ["comics"] });
    setSearchQuery({
-      query: { volumeName: e.search },
-      pagination: { size: 15, from: 0 },
+      query: {
+        volumeName: e.search,
+      },
+      pagination: {
+        size: 15,
+        from: 0,
+      },
      type: "volumeName",
      trigger: "libraryPage",
    });
  };

-  /** Advances to the next page of results. */
-  const nextPage = (pageIndex: number, pageSize: number) => {
-    if (!isPlaceholderData) {
-      queryClient.invalidateQueries({ queryKey: ["comics"] });
-      setSearchQuery({
-        query: {},
-        pagination: { size: 15, from: pageSize * pageIndex + 1 },
-        type: "all",
-        trigger: "libraryPage",
-      });
-    }
+  const { data, isLoading, isError, isPlaceholderData } = useQuery({
+    queryKey: ["comics", offset, searchQuery],
+    queryFn: () => fetchIssues(searchQuery),
+    placeholderData: keepPreviousData,
+  });
+
+  const searchResults = data?.data;
+  // Programmatically navigate to comic detail
+  const navigate = useNavigate();
+  const navigateToComicDetail = (row) => {
+    navigate(`/comic/details/${row.original._id}`);
  };

-  /** Goes back to the previous page of results. */
-  const previousPage = (pageIndex: number, pageSize: number) => {
-    let from = 0;
-    if (pageIndex === 2) {
-      from = (pageIndex - 1) * pageSize + 2 - (pageSize + 2);
-    } else {
-      from = (pageIndex - 1) * pageSize + 2 - (pageSize + 1);
-    }
-    queryClient.invalidateQueries({ queryKey: ["comics"] });
-    setSearchQuery({
-      query: {},
-      pagination: { size: 15, from },
-      type: "all",
-      trigger: "libraryPage",
-    });
-  };
-
-  const ComicInfoXML = (value: any) =>
-    value.data ? (
+  const ComicInfoXML = (value) => {
+    return value.data ? (
      <dl className="flex flex-col text-xs sm:text-md p-2 sm:p-3 ml-0 sm:ml-4 my-3 rounded-lg dark:bg-yellow-500 bg-yellow-300 w-full sm:w-max max-w-full">
+        {/* Series Name */}
        <span className="inline-flex items-center w-fit bg-slate-50 text-slate-800 text-xs font-medium px-1.5 sm:px-2 rounded-md dark:text-slate-900 dark:bg-slate-400 max-w-full overflow-hidden">
          <span className="pr-0.5 sm:pr-1 pt-1">
            <i className="icon-[solar--bookmark-square-minimalistic-bold-duotone] w-4 h-4 sm:w-5 sm:h-5"></i>
@@ -144,6 +94,7 @@ export const Library = (): ReactElement => {
          </span>
        </span>
        <div className="flex flex-row flex-wrap mt-1 sm:mt-2 gap-1 sm:gap-2">
+          {/* Pages */}
          <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs px-1 sm:px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
            <span className="pr-0.5 sm:pr-1 pt-1">
              <i className="icon-[solar--notebook-minimalistic-bold-duotone] w-3.5 h-3.5 sm:w-5 sm:h-5"></i>
@@ -152,6 +103,7 @@ export const Library = (): ReactElement => {
              Pages: {value.data.pagecount[0]}
            </span>
          </span>
+          {/* Issue number */}
          <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs px-1 sm:px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
            <span className="pr-0.5 sm:pr-1 pt-1">
              <i className="icon-[solar--hashtag-outline] w-3 h-3 sm:w-3.5 sm:h-3.5"></i>
@@ -165,62 +117,30 @@ export const Library = (): ReactElement => {
        </div>
      </dl>
    ) : null;
-
-  const missingFilesColumns = useMemo(
-    () => [
-      {
-        header: "Missing Files",
-        columns: [
-          {
-            header: "Status",
-            id: "missingStatus",
-            cell: () => (
-              <div className="flex flex-col items-center gap-1.5 px-2 py-3 min-w-[80px]">
-                <i className="icon-[solar--file-corrupted-outline] w-8 h-8 text-red-500"></i>
-                <span className="inline-flex items-center rounded-md bg-red-100 px-2 py-1 text-xs font-semibold text-red-700 ring-1 ring-inset ring-red-600/20">
-                  MISSING
-                </span>
-              </div>
-            ),
-          },
-          {
-            header: "Comic",
-            id: "missingComic",
-            minWidth: 250,
-            accessorFn: (row: any) => row,
-            cell: (info: any) => <MetadataPanel data={info.getValue()} />,
-          },
-        ],
-      },
-    ],
-    [],
-  );
+  };

  const columns = useMemo(
    () => [
      {
        header: "Comic Metadata",
+        footer: 1,
        columns: [
          {
            header: "File Details",
            id: "fileDetails",
            minWidth: 250,
            accessorKey: "_source",
-            cell: (info: any) => {
-              const source = info.getValue();
-              return (
-                <MetadataPanel
-                  data={source}
-                  isMissing={missingIdSet.has(info.row.original._id)}
-                />
-              );
+            cell: (info) => {
+              return <MetadataPanel data={info.getValue()} />;
            },
          },
          {
            header: "ComicInfo.xml",
            accessorKey: "_source.sourcedMetadata.comicInfo",
-            cell: (info: any) =>
-              !isEmpty(info.getValue()) ? <ComicInfoXML data={info.getValue()} /> : null,
+            cell: (info) =>
+              !isEmpty(info.getValue()) ? (
+                <ComicInfoXML data={info.getValue()} />
+              ) : null,
          },
        ],
      },
@@ -230,30 +150,36 @@ export const Library = (): ReactElement => {
          {
            header: "Date of Import",
            accessorKey: "_source.createdAt",
-            cell: (info: any) =>
-              !isNil(info.getValue()) ? (
+            cell: (info) => {
+              return !isNil(info.getValue()) ? (
                <div className="text-sm w-max ml-3 my-3 text-slate-600 dark:text-slate-900">
-                  <p>{format(parseISO(info.getValue()), "dd MMMM, yyyy")}</p>
+                  <p>{format(parseISO(info.getValue()), "dd MMMM, yyyy")} </p>
                  {format(parseISO(info.getValue()), "h aaaa")}
                </div>
-              ) : null,
+              ) : null;
+            },
          },
          {
            header: "Downloads",
            accessorKey: "_source.acquisition",
-            cell: (info: any) => (
+            cell: (info) => (
              <div className="flex flex-col gap-2 ml-3 my-3">
-                <span className="inline-flex items-center w-fit bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400 whitespace-nowrap">
+                <span className="inline-flex items-center w-fit bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
                  <span className="pr-1 pt-1">
                    <i className="icon-[solar--folder-path-connect-bold-duotone] w-5 h-5"></i>
                  </span>
-                  DC++: {info.getValue().directconnect.downloads.length}
+                  <span className="text-md text-slate-900 dark:text-slate-900">
+                    DC++: {info.getValue().directconnect.downloads.length}
+                  </span>
                </span>
-                <span className="inline-flex items-center w-fit bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400 whitespace-nowrap">
+
+                <span className="inline-flex w-fit items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
                  <span className="pr-1 pt-1">
                    <i className="icon-[solar--magnet-bold-duotone] w-5 h-5"></i>
                  </span>
-                  Torrent: {info.getValue().torrent.length}
+                  <span className="text-md text-slate-900 dark:text-slate-900">
+                    Torrent: {info.getValue().torrent.length}
+                  </span>
                </span>
              </div>
            ),
@@ -261,99 +187,129 @@ export const Library = (): ReactElement => {
        ],
      },
    ],
-    [missingIdSet],
+    [],
  );

-  const FilterDropdown = () => (
-    <div className="relative">
-      <select
-        value={activeFilter}
-        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setActiveFilter(e.target.value as FilterOption)}
-        className="appearance-none h-full rounded-lg border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-700 pl-3 pr-8 py-1.5 text-sm text-gray-700 dark:text-slate-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500"
-      >
-        {FILTER_OPTIONS.map((opt) => (
-          <option key={opt.value} value={opt.value}>
-            {opt.label}
-          </option>
-        ))}
-      </select>
-      <i className="icon-[solar--alt-arrow-down-bold] absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500 dark:text-slate-400 pointer-events-none"></i>
-    </div>
-  );
+  /**
+   * Pagination control that fetches the next x (pageSize) items
+   * based on the y (pageIndex) offset from the ThreeTwo Elasticsearch index
+   * @param {number} pageIndex
+   * @param {number} pageSize
+   * @returns void
+   *
+   **/
+  const nextPage = (pageIndex: number, pageSize: number) => {
+    if (!isPlaceholderData) {
+      queryClient.invalidateQueries({ queryKey: ["comics"] });
+      setSearchQuery({
+        query: {},
+        pagination: {
+          size: 15,
+          from: pageSize * pageIndex + 1,
+        },
+        type: "all",
+        trigger: "libraryPage",
+      });
+      // setOffset(pageSize * pageIndex + 1);
+    }
+  };

-  const isMissingFilter = activeFilter === "missingFiles";
+  /**
+   * Pagination control that fetches the previous x (pageSize) items
+   * based on the y (pageIndex) offset from the ThreeTwo Elasticsearch index
+   * @param {number} pageIndex
+   * @param {number} pageSize
+   * @returns void
+   **/
+  const previousPage = (pageIndex: number, pageSize: number) => {
+    let from = 0;
+    if (pageIndex === 2) {
+      from = (pageIndex - 1) * pageSize + 2 - (pageSize + 2);
+    } else {
+      from = (pageIndex - 1) * pageSize + 2 - (pageSize + 1);
+    }
+    queryClient.invalidateQueries({ queryKey: ["comics"] });
+    setSearchQuery({
+      query: {},
+      pagination: {
+        size: 15,
+        from,
+      },
+      type: "all",
+      trigger: "libraryPage",
+    });
+    // setOffset(from);
+  };

+  // ImportStatus.propTypes = {
+  //   value: PropTypes.bool.isRequired,
+  // };
  return (
-    <section>
-      <header className="bg-slate-200 dark:bg-slate-500">
-        <div className="mx-auto max-w-screen-xl px-4 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
-          <div className="sm:flex sm:items-center sm:justify-between">
-            <div className="text-center sm:text-left">
-              <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
-                Library
-              </h1>
-              <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
-                Browse your comic book collection.
-              </p>
+    <div>
+      <section>
+        <header className="bg-slate-200 dark:bg-slate-500">
+          <div className="mx-auto max-w-screen-xl px-4 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
+            <div className="sm:flex sm:items-center sm:justify-between">
+              <div className="text-center sm:text-left">
+                <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
+                  Library
+                </h1>
+
+                <p className="mt-1.5 text-sm text-gray-500 dark:text-white">
+                  Browse your comic book collection.
+                </p>
+              </div>
            </div>
          </div>
-        </div>
-      </header>
-
-      {isMissingFilter ? (
-        <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
-          {isMissingLoading ? (
-            <div className="text-gray-500 dark:text-gray-400">Loading...</div>
-          ) : (
-            <T2Table
-              totalPages={missingFilesData?.getComicBooks?.totalDocs ?? 0}
-              columns={missingFilesColumns}
-              sourceData={missingFilesData?.getComicBooks?.docs ?? []}
-              rowClickHandler={navigateToMissingComicDetail}
-              getRowClassName={() => "bg-card-missing/40 hover:bg-card-missing/20"}
-              paginationHandlers={{ nextPage: () => {}, previousPage: () => {} }}
-            >
-              <FilterDropdown />
-            </T2Table>
-          )}
-        </div>
-      ) : !isUndefined(searchResults?.hits) ? (
-        <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
-          <T2Table
-            totalPages={searchResults.hits.total.value}
-            columns={columns}
-            sourceData={searchResults?.hits.hits}
-            rowClickHandler={navigateToComicDetail}
-            getRowClassName={(row) =>
-              missingIdSet.has(row.original._id)
-                ? "bg-card-missing/40 hover:bg-card-missing/20"
-                : "hover:bg-slate-100/30 dark:hover:bg-slate-700/20"
-            }
-            paginationHandlers={{ nextPage, previousPage }}
-          >
-            <div className="flex items-center gap-2">
-              <FilterDropdown />
-              <SearchBar searchHandler={(e: any) => searchIssues(e)} />
-            </div>
-          </T2Table>
-        </div>
-      ) : (
-        <div className="mx-auto max-w-screen-xl mt-5">
-          <article
-            role="alert"
-            className="rounded-lg max-w-screen-md border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600"
-          >
+        </header>
+        {!isUndefined(searchResults?.hits) ? (
+          <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
            <div>
-              <p>
-                No comics were found in the library, Elasticsearch reports no indices. Try
-                importing a few comics into the library and come back.
-              </p>
+              <T2Table
+                totalPages={searchResults.hits.total.value}
+                columns={columns}
+                sourceData={searchResults?.hits.hits}
+                rowClickHandler={navigateToComicDetail}
+                paginationHandlers={{
+                  nextPage,
+                  previousPage,
+                }}
+              >
+                <SearchBar searchHandler={(e) => searchIssues(e)} />
+              </T2Table>
            </div>
-          </article>
-          <FilterDropdown />
-        </div>
-      )}
-    </section>
+          </div>
+        ) : (
+          <div className="mx-auto max-w-screen-xl mt-5">
+            <article
+              role="alert"
+              className="rounded-lg max-w-screen-md border-s-4 border-yellow-500 bg-yellow-50 p-4 dark:border-s-4 dark:border-yellow-600 dark:bg-yellow-300 dark:text-slate-600"
+            >
+              <div>
+                <p>
+                  No comics were found in the library, Elasticsearch reports no
+                  indices. Try importing a few comics into the library and come
+                  back.
+                </p>
+              </div>
+            </article>
+            <div className="block max-w-md p-6 bg-white border border-gray-200 my-3 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
+              <pre className="text-sm font-hasklig text-slate-700 dark:text-slate-700">
+                {!isUndefined(searchResults?.data?.meta?.body) ? (
+                  <p>
+                    {JSON.stringify(
+                      searchResults?.data.meta.body.error.root_cause,
+                      null,
+                      4,
+                    )}
+                  </p>
+                ) : null}
+              </pre>
+            </div>
+          </div>
+        )}
+      </section>
+    </div>
  );
 };

--- a/src/client/components/shared/Carda.tsx
+++ b/src/client/components/shared/Carda.tsx
@@ -10,7 +10,7 @@ interface ICardProps {
  children?: PropTypes.ReactNodeLike;
  borderColorClass?: string;
  backgroundColor?: string;
-  cardState?: "wanted" | "delete" | "scraped" | "uncompressed" | "imported" | "missing";
+  cardState?: "wanted" | "delete" | "scraped" | "uncompressed" | "imported";
  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
  cardContainerStyle?: React.CSSProperties;
  imageStyle?: React.CSSProperties;
@@ -28,8 +28,6 @@ const getCardStateClass = (cardState?: string): string => {
      return "bg-card-uncompressed";
    case "imported":
      return "bg-card-imported";
-    case "missing":
-      return "bg-card-missing";
    default:
      return "";
  }
@@ -104,22 +102,11 @@ const renderCard = (props: ICardProps): ReactElement => {
    case "vertical-2":
      return (
        <div className={`block rounded-md max-w-64 h-fit shadow-md shadow-white-400 ${getCardStateClass(props.cardState) || "bg-gray-200 dark:bg-slate-500"}`}>
-          <div className="relative">
-            {props.imageUrl ? (
-              <img
-                alt="Home"
-                src={props.imageUrl}
-                className="rounded-t-md object-cover"
-              />
-            ) : (
-              <div className="rounded-t-md h-48 bg-gray-100 dark:bg-slate-600" />
-            )}
-            {props.cardState === "missing" && (
-              <div className="absolute inset-0 flex items-center justify-center rounded-t-md bg-card-missing/70">
-                <i className="icon-[solar--file-corrupted-outline] w-16 h-16 text-red-500" />
-              </div>
-            )}
-          </div>
+          <img
+            alt="Home"
+            src={props.imageUrl}
+            className="rounded-t-md object-cover"
+          />

          {props.title ? (
            <div className="px-3 pt-3 mb-2">
--- a/src/client/components/shared/MetadataPanel.tsx
+++ b/src/client/components/shared/MetadataPanel.tsx
@@ -8,17 +8,14 @@ import { determineCoverFile } from "../../shared/utils/metadata.utils";
 import { find, isUndefined } from "lodash";

 interface IMetadatPanelProps {
-  data: any;
-  value?: any;
-  children?: any;
-  imageStyle?: any;
-  titleStyle?: any;
-  tagsStyle?: any;
-  containerStyle?: any;
-  isMissing?: boolean;
+  value: any;
+  children: any;
+  imageStyle: any;
+  titleStyle: any;
+  tagsStyle: any;
+  containerStyle: any;
 }
 export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
-  const { isMissing = false } = props;
  const {
    rawFileDetails,
    inferredMetadata,
@@ -34,10 +31,8 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
    {
      name: "rawFileDetails",
      content: () => (
-        <dl
-          className={`${isMissing ? "bg-card-missing dark:bg-card-missing" : "bg-card-imported dark:bg-card-imported"} dark:text-slate-800 p-2 sm:p-3 rounded-lg`}
-        >
-          <dt className="flex items-center gap-2">
+        <dl className="dark:bg-card-imported bg-card-imported dark:text-slate-800 p-2 sm:p-3 rounded-lg">
+          <dt>
            <p className="text-sm sm:text-lg">{issueName}</p>
          </dt>
          <dd className="text-xs sm:text-sm">
@@ -63,35 +58,26 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
          )}
          <dd className="flex flex-row flex-wrap gap-1 sm:gap-2 w-full sm:w-max">
            {/* File extension */}
-            {rawFileDetails.mimeType && (
-              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-1.5 sm:px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                <span className="pr-1 pt-1">
-                  <i className="icon-[solar--zip-file-bold-duotone] w-4 h-4 sm:w-5 sm:h-5"></i>
-                </span>
-                <span className="text-xs sm:text-md text-slate-500 dark:text-slate-900">
-                  {rawFileDetails.mimeType}
-                </span>
+            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-1.5 sm:px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+              <span className="pr-1 pt-1">
+                <i className="icon-[solar--zip-file-bold-duotone] w-4 h-4 sm:w-5 sm:h-5"></i>
              </span>
-            )}
+
+              <span className="text-xs sm:text-md text-slate-500 dark:text-slate-900">
+                {rawFileDetails.mimeType}
+              </span>
+            </span>

            {/* size */}
-            {rawFileDetails.fileSize != null && (
-              <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-1.5 sm:px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                <span className="pr-1 pt-1">
-                  <i className="icon-[solar--database-bold-duotone] w-4 h-4 sm:w-5 sm:h-5"></i>
-                </span>
-                <span className="text-xs sm:text-md text-slate-500 dark:text-slate-900">
-                  {prettyBytes(rawFileDetails.fileSize)}
-                </span>
+            <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-1.5 sm:px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+              <span className="pr-1 pt-1">
+                <i className="icon-[solar--mirror-right-bold-duotone] w-4 h-4 sm:w-5 sm:h-5"></i>
              </span>
-            )}

-            {/* Missing file Icon */}
-            {isMissing && (
-              <span className="pr-2 pt-1" title="File backing this comic is missing">
-                <i className="icon-[solar--file-corrupted-outline] w-5 h-5 text-red-600 shrink-0"></i>
+              <span className="text-xs sm:text-md text-slate-500 dark:text-slate-900">
+                {prettyBytes(rawFileDetails.fileSize)}
              </span>
-            )}
+            </span>

            {/* Uncompressed version available? */}
            {rawFileDetails.archive?.uncompressed && (
@@ -191,6 +177,7 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
  const metadataPanel = find(metadataContentPanel, {
    name: objectReference,
  });
+
  return (
    <div className="flex flex-col sm:flex-row gap-3 sm:gap-5 my-3">
      <div className="w-32 sm:w-56 lg:w-52 shrink-0">
@@ -201,7 +188,7 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
          imageStyle={props.imageStyle}
        />
      </div>
-      <div className="flex-1">{metadataPanel?.content()}</div>
+      <div className="flex-1">{metadataPanel.content()}</div>
    </div>
  );
 };
--- a/src/client/components/shared/T2Table.tsx
+++ b/src/client/components/shared/T2Table.tsx
@@ -1,89 +1,69 @@
-import React, { ReactElement, ReactNode, useMemo, useState, useRef, useEffect, useLayoutEffect } from "react";
+import React, { ReactElement, useMemo, useState } from "react";
 import {
  ColumnDef,
-  Row,
  flexRender,
  getCoreRowModel,
+  getFilteredRowModel,
  useReactTable,
  PaginationState,
 } from "@tanstack/react-table";

-/** Props for {@link T2Table}. */
-interface T2TableProps<TData> {
-  /** Row data to render. */
-  sourceData?: TData[];
-  /** Total number of records across all pages, used for pagination display. */
+interface T2TableProps {
+  sourceData?: unknown[];
  totalPages?: number;
-  /** Column definitions (TanStack Table {@link ColumnDef} array). */
-  columns?: ColumnDef<TData>[];
-  /** Callbacks for navigating between pages. */
+  columns?: unknown[];
  paginationHandlers?: {
-    nextPage?(pageIndex: number, pageSize: number): void;
-    previousPage?(pageIndex: number, pageSize: number): void;
+    nextPage?(...args: unknown[]): unknown;
+    previousPage?(...args: unknown[]): unknown;
  };
-  /** Called with the TanStack row object when a row is clicked. */
-  rowClickHandler?(row: Row<TData>): void;
-  /** Returns additional CSS classes for a given row (e.g. for highlight states). */
-  getRowClassName?(row: Row<TData>): string;
-  /** Optional slot rendered in the toolbar area (e.g. a search input). */
-  children?: ReactNode;
+  rowClickHandler?(...args: unknown[]): unknown;
+  children?: any;
 }

-/**
- * A paginated data table with a two-row sticky header.
- *
- * Header stickiness is detected via {@link IntersectionObserver} on a sentinel
- * element placed immediately before the table. The second header row's `top`
- * offset is measured at mount time so both rows stay flush regardless of font
- * size or padding changes.
- */
-export const T2Table = <TData,>({
-  sourceData = [],
-  columns = [],
-  paginationHandlers: { nextPage, previousPage } = {},
-  totalPages = 0,
-  rowClickHandler,
-  getRowClassName,
-  children,
-}: T2TableProps<TData>): ReactElement => {
-  const sentinelRef = useRef<HTMLDivElement>(null);
-  const firstHeaderRowRef = useRef<HTMLTableRowElement>(null);
-  const [isSticky, setIsSticky] = useState(false);
-  const [firstRowHeight, setFirstRowHeight] = useState(0);
-
-  useEffect(() => {
-    const sentinel = sentinelRef.current;
-    if (!sentinel) return;
-    const observer = new IntersectionObserver(
-      ([entry]) => setIsSticky(!entry.isIntersecting),
-      { threshold: 0 },
-    );
-    observer.observe(sentinel);
-    return () => observer.disconnect();
-  }, []);
-
-  useLayoutEffect(() => {
-    if (firstHeaderRowRef.current)
-      setFirstRowHeight(firstHeaderRowRef.current.getBoundingClientRect().height);
-  }, []);
+export const T2Table = (tableOptions: T2TableProps): ReactElement => {
+  const {
+    sourceData,
+    columns,
+    paginationHandlers: { nextPage, previousPage },
+    totalPages,
+    rowClickHandler,
+  } = tableOptions;

  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
    pageIndex: 1,
    pageSize: 15,
  });

-  const pagination = useMemo(() => ({ pageIndex, pageSize }), [pageIndex, pageSize]);
+  const pagination = useMemo(
+    () => ({
+      pageIndex,
+      pageSize,
+    }),
+    [pageIndex, pageSize],
+  );

-  /** Advances to the next page and notifies the parent. */
+  /**
+   * Pagination control to move forward one page
+   * @returns void
+   */
  const goToNextPage = () => {
-    setPagination({ pageIndex: pageIndex + 1, pageSize });
-    nextPage?.(pageIndex, pageSize);
+    setPagination({
+      pageIndex: pageIndex + 1,
+      pageSize,
+    });
+    nextPage(pageIndex, pageSize);
  };

-  /** Goes back one page and notifies the parent. */
+  /**
+   * Pagination control to move backward one page
+   * @returns void
+   **/
  const goToPreviousPage = () => {
-    setPagination({ pageIndex: pageIndex - 1, pageSize });
-    previousPage?.(pageIndex, pageSize);
+    setPagination({
+      pageIndex: pageIndex - 1,
+      pageSize,
+    });
+    previousPage(pageIndex, pageSize);
  };

  const table = useReactTable({
@@ -92,62 +72,63 @@ export const T2Table = <TData,>({
    manualPagination: true,
    getCoreRowModel: getCoreRowModel(),
    pageCount: sourceData.length ?? -1,
-    state: { pagination },
+    state: {
+      pagination,
+    },
    onPaginationChange: setPagination,
  });

  return (
    <div className="container max-w-fit">
-      <div className="flex flex-row gap-2 justify-between mt-6 mb-4">
-        {children}
+      <div>
+        <div className="flex flex-row gap-2 justify-between mt-6 mb-4">
+          {/* Search bar */}
+          {tableOptions.children}

-        <div className="text-sm text-gray-800 dark:text-slate-200">
-          <div className="mb-1">
-            Page {pageIndex} of {Math.ceil(totalPages / pageSize)}
-          </div>
-          <p className="text-xs text-gray-600 dark:text-slate-400">
-            {totalPages} comics in all
-          </p>
-          <div className="inline-flex flex-row mt-3">
-            <button
-              onClick={goToPreviousPage}
-              disabled={pageIndex === 1}
-              className="dark:bg-slate-400 bg-gray-300 rounded-l px-2 py-1 border-r border-slate-600"
-            >
-              <i className="icon-[solar--arrow-left-linear] h-5 w-5" />
-            </button>
-            <button
-              onClick={goToNextPage}
-              disabled={pageIndex > Math.floor(totalPages / pageSize)}
-              className="dark:bg-slate-400 bg-gray-300 rounded-r px-2 py-1"
-            >
-              <i className="icon-[solar--arrow-right-linear] h-5 w-5" />
-            </button>
+          {/* Pagination controls */}
+          <div className="text-sm text-gray-800 dark:text-slate-200">
+            <div className="mb-1">
+              Page {pageIndex} of {Math.ceil(totalPages / pageSize)}
+            </div>
+            <p className="text-xs text-gray-600 dark:text-slate-400">
+              {totalPages} comics in all
+            </p>
+            <div className="inline-flex flex-row mt-3">
+              <button
+                onClick={() => goToPreviousPage()}
+                disabled={pageIndex === 1}
+                className="dark:bg-slate-400 bg-gray-300 rounded-l px-2 py-1 border-r border-slate-600"
+              >
+                <i className="icon-[solar--arrow-left-linear] h-5 w-5"></i>
+              </button>
+              <button
+                className="dark:bg-slate-400 bg-gray-300 rounded-r px-2 py-1"
+                onClick={() => goToNextPage()}
+                disabled={pageIndex > Math.floor(totalPages / pageSize)}
+              >
+                <i className="icon-[solar--arrow-right-linear] h-5 w-5"></i>
+              </button>
+            </div>
          </div>
        </div>
      </div>

-      <div ref={sentinelRef} />
      <table className="table-auto w-full text-sm text-gray-900 dark:text-slate-100">
-        <thead>
+        <thead className="sticky top-0 z-10 bg-white dark:bg-slate-900">
          {table.getHeaderGroups().map((headerGroup, groupIndex) => (
-            <tr key={headerGroup.id} ref={groupIndex === 0 ? firstHeaderRowRef : undefined}>
-              {headerGroup.headers.map((header) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header, index) => (
                <th
                  key={header.id}
                  colSpan={header.colSpan}
-                  style={groupIndex === 1 ? { top: firstRowHeight } : undefined}
-                  className={[
-                    'sticky z-10 px-3 py-2 text-[11px] font-semibold tracking-wide uppercase text-left',
-                    'text-gray-500 dark:text-slate-400 bg-white dark:bg-slate-900',
-                    groupIndex === 0
-                      ? `top-0 ${isSticky ? 'first:rounded-tl-xl last:rounded-tr-xl' : ''}`
-                      : `border-b-2 border-gray-200 dark:border-slate-600 shadow-md ${isSticky ? 'first:rounded-bl-xl last:rounded-br-xl' : ''}`,
-                  ].join(' ')}
+                  className="px-3 py-2 text-[11px] font-semibold tracking-wide uppercase text-left text-gray-500 dark:text-slate-400 border-b border-gray-300 dark:border-slate-700"
                >
                  {header.isPlaceholder
                    ? null
-                    : flexRender(header.column.columnDef.header, header.getContext())}
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
                </th>
              ))}
            </tr>
@@ -155,11 +136,11 @@ export const T2Table = <TData,>({
        </thead>

        <tbody>
-          {table.getRowModel().rows.map((row) => (
+          {table.getRowModel().rows.map((row, rowIndex) => (
            <tr
              key={row.id}
-              onClick={() => rowClickHandler?.(row)}
-              className={`border-b border-gray-200 dark:border-slate-700 transition-colors cursor-pointer ${getRowClassName ? getRowClassName(row) : "hover:bg-slate-100/30 dark:hover:bg-slate-700/20"}`}
+              onClick={() => rowClickHandler(row)}
+              className="border-b border-gray-200 dark:border-slate-700 hover:bg-slate-100/30 dark:hover:bg-slate-700/20 transition-colors cursor-pointer"
            >
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id} className="px-3 py-2 align-top">
--- a/src/client/graphql/generated.ts
+++ b/src/client/graphql/generated.ts
@@ -28,23 +28,6 @@ export type AcquisitionSourceInput = {
  wanted?: InputMaybe<Scalars['Boolean']['input']>;
 };

-export type AddTorrentInput = {
-  comicObjectId: Scalars['ID']['input'];
-  torrentToDownload: Scalars['String']['input'];
-};
-
-export type AddTorrentResult = {
-  __typename?: 'AddTorrentResult';
-  result?: Maybe<Scalars['JSON']['output']>;
-};
-
-export type AppSettings = {
-  __typename?: 'AppSettings';
-  bittorrent?: Maybe<BittorrentSettings>;
-  directConnect?: Maybe<DirectConnectSettings>;
-  prowlarr?: Maybe<ProwlarrSettings>;
-};
-
 export type Archive = {
  __typename?: 'Archive';
  expandedPath?: Maybe<Scalars['String']['output']>;
@@ -69,26 +52,6 @@ export type AutoMergeSettingsInput = {
  onMetadataUpdate?: InputMaybe<Scalars['Boolean']['input']>;
 };

-export type BittorrentClient = {
-  __typename?: 'BittorrentClient';
-  host?: Maybe<HostConfig>;
-  name?: Maybe<Scalars['String']['output']>;
-};
-
-export type BittorrentSettings = {
-  __typename?: 'BittorrentSettings';
-  client?: Maybe<BittorrentClient>;
-};
-
-export type Bundle = {
-  __typename?: 'Bundle';
-  id?: Maybe<Scalars['Int']['output']>;
-  name?: Maybe<Scalars['String']['output']>;
-  size?: Maybe<Scalars['String']['output']>;
-  speed?: Maybe<Scalars['String']['output']>;
-  status?: Maybe<Scalars['String']['output']>;
-};
-
 export type CanonicalMetadata = {
  __typename?: 'CanonicalMetadata';
  ageRating?: Maybe<MetadataField>;
@@ -160,11 +123,6 @@ export type ComicConnection = {
  totalCount: Scalars['Int']['output'];
 };

-export type ComicVineMatchInput = {
-  volume: ComicVineVolumeRefInput;
-  volumeInformation?: InputMaybe<Scalars['JSON']['input']>;
-};
-
 export type ComicVineResourceResponse = {
  __typename?: 'ComicVineResourceResponse';
  error: Scalars['String']['output'];
@@ -185,24 +143,6 @@ export type ComicVineSearchResult = {
  offset: Scalars['Int']['output'];
  results: Array<SearchResultItem>;
  status_code: Scalars['Int']['output'];
-  total: Scalars['Int']['output'];
-};
-
-export type ComicVineVolume = {
-  __typename?: 'ComicVineVolume';
-  api_detail_url?: Maybe<Scalars['String']['output']>;
-  count_of_issues?: Maybe<Scalars['Int']['output']>;
-  description?: Maybe<Scalars['String']['output']>;
-  id?: Maybe<Scalars['Int']['output']>;
-  image?: Maybe<VolumeImage>;
-  name?: Maybe<Scalars['String']['output']>;
-  publisher?: Maybe<Publisher>;
-  site_detail_url?: Maybe<Scalars['String']['output']>;
-  start_year?: Maybe<Scalars['String']['output']>;
-};
-
-export type ComicVineVolumeRefInput = {
-  api_detail_url: Scalars['String']['input'];
 };

 export enum ConflictResolutionStrategy {
@@ -237,22 +177,10 @@ export type DirectConnectBundleInput = {
  size?: InputMaybe<Scalars['String']['input']>;
 };

-export type DirectConnectClient = {
-  __typename?: 'DirectConnectClient';
-  airDCPPUserSettings?: Maybe<Scalars['JSON']['output']>;
-  host?: Maybe<HostConfig>;
-  hubs?: Maybe<Array<Maybe<Scalars['JSON']['output']>>>;
-};
-
 export type DirectConnectInput = {
  downloads?: InputMaybe<Array<DirectConnectBundleInput>>;
 };

-export type DirectConnectSettings = {
-  __typename?: 'DirectConnectSettings';
-  client?: Maybe<DirectConnectClient>;
-};
-
 export type DirectorySize = {
  __typename?: 'DirectorySize';
  fileCount: Scalars['Int']['output'];
@@ -306,37 +234,6 @@ export type GetVolumesInput = {
  volumeURI: Scalars['String']['input'];
 };

-export type HostConfig = {
-  __typename?: 'HostConfig';
-  hostname?: Maybe<Scalars['String']['output']>;
-  password?: Maybe<Scalars['String']['output']>;
-  port?: Maybe<Scalars['String']['output']>;
-  protocol?: Maybe<Scalars['String']['output']>;
-  username?: Maybe<Scalars['String']['output']>;
-};
-
-export type HostInput = {
-  hostname: Scalars['String']['input'];
-  password: Scalars['String']['input'];
-  port: Scalars['String']['input'];
-  protocol: Scalars['String']['input'];
-  username: Scalars['String']['input'];
-};
-
-export type Hub = {
-  __typename?: 'Hub';
-  description?: Maybe<Scalars['String']['output']>;
-  id?: Maybe<Scalars['Int']['output']>;
-  name?: Maybe<Scalars['String']['output']>;
-  userCount?: Maybe<Scalars['Int']['output']>;
-};
-
-export type ImageAnalysisResult = {
-  __typename?: 'ImageAnalysisResult';
-  analyzedData?: Maybe<Scalars['JSON']['output']>;
-  colorHistogramData?: Maybe<Scalars['JSON']['output']>;
-};
-
 export type ImageUrls = {
  __typename?: 'ImageUrls';
  icon_url?: Maybe<Scalars['String']['output']>;
@@ -406,7 +303,6 @@ export type ImportStatistics = {
 export type ImportStats = {
  __typename?: 'ImportStats';
  alreadyImported: Scalars['Int']['output'];
-  missingFiles: Scalars['Int']['output'];
  newFiles: Scalars['Int']['output'];
  percentageImported: Scalars['String']['output'];
  totalLocalFiles: Scalars['Int']['output'];
@@ -415,7 +311,6 @@ export type ImportStats = {
 export type ImportStatus = {
  __typename?: 'ImportStatus';
  isImported?: Maybe<Scalars['Boolean']['output']>;
-  isRawFileMissing?: Maybe<Scalars['Boolean']['output']>;
  matchedResult?: Maybe<MatchedResult>;
  tagged?: Maybe<Scalars['Boolean']['output']>;
 };
@@ -526,7 +421,6 @@ export type LocgMetadataInput = {
 export type LibraryStatistics = {
  __typename?: 'LibraryStatistics';
  comicDirectorySize: DirectorySize;
-  comicsMissingFiles: Scalars['Int']['output'];
  statistics: Array<StatisticsFacet>;
  totalDocuments: Scalars['Int']['output'];
 };
@@ -621,10 +515,6 @@ export type Mutation = {
  __typename?: 'Mutation';
  /** Placeholder for future mutations */
  _empty?: Maybe<Scalars['String']['output']>;
-  /** Add a torrent to qBittorrent */
-  addTorrent?: Maybe<AddTorrentResult>;
-  analyzeImage: ImageAnalysisResult;
-  applyComicVineMatch: Comic;
  bulkResolveMetadata: Array<Comic>;
  forceCompleteSession: ForceCompleteResult;
  importComic: ImportComicResult;
@@ -634,28 +524,11 @@ export type Mutation = {
  setMetadataField: Comic;
  startIncrementalImport: IncrementalImportResult;
  startNewImport: ImportJobResult;
-  uncompressArchive?: Maybe<Scalars['Boolean']['output']>;
  updateSourcedMetadata: Comic;
  updateUserPreferences: UserPreferences;
 };


-export type MutationAddTorrentArgs = {
-  input: AddTorrentInput;
-};
-
-
-export type MutationAnalyzeImageArgs = {
-  imageFilePath: Scalars['String']['input'];
-};
-
-
-export type MutationApplyComicVineMatchArgs = {
-  comicObjectId: Scalars['ID']['input'];
-  match: ComicVineMatchInput;
-};
-
-
 export type MutationBulkResolveMetadataArgs = {
  comicIds: Array<Scalars['ID']['input']>;
 };
@@ -706,13 +579,6 @@ export type MutationStartNewImportArgs = {
 };


-export type MutationUncompressArchiveArgs = {
-  comicObjectId: Scalars['ID']['input'];
-  filePath: Scalars['String']['input'];
-  options?: InputMaybe<Scalars['JSON']['input']>;
-};
-
-
 export type MutationUpdateSourcedMetadataArgs = {
  comicId: Scalars['ID']['input'];
  metadata: Scalars['String']['input'];
@@ -761,17 +627,6 @@ export type Provenance = {
  url?: Maybe<Scalars['String']['output']>;
 };

-export type ProwlarrClient = {
-  __typename?: 'ProwlarrClient';
-  apiKey?: Maybe<Scalars['String']['output']>;
-  host?: Maybe<HostConfig>;
-};
-
-export type ProwlarrSettings = {
-  __typename?: 'ProwlarrSettings';
-  client?: Maybe<ProwlarrClient>;
-};
-
 export type Publisher = {
  __typename?: 'Publisher';
  api_detail_url?: Maybe<Scalars['String']['output']>;
@@ -787,9 +642,7 @@ export type PublisherStats = {

 export type Query = {
  __typename?: 'Query';
-  _empty?: Maybe<Scalars['String']['output']>;
  analyzeMetadataConflicts: Array<MetadataConflict>;
-  bundles: Array<Bundle>;
  comic?: Maybe<Comic>;
  comics: ComicConnection;
  /** Fetch resource from Metron API */
@@ -810,18 +663,13 @@ export type Query = {
  getVolume: VolumeDetailResponse;
  /** Get weekly pull list from League of Comic Geeks */
  getWeeklyPullList: MetadataPullListResponse;
-  hubs: Array<Hub>;
  previewCanonicalMetadata?: Maybe<CanonicalMetadata>;
  /** Search ComicVine for volumes, issues, characters, etc. */
  searchComicVine: ComicVineSearchResult;
  searchIssue: SearchIssueResult;
-  searchTorrents: Array<TorrentSearchResult>;
-  settings?: Maybe<AppSettings>;
-  torrentJobs?: Maybe<TorrentJob>;
  userPreferences?: Maybe<UserPreferences>;
  /** Advanced volume-based search with scoring and filtering */
  volumeBasedSearch: VolumeBasedSearchResponse;
-  walkFolders: Array<Scalars['String']['output']>;
 };


@@ -830,12 +678,6 @@ export type QueryAnalyzeMetadataConflictsArgs = {
 };


-export type QueryBundlesArgs = {
-  comicObjectId: Scalars['ID']['input'];
-  config?: InputMaybe<Scalars['JSON']['input']>;
-};
-
-
 export type QueryComicArgs = {
  id: Scalars['ID']['input'];
 };
@@ -891,11 +733,6 @@ export type QueryGetWeeklyPullListArgs = {
 };


-export type QueryHubsArgs = {
-  host: HostInput;
-};
-
-
 export type QueryPreviewCanonicalMetadataArgs = {
  comicId: Scalars['ID']['input'];
  preferences?: InputMaybe<UserPreferencesInput>;
@@ -914,21 +751,6 @@ export type QuerySearchIssueArgs = {
 };


-export type QuerySearchTorrentsArgs = {
-  query: Scalars['String']['input'];
-};
-
-
-export type QuerySettingsArgs = {
-  settingsKey?: InputMaybe<Scalars['String']['input']>;
-};
-
-
-export type QueryTorrentJobsArgs = {
-  trigger: Scalars['String']['input'];
-};
-
-
 export type QueryUserPreferencesArgs = {
  userId?: InputMaybe<Scalars['String']['input']>;
 };
@@ -938,12 +760,6 @@ export type QueryVolumeBasedSearchArgs = {
  input: VolumeSearchInput;
 };

-
-export type QueryWalkFoldersArgs = {
-  basePathToWalk: Scalars['String']['input'];
-  extensions?: InputMaybe<Array<Scalars['String']['input']>>;
-};
-
 export type RawFileDetails = {
  __typename?: 'RawFileDetails';
  archive?: Maybe<Archive>;
@@ -1122,24 +938,6 @@ export type TeamCredit = {
  site_detail_url?: Maybe<Scalars['String']['output']>;
 };

-export type TorrentJob = {
-  __typename?: 'TorrentJob';
-  id?: Maybe<Scalars['String']['output']>;
-  name?: Maybe<Scalars['String']['output']>;
-};
-
-export type TorrentSearchResult = {
-  __typename?: 'TorrentSearchResult';
-  downloadUrl?: Maybe<Scalars['String']['output']>;
-  guid?: Maybe<Scalars['String']['output']>;
-  indexer?: Maybe<Scalars['String']['output']>;
-  leechers?: Maybe<Scalars['Int']['output']>;
-  publishDate?: Maybe<Scalars['String']['output']>;
-  seeders?: Maybe<Scalars['Int']['output']>;
-  size?: Maybe<Scalars['Float']['output']>;
-  title?: Maybe<Scalars['String']['output']>;
-};
-
 export type UserPreferences = {
  __typename?: 'UserPreferences';
  autoMerge: AutoMergeSettings;
@@ -1285,7 +1083,7 @@ export type GetRecentComicsQueryVariables = Exact<{
 }>;


-export type GetRecentComicsQuery = { __typename?: 'Query', comics: { __typename?: 'ComicConnection', totalCount: number, comics: Array<{ __typename?: 'Comic', id: string, createdAt?: string | null, updatedAt?: string | null, inferredMetadata?: { __typename?: 'InferredMetadata', issue?: { __typename?: 'Issue', name?: string | null, number?: number | null, year?: string | null, subtitle?: string | null } | null } | null, rawFileDetails?: { __typename?: 'RawFileDetails', name?: string | null, extension?: string | null, cover?: { __typename?: 'Cover', filePath?: string | null } | null, archive?: { __typename?: 'Archive', uncompressed?: boolean | null } | null } | null, sourcedMetadata?: { __typename?: 'SourcedMetadata', comicvine?: string | null, comicInfo?: string | null, locg?: { __typename?: 'LOCGMetadata', name?: string | null, publisher?: string | null, cover?: string | null } | null } | null, canonicalMetadata?: { __typename?: 'CanonicalMetadata', title?: { __typename?: 'MetadataField', value?: string | null } | null, series?: { __typename?: 'MetadataField', value?: string | null } | null, issueNumber?: { __typename?: 'MetadataField', value?: string | null } | null, publisher?: { __typename?: 'MetadataField', value?: string | null } | null } | null, importStatus?: { __typename?: 'ImportStatus', isRawFileMissing?: boolean | null } | null }> } };
+export type GetRecentComicsQuery = { __typename?: 'Query', comics: { __typename?: 'ComicConnection', totalCount: number, comics: Array<{ __typename?: 'Comic', id: string, createdAt?: string | null, updatedAt?: string | null, inferredMetadata?: { __typename?: 'InferredMetadata', issue?: { __typename?: 'Issue', name?: string | null, number?: number | null, year?: string | null, subtitle?: string | null } | null } | null, rawFileDetails?: { __typename?: 'RawFileDetails', name?: string | null, extension?: string | null, cover?: { __typename?: 'Cover', filePath?: string | null } | null, archive?: { __typename?: 'Archive', uncompressed?: boolean | null } | null } | null, sourcedMetadata?: { __typename?: 'SourcedMetadata', comicvine?: string | null, comicInfo?: string | null, locg?: { __typename?: 'LOCGMetadata', name?: string | null, publisher?: string | null, cover?: string | null } | null } | null, canonicalMetadata?: { __typename?: 'CanonicalMetadata', title?: { __typename?: 'MetadataField', value?: string | null } | null, series?: { __typename?: 'MetadataField', value?: string | null } | null, issueNumber?: { __typename?: 'MetadataField', value?: string | null } | null, publisher?: { __typename?: 'MetadataField', value?: string | null } | null } | null }> } };

 export type GetWantedComicsQueryVariables = Exact<{
  paginationOptions: PaginationOptionsInput;
@@ -1303,7 +1101,7 @@ export type GetVolumeGroupsQuery = { __typename?: 'Query', getComicBookGroups: A
 export type GetLibraryStatisticsQueryVariables = Exact<{ [key: string]: never; }>;


-export type GetLibraryStatisticsQuery = { __typename?: 'Query', getLibraryStatistics: { __typename?: 'LibraryStatistics', totalDocuments: number, comicsMissingFiles: number, comicDirectorySize: { __typename?: 'DirectorySize', fileCount: number, totalSizeInGB: number }, statistics: Array<{ __typename?: 'StatisticsFacet', fileTypes?: Array<{ __typename?: 'FileTypeStats', id: string, data: Array<string> }> | null, issues?: Array<{ __typename?: 'IssueStats', data: Array<string>, id?: { __typename?: 'VolumeInfo', id?: number | null, name?: string | null } | null }> | null, fileLessComics?: Array<{ __typename?: 'Comic', id: string }> | null, issuesWithComicInfoXML?: Array<{ __typename?: 'Comic', id: string }> | null, publisherWithMostComicsInLibrary?: Array<{ __typename?: 'PublisherStats', id: string, count: number }> | null }> } };
+export type GetLibraryStatisticsQuery = { __typename?: 'Query', getLibraryStatistics: { __typename?: 'LibraryStatistics', totalDocuments: number, comicDirectorySize: { __typename?: 'DirectorySize', fileCount: number }, statistics: Array<{ __typename?: 'StatisticsFacet', fileTypes?: Array<{ __typename?: 'FileTypeStats', id: string, data: Array<string> }> | null, issues?: Array<{ __typename?: 'IssueStats', data: Array<string>, id?: { __typename?: 'VolumeInfo', id?: number | null, name?: string | null } | null }> | null, fileLessComics?: Array<{ __typename?: 'Comic', id: string }> | null, issuesWithComicInfoXML?: Array<{ __typename?: 'Comic', id: string }> | null, publisherWithMostComicsInLibrary?: Array<{ __typename?: 'PublisherStats', id: string, count: number }> | null }> } };

 export type GetWeeklyPullListQueryVariables = Exact<{
  input: WeeklyPullListInput;
@@ -1317,7 +1115,7 @@ export type GetImportStatisticsQueryVariables = Exact<{
 }>;


-export type GetImportStatisticsQuery = { __typename?: 'Query', getImportStatistics: { __typename?: 'ImportStatistics', success: boolean, directory: string, stats: { __typename?: 'ImportStats', totalLocalFiles: number, alreadyImported: number, newFiles: number, missingFiles: number, percentageImported: string } } };
+export type GetImportStatisticsQuery = { __typename?: 'Query', getImportStatistics: { __typename?: 'ImportStatistics', success: boolean, directory: string, stats: { __typename?: 'ImportStats', totalLocalFiles: number, alreadyImported: number, newFiles: number, percentageImported: string } } };

 export type StartNewImportMutationVariables = Exact<{
  sessionId: Scalars['String']['input'];
@@ -1726,9 +1524,6 @@ export const GetRecentComicsDocument = `
          value
        }
      }
-      importStatus {
-        isRawFileMissing
-      }
      createdAt
      updatedAt
    }
@@ -1944,10 +1739,8 @@ export const GetLibraryStatisticsDocument = `
    query GetLibraryStatistics {
  getLibraryStatistics {
    totalDocuments
-    comicsMissingFiles
    comicDirectorySize {
      fileCount
-      totalSizeInGB
    }
    statistics {
      fileTypes {
@@ -2081,7 +1874,6 @@ export const GetImportStatisticsDocument = `
      totalLocalFiles
      alreadyImported
      newFiles
-      missingFiles
      percentageImported
    }
  }
--- a/src/client/graphql/queries/dashboard.graphql
+++ b/src/client/graphql/queries/dashboard.graphql
@@ -93,9 +93,6 @@ query GetRecentComics($limit: Int) {
          value
        }
      }
-      importStatus {
-        isRawFileMissing
-      }
      createdAt
      updatedAt
    }
@@ -179,10 +176,8 @@ query GetVolumeGroups {
 query GetLibraryStatistics {
  getLibraryStatistics {
    totalDocuments
-    comicsMissingFiles
    comicDirectorySize {
      fileCount
-      totalSizeInGB
    }
    statistics {
      fileTypes {
--- a/src/client/graphql/queries/import.graphql
+++ b/src/client/graphql/queries/import.graphql
@@ -6,7 +6,6 @@ query GetImportStatistics($directoryPath: String) {
      totalLocalFiles
      alreadyImported
      newFiles
-      missingFiles
      percentageImported
    }
  }
--- a/src/client/hooks/useImportSessionStatus.ts
+++ b/src/client/hooks/useImportSessionStatus.ts
@@ -60,22 +60,13 @@ export const useImportSessionStatus = (): ImportSessionState => {
  // Track if we've received completion events
  const completionEventReceived = useRef(false);
  const queueDrainedEventReceived = useRef(false);
-  // Only true if IMPORT_SESSION_STARTED fired in this browser session.
-  // Prevents a stale "running" DB session from showing as active on hard refresh.
-  const sessionStartedEventReceived = useRef(false);

-  // Query active import session - polls every 3s as a fallback when a session is
-  // active (e.g. tab re-opened mid-import and socket events were missed)
+  // Query active import session - NO POLLING, only refetch on Socket.IO events
  const { data: sessionData, refetch } = useGetActiveImportSessionQuery(
    {},
    {
-      refetchOnWindowFocus: true,
-      refetchInterval: (query) => {
-        const s = (query.state.data as any)?.getActiveImportSession;
-        return s?.status === "running" || s?.status === "active" || s?.status === "processing"
-          ? 3000
-          : false;
-      },
+      refetchOnWindowFocus: false,
+      refetchInterval: false, // NO POLLING
    }
  );

@@ -161,18 +152,12 @@ export const useImportSessionStatus = (): ImportSessionState => {

    // Case 3: Check if session is actually running/active
    if (status === "running" || status === "active" || status === "processing") {
+      // Check if there's actual progress happening
+      const hasProgress = stats.filesProcessed > 0 || stats.filesSucceeded > 0;
      const hasQueuedWork = stats.filesQueued > 0 && stats.filesProcessed < stats.filesQueued;
-      // Only treat as "just started" if the started event fired in this browser session.
-      // Prevents a stale DB session from showing a 0% progress bar on hard refresh.
-      const justStarted = stats.filesQueued === 0 && stats.filesProcessed === 0 && sessionStartedEventReceived.current;
-
-      // No in-session event AND no actual progress → stale unclosed session from a previous run.
-      // Covers the case where the backend stores filesQueued but never updates filesProcessed/filesSucceeded.
-      const likelyStale = !sessionStartedEventReceived.current
-        && stats.filesProcessed === 0
-        && stats.filesSucceeded === 0;
-
-      if ((hasQueuedWork || justStarted) && !likelyStale) {
+      
+      // Only treat as active if there's progress OR it just started
+      if (hasProgress && hasQueuedWork) {
        return {
          status: "running",
          sessionId,
@@ -187,8 +172,8 @@ export const useImportSessionStatus = (): ImportSessionState => {
          isActive: true,
        };
      } else {
-        // Session says "running" but all files processed — likely a stale session
-        console.warn(`[useImportSessionStatus] Session "${sessionId}" appears stale (status: "${status}", processed: ${stats.filesProcessed}, queued: ${stats.filesQueued}) - treating as idle`);
+        // Session says "running" but no progress - likely stuck/stale
+        console.warn(`[useImportSessionStatus] Session "${sessionId}" appears stuck (status: "${status}", processed: ${stats.filesProcessed}, succeeded: ${stats.filesSucceeded}, queued: ${stats.filesQueued}) - treating as idle`);
        return {
          status: "idle",
          sessionId: null,
@@ -258,11 +243,10 @@ export const useImportSessionStatus = (): ImportSessionState => {
    };

    const handleSessionStarted = () => {
-      console.log("[useImportSessionStatus] IMPORT_SESSION_STARTED / LS_INCREMENTAL_IMPORT_STARTED event received");
+      console.log("[useImportSessionStatus] IMPORT_SESSION_STARTED event received");
      // Reset completion flags when new session starts
      completionEventReceived.current = false;
      queueDrainedEventReceived.current = false;
-      sessionStartedEventReceived.current = true;
      refetch();
    };

@@ -275,14 +259,12 @@ export const useImportSessionStatus = (): ImportSessionState => {
    socket.on("IMPORT_SESSION_COMPLETED", handleSessionCompleted);
    socket.on("LS_IMPORT_QUEUE_DRAINED", handleQueueDrained);
    socket.on("IMPORT_SESSION_STARTED", handleSessionStarted);
-    socket.on("LS_INCREMENTAL_IMPORT_STARTED", handleSessionStarted);
    socket.on("IMPORT_SESSION_UPDATED", handleSessionUpdated);

    return () => {
      socket.off("IMPORT_SESSION_COMPLETED", handleSessionCompleted);
      socket.off("LS_IMPORT_QUEUE_DRAINED", handleQueueDrained);
      socket.off("IMPORT_SESSION_STARTED", handleSessionStarted);
-      socket.off("LS_INCREMENTAL_IMPORT_STARTED", handleSessionStarted);
      socket.off("IMPORT_SESSION_UPDATED", handleSessionUpdated);
    };
  }, [getSocket, refetch]);
--- a/src/client/shared/utils/metadata.utils.ts
+++ b/src/client/shared/utils/metadata.utils.ts
@@ -44,23 +44,21 @@ export const determineCoverFile = (data): any => {
  };
  // comicvine
  if (!isEmpty(data.comicvine)) {
-    coverFile.comicvine.url = data?.comicvine?.image?.small_url;
+    coverFile.comicvine.url = data?.comicvine?.image.small_url;
    coverFile.comicvine.issueName = data.comicvine?.name;
    coverFile.comicvine.publisher = data.comicvine?.publisher?.name;
  }
  // rawFileDetails
-  if (!isEmpty(data.rawFileDetails) && data.rawFileDetails.cover?.filePath) {
+  if (!isEmpty(data.rawFileDetails)) {
    const encodedFilePath = encodeURI(
      `${LIBRARY_SERVICE_HOST}/${data.rawFileDetails.cover.filePath}`,
    );
    coverFile.rawFile.url = escapePoundSymbol(encodedFilePath);
    coverFile.rawFile.issueName = data.rawFileDetails.name;
-  } else if (!isEmpty(data.rawFileDetails)) {
-    coverFile.rawFile.issueName = data.rawFileDetails.name;
  }
  // wanted

-  if (!isNil(data.locg)) {
+  if (!isUndefined(data.locg)) {
    coverFile.locg.url = data.locg.cover;
    coverFile.locg.issueName = data.locg.name;
    coverFile.locg.publisher = data.locg.publisher;
@@ -68,15 +66,14 @@ export const determineCoverFile = (data): any => {

  const result = filter(coverFile, (item) => item.url !== "");

-  if (result.length >= 1) {
+  if (result.length > 1) {
    const highestPriorityCoverFile = minBy(result, (item) => item.priority);
    if (!isUndefined(highestPriorityCoverFile)) {
      return highestPriorityCoverFile;
    }
+  } else {
+    return result[0];
  }
-
-  // No cover URL available — return rawFile entry so the name is still shown
-  return coverFile.rawFile;
 };

 export const determineExternalMetadata = (
@@ -88,8 +85,8 @@ export const determineExternalMetadata = (
      case "comicvine":
        return {
          coverURL:
-            source.comicvine?.image?.small_url ||
-            source.comicvine?.volumeInformation?.image?.small_url,
+            source.comicvine?.image.small_url ||
+            source.comicvine.volumeInformation?.image.small_url,
          issue: source.comicvine.name,
          icon: "cvlogo.svg",
        };
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -13,8 +13,6 @@ module.exports = {
          scraped: "#b8edbc",
          uncompressed: "#FFF3E0",
          imported: "#d8dab0",
-          missing: "#fee2e2",
-          info: "#cdd9eb",
        },
      },
    },
--- a/vite-plugin-iconify.js
+++ b/vite-plugin-iconify.js
@@ -0,0 +1,132 @@
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export function iconifyPlugin() {
+  const iconCache = new Map();
+  const collections = new Map();
+
+  function loadCollection(prefix) {
+    if (collections.has(prefix)) {
+      return collections.get(prefix);
+    }
+
+    try {
+      const collectionPath = join(__dirname, 'node_modules', '@iconify-json', prefix, 'icons.json');
+      const data = JSON.parse(readFileSync(collectionPath, 'utf8'));
+      collections.set(prefix, data);
+      return data;
+    } catch (e) {
+      return null;
+    }
+  }
+
+  function getIconCSS(iconData, selector) {
+    const { body, width, height } = iconData;
+    const viewBox = `0 0 ${width || 24} ${height || 24}`;
+    
+    // Create SVG data URI
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}">${body}</svg>`;
+    const dataUri = `data:image/svg+xml;base64,${Buffer.from(svg).toString('base64')}`;
+    
+    return `${selector} {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  background-color: currentColor;
+  -webkit-mask-image: url("${dataUri}");
+  mask-image: url("${dataUri}");
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}`;
+  }
+
+  return {
+    name: 'vite-plugin-iconify',
+    
+    transform(code, id) {
+      // Only process files that might contain icon classes
+      if (!id.endsWith('.tsx') && !id.endsWith('.jsx') && !id.endsWith('.ts') && !id.endsWith('.js')) {
+        return null;
+      }
+
+      // Find all icon-[...] patterns
+      const iconPattern = /icon-\[([^\]]+)\]/g;
+      const matches = [...code.matchAll(iconPattern)];
+      
+      if (matches.length === 0) {
+        return null;
+      }
+
+      // Extract unique icons
+      const icons = new Set(matches.map(m => m[1]));
+      
+      // Generate CSS for each icon
+      for (const iconName of icons) {
+        if (iconCache.has(iconName)) {
+          continue;
+        }
+
+        try {
+          // Parse icon name (e.g., "solar--add-square-bold-duotone")
+          const parts = iconName.split('--');
+          if (parts.length !== 2) continue;
+          
+          const [prefix, name] = parts;
+          
+          // Load collection
+          const collection = loadCollection(prefix);
+          if (!collection || !collection.icons || !collection.icons[name]) {
+            continue;
+          }
+          
+          // Get icon data
+          const iconData = collection.icons[name];
+          
+          // Generate CSS
+          const selector = `.icon-\\[${iconName}\\]`;
+          const iconCSS = getIconCSS(iconData, selector);
+          
+          iconCache.set(iconName, iconCSS);
+        } catch (e) {
+          // Silently skip failed icons
+        }
+      }
+
+      return null;
+    },
+
+    resolveId(id) {
+      if (id === '/@iconify-css') {
+        return id;
+      }
+    },
+
+    load(id) {
+      if (id === '/@iconify-css') {
+        const allCSS = Array.from(iconCache.values()).join('\n');
+        return allCSS;
+      }
+    },
+    
+    transformIndexHtml() {
+      // Inject icon CSS into HTML
+      const allCSS = Array.from(iconCache.values()).join('\n');
+      if (allCSS) {
+        return [
+          {
+            tag: 'style',
+            attrs: { type: 'text/css' },
+            children: allCSS,
+            injectTo: 'head'
+          }
+        ];
+      }
+    }
+  };
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -35,9 +35,6 @@ export default defineConfig({
      },
    },
  },
-  resolve: {
-    dedupe: ["react", "react-dom"],
-  },
  esbuild: {
    supported: {
      "top-level-await": true, //browsers can handle top-level-await features
--- a/yarn.lock
+++ b/yarn.lock
@@ -683,25 +683,25 @@
  dependencies:
    tslib "^2.0.0"

-"@emnapi/core@^1.4.3", "@emnapi/core@^1.8.1":
-  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/@emnapi/core/-/core-1.9.2.tgz#3870265ecffc7352d01ead62d8d83d8358a2d034"
-  integrity sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==
+"@emnapi/core@^1.4.3", "@emnapi/core@^1.7.1", "@emnapi/core@^1.8.1":
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/@emnapi/core/-/core-1.8.1.tgz#fd9efe721a616288345ffee17a1f26ac5dd01349"
+  integrity sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==
  dependencies:
-    "@emnapi/wasi-threads" "1.2.1"
+    "@emnapi/wasi-threads" "1.1.0"
    tslib "^2.4.0"

-"@emnapi/runtime@^1.4.3", "@emnapi/runtime@^1.8.1":
-  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.9.2.tgz#8b469a3db160817cadb1de9050211a9d1ea84fa2"
-  integrity sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==
+"@emnapi/runtime@^1.4.3", "@emnapi/runtime@^1.7.1", "@emnapi/runtime@^1.8.1":
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.8.1.tgz#550fa7e3c0d49c5fb175a116e8cd70614f9a22a5"
+  integrity sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==
  dependencies:
    tslib "^2.4.0"

-"@emnapi/wasi-threads@1.2.1", "@emnapi/wasi-threads@^1.1.0":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz#28fed21a1ba1ce797c44a070abc94d42f3ae8548"
-  integrity sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==
+"@emnapi/wasi-threads@1.1.0", "@emnapi/wasi-threads@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz#60b2102fddc9ccb78607e4a3cf8403ea69be41bf"
+  integrity sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==
  dependencies:
    tslib "^2.4.0"

@@ -2397,10 +2397,12 @@
    "@tybys/wasm-util" "^0.10.0"

 "@napi-rs/wasm-runtime@^1.1.1":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.2.tgz#e25454b4d44cfabd21d1bc801705359870e33ecc"
-  integrity sha512-sNXv5oLJ7ob93xkZ1XnxisYhGYXfaG9f65/ZgYuAu3qt7b3NadcOEhLvx28hv31PgX8SZJRYrAIPQilQmFpLVw==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.1.tgz#c3705ab549d176b8dc5172723d6156c3dc426af2"
+  integrity sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A==
  dependencies:
+    "@emnapi/core" "^1.7.1"
+    "@emnapi/runtime" "^1.7.1"
    "@tybys/wasm-util" "^0.10.1"

 "@nodelib/fs.scandir@2.1.5":
@@ -2528,135 +2530,6 @@
  resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz"
  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==

-"@radix-ui/primitive@1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.3.tgz#e2dbc13bdc5e4168f4334f75832d7bdd3e2de5ba"
-  integrity sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==
-
-"@radix-ui/react-compose-refs@1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz#a2c4c47af6337048ee78ff6dc0d090b390d2bb30"
-  integrity sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==
-
-"@radix-ui/react-context@1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.2.tgz#61628ef269a433382c364f6f1e3788a6dc213a36"
-  integrity sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==
-
-"@radix-ui/react-dialog@^1.1.1":
-  version "1.1.15"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz#1de3d7a7e9a17a9874d29c07f5940a18a119b632"
-  integrity sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==
-  dependencies:
-    "@radix-ui/primitive" "1.1.3"
-    "@radix-ui/react-compose-refs" "1.1.2"
-    "@radix-ui/react-context" "1.1.2"
-    "@radix-ui/react-dismissable-layer" "1.1.11"
-    "@radix-ui/react-focus-guards" "1.1.3"
-    "@radix-ui/react-focus-scope" "1.1.7"
-    "@radix-ui/react-id" "1.1.1"
-    "@radix-ui/react-portal" "1.1.9"
-    "@radix-ui/react-presence" "1.1.5"
-    "@radix-ui/react-primitive" "2.1.3"
-    "@radix-ui/react-slot" "1.2.3"
-    "@radix-ui/react-use-controllable-state" "1.2.2"
-    aria-hidden "^1.2.4"
-    react-remove-scroll "^2.6.3"
-
-"@radix-ui/react-dismissable-layer@1.1.11":
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz#e33ab6f6bdaa00f8f7327c408d9f631376b88b37"
-  integrity sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==
-  dependencies:
-    "@radix-ui/primitive" "1.1.3"
-    "@radix-ui/react-compose-refs" "1.1.2"
-    "@radix-ui/react-primitive" "2.1.3"
-    "@radix-ui/react-use-callback-ref" "1.1.1"
-    "@radix-ui/react-use-escape-keydown" "1.1.1"
-
-"@radix-ui/react-focus-guards@1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz#2a5669e464ad5fde9f86d22f7fdc17781a4dfa7f"
-  integrity sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==
-
-"@radix-ui/react-focus-scope@1.1.7":
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz#dfe76fc103537d80bf42723a183773fd07bfb58d"
-  integrity sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==
-  dependencies:
-    "@radix-ui/react-compose-refs" "1.1.2"
-    "@radix-ui/react-primitive" "2.1.3"
-    "@radix-ui/react-use-callback-ref" "1.1.1"
-
-"@radix-ui/react-id@1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.1.tgz#1404002e79a03fe062b7e3864aa01e24bd1471f7"
-  integrity sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==
-  dependencies:
-    "@radix-ui/react-use-layout-effect" "1.1.1"
-
-"@radix-ui/react-portal@1.1.9":
-  version "1.1.9"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.9.tgz#14c3649fe48ec474ac51ed9f2b9f5da4d91c4472"
-  integrity sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==
-  dependencies:
-    "@radix-ui/react-primitive" "2.1.3"
-    "@radix-ui/react-use-layout-effect" "1.1.1"
-
-"@radix-ui/react-presence@1.1.5":
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.5.tgz#5d8f28ac316c32f078afce2996839250c10693db"
-  integrity sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==
-  dependencies:
-    "@radix-ui/react-compose-refs" "1.1.2"
-    "@radix-ui/react-use-layout-effect" "1.1.1"
-
-"@radix-ui/react-primitive@2.1.3":
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz#db9b8bcff49e01be510ad79893fb0e4cda50f1bc"
-  integrity sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==
-  dependencies:
-    "@radix-ui/react-slot" "1.2.3"
-
-"@radix-ui/react-slot@1.2.3":
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.2.3.tgz#502d6e354fc847d4169c3bc5f189de777f68cfe1"
-  integrity sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==
-  dependencies:
-    "@radix-ui/react-compose-refs" "1.1.2"
-
-"@radix-ui/react-use-callback-ref@1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz#62a4dba8b3255fdc5cc7787faeac1c6e4cc58d40"
-  integrity sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==
-
-"@radix-ui/react-use-controllable-state@1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz#905793405de57d61a439f4afebbb17d0645f3190"
-  integrity sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==
-  dependencies:
-    "@radix-ui/react-use-effect-event" "0.0.2"
-    "@radix-ui/react-use-layout-effect" "1.1.1"
-
-"@radix-ui/react-use-effect-event@0.0.2":
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz#090cf30d00a4c7632a15548512e9152217593907"
-  integrity sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==
-  dependencies:
-    "@radix-ui/react-use-layout-effect" "1.1.1"
-
-"@radix-ui/react-use-escape-keydown@1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz#b3fed9bbea366a118f40427ac40500aa1423cc29"
-  integrity sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==
-  dependencies:
-    "@radix-ui/react-use-callback-ref" "1.1.1"
-
-"@radix-ui/react-use-layout-effect@1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz#0c4230a9eed49d4589c967e2d9c0d9d60a23971e"
-  integrity sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==
-
 "@repeaterjs/repeater@^3.0.4", "@repeaterjs/repeater@^3.0.6":
  version "3.0.6"
  resolved "https://registry.npmjs.org/@repeaterjs/repeater/-/repeater-3.0.6.tgz"
@@ -3507,20 +3380,13 @@
  resolved "https://registry.npmjs.org/@types/mime-types/-/mime-types-3.0.1.tgz"
  integrity sha512-xRMsfuQbnRq1Ef+C+RKaENOxXX87Ygl38W1vDfPHRku02TgQr+Qd8iivLtAMcR0KF5/29xlnFihkTlbqFrGOVQ==

-"@types/node@*":
+"@types/node@*", "@types/node@^25.3.0":
  version "25.3.0"
  resolved "https://registry.npmjs.org/@types/node/-/node-25.3.0.tgz"
  integrity sha512-4K3bqJpXpqfg2XKGK9bpDTc6xO/xoUP/RBWS7AtRMug6zZFaRekiLzjVtAoZMquxoAbzBvy5nxQ7veS5eYzf8A==
  dependencies:
    undici-types "~7.18.0"

-"@types/node@^25.5.2":
-  version "25.5.2"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-25.5.2.tgz#94861e32f9ffd8de10b52bbec403465c84fff762"
-  integrity sha512-tO4ZIRKNC+MDWV4qKVZe3Ql/woTnmHDr5JD8UI5hn2pwBrHEwOEMZK7WlNb5RKB6EoJ02gwmQS9OrjuFnZYdpg==
-  dependencies:
-    undici-types "~7.18.0"
-
 "@types/parse-json@^4.0.0":
  version "4.0.2"
  resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz"
@@ -3980,13 +3846,6 @@ argparse@^2.0.1:
  resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==

-aria-hidden@^1.2.4:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.6.tgz#73051c9b088114c795b1ea414e9c0fff874ffc1a"
-  integrity sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==
-  dependencies:
-    tslib "^2.0.0"
-
 aria-query@5.1.3:
  version "5.1.3"
  resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz"
@@ -5179,11 +5038,6 @@ detect-newline@^3.1.0:
  resolved "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz"
  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==

-detect-node-es@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
-  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
-
 dir-glob@^3.0.1:
  version "3.0.1"
  resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz"
@@ -6273,15 +6127,6 @@ fraction.js@^5.3.4:
  resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz"
  integrity sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==

-framer-motion@^12.38.0:
-  version "12.38.0"
-  resolved "https://registry.npmjs.org/framer-motion/-/framer-motion-12.38.0.tgz"
-  integrity sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==
-  dependencies:
-    motion-dom "^12.38.0"
-    motion-utils "^12.36.0"
-    tslib "^2.4.0"
-
 fs-extra@^10.0.1:
  version "10.1.0"
  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz"
@@ -6359,11 +6204,6 @@ get-intrinsic@^1.1.3, get-intrinsic@^1.2.2, get-intrinsic@^1.2.4, get-intrinsic@
    hasown "^2.0.2"
    math-intrinsics "^1.1.0"

-get-nonce@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
-  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
-
 get-package-type@^0.1.0:
  version "0.1.0"
  resolved "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz"
@@ -8256,26 +8096,6 @@ modern-tar@^0.7.3:
  resolved "https://registry.npmjs.org/modern-tar/-/modern-tar-0.7.5.tgz"
  integrity sha512-YTefgdpKKFgoTDbEUqXqgUJct2OG6/4hs4XWLsxcHkDLj/x/V8WmKIRppPnXP5feQ7d1vuYWSp3qKkxfwaFaxA==

-motion-dom@^12.38.0:
-  version "12.38.0"
-  resolved "https://registry.npmjs.org/motion-dom/-/motion-dom-12.38.0.tgz"
-  integrity sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==
-  dependencies:
-    motion-utils "^12.36.0"
-
-motion-utils@^12.36.0:
-  version "12.36.0"
-  resolved "https://registry.npmjs.org/motion-utils/-/motion-utils-12.36.0.tgz"
-  integrity sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==
-
-motion@^12.38.0:
-  version "12.38.0"
-  resolved "https://registry.npmjs.org/motion/-/motion-12.38.0.tgz"
-  integrity sha512-uYfXzeHlgThchzwz5Te47dlv5JOUC7OB4rjJ/7XTUgtBZD8CchMN8qEJ4ZVsUmTyYA44zjV0fBwsiktRuFnn+w==
-  dependencies:
-    framer-motion "^12.38.0"
-    tslib "^2.4.0"
-
 ms@2.0.0:
  version "2.0.0"
  resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
@@ -9062,25 +8882,6 @@ react-refresh@^0.18.0:
  resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz"
  integrity sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==

-react-remove-scroll-bar@^2.3.7:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz#99c20f908ee467b385b68a3469b4a3e750012223"
-  integrity sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==
-  dependencies:
-    react-style-singleton "^2.2.2"
-    tslib "^2.0.0"
-
-react-remove-scroll@^2.6.3:
-  version "2.7.2"
-  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz#6442da56791117661978ae99cd29be9026fecca0"
-  integrity sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==
-  dependencies:
-    react-remove-scroll-bar "^2.3.7"
-    react-style-singleton "^2.2.3"
-    tslib "^2.1.0"
-    use-callback-ref "^1.3.3"
-    use-sidecar "^1.1.3"
-
 react-router-dom@^7.13.1:
  version "7.13.1"
  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.1.tgz"
@@ -9131,14 +8932,6 @@ react-sliding-pane@^7.3.0:
    prop-types "^15.7.2"
    react-modal "^3.14.3"

-react-style-singleton@^2.2.2, react-style-singleton@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.3.tgz#4265608be69a4d70cfe3047f2c6c88b2c3ace388"
-  integrity sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==
-  dependencies:
-    get-nonce "^1.0.0"
-    tslib "^2.0.0"
-
 react-swipeable@^7.0.2:
  version "7.0.2"
  resolved "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.2.tgz"
@@ -10341,10 +10134,10 @@ typescript@^4.3.2:
  resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz"
  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==

-typescript@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-6.0.2.tgz#0b1bfb15f68c64b97032f3d78abbf98bdbba501f"
-  integrity sha512-bGdAIrZ0wiGDo5l8c++HWtbaNCWTS4UTv7RaTH/ThVIgjkveJt83m74bBHMJkuCbslY8ixgLBVZJIOiQlQTjfQ==
+typescript@^5.9.3:
+  version "5.9.3"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz"
+  integrity sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==

 ua-parser-js@^1.0.35:
  version "1.0.41"
@@ -10382,9 +10175,9 @@ unc-path-regex@^0.1.2:
  integrity sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg==

 underscore@~1.13.2:
-  version "1.13.6"
-  resolved "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz"
-  integrity sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==
+  version "1.13.8"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.13.8.tgz#a93a21186c049dbf0e847496dba72b7bd8c1e92b"
+  integrity sha512-DXtD3ZtEQzc7M8m4cXotyHR+FAS18C64asBYY5vqZexfYryNNnDc02W4hKg3rdQuqOYas1jkseX0+nZXjTXnvQ==

 undici-types@~7.18.0:
  version "7.18.2"
@@ -10472,13 +10265,6 @@ urlpattern-polyfill@^10.0.0:
  resolved "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.1.0.tgz"
  integrity sha512-IGjKp/o0NL3Bso1PymYURCJxMPNAf/ILOpendP9f5B6e1rTJgdgiOvgfoT8VxCAdY+Wisb9uhGaJJf3yZ2V9nw==

-use-callback-ref@^1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.3.tgz#98d9fab067075841c5b2c6852090d5d0feabe2bf"
-  integrity sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==
-  dependencies:
-    tslib "^2.0.0"
-
 use-composed-ref@^1.3.0:
  version "1.3.0"
  resolved "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz"
@@ -10501,14 +10287,6 @@ use-latest@^1.2.1, use-latest@^1.3.0:
  dependencies:
    use-isomorphic-layout-effect "^1.1.1"

-use-sidecar@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.3.tgz#10e7fd897d130b896e2c546c63a5e8233d00efdb"
-  integrity sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==
-  dependencies:
-    detect-node-es "^1.1.0"
-    tslib "^2.0.0"
-
 use-sync-external-store@^1.6.0:
  version "1.6.0"
  resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz"
@@ -10558,13 +10336,6 @@ v8-to-istanbul@^9.0.1:
    "@types/istanbul-lib-coverage" "^2.0.1"
    convert-source-map "^2.0.0"

-vaul@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/vaul/-/vaul-1.1.2.tgz#c959f8b9dc2ed4f7d99366caee433fbef91f5ba9"
-  integrity sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==
-  dependencies:
-    "@radix-ui/react-dialog" "^1.1.1"
-
 vite-plugin-html@^3.2.2:
  version "3.2.2"
  resolved "https://registry.npmjs.org/vite-plugin-html/-/vite-plugin-html-3.2.2.tgz"