Add Claude Explain feature for AI-powered code explanations
This PR introduces Claude Explain, a new feature that provides AI-powered explanations of compiler output directly within Compiler Explorer.
Key features:
Claude Explain functionality:
- New explain view pane
- Explains compiler output with full context of source code and compilation output
- Configurable audience level and explanation type
- Response caching to improve performance and reduce API calls
- Usage statistics display showing requests used and token counts
User experience:
- Consent flow on first use explaining data handling and privacy
- AI disclaimer banner warning about potential LLM inaccuracies
- Respects "no-ai" directive in source code for users who don't want AI processing
Privacy and security:
- Data sent to Anthropic's Claude API as documented in privacy policy
- No data used for model training
- Clear consent required before first use
- Support for opting out via "no-ai" directive
The feature is marked as beta and can be enabled via configuration.
Co-authored-by: Claude <noreply@anthropic.com>
This PR completes the migration from Bootstrap 4 to Bootstrap 5.3.5
following the plan outlined in
[docs/Bootstrap5Migration.md](https://github.com/compiler-explorer/compiler-explorer/blob/mg/bootstrap5/docs/Bootstrap5Migration.md).
## Migration Process
We followed a phased approach as documented in the migration plan:
1. **Phase 1: Dependency Updates and Basic Setup**
- Updated Bootstrap from 4.6.2 to 5.3.5
- Added @popperjs/core dependency (replacing Popper.js)
- Updated Tom Select theme from bootstrap4 to bootstrap5
2. **Phase 2: Global CSS Class Migration**
- Updated directional utility classes (ml/mr → ms/me)
- Updated floating utility classes (float-left/right → float-start/end)
- Updated text alignment classes (text-left/right → text-start/end)
3. **Phase 3: HTML Attribute Updates**
- Updated data attributes to use Bootstrap 5 prefixes (data-bs-toggle,
data-bs-target, etc.)
- Fixed tab navigation issues
4. **Phase 4: JavaScript API Compatibility Layer**
- Created bootstrap-utils.ts compatibility layer
- Updated component initialization for modals, dropdowns, popovers, etc.
5. **Phase 5: Component Migration**
- Updated and tested specific components (modals, dropdowns, toasts,
etc.)
- Fixed styling issues in cards and button groups
6. **Phase 6: Form System Updates**
- Updated form control classes to Bootstrap 5 standards
- Updated checkbox/radio markup patterns
- Simplified input groups
7. **Phase 7: Navbar Structure Updates**
- Updated navbar structure with container-fluid
- Fixed responsive behavior
8. **Phase 8: SCSS Variables and Theming**
- Added custom CSS fixes for navbar alignment
- Verified theme compatibility
9. **Phase 9: Accessibility Improvements**
- Updated sr-only to visually-hidden
- Added proper ARIA attributes
- Enhanced screen reader support
## Key Changes
- No more jQuery dependency in Bootstrap 5
- New prefix for data attributes (data-bs-*)
- Improved accessibility with ARIA attributes
- Updated positioning classes (start/end instead of left/right)
- Simplified input group structure
## Test Plan
1. **Navigation Testing**
- Verify all dropdown menus open and close properly
- Test mobile menu responsiveness
- Check tab navigation in settings dialog
2. **Component Testing**
- Verify all modals open and close correctly (settings, share,
load/save)
- Test tooltips and popovers
- Check form controls in different dialogs
3. **Layout Testing**
- Test responsiveness on different screen sizes
- Verify proper alignment of elements
- Check dark mode compatibility
4. **Specific Features to Test**
- Compiler selection and options
- Share dialog functionality
- Settings dialog
- Tree view (IDE mode)
- Font selection dropdown
5. **Browser Testing**
- Test in Chrome, Firefox, Safari
- Test in mobile browsers
## Note on Further Improvements
After this migration is stable, we could consider Phase 12: removing
jQuery dependency entirely, as Bootstrap 5 no longer requires it. This
would be a separate effort.
---------
Co-authored-by: Claude <noreply@anthropic.com>
When a new pane (such as the LLVM IR view) is opened using a button in
the “Add new...” or “Add tool...” menu, the button is disabled. This can
be confusing when the pane is not visible (e. g. when it is in a tab in
the background), because it can also be interpreted as “this is not
supported“.
This PR adds an `[already open]` to the button when it is disabled.
Currently the clangir compiler is implemented by a special clang variant
whose compilation options list gets appended with `-Xclang -fclangir
-Xclang -emit-cir`. This introduces a problem: we no longer gets access
to its LLVM IR output and assembly output because `-emit-cir` is an
exclusive option.
This patch resolves this problem by introducing a new ClangIR pane,
similar to the LLVM IR pane or Rust MIR pane. A new output kind named
`ClangIR` is added to the "Add new..." drop down menu and it toggles the
ClangIR pane. This patch then removes `-Xclang -emit-cir` from the
options list of the clangir compiler. The clangir compiler will then
output assembly code just like other clang compilers. The removed
options will be added back when compiled from the ClangIR pane.
This prepares for future work that will reuse the opt pipeline view
outside of the LLVM ecosystem by renaming related components to remove
the LLVM prefix.
The pass dumper keep its LLVM prefix, as it is assumed this part is
likely to be customised for each compiler ecosystem.
The historical component name has been preserved in the component list
as an alias to keep old links working.
* Removed old code
* Base functionality
* Work on edge offsets
* Setup interval trees for edges
* linter things
* Formatting
* Added syntax highlighting
* Cleanup and simplification. Improved handling of direct dropdown edges.
* Basic zoom/pan
* Remove old blocks from output
* Fix distance calculation
* Added function selector
* Improved zoom behavior
* figue 8 logic
* Canvas scaling / repainting, updated colors
* Don't truncate output, also removed some console.logs
* Tweak to zoom system
* Replaced canvas stuff with svg
* Experimenting with adding shadows to edges
* Removed shadows, was causing problems. Improved how blocks with lots of incident edges are handled.
* Slightly improved edge system
* some work on implementing segment priority system from cutter
* Optimization to rendering process. I was worried the graph layout algorithm was causing the page to hang but it turns out it was adding elements to the page with +=
* Removed need for storing the previous segment
* refactor, splitting up some logic
* Cleaned up logic and got horizontal edges working better
* Remove vis-network dependency
* Updated package-lock, removed @import vis-network css stuff, added a todo for myself
* Cleaned up notes and error messages. Added comments. Clear the pane if there's no function to display
* Added layout time information, implemented .resize
* Light theme
* State work and bug fix for dragiing
* Re-dading lost dark theme changes
* Added jquery import
* Cleaned up console.logs
* Added basic block count
* Incorporated PR review comments; Fixed cypress (hopefully), added documentation, improved the dropdown, and fixed dropdown items not being cleared with an empty result.cfg
* Ran format
* Move popup views to their own file each
* Make simple monacopane mixin in templates
* Also extract templates to their files
Compiler got some mixin love too :)
* Also split templates to their own files
* More mixin love for more files
