Merge branch 'main' into posthog-code/mobile-plan-approval-model-swap

Generated-By: PostHog Code
Task-Id: 25776734-2103-44a9-8491-bb67d9f0422a

Author: Gilbert09

packages/core/src/billing/spendAnalysisFormat.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { formatTokens } from "./spendAnalysisFormat";
+
+describe("formatTokens", () => {
+  it.each([
+    [0, "0"],
+    [999, "999"],
+    [1_000, "1k"],
+    [108_400, "108k"],
+    [1_500_000, "1.5M"],
+    [999_949_999, "999.9M"],
+    [1_000_000_000, "1.0B"],
+    [2_449_300_000, "2.4B"],
+  ])("formats %d as %s", (input, expected) => {
+    expect(formatTokens(input)).toBe(expected);
+  });
+});

packages/core/src/billing/spendAnalysisFormat.ts

@@ -6,6 +6,7 @@ export function formatUsd(amount: number): string {
 }
 
 export function formatTokens(n: number): string {
+  if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)}B`;
   if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
   if (n >= 1_000) return `${(n / 1_000).toFixed(0)}k`;
   return n.toString();

packages/core/src/code-review/reviewPrompts.ts

@@ -38,6 +38,18 @@ export function buildInlineCommentPrompt(
   return `In file <file path="${escapedPath}" />, ${lineRef} (${sideLabel}):\n\n${comment}`;
 }
 
+/** File + line-range reference with no diff side label (not a review comment). */
+export function buildFileLineReferencePrompt(
+  filePath: string,
+  startLine: number,
+  endLine: number,
+  comment: string,
+): string {
+  const lineRef = formatLineRef(startLine, endLine);
+  const escapedPath = escapeXmlAttr(filePath);
+  return `In file <file path="${escapedPath}" />, ${lineRef}:\n\n${comment}`;
+}
+
 export function buildBatchedInlineCommentsPrompt(
   drafts: DraftComment[],
 ): string {

packages/shared/src/analytics-events.ts

@@ -51,6 +51,8 @@ export type CommandMenuAction =
   | "go-forward"
   | "open-task"
   | "open-channel"
+  | "search-files"
+  | "open-file"
   | "reload-window"
   | "show-log-folder";
 

packages/ui/src/features/code-editor/components/CodeEditorPanel.tsx

@@ -6,6 +6,8 @@ import {
   selectFileSource,
 } from "@posthog/core/code-editor/fileSource";
 import { getRelativePath } from "@posthog/core/code-editor/pathUtils";
+import { buildFileLineReferencePrompt } from "@posthog/core/code-review/reviewPrompts";
+import { xmlToContent } from "@posthog/core/message-editor/content";
 import {
   getImageMimeType,
   isRasterImageFile,
@@ -21,6 +23,7 @@ import { PanelMessage } from "../../../primitives/PanelMessage";
 import { SafeImagePreview } from "../../../primitives/SafeImagePreview";
 import { Tooltip } from "../../../primitives/Tooltip";
 import { openExternalUrl } from "../../../shell/openExternal";
+import { useDraftStore } from "../../message-editor/draftStore";
 import { usePanelLayoutStore } from "../../panels/panelLayoutStore";
 import { useFileTreeStore } from "../../right-sidebar/fileTreeStore";
 import { useCwd } from "../../sidebar/useCwd";
@@ -35,6 +38,10 @@ import {
 import { useFileEnrichment } from "../hooks/useFileEnrichment";
 import { CodeMirrorEditor } from "./CodeMirrorEditor";
 import { EnrichmentPopover } from "./EnrichmentPopover";
+import {
+  SelectionCommentOverlay,
+  useSelectionComposer,
+} from "./SelectionCommentOverlay";
 
 interface CodeEditorPanelProps {
   taskId: string;
@@ -114,6 +121,23 @@ export function CodeEditorPanel({
   const expandToFile = useFileTreeStore((s) => s.expandToFile);
   const [copied, setCopied] = useState(false);
 
+  const composer = useSelectionComposer();
+  const handleAddSelectionToChat = useCallback(
+    (startLine: number, endLine: number, text: string) => {
+      const prompt = buildFileLineReferencePrompt(
+        absolutePath,
+        startLine,
+        endLine,
+        text,
+      );
+      // sessionId === taskId for the in-task chat composer.
+      useDraftStore
+        .getState()
+        .actions.insertPendingContent(taskId, xmlToContent(prompt));
+    },
+    [absolutePath, taskId],
+  );
+
   const handleMarkdownLinkClick = useCallback(
     (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
       e.preventDefault();
@@ -267,8 +291,17 @@ export function CodeEditorPanel({
         relativePath={filePath}
         readOnly
         enrichment={enrichment}
+        highlightSelectedLines
+        onSelectionChange={composer.onSelectionChange}
       />
       <EnrichmentPopover />
+      <SelectionCommentOverlay
+        selection={composer.selection}
+        open={composer.open}
+        filePath={filePath}
+        onSubmit={handleAddSelectionToChat}
+        onDismiss={composer.close}
+      />
     </Box>
   );
 

packages/ui/src/features/code-editor/components/CodeMirrorEditor.tsx

@@ -1,19 +1,60 @@
 import { openSearchPanel } from "@codemirror/search";
-import { EditorView } from "@codemirror/view";
+import { RangeSetBuilder, StateField } from "@codemirror/state";
+import { Decoration, type DecorationSet, EditorView } from "@codemirror/view";
 import type { SerializedEnrichment } from "@posthog/shared";
 import { Box, Flex, Text } from "@radix-ui/themes";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { setEnrichmentEffect } from "../extensions/postHogEnrichment";
 import { useCodeMirror } from "../hooks/useCodeMirror";
 import { useEditorExtensions } from "../hooks/useEditorExtensions";
 import { usePendingScrollStore } from "../pendingScrollStore";
 
+const selectedLineDecoration = Decoration.line({ class: "cm-selected-lines" });
+const selectedLinesField = StateField.define<DecorationSet>({
+  create: () => Decoration.none,
+  update(_value, tr) {
+    const sel = tr.state.selection.main;
+    if (sel.empty) return Decoration.none;
+    const builder = new RangeSetBuilder<Decoration>();
+    const from = tr.state.doc.lineAt(sel.from).number;
+    const to = tr.state.doc.lineAt(sel.to).number;
+    for (let n = from; n <= to; n++) {
+      const pos = tr.state.doc.line(n).from;
+      builder.add(pos, pos, selectedLineDecoration);
+    }
+    return builder.finish();
+  },
+  provide: (f) => EditorView.decorations.from(f),
+});
+const selectedLinesTheme = EditorView.theme({
+  ".cm-selected-lines": {
+    backgroundColor: "var(--accent-a3)",
+    boxShadow: "inset 2px 0 0 0 var(--accent-8)",
+  },
+  "& .cm-selectionBackground, &.cm-focused .cm-selectionBackground": {
+    background: "transparent !important",
+  },
+});
+
+export interface EditorSelection {
+  text: string;
+  /** 1-based line numbers. */
+  fromLine: number;
+  toLine: number;
+  /** Viewport pixel anchor below the selection, or null when off-screen. */
+  anchor: { top: number; left: number } | null;
+}
+
 interface CodeMirrorEditorProps {
   content: string;
   filePath?: string;
   relativePath?: string;
   readOnly?: boolean;
   enrichment?: SerializedEnrichment | null;
+  /** Fires on every selection (or doc) change with the current selection. */
+  onSelectionChange?: (selection: EditorSelection) => void;
+  /** Highlight the active selection as full lines (code-review style). */
+  highlightSelectedLines?: boolean;
 }
 
 export function CodeMirrorEditor({
@@ -22,9 +63,66 @@ export function CodeMirrorEditor({
   relativePath,
   readOnly = false,
   enrichment,
+  onSelectionChange,
+  highlightSelectedLines = false,
 }: CodeMirrorEditorProps) {
   const enrichmentEnabled = enrichment !== undefined;
-  const extensions = useEditorExtensions(filePath, readOnly, enrichmentEnabled);
+  const baseExtensions = useEditorExtensions(
+    filePath,
+    readOnly,
+    enrichmentEnabled,
+  );
+
+  // Ref-stable listener: a changing extension would tear down the editor.
+  const onSelectionChangeRef = useRef(onSelectionChange);
+  onSelectionChangeRef.current = onSelectionChange;
+  const selectionExtension = useMemo(
+    () =>
+      EditorView.updateListener.of((update) => {
+        const cb = onSelectionChangeRef.current;
+        if (!cb) return;
+        const changed = update.selectionSet || update.docChanged;
+        // Also refire on scroll/resize so the anchor tracks the selection.
+        const moved = update.viewportChanged || update.geometryChanged;
+        if (!changed && !moved) return;
+        const sel = update.state.selection.main;
+        const doc = update.state.doc;
+        if (sel.empty) {
+          // No coords for an empty caret — just notify so consumers can hide.
+          if (changed) {
+            cb({
+              text: "",
+              fromLine: doc.lineAt(sel.from).number,
+              toLine: doc.lineAt(sel.to).number,
+              anchor: null,
+            });
+          }
+          return;
+        }
+        const endRect = update.view.coordsAtPos(sel.to);
+        const startRect = update.view.coordsAtPos(doc.lineAt(sel.to).from);
+        cb({
+          text: doc.sliceString(sel.from, sel.to),
+          fromLine: doc.lineAt(sel.from).number,
+          toLine: doc.lineAt(sel.to).number,
+          anchor: endRect
+            ? { top: endRect.bottom, left: (startRect ?? endRect).left }
+            : null,
+        });
+      }),
+    [],
+  );
+  const extensions = useMemo(
+    () => [
+      ...baseExtensions,
+      selectionExtension,
+      ...(highlightSelectedLines
+        ? [selectedLinesField, selectedLinesTheme]
+        : []),
+    ],
+    [baseExtensions, selectionExtension, highlightSelectedLines],
+  );
+
   const options = useMemo(
     () => ({ doc: content, extensions, filePath }),
     [content, extensions, filePath],

packages/ui/src/features/code-editor/components/SelectionCommentOverlay.tsx

@@ -0,0 +1,108 @@
+import { Plus } from "@phosphor-icons/react";
+import { Button } from "@posthog/quill";
+import type { EditorSelection } from "@posthog/ui/features/code-editor/components/CodeMirrorEditor";
+import { CommentAnnotation } from "@posthog/ui/features/code-review/components/CommentAnnotation";
+import { Tooltip } from "@radix-ui/themes";
+import { useCallback, useState } from "react";
+import { createPortal } from "react-dom";
+
+/** Selection state for the "select lines → add to chat" overlay. */
+export function useSelectionComposer() {
+  const [selection, setSelection] = useState<EditorSelection | null>(null);
+  const [open, setOpen] = useState(false);
+  const onSelectionChange = useCallback((next: EditorSelection) => {
+    setSelection(next);
+    setOpen(next.text.trim().length > 0);
+  }, []);
+  const close = useCallback(() => setOpen(false), []);
+  return { selection, open, onSelectionChange, close };
+}
+
+interface SelectionCommentOverlayProps {
+  selection: EditorSelection | null;
+  open: boolean;
+  filePath: string;
+  onSubmit: (startLine: number, endLine: number, text: string) => void;
+  onDismiss: () => void;
+}
+
+/**
+ * Selecting lines shows an explicit "+" button (like the code-review gutter);
+ * clicking it opens the `CommentAnnotation` composer. Shared by the new-task
+ * preview and the in-task editor.
+ */
+export function SelectionCommentOverlay({
+  selection,
+  open,
+  filePath,
+  onSubmit,
+  onDismiss,
+}: SelectionCommentOverlayProps) {
+  if (!open || !selection?.anchor) return null;
+  // Key by the range so a fresh selection remounts the card back to the "+".
+  return (
+    <SelectionComposerCard
+      key={`${selection.fromLine}:${selection.toLine}`}
+      anchor={selection.anchor}
+      fromLine={selection.fromLine}
+      toLine={selection.toLine}
+      filePath={filePath}
+      onSubmit={onSubmit}
+      onDismiss={onDismiss}
+    />
+  );
+}
+
+function SelectionComposerCard({
+  anchor,
+  fromLine,
+  toLine,
+  filePath,
+  onSubmit,
+  onDismiss,
+}: {
+  anchor: { top: number; left: number };
+  fromLine: number;
+  toLine: number;
+  filePath: string;
+  onSubmit: (startLine: number, endLine: number, text: string) => void;
+  onDismiss: () => void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const style = { top: anchor.top + 4, left: anchor.left };
+
+  if (!expanded) {
+    return createPortal(
+      <Tooltip content="Add to chat">
+        <Button
+          type="button"
+          variant="primary"
+          size="icon-sm"
+          aria-label="Add selection to chat"
+          className="fixed z-50 shadow-sm"
+          style={style}
+          onClick={() => setExpanded(true)}
+        >
+          <Plus size={14} weight="bold" />
+        </Button>
+      </Tooltip>,
+      document.body,
+    );
+  }
+
+  return createPortal(
+    <div
+      className="fixed z-50 w-[420px] max-w-[80vw] rounded-md border border-gray-5 bg-gray-2 shadow-lg"
+      style={style}
+    >
+      <CommentAnnotation
+        filePath={filePath}
+        startLine={fromLine}
+        endLine={toLine}
+        onDismiss={onDismiss}
+        onSubmitText={(text) => onSubmit(fromLine, toLine, text)}
+      />
+    </div>,
+    document.body,
+  );
+}