AcademySoftwareFoundation
diff --git a/‎cueweb/README.md‎
Lines changed: 4 additions & 1 deletion b/‎cueweb/README.md‎
Lines changed: 4 additions & 1 deletion
diff --git a/‎cueweb/app/__tests__/components/views-menu.test.ts‎
Lines changed: 236 additions & 0 deletions b/‎cueweb/app/__tests__/components/views-menu.test.ts‎
Lines changed: 236 additions & 0 deletions
@@ -95,6 +95,8 @@ CueWeb replicates the core functionality of CueGUI (Cuetopia and Cuecommander) i
    - The header and login page share the same OpenCue + CueWeb branding via the `CueWebIcon` component.
 - **Job management dashboard:**
   - Customizable table views: hide/show columns AND reorder them left/right inside each table's **Columns** dropdown, with a pinned **Reset to Default** button that restores both visibility and order. Both states persist in `localStorage` per table (Jobs: `columnVisibility` / `columnOrder`; Layers: `cueweb.layers.columnVisibility` / `cueweb.layers.columnOrder`; Frames: `cueweb.frames.columnVisibility` / `cueweb.frames.columnOrder`).
+  - Saveable view presets (web-native replacement for CueGUI's *Save Window Settings*): each major table has a **Views** dropdown to **Save as…**, **Apply**, **Rename**, and **Delete** named presets capturing column order/visibility, sort, filters, and page size. Presets persist per page under `localStorage["cueweb.views.<page>"]` (e.g. `cueweb.views.jobs`, `cueweb.views.hosts`, `cueweb.views.frames`) with the active preset name under `cueweb.views.<page>.active`, and broadcast across tabs via the `storage` event. A built-in **Default** entry can't be renamed or deleted; selecting it restores the table to its documented defaults.
+  - Multi-pane split workspace (web-native replacement for CueGUI's Window ▸ *Add new window*): **Other ▸ Split view** opens two pages side-by-side at `/split?left=/jobs&right=/hosts/server-01`. Drag the divider to resize (position persists under `localStorage["cueweb.split.ratio"]`); each pane is an independent same-origin view with its own URL (encoded in the page URL, so a reload restores both panes); a per-pane page picker, **Swap**, and **open-in-new-tab** round it out. Navigating inside a pane (e.g. clicking a host) updates that pane's URL in place.
   - CueGUI-parity Jobs columns: Name, **Comments** (sortable sticky-note column - sort to pull jobs with comments to the top), State, Done / Total, Running, Dead, Eaten, Wait, MaxRss, Age, Readable Age, **Launched**, **Eligible**, **Finished**, **User Color** (per-job color swatch persisted to `localStorage["cueweb.userColors"]` with cross-tab sync), Progress, Notify.
   - CueGUI-parity Layers columns: Dispatch Order, Name, Services, Limits, Range, Cores, Memory, Gpus, Gpu Memory, MaxRss, Total, Done, Run, Depend, Wait, Eaten, Dead, Avg, Tags, Progress (stacked animated bar with the same per-state palette as the Jobs progress bar), Timeout, Timeout LLU, **Eligible**.
   - CueGUI-parity Frames columns: Order, Frame, Layer, Status, Cores, GPUs, Host, Retries, CheckP, Runtime, **LLU** (only populated for `RUNNING` frames, matching CueGUI), **Memory (RSS)**, **Memory (PSS)**, GPU Memory, **Remain** (placeholder until the ETA predictor is wired in), Start Time, Stop Time, **Eligible Time**, **Submission Time**, **Last Line** (placeholder until the per-frame log-tail fetch is wired in).
@@ -439,7 +441,7 @@ Go back to [Contents](#contents).
 
 ## Keyboard shortcuts
 
-CueWeb registers a small set of global keyboard shortcuts (mounted from `cueweb/app/layout.tsx` via `KeyboardShortcuts` in `cueweb/components/ui/shortcuts-overlay.tsx`). Single-letter shortcuts are ignored while typing into a text field, and modifier-key combos (Ctrl / Cmd / Alt) are passed through to the browser, so they will not collide with native shortcuts such as Ctrl+R (full page reload).
+CueWeb registers a small set of global keyboard shortcuts (mounted from `cueweb/app/layout.tsx` via `KeyboardShortcuts` in `cueweb/components/ui/shortcuts-overlay.tsx`). Single-letter shortcuts are ignored while typing into a text field, and modifier-key combos (Ctrl / Cmd / Alt) are passed through to the browser, so they will not collide with native shortcuts such as Ctrl+R (full page reload) — the one exception is the explicit immersive chord `Cmd/Ctrl+Shift+F`, which is captured so it works even from inside a search field.
 
 | Key | Action | Where it works |
 |-----|--------|----------------|
@@ -448,6 +450,7 @@ CueWeb registers a small set of global keyboard shortcuts (mounted from `cueweb/
 | `/` | Focus the jobs search box | On the jobs page (`/`) |
 | `r` | Refresh the jobs table | On the jobs page (`/`) |
 | `t` | Toggle the light / dark theme | Anywhere |
+| `F` (or `Cmd/Ctrl+Shift+F`) | Toggle immersive (full-screen) mode — hides the header, sidebar and status bar; persists across reloads under `localStorage["cueweb.layout.immersive"]` and syncs across tabs | Anywhere |
 
 The same overlay is also reachable from the menu, for users who prefer mouse navigation:
 
 
@@ -0,0 +1,236 @@
+/**
+ * @jest-environment jsdom
+ */
+
+/*
+ * Copyright Contributors to the OpenCue Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+  applyView,
+  captureView,
+  loadViews,
+  saveViews,
+  View,
+} from "@/components/ui/views-menu";
+
+// Minimal stand-in for the slice of the TanStack table API that captureView /
+// applyView touch. Lets us exercise the pure capture/apply logic without
+// mounting a real React table.
+function makeMockTable(opts: {
+  columnIds: string[];
+  visibility?: Record<string, boolean>;
+  columnOrder?: string[];
+  sorting?: { id: string; desc: boolean }[];
+  columnFilters?: { id: string; value: unknown }[];
+  pageSize?: number;
+}) {
+  const state = {
+    columnOrder: opts.columnOrder ?? [],
+    sorting: opts.sorting ?? [],
+    columnFilters: opts.columnFilters ?? [],
+    pagination: { pageIndex: 0, pageSize: opts.pageSize ?? 10 },
+  };
+  const visibility: Record<string, boolean> = { ...(opts.visibility ?? {}) };
+
+  return {
+    state,
+    visibility,
+    getAllLeafColumns: () => opts.columnIds.map((id) => ({ id })),
+    getColumn: (id: string) => ({
+      id,
+      getIsVisible: () => visibility[id] !== false,
+    }),
+    getState: () => state,
+    setColumnOrder: (order: string[]) => {
+      state.columnOrder = order;
+    },
+    setColumnVisibility: (v: Record<string, boolean>) => {
+      Object.keys(visibility).forEach((k) => delete visibility[k]);
+      Object.assign(visibility, v);
+    },
+    setSorting: (s: { id: string; desc: boolean }[]) => {
+      state.sorting = s;
+    },
+    setColumnFilters: (f: { id: string; value: unknown }[]) => {
+      state.columnFilters = f;
+    },
+    setPageSize: (n: number) => {
+      state.pagination.pageSize = n;
+    },
+  };
+}
+
+describe("views-menu storage helpers", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it("loadViews returns [] when nothing is stored", () => {
+    expect(loadViews("jobs")).toEqual([]);
+  });
+
+  it("loadViews returns [] for malformed JSON", () => {
+    localStorage.setItem("cueweb.views.jobs", "{not json");
+    expect(loadViews("jobs")).toEqual([]);
+  });
+
+  it("loadViews returns [] when the stored value is not an array", () => {
+    localStorage.setItem("cueweb.views.jobs", JSON.stringify({ a: 1 }));
+    expect(loadViews("jobs")).toEqual([]);
+  });
+
+  it("saveViews + loadViews round-trips a preset list", () => {
+    const views: View[] = [
+      {
+        name: "Mine",
+        columns: [{ id: "name", visible: true, order: 0 }],
+        sort: [{ id: "name", dir: "asc" }],
+        filters: [],
+        pageSize: 25,
+      },
+    ];
+    saveViews("jobs", views);
+    expect(localStorage.getItem("cueweb.views.jobs")).toBe(
+      JSON.stringify(views),
+    );
+    expect(loadViews("jobs")).toEqual(views);
+  });
+
+  it("namespaces presets per page", () => {
+    saveViews("hosts", [
+      { name: "H", columns: [], sort: [], filters: [], pageSize: 10 },
+    ]);
+    expect(loadViews("hosts")).toHaveLength(1);
+    expect(loadViews("jobs")).toEqual([]);
+  });
+});
+
+describe("captureView", () => {
+  it("captures column order, visibility, sort, filters and page size", () => {
+    const table = makeMockTable({
+      columnIds: ["select", "name", "state", "cores"],
+      visibility: { cores: false },
+      columnOrder: ["select", "state", "name", "cores"],
+      sorting: [{ id: "name", desc: true }],
+      columnFilters: [{ id: "state", value: "RUNNING" }],
+      pageSize: 50,
+    });
+
+    const view = captureView(table as any, "snap");
+
+    expect(view.name).toBe("snap");
+    expect(view.columns.map((c) => c.id)).toEqual([
+      "select",
+      "state",
+      "name",
+      "cores",
+    ]);
+    expect(view.columns.map((c) => c.order)).toEqual([0, 1, 2, 3]);
+    expect(view.columns.find((c) => c.id === "cores")?.visible).toBe(false);
+    expect(view.columns.find((c) => c.id === "name")?.visible).toBe(true);
+    expect(view.sort).toEqual([{ id: "name", dir: "desc" }]);
+    expect(view.filters).toEqual([{ id: "state", value: "RUNNING" }]);
+    expect(view.pageSize).toBe(50);
+  });
+
+  it("falls back to natural order and appends columns missing from columnOrder", () => {
+    const table = makeMockTable({
+      columnIds: ["a", "b", "c"],
+      // Partial / stale order: only "c" listed, plus a bogus id to ignore.
+      columnOrder: ["c", "ghost"],
+    });
+
+    const view = captureView(table as any, "v");
+    expect(view.columns.map((c) => c.id)).toEqual(["c", "a", "b"]);
+  });
+});
+
+describe("applyView", () => {
+  it("writes order, visibility, sort, filters and page size back to the table", () => {
+    const table = makeMockTable({ columnIds: ["a", "b", "c"] });
+    const view: View = {
+      name: "v",
+      columns: [
+        { id: "b", visible: true, order: 0 },
+        { id: "a", visible: false, order: 1 },
+        { id: "c", visible: true, order: 2 },
+      ],
+      sort: [{ id: "b", dir: "desc" }],
+      filters: [{ id: "a", value: "x" }],
+      pageSize: 100,
+    };
+
+    applyView(table as any, view);
+
+    expect(table.state.columnOrder).toEqual(["b", "a", "c"]);
+    expect(table.visibility).toEqual({ b: true, a: false, c: true });
+    expect(table.state.sorting).toEqual([{ id: "b", desc: true }]);
+    expect(table.state.columnFilters).toEqual([{ id: "a", value: "x" }]);
+    expect(table.state.pagination.pageSize).toBe(100);
+  });
+
+  it("sorts columns by their saved order before applying", () => {
+    const table = makeMockTable({ columnIds: ["a", "b", "c"] });
+    const view: View = {
+      name: "v",
+      columns: [
+        { id: "c", visible: true, order: 2 },
+        { id: "a", visible: true, order: 0 },
+        { id: "b", visible: true, order: 1 },
+      ],
+      sort: [],
+      filters: [],
+      pageSize: 10,
+    };
+
+    applyView(table as any, view);
+    expect(table.state.columnOrder).toEqual(["a", "b", "c"]);
+  });
+
+  it("ignores a non-positive page size", () => {
+    const table = makeMockTable({ columnIds: ["a"], pageSize: 20 });
+    applyView(table as any, {
+      name: "v",
+      columns: [{ id: "a", visible: true, order: 0 }],
+      sort: [],
+      filters: [],
+      pageSize: 0,
+    });
+    expect(table.state.pagination.pageSize).toBe(20);
+  });
+
+  it("round-trips through capture then apply", () => {
+    const source = makeMockTable({
+      columnIds: ["select", "name", "state"],
+      visibility: { state: false },
+      columnOrder: ["name", "select", "state"],
+      sorting: [{ id: "name", desc: false }],
+      pageSize: 15,
+    });
+    const view = captureView(source as any, "roundtrip");
+
+    const target = makeMockTable({ columnIds: ["select", "name", "state"] });
+    applyView(target as any, view);
+
+    expect(target.state.columnOrder).toEqual(["name", "select", "state"]);
+    expect(target.visibility).toEqual({
+      name: true,
+      select: true,
+      state: false,
+    });
+    expect(target.state.sorting).toEqual([{ id: "name", desc: false }]);
+    expect(target.state.pagination.pageSize).toBe(15);
+  });
+});