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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user