v1.12 track A: container guidance + skills

apps/web/src/components/ChatInput.tsx

@@ -87,9 +87,12 @@ export function ChatInput({ disabled, projectId, agentId, onAgentChange, session
   // Batch 9.6: slash-command dropdown. Opens when `/` is the first char of
   // the input and stays open while the input is `/<word>` with no whitespace.
   // Disabled entirely when the caller doesn't pass onSlashCommand.
+  // v1.12 CP7.5: anchorRect was a snapshot taken at open time. SkillSlashCommand
+  // now reads the live textarea rect via inputRef (textareaRef below) so it can
+  // recompute on visualViewport changes (iOS keyboard open/close), so the
+  // anchorRect field is no longer needed in this state.
   const [slashState, setSlashState] = useState<{
     query: string;
-    anchorRect: { top: number; left: number };
   } | null>(null);
   const { skills } = useSkills();
   const skillsLookup = useMemo(() => {
@@ -268,10 +271,9 @@ export function ChatInput({ disabled, projectId, agentId, onAgentChange, session
     if (onSlashCommand && /^\/[^\s]*$/.test(newValue)) {
       const query = newValue.slice(1);
       if (!slashState) {
-        const rect = ta.getBoundingClientRect();
-        setSlashState({ query, anchorRect: { top: rect.top, left: rect.left } });
+        setSlashState({ query });
       } else if (slashState.query !== query) {
-        setSlashState({ ...slashState, query });
+        setSlashState({ query });
       }
       if (mentionState?.open) setMentionState(null);
       return;
@@ -659,7 +661,7 @@ export function ChatInput({ disabled, projectId, agentId, onAgentChange, session
         <SkillSlashCommand
           query={slashState.query}
           skills={skills}
-          anchorRect={slashState.anchorRect}
+          inputRef={textareaRef}
           onSelect={handleSlashSelect}
           onClose={() => setSlashState(null)}
         />