@putkoff/abstract-securefiles 0.0.51 → 0.0.53

package/src/MyComputers.tsx

@@ -0,0 +1,162 @@
+import React, { useEffect, useState } from "react";
+import type { SecureFilesApi } from "./api";
+import type { Device } from "./types";
+import { ConfirmButton } from "./ConfirmButton";
+import { CopyButton } from "./CopyButton";
+
+const errText = (err: unknown) => (err instanceof Error ? err.message : String(err));
+
+const UNIX_CMD = "pipx install abstract-securefiles && pipx ensurepath && ~/.local/bin/securefiles setup";
+const WIN_CMD = "py -m pip install --user pipx; py -m pipx install abstract-securefiles; py -m pipx ensurepath";
+
+function ago(iso: string | null) {
+  if (!iso) return "never";
+  const secs = Math.max(0, (Date.now() - new Date(iso).getTime()) / 1000);
+  if (secs < 90) return "just now";
+  if (secs < 3600) return `${Math.round(secs / 60)} min ago`;
+  if (secs < 86400) return `${Math.round(secs / 3600)} h ago`;
+  return `${Math.round(secs / 86400)} d ago`;
+}
+
+function AddComputer({ api, onPaired }: { api: SecureFilesApi; onPaired: () => void }) {
+  const [code, setCode] = useState<string | null>(null);
+  const [expiresAt, setExpiresAt] = useState(0);
+  const [, setTick] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!code) return;
+    const timer = setInterval(() => {
+      if (Date.now() > expiresAt) setCode(null);
+      setTick((t) => t + 1);
+      onPaired();
+    }, 5000);
+    return () => clearInterval(timer);
+  }, [code, expiresAt, onPaired]);
+
+  const create = async () => {
+    setError(null);
+    try {
+      const res = await api.pairDevice();
+      setCode(res.code);
+      setExpiresAt(Date.now() + res.expires_in * 1000);
+    } catch (err) {
+      setError(errText(err));
+    }
+  };
+  const minutesLeft = Math.max(1, Math.round((expiresAt - Date.now()) / 60000));
+
+  if (!code) {
+    return (
+      <div className="sf-row">
+        <button type="button" className="sf-btn sf-btn--primary" onClick={create}>
+          Add a computer
+        </button>
+        {error && <span className="sf-error">{error}</span>}
+      </div>
+    );
+  }
+  return (
+    <div className="sf-card">
+      <h4>Connect a computer</h4>
+      <ol className="sf-steps">
+        <li>
+          On that computer, install the agent (needs Python 3.9+):
+          <div className="sf-os">
+            <b>Linux / macOS</b> (Terminal)
+            <div className="sf-row">
+              <code className="sf-codeline">{UNIX_CMD}</code>
+              <CopyButton text={UNIX_CMD} label="Copy" />
+            </div>
+            <span className="sf-muted">
+              No pipx? <code>python3 -m pip install --user pipx</code> then use <code>python3 -m pipx</code>. On a Mac
+              without Python, run <code>python3</code> once and accept Apple's developer-tools install.
+            </span>
+          </div>
+          <div className="sf-os">
+            <b>Windows</b> (PowerShell; install Python from python.org first)
+            <div className="sf-row">
+              <code className="sf-codeline">{WIN_CMD}</code>
+              <CopyButton text={WIN_CMD} label="Copy" />
+            </div>
+            <span className="sf-muted">Then open a new PowerShell window and run <code>securefiles setup</code>.</span>
+          </div>
+        </li>
+        <li>
+          In the panel that opens (<code>http://127.0.0.1:47821</code>), enter this code, or run{" "}
+          <code>securefiles pair {code}</code>:
+          <div className="sf-row">
+            <span className="sf-paircode">{code}</span>
+            <CopyButton text={code} label="Copy" />
+          </div>
+          <span className="sf-muted">Valid for about {minutesLeft} more minutes, once.</span>
+        </li>
+        <li>
+          Pick files and folders to share in that panel (or <code>securefiles share PATH</code>). They appear here
+          under <code>devices/&lt;computer&gt;/</code>, where you set links, passwords and limits.
+        </li>
+      </ol>
+      <div className="sf-row">
+        <button type="button" className="sf-btn" onClick={() => setCode(null)}>
+          Done
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function MyComputers({
+  api,
+  devices,
+  onChange,
+}: {
+  api: SecureFilesApi;
+  devices: Device[];
+  onChange: () => void;
+}) {
+  const [error, setError] = useState<string | null>(null);
+  return (
+    <details className="sf-admin">
+      <summary>
+        My computers{" "}
+        <span className="sf-muted">
+          ({devices.filter((d) => d.online).length} online / {devices.length})
+        </span>
+      </summary>
+      <div className="sf-stack">
+        <p className="sf-muted">
+          Share files and folders straight from your own computers — nothing is uploaded. Downloads stream from the
+          computer through this site with the same links, passwords, limits and resume, while it's online.
+        </p>
+        {devices.length > 0 && (
+          <ul className="sf-roots">
+            {devices.map((d) => (
+              <li key={d.id}>
+                <span>
+                  <span className={`sf-dot${d.online ? " sf-dot--on" : ""}`} /> <b>{d.name}</b>{" "}
+                  <span className="sf-muted">
+                    {d.online ? "online" : `offline · last seen ${ago(d.last_seen)}`}
+                    {d.platform ? ` · ${d.platform}` : ""}
+                  </span>
+                </span>
+                <ConfirmButton
+                  label="Remove"
+                  onConfirm={async () => {
+                    try {
+                      await api.removeDevice(d.id);
+                      onChange();
+                    } catch (err) {
+                      setError(errText(err));
+                    }
+                  }}
+                />
+              </li>
+            ))}
+          </ul>
+        )}
+        {error && <p className="sf-error">{error}</p>}
+        <AddComputer api={api} onPaired={onChange} />
+      </div>
+    </details>
+  );
+}

package/src/SecureFiles.tsx

@@ -1,11 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { createApi } from "./api";
-import type { SecureFile, SecureFilesProps, ShareUpdate } from "./types";
+import type { Device, SecureFile, SecureFilesProps, ShareUpdate } from "./types";
 import { UploadPanel } from "./UploadPanel";
 import { ShareDialog } from "./ShareDialog";
 import { CopyButton } from "./CopyButton";
 import { ConfirmButton } from "./ConfirmButton";
 import { ServerFiles } from "./ServerFiles";
+import { MyComputers } from "./MyComputers";
 import "./styles.css";
 
 interface FolderNode {
@@ -40,6 +41,7 @@ export default function SecureFiles({ apiBase }: SecureFilesProps) {
   const [files, setFiles] = useState<SecureFile[]>([]);
   const [user, setUser] = useState<string | null>(null);
   const [isAdmin, setIsAdmin] = useState(false);
+  const [devices, setDevices] = useState<Device[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [notice, setNotice] = useState<string | null>(null);
@@ -55,6 +57,7 @@ export default function SecureFiles({ apiBase }: SecureFilesProps) {
       const data = await api.list();
       setUser(data.user_name);
       setIsAdmin(data.is_admin);
+      setDevices(data.devices || []);
       setFiles(data.files);
       setSelected((prev) => new Set([...prev].filter((id) => data.files.some((f) => f.id === id))));
     } catch (err) {
@@ -163,7 +166,7 @@ export default function SecureFiles({ apiBase }: SecureFilesProps) {
           />
         </td>
         <td style={{ paddingLeft: 10 + depth * 20 }}>
-          <span className={f.available ? undefined : "sf-strike"}>{f.filename}</span>
+          <span className={f.available || f.device ? undefined : "sf-strike"}>{f.filename}</span>
           {f.kind === "folder" && (
             <span className="sf-tag" title="Downloads as one uncompressed, resumable .tar of the whole folder">
               folder · .tar
@@ -174,7 +177,15 @@ export default function SecureFiles({ apiBase }: SecureFilesProps) {
               linked
             </span>
           )}
-          {!f.available && (
+          {f.device && (
+            <span
+              className={`sf-tag${f.device.online ? "" : " sf-tag--warn"}`}
+              title="Served from your computer through the relay"
+            >
+              on {f.device.name} · {f.device.online ? "online" : "offline"}
+            </span>
+          )}
+          {!f.available && !f.device && (
             <span
               className="sf-tag sf-tag--warn"
               title={f.linked ? "Source file is gone or its directory is no longer allowed" : "File is missing on disk"}
@@ -213,7 +224,13 @@ export default function SecureFiles({ apiBase }: SecureFilesProps) {
             >
               ⚙️
             </button>
-            <ConfirmButton label={f.linked ? "Unlink" : "Delete"} disabled={busy} onConfirm={() => remove([f])} />
+            {f.device ? (
+              <span className="sf-muted sf-small" title="Stop sharing it from that computer's Secure Files panel">
+                managed on {f.device.name}
+              </span>
+            ) : (
+              <ConfirmButton label={f.linked ? "Unlink" : "Delete"} disabled={busy} onConfirm={() => remove([f])} />
+            )}
           </div>
         </td>
       </tr>
@@ -258,7 +275,9 @@ export default function SecureFiles({ apiBase }: SecureFilesProps) {
         {user && <span className="sf-muted">Signed in as {user}</span>}
       </header>
 
-      <UploadPanel api={api} folders={folders} onUploaded={load} />
+      <UploadPanel api={api} folders={folders.filter((d) => d !== "devices" && !d.startsWith("devices/"))} onUploaded={load} />
+
+      <MyComputers api={api} devices={devices} onChange={load} />
 
       {isAdmin && <ServerFiles api={api} folders={folders} onLinked={load} />}
 

package/src/api.ts

@@ -1,4 +1,4 @@
-import type { BrowseResult, LinkRoot, RootChallenge, SecureFile, ShareUpdate } from "./types";
+import type { BrowseResult, Device, LinkRoot, RootChallenge, SecureFile, ShareUpdate } from "./types";
 
 export const DEFAULT_API_BASE = "https://api.abstractendeavors.com";
 
@@ -34,7 +34,13 @@ export function createApi(apiBase: string = DEFAULT_API_BASE) {
   }
 
   return {
-    list: () => json<{ user_name: string; is_admin: boolean; files: SecureFile[] }>("/userInfo"),
+    list: () => json<{ user_name: string; is_admin: boolean; files: SecureFile[]; devices: Device[] }>("/userInfo"),
+
+    devices: () => json<{ devices: Device[] }>("/devices"),
+
+    pairDevice: () => json<{ code: string; expires_in: number }>("/devices/pair", { method: "POST", body: "{}" }),
+
+    removeDevice: (id: number) => json<{ devices: Device[] }>(`/devices/${id}`, { method: "DELETE" }),
 
     roots: () => json<{ roots: LinkRoot[] }>("/admin/roots"),
 

package/src/index.ts

@@ -1,4 +1,4 @@
 export { default as SecureFiles } from "./SecureFiles";
 export { createApi, DEFAULT_API_BASE, ApiError } from "./api";
 export type { SecureFilesApi } from "./api";
-export type { SecureFile, ShareUpdate, SecureFilesProps, LinkRoot, RootChallenge, BrowseResult } from "./types";
+export type { SecureFile, ShareUpdate, SecureFilesProps, LinkRoot, RootChallenge, BrowseResult, Device } from "./types";

package/src/styles.css

@@ -440,3 +440,47 @@
   border-bottom: none;
   padding: 0;
 }
+.sf-dot {
+  display: inline-block;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--sf-danger);
+  vertical-align: middle;
+}
+.sf-dot--on {
+  background: #16a34a;
+}
+.sf-steps {
+  margin: 0;
+  padding-left: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.sf-steps li > .sf-row {
+  margin: 4px 0;
+}
+.sf-codeline {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  background: var(--sf-subtle);
+  border: 1px solid var(--sf-border);
+  border-radius: 6px;
+  padding: 4px 8px;
+}
+.sf-paircode {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+.sf-small {
+  font-size: 12px;
+}
+.sf-os {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 6px;
+}

package/src/types.ts

@@ -15,8 +15,20 @@ export interface SecureFile {
   /** "folder" entries download as an uncompressed, resumable .tar of the whole directory */
   kind: "file" | "folder";
   source_path: string | null;
-  /** false when the file is missing on disk (or its allowed directory was removed) */
+  /** false when the file is missing on disk, its allowed directory was removed, or its computer is offline */
   available: boolean;
+  /** set when the item lives on one of the user's computers and is served through the relay */
+  device: Device | null;
+  size: number | null;
+}
+
+export interface Device {
+  id: number;
+  name: string;
+  platform: string | null;
+  agent_version: string | null;
+  online: boolean;
+  last_seen: string | null;
 }
 
 export interface LinkRoot {