Update Readme

2025-09-23 13:33:56 +00:00
parent 282ac2d028
commit 90d359c14a
23 changed files with 936 additions and 191 deletions
@@ -4,6 +4,7 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>StackPulse</title>
+    <link rel="stylesheet" href="/src/index.css" />
  </head>
  <body>
    <div id="root"></div>
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>StackPulse</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
@@ -10,7 +10,8 @@
      "dependencies": {
        "axios": "^1.7.5",
        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "socket.io-client": "^4.8.1"
      },
      "devDependencies": {
        "@vitejs/plugin-react": "^4.0.0",
@@ -763,6 +764,11 @@
      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
      "dev": true
    },
+    "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",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="
+    },
    "node_modules/@types/babel__core": {
      "version": "7.20.5",
      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1211,6 +1217,42 @@
      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
      "dev": true
    },
+    "node_modules/engine.io-client": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.3.tgz",
+      "integrity": "sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.17.1",
+        "xmlhttprequest-ssl": "~2.1.1"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
    "node_modules/es-define-property": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -1794,8 +1836,7 @@
    "node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
    },
    "node_modules/mz": {
      "version": "2.7.0",
@@ -2287,6 +2328,64 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/socket.io-client": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
+      "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.6.1",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-client/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/source-map-js": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -2699,6 +2798,34 @@
        "node": ">=8"
      }
    },
+    "node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/yallist": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -9,7 +9,8 @@
  "dependencies": {
    "axios": "^1.7.5",
    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "socket.io-client": "^4.8.1"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.0",
@@ -1,13 +1,16 @@
 import React from "react";
-import Stacks from "./Stacks";
+import Stacks from "./Stacks.jsx";

-function App() {
+export default function App() {
  return (
-    <div className="min-h-screen bg-gray-100 p-6">
-      <h1 className="text-2xl font-bold mb-4">StackPulse</h1>
-      <Stacks />
+    <div className="min-h-screen bg-gray-900 text-white">
+      <header className="p-6 bg-gray-800 shadow-md">
+        <h1 className="text-2xl font-bold text-white">StackPulse</h1>
+        <p className="text-gray-400 mt-1">Verwalte deine Docker Stacks</p>
+      </header>
+      <main className="p-6">
+        <Stacks />
+      </main>
    </div>
  );
 }
-
-export default App;
@@ -0,0 +1,11 @@
+import React from "react";
+import Stacks from "./Stacks.jsx";
+
+export default function App() {
+  return (
+    <div className="p-8 font-sans">
+      <h1 className="text-3xl font-bold mb-6">StackPulse</h1>
+      <Stacks />
+    </div>
+  );
+}
@@ -1,11 +1,37 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
+import { io } from "socket.io-client";

 export default function Stacks() {
  const [stacks, setStacks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
+  const [redeploying, setRedeploying] = useState({});

+  // WebSocket initialisieren
+  useEffect(() => {
+    const socket = io("/");
+    console.log("Socket connected");
+
+    socket.on("redeployStatus", async ({ stackId, status }) => {
+      setRedeploying(prev => ({ ...prev, [stackId]: status }));
+
+      // Wenn Redeploy beendet, Stack-Status neu laden
+      if (!status) {
+        try {
+          const res = await axios.get("/api/stacks");
+          const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
+          setStacks(sortedStacks);
+        } catch (err) {
+          console.error("Fehler beim Aktualisieren des Status nach Redeploy:", err);
+        }
+      }
+    });
+
+    return () => socket.disconnect();
+  }, []);
+
+  // Stacks initial laden
  const fetchStacks = async () => {
    try {
      const res = await axios.get("/api/stacks");
@@ -23,50 +49,61 @@ export default function Stacks() {
    fetchStacks();
  }, []);

+  // Redeploy eines Stacks
  const handleRedeploy = async (stackId) => {
-    try {
-      const confirmRedeploy = window.confirm("Willst du den Stack wirklich redeployen?");
-      if (!confirmRedeploy) return;
+    setRedeploying(prev => ({ ...prev, [stackId]: true }));

-      const res = await axios.put(`/api/stacks/${stackId}/redeploy`);
-      if (res.data.success) {
-        alert("✅ Stack erfolgreich redeployed!");
-        fetchStacks(); // Optional: Stacks neu laden
-      } else {
-        alert("⚠️ Redeploy fehlgeschlagen: " + res.data.error);
-      }
+    try {
+      await axios.put(`/api/stacks/${stackId}/redeploy`);
    } catch (err) {
      console.error("❌ Fehler beim Redeploy:", err);
-      alert("⚠️ Redeploy fehlgeschlagen: " + err.message);
+      setRedeploying(prev => ({ ...prev, [stackId]: false }));
    }
  };

-  if (loading) return <p className="text-gray-600">Lade Stacks...</p>;
-  if (error) return <p className="text-red-500">{error}</p>;
+  if (loading) return <p className="text-gray-400">Lade Stacks...</p>;
+  if (error) return <p className="text-red-400">{error}</p>;

  return (
-    <ul className="space-y-4">
-      {stacks.map((stack) => (
-        <li
-          key={stack.Id}
-          className="p-4 bg-white rounded-xl shadow hover:shadow-md transition flex justify-between items-center"
-        >
-          <div className="flex items-center space-x-4">
-            <div className="text-xl">{stack.updateStatus}</div>
-            <div>
-              <p className="text-lg font-semibold text-gray-800">{stack.Name}</p>
-              <p className="text-sm text-gray-500">ID: {stack.Id}</p>
-            </div>
-          </div>
-          <button
-            onClick={() => handleRedeploy(stack.Id)}
-            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6">
+      {stacks.map(stack => {
+        const isRedeploying = redeploying[stack.Id] || false;
+        const isUpToDate = stack.updateStatus === "✅";
+
+        return (
+          <div
+            key={stack.Id}
+            className={`flex justify-between items-center p-5 rounded-xl shadow-lg transition
+              ${isRedeploying ? "bg-gray-700 cursor-not-allowed" : "bg-gray-800 hover:bg-gray-700"}`}
          >
-            Redeploy
-          </button>
-        </li>
-      ))}
-      {stacks.length === 0 && <p className="text-gray-500">Keine Stacks gefunden.</p>}
-    </ul>
+            <div className="flex items-center space-x-4">
+              {/* Status Indicator */}
+              <div className={`w-12 h-12 flex items-center justify-center rounded-full
+                ${stack.updateStatus === "✅" ? "bg-green-500" :
+                  stack.updateStatus === "⚠️" ? "bg-yellow-500" :
+                  "bg-red-500"}`}
+              >
+              </div>
+              <div>
+                <p className="text-lg font-semibold text-white">{stack.Name}</p>
+                <p className="text-sm text-gray-400">ID: {stack.Id}</p>
+              </div>
+            </div>
+
+            {!isUpToDate && (
+              <button
+                onClick={() => handleRedeploy(stack.Id)}
+                disabled={isRedeploying}
+                className={`px-5 py-2 rounded-lg font-medium transition
+                  ${isRedeploying ? "bg-orange-500 cursor-not-allowed" : "bg-blue-500 hover:bg-blue-600"}`}
+              >
+                {isRedeploying ? "Redeploying" : "Redeploy"}
+              </button>
+            )}
+          </div>
+        );
+      })}
+      {stacks.length === 0 && <p className="text-gray-400">Keine Stacks gefunden.</p>}
+    </div>
  );
 }
@@ -1,47 +1,111 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
+import { io } from "socket.io-client";

 export default function Stacks() {
  const [stacks, setStacks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
+  const [redeploying, setRedeploying] = useState({}); // { stackId: true/false }
+
+  // WebSocket initialisieren
+  useEffect(() => {
+    const socket = io("/"); 
+    console.log("Socket connected");
+
+    socket.on("redeployStatus", async ({ stackId, status }) => {
+      setRedeploying(prev => ({ ...prev, [stackId]: status }));
+
+      // Wenn Redeploy beendet, Stack-Status neu laden
+      if (!status) {
+        try {
+          const res = await axios.get("/api/stacks");
+          const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
+          setStacks(sortedStacks);
+        } catch (err) {
+          console.error("Fehler beim Aktualisieren des Status nach Redeploy:", err);
+        }
+      }
+    });
+
+    return () => socket.disconnect();
+  }, []);
+
+  // Stacks initial laden
+  const fetchStacks = async () => {
+    try {
+      const res = await axios.get("/api/stacks");
+      const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
+      setStacks(sortedStacks);
+    } catch (err) {
+      console.error("❌ Fehler beim Abrufen der Stacks:", err);
+      setError("Fehler beim Laden der Stacks");
+    } finally {
+      setLoading(false);
+    }
+  };

  useEffect(() => {
-    const fetchStacks = async () => {
-      try {
-        const res = await axios.get("/api/stacks"); // Vite-Proxy auf Backend
-        const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
-        setStacks(sortedStacks);
-      } catch (err) {
-        console.error("❌ Fehler beim Abrufen der Stacks:", err);
-        setError("Fehler beim Laden der Stacks");
-      } finally {
-        setLoading(false);
-      }
-    };
-
    fetchStacks();
  }, []);

+  // Redeploy eines Stacks
+  const handleRedeploy = async (stackId) => {
+    // Button sofort auf Redeploying setzen
+    setRedeploying(prev => ({ ...prev, [stackId]: true }));
+
+    try {
+      await axios.put(`/api/stacks/${stackId}/redeploy`);
+    } catch (err) {
+      console.error("❌ Fehler beim Redeploy:", err);
+    }
+
+    // Stack-Status immer neu laden
+    try {
+      const res = await axios.get("/api/stacks");
+      const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
+      setStacks(sortedStacks);
+    } catch (err) {
+      console.error("Fehler beim Aktualisieren nach Redeploy:", err);
+    } finally {
+      // Erst nach Datenaktualisierung Button zurücksetzen
+      setRedeploying(prev => ({ ...prev, [stackId]: false }));
+    }
+  };
+
  if (loading) return <p className="text-gray-600">Lade Stacks...</p>;
  if (error) return <p className="text-red-500">{error}</p>;

  return (
    <ul className="space-y-4">
-      {stacks.map((stack) => (
-        <li
-          key={stack.Id}
-          className="p-4 bg-white rounded-xl shadow hover:shadow-md transition flex justify-between items-center"
-        >
-          <div>
-            <p className="text-lg font-semibold text-gray-800">{stack.Name}</p>
-            <p className="text-sm text-gray-500">ID: {stack.Id}</p>
-          </div>
-          <div className="text-2xl">
-            {stack.Updated ? "✅" : "⚠️"}
-          </div>
-        </li>
-      ))}
+      {stacks.map(stack => {
+        const isRedeploying = redeploying[stack.Id] || false;
+        return (
+          <li
+            key={stack.Id}
+            className={`p-4 rounded-xl shadow transition flex justify-between items-center ${
+              isRedeploying ? "bg-gray-100 cursor-not-allowed" : "bg-white hover:shadow-md"
+            }`}
+          >
+            <div className="flex items-center space-x-4">
+              <div className="text-xl">{stack.updateStatus}</div>
+              <div>
+                <p className="text-lg font-semibold text-gray-800">{stack.Name}</p>
+                <p className="text-sm text-gray-500">ID: {stack.Id}</p>
+              </div>
+            </div>
+            <button
+              onClick={() => handleRedeploy(stack.Id)}
+              disabled={isRedeploying}
+              className={`px-4 py-2 rounded text-white font-medium transition ${
+                isRedeploying ? "bg-orange-500 cursor-not-allowed" : "bg-blue-500 hover:bg-blue-600"
+              }`}
+            >
+              {isRedeploying ? "Redeploying" : "Redeploy"}
+            </button>
+          </li>
+        );
+      })}
      {stacks.length === 0 && <p className="text-gray-500">Keine Stacks gefunden.</p>}
    </ul>
  );
@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { io } from "socket.io-client";
+
+export default function Stacks() {
+  const [stacks, setStacks] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [redeploying, setRedeploying] = useState({}); // { stackId: true/false }
+
+  // WebSocket initialisieren
+  useEffect(() => {
+    const socket = io("/"); 
+    console.log("Socket connected");
+
+    socket.on("redeployStatus", async ({ stackId, status }) => {
+      setRedeploying(prev => ({ ...prev, [stackId]: status }));
+
+      // Wenn Redeploy beendet, Stack-Status neu laden
+      if (!status) {
+        try {
+          const res = await axios.get("/api/stacks");
+          const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
+          setStacks(sortedStacks);
+        } catch (err) {
+          console.error("Fehler beim Aktualisieren des Status nach Redeploy:", err);
+        }
+      }
+    });
+
+    return () => socket.disconnect();
+  }, []);
+
+  // Stacks initial laden
+  const fetchStacks = async () => {
+    try {
+      const res = await axios.get("/api/stacks");
+      const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
+      setStacks(sortedStacks);
+    } catch (err) {
+      console.error("❌ Fehler beim Abrufen der Stacks:", err);
+      setError("Fehler beim Laden der Stacks");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchStacks();
+  }, []);
+
+  // Redeploy eines Stacks
+  const handleRedeploy = async (stackId) => {
+    // Button sofort auf Redeploying setzen
+    setRedeploying(prev => ({ ...prev, [stackId]: true }));
+
+    try {
+      await axios.put(`/api/stacks/${stackId}/redeploy`);
+    } catch (err) {
+      console.error("❌ Fehler beim Redeploy:", err);
+    }
+
+    // Stack-Status immer neu laden
+    try {
+      const res = await axios.get("/api/stacks");
+      const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
+      setStacks(sortedStacks);
+    } catch (err) {
+      console.error("Fehler beim Aktualisieren nach Redeploy:", err);
+    } finally {
+      // Erst nach Datenaktualisierung Button zurücksetzen
+      setRedeploying(prev => ({ ...prev, [stackId]: false }));
+    }
+  };
+
+  if (loading) return <p className="text-gray-600">Lade Stacks...</p>;
+  if (error) return <p className="text-red-500">{error}</p>;
+
+  return (
+    <ul className="space-y-4">
+      {stacks.map(stack => {
+        const isRedeploying = redeploying[stack.Id] || false;
+        return (
+          <li
+            key={stack.Id}
+            className={`p-4 rounded-xl shadow transition flex justify-between items-center ${
+              isRedeploying ? "bg-gray-100 cursor-not-allowed" : "bg-white hover:shadow-md"
+            }`}
+          >
+            <div className="flex items-center space-x-4">
+              <div className="text-xl">{stack.updateStatus}</div>
+              <div>
+                <p className="text-lg font-semibold text-gray-800">{stack.Name}</p>
+                <p className="text-sm text-gray-500">ID: {stack.Id}</p>
+              </div>
+            </div>
+            <button
+              onClick={() => handleRedeploy(stack.Id)}
+              disabled={isRedeploying}
+              className={`px-4 py-2 rounded text-white font-medium transition ${
+                isRedeploying ? "bg-orange-500 cursor-not-allowed" : "bg-blue-500 hover:bg-blue-600"
+              }`}
+            >
+              {isRedeploying ? "Redeploying" : "Redeploy"}
+            </button>
+          </li>
+        );
+      })}
+      {stacks.length === 0 && <p className="text-gray-500">Keine Stacks gefunden.</p>}
+    </ul>
+  );
+}
@@ -1,3 +1,18 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+/* Custom tweaks für GitHub-Next-Style */
+body {
+  font-family: 'Inter', sans-serif;
+  color: white;
+}
+
+button {
+  outline: none;
+  border: none;
+}
+
+button:disabled {
+  opacity: 0.8;
+}
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
-import './index.css'   // <-- Tailwind CSS hier einbinden
+import './index.css'; // Tailwind CSS

 ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import './index.css'; // Tailwind CSS
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
@@ -1,10 +1,13 @@
+/** @type {import('tailwindcss').Config} */
 export default {
  content: [
    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
+    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
+  darkMode: 'class', // Aktiviert Dark Mode via class="dark"
  plugins: [],
 }
+
@@ -0,0 +1,10 @@
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
@@ -8,10 +8,15 @@ export default defineConfig({
    port: 5173,
    proxy: {
      "/api": {
-        target: "http://localhost:4000", // dein Backend
+        target: "http://127.0.0.1:3300", // dein Backend
        changeOrigin: true,
      },
    },
+    allowedHosts: [
+      "10.10.10.23",    // dein Dev-Rechner
+      "stackpulse.d-razz.de",     // der Host, den du brauchst
+      "localhost",
+    ],
  },
 });