Merge pull request 'Update README' (#2) from dev into master

Reviewed-on: #2

README.md

@@ -37,10 +37,10 @@ WIP
         - [x] Server Name
         - [x] Port
         - [ ] Full instance configuration
-    - [x] Console
+    - [ ] Console
-        - [x] Fully interactive instance console 
+        - [ ] Fully interactive instance console 
-            - [x] Send commands to servers
+            - [ ] Send commands to servers
-            - [x] View logs
+            - [ ] View logs
     - [ ] Automated server backups
 
 - [ ] Access authentication

vssm_web/package.json

@@ -1,34 +1 @@
-{
+{}
-  "name": "vssm_web",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.29.0",
-    "@eslint/js": "^10.0.1",
-    "@rolldown/plugin-babel": "^0.2.3",
-    "@types/babel__core": "^7.20.5",
-    "@types/node": "^24.12.3",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "babel-plugin-react-compiler": "^1.0.0",
-    "eslint": "^10.3.0",
-    "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^17.6.0",
-    "typescript": "~6.0.2",
-    "typescript-eslint": "^8.59.2",
-    "vite": "^8.0.12"
-  }
-}

vssm_web/src/api.ts

@@ -1,90 +0,0 @@
-import { getSetting, SettingKey } from "./settings";
-
-type Instance = {
-  name: string;
-  version: string;
-  port: number;
-  status: string;
-};
-
-class api {
-
-
-} export default api;
-
-async function apiFetch(path: string, options: RequestInit = {}, errorContext: string): Promise<Response> {
-  const token = getSetting(SettingKey.Token);
-  const headers = {
-    ...options.headers,
-    ...(token ? { Authorization: `Bearer ${token}` } : {}),
-  };
-
-  const res = await fetch(`${getSetting(SettingKey.Address)}${path}`, { ...options, headers });
-  if (!res.ok) {
-    const message = await res.text();
-    throw new Error(`${errorContext}: ${message.trim()}`);
-  }
-  return res;
-}
-
-// --- GET CALLS ---
-
-export async function fetchInstanceList(): Promise<Instance[]> {
-  const res = await apiFetch("/instances/list", {}, "Could not fetch instance list");
-  return res.json();
-}
-
-export async function fetchInstanceLogs(name: string): Promise<string[]> {
-  const res = await apiFetch(`/instances/logs?name=${name}`, {}, "Could not fetch instance logs");
-  return res.json();
-}
-
-export async function fetchInstanceConfig(name: string): Promise<string> {
-  const res = await apiFetch(`/instances/getConfig?name=${name}`, {}, "Could not fetch instance config");
-  return res.text();
-}
-
-// --- POST CALLS ---
-
-export async function sendStartInstanceRequest(name: string) {
-  const res = await apiFetch(`/instances/start?name=${name}`, { method: "POST" }, "Start Instance Request failed");
-  return res.text();
-}
-
-export async function sendStopInstanceRequest(name: string) {
-  const res = await apiFetch(`/instances/stop?name=${name}`, { method: "POST" }, "Stop Instance Request failed");
-  return res.text();
-}
-
-export async function sendCreateInstanceRequest(name: string, version: string, port: number) {
-  const res = await apiFetch(`/instances/create?name=${name}&version=${version}&port=${port}`, { method: "POST" }, "Create instance request failed");
-  return res.text();
-}
-
-export async function sendDeleteInstanceRequest(name: string, purge: boolean) {
-  const res = await apiFetch(`/instances/delete?name=${name}&purge=${purge}`, { method: "POST" }, "Delete instance request failed");
-  return res.text();
-}
-
-export async function sendModifyInstanceRequest(name: string, newName: string, newPort: number) {
-  const res = await apiFetch(`/instances/modify?name=${name}&newName=${newName}&newPort=${newPort}`, { method: "POST" }, "Modify instance request failed");
-  return res.text();
-}
-
-export async function sendCommandRequest(name: string, payload: string) {
-  const res = await apiFetch(`/instances/command?name=${name}`, {
-    method: "POST",
-    body: JSON.stringify({ command: payload }),
-    headers: { "Content-Type": "application/json" },
-  }, "Send Instance Command failed");
-  return res.text();
-}
-
-export async function sendSetInstanceConfigRequest(name: string, config: string) {
-  const res = await apiFetch(`/instances/setConfig?name=${name}`, {
-    method: "POST",
-    body: config,
-    headers: { "Content-Type": "application/json" },
-  }, "Set instance config request failed");
-  return res.text();
-}

vssm_web/src/components/InstanceConfig.tsx

@@ -1,50 +0,0 @@
-import { useState, useEffect } from "react";
-import type { Instance } from "../types";
-import { fetchInstanceConfig, sendSetInstanceConfigRequest } from "../api";
-
-type Props = {
-  instance: Instance;
-};
-
-export default function InstanceConfig({ instance }: Props) {
-  const [config, setConfig] = useState("");
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    fetchInstanceConfig(instance.name)
-      .then(setConfig)
-      .catch(e => setError(e.message ?? String(e)))
-      .finally(() => setLoading(false));
-  }, [instance.name]);
-
-  async function handleSave() {
-    setSaving(true);
-    setError(null);
-    try {
-      await sendSetInstanceConfigRequest(instance.name, config);
-    } catch (e: any) {
-      setError(e.message ?? String(e));
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  if (loading) return <p>Loading config...</p>;
-
-  return (
-    <div className="configEditor">
-      {error && <div className="error">Error: {error}</div>}
-      <textarea
-        value={config}
-        onChange={e => setConfig(e.target.value)}
-        rows={25}
-        spellCheck={false}
-      />
-      <button disabled={saving} onClick={handleSave}>
-        {saving ? "Saving..." : "Save"}
-      </button>
-    </div>
-  );
-}

vssm_web/src/components/InstanceConsole.tsx

@@ -1,68 +0,0 @@
-import type { Instance } from "../types";
-import { useEffect, useRef, useState } from "react";
-import { fetchInstanceLogs, sendCommandRequest } from "../api";
-
-type Props = {
-  instance: Instance;
-};
-
-export default function InstanceConsole({ instance }: Props) {
-  const [logs, setLogs] = useState<string[]>([]);
-  const [command, setCommand] = useState("");
-  const [autoScroll, setAutoScroll] = useState(true);
-  const bottomRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-  async function poll() {
-      try {
-      const lines = await fetchInstanceLogs(instance.name);
-      setLogs(lines);
-      } catch (e) {
-      console.error(e);
-      }
-  }
-
-  poll();
-  const interval = setInterval(poll, 2000);
-  return () => clearInterval(interval);
-  }, [instance.name]);
-
-  // useEffect(() => {
-  //   bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  // }, [logs]);
-
-  useEffect(() => {
-    if (autoScroll) {
-      bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-    }
-  }, [logs, autoScroll]);
-
-  async function handleSendCommand() {
-    if (!command.trim()) return;
-    try {
-      await sendCommandRequest(instance.name, command);
-      setCommand("");
-    } catch (e: any) {
-      console.error(e);
-    }
-  }
-
-  return (
-    <div className="consoleWrapper">
-      <div className="consoleOutput">
-        {logs.map((line, i) => <p key={i} className="consoleLine" dangerouslySetInnerHTML={{ __html: line }} />)}
-        <div ref={bottomRef} />
-      </div>
-      <div className="consoleInput flexboxHorizontal">
-        <input value={command} onChange={e => setCommand(e.target.value)}
-          onKeyDown={e => { if (e.key === "Enter") handleSendCommand(); }}
-          placeholder="Enter command..." />
-        <button onClick={handleSendCommand}>Send</button>
-        <label className="autoScrollLabel">
-        <input type="checkbox" checked={autoScroll} onChange={e => setAutoScroll(e.target.checked)} />
-          Auto-scroll
-        </label>
-      </div>
-    </div>
-  );
-}

vssm_web/src/components/Settings.tsx

@@ -1,45 +0,0 @@
-import { useState } from "react";
-import { getSetting, setSetting, SettingKey } from "../settings";
-
-type Props = {
-  onClose: () => void;
-};
-
-export default function Settings({ onClose }: Props) {
-  const [address, setAddress] = useState(getSetting(SettingKey.Address));
-  const [token, setToken] = useState(getSetting(SettingKey.Token));
-  const [saved, setSaved] = useState(false);
-
-  function handleSave() {
-    setSetting(SettingKey.Address, address);
-    setSetting(SettingKey.Token, token);
-    setSaved(true);
-  }
-
-  return (
-    <div className="modalBackdrop" onClick={onClose}>
-      <div className="modalCard" onClick={e => e.stopPropagation()}>
-        <h3>Settings</h3>
-
-        <label>
-          API Address
-          <input type="text" value={address} onChange={e => { setAddress(e.target.value); setSaved(false); }} />
-        </label>
-
-        <label>
-          Auth Token
-          <input type="text" value={token} onChange={e => { setToken(e.target.value); setSaved(false); }} />
-        </label>
-
-        <p className="warningText">Stored locally in this browser only.</p>
-
-        {saved && <p>Saved.</p>}
-
-        <div className="flexboxHorizontal">
-          <button onClick={handleSave}>Save</button>
-          <button className="normalButton" onClick={onClose}>Close</button>
-        </div>
-      </div>
-    </div>
-  );
-}

vssm_web/src/settings.ts

@@ -1,27 +0,0 @@
-export const SettingKey = {
-  Address: "vssm_api_address",
-  Token: "vssm_auth_token",
-} as const;
-
-export type SettingKey = typeof SettingKey[keyof typeof SettingKey];
-
-const SettingDefaults: Record<SettingKey, string> = {
-  [SettingKey.Address]: "",
-  [SettingKey.Token]: "",
-};
-
-export function getSetting(key: SettingKey): string {
-  const value = localStorage.getItem(key);
-  if (!value) {
-    return SettingDefaults[key];
-  }
-  return value;
-}
-
-export function setSetting(key: SettingKey, value: string) {
-  localStorage.setItem(key, value);
-}
-
-export function clearSetting(key: SettingKey) {
-  localStorage.removeItem(key);
-}

vssm_web/vssm_web/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "vssm_web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@eslint/js": "^10.0.1",
+    "@rolldown/plugin-babel": "^0.2.3",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^24.12.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.59.2",
+    "vite": "^8.0.12"
+  }
+}

vssm_web/vssm_web/src/App.tsx

@@ -1,22 +1,19 @@
 import { useState } from 'react'
 import './App.css'
 import InstancesTable from './components/InstanceTable.tsx'
-import Settings from './components/Settings.tsx'
 
 function App() {
-  const [settingsOpen, setSettingsOpen] = useState(false)
+  const [count, setCount] = useState(0)
 
   return (
     <>
       <section id='main'>
         <header>
           <h1>VSSM - Dashboard</h1>
-          <button onClick={() => setSettingsOpen(true)}>⚙</button>
         </header>
         <div className='contentBox'>
           <InstancesTable />
         </div>
-        {settingsOpen && <Settings onClose={() => setSettingsOpen(false)} />}
       </section>
     </>
   )

vssm_web/vssm_web/src/api.ts

@@ -0,0 +1,67 @@
+const ADDRESS = "http://127.0.0.1:65000";
+
+type Instance = {
+  name: string;
+  version: string;
+  port: number;
+  status: string;
+};
+
+class api {
+
+
+} export default api;
+
+export async function fetchInstanceList(): Promise<Instance[]> {
+  const res = await fetch(`${ADDRESS}/instances/list`);
+  if (!res.ok) {
+    const message = await res.text();
+    throw new Error(`Could not fetch instance list: ${message.trim()}`);
+  }
+  return res.json();
+}
+
+export async function sendStartInstanceRequest(name: string) {
+  const res = await fetch(`${ADDRESS}/instances/start?name=${name}`, { method: "POST" });
+  if (!res.ok) {
+    const message = await res.text();
+    throw new Error(`Start Instance Request failed: ${message.trim()}`);
+  }
+  return res.json;
+}
+
+export async function sendStopInstanceRequest(name: string) {
+  const res = await fetch(`${ADDRESS}/instances/stop?name=${name}`, { method: "POST" });
+  if (!res.ok) {
+    const message = await res.text();
+    throw new Error(`Stop Instance Request failed: ${message.trim()}`);
+  }
+  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" });
+  if (!res.ok) {
+    const message = await res.text();
+    throw new Error(`Create instance request failed: ${message.trim()}`);
+  }
+  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

@@ -1,8 +1,6 @@
 import { useState } from "react";
 import type { Instance } from "../types";
 import { sendDeleteInstanceRequest, sendModifyInstanceRequest } from "../api";
-import InstanceConsole from "./InstanceConsole";
-import InstanceConfig from "./InstanceConfig";
 
 type Props = {
   instance: Instance;
@@ -59,8 +57,8 @@ export default function InstanceDetail({ instance, onClose, onDeleted, onSaved }
 
       <div className="tabBar">
         <button onClick={() => setActiveTab("general")}>General</button>
-        <button onClick={() => setActiveTab("console")}>Console</button>
         <button onClick={() => setActiveTab("config")}>Configuration</button>
+        <button onClick={() => setActiveTab("console")}>Console</button>
         <button onClick={() => setActiveTab("danger")}>Danger Zone</button>
       </div>
 
@@ -84,9 +82,9 @@ export default function InstanceDetail({ instance, onClose, onDeleted, onSaved }
           </div>
         }
 
-        {activeTab === "console" && <InstanceConsole instance={instance} />}
+        {activeTab === "config" && <p>Config (coming soon)</p>}
 
-        {activeTab === "config" && <InstanceConfig instance={instance}/>}
+        {activeTab === "console" && <p>Console (coming soon)</p>}
 
         {activeTab === "danger" && 
           <div className="dangerZone">

vssm_web/vssm_web/src/index.css

@@ -154,9 +154,6 @@ header {
   height: auto;
   padding: 5px 20px;
   margin-bottom: 25px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
 }
 header h1 {
   font-size: 4em;
@@ -187,15 +184,6 @@ header h1 {
   min-width: 300px;
 }
 
-.modalCard label {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  font-weight: 600;
-  font-size: 0.9em;
-  text-align: left;
-}
-
 /* Normal components styling */
 button {
   transition: transform 0.15s ease-in-out 0s;
@@ -401,79 +389,4 @@ input[type="checkbox"] {
 
 .deleteButton:hover {
   background-color: #cc0000;
-}
-
-/* CONSOLE */
-.consoleWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.consoleOutput {
-  background-color: #1a1a1a;
-  border-radius: 6px;
-  padding: 12px;
-  height: 400px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.consoleLine {
-  font-family: var(--mono);
-  font-size: 0.85em;
-  color: #d4d4d4;
-  text-align: left;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-.consoleInput input {
-  flex: 1;
-}
-
-.autoScrollLabel {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 0.85em;
-  color: var(--text);
-}
-
-.consoleLine code {
-  background-color: #2d2d2d;
-  color: #91a357;
-  padding: 1px 5px;
-  border-radius: 3px;
-  font-family: var(--mono);
-  font-size: 0.95em;
-}
-
-.consoleLine i {
-  color: #a0a0c0;
-  font-style: italic;
-}
-
-/* Config editor styles */
-.configEditor {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.configEditor textarea {
-  font-family: var(--mono);
-  font-size: 0.85em;
-  background-color: #1a1a1a;
-  color: #d4d4d4;
-  border-radius: 6px;
-  padding: 12px;
-  border: transparent 0px solid;
-  resize: vertical;
-}
-
-.configEditor button {
-  max-width: fit-content;
 }