feat: enhance file reveal functionality and improve UI interactions

- Added support for revealing files in the editor when requested, enhancing user experience during file navigation.
- Implemented a pending file reveal mechanism to ensure files are opened correctly after the editor initializes.
- Updated the ChipInteractionLayer to allow users to open files directly from chips, streamlining access to relevant files.
- Enhanced the MentionSuggestionList styling for better visual feedback on selection.
- Improved mention detection logic to maintain selection state during redundant events, optimizing user interaction.
This commit is contained in:
iliya 2026-03-02 21:53:22 +02:00
parent 171773acf1
commit 64b9dc526d
8 changed files with 199 additions and 38 deletions

View file

@ -28,8 +28,26 @@ A new approach to task management with AI agents.
- **Sit back and watch** — tasks change status on the kanban board while agents handle everything on their own
- **Review changes like in Cursor** — see what code each task changed, then approve, reject, or comment
- **Full tool visibility** — inspect exactly which tools an agent used to complete each task
- **Live process dashboard** — see which agents are running processes in dedicated sections (frontend, backend, etc.) and open URLs directly in the browser
- **Stay in control** — send a direct message to any agent or drop a comment on a task whenever you want to clarify something or add new work
<details>
<summary><strong>More features</strong></summary>
<br />
- **Recent tasks across projects** — browse the latest completed tasks from all your projects in one place
- **Deep session analysis** — detailed breakdown of what happened in each Claude session: bash commands, reasoning, subprocesses
- **Smart task-to-log matching** — automatically links Claude session logs to specific tasks based on status change timestamps, even when a task moves back and forth between states
- **Zero-setup onboarding** — built-in Claude Code installation and authentication, ready to go out of the box
- **Built-in code editor** — edit project files with Git support and other essential features without leaving the app
- **Branch strategy control** — choose via prompt whether all agents work on a single branch or each gets its own git worktree
- **Team member stats** — global performance statistics for every member of the team
- **Attach code context** — reference files or code snippets in your messages, just like in Cursor
- **Notification system** — configurable alerts when tasks complete, agents need attention, or errors occur
</details>
---
<!--

View file

@ -266,6 +266,14 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
});
const [messagesFilterOpen, setMessagesFilterOpen] = useState(false);
// Open editor overlay when a file reveal is requested (e.g. from chip click)
const pendingRevealFile = useStore((s) => s.editorPendingRevealFile);
useEffect(() => {
if (pendingRevealFile && data?.config.projectPath) {
setEditorOpen(true);
}
}, [pendingRevealFile, data?.config.projectPath]);
useEffect(() => {
if (!teamName) {
return;

View file

@ -194,6 +194,15 @@ export const EditorFileTree = ({
overscan: !dndReady ? 3 : draggedItem ? 20 : 10,
});
// Scroll to file when selectedFilePath changes (e.g. from revealFileInEditor)
useEffect(() => {
if (!selectedFilePath) return;
const idx = flatItems.findIndex((fi) => fi.node.fullPath === selectedFilePath);
if (idx >= 0) {
virtualizer.scrollToIndex(idx, { align: 'center' });
}
}, [selectedFilePath, flatItems, virtualizer]);
// Git status lookup: absolute path → status type
const gitStatusMap = useMemo(() => {
const t0 = performance.now();

View file

@ -237,6 +237,9 @@ export const ProjectEditorOverlay = ({
// Active tab save error
const activeSaveError = activeTabId ? (saveErrors[activeTabId] ?? null) : null;
const pendingRevealFile = useStore((s) => s.editorPendingRevealFile);
const revealAndOpenFile = useStore((s) => s.revealAndOpenFile);
// Initialize editor on mount
useEffect(() => {
void openEditor(projectPath);
@ -245,6 +248,18 @@ export const ProjectEditorOverlay = ({
};
}, [projectPath, openEditor, closeEditor]);
// Process pending file reveal after editor initializes.
// Guard: wait until the file tree is actually loaded (not null) and not loading.
// Without the fileTree check, the effect fires on mount when fileTreeLoading is
// still at its initial `false` value — before openEditor sets it to `true`.
const fileTreeLoading = useStore((s) => s.editorFileTreeLoading);
const fileTreeLoaded = useStore((s) => s.editorFileTree !== null);
useEffect(() => {
if (pendingRevealFile && !fileTreeLoading && fileTreeLoaded) {
void revealAndOpenFile(pendingRevealFile);
}
}, [pendingRevealFile, fileTreeLoading, fileTreeLoaded, revealAndOpenFile]);
// Keep container rect fresh for selection menu positioning (resize, sidebar toggle)
useEffect(() => {
const el = editorContentRef.current;

View file

@ -16,10 +16,11 @@ import { EditorState } from '@codemirror/state';
import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
import { EditorView } from '@codemirror/view';
import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
import { useStore } from '@renderer/store';
import { chipDisplayLabel } from '@renderer/types/inlineChip';
import { calculateChipPositions } from '@renderer/utils/chipUtils';
import { getSyncLanguageExtension } from '@renderer/utils/codemirrorLanguages';
import { X } from 'lucide-react';
import { ExternalLink, X } from 'lucide-react';
import type { InlineChip } from '@renderer/types/inlineChip';
import type { ChipPosition } from '@renderer/utils/chipUtils';
@ -54,13 +55,33 @@ const chipPreviewTheme = EditorView.theme({
const MAX_PREVIEW_LINES = 12;
/** Simple tooltip for file-level mention chips (no code preview). */
const ChipFilePreview = ({ chip }: { chip: InlineChip }): React.JSX.Element => {
const ChipFilePreview = ({
chip,
onOpenInEditor,
}: {
chip: InlineChip;
onOpenInEditor?: (filePath: string) => void;
}): React.JSX.Element => {
const displayPath = chip.displayPath ?? chip.filePath;
return (
<div className="max-w-md overflow-hidden rounded-md">
<div className="flex items-center gap-2 bg-[var(--code-bg,#1e1e2e)] px-2.5 py-2">
<span className="text-[11px] font-medium text-[var(--color-text)]">{chip.fileName}</span>
<span className="text-[10px] text-[var(--color-text-muted)]">{displayPath}</span>
<span className="flex-1 text-[10px] text-[var(--color-text-muted)]">{displayPath}</span>
{onOpenInEditor ? (
<button
type="button"
className="flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-surface-raised)] hover:text-[var(--color-text)]"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onOpenInEditor(chip.filePath);
}}
>
<ExternalLink size={10} />
Open
</button>
) : null}
</div>
</div>
);
@ -139,6 +160,7 @@ export const ChipInteractionLayer = ({
onRemove,
}: ChipInteractionLayerProps): React.JSX.Element | null => {
const [positions, setPositions] = React.useState<ChipPosition[]>([]);
const revealFileInEditor = useStore((s) => s.revealFileInEditor);
React.useLayoutEffect(() => {
if (chips.length === 0) {
@ -155,40 +177,52 @@ export const ChipInteractionLayer = ({
return (
<div className="pointer-events-none absolute inset-0 z-20 overflow-hidden">
<div style={{ transform: `translateY(-${scrollTop}px)` }}>
{positions.map((pos) => (
<Tooltip key={pos.chip.id}>
<TooltipTrigger asChild>
<div
className="group pointer-events-auto absolute cursor-default"
style={{
top: pos.top,
left: pos.left,
width: pos.width,
height: pos.height,
}}
>
<button
type="button"
className="absolute -right-1 -top-1.5 z-30 flex size-3.5 items-center justify-center rounded-full border border-[var(--color-border-emphasis)] bg-[var(--color-surface-raised)] opacity-0 transition-opacity group-hover:opacity-100"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onRemove(pos.chip.id);
{positions.map((pos) => {
const isFileChip = pos.chip.fromLine == null;
return (
<Tooltip key={pos.chip.id}>
<TooltipTrigger asChild>
<div
className={`group pointer-events-auto absolute ${isFileChip ? 'cursor-pointer' : 'cursor-default'}`}
style={{
top: pos.top,
left: pos.left,
width: pos.width,
height: pos.height,
}}
onClick={
isFileChip
? (e) => {
e.preventDefault();
e.stopPropagation();
revealFileInEditor(pos.chip.filePath);
}
: undefined
}
>
<X size={8} className="text-[var(--color-text-muted)]" />
</button>
</div>
</TooltipTrigger>
<TooltipContent side="top" className="max-w-md p-0">
{pos.chip.fromLine == null ? (
<ChipFilePreview chip={pos.chip} />
) : (
<ChipCodePreview chip={pos.chip} />
)}
</TooltipContent>
</Tooltip>
))}
<button
type="button"
className="absolute -right-1 -top-1.5 z-30 flex size-3.5 items-center justify-center rounded-full border border-[var(--color-border-emphasis)] bg-[var(--color-surface-raised)] opacity-0 transition-opacity group-hover:opacity-100"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onRemove(pos.chip.id);
}}
>
<X size={8} className="text-[var(--color-text-muted)]" />
</button>
</div>
</TooltipTrigger>
<TooltipContent side="top" className="max-w-md p-0">
{isFileChip ? (
<ChipFilePreview chip={pos.chip} onOpenInEditor={revealFileInEditor} />
) : (
<ChipCodePreview chip={pos.chip} />
)}
</TooltipContent>
</Tooltip>
);
})}
</div>
</div>
);

View file

@ -100,9 +100,9 @@ export const MentionSuggestionList = ({
role="option"
aria-selected={isSelected}
data-index={idx}
className={`flex cursor-pointer items-center gap-2 px-3 py-1.5 text-xs transition-colors ${
className={`flex cursor-pointer items-center gap-2 rounded-sm px-3 py-1.5 text-xs transition-colors ${
isSelected
? 'bg-[var(--color-surface-raised)] text-[var(--color-text)]'
? 'bg-[var(--color-accent)]/15 ring-[var(--color-accent)]/30 text-[var(--color-text)] ring-1 ring-inset'
: 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)]'
}`}
onMouseDown={(e) => {

View file

@ -165,6 +165,9 @@ export function useMentionDetection({
const [selectedIndex, setSelectedIndex] = useState(0);
const [dropdownPosition, setDropdownPosition] = useState<DropdownPosition | null>(null);
const triggerIndexRef = useRef<number>(-1);
// Track current query in a ref so detectTrigger can avoid resetting selectedIndex
// on redundant selectionchange events (e.g. after ArrowDown/Up keyboard navigation)
const queryRef = useRef('');
const filteredSuggestions = useMemo(() => {
if (!isOpen) return [];
@ -179,6 +182,7 @@ export function useMentionDetection({
setSelectedIndex(0);
setDropdownPosition(null);
triggerIndexRef.current = -1;
queryRef.current = '';
}, []);
const computeDropdownPosition = useCallback(
@ -217,14 +221,28 @@ export function useMentionDetection({
[value, query, onValueChange, textareaRef, dismiss]
);
/**
* Detects whether cursor is inside an @-trigger region and opens/dismisses the dropdown.
*
* Called from handleSelect (selectionchange) must NOT reset selectedIndex when
* the trigger is already active with the same query, otherwise ArrowDown/Up navigation
* gets immediately undone by the selectionchange event that follows keydown.
*/
const detectTrigger = useCallback(
(cursorPos: number) => {
const trigger = findMentionTrigger(value, cursorPos);
if (trigger && (suggestions.length > 0 || enableTriggerAlways)) {
const sameQuery =
triggerIndexRef.current === trigger.triggerIndex && queryRef.current === trigger.query;
triggerIndexRef.current = trigger.triggerIndex;
queryRef.current = trigger.query;
setQuery(trigger.query);
setIsOpen(true);
setSelectedIndex(0);
// Only reset selection when trigger/query actually changed —
// preserves keyboard navigation index across redundant selectionchange events
if (!sameQuery) {
setSelectedIndex(0);
}
computeDropdownPosition(trigger.triggerIndex, value);
} else {
dismiss();
@ -243,8 +261,10 @@ export function useMentionDetection({
const trigger = findMentionTrigger(newValue, cursorPos);
if (trigger && (suggestions.length > 0 || enableTriggerAlways)) {
triggerIndexRef.current = trigger.triggerIndex;
queryRef.current = trigger.query;
setQuery(trigger.query);
setIsOpen(true);
// Text changed — always reset selection to first item
setSelectedIndex(0);
computeDropdownPosition(trigger.triggerIndex, newValue);
} else {

View file

@ -235,6 +235,14 @@ export interface EditorSlice {
editorPendingGoToLine: number | null;
setPendingGoToLine: (line: number | null) => void;
/** File path to reveal in editor (opens editor, expands dirs, opens tab, focuses in tree). */
editorPendingRevealFile: string | null;
/** Request to reveal a file in the editor. Opens editor overlay if needed. */
revealFileInEditor: (filePath: string) => void;
/** Process the pending reveal: expand parent dirs and open the file tab. */
revealAndOpenFile: (filePath: string) => Promise<void>;
clearPendingRevealFile: () => void;
fetchGitStatus: () => Promise<void>;
toggleWatcher: (enable: boolean) => Promise<void>;
toggleLineWrap: () => void;
@ -288,9 +296,58 @@ export const createEditorSlice: StateCreator<AppState, [], [], EditorSlice> = (s
editorFileMtimes: {},
editorConflictFile: null,
editorPendingGoToLine: null,
editorPendingRevealFile: null,
setPendingGoToLine: (line: number | null) => set({ editorPendingGoToLine: line }),
revealFileInEditor: (filePath: string) => {
set({ editorPendingRevealFile: filePath });
},
clearPendingRevealFile: () => {
set({ editorPendingRevealFile: null });
},
revealAndOpenFile: async (filePath: string) => {
const { editorProjectPath, editorFileTree, expandDirectory, openFile } = get();
if (!editorProjectPath) return;
// Guard: file tree must be loaded before we can reveal.
// If it's still null, bail out WITHOUT clearing pendingRevealFile
// so the caller effect can retry after the tree loads.
if (!editorFileTree) {
log.info('revealAndOpenFile: tree not loaded yet, deferring reveal');
return;
}
// Compute parent directories from projectRoot to the file.
// Normalize: strip trailing slash from project path to avoid double-slash.
const normalizedRoot = editorProjectPath.endsWith('/')
? editorProjectPath.slice(0, -1)
: editorProjectPath;
const relative = filePath.startsWith(normalizedRoot + '/')
? filePath.slice(normalizedRoot.length + 1)
: null;
if (relative) {
const segments = relative.split('/');
// Expand each parent directory sequentially (root → child → grandchild).
// Skip the last segment (the file name itself).
// Each expandDirectory call is awaited so that its children are merged
// into the tree before the next level is expanded.
let currentDir = normalizedRoot;
for (let i = 0; i < segments.length - 1; i++) {
currentDir = `${currentDir}/${segments[i]}`;
await expandDirectory(currentDir);
}
}
// Open the file as a tab
openFile(filePath);
// Clear reveal state
set({ editorPendingRevealFile: null });
},
// ═══════════════════════════════════════════════════════
// Group 1: File tree actions
// ═══════════════════════════════════════════════════════