@archznn/crewloop-skills 0.5.0 → 0.7.0

package/servers/dashboard/public/styles.css

@@ -1,819 +0,0 @@
-:root {
-  --bg-base: #09090b;
-  --bg-surface: #121214;
-  --bg-elevated: #1c1c1f;
-  --bg-inset: #050507;
-  --border-default: #27272a;
-  --border-strong: #3f3f46;
-  --text-primary: #f8fafc;
-  --text-secondary: #94a3b8;
-  --text-muted: #475569;
-  --accent: #22d3ee;
-  --accent-hover: #67e8f9;
-  --accent-dim: #0891b2;
-  --success: #4ade80;
-  --error: #fb7185;
-  --warning: #facc15;
-  --running: #38bdf8;
-
-  /* lifecycle tokens */
-  --lifecycle-starting: var(--warning);
-  --lifecycle-running: var(--running);
-  --lifecycle-ended: var(--text-muted);
-  --lifecycle-starting-bg: rgba(250, 204, 21, 0.12);
-  --lifecycle-running-bg: rgba(56, 189, 248, 0.12);
-  --lifecycle-ended-bg: rgba(148, 163, 184, 0.10);
-
-  --font-display: 'Bebas Neue', 'Oswald', sans-serif;
-  --font-body: 'DM Sans', system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
-}
-
-[data-theme="light"] {
-  --bg-base: #f8fafc;
-  --bg-surface: #ffffff;
-  --bg-elevated: #f1f5f9;
-  --bg-inset: #e2e8f0;
-  --border-default: #cbd5e1;
-  --border-strong: #94a3b8;
-  --text-primary: #0f172a;
-  --text-secondary: #475569;
-  --text-muted: #94a3b8;
-  --accent: #0891b2;
-  --accent-hover: #06b6d4;
-  --accent-dim: #155e75;
-  --success: #16a34a;
-  --error: #e11d48;
-  --warning: #ca8a04;
-  --running: #0284c7;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html, body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  background: var(--bg-base);
-  color: var(--text-primary);
-  font-family: var(--font-body);
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-.app {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-/* Header */
-.header {
-  height: 56px;
-  background: var(--bg-surface);
-  border-bottom: 1px solid var(--border-default);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 24px;
-  flex-shrink: 0;
-}
-
-.brand {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-}
-
-.brand-name {
-  font-family: var(--font-display);
-  font-size: 1.25rem;
-  letter-spacing: 0.12em;
-  color: var(--text-primary);
-}
-
-.brand-separator {
-  color: var(--text-muted);
-}
-
-.brand-label {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  letter-spacing: 0.08em;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.icon-button {
-  width: 36px;
-  height: 36px;
-  border-radius: 8px;
-  border: 1px solid var(--border-default);
-  background: var(--bg-elevated);
-  color: var(--text-secondary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: border-color 0.15s ease, color 0.15s ease;
-}
-
-.icon-button:hover {
-  border-color: var(--accent);
-  color: var(--accent);
-}
-
-.icon-button:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-.icon-button i {
-  font-size: 1.1rem;
-}
-
-/* Session selector */
-.session-selector {
-  position: relative;
-}
-
-.session-trigger {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  border-radius: 999px;
-  border: 1px solid var(--border-default);
-  background: var(--bg-elevated);
-  color: var(--text-secondary);
-  font-family: var(--font-body);
-  font-size: 0.75rem;
-  cursor: pointer;
-  min-height: 36px;
-  transition: border-color 0.15s ease;
-}
-
-.session-trigger:hover,
-.session-trigger[aria-expanded="true"] {
-  border-color: var(--accent);
-}
-
-.session-trigger:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-.connection-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--text-muted);
-  flex-shrink: 0;
-}
-
-.connection-dot.connected {
-  background: var(--success);
-}
-
-.connection-dot.connecting {
-  background: var(--warning);
-}
-
-.connection-dot.disconnected {
-  background: var(--error);
-}
-
-.session-list {
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
-  min-width: 240px;
-  max-height: 320px;
-  overflow-y: auto;
-  background: var(--bg-surface);
-  border: 1px solid var(--border-default);
-  border-radius: 8px;
-  list-style: none;
-  margin: 0;
-  padding: 6px;
-  display: none;
-  z-index: 100;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-}
-
-.session-list.open {
-  display: block;
-}
-
-.session-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
-  border-radius: 6px;
-  cursor: pointer;
-  color: var(--text-secondary);
-  font-size: 0.75rem;
-  border-left: 2px solid transparent;
-}
-
-.session-item:hover,
-.session-item:focus-visible {
-  background: var(--bg-elevated);
-  outline: none;
-}
-
-.session-item.active {
-  border-left-color: var(--accent);
-  color: var(--text-primary);
-  background: var(--bg-elevated);
-}
-
-.session-item-id {
-  font-family: var(--font-mono);
-}
-
-.session-item-source {
-  margin-left: auto;
-  color: var(--text-muted);
-  text-transform: uppercase;
-}
-
-.session-item-main {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.session-item-meta {
-  font-size: 0.6875rem;
-  color: var(--text-muted);
-}
-
-/* Lifecycle badge */
-.lifecycle-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
-  border-radius: 999px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  border: 1px solid var(--border-default);
-  background: var(--bg-elevated);
-  color: var(--text-secondary);
-  animation: lifecycle-enter 0.2s ease-out;
-}
-
-.lifecycle-badge.starting {
-  color: var(--lifecycle-starting);
-  background: var(--lifecycle-starting-bg);
-  border-color: rgba(250, 204, 21, 0.35);
-}
-
-.lifecycle-badge.running {
-  color: var(--lifecycle-running);
-  background: var(--lifecycle-running-bg);
-  border-color: rgba(56, 189, 248, 0.35);
-}
-
-.lifecycle-badge.ended {
-  color: var(--lifecycle-ended);
-  background: var(--lifecycle-ended-bg);
-  border-color: var(--border-default);
-}
-
-@keyframes lifecycle-enter {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Empty state */
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 48px 24px;
-  text-align: center;
-  color: var(--text-secondary);
-  animation: empty-state-enter 0.25s ease-out;
-}
-
-.empty-state-icon {
-  width: 64px;
-  height: 64px;
-  border-radius: 16px;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-default);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-muted);
-}
-
-.empty-state-icon i {
-  font-size: 2rem;
-}
-
-.empty-state-title {
-  font-family: var(--font-display);
-  font-size: 2rem;
-  font-weight: 400;
-  line-height: 1.1;
-  letter-spacing: 0.04em;
-  color: var(--text-primary);
-  margin: 0;
-}
-
-.empty-state-body {
-  font-size: 0.875rem;
-  color: var(--text-secondary);
-  margin: 0;
-}
-
-@keyframes empty-state-enter {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Main layout */
-.main {
-  display: flex;
-  flex: 1;
-  gap: 16px;
-  padding: 24px;
-  overflow: hidden;
-}
-
-.sidebar {
-  width: 320px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  flex-shrink: 0;
-}
-
-.content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  min-width: 0;
-}
-
-/* Panels */
-.panel {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-default);
-  border-radius: 8px;
-  overflow: hidden;
-  position: relative;
-}
-
-.panel-title {
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-muted);
-  margin: 0;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--border-default);
-}
-
-/* Active skill */
-.active-skill-panel {
-  padding: 24px;
-}
-
-.panel-accent-strip {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 4px;
-  background: var(--text-muted);
-  transition: background 0.2s ease, box-shadow 0.2s ease;
-}
-
-.panel-accent-strip.starting {
-  background: var(--lifecycle-starting);
-  box-shadow: 0 0 12px var(--lifecycle-starting);
-  animation: lifecycle-glow 2s ease-in-out infinite;
-}
-
-.panel-accent-strip.running {
-  background: var(--lifecycle-running);
-  box-shadow: 0 0 12px var(--lifecycle-running);
-  animation: lifecycle-glow 2s ease-in-out infinite;
-}
-
-.panel-accent-strip.ended {
-  background: var(--border-strong);
-  box-shadow: none;
-}
-
-.active-skill-content {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 16px;
-}
-
-.active-skill-icon-wrap {
-  width: 64px;
-  height: 64px;
-  border-radius: 12px;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-default);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--accent);
-}
-
-.active-skill-icon-wrap i {
-  font-size: 2rem;
-}
-
-.active-skill-name {
-  font-family: var(--font-display);
-  font-size: 4rem;
-  font-weight: 400;
-  line-height: 0.95;
-  margin: 0;
-  color: var(--text-primary);
-}
-
-.active-skill-meta {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.status-badge,
-.confidence-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
-  border-radius: 999px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-default);
-  color: var(--text-secondary);
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--text-muted);
-}
-
-.status-dot.starting {
-  background: var(--lifecycle-starting);
-}
-
-.status-dot.running {
-  background: var(--lifecycle-running);
-}
-
-.status-dot.ended {
-  background: var(--lifecycle-ended);
-}
-
-.status-dot.error {
-  background: var(--error);
-}
-
-.status-dot.success {
-  background: var(--success);
-}
-
-.active-skill-source {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--text-muted);
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-/* Telemetry */
-.telemetry-panel {
-  padding: 20px;
-}
-
-.telemetry-panel .panel-title {
-  padding: 0 0 16px;
-  border-bottom: 1px solid var(--border-default);
-}
-
-.telemetry-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 16px;
-  padding-top: 16px;
-}
-
-.telemetry-card {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 12px;
-  background: var(--bg-inset);
-  border-radius: 6px;
-  border: 1px solid var(--border-default);
-}
-
-.telemetry-value {
-  font-family: var(--font-mono);
-  font-size: 2rem;
-  font-weight: 500;
-  color: var(--accent);
-  font-variant-numeric: tabular-nums;
-}
-
-.telemetry-label {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  letter-spacing: 0.08em;
-}
-
-/* Activity graph */
-.activity-panel {
-  flex: 0 0 220px;
-  display: flex;
-  flex-direction: column;
-}
-
-.activity-graph {
-  flex: 1;
-  min-height: 140px;
-  padding: 16px 20px;
-  position: relative;
-}
-
-.activity-empty {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-muted);
-  font-size: 0.875rem;
-}
-
-.activity-canvas {
-  width: 100%;
-  height: 100%;
-}
-
-/* Timeline */
-.timeline-panel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.timeline {
-  flex: 1;
-  overflow-y: auto;
-  list-style: none;
-  margin: 0;
-  padding: 12px 20px;
-  position: relative;
-}
-
-.timeline::before {
-  content: '';
-  position: absolute;
-  top: 12px;
-  bottom: 12px;
-  left: 32px;
-  width: 1px;
-  background: var(--border-default);
-}
-
-.timeline-item {
-  display: grid;
-  grid-template-columns: 56px 16px 1fr auto;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 0;
-  position: relative;
-  animation: slideIn 0.2s ease-out;
-}
-
-.timeline-time {
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-.timeline-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--text-muted);
-  z-index: 1;
-  justify-self: center;
-}
-
-.timeline-dot.running {
-  background: var(--running);
-}
-
-.timeline-dot.success {
-  background: var(--success);
-}
-
-.timeline-dot.error {
-  background: var(--error);
-}
-
-.timeline-main {
-  display: flex;
-  align-items: baseline;
-  gap: 10px;
-  min-width: 0;
-}
-
-.timeline-tool {
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  flex-shrink: 0;
-}
-
-.timeline-detail {
-  font-size: 0.875rem;
-  color: var(--text-secondary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.timeline-outcome {
-  color: var(--text-muted);
-  font-size: 0.875rem;
-}
-
-/* Animations */
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateX(16px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-.status-dot.running,
-.status-dot.starting {
-  animation: lifecycle-pulse 1.5s ease-in-out infinite;
-}
-
-.lifecycle-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: currentColor;
-}
-
-.lifecycle-badge.starting .lifecycle-dot,
-.lifecycle-badge.running .lifecycle-dot {
-  animation: lifecycle-pulse 1.5s ease-in-out infinite;
-}
-
-.panel-accent-strip.starting,
-.panel-accent-strip.running {
-  animation: lifecycle-glow 2s ease-in-out infinite;
-}
-
-@keyframes lifecycle-pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-@keyframes lifecycle-glow {
-  0%, 100% {
-    box-shadow: 0 0 8px currentColor;
-  }
-  50% {
-    box-shadow: 0 0 16px currentColor;
-  }
-}
-
-/* Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-
-  .timeline-item {
-    animation: none;
-  }
-}
-
-/* Responsive */
-@media (max-width: 1023px) {
-  .main {
-    flex-direction: column;
-    overflow: auto;
-  }
-
-  .sidebar {
-    width: 100%;
-    flex-direction: row;
-  }
-
-  .active-skill-panel {
-    flex: 1;
-  }
-
-  .telemetry-panel {
-    flex: 1;
-  }
-
-  .telemetry-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  .active-skill-name {
-    font-size: 3rem;
-  }
-}
-
-@media (max-width: 767px) {
-  .header {
-    padding: 0 16px;
-  }
-
-  .main {
-    padding: 16px;
-  }
-
-  .sidebar {
-    flex-direction: column;
-  }
-
-  .active-skill-name {
-    font-size: 2.5rem;
-  }
-
-  .telemetry-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .timeline::before {
-    left: 28px;
-  }
-
-  .timeline-item {
-    grid-template-columns: 48px 16px 1fr auto;
-  }
-}