Implemented toolbar when hovering over gutter

Author: Relrin

AGENTS.md

@@ -249,7 +249,7 @@ Append new entry points under the matching sub-heading. Keep entries to one line
 - **Editor view** — `packages/ui/src/features/editor/`. A real, editable **CodeMirror 6** editor on nav screen `editor`. `PidEditorView` composes the tab strip (`PidEditorTabBar`), styled breadcrumb (`PidEditorBreadcrumb`), and the `CodeMirrorEditor` host. Files open from a single-click in the file tree (`PidFileTree`'s `onSelectionChange` → `useEditorStore.openFile` + `setScreen("editor")`).
 - **State** — `useEditorStore.ts`: open tabs + active id + per-tab content/baseline/eol/dirty/cursor/readOnly/indent. Loads via `fs.readFile` + `git.fileBaseline`; saves via `fs.writeFile` (Ctrl/Cmd+S). The store holds tab metadata only — CodeMirror `EditorState`s are cached per tab inside `CodeMirrorEditor` so switching tabs preserves undo history, selection, and scroll.
 - **Theme + highlighting** — `editorTheme.ts` maps CodeMirror chrome + a `HighlightStyle` (lezer tags) onto theme tokens, so syntax colours track the active pi-deck theme (the `dark` flag is reconfigured via a compartment on light/dark flips). Languages by extension in `languages.ts` (also the tab type-badge).
-- **Diff gutter** — `diffExtension.ts` paints live add/mod/del line tints against the git HEAD baseline using `@codemirror/merge`'s `Chunk` diff primitive (no inline-original merge UI). Recomputes as you type; `null` baseline (untracked / no repo) shows no tints.
+- **Diff gutter** — `diffExtension.ts` paints live add/mod/del line tints against the git HEAD baseline using `@codemirror/merge`'s `Chunk` diff primitive (no inline-original merge UI). Recomputes as you type; `null` baseline (untracked / no repo) shows no tints. Hovering a block's gutter thickens its bar; *clicking* the gutter opens a pinned floating toolbar (`PidDiffBlockToolbar`) — prev/next change, revert-block (undoable buffer edit via `revertDiffChunk`), open-in-Diff — dismissed on outside-click / Escape / scroll / edit / tab switch. Inline per-block commit is deferred — it needs hunk-level git staging.
 - **Status bar** — `PidEditorStatus.tsx`, rendered in `PidFooter` only on the `editor` screen: cursor Ln/Col + selection, indentation, UTF-8, LF/CRLF, language.
 
 ### UI primitives

packages/ui/src/components/icons/index.ts

@@ -1,9 +1,12 @@
 export {
   Archive,
   ArchiveRestore,
+  ArrowDown,
   ArrowDownToLine,
   ArrowLeft,
+  ArrowLeftRight,
   ArrowRight,
+  ArrowUp,
   ArrowUpFromLine,
   Bot,
   Box,
@@ -13,6 +16,7 @@ export {
   ChevronRight,
   ChevronsDownUp,
   ChevronsUpDown,
+  ChevronUp,
   Copy,
   CornerDownLeft,
   Edit3,

packages/ui/src/features/editor/CodeMirrorEditor.tsx

@@ -23,12 +23,24 @@ import {
   keymap,
   lineNumbers,
 } from "@codemirror/view";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useNavStore } from "../../lib/useNavStore.js";
 import { useThemeStore } from "../../theme/useThemeStore.js";
 import { useProjectsStore } from "../sessions/useProjectsStore.js";
-import { baselineText, diffGutter, setDiffBaseline } from "./diffExtension.js";
+import {
+  baselineText,
+  type DiffHoverInfo,
+  diffChunkInfo,
+  diffGutter,
+  diffHoverAt,
+  gotoDiffChunk,
+  revertDiffChunk,
+  setActiveDiffChunk,
+  setDiffBaseline,
+} from "./diffExtension.js";
 import { cmHighlight, cmTheme } from "./editorTheme.js";
 import { languageForFile } from "./languages.js";
+import { PidDiffBlockToolbar } from "./PidDiffBlockToolbar.js";
 import {
   type EditorTab,
   selectActiveTabId,
@@ -76,11 +88,74 @@ export function CodeMirrorEditor() {
   const dark = useThemeIsDark();
 
   const containerRef = useRef<HTMLDivElement>(null);
+  const wrapRef = useRef<HTMLDivElement>(null);
   const viewRef = useRef<EditorView | null>(null);
   const cacheRef = useRef<Map<string, TabCacheEntry>>(new Map());
   const prevIdRef = useRef<string | null>(null);
   const darkRef = useRef(dark);
 
+  // Diff-block toolbar: opens on a gutter *click* (pinned), closes on outside-click / Escape /
+  // scroll / edit / tab switch. Hovering the gutter only thickens the block's bar.
+  const [openChunk, setOpenChunk] = useState<DiffHoverInfo | null>(null);
+  const openIdxRef = useRef<number | null>(null);
+  const activeIdxRef = useRef<number | null>(null);
+  const toolbarRef = useRef<HTMLDivElement>(null);
+
+  const setActive = useCallback((view: EditorView, idx: number | null) => {
+    if (activeIdxRef.current === idx) return;
+    activeIdxRef.current = idx;
+    setActiveDiffChunk(view, idx);
+  }, []);
+
+  const closeToolbar = useCallback(() => {
+    openIdxRef.current = null;
+    const v = viewRef.current;
+    if (v) setActive(v, null);
+    setOpenChunk(null);
+  }, [setActive]);
+
+  // Stable ref so the per-tab CM updateListener + scroll listener can close without re-subscribing.
+  const closeToolbarRef = useRef(closeToolbar);
+  closeToolbarRef.current = closeToolbar;
+
+  // Hover → thicken the hovered block's bar (suppressed while the toolbar is pinned open).
+  const handleWrapMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (openIdxRef.current !== null) return;
+      const view = viewRef.current;
+      if (!view) return;
+      const info = diffHoverAt(view, e.clientX, e.clientY);
+      setActive(view, info?.overGutter ? info.index : null);
+    },
+    [setActive],
+  );
+
+  const handleWrapMouseLeave = useCallback(() => {
+    if (openIdxRef.current !== null) return;
+    const view = viewRef.current;
+    if (view) setActive(view, null);
+  }, [setActive]);
+
+  // Click the gutter → open/switch the toolbar; click elsewhere in the editor → dismiss.
+  const handleWrapClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (toolbarRef.current && e.target instanceof Node && toolbarRef.current.contains(e.target)) {
+        return; // a toolbar button owns this click
+      }
+      const view = viewRef.current;
+      if (!view) return;
+      const info = diffHoverAt(view, e.clientX, e.clientY);
+      if (info?.overGutter) {
+        openIdxRef.current = info.index;
+        setActive(view, info.index);
+        setOpenChunk(info);
+      } else if (openIdxRef.current !== null) {
+        closeToolbar();
+      }
+    },
+    [setActive, closeToolbar],
+  );
+
   // Persist `content` to disk, then mark the in-editor baseline clean. Capturing the doc we wrote
   // (not the post-await doc) means edits made during the save round-trip correctly stay dirty.
   const handleSave = useCallback((view: EditorView, id: string) => {
@@ -113,6 +188,8 @@ export function CodeMirrorEditor() {
       const listener = EditorView.updateListener.of((update) => {
         const id = tab.id;
         if (update.docChanged) {
+          // Editing shifts/destroys chunks — drop the toolbar.
+          closeToolbarRef.current();
           const entry = cacheRef.current.get(id);
           const isDirty = entry ? !update.state.doc.eq(entry.savedText) : true;
           useEditorStore.getState().setDirty(id, isDirty);
@@ -181,7 +258,11 @@ export function CodeMirrorEditor() {
     if (!parent) return;
     const view = new EditorView({ parent, state: EditorState.create({ doc: "" }) });
     viewRef.current = view;
+    // Scrolling invalidates the toolbar's anchor — drop it.
+    const onScroll = () => closeToolbarRef.current();
+    view.scrollDOM.addEventListener("scroll", onScroll, { passive: true });
     return () => {
+      view.scrollDOM.removeEventListener("scroll", onScroll);
       view.destroy();
       viewRef.current = null;
     };
@@ -199,6 +280,7 @@ export function CodeMirrorEditor() {
         e.state = view.state;
         e.scrollTop = view.scrollDOM.scrollTop;
       }
+      closeToolbarRef.current(); // a pinned toolbar belongs to the tab we're leaving
     }
     prevIdRef.current = activeTabId;
     if (!activeTabId) return;
@@ -227,6 +309,26 @@ export function CodeMirrorEditor() {
     viewRef.current?.dispatch({ effects: themeCompartment.reconfigure(cmTheme(dark)) });
   }, [dark]);
 
+  // While the toolbar is pinned open, dismiss it on Escape or a click outside the editor.
+  useEffect(() => {
+    if (!openChunk) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") closeToolbarRef.current();
+    };
+    const onDocDown = (e: MouseEvent) => {
+      const t = e.target;
+      if (t instanceof Node && wrapRef.current && !wrapRef.current.contains(t)) {
+        closeToolbarRef.current();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("mousedown", onDocDown, true);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("mousedown", onDocDown, true);
+    };
+  }, [openChunk]);
+
   // Drop cached states for tabs that were closed.
   // biome-ignore lint/correctness/useExhaustiveDependencies: `order` is the prune trigger; membership is read from the live store.
   useEffect(() => {
@@ -237,11 +339,51 @@ export function CodeMirrorEditor() {
   }, [order]);
 
   const overlay = renderOverlay(activeTabId, status, blocked, errorMessage);
+  const view = viewRef.current;
+
+  // Prev/next: navigate to the neighbour block and re-anchor the pinned toolbar to it.
+  const reanchor = (view: EditorView, index: number) => {
+    openIdxRef.current = index;
+    activeIdxRef.current = index;
+    requestAnimationFrame(() => {
+      const info = diffChunkInfo(view, index);
+      if (info) setOpenChunk(info);
+      else closeToolbar();
+    });
+  };
 
   return (
-    <div className="pid-editor-cm-wrap">
+    // biome-ignore lint/a11y/noStaticElementInteractions: pointer-only affordance (gutter click opens the toolbar, hover thickens the bar); the same actions live in the dedicated Diff view.
+    // biome-ignore lint/a11y/useKeyWithClickEvents: the click is event-delegation for the non-focusable gutter; the toolbar's actions are also reachable in the keyboard-accessible Diff view.
+    <div
+      className="pid-editor-cm-wrap"
+      ref={wrapRef}
+      onClick={handleWrapClick}
+      onMouseMove={handleWrapMouseMove}
+      onMouseLeave={handleWrapMouseLeave}
+    >
       <div className="pid-editor-cm" ref={containerRef} />
       {overlay}
+      {openChunk && view ? (
+        <PidDiffBlockToolbar
+          info={openChunk}
+          rootRef={toolbarRef}
+          wrapRef={wrapRef}
+          onPrev={() => reanchor(view, gotoDiffChunk(view, openChunk.index, -1))}
+          onNext={() => reanchor(view, gotoDiffChunk(view, openChunk.index, 1))}
+          onRevert={() => {
+            revertDiffChunk(view, openChunk.index);
+            closeToolbar();
+          }}
+          onOpenDiff={() => {
+            const tab = activeTabId ? useEditorStore.getState().tabs[activeTabId] : undefined;
+            if (tab) {
+              useNavStore.getState().openDiff({ projectId: tab.projectId, path: tab.relPath });
+            }
+            closeToolbar();
+          }}
+        />
+      ) : null}
     </div>
   );
 }

packages/ui/src/features/editor/PidDiffBlockToolbar.tsx

@@ -0,0 +1,85 @@
+import type { RefObject } from "react";
+import { ArrowDown, ArrowLeftRight, ArrowUp, Undo2 } from "../../components/icons/index.js";
+import { Tooltip } from "../../components/ui/Tooltip.js";
+import type { DiffHoverInfo } from "./diffExtension.js";
+
+interface PidDiffBlockToolbarProps {
+  info: DiffHoverInfo;
+  /** Ref to the toolbar root — the editor uses it to tell toolbar clicks from dismiss clicks. */
+  rootRef: RefObject<HTMLDivElement | null>;
+  /** The editor wrap the toolbar is positioned within (to convert client to local coords). */
+  wrapRef: RefObject<HTMLDivElement | null>;
+  onPrev: () => void;
+  onNext: () => void;
+  onRevert: () => void;
+  onOpenDiff: () => void;
+}
+
+/**
+ * Floating actions for the selected diff block — prev/next change, revert (undoable), open Diff.
+ * Opened by clicking the block's gutter; pinned at the clicked line until dismissed.
+ */
+export function PidDiffBlockToolbar({
+  info,
+  rootRef,
+  wrapRef,
+  onPrev,
+  onNext,
+  onRevert,
+  onOpenDiff,
+}: PidDiffBlockToolbarProps) {
+  const wrap = wrapRef.current?.getBoundingClientRect();
+  const top = info.clientTop - (wrap?.top ?? 0);
+  const left = info.clientLeft - (wrap?.left ?? 0);
+
+  return (
+    <div
+      ref={rootRef}
+      className={`pid-diff-block-toolbar pid-diff-block-toolbar-${info.kind}`}
+      style={{ top, left }}
+      role="toolbar"
+      aria-label="Diff block actions"
+    >
+      <Tooltip content="Previous change">
+        <button
+          type="button"
+          className="pid-diff-block-toolbar-btn"
+          onClick={onPrev}
+          aria-label="Previous change"
+        >
+          <ArrowUp size={13} aria-hidden="true" />
+        </button>
+      </Tooltip>
+      <Tooltip content="Next change">
+        <button
+          type="button"
+          className="pid-diff-block-toolbar-btn"
+          onClick={onNext}
+          aria-label="Next change"
+        >
+          <ArrowDown size={13} aria-hidden="true" />
+        </button>
+      </Tooltip>
+      <Tooltip content="Revert this block">
+        <button
+          type="button"
+          className="pid-diff-block-toolbar-btn"
+          onClick={onRevert}
+          aria-label="Revert this block"
+        >
+          <Undo2 size={13} aria-hidden="true" />
+        </button>
+      </Tooltip>
+      <Tooltip content="Show Diff for lines">
+        <button
+          type="button"
+          className="pid-diff-block-toolbar-btn"
+          onClick={onOpenDiff}
+          aria-label="Show Diff for lines"
+        >
+          <ArrowLeftRight size={13} aria-hidden="true" />
+        </button>
+      </Tooltip>
+    </div>
+  );
+}