trackops 2.0.4 → 2.0.5

package/ui/css/onboarding.css

@@ -1,133 +1,133 @@
-/* ═══════════════════════════════════════════════════════
-   ONBOARDING — Spotlight tour, tooltips, navigation
-   ═══════════════════════════════════════════════════════ */
-
-.onboarding-spotlight {
-  /* Los estilos inline de position, inset, box-shadow se inyectan por JS */
-  background: transparent;
-  z-index: var(--z-onboard);
-  pointer-events: none;
-}
-.onboarding-spotlight.is-hidden { display: none; }
-
-.onboarding-ring {
-  box-sizing: border-box;
-}
-
-@keyframes ob-ring-pulse {
-  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59,130,246,0.7); opacity: 1; }
-  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(59,130,246,0); opacity: 0; }
-  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59,130,246,0); opacity: 0; }
-}
-
-.onboarding-tooltip {
-  /* Los estilos inline de position y transform se inyectan por JS */
-  background: var(--glass-bg-strong);
-  backdrop-filter: blur(var(--glass-blur));
-  -webkit-backdrop-filter: blur(var(--glass-blur));
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-xl);
-  padding: var(--space-6);
-  box-shadow: var(--shadow-xl);
-  opacity: 0;
-  transition: opacity var(--duration-base) var(--ease-out);
-  pointer-events: all;
-  color: var(--text-primary);
-}
-.onboarding-tooltip.is-hidden { display: none; pointer-events: none; }
-.ob-enter {
-  animation: ob-enter-anim var(--duration-base) var(--ease-out) forwards;
-}
-@keyframes ob-enter-anim {
-  from { opacity: 0; transform: translateY(8px) scale(0.98); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-/* ── Flechas (Bocadillo) ── */
-.onboarding-tooltip::after {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-}
-/* Flecha apuntando hacia arriba (cuando el tooltip esta bottom) */
-.onboarding-tooltip[data-pos="bottom"]::after {
-  top: -10px;
-  left: 50%;
-  margin-left: -10px;
-  border-width: 0 10px 10px 10px;
-  border-color: transparent transparent var(--glass-bg-strong) transparent;
-}
-/* Flecha apuntando hacia abajo (cuando el tooltip esta top) */
-.onboarding-tooltip[data-pos="top"]::after {
-  bottom: -10px;
-  left: 50%;
-  margin-left: -10px;
-  border-width: 10px 10px 0 10px;
-  border-color: var(--glass-bg-strong) transparent transparent transparent;
-}
-/* Flecha apuntando hacia la izquierda (cuando el tooltip esta right) */
-.onboarding-tooltip[data-pos="right"]::after {
-  left: -10px;
-  top: 50%;
-  margin-top: -10px;
-  border-width: 10px 10px 10px 0;
-  border-color: transparent var(--glass-bg-strong) transparent transparent;
-}
-/* Flecha apuntando hacia la derecha (cuando el tooltip esta left) */
-.onboarding-tooltip[data-pos="left"]::after {
-  right: -10px;
-  top: 50%;
-  margin-top: -10px;
-  border-width: 10px 0 10px 10px;
-  border-color: transparent transparent transparent var(--surface-2);
-}
-
-.ob-step-label {
-  font-size: var(--text-xs);
-  font-weight: 700;
-  color: var(--accent);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin-bottom: var(--space-3);
-}
-.ob-title {
-  font-size: var(--text-lg);
-  font-weight: 800;
-  margin-bottom: var(--space-2);
-}
-.ob-desc {
-  font-size: var(--text-sm);
-  color: var(--text-secondary);
-  line-height: 1.6;
-  margin-bottom: var(--space-5);
-}
-.ob-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: var(--space-4);
-}
-.ob-dots {
-  display: flex;
-  gap: var(--space-2);
-  flex-wrap: wrap;
-}
-.ob-dot {
-  width: 6px; height: 6px;
-  border-radius: 50%;
-  background: var(--border-strong);
-  transition: background var(--duration-base);
-}
-.ob-dot.is-active {
-  background: var(--accent);
-  width: 18px;
-  border-radius: var(--radius-full);
-}
-.ob-actions {
-  display: flex;
-  gap: var(--space-2);
-  flex-wrap: wrap;
-}
+/* ═══════════════════════════════════════════════════════
+   ONBOARDING — Spotlight tour, tooltips, navigation
+   ═══════════════════════════════════════════════════════ */
+
+.onboarding-spotlight {
+  /* Los estilos inline de position, inset, box-shadow se inyectan por JS */
+  background: transparent;
+  z-index: var(--z-onboard);
+  pointer-events: none;
+}
+.onboarding-spotlight.is-hidden { display: none; }
+
+.onboarding-ring {
+  box-sizing: border-box;
+}
+
+@keyframes ob-ring-pulse {
+  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59,130,246,0.7); opacity: 1; }
+  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(59,130,246,0); opacity: 0; }
+  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59,130,246,0); opacity: 0; }
+}
+
+.onboarding-tooltip {
+  /* Los estilos inline de position y transform se inyectan por JS */
+  background: var(--glass-bg-strong);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
+  box-shadow: var(--shadow-xl);
+  opacity: 0;
+  transition: opacity var(--duration-base) var(--ease-out);
+  pointer-events: all;
+  color: var(--text-primary);
+}
+.onboarding-tooltip.is-hidden { display: none; pointer-events: none; }
+.ob-enter {
+  animation: ob-enter-anim var(--duration-base) var(--ease-out) forwards;
+}
+@keyframes ob-enter-anim {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ── Flechas (Bocadillo) ── */
+.onboarding-tooltip::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+/* Flecha apuntando hacia arriba (cuando el tooltip esta bottom) */
+.onboarding-tooltip[data-pos="bottom"]::after {
+  top: -10px;
+  left: 50%;
+  margin-left: -10px;
+  border-width: 0 10px 10px 10px;
+  border-color: transparent transparent var(--glass-bg-strong) transparent;
+}
+/* Flecha apuntando hacia abajo (cuando el tooltip esta top) */
+.onboarding-tooltip[data-pos="top"]::after {
+  bottom: -10px;
+  left: 50%;
+  margin-left: -10px;
+  border-width: 10px 10px 0 10px;
+  border-color: var(--glass-bg-strong) transparent transparent transparent;
+}
+/* Flecha apuntando hacia la izquierda (cuando el tooltip esta right) */
+.onboarding-tooltip[data-pos="right"]::after {
+  left: -10px;
+  top: 50%;
+  margin-top: -10px;
+  border-width: 10px 10px 10px 0;
+  border-color: transparent var(--glass-bg-strong) transparent transparent;
+}
+/* Flecha apuntando hacia la derecha (cuando el tooltip esta left) */
+.onboarding-tooltip[data-pos="left"]::after {
+  right: -10px;
+  top: 50%;
+  margin-top: -10px;
+  border-width: 10px 0 10px 10px;
+  border-color: transparent transparent transparent var(--surface-2);
+}
+
+.ob-step-label {
+  font-size: var(--text-xs);
+  font-weight: 700;
+  color: var(--accent);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-bottom: var(--space-3);
+}
+.ob-title {
+  font-size: var(--text-lg);
+  font-weight: 800;
+  margin-bottom: var(--space-2);
+}
+.ob-desc {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  line-height: 1.6;
+  margin-bottom: var(--space-5);
+}
+.ob-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-4);
+}
+.ob-dots {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+.ob-dot {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--border-strong);
+  transition: background var(--duration-base);
+}
+.ob-dot.is-active {
+  background: var(--accent);
+  width: 18px;
+  border-radius: var(--radius-full);
+}
+.ob-actions {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}

package/ui/css/terminal.css

@@ -1,125 +1,125 @@
-/* ═══════════════════════════════════════════════════════
-   TERMINAL — Terminal surface + Console logs panel
-   Always-dark styling regardless of theme
-   ═══════════════════════════════════════════════════════ */
-
-/* ───────────────────────────────────
-   TERMINAL GLASS WRAPPER
-   ─────────────────────────────────── */
-.terminal-wrapper {
-  background: var(--glass-bg-strong);
-  backdrop-filter: blur(var(--glass-blur));
-  -webkit-backdrop-filter: blur(var(--glass-blur));
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-xl);
-  overflow: hidden;
-}
-
-/* ───────────────────────────────────
-   TERMINAL SURFACE
-   ─────────────────────────────────── */
-.terminal-surface {
-  background: #060a14;
-  border: 1px solid rgba(255,255,255,0.05);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-}
-.terminal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-2) var(--space-4);
-  background: rgba(255,255,255,0.03);
-  border-bottom: 1px solid rgba(255,255,255,0.04);
-  gap: var(--space-3);
-}
-.terminal-dots { display: flex; gap: var(--space-2); align-items: center; }
-.terminal-dots span {
-  width: 10px; height: 10px;
-  border-radius: 50%;
-}
-.terminal-dots span:nth-child(1) { background: #EF4444; }
-.terminal-dots span:nth-child(2) { background: #F59E0B; }
-.terminal-dots span:nth-child(3) { background: #10B981; }
-.terminal-title {
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  color: var(--text-muted);
-  flex: 1;
-  text-align: center;
-}
-.terminal-output {
-  margin: 0;
-  padding: var(--space-5);
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  line-height: 1.7;
-  color: #94D4BC;
-  min-height: 280px;
-  max-height: 460px;
-  overflow-y: auto;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-/* ───────────────────────────────────
-   CONSOLE LOGS PANEL
-   ─────────────────────────────────── */
-.console-panel {
-  position: fixed;
-  bottom: 0;
-  left: var(--sidebar-width);
-  right: 0;
-  z-index: var(--z-panel);
-  background: #060a14;
-  border-top: 1px solid var(--border);
-  transition: transform var(--duration-slow) var(--ease-out);
-  transform: translateY(100%);
-}
-.console-panel.is-open {
-  transform: translateY(0);
-}
-.console-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-2) var(--space-4);
-  border-bottom: 1px solid rgba(255,255,255,0.04);
-  background: rgba(255,255,255,0.02);
-}
-.console-panel-title {
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  color: var(--text-muted);
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-.console-panel-actions {
-  display: flex;
-  gap: var(--space-2);
-}
-.console-logs {
-  overflow-y: auto;
-  max-height: 220px;
-  padding: var(--space-2) 0;
-}
-.console-log-entry {
-  display: grid;
-  grid-template-columns: auto auto 1fr;
-  gap: var(--space-3);
-  align-items: start;
-  padding: var(--space-1) var(--space-4);
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  line-height: 1.6;
-  border-bottom: 1px solid rgba(255,255,255,0.02);
-}
-.console-log-entry:hover { background: rgba(255,255,255,0.02); }
-.console-log-time  { color: var(--text-muted); white-space: nowrap; }
-.log-level         { font-weight: 700; white-space: nowrap; }
-.log-error         { color: var(--danger); }
-.log-warn          { color: var(--warning); }
-.log-info          { color: var(--info); }
-.log-debug         { color: var(--text-muted); }
-.console-log-msg   { color: var(--text-secondary); word-break: break-all; }
+/* ═══════════════════════════════════════════════════════
+   TERMINAL — Terminal surface + Console logs panel
+   Always-dark styling regardless of theme
+   ═══════════════════════════════════════════════════════ */
+
+/* ───────────────────────────────────
+   TERMINAL GLASS WRAPPER
+   ─────────────────────────────────── */
+.terminal-wrapper {
+  background: var(--glass-bg-strong);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+}
+
+/* ───────────────────────────────────
+   TERMINAL SURFACE
+   ─────────────────────────────────── */
+.terminal-surface {
+  background: #060a14;
+  border: 1px solid rgba(255,255,255,0.05);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.terminal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-4);
+  background: rgba(255,255,255,0.03);
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+  gap: var(--space-3);
+}
+.terminal-dots { display: flex; gap: var(--space-2); align-items: center; }
+.terminal-dots span {
+  width: 10px; height: 10px;
+  border-radius: 50%;
+}
+.terminal-dots span:nth-child(1) { background: #EF4444; }
+.terminal-dots span:nth-child(2) { background: #F59E0B; }
+.terminal-dots span:nth-child(3) { background: #10B981; }
+.terminal-title {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  flex: 1;
+  text-align: center;
+}
+.terminal-output {
+  margin: 0;
+  padding: var(--space-5);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  line-height: 1.7;
+  color: #94D4BC;
+  min-height: 280px;
+  max-height: 460px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* ───────────────────────────────────
+   CONSOLE LOGS PANEL
+   ─────────────────────────────────── */
+.console-panel {
+  position: fixed;
+  bottom: 0;
+  left: var(--sidebar-width);
+  right: 0;
+  z-index: var(--z-panel);
+  background: #060a14;
+  border-top: 1px solid var(--border);
+  transition: transform var(--duration-slow) var(--ease-out);
+  transform: translateY(100%);
+}
+.console-panel.is-open {
+  transform: translateY(0);
+}
+.console-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-4);
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+  background: rgba(255,255,255,0.02);
+}
+.console-panel-title {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.console-panel-actions {
+  display: flex;
+  gap: var(--space-2);
+}
+.console-logs {
+  overflow-y: auto;
+  max-height: 220px;
+  padding: var(--space-2) 0;
+}
+.console-log-entry {
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  gap: var(--space-3);
+  align-items: start;
+  padding: var(--space-1) var(--space-4);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  line-height: 1.6;
+  border-bottom: 1px solid rgba(255,255,255,0.02);
+}
+.console-log-entry:hover { background: rgba(255,255,255,0.02); }
+.console-log-time  { color: var(--text-muted); white-space: nowrap; }
+.log-level         { font-weight: 700; white-space: nowrap; }
+.log-error         { color: var(--danger); }
+.log-warn          { color: var(--warning); }
+.log-info          { color: var(--info); }
+.log-debug         { color: var(--text-muted); }
+.console-log-msg   { color: var(--text-secondary); word-break: break-all; }

package/ui/css/timeline.css

@@ -1,58 +1,58 @@
-/* ═══════════════════════════════════════════════════════
-   TIMELINE — Vista de línea temporal con milestones
-   ═══════════════════════════════════════════════════════ */
-
-.timeline-container {
-  background: var(--glass-bg);
-  backdrop-filter: blur(var(--glass-blur));
-  -webkit-backdrop-filter: blur(var(--glass-blur));
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-xl);
-  padding: var(--space-4);
-  overflow: hidden;
-}
-
-.timeline-scroll {
-  overflow-x: auto;
-  overflow-y: visible;
-  scrollbar-width: thin;
-  scrollbar-color: var(--surface-3) transparent;
-}
-
-.timeline-scroll::-webkit-scrollbar {
-  height: 8px;
-}
-.timeline-scroll::-webkit-scrollbar-track {
-  background: transparent;
-}
-.timeline-scroll::-webkit-scrollbar-thumb {
-  background: var(--surface-3);
-  border-radius: var(--radius-full);
-}
-.timeline-scroll::-webkit-scrollbar-thumb:hover {
-  background: var(--border-strong);
-}
-
-.timeline-svg {
-  display: block;
-}
-
-.timeline-legend {
-  padding: var(--space-3) var(--space-4);
-  background: var(--glass-bg);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-lg);
-}
-
-/* ───────────────────────────────────
-   STATUS BAR COLORS
-   ─────────────────────────────────── */
-.timeline-bar.status-pending      { fill: var(--accent-blue); }
-.timeline-bar.status-in_progress  { fill: var(--accent-cyan); }
-.timeline-bar.status-in_review    { fill: var(--accent-yellow); }
-.timeline-bar.status-completed    { fill: var(--accent-green); }
-.timeline-bar.status-blocked      { fill: var(--accent-red); }
-
-.timeline-milestone {
-  fill: var(--accent);
-}
+/* ═══════════════════════════════════════════════════════
+   TIMELINE — Vista de línea temporal con milestones
+   ═══════════════════════════════════════════════════════ */
+
+.timeline-container {
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  padding: var(--space-4);
+  overflow: hidden;
+}
+
+.timeline-scroll {
+  overflow-x: auto;
+  overflow-y: visible;
+  scrollbar-width: thin;
+  scrollbar-color: var(--surface-3) transparent;
+}
+
+.timeline-scroll::-webkit-scrollbar {
+  height: 8px;
+}
+.timeline-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.timeline-scroll::-webkit-scrollbar-thumb {
+  background: var(--surface-3);
+  border-radius: var(--radius-full);
+}
+.timeline-scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--border-strong);
+}
+
+.timeline-svg {
+  display: block;
+}
+
+.timeline-legend {
+  padding: var(--space-3) var(--space-4);
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
+}
+
+/* ───────────────────────────────────
+   STATUS BAR COLORS
+   ─────────────────────────────────── */
+.timeline-bar.status-pending      { fill: var(--accent-blue); }
+.timeline-bar.status-in_progress  { fill: var(--accent-cyan); }
+.timeline-bar.status-in_review    { fill: var(--accent-yellow); }
+.timeline-bar.status-completed    { fill: var(--accent-green); }
+.timeline-bar.status-blocked      { fill: var(--accent-red); }
+
+.timeline-milestone {
+  fill: var(--accent);
+}