create-principles-disciple 1.82.0 → 1.83.0

package/console/dist/ui/App.js

@@ -1,38 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from "react";
-import { HashRouter, Routes, Route } from "react-router-dom";
-import { I18nextProvider, useTranslation } from "react-i18next";
+import { HashRouter, Routes, Route, Navigate, useNavigate } from "react-router-dom";
+import { I18nextProvider } from "react-i18next";
 import i18n from "./i18n/index.js";
 import { ThemeProvider } from "./components/theme-provider.js";
-import { ThemeToggle } from "./components/theme-toggle.js";
-import { LanguageSwitcher } from "./components/language-switcher.js";
-import { AppSidebar } from "./components/app-sidebar.js";
-import { Button } from "./components/ui/button.js";
-import { TasksPage } from "./pages/TasksPage.js";
-import { OverviewPage } from "./pages/OverviewPage.js";
-import { FeedbackPage } from "./pages/FeedbackPage.js";
-import { PainPage } from "./pages/PainPage.js";
-import { ApprovalsPage } from "./pages/ApprovalsPage.js";
-import { GatesPage } from "./pages/GatesPage.js";
-import { SamplesPage } from "./pages/SamplesPage.js";
-import { EvolutionPage } from "./pages/EvolutionPage.js";
-import { ThinkingModelsPage } from "./pages/ThinkingModelsPage.js";
-import { SettingsPage } from "./pages/SettingsPage.js";
-import { CentralPage } from "./pages/CentralPage.js";
-import { DataFlowPage } from "./pages/DataFlowPage.js";
-import { EventLogPage } from "./pages/EventLogPage.js";
-import { PrinciplesPage } from "./pages/PrinciplesPage.js";
-import { PrincipleDetailPage } from "./pages/PrincipleDetailPage.js";
-import { AgentsPage } from "./pages/AgentsPage.js";
-import { LoginPage } from "./pages/LoginPage.js";
-import { UpdatePage } from "./pages/UpdatePage.js";
-import { ReportProblemPage } from "./pages/ReportProblemPage.js";
+import { AppSidebar } from "./components/layout/app-sidebar.js";
+import { SplashScreen } from "./components/auth/splash-screen.js";
+import { LoginForm } from "./components/auth/login-form.js";
 import { ErrorBoundary } from "./components/error-boundary.js";
-import { getToken, clearToken, checkAuth } from "./api.js";
-export function App() {
-    const { t } = useTranslation();
+import { checkAuth } from "./api.js";
+// New page imports (CR2 directory structure)
+import { FocusPage } from "./pages/focus/FocusPage.js";
+import { PainPage } from "./pages/pain/PainPage.js";
+import { PrinciplesPage } from "./pages/principles/PrinciplesPage.js";
+import { PrincipleDetailPage } from "./pages/principles/PrincipleDetailPage.js";
+import { ActivationPage } from "./pages/activation/ActivationPage.js";
+import { DebtPage } from "./pages/debt/DebtPage.js";
+import { ControlCenterPage } from "./pages/control-center/ControlCenterPage.js";
+import { SettingsPage } from "./pages/settings/SettingsPage.js";
+import { UpdatePage } from "./pages/settings/UpdatePage.js";
+import { ReportProblemPage } from "./pages/report-problem/ReportProblemPage.js";
+import { DesignSystemPage } from "./pages/design-system/DesignSystemPage.js";
+// Vite replaces import.meta.env.DEV with a boolean literal at build time.
+// The cast avoids TS2339 without needing a generated .d.ts file.
+const IS_DEV = import.meta.env.DEV;
+function AuthRoutes() {
     const [authed, setAuthed] = useState(null);
-    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    const [showSplash, setShowSplash] = useState(true);
+    const navigate = useNavigate();
     const verifyAuth = useCallback(async () => {
         const valid = await checkAuth();
         setAuthed(valid);
@@ -40,15 +35,96 @@ export function App() {
     useEffect(() => {
         verifyAuth();
     }, [verifyAuth]);
-    if (authed === null) {
-        return (_jsx(ThemeProvider, { children: _jsx("div", { className: "min-h-screen flex items-center justify-center", children: _jsx("div", { className: "text-muted-foreground animate-pulse", children: "Checking authentication\u2026" }) }) }));
-    }
-    if (!authed) {
-        return (_jsx(ThemeProvider, { children: _jsx(I18nextProvider, { i18n: i18n, children: _jsx(LoginPage, { onAuthSuccess: () => setAuthed(true) }) }) }));
-    }
-    const handleSignOut = () => {
-        clearToken();
-        setAuthed(false);
-    };
-    return (_jsx(ThemeProvider, { children: _jsx(I18nextProvider, { i18n: i18n, children: _jsx(HashRouter, { children: _jsxs("div", { className: "min-h-screen bg-background text-foreground", children: [_jsx("a", { href: "#main-content", className: "sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-background focus:text-foreground", children: "Skip to main content" }), _jsx(AppSidebar, { collapsed: sidebarCollapsed, onCollapsedChange: setSidebarCollapsed }), _jsxs("div", { className: `transition-[margin] duration-300 motion-reduce:transition-none flex flex-col min-h-screen ${sidebarCollapsed ? "ml-16" : "ml-56"}`, children: [_jsx("header", { className: "sticky top-0 z-40 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: _jsxs("div", { className: "flex items-center justify-between px-6 py-3", children: [_jsx("div", { className: "flex items-center gap-4", children: _jsx("span", { className: "text-sm font-medium text-muted-foreground", children: "PD Console v0.2" }) }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(LanguageSwitcher, {}), _jsx(ThemeToggle, {}), getToken() && (_jsx(Button, { variant: "ghost", size: "sm", onClick: handleSignOut, children: t("common:logout") }))] })] }) }), _jsx("main", { id: "main-content", className: "flex-1 p-6 overflow-y-auto", children: _jsx(ErrorBoundary, { children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(PainPage, {}) }), _jsx(Route, { path: "/pain", element: _jsx(PainPage, {}) }), _jsx(Route, { path: "/approvals", element: _jsx(ApprovalsPage, {}) }), _jsx(Route, { path: "/overview", element: _jsx(OverviewPage, {}) }), _jsx(Route, { path: "/central", element: _jsx(CentralPage, {}) }), _jsx(Route, { path: "/tasks", element: _jsx(TasksPage, {}) }), _jsx(Route, { path: "/feedback", element: _jsx(FeedbackPage, {}) }), _jsx(Route, { path: "/gates", element: _jsx(GatesPage, {}) }), _jsx(Route, { path: "/samples", element: _jsx(SamplesPage, {}) }), _jsx(Route, { path: "/evolution", element: _jsx(EvolutionPage, {}) }), _jsx(Route, { path: "/principles", element: _jsx(PrinciplesPage, {}) }), _jsx(Route, { path: "/principles/:id", element: _jsx(PrincipleDetailPage, {}) }), _jsx(Route, { path: "/agents", element: _jsx(AgentsPage, {}) }), _jsx(Route, { path: "/data-flow", element: _jsx(DataFlowPage, {}) }), _jsx(Route, { path: "/event-log", element: _jsx(EventLogPage, {}) }), _jsx(Route, { path: "/thinking-models", element: _jsx(ThinkingModelsPage, {}) }), _jsx(Route, { path: "/settings", element: _jsx(SettingsPage, {}) }), _jsx(Route, { path: "/settings/update", element: _jsx(UpdatePage, {}) }), _jsx(Route, { path: "/report-problem", element: _jsx(ReportProblemPage, {}) })] }) }) })] })] }) }) }) }));
+    useEffect(() => {
+        if (authed !== true)
+            return;
+        const handleKeyDown = (e) => {
+            console.log('handleKeyDown event:', e.key, 'altKey:', e.altKey);
+            if (!e.altKey)
+                return;
+            const target = e.target;
+            if (target &&
+                (target.tagName === "INPUT" ||
+                    target.tagName === "TEXTAREA" ||
+                    target.tagName === "SELECT" ||
+                    target.isContentEditable)) {
+                console.log('handleKeyDown ignored: input focused');
+                return;
+            }
+            let targetPath = null;
+            switch (e.key) {
+                case "3":
+                    targetPath = "/focus";
+                    break;
+                case "4":
+                    targetPath = "/pain";
+                    break;
+                case "5":
+                    targetPath = "/principles";
+                    break;
+                case "6":
+                    targetPath = "/activation";
+                    break;
+                case "7":
+                    targetPath = "/debt";
+                    break;
+                case "8":
+                    targetPath = "/control-center";
+                    break;
+                case "9":
+                    targetPath = "/report-problem";
+                    break;
+                case "0":
+                    targetPath = "/settings";
+                    break;
+                default:
+                    console.log('handleKeyDown: key mismatch:', e.key);
+                    return;
+            }
+            if (targetPath) {
+                console.log('handleKeyDown navigating to:', targetPath);
+                e.preventDefault();
+                navigate(targetPath);
+            }
+        };
+        console.log('Registering handleKeyDown listener');
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            console.log('Removing handleKeyDown listener');
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [authed, navigate]);
+    useEffect(() => {
+        if (!showSplash)
+            return;
+        if (authed === null)
+            return; // still checking
+        // Wait for splash animation to complete before navigating
+        // SplashScreen has its own 2200ms timer; we wait for it to call onComplete
+        // This effect only handles the case where auth resolves after splash is done
+    }, [authed, showSplash, navigate]);
+    useEffect(() => {
+        if (authed === true) {
+            const currentPath = window.location.hash;
+            if (currentPath === "#/login" || currentPath === "#/splash" || currentPath === "#/") {
+                navigate("/focus", { replace: true });
+            }
+        }
+    }, [authed, navigate]);
+    const handleAuthSuccess = useCallback(() => {
+        setAuthed(true);
+        navigate("/focus", { replace: true });
+    }, [navigate]);
+    return (_jsxs(Routes, { children: [_jsx(Route, { path: "/splash", element: _jsx(SplashScreen, { onComplete: () => {
+                        setShowSplash(false);
+                        if (authed) {
+                            navigate("/focus", { replace: true });
+                        }
+                        else {
+                            navigate("/login", { replace: true });
+                        }
+                    } }) }), _jsx(Route, { path: "/login", element: _jsx(LoginForm, { onAuthSuccess: handleAuthSuccess }) }), _jsx(Route, { path: "/*", element: authed === null ? (_jsx("div", { className: "min-h-screen bg-paper flex items-center justify-center", children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx("div", { className: "w-8 h-8 border-2 border-gov border-t-transparent rounded-full animate-spin" }), _jsx("span", { className: "text-[12px] font-mono tracking-wider text-ink-3 uppercase", children: "Verifying Session..." })] }) })) : authed ? (_jsxs("div", { className: "min-h-screen bg-paper text-ink", children: [_jsx("a", { href: "#main-content", className: "sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-paper focus:text-ink", children: "Skip to main content" }), _jsx(AppSidebar, {}), _jsx("main", { id: "main-content", className: "ml-[256px] min-h-screen overflow-y-auto", children: _jsx(ErrorBoundary, { children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Navigate, { to: "/focus", replace: true }) }), _jsx(Route, { path: "/focus", element: _jsx(FocusPage, {}) }), _jsx(Route, { path: "/pain", element: _jsx(PainPage, {}) }), _jsx(Route, { path: "/principles", element: _jsx(PrinciplesPage, {}) }), _jsx(Route, { path: "/principles/:id", element: _jsx(PrincipleDetailPage, {}) }), _jsx(Route, { path: "/activation", element: _jsx(ActivationPage, {}) }), _jsx(Route, { path: "/debt", element: _jsx(DebtPage, {}) }), _jsx(Route, { path: "/control-center", element: _jsx(ControlCenterPage, {}) }), _jsx(Route, { path: "/settings", element: _jsx(SettingsPage, {}) }), _jsx(Route, { path: "/update", element: _jsx(UpdatePage, {}) }), _jsx(Route, { path: "/report-problem", element: _jsx(ReportProblemPage, {}) }), IS_DEV && (_jsx(Route, { path: "/design-system", element: _jsx(DesignSystemPage, {}) })), !IS_DEV && (_jsx(Route, { path: "/design-system", element: _jsx(Navigate, { to: "/focus", replace: true }) }))] }) }) })] })) : (_jsx(Navigate, { to: "/login", replace: true })) })] }));
+}
+export function App() {
+    return (_jsx(ThemeProvider, { children: _jsx(I18nextProvider, { i18n: i18n, children: _jsx(HashRouter, { children: _jsx(AuthRoutes, {}) }) }) }));
 }