agent-canvas 0.1.5 → 0.1.8

package/daemon/client/AnnotationProvider.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback, useEffect, useRef } from "react";
 import { AnnotationCtx } from "#canvas/runtime";
 import type { Annotation, AnnotationContext, PlanResponse, FeedbackEntry, AnnotationContextValue } from "#canvas/runtime";
+import { generateAnnotationId } from "./utils";
 
 // Re-export types for convenience
 export type { Annotation, AnnotationContext, PlanResponse, FeedbackEntry, AnnotationContextValue };
@@ -101,8 +102,7 @@ export function AnnotationProvider({ sessionId, revision, isReadOnly, children }
   }, []);
 
   const addAnnotation = useCallback((snippet: string, note: string, filePath?: string) => {
-    const id = `ann-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
-    addAnnotationWithId(id, snippet, note, filePath);
+    addAnnotationWithId(generateAnnotationId(), snippet, note, filePath);
   }, [addAnnotationWithId]);
 
   const updateAnnotation = useCallback((id: string, note: string) => {

package/daemon/client/AnnotationSidebar.tsx

@@ -1,11 +1,12 @@
 import React, { useRef, useEffect, useCallback, useState, useContext } from "react";
 import { useAnnotations, Annotation } from "./AnnotationProvider";
 import { setMarkActive } from "./highlightRange";
-import { generateMarkdown, hasValue, getMissingRequired, getMissingRequiredFeedback } from "./generateMarkdown";
-import { RevisionContext, ActiveViewContext } from "./App";
+import { generateMarkdown, hasValue, getMissingRequiredLabels } from "./generateMarkdown";
+import { RevisionContext, ActiveViewContext, type ActiveView } from "./App";
 import { SessionContext } from "#canvas/runtime";
 import { MarkdownPreview } from "./ResponsePreview";
 import { FileIcon } from "./FileIcon";
+import { autoResizeTextarea } from "./utils";
 
 interface AnnotationSidebarProps {
   onPreview: () => void;
@@ -21,7 +22,7 @@ export function AnnotationSidebar({ onPreview, onSubmit, collapseButton }: Annot
   const roundLabel = selectedRevInfo?.label || `Round ${selectedRevision}`;
 
   if (isReadOnly) {
-    return <FeedbackDisplay sessionId={sessionId} revision={selectedRevision} label={roundLabel} waitingForUpdate={isCurrentButSubmitted} collapseButton={collapseButton} />;
+    return <ReadOnlyAnnotationSidebar sessionId={sessionId} revision={selectedRevision} label={roundLabel} waitingForUpdate={isCurrentButSubmitted} collapseButton={collapseButton} />;
   }
 
   return <AnnotationSidebarInner onPreview={onPreview} onSubmit={onSubmit} collapseButton={collapseButton} />;
@@ -68,6 +69,196 @@ function FeedbackDisplay({ sessionId, revision, label, waitingForUpdate, collaps
   );
 }
 
+type ReadOnlyTab = "feedback" | "annotations";
+
+function ReadOnlyAnnotationSidebar({ sessionId, revision, label, waitingForUpdate, collapseButton }: { sessionId: string; revision: number; label: string; waitingForUpdate?: boolean; collapseButton?: React.ReactNode }) {
+  const { annotations, generalNote, activeAnnotationId, setActiveAnnotationId } = useAnnotations();
+  const { setActiveView } = useContext(ActiveViewContext);
+  const hasAnnotations = annotations.length > 0 || generalNote.trim().length > 0;
+  const [activeTab, setActiveTab] = useState<ReadOnlyTab>("feedback");
+
+  // If no annotations in localStorage, just show feedback
+  if (!hasAnnotations) {
+    return <FeedbackDisplay sessionId={sessionId} revision={revision} label={label} waitingForUpdate={waitingForUpdate} collapseButton={collapseButton} />;
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header with tab switcher */}
+      <div className="px-4 py-3 flex items-center justify-between flex-shrink-0">
+        <div className="flex items-center gap-1 bg-bg-input rounded-md p-0.5">
+          <button
+            onClick={() => setActiveTab("feedback")}
+            className={`px-2.5 py-1 rounded text-[11px] font-medium font-body transition-colors ${
+              activeTab === "feedback"
+                ? "bg-bg-elevated text-text-primary shadow-sm"
+                : "text-text-tertiary hover:text-text-secondary"
+            }`}
+          >
+            Feedback
+          </button>
+          <button
+            onClick={() => setActiveTab("annotations")}
+            className={`px-2.5 py-1 rounded text-[11px] font-medium font-body transition-colors flex items-center gap-1.5 ${
+              activeTab === "annotations"
+                ? "bg-bg-elevated text-text-primary shadow-sm"
+                : "text-text-tertiary hover:text-text-secondary"
+            }`}
+          >
+            Annotations
+            <span className="inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full bg-border-subtle text-[10px] font-medium">{annotations.length}</span>
+          </button>
+        </div>
+        {collapseButton}
+      </div>
+
+      {waitingForUpdate && (
+        <div className="mx-4 mb-3 px-3 py-2.5 rounded-lg bg-accent-green-muted flex items-center gap-2 flex-shrink-0">
+          <span className="w-2 h-2 rounded-full bg-accent-green animate-pulse" />
+          <span className="text-[12px] font-body text-accent-green">Waiting for next revision...</span>
+        </div>
+      )}
+
+      {activeTab === "feedback" ? (
+        <FeedbackDisplayContent sessionId={sessionId} revision={revision} />
+      ) : (
+        <ReadOnlyAnnotationList
+          annotations={annotations}
+          generalNote={generalNote}
+          activeAnnotationId={activeAnnotationId}
+          setActiveAnnotationId={setActiveAnnotationId}
+          setActiveView={setActiveView}
+        />
+      )}
+    </div>
+  );
+}
+
+function FeedbackDisplayContent({ sessionId, revision }: { sessionId: string; revision: number }) {
+  const [feedback, setFeedback] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    fetch(`/api/session/${sessionId}/revision/${revision}/feedback`)
+      .then((r) => r.json())
+      .then((data: any) => { setFeedback(data.feedback || null); setLoading(false); })
+      .catch(() => { setFeedback(null); setLoading(false); });
+  }, [sessionId, revision]);
+
+  return (
+    <div className="flex-1 overflow-y-auto px-4">
+      {loading ? (
+        <p className="text-[12px] text-text-tertiary font-body py-4">Loading...</p>
+      ) : feedback ? (
+        <MarkdownPreview text={feedback} />
+      ) : (
+        <p className="text-[12px] text-text-tertiary font-body py-4">No feedback was submitted for this revision.</p>
+      )}
+    </div>
+  );
+}
+
+function ReadOnlyAnnotationList({ annotations, generalNote, activeAnnotationId, setActiveAnnotationId, setActiveView }: {
+  annotations: Annotation[];
+  generalNote: string;
+  activeAnnotationId: string | null;
+  setActiveAnnotationId: (id: string | null) => void;
+  setActiveView: (view: ActiveView) => void;
+}) {
+  const planAnnotations = annotations.filter((a) => !a.filePath);
+  const fileAnnotations = annotations.filter((a) => a.filePath);
+  const fileGroups: Record<string, Annotation[]> = {};
+  for (const ann of fileAnnotations) {
+    const key = ann.filePath!;
+    if (!fileGroups[key]) fileGroups[key] = [];
+    fileGroups[key].push(ann);
+  }
+
+  const handleMouseEnter = (annId: string) => {
+    setActiveAnnotationId(annId);
+    setMarkActive(annId, true);
+    const mark = document.querySelector(`[data-annotation-id="${annId}"]`) as HTMLElement | null;
+    if (mark) mark.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  };
+
+  const handleMouseLeave = (annId: string) => {
+    setActiveAnnotationId(null);
+    setMarkActive(annId, false);
+  };
+
+  const handleClick = (ann: Annotation) => {
+    if (ann.id === activeAnnotationId) {
+      setActiveAnnotationId(null);
+    } else {
+      setActiveAnnotationId(ann.id);
+      if (ann.filePath) {
+        setActiveView({ type: "file", path: ann.filePath });
+        setTimeout(() => {
+          const mark = document.querySelector(`[data-annotation-id="${ann.id}"]`) as HTMLElement | null;
+          if (mark) mark.scrollIntoView({ behavior: "smooth", block: "center" });
+        }, 150);
+      }
+    }
+  };
+
+  const renderAnnotation = (ann: Annotation) => (
+    <div
+      key={ann.id}
+      className={`relative px-3 py-2.5 transition-colors duration-150 cursor-pointer ${
+        activeAnnotationId === ann.id
+          ? "bg-highlight-selected"
+          : "odd:bg-bg-elevated-half hover:bg-bg-input"
+      }`}
+      onMouseEnter={() => handleMouseEnter(ann.id)}
+      onMouseLeave={() => handleMouseLeave(ann.id)}
+      onClick={() => handleClick(ann)}
+    >
+      <div className="text-[11px] text-text-tertiary italic line-clamp-2 mb-1.5 leading-snug font-body border-l-2 border-border-medium pl-2">
+        {ann.snippet.length > 80 ? ann.snippet.slice(0, 80) + "..." : ann.snippet}
+      </div>
+      {ann.note.trim() && (
+        <div className="text-[13px] font-body text-text-primary leading-relaxed">
+          {ann.note}
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <>
+      <div className="flex-1 overflow-y-auto">
+        {planAnnotations.length > 0 && fileAnnotations.length > 0 && (
+          <div className="text-[10px] uppercase tracking-widest text-text-tertiary font-body px-3 mb-1 mt-1">Plan</div>
+        )}
+        {planAnnotations.map(renderAnnotation)}
+
+        {Object.entries(fileGroups).map(([filePath, anns]) => (
+          <div key={filePath}>
+            <button
+              onClick={() => setActiveView({ type: "file", path: filePath })}
+              className="flex items-center gap-1.5 text-[10px] uppercase tracking-widest text-text-tertiary hover:text-text-secondary font-body px-3 pt-3 pb-1 truncate transition-colors w-full text-left"
+              title={filePath}
+            >
+              <FileIcon name={filePath.split("/").pop() || filePath} type="file" />
+              <span className="truncate">{filePath}</span>
+            </button>
+            {anns.map(renderAnnotation)}
+          </div>
+        ))}
+      </div>
+
+      {generalNote.trim() && (
+        <div className="border-t border-border-subtle px-4 py-3 flex-shrink-0">
+          <div className="text-[13px] font-body text-text-primary leading-relaxed">
+            {generalNote}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
 function AnnotationSidebarInner({ onPreview, onSubmit, collapseButton }: AnnotationSidebarProps) {
   const {
     annotations, updateAnnotation, removeAnnotation,
@@ -159,17 +350,8 @@ function AnnotationSidebarInner({ onPreview, onSubmit, collapseButton }: Annotat
         className="w-full bg-transparent text-[13px] font-body text-text-primary resize-none focus:outline-none leading-relaxed p-0 border-none min-h-[20px]"
         rows={1}
         style={{ height: "auto", overflow: "hidden" }}
-        onInput={(e) => {
-          const t = e.target as HTMLTextAreaElement;
-          t.style.height = "auto";
-          t.style.height = t.scrollHeight + "px";
-        }}
-        ref={(el) => {
-          if (el) {
-            el.style.height = "auto";
-            el.style.height = el.scrollHeight + "px";
-          }
-        }}
+        onInput={(e) => autoResizeTextarea(e.target as HTMLTextAreaElement)}
+        ref={(el) => { if (el) autoResizeTextarea(el); }}
       />
 
       {/* Delete — top right on hover */}
@@ -236,17 +418,8 @@ function AnnotationSidebarInner({ onPreview, onSubmit, collapseButton }: Annotat
           onChange={(e) => setGeneralNote(e.target.value)}
           className="w-full bg-transparent text-[13px] font-body text-text-primary resize-none leading-relaxed p-0 border-none ring-0 shadow-none outline-none focus:outline-none focus:ring-0 focus:border-none placeholder:text-text-disabled min-h-[40px]"
           placeholder="General notes..."
-          onInput={(e) => {
-            const t = e.target as HTMLTextAreaElement;
-            t.style.height = "auto";
-            t.style.height = Math.max(40, t.scrollHeight) + "px";
-          }}
-          ref={(el) => {
-            if (el) {
-              el.style.height = "auto";
-              el.style.height = Math.max(40, el.scrollHeight) + "px";
-            }
-          }}
+          onInput={(e) => autoResizeTextarea(e.target as HTMLTextAreaElement, 40)}
+          ref={(el) => { if (el) autoResizeTextarea(el, 40); }}
         />
       </div>
 
@@ -279,12 +452,7 @@ function AnnotationSidebarInner({ onPreview, onSubmit, collapseButton }: Annotat
             </button>
             <button
               onClick={() => {
-                const missingResponses = getMissingRequired(responses);
-                const missingFeedback = getMissingRequiredFeedback(feedbackEntries);
-                const allMissing = [
-                  ...missingResponses.map((r) => r.label),
-                  ...missingFeedback.map((e) => e.label || e.id),
-                ];
+                const allMissing = getMissingRequiredLabels(responses, feedbackEntries);
                 if (allMissing.length > 0) {
                   setValidationError(`Please answer: ${allMissing.join(", ")}`);
                   return;

package/daemon/client/App.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useLayoutEffect, useState, useCallback, useRef, createContext, useMemo } from "react";
 import { createRoot } from "react-dom/client";
+import { marked } from "marked";
 import { SessionContext, ActiveViewCtx } from "#canvas/runtime";
 import { AnnotationProvider, useAnnotations } from "./AnnotationProvider";
 import { PlanRenderer } from "./PlanRenderer";
@@ -11,6 +12,7 @@ import { SessionSwitcher } from "./SessionSwitcher";
 import { exportCanvasToMarkdown } from "./exportMarkdown";
 import { CompareView } from "./CompareView";
 import { RevisionSelect } from "./RevisionSelect";
+import { generateAnnotationId } from "./utils";
 
 export type ActiveView = { type: "plan" } | { type: "file"; path: string };
 
@@ -20,6 +22,7 @@ export interface RevisionInfo {
   sourceFile?: string;
   createdAt: string;
   hasFeedback: boolean;
+  response?: string;
 }
 
 export const ActiveViewContext = createContext<{
@@ -101,7 +104,7 @@ function RevisionSelector() {
   const isLatest = selectedRevision === currentRevision;
 
   return (
-    <div className="flex items-center gap-1.5">
+    <div className="flex flex-col gap-1">
       <RevisionSelect
         value={selectedRevision}
         onChange={setSelectedRevision}
@@ -123,7 +126,7 @@ function RevisionSelector() {
           }
           setCompareRevision({ left, right: currentRevision });
         }}
-        className="text-[11px] font-body font-medium px-2 py-0.5 rounded-md text-accent-blue hover:bg-accent-blue-muted transition-colors"
+        className="text-[11px] font-body font-medium px-2 py-0.5 rounded-md text-accent-blue hover:bg-accent-blue-muted transition-colors self-start"
       >
         Compare
       </button>
@@ -337,6 +340,9 @@ function App() {
                         <polyline points="20 6 9 17 4 12"/>
                       </svg>
                     </button>
+                    {selectedRevInfo?.response && (
+                      <ResponseBanner markdown={selectedRevInfo.response} />
+                    )}
                     <PlanRenderer revision={selectedRevision} />
                   </div>
                 </div>
@@ -515,6 +521,36 @@ function ResizableSidebar({ children, collapsed, onToggle }: { children: React.R
   );
 }
 
+function ResponseBanner({ markdown }: { markdown: string }) {
+  const [dismissed, setDismissed] = useState(false);
+  const html = useMemo(() => marked.parse(markdown, { async: false }) as string, [markdown]);
+
+  // Reset dismissed state when markdown changes
+  useEffect(() => { setDismissed(false); }, [markdown]);
+
+  if (dismissed) return null;
+
+  return (
+    <div className="mb-6 rounded-lg border border-accent-blue/20 bg-accent-blue/5 relative">
+      <button
+        onClick={() => setDismissed(true)}
+        className="absolute top-2 right-2 w-6 h-6 flex items-center justify-center rounded text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated transition-colors"
+      >
+        <span className="text-xs">&#x2715;</span>
+      </button>
+      <div className="px-4 py-3 pr-10">
+        <div className="flex items-center gap-2 mb-1.5">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-accent-blue flex-shrink-0">
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+          </svg>
+          <span className="text-[11px] font-medium uppercase tracking-widest text-accent-blue font-body">Agent Response</span>
+        </div>
+        <div className="prose-canvas text-sm" dangerouslySetInnerHTML={{ __html: html }} />
+      </div>
+    </div>
+  );
+}
+
 function ContentTabs() {
   const { activeView, setActiveView, openFiles, closeFile } = React.useContext(ActiveViewContext);
   const sessionId = React.useContext(SessionContext);
@@ -595,7 +631,7 @@ function ContentTabs() {
                 const data = await res.json() as any;
                 if (!data.error) {
                   const preview = data.content.split("\n").slice(0, 3).join("\n") + (data.content.split("\n").length > 3 ? "\n..." : "");
-                  const id = `ann-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+                  const id = generateAnnotationId();
                   addAnnotationWithId(id, preview, "", path);
                   setActiveAnnotationId(id);
                 }

package/daemon/client/FileBrowser.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext, useCallback } from "react";
+import React, { useEffect, useState, useContext, useCallback, useMemo } from "react";
 import { SessionContext } from "#canvas/runtime";
 import { useAnnotations } from "./AnnotationProvider";
 import { ActiveViewContext } from "./App";
@@ -14,12 +14,13 @@ export function FileBrowser({ embedded }: { embedded?: boolean } = {}) {
   const [collapsed, setCollapsed] = useState(false);
   const [dirs, setDirs] = useState<Record<string, DirState>>({});
 
-  const fileAnnotations = annotations.filter((a) => a.filePath);
-  const annCountMap = new Map<string, number>();
-  for (const a of fileAnnotations) {
-    annCountMap.set(a.filePath!, (annCountMap.get(a.filePath!) || 0) + 1);
-  }
-  const annotatedFiles = [...annCountMap.keys()];
+  const { annCountMap, annotatedFiles } = useMemo(() => {
+    const map = new Map<string, number>();
+    for (const a of annotations) {
+      if (a.filePath) map.set(a.filePath, (map.get(a.filePath) || 0) + 1);
+    }
+    return { annCountMap: map, annotatedFiles: [...map.keys()] };
+  }, [annotations]);
 
   const loadDir = async (path: string) => {
     const res = await fetch(`/api/tree?session=${sessionId}&path=${encodeURIComponent(path)}`);

package/daemon/client/FileViewer.tsx

@@ -1,9 +1,21 @@
 import React, { useEffect, useState, useContext, useCallback, useRef, useMemo } from "react";
 import { SessionContext } from "#canvas/runtime";
+import type { AnnotationContext } from "#canvas/runtime";
 import { useAnnotations } from "./AnnotationProvider";
 import { wrapRangeWithMark, updateAllMarkStates, renameMarkId, unwrapMarks, restoreMarks } from "./highlightRange";
 import { AnnotationCreatePopover, AnnotationEditPopover } from "./Popover";
 import { LANG_MAP } from "../langMap";
+import { generateAnnotationId } from "./utils";
+
+/** Walk up from a node to find the parent line div with data-line-num */
+function findLineDiv(node: Node): HTMLElement | null {
+  let el: HTMLElement | null = node instanceof HTMLElement ? node : node.parentElement;
+  while (el) {
+    if (el.hasAttribute("data-line-num")) return el;
+    el = el.parentElement;
+  }
+  return null;
+}
 
 interface FileViewerProps {
   path: string;
@@ -21,9 +33,16 @@ export function FileViewer({ path }: FileViewerProps) {
   const [pendingMarkId, setPendingMarkId] = useState<string | null>(null);
   const pendingSnippetRef = useRef("");
 
+  // Line gutter selection state
+  const [lineSelectStart, setLineSelectStart] = useState<number | null>(null);
+  const [lineSelectEnd, setLineSelectEnd] = useState<number | null>(null);
+  const lineSelectStartRef = useRef<number | null>(null);
+  const lineSelectEndRef = useRef<number | null>(null);
+  const linesRef = useRef<string[]>([]);
+
   // Popover state
   const [editPopover, setEditPopover] = useState<{ anchorEl: HTMLElement; annId: string } | null>(null);
-  const [createPopover, setCreatePopover] = useState<{ anchorEl: HTMLElement; tempId: string; snippet: string } | null>(null);
+  const [createPopover, setCreatePopover] = useState<{ anchorEl: HTMLElement; tempId: string; snippet: string; ctx?: AnnotationContext } | null>(null);
 
   const fileAnns = annotations.filter((a) => a.filePath === path);
 
@@ -51,7 +70,11 @@ export function FileViewer({ path }: FileViewerProps) {
   }, [content, path]);
 
   // Update mark active states
-  useEffect(() => { updateAllMarkStates(activeAnnotationId); }, [activeAnnotationId]);
+  const prevActiveRef = useRef<string | null>(null);
+  useEffect(() => {
+    updateAllMarkStates(activeAnnotationId, prevActiveRef.current);
+    prevActiveRef.current = activeAnnotationId;
+  }, [activeAnnotationId]);
 
   // Click handler for marks
   useEffect(() => {
@@ -108,6 +131,30 @@ export function FileViewer({ path }: FileViewerProps) {
     if ((range.startContainer.parentElement as HTMLElement)?.closest?.("[data-annotation-id]")) return;
     const snippet = sel.toString().trim();
     if (snippet.length < 2) return;
+
+    // Compute line numbers from DOM
+    const startLineDiv = findLineDiv(range.startContainer);
+    const endLineDiv = findLineDiv(range.endContainer);
+    const lineStart = startLineDiv ? parseInt(startLineDiv.getAttribute("data-line-num")!, 10) : undefined;
+    const lineEnd = endLineDiv ? parseInt(endLineDiv.getAttribute("data-line-num")!, 10) : undefined;
+
+    // Compute before/after context for short snippets on a single line
+    let before = "";
+    let after = "";
+    if (snippet.length < 30 && startLineDiv && startLineDiv === endLineDiv) {
+      const code = startLineDiv.querySelector("code");
+      if (code) {
+        const lineText = code.textContent || "";
+        const idx = lineText.indexOf(snippet);
+        if (idx >= 0) {
+          before = lineText.slice(0, idx).trimStart();
+          after = lineText.slice(idx + snippet.length).trimEnd();
+        }
+      }
+    }
+
+    const ctx: AnnotationContext = { before, after, hierarchy: [], lineStart, lineEnd };
+
     const tempId = `__pending_${Date.now()}`;
     const cloned = range.cloneRange();
     try { wrapRangeWithMark(cloned, tempId); } catch {}
@@ -119,7 +166,82 @@ export function FileViewer({ path }: FileViewerProps) {
 
     pendingSnippetRef.current = snippet;
     setPendingMarkId(tempId);
-    setCreatePopover({ anchorEl: lastMark, tempId, snippet });
+    setCreatePopover({ anchorEl: lastMark, tempId, snippet, ctx });
+  }, []);
+
+  // Line gutter: mousedown starts line selection
+  const handleGutterMouseDown = useCallback((e: React.MouseEvent, lineNum: number) => {
+    e.preventDefault(); // Prevent text selection
+    lineSelectStartRef.current = lineNum;
+    lineSelectEndRef.current = lineNum;
+    setLineSelectStart(lineNum);
+    setLineSelectEnd(lineNum);
+  }, []);
+
+  // Line gutter: mousemove + mouseup for drag selection
+  useEffect(() => {
+    const handleMouseMoveForLines = (e: MouseEvent) => {
+      if (lineSelectStartRef.current === null) return;
+      const lineDiv = (e.target as HTMLElement).closest("[data-line-num]") as HTMLElement;
+      if (lineDiv) {
+        const num = parseInt(lineDiv.getAttribute("data-line-num")!, 10);
+        lineSelectEndRef.current = num;
+        setLineSelectEnd(num);
+      }
+    };
+
+    const handleMouseUpForLines = () => {
+      const start = lineSelectStartRef.current;
+      if (start === null) return;
+      lineSelectStartRef.current = null;
+      const end = lineSelectEndRef.current ?? start;
+      const startLine = Math.min(start, end);
+      const endLine = Math.max(start, end);
+      const currentLines = linesRef.current;
+      const snippet = currentLines.slice(startLine - 1, endLine).join("\n");
+      if (!snippet.trim()) {
+        setLineSelectStart(null);
+        setLineSelectEnd(null);
+        return;
+      }
+
+      const tempId = `__pending_${Date.now()}`;
+      const ctx: AnnotationContext = { before: "", after: "", hierarchy: [], lineStart: startLine, lineEnd: endLine };
+
+      // Wrap code content of selected lines with marks
+      if (contentRef.current) {
+        const lineDivs = contentRef.current.querySelectorAll("[data-line-num]");
+        const firstDiv = lineDivs[startLine - 1] as HTMLElement;
+        const lastDiv = lineDivs[endLine - 1] as HTMLElement;
+        if (firstDiv && lastDiv) {
+          const firstCode = firstDiv.querySelector("code");
+          const lastCode = lastDiv.querySelector("code");
+          if (firstCode && lastCode) {
+            try {
+              const range = document.createRange();
+              range.setStartBefore(firstCode.firstChild || firstCode);
+              range.setEndAfter(lastCode.lastChild || lastCode);
+              wrapRangeWithMark(range, tempId);
+            } catch {}
+          }
+        }
+        const anchorEl = lineDivs[endLine - 1] as HTMLElement;
+        if (anchorEl) {
+          pendingSnippetRef.current = snippet;
+          setPendingMarkId(tempId);
+          setCreatePopover({ anchorEl, tempId, snippet, ctx });
+        }
+      }
+      setLineSelectStart(null);
+      setLineSelectEnd(null);
+    };
+
+    document.addEventListener("mousemove", handleMouseMoveForLines);
+    document.addEventListener("mouseup", handleMouseUpForLines);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMoveForLines);
+      document.removeEventListener("mouseup", handleMouseUpForLines);
+    };
   }, []);
 
   // Highlight content
@@ -140,10 +262,18 @@ export function FileViewer({ path }: FileViewerProps) {
   if (!content) return null;
 
   const lines = content.split("\n");
+  linesRef.current = lines;
+
+  // Computed selected line range for highlighting during drag
+  const selectedLineRange = useMemo(() => {
+    if (lineSelectStart === null) return null;
+    const end = lineSelectEnd ?? lineSelectStart;
+    return { start: Math.min(lineSelectStart, end), end: Math.max(lineSelectStart, end) };
+  }, [lineSelectStart, lineSelectEnd]);
 
   const addWholeFileWithPopup = () => {
     const preview = content!.split("\n").slice(0, 3).join("\n") + (lines.length > 3 ? "\n..." : "");
-    const id = `ann-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+    const id = generateAnnotationId();
     addAnnotationWithId(id, preview, "", path);
     // Focus the new annotation's note in sidebar by activating it
     setActiveAnnotationId(id);
@@ -155,16 +285,23 @@ export function FileViewer({ path }: FileViewerProps) {
     <div>
       {/* Code */}
       <pre ref={contentRef} className="text-code font-mono text-text-code bg-bg-base select-text cursor-text py-3 hljs">
-        {lines.map((line, i) => (
-          <div key={i} className="flex hover:bg-bg-elevated-half px-5">
-            <span className="text-text-tertiary opacity-40 select-none w-10 text-right pr-4 shrink-0 py-px text-[12px]">{i + 1}</span>
-            {highlightedLines ? (
-              <code className="py-px" dangerouslySetInnerHTML={{ __html: highlightedLines[i] || " " }} />
-            ) : (
-              <code className="py-px">{line || " "}</code>
-            )}
-          </div>
-        ))}
+        {lines.map((line, i) => {
+          const lineNum = i + 1;
+          const isSelected = selectedLineRange && lineNum >= selectedLineRange.start && lineNum <= selectedLineRange.end;
+          return (
+            <div key={i} data-line-num={lineNum} className={`flex px-5 ${isSelected ? "bg-accent-blue/10" : "hover:bg-bg-elevated-half"}`}>
+              <span
+                className="text-text-tertiary select-none w-10 text-right pr-4 shrink-0 py-px text-[12px] cursor-pointer opacity-40 hover:opacity-100 hover:text-accent-blue"
+                onMouseDown={(e) => handleGutterMouseDown(e, lineNum)}
+              >{lineNum}</span>
+              {highlightedLines ? (
+                <code className="py-px" dangerouslySetInnerHTML={{ __html: highlightedLines[i] || " " }} />
+              ) : (
+                <code className="py-px">{line || " "}</code>
+              )}
+            </div>
+          );
+        })}
       </pre>
 
       {editPopover && (() => {
@@ -188,9 +325,9 @@ export function FileViewer({ path }: FileViewerProps) {
           scrollContainer={scrollContainer}
           snippet={createPopover.snippet}
           onAdd={(note) => {
-            const id = `ann-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+            const id = generateAnnotationId();
             renameMarkId(createPopover.tempId, id);
-            addAnnotationWithId(id, createPopover.snippet, note, path);
+            addAnnotationWithId(id, createPopover.snippet, note, path, createPopover.ctx);
             setPendingMarkId(null);
             setCreatePopover(null);
           }}