niko/claude-web-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add dynamic slash commands from Claude with UI improvements

Browse Source 
- Load available commands from Claude at session start (control_initialized event)
- Display commands in autocomplete dropdown with search in name and description
- Group commands into "UI Commands" and "Claude Commands" sections
- Shorten display names by removing common prefixes (taches-cc-resources:, claude-mem:)
- Blacklist TUI-only commands (vim, terminal-setup, ide, etc.)
- Add max-height with scrollbar for long command lists
- Implement auto-scroll to keep selected command visible during keyboard navigation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Support
2025-12-19 06:58:05 +01:00
parent f133ad0576
commit 6df37b8a08
9 changed files with 248 additions and 585 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
backend/public/assets/index-4MVeF-MR.css
View File

File diff suppressed because one or more lines are too long

243
backend/public/assets/index-D5ZTFezh.js → backend/public/assets/index-CEBB4MNK.js
View File

File diff suppressed because one or more lines are too long

431
backend/public/assets/index-DmNT3Myo.js
View File

File diff suppressed because one or more lines are too long

1
backend/public/assets/index-hrmZ3Zk6.css Normal file
View File

File diff suppressed because one or more lines are too long

4
backend/public/index.html
View File

@@ -5,8 +5,8 @@
<link rel="icon" type="image/svg+xml" href="/claude.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Claude Web UI</title>
<script type="module" crossorigin src="/assets/index-DmNT3Myo.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-4MVeF-MR.css">
<script type="module" crossorigin src="/assets/index-CEBB4MNK.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-hrmZ3Zk6.css">
</head>
<body class="bg-dark-950 text-dark-100">
<div id="root"></div>

1
backend/server.js
View File

@@ -806,6 +806,7 @@ wss.on('connection', async (ws, req) => {
if (pending.type === 'initialize') {
isInitialized = true;
console.log(`[${sessionId}] Control protocol initialized`);
console.log(`[${sessionId}] Available commands:`, JSON.stringify(response.response?.commands, null, 2));
// Send available commands/models to frontend
sendToClient('control_initialized', {
commands: response.response?.commands,