From 9e50e1a613a4fc52e2d7b7f799eaf24d2acf5696 Mon Sep 17 00:00:00 2001
From: Tobias Garcia <iguana3000tg@gmail.com>
Date: Thu, 21 May 2026 14:49:35 +0900
Subject: [PATCH 1/7] feat: add base slash command autocomplete logic

---
 .../ui/SlashCommandAutocomplete.module.css    |  5 ++
 .../ui/SlashCommandAutocomplete.tsx           | 49 +++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.module.css
 create mode 100644 app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx

diff --git a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.module.css b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.module.css
new file mode 100644
index 00000000..f81fe5d5
--- /dev/null
+++ b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.module.css
@@ -0,0 +1,5 @@
+.autocomplete {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
\ No newline at end of file
diff --git a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
new file mode 100644
index 00000000..cfbbd49a
--- /dev/null
+++ b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
@@ -0,0 +1,49 @@
+import React, { useEffect, useState, createContext, useContext } from 'react'
+import { useSettingsWebSocket } from '@/pages/Settings/useSettingsWebSocket';
+import styles from './SlashCommandAutocomplete.module.css';
+
+interface SkillConfig {
+  name: string
+  description: string
+  enabled: boolean
+  user_invocable: boolean
+  action_sets: string[]
+  source: string
+}
+
+interface SlashCommandProps {
+    input: string;
+}
+
+export function SlashCommandAutocomplete({ input }: SlashCommandProps) {
+    const [skills, setSkills] = useState<string[]>(['']);
+    const [query, setQuery] = useState<string>('');
+
+    const { send, onMessage, isConnected } = useSettingsWebSocket()
+    useEffect(() => {
+        if (!isConnected) return;
+
+        const cleanup = onMessage('skill_list', (data: unknown) => {
+            const d = data as { success: boolean; skills?: SkillConfig[]; total?: number; enabled?: number; error?: string }
+            if (d.success && d.skills) {
+                const userInvocable = d.skills.filter(s => s.enabled)
+                console.log('[SlashCommandAutocomplete] user-invocable skills:', userInvocable)
+                setSkills(userInvocable.map(s => s.name))
+            }
+        })
+
+        send('skill_list')
+        return cleanup
+    }, [isConnected, send, onMessage])
+
+    console.log(skills)
+    if (input && input[0] === '/') return (
+        <div>
+            <ul className={styles.autocomplete}>
+                {skills.filter(item => item.includes(input.slice(1))).map((item, index) => (
+                    <li key={index}>/{item}</li>
+                ))}
+            </ul>
+        </div>
+    );
+}
\ No newline at end of file

From 02547555a95ebc19acb57526752488866cdc8f8c Mon Sep 17 00:00:00 2001
From: Tobias Garcia <iguana3000tg@gmail.com>
Date: Thu, 21 May 2026 16:32:29 +0900
Subject: [PATCH 2/7] feat: add core logic and ui for slash command
 autocomplete

---
 .../src/components/Chat/Chat.module.css       |  1 +
 .../frontend/src/components/Chat/Chat.tsx     |  9 ++-
 .../ui/SlashCommandAutocomplete.module.css    | 61 ++++++++++++++++++-
 .../ui/SlashCommandAutocomplete.tsx           |  6 +-
 .../frontend/src/components/ui/index.ts       |  2 +
 5 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/app/ui_layer/browser/frontend/src/components/Chat/Chat.module.css b/app/ui_layer/browser/frontend/src/components/Chat/Chat.module.css
index 09c04973..913f5ed6 100644
--- a/app/ui_layer/browser/frontend/src/components/Chat/Chat.module.css
+++ b/app/ui_layer/browser/frontend/src/components/Chat/Chat.module.css
@@ -185,6 +185,7 @@
   min-width: 0;
   border-radius: var(--radius-md);
   transition: outline var(--transition-fast), background var(--transition-fast);
+  position: relative;
 }
 
 .inputWrapperDragOver {
diff --git a/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx b/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
index 14ea658d..b53835be 100644
--- a/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
+++ b/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
@@ -4,7 +4,7 @@ import { Send, Paperclip, X, Loader2, File, AlertCircle, Reply, Mic, MicOff, Che
 import { useVirtualizer } from '@tanstack/react-virtual'
 import { useWebSocket } from '../../contexts/WebSocketContext'
 import { useToast } from '../../contexts/ToastContext'
-import { Button, IconButton, StatusIndicator } from '../ui'
+import { Button, IconButton, SlashCommandAutocomplete, StatusIndicator } from '../ui'
 import { useDerivedAgentStatus } from '../../hooks'
 import { ChatMessageItem } from '../../pages/Chat/ChatMessage'
 import styles from './Chat.module.css'
@@ -625,13 +625,13 @@ export function Chat({ livingUIId, placeholder, emptyMessage }: ChatProps) {
           </button>
         )}
       </div>
-
+      
       {/* Status bar */}
       <div className={styles.statusBar}>
         <StatusIndicator status={status.state} size="sm" variant="dot" />
         <span>{status.message}</span>
       </div>
-
+      
       {/* Input area */}
       <div className={styles.inputArea}>
         <input ref={fileInputRef} type="file" multiple className={styles.hiddenFileInput} onChange={handleFileSelect} />
@@ -727,7 +727,7 @@ export function Chat({ livingUIId, placeholder, emptyMessage }: ChatProps) {
               ))}
             </div>
           )}
-
+          <SlashCommandAutocomplete input={input}></SlashCommandAutocomplete>
           <textarea
             ref={inputRef}
             className={`${styles.input}${isListening ? ` ${styles.inputListening}` : ''}`}
@@ -741,7 +741,6 @@ export function Chat({ livingUIId, placeholder, emptyMessage }: ChatProps) {
             inputMode="text"
           />
         </div>
-
         <Button
           icon={<Send size={16} />}
           onClick={handleSend}
diff --git a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.module.css b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.module.css
index f81fe5d5..63ae5919 100644
--- a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.module.css
+++ b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.module.css
@@ -1,5 +1,64 @@
 .autocomplete {
     list-style: none;
     padding: 0;
-    margin: 0;
+
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: calc(100% + 8px);
+
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-lg);
+    background: var(--bg-secondary);
+
+    max-height: 220px;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    z-index: 100;
+}
+
+.header {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    resize: none;
+    min-height: 36px;
+    max-height: 116px;
+    overflow-y: auto;
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-lg);
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    font-family: inherit;
+    line-height: var(--leading-normal);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.item {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    resize: none;
+    min-height: 36px;
+    max-height: 116px;
+    overflow-y: auto;
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-lg);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: var(--text-sm);
+    font-family: inherit;
+    line-height: var(--leading-normal);
+}
+
+.item:hover {
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+  cursor: pointer;
 }
\ No newline at end of file
diff --git a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
index cfbbd49a..12fa5c74 100644
--- a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
+++ b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState, createContext, useContext } from 'react'
 import { useSettingsWebSocket } from '@/pages/Settings/useSettingsWebSocket';
+import { ActivitySquare } from 'lucide-react'
 import styles from './SlashCommandAutocomplete.module.css';
 
 interface SkillConfig {
@@ -37,11 +38,12 @@ export function SlashCommandAutocomplete({ input }: SlashCommandProps) {
     }, [isConnected, send, onMessage])
 
     console.log(skills)
-    if (input && input[0] === '/') return (
+    if (input && input[0] === '/' && skills.filter(item => item.includes(input.slice(1))).length > 0) return (
         <div>
             <ul className={styles.autocomplete}>
+                <p className={styles.header}><ActivitySquare size={12}></ActivitySquare>Skills</p>
                 {skills.filter(item => item.includes(input.slice(1))).map((item, index) => (
-                    <li key={index}>/{item}</li>
+                    <li key={index} className={styles.item}>/{item}</li>
                 ))}
             </ul>
         </div>
diff --git a/app/ui_layer/browser/frontend/src/components/ui/index.ts b/app/ui_layer/browser/frontend/src/components/ui/index.ts
index 094084ba..a64cc881 100644
--- a/app/ui_layer/browser/frontend/src/components/ui/index.ts
+++ b/app/ui_layer/browser/frontend/src/components/ui/index.ts
@@ -19,3 +19,5 @@ export type { ConfirmModalProps } from './ConfirmModal'
 
 export { SkillCreatorModal } from './SkillCreatorModal'
 export type { SkillCreatorModalProps, SkillCreatorMode, SkillCreatorSubmit } from './SkillCreatorModal'
+
+export { SlashCommandAutocomplete } from './SlashCommandAutocomplete'

From 451dc0648c4939c2807b3d3ea4f798bcdf3a1deb Mon Sep 17 00:00:00 2001
From: Tobias Garcia <iguana3000tg@gmail.com>
Date: Fri, 22 May 2026 11:11:32 +0900
Subject: [PATCH 3/7] feat: add slash command autocomplete for skill invocation

---
 .../frontend/src/components/Chat/Chat.tsx      |  3 ++-
 .../ui/SlashCommandAutocomplete.module.css     |  7 ++-----
 .../components/ui/SlashCommandAutocomplete.tsx | 18 +++++++++---------
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx b/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
index b53835be..a43df95c 100644
--- a/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
+++ b/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
@@ -727,7 +727,8 @@ export function Chat({ livingUIId, placeholder, emptyMessage }: ChatProps) {
               ))}
             </div>
           )}
-          <SlashCommandAutocomplete input={input}></SlashCommandAutocomplete>
+          
+          <SlashCommandAutocomplete input={input} onSelectSkill={(skill) => setInput(`/${skill}`)}></SlashCommandAutocomplete>
           <textarea
             ref={inputRef}
             className={`${styles.input}${isListening ? ` ${styles.inputListening}` : ''}`}
diff --git a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.module.css b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.module.css
index 63ae5919..145e19fa 100644
--- a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.module.css
+++ b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.module.css
@@ -1,20 +1,17 @@
 .autocomplete {
     list-style: none;
     padding: 0;
-
+    margin: 0;
     position: absolute;
     left: 0;
     right: 0;
-    bottom: calc(100% + 8px);
-
+    bottom: calc(100%);
     border: 1px solid var(--border-primary);
     border-radius: var(--radius-lg);
     background: var(--bg-secondary);
-
     max-height: 220px;
     overflow-y: auto;
     overflow-x: hidden;
-
     z-index: 100;
 }
 
diff --git a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
index 12fa5c74..1bae7fe5 100644
--- a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
+++ b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, createContext, useContext } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useSettingsWebSocket } from '@/pages/Settings/useSettingsWebSocket';
 import { ActivitySquare } from 'lucide-react'
 import styles from './SlashCommandAutocomplete.module.css';
@@ -14,11 +14,11 @@ interface SkillConfig {
 
 interface SlashCommandProps {
     input: string;
+    onSelectSkill: (skill: string) => void;
 }
 
-export function SlashCommandAutocomplete({ input }: SlashCommandProps) {
-    const [skills, setSkills] = useState<string[]>(['']);
-    const [query, setQuery] = useState<string>('');
+export function SlashCommandAutocomplete({ input, onSelectSkill }: SlashCommandProps) {
+    const [skills, setSkills] = useState<string[]>([]);
 
     const { send, onMessage, isConnected } = useSettingsWebSocket()
     useEffect(() => {
@@ -28,7 +28,6 @@ export function SlashCommandAutocomplete({ input }: SlashCommandProps) {
             const d = data as { success: boolean; skills?: SkillConfig[]; total?: number; enabled?: number; error?: string }
             if (d.success && d.skills) {
                 const userInvocable = d.skills.filter(s => s.enabled)
-                console.log('[SlashCommandAutocomplete] user-invocable skills:', userInvocable)
                 setSkills(userInvocable.map(s => s.name))
             }
         })
@@ -37,13 +36,14 @@ export function SlashCommandAutocomplete({ input }: SlashCommandProps) {
         return cleanup
     }, [isConnected, send, onMessage])
 
-    console.log(skills)
-    if (input && input[0] === '/' && skills.filter(item => item.includes(input.slice(1))).length > 0) return (
+    const filteredSkills = input[0] === '/' ? skills.filter(item => item.includes(input.slice(1))) : []
+    
+    if (filteredSkills.length > 0) return (
         <div>
             <ul className={styles.autocomplete}>
                 <p className={styles.header}><ActivitySquare size={12}></ActivitySquare>Skills</p>
-                {skills.filter(item => item.includes(input.slice(1))).map((item, index) => (
-                    <li key={index} className={styles.item}>/{item}</li>
+                {filteredSkills.map((item, index) => (
+                    <li key={index} className={styles.item} onClick={() => onSelectSkill(item)}>/{item}</li>
                 ))}
             </ul>
         </div>

From 55fc4d4c8f26d2712bae782699fa14720e203b36 Mon Sep 17 00:00:00 2001
From: CraftBot <craftbot@craftbot.dev>
Date: Fri, 22 May 2026 14:11:18 +0900
Subject: [PATCH 4/7] include command as selectable too and tab to autocomplete
 function

---
 app/ui_layer/adapters/browser_adapter.py      |  32 ++++
 .../frontend/src/components/Chat/Chat.tsx     |  17 ++-
 .../ui/SlashCommandAutocomplete.module.css    |   3 +-
 .../ui/SlashCommandAutocomplete.tsx           | 139 ++++++++++++++++--
 .../frontend/src/components/ui/index.ts       |   1 +
 5 files changed, 175 insertions(+), 17 deletions(-)

diff --git a/app/ui_layer/adapters/browser_adapter.py b/app/ui_layer/adapters/browser_adapter.py
index ebdbfc38..e90f1419 100644
--- a/app/ui_layer/adapters/browser_adapter.py
+++ b/app/ui_layer/adapters/browser_adapter.py
@@ -1586,6 +1586,10 @@ async def _handle_ws_message(self, data: Dict[str, Any], ws=None) -> None:
             env_value = data.get("value", "")
             await self._handle_mcp_update_env(name, env_key, env_value)
 
+        # Slash command list (for autocomplete)
+        elif msg_type == "command_list":
+            await self._handle_command_list()
+
         # Skill settings operations
         elif msg_type == "skill_list":
             await self._handle_skill_list()
@@ -4580,6 +4584,34 @@ async def _handle_mcp_update_env(self, name: str, env_key: str, env_value: str)
     # Skill Settings Handlers
     # ─────────────────────────────────────────────────────────────────────
 
+    async def _handle_command_list(self) -> None:
+        """Get list of registered non-skill slash commands for autocomplete."""
+        try:
+            from app.ui_layer.commands.builtin.skill_invoke import SkillInvokeCommand
+
+            cmds = self._controller.command_registry.list_commands(include_hidden=False)
+            commands = [
+                {"name": c.name.lstrip("/"), "description": c.description}
+                for c in cmds
+                if not isinstance(c, SkillInvokeCommand)
+            ]
+            await self._broadcast({
+                "type": "command_list",
+                "data": {
+                    "success": True,
+                    "commands": commands,
+                },
+            })
+        except Exception as e:
+            await self._broadcast({
+                "type": "command_list",
+                "data": {
+                    "success": False,
+                    "error": str(e),
+                    "commands": [],
+                },
+            })
+
     async def _handle_skill_list(self) -> None:
         """Get list of all skills."""
         try:
diff --git a/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx b/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
index a43df95c..523af9d4 100644
--- a/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
+++ b/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
@@ -5,6 +5,7 @@ import { useVirtualizer } from '@tanstack/react-virtual'
 import { useWebSocket } from '../../contexts/WebSocketContext'
 import { useToast } from '../../contexts/ToastContext'
 import { Button, IconButton, SlashCommandAutocomplete, StatusIndicator } from '../ui'
+import type { SlashCommandAutocompleteHandle } from '../ui'
 import { useDerivedAgentStatus } from '../../hooks'
 import { ChatMessageItem } from '../../pages/Chat/ChatMessage'
 import styles from './Chat.module.css'
@@ -128,6 +129,7 @@ export function Chat({ livingUIId, placeholder, emptyMessage }: ChatProps) {
   const [isDragOver, setIsDragOver] = useState(false)
   const [previewAttachment, setPreviewAttachment] = useState<PendingAttachment | null>(null)
   const inputRef = useRef<HTMLTextAreaElement>(null)
+  const autocompleteRef = useRef<SlashCommandAutocompleteHandle>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
   // Voice input state
@@ -404,6 +406,12 @@ export function Chat({ livingUIId, placeholder, emptyMessage }: ChatProps) {
   }
 
   const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Tab' && !e.shiftKey) {
+      if (autocompleteRef.current?.handleTab()) {
+        e.preventDefault()
+        return
+      }
+    }
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault()
       handleSend()
@@ -728,7 +736,14 @@ export function Chat({ livingUIId, placeholder, emptyMessage }: ChatProps) {
             </div>
           )}
           
-          <SlashCommandAutocomplete input={input} onSelectSkill={(skill) => setInput(`/${skill}`)}></SlashCommandAutocomplete>
+          <SlashCommandAutocomplete
+            ref={autocompleteRef}
+            input={input}
+            onSelectItem={(name) => {
+              setInput(`/${name}`)
+              inputRef.current?.focus()
+            }}
+          />
           <textarea
             ref={inputRef}
             className={`${styles.input}${isListening ? ` ${styles.inputListening}` : ''}`}
diff --git a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.module.css b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.module.css
index 145e19fa..c0c819a0 100644
--- a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.module.css
+++ b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.module.css
@@ -54,7 +54,8 @@
     line-height: var(--leading-normal);
 }
 
-.item:hover {
+.item:hover,
+.itemSelected {
   color: var(--text-primary);
   background: var(--bg-tertiary);
   cursor: pointer;
diff --git a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
index 1bae7fe5..b2604f2e 100644
--- a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
+++ b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useMemo, useImperativeHandle, forwardRef } from 'react'
 import { useSettingsWebSocket } from '@/pages/Settings/useSettingsWebSocket';
-import { ActivitySquare } from 'lucide-react'
+import { ActivitySquare, Terminal } from 'lucide-react'
 import styles from './SlashCommandAutocomplete.module.css';
 
 interface SkillConfig {
@@ -12,40 +12,149 @@ interface SkillConfig {
   source: string
 }
 
+interface CommandConfig {
+  name: string
+  description: string
+}
+
+type ItemKind = 'command' | 'skill'
+
+interface AutocompleteItem {
+  name: string
+  kind: ItemKind
+}
+
+export interface SlashCommandAutocompleteHandle {
+  /**
+   * Handle a Tab keypress from the parent input.
+   * - When 1 item is visible: commits it via `onSelectItem` and returns true.
+   * - When >1 items are visible: cycles the highlighted index and returns true.
+   * - When no items are visible: returns false so the caller can do nothing / fall through.
+   */
+  handleTab: () => boolean
+  isOpen: () => boolean
+}
+
 interface SlashCommandProps {
     input: string;
-    onSelectSkill: (skill: string) => void;
+    onSelectItem: (name: string) => void;
 }
 
-export function SlashCommandAutocomplete({ input, onSelectSkill }: SlashCommandProps) {
+export const SlashCommandAutocomplete = forwardRef<SlashCommandAutocompleteHandle, SlashCommandProps>(
+  function SlashCommandAutocomplete({ input, onSelectItem }, ref) {
     const [skills, setSkills] = useState<string[]>([]);
+    const [commands, setCommands] = useState<string[]>([]);
+    const [selectedIndex, setSelectedIndex] = useState<number>(0);
 
     const { send, onMessage, isConnected } = useSettingsWebSocket()
+
     useEffect(() => {
         if (!isConnected) return;
 
-        const cleanup = onMessage('skill_list', (data: unknown) => {
-            const d = data as { success: boolean; skills?: SkillConfig[]; total?: number; enabled?: number; error?: string }
+        const cleanupSkills = onMessage('skill_list', (data: unknown) => {
+            const d = data as { success: boolean; skills?: SkillConfig[]; error?: string }
             if (d.success && d.skills) {
                 const userInvocable = d.skills.filter(s => s.enabled)
                 setSkills(userInvocable.map(s => s.name))
             }
         })
 
+        const cleanupCommands = onMessage('command_list', (data: unknown) => {
+            const d = data as { success: boolean; commands?: CommandConfig[]; error?: string }
+            if (d.success && d.commands) {
+                setCommands(d.commands.map(c => c.name))
+            }
+        })
+
         send('skill_list')
-        return cleanup
+        send('command_list')
+
+        return () => {
+            cleanupSkills()
+            cleanupCommands()
+        }
     }, [isConnected, send, onMessage])
 
-    const filteredSkills = input[0] === '/' ? skills.filter(item => item.includes(input.slice(1))) : []
-    
-    if (filteredSkills.length > 0) return (
+    const query = input[0] === '/' ? input.slice(1).toLowerCase() : null
+
+    const { filteredCommands, filteredSkills, flatItems } = useMemo(() => {
+        if (query === null) {
+            return { filteredCommands: [], filteredSkills: [], flatItems: [] as AutocompleteItem[] }
+        }
+        const fc = commands.filter(item => item.toLowerCase().includes(query))
+        const fs = skills.filter(item => item.toLowerCase().includes(query))
+        const flat: AutocompleteItem[] = [
+            ...fc.map<AutocompleteItem>(name => ({ name, kind: 'command' })),
+            ...fs.map<AutocompleteItem>(name => ({ name, kind: 'skill' })),
+        ]
+        return { filteredCommands: fc, filteredSkills: fs, flatItems: flat }
+    }, [query, commands, skills])
+
+    // Reset / clamp the selected index whenever the visible list changes.
+    useEffect(() => {
+        if (flatItems.length === 0) {
+            if (selectedIndex !== 0) setSelectedIndex(0)
+            return
+        }
+        if (selectedIndex >= flatItems.length) {
+            setSelectedIndex(0)
+        }
+    }, [flatItems.length, selectedIndex])
+
+    useImperativeHandle(ref, () => ({
+        handleTab: () => {
+            if (flatItems.length === 0) return false
+            if (flatItems.length === 1) {
+                onSelectItem(flatItems[0].name)
+                return true
+            }
+            setSelectedIndex(prev => (prev + 1) % flatItems.length)
+            return true
+        },
+        isOpen: () => flatItems.length > 0,
+    }), [flatItems, onSelectItem])
+
+    if (flatItems.length === 0) return null
+
+    let runningIndex = 0
+    return (
         <div>
             <ul className={styles.autocomplete}>
-                <p className={styles.header}><ActivitySquare size={12}></ActivitySquare>Skills</p>
-                {filteredSkills.map((item, index) => (
-                    <li key={index} className={styles.item} onClick={() => onSelectSkill(item)}>/{item}</li>
-                ))}
+                {filteredCommands.length > 0 && (
+                    <>
+                        <p className={styles.header}><Terminal size={12} />Commands</p>
+                        {filteredCommands.map((item) => {
+                            const idx = runningIndex++
+                            const isSelected = idx === selectedIndex
+                            return (
+                                <li
+                                    key={`cmd-${item}`}
+                                    className={`${styles.item}${isSelected ? ` ${styles.itemSelected}` : ''}`}
+                                    onClick={() => onSelectItem(item)}
+                                    onMouseEnter={() => setSelectedIndex(idx)}
+                                >/{item}</li>
+                            )
+                        })}
+                    </>
+                )}
+                {filteredSkills.length > 0 && (
+                    <>
+                        <p className={styles.header}><ActivitySquare size={12} />Skills</p>
+                        {filteredSkills.map((item) => {
+                            const idx = runningIndex++
+                            const isSelected = idx === selectedIndex
+                            return (
+                                <li
+                                    key={`skill-${item}`}
+                                    className={`${styles.item}${isSelected ? ` ${styles.itemSelected}` : ''}`}
+                                    onClick={() => onSelectItem(item)}
+                                    onMouseEnter={() => setSelectedIndex(idx)}
+                                >/{item}</li>
+                            )
+                        })}
+                    </>
+                )}
             </ul>
         </div>
     );
-}
\ No newline at end of file
+})
diff --git a/app/ui_layer/browser/frontend/src/components/ui/index.ts b/app/ui_layer/browser/frontend/src/components/ui/index.ts
index a64cc881..8b54573d 100644
--- a/app/ui_layer/browser/frontend/src/components/ui/index.ts
+++ b/app/ui_layer/browser/frontend/src/components/ui/index.ts
@@ -21,3 +21,4 @@ export { SkillCreatorModal } from './SkillCreatorModal'
 export type { SkillCreatorModalProps, SkillCreatorMode, SkillCreatorSubmit } from './SkillCreatorModal'
 
 export { SlashCommandAutocomplete } from './SlashCommandAutocomplete'
+export type { SlashCommandAutocompleteHandle } from './SlashCommandAutocomplete'

From 37472ca9d2c08865acaf958135cb6e359c80b538 Mon Sep 17 00:00:00 2001
From: Tobias Garcia <iguana3000tg@gmail.com>
Date: Fri, 22 May 2026 15:39:27 +0900
Subject: [PATCH 5/7] feat: add support for autocomplete to use Redux for
 commands and skills

---
 .../ui/SlashCommandAutocomplete.tsx           | 89 +++++++++----------
 .../frontend/src/contexts/SkillsContext.tsx   | 42 +++++++++
 .../browser/frontend/src/store/index.ts       |  2 +
 .../src/store/selectors/commandsSettings.ts   | 10 +++
 .../src/store/slices/commandsSettingsSlice.ts | 38 ++++++++
 5 files changed, 132 insertions(+), 49 deletions(-)
 create mode 100644 app/ui_layer/browser/frontend/src/contexts/SkillsContext.tsx
 create mode 100644 app/ui_layer/browser/frontend/src/store/selectors/commandsSettings.ts
 create mode 100644 app/ui_layer/browser/frontend/src/store/slices/commandsSettingsSlice.ts

diff --git a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
index b2604f2e..ea9bf1d0 100644
--- a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
+++ b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
@@ -2,20 +2,29 @@ import React, { useEffect, useState, useMemo, useImperativeHandle, forwardRef }
 import { useSettingsWebSocket } from '@/pages/Settings/useSettingsWebSocket';
 import { ActivitySquare, Terminal } from 'lucide-react'
 import styles from './SlashCommandAutocomplete.module.css';
-
-interface SkillConfig {
-  name: string
-  description: string
-  enabled: boolean
-  user_invocable: boolean
-  action_sets: string[]
-  source: string
-}
-
-interface CommandConfig {
-  name: string
-  description: string
-}
+import { useAppSelector } from '../../store/hooks';
+import {
+  selectSkillsHasLoaded,
+  selectEnabledSkillNames,
+} from '../../store/selectors/skillsSettings'
+import {
+  selectCommandNames,
+  selectCommandsHasLoaded,
+} from '../../store/selectors/commandsSettings'
+
+// interface SkillConfig {
+//   name: string
+//   description: string
+//   enabled: boolean
+//   user_invocable: boolean
+//   action_sets: string[]
+//   source: string
+// }
+
+// interface CommandConfig {
+//   name: string
+//   description: string
+// }
 
 type ItemKind = 'command' | 'skill'
 
@@ -42,38 +51,20 @@ interface SlashCommandProps {
 
 export const SlashCommandAutocomplete = forwardRef<SlashCommandAutocompleteHandle, SlashCommandProps>(
   function SlashCommandAutocomplete({ input, onSelectItem }, ref) {
-    const [skills, setSkills] = useState<string[]>([]);
-    const [commands, setCommands] = useState<string[]>([]);
     const [selectedIndex, setSelectedIndex] = useState<number>(0);
 
-    const { send, onMessage, isConnected } = useSettingsWebSocket()
-
-    useEffect(() => {
-        if (!isConnected) return;
-
-        const cleanupSkills = onMessage('skill_list', (data: unknown) => {
-            const d = data as { success: boolean; skills?: SkillConfig[]; error?: string }
-            if (d.success && d.skills) {
-                const userInvocable = d.skills.filter(s => s.enabled)
-                setSkills(userInvocable.map(s => s.name))
-            }
-        })
+    const skills = useAppSelector(selectEnabledSkillNames);
+    const hasLoaded = useAppSelector(selectSkillsHasLoaded);
+    const commands = useAppSelector(selectCommandNames);
+    const commandsHasLoaded = useAppSelector(selectCommandsHasLoaded);
+    const { send, isConnected } = useSettingsWebSocket()
 
-        const cleanupCommands = onMessage('command_list', (data: unknown) => {
-            const d = data as { success: boolean; commands?: CommandConfig[]; error?: string }
-            if (d.success && d.commands) {
-                setCommands(d.commands.map(c => c.name))
-            }
-        })
-
-        send('skill_list')
-        send('command_list')
-
-        return () => {
-            cleanupSkills()
-            cleanupCommands()
-        }
-    }, [isConnected, send, onMessage])
+  // Fetch only if no one else has loaded the data yet this session.
+  useEffect(() => {
+    if (!isConnected) return
+    if (!hasLoaded) send('skill_list')
+    if (!commandsHasLoaded) send('command_list')
+    }, [isConnected, hasLoaded, commandsHasLoaded, send])
 
     const query = input[0] === '/' ? input.slice(1).toLowerCase() : null
 
@@ -81,11 +72,11 @@ export const SlashCommandAutocomplete = forwardRef<SlashCommandAutocompleteHandl
         if (query === null) {
             return { filteredCommands: [], filteredSkills: [], flatItems: [] as AutocompleteItem[] }
         }
-        const fc = commands.filter(item => item.toLowerCase().includes(query))
-        const fs = skills.filter(item => item.toLowerCase().includes(query))
+        const fc = commands.filter((item: string) => item.toLowerCase().includes(query))
+        const fs = skills.filter((item: string) => item.toLowerCase().includes(query))
         const flat: AutocompleteItem[] = [
-            ...fc.map<AutocompleteItem>(name => ({ name, kind: 'command' })),
-            ...fs.map<AutocompleteItem>(name => ({ name, kind: 'skill' })),
+            ...fc.map<AutocompleteItem>((name: any) => ({ name, kind: 'command' })),
+            ...fs.map<AutocompleteItem>((name: any) => ({ name, kind: 'skill' })),
         ]
         return { filteredCommands: fc, filteredSkills: fs, flatItems: flat }
     }, [query, commands, skills])
@@ -123,7 +114,7 @@ export const SlashCommandAutocomplete = forwardRef<SlashCommandAutocompleteHandl
                 {filteredCommands.length > 0 && (
                     <>
                         <p className={styles.header}><Terminal size={12} />Commands</p>
-                        {filteredCommands.map((item) => {
+                        {filteredCommands.map((item: string) => {
                             const idx = runningIndex++
                             const isSelected = idx === selectedIndex
                             return (
@@ -140,7 +131,7 @@ export const SlashCommandAutocomplete = forwardRef<SlashCommandAutocompleteHandl
                 {filteredSkills.length > 0 && (
                     <>
                         <p className={styles.header}><ActivitySquare size={12} />Skills</p>
-                        {filteredSkills.map((item) => {
+                        {filteredSkills.map((item: string) => {
                             const idx = runningIndex++
                             const isSelected = idx === selectedIndex
                             return (
diff --git a/app/ui_layer/browser/frontend/src/contexts/SkillsContext.tsx b/app/ui_layer/browser/frontend/src/contexts/SkillsContext.tsx
new file mode 100644
index 00000000..29ae6df8
--- /dev/null
+++ b/app/ui_layer/browser/frontend/src/contexts/SkillsContext.tsx
@@ -0,0 +1,42 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+import { useSettingsWebSocket } from '@/pages/Settings/useSettingsWebSocket'
+
+export interface SkillConfig {
+  name: string
+  description: string
+  enabled: boolean
+  user_invocable: boolean
+  action_sets: string[]
+  source: string
+}
+
+interface SkillsContextValue {
+  skills: string[]
+}
+
+const SkillsContext = createContext<SkillsContextValue>({ skills: [] })
+
+export function SkillsProvider({ children }: { children: React.ReactNode }) {
+  const { send, onMessage, isConnected } = useSettingsWebSocket()
+  const [skills, setSkills] = useState<string[]>([])
+
+  useEffect(() => {
+    if (!isConnected) return
+
+    const cleanup = onMessage('skill_list', (data: unknown) => {
+      const d = data as { success: boolean; skills?: SkillConfig[]; error?: string }
+      if (d.success && d.skills) {
+        setSkills(d.skills.filter(s => s.user_invocable).map(s => s.name))
+      }
+    })
+
+    send('skill_list')
+    return cleanup
+  }, [isConnected, send, onMessage])
+
+  return <SkillsContext.Provider value={{ skills }}>{children}</SkillsContext.Provider>
+}
+
+export function useSkills() {
+  return useContext(SkillsContext)
+}
diff --git a/app/ui_layer/browser/frontend/src/store/index.ts b/app/ui_layer/browser/frontend/src/store/index.ts
index 1a089d48..b3bfebc1 100644
--- a/app/ui_layer/browser/frontend/src/store/index.ts
+++ b/app/ui_layer/browser/frontend/src/store/index.ts
@@ -11,6 +11,7 @@ import workspaceReducer from './slices/workspaceSlice'
 import mcpSettingsReducer from './slices/mcpSettingsSlice'
 import memorySettingsReducer from './slices/memorySettingsSlice'
 import skillsSettingsReducer from './slices/skillsSettingsSlice'
+import commandsSettingsReducer from './slices/commandsSettingsSlice'
 import proactiveSettingsReducer from './slices/proactiveSettingsSlice'
 import livingUiSettingsReducer from './slices/livingUiSettingsSlice'
 import generalSettingsReducer from './slices/generalSettingsSlice'
@@ -32,6 +33,7 @@ export const store = configureStore({
     mcpSettings: mcpSettingsReducer,
     memorySettings: memorySettingsReducer,
     skillsSettings: skillsSettingsReducer,
+    commandsSettings: commandsSettingsReducer,
     proactiveSettings: proactiveSettingsReducer,
     livingUiSettings: livingUiSettingsReducer,
     generalSettings: generalSettingsReducer,
diff --git a/app/ui_layer/browser/frontend/src/store/selectors/commandsSettings.ts b/app/ui_layer/browser/frontend/src/store/selectors/commandsSettings.ts
new file mode 100644
index 00000000..8f584b39
--- /dev/null
+++ b/app/ui_layer/browser/frontend/src/store/selectors/commandsSettings.ts
@@ -0,0 +1,10 @@
+import { createSelector } from '@reduxjs/toolkit'
+import type { RootState } from '../index'
+
+export const selectCommands = (state: RootState) => state.commandsSettings.commands
+export const selectCommandsHasLoaded = (state: RootState) => state.commandsSettings.hasLoaded
+
+export const selectCommandNames = createSelector(
+  selectCommands,
+  (commands) => commands.map(c => c.name),
+)
diff --git a/app/ui_layer/browser/frontend/src/store/slices/commandsSettingsSlice.ts b/app/ui_layer/browser/frontend/src/store/slices/commandsSettingsSlice.ts
new file mode 100644
index 00000000..958f2667
--- /dev/null
+++ b/app/ui_layer/browser/frontend/src/store/slices/commandsSettingsSlice.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { register } from '../socket/messageRegistry'
+
+export interface CommandConfig {
+  name: string
+  description: string
+}
+
+interface CommandsSettingsState {
+  commands: CommandConfig[]
+  hasLoaded: boolean
+}
+
+const initialState: CommandsSettingsState = {
+  commands: [],
+  hasLoaded: false,
+}
+
+const commandsSettingsSlice = createSlice({
+  name: 'commandsSettings',
+  initialState,
+  reducers: {
+    setCommands(state, action: PayloadAction<CommandConfig[]>) {
+      state.commands = action.payload
+      state.hasLoaded = true
+    },
+  },
+})
+
+export const { setCommands } = commandsSettingsSlice.actions
+export default commandsSettingsSlice.reducer
+
+register('command_list', (data, dispatch) => {
+  const d = data as { success: boolean; commands?: CommandConfig[] }
+  if (d.success && d.commands) {
+    dispatch(setCommands(d.commands))
+  }
+})

From 1a7c015b9141d9d1739a1e8aacbb5d1b36e4e8ca Mon Sep 17 00:00:00 2001
From: Tobias Garcia <iguana3000tg@gmail.com>
Date: Mon, 25 May 2026 09:45:24 +0900
Subject: [PATCH 6/7] feat: fixes for slash command autocomplete

---
 .../ui/SlashCommandAutocomplete.tsx           | 25 +++--------
 .../frontend/src/contexts/SkillsContext.tsx   | 42 -------------------
 2 files changed, 6 insertions(+), 61 deletions(-)
 delete mode 100644 app/ui_layer/browser/frontend/src/contexts/SkillsContext.tsx

diff --git a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
index ea9bf1d0..8fa008ae 100644
--- a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
+++ b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
@@ -12,20 +12,6 @@ import {
   selectCommandsHasLoaded,
 } from '../../store/selectors/commandsSettings'
 
-// interface SkillConfig {
-//   name: string
-//   description: string
-//   enabled: boolean
-//   user_invocable: boolean
-//   action_sets: string[]
-//   source: string
-// }
-
-// interface CommandConfig {
-//   name: string
-//   description: string
-// }
-
 type ItemKind = 'command' | 'skill'
 
 interface AutocompleteItem {
@@ -54,7 +40,8 @@ export const SlashCommandAutocomplete = forwardRef<SlashCommandAutocompleteHandl
     const [selectedIndex, setSelectedIndex] = useState<number>(0);
 
     const skills = useAppSelector(selectEnabledSkillNames);
-    const hasLoaded = useAppSelector(selectSkillsHasLoaded);
+    const skillsHasLoaded = useAppSelector(selectSkillsHasLoaded);
+    
     const commands = useAppSelector(selectCommandNames);
     const commandsHasLoaded = useAppSelector(selectCommandsHasLoaded);
     const { send, isConnected } = useSettingsWebSocket()
@@ -62,9 +49,9 @@ export const SlashCommandAutocomplete = forwardRef<SlashCommandAutocompleteHandl
   // Fetch only if no one else has loaded the data yet this session.
   useEffect(() => {
     if (!isConnected) return
-    if (!hasLoaded) send('skill_list')
+    if (!skillsHasLoaded) send('skill_list')
     if (!commandsHasLoaded) send('command_list')
-    }, [isConnected, hasLoaded, commandsHasLoaded, send])
+    }, [isConnected, skillsHasLoaded, commandsHasLoaded, send])
 
     const query = input[0] === '/' ? input.slice(1).toLowerCase() : null
 
@@ -75,8 +62,8 @@ export const SlashCommandAutocomplete = forwardRef<SlashCommandAutocompleteHandl
         const fc = commands.filter((item: string) => item.toLowerCase().includes(query))
         const fs = skills.filter((item: string) => item.toLowerCase().includes(query))
         const flat: AutocompleteItem[] = [
-            ...fc.map<AutocompleteItem>((name: any) => ({ name, kind: 'command' })),
-            ...fs.map<AutocompleteItem>((name: any) => ({ name, kind: 'skill' })),
+            ...fc.map<AutocompleteItem>((name: string) => ({ name, kind: 'command' })),
+            ...fs.map<AutocompleteItem>((name: string) => ({ name, kind: 'skill' })),
         ]
         return { filteredCommands: fc, filteredSkills: fs, flatItems: flat }
     }, [query, commands, skills])
diff --git a/app/ui_layer/browser/frontend/src/contexts/SkillsContext.tsx b/app/ui_layer/browser/frontend/src/contexts/SkillsContext.tsx
deleted file mode 100644
index 29ae6df8..00000000
--- a/app/ui_layer/browser/frontend/src/contexts/SkillsContext.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { createContext, useContext, useEffect, useState } from 'react'
-import { useSettingsWebSocket } from '@/pages/Settings/useSettingsWebSocket'
-
-export interface SkillConfig {
-  name: string
-  description: string
-  enabled: boolean
-  user_invocable: boolean
-  action_sets: string[]
-  source: string
-}
-
-interface SkillsContextValue {
-  skills: string[]
-}
-
-const SkillsContext = createContext<SkillsContextValue>({ skills: [] })
-
-export function SkillsProvider({ children }: { children: React.ReactNode }) {
-  const { send, onMessage, isConnected } = useSettingsWebSocket()
-  const [skills, setSkills] = useState<string[]>([])
-
-  useEffect(() => {
-    if (!isConnected) return
-
-    const cleanup = onMessage('skill_list', (data: unknown) => {
-      const d = data as { success: boolean; skills?: SkillConfig[]; error?: string }
-      if (d.success && d.skills) {
-        setSkills(d.skills.filter(s => s.user_invocable).map(s => s.name))
-      }
-    })
-
-    send('skill_list')
-    return cleanup
-  }, [isConnected, send, onMessage])
-
-  return <SkillsContext.Provider value={{ skills }}>{children}</SkillsContext.Provider>
-}
-
-export function useSkills() {
-  return useContext(SkillsContext)
-}

From 2b8e0c5f6b80201ec34db6fd63a3d6f5c0b804a9 Mon Sep 17 00:00:00 2001
From: Tobias Garcia <iguana3000tg@gmail.com>
Date: Mon, 25 May 2026 12:26:48 +0900
Subject: [PATCH 7/7] feat: scroll autocomplete dashboard using up/down arrow
 keys and better autocomplete using tab/enter keys

---
 .../frontend/src/components/Chat/Chat.tsx     | 19 +++++++++++
 .../ui/SlashCommandAutocomplete.tsx           | 34 +++++++++++++++----
 2 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx b/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
index 523af9d4..f0029971 100644
--- a/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
+++ b/app/ui_layer/browser/frontend/src/components/Chat/Chat.tsx
@@ -412,8 +412,23 @@ export function Chat({ livingUIId, placeholder, emptyMessage }: ChatProps) {
         return
       }
     }
+    if (e.key === 'ArrowUp') {
+      if (autocompleteRef.current?.handleUpArrow()) {
+        e.preventDefault()
+        return
+      }
+    }
+    if (e.key === 'ArrowDown') {
+      if (autocompleteRef.current?.handleDownArrow()) {
+        e.preventDefault()
+        return
+      }
+    }
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault()
+      if (autocompleteRef.current?.handleEnter()) {
+        return
+      }
       handleSend()
     } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
       const history = inputHistoryRef.current
@@ -430,6 +445,10 @@ export function Chat({ livingUIId, placeholder, emptyMessage }: ChatProps) {
         setInput(history[historyIndexRef.current])
       } else if (e.key === 'ArrowDown') {
         e.preventDefault()
+        if (autocompleteRef.current?.handleDownArrow()) {
+          e.preventDefault()
+          return
+        }
         if (historyIndexRef.current === -1) return
         if (historyIndexRef.current < history.length - 1) {
           historyIndexRef.current++
diff --git a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
index 8fa008ae..6abb41fb 100644
--- a/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
+++ b/app/ui_layer/browser/frontend/src/components/ui/SlashCommandAutocomplete.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo, useImperativeHandle, forwardRef } from 'react'
+import React, { useEffect, useRef, useState, useMemo, useImperativeHandle, forwardRef } from 'react'
 import { useSettingsWebSocket } from '@/pages/Settings/useSettingsWebSocket';
 import { ActivitySquare, Terminal } from 'lucide-react'
 import styles from './SlashCommandAutocomplete.module.css';
@@ -27,6 +27,9 @@ export interface SlashCommandAutocompleteHandle {
    * - When no items are visible: returns false so the caller can do nothing / fall through.
    */
   handleTab: () => boolean
+  handleUpArrow: () => boolean
+  handleDownArrow: () => boolean
+  handleEnter: () => boolean
   isOpen: () => boolean
 }
 
@@ -38,6 +41,7 @@ interface SlashCommandProps {
 export const SlashCommandAutocomplete = forwardRef<SlashCommandAutocompleteHandle, SlashCommandProps>(
   function SlashCommandAutocomplete({ input, onSelectItem }, ref) {
     const [selectedIndex, setSelectedIndex] = useState<number>(0);
+    const itemRefs = useRef<(HTMLLIElement | null)[]>([])
 
     const skills = useAppSelector(selectEnabledSkillNames);
     const skillsHasLoaded = useAppSelector(selectSkillsHasLoaded);
@@ -68,6 +72,10 @@ export const SlashCommandAutocomplete = forwardRef<SlashCommandAutocompleteHandl
         return { filteredCommands: fc, filteredSkills: fs, flatItems: flat }
     }, [query, commands, skills])
 
+    useEffect(() => {
+        itemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })
+    }, [selectedIndex])
+
     // Reset / clamp the selected index whenever the visible list changes.
     useEffect(() => {
         if (flatItems.length === 0) {
@@ -82,15 +90,27 @@ export const SlashCommandAutocomplete = forwardRef<SlashCommandAutocompleteHandl
     useImperativeHandle(ref, () => ({
         handleTab: () => {
             if (flatItems.length === 0) return false
-            if (flatItems.length === 1) {
-                onSelectItem(flatItems[0].name)
-                return true
-            }
+            onSelectItem(flatItems[selectedIndex].name)
+            return true
+        },
+        handleUpArrow: () => {
+            if (flatItems.length === 0 || flatItems.length === 1) return false
+            setSelectedIndex(prev => (prev - 1 + flatItems.length) % flatItems.length)
+            return true
+        },
+        handleDownArrow: () => {
+            if (flatItems.length === 0 || flatItems.length === 1) return false
             setSelectedIndex(prev => (prev + 1) % flatItems.length)
             return true
         },
+        handleEnter: () => {
+            if (flatItems.length === 0) return false
+            if (input.toLowerCase() === `/${flatItems[selectedIndex].name}`) return false
+            onSelectItem(flatItems[selectedIndex].name)
+            return true
+        },
         isOpen: () => flatItems.length > 0,
-    }), [flatItems, onSelectItem])
+    }), [flatItems, onSelectItem, selectedIndex])
 
     if (flatItems.length === 0) return null
 
@@ -107,6 +127,7 @@ export const SlashCommandAutocomplete = forwardRef<SlashCommandAutocompleteHandl
                             return (
                                 <li
                                     key={`cmd-${item}`}
+                                    ref={el => { itemRefs.current[idx] = el }}
                                     className={`${styles.item}${isSelected ? ` ${styles.itemSelected}` : ''}`}
                                     onClick={() => onSelectItem(item)}
                                     onMouseEnter={() => setSelectedIndex(idx)}
@@ -124,6 +145,7 @@ export const SlashCommandAutocomplete = forwardRef<SlashCommandAutocompleteHandl
                             return (
                                 <li
                                     key={`skill-${item}`}
+                                    ref={el => { itemRefs.current[idx] = el }}
                                     className={`${styles.item}${isSelected ? ` ${styles.itemSelected}` : ''}`}
                                     onClick={() => onSelectItem(item)}
                                     onMouseEnter={() => setSelectedIndex(idx)}