@talgent/workbench-ui 0.0.0 → 0.1.2

package/pages/computers/connect-computer-page.tsx

@@ -0,0 +1,92 @@
+import { useState, type FormEvent } from "react";
+import { Alert, Button, Card, Input, Label, Skeleton, TextField } from "@heroui/react";
+import { CircleCheck, Monitor } from "lucide-react";
+import { Link, useSearchParams } from "react-router-dom";
+import { PageLayout } from "../../components/shell/page-layout";
+import { expiryLabel, normalizeUserCode, registrationRefusal, registrationRefusalText, useApproveRegistration, useRegistration } from "../../lib/computer-service";
+import { useNow } from "../../lib/use-now";
+import "../../components/marketplace/marketplace.css";
+
+/** Approving a machine's registration: `talgent-computer register` shows a
+ * code and a link here; the signed-in person who approves owns the Computer. */
+export function ConnectComputerPage() {
+  const [search, setSearch] = useSearchParams();
+  const code = normalizeUserCode(search.get("code"));
+  return <PageLayout workspaceTitle="Connect a computer">
+    <div className="mx-auto grid w-[min(480px,100%)] gap-6 py-6">
+      {code
+        ? <Registration key={code} code={code} onChangeCode={() => setSearch({}, { replace: true })} />
+        : <CodeForm onSubmit={value => setSearch({ code: value })} />}
+    </div>
+  </PageLayout>;
+}
+
+function CodeForm({ onSubmit }: { onSubmit: (code: string) => void }) {
+  const [value, setValue] = useState("");
+  const code = normalizeUserCode(value);
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    if (code) onSubmit(code);
+  };
+  return <Card className="mk-group">
+    <form onSubmit={submit} aria-label="Enter code">
+      <Card.Content className="grid gap-4 p-5">
+        <p className="text-[14px] text-muted">Enter the code <code>talgent-computer register</code> shows.</p>
+        <TextField value={value} onChange={setValue} autoFocus>
+          <Label>Code</Label>
+          <Input placeholder="XXXX-XXXX" autoComplete="off" spellCheck={false} />
+        </TextField>
+        <Button type="submit" className="justify-self-start" isDisabled={!code}>Continue</Button>
+      </Card.Content>
+    </form>
+  </Card>;
+}
+
+function Registration({ code, onChangeCode }: { code: string; onChangeCode: () => void }) {
+  const registration = useRegistration(code);
+  const approve = useApproveRegistration();
+  const now = useNow(30_000);
+  if (registration.isPending) return <Card className="mk-group" aria-busy="true"><Card.Content className="grid gap-3 p-5">
+    <p className="sr-only" role="status">Checking code…</p>
+    <Skeleton className="h-5 w-40 rounded" /><Skeleton className="h-4 w-24 rounded" />
+  </Card.Content></Card>;
+  if (registration.isError) {
+    const refusal = registrationRefusal(registration.error);
+    return <Refused text={registrationRefusalText[refusal]} onChangeCode={onChangeCode}
+      onRetry={refusal === "failed" ? () => void registration.refetch() : undefined} isRetrying={registration.isFetching} />;
+  }
+  if (approve.isError && registrationRefusal(approve.error) !== "failed") {
+    return <Refused text={registrationRefusalText[registrationRefusal(approve.error)]} onChangeCode={onChangeCode} />;
+  }
+  const { machineName, expiresAt, approved } = registration.data;
+  if (approved || approve.isSuccess) return <Card className="mk-group" role="status"><Card.Content className="grid gap-3 p-5">
+    <p className="flex items-center gap-2 text-[15px] font-medium"><CircleCheck size={18} className="text-success" aria-hidden="true" />Approved — return to your terminal</p>
+    <p className="text-[14px] text-muted">{machineName} is now one of your computers.</p>
+    <Link to="/computers" className="justify-self-start text-[14px] underline underline-offset-4">View your computers</Link>
+  </Card.Content></Card>;
+  return <Card className="mk-group"><Card.Content className="grid gap-4 p-5">
+    <div className="flex items-center gap-3">
+      <Monitor size={20} aria-hidden="true" />
+      <span className="mk-row-text min-w-0">
+        <strong className="truncate">{machineName}</strong>
+        <span>Code {code}{expiresAt && <> · {expiryLabel(expiresAt, now)}</>}</span>
+      </span>
+    </div>
+    <p className="text-[14px] text-muted">Approve only a machine you are setting up.</p>
+    {approve.isError && <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>Approval didn’t go through. Try again.</Alert.Description></Alert.Content></Alert>}
+    <div className="flex gap-2">
+      <Button isPending={approve.isPending} onPress={() => approve.mutate(code)}>Approve</Button>
+      <Button variant="ghost" isDisabled={approve.isPending} onPress={onChangeCode}>Use another code</Button>
+    </div>
+  </Card.Content></Card>;
+}
+
+function Refused({ text, onChangeCode, onRetry, isRetrying = false }: { text: string; onChangeCode: () => void; onRetry?: () => void; isRetrying?: boolean }) {
+  return <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content>
+    <Alert.Title>{text}</Alert.Title>
+    <div className="mt-2 flex gap-2">
+      {onRetry && <Button size="sm" variant="secondary" isPending={isRetrying} onPress={onRetry}>Try again</Button>}
+      <Button size="sm" variant="ghost" onPress={onChangeCode}>Use another code</Button>
+    </div>
+  </Alert.Content></Alert>;
+}

package/pages/computers/install-commands.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+import { Button, Card, Tooltip } from "@heroui/react";
+import { Check, Copy } from "lucide-react";
+import { LoadState } from "../../components/marketplace/marketplace-shared";
+import { installCommands, useComputerRelease } from "../../lib/computer-release";
+
+export function InstallCommands() {
+  const release = useComputerRelease();
+  return <section className="mk-section" aria-labelledby="cp-install">
+    <h3 id="cp-install" className="mk-section-title">Add a computer</h3>
+    <p className="text-[13px] text-muted">Run these on the machine: macOS, Linux or Windows. Needs Node.js 24 or newer.</p>
+    <LoadState noun="the install command" isPending={release.isPending} isError={release.isError} hasData={release.data !== undefined} isFetching={release.isFetching} onRetry={() => void release.refetch()} />
+    {release.data !== undefined && <Card className="mk-group">
+      <ol className="mk-group-list">
+        {installCommands(window.location.origin, release.data).map(command => <li key={command} className="!items-center"><code className="min-w-0 flex-1 break-all">{command}</code><CopyButton text={command} /></li>)}
+      </ol>
+    </Card>}
+    {release.data !== undefined && <p className="text-[13px] text-muted">The last command keeps it running in the background from each login. To run it in a terminal instead, use <code>talgent-computer run</code>.</p>}
+    {release.data !== undefined && <p className="text-[13px] text-muted">On Windows, use Command Prompt, or allow npm’s commands in PowerShell first with <code>Set-ExecutionPolicy -Scope CurrentUser RemoteSigned</code>.</p>}
+  </section>;
+}
+
+function CopyButton({ text }: { text: string }) {
+  const [state, setState] = useState<"idle" | "copied" | "failed">("idle");
+  useEffect(() => {
+    if (state === "idle") return;
+    const timer = window.setTimeout(() => setState("idle"), 2000);
+    return () => window.clearTimeout(timer);
+  }, [state]);
+  const label = state === "copied" ? "Copied" : state === "failed" ? "Couldn’t copy" : "Copy command";
+  const copy = () => {
+    const clipboard = navigator.clipboard as Clipboard | undefined;
+    if (!clipboard) { setState("failed"); return; }
+    clipboard.writeText(text).then(() => setState("copied"), () => setState("failed"));
+  };
+  return <><Tooltip delay={300}>
+    <Button size="sm" variant="ghost" isIconOnly aria-label={label} onPress={copy}>
+      {state === "copied" ? <Check size={15} aria-hidden="true" /> : <Copy size={15} aria-hidden="true" />}
+    </Button>
+    <Tooltip.Content>{label}</Tooltip.Content>
+  </Tooltip><span className="sr-only" role="status">{state === "idle" ? "" : label}</span></>;
+}

package/pages/computers/remove-computer-dialog.tsx

@@ -0,0 +1,33 @@
+import { useState } from "react";
+import { Alert, AlertDialog, Button, Tooltip } from "@heroui/react";
+import { Trash2 } from "lucide-react";
+import { removeComputerErrorMessage, useRemoveComputer, type ManagedComputer } from "../../lib/computer-service";
+
+/** Removes one of the person's Managed Computers for good, after saying what
+ * happens to its Works. Cancel has focus; a failure keeps the dialog open. */
+export function RemoveComputerButton({ computer }: { computer: ManagedComputer }) {
+  const [open, setOpen] = useState(false);
+  return <>
+    <Tooltip delay={300}><Button size="sm" variant="ghost" isIconOnly aria-label={`Remove ${computer.name}`} onPress={() => setOpen(true)}><Trash2 size={15} aria-hidden="true" /></Button><Tooltip.Content>Remove</Tooltip.Content></Tooltip>
+    {open && <RemoveComputerDialog computer={computer} onClose={() => setOpen(false)} />}
+  </>;
+}
+
+function RemoveComputerDialog({ computer, onClose }: { computer: ManagedComputer; onClose: () => void }) {
+  const remove = useRemoveComputer(computer.id);
+  return <AlertDialog><AlertDialog.Backdrop isOpen onOpenChange={open => { if (!open && !remove.isPending) onClose(); }}><AlertDialog.Container><AlertDialog.Dialog className="sm:max-w-[440px]">
+    <AlertDialog.Header><AlertDialog.Icon status="danger" /><AlertDialog.Heading>Remove {computer.name}?</AlertDialog.Heading></AlertDialog.Header>
+    <AlertDialog.Body>
+      <div className="flex flex-col gap-3 text-sm">
+        <p>It can no longer connect or run anything, and Talgent Computer ends every Work process on it.</p>
+        <p className="text-muted">Its running Works fail and closing ones close. Its stopped and failed Works can only be closed. Their files stay on the machine.</p>
+        <p className="text-xs text-muted">To use this machine again, register it as a new computer.</p>
+        {remove.isError && <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>{removeComputerErrorMessage(remove.error)}</Alert.Description></Alert.Content></Alert>}
+      </div>
+    </AlertDialog.Body>
+    <AlertDialog.Footer>
+      <Button slot="close" variant="tertiary" autoFocus isDisabled={remove.isPending}>Cancel</Button>
+      <Button variant="danger" isPending={remove.isPending} onPress={() => remove.mutate(undefined, { onSuccess: onClose })}>Remove</Button>
+    </AlertDialog.Footer>
+  </AlertDialog.Dialog></AlertDialog.Container></AlertDialog.Backdrop></AlertDialog>;
+}

package/pages/computers/rename-computer-dialog.tsx

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { Alert, Button, FieldError, Input, Label, Modal, TextField, Tooltip } from "@heroui/react";
+import { Pencil } from "lucide-react";
+import { computerNameProblem, useRenameComputer, type ManagedComputer } from "../../lib/computer-service";
+
+/** Renames one of the person's Managed Computers. */
+export function RenameComputerButton({ computer }: { computer: ManagedComputer }) {
+  const [open, setOpen] = useState(false);
+  return <>
+    <Tooltip delay={300}><Button size="sm" variant="ghost" isIconOnly aria-label={`Rename ${computer.name}`} onPress={() => setOpen(true)}><Pencil size={15} aria-hidden="true" /></Button><Tooltip.Content>Rename</Tooltip.Content></Tooltip>
+    {open && <RenameComputerDialog computer={computer} onClose={() => setOpen(false)} />}
+  </>;
+}
+
+function RenameComputerDialog({ computer, onClose }: { computer: ManagedComputer; onClose: () => void }) {
+  const [value, setValue] = useState(computer.name);
+  const rename = useRenameComputer(computer.id);
+  const trimmed = value.trim();
+  const problem = computerNameProblem(value);
+  const unchanged = trimmed === computer.name;
+  const submit = () => {
+    if (problem || unchanged || rename.isPending) return;
+    rename.mutate(trimmed, { onSuccess: onClose });
+  };
+  return <Modal><Modal.Backdrop isOpen onOpenChange={open => { if (!open && !rename.isPending) onClose(); }} isDismissable={!rename.isPending}><Modal.Container placement="center" size="sm"><Modal.Dialog>
+    <Modal.Header><Modal.Heading>Rename computer</Modal.Heading></Modal.Header>
+    <Modal.Body>
+      <TextField value={value} onChange={setValue} isInvalid={Boolean(problem)} isDisabled={rename.isPending} autoFocus>
+        <Label>Name</Label>
+        <Input onKeyDown={event => { if (event.key === "Enter") submit(); }} />
+        <FieldError>{problem}</FieldError>
+      </TextField>
+      {rename.isError && <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>The computer couldn’t be renamed. Try again.</Alert.Description></Alert.Content></Alert>}
+    </Modal.Body>
+    <Modal.Footer><Button variant="secondary" isDisabled={rename.isPending} onPress={onClose}>Cancel</Button><Button isPending={rename.isPending} isDisabled={Boolean(problem) || unchanged} onPress={submit}>Rename</Button></Modal.Footer>
+  </Modal.Dialog></Modal.Container></Modal.Backdrop></Modal>;
+}

package/pages/computers/room-rules-dialog.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { Alert, Button, Description, FieldError, Label, Modal, NumberField, Radio, RadioGroup, Tooltip } from "@heroui/react";
+import { SlidersHorizontal } from "lucide-react";
+import { capacityProblem, maxCapacity, roomRulesErrorMessage, useSetRoomRules, type AdmissionPolicy, type ManagedComputer } from "../../lib/computer-service";
+
+/** Sets how many Works one of the person's Managed Computers runs at once and
+ * what it does with a run while full. */
+export function RoomRulesButton({ computer }: { computer: ManagedComputer }) {
+  const [open, setOpen] = useState(false);
+  return <>
+    <Tooltip delay={300}><Button size="sm" variant="ghost" isIconOnly aria-label={`Capacity of ${computer.name}`} onPress={() => setOpen(true)}><SlidersHorizontal size={15} aria-hidden="true" /></Button><Tooltip.Content>Capacity</Tooltip.Content></Tooltip>
+    {open && <RoomRulesDialog computer={computer} onClose={() => setOpen(false)} />}
+  </>;
+}
+
+const policies: { value: AdmissionPolicy; title: string; description: string }[] = [
+  { value: "reject", title: "Reject", description: "A new run is refused until a running Work ends." },
+  { value: "queue", title: "Queue", description: "A new run waits as Starting and begins once a running Work ends." },
+];
+
+function RoomRulesDialog({ computer, onClose }: { computer: ManagedComputer; onClose: () => void }) {
+  const [capacity, setCapacity] = useState(computer.capacity);
+  const [policy, setPolicy] = useState<AdmissionPolicy>(computer.policy);
+  const rules = useSetRoomRules(computer.id);
+  const problem = capacityProblem(capacity, computer.running);
+  const unchanged = capacity === computer.capacity && policy === computer.policy;
+  const submit = () => {
+    if (problem || unchanged || rules.isPending) return;
+    rules.mutate({ capacity, policy }, { onSuccess: onClose });
+  };
+  return <Modal><Modal.Backdrop isOpen onOpenChange={open => { if (!open && !rules.isPending) onClose(); }} isDismissable={!rules.isPending}><Modal.Container placement="center" size="sm"><Modal.Dialog>
+    <Modal.Header><Modal.Heading>Capacity of {computer.name}</Modal.Heading></Modal.Header>
+    <Modal.Body className="grid gap-5">
+      <NumberField value={capacity} onChange={setCapacity} minValue={1} maxValue={maxCapacity} step={1} isInvalid={Boolean(problem)} isDisabled={rules.isPending} autoFocus>
+        <Label>Works at once</Label>
+        <NumberField.Group>
+          <NumberField.DecrementButton />
+          <NumberField.Input className="w-16" />
+          <NumberField.IncrementButton />
+        </NumberField.Group>
+        <Description>{computer.running} running now</Description>
+        <FieldError>{problem}</FieldError>
+      </NumberField>
+      <RadioGroup value={policy} onChange={value => setPolicy(value as AdmissionPolicy)} isDisabled={rules.isPending}>
+        <Label>When it’s full</Label>
+        {policies.map(option => <Radio key={option.value} value={option.value}>
+          <Radio.Control><Radio.Indicator /></Radio.Control>
+          <Radio.Content><Label>{option.title}</Label><Description>{option.description}</Description></Radio.Content>
+        </Radio>)}
+      </RadioGroup>
+      {rules.isError && <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>{roomRulesErrorMessage(rules.error)}</Alert.Description></Alert.Content></Alert>}
+    </Modal.Body>
+    <Modal.Footer><Button variant="secondary" isDisabled={rules.isPending} onPress={onClose}>Cancel</Button><Button isPending={rules.isPending} isDisabled={Boolean(problem) || unchanged} onPress={submit}>Save</Button></Modal.Footer>
+  </Modal.Dialog></Modal.Container></Modal.Backdrop></Modal>;
+}

package/pages/login-page.css

@@ -0,0 +1,33 @@
+/* Sign-in page. The product site (talgent.work) tells the story; this page
+   only signs people in, in the site's visual language: a porcelain canvas lit
+   from above in the product's violet with a warm edge. */
+.si-page { position: relative; isolation: isolate; overflow: hidden; background: #fbfbfd; }
+.si-page::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
+  background:
+    radial-gradient(75% 60% at 50% -10%, rgba(106,76,245,.16), rgba(106,76,245,.05) 45%, transparent 75%),
+    radial-gradient(40% 40% at 74% 0%, rgba(240,164,58,.12), transparent 75%),
+    radial-gradient(40% 40% at 24% 0%, rgba(56,120,255,.09), transparent 75%); }
+/* Threads converge on the centre and fade before they reach the content. */
+.si-threads { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none;
+  mask-image: radial-gradient(closest-side at 50% 47%, transparent 22%, #000 62%); -webkit-mask-image: radial-gradient(closest-side at 50% 47%, transparent 22%, #000 62%); }
+.si-thread { fill: none; stroke: url(#si-thread); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .7; }
+.si-thread-pulse { fill: none; stroke: url(#si-pulse); stroke-width: 2; stroke-linecap: round;
+  stroke-dasharray: .05 .95; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(143,123,255,.9));
+  animation: si-travel linear infinite; }
+@keyframes si-travel { to { stroke-dashoffset: 0; } }
+
+@media (max-width: 640px) {
+  .si-threads { opacity: .55; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .si-thread-pulse { animation: none; opacity: 0; }
+}
+
+.si-brand { --brand-foreground: #0f0d1d; transform: scale(1.5); transform-origin: center; }
+.si-github-button { justify-self: center; width: min(100%, 17.5rem); height: 52px; font-size: 15px; box-shadow: 0 12px 28px -12px rgba(40,24,140,.55); }
+.si-github-mark { display: inline-block; width: 1rem; height: 1rem; background: currentColor; mask-size: contain; mask-repeat: no-repeat; mask-position: center;
+  -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; }
+.si-site-link { color: #6b6980; font-size: 13px; text-decoration: none; }
+.si-site-link a { color: #0f0d1d; font-weight: 500; text-underline-offset: 3px; }
+.si-site-link a:hover { text-decoration: underline; }

package/pages/login-page.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useState } from "react";
+import { Alert, Button, Spinner } from "@heroui/react";
+import { useSearchParams } from "react-router-dom";
+import github from "../assets/brand-icons/github.svg";
+import { safeInternalPath, signInHref } from "../lib/session";
+import { LoginThreads } from "./login-threads";
+import "./login-page.css";
+
+const PRODUCT_SITE = "https://talgent.work";
+
+// Why Account sent the person back here instead of into the workspace: one
+// notice per failure code Account's /auth handler redirects with
+// (internal/business/account/transport/http/handler.go); change both.
+const FAILURES: Record<string, { title: string; body: string }> = {
+  denied: { title: "GitHub sign-in was cancelled", body: "You left GitHub without authorizing Talgent. Nothing was changed. Try again when you are ready." },
+  expired: { title: "This sign-in attempt expired", body: "The link back from GitHub was older than ten minutes or opened in another browser. Start again from here." },
+  email: { title: "GitHub did not share an email address", body: "Talgent needs a verified email on your GitHub account. Add one at github.com/settings/emails, then try again." },
+  unavailable: { title: "GitHub sign-in didn’t finish", body: "Talgent couldn’t complete the sign-in with GitHub. Try again in a moment." },
+};
+
+// The approved brand lockup from the sidebar.
+function Brand() {
+  return (
+    <div className="p-brand-lockup" role="img" aria-label="Talgent">
+      <span className="p-brand-icon" aria-hidden="true" />
+      <span className="p-brand-name" aria-hidden="true" />
+    </div>
+  );
+}
+
+// The Marketplace GitHub mark, tinted through a mask so it reads white on the
+// black primary button.
+function GitHubMark() {
+  return <span aria-hidden="true" className="si-github-mark" style={{ maskImage: `url("${github}")`, WebkitMaskImage: `url("${github}")` }} />;
+}
+
+function FailureNotice({ code }: { code: string | null }) {
+  const failure = code ? FAILURES[code] : undefined;
+  if (!failure) return null;
+  return (
+    <Alert status="danger" role="alert">
+      <Alert.Indicator />
+      <Alert.Content>
+        <Alert.Title>{failure.title}</Alert.Title>
+        <Alert.Description>{failure.body}</Alert.Description>
+      </Alert.Content>
+    </Alert>
+  );
+}
+
+
+// Signing in happens on GitHub; this page says where the person is before
+// they leave, and why they came back if it did not work. Telling people what
+// Talgent is belongs to the product site, which it links to.
+export function LoginPage() {
+  const [searchParams] = useSearchParams();
+  const [leaving, setLeaving] = useState(false);
+  const next = safeInternalPath(searchParams.get("next"));
+  // Coming back from GitHub with the browser's Back button restores this page
+  // from cache; the button must be usable again.
+  useEffect(() => {
+    const restore = (event: PageTransitionEvent) => { if (event.persisted) setLeaving(false); };
+    window.addEventListener("pageshow", restore);
+    return () => window.removeEventListener("pageshow", restore);
+  }, []);
+  const continueWithGitHub = () => {
+    setLeaving(true);
+    window.location.assign(signInHref(next));
+  };
+  return (
+    <main className="si-page grid min-h-dvh place-items-center p-6">
+      <LoginThreads />
+      <div className="grid w-full max-w-[22rem] justify-items-center gap-10">
+        <div className="si-brand my-3"><Brand /></div>
+        {/* The button says it all on screen; the heading stays for assistive tech. */}
+        <h1 className="sr-only">Sign in to Talgent</h1>
+        <div className="grid w-full gap-4">
+          <FailureNotice code={searchParams.get("error")} />
+          <Button variant="primary" className="si-github-button" isPending={leaving} onPress={continueWithGitHub}>
+            {leaving ? <Spinner size="sm" color="current" aria-hidden="true" /> : <GitHubMark />}
+            {leaving ? "Opening GitHub" : "Continue with GitHub"}
+          </Button>
+        </div>
+        <p className="si-site-link">New to Talgent? <a href={PRODUCT_SITE}>Visit talgent.work</a></p>
+      </div>
+    </main>
+  );
+}

package/pages/login-threads.tsx

@@ -0,0 +1,51 @@
+// Abstract threads behind the sign-in: streams of work converging on the
+// centre and fanning out again, with a few lights travelling along them. They
+// echo the product's collaboration chain; purely decorative.
+const centre = { x: 800, y: 470 };
+
+const streams = [
+  { from: 90, to: 160, duration: 11, delay: -1 },
+  { from: 250, to: 330, duration: 13, delay: -6 },
+  { from: 420, to: 560, duration: 9, delay: -3 },
+  { from: 640, to: 760, duration: 12, delay: -8 },
+  { from: 840, to: 900, duration: 10, delay: -4 },
+  { from: 980, to: 60, duration: 14, delay: -10 },
+];
+
+function streamPath(from: number, to: number) {
+  return `M -60 ${from} C 330 ${from}, 520 ${centre.y}, ${centre.x} ${centre.y} S 1270 ${to}, 1660 ${to}`;
+}
+
+export function LoginThreads() {
+  return (
+    <svg className="si-threads" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false">
+      <defs>
+        <linearGradient id="si-thread" x1="0" y1="0" x2="1600" y2="0" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stopColor="#6a4cf5" stopOpacity="0" />
+          <stop offset=".3" stopColor="#6a4cf5" stopOpacity=".55" />
+          <stop offset=".7" stopColor="#8f7bff" stopOpacity=".55" />
+          <stop offset="1" stopColor="#f0a43a" stopOpacity="0" />
+        </linearGradient>
+        <linearGradient id="si-pulse" x1="0" y1="0" x2="1600" y2="0" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stopColor="#8f7bff" />
+          <stop offset=".6" stopColor="#c59bff" />
+          <stop offset="1" stopColor="#f0a43a" />
+        </linearGradient>
+      </defs>
+      {streams.map((stream) => {
+        const d = streamPath(stream.from, stream.to);
+        return (
+          <g key={stream.from}>
+            <path className="si-thread" d={d} />
+            <path
+              className="si-thread-pulse"
+              d={d}
+              pathLength={1}
+              style={{ animationDuration: `${stream.duration}s`, animationDelay: `${stream.delay}s` }}
+            />
+          </g>
+        );
+      })}
+    </svg>
+  );
+}

package/pages/marketplace-page.tsx

@@ -0,0 +1,59 @@
+import { Navigate, Route, Routes, useParams } from "react-router-dom";
+import { ConnectorList, ConnectorPage } from "../components/marketplace/connector-pages";
+import { LoadState } from "../components/marketplace/marketplace-shared";
+import { MarketplaceShell } from "../components/marketplace/marketplace-shell";
+import { PluginList } from "../components/marketplace/plugin-list";
+import { PluginPage } from "../components/marketplace/plugin-page";
+import { ProviderPage } from "../components/marketplace/provider-pages";
+import { usePlugin } from "../lib/marketplace-catalog";
+import { providerName, serviceLabel } from "../lib/marketplace-connections";
+import { pluginDisplayName, pluginPresentation } from "../lib/marketplace-plugins";
+import { marketplacePaths } from "../lib/marketplace-routes";
+
+// Marketplace › Section › Item. Every object is a page; the topbar trail
+// carries the levels above the current page, and the topbar switches the
+// catalog between Plugins and Connectors.
+const plugins = { label: "Plugins", to: marketplacePaths.plugins };
+const connectors = { label: "Connectors", to: marketplacePaths.connectors };
+// Provider Authorizations are about the person, so their pages sit under Profile.
+const profile = { label: "Profile", to: "/profile" };
+
+export function MarketplacePage() {
+  return <Routes>
+    <Route index element={<MarketplaceShell title="Plugins"><PluginList /></MarketplaceShell>} />
+    <Route path="plugins" element={<Navigate to={marketplacePaths.plugins} replace />} />
+    <Route path="plugins/categories/:category" element={<CategoryRoute kind="plugins" />} />
+    <Route path="plugins/:slug" element={<PluginRoute />} />
+    <Route path="connectors" element={<MarketplaceShell title="Connectors"><ConnectorList /></MarketplaceShell>} />
+    <Route path="connectors/categories/:category" element={<CategoryRoute kind="connectors" />} />
+    <Route path="connectors/:name" element={<ConnectorRoute />} />
+    <Route path="providers" element={<Navigate to="/profile" replace />} />
+    <Route path="providers/:provider" element={<ProviderRoute />} />
+    <Route path="*" element={<Navigate to={marketplacePaths.plugins} replace />} />
+  </Routes>;
+}
+
+function CategoryRoute({ kind }: { kind: "plugins" | "connectors" }) {
+  const category = useParams().category ?? "";
+  return <MarketplaceShell title={category} trail={[kind === "plugins" ? plugins : connectors]}>
+    {kind === "plugins" ? <PluginList category={category} /> : <ConnectorList category={category} />}
+  </MarketplaceShell>;
+}
+
+function PluginRoute() {
+  const slug = useParams().slug ?? "";
+  const plugin = usePlugin(slug);
+  return <MarketplaceShell title={plugin.data ? pluginPresentation(plugin.data).name : pluginDisplayName(slug)} trail={[plugins]}>
+    {plugin.data ? <PluginPage key={slug} plugin={plugin.data} /> : <LoadState noun="plugin" isPending={plugin.isPending} isError={plugin.isError} hasData={false} isFetching={plugin.isFetching} onRetry={() => void plugin.refetch()} />}
+  </MarketplaceShell>;
+}
+
+function ConnectorRoute() {
+  const name = useParams().name ?? "";
+  return <MarketplaceShell title={serviceLabel(name)} trail={[connectors]}><ConnectorPage key={name} name={name} /></MarketplaceShell>;
+}
+
+function ProviderRoute() {
+  const provider = useParams().provider ?? "";
+  return <MarketplaceShell title={providerName(provider)} root={profile}><ProviderPage key={provider} provider={provider} /></MarketplaceShell>;
+}

package/pages/profile-page.tsx

@@ -0,0 +1,68 @@
+import { Avatar, Button, Tooltip } from "@heroui/react";
+import { Info, LogOut } from "lucide-react";
+import { PageLayout } from "../components/shell/page-layout";
+import { ProviderRows } from "../components/marketplace/provider-pages";
+import { useProviderAuthorizationCallback } from "../components/profile/provider-callback";
+import { WorkAgentAppearance } from "../components/profile/work-agent-appearance";
+import { WorkAgentSoul } from "../components/profile/work-agent-soul";
+import { useCurrentUser, useLogout } from "../lib/account-service";
+import { avatarInitial, safeAvatarUrl, safeDisplayName, safeEmail } from "../lib/user-display";
+import "../components/marketplace/marketplace.css";
+
+// Profile holds everything about the person: who they are, as GitHub
+// reports it; the Work Agent that represents them and its Soul; the Provider Authorizations
+// their agents act with; and signing out of this device, beside who they are so
+// it stays in reach however many Providers follow.
+export function ProfilePage() {
+  const connecting = useProviderAuthorizationCallback();
+  const current = useCurrentUser();
+  const logout = useLogout();
+  const user = current.data?.user;
+  const email = safeEmail(user?.primaryEmail);
+  const displayName = safeDisplayName(user?.displayName, user?.id, email || "Profile");
+  const username = safeDisplayName(user?.username, user?.id, "");
+  const avatarUrl = safeAvatarUrl(user?.avatarUrl);
+  if (connecting) return <PageLayout workspaceTitle="Profile"><p className="sr-only" role="status">Connecting your account…</p></PageLayout>;
+  return (
+    <PageLayout workspaceTitle="Profile">
+      <div className="mx-auto grid w-[min(640px,100%)] gap-8 py-6">
+        <header className="mk-detail-head !items-center">
+          <Avatar aria-label={`${displayName} avatar`} className="size-16 shrink-0 rounded-full">
+            {avatarUrl && <Avatar.Image src={avatarUrl} alt="" />}
+            <Avatar.Fallback className="text-[26px] font-semibold">{avatarInitial(displayName, email, "P")}</Avatar.Fallback>
+          </Avatar>
+          <div className="mk-detail-title">
+            <div className="flex items-center gap-2">
+              <h2>{displayName}</h2>
+              <Tooltip delay={200}>
+                <Tooltip.Trigger aria-label="Where these details come from" className="rounded-full text-muted"><Info size={15} aria-hidden="true" /></Tooltip.Trigger>
+                <Tooltip.Content>From your GitHub profile; updated each time you sign in.</Tooltip.Content>
+              </Tooltip>
+            </div>
+            <p className="flex flex-wrap gap-x-3 text-[14px] text-muted">{username && <span>@{username}</span>}{email && <span>{email}</span>}</p>
+          </div>
+          <div className="mk-detail-actions">
+            <Tooltip delay={300}>
+              <Button size="sm" variant="secondary" isPending={logout.isPending} onPress={() => logout.mutate()}>
+                <LogOut size={15} aria-hidden="true" />{logout.isPending ? "Signing out" : "Sign out"}
+              </Button>
+              <Tooltip.Content>Signs out this device only; other devices stay signed in.</Tooltip.Content>
+            </Tooltip>
+          </div>
+        </header>
+        <WorkAgentAppearance />
+        <WorkAgentSoul />
+        <section className="mk-section" aria-labelledby="pf-providers">
+          <div className="flex items-center gap-2">
+            <h3 id="pf-providers" className="mk-section-title">Providers</h3>
+            <Tooltip delay={200}>
+              <Tooltip.Trigger aria-label="About Providers" className="rounded-full text-muted"><Info size={15} aria-hidden="true" /></Tooltip.Trigger>
+              <Tooltip.Content>Accounts your agents act with in Works you start. Connecting installs nothing.</Tooltip.Content>
+            </Tooltip>
+          </div>
+          <ProviderRows />
+        </section>
+      </div>
+    </PageLayout>
+  );
+}