@putkoff/abstract-securefiles 0.0.52 → 0.0.54

package/dist/types.d.ts

@@ -72,3 +72,29 @@ export interface SecureFilesProps {
     /** API origin; defaults to https://api.abstractendeavors.com */
     apiBase?: string;
 }
+export interface Person {
+    username: string;
+    connected_at: string | null;
+    /** what I share with this person: everything, or specific item ids */
+    my_grant: {
+        all: boolean;
+        ids: number[];
+    };
+    /** how many items they share with me */
+    shared_with_me: number;
+}
+export interface SharedItem {
+    id: number;
+    filename: string;
+    filepath: string;
+    kind: "file" | "folder";
+    size: number | null;
+    available: boolean;
+    device: Device | null;
+    created_at: string | null;
+}
+export interface SharedOwner {
+    owner: string;
+    all: boolean;
+    files: SharedItem[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@putkoff/abstract-securefiles",
-  "version": "0.0.52",
+  "version": "0.0.54",
   "description": "A reusable Secure file system",
   "main": "dist/index.cjs",
   "module": "dist/index.js",

package/src/MyComputers.tsx

@@ -6,6 +6,9 @@ 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);
@@ -58,22 +61,40 @@ function AddComputer({ api, onPaired }: { api: SecureFilesApi; onPaired: () => v
       <h4>Connect a computer</h4>
       <ol className="sf-steps">
         <li>
-          On that computer, install the agent (Linux, macOS or Windows with Python 3.9+):
-          <div className="sf-row">
-            <code className="sf-codeline">pipx install abstract-securefiles &amp;&amp; securefiles setup</code>
-            <CopyButton text="pipx install abstract-securefiles && securefiles setup" label="Copy" />
+          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>
-          <span className="sf-muted">No pipx? Use <code>python3 -m pip install --user abstract-securefiles</code> then <code>securefiles setup</code>.</span>
         </li>
         <li>
-          In the panel that opens (<code>http://127.0.0.1:47821</code>), enter this code:
+          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 the files and folders to share there. They appear here under <code>devices/&lt;computer&gt;/</code>.</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)}>

package/src/People.tsx

@@ -0,0 +1,327 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import type { SecureFilesApi } from "./api";
+import type { Person, SecureFile, SharedOwner } from "./types";
+import { ConfirmButton } from "./ConfirmButton";
+import { CopyButton } from "./CopyButton";
+
+const errText = (err: unknown) => (err instanceof Error ? err.message : String(err));
+
+function formatSize(bytes: number | null) {
+  if (bytes == null) return "";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let n = bytes;
+  let i = 0;
+  while (n >= 1024 && i < units.length - 1) {
+    n /= 1024;
+    i++;
+  }
+  return `${n.toFixed(i ? 1 : 0)} ${units[i]}`;
+}
+
+function GrantEditor({
+  person,
+  files,
+  onSave,
+  onClose,
+}: {
+  person: Person;
+  files: SecureFile[];
+  onSave: (grant: { all: boolean; ids: number[] }) => Promise<void>;
+  onClose: () => void;
+}) {
+  const [all, setAll] = useState(person.my_grant.all);
+  const [ids, setIds] = useState<Set<number>>(new Set(person.my_grant.ids));
+  const [search, setSearch] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const visible = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    return [...files]
+      .sort((a, b) => a.filepath.localeCompare(b.filepath))
+      .filter((f) => !q || f.filepath.toLowerCase().includes(q));
+  }, [files, search]);
+
+  const save = async () => {
+    setSaving(true);
+    setError(null);
+    try {
+      await onSave({ all, ids: all ? [] : [...ids] });
+      onClose();
+    } catch (err) {
+      setError(errText(err));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="sf-card">
+      <h4>What {person.username} can access</h4>
+      <label className="sf-check">
+        <input type="radio" checked={all} onChange={() => setAll(true)} />
+        <span>
+          <b>All my files</b> <span className="sf-muted">— including anything you add later</span>
+        </span>
+      </label>
+      <label className="sf-check">
+        <input type="radio" checked={!all} onChange={() => setAll(false)} />
+        <b>Only the items I choose</b>
+      </label>
+      {!all && (
+        <>
+          <input
+            className="sf-input"
+            type="search"
+            placeholder="Filter your files…"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+          <div className="sf-browser">
+            {visible.length === 0 && <p className="sf-muted">No files.</p>}
+            {visible.map((f) => (
+              <label key={f.id} className="sf-check sf-browser__file">
+                <input
+                  type="checkbox"
+                  checked={ids.has(f.id)}
+                  onChange={(e) =>
+                    setIds((s) => {
+                      const next = new Set(s);
+                      e.target.checked ? next.add(f.id) : next.delete(f.id);
+                      return next;
+                    })
+                  }
+                />
+                <span className="sf-browser__name">{f.filepath}</span>
+                <span className="sf-muted">{f.kind === "folder" ? "folder · .tar" : formatSize(f.size)}</span>
+              </label>
+            ))}
+          </div>
+          <span className="sf-muted">{ids.size} selected</span>
+        </>
+      )}
+      {error && <p className="sf-error">{error}</p>}
+      <div className="sf-row sf-row--end">
+        <button type="button" className="sf-btn" onClick={onClose}>
+          Cancel
+        </button>
+        <button type="button" className="sf-btn sf-btn--primary" disabled={saving} onClick={save}>
+          {saving ? "Saving…" : "Save"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function People({ api, files }: { api: SecureFilesApi; files: SecureFile[] }) {
+  const [people, setPeople] = useState<Person[]>([]);
+  const [code, setCode] = useState<string | null>(null);
+  const [entered, setEntered] = useState("");
+  const [editing, setEditing] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      setPeople((await api.people()).people);
+    } catch (err) {
+      setError(errText(err));
+    }
+  }, [api]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  useEffect(() => {
+    if (!code) return;
+    const timer = setInterval(load, 5000);
+    const expire = setTimeout(() => setCode(null), 15 * 60 * 1000);
+    return () => {
+      clearInterval(timer);
+      clearTimeout(expire);
+    };
+  }, [code, load]);
+
+  const invite = async () => {
+    setError(null);
+    try {
+      setCode((await api.invitePerson()).code);
+    } catch (err) {
+      setError(errText(err));
+    }
+  };
+
+  const accept = async () => {
+    setError(null);
+    setNotice(null);
+    try {
+      const res = await api.acceptPerson(entered);
+      setPeople(res.people);
+      setEntered("");
+      setNotice(`Connected with ${res.connected_with}.`);
+    } catch (err) {
+      setError(errText(err));
+    }
+  };
+
+  const describe = (p: Person) =>
+    p.my_grant.all ? "can access all your files" : `can access ${p.my_grant.ids.length} of your items`;
+
+  return (
+    <details className="sf-admin">
+      <summary>
+        People <span className="sf-muted">({people.length})</span>
+      </summary>
+      <div className="sf-stack">
+        <p className="sf-muted">
+          Connect with other abstractendeavors.com accounts, then choose what each person can access: all your files
+          or specific ones. They download while signed in; nothing is public.
+        </p>
+        {people.length > 0 && (
+          <ul className="sf-roots">
+            {people.map((p) => (
+              <li key={p.username}>
+                <span>
+                  <b>{p.username}</b>{" "}
+                  <span className={p.my_grant.all ? "sf-tag sf-tag--warn" : "sf-muted"}>{describe(p)}</span>
+                  {p.shared_with_me > 0 && (
+                    <span className="sf-muted"> · shares {p.shared_with_me} with you</span>
+                  )}
+                </span>
+                <span className="sf-row">
+                  <button type="button" className="sf-btn" onClick={() => setEditing(p.username)}>
+                    Choose access
+                  </button>
+                  <ConfirmButton
+                    label="Disconnect"
+                    onConfirm={async () => {
+                      try {
+                        setPeople((await api.removePerson(p.username)).people);
+                      } catch (err) {
+                        setError(errText(err));
+                      }
+                    }}
+                  />
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+        {editing && (
+          <GrantEditor
+            key={editing}
+            person={people.find((p) => p.username === editing)!}
+            files={files}
+            onClose={() => setEditing(null)}
+            onSave={async (grant) => setPeople((await api.setGrants(editing, grant)).people)}
+          />
+        )}
+        <div className="sf-row sf-row--bottom">
+          {code ? (
+            <div className="sf-field">
+              <span>Send this code to the person (valid 15 minutes, once):</span>
+              <div className="sf-row">
+                <span className="sf-paircode">{code}</span>
+                <CopyButton text={code} label="Copy" />
+                <button type="button" className="sf-btn" onClick={() => setCode(null)}>
+                  Done
+                </button>
+              </div>
+              <span className="sf-muted">They enter it under People → "Have a code?" on their Secure Files page.</span>
+            </div>
+          ) : (
+            <button type="button" className="sf-btn sf-btn--primary" onClick={invite}>
+              Invite someone
+            </button>
+          )}
+          <label className="sf-field sf-field--narrow">
+            <span>Have a code?</span>
+            <div className="sf-row">
+              <input
+                className="sf-input"
+                value={entered}
+                placeholder="ABCD-1234"
+                onChange={(e) => setEntered(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && entered.trim() && accept()}
+              />
+              <button type="button" className="sf-btn" disabled={!entered.trim()} onClick={accept}>
+                Connect
+              </button>
+            </div>
+          </label>
+        </div>
+        {notice && <p className="sf-muted">{notice}</p>}
+        {error && <p className="sf-error">{error}</p>}
+      </div>
+    </details>
+  );
+}
+
+export function SharedWithMe({ api }: { api: SecureFilesApi }) {
+  const [owners, setOwners] = useState<SharedOwner[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      setOwners((await api.sharedWithMe()).owners);
+      setError(null);
+    } catch (err) {
+      setError(errText(err));
+    }
+  }, [api]);
+
+  useEffect(() => {
+    load();
+    const onVisible = () => document.visibilityState === "visible" && load();
+    document.addEventListener("visibilitychange", onVisible);
+    return () => document.removeEventListener("visibilitychange", onVisible);
+  }, [load]);
+
+  if (!owners || owners.length === 0) return error ? <p className="sf-error">{error}</p> : null;
+  return (
+    <section className="sf-stack">
+      <h3 className="sf-subhead">Shared with me</h3>
+      {owners.map((o) => (
+        <div key={o.owner} className="sf-table-wrap">
+          <table className="sf-table">
+            <thead>
+              <tr>
+                <th>
+                  From <b>{o.owner}</b> {o.all && <span className="sf-muted">(all their files)</span>}
+                </th>
+                <th>Size</th>
+                <th className="sf-col-actions" />
+              </tr>
+            </thead>
+            <tbody>
+              {o.files.map((f) => (
+                <tr key={f.id}>
+                  <td>
+                    {f.filepath}
+                    {f.kind === "folder" && <span className="sf-tag">folder · .tar</span>}
+                    {f.device && (
+                      <span className={`sf-tag${f.device.online ? "" : " sf-tag--warn"}`}>
+                        on {f.device.name} · {f.device.online ? "online" : "offline"}
+                      </span>
+                    )}
+                  </td>
+                  <td className="sf-muted">{formatSize(f.size)}</td>
+                  <td className="sf-col-actions">
+                    <button
+                      type="button"
+                      className="sf-btn"
+                      disabled={!f.available}
+                      onClick={() => api.downloadShared(f.id)}
+                    >
+                      Download
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ))}
+    </section>
+  );
+}

package/src/SecureFiles.tsx

@@ -7,6 +7,7 @@ import { CopyButton } from "./CopyButton";
 import { ConfirmButton } from "./ConfirmButton";
 import { ServerFiles } from "./ServerFiles";
 import { MyComputers } from "./MyComputers";
+import { People, SharedWithMe } from "./People";
 import "./styles.css";
 
 interface FolderNode {
@@ -279,6 +280,8 @@ export default function SecureFiles({ apiBase }: SecureFilesProps) {
 
       <MyComputers api={api} devices={devices} onChange={load} />
 
+      <People api={api} files={files} />
+
       {isAdmin && <ServerFiles api={api} folders={folders} onLinked={load} />}
 
       <section className="sf-toolbar">
@@ -352,6 +355,8 @@ export default function SecureFiles({ apiBase }: SecureFilesProps) {
         </div>
       )}
 
+      <SharedWithMe api={api} />
+
       {editing && (
         <ShareDialog
           key={editing.id}

package/src/api.ts

@@ -1,4 +1,4 @@
-import type { BrowseResult, Device, LinkRoot, RootChallenge, SecureFile, ShareUpdate } from "./types";
+import type { BrowseResult, Device, LinkRoot, Person, RootChallenge, SecureFile, SharedOwner, ShareUpdate } from "./types";
 
 export const DEFAULT_API_BASE = "https://api.abstractendeavors.com";
 
@@ -42,6 +42,37 @@ export function createApi(apiBase: string = DEFAULT_API_BASE) {
 
     removeDevice: (id: number) => json<{ devices: Device[] }>(`/devices/${id}`, { method: "DELETE" }),
 
+    people: () => json<{ people: Person[] }>("/people"),
+
+    invitePerson: () => json<{ code: string; expires_in: number }>("/people/invite", { method: "POST", body: "{}" }),
+
+    acceptPerson: (code: string) =>
+      json<{ connected_with: string; people: Person[] }>("/people/accept", {
+        method: "POST",
+        body: JSON.stringify({ code }),
+      }),
+
+    setGrants: (username: string, grant: { all: boolean; ids: number[] }) =>
+      json<{ people: Person[] }>(`/people/${encodeURIComponent(username)}/grants`, {
+        method: "PUT",
+        body: JSON.stringify(grant),
+      }),
+
+    removePerson: (username: string) =>
+      json<{ people: Person[] }>(`/people/${encodeURIComponent(username)}`, { method: "DELETE" }),
+
+    sharedWithMe: () => json<{ owners: SharedOwner[] }>("/shared-with-me"),
+
+    /** Browser-native download of an item someone shared with me (streams to disk, resumable). */
+    downloadShared(id: number): void {
+      const a = document.createElement("a");
+      a.href = `${root}/shared-with-me/${id}`;
+      a.rel = "noopener";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+    },
+
     roots: () => json<{ roots: LinkRoot[] }>("/admin/roots"),
 
     requestRoot: (path: string) =>

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, Device } from "./types";
+export type { SecureFile, ShareUpdate, SecureFilesProps, LinkRoot, RootChallenge, BrowseResult, Device, Person, SharedItem, SharedOwner } from "./types";

package/src/styles.css

@@ -478,3 +478,13 @@
 .sf-small {
   font-size: 12px;
 }
+.sf-os {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 6px;
+}
+.sf-subhead {
+  margin: 8px 0 0;
+  font-size: 1.1em;
+}

package/src/types.ts

@@ -69,3 +69,29 @@ export interface SecureFilesProps {
   /** API origin; defaults to https://api.abstractendeavors.com */
   apiBase?: string;
 }
+
+export interface Person {
+  username: string;
+  connected_at: string | null;
+  /** what I share with this person: everything, or specific item ids */
+  my_grant: { all: boolean; ids: number[] };
+  /** how many items they share with me */
+  shared_with_me: number;
+}
+
+export interface SharedItem {
+  id: number;
+  filename: string;
+  filepath: string;
+  kind: "file" | "folder";
+  size: number | null;
+  available: boolean;
+  device: Device | null;
+  created_at: string | null;
+}
+
+export interface SharedOwner {
+  owner: string;
+  all: boolean;
+  files: SharedItem[];
+}