chore(deps): bump actions/checkout from 4 to 5

Bumps [actions/checkout](https://github.com/actions/checkout) from 4 to 5.
- [Release notes](https://github.com/actions/checkout/releases)
- [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md)
- [Commits](https://github.com/actions/checkout/compare/v4...v5)

---
updated-dependencies:
- dependency-name: actions/checkout
  dependency-version: '5'
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

.github/workflows/ci.yml

@@ -9,55 +9,46 @@ env:
   CARGO_TERM_COLOR: always
 
 jobs:
-  # Frontend checks
-  frontend-check:
-    name: Frontend Check
+  build:
     runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
 
-      - name: Install pnpm
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
           version: 10
 
-      - name: Setup Node.js
+      - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: 20
           cache: "pnpm"
 
-      - name: Install dependencies
-        run: pnpm install
+      - name: Install JS deps
+        run: pnpm install --frozen-lockfile
 
-      - name: Check TypeScript
-        run: pnpm run build
-
-      - name: Format check
-        run: pnpm exec prettier --check .
-        continue-on-error: true
-
-  # Rust backend checks
-  rust-check:
-    name: Rust Check
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Install Rust toolchain
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          components: rustfmt, clippy
-
-      - name: Rust Cache
-        uses: Swatinem/rust-cache@v2
-        with:
-          workspaces: src-tauri
+      - name: Build frontend (tsc + vite)
+        run: |
+          pnpm run build  # implicitly runs generate-types
 
       - name: Install Linux dependencies
         run: |
           sudo apt-get update
-          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
+          sudo apt-get install -y \
+            pkg-config \
+            build-essential \
+            libssl-dev \
+            libglib2.0-dev \
+            libwebkit2gtk-4.1-dev \
+            libayatana-appindicator3-dev \
+            librsvg2-dev \
+            patchelf
 
       - name: Format check
         run: cargo fmt --manifest-path src-tauri/Cargo.toml --all -- --check
@@ -67,59 +58,3 @@ jobs:
 
       - name: Run tests
         run: cargo test --manifest-path src-tauri/Cargo.toml --all-features
-
-  # Security audit
-  security-audit:
-    name: Security Audit
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Install Rust toolchain
-        uses: dtolnay/rust-toolchain@stable
-
-      - name: Install cargo-audit
-        uses: taiki-e/cache-cargo-install-action@v2
-        with:
-          tool: cargo-audit
-
-      - name: Run security audit
-        run: cargo audit --file src-tauri/Cargo.lock
-
-  # Check if Tauri app builds successfully
-  build-check:
-    name: Build Check
-    runs-on: ubuntu-latest
-    needs: [frontend-check, rust-check]
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-          cache: "pnpm"
-
-      - name: Install Rust toolchain
-        uses: dtolnay/rust-toolchain@stable
-
-      - name: Rust Cache
-        uses: Swatinem/rust-cache@v2
-        with:
-          workspaces: src-tauri
-
-      - name: Install Linux dependencies
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
-
-      - name: Install frontend dependencies
-        run: pnpm install
-
-      - name: Build Tauri app
-        run: pnpm tauri build --no-bundle

.github/workflows/code-quality.yml

@@ -0,0 +1,142 @@
+name: Code Quality
+
+permissions: read-all
+
+on:
+  workflow_dispatch: # Allow manual triggering
+  pull_request:
+    branches: [master]
+    paths:
+      - "**/Cargo.toml"
+      - "**/Cargo.lock"
+      - "**/package.json"
+      - "**/pnpm-lock.yaml"
+  push:
+    branches: [master]
+    paths:
+      - "**/Cargo.toml"
+      - "**/Cargo.lock"
+      - "**/package.json"
+      - "**/pnpm-lock.yaml"
+
+jobs:
+  rust-quality:
+    name: Rust Code Quality
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+
+      - name: Install Rust toolchain
+        uses: dtolnay/rust-toolchain@nightly
+        with:
+          components: rustfmt, clippy
+
+      - name: Rust Cache
+        uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: src-tauri
+
+      - name: Install Linux dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y \
+            pkg-config \
+            build-essential \
+            libssl-dev \
+            libglib2.0-dev \
+            libwebkit2gtk-4.1-dev \
+            libayatana-appindicator3-dev \
+            librsvg2-dev \
+            patchelf
+
+      - name: Install cargo-udeps
+        uses: taiki-e/cache-cargo-install-action@v2
+        with:
+          tool: cargo-udeps
+
+      - name: Check for unused dependencies
+        run: cargo +nightly udeps --manifest-path src-tauri/Cargo.toml --all-targets
+
+      - name: Install cargo-machete
+        uses: taiki-e/cache-cargo-install-action@v2
+        with:
+          tool: cargo-machete
+
+      - name: Check for unused Cargo.toml dependencies
+        run: cargo machete src-tauri/
+
+      - name: Install cargo-outdated
+        uses: taiki-e/cache-cargo-install-action@v2
+        with:
+          tool: cargo-outdated
+
+      - name: Check for outdated dependencies
+        run: cargo outdated --manifest-path src-tauri/Cargo.toml --exit-code 1
+        continue-on-error: true
+
+  frontend-quality:
+    name: Frontend Code Quality
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Check for unused dependencies
+        run: pnpm exec depcheck --ignore-bin-package=false --skip-missing=true
+        continue-on-error: true
+
+      - name: Check for outdated dependencies
+        run: pnpm outdated
+        continue-on-error: true
+
+      - name: Bundle size analysis
+        run: pnpm run build && du -sh dist/
+        continue-on-error: true
+
+  license-check:
+    name: License Check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+
+      - name: Install Rust toolchain
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Install cargo-license
+        uses: taiki-e/cache-cargo-install-action@v2
+        with:
+          tool: cargo-license
+
+      - name: Check Rust crate licenses
+        run: cargo license --manifest-path src-tauri/Cargo.toml --json > rust-licenses.json
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Check npm package licenses
+        run: pnpm exec license-checker --json > npm-licenses.json
+        continue-on-error: true

.github/workflows/release.yml

@@ -0,0 +1,68 @@
+name: Release
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  build-tauri:
+    permissions:
+      contents: write
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: macos-latest
+            args: --target aarch64-apple-darwin
+          - platform: macos-latest
+            args: --target x86_64-apple-darwin
+          - platform: ubuntu-22.04
+            args: ""
+          - platform: windows-latest
+            args: ""
+
+    runs-on: ${{ matrix.platform }}
+    steps:
+      - uses: actions/checkout@v5
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Install Rust toolchain
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: ${{ matrix.platform == 'macos-latest' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }}
+
+      - name: Rust Cache
+        uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: src-tauri
+
+      - name: Install dependencies (ubuntu only)
+        if: matrix.platform == 'ubuntu-22.04'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
+
+      - name: Install frontend dependencies
+        run: pnpm install
+
+      - name: Build Tauri app
+        uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tagName: app-v__VERSION__
+          releaseName: "App v__VERSION__"
+          releaseBody: "See the assets to download this version and install."
+          releaseDraft: true
+          prerelease: false
+          args: ${{ matrix.args }}

.github/workflows/security-audit.yml

@@ -14,7 +14,7 @@ jobs:
     name: Rust Security Audit
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       - name: Install Rust toolchain
         uses: dtolnay/rust-toolchain@stable
@@ -39,7 +39,7 @@ jobs:
     name: NPM Security Audit
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4

.gitignore

@@ -1,3 +1,6 @@
+src/bindings/*.ts
+src-tauri/bindings/*.ts
+
 # Seed data
 .data/*
 !.data/seed.ps1

.prettierignore

@@ -0,0 +1,3 @@
+src/bindings.ts
+src-tauri/target/**
+src-tauri/gen/**

.prettierrc

@@ -1,5 +1,4 @@
 {
-	"ignore": ["src/bindings.ts"],
 	"useTabs": true,
 	"tabWidth": 2
 }

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
+	"recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
 }

index.html

@@ -1,14 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>byte-me</title>
-  </head>
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>byte-me</title>
+	</head>
 
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
 </html>

package.json

@@ -1,33 +1,36 @@
 {
-  "name": "byte-me",
-  "private": true,
-  "version": "0.1.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "tauri": "tauri"
-  },
-  "dependencies": {
-    "@nivo/core": "^0.99.0",
-    "@nivo/line": "^0.99.0",
-    "@tailwindcss/vite": "^4.1.11",
-    "@tauri-apps/api": "^2",
-    "@tauri-apps/plugin-opener": "^2",
-    "lucide-react": "^0.525.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "tailwindcss": "^4.1.11",
-    "ts-pattern": "^5.7.1"
-  },
-  "devDependencies": {
-    "@tauri-apps/cli": "^2",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.4",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.3",
-    "vitest": "^3.2.4"
-  }
+	"name": "byte-me",
+	"private": true,
+	"version": "0.1.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "pnpm generate-types && tsc && vite build",
+		"preview": "vite preview",
+		"tauri": "tauri",
+		"generate-types": "cargo test --manifest-path src-tauri/Cargo.toml -- --test export_bindings"
+	},
+	"dependencies": {
+		"@nivo/core": "^0.99.0",
+		"@nivo/line": "^0.99.0",
+		"@tailwindcss/vite": "^4.1.11",
+		"@tauri-apps/api": "^2",
+		"@tauri-apps/plugin-opener": "^2",
+		"lucide-react": "^0.525.0",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"tailwindcss": "^4.1.11",
+		"ts-pattern": "^5.7.1"
+	},
+	"devDependencies": {
+		"@tauri-apps/cli": "^2",
+		"@types/react": "^18.3.1",
+		"@types/react-dom": "^18.3.1",
+		"@vitejs/plugin-react": "^4.3.4",
+		"prettier": "^3.6.2",
+		"tsx": "^4.19.2",
+		"typescript": "~5.6.2",
+		"vite": "^6.0.3",
+		"vitest": "^3.2.4"
+	}
 }

pnpm-lock.yaml

@@ -16,7 +16,7 @@ importers:
         version: 0.99.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@tailwindcss/vite':
         specifier: ^4.1.11
-        version: 4.1.11(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))
+        version: 4.1.11(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.4))
       '@tauri-apps/api':
         specifier: ^2
         version: 2.6.0
@@ -50,16 +50,22 @@ importers:
         version: 18.3.7(@types/react@18.3.23)
       '@vitejs/plugin-react':
         specifier: ^4.3.4
-        version: 4.6.0(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))
+        version: 4.6.0(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.4))
+      prettier:
+        specifier: ^3.6.2
+        version: 3.6.2
+      tsx:
+        specifier: ^4.19.2
+        version: 4.20.4
       typescript:
         specifier: ~5.6.2
         version: 5.6.3
       vite:
         specifier: ^6.0.3
-        version: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)
+        version: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.4)
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(jiti@2.4.2)(lightningcss@1.30.1)
+        version: 3.2.4(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.4)
 
 packages:
 
@@ -924,6 +930,9 @@ packages:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
+  get-tsconfig@4.10.1:
+    resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
+
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
@@ -1081,6 +1090,11 @@ packages:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
+  prettier@3.6.2:
+    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   react-dom@18.3.1:
     resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
@@ -1100,6 +1114,9 @@ packages:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
 
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
   robust-predicates@3.0.2:
     resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
 
@@ -1167,6 +1184,11 @@ packages:
   ts-pattern@5.7.1:
     resolution: {integrity: sha512-EGs8PguQqAAUIcQfK4E9xdXxB6s2GK4sJfT/vcc9V1ELIvC4LH/zXu2t/5fajtv6oiRCxdv7BgtVK3vWgROxag==}
 
+  tsx@4.20.4:
+    resolution: {integrity: sha512-yyxBKfORQ7LuRt/BQKBXrpcq59ZvSW0XxwfjAt3w2/8PmdxaFzijtMhTawprSHhpzeM5BgU2hXHG3lklIERZXg==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
   typescript@5.6.3:
     resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==}
     engines: {node: '>=14.17'}
@@ -1781,12 +1803,12 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.1.11
       '@tailwindcss/oxide-win32-x64-msvc': 4.1.11
 
-  '@tailwindcss/vite@4.1.11(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))':
+  '@tailwindcss/vite@4.1.11(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.4))':
     dependencies:
       '@tailwindcss/node': 4.1.11
       '@tailwindcss/oxide': 4.1.11
       tailwindcss: 4.1.11
-      vite: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)
+      vite: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.4)
 
   '@tauri-apps/api@2.6.0': {}
 
@@ -1911,7 +1933,7 @@ snapshots:
       '@types/prop-types': 15.7.15
       csstype: 3.1.3
 
-  '@vitejs/plugin-react@4.6.0(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))':
+  '@vitejs/plugin-react@4.6.0(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.4))':
     dependencies:
       '@babel/core': 7.28.0
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.0)
@@ -1919,7 +1941,7 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.19
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)
+      vite: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.4)
     transitivePeerDependencies:
       - supports-color
 
@@ -1931,13 +1953,13 @@ snapshots:
       chai: 5.2.1
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.2.4(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))':
+  '@vitest/mocker@3.2.4(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.4))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)
+      vite: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.4)
 
   '@vitest/pretty-format@3.2.4':
     dependencies:
@@ -2114,6 +2136,10 @@ snapshots:
 
   gensync@1.0.0-beta.2: {}
 
+  get-tsconfig@4.10.1:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
   graceful-fs@4.2.11: {}
 
   internmap@1.0.1: {}
@@ -2223,6 +2249,8 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  prettier@3.6.2: {}
+
   react-dom@18.3.1(react@18.3.1):
     dependencies:
       loose-envify: 1.4.0
@@ -2240,6 +2268,8 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
+  resolve-pkg-maps@1.0.0: {}
+
   robust-predicates@3.0.2: {}
 
   rollup@4.45.0:
@@ -2316,6 +2346,13 @@ snapshots:
 
   ts-pattern@5.7.1: {}
 
+  tsx@4.20.4:
+    dependencies:
+      esbuild: 0.25.6
+      get-tsconfig: 4.10.1
+    optionalDependencies:
+      fsevents: 2.3.3
+
   typescript@5.6.3: {}
 
   update-browserslist-db@1.1.3(browserslist@4.25.1):
@@ -2328,13 +2365,13 @@ snapshots:
     dependencies:
       react: 18.3.1
 
-  vite-node@3.2.4(jiti@2.4.2)(lightningcss@1.30.1):
+  vite-node@3.2.4(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.4):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)
+      vite: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.4)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -2349,7 +2386,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1):
+  vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.4):
     dependencies:
       esbuild: 0.25.6
       fdir: 6.4.6(picomatch@4.0.2)
@@ -2361,12 +2398,13 @@ snapshots:
       fsevents: 2.3.3
       jiti: 2.4.2
       lightningcss: 1.30.1
+      tsx: 4.20.4
 
-  vitest@3.2.4(jiti@2.4.2)(lightningcss@1.30.1):
+  vitest@3.2.4(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.4):
     dependencies:
       '@types/chai': 5.2.2
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1))
+      '@vitest/mocker': 3.2.4(vite@6.3.5(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.4))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -2384,8 +2422,8 @@ snapshots:
       tinyglobby: 0.2.14
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)
-      vite-node: 3.2.4(jiti@2.4.2)(lightningcss@1.30.1)
+      vite: 6.3.5(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.4)
+      vite-node: 3.2.4(jiti@2.4.2)(lightningcss@1.30.1)(tsx@4.20.4)
       why-is-node-running: 2.3.0
     transitivePeerDependencies:
       - jiti

pnpm-workspace.yaml

@@ -1,3 +1,3 @@
 onlyBuiltDependencies:
-  - '@tailwindcss/oxide'
+  - "@tailwindcss/oxide"
   - esbuild

src-tauri/Cargo.toml

@@ -15,15 +15,13 @@ name = "byte_me_lib"
 crate-type = ["staticlib", "cdylib", "rlib"]
 
 [build-dependencies]
-tauri-build = { version = "2", features = [] }
+tauri-build = { version = "2.4.0", features = [] }
 
 [dependencies]
-tauri = { version = "2.0", features = [] }
-tauri-plugin-opener = "2"
+tauri = { version = "2.8.2", features = [] }
+tauri-plugin-opener = "2.5.0"
 serde = { version = "1", features = ["derive"] }
-serde_json = "1"
+serde_json = "1.0.143"
 ffprobe = "0.4.0"
-specta = "=2.0.0-rc.22"
-specta-typescript = "0.0.9"
-tauri-specta = { version = "=2.0.0-rc.21", features = ["derive", "typescript"] }
-
+ts-rs = { version = "11.0", features = ["format"] }
+infer = "0.19.0"

src-tauri/capabilities/default.json

@@ -1,10 +1,7 @@
 {
-  "$schema": "../gen/schemas/desktop-schema.json",
-  "identifier": "default",
-  "description": "Capability for the main window",
-  "windows": ["main"],
-  "permissions": [
-    "core:default",
-    "opener:default"
-  ]
+	"$schema": "../gen/schemas/desktop-schema.json",
+	"identifier": "default",
+	"description": "Capability for the main window",
+	"windows": ["main"],
+	"permissions": ["core:default", "opener:default"]
 }

src-tauri/src/ff.rs

@@ -0,0 +1,47 @@
+use crate::models::StreamDetail;
+
+pub fn extract_streams(info: &ffprobe::FfProbe) -> Vec<StreamDetail> {
+    let mut streams = Vec::new();
+
+    for stream in &info.streams {
+        match stream.codec_type.as_deref() {
+            Some("video") => {
+                streams.push(StreamDetail::Video {
+                    codec: stream
+                        .codec_name
+                        .clone()
+                        .unwrap_or_else(|| "unknown".to_string()),
+                    width: stream.width.map(|w| w as u32),
+                    height: stream.height.map(|h| h as u32),
+                    bit_rate: stream.bit_rate.as_ref().map(|b| b.to_string()),
+                    frame_rate: Some(stream.r_frame_rate.clone()),
+                });
+            }
+            Some("audio") => {
+                streams.push(StreamDetail::Audio {
+                    codec: stream
+                        .codec_name
+                        .clone()
+                        .unwrap_or_else(|| "unknown".to_string()),
+                    sample_rate: stream.sample_rate.clone(),
+                    channels: stream.channels.map(|c| c as u32),
+                    bit_rate: stream.bit_rate.as_ref().map(|b| b.to_string()),
+                });
+            }
+            Some("subtitle") => {
+                streams.push(StreamDetail::Subtitle {
+                    codec: stream
+                        .codec_name
+                        .clone()
+                        .unwrap_or_else(|| "unknown".to_string()),
+                    language: stream.tags.as_ref().and_then(|tags| tags.language.clone()),
+                });
+            }
+            _ => {}
+        }
+    }
+
+    streams
+}
+
+

src-tauri/src/lib.rs

@@ -1,67 +1,88 @@
-use serde::{Deserialize, Serialize};
-use specta::Type;
-use specta_typescript::Typescript;
+mod ff;
+mod media;
+mod models;
+
+use ff::extract_streams;
+use media::{detect_media_type, is_media_file};
+use models::{StreamResult, StreamResultError};
 use std::path::Path;
-use tauri_specta::{collect_commands, Builder};
 
-#[derive(Serialize, Deserialize, Debug, Clone, Type)]
-struct StreamResult {
-    path: String,
-    filename: String,
-    streams: Vec<StreamDetail>,
-}
-
-#[derive(Serialize, Deserialize, Debug, Clone, Type)]
-enum StreamDetail {
-    Video { codec: String },
-    Audio { codec: String },
-    Subtitle { codec: String },
-}
-
-#[derive(Serialize, Deserialize, Debug, Clone, Type)]
-struct StreamResultError {
-    filename: Option<String>,
-    reason: String,
-}
+// detection, helpers moved to modules above
 
 #[tauri::command]
-#[specta::specta]
 fn has_streams(paths: Vec<String>) -> Result<Vec<StreamResult>, StreamResultError> {
     paths
         .into_iter()
         .map(|path_str| {
             let path = Path::new(&path_str);
-            let filename = path.file_name().unwrap().to_str().unwrap().to_string();
+            let filename = path
+                .file_name()
+                .and_then(|name| name.to_str())
+                .unwrap_or("unknown")
+                .to_string();
 
+            // Check if file exists
             if !path.exists() {
                 return Err(StreamResultError {
                     filename: Some(filename),
                     reason: "File does not exist".to_string(),
-                });
-            }
-            if !path.is_file() {
-                return Err(StreamResultError {
-                    filename: Some(filename),
-                    reason: "Not a file".to_string(),
+                    error_type: "not_found".to_string(),
                 });
             }
 
-            match ffprobe::ffprobe(&path_str) {
-                Ok(info) => {
-                    dbg!(info);
-                    Ok(StreamResult {
-                        filename,
-                        path: path_str,
-                        streams: vec![],
-                    })
-                }
-                Err(err) => {
-                    eprintln!("Could not analyze file with ffprobe: {:?}", err);
-                    Err(StreamResultError {
-                        filename: Some(filename),
-                        reason: "Could not analyze file with ffprobe".to_string(),
-                    })
+            // Check if it's a file (not directory)
+            if !path.is_file() {
+                return Err(StreamResultError {
+                    filename: Some(filename),
+                    reason: "Not a file (directory or other)".to_string(),
+                    error_type: "not_file".to_string(),
+                });
+            }
+
+            // Get file size
+            let size = std::fs::metadata(&path_str)
+                .map(|metadata| metadata.len())
+                .unwrap_or(0);
+
+            // Detect media type using magic numbers and fallback to extensions
+            let media_type = detect_media_type(path);
+
+            // Only try to analyze media files with ffprobe
+            if is_media_file(&media_type) {
+                // Analyze with ffprobe
+                match ffprobe::ffprobe(&path_str) {
+                    Ok(info) => {
+                        let streams = extract_streams(&info);
+                        let duration = info
+                            .format
+                            .duration
+                            .and_then(|dur_str| dur_str.parse::<f64>().ok());
+
+                        Ok(StreamResult {
+                            filename,
+                            path: path_str,
+                            media_type,
+                            duration,
+                            size,
+                            streams,
+                        })
+                    }
+                    Err(err) => {
+                        eprintln!("Could not analyze media file with ffprobe: {err:?}");
+                        Err(StreamResultError {
+                            filename: Some(filename),
+                            reason: format!("Could not analyze media file: {err}"),
+                            error_type: "analysis_failed".to_string(),
+                        })
+                    }
                 }
+            } else {
+                // For non-media files, return an error indicating it's not a media file
+                Err(StreamResultError {
+                    filename: Some(filename),
+                    reason: format!("Not a media file (detected as {media_type:?})"),
+                    error_type: "not_media".to_string(),
+                })
             }
         })
         .collect::<Result<Vec<_>, _>>()
@@ -69,23 +90,22 @@ fn has_streams(paths: Vec<String>) -> Result<Vec<StreamResult>, StreamResultErro
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
-    let builder = Builder::<tauri::Wry>::new()
-        // Then register them (separated by a comma)
-        .commands(collect_commands![has_streams,]);
-
-    #[cfg(debug_assertions)] // <- Only export on non-release builds
-    builder
-        .export(Typescript::default(), "../src/bindings.ts")
-        .expect("Failed to export typescript bindings");
-
     tauri::Builder::default()
         .plugin(tauri_plugin_opener::init())
         .invoke_handler(tauri::generate_handler![has_streams])
-        .setup(move |app| {
-            // Ensure you mount your events!
-            builder.mount_events(app);
-            Ok(())
-        })
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }
+
+#[cfg(test)]
+mod tests {
+    use ts_rs::TS;
+
+    #[test]
+    fn export_bindings() {
+        // This will generate TypeScript bindings when you run `cargo test export_bindings`
+        use crate::models::*;
+
+        StreamDetail::export_all_to("../../src/bindings").expect("Failed to export bindings");
+    }
+}

src-tauri/src/media.rs

@@ -0,0 +1,141 @@
+use crate::models::MediaType;
+use std::{fs::File, io::Read, path::Path};
+
+pub fn detect_media_type(path: &Path) -> MediaType {
+    // First try to detect using infer crate (magic number detection)
+    if let Ok(mut file) = File::open(path) {
+        let mut buffer = [0; 512];
+        if let Ok(bytes_read) = file.read(&mut buffer) {
+            if let Some(kind) = infer::get(&buffer[..bytes_read]) {
+                return match kind.mime_type() {
+                    // Audio types
+                    "audio/mpeg" | "audio/mp3" | "audio/m4a" | "audio/ogg" | "audio/x-flac"
+                    | "audio/x-wav" | "audio/amr" | "audio/aac" | "audio/x-aiff"
+                    | "audio/x-dsf" | "audio/x-ape" | "audio/midi" => MediaType::Audio,
+
+                    // Video types
+                    "video/mp4" | "video/x-m4v" | "video/x-matroska" | "video/webm"
+                    | "video/quicktime" | "video/x-msvideo" | "video/x-ms-wmv" | "video/mpeg"
+                    | "video/x-flv" => MediaType::Video,
+
+                    // Image types
+                    "image/jpeg"
+                    | "image/png"
+                    | "image/gif"
+                    | "image/webp"
+                    | "image/x-canon-cr2"
+                    | "image/tiff"
+                    | "image/bmp"
+                    | "image/heif"
+                    | "image/avif"
+                    | "image/vnd.ms-photo"
+                    | "image/vnd.adobe.photoshop"
+                    | "image/vnd.microsoft.icon"
+                    | "image/openraster"
+                    | "image/vnd.djvu" => MediaType::Image,
+
+                    // Document types
+                    "application/pdf"
+                    | "application/rtf"
+                    | "application/msword"
+                    | "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                    | "application/vnd.ms-excel"
+                    | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+                    | "application/vnd.ms-powerpoint"
+                    | "application/vnd.openxmlformats-officedocument.presentationml.presentation"
+                    | "application/vnd.oasis.opendocument.text"
+                    | "application/vnd.oasis.opendocument.spreadsheet"
+                    | "application/vnd.oasis.opendocument.presentation" => MediaType::Document,
+
+                    // Archive types
+                    "application/zip"
+                    | "application/x-tar"
+                    | "application/vnd.rar"
+                    | "application/gzip"
+                    | "application/x-bzip2"
+                    | "application/vnd.bzip3"
+                    | "application/x-7z-compressed"
+                    | "application/x-xz"
+                    | "application/x-shockwave-flash"
+                    | "application/octet-stream"
+                    | "application/postscript"
+                    | "application/vnd.sqlite3"
+                    | "application/x-nintendo-nes-rom"
+                    | "application/x-google-chrome-extension"
+                    | "application/vnd.ms-cab-compressed"
+                    | "application/vnd.debian.binary-package"
+                    | "application/x-unix-archive"
+                    | "application/x-compress"
+                    | "application/x-lzip"
+                    | "application/x-rpm"
+                    | "application/dicom"
+                    | "application/zstd"
+                    | "application/x-lz4"
+                    | "application/x-ole-storage"
+                    | "application/x-cpio"
+                    | "application/x-par2"
+                    | "application/epub+zip"
+                    | "application/x-mobipocket-ebook" => MediaType::Archive,
+
+                    // Executable types
+                    "application/vnd.microsoft.portable-executable"
+                    | "application/x-executable"
+                    | "application/llvm"
+                    | "application/x-mach-binary"
+                    | "application/java"
+                    | "application/vnd.android.dex"
+                    | "application/vnd.android.dey"
+                    | "application/x-x509-ca-cert" => MediaType::Executable,
+
+                    // Library types (covered by executable types above, but keeping for clarity)
+                    _ => MediaType::Unknown,
+                };
+            }
+        }
+    }
+
+    // Fallback to extension-based detection
+    if let Some(extension) = path.extension() {
+        match extension.to_str().unwrap_or("").to_lowercase().as_str() {
+            // Audio extensions
+            "mp3" | "wav" | "flac" | "ogg" | "m4a" | "aac" | "wma" | "mid" | "amr" | "aiff"
+            | "dsf" | "ape" => MediaType::Audio,
+
+            // Video extensions
+            "mp4" | "mkv" | "webm" | "mov" | "avi" | "wmv" | "mpg" | "flv" | "m4v" => {
+                MediaType::Video
+            }
+
+            // Image extensions
+            "gif" | "png" | "jpg" | "jpeg" | "bmp" | "tiff" | "webp" | "cr2" | "heif" | "avif"
+            | "jxr" | "psd" | "ico" | "ora" | "djvu" => MediaType::Image,
+
+            // Document extensions
+            "txt" | "md" | "pdf" | "doc" | "docx" | "xls" | "xlsx" | "ppt" | "pptx" | "odt"
+            | "ods" | "odp" | "rtf" => MediaType::Document,
+
+            // Archive extensions
+            "zip" | "rar" | "7z" | "tar" | "gz" | "bz2" | "bz3" | "xz" | "swf" | "sqlite"
+            | "nes" | "crx" | "cab" | "deb" | "ar" | "Z" | "lz" | "rpm" | "dcm" | "zst" | "lz4"
+            | "cpio" | "par2" | "epub" | "mobi" => MediaType::Archive,
+
+            // Executable extensions
+            "exe" | "dll" | "msi" | "dmg" | "pkg" | "app" | "elf" | "bc" | "mach" | "class"
+            | "dex" | "dey" | "der" | "obj" => MediaType::Executable,
+
+            // Library extensions
+            "so" | "dylib" => MediaType::Library,
+
+            _ => MediaType::Unknown,
+        }
+    } else {
+        MediaType::Unknown
+    }
+}
+
+pub fn is_media_file(media_type: &MediaType) -> bool {
+    matches!(
+        media_type,
+        MediaType::Audio | MediaType::Video | MediaType::Image
+    )
+}

src-tauri/src/models.rs

@@ -0,0 +1,56 @@
+use serde::{Deserialize, Serialize};
+use ts_rs::TS;
+
+#[derive(Serialize, Deserialize, Debug, Clone, TS)]
+#[ts(export)]
+pub enum MediaType {
+    Audio,
+    Video,
+    Image,
+    Document,
+    Executable,
+    Archive,
+    Library,
+    Unknown,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone, TS)]
+#[ts(export)]
+pub struct StreamResult {
+    pub path: String,
+    pub filename: String,
+    pub media_type: MediaType,
+    pub duration: Option<f64>,
+    pub size: u64,
+    pub streams: Vec<StreamDetail>,
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone, TS)]
+#[ts(export)]
+pub enum StreamDetail {
+    Video {
+        codec: String,
+        width: Option<u32>,
+        height: Option<u32>,
+        bit_rate: Option<String>,
+        frame_rate: Option<String>,
+    },
+    Audio {
+        codec: String,
+        sample_rate: Option<String>,
+        channels: Option<u32>,
+        bit_rate: Option<String>,
+    },
+    Subtitle {
+        codec: String,
+        language: Option<String>,
+    },
+}
+
+#[derive(Serialize, Deserialize, Debug, Clone, TS)]
+#[ts(export)]
+pub struct StreamResultError {
+    pub filename: Option<String>,
+    pub reason: String,
+    pub error_type: String,
+}

src-tauri/tauri.conf.json

@@ -1,35 +1,35 @@
 {
-  "$schema": "https://schema.tauri.app/config/2",
-  "productName": "byte-me",
-  "version": "0.1.0",
-  "identifier": "com.xevion.byteme",
-  "build": {
-    "beforeDevCommand": "pnpm dev",
-    "devUrl": "http://localhost:1420",
-    "beforeBuildCommand": "pnpm build",
-    "frontendDist": "../dist"
-  },
-  "app": {
-    "windows": [
-      {
-        "title": "byte-me",
-        "width": 800,
-        "height": 600
-      }
-    ],
-    "security": {
-      "csp": null
-    }
-  },
-  "bundle": {
-    "active": true,
-    "targets": "all",
-    "icon": [
-      "icons/32x32.png",
-      "icons/128x128.png",
-      "icons/128x128@2x.png",
-      "icons/icon.icns",
-      "icons/icon.ico"
-    ]
-  }
+	"$schema": "https://schema.tauri.app/config/2",
+	"productName": "byte-me",
+	"version": "0.1.0",
+	"identifier": "com.xevion.byteme",
+	"build": {
+		"beforeDevCommand": "pnpm dev",
+		"devUrl": "http://localhost:1420",
+		"beforeBuildCommand": "pnpm build",
+		"frontendDist": "../dist"
+	},
+	"app": {
+		"windows": [
+			{
+				"title": "byte-me",
+				"width": 800,
+				"height": 600
+			}
+		],
+		"security": {
+			"csp": null
+		}
+	},
+	"bundle": {
+		"active": true,
+		"targets": "all",
+		"icon": [
+			"icons/32x32.png",
+			"icons/128x128.png",
+			"icons/128x128@2x.png",
+			"icons/icon.icns",
+			"icons/icon.ico"
+		]
+	}
 }

src/App.tsx

@@ -1,51 +1,25 @@
-type Frame = {
-  id: string;
-  data: { x: string | number; y: number }[];
-};
-
-import { getCurrentWebview } from "@tauri-apps/api/webview";
-import { useEffect, useState } from "react";
-import Graph from "./components/graph.js";
-import DropOverlay from "./components/drop-overlay.js";
+import { useDragDropPaths } from "./hooks/useDragDropPaths.js";
+import Graph from "./features/graph/graph.js";
+import DropOverlay from "./features/drop/drop-overlay.js";
+import type { Frame } from "./types/graph.js";
 
 function App() {
-  const data: Frame[] = [];
+	const data: Frame[] = [];
 
-  const [paths, setPaths] = useState<string[]>([]);
-  useEffect(() => {
-    const unlistenPromise = getCurrentWebview().onDragDropEvent(
-      async ({ payload }) => {
-        if (payload.type === "enter") {
-          setPaths(payload.paths);
-          console.log("User hovering", payload);
-        } else if (payload.type === "leave" || payload.type === "drop") {
-          setPaths([]);
-          console.log("User left", payload);
-        }
-      }
-    );
+	const paths = useDragDropPaths();
 
-    // you need to call unlisten if your handler goes out of scope e.g. the component is unmounted
-    return () => {
-      unlistenPromise.then((unlisten) => {
-        unlisten();
-        console.log("Unlistened");
-      });
-    };
-  }, []);
+	const graph = <Graph data={data} />;
 
-  const graph = <Graph data={data} />;
-
-  return (
-    <div
-      id="App"
-      className="min-h-screen min-w-screen overflow-hidden"
-      style={{ "--wails-drop-target": "drop" } as React.CSSProperties}
-    >
-      <DropOverlay paths={paths} />
-      {graph}
-    </div>
-  );
+	return (
+		<div
+			id="App"
+			className="min-h-screen min-w-screen overflow-hidden"
+			style={{ "--wails-drop-target": "drop" } as React.CSSProperties}
+		>
+			<DropOverlay paths={paths} />
+			{graph}
+		</div>
+	);
 }
 
 export default App;

src/bindings.ts

@@ -1,90 +1,25 @@
+// Import generated TypeScript types from ts-rs
+import type { StreamResult } from "./bindings/StreamResult";
+import type { StreamDetail } from "./bindings/StreamDetail";
+import type { StreamResultError } from "./bindings/StreamResultError";
+import type { MediaType } from "./bindings/MediaType";
+export type { StreamResult, StreamDetail, StreamResultError, MediaType };
 
-// This file was generated by [tauri-specta](https://github.com/oscartbeaumont/tauri-specta). Do not edit this file manually.
-
-/** user-defined commands **/
+// Tauri invoke wrapper
+import { invoke } from "@tauri-apps/api/core";
 
+export type Result<T, E> = 
+  | { status: "ok"; data: T }
+  | { status: "error"; error: E };
 
 export const commands = {
-async hasStreams(paths: string[]) : Promise<Result<StreamResult[], StreamResultError>> {
+  async hasStreams(paths: string[]): Promise<Result<StreamResult[], StreamResultError>> {
     try {
-    return { status: "ok", data: await TAURI_INVOKE("has_streams", { paths }) };
-} catch (e) {
-    if(e instanceof Error) throw e;
-    else return { status: "error", error: e  as any };
-}
-}
-}
-
-/** user-defined events **/
-
-
-
-/** user-defined constants **/
-
-
-
-/** user-defined types **/
-
-export type StreamDetail = { Video: { codec: string } } | { Audio: { codec: string } } | { Subtitle: { codec: string } }
-export type StreamResult = { path: string; filename: string; streams: StreamDetail[] }
-export type StreamResultError = { filename: string | null; reason: string }
-
-/** tauri-specta globals **/
-
-import {
-	invoke as TAURI_INVOKE,
-	Channel as TAURI_CHANNEL,
-} from "@tauri-apps/api/core";
-import * as TAURI_API_EVENT from "@tauri-apps/api/event";
-import { type WebviewWindow as __WebviewWindow__ } from "@tauri-apps/api/webviewWindow";
-
-type __EventObj__<T> = {
-	listen: (
-		cb: TAURI_API_EVENT.EventCallback<T>,
-	) => ReturnType<typeof TAURI_API_EVENT.listen<T>>;
-	once: (
-		cb: TAURI_API_EVENT.EventCallback<T>,
-	) => ReturnType<typeof TAURI_API_EVENT.once<T>>;
-	emit: null extends T
-		? (payload?: T) => ReturnType<typeof TAURI_API_EVENT.emit>
-		: (payload: T) => ReturnType<typeof TAURI_API_EVENT.emit>;
+      const data = await invoke<StreamResult[]>("has_streams", { paths });
+      return { status: "ok", data };
+    } catch (e) {
+      if (e instanceof Error) throw e;
+      else return { status: "error", error: e as any };
+    }
+  }
 };
-
-export type Result<T, E> =
-	| { status: "ok"; data: T }
-	| { status: "error"; error: E };
-
-function __makeEvents__<T extends Record<string, any>>(
-	mappings: Record<keyof T, string>,
-) {
-	return new Proxy(
-		{} as unknown as {
-			[K in keyof T]: __EventObj__<T[K]> & {
-				(handle: __WebviewWindow__): __EventObj__<T[K]>;
-			};
-		},
-		{
-			get: (_, event) => {
-				const name = mappings[event as keyof T];
-
-				return new Proxy((() => {}) as any, {
-					apply: (_, __, [window]: [__WebviewWindow__]) => ({
-						listen: (arg: any) => window.listen(name, arg),
-						once: (arg: any) => window.once(name, arg),
-						emit: (arg: any) => window.emit(name, arg),
-					}),
-					get: (_, command: keyof __EventObj__<any>) => {
-						switch (command) {
-							case "listen":
-								return (arg: any) => TAURI_API_EVENT.listen(name, arg);
-							case "once":
-								return (arg: any) => TAURI_API_EVENT.once(name, arg);
-							case "emit":
-								return (arg: any) => TAURI_API_EVENT.emit(name, arg);
-						}
-					},
-				});
-			},
-		},
-	);
-}

src/components/drop-overlay.tsx

@@ -1,148 +0,0 @@
-import { ReactNode, useEffect, useRef, useState } from "react";
-import { match, P } from "ts-pattern";
-
-type DropOverlayProps = {
-	paths: string[];
-};
-
-type State =
-	| { status: "hidden" }
-	| { status: "loading"; count: number }
-	| { status: "ready"; files: { name: string; key: string }[] }
-	| { status: "error"; reason: string; filename?: string };
-
-import {
-	CircleQuestionMarkIcon,
-	File as FileIcon,
-	Film,
-	Image,
-	Music,
-} from "lucide-react";
-import { commands } from "../bindings";
-
-type FileItemProps = {
-	filename: string;
-	error?: string;
-};
-
-const Item = ({ icon, text }: { icon: ReactNode; text: ReactNode }) => {
-	return (
-		<div
-			className="flex items-center gap-2 px-3 py-2 bg-neutral-800 rounded-md shadow-sm"
-			style={{
-				maxWidth: "100%",
-				marginBottom: "0.5rem",
-			}}
-		>
-			{icon}
-			<span className="truncate text-neutral-100 max-w-md">{text}</span>
-		</div>
-	);
-};
-
-const FileItem = ({ filename, error }: FileItemProps) => {
-	const ext = filename.split(".").pop()?.toLowerCase();
-	const icon =
-		error == null ? (
-			match(ext)
-				.with("mp3", "wav", "flac", "ogg", "m4a", "aac", () => (
-					<Music className="w-5 h-5 text-blue-400" />
-				))
-				.with("mp4", "mkv", "webm", "mov", "avi", () => (
-					<Film className="w-5 h-5 text-purple-400" />
-				))
-				.with("gif", () => <Image className="w-5 h-5 text-pink-400" />)
-				.otherwise(() => <FileIcon className="w-5 h-5 text-neutral-300" />)
-		) : (
-			<CircleQuestionMarkIcon className="w-5 h-5 text-neutral-300" />
-		);
-
-	return <Item icon={icon} text={filename} />;
-};
-
-const DropOverlay = ({ paths }: DropOverlayProps) => {
-	const [state, setState] = useState<State>({ status: "hidden" });
-	const aborterRef = useRef<AbortController | null>(null);
-
-	useEffect(() => {
-		if (paths.length === 0) {
-			setState({ status: "hidden" });
-			return;
-		}
-
-		setState({ status: "loading", count: paths.length });
-
-		aborterRef.current = new AbortController();
-
-		commands.hasStreams(paths).then((result) => {
-			setState((_state) => {
-				return match(result)
-					.with({ status: "ok" }, (r) => ({
-						status: "ready" as const,
-						files: r.data.map((item) => ({
-							name: item.filename,
-							key: item.path,
-						})),
-					}))
-					.with({ status: "error" }, (r) => {
-						if (r.error.filename) {
-							return {
-								status: "error" as const,
-								reason: r.error.reason,
-								filename: r.error.filename,
-							};
-						}
-
-						return { status: "error" as const, reason: r.error.reason };
-					})
-					.exhaustive();
-			});
-		});
-	}, [paths]);
-
-	if (state.status === "hidden") {
-		return null;
-	}
-
-	const inner = match(state)
-		.with({ status: "loading" }, ({ count }) =>
-			Array.from({ length: count }).map((_, i) => (
-				<Item
-					key={i}
-					icon={
-						<CircleQuestionMarkIcon className="w-5 h-5 text-neutral-300/50" />
-					}
-					text={
-						<span className="inline-block w-32 h-5 bg-neutral-300/10 rounded animate-pulse" />
-					}
-				/>
-			))
-		)
-		.with({ status: "ready" }, (r) => {
-			return r.files
-				.slice(0, 8)
-				.map((file) => <FileItem key={file.key} filename={file.name} />);
-		})
-		.with({ status: "error", filename: P.string }, (r) => {
-			return <FileItem filename={r.filename} error={r.reason} />;
-		})
-		.with({ status: "error" }, ({ reason }) => {
-			return (
-				<Item
-					icon={<CircleQuestionMarkIcon className="w-5 h-5 text-neutral-300" />}
-					text={reason}
-				/>
-			);
-		})
-		.exhaustive();
-
-	return (
-		<div className="absolute z-10 top-0 left-0 w-full h-full bg-black/40 backdrop-blur-sm transition-all duration-300 ease-in-out">
-			<div className="flex flex-col justify-center items-center h-full">
-				<span className="text-white text-2xl">{inner}</span>
-			</div>
-		</div>
-	);
-};
-
-export default DropOverlay;

src/components/graph.tsx

@@ -1,85 +0,0 @@
-import { ResponsiveLine } from "@nivo/line";
-import { formatBytes } from "../lib/format.js";
-
-type Frame = {
-  id: string;
-  data: { x: string | number; y: number }[];
-};
-
-type GraphProps = {
-  data: Frame[];
-};
-
-const Graph = ({ data }: GraphProps) => (
-  <ResponsiveLine
-    data={data}
-    margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
-    xScale={{ type: "linear" }}
-    yScale={{
-      type: "linear",
-      min: 0,
-      max: "auto",
-      stacked: false,
-      reverse: false,
-    }}
-    theme={{
-      tooltip: {
-        container: {
-          backgroundColor: "#2e2b45",
-        },
-      },
-      grid: {
-        line: {
-          stroke: "rgb(252, 191, 212)",
-          strokeWidth: 0.35,
-          strokeOpacity: 0.75,
-        },
-      },
-      crosshair: {
-        line: {
-          stroke: "#fdd3e2",
-          strokeWidth: 1,
-        },
-      },
-      axis: {
-        legend: {},
-        domain: {
-          line: {
-            stroke: "rgb(252, 191, 212)",
-            strokeWidth: 0.5,
-            strokeOpacity: 0.5,
-          },
-        },
-      },
-      text: {
-        fill: "#6e6a86",
-      },
-    }}
-    axisBottom={{ legend: "transportation", legendOffset: 36 }}
-    axisLeft={{
-      legend: "count",
-      legendOffset: -40,
-      format: (v) => formatBytes(v * 1024 * 53),
-    }}
-    pointSize={10}
-    colors={["#3e8faf", "#c4a7e7", "#f5c276", "#EA9B96", "#EB7092", "#9CCFD8"]}
-    pointBorderWidth={0}
-    pointBorderColor={{ from: "seriesColor" }}
-    pointLabelYOffset={-12}
-    enableSlices={"x"}
-    enableTouchCrosshair={true}
-    useMesh={true}
-    legends={[
-      {
-        anchor: "bottom-right",
-        direction: "column",
-        translateX: 100,
-        itemWidth: 80,
-        itemHeight: 22,
-        symbolShape: "circle",
-      },
-    ]}
-  />
-);
-
-export default Graph;

src/features/drop/drop-overlay.tsx

@@ -0,0 +1,381 @@
+import { ReactNode, useEffect, useRef, useState } from "react";
+import { match, P } from "ts-pattern";
+import {
+	CheckCircle,
+	File as FileIcon,
+	FileText,
+	Film,
+	Image,
+	Loader2,
+	Music,
+	XCircle,
+} from "lucide-react";
+import { commands } from "../../bindings";
+import type { MediaType, StreamDetail } from "../../bindings";
+
+type DropOverlayProps = {
+	paths: string[];
+};
+
+type State =
+	| { status: "hidden" }
+	| { status: "loading"; count: number }
+	| {
+			status: "ready";
+			files: {
+				name: string;
+				key: string;
+				media_type: MediaType;
+				duration?: number | null;
+				size: number;
+				streams: StreamDetail[];
+			}[];
+	  }
+	| { status: "error"; reason: string; filename?: string; error_type?: string };
+
+type FileItemProps = {
+	filename: string;
+	media_type: MediaType;
+	duration?: number | null;
+	size: number;
+	streams: StreamDetail[];
+	error?: string;
+	error_type?: string;
+};
+
+const formatFileSize = (bytes: number): string => {
+	if (bytes === 0) return "0 B";
+	const k = 1024;
+	const sizes = ["B", "KB", "MB", "GB"];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+};
+
+const formatDuration = (seconds: number): string => {
+	const hours = Math.floor(seconds / 3600);
+	const minutes = Math.floor((seconds % 3600) / 60);
+	const secs = Math.floor(seconds % 60);
+
+	if (hours > 0) {
+		return `${hours}:${minutes.toString().padStart(2, "0")}:${secs
+			.toString()
+			.padStart(2, "0")}`;
+	}
+	return `${minutes}:${secs.toString().padStart(2, "0")}`;
+};
+
+const getFileIcon = (
+	mediaType: MediaType,
+	error?: string,
+	errorType?: string,
+) => {
+	// For non-media files, show a neutral icon instead of error icon
+	if (errorType === "not_media") {
+		switch (mediaType) {
+			case "Executable":
+				return <FileIcon className="w-5 h-5 text-orange-400" />;
+			case "Archive":
+				return <FileIcon className="w-5 h-5 text-yellow-400" />;
+			case "Library":
+				return <FileIcon className="w-5 h-5 text-indigo-400" />;
+			case "Document":
+				return <FileText className="w-5 h-5 text-green-400" />;
+			default:
+				return <FileIcon className="w-5 h-5 text-neutral-300" />;
+		}
+	}
+
+	if (error) {
+		return <XCircle className="w-5 h-5 text-red-400" />;
+	}
+
+	switch (mediaType) {
+		case "Audio":
+			return <Music className="w-5 h-5 text-blue-400" />;
+		case "Video":
+			return <Film className="w-5 h-5 text-purple-400" />;
+		case "Image":
+			return <Image className="w-5 h-5 text-pink-400" />;
+		case "Document":
+			return <FileText className="w-5 h-5 text-green-400" />;
+		case "Executable":
+			return <FileIcon className="w-5 h-5 text-orange-400" />;
+		case "Archive":
+			return <FileIcon className="w-5 h-5 text-yellow-400" />;
+		case "Library":
+			return <FileIcon className="w-5 h-5 text-indigo-400" />;
+		default:
+			return <FileIcon className="w-5 h-5 text-neutral-300" />;
+	}
+};
+
+const getStreamInfo = (
+	streams: StreamDetail[],
+	mediaType: MediaType,
+): string => {
+	// For non-media files, return file type description
+	if (!["Audio", "Video", "Image"].includes(mediaType)) {
+		switch (mediaType) {
+			case "Executable":
+				return "Executable file";
+			case "Archive":
+				return "Archive file";
+			case "Library":
+				return "Library file";
+			case "Document":
+				return "Document file";
+			default:
+				return "Unknown file type";
+		}
+	}
+
+	// For media files, analyze streams
+	const videoStreams = streams.filter((s: any) => "Video" in s);
+	const audioStreams = streams.filter((s: any) => "Audio" in s);
+	const subtitleStreams = streams.filter((s: any) => "Subtitle" in s);
+
+	const parts = [] as string[];
+	if (videoStreams.length > 0) {
+		const video: any = videoStreams[0] as any;
+		if ("Video" in video) {
+			const width = (video as any).Video.width;
+			const height = (video as any).Video.height;
+			const codec = (video as any).Video.codec;
+			if (width && height) {
+				parts.push(`${width}x${height} ${codec}`);
+			} else {
+				parts.push(codec);
+			}
+		}
+	}
+	if (audioStreams.length > 0) {
+		const audio: any = audioStreams[0] as any;
+		if ("Audio" in audio) {
+			parts.push(`${(audio as any).Audio.codec} audio`);
+		}
+	}
+	if (subtitleStreams.length > 0) {
+		parts.push(`${subtitleStreams.length} subtitle(s)`);
+	}
+
+	return parts.join(", ");
+};
+
+const Item = ({
+	icon,
+	text,
+	subtitle,
+	status,
+}: {
+	icon: ReactNode;
+	text: ReactNode;
+	subtitle?: ReactNode;
+	status?: "success" | "error" | "loading";
+}) => {
+	const statusColor =
+		status === "success"
+			? "border-green-500"
+			: status === "error"
+				? "border-red-500"
+				: status === "loading"
+					? "border-blue-500"
+					: "border-neutral-600";
+
+	return (
+		<div
+			className={`flex items-center gap-3 px-4 py-3 bg-neutral-800 rounded-lg shadow-lg border-2 ${statusColor} transition-all duration-200`}
+			style={{
+				maxWidth: "100%",
+				marginBottom: "0.75rem",
+			}}
+		>
+			{icon}
+			<div className="flex-1 min-w-0">
+				<div className="truncate text-neutral-100 font-medium">{text}</div>
+				{subtitle && (
+					<div className="truncate text-neutral-400 text-sm mt-1">
+						{subtitle}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+};
+
+const FileItem = ({
+	filename,
+	media_type,
+	duration,
+	size,
+	streams,
+	error,
+	error_type,
+}: FileItemProps) => {
+	const icon = getFileIcon(media_type, error, error_type);
+	const fileSize = formatFileSize(size);
+
+	let subtitle: ReactNode;
+	let status: "success" | "error" | "loading" | undefined;
+
+	if (error) {
+		subtitle = error;
+		// For non-media files, show as neutral instead of error
+		status = error_type === "not_media" ? undefined : "error";
+	} else {
+		const streamInfo = getStreamInfo(streams, media_type);
+		const durationStr = duration ? formatDuration(duration) : null;
+		const details = [streamInfo, durationStr, fileSize].filter(
+			Boolean,
+		) as string[];
+		subtitle = details.join(" • ");
+		status = "success";
+	}
+
+	return (
+		<Item icon={icon} text={filename} subtitle={subtitle} status={status} />
+	);
+};
+
+const DropOverlay = ({ paths }: DropOverlayProps) => {
+	const [state, setState] = useState<State>({ status: "hidden" });
+	const aborterRef = useRef<AbortController | null>(null);
+
+	useEffect(() => {
+		if (paths.length === 0) {
+			setState({ status: "hidden" });
+			return;
+		}
+
+		setState({ status: "loading", count: paths.length });
+
+		aborterRef.current = new AbortController();
+
+		commands.hasStreams(paths).then((result) => {
+			setState((_state) => {
+				return match(result)
+					.with({ status: "ok" }, (r) => ({
+						status: "ready" as const,
+						files: r.data.map((item) => ({
+							name: item.filename,
+							key: item.path,
+							media_type: item.media_type,
+							duration: item.duration,
+							size: Number(item.size),
+							streams: item.streams,
+						})),
+					}))
+					.with({ status: "error" }, (r) => {
+						if (r.error.filename) {
+							return {
+								status: "error" as const,
+								reason: r.error.reason,
+								filename: r.error.filename,
+								error_type: r.error.error_type,
+							};
+						}
+
+						return {
+							status: "error" as const,
+							reason: r.error.reason,
+							error_type: r.error.error_type,
+						};
+					})
+					.exhaustive();
+			});
+		});
+	}, [paths]);
+
+	if (state.status === "hidden") {
+		return null;
+	}
+
+	const inner = match(state)
+		.with({ status: "loading" }, ({ count }) => (
+			<div className="flex flex-col items-center gap-4">
+				<Loader2 className="w-8 h-8 text-blue-400 animate-spin" />
+				<div className="text-white text-lg font-medium">
+					Analyzing {count} file{count > 1 ? "s" : ""}...
+				</div>
+				{Array.from({ length: Math.min(count, 3) }).map((_, i) => (
+					<Item
+						key={i}
+						icon={
+							<Loader2 className="w-5 h-5 text-neutral-300/50 animate-spin" />
+						}
+						text={
+							<span className="inline-block w-32 h-5 bg-neutral-300/10 rounded animate-pulse" />
+						}
+						status="loading"
+					/>
+				))}
+			</div>
+		))
+		.with({ status: "ready" }, (r) => {
+			return (
+				<div className="flex flex-col items-center gap-4">
+					<div className="flex items-center gap-2 text-green-400">
+						<CheckCircle className="w-6 h-6" />
+						<span className="text-lg font-medium">Files Ready</span>
+					</div>
+					<div className="max-h-96 overflow-y-auto">
+						{r.files.slice(0, 8).map((file) => (
+							<FileItem
+								key={file.key}
+								filename={file.name}
+								media_type={file.media_type}
+								duration={file.duration}
+								size={file.size}
+								streams={file.streams}
+							/>
+						))}
+					</div>
+				</div>
+			);
+		})
+		.with({ status: "error", filename: P.string }, (r) => {
+			return (
+				<div className="flex flex-col items-center gap-4">
+					<div className="flex items-center gap-2 text-red-400">
+						<XCircle className="w-6 h-6" />
+						<span className="text-lg font-medium">Error</span>
+					</div>
+					<FileItem
+						filename={r.filename}
+						media_type="Unknown"
+						size={0}
+						streams={[]}
+						error={r.reason}
+						error_type={r.error_type}
+					/>
+				</div>
+			);
+		})
+		.with({ status: "error" }, ({ reason }) => {
+			return (
+				<div className="flex flex-col items-center gap-4">
+					<div className="flex items-center gap-2 text-red-400">
+						<XCircle className="w-6 h-6" />
+						<span className="text-lg font-medium">Error</span>
+					</div>
+					<Item
+						icon={<XCircle className="w-5 h-5 text-red-400" />}
+						text={reason}
+						status="error"
+					/>
+				</div>
+			);
+		})
+		.exhaustive();
+
+	return (
+		<div className="absolute z-10 top-0 left-0 w-full h-full bg-black/60 backdrop-blur-sm transition-all duration-300 ease-in-out">
+			<div className="flex flex-col justify-center items-center h-full p-8">
+				<div className="bg-neutral-900 rounded-xl p-6 shadow-2xl max-w-2xl w-full">
+					{inner}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default DropOverlay;

src/features/graph/graph.tsx

@@ -0,0 +1,81 @@
+import { ResponsiveLine } from "@nivo/line";
+import { formatBytes } from "../../lib/format.js";
+import type { Frame } from "../../types/graph.js";
+
+type GraphProps = {
+	data: Frame[];
+};
+
+const Graph = ({ data }: GraphProps) => (
+	<ResponsiveLine
+		data={data}
+		margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
+		xScale={{ type: "linear" }}
+		yScale={{
+			type: "linear",
+			min: 0,
+			max: "auto",
+			stacked: false,
+			reverse: false,
+		}}
+		theme={{
+			tooltip: {
+				container: {
+					backgroundColor: "#2e2b45",
+				},
+			},
+			grid: {
+				line: {
+					stroke: "rgb(252, 191, 212)",
+					strokeWidth: 0.35,
+					strokeOpacity: 0.75,
+				},
+			},
+			crosshair: {
+				line: {
+					stroke: "#fdd3e2",
+					strokeWidth: 1,
+				},
+			},
+			axis: {
+				legend: {},
+				domain: {
+					line: {
+						stroke: "rgb(252, 191, 212)",
+						strokeWidth: 0.5,
+						strokeOpacity: 0.5,
+					},
+				},
+			},
+			text: {
+				fill: "#6e6a86",
+			},
+		}}
+		axisBottom={{ legend: "transportation", legendOffset: 36 }}
+		axisLeft={{
+			legend: "count",
+			legendOffset: -40,
+			format: (v) => formatBytes(v * 1024 * 53),
+		}}
+		pointSize={10}
+		colors={["#3e8faf", "#c4a7e7", "#f5c276", "#EA9B96", "#EB7092", "#9CCFD8"]}
+		pointBorderWidth={0}
+		pointBorderColor={{ from: "seriesColor" }}
+		pointLabelYOffset={-12}
+		enableSlices={"x"}
+		enableTouchCrosshair={true}
+		useMesh={true}
+		legends={[
+			{
+				anchor: "bottom-right",
+				direction: "column",
+				translateX: 100,
+				itemWidth: 80,
+				itemHeight: 22,
+				symbolShape: "circle",
+			},
+		]}
+	/>
+);
+
+export default Graph;

src/global.css

@@ -1,22 +1,22 @@
 @import "tailwindcss";
 
 :root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
+	font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+	font-size: 16px;
+	line-height: 24px;
+	font-weight: 400;
 
-  color: #e0def4;
-  background-color: #232136;
+	color: #e0def4;
+	background-color: #232136;
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-text-size-adjust: 100%;
 }
 
 #app {
-  height: 100vh;
-  text-align: center;
+	height: 100vh;
+	text-align: center;
 }

src/hooks/useDragDropPaths.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { getCurrentWebview } from "@tauri-apps/api/webview";
+
+export function useDragDropPaths(): string[] {
+	const [paths, setPaths] = useState<string[]>([]);
+
+	useEffect(() => {
+		const unlistenPromise = getCurrentWebview().onDragDropEvent(
+			async ({ payload }) => {
+				if (payload.type === "enter") {
+					setPaths(payload.paths);
+				} else if (payload.type === "leave" || payload.type === "drop") {
+					setPaths([]);
+				}
+			},
+		);
+
+		return () => {
+			unlistenPromise.then((unlisten) => unlisten());
+		};
+	}, []);
+
+	return paths;
+}

src/lib/format.test.ts

@@ -2,27 +2,27 @@ import { formatBytes } from "./format.js";
 import { test, expect } from "vitest";
 
 test("formats bytes less than 1024", () => {
-  expect(formatBytes(512)).toBe("512 B");
+	expect(formatBytes(512)).toBe("512 B");
 });
 
 test("formats KiB correctly", () => {
-  expect(formatBytes(2048)).toBe("2 KiB");
-  expect(formatBytes(1536)).toBe("1.5 KiB");
-  expect(formatBytes(1024)).toBe("1 KiB");
+	expect(formatBytes(2048)).toBe("2 KiB");
+	expect(formatBytes(1536)).toBe("1.5 KiB");
+	expect(formatBytes(1024)).toBe("1 KiB");
 });
 
 test("formats MiB correctly", () => {
-  expect(formatBytes(1048576)).toBe("1 MiB");
-  expect(formatBytes(1572864)).toBe("1.5 MiB");
-  expect(formatBytes(2097152)).toBe("2 MiB");
+	expect(formatBytes(1048576)).toBe("1 MiB");
+	expect(formatBytes(1572864)).toBe("1.5 MiB");
+	expect(formatBytes(2097152)).toBe("2 MiB");
 });
 
 test("formats GiB correctly", () => {
-  expect(formatBytes(1073741824)).toBe("1 GiB");
-  expect(formatBytes(1610612736)).toBe("1.5 GiB");
-  expect(formatBytes(2147483648)).toBe("2 GiB");
+	expect(formatBytes(1073741824)).toBe("1 GiB");
+	expect(formatBytes(1610612736)).toBe("1.5 GiB");
+	expect(formatBytes(2147483648)).toBe("2 GiB");
 });
 
 test("formats large values with no decimal if intValue >= 1000", () => {
-  expect(formatBytes(1024 * 1024 * 1000)).toBe("1000 MiB");
+	expect(formatBytes(1024 * 1024 * 1000)).toBe("1000 MiB");
 });

src/lib/format.ts

@@ -11,28 +11,28 @@
  * @returns The formatted string with the appropriate unit.
  */
 export function formatBytes(v: number): string {
-  if (v < 1024) return `${v} B`;
+	if (v < 1024) return `${v} B`;
 
-  const units = ["KiB", "MiB", "GiB", "TiB"];
-  let unitIndex = -1;
-  let value = v;
+	const units = ["KiB", "MiB", "GiB", "TiB"];
+	let unitIndex = -1;
+	let value = v;
 
-  while (value >= 1024 && unitIndex < units.length - 1) {
-    value /= 1024;
-    unitIndex++;
-  }
+	while (value >= 1024 && unitIndex < units.length - 1) {
+		value /= 1024;
+		unitIndex++;
+	}
 
-  const intValue = Math.floor(value);
-  const decimal = value - intValue;
+	const intValue = Math.floor(value);
+	const decimal = value - intValue;
 
-  if (intValue >= 1000) {
-    // More than 3 digits, no decimal
-    return `${intValue} ${units[unitIndex]}`;
-  } else if (decimal >= 0.1) {
-    // Show 1 decimal if decimal >= 0.1
-    return `${value.toFixed(1)} ${units[unitIndex]}`;
-  } else {
-    // No decimal
-    return `${intValue} ${units[unitIndex]}`;
-  }
+	if (intValue >= 1000) {
+		// More than 3 digits, no decimal
+		return `${intValue} ${units[unitIndex]}`;
+	} else if (decimal >= 0.1) {
+		// Show 1 decimal if decimal >= 0.1
+		return `${value.toFixed(1)} ${units[unitIndex]}`;
+	} else {
+		// No decimal
+		return `${intValue} ${units[unitIndex]}`;
+	}
 }

src/main.tsx

@@ -4,7 +4,7 @@ import App from "./App";
 import "./global.css";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
 );

src/types/graph.ts

@@ -0,0 +1,4 @@
+export type Frame = {
+	id: string;
+	data: { x: string | number; y: number }[];
+};

tsconfig.json

@@ -1,25 +1,25 @@
 {
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
+	"compilerOptions": {
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"skipLibCheck": true,
 
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "react-jsx",
 
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true
+	},
+	"include": ["src"],
+	"references": [{ "path": "./tsconfig.node.json" }]
 }

tsconfig.node.json

@@ -1,10 +1,10 @@
 {
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
+	"compilerOptions": {
+		"composite": true,
+		"skipLibCheck": true,
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"allowSyntheticDefaultImports": true
+	},
+	"include": ["vite.config.ts"]
 }

vite.config.ts

@@ -7,27 +7,27 @@ const host = process.env.TAURI_DEV_HOST;
 
 // https://vite.dev/config/
 export default defineConfig(async () => ({
-  plugins: [react(), tailwindcss()],
+	plugins: [react(), tailwindcss()],
 
-  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
-  //
-  // 1. prevent Vite from obscuring rust errors
-  clearScreen: false,
-  // 2. tauri expects a fixed port, fail if that port is not available
-  server: {
-    port: 1420,
-    strictPort: true,
-    host: host || false,
-    hmr: host
-      ? {
-          protocol: "ws",
-          host,
-          port: 1421,
-        }
-      : undefined,
-    watch: {
-      // 3. tell Vite to ignore watching `src-tauri`
-      ignored: ["**/src-tauri/**"],
-    },
-  },
+	// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
+	//
+	// 1. prevent Vite from obscuring rust errors
+	clearScreen: false,
+	// 2. tauri expects a fixed port, fail if that port is not available
+	server: {
+		port: 1420,
+		strictPort: true,
+		host: host || false,
+		hmr: host
+			? {
+					protocol: "ws",
+					host,
+					port: 1421,
+				}
+			: undefined,
+		watch: {
+			// 3. tell Vite to ignore watching `src-tauri`
+			ignored: ["**/src-tauri/**"],
+		},
+	},
 }));