trackops 2.0.3 → 2.0.5

package/ui/css/terminal.css

@@ -0,0 +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; }

package/ui/css/timeline.css

@@ -0,0 +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);
+}