feat(dashboard): wire skills autocomplete configuration to session cards

Connect the skills enumeration API to session card input fields for
slash command autocomplete:

App.js:
- Add skillsConfig state for Claude and Codex skill configs
- Fetch skills for both agent types on mount using Promise.all
- Pass agent-appropriate autocompleteConfig to each SessionCard

SessionCard.js:
- Accept autocompleteConfig prop and forward to SimpleInput
- Move context usage display from header to footer status bar for
  better information hierarchy (activity indicator + context together)

SimpleInput.js:
- Fix autocomplete dropdown padding (py-2 -> py-1.5)
- Fix font inheritance (add font-mono to skill name)
- Fix description tooltip whitespace handling (add font-sans,
  whitespace-normal)

SpawnModal.js:
- Add SPAWN_TIMEOUT_MS (2x default) to handle pending spawn registry
  wait time plus session file confirmation polling

AgentActivityIndicator.js:
- Minor styling refinement for status display

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
teernisse
2026-02-28 00:47:49 -05:00
parent d3c6af9b00
commit fa1fe8613a
5 changed files with 43 additions and 18 deletions

View File

@@ -195,7 +195,7 @@ export function SimpleInput({ sessionId, status, onRespond, autocompleteConfig =
` : filteredSkills.map((skill, i) => html`
<div
key=${skill.name}
class="px-3 py-2 cursor-pointer text-sm transition-colors ${
class="group relative px-3 py-1.5 cursor-pointer text-sm font-mono transition-colors ${
i === selectedIndex
? 'bg-selection/50 text-bright'
: 'text-fg hover:bg-selection/25'
@@ -203,10 +203,12 @@ export function SimpleInput({ sessionId, status, onRespond, autocompleteConfig =
onClick=${() => insertSkill(skill)}
onMouseEnter=${() => setSelectedIndex(i)}
>
<div class="font-medium font-mono text-bright">
${autocompleteConfig.trigger}${skill.name}
</div>
<div class="text-micro text-dim truncate">${skill.description}</div>
${autocompleteConfig.trigger}${skill.name}
${i === selectedIndex && skill.description && html`
<div class="absolute left-full top-0 ml-2 w-64 px-2.5 py-1.5 rounded-md border border-selection/75 bg-surface shadow-lg text-micro text-dim font-sans whitespace-normal z-50">
${skill.description}
</div>
`}
</div>
`)}
</div>