hypercore-cli 1.1.0

package/dist/web/static/style.css

@@ -0,0 +1,602 @@
+/* Hypercore Web Dashboard - Dark Theme */
+
+:root {
+  --bg-primary: #0d1117;
+  --bg-secondary: #161b22;
+  --bg-tertiary: #21262d;
+  --bg-hover: #30363d;
+  --border: #30363d;
+  --border-light: #484f58;
+  --text-primary: #e6edf3;
+  --text-secondary: #8b949e;
+  --text-muted: #6e7681;
+  --accent: #58a6ff;
+  --accent-hover: #79c0ff;
+  --green: #3fb950;
+  --yellow: #d29922;
+  --red: #f85149;
+  --purple: #bc8cff;
+  --orange: #f0883e;
+  --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  --radius: 8px;
+  --radius-sm: 4px;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  font-family: var(--font-sans);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ─── Header ─── */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  height: 48px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.header-left { display: flex; align-items: center; gap: 8px; }
+.logo { font-weight: 700; font-size: 16px; color: var(--accent); }
+
+.header-right { display: flex; align-items: center; gap: 12px; }
+
+.header-meta {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+}
+
+.btn-icon {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+}
+.btn-icon:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border-color: var(--border-light);
+}
+.btn-icon.spinning {
+  animation: spin 0.6s ease-in-out;
+}
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.status-dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+.status-dot.online { background: var(--green); }
+.status-dot.offline { background: var(--red); }
+
+/* ─── Main Layout ─── */
+.main {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr;
+  overflow: hidden;
+}
+
+.panel-center {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg-primary);
+}
+
+.mono { font-family: var(--font-mono); font-size: 12px; }
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--border-light); }
+
+/* ─── Tab Navigation ─── */
+.tab-nav {
+  display: flex;
+  gap: 2px;
+  margin-left: 16px;
+}
+.tab-btn {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 13px;
+  padding: 6px 12px;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: all 0.15s;
+  font-family: var(--font-sans);
+}
+.tab-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
+.tab-btn.active { background: var(--bg-hover); color: var(--accent); font-weight: 600; }
+
+/* Tab Content */
+.tab-content { display: none; flex-direction: column; height: 100%; overflow: hidden; }
+.tab-content.active { display: flex; }
+
+/* ─── Skeleton Loading ─── */
+.skeleton-line {
+  height: 14px;
+  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 3px;
+  margin-bottom: 10px;
+}
+.skeleton-line.short {
+  width: 60%;
+}
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* ─── Overview Tab ─── */
+.overview-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+  padding: 24px;
+  overflow-y: auto;
+}
+
+.overview-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  transition: border-color 0.15s;
+}
+.overview-card:hover { border-color: var(--border-light); }
+
+.card-wide {
+  grid-column: 1 / -1;
+}
+
+.card-header {
+  padding: 12px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid var(--border);
+}
+
+.card-body {
+  padding: 16px;
+  font-size: 13px;
+  line-height: 1.8;
+}
+
+.card-stat {
+  display: flex;
+  justify-content: space-between;
+  padding: 2px 0;
+  color: var(--text-secondary);
+}
+.card-stat span:last-child { color: var(--text-primary); font-family: var(--font-mono); }
+
+.card-value-big {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+}
+
+.card-value-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+
+.card-tag {
+  display: inline-block;
+  background: var(--bg-tertiary);
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
+  margin: 2px;
+}
+
+.git-branch { color: var(--green); font-weight: 600; }
+.git-clean { color: var(--green); }
+.git-dirty { color: var(--yellow); }
+
+/* ─── Empty State ─── */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 16px;
+  text-align: center;
+}
+.empty-icon {
+  font-size: 32px;
+  margin-bottom: 12px;
+  opacity: 0.5;
+}
+.empty-text {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+}
+.empty-hint {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.empty-hint code {
+  background: var(--bg-tertiary);
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--accent);
+}
+
+/* ─── Instance List (Sessions Card) ─── */
+.instance-count {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 10px;
+}
+
+.instances-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.instance-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-tertiary);
+  transition: background 0.15s;
+}
+.instance-row:hover {
+  background: var(--bg-hover);
+}
+.instance-row.current {
+  border-left: 2px solid var(--accent);
+  background: rgba(88, 166, 255, 0.06);
+}
+
+.instance-row-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.instance-row-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+  margin-left: 12px;
+}
+
+.instance-dot {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--green);
+  flex-shrink: 0;
+}
+.instance-dot.current {
+  background: var(--accent);
+  box-shadow: 0 0 4px var(--accent);
+}
+
+.instance-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.instance-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.instance-meta {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.instance-port {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.instance-uptime {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  min-width: 40px;
+  text-align: right;
+}
+
+.badge-current {
+  display: inline-block;
+  background: rgba(88, 166, 255, 0.15);
+  color: var(--accent);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 8px;
+  margin-left: 6px;
+  vertical-align: middle;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+/* ─── Lines Tab (Split Layout) ─── */
+.tab-split {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  height: 100%;
+  overflow: hidden;
+}
+
+.lines-list-panel {
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.tab-panel-header {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.tab-panel-header h3 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.lines-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.line-item {
+  padding: 12px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background 0.15s;
+  margin-bottom: 4px;
+}
+.line-item:hover { background: var(--bg-tertiary); }
+.line-item.active { background: var(--bg-hover); border-left: 2px solid var(--accent); }
+.line-item-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
+.line-item-desc { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
+
+.run-panel {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.run-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+/* Run form */
+.run-form { display: flex; flex-direction: column; gap: 12px; }
+.run-field label {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 4px;
+}
+.run-field input {
+  width: 100%;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-family: var(--font-sans);
+  outline: none;
+  box-sizing: border-box;
+}
+.run-field input:focus { border-color: var(--accent); }
+.run-field input::placeholder { color: var(--text-muted); }
+.run-field .field-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
+
+.btn-primary {
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius);
+  padding: 10px 20px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s;
+  align-self: flex-start;
+  margin-top: 8px;
+}
+.btn-primary:hover { background: var(--accent-hover); }
+.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Run output stream */
+.run-output-stream {
+  margin-top: 16px;
+  padding: 12px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  max-height: 60vh;
+  overflow-y: auto;
+  font-size: 13px;
+  line-height: 1.6;
+}
+.run-event { margin-bottom: 6px; }
+.run-event-station { color: var(--accent); font-weight: 600; }
+.run-event-text { color: var(--text-secondary); }
+.run-event-tool { color: var(--orange); font-family: var(--font-mono); font-size: 12px; }
+.run-event-complete { color: var(--green); font-weight: 600; }
+.run-event-error { color: var(--red); }
+
+.text-muted { color: var(--text-muted); font-size: 13px; }
+
+/* ─── History Tab ─── */
+.history-item {
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background 0.15s;
+  margin-bottom: 4px;
+}
+.history-item:hover { background: var(--bg-tertiary); }
+.history-item.active { background: var(--bg-hover); border-left: 2px solid var(--accent); }
+.history-item-line { font-size: 13px; font-weight: 600; color: var(--text-primary); }
+.history-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
+
+.detail-meta { margin-bottom: 16px; }
+.detail-meta-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; color: var(--text-secondary); }
+.detail-meta-row span:last-child { color: var(--text-primary); font-family: var(--font-mono); }
+.detail-station { margin-bottom: 12px; padding: 12px; background: var(--bg-tertiary); border-radius: var(--radius); }
+.detail-station-header { font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: 8px; }
+.detail-station-output { font-size: 12px; color: var(--text-secondary); white-space: pre-wrap; max-height: 200px; overflow-y: auto; }
+
+/* ─── Settings Tab ─── */
+.settings-container {
+  padding: 24px;
+  overflow-y: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.settings-section {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+.settings-section h3 {
+  padding: 12px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  border-bottom: 1px solid var(--border);
+  margin: 0;
+}
+
+.settings-body {
+  padding: 16px;
+  font-size: 13px;
+}
+
+.settings-tools-count {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+}
+
+.settings-tools-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.tool-tag {
+  background: var(--bg-tertiary);
+  padding: 4px 10px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
+}
+
+.hooks-list { font-family: var(--font-mono); font-size: 12px; line-height: 2; }
+.hook-event { color: var(--purple); }
+.hook-count { color: var(--text-muted); }
+
+/* ─── Code Blocks ─── */
+pre {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 12px;
+  overflow-x: auto;
+  margin: 8px 0;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.5;
+}
+code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background: var(--bg-tertiary);
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+pre code { background: none; padding: 0; }
+
+/* ─── Responsive ─── */
+@media (max-width: 1024px) {
+  .tab-split { grid-template-columns: 240px 1fr; }
+  .overview-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
+  .card-wide { grid-column: 1 / -1; }
+}
+@media (max-width: 768px) {
+  .tab-split { grid-template-columns: 1fr; }
+  .lines-list-panel { display: none; }
+  .overview-grid { grid-template-columns: 1fr; padding: 16px; }
+  .card-wide { grid-column: auto; }
+}