Commit 5e78386cdc805ee64ccc745454ce476475597f6f | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-03-02 13:54:02-08:00
committer	Julius Marminge <jmarminge@gmail.com> 2026-03-02 14:16:08-08:00
log	5e78386cdc805ee64ccc745454ce476475597f6f
tree	5430e3351dbcc8595b1127520f2392ca2a0953e9
parent	c378afeff852c06d7a558c4842ae9033b3775627

Improve composer menu highlighting and suppress triggers near mentions

Adds visual active-item highlighting to the command menu, suppresses
trigger detection when the cursor is adjacent to a mention pill, and
resets transient UI state on thread change.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2 files changed, 59 insertions(+), 7 deletions(-)

apps
- web
  - src
    components
    ChatView.tsx
    ComposerPromptEditor.tsx

apps/web/src/components/ChatView.tsx+33-4

 @@ -361,12 +361,16 @@ const VscodeEntryIcon = memo(function VscodeEntryIcon(props: {
 const ComposerCommandMenuItem = memo(function ComposerCommandMenuItem(props: {
   item: ComposerCommandItem;
   resolvedTheme: "light" | "dark";
+  isActive: boolean;
   onSelect: (item: ComposerCommandItem) => void;
 }) {
   return (
     <CommandItem
       value={props.item.id}
-      className="cursor-pointer select-none gap-2"
+      className={cn(
+        "cursor-pointer select-none gap-2",
+        props.isActive && "bg-accent text-accent-foreground",
+      )}
       onMouseDown={(event) => {
         event.preventDefault();
       }}
 @@ -400,6 +404,7 @@ const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {
   resolvedTheme: "light" | "dark";
   isLoading: boolean;
   triggerKind: ComposerTriggerKind | null;
+  activeItemId: string | null;
   onHighlightedItemChange: (itemId: string | null) => void;
   onSelect: (item: ComposerCommandItem) => void;
 }) {
 @@ -419,6 +424,7 @@ const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {
               key={item.id}
               item={item}
               resolvedTheme={props.resolvedTheme}
+              isActive={props.activeItemId === item.id}
               onSelect={props.onSelect}
             />
           ))}
 @@ -1389,6 +1395,26 @@ export default function ChatView({ threadId }: ChatViewProps) {
     scheduleStickToBottom();
   }, [phase, scheduleStickToBottom, timelineEntries]);
+  useEffect(() => {
+    setExpandedWorkGroups({});
+  }, [activeThread?.id]);
+  useEffect(() => {
+    if (!composerMenuOpen) {
+      setComposerHighlightedItemId(null);
+      return;
+    }
+    setComposerHighlightedItemId((existing) =>
+      existing && composerMenuItems.some((item) => item.id === existing)
+        ? existing
+        : (composerMenuItems[0]?.id ?? null),
+    );
+  }, [composerMenuItems, composerMenuOpen]);
+  useEffect(() => {
+    setIsRevertingCheckpoint(false);
+  }, [activeThread?.id]);
   useEffect(() => {
     if (!activeThread?.id || terminalState.terminalOpen) return;
     const frame = window.requestAnimationFrame(() => {
 @@ -2274,12 +2300,14 @@ export default function ChatView({ threadId }: ChatViewProps) {
       workspaceEntriesQuery.isLoading ||
       workspaceEntriesQuery.isFetching);
-  const onPromptChange = useCallback((nextPrompt: string, nextCursor: number) => {
+  const onPromptChange = useCallback((nextPrompt: string, nextCursor: number, cursorAdjacentToMention: boolean) => {
     promptRef.current = nextPrompt;
     setPrompt(nextPrompt);
     setComposerCursor(nextCursor);
     setComposerTrigger(
-      detectComposerTrigger(nextPrompt, expandCollapsedComposerCursor(nextPrompt, nextCursor)),
+      cursorAdjacentToMention
+        ? null
+        : detectComposerTrigger(nextPrompt, expandCollapsedComposerCursor(nextPrompt, nextCursor)),
     );
   }, [setPrompt]);
 @@ -2301,8 +2329,8 @@ export default function ChatView({ threadId }: ChatViewProps) {
         const selectedItem = activeComposerMenuItemRef.current ?? currentItems[0];
         if (selectedItem) {
           onSelectComposerItem(selectedItem);
+          return true;
         }
-        return true;
       }
     }
 @@ -2464,6 +2492,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
                     resolvedTheme={resolvedTheme}
                     isLoading={isComposerMenuLoading}
                     triggerKind={composerTriggerKind}
+                    activeItemId={activeComposerMenuItem?.id ?? null}
                     onHighlightedItemChange={onComposerMenuItemHighlighted}
                     onSelect={onSelectComposerItem}
                   />

apps/web/src/components/ComposerPromptEditor.tsx+26-3

 @@ -395,7 +395,7 @@ interface ComposerPromptEditorProps {
   disabled: boolean;
   placeholder: string;
   className?: string;
-  onChange: (nextValue: string, nextCursor: number) => void;
+  onChange: (nextValue: string, nextCursor: number, cursorAdjacentToMention: boolean) => void;
   onCommandKeyDown?: (
     key: "ArrowDown" | "ArrowUp" | "Enter" | "Tab",
     event: KeyboardEvent,
 @@ -540,6 +540,29 @@ function ComposerMentionSelectionNormalizePlugin() {
   return null;
 }
+function $isCursorAdjacentToMention(): boolean {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false;
+  const anchorNode = selection.anchor.getNode();
+  if (anchorNode instanceof ComposerMentionNode) return true;
+  if ($isElementNode(anchorNode)) {
+    const childIndex = selection.anchor.offset - 1;
+    if (childIndex >= 0) {
+      const child = anchorNode.getChildAtIndex(childIndex);
+      if (child instanceof ComposerMentionNode) return true;
+    }
+  }
+  if ($isTextNode(anchorNode) && selection.anchor.offset === 0) {
+    const prev = anchorNode.getPreviousSibling();
+    if (prev instanceof ComposerMentionNode) return true;
+  }
+  return false;
+}
 function ComposerMentionBackspacePlugin() {
   const [editor] = useLexicalComposerContext();
 @@ -662,7 +685,7 @@ function ComposerPromptEditorInner({
         value: snapshotRef.current.value,
         cursor: boundedCursor,
       };
-      onChangeRef.current(snapshotRef.current.value, boundedCursor);
+      onChangeRef.current(snapshotRef.current.value, boundedCursor, false);
     },
     [editor],
   );
 @@ -715,7 +738,7 @@ function ComposerPromptEditorInner({
         value: nextValue,
         cursor: nextCursor,
       };
-      onChangeRef.current(nextValue, nextCursor);
+      onChangeRef.current(nextValue, nextCursor, $isCursorAdjacentToMention());
     });
   }, []);