- added alert dialog

- improved scroll logs handling
- allow empty server and model path if user wants to use another llm engine

Co-authored-by: Copilot <copilot@github.com>

Author: l3utterfly

index.html

@@ -156,4 +156,13 @@ ipcMain.handle("server:stop", async (): Promise<string> => {
   } catch (err) {
     return `Failed to stop server: ${err}`;
   }
+});
+
+ipcMain.handle('dialog:alert', (_event, title: string, message: string) => {
+  return dialog.showMessageBox({
+    type: 'info',
+    title: title,
+    message,
+    buttons: ['OK'],
+  });
 });

src/main.ts

@@ -47,4 +47,9 @@ contextBridge.exposeInMainWorld("electronBridge", {
      * @returns the path of the selected model file, or null if the dialog was cancelled
      */
     openFileDialog: () => ipcRenderer.invoke("dialog:openFile"),
+
+    /**
+     * Show an alert dialog with a message and optional title.
+     */
+    showAlert: (title: string, message: string) => ipcRenderer.invoke('dialog:alert', title, message),
 });

src/preload.ts

@@ -1,22 +1,43 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import LlmServerPanel from './screens/LLMServerPanel';
-import SettingsPage from './screens/SettingsPage';
+import React from "react";
+import { createRoot } from "react-dom/client";
+import LlmServerPanel from "./screens/LLMServerPanel";
+import SettingsPage from "./screens/SettingsPage";
 
 function App() {
-  const [page, setPage] = React.useState<"main" | "settings">("main");
- 
-  const goToSettings = () => setPage("settings");
-  const goBack = () => setPage("main");
- 
-  if (page === "settings") {
-    return <SettingsPage onBack={goBack} />;
-  }
- 
-  return <LlmServerPanel goToSettings={goToSettings} />;
+  const [showSettings, setShowSettings] = React.useState(false);
+  
+  // Increment settingsRefreshCounter to trigger a refresh in LlmServerPanel when coming back from settings page
+  const [settingsRefreshCounter, setSettingsRefreshCounter] = React.useState(0);
+
+  return (
+    <>
+      <LlmServerPanel
+        goToSettings={() => setShowSettings(true)}
+        settingsRefreshCounter={settingsRefreshCounter}
+      />
+      {showSettings && (
+        <div
+          style={{
+            position: "fixed",
+            inset: 0,
+            zIndex: 100,
+            backgroundColor: "rgba(0,0,0,0.85)",
+            backdropFilter: "blur(4px)",
+          }}
+        >
+          <SettingsPage
+            onBack={() => {
+              setShowSettings(false);
+              setSettingsRefreshCounter((prev) => prev + 1);
+            }}
+          />
+        </div>
+      )}
+    </>
+  );
 }
 
-const container = document.getElementById('root');
+const container = document.getElementById("root");
 if (container) {
   createRoot(container).render(<App />);
-}
+}

src/renderer.tsx

@@ -25,7 +25,8 @@ const C = {
   successGlow: "rgba(52, 211, 153, 0.20)",
 };
 
-export const LAYLA_SIGNALLING_URL = "https://layla-signalling-production.up.railway.app";
+const LAYLA_SIGNALLING_URL =
+  "https://layla-signalling-production.up.railway.app";
 const WEBRTC_DATA_CHANNEL_LABEL = "layla-datachannel";
 const CHUNK_SIZE = 16_000;
 const MAX_SERVER_LOGS_TO_DISPLAY = 500;
@@ -46,27 +47,6 @@ interface LogEntry {
   msg: string;
 }
 
-// ─── IPC Bridge (Electron main process) ─────────────────────────────────────────
-// This assumes you expose these via contextBridge/preload.
-// Adjust to match your actual preload API.
-
-interface ElectronBridge {
-  startServer: (
-    serverPath: string,
-    modelPath: string,
-    visionModelPath: string,
-    additionalArgs: string,
-  ) => Promise<void>;
-  stopServer: () => Promise<void>;
-  getDeviceName: () => Promise<string>;
-  onServerLog: (callback: (log: string) => void) => () => void;
-}
-
-function getElectronBridge(): ElectronBridge {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return (window as any).electronBridge as ElectronBridge;
-}
-
 // ─── Helpers ────────────────────────────────────────────────────────────────────
 
 const generateTimestamp = (offsetMs = 0): string => {
@@ -249,12 +229,18 @@ const LogViewer: React.FC<{ logs: LogEntry[] }> = ({ logs }) => {
 
   useEffect(() => {
     if (expanded && scrollRef.current) {
-      setTimeout(() => {
-        scrollRef.current?.scrollTo({
-          top: scrollRef.current.scrollHeight,
-          behavior: "smooth",
-        });
-      }, 100);
+      const el = scrollRef.current;
+      const isNearBottom =
+        el.scrollHeight - el.scrollTop - el.clientHeight < 100;
+
+      if (isNearBottom) {
+        setTimeout(() => {
+          scrollRef.current?.scrollTo({
+            top: scrollRef.current.scrollHeight,
+            behavior: "smooth",
+          });
+        }, 100);
+      }
     }
   }, [logs, expanded]);
 
@@ -329,9 +315,10 @@ const QrModal: React.FC<{
 
 // ─── Main Component ─────────────────────────────────────────────────────────────
 
-const LlmServerPanel: React.FC<{ goToSettings: () => void }> = ({
-  goToSettings,
-}) => {
+const LlmServerPanel: React.FC<{
+  goToSettings: () => void;
+  settingsRefreshCounter: number; // used to trigger settings reload when coming back from settings page
+}> = ({ goToSettings, settingsRefreshCounter }) => {
   // ── State ──
   const [running, setRunning] = useState(false);
   const [status, setStatus] = useState("Idle");
@@ -379,7 +366,10 @@ const LlmServerPanel: React.FC<{ goToSettings: () => void }> = ({
 
   const addLog = (level: LogType, msg: string) => {
     const ts = generateTimestamp();
-    setLogs((prev) => [...prev.slice(-(MAX_SERVER_LOGS_TO_DISPLAY - 1)), { ts, type: level, msg }]);
+    setLogs((prev) => [
+      ...prev.slice(-(MAX_SERVER_LOGS_TO_DISPLAY - 1)),
+      { ts, type: level, msg },
+    ]);
   };
 
   // ── WebRTC (browser native) ──
@@ -711,34 +701,29 @@ const LlmServerPanel: React.FC<{ goToSettings: () => void }> = ({
     // it is important to update the running state immediately to avoid async function calls trying to use the old RTC connection after we've initiated shutdown
     runningRef.current = false;
 
-    await getElectronBridge().stopServer();
+    await window.electronBridge.stopServer();
   };
 
   const startServer = async () => {
-    if (!modelPathRef.current) {
-      throw new Error(
-        "Model path is not set. Please set the model path in settings.",
+    if (modelPathRef.current && localServerPathRef.current) {
+      setStatus("Starting llama.cpp server...");
+      addLog("INFO", "Starting llama.cpp server…");
+
+      await window.electronBridge.startServer(
+        localServerPathRef.current,
+        modelPathRef.current,
+        visionModelPathRef.current || "",
+        additionalArgsRef.current || "",
       );
-    }
-    if (!localServerPathRef.current) {
-      throw new Error(
-        "Local server path is not set. Please set it in settings.",
+    } else {
+      addLog(
+        "WARN",
+        "Model or server path is not set. Skipping LLM server start (assume another server is running).",
       );
     }
 
-    setStatus("Starting llama.cpp server...");
-    addLog("INFO", "Starting llama.cpp server…");
-
-    await getElectronBridge().startServer(
-      localServerPathRef.current,
-      modelPathRef.current,
-      visionModelPathRef.current || "",
-      additionalArgsRef.current || "",
-    );
-
     runningRef.current = true;
 
-    // give it a second for the animation to finish to feel more polished
     setTimeout(() => {
       setShowQrCode(true);
     }, 1000);
@@ -769,8 +754,7 @@ const LlmServerPanel: React.FC<{ goToSettings: () => void }> = ({
   // ── Load settings ──
 
   const loadSettings = async () => {
-    const bridge = getElectronBridge();
-    const computerName = await bridge.getDeviceName();
+    const computerName = await window.electronBridge.getDeviceName();
 
     const settings = await UserSettingsService.getMultipleSettings([
       UserSettingKey.MODEL_PATH,
@@ -827,6 +811,21 @@ const LlmServerPanel: React.FC<{ goToSettings: () => void }> = ({
     };
   }, []);
 
+  useEffect(() => {
+    // this logic skips the initial load when app starts
+    if (settingsRefreshCounter > 0) {
+      // reload settings (they won't be applied if the server is already running, but will be picked up on restart)
+      loadSettings()
+        .then(() => {
+          window.electronBridge.showAlert(
+            "Settings updated",
+            "Your changes have been saved. If the server is currently running, please restart it to apply the new settings.",
+          );
+        })
+        .catch((e) => addLog("ERROR", `Failed to load settings: ${e.message}`));
+    }
+  }, [settingsRefreshCounter]);
+
   // ── Init ──
 
   useEffect(() => {

src/screens/LLMServerPanel.tsx

@@ -69,8 +69,7 @@ const SETTING_SECTIONS: {
       {
         key: UserSettingKey.SERVER_SECRET_KEY,
         label: "Server Secret Key",
-        description:
-          "Secret key used to authenticate with the server.",
+        description: "Secret key used to authenticate with the server.",
         type: "text",
         placeholder: "Enter your server secret key",
         tag: "SECRET",
@@ -601,11 +600,17 @@ const SettingRow: React.FC<SettingRowProps> = ({
         />
       ) : (
         <div className="sp-file-row">
-          <div
+          <input
             className={`sp-file-display ${value ? "sp-file-display--filled" : "sp-file-display--empty"}`}
-          >
-            {value || "No file selected"}
-          </div>
+            value={value}
+            onChange={(e) => onChange(meta.key, e.target.value)}
+            placeholder={meta.placeholder ?? ""}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            autoComplete="off"
+            autoCorrect="off"
+            spellCheck={false}
+          />
           <Btn label="Browse" onPress={pickFile} variant="outline" />
         </div>
       )}
@@ -635,11 +640,7 @@ const Toast: React.FC<{ message: string }> = ({ message }) => {
         ? "sp-toast--exiting"
         : "";
 
-  return (
-    <div className={`sp-toast ${animClass}`}>
-      {message}
-    </div>
-  );
+  return <div className={`sp-toast ${animClass}`}>{message}</div>;
 };
 
 // ─── Main page ──────────────────────────────────────────────────────────────────
@@ -648,7 +649,7 @@ interface SettingsPageProps {
 }
 
 const SettingsPage: React.FC<SettingsPageProps> = ({ onBack }) => {
-  const [version, setVersion] = useState<string>('1.0.0');
+  const [version, setVersion] = useState<string>("1.0.0");
   const [settings, setSettings] = useState<Record<
     UserSettingKey,
     string
@@ -716,7 +717,7 @@ const SettingsPage: React.FC<SettingsPageProps> = ({ onBack }) => {
     try {
       for (const k of Object.values(UserSettingKey)) {
         const val = settings[k];
-        if (val === "" || val == null) {
+        if (val == null) {
           await UserSettingsService.removeSetting(k);
         } else {
           await UserSettingsService.saveSetting(k, val as any);
@@ -761,7 +762,9 @@ const SettingsPage: React.FC<SettingsPageProps> = ({ onBack }) => {
             Back
           </button>
           <div>
-            <h1 className="sp-heading">Settings&nbsp;<span style={{fontSize: 12}}>(v{version})</span></h1>
+            <h1 className="sp-heading">
+              Settings&nbsp;<span style={{ fontSize: 12 }}>(v{version})</span>
+            </h1>
             <div className="sp-heading-sub">
               Manage server configuration and model preferences
             </div>
@@ -833,4 +836,4 @@ const SettingsPage: React.FC<SettingsPageProps> = ({ onBack }) => {
   );
 };
 
-export default SettingsPage;
+export default SettingsPage;

src/screens/SettingsPage.tsx

@@ -2,11 +2,12 @@ export interface ElectronAPI {
   getAppVersion: () => Promise<string>;
   openExternal: (url: string) => void;
   openFileDialog: () => Promise<string | null>;
-  startServer: (serverPath: string, modelPath: string, additionalArgs: string) => Promise<void>;
+  startServer: (serverPath: string, modelPath: string, visionModelPath: string, additionalArgs: string) => Promise<void>;
   stopServer: () => Promise<void>;
   getDeviceName: () => Promise<string>;
   onServerStdout: (callback: (data: string) => void) => () => void; // returns a cleanup function
   onServerStderr: (callback: (data: string) => void) => () => void; // returns a cleanup function
+  showAlert: (title: string, message: string) => Promise<void>;
 }
 
 declare global {