-
+ ) : undefined
+ }
+ />
)}
{/* EDITOR ZONE: flex-1, fills remaining space */}
@@ -733,11 +462,10 @@ export const ChatInputContainer = forwardRef
- {/* Queued message */}
- {hasQueuedMessage && (
+ {hasContextZone && (
+
-
-
- )}
-
- {/* Image attachments preview */}
-
- setIsInputFocused(true)}
onBlur={() => setIsInputFocused(false)}
+ sessionId={sessionId}
+ taskId={taskId}
+ onAddContextFile={onAddContextFile}
+ onToggleContextFile={onToggleContextFile}
+ planContextEnabled={planContextEnabled}
+ onAgentCommand={handleAgentCommand}
+ onImagePaste={handleImagePaste}
/>
+ {/* Left: Plan, Thinking, Context */}
+
+ );
+});
diff --git a/apps/web/components/task/chat/comment-block.tsx b/apps/web/components/task/chat/comment-block.tsx
deleted file mode 100644
index efdee1458c..0000000000
--- a/apps/web/components/task/chat/comment-block.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { Button } from '@kandev/ui/button';
-import { Badge } from '@kandev/ui/badge';
-import {
- Collapsible,
- CollapsibleContent,
- CollapsibleTrigger,
-} from '@kandev/ui/collapsible';
-import { IconChevronDown, IconChevronRight, IconX, IconMessage } from '@tabler/icons-react';
-import { cn } from '@kandev/ui/lib/utils';
-import type { DiffComment } from '@/lib/diff/types';
-import { CommentDisplay } from '@/components/diff/comment-display';
-
-interface CommentBlockProps {
- /** File path for the comments */
- filePath: string;
- /** Comments for this file */
- comments: DiffComment[];
- /** Callback to remove all comments for this file */
- onRemove: () => void;
- /** Callback to remove a specific comment */
- onRemoveComment: (commentId: string) => void;
- /** Callback when a comment is clicked (for jump-to-line) */
- onCommentClick?: (comment: DiffComment) => void;
- /** Additional class name */
- className?: string;
-}
-
-/**
- * Rich block component for embedding review comments in chat input.
- * Shows file name with comment count badge, expandable to see details.
- */
-export function CommentBlock({
- filePath,
- comments,
- onRemove,
- onRemoveComment,
- onCommentClick,
- className,
-}: CommentBlockProps) {
- const [isOpen, setIsOpen] = useState(false);
-
- // Get just the filename for display
- const fileName = filePath.split('/').pop() || filePath;
-
- if (comments.length === 0) {
- return null;
- }
-
- return (
-
+ {/* Plan mode toggle */}
+
+
+
+
+ Toggle plan mode
+
+
+ {/* Context @ button */}
+ {})}
+ trigger={
+
+ }
+ sessionId={sessionId}
+ planContextEnabled={planContextEnabled}
+ contextFiles={contextFiles}
+ onToggleFile={onToggleFile ?? (() => {})}
+ />
+
+
+ {/* Spacer */}
+
+
+ {/* Right: Sessions, Model, Submit */}
+
+
+
+
+ {isAgentBusy ? (
+
+ ) : (
+
+ )}
+
+
+
- {/* Header */}
-
-
-
-
-
-
-
-
-
- {comments.length}
-
-
-
-
-
- {/* Expanded content */}
-
- {comments.map((comment) => (
-
- onCommentClick?.(comment)}
- className={cn(
- 'rounded transition-colors',
- onCommentClick && 'cursor-pointer hover:bg-muted/50'
- )}
- >
- onRemoveComment(comment.id)}
- />
-
- ))}
-
- {files.map((filePath) => (
- onRemoveFile(filePath)}
- onRemoveComment={(commentId) => onRemoveComment(sessionId, filePath, commentId)}
- onCommentClick={onCommentClick}
- />
- ))}
-
- );
-}
diff --git a/apps/web/components/task/chat/context-items/comment-item.tsx b/apps/web/components/task/chat/context-items/comment-item.tsx
new file mode 100644
index 0000000000..54e3459386
--- /dev/null
+++ b/apps/web/components/task/chat/context-items/comment-item.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import { memo } from 'react';
+import type { CommentContextItem } from '@/lib/types/context';
+import { getFileName } from '@/lib/utils/file-path';
+import { ContextChip } from './context-chip';
+import { CommentDisplay } from '@/components/diff/comment-display';
+
+export const CommentItem = memo(function CommentItem({ item }: { item: CommentContextItem }) {
+ const fileName = getFileName(item.filePath);
+
+ const preview = (
+
+
+ );
+
+ return (
+
+ {fileName}
+
+
+ {item.comments.map((comment) => (
+ item.onRemoveComment(comment.id)}
+ />
+ ))}
+
+
+ {thumbnail ? (
+ // eslint-disable-next-line @next/next/no-img-element -- base64 thumbnail
+ 
+ ) : (
+
+ );
+
+ if (!preview) return chip;
+
+ return (
+
+
+ );
+}
diff --git a/apps/web/components/task/chat/context-items/file-item.tsx b/apps/web/components/task/chat/context-items/file-item.tsx
new file mode 100644
index 0000000000..02089e5242
--- /dev/null
+++ b/apps/web/components/task/chat/context-items/file-item.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { memo, useCallback } from 'react';
+import type { FileContextItem } from '@/lib/types/context';
+import { ContextChip } from './context-chip';
+import { LazyFilePreview } from './lazy-file-preview';
+
+export const FileItem = memo(function FileItem({
+ item,
+ sessionId,
+}: {
+ item: FileContextItem;
+ sessionId?: string | null;
+}) {
+ const handleClick = useCallback(() => {
+ item.onOpen(item.path);
+ }, [item]);
+
+ return (
+
+ {queueSlot}
+ {todoSlot}
+ {items.length > 0 && (
+
+
+ {items.map((item) => (
+
+ )}
+ {clarificationSlot}
+
+ {/* eslint-disable-next-line @next/next/no-img-element -- base64 preview */}
+ 
+
+ );
+
+ return (
+ <>
+
+ {item.attachment.width} × {item.attachment.height}
+
+
+
+ );
+ }
+
+ if (error || content === null) {
+ return {path}
+
+
+ {path}
;
+ }
+
+ const preview = content.length > 2000 ? content.slice(0, 2000) + '...' : content;
+
+ return (
+
+
+ );
+}
diff --git a/apps/web/components/task/chat/context-items/lazy-plan-preview.tsx b/apps/web/components/task/chat/context-items/lazy-plan-preview.tsx
new file mode 100644
index 0000000000..0c6a876a12
--- /dev/null
+++ b/apps/web/components/task/chat/context-items/lazy-plan-preview.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useAppStore, useAppStoreApi } from '@/components/state-provider';
+import { getTaskPlan } from '@/lib/api/domains/plan-api';
+
+type LazyPlanPreviewProps = {
+ taskId: string | null;
+};
+
+export function LazyPlanPreview({ taskId }: LazyPlanPreviewProps) {
+ const plan = useAppStore((state) =>
+ taskId ? state.taskPlans.byTaskId[taskId] ?? null : null
+ );
+ const loaded = useAppStore((state) =>
+ taskId ? state.taskPlans.loadedByTaskId[taskId] ?? false : false
+ );
+ const loading = useAppStore((state) =>
+ taskId ? state.taskPlans.loadingByTaskId[taskId] ?? false : false
+ );
+
+ const storeApi = useAppStoreApi();
+
+ useEffect(() => {
+ if (!taskId || loaded || loading) return;
+
+ const { setTaskPlanLoading } = storeApi.getState();
+ setTaskPlanLoading(taskId, true);
+
+ getTaskPlan(taskId).then((result) => {
+ storeApi.getState().setTaskPlan(taskId, result);
+ }).catch(() => {
+ storeApi.getState().setTaskPlanLoading(taskId, false);
+ });
+ }, [taskId, loaded, loading, storeApi]);
+
+ if (!taskId) {
+ return {path}
+
+ {preview}
+
+ No task selected
;
+ }
+
+ if (loading || !loaded) {
+ return (
+
+
+ );
+ }
+
+ if (!plan?.content) {
+ return Plan
+
+
+ Plan is empty
;
+ }
+
+ const preview = plan.content.length > 2000 ? plan.content.slice(0, 2000) + '...' : plan.content;
+
+ return (
+
+
+ );
+}
diff --git a/apps/web/components/task/chat/context-items/plan-comment-item.tsx b/apps/web/components/task/chat/context-items/plan-comment-item.tsx
new file mode 100644
index 0000000000..63f80bd2ec
--- /dev/null
+++ b/apps/web/components/task/chat/context-items/plan-comment-item.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { memo } from 'react';
+import type { PlanCommentContextItem } from '@/lib/types/context';
+import { ContextChip } from './context-chip';
+
+export const PlanCommentItem = memo(function PlanCommentItem({ item }: { item: PlanCommentContextItem }) {
+ const preview = (
+ Plan
+
+ {preview}
+
+
+ {item.comments.map((comment) => (
+
+ );
+
+ return (
+
+ {comment.selectedText && (
+
+ ))}
+
+ “{comment.selectedText}”
+
+ )}
+ {comment.comment}
+ Custom prompt
;
+ }
+
+ const truncated = content.length > 2000 ? content.slice(0, 2000) + '...' : content;
+
+ return (
+
+
+ );
+}
+
+type PromptPreviewFromStoreProps = {
+ promptId: string;
+};
+
+export function PromptPreviewFromStore({ promptId }: PromptPreviewFromStoreProps) {
+ const content = useAppStore((state) => {
+ const prompt = state.prompts.items.find((p) => p.id === promptId);
+ return prompt?.content ?? null;
+ });
+
+ return Prompt
+
+ {truncated}
+
+
+
+
+ {/* Search */}
+ Context
+· Select files and prompts to include
+
+
+
+ {/* Items */}
+
+
+
+ {/* Plan item - always first, only when no search query */}
+ {!query && (
+
+ onToggleFile(PLAN_CONTEXT_FILE)}
+ >
+ onToggleFile(PLAN_CONTEXT_FILE)}
+ className="h-3.5 w-3.5"
+ />
+
+ )}
+
+ {/* Prompts section */}
+ {filteredPrompts.length > 0 && (
+ <>
+ {!query && (
+
+
+ )}
+ {filteredPrompts.map((prompt) => (
+ Prompts
+ {
+ // Insert prompt content by simulating a mention select - for now just copy to clipboard or similar
+ // Prompts in context popover: clicking inserts the prompt name as a context file reference
+ // This toggles the prompt as a context file
+ onToggleFile({ path: `prompt:${prompt.id}`, name: prompt.name, pinned: true });
+ }}
+ >
+ f.path === `prompt:${prompt.id}`)}
+ onCheckedChange={() => onToggleFile({ path: `prompt:${prompt.id}`, name: prompt.name, pinned: true })}
+ className="h-3.5 w-3.5"
+ />
+
+ ))}
+
+ )}
+
+ {/* Files section header */}
+ {!query && fileResults.length > 0 && (
+
+ {prompt.name}
+ {prompt.content && (
+
+ {prompt.content.length > 60 ? prompt.content.slice(0, 60) + '...' : prompt.content}
+
+ )}
+
+
+
+ )}
+
+ {/* File results */}
+ {isLoading ? (
+ Files
+Loading...
+ ) : fileResults.length === 0 && query && filteredPrompts.length === 0 ? (
+ No results found
+ ) : (
+ fileResults.map((filePath) => {
+ const isDir = isDirectory(filePath);
+ const name = getFileName(filePath);
+ const parent = filePath.slice(0, filePath.length - name.length);
+ return (
+ handleToggleFile(filePath)}
+ >
+ handleToggleFile(filePath)}
+ className="h-3.5 w-3.5"
+ />
+ {isDir ? (
+
+ );
+ })
+ )}
+
+ {name}
+ {parent && (
+ {parent}
+ )}
+
+
- {isPlan ? (
-
- );
-});
diff --git a/apps/web/components/task/chat/editor-context.tsx b/apps/web/components/task/chat/editor-context.tsx
new file mode 100644
index 0000000000..5787b30150
--- /dev/null
+++ b/apps/web/components/task/chat/editor-context.tsx
@@ -0,0 +1,13 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+
+type EditorContextValue = {
+ sessionId: string | null;
+ taskId: string | null;
+};
+
+const EditorContext = createContext
{/* Context badges */}
- {(hasPlanMode || hasReviewComments) && (
-
+ {(hasPlanMode || hasReviewComments || contextFiles.length > 0) && (
+
diff --git a/apps/web/components/task/task-chat-panel.tsx b/apps/web/components/task/task-chat-panel.tsx
index 6c90dd46d3..e71c40291e 100644
--- a/apps/web/components/task/task-chat-panel.tsx
+++ b/apps/web/components/task/task-chat-panel.tsx
@@ -11,11 +11,13 @@ import { useKeyboardShortcut } from '@/hooks/use-keyboard-shortcut';
import { SHORTCUTS } from '@/lib/keyboard/constants';
import { useSessionMessages } from '@/hooks/domains/session/use-session-messages';
import { useSettingsData } from '@/hooks/domains/settings/use-settings-data';
+import { useCustomPrompts } from '@/hooks/domains/settings/use-custom-prompts';
import { useSessionState } from '@/hooks/domains/session/use-session-state';
import { useProcessedMessages } from '@/hooks/use-processed-messages';
import { useSessionModel } from '@/hooks/domains/session/use-session-model';
import { useMessageHandler } from '@/hooks/use-message-handler';
import { useQueue } from '@/hooks/domains/session/use-queue';
+import { useContextFilesStore } from '@/lib/state/context-files-store';
import { VirtualizedMessageList } from '@/components/task/chat/virtualized-message-list';
import { ChatInputContainer, type ChatInputContainerHandle, type MessageAttachment } from '@/components/task/chat/chat-input-container';
import { type QueuedMessageIndicatorHandle } from '@/components/task/chat/queued-message-indicator';
@@ -24,10 +26,36 @@ import {
useDiffCommentsStore,
usePendingCommentsByFile,
} from '@/lib/state/slices/diff-comments';
+import { getFileName } from '@/lib/utils/file-path';
+import type { ContextItem } from '@/lib/types/context';
import type { DiffComment } from '@/lib/diff/types';
import type { DocumentComment } from '@/lib/state/slices/ui/types';
const EMPTY_COMMENTS: DocumentComment[] = [];
+const EMPTY_CONTEXT_FILES: import('@/lib/state/context-files-store').ContextFile[] = [];
+
+/** Sort: pinned first, then by kind order, then by label */
+const KIND_ORDER: Record = {
+ plan: 0,
+ file: 1,
+ prompt: 2,
+ comment: 3,
+ 'plan-comment': 4,
+ image: 5,
+};
+
+function contextItemSortFn(a: ContextItem, b: ContextItem): number {
+ // Pinned first
+ const aPinned = a.pinned ? 0 : 1;
+ const bPinned = b.pinned ? 0 : 1;
+ if (aPinned !== bPinned) return aPinned - bPinned;
+ // Then by kind
+ const aKind = KIND_ORDER[a.kind] ?? 99;
+ const bKind = KIND_ORDER[b.kind] ?? 99;
+ if (aKind !== bKind) return aKind - bKind;
+ // Then by label
+ return a.label.localeCompare(b.label);
+}
type TaskChatPanelProps = {
onSend?: (message: string) => void;
@@ -55,9 +83,12 @@ export const TaskChatPanel = memo(function TaskChatPanel({
const chatInputRef = useRef(null);
const queuedMessageRef = useRef(null);
- // Ensure agent profile data is loaded (may not be hydrated from SSR in all navigation paths)
+ // Ensure agent profile data is loaded
useSettingsData(true);
+ // Custom prompts for context
+ const { prompts } = useCustomPrompts();
+
// Session state management
const {
resolvedSessionId,
@@ -71,7 +102,7 @@ export const TaskChatPanel = memo(function TaskChatPanel({
isFailed,
} = useSessionState(sessionId);
- // Plan mode state - derived from active document being a plan in document panel
+ // Plan mode state
const activeDocument = useAppStore((state) =>
resolvedSessionId ? state.documentPanel.activeDocumentBySessionId[resolvedSessionId] ?? null : null
);
@@ -88,6 +119,21 @@ export const TaskChatPanel = memo(function TaskChatPanel({
const { addPlan } = usePanelActions();
+ // Context files store
+ const contextFiles = useContextFilesStore((s) =>
+ resolvedSessionId ? s.filesBySessionId[resolvedSessionId] ?? EMPTY_CONTEXT_FILES : EMPTY_CONTEXT_FILES
+ );
+ const hydrateContextFiles = useContextFilesStore((s) => s.hydrateSession);
+ const addContextFile = useContextFilesStore((s) => s.addFile);
+ const toggleContextFile = useContextFilesStore((s) => s.toggleFile);
+ const removeContextFile = useContextFilesStore((s) => s.removeFile);
+ const unpinFile = useContextFilesStore((s) => s.unpinFile);
+ const clearEphemeral = useContextFilesStore((s) => s.clearEphemeral);
+
+ useEffect(() => {
+ if (resolvedSessionId) hydrateContextFiles(resolvedSessionId);
+ }, [resolvedSessionId, hydrateContextFiles]);
+
const handlePlanModeChange = useCallback(
(enabled: boolean) => {
if (!resolvedSessionId || !taskId) return;
@@ -95,29 +141,45 @@ export const TaskChatPanel = memo(function TaskChatPanel({
setActiveDocument(resolvedSessionId, { type: 'plan', taskId });
addPlan();
setPlanMode(resolvedSessionId, true);
+ addContextFile(resolvedSessionId, { path: 'plan:context', name: 'Plan', pinned: true });
} else {
closeDocument(resolvedSessionId);
setActiveDocument(resolvedSessionId, null);
setPlanMode(resolvedSessionId, false);
}
},
- [resolvedSessionId, taskId, setActiveDocument, addPlan, closeDocument, setPlanMode]
+ [resolvedSessionId, taskId, setActiveDocument, addPlan, closeDocument, setPlanMode, addContextFile]
);
- // Initialize plan mode from localStorage on mount (restore document panel state)
+ // Initialize plan mode from localStorage on mount
useEffect(() => {
if (resolvedSessionId) {
const stored = getLocalStorage(`plan-mode-${resolvedSessionId}`, false);
if (stored) {
- setPlanMode(resolvedSessionId, stored);
+ setPlanMode(resolvedSessionId, true);
+ addContextFile(resolvedSessionId, { path: 'plan:context', name: 'Plan', pinned: true });
}
}
- }, [resolvedSessionId, setPlanMode]);
+ }, [resolvedSessionId, setPlanMode, addContextFile]);
+
+ const handleToggleContextFile = useCallback(
+ (file: { path: string; name: string; pinned?: boolean }) => {
+ if (resolvedSessionId) toggleContextFile(resolvedSessionId, file);
+ },
+ [resolvedSessionId, toggleContextFile]
+ );
+
+ const handleAddContextFile = useCallback(
+ (file: { path: string; name: string; pinned?: boolean }) => {
+ if (resolvedSessionId) addContextFile(resolvedSessionId, file);
+ },
+ [resolvedSessionId, addContextFile]
+ );
// Fetch messages for this session
const { messages, isLoading: messagesLoading } = useSessionMessages(resolvedSessionId);
- // Process messages (filtering, todos, etc.)
+ // Process messages
const { allMessages, groupedItems, permissionsByToolCallId, childrenByParentToolCallId, todoItems, agentMessageCount, pendingClarification } = useProcessedMessages(
messages,
taskId,
@@ -125,18 +187,9 @@ export const TaskChatPanel = memo(function TaskChatPanel({
taskDescription
);
- // Extract user message history for up/down arrow navigation
- const userMessageHistory = useMemo(() => {
- return allMessages
- .filter(msg => msg.author_type === 'user')
- .map(msg => msg.content)
- .filter(content => content && content.trim().length > 0);
- }, [allMessages]);
-
- // Track clarification resolved state to trigger re-render after submit
+ // Clarification state
const [clarificationKey, setClarificationKey] = useState(0);
const handleClarificationResolved = useCallback(() => {
- // Force re-render which will update messages from backend
setClarificationKey((k) => k + 1);
}, []);
@@ -168,24 +221,26 @@ export const TaskChatPanel = memo(function TaskChatPanel({
}
}, [resolvedSessionId, setDocumentComments]);
- // Message sending
- const { handleSendMessage } = useMessageHandler(
- resolvedSessionId,
- taskId,
- sessionModel,
- activeModel,
- planModeEnabled,
- isAgentBusy,
- activeDocument,
- documentComments
+ // Derive plan context from context files store
+ const planContextEnabled = useMemo(
+ () => contextFiles.some((f) => f.path === 'plan:context'),
+ [contextFiles]
);
+ // Build prompts map for content lookup
+ const promptsMap = useMemo(() => {
+ const map = new Map();
+ for (const p of prompts) {
+ map.set(p.id, { content: p.content });
+ }
+ return map;
+ }, [prompts]);
+
// Diff comments management
const pendingCommentsByFile = usePendingCommentsByFile();
const markCommentsSent = useDiffCommentsStore((state) => state.markCommentsSent);
const removeComment = useDiffCommentsStore((state) => state.removeComment);
- // Handle removing all comments for a file
const handleRemoveCommentFile = useCallback(
(filePath: string) => {
if (!resolvedSessionId) return;
@@ -197,21 +252,131 @@ export const TaskChatPanel = memo(function TaskChatPanel({
[resolvedSessionId, pendingCommentsByFile, removeComment]
);
- // Handle removing a single comment
const handleRemoveComment = useCallback(
- (sessionId: string, filePath: string, commentId: string) => {
- removeComment(sessionId, filePath, commentId);
+ (sid: string, filePath: string, commentId: string) => {
+ removeComment(sid, filePath, commentId);
},
[removeComment]
);
+ // Build unified context items
+ const contextItems = useMemo((): ContextItem[] => {
+ const items: ContextItem[] = [];
+ const sid = resolvedSessionId;
+
+ // Plan
+ if (planContextEnabled) {
+ const planFile = contextFiles.find(f => f.path === 'plan:context');
+ items.push({
+ kind: 'plan',
+ id: 'plan:context',
+ label: 'Plan',
+ taskId: taskId ?? undefined,
+ pinned: planFile?.pinned,
+ onRemove: sid ? () => removeContextFile(sid, 'plan:context') : undefined,
+ onUnpin: planFile?.pinned && sid ? () => unpinFile(sid, 'plan:context') : undefined,
+ onOpen: addPlan,
+ });
+ }
+
+ // Files & Prompts from context store
+ for (const f of contextFiles) {
+ if (f.path === 'plan:context') continue;
+ if (f.path.startsWith('prompt:')) {
+ const promptId = f.path.replace('prompt:', '');
+ const prompt = promptsMap.get(promptId);
+ items.push({
+ kind: 'prompt',
+ id: f.path,
+ label: f.name,
+ pinned: f.pinned,
+ onRemove: sid ? () => removeContextFile(sid, f.path) : undefined,
+ onUnpin: f.pinned && sid ? () => unpinFile(sid, f.path) : undefined,
+ promptContent: prompt?.content,
+ onClick: () => {/* navigate to settings/prompts if desired */},
+ });
+ } else {
+ items.push({
+ kind: 'file',
+ id: f.path,
+ label: f.name,
+ path: f.path,
+ pinned: f.pinned,
+ onRemove: sid ? () => removeContextFile(sid, f.path) : undefined,
+ onUnpin: f.pinned && sid ? () => unpinFile(sid, f.path) : undefined,
+ onOpen: onOpenFile ?? (() => {}),
+ });
+ }
+ }
+
+ // Diff/editor comments (per file)
+ if (pendingCommentsByFile) {
+ for (const [filePath, comments] of Object.entries(pendingCommentsByFile)) {
+ if (comments.length === 0) continue;
+ const fileName = getFileName(filePath);
+ items.push({
+ kind: 'comment',
+ id: `comment:${filePath}`,
+ label: `${fileName} (${comments.length})`,
+ filePath,
+ comments,
+ onRemove: () => handleRemoveCommentFile(filePath),
+ onRemoveComment: (cid) => { if (sid) handleRemoveComment(sid, filePath, cid); },
+ onOpen: onOpenFileAtLine ? () => onOpenFileAtLine(filePath) : undefined,
+ });
+ }
+ }
+
+ // Plan comments
+ if (documentComments.length > 0) {
+ items.push({
+ kind: 'plan-comment',
+ id: 'plan-comments',
+ label: `${documentComments.length} plan comment${documentComments.length !== 1 ? 's' : ''}`,
+ comments: documentComments,
+ onRemove: handleClearDocumentComments,
+ onOpen: addPlan,
+ });
+ }
+
+ return items.sort(contextItemSortFn);
+ }, [
+ planContextEnabled,
+ contextFiles,
+ resolvedSessionId,
+ removeContextFile,
+ unpinFile,
+ addPlan,
+ promptsMap,
+ onOpenFile,
+ pendingCommentsByFile,
+ handleRemoveCommentFile,
+ handleRemoveComment,
+ onOpenFileAtLine,
+ documentComments,
+ handleClearDocumentComments,
+ taskId,
+ ]);
+
+ // Message sending
+ const { handleSendMessage } = useMessageHandler(
+ resolvedSessionId,
+ taskId,
+ sessionModel,
+ activeModel,
+ planContextEnabled,
+ isAgentBusy,
+ activeDocument,
+ documentComments,
+ contextFiles,
+ prompts
+ );
+
// Clear awaiting state when a new agent message arrives
useEffect(() => {
lastAgentMessageCountRef.current = agentMessageCount;
}, [agentMessageCount]);
- // Cancels the current agent turn without terminating the agent process,
- // allowing the user to interrupt and send a new prompt.
const handleCancelTurn = useCallback(async () => {
if (!resolvedSessionId) return;
const client = getWebSocketClient();
@@ -224,7 +389,6 @@ export const TaskChatPanel = memo(function TaskChatPanel({
}
}, [resolvedSessionId]);
- // Handle canceling queued message
const handleCancelQueue = useCallback(async () => {
try {
await cancelQueue();
@@ -233,21 +397,14 @@ export const TaskChatPanel = memo(function TaskChatPanel({
}
}, [cancelQueue]);
- // Handle starting edit mode on queued message (from keyboard navigation)
- const handleStartQueueEdit = useCallback(() => {
- queuedMessageRef.current?.startEdit();
- }, []);
-
- // Handle edit complete - return focus to chat input
const handleQueueEditComplete = useCallback(() => {
chatInputRef.current?.focusInput();
}, []);
- const handleSubmit = useCallback(async (message: string, reviewComments?: DiffComment[], attachments?: MessageAttachment[]) => {
+ const handleSubmit = useCallback(async (message: string, reviewComments?: DiffComment[], attachments?: MessageAttachment[], inlineMentions?: import('@/lib/state/context-files-store').ContextFile[]) => {
if (isSending) return;
setIsSending(true);
try {
- // Build final message with review comments
let finalMessage = message;
if (reviewComments && reviewComments.length > 0) {
const reviewMarkdown = formatReviewCommentsAsMarkdown(reviewComments);
@@ -259,42 +416,43 @@ export const TaskChatPanel = memo(function TaskChatPanel({
if (onSend) {
await onSend(finalMessage);
} else {
- await handleSendMessage(finalMessage, attachments, hasReviewComments);
+ await handleSendMessage(finalMessage, attachments, hasReviewComments, inlineMentions);
}
- // Mark comments as sent and clear pending
+ // Mark comments as sent
if (reviewComments && reviewComments.length > 0) {
markCommentsSent(reviewComments.map((c) => c.id));
}
- // Clear plan/document comments after sending (they were included via useMessageHandler)
+ // Clear plan/document comments after sending
if (documentComments.length > 0) {
handleClearDocumentComments();
}
+
+ // Clear ephemeral context items after send
+ if (resolvedSessionId) {
+ clearEphemeral(resolvedSessionId);
+ }
} finally {
setIsSending(false);
}
- }, [isSending, onSend, handleSendMessage, markCommentsSent, documentComments.length, handleClearDocumentComments]);
+ }, [isSending, onSend, handleSendMessage, markCommentsSent, documentComments.length, handleClearDocumentComments, resolvedSessionId, clearEphemeral]);
- // Focus input with / shortcut (only when input is NOT focused)
+ // Focus input with / shortcut
useKeyboardShortcut(
SHORTCUTS.FOCUS_INPUT,
useCallback((event: KeyboardEvent) => {
- // Only handle if we're not already in an input/textarea
const activeElement = document.activeElement;
const isTyping =
activeElement instanceof HTMLInputElement ||
- activeElement instanceof HTMLTextAreaElement;
+ activeElement instanceof HTMLTextAreaElement ||
+ (activeElement instanceof HTMLElement && activeElement.isContentEditable);
- if (isTyping) {
- // Don't intercept - let the "/" be typed normally for slash commands
- return;
- }
+ if (isTyping) return;
- // Not typing anywhere, so focus the chat input
const inputHandle = chatInputRef.current;
if (inputHandle) {
- event.preventDefault(); // Prevent the "/" from being typed when we focus
+ event.preventDefault();
inputHandle.focusInput();
}
}, []),
@@ -350,19 +508,16 @@ export const TaskChatPanel = memo(function TaskChatPanel({
showRequestChangesTooltip={showRequestChangesTooltip}
onRequestChangesTooltipDismiss={onRequestChangesTooltipDismiss}
pendingCommentsByFile={pendingCommentsByFile}
- onRemoveCommentFile={handleRemoveCommentFile}
- onRemoveComment={handleRemoveComment}
- onCommentClick={onOpenFileAtLine ? (comment) => onOpenFileAtLine(comment.filePath) : undefined}
submitKey={chatSubmitKey}
hasAgentCommands={hasAgentCommands}
isFailed={isFailed}
isQueued={isQueued}
- onStartQueueEdit={handleStartQueueEdit}
- userMessageHistory={userMessageHistory}
- documentCommentCount={documentComments.length}
- onClearDocumentComments={handleClearDocumentComments}
+ contextItems={contextItems}
+ planContextEnabled={planContextEnabled}
+ contextFiles={contextFiles}
+ onToggleContextFile={handleToggleContextFile}
+ onAddContextFile={handleAddContextFile}
todoItems={todoItems}
- activeDocument={activeDocument}
queuedMessage={queuedMessage?.content}
onCancelQueue={handleCancelQueue}
updateQueueContent={updateQueueContent}
diff --git a/apps/web/hooks/use-inline-mention.ts b/apps/web/hooks/use-inline-mention.ts
index c233750744..7b05a636df 100644
--- a/apps/web/hooks/use-inline-mention.ts
+++ b/apps/web/hooks/use-inline-mention.ts
@@ -4,14 +4,16 @@ import { useState, useCallback, useRef, useMemo, useEffect } from 'react';
import { useCustomPrompts } from '@/hooks/domains/settings/use-custom-prompts';
import { getWebSocketClient } from '@/lib/ws/connection';
import { searchWorkspaceFiles } from '@/lib/ws/workspace-files';
+import { getFileName } from '@/lib/utils/file-path';
import type { RichTextInputHandle } from '@/components/task/chat/rich-text-input';
export type MentionItem = {
id: string;
- type: 'prompt' | 'file';
+ kind: 'prompt' | 'file' | 'plan';
label: string;
description?: string;
- content?: string; // For prompts, the full content to insert
+ /** What happens on selection. Each kind provides its own. */
+ onSelect: (input: RichTextInputHandle, value: string, triggerStart: number, onChange: (v: string) => void) => void;
};
type Position = {
@@ -60,11 +62,85 @@ function filterItems(items: MentionItem[], query: string): MentionItem[] {
.map(({ item }) => item);
}
+/** Build a file mention item that adds file to context store instead of inserting text. */
+function makeFileItem(
+ filePath: string,
+ onFileSelect?: (path: string, name: string) => void,
+): MentionItem {
+ return {
+ id: filePath,
+ kind: 'file',
+ label: filePath,
+ description: 'File',
+ onSelect: (input, value, triggerStart, onChange) => {
+ // Remove the @trigger text
+ const cursorPos = input.getSelectionStart();
+ onChange(value.substring(0, triggerStart) + value.substring(cursorPos));
+
+ // Add to context store
+ const name = getFileName(filePath);
+ onFileSelect?.(filePath, name);
+
+ requestAnimationFrame(() => {
+ input.setSelectionRange(triggerStart, triggerStart);
+ input.focus();
+ });
+ },
+ };
+}
+
+function makePlanItem(onPlanSelect: () => void): MentionItem {
+ return {
+ id: '__plan__',
+ kind: 'plan',
+ label: 'Plan',
+ description: 'Include the plan as context',
+ onSelect: (input, value, triggerStart, onChange) => {
+ const cursorPos = input.getSelectionStart();
+ onChange(value.substring(0, triggerStart) + value.substring(cursorPos));
+ onPlanSelect();
+ requestAnimationFrame(() => {
+ input.setSelectionRange(triggerStart, triggerStart);
+ input.focus();
+ });
+ },
+ };
+}
+
+/** Build a prompt mention item that adds prompt to context store instead of inserting content. */
+function makePromptItem(
+ prompt: { id: string; name: string; content: string },
+ onPromptSelect?: (id: string, name: string) => void,
+): MentionItem {
+ return {
+ id: prompt.id,
+ kind: 'prompt',
+ label: prompt.name,
+ description: prompt.content.length > 100 ? prompt.content.slice(0, 100) + '...' : prompt.content,
+ onSelect: (input, value, triggerStart, onChange) => {
+ // Remove the @trigger text
+ const cursorPos = input.getSelectionStart();
+ onChange(value.substring(0, triggerStart) + value.substring(cursorPos));
+
+ // Add to context store
+ onPromptSelect?.(prompt.id, prompt.name);
+
+ requestAnimationFrame(() => {
+ input.setSelectionRange(triggerStart, triggerStart);
+ input.focus();
+ });
+ },
+ };
+}
+
export function useInlineMention(
inputRef: React.RefObject,
value: string,
onChange: (value: string) => void,
- sessionId?: string | null
+ sessionId?: string | null,
+ onPlanSelect?: () => void,
+ onFileSelect?: (path: string, name: string) => void,
+ onPromptSelect?: (id: string, name: string) => void,
) {
const [isOpen, setIsOpen] = useState(false);
const [position, setPosition] = useState(null);
@@ -146,35 +222,31 @@ export function useInlineMention(
}, [isOpen, query, searchFiles]);
/* eslint-enable react-hooks/set-state-in-effect */
+ // Build plan item
+ const planItem = useMemo((): MentionItem | null => {
+ if (!onPlanSelect) return null;
+ return makePlanItem(onPlanSelect);
+ }, [onPlanSelect]);
+
// Build prompt items
const promptItems = useMemo((): MentionItem[] => {
- return prompts.map((prompt) => ({
- id: prompt.id,
- type: 'prompt' as const,
- label: prompt.name,
- description: prompt.content.length > 100 ? prompt.content.slice(0, 100) + '...' : prompt.content,
- content: prompt.content,
- }));
- }, [prompts]);
+ return prompts.map((prompt) => makePromptItem(prompt, onPromptSelect));
+ }, [prompts, onPromptSelect]);
// Build file items from search results
const fileItems = useMemo((): MentionItem[] => {
- return fileResults.map((filePath) => ({
- id: filePath,
- type: 'file' as const,
- label: filePath,
- description: 'File',
- }));
- }, [fileResults]);
+ return fileResults.map((filePath) => makeFileItem(filePath, onFileSelect));
+ }, [fileResults, onFileSelect]);
// Combine and filter items
const filteredItems = useMemo(() => {
- const filtered = filterItems(promptItems, query);
- const filteredFiles = filterItems(fileItems, query);
-
- // Prompts first, then files
- return [...filtered, ...filteredFiles];
- }, [promptItems, fileItems, query]);
+ // Plan first, then prompts, then files
+ const allItems: MentionItem[] = [];
+ if (planItem) allItems.push(planItem);
+ allItems.push(...promptItems);
+ allItems.push(...fileItems);
+ return filterItems(allItems, query);
+ }, [planItem, promptItems, fileItems, query]);
// Reset selected index when items change
/* eslint-disable react-hooks/set-state-in-effect -- resetting selection on items change is intentional */
@@ -246,34 +318,10 @@ export function useInlineMention(
const input = inputRef.current;
if (!input || triggerStart < 0) return;
- let insertText: string;
- let cursorOffset: number;
-
- if (item.type === 'prompt' && item.content) {
- // For prompts, replace @mention with full prompt content + newline
- insertText = item.content + '\n';
- cursorOffset = insertText.length;
- } else {
- // For files, replace @mention with @filename
- insertText = `@${item.label} `;
- cursorOffset = insertText.length;
- }
-
- // Get current cursor position to determine end of replacement
- const cursorPos = input.getSelectionStart();
- const newValue = value.substring(0, triggerStart) + insertText + value.substring(cursorPos);
-
- onChange(newValue);
+ item.onSelect(input, value, triggerStart, onChange);
setIsOpen(false);
setTriggerStart(-1);
setQuery('');
-
- // Restore cursor position
- requestAnimationFrame(() => {
- const newCursorPos = triggerStart + cursorOffset;
- input.setSelectionRange(newCursorPos, newCursorPos);
- input.focus();
- });
},
[inputRef, triggerStart, value, onChange]
);
diff --git a/apps/web/hooks/use-message-handler.ts b/apps/web/hooks/use-message-handler.ts
index 6e90cc736e..2010ec3c4e 100644
--- a/apps/web/hooks/use-message-handler.ts
+++ b/apps/web/hooks/use-message-handler.ts
@@ -3,6 +3,8 @@ import { getWebSocketClient } from '@/lib/ws/connection';
import { useQueue } from './domains/session/use-queue';
import type { MessageAttachment } from '@/components/task/chat/chat-input-container';
import type { ActiveDocument, DocumentComment } from '@/lib/state/slices/ui/types';
+import type { ContextFile } from '@/lib/state/context-files-store';
+import type { CustomPrompt } from '@/lib/types/http';
function buildDocumentContext(activeDocument: ActiveDocument | null, comments?: DocumentComment[]): string {
if (!activeDocument) return '';
@@ -24,6 +26,35 @@ function buildDocumentContext(activeDocument: ActiveDocument | null, comments?:
return `\n\n\nACTIVE DOCUMENT: The user is editing "${activeDocument.name}" (${activeDocument.path}) side-by-side with this chat.\nRead this file to understand the context before responding.\n `;
}
+function buildContextFilesContext(contextFiles: ContextFile[], prompts: CustomPrompt[]): string {
+ const files = contextFiles.filter((f) => !f.path.startsWith('prompt:') && f.path !== 'plan:context');
+ const promptFiles = contextFiles.filter((f) => f.path.startsWith('prompt:'));
+
+ let context = '';
+
+ if (files.length > 0) {
+ const fileList = files.map((f) => `- ${f.path}`).join('\n');
+ context += `\n\n\nCONTEXT FILES: The user has attached the following files as context. Read these files to understand what the user is referring to:\n${fileList}\n `;
+ }
+
+ if (promptFiles.length > 0) {
+ const promptsById = new Map(prompts.map((p) => [p.id, p]));
+ const resolved = promptFiles
+ .map((f) => {
+ const id = f.path.replace('prompt:', '');
+ const prompt = promptsById.get(id);
+ return prompt ? `### ${prompt.name}\n${prompt.content}` : null;
+ })
+ .filter(Boolean);
+
+ if (resolved.length > 0) {
+ context += `\n\n\nCONTEXT PROMPTS: The user has included the following prompt instructions as context:\n${resolved.join('\n\n')}\n `;
+ }
+ }
+
+ return context;
+}
+
export function useMessageHandler(
resolvedSessionId: string | null,
taskId: string | null,
@@ -32,12 +63,14 @@ export function useMessageHandler(
planMode: boolean = false,
isAgentBusy: boolean = false,
activeDocument: ActiveDocument | null = null,
- documentComments: DocumentComment[] = []
+ documentComments: DocumentComment[] = [],
+ contextFiles: ContextFile[] = [],
+ prompts: CustomPrompt[] = []
) {
const { queue } = useQueue(resolvedSessionId);
const handleSendMessage = useCallback(
- async (message: string, attachments?: MessageAttachment[], hasReviewComments?: boolean) => {
+ async (message: string, attachments?: MessageAttachment[], hasReviewComments?: boolean, inlineMentions?: ContextFile[]) => {
if (!taskId || !resolvedSessionId) {
console.error('No active task session. Start an agent before sending a message.');
return;
@@ -47,13 +80,23 @@ export function useMessageHandler(
const trimmedMessage = message.trim();
+ // Merge stored context files with inline @mentions from the editor
+ const allContextFiles = [...contextFiles, ...(inlineMentions || [])];
+
// Append document context if active
const documentContext = buildDocumentContext(activeDocument, documentComments);
- const finalMessage = documentContext ? trimmedMessage + documentContext : trimmedMessage;
+ const contextFilesContext = buildContextFilesContext(allContextFiles, prompts);
+ const finalMessage = trimmedMessage + documentContext + contextFilesContext;
// Include active model in the request if it differs from the session model
const modelToSend = activeModel && activeModel !== sessionModel ? activeModel : undefined;
+ // Build context_files metadata for the WS payload (exclude prompts and plan:context)
+ const realFiles = allContextFiles.filter((f) => !f.path.startsWith('prompt:') && f.path !== 'plan:context');
+ const contextFilesMeta = realFiles.length > 0
+ ? realFiles.map((f) => ({ path: f.path, name: f.name }))
+ : undefined;
+
// Use longer timeout when sending attachments (images can be large)
const hasAttachments = attachments && attachments.length > 0;
const timeoutMs = hasAttachments ? 30000 : 10000;
@@ -82,11 +125,12 @@ export function useMessageHandler(
...(planMode && { plan_mode: true }),
...(hasReviewComments && { has_review_comments: true }),
...(hasAttachments && { attachments }),
+ ...(contextFilesMeta && { context_files: contextFilesMeta }),
},
timeoutMs
);
},
- [resolvedSessionId, taskId, activeModel, sessionModel, planMode, isAgentBusy, queue, activeDocument, documentComments]
+ [resolvedSessionId, taskId, activeModel, sessionModel, planMode, isAgentBusy, queue, activeDocument, documentComments, contextFiles, prompts]
);
return { handleSendMessage };
diff --git a/apps/web/hooks/use-resizable-input.ts b/apps/web/hooks/use-resizable-input.ts
index 5c285dd1b8..76dfcb12cc 100644
--- a/apps/web/hooks/use-resizable-input.ts
+++ b/apps/web/hooks/use-resizable-input.ts
@@ -1,30 +1,49 @@
'use client';
import { useCallback, useEffect, useRef, useState } from 'react';
+import { getChatInputHeight, setChatInputHeight } from '@/lib/local-storage';
const MIN_HEIGHT = 100;
const DEFAULT_HEIGHT = 134;
-const MAX_ABSOLUTE = 800;
+const MAX_ABSOLUTE = 450;
-export function useResizableInput() {
- const [height, setHeight] = useState(DEFAULT_HEIGHT);
+export function useResizableInput(sessionId: string | undefined) {
+ const [height, setHeight] = useState(() => {
+ const maxHeight = typeof window !== 'undefined'
+ ? Math.min(window.innerHeight * 0.6, MAX_ABSOLUTE)
+ : MAX_ABSOLUTE;
+ if (sessionId) {
+ const saved = getChatInputHeight(sessionId);
+ return saved ? Math.min(saved, maxHeight) : DEFAULT_HEIGHT;
+ }
+ return DEFAULT_HEIGHT;
+ });
const containerRef = useRef(null);
const isDragging = useRef(false);
const startY = useRef(0);
const startHeight = useRef(0);
-
- const getMaxHeight = useCallback(() => {
- // Walk up to find the nearest panel-level ancestor (the full-height flex container)
- let el = containerRef.current?.parentElement;
- while (el) {
- if (el.clientHeight > MAX_ABSOLUTE * 0.5) {
- return Math.min(el.clientHeight * 0.8, MAX_ABSOLUTE);
- }
- el = el.parentElement;
+ // Restore height when session changes
+ const prevSessionRef = useRef(sessionId);
+ useEffect(() => {
+ if (sessionId === prevSessionRef.current) return;
+ prevSessionRef.current = sessionId;
+ /* eslint-disable react-hooks/set-state-in-effect -- syncing from localStorage on session switch */
+ if (sessionId) {
+ const maxHeight = Math.min(window.innerHeight * 0.6, MAX_ABSOLUTE);
+ const saved = getChatInputHeight(sessionId);
+ setHeight(saved ? Math.min(saved, maxHeight) : DEFAULT_HEIGHT);
+ } else {
+ setHeight(DEFAULT_HEIGHT);
}
- // Fallback: use viewport height
- return Math.min(window.innerHeight * 0.7, MAX_ABSOLUTE);
- }, []);
+ /* eslint-enable react-hooks/set-state-in-effect */
+ }, [sessionId]);
+
+ // Persist height after drag ends
+ const persistHeight = useCallback((h: number) => {
+ if (sessionId) {
+ setChatInputHeight(sessionId, h);
+ }
+ }, [sessionId]);
const handleMouseDown = useCallback(
(e: React.MouseEvent) => {
@@ -38,16 +57,21 @@ export function useResizableInput() {
[height]
);
- const handleDoubleClick = useCallback(() => {
+ const resetHeight = useCallback(() => {
setHeight(DEFAULT_HEIGHT);
- }, []);
+ persistHeight(DEFAULT_HEIGHT);
+ }, [persistHeight]);
+
+ const handleDoubleClick = useCallback(() => {
+ resetHeight();
+ }, [resetHeight]);
useEffect(() => {
const handleMouseMove = (e: MouseEvent) => {
if (!isDragging.current) return;
// Dragging UP (clientY decreases) increases height
const delta = startY.current - e.clientY;
- const maxHeight = getMaxHeight();
+ const maxHeight = Math.min(window.innerHeight * 0.6, MAX_ABSOLUTE);
const newHeight = Math.min(Math.max(startHeight.current + delta, MIN_HEIGHT), maxHeight);
setHeight(newHeight);
};
@@ -57,6 +81,11 @@ export function useResizableInput() {
isDragging.current = false;
document.body.style.cursor = '';
document.body.style.userSelect = '';
+ // Persist the final height after drag
+ setHeight((h) => {
+ persistHeight(h);
+ return h;
+ });
};
document.addEventListener('mousemove', handleMouseMove);
@@ -65,10 +94,11 @@ export function useResizableInput() {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
- }, [getMaxHeight]);
+ }, [persistHeight]);
return {
height,
+ resetHeight,
containerRef,
resizeHandleProps: {
onMouseDown: handleMouseDown,
diff --git a/apps/web/lib/local-storage.ts b/apps/web/lib/local-storage.ts
index ef02f9c549..e72d18516b 100644
--- a/apps/web/lib/local-storage.ts
+++ b/apps/web/lib/local-storage.ts
@@ -42,6 +42,15 @@ export function setLocalStorage(key: string, value: T): voi
}
}
+export function removeSessionStorage(key: string): void {
+ if (typeof window === 'undefined') return;
+ try {
+ window.sessionStorage.removeItem(key);
+ } catch {
+ // Ignore removal failures.
+ }
+}
+
export function removeLocalStorage(key: string): void {
if (typeof window === 'undefined') return;
try {
@@ -419,3 +428,103 @@ export function setActiveTabForSession(sessionId: string, tabId: string): void {
// Ignore write failures
}
}
+
+// --- Chat draft persistence (sessionStorage, per task) ---
+
+const CHAT_DRAFT_TEXT_KEY = 'kandev.chatDraft.text';
+const CHAT_DRAFT_CONTENT_KEY = 'kandev.chatDraft.content';
+const CHAT_DRAFT_ATTACHMENTS_KEY = 'kandev.chatDraft.attachments';
+const CHAT_INPUT_HEIGHT_KEY = 'kandev.chatInput.height';
+
+/** Stored attachment — same as ImageAttachment but without `preview` (reconstructed on load) */
+type StoredImageAttachment = {
+ id: string;
+ data: string;
+ mimeType: string;
+ size: number;
+ width: number;
+ height: number;
+};
+
+export function getChatDraftText(sessionId: string): string {
+ return getSessionStorage(`${CHAT_DRAFT_TEXT_KEY}.${sessionId}`, '');
+}
+
+export function setChatDraftText(sessionId: string, text: string): void {
+ if (text === '') {
+ removeSessionStorage(`${CHAT_DRAFT_TEXT_KEY}.${sessionId}`);
+ } else {
+ setSessionStorage(`${CHAT_DRAFT_TEXT_KEY}.${sessionId}`, text);
+ }
+}
+
+/** TipTap editor JSON — preserves rich content (mentions, code blocks, etc.) */
+export function getChatDraftContent(sessionId: string): unknown {
+ return getSessionStorage(`${CHAT_DRAFT_CONTENT_KEY}.${sessionId}`, null);
+}
+
+export function setChatDraftContent(sessionId: string, content: unknown): void {
+ if (!content) {
+ removeSessionStorage(`${CHAT_DRAFT_CONTENT_KEY}.${sessionId}`);
+ } else {
+ setSessionStorage(`${CHAT_DRAFT_CONTENT_KEY}.${sessionId}`, content as JsonValue);
+ }
+}
+
+export function getChatDraftAttachments(sessionId: string): StoredImageAttachment[] {
+ return getSessionStorage(`${CHAT_DRAFT_ATTACHMENTS_KEY}.${sessionId}`, []);
+}
+
+export function setChatDraftAttachments(sessionId: string, attachments: Array<{ id: string; data: string; mimeType: string; size: number; width: number; height: number; preview?: string }>): void {
+ if (attachments.length === 0) {
+ removeSessionStorage(`${CHAT_DRAFT_ATTACHMENTS_KEY}.${sessionId}`);
+ } else {
+ // Strip `preview` to halve storage cost — reconstructed on load
+ const stored: StoredImageAttachment[] = attachments.map(({ id, data, mimeType, size, width, height }) => ({
+ id, data, mimeType, size, width, height,
+ }));
+ setSessionStorage(`${CHAT_DRAFT_ATTACHMENTS_KEY}.${sessionId}`, stored);
+ }
+}
+
+/**
+ * Reconstruct the `preview` data URL from stored attachment data.
+ */
+export function restoreAttachmentPreview(att: StoredImageAttachment): StoredImageAttachment & { preview: string } {
+ return { ...att, preview: `data:${att.mimeType};base64,${att.data}` };
+}
+
+export function getChatInputHeight(sessionId: string): number | null {
+ return getSessionStorage(`${CHAT_INPUT_HEIGHT_KEY}.${sessionId}`, null);
+}
+
+export function setChatInputHeight(sessionId: string, height: number): void {
+ setSessionStorage(`${CHAT_INPUT_HEIGHT_KEY}.${sessionId}`, height);
+}
+
+// --- Task storage cleanup ---
+
+/**
+ * Remove all session-scoped storage for a deleted task.
+ * Call from task.deleted handler before the task is removed from state.
+ */
+export function cleanupTaskStorage(taskId: string, sessionIds: string[]): void {
+ // Plan notification (localStorage, keyed per task inside a Record)
+ setPlanLastSeen(taskId, null);
+
+ // Session-keyed storage — clean all sessions belonging to the task
+ for (const sessionId of sessionIds) {
+ removeSessionStorage(`${CHAT_DRAFT_TEXT_KEY}.${sessionId}`);
+ removeSessionStorage(`${CHAT_DRAFT_CONTENT_KEY}.${sessionId}`);
+ removeSessionStorage(`${CHAT_DRAFT_ATTACHMENTS_KEY}.${sessionId}`);
+ removeSessionStorage(`${CHAT_INPUT_HEIGHT_KEY}.${sessionId}`);
+ removeSessionStorage(`${FILES_PANEL_KEYS.TAB}.${sessionId}`);
+ removeSessionStorage(`${FILES_PANEL_KEYS.USER_SELECTED}.${sessionId}`);
+ removeSessionStorage(`${FILES_PANEL_KEYS.EXPANDED}.${sessionId}`);
+ removeSessionStorage(`${FILES_PANEL_KEYS.SCROLL}.${sessionId}`);
+ removeSessionStorage(`${DOCKVIEW_SESSION_LAYOUT_PREFIX}${sessionId}`);
+ removeSessionStorage(`${OPEN_FILES_KEY}.${sessionId}`);
+ removeSessionStorage(`${ACTIVE_TAB_KEY}.${sessionId}`);
+ removeSessionStorage(`kandev.contextFiles.${sessionId}`);
+ }
+}
diff --git a/apps/web/lib/state/context-files-store.ts b/apps/web/lib/state/context-files-store.ts
new file mode 100644
index 0000000000..f97c11ce76
--- /dev/null
+++ b/apps/web/lib/state/context-files-store.ts
@@ -0,0 +1,110 @@
+import { create } from 'zustand';
+import { getSessionStorage, setSessionStorage } from '@/lib/local-storage';
+
+export type ContextFile = { path: string; name: string; pinned?: boolean };
+
+type ContextFilesStore = {
+ filesBySessionId: Record;
+ addFile: (sessionId: string, file: ContextFile) => void;
+ removeFile: (sessionId: string, path: string) => void;
+ toggleFile: (sessionId: string, file: ContextFile) => void;
+ /** Set pinned=false on an existing file. */
+ unpinFile: (sessionId: string, path: string) => void;
+ /** Remove all files where pinned is not true. */
+ clearEphemeral: (sessionId: string) => void;
+ /** Remove all files for a session (for cleanup). */
+ clearSession: (sessionId: string) => void;
+ /** Load persisted files from sessionStorage into the store. Safe to call multiple times. */
+ hydrateSession: (sessionId: string) => void;
+};
+
+const STORAGE_PREFIX = 'kandev.contextFiles.';
+
+function persistFiles(sessionId: string, files: ContextFile[]) {
+ setSessionStorage(`${STORAGE_PREFIX}${sessionId}`, files.map(f => ({ path: f.path, name: f.name, pinned: f.pinned ?? false })));
+}
+
+function hydrateFiles(sessionId: string): ContextFile[] {
+ return getSessionStorage(`${STORAGE_PREFIX}${sessionId}`, []);
+}
+
+export const useContextFilesStore = create((set, get) => ({
+ filesBySessionId: {},
+
+ addFile: (sessionId, file) => {
+ set((state) => {
+ const existing = state.filesBySessionId[sessionId] ?? [];
+ const idx = existing.findIndex((f) => f.path === file.path);
+ if (idx >= 0) {
+ // Already exists — upgrade to pinned if requested, never downgrade
+ const current = existing[idx];
+ if (file.pinned && !current.pinned) {
+ const updated = [...existing];
+ updated[idx] = { ...current, pinned: true };
+ persistFiles(sessionId, updated);
+ return { filesBySessionId: { ...state.filesBySessionId, [sessionId]: updated } };
+ }
+ return state;
+ }
+ const updated = [...existing, file];
+ persistFiles(sessionId, updated);
+ return { filesBySessionId: { ...state.filesBySessionId, [sessionId]: updated } };
+ });
+ },
+
+ removeFile: (sessionId, path) => {
+ set((state) => {
+ const existing = state.filesBySessionId[sessionId] ?? [];
+ const updated = existing.filter((f) => f.path !== path);
+ persistFiles(sessionId, updated);
+ return { filesBySessionId: { ...state.filesBySessionId, [sessionId]: updated } };
+ });
+ },
+
+ toggleFile: (sessionId, file) => {
+ const existing = get().filesBySessionId[sessionId] ?? [];
+ if (existing.some((f) => f.path === file.path)) {
+ get().removeFile(sessionId, file.path);
+ } else {
+ get().addFile(sessionId, file);
+ }
+ },
+
+ unpinFile: (sessionId, path) => {
+ set((state) => {
+ const existing = state.filesBySessionId[sessionId] ?? [];
+ const idx = existing.findIndex((f) => f.path === path);
+ if (idx < 0) return state;
+ const updated = [...existing];
+ updated[idx] = { ...updated[idx], pinned: false };
+ persistFiles(sessionId, updated);
+ return { filesBySessionId: { ...state.filesBySessionId, [sessionId]: updated } };
+ });
+ },
+
+ clearEphemeral: (sessionId) => {
+ set((state) => {
+ const existing = state.filesBySessionId[sessionId] ?? [];
+ const updated = existing.filter((f) => f.pinned === true);
+ persistFiles(sessionId, updated);
+ return { filesBySessionId: { ...state.filesBySessionId, [sessionId]: updated } };
+ });
+ },
+
+ clearSession: (sessionId) => {
+ set((state) => {
+ const { [sessionId]: _removed, ...rest } = state.filesBySessionId;
+ void _removed;
+ return { filesBySessionId: rest };
+ });
+ },
+
+ hydrateSession: (sessionId) => {
+ // Skip if already hydrated
+ if (get().filesBySessionId[sessionId]) return;
+ const hydrated = hydrateFiles(sessionId);
+ if (hydrated.length > 0) {
+ set((s) => ({ filesBySessionId: { ...s.filesBySessionId, [sessionId]: hydrated } }));
+ }
+ },
+}));
diff --git a/apps/web/lib/state/dockview-store.ts b/apps/web/lib/state/dockview-store.ts
index 220be1c310..d80f0cae88 100644
--- a/apps/web/lib/state/dockview-store.ts
+++ b/apps/web/lib/state/dockview-store.ts
@@ -150,7 +150,6 @@ export function applyLayoutFixups(api: DockviewApi): {
const oldFiles = api.getPanel('all-files');
if (oldFiles) oldFiles.api.setTitle('Files');
- // Compute group IDs from restored panels (check both old and new IDs)
const chatPanel = api.getPanel('chat');
const changesPanel = api.getPanel('changes') ?? oldChanges;
const terminalPanel = api.panels.find(
@@ -408,14 +407,25 @@ export const useDockviewStore = create((set, get) => ({
},
addPlanPanel: (groupId) => {
- const { api, centerGroupId } = get();
+ const { api } = get();
if (!api) return;
- focusOrAddPanel(api, {
- id: 'plan',
- component: 'plan',
- title: 'Plan',
- position: { referenceGroup: groupId ?? centerGroupId },
- });
+ if (groupId) {
+ // Header "+" menu: add as tab in the specified group
+ focusOrAddPanel(api, {
+ id: 'plan',
+ component: 'plan',
+ title: 'Plan',
+ position: { referenceGroup: groupId },
+ });
+ } else {
+ // Toolbar toggle: split right from the chat panel
+ focusOrAddPanel(api, {
+ id: 'plan',
+ component: 'plan',
+ title: 'Plan',
+ position: { referencePanel: 'chat', direction: 'right' },
+ });
+ }
},
addTerminalPanel: (terminalId, groupId) => {
diff --git a/apps/web/lib/types/context.ts b/apps/web/lib/types/context.ts
new file mode 100644
index 0000000000..c710e63f67
--- /dev/null
+++ b/apps/web/lib/types/context.ts
@@ -0,0 +1,58 @@
+import type { DiffComment } from '@/lib/diff/types';
+import type { DocumentComment } from '@/lib/state/slices/ui/types';
+import type { ImageAttachment } from '@/components/task/chat/image-attachment-preview';
+
+type ContextItemBase = {
+ id: string;
+ label: string;
+ pinned?: boolean;
+ onRemove?: () => void;
+ onUnpin?: () => void;
+};
+
+export type PlanContextItem = ContextItemBase & {
+ kind: 'plan';
+ taskId?: string;
+ onOpen: () => void;
+};
+
+export type FileContextItem = ContextItemBase & {
+ kind: 'file';
+ path: string;
+ onOpen: (path: string) => void;
+};
+
+export type PromptContextItem = ContextItemBase & {
+ kind: 'prompt';
+ promptContent?: string;
+ onClick: () => void;
+};
+
+export type CommentContextItem = ContextItemBase & {
+ kind: 'comment';
+ filePath: string;
+ comments: DiffComment[];
+ onRemoveComment: (id: string) => void;
+ onOpen?: () => void;
+};
+
+export type PlanCommentContextItem = ContextItemBase & {
+ kind: 'plan-comment';
+ comments: DocumentComment[];
+ onOpen: () => void;
+};
+
+export type ImageContextItem = ContextItemBase & {
+ kind: 'image';
+ attachment: ImageAttachment;
+};
+
+export type ContextItem =
+ | PlanContextItem
+ | FileContextItem
+ | PromptContextItem
+ | CommentContextItem
+ | PlanCommentContextItem
+ | ImageContextItem;
+
+export type ContextItemKind = ContextItem['kind'];
diff --git a/apps/web/lib/utils/file-path.ts b/apps/web/lib/utils/file-path.ts
new file mode 100644
index 0000000000..e3fbb25739
--- /dev/null
+++ b/apps/web/lib/utils/file-path.ts
@@ -0,0 +1,11 @@
+/** Check if a path looks like a directory (ends with / or has no extension). */
+export function isDirectory(filePath: string): boolean {
+ if (filePath.endsWith('/')) return true;
+ const name = filePath.split('/').pop() || '';
+ return !name.includes('.');
+}
+
+/** Extract filename from a path. */
+export function getFileName(filePath: string): string {
+ return filePath.split('/').pop() || filePath;
+}
diff --git a/apps/web/lib/ws/handlers/tasks.ts b/apps/web/lib/ws/handlers/tasks.ts
index 8d7b367e71..f1af23ce14 100644
--- a/apps/web/lib/ws/handlers/tasks.ts
+++ b/apps/web/lib/ws/handlers/tasks.ts
@@ -2,6 +2,8 @@ import type { StoreApi } from 'zustand';
import type { AppState } from '@/lib/state/store';
import type { WsHandlers } from '@/lib/ws/handlers/types';
import type { KanbanState } from '@/lib/state/slices/kanban/types';
+import { cleanupTaskStorage } from '@/lib/local-storage';
+import { useContextFilesStore } from '@/lib/state/context-files-store';
type KanbanTask = KanbanState['tasks'][number];
@@ -65,14 +67,28 @@ export function registerTasksHandlers(store: StoreApi): WsHandlers {
});
},
'task.deleted': (message) => {
+ const deletedId = message.payload.task_id;
+
+ // Clean up persisted storage before removing from state
+ const currentState = store.getState();
+ const sessionIds = (currentState.taskSessionsByTask.itemsByTaskId[deletedId] ?? []).map((s) => s.id);
+ // Also include primarySessionId in case sessions weren't loaded into the store
+ const task = currentState.kanban.tasks.find((t) => t.id === deletedId);
+ if (task?.primarySessionId && !sessionIds.includes(task.primarySessionId)) {
+ sessionIds.push(task.primarySessionId);
+ }
+ cleanupTaskStorage(deletedId, sessionIds);
+ for (const sid of sessionIds) {
+ useContextFilesStore.getState().clearSession(sid);
+ }
+
store.setState((state) => {
- const deletedId = message.payload.task_id;
const isActive = state.tasks.activeTaskId === deletedId;
return {
...state,
kanban: {
...state.kanban,
- tasks: state.kanban.tasks.filter((task) => task.id !== deletedId),
+ tasks: state.kanban.tasks.filter((t) => t.id !== deletedId),
},
tasks: isActive
? { ...state.tasks, activeTaskId: null, activeSessionId: null }
diff --git a/apps/web/package.json b/apps/web/package.json
index f1969584d0..e207dbc701 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -46,6 +46,19 @@
"@tabler/icons-react": "^3.36.1",
"@tanstack/react-table": "^8.21.3",
"@tanstack/react-virtual": "^3.13.18",
+ "@tiptap/core": "^3.19.0",
+ "@tiptap/extension-code": "^3.19.0",
+ "@tiptap/extension-code-block-lowlight": "^3.19.0",
+ "@tiptap/extension-document": "^3.19.0",
+ "@tiptap/extension-hard-break": "^3.19.0",
+ "@tiptap/extension-history": "^3.19.0",
+ "@tiptap/extension-mention": "^3.19.0",
+ "@tiptap/extension-paragraph": "^3.19.0",
+ "@tiptap/extension-placeholder": "^3.19.0",
+ "@tiptap/extension-text": "^3.19.0",
+ "@tiptap/pm": "^3.19.0",
+ "@tiptap/react": "^3.19.0",
+ "@tiptap/suggestion": "^3.19.0",
"@uiw/codemirror-theme-github": "^4.25.4",
"@uiw/codemirror-theme-vscode": "^4.25.4",
"@uiw/react-codemirror": "^4.25.4",
@@ -63,6 +76,7 @@
"embla-carousel-react": "^8.6.0",
"immer": "^10.1.1",
"input-otp": "^1.4.2",
+ "lowlight": "^3.3.0",
"mermaid": "^11.12.2",
"next": "16.1.1",
"next-themes": "^0.4.6",
{hasPlanMode && (
)}
diff --git a/apps/web/components/task/chat/popup-menu.tsx b/apps/web/components/task/chat/popup-menu.tsx
index ab3e38a87b..fbf9c8ec79 100644
--- a/apps/web/components/task/chat/popup-menu.tsx
+++ b/apps/web/components/task/chat/popup-menu.tsx
@@ -10,6 +10,8 @@ const MENU_MAX_WIDTH = 700;
export type PopupMenuProps = {
isOpen: boolean;
position: { x: number; y: number } | null;
+ /** Alternative to position: a function returning a DOMRect (from TipTap suggestion) */
+ clientRect?: (() => DOMRect | null) | null;
title: string;
selectedIndex: number;
onClose: () => void;
@@ -21,6 +23,7 @@ export type PopupMenuProps = {
export function PopupMenu({
isOpen,
position,
+ clientRect: clientRectFn,
title,
onClose,
children,
@@ -43,16 +46,26 @@ export function PopupMenu({
return () => document.removeEventListener('mousedown', handleClickOutside);
}, [isOpen, onClose]);
- if (!isOpen || !position) {
+ // Resolve position from clientRect function or direct position
+ const resolvedPosition = (() => {
+ if (position) return position;
+ if (clientRectFn) {
+ const rect = clientRectFn();
+ if (rect) return { x: rect.left, y: rect.top };
+ }
+ return null;
+ })();
+
+ if (!isOpen || !resolvedPosition) {
return null;
}
// Calculate position (above cursor) with content-based width
const menuStyle: React.CSSProperties = {
position: 'fixed',
- left: Math.max(8, position.x),
- bottom: window.innerHeight - position.y + 8,
- maxWidth: Math.min(MENU_MAX_WIDTH, window.innerWidth - position.x - 8),
+ left: Math.max(8, resolvedPosition.x),
+ bottom: window.innerHeight - resolvedPosition.y + 8,
+ maxWidth: Math.min(MENU_MAX_WIDTH, window.innerWidth - resolvedPosition.x - 8),
maxHeight: MENU_HEIGHT,
zIndex: 50,
};
diff --git a/apps/web/components/task/chat/slash-command-menu.tsx b/apps/web/components/task/chat/slash-command-menu.tsx
index 8d4292fa20..2195cdafc2 100644
--- a/apps/web/components/task/chat/slash-command-menu.tsx
+++ b/apps/web/components/task/chat/slash-command-menu.tsx
@@ -6,7 +6,8 @@ import { PopupMenu, PopupMenuItem, useMenuItemRefs } from './popup-menu';
type SlashCommandMenuProps = {
isOpen: boolean;
- position: { x: number; y: number } | null;
+ position?: { x: number; y: number } | null;
+ clientRect?: (() => DOMRect | null) | null;
commands: SlashCommand[];
selectedIndex: number;
onSelect: (command: SlashCommand) => void;
@@ -17,6 +18,7 @@ type SlashCommandMenuProps = {
export function SlashCommandMenu({
isOpen,
position,
+ clientRect,
commands,
selectedIndex,
onSelect,
@@ -32,7 +34,8 @@ export function SlashCommandMenu({
return (
+
+ {/* @ts-expect-error -- NodeViewContent 'as' prop accepts any HTML tag but types only allow 'div' */}
+ (
+ function TipTapInput(
+ {
+ value,
+ onChange,
+ onSubmit,
+ placeholder = '',
+ disabled = false,
+ className,
+ planModeEnabled = false,
+ submitKey = 'cmd_enter',
+ onFocus,
+ onBlur,
+ sessionId,
+ taskId,
+ onAgentCommand,
+ onImagePaste,
+ },
+ ref,
+ ) {
+ // ── Refs for stable callbacks ─────────────────────────────────
+
+ const onSubmitRef = useRef(onSubmit);
+ onSubmitRef.current = onSubmit;
+ const submitKeyRef = useRef(submitKey);
+ submitKeyRef.current = submitKey;
+ const disabledRef = useRef(disabled);
+ disabledRef.current = disabled;
+ const onChangeRef = useRef(onChange);
+ onChangeRef.current = onChange;
+ const onImagePasteRef = useRef(onImagePaste);
+ onImagePasteRef.current = onImagePaste;
+ const sessionIdRef = useRef(sessionId);
+ sessionIdRef.current = sessionId;
+
+ // ── Menu state ────────────────────────────────────────────────
+
+ const [mentionMenu, setMentionMenu] = useState>({
+ isOpen: false, items: [], query: '', clientRect: null, command: null,
+ });
+ const [slashMenu, setSlashMenu] = useState>({
+ isOpen: false, items: [], query: '', clientRect: null, command: null,
+ });
+ const [mentionSelectedIndex, setMentionSelectedIndex] = useState(0);
+ const [slashSelectedIndex, setSlashSelectedIndex] = useState(0);
+
+ // Reset selected index when items change
+ useEffect(() => { setMentionSelectedIndex(0); }, [mentionMenu.items]);
+ useEffect(() => { setSlashSelectedIndex(0); }, [slashMenu.items]);
+
+ // ── Keyboard handler refs (set by suggestion lifecycle) ───────
+
+ const mentionKeyDownRef = useRef<((event: KeyboardEvent) => boolean) | null>(null);
+ const slashKeyDownRef = useRef<((event: KeyboardEvent) => boolean) | null>(null);
+
+ const mentionSelectedIndexRef = useRef(mentionSelectedIndex);
+ mentionSelectedIndexRef.current = mentionSelectedIndex;
+
+ const slashSelectedIndexRef = useRef(slashSelectedIndex);
+ slashSelectedIndexRef.current = slashSelectedIndex;
+
+ // Wire up keyboard navigation for menus
+ mentionKeyDownRef.current = useCallback((event: KeyboardEvent) => {
+ if (!mentionMenu.isOpen) return false;
+ if (event.key === 'ArrowDown') {
+ setMentionSelectedIndex((i) => Math.min(i + 1, mentionMenu.items.length - 1));
+ return true;
+ }
+ if (event.key === 'ArrowUp') {
+ setMentionSelectedIndex((i) => Math.max(i - 1, 0));
+ return true;
+ }
+ if (event.key === 'Enter' || event.key === 'Tab') {
+ if (mentionMenu.items.length > 0 && mentionMenu.command) {
+ const idx = mentionSelectedIndexRef.current;
+ const item = mentionMenu.items[idx];
+ if (item) mentionMenu.command(item);
+ return true;
+ }
+ }
+ return false;
+ }, [mentionMenu]);
+
+ slashKeyDownRef.current = useCallback((event: KeyboardEvent) => {
+ if (!slashMenu.isOpen) return false;
+ if (event.key === 'ArrowDown') {
+ setSlashSelectedIndex((i) => Math.min(i + 1, slashMenu.items.length - 1));
+ return true;
+ }
+ if (event.key === 'ArrowUp') {
+ setSlashSelectedIndex((i) => Math.max(i - 1, 0));
+ return true;
+ }
+ if (event.key === 'Enter' || event.key === 'Tab') {
+ if (slashMenu.items.length > 0 && slashMenu.command) {
+ const idx = slashSelectedIndexRef.current;
+ const cmd = slashMenu.items[idx];
+ if (cmd) slashMenu.command(cmd);
+ return true;
+ }
+ }
+ return false;
+ }, [slashMenu]);
+
+ // ── Data sources ──────────────────────────────────────────────
+
+ const { prompts } = useCustomPrompts();
+
+ const agentCommands = useAppStore((state) =>
+ sessionId ? state.availableCommands.bySessionId[sessionId] : undefined
+ );
+
+ const slashCommands = useMemo((): SlashCommand[] => {
+ if (!agentCommands || agentCommands.length === 0) return [];
+ return agentCommands
+ .filter((cmd) => {
+ const desc = cmd.description || '';
+ return !desc.includes('(bundled)');
+ })
+ .map((cmd) => ({
+ id: `agent-${cmd.name}`,
+ label: `/${cmd.name}`,
+ description: cmd.description || `Run /${cmd.name} command`,
+ action: 'agent' as const,
+ agentCommandName: cmd.name,
+ }));
+ }, [agentCommands]);
+
+ // ── Mention item search ───────────────────────────────────────
+
+ const promptsRef = useRef(prompts);
+ promptsRef.current = prompts;
+ const lastFileSearchRef = useRef<{ query: string; results: string[] }>({ query: '', results: [] });
+
+ const getMentionItems = useCallback(async (query: string): Promise => {
+ const allItems: MentionItem[] = [];
+
+ // Plan item
+ const planItem: MentionItem = {
+ id: '__plan__',
+ kind: 'plan',
+ label: 'Plan',
+ description: 'Include the plan as context',
+ onSelect: () => {}, // unused in TipTap flow
+ };
+ allItems.push(planItem);
+
+ // Prompt items
+ for (const p of promptsRef.current) {
+ allItems.push({
+ id: p.id,
+ kind: 'prompt',
+ label: p.name,
+ description: p.content.length > 100 ? p.content.slice(0, 100) + '...' : p.content,
+ onSelect: () => {},
+ });
+ }
+
+ // File search
+ const sid = sessionIdRef.current;
+ if (sid) {
+ try {
+ const client = getWebSocketClient();
+ if (client) {
+ const cacheKey = query || '__empty__';
+ let files: string[];
+ if (lastFileSearchRef.current.query === cacheKey) {
+ files = lastFileSearchRef.current.results;
+ } else {
+ const response = await searchWorkspaceFiles(client, sid, query || '', 20);
+ files = response.files || [];
+ lastFileSearchRef.current = { query: cacheKey, results: files };
+ }
+ for (const filePath of files) {
+ allItems.push({
+ id: filePath,
+ kind: 'file',
+ label: filePath,
+ description: 'File',
+ onSelect: () => {},
+ });
+ }
+ }
+ } catch {
+ // ignore
+ }
+ }
+
+ return filterItems(allItems, query);
+ }, []);
+
+ // ── Suggestion configs ────────────────────────────────────────
+
+ const mentionCallbacks = useMemo((): MentionSuggestionCallbacks => ({
+ getItems: getMentionItems,
+ }), [getMentionItems]);
+
+ const onAgentCommandRef = useRef(onAgentCommand);
+ onAgentCommandRef.current = onAgentCommand;
+ const slashCommandsRef = useRef(slashCommands);
+ slashCommandsRef.current = slashCommands;
+
+ const slashCallbacks = useMemo((): SlashSuggestionCallbacks => ({
+ getCommands: () => slashCommandsRef.current,
+ onAgentCommand: (name) => onAgentCommandRef.current?.(name),
+ }), []);
+
+ const mentionSuggestion = useMemo(
+ () => createMentionSuggestion(mentionCallbacks, setMentionMenu, mentionKeyDownRef),
+ [mentionCallbacks],
+ );
+
+ const slashSuggestion = useMemo(
+ () => createSlashSuggestion(slashCallbacks, setSlashMenu, slashKeyDownRef),
+ [slashCallbacks],
+ );
+
+ // ── Submit keymap extension ───────────────────────────────────
+
+ const SubmitKeymap = useMemo(() => {
+ return Extension.create({
+ name: 'submitKeymap',
+ addKeyboardShortcuts() {
+ return {
+ 'Enter': () => {
+ if (disabledRef.current) return true;
+ if (submitKeyRef.current === 'enter') {
+ onSubmitRef.current?.();
+ return true;
+ }
+ return false;
+ },
+ 'Mod-Enter': () => {
+ if (disabledRef.current) return true;
+ if (submitKeyRef.current === 'cmd_enter') {
+ onSubmitRef.current?.();
+ return true;
+ }
+ return false;
+ },
+ };
+ },
+ });
+ }, []);
+
+ // ── Editor ────────────────────────────────────────────────────
+
+ const editor = useEditor({
+ extensions: [
+ Document,
+ Paragraph,
+ Text,
+ HardBreak,
+ History,
+ Code,
+ CodeBlockLowlight.extend({
+ addNodeView() {
+ return ReactNodeViewRenderer(CodeBlockView);
+ },
+ }).configure({ lowlight: lowlightInstance }),
+ Placeholder.configure({ placeholder }),
+ ContextMention.configure({
+ suggestions: [mentionSuggestion, slashSuggestion],
+ }),
+ SubmitKeymap,
+ ],
+ editorProps: {
+ attributes: {
+ class: cn(
+ 'w-full h-full resize-none bg-transparent px-2 py-2 overflow-y-auto',
+ 'text-sm leading-relaxed',
+ 'placeholder:text-muted-foreground',
+ 'focus:outline-none',
+ 'disabled:cursor-not-allowed disabled:opacity-50',
+ planModeEnabled && 'border-primary/40',
+ className,
+ ),
+ },
+ handlePaste: (view, event) => {
+ // 1. Image paste
+ const items = event.clipboardData?.items;
+ if (items) {
+ const imageFiles: File[] = [];
+ for (const item of items) {
+ if (item.type.startsWith('image/')) {
+ const file = item.getAsFile();
+ if (file) imageFiles.push(file);
+ }
+ }
+ if (imageFiles.length > 0) {
+ event.preventDefault();
+ onImagePasteRef.current?.(imageFiles);
+ return true;
+ }
+ }
+
+ // 2. Markdown code fence paste
+ const text = event.clipboardData?.getData('text/plain');
+ if (text && text.includes('```')) {
+ const segments = parseCodeFences(text);
+ if (segments.some((s) => s.type === 'code')) {
+ event.preventDefault();
+ const { schema } = view.state;
+ const nodes: import('@tiptap/pm/model').Node[] = [];
+ for (const seg of segments) {
+ if (seg.type === 'code') {
+ nodes.push(
+ schema.nodes.codeBlock.create(
+ seg.language ? { language: seg.language } : null,
+ seg.text ? schema.text(seg.text) : undefined,
+ ),
+ );
+ } else {
+ const trimmed = seg.text.trim();
+ if (!trimmed) continue;
+ for (const line of trimmed.split('\n')) {
+ nodes.push(
+ schema.nodes.paragraph.create(
+ null,
+ line ? schema.text(line) : undefined,
+ ),
+ );
+ }
+ }
+ }
+ if (nodes.length > 0) {
+ const { from, to } = view.state.selection;
+ view.dispatch(view.state.tr.replaceWith(from, to, nodes));
+ }
+ return true;
+ }
+ }
+
+ return false;
+ },
+ handleDOMEvents: {
+ focus: () => {
+ onFocus?.();
+ return false;
+ },
+ blur: () => {
+ onBlur?.();
+ return false;
+ },
+ },
+ },
+ onUpdate: ({ editor: e }) => {
+ if (isSyncingRef.current) return;
+ if (!initialSyncDoneRef.current) return;
+ const text = getMarkdownText(e);
+ onChangeRef.current(text);
+ // Persist rich content (mentions, code blocks, etc.)
+ const sid = sessionIdRef.current;
+ if (sid) setChatDraftContent(sid, e.getJSON());
+ },
+ editable: !disabled,
+ immediatelyRender: false,
+ });
+
+ // Guard to prevent circular updates when syncing external value → editor
+ const isSyncingRef = useRef(false);
+ // Tracks whether the first value→editor sync has completed.
+ // Until it has, onUpdate callbacks are suppressed so the editor's
+ // init-time empty update doesn't wipe the hydrated draft.
+ const initialSyncDoneRef = useRef(false);
+
+ // Sync disabled state
+ useEffect(() => {
+ if (editor) {
+ editor.setEditable(!disabled);
+ }
+ }, [editor, disabled]);
+
+ // Sync placeholder — the Placeholder extension reads its config once,
+ // so we update it when the prop changes.
+ useEffect(() => {
+ if (!editor) return;
+ editor.extensionManager.extensions.forEach((ext) => {
+ if (ext.name === 'placeholder') {
+ ext.options.placeholder = placeholder;
+ editor.view.dispatch(editor.state.tr);
+ }
+ });
+ }, [editor, placeholder]);
+
+ // Reset sync flag when session changes so the new session's content is restored
+ const prevSyncSessionRef = useRef(sessionId);
+ useEffect(() => {
+ if (sessionId === prevSyncSessionRef.current) return;
+ prevSyncSessionRef.current = sessionId;
+ initialSyncDoneRef.current = false;
+ }, [sessionId]);
+
+ // Sync value prop changes (for history navigation, clearing after send)
+ // On initial sync, prefer stored JSON (preserves mentions, code blocks) over plain text.
+ useEffect(() => {
+ /* eslint-disable react-hooks/immutability -- initialSyncDoneRef is intentionally read+written as a one-shot gate */
+ if (!editor) return;
+
+ if (!initialSyncDoneRef.current) {
+ // Try to restore rich content from sessionStorage
+ const sid = sessionId;
+ if (sid) {
+ const savedContent = getChatDraftContent(sid);
+ if (savedContent) {
+ isSyncingRef.current = true;
+ editor.commands.setContent(savedContent as import('@tiptap/core').Content);
+ isSyncingRef.current = false;
+ initialSyncDoneRef.current = true;
+ // Sync the plain text value back to parent
+ onChangeRef.current(getMarkdownText(editor));
+ return;
+ }
+ }
+ }
+
+ // When value is empty, always clear — plain-text comparison may miss
+ // rich nodes (mentions, code blocks) that have no text representation.
+ if (value === '') {
+ if (!editor.isEmpty) {
+ isSyncingRef.current = true;
+ editor.commands.clearContent();
+ isSyncingRef.current = false;
+ }
+ initialSyncDoneRef.current = true;
+ return;
+ }
+
+ const currentText = getMarkdownText(editor);
+ if (currentText === value) {
+ initialSyncDoneRef.current = true;
+ return;
+ }
+
+ isSyncingRef.current = true;
+ editor.commands.setContent(`
+
+
+ );
+ },
+);
+
+// ── Helpers ─────────────────────────────────────────────────────────
+
+/**
+ * Serialize TipTap editor content to markdown-like text.
+ * Preserves inline `code`, ```code blocks```, and @mention labels.
+ */
+function getMarkdownText(editor: { getJSON: () => { content?: JSONNode[] } }): string {
+ const doc = editor.getJSON();
+ if (!doc.content) return '';
+ return doc.content.map(serializeNode).join('\n');
+}
+
+type JSONNode = {
+ type?: string;
+ text?: string;
+ attrs?: Record;
+ marks?: Array<{ type: string }>;
+ content?: JSONNode[];
+};
+
+function serializeNode(node: JSONNode): string {
+ switch (node.type) {
+ case 'paragraph':
+ return serializeInline(node.content ?? []);
+ case 'codeBlock': {
+ const lang = (node.attrs?.language as string) || '';
+ const text = serializeInline(node.content ?? []);
+ return '```' + lang + '\n' + text + '\n```';
+ }
+ case 'hardBreak':
+ return '\n';
+ default:
+ // Unknown block — try to serialize children
+ if (node.content) return node.content.map(serializeNode).join('\n');
+ return node.text ?? '';
+ }
+}
+
+function serializeInline(nodes: JSONNode[]): string {
+ return nodes.map((n) => {
+ if (n.type === 'hardBreak') return '\n';
+ if (n.type === 'contextMention') {
+ return n.attrs?.label ? `@${n.attrs.label}` : '';
+ }
+ const text = n.text ?? '';
+ if (n.marks?.some((m) => m.type === 'code')) {
+ return '`' + text + '`';
+ }
+ return text;
+ }).join('');
+}
+
+function escapeHtml(str: string): string {
+ return str
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+}
+
+type FenceSegment = { type: 'text'; text: string } | { type: 'code'; text: string; language: string | null };
+
+/** Parse text containing markdown ``` fences into text/code segments. */
+function parseCodeFences(text: string): FenceSegment[] {
+ const lines = text.split('\n');
+ const segments: FenceSegment[] = [];
+ let currentType: 'text' | 'code' = 'text';
+ let currentLines: string[] = [];
+ let currentLang: string | null = null;
+
+ for (const line of lines) {
+ if (line.trimStart().startsWith('```')) {
+ if (currentType === 'text') {
+ if (currentLines.length > 0) {
+ segments.push({ type: 'text', text: currentLines.join('\n') });
+ }
+ // Extract language from opening fence (e.g. ```typescript)
+ currentLang = line.trimStart().slice(3).trim() || null;
+ currentLines = [];
+ currentType = 'code';
+ } else {
+ segments.push({ type: 'code', text: currentLines.join('\n'), language: currentLang });
+ currentLines = [];
+ currentLang = null;
+ currentType = 'text';
+ }
+ } else {
+ currentLines.push(line);
+ }
+ }
+
+ if (currentLines.length > 0) {
+ if (currentType === 'code') {
+ segments.push({ type: 'code', text: currentLines.join('\n'), language: currentLang });
+ } else {
+ segments.push({ type: 'text', text: currentLines.join('\n') });
+ }
+ }
+
+ return segments;
+}
diff --git a/apps/web/components/task/chat/tiptap-mention-extension.tsx b/apps/web/components/task/chat/tiptap-mention-extension.tsx
new file mode 100644
index 0000000000..ac978f04e8
--- /dev/null
+++ b/apps/web/components/task/chat/tiptap-mention-extension.tsx
@@ -0,0 +1,168 @@
+'use client';
+
+import { createElement, useCallback, useRef, useState } from 'react';
+import { mergeAttributes, Node } from '@tiptap/core';
+import { ReactNodeViewRenderer, NodeViewWrapper, type ReactNodeViewProps } from '@tiptap/react';
+import { Suggestion, type SuggestionOptions } from '@tiptap/suggestion';
+import { IconFile, IconFolder, IconAt, IconListCheck } from '@tabler/icons-react';
+import { HoverCard, HoverCardTrigger, HoverCardContent } from '@kandev/ui/hover-card';
+import { isDirectory } from '@/lib/utils/file-path';
+import { usePanelActions } from '@/hooks/use-panel-actions';
+import { useEditorContext } from './editor-context';
+import { LazyFilePreview } from './context-items/lazy-file-preview';
+import { LazyPlanPreview } from './context-items/lazy-plan-preview';
+import { PromptPreviewFromStore } from './context-items/prompt-preview';
+
+export type MentionKind = 'file' | 'prompt' | 'plan';
+
+export type ContextMentionOptions = {
+ /** Suggestion configs — one per trigger character (e.g. @ and /) */
+ suggestions: Array>;
+};
+
+/**
+ * Custom mention node extension that renders as an inline chip.
+ * Stores kind/path as attributes so we know what was mentioned.
+ * Accepts multiple suggestion plugins (@ mentions and / commands).
+ */
+export const ContextMention = Node.create({
+ name: 'contextMention',
+ group: 'inline',
+ inline: true,
+ selectable: false,
+ atom: true,
+
+ addOptions() {
+ return {
+ suggestions: [],
+ };
+ },
+
+ addAttributes() {
+ return {
+ id: { default: null },
+ label: { default: null },
+ kind: { default: 'file' as MentionKind },
+ path: { default: null },
+ };
+ },
+
+ parseHTML() {
+ return [{ tag: 'span[data-context-mention]' }];
+ },
+
+ renderHTML({ HTMLAttributes }) {
+ return [
+ 'span',
+ mergeAttributes(
+ { 'data-context-mention': '' },
+ HTMLAttributes,
+ ),
+ HTMLAttributes.label || HTMLAttributes.id || '',
+ ];
+ },
+
+ renderText({ node }) {
+ return `@${node.attrs.label ?? node.attrs.id}`;
+ },
+
+ addNodeView() {
+ return ReactNodeViewRenderer(MentionChipView);
+ },
+
+ addProseMirrorPlugins() {
+ return this.options.suggestions.map((suggestion) =>
+ Suggestion({
+ editor: this.editor,
+ ...suggestion,
+ }),
+ );
+ },
+});
+
+function MentionChipView({ node }: ReactNodeViewProps) {
+ const { id, label, kind, path } = node.attrs as { id: string; label: string; kind: MentionKind; path: string };
+ const { sessionId, taskId } = useEditorContext();
+ const { openFile, addPlan } = usePanelActions();
+ const [hoverOpen, setHoverOpen] = useState(false);
+ const suppressRef = useRef(false);
+
+ const clickable = kind === 'file' || kind === 'plan';
+
+ const handleClick = useCallback(() => {
+ suppressRef.current = true;
+ setHoverOpen(false);
+ setTimeout(() => { suppressRef.current = false; }, 300);
+ if (kind === 'file' && path) {
+ openFile(path);
+ } else if (kind === 'plan') {
+ addPlan();
+ }
+ }, [kind, path, openFile, addPlan]);
+
+ const icon = getMentionIcon(kind, path);
+
+ const preview = useMentionPreview(kind, path, id, sessionId, taskId);
+
+ const chip = (
+
+ {createElement(icon, { className: "h-3 w-3 shrink-0 text-muted-foreground" })}
+ {label}
+
+ );
+
+ if (!preview) {
+ return {chip} ;
+ }
+
+ return (
+
+ {
+ if (next && suppressRef.current) return;
+ setHoverOpen(next);
+ }}
+ openDelay={300}
+ >
+ {chip}
+
+ {preview}
+
+
+
+ );
+}
+
+function useMentionPreview(
+ kind: MentionKind,
+ path: string,
+ id: string,
+ sessionId: string | null,
+ taskId: string | null,
+): React.ReactNode {
+ if (kind === 'file') {
+ return = {
+ isOpen: boolean;
+ items: T[];
+ query: string;
+ clientRect: (() => DOMRect | null) | null;
+ command: ((item: T) => void) | null;
+};
+
+const EMPTY_MENTION_STATE: MenuState = {
+ isOpen: false,
+ items: [],
+ query: '',
+ clientRect: null,
+ command: null,
+};
+
+const EMPTY_SLASH_STATE: MenuState = {
+ isOpen: false,
+ items: [],
+ query: '',
+ clientRect: null,
+ command: null,
+};
+
+// ── Mention suggestion ──────────────────────────────────────────────
+
+export type MentionSuggestionCallbacks = {
+ getItems: (query: string) => Promise;
+};
+
+export const MentionSuggestionPluginKey = new PluginKey('mentionSuggestion');
+
+/**
+ * Creates a mention suggestion config for TipTap.
+ * `setMenuState` drives the React rendering of MentionMenu.
+ * `onKeyDownRef` is a mutable ref that the parent uses to delegate keystrokes.
+ */
+export function createMentionSuggestion(
+ callbacks: MentionSuggestionCallbacks,
+ setMenuState: (state: MenuState) => void,
+ onKeyDownRef: React.MutableRefObject<((event: KeyboardEvent) => boolean) | null>,
+): Partial> {
+ return {
+ char: '@',
+ pluginKey: MentionSuggestionPluginKey,
+ allowSpaces: false,
+
+ items: async ({ query }) => {
+ return callbacks.getItems(query);
+ },
+
+ command: ({ editor, range, props: mentionAttrs }) => {
+ editor
+ .chain()
+ .focus()
+ .insertContentAt(range, [
+ { type: 'contextMention', attrs: mentionAttrs },
+ { type: 'text', text: ' ' },
+ ])
+ .run();
+ },
+
+ render: () => {
+ return {
+ onStart(props: SuggestionProps) {
+ setMenuState({
+ isOpen: true,
+ items: props.items,
+ query: props.query,
+ clientRect: props.clientRect ?? null,
+ command: (item: MentionItem) => {
+ props.command(mentionItemToAttrs(item));
+ },
+ });
+ },
+
+ onUpdate(props: SuggestionProps) {
+ setMenuState({
+ isOpen: true,
+ items: props.items,
+ query: props.query,
+ clientRect: props.clientRect ?? null,
+ command: (item: MentionItem) => {
+ props.command(mentionItemToAttrs(item));
+ },
+ });
+ },
+
+ onKeyDown(kd: SuggestionKeyDownProps) {
+ if (kd.event.key === 'Escape') {
+ setMenuState(EMPTY_MENTION_STATE);
+ return true;
+ }
+ return onKeyDownRef.current?.(kd.event) ?? false;
+ },
+
+ onExit() {
+ setMenuState(EMPTY_MENTION_STATE);
+ },
+ };
+ },
+ };
+}
+
+function mentionItemToAttrs(item: MentionItem): { id: string; label: string; kind: MentionKind; path: string } {
+ const name = item.kind === 'file'
+ ? getFileName(item.label)
+ : item.label;
+
+ return {
+ id: item.id,
+ label: name,
+ kind: item.kind,
+ path: item.kind === 'file' ? item.label : (item.kind === 'prompt' ? `prompt:${item.id}` : 'plan:context'),
+ };
+}
+
+// ── Slash command suggestion ────────────────────────────────────────
+
+export type SlashSuggestionCallbacks = {
+ getCommands: () => SlashCommand[];
+ onAgentCommand: (commandName: string) => void;
+};
+
+export const SlashSuggestionPluginKey = new PluginKey('slashSuggestion');
+
+export function createSlashSuggestion(
+ callbacks: SlashSuggestionCallbacks,
+ setMenuState: (state: MenuState) => void,
+ onKeyDownRef: React.MutableRefObject<((event: KeyboardEvent) => boolean) | null>,
+): Partial> {
+ return {
+ char: '/',
+ pluginKey: SlashSuggestionPluginKey,
+ allowSpaces: false,
+
+ items: ({ query }) => {
+ const allCommands = callbacks.getCommands();
+ if (!query) return allCommands;
+
+ const lq = query.toLowerCase();
+ return allCommands
+ .filter((cmd) => {
+ const name = cmd.agentCommandName?.toLowerCase();
+ return name?.startsWith(lq) || cmd.label.toLowerCase().includes(lq);
+ })
+ .sort((a, b) => {
+ const an = a.agentCommandName?.toLowerCase();
+ const bn = b.agentCommandName?.toLowerCase();
+ const aPre = an?.startsWith(lq) ?? false;
+ const bPre = bn?.startsWith(lq) ?? false;
+ if (aPre && !bPre) return -1;
+ if (!aPre && bPre) return 1;
+ return 0;
+ });
+ },
+
+ command: ({ editor, range, props: cmd }) => {
+ editor.chain().focus().deleteRange(range).run();
+ if (cmd.agentCommandName) {
+ callbacks.onAgentCommand(cmd.agentCommandName);
+ }
+ },
+
+ render: () => {
+ return {
+ onStart(props: SuggestionProps) {
+ if (props.items.length === 0) return;
+ setMenuState({
+ isOpen: true,
+ items: props.items,
+ query: props.query,
+ clientRect: props.clientRect ?? null,
+ command: (cmd: SlashCommand) => props.command(cmd),
+ });
+ },
+
+ onUpdate(props: SuggestionProps) {
+ if (props.items.length === 0) {
+ setMenuState(EMPTY_SLASH_STATE);
+ return;
+ }
+ setMenuState({
+ isOpen: true,
+ items: props.items,
+ query: props.query,
+ clientRect: props.clientRect ?? null,
+ command: (cmd: SlashCommand) => props.command(cmd),
+ });
+ },
+
+ onKeyDown(kd: SuggestionKeyDownProps) {
+ if (kd.event.key === 'Escape') {
+ setMenuState(EMPTY_SLASH_STATE);
+ return true;
+ }
+ return onKeyDownRef.current?.(kd.event) ?? false;
+ },
+
+ onExit() {
+ setMenuState(EMPTY_SLASH_STATE);
+ },
+ };
+ },
+ };
+}
diff --git a/apps/web/components/task/chat/virtualized-message-list.tsx b/apps/web/components/task/chat/virtualized-message-list.tsx
index c5953d3231..1512ee5cf7 100644
--- a/apps/web/components/task/chat/virtualized-message-list.tsx
+++ b/apps/web/components/task/chat/virtualized-message-list.tsx
@@ -40,7 +40,11 @@ export const VirtualizedMessageList = memo(function VirtualizedMessageList({
}: VirtualizedMessageListProps) {
const messagesContainerRef = useRef(null);
const wasAtBottomRef = useRef(true);
+ const savedScrollTopRef = useRef(0);
const previousHeightRef = useRef(0);
+ const previousWidthRef = useRef(0);
+ /** True while the panel is hidden (0 dimensions) to avoid stale scroll updates */
+ const isHiddenRef = useRef(false);
const isInitialLoading = messagesLoading && messages.length === 0;
const isCreatedSession = sessionState === 'CREATED';
@@ -79,11 +83,15 @@ export const VirtualizedMessageList = memo(function VirtualizedMessageList({
const element = messagesContainerRef.current;
if (!element) return;
+ // Ignore scroll events while panel is hidden (browser resets scrollTop to 0)
+ if (isHiddenRef.current) return;
+
const { scrollTop, scrollHeight, clientHeight } = element;
// Track if we're at the bottom for auto-scroll behavior (100px threshold)
// User is considered "at bottom" if within 100px of the bottom
wasAtBottomRef.current = scrollHeight - scrollTop - clientHeight < 100;
+ savedScrollTopRef.current = scrollTop;
// Trigger lazy load when scrolled near top
if (scrollTop < 40 && loadingRef.current.hasMore && !loadingRef.current.isLoadingMore) {
@@ -106,6 +114,10 @@ export const VirtualizedMessageList = memo(function VirtualizedMessageList({
return () => element.removeEventListener('scroll', handleScroll);
}, [handleScroll]);
+ // Keep a ref so the ResizeObserver closure always has the current virtualizer
+ const virtualizerRef = useRef(virtualizer);
+ virtualizerRef.current = virtualizer;
+
// Maintain scroll position at bottom when container resizes (e.g., chat input grows)
useEffect(() => {
const element = messagesContainerRef.current;
@@ -114,7 +126,45 @@ export const VirtualizedMessageList = memo(function VirtualizedMessageList({
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
const currentHeight = entry.contentRect.height;
+ const currentWidth = entry.contentRect.width;
const previousHeight = previousHeightRef.current;
+ const previousWidth = previousWidthRef.current;
+
+ // Panel being hidden by dockview — mark as hidden, don't update refs
+ if (currentWidth === 0 || currentHeight === 0) {
+ isHiddenRef.current = true;
+ return;
+ }
+
+ // Panel becoming visible again — restore scroll position
+ if (isHiddenRef.current) {
+ isHiddenRef.current = false;
+ previousHeightRef.current = currentHeight;
+ previousWidthRef.current = currentWidth;
+
+ // Invalidate stale measurements from when the panel was display:none,
+ // then use the virtualizer's scrollToIndex which persists across
+ // re-measurement cycles (raw scrollTop gets overwritten by the
+ // virtualizer as it re-measures items after becoming visible).
+ const virt = virtualizerRef.current;
+ virt.measure();
+ requestAnimationFrame(() => {
+ if (wasAtBottomRef.current) {
+ const count = virt.options.count;
+ if (count > 0) {
+ virt.scrollToIndex(count - 1, { align: 'end' });
+ }
+ } else {
+ element.scrollTop = savedScrollTopRef.current;
+ }
+ });
+ return;
+ }
+
+ // If width genuinely changed, invalidate cached row measurements (text rewraps)
+ if (previousWidth > 0 && currentWidth !== previousWidth) {
+ virtualizerRef.current.measure();
+ }
// If container got smaller (input grew) and we were at bottom, scroll to bottom
if (previousHeight > 0 && currentHeight < previousHeight && wasAtBottomRef.current) {
@@ -126,6 +176,7 @@ export const VirtualizedMessageList = memo(function VirtualizedMessageList({
}
previousHeightRef.current = currentHeight;
+ previousWidthRef.current = currentWidth;
}
});
diff --git a/apps/web/components/task/dockview-desktop-layout.tsx b/apps/web/components/task/dockview-desktop-layout.tsx
index e0e47b548d..e439860930 100644
--- a/apps/web/components/task/dockview-desktop-layout.tsx
+++ b/apps/web/components/task/dockview-desktop-layout.tsx
@@ -686,6 +686,7 @@ export const DockviewDesktopLayout = memo(function DockviewDesktopLayout({
leftHeaderActionsComponent={LeftHeaderActions}
rightHeaderActionsComponent={RightHeaderActions}
onReady={onReady}
+ defaultRenderer="always"
className="h-full"
/>
diff --git a/apps/web/components/task/file-editor-panel.tsx b/apps/web/components/task/file-editor-panel.tsx
index 6762e48da8..73cb42b418 100644
--- a/apps/web/components/task/file-editor-panel.tsx
+++ b/apps/web/components/task/file-editor-panel.tsx
@@ -1,27 +1,59 @@
'use client';
-import { memo } from 'react';
+import { memo, useEffect, useRef } from 'react';
import type { IDockviewPanelProps } from 'dockview-react';
import { PanelRoot, PanelBody } from './panel-primitives';
import { FileEditorContent } from './file-editor-content';
import { FileImageViewer } from './file-image-viewer';
import { FileBinaryViewer } from './file-binary-viewer';
import { useAppStore } from '@/components/state-provider';
-import { useDockviewStore } from '@/lib/state/dockview-store';
+import { useDockviewStore, type FileEditorState } from '@/lib/state/dockview-store';
import { useFileEditors } from '@/hooks/use-file-editors';
import { getFileCategory } from '@/lib/utils/file-types';
+import { getWebSocketClient } from '@/lib/ws/connection';
+import { requestFileContent } from '@/lib/ws/workspace-files';
+import { calculateHash } from '@/lib/utils/file-diff';
export const FileEditorPanel = memo(function FileEditorPanel(
props: IDockviewPanelProps<{ path: string }>
) {
const path = props.params.path;
const fileState = useDockviewStore((s) => s.openFiles.get(path));
+ const setFileState = useDockviewStore((s) => s.setFileState);
const activeSessionId = useAppStore((state) => state.tasks.activeSessionId);
const activeSession = useAppStore((state) =>
activeSessionId ? state.taskSessions.items[activeSessionId] ?? null : null
);
const { savingFiles, handleFileChange, saveFile, deleteFile } = useFileEditors();
+ // Self-load file content when state is missing (e.g. after hot reload clears the store)
+ const loadingRef = useRef(false);
+ useEffect(() => {
+ if (fileState || loadingRef.current || !activeSessionId) return;
+ loadingRef.current = true;
+
+ const client = getWebSocketClient();
+ if (!client) { loadingRef.current = false; return; }
+
+ requestFileContent(client, activeSessionId, path)
+ .then(async (response) => {
+ const hash = await calculateHash(response.content);
+ const name = path.split('/').pop() || path;
+ const state: FileEditorState = {
+ path,
+ name,
+ content: response.content,
+ originalContent: response.content,
+ originalHash: hash,
+ isDirty: false,
+ isBinary: response.is_binary,
+ };
+ setFileState(path, state);
+ })
+ .catch(() => { /* will stay on loading state */ })
+ .finally(() => { loadingRef.current = false; });
+ }, [fileState, activeSessionId, path, setFileState]);
+
if (!fileState) {
return (
${escapeHtml(value)}
`); + isSyncingRef.current = false; + initialSyncDoneRef.current = true; + /* eslint-enable react-hooks/immutability */ + }, [editor, value, sessionId]); + + // ── Imperative handle ───────────────────────────────────────── + + useImperativeHandle(ref, () => ({ + focus: () => editor?.commands.focus(), + blur: () => editor?.commands.blur(), + getSelectionStart: () => editor?.state.selection.from ?? 0, + getValue: () => editor ? getMarkdownText(editor) : '', + setValue: (v: string) => { + if (!editor) return; + isSyncingRef.current = true; + if (v === '') { + editor.commands.clearContent(); + } else { + editor.commands.setContent(`${escapeHtml(v)}
`); + } + isSyncingRef.current = false; + onChange(v); + }, + clear: () => { + if (!editor) return; + isSyncingRef.current = true; + editor.commands.clearContent(); + isSyncingRef.current = false; + onChange(''); + }, + getTextareaElement: () => editor?.view.dom ?? null, + insertText: (text: string, from: number, to: number) => { + if (!editor) return; + editor.chain().focus().insertContentAt({ from, to }, text).run(); + }, + getMentions: () => { + if (!editor) return []; + const mentions: ContextFile[] = []; + editor.state.doc.descendants((node) => { + if (node.type.name === 'contextMention') { + const { kind, path, label } = node.attrs; + if (kind === 'file') mentions.push({ path, name: label, pinned: false }); + else if (kind === 'prompt') mentions.push({ path, name: label, pinned: false }); + // Skip plan — handled via context store toggle + } + }); + return mentions; + }, + }), [editor, onChange]); + + // ── Menu handlers ───────────────────────────────────────────── + + const handleMentionSelect = useCallback((item: MentionItem) => { + mentionMenu.command?.(item); + }, [mentionMenu]); + + const handleMentionClose = useCallback(() => { + setMentionMenu({ isOpen: false, items: [], query: '', clientRect: null, command: null }); + }, []); + + const handleSlashSelect = useCallback((cmd: SlashCommand) => { + slashMenu.command?.(cmd); + }, [slashMenu]); + + const handleSlashClose = useCallback(() => { + setSlashMenu({ isOpen: false, items: [], query: '', clientRect: null, command: null }); + }, []); + + // ── Render ──────────────────────────────────────────────────── + + return ( + <> +