@hienlh/ppm 0.23.13 → 0.23.15

package/src/web/components/chat/session-changes-bar.tsx

@@ -16,7 +16,7 @@ import { useId, useState } from "react";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { useProjectStore } from "@/stores/project-store";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
-import { CheckCircle2, ChevronRight, Eye, EyeOff, FileDiff, ListChecks, X } from "@/lib/icons";
+import { CheckCircle2, ChevronRight, Eye, EyeOff, FileDiff, ListChecks, RefreshCw, X } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import { fileCount, sessionChangeTotals, splitReviewed } from "@/lib/session-file-changes";
 import { ChangeCounts } from "./change-file-row";
@@ -55,14 +55,23 @@ export function ReviewedToggle({ count, shown, dense, onToggle }: {
   );
 }
 
-export function SessionChangesBar({ files, projectName, providerId, onReview, onOpen, onSetReviewed }: {
+export function SessionChangesBar({ files, loaded = true, loading = false, unloadedCount = 0, projectName, providerId, onReview, onOpen, onRefresh, onSetReviewed }: {
   files: SessionFileChange[];
+  /**
+   * Whether `files` is the server's answer. The list is worked out only when opened, so until
+   * then the bar counts the `unloadedCount` files the transcript names, with no line totals.
+   */
+  loaded?: boolean;
+  loading?: boolean;
+  unloadedCount?: number;
   projectName: string;
   providerId?: string;
   /** Open the Review tab, on `path` when one was picked. */
   onReview: (path?: string) => void;
   /** The list was opened: worth asking the server again, the disk may have moved. */
   onOpen?: () => void;
+  /** Ask the server again on demand: the list never refreshes on its own. */
+  onRefresh?: () => void;
   /** Mark files reviewed (hidden until they change again), or bring them back. */
   onSetReviewed?: (files: SessionFileChange[], reviewed: boolean) => void;
 }) {
@@ -72,20 +81,24 @@ export function SessionChangesBar({ files, projectName, providerId, onReview, on
   const listId = useId();
   const projectPath = useProjectStore((s) => s.projects.find((p) => p.name === projectName)?.path);
 
-  if (files.length === 0) return null;
+  if (loaded ? files.length === 0 && !(loading && open) : unloadedCount === 0) return null;
 
   const { pending, reviewed } = splitReviewed(files);
-  const allReviewed = pending.length === 0;
+  const allReviewed = loaded && files.length > 0 && pending.length === 0;
   // Nothing else to show once every file is reviewed.
   const reviewedShown = showReviewed || allReviewed;
   const totals = sessionChangeTotals(pending);
-  const label = allReviewed ? `All ${fileCount(reviewed.length)} reviewed` : `${fileCount(pending.length)} changed`;
+  const label = !loaded
+    ? `${fileCount(unloadedCount)} changed`
+    : allReviewed ? `All ${fileCount(reviewed.length)} reviewed` : `${fileCount(pending.length)} changed`;
   const toggle = () => {
     if (!open) onOpen?.();
     setOpen(!open);
   };
   const review = (path?: string) => {
     setOpen(false);
+    // The Review tab follows the agent through this list, so opening it is opening the list.
+    if (!loaded) onOpen?.();
     onReview(path);
   };
   const markAll = () => {
@@ -105,6 +118,9 @@ export function SessionChangesBar({ files, projectName, providerId, onReview, on
   );
   const rows = (dense: boolean) => (
     <>
+      {loading && files.length === 0 && (
+        <p className={cn("text-text-subtle", dense ? "px-2.5 py-1.5 text-[11px]" : "px-4 py-3 text-xs")}>Working out what changed…</p>
+      )}
       {pending.map((file) => row(file, dense))}
       {reviewed.length > 0 && !allReviewed && (
         <ReviewedToggle count={reviewed.length} shown={showReviewed} dense={dense} onToggle={() => setShowReviewed(!showReviewed)} />
@@ -128,19 +144,36 @@ export function SessionChangesBar({ files, projectName, providerId, onReview, on
           />
           {allReviewed && <CheckCircle2 className="size-3.5 shrink-0 text-success" />}
           <span className={cn("truncate font-medium", allReviewed ? "text-text-secondary" : "text-text-primary")}>{label}</span>
-          {!allReviewed && <ChangeCounts added={totals.added} removed={totals.removed} className="shrink-0 font-mono text-[11px]" />}
+          {loaded && !allReviewed && <ChangeCounts added={totals.added} removed={totals.removed} className="shrink-0 font-mono text-[11px]" />}
           {!allReviewed && reviewed.length > 0 && (
-            <span className="shrink-0 text-[11px] text-text-subtle">· {reviewed.length} reviewed</span>
+            <span className="shrink-0 text-[11px] text-text-subtle @max-[420px]/chat:hidden">· {reviewed.length} reviewed</span>
           )}
         </button>
-        {!isMobile && !allReviewed && onSetReviewed && (
+        {onRefresh && (
+          <button
+            type="button"
+            onClick={onRefresh}
+            disabled={loading}
+            aria-label="Refresh changes"
+            title="Refresh changes"
+            data-testid="session-changes-refresh"
+            className="inline-flex min-h-11 min-w-11 shrink-0 items-center justify-center rounded text-text-secondary transition-colors hover:bg-surface hover:text-text-primary disabled:opacity-60 md:min-h-8 md:min-w-8"
+          >
+            <RefreshCw className={cn("size-3.5", loading && "animate-spin")} />
+          </button>
+        )}
+        {!isMobile && loaded && !allReviewed && onSetReviewed && (
           <button
             type="button"
             onClick={markAll}
-            className="inline-flex min-h-8 shrink-0 items-center gap-1.5 rounded px-2 text-xs text-text-secondary transition-colors hover:bg-surface hover:text-text-primary"
+            // On a narrow chat (`@max-[420px]/chat`) the words go and the icon stays, so the
+            // bar's own label — what changed — is the thing that keeps its room.
+            aria-label="Mark all reviewed"
+            title="Mark all reviewed"
+            className="inline-flex min-h-8 shrink-0 items-center gap-1.5 rounded px-2 text-xs text-text-secondary transition-colors hover:bg-surface hover:text-text-primary @max-[420px]/chat:px-1.5"
           >
             <ListChecks className="size-3.5" />
-            Mark all reviewed
+            <span className="@max-[420px]/chat:hidden">Mark all reviewed</span>
           </button>
         )}
         {!allReviewed && (
@@ -175,7 +208,7 @@ export function SessionChangesBar({ files, projectName, providerId, onReview, on
         <BottomSheet open={open} onClose={() => setOpen(false)} className="flex max-h-[85%] flex-col">
           <div className="flex items-center gap-2 border-b border-border-soft pb-1 pl-4 pr-1">
             <span className="min-w-0 flex-1 truncate text-sm font-medium text-text-primary">Changed in this chat</span>
-            {!allReviewed && <ChangeCounts added={totals.added} removed={totals.removed} className="shrink-0 font-mono text-xs" />}
+            {loaded && !allReviewed && <ChangeCounts added={totals.added} removed={totals.removed} className="shrink-0 font-mono text-xs" />}
             <button
               type="button"
               onClick={() => setOpen(false)}
@@ -191,7 +224,7 @@ export function SessionChangesBar({ files, projectName, providerId, onReview, on
             <p className="text-xs leading-relaxed text-text-subtle">{shellChangesHint(providerId)}</p>
             {!allReviewed && (
               <div className="flex gap-2">
-                {onSetReviewed && (
+                {loaded && onSetReviewed && (
                   <button
                     type="button"
                     onClick={markAll}
@@ -207,7 +240,7 @@ export function SessionChangesBar({ files, projectName, providerId, onReview, on
                   className="flex min-h-11 flex-1 items-center justify-center gap-2 rounded-lg bg-primary text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
                 >
                   <FileDiff className="size-4" />
-                  Review all {fileCount(pending.length)}
+                  Review all {fileCount(loaded ? pending.length : unloadedCount)}
                 </button>
               </div>
             )}

package/src/web/components/chat/tool-cards.tsx

@@ -36,6 +36,8 @@ import {
   Clock,
   Send,
   Users,
+  Database,
+  DatabaseZap,
 } from "@/lib/icons";
 import { ImagePlus } from "@/lib/icons";
 
@@ -62,6 +64,18 @@ function toolChip(
     return { Icon: Terminal, cls: "bg-error/15 text-error" };
   // A named teammate gets its own chip so it is not mistaken for a throwaway subagent.
   if (isAddressableAgent) return { Icon: Users, cls: "bg-accent-2/15 text-accent-2" };
+  const dbTool = dbToolOf(name);
+  if (dbTool) {
+    return dbTool === DB_EXECUTE_TOOL
+      ? { Icon: DatabaseZap, cls: "bg-warning/15 text-warning" }
+      : { Icon: Database, cls: "bg-info/15 text-info" };
+  }
+  const deviceTool = deviceToolOf(name);
+  if (deviceTool) {
+    return deviceTool === OPEN_URL_TOOL
+      ? { Icon: Globe, cls: "bg-info/15 text-info" }
+      : { Icon: Terminal, cls: "bg-panel-2 text-text-2" };
+  }
   switch (name) {
     case "Read": case "Glob": case "LS":
       return { Icon: FileSearch, cls: "bg-accent-wash text-primary" };
@@ -102,7 +116,12 @@ import { resultHasImagePlaceholder } from "../../../shared/tool-result-content";
 import { isAsyncAgentLaunchAck } from "../../../shared/background-agent-status";
 import { ToolImagePreview } from "./tool-image-preview";
 import { TabToolCard } from "./tab-tool-card";
-import { tabToolCall } from "@/lib/tab-tool-call";
+import { DeviceToolDetails, DeviceToolSummary } from "./device-tool-card";
+import { deviceToolCall, deviceToolOf, tabToolCall } from "@/lib/tab-tool-call";
+import { DbToolSummary, DbToolDetails } from "./db-tool-card";
+import { dbToolCall, dbToolOf } from "@/lib/db-tool-call";
+import { DB_EXECUTE_TOOL } from "../../../shared/db-ai-tools";
+import { OPEN_URL_TOOL } from "../../../shared/tab-open-protocol";
 import { AgentCardSummary, type AgentCardStatus } from "./agent-card-summary";
 import { useOpenAgentSession } from "./use-open-agent-session";
 import { useAgentSessionContext, normalizeProviderId } from "./agent-session-context";
@@ -366,6 +385,10 @@ export function ToolCard({
 /** Render one-line summary per tool type */
 function ToolSummary({ name, input }: { name: string; input: Record<string, unknown> }) {
   const s = (v: unknown) => String(v ?? "");
+  const dbCall = dbToolCall(name, input);
+  if (dbCall) return <DbToolSummary call={dbCall} />;
+  const deviceCall = deviceToolCall(name, input);
+  if (deviceCall) return <DeviceToolSummary call={deviceCall} />;
   switch (name) {
     case "Read":
     case "Write":
@@ -479,6 +502,11 @@ function ToolDetails({
     });
   };
 
+  const dbCall = dbToolCall(name, input);
+  if (dbCall) return <DbToolDetails call={dbCall} />;
+  const deviceCall = deviceToolCall(name, input);
+  if (deviceCall) return <DeviceToolDetails call={deviceCall} />;
+
   switch (name) {
     case "Bash":
     case "PowerShell":

package/src/web/components/chat/turn-change-rollup.tsx

@@ -8,6 +8,7 @@
 import { useRef, useState } from "react";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { useTurnReview } from "@/hooks/use-turn-review";
+import { useSessionChanges } from "./session-changes-context";
 import type { TurnFileChange } from "@/lib/aggregate-turn-file-changes";
 import type { SessionTurn } from "@/lib/session-turns";
 import { turnReviewLabel } from "@/lib/turn-review";
@@ -30,6 +31,8 @@ export function TurnChangeRollup({ timestamp, content, changes, turn, onJumpToEd
   const isMobile = useIsMobile();
   const pillRef = useRef<HTMLButtonElement>(null);
   const review = useTurnReview({ changes, turn });
+  // The session's list is worked out only when someone looks; opening a turn's changes is that.
+  const sessionChanges = useSessionChanges();
 
   // Without this, closing drops focus to <body> and the next Tab restarts from the
   // top of a very long transcript.
@@ -52,7 +55,11 @@ export function TurnChangeRollup({ timestamp, content, changes, turn, onJumpToEd
           totals={changeTotals(changes)}
           status={turnReviewLabel(review.summary)}
           open={open}
-          onToggle={() => (open ? close() : setOpen(true))}
+          onToggle={() => {
+            if (open) return close();
+            sessionChanges?.refresh();
+            setOpen(true);
+          }}
         />
       )}
     </MessageActionBar>

package/src/web/components/chat/usage-badge.tsx

@@ -93,8 +93,8 @@ export function UsageDetailPanel({
   // One strip for anything that went wrong in this panel — a refused switch or a refused
   // toggle. Two separate messages in two places would be harder to notice, not clearer.
   const [panelError, setPanelError] = useState<string | null>(null);
-  /** Label of the account whose "Sign in again" chip was pressed; opens the sign-in dialog. */
-  const [signInAgainFor, setSignInAgainFor] = useState<string | null>(null);
+  /** The account whose "Sign in again" chip was pressed; opens the sign-in dialog. */
+  const [signInAgainFor, setSignInAgainFor] = useState<{ id: string; label: string } | null>(null);
 
   if (!visible) return null;
 
@@ -226,7 +226,7 @@ export function UsageDetailPanel({
             selecting={selectingId === entry.accountId}
             onToggle={handleToggle}
             toggling={togglingId === entry.accountId}
-            onReauth={() => setSignInAgainFor(entry.accountLabel ?? entry.accountId.slice(0, 8))}
+            onReauth={() => setSignInAgainFor({ id: entry.accountId, label: entry.accountLabel ?? entry.accountId.slice(0, 8) })}
           />
         );
       })}

package/src/web/components/database/query/query-run-state.ts

@@ -7,7 +7,9 @@
  * Every line here is the editor's. The server counts the lines of the text it was sent, and the
  * statement at the cursor or a selection begins further down the editor than its line 1.
  */
-import type { QueryResultSet, QueryScriptEvent, QueryStatementResult } from "../../../../shared/db-query-script";
+import {
+  isReadonlyRefusalText, WRONG_PASSWORD, type QueryResultSet, type QueryScriptEvent, type QueryStatementResult,
+} from "../../../../shared/db-query-script";
 import type { DialectName } from "../../../../shared/db-types";
 import type { DbColumnInfo } from "../use-database";
 import type { GridColumnSchema } from "../glide-grid-types";
@@ -211,6 +213,14 @@ export function failQueryRun(run: QueryRun, error: string, now: number): QueryRu
   };
 }
 
+/**
+ * The run was refused because its connection is readonly — by PPM or by the database — or a run
+ * with write access was refused for a wrong password: "Run with write access (once)" can run it.
+ */
+export function refusedAsReadonly(run: QueryRun): boolean {
+  return run.done && run.messages.some((m) => m.level === "error" && (isReadonlyRefusalText(m.text) || m.text === WRONG_PASSWORD));
+}
+
 /** A line of Messages added after the run, about it: a result read again after a save. */
 export function noteOnQueryRun(run: QueryRun, message: NewMessage, now: number): QueryRun {
   return { ...run, messages: [...run.messages, { ...message, id: run.messages.length, time: now }] };

package/src/web/components/database/query/query-tab.tsx

@@ -14,7 +14,7 @@
  */
 import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent } from "react";
 import { toast } from "sonner";
-import { ArrowRightFromLine, ChevronDown, Gauge, GripHorizontal, History, IndentIncrease, MoreHorizontal, Play, Save, Square, TextSelect } from "@/lib/icons";
+import { ArrowRightFromLine, ChevronDown, Gauge, GripHorizontal, History, IndentIncrease, MoreHorizontal, Play, Save, ShieldAlert, Square, TextSelect } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import { targetLabel } from "@/lib/db-tabs";
 import { formatCombo } from "@/stores/keybindings-store";
@@ -22,6 +22,7 @@ import { currentTabMetadata, patchTabMetadata } from "@/lib/patch-tab-metadata";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { useAtMostWide } from "@/hooks/use-at-most-wide";
 import { useTabStore } from "@/stores/tab-store";
+import { getAuthToken } from "@/lib/api-client";
 import { unsavedGridRows } from "@/stores/unsaved-grid-rows-store";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { DEFAULT_QUERY_ROW_LIMIT, QUERY_ROW_LIMITS } from "../../../../shared/db-query-script";
@@ -37,10 +38,11 @@ import { openImpExpTab } from "../impexp/open-impexp-tab";
 import { useQueryRunner, type QueryRunRequest } from "./use-query-runner";
 import { useSqlSchemaInfo } from "./use-sql-schema-info";
 import { QueryTargetPicker } from "./query-target-picker";
-import { resultOfTab, shownResultTab, stopTitle, type QueryResultTab, type QueryRunKind } from "./query-run-state";
+import { refusedAsReadonly, resultOfTab, shownResultTab, stopTitle, type QueryResultTab, type QueryRunKind } from "./query-run-state";
 import { ResultTabs } from "./result-tabs";
 import { ResultView } from "./result-view";
 import { DiscardResultEditsDialog } from "./discard-result-edits-dialog";
+import { WriteOnceDialog } from "./write-once-dialog";
 import { HistoryPanel } from "./history-panel";
 import { queryFileTitle, savedFileOf, savedQueryTab } from "./query-file";
 import { useQueryFileSave } from "./use-query-file-save";
@@ -100,6 +102,9 @@ export function QueryTab({ metadata, tabId }: Props) {
     if (tabId && unsavedGridRows(tabId) > 0) setDiscardAsk(request);
     else void runner.start(request);
   }, [runner.running, runner.start, tabId]); // eslint-disable-line react-hooks/exhaustive-deps
+  // A run a readonly connection refused can run once with write access, for PPM's password.
+  const [writeOnceAsk, setWriteOnceAsk] = useState<QueryRunRequest | null>(null);
+  const offerWriteOnce = tab.readonly && !!run && !runner.running && refusedAsReadonly(run);
   const runSql = useCallback((r: SqlRun | null, kind?: QueryRunKind) => {
     if (r) start({ sql: r.sql, lineOffset: r.lineOffset, kind: kind ?? KIND_OF[r.from] });
   }, [start]);
@@ -297,14 +302,28 @@ export function QueryTab({ metadata, tabId }: Props) {
           >
             <GripHorizontal className="size-3 text-text-subtle/50" />
           </div>
-          <div className="min-h-0 flex-1 overflow-hidden border-t border-border md:border-t-0">
+          <div className="flex min-h-0 flex-1 flex-col overflow-hidden border-t border-border md:border-t-0">
+            {offerWriteOnce && run && (
+              <div className="flex shrink-0 flex-wrap items-center gap-2 border-b border-border bg-warning/10 px-3 py-1.5 text-xs">
+                <ShieldAlert className="size-4 shrink-0 text-warning" />
+                <span className="min-w-0 flex-1">{tab.name} is readonly.</span>
+                <button
+                  type="button" onClick={() => setWriteOnceAsk({ sql: run.sql, kind: run.kind, lineOffset: run.lineOffset })}
+                  className="h-7 shrink-0 rounded border border-warning/50 px-2.5 font-medium text-warning can-hover:hover:bg-warning/15 max-md:h-11"
+                >
+                  Run with write access (once)
+                </button>
+              </div>
+            )}
             {runner.driverMissing ? (
               <DbTabState driver={runner.driverMissing} />
             ) : run ? (
-              <ResultTabs
-                run={run} shown={shown} onPick={pick} onShowLine={showLine}
-                onStop={() => void runner.stop()} stopping={runner.stopping} renderResult={renderResult}
-              />
+              <div className="min-h-0 flex-1">
+                <ResultTabs
+                  run={run} shown={shown} onPick={pick} onShowLine={showLine}
+                  onStop={() => void runner.stop()} stopping={runner.stopping} renderResult={renderResult}
+                />
+              </div>
             ) : (
               <div className="flex h-full flex-col items-center justify-center gap-1 p-4 text-center text-xs text-text-subtle">
                 <span>Run a statement to see its result</span>
@@ -368,6 +387,13 @@ export function QueryTab({ metadata, tabId }: Props) {
         </div>
       </BottomSheet>
 
+      {writeOnceAsk && (
+        <WriteOnceDialog
+          connectionName={tab.name} sql={writeOnceAsk.sql} passwordRequired={!!getAuthToken()}
+          onCancel={() => setWriteOnceAsk(null)}
+          onRun={(password) => { const request = writeOnceAsk; setWriteOnceAsk(null); start({ ...request, writeOnce: { password } }); }}
+        />
+      )}
       {discardAsk && (
         <DiscardResultEditsDialog
           onCancel={() => setDiscardAsk(null)}

package/src/web/components/database/query/use-query-runner.ts

@@ -34,6 +34,8 @@ export interface QueryRunRequest {
   kind: QueryRunKind;
   /** The editor's line of the text's line 1, less one. */
   lineOffset: number;
+  /** Run once with write access on a readonly connection: PPM's password, as the user typed it. */
+  writeOnce?: { password: string };
 }
 
 interface ActiveRun {
@@ -100,6 +102,7 @@ export function useQueryRunner(target: DbTarget | null, options: { maxRows: numb
       sql: request.sql, runId: active.runId, maxRows,
       ...(continueOnError ? { continueOnError: true } : {}),
       ...(request.kind === "explain" ? { explain: true } : {}),
+      ...(request.writeOnce ? { writeOnce: request.writeOnce } : {}),
     };
     try {
       const res = await api.postStream(targetUrl(target, "/query/script"), body, { signal: active.abort.signal });

package/src/web/components/database/query/write-once-dialog.tsx

@@ -0,0 +1,70 @@
+/**
+ * "Run with write access (once)" on a readonly connection: the script that was refused runs once
+ * more with the connection writable, for that run alone, once PPM's password is typed. The server
+ * checks the password; a wrong one fails the run and the action is offered again. A dialog on a
+ * desktop, a bottom sheet on a phone.
+ */
+import { useState } from "react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+
+const TITLE = "Run with write access (once)?";
+
+export function WriteOnceDialog({ connectionName, sql, passwordRequired, onCancel, onRun }: {
+  connectionName: string;
+  sql: string;
+  /** PPM signs in with a password; with none set, the server asks for nothing. */
+  passwordRequired: boolean;
+  onCancel: () => void;
+  onRun: (password: string) => void;
+}) {
+  const isMobile = useIsMobile();
+  const [password, setPassword] = useState("");
+  const explanation = `${connectionName} is readonly. This runs the script below once with write access; the connection stays readonly afterwards.`;
+  const body = (
+    <form
+      className="space-y-3"
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (!passwordRequired || password) onRun(password);
+      }}
+    >
+      <pre className="max-h-40 overflow-auto whitespace-pre-wrap break-all rounded border border-border bg-background p-2 font-mono text-xs text-text-secondary">{sql}</pre>
+      {passwordRequired && (
+        <Input
+          type="password" autoComplete="current-password" placeholder="PPM password" aria-label="PPM password"
+          value={password} onChange={(e) => setPassword(e.target.value)} autoFocus className="h-11 md:h-9"
+        />
+      )}
+      <div className="flex flex-col-reverse gap-2 pt-1 md:flex-row md:justify-end">
+        <Button type="button" variant="outline" onClick={onCancel} className="min-h-11 md:min-h-9">Cancel</Button>
+        <Button type="submit" variant="destructive" disabled={passwordRequired && !password} className="min-h-11 md:min-h-9">Run once</Button>
+      </div>
+    </form>
+  );
+  if (isMobile) {
+    return (
+      <BottomSheet open onClose={onCancel}>
+        <div className="space-y-3 px-4 pb-4" role="dialog" aria-label={TITLE}>
+          <h2 className="text-base font-semibold">{TITLE}</h2>
+          <p className="text-sm text-text-secondary">{explanation}</p>
+          {body}
+        </div>
+      </BottomSheet>
+    );
+  }
+  return (
+    <Dialog open onOpenChange={(open) => { if (!open) onCancel(); }}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{TITLE}</DialogTitle>
+          <DialogDescription>{explanation}</DialogDescription>
+        </DialogHeader>
+        {body}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/web/components/design/canvas/design-canvas-pane.tsx

@@ -21,6 +21,7 @@ import { TransformReadout } from "../transform/transform-readout";
 import { useDesignExport } from "../export/use-design-export";
 import { ExportSheet } from "../export/export-menu";
 import { ExportWarningsSheet } from "../export/export-warnings-sheet";
+import { DesignShareDialog, useDesignShare } from "../share/design-share-dialog";
 import { useDesignCanvasCheckResponder } from "./use-design-canvas-check";
 import { useDesignAutoCheck } from "../use-design-auto-check";
 import { useExpandedCanvasEscape } from "./use-expanded-canvas-escape";
@@ -69,6 +70,7 @@ export function DesignCanvasPane({ moreOpen = false, onMoreClose }: { moreOpen?:
   // for the screenshot "Build in new chat" attaches.
   const checkContext = () => ({ issues: canvas.issues, frame: framePreset(frame).label });
   const exports = useDesignExport(tab, canvas.bridge, variants.file, checkContext);
+  const share = useDesignShare();
   useDesignCanvasCheckResponder({ projectName: tab.projectName, slug: tab.slug, bridge: canvas.bridge, context: checkContext });
   const layoutIssues = useDesignAutoCheck({ tab, bridge: canvas.bridge, context: checkContext });
   const { variantWarnings } = tab.design;
@@ -80,8 +82,8 @@ export function DesignCanvasPane({ moreOpen = false, onMoreClose }: { moreOpen?:
   useExpandedCanvasEscape(expanded, () => setExpanded(false), () => comments.picker.on);
 
   const toolbarCtx = useMemo<DesignToolbarContext>(() => ({
-    ...tab, canvas, frame, setFrame, historyOpen, toggleHistory, comments, tweaks, transform, undo, exports, variants,
-  }), [tab, canvas, frame, setFrame, historyOpen, toggleHistory, comments, tweaks, transform, undo, exports, variants]);
+    ...tab, canvas, frame, setFrame, historyOpen, toggleHistory, comments, tweaks, transform, undo, exports, variants, share,
+  }), [tab, canvas, frame, setFrame, historyOpen, toggleHistory, comments, tweaks, transform, undo, exports, variants, share]);
   const tweaksPanel = tweaks.panelOpen && <TweaksPanel feature={tweaks} tabId={tab.tabId} slug={tab.slug} />;
 
   const history = historyOpen && (
@@ -157,6 +159,7 @@ export function DesignCanvasPane({ moreOpen = false, onMoreClose }: { moreOpen?:
           colours being tweaked, and the canvas has to stay in view while a slider moves. */}
       {tab.isMobile && tweaksPanel && <div className="h-[45%] shrink-0 border-t border-border">{tweaksPanel}</div>}
       <ExportWarningsSheet feature={exports} />
+      <DesignShareDialog feature={share} />
       {tab.isMobile && (
         <>
           <ExportSheet feature={exports} />

package/src/web/components/design/comments/comment-author-label.tsx

@@ -0,0 +1,23 @@
+import { cn } from "@/lib/utils";
+import type { OwnerViewAuthor } from "../../../../shared/design-comment-thread-types";
+
+/**
+ * Who wrote a comment or a reply, as the owner reads it: "You" for their own entries, the
+ * reviewer's typed name otherwise, followed by the share link they came through. Both strings
+ * come from outside the project and are only ever rendered as text.
+ */
+
+export const isReviewer = (a: OwnerViewAuthor): a is Extract<OwnerViewAuthor, { kind: "guest" }> => a.kind === "guest";
+
+export function authorName(a: OwnerViewAuthor): string {
+  return isReviewer(a) ? a.name : "You";
+}
+
+export function CommentAuthorLabel({ author, className }: { author: OwnerViewAuthor; className?: string }) {
+  return (
+    <span className={cn("min-w-0 truncate", className)}>
+      <span className={isReviewer(author) ? "font-medium text-text" : undefined}>{authorName(author)}</span>
+      {isReviewer(author) && <span className="text-text-subtle"> · via {author.linkLabel}</span>}
+    </span>
+  );
+}

package/src/web/components/design/comments/comment-composer.tsx

@@ -1,45 +1,42 @@
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
-import { Loader2, Trash2 } from "@/lib/icons";
+import { Loader2 } from "@/lib/icons";
 import { Button } from "@/components/ui/button";
 import { DesignResponsiveDialog } from "../dialogs/design-responsive-dialog";
 import { COMMENT_LIMITS } from "../../../../shared/design-comment-types";
 
 /**
- * Writing a comment on an element, editing one, or adding a note to "Send to AI" for a
- * single element. The element's text and markup are shown as plain text: both come from the
+ * Writing a comment on an element, or adding a note to "Send to AI" for a single element.
+ * An existing comment opens as its thread instead (`comment-thread-view.tsx`). The element's text and markup are shown as plain text: both come from the
  * page and are never rendered as HTML.
  */
 
 export interface ComposerTarget {
-  mode: "create" | "edit" | "send";
+  mode: "create" | "send";
   tag: string;
   /** The element's text as the page reported it (or as the comment stored it). */
   text: string;
   /** The page's markup for the element, shown for orientation only. */
   markup?: string;
-  initialBody?: string;
 }
 
 const TITLES: Record<ComposerTarget["mode"], (tag: string) => string> = {
   create: (tag) => `Comment on <${tag}>`,
-  edit: () => "Comment",
   send: (tag) => `Send <${tag}> to AI`,
 };
 
-export function CommentComposer({ target, onClose, onSubmit, onDelete }: {
+export function CommentComposer({ target, onClose, onSubmit }: {
   target: ComposerTarget | null;
   onClose: () => void;
   /** Resolves when done; a rejection keeps the dialog open with the text intact. */
   onSubmit: (body: string) => Promise<void>;
-  onDelete?: () => Promise<void>;
 }) {
   const [body, setBody] = useState("");
   const [busy, setBusy] = useState(false);
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
-    setBody(target?.initialBody ?? "");
+    setBody("");
     setBusy(false);
     if (target) requestAnimationFrame(() => inputRef.current?.focus());
   }, [target]);
@@ -66,11 +63,6 @@ export function CommentComposer({ target, onClose, onSubmit, onDelete }: {
       title={TITLES[target.mode](target.tag)}
       description={sending ? "Add a note if you like. You will see the whole message before it goes into the chat." : undefined}
       footer={<>
-        {target.mode === "edit" && onDelete && (
-          <Button variant="outline" className="text-destructive md:mr-auto" disabled={busy} onClick={() => run(onDelete)}>
-            <Trash2 className="size-4" /> Delete
-          </Button>
-        )}
         <Button variant="outline" onClick={onClose} disabled={busy}>Cancel</Button>
         <Button disabled={!canSubmit} onClick={() => run(() => onSubmit(body))}>
           {busy && <Loader2 className="size-4 animate-spin" />} {sending ? "Preview message" : "Save"}

package/src/web/components/design/comments/comment-pins-overlay.tsx

@@ -1,4 +1,4 @@
-import { CheckCircle, Send, Trash2 } from "@/lib/icons";
+import { CheckCircle, MessageSquare, Send, Trash2 } from "@/lib/icons";
 import {
   ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger,
 } from "@/components/ui/adaptive-context-menu";
@@ -12,12 +12,16 @@ import type { DesignComment } from "../../../../shared/design-comment-types";
  * Numbered pins over the canvas, one per open comment whose element is on screen, at the
  * element's top-right corner. Each is a 44px target (the dot inside is smaller) with the
  * adaptive context menu: right-click on desktop, long-press on touch; a tap opens the
- * comment. A pin that was found again by its text after an edit gets a dashed ring, so a
+ * thread. A pin that was found again by its text after an edit gets a dashed ring, so a
  * re-anchor is visible rather than silent.
+ *
+ * Pins follow `anchor`, i.e. the element in the live file. A reviewer's own pin position in
+ * the version their link shows is `pinnedAnchor`, which the canvas never sends or changes.
  */
 
 export interface PinActions {
   onOpen: (c: DesignComment) => void;
+  onReply: (c: DesignComment) => void;
   onResolve: (c: DesignComment) => void;
   onSend: (c: DesignComment) => void;
   onDelete: (c: DesignComment) => void;
@@ -43,7 +47,7 @@ export function CommentPinsOverlay({ open, pins, fit, stage, actions }: {
               <button
                 type="button"
                 onClick={() => actions.onOpen(c)}
-                aria-label={`Comment ${i + 1}: ${c.body}`}
+                aria-label={`Comment ${i + 1}${c.author?.kind === "guest" ? ` by ${c.author.name}` : ""}: ${c.body}`}
                 title={c.body}
                 className="pointer-events-auto absolute flex size-11 -translate-x-1/2 -translate-y-1/2 select-none items-center justify-center"
                 style={{ left: at.left, top: at.top }}
@@ -58,6 +62,7 @@ export function CommentPinsOverlay({ open, pins, fit, stage, actions }: {
             </ContextMenuTrigger>
             <ContextMenuContent>
               <ContextMenuItem onClick={() => actions.onResolve(c)}><CheckCircle className="size-4" /> Resolve</ContextMenuItem>
+              <ContextMenuItem onClick={() => actions.onReply(c)}><MessageSquare className="size-4" /> Reply</ContextMenuItem>
               <ContextMenuItem onClick={() => actions.onSend(c)}><Send className="size-4" /> Send to AI</ContextMenuItem>
               <ContextMenuSeparator />
               <ContextMenuItem variant="destructive" onClick={() => actions.onDelete(c)}><Trash2 className="size-4" /> Delete</ContextMenuItem>