@proflandrigan/shards 1.1.0

package/src/ui/css/experiment.css

@@ -0,0 +1,237 @@
+/* ─── Experiment Dashboard Panel ─────────────────────────── */
+.experiment-dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* Progress bar */
+.exp-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.exp-progress-label {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  color: #6a6a88;
+}
+.exp-progress-bar {
+  display: flex;
+  gap: 3px;
+  height: 8px;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #1a1a2c;
+}
+.exp-progress-segment {
+  flex: 1;
+  border-radius: 3px;
+  background: #1a1a2c;
+  transition: background 0.4s ease;
+}
+.exp-progress-segment.completed { background: #4a9; }
+.exp-progress-segment.active {
+  background: #4a9;
+  animation: exp-pulse 1.2s ease-in-out infinite;
+}
+.exp-progress-segment.pending { background: #1e1e32; }
+@keyframes exp-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+.exp-status-badge {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 2px 8px;
+  border-radius: 3px;
+  background: #1e1e32;
+  color: #6a6a88;
+}
+.exp-status-badge.setup { background: #1e1e32; color: #6a8ac8; }
+.exp-status-badge.running { background: #1a2a1a; color: #4a9; }
+.exp-status-badge.reviewing { background: #2a2a1a; color: #c8a84a; }
+.exp-status-badge.complete { background: #1a2a1a; color: #4a9; }
+
+/* Charts area */
+.exp-charts {
+  display: flex;
+  gap: 16px;
+  min-height: 280px;
+}
+.exp-charts > div { flex: 1; min-width: 0; }
+
+/* Results table */
+.exp-results-table { flex: 1; min-height: 200px; }
+
+/* Recommendation badges */
+.exp-rec-badge {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 3px;
+}
+.exp-rec-badge.adopt { background: #1a2a1a; color: #4a9; }
+.exp-rec-badge.revert { background: #2a1a1a; color: #c84a4a; }
+.exp-rec-badge.refine { background: #2a2a1a; color: #c8a84a; }
+
+/* Outcome badges */
+.exp-outcome-badge {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 3px;
+}
+.exp-outcome-badge.improvement { color: #4a9; }
+.exp-outcome-badge.regression { color: #c84a4a; }
+.exp-outcome-badge.neutral { color: #6a6a88; }
+
+/* Comparison view */
+.exp-compare-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 0;
+}
+.exp-compare-bar button {
+  background: #0f0f1e;
+  border: 1px solid #1e1e32;
+  border-radius: 4px;
+  color: #6a6a88;
+  font-family: inherit;
+  font-size: 10px;
+  padding: 3px 10px;
+  cursor: pointer;
+}
+.exp-compare-bar button:hover:not(:disabled) { border-color: #4a9; color: #4a9; }
+.exp-compare-bar button:disabled { opacity: 0.3; cursor: default; }
+.exp-compare-hint { font-size: 11px; color: #6a6a88; }
+.exp-compare-split {
+  display: flex;
+  gap: 16px;
+  min-height: 200px;
+}
+.exp-compare-split > div {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid #1e1e32;
+  border-radius: 4px;
+  padding: 12px;
+  overflow: auto;
+}
+.exp-compare-split h4 {
+  margin: 0 0 8px;
+  font-size: 12px;
+  color: #b0b0c8;
+}
+.exp-compare-split table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 11px;
+}
+.exp-compare-split th,
+.exp-compare-split td {
+  padding: 4px 8px;
+  text-align: left;
+  border-bottom: 1px solid #1e1e32;
+}
+.exp-compare-split th { color: #6a6a88; }
+.exp-delta-positive { color: #4a9; }
+.exp-delta-negative { color: #c84a4a; }
+
+/* ─── Autonomous Research (AR) Mode Enrichments ─────────────── */
+/* Applies when experiment-dashboard has the .ar-mode class. */
+
+.experiment-dashboard.ar-mode .exp-progress-segment.ar-green { background: #4a9; }
+.experiment-dashboard.ar-mode .exp-progress-segment.ar-red { background: #c84a4a; }
+.experiment-dashboard.ar-mode .exp-progress-segment.ar-yellow { background: #c8a84a; }
+
+/* Preset + convergence badges in the progress header */
+.exp-preset-badge {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 2px 8px;
+  border-radius: 3px;
+  background: #2a2a1a;
+  color: #c8a84a;
+  margin-left: 6px;
+}
+.exp-converge-badge {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 2px 8px;
+  border-radius: 3px;
+  background: #1a2a1a;
+  color: #4a9;
+  margin-left: 6px;
+}
+
+/* Cost / state strip below the progress bar */
+.ar-cost-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  background: #15152a;
+  border: 1px solid #1e1e32;
+  font-size: 11px;
+  color: #b0b0c8;
+}
+.ar-cost-strip.ar-cost-caution {
+  background: #2a2a1a;
+  border-color: #c8a84a;
+}
+.ar-cost-strip.ar-cost-warn {
+  background: #2a1a1a;
+  border-color: #c84a4a;
+}
+.ar-cost-item strong { color: #fff; font-weight: 600; }
+
+/* Auto-decision badges in the table */
+.ar-auto-badge {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 2px 8px;
+  border-radius: 3px;
+}
+.ar-auto-badge.ar-green { background: #1a2a1a; color: #4a9; }
+.ar-auto-badge.ar-red { background: #2a1a1a; color: #c84a4a; }
+.ar-auto-badge.ar-yellow { background: #2a2a1a; color: #c8a84a; }
+
+.ar-kept { color: #4a9; font-size: 10px; font-weight: 600; text-transform: uppercase; }
+.ar-reverted { color: #c84a4a; font-size: 10px; font-weight: 600; text-transform: uppercase; }
+
+/* Reviewer verdict chips */
+.ar-reviewer-verdict {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  padding: 2px 8px;
+  border-radius: 3px;
+  background: #1e1e32;
+  color: #6a8ac8;
+}
+.ar-reviewer-verdict.ar-rv-continue { background: #1a2a1a; color: #4a9; }
+.ar-reviewer-verdict.ar-rv-redirect { background: #2a2a1a; color: #c8a84a; }
+.ar-reviewer-verdict.ar-rv-pause { background: #2a1a1a; color: #c84a4a; }
+.ar-reviewer-verdict.ar-rv-retro_revert { background: #2a1a1a; color: #c84a4a; }

package/src/ui/css/guide.css

@@ -0,0 +1,186 @@
+/* ═══════════════════════════════════════════════════════════════
+   Developer Guide panel
+   ═══════════════════════════════════════════════════════════════ */
+
+.guide-panel {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+}
+
+.guide-layout {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  width: 100%;
+  height: 100%;
+}
+
+.guide-toc {
+  border-right: 1px solid var(--border, #222);
+  overflow-y: auto;
+  padding: 12px 0;
+  background: var(--panel-bg, rgba(0,0,0,0.15));
+}
+
+.guide-search-wrap {
+  padding: 0 12px 10px;
+  border-bottom: 1px solid var(--border, #222);
+  margin-bottom: 8px;
+}
+
+#guide-search-input {
+  width: 100%;
+  padding: 6px 8px;
+  background: var(--input-bg, #1a1a1a);
+  color: var(--text, #e8e8e8);
+  border: 1px solid var(--border, #333);
+  border-radius: 4px;
+  font-size: 12px;
+  box-sizing: border-box;
+}
+
+#guide-search-input:focus {
+  outline: none;
+  border-color: var(--accent, #4a9eff);
+}
+
+.guide-section {
+  margin-bottom: 12px;
+}
+
+.guide-section-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--muted, #888);
+  padding: 6px 12px;
+}
+
+.guide-page-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.guide-page-item {
+  padding: 5px 12px 5px 22px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--text, #ccc);
+  border-left: 2px solid transparent;
+}
+
+.guide-page-item:hover {
+  background: var(--hover-bg, rgba(255,255,255,0.05));
+}
+
+.guide-page-item.active {
+  background: var(--hover-bg, rgba(74,158,255,0.12));
+  border-left-color: var(--accent, #4a9eff);
+  color: var(--text-strong, #fff);
+}
+
+.guide-content {
+  overflow-y: auto;
+  padding: 24px 36px;
+}
+
+.guide-loading,
+.guide-empty,
+.guide-error {
+  padding: 20px;
+  color: var(--muted, #888);
+  font-size: 13px;
+}
+
+.guide-error {
+  color: var(--error, #e06c75);
+}
+
+.guide-prose {
+  max-width: 820px;
+  margin: 0 auto;
+  line-height: 1.55;
+  color: var(--text, #ddd);
+}
+
+.guide-prose h1 {
+  font-size: 24px;
+  margin-top: 0;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--border, #222);
+}
+
+.guide-prose h2 {
+  font-size: 18px;
+  margin-top: 28px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--border, #222);
+}
+
+.guide-prose h3 {
+  font-size: 15px;
+  margin-top: 20px;
+}
+
+.guide-prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 14px 0;
+  font-size: 13px;
+}
+
+.guide-prose th,
+.guide-prose td {
+  padding: 6px 10px;
+  text-align: left;
+  border-bottom: 1px solid var(--border, #222);
+}
+
+.guide-prose th {
+  background: var(--panel-bg, rgba(255,255,255,0.03));
+  font-weight: 600;
+}
+
+.guide-prose code {
+  background: var(--code-bg, rgba(255,255,255,0.06));
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 12.5px;
+}
+
+.guide-prose pre {
+  background: var(--code-bg, rgba(255,255,255,0.05));
+  padding: 10px 12px;
+  border-radius: 6px;
+  overflow-x: auto;
+  font-size: 12.5px;
+}
+
+.guide-prose pre code {
+  background: transparent;
+  padding: 0;
+}
+
+.guide-prose a {
+  color: var(--accent, #4a9eff);
+  text-decoration: none;
+}
+
+.guide-prose a:hover {
+  text-decoration: underline;
+}
+
+.guide-prose ul,
+.guide-prose ol {
+  padding-left: 22px;
+}
+
+.guide-prose blockquote {
+  border-left: 3px solid var(--border, #333);
+  padding-left: 12px;
+  color: var(--muted, #aaa);
+  margin: 12px 0;
+}