added a setting page and auth stuff

vssm_web/vssm_web/src/App.tsx

@@ -1,19 +1,22 @@
 import { useState } from 'react'
 import './App.css'
 import InstancesTable from './components/InstanceTable.tsx'
+import Settings from './components/Settings.tsx'
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [settingsOpen, setSettingsOpen] = useState(false)
 
   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

@@ -1,4 +1,4 @@
-const ADDRESS = "http://127.0.0.1:65000";
+import { getSetting, SettingKey } from "./settings";
 
 type Instance = {
   name: string;
@@ -12,78 +12,79 @@ class api {
 
 } export default api;
 
-export async function fetchInstanceList(): Promise<Instance[]> {
+async function apiFetch(path: string, options: RequestInit = {}, errorContext: string): Promise<Response> {
-  const res = await fetch(`${ADDRESS}/instances/list`);
+  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(`Could not fetch instance list: ${message.trim()}`);
+    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 fetch(`${ADDRESS}/instances/logs?name=${name}`);
+  const res = await apiFetch(`/instances/logs?name=${name}`, {}, "Could not fetch instance logs");
-  if (!res.ok) {
-    const message = await res.text();
-    throw new Error(`Could not fetch instance logs: ${message.trim()}`);
-  }
   return res.json();
 }
 
-export async function sendStartInstanceRequest(name: string) {
+export async function fetchInstanceConfig(name: string): Promise<string> {
-  const res = await fetch(`${ADDRESS}/instances/start?name=${name}`, { method: "POST" });
+  const res = await apiFetch(`/instances/getConfig?name=${name}`, {}, "Could not fetch instance config");
-  if (!res.ok) {
+  return res.text();
-    const message = await res.text();
-    throw new Error(`Start Instance Request failed: ${message.trim()}`);
 }
-  return res.json;
+
+// --- 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 fetch(`${ADDRESS}/instances/stop?name=${name}`, { method: "POST" });
+  const res = await apiFetch(`/instances/stop?name=${name}`, { method: "POST" }, "Stop Instance Request failed");
-  if (!res.ok) {
+  return res.text();
-    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" });
+  const res = await apiFetch(`/instances/create?name=${name}&version=${version}&port=${port}`, { method: "POST" }, "Create instance request failed");
-  if (!res.ok) {
+  return res.text();
-    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" });
+  const res = await apiFetch(`/instances/delete?name=${name}&purge=${purge}`, { method: "POST" }, "Delete instance request failed");
-  if (!res.ok) {
+  return res.text();
-    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" });
+  const res = await apiFetch(`/instances/modify?name=${name}&newName=${newName}&newPort=${newPort}`, { method: "POST" }, "Modify instance request failed");
-  if (!res.ok) {
+  return res.text();
-    const message = await res.text();
-    throw new Error(`Modify instance request failed: ${message.trim()}`);
-  }
-  return res.json;
 }
 
 export async function sendCommandRequest(name: string, payload: string) {
-  const res = await fetch(`${ADDRESS}/instances/command?name=${name}`, { 
+  const res = await apiFetch(`/instances/command?name=${name}`, {
     method: "POST",
     body: JSON.stringify({ command: payload }),
     headers: { "Content-Type": "application/json" },
-  });
+  }, "Send Instance Command failed");
-  if (!res.ok) {
+  return res.text();
-    const message = await res.text();
-    throw new Error(`Send Instance Command failed: ${message.trim()}`);
 }
-  return res.json;
+
+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/vssm_web/src/components/InstanceConfig.tsx

@@ -0,0 +1,50 @@
+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/vssm_web/src/components/InstanceDetail.tsx

@@ -2,6 +2,7 @@ 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;
@@ -58,8 +59,8 @@ export default function InstanceDetail({ instance, onClose, onDeleted, onSaved }
 
       <div className="tabBar">
         <button onClick={() => setActiveTab("general")}>General</button>
-        <button onClick={() => setActiveTab("config")}>Configuration</button>
         <button onClick={() => setActiveTab("console")}>Console</button>
+        <button onClick={() => setActiveTab("config")}>Configuration</button>
         <button onClick={() => setActiveTab("danger")}>Danger Zone</button>
       </div>
 
@@ -83,10 +84,10 @@ export default function InstanceDetail({ instance, onClose, onDeleted, onSaved }
           </div>
         }
 
-        {activeTab === "config" && <p>Config (coming soon)</p>}
-
         {activeTab === "console" && <InstanceConsole instance={instance} />}
 
+        {activeTab === "config" && <InstanceConfig instance={instance}/>}
+
         {activeTab === "danger" && 
           <div className="dangerZone">
             <h3>Danger Zone</h3>

vssm_web/vssm_web/src/components/Settings.tsx

@@ -0,0 +1,45 @@
+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/vssm_web/src/index.css

@@ -154,6 +154,9 @@ header {
   height: auto;
   padding: 5px 20px;
   margin-bottom: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 header h1 {
   font-size: 4em;
@@ -184,6 +187,15 @@ 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;
@@ -443,3 +455,25 @@ input[type="checkbox"] {
   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;
+}

vssm_web/vssm_web/src/settings.ts

@@ -0,0 +1,27 @@
+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);
+}