feat: File Browser Sidebar with Preview, Security Audit UI, and Syntax Highlighting#145
Merged
feat: File Browser Sidebar with Preview, Security Audit UI, and Syntax Highlighting#145
Conversation
Integrate skill-scanner's 8 analysis engines and policy configuration into SkillHub's config system. Operators can now control behavioral, LLM, Meta, AI Defense, VirusTotal, and trigger analyzers via application.yml or environment variables. Changes: - Add Analyzers and Policy nested classes to SkillScannerProperties - Create ScanOptions record to encapsulate analyzer flags - Update SkillScannerService to pass options in /scan body and /scan-upload query params - Wire ScanOptions through SkillScannerConfig and SkillScannerAdapter - Extend application.yml with full scanner config block and env var overrides - Update all tests to verify new configuration flow All tests pass.
Add SCANNING/SCAN_FAILED status to SkillVersionStatus. Introduce SecurityScanService, SecurityScanner port, ScanTask, SecurityAudit and related domain types. Wire scan trigger into SkillPublishService so non-auto-publish versions enter scanning when scanner is enabled, falling back to review task creation when disabled.
Add WebClient-based HttpClient abstraction with WebClientHttpClient implementation. Add SkillScannerApiResponse record, SecurityScanException, and SecurityAuditJpaRepository. Add webflux and test dependencies to infra module.
Add AbstractStreamConsumer base class, ScanTaskConsumer for processing scan results from Redis stream, and RedisScanTaskProducer. Add RedisStreamConfig for stream/group initialization. Add SecurityAudit REST controller and DTO. Add V35 Flyway migration for security_audits table.
Add scanner enabled flag to application-local.yml and application-test.yml. Enable behavioral analyzer by default in application.yml.
Add skill-scanner service to docker-compose.yml with health check. Add scanner k8s deployment, service, and configmap entries. Wire scanner env vars into Makefile dev-all flow. Add verify-scanner.sh script for post-deploy validation.
Add scanner docs: configuration guide, failure impact analysis, monitoring guide, improvement recommendations, custom rules guide, and skill-vetter rules conversion example. Update deployment docs with scanner section. Add security-scanning overview and PRD.
Add example Regex and YARA rules derived from skill-vetter RED FLAGS in scanner/examples/vetter-rules/. Includes 7 Regex rules (signatures-append.yaml) and 3 YARA rules (skillhub_vetter.yara) covering agent memory theft, IP-based exfiltration, and browser data theft detection.
Add Dockerfile for cisco-ai-skill-scanner container and .env.example with LLM configuration placeholders.
SkillScannerApiResponse.Finding used incorrect field names (message, location.file, location.line, code_snippet) that did not match the scanner's actual JSON output (description, file_path, line_number, snippet), causing all four fields to deserialize as null. Flatten Finding to match scanner API: remove nested Location, rename fields to description/file_path/line_number/snippet. Add skill_name and timestamp to SkillScannerApiResponse. Extend SecurityFinding with remediation, analyzer, and metadata fields to capture LLM analyzer output. Retain 8-arg compact constructor for backward compatibility.
Log raw scanner API response and mapped SecurityFinding fields side-by-side to help verify data consistency between scanner output and database records.
…y audits - Add ScannerType enum for type-safe scanner identification - Update V35 migration to support multiple scanners and soft delete - Remove CASCADE delete, use code-level soft delete (deleted_at) - Add repository methods for querying latest audit by scanner type - Update SecurityScanService to handle scanner type parameter - Integrate soft delete in SkillHardDeleteService - Update all tests to use ScannerType enum This enables multiple scanner integrations (skill-scanner, future LLM/compliance scanners) and preserves complete audit history through soft deletion.
…il pages Display security scan results on the review detail page (full audit section with collapsible findings) and the skill detail sidebar (compact summary with dialog for details). Handles empty/404 gracefully by returning null, avoids loading shimmer flicker, and separates lifecycle action buttons with a visual divider.
# Conflicts: # server/skillhub-app/src/main/resources/application-local.yml
Implement buildFileTree function to convert flat SkillFile[] into hierarchical tree structure. - Nodes sorted alphabetically by path - Support for nested directories - Each node includes depth, type, and path information - Includes comprehensive test coverage
Implement utilities for file type detection and preview capability checks: - isPreviewable: checks if file can be previewed based on extension and size - canPreviewFile: provides detailed reason when file cannot be previewed - getFileTypeLabel: returns human-readable file type labels - getFileIcon: maps file types to appropriate Lucide icons - Supports 1MB max file size limit - Comprehensive test coverage for all functions
Implement recursive FileTreeNodeComponent with: - Expand/collapse functionality for directories - File and directory icons from Lucide React - Hover effects showing file sizes - Proper indentation based on depth - Support for nested directory structures
Replace flat file list with tree structure: - Use buildFileTree to convert flat files into hierarchy - Integrate FileTreeNodeComponent for rendering - Update onFileClick to accept FileTreeNode instead of SkillFile - Add file count badge in header - Root-level directories expanded by default
Implement FilePreviewDialog with: - Markdown rendering via existing MarkdownRenderer - Plain text/code display with monospace font - Non-previewable file message with download button - Copy-to-clipboard and download actions in header - File path display in footer - Loading and error states
Add Chinese and English translations for: - File browser title - Preview error messages (load failure, too large, binary, unsupported) - Download file button
- Add useSkillFile hook for fetching arbitrary file content - Add file preview state, click handler, and download handler - Pass onFileClick to FileTree for opening preview dialog - Add FilePreviewDialog to skill detail page
Add GET /api/v1/reviews/{id}/file?path=... for reading single files
from the review-bound skill version:
- ReviewController: new endpoint with path traversal validation
- GovernanceWorkflowAppService: route method for review file access
- ReviewSkillDetailAppService: authorization and delegation
- SkillQueryService: getFileContentByVersionId for direct version access
- Add useReviewFile hook for fetching review file content - Add file preview state and handlers to ReviewSkillDetailSection - Pass reviewId prop for API calls - Add FilePreviewDialog to review detail expanded section - Update review-detail.tsx to pass taskId as reviewId
- Add useSkillFile mock to skill-detail.test.tsx - Add useQuery mock to @tanstack/react-query mock - Add useReviewFile mock to review-skill-detail-section.test.tsx - Fix SkillFile test fixtures to include all required properties - Remove unused imports in test and component files
Replace DomainNotFoundException with DomainBadRequestException in getFileContentByVersionId to match existing patterns and imports.
- Move file tree to right sidebar for persistent visibility - Display file sizes always visible (not just on hover) - Keep Files tab showing the same tree structure - Add scrollable container with max-height for long file lists
- Remove redundant title from file tree sidebar - Adjust scrollbar placement with proper flex layout - Sort folders first, then files (both alphabetically) - Collapse all folders by default for cleaner initial view - Increase dialog width to max-w-5xl and height to 90vh - Remove duplicate close button (X icon) - Add hover effects to action buttons - Use flexbox for proper content scrolling - Allow .pyc files in backend configuration Fixes: 1. File tree sidebar now has cleaner layout without title 2. Scrollbar properly contained within card 3. Folders appear before files in tree 4. All folders collapsed by default 5. Preview dialog wider and more usable 6. Single close method (ESC or click outside) 7. Action buttons have visual feedback on hover
1. Default all folders to collapsed state 2. File tree sidebar now uses Card+bare pattern matching SecurityAuditSummary - Scrollbar inside the card content area instead of wrapping the tree - Consistent padding and header layout with other sidebar cards 3. Preview dialog close button fixed: - Hide DialogContent's built-in close button via [&>button]:hidden - Add X button in the header row, same level as copy/download - All action buttons share consistent hover animation (opacity transition) 4. Sort directories before files at every tree level 5. Update tests for new directory-first sort order
1. File browser sidebar now supports expand/collapse toggle - Click the header row to toggle visibility - ChevronUp/Down icon indicates state - Default expanded on page load 2. File preview dialog widened to 72rem (was 5xl/64rem) - Uses w-[min(calc(100vw-2rem),72rem)] for responsive max 3. Header action buttons now have micro-interactions: - Copy/Download: scale up on hover, scale down on click - Close (X): rotates 90° on hover with destructive tint - All buttons: opacity 60→100 transition on hover
…eview sidebar
1. File browser chevron: single ChevronDown with rotate-180 CSS transition
instead of swapping two icons — smooth 200ms rotation animation
2. Preview dialog action button animations:
- Copy icon: active:scale-125 feedback on click
- Download icon: hover:translate-y-0.5 subtle downward motion
- Close icon: hover:rotate-90 with destructive tint (unchanged)
3. Download tooltip now shows full file path:
"下载 src/prompts/system.md" instead of generic "下载文件"
- New i18n keys: filePreview.downloadHint, filePreview.copy, filePreview.close
4. Review detail page now has a sidebar file browser:
- Two-column layout (main content + lg:w-80 sidebar)
- File tree sourced from reviewSkillDetail.files (active review version)
- Collapsible with same chevron animation as skill detail page
- Shows active version badge below file tree
- File preview uses review file API (/reviews/{id}/file?path=...)
- Test mocks updated for new useReviewFile dependency
1. Download button tooltip/text now shows actual filename:
"下载 README.md" instead of generic path
- i18n key changed from {{path}} to {{name}}
2. Copy button animation reworked to rotation:
- idle: hover:rotate-180 on the Copy icon
- click: animate-spin during clipboard write
- done: swap to green Check icon for 1.5s, then reset
3. Copy success toast notification:
- Shows "已复制到剪贴板" / "Copied to clipboard" via toast.success
- New i18n key: filePreview.copySuccess
…ename The <a> element was missing the download attribute, causing the browser to derive the filename from the URL path segment (/file?path=...) which always resolved to "file". Now explicitly sets link.download = node.name so the saved file uses the original name (e.g. README.md, config.json). Applied to all three download handlers: - skill-detail.tsx (skill version file) - review-detail.tsx (review sidebar file) - review-skill-detail-section.tsx (review expanded section file)
Add Lucide icons to each sidebar section for visual consistency with the existing SecurityAuditSummary (Shield) and file browser (Folder): - Terminal: Install command - Clock: Pending review (amber-colored to match card theme) - RefreshCw: Lifecycle management - Tag: Label management (in SkillLabelPanel component) - ArrowUpCircle: Promotion - ShieldCheck: Governance All icons use the same pattern: w-4 h-4 text-muted-foreground placed inside a flex row with gap-2 before the section title.
When a skill has only a REJECTED version, the detail page crashed with 400 "版本未发布" because assertPreviewAccessible() only allowed PUBLISHED and PENDING_REVIEW(owner). The frontend fallback to versions[0] would pick the REJECTED version and fail all file/readme queries. Backend changes: - assertPreviewAccessible(): now allows owners and namespace admins to preview ANY version status (DRAFT, REJECTED, YANKED, SCANNING, etc.) via canManageRestrictedSkill() check. Also passes userNsRoles so namespace admin role is respected, not just owner. - resolveOwnerPendingPreview(): expanded from PENDING_REVIEW-only to include all non-published, non-yanked statuses so headlineVersion resolves correctly for owners with REJECTED/DRAFT/SCANNING versions. Frontend changes: - isOwnerPreviewResolution(): relaxed from checking PENDING_REVIEW specifically to checking any non-PUBLISHED status, matching the backend's broader projection. Fixes: owner viewing skill with only REJECTED version → 400 error Also fixes: DRAFT-only, SCANNING-only, SCAN_FAILED-only scenarios
…yntax highlighting Generated complete documentation suite including: - Core PRD (clarity score: 95/100) - Constraints specification (8 business rules) - Impact analysis (8 risks identified) - Acceptance cases (25 test cases: 10 positive, 5 error, 7 boundary, 3 security) - Test plan (100% coverage) Mode: Quick (3 clarification rounds) Complexity: Simple (3.5 days estimated)
Implement syntax highlighting for code files in the file preview dialog: - Add CodeRenderer component using lowlight (highlight.js wrapper via rehype-highlight) - Add getLanguageForHighlight() to map file extensions to highlight.js languages - Support 20+ languages: Python, JS/TS, Java, Go, Rust, C/C++, Ruby, PHP, Shell, JSON, YAML, XML, etc. - Apply 500KB threshold for syntax highlighting (larger files show plain text) - Maintain visual consistency with Markdown code blocks - Auto-adapt to light/dark theme using existing CSS variables - Add lowlight as direct dependency to enable programmatic syntax highlighting Implements solution 1 from PRD (reuse rehype-highlight infrastructure).
# Conflicts: # docs/prds/skill-file-browser-sidebar-v1.0-prd.md # server/skillhub-app/src/main/java/com/iflytek/skillhub/dto/SecurityAuditResponse.java # server/skillhub-app/src/test/java/com/iflytek/skillhub/controller/portal/SecurityAuditControllerTest.java # server/skillhub-domain/src/main/java/com/iflytek/skillhub/domain/security/SecurityAudit.java # server/skillhub-domain/src/main/java/com/iflytek/skillhub/domain/security/SecurityScanService.java # web/src/pages/dashboard/review-detail.tsx
…ssues Backend: - Add hardDeleteByVersionId to physically remove audit records before deleting skill versions (fixes FK constraint violation on hard delete) - Add softDeleteByVersionId calls in SkillGovernanceService and SkillPublishService version deletion paths - Add V36 migration to convert security_audit TIMESTAMP columns to TIMESTAMPTZ matching project convention - Update tests to verify audit cleanup in all deletion flows Frontend: - Prevent stale API calls after skill deletion by gating all query hooks with a skillDeleted flag that disables them immediately - Move cache cleanup from useDeleteSkill onSuccess to the handler to avoid refetching while the component is still mounted
Backend: - Include SCANNING/SCAN_FAILED in version listing filters so owners can see versions being scanned - Add explicit lifecycle sort priority for scanner statuses - Allow deletion of SCAN_FAILED versions alongside DRAFT and REJECTED Frontend: - Add i18n labels and CSS classes for SCANNING/SCAN_FAILED in my-skills - Add localized version status labels in skill-detail version list - Hide archive button when no published version exists (my-skills and skill-detail) - Allow deleting SCAN_FAILED versions from skill-detail
vsxd
approved these changes
Mar 23, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概述 / Summary
本 PR 实现了三个主要功能模块，显著提升了技能包的审查和管理体验：
🎯 核心功能 / Key Features
1. 文件浏览器侧边栏 (File Browser Sidebar)
前端实现：
后端实现：
/api/portal/reviews/{id}/files)集成位置：
2. 安全审计 UI (Security Audit UI)
前端实现：
后端实现：
SecurityAudit,SecurityFinding)/api/portal/security-audits/{skillId}/{version})基础设施：
文档：
docs/security-scanning.md)scanner/docs/configuration.md)scanner/docs/custom-rules.md)scanner/docs/monitoring-guide.md)scanner/docs/failure-impact-analysis.md)3. 代码语法高亮 (Syntax Highlighting)
实现方案：
rehype-highlight基础设施（通过lowlight）技术细节：
CodeRenderer组件（使用 lowlight）file-type-utils.ts添加语言映射file-preview-dialog.tsx📋 完整需求文档 / PRD
本 PR 包含三份完整的产品需求文档（PRD）：
文件浏览器侧边栏 PRD (
docs/prds/skill-file-browser-sidebar-v1.0-prd.md)安全审计 UI PRD (
docs/prds/security-audit-ui-v1.0-prd.md)文件预览语法高亮 PRD (
docs/prds/file-preview-syntax-highlighting-supplements/)🧪 测试计划 / Test Plan
前端测试
file-tree-builder.test.ts)file-type-utils.test.ts)review-skill-detail-section.test.tsx)skill-detail.test.tsx)后端测试
SecurityScanServiceTest.java)ScanTaskConsumerTest.java)SkillScannerAdapterTest.java)SecurityAuditControllerTest.java)SkillScannerPropertiesBindingTest.java)手动测试清单
📊 变更统计 / Change Statistics
主要变更文件：
前端 (web/src/):
features/skill/code-renderer.tsx- 语法高亮组件features/skill/file-preview-dialog.tsx- 文件预览对话框features/skill/file-tree-*.ts- 文件树构建器和节点features/security-audit/*- 安全审计 UI 组件pages/skill-detail.tsx- 集成文件浏览器和安全审计pages/dashboard/review-detail.tsx- 集成审核流程后端 (server/):
domain/security/*- 安全审计领域模型infra/scanner/*- 扫描器基础设施stream/*- Redis Stream 消费者controller/portal/SecurityAuditController.java- 安全审计 APIdomain/skill/service/SkillPublishService.java- 集成安全扫描基础设施:
scanner/*- 扫描器 Docker 镜像和配置deploy/k8s/*- K8s 部署配置docker-compose.yml- 本地开发环境文档:
🔧 技术栈 / Tech Stack
前端：
后端：
基础设施：
🚀 部署说明 / Deployment Notes
环境变量配置
Docker Compose
Kubernetes
数据库迁移
📝 相关 Issue / Related Issues
✅ 验收标准 / Acceptance Criteria
文件浏览器
安全审计
语法高亮
🔍 代码审查要点 / Review Checklist
📸 截图 / Screenshots
（建议添加以下截图）
🎉 总结 / Conclusion
本 PR 通过三个紧密集成的功能模块，显著提升了 SkillHub 的技能包审查和管理能力：
所有功能均经过完整的需求分析、设计和测试，代码质量和文档完整性达到生产级别标准。