better context selection

Author: cyclotruc

app/static/js/workspace_manager.js

@@ -342,7 +342,13 @@ class WorkspaceManager {
         Object.values(this.contexts).forEach(ctx => {
             const option = document.createElement('option');
             option.value = ctx.id;
-            option.textContent = ctx.name;
+            // Truncate long names to fit the dropdown
+            let displayName = ctx.name;
+            if (displayName.length > 25) {
+                displayName = displayName.substring(0, 22) + '...';
+            }
+            option.textContent = displayName;
+            option.title = ctx.name; // Show full name on hover
             option.selected = ctx.id === this.currentContextId;
             contextSwitcher.appendChild(option);
         });

app/templates/components/workspace_files.html

@@ -34,18 +34,20 @@ <h3 class="text-lg font-black text-black">Files</h3>
     <!-- Context selector relocated here -->
     <div class="mt-4 pt-4 border-t-2 border-black">
         <div class="flex flex-col gap-2">
-            <label class="text-sm font-bold text-black">Context:</label>
-            <div class="flex gap-1">
-                <select id="context-switcher" class="flex-1 px-2 py-1 bg-white border-2 border-black text-black font-medium shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] focus:outline-none focus:ring-2 focus:ring-cyan-400 text-sm">
-                    <!-- Options will be populated dynamically -->
-                </select>
-                <button id="new-context-btn" class="px-2 py-1 bg-pink-400 border-2 border-black text-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all text-sm" title="New Context">
-                    +
-                </button>
-                <button id="delete-context-btn" class="px-2 py-1 bg-red-400 border-2 border-black text-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all text-sm" title="Delete Context">
-                    ×
-                </button>
+            <div class="flex justify-between items-center mb-1">
+                <label class="text-sm font-black text-black">CONTEXT</label>
+                <div class="flex gap-1">
+                    <button id="new-context-btn" class="w-6 h-6 bg-pink-400 border-2 border-black text-black font-bold flex items-center justify-center shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all" title="New Context">
+                        <span class="text-xs">+</span>
+                    </button>
+                    <button id="delete-context-btn" class="w-6 h-6 bg-red-400 border-2 border-black text-black font-bold flex items-center justify-center shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all" title="Delete Context">
+                        <span class="text-xs">×</span>
+                    </button>
+                </div>
             </div>
+            <select id="context-switcher" class="w-full px-2 py-2 bg-white border-2 border-black text-black font-medium shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] focus:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] focus:translate-x-[-1px] focus:translate-y-[-1px] focus:outline-none text-xs truncate transition-all appearance-none bg-no-repeat" style="background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3e%3cpath fill=%22%23000000%22 d=%22M7 10l5 5 5-5z%22/%3e%3c/svg%3e'); background-position: right 0.5rem center; background-size: 1.5em 1.5em; padding-right: 2rem;">
+                <!-- Options will be populated dynamically -->
+            </select>
         </div>
     </div>
 </div>