feat: add Web App Port management alongside API Server Port and fix square 512x512 app launcher icon

2026-10-30 14:23:12 -05:00
parent 1d209fedd2
commit 29dbc27c41
6 changed files with 161 additions and 18 deletions
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 112 512 288" width="512" height="288" role="img" aria-label="PubScript">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" preserveAspectRatio="xMidYMid meet" role="img" aria-label="PubScript">
  <defs>
    <linearGradient id="ps-gold" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#f9edc4"/>
@@ -19,18 +19,18 @@

  <g filter="url(#ps-shadow)">
    <!-- P tile -->
-    <circle cx="126" cy="256" r="120" fill="url(#ps-gold)"/>
-    <circle cx="126" cy="256" r="104" fill="url(#ps-ivory)"/>
-    <circle cx="126" cy="256" r="104" fill="none" stroke="#8a6d1c" stroke-width="1.5" opacity="0.5"/>
-    <text x="126" y="256" text-anchor="middle" dominant-baseline="central"
+    <circle cx="132" cy="256" r="120" fill="url(#ps-gold)"/>
+    <circle cx="132" cy="256" r="104" fill="url(#ps-ivory)"/>
+    <circle cx="132" cy="256" r="104" fill="none" stroke="#8a6d1c" stroke-width="1.5" opacity="0.5"/>
+    <text x="132" y="256" text-anchor="middle" dominant-baseline="central"
          font-family="Georgia, 'Times New Roman', serif" font-size="152" font-weight="600"
          fill="#21242c">P</text>

    <!-- S tile -->
-    <circle cx="386" cy="256" r="120" fill="url(#ps-gold)"/>
-    <circle cx="386" cy="256" r="104" fill="url(#ps-ivory)"/>
-    <circle cx="386" cy="256" r="104" fill="none" stroke="#8a6d1c" stroke-width="1.5" opacity="0.5"/>
-    <text x="386" y="256" text-anchor="middle" dominant-baseline="central"
+    <circle cx="380" cy="256" r="120" fill="url(#ps-gold)"/>
+    <circle cx="380" cy="256" r="104" fill="url(#ps-ivory)"/>
+    <circle cx="380" cy="256" r="104" fill="none" stroke="#8a6d1c" stroke-width="1.5" opacity="0.5"/>
+    <text x="380" y="256" text-anchor="middle" dominant-baseline="central"
          font-family="Georgia, 'Times New Roman', serif" font-size="152" font-weight="600"
          fill="#21242c">S</text>
  </g>
@@ -372,6 +372,8 @@ export const api = {
    enabled: boolean;
    port: number;
    activePort?: number;
+    webPort?: number;
+    activeWebPort?: number;
    startOnBoot: boolean;
    projectDirectory?: string;
  }> => {
@@ -388,6 +390,8 @@ export const api = {
            enabled: boolean;
            port: number;
            activePort?: number;
+            webPort?: number;
+            activeWebPort?: number;
            startOnBoot: boolean;
            projectDirectory?: string;
          };
@@ -396,6 +400,8 @@ export const api = {
            enabled: data.enabled,
            port: data.port,
            ...(data.activePort !== undefined ? { activePort: data.activePort } : {}),
+            ...(data.webPort !== undefined ? { webPort: data.webPort } : {}),
+            ...(data.activeWebPort !== undefined ? { activeWebPort: data.activeWebPort } : {}),
            startOnBoot: data.startOnBoot,
            ...(data.projectDirectory ? { projectDirectory: data.projectDirectory } : {}),
          };
@@ -408,6 +414,7 @@ export const api = {
      online: false,
      enabled: true,
      port: portHint ?? 8081,
+      webPort: 5173,
      startOnBoot: false,
    };
  },
@@ -416,6 +423,7 @@ export const api = {
    patch: {
      enabled?: boolean;
      port?: number;
+      webPort?: number;
      startOnBoot?: boolean;
      projectDirectory?: string;
    },
@@ -425,6 +433,8 @@ export const api = {
    enabled: boolean;
    port: number;
    activePort?: number;
+    webPort?: number;
+    activeWebPort?: number;
    startOnBoot: boolean;
    projectDirectory?: string;
  }> => {
@@ -446,6 +456,8 @@ export const api = {
            enabled: boolean;
            port: number;
            activePort?: number;
+            webPort?: number;
+            activeWebPort?: number;
            startOnBoot: boolean;
            projectDirectory?: string;
          };
@@ -454,6 +466,8 @@ export const api = {
            enabled: data.enabled,
            port: data.port,
            ...(data.activePort !== undefined ? { activePort: data.activePort } : {}),
+            ...(data.webPort !== undefined ? { webPort: data.webPort } : {}),
+            ...(data.activeWebPort !== undefined ? { activeWebPort: data.activeWebPort } : {}),
            startOnBoot: data.startOnBoot,
            ...(data.projectDirectory ? { projectDirectory: data.projectDirectory } : {}),
          };
@@ -466,6 +480,7 @@ export const api = {
      online: false,
      enabled: patch.enabled ?? true,
      port: patch.port ?? portHint ?? 8081,
+      ...(patch.webPort !== undefined ? { webPort: patch.webPort } : {}),
      startOnBoot: patch.startOnBoot ?? false,
      ...(patch.projectDirectory ? { projectDirectory: patch.projectDirectory } : {}),
    };
@@ -67,6 +67,7 @@ export function Settings() {
  const [probing, setProbing] = useState(false);

  // Server & Project Directory state
+  const [webPortDraft, setWebPortDraft] = useState<string>(String(s.webPort || 5173));
  const [portDraft, setPortDraft] = useState<string>(String(s.serverPort));
  const [projectDirDraft, setProjectDirDraft] = useState<string>(
    s.projectDirectory || "~/Documents/PubScript",
@@ -74,6 +75,7 @@ export function Settings() {
  const [browseProjectDirOpen, setBrowseProjectDirOpen] = useState<boolean>(false);
  const [serverOnline, setServerOnline] = useState<boolean>(false);
  const [activeRunningPort, setActiveRunningPort] = useState<number | null>(null);
+  const [activeRunningWebPort, setActiveRunningWebPort] = useState<number | null>(null);
  const [savingServerCfg, setSavingServerCfg] = useState<boolean>(false);

  useEffect(() => {
@@ -82,14 +84,19 @@ export function Settings() {
      if (cancelled) return;
      setServerOnline(res.online);
      setActiveRunningPort(res.activePort ?? res.port);
+      setActiveRunningWebPort(res.activeWebPort ?? res.webPort ?? s.webPort);
      if (res.online) {
        setPortDraft(String(res.port));
+        if (res.webPort) {
+          setWebPortDraft(String(res.webPort));
+        }
        if (res.projectDirectory) {
          setProjectDirDraft(res.projectDirectory);
        }
        set({
          serverEnabled: res.enabled,
          serverPort: res.port,
+          ...(res.webPort ? { webPort: res.webPort } : {}),
          serverStartOnBoot: res.startOnBoot,
          ...(res.projectDirectory ? { projectDirectory: res.projectDirectory } : {}),
        });
@@ -139,10 +146,28 @@ export function Settings() {
    }
  };

+  const handleApplyWebPort = async () => {
+    const parsed = parseInt(webPortDraft.trim(), 10);
+    if (Number.isNaN(parsed) || parsed < 1024 || parsed > 65535) {
+      toast.error("Please enter a valid web app port between 1024 and 65535");
+      return;
+    }
+    set({ webPort: parsed });
+    setSavingServerCfg(true);
+    try {
+      const res = await api.updateServerConfig({ webPort: parsed }, s.serverPort);
+      setServerOnline(res.online);
+      setActiveRunningWebPort(res.activeWebPort ?? parsed);
+      toast.success(`Web App port saved and active on http://localhost:${parsed}`);
+    } finally {
+      setSavingServerCfg(false);
+    }
+  };
+
  const handleApplyServerPort = async () => {
    const parsed = parseInt(portDraft.trim(), 10);
    if (Number.isNaN(parsed) || parsed < 1024 || parsed > 65535) {
-      toast.error("Please enter a valid port between 1024 and 65535");
+      toast.error("Please enter a valid API server port between 1024 and 65535");
      return;
    }
    set({ serverPort: parsed });
@@ -151,7 +176,7 @@ export function Settings() {
      const res = await api.updateServerConfig({ port: parsed }, s.serverPort);
      setServerOnline(res.online);
      setActiveRunningPort(res.activePort ?? parsed);
-      toast.success(`Server port saved (${parsed})`);
+      toast.success(`API Server port saved (${parsed})`);
    } finally {
      setSavingServerCfg(false);
    }
@@ -1004,9 +1029,48 @@ export function Settings() {

          <div className="ps-settings-row">
            <div>
-              <div className="ps-settings-label">Server port</div>
+              <div className="ps-settings-label" style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                <span>Web App Port</span>
+                <Badge variant={!s.serverEnabled ? "neutral" : "accent"}>
+                  {`http://localhost:${activeRunningWebPort ?? s.webPort}`}
+                </Badge>
+              </div>
              <div className="ps-settings-desc">
-                TCP port for the local/self-hosted PubScript server (1024–65535). Default: 8081 (web) / 18081 (desktop).
+                TCP port where the PubScript Web App UI is served (1024–65535). Default: 5173. Changing this immediately binds the web UI on the selected port.
+              </div>
+            </div>
+            <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+              <input
+                type="number"
+                className="ps-input"
+                min={1024}
+                max={65535}
+                style={{ width: 110 }}
+                value={webPortDraft}
+                onChange={(e) => setWebPortDraft(e.target.value)}
+                aria-label="Web app port"
+              />
+              <Button
+                variant="secondary"
+                size="sm"
+                disabled={savingServerCfg}
+                onClick={() => void handleApplyWebPort()}
+              >
+                Apply Web Port
+              </Button>
+            </div>
+          </div>
+
+          <div className="ps-settings-row">
+            <div>
+              <div className="ps-settings-label" style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                <span>API Server Port</span>
+                <Badge variant={!s.serverEnabled ? "neutral" : serverOnline ? "success" : "warning"}>
+                  {`Port ${activeRunningPort ?? s.serverPort}`}
+                </Badge>
+              </div>
+              <div className="ps-settings-desc">
+                TCP port for the PubScript API &amp; SQLite server (1024–65535). Default: 8081 (web) / 18081 (desktop).
              </div>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
@@ -1018,7 +1082,7 @@ export function Settings() {
                style={{ width: 110 }}
                value={portDraft}
                onChange={(e) => setPortDraft(e.target.value)}
-                aria-label="Server port"
+                aria-label="API server port"
              />
              <Button
                variant="secondary"
@@ -1026,7 +1090,7 @@ export function Settings() {
                disabled={savingServerCfg}
                onClick={() => void handleApplyServerPort()}
              >
-                Apply Port
+                Apply API Port
              </Button>
            </div>
          </div>
@@ -274,6 +274,7 @@ export interface AppSettings {
  activeAgentId: string;
  // Local / Self-Hosted Server & Startup Settings
  serverEnabled: boolean;
+  webPort: number;
  serverPort: number;
  serverStartOnBoot: boolean;
 }
@@ -309,6 +310,7 @@ export const DEFAULT_SETTINGS: AppSettings = {
  activeAgentId: DEFAULT_AI_AGENTS[0]!.id,
  // Local / Self-Hosted Server & Startup Settings
  serverEnabled: true,
+  webPort: 5173,
  serverPort: 8081,
  serverStartOnBoot: false,
 };
@@ -144,8 +144,10 @@ body {
 }

 .ps-sidebar-logo-only {
-  width: 88px;
-  height: auto;
+  width: 92px;
+  height: 52px;
+  object-fit: cover;
+  object-position: center;
  background: transparent;
  display: block;
  flex-shrink: 0;
@@ -153,7 +155,7 @@ body {
 }
 .ps-sidebar.is-collapsed .ps-sidebar-logo-only {
  width: 48px;
-  height: auto;
+  height: 28px;
 }

 .ps-sidebar-toggle {
@@ -8,6 +8,7 @@ import {
  statSync,
  writeFileSync,
 } from "node:fs";
+import { createServer, type Server as HttpServer } from "node:http";
 import { homedir } from "node:os";
 import { basename, dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
@@ -101,10 +102,14 @@ export async function buildApp() {
  interface PersistedServerSysConfig {
    enabled: boolean;
    port: number;
+    webPort: number;
    startOnBoot: boolean;
    projectDirectory: string;
  }

+  let secondaryWebServer: HttpServer | null = null;
+  let activeWebPort: number = 5173;
+
  function loadPersistedServerSysConfig(): PersistedServerSysConfig {
    try {
      if (existsSync(sysConfigPath)) {
@@ -115,6 +120,10 @@ export async function buildApp() {
            typeof raw.port === "number" && raw.port >= 1024 && raw.port <= 65535
              ? raw.port
              : config.port,
+          webPort:
+            typeof raw.webPort === "number" && raw.webPort >= 1024 && raw.webPort <= 65535
+              ? raw.webPort
+              : 5173,
          startOnBoot:
            typeof raw.startOnBoot === "boolean"
              ? raw.startOnBoot
@@ -131,11 +140,36 @@ export async function buildApp() {
    return {
      enabled: true,
      port: config.port,
+      webPort: 5173,
      startOnBoot: existsSync(autostartDesktopPath) || existsSync(systemdServicePath),
      projectDirectory: defaultProjectDir,
    };
  }

+  async function bindSecondaryWebPort(targetWebPort: number, enabled: boolean): Promise<number> {
+    activeWebPort = targetWebPort;
+    if (secondaryWebServer) {
+      await new Promise<void>((res) => secondaryWebServer!.close(() => res()));
+      secondaryWebServer = null;
+    }
+    if (!enabled || targetWebPort === config.port) {
+      return targetWebPort;
+    }
+    return await new Promise<number>((res) => {
+      const srv = createServer((req, reply) => {
+        app.server.emit("request", req, reply);
+      });
+      srv.once("error", () => {
+        // Port may already be served by Vite dev server (e.g. :5173); keep activeWebPort
+        res(targetWebPort);
+      });
+      srv.listen(targetWebPort, "0.0.0.0", () => {
+        secondaryWebServer = srv;
+        res(targetWebPort);
+      });
+    });
+  }
+
  function applySystemStartupFiles(cfg: PersistedServerSysConfig): boolean {
    try {
      mkdirSync(sysConfigDir, { recursive: true });
@@ -225,6 +259,8 @@ export async function buildApp() {
      enabled: persisted.enabled,
      port: persisted.port,
      activePort: config.port,
+      webPort: persisted.webPort,
+      activeWebPort: activeWebPort || persisted.webPort,
      startOnBoot: persisted.startOnBoot,
      projectDirectory: persisted.projectDirectory,
      autostartPath: autostartDesktopPath,
@@ -240,6 +276,11 @@ export async function buildApp() {
    if (!Number.isFinite(nextPort) || nextPort < 1024 || nextPort > 65535) {
      return reply.code(400).send({ error: "invalid_port" });
    }
+    const nextWebPort =
+      typeof body.webPort === "number" ? Math.trunc(body.webPort) : current.webPort;
+    if (!Number.isFinite(nextWebPort) || nextWebPort < 1024 || nextWebPort > 65535) {
+      return reply.code(400).send({ error: "invalid_web_port" });
+    }
    const nextProjectDir =
      typeof body.projectDirectory === "string" && body.projectDirectory.trim()
        ? body.projectDirectory.trim()
@@ -247,16 +288,20 @@ export async function buildApp() {
    const next: PersistedServerSysConfig = {
      enabled: typeof body.enabled === "boolean" ? body.enabled : current.enabled,
      port: nextPort,
+      webPort: nextWebPort,
      startOnBoot:
        typeof body.startOnBoot === "boolean" ? body.startOnBoot : current.startOnBoot,
      projectDirectory: nextProjectDir,
    };
    const configured = applySystemStartupFiles(next);
+    const boundWebPort = await bindSecondaryWebPort(next.webPort, next.enabled);
    return {
      ok: true,
      enabled: next.enabled,
      port: next.port,
      activePort: config.port,
+      webPort: next.webPort,
+      activeWebPort: boundWebPort,
      startOnBoot: next.startOnBoot,
      projectDirectory: next.projectDirectory,
      autostartConfigured: configured,
@@ -355,6 +400,21 @@ export async function buildApp() {
    });
  }

+  app.addHook("onClose", async () => {
+    if (secondaryWebServer) {
+      await new Promise<void>((res) => secondaryWebServer!.close(() => res()));
+      secondaryWebServer = null;
+    }
+  });
+
+  if (
+    process.argv[1] !== undefined &&
+    fileURLToPath(import.meta.url) === process.argv[1]
+  ) {
+    const persisted = loadPersistedServerSysConfig();
+    void bindSecondaryWebPort(persisted.webPort, persisted.enabled);
+  }
+
  return app;
 }