Whatever

backend/package-lock.json

@@ -13,12 +13,28 @@
         "dotenv": "^17.4.2",
         "express": "^5.2.1",
         "mongoose": "^9.7.4",
+        "simple-git": "^3.36.0",
         "socket.io": "^4.8.3"
       },
       "devDependencies": {
         "nodemon": "^3.1.14"
       }
     },
+    "node_modules/@kwsites/file-exists": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@kwsites/file-exists/-/file-exists-1.1.1.tgz",
+      "integrity": "sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1"
+      }
+    },
+    "node_modules/@kwsites/promise-deferred": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@kwsites/promise-deferred/-/promise-deferred-1.1.1.tgz",
+      "integrity": "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==",
+      "license": "MIT"
+    },
     "node_modules/@mongodb-js/saslprep": {
       "version": "1.4.12",
       "resolved": "https://registry.npmjs.org/@mongodb-js/saslprep/-/saslprep-1.4.12.tgz",
@@ -28,6 +44,21 @@
         "sparse-bitfield": "^3.0.3"
       }
     },
+    "node_modules/@simple-git/args-pathspec": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@simple-git/args-pathspec/-/args-pathspec-1.0.3.tgz",
+      "integrity": "sha512-ngJMaHlsWDTfjyq9F3VIQ8b7NXbBLq5j9i5bJ6XLYtD6qlDXT7fdKY2KscWWUF8t18xx052Y/PUO1K1TRc9yKA==",
+      "license": "MIT"
+    },
+    "node_modules/@simple-git/argv-parser": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@simple-git/argv-parser/-/argv-parser-1.1.1.tgz",
+      "integrity": "sha512-Q9lBcfQ+VQCpQqGJFHe5yooOS5hGdLFFbJ5R+R5aDsnkPCahtn1hSkMcORX65J2Z5lxSkD0lQorMsncuBQxYUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@simple-git/args-pathspec": "^1.0.3"
+      }
+    },
     "node_modules/@socket.io/component-emitter": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
@@ -1406,6 +1437,23 @@
       "integrity": "sha512-Rtlj66/b0ICeFzYTuNvX/EF1igRbbnGSvEyT79McoZa/DeGhMyC5pWKOEsZKnpkqtSeovd5FL/bjHWC3CIIvCQ==",
       "license": "MIT"
     },
+    "node_modules/simple-git": {
+      "version": "3.36.0",
+      "resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.36.0.tgz",
+      "integrity": "sha512-cGQjLjK8bxJw4QuYT7gxHw3/IouVESbhahSsHrX97MzCL1gu2u7oy38W6L2ZIGECEfIBG4BabsWDPjBxJENv9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@kwsites/file-exists": "^1.1.1",
+        "@kwsites/promise-deferred": "^1.1.1",
+        "@simple-git/args-pathspec": "^1.0.3",
+        "@simple-git/argv-parser": "^1.1.0",
+        "debug": "^4.4.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/steveukx/git-js?sponsor=1"
+      }
+    },
     "node_modules/simple-update-notifier": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",

backend/package.json

@@ -16,6 +16,7 @@
     "dotenv": "^17.4.2",
     "express": "^5.2.1",
     "mongoose": "^9.7.4",
+    "simple-git": "^3.36.0",
     "socket.io": "^4.8.3"
   },
   "devDependencies": {

backend/src/models/Site.js

@@ -9,6 +9,8 @@ const siteSchema = new mongoose.Schema(
     themeColor: { type: String, default: "#2563eb" },
     targetWindow: { type: String, default: "_blank", enum: ["_blank", "_self"] },
     enabled: { type: Boolean, default: true },
+    gitRepoUrl: { type: String, default: "", trim: true },
+    gitBranch: { type: String, default: "main", trim: true },
   },
   { timestamps: true }
 );

backend/src/routes/sites.js

@@ -1,8 +1,17 @@
 const express = require("express");
 const Site = require("../models/Site");
+const fs = require("fs");
+const path = require("path");
+const simpleGit = require("simple-git");
 
 const router = express.Router();
 
+const SITES_GIT_DIR = path.join(__dirname, "../../sites-git-data");
+
+if (!fs.existsSync(SITES_GIT_DIR)) {
+  fs.mkdirSync(SITES_GIT_DIR, { recursive: true });
+}
+
 // GET /api/sites - List all sites
 router.get("/", async (req, res) => {
   try {
@@ -16,8 +25,8 @@ router.get("/", async (req, res) => {
 // POST /api/sites - Create a new site
 router.post("/", async (req, res) => {
   try {
-    const { id, name, url, description, themeColor, targetWindow, enabled } = req.body;
-    const site = new Site({ id, name, url, description, themeColor, targetWindow, enabled });
+    const { id, name, url, description, themeColor, targetWindow, enabled, gitRepoUrl, gitBranch } = req.body;
+    const site = new Site({ id, name, url, description, themeColor, targetWindow, enabled, gitRepoUrl: gitRepoUrl || "", gitBranch: gitBranch || "main" });
     await site.save();
     res.status(201).json(site);
   } catch (err) {
@@ -28,9 +37,10 @@ router.post("/", async (req, res) => {
 // PUT /api/sites/:id - Update a site
 router.put("/:id", async (req, res) => {
   try {
-    const { name, url, description, themeColor, targetWindow, enabled } = req.body;
-    const updates = { name, url, description, themeColor, targetWindow, enabled };
-    const site = await Site.findOneAndUpdate({ id: req.params.id }, updates, { new: true, runValidators: true });
+    const { name, url, description, themeColor, targetWindow, enabled, gitRepoUrl, gitBranch } = req.body;
+    console.log("[PUT /sites] id:", req.params.id, "body:", JSON.stringify({name,url,description,themeColor,targetWindow,enabled,gitRepoUrl,gitBranch}));
+    const updates = { name, url, description, themeColor, targetWindow, enabled, gitRepoUrl: gitRepoUrl || "", gitBranch: gitBranch || "main" };
+    const site = await Site.findOneAndUpdate({ id: req.params.id }, { $set: updates }, { new: true, runValidators: true });
     if (!site) return res.status(404).json({ error: "Site not found" });
     res.json(site);
   } catch (err) {
@@ -43,10 +53,116 @@ router.delete("/:id", async (req, res) => {
   try {
     const site = await Site.findOneAndDelete({ id: req.params.id });
     if (!site) return res.status(404).json({ error: "Site not found" });
+
+    const siteGitDir = path.join(SITES_GIT_DIR, site.id);
+    if (fs.existsSync(siteGitDir)) {
+      fs.rmSync(siteGitDir, { recursive: true, force: true });
+    }
+
     res.json({ message: "Site deleted", id: site.id });
   } catch (err) {
     res.status(500).json({ error: err.message });
   }
 });
 
+// GET /api/sites/:id/git-log - Get git commit log for a site's repository
+router.get("/:id/git-log", async (req, res) => {
+  try {
+    const site = await Site.findOne({ id: req.params.id });
+    if (!site) return res.status(404).json({ error: "Site not found" });
+    if (!site.gitRepoUrl) return res.status(400).json({ error: "No git repo URL configured" });
+
+    const siteGitDir = path.join(SITES_GIT_DIR, site.id);
+    try {
+      const git = simpleGit(siteGitDir);
+      const logs = await git.log();
+      res.json({ commits: logs.all || [] });
+    } catch (gitErr) {
+      res.status(500).json({ error: "Failed to read git log. The repository may need to be cloned first. Use the sync endpoint." });
+    }
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// POST /api/sites/:id/sync-git - Clone or pull the git repository for a site
+router.post("/:id/sync-git", async (req, res) => {
+  try {
+    const site = await Site.findOne({ id: req.params.id });
+    if (!site) return res.status(404).json({ error: "Site not found" });
+    if (!site.gitRepoUrl) return res.status(400).json({ error: "No git repo URL configured" });
+
+    const siteGitDir = path.join(SITES_GIT_DIR, site.id);
+    const git = simpleGit(siteGitDir);
+
+    try {
+      await git.pull();
+      res.json({ message: "Repository pulled successfully", commits: (await git.log()).all || [] });
+    } catch (pullErr) {
+      if (pullErr.message.includes("repo does not exist") || pullErr.message.includes("No local restart")) {
+        const branch = site.gitBranch || "main";
+        const gitInstance = simpleGit();
+        await gitInstance.clone(site.gitRepoUrl, siteGitDir);
+        try {
+          await gitInstance.checkout(branch);
+        } catch (e) {
+          // If branch doesn't exist, stay on default branch
+        }
+        const logs = await gitInstance.log();
+        res.json({ message: "Repository cloned successfully", cloned: true, commits: logs.all || [] });
+      } else {
+        res.status(500).json({ error: pullErr.message });
+      }
+    }
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// GET /api/sites/:id/files - Get file tree for a site's synced repository
+router.get("/:id/files", async (req, res) => {
+  try {
+    const site = await Site.findOne({ id: req.params.id });
+    if (!site) return res.status(404).json({ error: "Site not found" });
+
+    const siteGitDir = path.join(SITES_GIT_DIR, site.id);
+    if (!fs.existsSync(siteGitDir)) {
+      return res.json({ tree: [], message: "Repository not synced yet. Use Sync Git first." });
+    }
+
+    function buildTree(dir, relativePath = "") {
+      const entries = fs.readdirSync(dir, { withFileTypes: true });
+      const result = [];
+
+      // Folders first, then files
+      const dirs = entries.filter(e => e.isDirectory()).sort((a, b) => a.name.localeCompare(b.name));
+      const files = entries.filter(e => !e.isDirectory()).sort((a, b) => a.name.localeCompare(b.name));
+
+      for (const d of dirs) {
+        result.push({
+          name: d.name,
+          path: relativePath ? `${relativePath}/${d.name}` : d.name,
+          type: "folder",
+          children: buildTree(path.join(dir, d.name), relativePath ? `${relativePath}/${d.name}` : d.name),
+        });
+      }
+
+      for (const f of files) {
+        result.push({
+          name: f.name,
+          path: relativePath ? `${relativePath}/${f.name}` : f.name,
+          type: "file",
+        });
+      }
+
+      return result;
+    }
+
+    const tree = buildTree(siteGitDir);
+    res.json({ tree });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
 module.exports = router;

frontend/app/app.vue

@@ -8,7 +8,9 @@
       </button>
     </header>
 
+    <main class="body-wrapper">
       <div class="layout">
+        <div class="sidebar-col">
           <Sidebar :sites="sites"
                    :selected-id="selectedId"
                    :pending-add="pendingAdd"
@@ -16,7 +18,9 @@
                    @start-add="startAdd"
                    @cancel-add="cancelAdd"
                    @add-site="confirmAdd" />
+        </div>
 
+        <div class="settings-col">
           <SettingsPanel v-if="selectedSite"
                         :site="selectedSite"
                         :last-saved="lastSaved"
@@ -26,6 +30,12 @@
                         @changed="handleEditChanged" />
           <SettingsEmpty v-else />
         </div>
+
+        <div class="filetree-col" v-if="selectedSite">
+          <FileTree :site-id="selectedSite.id" />
+        </div>
+      </div>
+    </main>
   </div>
 </template>
 
@@ -34,6 +44,7 @@ import { ref, onMounted, computed } from 'vue'
 import Sidebar from './components/Sidebar.vue'
 import SettingsPanel from './components/SettingsPanel.vue'
 import SettingsEmpty from './components/SettingsEmpty.vue'
+import FileTree from './components/FileTree.vue'
 
 const API_BASE = import.meta.url.match(/^https?:\/\/[^/]+/) 
   ? `${location.protocol}//${location.host}`
@@ -62,6 +73,8 @@ function defaultSite(name: string) {
     themeColor: '#2563eb',
     targetWindow: '_blank',
     enabled: true,
+    gitRepoUrl: '',
+    gitBranch: 'main',
   }
 }
 
@@ -77,7 +90,7 @@ function applyClass() {
   document.documentElement.classList.toggle('dark', darkMode.value)
 }
 
-const sites = ref<Array<{ _id: string; id: string; name: string; url: string; description: string; themeColor: string; targetWindow: string; enabled: boolean }>>([])
+const sites = ref<Array<{ _id: string; id: string; name: string; url: string; description: string; themeColor: string; targetWindow: string; enabled: boolean; gitRepoUrl?: string; gitBranch?: string }>>([])
 const selectedId = ref(null)
 const pendingAdd = ref(false)
 const lastSaved = ref('')
@@ -86,6 +99,7 @@ let newSites = new Map<string, any>()
 let dirtyEdits = new Map<string, any>()
 let loadTimer: ReturnType<typeof setTimeout> | null = null
 let lastSavedTimeout: ReturnType<typeof setTimeout> | null = null
+let autoSaveTimer: ReturnType<typeof setTimeout> | null = null
 
 const selectedSite = computed(() => {
   return sites.value.find(s => s.id === selectedId.value) || null
@@ -147,7 +161,6 @@ async function refreshSites() {
 
 async function saveSite(site: any) {
   try {
-    const serverSite = sites.value.find(s => s.id === site.id)
     const res = await api(`/${encodeURIComponent(site.id)}`, {
       method: 'PUT',
       body: JSON.stringify({
@@ -157,6 +170,8 @@ async function saveSite(site: any) {
         themeColor: site.themeColor,
         targetWindow: site.targetWindow,
         enabled: site.enabled,
+        gitRepoUrl: site.gitRepoUrl || '',
+        gitBranch: site.gitBranch || 'main',
       }),
     })
     if (res.ok) {
@@ -171,6 +186,8 @@ async function saveSite(site: any) {
 }
 
 async function bulkSave() {
+  if (autoSaveTimer) clearTimeout(autoSaveTimer)
+  autoSaveTimer = null
   const allEntries = [...newSites.entries(), ...dirtyEdits.entries()]
   for (const [, site] of allEntries) {
     await saveSite(site)
@@ -188,12 +205,16 @@ async function bulkSave() {
   }, 3000)
 }
 
-async function handleEditChanged(site: { id: string; name: string; url: string; description: string; themeColor: string; targetWindow: string; enabled: boolean }) {
+async function handleEditChanged(site: { id: string; name: string; url: string; description: string; themeColor: string; targetWindow: string; enabled: boolean; gitRepoUrl?: string; gitBranch?: string }) {
   if (newSites.has(site.id)) {
     newSites.set(site.id, site)
   } else {
     dirtyEdits.set(site.id, site)
   }
+  if (autoSaveTimer) clearTimeout(autoSaveTimer)
+  autoSaveTimer = setTimeout(async () => {
+    await bulkSave()
+  }, 800)
 }
 
 function selectSite(site: { id: string; name: string; enabled: boolean }) {
@@ -272,24 +293,27 @@ function openPreview() {
 
 <style scoped>
 .app {
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 40px 20px;
+  width: 100%;
+  padding: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 .top-bar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 32px;
-}
-
-h1 {
-  text-align: left;
-  margin: 0;
-  font-size: 2rem;
-  color: var(--text-primary);
+  padding: 16px 24px;
+  flex-shrink: 0;
+  background: var(--bg-primary);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--border-color);
 }
 
 .theme-toggle {
@@ -309,25 +333,79 @@ h1 {
   border-color: var(--border-input);
 }
 
+h1 {
+  text-align: left;
+  margin: 0;
+  font-size: 2rem;
+  color: var(--text-primary);
+}
+
+.body-wrapper {
+  flex: 1;
+  overflow: hidden;
+}
+
 .layout {
   display: flex;
-  gap: 24px;
-  align-items: flex-start;
+  gap: 0;
+  height: 100%;
 }
+
+.sidebar-col {
+  width: 280px;
+  min-width: 280px;
+  max-width: 280px;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-right: 1px solid var(--border-color);
+  padding: 16px;
+}
+
+.settings-col {
+  flex: 1;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-width: 0;
+  border-right: 1px solid var(--border-color);
+  padding: 24px;
+}
+
+.settings-col .settings-panel,
+.settings-col .settings-empty {
+  width: 100%;
+}
+
+.filetree-col {
+  flex: 1;
+  min-width: 280px;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: var(--bg-secondary);
+  padding: 16px;
+}
+
 </style>
 
 <style>
 html, body {
   margin: 0;
   padding: 0;
-  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden;
   background: var(--bg-primary);
   color: var(--text-primary);
   transition: background 0.3s, color 0.3s;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 #__nuxt {
-  min-height: 100vh;
+  height: 100vh;
   background: var(--bg-primary);
   transition: background 0.3s;
 }

frontend/app/components/FileTree.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="file-tree">
+    <div v-if="loading" class="tree-loading">Loading files...</div>
+    <div v-else-if="error" class="tree-error">{{ error }}</div>
+    <div v-else-if="!tree || tree.length === 0" class="tree-empty">
+      No files. Sync the repository first.
+    </div>
+    <TreeItem v-else v-model:expanded="expandedPaths" :items="tree" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import TreeItem from './TreeItem.vue'
+
+const props = defineProps<{
+  siteId: string
+}>()
+
+const loading = ref(true)
+const error = ref('')
+const tree = ref<any[]>([])
+const expandedPaths = ref<Set<string>>(new Set())
+
+onMounted(async () => {
+  loading.value = true
+  try {
+    const API_BASE = window.location.origin
+    const res = await fetch(`${API_BASE}/api/sites/${encodeURIComponent(props.siteId)}/files`)
+    if (res.ok) {
+      const data = await res.json()
+      tree.value = data.tree || []
+    } else {
+      const errData = await res.json().catch(() => ({}))
+      error.value = errData.error || 'Failed to load files'
+    }
+  } catch {
+    error.value = 'Could not connect to server'
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<style scoped>
+.file-tree {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+}
+
+.tree-loading,
+.tree-error,
+.tree-empty {
+  padding: 16px;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.tree-error {
+  color: #e53e3e;
+}
+</style>

frontend/app/components/SettingsPanel.vue

@@ -42,6 +42,25 @@
       </label>
     </div>
 
+    <div class="form-actions git-actions-bar" v-if="hasGit">
+      <button class="git-sync-btn" @click.prevent="handleSyncGit" :disabled="syncing">
+        {{ syncing ? 'Syncing...' : 'Sync Git' }}
+      </button>
+      <span class="save-status" v-if="lastGitMsg">{{ lastGitMsg }}</span>
+    </div>
+
+    <div class="git-divider" v-if="hasGit"></div>
+
+    <div class="form-group git-group" v-if="hasGit">
+      <label>Git Repository URL</label>
+      <input v-model="editGitRepoUrl" type="url" placeholder="https://github.com/user/repo.git" class="edit-input" />
+    </div>
+
+    <div class="form-group git-group" v-if="hasGit">
+      <label>Git Branch</label>
+      <input v-model="editGitBranch" type="text" placeholder="main" class="edit-input" />
+    </div>
+
     <div class="form-actions">
       <button class="delete-btn" @click.prevent="$emit('delete')">Delete</button>
       <span class="save-status" v-if="lastSaved">{{ lastSaved }}</span>
@@ -63,12 +82,19 @@
 import { ref, computed, watch } from 'vue'
 
 const props = defineProps<{
-  site: { name: string; url: string; description: string; themeColor: string; targetWindow: string; enabled: boolean }
+  site: { name: string; url: string; description: string; themeColor: string; targetWindow: string; enabled: boolean; gitRepoUrl?: string; gitBranch?: string }
   lastSaved: string
   siteId?: string
 }>()
 
-const emit = defineEmits<{ delete: []; preview: []; changed: [{ name: string; url: string; description: string; themeColor: string; targetWindow: string; enabled: boolean, id: string }] }>()
+const emit = defineEmits<{ delete: []; preview: []; changed: [{ name: string; url: string; description: string; themeColor: string; targetWindow: string; enabled: boolean, gitRepoUrl?: string; gitBranch?: string; id: string }] }>()
+
+const syncing = ref(false)
+const lastGitMsg = ref('')
+
+const hasGit = computed(() => {
+  return !!(props.site.gitRepoUrl || props.siteId)
+})
 
 const editName = ref(props.site.name)
 const editUrl = ref(props.site.url)
@@ -76,6 +102,8 @@ const editDescription = ref(props.site.description)
 const editThemeColor = ref(props.site.themeColor)
 const editTargetWindow = ref(props.site.targetWindow)
 const editEnabled = ref(props.site.enabled)
+const editGitRepoUrl = ref(props.site.gitRepoUrl || '')
+const editGitBranch = ref(props.site.gitBranch || 'main')
 
 const isDirty = computed(() => {
   return (
@@ -84,11 +112,13 @@ const isDirty = computed(() => {
     editDescription.value !== props.site.description ||
     editThemeColor.value !== props.site.themeColor ||
     editTargetWindow.value !== props.site.targetWindow ||
-    editEnabled.value !== props.site.enabled
+    editEnabled.value !== props.site.enabled ||
+    editGitRepoUrl.value !== (props.site.gitRepoUrl || '') ||
+    editGitBranch.value !== (props.site.gitBranch || 'main')
   )
 })
 
-watch([editName, editUrl, editDescription, editThemeColor, editTargetWindow, editEnabled], () => {
+watch([editName, editUrl, editDescription, editThemeColor, editTargetWindow, editEnabled, editGitRepoUrl, editGitBranch], () => {
   emit('changed', {
     name: editName.value,
     url: editUrl.value,
@@ -96,6 +126,8 @@ watch([editName, editUrl, editDescription, editThemeColor, editTargetWindow, edi
     themeColor: editThemeColor.value,
     targetWindow: editTargetWindow.value,
     enabled: editEnabled.value,
+    gitRepoUrl: editGitRepoUrl.value,
+    gitBranch: editGitBranch.value,
     id: props.siteId!,
   })
 })
@@ -108,9 +140,30 @@ function handleSave() {
     themeColor: editThemeColor.value,
     targetWindow: editTargetWindow.value,
     enabled: editEnabled.value,
+    gitRepoUrl: editGitRepoUrl.value,
+    gitBranch: editGitBranch.value,
     id: props.siteId!,
   })
 }
+
+async function handleSyncGit() {
+  if (!props.site.id || syncing.value) return
+  const API_BASE = window.location.origin
+  syncing.value = true
+  lastGitMsg.value = ''
+  try {
+    const res = await fetch(`${API_BASE}/api/sites/${encodeURIComponent(props.site.id)}/sync-git`, { method: 'POST', headers: { 'Content-Type': 'application/json' } })
+    const data = await res.json()
+    if (res.ok) {
+      lastGitMsg.value = data.cloned ? 'Cloned repository' : 'Pull succeeded'
+    } else {
+      lastGitMsg.value = data.error || 'Sync failed'
+    }
+  } catch (err) {
+    lastGitMsg.value = 'Sync failed'
+  }
+  syncing.value = false
+}
 </script>
 
 <style scoped>
@@ -271,4 +324,41 @@ textarea.edit-input {
 .save-btn-dirty:hover {
   background: #1d4ed8;
 }
+
+.git-divider {
+  border: none;
+  border-top: 1px dashed var(--border-color);
+  margin: 16px 0;
+}
+
+.git-group {
+  margin-top: 8px;
+}
+
+.git-actions-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+
+.git-sync-btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  background: #7c3aed;
+  color: white;
+}
+
+.git-sync-btn:hover:not(:disabled) {
+  background: #6d28d9;
+}
+
+.git-sync-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 </style>

frontend/app/components/Sidebar.vue

@@ -28,10 +28,6 @@ defineEmits<{ 'select-site': [site: { id: string; name: string; enabled: boolean
 
 <style scoped>
 .sidebar {
-  width: 280px;
-  min-width: 280px;
-  position: sticky;
-  top: 20px;
   display: flex;
   flex-direction: column;
   gap: 8px;

frontend/app/components/TreeItem.vue

@@ -0,0 +1,97 @@
+<template>
+  <ul class="tree-list">
+    <li v-for="item in items" :key="item.path">
+      <div class="tree-item-row" @click="toggle(item)">
+        <span class="tree-icon">
+          <svg v-if="item.type === 'folder'" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
+          </svg>
+          <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
+            <polyline points="14,2 14,8 20,8"/>
+          </svg>
+        </span>
+        <span class="tree-name" :title="item.path">{{ item.name }}</span>
+      </div>
+      <TreeItem v-if="item.type === 'folder' && expandedPaths.has(item.path)" :key="item.path" v-model:expanded="expandedPaths" :items="item.children || []" />
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { onMounted, watch } from 'vue'
+
+const props = defineProps<{
+  items: any[]
+  expanded?: Set<string>
+}>()
+
+const emit = defineEmits<{ 'update:expanded': [value: Set<string>] }>()
+
+const expandedPaths = ref(new Set<string>())
+
+defineExpose({ expandedPaths })
+
+function toggle(item: any) {
+  if (item.type !== 'folder') return
+  const next = new Set(expandedPaths.value)
+  if (next.has(item.path)) {
+    next.delete(item.path)
+  } else {
+    next.add(item.path)
+  }
+  expandedPaths.value = next
+  emit('update:expanded', next)
+}
+
+function syncExpanded() {
+  if (props.expanded) {
+    expandedPaths.value = new Set(props.expanded)
+  }
+}
+
+watch(() => props.expanded, () => syncExpanded(), { immediate: true })
+
+onMounted(() => syncExpanded())
+</script>
+
+<style scoped>
+.tree-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.tree-item-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  cursor: pointer;
+  border-radius: 4px;
+  user-select: none;
+  color: var(--text-secondary);
+}
+
+.tree-item-row:hover {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+.tree-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  opacity: 0.6;
+}
+
+.tree-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tree-list .tree-list {
+  padding-left: 16px;
+}
+</style>