feat(floating-ai): step 8 — page interactions (all variants)

Register AI sections across all content pages with dual-anchor scroll
tracking, cross-page navigation via [SECTION:xxx] tags, and right-margin
positioning for the notes editor.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/renderer/components/projects/ProjectDetail.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useMemo, useState } from 'react';
+import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import { Sparkles, FileText, CheckCircle2, Milestone, Plus } from 'lucide-react';
 import { format } from 'date-fns';
 import { useNavigate } from '@tanstack/react-router';
@@ -16,6 +16,7 @@ import { KanbanBoard } from './KanbanBoard';
 import { GanttChart, type GanttCheckpoint } from '@/components/timeline/GanttChart';
 import { AddCheckpointDialog } from '@/components/timeline/AddCheckpointDialog';
 import { EditCheckpointDialog } from '@/components/timeline/EditCheckpointDialog';
+import { useFloatingChat } from '@/context/FloatingChatContext';
 
 type ProjectDetailProps = {
   projectId: string;
@@ -26,6 +27,26 @@ export function ProjectDetail({ projectId }: ProjectDetailProps) {
   const [addCheckpointOpen, setAddCheckpointOpen] = useState(false);
   const [editingCheckpoint, setEditingCheckpoint] = useState<GanttCheckpoint | null>(null);
   const navigate = useNavigate();
+
+  // AI section refs
+  const summaryRef = useRef<HTMLDivElement>(null);
+  const timelineRef = useRef<HTMLDivElement>(null);
+  const tasksRef = useRef<HTMLDivElement>(null);
+  const notesRef = useRef<HTMLDivElement>(null);
+  const { registerSection, unregisterSection } = useFloatingChat();
+
+  useEffect(() => {
+    registerSection({ id: 'project-summary', label: 'Project Summary', ref: summaryRef, projectId });
+    registerSection({ id: 'project-timeline', label: 'Project Timeline', ref: timelineRef, projectId });
+    registerSection({ id: 'project-tasks', label: 'Tasks', ref: tasksRef, projectId });
+    registerSection({ id: 'project-notes', label: 'Notes', ref: notesRef, projectId });
+    return () => {
+      unregisterSection('project-summary');
+      unregisterSection('project-timeline');
+      unregisterSection('project-tasks');
+      unregisterSection('project-notes');
+    };
+  }, [projectId, registerSection, unregisterSection]);
   const utils = trpc.useUtils();
   const { data: project, isLoading } = trpc.projects.get.useQuery({ id: projectId });
   const { data: clientsList } = trpc.clients.list.useQuery();
@@ -181,54 +202,57 @@ export function ProjectDetail({ projectId }: ProjectDetailProps) {
         <h1 className="text-2xl font-semibold text-foreground">{project.name}</h1>
       </div>
 
-      {/* Stat Cards */}
-      <div className="grid grid-cols-3 gap-4">
-        <Item variant="muted">
-          <ItemMedia variant="icon">
-            <FileText />
-          </ItemMedia>
-          <ItemContent>
-            <ItemTitle>{notesCount}</ItemTitle>
-            <ItemDescription>Notes</ItemDescription>
-          </ItemContent>
-        </Item>
+      {/* Project Summary Section */}
+      <div ref={summaryRef} data-ai-section="project-summary" className="flex flex-col gap-6">
+        {/* Stat Cards */}
+        <div className="grid grid-cols-3 gap-4">
+          <Item variant="muted">
+            <ItemMedia variant="icon">
+              <FileText />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>{notesCount}</ItemTitle>
+              <ItemDescription>Notes</ItemDescription>
+            </ItemContent>
+          </Item>
 
-        <Item variant="muted">
-          <ItemMedia variant="icon">
-            <CheckCircle2 />
-          </ItemMedia>
-          <ItemContent>
-            <ItemTitle>{taskStats.done}/{taskStats.total}</ItemTitle>
-            <ItemDescription>Tasks Complete</ItemDescription>
-          </ItemContent>
-        </Item>
+          <Item variant="muted">
+            <ItemMedia variant="icon">
+              <CheckCircle2 />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>{taskStats.done}/{taskStats.total}</ItemTitle>
+              <ItemDescription>Tasks Complete</ItemDescription>
+            </ItemContent>
+          </Item>
 
-        <Item variant="muted">
+          <Item variant="muted">
+            <ItemMedia variant="icon">
+              <Milestone />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>{checkpointStats.approved}/{checkpointStats.total}</ItemTitle>
+              <ItemDescription>Checkpoints</ItemDescription>
+            </ItemContent>
+          </Item>
+        </div>
+
+        {/* AI Project Summary */}
+        <Item variant="outline">
           <ItemMedia variant="icon">
-            <Milestone />
+            <Sparkles />
           </ItemMedia>
           <ItemContent>
-            <ItemTitle>{checkpointStats.approved}/{checkpointStats.total}</ItemTitle>
-            <ItemDescription>Checkpoints</ItemDescription>
+            <ItemTitle>AI Project Summary</ItemTitle>
+            <ItemDescription>
+              {project.aiSummary || 'AI summary will appear here'}
+            </ItemDescription>
           </ItemContent>
         </Item>
       </div>
 
-      {/* AI Project Summary */}
-      <Item variant="outline">
-        <ItemMedia variant="icon">
-          <Sparkles />
-        </ItemMedia>
-        <ItemContent>
-          <ItemTitle>AI Project Summary</ItemTitle>
-          <ItemDescription>
-            {project.aiSummary || 'AI summary will appear here'}
-          </ItemDescription>
-        </ItemContent>
-      </Item>
-
       {/* Project Timeline */}
-      <div className="flex flex-col gap-3">
+      <div ref={timelineRef} data-ai-section="project-timeline" className="flex flex-col gap-3">
         <div className="flex items-center justify-between">
           <h2 className="text-lg font-semibold">Project Timeline</h2>
           <div className="flex items-center gap-2">
@@ -306,7 +330,7 @@ export function ProjectDetail({ projectId }: ProjectDetailProps) {
       </div>
 
       {/* Tasks Kanban */}
-      <div className="flex flex-col gap-3">
+      <div ref={tasksRef} data-ai-section="project-tasks" className="flex flex-col gap-3">
         <div className="flex items-center justify-between">
           <h2 className="text-lg font-semibold">Tasks</h2>
           <div className="flex items-center gap-2">
@@ -372,7 +396,7 @@ export function ProjectDetail({ projectId }: ProjectDetailProps) {
       </div>
 
       {/* Notes */}
-      <div className="flex flex-col gap-3">
+      <div ref={notesRef} data-ai-section="project-notes" className="flex flex-col gap-3">
         <div className="flex items-center justify-between">
           <h2 className="text-lg font-semibold">Notes</h2>
           <Button