UX Paper Cuts 16.1 → AI Experiments UI Polish

Background

We have several AI features in Experiment phase; how can UX Paper Cuts help get these features to Beta (or if they're in Beta, add any additional fixes for GA)?

Features & possible enhancements

Code suggestions

- Currently only in VSCode; needs to be available in other IDEs (might be beyond our scope)

Valerie: I'm removing Code Suggestions from our scope this milestone. Alex will be invested in getting this into other IDEs. We may be able to pick up polish items in later milestones.

GitLab chat

• Help button on bottom left screen, drawer comes in from right
• Drawer empty state: GitLab Chat: Adding empty state (!121703 - merged)
• Increase height of text field: GitLab Chat: Add ability to change height of input (!121238 - merged)
• Send button has an icon
• “What is a fork?” links to current page: Draft: GitLab Chat: Fix what is a fork url (!121244 - closed)
• Maybe we could add avatar to your own messages, tanuki logo for GitLab responses
• Make it more chat bubble-y: Make small updates to GitLab chat UI (!121193 - merged) & GitLab Chat: Improve chat message appearance (!121245 - merged)
• Update layout of response (links etc): GitLab Chat: Change alignment of sources (!121688 - merged)
• Look at other chatbot examples
• Consider better example questions, based on current page
  • For example, if you're on an MR you might ask "Why is my pipeline failing?" If you're on an issue, maybe "How do I add this to an epic?"
• Use better loader indicator instead of spinner: GitLab Chat: Change loading animation of AI rep... (!121255 - merged)
• Drawer appears full-height, instead of below breadcrumbs (check what it's supposed to do)

Explain code

• Double border below warning alert
• Does the warning alert need to be so long? 🤔 (check with legal)
• Highlight line of code in blob so you don't lose track of it: Code explanation: Highlight selected code lines (!121830 - merged)
• Potentially re-word (?) tooltip

Refactor code

Explain vulnerability

• Drawer is fixed below breadcrumbs (check if it's supposed to do this or be full-height)
• Use skeleton loader instead of spinner
• Headers have permalink actions on hover but don't actually work
• "This is generated by AI" is different than code explanation
• Is the blue alert on the vulnerability page the best way to highlight the feature?

Summarize comments & threads

• Tooltip gets stuck
• Could the Experimental badge be different? Maybe an icon?
• Empty state when loading
• Button still clickable after summary finishes loading
• Maybe move up Only visible to you info

Create description

Summarize MR changes

Suggest test cases

• Uses skeleton loader
• Drawer height
• Generate test with AI doesn't have Experiment badge

Shared issues

• Drawer styling should be uniform
• Could we alert users to the Look at this AI feature a different, consistent way? Is there an icon or unique type of alert?
• Experiment badge is inconsistent (small/default/blue/gray)

Assigning MRs for Review

MR Reviews for AI initiatives are being handled differently than other MRs. Please use the table below to identify the team DRIs per initiative so we get the right individuals to review. Dev MR reviews are based on the team. UX MR Reviews are done by the UX Paper Cuts team and an @ mention of the Design DRI for awareness.

Engineering allocation

AI Initiative	Team DRI	Design DRI
Code Suggestions	ModelOps/AI Assisted	@katiemacoy
GitLab Chat	AI Enablement	@katiemacoy
Explain Code	Code Review	@katiemacoy
Refactor Code	AI Enablement	@katiemacoy
Explain Vulnerability	Threat Insights	@beckalippert
Resolve Vulnerability	Threat Insights	@beckalippert
Summarize Comments & Threads	Plan	@lvanc
Create Description	Plan	@lvanc
Summarize MR Changes	Code Review	@afracazo
Suggest Test Cases	AI Enablement	@katiemacoy

Feature flags

 :openai_experimentation
 :tanuki_bot
 :explain_code_chat
 :explain_code_snippet
 :ai_experimentation_api
 :ai_related_settings
 :tofa_experimentation_main_flag
 :anthropic_experimentation
 :explain_code
 :generate_test_file_flag
 :search_issue_label_aggregation
 :summarize_notes
 :summarize_comments
 :generate_description_ai
 :explain_vulnerability