feat: Add sync/push buttons to ClawHub UI

app/mission-control/clawhub/page.tsx

@@ -23,9 +23,10 @@ export default function ClawHubMarketplace() {
   const [loading, setLoading] = useState(false);
   const [selectedSkill, setSelectedSkill] = useState<Skill | null>(null);
   const [selectedAgents, setSelectedAgents] = useState<string[]>(["horus"]);
-  const [action, setAction] = useState<"install" | "delete" | null>(null);
+  const [action, setAction] = useState<"install" | "delete" | "sync" | "push" | null>(null);
   const [output, setOutput] = useState("");
   const [installedSkills, setInstalledSkills] = useState<Record<string, string[]>>({});
+  const [syncing, setSyncing] = useState(false);
 
   const fetchInstalled = useCallback(async () => {
     try {
@@ -120,6 +121,43 @@ export default function ClawHubMarketplace() {
     setAction(null);
   };
 
+  const handleSync = async () => {
+    setSyncing(true);
+    setAction("sync");
+    setOutput("Syncing with GitHub...\n");
+    try {
+      const res = await fetch("/api/clawhub", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "sync" }),
+      });
+      const data = await res.json();
+      setOutput(data.output || data.error || "Sync complete");
+      fetchInstalled();
+    } catch (e) {
+      setOutput("Error: " + String(e));
+    }
+    setAction(null);
+    setSyncing(false);
+  };
+
+  const handlePush = async () => {
+    setAction("push");
+    setOutput("Pushing to GitHub...\n");
+    try {
+      const res = await fetch("/api/clawhub", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "push" }),
+      });
+      const data = await res.json();
+      setOutput(data.output || data.error || "Push complete");
+    } catch (e) {
+      setOutput("Error: " + String(e));
+    }
+    setAction(null);
+  };
+
   const isInstalled = (slug: string) => {
     return AGENTS.some((agent) => installedSkills[agent]?.includes(slug));
   };
@@ -138,12 +176,27 @@ export default function ClawHubMarketplace() {
         <div className="bg-slate-800 rounded-xl p-4 mb-6 border border-slate-700">
           <div className="flex items-center justify-between mb-3">
             <h2 className="font-semibold text-lg">Agent Skills Status</h2>
-            <button
-              onClick={fetchInstalled}
-              className="text-sm bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded transition"
-            >
-              🔄 Refresh
-            </button>
+            <div className="flex gap-2">
+              <button
+                onClick={handleSync}
+                disabled={syncing}
+                className="text-sm bg-blue-700 hover:bg-blue-600 disabled:bg-blue-800 px-3 py-1 rounded transition flex items-center gap-1"
+              >
+                {syncing ? "⏳" : "🔄"} Sync
+              </button>
+              <button
+                onClick={handlePush}
+                className="text-sm bg-green-700 hover:bg-green-600 px-3 py-1 rounded transition"
+              >
+                ⬆️ Push
+              </button>
+              <button
+                onClick={fetchInstalled}
+                className="text-sm bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded transition"
+              >
+                ↻ Refresh
+              </button>
+            </div>
           </div>
           <div className="grid grid-cols-3 gap-4">
             {AGENTS.map((agent) => (