pycodex-ws 0.4.4__tar.gz → 0.4.6__tar.gz

{pycodex_ws-0.4.4 → pycodex_ws-0.4.6}/PKG-INFO

@@ -1,11 +1,11 @@
 Metadata-Version: 2.1
 Name: pycodex-ws
-Version: 0.4.4
+Version: 0.4.6
 Summary: Browser workspace and optional Feishu integration for python-codex
 License-File: LICENSE
 Requires-Python: >=3.7
 Requires-Dist: pillow>=9.0.0
-Requires-Dist: python-codex==0.4.4
+Requires-Dist: python-codex==0.4.6
 Requires-Dist: websockets<16,>=11
 Description-Content-Type: text/markdown
 
@@ -95,6 +95,33 @@ The resolved `state_path` identifies the workspace; two entries cannot share it.
 Creating a workspace through the management page or API without a prefix
 generates a `/tmp/pcws-*` prefix and saves it in the configuration.
 
+The router directory collects unread workspace shortcuts and their device names
+in a distinct Unread panel at the top. Read workspaces leave that panel.
+Drag a handle in Online devices to reorder devices; both lists share the saved
+order. The focused handle also supports the up and down arrow keys. Escape or
+dropping outside the list cancels a drag. On touch screens, drag the handle;
+the rest of the card still scrolls normally. List updates wait until the drag
+and save finish.
+The router saves the order in the existing `CODEX_HOME/router-aliases.json`,
+shared by all browsers and retained across router restarts. Its device entry
+order is the display order; an empty alias means to show the original name.
+Existing alias files remain readable. Offline device positions are
+remembered, newly registered devices go last, and each device's workspaces keep
+their configuration order. Reordering requires router login; if connected
+devices change during a drag, refresh and try again.
+Device groups start collapsed, retain their expanded state during updates, and
+show Manage and the number of working workspaces in their headings. Click a
+device heading or its name to expand or collapse the group. To rename a device,
+use its pencil button in the Online devices list, then press Enter or Save;
+Escape or Cancel discards the edit. Leaving the field does not save it.
+Aliases must be nonblank and contain 1 to 128 characters.
+Device headings and the Online devices list share an unread dot
+whenever any of that device's workspaces is unread. Final replies and failed
+turns both trigger shared unread dots; viewing the reply or error marks it as read.
+
+Login pages state whether you are logging in to the router or workspace service
+and show the server hostname and access address.
+
 `enable_board` defaults to `true`. Setting it to `false` disables the Canvas
 tab, HTML/image/status routes, polling and Canvas context injection. Sessions
 and file views still save and restore from the same prefix, so changing this

{pycodex_ws-0.4.4 → pycodex_ws-0.4.6}/README.md

@@ -84,6 +84,33 @@ The resolved `state_path` identifies the workspace; two entries cannot share it.
 Creating a workspace through the management page or API without a prefix
 generates a `/tmp/pcws-*` prefix and saves it in the configuration.
 
+The router directory collects unread workspace shortcuts and their device names
+in a distinct Unread panel at the top. Read workspaces leave that panel.
+Drag a handle in Online devices to reorder devices; both lists share the saved
+order. The focused handle also supports the up and down arrow keys. Escape or
+dropping outside the list cancels a drag. On touch screens, drag the handle;
+the rest of the card still scrolls normally. List updates wait until the drag
+and save finish.
+The router saves the order in the existing `CODEX_HOME/router-aliases.json`,
+shared by all browsers and retained across router restarts. Its device entry
+order is the display order; an empty alias means to show the original name.
+Existing alias files remain readable. Offline device positions are
+remembered, newly registered devices go last, and each device's workspaces keep
+their configuration order. Reordering requires router login; if connected
+devices change during a drag, refresh and try again.
+Device groups start collapsed, retain their expanded state during updates, and
+show Manage and the number of working workspaces in their headings. Click a
+device heading or its name to expand or collapse the group. To rename a device,
+use its pencil button in the Online devices list, then press Enter or Save;
+Escape or Cancel discards the edit. Leaving the field does not save it.
+Aliases must be nonblank and contain 1 to 128 characters.
+Device headings and the Online devices list share an unread dot
+whenever any of that device's workspaces is unread. Final replies and failed
+turns both trigger shared unread dots; viewing the reply or error marks it as read.
+
+Login pages state whether you are logging in to the router or workspace service
+and show the server hostname and access address.
+
 `enable_board` defaults to `true`. Setting it to `false` disables the Canvas
 tab, HTML/image/status routes, polling and Canvas context injection. Sessions
 and file views still save and restore from the same prefix, so changing this

{pycodex_ws-0.4.4 → pycodex_ws-0.4.6}/pycodex_router/index.html

@@ -17,6 +17,8 @@
       --green: #26734f;
       --green-soft: #eaf5ee;
       --danger: #b54739;
+      --unread-bg: #fff7f4;
+      --unread-line: #ead0c8;
       font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     }
     @media (prefers-color-scheme: dark) {
@@ -31,12 +33,14 @@
         --green: #8ad5ad;
         --green-soft: #233b31;
         --danger: #ffa396;
+        --unread-bg: #2b2221;
+        --unread-line: #62433d;
       }
     }
     * { box-sizing: border-box; }
     body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-size: 13px; }
     a { color: inherit; text-decoration: none; }
-    a:focus-visible, .device-label:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 3px; }
+    a:focus-visible, button:focus-visible, .workspace-group-heading:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 3px; }
     svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
     h1, h2, h3, h4, p { margin: 0; }
     code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@@ -60,8 +64,8 @@
     .registration-content { display: grid; gap: 8px; margin-top: 12px; }
     .registration input { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
     .registration p { color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
-    #alias-status { margin-bottom: 12px; color: var(--danger); font-size: 12px; }
-    #alias-status:empty { display: none; }
+    #alias-status, #order-status { margin-bottom: 12px; color: var(--danger); font-size: 12px; }
+    #alias-status:empty, #order-status:empty { display: none; }
     .layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
     .layout > * { min-width: 0; }
     .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
@@ -70,7 +74,10 @@
     #activity { color: var(--green); font-size: 12px; }
     #workspaces { display: grid; gap: 16px; }
     .workspace-table, .nodes { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
-    .workspace-group-heading { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
+    .workspace-group-heading { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
+    .workspace-group-heading::-webkit-details-marker { display: none; }
+    .disclosure-icon { width: 14px; height: 14px; color: var(--muted); }
+    .workspace-group[open] .disclosure-icon { transform: rotate(90deg); }
     .workspace-group-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
     .workspace-group-heading .count { flex: 0 0 auto; }
     .list-head, .workspace-row { display: grid; grid-template-columns: minmax(94px, .85fr) minmax(120px, 1.85fr) 76px 44px; gap: 12px; align-items: center; padding: 10px 14px; }
@@ -79,7 +86,16 @@
     .workspace-row > * { min-width: 0; }
     .workspace-row:hover { background: var(--soft); }
     .workspace-row:last-child { border-radius: 0 0 9px 9px; }
+    #unread-workspaces { background: var(--unread-bg); border-color: var(--unread-line); border-left: 3px solid var(--danger); }
+    .unread-heading { display: flex; align-items: center; gap: 9px; padding: 14px; color: var(--danger); }
+    .unread-heading svg { width: 17px; height: 17px; }
+    .unread-heading h3 { flex: 1; font-size: 13px; font-weight: 600; }
+    .unread-heading .count { color: var(--panel); background: var(--danger); }
+    #unread-workspaces .workspace-row { border-color: var(--unread-line); }
+    #unread-workspaces .workspace-row:hover { background: var(--panel); }
     .activity-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 4px; color: var(--muted); background: var(--soft); font-size: 10px; font-weight: 500; }
+    .activity-badge[hidden] { display: none; }
+    .workspace-group-name .device-working { margin-left: 8px; white-space: nowrap; }
     .activity-badge[data-state="working"] { color: var(--green); background: var(--green-soft); }
     .activity-badge[data-state="working"]::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: spinner-pulse 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
     @keyframes spinner-pulse {
@@ -94,7 +110,7 @@
     .workspace-title { font-size: 12px; line-height: 1.6; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     .workspace-path, .state-path { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     .state-path { color: var(--muted); }
-    .session-count { color: var(--muted); font-size: 11px; line-height: 1.7; }
+    .session-count { display: block; color: var(--muted); font-size: 11px; line-height: 1.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     .open-link, .manage-link { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; min-height: 28px; color: var(--accent); font-size: 11px; font-weight: 550; white-space: nowrap; }
     .open-link svg, .manage-link svg { width: 13px; height: 13px; }
     .open-link::after { content: ""; position: absolute; inset: 0; }
@@ -104,10 +120,21 @@
     .device-heading { display: flex; align-items: start; gap: 9px; }
     .device-heading svg { width: 17px; height: 17px; margin-top: 1px; color: var(--muted); }
     .device-name { flex: 1; min-width: 0; font-size: 11px; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
-    .device-label { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: left; overflow-wrap: anywhere; cursor: text; }
-    .device-label[hidden] { display: none; }
+    .device-label { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+    .device-rename, .device-drag, .device-alias-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--muted); font: inherit; cursor: pointer; }
+    .device-rename:hover, .device-drag:hover, .device-alias-actions button:hover { background: var(--soft); color: var(--ink); }
+    .device-rename, .device-drag { flex: 0 0 28px; padding: 4px; border-color: transparent; }
+    .device-rename[hidden] { display: none; }
+    .device-rename svg, .device-drag svg { width: 14px; height: 14px; margin: 0; color: inherit; }
+    .device-drag { touch-action: none; user-select: none; cursor: grab; }
+    .device-drag:disabled { opacity: .35; cursor: default; }
+    .device[data-dragging] { background: var(--soft); opacity: .65; }
+    .device-drop-before { box-shadow: 0 -2px var(--accent); }
+    .nodes.device-drop-end { box-shadow: inset 0 -2px var(--accent); }
     .device-alias-input { width: 100%; min-width: 0; padding: 3px 6px; border: 1px solid var(--accent); border-radius: 4px; background: var(--panel); color: var(--ink); font: inherit; outline: none; }
+    .device-alias-actions { display: flex; gap: 6px; margin-top: 6px; }
     .online-dot { margin-top: 7px; }
+    .device-heading > .unread-dot { margin-top: 7px; }
     .device-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; margin-top: 6px; }
     .device-detail { color: var(--muted); font-size: 10px; line-height: 1.5; }
     .empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 32px 20px; text-align: center; }
@@ -129,6 +156,8 @@
       .workspace-paths { grid-column: 1 / -1; grid-row: 2; }
       .workspace-status { grid-column: 2; grid-row: 1; }
       .open-link { grid-column: 3; grid-row: 1; min-height: 36px; }
+      .device-rename, .device-drag, .device-alias-actions button { min-height: 36px; }
+      .device-rename, .device-drag { flex-basis: 36px; }
     }
   </style>
 </head>
@@ -160,6 +189,7 @@
         </div>
       </details>
       <p id="alias-status" role="alert"></p>
+      <p id="order-status" role="alert"></p>
       <div class="layout">
         <section aria-labelledby="workspace-heading">
           <div class="section-heading">
@@ -179,17 +209,33 @@
       </div>
     </main>
   </div>
-  <template id="workspace-group-template">
-    <section class="workspace-table workspace-group">
-      <header class="workspace-group-heading">
-        <h3 class="workspace-group-name"><button type="button" class="device-label"></button></h3>
+  <template id="unread-template">
+    <section id="unread-workspaces" class="workspace-table" aria-labelledby="unread-heading">
+      <header class="unread-heading">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9m-8 12h4"/></svg>
+        <h3 id="unread-heading">Unread</h3>
         <span class="count"></span>
       </header>
+      <div class="workspace-group-list"></div>
+    </section>
+  </template>
+  <template id="workspace-group-template">
+    <details class="workspace-table workspace-group">
+      <summary class="workspace-group-heading">
+        <svg class="disclosure-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>
+        <h3 class="workspace-group-name">
+          <span class="device-label"></span>
+          <span class="activity-badge device-working" data-state="working" hidden></span>
+        </h3>
+        <span class="unread-dot device-unread" hidden role="img" aria-label="Unread workspaces" title="Unread workspaces"></span>
+        <span class="count"></span>
+        <a class="manage-link">Manage <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14m-6-6 6 6-6 6"/></svg></a>
+      </summary>
       <div class="list-head" aria-hidden="true">
         <span>Workspace</span><span>Directory / state</span><span>Status</span><span></span>
       </div>
       <div class="workspace-group-list"></div>
-    </section>
+    </details>
   </template>
   <template id="workspace-template">
     <article class="workspace-row">
@@ -211,16 +257,31 @@
   <template id="device-template">
     <article class="device">
       <div class="device-heading">
-        <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8m-4-4v4"/></svg>
-        <h3 class="device-name"><button type="button" class="device-label"></button></h3>
+        <button type="button" class="device-drag" title="Drag to reorder, or use the up and down arrow keys">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5h.01M15 5h.01M9 12h.01M15 12h.01M9 19h.01M15 19h.01" stroke-width="3"/></svg>
+        </button>
+        <h3 class="device-name"><span class="device-label"></span></h3>
+        <button type="button" class="device-rename" title="Rename device">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m16 4 4 4M4 20l4-1L20 7a2.1 2.1 0 0 0-3-3L5 16l-1 4Z"/></svg>
+        </button>
+        <span class="unread-dot device-unread" hidden role="img" aria-label="Unread workspaces" title="Unread workspaces"></span>
         <span class="online-dot" aria-label="Online"></span>
       </div>
       <div class="device-footer">
         <p class="device-detail"></p>
-        <a class="manage-link">Manage <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14m-6-6 6 6-6 6"/></svg></a>
+        <span class="activity-badge device-working" data-state="working" hidden></span>
       </div>
     </article>
   </template>
+  <template id="device-alias-template">
+    <span class="device-alias-editor">
+      <input type="text" class="device-alias-input" minlength="1" maxlength="128" required aria-label="Device alias" title="Use 1 to 128 characters.">
+      <span class="device-alias-actions">
+        <button type="button" class="device-alias-save">Save</button>
+        <button type="button" class="device-alias-cancel">Cancel</button>
+      </span>
+    </span>
+  </template>
   <template id="empty-template">
     <div class="empty">
       <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8m-4-4v4"/></svg>
@@ -235,18 +296,23 @@
       const layout = document.querySelector(".layout");
       const workspaces = document.getElementById("workspaces");
       const nodes = document.getElementById("nodes");
+      const unreadTemplate = document.getElementById("unread-template");
       const workspaceGroupTemplate = document.getElementById("workspace-group-template");
       const workspaceTemplate = document.getElementById("workspace-template");
       const deviceTemplate = document.getElementById("device-template");
+      const deviceAliasTemplate = document.getElementById("device-alias-template");
       const emptyTemplate = document.getElementById("empty-template");
       const deviceConnection = document.getElementById("device-connection");
       const registrationKey = document.getElementById("registration-key");
       const registrationStatus = document.getElementById("registration-status");
       const aliasStatus = document.getElementById("alias-status");
+      const orderStatus = document.getElementById("order-status");
       let refreshing = false;
       let signature = "";
       let editingDevice = null;
-      let aliasRevision = 0;
+      let inventoryRevision = 0;
+      let reordering = false;
+      let drag = null;
 
       registrationKey.addEventListener("focus", () => registrationKey.select());
       deviceConnection.addEventListener("toggle", async () => {
@@ -283,35 +349,32 @@
         layout.dataset.stale = String(state === "error");
       }
 
-      function bindDeviceLabel(label, node, data) {
+      function setDeviceLabel(label, node) {
         label.textContent = node.alias || node.name;
-        label.title = `${node.name}\nClick to rename device`;
-        label.setAttribute("aria-label", `Rename device ${node.alias || node.name}`);
-        label.addEventListener("click", () => editDeviceAlias(label, node, data));
+        label.title = node.name;
       }
 
-      function editDeviceAlias(label, node, data) {
-        if (editingDevice !== null) return;
+      function editDeviceAlias(label, button, node, data) {
+        if (editingDevice !== null || reordering) return;
         editingDevice = node.id;
         aliasStatus.textContent = "";
-        const input = document.createElement("input");
-        input.type = "text";
-        input.className = "device-alias-input";
-        input.maxLength = 128;
-        input.setAttribute("aria-label", "Device alias");
-        input.title = "Leave empty to use the original device name.";
+        const editor = deviceAliasTemplate.content.firstElementChild.cloneNode(true);
+        const input = editor.querySelector("input");
         input.value = node.alias || "";
         input.placeholder = node.name;
         label.hidden = true;
-        label.before(input);
+        button.hidden = true;
+        label.before(editor);
         let finished = false;
         const finish = async save => {
           if (finished) return;
           finished = true;
           const alias = input.value.trim();
-          input.remove();
+          editor.remove();
           label.hidden = false;
+          button.hidden = false;
           try {
+            if (save && !alias) throw new Error("Device alias must contain at least one character.");
             if (save && alias !== (node.alias || "")) {
               const response = await fetch(`api/nodes/${encodeURIComponent(node.id)}/alias`, {
                 method: "POST",
@@ -321,7 +384,7 @@
               if (!response.ok) throw new Error(await response.text());
               const result = await response.json();
               node.alias = result.alias;
-              aliasRevision += 1;
+              inventoryRevision += 1;
               render(data);
               signature = JSON.stringify(data);
             }
@@ -329,29 +392,168 @@
             aliasStatus.textContent = `Could not rename device: ${error.message}`;
           } finally {
             editingDevice = null;
+            nodes.querySelector(`.device[data-node-id="${CSS.escape(node.id)}"] .device-rename`).focus();
             refresh();
           }
         };
-        input.addEventListener("keydown", event => {
+        editor.addEventListener("keydown", event => {
           if (event.isComposing) return;
-          if (event.key === "Enter" || event.key === "Escape") {
+          if (event.key === "Escape" || (event.key === "Enter" && event.target === input)) {
             event.preventDefault();
             finish(event.key === "Enter");
-            label.focus();
           }
         });
-        input.addEventListener("blur", () => finish(true));
+        editor.querySelector(".device-alias-save").addEventListener("click", () => finish(true));
+        editor.querySelector(".device-alias-cancel").addEventListener("click", () => finish(false));
         input.focus();
         input.select();
       }
 
+      async function saveDeviceOrder(data, order, nodeId) {
+        reordering = true;
+        orderStatus.textContent = "";
+        try {
+          if (order.some((id, index) => id !== data.nodes[index].id)) {
+            const response = await fetch("api/nodes/order", {
+              method: "POST",
+              headers: {"Content-Type": "application/json"},
+              body: JSON.stringify({order}),
+            });
+            if (!response.ok) throw new Error(await response.text());
+            const result = await response.json();
+            const byId = new Map(data.nodes.map(node => [node.id, node]));
+            data.nodes = result.order.map(id => byId.get(id));
+            data.workspaces = result.order.flatMap(
+              id => data.workspaces.filter(workspace => workspace.node_id === id));
+            inventoryRevision += 1;
+            render(data);
+            signature = JSON.stringify(data);
+          }
+        } catch (error) {
+          orderStatus.textContent = `Could not reorder devices: ${error.message}`;
+        } finally {
+          reordering = false;
+          nodes.querySelector(`.device[data-node-id="${CSS.escape(nodeId)}"] .device-drag`).focus({preventScroll: true});
+          refresh();
+        }
+      }
+
+      function clearDropMarker() {
+        nodes.classList.remove("device-drop-end");
+        for (const card of nodes.querySelectorAll(".device-drop-before")) {
+          card.classList.remove("device-drop-before");
+        }
+      }
+
+      function markDropTarget() {
+        clearDropMarker();
+        drag.before = Array.from(nodes.children).find(card => {
+          const rect = card.getBoundingClientRect();
+          return card !== drag.card && drag.y < (rect.top + rect.bottom) / 2;
+        });
+        (drag.before || nodes).classList.add(drag.before ? "device-drop-before" : "device-drop-end");
+      }
+
+      function scrollDrag() {
+        const step = drag.y < 56 ? -12 : drag.y > innerHeight - 56 ? 12 : 0;
+        if (step) {
+          window.scrollBy(0, step);
+          markDropTarget();
+        }
+        drag.frame = requestAnimationFrame(scrollDrag);
+      }
+
+      function finishDrag(commit, event) {
+        const current = drag;
+        if (!current) return;
+        drag = null;
+        cancelAnimationFrame(current.frame);
+        current.card.removeAttribute("data-dragging");
+        clearDropMarker();
+        if (nodes.hasPointerCapture(current.pointerId)) {
+          nodes.releasePointerCapture(current.pointerId);
+        }
+        const rect = nodes.getBoundingClientRect();
+        if (commit && current.moved && event.clientX >= rect.left
+            && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom) {
+          const cards = Array.from(nodes.children).filter(card => card !== current.card);
+          const index = current.before ? cards.indexOf(current.before) : cards.length;
+          cards.splice(index, 0, current.card);
+          saveDeviceOrder(current.data, cards.map(card => card.dataset.nodeId), current.card.dataset.nodeId);
+        } else {
+          reordering = false;
+          refresh();
+        }
+      }
+
+      nodes.addEventListener("pointermove", event => {
+        if (!drag || event.pointerId !== drag.pointerId) return;
+        drag.y = event.clientY;
+        if (!drag.moved) {
+          if (Math.hypot(event.clientX - drag.x, event.clientY - drag.startY) < 5) return;
+          drag.moved = true;
+          drag.card.setAttribute("data-dragging", "");
+          drag.frame = requestAnimationFrame(scrollDrag);
+        }
+        markDropTarget();
+      });
+      nodes.addEventListener("pointerup", event => {
+        if (drag && event.pointerId === drag.pointerId) finishDrag(true, event);
+      });
+      nodes.addEventListener("pointercancel", () => finishDrag(false));
+      nodes.addEventListener("lostpointercapture", () => finishDrag(false));
+      nodes.addEventListener("keydown", event => {
+        if (drag && event.key === "Escape") {
+          event.preventDefault();
+          finishDrag(false);
+        }
+      });
+
+      function bindDeviceDrag(card, node, data) {
+        const handle = card.querySelector(".device-drag");
+        handle.disabled = data.nodes.length < 2;
+        handle.setAttribute("aria-label", `Reorder device ${node.alias || node.name}`);
+        handle.addEventListener("pointerdown", event => {
+          if (event.button !== 0 || reordering || editingDevice !== null) return;
+          event.preventDefault();
+          handle.focus({preventScroll: true});
+          reordering = true;
+          orderStatus.textContent = "";
+          drag = {card, data, pointerId: event.pointerId, x: event.clientX,
+            startY: event.clientY, y: event.clientY, moved: false, frame: null, before: null};
+          nodes.setPointerCapture(event.pointerId);
+        });
+        handle.addEventListener("keydown", event => {
+          if (reordering || editingDevice !== null || !["ArrowUp", "ArrowDown"].includes(event.key)) return;
+          event.preventDefault();
+          const order = data.nodes.map(item => item.id);
+          const index = order.indexOf(node.id);
+          const target = index + (event.key === "ArrowUp" ? -1 : 1);
+          if (target < 0 || target >= order.length) return;
+          [order[index], order[target]] = [order[target], order[index]];
+          saveDeviceOrder(data, order, node.id);
+        });
+      }
+
       function render(data) {
+        const focusedHandle = nodes.contains(document.activeElement)
+          && document.activeElement.matches(".device-drag")
+          ? document.activeElement.closest(".device").dataset.nodeId : null;
+        const expanded = new Set(Array.from(
+          workspaces.querySelectorAll(".workspace-group[open]"), group => group.dataset.nodeId));
         const workspaceList = document.createDocumentFragment();
+        const unreadGroup = unreadTemplate.content.firstElementChild.cloneNode(true);
+        const unreadList = unreadGroup.querySelector(".workspace-group-list");
         const groups = new Map();
         for (const node of data.nodes) {
           const group = workspaceGroupTemplate.content.firstElementChild.cloneNode(true);
+          group.dataset.nodeId = node.id;
+          group.open = expanded.has(node.id);
           group.setAttribute("aria-label", node.alias || node.name);
-          bindDeviceLabel(group.querySelector(".device-label"), node, data);
+          setDeviceLabel(group.querySelector(".device-label"), node);
+          const link = group.querySelector(".manage-link");
+          link.href = node.url;
+          link.setAttribute("aria-label", `Manage workspaces on ${node.alias || node.name}`);
           groups.set(node.id, {node, group});
         }
         for (const workspace of data.workspaces) {
@@ -375,29 +577,55 @@
           const {node, group} = groups.get(workspace.node_id);
           link.setAttribute("aria-label", `Open ${workspace.id} on ${node.alias || node.name}`);
           group.querySelector(".workspace-group-list").append(card);
+          if (workspace.unread) {
+            group.querySelector(".device-unread").hidden = false;
+            const unreadCard = card.cloneNode(true);
+            const detail = unreadCard.querySelector(".session-count");
+            detail.textContent = `${node.alias || node.name} · ${detail.textContent}`;
+            detail.title = detail.textContent;
+            unreadList.append(unreadCard);
+          }
+        }
+        if (unreadList.childElementCount) {
+          unreadGroup.querySelector(".count").textContent = countLabel(
+            unreadList.childElementCount, "workspace");
+          workspaceList.append(unreadGroup);
         }
         for (const {group} of groups.values()) {
           const count = group.querySelector(".workspace-group-list").childElementCount;
-          if (!count) continue;
           group.querySelector(".count").textContent = countLabel(count, "workspace");
+          if (!count) {
+            group.querySelector(".list-head").remove();
+            group.querySelector(".workspace-group-list").append(
+              empty("No workspaces yet", "Use Manage to create a workspace on this device."));
+          }
           workspaceList.append(group);
         }
-        if (!data.workspaces.length) {
-          workspaceList.append(empty("No workspaces yet", data.nodes.length
-            ? "Open a device to create your first workspace."
-            : "Your workspaces will appear when a device connects."));
+        if (!data.nodes.length) {
+          workspaceList.append(empty("No workspaces yet",
+            "Your workspaces will appear when a device connects."));
         }
 
         const nodeList = document.createDocumentFragment();
         for (const node of data.nodes) {
           const card = deviceTemplate.content.firstElementChild.cloneNode(true);
-          bindDeviceLabel(card.querySelector(".device-label"), node, data);
+          card.dataset.nodeId = node.id;
+          bindDeviceDrag(card, node, data);
+          const label = card.querySelector(".device-label");
+          setDeviceLabel(label, node);
+          const rename = card.querySelector(".device-rename");
+          rename.setAttribute("aria-label", `Rename device ${node.alias || node.name}`);
+          rename.addEventListener("click", () => editDeviceAlias(label, rename, node, data));
           const owned = data.workspaces.filter(workspace => workspace.node_id === node.id);
+          card.querySelector(".device-unread").hidden = !owned.some(workspace => workspace.unread);
           const sessions = owned.reduce((total, workspace) => total + workspace.session_count, 0);
           card.querySelector(".device-detail").textContent = `${countLabel(owned.length, "workspace")} · ${countLabel(sessions, "session")}`;
-          const link = card.querySelector(".manage-link");
-          link.href = node.url;
-          link.setAttribute("aria-label", `Manage workspaces on ${node.alias || node.name}`);
+          const working = owned.filter(workspace => workspace.running).length;
+          for (const container of [groups.get(node.id).group, card]) {
+            const badge = container.querySelector(".device-working");
+            badge.hidden = !working;
+            badge.textContent = working ? `${working} working` : "";
+          }
           nodeList.append(card);
         }
         if (!data.nodes.length) {
@@ -405,6 +633,10 @@
         }
         workspaces.replaceChildren(workspaceList);
         nodes.replaceChildren(nodeList);
+        if (focusedHandle) {
+          const handle = nodes.querySelector(`.device[data-node-id="${CSS.escape(focusedHandle)}"] .device-drag`);
+          if (handle) handle.focus({preventScroll: true});
+        }
         document.getElementById("workspace-count").textContent = data.workspaces.length;
         document.getElementById("device-count").textContent = data.nodes.length;
         const running = data.workspaces.filter(workspace => workspace.running).length;
@@ -414,7 +646,7 @@
       async function refresh() {
         if (refreshing) return;
         refreshing = true;
-        const revision = aliasRevision;
+        const revision = inventoryRevision;
         try {
           const response = await fetch("api/workspaces", {cache: "no-store"});
           if (response.status === 401) {
@@ -424,7 +656,7 @@
           if (!response.ok) throw new Error(`HTTP ${response.status}`);
           const data = await response.json();
           const next = JSON.stringify(data);
-          if (editingDevice === null && revision === aliasRevision && next !== signature) {
+          if (editingDevice === null && !reordering && revision === inventoryRevision && next !== signature) {
             render(data);
             signature = next;
           }

{pycodex_ws-0.4.4 → pycodex_ws-0.4.6}/pycodex_router/server.py

@@ -63,10 +63,11 @@ def load_registration_key(path):
 def normalize_alias(value):
     if (
         not isinstance(value, str)
+        or not value.strip()
         or len(value) > 128
         or any(ord(char) < 32 for char in value)
     ):
-        raise ValueError("Device alias must be a single line of at most 128 characters.")
+        raise ValueError("Device alias must be a single line of 1 to 128 characters.")
     value.encode("utf-8")
     return value.strip()
 
@@ -175,8 +176,8 @@ class Router:
             aliases = json.loads(self.aliases_path.read_text(encoding="utf-8"))
             if not isinstance(aliases, dict) or any(
                 not re.fullmatch("[a-z2-7]{52}", node_id)
-                or not alias
-                or normalize_alias(alias) != alias
+                or not isinstance(alias, str)
+                or (alias and normalize_alias(alias) != alias)
                 for node_id, alias in aliases.items()
             ):
                 raise ValueError("invalid router aliases file")
@@ -200,6 +201,33 @@ class Router:
                         temporary_path.unlink()
         self.aliases = aliases
 
+    async def reorder_devices(self, request):
+        if not self.browser_token or not _auth_cookie_matches(
+            self.browser_token, request.cookies.get("pycodex_router_auth")
+        ):
+            raise HTTPException(401, "Authentication required.")
+        payload = await _json_object_body(request, max_bytes=64 * 1024)
+        order = payload.get("order")
+        if (
+            not isinstance(order, list)
+            or any(
+                not isinstance(node_id, str)
+                or not re.fullmatch("[a-z2-7]{52}", node_id)
+                for node_id in order
+            )
+            or len(set(order)) != len(order)
+        ):
+            raise HTTPException(422, "Device order must be a list of unique device IDs.")
+        if set(order) != set(self.nodes):
+            raise HTTPException(409, "Connected devices changed. Refresh and try again.")
+        online_order = iter(order)
+        saved_order = [
+            next(online_order) if node_id in self.nodes else node_id
+            for node_id in self.aliases
+        ]
+        self._save_aliases({node_id: self.aliases[node_id] for node_id in saved_order})
+        return JSONResponse({"order": order})
+
     async def rename_device(self, request):
         if not self.browser_token or not _auth_cookie_matches(
             self.browser_token, request.cookies.get("pycodex_router_auth")
@@ -214,10 +242,7 @@ class Router:
         except ValueError as exc:
             raise HTTPException(422, str(exc))
         aliases = dict(self.aliases)
-        if alias:
-            aliases[node_id] = alias
-        else:
-            aliases.pop(node_id, None)
+        aliases[node_id] = alias
         self._save_aliases(aliases)
         return JSONResponse({"alias": alias})
 
@@ -265,6 +290,10 @@ class Router:
                 name,
                 validate_inventory(message["workspaces"]),
             )
+            if node_id not in self.aliases:
+                aliases = dict(self.aliases)
+                aliases[node_id] = ""
+                self._save_aliases(aliases)
             self.nodes[node_id] = node
             await websocket.send_text(encode({"type": "registered", "id": node_id}))
             while True:
@@ -425,7 +454,10 @@ class Router:
     async def workspaces(self, request):
         nodes = []
         workspaces = []
-        for node in sorted(self.nodes.values(), key=lambda item: item.id):
+        for node_id in self.aliases:
+            if node_id not in self.nodes:
+                continue
+            node = self.nodes[node_id]
             base = request.scope.get("root_path", "") + "/n/" + node.id + "/"
             nodes.append({
                 "id": node.id,
@@ -480,6 +512,7 @@ def create_app(
             Route("/", index),
             Route("/api/workspaces", router.workspaces),
             Route("/api/registration-key", registration_key_info),
+            Route("/api/nodes/order", router.reorder_devices, methods=["POST"]),
             Route("/api/nodes/{node_id}/alias", router.rename_device, methods=["POST"]),
         ]
     )

{pycodex_ws-0.4.4 → pycodex_ws-0.4.6}/pyproject.toml

@@ -4,12 +4,12 @@ build-backend = "hatchling.build"
 
 [project]
 name = "pycodex-ws"
-version = "0.4.4"
+version = "0.4.6"
 description = "Browser workspace and optional Feishu integration for python-codex"
 readme = "README.md"
 requires-python = ">=3.7"
 dependencies = [
-    "python-codex==0.4.4",
+    "python-codex==0.4.6",
     "pillow>=9.0.0",
     "websockets>=11,<16",
 ]

{pycodex_ws-0.4.4 → pycodex_ws-0.4.6}/workspace_server/app.py

@@ -7,6 +7,7 @@ import json
 import mimetypes
 import os
 import secrets
+import socket
 import subprocess
 import sys
 import threading
@@ -479,6 +480,8 @@ class WebSessionView:
         if isinstance(event, TurnFailedEvent):
             turn["status"] = "error"
             turn["error"] = event.visualize()
+            turn["final_id"] = event.turn_id
+            self._last_final_id = event.turn_id
             self._stream_buffer = ""
             return
 
@@ -1132,10 +1135,15 @@ def _install_auth(
         )
 
     async def login_page(request: Request) -> HTMLResponse:
-        return _html_response(_render_login_shell(login_title))
+        address = str(request.url.replace(
+            path=request.scope.get("root_path", "") + "/", query="",
+        ))
+        return _html_response(_render_login_shell(
+            login_title, socket.gethostname(), address,
+        ))
 
     async def login(request: Request) -> JSONResponse:
-        payload = await _json_object_body(request)
+        payload = await _json_object_body(request, max_bytes=4096)
         client_ip = request.client.host if blocked_ips is not None else None
         # Another login can block this IP while the request body is arriving.
         if blocked_ips is not None and client_ip in blocked_ips:
@@ -1182,14 +1190,25 @@ def _install_auth(
     return token
 
 
-async def _json_object_body(request: Request) -> "typing.Dict[str, object]":
+async def _json_object_body(
+    request: Request, max_bytes: "typing.Union[int, None]" = None,
+) -> "typing.Dict[str, object]":
     media_type = request.headers.get("content-type", "").split(";", 1)[0].strip().lower()
     if media_type != "application/json" and not (
         media_type.startswith("application/") and media_type.endswith("+json")
     ):
         raise HTTPException(status_code=422, detail="request body must be JSON")
+    body = bytearray()
+    async for chunk in request.stream():
+        if max_bytes is not None and len(body) + len(chunk) > max_bytes:
+            raise HTTPException(
+                status_code=413,
+                detail="request body exceeds {0} bytes".format(max_bytes),
+                headers={"Connection": "close"},
+            )
+        body.extend(chunk)
     try:
-        payload = await request.json()
+        payload = json.loads(body)
     except (json.JSONDecodeError, UnicodeDecodeError):
         raise HTTPException(status_code=422, detail="invalid JSON body")
     if not isinstance(payload, dict):
@@ -1203,13 +1222,13 @@ def _auth_cookie_matches(token: str, cookie: "typing.Union[str, None]") -> bool:
     return bool(cookie) and secrets.compare_digest(str(cookie), token)
 
 
-def _render_login_shell(title: str = "pycodex workspace") -> str:
+def _render_login_shell(title: str, hostname: str, address: str) -> str:
     return """<!doctype html>
 <html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>__LOGIN_TITLE__</title>
+  <title>Log in to __LOGIN_TITLE__</title>
   <style>
     :root {
       color-scheme: light dark;
@@ -1232,6 +1251,12 @@ def _render_login_shell(title: str = "pycodex workspace") -> str:
       margin: 0;
       font-size: 22px;
     }
+    .login-target {
+      margin: 0;
+      font-size: 13px;
+      line-height: 1.6;
+      overflow-wrap: anywhere;
+    }
     input, button {
       min-height: 38px;
       border-radius: 7px;
@@ -1251,10 +1276,11 @@ def _render_login_shell(title: str = "pycodex workspace") -> str:
 </head>
 <body>
   <form id="loginForm">
-    <h1>__LOGIN_TITLE__</h1>
+    <h1>Log in to __LOGIN_TITLE__</h1>
+    <p class="login-target">Server: <strong>__LOGIN_HOST__</strong><br><code>__LOGIN_ADDRESS__</code></p>
     <label for="passwordInput">Password</label>
     <input id="passwordInput" type="password" autocomplete="current-password" autofocus>
-    <button type="submit">Open</button>
+    <button type="submit">Log in</button>
     <div id="status" class="status" role="status"></div>
   </form>
   <script>
@@ -1280,7 +1306,9 @@ def _render_login_shell(title: str = "pycodex workspace") -> str:
     });
   </script>
 </body>
-</html>""".replace("__LOGIN_TITLE__", html.escape(title))
+</html>""".replace("__LOGIN_TITLE__", html.escape(title)).replace(
+        "__LOGIN_HOST__", html.escape(hostname),
+    ).replace("__LOGIN_ADDRESS__", html.escape(address))
 
 
 async def _http_exception_response(request: Request, exc: HTTPException) -> JSONResponse:
@@ -1637,6 +1665,15 @@ async def _websocket_session_handler(
     manager: "WorkspaceSessionManager",
     websocket: WebSocket,
 ) -> None:
+    url = websocket.url
+    scheme = "https" if url.scheme == "wss" else "http"
+    authority = url.netloc.lower()
+    if url.port == (443 if scheme == "https" else 80):
+        authority = authority.rsplit(":", 1)[0]
+    # Browsers send Origin; non-browser clients may omit it.
+    if websocket.headers.get("origin") not in (None, scheme + "://" + authority):
+        await websocket.close(code=1008)
+        return
     await websocket.accept()
     session_id = str(websocket.query_params.get("session_id") or "")
     try:

{pycodex_ws-0.4.4 → pycodex_ws-0.4.6}/workspace_server/workspace.html

@@ -2249,11 +2249,15 @@
         const response = renderEntry(
           `${key}:response`, turn.response, isControl ? "control" : "response", !isControl
         );
-        response.dataset.finalId = isControl ? "" : (turn.final_id || "");
+        response.dataset.finalId = isControl || turn.error ? "" : (turn.final_id || "");
         response.dataset.sessionId = activeSessionId;
       }
       if (turn.thinking) renderEntry(`${key}:thinking`, turn.thinking, "thinking");
-      if (turn.error) renderEntry(`${key}:error`, turn.error, "error");
+      if (turn.error) {
+        const error = renderEntry(`${key}:error`, turn.error, "error");
+        error.dataset.finalId = isControl ? "" : (turn.final_id || "");
+        error.dataset.sessionId = activeSessionId;
+      }
     }
 
     async function markVisibleFinalRead() {