From 64b9dc526da1f130557550dc9d13da8f7fd8f276 Mon Sep 17 00:00:00 2001
From: iliya <iliyazelenkog@gmail.com>
Date: Mon, 2 Mar 2026 21:53:22 +0200
Subject: [PATCH] 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.
---
 README.md                                     |  18 +++
 .../components/team/TeamDetailView.tsx        |   8 ++
 .../components/team/editor/EditorFileTree.tsx |   9 ++
 .../team/editor/ProjectEditorOverlay.tsx      |  15 +++
 .../components/ui/ChipInteractionLayer.tsx    | 104 ++++++++++++------
 .../components/ui/MentionSuggestionList.tsx   |   4 +-
 src/renderer/hooks/useMentionDetection.ts     |  22 +++-
 src/renderer/store/slices/editorSlice.ts      |  57 ++++++++++
 8 files changed, 199 insertions(+), 38 deletions(-)

diff --git a/README.md b/README.md
index 4aae0824..9194a544 100644
--- a/README.md
+++ b/README.md
@@ -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>
+
 ---
 
 <!--
diff --git a/src/renderer/components/team/TeamDetailView.tsx b/src/renderer/components/team/TeamDetailView.tsx
index 57edcced..8bede8b4 100644
--- a/src/renderer/components/team/TeamDetailView.tsx
+++ b/src/renderer/components/team/TeamDetailView.tsx
@@ -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;
diff --git a/src/renderer/components/team/editor/EditorFileTree.tsx b/src/renderer/components/team/editor/EditorFileTree.tsx
index 0e7deb60..7ec14c4f 100644
--- a/src/renderer/components/team/editor/EditorFileTree.tsx
+++ b/src/renderer/components/team/editor/EditorFileTree.tsx
@@ -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();
diff --git a/src/renderer/components/team/editor/ProjectEditorOverlay.tsx b/src/renderer/components/team/editor/ProjectEditorOverlay.tsx
index c77c1b43..9d76234c 100644
--- a/src/renderer/components/team/editor/ProjectEditorOverlay.tsx
+++ b/src/renderer/components/team/editor/ProjectEditorOverlay.tsx
@@ -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;
diff --git a/src/renderer/components/ui/ChipInteractionLayer.tsx b/src/renderer/components/ui/ChipInteractionLayer.tsx
index a169a83d..719edfeb 100644
--- a/src/renderer/components/ui/ChipInteractionLayer.tsx
+++ b/src/renderer/components/ui/ChipInteractionLayer.tsx
@@ -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>
   );
diff --git a/src/renderer/components/ui/MentionSuggestionList.tsx b/src/renderer/components/ui/MentionSuggestionList.tsx
index 84dbb352..20d994fc 100644
--- a/src/renderer/components/ui/MentionSuggestionList.tsx
+++ b/src/renderer/components/ui/MentionSuggestionList.tsx
@@ -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) => {
diff --git a/src/renderer/hooks/useMentionDetection.ts b/src/renderer/hooks/useMentionDetection.ts
index fca66b0f..36027a0e 100644
--- a/src/renderer/hooks/useMentionDetection.ts
+++ b/src/renderer/hooks/useMentionDetection.ts
@@ -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 {
diff --git a/src/renderer/store/slices/editorSlice.ts b/src/renderer/store/slices/editorSlice.ts
index 156a08bd..40ea0a75 100644
--- a/src/renderer/store/slices/editorSlice.ts
+++ b/src/renderer/store/slices/editorSlice.ts
@@ -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
   // ═══════════════════════════════════════════════════════