Skip to content

Commit 6c86080

Browse files
committed
updates
1 parent 2793b6f commit 6c86080

5 files changed

Lines changed: 48 additions & 18 deletions

File tree

backend/openwebui_api.py

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,12 @@ async def _proxy_get(path: str, params: dict = None, timeout: float = None) -> d
7171
raise HTTPException(status_code=504, detail="Open WebUI timed out")
7272
except httpx.HTTPStatusError as e:
7373
logger.error(f"Open WebUI error: {e.response.status_code} on {path}")
74-
raise HTTPException(status_code=e.response.status_code, detail="Open WebUI returned an error")
74+
# Don't pass upstream 401/403 to the client — those are Open WebUI's
75+
# auth errors, not our session errors. Map them to 502 instead.
76+
status = e.response.status_code
77+
if status in (401, 403):
78+
raise HTTPException(status_code=502, detail=f"Open WebUI auth error ({status}) — check WEBUI_SECRET_KEY / API key")
79+
raise HTTPException(status_code=status, detail="Open WebUI returned an error")
7580
except httpx.ConnectError:
7681
raise HTTPException(status_code=503, detail="Open WebUI is not reachable")
7782
except Exception as e:

src/App.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ window.fetch = function(...args) {
1717
if (response.status === 401 &&
1818
!args[0].includes('/auth/login') &&
1919
!args[0].includes('/auth/session') &&
20-
!args[0].includes('/auth/callback')) {
20+
!args[0].includes('/auth/callback') &&
21+
!args[0].includes('/api/v1/openwebui/')) {
2122
console.warn('Session expired, redirecting to login...');
2223
window.location.href = '/auth/login';
2324
}

src/components/llm/ProviderCard.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ export default function ProviderCard({ provider, onEdit, onDelete, onTest }) {
66
const getStatusColor = (status) => status === 'active' ? 'success' : 'error';
77

88
return (
9-
<Card>
10-
<CardContent>
9+
<Card sx={{ width: '100%', display: 'flex', flexDirection: 'column', height: '100%' }}>
10+
<CardContent sx={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
1111
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
1212
<Box sx={{ flex: 1, minWidth: 0 }}>
1313
<Typography variant="h6" sx={{ wordBreak: 'break-word' }}>{provider.name}</Typography>
@@ -26,6 +26,7 @@ export default function ProviderCard({ provider, onEdit, onDelete, onTest }) {
2626
<Typography variant="body2" color="text.secondary">
2727
Usage: {(provider.usage_count || 0).toLocaleString()} requests
2828
</Typography>
29+
<Box sx={{ flexGrow: 1 }} />
2930
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 2 }}>
3031
<Tooltip title="Test Connection"><IconButton size="small" onClick={() => onTest(provider)}><PlayArrow /></IconButton></Tooltip>
3132
<Tooltip title="Edit"><IconButton size="small" onClick={() => onEdit(provider)}><Edit /></IconButton></Tooltip>

src/pages/LLMManagement.jsx

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -265,19 +265,39 @@ export default function LLMManagement() {
265265
) : providers.length === 0 ? (
266266
<Alert severity="info">No providers configured yet.</Alert>
267267
) : (
268-
<Grid container spacing={3}>
268+
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 3, width: '100%' }}>
269269
{/* REFACTORED: Using safeMap for provider list */}
270270
{safeMap(providers, (provider) => (
271-
<Grid item xs={12} sm={6} md={4} key={provider.id}>
271+
<Box
272+
key={provider.id}
273+
sx={{
274+
flex: {
275+
xs: '1 1 100%',
276+
sm: '0 1 calc(50% - 12px)',
277+
md: '0 1 calc(25% - 18px)'
278+
},
279+
minWidth: {
280+
xs: '100%',
281+
sm: 'calc(50% - 12px)',
282+
md: 'calc(25% - 18px)'
283+
},
284+
maxWidth: {
285+
xs: '100%',
286+
sm: 'calc(50% - 12px)',
287+
md: 'calc(25% - 18px)'
288+
},
289+
display: 'flex'
290+
}}
291+
>
272292
<ProviderCard
273293
provider={provider}
274294
onEdit={handleEditProvider}
275295
onDelete={handleDeleteProvider}
276296
onTest={handleTestProvider}
277297
/>
278-
</Grid>
298+
</Box>
279299
))}
280-
</Grid>
300+
</Box>
281301
)}
282302
</Box>
283303
)}

src/pages/LiteLLMManagement.jsx

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ const StatCard = ({ title, value, icon: Icon, color, trend, theme }) => (
8787
<motion.div
8888
initial={{ opacity: 0, y: 20 }}
8989
animate={{ opacity: 1, y: 0 }}
90-
className={`${theme.card} rounded-xl p-6 border ${color}/20 hover:border-${color}/40 transition-all`}
90+
className={`${theme.card} rounded-xl p-6 border ${color}/20 hover:border-${color}/40 transition-all h-full`}
9191
>
9292
<div className="flex items-center justify-between">
9393
<div>
@@ -121,23 +121,23 @@ const ProviderCard = ({ provider, onConfigure, onTest, onDisable, onDelete, them
121121
return (
122122
<motion.div
123123
whileHover={{ scale: 1.02 }}
124-
className={`${theme.card} rounded-xl p-6 border border-${statusColor}/20 hover:border-${statusColor}/40 transition-all`}
124+
className={`${theme.card} rounded-xl p-6 border border-${statusColor}/20 hover:border-${statusColor}/40 transition-all h-full flex flex-col`}
125125
>
126126
<div className="flex items-start justify-between mb-4">
127127
<div className="flex items-center gap-3">
128-
<div className="w-12 h-12 rounded-lg flex items-center justify-center" style={{ backgroundColor: `${providerColor}20` }}>
128+
<div className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0" style={{ backgroundColor: `${providerColor}20` }}>
129129
{PROVIDER_LOGOS[provider.type] ? (
130130
<img src={PROVIDER_LOGOS[provider.type]} alt={provider.name} className="w-8 h-8" />
131131
) : (
132132
<Brain className="h-6 w-6" style={{ color: providerColor }} />
133133
)}
134134
</div>
135-
<div>
136-
<h3 className={`text-lg font-semibold ${theme.text.primary}`}>{provider.name}</h3>
135+
<div className="min-w-0">
136+
<h3 className={`text-lg font-semibold ${theme.text.primary} truncate`}>{provider.name}</h3>
137137
<p className={`text-sm ${theme.text.secondary}`}>{provider.type}</p>
138138
</div>
139139
</div>
140-
<span className={`px-3 py-1 rounded-full text-xs font-medium bg-${statusColor}/20 text-${statusColor}`}>
140+
<span className={`px-3 py-1 rounded-full text-xs font-medium bg-${statusColor}/20 text-${statusColor} flex-shrink-0`}>
141141
{provider.status}
142142
</span>
143143
</div>
@@ -148,14 +148,17 @@ const ProviderCard = ({ provider, onConfigure, onTest, onDisable, onDelete, them
148148
<p className={`text-lg font-semibold ${theme.text.primary}`}>{provider.models || 0}</p>
149149
</div>
150150
<div>
151-
<p className={`text-xs ${theme.text.secondary} mb-1`}>Avg Cost</p>
151+
<p className={`text-xs ${theme.text.secondary} mb-1`}>Usage</p>
152152
<p className={`text-lg font-semibold ${theme.text.primary}`}>
153-
{provider.avg_cost_per_1m ? `$${provider.avg_cost_per_1m.toFixed(2)}` : '$0.00'}/1M
153+
{provider.usage_count != null ? `${provider.usage_count} requests` : '0 requests'}
154154
</p>
155155
</div>
156156
</div>
157157

158-
<div className="flex gap-2">
158+
{/* Spacer pushes actions to bottom */}
159+
<div className="flex-grow" />
160+
161+
<div className="flex gap-2 mt-auto pt-2">
159162
<button
160163
onClick={() => onConfigure(provider)}
161164
className="flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 transition-colors"
@@ -890,7 +893,7 @@ export default function LiteLLMManagement() {
890893
<p className={`${theme.text.secondary}`}>No providers configured yet. Click "Add Provider" to get started.</p>
891894
</div>
892895
) : (
893-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
896+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-fr">
894897
{providers.map(provider => (
895898
<ProviderCard
896899
key={provider.id}

0 commit comments

Comments
 (0)