2 Commits

Author SHA1 Message Date
simos
2fb1e1cfb0 fixes 2025-11-11 17:20:23 +01:00
simos
0f4b3666fc Fix WebSocket connection in platform mode
- Skip localStorage token check when VITE_IS_PLATFORM=true
- Connect to WebSocket without token parameter in platform mode
- Allows proxy-based authentication through Cloudflare edge
2025-11-11 17:15:57 +01:00
2 changed files with 71 additions and 29 deletions

View File

@@ -467,20 +467,37 @@ function Sidebar({
<div <div
className="h-full flex flex-col bg-card md:select-none" className="h-full flex flex-col bg-card md:select-none"
style={isPWA && isMobile ? { paddingTop: '44px' } : {}}
> >
{/* Header */} {/* Header */}
<div className="md:p-4 md:border-b md:border-border"> <div className="md:p-4 md:border-b md:border-border">
{/* Desktop Header */} {/* Desktop Header */}
<div className="hidden md:flex items-center justify-between"> <div className="hidden md:flex items-center justify-between">
<div className="flex items-center gap-3"> {import.meta.env.VITE_IS_PLATFORM === 'true' ? (
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center shadow-sm"> <a
<MessageSquare className="w-4 h-4 text-primary-foreground" /> href="https://cloudcli.ai/dashboard"
className="flex items-center gap-3 hover:opacity-80 transition-opacity group"
title="View Environments"
>
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center shadow-sm group-hover:shadow-md transition-shadow">
<MessageSquare className="w-4 h-4 text-primary-foreground" />
</div>
<div>
<h1 className="text-lg font-bold text-foreground">Claude Code UI</h1>
<p className="text-sm text-muted-foreground">AI coding assistant interface</p>
</div>
</a>
) : (
<div className="flex items-center gap-3">
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center shadow-sm">
<MessageSquare className="w-4 h-4 text-primary-foreground" />
</div>
<div>
<h1 className="text-lg font-bold text-foreground">Claude Code UI</h1>
<p className="text-sm text-muted-foreground">AI coding assistant interface</p>
</div>
</div> </div>
<div> )}
<h1 className="text-lg font-bold text-foreground">Claude Code UI</h1>
<p className="text-sm text-muted-foreground">AI coding assistant interface</p>
</div>
</div>
{onToggleSidebar && ( {onToggleSidebar && (
<Button <Button
variant="ghost" variant="ghost"
@@ -500,21 +517,38 @@ function Sidebar({
</Button> </Button>
)} )}
</div> </div>
{/* Mobile Header */} {/* Mobile Header */}
<div <div
className="md:hidden p-3 border-b border-border" className="md:hidden p-3 border-b border-border"
style={isPWA && isMobile ? { paddingTop: '16px' } : {}}
> >
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> {import.meta.env.VITE_IS_PLATFORM === 'true' ? (
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center"> <a
<MessageSquare className="w-4 h-4 text-primary-foreground" /> href="https://cloudcli.ai/dashboard"
className="flex items-center gap-3 active:opacity-70 transition-opacity"
title="View Environments"
>
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
<MessageSquare className="w-4 h-4 text-primary-foreground" />
</div>
<div>
<h1 className="text-lg font-semibold text-foreground">Claude Code UI</h1>
<p className="text-sm text-muted-foreground">Projects</p>
</div>
</a>
) : (
<div className="flex items-center gap-3">
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
<MessageSquare className="w-4 h-4 text-primary-foreground" />
</div>
<div>
<h1 className="text-lg font-semibold text-foreground">Claude Code UI</h1>
<p className="text-sm text-muted-foreground">Projects</p>
</div>
</div> </div>
<div> )}
<h1 className="text-lg font-semibold text-foreground">Claude Code UI</h1>
<p className="text-sm text-muted-foreground">Projects</p>
</div>
</div>
<div className="flex gap-2"> <div className="flex gap-2">
<button <button
className="w-8 h-8 rounded-md bg-background border border-border flex items-center justify-center active:scale-95 transition-all duration-150" className="w-8 h-8 rounded-md bg-background border border-border flex items-center justify-center active:scale-95 transition-all duration-150"
@@ -1306,7 +1340,7 @@ function Sidebar({
{/* Settings Section */} {/* Settings Section */}
<div className="md:p-2 md:border-t md:border-border flex-shrink-0"> <div className="md:p-2 md:border-t md:border-border flex-shrink-0">
{/* Mobile Settings */} {/* Mobile Settings */}
<div className="md:hidden p-4 pb-mobile-nav border-t border-border/50"> <div className="md:hidden p-4 pb-20 border-t border-border/50">
<button <button
className="w-full h-14 bg-muted/50 hover:bg-muted/70 rounded-2xl flex items-center justify-start gap-4 px-4 active:scale-[0.98] transition-all duration-150" className="w-full h-14 bg-muted/50 hover:bg-muted/70 rounded-2xl flex items-center justify-start gap-4 px-4 active:scale-[0.98] transition-all duration-150"
onClick={onShowSettings} onClick={onShowSettings}

View File

@@ -21,20 +21,25 @@ export function useWebSocket() {
const connect = async () => { const connect = async () => {
try { try {
// Get authentication token // Get authentication token (skip in platform mode)
const token = localStorage.getItem('auth-token'); let token = null;
if (!token) { const isPlatform = import.meta.env.VITE_IS_PLATFORM === 'true';
console.warn('No authentication token found for WebSocket connection');
return; if (!isPlatform) {
token = localStorage.getItem('auth-token');
if (!token) {
console.warn('No authentication token found for WebSocket connection');
return;
}
} }
// Fetch server configuration to get the correct WebSocket URL // Fetch server configuration to get the correct WebSocket URL
let wsBaseUrl; let wsBaseUrl;
try { try {
const configResponse = await fetch('/api/config', { const configResponse = await fetch('/api/config', {
headers: { headers: token ? {
'Authorization': `Bearer ${token}` 'Authorization': `Bearer ${token}`
} } : {}
}); });
const config = await configResponse.json(); const config = await configResponse.json();
wsBaseUrl = config.wsUrl; wsBaseUrl = config.wsUrl;
@@ -53,9 +58,12 @@ export function useWebSocket() {
const apiPort = window.location.port === '3001' ? '3002' : window.location.port; const apiPort = window.location.port === '3001' ? '3002' : window.location.port;
wsBaseUrl = `${protocol}//${window.location.hostname}:${apiPort}`; wsBaseUrl = `${protocol}//${window.location.hostname}:${apiPort}`;
} }
// Include token in WebSocket URL as query parameter // Include token in WebSocket URL as query parameter (only in OSS mode)
const wsUrl = `${wsBaseUrl}/ws?token=${encodeURIComponent(token)}`; let wsUrl = `${wsBaseUrl}/ws`;
if (token) {
wsUrl += `?token=${encodeURIComponent(token)}`;
}
const websocket = new WebSocket(wsUrl); const websocket = new WebSocket(wsUrl);
websocket.onopen = () => { websocket.onopen = () => {