@virtengine/openfleet 0.25.0

package/ui/styles/variables.css

@@ -0,0 +1,188 @@
+/* ─── VirtEngine Control Center — CSS Custom Properties ─── */
+/* Tuned for a CodexMonitor-style desktop + responsive UI */
+
+:root {
+  /* Typography */
+  --font-ui: "Sora", "Space Grotesk", "IBM Plex Sans", "Segoe UI", sans-serif;
+  --font-mono: "JetBrains Mono", "IBM Plex Mono", "Fira Code", "SF Mono", monospace;
+
+  /* Core colors (dark, with Telegram fallbacks) */
+  --bg-primary: var(--tg-theme-bg-color, #0b0f14);
+  --bg-secondary: var(--tg-theme-secondary-bg-color, #121823);
+  --bg-card: var(--tg-theme-section-bg-color, #141c27);
+  --bg-surface: #0f141d;
+  --bg-input: #0f141d;
+  --bg-card-hover: rgba(255, 255, 255, 0.06);
+  --bg-elevated: #192232;
+
+  --text-primary: var(--tg-theme-text-color, #e4e9f0);
+  --text-secondary: var(
+    --tg-theme-subtitle-text-color,
+    var(--tg-theme-hint-color, #9aa3b2)
+  );
+  --text-hint: var(--tg-theme-hint-color, #7f8898);
+  --text-bright: #f5f8fb;
+
+  --accent: var(--tg-theme-button-color, #4cc9f0);
+  --accent-text: var(--tg-theme-button-text-color, #051018);
+  --accent-hover: var(--tg-theme-accent-text-color, #7bdff6);
+
+  --link-color: var(--tg-theme-link-color, #7bdff6);
+  --destructive: var(--tg-theme-destructive-text-color, #ff6b6b);
+
+  --border: var(--tg-theme-section-separator-color, rgba(148, 163, 184, 0.18));
+  --border-strong: rgba(148, 163, 184, 0.28);
+  --header-text: var(
+    --tg-theme-section-header-text-color,
+    var(--text-secondary)
+  );
+
+  /* Bottom bar */
+  --bottom-bar-bg: var(--tg-theme-bottom-bar-bg-color, var(--bg-secondary));
+
+  /* Safe areas from Telegram */
+  --safe-top: var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px));
+  --safe-bottom: var(
+    --tg-safe-area-inset-bottom,
+    env(safe-area-inset-bottom, 0px)
+  );
+  --safe-left: var(--tg-safe-area-inset-left, env(safe-area-inset-left, 0px));
+  --safe-right: var(
+    --tg-safe-area-inset-right,
+    env(safe-area-inset-right, 0px)
+  );
+  --content-safe-top: var(--tg-content-safe-area-inset-top, 0px);
+  --content-safe-bottom: var(--tg-content-safe-area-inset-bottom, 0px);
+
+  /* Viewport from Telegram */
+  --viewport-height: var(--tg-viewport-height, 100vh);
+  --viewport-stable-height: var(--tg-viewport-stable-height, 100vh);
+
+  /* Spacing scale */
+  --space-2xs: 2px;
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 16px;
+  --space-lg: 24px;
+  --space-xl: 32px;
+  --space-2xl: 48px;
+
+  /* Semantic accent aliases */
+  --accent-primary: var(--accent);
+  --accent-success: var(--color-done);
+  --accent-warning: var(--color-inreview);
+  --accent-error: var(--color-error);
+  --accent-danger: var(--color-error);
+
+  /* Layout */
+  --header-height: 60px;
+  --nav-height: 66px;
+  --sidebar-width: 88px;
+  --rail-width: 320px;
+  --inspector-width: 320px;
+  --content-max: 1200px;
+  --shell-gap: 16px;
+  --radius-xs: 4px;
+  --radius-sm: 8px;
+  --radius-md: 14px;
+  --radius-lg: 18px;
+  --radius-xl: 24px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(5, 10, 18, 0.45);
+  --shadow-md: 0 8px 20px rgba(5, 10, 18, 0.4);
+  --shadow-lg: 0 18px 36px rgba(5, 10, 18, 0.45);
+  --shadow-xl: 0 28px 64px rgba(5, 10, 18, 0.55);
+  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+
+  /* Glass System */
+  --glass-bg: rgba(10, 14, 20, 0.68);
+  --glass-border: rgba(148, 163, 184, 0.2);
+  --glass-blur: blur(12px);
+  --glass-highlight: rgba(255, 255, 255, 0.06);
+
+  /* Glow System */
+  --accent-glow: rgba(76, 201, 240, 0.25);
+  --accent-subtle: rgba(76, 201, 240, 0.14);
+  --glow-progress: rgba(59, 130, 246, 0.2);
+  --glow-success: rgba(34, 197, 94, 0.22);
+  --glow-warning: rgba(245, 158, 11, 0.22);
+  --glow-error: rgba(248, 113, 113, 0.22);
+  --shadow-glow: 0 0 18px var(--accent-glow);
+  --shadow-glow-sm: 0 0 8px var(--accent-glow);
+  --border-glow: rgba(76, 201, 240, 0.35);
+
+  /* Status colors */
+  --color-todo: #94a3b2;
+  --color-inprogress: #4cc9f0;
+  --color-inreview: #f59e0b;
+  --color-done: #34d399;
+  --color-error: #f87171;
+  --color-cancelled: #94a3b2;
+  --color-critical: #f87171;
+  --color-high: #f59e0b;
+  --color-medium: #4cc9f0;
+  --color-low: #94a3b2;
+
+  /* Gradients */
+  --gradient-accent: linear-gradient(135deg, #4cc9f0 0%, #5eead4 100%);
+  --gradient-accent-hover: linear-gradient(135deg, #5eead4 0%, #7bdff6 100%);
+  --gradient-progress: linear-gradient(90deg, #4cc9f0 0%, #34d399 100%);
+  --gradient-hero: radial-gradient(circle at 20% 0%, rgba(76, 201, 240, 0.22), transparent 55%),
+    radial-gradient(circle at 80% 10%, rgba(94, 234, 212, 0.18), transparent 50%),
+    radial-gradient(circle at 50% 90%, rgba(59, 130, 246, 0.16), transparent 60%);
+  --gradient-surface: linear-gradient(180deg, rgba(15, 20, 30, 0.9) 0%, rgba(12, 16, 24, 0.95) 100%);
+  --gradient-radial-glow: radial-gradient(circle at 50% 20%, rgba(76, 201, 240, 0.2), transparent 60%);
+  --gradient-mesh: radial-gradient(circle at 10% 20%, rgba(76, 201, 240, 0.18), transparent 55%),
+    radial-gradient(circle at 90% 10%, rgba(94, 234, 212, 0.14), transparent 45%),
+    radial-gradient(circle at 50% 100%, rgba(59, 130, 246, 0.12), transparent 60%);
+
+  /* Backdrop */
+  --backdrop: rgba(5, 10, 18, 0.7);
+  --backdrop-blur: blur(10px);
+
+  /* Transitions */
+  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+  --transition-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+/* Light theme - Telegram sets --tg-color-scheme */
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="dark"]) {
+    --bg-primary: var(--tg-theme-bg-color, #f4f7fb);
+    --bg-secondary: var(--tg-theme-secondary-bg-color, #ffffff);
+    --bg-card: var(--tg-theme-section-bg-color, #ffffff);
+    --bg-surface: #edf2f7;
+    --bg-input: #ffffff;
+    --bg-card-hover: rgba(15, 23, 42, 0.04);
+    --bg-elevated: #ffffff;
+
+    --text-primary: var(--tg-theme-text-color, #1b2430);
+    --text-secondary: var(
+      --tg-theme-subtitle-text-color,
+      var(--tg-theme-hint-color, #5b6474)
+    );
+    --text-hint: var(--tg-theme-hint-color, #7b8598);
+    --text-bright: #0f172a;
+
+    --border: var(--tg-theme-section-separator-color, rgba(15, 23, 42, 0.12));
+    --border-strong: rgba(15, 23, 42, 0.18);
+
+    --glass-bg: rgba(255, 255, 255, 0.92);
+    --glass-border: rgba(15, 23, 42, 0.12);
+    --glass-highlight: rgba(15, 23, 42, 0.04);
+
+    --accent-glow: rgba(37, 99, 235, 0.18);
+    --accent-subtle: rgba(37, 99, 235, 0.12);
+    --gradient-hero: radial-gradient(circle at 20% 0%, rgba(37, 99, 235, 0.16), transparent 55%),
+      radial-gradient(circle at 80% 5%, rgba(14, 165, 233, 0.12), transparent 50%),
+      radial-gradient(circle at 50% 95%, rgba(59, 130, 246, 0.1), transparent 60%);
+    --gradient-mesh: radial-gradient(circle at 10% 20%, rgba(14, 165, 233, 0.14), transparent 55%),
+      radial-gradient(circle at 90% 10%, rgba(37, 99, 235, 0.1), transparent 45%),
+      radial-gradient(circle at 50% 100%, rgba(59, 130, 246, 0.08), transparent 60%);
+  }
+}

package/ui/styles.css

@@ -0,0 +1,141 @@
+@import "./styles/base.css";
+@import "./styles/layout.css";
+@import "./styles/components.css";
+@import "./styles/animations.css";
+
+/* ─── Agent Stream Enhancements ─── */
+.stream-toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.stream-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.stream-search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  padding: 4px 10px;
+  min-width: 180px;
+  flex: 1;
+}
+
+.stream-search .input {
+  border: none;
+  background: transparent;
+  padding: 0;
+  font-size: 12px;
+}
+
+.input-compact {
+  height: 28px;
+  font-size: 12px;
+}
+
+.stream-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 320px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.stream-item {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 8px 10px;
+  background: var(--bg-card);
+}
+
+.stream-item-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.stream-item-tool {
+  font-size: 12px;
+  text-transform: none;
+}
+
+.stream-item-time {
+  color: var(--text-hint);
+  font-size: 11px;
+}
+
+.stream-item-body {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.stream-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: var(--radius-full);
+  font-size: 10px;
+  font-weight: 700;
+  border: 1px solid transparent;
+}
+
+.stream-tag-tool_call {
+  background: rgba(88, 166, 255, 0.16);
+  color: var(--color-inprogress);
+  border-color: rgba(88, 166, 255, 0.4);
+}
+
+.stream-tag-tool_result {
+  background: rgba(46, 160, 67, 0.16);
+  color: var(--color-done);
+  border-color: rgba(46, 160, 67, 0.35);
+}
+
+.stream-tag-error {
+  background: rgba(248, 81, 73, 0.16);
+  color: var(--color-error);
+  border-color: rgba(248, 81, 73, 0.35);
+}
+
+.stream-tag-file {
+  background: rgba(139, 148, 158, 0.14);
+  color: var(--text-secondary);
+  border-color: rgba(139, 148, 158, 0.35);
+}
+
+.stream-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 16px;
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+}
+
+.stream-empty-icon {
+  font-size: 20px;
+}
+
+.stream-empty-text {
+  font-size: 12px;
+  text-align: center;
+}