Conversation
…rphism styling 🎨 Enhanced Tab Navigation - Replaced basic tabs with large, card-style buttons - Added glassmorphism effects with backdrop blur and gradients - Color-coded themes: Cyan for crawl, Purple for upload - Top accent glow bars for active states matching KnowledgeCard - Two-line layout with descriptive subtitles 🌐 Modern URL Input Enhancement - Added prominent Globe icon with proper visibility - Enhanced glassmorphism styling with gradient backgrounds - Larger input height for better interaction - Improved placeholder text with example URLs - Enhanced focus states with cyan glow effects 📁 Professional File Upload Area - Custom drag & drop zone replacing basic file input - Visual upload area with glassmorphism effects - Dynamic Upload icon with state-based colors - File name and size display when selected - Purple theme colors matching document context 🏷️ Visual Tag Management System - Replaced comma-separated input with modern tag pills - Individual tag removal with X buttons - Enter or comma to add tags (backward compatible) - Tag count display and proper accessibility - Blue accent colors matching knowledge base theme 🎯 Circular Level Selection - Replaced dropdown with visual circular selector - Clear representation of crawl depth (1,2,3,5 levels) - Informative tooltips with detailed explanations - Selection indicators with animations - Info icon with comprehensive guidance 📋 Knowledge Type Selection Enhancement - Replaced dropdown with large visual radio cards - Technical vs Business with distinct styling - Color-coded themes and descriptive icons - Enhanced selection indicators ✨ Technical Improvements - Created reusable LevelSelector, KnowledgeTypeSelector, TagInput components - Updated state management from strings to arrays for tags - Maintained backward compatibility with existing API - Enhanced accessibility with proper ARIA labels - Minimal bundle impact with optimized imports 🚀 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
WalkthroughRefactors AddKnowledgeDialog to replace Tabs with custom tab buttons, switches tag fields to string arrays, and updates crawl/upload forms and behaviors. Introduces three new components: KnowledgeTypeSelector, LevelSelector, and TagInput. Enhances error handling, loading states, and drag/drop upload UX. Updates index exports accordingly. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Dialog as AddKnowledgeDialog
participant Crawl as Crawl API
participant Upload as Upload API
participant App as Parent Callbacks
rect rgb(245,248,255)
note over User,Dialog: Tab controls now internal (Crawl Website / Upload Document)
end
User->>Dialog: Submit Crawl (URL, type, depth, tags[])
activate Dialog
Dialog->>Crawl: POST crawl { url, type, depth, tags? }
alt Success (progressId returned)
Crawl-->>Dialog: { progressId }
Dialog-->>App: onCrawlStarted(progressId)
Dialog-->>User: Close modal, reset form
else Error
Crawl-->>Dialog: { error message }
Dialog-->>User: Show error
end
deactivate Dialog
User->>Dialog: Submit Upload (file, type, tags[])
activate Dialog
Dialog->>Upload: POST upload { file, type, tags? }
alt Success (progressId returned)
Upload-->>Dialog: { progressId }
Dialog-->>App: onCrawlStarted(progressId)
Dialog-->>User: Close modal, reset form
else Error
Upload-->>Dialog: { error message }
Dialog-->>User: Show error
end
deactivate Dialog
note over App: onSuccess invoked later upon completion (not at start)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
…sibility 🏷️ TagInput Race Condition Fix: - Fixed race condition in handleInputChange when pasting comma-separated tags - Replaced forEach addTag loop with batched update approach - Use Set for proper deduplication of tags - Enforce maxTags limit on final combined array - Single onTagsChange call prevents multiple re-renders and stale state issues - Prevents duplicates and exceeding maxTags when pasting multiple tags ♿ LevelSelector Accessibility Enhancement: - Added proper radio group semantics with role="radiogroup" - Added aria-labelledby linking to crawl depth label - Each button now has role="radio" and aria-checked state - Implemented roving tabindex (selected=0, others=-1) - Added descriptive aria-label for each level option - Enhanced keyboard support with Enter/Space key handlers - Added proper focus ring styling for keyboard navigation - Improved screen reader experience with semantic structure 🚀 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
|
@CodeRabbit review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
archon-ui-main/src/features/knowledge/components/LevelSelector.tsx (1)
151-151: Fix the plural logic for "levels".The text shows "level" for value "1" and "levels" for others, but the logic appears to be checking if the value is not equal to "1" as a string. This could be more explicit.
- level{level.value !== "1" ? "s" : ""} + {level.value === "1" ? "level" : "levels"}archon-ui-main/src/features/knowledge/components/TagInput.tsx (1)
45-53: Consider preventing comma character in regular input.While comma triggers tag addition, users might be confused if they try to type a tag containing a comma. Consider preventing the comma character from being typed in normal input.
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.key === "Enter" || e.key === ",") { e.preventDefault(); addTag(inputValue); } else if (e.key === "Backspace" && !inputValue && tags.length > 0) { // Remove last tag when backspace is pressed on empty input removeTag(tags[tags.length - 1]); } };archon-ui-main/package.json (1)
40-40: Remove unused dependency "@radix-ui/themes" or document intended use.archon-ui-main/package.json:40 currently pins "@radix-ui/themes": "^3.2.1" — ripgrep found matches only in package.json and package-lock.json; no imports/requires/usages in the codebase. Remove the dependency and update the lockfile, or state/show where it’s intended to be used.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
archon-ui-main/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (6)
archon-ui-main/package.json(1 hunks)archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx(6 hunks)archon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsx(1 hunks)archon-ui-main/src/features/knowledge/components/LevelSelector.tsx(1 hunks)archon-ui-main/src/features/knowledge/components/TagInput.tsx(1 hunks)archon-ui-main/src/features/knowledge/components/index.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-09-13T15:53:40.741Z
Learnt from: CR
PR: coleam00/Archon#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-13T15:53:40.741Z
Learning: Applies to archon-ui-main/src/features/**/*.{ts,tsx} : Expose progress via dedicated hooks (e.g., useCrawlProgressPolling, useProjectTasks) instead of ad-hoc timers
Applied to files:
archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx
📚 Learning: 2025-08-28T13:07:24.810Z
Learnt from: Wirasm
PR: coleam00/Archon#514
File: archon-ui-main/src/services/crawlProgressService.ts:35-39
Timestamp: 2025-08-28T13:07:24.810Z
Learning: The crawlProgressService.ts in the Archon codebase should be deprecated in favor of the existing useCrawlProgressPolling hook from usePolling.ts, which already includes ETag support, 304 handling, tab visibility detection, and proper React lifecycle integration. This consolidation reduces code duplication and improves performance.
Applied to files:
archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx
🔇 Additional comments (12)
archon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsx (1)
1-162: Well-implemented component with good UX and accessibility!The KnowledgeTypeSelector component is well-structured with:
- Clean separation of concerns with metadata-driven approach
- Good accessibility with aria-labels
- Smooth animations and visual feedback
- Proper disabled state handling
archon-ui-main/src/features/knowledge/components/LevelSelector.tsx (2)
81-83: Great accessibility implementation with proper ARIA roles!The component has excellent accessibility features:
- Proper
role="radiogroup"andaria-labelledbyon container- Individual
role="radio"andaria-checkedon options- Keyboard navigation support with Enter and Space keys
- Proper focus management with tabIndex
8-9: Import paths verified — no change required.
styles.ts and tooltip.tsx are present at archon-ui-main/src/features/ui/primitives/, so the "../../ui/primitives/..." imports in LevelSelector.tsx resolve correctly.archon-ui-main/src/features/knowledge/components/index.ts (1)
5-7: Clean barrel exports for the new components.The exports are properly added to make the new components available to consumers.
archon-ui-main/src/features/knowledge/components/TagInput.tsx (2)
29-39: Good tag validation logic with proper constraints.The addTag function properly validates tags with trimming, duplicate checking, and max limit enforcement.
55-77: Excellent handling of comma-separated input for backward compatibility!The implementation smartly handles both single tags and comma-separated batch input, with proper deduplication and limit enforcement. The use of Set for deduplication is efficient.
archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx (6)
45-45: Good migration from string to string[] for tags!The change from comma-separated strings to arrays is a cleaner approach that:
- Eliminates the need for CSV parsing
- Provides better type safety
- Simplifies the tag management logic
Also applies to: 50-50, 56-56, 59-59, 73-73, 103-103
115-117: Correct handling of async upload operations.Good catch on not calling
onSuccessimmediately after starting the upload. The comment correctly notes that success should only be triggered when polling shows completion.
138-196: Beautiful glassmorphism tab design with great visual feedback!The custom tab buttons implementation is excellent:
- Distinct color themes (cyan for crawl, purple for upload)
- Smooth gradient backgrounds with backdrop blur
- Active state indicators with top accent glow
- Proper hover states and transitions
- Two-line labels with descriptive text
273-317: Excellent custom file upload area implementation!The drag & drop file upload area is well-designed with:
- Clear visual states for empty/selected
- File metadata display (name and size)
- Proper styling that matches the overall glassmorphism theme
- Good UX with clear instructions
88-91: Good error handling with backend message display.The error handling properly extracts and displays the actual error messages from the backend, providing better user feedback than generic error messages.
Also applies to: 120-123
10-10: Import path verified — no change required.
archon-ui-main/src/features/ui/primitives/styles.ts exports cn, so import { cn } from "../../ui/primitives/styles" in AddKnowledgeDialog.tsx is correct.
|
Looks awesome, just one question, why was radix ui themes needed? |
…used dependency - Fix plural logic in LevelSelector.tsx for better readability - Remove unused @radix-ui/themes dependency to reduce bundle size - Update package-lock.json after dependency removal 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
|
@Wirasm thx for mentioning that => its removed. its not needed. Guess its a left over from previouse iterations/things I had in but than refactored. |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (6)
archon-ui-main/src/features/knowledge/components/LevelSelector.tsx (6)
101-106: Remove redundant onKeyDown handler to avoid double-activation.Buttons already handle Enter/Space; this risks duplicate
onValueChangeon some browsers.- onKeyDown={(e) => { - if (e.key === "Enter" || e.key === " ") { - e.preventDefault(); - if (!disabled) onValueChange(level.value); - } - }}
79-83: Expose group disabled state and improve small‑screen layout.Add
aria-disabledfor the radiogroup and use a responsive 2→4 column grid to avoid crowding on mobile.- <div - className="grid grid-cols-4 gap-3" - role="radiogroup" - aria-labelledby="crawl-depth-label" - > + <div + className="grid grid-cols-2 sm:grid-cols-4 gap-3" + role="radiogroup" + aria-labelledby="crawl-depth-label" + aria-disabled={disabled} + >
90-91: Avoid passing empty objects to framer‑motion props.Use
undefinedwhen disabled to skip processing.- whileHover={!disabled ? { scale: 1.05 } : {}} - whileTap={!disabled ? { scale: 0.95 } : {}} + whileHover={disabled ? undefined : { scale: 1.05 }} + whileTap={disabled ? undefined : { scale: 0.95 }}
114-114: Fix likely invalid Tailwind classvia-gray-25/25.Default Tailwind doesn’t ship
gray-25. Usevia-gray-100/25(or another configured token).- : "border-gray-300/50 dark:border-gray-700/50 bg-gradient-to-b from-gray-50/50 via-gray-25/25 to-white/60 dark:from-gray-800/20 dark:via-gray-800/10 dark:to-black/30", + : "border-gray-300/50 dark:border-gray-700/50 bg-gradient-to-b from-gray-50/50 via-gray-100/25 to-white/60 dark:from-gray-800/20 dark:via-gray-800/10 dark:to-black/30",
11-15: Tighten types: constrain values and freeze LEVELS.Prevents invalid depth values at compile time and preserves literal types.
-interface LevelSelectorProps { - value: string; - onValueChange: (value: string) => void; - disabled?: boolean; -} +type LevelValue = "1" | "2" | "3" | "5"; +interface LevelSelectorProps { + value: LevelValue; + onValueChange: (value: LevelValue) => void; + disabled?: boolean; +}-]; +] as const;Also applies to: 42-42
22-22: Align with Biome style: trailing commas in multiline objects.Adds trailing commas per features formatting conventions.
- details: "1-50 pages • Best for: Single articles, specific pages" + details: "1-50 pages • Best for: Single articles, specific pages",- details: "10-200 pages • Best for: Documentation sections, blogs" + details: "10-200 pages • Best for: Documentation sections, blogs",- details: "50-500 pages • Best for: Entire sites, comprehensive docs" + details: "50-500 pages • Best for: Entire sites, comprehensive docs",- details: "100-1000+ pages • Warning: May include irrelevant content" + details: "100-1000+ pages • Warning: May include irrelevant content",Also applies to: 28-28, 34-34, 40-40
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
archon-ui-main/src/features/knowledge/components/LevelSelector.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
archon-ui-main/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
archon-ui-main/src/**/*.{ts,tsx}: Use TanStack Query for all data fetching; avoid prop drilling
TypeScript: strict mode with no implicit any in frontend code
State naming: is[Action]ing for loading flags, [resource]Error for errors, selected[Resource] for current selection
Use HTTP polling with ETag caching; do not introduce WebSocket-based updates in the frontend
archon-ui-main/src/**/*.{ts,tsx}: WebSocket event failures (if any) should be logged and not crash the client; continue serving others
Frontend data fetching must use TanStack Query (no prop drilling) with query key factories, smart polling, and optimistic updates with rollback
Use vertical slice architecture: place UI under src/features/[feature]/(components|hooks|services|types)
State naming: use is[Action]ing for loading, [resource]Error for errors, selected[Resource] for selections
Service method names: get[Resource]sByProject(projectId), getResource, create/update/delete patterns
Frontend TypeScript should be strict (no implicit any)
Files:
archon-ui-main/src/features/knowledge/components/LevelSelector.tsx
archon-ui-main/src/features/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
archon-ui-main/src/features/**/*.{ts,tsx}: Follow TanStack Query patterns: query-keys factory, smart polling via useSmartPolling, optimistic updates with rollback
Biome formatting in features: 120-character lines, double quotes, trailing commas
archon-ui-main/src/features/**/*.{ts,tsx}: Use Biome formatting/conventions in /src/features: 120-char lines, double quotes, trailing commas
Use useSmartPolling and polling intervals (1–2s active, 5–10s background) with smart pausing on tab inactivity
Expose progress via dedicated hooks (e.g., useCrawlProgressPolling, useProjectTasks) instead of ad-hoc timers
Do not use prop drilling for data fetching/state; rely on TanStack Query caches/selectors
Files:
archon-ui-main/src/features/knowledge/components/LevelSelector.tsx
**/*.{py,ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Never return None/null to indicate failure; raise an exception with details instead
Files:
archon-ui-main/src/features/knowledge/components/LevelSelector.tsx
🧬 Code graph analysis (1)
archon-ui-main/src/features/knowledge/components/LevelSelector.tsx (2)
archon-ui-main/src/features/ui/primitives/tooltip.tsx (1)
SimpleTooltip(62-77)archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(139-141)
🔇 Additional comments (1)
archon-ui-main/src/features/knowledge/components/LevelSelector.tsx (1)
1-166: Overall: strong UX polish and clean composition.Nice self-contained selector, clear ARIA labeling, and thoughtful visual states. Address the a11y points above and this is solid.
Would you like a follow-up patch adding arrow-key navigation (Left/Right/Up/Down) for the radiogroup with roving tabindex?
| <SimpleTooltip content={tooltipContent}> | ||
| <Info className="w-4 h-4 text-gray-400 hover:text-cyan-500 transition-colors cursor-help" /> | ||
| </SimpleTooltip> |
There was a problem hiding this comment.
Fix tooltip trigger accessibility (non-focusable SVG).
SVG is not keyboard-focusable; screen readers can’t discover the help. Wrap the icon in a button with an accessible name.
- <SimpleTooltip content={tooltipContent}>
- <Info className="w-4 h-4 text-gray-400 hover:text-cyan-500 transition-colors cursor-help" />
- </SimpleTooltip>
+ <SimpleTooltip content={tooltipContent}>
+ <button
+ type="button"
+ aria-label="About crawl depth levels"
+ className="p-1 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2"
+ >
+ <Info
+ aria-hidden="true"
+ className="w-4 h-4 text-gray-400 hover:text-cyan-500 transition-colors cursor-help"
+ />
+ </button>
+ </SimpleTooltip>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <SimpleTooltip content={tooltipContent}> | |
| <Info className="w-4 h-4 text-gray-400 hover:text-cyan-500 transition-colors cursor-help" /> | |
| </SimpleTooltip> | |
| <SimpleTooltip content={tooltipContent}> | |
| <button | |
| type="button" | |
| aria-label="About crawl depth levels" | |
| className="p-1 rounded-md focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2" | |
| > | |
| <Info | |
| aria-hidden="true" | |
| className="w-4 h-4 text-gray-400 hover:text-cyan-500 transition-colors cursor-help" | |
| /> | |
| </button> | |
| </SimpleTooltip> |
🤖 Prompt for AI Agents
In archon-ui-main/src/features/knowledge/components/LevelSelector.tsx around
lines 75 to 77, the Info SVG is not keyboard-focusable or announced by screen
readers; wrap the SVG in a semantic button (e.g., <button>) that has an
accessible name (aria-label or aria-labelledby) and move the tooltip trigger to
that button. Ensure the button is styled as an unstyled/icon button (reset
default border/background and keep focus visible) so keyboard users can tab to
it and screen readers will announce the label; update any tooltip API usage to
use the button element as the trigger/ref if required.
| {LEVELS.map((level) => { | ||
| const isSelected = value === level.value; | ||
|
|
There was a problem hiding this comment.
Ensure one radio is tabbable when no value is selected.
With roving tabindex, if value is unset/unknown, all items become tabIndex=-1 (keyboard trap). Fallback the first item to tabIndex=0.
- {LEVELS.map((level) => {
+ {LEVELS.map((level, i) => {
const isSelected = value === level.value;
+ const focusable = isSelected || (!LEVELS.some((l) => l.value === value) && i === 0);- tabIndex={isSelected ? 0 : -1}
+ tabIndex={focusable ? 0 : -1}Also applies to: 99-99
🤖 Prompt for AI Agents
In archon-ui-main/src/features/knowledge/components/LevelSelector.tsx around
lines 84-86 and also at 99, ensure that when mapping LEVELS you fall back the
first item to tabIndex=0 if the current `value` is unset/unknown so keyboard
users aren't trapped; compute a tabIndex like: if value === level.value then 0,
else if value == null and index === 0 then 0, otherwise -1, and apply that to
the rendered radio element (or roving tabindex container) so exactly one radio
is tabbable when no value is selected.
Wirasm
left a comment
Wirasm
left a comment
There was a problem hiding this comment.
Looks great, ready to merge
…rphism styling (coleam00#661) * feat: Complete UX redesign of Add Knowledge Modal with modern glassmorphism styling 🎨 Enhanced Tab Navigation - Replaced basic tabs with large, card-style buttons - Added glassmorphism effects with backdrop blur and gradients - Color-coded themes: Cyan for crawl, Purple for upload - Top accent glow bars for active states matching KnowledgeCard - Two-line layout with descriptive subtitles 🌐 Modern URL Input Enhancement - Added prominent Globe icon with proper visibility - Enhanced glassmorphism styling with gradient backgrounds - Larger input height for better interaction - Improved placeholder text with example URLs - Enhanced focus states with cyan glow effects 📁 Professional File Upload Area - Custom drag & drop zone replacing basic file input - Visual upload area with glassmorphism effects - Dynamic Upload icon with state-based colors - File name and size display when selected - Purple theme colors matching document context 🏷️ Visual Tag Management System - Replaced comma-separated input with modern tag pills - Individual tag removal with X buttons - Enter or comma to add tags (backward compatible) - Tag count display and proper accessibility - Blue accent colors matching knowledge base theme 🎯 Circular Level Selection - Replaced dropdown with visual circular selector - Clear representation of crawl depth (1,2,3,5 levels) - Informative tooltips with detailed explanations - Selection indicators with animations - Info icon with comprehensive guidance 📋 Knowledge Type Selection Enhancement - Replaced dropdown with large visual radio cards - Technical vs Business with distinct styling - Color-coded themes and descriptive icons - Enhanced selection indicators ✨ Technical Improvements - Created reusable LevelSelector, KnowledgeTypeSelector, TagInput components - Updated state management from strings to arrays for tags - Maintained backward compatibility with existing API - Enhanced accessibility with proper ARIA labels - Minimal bundle impact with optimized imports 🚀 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: Improve TagInput race conditions and enhance LevelSelector accessibility 🏷️ TagInput Race Condition Fix: - Fixed race condition in handleInputChange when pasting comma-separated tags - Replaced forEach addTag loop with batched update approach - Use Set for proper deduplication of tags - Enforce maxTags limit on final combined array - Single onTagsChange call prevents multiple re-renders and stale state issues - Prevents duplicates and exceeding maxTags when pasting multiple tags ♿ LevelSelector Accessibility Enhancement: - Added proper radio group semantics with role="radiogroup" - Added aria-labelledby linking to crawl depth label - Each button now has role="radio" and aria-checked state - Implemented roving tabindex (selected=0, others=-1) - Added descriptive aria-label for each level option - Enhanced keyboard support with Enter/Space key handlers - Added proper focus ring styling for keyboard navigation - Improved screen reader experience with semantic structure 🚀 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: Address CodeRabbit feedback - improve plural logic and remove unused dependency - Fix plural logic in LevelSelector.tsx for better readability - Remove unused @radix-ui/themes dependency to reduce bundle size - Update package-lock.json after dependency removal 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
…i-title fix: add generateAndSetTitle to CLI workflow test mock (#650)
…e-650-cli-title fix: add generateAndSetTitle to CLI workflow test mock (coleam00#650)
…e-650-cli-title fix: add generateAndSetTitle to CLI workflow test mock (coleam00#650)
2 participants
🎨 Add Knowledge Modal Complete UX Redesign
This PR transforms the Add Knowledge Modal from a basic form into a modern, professional interface with consistent glassmorphism styling that matches the KnowledgeCard component aesthetics.
![Before vs After Comparison]
Before: Basic form with dropdowns and text inputs
After: Modern, intuitive interface with visual selectors and enhanced styling
2025-09-14_19h28_49.mp4
✨ Key Improvements
🔄 Enhanced Tab Navigation
🌐 Modern URL Input Enhancement
📁 Professional File Upload Area
🏷️ Visual Tag Management System
🎯 Circular Level Selection
📋 Knowledge Type Selection Enhancement
🎨 Enhanced Action Buttons
🔧 Technical Implementation
New Components Created
LevelSelector.tsx- Circular crawl depth selection with tooltipsKnowledgeTypeSelector.tsx- Visual type selection cardsTagInput.tsx- Modern tag management systemState Management Updates
stringtostring[]formatPerformance & Bundle Impact
Accessibility Enhancements
🎯 Design Consistency
All improvements follow the established design system:
📁 Files Changed
New Files (3):
src/features/knowledge/components/LevelSelector.tsxsrc/features/knowledge/components/KnowledgeTypeSelector.tsxsrc/features/knowledge/components/TagInput.tsxModified Files (4):
src/features/knowledge/components/AddKnowledgeDialog.tsx(major redesign)src/features/knowledge/components/index.ts(added exports)package.json(added @radix-ui/themes dependency)package-lock.json(dependency updates)✅ Testing Checklist
🚀 Impact
This redesign transforms the Add Knowledge Modal from a basic form into a modern, professional interface that:
✨ Improves user experience with intuitive visual controls
✨ Reduces errors through better visual guidance and validation
✨ Maintains consistency with the application's design language
✨ Enhances accessibility with proper ARIA labels and keyboard navigation
✨ Future-proofs the interface with reusable, well-architected components
The modal now provides a delightful user experience that matches the high quality of the rest of the Archon application!
📸 Screenshots
[Screenshots of the redesigned modal would go here]
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Bug Fixes