vssm_web/vssm_web/src/api.ts

@@ -13,37 +13,55 @@ class api {
 } export default api;
 
 export async function fetchInstanceList(): Promise<Instance[]> {
-    const res = await fetch(`${ADDRESS}/instances/list`);
+  const res = await fetch(`${ADDRESS}/instances/list`);
-    if (!res.ok) {
+  if (!res.ok) {
-        const message = await res.text();
+    const message = await res.text();
-        throw new Error(`Could not fetch instance list: ${message.trim()}`);
+    throw new Error(`Could not fetch instance list: ${message.trim()}`);
-    }
+  }
-    return res.json();
+  return res.json();
 }
 
 export async function sendStartInstanceRequest(name: string) {
-    const res = await fetch(`${ADDRESS}/instances/start?name=${name}`, {method: "POST"});
+  const res = await fetch(`${ADDRESS}/instances/start?name=${name}`, { method: "POST" });
-    if (!res.ok) {
+  if (!res.ok) {
-        const message = await res.text();
+    const message = await res.text();
-        throw new Error(`Start Instance Request failed: ${message.trim()}`);
+    throw new Error(`Start Instance Request failed: ${message.trim()}`);
-    }
+  }
-    return res.json;
+  return res.json;
 }
 
 export async function sendStopInstanceRequest(name: string) {
-    const res = await fetch(`${ADDRESS}/instances/stop?name=${name}`, {method: "POST"});
+  const res = await fetch(`${ADDRESS}/instances/stop?name=${name}`, { method: "POST" });
-    if (!res.ok) {
+  if (!res.ok) {
-        const message = await res.text();
+    const message = await res.text();
-        throw new Error(`Stop Instance Request failed: ${message.trim()}`);
+    throw new Error(`Stop Instance Request failed: ${message.trim()}`);
-    }
+  }
-    return res.json;
+  return res.json;
 }
 
 export async function sendCreateInstanceRequest(name: string, version: string, port: number) {
-    const res = await fetch(`${ADDRESS}/instances/create?name=${name}&version=${version}&port=${port}`, {method: "POST"});
+  const res = await fetch(`${ADDRESS}/instances/create?name=${name}&version=${version}&port=${port}`, { method: "POST" });
-    if (!res.ok) {
+  if (!res.ok) {
-        const message = await res.text();
+    const message = await res.text();
-        throw new Error(`Create instance request failed: ${message.trim()}`);
+    throw new Error(`Create instance request failed: ${message.trim()}`);
-    }
+  }
-    return res.json;
+  return res.json;
+}
+
+export async function sendDeleteInstanceRequest(name: string, purge: boolean) {
+  const res = await fetch(`${ADDRESS}/instances/delete?name=${name}&purge=${purge}`, { method: "POST" });
+  if (!res.ok) {
+    const message = await res.text();
+    throw new Error(`Delete instance request failed: ${message.trim()}`);
+  }
+  return res.json;
+}
+
+export async function sendModifyInstanceRequest(name: string, newName: string, newPort: number) {
+  const res = await fetch(`${ADDRESS}/instances/modify?name=${name}&newName=${newName}&newPort=${newPort}`, { method: "POST" });
+  if (!res.ok) {
+    const message = await res.text();
+    throw new Error(`Modify instance request failed: ${message.trim()}`);
+  }
+  return res.json;
 }

vssm_web/vssm_web/src/components/InstanceDetail.tsx

@@ -0,0 +1,124 @@
+import { useState } from "react";
+import type { Instance } from "../types";
+import { sendDeleteInstanceRequest, sendModifyInstanceRequest } from "../api";
+
+type Props = {
+  instance: Instance;
+  onClose: () => void;
+  onDeleted: () => void;
+  onSaved: () => void;
+};
+
+
+export default function InstanceDetail({ instance, onClose, onDeleted, onSaved }: Props) {
+  const [activeTab, setActiveTab] = useState<"general" | "config" | "console" | "danger">("general");
+  
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [purgeFiles, setPurgeFiles] = useState(false);
+  const [deleteLoading, setDeleteLoading] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
+  
+  const [form, setForm] = useState({ name: instance.name, port: String(instance.port) });
+  const [modifyLoading, setModifyLoading] = useState(false);
+  const [modifyError, setModifyError] = useState<string | null>(null);
+
+  const isRunning = instance.status === "RUNNING";
+
+  async function handleDelete() {
+    setDeleteLoading(true);
+    setDeleteError(null);
+    try {
+      await sendDeleteInstanceRequest(instance.name, purgeFiles);
+      onDeleted();
+    } catch (e: any) {
+      setDeleteError(e.message ?? String(e));
+    } finally {
+      setDeleteLoading(false);
+    }
+  }
+
+  async function handleModify() {
+    setModifyLoading(true);
+    setModifyError(null);
+    try {
+      await sendModifyInstanceRequest(instance.name, form.name, parseInt(form.port));
+      onSaved();
+    } catch (e: any) {
+      setModifyError(e.message ?? String(e));
+    } finally {
+      setModifyLoading(false);
+    }
+  }
+
+  return (
+    <div className="instanceDetail">
+      <button onClick={onClose}>← Back</button>
+      <h2>{instance.name}</h2>
+
+      <div className="tabBar">
+        <button onClick={() => setActiveTab("general")}>General</button>
+        <button onClick={() => setActiveTab("config")}>Configuration</button>
+        <button onClick={() => setActiveTab("console")}>Console</button>
+        <button onClick={() => setActiveTab("danger")}>Danger Zone</button>
+      </div>
+
+      <div className="tabContent">
+        {activeTab === "general" && 
+          <div className="tabContent">
+            <p><b>Version:</b> {instance.version}</p>
+            <label>Name
+              <input type="text" name="name" value={form.name} onChange={e => setForm(prev => ({ ...prev, name: e.target.value }))} disabled={isRunning} />
+            </label>
+            <label>Port
+              <input type="text" name="port" value={form.port} onChange={e => setForm(prev => ({ ...prev, port: e.target.value }))} disabled={isRunning} />
+            </label>
+            {isRunning && <p className="warningText">Stop the server to edit these fields.</p>}
+
+            {modifyError && <div className="error">Error: {modifyError}</div>}
+            <button disabled={isRunning || modifyLoading} onClick={handleModify}>
+              {modifyLoading ? "Saving..." : "Save"}
+            </button>
+            
+          </div>
+        }
+
+        {activeTab === "config" && <p>Config (coming soon)</p>}
+
+        {activeTab === "console" && <p>Console (coming soon)</p>}
+
+        {activeTab === "danger" && 
+          <div className="dangerZone">
+            <h3>Danger Zone</h3>
+
+
+            {!showDeleteConfirm && (
+              <button className="deleteButton" onClick={() => setShowDeleteConfirm(true)}
+                disabled={instance.status === "RUNNING"}>
+                Delete Instance
+              </button>
+            )}
+            {instance.status === "RUNNING" && <p className="warningText">Stop the server before deleting.</p>}
+
+            {showDeleteConfirm && (
+              <div className="dangerConfirm">
+                <p>Are you sure you want to delete <b>{instance.name}</b>?</p>
+                <p><b>THIS ACTION CANNOT BE UNDONE</b></p>
+                <label>
+                  <input type="checkbox" checked={purgeFiles} onChange={e => setPurgeFiles(e.target.checked)} />
+                  Also delete all instance files from disk
+                </label>
+                {deleteError && <div className="error">Error: {deleteError}</div>}
+                <div className="flexboxHorizontal">
+                  <button className="deleteButton" onClick={handleDelete} disabled={deleteLoading}>
+                    {deleteLoading ? "Deleting..." : "Confirm Delete"}
+                  </button>
+                  <button className="normalButton" onClick={() => setShowDeleteConfirm(false)}>Cancel</button>
+                </div>
+              </div>
+            )}
+          </div>
+        }
+      </div>
+    </div>
+  );
+}

vssm_web/vssm_web/src/components/InstanceTable.tsx

@@ -1,12 +1,8 @@
 import React, { useEffect, useState } from "react";
-import {fetchInstanceList, sendStartInstanceRequest, sendStopInstanceRequest, sendCreateInstanceRequest} from "../api";
+import { fetchInstanceList, sendStartInstanceRequest, sendStopInstanceRequest, sendCreateInstanceRequest } from "../api";
+import type { Instance } from "../types";
+import InstanceDetail from "./InstanceDetail";
 
-type Instance = {
-  name: string;
-  version: string;
-  port: number;
-  status: string;
-};
 
 export default function InstancesTable() {
   const [instances, setInstances] = useState<Instance[] | null>(null);
@@ -18,6 +14,7 @@ export default function InstancesTable() {
   const [createForm, setCreateForm] = useState({ name: "", version: "", port: "" });
   const [createError, setCreateError] = useState<string | null>(null);
   const [createLoading, setCreateLoading] = useState(false);
+  const [selectedInstance, setSelectedInstance] = useState<Instance | null>(null);
 
   async function refreshInstanceList() {
     setLoading(true);
@@ -102,9 +99,14 @@ export default function InstancesTable() {
   }
 
   useEffect(() => {
-    refreshInstanceList();
+    const interval = setInterval(refreshInstanceList, 3000);
+    return () => clearInterval(interval);
   }, []);
 
+  if (selectedInstance) {
+    return <InstanceDetail instance={selectedInstance} onClose={() => setSelectedInstance(null)} onDeleted={() => { setSelectedInstance(null); refreshInstanceList(); }} onSaved={() => {setSelectedInstance(null); refreshInstanceList(); }}/>;
+  }
+
   return (
     <div className="instancesBlock">
       <h2>Instances</h2>
@@ -139,14 +141,14 @@ export default function InstancesTable() {
               <td>
                 <div className="flexboxHorizontal">
                   <button
-                  id="startStopButton"
+                    id="startStopButton"
-                  className={inst.status === "RUNNING" ? "stop" : "start"}
+                    className={inst.status === "RUNNING" ? "stop" : "start"}
-                  onClick={() => void handleToggle(inst)}
+                    onClick={() => void handleToggle(inst)}
-                  disabled={loading || actionLoading[inst.name]}
+                    disabled={loading || actionLoading[inst.name]}
                   >
                     {actionLoading[inst.name] ? "..." : inst.status === "RUNNING" ? "\u25FC Stop" : "\u25B6 Start"}
                   </button>
-                  <button className="normalButton">&#x270E; Edit</button>
+                  <button className="normalButton" onClick={() => setSelectedInstance(inst)}>&#x270E; Manage</button>
                 </div>
               </td>
             </tr>

vssm_web/vssm_web/src/index.css

@@ -93,7 +93,6 @@ h2 {
   font-weight: 500;
   color: #91a357;
   text-shadow: 3px 3px 5px #2c0105 ;
-  font-family: var(--heading);
 }
 h3 {
   color: var(--text);
@@ -110,7 +109,7 @@ h1 {
   font-family: var(--heading);
 }
 h2 {
-  font-size: 4em;
+  font-size: 3.5em;
   line-height: 118%;
   letter-spacing: -0.24px;
   margin: 0 0 8px;
@@ -211,6 +210,13 @@ input {
   transform: scale(1.05);
 }
 
+input[type="checkbox"] {
+  min-height: unset;
+  padding: 0;
+  width: 16px;
+  background: none;
+}
+
 .normalButton {
   padding: 5px 15px;
   border-radius: 6px;
@@ -272,3 +278,115 @@ input {
 
 
 
+/* -- INSTANCE DETAIL */
+
+.instanceDetail {
+  max-width: 80%;
+  margin: auto;
+  padding: 15px;
+  text-align: left;
+}
+
+.instanceDetail .backButton {
+  background: none;
+  color: var(--text);
+  padding: 0;
+  font-size: medium;
+  opacity: 0.7;
+}
+.instanceDetail .backButton:hover {
+  transform: none;
+  opacity: 1;
+}
+
+.tabBar {
+  display: flex;
+  gap: 4px;
+  border-bottom: 2px solid var(--border);
+  margin-bottom: 24px;
+}
+
+.tabBar button {
+  background: none;
+  color: var(--text);
+  border-radius: 6px 6px 0 0;
+  padding: 8px 20px;
+  opacity: 0.6;
+}
+.tabBar button:hover {
+  transform: none;
+  opacity: 0.85;
+}
+.tabBar button.activeTab {
+  background-color: var(--accent-bg);
+  color: var(--text-h);
+  opacity: 1;
+  border-bottom: 2px solid var(--accent);
+  margin-bottom: -2px;
+}
+
+.tabContent {
+  background-color: var(--accent-bg);
+  padding: 24px;
+  border-radius: 0 8px 8px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  text-align: left;
+}
+
+.tabContent label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-weight: 600;
+  font-size: 0.9em;
+  max-width: 400px;
+}
+
+.warningText {
+  color: #a06000;
+  font-size: 0.9em;
+}
+
+/* Danger zone */
+
+.dangerZone {
+  border: 2px solid #a40000;
+  border-radius: 8px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.dangerZone h3 {
+  color: #a40000;
+  margin: 0;
+}
+
+.dangerConfirm {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 8px;
+  border-top: 1px solid #a40000;
+}
+
+.dangerConfirm label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.95em;
+  font-weight: normal;
+}
+
+.deleteButton {
+  background-color: #a40000;
+  max-width: fit-content;
+}
+
+.deleteButton:hover {
+  background-color: #cc0000;
+}

vssm_web/vssm_web/src/types.ts

@@ -0,0 +1,6 @@
+export type Instance = {
+  name: string;
+  version: string;
+  port: number;
+  status: string;
+};