principles-disciple 1.12.0 → 1.14.0

package/ui/src/styles.css

@@ -1702,3 +1702,319 @@ pre {
     grid-template-columns: 1fr !important;
   }
 }
+
+/* ==========================================================================
+   Thinking Models Page — New styles for v1.10 polish pass
+   ========================================================================== */
+
+/* Typography utility classes */
+.text-xs { font-size: var(--text-xs, 0.65rem); }
+.text-sm { font-size: var(--text-sm, 0.7rem); }
+.text-base { font-size: var(--text-base, 0.75rem); }
+.text-lg { font-size: var(--text-lg, 0.8rem); }
+.text-xl { font-size: var(--text-xl, 0.85rem); }
+.text-semibold { font-weight: 600; }
+.text-error { color: var(--error); }
+
+/* Section title (replaces inline fontWeight + fontSize on h3/h4) */
+.section-title {
+  font-size: var(--text-xl, 0.85rem);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: var(--space-2);
+}
+
+/* Search + Sort + Filter controls */
+.sort-button {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 6px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-panel, var(--bg-elevated));
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: var(--text-base);
+  transition: all var(--duration-fast) var(--ease-out);
+}
+
+.sort-button:hover {
+  border-color: var(--border-hover);
+  color: var(--text-primary);
+}
+
+.filter-button {
+  padding: 3px 8px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: var(--text-sm);
+  transition: all var(--duration-fast) var(--ease-out);
+}
+
+.filter-button:hover {
+  border-color: var(--border-hover);
+}
+
+.filter-button.active {
+  border-color: var(--accent);
+  background: rgba(91, 139, 160, 0.15);
+  color: var(--accent);
+}
+
+/* Compare button bar */
+.compare-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-2) var(--space-3);
+  margin-bottom: var(--space-2);
+  background: rgba(91, 139, 160, 0.08);
+  border-radius: 6px;
+  border: 1px solid var(--border);
+}
+
+.compare-button {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 4px 12px;
+  border: none;
+  border-radius: 4px;
+  background: var(--accent);
+  color: #fff;
+  cursor: pointer;
+  font-size: var(--text-base);
+  font-weight: 600;
+  transition: background var(--duration-fast) var(--ease-out);
+}
+
+.compare-button:hover {
+  background: var(--accent-hover);
+}
+
+/* Model list button (replaces inline style button) */
+.model-list-button {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: inherit;
+  text-align: left;
+}
+
+.hits-count {
+  font-weight: 600;
+  font-size: var(--text-xl, 0.85rem);
+}
+
+.scenario-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 180px;
+  display: block;
+}
+
+/* Code blocks for trigger / anti-pattern */
+.code-block {
+  font-size: var(--text-base);
+  white-space: pre-wrap;
+  word-break: break-word;
+  padding: var(--space-2) var(--space-3);
+  border-radius: 6px;
+  display: block;
+  line-height: 1.5;
+  font-family: var(--font-mono);
+}
+
+.code-block-trigger {
+  background: var(--bg-sunken);
+}
+
+.code-block-antipattern {
+  background: rgba(220, 53, 69, 0.08);
+  color: var(--error);
+}
+
+/* Event context helpers */
+.event-context-tool {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.event-context-pain {
+  font-size: var(--text-sm);
+  color: var(--error);
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.event-context-principle {
+  font-size: var(--text-sm);
+  color: var(--info);
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.matched-pattern {
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+  background: var(--bg-sunken);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: var(--font-mono);
+}
+
+.event-trigger-excerpt {
+  font-size: var(--text-sm);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Heatmap table */
+.heatmap-table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.heatmap-header {
+  text-align: center;
+  padding: 4px 6px;
+  border-bottom: 1px solid var(--border);
+  color: var(--text-secondary);
+}
+
+.heatmap-scenario {
+  font-size: var(--text-xs);
+  writing-mode: vertical-lr;
+  transform: rotate(180deg);
+  height: 80px;
+}
+
+.heatmap-sticky {
+  position: sticky;
+  left: 0;
+  background: var(--bg-panel, var(--bg-elevated));
+  z-index: 1;
+  text-align: left;
+  padding: 6px 8px;
+  font-size: var(--text-base);
+  font-weight: 600;
+  min-width: 100px;
+}
+
+.heatmap-model {
+  font-weight: 500;
+  font-size: var(--text-base);
+  padding: 4px 8px;
+  border-top: 1px solid var(--border);
+}
+
+.heatmap-cell {
+  text-align: center;
+  padding: 4px 6px;
+  font-size: var(--text-sm);
+  border-top: 1px solid var(--border);
+  color: var(--text-primary);
+}
+
+/* Loader spin animation (reuses existing .spinner keyframes) */
+.spin {
+  animation: spin 0.8s linear infinite;
+}
+
+/* Loading placeholder for empty model definitions grid */
+.loading-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-6);
+  color: var(--text-secondary);
+  gap: var(--space-2);
+}
+
+/* Text alignment utility */
+.text-center { text-align: center; }
+
+/* Stage badge (EvolutionPage) */
+.stage-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-lg);
+  font-size: var(--text-lg, 0.8rem);
+  font-weight: 600;
+  background: var(--accent);
+  color: #fff;
+  border: 2px solid var(--accent);
+}
+
+.stage-badge svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* Sample pre blocks (SamplesPage) */
+.sample-pre {
+  white-space: pre-wrap;
+  word-break: break-word;
+  background: var(--bg-sunken);
+  padding: var(--space-3);
+  border-radius: var(--radius-md);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+/* GFI big number (FeedbackPage) */
+.gfi-big-number {
+  font-size: 3rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+/* Progress bar (shared component pattern) */
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background: var(--bg-sunken);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-top: var(--space-2);
+}
+
+.progress-bar-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+/* GateMonitor trust/EP big numbers */
+.stat-big-number {
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+/* EvolutionPage icon alignment */
+.panel h3 svg {
+  vertical-align: middle;
+  margin-right: var(--space-1);
+}
+