@hienlh/ppm 0.23.14 → 0.23.15

package/src/web/lib/design/design-share-address-state.ts

@@ -0,0 +1,88 @@
+import type { DesignShareAddress } from "../../../shared/design-share-types";
+
+/**
+ * What the Share dialog's address block shows, decided from the address route, the tunnel
+ * start the owner asked for, and the clock. Pure, so every state is tested without a server.
+ */
+
+/** Poll interval while a temporary address is starting. */
+export const SHARE_START_POLL_MS = 2_000;
+/** How long a start may take before the dialog says it did not come up. */
+export const SHARE_START_TIMEOUT_MS = 60_000;
+
+export const SIGNIN_OFF_REASON = "Turn on PPM sign-in first";
+export const QUICK_ADDRESS_WARNING =
+  "This is a temporary address. It changes when PPM or the tunnel restarts, and links you already sent stop working; copy them again then.";
+
+/** What the tunnel switch answered (`POST /api/tunnel/enabled`). */
+export type TunnelReload = "sent" | "busy" | "no-supervisor";
+
+export interface ShareStartAttempt {
+  /** Epoch ms the owner pressed Start. */
+  at: number;
+  /** Null until the switch answered. */
+  reload: TunnelReload | null;
+  /** The switch itself failed. */
+  error: string | null;
+}
+
+export type ShareAddressView =
+  | { kind: "loading" }
+  | { kind: "error"; message: string }
+  | { kind: "signin-off" }
+  | { kind: "named"; url: string; warning: string | null }
+  | { kind: "quick"; url: string; warning: string | null }
+  | { kind: "starting" }
+  | { kind: "failed"; message: string }
+  /** No public address; `enabled` = the switch is on but nothing is serving (a dark tunnel). */
+  | { kind: "none"; enabled: boolean; warning: string | null };
+
+export interface ShareAddressInputs {
+  address: DesignShareAddress | null;
+  loadError: string | null;
+  start: ShareStartAttempt | null;
+  now: number;
+}
+
+export function shareAddressView({ address, loadError, start, now }: ShareAddressInputs): ShareAddressView {
+  if (!address) return loadError ? { kind: "error", message: loadError } : { kind: "loading" };
+  if (!address.authEnabled) return { kind: "signin-off" };
+  if (address.url && address.kind !== "none") {
+    return address.kind === "named"
+      ? { kind: "named", url: address.url, warning: address.warning }
+      : { kind: "quick", url: address.url, warning: address.warning };
+  }
+  if (start) {
+    if (start.error) return { kind: "failed", message: start.error };
+    if (start.reload === "no-supervisor") {
+      return {
+        kind: "failed",
+        message: "PPM is running without its supervisor, so nothing can start the tunnel now. It starts the next time PPM is started normally.",
+      };
+    }
+    if (now - start.at <= SHARE_START_TIMEOUT_MS) return { kind: "starting" };
+    return { kind: "failed", message: address.warning ?? "The temporary address did not come up within a minute." };
+  }
+  return { kind: "none", enabled: address.enabled, warning: address.warning };
+}
+
+/** Why a new link cannot be created right now, or null when it can. */
+export function shareBlockedReason(address: DesignShareAddress | null, linkCount: number, maxLinks: number): string | null {
+  if (!address) return "Reading the sharing state…";
+  if (!address.authEnabled) return SIGNIN_OFF_REASON;
+  if (linkCount >= maxLinks) return `This design already has ${maxLinks} share links; delete one first`;
+  return null;
+}
+
+/**
+ * The URL a link is copied as: the public address plus its path, or this page's own origin
+ * when there is no public address (it then opens only where this PPM is reachable).
+ */
+export function shareLinkUrl(
+  address: DesignShareAddress | null, path: string | null, localOrigin: string,
+): { url: string; isPublic: boolean } | null {
+  if (!path) return null;
+  const publicUrl = address && address.kind !== "none" ? address.url : null;
+  if (publicUrl) return { url: publicUrl.replace(/\/+$/, "") + path, isPublic: true };
+  return { url: localOrigin.replace(/\/+$/, "") + path, isPublic: false };
+}

package/src/web/lib/design/design-share-expiry.ts

@@ -0,0 +1,96 @@
+import { SHARE_LIMITS } from "../../../shared/design-share-types";
+
+/**
+ * The expiry a share link is given: a preset, never, or the end of a chosen day in local
+ * time. Pure, so the arithmetic is tested without a browser.
+ *
+ * The server checks the same bound against its own clock (after now, at most
+ * {@link SHARE_LIMITS.maxExpiryMs} ahead), so a custom day is capped to the last one whose
+ * end still falls inside it.
+ */
+
+export type ShareExpiryPreset = "1d" | "7d" | "30d" | "never" | "custom";
+
+export const SHARE_EXPIRY_PRESETS: { id: ShareExpiryPreset; label: string }[] = [
+  { id: "1d", label: "1 day" },
+  { id: "7d", label: "7 days" },
+  { id: "30d", label: "30 days" },
+  { id: "never", label: "Never" },
+  { id: "custom", label: "Custom" },
+];
+
+export const DEFAULT_SHARE_EXPIRY: ShareExpiryPreset = "7d";
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+const PRESET_DAYS: Partial<Record<ShareExpiryPreset, number>> = { "1d": 1, "7d": 7, "30d": 30 };
+
+export interface ShareExpiryChoice {
+  preset: ShareExpiryPreset;
+  /** `YYYY-MM-DD`, read only for `custom`. */
+  customDate: string;
+}
+
+export type ShareExpiryResult = { ok: true; expiresAt: number | null } | { ok: false; error: string };
+
+const pad = (n: number) => String(n).padStart(2, "0");
+
+/** A local date as the `YYYY-MM-DD` an `<input type="date">` takes. */
+export function toDateInputValue(ms: number): string {
+  const d = new Date(ms);
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+
+/** The last millisecond of a `YYYY-MM-DD` day in local time, or null for a malformed date. */
+export function endOfLocalDay(date: string): number | null {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(date);
+  if (!m) return null;
+  const [y, mo, d] = [Number(m[1]), Number(m[2]) - 1, Number(m[3])];
+  const end = new Date(y, mo, d, 23, 59, 59, 999);
+  // `new Date` rolls 2026-02-31 over into March; a date that moved was never a real day.
+  if (end.getFullYear() !== y || end.getMonth() !== mo || end.getDate() !== d) return null;
+  return end.getTime();
+}
+
+/** Earliest day the date input offers: today, whose end is still ahead. */
+export function minCustomDate(now: number): string {
+  return toDateInputValue(now);
+}
+
+/** Latest day whose end is still at most a year ahead. */
+export function maxCustomDate(now: number): string {
+  const limit = now + SHARE_LIMITS.maxExpiryMs;
+  const sameDay = toDateInputValue(limit);
+  const end = endOfLocalDay(sameDay);
+  return end !== null && end <= limit ? sameDay : toDateInputValue(limit - DAY_MS);
+}
+
+/** The `expiresAt` to send for a choice, or why it cannot be sent. */
+export function expiryFromChoice(choice: ShareExpiryChoice, now: number): ShareExpiryResult {
+  if (choice.preset === "never") return { ok: true, expiresAt: null };
+  const days = PRESET_DAYS[choice.preset];
+  if (days) return { ok: true, expiresAt: now + days * DAY_MS };
+  const end = endOfLocalDay(choice.customDate);
+  if (end === null) return { ok: false, error: "Pick a date" };
+  if (end <= now) return { ok: false, error: "Pick a date that is still ahead" };
+  if (end > now + SHARE_LIMITS.maxExpiryMs) return { ok: false, error: "A link can stay open for at most a year" };
+  return { ok: true, expiresAt: end };
+}
+
+/** What the Change expiry control starts at for a link: never, or its own day. */
+export function choiceForExpiry(expiresAt: number | null, now: number): ShareExpiryChoice {
+  if (expiresAt === null) return { preset: "never", customDate: toDateInputValue(now + 7 * DAY_MS) };
+  return { preset: "custom", customDate: toDateInputValue(Math.max(expiresAt, now)) };
+}
+
+/** "Expires in 3 days", "Expires in 5 hours"…, or null for a link that never expires. */
+export function expiresInLabel(expiresAt: number | null, now: number): string | null {
+  if (expiresAt === null) return null;
+  const left = expiresAt - now;
+  if (left <= 0) return "Expired";
+  // Rounded, not floored: a 7-day link read a moment after it was made still says 7 days.
+  if (left < 60 * 60 * 1000) return "Expires in under an hour";
+  const hours = Math.round(left / (60 * 60 * 1000));
+  if (hours < 24) return `Expires in ${hours} hour${hours === 1 ? "" : "s"}`;
+  const days = Math.round(left / DAY_MS);
+  return `Expires in ${days} day${days === 1 ? "" : "s"}`;
+}

package/src/web/lib/design/design-share-link-status.ts

@@ -0,0 +1,66 @@
+import type { DesignShareLink } from "../../../shared/design-share-types";
+import { expiresInLabel } from "./design-share-expiry";
+
+/**
+ * How one share link reads in the owner's list: its status chip, and which actions still
+ * make sense for it. Pure; the server decides the status, this only words it.
+ */
+
+export type ShareChipTone = "ok" | "warn" | "muted" | "danger";
+
+export interface ShareStatusChip {
+  label: string;
+  tone: ShareChipTone;
+}
+
+export function shareStatusChip(link: DesignShareLink, now: number): ShareStatusChip {
+  switch (link.status) {
+    case "revoked": return { label: "Revoked", tone: "muted" };
+    case "expired": return { label: "Expired", tone: "muted" };
+    case "needs-new-code": return { label: "Needs new code", tone: "warn" };
+    case "design-missing": return { label: "Design missing", tone: "danger" };
+    case "signin-off": return { label: "Paused: sign-in is off", tone: "warn" };
+    case "active": {
+      const left = expiresInLabel(link.expiresAt, now);
+      return { label: left && left !== "Expired" ? left : "Active", tone: "ok" };
+    }
+  }
+}
+
+/** The name a link is listed under; an unlabelled one is named after when it was made. */
+export function shareLinkTitle(link: DesignShareLink): string {
+  if (link.label) return link.label;
+  const made = new Date(link.createdAt);
+  return `Link from ${made.toLocaleDateString(undefined, { month: "short", day: "numeric" })}`;
+}
+
+export type ShareLinkActionId =
+  | "expiry" | "rename" | "repin" | "new-code" | "delete-comments" | "revoke" | "delete";
+
+/**
+ * Actions offered for a link, in menu order. A revoked link is final, so nothing that would
+ * reopen it is offered; re-pin and new code need sign-in, as the server refuses them without.
+ */
+export function shareLinkActions(link: DesignShareLink, authEnabled: boolean): ShareLinkActionId[] {
+  const revoked = link.status === "revoked";
+  const actions: ShareLinkActionId[] = [];
+  if (!revoked) actions.push("expiry");
+  actions.push("rename");
+  if (!revoked && authEnabled) actions.push("repin", "new-code");
+  actions.push("delete-comments");
+  if (!revoked) actions.push("revoke");
+  actions.push("delete");
+  return actions;
+}
+
+export const SHARE_ACTION_LABEL: Record<ShareLinkActionId, string> = {
+  expiry: "Change expiry",
+  rename: "Rename",
+  repin: "Update to latest version",
+  "new-code": "New code",
+  "delete-comments": "Delete this link's comments",
+  revoke: "Revoke",
+  delete: "Delete",
+};
+
+export const DESTRUCTIVE_SHARE_ACTIONS: ReadonlySet<ShareLinkActionId> = new Set(["delete-comments", "revoke", "delete"]);

package/src/web/lib/git-repo-scope.ts

@@ -50,6 +50,66 @@ export function resolveRepo(
   return discovery.repos.length === 1 ? discovery.repos[0]! : null;
 }
 
+/**
+ * The repository a file belongs to, whatever the panels have chosen.
+ *
+ * A file-scoped question — blame, above all — has exactly one right answer: the
+ * repository whose working tree holds the file. Going by the user's choice
+ * instead left blame silent in a container folder until the right repository
+ * happened to be picked in Source Control, and with no choice at all it ran git
+ * in the container itself, which is not a repository.
+ *
+ * The innermost candidate wins, though discovery does not descend into a found
+ * repository today, so two never nest. `null` before discovery answers, and for
+ * a file under no repository.
+ */
+export function repoContainingFile(
+  discovery: GitRepoDiscovery | undefined,
+  projectRelative: string,
+): GitRepoCandidate | null {
+  if (!discovery) return null;
+  const path = projectRelative.replace(/^\.?\//, "");
+  let best: GitRepoCandidate | null = null;
+  for (const repo of discovery.repos) {
+    const contains = repo.relative === "." || path === repo.relative || path.startsWith(`${repo.relative}/`);
+    if (!contains) continue;
+    if (!best || best.relative === "." || repo.relative.length > best.relative.length) best = repo;
+  }
+  return best;
+}
+
+/** Where a file-scoped git call goes: `repo` as its `repo=`, `path` as its file. */
+export interface FileGitScope {
+  /** `null` means no `repo=` at all — git runs in the project folder. */
+  repo: GitRepoCandidate | null;
+  /** The file, relative to wherever git runs. */
+  path: string;
+}
+
+/**
+ * The scope for one file's git call — blame, the file diff, a blob.
+ *
+ * The file's own repository when discovery found it. When discovery found no
+ * repository anywhere, the call goes out unscoped as it always did: a project
+ * folder *inside* a repository (`<repo>/packages/web`) has no `.git` of its own
+ * and none below it, yet git run there finds the enclosing repository and
+ * answers. Refusing that case would take blame away from a layout that had it.
+ *
+ * `undefined` while discovery has not answered — not yet known, so a caller
+ * waits rather than guessing. `null` for a file under none of the repositories
+ * discovery did find: there is nothing to ask git.
+ */
+export function fileGitScope(
+  discovery: GitRepoDiscovery | undefined,
+  projectRelative: string,
+): FileGitScope | null | undefined {
+  if (!discovery) return undefined;
+  const repo = repoContainingFile(discovery, projectRelative);
+  if (repo) return { repo, path: repoRelativePath(projectRelative, repo) ?? "" };
+  if (hasNoRepo(discovery)) return { repo: null, path: repoRelativePath(projectRelative, null) ?? "" };
+  return null;
+}
+
 /** True when there is a choice to make and it has not been made. */
 export function needsPick(
   discovery: GitRepoDiscovery | undefined,

package/src/web/lib/icons.generated.tsx

@@ -209,6 +209,7 @@ const D: Record<string, readonly string[]> = {
   "wifi-off": ["M2.854 2.146a.5.5 0 1 0-.708.708l3.031 3.03a9.6 9.6 0 0 0-1.937 1.5a10 10 0 0 0-1.121 1.36a.5.5 0 0 0 .821.57A9 9 0 0 1 3.947 8.09a8.6 8.6 0 0 1 1.964-1.473l1.436 1.436a6.4 6.4 0 0 0-1.871 1.303a6.4 6.4 0 0 0-1.193 1.645a.5.5 0 1 0 .892.452a5.4 5.4 0 0 1 1.008-1.39A5.4 5.4 0 0 1 8.11 8.818l1.855 1.856a4.02 4.02 0 0 0-2.781 1.18a4 4 0 0 0-.84 1.244a.5.5 0 0 0 .916.4c.155-.355.368-.674.63-.937a3.03 3.03 0 0 1 3.304-.66l1.646 1.647a.5.5 0 0 0 .2.2l4.105 4.106a.5.5 0 0 0 .708-.708zm6.75 5.336L10.62 8.5a5.43 5.43 0 0 1 3.27 1.565a5.6 5.6 0 0 1 1.01 1.404a.5.5 0 0 0 .891-.455a6.6 6.6 0 0 0-1.194-1.656a6.44 6.44 0 0 0-4.994-1.875M7.135 5.014l.81.81a8.61 8.61 0 0 1 9.197 3.493a.5.5 0 0 0 .823-.568a9.61 9.61 0 0 0-10.83-3.734m3.828 8.773a1.298 1.298 0 1 1-1.836 1.836a1.298 1.298 0 0 1 1.836-1.836"],
   "window": ["M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zM4 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2zm0 1h12v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"],
   "window-console": ["M5.646 9.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L7.293 11.5L5.646 9.854a.5.5 0 0 1 0-.708M14.5 13h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1M2.996 5.5a2.5 2.5 0 0 1 2.5-2.5h9a2.5 2.5 0 0 1 2.5 2.5V6H17v1h-.003v7.5a2.5 2.5 0 0 1-2.5 2.5h-9a2.5 2.5 0 0 1-2.5-2.5zm13 .5v-.5a1.5 1.5 0 0 0-1.5-1.5h-9a1.5 1.5 0 0 0-1.5 1.5V6zm-12 1v7.5a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5V7z"],
+  "wrench": ["M9 6.5a4.5 4.5 0 0 1 6.352-4.102a.5.5 0 0 1 .148.809L13.207 5.5L14.5 6.793L16.793 4.5a.5.5 0 0 1 .809.147a4.5 4.5 0 0 1-5.207 6.216L6.03 17.311a2.357 2.357 0 0 1-3.374-3.293L9.082 7.36A4.5 4.5 0 0 1 9 6.5M13.5 3a3.5 3.5 0 0 0-3.387 4.386a.5.5 0 0 1-.125.473l-6.612 6.854a1.357 1.357 0 0 0 1.942 1.896l6.574-6.66a.5.5 0 0 1 .512-.124a3.5 3.5 0 0 0 4.521-4.044l-2.072 2.073a.5.5 0 0 1-.707 0l-2-2a.5.5 0 0 1 0-.708l2.073-2.072a3.5 3.5 0 0 0-.72-.074"],
   "zoom-in": ["M8.5 5.5A.5.5 0 0 1 9 6v2h2a.5.5 0 0 1 0 1H9v2a.5.5 0 0 1-1 0V9H6a.5.5 0 0 1 0-1h2V6a.5.5 0 0 1 .5-.5m0-3.5a6.5 6.5 0 0 1 4.937 10.73l3.417 3.416a.5.5 0 0 1-.638.765l-.07-.058l-3.417-3.417A6.5 6.5 0 1 1 8.5 2m0 1a5.5 5.5 0 1 0 0 11a5.5 5.5 0 0 0 0-11"],
   "zoom-out": ["M11 8a.5.5 0 0 1 0 1H6a.5.5 0 0 1 0-1zM8.5 2a6.5 6.5 0 0 1 4.937 10.73l3.417 3.416a.5.5 0 0 1-.638.765l-.07-.058l-3.417-3.417A6.5 6.5 0 1 1 8.5 2m0 1a5.5 5.5 0 1 0 0 11a5.5 5.5 0 0 0 0-11"],
 };
@@ -224,7 +225,7 @@ export function glyphPaths(name: string): readonly string[] | undefined {
 }
 
 /** Which names this module draws with Fluent, for the coverage test. */
-export const FLUENT_NAMES: readonly string[] = ["Activity","AlertCircle","AlertTriangle","AppWindow","Archive","ArrowDown","ArrowDownAZ","ArrowDownToLine","ArrowDownUp","ArrowLeft","ArrowLeftRight","ArrowNext","ArrowPrevious","ArrowRight","ArrowRightFromLine","ArrowUp","ArrowUpCircle","ArrowUpDown","ArrowUpFromLine","ArrowUpRight","Bell","BellOff","BellRing","Bot","BotMessageSquare","Brain","Bug","CalendarClock","CalendarX2","Check","CheckCircle","CheckCircle2","CheckIcon","ChevronDown","ChevronDownIcon","ChevronLeft","ChevronRight","ChevronRightIcon","ChevronUp","ChevronUpIcon","ChevronsDown","ChevronsDownUp","ChevronsLeft","ChevronsRight","ChevronsUpDown","Circle","CircleCheckIcon","CircleHelp","CircleIcon","CircleX","Clipboard","ClipboardCheck","ClipboardList","ClipboardPaste","Clock","Cloud","CloudOff","CloudUpload","Code","Coffee","Columns","Columns2","Columns3","Copy","Cpu","Crosshair","Database","DatabaseZap","Download","ExternalLink","Eye","EyeOff","File","FileArchive","FileCode","FilePen","FilePlus","FilePlus2","FileSearch","FileText","FileType","FileWarning","Filter","FlaskConical","FlipHorizontal","FlipHorizontal2","FlipVertical","FlipVertical2","Folder","FolderOpen","FolderPlus","FolderSearch","FolderSymlink","FolderTree","Form","Gauge","GitBranch","GitMerge","Globe","Grid2x2","GripHorizontal","GripVertical","Hand","HardDrive","Hash","Heart","HelpCircle","History","Home","Image","ImageOff","ImagePlus","IndentIncrease","Info","InfoIcon","Key","KeyRound","Keyboard","Layers","LayoutGrid","Lightbulb","Link","Link2","Link2Off","List","ListChecks","ListFilter","ListOrdered","ListTodo","Loader2","Loader2Icon","Lock","LogIn","LogOut","Maximize","Maximize2","Menu","MessageCircle","MessageSquare","MessageSquarePlus","Mic","MicOff","Minimize","Minimize2","Minus","Monitor","MonitorSmartphone","MonitorX","Moon","MoreHorizontal","MoreVertical","MousePointer2","MousePointerClick","Move","Music","OctagonXIcon","Palette","PanelBottom","PanelLeft","PanelLeftOpen","PanelRight","Paperclip","Pause","Pencil","PencilLine","PictureInPicture2","Pin","PinOff","Play","Plug","Plus","Power","Presentation","Printer","Puzzle","QrCode","Redo2","RefreshCw","RotateCcw","RotateCw","Save","Scissors","ScrollText","Search","Send","Settings","Settings2","Share2","ShieldAlert","ShieldCheck","ShieldOff","SlidersHorizontal","Smartphone","Sparkles","Square","SquareDashedMousePointer","SquareMinus","SquarePlus","SquareTerminal","Sun","Table","TableSimple","Tablet","Tag","Tags","Terminal","TerminalSquare","TextSelect","Timer","Trash2","TriangleAlert","TriangleAlertIcon","Undo2","Unlink","Upload","Usb","UserPlus","UserRound","Users","Volume1","Volume2","VolumeX","Wifi","WifiOff","WrapText","X","XCircle","XIcon","XSquare","Zap","ZapOff","ZoomIn","ZoomOut"];
+export const FLUENT_NAMES: readonly string[] = ["Activity","AlertCircle","AlertTriangle","AppWindow","Archive","ArrowDown","ArrowDownAZ","ArrowDownToLine","ArrowDownUp","ArrowLeft","ArrowLeftRight","ArrowNext","ArrowPrevious","ArrowRight","ArrowRightFromLine","ArrowUp","ArrowUpCircle","ArrowUpDown","ArrowUpFromLine","ArrowUpRight","Bell","BellOff","BellRing","Bot","BotMessageSquare","Brain","Bug","CalendarClock","CalendarX2","Check","CheckCircle","CheckCircle2","CheckIcon","ChevronDown","ChevronDownIcon","ChevronLeft","ChevronRight","ChevronRightIcon","ChevronUp","ChevronUpIcon","ChevronsDown","ChevronsDownUp","ChevronsLeft","ChevronsRight","ChevronsUpDown","Circle","CircleCheckIcon","CircleHelp","CircleIcon","CircleX","Clipboard","ClipboardCheck","ClipboardList","ClipboardPaste","Clock","Cloud","CloudOff","CloudUpload","Code","Coffee","Columns","Columns2","Columns3","Copy","Cpu","Crosshair","Database","DatabaseZap","Download","ExternalLink","Eye","EyeOff","File","FileArchive","FileCode","FilePen","FilePlus","FilePlus2","FileSearch","FileText","FileType","FileWarning","Filter","FlaskConical","FlipHorizontal","FlipHorizontal2","FlipVertical","FlipVertical2","Folder","FolderOpen","FolderPlus","FolderSearch","FolderSymlink","FolderTree","Form","Gauge","GitBranch","GitMerge","Globe","Grid2x2","GripHorizontal","GripVertical","Hand","HardDrive","Hash","Heart","HelpCircle","History","Home","Image","ImageOff","ImagePlus","IndentIncrease","Info","InfoIcon","Key","KeyRound","Keyboard","Layers","LayoutGrid","Lightbulb","Link","Link2","Link2Off","List","ListChecks","ListFilter","ListOrdered","ListTodo","Loader2","Loader2Icon","Lock","LogIn","LogOut","Maximize","Maximize2","Menu","MessageCircle","MessageSquare","MessageSquarePlus","Mic","MicOff","Minimize","Minimize2","Minus","Monitor","MonitorSmartphone","MonitorX","Moon","MoreHorizontal","MoreVertical","MousePointer2","MousePointerClick","Move","Music","OctagonXIcon","Palette","PanelBottom","PanelLeft","PanelLeftOpen","PanelRight","Paperclip","Pause","Pencil","PencilLine","PictureInPicture2","Pin","PinOff","Play","Plug","Plus","Power","Presentation","Printer","Puzzle","QrCode","Redo2","RefreshCw","RotateCcw","RotateCw","Save","Scissors","ScrollText","Search","Send","Settings","Settings2","Share2","ShieldAlert","ShieldCheck","ShieldOff","SlidersHorizontal","Smartphone","Sparkles","Square","SquareDashedMousePointer","SquareMinus","SquarePlus","SquareTerminal","Sun","Table","TableSimple","Tablet","Tag","Tags","Terminal","TerminalSquare","TextSelect","Timer","Trash2","TriangleAlert","TriangleAlertIcon","Undo2","Unlink","Upload","Usb","UserPlus","UserRound","Users","Volume1","Volume2","VolumeX","Wifi","WifiOff","WrapText","Wrench","X","XCircle","XIcon","XSquare","Zap","ZapOff","ZoomIn","ZoomOut"];
 
 /** Which names deliberately stay on lucide, and are asserted to be a short list. */
 export const LUCIDE_NAMES: readonly string[] = ["CaseSensitive","FileDiff","FileJson","FolderGit2","GitCommitHorizontal","Github","Hexagon","Network","PowerOff","Regex","ReplaceAll","Scan","ServerOff","Slash","WholeWord"];
@@ -474,6 +475,7 @@ export const VolumeX = fluentIcon("VolumeX", D["speaker-off"]!);
 export const Wifi = fluentIcon("Wifi", D["wifi-1"]!);
 export const WifiOff = fluentIcon("WifiOff", D["wifi-off"]!);
 export const WrapText = fluentIcon("WrapText", D["text-wrap"]!);
+export const Wrench = fluentIcon("Wrench", D["wrench"]!);
 export const X = fluentIcon("X", D["dismiss"]!);
 export const XCircle = fluentIcon("XCircle", D["dismiss-circle"]!);
 export const XIcon = fluentIcon("XIcon", D["dismiss"]!);

package/src/web/lib/open-ai-tab.ts

@@ -3,15 +3,22 @@ import { useProjectStore } from "@/stores/project-store";
 import { absoluteProjectPath, relativeProjectPath } from "@/stores/file-store";
 import { fsApi } from "@/lib/fs-api";
 import { basename } from "@/lib/utils";
-import { chooseAiTabPlacement, isTabForFile } from "./ai-tab-placement";
+import { previewTitle } from "./web-preview-url";
+import { chooseAiTabPlacement, isTabForFile, type AiTabPlacement, type PlacementTab } from "./ai-tab-placement";
 import { latestPreviewLoad, previewKey, waitForPreviewLoad } from "./html-preview-loads";
-import type { TabOpenRequest, TabOpenResult, TabTool } from "../../shared/tab-open-protocol";
+import { nextQueryNumber, queryTabMetadata, targetFields } from "./db-tabs";
+import {
+  OPEN_URL_TOOL, RUN_IN_TERMINAL_TOOL, type TabOpenRequest, type TabOpenResult, type TabOpenTerminalRequest, type TabOpenUrlRequest,
+  type TabTool,
+} from "../../shared/tab-open-protocol";
+import { OPEN_QUERY_TOOL, type DbQueryTabOpen } from "../../shared/db-ai-tools";
 
 /**
- * Opens the tab the AI asked for with `open_file` or `open_preview`, beside the chat that
- * asked (`ai-tab-placement.ts` decides where), and answers the server's `tab_open`. A tool
- * card's Open button goes through the same {@link openAiTab}, so a tab reopened from the
- * chat's history lands where the AI's own call put it.
+ * Opens the tab the AI asked for with `open_file`, `open_preview`, `open_query` or `open_url`,
+ * beside the chat that asked (`ai-tab-placement.ts` decides where), or the terminal
+ * `run_in_terminal` started, in the dock; and answers the server's `tab_open`. A tool card's
+ * Open button goes through the same {@link openAiTab}, so a tab reopened from the chat's
+ * history lands where the AI's own call put it.
  *
  * The editor reads `aiView` and `aiOpenAt` from the tab's metadata: every call switches the
  * view the tool asked for and reloads a preview, also in a tab that was already open.
@@ -50,11 +57,8 @@ function showChatWorkspace(projectName: string | undefined): void {
   usePanelStore.getState().switchProject(projectName);
 }
 
-/**
- * Opens (or brings back) the file's tab. Returns the preview key the editor will load the
- * page under and the last load already seen there, so a caller can wait for the next one.
- */
-export function openAiTab(target: AiTabTarget, chat: AiTabChat): { tabId: string; previewKey: string; before: number } {
+/** Where a tab goes beside the chat, in the chat's workspace, which is brought up first. */
+function placeBesideChat(chat: AiTabChat, isTarget: (tab: PlacementTab) => boolean): AiTabPlacement {
   showChatWorkspace(chat.projectName);
   const store = usePanelStore.getState();
   const placement = chooseAiTabPlacement({
@@ -63,9 +67,32 @@ export function openAiTab(target: AiTabTarget, chat: AiTabChat): { tabId: string
     focusedPanelId: store.focusedPanelId,
     mobile: store.isMobile(),
     sessionId: chat.sessionId,
-    isTarget: (tab) => isTabForFile(tab, target.filePath, target.projectName),
+    isTarget,
   });
   if (!placement) throw new Error("PPM has no panel to open the tab in");
+  return placement;
+}
+
+/** Brings a tab that is already open to where the placement wants it: in front, moved or split out. */
+function showExistingTab(placement: Exclude<AiTabPlacement, { kind: "open" }>): void {
+  const store = usePanelStore.getState();
+  const fromPanelId = placement.kind === "focus" ? placement.panelId : placement.fromPanelId;
+  if (placement.kind === "focus") {
+    store.setActiveTab(placement.tabId, placement.panelId);
+  } else if (placement.toPanelId) {
+    store.moveTab(placement.tabId, fromPanelId, placement.toPanelId);
+  } else if (!store.splitPanel("right", placement.tabId, fromPanelId)) {
+    store.setActiveTab(placement.tabId, fromPanelId);
+  }
+}
+
+/**
+ * Opens (or brings back) the file's tab. Returns the preview key the editor will load the
+ * page under and the last load already seen there, so a caller can wait for the next one.
+ */
+export function openAiTab(target: AiTabTarget, chat: AiTabChat): { tabId: string; previewKey: string; before: number } {
+  const placement = placeBesideChat(chat, (tab) => isTabForFile(tab, target.filePath, target.projectName));
+  const store = usePanelStore.getState();
 
   const now = Date.now();
   const aiView = target.line ? "code" : target.tool === "open_preview" ? "preview" : undefined;
@@ -93,16 +120,88 @@ export function openAiTab(target: AiTabTarget, chat: AiTabChat): { tabId: string
   const key = previewKey(metadata.projectName as string | undefined, String(metadata.filePath ?? target.filePath));
   const before = latestPreviewLoad(key);
   store.updateTab(placement.tabId, { metadata });
-  if (placement.kind === "focus") {
-    store.setActiveTab(placement.tabId, placement.panelId);
-  } else if (placement.toPanelId) {
-    store.moveTab(placement.tabId, fromPanelId, placement.toPanelId);
-  } else if (!store.splitPanel("right", placement.tabId, fromPanelId)) {
-    store.setActiveTab(placement.tabId, fromPanelId);
-  }
+  showExistingTab(placement);
   return { tabId: placement.tabId, previewKey: key, before };
 }
 
+/**
+ * Opens a Query tab holding the script `open_query` wrote, beside the chat. Nothing runs until
+ * the user presses Run. Every call opens a tab of its own, so a script never replaces SQL the
+ * user is editing in another one.
+ */
+export function openAiQueryTab(query: DbQueryTabOpen, chat: AiTabChat): string {
+  const placement = placeBesideChat(chat, () => false);
+  if (placement.kind !== "open") throw new Error("PPM has no panel to open the tab in");
+  const store = usePanelStore.getState();
+  const queryNumber = nextQueryNumber(Object.values(store.panels).flatMap((p) => p.tabs));
+  const target = { kind: "connection" as const, connectionId: query.connectionId, ...(query.database ? { database: query.database } : {}) };
+  const tabId = store.openTab({
+    type: "db-query",
+    title: `Query ${queryNumber}`,
+    // A saved connection's tab shows in every project's workspace, as one opened from the tree does.
+    projectId: null,
+    closable: true,
+    metadata: {
+      ...targetFields(target),
+      connectionName: query.connectionName,
+      dbType: query.dbType,
+      ...(query.connectionColor ? { connectionColor: query.connectionColor } : {}),
+      ...queryTabMetadata(query.sql, queryNumber),
+    },
+  }, placement.panelId);
+  if (!tabId) throw new Error("PPM could not open the tab");
+  if (placement.split) store.splitPanel("right", tabId, placement.panelId);
+  return tabId;
+}
+
+/** Whether this browser runs on the machine PPM runs on, where `localhost` is the host's own. */
+export function browserOnHost(hostname: string = window.location.hostname): boolean {
+  return hostname === "localhost" || hostname === "[::1]" || /^127(?:\.\d{1,3}){3}$/.test(hostname);
+}
+
+/**
+ * Opens the web server `open_url` asked for in a web-preview tab beside the chat, the tab Port
+ * Forwarding opens. A tab already showing that address is reused, and reloaded.
+ */
+export function openAiUrlTab(req: Pick<TabOpenUrlRequest, "url" | "port" | "via">, chat: AiTabChat): string {
+  if (req.via === "local" && !browserOnHost()) {
+    throw new Error(`this device is not the machine PPM runs on, so it cannot reach localhost:${req.port}`);
+  }
+  const placement = placeBesideChat(chat, (tab) => tab.type === "web-preview" && tab.metadata?.url === req.url);
+  const store = usePanelStore.getState();
+  const metadata = { url: req.url, port: req.port, via: req.via, aiOpenAt: Date.now() };
+  if (placement.kind === "open") {
+    const tabId = store.openTab(
+      { type: "web-preview", title: previewTitle(req.port, req.url), projectId: null, closable: true, metadata },
+      placement.panelId,
+    );
+    if (!tabId) throw new Error("PPM could not open the tab");
+    if (placement.split) store.splitPanel("right", tabId, placement.panelId);
+    return tabId;
+  }
+  store.updateTab(placement.tabId, { metadata });
+  showExistingTab(placement);
+  return placement.tabId;
+}
+
+/**
+ * Shows the terminal `run_in_terminal` started, in the dock, with the AI's command already typed
+ * at its prompt by the server. The tab attaches to that terminal rather than starting a shell.
+ */
+export function openAiTerminal(req: Pick<TabOpenTerminalRequest, "terminalId" | "projectName" | "cwd">, chat: AiTabChat): string {
+  showChatWorkspace(chat.projectName);
+  const tabId = usePanelStore.getState().openInDock({
+    type: "terminal",
+    title: basename(req.cwd) || req.cwd,
+    projectId: req.projectName,
+    closable: true,
+    metadata: { sessionId: req.terminalId, cwd: req.cwd, ...(req.projectName ? { projectName: req.projectName } : {}) },
+  });
+  // A terminal tab reattaches to the session its id last had before it reads its metadata.
+  try { localStorage.setItem(`ppm:terminal-session:${tabId}`, req.terminalId); } catch { /* storage blocked */ }
+  return tabId;
+}
+
 /**
  * Answers the server's `tab_open`: opens the tab and, for a page the AI made, waits for it to
  * load and settle and returns the check of how it rendered. Every outcome is answered — a
@@ -113,6 +212,17 @@ export async function answerTabOpen(req: TabOpenRequest, chat: AiTabChat, send:
     const result: TabOpenResult = { type: "tab_open_result", requestId: req.requestId, ...answer };
     send(JSON.stringify(result));
   };
+  if (req.tool === OPEN_QUERY_TOOL || req.tool === OPEN_URL_TOOL || req.tool === RUN_IN_TERMINAL_TOOL) {
+    try {
+      if (req.tool === OPEN_QUERY_TOOL) openAiQueryTab(req.query, chat);
+      else if (req.tool === OPEN_URL_TOOL) openAiUrlTab(req, chat);
+      else openAiTerminal(req, chat);
+      reply({ opened: true });
+    } catch (e) {
+      reply({ opened: false, error: errorText(e) });
+    }
+    return;
+  }
   let opened: ReturnType<typeof openAiTab>;
   try {
     opened = openAiTab({ tool: req.tool, filePath: req.filePath, projectName: req.projectName, line: req.line }, chat);

package/src/web/lib/session-file-changes-client.ts

@@ -31,6 +31,12 @@ export async function fetchSessionFileChanges(
   return Array.isArray(res?.files) ? res.files : [];
 }
 
+/** How many files the session kept a "before" for: cheap, an upper bound on the list. */
+export async function fetchSessionChangeCount(projectName: string, sessionId: string, signal?: AbortSignal): Promise<number> {
+  const res = await api.get<{ count?: number }>(`${changesUrl(projectName, sessionId)}/count`, { signal });
+  return typeof res?.count === "number" ? res.count : 0;
+}
+
 export function fetchSessionFileDiff(
   projectName: string,
   sessionId: string,

package/src/web/lib/session-file-changes.ts

@@ -58,6 +58,19 @@ export function withReviewed(files: SessionFileChange[], paths: ReadonlySet<stri
   });
 }
 
+/**
+ * `files` with the rows the server pushed after the agent changed them: each replaces its file's
+ * row, a file not listed yet goes last (it is the newest), and the `gone` ones drop out.
+ */
+export function withPushedChanges(files: SessionFileChange[], pushed: SessionFileChange[], gone: readonly string[]): SessionFileChange[] {
+  const byPath = new Map(pushed.map((f) => [f.path, f]));
+  const drop = new Set(gone);
+  const out = files.filter((f) => !drop.has(f.path)).map((f) => byPath.get(f.path) ?? f);
+  const listed = new Set(files.map((f) => f.path));
+  for (const f of pushed) if (!listed.has(f.path)) out.push(f);
+  return out;
+}
+
 /**
  * Changes whenever what a diff of this file would show does: every write moves the version,
  * the baseline kind moves when a fallback to git HEAD turns into the session's own copy, and

package/src/web/lib/tab-tool-call.ts

@@ -1,5 +1,6 @@
 import {
-  CLAUDE_TAB_TOOLS_MCP_SERVER, CODEX_TAB_TOOLS_MCP_SERVER, MAX_TAB_LINE, OPEN_FILE_TOOL, OPEN_PREVIEW_TOOL, type TabTool,
+  CLAUDE_TAB_TOOLS_MCP_SERVER, CODEX_TAB_TOOLS_MCP_SERVER, MAX_TAB_LINE, OPEN_FILE_TOOL, OPEN_PREVIEW_TOOL, OPEN_URL_TOOL,
+  READ_TERMINAL_TOOL, RUN_IN_TERMINAL_TOOL, type TabTool,
 } from "../../shared/tab-open-protocol";
 import { isImagePlaceholderText } from "../../shared/tool-result-content";
 
@@ -23,6 +24,16 @@ const TOOL_NAME = new RegExp(
   `^(?:mcp__${CLAUDE_TAB_TOOLS_MCP_SERVER}__|${CODEX_TAB_TOOLS_MCP_SERVER}:)(${OPEN_FILE_TOOL}|${OPEN_PREVIEW_TOOL})$`,
 );
 
+/** The tab server's other tools, which take no file: their calls show in the generic card. */
+export type DeviceToolCall =
+  | { tool: typeof OPEN_URL_TOOL; url: string }
+  | { tool: typeof READ_TERMINAL_TOOL; terminal?: string; lines?: number }
+  | { tool: typeof RUN_IN_TERMINAL_TOOL; command: string; cwd?: string };
+
+const DEVICE_TOOL_NAME = new RegExp(
+  `^(?:mcp__${CLAUDE_TAB_TOOLS_MCP_SERVER}__|${CODEX_TAB_TOOLS_MCP_SERVER}:)(${OPEN_URL_TOOL}|${READ_TERMINAL_TOOL}|${RUN_IN_TERMINAL_TOOL})$`,
+);
+
 /** How Codex's events label an image block of a result (`mcpResultText`). */
 const CODEX_IMAGE_LABEL = /^\[image(?: [^\]\s]+)?\]$/;
 
@@ -39,6 +50,31 @@ export function tabToolCall(toolName: string, input: unknown): TabToolCall | nul
   return { tool, path: args.path, ...(validLine ? { line } : {}) };
 }
 
+/** The `open_url` / `read_terminal` / `run_in_terminal` tool a tool name is, under either provider's name, or null. */
+export function deviceToolOf(toolName: string): DeviceToolCall["tool"] | null {
+  return (DEVICE_TOOL_NAME.exec(toolName)?.[1] as DeviceToolCall["tool"] | undefined) ?? null;
+}
+
+/** The `open_url` / `read_terminal` / `run_in_terminal` call an event is, under either provider's name, or null. */
+export function deviceToolCall(toolName: string, input: unknown): DeviceToolCall | null {
+  const tool = deviceToolOf(toolName);
+  if (!tool || !isObj(input)) return null;
+  const args = "arguments" in input && isObj(input.arguments) ? input.arguments : input;
+  const text = (v: unknown): string | undefined => (typeof v === "string" && v.trim() ? v : undefined);
+  if (tool === OPEN_URL_TOOL) {
+    const url = text(args.url);
+    return url ? { tool, url } : null;
+  }
+  if (tool === RUN_IN_TERMINAL_TOOL) {
+    const command = text(args.command);
+    const cwd = text(args.cwd);
+    return command ? { tool, command, ...(cwd ? { cwd } : {}) } : null;
+  }
+  const terminal = text(args.terminal);
+  const lines = typeof args.lines === "number" && Number.isInteger(args.lines) && args.lines > 0 ? args.lines : undefined;
+  return { tool: READ_TERMINAL_TOOL, ...(terminal ? { terminal } : {}), ...(lines ? { lines } : {}) };
+}
+
 /** A tool result's text as the AI read it, without the stand-in for the screenshot. */
 export function tabToolResultText(output: string): string {
   const plain = () => output.split("\n").filter((line) => !CODEX_IMAGE_LABEL.test(line)).join("\n").trimEnd();