Skip to content

Commit bdae576

Browse files
JaredforRealJaredforReal
committed
refine config
Signed-off-by: JaredforReal <[email protected]>
1 parent 55adc5e commit bdae576

File tree

4 files changed

+766
-71
lines changed

4 files changed

+766
-71
lines changed

‎dashboard/frontend/src/components/ConfigNav.module.css‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
.nav {
2+
width: 280px;
3+
background-color: var(--color-bg-secondary);
4+
border: 1px solid var(--color-border);
5+
border-radius: var(--radius-lg);
6+
overflow: hidden;
7+
height: fit-content;
8+
flex-shrink: 0;
9+
}
10+
11+
.navHeader {
12+
padding: 1.25rem 1.5rem;
13+
background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
14+
border-bottom: 1px solid var(--color-border);
15+
}
16+
17+
.navTitle {
18+
font-size: 1.125rem;
19+
font-weight: 700;
20+
margin: 0;
21+
color: var(--color-text);
22+
letter-spacing: -0.01em;
23+
}
24+
25+
.navList {
26+
list-style: none;
27+
padding: 0.5rem;
28+
margin: 0;
29+
}
30+
31+
.navItem {
32+
display: flex;
33+
align-items: flex-start;
34+
gap: 0.875rem;
35+
width: 100%;
36+
padding: 0.875rem 1rem;
37+
background: transparent;
38+
border: none;
39+
border-radius: var(--radius-md);
40+
cursor: pointer;
41+
transition: all var(--transition-fast);
42+
text-align: left;
43+
margin-bottom: 0.25rem;
44+
}
45+
46+
.navItem:hover {
47+
background-color: rgba(99, 102, 241, 0.05);
48+
}
49+
50+
.navItem.active {
51+
background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%);
52+
border-left: 3px solid var(--color-primary);
53+
padding-left: calc(1rem - 3px);
54+
}
55+
56+
.navIcon {
57+
font-size: 1.5rem;
58+
line-height: 1;
59+
flex-shrink: 0;
60+
margin-top: 0.125rem;
61+
}
62+
63+
.navContent {
64+
display: flex;
65+
flex-direction: column;
66+
gap: 0.25rem;
67+
flex: 1;
68+
min-width: 0;
69+
}
70+
71+
.navItemTitle {
72+
font-size: 0.875rem;
73+
font-weight: 600;
74+
color: var(--color-text);
75+
line-height: 1.3;
76+
}
77+
78+
.navItem.active .navItemTitle {
79+
color: var(--color-primary);
80+
}
81+
82+
.navItemDesc {
83+
font-size: 0.75rem;
84+
color: var(--color-text-secondary);
85+
line-height: 1.4;
86+
overflow: hidden;
87+
text-overflow: ellipsis;
88+
display: -webkit-box;
89+
-webkit-line-clamp: 2;
90+
-webkit-box-orient: vertical;
91+
}
92+
93+
.navItem:hover .navItemDesc {
94+
color: var(--color-text);
95+
}
96+
97+
.navItem.active .navItemDesc {
98+
color: rgba(99, 102, 241, 0.8);
99+
}

‎dashboard/frontend/src/components/ConfigNav.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import React from 'react'
2+
import styles from './ConfigNav.module.css'
3+
4+
export type ConfigSection =
5+
| 'models'
6+
| 'prompt-guard'
7+
| 'similarity-cache'
8+
| 'intelligent-routing'
9+
| 'tools-selection'
10+
| 'observability'
11+
12+
interface ConfigNavProps {
13+
activeSection: ConfigSection
14+
onSectionChange: (section: ConfigSection) => void
15+
}
16+
17+
const ConfigNav: React.FC<ConfigNavProps> = ({ activeSection, onSectionChange }) => {
18+
const sections = [
19+
{
20+
id: 'models' as ConfigSection,
21+
icon: '🔌',
22+
title: 'Models & Endpoints',
23+
description: 'Model configurations and backend endpoints'
24+
},
25+
{
26+
id: 'prompt-guard' as ConfigSection,
27+
icon: '🛡️',
28+
title: 'Prompt Guard',
29+
description: 'PII and jailbreak detection'
30+
},
31+
{
32+
id: 'similarity-cache' as ConfigSection,
33+
icon: '⚡',
34+
title: 'Similarity Cache',
35+
description: 'Semantic caching configuration'
36+
},
37+
{
38+
id: 'intelligent-routing' as ConfigSection,
39+
icon: '📊',
40+
title: 'Intelligent Routing',
41+
description: 'Categories and reasoning configuration'
42+
},
43+
{
44+
id: 'tools-selection' as ConfigSection,
45+
icon: '🔧',
46+
title: 'Tools Selection',
47+
description: 'Tool auto-selection settings'
48+
},
49+
{
50+
id: 'observability' as ConfigSection,
51+
icon: '📈',
52+
title: 'Observability',
53+
description: 'Metrics and monitoring'
54+
}
55+
]
56+
57+
return (
58+
<nav className={styles.nav}>
59+
<div className={styles.navHeader}>
60+
<h3 className={styles.navTitle}>Configuration</h3>
61+
</div>
62+
<ul className={styles.navList}>
63+
{sections.map((section) => (
64+
<li key={section.id}>
65+
<button
66+
className={`${styles.navItem} ${activeSection === section.id ? styles.active : ''}`}
67+
onClick={() => onSectionChange(section.id)}
68+
>
69+
<span className={styles.navIcon}>{section.icon}</span>
70+
<div className={styles.navContent}>
71+
<span className={styles.navItemTitle}>{section.title}</span>
72+
<span className={styles.navItemDesc}>{section.description}</span>
73+
</div>
74+
</button>
75+
</li>
76+
))}
77+
</ul>
78+
</nav>
79+
)
80+
}
81+
82+
export default ConfigNav

‎dashboard/frontend/src/pages/ConfigPage.module.css‎

Lines changed: 160 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -114,37 +114,61 @@
114114
min-height: 0;
115115
}
116116

117-
.structuredView {
118-
display: grid;
119-
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
117+
.mainLayout {
118+
display: flex;
120119
gap: 1.5rem;
121120
padding: 0.5rem;
122-
align-items: start;
121+
height: 100%;
123122
}
124123

125-
/* Make Categories section span all columns */
126-
.categoriesSection {
127-
grid-column: 1 / -1;
124+
.contentArea {
125+
flex: 1;
126+
min-width: 0;
127+
overflow-y: auto;
128128
}
129129

130-
/* Three column layout for large screens */
131-
@media (min-width: 1800px) {
132-
.structuredView {
133-
grid-template-columns: repeat(3, 1fr);
134-
}
130+
.sectionPanel {
131+
display: flex;
132+
flex-direction: column;
133+
gap: 1.5rem;
135134
}
136135

137-
/* Two column layout for medium screens */
138-
@media (min-width: 1200px) and (max-width: 1799px) {
139-
.structuredView {
140-
grid-template-columns: repeat(2, 1fr);
141-
}
136+
.observabilityInfo {
137+
padding: 1.5rem;
138+
background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
139+
border: 1px solid rgba(99, 102, 241, 0.2);
140+
border-radius: var(--radius-md);
141+
text-align: center;
142+
}
143+
144+
.observabilityInfo p {
145+
margin: 0.5rem 0;
146+
color: var(--color-text-secondary);
147+
font-size: 0.9rem;
148+
}
149+
150+
.observabilityInfo code {
151+
padding: 0.25rem 0.5rem;
152+
background-color: rgba(99, 102, 241, 0.1);
153+
border-radius: var(--radius-sm);
154+
font-family: var(--font-mono);
155+
color: var(--color-primary);
156+
font-size: 0.85rem;
157+
}
158+
159+
.observabilityInfo strong {
160+
color: var(--color-text);
161+
}
162+
163+
/* Make Categories section span all columns when in full view */
164+
.categoriesSection {
165+
grid-column: 1 / -1;
142166
}
143167

144-
/* Single column on smaller screens */
168+
/* Responsive layout */
145169
@media (max-width: 1199px) {
146-
.structuredView {
147-
grid-template-columns: 1fr;
170+
.mainLayout {
171+
flex-direction: column;
148172
}
149173
}
150174

@@ -318,6 +342,21 @@
318342
color: #dc2626;
319343
}
320344

345+
.badgedevelopment {
346+
background-color: rgba(234, 179, 8, 0.1);
347+
color: #ca8a04;
348+
}
349+
350+
.badgeproduction {
351+
background-color: rgba(239, 68, 68, 0.1);
352+
color: #dc2626;
353+
}
354+
355+
.badgetesting {
356+
background-color: rgba(59, 130, 246, 0.1);
357+
color: #2563eb;
358+
}
359+
321360
.statusBadge {
322361
display: inline-flex;
323362
align-items: center;
@@ -668,4 +707,105 @@
668707

669708
.featureBody {
670709
padding: 1rem 1.25rem;
710+
}
711+
712+
/* Model Config Grid */
713+
.modelConfigGrid {
714+
display: grid;
715+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
716+
gap: 1rem;
717+
}
718+
719+
.modelConfigCard {
720+
background-color: var(--color-bg);
721+
border: 1px solid var(--color-border);
722+
border-radius: var(--radius-md);
723+
overflow: hidden;
724+
transition: all var(--transition-fast);
725+
}
726+
727+
.modelConfigCard:hover {
728+
border-color: var(--color-primary);
729+
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
730+
transform: translateY(-2px);
731+
}
732+
733+
.modelConfigHeader {
734+
padding: 1rem 1.25rem;
735+
background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
736+
border-bottom: 1px solid var(--color-border);
737+
}
738+
739+
.modelConfigName {
740+
font-size: 1rem;
741+
font-weight: 700;
742+
color: var(--color-text);
743+
font-family: var(--font-mono);
744+
}
745+
746+
.modelConfigBody {
747+
padding: 1rem 1.25rem;
748+
}
749+
750+
.endpointTags {
751+
display: flex;
752+
flex-wrap: wrap;
753+
gap: 0.5rem;
754+
}
755+
756+
.endpointTag {
757+
display: inline-flex;
758+
align-items: center;
759+
padding: 0.25rem 0.75rem;
760+
background-color: rgba(99, 102, 241, 0.1);
761+
border: 1px solid rgba(99, 102, 241, 0.2);
762+
color: var(--color-primary);
763+
border-radius: var(--radius-sm);
764+
font-size: 0.75rem;
765+
font-weight: 600;
766+
font-family: var(--font-mono);
767+
}
768+
769+
.badgeInfo {
770+
background-color: rgba(59, 130, 246, 0.1);
771+
color: #2563eb;
772+
}
773+
774+
/* Reasoning Families Grid */
775+
.reasoningFamiliesGrid {
776+
display: grid;
777+
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
778+
gap: 1rem;
779+
}
780+
781+
.reasoningFamilyCard {
782+
background-color: var(--color-bg);
783+
border: 1px solid var(--color-border);
784+
border-radius: var(--radius-md);
785+
overflow: hidden;
786+
transition: all var(--transition-fast);
787+
}
788+
789+
.reasoningFamilyCard:hover {
790+
border-color: var(--color-primary);
791+
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
792+
transform: translateY(-2px);
793+
}
794+
795+
.reasoningFamilyHeader {
796+
padding: 0.875rem 1.25rem;
797+
background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(168, 85, 247, 0.08) 100%);
798+
border-bottom: 1px solid var(--color-border);
799+
}
800+
801+
.reasoningFamilyName {
802+
font-size: 0.95rem;
803+
font-weight: 700;
804+
color: var(--color-text);
805+
text-transform: uppercase;
806+
letter-spacing: 0.05em;
807+
}
808+
809+
.reasoningFamilyBody {
810+
padding: 1rem 1.25rem;
671811
}

0 commit comments

Comments
 (0)