feat: Add Web IDE integration to file explorer

[jeremyeder]

Summary

• Add "Open in Web IDE" button to file tree with hover visibility
• Support GitHub.dev for GitHub repositories
• Support GitLab Web IDE for GitLab repositories (including self-hosted instances like gitlab.cee.redhat.com)
• Auto-detect GitLab instance from repository URL (zero configuration needed)

Changes

• New utility: ide-urls.ts - Parses Git URLs (HTTPS/SSH) and generates IDE URLs
• FileTree component: Add hover-visible IDE button with external link icon
• RepoBrowser component: Thread repository context (repoUrl, currentBranch) to FileTree
• Zero infrastructure: Uses URL-based IDE redirects, no backend changes required

Implementation Details

• Supports HTTPS and SSH URL formats
• Handles .git suffix removal
• Automatically detects GitHub vs GitLab from URL
• Falls back to environment variable for GitLab instance if needed
• Opens IDE in new tab with security flags (noopener, noreferrer)

Test Plan

• TypeScript compilation passes
• Manual test: Hover over file in GitHub repository → IDE button appears
• Manual test: Click button → GitHub.dev opens in new tab
• Manual test: Test with GitLab.com repository
• Manual test: Test with GitLab CEE (self-hosted) repository
• Verify button only shows on hover (reduces UI clutter)
• Verify tooltip shows correct IDE name (GitHub.dev vs GitLab Web IDE)

🤖 Generated with Claude Code

[github-actions]

Claude Code Review

Summary

This PR adds Web IDE integration to the file explorer, along with significant backend SDK configuration infrastructure. The feature allows users to open files directly in GitHub.dev or GitLab Web IDE from the repository browser.

Main Components:

• Frontend: Web IDE button in file tree with URL generation utilities
• Backend: SDK configuration endpoints with database persistence (GORM)
• Documentation: Extensive SDK expert system and architecture diagrams

Overall Assessment: The Web IDE integration feature is well-implemented and follows frontend standards. However, the backend SDK configuration system has critical security and architecture violations that must be addressed before merge.

Issues by Severity

Blocker Issues

1. Backend SDK Config: Missing User Token Authentication

• File: components/backend/pkg/handlers/sdk_config.go
• Lines: 43-70, 74-114, 117-133
• Issue: All SDK configuration endpoints use c.GetString("user_id") from context WITHOUT validating user token via GetK8sClientsForRequest(c)
• Violation: CLAUDE.md Critical Rule Outcome: Reduce Refinement Time with agent System #1 - User Token Authentication Required
• Pattern: .claude/patterns/k8s-client-usage.md - Pattern 1
• Security Risk: Unauthenticated users could access/modify SDK configs if user_id is spoofed

2. Backend SDK Config: Wrong Architecture Pattern

• File: components/backend/pkg/handlers/sdk_config.go
• Issue: Uses GORM database for user configuration storage
• Violation: Platform uses Kubernetes Custom Resources for ALL configuration (see ProjectSettings CR)
• Architecture: This breaks the Kubernetes-native pattern established in CLAUDE.md
• Fix Required: Store SDK config in ProjectSettings CR spec.sdkConfiguration field, not a separate GORM database
• Impact: Introduces database dependency that doesn't exist elsewhere in the platform

3. Frontend: any Type Violation

• File: components/frontend/src/components/settings/SDKConfigurationPanel.tsx:320
• Code: onValueChange={(value: any) => ...}
• Violation: Frontend Development Standards - Critical Rule Outcome: Reduce Refinement Time with agent System #1 (Zero any Types)

Critical Issues

4. Backend SDK Config: Missing RBAC Validation

• File: components/backend/pkg/handlers/sdk_config.go:43-70
• Issue: No RBAC check before reading/writing SDK configuration
• Violation: Security Standards - RBAC Enforcement Pattern 1

5. Backend Content Handler: GitLab Token Not Used in All Git Operations

• File: components/backend/handlers/content.go:93-145
• Issue: getGitTokenForURL function exists but only used in ContentGitPush
• Impact: GitLab operations in other endpoints will fail or use wrong token

6. Frontend SDK Panel: No Error Handling for Failed Fetch

• File: components/frontend/src/components/settings/SDKConfigurationPanel.tsx:74-88
• Issue: loadConfiguration catches error but doesn't show user feedback
• Pattern Violation: Frontend standards require error states

7. Backend SDK Config: Test Function is Placeholder

• File: components/backend/pkg/handlers/sdk_config.go:265-269
• Code: // TODO: Implement actual MCP server connectivity test
• Impact: Users will see "connected" even if MCP server is unreachable

Major Issues

8. Frontend IDE Integration: Missing TypeScript Strict Null Checks

• File: components/frontend/src/utils/ide-urls.ts:12-53
• Issue: parseGitUrl returns RepoInfo | null but functions using it don't always check for null

9. Frontend File Tree: Prop Threading Could Use Context

• File: components/frontend/src/components/file-tree.tsx:66-70
• Better Pattern: Use React Context for repository information

10. Frontend SDK Panel: Manual Fetch Instead of React Query

• File: components/frontend/src/components/settings/SDKConfigurationPanel.tsx:78-88
• Violation: Frontend Critical Rule Epic: Data Source Integration #3 - React Query for ALL Data Operations

11. Documentation: Extensive Files Without Clear Integration Path

• Files: docs/sdk-expert/, docs/claude-agent-sdk/, .ambient/skills/claude-sdk-expert/*
• Issue: 2000+ lines of new documentation without clear links from main docs
• Impact: Discoverability problem

Positive Highlights

✅ Web IDE Integration Design:

• Clean separation of concerns: ide-urls.ts utility is pure, testable logic
• Supports both GitHub and GitLab with auto-detection
• Hover-only button reduces UI clutter
• Opens in new tab with security flags (noopener,noreferrer)

✅ Frontend Code Quality:

• File tree component follows Shadcn UI patterns consistently
• Proper use of TypeScript types (except one any violation)
• Good user experience with tooltips and visual feedback

✅ Git Provider Abstraction:

• types.DetectProvider pattern in backend is clean
• Multi-provider token selection function is reusable

✅ Documentation Depth:

• Comprehensive SDK documentation
• Clear architecture diagrams with Mermaid

✅ Security Awareness:

• Path traversal protection in content.go
• Token redaction patterns maintained
• Window.open security flags

Recommendations

Must Fix Before Merge (Blockers + Critical)

1. Backend SDK Config - Security Rewrite:

   • Add GetK8sClientsForRequest(c) to ALL endpoints
   • Add RBAC validation checks
   • Migrate from GORM to ProjectSettings CR
   • Reference: components/backend/handlers/sessions.go:180-226 for proper pattern

2. Frontend any Type: Fix line 320 type annotation

3. Git Token Consistency: Use getGitTokenForURL in all git operation handlers

4. Frontend Data Fetching: Convert manual fetch to React Query hooks

Recommended Improvements

5. Testing: Add unit tests for ide-urls.ts and SDK config validation

6. Documentation: Link new SDK docs from main navigation

7. Code Organization: Move SDK config to components/backend/handlers/settings.go

Security Review Summary

Authentication: ❌ Missing user token validation (BLOCKER)
Authorization: ❌ Missing RBAC checks (CRITICAL)
Token Handling: ✅ Good token redaction patterns
Input Validation: ✅ Path traversal protection
Container Security: N/A (frontend-only feature)

Next Steps

For Approval: Fix blockers #1, #2, #3 and critical issues #4-7.

Architecture Decision Needed: Should SDK configuration:

• A) Live in ProjectSettings CR (matches platform pattern) ✅ Recommended
• B) Use separate GORM database (introduces new dependency) ❌ Not recommended

Estimated Effort: 4-6 hours to fix blockers and critical issues.

---

🤖 Generated with Claude Code (Sonnet 4.5) following CLAUDE.md standards and memory system context.

---

🔍 View AI decision process (logs available for 90 days)

📋 View memory system files loaded (click to expand)

What Amber Loaded for Code Review

Amber automatically loaded these repository standards from the memory system:

1. CLAUDE.md - Master project instructions, development standards
2. backend-development.md - Go backend, K8s integration patterns
3. frontend-development.md - NextJS, Shadcn UI, React Query patterns
4. security-standards.md - Auth, RBAC, token handling
5. k8s-client-usage.md - User token vs service account patterns
6. error-handling.md - Consistent error patterns
7. react-query-usage.md - Data fetching patterns

Impact: This review used your repository's specific code quality standards, security patterns, and best practices from the memory system (PRs #359, #360) - not just generic code review guidelines.