@hienlh/ppm 0.23.13 → 0.23.15

package/src/web/components/design/share/share-changed-files.tsx

@@ -0,0 +1,30 @@
+import type { DesignShareChangedFiles } from "../../../../shared/design-share-types";
+
+/**
+ * The files reviewers now get that differ from the version they had, listed after a re-pin
+ * so the owner can see anything that should not be in the design folder.
+ */
+export function ShareChangedFiles({ files }: { files: DesignShareChangedFiles | null }) {
+  if (!files) {
+    return <p className="text-sm text-text-2">The version this link was pinned to is no longer on disk, so the changes cannot be listed.</p>;
+  }
+  const groups: { title: string; names: string[] }[] = [
+    { title: "Added", names: files.added },
+    { title: "Changed", names: files.changed },
+    { title: "Removed", names: files.removed },
+  ].filter((g) => g.names.length > 0);
+  if (groups.length === 0) return <p className="text-sm text-text-2">No files changed since the previous version.</p>;
+  return (
+    <div className="flex flex-col gap-2" data-testid="share-changed-files">
+      {groups.map((g) => (
+        <div key={g.title}>
+          <p className="text-xs font-medium text-text-subtle">{g.title} ({g.names.length})</p>
+          <ul className="mt-1 max-h-32 overflow-y-auto rounded-md border border-border bg-background px-2 py-1 font-mono text-xs">
+            {g.names.map((n) => <li key={n} className="break-all py-0.5">{n}</li>)}
+          </ul>
+        </div>
+      ))}
+      {files.truncated && <p className="text-xs text-text-subtle">More files changed than are listed here.</p>}
+    </div>
+  );
+}

package/src/web/components/design/share/share-expiry-picker.tsx

@@ -0,0 +1,44 @@
+import { cn } from "@/lib/utils";
+import {
+  SHARE_EXPIRY_PRESETS, maxCustomDate, minCustomDate, type ShareExpiryChoice,
+} from "@/lib/design/design-share-expiry";
+
+/**
+ * Expiry presets as one row of radio chips, plus the native date input for Custom (the end of
+ * that day, local time). Used by the new-link form and by Change expiry.
+ */
+export function ShareExpiryPicker({ value, onChange, error, idPrefix }: {
+  value: ShareExpiryChoice;
+  onChange: (next: ShareExpiryChoice) => void;
+  error?: string | null;
+  idPrefix: string;
+}) {
+  const now = Date.now();
+  return (
+    <div className="flex flex-col gap-2">
+      <div role="radiogroup" aria-label="Expires after" className="flex flex-wrap gap-2">
+        {SHARE_EXPIRY_PRESETS.map((p) => {
+          const on = value.preset === p.id;
+          return (
+            <button key={p.id} type="button" role="radio" aria-checked={on}
+              onClick={() => onChange({ ...value, preset: p.id })}
+              className={cn("min-h-11 rounded-md border px-3 text-sm md:min-h-8",
+                on ? "border-primary bg-primary/10 text-foreground" : "border-border text-text-2 hover:bg-surface-elevated")}>
+              {p.label}
+            </button>
+          );
+        })}
+      </div>
+      {value.preset === "custom" && (
+        <label htmlFor={`${idPrefix}-date`} className="flex flex-col gap-1 text-xs text-text-subtle">
+          Open until the end of
+          <input id={`${idPrefix}-date`} type="date" value={value.customDate}
+            min={minCustomDate(now)} max={maxCustomDate(now)}
+            onChange={(e) => onChange({ ...value, customDate: e.target.value })}
+            className="min-h-11 w-full rounded-md border border-border bg-background px-3 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary md:min-h-9" />
+        </label>
+      )}
+      {error && <p className="text-xs text-destructive" role="alert">{error}</p>}
+    </div>
+  );
+}

package/src/web/components/design/share/share-repin-panel.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+import { Loader2 } from "@/lib/icons";
+import { previewDesignShareRepin } from "@/lib/design/api-design-shares";
+import type { DesignShareChangedFiles, DesignShareLink } from "../../../../shared/design-share-types";
+import { useDesignTab } from "../design-tab-context";
+import { ShareChangedFiles } from "./share-changed-files";
+import { Panel } from "./share-row-panel";
+import type { ShareLinksFeature } from "./use-share-links";
+
+/**
+ * The "Update to latest version" step: lists the files reviewers would get that differ from
+ * the version they have now, so anything that should not be in the design folder is seen
+ * before it is shared. Confirm waits for the list; a list that could not be read is said so
+ * and does not block the update.
+ */
+
+type Preview =
+  | { state: "loading" }
+  | { state: "ready"; files: DesignShareChangedFiles | null }
+  | { state: "error"; message: string };
+
+export function ShareRepinPanel({ link, links, onClose, onRepinned }: {
+  link: DesignShareLink;
+  links: ShareLinksFeature;
+  onClose: () => void;
+  onRepinned: (files: DesignShareChangedFiles | null) => void;
+}) {
+  const { projectName, slug } = useDesignTab();
+  const [preview, setPreview] = useState<Preview>({ state: "loading" });
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    let live = true;
+    previewDesignShareRepin(projectName, slug, link.id)
+      .then((files) => { if (live) setPreview({ state: "ready", files }); })
+      .catch((e: Error) => { if (live) setPreview({ state: "error", message: e.message || "Could not list the changes" }); });
+    return () => { live = false; };
+  }, [projectName, slug, link.id]);
+
+  const nothingChanged = preview.state === "ready" && !!preview.files
+    && preview.files.added.length + preview.files.changed.length + preview.files.removed.length === 0;
+
+  const confirm = async () => {
+    setBusy(true);
+    const result = await links.update(link.id, { repin: true }, "Could not update the version");
+    setBusy(false);
+    if (result) onRepinned(result.changedFiles ?? null);
+  };
+
+  return (
+    <Panel confirm="Update to latest" busy={busy || preview.state === "loading"} onCancel={onClose} onConfirm={() => void confirm()}>
+      <p>Saves the design as it is now and pins this link to it. Reviewers will see the new version; their
+        older pins re-anchor where they can or show as detached.</p>
+      <div data-testid="share-repin-preview">
+        <p className="mb-2 font-medium">{nothingChanged ? "Nothing changed since this link's version." : "Files reviewers would get that differ from their version:"}</p>
+        {preview.state === "loading" && (
+          <p className="flex items-center gap-2 text-text-subtle"><Loader2 className="size-4 animate-spin" /> Comparing with the live design…</p>
+        )}
+        {preview.state === "error" && <p className="text-destructive" role="alert">{preview.message}</p>}
+        {preview.state === "ready" && !nothingChanged && <ShareChangedFiles files={preview.files} />}
+      </div>
+    </Panel>
+  );
+}

package/src/web/components/design/share/share-row-panel.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+import { Loader2 } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+
+/** The frame of one inline row step: its content, then Cancel and the primary action (lowest on a phone). */
+export function Panel({ children, confirm, busy, destructive, onCancel, onConfirm, cancelLabel = "Cancel" }: {
+  children: ReactNode;
+  confirm?: string;
+  busy?: boolean;
+  destructive?: boolean;
+  onCancel: () => void;
+  onConfirm?: () => void;
+  cancelLabel?: string;
+}) {
+  return (
+    <div className="flex flex-col gap-3 border-t border-border pt-3 text-sm" data-testid="share-row-panel">
+      {children}
+      <div className="flex flex-col gap-2 md:flex-row md:justify-end [&>*]:min-h-11 md:[&>*]:min-h-9">
+        <Button variant="outline" onClick={onCancel} disabled={busy}>{cancelLabel}</Button>
+        {confirm && onConfirm && (
+          <Button variant={destructive ? "destructive" : "default"} onClick={onConfirm} disabled={busy}>
+            {busy && <Loader2 className="size-4 animate-spin" />} {confirm}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export const Check = ({ checked, onChange, label }: { checked: boolean; onChange: (v: boolean) => void; label: string }) => (
+  <label className="flex min-h-11 cursor-pointer items-center gap-2 md:min-h-8">
+    <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} className="size-4 accent-primary" />
+    {label}
+  </label>
+);

package/src/web/components/design/share/share-version-picker.tsx

@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useState } from "react";
+import { listDesignHistory } from "@/lib/design/api-designs";
+import type { DesignSnapshotInfo, DesignSnapshotReason } from "../../../../shared/design-types";
+
+/**
+ * Which version a new link pins: "Current version" (the server snapshots now) or one from the
+ * design's history. A native select, so a phone gets its own picker. The list is read while
+ * the picker is mounted and follows `design:history_changed`.
+ */
+
+export const CURRENT_VERSION = "current";
+
+const REASON: Record<DesignSnapshotReason, string> = {
+  turn: "after an AI turn",
+  "pre-restore": "before a restore",
+  "before-edit": "before a canvas edit",
+  manual: "saved",
+};
+
+const when = (iso: string) => new Date(iso).toLocaleString(undefined, {
+  month: "short", day: "numeric", hour: "2-digit", minute: "2-digit",
+});
+
+export function ShareVersionPicker({ projectName, slug, value, onChange, id }: {
+  projectName: string;
+  slug: string;
+  value: string;
+  onChange: (version: string) => void;
+  id: string;
+}) {
+  const [items, setItems] = useState<DesignSnapshotInfo[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(() => {
+    listDesignHistory(projectName, slug)
+      .then((list) => { setItems(Array.isArray(list) ? list : []); setError(null); })
+      .catch((e: Error) => setError(e.message || "Could not load the history"));
+  }, [projectName, slug]);
+
+  useEffect(() => {
+    load();
+    const onChanged = (e: Event) => {
+      const d = (e as CustomEvent<{ projectName?: string; slug?: string }>).detail;
+      if (d?.projectName === projectName && d.slug === slug) load();
+    };
+    window.addEventListener("design:history_changed", onChanged);
+    return () => window.removeEventListener("design:history_changed", onChanged);
+  }, [load, projectName, slug]);
+
+  // A pinned version that left the history (pruned) falls back to the current one.
+  useEffect(() => {
+    if (items && value !== CURRENT_VERSION && !items.some((s) => s.id === value)) onChange(CURRENT_VERSION);
+  }, [items, value, onChange]);
+
+  return (
+    <div className="flex flex-col gap-1">
+      <select id={id} value={value} onChange={(e) => onChange(e.target.value)}
+        className="min-h-11 w-full rounded-md border border-border bg-background px-2 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary md:min-h-9">
+        <option value={CURRENT_VERSION}>Current version (saved now)</option>
+        {(items ?? []).map((s) => (
+          <option key={s.id} value={s.id}>{when(s.createdAt)}, {REASON[s.reason] ?? s.reason}</option>
+        ))}
+      </select>
+      {error && <p className="text-xs text-destructive" role="alert">{error}</p>}
+    </div>
+  );
+}

package/src/web/components/design/share/shared-link-action-panels.tsx

@@ -0,0 +1,120 @@
+import { useState } from "react";
+import { toast } from "sonner";
+import { choiceForExpiry, expiryFromChoice } from "@/lib/design/design-share-expiry";
+import type { ShareLinkActionId } from "@/lib/design/design-share-link-status";
+import { SHARE_LIMITS, type DesignShareChangedFiles, type DesignShareLink } from "../../../../shared/design-share-types";
+import { ShareExpiryPicker } from "./share-expiry-picker";
+import { ShareChangedFiles } from "./share-changed-files";
+import { Check, Panel } from "./share-row-panel";
+import { ShareRepinPanel } from "./share-repin-panel";
+import type { ShareLinksFeature } from "./use-share-links";
+
+/**
+ * The inline step a row action opens under its link: an edit (expiry, label) or a
+ * confirmation. Inline rather than a second modal, so a phone's sheet never stacks another
+ * sheet, and each step's buttons sit at the bottom of what it shows.
+ */
+
+export type ShareRowPanel = ShareLinkActionId | { repinned: DesignShareChangedFiles | null };
+
+export function SharedLinkActionPanel({ panel, link, links, onClose, onShow }: {
+  panel: ShareRowPanel;
+  link: DesignShareLink;
+  links: ShareLinksFeature;
+  onClose: () => void;
+  /** Swaps to another step (the re-pin result). */
+  onShow: (next: ShareRowPanel) => void;
+}) {
+  const [busy, setBusy] = useState(false);
+  const [expiry, setExpiry] = useState(() => choiceForExpiry(link.expiresAt, Date.now()));
+  const [expiryError, setExpiryError] = useState<string | null>(null);
+  const [label, setLabel] = useState(link.label);
+  const [alsoComments, setAlsoComments] = useState(false);
+
+  const run = async (work: () => Promise<boolean>) => {
+    setBusy(true);
+    try { if (await work()) onClose(); } finally { setBusy(false); }
+  };
+  const purgeComments = async () => {
+    if (!alsoComments) return true;
+    const ok = await links.deleteComments(link.id);
+    if (ok) toast.success("The link's comments were deleted");
+    return ok;
+  };
+
+  if (typeof panel === "object") {
+    return (
+      <Panel onCancel={onClose} cancelLabel="Done">
+        <p className="font-medium">Reviewers now see the latest version. Files that differ from the one they had:</p>
+        <ShareChangedFiles files={panel.repinned} />
+      </Panel>
+    );
+  }
+
+  switch (panel) {
+    case "expiry": {
+      const save = () => {
+        const next = expiryFromChoice(expiry, Date.now());
+        if (!next.ok) { setExpiryError(next.error); return; }
+        void run(async () => !!(await links.update(link.id, { expiresAt: next.expiresAt }, "Could not change the expiry")));
+      };
+      return (
+        <Panel confirm="Save expiry" busy={busy} onCancel={onClose} onConfirm={save}>
+          <ShareExpiryPicker idPrefix={`share-${link.id}`} value={expiry} error={expiryError}
+            onChange={(c) => { setExpiry(c); setExpiryError(null); }} />
+        </Panel>
+      );
+    }
+    case "rename":
+      return (
+        <Panel confirm="Save label" busy={busy} onCancel={onClose}
+          onConfirm={() => void run(async () => !!(await links.update(link.id, { label: label.trim() }, "Could not rename the link")))}>
+          <input autoFocus value={label} maxLength={SHARE_LIMITS.maxLabelChars} aria-label="Label"
+            onChange={(e) => setLabel(e.target.value)}
+            className="min-h-11 w-full rounded-md border border-border bg-background px-3 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary md:min-h-9" />
+        </Panel>
+      );
+    case "repin":
+      return <ShareRepinPanel link={link} links={links} onClose={onClose} onRepinned={(files) => onShow({ repinned: files })} />;
+    case "new-code":
+      return (
+        <Panel confirm="Issue new code" busy={busy} onCancel={onClose}
+          onConfirm={() => void run(async () => !!(await links.update(link.id, { newCode: true }, "Could not issue a new code")))}>
+          <p>The link's current address stops working. Send the new one to your reviewers.</p>
+        </Panel>
+      );
+    case "delete-comments":
+      return (
+        <Panel confirm="Delete comments" destructive busy={busy} onCancel={onClose} onConfirm={() => void run(async () => {
+          const ok = await links.deleteComments(link.id);
+          if (ok) toast.success("The link's comments were deleted");
+          return ok;
+        })}>
+          <p>Deletes every comment thread reviewers started on this link, with their replies. This cannot be undone.</p>
+        </Panel>
+      );
+    case "revoke":
+      return (
+        <Panel confirm="Revoke link" destructive busy={busy} onCancel={onClose} onConfirm={() => void run(async () => {
+          if (!(await links.update(link.id, { revoke: true }, "Could not revoke the link"))) return false;
+          // The revoke stands either way; a failed purge has already said so in a toast.
+          await purgeComments();
+          return true;
+        })}>
+          <p>Revoking is final: the link stops opening and cannot be turned back on.</p>
+          <Check checked={alsoComments} onChange={setAlsoComments} label="Also delete this link's comments" />
+        </Panel>
+      );
+    case "delete":
+      return (
+        <Panel confirm="Delete link" destructive busy={busy} onCancel={onClose} onConfirm={() => void run(async () => {
+          // Comments first: once the row is gone it is no longer in this list to delete them from.
+          if (!(await purgeComments())) return false;
+          return links.remove(link.id);
+        })}>
+          <p>The link stops opening and leaves this list. Its comment threads stay on the canvas unless you delete them too.</p>
+          <Check checked={alsoComments} onChange={setAlsoComments} label="Also delete this link's comments" />
+        </Panel>
+      );
+  }
+}

package/src/web/components/design/share/shared-link-row.tsx

@@ -0,0 +1,131 @@
+import { Fragment, useState } from "react";
+import { toast } from "sonner";
+import { Copy, ExternalLink, KeyRound, MoreHorizontal } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import {
+  ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger,
+} from "@/components/ui/adaptive-context-menu";
+import { copyToClipboard } from "@/lib/clipboard";
+import { cn } from "@/lib/utils";
+import { shareLinkUrl } from "@/lib/design/design-share-address-state";
+import {
+  DESTRUCTIVE_SHARE_ACTIONS, SHARE_ACTION_LABEL, shareLinkActions, shareLinkTitle, shareStatusChip,
+  type ShareChipTone, type ShareLinkActionId,
+} from "@/lib/design/design-share-link-status";
+import type { DesignShareAddress, DesignShareLink } from "../../../../shared/design-share-types";
+import { SharedLinkActionPanel, type ShareRowPanel } from "./shared-link-action-panels";
+import type { ShareLinksFeature } from "./use-share-links";
+
+/**
+ * One share link: its name, status, full address, Copy and Open as reviewer inline, and the
+ * rest behind More (a visible button, so a phone needs no hidden gesture) or a right-click /
+ * long-press menu. A chosen action opens its step inline under the row.
+ */
+
+const TONE: Record<ShareChipTone, string> = {
+  ok: "bg-success/15 text-success",
+  warn: "bg-warning/15 text-warning",
+  muted: "bg-surface-elevated text-text-subtle",
+  danger: "bg-destructive/15 text-destructive",
+};
+
+const versionLine = (link: DesignShareLink) => link.snapshotCreatedAt
+  ? `Version from ${new Date(link.snapshotCreatedAt).toLocaleString(undefined, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" })}`
+  : "The pinned version is no longer on disk";
+
+const expiryLine = (link: DesignShareLink) => link.expiresAt === null
+  ? "Never expires"
+  : `Open until ${new Date(link.expiresAt).toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric", hour: "2-digit", minute: "2-digit" })}`;
+
+export function SharedLinkRow({ link, address, links }: {
+  link: DesignShareLink;
+  address: DesignShareAddress | null;
+  links: ShareLinksFeature;
+}) {
+  const [panel, setPanel] = useState<ShareRowPanel | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const chip = shareStatusChip(link, Date.now());
+  const target = shareLinkUrl(address, link.path, window.location.origin);
+  const reviewerHref = link.path ? window.location.origin + link.path : null;
+  const actions = shareLinkActions(link, address?.authEnabled ?? true);
+  const choose = (id: ShareLinkActionId) => { setMenuOpen(false); setPanel(id); };
+
+  const copy = async () => {
+    if (!target) return;
+    if (await copyToClipboard(target.url)) {
+      toast.success("Link copied", {
+        description: target.isPublic ? undefined : "There is no public address, so this link opens only where this PPM is reachable from.",
+      });
+    } else {
+      toast.error("Could not copy the link", { description: target.url });
+    }
+  };
+
+  const menuItems = actions.map((id, i) => (
+    <Fragment key={id}>
+      {DESTRUCTIVE_SHARE_ACTIONS.has(id) && !DESTRUCTIVE_SHARE_ACTIONS.has(actions[i - 1] ?? "expiry") && <ContextMenuSeparator />}
+      <ContextMenuItem variant={DESTRUCTIVE_SHARE_ACTIONS.has(id) ? "destructive" : "default"} onClick={() => choose(id)}>
+        {SHARE_ACTION_LABEL[id]}
+      </ContextMenuItem>
+    </Fragment>
+  ));
+
+  return (
+    <li className="flex flex-col gap-2 rounded-lg border border-border p-3" data-testid="share-link-row" data-link-id={link.id}>
+      <ContextMenu>
+        <ContextMenuTrigger asChild>
+          <div className="flex select-none flex-col gap-2">
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="min-w-0 flex-1 truncate text-sm font-medium" title={shareLinkTitle(link)}>{shareLinkTitle(link)}</span>
+              <span className={cn("rounded-full px-2 py-0.5 text-xs font-medium", TONE[chip.tone])} data-testid="share-link-status">
+                {chip.label}
+              </span>
+            </div>
+            {target
+              ? <p className="break-all font-mono text-xs text-text-2" data-testid="share-link-url">{target.url}</p>
+              : <p className="text-xs text-text-subtle">
+                  {link.status === "needs-new-code" ? "The code for this link is gone. Issue a new code to share it again." : "This link no longer opens."}
+                </p>}
+            <p className="text-xs text-text-subtle">{versionLine(link)} · {expiryLine(link)}</p>
+            <div className="flex flex-wrap gap-2 [&>*]:min-h-11 md:[&>*]:min-h-8">
+              {link.status === "needs-new-code" && actions.includes("new-code") ? (
+                <Button size="sm" onClick={() => setPanel("new-code")}><KeyRound className="size-4" /> New code</Button>
+              ) : (
+                <Button size="sm" variant="outline" disabled={!target} onClick={() => void copy()}>
+                  <Copy className="size-4" /> Copy link
+                </Button>
+              )}
+              {reviewerHref ? (
+                <Button size="sm" variant="outline" asChild>
+                  <a href={reviewerHref} target="_blank" rel="noopener noreferrer"><ExternalLink className="size-4" /> Open as reviewer</a>
+                </Button>
+              ) : (
+                <Button size="sm" variant="outline" disabled><ExternalLink className="size-4" /> Open as reviewer</Button>
+              )}
+              <Button size="sm" variant="ghost" aria-expanded={menuOpen} aria-label={`More actions for ${shareLinkTitle(link)}`}
+                onClick={() => { setPanel(null); setMenuOpen((v) => !v); }} className="ml-auto">
+                <MoreHorizontal className="size-4" /> More
+              </Button>
+            </div>
+          </div>
+        </ContextMenuTrigger>
+        <ContextMenuContent>{menuItems}</ContextMenuContent>
+      </ContextMenu>
+      {menuOpen && (
+        <div role="group" aria-label="Link actions" className="grid grid-cols-1 gap-1 border-t border-border pt-2 sm:grid-cols-2">
+          {actions.map((id) => (
+            <button key={id} type="button" onClick={() => choose(id)}
+              className={cn("flex min-h-11 items-center rounded-md px-3 text-left text-sm hover:bg-surface-elevated md:min-h-8",
+                DESTRUCTIVE_SHARE_ACTIONS.has(id) && "text-destructive")}>
+              {SHARE_ACTION_LABEL[id]}
+            </button>
+          ))}
+        </div>
+      )}
+      {panel && (
+        <SharedLinkActionPanel key={typeof panel === "string" ? panel : "repinned"} panel={panel} link={link} links={links}
+          onClose={() => setPanel(null)} onShow={setPanel} />
+      )}
+    </li>
+  );
+}

package/src/web/components/design/share/shared-links-list.tsx

@@ -0,0 +1,33 @@
+import { Loader2 } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { SHARE_LIMITS, type DesignShareAddress } from "../../../../shared/design-share-types";
+import { SharedLinkRow } from "./shared-link-row";
+import type { ShareLinksFeature } from "./use-share-links";
+
+/** The design's share links, newest first, each with its own actions. */
+export function SharedLinksList({ links, address }: { links: ShareLinksFeature; address: DesignShareAddress | null }) {
+  if (!links.links) {
+    return links.error ? (
+      <div className="flex flex-col gap-2 text-sm" role="alert">
+        <p className="text-destructive">{links.error}</p>
+        <div><Button variant="outline" className="min-h-11 md:min-h-9" onClick={() => void links.refresh()}>Try again</Button></div>
+      </div>
+    ) : (
+      <p className="flex items-center gap-2 text-sm text-text-subtle"><Loader2 className="size-4 animate-spin" /> Loading links…</p>
+    );
+  }
+  return (
+    <section className="flex flex-col gap-2" data-testid="share-links">
+      <h3 className="text-xs font-semibold uppercase tracking-wide text-text-subtle">
+        Shared links ({links.links.length} of {SHARE_LIMITS.maxLinksPerDesign})
+      </h3>
+      {links.links.length === 0
+        ? <p className="text-sm text-text-subtle">No links yet. A link opens one saved version of this design for reviewers to comment on.</p>
+        : (
+          <ul className="flex flex-col gap-2">
+            {links.links.map((link) => <SharedLinkRow key={link.id} link={link} address={address} links={links} />)}
+          </ul>
+        )}
+    </section>
+  );
+}

package/src/web/components/design/share/use-share-address.ts

@@ -0,0 +1,74 @@
+import { useCallback, useEffect, useState } from "react";
+import { getDesignShareAddress } from "@/lib/design/api-design-shares";
+import { publicTunnelApi } from "@/lib/api-tunnels";
+import {
+  SHARE_START_POLL_MS, shareAddressView, type ShareAddressView, type ShareStartAttempt, type TunnelReload,
+} from "@/lib/design/design-share-address-state";
+import type { DesignShareAddress } from "../../../../shared/design-share-types";
+
+/**
+ * The public address share links open at, read while the Share dialog is open.
+ *
+ * Starting a temporary address is the same master switch Remote Access → Public link uses:
+ * it only writes config and asks the supervisor to act, so the address arrives seconds
+ * later. Until it does (or a minute passes) the address is polled every two seconds.
+ */
+
+export interface ShareAddressFeature {
+  address: DesignShareAddress | null;
+  view: ShareAddressView;
+  refresh: () => Promise<void>;
+  /** Turn the public tunnel switch on and wait for its address. */
+  startTemporary: () => Promise<void>;
+}
+
+const message = (e: unknown) => (e instanceof Error ? e.message : String(e));
+
+export function useShareAddress(open: boolean): ShareAddressFeature {
+  const [address, setAddress] = useState<DesignShareAddress | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [start, setStart] = useState<ShareStartAttempt | null>(null);
+
+  const refresh = useCallback(async () => {
+    try {
+      const next = await getDesignShareAddress();
+      setAddress(next);
+      setLoadError(null);
+      if (next.url && next.kind !== "none") setStart(null);
+    } catch (e) {
+      // Keep the last known address: a failed poll is not a state change.
+      setLoadError(message(e) || "Could not read the public address");
+    }
+  }, []);
+
+  const view = shareAddressView({ address, loadError, start, now: Date.now() });
+  const starting = view.kind === "starting";
+
+  useEffect(() => {
+    if (!open) { setStart(null); return; }
+    void refresh();
+    const onFocus = () => { void refresh(); };
+    window.addEventListener("focus", onFocus);
+    return () => window.removeEventListener("focus", onFocus);
+  }, [open, refresh]);
+
+  useEffect(() => {
+    if (!open || !starting) return;
+    const timer = setInterval(() => { void refresh(); }, SHARE_START_POLL_MS);
+    return () => clearInterval(timer);
+  }, [open, starting, refresh]);
+
+  const startTemporary = useCallback(async () => {
+    const at = Date.now();
+    setStart({ at, reload: null, error: null });
+    try {
+      const { reload } = await publicTunnelApi.setEnabled(true);
+      setStart({ at, reload: reload as TunnelReload, error: null });
+      await refresh();
+    } catch (e) {
+      setStart({ at, reload: null, error: `Could not turn the public address on: ${message(e)}` });
+    }
+  }, [refresh]);
+
+  return { address, view, refresh, startTemporary };
+}