feat: bootstrap boss control plane prototype

2026-03-23 12:43:39 +08:00
commit 0ab83990b2
24 changed files with 5534 additions and 0 deletions
--- a/public/styles.css
+++ b/public/styles.css
@@ -0,0 +1,219 @@
+:root {
+  color-scheme: light;
+  --bg: #f3efe4;
+  --panel: rgba(255, 252, 245, 0.88);
+  --line: rgba(43, 40, 35, 0.12);
+  --text: #1d1c19;
+  --muted: #716c61;
+  --accent: #1f6feb;
+  --danger: #b42318;
+  --shadow: 0 18px 48px rgba(31, 28, 25, 0.08);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "IBM Plex Sans", "Source Han Sans SC", sans-serif;
+  background:
+    radial-gradient(circle at top left, rgba(31, 111, 235, 0.12), transparent 24rem),
+    linear-gradient(180deg, #f8f5ec 0%, var(--bg) 100%);
+  color: var(--text);
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+button {
+  border: 0;
+  border-radius: 12px;
+  background: var(--accent);
+  color: white;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+}
+
+button.ghost {
+  background: transparent;
+  color: var(--text);
+  border: 1px solid var(--line);
+}
+
+button.danger {
+  color: var(--danger);
+}
+
+input,
+textarea {
+  width: 100%;
+  border-radius: 12px;
+  border: 1px solid var(--line);
+  background: white;
+  padding: 0.75rem 0.875rem;
+}
+
+.shell {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 320px 1fr;
+}
+
+.sidebar,
+.content {
+  padding: 1.5rem;
+}
+
+.content {
+  display: grid;
+  gap: 1rem;
+}
+
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 24px;
+  box-shadow: var(--shadow);
+  padding: 1rem;
+  backdrop-filter: blur(12px);
+}
+
+.panel-header,
+.row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.between {
+  justify-content: space-between;
+}
+
+.hero {
+  padding: 1.5rem;
+}
+
+.grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.stack {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.list,
+.timeline {
+  display: grid;
+  gap: 0.75rem;
+  max-height: 32rem;
+  overflow: auto;
+}
+
+.timeline.compact {
+  max-height: 24rem;
+}
+
+.session-item,
+.card,
+.message,
+.event {
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.82);
+  padding: 0.875rem;
+}
+
+.session-item {
+  text-align: left;
+  display: grid;
+  gap: 0.35rem;
+  width: 100%;
+  background: white;
+  color: var(--text);
+}
+
+.session-item.active {
+  outline: 2px solid rgba(31, 111, 235, 0.2);
+}
+
+.message header,
+.event header {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.85rem;
+  color: var(--muted);
+  margin-bottom: 0.5rem;
+}
+
+.message.manager {
+  background: rgba(31, 111, 235, 0.08);
+}
+
+.badge {
+  border-radius: 999px;
+  padding: 0.2rem 0.55rem;
+  font-size: 0.8rem;
+  border: 1px solid var(--line);
+  background: white;
+}
+
+.badge.running,
+.badge.busy {
+  color: var(--accent);
+}
+
+.badge.failed,
+.badge.cancelled,
+.badge.rejected {
+  color: var(--danger);
+}
+
+.badge.completed,
+.badge.approved,
+.badge.idle {
+  color: #0f7b55;
+}
+
+.tags,
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+.tags span {
+  border-radius: 999px;
+  padding: 0.18rem 0.5rem;
+  background: rgba(31, 111, 235, 0.1);
+  color: var(--accent);
+  font-size: 0.82rem;
+}
+
+.caption,
+.muted {
+  color: var(--muted);
+}
+
+pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+@media (max-width: 1100px) {
+  .shell {
+    grid-template-columns: 1fr;
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}