@gokulvenkatareddy/cortex 0.1.7

package/apps/octogent/apps/web/src/styles/cortex-theme.css

@@ -0,0 +1,412 @@
+/* =============================================================================
+ * CORTEX THEME — Glassmorphism + 3D animations + premium polish
+ * Last-imported override layer. Keeps all structural styles intact and only
+ * reskins surfaces, buttons, cards, and motion. Pure black base preserved.
+ * ========================================================================== */
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");
+
+:root {
+  /* Keep black canvas — layer colored glows above */
+  --cortex-bg: #000000;
+  --cortex-surface: rgba(18, 18, 22, 0.55);
+  --cortex-surface-strong: rgba(24, 24, 30, 0.72);
+  --cortex-border-glass: rgba(255, 255, 255, 0.08);
+  --cortex-border-glass-strong: rgba(255, 255, 255, 0.14);
+  --cortex-accent: #faa32c;
+  --cortex-accent-2: #ff6b2b;
+  --cortex-accent-3: #a855f7;
+  --cortex-accent-4: #22d3ee;
+  --cortex-glow-warm: 0 0 40px rgba(250, 163, 44, 0.35);
+  --cortex-glow-cool: 0 0 40px rgba(34, 211, 238, 0.28);
+  --cortex-glow-neon: 0 0 60px rgba(168, 85, 247, 0.32);
+  --cortex-shadow-float: 0 20px 60px -20px rgba(0, 0, 0, 0.9),
+    0 2px 10px -2px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  --cortex-shadow-lift: 0 30px 80px -30px rgba(250, 163, 44, 0.3),
+    0 10px 30px -10px rgba(0, 0, 0, 0.8);
+  --cortex-blur: 20px;
+  --cortex-blur-strong: 30px;
+  --cortex-radius: 14px;
+  --cortex-radius-lg: 20px;
+  --cortex-radius-xl: 28px;
+  --cortex-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --cortex-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Global canvas — pure black with animated aurora glows
+ * ────────────────────────────────────────────────────────────────────── */
+body {
+  font-family: "Inter", var(--font-main) !important;
+  background: #000000 !important;
+  position: relative;
+  overflow: hidden;
+}
+
+body::before,
+body::after {
+  content: "";
+  position: fixed;
+  pointer-events: none;
+  z-index: 0;
+  filter: blur(120px);
+  opacity: 0.55;
+  will-change: transform;
+}
+
+body::before {
+  width: 55vw;
+  height: 55vw;
+  top: -15vw;
+  right: -10vw;
+  background: radial-gradient(circle, rgba(250, 163, 44, 0.45) 0%, transparent 65%);
+  animation: cortex-aurora-a 22s ease-in-out infinite;
+}
+
+body::after {
+  width: 48vw;
+  height: 48vw;
+  bottom: -12vw;
+  left: -10vw;
+  background: radial-gradient(circle, rgba(168, 85, 247, 0.42) 0%, transparent 65%);
+  animation: cortex-aurora-b 28s ease-in-out infinite;
+}
+
+@keyframes cortex-aurora-a {
+  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
+  50% { transform: translate3d(-6vw, 8vw, 0) scale(1.15); }
+}
+
+@keyframes cortex-aurora-b {
+  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
+  50% { transform: translate3d(8vw, -6vw, 0) scale(1.2); }
+}
+
+#root,
+.page,
+.console-shell,
+.workspace-shell {
+  position: relative;
+  z-index: 1;
+  background: transparent !important;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Glass surface primitive — apply to all major panels
+ * ────────────────────────────────────────────────────────────────────── */
+.console-main-canvas,
+.workspace-setup-card,
+.deck-pod,
+.console-chrome,
+.console-chrome-status,
+.console-chrome-nav,
+.sidebar,
+.sidebar-panel,
+.sidebar-card,
+.sidebar-surface,
+.action-card,
+.runtime-status-strip,
+.conversations-panel,
+.settings-panel,
+.canvas-panel,
+.prompts-panel,
+.monitor-panel,
+.code-intel-panel,
+.pixpack-panel,
+.github-panel {
+  background: var(--cortex-surface) !important;
+  backdrop-filter: blur(var(--cortex-blur)) saturate(180%);
+  -webkit-backdrop-filter: blur(var(--cortex-blur)) saturate(180%);
+  border: 1px solid var(--cortex-border-glass) !important;
+  box-shadow: var(--cortex-shadow-float);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Cards — glass with subtle 3D tilt on hover
+ * ────────────────────────────────────────────────────────────────────── */
+.workspace-setup-card,
+.deck-pod,
+.action-card {
+  border-radius: var(--cortex-radius-lg) !important;
+  padding: 22px !important;
+  transform-style: preserve-3d;
+  transition: transform 0.5s var(--cortex-ease),
+              box-shadow 0.5s var(--cortex-ease),
+              border-color 0.3s var(--cortex-ease);
+  position: relative;
+  overflow: hidden;
+}
+
+.workspace-setup-card::before,
+.deck-pod::before,
+.action-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.06) 0%,
+    transparent 40%,
+    transparent 60%,
+    rgba(250, 163, 44, 0.04) 100%
+  );
+  pointer-events: none;
+}
+
+.workspace-setup-card:hover,
+.deck-pod:hover,
+.action-card:hover {
+  transform: translateY(-4px) rotateX(2deg) rotateY(-1deg);
+  border-color: var(--cortex-border-glass-strong) !important;
+  box-shadow: var(--cortex-shadow-lift);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Buttons — glass pill with glow, press animation, shimmer on hover
+ * ────────────────────────────────────────────────────────────────────── */
+button,
+.workspace-setup-step-action,
+.action-card button,
+.deck-pod button {
+  position: relative;
+  overflow: hidden;
+  border-radius: 10px;
+  font-family: "Inter", var(--font-main) !important;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  transition: transform 0.2s var(--cortex-ease-spring),
+              box-shadow 0.3s var(--cortex-ease),
+              background 0.3s var(--cortex-ease);
+}
+
+button:not(:disabled):hover,
+.workspace-setup-step-action:not(:disabled):hover {
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 8px 24px -8px rgba(250, 163, 44, 0.55), var(--cortex-glow-warm);
+}
+
+button:not(:disabled):active {
+  transform: translateY(0) scale(0.98);
+  transition: transform 0.08s ease;
+}
+
+/* Primary action highlight */
+.workspace-setup-step-action {
+  background: linear-gradient(135deg, var(--cortex-accent) 0%, var(--cortex-accent-2) 100%) !important;
+  color: #0a0a0a !important;
+  border: none !important;
+  padding: 10px 18px !important;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+.workspace-setup-step-action::after {
+  content: "";
+  position: absolute;
+  top: 0; left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.35),
+    transparent
+  );
+  transition: left 0.6s var(--cortex-ease);
+}
+
+.workspace-setup-step-action:not(:disabled):hover::after {
+  left: 100%;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Text — clean, crisp, premium
+ * ────────────────────────────────────────────────────────────────────── */
+h1, h2, h3, h4,
+.workspace-setup-card-title,
+.deck-pod-name {
+  font-family: "Space Grotesk", var(--font-main) !important;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.workspace-setup-card-title {
+  background: linear-gradient(120deg, #ffffff 0%, var(--cortex-accent) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 1.45rem !important;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Octopus glyph — gentle 3D floating animation
+ * ────────────────────────────────────────────────────────────────────── */
+.workspace-setup-card-glyph,
+.deck-pod-octopus {
+  animation: cortex-float-3d 6s ease-in-out infinite;
+  transform-style: preserve-3d;
+  filter: drop-shadow(0 10px 20px rgba(250, 163, 44, 0.25));
+}
+
+@keyframes cortex-float-3d {
+  0%, 100% {
+    transform: translateY(0) rotateY(0deg) rotateX(0deg);
+  }
+  25% {
+    transform: translateY(-6px) rotateY(5deg) rotateX(-2deg);
+  }
+  50% {
+    transform: translateY(-10px) rotateY(0deg) rotateX(-4deg);
+  }
+  75% {
+    transform: translateY(-6px) rotateY(-5deg) rotateX(-2deg);
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Navigation + sidebar — glass chrome
+ * ────────────────────────────────────────────────────────────────────── */
+.console-chrome,
+.console-chrome-nav,
+.console-chrome-status {
+  backdrop-filter: blur(var(--cortex-blur-strong)) saturate(200%);
+  -webkit-backdrop-filter: blur(var(--cortex-blur-strong)) saturate(200%);
+  border-bottom: 1px solid var(--cortex-border-glass) !important;
+}
+
+.sidebar,
+.sidebar-panel {
+  backdrop-filter: blur(var(--cortex-blur)) saturate(180%);
+  -webkit-backdrop-filter: blur(var(--cortex-blur)) saturate(180%);
+  border-right: 1px solid var(--cortex-border-glass) !important;
+}
+
+.sidebar-row {
+  transition: background 0.25s var(--cortex-ease),
+              transform 0.25s var(--cortex-ease),
+              box-shadow 0.25s var(--cortex-ease);
+  border-radius: 10px;
+  margin: 2px 6px;
+}
+
+.sidebar-row:hover {
+  background: rgba(255, 255, 255, 0.04) !important;
+  transform: translateX(3px);
+  box-shadow: inset 3px 0 0 var(--cortex-accent);
+}
+
+.sidebar-row-active,
+.sidebar-row[data-active="true"] {
+  background: linear-gradient(
+    90deg,
+    rgba(250, 163, 44, 0.12),
+    rgba(250, 163, 44, 0.02)
+  ) !important;
+  box-shadow: inset 3px 0 0 var(--cortex-accent);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Scrollbars — thin glass
+ * ────────────────────────────────────────────────────────────────────── */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(250, 163, 44, 0.35);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Inputs — glass with focus ring
+ * ────────────────────────────────────────────────────────────────────── */
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+textarea {
+  background: rgba(255, 255, 255, 0.04) !important;
+  border: 1px solid var(--cortex-border-glass) !important;
+  border-radius: 10px !important;
+  color: var(--text-primary) !important;
+  font-family: "Inter", var(--font-main) !important;
+  transition: border-color 0.25s var(--cortex-ease),
+              box-shadow 0.25s var(--cortex-ease),
+              background 0.25s var(--cortex-ease);
+}
+
+input:not([type="checkbox"]):not([type="radio"]):focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--cortex-accent) !important;
+  background: rgba(255, 255, 255, 0.06) !important;
+  box-shadow: 0 0 0 3px rgba(250, 163, 44, 0.18),
+              var(--cortex-glow-warm);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Terminal — subtle glass frame preserved
+ * ────────────────────────────────────────────────────────────────────── */
+.terminal,
+.terminal-container {
+  border-radius: var(--cortex-radius) !important;
+  overflow: hidden;
+  box-shadow: var(--cortex-shadow-float);
+  border: 1px solid var(--cortex-border-glass) !important;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Entry animation — fade + rise for any card on mount
+ * ────────────────────────────────────────────────────────────────────── */
+.workspace-setup-card,
+.deck-pod,
+.action-card,
+.runtime-status-strip {
+  animation: cortex-rise 0.6s var(--cortex-ease) both;
+}
+
+.workspace-setup-card { animation-delay: 0.05s; }
+.deck-pod:nth-child(odd) { animation-delay: 0.1s; }
+.deck-pod:nth-child(even) { animation-delay: 0.15s; }
+
+@keyframes cortex-rise {
+  from {
+    opacity: 0;
+    transform: translateY(14px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Accent pulse for "Launch Cortex" CTA
+ * ────────────────────────────────────────────────────────────────────── */
+.workspace-setup-step[data-complete="false"] .workspace-setup-step-action {
+  animation: cortex-pulse-glow 2.4s ease-in-out infinite;
+}
+
+@keyframes cortex-pulse-glow {
+  0%, 100% { box-shadow: 0 4px 16px -4px rgba(250, 163, 44, 0.4); }
+  50% { box-shadow: 0 8px 28px -4px rgba(250, 163, 44, 0.7), 0 0 0 4px rgba(250, 163, 44, 0.08); }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * Reduced motion — respect user preference
+ * ────────────────────────────────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/apps/octogent/apps/web/src/styles/foundation.css

@@ -0,0 +1,100 @@
+@import url("https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap");
+
+:root {
+  --bg-canvas: #000000;
+  --bg-surface-1: #040404;
+  --bg-surface-2: #191919;
+  --border-subtle: #5c5c5c;
+  --text-primary: #f0f0f0;
+  --text-secondary: #c8c8c8;
+  --accent-primary: #faa32c;
+  --term-red: #880f1e;
+  --term-green: #33ff66;
+  --term-blue: #1e59a3;
+  --term-warning: #ffb020;
+  --control-border-strong: #121212;
+  --control-bg-strong: #000000;
+  --sidebar-canvas: color-mix(in srgb, var(--bg-surface-1) 84%, #131a23 16%);
+  --sidebar-panel: color-mix(in srgb, var(--bg-surface-1) 78%, #1b2430 22%);
+  --sidebar-card: color-mix(in srgb, var(--bg-surface-1) 82%, #16202a 18%);
+  --sidebar-header: color-mix(in srgb, var(--bg-surface-2) 72%, #212c3a 28%);
+  --sidebar-row: color-mix(in srgb, var(--bg-surface-1) 88%, #121a22 12%);
+  --sidebar-row-hover: color-mix(in srgb, var(--sidebar-row) 76%, #263445 24%);
+  --sidebar-row-active: color-mix(in srgb, var(--sidebar-row) 62%, #2c4055 38%);
+  --sidebar-border: color-mix(in srgb, var(--border-subtle) 72%, #313d4d 28%);
+  --sidebar-border-strong: color-mix(in srgb, var(--border-subtle) 48%, #3a4f66 52%);
+  --sidebar-text-muted: color-mix(in srgb, var(--text-secondary) 84%, #9eb2c8 16%);
+  --terminal-bg: #101722;
+  --terminal-header-bg-top: #4b607d;
+  --terminal-header-bg-bottom: #3d516b;
+  --terminal-header-text: #eef3fb;
+  --terminal-scrollbar-track: color-mix(in srgb, var(--terminal-bg) 88%, #0f1622 12%);
+  --terminal-scrollbar-thumb: color-mix(in srgb, var(--accent-primary) 34%, var(--terminal-bg) 66%);
+  --terminal-scrollbar-thumb-hover: color-mix(
+    in srgb,
+    var(--accent-primary) 44%,
+    var(--terminal-bg) 56%
+  );
+  --terminal-scrollbar-thumb-active: color-mix(
+    in srgb,
+    var(--accent-primary) 54%,
+    var(--terminal-bg) 46%
+  );
+  --font-main: "PP Neue Machina Plain", "PP Neue Machina", "JetBrains Mono", "IBM Plex Mono",
+    monospace;
+  --control-font-family: var(--font-main);
+  --control-letter-spacing: 0.06em;
+  --control-line-height: 1.2;
+  --ui-base-font-size: 18px;
+  --scrollbar-size: 10px;
+  --scrollbar-track: color-mix(in srgb, var(--bg-surface-1) 88%, #121212);
+  --scrollbar-thumb: color-mix(in srgb, var(--accent-primary) 38%, var(--border-subtle) 62%);
+  --scrollbar-thumb-hover: color-mix(in srgb, var(--accent-primary) 54%, var(--border-subtle) 46%);
+  --scrollbar-thumb-active: color-mix(in srgb, var(--accent-primary) 68%, var(--border-subtle) 32%);
+  --terminal-column-min-width: 370px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  margin: 0;
+  height: 100%;
+  min-height: 100%;
+}
+
+html {
+  font-size: var(--ui-base-font-size);
+}
+
+body {
+  font-family: var(--font-main);
+  background: radial-gradient(circle at top right, #111111, var(--bg-canvas) 50%);
+  color: var(--text-primary);
+  overflow: hidden;
+}
+
+.page {
+  height: 100vh;
+  min-height: 100vh;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.workspace-shell {
+  height: 100%;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.workspace-shell--full {
+  grid-template-columns: 1fr;
+}