GCP Project ID (read-only)
+Missing Project ID
++ This may cause errors. Remove the account and re-add it to fetch the + project ID. +
+{quota?.error || 'Quota information unavailable'}
+{ diff --git a/ui/src/lib/api-client.ts b/ui/src/lib/api-client.ts index 22d67bb0..d2361016 100644 --- a/ui/src/lib/api-client.ts +++ b/ui/src/lib/api-client.ts @@ -83,6 +83,8 @@ export interface OAuthAccount { pausedAt?: string; /** Account tier: free or paid (Pro/Ultra combined) */ tier?: 'free' | 'paid' | 'unknown'; + /** GCP Project ID (Antigravity only) - read-only */ + projectId?: string; } export interface AuthStatus { @@ -493,6 +495,14 @@ export const api = { method: 'PUT', body: JSON.stringify(config), }), + /** Get backend setting */ + getBackend: () => request<{ backend: 'original' | 'plus' }>('/cliproxy-server/backend'), + /** Update backend setting */ + updateBackend: (backend: 'original' | 'plus', force = false) => + request<{ backend: 'original' | 'plus' }>('/cliproxy-server/backend', { + method: 'PUT', + body: JSON.stringify({ backend, force }), + }), /** Test remote proxy connection */ test: (params: { host: string; diff --git a/ui/src/lib/auth-api.ts b/ui/src/lib/auth-api.ts new file mode 100644 index 00000000..7370932d --- /dev/null +++ b/ui/src/lib/auth-api.ts @@ -0,0 +1,61 @@ +/** + * Auth API Client + * Handles authentication-related API calls. + */ + +const BASE_URL = '/api/auth'; + +export interface AuthCheckResponse { + authRequired: boolean; + authenticated: boolean; + username: string | null; +} + +export interface AuthSetupResponse { + enabled: boolean; + configured: boolean; + sessionTimeoutHours: number; +} + +export interface LoginResponse { + success: boolean; + username: string; +} + +async function request(url: string, options?: RequestInit): Promise { + const res = await fetch(`${BASE_URL}${url}`, { + headers: { 'Content-Type': 'application/json' }, + credentials: 'include', // Include cookies for session + ...options, + }); + + if (!res.ok) { + const error = await res.json().catch(() => ({ error: 'Unknown error' })); + throw new Error(error.error || res.statusText); + } + + return res.json(); +} + +/** Check authentication status */ +export function checkAuth(): Promise { + return request('/check'); +} + +/** Check auth setup status */ +export function getAuthSetup(): Promise { + return request('/setup'); +} + +/** Login with username/password */ +export function login(username: string, password: string): Promise { + return request('/login', { + method: 'POST', + body: JSON.stringify({ username, password }), + }); +} + +/** Logout current session */ +export function logout(): Promise<{ success: boolean }> { + return request('/logout', { method: 'POST' }); +} diff --git a/ui/src/pages/login.tsx b/ui/src/pages/login.tsx new file mode 100644 index 00000000..0550e9a3 --- /dev/null +++ b/ui/src/pages/login.tsx @@ -0,0 +1,115 @@ +/** + * Login Page - Dashboard authentication form + * Uses shadcn/ui Card and Input components. + */ + +import { useState, useEffect } from 'react'; +import { useNavigate, useLocation } from 'react-router-dom'; +import { useAuth } from '@/contexts/auth-context'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { AlertCircle, Loader2, Lock } from 'lucide-react'; +import { Alert, AlertDescription } from '@/components/ui/alert'; + +export function LoginPage() { + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const [error, setError] = useState (null); + const [loading, setLoading] = useState(false); + + const { login, authRequired, isAuthenticated } = useAuth(); + const navigate = useNavigate(); + const location = useLocation(); + + // Get redirect destination (default to home) + const from = (location.state as { from?: { pathname: string } })?.from?.pathname || '/'; + + // Redirect if already authenticated or auth not required (via useEffect to avoid render side effects) + useEffect(() => { + if (isAuthenticated || !authRequired) { + navigate(from, { replace: true }); + } + }, [isAuthenticated, authRequired, navigate, from]); + + // Show nothing while redirecting + if (isAuthenticated || !authRequired) { + return null; + } + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setError(null); + setLoading(true); + + try { + await login(username, password); + navigate(from, { replace: true }); + } catch (err) { + setError(err instanceof Error ? err.message : 'Login failed'); + } finally { + setLoading(false); + } + }; + + return ( + ++ ); +} diff --git a/ui/src/pages/settings/components/tab-navigation.tsx b/ui/src/pages/settings/components/tab-navigation.tsx index fb203163..00aecab9 100644 --- a/ui/src/pages/settings/components/tab-navigation.tsx +++ b/ui/src/pages/settings/components/tab-navigation.tsx @@ -4,7 +4,7 @@ */ import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'; -import { Globe, Settings2, Server, KeyRound, Brain } from 'lucide-react'; +import { Globe, Settings2, Server, KeyRound, Brain, Archive } from 'lucide-react'; import type { SettingsTab } from '../types'; interface TabNavigationProps { @@ -36,6 +36,10 @@ export function TabNavigation({ activeTab, onTabChange }: TabNavigationProps) {+ ++ ++++ CCS Dashboard +Enter your credentials to access the dashboard ++ + +Auth + + ); diff --git a/ui/src/pages/settings/hooks/use-settings-tab.ts b/ui/src/pages/settings/hooks/use-settings-tab.ts index 425983d8..8efd3123 100644 --- a/ui/src/pages/settings/hooks/use-settings-tab.ts +++ b/ui/src/pages/settings/hooks/use-settings-tab.ts @@ -8,7 +8,8 @@ import type { SettingsTab } from '../types'; export function useSettingsTab() { const [searchParams, setSearchParams] = useSearchParams(); - const tabParam = searchParams.get('tab'); + // Normalize to lowercase for case-insensitive matching (fixes ?tab=Backups vs ?tab=backups) + const tabParam = searchParams.get('tab')?.toLowerCase(); const activeTab: SettingsTab = tabParam === 'globalenv' ? 'globalenv' @@ -18,7 +19,9 @@ export function useSettingsTab() { ? 'auth' : tabParam === 'thinking' ? 'thinking' - : 'websearch'; + : tabParam === 'backups' + ? 'backups' + : 'websearch'; const setActiveTab = useCallback( (tab: SettingsTab) => { diff --git a/ui/src/pages/settings/index.tsx b/ui/src/pages/settings/index.tsx index 3068e5fb..b7d447af 100644 --- a/ui/src/pages/settings/index.tsx +++ b/ui/src/pages/settings/index.tsx @@ -3,10 +3,18 @@ * Main entry point with lazy-loaded sections and URL tab persistence */ -import { lazy, Suspense, startTransition, useEffect } from 'react'; +import { + lazy, + Suspense, + startTransition, + useEffect, + Component, + type ReactNode, + type ComponentType, +} from 'react'; import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels'; import { Button } from '@/components/ui/button'; -import { RefreshCw, FileCode, Copy, Check, GripVertical } from 'lucide-react'; +import { RefreshCw, FileCode, Copy, Check, GripVertical, AlertCircle } from 'lucide-react'; import { CodeEditor } from '@/components/shared/code-editor'; import { SettingsProvider } from './context'; import { useSettingsTab, useRawConfig } from './hooks'; @@ -14,12 +22,74 @@ import { TabNavigation } from './components/tab-navigation'; import { SectionSkeleton } from './components/section-skeleton'; import type { SettingsTab } from './types'; -// Lazy-loaded sections -const WebSearchSection = lazy(() => import('./sections/websearch')); -const GlobalEnvSection = lazy(() => import('./sections/globalenv-section')); -const ThinkingSection = lazy(() => import('./sections/thinking')); -const ProxySection = lazy(() => import('./sections/proxy')); -const AuthSection = lazy(() => import('./sections/auth-section')); +/** + * Retry wrapper for dynamic imports with exponential backoff + * Handles temporary network failures gracefully + */ +function retryImport+ Backups + >( + importFn: () => Promise<{ default: T }>, + retries = 3, + delay = 1000 +): Promise<{ default: T }> { + return importFn().catch((error: Error) => { + if (retries <= 0) throw error; + return new Promise((resolve) => setTimeout(resolve, delay)).then(() => + retryImport(importFn, retries - 1, delay * 2) + ); + }); +} + +/** Lazy load with automatic retry on failure */ +function lazyWithRetry >(importFn: () => Promise<{ default: T }>) { + return lazy(() => retryImport(importFn)); +} + +// Lazy-loaded sections with retry capability +const WebSearchSection = lazyWithRetry(() => import('./sections/websearch')); +const GlobalEnvSection = lazyWithRetry(() => import('./sections/globalenv-section')); +const ThinkingSection = lazyWithRetry(() => import('./sections/thinking')); +const ProxySection = lazyWithRetry(() => import('./sections/proxy')); +const AuthSection = lazyWithRetry(() => import('./sections/auth-section')); +const BackupsSection = lazyWithRetry(() => import('./sections/backups-section')); + +// Error Boundary for lazy-loaded sections +class SectionErrorBoundary extends Component< + { children: ReactNode }, + { hasError: boolean; error: Error | null } +> { + constructor(props: { children: ReactNode }) { + super(props); + this.state = { hasError: false, error: null }; + } + + static getDerivedStateFromError(error: Error) { + return { hasError: true, error }; + } + + render() { + if (this.state.hasError) { + return ( + ++ ); + } + + return this.props.children; + } +} // Inner component that uses context function SettingsPageInner() { @@ -55,13 +125,16 @@ function SettingsPageInner() {+++ Failed to load section
+{this.state.error?.message || 'Unknown error occurred'}
+ +
+ Restore previous versions of your settings.json file. Backups are created + automatically when settings are modified. +
+No backups available
++ Backups will appear here when you modify settings +
+{backup.timestamp}
+ {index === 0 && ( +{backup.date}
+
+ {confirmRestore}
+
+ . This action cannot be undone.
+ Debug Mode
++ Enable developer diagnostics in browser console +
++ Debug mode enabled. Check browser console for detailed logs. +
+ )} +