initial commit

packages/meta-sort-editor/src/App.css

@@ -0,0 +1,185 @@
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-header {
+  padding: 2rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.app-header h1 {
+  margin: 0 0 0.5rem 0;
+  color: #646cff;
+}
+
+.app-description {
+  margin: 0;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.app-main {
+  flex: 1;
+  padding: 2rem;
+  max-width: 1400px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.app-error {
+  padding: 1rem;
+  background-color: rgba(255, 0, 0, 0.1);
+  border: 1px solid rgba(255, 0, 0, 0.3);
+  border-radius: 8px;
+  color: #ff6b6b;
+  margin-bottom: 1rem;
+}
+
+.app-loading {
+  text-align: center;
+  padding: 3rem 2rem;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 1.1rem;
+}
+
+.app-welcome {
+  text-align: center;
+  padding: 4rem 2rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.app-welcome h2 {
+  margin: 0 0 1rem 0;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.app-welcome-features {
+  margin-top: 1rem;
+  margin-bottom: 1.5rem;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.app-kv-browser {
+  margin-top: 1.5rem;
+  text-align: left;
+  max-width: 900px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.app-content {
+  display: grid;
+  grid-template-columns: 350px 1fr;
+  gap: 1.5rem;
+  margin-top: 1rem;
+}
+
+.app-sidebar {
+  min-height: 400px;
+}
+
+.app-editor {
+  min-height: 400px;
+}
+
+.app-no-selection {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 400px;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  color: rgba(255, 255, 255, 0.5);
+  text-align: center;
+  padding: 2rem;
+}
+
+.app-footer {
+  padding: 1.5rem 2rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  text-align: center;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 0.9rem;
+}
+
+.app-footer a {
+  color: #646cff;
+  text-decoration: none;
+}
+
+.app-footer a:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 1024px) {
+  .app-content {
+    grid-template-columns: 1fr;
+  }
+
+  .app-sidebar {
+    order: 2;
+  }
+
+  .app-editor {
+    order: 1;
+  }
+}
+
+@media (max-width: 768px) {
+  .app-header,
+  .app-main,
+  .app-footer {
+    padding: 1rem;
+  }
+
+  .app-content {
+    gap: 1rem;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  .app-header {
+    border-bottom-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+
+  .app-description {
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  .app-error {
+    background-color: rgba(255, 0, 0, 0.1);
+    border-color: rgba(255, 0, 0, 0.3);
+    color: #cc0000;
+  }
+
+  .app-loading {
+    color: rgba(0, 0, 0, 0.7);
+  }
+
+  .app-welcome {
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  .app-welcome h2 {
+    color: rgba(0, 0, 0, 0.8);
+  }
+
+  .app-welcome-features {
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .app-no-selection {
+    background-color: rgba(0, 0, 0, 0.02);
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .app-footer {
+    border-top-color: rgba(0, 0, 0, 0.1);
+    color: rgba(0, 0, 0, 0.5);
+  }
+}

packages/meta-sort-editor/src/App.tsx

@@ -0,0 +1,246 @@
+import { useState, useEffect } from 'react';
+import { SearchBar } from './components/SearchBar';
+import { FileList } from './components/FileList';
+import { MetadataEditor } from './components/MetadataEditor';
+import { BulkMetadataEditor } from './components/BulkMetadataEditor';
+import { KVTreeView } from './components/KVTreeView';
+import { MetadataAPI } from './api/metadataApi';
+import { SearchResult } from './types';
+import './App.css';
+
+function App() {
+  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
+  const [selectedHashId, setSelectedHashId] = useState<string | undefined>();
+  const [selectedHashIds, setSelectedHashIds] = useState<Set<string>>(new Set());
+  const [bulkEditMode, setBulkEditMode] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+  const [isLoadingDirectHash, setIsLoadingDirectHash] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Extract hash from URL path (supports /editor/file/hash or /editor/?hash=...)
+  const getHashFromUrl = (): string | null => {
+    const path = window.location.pathname;
+    const fileMatch = path.match(/\/file\/([a-z0-9]+)$/i);
+    if (fileMatch) {
+      return fileMatch[1];
+    }
+    // Fallback to query param for backwards compatibility
+    const params = new URLSearchParams(window.location.search);
+    return params.get('hash');
+  };
+
+  // Update URL when file is selected
+  const updateUrlForFile = (hashId: string | undefined) => {
+    const basePath = window.location.pathname.replace(/\/file\/[a-z0-9]+$/i, '').replace(/\/$/, '');
+    if (hashId) {
+      const newPath = `${basePath}/file/${hashId}`;
+      window.history.pushState({ hashId }, '', newPath);
+    } else {
+      window.history.pushState({}, '', basePath || '/editor/');
+    }
+  };
+
+  // Check for hash parameter in URL on component mount
+  useEffect(() => {
+    const loadHashFromUrl = async () => {
+      const hashParam = getHashFromUrl();
+
+      if (hashParam) {
+        try {
+          setIsLoadingDirectHash(true);
+          setError(null);
+
+          // Try to get metadata for this hash
+          const metadata = await MetadataAPI.getMetadata(hashParam);
+
+          // Create a search result from the metadata
+          const searchResult: SearchResult = {
+            hashId: hashParam,
+            metadata: metadata,
+            score: 1.0,
+          };
+
+          // Set the search results and select this file
+          setSearchResults([searchResult]);
+          setSelectedHashId(hashParam);
+        } catch (err: any) {
+          setError(`Failed to load file with hash ${hashParam}: ${err.message}`);
+          setSearchResults([]);
+          setSelectedHashId(undefined);
+        } finally {
+          setIsLoadingDirectHash(false);
+        }
+      }
+    };
+
+    loadHashFromUrl();
+
+    // Handle browser back/forward
+    const handlePopState = (event: PopStateEvent) => {
+      const hashId = event.state?.hashId || getHashFromUrl();
+      if (hashId) {
+        setSelectedHashId(hashId);
+      } else {
+        setSelectedHashId(undefined);
+      }
+    };
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, []); // Empty dependency array means this runs once on mount
+
+  const handleSearch = async (query: string) => {
+    try {
+      setIsSearching(true);
+      setError(null);
+
+      // Unified search - searches across all fields
+      const response = await MetadataAPI.search({ query });
+
+      setSearchResults(response.results);
+
+      // Auto-select first result if available
+      if (response.results.length > 0) {
+        setSelectedHashId(response.results[0].hashId);
+      } else {
+        setSelectedHashId(undefined);
+      }
+    } catch (err: any) {
+      setError(err.message);
+      setSearchResults([]);
+      setSelectedHashId(undefined);
+    } finally {
+      setIsSearching(false);
+    }
+  };
+
+  const handleSelectFile = (hashId: string) => {
+    if (!bulkEditMode) {
+      setSelectedHashId(hashId);
+      setSelectedHashIds(new Set());
+      updateUrlForFile(hashId);
+    }
+  };
+
+  const handleToggleSelection = (hashId: string) => {
+    const newSelection = new Set(selectedHashIds);
+    if (newSelection.has(hashId)) {
+      newSelection.delete(hashId);
+    } else {
+      newSelection.add(hashId);
+    }
+    setSelectedHashIds(newSelection);
+  };
+
+  const handleSelectAll = () => {
+    const allHashIds = new Set(searchResults.map(r => r.hashId));
+    setSelectedHashIds(allHashIds);
+  };
+
+  const handleClearSelection = () => {
+    setSelectedHashIds(new Set());
+    setBulkEditMode(false);
+  };
+
+  const handleBulkEditMode = (enabled: boolean) => {
+    setBulkEditMode(enabled);
+    if (enabled) {
+      setSelectedHashId(undefined);
+    } else {
+      setSelectedHashIds(new Set());
+    }
+  };
+
+  const handleMetadataSaved = () => {
+    // Optionally refresh the search results to reflect changes
+    console.log('Metadata saved successfully');
+  };
+
+  const handleBulkMetadataSaved = () => {
+    console.log('Bulk metadata saved successfully');
+    handleClearSelection();
+  };
+
+  return (
+    <div className="app">
+      <header className="app-header">
+        <h1>MetaMesh Metadata Editor</h1>
+        <p className="app-description">
+          Search and edit metadata for your media files
+        </p>
+      </header>
+
+      <main className="app-main">
+        <SearchBar onSearch={handleSearch} isLoading={isSearching} />
+
+        {error && <div className="app-error">{error}</div>}
+
+        {isLoadingDirectHash && (
+          <div className="app-loading">Loading file metadata...</div>
+        )}
+
+        {!isSearching && !isLoadingDirectHash && searchResults.length === 0 && !error && (
+          <div className="app-welcome">
+            <h2>Welcome to MetaMesh Metadata Editor</h2>
+            <p>Search for files by title, filename, file path, or hash ID to get started.</p>
+            <p className="app-welcome-features">
+              Unified search across all fields | Single file editing | Bulk editing | Direct access via URL
+            </p>
+            <div className="app-kv-browser">
+              <KVTreeView />
+            </div>
+          </div>
+        )}
+
+        {searchResults.length > 0 && (
+          <div className="app-content">
+            <div className="app-sidebar">
+              <FileList
+                results={searchResults}
+                selectedHashId={selectedHashId}
+                selectedHashIds={selectedHashIds}
+                bulkEditMode={bulkEditMode}
+                onSelectFile={handleSelectFile}
+                onToggleSelection={handleToggleSelection}
+                onSelectAll={handleSelectAll}
+                onClearSelection={handleClearSelection}
+                onBulkEditMode={handleBulkEditMode}
+              />
+            </div>
+            <div className="app-editor">
+              {bulkEditMode && selectedHashIds.size > 0 ? (
+                <BulkMetadataEditor
+                  hashIds={Array.from(selectedHashIds)}
+                  onSaved={handleBulkMetadataSaved}
+                  onCancel={handleClearSelection}
+                />
+              ) : selectedHashId ? (
+                <MetadataEditor
+                  key={selectedHashId}
+                  hashId={selectedHashId}
+                  onSaved={handleMetadataSaved}
+                />
+              ) : (
+                <div className="app-no-selection">
+                  {bulkEditMode
+                    ? 'Select files from the list to bulk edit metadata'
+                    : 'Select a file from the list to edit its metadata'}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </main>
+
+      <footer className="app-footer">
+        <p>
+          MetaMesh Metadata Editor | Part of{' '}
+          <a href="/" target="_blank">
+            MetaMesh
+          </a>
+        </p>
+      </footer>
+    </div>
+  );
+}
+
+export default App;

packages/meta-sort-editor/src/api/metadataApi.ts

@@ -0,0 +1,151 @@
+import {
+  FileMetadata,
+  SearchResponse,
+  UpdateResult,
+  BatchUpdateResponse,
+} from '../types';
+
+const API_BASE = '/api/metadata';
+
+export class MetadataAPI {
+  /**
+   * Search for files by query, hashId, or property
+   */
+  static async search(params: {
+    query?: string;
+    hashId?: string;
+    property?: string;
+    propertyValue?: string;
+    limit?: number;
+  }): Promise<SearchResponse> {
+    const response = await fetch(`${API_BASE}/search`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(params),
+    });
+
+    if (!response.ok) {
+      const error = await response.json();
+      throw new Error(error.error || 'Search failed');
+    }
+
+    return response.json();
+  }
+
+  /**
+   * Get metadata for a specific file by hash ID
+   */
+  static async getMetadata(hashId: string): Promise<FileMetadata> {
+    const response = await fetch(`${API_BASE}/${hashId}`);
+
+    if (!response.ok) {
+      const error = await response.json();
+      throw new Error(error.error || 'Failed to get metadata');
+    }
+
+    return response.json();
+  }
+
+  /**
+   * Update complete metadata for a file
+   */
+  static async updateMetadata(
+    hashId: string,
+    metadata: FileMetadata
+  ): Promise<UpdateResult> {
+    const response = await fetch(`${API_BASE}/${hashId}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(metadata),
+    });
+
+    if (!response.ok) {
+      const error = await response.json();
+      throw new Error(error.error || 'Failed to update metadata');
+    }
+
+    return response.json();
+  }
+
+  /**
+   * Update a specific property for a file
+   */
+  static async updateProperty(
+    hashId: string,
+    property: string,
+    value: string
+  ): Promise<UpdateResult> {
+    const response = await fetch(`${API_BASE}/${hashId}/property`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ property, value }),
+    });
+
+    if (!response.ok) {
+      const error = await response.json();
+      throw new Error(error.error || 'Failed to update property');
+    }
+
+    return response.json();
+  }
+
+  /**
+   * Batch update multiple files
+   */
+  static async batchUpdate(
+    updates: Array<{
+      hashId: string;
+      metadata?: FileMetadata;
+      properties?: Record<string, string>;
+    }>
+  ): Promise<BatchUpdateResponse> {
+    const response = await fetch(`${API_BASE}/batch`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ updates }),
+    });
+
+    if (!response.ok) {
+      const error = await response.json();
+      throw new Error(error.error || 'Batch update failed');
+    }
+
+    return response.json();
+  }
+
+  /**
+   * Delete metadata for a file
+   */
+  static async deleteMetadata(hashId: string): Promise<void> {
+    const response = await fetch(`${API_BASE}/${hashId}`, {
+      method: 'DELETE',
+    });
+
+    if (!response.ok) {
+      const error = await response.json();
+      throw new Error(error.error || 'Failed to delete metadata');
+    }
+  }
+
+  /**
+   * Get all hash IDs
+   */
+  static async getAllHashIds(): Promise<{ hashIds: string[]; count: number }> {
+    const response = await fetch(`${API_BASE}/hash-ids`);
+
+    if (!response.ok) {
+      const error = await response.json();
+      throw new Error(error.error || 'Failed to get hash IDs');
+    }
+
+    return response.json();
+  }
+}

packages/meta-sort-editor/src/components/BulkMetadataEditor.css

@@ -0,0 +1,382 @@
+.bulk-metadata-editor {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  padding: 1.5rem;
+}
+
+.bulk-metadata-editor-header {
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.bulk-metadata-editor-header h2 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.5rem;
+}
+
+.bulk-info {
+  margin: 0 0 1rem 0;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.95rem;
+}
+
+.bulk-metadata-editor-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.bulk-metadata-editor-actions button.primary {
+  background-color: #646cff;
+  color: white;
+}
+
+.bulk-metadata-editor-actions button.primary:hover:not(:disabled) {
+  background-color: #535bf2;
+}
+
+.bulk-metadata-editor-message {
+  padding: 1rem;
+  border-radius: 4px;
+  margin-bottom: 1rem;
+}
+
+.bulk-metadata-editor-message.success {
+  background-color: rgba(0, 200, 0, 0.1);
+  border: 1px solid rgba(0, 200, 0, 0.3);
+  color: #00ff00;
+}
+
+.bulk-metadata-editor-message.error {
+  background-color: rgba(255, 0, 0, 0.1);
+  border: 1px solid rgba(255, 0, 0, 0.3);
+  color: #ff6b6b;
+}
+
+.bulk-metadata-editor-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.bulk-metadata-section {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-left: 4px solid #646cff;
+  border-radius: 8px;
+  padding: 1.5rem;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.bulk-metadata-section-header {
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.bulk-metadata-section-header h3 {
+  margin: 0 0 0.25rem 0;
+  font-size: 1.1rem;
+  color: #646cff;
+}
+
+.section-hint {
+  margin: 0.25rem 0 0 0;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.5);
+  font-style: italic;
+}
+
+.section-hint-bulk {
+  margin: 0.5rem 0 0 0;
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.4);
+  font-weight: 500;
+}
+
+/* Plugin-based bulk fields */
+.bulk-fields-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.bulk-field-wrapper {
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+  padding: 0.75rem;
+  background-color: rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+}
+
+.bulk-field-wrapper.has-value {
+  border-color: rgba(100, 108, 255, 0.3);
+  background-color: rgba(100, 108, 255, 0.05);
+}
+
+.bulk-field-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.field-key {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.6);
+  text-transform: lowercase;
+  font-family: 'Courier New', monospace;
+}
+
+.bulk-field-wrapper.has-value .field-key {
+  color: #646cff;
+}
+
+.bulk-field-input {
+  /* Plugin component will render inside this */
+}
+
+/* Legacy bulk fields (for compatibility) */
+.bulk-metadata-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.bulk-metadata-field:last-child {
+  margin-bottom: 0;
+}
+
+.field-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.field-header label {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.clear-field-btn {
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 1px solid rgba(255, 0, 0, 0.3);
+  background-color: rgba(255, 0, 0, 0.1);
+  color: #ff6b6b;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.clear-field-btn:hover {
+  background-color: rgba(255, 0, 0, 0.2);
+  border-color: rgba(255, 0, 0, 0.5);
+}
+
+.bulk-metadata-field input,
+.bulk-metadata-field textarea,
+.bulk-metadata-field select {
+  width: 100%;
+}
+
+.bulk-metadata-field-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.bulk-metadata-field-row:last-child {
+  margin-bottom: 0;
+}
+
+/* Modified fields summary */
+.modified-fields {
+  background-color: rgba(100, 108, 255, 0.05);
+  border-color: rgba(100, 108, 255, 0.3);
+}
+
+.modified-fields h3 {
+  color: #646cff;
+}
+
+.modified-fields-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.modified-field-item {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  padding: 0.75rem;
+  background-color: rgba(100, 108, 255, 0.05);
+  border: 1px solid rgba(100, 108, 255, 0.2);
+  border-radius: 4px;
+}
+
+.field-name {
+  font-weight: 600;
+  color: #646cff;
+  min-width: 150px;
+  font-family: 'Courier New', monospace;
+  font-size: 0.9rem;
+}
+
+.field-value {
+  flex: 1;
+  word-break: break-word;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.9rem;
+}
+
+.remove-field-btn {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.85rem;
+  background-color: rgba(255, 0, 0, 0.1);
+  border: 1px solid rgba(255, 0, 0, 0.3);
+  color: #ff6b6b;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.remove-field-btn:hover {
+  background-color: rgba(255, 0, 0, 0.2);
+  border-color: rgba(255, 0, 0, 0.5);
+}
+
+@media (max-width: 768px) {
+  .bulk-metadata-editor-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+
+  .bulk-metadata-editor-actions {
+    width: 100%;
+    flex-direction: column;
+  }
+
+  .bulk-metadata-editor-actions button {
+    width: 100%;
+  }
+
+  .bulk-metadata-field-row {
+    grid-template-columns: 1fr;
+  }
+
+  .modified-field-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .field-name {
+    min-width: auto;
+  }
+
+  .remove-field-btn {
+    align-self: flex-end;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  .bulk-metadata-editor {
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+
+  .bulk-metadata-editor-header {
+    border-bottom-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .bulk-info {
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  .bulk-metadata-section {
+    border-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+
+  .bulk-metadata-section-header {
+    border-bottom-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .section-hint {
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .section-hint-bulk {
+    color: rgba(0, 0, 0, 0.4);
+  }
+
+  .bulk-field-wrapper {
+    border-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+
+  .bulk-field-wrapper.has-value {
+    border-color: rgba(100, 108, 255, 0.3);
+    background-color: rgba(100, 108, 255, 0.05);
+  }
+
+  .field-key {
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  .bulk-field-wrapper.has-value .field-key {
+    color: #646cff;
+  }
+
+  .field-header label {
+    color: rgba(0, 0, 0, 0.7);
+  }
+
+  .field-value {
+    color: rgba(0, 0, 0, 0.8);
+  }
+
+  .bulk-metadata-editor-message.success {
+    background-color: rgba(0, 200, 0, 0.1);
+    border-color: rgba(0, 200, 0, 0.3);
+    color: #008800;
+  }
+
+  .bulk-metadata-editor-message.error {
+    background-color: rgba(255, 0, 0, 0.1);
+    border-color: rgba(255, 0, 0, 0.3);
+    color: #cc0000;
+  }
+
+  .modified-fields {
+    background-color: rgba(100, 108, 255, 0.05);
+    border-color: rgba(100, 108, 255, 0.3);
+  }
+
+  .modified-field-item {
+    background-color: rgba(100, 108, 255, 0.05);
+    border-color: rgba(100, 108, 255, 0.2);
+  }
+
+  .clear-field-btn {
+    border-color: rgba(255, 0, 0, 0.3);
+    background-color: rgba(255, 0, 0, 0.1);
+    color: #cc0000;
+  }
+
+  .clear-field-btn:hover {
+    background-color: rgba(255, 0, 0, 0.2);
+    border-color: rgba(255, 0, 0, 0.5);
+  }
+}

packages/meta-sort-editor/src/components/BulkMetadataEditor.tsx

@@ -0,0 +1,280 @@
+import { useState, useEffect } from 'react';
+import { FileMetadata, PluginSchema } from '../types';
+import { MetadataAPI } from '../api/metadataApi';
+import { DynamicFieldRenderer } from './DynamicFieldRenderer';
+import './BulkMetadataEditor.css';
+
+interface PluginsResponse {
+  plugins: PluginSchema[];
+}
+
+interface BulkMetadataEditorProps {
+  hashIds: string[];
+  onSaved?: () => void;
+  onCancel?: () => void;
+}
+
+export function BulkMetadataEditor({ hashIds, onSaved, onCancel }: BulkMetadataEditorProps) {
+  const [plugins, setPlugins] = useState<PluginSchema[]>([]);
+  const [commonValues, setCommonValues] = useState<Record<string, any>>({});
+  const [editedFields, setEditedFields] = useState<Partial<FileMetadata>>({});
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+  // Load plugins and metadata on mount
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+
+        // Fetch plugins
+        const pluginsResponse = await fetch('/api/plugins');
+        if (pluginsResponse.ok) {
+          const data: PluginsResponse = await pluginsResponse.json();
+          // Sort by priority
+          const sorted = [...data.plugins].sort((a, b) =>
+            (a.priority ?? 100) - (b.priority ?? 100)
+          );
+          setPlugins(sorted);
+        }
+
+        // Load metadata for all selected files
+        const metadataPromises = hashIds.map((hashId) => MetadataAPI.getMetadata(hashId));
+        const metadata = await Promise.all(metadataPromises);
+
+        // Calculate common values
+        const commons: Record<string, any> = {};
+
+        // Get all editable fields from all plugins
+        const allFields: string[] = [];
+        plugins.forEach((plugin) => {
+          if (plugin.metadataSchema) {
+            Object.entries(plugin.metadataSchema).forEach(([key, field]) => {
+              if (!field.readonly) {
+                allFields.push(key);
+              }
+            });
+          }
+        });
+
+        allFields.forEach((field) => {
+          const values = metadata.map((m) => m[field as keyof FileMetadata]);
+
+          // Filter out undefined and null values
+          const definedValues = values.filter((v) => v !== undefined && v !== null);
+
+          if (definedValues.length === 0) {
+            return;
+          }
+
+          // Safely stringify values
+          const uniqueValues = Array.from(
+            new Set(
+              definedValues.map((v) => {
+                try {
+                  return JSON.stringify(v);
+                } catch {
+                  return String(v);
+                }
+              })
+            )
+          );
+
+          if (uniqueValues.length === 1) {
+            try {
+              commons[field] = JSON.parse(uniqueValues[0]);
+            } catch {
+              commons[field] = uniqueValues[0];
+            }
+          } else {
+            commons[field] = '*';
+          }
+        });
+
+        setCommonValues(commons);
+      } catch (err: any) {
+        setError(`Failed to load data: ${err.message}`);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadData();
+  }, [hashIds]);
+
+  const handleFieldChange = (field: string, value: any) => {
+    setEditedFields({
+      ...editedFields,
+      [field]: value,
+    });
+  };
+
+  const handleClearField = (field: string) => {
+    const newFields = { ...editedFields };
+    delete newFields[field];
+    setEditedFields(newFields);
+  };
+
+  const handleSave = async () => {
+    if (Object.keys(editedFields).length === 0) {
+      setError('No fields have been edited');
+      return;
+    }
+
+    try {
+      setIsSaving(true);
+      setError(null);
+      setSuccessMessage(null);
+
+      // Build batch update payload
+      const updates = hashIds.map((hashId) => ({
+        hashId,
+        metadata: editedFields,
+      }));
+
+      const result = await MetadataAPI.batchUpdate(updates);
+
+      if (result.errors > 0) {
+        setError(
+          `Updated ${result.success} files successfully, but ${result.errors} failed. Check console for details.`
+        );
+        console.error('Batch update errors:', result.results.filter((r) => r.error));
+      } else {
+        setSuccessMessage(`Successfully updated ${result.success} files!`);
+      }
+
+      if (onSaved) {
+        onSaved();
+      }
+
+      setTimeout(() => setSuccessMessage(null), 3000);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const hasChanges = Object.keys(editedFields).length > 0;
+
+  // Filter to only editable plugins (those with non-readonly fields)
+  const editablePlugins = plugins.filter((plugin) => {
+    if (!plugin.metadataSchema) return false;
+    return Object.values(plugin.metadataSchema).some((field) => !field.readonly);
+  });
+
+  if (isLoading) {
+    return (
+      <div className="bulk-metadata-editor">
+        <div className="bulk-metadata-editor-loading">
+          Loading metadata for {hashIds.length} files...
+        </div>
+      </div>
+    );
+  }
+
+  // Build display metadata (edited values or common values)
+  const displayMetadata: Record<string, any> = { ...commonValues, ...editedFields };
+
+  return (
+    <div className="bulk-metadata-editor">
+      <div className="bulk-metadata-editor-header">
+        <h2>Bulk Edit Metadata</h2>
+        <p className="bulk-info">
+          Editing {hashIds.length} file{hashIds.length !== 1 ? 's' : ''} - Only modified fields will
+          be updated. Fields showing "*" have different values across files.
+        </p>
+        <div className="bulk-metadata-editor-actions">
+          {onCancel && (
+            <button onClick={onCancel} disabled={isSaving}>
+              Cancel
+            </button>
+          )}
+          <button onClick={handleSave} disabled={isSaving || !hasChanges} className="primary">
+            {isSaving ? 'Saving...' : `Update ${hashIds.length} File${hashIds.length !== 1 ? 's' : ''}`}
+          </button>
+        </div>
+      </div>
+
+      {successMessage && (
+        <div className="bulk-metadata-editor-message success">{successMessage}</div>
+      )}
+      {error && <div className="bulk-metadata-editor-message error">{error}</div>}
+
+      <div className="bulk-metadata-editor-form">
+        {editablePlugins.map((plugin) => {
+          if (!plugin.metadataSchema) return null;
+
+          // Get editable fields for this plugin
+          const editableFields = Object.entries(plugin.metadataSchema).filter(
+            ([, field]) => !field.readonly
+          );
+
+          if (editableFields.length === 0) return null;
+
+          return (
+            <section
+              key={plugin.id}
+              className="bulk-metadata-section"
+              style={{ borderLeftColor: plugin.color || '#646cff' }}
+            >
+              <div className="bulk-metadata-section-header">
+                <h3>{plugin.name}</h3>
+                {plugin.description && (
+                  <p className="section-hint">{plugin.description}</p>
+                )}
+                <p className="section-hint-bulk">
+                  Common values shown. "*" indicates different values. Edit to update all files.
+                </p>
+              </div>
+
+              <div className="plugin-fields">
+                {editableFields.map(([key, field]) => (
+                  <DynamicFieldRenderer
+                    key={key}
+                    fieldKey={key}
+                    schema={field}
+                    metadata={displayMetadata as FileMetadata}
+                    onChange={handleFieldChange}
+                    readonly={false}
+                  />
+                ))}
+              </div>
+            </section>
+          );
+        })}
+
+        {/* Modified Fields Summary */}
+        {hasChanges && (
+          <section className="bulk-metadata-section modified-fields">
+            <h3>Fields to be Updated ({Object.keys(editedFields).length})</h3>
+            <div className="modified-fields-list">
+              {Object.entries(editedFields).map(([key, value]) => (
+                <div key={key} className="modified-field-item">
+                  <span className="field-name">{key}:</span>
+                  <span className="field-value">
+                    {Array.isArray(value)
+                      ? value.join(', ')
+                      : typeof value === 'object'
+                      ? JSON.stringify(value)
+                      : String(value || '(empty)')}
+                  </span>
+                  <button
+                    className="remove-field-btn"
+                    onClick={() => handleClearField(key)}
+                    title="Remove this field"
+                  >
+                    Remove
+                  </button>
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+      </div>
+    </div>
+  );
+}

packages/meta-sort-editor/src/components/DynamicFieldRenderer.css

@@ -0,0 +1,297 @@
+.dynamic-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.dynamic-field:last-child {
+  margin-bottom: 0;
+}
+
+.dynamic-field label {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.dynamic-field input[type="text"],
+.dynamic-field input[type="number"],
+.dynamic-field select,
+.dynamic-field textarea {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  font-size: 0.9rem;
+  background: rgba(0, 0, 0, 0.3);
+  color: #fff;
+  transition: border-color 0.2s;
+}
+
+.dynamic-field input:focus,
+.dynamic-field select:focus,
+.dynamic-field textarea:focus {
+  outline: none;
+  border-color: #646cff;
+}
+
+.dynamic-field input:disabled,
+.dynamic-field select:disabled,
+.dynamic-field textarea:disabled {
+  background: rgba(0, 0, 0, 0.2);
+  color: rgba(255, 255, 255, 0.5);
+  cursor: not-allowed;
+}
+
+.dynamic-field textarea {
+  resize: vertical;
+  min-height: 80px;
+  font-family: inherit;
+}
+
+.field-hint {
+  display: block;
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-weight: normal;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.checkbox-label input[type="checkbox"] {
+  width: 1.1rem;
+  height: 1.1rem;
+  cursor: pointer;
+  accent-color: #646cff;
+}
+
+.checkbox-label input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.readonly-value {
+  padding: 0.5rem 0.75rem;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 0.7);
+  font-family: 'Courier New', monospace;
+  font-size: 0.9rem;
+  word-break: break-all;
+}
+
+.field-link {
+  color: #646cff;
+  text-decoration: none;
+}
+
+.field-link:hover {
+  text-decoration: underline;
+}
+
+/* CID field styling */
+.cid-field .cid-value-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.cid-field .cid-value {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
+  font-size: 0.85rem;
+  color: #a0d8ef;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cid-field .cid-value:hover {
+  background: rgba(0, 0, 0, 0.4);
+  border-color: #646cff;
+}
+
+.cid-field .cid-open-button {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  background: #646cff;
+  color: #fff;
+  border-radius: 4px;
+  text-decoration: none;
+  font-size: 0.85rem;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: background 0.2s;
+}
+
+.cid-field .cid-open-button:hover {
+  background: #535bf2;
+}
+
+/* JSON field styling */
+.json-field .json-viewer {
+  background: rgba(0, 0, 0, 0.4);
+  color: #d4d4d4;
+  padding: 1rem;
+  border-radius: 4px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
+  font-size: 0.85rem;
+  overflow-x: auto;
+  max-height: 300px;
+  overflow-y: auto;
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Language string field styling */
+.language-string-field .language-entries {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.language-string-field .language-entry {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.language-string-field .lang-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.language-string-field .lang-code {
+  display: inline-block;
+  width: 50px;
+  padding: 0.4rem 0.5rem;
+  background: rgba(100, 108, 255, 0.2);
+  border: 1px solid rgba(100, 108, 255, 0.3);
+  border-radius: 4px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
+  font-size: 0.8rem;
+  color: #a0d8ef;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.language-string-field .lang-text {
+  flex: 1;
+  padding: 0.4rem 0.75rem;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.9rem;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.language-string-field .lang-remove-btn {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 100, 100, 0.2);
+  border: 1px solid rgba(255, 100, 100, 0.3);
+  border-radius: 4px;
+  color: #ff6b6b;
+  font-size: 1.2rem;
+  cursor: pointer;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.language-string-field .lang-remove-btn:hover {
+  background: rgba(255, 100, 100, 0.3);
+  border-color: rgba(255, 100, 100, 0.5);
+}
+
+.language-string-field .lang-add-btn {
+  align-self: flex-start;
+  padding: 0.4rem 0.75rem;
+  background: rgba(100, 108, 255, 0.2);
+  border: 1px solid rgba(100, 108, 255, 0.3);
+  border-radius: 4px;
+  color: #646cff;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.language-string-field .lang-add-btn:hover {
+  background: rgba(100, 108, 255, 0.3);
+  border-color: rgba(100, 108, 255, 0.5);
+}
+
+/* Light theme */
+@media (prefers-color-scheme: light) {
+  .dynamic-field label {
+    color: rgba(0, 0, 0, 0.7);
+  }
+
+  .dynamic-field input[type="text"],
+  .dynamic-field input[type="number"],
+  .dynamic-field select,
+  .dynamic-field textarea {
+    border-color: rgba(0, 0, 0, 0.1);
+    background: #fff;
+    color: #333;
+  }
+
+  .dynamic-field input:disabled,
+  .dynamic-field select:disabled,
+  .dynamic-field textarea:disabled {
+    background: #f5f5f5;
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .field-hint {
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .checkbox-label {
+    color: rgba(0, 0, 0, 0.7);
+  }
+
+  .readonly-value {
+    background: #f8f9fa;
+    border-color: #e9ecef;
+    color: #495057;
+  }
+
+  .json-field .json-viewer {
+    background: #1e1e1e;
+    border-color: rgba(0, 0, 0, 0.2);
+  }
+
+  .language-string-field .lang-code {
+    background: rgba(100, 108, 255, 0.1);
+    color: #4a50c8;
+  }
+
+  .language-string-field .lang-text {
+    background: #f8f9fa;
+    border-color: #e9ecef;
+    color: #495057;
+  }
+}

packages/meta-sort-editor/src/components/DynamicFieldRenderer.tsx

@@ -0,0 +1,378 @@
+import { SchemaField, FileMetadata } from '../types';
+import { LanguageCombobox, formatLanguageOption } from './LanguageCombobox';
+import './DynamicFieldRenderer.css';
+
+interface DynamicFieldRendererProps {
+  fieldKey: string;
+  schema: SchemaField;
+  metadata: FileMetadata;
+  onChange: (key: string, value: any) => void;
+  readonly?: boolean;
+}
+
+/**
+ * Renders a single metadata field based on its schema definition
+ */
+export function DynamicFieldRenderer({
+  fieldKey,
+  schema,
+  metadata,
+  onChange,
+  readonly = false,
+}: DynamicFieldRendererProps) {
+  const isReadonly = readonly || schema.readonly;
+  const fieldType = schema.type || 'string';
+
+  // Get value from metadata using path-style key
+  const getValue = (): any => {
+    // Handle path-style keys like "stream/duration" or "nfo/title"
+    const parts = fieldKey.split('/');
+    let value: any = metadata;
+    for (const part of parts) {
+      if (value === undefined || value === null) return undefined;
+      value = value[part];
+    }
+    return value;
+  };
+
+  // Set value in metadata using path-style key
+  const setValue = (newValue: any) => {
+    onChange(fieldKey, newValue);
+  };
+
+  const value = getValue();
+
+  // Render link if configured
+  const renderValueWithLink = (displayValue: string) => {
+    if (schema.link && displayValue) {
+      const url = schema.link.replace('{value}', encodeURIComponent(displayValue));
+      return (
+        <a href={url} target="_blank" rel="noopener noreferrer" className="field-link">
+          {displayValue}
+        </a>
+      );
+    }
+    return displayValue;
+  };
+
+  // Render based on field type
+  switch (fieldType) {
+    case 'boolean':
+      return (
+        <div className="dynamic-field">
+          <label className="checkbox-label">
+            <input
+              type="checkbox"
+              checked={Boolean(value)}
+              onChange={(e) => setValue(e.target.checked)}
+              disabled={isReadonly}
+            />
+            <span>{schema.label}</span>
+          </label>
+          {schema.hint && <small className="field-hint">{schema.hint}</small>}
+        </div>
+      );
+
+    case 'number':
+      return (
+        <div className="dynamic-field">
+          <label>{schema.label}</label>
+          <input
+            type="number"
+            value={value ?? ''}
+            onChange={(e) => setValue(e.target.value ? Number(e.target.value) : undefined)}
+            disabled={isReadonly}
+            min={schema.min}
+            max={schema.max}
+            placeholder={schema.placeholder}
+          />
+          {schema.hint && <small className="field-hint">{schema.hint}</small>}
+        </div>
+      );
+
+    case 'select':
+      return (
+        <div className="dynamic-field">
+          <label>{schema.label}</label>
+          <select
+            value={value ?? ''}
+            onChange={(e) => setValue(e.target.value || undefined)}
+            disabled={isReadonly}
+          >
+            <option value="">Select...</option>
+            {schema.options?.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+          {schema.hint && <small className="field-hint">{schema.hint}</small>}
+        </div>
+      );
+
+    case 'text':
+      return (
+        <div className="dynamic-field">
+          <label>{schema.label}</label>
+          <textarea
+            value={value ?? ''}
+            onChange={(e) => setValue(e.target.value || undefined)}
+            disabled={isReadonly}
+            placeholder={schema.placeholder}
+            rows={4}
+          />
+          {schema.hint && <small className="field-hint">{schema.hint}</small>}
+        </div>
+      );
+
+    case 'array':
+      // Convert RecordSet to comma-separated string for display
+      const arrayValue = (() => {
+        if (!value) return '';
+        if (typeof value === 'string') return value;
+        if (typeof value === 'object') {
+          return Object.values(value).join(', ');
+        }
+        return '';
+      })();
+
+      // Convert comma-separated string back to RecordSet
+      const handleArrayChange = (str: string) => {
+        const items = str.split(',').map(s => s.trim()).filter(Boolean);
+        if (items.length === 0) {
+          setValue(undefined);
+          return;
+        }
+        const recordSet: Record<string, string> = {};
+        items.forEach((item, idx) => {
+          recordSet[idx.toString()] = item;
+        });
+        setValue(recordSet);
+      };
+
+      return (
+        <div className="dynamic-field">
+          <label>{schema.label}</label>
+          <input
+            type="text"
+            value={arrayValue}
+            onChange={(e) => handleArrayChange(e.target.value)}
+            disabled={isReadonly}
+            placeholder={schema.placeholder || 'Comma-separated values'}
+          />
+          {schema.hint && <small className="field-hint">{schema.hint}</small>}
+        </div>
+      );
+
+    case 'json':
+      // Aggregate matching keys based on pattern
+      const jsonData = (() => {
+        if (!schema.pattern) {
+          return value;
+        }
+
+        // Pattern like "stream/video/{n}/*" - aggregate all matching keys
+        const patternPrefix = schema.pattern.replace(/\{n\}.*$/, '');
+        const result: Record<string, any> = {};
+
+        // Recursively find all matching keys
+        const findMatching = (obj: any, currentPath: string = '') => {
+          if (!obj || typeof obj !== 'object') return;
+
+          for (const [key, val] of Object.entries(obj)) {
+            const newPath = currentPath ? `${currentPath}/${key}` : key;
+            if (newPath.startsWith(patternPrefix.replace(/\/$/, ''))) {
+              // Store in result with relative path
+              const relativePath = newPath.substring(patternPrefix.length - 1);
+              if (relativePath) {
+                setNestedValue(result, relativePath, val);
+              }
+            }
+            if (typeof val === 'object' && val !== null) {
+              findMatching(val, newPath);
+            }
+          }
+        };
+
+        findMatching(metadata);
+        return Object.keys(result).length > 0 ? result : undefined;
+      })();
+
+      if (!jsonData) {
+        return null;
+      }
+
+      return (
+        <div className="dynamic-field json-field">
+          <label>{schema.label}</label>
+          <pre className="json-viewer">
+            {JSON.stringify(jsonData, null, 2)}
+          </pre>
+          {schema.hint && <small className="field-hint">{schema.hint}</small>}
+        </div>
+      );
+
+    case 'cid':
+      // CID field type - displays CID with "Open in Editor" button
+      if (!value) {
+        return null;
+      }
+
+      const cidValue = String(value);
+      const editorUrl = `/editor/file/${cidValue}`;
+
+      return (
+        <div className="dynamic-field cid-field">
+          <label>{schema.label}</label>
+          <div className="cid-value-container">
+            <code
+              className="cid-value"
+              onClick={() => navigator.clipboard.writeText(cidValue)}
+              title="Click to copy"
+            >
+              {cidValue}
+            </code>
+            <a
+              href={editorUrl}
+              className="cid-open-button"
+              title="Open in Editor"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              ↗ Open
+            </a>
+          </div>
+          {schema.hint && <small className="field-hint">{schema.hint}</small>}
+        </div>
+      );
+
+    case 'languageString':
+      // Language-keyed string object: { "eng": "English Title", "jpn": "日本語タイトル" }
+      const langEntries: Array<[string, string]> = value && typeof value === 'object'
+        ? Object.entries(value).map(([k, v]) => [k, String(v)])
+        : [];
+
+      const handleLangCodeChange = (oldLang: string, newLang: string) => {
+        if (oldLang === newLang) return;
+        const newValue = { ...value };
+        const text = newValue[oldLang];
+        delete newValue[oldLang];
+        newValue[newLang] = text;
+        setValue(Object.keys(newValue).length > 0 ? newValue : undefined);
+      };
+
+      const handleLangTextChange = (lang: string, text: string) => {
+        const newValue = { ...value, [lang]: text };
+        setValue(newValue);
+      };
+
+      const handleRemoveLang = (lang: string) => {
+        const newValue = { ...value };
+        delete newValue[lang];
+        setValue(Object.keys(newValue).length > 0 ? newValue : undefined);
+      };
+
+      const handleAddLang = () => {
+        // Find a language code not already used, default to 'eng'
+        const usedLangs = new Set(langEntries.map(([k]) => k));
+        const commonDefaults = ['eng', 'jpn', 'zho', 'kor', 'fra', 'deu', 'spa'];
+        const defaultLang = commonDefaults.find(l => !usedLangs.has(l)) || 'eng';
+        setValue({ ...value, [defaultLang]: '' });
+      };
+
+      if (isReadonly && langEntries.length === 0) {
+        return null;
+      }
+
+      return (
+        <div className="dynamic-field language-string-field">
+          <label>{schema.label}</label>
+          <div className="language-entries">
+            {langEntries.map(([lang, text]) => (
+              <div key={lang} className="language-entry">
+                {isReadonly ? (
+                  <>
+                    <span className="lang-code" title={formatLanguageOption(lang)}>{lang}</span>
+                    <span className="lang-text">{text}</span>
+                  </>
+                ) : (
+                  <>
+                    <LanguageCombobox
+                      value={lang}
+                      onChange={(newLang) => handleLangCodeChange(lang, newLang)}
+                    />
+                    <input
+                      type="text"
+                      className="lang-input"
+                      value={text}
+                      onChange={(e) => handleLangTextChange(lang, e.target.value)}
+                      placeholder={schema.placeholder || 'Text...'}
+                    />
+                    <button
+                      type="button"
+                      className="lang-remove-btn"
+                      onClick={() => handleRemoveLang(lang)}
+                      title="Remove"
+                    >
+                      ×
+                    </button>
+                  </>
+                )}
+              </div>
+            ))}
+            {!isReadonly && (
+              <button
+                type="button"
+                className="lang-add-btn"
+                onClick={handleAddLang}
+              >
+                + Add Language
+              </button>
+            )}
+          </div>
+          {schema.hint && <small className="field-hint">{schema.hint}</small>}
+        </div>
+      );
+
+    case 'string':
+    default:
+      // Show nothing if no value and readonly
+      if (isReadonly && !value) {
+        return null;
+      }
+
+      return (
+        <div className="dynamic-field">
+          <label>{schema.label}</label>
+          {isReadonly ? (
+            <div className="readonly-value">
+              {renderValueWithLink(String(value ?? ''))}
+            </div>
+          ) : (
+            <input
+              type="text"
+              value={value ?? ''}
+              onChange={(e) => setValue(e.target.value || undefined)}
+              placeholder={schema.placeholder}
+            />
+          )}
+          {schema.hint && <small className="field-hint">{schema.hint}</small>}
+        </div>
+      );
+  }
+}
+
+// Helper to set nested value in object
+function setNestedValue(obj: any, path: string, value: any) {
+  const parts = path.split('/').filter(Boolean);
+  let current = obj;
+  for (let i = 0; i < parts.length - 1; i++) {
+    if (!current[parts[i]]) {
+      current[parts[i]] = {};
+    }
+    current = current[parts[i]];
+  }
+  if (parts.length > 0) {
+    current[parts[parts.length - 1]] = value;
+  }
+}

packages/meta-sort-editor/src/components/DynamicPluginSection.css

@@ -0,0 +1,63 @@
+.plugin-section {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-left: 4px solid #646cff;
+  border-radius: 8px;
+  padding: 1.5rem;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.plugin-section-header {
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.plugin-section-header h3 {
+  margin: 0 0 0.25rem 0;
+  font-size: 1.1rem;
+  color: #646cff;
+}
+
+.plugin-section-header .plugin-description {
+  margin: 0;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.5);
+  font-style: italic;
+}
+
+.plugin-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Responsive grid for fields */
+@media (min-width: 768px) {
+  .plugin-fields {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1rem;
+  }
+
+  /* Make text and json fields span full width */
+  .plugin-fields .dynamic-field:has(textarea),
+  .plugin-fields .json-field {
+    grid-column: 1 / -1;
+  }
+}
+
+/* Light theme */
+@media (prefers-color-scheme: light) {
+  .plugin-section {
+    border-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+
+  .plugin-section-header {
+    border-bottom-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .plugin-section-header .plugin-description {
+    color: rgba(0, 0, 0, 0.5);
+  }
+}

packages/meta-sort-editor/src/components/DynamicPluginSection.tsx

@@ -0,0 +1,126 @@
+import { PluginSchema, FileMetadata, SchemaField } from '../types';
+import { DynamicFieldRenderer } from './DynamicFieldRenderer';
+import './DynamicPluginSection.css';
+
+interface DynamicPluginSectionProps {
+  plugin: PluginSchema;
+  metadata: FileMetadata;
+  onChange: (key: string, value: any) => void;
+}
+
+/**
+ * Renders a plugin section with all its fields based on schema
+ */
+export function DynamicPluginSection({
+  plugin,
+  metadata,
+  onChange,
+}: DynamicPluginSectionProps) {
+  const schema = plugin.metadataSchema;
+
+  if (!schema || Object.keys(schema).length === 0) {
+    return null;
+  }
+
+  // Check if plugin has any data in metadata
+  const hasData = checkPluginHasData(schema, metadata);
+  if (!hasData) {
+    return null;
+  }
+
+  // Sort fields: non-readonly first, then by key
+  const sortedFields = Object.entries(schema).sort(([keyA, a], [keyB, b]) => {
+    // Non-readonly fields first
+    if (a.readonly !== b.readonly) {
+      return a.readonly ? 1 : -1;
+    }
+    // Then alphabetically
+    return keyA.localeCompare(keyB);
+  });
+
+  return (
+    <section
+      className="plugin-section"
+      style={{ borderLeftColor: plugin.color || '#646cff' }}
+    >
+      <div className="plugin-section-header">
+        <h3>{plugin.name}</h3>
+        {plugin.description && (
+          <p className="plugin-description">{plugin.description}</p>
+        )}
+      </div>
+
+      <div className="plugin-fields">
+        {sortedFields.map(([fieldKey, fieldSchema]) => (
+          <DynamicFieldRenderer
+            key={fieldKey}
+            fieldKey={fieldKey}
+            schema={fieldSchema}
+            metadata={metadata}
+            onChange={onChange}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+/**
+ * Check if a plugin has any data in the metadata
+ */
+function checkPluginHasData(
+  schema: Record<string, SchemaField>,
+  metadata: FileMetadata
+): boolean {
+  for (const fieldKey of Object.keys(schema)) {
+    const fieldSchema = schema[fieldKey];
+
+    // For JSON type with pattern, check if any matching keys exist
+    if (fieldSchema.type === 'json' && fieldSchema.pattern) {
+      const patternPrefix = fieldSchema.pattern.replace(/\{n\}.*$/, '').replace(/\/$/, '');
+      if (hasKeyWithPrefix(metadata, patternPrefix)) {
+        return true;
+      }
+      continue;
+    }
+
+    // For regular fields, check if value exists
+    if (getNestedValue(metadata, fieldKey) !== undefined) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Get nested value from object using path-style key
+ */
+function getNestedValue(obj: any, path: string): any {
+  const parts = path.split('/');
+  let value = obj;
+  for (const part of parts) {
+    if (value === undefined || value === null) return undefined;
+    value = value[part];
+  }
+  return value;
+}
+
+/**
+ * Check if object has any key starting with prefix
+ */
+function hasKeyWithPrefix(obj: any, prefix: string, currentPath: string = ''): boolean {
+  if (!obj || typeof obj !== 'object') return false;
+
+  for (const key of Object.keys(obj)) {
+    const newPath = currentPath ? `${currentPath}/${key}` : key;
+    if (newPath.startsWith(prefix)) {
+      return true;
+    }
+    if (typeof obj[key] === 'object' && obj[key] !== null) {
+      if (hasKeyWithPrefix(obj[key], prefix, newPath)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}

packages/meta-sort-editor/src/components/FileList.css

@@ -0,0 +1,174 @@
+.file-list {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.file-list-header {
+  padding: 0.75rem 1rem;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.file-count {
+  font-size: 0.9em;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.bulk-edit-toggle {
+  padding: 0.4rem 0.8rem;
+  font-size: 0.85em;
+  background-color: rgba(100, 108, 255, 0.1);
+  border: 1px solid rgba(100, 108, 255, 0.3);
+  color: #646cff;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.bulk-edit-toggle:hover {
+  background-color: rgba(100, 108, 255, 0.2);
+  border-color: rgba(100, 108, 255, 0.5);
+}
+
+.bulk-edit-toggle.active {
+  background-color: rgba(100, 108, 255, 0.3);
+  border-color: #646cff;
+  font-weight: 500;
+}
+
+.file-list-bulk-actions {
+  padding: 0.75rem 1rem;
+  background-color: rgba(100, 108, 255, 0.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.select-all-btn {
+  padding: 0.4rem 0.8rem;
+  font-size: 0.85em;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: rgba(255, 255, 255, 0.9);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.select-all-btn:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.selection-count {
+  font-size: 0.9em;
+  color: #646cff;
+  font-weight: 500;
+}
+
+.file-list-items {
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.file-list-item {
+  padding: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  cursor: pointer;
+  transition: background-color 0.2s;
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+}
+
+.file-list-item-checkbox {
+  padding-top: 0.2rem;
+}
+
+.file-list-item-checkbox input[type='checkbox'] {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+
+.file-list-item-content {
+  flex: 1;
+}
+
+.file-list-item:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.file-list-item.selected {
+  background-color: rgba(100, 108, 255, 0.2);
+  border-left: 3px solid #646cff;
+}
+
+.file-list-item-title {
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.file-list-item-details {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.9em;
+  color: rgba(255, 255, 255, 0.6);
+  margin-bottom: 0.25rem;
+}
+
+.file-list-item-hash {
+  font-size: 0.8em;
+  color: rgba(255, 255, 255, 0.4);
+  font-family: 'Courier New', monospace;
+}
+
+.file-list-empty {
+  padding: 3rem 1rem;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+@media (prefers-color-scheme: light) {
+  .file-list {
+    border-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .file-list-header {
+    background-color: rgba(0, 0, 0, 0.02);
+    border-bottom-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .file-count {
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  .file-list-item {
+    border-bottom-color: rgba(0, 0, 0, 0.05);
+  }
+
+  .file-list-item:hover {
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+
+  .file-list-item.selected {
+    background-color: rgba(100, 108, 255, 0.1);
+  }
+
+  .file-list-item-details {
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  .file-list-item-hash {
+    color: rgba(0, 0, 0, 0.4);
+  }
+
+  .file-list-empty {
+    color: rgba(0, 0, 0, 0.5);
+  }
+}

packages/meta-sort-editor/src/components/FileList.tsx

@@ -0,0 +1,123 @@
+import { SearchResult } from '../types';
+import { getDisplayName, truncateHash, formatBytes } from '../utils/formatting';
+import './FileList.css';
+
+interface FileListProps {
+  results: SearchResult[];
+  selectedHashId?: string;
+  selectedHashIds: Set<string>;
+  bulkEditMode: boolean;
+  onSelectFile: (hashId: string) => void;
+  onToggleSelection: (hashId: string) => void;
+  onSelectAll: () => void;
+  onClearSelection: () => void;
+  onBulkEditMode: (enabled: boolean) => void;
+}
+
+export function FileList({
+  results,
+  selectedHashId,
+  selectedHashIds,
+  bulkEditMode,
+  onSelectFile,
+  onToggleSelection,
+  onSelectAll,
+  onClearSelection,
+  onBulkEditMode,
+}: FileListProps) {
+  if (results.length === 0) {
+    return (
+      <div className="file-list-empty">
+        <p>No files found. Try searching for a title, filename, or hash ID.</p>
+      </div>
+    );
+  }
+
+  const allSelected = results.length > 0 && results.every(r => selectedHashIds.has(r.hashId));
+
+  // Sort results by file path
+  const sortedResults = [...results].sort((a, b) => {
+    const pathA = a.metadata.filePath || a.metadata.privateFilePath || '';
+    const pathB = b.metadata.filePath || b.metadata.privateFilePath || '';
+    return pathA.localeCompare(pathB);
+  });
+
+  return (
+    <div className="file-list">
+      <div className="file-list-header">
+        <span className="file-count">{results.length} files found</span>
+        <button
+          className={`bulk-edit-toggle ${bulkEditMode ? 'active' : ''}`}
+          onClick={() => onBulkEditMode(!bulkEditMode)}
+          title={bulkEditMode ? 'Exit bulk edit mode' : 'Enter bulk edit mode'}
+        >
+          {bulkEditMode ? '✓ Bulk Edit' : 'Bulk Edit'}
+        </button>
+      </div>
+
+      {bulkEditMode && (
+        <div className="file-list-bulk-actions">
+          <button onClick={allSelected ? onClearSelection : onSelectAll} className="select-all-btn">
+            {allSelected ? 'Deselect All' : 'Select All'}
+          </button>
+          {selectedHashIds.size > 0 && (
+            <span className="selection-count">
+              {selectedHashIds.size} selected
+            </span>
+          )}
+        </div>
+      )}
+
+      <div className="file-list-items">
+        {sortedResults.map((result) => {
+          const isSelected = bulkEditMode
+            ? selectedHashIds.has(result.hashId)
+            : selectedHashId === result.hashId;
+
+          return (
+            <div
+              key={result.hashId}
+              className={`file-list-item ${isSelected ? 'selected' : ''}`}
+              onClick={() => {
+                if (bulkEditMode) {
+                  onToggleSelection(result.hashId);
+                } else {
+                  onSelectFile(result.hashId);
+                }
+              }}
+            >
+              {bulkEditMode && (
+                <div className="file-list-item-checkbox">
+                  <input
+                    type="checkbox"
+                    checked={selectedHashIds.has(result.hashId)}
+                    onChange={(e) => {
+                      e.stopPropagation();
+                      onToggleSelection(result.hashId);
+                    }}
+                  />
+                </div>
+              )}
+              <div className="file-list-item-content">
+                <div className="file-list-item-title">
+                  {getDisplayName(result.metadata)}
+                </div>
+                <div className="file-list-item-details">
+                  <span className="file-list-item-type">
+                    {result.metadata.videoType || 'Unknown'}
+                  </span>
+                  <span className="file-list-item-size">
+                    {formatBytes(result.metadata.byteSize)}
+                  </span>
+                </div>
+                <div className="file-list-item-hash">
+                  Hash: {truncateHash(result.hashId)}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

packages/meta-sort-editor/src/components/KVTreeView.css

@@ -0,0 +1,247 @@
+.kv-tree {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+}
+
+.kv-tree-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.kv-tree-header h3 {
+  margin: 0;
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.kv-tree-info {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.kv-tree-refresh {
+  margin-left: auto;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+  background-color: rgba(100, 108, 255, 0.2);
+  color: #646cff;
+  border: 1px solid rgba(100, 108, 255, 0.3);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.kv-tree-refresh:hover:not(:disabled) {
+  background-color: rgba(100, 108, 255, 0.3);
+}
+
+.kv-tree-refresh:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.kv-tree-error {
+  padding: 0.5rem 1rem;
+  background-color: rgba(255, 0, 0, 0.1);
+  color: #ff6b6b;
+  font-size: 0.8rem;
+}
+
+.kv-tree-content {
+  max-height: 400px;
+  overflow-y: auto;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.8rem;
+}
+
+.kv-tree-node {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.kv-tree-node:last-child {
+  border-bottom: none;
+}
+
+.kv-tree-key {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.kv-tree-key:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.kv-tree-key.expanded {
+  background-color: rgba(100, 108, 255, 0.1);
+}
+
+.kv-tree-toggle {
+  width: 1rem;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 0.65rem;
+}
+
+.kv-tree-key-name {
+  flex: 1;
+  color: #88c0d0;
+  word-break: break-all;
+}
+
+.kv-tree-type {
+  padding: 0.1rem 0.4rem;
+  font-size: 0.65rem;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.kv-tree-value {
+  padding: 0.5rem 1rem 0.5rem 2.5rem;
+  background-color: rgba(0, 0, 0, 0.2);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.kv-tree-fields {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.kv-tree-fields tr:hover {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+.kv-field-name {
+  padding: 0.25rem 0.5rem 0.25rem 0;
+  color: #a3be8c;
+  white-space: nowrap;
+  vertical-align: top;
+  width: 1%;
+}
+
+.kv-field-value {
+  padding: 0.25rem 0;
+  color: rgba(255, 255, 255, 0.7);
+  word-break: break-all;
+}
+
+.kv-field-value pre {
+  margin: 0;
+  font-family: inherit;
+  white-space: pre-wrap;
+  font-size: 0.75rem;
+}
+
+.kv-tree-load-more {
+  display: block;
+  width: 100%;
+  padding: 0.75rem;
+  font-size: 0.8rem;
+  background-color: transparent;
+  color: #646cff;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.kv-tree-load-more:hover:not(:disabled) {
+  background-color: rgba(100, 108, 255, 0.1);
+}
+
+.kv-tree-load-more:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.kv-tree-empty {
+  padding: 2rem;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+/* Light mode */
+@media (prefers-color-scheme: light) {
+  .kv-tree {
+    background-color: rgba(0, 0, 0, 0.02);
+    border-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .kv-tree-header {
+    border-bottom-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, 0.03);
+  }
+
+  .kv-tree-header h3 {
+    color: rgba(0, 0, 0, 0.8);
+  }
+
+  .kv-tree-info {
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .kv-tree-error {
+    background-color: rgba(255, 0, 0, 0.08);
+    color: #cc0000;
+  }
+
+  .kv-tree-node {
+    border-bottom-color: rgba(0, 0, 0, 0.05);
+  }
+
+  .kv-tree-key:hover {
+    background-color: rgba(0, 0, 0, 0.03);
+  }
+
+  .kv-tree-key.expanded {
+    background-color: rgba(100, 108, 255, 0.08);
+  }
+
+  .kv-tree-toggle {
+    color: rgba(0, 0, 0, 0.4);
+  }
+
+  .kv-tree-key-name {
+    color: #0077aa;
+  }
+
+  .kv-tree-type {
+    background-color: rgba(0, 0, 0, 0.08);
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .kv-tree-value {
+    background-color: rgba(0, 0, 0, 0.02);
+    border-top-color: rgba(0, 0, 0, 0.05);
+  }
+
+  .kv-tree-fields tr:hover {
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+
+  .kv-field-name {
+    color: #228822;
+  }
+
+  .kv-field-value {
+    color: rgba(0, 0, 0, 0.7);
+  }
+
+  .kv-tree-load-more:hover:not(:disabled) {
+    background-color: rgba(100, 108, 255, 0.08);
+  }
+
+  .kv-tree-empty {
+    color: rgba(0, 0, 0, 0.4);
+  }
+}

packages/meta-sort-editor/src/components/KVTreeView.tsx

@@ -0,0 +1,216 @@
+import { useState, useEffect, useCallback } from 'react';
+import './KVTreeView.css';
+
+interface KeyValue {
+  key: string;
+  type?: string;
+  value?: Record<string, any> | string;
+  expanded?: boolean;
+  loading?: boolean;
+}
+
+interface KVInfo {
+  prefix: string;
+  fileCount: number;
+  keyCount: number;
+  totalSize: number;
+  memoryUsage?: string;
+}
+
+const API_BASE = '/api/kv';
+
+export function KVTreeView() {
+  const [keys, setKeys] = useState<KeyValue[]>([]);
+  const [cursor, setCursor] = useState<string>('0');
+  const [hasMore, setHasMore] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [info, setInfo] = useState<KVInfo | null>(null);
+
+  // Load KV info on mount
+  useEffect(() => {
+    fetch(`${API_BASE}/info`)
+      .then(res => res.json())
+      .then(data => setInfo(data))
+      .catch(err => console.error('Failed to load KV info:', err));
+  }, []);
+
+  // Load initial keys
+  const loadKeys = useCallback(async (reset = false) => {
+    if (loading) return;
+
+    const currentCursor = reset ? '0' : cursor;
+    if (!reset && currentCursor === '0' && keys.length > 0) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch(`${API_BASE}/keys?cursor=${currentCursor}&count=50`);
+      if (!res.ok) throw new Error('Failed to load keys');
+
+      const data = await res.json();
+
+      const newKeys: KeyValue[] = data.keys.map((key: string) => ({
+        key,
+        expanded: false,
+        loading: false
+      }));
+
+      if (reset) {
+        setKeys(newKeys);
+      } else {
+        setKeys(prev => [...prev, ...newKeys]);
+      }
+
+      setCursor(data.cursor);
+      setHasMore(data.hasMore);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [cursor, keys.length, loading]);
+
+  // Load on mount
+  useEffect(() => {
+    loadKeys(true);
+  }, []);
+
+  // Toggle key expansion and load value
+  const toggleKey = async (index: number) => {
+    const key = keys[index];
+
+    if (key.expanded) {
+      // Collapse
+      setKeys(prev => prev.map((k, i) =>
+        i === index ? { ...k, expanded: false } : k
+      ));
+      return;
+    }
+
+    // Expand and load value if not already loaded
+    if (key.value === undefined) {
+      setKeys(prev => prev.map((k, i) =>
+        i === index ? { ...k, loading: true } : k
+      ));
+
+      try {
+        const res = await fetch(`${API_BASE}/key/${encodeURIComponent(key.key)}`);
+        if (!res.ok) throw new Error('Failed to load value');
+
+        const data = await res.json();
+
+        setKeys(prev => prev.map((k, i) =>
+          i === index ? {
+            ...k,
+            type: data.type,
+            value: data.value,
+            expanded: true,
+            loading: false
+          } : k
+        ));
+      } catch (err) {
+        setKeys(prev => prev.map((k, i) =>
+          i === index ? { ...k, loading: false, value: 'Error loading value' } : k
+        ));
+      }
+    } else {
+      setKeys(prev => prev.map((k, i) =>
+        i === index ? { ...k, expanded: true } : k
+      ));
+    }
+  };
+
+  const formatValue = (value: any): string => {
+    if (value === null) return 'null';
+    if (value === undefined) return 'undefined';
+    if (typeof value === 'object') {
+      return JSON.stringify(value, null, 2);
+    }
+    return String(value);
+  };
+
+  const formatSize = (bytes: number): string => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+  };
+
+  return (
+    <div className="kv-tree">
+      <div className="kv-tree-header">
+        <h3>KV Database Browser</h3>
+        {info && (
+          <div className="kv-tree-info">
+            <span>Keys: {info.keyCount}</span>
+            <span>Files: {formatSize(info.totalSize)}</span>
+            {info.memoryUsage && <span>Memory: {info.memoryUsage}</span>}
+          </div>
+        )}
+        <button
+          className="kv-tree-refresh"
+          onClick={() => loadKeys(true)}
+          disabled={loading}
+        >
+          {loading ? 'Loading...' : 'Refresh'}
+        </button>
+      </div>
+
+      {error && <div className="kv-tree-error">{error}</div>}
+
+      <div className="kv-tree-content">
+        {keys.map((item, index) => (
+          <div key={item.key} className="kv-tree-node">
+            <div
+              className={`kv-tree-key ${item.expanded ? 'expanded' : ''}`}
+              onClick={() => toggleKey(index)}
+            >
+              <span className="kv-tree-toggle">
+                {item.loading ? '...' : (item.expanded ? '▼' : '▶')}
+              </span>
+              <span className="kv-tree-key-name">{item.key}</span>
+              {item.type && <span className="kv-tree-type">{item.type}</span>}
+            </div>
+
+            {item.expanded && item.value && (
+              <div className="kv-tree-value">
+                {typeof item.value === 'object' ? (
+                  <table className="kv-tree-fields">
+                    <tbody>
+                      {Object.entries(item.value).map(([field, val]) => (
+                        <tr key={field}>
+                          <td className="kv-field-name">{field}</td>
+                          <td className="kv-field-value">
+                            <pre>{formatValue(val)}</pre>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                ) : (
+                  <pre>{formatValue(item.value)}</pre>
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+
+        {hasMore && (
+          <button
+            className="kv-tree-load-more"
+            onClick={() => loadKeys()}
+            disabled={loading}
+          >
+            {loading ? 'Loading...' : 'Load More'}
+          </button>
+        )}
+
+        {!loading && keys.length === 0 && (
+          <div className="kv-tree-empty">No keys found</div>
+        )}
+      </div>
+    </div>
+  );
+}

packages/meta-sort-editor/src/components/LanguageCombobox.css

@@ -0,0 +1,149 @@
+.language-combobox {
+  position: relative;
+  flex-shrink: 0;
+  width: 180px;
+}
+
+.language-combobox-input {
+  width: 100%;
+  padding: 0.5rem 2rem 0.5rem 0.75rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  font-size: 0.9rem;
+  background: rgba(0, 0, 0, 0.3);
+  color: #fff;
+  cursor: pointer;
+  text-overflow: ellipsis;
+}
+
+.language-combobox-input:focus {
+  outline: none;
+  border-color: #646cff;
+  cursor: text;
+}
+
+.language-combobox.disabled .language-combobox-input {
+  background: rgba(0, 0, 0, 0.2);
+  color: rgba(255, 255, 255, 0.5);
+  cursor: not-allowed;
+}
+
+.language-combobox-arrow {
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0.7rem;
+  color: rgba(255, 255, 255, 0.5);
+  pointer-events: none;
+}
+
+.language-combobox.open .language-combobox-arrow {
+  transform: translateY(-50%) rotate(180deg);
+}
+
+.language-combobox-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 4px;
+  max-height: 250px;
+  overflow-y: auto;
+  background: #1a1a2e;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  z-index: 100;
+}
+
+.language-combobox-option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.language-combobox-option:hover,
+.language-combobox-option.highlighted {
+  background: rgba(100, 108, 255, 0.2);
+}
+
+.language-combobox-option.selected {
+  background: rgba(100, 108, 255, 0.3);
+}
+
+.language-combobox-option.custom {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  color: #a0d8ef;
+}
+
+.lang-option-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.9rem;
+}
+
+.lang-option-code {
+  flex-shrink: 0;
+  margin-left: 0.5rem;
+  padding: 0.15rem 0.4rem;
+  background: rgba(100, 108, 255, 0.2);
+  border-radius: 3px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
+  font-size: 0.75rem;
+  color: #a0d8ef;
+}
+
+.language-combobox-empty {
+  padding: 0.75rem;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 0.85rem;
+}
+
+/* Light theme */
+@media (prefers-color-scheme: light) {
+  .language-combobox-input {
+    background: #fff;
+    color: #333;
+    border-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .language-combobox.disabled .language-combobox-input {
+    background: #f5f5f5;
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .language-combobox-arrow {
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .language-combobox-dropdown {
+    background: #fff;
+    border-color: rgba(0, 0, 0, 0.15);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .language-combobox-option:hover,
+  .language-combobox-option.highlighted {
+    background: rgba(100, 108, 255, 0.1);
+  }
+
+  .language-combobox-option.selected {
+    background: rgba(100, 108, 255, 0.15);
+  }
+
+  .lang-option-code {
+    background: rgba(100, 108, 255, 0.1);
+    color: #4a50c8;
+  }
+
+  .language-combobox-empty {
+    color: rgba(0, 0, 0, 0.5);
+  }
+}

packages/meta-sort-editor/src/components/LanguageCombobox.tsx

@@ -0,0 +1,196 @@
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { iso6393, Language } from 'iso-639-3';
+import './LanguageCombobox.css';
+
+// Build language lookup maps
+const languagesByCode = new Map<string, Language>();
+for (const lang of iso6393) {
+  languagesByCode.set(lang.iso6393, lang);
+}
+
+// Get display name for a language code
+export function getLanguageName(code: string): string {
+  const lang = languagesByCode.get(code);
+  if (lang) {
+    return lang.name;
+  }
+  return code.toUpperCase();
+}
+
+// Format for display: "English (eng)" or "eng" for unknown
+export function formatLanguageOption(code: string): string {
+  const lang = languagesByCode.get(code);
+  if (lang) {
+    return `${lang.name} (${code})`;
+  }
+  return code;
+}
+
+interface LanguageComboboxProps {
+  value: string;
+  onChange: (code: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+export function LanguageCombobox({
+  value,
+  onChange,
+  disabled = false,
+  placeholder = 'Search language...',
+}: LanguageComboboxProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  // Filter languages based on search
+  const filteredLanguages = useMemo(() => {
+    const searchLower = search.toLowerCase().trim();
+    if (!searchLower) {
+      // Show common languages first when no search
+      const common = ['eng', 'jpn', 'zho', 'kor', 'fra', 'deu', 'spa', 'ita', 'por', 'rus'];
+      const commonLangs = common
+        .map(code => languagesByCode.get(code))
+        .filter((l): l is typeof iso6393[0] => l !== undefined);
+      return commonLangs;
+    }
+
+    return iso6393.filter((lang: Language) => {
+      const nameMatch = lang.name.toLowerCase().includes(searchLower);
+      const codeMatch = lang.iso6393.toLowerCase().includes(searchLower);
+      const iso1Match = lang.iso6391 && lang.iso6391.toLowerCase().includes(searchLower);
+      return nameMatch || codeMatch || iso1Match;
+    }).slice(0, 50); // Limit results for performance
+  }, [search]);
+
+  // Check if search is a valid custom 3-letter code
+  const isValidCustomCode = useMemo(() => {
+    const trimmed = search.trim().toLowerCase();
+    return trimmed.length === 3 && /^[a-z]{3}$/.test(trimmed) && !languagesByCode.has(trimmed);
+  }, [search]);
+
+  // Reset highlight when filtered list changes
+  useEffect(() => {
+    setHighlightedIndex(0);
+  }, [filteredLanguages.length]);
+
+  // Scroll highlighted item into view
+  useEffect(() => {
+    if (isOpen && listRef.current) {
+      const highlighted = listRef.current.querySelector('.highlighted');
+      if (highlighted) {
+        highlighted.scrollIntoView({ block: 'nearest' });
+      }
+    }
+  }, [highlightedIndex, isOpen]);
+
+  const handleSelect = (code: string) => {
+    onChange(code);
+    setSearch('');
+    setIsOpen(false);
+    inputRef.current?.blur();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!isOpen) {
+      if (e.key === 'ArrowDown' || e.key === 'Enter') {
+        setIsOpen(true);
+        e.preventDefault();
+      }
+      return;
+    }
+
+    const totalItems = filteredLanguages.length + (isValidCustomCode ? 1 : 0);
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setHighlightedIndex(prev => (prev + 1) % totalItems);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setHighlightedIndex(prev => (prev - 1 + totalItems) % totalItems);
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (isValidCustomCode && highlightedIndex === filteredLanguages.length) {
+          handleSelect(search.trim().toLowerCase());
+        } else if (filteredLanguages[highlightedIndex]) {
+          handleSelect(filteredLanguages[highlightedIndex].iso6393);
+        }
+        break;
+      case 'Escape':
+        setIsOpen(false);
+        setSearch('');
+        inputRef.current?.blur();
+        break;
+    }
+  };
+
+  const displayValue = isOpen ? search : formatLanguageOption(value);
+
+  return (
+    <div className={`language-combobox ${isOpen ? 'open' : ''} ${disabled ? 'disabled' : ''}`}>
+      <input
+        ref={inputRef}
+        type="text"
+        className="language-combobox-input"
+        value={displayValue}
+        onChange={(e) => {
+          setSearch(e.target.value);
+          setIsOpen(true);
+        }}
+        onFocus={() => {
+          setSearch('');
+          setIsOpen(true);
+        }}
+        onBlur={() => {
+          // Delay to allow click on option
+          setTimeout(() => {
+            setIsOpen(false);
+            setSearch('');
+          }, 200);
+        }}
+        onKeyDown={handleKeyDown}
+        disabled={disabled}
+        placeholder={placeholder}
+      />
+      <span className="language-combobox-arrow">▼</span>
+
+      {isOpen && (
+        <div className="language-combobox-dropdown" ref={listRef}>
+          {filteredLanguages.map((lang: Language, index: number) => (
+            <div
+              key={lang.iso6393}
+              className={`language-combobox-option ${index === highlightedIndex ? 'highlighted' : ''} ${lang.iso6393 === value ? 'selected' : ''}`}
+              onMouseDown={() => handleSelect(lang.iso6393)}
+              onMouseEnter={() => setHighlightedIndex(index)}
+            >
+              <span className="lang-option-name">{lang.name}</span>
+              <span className="lang-option-code">{lang.iso6393}</span>
+            </div>
+          ))}
+
+          {isValidCustomCode && (
+            <div
+              className={`language-combobox-option custom ${highlightedIndex === filteredLanguages.length ? 'highlighted' : ''}`}
+              onMouseDown={() => handleSelect(search.trim().toLowerCase())}
+              onMouseEnter={() => setHighlightedIndex(filteredLanguages.length)}
+            >
+              <span className="lang-option-name">Use custom code</span>
+              <span className="lang-option-code">{search.trim().toLowerCase()}</span>
+            </div>
+          )}
+
+          {filteredLanguages.length === 0 && !isValidCustomCode && (
+            <div className="language-combobox-empty">
+              No languages found. Type a 3-letter code to add custom.
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

packages/meta-sort-editor/src/components/MetadataEditor.css

@@ -0,0 +1,438 @@
+.metadata-editor {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  padding: 1.5rem;
+}
+
+.metadata-editor-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.metadata-editor-header h2 {
+  margin: 0;
+  font-size: 1.5rem;
+}
+
+.metadata-editor-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.metadata-editor-actions button.primary {
+  background-color: #646cff;
+  color: white;
+}
+
+.metadata-editor-actions button.primary:hover:not(:disabled) {
+  background-color: #535bf2;
+}
+
+.metadata-editor-actions .download-button {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  background-color: #28a745;
+  color: white;
+  border-radius: 4px;
+  text-decoration: none;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.metadata-editor-actions .download-button:hover {
+  background-color: #218838;
+}
+
+.metadata-editor-message {
+  padding: 1rem;
+  border-radius: 4px;
+  margin-bottom: 1rem;
+}
+
+.metadata-editor-message.success {
+  background-color: rgba(0, 200, 0, 0.1);
+  border: 1px solid rgba(0, 200, 0, 0.3);
+  color: #00ff00;
+}
+
+.metadata-editor-message.error {
+  background-color: rgba(255, 0, 0, 0.1);
+  border: 1px solid rgba(255, 0, 0, 0.3);
+  color: #ff6b6b;
+}
+
+.metadata-editor-hashes {
+  margin-bottom: 1.5rem;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  border-left: 4px solid #888;
+}
+
+.hashes-header {
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.hashes-header h3 {
+  margin: 0;
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.7);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.hashes-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.hash-value {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.hash-value-primary {
+  margin-bottom: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.hash-value-primary .hash-label {
+  color: #4ecdc4;
+}
+
+.hash-value-primary .hash-code {
+  color: #4ecdc4;
+  font-size: 1rem;
+}
+
+.hash-label {
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.4);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.hash-code {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.6);
+  word-break: break-all;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.hash-code:hover {
+  color: #fff;
+}
+
+/* Plugin Chips */
+.metadata-editor-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.plugin-chip {
+  padding: 0.4rem 0.8rem;
+  border-radius: 16px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 2px solid var(--chip-color);
+  color: var(--chip-color);
+  background: transparent;
+}
+
+.plugin-chip:hover {
+  background-color: var(--chip-color);
+  color: white;
+}
+
+.plugin-chip.active {
+  color: white;
+}
+
+/* Plugin Accordion */
+.plugin-accordion {
+  margin-bottom: 0.5rem;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.plugin-accordion-header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  border: none;
+  border-left: 4px solid #646cff;
+  background-color: rgba(255, 255, 255, 0.05);
+  color: inherit;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.plugin-accordion-header:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.plugin-accordion.expanded .plugin-accordion-header {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+.plugin-accordion-title {
+  color: inherit;
+}
+
+.plugin-accordion-icon {
+  font-size: 0.75rem;
+  opacity: 0.6;
+  transition: transform 0.2s ease;
+}
+
+.plugin-accordion-content {
+  padding: 1rem 1.25rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.metadata-editor-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.metadata-section {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-left: 4px solid #646cff;
+  border-radius: 8px;
+  padding: 1.5rem;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.metadata-section-header {
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.metadata-section-header h3 {
+  margin: 0 0 0.25rem 0;
+  font-size: 1.1rem;
+  color: #646cff;
+}
+
+.plugin-description {
+  margin: 0;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.5);
+  font-style: italic;
+}
+
+.metadata-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.metadata-field:last-child {
+  margin-bottom: 0;
+}
+
+.metadata-field label {
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.metadata-field input,
+.metadata-field textarea,
+.metadata-field select {
+  width: 100%;
+}
+
+.metadata-field-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.metadata-field-row:last-child {
+  margin-bottom: 0;
+}
+
+.hash-field {
+  font-family: 'Courier New', monospace;
+  font-size: 0.9em;
+}
+
+.no-hash-info {
+  margin: 0;
+  padding: 1rem;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.5);
+  font-style: italic;
+}
+
+.metadata-editor-loading,
+.metadata-editor-error,
+.metadata-editor-empty {
+  padding: 3rem;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.metadata-editor-error button {
+  margin-top: 1rem;
+}
+
+@media (max-width: 768px) {
+  .metadata-editor-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+
+  .metadata-editor-actions {
+    width: 100%;
+  }
+
+  .metadata-editor-actions button {
+    flex: 1;
+  }
+
+  .metadata-field-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  .metadata-editor {
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+
+  .metadata-editor-header {
+    border-bottom-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .metadata-section {
+    border-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+
+  .metadata-section-header {
+    border-bottom-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .plugin-description {
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .metadata-field label {
+    color: rgba(0, 0, 0, 0.7);
+  }
+
+  .metadata-editor-message.success {
+    background-color: rgba(0, 200, 0, 0.1);
+    border-color: rgba(0, 200, 0, 0.3);
+    color: #008800;
+  }
+
+  .metadata-editor-message.error {
+    background-color: rgba(255, 0, 0, 0.1);
+    border-color: rgba(255, 0, 0, 0.3);
+    color: #cc0000;
+  }
+
+  .metadata-editor-loading,
+  .metadata-editor-error,
+  .metadata-editor-empty {
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .no-hash-info {
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .metadata-editor-hashes {
+    background: rgba(0, 0, 0, 0.05);
+  }
+
+  .hashes-header {
+    border-bottom-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .hashes-header h3 {
+    color: rgba(0, 0, 0, 0.7);
+  }
+
+  .hash-value-primary {
+    border-bottom-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .hash-value-primary .hash-label,
+  .hash-value-primary .hash-code {
+    color: #0a9e94;
+  }
+
+  .hash-label {
+    color: rgba(0, 0, 0, 0.4);
+  }
+
+  .hash-code {
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  .hash-code:hover {
+    color: #000;
+  }
+
+  /* Plugin Chips - Light theme */
+  .plugin-chip {
+    background: transparent;
+  }
+
+  .plugin-chip:hover,
+  .plugin-chip.active {
+    color: white;
+  }
+
+  /* Plugin Accordion - Light theme */
+  .plugin-accordion {
+    background-color: rgba(0, 0, 0, 0.02);
+  }
+
+  .plugin-accordion-header {
+    background-color: rgba(0, 0, 0, 0.03);
+  }
+
+  .plugin-accordion-header:hover {
+    background-color: rgba(0, 0, 0, 0.06);
+  }
+
+  .plugin-accordion.expanded .plugin-accordion-header {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  .plugin-accordion-content {
+    border-top-color: rgba(0, 0, 0, 0.1);
+  }
+}

packages/meta-sort-editor/src/components/MetadataEditor.tsx

@@ -0,0 +1,392 @@
+import { useState, useEffect } from 'react';
+import { FileMetadata, PluginSchema, PluginsResponse } from '../types';
+import { MetadataAPI } from '../api/metadataApi';
+import { DynamicPluginSection } from './DynamicPluginSection';
+import './MetadataEditor.css';
+
+interface PluginAccordionProps {
+  plugin: PluginSchema;
+  metadata: FileMetadata;
+  onChange: (field: string, value: any) => void;
+  isExpanded: boolean;
+  onToggle: () => void;
+}
+
+function PluginAccordion({ plugin, metadata, onChange, isExpanded, onToggle }: PluginAccordionProps) {
+  return (
+    <div className={`plugin-accordion ${isExpanded ? 'expanded' : ''}`}>
+      <button
+        className="plugin-accordion-header"
+        onClick={onToggle}
+        style={{ borderLeftColor: plugin.color || '#646cff' }}
+      >
+        <span className="plugin-accordion-title">{plugin.name}</span>
+        <span className="plugin-accordion-icon">{isExpanded ? '▼' : '▶'}</span>
+      </button>
+      {isExpanded && (
+        <div className="plugin-accordion-content">
+          <DynamicPluginSection
+            plugin={plugin}
+            metadata={metadata}
+            onChange={onChange}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface MetadataEditorProps {
+  hashId: string;
+  onSaved?: () => void;
+}
+
+export function MetadataEditor({ hashId, onSaved }: MetadataEditorProps) {
+  const [metadata, setMetadata] = useState<FileMetadata | null>(null);
+  const [editedMetadata, setEditedMetadata] = useState<FileMetadata | null>(null);
+  const [plugins, setPlugins] = useState<PluginSchema[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+  const [expandedPlugins, setExpandedPlugins] = useState<Set<string>>(new Set());
+
+  // Fetch plugins schema on mount
+  useEffect(() => {
+    fetchPlugins();
+  }, []);
+
+  // Fetch metadata when hashId changes
+  useEffect(() => {
+    loadMetadata();
+  }, [hashId]);
+
+  const fetchPlugins = async () => {
+    try {
+      const response = await fetch('/api/plugins');
+      if (response.ok) {
+        const data: PluginsResponse = await response.json();
+        // Sort by priority (lower = higher priority)
+        const sorted = [...data.plugins].sort((a, b) =>
+          (a.priority ?? 100) - (b.priority ?? 100)
+        );
+        setPlugins(sorted);
+      }
+    } catch (err) {
+      console.error('Failed to fetch plugin schemas:', err);
+    }
+  };
+
+  const loadMetadata = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const data = await MetadataAPI.getMetadata(hashId);
+      setMetadata(data);
+      setEditedMetadata(data);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleFieldChange = (field: string, value: any) => {
+    if (!editedMetadata) return;
+
+    // Handle path-style keys like "stream/duration" or "nfo/title"
+    const parts = field.split('/');
+
+    if (parts.length === 1) {
+      // Simple key
+      setEditedMetadata({
+        ...editedMetadata,
+        [field]: value,
+      });
+    } else {
+      // Nested key - need to update nested structure
+      const newMetadata = { ...editedMetadata };
+      let current: any = newMetadata;
+
+      for (let i = 0; i < parts.length - 1; i++) {
+        if (!current[parts[i]]) {
+          current[parts[i]] = {};
+        } else {
+          current[parts[i]] = { ...current[parts[i]] };
+        }
+        current = current[parts[i]];
+      }
+
+      current[parts[parts.length - 1]] = value;
+      setEditedMetadata(newMetadata);
+    }
+  };
+
+  const handleSave = async () => {
+    if (!editedMetadata) return;
+
+    try {
+      setIsSaving(true);
+      setError(null);
+      setSuccessMessage(null);
+
+      await MetadataAPI.updateMetadata(hashId, editedMetadata);
+      setMetadata(editedMetadata);
+      setSuccessMessage('Metadata saved successfully!');
+
+      if (onSaved) {
+        onSaved();
+      }
+
+      // Clear success message after 3 seconds
+      setTimeout(() => setSuccessMessage(null), 3000);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleReset = () => {
+    setEditedMetadata(metadata);
+    setError(null);
+    setSuccessMessage(null);
+  };
+
+  const togglePlugin = (pluginId: string) => {
+    setExpandedPlugins(prev => {
+      const next = new Set(prev);
+      if (next.has(pluginId)) {
+        next.delete(pluginId);
+      } else {
+        next.add(pluginId);
+      }
+      return next;
+    });
+  };
+
+  const scrollToPlugin = (pluginId: string) => {
+    // Expand the plugin if not already expanded
+    if (!expandedPlugins.has(pluginId)) {
+      setExpandedPlugins(prev => new Set(prev).add(pluginId));
+    }
+    // Scroll to the plugin after a short delay to allow expansion
+    setTimeout(() => {
+      const element = document.getElementById(`plugin-${pluginId}`);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    }, 100);
+  };
+
+  if (isLoading) {
+    return <div className="metadata-editor-loading">Loading metadata...</div>;
+  }
+
+  if (error && !metadata) {
+    return (
+      <div className="metadata-editor-error">
+        <p>Error loading metadata: {error}</p>
+        <button onClick={loadMetadata}>Retry</button>
+      </div>
+    );
+  }
+
+  if (!metadata || !editedMetadata) {
+    return <div className="metadata-editor-empty">No metadata available</div>;
+  }
+
+  const hasChanges = JSON.stringify(metadata) !== JSON.stringify(editedMetadata);
+
+  // Filter plugins that have data
+  const pluginsWithData = plugins.filter(plugin => {
+    if (!plugin.metadataSchema) return false;
+    return hasPluginData(plugin, editedMetadata);
+  });
+
+  // Get file path for download
+  const filePath = editedMetadata?.filePath as string | undefined;
+  const downloadUrl = filePath ? `/api/file/download?path=${encodeURIComponent(filePath)}` : null;
+
+  return (
+    <div className="metadata-editor">
+      <div className="metadata-editor-header">
+        <h2>Edit Metadata</h2>
+        <div className="metadata-editor-actions">
+          {downloadUrl && (
+            <a
+              href={downloadUrl}
+              className="download-button"
+              title={`Download: ${filePath}`}
+              download
+            >
+              ⬇ Download
+            </a>
+          )}
+          {hasChanges && (
+            <button onClick={handleReset} disabled={isSaving}>
+              Reset
+            </button>
+          )}
+          <button
+            onClick={handleSave}
+            disabled={isSaving || !hasChanges}
+            className="primary"
+          >
+            {isSaving ? 'Saving...' : 'Save Changes'}
+          </button>
+        </div>
+      </div>
+
+      {successMessage && (
+        <div className="metadata-editor-message success">{successMessage}</div>
+      )}
+      {error && <div className="metadata-editor-message error">{error}</div>}
+
+      <div className="metadata-editor-hashes">
+        <div className="hashes-header">
+          <h3>Content Identifiers</h3>
+        </div>
+        <div className="hashes-grid">
+          <HashValue label="midhash256" value={hashId} primary />
+          {getHashValues(editedMetadata).map(({ key, label, value }) => (
+            <HashValue key={key} label={label} value={value} />
+          ))}
+        </div>
+      </div>
+
+      {pluginsWithData.length > 0 && (
+        <div className="metadata-editor-chips">
+          {pluginsWithData.map((plugin) => (
+            <button
+              key={plugin.id}
+              className={`plugin-chip ${expandedPlugins.has(plugin.id) ? 'active' : ''}`}
+              style={{
+                '--chip-color': plugin.color || '#646cff',
+                backgroundColor: expandedPlugins.has(plugin.id) ? plugin.color || '#646cff' : 'transparent'
+              } as React.CSSProperties}
+              onClick={() => scrollToPlugin(plugin.id)}
+            >
+              {plugin.name}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div className="metadata-editor-form">
+        {pluginsWithData.length === 0 ? (
+          <div className="metadata-editor-empty">
+            No metadata found for this file
+          </div>
+        ) : (
+          pluginsWithData.map((plugin) => (
+            <div key={plugin.id} id={`plugin-${plugin.id}`}>
+              <PluginAccordion
+                plugin={plugin}
+                metadata={editedMetadata}
+                onChange={handleFieldChange}
+                isExpanded={expandedPlugins.has(plugin.id)}
+                onToggle={() => togglePlugin(plugin.id)}
+              />
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Check if a plugin has any data in the metadata
+ */
+function hasPluginData(plugin: PluginSchema, metadata: FileMetadata): boolean {
+  const schema = plugin.metadataSchema;
+  if (!schema) return false;
+
+  for (const fieldKey of Object.keys(schema)) {
+    const fieldSchema = schema[fieldKey];
+
+    // For JSON type with pattern, check if any matching keys exist
+    if (fieldSchema.type === 'json' && fieldSchema.pattern) {
+      const patternPrefix = fieldSchema.pattern.replace(/\{n\}.*$/, '').replace(/\/$/, '');
+      if (hasKeyWithPrefix(metadata, patternPrefix)) {
+        return true;
+      }
+      continue;
+    }
+
+    // For regular fields, check if value exists
+    if (getNestedValue(metadata, fieldKey) !== undefined) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function getNestedValue(obj: any, path: string): any {
+  const parts = path.split('/');
+  let value = obj;
+  for (const part of parts) {
+    if (value === undefined || value === null) return undefined;
+    value = value[part];
+  }
+  return value;
+}
+
+function hasKeyWithPrefix(obj: any, prefix: string, currentPath: string = ''): boolean {
+  if (!obj || typeof obj !== 'object') return false;
+
+  for (const key of Object.keys(obj)) {
+    const newPath = currentPath ? `${currentPath}/${key}` : key;
+    if (newPath.startsWith(prefix)) {
+      return true;
+    }
+    if (typeof obj[key] === 'object' && obj[key] !== null) {
+      if (hasKeyWithPrefix(obj[key], prefix, newPath)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+/**
+ * Extract all hash values (cid_*) from metadata
+ */
+function getHashValues(metadata: FileMetadata): { key: string; label: string; value: string }[] {
+  const hashOrder = [
+    { key: 'cid_sha2-256', label: 'SHA-256' },
+    { key: 'cid_sha3-256', label: 'SHA3-256' },
+    { key: 'cid_sha3-384', label: 'SHA3-384' },
+    { key: 'cid_sha1', label: 'SHA-1' },
+    { key: 'cid_md5', label: 'MD5' },
+    { key: 'cid_crc32', label: 'CRC32' },
+    { key: 'cid_btih_v2', label: 'BitTorrent v2' },
+  ];
+
+  return hashOrder
+    .filter(({ key }) => (metadata as any)[key])
+    .map(({ key, label }) => ({
+      key,
+      label,
+      value: (metadata as any)[key],
+    }));
+}
+
+/**
+ * Display a single hash value with copy functionality
+ */
+function HashValue({ label, value, primary }: { label: string; value: string; primary?: boolean }) {
+  const handleCopy = () => {
+    navigator.clipboard.writeText(value);
+  };
+
+  return (
+    <div className={`hash-value ${primary ? 'hash-value-primary' : ''}`}>
+      <span className="hash-label">{label}</span>
+      <code className="hash-code" onClick={handleCopy} title="Click to copy">
+        {value}
+      </code>
+    </div>
+  );
+}

packages/meta-sort-editor/src/components/SearchBar.css

@@ -0,0 +1,52 @@
+.search-bar {
+  width: 100%;
+  padding: 1.5rem;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  margin-bottom: 1rem;
+}
+
+.search-controls {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
+}
+
+.search-input {
+  flex: 1;
+  min-width: 200px;
+}
+
+.search-input.unified-search {
+  font-size: 1rem;
+}
+
+.search-bar button {
+  flex: 0 0 auto;
+  min-width: 100px;
+}
+
+.search-hint {
+  margin: 0;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.5);
+  font-style: italic;
+}
+
+@media (max-width: 768px) {
+  .search-controls {
+    flex-direction: column;
+  }
+
+  .search-input,
+  .search-bar button {
+    width: 100%;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  .search-hint {
+    color: rgba(0, 0, 0, 0.5);
+  }
+}

packages/meta-sort-editor/src/components/SearchBar.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import './SearchBar.css';
+
+interface SearchBarProps {
+  onSearch: (query: string) => void;
+  isLoading: boolean;
+}
+
+export function SearchBar({ onSearch, isLoading }: SearchBarProps) {
+  const [query, setQuery] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (query.trim()) {
+      onSearch(query.trim());
+    }
+  };
+
+  return (
+    <form className="search-bar" onSubmit={handleSubmit}>
+      <div className="search-controls">
+        <input
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Search by title, filename, filepath, or hash ID..."
+          className="search-input unified-search"
+          disabled={isLoading}
+        />
+
+        <button type="submit" disabled={isLoading || !query.trim()}>
+          {isLoading ? 'Searching...' : 'Search'}
+        </button>
+      </div>
+      <p className="search-hint">
+        Search across all fields: title, filename, file path, and hash ID
+      </p>
+    </form>
+  );
+}

packages/meta-sort-editor/src/index.css

@@ -0,0 +1,90 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+input,
+textarea,
+select {
+  border-radius: 4px;
+  border: 1px solid #444;
+  padding: 0.5em;
+  font-size: 1em;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  color: rgba(255, 255, 255, 0.87);
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: #646cff;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+
+  input,
+  textarea,
+  select {
+    background-color: #f9f9f9;
+    color: #213547;
+    border-color: #ddd;
+  }
+}

packages/meta-sort-editor/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import App from './App.tsx';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

packages/meta-sort-editor/src/types/index.ts

@@ -0,0 +1,155 @@
+// API Response Types
+export interface FileMetadata {
+  // File info
+  fileName?: string;
+  extension?: string;
+  byteSize?: number;
+  mimeType?: string;
+  fileType?: string;
+
+  // Filename parsing
+  title?: string;
+  titles?: string[];
+  originaltitle?: string;
+  showtitle?: string;
+  season?: number;
+  episode?: number;
+  movieYear?: number;
+  videoType?: string;
+
+  // General media metadata
+  year?: number;
+  imdbid?: string;
+  tmdbid?: string;
+  anidbid?: string;
+  premiered?: string;
+  genre?: string[];
+  releasedate?: string;
+  plot?: string;
+  director?: string;
+  rating?: number;
+  runtime?: number;
+  studio?: string;
+  art?: any;
+  actor?: any[];
+  aired?: string;
+  customrating?: string;
+  dateadded?: string;
+  sorttitle?: string;
+  mpaa?: string;
+  aspectratio?: string;
+  collectionnumber?: number;
+  criticrating?: number;
+
+  // Hashes
+  cid_crc32?: string;
+  cid_md5?: string;
+  cid_sha1?: string;
+  'cid_sha2-256'?: string;
+  'cid_sha3-256'?: string;
+  cid_sha3_384?: string;
+
+  // Video info
+  video?: {
+    codec?: string;
+    width?: number;
+    height?: number;
+    bitrate?: number;
+    fps?: number;
+  };
+
+  // Audio info
+  audio?: Array<{
+    codec?: string;
+    channels?: number;
+    language?: string;
+    bitrate?: number;
+  }>;
+
+  // Subtitles
+  subtitles?: Array<{
+    language?: string;
+    codec?: string;
+  }>;
+
+  // Other
+  extra?: any;
+  anime?: any;
+  fileinfo?: any;
+  trackers?: string[];
+
+  // Allow any additional properties
+  [key: string]: any;
+}
+
+export interface SearchResult {
+  hashId: string;
+  metadata: FileMetadata;
+  score?: number;
+}
+
+export interface SearchResponse {
+  results: SearchResult[];
+  count: number;
+  total?: number;
+}
+
+export interface UpdateResult {
+  status: string;
+  hashId: string;
+  message?: string;
+  error?: string;
+}
+
+export interface BatchUpdateResponse {
+  status: string;
+  total: number;
+  success: number;
+  errors: number;
+  results: Array<{
+    hashId: string;
+    status: string;
+    error?: string;
+  }>;
+}
+
+// Plugin Schema Types
+export type SchemaFieldType = 'string' | 'number' | 'boolean' | 'select' | 'text' | 'array' | 'json' | 'cid' | 'languageString';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface SchemaField {
+  label: string;
+  type?: SchemaFieldType;
+  readonly?: boolean;
+  indexed?: boolean;
+  options?: SelectOption[];
+  hint?: string;
+  link?: string;
+  pattern?: string;
+  min?: number;
+  max?: number;
+  placeholder?: string;
+}
+
+export interface PluginSchema {
+  id: string;
+  name: string;
+  version: string;
+  description?: string;
+  priority?: number;
+  color?: string;
+  dependencies: string[];
+  active: boolean;
+  metadataSchema?: Record<string, SchemaField>;
+}
+
+export interface PluginsResponse {
+  plugins: PluginSchema[];
+  executionOrder: string[];
+  activeCount: number;
+  totalCount: number;
+}

packages/meta-sort-editor/src/utils/formatting.ts

@@ -0,0 +1,53 @@
+/**
+ * Format bytes to human readable format
+ */
+export function formatBytes(bytes: number | undefined): string {
+  if (!bytes) return 'N/A';
+
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  if (bytes === 0) return '0 B';
+
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return Math.round((bytes / Math.pow(1024, i)) * 100) / 100 + ' ' + sizes[i];
+}
+
+/**
+ * Format duration in seconds to HH:MM:SS
+ */
+export function formatDuration(seconds: number | undefined): string {
+  if (!seconds) return 'N/A';
+
+  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')}`;
+}
+
+/**
+ * Truncate hash to first and last 6 characters
+ */
+export function truncateHash(hash: string | undefined): string {
+  if (!hash) return 'N/A';
+  if (hash.length <= 16) return hash;
+  return `${hash.slice(0, 6)}...${hash.slice(-6)}`;
+}
+
+/**
+ * Get display name for a file from metadata
+ */
+export function getDisplayName(metadata: any): string {
+  if (metadata.title) {
+    if (metadata.season && metadata.episode) {
+      return `${metadata.title} S${String(metadata.season).padStart(2, '0')}E${String(metadata.episode).padStart(2, '0')}`;
+    }
+    if (metadata.movieYear) {
+      return `${metadata.title} (${metadata.movieYear})`;
+    }
+    return metadata.title;
+  }
+  return metadata.fileName || 'Unknown';
+}

packages/meta-sort-editor/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />