@hienlh/ppm 0.17.29 → 0.17.31

package/src/web/components/settings/proxy-settings-section.tsx

@@ -5,6 +5,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { getProxySettings, updateProxySettings, type ProxySettings } from "@/lib/api-settings";
+import { copyToClipboard } from "@/lib/clipboard";
 import { ProxyTestButton } from "./proxy-test-section";
 
 export function ProxySettingsSection() {
@@ -37,8 +38,8 @@ export function ProxySettingsSection() {
     }
   };
 
-  const copyToClipboard = (text: string, label: string) => {
-    navigator.clipboard.writeText(text);
+  const handleCopy = (text: string, label: string) => {
+    void copyToClipboard(text);
     setCopied(label);
     setTimeout(() => setCopied(null), 2000);
   };
@@ -96,7 +97,7 @@ export function ProxySettingsSection() {
               variant="outline"
               size="sm"
               className="h-7 px-2 cursor-pointer shrink-0"
-              onClick={() => copyToClipboard(settings.authKey!, "key")}
+              onClick={() => handleCopy(settings.authKey!, "key")}
             >
               {copied === "key" ? "Copied!" : <Copy className="size-3" />}
             </Button>
@@ -145,7 +146,7 @@ export function ProxySettingsSection() {
                 variant="ghost"
                 size="sm"
                 className="h-6 px-1.5 cursor-pointer shrink-0"
-                onClick={() => copyToClipboard(hasTunnel ? settings.proxyEndpoint! : localEndpoint, "anthropic")}
+                onClick={() => handleCopy(hasTunnel ? settings.proxyEndpoint! : localEndpoint, "anthropic")}
               >
                 {copied === "anthropic" ? "Copied!" : <Copy className="size-3" />}
               </Button>
@@ -163,7 +164,7 @@ export function ProxySettingsSection() {
                 variant="ghost"
                 size="sm"
                 className="h-6 px-1.5 cursor-pointer shrink-0"
-                onClick={() => copyToClipboard(
+                onClick={() => handleCopy(
                   hasTunnel ? settings.openAiEndpoint! : settings.localOpenAiEndpoint, "openai",
                 )}
               >
@@ -190,7 +191,7 @@ ANTHROPIC_API_KEY=${settings.authKey}`}
                 variant="ghost"
                 size="sm"
                 className="absolute top-1 right-1 h-5 px-1 cursor-pointer"
-                onClick={() => copyToClipboard(
+                onClick={() => handleCopy(
                   `ANTHROPIC_BASE_URL=${hasTunnel ? settings.tunnelUrl + "/proxy" : localBaseUrl + "/proxy"}\nANTHROPIC_API_KEY=${settings.authKey}`,
                   "anthropic-env",
                 )}
@@ -211,7 +212,7 @@ OPENAI_API_KEY=${settings.authKey}`}
                 variant="ghost"
                 size="sm"
                 className="absolute top-1 right-1 h-5 px-1 cursor-pointer"
-                onClick={() => copyToClipboard(
+                onClick={() => handleCopy(
                   `OPENAI_BASE_URL=${hasTunnel ? settings.tunnelUrl + "/proxy/v1" : localBaseUrl + "/proxy/v1"}\nOPENAI_API_KEY=${settings.authKey}`,
                   "openai-env",
                 )}

package/src/web/components/settings/settings-tab.tsx

@@ -279,16 +279,16 @@ export function SettingsTab() {
 function NotificationsContent() {
   return (
     <div className="space-y-4">
-      {/* Cloud Push */}
+      {/* Browser push */}
       <section className="space-y-2">
         <h3 className="text-xs font-medium text-muted-foreground">Push Notifications</h3>
         <div className="flex items-center gap-1.5">
           <Bell className="size-3.5 text-muted-foreground" />
-          <span className="text-xs">Managed via PPM Cloud</span>
+          <span className="text-xs">Not available yet</span>
         </div>
         <p className="text-[11px] text-muted-foreground">
-          Push notifications are now dispatched through PPM Cloud.
-          Visit your Cloud dashboard to manage subscriptions.
+          Browser push does not deliver right now.
+          Use Telegram below to get alerted when a session finishes or needs approval.
         </p>
       </section>
 

package/src/web/components/shared/bug-report-popup.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { Copy, ExternalLink, X, Check } from "lucide-react";
-import { openGithubIssue, copyToClipboard } from "@/lib/report-bug";
+import { openGithubIssue } from "@/lib/report-bug";
+import { copyToClipboard } from "@/lib/clipboard";
 
 export function BugReportPopup() {
   const [text, setText] = useState<string | null>(null);

package/src/web/components/shared/markdown-code-block.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, type ReactNode } from "react";
 import { useMdContext, FILE_EXT_RE, GLOB_CHARS_RE } from "./markdown-context";
 import { useTabStore } from "@/stores/tab-store";
 import { highlightToHtml, highlightSync, getActiveShikiTheme } from "@/theme/adapters/shiki-adapter";
+import { copyToClipboard } from "@/lib/clipboard";
 
 /**
  * Shiki-highlighted HTML for a code block. Returns null while streaming or
@@ -88,13 +89,13 @@ export function MdPre({ children, node, ...rest }: any) {
         : <pre {...rest}>{children}</pre>}
       {codeActions && (
         <div className="code-actions absolute top-1 right-1 flex gap-1">
-          <ActionBtn title="Copy" icon={<CopyIcon />} activeIcon={<CheckIcon />} onClick={() => navigator.clipboard.writeText(text)} />
+          <ActionBtn title="Copy" icon={<CopyIcon />} activeIcon={<CheckIcon />} onClick={() => void copyToClipboard(text)} />
           {isBash && projectName && (
             <ActionBtn
               title="Run in terminal"
               icon={<PlayIcon />}
               onClick={() => {
-                navigator.clipboard.writeText(text.replace(/^\$\s*/gm, ""));
+                void copyToClipboard(text.replace(/^\$\s*/gm, ""));
                 openTab({ type: "terminal", title: "Terminal", metadata: { projectName }, projectId: projectName, closable: true });
               }}
             />

package/src/web/components/terminal/terminal-tab.tsx

@@ -1,6 +1,7 @@
 import { useRef, useEffect, useState, useCallback, memo } from "react";
 import { useTerminal } from "@/hooks/use-terminal";
 import { cn } from "@/lib/utils";
+import { copyToClipboard } from "@/lib/clipboard";
 import { Copy, ClipboardPaste, RotateCcw, MessageSquare } from "lucide-react";
 import "@xterm/xterm/css/xterm.css";
 import { toast } from "sonner";
@@ -88,7 +89,7 @@ export const TerminalTab = memo(function TerminalTab({ metadata, tabId }: Termin
   const handleCopy = useCallback(async () => {
     const selection = getSelection();
     if (selection) {
-      await navigator.clipboard.writeText(selection);
+      await copyToClipboard(selection);
     }
   }, [getSelection]);
 

package/src/web/components/tunnels/tunnel-manager-tab.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { Check, Copy, ExternalLink, Globe, Loader2, Lock, RefreshCw, Square } from "lucide-react";
 import { tunnelsApi, type TunnelEntry } from "@/lib/api-tunnels";
+import { copyToClipboard } from "@/lib/clipboard";
 import { toast } from "sonner";
 
 /** Badge label + style per tunnel source. */
@@ -73,11 +74,12 @@ export function TunnelManagerTab() {
   };
 
   const copyUrl = (pid: number, url: string) => {
-    navigator.clipboard.writeText(url).then(() => {
+    copyToClipboard(url).then((ok) => {
+      if (!ok) { toast.error("Failed to copy URL"); return; }
       setCopiedPid(pid);
       toast.success("URL copied");
       setTimeout(() => setCopiedPid(null), 2000);
-    }).catch(() => toast.error("Failed to copy URL"));
+    });
   };
 
   const handleSubmit = (e: React.FormEvent) => {

package/src/web/lib/aggregate-turn-file-changes.ts

@@ -0,0 +1,193 @@
+/**
+ * Aggregate the file mutations of a single assistant turn.
+ *
+ * Feeds the change tray (see turn-change-pill.tsx). Pure — no I/O, no React — so it
+ * works identically on live-streamed events and on messages parsed back from a JSONL
+ * transcript.
+ *
+ * Note on diffs: Edit's `old_string`/`new_string` are disjoint *fragments* at unknown
+ * offsets, so per-file edits cannot be composed into one whole-file diff. Each
+ * fragment is kept separate and rendered on its own.
+ */
+import { diffLines } from "diff";
+import type { ChatEvent, ChatMessage } from "../../types/chat";
+
+export type FileChangeOp = "create" | "write" | "edit" | "notebook";
+
+/** Tools whose input mutates a file. Kept in one place so it stays greppable. */
+export const FILE_MUTATION_TOOLS = new Set(["Write", "Edit", "MultiEdit", "NotebookEdit"]);
+
+/** Rank for resolving `op` when several tools touch the same file in one turn. */
+const OP_RANK: Record<FileChangeOp, number> = { create: 3, write: 2, notebook: 2, edit: 1 };
+
+export interface FileEditFragment {
+  /** "" for Write/NotebookEdit — the prior content is not in the tool input. */
+  oldStr: string;
+  newStr: string;
+  toolUseId?: string;
+  /** Index within this tool call's edits (always 0 except MultiEdit). */
+  editIndex: number;
+  /** Anchor key matching `data-edit-ref` on the tool card. */
+  editRef?: string;
+  viaSubagent: boolean;
+}
+
+export interface TurnFileChange {
+  filePath: string;
+  op: FileChangeOp;
+  editCount: number;
+  linesAdded: number;
+  linesRemoved: number;
+  edits: FileEditFragment[];
+  /** True when *any* edit to this file came from a spawned sub-agent. */
+  viaSubagent: boolean;
+}
+
+function str(v: unknown): string {
+  return typeof v === "string" ? v : "";
+}
+
+function countLines(oldStr: string, newStr: string): { added: number; removed: number } {
+  let added = 0;
+  let removed = 0;
+  for (const part of diffLines(oldStr, newStr)) {
+    if (part.added) added += part.count ?? 0;
+    else if (part.removed) removed += part.count ?? 0;
+  }
+  return { added, removed };
+}
+
+/**
+ * Write's input looks identical whether the file existed or not — only the tool
+ * result distinguishes them. Absent during streaming, hence the "write" default.
+ */
+function writeOp(output: string | undefined): FileChangeOp {
+  return output && /created successfully/i.test(output) ? "create" : "write";
+}
+
+type RawChange = { filePath: string; op: FileChangeOp; fragments: Array<{ oldStr: string; newStr: string }> };
+
+function extractChange(tool: string, input: Record<string, unknown>, result?: string): RawChange | null {
+  switch (tool) {
+    case "Write": {
+      const filePath = str(input.file_path);
+      if (!filePath) return null;
+      return { filePath, op: writeOp(result), fragments: [{ oldStr: "", newStr: str(input.content) }] };
+    }
+    case "Edit": {
+      const filePath = str(input.file_path);
+      if (!filePath) return null;
+      return {
+        filePath,
+        op: "edit",
+        fragments: [{ oldStr: str(input.old_string), newStr: str(input.new_string) }],
+      };
+    }
+    case "MultiEdit": {
+      const filePath = str(input.file_path);
+      if (!filePath || !Array.isArray(input.edits)) return null;
+      const fragments = (input.edits as unknown[])
+        .filter((e): e is Record<string, unknown> => !!e && typeof e === "object")
+        .map((e) => ({ oldStr: str(e.old_string), newStr: str(e.new_string) }));
+      if (fragments.length === 0) return null;
+      return { filePath, op: "edit", fragments };
+    }
+    case "NotebookEdit": {
+      // Real param is `notebook_path`; file_path accepted because callers vary.
+      const filePath = str(input.notebook_path) || str(input.file_path);
+      if (!filePath) return null;
+      return { filePath, op: "notebook", fragments: [{ oldStr: "", newStr: str(input.new_source) }] };
+    }
+    default:
+      return null;
+  }
+}
+
+/** Index tool_result output by toolUseId, recursing into sub-agent children. */
+function collectResults(events: ChatEvent[] | undefined, out: Map<string, string>): void {
+  if (!events) return;
+  for (const ev of events) {
+    if (ev.type === "tool_result" && ev.toolUseId) out.set(ev.toolUseId, ev.output ?? "");
+    if (ev.type === "tool_use") {
+      // The WS layer also embeds the result onto the tool_use for reconnect replay.
+      const embedded = (ev as { result?: { output?: string } }).result;
+      if (ev.toolUseId && embedded?.output != null && !out.has(ev.toolUseId)) {
+        out.set(ev.toolUseId, embedded.output);
+      }
+      collectResults(ev.children, out);
+    }
+  }
+}
+
+function walk(
+  events: ChatEvent[] | undefined,
+  viaSubagent: boolean,
+  files: Map<string, TurnFileChange>,
+  results: Map<string, string>,
+): void {
+  if (!events) return;
+  for (const ev of events) {
+    if (ev.type !== "tool_use") continue;
+    // Agent/Task wrap their own event stream — everything inside is sub-agent work.
+    if (ev.children?.length) walk(ev.children, true, files, results);
+    if (!FILE_MUTATION_TOOLS.has(ev.tool)) continue;
+
+    const input = ev.input && typeof ev.input === "object" ? (ev.input as Record<string, unknown>) : null;
+    if (!input) continue;
+    const raw = extractChange(ev.tool, input, ev.toolUseId ? results.get(ev.toolUseId) : undefined);
+    if (!raw) continue;
+
+    let entry = files.get(raw.filePath);
+    if (!entry) {
+      // Map insertion order gives first-touched ordering for free.
+      entry = {
+        filePath: raw.filePath,
+        op: raw.op,
+        editCount: 0,
+        linesAdded: 0,
+        linesRemoved: 0,
+        edits: [],
+        viaSubagent: false,
+      };
+      files.set(raw.filePath, entry);
+    }
+    if (OP_RANK[raw.op] > OP_RANK[entry.op]) entry.op = raw.op;
+    if (viaSubagent) entry.viaSubagent = true;
+
+    raw.fragments.forEach((frag, editIndex) => {
+      const { added, removed } = countLines(frag.oldStr, frag.newStr);
+      entry!.linesAdded += added;
+      entry!.linesRemoved += removed;
+      entry!.editCount += 1;
+      entry!.edits.push({
+        ...frag,
+        toolUseId: ev.toolUseId,
+        editIndex,
+        editRef: ev.toolUseId ? `${ev.toolUseId}-${editIndex}` : undefined,
+        viaSubagent,
+      });
+    });
+  }
+}
+
+/** Files mutated by one turn, in the order the turn first touched them. */
+export function aggregateTurnFileChanges(messages: ChatMessage[]): TurnFileChange[] {
+  const results = new Map<string, string>();
+  for (const msg of messages) collectResults(msg.events, results);
+
+  const files = new Map<string, TurnFileChange>();
+  for (const msg of messages) walk(msg.events, false, files, results);
+  return [...files.values()];
+}
+
+/**
+ * A turn spans every consecutive assistant message ending at `lastAssistantIndex`
+ * (text and tool segments arrive as separate messages).
+ */
+export function collectTurnMessages(messages: ChatMessage[], lastAssistantIndex: number): ChatMessage[] {
+  const out: ChatMessage[] = [];
+  for (let i = lastAssistantIndex; i >= 0 && messages[i]?.role === "assistant"; i--) {
+    out.unshift(messages[i]!);
+  }
+  return out;
+}

package/src/web/lib/clipboard.ts

@@ -0,0 +1,52 @@
+/**
+ * Clipboard write with an insecure-context fallback.
+ *
+ * `navigator.clipboard` only exists in a secure context (HTTPS or localhost).
+ * PPM is regularly reached over plain HTTP — LAN IP, Tailscale MagicDNS name —
+ * where the API is absent and every copy button silently no-ops. The legacy
+ * `execCommand` path keeps copy working on those origins.
+ */
+
+/** Copy text to the clipboard. Returns false only if both paths fail. */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+      // Denied permission or lost user activation — fall through to execCommand.
+    }
+  }
+  return legacyCopy(text);
+}
+
+function legacyCopy(text: string): boolean {
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  // Must stay rendered and non-zero sized: iOS Safari refuses to select a
+  // hidden or display:none element, which breaks the copy.
+  textarea.style.cssText =
+    "position:fixed;top:0;left:0;width:1px;height:1px;padding:0;border:none;opacity:0;";
+  document.body.appendChild(textarea);
+
+  const selection = document.getSelection();
+  const previousRange =
+    selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+
+  try {
+    textarea.focus();
+    textarea.select();
+    // setSelectionRange is what actually selects on iOS; select() alone is ignored.
+    textarea.setSelectionRange(0, text.length);
+    return document.execCommand("copy");
+  } catch {
+    return false;
+  } finally {
+    textarea.remove();
+    if (selection && previousRange) {
+      selection.removeAllRanges();
+      selection.addRange(previousRange);
+    }
+  }
+}

package/src/web/lib/report-bug.ts

@@ -60,16 +60,6 @@ export function openGithubIssue(body: string) {
   window.open(url, "_blank");
 }
 
-/** Copy text to clipboard */
-export async function copyToClipboard(text: string): Promise<boolean> {
-  try {
-    await navigator.clipboard.writeText(text);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
 /** Open bug report popup globally via custom event */
 export function openBugReportPopup(
   version: string | null,

package/src/web/styles/globals.css

@@ -145,6 +145,22 @@ samp,
   font-feature-settings: "liga" 0, "calt" 0;
 }
 
+/* Jump-target flash, set imperatively by jump-to-edit.ts and cleared after 1400ms.
+   Attribute-driven rather than React state so highlighting one card in a long
+   transcript does not re-render the rest. */
+[data-flash="card"] {
+  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
+    0 0 22px -6px color-mix(in srgb, var(--accent) 50%, transparent);
+  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
+}
+
+[data-flash="edit"] {
+  background: color-mix(in srgb, var(--accent) 13%, transparent);
+  transition: background 200ms ease-out;
+}
+
 /* Scrollbar styling — thin & unobtrusive */
 ::-webkit-scrollbar {
   width: 5px;