@hienlh/ppm 0.17.26 → 0.17.28

package/src/web/components/chat/message-list.tsx

@@ -39,10 +39,12 @@ import {
   Pencil,
 } from "lucide-react";
 import { ChatWelcome } from "./chat-welcome";
+import { ChatScrollNav } from "./chat-scroll-nav";
 import { MessageActionBar, ActionButton } from "./message-action-bar";
 import { VersionSwitcher } from "./version-switcher";
 import type { VersionGroup } from "../../../types/api";
 import { QuestionCard } from "./question-card";
+import { parseUserMessage, type SystemTag } from "./user-message-parse";
 import type { Question } from "./question-card";
 import { useTabStore } from "@/stores/tab-store";
 import { api } from "@/lib/api-client";
@@ -387,94 +389,7 @@ export function MessageList({
           )}
         </div>
       </div>
-      <ScrollNavButtons scrollElement={scrollEl} userIndices={userIndices} scrollToBottom={scrollToBottom} />
-    </div>
-  );
-}
-
-/**
- * Floating bottom-right navigation between the user's own messages. Every bubble is
- * now in the real DOM (no virtualization), so navigation queries the rendered rows by
- * their `data-msg-index` and scrolls to the target. Up jumps to the nearest user
- * message above the top of the viewport; Down jumps to the nearest one below, or to
- * the very bottom when none remain.
- */
-function ScrollNavButtons({ scrollElement, userIndices, scrollToBottom }: {
-  scrollElement: HTMLDivElement | null;
-  userIndices: number[];
-  scrollToBottom: (opts?: { animation?: "instant" | "smooth" }) => void | Promise<boolean> | boolean;
-}) {
-  const [hasAbove, setHasAbove] = useState(false);
-  const [atBottom, setAtBottom] = useState(true);
-
-  // Top of a row in the scroll container's content coordinates (scrollTop space).
-  const rowTop = (el: HTMLElement, row: HTMLElement) =>
-    row.getBoundingClientRect().top - el.getBoundingClientRect().top + el.scrollTop;
-
-  const userRows = useCallback((el: HTMLElement) =>
-    Array.from(el.querySelectorAll<HTMLElement>("[data-msg-index]"))
-      .filter((r) => userIndices.includes(Number(r.dataset.msgIndex))),
-    [userIndices]);
-
-  useEffect(() => {
-    const el = scrollElement;
-    if (!el) return;
-    let raf = 0;
-    const recompute = () => {
-      const top = el.scrollTop;
-      const above = userRows(el).some((r) => rowTop(el, r) < top - 4);
-      setHasAbove((prev) => (prev === above ? prev : above));
-      const bottom = el.scrollHeight - el.scrollTop - el.clientHeight < 8;
-      setAtBottom((prev) => (prev === bottom ? prev : bottom));
-    };
-    const schedule = () => {
-      if (raf) cancelAnimationFrame(raf);
-      raf = requestAnimationFrame(recompute);
-    };
-    recompute();
-    el.addEventListener("scroll", schedule, { passive: true });
-    const ro = new ResizeObserver(schedule);
-    ro.observe(el);
-    return () => {
-      if (raf) cancelAnimationFrame(raf);
-      el.removeEventListener("scroll", schedule);
-      ro.disconnect();
-    };
-  }, [scrollElement, userRows]);
-
-  const goUp = useCallback(() => {
-    const el = scrollElement;
-    if (!el) return;
-    const top = el.scrollTop;
-    let target: number | undefined;
-    for (const r of userRows(el)) {
-      const t = rowTop(el, r);
-      if (t < top - 4) target = t; // ascending — keep the last one still above
-      else break;
-    }
-    if (target != null) el.scrollTo({ top: target, behavior: "auto" });
-  }, [scrollElement, userRows]);
-
-  const goDown = useCallback(() => {
-    const el = scrollElement;
-    if (!el) return;
-    const top = el.scrollTop;
-    const next = userRows(el).map((r) => rowTop(el, r)).find((t) => t > top + 4);
-    if (next != null) el.scrollTo({ top: next, behavior: "auto" });
-    else scrollToBottom({ animation: "instant" });
-  }, [scrollElement, userRows, scrollToBottom]);
-
-  const btnClass =
-    "size-8 flex items-center justify-center rounded-full bg-surface-elevated/60 border border-border/60 text-text-secondary shadow-md backdrop-blur-sm transition-all hover:bg-surface-elevated hover:text-foreground disabled:opacity-30 disabled:cursor-default disabled:hover:bg-surface-elevated/60 disabled:hover:text-text-secondary";
-
-  return (
-    <div className="absolute bottom-4 right-4 z-10 flex flex-col gap-2">
-      <button type="button" onClick={goUp} disabled={!hasAbove} aria-label="Jump to previous message" className={btnClass}>
-        <ChevronUp className="size-4" />
-      </button>
-      <button type="button" onClick={goDown} disabled={atBottom} aria-label="Jump to next message" className={btnClass}>
-        <ChevronDown className="size-4" />
-      </button>
+      <ChatScrollNav scrollElement={scrollEl} userIndices={userIndices} scrollToBottom={scrollToBottom} />
     </div>
   );
 }
@@ -568,100 +483,6 @@ const MessageBubble = memo(function MessageBubble({ message, isStreaming, isLast
 /** Image extensions that can be previewed inline */
 const IMAGE_EXTS = new Set([".png", ".jpg", ".jpeg", ".gif", ".webp"]);
 
-interface SystemTag {
-  name: string;
-  label: string;
-  content: string;
-}
-
-const TAG_LABELS: Record<string, string> = {
-  "system-reminder": "Context",
-  "claudeMd": "CLAUDE.md",
-  "gitStatus": "Git Status",
-  "currentDate": "Date",
-  "fast_mode_info": "Fast Mode",
-  "available-deferred-tools": "Tools",
-  "task-notification": "Task Result",
-  "environment_details": "Environment",
-  "local-command-caveat": "System",
-};
-
-/** Extract system-injected XML tags into structured objects + clean text */
-function extractSystemTags(text: string): { cleanText: string; tags: SystemTag[] } {
-  const tags: SystemTag[] = [];
-  const tagPattern = /<(system-reminder|available-deferred-tools|antml:[\w-]+|fast_mode_info|claudeMd|gitStatus|currentDate|task-notification|environment_details|local-command-caveat)[^>]*>([\s\S]*?)<\/\1>/g;
-  let match;
-  while ((match = tagPattern.exec(text)) !== null) {
-    const name = match[1]!;
-    tags.push({
-      name,
-      label: TAG_LABELS[name] ?? name.replace(/^antml:/, "").replace(/-/g, " "),
-      content: match[2]!.trim(),
-    });
-  }
-  const cleanText = text.replace(tagPattern, "").trim();
-  return { cleanText, tags };
-}
-
-/** Extract slash command tags from user message content */
-interface SlashCommand {
-  name: string;
-  args?: string;
-}
-function parseCommandTags(text: string): { command: SlashCommand | null; cleanText: string } {
-  const nameMatch = text.match(/<command-name>([\s\S]*?)<\/command-name>/);
-  if (!nameMatch) return { command: null, cleanText: text };
-  const name = nameMatch[1]!.trim();
-  const argsMatch = text.match(/<command-args>([\s\S]*?)<\/command-args>/);
-  const args = argsMatch?.[1]?.trim() || undefined;
-  // Strip all command tags regardless of order
-  const cleanText = text
-    .replace(/<command-name>[\s\S]*?<\/command-name>/g, "")
-    .replace(/<command-message>[\s\S]*?<\/command-message>/g, "")
-    .replace(/<command-args>[\s\S]*?<\/command-args>/g, "")
-    .trim();
-  return { command: { name, args }, cleanText };
-}
-
-/** Detect the leading "Use the <agent> agent to" delegation prompt, split off as a chip */
-function parseAgentTag(text: string): { agent: string | null; cleanText: string } {
-  const m = text.match(/^Use the (\S+) agent to\s?/);
-  if (!m) return { agent: null, cleanText: text };
-  return { agent: m[1]!, cleanText: text.slice(m[0].length) };
-}
-
-/** Extract the IDE-injected <ide_opened_file> context tag — returns the open file path + cleaned text */
-function parseIdeOpenedFile(text: string): { idePath: string | null; cleanText: string } {
-  const tagRe = /<ide_opened_file>([\s\S]*?)<\/ide_opened_file>/g;
-  const m = tagRe.exec(text);
-  if (!m) return { idePath: null, cleanText: text };
-  // Inner format: "The user opened the file <path> in the IDE. ..."
-  const pathMatch = m[1]!.match(/opened the file (.+?) in the IDE/);
-  const idePath = pathMatch?.[1]?.trim() ?? null;
-  const cleanText = text.replace(/<ide_opened_file>[\s\S]*?<\/ide_opened_file>/g, "").trim();
-  return { idePath, cleanText };
-}
-
-/** Parse user message content, extracting attached file paths and the actual text */
-function parseUserAttachments(content: string): { files: string[]; text: string } {
-  // Match: [Attached file: /path] or [Attached files:\n/path1\n/path2\n]
-  // Trailing newlines are optional — an attachment-only message has the marker
-  // trimmed to the end of the string (extractTerminalBlocks trims), so the
-  // separator newlines may be absent.
-  const singleMatch = content.match(/^\[Attached file: (.+?)\]\n*/);
-  if (singleMatch) {
-    return { files: [singleMatch[1]!], text: content.slice(singleMatch[0].length) };
-  }
-
-  const multiMatch = content.match(/^\[Attached files:\n([\s\S]+?)\]\n*/);
-  if (multiMatch) {
-    const files = multiMatch[1]!.split("\n").map((l) => l.trim()).filter(Boolean);
-    return { files, text: content.slice(multiMatch[0].length) };
-  }
-
-  return { files: [], text: content };
-}
-
 /** Build a preview URL for an uploaded file (served from /chat/uploads/:filename) */
 function uploadPreviewUrl(filePath: string, projectName?: string): string {
   const filename = basename(filePath);
@@ -683,19 +504,6 @@ function isPdfPath(path: string): boolean {
 /** Detect if tags contain system-injected content (not real user input) */
 const SYSTEM_TAG_NAMES = new Set(["task-notification", "environment_details", "local-command-caveat"]);
 
-/** Extract leading terminal code fences from message text */
-function extractTerminalBlocks(text: string): { blocks: string[]; remainingText: string } {
-  const blocks: string[] = [];
-  let remaining = text;
-  const re = /^```(?:bash|sh|shell|zsh)\n([\s\S]*?)\n```\s*(?:\n\n?)?/;
-  let match;
-  while ((match = remaining.match(re)) !== null) {
-    blocks.push(match[1]!);
-    remaining = remaining.slice(match[0].length);
-  }
-  return { blocks, remainingText: remaining.trim() };
-}
-
 /** User message bubble — full width, collapsible, with system tag badges */
 function UserBubble({ content, messageId, timestamp, projectName, onFork, onEdit, isEditing, sessionId, providerId, versionGroup, onNavigateVersion, versionNavDisabled }: {
   content: string;
@@ -711,21 +519,10 @@ function UserBubble({ content, messageId, timestamp, projectName, onFork, onEdit
   onNavigateVersion?: (sessionId: string) => void;
   versionNavDisabled?: boolean;
 }) {
-  const { files, text, tags, command, terminalBlocks, idePath, agent } = useMemo(() => {
-    const { idePath, cleanText: afterIde } = parseIdeOpenedFile(content);
-    const { blocks, remainingText: afterBlocks } = extractTerminalBlocks(afterIde);
-    const parsed = parseUserAttachments(afterBlocks);
-    // Strip local-command-stdout/stderr tags but keep their content as plain text
-    const withoutCmdOutput = parsed.text
-      .replace(/<local-command-(?:stdout|stderr)>([\s\S]*?)<\/local-command-(?:stdout|stderr)>/g, "$1");
-    const { cleanText: noSysTags, tags } = extractSystemTags(withoutCmdOutput);
-    const { command, cleanText } = parseCommandTags(noSysTags);
-    const { agent, cleanText: afterAgent } = parseAgentTag(cleanText);
-    const bodyText = command?.args
-      ? (afterAgent ? `${command.args}\n\n${afterAgent}` : command.args)
-      : afterAgent;
-    return { files: parsed.files, text: bodyText, tags, command, terminalBlocks: blocks, idePath, agent };
-  }, [content]);
+  const { files, text, tags, command, terminalBlocks, idePath, agent } = useMemo(
+    () => parseUserMessage(content),
+    [content],
+  );
 
   const isSystemContext = tags.some((t) => SYSTEM_TAG_NAMES.has(t.name));
 

package/src/web/components/chat/user-message-parse.ts

@@ -0,0 +1,159 @@
+/**
+ * Parsing for stored user-message content.
+ *
+ * What lands in the transcript is not what the user typed: the composer and the
+ * runtime wrap it with attachment markers, slash-command tags, an agent
+ * delegation prefix, and IDE/system context tags. Both the transcript bubble and
+ * the composer's history recall need the same decomposition, so it lives here.
+ */
+
+export interface SystemTag {
+  name: string;
+  label: string;
+  content: string;
+}
+
+export interface SlashCommand {
+  name: string;
+  args?: string;
+}
+
+const TAG_LABELS: Record<string, string> = {
+  "system-reminder": "Context",
+  claudeMd: "CLAUDE.md",
+  gitStatus: "Git Status",
+  currentDate: "Date",
+  fast_mode_info: "Fast Mode",
+  "available-deferred-tools": "Tools",
+  "task-notification": "Task Result",
+  environment_details: "Environment",
+  "local-command-caveat": "System",
+};
+
+/** Extract system-injected XML tags into structured objects + clean text */
+export function extractSystemTags(text: string): { cleanText: string; tags: SystemTag[] } {
+  const tags: SystemTag[] = [];
+  const tagPattern = /<(system-reminder|available-deferred-tools|antml:[\w-]+|fast_mode_info|claudeMd|gitStatus|currentDate|task-notification|environment_details|local-command-caveat)[^>]*>([\s\S]*?)<\/\1>/g;
+  let match;
+  while ((match = tagPattern.exec(text)) !== null) {
+    const name = match[1]!;
+    tags.push({
+      name,
+      label: TAG_LABELS[name] ?? name.replace(/^antml:/, "").replace(/-/g, " "),
+      content: match[2]!.trim(),
+    });
+  }
+  const cleanText = text.replace(tagPattern, "").trim();
+  return { cleanText, tags };
+}
+
+/** Extract slash command tags from user message content */
+export function parseCommandTags(text: string): { command: SlashCommand | null; cleanText: string } {
+  const nameMatch = text.match(/<command-name>([\s\S]*?)<\/command-name>/);
+  if (!nameMatch) return { command: null, cleanText: text };
+  const name = nameMatch[1]!.trim();
+  const argsMatch = text.match(/<command-args>([\s\S]*?)<\/command-args>/);
+  const args = argsMatch?.[1]?.trim() || undefined;
+  // Strip all command tags regardless of order
+  const cleanText = text
+    .replace(/<command-name>[\s\S]*?<\/command-name>/g, "")
+    .replace(/<command-message>[\s\S]*?<\/command-message>/g, "")
+    .replace(/<command-args>[\s\S]*?<\/command-args>/g, "")
+    .trim();
+  return { command: { name, args }, cleanText };
+}
+
+/** Detect the leading "Use the <agent> agent to" delegation prompt, split off as a chip */
+export function parseAgentTag(text: string): { agent: string | null; cleanText: string } {
+  const m = text.match(/^Use the (\S+) agent to\s?/);
+  if (!m) return { agent: null, cleanText: text };
+  return { agent: m[1]!, cleanText: text.slice(m[0].length) };
+}
+
+/** Extract the IDE-injected <ide_opened_file> context tag — returns the open file path + cleaned text */
+export function parseIdeOpenedFile(text: string): { idePath: string | null; cleanText: string } {
+  const tagRe = /<ide_opened_file>([\s\S]*?)<\/ide_opened_file>/g;
+  const m = tagRe.exec(text);
+  if (!m) return { idePath: null, cleanText: text };
+  // Inner format: "The user opened the file <path> in the IDE. ..."
+  const pathMatch = m[1]!.match(/opened the file (.+?) in the IDE/);
+  const idePath = pathMatch?.[1]?.trim() ?? null;
+  const cleanText = text.replace(/<ide_opened_file>[\s\S]*?<\/ide_opened_file>/g, "").trim();
+  return { idePath, cleanText };
+}
+
+/** Parse user message content, extracting attached file paths and the actual text */
+export function parseUserAttachments(content: string): { files: string[]; text: string } {
+  // Match: [Attached file: /path] or [Attached files:\n/path1\n/path2\n]
+  // Trailing newlines are optional — an attachment-only message has the marker
+  // trimmed to the end of the string (extractTerminalBlocks trims), so the
+  // separator newlines may be absent.
+  const singleMatch = content.match(/^\[Attached file: (.+?)\]\n*/);
+  if (singleMatch) {
+    return { files: [singleMatch[1]!], text: content.slice(singleMatch[0].length) };
+  }
+
+  const multiMatch = content.match(/^\[Attached files:\n([\s\S]+?)\]\n*/);
+  if (multiMatch) {
+    const files = multiMatch[1]!.split("\n").map((l) => l.trim()).filter(Boolean);
+    return { files, text: content.slice(multiMatch[0].length) };
+  }
+
+  return { files: [], text: content };
+}
+
+/** Extract leading terminal code fences from message text */
+export function extractTerminalBlocks(text: string): { blocks: string[]; remainingText: string } {
+  const blocks: string[] = [];
+  let remaining = text;
+  const re = /^```(?:bash|sh|shell|zsh)\n([\s\S]*?)\n```\s*(?:\n\n?)?/;
+  let match;
+  while ((match = remaining.match(re)) !== null) {
+    blocks.push(match[1]!);
+    remaining = remaining.slice(match[0].length);
+  }
+  return { blocks, remainingText: remaining.trim() };
+}
+
+export interface ParsedUserMessage {
+  files: string[];
+  /** Body text with the slash-command args folded in, for transcript display */
+  text: string;
+  /** Body text alone, with the command args kept separate — for recomposing input */
+  body: string;
+  tags: SystemTag[];
+  command: SlashCommand | null;
+  terminalBlocks: string[];
+  idePath: string | null;
+  agent: string | null;
+}
+
+/** Full decomposition of a stored user message, outermost wrapper first. */
+export function parseUserMessage(content: string): ParsedUserMessage {
+  const { idePath, cleanText: afterIde } = parseIdeOpenedFile(content);
+  const { blocks, remainingText: afterBlocks } = extractTerminalBlocks(afterIde);
+  const parsed = parseUserAttachments(afterBlocks);
+  // Strip local-command-stdout/stderr tags but keep their content as plain text
+  const withoutCmdOutput = parsed.text
+    .replace(/<local-command-(?:stdout|stderr)>([\s\S]*?)<\/local-command-(?:stdout|stderr)>/g, "$1");
+  const { cleanText: noSysTags, tags } = extractSystemTags(withoutCmdOutput);
+  const { command, cleanText } = parseCommandTags(noSysTags);
+  const { agent, cleanText: body } = parseAgentTag(cleanText);
+  const text = command?.args ? (body ? `${command.args}\n\n${body}` : command.args) : body;
+  return { files: parsed.files, text, body, tags, command, terminalBlocks: blocks, idePath, agent };
+}
+
+/**
+ * Rebuild what the user originally typed, for prefilling the composer on history
+ * recall. Attachments, terminal blocks, and injected context are dropped — they
+ * cannot be re-attached from a keystroke — while a slash command is restored to
+ * its typed `/name args` form and the agent comes back as a chip.
+ */
+export function toComposerDraft(content: string): { agent: string | null; text: string } {
+  const { agent, body, command } = parseUserMessage(content);
+  if (!command) return { agent, text: body };
+  // Stored names appear both with and without the leading slash — normalise to one.
+  const name = command.name.replace(/^\/+/, "");
+  const typed = `/${name}${command.args ? ` ${command.args}` : ""}`;
+  return { agent, text: body ? `${typed}\n\n${body}` : typed };
+}

package/src/web/hooks/use-global-keybindings.ts

@@ -34,6 +34,15 @@ export function useGlobalKeybindings() {
     function onCompositionStart() { composing = true; }
     function onCompositionEnd() { composing = false; }
 
+    /** Chat transcript jumps. Returns true when the event was consumed. */
+    function dispatchChatNav(e: KeyboardEvent, m: (ev: KeyboardEvent, id: string) => boolean) {
+      const dir = m(e, "chat-nav-prev") ? "prev" : m(e, "chat-nav-next") ? "next" : null;
+      if (!dir) return false;
+      e.preventDefault();
+      window.dispatchEvent(new CustomEvent(`chat-nav-${dir}`));
+      return true;
+    }
+
     function handler(e: KeyboardEvent) {
       // Track whether Shift is pressed alone (not as a modifier for another key)
       if (e.type === "keydown" && e.key === "Shift") {
@@ -84,6 +93,9 @@ export function useGlobalKeybindings() {
           e.preventDefault();
           usePanelStore.getState().toggleDock();
         }
+        // The composer holds focus for most of a chat session, so the transcript
+        // jumps have to survive this early return or they are unreachable.
+        dispatchChatNav(e, m);
         return;
       }
 
@@ -184,6 +196,9 @@ export function useGlobalKeybindings() {
         return;
       }
 
+      // Chat transcript navigation — the focused panel's chat tab picks these up
+      if (dispatchChatNav(e, match)) return;
+
       // Compare Files — seed A from active editor tab if applicable, then open picker
       if (match(e, "compare-files")) {
         e.preventDefault();

package/src/web/lib/owns-global-shortcut.ts

@@ -0,0 +1,21 @@
+import { usePanelStore } from "@/stores/panel-store";
+
+/**
+ * Decides whether a tab should act on a window-level keyboard shortcut.
+ *
+ * Every tab stays mounted: tab-pool reparents them and hides inactive ones with
+ * `display: none`, and a split grid can show several panels at once. A global
+ * shortcut must therefore resolve to exactly one tab — the active tab of the
+ * focused panel. Checking visibility alone would match every pane in a split,
+ * so two open chats would both react to a single key press.
+ *
+ * Pass any node that lives inside the claiming tab.
+ */
+export function ownsGlobalShortcut(el: HTMLElement | null | undefined): boolean {
+  if (!el) return false;
+  const tabId = el.closest<HTMLElement>("[data-tab-pool-id]")?.dataset.tabPoolId;
+  // Not rendered through the tab pool (dialogs, previews) — visibility is enough.
+  if (!tabId) return el.offsetParent !== null;
+  const { panels, focusedPanelId } = usePanelStore.getState();
+  return panels[focusedPanelId]?.activeTabId === tabId;
+}

package/src/web/stores/keybindings-store.ts

@@ -38,6 +38,8 @@ export const KEY_ACTIONS: KeyAction[] = [
   { id: "open-git-status", label: "Git Status (sidebar)", category: "tabs", defaultKey: "Mod+Shift+E" },
   { id: "open-search", label: "Search Files (sidebar)", category: "tabs", defaultKey: "Mod+Shift+F" },
   { id: "voice-input", label: "Voice Input", category: "general", defaultKey: "Mod+Shift+V", note: "Toggle speech-to-text in chat" },
+  { id: "chat-nav-prev", label: "Previous Chat Message", category: "general", defaultKey: "Alt+ArrowUp", note: "Jump to your previous message in the visible chat transcript" },
+  { id: "chat-nav-next", label: "Next Chat Message", category: "general", defaultKey: "Alt+ArrowDown", note: "Jump to your next message in the visible chat transcript" },
   { id: "compare-files", label: "Compare Files...", category: "general", defaultKey: "Mod+Alt+D", note: "Open file-compare picker (seeds active file as A)" },
   // Projects — Mod+1..9
   ...Array.from({ length: 9 }, (_, i) => ({