transmission, extracted from the platform into its own repository

The sixth plugin out, immediately after photos. A sidecar, a proxy router and 29 web files; no db/ directory, because there are no tables. ── The one thing that is not self-contained ── The connection lives in `service_connections`, a CORE table, reached through getServiceConnection/saveServiceConnection/getServiceCredentials. This plugin declares no schema. Deliberate: that table is the app store's shared credential store, keyed on (user_id, service), already encrypted at rest and already read by app-store/effects.ts. A private copy of the same three columns would be a second place the same fact could live, and the runbook is explicit that a move plus a data-format change gives any failure two causes. The cost, stated rather than hidden: this plugin depends on a core facility it does not own, and would break if that table changed shape. Photos, by contrast, owns photos_config outright. ── 38 palette classes paid down, mapped by meaning ── blue downloading / download speed -> info cyan checking (verifying) -> busy emerald seeding / complete -> success amber queued / stalled / warnings -> warning Collapsing blue and cyan into one tone would have lost a real distinction in the status dot, so `checking` went to `busy` — in-progress work, which is what that tone is for. ── A near-miss worth recording ── The first copy globbed *.tsx and *.ts and silently missed detail/ and dialogs/ — ten components. tsgo caught it as ten "cannot find module" errors. Worth stating because it is quiet in the other direction: had those been imported lazily, the typecheck would have passed and the panels would have broken at runtime. Check the directory tree, not the file glob. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-18 19:19:30 +00:00
commit 864dd16355
40 changed files with 5656 additions and 0 deletions
@@ -0,0 +1,57 @@
+import type { Torrent } from '../shared';
+import { Lock } from 'lucide-react';
+import { describePeerFlags, formatPercent, formatSpeed } from '../format';
+
+// Connected peers. Not sortable and not virtualised on purpose: the list is capped by the torrent's peer
+// limit (50 by default), it churns every poll, and a sort you have to re-establish every five seconds is
+// worse than no sort.
+
+type PeersTabProps = { torrent: Torrent };
+
+const HEAD = 'px-3 py-1.5 text-left text-[11px] font-medium uppercase tracking-wide text-muted-foreground';
+
+export const PeersTab = ({ torrent }: PeersTabProps) => {
+  const peers = torrent.peers ?? [];
+
+  if (!peers.length) {
+    return <p className="p-6 text-center text-sm text-muted-foreground">No peers connected.</p>;
+  }
+
+  return (
+    <div className="h-full overflow-auto">
+      <table className="w-full border-collapse text-xs">
+        <thead className="sticky top-0 bg-background/95 backdrop-blur">
+          <tr className="border-b border-border">
+            <th className={HEAD}>Address</th>
+            <th className={HEAD}>Client</th>
+            <th className={`${HEAD} text-right`}>Progress</th>
+            <th className={`${HEAD} text-right`}>Down</th>
+            <th className={`${HEAD} text-right`}>Up</th>
+            <th className={HEAD}>Flags</th>
+          </tr>
+        </thead>
+        <tbody>
+          {peers.map((peer) => (
+            <tr key={`${peer.address}:${peer.port}`} className="border-b border-border/40 hover:bg-muted/40">
+              <td className="px-3 py-1.5 font-mono">
+                <span className="flex items-center gap-1.5">
+                  {peer.isEncrypted && <Lock className="h-3 w-3 shrink-0 text-success" aria-label="Encrypted" />}
+                  {peer.address}:{peer.port}
+                </span>
+              </td>
+              <td className="max-w-[200px] truncate px-3 py-1.5" title={peer.clientName}>
+                {peer.clientName || '—'}
+              </td>
+              <td className="px-3 py-1.5 text-right tabular-nums">{formatPercent(peer.progress)}</td>
+              <td className="px-3 py-1.5 text-right tabular-nums text-info">{formatSpeed(peer.rateToClient)}</td>
+              <td className="px-3 py-1.5 text-right tabular-nums text-success">{formatSpeed(peer.rateToPeer)}</td>
+              <td className="px-3 py-1.5 font-mono text-muted-foreground" title={describePeerFlags(peer.flagStr)}>
+                {peer.flagStr}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};