codex-linux 1.0.0

package/src/renderer/styles/minimalist.css

@@ -0,0 +1,539 @@
+:root {
+  /* Couleurs de base - Minimaliste */
+  --color-bg-primary: #fafafa;
+  --color-bg-secondary: #f5f5f5;
+  --color-bg-tertiary: #eeeeee;
+  --color-bg-elevated: #ffffff;
+  
+  /* Texte */
+  --color-text-primary: #171717;
+  --color-text-secondary: #525252;
+  --color-text-tertiary: #737373;
+  --color-text-muted: #a3a3a3;
+  
+  /* Accent - Gris bleuté subtil */
+  --color-accent: #404040;
+  --color-accent-hover: #262626;
+  --color-accent-light: #525252;
+  
+  /* Bordures */
+  --color-border: #e5e5e5;
+  --color-border-light: #f0f0f0;
+  --color-border-hover: #d4d4d4;
+  
+  /* Status */
+  --color-success: #16a34a;
+  --color-warning: #ca8a04;
+  --color-error: #dc2626;
+  --color-info: #2563eb;
+  
+  /* Typographie */
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, monospace;
+  
+  /* Tailles */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  
+  /* Espacement */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  
+  /* Rayons */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+  
+  /* Ombres subtils */
+  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.02);
+  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
+  
+  /* Transitions */
+  --transition-fast: 150ms ease;
+  --transition-base: 200ms ease;
+  --transition-slow: 300ms ease;
+  
+  /* Z-index */
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-modal: 300;
+  --z-popover: 400;
+  --z-tooltip: 500;
+}
+
+/* Mode sombre minimaliste */
+[data-theme="dark"] {
+  --color-bg-primary: #0a0a0a;
+  --color-bg-secondary: #141414;
+  --color-bg-tertiary: #1a1a1a;
+  --color-bg-elevated: #1f1f1f;
+  
+  --color-text-primary: #fafafa;
+  --color-text-secondary: #a3a3a3;
+  --color-text-tertiary: #737373;
+  --color-text-muted: #525252;
+  
+  --color-accent: #e5e5e5;
+  --color-accent-hover: #ffffff;
+  --color-accent-light: #a3a3a3;
+  
+  --color-border: #262626;
+  --color-border-light: #1a1a1a;
+  --color-border-hover: #404040;
+}
+
+/* Reset moderne */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-sans);
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  line-height: 1.6;
+  letter-spacing: -0.01em;
+}
+
+/* Scrollbar minimaliste */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: var(--radius-full);
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-hover);
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+/* Sélection subtile */
+::selection {
+  background-color: var(--color-accent);
+  color: var(--color-bg-primary);
+}
+
+/* Focus visible */
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+/* Liens */
+a {
+  color: inherit;
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+/* Boutons de base */
+button {
+  font-family: inherit;
+  cursor: pointer;
+  border: none;
+  background: none;
+  transition: all var(--transition-base);
+}
+
+/* Inputs */
+input, textarea {
+  font-family: inherit;
+  border: none;
+  outline: none;
+  background: transparent;
+}
+
+/* Code */
+code, pre {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+/* Classes utilitaires */
+.animate-fadeIn {
+  animation: fadeIn var(--transition-base);
+}
+
+.animate-fadeInUp {
+  animation: fadeInUp var(--transition-base);
+}
+
+.animate-fadeInDown {
+  animation: fadeInDown var(--transition-base);
+}
+
+.animate-slideIn {
+  animation: slideIn var(--transition-base);
+}
+
+.animate-scaleIn {
+  animation: scaleIn var(--transition-base);
+}
+
+.animate-pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+/* Glassmorphism subtil */
+.glass {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--color-border);
+}
+
+[data-theme="dark"] .glass {
+  background: rgba(20, 20, 20, 0.8);
+}
+
+/* Gradient subtil */
+.gradient-subtle {
+  background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
+}
+
+/* Hover effects */
+.hover-lift {
+  transition: transform var(--transition-base), box-shadow var(--transition-base);
+}
+
+.hover-lift:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+/* Focus styles */
+.focus-ring:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-accent);
+}
+
+/* Typography */
+.text-balance {
+  text-wrap: balance;
+}
+
+.tracking-tight {
+  letter-spacing: -0.02em;
+}
+
+/* Utility spacing */
+.gap-4 { gap: var(--space-4); }
+.gap-6 { gap: var(--space-6); }
+.gap-8 { gap: var(--space-8); }
+
+/* Flex utilities */
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.items-center { align-items: center; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.flex-1 { flex: 1; }
+
+/* Grid */
+.grid { display: grid; }
+
+/* Hidden */
+.hidden { display: none; }
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ================================================
+   RESPONSIVE MOBILE STYLES
+   ================================================ */
+
+/* Breakpoints */
+:root {
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+}
+
+/* Mobile-first responsive utilities */
+@media (max-width: 639px) {
+  /* Hide on mobile */
+  .hide-mobile { display: none !important; }
+  
+  /* Typography */
+  .text-xl { font-size: 1.125rem; }
+  .text-2xl { font-size: 1.25rem; }
+  
+  /* Padding */
+  .p-4 { padding: 0.75rem; }
+  .p-6 { padding: 1rem; }
+  
+  /* Sidebar */
+  .sidebar {
+    position: fixed;
+    z-index: 40;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease-in-out;
+  }
+  
+  .sidebar.open {
+    transform: translateX(0);
+  }
+  
+  /* Cards */
+  .card {
+    padding: 0.75rem;
+  }
+  
+  /* Grid - single column on mobile */
+  .grid-cols-2 { grid-template-columns: 1fr; }
+  .grid-cols-3 { grid-template-columns: 1fr; }
+  .grid-cols-4 { grid-template-columns: 1fr; }
+}
+
+@media (min-width: 640px) and (max-width: 767px) {
+  .hide-sm { display: none !important; }
+  
+  .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+  .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .hide-md { display: none !important; }
+  
+  .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media (min-width: 1024px) {
+  .hide-lg { display: none !important; }
+}
+
+/* Touch-friendly tap targets */
+@media (pointer: coarse) {
+  button, 
+  [role="button"],
+  a,
+  input,
+  select,
+  textarea {
+    min-height: 44px;
+    min-width: 44px;
+  }
+  
+  /* Larger touch targets for important actions */
+  .btn-primary,
+  .btn-action {
+    min-height: 48px;
+    padding: 0.75rem 1.5rem;
+  }
+}
+
+/* Mobile-friendly forms */
+@media (max-width: 767px) {
+  input, 
+  select, 
+  textarea {
+    font-size: 16px !important; /* Prevents iOS zoom on focus */
+  }
+  
+  /* Full-width buttons on mobile */
+  .btn-full-mobile {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+}
+
+/* Responsive text utilities */
+@media (max-width: 639px) {
+  .text-responsive {
+    font-size: clamp(0.875rem, 2vw, 1rem);
+  }
+  
+  .title-responsive {
+    font-size: clamp(1.25rem, 4vw, 1.5rem);
+    font-weight: 600;
+  }
+}
+
+/* Responsive spacing */
+@media (max-width: 639px) {
+  .m-4 { margin: 0.5rem; }
+  .m-6 { margin: 0.75rem; }
+  .mt-4 { margin-top: 0.5rem; }
+  .mb-4 { margin-bottom: 0.5rem; }
+  .ml-4 { margin-left: 0.5rem; }
+  .mr-4 { margin-right: 0.5rem; }
+  
+  .gap-2 { gap: 0.375rem; }
+  .gap-4 { gap: 0.5rem; }
+}
+
+/* Mobile navigation */
+.mobile-nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--color-bg-elevated);
+  border-top: 1px solid var(--color-border);
+  padding: 0.5rem;
+  display: flex;
+  justify-content: space-around;
+  z-index: 50;
+}
+
+@media (min-width: 768px) {
+  .mobile-nav {
+    display: none;
+  }
+}
+
+/* Responsive panels */
+@media (max-width: 767px) {
+  .panel {
+    position: fixed;
+    inset: 0;
+    z-index: 45;
+    background: var(--color-bg-primary);
+  }
+  
+  .panel-header {
+    position: sticky;
+    top: 0;
+    background: var(--color-bg-elevated);
+    padding: 1rem;
+    border-bottom: 1px solid var(--color-border);
+  }
+}
+
+/* Pull to refresh indicator */
+.ptr-indicator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(to bottom, var(--color-bg-elevated), transparent);
+  z-index: 30;
+}
+
+/* Swipe gestures support */
+.swipe-container {
+  touch-action: pan-y pinch-zoom;
+  overflow: hidden;
+}
+
+/* Responsive terminal */
+@media (max-width: 639px) {
+  .terminal {
+    font-size: 0.75rem;
+    padding: 0.5rem;
+  }
+  
+  .terminal .xterm {
+    padding: 0.25rem;
+  }
+}

package/src/renderer/sw.ts

@@ -0,0 +1,180 @@
+/// <reference lib="webworker" />
+
+declare const self: ServiceWorkerGlobalScope;
+
+const CACHE_NAME = 'codex-linux-v1';
+const RUNTIME_CACHE = 'codex-runtime';
+
+const STATIC_ASSETS = [
+  '/',
+  '/index.html',
+  '/manifest.json'
+];
+
+const CACHE_STRATEGIES = {
+  CACHE_FIRST: 'cache-first',
+  NETWORK_FIRST: 'network-first',
+  STALE_WHILE_REVALIDATE: 'stale-while-revalidate'
+};
+
+function getCacheStrategy(url: string): string {
+  if (url.includes('/api/')) {
+    return CACHE_STRATEGIES.NETWORK_FIRST;
+  }
+  if (url.includes('/static/') || url.endsWith('.js') || url.endsWith('.css') || url.endsWith('.woff2')) {
+    return CACHE_STRATEGIES.CACHE_FIRST;
+  }
+  return CACHE_STRATEGIES.STALE_WHILE_REVALIDATE;
+}
+
+async function cacheFirst(request: Request): Promise<Response> {
+  const cachedResponse = await caches.match(request);
+  
+  if (cachedResponse) {
+    return cachedResponse;
+  }
+  
+  try {
+    const networkResponse = await fetch(request);
+    
+    if (networkResponse.ok) {
+      const cache = await caches.open(CACHE_NAME);
+      cache.put(request, networkResponse.clone());
+    }
+    
+    return networkResponse;
+  } catch {
+    return new Response('Offline', { status: 503, statusText: 'Service Unavailable' });
+  }
+}
+
+async function networkFirst(request: Request): Promise<Response> {
+  try {
+    const networkResponse = await fetch(request);
+    
+    if (networkResponse.ok) {
+      const cache = await caches.open(RUNTIME_CACHE);
+      cache.put(request, networkResponse.clone());
+    }
+    
+    return networkResponse;
+  } catch {
+    const cachedResponse = await caches.match(request);
+    
+    if (cachedResponse) {
+      return cachedResponse;
+    }
+    
+    return new Response(
+      JSON.stringify({ error: 'Offline', cached: false }),
+      { 
+        status: 503, 
+        headers: { 'Content-Type': 'application/json' }
+      }
+    );
+  }
+}
+
+async function staleWhileRevalidate(request: Request): Promise<Response> {
+  const cachedResponse = await caches.match(request);
+  
+  const fetchPromise = fetch(request).then(networkResponse => {
+    if (networkResponse.ok) {
+      caches.open(RUNTIME_CACHE).then(cache => {
+        cache.put(request, networkResponse.clone());
+      });
+    }
+    return networkResponse;
+  }).catch((): Promise<Response> => {
+    if (cachedResponse) {
+      return Promise.resolve(cachedResponse);
+    }
+    return Promise.reject(new Error('No response available'));
+  });
+  
+  if (cachedResponse) {
+    return cachedResponse;
+  }
+  
+  return fetchPromise;
+}
+
+self.addEventListener('install', (event: ExtendableEvent) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then(cache => {
+      return cache.addAll(STATIC_ASSETS);
+    }).then(() => {
+      return self.skipWaiting();
+    })
+  );
+});
+
+self.addEventListener('activate', (event: ExtendableEvent) => {
+  event.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames
+          .filter(name => name !== CACHE_NAME && name !== RUNTIME_CACHE)
+          .map(name => caches.delete(name))
+      );
+    }).then(() => {
+      return self.clients.claim();
+    })
+  );
+});
+
+self.addEventListener('fetch', (event: FetchEvent) => {
+  if (event.request.method !== 'GET') {
+    return;
+  }
+  
+  const url = new URL(event.request.url);
+  
+  if (url.origin !== self.location.origin) {
+    return;
+  }
+  
+  const strategy = getCacheStrategy(event.request.url);
+  
+  let response: Promise<Response>;
+  
+  switch (strategy) {
+    case CACHE_STRATEGIES.CACHE_FIRST:
+      response = cacheFirst(event.request);
+      break;
+    case CACHE_STRATEGIES.NETWORK_FIRST:
+      response = networkFirst(event.request);
+      break;
+    case CACHE_STRATEGIES.STALE_WHILE_REVALIDATE:
+      response = staleWhileRevalidate(event.request);
+      break;
+    default:
+      response = fetch(event.request);
+  }
+  
+  event.respondWith(response);
+});
+
+self.addEventListener('message', (event: ExtendableMessageEvent) => {
+  const data = event.data as { type: string; urls?: string[] };
+  if (data && data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+  
+  if (data && data.type === 'CACHE_URLS') {
+    const { urls } = data;
+    if (urls) {
+      caches.open(RUNTIME_CACHE).then(cache => {
+        cache.addAll(urls);
+      });
+    }
+  }
+  
+  if (data && data.type === 'CLEAR_CACHE') {
+    caches.keys().then(cacheNames => {
+      Promise.all(cacheNames.map(name => caches.delete(name)));
+    });
+  }
+});
+
+export {};