feat(AIChatPanel): enhance daily brief with animation and expand/collapse functionality; add GradualBlur component for improved UI

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>

.claude/CLAUDE.md

@@ -108,3 +108,32 @@ LanceDB stored in `{userData}/vectors/`. Table schema: `{ id, projectId, content
 - Tailwind 4 (not 3) — use CSS variable theming via `globals.css`, not `tailwind.config.js`
 - Notes use Milkdown (`@milkdown/crepe`) as the markdown editor (`src/renderer/components/notes/MilkdownEditor.tsx`)
 - Routes: `index`, `tasks`, `timeline`, `projects`, `notes.$noteId` (note ID is a URL param)
+
+## Design Context
+
+### Users
+Freelancers and solo professionals managing their own client work — projects, tasks, notes, and timelines. They work alone and need a single workspace that keeps everything organized without the overhead of enterprise tools. The AI assistant is a force multiplier, helping them stay on top of their workload.
+
+### Brand Personality
+**Calm, intelligent, warm.** Adiuva is a thoughtful companion, not a flashy tool. It should feel like a well-organized desk — everything in its place, nothing competing for attention. The tone is confident and understated, never loud or gamified.
+
+### Aesthetic Direction
+- **Visual tone**: Editorial, premium, content-first. Inspired by Notion's clean typography and warm neutrals, but with a distinct identity through the warm pinkish-white canvas and golden yellow accent
+- **Light mode**: Soft and warm — pinkish-white (`#f4edf3`) canvas, golden yellow (`#fbc881`) primary, slate blue-gray (`#8a8ea9`) secondary, dusty lavender borders (`#c8c3cd`)
+- **Dark mode**: Stark monochrome — near-black canvas (`#0c0c0c`), crisp white text, dark gray surfaces (`#323232`). No color accent; primary is pure white
+- **Typography**: Geist (geometric sans-serif) at 400/500/600. Tight tracking on large headings (`-1px`). Body at `text-sm`, metadata at `text-xs`
+- **Corners**: 10px base radius, consistently rounded. Chat elements use `rounded-2xl`
+- **Signature effects**: Glassmorphism on AI inputs/floating chat (`backdrop-blur-xl`, transparency). Spring physics animations (stiffness 400, damping 30). Subtle scale-and-fade transitions
+- **Anti-references**: No gamification (badges, streaks, confetti). No corporate/enterprise density. Keep it mature and professional
+
+### Design Principles
+
+1. **Clarity over cleverness** — Every element should communicate its purpose instantly. Prefer clear hierarchy and whitespace over decorative flourish. Information density should feel comfortable, not cramped.
+
+2. **AI as quiet partner** — The AI is deeply integrated (floating chat, suggestions) but never intrusive. AI-suggested items use dashed borders to signal "pending." The Sparkles icon is the consistent AI identity marker.
+
+3. **Warmth in restraint** — The palette is deliberately warm (pinkish whites, golden yellows) to feel approachable without being playful. Dark mode trades warmth for focus. Let the content breathe.
+
+4. **Motion with purpose** — Spring physics and glassmorphism create a sense of physicality and depth. Animations should feel natural and responsive, never decorative or slow. Every transition should reinforce spatial relationships.
+
+5. **Confidence through consistency** — Use the established token system (CSS variables, shadcn/ui primitives, Geist font). The user should feel in control — predictable patterns, keyboard-first interactions, no surprises.

.claude/settings.local.json

@@ -1,6 +0,0 @@
-{
-  "enabledMcpjsonServers": [
-    "shadcn"
-  ],
-  "enableAllProjectMcpServers": true
-}

.gitignore

@@ -90,3 +90,7 @@ typings/
 
 # Electron-Forge
 out/
+
+# local config files
+.vscode/
+

.vscode/mcp.json

@@ -1,11 +0,0 @@
-{
-  "servers": {
-    "shadcn": {
-      "command": "npx",
-      "args": [
-        "shadcn@latest",
-        "mcp"
-      ]
-    }
-  }
-}

docs/floating-ai-integration-guide.md

@@ -8,7 +8,7 @@ This document is designed to be consumed **one step at a time across multiple Cl
 
 ### Workflow Protocol for Each Step
 
-1. **Start a new chat** and say: _"Read `docs/floating-ai-integration-guide.md` and implement Step X"_
+1. **Start a new chat** and say: _"Implement Step [X] from `docs/floating-ai-integration-guide.md`. Use a subagent to extract the general rules and only the data relevant to Step [X], completely ignoring the other steps."_
 2. **Before writing any code**, the agent MUST:
    - Read ALL files listed in the step's "Files to Read First" section
    - Read the project's `CLAUDE.md` for build/lint commands and conventions
@@ -31,13 +31,13 @@ Steps MUST be implemented in order. Each step lists its prerequisites.
 
 | Step | Title | Status |
 |------|-------|--------|
-| 1 | Extract shared `useAIChat` hook | [ ] |
-| 2 | Create section registry + `FloatingChatContext` | [ ] |
-| 3 | Create double-click hook | [ ] |
-| 4 | Build `FloatingChat` component | [ ] |
-| 5 | Add `ai:action` IPC side-channel | [ ] |
-| 6 | Pass `uiContext` through to the AI | [ ] |
-| 7 | Implement morph animation (FLIP) | [ ] |
+| 1 | Extract shared `useAIChat` hook | [x] 2026-02-27 |
+| 2 | Create section registry + `FloatingChatContext` | [x] 2026-02-27 |
+| 3 | Create double-click hook | [x] 2026-02-27 |
+| 4 | Build `FloatingChat` component | [x] 2026-02-27 |
+| 5 | Add `ai:action` IPC side-channel | [x] 2026-02-28 |
+| 6 | Pass `uiContext` through to the AI | [x] 2026-02-28 |
+| 7 | Implement morph animation (FLIP) | [x] 2026-02-28 |
 | 8a | Page interactions — Project Detail | [ ] |
 | 8b | Page interactions — Tasks page | [ ] |
 | 8c | Page interactions — Timeline page | [ ] |
@@ -56,7 +56,7 @@ A partial implementation of Step 1 already exists:
 
 ## Step 1: Extract Shared `useAIChat` Hook
 
-**Status**: [ ]
+**Status**: [x] 2026-02-27
 **Prerequisites**: None
 **Creates**: Nothing new (hook file already exists at `src/renderer/hooks/useAIChat.ts`)
 **Modifies**: `src/renderer/components/ai/AIChatPanel.tsx`
@@ -142,7 +142,7 @@ Refactor `AIChatPanel.tsx` to consume `useAIChat` instead of managing chat state
 
 ## Step 2: Create Section Registry + `FloatingChatContext`
 
-**Status**: [ ]
+**Status**: [x] 2026-02-27
 **Prerequisites**: Step 1 completed
 **Creates**: `src/renderer/context/FloatingChatContext.tsx`
 **Modifies**: `src/renderer/components/layout/AppShell.tsx`
@@ -355,7 +355,7 @@ return (
 
 ## Step 3: Create Double-Click Hook
 
-**Status**: [ ]
+**Status**: [x] 2026-02-27
 **Prerequisites**: Step 2 completed
 **Creates**: `src/renderer/hooks/useDoubleClickAI.ts`
 **Modifies**: `src/renderer/components/layout/AppShell.tsx` (add hook call)
@@ -452,7 +452,7 @@ function AppShellInner({ children }: AppShellProps) {
 
 ## Step 4: Build `FloatingChat` Component
 
-**Status**: [ ]
+**Status**: [x] 2026-02-27
 **Prerequisites**: Steps 1-3 completed
 **Creates**: `src/renderer/components/ai/FloatingChat.tsx`
 **Modifies**: `src/renderer/components/layout/AppShell.tsx` (render the portal)
@@ -642,7 +642,7 @@ Use these existing patterns from the codebase:
 
 ## Step 5: Add `ai:action` IPC Side-Channel
 
-**Status**: [ ]
+**Status**: [x] (2026-02-28)
 **Prerequisites**: Step 4 completed
 **Modifies**:
 - `src/preload/trpc.ts`
@@ -740,7 +740,7 @@ currentSender = sender;
 
 ## Step 6: Pass `uiContext` Through to the AI
 
-**Status**: [ ]
+**Status**: [x] (2026-02-28)
 **Prerequisites**: Step 5 completed
 **Modifies**:
 - `src/main/router/index.ts` (line ~550-556)
@@ -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`
 

scripts/ralph/CLAUDE.md

@@ -1,105 +0,0 @@
-# Ralph Agent Instructions
-
-You are an autonomous coding agent working on a software project.
-
-## Your Task
-
-1. Read the full app PRD at `prd-main.md` (in the same directory as this file)
-2. Read the PRD at `prd.json` (in the same directory as this file)
-3. Read the progress log at `progress.txt` (check Codebase Patterns section first)
-4. Check you're on the correct branch from PRD `branchName`. If not, check it out or create from main.
-5. Pick the **highest priority** user story where `passes: false`
-6. Implement that single user story
-7. Run quality checks (e.g., typecheck, lint, test - use whatever your project requires)
-8. Update CLAUDE.md files if you discover reusable patterns (see below)
-9. If checks pass, commit ALL changes with message: `feat: [Story ID] - [Story Title]`
-10. Update the PRD to set `passes: true` for the completed story
-11. Append your progress to `progress.txt`
-
-## Progress Report Format
-
-APPEND to progress.txt (never replace, always append):
-```
-## [Date/Time] - [Story ID]
-- What was implemented
-- Files changed
-- **Learnings for future iterations:**
-  - Patterns discovered (e.g., "this codebase uses X for Y")
-  - Gotchas encountered (e.g., "don't forget to update Z when changing W")
-  - Useful context (e.g., "the evaluation panel is in component X")
----
-```
-
-The learnings section is critical - it helps future iterations avoid repeating mistakes and understand the codebase better.
-
-## Consolidate Patterns
-
-If you discover a **reusable pattern** that future iterations should know, add it to the `## Codebase Patterns` section at the TOP of progress.txt (create it if it doesn't exist). This section should consolidate the most important learnings:
-
-```
-## Codebase Patterns
-- Example: Use `sql<number>` template for aggregations
-- Example: Always use `IF NOT EXISTS` for migrations
-- Example: Export types from actions.ts for UI components
-```
-
-Only add patterns that are **general and reusable**, not story-specific details.
-
-## Update CLAUDE.md Files
-
-Before committing, check if any edited files have learnings worth preserving in nearby CLAUDE.md files:
-
-1. **Identify directories with edited files** - Look at which directories you modified
-2. **Check for existing CLAUDE.md** - Look for CLAUDE.md in those directories or parent directories
-3. **Add valuable learnings** - If you discovered something future developers/agents should know:
-   - API patterns or conventions specific to that module
-   - Gotchas or non-obvious requirements
-   - Dependencies between files
-   - Testing approaches for that area
-   - Configuration or environment requirements
-
-**Examples of good CLAUDE.md additions:**
-- "When modifying X, also update Y to keep them in sync"
-- "This module uses pattern Z for all API calls"
-- "Tests require the dev server running on PORT 3000"
-- "Field names must match the template exactly"
-
-**Do NOT add:**
-- Story-specific implementation details
-- Temporary debugging notes
-- Information already in progress.txt
-
-Only update CLAUDE.md if you have **genuinely reusable knowledge** that would help future work in that directory.
-
-## Quality Requirements
-
-- ALL commits must pass your project's quality checks (typecheck, lint, test)
-- Do NOT commit broken code
-- Keep changes focused and minimal
-- Follow existing code patterns
-
-## Browser Testing (If Available)
-
-For any story that changes UI, verify it works in the browser if you have browser testing tools configured (e.g., via MCP):
-
-1. Navigate to the relevant page
-2. Verify the UI changes work as expected
-3. Take a screenshot if helpful for the progress log
-
-If no browser tools are available, note in your progress report that manual browser verification is needed.
-
-## Stop Condition
-
-After completing a user story, check if ALL stories have `passes: true`.
-
-If ALL stories are complete and passing, reply with:
-<promise>COMPLETE</promise>
-
-If there are still stories with `passes: false`, end your response normally (another iteration will pick up the next story).
-
-## Important
-
-- Work on ONE story per iteration
-- Commit frequently
-- Keep CI green
-- Read the Codebase Patterns section in progress.txt before starting

scripts/ralph/ralph.sh

@@ -1,113 +0,0 @@
-#!/bin/bash
-# Ralph Wiggum - Long-running AI agent loop
-# Usage: ./ralph.sh [--tool amp|claude] [max_iterations]
-
-set -e
-
-# Parse arguments
-TOOL="claude"  # Default to claude for backwards compatibility
-MAX_ITERATIONS=10
-
-while [[ $# -gt 0 ]]; do
-  case $1 in
-    --tool)
-      TOOL="$2"
-      shift 2
-      ;;
-    --tool=*)
-      TOOL="${1#*=}"
-      shift
-      ;;
-    *)
-      # Assume it's max_iterations if it's a number
-      if [[ "$1" =~ ^[0-9]+$ ]]; then
-        MAX_ITERATIONS="$1"
-      fi
-      shift
-      ;;
-  esac
-done
-
-# Validate tool choice
-if [[ "$TOOL" != "amp" && "$TOOL" != "claude" ]]; then
-  echo "Error: Invalid tool '$TOOL'. Must be 'amp' or 'claude'."
-  exit 1
-fi
-SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
-PRD_FILE="$SCRIPT_DIR/prd.json"
-PROGRESS_FILE="$SCRIPT_DIR/progress.txt"
-ARCHIVE_DIR="$SCRIPT_DIR/archive"
-LAST_BRANCH_FILE="$SCRIPT_DIR/.last-branch"
-
-# Archive previous run if branch changed
-if [ -f "$PRD_FILE" ] && [ -f "$LAST_BRANCH_FILE" ]; then
-  CURRENT_BRANCH=$(jq -r '.branchName // empty' "$PRD_FILE" 2>/dev/null || echo "")
-  LAST_BRANCH=$(cat "$LAST_BRANCH_FILE" 2>/dev/null || echo "")
-  
-  if [ -n "$CURRENT_BRANCH" ] && [ -n "$LAST_BRANCH" ] && [ "$CURRENT_BRANCH" != "$LAST_BRANCH" ]; then
-    # Archive the previous run
-    DATE=$(date +%Y-%m-%d)
-    # Strip "ralph/" prefix from branch name for folder
-    FOLDER_NAME=$(echo "$LAST_BRANCH" | sed 's|^ralph/||')
-    ARCHIVE_FOLDER="$ARCHIVE_DIR/$DATE-$FOLDER_NAME"
-    
-    echo "Archiving previous run: $LAST_BRANCH"
-    mkdir -p "$ARCHIVE_FOLDER"
-    [ -f "$PRD_FILE" ] && cp "$PRD_FILE" "$ARCHIVE_FOLDER/"
-    [ -f "$PROGRESS_FILE" ] && cp "$PROGRESS_FILE" "$ARCHIVE_FOLDER/"
-    echo "   Archived to: $ARCHIVE_FOLDER"
-    
-    # Reset progress file for new run
-    echo "# Ralph Progress Log" > "$PROGRESS_FILE"
-    echo "Started: $(date)" >> "$PROGRESS_FILE"
-    echo "---" >> "$PROGRESS_FILE"
-  fi
-fi
-
-# Track current branch
-if [ -f "$PRD_FILE" ]; then
-  CURRENT_BRANCH=$(jq -r '.branchName // empty' "$PRD_FILE" 2>/dev/null || echo "")
-  if [ -n "$CURRENT_BRANCH" ]; then
-    echo "$CURRENT_BRANCH" > "$LAST_BRANCH_FILE"
-  fi
-fi
-
-# Initialize progress file if it doesn't exist
-if [ ! -f "$PROGRESS_FILE" ]; then
-  echo "# Ralph Progress Log" > "$PROGRESS_FILE"
-  echo "Started: $(date)" >> "$PROGRESS_FILE"
-  echo "---" >> "$PROGRESS_FILE"
-fi
-
-echo "Starting Ralph - Tool: $TOOL - Max iterations: $MAX_ITERATIONS"
-
-for i in $(seq 1 $MAX_ITERATIONS); do
-  echo ""
-  echo "==============================================================="
-  echo "  Ralph Iteration $i of $MAX_ITERATIONS ($TOOL)"
-  echo "==============================================================="
-
-  # Run the selected tool with the ralph prompt
-  if [[ "$TOOL" == "amp" ]]; then
-    OUTPUT=$(cat "$SCRIPT_DIR/prompt.md" | amp --dangerously-allow-all 2>&1 | tee /dev/stderr) || true
-  else
-    # Claude Code: use --dangerously-skip-permissions for autonomous operation, --print for output
-    OUTPUT=$(claude --dangerously-skip-permissions --print < "$SCRIPT_DIR/CLAUDE.md" 2>&1 | tee /dev/stderr) || true
-  fi
-  
-  # Check for completion signal
-  if echo "$OUTPUT" | grep -q "<promise>COMPLETE</promise>"; then
-    echo ""
-    echo "Ralph completed all tasks!"
-    echo "Completed at iteration $i of $MAX_ITERATIONS"
-    exit 0
-  fi
-  
-  echo "Iteration $i complete. Continuing..."
-  sleep 2
-done
-
-echo ""
-echo "Ralph reached max iterations ($MAX_ITERATIONS) without completing all tasks."
-echo "Check $PROGRESS_FILE for status."
-exit 1

src/main/ai/orchestrator.ts

@@ -24,6 +24,10 @@ import { searchNotes, type SearchResult } from '../db/vectordb';
 const TOOL_CALLING_PROVIDERS = new Set(['openai', 'anthropic', 'copilot']);
 
 const AI_STREAM_CHANNEL = 'ai:stream';
+const AI_ACTION_CHANNEL = 'ai:action';
+
+/** Module-level sender ref — set at the start of orchestrate() so tool closures can emit actions. */
+let currentSender: Electron.WebContents | undefined;
 
 // ---------------------------------------------------------------------------
 // Types
@@ -31,7 +35,7 @@ const AI_STREAM_CHANNEL = 'ai:stream';
 
 export interface OrchestrateInput {
   message: string;
-  context: { type: 'global' | 'project'; projectId?: string };
+  context: { type: 'global' | 'project'; projectId?: string; uiContext?: string };
   sender?: Electron.WebContents;
 }
 
@@ -185,9 +189,11 @@ function buildProjectTools(projectId: string): StructuredTool[] {
           priority: input.priority ?? 'medium',
           dueDate: input.dueDate ? new Date(input.dueDate).getTime() : null,
           projectId,
+          isAiSuggested: 1,
           createdAt: Date.now(),
         })
         .run();
+      sendAction(currentSender, { type: 'task_created', taskId: id });
       return `Task added: ${input.title}`;
     },
     {
@@ -262,6 +268,7 @@ function buildProjectTools(projectId: string): StructuredTool[] {
             createdAt: Date.now(),
           }).run();
         }
+        sendAction(currentSender, { type: 'checkpoints_suggested', count: parsed.length });
         return jsonStr;
       } catch {
         return '[]';
@@ -311,6 +318,7 @@ function buildProjectTools(projectId: string): StructuredTool[] {
             createdAt: Date.now(),
           }).run();
         }
+        sendAction(currentSender, { type: 'tasks_suggested', count: parsed.length });
         return jsonStr;
       } catch {
         return '[]';
@@ -348,9 +356,11 @@ function buildGlobalTools(): StructuredTool[] {
           priority: input.priority ?? 'medium',
           dueDate: input.dueDate ? new Date(input.dueDate).getTime() : null,
           projectId: input.projectId ?? null,
+          isAiSuggested: 1,
           createdAt: Date.now(),
         })
         .run();
+      sendAction(currentSender, { type: 'task_created', taskId: id });
       return `Task added: ${input.title}`;
     },
     {
@@ -435,7 +445,7 @@ function buildKnowledgeTools(): StructuredTool[] {
 // System prompts
 // ---------------------------------------------------------------------------
 
-function makeProjectAgentPrompt(contextData: string, withTools = true): string {
+function makeProjectAgentPrompt(contextData: string, withTools = true, uiContext?: string): string {
   const toolsSection = withTools ? `
 You also have access to the following tools — use them proactively when appropriate:
 - read_project_notes: Fetch full untruncated note content. Use for detailed note questions.
@@ -454,10 +464,10 @@ ${contextData}
 ${toolsSection}
 Answer the user's question based on this project context. Be concise and helpful.
 When referencing tasks, notes, or checkpoints, mention them by name.
-If you don't have enough information, say so.`;
+If you don't have enough information, say so.${uiContext ? `\nThe user is currently viewing the "${uiContext}" section of the UI.\nIf your response relates to a different section (e.g., user asks about checkpoints while viewing Tasks), prefix your response with [SECTION:<section-id>] where section-id matches one of: project-summary, project-timeline, project-tasks, project-notes, tasks-overview, tasks-list, timeline-chart, note-editor.\nOnly use this prefix when the answer clearly belongs in a different section than where the user currently is.` : ''}`;
 }
 
-function makeGeneralAgentPrompt(contextData: string, withTools = true): string {
+function makeGeneralAgentPrompt(contextData: string, withTools = true, uiContext?: string): string {
   const toolsSection = withTools ? `
 You also have access to the following tools — use them proactively when appropriate:
 - add_task: Create a new task. Use whenever the user asks to add, register, or note a to-do item or task.
@@ -471,10 +481,10 @@ You have access to the following workspace data:
 ${contextData}
 ${toolsSection}
 Help the user with their question based on this workspace context. Provide concise, actionable answers.
-When discussing tasks or projects, reference them by name.`;
+When discussing tasks or projects, reference them by name.${uiContext ? `\nThe user is currently viewing the "${uiContext}" section of the UI.\nIf your response relates to a different section (e.g., user asks about checkpoints while viewing Tasks), prefix your response with [SECTION:<section-id>] where section-id matches one of: project-summary, project-timeline, project-tasks, project-notes, tasks-overview, tasks-list, timeline-chart, note-editor.\nOnly use this prefix when the answer clearly belongs in a different section than where the user currently is.` : ''}`;
 }
 
-function makeKnowledgeAgentPrompt(contextData: string, withTools = true): string {
+function makeKnowledgeAgentPrompt(contextData: string, withTools = true, uiContext?: string): string {
   const toolsSection = withTools ? `
 You have access to the following tools — use them proactively:
 - vector_search_all: Performs semantic search across ALL project notes. Always use this tool when the user asks a knowledge question. Pass the user's question (or a refined version) as the query.
@@ -494,7 +504,7 @@ ${contextData}
 ${toolsSection}
 Your primary job is to find and synthesize information from notes across all projects.
 Always use the vector_search_all tool to search for relevant notes before answering.
-If no results are found, say so clearly.`;
+If no results are found, say so clearly.${uiContext ? `\nThe user is currently viewing the "${uiContext}" section of the UI.\nIf your response relates to a different section (e.g., user asks about checkpoints while viewing Tasks), prefix your response with [SECTION:<section-id>] where section-id matches one of: project-summary, project-timeline, project-tasks, project-notes, tasks-overview, tasks-list, timeline-chart, note-editor.\nOnly use this prefix when the answer clearly belongs in a different section than where the user currently is.` : ''}`;
 }
 
 // ---------------------------------------------------------------------------
@@ -505,7 +515,7 @@ const OrchestratorState = Annotation.Root({
   /** The user's original message */
   userMessage: Annotation<string>(),
   /** Chat context (global vs project-scoped) */
-  chatContext: Annotation<{ type: 'global' | 'project'; projectId?: string }>(),
+  chatContext: Annotation<{ type: 'global' | 'project'; projectId?: string; uiContext?: string }>(),
   /** The route chosen by the orchestrator */
   route: Annotation<'project' | 'knowledge' | 'general'>(),
   /** Messages for the specialist agent */
@@ -573,7 +583,8 @@ async function projectAgent(state: State): Promise<Partial<State>> {
   // Including text tool descriptions in the system prompt causes the model to output
   // XML <tool_call> blocks instead of using the SDK's API-level mechanism.
   const includeToolsInPrompt = supportsTools && getActiveProviderName() !== 'copilot';
-  const systemPrompt = makeProjectAgentPrompt(contextData, includeToolsInPrompt);
+  const uiContext = state.chatContext.uiContext;
+  const systemPrompt = makeProjectAgentPrompt(contextData, includeToolsInPrompt, uiContext);
 
   if (!supportsTools) {
     console.log('[Orchestrator] projectAgent: using context-only fallback (no tool support)');
@@ -661,7 +672,8 @@ async function knowledgeAgent(state: State): Promise<Partial<State>> {
 
   const supportsTools = TOOL_CALLING_PROVIDERS.has(getActiveProviderName());
   const includeToolsInPrompt = supportsTools && getActiveProviderName() !== 'copilot';
-  const systemPrompt = makeKnowledgeAgentPrompt(contextData, includeToolsInPrompt);
+  const uiContext = state.chatContext.uiContext;
+  const systemPrompt = makeKnowledgeAgentPrompt(contextData, includeToolsInPrompt, uiContext);
 
   console.log(`[Orchestrator] knowledgeAgent: provider="${getActiveProviderName()}", supportsTools=${supportsTools}`);
 
@@ -739,7 +751,8 @@ async function generalAgent(state: State): Promise<Partial<State>> {
 
   const supportsTools = TOOL_CALLING_PROVIDERS.has(getActiveProviderName());
   const includeToolsInPrompt = supportsTools && getActiveProviderName() !== 'copilot';
-  const systemPrompt = makeGeneralAgentPrompt(contextData, includeToolsInPrompt);
+  const uiContext = state.chatContext.uiContext;
+  const systemPrompt = makeGeneralAgentPrompt(contextData, includeToolsInPrompt, uiContext);
 
   console.log(`[Orchestrator] generalAgent: provider="${getActiveProviderName()}", supportsTools=${supportsTools}`);
 
@@ -849,12 +862,18 @@ function sendStreamChunk(sender: Electron.WebContents | undefined, token: string
   sender.send(AI_STREAM_CHANNEL, { token, done });
 }
 
+function sendAction(sender: Electron.WebContents | undefined, action: { type: string; taskId?: string; count?: number }): void {
+  if (!sender || sender.isDestroyed()) return;
+  sender.send(AI_ACTION_CHANNEL, action);
+}
+
 // ---------------------------------------------------------------------------
 // Orchestrate (public entry point)
 // ---------------------------------------------------------------------------
 
 export async function orchestrate(input: OrchestrateInput): Promise<OrchestrateResult> {
   const { message, context, sender } = input;
+  currentSender = sender;
 
   // Quick check: is an LLM available?
   const llm = await getLLM();

src/main/router/index.ts

@@ -552,6 +552,7 @@ const aiRouter = router({
       context: z.object({
         type: z.enum(['global', 'project']),
         projectId: z.string().optional(),
+        uiContext: z.string().optional(),
       }),
     }))
     .mutation(async ({ input, ctx }) => {

src/preload/trpc.ts

@@ -20,6 +20,7 @@ contextBridge.exposeInMainWorld('electronTRPC', {
 });
 
 const AI_STREAM_CHANNEL = 'ai:stream';
+const AI_ACTION_CHANNEL = 'ai:action';
 
 contextBridge.exposeInMainWorld('electronAI', {
   /** Subscribe to AI streaming chunks. Returns an unsubscribe function. */
@@ -30,4 +31,13 @@ contextBridge.exposeInMainWorld('electronAI', {
       ipcRenderer.removeListener(AI_STREAM_CHANNEL, handler);
     };
   },
+
+  /** Subscribe to AI action events (task created, suggestions, etc.). Returns unsubscribe. */
+  onAction: (cb: (data: { type: string; taskId?: string; count?: number }) => void) => {
+    const handler = (_event: Electron.IpcRendererEvent, data: { type: string; taskId?: string; count?: number }) => cb(data);
+    ipcRenderer.on(AI_ACTION_CHANNEL, handler);
+    return () => {
+      ipcRenderer.removeListener(AI_ACTION_CHANNEL, handler);
+    };
+  },
 });

src/renderer/components/ai/AIChatPanel.tsx

@@ -1,20 +1,14 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
-import { Sparkles, KeyRound, ArrowUp, ListTodo, TrendingUp, AlertCircle, Lightbulb } from 'lucide-react';
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { Sparkles, KeyRound, ArrowUp, ListTodo, TrendingUp, AlertCircle, Lightbulb, ChevronDown, ChevronUp, X } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import { motion, AnimatePresence } from 'framer-motion';
 import { trpc } from '@/lib/trpc';
-import { Card, CardContent } from '@/components/ui/card';
+import { useAIChat, type ChatContext } from '@/hooks/useAIChat';
 import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
 import { Skeleton } from '@/components/ui/skeleton';
 import { ScrollArea } from '@/components/ui/scroll-area';
-
-interface ChatMessage {
-  id: string;
-  role: 'user' | 'assistant';
-  content: string;
-  error?: boolean;
-}
+import { GradualBlur } from '@/components/ui/gradual-blur';
 
 const SUGGESTION_CHIPS = [
   { icon: ListTodo, label: "What's on my plate today?" },
@@ -23,21 +17,35 @@ const SUGGESTION_CHIPS = [
   { icon: Lightbulb, label: 'Suggest next actions' },
 ] as const;
 
+function getTimeGreeting(): string {
+  const hour = new Date().getHours();
+  if (hour < 12) return 'Good morning,';
+  if (hour < 17) return 'Good afternoon,';
+  return 'Good evening,';
+}
+
+/* Entrance animation: staggered fade-up */
+const stagger = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.08 } },
+};
+
+const fadeUp = {
+  hidden: { opacity: 0, y: 16 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.45, ease: [0.25, 0.1, 0.25, 1] as const },
+  },
+};
+
 interface AIChatPanelProps {
   onOpenSettings?: () => void;
-  contextType: 'global' | 'project';
-  projectId?: string;
-  projectName?: string;
-  curtainOpen: boolean;
   isHomePage?: boolean;
 }
 
 export function AIChatPanel({
   onOpenSettings,
-  contextType,
-  projectId,
-  projectName,
-  curtainOpen,
   isHomePage,
 }: AIChatPanelProps) {
   const hasTokenQuery = trpc.ai.hasToken.useQuery();
@@ -46,10 +54,18 @@ export function AIChatPanel({
   const userNameQuery = trpc.settings.getUserName.useQuery(undefined, { enabled: !!isHomePage });
   const dueTodayQuery = trpc.tasks.dueToday.useQuery(undefined, { enabled: !!isHomePage });
 
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const [input, setInput] = useState('');
-  const [isStreaming, setIsStreaming] = useState(false);
-  const [streamingContent, setStreamingContent] = useState('');
+  const chatContext = useMemo<ChatContext>(
+    () => ({ type: 'global' as const }),
+    [],
+  );
+  const {
+    messages,
+    input,
+    setInput,
+    isStreaming,
+    streamingContent,
+    handleSend: chatHandleSend,
+  } = useAIChat(chatContext);
 
   // Daily brief state (home page only)
   const [dailyBrief, setDailyBrief] = useState<string | null>(null);
@@ -57,10 +73,11 @@ export function AIChatPanel({
   const briefContentRef = useRef('');
   const hasFiredBrief = useRef(false);
 
+  const [briefExpanded, setBriefExpanded] = useState(false);
+  const [briefDismissed, setBriefDismissed] = useState(false);
+
   const messagesContainerRef = useRef<HTMLDivElement | null>(null);
 
-  const streamingContentRef = useRef('');
-  const chatMutation = trpc.ai.chat.useMutation();
   const briefMutation = trpc.ai.dailyBrief.useMutation();
 
   const scrollToBottom = useCallback(() => {
@@ -68,15 +85,6 @@ export function AIChatPanel({
     if (el) el.scrollTo({ top: el.scrollHeight });
   }, []);
 
-  // Reset input when curtain closes; scroll to bottom when it reopens
-  useEffect(() => {
-    if (!curtainOpen) {
-      setInput('');
-    } else {
-      setTimeout(scrollToBottom, 50);
-    }
-  }, [curtainOpen, scrollToBottom]);
-
   // Auto-scroll when messages change or streaming content updates
   useEffect(() => {
     scrollToBottom();
@@ -116,72 +124,9 @@ export function AIChatPanel({
   }, [isHomePage, hasTokenQuery.data]); // briefMutation excluded — only fire once
 
   const handleSend = useCallback(() => {
-    const trimmed = input.trim();
-    if (!trimmed || isStreaming || briefLoading) return;
-
-    const userMsg: ChatMessage = {
-      id: crypto.randomUUID(),
-      role: 'user',
-      content: trimmed,
-    };
-
-    setMessages((prev) => [...prev, userMsg]);
-    setInput('');
-    setIsStreaming(true);
-    setStreamingContent('');
-    streamingContentRef.current = '';
-
-    const unsubscribe = window.electronAI.onStreamChunk(({ token, done }) => {
-      if (done) {
-        const finalContent = streamingContentRef.current;
-        setMessages((prev) => [
-          ...prev,
-          { id: crypto.randomUUID(), role: 'assistant', content: finalContent },
-        ]);
-        setStreamingContent('');
-        streamingContentRef.current = '';
-        setIsStreaming(false);
-        unsubscribe();
-        return;
-      }
-      streamingContentRef.current += token;
-      setStreamingContent(streamingContentRef.current);
-    });
-
-    chatMutation.mutate(
-      {
-        message: trimmed,
-        context: {
-          type: contextType,
-          ...(contextType === 'project' && projectId ? { projectId } : {}),
-        },
-      },
-      {
-        onSuccess: (data) => {
-          if (data.error) {
-            unsubscribe();
-            setMessages((prev) => [
-              ...prev,
-              { id: crypto.randomUUID(), role: 'assistant', content: data.error!, error: true },
-            ]);
-            setStreamingContent('');
-            streamingContentRef.current = '';
-            setIsStreaming(false);
-          }
-        },
-        onError: (err) => {
-          unsubscribe();
-          setMessages((prev) => [
-            ...prev,
-            { id: crypto.randomUUID(), role: 'assistant', content: err.message || 'An unexpected error occurred.', error: true },
-          ]);
-          setStreamingContent('');
-          streamingContentRef.current = '';
-          setIsStreaming(false);
-        },
-      },
-    );
-  }, [input, isStreaming, briefLoading, contextType, projectId, chatMutation]);
+    if (briefLoading) return;
+    chatHandleSend();
+  }, [briefLoading, chatHandleSend]);
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter' && !e.shiftKey) {
@@ -190,92 +135,135 @@ export function AIChatPanel({
     }
   };
 
-  // Smart wheel handler: only stop propagation when there's content to scroll through
-  const handleWheel = useCallback((e: React.WheelEvent) => {
-    const el = messagesContainerRef.current;
-    if (!el) return;
-    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 2;
-    const atTop = el.scrollTop < 2;
-    // Let event propagate to AppShell when at boundaries
-    if ((e.deltaY > 0 && atBottom) || (e.deltaY < 0 && atTop)) return;
-    e.stopPropagation();
-  }, []);
-
-  // No token configured — show settings prompt
-  if (hasTokenQuery.data === false && !isHomePage) {
-    return (
-      <div className="absolute inset-0 z-0 flex flex-col items-center justify-center bg-background">
-        <Card className="max-w-sm">
-          <CardContent className="flex flex-col items-center gap-4 pt-6">
-            <KeyRound size={32} className="text-muted-foreground" />
-            <div className="text-center space-y-1">
-              <p className="text-sm font-medium">AI provider not configured</p>
-              <p className="text-xs text-muted-foreground">
-                Connect your GitHub Copilot token to enable AI-powered features
-                like chat, summaries, and suggestions.
-              </p>
-            </div>
-            <Button variant="outline" size="sm" onClick={onOpenSettings}>
-              Open Settings
-            </Button>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
 
   const hasMessages = messages.length > 0 || isStreaming;
 
-  const contextLabel =
-    contextType === 'project' && projectName
-      ? `Chatting about: ${projectName}`
-      : 'Global workspace';
-
   // Derived values for home page
   const dueCount = dueTodayQuery.data?.length ?? 0;
   const userName = userNameQuery.data ?? 'there';
 
   return (
     <div className="absolute inset-0 z-0 flex flex-col bg-background">
-      {/* Context header (non-home) */}
-      {!isHomePage && (
-        <div className="flex items-center gap-2 px-6 pt-4 pb-2">
-          <Badge variant="outline">{contextLabel}</Badge>
-        </div>
-      )}
+      {/* Sticky brief toast — anchored at top when chatting */}
+      <AnimatePresence>
+        {isHomePage && hasMessages && dailyBrief && !briefDismissed && (
+          <motion.div
+            initial={{ y: -80, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: -80, opacity: 0 }}
+            transition={{ type: 'spring', stiffness: 400, damping: 30 }}
+            className="sticky top-0 z-30 flex justify-center px-4 pt-3 pb-1"
+          >
+            <div className="w-full max-w-2xl rounded-xl border border-border/60 bg-background/80 backdrop-blur-xl shadow-[0_8px_30px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_30px_rgba(0,0,0,0.4)] ring-1 ring-border/10">
+              {/* Toast header — always visible */}
+              <div className="flex items-center gap-2 px-4 py-2.5">
+                <Sparkles size={14} className="text-primary shrink-0" />
+                <span className="text-xs font-semibold tracking-wide text-foreground">Daily Brief</span>
+                <div className="flex-1" />
+                <button
+                  onClick={() => setBriefExpanded((v) => !v)}
+                  className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground hover:bg-muted/60"
+                >
+                  {briefExpanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+                </button>
+                <button
+                  onClick={() => setBriefDismissed(true)}
+                  className="flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground hover:bg-muted/60"
+                >
+                  <X size={14} />
+                </button>
+              </div>
+              {/* Collapsed: one-line preview */}
+              {!briefExpanded && (
+                <div className="px-4 pb-3 -mt-1">
+                  <p className="text-xs text-muted-foreground truncate">
+                    {dailyBrief.replace(/[#*_~`>\-]/g, '').slice(0, 120)}...
+                  </p>
+                </div>
+              )}
+              {/* Expanded: full brief content */}
+              <AnimatePresence>
+                {briefExpanded && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: 'auto', opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.25, ease: [0.25, 0.1, 0.25, 1] }}
+                    className="overflow-hidden"
+                  >
+                    <div className="px-4 pb-3 max-h-64 overflow-y-auto">
+                      <ChatMarkdown content={dailyBrief} />
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
 
       {/* Scrollable messages area */}
-      <ScrollArea
-        className="flex-1 min-h-0"
-        viewportRef={messagesContainerRef}
-        viewportClassName={
-          isHomePage && !hasMessages
-            ? '[&>div]:!flex [&>div]:!flex-col [&>div]:!min-h-full [&>div]:!justify-center'
-            : '[&>div]:!flex [&>div]:!flex-col [&>div]:!min-h-full [&>div]:!justify-end'
-        }
-        onWheel={handleWheel}
-      >
+      <div className="relative flex-1 min-h-0">
+        {/* Gradual blur at the top of messages */}
+        {hasMessages && (
+          <GradualBlur
+            position="top"
+            strength={2}
+            height="5rem"
+            divCount={6}
+            zIndex={20}
+          />
+        )}
+        <ScrollArea
+          className="h-full"
+          viewportRef={messagesContainerRef}
+          viewportClassName={
+            isHomePage && !hasMessages
+              ? '[&>div]:!flex [&>div]:!flex-col [&>div]:!min-h-full [&>div]:!justify-center'
+              : '[&>div]:!flex [&>div]:!flex-col [&>div]:!min-h-full [&>div]:!justify-end'
+          }
+        >
         {/* Home page initial state: greeting + brief */}
         {isHomePage && !hasMessages && (
-          <div className="mx-auto w-full max-w-3xl px-6 pt-8 pb-8">
-            <div className="flex flex-col gap-8">
-              {/* Greeting + brief grouped closely */}
-              <div className="flex flex-col gap-1">
-                <div className="flex items-center justify-between gap-4 flex-wrap">
-                  <h1 className="text-[30px] font-semibold" style={{ letterSpacing: '-1px' }}>
-                    ✦ Hello, {userName}
-                  </h1>
-                  <Badge variant="secondary">
-                    {dueCount} Task{dueCount !== 1 ? 's' : ''} due
-                  </Badge>
-                </div>
+          <motion.div
+            className="mx-auto w-full max-w-4xl px-8 pt-14 pb-8"
+            variants={stagger}
+            initial="hidden"
+            animate="show"
+          >
+            <div className="flex flex-col" style={{ gap: 'clamp(2.5rem, 4vh, 4rem)' }}>
+              {/* Greeting — editorial hero moment */}
+              <motion.div variants={fadeUp} className="flex flex-col gap-1">
+                <span
+                  className="font-light tracking-wide text-muted-foreground"
+                  style={{ fontSize: 'clamp(1rem, 1.6vw, 1.25rem)' }}
+                >
+                  {getTimeGreeting()}
+                </span>
+                <h1
+                  className="font-bold leading-[1.05]"
+                  style={{ fontSize: 'clamp(3.25rem, 5.5vw, 5.5rem)', letterSpacing: '-0.035em' }}
+                >
+                  {userName}
+                  <span className="text-primary ml-3 inline-block">✦</span>
+                </h1>
+                {dueCount > 0 && (
+                  <p
+                    className="text-muted-foreground mt-2"
+                    style={{ fontSize: 'clamp(0.875rem, 1.2vw, 1.125rem)' }}
+                  >
+                    <span className="text-foreground font-medium">{dueCount}</span>
+                    {' '}task{dueCount !== 1 ? 's' : ''} due today
+                  </p>
+                )}
+              </motion.div>
 
-                {/* Daily brief */}
-                <div>
+              {/* Daily brief */}
+              <motion.div variants={fadeUp} className="max-w-3xl">
                 {hasTokenQuery.data === false ? (
-                  <div className="flex flex-col items-center gap-3 py-2">
-                    <KeyRound size={24} className="text-muted-foreground" />
-                    <p className="text-sm text-muted-foreground text-center">
+                  <div className="flex flex-col items-start gap-3 py-2">
+                    <KeyRound size={20} className="text-muted-foreground" />
+                    <p className="text-muted-foreground" style={{ fontSize: 'clamp(0.9375rem, 1.2vw, 1.0625rem)' }}>
                       Configure your AI provider in Settings to enable the daily brief.
                     </p>
                     <Button variant="outline" size="sm" onClick={onOpenSettings}>
@@ -283,60 +271,55 @@ export function AIChatPanel({
                     </Button>
                   </div>
                 ) : briefLoading && !dailyBrief ? (
-                  <div className="space-y-2">
-                    <Skeleton className="h-4 w-3/4" />
-                    <Skeleton className="h-4 w-1/2" />
-                    <Skeleton className="h-4 w-2/3" />
+                  <div className="space-y-3">
+                    <Skeleton className="h-5 w-3/4" />
+                    <Skeleton className="h-5 w-1/2" />
+                    <Skeleton className="h-5 w-2/3" />
                   </div>
                 ) : dailyBrief ? (
-                  <ChatMarkdown content={dailyBrief} />
+                  <ChatMarkdown content={dailyBrief} size="lg" />
                 ) : (
-                  <p className="text-sm text-muted-foreground">
+                  <p className="text-muted-foreground" style={{ fontSize: 'clamp(0.9375rem, 1.2vw, 1.0625rem)' }}>
                     Your daily brief will appear here.
                   </p>
                 )}
-                </div>
-              </div>
+              </motion.div>
 
-              {/* Inline input + suggestion chips */}
-              <div>
+              {/* Input + suggestion links */}
+              <motion.div variants={fadeUp} className="max-w-3xl">
                 <ChatInput
                   input={input}
                   isStreaming={isStreaming || briefLoading}
                   onInputChange={setInput}
                   onKeyDown={handleKeyDown}
                   onSend={handleSend}
-                  isHomePage={isHomePage}
                 />
-                <div className="flex flex-wrap items-center justify-center gap-2 mt-4">
+                <div className="flex flex-col gap-0.5 mt-5">
                   {SUGGESTION_CHIPS.map((chip) => (
                     <button
                       key={chip.label}
                       type="button"
-                      className="group flex items-center gap-2 rounded-full border border-border/50 bg-background/60 backdrop-blur-lg px-4 py-2 text-sm text-foreground shadow-sm ring-1 ring-border/20 transition-all hover:shadow-md hover:-translate-y-0.5 hover:border-ring/40 cursor-pointer"
+                      className="group flex items-center gap-3 py-1.5 text-muted-foreground transition-all duration-200 hover:text-foreground hover:translate-x-1 cursor-pointer text-left"
+                      style={{ fontSize: 'clamp(0.9375rem, 1.2vw, 1.0625rem)' }}
                       onClick={() => setInput(chip.label)}
                     >
-                      <chip.icon size={14} className="shrink-0 text-muted-foreground transition-colors group-hover:text-foreground" />
+                      <chip.icon
+                        size={16}
+                        className="shrink-0 transition-colors duration-200 group-hover:text-primary"
+                      />
                       <span>{chip.label}</span>
                     </button>
                   ))}
                 </div>
-              </div>
+              </motion.div>
             </div>
-          </div>
+          </motion.div>
         )}
 
         {/* Home page with messages: brief stays, then messages */}
         {isHomePage && hasMessages && (
-          <div className="mx-auto w-full max-w-3xl px-6 pt-8 pb-32">
+          <div className="mx-auto w-full max-w-6xl px-6 pt-8 pb-32">
             <div className="flex flex-col gap-4">
-              {/* Brief persists */}
-              {dailyBrief && (
-                <div className="mb-2">
-                  <ChatMarkdown content={dailyBrief} />
-                </div>
-              )}
-
               {/* Chat messages */}
               {messages.map((msg) => {
                 if (msg.role === 'user') {
@@ -396,79 +379,20 @@ export function AIChatPanel({
         )}
 
         {/* Non-home messages */}
-        {!isHomePage && hasMessages && (
-          <div className="mx-auto w-full max-w-[1088px] px-6 pt-4 pb-32">
-            <div className="flex flex-col gap-4">
-              {messages.map((msg) => {
-                if (msg.role === 'user') {
-                  return (
-                    <div key={msg.id} className="flex justify-end">
-                      <div className="ml-auto max-w-[75%] rounded-2xl bg-muted px-4 py-2">
-                        <ChatMarkdown content={msg.content} />
-                      </div>
-                    </div>
-                  );
-                }
+        </ScrollArea>
+      </div>
 
-                if (msg.error) {
-                  return (
-                    <div key={msg.id} className="mr-auto max-w-[75%]">
-                      <p className="text-sm text-destructive whitespace-pre-wrap">
-                        {msg.content}
-                      </p>
-                    </div>
-                  );
-                }
-
-                return (
-                  <div key={msg.id} className="mr-auto max-w-[75%]">
-                    <div className="flex items-center gap-1.5 mb-1">
-                      <Sparkles size={16} className="text-foreground" />
-                      <span className="text-sm font-semibold">Adiuva</span>
-                    </div>
-                    <div className="pl-[22px]">
-                      <ChatMarkdown content={msg.content} />
-                    </div>
-                  </div>
-                );
-              })}
-
-              {/* Streaming AI response */}
-              {isStreaming && (
-                <div className="mr-auto max-w-[75%]">
-                  <div className="flex items-center gap-1.5 mb-1">
-                    <Sparkles size={16} className="text-foreground" />
-                    <span className="text-sm font-semibold">Adiuva</span>
-                  </div>
-                  {streamingContent ? (
-                    <div className="pl-[22px]">
-                      <ChatMarkdown content={streamingContent} />
-                    </div>
-                  ) : (
-                    <div className="space-y-2 pl-[22px]">
-                      <Skeleton className="h-4 w-48" />
-                      <Skeleton className="h-4 w-32" />
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-      </ScrollArea>
-
-      {/* Fixed input — pinned to the bottom (hidden on home initial state) */}
-      {!(isHomePage && !hasMessages) && (
+      {/* Fixed input — pinned to the bottom (hidden on initial state) */}
+      {hasMessages && (
         <div className="absolute bottom-0 left-0 right-0 z-10 px-6 pb-5 pt-16 pointer-events-none">
           <div className="absolute inset-x-0 top-0 h-full bg-gradient-to-b from-transparent via-background/60 to-background/90" />
-          <div className={`relative pointer-events-auto mx-auto ${isHomePage ? 'max-w-3xl' : 'max-w-[1088px]'}`}>
+          <div className="relative pointer-events-auto mx-auto max-w-3xl">
             <ChatInput
               input={input}
               isStreaming={isStreaming || briefLoading}
               onInputChange={setInput}
               onKeyDown={handleKeyDown}
               onSend={handleSend}
-              isHomePage={isHomePage}
             />
           </div>
         </div>
@@ -485,7 +409,6 @@ interface ChatInputProps {
   onInputChange: (value: string) => void;
   onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
   onSend: () => void;
-  isHomePage?: boolean;
 }
 
 function ChatInput({
@@ -521,9 +444,9 @@ function ChatInput({
 
 /* ---------- ChatMarkdown: lightweight markdown renderer ---------- */
 
-function ChatMarkdown({ content }: { content: string }) {
+export function ChatMarkdown({ content, size = 'sm' }: { content: string; size?: 'sm' | 'lg' }) {
   return (
-    <div className="prose prose-sm dark:prose-invert max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
+    <div className={`prose dark:prose-invert max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 ${size === 'lg' ? 'prose-base' : 'prose-sm'}`}>
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         components={{

src/renderer/components/ai/FloatingChat.tsx

@@ -0,0 +1,378 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useNavigate, useRouterState } from '@tanstack/react-router';
+import { X, ArrowUp } from 'lucide-react';
+import {
+  useFloatingChat,
+  computeDualAnchor,
+  CHAT_WIDTH,
+  CHAT_HEIGHT,
+  PADDING,
+} from '@/context/FloatingChatContext';
+import { useAIChat, type ChatContext } from '@/hooks/useAIChat';
+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, moveToSection, updatePosition, setPendingSection } = useFloatingChat();
+  const utils = trpc.useUtils();
+  const navigate = useNavigate();
+  const routerState = useRouterState();
+  const prevPathRef = useRef(routerState.location.pathname);
+
+  // Active section lookup
+  const activeSection = sections.get(state.activeSectionId ?? '');
+
+  // Chat context derived from active section
+  const chatContext = useMemo<ChatContext>(
+    () => ({
+      type: activeSection?.projectId ? 'project' : 'global',
+      projectId: activeSection?.projectId,
+      uiContext: activeSection?.label,
+    }),
+    [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,
+    setInput,
+    isStreaming,
+    streamingContent,
+    handleSend,
+    clearMessages,
+  } = useAIChat(chatContext, { onSectionTag: handleSectionTag });
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // ---- Close on Escape ----
+
+  useEffect(() => {
+    if (!state.isOpen) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        close();
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [state.isOpen, close]);
+
+  // ---- Close on route change (unless cross-page navigation pending) ----
+
+  useEffect(() => {
+    const currentPath = routerState.location.pathname;
+    if (prevPathRef.current !== currentPath && state.isOpen && !state.pendingSection) {
+      close();
+    }
+    prevPathRef.current = currentPath;
+  }, [routerState.location.pathname, state.isOpen, state.pendingSection, close]);
+
+  // ---- Clear messages on close ----
+
+  const prevOpenRef = useRef(state.isOpen);
+  useEffect(() => {
+    if (prevOpenRef.current && !state.isOpen) {
+      clearMessages();
+    }
+    prevOpenRef.current = state.isOpen;
+  }, [state.isOpen, clearMessages]);
+
+  // ---- AI action: morph into newly-created task ----
+
+  useEffect(() => {
+    if (!state.isOpen) return;
+
+    const unsubscribe = window.electronAI.onAction((action) => {
+      if (action.type === 'task_created' && action.taskId) {
+        // Invalidate task queries so the new TaskRow renders
+        void utils.tasks.list.invalidate();
+
+        // Set the morph target layoutId
+        setMorphTarget(`task-morph-${action.taskId}`);
+
+        // Wait for the TaskRow to render, then close (triggering FLIP)
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            close();
+          });
+        });
+      }
+    });
+
+    return unsubscribe;
+  }, [state.isOpen, utils, setMorphTarget, close]);
+
+  // ---- Window resize: keep within bounds ----
+
+  useEffect(() => {
+    if (!state.isOpen) return;
+    const handler = () => {
+      // Re-anchor if the container would go offscreen
+      const el = containerRef.current;
+      if (el) {
+        const rect = el.getBoundingClientRect();
+        if (rect.right > window.innerWidth || rect.bottom > window.innerHeight) {
+          el.style.left = `${Math.max(PADDING, Math.min(state.position.x, window.innerWidth - CHAT_WIDTH - PADDING))}px`;
+          el.style.top = `${Math.max(PADDING, Math.min(state.position.y, window.innerHeight - CHAT_HEIGHT - PADDING))}px`;
+        }
+      }
+    };
+    window.addEventListener('resize', handler);
+    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);
+  const scrollToBottom = useCallback(() => {
+    const el = scrollRef.current;
+    if (el) el.scrollTo({ top: el.scrollHeight });
+  }, []);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, streamingContent, scrollToBottom]);
+
+  // ---- Auto-focus input on open ----
+
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  useEffect(() => {
+    if (state.isOpen) {
+      const timer = setTimeout(() => inputRef.current?.focus(), 100);
+      return () => clearTimeout(timer);
+    }
+  }, [state.isOpen]);
+
+  // ---- Input handling ----
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const hasMessages = messages.length > 0 || isStreaming;
+
+  return (
+    <AnimatePresence>
+      {state.isOpen && (
+        <motion.div
+          ref={containerRef}
+          key="floating-chat"
+          layout
+          layoutId={state.morphTargetId ?? undefined}
+          initial={{ opacity: 0, scale: 0.95, y: 12 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          exit={{ opacity: 0, scale: 0.95, y: 12 }}
+          transition={{ type: 'spring', stiffness: 400, damping: 30 }}
+          style={{
+            position: 'fixed',
+            left: state.position.x,
+            top: state.position.y,
+            width: state.position.width,
+            zIndex: 9999,
+          }}
+          className="flex flex-col gap-2"
+        >
+          {/* ---- Messages panel (appears when chat has content) ---- */}
+          <AnimatePresence>
+            {hasMessages && (
+              <motion.div
+                key="messages-panel"
+                initial={{ opacity: 0, height: 0, scale: 0.97 }}
+                animate={{ opacity: 1, height: 'auto', scale: 1 }}
+                exit={{ opacity: 0, height: 0, scale: 0.97 }}
+                transition={{ type: 'spring', stiffness: 400, damping: 30 }}
+                className="rounded-2xl"
+              >
+                <div
+                  ref={scrollRef}
+                  className="max-h-[300px] overflow-y-auto rounded-2xl [&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border"
+                >
+                  <div className="flex flex-col gap-2.5 p-3">
+                    {messages.map((msg) => {
+                      if (msg.role === 'user') {
+                        return (
+                          <div key={msg.id} className="flex justify-end">
+                            <div className="max-w-[80%] rounded-2xl rounded-br-md bg-accent text-primary-foreground px-3.5 py-2 shadow-sm">
+                              <p className="text-xs whitespace-pre-wrap leading-relaxed">
+                                {msg.content}
+                              </p>
+                            </div>
+                          </div>
+                        );
+                      }
+
+                      if (msg.error) {
+                        return (
+                          <div key={msg.id} className="flex justify-start">
+                            <div className="max-w-[80%] rounded-2xl rounded-bl-md bg-destructive/10 px-3.5 py-2">
+                              <p className="text-xs text-destructive whitespace-pre-wrap leading-relaxed">
+                                {msg.content}
+                              </p>
+                            </div>
+                          </div>
+                        );
+                      }
+
+                      return (
+                        <div key={msg.id} className="flex justify-start">
+                          <div className="max-w-[80%] rounded-2xl rounded-bl-md bg-primary text-primary-foreground px-3.5 py-2">
+                            <div className="text-xs">
+                              <ChatMarkdown content={msg.content} />
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    })}
+
+                    {/* Streaming */}
+                    {isStreaming && (
+                      <div className="flex justify-start">
+                        <div className="max-w-[80%] rounded-2xl rounded-bl-md bg-primary text-primary-foreground px-3.5 py-2">
+                          {streamingContent ? (
+                            <div className="text-xs">
+                              <ChatMarkdown content={streamingContent} />
+                            </div>
+                          ) : (
+                            <div className="space-y-1.5 py-0.5">
+                              <Skeleton className="h-3 w-36" />
+                              <Skeleton className="h-3 w-24" />
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          {/* ---- Floating input bar ---- */}
+          <div className="relative rounded-2xl bg-background/80 backdrop-blur-2xl shadow-[0_8px_60px_-12px_rgba(0,0,0,0.5)] border border-border/30 ring-1 ring-white/5 transition-shadow focus-within:shadow-[0_8px_60px_-8px_rgba(0,0,0,0.7)] focus-within:ring-ring/20">
+            {/* Close button */}
+            <button
+              onClick={close}
+              className="absolute -top-1.5 -right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-muted/90 backdrop-blur-sm border border-border/50 shadow-sm hover:bg-muted transition-colors z-10"
+            >
+              <X size={10} />
+            </button>
+
+            <div className="flex items-center gap-2 px-3 py-2.5">
+              <textarea
+                ref={inputRef}
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder={`Ask about ${activeSection?.label ?? 'this section'}...`}
+                rows={1}
+                className="flex-1 resize-none bg-transparent text-sm placeholder:text-muted-foreground/60 outline-none max-h-20 overflow-y-auto"
+                style={{ fieldSizing: 'content' } as React.CSSProperties}
+              />
+              <button
+                onClick={() => handleSend()}
+                disabled={!input.trim() || isStreaming}
+                className="flex h-7 w-7 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground shadow-sm transition-all hover:bg-primary/90 active:scale-95 disabled:opacity-30 disabled:cursor-not-allowed"
+              >
+                <ArrowUp size={14} />
+              </button>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export function FloatingChatPortal() {
+  return createPortal(<FloatingChatInner />, document.body);
+}

src/renderer/components/layout/AppShell.tsx

@@ -1,14 +1,12 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState } from 'react';
 import { Link, useRouterState } from '@tanstack/react-router';
-import { motion, useMotionValue, useSpring } from 'framer-motion';
+import { LayoutGroup } from 'framer-motion';
 import {
   House,
   ChartGantt,
   ClipboardCheck,
   FolderKanban,
   PanelLeft,
-  ChevronUp,
-  ChevronDown,
   Settings,
   Sparkles,
   Check,
@@ -18,6 +16,7 @@ import {
   Palette
 } from 'lucide-react';
 import { trpc } from '@/lib/trpc';
+import { useDoubleClickAI } from '@/hooks/useDoubleClickAI';
 import {
   Sidebar,
   SidebarContent,
@@ -55,7 +54,9 @@ import {
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { AIChatPanel } from '@/components/ai/AIChatPanel';
+import { FloatingChatPortal } from '@/components/ai/FloatingChat';
 import { useTheme } from '@/components/theme-provider';
+import { FloatingChatProvider } from '@/context/FloatingChatContext';
 
 const NAV_ITEMS = [
   { to: '/', icon: House, label: 'Home' },
@@ -68,21 +69,17 @@ interface AppShellProps {
   children: React.ReactNode;
 }
 
-/** Walk up the DOM to find the nearest scrollable ancestor. */
-function findScrollableAncestor(el: Element | null): Element | null {
-  if (!el || el === document.body) return null;
-  const style = window.getComputedStyle(el);
-  const overflowY = style.overflowY;
-  if (
-    (overflowY === 'auto' || overflowY === 'scroll') &&
-    el.scrollHeight > el.clientHeight
-  ) {
-    return el;
-  }
-  return findScrollableAncestor(el.parentElement);
+export function AppShell({ children }: AppShellProps) {
+  return (
+    <FloatingChatProvider>
+      <AppShellInner>{children}</AppShellInner>
+    </FloatingChatProvider>
+  );
 }
 
-export function AppShell({ children }: AppShellProps) {
+function AppShellInner({ children }: AppShellProps) {
+  useDoubleClickAI();
+
   const collapsedQuery = trpc.settings.getSidebarCollapsed.useQuery(undefined, {
     staleTime: Infinity,
   });
@@ -119,142 +116,30 @@ export function AppShell({ children }: AppShellProps) {
 
   const isHomePage = currentPath === '/';
 
-  // Curtain is disabled on home page and on /projects without a selected project
-  const searchObj = routerState.location.search as Record<string, unknown>;
-  const projectId = typeof searchObj['projectId'] === 'string' ? searchObj['projectId'] : undefined;
-  const curtainEnabled =
-    currentPath !== '/' &&
-    !(currentPath === '/projects' && !projectId);
-  const curtainEnabledRef = useRef(curtainEnabled);
-  curtainEnabledRef.current = curtainEnabled;
-
-  // Derive AI chat context from current route
-  const isProjectView = currentPath === '/projects' && !!projectId;
-  const contextType = isProjectView ? 'project' as const : 'global' as const;
-  const projectQuery = trpc.projects.get.useQuery(
-    { id: projectId ?? '' },
-    { enabled: !!projectId },
-  );
-
-  // --- Curtain animation state ---
-  const [curtainOpen, setCurtainOpen] = useState(false);
-  const curtainOpenRef = useRef(false);
-
-  const y = useMotionValue(0);
-  const springY = useSpring(y, { stiffness: 300, damping: 30 });
-
-  const openCurtain = useCallback(() => {
-    curtainOpenRef.current = true;
-    setCurtainOpen(true);
-    y.set(window.innerHeight);
-  }, [y]);
-
-  const closeCurtain = useCallback(() => {
-    curtainOpenRef.current = false;
-    setCurtainOpen(false);
-    y.set(0);
-  }, [y]);
-
-  const toggleCurtain = useCallback(() => {
-    if (curtainOpenRef.current) closeCurtain();
-    else openCurtain();
-  }, [openCurtain, closeCurtain]);
-
-  // Keep curtain position in sync with window height on resize
-  useEffect(() => {
-    const handleResize = () => {
-      if (curtainOpenRef.current) {
-        y.set(window.innerHeight);
-      }
-    };
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, [y]);
-
-  // Keyboard shortcut: Cmd/Ctrl+K
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        if (!curtainEnabledRef.current) return;
-        toggleCurtain();
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [toggleCurtain]);
-
-  // Wheel event: overscroll detection
-  useEffect(() => {
-    const handleWheel = (e: WheelEvent) => {
-      if (!curtainOpenRef.current) {
-        if (!curtainEnabledRef.current) return;
-        // Opening: overscroll UP (deltaY < 0) when content is at top
-        if (e.deltaY < 0) {
-          const scrollable = findScrollableAncestor(e.target as Element);
-          const atTop = !scrollable || scrollable.scrollTop === 0;
-          if (atTop) openCurtain();
-        }
-      } else {
-        // Closing: scroll DOWN (deltaY > 0) while curtain is open
-        if (e.deltaY > 0) {
-          closeCurtain();
-        }
-      }
-    };
-
-    document.addEventListener('wheel', handleWheel, { passive: true });
-    return () => document.removeEventListener('wheel', handleWheel);
-  }, [openCurtain, closeCurtain]);
-
   return (
-    <>
+    <LayoutGroup>
     <SidebarProvider open={open} onOpenChange={handleOpenChange}>
       <AppSidebar
         currentPath={currentPath}
         setTokenDialogOpen={setTokenDialogOpen}
-        onNavClick={closeCurtain}
       />
-      <SidebarInset className="overflow-hidden">
-        {/* AI Chat layer: always mounted behind the content panel */}
-        <AIChatPanel
-          onOpenSettings={() => setTokenDialogOpen(true)}
-          contextType={contextType}
-          projectId={projectId}
-          projectName={projectQuery.data?.name}
-          curtainOpen={isHomePage || curtainOpen}
-          isHomePage={isHomePage}
-        />
-
-        {/* Content panel: slides down to reveal chat (hidden on home — AIChatPanel IS the home page) */}
-        {!isHomePage && (
-          <motion.div
-            style={{ y: springY }}
-            className="absolute inset-0 z-10 flex flex-col bg-background"
-          >
+      <SidebarInset>
+        {isHomePage ? (
+          <AIChatPanel
+            onOpenSettings={() => setTokenDialogOpen(true)}
+            isHomePage
+          />
+        ) : (
+          <div className="relative flex flex-col h-full">
             {children}
-
-            {/* Right-edge vertical affordance (non-interactive) */}
-            <div className={`absolute right-0 top-0 flex items-end justify-center pt-8 pointer-events-none select-none${!curtainEnabled ? ' hidden' : ''}`}>
-              <div className="flex flex-col items-center gap-1.5 pr-2">
-                {curtainOpen ? (
-                  <ChevronDown size={10} />
-                ) : (
-                  <ChevronUp size={10} />
-                )}
-                <span
-                  className="text-[9px] tracking-widest uppercase font-medium"
-                  style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}
-                >
-                  {curtainOpen ? 'back to app' : 'scrolling up for Adiuva'}
-                </span>
-              </div>
-            </div>
-          </motion.div>
+          </div>
         )}
       </SidebarInset>
     </SidebarProvider>
 
+    {/* Floating AI Chat — portal to document.body */}
+    <FloatingChatPortal />
+
     {/* AI Token Dialog — rendered outside Sidebar to avoid layout conflicts */}
     <Dialog open={tokenDialogOpen} onOpenChange={(open) => {
       setTokenDialogOpen(open);
@@ -298,17 +183,16 @@ export function AppShell({ children }: AppShellProps) {
         </DialogFooter>
       </DialogContent>
     </Dialog>
-    </>
+    </LayoutGroup>
   );
 }
 
 interface AppSidebarProps {
   currentPath: string;
   setTokenDialogOpen: (open: boolean) => void;
-  onNavClick: () => void;
 }
 
-function AppSidebar({ currentPath, setTokenDialogOpen, onNavClick }: AppSidebarProps) {
+function AppSidebar({ currentPath, setTokenDialogOpen }: AppSidebarProps) {
   const { toggleSidebar } = useSidebar();
   const { theme, setTheme } = useTheme();
 
@@ -361,7 +245,7 @@ function AppSidebar({ currentPath, setTokenDialogOpen, onNavClick }: AppSidebarP
                       isActive={isActive}
                       tooltip={label}
                     >
-                      <Link to={to} onClick={onNavClick}>
+                      <Link to={to}>
                         <Icon />
                         <span>{label}</span>
                       </Link>

src/renderer/components/projects/KanbanBoard.tsx

@@ -1,6 +1,7 @@
 import { useState, useMemo, useCallback } from 'react';
 import { DragDropContext, Droppable, Draggable, type DropResult } from '@hello-pangea/dnd';
 import { trpc } from '@/lib/trpc';
+import { useFloatingChat } from '@/context/FloatingChatContext';
 import { Badge } from '@/components/ui/badge';
 import { TaskRow, type TaskItem } from '@/components/tasks/TaskRow';
 import { NewTaskDialog } from '@/components/tasks/NewTaskDialog';
@@ -22,6 +23,7 @@ type KanbanBoardProps = {
 };
 
 export function KanbanBoard({ projectId, newTaskOpen, onNewTaskOpenChange }: KanbanBoardProps) {
+  const { state: floatingState } = useFloatingChat();
   const { data: tasksList } = trpc.tasks.list.useQuery({ projectId });
   const utils = trpc.useUtils();
 
@@ -125,6 +127,11 @@ export function KanbanBoard({ projectId, newTaskOpen, onNewTaskOpenChange }: Kan
                               onDelete={(id) => deleteTask.mutate({ id })}
                               onClick={setViewTask}
                               hideBreadcrumb
+                              layoutId={
+                                floatingState.morphTargetId === `task-morph-${task.id}`
+                                  ? floatingState.morphTargetId
+                                  : undefined
+                              }
                             />
                           </div>
                         )}

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();
@@ -161,7 +182,7 @@ export function ProjectDetail({ projectId }: ProjectDetailProps) {
   }
 
   return (
-    <div className="p-6 pe-8 flex flex-col gap-6">
+    <div className="p-6 flex flex-col gap-6">
       {/* Breadcrumb + Project Name */}
       <div className="flex flex-col gap-1">
         {breadcrumbPath.length > 0 && (
@@ -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

src/renderer/components/tasks/TaskRow.tsx

@@ -1,3 +1,4 @@
+import { motion } from 'framer-motion';
 import { Calendar, User, Pencil, Trash2 } from 'lucide-react';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Badge } from '@/components/ui/badge';
@@ -57,6 +58,7 @@ export function TaskRow({
   onDelete,
   onClick,
   hideBreadcrumb,
+  layoutId,
 }: {
   task: TaskItem;
   onToggle: (id: string, status: string | null) => void;
@@ -64,6 +66,7 @@ export function TaskRow({
   onDelete?: (id: string) => void;
   onClick?: (task: TaskItem) => void;
   hideBreadcrumb?: boolean;
+  layoutId?: string;
 }) {
   const isDone = task.status === 'done';
 
@@ -84,10 +87,14 @@ export function TaskRow({
     breadcrumb.length > 0 ||
     task.assignee;
 
+  const Wrapper = layoutId ? motion.div : 'div';
+  const wrapperProps = layoutId ? { layoutId, layout: true as const } : {};
+
   return (
     <ContextMenu>
       <ContextMenuTrigger asChild>
-        <div
+        <Wrapper
+          {...wrapperProps}
           className={`flex flex-col gap-1.5 px-4 py-3 rounded-md border select-none transition-colors ${
             isDone ? 'bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-900' : 'bg-card border-border'
           } ${onClick ? 'cursor-pointer hover:bg-accent/50' : 'cursor-default'}`}
@@ -146,7 +153,7 @@ export function TaskRow({
               )}
             </div>
           )}
-        </div>
+        </Wrapper>
       </ContextMenuTrigger>
 
       <ContextMenuContent>

src/renderer/components/ui/gradual-blur.tsx

@@ -0,0 +1,101 @@
+import { useMemo } from 'react';
+
+type Position = 'top' | 'bottom';
+
+interface GradualBlurProps {
+  /** Edge to attach the blur overlay */
+  position?: Position;
+  /** Base blur strength multiplier */
+  strength?: number;
+  /** Overlay height (CSS value) */
+  height?: string;
+  /** Number of stacked blur layers (higher = smoother) */
+  divCount?: number;
+  /** Use exponential progression for stronger end blur */
+  exponential?: boolean;
+  /** Opacity applied to each blur layer */
+  opacity?: number;
+  /** z-index for the overlay */
+  zIndex?: number;
+  /** Additional class names */
+  className?: string;
+}
+
+const getGradientDirection = (position: Position) =>
+  position === 'top' ? 'to top' : 'to bottom';
+
+export function GradualBlur({
+  position = 'top',
+  strength = 2,
+  height = '6rem',
+  divCount = 5,
+  exponential = false,
+  opacity = 1,
+  zIndex = 10,
+  className = '',
+}: GradualBlurProps) {
+  const blurDivs = useMemo(() => {
+    const divs: React.ReactNode[] = [];
+    const increment = 100 / divCount;
+    const direction = getGradientDirection(position);
+
+    for (let i = 1; i <= divCount; i++) {
+      const progress = i / divCount;
+
+      let blurValue: number;
+      if (exponential) {
+        blurValue = Math.pow(2, progress * 4) * 0.0625 * strength;
+      } else {
+        blurValue = 0.0625 * (progress * divCount + 1) * strength;
+      }
+
+      const p1 = Math.round((increment * i - increment) * 10) / 10;
+      const p2 = Math.round(increment * i * 10) / 10;
+      const p3 = Math.round((increment * i + increment) * 10) / 10;
+      const p4 = Math.round((increment * i + increment * 2) * 10) / 10;
+
+      let gradient = `transparent ${p1}%, black ${p2}%`;
+      if (p3 <= 100) gradient += `, black ${p3}%`;
+      if (p4 <= 100) gradient += `, transparent ${p4}%`;
+
+      const maskImage = `linear-gradient(${direction}, ${gradient})`;
+
+      divs.push(
+        <div
+          key={i}
+          style={{
+            position: 'absolute',
+            inset: 0,
+            maskImage,
+            WebkitMaskImage: maskImage,
+            backdropFilter: `blur(${blurValue.toFixed(3)}rem)`,
+            WebkitBackdropFilter: `blur(${blurValue.toFixed(3)}rem)`,
+            opacity,
+          }}
+        />,
+      );
+    }
+
+    return divs;
+  }, [position, strength, divCount, exponential, opacity]);
+
+  return (
+    <div
+      className={className}
+      style={{
+        position: 'absolute',
+        [position]: 0,
+        left: 0,
+        right: 0,
+        height,
+        pointerEvents: 'none',
+        zIndex,
+        overflow: 'hidden',
+      }}
+    >
+      <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+        {blurDivs}
+      </div>
+    </div>
+  );
+}

src/renderer/context/FloatingChatContext.tsx

@@ -0,0 +1,265 @@
+import {
+  createContext,
+  useContext,
+  useCallback,
+  useEffect,
+  useState,
+  useRef,
+  type ReactNode,
+  type RefObject,
+} from 'react';
+
+// ---------- Types ----------
+
+export interface AISection {
+  id: string; // e.g. "project-tasks", "tasks-list", "timeline-chart"
+  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 {
+  isOpen: boolean;
+  activeSectionId: string | null;
+  position: { x: number; y: number; width: number };
+  morphTargetId: string | null;
+  projectId?: string;
+  pendingSection?: { sectionId: string; clickY?: number }; // For cross-page navigation
+}
+
+interface FloatingChatContextValue {
+  // State
+  state: FloatingChatState;
+  sections: Map<string, AISection>;
+
+  // Section registry
+  registerSection: (section: AISection) => void;
+  unregisterSection: (id: string) => void;
+
+  // Actions
+  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 ----------
+
+export const CHAT_WIDTH = 380;
+export const CHAT_HEIGHT = 420;
+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(
+  section: AISection,
+  opts?: SectionOpenOpts,
+): { x: number; y: number; width: number } {
+  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';
+
+  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 };
+  }
+
+  // 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,
+  );
+  return { x, y, width: CHAT_WIDTH };
+}
+
+// ---------- Context ----------
+
+const FloatingChatCtx = createContext<FloatingChatContextValue | null>(null);
+
+export function useFloatingChat(): FloatingChatContextValue {
+  const ctx = useContext(FloatingChatCtx);
+  if (!ctx)
+    throw new Error('useFloatingChat must be used within FloatingChatProvider');
+  return ctx;
+}
+
+// Convenience hook for pages to register a section
+export function useAISection(section: AISection): void {
+  const { registerSection, unregisterSection } = useFloatingChat();
+
+  useEffect(() => {
+    registerSection(section);
+    return () => unregisterSection(section.id);
+  }, [section.id, registerSection, unregisterSection]);
+}
+
+// ---------- Provider ----------
+
+export function FloatingChatProvider({ children }: { children: ReactNode }) {
+  const sectionsRef = useRef<Map<string, AISection>>(new Map());
+  const [sections, setSections] = useState<Map<string, AISection>>(new Map());
+  const [state, setState] = useState<FloatingChatState>({
+    isOpen: false,
+    activeSectionId: null,
+    position: { x: 0, y: 0, width: CHAT_WIDTH },
+    morphTargetId: null,
+  });
+
+  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) => {
+    sectionsRef.current.delete(id);
+    setSections(new Map(sectionsRef.current));
+  }, []);
+
+  const openAtSection = useCallback((sectionId: string, opts?: SectionOpenOpts) => {
+    const section = sectionsRef.current.get(sectionId);
+    if (!section) return;
+
+    const position = computeAnchorPosition(section, opts);
+
+    setState({
+      isOpen: true,
+      activeSectionId: sectionId,
+      position,
+      morphTargetId: null,
+      projectId: section.projectId,
+    });
+  }, []);
+
+  const moveToSection = useCallback((sectionId: string, opts?: SectionOpenOpts) => {
+    const section = sectionsRef.current.get(sectionId);
+    if (!section) return;
+
+    const position = computeAnchorPosition(section, opts);
+
+    setState((prev) => ({
+      ...prev,
+      activeSectionId: sectionId,
+      position,
+      projectId: section.projectId,
+    }));
+  }, []);
+
+  const close = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      isOpen: false,
+      activeSectionId: null,
+      morphTargetId: null,
+    }));
+  }, []);
+
+  const setMorphTarget = useCallback((id: string | null) => {
+    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={{
+        state,
+        sections,
+        registerSection,
+        unregisterSection,
+        openAtSection,
+        moveToSection,
+        close,
+        setMorphTarget,
+        updatePosition,
+        setPendingSection,
+      }}
+    >
+      {children}
+    </FloatingChatCtx.Provider>
+  );
+}

src/renderer/globals.css

@@ -1,6 +1,8 @@
+@import '@fontsource/geist/300.css';
 @import '@fontsource/geist/400.css';
 @import '@fontsource/geist/500.css';
 @import '@fontsource/geist/600.css';
+@import '@fontsource/geist/700.css';
 
 @import "tailwindcss";
 @import "tw-animate-css";
@@ -50,73 +52,113 @@
 
 :root {
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
+  
+  /* #f4edf3 - Light Pinkish-White Canvas */
+  --background: oklch(0.945 0.012 328.5);
+  /* #040404 - Almost Black Text */
+  --foreground: oklch(0.145 0 0);
+  
+  --card: oklch(0.945 0.012 328.5);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(0.945 0.012 328.5);
+  --popover-foreground: oklch(0.145 0 0);
+  
+  /* #fbc881 - Golden Yellow Accent */
+  --primary: oklch(0.838 0.117 76.8);
+  --primary-foreground: oklch(0.145 0 0);
+  
+  /* #8a8ea9 - Slate Blue/Gray */
+  --secondary: oklch(0.627 0.041 274.5);
+  --secondary-foreground: oklch(0.945 0.012 328.5);
+  
+  /* #c8c3cd - Light Gray/Purple */
+  --muted: oklch(0.811 0.014 300.2);
+  --muted-foreground: oklch(0.627 0.041 274.5);
+  
+  --accent: oklch(0.811 0.014 300.2);
+  --accent-foreground: oklch(0.145 0 0);
+  
   --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
+  
+  --border: oklch(0.811 0.014 300.2);
+  --input: oklch(0.811 0.014 300.2);
+  --ring: oklch(0.838 0.117 76.8);
+  
+  /* Kept your original chart colors */
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
+  
+  /* Sidebar uses the custom palette */
+  --sidebar: oklch(0.945 0.012 328.5);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.838 0.117 76.8);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+  --sidebar-accent: oklch(0.811 0.014 300.2);
+  --sidebar-accent-foreground: oklch(0.145 0 0);
+  --sidebar-border: oklch(0.811 0.014 300.2);
+  --sidebar-ring: oklch(0.838 0.117 76.8);
 }
 
 .dark {
-  --background: oklch(0.141 0.005 285.823);
+  /* #0c0c0c - Deepest black for the main canvas */
+  --background: oklch(0.15 0 0);
+  /* #fbfbfb - Crisp white for primary text */
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
+  
+  /* Cards use the main background but are defined by borders */
+  --card: oklch(0.15 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
+  --popover: oklch(0.15 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
+  
+  /* #fbfbfb - Primary actions (like the active white circle menu item) */
+  --primary: oklch(0.985 0 0);
+  /* #0c0c0c - Dark text/icons inside primary buttons */
+  --primary-foreground: oklch(0.15 0 0);
+  
+  /* #323232 - Dark gray for secondary surfaces and button backgrounds */
+  --secondary: oklch(0.335 0 0);
+  /* #fbfbfb - White text on secondary surfaces */
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
+  
+  /* #323232 - Dark gray for muted backgrounds */
+  --muted: oklch(0.335 0 0);
+  /* #77797b - Mid gray for muted/secondary text (like "ELEVATE YOUR...") */
+  --muted-foreground: oklch(0.555 0 0);
+  
+  /* #323232 - Hover states */
+  --accent: oklch(0.335 0 0);
   --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
+  
+  --destructive: oklch(0.704 0.191 22.216); /* Kept original dark red */
   --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
+  
+  /* #323232 - Distinct dark gray borders for the cards/panels */
+  --border: oklch(0.335 0 0);
+  --input: oklch(0.335 0 0);
+  /* #bab7ba - Lighter gray for focus rings to stand out against dark borders */
+  --ring: oklch(0.765 0 0);
+  
+  /* Kept your original chart colors */
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.006 285.885);
+  
+  /* Sidebar mapped to the new sleek dark palette */
+  --sidebar: oklch(0.15 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-primary: oklch(0.985 0 0);
+  --sidebar-primary-foreground: oklch(0.15 0 0);
+  --sidebar-accent: oklch(0.335 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
+  --sidebar-border: oklch(0.335 0 0);
+  --sidebar-ring: oklch(0.765 0 0);
 }
 
 @layer base {

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 },

src/renderer/hooks/useDoubleClickAI.ts

@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import { useFloatingChat } from '@/context/FloatingChatContext';
+
+// Elements where double-click should NOT trigger the AI popup
+const INTERACTIVE_TAGS = new Set(['INPUT', 'TEXTAREA', 'SELECT']);
+
+export function useDoubleClickAI(): void {
+  const { openAtSection, moveToSection, sections, state } = useFloatingChat();
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+
+      // Skip interactive elements (preserve text selection behavior)
+      if (INTERACTIVE_TAGS.has(target.tagName)) return;
+
+      // Skip contenteditable elements UNLESS they're inside Milkdown
+      if (target.isContentEditable) {
+        const inMilkdown =
+          target.closest('.milkdown-container') ||
+          target.closest('.crepe-editor');
+        if (!inMilkdown) return;
+        // For Milkdown: only trigger if no text was selected by the double-click
+        const selection = window.getSelection();
+        if (selection && selection.toString().trim().length > 0) return;
+      }
+
+      // Walk up DOM to find nearest [data-ai-section]
+      const sectionEl = (target as Element).closest('[data-ai-section]');
+      if (!sectionEl) return;
+
+      const sectionId = sectionEl.getAttribute('data-ai-section');
+      if (!sectionId) return;
+
+      // If popup is already open at THIS section, do nothing
+      if (state.isOpen && state.activeSectionId === sectionId) return;
+
+      // 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, moveToSection, sections, state.isOpen, state.activeSectionId]);
+}

src/renderer/lib/ipcLink.ts

@@ -15,6 +15,7 @@ interface ElectronTRPC {
 
 interface ElectronAI {
   onStreamChunk: (cb: (data: { token: string; done: boolean }) => void) => () => void;
+  onAction: (cb: (data: { type: string; taskId?: string; count?: number }) => void) => () => void;
 }
 
 declare global {

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);
@@ -139,7 +155,7 @@ function NoteDetailPage() {
   }
 
   return (
-    <div className="flex h-full min-h-0 pe-8 flex-col">
+    <div className="flex h-full min-h-0 flex-col">
       {/* Header */}
       <div className="flex items-center gap-2 border-b border-border px-4 py-3">
         <Button
@@ -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}

src/renderer/routes/tasks.tsx

@@ -1,5 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import { useFloatingChat } from '@/context/FloatingChatContext';
 import {
   ClipboardCheck,
   ListTodo,
@@ -40,6 +41,19 @@ const ORDER_LABELS: Record<OrderBy, string> = {
 };
 
 function TasksPage() {
+  // AI section refs
+  const overviewRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const { state: floatingState, registerSection, unregisterSection } = useFloatingChat();
+  useEffect(() => {
+    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('');
   const [debouncedSearch, setDebouncedSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
@@ -110,9 +124,9 @@ function TasksPage() {
   );
 
   return (
-    <div className="flex flex-col gap-6 p-6 pe-8 w-full">
+    <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 />
@@ -151,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 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>
@@ -216,9 +232,15 @@ function TasksPage() {
               onEdit={setEditTask}
               onDelete={(id) => deleteTask.mutate({ id })}
               onClick={setViewTask}
+              layoutId={
+                floatingState.morphTargetId === `task-morph-${task.id}`
+                  ? floatingState.morphTargetId
+                  : undefined
+              }
             />
           ))
         )}
+        </div>
       </div>
 
       <NewTaskDialog open={dialogOpen} onOpenChange={setDialogOpen} />

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 pe-8 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>