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>
2026-02-28 14:15:27 +01:00
parent c5e78311e6
commit 15051cfa7a
9 changed files with 375 additions and 122 deletions
--- a/docs/floating-ai-integration-guide.md
+++ b/docs/floating-ai-integration-guide.md
@@ -959,7 +959,7 @@ const { state: floatingState } = useFloatingChat();

 ## Step 8a: Page Interactions — Project Detail

-**Status**: [ ]
+**Status**: [x] (2026-02-28)
 **Prerequisites**: Steps 1-4 completed
 **Modifies**: `src/renderer/components/projects/ProjectDetail.tsx`

@@ -1022,7 +1022,7 @@ Repeat for all 4 sections.

 ## Step 8b: Page Interactions — Tasks Page

-**Status**: [ ]
+**Status**: [x] (2026-02-28)
 **Prerequisites**: Steps 1-4 completed
 **Modifies**: `src/renderer/routes/tasks.tsx`

@@ -1055,7 +1055,7 @@ Same pattern as 8a — create refs, add `data-ai-section` attributes, register i

 ## Step 8c: Page Interactions — Timeline Page

-**Status**: [ ]
+**Status**: [x] (2026-02-28)
 **Prerequisites**: Steps 1-4 completed
 **Modifies**: `src/renderer/routes/timeline.tsx`

@@ -1082,7 +1082,7 @@ Register 1 section:

 ## Step 8d: Page Interactions — Notes Page (Milkdown)

-**Status**: [ ]
+**Status**: [x] (2026-02-28)
 **Prerequisites**: Steps 1-4 completed
 **Modifies**: `src/renderer/routes/notes.$noteId.tsx`

--- a/src/renderer/components/ai/FloatingChat.tsx
+++ b/src/renderer/components/ai/FloatingChat.tsx
@@ -1,10 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
-import { useRouterState } from '@tanstack/react-router';
+import { useNavigate, useRouterState } from '@tanstack/react-router';
 import { X, ArrowUp } from 'lucide-react';
 import {
  useFloatingChat,
+  computeDualAnchor,
  CHAT_WIDTH,
  CHAT_HEIGHT,
  PADDING,
@@ -14,9 +15,22 @@ import { ChatMarkdown } from '@/components/ai/AIChatPanel';
 import { Skeleton } from '@/components/ui/skeleton';
 import { trpc } from '@/lib/trpc';

+/** Map section IDs to their routes for cross-page navigation */
+const SECTION_ROUTES: Record<string, string> = {
+  'project-summary': 'project',
+  'project-timeline': 'project',
+  'project-tasks': 'project',
+  'project-notes': 'project',
+  'tasks-overview': '/tasks',
+  'tasks-list': '/tasks',
+  'timeline-chart': '/timeline',
+  'note-editor': 'note',
+};
+
 function FloatingChatInner() {
-  const { state, sections, close, setMorphTarget } = useFloatingChat();
+  const { state, sections, close, setMorphTarget, moveToSection, updatePosition, setPendingSection } = useFloatingChat();
  const utils = trpc.useUtils();
+  const navigate = useNavigate();
  const routerState = useRouterState();
  const prevPathRef = useRef(routerState.location.pathname);

@@ -33,6 +47,32 @@ function FloatingChatInner() {
    [activeSection?.projectId, activeSection?.label],
  );

+  // Handle [SECTION:xxx] tags from AI responses
+  const handleSectionTag = useCallback((sectionId: string) => {
+    // Same-page: section is already registered
+    const targetSection = sections.get(sectionId);
+    if (targetSection) {
+      moveToSection(sectionId);
+      targetSection.ref.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      return;
+    }
+
+    // Cross-page: section not registered, navigate to its route
+    const route = SECTION_ROUTES[sectionId];
+    if (!route) return;
+
+    setPendingSection({ sectionId });
+
+    if (route === 'project' && state.projectId) {
+      // Navigate to the project page (stay on same project)
+      // Project sections re-register on mount and pendingSection will auto-open
+      void navigate({ to: '/projects/$projectId', params: { projectId: state.projectId } });
+    } else if (route.startsWith('/')) {
+      void navigate({ to: route });
+    }
+    // 'note' type requires noteId — skip cross-page for now
+  }, [sections, moveToSection, setPendingSection, state.projectId, navigate]);
+
  const {
    messages,
    input,
@@ -41,7 +81,7 @@ function FloatingChatInner() {
    streamingContent,
    handleSend,
    clearMessages,
-  } = useAIChat(chatContext);
+  } = useAIChat(chatContext, { onSectionTag: handleSectionTag });

  const containerRef = useRef<HTMLDivElement>(null);

@@ -59,15 +99,15 @@ function FloatingChatInner() {
    return () => document.removeEventListener('keydown', handler);
  }, [state.isOpen, close]);

-  // ---- Close on route change ----
+  // ---- Close on route change (unless cross-page navigation pending) ----

  useEffect(() => {
    const currentPath = routerState.location.pathname;
-    if (prevPathRef.current !== currentPath && state.isOpen) {
+    if (prevPathRef.current !== currentPath && state.isOpen && !state.pendingSection) {
      close();
    }
    prevPathRef.current = currentPath;
-  }, [routerState.location.pathname, state.isOpen, close]);
+  }, [routerState.location.pathname, state.isOpen, state.pendingSection, close]);

  // ---- Clear messages on close ----

@@ -123,6 +163,51 @@ function FloatingChatInner() {
    return () => window.removeEventListener('resize', handler);
  }, [state.isOpen, state.position.x, state.position.y]);

+  // ---- Scroll tracking: dual-anchor repositioning ----
+
+  useEffect(() => {
+    if (!state.isOpen || !state.activeSectionId) return;
+    const section = sections.get(state.activeSectionId);
+    if (!section || section.anchorMode === 'right-margin') return;
+
+    const el = section.ref.current;
+    if (!el) return;
+
+    // Find scrollable ancestor
+    let scrollParent: HTMLElement | null = el.parentElement;
+    while (scrollParent) {
+      const style = getComputedStyle(scrollParent);
+      if (style.overflow === 'auto' || style.overflow === 'scroll' ||
+          style.overflowY === 'auto' || style.overflowY === 'scroll') {
+        break;
+      }
+      // Also check for Radix ScrollArea viewport
+      if (scrollParent.hasAttribute('data-radix-scroll-area-viewport')) break;
+      scrollParent = scrollParent.parentElement;
+    }
+
+    if (!scrollParent) return;
+
+    let rafId: number | null = null;
+    const handleScroll = () => {
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        const newPos = computeDualAnchor(section);
+        if (newPos) {
+          updatePosition(newPos);
+        }
+        // null = fully off-screen → freeze (do nothing)
+      });
+    };
+
+    scrollParent.addEventListener('scroll', handleScroll, { passive: true });
+    return () => {
+      scrollParent.removeEventListener('scroll', handleScroll);
+      if (rafId !== null) cancelAnimationFrame(rafId);
+    };
+  }, [state.isOpen, state.activeSectionId, sections, updatePosition]);
+
  // ---- Auto-scroll messages ----

  const scrollRef = useRef<HTMLDivElement>(null);
--- a/src/renderer/components/projects/ProjectDetail.tsx
+++ b/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
--- a/src/renderer/context/FloatingChatContext.tsx
+++ b/src/renderer/context/FloatingChatContext.tsx
@@ -16,6 +16,11 @@ export interface AISection {
  label: string; // Human-readable, e.g. "Tasks", "Project Timeline"
  ref: RefObject<HTMLElement | null>;
  projectId?: string; // If section is project-scoped
+  anchorMode?: 'top-right' | 'right-margin'; // default: 'top-right'
+}
+
+export interface SectionOpenOpts {
+  clickY?: number; // For right-margin mode: Y-coordinate of the double-click
 }

 interface FloatingChatState {
@@ -24,6 +29,7 @@ interface FloatingChatState {
  position: { x: number; y: number; width: number };
  morphTargetId: string | null;
  projectId?: string;
+  pendingSection?: { sectionId: string; clickY?: number }; // For cross-page navigation
 }

 interface FloatingChatContextValue {
@@ -36,10 +42,12 @@ interface FloatingChatContextValue {
  unregisterSection: (id: string) => void;

  // Actions
-  openAtSection: (sectionId: string) => void;
-  moveToSection: (sectionId: string) => void;
+  openAtSection: (sectionId: string, opts?: SectionOpenOpts) => void;
+  moveToSection: (sectionId: string, opts?: SectionOpenOpts) => void;
  close: () => void;
  setMorphTarget: (id: string | null) => void;
+  updatePosition: (pos: { x: number; y: number; width: number }) => void;
+  setPendingSection: (pending: { sectionId: string; clickY?: number } | undefined) => void;
 }

 // ---------- Constants ----------
@@ -50,25 +58,79 @@ export const PADDING = 16;

 // ---------- Position computation ----------

+function clampPosition(x: number, y: number): { x: number; y: number } {
+  return {
+    x: Math.max(PADDING, Math.min(x, window.innerWidth - CHAT_WIDTH - PADDING)),
+    y: Math.max(PADDING, Math.min(y, window.innerHeight - CHAT_HEIGHT - PADDING)),
+  };
+}
+
 function computeAnchorPosition(
-  sectionRef: RefObject<HTMLElement | null>,
+  section: AISection,
+  opts?: SectionOpenOpts,
 ): { x: number; y: number; width: number } {
-  const el = sectionRef.current;
+  const el = section.ref.current;
  if (!el) return { x: PADDING, y: PADDING, width: CHAT_WIDTH };

  const rect = el.getBoundingClientRect();
+  const mode = section.anchorMode ?? 'top-right';

-  // Anchor to top-right of section, offset inward
-  let x = rect.right - CHAT_WIDTH - PADDING;
-  let y = rect.top + PADDING;
+  if (mode === 'right-margin') {
+    // Position to the right of the section at the click Y-coordinate
+    const rawX = rect.right + PADDING;
+    const rawY = opts?.clickY ?? rect.top + PADDING;
+    const { x, y } = clampPosition(rawX, rawY);
+    return { x, y, width: CHAT_WIDTH };
+  }

-  // Edge-collision clamping
-  x = Math.max(PADDING, Math.min(x, window.innerWidth - CHAT_WIDTH - PADDING));
-  y = Math.max(
+  // Default: top-right of section
+  const rawX = rect.right - CHAT_WIDTH - PADDING;
+  const rawY = rect.top + PADDING;
+  const { x, y } = clampPosition(rawX, rawY);
+  return { x, y, width: CHAT_WIDTH };
+}
+
+/**
+ * Dual-anchor recomputation for scroll tracking.
+ * Returns null when the section is fully off-screen (freeze at last position).
+ */
+export function computeDualAnchor(
+  section: AISection,
+): { x: number; y: number; width: number } | null {
+  const el = section.ref.current;
+  if (!el) return null;
+
+  // Skip scroll tracking for right-margin mode (stays at fixed clickY)
+  if (section.anchorMode === 'right-margin') return null;
+
+  const rect = el.getBoundingClientRect();
+
+  // Fully off-screen — freeze
+  if (rect.bottom < 0 || rect.top > window.innerHeight) return null;
+
+  // Primary anchor: top-right (when section top is visible)
+  if (rect.top >= PADDING) {
+    const { x, y } = clampPosition(
+      rect.right - CHAT_WIDTH - PADDING,
+      rect.top + PADDING,
+    );
+    return { x, y, width: CHAT_WIDTH };
+  }
+
+  // Fallback anchor: bottom-right (when section top scrolled off)
+  if (rect.bottom > CHAT_HEIGHT) {
+    const { x, y } = clampPosition(
+      rect.right - CHAT_WIDTH - PADDING,
+      rect.bottom - CHAT_HEIGHT - PADDING,
+    );
+    return { x, y, width: CHAT_WIDTH };
+  }
+
+  // Section visible but too small for fallback — clamp to top
+  const { x, y } = clampPosition(
+    rect.right - CHAT_WIDTH - PADDING,
    PADDING,
-    Math.min(y, window.innerHeight - CHAT_HEIGHT - PADDING),
  );
-
  return { x, y, width: CHAT_WIDTH };
 }

@@ -108,6 +170,23 @@ export function FloatingChatProvider({ children }: { children: ReactNode }) {
  const registerSection = useCallback((section: AISection) => {
    sectionsRef.current.set(section.id, section);
    setSections(new Map(sectionsRef.current));
+
+    // Check if there's a pending section to open after cross-page navigation
+    setState((prev) => {
+      if (prev.pendingSection && prev.pendingSection.sectionId === section.id) {
+        const position = computeAnchorPosition(section, { clickY: prev.pendingSection.clickY });
+        return {
+          ...prev,
+          isOpen: true,
+          activeSectionId: section.id,
+          position,
+          morphTargetId: null,
+          projectId: section.projectId,
+          pendingSection: undefined,
+        };
+      }
+      return prev;
+    });
  }, []);

  const unregisterSection = useCallback((id: string) => {
@@ -115,11 +194,11 @@ export function FloatingChatProvider({ children }: { children: ReactNode }) {
    setSections(new Map(sectionsRef.current));
  }, []);

-  const openAtSection = useCallback((sectionId: string) => {
+  const openAtSection = useCallback((sectionId: string, opts?: SectionOpenOpts) => {
    const section = sectionsRef.current.get(sectionId);
    if (!section) return;

-    const position = computeAnchorPosition(section.ref);
+    const position = computeAnchorPosition(section, opts);

    setState({
      isOpen: true,
@@ -130,11 +209,11 @@ export function FloatingChatProvider({ children }: { children: ReactNode }) {
    });
  }, []);

-  const moveToSection = useCallback((sectionId: string) => {
+  const moveToSection = useCallback((sectionId: string, opts?: SectionOpenOpts) => {
    const section = sectionsRef.current.get(sectionId);
    if (!section) return;

-    const position = computeAnchorPosition(section.ref);
+    const position = computeAnchorPosition(section, opts);

    setState((prev) => ({
      ...prev,
@@ -157,6 +236,14 @@ export function FloatingChatProvider({ children }: { children: ReactNode }) {
    setState((prev) => ({ ...prev, morphTargetId: id }));
  }, []);

+  const updatePosition = useCallback((pos: { x: number; y: number; width: number }) => {
+    setState((prev) => ({ ...prev, position: pos }));
+  }, []);
+
+  const setPendingSection = useCallback((pending: { sectionId: string; clickY?: number } | undefined) => {
+    setState((prev) => ({ ...prev, pendingSection: pending }));
+  }, []);
+
  return (
    <FloatingChatCtx.Provider
      value={{
@@ -168,6 +255,8 @@ export function FloatingChatProvider({ children }: { children: ReactNode }) {
        moveToSection,
        close,
        setMorphTarget,
+        updatePosition,
+        setPendingSection,
      }}
    >
      {children}
--- a/src/renderer/hooks/useAIChat.ts
+++ b/src/renderer/hooks/useAIChat.ts
@@ -24,7 +24,11 @@ export interface UseAIChatReturn {
  clearMessages: () => void;
 }

-export function useAIChat(defaultContext: ChatContext): UseAIChatReturn {
+export interface UseAIChatOptions {
+  onSectionTag?: (sectionId: string) => void;
+}
+
+export function useAIChat(defaultContext: ChatContext, options?: UseAIChatOptions): UseAIChatReturn {
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [input, setInput] = useState('');
  const [isStreaming, setIsStreaming] = useState(false);
@@ -58,7 +62,15 @@ export function useAIChat(defaultContext: ChatContext): UseAIChatReturn {

      const unsubscribe = window.electronAI.onStreamChunk(({ token, done }) => {
        if (done) {
-          const finalContent = streamingContentRef.current;
+          let finalContent = streamingContentRef.current;
+
+          // Parse and strip [SECTION:xxx] tag from AI response
+          const sectionMatch = finalContent.match(/^\[SECTION:([\w-]+)\]\s*/);
+          if (sectionMatch) {
+            finalContent = finalContent.slice(sectionMatch[0].length);
+            options?.onSectionTag?.(sectionMatch[1]);
+          }
+
          setMessages((prev) => [
            ...prev,
            { id: crypto.randomUUID(), role: 'assistant', content: finalContent },
--- a/src/renderer/hooks/useDoubleClickAI.ts
+++ b/src/renderer/hooks/useDoubleClickAI.ts
@@ -5,7 +5,7 @@ import { useFloatingChat } from '@/context/FloatingChatContext';
 const INTERACTIVE_TAGS = new Set(['INPUT', 'TEXTAREA', 'SELECT']);

 export function useDoubleClickAI(): void {
-  const { openAtSection, state } = useFloatingChat();
+  const { openAtSection, moveToSection, sections, state } = useFloatingChat();

  useEffect(() => {
    const handler = (e: MouseEvent) => {
@@ -35,10 +35,20 @@ export function useDoubleClickAI(): void {
      // If popup is already open at THIS section, do nothing
      if (state.isOpen && state.activeSectionId === sectionId) return;

-      openAtSection(sectionId);
+      // Build opts for right-margin sections
+      const section = sections.get(sectionId);
+      const opts = section?.anchorMode === 'right-margin' ? { clickY: e.clientY } : undefined;
+
+      // If chat is already open at a different section, move (keep conversation)
+      if (state.isOpen) {
+        moveToSection(sectionId, opts);
+        return;
+      }
+
+      openAtSection(sectionId, opts);
    };

    document.addEventListener('dblclick', handler);
    return () => document.removeEventListener('dblclick', handler);
-  }, [openAtSection, state.isOpen, state.activeSectionId]);
+  }, [openAtSection, moveToSection, sections, state.isOpen, state.activeSectionId]);
 }
--- a/src/renderer/routes/notes.$noteId.tsx
+++ b/src/renderer/routes/notes.$noteId.tsx
@@ -19,6 +19,7 @@ import {
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { trpc } from '@/lib/trpc';
 import { MilkdownEditor } from '@/components/notes/MilkdownEditor';
+import { useFloatingChat } from '@/context/FloatingChatContext';

 export const Route = createFileRoute('/notes/$noteId')({
  component: NoteDetailPage,
@@ -29,6 +30,21 @@ function NoteDetailPage() {
  const utils = trpc.useUtils();
  const { data: note, isLoading } = trpc.notes.get.useQuery({ id: noteId });

+  // AI section — register with right-margin anchor mode
+  const editorRef = useRef<HTMLDivElement>(null);
+  const { registerSection, unregisterSection } = useFloatingChat();
+  const noteProjectId = note?.projectId ?? undefined;
+  useEffect(() => {
+    registerSection({
+      id: 'note-editor',
+      label: 'Note Editor',
+      ref: editorRef,
+      projectId: noteProjectId,
+      anchorMode: 'right-margin',
+    });
+    return () => unregisterSection('note-editor');
+  }, [noteId, noteProjectId, registerSection, unregisterSection]);
+
  const [title, setTitle] = useState('');
  const [isSaving, setIsSaving] = useState(false);
  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -188,7 +204,7 @@ function NoteDetailPage() {
      </div>

      {/* Editor */}
-      <ScrollArea className="flex-1 min-h-0">
+      <ScrollArea ref={editorRef} data-ai-section="note-editor" className="flex-1 min-h-0">
        <div className="px-4 py-4">
          <MilkdownEditor
            key={noteId}
--- a/src/renderer/routes/tasks.tsx
+++ b/src/renderer/routes/tasks.tsx
@@ -41,12 +41,17 @@ const ORDER_LABELS: Record<OrderBy, string> = {
 };

 function TasksPage() {
-  // Temporary test: register section for floating AI chat
-  const testRef = useRef<HTMLDivElement>(null);
+  // AI section refs
+  const overviewRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
  const { state: floatingState, registerSection, unregisterSection } = useFloatingChat();
  useEffect(() => {
-    registerSection({ id: 'test', label: 'Tasks', ref: testRef });
-    return () => unregisterSection('test');
+    registerSection({ id: 'tasks-overview', label: 'Tasks Overview', ref: overviewRef });
+    registerSection({ id: 'tasks-list', label: 'Task List', ref: listRef });
+    return () => {
+      unregisterSection('tasks-overview');
+      unregisterSection('tasks-list');
+    };
  }, [registerSection, unregisterSection]);

  const [search, setSearch] = useState('');
@@ -121,7 +126,7 @@ function TasksPage() {
  return (
    <div className="flex flex-col gap-6 p-6 w-full">
      {/* Stat Cards */}
-      <div className="grid grid-cols-4 gap-4">
+      <div ref={overviewRef} data-ai-section="tasks-overview" className="grid grid-cols-4 gap-4">
        <Item variant="muted">
          <ItemMedia variant="icon">
            <ClipboardCheck />
@@ -160,50 +165,52 @@ function TasksPage() {
        </Item>
      </div>

-      {/* Search + Order By */}
-      <div className="flex items-center gap-3">
-        <InputGroup className="flex-1">
-          <InputGroupAddon>
-            <Search />
-          </InputGroupAddon>
-          <InputGroupInput
-            placeholder="Search tasks or projects..."
-            value={search}
-            onChange={(e) => handleSearchChange(e.target.value)}
-          />
-        </InputGroup>
-        <Select value={orderBy} onValueChange={(v) => setOrderBy(v as OrderBy)}>
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Order by" />
-          </SelectTrigger>
-          <SelectContent>
-            {(Object.entries(ORDER_LABELS) as [OrderBy, string][]).map(([key, label]) => (
-              <SelectItem key={key} value={key}>
-                {label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
+      {/* Task List Section */}
+      <div ref={listRef} data-ai-section="tasks-list" className="flex flex-col gap-6">
+        {/* Search + Order By */}
+        <div className="flex items-center gap-3">
+          <InputGroup className="flex-1">
+            <InputGroupAddon>
+              <Search />
+            </InputGroupAddon>
+            <InputGroupInput
+              placeholder="Search tasks or projects..."
+              value={search}
+              onChange={(e) => handleSearchChange(e.target.value)}
+            />
+          </InputGroup>
+          <Select value={orderBy} onValueChange={(v) => setOrderBy(v as OrderBy)}>
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="Order by" />
+            </SelectTrigger>
+            <SelectContent>
+              {(Object.entries(ORDER_LABELS) as [OrderBy, string][]).map(([key, label]) => (
+                <SelectItem key={key} value={key}>
+                  {label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>

-      {/* Status Filter Tabs + New Task Button */}
-      <div ref={testRef} data-ai-section="test" className="flex items-center justify-between">
-        <Tabs value={statusFilter} onValueChange={(v) => setStatusFilter(v as StatusFilter)}>
-          <TabsList>
-            <TabsTrigger value="all">All</TabsTrigger>
-            <TabsTrigger value="todo">To Do</TabsTrigger>
-            <TabsTrigger value="in_progress">In Progress</TabsTrigger>
-            <TabsTrigger value="done">Completed</TabsTrigger>
-          </TabsList>
-        </Tabs>
-        <Button size="sm" onClick={() => setDialogOpen(true)}>
-          <Plus className="h-4 w-4 mr-1" />
-          New Task
-        </Button>
-      </div>
+        {/* Status Filter Tabs + New Task Button */}
+        <div className="flex items-center justify-between">
+          <Tabs value={statusFilter} onValueChange={(v) => setStatusFilter(v as StatusFilter)}>
+            <TabsList>
+              <TabsTrigger value="all">All</TabsTrigger>
+              <TabsTrigger value="todo">To Do</TabsTrigger>
+              <TabsTrigger value="in_progress">In Progress</TabsTrigger>
+              <TabsTrigger value="done">Completed</TabsTrigger>
+            </TabsList>
+          </Tabs>
+          <Button size="sm" onClick={() => setDialogOpen(true)}>
+            <Plus className="h-4 w-4 mr-1" />
+            New Task
+          </Button>
+        </div>

-      {/* Task List */}
-      <div className="flex flex-col gap-1">
+        {/* Task List */}
+        <div className="flex flex-col gap-1">
        {tasksList.length === 0 ? (
          <Empty>
            <EmptyHeader>
@@ -233,6 +240,7 @@ function TasksPage() {
            />
          ))
        )}
+        </div>
      </div>

      <NewTaskDialog open={dialogOpen} onOpenChange={setDialogOpen} />
--- a/src/renderer/routes/timeline.tsx
+++ b/src/renderer/routes/timeline.tsx
@@ -1,6 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router';
-import { useState, useMemo } from 'react';
+import { useEffect, useRef, useState, useMemo } from 'react';
 import { Plus } from 'lucide-react';
+import { useFloatingChat } from '@/context/FloatingChatContext';
 import { trpc } from '@/lib/trpc';
 import { Button } from '@/components/ui/button';
 import { GanttChart, type GanttCheckpoint } from '@/components/timeline/GanttChart';
@@ -15,6 +16,14 @@ function TimelinePage() {
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editingCheckpoint, setEditingCheckpoint] = useState<GanttCheckpoint | null>(null);

+  // AI section
+  const timelineRef = useRef<HTMLDivElement>(null);
+  const { registerSection, unregisterSection } = useFloatingChat();
+  useEffect(() => {
+    registerSection({ id: 'timeline-chart', label: 'Timeline', ref: timelineRef });
+    return () => unregisterSection('timeline-chart');
+  }, [registerSection, unregisterSection]);
+
  const { data: checkpoints } = trpc.checkpoints.list.useQuery({});
  const { data: projectsList } = trpc.projects.listAll.useQuery();
  const utils = trpc.useUtils();
@@ -70,7 +79,7 @@ function TimelinePage() {
  }, [ganttCheckpoints]);

  return (
-    <div className="flex flex-col gap-6 p-6 w-full">
+    <div ref={timelineRef} data-ai-section="timeline-chart" className="flex flex-col gap-6 p-6 w-full">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-semibold">Timeline</h1>