Made manual cv search form collapsible

Bumps [react-router](https://github.com/remix-run/react-router/tree/HEAD/packages/react-router) from 7.5.2 to 7.12.0.
- [Release notes](https://github.com/remix-run/react-router/releases)
- [Changelog](https://github.com/remix-run/react-router/blob/main/packages/react-router/CHANGELOG.md)
- [Commits](https://github.com/remix-run/react-router/commits/react-router@7.12.0/packages/react-router)

---
updated-dependencies:
- dependency-name: react-router
  dependency-version: 7.12.0
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.agents/skills/caveman-compress/README.md

@@ -0,0 +1,163 @@
+<p align="center">
+  <img src="https://em-content.zobj.net/source/apple/391/rock_1faa8.png" width="80" />
+</p>
+
+<h1 align="center">caveman-compress</h1>
+
+<p align="center">
+  <strong>shrink memory file. save token every session.</strong>
+</p>
+
+---
+
+A Claude Code skill that compresses your project memory files (`CLAUDE.md`, todos, preferences) into caveman format — so every session loads fewer tokens automatically.
+
+Claude read `CLAUDE.md` on every session start. If file big, cost big. Caveman make file small. Cost go down forever.
+
+## What It Do
+
+```
+/caveman:compress CLAUDE.md
+```
+
+```
+CLAUDE.md          ← compressed (Claude reads this — fewer tokens every session)
+CLAUDE.original.md ← human-readable backup (you edit this)
+```
+
+Original never lost. You can read and edit `.original.md`. Run skill again to re-compress after edits.
+
+## Benchmarks
+
+Real results on real project files:
+
+| File | Original | Compressed | Saved |
+|------|----------:|----------:|------:|
+| `claude-md-preferences.md` | 706 | 285 | **59.6%** |
+| `project-notes.md` | 1145 | 535 | **53.3%** |
+| `claude-md-project.md` | 1122 | 636 | **43.3%** |
+| `todo-list.md` | 627 | 388 | **38.1%** |
+| `mixed-with-code.md` | 888 | 560 | **36.9%** |
+| **Average** | **898** | **481** | **46%** |
+
+All validations passed ✅ — headings, code blocks, URLs, file paths preserved exactly.
+
+## Before / After
+
+<table>
+<tr>
+<td width="50%">
+
+### 📄 Original (706 tokens)
+
+> "I strongly prefer TypeScript with strict mode enabled for all new code. Please don't use `any` type unless there's genuinely no way around it, and if you do, leave a comment explaining the reasoning. I find that taking the time to properly type things catches a lot of bugs before they ever make it to runtime."
+
+</td>
+<td width="50%">
+
+### 🪨 Caveman (285 tokens)
+
+> "Prefer TypeScript strict mode always. No `any` unless unavoidable — comment why if used. Proper types catch bugs early."
+
+</td>
+</tr>
+</table>
+
+**Same instructions. 60% fewer tokens. Every. Single. Session.**
+
+## Security
+
+`caveman-compress` is flagged as Snyk High Risk due to subprocess and file I/O patterns detected by static analysis. This is a false positive — see [SECURITY.md](./SECURITY.md) for a full explanation of what the skill does and does not do.
+
+## Install
+
+Compress is built in with the `caveman` plugin. Install `caveman` once, then use `/caveman:compress`.
+
+If you need local files, the compress skill lives at:
+
+```bash
+caveman-compress/
+```
+
+**Requires:** Python 3.10+
+
+## Usage
+
+```
+/caveman:compress <filepath>
+```
+
+Examples:
+```
+/caveman:compress CLAUDE.md
+/caveman:compress docs/preferences.md
+/caveman:compress todos.md
+```
+
+### What files work
+
+| Type | Compress? |
+|------|-----------|
+| `.md`, `.txt`, `.rst` | ✅ Yes |
+| Extensionless natural language | ✅ Yes |
+| `.py`, `.js`, `.ts`, `.json`, `.yaml` | ❌ Skip (code/config) |
+| `*.original.md` | ❌ Skip (backup files) |
+
+## How It Work
+
+```
+/caveman:compress CLAUDE.md
+        ↓
+detect file type        (no tokens)
+        ↓
+Claude compresses       (tokens — one call)
+        ↓
+validate output         (no tokens)
+  checks: headings, code blocks, URLs, file paths, bullets
+        ↓
+if errors: Claude fixes cherry-picked issues only   (tokens — targeted fix)
+  does NOT recompress — only patches broken parts
+        ↓
+retry up to 2 times
+        ↓
+write compressed → CLAUDE.md
+write original   → CLAUDE.original.md
+```
+
+Only two things use tokens: initial compression + targeted fix if validation fails. Everything else is local Python.
+
+## What Is Preserved
+
+Caveman compress natural language. It never touch:
+
+- Code blocks (` ``` ` fenced or indented)
+- Inline code (`` `backtick content` ``)
+- URLs and links
+- File paths (`/src/components/...`)
+- Commands (`npm install`, `git commit`)
+- Technical terms, library names, API names
+- Headings (exact text preserved)
+- Tables (structure preserved, cell text compressed)
+- Dates, version numbers, numeric values
+
+## Why This Matter
+
+`CLAUDE.md` loads on **every session start**. A 1000-token project memory file costs tokens every single time you open a project. Over 100 sessions that's 100,000 tokens of overhead — just for context you already wrote.
+
+Caveman cut that by ~46% on average. Same instructions. Same accuracy. Less waste.
+
+```
+┌────────────────────────────────────────────┐
+│  TOKEN SAVINGS PER FILE    █████       46% │
+│  SESSIONS THAT BENEFIT     ██████████ 100% │
+│  INFORMATION PRESERVED     ██████████ 100% │
+│  SETUP TIME                █            1x │
+└────────────────────────────────────────────┘
+```
+
+## Part of Caveman
+
+This skill is part of the [caveman](https://github.com/JuliusBrussee/caveman) toolkit — making Claude use fewer tokens without losing accuracy.
+
+- **caveman** — make Claude *speak* like caveman (cuts response tokens ~65%)
+- **caveman-compress** — make Claude *read* less (cuts context tokens ~46%)

.agents/skills/caveman-compress/SECURITY.md

@@ -0,0 +1,31 @@
+# Security
+
+## Snyk High Risk Rating
+
+`caveman-compress` receives a Snyk High Risk rating due to static analysis heuristics. This document explains what the skill does and does not do.
+
+### What triggers the rating
+
+1. **subprocess usage**: The skill calls the `claude` CLI via `subprocess.run()` as a fallback when `ANTHROPIC_API_KEY` is not set. The subprocess call uses a fixed argument list — no shell interpolation occurs. User file content is passed via stdin, not as a shell argument.
+
+2. **File read/write**: The skill reads the file the user explicitly points it at, compresses it, and writes the result back to the same path. A `.original.md` backup is saved alongside it. No files outside the user-specified path are read or written.
+
+### What the skill does NOT do
+
+- Does not execute user file content as code
+- Does not make network requests except to Anthropic's API (via SDK or CLI)
+- Does not access files outside the path the user provides
+- Does not use shell=True or string interpolation in subprocess calls
+- Does not collect or transmit any data beyond the file being compressed
+
+### Auth behavior
+
+If `ANTHROPIC_API_KEY` is set, the skill uses the Anthropic Python SDK directly (no subprocess). If not set, it falls back to the `claude` CLI, which uses the user's existing Claude desktop authentication.
+
+### File size limit
+
+Files larger than 500KB are rejected before any API call is made.
+
+### Reporting a vulnerability
+
+If you believe you've found a genuine security issue, please open a GitHub issue with the label `security`.

.agents/skills/caveman-compress/SKILL.md

@@ -0,0 +1,111 @@
+---
+name: caveman-compress
+description: >
+  Compress natural language memory files (CLAUDE.md, todos, preferences) into caveman format
+  to save input tokens. Preserves all technical substance, code, URLs, and structure.
+  Compressed version overwrites the original file. Human-readable backup saved as FILE.original.md.
+  Trigger: /caveman:compress <filepath> or "compress memory file"
+---
+
+# Caveman Compress
+
+## Purpose
+
+Compress natural language files (CLAUDE.md, todos, preferences) into caveman-speak to reduce input tokens. Compressed version overwrites original. Human-readable backup saved as `<filename>.original.md`.
+
+## Trigger
+
+`/caveman:compress <filepath>` or when user asks to compress a memory file.
+
+## Process
+
+1. The compression scripts live in `caveman-compress/scripts/` (adjacent to this SKILL.md). If the path is not immediately available, search for `caveman-compress/scripts/__main__.py`.
+
+2. Run:
+
+cd caveman-compress && python3 -m scripts <absolute_filepath>
+
+3. The CLI will:
+- detect file type (no tokens)
+- call Claude to compress
+- validate output (no tokens)
+- if errors: cherry-pick fix with Claude (targeted fixes only, no recompression)
+- retry up to 2 times
+- if still failing after 2 retries: report error to user, leave original file untouched
+
+4. Return result to user
+
+## Compression Rules
+
+### Remove
+- Articles: a, an, the
+- Filler: just, really, basically, actually, simply, essentially, generally
+- Pleasantries: "sure", "certainly", "of course", "happy to", "I'd recommend"
+- Hedging: "it might be worth", "you could consider", "it would be good to"
+- Redundant phrasing: "in order to" → "to", "make sure to" → "ensure", "the reason is because" → "because"
+- Connective fluff: "however", "furthermore", "additionally", "in addition"
+
+### Preserve EXACTLY (never modify)
+- Code blocks (fenced ``` and indented)
+- Inline code (`backtick content`)
+- URLs and links (full URLs, markdown links)
+- File paths (`/src/components/...`, `./config.yaml`)
+- Commands (`npm install`, `git commit`, `docker build`)
+- Technical terms (library names, API names, protocols, algorithms)
+- Proper nouns (project names, people, companies)
+- Dates, version numbers, numeric values
+- Environment variables (`$HOME`, `NODE_ENV`)
+
+### Preserve Structure
+- All markdown headings (keep exact heading text, compress body below)
+- Bullet point hierarchy (keep nesting level)
+- Numbered lists (keep numbering)
+- Tables (compress cell text, keep structure)
+- Frontmatter/YAML headers in markdown files
+
+### Compress
+- Use short synonyms: "big" not "extensive", "fix" not "implement a solution for", "use" not "utilize"
+- Fragments OK: "Run tests before commit" not "You should always run tests before committing"
+- Drop "you should", "make sure to", "remember to" — just state the action
+- Merge redundant bullets that say the same thing differently
+- Keep one example where multiple examples show the same pattern
+
+CRITICAL RULE:
+Anything inside ``` ... ``` must be copied EXACTLY.
+Do not:
+- remove comments
+- remove spacing
+- reorder lines
+- shorten commands
+- simplify anything
+
+Inline code (`...`) must be preserved EXACTLY.
+Do not modify anything inside backticks.
+
+If file contains code blocks:
+- Treat code blocks as read-only regions
+- Only compress text outside them
+- Do not merge sections around code
+
+## Pattern
+
+Original:
+> You should always make sure to run the test suite before pushing any changes to the main branch. This is important because it helps catch bugs early and prevents broken builds from being deployed to production.
+
+Compressed:
+> Run tests before push to main. Catch bugs early, prevent broken prod deploys.
+
+Original:
+> The application uses a microservices architecture with the following components. The API gateway handles all incoming requests and routes them to the appropriate service. The authentication service is responsible for managing user sessions and JWT tokens.
+
+Compressed:
+> Microservices architecture. API gateway route all requests to services. Auth service manage user sessions + JWT tokens.
+
+## Boundaries
+
+- ONLY compress natural language files (.md, .txt, extensionless)
+- NEVER modify: .py, .js, .ts, .json, .yaml, .yml, .toml, .env, .lock, .css, .html, .xml, .sql, .sh
+- If file has mixed content (prose + code), compress ONLY the prose sections
+- If unsure whether something is code or prose, leave it unchanged
+- Original file is backed up as FILE.original.md before overwriting
+- Never compress FILE.original.md (skip it)

.agents/skills/caveman-compress/scripts/__init__.py

@@ -0,0 +1,9 @@
+"""Caveman compress scripts.
+
+This package provides tools to compress natural language markdown files
+into caveman format to save input tokens.
+"""
+
+__all__ = ["cli", "compress", "detect", "validate"]
+
+__version__ = "1.0.0"

.agents/skills/caveman-compress/scripts/__main__.py

@@ -0,0 +1,3 @@
+from .cli import main
+
+main()

.agents/skills/caveman-compress/scripts/benchmark.py

@@ -0,0 +1,78 @@
+#!/usr/bin/env python3
+from pathlib import Path
+import sys
+
+# Support both direct execution and module import
+try:
+    from .validate import validate
+except ImportError:
+    sys.path.insert(0, str(Path(__file__).parent))
+    from validate import validate
+
+try:
+    import tiktoken
+    _enc = tiktoken.get_encoding("o200k_base")
+except ImportError:
+    _enc = None
+
+
+def count_tokens(text):
+    if _enc is None:
+        return len(text.split())  # fallback: word count
+    return len(_enc.encode(text))
+
+
+def benchmark_pair(orig_path: Path, comp_path: Path):
+    orig_text = orig_path.read_text()
+    comp_text = comp_path.read_text()
+
+    orig_tokens = count_tokens(orig_text)
+    comp_tokens = count_tokens(comp_text)
+    saved = 100 * (orig_tokens - comp_tokens) / orig_tokens if orig_tokens > 0 else 0.0
+    result = validate(orig_path, comp_path)
+
+    return (comp_path.name, orig_tokens, comp_tokens, saved, result.is_valid)
+
+
+def print_table(rows):
+    print("\n| File | Original | Compressed | Saved % | Valid |")
+    print("|------|----------|------------|---------|-------|")
+    for r in rows:
+        print(f"| {r[0]} | {r[1]} | {r[2]} | {r[3]:.1f}% | {'✅' if r[4] else '❌'} |")
+
+
+def main():
+    # Direct file pair: python3 benchmark.py original.md compressed.md
+    if len(sys.argv) == 3:
+        orig = Path(sys.argv[1]).resolve()
+        comp = Path(sys.argv[2]).resolve()
+        if not orig.exists():
+            print(f"❌ Not found: {orig}")
+            sys.exit(1)
+        if not comp.exists():
+            print(f"❌ Not found: {comp}")
+            sys.exit(1)
+        print_table([benchmark_pair(orig, comp)])
+        return
+
+    # Glob mode: repo_root/tests/caveman-compress/
+    tests_dir = Path(__file__).parent.parent.parent / "tests" / "caveman-compress"
+    if not tests_dir.exists():
+        print(f"❌ Tests dir not found: {tests_dir}")
+        sys.exit(1)
+
+    rows = []
+    for orig in sorted(tests_dir.glob("*.original.md")):
+        comp = orig.with_name(orig.stem.removesuffix(".original") + ".md")
+        if comp.exists():
+            rows.append(benchmark_pair(orig, comp))
+
+    if not rows:
+        print("No compressed file pairs found.")
+        return
+
+    print_table(rows)
+
+
+if __name__ == "__main__":
+    main()

.agents/skills/caveman-compress/scripts/cli.py

@@ -0,0 +1,73 @@
+#!/usr/bin/env python3
+"""
+Caveman Compress CLI
+
+Usage:
+    caveman <filepath>
+"""
+
+import sys
+from pathlib import Path
+
+from .compress import compress_file
+from .detect import detect_file_type, should_compress
+
+
+def print_usage():
+    print("Usage: caveman <filepath>")
+
+
+def main():
+    if len(sys.argv) != 2:
+        print_usage()
+        sys.exit(1)
+
+    filepath = Path(sys.argv[1])
+
+    # Check file exists
+    if not filepath.exists():
+        print(f"❌ File not found: {filepath}")
+        sys.exit(1)
+
+    if not filepath.is_file():
+        print(f"❌ Not a file: {filepath}")
+        sys.exit(1)
+
+    filepath = filepath.resolve()
+
+    # Detect file type
+    file_type = detect_file_type(filepath)
+
+    print(f"Detected: {file_type}")
+
+    # Check if compressible
+    if not should_compress(filepath):
+        print("Skipping: file is not natural language (code/config)")
+        sys.exit(0)
+
+    print("Starting caveman compression...\n")
+
+    try:
+        success = compress_file(filepath)
+
+        if success:
+            print("\nCompression completed successfully")
+            backup_path = filepath.with_name(filepath.stem + ".original.md")
+            print(f"Compressed: {filepath}")
+            print(f"Original:   {backup_path}")
+            sys.exit(0)
+        else:
+            print("\n❌ Compression failed after retries")
+            sys.exit(2)
+
+    except KeyboardInterrupt:
+        print("\nInterrupted by user")
+        sys.exit(130)
+
+    except Exception as e:
+        print(f"\n❌ Error: {e}")
+        sys.exit(1)
+
+
+if __name__ == "__main__":
+    main()

.agents/skills/caveman-compress/scripts/compress.py

@@ -0,0 +1,227 @@
+#!/usr/bin/env python3
+"""
+Caveman Memory Compression Orchestrator
+
+Usage:
+    python scripts/compress.py <filepath>
+"""
+
+import os
+import re
+import subprocess
+from pathlib import Path
+from typing import List
+
+OUTER_FENCE_REGEX = re.compile(
+    r"\A\s*(`{3,}|~{3,})[^\n]*\n(.*)\n\1\s*\Z", re.DOTALL
+)
+
+# Filenames and paths that almost certainly hold secrets or PII. Compressing
+# them ships raw bytes to the Anthropic API — a third-party data boundary that
+# developers on sensitive codebases cannot cross. detect.py already skips .env
+# by extension, but credentials.md / secrets.txt / ~/.aws/credentials would
+# slip through the natural-language filter. This is a hard refuse before read.
+SENSITIVE_BASENAME_REGEX = re.compile(
+    r"(?ix)^("
+    r"\.env(\..+)?"
+    r"|\.netrc"
+    r"|credentials(\..+)?"
+    r"|secrets?(\..+)?"
+    r"|passwords?(\..+)?"
+    r"|id_(rsa|dsa|ecdsa|ed25519)(\.pub)?"
+    r"|authorized_keys"
+    r"|known_hosts"
+    r"|.*\.(pem|key|p12|pfx|crt|cer|jks|keystore|asc|gpg)"
+    r")$"
+)
+
+SENSITIVE_PATH_COMPONENTS = frozenset({".ssh", ".aws", ".gnupg", ".kube", ".docker"})
+
+SENSITIVE_NAME_TOKENS = (
+    "secret", "credential", "password", "passwd",
+    "apikey", "accesskey", "token", "privatekey",
+)
+
+
+def is_sensitive_path(filepath: Path) -> bool:
+    """Heuristic denylist for files that must never be shipped to a third-party API."""
+    name = filepath.name
+    if SENSITIVE_BASENAME_REGEX.match(name):
+        return True
+    lowered_parts = {p.lower() for p in filepath.parts}
+    if lowered_parts & SENSITIVE_PATH_COMPONENTS:
+        return True
+    # Normalize separators so "api-key" and "api_key" both match "apikey".
+    lower = re.sub(r"[_\-\s.]", "", name.lower())
+    return any(tok in lower for tok in SENSITIVE_NAME_TOKENS)
+
+
+def strip_llm_wrapper(text: str) -> str:
+    """Strip outer ```markdown ... ``` fence when it wraps the entire output."""
+    m = OUTER_FENCE_REGEX.match(text)
+    if m:
+        return m.group(2)
+    return text
+
+from .detect import should_compress
+from .validate import validate
+
+MAX_RETRIES = 2
+
+
+# ---------- Claude Calls ----------
+
+
+def call_claude(prompt: str) -> str:
+    api_key = os.environ.get("ANTHROPIC_API_KEY")
+    if api_key:
+        try:
+            import anthropic
+
+            client = anthropic.Anthropic(api_key=api_key)
+            msg = client.messages.create(
+                model=os.environ.get("CAVEMAN_MODEL", "claude-sonnet-4-5"),
+                max_tokens=8192,
+                messages=[{"role": "user", "content": prompt}],
+            )
+            return strip_llm_wrapper(msg.content[0].text.strip())
+        except ImportError:
+            pass  # anthropic not installed, fall back to CLI
+    # Fallback: use claude CLI (handles desktop auth)
+    try:
+        result = subprocess.run(
+            ["claude", "--print"],
+            input=prompt,
+            text=True,
+            capture_output=True,
+            check=True,
+        )
+        return strip_llm_wrapper(result.stdout.strip())
+    except subprocess.CalledProcessError as e:
+        raise RuntimeError(f"Claude call failed:\n{e.stderr}")
+
+
+def build_compress_prompt(original: str) -> str:
+    return f"""
+Compress this markdown into caveman format.
+
+STRICT RULES:
+- Do NOT modify anything inside ``` code blocks
+- Do NOT modify anything inside inline backticks
+- Preserve ALL URLs exactly
+- Preserve ALL headings exactly
+- Preserve file paths and commands
+- Return ONLY the compressed markdown body — do NOT wrap the entire output in a ```markdown fence or any other fence. Inner code blocks from the original stay as-is; do not add a new outer fence around the whole file.
+
+Only compress natural language.
+
+TEXT:
+{original}
+"""
+
+
+def build_fix_prompt(original: str, compressed: str, errors: List[str]) -> str:
+    errors_str = "\n".join(f"- {e}" for e in errors)
+    return f"""You are fixing a caveman-compressed markdown file. Specific validation errors were found.
+
+CRITICAL RULES:
+- DO NOT recompress or rephrase the file
+- ONLY fix the listed errors — leave everything else exactly as-is
+- The ORIGINAL is provided as reference only (to restore missing content)
+- Preserve caveman style in all untouched sections
+
+ERRORS TO FIX:
+{errors_str}
+
+HOW TO FIX:
+- Missing URL: find it in ORIGINAL, restore it exactly where it belongs in COMPRESSED
+- Code block mismatch: find the exact code block in ORIGINAL, restore it in COMPRESSED
+- Heading mismatch: restore the exact heading text from ORIGINAL into COMPRESSED
+- Do not touch any section not mentioned in the errors
+
+ORIGINAL (reference only):
+{original}
+
+COMPRESSED (fix this):
+{compressed}
+
+Return ONLY the fixed compressed file. No explanation.
+"""
+
+
+# ---------- Core Logic ----------
+
+
+def compress_file(filepath: Path) -> bool:
+    # Resolve and validate path
+    filepath = filepath.resolve()
+    MAX_FILE_SIZE = 500_000  # 500KB
+    if not filepath.exists():
+        raise FileNotFoundError(f"File not found: {filepath}")
+    if filepath.stat().st_size > MAX_FILE_SIZE:
+        raise ValueError(f"File too large to compress safely (max 500KB): {filepath}")
+
+    # Refuse files that look like they contain secrets or PII. Compressing ships
+    # the raw bytes to the Anthropic API — a third-party boundary — so we fail
+    # loudly rather than silently exfiltrate credentials or keys. Override is
+    # intentional: the user must rename the file if the heuristic is wrong.
+    if is_sensitive_path(filepath):
+        raise ValueError(
+            f"Refusing to compress {filepath}: filename looks sensitive "
+            "(credentials, keys, secrets, or known private paths). "
+            "Compression sends file contents to the Anthropic API. "
+            "Rename the file if this is a false positive."
+        )
+
+    print(f"Processing: {filepath}")
+
+    if not should_compress(filepath):
+        print("Skipping (not natural language)")
+        return False
+
+    original_text = filepath.read_text(errors="ignore")
+    backup_path = filepath.with_name(filepath.stem + ".original.md")
+
+    # Check if backup already exists to prevent accidental overwriting
+    if backup_path.exists():
+        print(f"⚠️ Backup file already exists: {backup_path}")
+        print("The original backup may contain important content.")
+        print("Aborting to prevent data loss. Please remove or rename the backup file if you want to proceed.")
+        return False
+
+    # Step 1: Compress
+    print("Compressing with Claude...")
+    compressed = call_claude(build_compress_prompt(original_text))
+
+    # Save original as backup, write compressed to original path
+    backup_path.write_text(original_text)
+    filepath.write_text(compressed)
+
+    # Step 2: Validate + Retry
+    for attempt in range(MAX_RETRIES):
+        print(f"\nValidation attempt {attempt + 1}")
+
+        result = validate(backup_path, filepath)
+
+        if result.is_valid:
+            print("Validation passed")
+            break
+
+        print("❌ Validation failed:")
+        for err in result.errors:
+            print(f"   - {err}")
+
+        if attempt == MAX_RETRIES - 1:
+            # Restore original on failure
+            filepath.write_text(original_text)
+            backup_path.unlink(missing_ok=True)
+            print("❌ Failed after retries — original restored")
+            return False
+
+        print("Fixing with Claude...")
+        compressed = call_claude(
+            build_fix_prompt(original_text, compressed, result.errors)
+        )
+        filepath.write_text(compressed)
+
+    return True

.agents/skills/caveman-compress/scripts/detect.py

@@ -0,0 +1,121 @@
+#!/usr/bin/env python3
+"""Detect whether a file is natural language (compressible) or code/config (skip)."""
+
+import json
+import re
+from pathlib import Path
+
+# Extensions that are natural language and compressible
+COMPRESSIBLE_EXTENSIONS = {".md", ".txt", ".markdown", ".rst"}
+
+# Extensions that are code/config and should be skipped
+SKIP_EXTENSIONS = {
+    ".py", ".js", ".ts", ".tsx", ".jsx", ".json", ".yaml", ".yml",
+    ".toml", ".env", ".lock", ".css", ".scss", ".html", ".xml",
+    ".sql", ".sh", ".bash", ".zsh", ".go", ".rs", ".java", ".c",
+    ".cpp", ".h", ".hpp", ".rb", ".php", ".swift", ".kt", ".lua",
+    ".dockerfile", ".makefile", ".csv", ".ini", ".cfg",
+}
+
+# Patterns that indicate a line is code
+CODE_PATTERNS = [
+    re.compile(r"^\s*(import |from .+ import |require\(|const |let |var )"),
+    re.compile(r"^\s*(def |class |function |async function |export )"),
+    re.compile(r"^\s*(if\s*\(|for\s*\(|while\s*\(|switch\s*\(|try\s*\{)"),
+    re.compile(r"^\s*[\}\]\);]+\s*$"),  # closing braces/brackets
+    re.compile(r"^\s*@\w+"),  # decorators/annotations
+    re.compile(r'^\s*"[^"]+"\s*:\s*'),  # JSON-like key-value
+    re.compile(r"^\s*\w+\s*=\s*[{\[\(\"']"),  # assignment with literal
+]
+
+
+def _is_code_line(line: str) -> bool:
+    """Check if a line looks like code."""
+    return any(p.match(line) for p in CODE_PATTERNS)
+
+
+def _is_json_content(text: str) -> bool:
+    """Check if content is valid JSON."""
+    try:
+        json.loads(text)
+        return True
+    except (json.JSONDecodeError, ValueError):
+        return False
+
+
+def _is_yaml_content(lines: list[str]) -> bool:
+    """Heuristic: check if content looks like YAML."""
+    yaml_indicators = 0
+    for line in lines[:30]:
+        stripped = line.strip()
+        if stripped.startswith("---"):
+            yaml_indicators += 1
+        elif re.match(r"^\w[\w\s]*:\s", stripped):
+            yaml_indicators += 1
+        elif stripped.startswith("- ") and ":" in stripped:
+            yaml_indicators += 1
+    # If most non-empty lines look like YAML
+    non_empty = sum(1 for l in lines[:30] if l.strip())
+    return non_empty > 0 and yaml_indicators / non_empty > 0.6
+
+
+def detect_file_type(filepath: Path) -> str:
+    """Classify a file as 'natural_language', 'code', 'config', or 'unknown'.
+
+    Returns:
+        One of: 'natural_language', 'code', 'config', 'unknown'
+    """
+    ext = filepath.suffix.lower()
+
+    # Extension-based classification
+    if ext in COMPRESSIBLE_EXTENSIONS:
+        return "natural_language"
+    if ext in SKIP_EXTENSIONS:
+        return "code" if ext not in {".json", ".yaml", ".yml", ".toml", ".ini", ".cfg", ".env"} else "config"
+
+    # Extensionless files (like CLAUDE.md, TODO) — check content
+    if not ext:
+        try:
+            text = filepath.read_text(errors="ignore")
+        except (OSError, PermissionError):
+            return "unknown"
+
+        lines = text.splitlines()[:50]
+
+        if _is_json_content(text[:10000]):
+            return "config"
+        if _is_yaml_content(lines):
+            return "config"
+
+        code_lines = sum(1 for l in lines if l.strip() and _is_code_line(l))
+        non_empty = sum(1 for l in lines if l.strip())
+        if non_empty > 0 and code_lines / non_empty > 0.4:
+            return "code"
+
+        return "natural_language"
+
+    return "unknown"
+
+
+def should_compress(filepath: Path) -> bool:
+    """Return True if the file is natural language and should be compressed."""
+    if not filepath.is_file():
+        return False
+    # Skip backup files
+    if filepath.name.endswith(".original.md"):
+        return False
+    return detect_file_type(filepath) == "natural_language"
+
+
+if __name__ == "__main__":
+    import sys
+
+    if len(sys.argv) < 2:
+        print("Usage: python detect.py <file1> [file2] ...")
+        sys.exit(1)
+
+    for path_str in sys.argv[1:]:
+        p = Path(path_str).resolve()
+        file_type = detect_file_type(p)
+        compress = should_compress(p)
+        print(f"  {p.name:30s} type={file_type:20s} compress={compress}")

.agents/skills/caveman-compress/scripts/validate.py

@@ -0,0 +1,189 @@
+#!/usr/bin/env python3
+import re
+from pathlib import Path
+
+URL_REGEX = re.compile(r"https?://[^\s)]+")
+FENCE_OPEN_REGEX = re.compile(r"^(\s{0,3})(`{3,}|~{3,})(.*)$")
+HEADING_REGEX = re.compile(r"^(#{1,6})\s+(.*)", re.MULTILINE)
+BULLET_REGEX = re.compile(r"^\s*[-*+]\s+", re.MULTILINE)
+
+# crude but effective path detection
+# Requires either a path prefix (./ ../ / or drive letter) or a slash/backslash within the match
+PATH_REGEX = re.compile(r"(?:\./|\.\./|/|[A-Za-z]:\\)[\w\-/\\\.]+|[\w\-\.]+[/\\][\w\-/\\\.]+")
+
+
+class ValidationResult:
+    def __init__(self):
+        self.is_valid = True
+        self.errors = []
+        self.warnings = []
+
+    def add_error(self, msg):
+        self.is_valid = False
+        self.errors.append(msg)
+
+    def add_warning(self, msg):
+        self.warnings.append(msg)
+
+
+def read_file(path: Path) -> str:
+    return path.read_text(errors="ignore")
+
+
+# ---------- Extractors ----------
+
+
+def extract_headings(text):
+    return [(level, title.strip()) for level, title in HEADING_REGEX.findall(text)]
+
+
+def extract_code_blocks(text):
+    """Line-based fenced code block extractor.
+
+    Handles ``` and ~~~ fences with variable length (CommonMark: closing
+    fence must use same char and be at least as long as opening). Supports
+    nested fences (e.g. an outer 4-backtick block wrapping inner 3-backtick
+    content).
+    """
+    blocks = []
+    lines = text.split("\n")
+    i = 0
+    n = len(lines)
+    while i < n:
+        m = FENCE_OPEN_REGEX.match(lines[i])
+        if not m:
+            i += 1
+            continue
+        fence_char = m.group(2)[0]
+        fence_len = len(m.group(2))
+        open_line = lines[i]
+        block_lines = [open_line]
+        i += 1
+        closed = False
+        while i < n:
+            close_m = FENCE_OPEN_REGEX.match(lines[i])
+            if (
+                close_m
+                and close_m.group(2)[0] == fence_char
+                and len(close_m.group(2)) >= fence_len
+                and close_m.group(3).strip() == ""
+            ):
+                block_lines.append(lines[i])
+                closed = True
+                i += 1
+                break
+            block_lines.append(lines[i])
+            i += 1
+        if closed:
+            blocks.append("\n".join(block_lines))
+        # Unclosed fences are silently skipped — they indicate malformed markdown
+        # and including them would cause false-positive validation failures.
+    return blocks
+
+
+def extract_urls(text):
+    return set(URL_REGEX.findall(text))
+
+
+def extract_paths(text):
+    return set(PATH_REGEX.findall(text))
+
+
+def count_bullets(text):
+    return len(BULLET_REGEX.findall(text))
+
+
+# ---------- Validators ----------
+
+
+def validate_headings(orig, comp, result):
+    h1 = extract_headings(orig)
+    h2 = extract_headings(comp)
+
+    if len(h1) != len(h2):
+        result.add_error(f"Heading count mismatch: {len(h1)} vs {len(h2)}")
+
+    if h1 != h2:
+        result.add_warning("Heading text/order changed")
+
+
+def validate_code_blocks(orig, comp, result):
+    c1 = extract_code_blocks(orig)
+    c2 = extract_code_blocks(comp)
+
+    if c1 != c2:
+        result.add_error("Code blocks not preserved exactly")
+
+
+def validate_urls(orig, comp, result):
+    u1 = extract_urls(orig)
+    u2 = extract_urls(comp)
+
+    if u1 != u2:
+        result.add_error(f"URL mismatch: lost={u1 - u2}, added={u2 - u1}")
+
+
+def validate_paths(orig, comp, result):
+    p1 = extract_paths(orig)
+    p2 = extract_paths(comp)
+
+    if p1 != p2:
+        result.add_warning(f"Path mismatch: lost={p1 - p2}, added={p2 - p1}")
+
+
+def validate_bullets(orig, comp, result):
+    b1 = count_bullets(orig)
+    b2 = count_bullets(comp)
+
+    if b1 == 0:
+        return
+
+    diff = abs(b1 - b2) / b1
+
+    if diff > 0.15:
+        result.add_warning(f"Bullet count changed too much: {b1} -> {b2}")
+
+
+# ---------- Main ----------
+
+
+def validate(original_path: Path, compressed_path: Path) -> ValidationResult:
+    result = ValidationResult()
+
+    orig = read_file(original_path)
+    comp = read_file(compressed_path)
+
+    validate_headings(orig, comp, result)
+    validate_code_blocks(orig, comp, result)
+    validate_urls(orig, comp, result)
+    validate_paths(orig, comp, result)
+    validate_bullets(orig, comp, result)
+
+    return result
+
+
+# ---------- CLI ----------
+
+if __name__ == "__main__":
+    import sys
+
+    if len(sys.argv) != 3:
+        print("Usage: python validate.py <original> <compressed>")
+        sys.exit(1)
+
+    orig = Path(sys.argv[1]).resolve()
+    comp = Path(sys.argv[2]).resolve()
+
+    res = validate(orig, comp)
+
+    print(f"\nValid: {res.is_valid}")
+
+    if res.errors:
+        print("\nErrors:")
+        for e in res.errors:
+            print(f"  - {e}")
+
+    if res.warnings:
+        print("\nWarnings:")
+        for w in res.warnings:
+            print(f"  - {w}")

.agents/skills/caveman-help/SKILL.md

@@ -0,0 +1,59 @@
+---
+name: caveman-help
+description: >
+  Quick-reference card for all caveman modes, skills, and commands.
+  One-shot display, not a persistent mode. Trigger: /caveman-help,
+  "caveman help", "what caveman commands", "how do I use caveman".
+---
+
+# Caveman Help
+
+Display this reference card when invoked. One-shot — do NOT change mode, write flag files, or persist anything. Output in caveman style.
+
+## Modes
+
+| Mode | Trigger | What change |
+|------|---------|-------------|
+| **Lite** | `/caveman lite` | Drop filler. Keep sentence structure. |
+| **Full** | `/caveman` | Drop articles, filler, pleasantries, hedging. Fragments OK. Default. |
+| **Ultra** | `/caveman ultra` | Extreme compression. Bare fragments. Tables over prose. |
+| **Wenyan-Lite** | `/caveman wenyan-lite` | Classical Chinese style, light compression. |
+| **Wenyan-Full** | `/caveman wenyan` | Full 文言文. Maximum classical terseness. |
+| **Wenyan-Ultra** | `/caveman wenyan-ultra` | Extreme. Ancient scholar on a budget. |
+
+Mode stick until changed or session end.
+
+## Skills
+
+| Skill | Trigger | What it do |
+|-------|---------|-----------|
+| **caveman-commit** | `/caveman-commit` | Terse commit messages. Conventional Commits. ≤50 char subject. |
+| **caveman-review** | `/caveman-review` | One-line PR comments: `L42: bug: user null. Add guard.` |
+| **caveman-compress** | `/caveman:compress <file>` | Compress .md files to caveman prose. Saves ~46% input tokens. |
+| **caveman-help** | `/caveman-help` | This card. |
+
+## Deactivate
+
+Say "stop caveman" or "normal mode". Resume anytime with `/caveman`.
+
+## Configure Default Mode
+
+Default mode = `full`. Change it:
+
+**Environment variable** (highest priority):
+```bash
+export CAVEMAN_DEFAULT_MODE=ultra
+```
+
+**Config file** (`~/.config/caveman/config.json`):
+```json
+{ "defaultMode": "lite" }
+```
+
+Set `"off"` to disable auto-activation on session start. User can still activate manually with `/caveman`.
+
+Resolution: env var > config file > `full`.
+
+## More
+
+Full docs: https://github.com/JuliusBrussee/caveman

.agents/skills/caveman/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: caveman
+description: >
+  Ultra-compressed communication mode. Cuts token usage ~75% by speaking like caveman
+  while keeping full technical accuracy. Supports intensity levels: lite, full (default), ultra,
+  wenyan-lite, wenyan-full, wenyan-ultra.
+  Use when user says "caveman mode", "talk like caveman", "use caveman", "less tokens",
+  "be brief", or invokes /caveman. Also auto-triggers when token efficiency is requested.
+---
+
+Respond terse like smart caveman. All technical substance stay. Only fluff die.
+
+## Persistence
+
+ACTIVE EVERY RESPONSE. No revert after many turns. No filler drift. Still active if unsure. Off only: "stop caveman" / "normal mode".
+
+Default: **full**. Switch: `/caveman lite|full|ultra`.
+
+## Rules
+
+Drop: articles (a/an/the), filler (just/really/basically/actually/simply), pleasantries (sure/certainly/of course/happy to), hedging. Fragments OK. Short synonyms (big not extensive, fix not "implement a solution for"). Technical terms exact. Code blocks unchanged. Errors quoted exact.
+
+Pattern: `[thing] [action] [reason]. [next step].`
+
+Not: "Sure! I'd be happy to help you with that. The issue you're experiencing is likely caused by..."
+Yes: "Bug in auth middleware. Token expiry check use `<` not `<=`. Fix:"
+
+## Intensity
+
+| Level | What change |
+|-------|------------|
+| **lite** | No filler/hedging. Keep articles + full sentences. Professional but tight |
+| **full** | Drop articles, fragments OK, short synonyms. Classic caveman |
+| **ultra** | Abbreviate (DB/auth/config/req/res/fn/impl), strip conjunctions, arrows for causality (X → Y), one word when one word enough |
+| **wenyan-lite** | Semi-classical. Drop filler/hedging but keep grammar structure, classical register |
+| **wenyan-full** | Maximum classical terseness. Fully 文言文. 80-90% character reduction. Classical sentence patterns, verbs precede objects, subjects often omitted, classical particles (之/乃/為/其) |
+| **wenyan-ultra** | Extreme abbreviation while keeping classical Chinese feel. Maximum compression, ultra terse |
+
+Example — "Why React component re-render?"
+- lite: "Your component re-renders because you create a new object reference each render. Wrap it in `useMemo`."
+- full: "New object ref each render. Inline object prop = new ref = re-render. Wrap in `useMemo`."
+- ultra: "Inline obj prop → new ref → re-render. `useMemo`."
+- wenyan-lite: "組件頻重繪，以每繪新生對象參照故。以 useMemo 包之。"
+- wenyan-full: "物出新參照，致重繪。useMemo .Wrap之。"
+- wenyan-ultra: "新參照→重繪。useMemo Wrap。"
+
+Example — "Explain database connection pooling."
+- lite: "Connection pooling reuses open connections instead of creating new ones per request. Avoids repeated handshake overhead."
+- full: "Pool reuse open DB connections. No new connection per request. Skip handshake overhead."
+- ultra: "Pool = reuse DB conn. Skip handshake → fast under load."
+- wenyan-full: "池reuse open connection。不每req新開。skip handshake overhead。"
+- wenyan-ultra: "池reuse conn。skip handshake → fast。"
+
+## Auto-Clarity
+
+Drop caveman for: security warnings, irreversible action confirmations, multi-step sequences where fragment order risks misread, user asks to clarify or repeats question. Resume caveman after clear part done.
+
+Example — destructive op:
+> **Warning:** This will permanently delete all rows in the `users` table and cannot be undone.
+> ```sql
+> DROP TABLE users;
+> ```
+> Caveman resume. Verify backup exist first.
+
+## Boundaries
+
+Code/commits/PRs: write normal. "stop caveman" or "normal mode": revert. Level persist until changed or session end.

.agents/skills/compress/SKILL.md

@@ -0,0 +1,111 @@
+---
+name: compress
+description: >
+  Compress natural language memory files (CLAUDE.md, todos, preferences) into caveman format
+  to save input tokens. Preserves all technical substance, code, URLs, and structure.
+  Compressed version overwrites the original file. Human-readable backup saved as FILE.original.md.
+  Trigger: /caveman:compress <filepath> or "compress memory file"
+---
+
+# Caveman Compress
+
+## Purpose
+
+Compress natural language files (CLAUDE.md, todos, preferences) into caveman-speak to reduce input tokens. Compressed version overwrites original. Human-readable backup saved as `<filename>.original.md`.
+
+## Trigger
+
+`/caveman:compress <filepath>` or when user asks to compress a memory file.
+
+## Process
+
+1. This SKILL.md lives alongside `scripts/` in the same directory. Find that directory.
+
+2. Run:
+
+cd <directory_containing_this_SKILL.md> && python3 -m scripts <absolute_filepath>
+
+3. The CLI will:
+- detect file type (no tokens)
+- call Claude to compress
+- validate output (no tokens)
+- if errors: cherry-pick fix with Claude (targeted fixes only, no recompression)
+- retry up to 2 times
+- if still failing after 2 retries: report error to user, leave original file untouched
+
+4. Return result to user
+
+## Compression Rules
+
+### Remove
+- Articles: a, an, the
+- Filler: just, really, basically, actually, simply, essentially, generally
+- Pleasantries: "sure", "certainly", "of course", "happy to", "I'd recommend"
+- Hedging: "it might be worth", "you could consider", "it would be good to"
+- Redundant phrasing: "in order to" → "to", "make sure to" → "ensure", "the reason is because" → "because"
+- Connective fluff: "however", "furthermore", "additionally", "in addition"
+
+### Preserve EXACTLY (never modify)
+- Code blocks (fenced ``` and indented)
+- Inline code (`backtick content`)
+- URLs and links (full URLs, markdown links)
+- File paths (`/src/components/...`, `./config.yaml`)
+- Commands (`npm install`, `git commit`, `docker build`)
+- Technical terms (library names, API names, protocols, algorithms)
+- Proper nouns (project names, people, companies)
+- Dates, version numbers, numeric values
+- Environment variables (`$HOME`, `NODE_ENV`)
+
+### Preserve Structure
+- All markdown headings (keep exact heading text, compress body below)
+- Bullet point hierarchy (keep nesting level)
+- Numbered lists (keep numbering)
+- Tables (compress cell text, keep structure)
+- Frontmatter/YAML headers in markdown files
+
+### Compress
+- Use short synonyms: "big" not "extensive", "fix" not "implement a solution for", "use" not "utilize"
+- Fragments OK: "Run tests before commit" not "You should always run tests before committing"
+- Drop "you should", "make sure to", "remember to" — just state the action
+- Merge redundant bullets that say the same thing differently
+- Keep one example where multiple examples show the same pattern
+
+CRITICAL RULE:
+Anything inside ``` ... ``` must be copied EXACTLY.
+Do not:
+- remove comments
+- remove spacing
+- reorder lines
+- shorten commands
+- simplify anything
+
+Inline code (`...`) must be preserved EXACTLY.
+Do not modify anything inside backticks.
+
+If file contains code blocks:
+- Treat code blocks as read-only regions
+- Only compress text outside them
+- Do not merge sections around code
+
+## Pattern
+
+Original:
+> You should always make sure to run the test suite before pushing any changes to the main branch. This is important because it helps catch bugs early and prevents broken builds from being deployed to production.
+
+Compressed:
+> Run tests before push to main. Catch bugs early, prevent broken prod deploys.
+
+Original:
+> The application uses a microservices architecture with the following components. The API gateway handles all incoming requests and routes them to the appropriate service. The authentication service is responsible for managing user sessions and JWT tokens.
+
+Compressed:
+> Microservices architecture. API gateway route all requests to services. Auth service manage user sessions + JWT tokens.
+
+## Boundaries
+
+- ONLY compress natural language files (.md, .txt, extensionless)
+- NEVER modify: .py, .js, .ts, .json, .yaml, .yml, .toml, .env, .lock, .css, .html, .xml, .sql, .sh
+- If file has mixed content (prose + code), compress ONLY the prose sections
+- If unsure whether something is code or prose, leave it unchanged
+- Original file is backed up as FILE.original.md before overwriting
+- Never compress FILE.original.md (skip it)

.agents/skills/compress/scripts/__init__.py

@@ -0,0 +1,9 @@
+"""Caveman compress scripts.
+
+This package provides tools to compress natural language markdown files
+into caveman format to save input tokens.
+"""
+
+__all__ = ["cli", "compress", "detect", "validate"]
+
+__version__ = "1.0.0"

.agents/skills/compress/scripts/__main__.py

@@ -0,0 +1,3 @@
+from .cli import main
+
+main()

.agents/skills/compress/scripts/benchmark.py

@@ -0,0 +1,78 @@
+#!/usr/bin/env python3
+from pathlib import Path
+import sys
+
+# Support both direct execution and module import
+try:
+    from .validate import validate
+except ImportError:
+    sys.path.insert(0, str(Path(__file__).parent))
+    from validate import validate
+
+try:
+    import tiktoken
+    _enc = tiktoken.get_encoding("o200k_base")
+except ImportError:
+    _enc = None
+
+
+def count_tokens(text):
+    if _enc is None:
+        return len(text.split())  # fallback: word count
+    return len(_enc.encode(text))
+
+
+def benchmark_pair(orig_path: Path, comp_path: Path):
+    orig_text = orig_path.read_text()
+    comp_text = comp_path.read_text()
+
+    orig_tokens = count_tokens(orig_text)
+    comp_tokens = count_tokens(comp_text)
+    saved = 100 * (orig_tokens - comp_tokens) / orig_tokens if orig_tokens > 0 else 0.0
+    result = validate(orig_path, comp_path)
+
+    return (comp_path.name, orig_tokens, comp_tokens, saved, result.is_valid)
+
+
+def print_table(rows):
+    print("\n| File | Original | Compressed | Saved % | Valid |")
+    print("|------|----------|------------|---------|-------|")
+    for r in rows:
+        print(f"| {r[0]} | {r[1]} | {r[2]} | {r[3]:.1f}% | {'✅' if r[4] else '❌'} |")
+
+
+def main():
+    # Direct file pair: python3 benchmark.py original.md compressed.md
+    if len(sys.argv) == 3:
+        orig = Path(sys.argv[1]).resolve()
+        comp = Path(sys.argv[2]).resolve()
+        if not orig.exists():
+            print(f"❌ Not found: {orig}")
+            sys.exit(1)
+        if not comp.exists():
+            print(f"❌ Not found: {comp}")
+            sys.exit(1)
+        print_table([benchmark_pair(orig, comp)])
+        return
+
+    # Glob mode: repo_root/tests/caveman-compress/
+    tests_dir = Path(__file__).parent.parent.parent / "tests" / "caveman-compress"
+    if not tests_dir.exists():
+        print(f"❌ Tests dir not found: {tests_dir}")
+        sys.exit(1)
+
+    rows = []
+    for orig in sorted(tests_dir.glob("*.original.md")):
+        comp = orig.with_name(orig.stem.removesuffix(".original") + ".md")
+        if comp.exists():
+            rows.append(benchmark_pair(orig, comp))
+
+    if not rows:
+        print("No compressed file pairs found.")
+        return
+
+    print_table(rows)
+
+
+if __name__ == "__main__":
+    main()

.agents/skills/compress/scripts/cli.py

@@ -0,0 +1,73 @@
+#!/usr/bin/env python3
+"""
+Caveman Compress CLI
+
+Usage:
+    caveman <filepath>
+"""
+
+import sys
+from pathlib import Path
+
+from .compress import compress_file
+from .detect import detect_file_type, should_compress
+
+
+def print_usage():
+    print("Usage: caveman <filepath>")
+
+
+def main():
+    if len(sys.argv) != 2:
+        print_usage()
+        sys.exit(1)
+
+    filepath = Path(sys.argv[1])
+
+    # Check file exists
+    if not filepath.exists():
+        print(f"❌ File not found: {filepath}")
+        sys.exit(1)
+
+    if not filepath.is_file():
+        print(f"❌ Not a file: {filepath}")
+        sys.exit(1)
+
+    filepath = filepath.resolve()
+
+    # Detect file type
+    file_type = detect_file_type(filepath)
+
+    print(f"Detected: {file_type}")
+
+    # Check if compressible
+    if not should_compress(filepath):
+        print("Skipping: file is not natural language (code/config)")
+        sys.exit(0)
+
+    print("Starting caveman compression...\n")
+
+    try:
+        success = compress_file(filepath)
+
+        if success:
+            print("\nCompression completed successfully")
+            backup_path = filepath.with_name(filepath.stem + ".original.md")
+            print(f"Compressed: {filepath}")
+            print(f"Original:   {backup_path}")
+            sys.exit(0)
+        else:
+            print("\n❌ Compression failed after retries")
+            sys.exit(2)
+
+    except KeyboardInterrupt:
+        print("\nInterrupted by user")
+        sys.exit(130)
+
+    except Exception as e:
+        print(f"\n❌ Error: {e}")
+        sys.exit(1)
+
+
+if __name__ == "__main__":
+    main()

.agents/skills/compress/scripts/compress.py

@@ -0,0 +1,227 @@
+#!/usr/bin/env python3
+"""
+Caveman Memory Compression Orchestrator
+
+Usage:
+    python scripts/compress.py <filepath>
+"""
+
+import os
+import re
+import subprocess
+from pathlib import Path
+from typing import List
+
+OUTER_FENCE_REGEX = re.compile(
+    r"\A\s*(`{3,}|~{3,})[^\n]*\n(.*)\n\1\s*\Z", re.DOTALL
+)
+
+# Filenames and paths that almost certainly hold secrets or PII. Compressing
+# them ships raw bytes to the Anthropic API — a third-party data boundary that
+# developers on sensitive codebases cannot cross. detect.py already skips .env
+# by extension, but credentials.md / secrets.txt / ~/.aws/credentials would
+# slip through the natural-language filter. This is a hard refuse before read.
+SENSITIVE_BASENAME_REGEX = re.compile(
+    r"(?ix)^("
+    r"\.env(\..+)?"
+    r"|\.netrc"
+    r"|credentials(\..+)?"
+    r"|secrets?(\..+)?"
+    r"|passwords?(\..+)?"
+    r"|id_(rsa|dsa|ecdsa|ed25519)(\.pub)?"
+    r"|authorized_keys"
+    r"|known_hosts"
+    r"|.*\.(pem|key|p12|pfx|crt|cer|jks|keystore|asc|gpg)"
+    r")$"
+)
+
+SENSITIVE_PATH_COMPONENTS = frozenset({".ssh", ".aws", ".gnupg", ".kube", ".docker"})
+
+SENSITIVE_NAME_TOKENS = (
+    "secret", "credential", "password", "passwd",
+    "apikey", "accesskey", "token", "privatekey",
+)
+
+
+def is_sensitive_path(filepath: Path) -> bool:
+    """Heuristic denylist for files that must never be shipped to a third-party API."""
+    name = filepath.name
+    if SENSITIVE_BASENAME_REGEX.match(name):
+        return True
+    lowered_parts = {p.lower() for p in filepath.parts}
+    if lowered_parts & SENSITIVE_PATH_COMPONENTS:
+        return True
+    # Normalize separators so "api-key" and "api_key" both match "apikey".
+    lower = re.sub(r"[_\-\s.]", "", name.lower())
+    return any(tok in lower for tok in SENSITIVE_NAME_TOKENS)
+
+
+def strip_llm_wrapper(text: str) -> str:
+    """Strip outer ```markdown ... ``` fence when it wraps the entire output."""
+    m = OUTER_FENCE_REGEX.match(text)
+    if m:
+        return m.group(2)
+    return text
+
+from .detect import should_compress
+from .validate import validate
+
+MAX_RETRIES = 2
+
+
+# ---------- Claude Calls ----------
+
+
+def call_claude(prompt: str) -> str:
+    api_key = os.environ.get("ANTHROPIC_API_KEY")
+    if api_key:
+        try:
+            import anthropic
+
+            client = anthropic.Anthropic(api_key=api_key)
+            msg = client.messages.create(
+                model=os.environ.get("CAVEMAN_MODEL", "claude-sonnet-4-5"),
+                max_tokens=8192,
+                messages=[{"role": "user", "content": prompt}],
+            )
+            return strip_llm_wrapper(msg.content[0].text.strip())
+        except ImportError:
+            pass  # anthropic not installed, fall back to CLI
+    # Fallback: use claude CLI (handles desktop auth)
+    try:
+        result = subprocess.run(
+            ["claude", "--print"],
+            input=prompt,
+            text=True,
+            capture_output=True,
+            check=True,
+        )
+        return strip_llm_wrapper(result.stdout.strip())
+    except subprocess.CalledProcessError as e:
+        raise RuntimeError(f"Claude call failed:\n{e.stderr}")
+
+
+def build_compress_prompt(original: str) -> str:
+    return f"""
+Compress this markdown into caveman format.
+
+STRICT RULES:
+- Do NOT modify anything inside ``` code blocks
+- Do NOT modify anything inside inline backticks
+- Preserve ALL URLs exactly
+- Preserve ALL headings exactly
+- Preserve file paths and commands
+- Return ONLY the compressed markdown body — do NOT wrap the entire output in a ```markdown fence or any other fence. Inner code blocks from the original stay as-is; do not add a new outer fence around the whole file.
+
+Only compress natural language.
+
+TEXT:
+{original}
+"""
+
+
+def build_fix_prompt(original: str, compressed: str, errors: List[str]) -> str:
+    errors_str = "\n".join(f"- {e}" for e in errors)
+    return f"""You are fixing a caveman-compressed markdown file. Specific validation errors were found.
+
+CRITICAL RULES:
+- DO NOT recompress or rephrase the file
+- ONLY fix the listed errors — leave everything else exactly as-is
+- The ORIGINAL is provided as reference only (to restore missing content)
+- Preserve caveman style in all untouched sections
+
+ERRORS TO FIX:
+{errors_str}
+
+HOW TO FIX:
+- Missing URL: find it in ORIGINAL, restore it exactly where it belongs in COMPRESSED
+- Code block mismatch: find the exact code block in ORIGINAL, restore it in COMPRESSED
+- Heading mismatch: restore the exact heading text from ORIGINAL into COMPRESSED
+- Do not touch any section not mentioned in the errors
+
+ORIGINAL (reference only):
+{original}
+
+COMPRESSED (fix this):
+{compressed}
+
+Return ONLY the fixed compressed file. No explanation.
+"""
+
+
+# ---------- Core Logic ----------
+
+
+def compress_file(filepath: Path) -> bool:
+    # Resolve and validate path
+    filepath = filepath.resolve()
+    MAX_FILE_SIZE = 500_000  # 500KB
+    if not filepath.exists():
+        raise FileNotFoundError(f"File not found: {filepath}")
+    if filepath.stat().st_size > MAX_FILE_SIZE:
+        raise ValueError(f"File too large to compress safely (max 500KB): {filepath}")
+
+    # Refuse files that look like they contain secrets or PII. Compressing ships
+    # the raw bytes to the Anthropic API — a third-party boundary — so we fail
+    # loudly rather than silently exfiltrate credentials or keys. Override is
+    # intentional: the user must rename the file if the heuristic is wrong.
+    if is_sensitive_path(filepath):
+        raise ValueError(
+            f"Refusing to compress {filepath}: filename looks sensitive "
+            "(credentials, keys, secrets, or known private paths). "
+            "Compression sends file contents to the Anthropic API. "
+            "Rename the file if this is a false positive."
+        )
+
+    print(f"Processing: {filepath}")
+
+    if not should_compress(filepath):
+        print("Skipping (not natural language)")
+        return False
+
+    original_text = filepath.read_text(errors="ignore")
+    backup_path = filepath.with_name(filepath.stem + ".original.md")
+
+    # Check if backup already exists to prevent accidental overwriting
+    if backup_path.exists():
+        print(f"⚠️ Backup file already exists: {backup_path}")
+        print("The original backup may contain important content.")
+        print("Aborting to prevent data loss. Please remove or rename the backup file if you want to proceed.")
+        return False
+
+    # Step 1: Compress
+    print("Compressing with Claude...")
+    compressed = call_claude(build_compress_prompt(original_text))
+
+    # Save original as backup, write compressed to original path
+    backup_path.write_text(original_text)
+    filepath.write_text(compressed)
+
+    # Step 2: Validate + Retry
+    for attempt in range(MAX_RETRIES):
+        print(f"\nValidation attempt {attempt + 1}")
+
+        result = validate(backup_path, filepath)
+
+        if result.is_valid:
+            print("Validation passed")
+            break
+
+        print("❌ Validation failed:")
+        for err in result.errors:
+            print(f"   - {err}")
+
+        if attempt == MAX_RETRIES - 1:
+            # Restore original on failure
+            filepath.write_text(original_text)
+            backup_path.unlink(missing_ok=True)
+            print("❌ Failed after retries — original restored")
+            return False
+
+        print("Fixing with Claude...")
+        compressed = call_claude(
+            build_fix_prompt(original_text, compressed, result.errors)
+        )
+        filepath.write_text(compressed)
+
+    return True

.agents/skills/compress/scripts/detect.py

@@ -0,0 +1,121 @@
+#!/usr/bin/env python3
+"""Detect whether a file is natural language (compressible) or code/config (skip)."""
+
+import json
+import re
+from pathlib import Path
+
+# Extensions that are natural language and compressible
+COMPRESSIBLE_EXTENSIONS = {".md", ".txt", ".markdown", ".rst"}
+
+# Extensions that are code/config and should be skipped
+SKIP_EXTENSIONS = {
+    ".py", ".js", ".ts", ".tsx", ".jsx", ".json", ".yaml", ".yml",
+    ".toml", ".env", ".lock", ".css", ".scss", ".html", ".xml",
+    ".sql", ".sh", ".bash", ".zsh", ".go", ".rs", ".java", ".c",
+    ".cpp", ".h", ".hpp", ".rb", ".php", ".swift", ".kt", ".lua",
+    ".dockerfile", ".makefile", ".csv", ".ini", ".cfg",
+}
+
+# Patterns that indicate a line is code
+CODE_PATTERNS = [
+    re.compile(r"^\s*(import |from .+ import |require\(|const |let |var )"),
+    re.compile(r"^\s*(def |class |function |async function |export )"),
+    re.compile(r"^\s*(if\s*\(|for\s*\(|while\s*\(|switch\s*\(|try\s*\{)"),
+    re.compile(r"^\s*[\}\]\);]+\s*$"),  # closing braces/brackets
+    re.compile(r"^\s*@\w+"),  # decorators/annotations
+    re.compile(r'^\s*"[^"]+"\s*:\s*'),  # JSON-like key-value
+    re.compile(r"^\s*\w+\s*=\s*[{\[\(\"']"),  # assignment with literal
+]
+
+
+def _is_code_line(line: str) -> bool:
+    """Check if a line looks like code."""
+    return any(p.match(line) for p in CODE_PATTERNS)
+
+
+def _is_json_content(text: str) -> bool:
+    """Check if content is valid JSON."""
+    try:
+        json.loads(text)
+        return True
+    except (json.JSONDecodeError, ValueError):
+        return False
+
+
+def _is_yaml_content(lines: list[str]) -> bool:
+    """Heuristic: check if content looks like YAML."""
+    yaml_indicators = 0
+    for line in lines[:30]:
+        stripped = line.strip()
+        if stripped.startswith("---"):
+            yaml_indicators += 1
+        elif re.match(r"^\w[\w\s]*:\s", stripped):
+            yaml_indicators += 1
+        elif stripped.startswith("- ") and ":" in stripped:
+            yaml_indicators += 1
+    # If most non-empty lines look like YAML
+    non_empty = sum(1 for l in lines[:30] if l.strip())
+    return non_empty > 0 and yaml_indicators / non_empty > 0.6
+
+
+def detect_file_type(filepath: Path) -> str:
+    """Classify a file as 'natural_language', 'code', 'config', or 'unknown'.
+
+    Returns:
+        One of: 'natural_language', 'code', 'config', 'unknown'
+    """
+    ext = filepath.suffix.lower()
+
+    # Extension-based classification
+    if ext in COMPRESSIBLE_EXTENSIONS:
+        return "natural_language"
+    if ext in SKIP_EXTENSIONS:
+        return "code" if ext not in {".json", ".yaml", ".yml", ".toml", ".ini", ".cfg", ".env"} else "config"
+
+    # Extensionless files (like CLAUDE.md, TODO) — check content
+    if not ext:
+        try:
+            text = filepath.read_text(errors="ignore")
+        except (OSError, PermissionError):
+            return "unknown"
+
+        lines = text.splitlines()[:50]
+
+        if _is_json_content(text[:10000]):
+            return "config"
+        if _is_yaml_content(lines):
+            return "config"
+
+        code_lines = sum(1 for l in lines if l.strip() and _is_code_line(l))
+        non_empty = sum(1 for l in lines if l.strip())
+        if non_empty > 0 and code_lines / non_empty > 0.4:
+            return "code"
+
+        return "natural_language"
+
+    return "unknown"
+
+
+def should_compress(filepath: Path) -> bool:
+    """Return True if the file is natural language and should be compressed."""
+    if not filepath.is_file():
+        return False
+    # Skip backup files
+    if filepath.name.endswith(".original.md"):
+        return False
+    return detect_file_type(filepath) == "natural_language"
+
+
+if __name__ == "__main__":
+    import sys
+
+    if len(sys.argv) < 2:
+        print("Usage: python detect.py <file1> [file2] ...")
+        sys.exit(1)
+
+    for path_str in sys.argv[1:]:
+        p = Path(path_str).resolve()
+        file_type = detect_file_type(p)
+        compress = should_compress(p)
+        print(f"  {p.name:30s} type={file_type:20s} compress={compress}")

.agents/skills/compress/scripts/validate.py

@@ -0,0 +1,189 @@
+#!/usr/bin/env python3
+import re
+from pathlib import Path
+
+URL_REGEX = re.compile(r"https?://[^\s)]+")
+FENCE_OPEN_REGEX = re.compile(r"^(\s{0,3})(`{3,}|~{3,})(.*)$")
+HEADING_REGEX = re.compile(r"^(#{1,6})\s+(.*)", re.MULTILINE)
+BULLET_REGEX = re.compile(r"^\s*[-*+]\s+", re.MULTILINE)
+
+# crude but effective path detection
+# Requires either a path prefix (./ ../ / or drive letter) or a slash/backslash within the match
+PATH_REGEX = re.compile(r"(?:\./|\.\./|/|[A-Za-z]:\\)[\w\-/\\\.]+|[\w\-\.]+[/\\][\w\-/\\\.]+")
+
+
+class ValidationResult:
+    def __init__(self):
+        self.is_valid = True
+        self.errors = []
+        self.warnings = []
+
+    def add_error(self, msg):
+        self.is_valid = False
+        self.errors.append(msg)
+
+    def add_warning(self, msg):
+        self.warnings.append(msg)
+
+
+def read_file(path: Path) -> str:
+    return path.read_text(errors="ignore")
+
+
+# ---------- Extractors ----------
+
+
+def extract_headings(text):
+    return [(level, title.strip()) for level, title in HEADING_REGEX.findall(text)]
+
+
+def extract_code_blocks(text):
+    """Line-based fenced code block extractor.
+
+    Handles ``` and ~~~ fences with variable length (CommonMark: closing
+    fence must use same char and be at least as long as opening). Supports
+    nested fences (e.g. an outer 4-backtick block wrapping inner 3-backtick
+    content).
+    """
+    blocks = []
+    lines = text.split("\n")
+    i = 0
+    n = len(lines)
+    while i < n:
+        m = FENCE_OPEN_REGEX.match(lines[i])
+        if not m:
+            i += 1
+            continue
+        fence_char = m.group(2)[0]
+        fence_len = len(m.group(2))
+        open_line = lines[i]
+        block_lines = [open_line]
+        i += 1
+        closed = False
+        while i < n:
+            close_m = FENCE_OPEN_REGEX.match(lines[i])
+            if (
+                close_m
+                and close_m.group(2)[0] == fence_char
+                and len(close_m.group(2)) >= fence_len
+                and close_m.group(3).strip() == ""
+            ):
+                block_lines.append(lines[i])
+                closed = True
+                i += 1
+                break
+            block_lines.append(lines[i])
+            i += 1
+        if closed:
+            blocks.append("\n".join(block_lines))
+        # Unclosed fences are silently skipped — they indicate malformed markdown
+        # and including them would cause false-positive validation failures.
+    return blocks
+
+
+def extract_urls(text):
+    return set(URL_REGEX.findall(text))
+
+
+def extract_paths(text):
+    return set(PATH_REGEX.findall(text))
+
+
+def count_bullets(text):
+    return len(BULLET_REGEX.findall(text))
+
+
+# ---------- Validators ----------
+
+
+def validate_headings(orig, comp, result):
+    h1 = extract_headings(orig)
+    h2 = extract_headings(comp)
+
+    if len(h1) != len(h2):
+        result.add_error(f"Heading count mismatch: {len(h1)} vs {len(h2)}")
+
+    if h1 != h2:
+        result.add_warning("Heading text/order changed")
+
+
+def validate_code_blocks(orig, comp, result):
+    c1 = extract_code_blocks(orig)
+    c2 = extract_code_blocks(comp)
+
+    if c1 != c2:
+        result.add_error("Code blocks not preserved exactly")
+
+
+def validate_urls(orig, comp, result):
+    u1 = extract_urls(orig)
+    u2 = extract_urls(comp)
+
+    if u1 != u2:
+        result.add_error(f"URL mismatch: lost={u1 - u2}, added={u2 - u1}")
+
+
+def validate_paths(orig, comp, result):
+    p1 = extract_paths(orig)
+    p2 = extract_paths(comp)
+
+    if p1 != p2:
+        result.add_warning(f"Path mismatch: lost={p1 - p2}, added={p2 - p1}")
+
+
+def validate_bullets(orig, comp, result):
+    b1 = count_bullets(orig)
+    b2 = count_bullets(comp)
+
+    if b1 == 0:
+        return
+
+    diff = abs(b1 - b2) / b1
+
+    if diff > 0.15:
+        result.add_warning(f"Bullet count changed too much: {b1} -> {b2}")
+
+
+# ---------- Main ----------
+
+
+def validate(original_path: Path, compressed_path: Path) -> ValidationResult:
+    result = ValidationResult()
+
+    orig = read_file(original_path)
+    comp = read_file(compressed_path)
+
+    validate_headings(orig, comp, result)
+    validate_code_blocks(orig, comp, result)
+    validate_urls(orig, comp, result)
+    validate_paths(orig, comp, result)
+    validate_bullets(orig, comp, result)
+
+    return result
+
+
+# ---------- CLI ----------
+
+if __name__ == "__main__":
+    import sys
+
+    if len(sys.argv) != 3:
+        print("Usage: python validate.py <original> <compressed>")
+        sys.exit(1)
+
+    orig = Path(sys.argv[1]).resolve()
+    comp = Path(sys.argv[2]).resolve()
+
+    res = validate(orig, comp)
+
+    print(f"\nValid: {res.is_valid}")
+
+    if res.errors:
+        print("\nErrors:")
+        for e in res.errors:
+            print(f"  - {e}")
+
+    if res.warnings:
+        print("\nWarnings:")
+        for w in res.warnings:
+            print(f"  - {w}")

.babelrc

@@ -1,17 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react",
-    "@babel/preset-typescript"
-  ],
-  "plugins": [
-    "react-hot-loader/babel",
-    "@babel/transform-runtime",
-    "@babel/plugin-proposal-class-properties"
-  ],
-  "env": {
-    "production": {
-      "presets": ["minify"]
-    }
-  }
-}

.claude/skills/caveman

@@ -0,0 +1 @@
+../../.agents/skills/caveman

.claude/skills/caveman-compress

@@ -0,0 +1 @@
+../../.agents/skills/caveman-compress

.claude/skills/caveman-help

@@ -0,0 +1 @@
+../../.agents/skills/caveman-help

.claude/skills/compress

@@ -0,0 +1 @@
+../../.agents/skills/compress

.claude/skills/jsdoc/SKILL.md

@@ -0,0 +1,379 @@
+---
+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

.claude/skills/typescript/SKILL.md

@@ -0,0 +1,360 @@
+---
+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 Type Aliases Over Interfaces
+
+// Good: type alias for object shapes
+type User = {
+  id: string;
+  name: string;
+  email?: string;
+};
+
+// Avoid: interface for object shapes
+// interface User {
+//   id: string;
+//   name: string;
+// }
+
+// Type aliases work for everything: objects, unions, intersections, mapped types
+type Status = 'active' | 'inactive';
+type Combined = TypeA & TypeB;
+type Handler = (event: Event) => void;
+
+// Benefits of types over interfaces:
+// 1. Consistent syntax for all type definitions
+// 2. Cannot be merged/extended unexpectedly (no declaration merging)
+// 3. Better for union types and computed properties
+// 4. Works with utility types more naturally
+
+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

.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+comics
+userdata

.eslintrc.js

@@ -1,30 +0,0 @@
-module.exports = {
-  extends: [
-    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
-    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
-    "plugin:prettier/recommended", // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors.
-  ],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    sourceType: "module",
-    ecmaVersion: 2020,
-    ecmaFeatures: {
-      jsx: true, // Allows for the parsing of JSX
-    },
-  },
-  plugins: ["@typescript-eslint"],
-  settings: {
-    "import/resolver": {
-      node: {
-        extensions: [".js", ".jsx", ".ts", ".tsx"],
-      },
-    },
-    react: {
-      version: "detect", // Tells eslint-plugin-react to automatically detect the version of React to use
-    },
-  },
-  // Fine tune rules
-  rules: {
-    "@typescript-eslint/no-var-requires": 0,
-  },
-};

.github/workflows/docker-image.yml

@@ -0,0 +1,20 @@
+name: Docker Image CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@master
+    - name: Publish to Registry
+      uses: elgohr/Publish-Docker-Github-Action@v5
+      with:
+        name: frishi/threetwo
+        username: ${{ secrets.DOCKER_USERNAME }}
+        password: ${{ secrets.DOCKER_PASSWORD }}
+    

.gitignore

@@ -4,10 +4,19 @@ comics/
 docs/
 userdata/
 dist/
+storybook-static/*
 src/client/assets/scss/App.css
-server/
+/server/
 node_modules/
 src/**/*.jsx
 tests/__coverage__/
 tests/**/*.jsx
 src/client/assets/scss/App.css.map
+yarn-error.log
+.nova
+environment.list
+.env
+src/client/assets/img/missing-file.pxd
+*.pxd
+.parcel-cache
+src/stories

.prettierrc.js

@@ -1,4 +1,4 @@
-module.exports = {
-    semi: true,
-    trailingComma: "all",
+export default {
+  semi: true,
+  trailingComma: "all",
 };

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

.storybook/preview.ts

@@ -0,0 +1,18 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    backgrounds: {
+      default: "light",
+    },
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

.yarnclean

@@ -1,45 +0,0 @@
-# test directories
-__tests__
-test
-tests
-powered-test
-
-# asset directories
-docs
-doc
-website
-images
-assets
-
-# examples
-example
-examples
-
-# code coverage directories
-coverage
-.nyc_output
-
-# build scripts
-Makefile
-Gulpfile.js
-Gruntfile.js
-
-# configs
-appveyor.yml
-circle.yml
-codeship-services.yml
-codeship-steps.yml
-wercker.yml
-.tern-project
-.gitattributes
-.editorconfig
-.*ignore
-.eslintrc
-.jshintrc
-.flowconfig
-.documentup.json
-.yarn-metadata.json
-.travis.yml
-
-# misc
-*.md

Dockerfile

@@ -0,0 +1,36 @@
+# Use Node.js 22 as the base image
+FROM node:22-alpine
+
+LABEL maintainer="Rishi Ghan <rishi.ghan@gmail.com>"
+
+# Set the working directory inside the container
+WORKDIR /threetwo
+
+# Copy package.json and yarn.lock to leverage Docker cache
+COPY package.json yarn.lock ./
+
+# Install build dependencies necessary for native modules (for node-sass)
+RUN apk --no-cache add \
+    g++ \
+    make \
+    python3 \
+    autoconf \
+    automake \
+    libtool \
+    nasm \
+    git
+
+# Install node modules
+RUN yarn install --ignore-engines
+
+# Explicitly install sass
+RUN yarn add -D sass
+
+# Copy the rest of the application files into the container
+COPY . .
+
+# Expose the application port (default for Vite)
+EXPOSE 5173
+
+# Start the application with yarn
+ENTRYPOINT ["yarn", "start"]

README.md

@@ -0,0 +1,72 @@
+# ThreeTwo!
+
+ThreeTwo! _aims to be_ a comic book curation app.
+
+[![Docker Image CI](https://github.com/rishighan/threetwo/actions/workflows/docker-image.yml/badge.svg)](https://github.com/rishighan/threetwo/actions/workflows/docker-image.yml)
+
+### Screenshots
+
+#### Dashboard
+
+![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/Dashboard.jpg)
+
+#### Issue View
+
+![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/ComicDetail.jpg)
+
+#### DC++ Search
+
+![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/DC%2B%2BSearching.jpg)
+
+#### Import
+
+![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/Import.jpg)
+
+#### Comic Vine Matching, Metadata Scraping
+
+![](https://raw.githubusercontent.com/rishighan/threetwo/ef05dee6005f683f1e4547631217681def9ebe86/screenshots/CVMatching.jpg)
+
+### 🦄 Early Development Support Channel
+
+Please help me test the early builds of `ThreeTwo!` on its official [Discord](https://discord.gg/n4HZ4j33uT)
+
+Discuss ideas and implementations with me, and get status, progress updates!
+
+## Dependencies
+
+ThreeTwo! currently is set up as:
+
+1. The UI, this repo.
+2. [threetwo-core-service](https://github.com/rishighan/threetwo-core-service)
+3. [threetwo-metadata-service](https://github.com/rishighan/threetwo-metadata-service)
+4. [threetwo-acquisition-service](https://github.com/rishighan/threetwo-acquisition-service)
+5. [threetwo-ui-typings](https://github.com/rishighan/threetwo-frontend-types) which are the types used across the UI, installable as an `npm` dependency.
+
+## Docker Instructions
+
+See [threetwo-docker-compose](https://github.com/rishighan/threetwo-docker-compose) for instructions on building the entire stack.
+
+## Local Development
+
+For debugging and troubleshooting, you can run this app locally using these steps:
+
+1. Clone this repo using `git clone https://github.com/rishighan/threetwo.git`
+2. `yarn run dev` (you can ignore the warnings)
+3. This will open `http://localhost:5173` in your default browser
+4. Note that this is simply the UI layer and won't offer anything beyond a scaffold. You have to spin up the microservices locally to get it to work.
+
+## Troubleshooting
+
+### Docker
+
+1. `docker-compose up` is taking a long time
+
+   This is primarily because `threetwo-import-service` pulls `calibre` from the CDN and it has been known to be extremely slow. I can't find a more reliable alternative, so give it some time to finish downloading.
+
+2. What folder do my comics go in?
+
+   Your comics go in the `comics` directory at the root of this project.
+
+## Contribution Guidelines
+
+See [contribution guidelines](https://github.com/rishighan/threetwo/blob/master/contributing.md)

__mocks__/fileMock.cjs

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

codegen.yml

@@ -0,0 +1,16 @@
+schema: http://localhost:3000/graphql
+documents: 'src/client/graphql/**/*.graphql'
+generates:
+  src/client/graphql/generated.ts:
+    plugins:
+      - typescript
+      - typescript-operations
+      - typescript-react-query
+    config:
+      fetcher:
+        func: './fetcher#fetcher'
+        isReactHook: false
+      exposeFetcher: true
+      exposeQueryKeys: true
+      addInfiniteQuery: true
+      reactQueryVersion: 5

eslint.config.js

@@ -0,0 +1,59 @@
+import js from "@eslint/js";
+import typescript from "@typescript-eslint/eslint-plugin";
+import typescriptParser from "@typescript-eslint/parser";
+import react from "eslint-plugin-react";
+import prettier from "eslint-plugin-prettier";
+import cssModules from "eslint-plugin-css-modules";
+import storybook from "eslint-plugin-storybook";
+
+export default [
+  js.configs.recommended,
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        sourceType: "module",
+        ecmaVersion: 2020,
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    plugins: {
+      "@typescript-eslint": typescript,
+      react,
+      prettier,
+      "css-modules": cssModules,
+      storybook,
+    },
+    settings: {
+      "import/resolver": {
+        node: {
+          extensions: [".js", ".jsx", ".ts", ".tsx"],
+        },
+      },
+      react: {
+        version: "detect",
+      },
+    },
+    rules: {
+      ...typescript.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...prettier.configs.recommended.rules,
+      "@typescript-eslint/no-var-requires": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "react/react-in-jsx-scope": "off",
+      "no-undef": "off",
+    },
+  },
+  {
+    files: ["**/*.stories.{js,jsx,ts,tsx}"],
+    rules: {
+      ...storybook.configs.recommended.rules,
+    },
+  },
+  {
+    ignores: ["dist/**", "node_modules/**", "build/**"],
+  },
+];

funding.yml

@@ -0,0 +1 @@
+github: [rishighan]

index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Three Two!</title>
+  </head>
+
+  <body class="dark:bg-slate-600">
+    <div id="root"></div>
+    <script type="module" src="/src/client/index.tsx"></script>
+  </body>
+</html>

jest.config.cjs

@@ -0,0 +1,28 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.cjs'],
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/__mocks__/fileMock.cjs',
+  },
+  testMatch: [
+    '**/__tests__/**/*.+(ts|tsx|js)',
+    '**/?(*.)+(spec|test).+(ts|tsx|js)',
+  ],
+  transform: {
+    '^.+\\.(ts|tsx)$': ['ts-jest', {
+      tsconfig: {
+        jsx: 'react',
+        esModuleInterop: true,
+        allowSyntheticDefaultImports: true,
+      },
+    }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/**/*.stories.tsx',
+  ],
+};

jest.setup.cjs

@@ -0,0 +1,25 @@
+require('@testing-library/jest-dom');
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+// Mock localStorage
+const localStorageMock = {
+  getItem: jest.fn(),
+  setItem: jest.fn(),
+  removeItem: jest.fn(),
+  clear: jest.fn(),
+};
+global.localStorage = localStorageMock;

jsdoc.json

@@ -1,22 +1,25 @@
 {
-  "tags": { "allowUnknownTags": true },
-  "source": {
-    "include": ["./src/"],
-    "includePattern": "\\.(jsx|js|ts|tsx)$"
-  },
-  "plugins": [
-    "better-docs/component",
-    "better-docs/category",
-    "plugins/markdown",
-    "node_modules/better-docs/typescript"
-  ],
-  "templates": { "better-docs": { "name": "My React components" } },
-  "opts": {
-    "destination": "docs/",
-    "readme": "README.md",
-    "recurse": true,
-    "encoding": "utf8",
-    "verbose": true,
-    "template": "node_modules/better-docs"
-  }
-}
+    "tags": {
+        "allowUnknownTags": false
+    },
+    "source": {
+        "include": [
+          "./src/client"
+        ],
+        "includePattern": "\\.(jsx|js|ts|tsx)$"
+    },
+    "plugins": [
+        "plugins/markdown"
+    ],
+    "opts": {
+        "template": "node_modules/tui-jsdoc-template",
+        "encoding": "utf8",
+        "destination": "docs/",
+        "recurse": true,
+        "verbose": true
+    },
+    "templates": {
+        "cleverLinks": false,
+        "monospaceLinks": false
+    }
+}

nodemon.json

@@ -1,13 +0,0 @@
-{
-  "ignore": [
-    "**/*.test.ts",
-    "**/*.spec.ts",
-    "node_modules",
-    "src/client"
-  ],
-  "watch": [
-    "src/server"
-  ],
-  "exec": "tsc -p tsconfig.server.json && node server/",
-  "ext": "ts"
-}

package.json

@@ -1,150 +1,153 @@
 {
   "name": "threetwo",
-  "version": "0.0.2",
-  "description": "ThreeTwo! A comic book curator.",
-  "main": "server/index.js",
-  "typings": "server/index.js",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "ThreeTwo! A good comic book curator.",
   "scripts": {
-    "build": "webpack --mode production",
-    "start": "npm run build && npm run server",
-    "client": "webpack serve --mode development --devtool inline-source-map --hot",
-    "server": "tsc -p tsconfig.server.json && node server/",
-    "dev": "concurrently \"nodemon\" \"npm run client\"",
-    "server-dev": "nodemon",
-    "docs": "jsdoc -c jsdoc.json"
+    "build": "vite build",
+    "dev": "rimraf dist && yarn build && vite",
+    "start": "yarn build && vite",
+    "docs": "jsdoc -c jsdoc.json",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "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"
   },
   "author": "Rishi Ghan",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.13.17",
-    "@bluelovers/fast-glob": "^3.0.4",
-    "@types/event-stream": "^3.3.34",
-    "@types/mime-types": "^2.1.0",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.2",
-    "@types/react-redux": "^7.1.16",
-    "@types/react-router-dom": "^5.1.7",
-    "@types/sharp": "^0.28.0",
-    "@types/socket.io": "^3.0.2",
-    "@types/socket.io-client": "^3.0.0",
-    "@types/through2": "^2.0.36",
-    "airdcpp-apisocket": "^2.4.1",
-    "antd": "^4.16.5",
-    "babel-polyfill": "^6.26.0",
-    "better-docs": "^2.3.2",
-    "calibre-opds": "^1.0.7",
-    "comlink-loader": "^2.0.0",
-    "ellipsize": "^0.1.0",
-    "event-stream": "^4.0.1",
-    "express": "^4.17.1",
-    "fastest-validator": "^1.11.0",
-    "final-form": "^4.20.2",
-    "fs-extra": "^9.1.0",
-    "http-response-stream": "^1.0.7",
-    "imghash": "^0.0.8",
-    "jsdoc": "^3.6.7",
-    "opds-extra": "^3.0.9",
-    "pretty-bytes": "^5.6.0",
-    "react": "^17.0.1",
-    "react-collapsible": "^2.8.3",
-    "react-dom": "^17.0.1",
-    "react-final-form": "^6.5.3",
-    "react-spinners": "^0.11.0",
-    "react-window-dynamic-list": "^2.3.5",
-    "sharp": "^0.28.1",
-    "socket.io-client": "^4.1.2",
-    "threetwo-ui-typings": "^1.0.1",
-    "voca": "^1.4.0",
-    "websocket": "^1.0.34",
-    "ws": "^7.5.3",
-    "ws-calibre": "bluelovers/ws-calibre",
-    "xregexp": "^5.0.2"
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@floating-ui/react": "^0.27.18",
+    "@floating-ui/react-dom": "^2.1.7",
+    "@popperjs/core": "^2.11.8",
+    "@tailwindcss/vite": "^4.2.2",
+    "@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",
+    "@vitejs/plugin-react": "^5.1.4",
+    "airdcpp-apisocket": "^3.0.0-beta.14",
+    "axios": "^1.13.5",
+    "axios-cache-interceptor": "^1.11.4",
+    "axios-rate-limit": "^1.6.2",
+    "babel-plugin-styled-components": "^2.1.4",
+    "date-fns": "^4.1.0",
+    "dayjs": "^1.11.19",
+    "ellipsize": "^0.7.0",
+    "embla-carousel-react": "^8.6.0",
+    "filename-parser": "^1.0.4",
+    "final-form": "^5.0.0",
+    "final-form-arrays": "^4.0.0",
+    "focus-trap-react": "^12.0.0",
+    "graphql": "^16.13.1",
+    "history": "^5.3.0",
+    "html-to-text": "^9.0.5",
+    "i18next": "^25.8.13",
+    "i18next-browser-languagedetector": "^8.2.1",
+    "i18next-http-backend": "^3.0.2",
+    "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",
+    "react": "^19.2.4",
+    "react-collapsible": "^2.10.0",
+    "react-comic-viewer": "^0.5.1",
+    "react-day-picker": "^9.13.2",
+    "react-dom": "^19.2.4",
+    "react-fast-compare": "^3.2.2",
+    "react-final-form": "^7.0.0",
+    "react-final-form-arrays": "^4.0.0",
+    "react-i18next": "^16.5.4",
+    "react-loader-spinner": "^8.0.2",
+    "react-modal": "^3.16.3",
+    "react-router": "^7.13.1",
+    "react-router-dom": "^7.13.1",
+    "react-select": "^5.10.2",
+    "react-select-async-paginate": "^0.7.11",
+    "react-sliding-pane": "^7.3.0",
+    "react-textarea-autosize": "^8.5.9",
+    "react-toastify": "^11.0.5",
+    "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",
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.10",
-    "@babel/core": "^7.13.10",
-    "@babel/plugin-transform-runtime": "^7.13.15",
-    "@babel/preset-env": "^7.13.10",
-    "@babel/preset-react": "^7.12.13",
-    "@babel/preset-typescript": "^7.13.0",
-    "@fortawesome/fontawesome-free": "^5.15.3",
-    "@root/walk": "^1.1.0",
-    "@tsconfig/node14": "^1.0.0",
-    "@types/express": "^4.17.8",
-    "@types/jest": "^26.0.20",
-    "@types/lodash": "^4.14.168",
-    "@types/mongoose": "^5.7.37",
-    "@types/node": "^14.14.34",
-    "@types/pino": "^6.3.7",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.2",
-    "@types/react-redux": "^7.1.16",
-    "@types/unzipper": "^0.10.3",
-    "@typescript-eslint/eslint-plugin": "^4.17.0",
-    "@typescript-eslint/parser": "^4.17.0",
-    "awesome-typescript-loader": "^5.2.1",
-    "axios": "^0.21.1",
-    "axios-rate-limit": "^1.3.0",
-    "babel-eslint": "^10.0.0",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "body-parser": "^1.19.0",
-    "buffer": "^6.0.3",
-    "bulma": "^0.9.3",
-    "clean-webpack-plugin": "^1.0.0",
-    "comlink": "^4.3.0",
-    "compromise": "^13.10.5",
-    "compromise-dates": "^2.0.1",
-    "compromise-numbers": "^1.2.0",
-    "compromise-sentences": "^0.2.0",
-    "concurrently": "^4.0.0",
-    "connected-react-router": "^6.9.1",
-    "css-loader": "^5.1.2",
-    "eslint": "^7.22.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
-    "etl": "^0.6.12",
-    "express": "^4.17.1",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.3.1",
-    "image-webpack-loader": "^7.0.1",
+    "@eslint/js": "^10.0.0",
+    "@graphql-codegen/cli": "^6.1.2",
+    "@graphql-codegen/typescript": "^5.0.8",
+    "@graphql-codegen/typescript-operations": "^5.0.8",
+    "@graphql-codegen/typescript-react-query": "^6.1.2",
+    "@iconify-json/solar": "^1.2.5",
+    "@iconify/json": "^2.2.443",
+    "@iconify/tailwind": "^1.2.0",
+    "@iconify/tailwind4": "^1.2.1",
+    "@iconify/utils": "^3.1.0",
+    "@storybook/addon-essentials": "^8.6.17",
+    "@storybook/addon-interactions": "^8.6.17",
+    "@storybook/addon-links": "^8.6.17",
+    "@storybook/addon-onboarding": "^8.6.17",
+    "@storybook/blocks": "^8.6.17",
+    "@storybook/react": "^8.6.17",
+    "@storybook/react-vite": "^8.6.17",
+    "@storybook/testing-library": "^0.2.2",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@tanstack/eslint-plugin-query": "^5.91.4",
+    "@tanstack/react-query-devtools": "^5.91.3",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/ellipsize": "^0.1.3",
+    "@types/html-to-text": "^9.0.4",
+    "@types/jest": "^30.0.0",
+    "@types/lodash": "^4.17.24",
+    "@types/node": "^25.6.0",
+    "@types/prop-types": "^15.7.15",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-table": "^7.7.20",
+    "autoprefixer": "^10.4.27",
+    "docdash": "^2.0.2",
+    "eslint": "^10.0.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-css-modules": "^2.12.0",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsdoc": "^62.7.1",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-storybook": "^0.11.1",
+    "identity-obj-proxy": "^3.0.0",
     "install": "^0.13.0",
-    "jest": "^26.6.3",
-    "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^1.4.1",
-    "mongoose": "^5.10.11",
-    "node-sass": "^5.0.0",
-    "node-unrar-js": "^1.0.1",
-    "nodemon": "^1.17.3",
-    "npm": "^7.9.0",
-    "pino": "^6.11.2",
-    "pino-pretty": "^4.7.1",
-    "prettier": "^2.2.1",
-    "qs": "^6.10.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-hot-loader": "^4.13.0",
-    "react-redux": "^7.2.3",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "redux-thunk": "^2.3.0",
-    "rimraf": "^3.0.2",
-    "sass-loader": "^11.0.1",
-    "source-map-loader": "^0.2.4",
-    "string-similarity": "^4.0.4",
-    "style-loader": "^2.0.0",
-    "tslint": "^6.1.3",
-    "typescript": "^4.2.3",
-    "unzipper": "^0.10.11",
-    "url-loader": "^1.0.1",
-    "webpack": "^5.33.2",
-    "webpack-cli": "^4.6.0",
-    "webpack-dev-server": "^3.11.2",
-    "webpack-merge": "^5.7.3"
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "postcss": "^8.5.6",
+    "postcss-import": "^16.1.1",
+    "prettier": "^3.8.1",
+    "react-refresh": "^0.18.0",
+    "rimraf": "^6.1.3",
+    "sass": "^1.97.3",
+    "storybook": "^8.6.17",
+    "tailwindcss": "^4.2.2",
+    "ts-jest": "^29.4.6",
+    "tui-jsdoc-template": "^1.2.2",
+    "typescript": "^6.0.2",
+    "wait-on": "^9.0.4"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
   }
 }

plans/import-directory-status.md

@@ -0,0 +1,211 @@
+# Implementation Plan: Directory Status Check for Import.tsx
+
+## Overview
+
+Add functionality to `Import.tsx` that checks if the required directories (`comics` and `userdata`) exist before allowing the import process to start. If either directory is missing, display a warning banner to the user and disable the import functionality.
+
+## API Endpoint
+
+- **Endpoint**: `GET /api/library/getDirectoryStatus`
+- **Response Structure**:
+```typescript
+interface DirectoryStatus {
+  comics: { exists: boolean };
+  userdata: { exists: boolean };
+}
+```
+
+## Implementation Details
+
+### 1. Add Directory Status Type
+
+In [`Import.tsx`](src/client/components/Import/Import.tsx:1), add a type definition for the directory status response:
+
+```typescript
+interface DirectoryStatus {
+  comics: { exists: boolean };
+  userdata: { exists: boolean };
+}
+```
+
+### 2. Create useQuery Hook for Directory Status
+
+Use `@tanstack/react-query` (already imported) to fetch directory status on component mount:
+
+```typescript
+const { data: directoryStatus, isLoading: isCheckingDirectories, error: directoryError } = useQuery({
+  queryKey: ['directoryStatus'],
+  queryFn: async (): Promise<DirectoryStatus> => {
+    const response = await axios.get('http://localhost:3000/api/library/getDirectoryStatus');
+    return response.data;
+  },
+  refetchOnWindowFocus: false,
+  staleTime: 30000, // Cache for 30 seconds
+});
+```
+
+### 3. Derive Missing Directories State
+
+Compute which directories are missing from the query result:
+
+```typescript
+const missingDirectories = useMemo(() => {
+  if (!directoryStatus) return [];
+  const missing: string[] = [];
+  if (!directoryStatus.comics?.exists) missing.push('comics');
+  if (!directoryStatus.userdata?.exists) missing.push('userdata');
+  return missing;
+}, [directoryStatus]);
+
+const hasAllDirectories = missingDirectories.length === 0;
+```
+
+### 4. Create Warning Banner Component
+
+Add a warning banner that displays when directories are missing, positioned above the import button. This uses the same styling patterns as the existing error banner:
+
+```tsx
+{/* Directory Status Warning */}
+{!isCheckingDirectories && missingDirectories.length > 0 && (
+  <div className="my-6 max-w-screen-lg rounded-lg border-s-4 border-amber-500 bg-amber-50 dark:bg-amber-900/20 p-4">
+    <div className="flex items-start gap-3">
+      <span className="w-6 h-6 text-amber-600 dark:text-amber-400 mt-0.5">
+        <i className="h-6 w-6 icon-[solar--folder-error-bold]"></i>
+      </span>
+      <div className="flex-1">
+        <p className="font-semibold text-amber-800 dark:text-amber-300">
+          Required Directories Missing
+        </p>
+        <p className="text-sm text-amber-700 dark:text-amber-400 mt-1">
+          The following directories do not exist and must be created before importing:
+        </p>
+        <ul className="list-disc list-inside text-sm text-amber-700 dark:text-amber-400 mt-2">
+          {missingDirectories.map((dir) => (
+            <li key={dir}>
+              <code className="bg-amber-100 dark:bg-amber-900/50 px-1 rounded">{dir}</code>
+            </li>
+          ))}
+        </ul>
+        <p className="text-sm text-amber-700 dark:text-amber-400 mt-2">
+          Please ensure these directories are mounted correctly in your Docker configuration.
+        </p>
+      </div>
+    </div>
+  </div>
+)}
+```
+
+### 5. Disable Import Button When Directories Missing
+
+Modify the button's `disabled` prop and click handler:
+
+```tsx
+<button
+  className="..."
+  onClick={handleForceReImport}
+  disabled={isForceReImporting || hasActiveSession || !hasAllDirectories}
+  title={!hasAllDirectories 
+    ? "Cannot import: Required directories are missing" 
+    : "Re-import all files to fix Elasticsearch indexing issues"}
+>
+```
+
+### 6. Update handleForceReImport Guard
+
+Add early return in the handler for missing directories:
+
+```typescript
+const handleForceReImport = async () => {
+  setImportError(null);
+  
+  // Check for missing directories
+  if (!hasAllDirectories) {
+    setImportError(
+      `Cannot start import: Required directories are missing (${missingDirectories.join(', ')}). Please check your Docker volume configuration.`
+    );
+    return;
+  }
+  
+  // ... existing logic
+};
+```
+
+## File Changes Summary
+
+| File | Changes |
+|------|---------|
+| [`src/client/components/Import/Import.tsx`](src/client/components/Import/Import.tsx) | Add useQuery for directory status, warning banner UI, disable button logic |
+| [`src/client/components/Import/Import.test.tsx`](src/client/components/Import/Import.test.tsx) | Add tests for directory status scenarios |
+
+## Test Cases to Add
+
+### Import.test.tsx Updates
+
+1. **Should show warning banner when comics directory is missing**
+2. **Should show warning banner when userdata directory is missing**  
+3. **Should show warning banner when both directories are missing**
+4. **Should disable import button when directories are missing**
+5. **Should enable import button when all directories exist**
+6. **Should handle directory status API error gracefully**
+
+Example test structure:
+
+```typescript
+describe('Import Component - Directory Status', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    // Mock successful directory status by default
+    (axios.get as jest.Mock) = jest.fn().mockResolvedValue({
+      data: { comics: { exists: true }, userdata: { exists: true } }
+    });
+  });
+
+  test('should show warning when comics directory is missing', async () => {
+    (axios.get as jest.Mock).mockResolvedValue({
+      data: { comics: { exists: false }, userdata: { exists: true } }
+    });
+    
+    render(<Import />, { wrapper: createWrapper() });
+    
+    await waitFor(() => {
+      expect(screen.getByText('Required Directories Missing')).toBeInTheDocument();
+      expect(screen.getByText('comics')).toBeInTheDocument();
+    });
+  });
+
+  test('should disable import button when directories are missing', async () => {
+    (axios.get as jest.Mock).mockResolvedValue({
+      data: { comics: { exists: false }, userdata: { exists: true } }
+    });
+    
+    render(<Import />, { wrapper: createWrapper() });
+    
+    await waitFor(() => {
+      const button = screen.getByRole('button', { name: /Force Re-Import/i });
+      expect(button).toBeDisabled();
+    });
+  });
+});
+```
+
+## Architecture Diagram
+
+```mermaid
+flowchart TD
+    A[Import Component Mounts] --> B[Fetch Directory Status]
+    B --> C{API Success?}
+    C -->|Yes| D{All Directories Exist?}
+    C -->|No| E[Show Error Banner]
+    D -->|Yes| F[Enable Import Button]
+    D -->|No| G[Show Warning Banner]
+    G --> H[Disable Import Button]
+    F --> I[User Clicks Import]
+    I --> J[Proceed with Import]
+```
+
+## Notes
+
+- The directory status is fetched once on mount with a 30-second stale time
+- The warning uses amber/yellow colors to differentiate from error messages (red)
+- The existing `importError` state and UI can remain unchanged
+- No changes needed to the backend - the endpoint already exists

postcss.config.js

@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    "postcss-import": {},
+    "@tailwindcss/postcss": {},
+    autoprefixer: {},
+  },
+};

public/index.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Three Two!</title>
-</head>
-
-<body>
-    <div id="root"></div>
-</body>
-
-</html>

skills-lock.json

@@ -0,0 +1,25 @@
+{
+  "version": 1,
+  "skills": {
+    "caveman": {
+      "source": "JuliusBrussee/caveman",
+      "sourceType": "github",
+      "computedHash": "a818cdc41dcfaa50dd891c5cb5e5705968338de02e7e37949ca56e8c30ad4176"
+    },
+    "caveman-compress": {
+      "source": "JuliusBrussee/caveman",
+      "sourceType": "github",
+      "computedHash": "300fb8578258161e1752a2a4142a7e9ff178c960bcb83b84422e2987421f33bf"
+    },
+    "caveman-help": {
+      "source": "JuliusBrussee/caveman",
+      "sourceType": "github",
+      "computedHash": "3cd5f7d3f88c8ef7b16a6555dc61f5a11b14151386697609ab6887ab8b5f059d"
+    },
+    "compress": {
+      "source": "JuliusBrussee/caveman",
+      "sourceType": "github",
+      "computedHash": "05c97bc3120108acd0b80bdef7fb4fa7c224ba83c8d384ccbc97f92e8a065918"
+    }
+  }
+}

src/app.css

@@ -0,0 +1,47 @@
+@import "tailwindcss";
+@config "../tailwind.config.ts";
+
+html, body {
+  overflow-x: hidden;
+}
+
+/* Custom Project Fonts */
+@font-face {
+  font-family: "PP Object Sans Regular";
+  src: url("/fonts/PPObjectSans-Regular.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "PP Object Sans Heavy";
+  src: url("/fonts/PPObjectSans-Heavy.otf") format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "PP Object Sans Slanted";
+  src: url("/fonts/PPObjectSans-Slanted.otf") format("opentype");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "PP Object Sans HeavySlanted";
+  src: url("/fonts/PPObjectSans-HeavySlanted.otf") format("opentype");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Hasklig Regular";
+  src: url("/fonts/Hasklig-Regular.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}

src/client/README.md

@@ -1,159 +1,18 @@
-# Client side boilerplate with ReactJS library and Typescript
+## ThreeTwo UI 
 
-## Introduction
+##### I have tried my best to document the project through folder organization, comments, and actual JSDocs where applicable. Unit tests and I have not agreed for a long time now, and I think it won't change anytime soon.
 
-In the client side boilerplate, Typescript has been used to achieve a more structured and maintainable source code. ReactJS library which is one of the most important libraries for UI development alongside the other big names in the market, has been picked over to build the presentation layer of the application. Also for CSS, Less has been used to make CSS more functional.
 
-### Less
+This folder houses all the components, utils and libraries that make up ThreeTwo's UI
 
-[Less](http://lesscss.org/) is a backwards-compatible language extension for CSS. Less helps to write CSS in a functional way and It's really easy to read and understand.
+It is based on React 18, and uses:
 
-### ESLint
+1. _zustand_ 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
 
-[ESLint](https://eslint.org/) is a pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript and Typescript.
 
-[.eslintrc.json file](<(https://eslint.org/docs/user-guide/configuring)>) (alternatively configurations can be written in Javascript or YAML as well) is used describe the configurations required for ESLint. Below is the .eslintrc.json file which has been used.
 
-```javascript
-{
-  "extends": ["airbnb"],
-  "env": {
-    "browser": true,
-    "node": true
-  },
-  "rules": {
-    "no-console": "off",
-    "comma-dangle": "off",
-    "react/jsx-filename-extension": "off"
-  }
-}
-```
-
-[Airbnb's Javascript Style Guide](https://github.com/airbnb/javascript) which has been used by the majority of JavaScript and Typescript developers worldwide. Since the aim is support for both client (browser) and server side (Node.js) source code, the **env** has been set to browser and node. 
-Optionally, you can override the current settings by installing `eslint` globally and running `eslint --init` to change the configurations to suit your needs. [**no-console**](https://eslint.org/docs/rules/no-console), [**comma-dangle**](https://eslint.org/docs/rules/comma-dangle) and [**react/jsx-filename-extension**](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md) rules have been turned off.
-
-### Webpack
-
-[Webpack](https://webpack.js.org/) is a module bundler. Its main purpose is to capable Front-end developers to experience a modular programming style and bundle JavaScript and CSS files for usage in a browser.
-
-[webpack.config.js](https://webpack.js.org/configuration/) file has been used to describe the configurations required for webpack. Below is the webpack.config.js file which has been used.
-
-```javascript
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CopyPlugin = require('copy-webpack-plugin');
-
-const outputDirectory = 'dist';
-
-module.exports = {
-  entry: ['babel-polyfill', './src/client/index.tsx'],
-  output: {
-    path: path.join(__dirname, outputDirectory),
-    filename: './js/[name].bundle.js'
-  },
-  devtool: "source-map",
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader'
-        }
-      },
-      {
-        test: /\.tsx?$/,
-        use:[
-          {
-            loader: "awesome-typescript-loader"
-          },
-        ],
-        exclude: /node_modules/
-      },
-      {
-        enforce: "pre",
-        test: /\.js$/,
-        loader: "source-map-loader"
-      },
-      {
-        test: /\.less$/,
-        use: [
-          { loader: 'style-loader' },
-          {
-            loader: MiniCssExtractPlugin.loader,
-            options: {
-              publicPath: './Less',
-              hmr: process.env.NODE_ENV === 'development',
-            },
-          },
-          { loader: 'css-loader' },
-          {
-            loader: 'less-loader',
-            options: {
-              strictMath: true,
-              noIeCompat: true,
-            }
-          },
-        ]
-      },
-      {
-        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
-        loader: 'url-loader?limit=100000'
-      },
-    ]
-  },
-  resolve: {
-    extensions: ['*', '.ts', '.tsx', '.js', '.jsx', '.json', '.less']
-  },
-  devServer: {
-    port: 3000,
-    open: true,
-    proxy: {
-      '/api': 'http://localhost:8050'
-    }
-  },
-  plugins: [
-    new CleanWebpackPlugin([outputDirectory]),
-    new HtmlWebpackPlugin({
-      template: './public/index.html',
-      favicon: './public/favicon.ico',
-      title: "Book Manager",
-    }),
-    new MiniCssExtractPlugin({
-      filename: './css/[name].css',
-      chunkFilename: './css/[id].css',
-    }),
-    new CopyPlugin([
-      { from: './src/client/Assets', to: 'assets' },
-    ])
-  ],
-};
-
-```
-
-1.  **entry:** entry: ./src/client/index.tsx is where the application starts executing and Webpack starts bundling.
-    Note: babel-polyfill is added to support async/await. Read more [here](https://babeljs.io/docs/en/babel-polyfill#usage-in-node-browserify-webpack).
-2.  **output path and filename:** the target directory and the filename for the bundled output.
-3.  **module loaders:** Module loaders are transformations that are applied on the source code of a module. We pass all the js file through [babel-loader](https://github.com/babel/babel-loader) to transform JSX to Javascript. CSS files are passed through [css-loaders](https://github.com/webpack-contrib/css-loader) and [style-loaders](https://github.com/webpack-contrib/style-loader) to load and bundle CSS files. Fonts and images are loaded through url-loader.
-4.  **Dev Server:** Configurations for the webpack-dev-server which will be described in coming section.
-5.  **plugins:** [clean-webpack-plugin](https://github.com/johnagan/clean-webpack-plugin) is a webpack plugin to remove the build directory before building. [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) simplifies creation of HTML files to serve your webpack bundles. It loads the template (public/index.html) and injects the output bundle.
-
-### Webpack dev server
-
-[Webpack dev server](https://webpack.js.org/configuration/dev-server/) is used along with webpack. It provides a development server that enables live reloading for the client side code changes.
-
-The devServer section of webpack.config.js contains the configuration required to run webpack-dev-server which is given below.
-
-```javascript
-devServer: {
-    port: 3000,
-    open: true,
-    proxy: {
-        "/api": "http://localhost:8050"
-    }
-}
-```
-
-[**Port**](https://webpack.js.org/configuration/dev-server/#devserver-port) specifies the Webpack dev server to listen on this particular port (3000 in this case). When [**open**](https://webpack.js.org/configuration/dev-server/#devserver-open) is set to true, it will automatically open the home page on start-up. [Proxying](https://webpack.js.org/configuration/dev-server/#devserver-proxy) URLs can be useful when you have a separate API backend development server, and you want to send API requests on the same domain.

src/client/actions/comicinfo.actions.tsx

@@ -1,55 +0,0 @@
-import axios from "axios";
-import rateLimiter from "axios-rate-limit";
-import qs from "qs";
-import {
-  CV_SEARCH_SUCCESS,
-  CV_API_CALL_IN_PROGRESS,
-  CV_API_GENERIC_FAILURE,
-} from "../constants/action-types";
-import { COMICBOOKINFO_SERVICE_URI } from "../constants/endpoints";
-
-const http = rateLimiter(axios.create(), {
-  maxRequests: 1,
-  perMilliseconds: 1000,
-  maxRPS: 1,
-});
-
-export const comicinfoAPICall = (options) => async (dispatch) => {
-  try {
-    dispatch({
-      type: CV_API_CALL_IN_PROGRESS,
-      inProgress: true,
-    });
-    const serviceURI = COMICBOOKINFO_SERVICE_URI + options.callURIAction;
-    const response = await http(serviceURI, {
-      method: options.callMethod,
-      params: options.callParams,
-      data: options.data ? options.data : null,
-      headers: {
-        "Content-Type": "application/json",
-        "Access-Control-Allow-Origin": "*",
-      },
-      paramsSerializer: (params) => {
-        return qs.stringify(params, { arrayFormat: "repeat" });
-      },
-    });
-
-    switch (options.callURIAction) {
-      case "search":
-        dispatch({
-          type: CV_SEARCH_SUCCESS,
-          result: response.data,
-        });
-        break;
-
-      default:
-        console.log("Could not complete request.");
-    }
-  } catch (error) {
-    console.log(error);
-    dispatch({
-      type: CV_API_GENERIC_FAILURE,
-      error,
-    });
-  }
-};

src/client/actions/fileops.actions.tsx

@@ -1,161 +0,0 @@
-import axios from "axios";
-import { IFolderData, IExtractedComicBookCoverFile } from "threetwo-ui-typings";
-import { API_BASE_URI, SOCKET_BASE_URI } from "../constants/endpoints";
-import { io } from "socket.io-client";
-import {
-  IMS_COMICBOOK_METADATA_FETCHED,
-  IMS_SOCKET_CONNECTION_CONNECTED,
-  IMS_RECENT_COMICS_FETCHED,
-  CV_API_CALL_IN_PROGRESS,
-  CV_SEARCH_SUCCESS,
-  CV_CLEANUP,
-} from "../constants/action-types";
-import { refineQuery } from "../shared/utils/filenameparser.utils";
-import { matchScorer } from "../shared/utils/searchmatchscorer.utils";
-
-export async function walkFolder(path: string): Promise<Array<IFolderData>> {
-  return axios
-    .request<Array<IFolderData>>({
-      url: "http://localhost:3000/api/import/walkFolders",
-      method: "POST",
-      data: {
-        basePathToWalk: path,
-      },
-      transformResponse: (r: string) => JSON.parse(r),
-    })
-    .then((response) => {
-      const { data } = response;
-      return data;
-    })
-    .catch((error) => error);
-}
-/**
- * Fetches comic book covers along with some metadata
- *
- * using {@link Renderer}.
- *
- * Used by external plugins
- *
- * @param  {Object} options
- * @return {Promise<string>}                HTML of the page
- */
-export const fetchComicBookMetadata = (options) => async (dispatch) => {
-  const extractionOptions = {
-    sourceFolder: options,
-    extractTarget: "cover",
-    targetExtractionFolder: "./userdata/covers",
-    extractionMode: "bulk",
-    paginationOptions: {
-      pageLimit: 25,
-      page: 1,
-    },
-  };
-  const walkedFolders = await walkFolder("./comics");
-
-  const socket = io(SOCKET_BASE_URI, {
-    reconnectionDelayMax: 10000,
-  });
-
-  socket.on("connect", () => {
-    console.log(`connect ${socket.id}`);
-    dispatch({
-      type: IMS_SOCKET_CONNECTION_CONNECTED,
-      socketConnected: true,
-    });
-  });
-
-  socket.on("disconnect", () => {
-    console.log(`disconnect`);
-  });
-  socket.emit("importComicsInDB", {
-    action: "getComicCovers",
-    params: {
-      extractionOptions,
-      walkedFolders,
-    },
-  });
-
-  socket.on("comicBookCoverMetadata", (data: IExtractedComicBookCoverFile) => {
-    dispatch({
-      type: IMS_COMICBOOK_METADATA_FETCHED,
-      data,
-      dataTransferred: true,
-    });
-  });
-};
-
-export const getRecentlyImportedComicBooks = (options) => async (dispatch) => {
-  const { paginationOptions } = options;
-  return axios
-    .request({
-      url: "http://localhost:3000/api/import/getRecentlyImportedComicBooks",
-      method: "POST",
-      data: {
-        paginationOptions,
-      },
-    })
-    .then((response) => {
-      dispatch({
-        type: IMS_RECENT_COMICS_FETCHED,
-        data: response.data,
-      });
-    });
-};
-
-export const fetchComicVineMatches = (searchPayload) => (dispatch) => {
-  try {
-    const issueString = searchPayload.rawFileDetails.path.split("/").pop();
-    let seriesSearchQuery = {};
-    const issueSearchQuery = refineQuery(issueString);
-    if (searchPayload.rawFileDetails.containedIn !== "comics") {
-      seriesSearchQuery = refineQuery(
-        searchPayload.rawFileDetails.containedIn.split("/").pop(),
-      );
-    }
-
-    dispatch({
-      type: CV_API_CALL_IN_PROGRESS,
-    });
-
-    axios
-      .request({
-        url: "http://localhost:3080/api/comicvine/fetchseries",
-        method: "POST",
-        data: {
-          format: "json",
-          sort: "name%3Aasc",
-          query: issueSearchQuery.searchParams.searchTerms.name,
-          fieldList: "id",
-          limit: "10",
-          offset: "0",
-          resources: "issue",
-        },
-        transformResponse: [
-          (r) => {
-            const searchMatches = JSON.parse(r);
-            return matchScorer(searchMatches.results, {
-              issue: issueSearchQuery,
-              series: seriesSearchQuery,
-            });
-          },
-        ],
-      })
-      .then((response) => {
-        dispatch({
-          type: CV_SEARCH_SUCCESS,
-          searchResults: response.data,
-          searchQueryObject: {
-            issue: issueSearchQuery,
-            series: seriesSearchQuery,
-          },
-        });
-      });
-
-    /* return { issueSearchQuery, series: seriesSearchQuery.searchParams }; */
-  } catch (error) {
-    console.log(error);
-  }
-  dispatch({
-    type: CV_CLEANUP,
-  });
-};

src/client/assets/img/airdcpp_logo.svg

@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   width="160px"
+   height="160px"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="SVGRoot">
+  <defs
+     id="defs222">
+    <linearGradient
+       id="linearGradient5642">
+      <stop
+         style="stop-color:#483e37;stop-opacity:1"
+         offset="0"
+         id="stop5638" />
+      <stop
+         style="stop-color:#339cc7;stop-opacity:0;"
+         offset="1"
+         id="stop5640" />
+    </linearGradient>
+    <linearGradient
+       xlink:href="#linearGradient5642"
+       id="linearGradient5658"
+       x1="13.811552"
+       y1="7.9124665"
+       x2="8.5506983"
+       y2="2.2998061"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(0.47081933,0.18167275)" />
+    <linearGradient
+       xlink:href="#linearGradient5642"
+       id="linearGradient5658-6"
+       x1="13.811552"
+       y1="7.9124665"
+       x2="8.5506983"
+       y2="2.2998061"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(-5.8345778,0.9966572)" />
+    <linearGradient
+       xlink:href="#linearGradient5642"
+       id="linearGradient5658-6-2"
+       x1="13.811552"
+       y1="7.9124665"
+       x2="8.5506983"
+       y2="2.2998061"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(-2.2875303,6.2704208)" />
+  </defs>
+  <metadata
+     id="metadata225">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1">
+    <circle
+       style="fill:#fd8635;fill-opacity:1;stroke-width:0.34364313;stroke:none;stroke-opacity:1"
+       id="path78-7"
+       cx="4.9123297"
+       cy="5.9923167"
+       r="4.75" />
+    <circle
+       style="opacity:0.61000001;fill:url(#linearGradient5658-6);fill-opacity:1;stroke-width:0.3436431"
+       id="path78-3-5-1"
+       cx="4.9046054"
+       cy="5.9923072"
+       r="4.75" />
+  </g>
+  <g
+     id="layer2">
+    <circle
+       style="fill:#fd8635;fill-opacity:1;stroke-width:0.34364313"
+       id="path78"
+       cx="8.4543009"
+       cy="11.261043"
+       r="4.75" />
+    <circle
+       style="opacity:0.61000001;fill:url(#linearGradient5658-6-2);fill-opacity:1;stroke-width:0.3436431"
+       id="path78-3-5-1-9"
+       cx="8.4516525"
+       cy="11.266071"
+       r="4.75" />
+  </g>
+  <g
+     id="layer3">
+    <circle
+       style="opacity:1;fill:#348fed;fill-opacity:1;stroke-width:0.3436431"
+       id="path78-3"
+       cx="11.211483"
+       cy="5.1752739"
+       r="4.75" />
+    <circle
+       style="opacity:0.61000001;fill:url(#linearGradient5658);fill-opacity:1;stroke-width:0.3436431"
+       id="path78-3-5"
+       cx="11.210003"
+       cy="5.1773238"
+       r="4.75" />
+  </g>
+</svg>

src/client/assets/img/comicinfoxml.svg

@@ -0,0 +1,6 @@
+<svg width="384" height="512" viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path id="Path" fill="#e1933c" fill-rule="evenodd" stroke="#393838" stroke-width="21" stroke-linecap="round" stroke-linejoin="round" d="M 215.786591 23.351563 C 215.786591 23.351563 98.801674 21.473022 81.803864 21.200073 C 21.811596 20.236725 23.297552 52.264709 22.462652 104.258026 C 21.073503 190.766876 22.587183 312.129272 22.115429 437.295349 C 21.974922 474.574432 57.495609 491.702881 94.239006 492.460449 C 172.222427 494.068359 287.278351 491.559753 287.278351 491.559753 C 287.278351 491.559753 361.530945 494.731964 361.601563 409.742523 C 361.689667 303.742554 361.407318 172.708862 361.407318 172.708862 L 215.786591 23.351563 L 215.786591 23.351563 Z"/>
+    <path id="Shape" fill="none" stroke="#ffffff" stroke-width="32" stroke-linecap="round" stroke-linejoin="round" d="M 110 270 L 264 270 M 162 330 L 220 330"/>
+    <path id="Line" fill="none" stroke="#ffffff" stroke-width="33" stroke-linecap="round" stroke-linejoin="round" d="M 110 395 L 264 394.999084"/>
+    <path id="path1" fill="none" stroke="#393838" stroke-width="21" stroke-linecap="round" stroke-linejoin="round" d="M 207 23 L 208 175 L 349 175"/>
+</svg>

src/client/assets/img/locglogo.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated by Pixelmator Pro 2.4.3 -->
+<svg width="624" height="561" viewBox="0 0 624 561" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <text id="LCG" xml:space="preserve"><tspan x="57" y="282" font-family="DIN Alternate" font-size="288" font-weight="700" fill="#ff4300" letter-spacing="-2.88" xml:space="preserve">L</tspan><tspan font-family="DIN Alternate" font-size="288" font-weight="700" fill="#ff4300" letter-spacing="11.52" xml:space="preserve">CG</tspan></text>
+    <path id="Rounded-Rectangle" fill="#ff4300" fill-rule="evenodd" stroke="none" d="M 96 322 C 84.954399 322 76 330.954407 76 342 L 76 346 C 76 357.045593 84.954399 366 96 366 L 193 366 C 204.045593 366 213 357.045593 213 346 L 213 342 C 213 330.954407 204.045593 322 193 322 Z"/>
+    <path id="Rounded-Rectangle-copy-2" fill="#ff4300" fill-rule="evenodd" stroke="none" d="M 425 322 C 413.954407 322 405 330.954407 405 342 L 405 346 C 405 357.045593 413.954407 366 425 366 L 522 366 C 533.045593 366 542 357.045593 542 346 L 542 342 C 542 330.954407 533.045593 322 522 322 Z"/>
+</svg>

src/client/assets/img/missing-file-2.svg

@@ -0,0 +1,6 @@
+<svg width="384" height="512" viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path id="Path" fill="none" stroke="#ed230d" stroke-width="28" stroke-linecap="round" stroke-linejoin="round" d="M 212 23 L 78 23 C 78 23 20 33 20 107 C 20 193.52002 25 440 25 440 C 25 440 20 494 98 494 C 176 494 291 490 291 490 C 291 490 365.293945 491.979614 364 407 C 362.386169 301.012268 360 170 360 170 L 212 23 L 212 23 Z"/>
+    <path id="Ellipse" fill="none" stroke="#ed230d" stroke-width="37" stroke-linecap="round" stroke-linejoin="round" d="M 266 320 C 266 279.13092 232.86908 246 192 246 C 151.13092 246 118 279.13092 118 320 C 118 360.86908 151.13092 394 192 394 C 232.86908 394 266 360.86908 266 320 Z"/>
+    <path id="Ellipse-copy" fill="none" stroke="#ed230d" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="0.1 16" stroke-dashoffset="0" d="M 223 320.5 C 223 303.103027 208.896973 289 191.5 289 C 174.103027 289 160 303.103027 160 320.5 C 160 337.896973 174.103027 352 191.5 352 C 208.896973 352 223 337.896973 223 320.5 Z"/>
+    <path id="path1" fill="none" stroke="#ed230d" stroke-width="28" stroke-linecap="round" stroke-linejoin="round" d="M 207 23 L 208 175 L 349 175"/>
+</svg>

src/client/assets/img/missing-file.svg

@@ -0,0 +1,5 @@
+<svg width="384" height="512" viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path id="Path" fill="none" stroke="#ed230d" stroke-width="28" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="56 56" stroke-dashoffset="56" d="M 221 23 L 78 23 C 78 23 20 33 20 107 C 20 193.52002 25 440 25 440 C 25 440 20 494 98 494 C 176 494 291 490 291 490 C 291 490 365.293945 491.979614 364 407 C 362.386169 301.012268 360 170 360 170 L 212 23 L 221 23 Z"/>
+    <path id="Ellipse" fill="none" stroke="#ed230d" stroke-width="25" stroke-linecap="round" stroke-linejoin="round" d="M 266 340 C 266 299.13092 232.86908 266 192 266 C 151.13092 266 118 299.13092 118 340 C 118 380.86908 151.13092 414 192 414 C 232.86908 414 266 380.86908 266 340 Z"/>
+    <path id="path1" fill="none" stroke="#ed230d" stroke-width="28" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="56 56" stroke-dashoffset="56" d="M 181 3 L 181 173 L 269 174 L 305 175"/>
+</svg>

src/client/assets/img/noimage.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="104px" height="160px" viewBox="0 0 104 160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+ <!-- Generated by Pixelmator Pro 2.1.2 -->
+ <defs>
+  <linearGradient id="linear-gradient" gradientUnits="userSpaceOnUse" x1="41.41" y1="30.667" x2="78.01" y2="133.767">
+   <stop offset="0" stop-color="#ffecd2" stop-opacity="1"/>
+   <stop offset="1" stop-color="#fcb69f" stop-opacity="1"/>
+  </linearGradient>
+ </defs>
+ <path id="Path" d="M12.093 0.081 C5.414 0.081 0 5.465 0 12.105 L0 147.976 C0 154.617 5.414 160 12.093 160 L91.907 160 C98.586 160 104 154.617 104 147.976 L104 12.105 C104 5.465 98.586 0.081 91.907 0.081 Z" fill-opacity="1" fill="url(#linear-gradient)" stroke="none"/>
+ <defs>
+  <text id="string" transform="matrix(1.0 0.0 0.0 1.0 20.0 54.0)">
+   <tspan fill="#252422" y="18.0" x="17.492" font-size="18" font-family="Avenir-Oblique, Avenir" text-decoration="none">NO </tspan>
+   <tspan fill="#252422" y="43.0" x="1.823000000000004" font-size="18" font-family="Avenir-Oblique, Avenir" text-decoration="none">COVER</tspan>
+  </text>
+ </defs>
+ <use id="NO-COVER" xlink:href="#string"/>
+</svg>

src/client/assets/img/threetwo.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="112px" height="28px" viewBox="0 0 112 28" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+ <!-- Generated by Pixelmator Pro 2.2 -->
+ <defs>
+  <image id="image" width="45px" height="28px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAcCAYAAAD1PDaSAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAALaADAAQAAAABAAAAHAAAAADa6ZRmAAALuElEQVRYCZVXCZRUxRWt5f9ep3u6Z9+gGRxwkEVcgIAKQURWAQFBRYMLGghqDKInajwuxwVQlAAalyNLICGI0QCiBkUQhIOETRlZRGBgNmZfenr/v37um9AcJAzqO+d2Vb+qX3Xr1atXrzi7uMgzzWY73WzQa0AEsNrp056avqPvaQ4OKCAOJICLjkWd25M8NMwBaOCXgG+Ac+Uy/HkW8AJvAh8CFxMdjT6gH3ClEKzQqUnH8GJXdmVQtTa2GrGKYCISjKqtaF8FhIALSnukaYK/2YQeTBHO5gajpTv+3wo0nhnFgfJ94KTfpZc0hhPUNh6oB84XWvQQwcTYPEemx6NcCU9W9YkFE7P75HhEEWdc55y3wrgimrCsQQvLd1WHYjF88wgQPX8w+i8upITOqXGZWlL4YU5Jp/evcUsHuQeRSgqR1vbN6lSzd3ZgqschqX1ysvGcsgBkX52eNn7WtsCyjJ0dVnbcNHqqsWZa7m15qeJSELYsi9dwodxCWE6XnbOvZ3Xwee2C3GPMOeP8qNoeae6QTsvN7JcIJr193D1O4qvrgWR/4bJJ7kvRbsFkmeMv91agbRRAO5SUgToTL7ySPcv2dNqMjp31vN665CrabXV2XciMD3mjYkf3Ocd3jllSXnao0ggxxVuxAieXVu+nbswko/RMDnR+mSRxvp45hc4twXSLWbYpKaPpcGQCtNUkpuAK5uBtB3T6AE8DdOTb1IeklxTyvqUdnz90m2fYYJwzOmyxFU2fbOnx8vd1feeXfnmsNvpWOKFmllRG5o57t+xrw+KfoU8bn7/uagqiXglcUOgEX0hU2IwoSynwknygo3fyhKegM/kZLUJG40p3wyZZKbaeTl0akYR5E/TLgfu3Fy7xBnj+NPiqVWXWbxhT+YCrMlabgxDxBtr3AQaQLwV7qCBdfi6FVYQYYjVGrG3f1cZo8a8AF5SkpdPQSj6UcaZXPGzG4hVmTRn9T+HuK2xcI6Ijk+1Rg0UOnI62covVaILl+t0Sh4l1Aa6f4h+ZCcI9qO+S1nVvX3licmp5rHYTCD8E1X8AIlykS/HSxumdem76XafH4d5TLMWDAxaUJpRiX6G9XUsTabLe4rxc+8w0v7YC9SuAONxiz6iKB8u5YCGN8bRh3gE0yHCArG4YprVv6t9P12OCJljTlumSbugbdCZzHvPfTeGSHTFL9z55elEvVBcBqwGKChSxrgWe+fCe/JyiTJnKLGVHZObT19RsDscUxfylQLuxmkhTvE1ZuTBPLpmfW2yzsT/hvwdY0pBoTouo+GnFLflc2swAdOmAHSDZmCK5H3N1trgFItwJXZUmtOJUkeIJq5g+sfxRujAoxu8BiAS5492Y9IHFk3IP9syzXUIuga9Pzt3UtOXTQy1kwKcBWly7QoPUp3pt2CkV8PuFVZDvDB8/EZkK/VuwdmhtcEvTZM/Qwgzhz3ZKe03EjNEFEQaOJDAfLjKFX5AmTqwhroxvHqqdV7AjvJfVJZrnQneQGiAUER7ukePovequPLfXLqdwzkyci3d6zDvhjxuKDPJHADt3cSFLV4TCiVhrxJIC8Wve45n50A0AaBt3fGscLUKVa5w7M0QaWY5chCSGDogeoi2ChBKKypDJzI3rmjcLEH4b/5O3KBF+wmUXndben9fFa+eXMa7slU3G211fPFYAwtT+OJC8vFBtX4h01DCsT+csajyplOIZGSLg80hyAboF120N7TEQP1HlYrJvaDMqNwDk15ZpwcxYEOptNkdxEqgFaKe+BEjIbebpgqXsebhzpSa4j8wRiqiyAQtP0PmpBp4AGoCfJUSaZM2O3a3xeNzSpOTsrtt9ZLV7gfrSaFnU5GYLdbpc77YLBUUYIsIMkMYhgssLqyFixqFKTkw+SSslCz7jtWtG1SSb3yfiV+G2rjtVnzje57VTtVjxerSTC13wuob+gpIk3WCa1rdrN4YqyNo3DXFfAvJ5+MJugFWN2VBPXw9KufJ6FGRZOrw8GjdVXLG96GLSeYKO3CcpdDvOtgvhOzlR9LNr5kD7yYpTRS8eWzro9VP1obj5Z7SvBtrcK/nRzymTpGnCFStWN4UQCJSuc29qikaWGwyULWtZ13Y4dCW7FtiyqD4BkBKuYZdWocUF1WksGoeE6ve5pCiqmKzpGjdzDMW0sZv09ERCdYGFZ6N9O5Dsj+pPSpLr2VyCvjje3GqqkqPxDywh+MRxqaXQjQW2rGzagCjzv/HnZ82msNQTKPC5JVxUFKDODEVh76yMyLTzG46PlwGnsK6LGNw594C9alt1dBN6kP+Wn+358yoUWWih4HHmrqcKhMJY5fy/NCBGK3b7aMfVOGKos5agCnM4bg116uPoTiRp6wfhNjSYaPMIhRuSKrSybria7ywZpwe8dit3Y5X22a8/ZrvnHAjPQNsS4KIxGO0XEjpDU4C23OasyaGgSTfU1SW6wGxcaDKQk2U/Ct1tOXqmXSCwwI01h2Vz6hwXN2MjnHZRSukl6uToBgqyxMznervqXbrpCxvaBzd/EXEdbDGegZ7yjV/iDuh+VogsGXAoac4lTf83h0JKxhMiRi6y8Lks2vKOIBaGy+bgsEnBWforWbPqkGs4N07v0JZfcDoIvG3RTpsQqTOK47/iTGvq+M/EcXxPZyAZr1H9RULzE+EHXS5+BK+dvqij+LE0IijXbfk6fJrU2VlixK2j/M9+1GFhORGGmdJx+YlJef377PvDpalOnVGiBftxPD+QETLmLvZrSGq5N5zgi8MJ8zrolgI/FSEo7pPL0f3gAnzAtcDzwKKbR/kd65YFCvv29hbjv7vNsVEhoVV1Br7fviva6caBLs6F0GdM877qXd5Sa33jDyMrpi2KW9LIEabbb8lYMi4zPLtEMBZXHw3WoozHzWm7rB3oO4TGA84XIpgKXH0GBVIKIitMUymPW+c2OzPvmJSmjxysZzptMkCpwrHSCM3XI0maLD4dbjDCKey7du8Ph5Typ9M+0GGsGbfMHyh5KmQxQQdC8Raf4GG8LuxNcOg2C6OfJTJcrDXNnoDL8NhXFUYv9KWMjUJnUmyoDAJuQZB0pqSnm9Iyj465gR+dMNI1xoioLb40OQzxM4s+oLSCStwdylTW6aagSelxapJ0d7wJx34ReOe7gJbftduJ0YnmFqvan8aywNuKesu44YlFZdBJN6Mbea8hDt8YMvr9gCcgMy0okLjIbM0bg/vTUpkmrU7oWw+Qa9AuUlrwMIg4rhgzYfvw2Y+Mx+umID+ys1e3lldT8EqSzCvvIOtBcF2pMLg6WiMqNP3R2g3VNfEcxPhqtH2VJG1DHhwrkh2Gwtr5v0kdU/Le+s2lv52amoVtoa1k1XesCua/fo+NaUhBYVxZ3rXZ6IepQAgRmud6dNv2Ey2whO0A2q+5yq9nfxKJ0fVM308Ebknx+Tb//qNPx+hCPoIhaDEaZ4kq7JbHMkQdMoLUMF5Dy99r2fje2mbl9khnOGxF4TKn0PcNgM6amSRdGrHiWphFj6cwV/Zjaff07L/p4/rpd3oUogieg8qK5h/2Mc0yLBOZGMcDNKYXCGU7okTUCxfCfIgfyDXCnuKl7uChgVdnavmfVMZOSSkXCF3PvPfdFWVZhZ2GCsYLkbDgdZKo3bnqH1s/f3Ox7vPK8mDQNOCOStNYNBJRdA52QHcYJS2cwulZSZKm7K3u9orHw2sLFrQ4mC09YBZyUwXrwDkLAdywbI26kd1SpVWl9oKzSVhT8B+G72fF/xpIpJFbJ3SXa+LyCQt7TPz4aX7IWdvkzajtP+mFl/NzLrs0LKQ2jIIMrFa1fu7zu49s28ojTU0OzLurqUltR9loIq9NJNren3RntCtJ0rSSF3dHDz4ZZbE1dmUf0Dc3sEOKg/fRSUDiBy9RVvWtK/fkvTYzF9HNAY84LQ5ft10Vr+sHO9vjBtsvOY+0Ot1py8fPU93Gs/4dgs0hjzfdi9wZFxOuJ7wn/734tS3716/bhWFXAa3ARQmi/f/kv5XnqvnoFJszAAAAAElFTkSuQmCC"/>
+ </defs>
+ <use id="Background-Layer" xlink:href="#image" x="41px" y="0px" width="45px" height="28px"/>
+</svg>

src/client/assets/scss/App.scss

@@ -1,177 +0,0 @@
-@import "../../../../node_modules/bulma/bulma.sass";
-$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
-@import "../../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
-@import "../../../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
-$bg-color: yellow;
-$border-color: red;
-
-.app {
-  font-family: helvetica, arial, sans-serif;
-  padding: 2em;
-  border: 5px solid $border-color;
-
-  p {
-    background-color: $bg-color;
-  }
-}
-.navbar-item.is-mega {
-  position: static;
-
-  .is-mega-menu-title {
-    margin-bottom: 0;
-    padding: 0.375rem 1rem;
-  }
-}
-
-.min {
-  overflow: visible;
-  .tags {
-    display: inline;
-    margin-right: 5px;
-    margin-left: 5px;
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-  pre {
-    border-radius: 0.4em;
-    margin: 10px 0 10px 0;
-    white-space: pre-wrap;
-  }
-}
-
-.generic-card {
-  max-width: 200px;
-
-  .truncate {
-    width: 100px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  img {
-    max-width: 200px;
-  }
-}
-.card-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  column-gap: 0.5em;
-  row-gap: 1.2em;
-
-  .card {
-    max-width: 200px;
-    margin: 0 0 15px 0;
-    .is-horizontal {
-      flex-direction: row;
-      display: flex;
-      flex-basis: 50ex;
-      flex-grow: 0;
-      flex-shrink: 1;
-      box-shadow: none;
-
-      .card-image {
-        align-self: center;
-        .image {
-          max-width: 60px;
-          img {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-            border-top-left-radius: 0.25em;
-            border-bottom-left-radius: 0.25em;
-          }
-        }
-      }
-      .card-content {
-        align-self: center;
-        flex: 1;
-        padding-left: 1em;
-        padding-top: 0;
-        padding-bottom: 0;
-        font-size: 0.8em;
-        ul {
-          li.status {
-            margin-top: 10px;
-          }
-        }
-
-        .truncate {
-          width: 400px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-      .is-divider {
-        margin-top: 1.5rem;
-        margin-bottom: 1rem;
-      }
-    }
-  }
-}
-
-.comic-vine-match-drawer {
-  // comic detail drawer
-  .search-criteria-card {
-    width: 100%;
-    .card-content {
-      padding: 10px;
-      .ant-divider-horizontal {
-        margin: 12px 0;
-      }
-    }
-  }
-
-  .field {
-    margin: 5px 0 0 0;
-  }
-}
-
-// comicvine search results
-.search-results-container {
-  margin: 15px 0 0 0;
-  overflow: hidden;
-
-  table {
-    width: 100%;
-    tbody tr:nth-child(odd) {
-      background: #f6f6f6;
-      border-radius: 5px;
-    }
-  }
-
-  .search-result {
-    display: flex;
-    flex-direction: row;
-    padding: 10px;
-    margin: 0 0 10px 0;
-
-    .cover-image {
-      border-radius: 5px;
-    }
-    .search-result-details {
-      width: 100%;
-      .score {
-        float: right;
-      }
-      margin-left: 10px;
-    }
-  }
-}
-
-// progress
-.progress-indicator-container {
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .indicator {
-    padding: 5px;
-    width: 120px;
-    height: 120px;
-  }
-}

src/client/components/App.tsx

@@ -1,36 +1,49 @@
-import * as React from "react";
-import { hot } from "react-hot-loader";
-import Dashboard from "./Dashboard";
+/**
+ * @fileoverview Root application component.
+ * Provides the main layout structure with navigation, content outlet,
+ * and toast notifications. Initializes socket connection on mount.
+ * @module components/App
+ */
 
-import Import from "./Import";
-import { ComicDetail } from "./ComicDetail";
+import React, { ReactElement, useEffect } from "react";
+import { Outlet } from "react-router-dom";
+import { Navbar2 } from "./shared/Navbar2";
+import { ToastContainer } from "react-toastify";
+import "../../app.css";
+import { useStore } from "../store";
 
-import { Switch, Route } from "react-router";
-import Navbar from "./Navbar";
-import "../assets/scss/App.scss";
+/**
+ * Root application component that provides the main layout structure.
+ *
+ * Features:
+ * - Initializes WebSocket connection to the server on mount
+ * - Renders the navigation bar across all routes
+ * - Provides React Router outlet for child routes
+ * - Includes toast notification container for app-wide notifications
+ *
+ * @returns {ReactElement} The root application layout
+ * @example
+ * // Used as the root element in React Router configuration
+ * const router = createBrowserRouter([
+ *   {
+ *     path: "/",
+ *     element: <App />,
+ *     children: [...]
+ *   }
+ * ]);
+ */
+export const App = (): ReactElement => {
+  useEffect(() => {
+    useStore.getState().getSocket("/"); // Connect to the base namespace
+  }, []);
+  
+  return (
+    <>
+      <Navbar2 />
+      <Outlet />
+      <ToastContainer stacked hideProgressBar />
+    </>
+  );
+};
 
-class App extends React.Component {
-  public render() {
-    return (
-      <div>
-        <Navbar />
-        <Switch>
-          <Route exact path="/">
-            <Dashboard />
-          </Route>
-          <Route path="/import">
-            <Import path={"./comics"} />
-          </Route>
-          <Route
-            path={"/comic/details/:comicObjectId"}
-            component={ComicDetail}
-          />
-        </Switch>
-      </div>
-    );
-  }
-}
-
-declare let module: Record<string, unknown>;
-
-export default hot(module)(App);
+export default App;

src/client/components/Card.tsx

@@ -1,70 +0,0 @@
-import * as React from "react";
-import { IExtractedComicBookCoverFile } from "threetwo-ui-typings";
-import {
-  removeLeadingPeriod,
-  escapePoundSymbol,
-} from "../shared/utils/formatting.utils";
-import { isUndefined, isEmpty } from "lodash";
-import { Link } from "react-router-dom";
-import ellipsize from "ellipsize";
-
-interface IProps {
-  comicBookCoversMetadata: IExtractedComicBookCoverFile;
-  mongoObjId?: number;
-}
-interface IState {}
-
-class Card extends React.Component<IProps, IState> {
-  constructor(props: IProps) {
-    super(props);
-  }
-
-  public drawCoverCard = (
-    metadata: IExtractedComicBookCoverFile,
-  ): JSX.Element => {
-    const filePath = encodeURI(
-      "http://localhost:3000" +
-        removeLeadingPeriod(metadata.path) +
-        "/" +
-        metadata.name,
-    );
-
-    return (
-      <div>
-        <div className="card generic-card">
-          <div>
-            <div className="card-image">
-              <figure className="image">
-                <img
-                  src={escapePoundSymbol(filePath)}
-                  alt="Placeholder image"
-                />
-              </figure>
-            </div>
-            <div className="card-content">
-              <ul>
-                <Link to={"/comic/details/" + this.props.mongoObjId}>
-                  <li className="has-text-weight-semibold">
-                    {ellipsize(metadata.name, 18)}
-                  </li>
-                </Link>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  public render() {
-    return (
-      <>
-        {!isUndefined(this.props.comicBookCoversMetadata) &&
-          !isEmpty(this.props.comicBookCoversMetadata) &&
-          this.drawCoverCard(this.props.comicBookCoversMetadata)}
-      </>
-    );
-  }
-}
-
-export default Card;

src/client/components/ComicDetail.tsx

@@ -1,146 +0,0 @@
-import React, { useState, useEffect, useCallback, ReactElement } from "react";
-import { useParams } from "react-router-dom";
-import axios from "axios";
-import Card from "./Card";
-import MatchResult from "./MatchResult";
-import ComicVineSearchForm from "./ComicVineSearchForm";
-
-import { css } from "@emotion/react";
-import PuffLoader from "react-spinners/PuffLoader";
-import { isEmpty, isUndefined } from "lodash";
-import { IExtractedComicBookCoverFile, RootState } from "threetwo-ui-typings";
-import { fetchComicVineMatches } from "../actions/fileops.actions";
-import { Drawer, Divider } from "antd";
-const prettyBytes = require("pretty-bytes");
-import "antd/dist/antd.css";
-
-import { useDispatch, useSelector } from "react-redux";
-
-type ComicDetailProps = {};
-
-export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
-  const [page, setPage] = useState(1);
-  const [visible, setVisible] = useState(false);
-  const [comicDetail, setComicDetail] = useState<{
-    rawFileDetails: IExtractedComicBookCoverFile;
-  }>();
-
-  const comicVineSearchResults = useSelector(
-    (state: RootState) => state.comicInfo.searchResults,
-  );
-  const comicVineSearchQueryObject = useSelector(
-    (state: RootState) => state.comicInfo.searchQuery,
-  );
-  const comicVineAPICallProgress = useSelector(
-    (state: RootState) => state.comicInfo.inProgress,
-  );
-  const { comicObjectId } = useParams<{ comicObjectId: string }>();
-
-  useEffect(() => {
-    axios
-      .request({
-        url: `http://localhost:3000/api/import/getComicBookById`,
-        method: "POST",
-        data: {
-          id: comicObjectId,
-        },
-      })
-      .then((response) => {
-        setComicDetail(response.data);
-      })
-      .catch((error) => console.log(error));
-  }, [page]);
-
-  const dispatch = useDispatch();
-
-  const openDrawerWithCVMatches = useCallback(() => {
-    setVisible(true);
-    dispatch(fetchComicVineMatches(comicDetail));
-  }, [dispatch, comicDetail]);
-
-  const onClose = () => {
-    setVisible(false);
-  };
-
-  return (
-    <section className="container">
-      {!isEmpty(comicDetail) && !isUndefined(comicDetail) && (
-        <>
-          <h1 className="title">{comicDetail.rawFileDetails.name}</h1>
-          <div className="columns">
-            <div className="column is-narrow">
-              <Card comicBookCoversMetadata={comicDetail.rawFileDetails} />
-            </div>
-            <div className="column">
-              <p>{comicDetail.rawFileDetails.containedIn}</p>
-              <p>{prettyBytes(comicDetail.rawFileDetails.fileSize)}</p>
-              <button className="button" onClick={openDrawerWithCVMatches}>
-                <span className="icon">
-                  <i className="fas fa-magic"></i>
-                </span>
-                <span>Match on Comic Vine</span>
-              </button>
-            </div>
-          </div>
-
-          <Drawer
-            title="ComicVine Search Results"
-            placement="right"
-            width={640}
-            closable={false}
-            onClose={onClose}
-            visible={visible}
-            className="comic-vine-match-drawer"
-          >
-            {!isEmpty(comicVineSearchQueryObject) &&
-            !isUndefined(comicVineSearchQueryObject) ? (
-              <div className="card search-criteria-card">
-                <div className="card-content">
-                  <ComicVineSearchForm />
-                  <Divider />
-                  <p className="is-size-6">Searching against:</p>
-                  <div className="field is-grouped is-grouped-multiline">
-                    <div className="control">
-                      <div className="tags has-addons">
-                        <span className="tag">Title</span>
-                        <span className="tag is-info">
-                          {
-                            comicVineSearchQueryObject.issue.searchParams
-                              .searchTerms.name
-                          }
-                        </span>
-                      </div>
-                    </div>
-                    <div className="control">
-                      <div className="tags has-addons">
-                        <span className="tag">Number</span>
-                        <span className="tag is-info">
-                          {
-                            comicVineSearchQueryObject.issue.searchParams
-                              .searchTerms.number
-                          }
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <div className="progress-indicator-container">
-                <div className="indicator">
-                  <PuffLoader loading={comicVineAPICallProgress} />
-                </div>
-              </div>
-            )}
-
-            <div className="search-results-container">
-              {!isEmpty(comicVineSearchResults) && (
-                <MatchResult matchData={comicVineSearchResults} />
-              )}
-            </div>
-          </Drawer>
-        </>
-      )}
-    </section>
-  );
-};

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -0,0 +1,448 @@
+import React, {
+  ReactElement,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import ellipsize from "ellipsize";
+import { Form, Field } from "react-final-form";
+import { isEmpty, isNil, map } from "lodash";
+import { useStore } from "../../store";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { AIRDCPP_SERVICE_BASE_URI } from "../../constants/endpoints";
+import type { Socket } from "socket.io-client";
+import type { AcquisitionPanelProps } from "../../types";
+
+interface HubData {
+  hub_url: string;
+  identity: { name: string };
+  value: string;
+}
+
+interface AirDCPPSearchResult {
+  id: string;
+  dupe?: unknown;
+  type: { id: string; str: string };
+  name: string;
+  slots: { total: number; free: number };
+  users: { user: { nicks: string; flags: string[] } };
+  size: number;
+}
+
+export const AcquisitionPanel = (
+  props: AcquisitionPanelProps,
+): ReactElement => {
+  const socketRef = useRef<Socket | undefined>(undefined);
+
+  const [dcppQuery, setDcppQuery] = useState({});
+  const [airDCPPSearchResults, setAirDCPPSearchResults] = useState<AirDCPPSearchResult[]>([]);
+  const [airDCPPSearchStatus, setAirDCPPSearchStatus] = useState(false);
+  const [airDCPPSearchInstance, setAirDCPPSearchInstance] = useState<{ id?: string; owner?: string; expires_in?: number }>({});
+  const [airDCPPSearchInfo, setAirDCPPSearchInfo] = useState<{ query?: { pattern: string; extensions: string[]; file_type: string } }>({});
+
+  const { comicObjectId } = props;
+  const issueName = props.query.issue.name || "";
+  const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " ");
+
+  useEffect(() => {
+    const socket = useStore.getState().getSocket("manual");
+    socketRef.current = socket;
+
+    // --- Handlers ---
+    const handleResultAdded = ({ result }: any) => {
+      setAirDCPPSearchResults((prev) =>
+        prev.some((r) => r.id === result.id) ? prev : [...prev, result],
+      );
+    };
+
+    const handleResultUpdated = ({ result }: any) => {
+      setAirDCPPSearchResults((prev) => {
+        const idx = prev.findIndex((r) => r.id === result.id);
+        if (idx === -1) return prev;
+        if (JSON.stringify(prev[idx]) === JSON.stringify(result)) return prev;
+        const next = [...prev];
+        next[idx] = result;
+        return next;
+      });
+    };
+
+    const handleSearchInitiated = (data: any) => {
+      setAirDCPPSearchInstance(data.instance);
+    };
+
+    const handleSearchesSent = (data: any) => {
+      setAirDCPPSearchInfo(data.searchInfo);
+    };
+
+    // --- Subscribe once ---
+    socket.on("searchResultAdded", handleResultAdded);
+    socket.on("searchResultUpdated", handleResultUpdated);
+    socket.on("searchInitiated", handleSearchInitiated);
+    socket.on("searchesSent", handleSearchesSent);
+
+    return () => {
+      socket.off("searchResultAdded", handleResultAdded);
+      socket.off("searchResultUpdated", handleResultUpdated);
+      socket.off("searchInitiated", handleSearchInitiated);
+      socket.off("searchesSent", handleSearchesSent);
+      // if you want to fully close the socket:
+      // useStore.getState().disconnectSocket("/manual");
+    };
+  }, []);
+
+  const {
+    data: settings,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ["settings"],
+    queryFn: async () =>
+      await axios({
+        url: "http://localhost:3000/api/settings/getAllSettings",
+        method: "GET",
+      }),
+  });
+
+  const { data: hubs } = useQuery({
+    queryKey: ["hubs"],
+    queryFn: async () =>
+      await axios({
+        url: `${AIRDCPP_SERVICE_BASE_URI}/getHubs`,
+        method: "POST",
+        data: {
+          host: settings?.data.directConnect?.client?.host,
+        },
+      }),
+    enabled: !isEmpty(settings?.data.directConnect?.client?.host),
+  });
+
+  useEffect(() => {
+    const dcppSearchQuery = {
+      query: {
+        pattern: `${sanitizedIssueName.replace(/#/g, "")}`,
+        extensions: ["cbz", "cbr", "cb7"],
+      },
+      hub_urls: map(hubs?.data, (item) => item.value),
+      priority: 5,
+    };
+    setDcppQuery(dcppSearchQuery);
+  }, [hubs, sanitizedIssueName]);
+
+  const search = async (searchData: any) => {
+    setAirDCPPSearchResults([]);
+    socketRef.current?.emit("call", "socket.search", {
+      query: searchData,
+      namespace: "/manual",
+      config: {
+        protocol: `ws`,
+        hostname: `192.168.1.119:5600`,
+        username: `admin`,
+        password: `password`,
+      },
+    });
+  };
+
+  const download = async (
+    searchInstanceId: string | number,
+    resultId: string,
+    comicObjectId: string,
+    name: string,
+    size: number,
+    type: unknown,
+    config: Record<string, unknown>,
+  ): Promise<void> => {
+    socketRef.current?.emit(
+      "call",
+      "socket.download",
+      {
+        searchInstanceId,
+        resultId,
+        comicObjectId,
+        name,
+        size,
+        type,
+        config,
+      },
+      (data: any) => {
+        // Download initiated
+      },
+    );
+  };
+
+  const getDCPPSearchResults = async (searchQuery: { issueName: string }) => {
+    const manualQuery = {
+      query: {
+        pattern: `${searchQuery.issueName}`,
+        extensions: ["cbz", "cbr", "cb7"],
+      },
+      hub_urls: [hubs?.data[0].hub_url],
+      priority: 5,
+    };
+
+    search(manualQuery);
+  };
+
+  return (
+    <>
+      <div className="mt-5 mb-3">
+        {!isEmpty(hubs?.data) ? (
+          <Form
+            onSubmit={getDCPPSearchResults}
+            initialValues={{
+              issueName,
+            }}
+            render={({ handleSubmit, form, submitting, pristine, values }) => (
+              <form onSubmit={handleSubmit}>
+                <Field name="issueName">
+                  {({ input, meta }) => {
+                    return (
+                      <div className="max-w-fit">
+                        <div className="flex flex-row bg-slate-300 dark:bg-slate-400 rounded-l-lg">
+                          <div className="w-10 pl-2 pt-1 text-gray-400 dark:text-gray-200">
+                            <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
+                          </div>
+                          <input
+                            {...input}
+                            className="dark:bg-slate-400 bg-slate-300 py-2 px-2 rounded-l-md border-gray-300 h-10 min-w-full dark:text-slate-800 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                            placeholder="Type an issue/volume name"
+                          />
+
+                          <button
+                            className="sm:mt-0 min-w-fit rounded-r-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"
+                            type="submit"
+                          >
+                            <div className="flex flex-row">
+                              Search DC++
+                              <div className="h-5 w-5 ml-2">
+                                <img
+                                  src="/src/client/assets/img/airdcpp_logo.svg"
+                                  className="h-5 w-5"
+                                />
+                              </div>
+                            </div>
+                          </button>
+                        </div>
+                      </div>
+                    );
+                  }}
+                </Field>
+              </form>
+            )}
+          />
+        ) : (
+          <article
+            role="alert"
+            className="mt-4 rounded-lg text-sm 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"
+          >
+            No AirDC++ hub configured. Please configure it in{" "}
+            <code>Settings &gt; AirDC++ &gt; Hubs</code>.
+          </article>
+        )}
+      </div>
+      {/* configured hub */}
+      {!isEmpty(hubs?.data) && (
+        <span className="inline-flex items-center bg-green-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-green-300">
+          <span className="pr-1 pt-1">
+            <i className="icon-[solar--server-2-bold-duotone] w-5 h-5"></i>
+          </span>
+          {hubs && hubs?.data[0].hub_url}
+        </span>
+      )}
+
+      {/* AirDC++ search instance details */}
+      {!isNil(airDCPPSearchInstance) &&
+        !isEmpty(airDCPPSearchInfo) &&
+        !isNil(hubs) && (
+          <div className="flex flex-row gap-3 my-5 font-hasklig">
+            <div className="block max-w-sm h-fit p-6 text-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
+              <dl>
+                <dt>
+                  <div className="mb-1">
+                    {hubs?.data.map((value: HubData, idx: number) => (
+                      <span className="tag is-warning" key={idx}>
+                        {value.identity.name}
+                      </span>
+                    ))}
+                  </div>
+                </dt>
+
+                <dt>
+                  Query:
+                  <span className="has-text-weight-semibold">
+                    {airDCPPSearchInfo.query?.pattern}
+                  </span>
+                </dt>
+                <dd>
+                  Extensions:
+                  <span className="has-text-weight-semibold">
+                    {airDCPPSearchInfo.query?.extensions.join(", ")}
+                  </span>
+                </dd>
+                <dd>
+                  File type:
+                  <span className="has-text-weight-semibold">
+                    {airDCPPSearchInfo.query?.file_type}
+                  </span>
+                </dd>
+              </dl>
+            </div>
+            <div className="block max-w-sm p-6 h-fit text-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
+              <dl>
+                <dt>Search Instance: {airDCPPSearchInstance.id}</dt>
+                <dt>Owned by {airDCPPSearchInstance.owner}</dt>
+                <dd>Expires in: {airDCPPSearchInstance.expires_in}</dd>
+              </dl>
+            </div>
+          </div>
+        )}
+
+      {/* AirDC++ results */}
+      <div className="">
+        {!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
+          <div className="overflow-x-auto max-w-full mt-6">
+            <table className="w-full table-auto text-sm text-gray-900 dark:text-slate-100">
+              <thead>
+                <tr className="border-b border-gray-300 dark:border-slate-700">
+                  <th className="whitespace-nowrap px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+                    Name
+                  </th>
+                  <th className="whitespace-nowrap px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+                    Type
+                  </th>
+                  <th className="whitespace-nowrap px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+                    Slots
+                  </th>
+                  <th className="whitespace-nowrap px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {map(
+                  airDCPPSearchResults,
+                  ({ dupe, type, name, id, slots, users, size }, idx) => (
+                    <tr
+                      key={idx}
+                      className={
+                        !isNil(dupe)
+                          ? "border-b border-gray-200 dark:border-slate-700 bg-gray-100 dark:bg-gray-700"
+                          : "border-b border-gray-200 dark:border-slate-700 text-sm"
+                      }
+                    >
+                      {/* NAME */}
+                      <td className="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-slate-300 max-w-xs">
+                        <p className="mb-2">
+                          {/* TODO: Switch to Solar icon */}
+                          {type.id === "directory" && (
+                            <i className="fas fa-folder mr-1"></i>
+                          )}
+                          {ellipsize(name, 45)}
+                        </p>
+                        <dl>
+                          <dd>
+                            <div className="inline-flex flex-wrap gap-1">
+                              {!isNil(dupe) && (
+                                <span className="inline-flex items-center gap-1 bg-slate-100 text-slate-800 text-xs font-medium py-0.5 px-2 rounded dark:bg-slate-400 dark:text-slate-900">
+                                  <i className="icon-[solar--copy-bold-duotone] w-4 h-4"></i>
+                                  Dupe
+                                </span>
+                              )}
+                              <span className="inline-flex items-center gap-1 bg-slate-100 text-slate-800 text-xs font-medium py-0.5 px-2 rounded dark:bg-slate-400 dark:text-slate-900">
+                                <i className="icon-[solar--user-rounded-bold-duotone] w-4 h-4"></i>
+                                {users.user.nicks}
+                              </span>
+                              {users.user.flags.map((flag, idx) => (
+                                <span
+                                  key={idx}
+                                  className="inline-flex items-center gap-1 bg-slate-100 text-slate-800 text-xs font-medium py-0.5 px-2 rounded dark:bg-slate-400 dark:text-slate-900"
+                                >
+                                  <i className="icon-[solar--tag-horizontal-bold-duotone] w-4 h-4"></i>
+                                  {flag}
+                                </span>
+                              ))}
+                            </div>
+                          </dd>
+                        </dl>
+                      </td>
+
+                      {/* TYPE */}
+                      <td className="px-2 py-3">
+                        <span className="inline-flex items-center gap-1 bg-slate-100 text-slate-800 text-xs font-medium py-0.5 px-2 rounded dark:bg-slate-400 dark:text-slate-900">
+                          <i className="icon-[solar--zip-file-bold-duotone] w-4 h-4"></i>
+                          {type.str}
+                        </span>
+                      </td>
+
+                      {/* SLOTS */}
+                      <td className="px-2 py-3">
+                        <span className="inline-flex items-center gap-1 bg-slate-100 text-slate-800 text-xs font-medium py-0.5 px-2 rounded dark:bg-slate-400 dark:text-slate-900">
+                          <i className="icon-[solar--settings-minimalistic-bold-duotone] w-4 h-4"></i>
+                          {slots.total} slots; {slots.free} free
+                        </span>
+                      </td>
+
+                      {/* ACTIONS */}
+                      <td className="px-2 py-3">
+                        <button
+                          className="inline-flex items-center gap-1 rounded border border-green-500 bg-green-500 px-2 py-1 text-xs font-medium text-white hover:bg-transparent hover:text-green-400 dark:border-green-300 dark:bg-green-300 dark:text-slate-900 dark:hover:bg-transparent"
+                          onClick={() =>
+                            download(
+                              airDCPPSearchInstance.id ?? "",
+                              id,
+                              comicObjectId,
+                              name,
+                              size,
+                              type,
+                              {
+                                protocol: `ws`,
+                                hostname: `192.168.1.119:5600`,
+                                username: `admin`,
+                                password: `password`,
+                              },
+                            )
+                          }
+                        >
+                          Download
+                          <i className="icon-[solar--download-bold-duotone] w-4 h-4"></i>
+                        </button>
+                      </td>
+                    </tr>
+                  ),
+                )}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div className="">
+            <article
+              role="alert"
+              className="mt-4 rounded-lg text-sm max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
+            >
+              <div>
+                The default search term is an auto-detected title; you may need
+                to change it to get better matches if the auto-detected one
+                doesn't work.
+              </div>
+            </article>
+
+            <article
+              role="alert"
+              className="mt-4 rounded-lg text-sm max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
+            >
+              <div>
+                Searching via <strong>AirDC++</strong> is still in{" "}
+                <strong>alpha</strong>. Some searches may take arbitrarily long,
+                or may not work at all. Searches from{" "}
+                <code className="font-hasklig">ADCS</code> hubs are more
+                reliable than <code className="font-hasklig">NMDCS</code> ones.
+              </div>
+            </article>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default AcquisitionPanel;

src/client/components/ComicDetail/ActionMenu/Menu.tsx

@@ -0,0 +1,46 @@
+import React, { ReactElement } from "react";
+import Select, { StylesConfig, SingleValue } from "react-select";
+import { ActionOption } from "../actionMenuConfig";
+
+interface MenuConfiguration {
+  filteredActionOptions: ActionOption[];
+  customStyles: StylesConfig<ActionOption, false>;
+  handleActionSelection: (action: SingleValue<ActionOption>) => void;
+}
+
+interface MenuProps {
+  data?: unknown;
+  handlers?: {
+    setSlidingPanelContentId: (id: string) => void;
+    setVisible: (visible: boolean) => void;
+  };
+  configuration: MenuConfiguration;
+}
+
+export const Menu = (props: MenuProps): ReactElement => {
+  const {
+    filteredActionOptions,
+    customStyles,
+    handleActionSelection,
+  } = props.configuration;
+
+  return (
+    <Select<ActionOption, false>
+      placeholder={
+        <span className="inline-flex flex-row items-center gap-2 pt-1">
+          <div className="w-6 h-6">
+            <i className="icon-[solar--cursor-bold-duotone] w-6 h-6"></i>
+          </div>
+          <div>Select An Action</div>
+        </span>
+      }
+      styles={customStyles}
+      name="actions"
+      isSearchable={false}
+      options={filteredActionOptions}
+      onChange={handleActionSelection}
+    />
+  );
+};
+
+export default Menu;

src/client/components/ComicDetail/AirDCPPBundles.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import prettyBytes from "pretty-bytes";
+import dayjs from "dayjs";
+import ellipsize from "ellipsize";
+import { map } from "lodash";
+import { DownloadProgressTick } from "./DownloadProgressTick";
+
+interface BundleData {
+  id: string;
+  name: string;
+  target: string;
+  size: number;
+}
+
+interface AirDCPPBundlesProps {
+  data: BundleData[];
+}
+
+export const AirDCPPBundles = (props: AirDCPPBundlesProps) => {
+  return (
+    <div className="overflow-x-auto w-fit mt-6">
+      <table className="min-w-full text-sm text-gray-900 dark:text-slate-100">
+        <thead>
+          <tr className="border-b border-gray-300 dark:border-slate-700">
+            <th className="px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+              Filename
+            </th>
+            <th className="px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+              Size
+            </th>
+            <th className="px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+              Download Status
+            </th>
+            <th className="px-3 py-2 text-left text-[11px] font-semibold tracking-wide text-gray-500 dark:text-slate-400 uppercase">
+              Bundle ID
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {map(props.data, (bundle, index) => (
+            <tr
+              key={bundle.id}
+              className={
+                Number(index) !== props.data.length - 1
+                  ? "border-b border-gray-200 dark:border-slate-700"
+                  : ""
+              }
+            >
+              <td className="px-3 py-2 align-top">
+                <h5 className="font-medium text-gray-800 dark:text-slate-200">
+                  {ellipsize(bundle.name, 58)}
+                </h5>
+                <p className="text-xs text-gray-500 dark:text-slate-400">
+                  {ellipsize(bundle.target, 88)}
+                </p>
+              </td>
+              <td className="px-3 py-2 align-top">
+                {prettyBytes(bundle.size)}
+              </td>
+              <td className="px-3 py-2 align-top">
+                <DownloadProgressTick bundleId={bundle.id} />
+              </td>
+              <td className="px-3 py-2 align-top">
+                <span className="text-xs text-yellow-800 dark:text-yellow-300 font-medium">
+                  {bundle.id}
+                </span>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

src/client/components/ComicDetail/AsyncSelectPaginate/AsyncSelectPaginate.tsx

@@ -0,0 +1,75 @@
+import React, { ReactElement, useCallback, useState } from "react";
+import axios from "axios";
+import { isNil } from "lodash";
+import Creatable from "react-select/creatable";
+import { withAsyncPaginate } from "react-select-async-paginate";
+import { METRON_SERVICE_URI } from "../../../constants/endpoints";
+
+const CreatableAsyncPaginate = withAsyncPaginate(Creatable);
+
+export interface AsyncSelectPaginateProps {
+  metronResource?: string;
+  placeholder?: string | React.ReactNode;
+  value?: object;
+  onChange?(...args: unknown[]): unknown;
+  meta?: Record<string, unknown>;
+  input?: Record<string, unknown>;
+  name?: string;
+  type?: string;
+}
+
+interface AdditionalType {
+  page: number | null;
+}
+
+interface MetronResultItem {
+  name?: string;
+  __str__?: string;
+  id: number;
+}
+
+export const AsyncSelectPaginate = (props: AsyncSelectPaginateProps): ReactElement => {
+  const [isAddingInProgress, setIsAddingInProgress] = useState(false);
+
+  const loadData = useCallback(async (
+    query: string,
+    _loadedOptions: unknown,
+    additional?: AdditionalType
+  ) => {
+    const page = additional?.page ?? 1;
+    const options = {
+      method: "GET",
+      resource: props.metronResource || "",
+      query: { name: query, page },
+    };
+    const response = await axios.post(`${METRON_SERVICE_URI}/fetchResource`, options);
+    const results = response.data.results.map((result: MetronResultItem) => ({
+      label: result.name || result.__str__,
+      value: result.id,
+    }));
+    return {
+      options: results,
+      hasMore: !isNil(response.data.next),
+      additional: {
+        page: !isNil(response.data.next) ? page + 1 : null,
+      },
+    };
+  }, [props.metronResource]);
+
+  return (
+    <CreatableAsyncPaginate
+      debounceTimeout={200}
+      isDisabled={isAddingInProgress}
+      value={props.value}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      loadOptions={loadData as any}
+      placeholder={props.placeholder}
+      onChange={props.onChange}
+      additional={{
+        page: 1,
+      }}
+    />
+  );
+};
+
+export default AsyncSelectPaginate;

src/client/components/ComicDetail/ComicDetail.tsx

@@ -0,0 +1,224 @@
+import React, { useState, ReactElement, useCallback, useMemo } from "react";
+import { useParams } from "react-router-dom";
+import Card from "../shared/Carda";
+import { RawFileDetails } from "./RawFileDetails";
+import TabControls from "./TabControls";
+import { Menu } from "./ActionMenu/Menu";
+import { isEmpty, isUndefined, isNil, filter } from "lodash";
+import { components } from "react-select";
+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 { ComicDetailProps } from "../../types";
+
+// Extracted modules
+import { useComicVineMatching } from "./useComicVineMatching";
+import { createTabConfig } from "./tabConfig";
+import { actionOptions, customStyles, ActionOption } from "./actionMenuConfig";
+import { CVMatchesPanel, EditMetadataPanelWrapper } from "./SlidingPanelContent";
+
+// Styled component - moved outside to prevent recreation
+const StyledSlidingPanel = styled(SlidingPane)`
+  background: #ccc;
+`;
+
+/**
+ * Displays full comic detail: cover, file info, action menu, and tabbed panels
+ * for metadata, archive operations, and acquisition.
+ *
+ * @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`.
+ */
+export const ComicDetail = (data: ComicDetailProps): ReactElement => {
+  const {
+    data: {
+      _id,
+      rawFileDetails,
+      inferredMetadata,
+      sourcedMetadata: { comicvine, locg, comicInfo },
+      acquisition,
+      createdAt,
+    },
+    userSettings,
+    queryClient,
+    comicObjectId: comicObjectIdProp,
+  } = data;
+
+  const [activeTab, setActiveTab] = useState<number | undefined>(undefined);
+  const [visible, setVisible] = useState(false);
+  const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
+
+  const { comicObjectId } = useParams<{ comicObjectId: string }>();
+  const { comicVineMatches, prepareAndFetchMatches } = useComicVineMatching();
+
+  // Action event handlers
+  const openDrawerWithCVMatches = () => {
+    prepareAndFetchMatches(rawFileDetails, comicvine);
+    setSlidingPanelContentId("CVMatches");
+    setVisible(true);
+  };
+
+  const openEditMetadataPanel = useCallback(() => {
+    setSlidingPanelContentId("editComicBookMetadata");
+    setVisible(true);
+  }, []);
+
+  // Hide "match on Comic Vine" when there are no raw file details — matching
+  // requires file metadata to seed the search query.
+  const filteredActionOptions: ActionOption[] = actionOptions.filter((item) => {
+    if (isUndefined(rawFileDetails)) {
+      return item.value !== "match-on-comic-vine";
+    }
+    return true;
+  });
+
+  const handleActionSelection = (action: ActionOption | null) => {
+    if (!action) return;
+    switch (action.value) {
+      case "match-on-comic-vine":
+        openDrawerWithCVMatches();
+        break;
+      case "edit-metdata":
+        openEditMetadataPanel();
+        break;
+      default:
+        break;
+    }
+  };
+
+  // Check for metadata availability
+  const isComicBookMetadataAvailable =
+    !isUndefined(comicvine) && !isUndefined(comicvine?.volumeInformation);
+
+  const hasAnyMetadata =
+    isComicBookMetadataAvailable ||
+    !isEmpty(comicInfo) ||
+    !isNil(locg);
+
+  const areRawFileDetailsAvailable =
+    !isUndefined(rawFileDetails) && !isEmpty(rawFileDetails);
+
+  const { issueName, url } = determineCoverFile({
+    rawFileDetails,
+    comicvine,
+    locg,
+  });
+
+  // Query for airdc++
+  const airDCPPQuery = useMemo(() => ({
+    issue: { name: issueName },
+  }), [issueName]);
+
+  // Create tab configuration
+  const openReconcilePanel = useCallback(() => {
+    setSlidingPanelContentId("metadataReconciliation");
+    setVisible(true);
+  }, []);
+
+  const tabGroup = useMemo(() => createTabConfig({
+    data: data.data,
+    hasAnyMetadata,
+    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]);
+
+  // Sliding panel content mapping
+  const renderSlidingPanelContent = () => {
+    switch (slidingPanelContentId) {
+      case "CVMatches":
+        return (
+          <CVMatchesPanel
+            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={() => {
+              setVisible(false);
+              setActiveTab(1);
+            }}
+          />
+        );
+      case "editComicBookMetadata":
+        return <EditMetadataPanelWrapper rawFileDetails={rawFileDetails} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <section className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
+      <div className="section">
+        {!isNil(data) && !isEmpty(data) && (
+          <>
+            <div>
+              <div className="flex flex-row mt-5">
+                <Card
+                  imageUrl={url}
+                  orientation={"cover-only"}
+                  hasDetails={false}
+                />
+
+                {/* raw file details */}
+                {!isUndefined(rawFileDetails) &&
+                  !isEmpty(rawFileDetails?.cover) && (
+                    <div className="grid">
+                      <RawFileDetails
+                        data={{
+                          rawFileDetails,
+                          inferredMetadata,
+                          createdAt,
+                        }}
+                      >
+                        {/* action dropdown */}
+                        <div className="mt-1 flex flex-row gap-2 w-full">
+                          <Menu
+                            data={data.data}
+                            handlers={{ setSlidingPanelContentId, setVisible }}
+                            configuration={{
+                              filteredActionOptions,
+                              customStyles,
+                              handleActionSelection,
+                            }}
+                          />
+                        </div>
+                      </RawFileDetails>
+                    </div>
+                  )}
+              </div>
+            </div>
+
+            <TabControls
+              filteredTabs={filteredTabs}
+              downloadCount={acquisition?.directconnect?.downloads?.length || 0}
+              activeTab={activeTab}
+              setActiveTab={setActiveTab}
+            />
+
+            <StyledSlidingPanel
+              isOpen={visible}
+              onRequestClose={() => setVisible(false)}
+              title={"Comic Vine Search Matches"}
+              width={"600px"}
+            >
+              {renderSlidingPanelContent()}
+            </StyledSlidingPanel>
+          </>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default ComicDetail;

src/client/components/ComicDetail/ComicDetailContainer.tsx

@@ -0,0 +1,40 @@
+import React, { ReactElement } from "react";
+import { useParams } from "react-router-dom";
+import { ComicDetail } from "../ComicDetail/ComicDetail";
+import { useQueryClient } from "@tanstack/react-query";
+import { useGetComicByIdQuery } from "../../graphql/generated";
+import { adaptGraphQLComicToLegacy } from "../../graphql/adapters/comicAdapter";
+
+export const ComicDetailContainer = (): ReactElement | null => {
+  const { comicObjectId } = useParams<{ comicObjectId: string }>();
+  const queryClient = useQueryClient();
+  
+  const {
+    data: comicBookDetailData,
+    isLoading,
+    isError,
+  } = useGetComicByIdQuery(
+    { id: comicObjectId! },
+    { enabled: !!comicObjectId }
+  );
+
+  if (isError) {
+    return <div>Error loading comic details</div>;
+  }
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  const adaptedData = comicBookDetailData?.comic 
+    ? adaptGraphQLComicToLegacy(comicBookDetailData.comic)
+    : null;
+
+  return adaptedData ? (
+    <ComicDetail
+      data={adaptedData}
+      queryClient={queryClient}
+      comicObjectId={comicObjectId}
+    />
+  ) : null;
+};

src/client/components/ComicDetail/ComicVineDetails.tsx

@@ -0,0 +1,113 @@
+import React, { ReactElement } from "react";
+import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
+import dayjs from "dayjs";
+import { isEmpty, isUndefined } from "lodash";
+import Card from "../shared/Carda";
+import { convert } from "html-to-text";
+import type { ComicVineDetailsProps } from "../../types";
+
+export const ComicVineDetails = (props: ComicVineDetailsProps): ReactElement => {
+  const { data, updatedAt } = props;
+
+  if (!data || !data.volumeInformation) {
+    return <div className="text-slate-500 dark:text-gray-400">No ComicVine data available</div>;
+  }
+
+  const detectedIssueType = data.volumeInformation.description
+    ? detectIssueTypes(data.volumeInformation.description)
+    : undefined;
+
+  return (
+    <div className="text-slate-500 dark:text-gray-400">
+      <div className="">
+        <div>
+          <div className="flex flex-row gap-4">
+            <div className="min-w-fit">
+              <Card
+                imageUrl={data.volumeInformation.image?.thumb_url}
+                orientation={"cover-only"}
+                hasDetails={false}
+              />
+            </div>
+            <div className="flex flex-col gap-5">
+              <div className="flex flex-row">
+                <div>
+                  {/* Title */}
+                  <div>
+                    <div className="text-lg">{data.name}</div>
+                    <div className="text-sm">
+                      Is a part of{" "}
+                      <span className="has-text-info">
+                        {data.volumeInformation.name}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Comicvine metadata */}
+                  <div className="mt-2">
+                    <div className="text-md">ComicVine Metadata</div>
+                    <div className="text-sm">
+                      Last scraped on{" "}
+                      {updatedAt ? dayjs(updatedAt).format("MMM D YYYY [at] h:mm a") : "Unknown"}
+                    </div>
+                    <div className="text-sm">
+                      ComicVine Issue ID
+                      <span>{data.id}</span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Publisher details */}
+                <div className="ml-8">
+                  Published by{" "}
+                  <span>{data.volumeInformation.publisher?.name}</span>
+                  <div>
+                    Total issues in this volume{" "}
+                    <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                      <span className="text-md text-slate-900 dark:text-slate-900">
+                        {data.volumeInformation.count_of_issues}
+                      </span>
+                    </span>
+                  </div>
+                  <div>
+                    {data.issue_number && (
+                      <div className="">
+                        <span>Issue Number</span>
+                        <span>{data.issue_number}</span>
+                      </div>
+                    )}
+                    {!isUndefined(detectedIssueType) ? (
+                      <div>
+                        <span>Detected Type</span>
+                        <span>
+                          {detectedIssueType.displayName}
+                        </span>
+                      </div>
+                    ) : data.resource_type ? (
+                      <div>
+                        <span>Type</span>
+                        <span>{data.resource_type}</span>
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+              </div>
+              {/* Description */}
+              <div className="mt-3 w-3/4">
+                {!isEmpty(data.description) &&
+                  data.description &&
+                  convert(data.description, {
+                    baseElements: {
+                      selectors: ["p"],
+                    },
+                  })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ComicVineDetails;

src/client/components/ComicDetail/ComicVineMatchPanel.tsx

@@ -0,0 +1,49 @@
+import React, { ReactElement } from "react";
+import MatchResult from "./MatchResult";
+import { isEmpty } from "lodash";
+import { useStore } from "../../store";
+import { useShallow } from "zustand/react/shallow";
+import type { ComicVineMatchPanelProps } from "../../types";
+
+/** Displays ComicVine search results or a status message while searching. */
+export const ComicVineMatchPanel = ({ props: comicVineData }: ComicVineMatchPanelProps): ReactElement => {
+  const { comicObjectId, comicVineMatches, queryClient, onMatchApplied } = comicVineData;
+  const { comicvine } = useStore(
+    useShallow((state) => ({
+      comicvine: state.comicvine,
+    })),
+  );
+  return (
+    <>
+      <div>
+        {!isEmpty(comicVineMatches) ? (
+          <MatchResult
+            matchData={comicVineMatches}
+            comicObjectId={comicObjectId}
+            queryClient={queryClient}
+            onMatchApplied={onMatchApplied}
+          />
+        ) : (
+          <>
+            <article
+              role="alert"
+              className="mt-4 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 text-sm"
+            >
+              <div>
+                <p>ComicVine match results are an approximation.</p>
+                <p>
+                  Auto-matching is not available yet. If you see no results or
+                  poor quality ones, you can override the search query
+                  parameters to get better ones.
+                </p>
+              </div>
+            </article>
+            <div className="text-md my-5">{comicvine.scrapingStatus}</div>
+          </>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default ComicVineMatchPanel;

src/client/components/ComicDetail/ComicVineSearchForm.tsx

@@ -0,0 +1,99 @@
+import React, { useCallback } from "react";
+import { Form, Field } from "react-final-form";
+import { ValidationErrors } from "final-form";
+
+interface ComicVineSearchFormProps {
+  rawFileDetails?: Record<string, unknown>;
+}
+
+interface SearchFormValues {
+  issueName?: string;
+  issueNumber?: string;
+  issueYear?: string;
+}
+
+/**
+ * Component for performing search against ComicVine
+ *
+ * @component
+ * @example
+ * return (
+ *   <ComicVineSearchForm data={rawFileDetails} />
+ * )
+ */
+export const ComicVineSearchForm = (props: ComicVineSearchFormProps) => {
+  const onSubmit = useCallback((value: SearchFormValues) => {
+    const userInititatedQuery = {
+      inferredIssueDetails: {
+        name: value.issueName,
+        number: value.issueNumber,
+        subtitle: "",
+        year: value.issueYear,
+      },
+    };
+    // dispatch(fetchComicVineMatches(data, userInititatedQuery));
+  }, []);
+  const validate = (_values: SearchFormValues): ValidationErrors | undefined => {
+    return undefined;
+  };
+
+  const MyForm = () => (
+    <Form
+      onSubmit={onSubmit}
+      validate={validate}
+      render={({ handleSubmit }) => (
+        <form onSubmit={handleSubmit}>
+          <label className="block py-1 text-slate-700 dark:text-slate-200">Issue Name</label>
+          <Field name="issueName">
+            {(props) => (
+              <input
+                {...props.input}
+                className="appearance-none bg-slate-100 dark:bg-slate-700 h-10 w-full rounded-md border border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-100 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-300"
+                placeholder="Type the issue name"
+              />
+            )}
+          </Field>
+          <div className="flex flex-row gap-4 mt-2">
+            <div>
+              <label className="block py-1 text-slate-700 dark:text-slate-200">Number</label>
+              <Field name="issueNumber">
+                {(props) => (
+                  <input
+                    {...props.input}
+                    className="appearance-none bg-slate-100 dark:bg-slate-700 h-10 w-14 rounded-md border border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-100 py-1 pr-2 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-300"
+                    placeholder="#"
+                  />
+                )}
+              </Field>
+            </div>
+            <div>
+              <label className="block py-1 text-slate-700 dark:text-slate-200">Year</label>
+              <Field name="issueYear">
+                {(props) => (
+                  <input
+                    {...props.input}
+                    className="appearance-none bg-slate-100 dark:bg-slate-700 h-10 w-20 rounded-md border border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-100 py-1 pr-2 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-300"
+                    placeholder="1984"
+                  />
+                )}
+              </Field>
+            </div>
+
+            <div className="flex items-end">
+              <button
+                type="submit"
+                className="flex h-10 items-center rounded-lg border border-green-500 dark:border-green-400 bg-green-500 dark:bg-green-600 px-4 py-2 text-white font-medium hover:bg-green-600 dark:hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 active:bg-green-700"
+              >
+                Search
+              </button>
+            </div>
+          </div>
+        </form>
+      )}
+    />
+  );
+
+  return <MyForm />;
+};
+
+export default ComicVineSearchForm;

src/client/components/ComicDetail/DownloadProgressTick.tsx

@@ -0,0 +1,109 @@
+import prettyBytes from "pretty-bytes";
+import React, { ReactElement, useEffect, useRef, useState } from "react";
+import { useStore } from "../../store";
+import type { Socket } from "socket.io-client";
+import type { DownloadProgressTickProps } from "../../types";
+
+/**
+ * Shape of the download tick data received over the socket.
+ */
+type DownloadTickData = {
+  id: number;
+  name: string;
+  downloaded_bytes: number;
+  size: number;
+  speed: number;
+  seconds_left: number;
+  status: {
+    id: string;
+    str: string;
+    completed: boolean;
+    downloaded: boolean;
+    failed: boolean;
+    hook_error: any;
+  };
+  sources: {
+    online: number;
+    total: number;
+    str: string;
+  };
+  target: string;
+};
+
+export const DownloadProgressTick: React.FC<DownloadProgressTickProps> = ({
+  bundleId,
+}): ReactElement | null => {
+  const socketRef = useRef<Socket | undefined>(undefined);
+  const [tick, setTick] = useState<DownloadTickData | null>(null);
+  useEffect(() => {
+    const socket = useStore.getState().getSocket("manual");
+    socketRef.current = socket;
+
+    socket.emit("call", "socket.listenFileProgress", {
+      namespace: "/manual",
+      config: {
+        protocol: `ws`,
+        hostname: `192.168.1.119:5600`,
+        username: `admin`,
+        password: `password`,
+      },
+    });
+
+    /**
+     * Handler for each "downloadTick" event.
+     * Only update state if event.id matches bundleId.
+     *
+     * @param {DownloadTickData} data - Payload from the server
+     */
+    const onDownloadTick = (data: DownloadTickData) => {
+      // Compare numeric data.id to string bundleId
+      if (data.id === parseInt(bundleId, 10)) {
+        setTick(data);
+      }
+    };
+
+    socket.on("downloadTick", onDownloadTick);
+    return () => {
+      socket.off("downloadTick", onDownloadTick);
+    };
+  }, [socketRef, bundleId]);
+
+  if (!tick) {
+    return <>Nothing detected.</>;
+  }
+
+  // Compute human-readable values and percentages
+  const downloaded = prettyBytes(tick.downloaded_bytes);
+  const total = prettyBytes(tick.size);
+  const percent = tick.size > 0
+    ? Math.round((tick.downloaded_bytes / tick.size) * 100)
+    : 0;
+  const speed = prettyBytes(tick.speed) + "/s";
+  const minutesLeft = Math.round(tick.seconds_left / 60);
+
+  return (
+    <div className="mt-2 p-2 border rounded-md bg-white shadow-sm">
+      {/* Downloaded vs Total */}
+      <div className="mt-1 flex items-center space-x-2">
+        <span className="text-sm text-gray-700">{downloaded} of {total}</span>
+      </div>
+
+      {/* Progress bar */}
+      <div className="relative mt-2 h-2 bg-gray-200 rounded overflow-hidden">
+        <div
+          className="absolute inset-y-0 left-0 bg-green-500"
+          style={{ width: `${percent}%` }}
+        />
+      </div>
+      <div className="mt-1 text-xs text-gray-600">{percent}% complete</div>
+
+      {/* Speed and Time Left */}
+      <div className="mt-2 flex space-x-4 text-xs text-gray-600">
+        <span>Speed: {speed}</span>
+        <span>Time left: {minutesLeft} min</span>
+      </div>
+    </div>
+  );
+};
+
+export default DownloadProgressTick;

src/client/components/ComicDetail/DownloadsPanel.tsx

@@ -0,0 +1,154 @@
+import React, { useEffect, ReactElement, useState, useMemo } from "react";
+import { isEmpty, isNil, isUndefined, map } from "lodash";
+import { AirDCPPBundles } from "./AirDCPPBundles";
+import { TorrentDownloads, TorrentData } from "./TorrentDownloads";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import {
+  LIBRARY_SERVICE_BASE_URI,
+  QBITTORRENT_SERVICE_BASE_URI,
+  TORRENT_JOB_SERVICE_BASE_URI,
+} from "../../constants/endpoints";
+import { useStore } from "../../store";
+import { useShallow } from "zustand/react/shallow";
+import { useParams } from "react-router-dom";
+
+export interface TorrentDetails {
+  infoHash: string;
+  progress: number;
+  downloadSpeed?: number;
+  uploadSpeed?: number;
+}
+
+/**
+ * DownloadsPanel displays two tabs of download information for a specific comic:
+ * - DC++ (AirDCPP) bundles
+ * - Torrent downloads
+ * It also listens for real-time torrent updates via a WebSocket.
+ *
+ * @component
+ * @returns {ReactElement | null} The rendered DownloadsPanel or null if no socket is available.
+ */
+export const DownloadsPanel = (): ReactElement | null => {
+  const { comicObjectId } = useParams<{ comicObjectId: string }>();
+  const [infoHashes, setInfoHashes] = useState<string[]>([]);
+  const [torrentDetails, setTorrentDetails] = useState<TorrentData[]>([]);
+  const [activeTab, setActiveTab] = useState<"directconnect" | "torrents">(
+    "directconnect",
+  );
+
+  const { socketIOInstance } = useStore(
+    useShallow((state: any) => ({ socketIOInstance: state.socketIOInstance })),
+  );
+
+  /**
+   * Registers socket listeners on mount and cleans up on unmount.
+   */
+  useEffect(() => {
+    if (!socketIOInstance) return;
+
+    /**
+     * Handler for incoming torrent data events.
+     * Merges new entries or updates existing ones by infoHash.
+     *
+     * @param {TorrentDetails} data - Payload from the socket event.
+     */
+    const handleTorrentData = (data: TorrentDetails) => {
+      setTorrentDetails((prev) => {
+        const idx = prev.findIndex((t) => t.infoHash === data.infoHash);
+        if (idx === -1) {
+          return [...prev, data];
+        }
+        const next = [...prev];
+        next[idx] = { ...next[idx], ...data };
+        return next;
+      });
+    };
+
+    socketIOInstance.on("AS_TORRENT_DATA", handleTorrentData);
+
+    return () => {
+      socketIOInstance.off("AS_TORRENT_DATA", handleTorrentData);
+    };
+  }, [socketIOInstance]);
+
+  // ————— DC++ Bundles (via REST) —————
+  const { data: bundles } = useQuery({
+    queryKey: ["bundles", comicObjectId],
+    queryFn: async () =>
+      await axios({
+        url: `${LIBRARY_SERVICE_BASE_URI}/getBundles`,
+        method: "POST",
+        data: {
+          comicObjectId,
+          config: {
+            protocol: `ws`,
+            hostname: `192.168.1.119:5600`,
+            username: `admin`,
+            password: `password`,
+          },
+        },
+      }),
+  });
+
+  // ————— Torrent Jobs (via REST) —————
+  const { data: rawJobs = [] } = useQuery<any[]>({
+    queryKey: ["torrents", comicObjectId],
+    queryFn: async () => {
+      const { data } = await axios.get(
+        `${TORRENT_JOB_SERVICE_BASE_URI}/getTorrentData`,
+        { params: { trigger: activeTab } },
+      );
+      return Array.isArray(data) ? data : [];
+    },
+    initialData: [],
+    enabled: activeTab === "torrents",
+  });
+
+  // Only when rawJobs changes *and* activeTab === "torrents" should we update infoHashes:
+  useEffect(() => {
+    if (activeTab !== "torrents") return;
+    setInfoHashes(rawJobs.map((j: any) => j.infoHash));
+  }, [activeTab]);
+
+  return (
+    <>
+      <div className="mt-5 mb-3">
+        <nav className="flex space-x-2">
+          <button
+            onClick={() => setActiveTab("directconnect")}
+            className={`px-4 py-1 rounded-full text-sm font-medium transition-colors ${
+              activeTab === "directconnect"
+                ? "bg-green-500 text-white"
+                : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+            }`}
+          >
+            DC++
+          </button>
+          <button
+            onClick={() => setActiveTab("torrents")}
+            className={`px-4 py-1 rounded-full text-sm font-medium transition-colors ${
+              activeTab === "torrents"
+                ? "bg-blue-500 text-white"
+                : "bg-gray-200 text-gray-700 hover:bg-gray-300"
+            }`}
+          >
+            Torrents
+          </button>
+        </nav>
+
+        <div className="mt-4">
+          {activeTab === "torrents" ? (
+            <TorrentDownloads data={torrentDetails} />
+          ) : !isNil(bundles?.data) && bundles.data.length > 0 ? (
+            <AirDCPPBundles data={bundles.data} />
+          ) : (
+            <p>No DC++ bundles found.</p>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DownloadsPanel;

src/client/components/ComicDetail/EditMetadataPanel.tsx

@@ -0,0 +1,303 @@
+import React, { ReactElement } from "react";
+import { Form, Field, FieldRenderProps } 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 => {
+  const onSubmit = async () => {};
+
+  return (
+    <>
+      <Form
+        onSubmit={onSubmit}
+        mutators={{ ...arrayMutators }}
+        render={({
+          handleSubmit,
+          form: {
+            mutators: { push, pop },
+          },
+        }) => (
+          <form onSubmit={handleSubmit}>
+            {/* Issue Name */}
+            <div className="field is-horizontal">
+              <div className="field-label is-normal">
+                <label className="label">Issue Details</label>
+              </div>
+              <div className="field-body">
+                <Field
+                  name="issue_name"
+                  component="input"
+                  className="appearance-none w-full dark:bg-slate-400 bg-slate-100 h-10 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                  initialValue={data.name}
+                  placeholder={"Issue Name"}
+                />
+              </div>
+            </div>
+            {/* Issue Number and year */}
+            <div className="mt-4 flex flex-row gap-2">
+              <div>
+                <div className="text-sm">Issue Number</div>
+                <Field
+                  name="issue_number"
+                  component="input"
+                  className="dark:bg-slate-400 w-20 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                  placeholder="Issue Number"
+                />
+                <p className="text-xs">Do not enter the first zero</p>
+              </div>
+              <div>
+                <div className="text-sm">Issue Year</div>
+                <Field
+                  name="issue_year"
+                  component="input"
+                  className="dark:bg-slate-400 w-20 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                />
+              </div>
+
+              <div>
+                <div className="text-sm">Page Count</div>
+                <Field
+                  name="page_count"
+                  component="input"
+                  className="dark:bg-slate-400 w-20 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                  placeholder="Page Count"
+                />
+              </div>
+            </div>
+
+            {/* Description */}
+            <div className="mt-2">
+              <label className="text-sm">Description</label>
+              <Field
+                name={"description"}
+                className="dark:bg-slate-400 w-full min-h-24 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                component={TextareaAutosizeAdapter}
+                placeholder={"Description"}
+              />
+            </div>
+
+            <hr />
+
+            <div className="field is-horizontal">
+              <div className="field-label">
+                <label className="label">Distributor Info</label>
+              </div>
+              <div className="field-body">
+                <div className="field is-expanded">
+                  <div className="field">
+                    <p className="control has-icons-left">
+                      <Field
+                        name="distributor_sku"
+                        component="input"
+                        className="input"
+                        placeholder="SKU"
+                      />
+                      {/* TODO: Switch to Solar icon */}
+                      <span className="icon is-small is-left">
+                        <i className="fa-solid fa-barcode"></i>
+                      </span>
+                    </p>
+                  </div>
+                </div>
+
+                {/* UPC code */}
+                <div className="field">
+                  <p className="control has-icons-left">
+                    <Field
+                      name="upc_code"
+                      component="input"
+                      className="input"
+                      placeholder="UPC Code"
+                    />
+                    {/* TODO: Switch to Solar icon */}
+                    <span className="icon is-small is-left">
+                      <i className="fa-solid fa-box"></i>
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <hr />
+
+            {/* Publisher */}
+            <div className="field is-horizontal">
+              <div className="field-label is-normal">
+                <label className="label">Publisher</label>
+              </div>
+              <div className="field-body">
+                <div className="field">
+                  <p className="control is-expanded has-icons-left">
+                    <Field
+                      name={"publisher"}
+                      component={AsyncSelectPaginateAdapter}
+                      placeholder={
+                        /* TODO: Switch to Solar icon */
+                        <div>
+                          <i className="fas fa-print mr-2"></i> Publisher
+                        </div>
+                      }
+                      metronResource={"publisher"}
+                    />
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Arc */}
+            <div className="field is-horizontal">
+              <div className="field-label is-normal">
+                <label className="label">Story Arc</label>
+              </div>
+              <div className="field-body">
+                <div className="field">
+                  <p className="control is-expanded has-icons-left">
+                    <Field
+                      name={"story_arc"}
+                      component={AsyncSelectPaginateAdapter}
+                      placeholder={
+                        /* TODO: Switch to Solar icon */
+                        <div>
+                          <i className="fas fa-book-open mr-2"></i> Story Arc
+                        </div>
+                      }
+                      metronResource={"arc"}
+                    />
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* series */}
+            <div className="field is-horizontal">
+              <div className="field-label is-normal">
+                <label className="label">Series</label>
+              </div>
+              <div className="field-body">
+                <div className="field">
+                  <p className="control is-expanded has-icons-left">
+                    <Field
+                      name={"series"}
+                      component={AsyncSelectPaginateAdapter}
+                      placeholder={
+                        /* TODO: Switch to Solar icon */
+                        <div>
+                          <i className="fas fa-layer-group mr-2"></i> Series
+                        </div>
+                      }
+                      metronResource={"series"}
+                    />
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <hr />
+
+            {/* team credits */}
+            <div className="field is-horizontal">
+              <div className="field-label is-normal">
+                <label className="label">Team Credits</label>
+              </div>
+              <div className="field-body mt-4">
+                <div className="field">
+                  <div className="buttons">
+                    <button
+                      type="button"
+                      className="button is-small"
+                      onClick={() => push("credits", undefined)}
+                    >
+                      Add credit
+                    </button>
+                    <button
+                      type="button"
+                      className="button is-small"
+                      onClick={() => pop("credits")}
+                    >
+                      Remove credit
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <FieldArray name="credits">
+              {({ fields }) =>
+                fields.map((name, index) => (
+                  <div className="field is-horizontal" key={name}>
+                    <div className="field-label is-normal">
+                      <label></label>
+                    </div>
+                    <div className="field-body">
+                      <div className="field">
+                        <p className="control">
+                          <Field
+                            name={`${name}.creator`}
+                            component={AsyncSelectPaginateAdapter}
+                            placeholder={
+                              /* TODO: Switch to Solar icon */
+                              <div>
+                                <i className="fa-solid fa-ghost"></i> Creator
+                              </div>
+                            }
+                            metronResource={"creator"}
+                          />
+                        </p>
+                      </div>
+
+                      <div className="field">
+                        <p className="control">
+                          <Field
+                            name={`${name}.role`}
+                            metronResource={"role"}
+                            placeholder={
+                              /* TODO: Switch to Solar icon */
+                              <div>
+                                <i className="fa-solid fa-key"></i> Role
+                              </div>
+                            }
+                            component={AsyncSelectPaginateAdapter}
+                          />
+                        </p>
+                      </div>
+                      {/* TODO: Switch to Solar icon */}
+                      <span
+                        className="icon is-danger mt-2"
+                        onClick={() => fields.remove(index)}
+                        style={{ cursor: "pointer" }}
+                      >
+                        <i className="fas fa-times"></i>
+                      </span>
+                    </div>
+                  </div>
+                ))
+              }
+            </FieldArray>
+          </form>
+        )}
+      />
+    </>
+  );
+};
+
+export default EditMetadataPanel;

src/client/components/ComicDetail/MatchResult.tsx

@@ -0,0 +1,178 @@
+import React from "react";
+import { isNil, map } from "lodash";
+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";
+import type { MatchResultProps } from "../../types";
+
+const handleBrokenImage = (e: React.SyntheticEvent<HTMLImageElement>) => {
+  e.currentTarget.src = "http://localhost:3050/dist/img/noimage.svg";
+};
+
+interface ComicVineMatch {
+  description?: string;
+  name?: string;
+  score: string | number;
+  issue_number: string | number;
+  cover_date: string;
+  image: {
+    thumb_url: string;
+  };
+  volume: {
+    name: string;
+  };
+  volumeInformation: {
+    results: {
+      image: {
+        icon_url: string;
+      };
+      count_of_issues: number;
+      publisher: {
+        name: string;
+      };
+    };
+  };
+}
+
+export const MatchResult = (props: MatchResultProps) => {
+  const applyCVMatch = async (match: ComicVineMatch, comicObjectId: string) => {
+    try {
+      const response = await axios.request({
+        url: `${LIBRARY_SERVICE_BASE_URI}/applyComicVineMetadata`,
+        method: "POST",
+        data: {
+          match,
+          comicObjectId,
+        },
+      });
+      
+      // Invalidate and refetch the comic book metadata
+      if (props.queryClient) {
+        await props.queryClient.invalidateQueries({
+          queryKey: useGetComicByIdQuery.getKey({ id: comicObjectId }),
+        });
+      }
+      
+      // Call the callback to close panel and switch tabs
+      if (props.onMatchApplied) {
+        props.onMatchApplied();
+      }
+      
+      return response;
+    } catch (error) {
+      console.error("Error applying ComicVine match:", error);
+      throw error;
+    }
+  };
+  return (
+    <>
+      <span className="flex items-center mt-6">
+        <span className="text-md text-slate-500 dark:text-slate-500 pr-5">
+          ComicVine Matches
+        </span>
+        <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
+      </span>
+      {map(props.matchData, (match, idx) => {
+        let issueDescription = "";
+        if (!isNil(match.description)) {
+          issueDescription = convert(match.description, {
+            baseElements: {
+              selectors: ["p"],
+            },
+          });
+        }
+        const bestMatchCSSClass = idx === 0 ? "bg-green-100" : "bg-slate-300";
+        return (
+          <div className={`${bestMatchCSSClass} my-5 p-4 rounded-lg`} key={idx}>
+            <div className="flex flex-row gap-4">
+              <div className="min-w-fit">
+                <img
+                  className="rounded-md"
+                  src={match.image.thumb_url}
+                  onError={handleBrokenImage}
+                />
+              </div>
+              <div>
+                <div className="flex flex-row mb-1 justify-end">
+                  {match.name ? (
+                    <p className="text-md w-full">{match.name}</p>
+                  ) : null}
+
+                  {/* score */}
+                  <span className="inline-flex h-fit w-fit items-center bg-green-50 text-sm text-slate-800 font-medium px-2 rounded-md dark:text-slate-900 dark:bg-green-400">
+                    <span className="pr-1 pt-1">
+                      <i className="icon-[solar--course-up-line-duotone] w-4 h-4"></i>
+                    </span>
+                    <span className="text-slate-900 dark:text-slate-900">
+                      {parseInt(match.score, 10)}
+                    </span>
+                  </span>
+                </div>
+                <span className="flex flex-row gap-2 mb-2">
+                  <span className="inline-flex items-center bg-slate-50 text-sm text-slate-800 font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                    <span className="pr-1 pt-1">
+                      <i className="icon-[solar--hashtag-outline] w-4 h-4"></i>
+                    </span>
+                    <span className="text-slate-900 dark:text-slate-900">
+                      {parseInt(match.issue_number, 10)}
+                    </span>
+                  </span>
+                  <span className="inline-flex items-center bg-slate-50 text-slate-800 text-sm font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                    <span className="pr-1 pt-1">
+                      <i className="icon-[solar--calendar-mark-bold-duotone] w-5 h-5"></i>
+                    </span>
+                    <span className="text-slate-900 dark:text-slate-900">
+                      Cover Date: {match.cover_date}
+                    </span>
+                  </span>
+                </span>
+                <div className="text-sm">
+                  {ellipsize(issueDescription, 300)}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex flex-row gap-2 my-4 ml-10">
+              <div className="">
+                <img
+                  src={match.volumeInformation.results.image.icon_url}
+                  className="rounded-md w-full"
+                  onError={handleBrokenImage}
+                />
+              </div>
+
+              <div className="">
+                <span>{match.volume.name}</span>
+                <div className="text-sm">
+                  <p>
+                    Total Issues:
+                    {match.volumeInformation.results.count_of_issues}
+                  </p>
+                  <p>
+                    Published by{" "}
+                    {match.volumeInformation.results.publisher.name}
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="flex justify-end">
+              <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={() => applyCVMatch(match, props.comicObjectId)}
+              >
+                <span className="text-md">Apply Match</span>
+                <span className="w-5 h-5">
+                  <i className="h-5 w-5 icon-[solar--magic-stick-3-bold-duotone]"></i>
+                </span>
+              </button>
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+export default MatchResult;

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -0,0 +1,116 @@
+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";
+
+type RawFileDetailsProps = {
+  data?: {
+    rawFileDetails?: RawFileDetailsType;
+    inferredMetadata?: InferredMetadata;
+    createdAt?: 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 || {};
+  return (
+    <>
+      <div className="max-w-2xl ml-5">
+        <div className="px-4 sm:px-6">
+          <p className="text-gray-500 dark:text-gray-400">
+            <span className="text-xl">{rawFileDetails?.name}</span>
+          </p>
+        </div>
+        <div className="px-4 py-5 sm:px-6">
+          <dl className="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
+            <div className="sm:col-span-1">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                Raw File Details
+              </dt>
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
+                {rawFileDetails?.containedIn}
+                {"/"}
+                {rawFileDetails?.name}
+                {rawFileDetails?.extension}
+              </dd>
+            </div>
+            <div className="sm:col-span-1">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                Inferred Issue Metadata
+              </dt>
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
+                Series Name: {inferredMetadata?.issue?.name}
+                {!isEmpty(inferredMetadata?.issue?.number) ? (
+                  <span className="tag is-primary is-light">
+                    {inferredMetadata?.issue?.number}
+                  </span>
+                ) : null}
+              </dd>
+            </div>
+            <div className="sm:col-span-1">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                MIMEType
+              </dt>
+              <dd className="mt-1 text-sm text-gray-500 dark:text-slate-900">
+                {/* File extension */}
+                <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                  <span className="pt-1">
+                    <i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i>
+                  </span>
+
+                  <span className="text-md text-slate-500 dark:text-slate-900">
+                    {rawFileDetails?.mimeType}
+                  </span>
+                </span>
+              </dd>
+            </div>
+            <div className="sm:col-span-1">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                File Size
+              </dt>
+              <dd className="mt-1 text-sm text-gray-500 dark:text-slate-900">
+                {/* size */}
+                <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium 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-5 h-5"></i>
+                  </span>
+
+                  <span className="text-md text-slate-500 dark:text-slate-900">
+                    {rawFileDetails?.fileSize ? prettyBytes(rawFileDetails.fileSize) : "N/A"}
+                  </span>
+                </span>
+              </dd>
+            </div>
+            <div className="sm:col-span-2">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                Import Details
+              </dt>
+              <dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
+                {createdAt && isValid(parseISO(createdAt)) ? (
+                  <>
+                    {format(parseISO(createdAt), "dd MMMM, yyyy")},{" "}
+                    {format(parseISO(createdAt), "h aaaa")}
+                  </>
+                ) : "N/A"}
+              </dd>
+            </div>
+            <div className="sm:col-span-2">
+              <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                Actions
+              </dt>
+              <dd className="mt-1 text-sm text-gray-900">{props.children}</dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default RawFileDetails;

src/client/components/ComicDetail/SlidingPanelContent.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+import { ComicVineSearchForm } from "./ComicVineSearchForm";
+import { ComicVineMatchPanel } from "./ComicVineMatchPanel";
+import { EditMetadataPanel } from "./EditMetadataPanel";
+import type { RawFileDetails, InferredMetadata } from "../../graphql/generated";
+
+interface CVMatchesPanelProps {
+  rawFileDetails?: RawFileDetails;
+  inferredMetadata: InferredMetadata;
+  comicVineMatches: any[];
+  comicObjectId: string;
+  queryClient: any;
+  onMatchApplied: () => void;
+};
+
+/**
+ * Collapsible container for manual ComicVine search form.
+ * Allows users to manually search when auto-match doesn't yield results.
+ */
+const CollapsibleSearchForm: React.FC<{ rawFileDetails?: RawFileDetails }> = ({
+  rawFileDetails,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div className="border border-slate-300 dark:border-slate-600 rounded-lg overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center justify-between px-4 py-3 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors text-left"
+        aria-expanded={isExpanded}
+      >
+        <span className="flex items-center gap-2 text-slate-700 dark:text-slate-200 font-medium">
+          <svg
+            className={`w-4 h-4 transition-transform ${isExpanded ? "rotate-90" : ""}`}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+          Manual Search
+        </span>
+        <span className="text-sm text-slate-500 dark:text-slate-400">
+          {isExpanded ? "Click to collapse" : "No results? Search manually"}
+        </span>
+      </button>
+      {isExpanded && (
+        <div className="p-4 bg-white dark:bg-slate-800">
+          <ComicVineSearchForm rawFileDetails={rawFileDetails} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * 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,
+  comicVineMatches,
+  comicObjectId,
+  queryClient,
+  onMatchApplied,
+}) => (
+  <>
+    <div className="border-slate-500 border rounded-lg p-2 mb-3">
+      <p className="text-slate-600 dark:text-slate-300">Searching for:</p>
+      {inferredMetadata.issue ? (
+        <>
+          <span className="text-slate-800 dark:text-slate-100 font-medium">{inferredMetadata.issue?.name} </span>
+          <span className="text-slate-600 dark:text-slate-300"> # {inferredMetadata.issue?.number} </span>
+        </>
+      ) : null}
+    </div>
+
+    <CollapsibleSearchForm rawFileDetails={rawFileDetails} />
+
+    <ComicVineMatchPanel
+      props={{
+        comicVineMatches,
+        comicObjectId,
+        queryClient,
+        onMatchApplied,
+      }}
+    />
+  </>
+);
+
+type EditMetadataPanelWrapperProps = {
+  rawFileDetails?: RawFileDetails;
+};
+
+export const EditMetadataPanelWrapper: React.FC<EditMetadataPanelWrapperProps> = ({
+  rawFileDetails,
+}) => <EditMetadataPanel data={rawFileDetails ?? {}} />;

src/client/components/ComicDetail/TabControls.tsx

@@ -0,0 +1,82 @@
+import React, { ReactElement, Suspense, useState } from "react";
+import { isNil } from "lodash";
+
+interface TabItem {
+  id: number;
+  name: string;
+  icon: React.ReactNode;
+  content: React.ReactNode;
+  shouldShow?: boolean;
+}
+
+interface TabControlsProps {
+  filteredTabs: TabItem[];
+  downloadCount: number;
+  activeTab?: number;
+  setActiveTab?: (id: number) => void;
+}
+
+export const TabControls = (props: TabControlsProps): ReactElement => {
+  const { filteredTabs, downloadCount, activeTab, setActiveTab } = props;
+  const [active, setActive] = useState(filteredTabs[0].id);
+  
+  // Use controlled state if provided, otherwise use internal state
+  const currentActive = activeTab !== undefined ? activeTab : active;
+  const handleSetActive = (id: number) => {
+    if (setActiveTab) {
+      setActiveTab(id);
+    } else {
+      setActive(id);
+    }
+  };
+
+  return (
+    <>
+      <div className="hidden sm:block mt-7 mb-3 w-fit">
+        <div className="border-b border-gray-200">
+          <nav className="flex gap-6" aria-label="Tabs">
+            {filteredTabs.map(({ id, name, icon }: TabItem) => (
+              <a
+                key={id}
+                className={`inline-flex shrink-0 items-center gap-2 px-1 py-1 text-md font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:border-b hover:dark:text-slate-200 ${
+                  currentActive === id
+                    ? "border-b border-cyan-50 dark:text-slate-200"
+                    : "border-b border-transparent"
+                }`}
+                aria-current="page"
+                onClick={() => handleSetActive(id)}
+              >
+                {/* Downloads tab and count badge */}
+                <>
+                  {id === 6 && !isNil(downloadCount) ? (
+                    <span className="inline-flex flex-row">
+                      {/* download count */}
+                      <span className="inline-flex mx-2 items-center bg-slate-200 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-orange-400">
+                        <span className="text-md text-slate-500 dark:text-slate-900">
+                          {icon}
+                        </span>
+                      </span>
+                      <i className="h-5 w-5 icon-[solar--download-bold-duotone] text-slate-500 dark:text-slate-300" />
+                    </span>
+                  ) : (
+                    <span className="w-5 h-5">{icon}</span>
+                  )}
+                  {name}
+                </>
+              </a>
+            ))}
+          </nav>
+        </div>
+      </div>
+      <Suspense fallback={null}>
+        {filteredTabs.map(({ id, content }: TabItem) => (
+          <React.Fragment key={id}>
+            {currentActive === id ? content : null}
+          </React.Fragment>
+        ))}
+      </Suspense>
+    </>
+  );
+};
+
+export default TabControls;

src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx

@@ -0,0 +1,254 @@
+import React, { ReactElement, useCallback, useEffect, useState } from "react";
+import { DnD } from "../../shared/Draggable/DnD";
+import { isEmpty } from "lodash";
+import SlidingPane from "react-sliding-pane";
+import { Canvas } from "../../shared/Canvas";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import {
+  IMAGETRANSFORMATION_SERVICE_BASE_URI,
+  LIBRARY_SERVICE_BASE_URI,
+  LIBRARY_SERVICE_HOST,
+} from "../../../constants/endpoints";
+import { useStore } from "../../../store";
+import { useShallow } from "zustand/react/shallow";
+import { escapePoundSymbol } from "../../../shared/utils/formatting.utils";
+
+export const ArchiveOperations = (props: { data: any }): ReactElement => {
+  const { data } = props;
+
+  const getSocket = useStore((state) => state.getSocket);
+  const queryClient = useQueryClient();
+  // sliding panel config
+  const [visible, setVisible] = useState(false);
+  const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
+  // current image
+  const [currentImage, setCurrentImage] = useState<string>("");
+  const [uncompressedArchive, setUncompressedArchive] = useState<string[]>([]);
+  const [imageAnalysisResult, setImageAnalysisResult] = useState<any>({});
+  const [shouldRefetchComicBookData, setShouldRefetchComicBookData] =
+    useState(false);
+  const constructImagePaths = (data: string[]): Array<string> => {
+    return data?.map((path: string) =>
+      escapePoundSymbol(encodeURI(`${LIBRARY_SERVICE_HOST}/${path}`)),
+    );
+  };
+
+  // Listen to the uncompression complete event and orchestrate the final payload
+  useEffect(() => {
+    const socket = getSocket("/");
+    if (!socket) return;
+
+    const handleUncompressionComplete = (data: any) => {
+      setUncompressedArchive(constructImagePaths(data?.uncompressedArchive));
+    };
+
+    socket.on("LS_UNCOMPRESSION_JOB_COMPLETE", handleUncompressionComplete);
+
+    return () => {
+      socket.off("LS_UNCOMPRESSION_JOB_COMPLETE", handleUncompressionComplete);
+    };
+  }, [getSocket]);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    if (data.rawFileDetails?.archive?.uncompressed) {
+      const fetchUncompressedArchive = async () => {
+        try {
+          const response = await axios({
+            url: `${LIBRARY_SERVICE_BASE_URI}/walkFolders`,
+            method: "POST",
+            data: {
+              basePathToWalk: data?.rawFileDetails?.archive?.expandedPath,
+              extensions: [".jpg", ".jpeg", ".png", ".bmp", "gif"],
+            },
+            transformResponse: async (responseData) => {
+              const parsedData = JSON.parse(responseData);
+              const paths = parsedData.map((pathObject: any) => {
+                return `${pathObject.containedIn}/${pathObject.name}${pathObject.extension}`;
+              });
+              const uncompressedArchive = constructImagePaths(paths);
+
+              if (isMounted) {
+                setUncompressedArchive(uncompressedArchive);
+                setShouldRefetchComicBookData(true);
+              }
+            },
+          });
+        } catch (error) {
+          // Error handling could be added here if needed
+        }
+      };
+      fetchUncompressedArchive();
+    }
+
+    // Cleanup function
+    return () => {
+      isMounted = false;
+      setUncompressedArchive([]);
+    };
+  }, [data]);
+
+  const analyzeImage = async (imageFilePath: string) => {
+    const response = await axios({
+      url: `${IMAGETRANSFORMATION_SERVICE_BASE_URI}/analyze`,
+      method: "POST",
+      data: {
+        imageFilePath,
+      },
+    });
+    setImageAnalysisResult(response?.data);
+    queryClient.invalidateQueries({ queryKey: ["uncompressedArchive"] });
+  };
+
+  const {
+    data: uncompressionResult,
+    refetch,
+    isLoading,
+    isSuccess,
+  } = useQuery({
+    queryFn: async () =>
+      await axios({
+        method: "POST",
+        url: `http://localhost:3000/api/library/uncompressFullArchive`,
+        headers: {
+          "Content-Type": "application/json; charset=utf-8",
+        },
+        data: {
+          filePath: data.rawFileDetails.filePath,
+          comicObjectId: data._id,
+          options: {
+            type: "full",
+            purpose: "analysis",
+            imageResizeOptions: {
+              baseWidth: 275,
+            },
+          },
+        },
+      }),
+    queryKey: ["uncompressedArchive"],
+    enabled: false,
+  });
+
+  useEffect(() => {
+    if (isSuccess && shouldRefetchComicBookData) {
+      queryClient.invalidateQueries({ queryKey: ["comicBookMetadata"] });
+      setShouldRefetchComicBookData(false);
+    }
+  }, [isSuccess, shouldRefetchComicBookData, queryClient]);
+
+  // sliding panel init
+  const contentForSlidingPanel: Record<string, { content: () => React.ReactElement }> = {
+    imageAnalysis: {
+      content: () => {
+        return (
+          <div>
+            <pre className="text-sm">{currentImage}</pre>
+            {!isEmpty(imageAnalysisResult) ? (
+              <pre className="p-2 mt-3">
+                <Canvas data={imageAnalysisResult} />
+              </pre>
+            ) : null}
+            <pre className="font-hasklig mt-3 text-sm">
+              {JSON.stringify(imageAnalysisResult?.analyzedData, null, 2)}
+            </pre>
+          </div>
+        );
+      },
+    },
+  };
+
+  // sliding panel handlers
+  const openImageAnalysisPanel = useCallback((imageFilePath: string) => {
+    setSlidingPanelContentId("imageAnalysis");
+    analyzeImage(imageFilePath);
+    setCurrentImage(imageFilePath);
+    setVisible(true);
+  }, []);
+
+  return (
+    <div key={2}>
+      <article
+        role="alert"
+        className="mt-4 text-md rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
+      >
+        <div>
+          <p>You can perform several operations on your comic book archive.</p>
+          <p>
+            Uncompressing, re-organizing the individual pages, then
+            re-compressing to a different format, for example.
+          </p>
+          <p>You can also analyze color histograms of pages.</p>
+        </div>
+      </article>
+      <div className="mt-5">
+        {data.rawFileDetails.archive?.uncompressed &&
+        !isEmpty(uncompressedArchive) ? (
+          <article
+            role="alert"
+            className="mt-4 text-md 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"
+          >
+            This issue is already uncompressed at:
+            <p>
+              <code className="font-hasklig text-sm">
+                {data.rawFileDetails.archive.expandedPath}
+              </code>
+              <div className="">It has {uncompressedArchive?.length} pages</div>
+            </p>
+          </article>
+        ) : null}
+
+        <div className="flex flex-row gap-2 mt-4">
+          {isEmpty(uncompressedArchive) ? (
+            <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-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+              onClick={() => refetch()}
+            >
+              <span className="text-md">Unpack Comic Archive</span>
+              <span className="w-6 h-6">
+                <i className="h-6 w-6 icon-[solar--box-bold-duotone]"></i>
+              </span>
+            </button>
+          ) : null}
+
+          {!isEmpty(uncompressedArchive) ? (
+            <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-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
+                onClick={() => refetch()}
+              >
+                <span className="text-md">Convert to .cbz</span>
+                <span className="w-6 h-6">
+                  <i className="h-6 w-6 icon-[solar--zip-file-bold-duotone]"></i>
+                </span>
+              </button>
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      <div>
+        <div className="mt-10">
+          {!isEmpty(uncompressedArchive) ? (
+            <DnD
+              data={uncompressedArchive}
+              onClickHandler={openImageAnalysisPanel}
+            />
+          ) : null}
+        </div>
+      </div>
+      <SlidingPane
+        isOpen={visible}
+        onRequestClose={() => setVisible(false)}
+        title={"Image Analysis"}
+        width={"600px"}
+      >
+        {slidingPanelContentId !== "" &&
+          contentForSlidingPanel[slidingPanelContentId].content()}
+      </SlidingPane>
+    </div>
+  );
+};
+
+export default ArchiveOperations;