feat(dashboard): add skill autocomplete server-side enumeration and client wiring

- Add SkillsMixin with _enumerate_claude_skills and _enumerate_codex_skills
- Claude: reads ~/.claude/skills/, parses YAML frontmatter for descriptions
- Codex: reads curated cache + ~/.codex/skills/ user directory
- Add /api/skills?agent= endpoint to HttpMixin
- Add fetchSkills() API helper in dashboard
- Wire autocomplete config through Modal -> SessionCard -> SimpleInput
- Add getTriggerInfo() for detecting trigger at valid positions

Closes: bd-3q1, bd-sv1, bd-3eu, bd-g9t, bd-30p, bd-1ba, bd-2n7, bd-3s3

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

dashboard/components/Modal.js

@@ -1,14 +1,29 @@
 import { html, useState, useEffect, useCallback } from '../lib/preact.js';
 import { SessionCard } from './SessionCard.js';
+import { fetchSkills } from '../utils/api.js';
 
 export function Modal({ session, conversations, onClose, onRespond, onFetchConversation, onDismiss }) {
   const [closing, setClosing] = useState(false);
+  const [autocompleteConfig, setAutocompleteConfig] = useState(null);
 
   // Reset closing state when session changes
   useEffect(() => {
     setClosing(false);
   }, [session?.session_id]);
 
+  // Load autocomplete skills when agent type changes
+  useEffect(() => {
+    if (!session) {
+      setAutocompleteConfig(null);
+      return;
+    }
+
+    const agent = session.agent || 'claude';
+    fetchSkills(agent)
+      .then(config => setAutocompleteConfig(config))
+      .catch(() => setAutocompleteConfig(null));
+  }, [session?.agent]);
+
   // Animated close handler
   const handleClose = useCallback(() => {
     setClosing(true);
@@ -54,6 +69,7 @@ export function Modal({ session, conversations, onClose, onRespond, onFetchConve
           onRespond=${onRespond}
           onDismiss=${onDismiss}
           enlarged=${true}
+          autocompleteConfig=${autocompleteConfig}
         />
       </div>
     </div>

dashboard/components/SessionCard.js

@@ -4,8 +4,9 @@ import { formatDuration, getContextUsageSummary } from '../utils/formatting.js';
 import { ChatMessages } from './ChatMessages.js';
 import { QuestionBlock } from './QuestionBlock.js';
 import { SimpleInput } from './SimpleInput.js';
+import { AgentActivityIndicator } from './AgentActivityIndicator.js';
 
-export function SessionCard({ session, onClick, conversation, onFetchConversation, onRespond, onDismiss, enlarged = false }) {
+export function SessionCard({ session, onClick, conversation, onFetchConversation, onRespond, onDismiss, enlarged = false, autocompleteConfig = null }) {
   const hasQuestions = session.pending_questions && session.pending_questions.length > 0;
   const statusMeta = getStatusMeta(session.status);
   const agent = session.agent === 'codex' ? 'codex' : 'claude';
@@ -144,8 +145,10 @@ export function SessionCard({ session, onClick, conversation, onFetchConversatio
         <${ChatMessages} messages=${conversation || []} status=${session.status} limit=${enlarged ? null : 20} />
       </div>
 
-      <!-- Card Footer (Input or Questions) -->
-      <div class="shrink-0 border-t border-selection/70 bg-bg/55 p-4">
+      <!-- Card Footer (Activity + Input/Questions) -->
+      <div class="shrink-0 border-t border-selection/70 bg-bg/55">
+        <${AgentActivityIndicator} session=${session} />
+        <div class="p-4">
         ${hasQuestions ? html`
           <${QuestionBlock}
             questions=${session.pending_questions}
@@ -158,8 +161,10 @@ export function SessionCard({ session, onClick, conversation, onFetchConversatio
             sessionId=${session.session_id}
             status=${session.status}
             onRespond=${onRespond}
+            autocompleteConfig=${autocompleteConfig}
           />
         `}
+        </div>
       </div>
     </div>
   `;

dashboard/components/SimpleInput.js

@@ -1,7 +1,7 @@
-import { html, useState, useRef } from '../lib/preact.js';
+import { html, useState, useRef, useCallback } from '../lib/preact.js';
 import { getStatusMeta } from '../utils/status.js';
 
-export function SimpleInput({ sessionId, status, onRespond }) {
+export function SimpleInput({ sessionId, status, onRespond, autocompleteConfig = null }) {
   const [text, setText] = useState('');
   const [focused, setFocused] = useState(false);
   const [sending, setSending] = useState(false);
@@ -9,6 +9,32 @@ export function SimpleInput({ sessionId, status, onRespond }) {
   const textareaRef = useRef(null);
   const meta = getStatusMeta(status);
 
+  // Detect if cursor is at a trigger position for autocomplete
+  const getTriggerInfo = useCallback((value, cursorPos) => {
+    // No config means no autocomplete
+    if (!autocompleteConfig) return null;
+
+    const { trigger } = autocompleteConfig;
+
+    // Find the start of the current "word" (after last whitespace before cursor)
+    let wordStart = cursorPos;
+    while (wordStart > 0 && !/\s/.test(value[wordStart - 1])) {
+      wordStart--;
+    }
+
+    // Check if word starts with this agent's trigger character
+    if (value[wordStart] === trigger) {
+      return {
+        trigger,
+        filterText: value.slice(wordStart + 1, cursorPos).toLowerCase(),
+        replaceStart: wordStart,
+        replaceEnd: cursorPos,
+      };
+    }
+
+    return null;
+  }, [autocompleteConfig]);
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     e.stopPropagation();