feat: add CLAUDE.md for development guidance and update .gitignore to include .claude directory; refactor AIChatPanel and AppShell components for improved context handling; simplify layout in ProjectDetail, NoteDetailPage, TasksPage, and TimelinePage components

feat(floating-ai): step 7 — implement morph animation (FLIP)
Add FLIP animation so the floating chat visually morphs into a newly-created TaskRow when the AI creates a task. Uses Framer Motion's shared layoutId across FloatingChat and TaskRow, with LayoutGroup wrapping the app shell. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 13:42:52 +01:00 · 2026-02-28 13:27:23 +01:00 · 2026-02-28 09:40:00 +01:00 · 2026-02-28 09:23:04 +01:00 · 2026-02-28 07:59:24 +01:00 · 2026-02-28 00:16:54 +01:00
21 changed files with 2033 additions and 394 deletions
--- a/.claude/CLAUDE.md
+++ b/.claude/CLAUDE.md
@@ -107,4 +107,33 @@ LanceDB stored in `{userData}/vectors/`. Table schema: `{ id, projectId, content
 - Icons: **lucide-react** throughout — do not introduce other icon libraries
 - 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)
+- 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.
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -1,6 +0,0 @@
-{
-  "enabledMcpjsonServers": [
-    "shadcn"
-  ],
-  "enableAllProjectMcpServers": true
-}
--- a/.gitignore
+++ b/.gitignore
@@ -92,5 +92,5 @@ typings/
 out/

 # local config files
-.claude/
 .vscode/
+
--- a/.vscode/mcp.json
+++ b/.vscode/mcp.json
@@ -1,11 +0,0 @@
-{
-  "servers": {
-    "shadcn": {
-      "command": "npx",
-      "args": [
-        "shadcn@latest",
-        "mcp"
-      ]
-    }
-  }
-}
--- a/docs/floating-ai-integration-guide.md
+++ b/docs/floating-ai-integration-guide.md
--- a/src/main/ai/orchestrator.ts
+++ b/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();
--- a/src/main/router/index.ts
+++ b/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 }) => {
--- a/src/preload/trpc.ts
+++ b/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);
+    };
+  },
 });
--- a/src/renderer/components/ai/AIChatPanel.tsx
+++ b/src/renderer/components/ai/AIChatPanel.tsx
@@ -1,21 +1,14 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { Sparkles, KeyRound, ArrowUp, ListTodo, TrendingUp, AlertCircle, Lightbulb } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 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;
-}
-
 const SUGGESTION_CHIPS = [
  { icon: ListTodo, label: "What's on my plate today?" },
  { icon: TrendingUp, label: 'Summarize this week' },
@@ -25,19 +18,11 @@ const SUGGESTION_CHIPS = [

 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 +31,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);
@@ -59,8 +52,6 @@ export function AIChatPanel({

  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 +59,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 +98,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,60 +109,15 @@ 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>
-      )}
-
      {/* Scrollable messages area */}
      <ScrollArea
        className="flex-1 min-h-0"
@@ -253,7 +127,6 @@ export function AIChatPanel({
            ? '[&>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}
      >
        {/* Home page initial state: greeting + brief */}
        {isHomePage && !hasMessages && (
@@ -306,7 +179,6 @@ export function AIChatPanel({
                  onInputChange={setInput}
                  onKeyDown={handleKeyDown}
                  onSend={handleSend}
-                  isHomePage={isHomePage}
                />
                <div className="flex flex-wrap items-center justify-center gap-2 mt-4">
                  {SUGGESTION_CHIPS.map((chip) => (
@@ -396,79 +268,19 @@ 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>
-                  );
-                }
-
-                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 +297,6 @@ interface ChatInputProps {
  onInputChange: (value: string) => void;
  onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
  onSend: () => void;
-  isHomePage?: boolean;
 }

 function ChatInput({
@@ -521,7 +332,7 @@ function ChatInput({

 /* ---------- ChatMarkdown: lightweight markdown renderer ---------- */

-function ChatMarkdown({ content }: { content: string }) {
+export function ChatMarkdown({ content }: { content: string }) {
  return (
    <div className="prose prose-sm dark:prose-invert max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
      <ReactMarkdown
--- a/src/renderer/components/ai/FloatingChat.tsx
+++ b/src/renderer/components/ai/FloatingChat.tsx
@@ -0,0 +1,293 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useRouterState } from '@tanstack/react-router';
+import { X, ArrowUp } from 'lucide-react';
+import {
+  useFloatingChat,
+  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';
+
+function FloatingChatInner() {
+  const { state, sections, close, setMorphTarget } = useFloatingChat();
+  const utils = trpc.useUtils();
+  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],
+  );
+
+  const {
+    messages,
+    input,
+    setInput,
+    isStreaming,
+    streamingContent,
+    handleSend,
+    clearMessages,
+  } = useAIChat(chatContext);
+
+  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 ----
+
+  useEffect(() => {
+    const currentPath = routerState.location.pathname;
+    if (prevPathRef.current !== currentPath && state.isOpen) {
+      close();
+    }
+    prevPathRef.current = currentPath;
+  }, [routerState.location.pathname, state.isOpen, 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]);
+
+  // ---- 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);
+}
--- a/src/renderer/components/layout/AppShell.tsx
+++ b/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>
--- a/src/renderer/components/projects/KanbanBoard.tsx
+++ b/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>
                        )}
--- a/src/renderer/components/projects/ProjectDetail.tsx
+++ b/src/renderer/components/projects/ProjectDetail.tsx
@@ -161,7 +161,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 && (
--- a/src/renderer/components/tasks/TaskRow.tsx
+++ b/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>
--- a/src/renderer/context/FloatingChatContext.tsx
+++ b/src/renderer/context/FloatingChatContext.tsx
@@ -0,0 +1,176 @@
+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
+}
+
+interface FloatingChatState {
+  isOpen: boolean;
+  activeSectionId: string | null;
+  position: { x: number; y: number; width: number };
+  morphTargetId: string | null;
+  projectId?: string;
+}
+
+interface FloatingChatContextValue {
+  // State
+  state: FloatingChatState;
+  sections: Map<string, AISection>;
+
+  // Section registry
+  registerSection: (section: AISection) => void;
+  unregisterSection: (id: string) => void;
+
+  // Actions
+  openAtSection: (sectionId: string) => void;
+  moveToSection: (sectionId: string) => void;
+  close: () => void;
+  setMorphTarget: (id: string | null) => void;
+}
+
+// ---------- Constants ----------
+
+export const CHAT_WIDTH = 380;
+export const CHAT_HEIGHT = 420;
+export const PADDING = 16;
+
+// ---------- Position computation ----------
+
+function computeAnchorPosition(
+  sectionRef: RefObject<HTMLElement | null>,
+): { x: number; y: number; width: number } {
+  const el = sectionRef.current;
+  if (!el) return { x: PADDING, y: PADDING, width: CHAT_WIDTH };
+
+  const rect = el.getBoundingClientRect();
+
+  // Anchor to top-right of section, offset inward
+  let x = rect.right - CHAT_WIDTH - PADDING;
+  let y = rect.top + PADDING;
+
+  // Edge-collision clamping
+  x = Math.max(PADDING, Math.min(x, window.innerWidth - CHAT_WIDTH - PADDING));
+  y = Math.max(
+    PADDING,
+    Math.min(y, window.innerHeight - CHAT_HEIGHT - 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));
+  }, []);
+
+  const unregisterSection = useCallback((id: string) => {
+    sectionsRef.current.delete(id);
+    setSections(new Map(sectionsRef.current));
+  }, []);
+
+  const openAtSection = useCallback((sectionId: string) => {
+    const section = sectionsRef.current.get(sectionId);
+    if (!section) return;
+
+    const position = computeAnchorPosition(section.ref);
+
+    setState({
+      isOpen: true,
+      activeSectionId: sectionId,
+      position,
+      morphTargetId: null,
+      projectId: section.projectId,
+    });
+  }, []);
+
+  const moveToSection = useCallback((sectionId: string) => {
+    const section = sectionsRef.current.get(sectionId);
+    if (!section) return;
+
+    const position = computeAnchorPosition(section.ref);
+
+    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 }));
+  }, []);
+
+  return (
+    <FloatingChatCtx.Provider
+      value={{
+        state,
+        sections,
+        registerSection,
+        unregisterSection,
+        openAtSection,
+        moveToSection,
+        close,
+        setMorphTarget,
+      }}
+    >
+      {children}
+    </FloatingChatCtx.Provider>
+  );
+}
--- a/src/renderer/hooks/useAIChat.ts
+++ b/src/renderer/hooks/useAIChat.ts
@@ -0,0 +1,130 @@
+import { useState, useCallback, useRef } from 'react';
+import { trpc } from '@/lib/trpc';
+
+export interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  error?: boolean;
+}
+
+export interface ChatContext {
+  type: 'global' | 'project';
+  projectId?: string;
+  uiContext?: string;
+}
+
+export interface UseAIChatReturn {
+  messages: ChatMessage[];
+  input: string;
+  setInput: (v: string) => void;
+  isStreaming: boolean;
+  streamingContent: string;
+  handleSend: (overrideMessage?: string, overrideContext?: ChatContext) => void;
+  clearMessages: () => void;
+}
+
+export function useAIChat(defaultContext: ChatContext): UseAIChatReturn {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [input, setInput] = useState('');
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [streamingContent, setStreamingContent] = useState('');
+
+  const streamingContentRef = useRef('');
+  const chatMutation = trpc.ai.chat.useMutation();
+
+  const clearMessages = useCallback(() => {
+    setMessages([]);
+    setStreamingContent('');
+    streamingContentRef.current = '';
+  }, []);
+
+  const handleSend = useCallback(
+    (overrideMessage?: string, overrideContext?: ChatContext) => {
+      const trimmed = (overrideMessage ?? input).trim();
+      if (!trimmed || isStreaming) return;
+
+      const userMsg: ChatMessage = {
+        id: crypto.randomUUID(),
+        role: 'user',
+        content: trimmed,
+      };
+
+      setMessages((prev) => [...prev, userMsg]);
+      if (!overrideMessage) 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);
+      });
+
+      const ctx = overrideContext ?? defaultContext;
+
+      chatMutation.mutate(
+        {
+          message: trimmed,
+          context: {
+            type: ctx.type,
+            ...(ctx.type === 'project' && ctx.projectId ? { projectId: ctx.projectId } : {}),
+            ...(ctx.uiContext ? { uiContext: ctx.uiContext } : {}),
+          },
+        },
+        {
+          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, defaultContext, chatMutation],
+  );
+
+  return {
+    messages,
+    input,
+    setInput,
+    isStreaming,
+    streamingContent,
+    handleSend,
+    clearMessages,
+  };
+}
--- a/src/renderer/hooks/useDoubleClickAI.ts
+++ b/src/renderer/hooks/useDoubleClickAI.ts
@@ -0,0 +1,44 @@
+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, 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;
+
+      openAtSection(sectionId);
+    };
+
+    document.addEventListener('dblclick', handler);
+    return () => document.removeEventListener('dblclick', handler);
+  }, [openAtSection, state.isOpen, state.activeSectionId]);
+}
--- a/src/renderer/lib/ipcLink.ts
+++ b/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 {
--- a/src/renderer/routes/notes.$noteId.tsx
+++ b/src/renderer/routes/notes.$noteId.tsx
@@ -139,7 +139,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
--- a/src/renderer/routes/tasks.tsx
+++ b/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,14 @@ const ORDER_LABELS: Record<OrderBy, string> = {
 };

 function TasksPage() {
+  // Temporary test: register section for floating AI chat
+  const testRef = useRef<HTMLDivElement>(null);
+  const { state: floatingState, registerSection, unregisterSection } = useFloatingChat();
+  useEffect(() => {
+    registerSection({ id: 'test', label: 'Tasks', ref: testRef });
+    return () => unregisterSection('test');
+  }, [registerSection, unregisterSection]);
+
  const [search, setSearch] = useState('');
  const [debouncedSearch, setDebouncedSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
@@ -110,7 +119,7 @@ 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">
        <Item variant="muted">
@@ -178,7 +187,7 @@ function TasksPage() {
      </div>

      {/* Status Filter Tabs + New Task Button */}
-      <div className="flex items-center justify-between">
+      <div ref={testRef} data-ai-section="test" className="flex items-center justify-between">
        <Tabs value={statusFilter} onValueChange={(v) => setStatusFilter(v as StatusFilter)}>
          <TabsList>
            <TabsTrigger value="all">All</TabsTrigger>
@@ -216,6 +225,11 @@ function TasksPage() {
              onEdit={setEditTask}
              onDelete={(id) => deleteTask.mutate({ id })}
              onClick={setViewTask}
+              layoutId={
+                floatingState.morphTargetId === `task-morph-${task.id}`
+                  ? floatingState.morphTargetId
+                  : undefined
+              }
            />
          ))
        )}
--- a/src/renderer/routes/timeline.tsx
+++ b/src/renderer/routes/timeline.tsx
@@ -70,7 +70,7 @@ function TimelinePage() {
  }, [ganttCheckpoints]);

  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">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-semibold">Timeline</h1>
Author	SHA1	Message	Date
Roberto Musso	c5e78311e6	feat: add CLAUDE.md for development guidance and update .gitignore to include .claude directory; refactor AIChatPanel and AppShell components for improved context handling; simplify layout in ProjectDetail, NoteDetailPage, TasksPage, and TimelinePage components	2026-02-28 13:42:52 +01:00
Roberto Musso	60b76c6d97	feat(floating-ai): step 7 — implement morph animation (FLIP) Add FLIP animation so the floating chat visually morphs into a newly-created TaskRow when the AI creates a task. Uses Framer Motion's shared layoutId across FloatingChat and TaskRow, with LayoutGroup wrapping the app shell. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-28 13:27:23 +01:00
Roberto Musso	d12681b79f	feat(floating-ai): step 6 — pass uiContext through to the AI Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-28 09:40:00 +01:00
Roberto Musso	6c498c5f40	feat(floating-ai): step 5 — add ai:action IPC side-channel Add a new ai:action IPC channel so the renderer can react to AI tool side-effects (task creation, checkpoint/task suggestions). Also mark AI-created tasks with isAiSuggested: 1 in both project and global add_task tools. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-28 09:23:04 +01:00
Roberto Musso	310370ef66	fix(floating-ai): replace ScrollArea with div for message container in FloatingChat	2026-02-28 07:59:24 +01:00
Roberto Musso	f4e6238176	fix(tasks): adjust Floating AI chat section registration and styling	2026-02-28 00:16:54 +01:00
Roberto Musso	d8cf7814ab	Merge branch 'feature/color' into feature/popup-ai	2026-02-27 23:56:19 +01:00
Roberto Musso	50b69aadbf	feat(tasks): register section for floating AI chat in TasksPage	2026-02-27 23:56:08 +01:00
Roberto Musso	6cd121fa80	feat(floating-ai): step 4 — build FloatingChat component Create the floating AI chat popup rendered via portal to document.body. Uses useAIChat for chat logic, useFloatingChat for position/state, Framer Motion for enter/exit animations, and pointer-event dragging. Includes: close on Escape, close on route change, auto-scroll, auto-focus, window resize clamping, and compact message rendering. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-27 23:05:25 +01:00
Roberto Musso	28a5d65f1a	feat(floating-ai): step 3 — create double-click hook Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-27 22:49:16 +01:00
Roberto Musso	b4e97e14f3	feat(floating-ai): step 2 — create section registry + FloatingChatContext Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-27 22:43:05 +01:00
Roberto Musso	78b4df1028	chore: remove unused Claude configuration files and update .gitignore	2026-02-27 22:35:18 +01:00
Roberto Musso	96101e4310	feat(floating-ai): step 1 — extract shared useAIChat hook Refactor AIChatPanel to consume the existing useAIChat hook instead of managing chat state inline. Removes duplicate ChatMessage interface, inline state (messages, input, isStreaming, streamingContent), and the 65-line handleSend callback, replacing them with a single useAIChat() call and a thin briefLoading guard wrapper. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-27 22:27:11 +01:00
Roberto Musso	4b2162505c	Merge branch 'develop' into feature/popup-ai	2026-02-26 23:46:14 +01:00
Roberto Musso	a16e1cc42a	feat: add custom hook useAIChat for managing AI chat interactions - Implemented useAIChat hook to handle chat messages, input state, and streaming responses. - Added types for ChatMessage and ChatContext to ensure type safety. - Integrated TRPC mutation for sending messages and handling responses. - Included functionality for clearing messages and managing streaming content.	2026-02-26 23:31:41 +01:00