Initial commit: Orchard content-addressable storage system

- Go server with Gin framework
- PostgreSQL for metadata storage
- MinIO/S3 for artifact storage with SHA256 content addressing
- REST API for grove/tree/fruit operations
- Web UI for managing artifacts
- Docker Compose setup for local development

internal/api/static/app.js

@@ -0,0 +1,573 @@
+// Orchard Web UI
+
+const API_BASE = '/api/v1';
+
+// State
+let currentGrove = null;
+let currentTree = null;
+
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+    setupNavigation();
+    loadGroves();
+});
+
+// Navigation
+function setupNavigation() {
+    document.querySelectorAll('.nav-link').forEach(link => {
+        link.addEventListener('click', (e) => {
+            e.preventDefault();
+            const view = link.dataset.view;
+            showView(view);
+
+            document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
+            link.classList.add('active');
+        });
+    });
+}
+
+function showView(viewName) {
+    document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+    document.getElementById(`${viewName}-view`).classList.add('active');
+
+    // Load data for view
+    if (viewName === 'groves') {
+        loadGroves();
+    } else if (viewName === 'upload') {
+        loadGrovesForUpload();
+    }
+}
+
+// Groves
+async function loadGroves() {
+    const container = document.getElementById('groves-list');
+    container.innerHTML = '<div class="loading">Loading groves...</div>';
+
+    try {
+        const response = await fetch(`${API_BASE}/groves`);
+        const groves = await response.json();
+
+        if (!groves || groves.length === 0) {
+            container.innerHTML = `
+                <div class="empty-state">
+                    <h3>No groves yet</h3>
+                    <p>Create your first grove to get started</p>
+                </div>
+            `;
+            return;
+        }
+
+        container.innerHTML = groves.map(grove => `
+            <div class="grove-card" onclick="viewGrove('${grove.name}')">
+                <h3>
+                    <span>&#127795;</span>
+                    ${escapeHtml(grove.name)}
+                    <span class="badge ${grove.is_public ? 'badge-public' : 'badge-private'}">
+                        ${grove.is_public ? 'Public' : 'Private'}
+                    </span>
+                </h3>
+                <p>${escapeHtml(grove.description || 'No description')}</p>
+                <div class="meta">
+                    Created ${formatDate(grove.created_at)}
+                </div>
+            </div>
+        `).join('');
+    } catch (error) {
+        container.innerHTML = `<div class="empty-state"><p>Error loading groves: ${error.message}</p></div>`;
+    }
+}
+
+async function viewGrove(groveName) {
+    currentGrove = groveName;
+    document.getElementById('grove-detail-title').textContent = groveName;
+
+    // Load grove info
+    try {
+        const response = await fetch(`${API_BASE}/groves/${groveName}`);
+        const grove = await response.json();
+
+        document.getElementById('grove-info').innerHTML = `
+            <div class="info-grid">
+                <div class="info-item">
+                    <label>Name</label>
+                    <span>${escapeHtml(grove.name)}</span>
+                </div>
+                <div class="info-item">
+                    <label>Visibility</label>
+                    <span class="badge ${grove.is_public ? 'badge-public' : 'badge-private'}">
+                        ${grove.is_public ? 'Public' : 'Private'}
+                    </span>
+                </div>
+                <div class="info-item">
+                    <label>Created</label>
+                    <span>${formatDate(grove.created_at)}</span>
+                </div>
+                <div class="info-item">
+                    <label>Description</label>
+                    <span>${escapeHtml(grove.description || 'No description')}</span>
+                </div>
+            </div>
+        `;
+    } catch (error) {
+        console.error('Error loading grove:', error);
+    }
+
+    // Load trees
+    await loadTrees(groveName);
+
+    // Show view
+    document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+    document.getElementById('grove-detail-view').classList.add('active');
+}
+
+async function loadTrees(groveName) {
+    const container = document.getElementById('trees-list');
+    container.innerHTML = '<div class="loading">Loading trees...</div>';
+
+    try {
+        const response = await fetch(`${API_BASE}/grove/${groveName}/trees`);
+        const trees = await response.json();
+
+        if (!trees || trees.length === 0) {
+            container.innerHTML = `
+                <div class="empty-state">
+                    <h3>No trees yet</h3>
+                    <p>Create a tree to store artifacts</p>
+                </div>
+            `;
+            return;
+        }
+
+        container.innerHTML = trees.map(tree => `
+            <div class="tree-card" onclick="viewTree('${groveName}', '${tree.name}')">
+                <h3>
+                    <span>&#127794;</span>
+                    ${escapeHtml(tree.name)}
+                </h3>
+                <p>${escapeHtml(tree.description || 'No description')}</p>
+                <div class="meta">
+                    Created ${formatDate(tree.created_at)}
+                </div>
+            </div>
+        `).join('');
+    } catch (error) {
+        container.innerHTML = `<div class="empty-state"><p>Error loading trees: ${error.message}</p></div>`;
+    }
+}
+
+async function viewTree(groveName, treeName) {
+    currentGrove = groveName;
+    currentTree = treeName;
+
+    document.getElementById('tree-detail-title').textContent = `${groveName} / ${treeName}`;
+
+    document.getElementById('tree-info').innerHTML = `
+        <div class="info-grid">
+            <div class="info-item">
+                <label>Grove</label>
+                <span>${escapeHtml(groveName)}</span>
+            </div>
+            <div class="info-item">
+                <label>Tree</label>
+                <span>${escapeHtml(treeName)}</span>
+            </div>
+        </div>
+    `;
+
+    // Load grafts
+    await loadGrafts(groveName, treeName);
+
+    // Show view
+    document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+    document.getElementById('tree-detail-view').classList.add('active');
+}
+
+async function loadGrafts(groveName, treeName) {
+    const container = document.getElementById('grafts-list');
+    container.innerHTML = '<div class="loading">Loading versions...</div>';
+
+    try {
+        const response = await fetch(`${API_BASE}/grove/${groveName}/${treeName}/grafts`);
+        const grafts = await response.json();
+
+        if (!grafts || grafts.length === 0) {
+            container.innerHTML = `
+                <div class="empty-state">
+                    <h3>No versions yet</h3>
+                    <p>Upload an artifact to create the first version</p>
+                </div>
+            `;
+            return;
+        }
+
+        container.innerHTML = `
+            <table>
+                <thead>
+                    <tr>
+                        <th>Tag</th>
+                        <th>Fruit ID</th>
+                        <th>Created</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    ${grafts.map(graft => `
+                        <tr>
+                            <td><strong>${escapeHtml(graft.name)}</strong></td>
+                            <td>
+                                <span class="hash hash-short" onclick="copyToClipboard('${graft.fruit_id}')" title="Click to copy">
+                                    ${graft.fruit_id.substring(0, 16)}...
+                                </span>
+                            </td>
+                            <td>${formatDate(graft.created_at)}</td>
+                            <td>
+                                <a href="/api/v1/grove/${groveName}/${treeName}/+/${graft.name}"
+                                   class="btn btn-secondary" download>
+                                    Download
+                                </a>
+                            </td>
+                        </tr>
+                    `).join('')}
+                </tbody>
+            </table>
+        `;
+    } catch (error) {
+        container.innerHTML = `<div class="empty-state"><p>Error loading versions: ${error.message}</p></div>`;
+    }
+}
+
+function backToGrove() {
+    if (currentGrove) {
+        viewGrove(currentGrove);
+    } else {
+        showView('groves');
+    }
+}
+
+// Create Grove
+function showCreateGroveModal() {
+    document.getElementById('create-grove-modal').classList.remove('hidden');
+    document.getElementById('grove-name').focus();
+}
+
+async function createGrove(e) {
+    e.preventDefault();
+
+    const name = document.getElementById('grove-name').value;
+    const description = document.getElementById('grove-description').value;
+    const isPublic = document.getElementById('grove-public').checked;
+
+    try {
+        const response = await fetch(`${API_BASE}/groves`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ name, description, is_public: isPublic })
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to create grove');
+        }
+
+        showToast('Grove created successfully!', 'success');
+        closeModals();
+        loadGroves();
+
+        // Reset form
+        document.getElementById('grove-name').value = '';
+        document.getElementById('grove-description').value = '';
+        document.getElementById('grove-public').checked = true;
+    } catch (error) {
+        showToast(error.message, 'error');
+    }
+}
+
+// Create Tree
+function showCreateTreeModal() {
+    document.getElementById('create-tree-modal').classList.remove('hidden');
+    document.getElementById('tree-name').focus();
+}
+
+async function createTree(e) {
+    e.preventDefault();
+
+    const name = document.getElementById('tree-name').value;
+    const description = document.getElementById('tree-description').value;
+
+    try {
+        const response = await fetch(`${API_BASE}/grove/${currentGrove}/trees`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ name, description })
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to create tree');
+        }
+
+        showToast('Tree created successfully!', 'success');
+        closeModals();
+        loadTrees(currentGrove);
+
+        // Reset form
+        document.getElementById('tree-name').value = '';
+        document.getElementById('tree-description').value = '';
+    } catch (error) {
+        showToast(error.message, 'error');
+    }
+}
+
+// Upload
+async function loadGrovesForUpload() {
+    const select = document.getElementById('upload-grove');
+    select.innerHTML = '<option value="">Loading...</option>';
+
+    try {
+        const response = await fetch(`${API_BASE}/groves`);
+        const groves = await response.json();
+
+        select.innerHTML = '<option value="">Select grove...</option>' +
+            (groves || []).map(g => `<option value="${g.name}">${g.name}</option>`).join('');
+    } catch (error) {
+        select.innerHTML = '<option value="">Error loading groves</option>';
+    }
+}
+
+async function loadTreesForUpload() {
+    const groveName = document.getElementById('upload-grove').value;
+    const select = document.getElementById('upload-tree');
+
+    if (!groveName) {
+        select.innerHTML = '<option value="">Select tree...</option>';
+        return;
+    }
+
+    select.innerHTML = '<option value="">Loading...</option>';
+
+    try {
+        const response = await fetch(`${API_BASE}/grove/${groveName}/trees`);
+        const trees = await response.json();
+
+        select.innerHTML = '<option value="">Select tree...</option>' +
+            (trees || []).map(t => `<option value="${t.name}">${t.name}</option>`).join('');
+    } catch (error) {
+        select.innerHTML = '<option value="">Error loading trees</option>';
+    }
+}
+
+function updateFileName() {
+    const input = document.getElementById('upload-file');
+    const display = document.getElementById('file-name');
+    display.textContent = input.files[0]?.name || '';
+}
+
+async function uploadArtifact(e) {
+    e.preventDefault();
+
+    const grove = document.getElementById('upload-grove').value;
+    const tree = document.getElementById('upload-tree').value;
+    const file = document.getElementById('upload-file').files[0];
+    const tag = document.getElementById('upload-tag').value;
+
+    const formData = new FormData();
+    formData.append('file', file);
+    if (tag) formData.append('tag', tag);
+
+    const resultDiv = document.getElementById('upload-result');
+    resultDiv.innerHTML = '<div class="loading">Uploading...</div>';
+    resultDiv.classList.remove('hidden', 'success', 'error');
+
+    try {
+        const response = await fetch(`${API_BASE}/grove/${grove}/${tree}/cultivate`, {
+            method: 'POST',
+            body: formData
+        });
+
+        const result = await response.json();
+
+        if (!response.ok) {
+            throw new Error(result.error || 'Upload failed');
+        }
+
+        resultDiv.classList.add('success');
+        resultDiv.innerHTML = `
+            <h3>Upload Successful!</h3>
+            <dl>
+                <dt>Fruit ID</dt>
+                <dd class="hash">${result.fruit_id}</dd>
+                <dt>Size</dt>
+                <dd>${formatBytes(result.size)}</dd>
+                <dt>Grove</dt>
+                <dd>${escapeHtml(result.grove)}</dd>
+                <dt>Tree</dt>
+                <dd>${escapeHtml(result.tree)}</dd>
+                ${result.tag ? `<dt>Tag</dt><dd>${escapeHtml(result.tag)}</dd>` : ''}
+            </dl>
+            <div class="actions">
+                <a href="/api/v1/grove/${grove}/${tree}/+/${result.tag || 'fruit:' + result.fruit_id}"
+                   class="btn btn-primary" download>
+                    Download Artifact
+                </a>
+            </div>
+        `;
+
+        showToast('Artifact uploaded successfully!', 'success');
+    } catch (error) {
+        resultDiv.classList.add('error');
+        resultDiv.innerHTML = `<h3>Upload Failed</h3><p>${escapeHtml(error.message)}</p>`;
+        showToast(error.message, 'error');
+    }
+}
+
+async function uploadToTree(e) {
+    e.preventDefault();
+
+    const file = document.getElementById('tree-upload-file').files[0];
+    const tag = document.getElementById('tree-upload-tag').value;
+
+    const formData = new FormData();
+    formData.append('file', file);
+    if (tag) formData.append('tag', tag);
+
+    try {
+        const response = await fetch(`${API_BASE}/grove/${currentGrove}/${currentTree}/cultivate`, {
+            method: 'POST',
+            body: formData
+        });
+
+        const result = await response.json();
+
+        if (!response.ok) {
+            throw new Error(result.error || 'Upload failed');
+        }
+
+        showToast('Artifact uploaded successfully!', 'success');
+
+        // Reload grafts
+        loadGrafts(currentGrove, currentTree);
+
+        // Reset form
+        document.getElementById('tree-upload-file').value = '';
+        document.getElementById('tree-upload-tag').value = '';
+    } catch (error) {
+        showToast(error.message, 'error');
+    }
+}
+
+// Search
+function handleSearchKeyup(e) {
+    if (e.key === 'Enter') {
+        searchFruit();
+    }
+}
+
+async function searchFruit() {
+    const fruitId = document.getElementById('search-input').value.trim();
+    const resultDiv = document.getElementById('search-result');
+
+    if (!fruitId) {
+        showToast('Please enter a fruit ID', 'error');
+        return;
+    }
+
+    resultDiv.innerHTML = '<div class="loading">Searching...</div>';
+    resultDiv.classList.remove('hidden', 'success', 'error');
+
+    try {
+        const response = await fetch(`${API_BASE}/fruit/${fruitId}`);
+        const result = await response.json();
+
+        if (!response.ok) {
+            throw new Error(result.error || 'Fruit not found');
+        }
+
+        resultDiv.classList.add('success');
+        resultDiv.innerHTML = `
+            <h3>Fruit Found</h3>
+            <dl>
+                <dt>Fruit ID</dt>
+                <dd class="hash">${result.id}</dd>
+                <dt>Original Name</dt>
+                <dd>${escapeHtml(result.original_name || 'Unknown')}</dd>
+                <dt>Size</dt>
+                <dd>${formatBytes(result.size)}</dd>
+                <dt>Content Type</dt>
+                <dd>${escapeHtml(result.content_type || 'Unknown')}</dd>
+                <dt>Created</dt>
+                <dd>${formatDate(result.created_at)}</dd>
+                <dt>Reference Count</dt>
+                <dd>${result.ref_count}</dd>
+            </dl>
+        `;
+    } catch (error) {
+        resultDiv.classList.add('error');
+        resultDiv.innerHTML = `<h3>Not Found</h3><p>${escapeHtml(error.message)}</p>`;
+    }
+}
+
+// Modals
+function closeModals() {
+    document.querySelectorAll('.modal').forEach(m => m.classList.add('hidden'));
+}
+
+// Close modal on outside click
+document.addEventListener('click', (e) => {
+    if (e.target.classList.contains('modal')) {
+        closeModals();
+    }
+});
+
+// Close modal on Escape
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+        closeModals();
+    }
+});
+
+// Toast notifications
+function showToast(message, type = 'info') {
+    const container = document.getElementById('toast-container');
+    const toast = document.createElement('div');
+    toast.className = `toast ${type}`;
+    toast.textContent = message;
+    container.appendChild(toast);
+
+    setTimeout(() => {
+        toast.remove();
+    }, 3000);
+}
+
+// Utilities
+function escapeHtml(str) {
+    if (!str) return '';
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+}
+
+function formatDate(dateStr) {
+    if (!dateStr) return 'Unknown';
+    const date = new Date(dateStr);
+    return date.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+}
+
+function formatBytes(bytes) {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+function copyToClipboard(text) {
+    navigator.clipboard.writeText(text).then(() => {
+        showToast('Copied to clipboard!', 'success');
+    });
+}

internal/api/static/index.html

@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Orchard - Content Addressable Storage</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <nav class="navbar">
+        <div class="nav-brand">
+            <span class="logo">&#127822;</span> Orchard
+        </div>
+        <div class="nav-links">
+            <a href="#" class="nav-link active" data-view="groves">Groves</a>
+            <a href="#" class="nav-link" data-view="upload">Upload</a>
+            <a href="#" class="nav-link" data-view="search">Search</a>
+        </div>
+    </nav>
+
+    <main class="container">
+        <!-- Groves View -->
+        <div id="groves-view" class="view active">
+            <div class="view-header">
+                <h1>Groves</h1>
+                <button class="btn btn-primary" onclick="showCreateGroveModal()">+ New Grove</button>
+            </div>
+            <div id="groves-list" class="card-grid">
+                <div class="loading">Loading groves...</div>
+            </div>
+        </div>
+
+        <!-- Grove Detail View -->
+        <div id="grove-detail-view" class="view">
+            <div class="view-header">
+                <button class="btn btn-secondary" onclick="showView('groves')">&larr; Back</button>
+                <h1 id="grove-detail-title">Grove</h1>
+            </div>
+            <div class="grove-info" id="grove-info"></div>
+            <div class="section">
+                <div class="section-header">
+                    <h2>Trees</h2>
+                    <button class="btn btn-primary" onclick="showCreateTreeModal()">+ New Tree</button>
+                </div>
+                <div id="trees-list" class="card-grid"></div>
+            </div>
+        </div>
+
+        <!-- Tree Detail View -->
+        <div id="tree-detail-view" class="view">
+            <div class="view-header">
+                <button class="btn btn-secondary" onclick="backToGrove()">&larr; Back</button>
+                <h1 id="tree-detail-title">Tree</h1>
+            </div>
+            <div class="tree-info" id="tree-info"></div>
+            <div class="section">
+                <div class="section-header">
+                    <h2>Versions (Grafts)</h2>
+                </div>
+                <div id="grafts-list" class="table-container"></div>
+            </div>
+            <div class="section">
+                <h2>Upload Artifact</h2>
+                <form id="tree-upload-form" class="upload-form" onsubmit="uploadToTree(event)">
+                    <div class="form-group">
+                        <label>File</label>
+                        <input type="file" id="tree-upload-file" required>
+                    </div>
+                    <div class="form-group">
+                        <label>Tag (optional)</label>
+                        <input type="text" id="tree-upload-tag" placeholder="e.g., v1.0.0, latest">
+                    </div>
+                    <button type="submit" class="btn btn-primary">Upload</button>
+                </form>
+            </div>
+        </div>
+
+        <!-- Upload View -->
+        <div id="upload-view" class="view">
+            <h1>Upload Artifact</h1>
+            <form id="upload-form" class="upload-form card" onsubmit="uploadArtifact(event)">
+                <div class="form-row">
+                    <div class="form-group">
+                        <label>Grove</label>
+                        <select id="upload-grove" required onchange="loadTreesForUpload()">
+                            <option value="">Select grove...</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Tree</label>
+                        <select id="upload-tree" required>
+                            <option value="">Select tree...</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label>File</label>
+                    <div class="file-drop" id="file-drop">
+                        <input type="file" id="upload-file" required onchange="updateFileName()">
+                        <p>Drop file here or click to browse</p>
+                        <span id="file-name"></span>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label>Tag (optional)</label>
+                    <input type="text" id="upload-tag" placeholder="e.g., v1.0.0, latest, stable">
+                </div>
+                <button type="submit" class="btn btn-primary btn-lg">Upload Artifact</button>
+            </form>
+            <div id="upload-result" class="result-card hidden"></div>
+        </div>
+
+        <!-- Search View -->
+        <div id="search-view" class="view">
+            <h1>Search Artifacts</h1>
+            <div class="search-box">
+                <input type="text" id="search-input" placeholder="Enter fruit ID (SHA256 hash)..." onkeyup="handleSearchKeyup(event)">
+                <button class="btn btn-primary" onclick="searchFruit()">Search</button>
+            </div>
+            <div id="search-result" class="result-card hidden"></div>
+        </div>
+    </main>
+
+    <!-- Create Grove Modal -->
+    <div id="create-grove-modal" class="modal hidden">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>Create New Grove</h2>
+                <button class="modal-close" onclick="closeModals()">&times;</button>
+            </div>
+            <form onsubmit="createGrove(event)">
+                <div class="form-group">
+                    <label>Name</label>
+                    <input type="text" id="grove-name" required placeholder="e.g., blinx-core">
+                </div>
+                <div class="form-group">
+                    <label>Description</label>
+                    <textarea id="grove-description" placeholder="Optional description..."></textarea>
+                </div>
+                <div class="form-group checkbox">
+                    <label>
+                        <input type="checkbox" id="grove-public" checked>
+                        Public grove
+                    </label>
+                </div>
+                <div class="modal-actions">
+                    <button type="button" class="btn btn-secondary" onclick="closeModals()">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Create Grove</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Create Tree Modal -->
+    <div id="create-tree-modal" class="modal hidden">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>Create New Tree</h2>
+                <button class="modal-close" onclick="closeModals()">&times;</button>
+            </div>
+            <form onsubmit="createTree(event)">
+                <div class="form-group">
+                    <label>Name</label>
+                    <input type="text" id="tree-name" required placeholder="e.g., kernel">
+                </div>
+                <div class="form-group">
+                    <label>Description</label>
+                    <textarea id="tree-description" placeholder="Optional description..."></textarea>
+                </div>
+                <div class="modal-actions">
+                    <button type="button" class="btn btn-secondary" onclick="closeModals()">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Create Tree</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Toast Notifications -->
+    <div id="toast-container"></div>
+
+    <script src="/static/app.js"></script>
+</body>
+</html>

internal/api/static/style.css

@@ -0,0 +1,603 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --primary: #059669;
+    --primary-dark: #047857;
+    --primary-light: #10b981;
+    --secondary: #6b7280;
+    --background: #f3f4f6;
+    --surface: #ffffff;
+    --text: #1f2937;
+    --text-light: #6b7280;
+    --border: #e5e7eb;
+    --success: #10b981;
+    --error: #ef4444;
+    --warning: #f59e0b;
+    --radius: 8px;
+    --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    background: var(--background);
+    color: var(--text);
+    line-height: 1.6;
+}
+
+/* Navbar */
+.navbar {
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
+    padding: 0 2rem;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.nav-brand {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.logo {
+    font-size: 1.75rem;
+}
+
+.nav-links {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.nav-link {
+    padding: 0.5rem 1rem;
+    text-decoration: none;
+    color: var(--text-light);
+    border-radius: var(--radius);
+    transition: all 0.2s;
+}
+
+.nav-link:hover {
+    background: var(--background);
+    color: var(--text);
+}
+
+.nav-link.active {
+    background: var(--primary);
+    color: white;
+}
+
+/* Container */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+/* Views */
+.view {
+    display: none;
+}
+
+.view.active {
+    display: block;
+}
+
+.view-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.view-header h1 {
+    flex: 1;
+}
+
+/* Cards */
+.card {
+    background: var(--surface);
+    border-radius: var(--radius);
+    border: 1px solid var(--border);
+    padding: 1.5rem;
+    box-shadow: var(--shadow);
+}
+
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1rem;
+}
+
+.grove-card, .tree-card {
+    background: var(--surface);
+    border-radius: var(--radius);
+    border: 1px solid var(--border);
+    padding: 1.25rem;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.grove-card:hover, .tree-card:hover {
+    border-color: var(--primary);
+    box-shadow: var(--shadow-lg);
+    transform: translateY(-2px);
+}
+
+.grove-card h3, .tree-card h3 {
+    color: var(--primary);
+    margin-bottom: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.grove-card p, .tree-card p {
+    color: var(--text-light);
+    font-size: 0.9rem;
+}
+
+.grove-card .meta, .tree-card .meta {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border);
+    font-size: 0.8rem;
+    color: var(--text-light);
+}
+
+.badge {
+    display: inline-block;
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+.badge-public {
+    background: #d1fae5;
+    color: #065f46;
+}
+
+.badge-private {
+    background: #fef3c7;
+    color: #92400e;
+}
+
+/* Sections */
+.section {
+    margin-top: 2rem;
+}
+
+.section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+}
+
+.section-header h2 {
+    font-size: 1.25rem;
+}
+
+/* Buttons */
+.btn {
+    padding: 0.5rem 1rem;
+    border-radius: var(--radius);
+    border: none;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.btn-primary {
+    background: var(--primary);
+    color: white;
+}
+
+.btn-primary:hover {
+    background: var(--primary-dark);
+}
+
+.btn-secondary {
+    background: var(--background);
+    color: var(--text);
+    border: 1px solid var(--border);
+}
+
+.btn-secondary:hover {
+    background: var(--border);
+}
+
+.btn-lg {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+}
+
+/* Forms */
+.form-group {
+    margin-bottom: 1rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: var(--text);
+}
+
+.form-group input[type="text"],
+.form-group input[type="email"],
+.form-group textarea,
+.form-group select {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    font-size: 1rem;
+    transition: border-color 0.2s;
+}
+
+.form-group input:focus,
+.form-group textarea:focus,
+.form-group select:focus {
+    outline: none;
+    border-color: var(--primary);
+}
+
+.form-group textarea {
+    min-height: 100px;
+    resize: vertical;
+}
+
+.form-group.checkbox label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+
+/* File Drop */
+.file-drop {
+    border: 2px dashed var(--border);
+    border-radius: var(--radius);
+    padding: 2rem;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s;
+    position: relative;
+}
+
+.file-drop:hover {
+    border-color: var(--primary);
+    background: #f0fdf4;
+}
+
+.file-drop input[type="file"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.file-drop p {
+    color: var(--text-light);
+    margin-bottom: 0.5rem;
+}
+
+#file-name {
+    color: var(--primary);
+    font-weight: 500;
+}
+
+/* Upload Form */
+.upload-form {
+    max-width: 600px;
+}
+
+.upload-form.card {
+    padding: 2rem;
+}
+
+/* Tables */
+.table-container {
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    background: var(--surface);
+    border-radius: var(--radius);
+    overflow: hidden;
+}
+
+th, td {
+    padding: 0.75rem 1rem;
+    text-align: left;
+    border-bottom: 1px solid var(--border);
+}
+
+th {
+    background: var(--background);
+    font-weight: 600;
+    color: var(--text-light);
+    font-size: 0.85rem;
+    text-transform: uppercase;
+}
+
+tr:hover {
+    background: #f9fafb;
+}
+
+.hash {
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 0.85rem;
+    color: var(--text-light);
+}
+
+.hash-short {
+    cursor: pointer;
+}
+
+.hash-short:hover {
+    color: var(--primary);
+}
+
+/* Search */
+.search-box {
+    display: flex;
+    gap: 1rem;
+    max-width: 600px;
+    margin-bottom: 2rem;
+}
+
+.search-box input {
+    flex: 1;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    font-size: 1rem;
+}
+
+.search-box input:focus {
+    outline: none;
+    border-color: var(--primary);
+}
+
+/* Result Card */
+.result-card {
+    background: var(--surface);
+    border-radius: var(--radius);
+    border: 1px solid var(--border);
+    padding: 1.5rem;
+    margin-top: 1.5rem;
+    max-width: 600px;
+}
+
+.result-card.success {
+    border-color: var(--success);
+    background: #f0fdf4;
+}
+
+.result-card.error {
+    border-color: var(--error);
+    background: #fef2f2;
+}
+
+.result-card h3 {
+    margin-bottom: 1rem;
+}
+
+.result-card dl {
+    display: grid;
+    grid-template-columns: 150px 1fr;
+    gap: 0.5rem;
+}
+
+.result-card dt {
+    font-weight: 500;
+    color: var(--text-light);
+}
+
+.result-card dd {
+    word-break: break-all;
+}
+
+.result-card .actions {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border);
+}
+
+/* Modal */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.modal.hidden {
+    display: none;
+}
+
+.modal-content {
+    background: var(--surface);
+    border-radius: var(--radius);
+    width: 100%;
+    max-width: 500px;
+    max-height: 90vh;
+    overflow-y: auto;
+}
+
+.modal-header {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.modal-header h2 {
+    font-size: 1.25rem;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: var(--text-light);
+}
+
+.modal-close:hover {
+    color: var(--text);
+}
+
+.modal-content form {
+    padding: 1.5rem;
+}
+
+.modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 1.5rem;
+}
+
+/* Info boxes */
+.grove-info, .tree-info {
+    background: var(--surface);
+    border-radius: var(--radius);
+    border: 1px solid var(--border);
+    padding: 1rem 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.info-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+}
+
+.info-item label {
+    display: block;
+    font-size: 0.8rem;
+    color: var(--text-light);
+    margin-bottom: 0.25rem;
+}
+
+.info-item span {
+    font-weight: 500;
+}
+
+/* Toast */
+#toast-container {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    z-index: 2000;
+}
+
+.toast {
+    background: var(--text);
+    color: white;
+    padding: 1rem 1.5rem;
+    border-radius: var(--radius);
+    margin-top: 0.5rem;
+    box-shadow: var(--shadow-lg);
+    animation: slideIn 0.3s ease;
+}
+
+.toast.success {
+    background: var(--success);
+}
+
+.toast.error {
+    background: var(--error);
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* Loading */
+.loading {
+    text-align: center;
+    padding: 2rem;
+    color: var(--text-light);
+}
+
+/* Hidden */
+.hidden {
+    display: none !important;
+}
+
+/* Empty State */
+.empty-state {
+    text-align: center;
+    padding: 3rem;
+    color: var(--text-light);
+}
+
+.empty-state h3 {
+    margin-bottom: 0.5rem;
+    color: var(--text);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .navbar {
+        padding: 0 1rem;
+    }
+
+    .container {
+        padding: 1rem;
+    }
+
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+
+    .card-grid {
+        grid-template-columns: 1fr;
+    }
+}