Initial commit from ux_aura_central

features/workspace/WorkspaceContainer.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect } from 'react';
+import { useAuth } from '../../hooks/useAuth';
+import { isStudioMode } from '../../services/apiUtils';
+import MainContainer from '../../containers/MainContainer';
+import WorkspaceView from './WorkspaceView';
+
+/**
+ * WorkspaceContainer handles the 'Smart' logic:
+ * - Authentication state monitoring
+ * - Redirections
+ * - Data fetching/preparation for the View
+ */
+const WorkspaceContainer: React.FC = () => {
+    const { authState, user, workspaceUrl, signOutUrl } = useAuth();
+
+    useEffect(() => {
+        if (authState === 'unauthorized' && !isStudioMode()) {
+            window.location.href = '/home/login';
+        }
+    }, [authState]);
+
+    if (authState === 'checking') {
+        return (
+            <div className="min-h-screen flex flex-col items-center justify-center bg-slate-50 dark:bg-slate-900 text-slate-700 dark:text-slate-300">
+                <div className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-cyan-500"></div>
+                <p className="mt-4 text-lg font-medium">Verifying access...</p>
+            </div>
+        );
+    }
+    
+    if (authState === 'unauthorized' && isStudioMode()) {
+        return (
+            <div className="min-h-screen flex flex-col items-center justify-center bg-slate-50 dark:bg-slate-900 p-4">
+                <div className="text-center bg-white dark:bg-slate-800 p-8 rounded-lg shadow-2xl border border-slate-200 dark:border-slate-700">
+                    <h1 className="text-4xl font-bold text-red-600 mb-4">Unauthorized</h1>
+                    <p className="text-slate-600 dark:text-slate-300 text-lg">You do not have permission to access this application.</p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <MainContainer user={user} workspaceUrl={workspaceUrl} signOutUrl={signOutUrl}>
+            <WorkspaceView user={user} />
+        </MainContainer>
+    );
+};
+
+export default WorkspaceContainer;

features/workspace/WorkspaceView.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { User } from '../../types';
+import StatusGrid from './components/StatusGrid';
+
+interface WorkspaceViewProps {
+    user: User | null;
+}
+
+/**
+ * WorkspaceView is a 'Dumb' component:
+ * - It only receives data via props.
+ * - It defines the visual layout and style.
+ */
+const WorkspaceView: React.FC<WorkspaceViewProps> = ({ user }) => {
+    return (
+        <div className="flex-1 flex flex-col items-center justify-center p-8 text-center animate-in fade-in slide-in-from-bottom-4 duration-700">
+            <div className="w-20 h-20 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center mb-6">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                </svg>
+            </div>
+            
+            <h2 className="text-3xl font-bold text-slate-800 dark:text-white mb-2">
+                Workspace Ready
+            </h2>
+            
+            <p className="text-slate-500 dark:text-slate-400 max-w-lg mx-auto mb-8">
+                The HumanizeIQ shared framework is initialized. Your authentication context and AI connection layer are fully wired up.
+            </p>
+
+            <StatusGrid user={user} />
+        </div>
+    );
+};
+
+export default WorkspaceView;

features/workspace/components/StatusCard.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface StatusCardProps {
+    label: string;
+    value: string;
+    colorClass: string;
+}
+
+const StatusCard: React.FC<StatusCardProps> = ({ label, value, colorClass }) => {
+    return (
+        <div className="p-4 bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm text-left">
+            <p className={`text-xs font-bold uppercase mb-1 ${colorClass}`}>
+                {label}
+            </p>
+            <p className="text-sm text-slate-700 dark:text-slate-300">
+                {value}
+            </p>
+        </div>
+    );
+};
+
+export default StatusCard;

features/workspace/components/StatusGrid.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { User } from '../../../types';
+import StatusCard from './StatusCard';
+
+interface StatusGridProps {
+    user: User | null;
+}
+
+const StatusGrid: React.FC<StatusGridProps> = ({ user }) => {
+    return (
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 w-full max-w-2xl">
+            <StatusCard 
+                label="Auth" 
+                value={`Verified for ${user?.name || 'Guest'}`} 
+                colorClass="text-blue-600" 
+            />
+            <StatusCard 
+                label="Theme" 
+                value="Dark mode & a11y integrated" 
+                colorClass="text-purple-600" 
+            />
+            <StatusCard 
+                label="AI" 
+                value="Gemini API ready" 
+                colorClass="text-green-600" 
+            />
+        </div>
+    );
+};
+
+export default StatusGrid;