Hugging Face's logo

Spaces:
seonglae
/
AgentStateGraph
Running

App Files Community
AgentStateGraph
File size: 3,740 Bytes
59027a2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
/* ============================================================================ */
/* ASG Design System - Agent State Graph                                        */
/* Slate-unified palette (ours = strong slate, RPNI = light slate, teal = Alergia) */
/* ============================================================================ */

:root {
  /* ASG brand colors */
  --asg-primary: #3d5a80;       /* slate - our method */
  --asg-primary-light: #7e9dc4;
  --asg-primary-dark: #2c425e;
  --asg-rpni: #8fa6c4;          /* light slate - RPNI baseline */
  --asg-alergia: #2a8f82;       /* teal - Alergia baseline */

  /* Semantic: trace outcomes */
  --asg-success: #2a8f82;
  --asg-success-bg: rgba(42, 143, 130, 0.10);
  --asg-failure: #3d5a80;
  --asg-failure-bg: rgba(61, 90, 128, 0.10);

  /* Rounded design tokens */
  --asg-radius-sm: 8px;
  --asg-radius-md: 12px;
  --asg-radius-lg: 16px;
  --asg-radius-pill: 999px;
}

[data-theme="dark"] {
  --asg-success-bg: rgba(42, 143, 130, 0.16);
  --asg-failure-bg: rgba(61, 90, 128, 0.16);
}

/* ---- State badge (FSM state references inline) ---- */
.asg-state-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--asg-radius-pill);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  background: rgba(61, 90, 128, 0.10);
  color: var(--asg-primary);
}

a:has(> .asg-state-badge) {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ---- Metric strip (headline numbers) ---- */
.asg-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.asg-metric {
  text-align: center;
  padding: 20px 16px;
  border-radius: var(--asg-radius-lg);
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
}
.asg-metric__value {
  font-size: 28px;
  font-weight: 700;
  color: var(--asg-primary);
  line-height: 1.2;
}
.asg-metric__label {
  font-size: 13px;
  color: var(--muted-color);
  margin-top: 4px;
}

/* ---- Insight callout ---- */
.asg-insight {
  position: relative;
  padding: 20px 24px;
  border-radius: var(--asg-radius-lg);
  border-left: 4px solid var(--asg-primary);
  background: linear-gradient(135deg, rgba(61, 90, 128, 0.05), rgba(61, 90, 128, 0.02));
  margin: 24px 0;
}
.asg-insight::before {
  content: 'Key Insight';
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--asg-primary);
  margin-bottom: 8px;
}

/* ---- Two-column comparison (success vs failure, AWM vs ASG) ---- */
.asg-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}
@media (max-width: 640px) {
  .asg-comparison { grid-template-columns: 1fr; }
}
.asg-comparison__side {
  padding: 20px;
  border-radius: var(--asg-radius-lg);
  border: 1px solid var(--border-color);
}
.asg-comparison__side--success { border-color: var(--asg-success); background: var(--asg-success-bg); }
.asg-comparison__side--failure { border-color: var(--asg-failure); background: var(--asg-failure-bg); }

/* ---- Equation highlight ---- */
.asg-equation {
  padding: 24px;
  border-radius: var(--asg-radius-lg);
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  margin: 24px 0;
  text-align: center;
}

/* ---- Hero FullWidth fix (transparent backdrop for 3D / canvas heroes) ---- */
.full-width:has(.html-embed .asg-hero-container) {
  background-color: transparent !important;
}
.full-width > .html-embed:has(.asg-hero-container) {
  margin-bottom: 0;
}
.full-width > .html-embed:has(.asg-hero-container) .html-embed__card {
  border-radius: 0;
}