Refactor/shared and tasks components (#473)

* refactor: remove unused TasksSettings component

* refactor: migrate TodoList component to a new file with improved structure and normalization logic

* refactor: Move Tooltip and DarkModeToggle to shared/ui

* refactor: Move Tooltip and DarkModeToggle to shared/view/ui

* refactor: move GeminiLogo to llm-logo-provider and update imports

* refactor: remove unused GeminiStatus component

* refactor: move components in src/components/ui to src/shared/view/ui

* refactor: move ErrorBoundary component to main-content/view and update imports

* refactor: move VersionUpgradeModal to its own module

* refactor(wizard): rebuild project creation flow as modular TypeScript components

Replace the monolithic `ProjectCreationWizard.jsx` with a feature-based TS
implementation under `src/components/project-creation-wizard`, while preserving
existing behavior and improving readability, maintainability, and state isolation.

Why:
- The previous wizard mixed API logic, flow state, folder browsing, and UI in one file.
- Refactoring and testing were difficult due to tightly coupled concerns.
- We needed stronger type safety and localized component state.

What changed:
- Deleted:
  - `src/components/ProjectCreationWizard.jsx`
- Added new modular structure:
  - `src/components/project-creation-wizard/index.ts`
  - `src/components/project-creation-wizard/ProjectCreationWizard.tsx`
  - `src/components/project-creation-wizard/types.ts`
  - `src/components/project-creation-wizard/data/workspaceApi.ts`
  - `src/components/project-creation-wizard/hooks/useGithubTokens.ts`
  - `src/components/project-creation-wizard/utils/pathUtils.ts`
  - `src/components/project-creation-wizard/components/*`
    - `WizardProgress`, `WizardFooter`, `ErrorBanner`
    - `StepTypeSelection`, `StepConfiguration`, `StepReview`
    - `WorkspacePathField`, `GithubAuthenticationCard`, `FolderBrowserModal`
- Updated import usage:
  - `src/components/sidebar/view/subcomponents/SidebarModals.tsx`
    now imports from `../../../project-creation-wizard`.

Implementation details:
- Migrated wizard logic to TypeScript using `type` aliases only.
- Kept component prop types colocated in each component file.
- Split responsibilities by feature:
  - container/orchestration in `ProjectCreationWizard.tsx`
  - API/SSE and request parsing in `data/workspaceApi.ts`
  - GitHub token loading/caching behavior in `useGithubTokens`
  - path/URL helpers in `utils/pathUtils.ts`
- Localized UI-only state to child components:
  - folder browser modal state (current path, hidden folders, create-folder input)
  - path suggestion dropdown state with debounced lookup
- Preserved existing UX flows:
  - step navigation and validation
  - existing/new workspace modes
  - optional GitHub clone + auth modes
  - clone progress via SSE
  - folder browsing + folder creation
- Added focused comments for non-obvious logic (debounce, SSE auth constraint, path edge cases).

* refactor(quick-settings): migrate panel to typed feature-based modules

Refactor QuickSettingsPanel from a single JSX component into a modular TypeScript feature structure while preserving behavior and translations.

Highlights:
- Replace legacy src/components/QuickSettingsPanel.jsx with a typed entrypoint (src/components/QuickSettingsPanel.tsx).
- Introduce src/components/quick-settings-panel/ with clear separation of concerns:
  - view/: panel shell, header, handle, section wrappers, toggle rows, and content sections.
  - hooks/: drag interactions and whisper mode persistence.
  - constants.ts and types.ts for shared config and strict local typing.
- Move drag logic into useQuickSettingsDrag with explicit touch/mouse handling, drag threshold detection, click suppression after drag, position clamping, and localStorage persistence.
- Keep user-visible behavior intact:
  - same open/close panel interactions.
  - same mobile/desktop drag behavior and persisted handle position.
  - same quick preference toggles and wiring to useUiPreferences.
  - same hidden whisper section behavior and localStorage/event updates.
- Improve readability and maintainability by extracting repetitive setting rows and section scaffolding into reusable components.
- Add focused comments around non-obvious behavior (drag click suppression, touch scroll lock, hidden whisper section intent).
- Keep files small and reviewable (all new/changed files are under 300 lines).

Validation:
- npm run typecheck
- npm run build

* refactor(quick-settings-panel): restructure QuickSettingsPanel import and create index file

* refactor(shared): move shared ui components to share/view/ui without subfolders

* refactor(LanguageSelector): move LanguageSelector to shared UI components

* refactor(prd-editor): modularize PRD editor with typed feature modules

Break the legacy PRDEditor.jsx monolith into a feature-based TypeScript architecture under src/components/prd-editor while keeping behavior parity and readability.

Key changes:

- Replace PRDEditor.jsx with a typed orchestrator component and a compatibility export bridge at src/components/PRDEditor.tsx.

- Split responsibilities into dedicated hooks: document loading/init, existing PRD registry fetching, save workflow with overwrite detection, and keyboard shortcuts.

- Split UI into focused view components: header, editor/preview body, footer stats, loading state, generate-tasks modal, and overwrite-confirm modal.

- Move filename concerns into utility helpers (sanitize, extension handling, default naming) and centralize template/constants.

- Keep component-local state close to the UI that owns it (workspace controls/modal toggles), while shared workflow state remains in the feature container.

- Reuse the existing MarkdownPreview component for safer markdown rendering instead of ad-hoc HTML conversion.

- Update TaskMasterPanel integration to consume typed PRDEditor directly (remove any-cast) and pass isExisting metadata for correct overwrite behavior.

- Keep all new/changed files below 300 lines and add targeted comments where behavior needs clarification.

Validation:

- npm run typecheck

- npm run build

* refactor(TaskMasterPanel): update PRDEditor import path to match new structure

* refactor(TaskMaster): Remove unused TaskMasterSetupWizard and TaskMasterStatus components

* refactor(TaskDetail): remove unused TaskIndicator import

* refactor(task-master): migrate tasks to a typed feature module

- introduce a new feature-oriented TaskMaster domain under src/components/task-master

- add typed TaskMaster context/provider with explicit project, task, MCP, and loading state handling

- split task UI into focused components (panel, board, toolbar, content, card, detail modal, setup/help modals, banner)

- move task board filtering/sorting/kanban derivation into dedicated hooks and utilities

- relocate CreateTaskModal into the feature module and keep task views modular/readable

- remove legacy monolithic TaskList/TaskDetail/TaskCard files and route main task panel to the new feature panel

- replace contexts/TaskMasterContext.jsx with a typed contexts/TaskMasterContext.ts re-export to the feature context

- update MainContent project sync logic to compare by project name to avoid state churn

- validation: npm run typecheck, npm run build

* refactor(MobileNav): remove unused React import and TaskMasterContext

* refactor(auth): migrate login and setup flows to typed feature module

- Introduce a new feature-based auth module under src/components/auth with clear separation of concerns:\n  - context/AuthContext.tsx for session lifecycle, onboarding status checks, token persistence, and auth actions\n  - view/* components for loading, route guarding, form layout, input fields, and error display\n  - shared auth constants, utility helpers, and type aliases (no interfaces)\n- Convert login and setup UIs to TypeScript and keep form state local to each component for readability and component-level ownership\n- Add explicit API payload typing and safe JSON parsing helpers to improve resilience when backend responses are malformed or incomplete\n- Centralize error fallback handling for auth requests to reduce repeated logic

- Replace legacy auth entrypoints with the new feature module in app wiring:\n  - App now imports AuthProvider and ProtectedRoute from src/components/auth\n  - WebSocketContext, TaskMasterContext, and Onboarding now consume useAuth from the new typed auth context\n- Remove duplicated legacy auth screens (LoginForm.jsx, SetupForm.jsx, ProtectedRoute.jsx)\n- Keep backward compatibility by turning src/contexts/AuthContext.jsx into a thin re-export of the new provider/hook

Result: auth code now follows a feature/domain structure, is fully typed, easier to navigate, and cleaner to extend without touching unrelated UI areas.

* refactor(AppContent): update MobileNav import path and add MobileNav component

* refactor(DiffViewer): rename different diff viewers and place them in different components

* refactor(components): reorganize onboarding/provider auth/sidebar indicator into domain features

- Move onboarding out of root-level components into a dedicated feature module:
  - add src/components/onboarding/view/Onboarding.tsx
  - split onboarding UI into focused subcomponents:
    - OnboardingStepProgress
    - GitConfigurationStep
    - AgentConnectionsStep
    - AgentConnectionCard
  - add onboarding-local types and utils for provider status and validation helpers

- Move multi-provider login modal into a dedicated provider-auth feature:
  - add src/components/provider-auth/view/ProviderLoginModal.tsx
  - add src/components/provider-auth/types.ts
  - keep provider-specific command/title behavior and Gemini setup guidance
  - preserve compatibility for both onboarding flow and settings login flow

- Move TaskIndicator into the sidebar domain:
  - add src/components/sidebar/view/subcomponents/TaskIndicator.tsx
  - update SidebarProjectItem to consume local sidebar TaskIndicator

- Update integration points to the new structure:
  - ProtectedRoute now imports onboarding from onboarding feature
  - Settings now imports ProviderLoginModal directly (remove legacy cast wrapper)
  - git panel consumers now import shared GitDiffViewer by explicit name

- Rename git shared diff view to clearer domain naming:
  - replace shared DiffViewer with shared GitDiffViewer
  - update FileChangeItem and CommitHistoryItem imports accordingly

- Remove superseded root-level legacy components:
  - delete src/components/LoginModal.jsx
  - delete src/components/Onboarding.jsx
  - delete src/components/TaskIndicator.jsx
  - delete old src/components/git-panel/view/shared/DiffViewer.tsx

- Result:
  - clearer feature boundaries (auth vs onboarding vs provider-auth vs sidebar)
  - easier navigation and ownership by domain
  - preserved runtime behavior with improved readability and modularity

* refactor(MainContent): remove TaskMasterPanel import and relocate to task-master component

* fix: update import paths for Input component in FileTree and FileTreeNode

* refactor(FileTree): make file tree context menu a typescript component and move it inside the file tree view

* refactor(FileTree): remove unused ScrollArea import

* feat: setup eslint with typescript and react rules, add unused imports plugin

* fix: remove unused imports, functions, and types after discovering using `npm run lint`

* feat: setup eslint-plugin-react, react-refresh, import-x, and tailwindcss plugins with recommended rules and configurations

* chore: reformat files after running `npm run lint:fix`

* chore: add omments about eslint config plugin uses

* feat: add husky and lint-staged for pre-commit linting

* feat: setup commitlint with conventional config

* fix: i18n translations

---------

Co-authored-by: Haileyesus <something@gmail.com>
Co-authored-by: viper151 <simosmik@gmail.com>

src/components/auth/constants.ts

@@ -0,0 +1,8 @@
+export const AUTH_TOKEN_STORAGE_KEY = 'auth-token';
+
+export const AUTH_ERROR_MESSAGES = {
+  authStatusCheckFailed: 'Failed to check authentication status',
+  loginFailed: 'Login failed',
+  registrationFailed: 'Registration failed',
+  networkError: 'Network error. Please try again.',
+} as const;

src/components/auth/context/AuthContext.tsx

@@ -0,0 +1,222 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { IS_PLATFORM } from '../../../constants/config';
+import { api } from '../../../utils/api';
+import { AUTH_ERROR_MESSAGES, AUTH_TOKEN_STORAGE_KEY } from '../constants';
+import type {
+  AuthContextValue,
+  AuthProviderProps,
+  AuthSessionPayload,
+  AuthStatusPayload,
+  AuthUser,
+  AuthUserPayload,
+  OnboardingStatusPayload,
+} from '../types';
+import { parseJsonSafely, resolveApiErrorMessage } from '../utils';
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+const readStoredToken = (): string | null => localStorage.getItem(AUTH_TOKEN_STORAGE_KEY);
+
+const persistToken = (token: string) => {
+  localStorage.setItem(AUTH_TOKEN_STORAGE_KEY, token);
+};
+
+const clearStoredToken = () => {
+  localStorage.removeItem(AUTH_TOKEN_STORAGE_KEY);
+};
+
+export function useAuth(): AuthContextValue {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+
+  return context;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [token, setToken] = useState<string | null>(() => readStoredToken());
+  const [isLoading, setIsLoading] = useState(true);
+  const [needsSetup, setNeedsSetup] = useState(false);
+  const [hasCompletedOnboarding, setHasCompletedOnboarding] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const setSession = useCallback((nextUser: AuthUser, nextToken: string) => {
+    setUser(nextUser);
+    setToken(nextToken);
+    persistToken(nextToken);
+  }, []);
+
+  const clearSession = useCallback(() => {
+    setUser(null);
+    setToken(null);
+    clearStoredToken();
+  }, []);
+
+  const checkOnboardingStatus = useCallback(async () => {
+    try {
+      const response = await api.user.onboardingStatus();
+      if (!response.ok) {
+        return;
+      }
+
+      const payload = await parseJsonSafely<OnboardingStatusPayload>(response);
+      setHasCompletedOnboarding(Boolean(payload?.hasCompletedOnboarding));
+    } catch (caughtError) {
+      console.error('Error checking onboarding status:', caughtError);
+      // Fail open to avoid blocking access on transient onboarding status errors.
+      setHasCompletedOnboarding(true);
+    }
+  }, []);
+
+  const refreshOnboardingStatus = useCallback(async () => {
+    await checkOnboardingStatus();
+  }, [checkOnboardingStatus]);
+
+  const checkAuthStatus = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const statusResponse = await api.auth.status();
+      const statusPayload = await parseJsonSafely<AuthStatusPayload>(statusResponse);
+
+      if (statusPayload?.needsSetup) {
+        setNeedsSetup(true);
+        return;
+      }
+
+      setNeedsSetup(false);
+
+      if (!token) {
+        return;
+      }
+
+      const userResponse = await api.auth.user();
+      if (!userResponse.ok) {
+        clearSession();
+        return;
+      }
+
+      const userPayload = await parseJsonSafely<AuthUserPayload>(userResponse);
+      if (!userPayload?.user) {
+        clearSession();
+        return;
+      }
+
+      setUser(userPayload.user);
+      await checkOnboardingStatus();
+    } catch (caughtError) {
+      console.error('[Auth] Auth status check failed:', caughtError);
+      setError(AUTH_ERROR_MESSAGES.authStatusCheckFailed);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [checkOnboardingStatus, clearSession, token]);
+
+  useEffect(() => {
+    if (IS_PLATFORM) {
+      setUser({ username: 'platform-user' });
+      setNeedsSetup(false);
+      void checkOnboardingStatus().finally(() => {
+        setIsLoading(false);
+      });
+      return;
+    }
+
+    void checkAuthStatus();
+  }, [checkAuthStatus, checkOnboardingStatus]);
+
+  const login = useCallback<AuthContextValue['login']>(
+    async (username, password) => {
+      try {
+        setError(null);
+        const response = await api.auth.login(username, password);
+        const payload = await parseJsonSafely<AuthSessionPayload>(response);
+
+        if (!response.ok || !payload?.token || !payload.user) {
+          const message = resolveApiErrorMessage(payload, AUTH_ERROR_MESSAGES.loginFailed);
+          setError(message);
+          return { success: false, error: message };
+        }
+
+        setSession(payload.user, payload.token);
+        setNeedsSetup(false);
+        await checkOnboardingStatus();
+        return { success: true };
+      } catch (caughtError) {
+        console.error('Login error:', caughtError);
+        setError(AUTH_ERROR_MESSAGES.networkError);
+        return { success: false, error: AUTH_ERROR_MESSAGES.networkError };
+      }
+    },
+    [checkOnboardingStatus, setSession],
+  );
+
+  const register = useCallback<AuthContextValue['register']>(
+    async (username, password) => {
+      try {
+        setError(null);
+        const response = await api.auth.register(username, password);
+        const payload = await parseJsonSafely<AuthSessionPayload>(response);
+
+        if (!response.ok || !payload?.token || !payload.user) {
+          const message = resolveApiErrorMessage(payload, AUTH_ERROR_MESSAGES.registrationFailed);
+          setError(message);
+          return { success: false, error: message };
+        }
+
+        setSession(payload.user, payload.token);
+        setNeedsSetup(false);
+        await checkOnboardingStatus();
+        return { success: true };
+      } catch (caughtError) {
+        console.error('Registration error:', caughtError);
+        setError(AUTH_ERROR_MESSAGES.networkError);
+        return { success: false, error: AUTH_ERROR_MESSAGES.networkError };
+      }
+    },
+    [checkOnboardingStatus, setSession],
+  );
+
+  const logout = useCallback(() => {
+    const tokenToInvalidate = token;
+    clearSession();
+
+    if (tokenToInvalidate) {
+      void api.auth.logout().catch((caughtError: unknown) => {
+        console.error('Logout endpoint error:', caughtError);
+      });
+    }
+  }, [clearSession, token]);
+
+  const contextValue = useMemo<AuthContextValue>(
+    () => ({
+      user,
+      token,
+      isLoading,
+      needsSetup,
+      hasCompletedOnboarding,
+      error,
+      login,
+      register,
+      logout,
+      refreshOnboardingStatus,
+    }),
+    [
+      error,
+      hasCompletedOnboarding,
+      isLoading,
+      login,
+      logout,
+      needsSetup,
+      refreshOnboardingStatus,
+      register,
+      token,
+      user,
+    ],
+  );
+
+  return <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>;
+}

src/components/auth/index.ts

@@ -0,0 +1,2 @@
+export { AuthProvider, useAuth } from './context/AuthContext';
+export { default as ProtectedRoute } from './view/ProtectedRoute';

src/components/auth/types.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react';
+
+export type AuthUser = {
+  id?: number | string;
+  username: string;
+  [key: string]: unknown;
+};
+
+export type AuthActionResult = { success: true } | { success: false; error: string };
+
+export type AuthSessionPayload = {
+  token?: string;
+  user?: AuthUser;
+  error?: string;
+  message?: string;
+};
+
+export type AuthStatusPayload = {
+  needsSetup?: boolean;
+};
+
+export type AuthUserPayload = {
+  user?: AuthUser;
+};
+
+export type OnboardingStatusPayload = {
+  hasCompletedOnboarding?: boolean;
+};
+
+export type ApiErrorPayload = {
+  error?: string;
+  message?: string;
+};
+
+export type AuthContextValue = {
+  user: AuthUser | null;
+  token: string | null;
+  isLoading: boolean;
+  needsSetup: boolean;
+  hasCompletedOnboarding: boolean;
+  error: string | null;
+  login: (username: string, password: string) => Promise<AuthActionResult>;
+  register: (username: string, password: string) => Promise<AuthActionResult>;
+  logout: () => void;
+  refreshOnboardingStatus: () => Promise<void>;
+};
+
+export type AuthProviderProps = {
+  children: ReactNode;
+};

src/components/auth/utils.ts

@@ -0,0 +1,17 @@
+import type { ApiErrorPayload } from './types';
+
+export async function parseJsonSafely<T>(response: Response): Promise<T | null> {
+  try {
+    return (await response.json()) as T;
+  } catch {
+    return null;
+  }
+}
+
+export function resolveApiErrorMessage(payload: ApiErrorPayload | null, fallback: string): string {
+  if (!payload) {
+    return fallback;
+  }
+
+  return payload.error ?? payload.message ?? fallback;
+}

src/components/auth/view/AuthErrorAlert.tsx

@@ -0,0 +1,15 @@
+type AuthErrorAlertProps = {
+  errorMessage: string;
+};
+
+export default function AuthErrorAlert({ errorMessage }: AuthErrorAlertProps) {
+  if (!errorMessage) {
+    return null;
+  }
+
+  return (
+    <div className="rounded-md border border-red-300 bg-red-100 p-3 dark:border-red-800 dark:bg-red-900/20">
+      <p className="text-sm text-red-700 dark:text-red-400">{errorMessage}</p>
+    </div>
+  );
+}

src/components/auth/view/AuthInputField.tsx

@@ -0,0 +1,37 @@
+type AuthInputFieldProps = {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (nextValue: string) => void;
+  placeholder: string;
+  isDisabled: boolean;
+  type?: 'text' | 'password' | 'email';
+};
+
+export default function AuthInputField({
+  id,
+  label,
+  value,
+  onChange,
+  placeholder,
+  isDisabled,
+  type = 'text',
+}: AuthInputFieldProps) {
+  return (
+    <div>
+      <label htmlFor={id} className="mb-1 block text-sm font-medium text-foreground">
+        {label}
+      </label>
+      <input
+        id={id}
+        type={type}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        className="w-full rounded-md border border-border bg-background px-3 py-2 text-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500"
+        placeholder={placeholder}
+        required
+        disabled={isDisabled}
+      />
+    </div>
+  );
+}

src/components/auth/view/AuthLoadingScreen.tsx

@@ -0,0 +1,31 @@
+import { MessageSquare } from 'lucide-react';
+
+const loadingDotAnimationDelays = ['0s', '0.1s', '0.2s'];
+
+export default function AuthLoadingScreen() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <div className="text-center">
+        <div className="mb-4 flex justify-center">
+          <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-primary shadow-sm">
+            <MessageSquare className="h-8 w-8 text-primary-foreground" />
+          </div>
+        </div>
+
+        <h1 className="mb-2 text-2xl font-bold text-foreground">Claude Code UI</h1>
+
+        <div className="flex items-center justify-center space-x-2">
+          {loadingDotAnimationDelays.map((delay) => (
+            <div
+              key={delay}
+              className="h-2 w-2 animate-bounce rounded-full bg-blue-500"
+              style={{ animationDelay: delay }}
+            />
+          ))}
+        </div>
+
+        <p className="mt-2 text-muted-foreground">Loading...</p>
+      </div>
+    </div>
+  );
+}

src/components/auth/view/AuthScreenLayout.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+import { MessageSquare } from 'lucide-react';
+
+type AuthScreenLayoutProps = {
+  title: string;
+  description: string;
+  children: ReactNode;
+  footerText: string;
+  logo?: ReactNode;
+};
+
+export default function AuthScreenLayout({
+  title,
+  description,
+  children,
+  footerText,
+  logo,
+}: AuthScreenLayoutProps) {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <div className="w-full max-w-md">
+        <div className="space-y-6 rounded-lg border border-border bg-card p-8 shadow-lg">
+          <div className="text-center">
+            <div className="mb-4 flex justify-center">
+              {logo ?? (
+                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-primary shadow-sm">
+                  <MessageSquare className="h-8 w-8 text-primary-foreground" />
+                </div>
+              )}
+            </div>
+            <h1 className="text-2xl font-bold text-foreground">{title}</h1>
+            <p className="mt-2 text-muted-foreground">{description}</p>
+          </div>
+
+          {children}
+
+          <div className="text-center">
+            <p className="text-sm text-muted-foreground">{footerText}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/auth/view/LoginForm.tsx

@@ -0,0 +1,90 @@
+import { useCallback, useState } from 'react';
+import type { FormEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAuth } from '../context/AuthContext';
+import AuthErrorAlert from './AuthErrorAlert';
+import AuthInputField from './AuthInputField';
+import AuthScreenLayout from './AuthScreenLayout';
+
+type LoginFormState = {
+  username: string;
+  password: string;
+};
+
+const initialState: LoginFormState = {
+  username: '',
+  password: '',
+};
+
+export default function LoginForm() {
+  const { t } = useTranslation('auth');
+  const { login } = useAuth();
+
+  const [formState, setFormState] = useState<LoginFormState>(initialState);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const updateField = useCallback((field: keyof LoginFormState, value: string) => {
+    setFormState((previous) => ({ ...previous, [field]: value }));
+  }, []);
+
+  const handleSubmit = useCallback(
+    async (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      setErrorMessage('');
+
+      // Keep form validation local so each auth screen owns its own UI feedback.
+      if (!formState.username.trim() || !formState.password) {
+        setErrorMessage(t('login.errors.requiredFields'));
+        return;
+      }
+
+      setIsSubmitting(true);
+      const result = await login(formState.username.trim(), formState.password);
+      if (!result.success) {
+        setErrorMessage(result.error);
+      }
+      setIsSubmitting(false);
+    },
+    [formState.password, formState.username, login, t],
+  );
+
+  return (
+    <AuthScreenLayout
+      title={t('login.title')}
+      description={t('login.description')}
+      footerText="Enter your credentials to access Claude Code UI"
+    >
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <AuthInputField
+          id="username"
+          label={t('login.username')}
+          value={formState.username}
+          onChange={(value) => updateField('username', value)}
+          placeholder={t('login.placeholders.username')}
+          isDisabled={isSubmitting}
+        />
+
+        <AuthInputField
+          id="password"
+          label={t('login.password')}
+          value={formState.password}
+          onChange={(value) => updateField('password', value)}
+          placeholder={t('login.placeholders.password')}
+          isDisabled={isSubmitting}
+          type="password"
+        />
+
+        <AuthErrorAlert errorMessage={errorMessage} />
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full rounded-md bg-blue-600 px-4 py-2 font-medium text-white transition-colors duration-200 hover:bg-blue-700 disabled:bg-blue-400"
+        >
+          {isSubmitting ? t('login.loading') : t('login.submit')}
+        </button>
+      </form>
+    </AuthScreenLayout>
+  );
+}

src/components/auth/view/ProtectedRoute.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import { IS_PLATFORM } from '../../../constants/config';
+import { useAuth } from '../context/AuthContext';
+import Onboarding from '../../onboarding/view/Onboarding';
+import AuthLoadingScreen from './AuthLoadingScreen';
+import LoginForm from './LoginForm';
+import SetupForm from './SetupForm';
+
+type ProtectedRouteProps = {
+  children: ReactNode;
+};
+
+export default function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const { user, isLoading, needsSetup, hasCompletedOnboarding, refreshOnboardingStatus } = useAuth();
+
+  if (isLoading) {
+    return <AuthLoadingScreen />;
+  }
+
+  if (IS_PLATFORM) {
+    if (!hasCompletedOnboarding) {
+      return <Onboarding onComplete={refreshOnboardingStatus} />;
+    }
+
+    return <>{children}</>;
+  }
+
+  if (needsSetup) {
+    return <SetupForm />;
+  }
+
+  if (!user) {
+    return <LoginForm />;
+  }
+
+  if (!hasCompletedOnboarding) {
+    return <Onboarding onComplete={refreshOnboardingStatus} />;
+  }
+
+  return <>{children}</>;
+}

src/components/auth/view/SetupForm.tsx

@@ -0,0 +1,121 @@
+import { useCallback, useState } from 'react';
+import type { FormEvent } from 'react';
+import { useAuth } from '../context/AuthContext';
+import AuthErrorAlert from './AuthErrorAlert';
+import AuthInputField from './AuthInputField';
+import AuthScreenLayout from './AuthScreenLayout';
+
+type SetupFormState = {
+  username: string;
+  password: string;
+  confirmPassword: string;
+};
+
+const initialState: SetupFormState = {
+  username: '',
+  password: '',
+  confirmPassword: '',
+};
+
+function validateSetupForm(formState: SetupFormState): string | null {
+  if (!formState.username.trim() || !formState.password || !formState.confirmPassword) {
+    return 'Please fill in all fields.';
+  }
+
+  if (formState.username.trim().length < 3) {
+    return 'Username must be at least 3 characters long.';
+  }
+
+  if (formState.password.length < 6) {
+    return 'Password must be at least 6 characters long.';
+  }
+
+  if (formState.password !== formState.confirmPassword) {
+    return 'Passwords do not match.';
+  }
+
+  return null;
+}
+
+export default function SetupForm() {
+  const { register } = useAuth();
+
+  const [formState, setFormState] = useState<SetupFormState>(initialState);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const updateField = useCallback((field: keyof SetupFormState, value: string) => {
+    setFormState((previous) => ({ ...previous, [field]: value }));
+  }, []);
+
+  const handleSubmit = useCallback(
+    async (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      setErrorMessage('');
+
+      const validationError = validateSetupForm(formState);
+      if (validationError) {
+        setErrorMessage(validationError);
+        return;
+      }
+
+      setIsSubmitting(true);
+      const result = await register(formState.username.trim(), formState.password);
+      if (!result.success) {
+        setErrorMessage(result.error);
+      }
+      setIsSubmitting(false);
+    },
+    [formState, register],
+  );
+
+  return (
+    <AuthScreenLayout
+      title="Welcome to Claude Code UI"
+      description="Set up your account to get started"
+      footerText="This is a single-user system. Only one account can be created."
+      logo={<img src="/logo.svg" alt="CloudCLI" className="h-16 w-16" />}
+    >
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <AuthInputField
+          id="username"
+          label="Username"
+          value={formState.username}
+          onChange={(value) => updateField('username', value)}
+          placeholder="Enter your username"
+          isDisabled={isSubmitting}
+        />
+
+        <AuthInputField
+          id="password"
+          label="Password"
+          value={formState.password}
+          onChange={(value) => updateField('password', value)}
+          placeholder="Enter your password"
+          isDisabled={isSubmitting}
+          type="password"
+        />
+
+        <AuthInputField
+          id="confirmPassword"
+          label="Confirm Password"
+          value={formState.confirmPassword}
+          onChange={(value) => updateField('confirmPassword', value)}
+          placeholder="Confirm your password"
+          isDisabled={isSubmitting}
+          type="password"
+        />
+
+        <AuthErrorAlert errorMessage={errorMessage} />
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full rounded-md bg-blue-600 px-4 py-2 font-medium text-white transition-colors duration-200 hover:bg-blue-700 disabled:bg-blue-400"
+        >
+          {isSubmitting ? 'Setting up...' : 'Create Account'}
+        </button>
+      </form>
+    </AuthScreenLayout>
+  );
+}