Hugging Face's logo

Spaces:
KumarArpit8649
/
Falsify
Sleeping

App Files Community
Falsify
File size: 11,691 Bytes
1605cbb
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c146e84
1605cbb
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5affee0
1605cbb
c146e84
1605cbb
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5affee0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1605cbb
 
 
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
/* ============================================================================
   FALSIFY — live belief-revision UI
   "Forensic lab" design system. Dark, instrument-panel aesthetic.

   Truth-state colors are a STATUS palette (not categorical): alive=good,
   refuted=critical, superseded=warning, invalidated=neutral/disabled. Because
   green↔red separate at only ΔE ~12.7 under deuteranopia, state is ALWAYS
   carried by a second channel too — a text tag, a dashed border, the log —
   never by color alone. (Validated with the dataviz palette checker.)
   ========================================================================== */

:root {
  /* surfaces */
  --bg:        #0b1020;
  --panel:     #111827;
  --panel-2:   #0e1626;
  --hairline:  #1f2937;
  --hairline-2:#273244;

  /* ink */
  --text:      #e5e7eb;
  --text-dim:  #9ca3af;
  --text-mute: #6b7280;

  /* brand accent — electric mint, used only for interactive affordances */
  --accent:    #34d399;
  --accent-dim:#0f3f31;

  /* truth-state (status) palette — shared with the CLI + HTML export */
  --alive:       #22c55e;
  --refuted:     #ef4444;
  --invalidated: #9ca3af;
  --superseded:  #f59e0b;
  --forgotten:   #4b5563;

  /* glows (state color at low alpha) */
  --alive-glow:   rgba(34,197,94,.20);
  --refuted-glow: rgba(239,68,68,.24);

  --radius:   12px;
  --radius-s: 8px;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --dur:   240ms;
  --ease:  cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: auto;
}

/* ------------------------------------------------------------------ layout */
#app {
  display: grid;
  grid-template-rows: 56px 1fr;
  height: 100vh;
}

#topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border-bottom: 1px solid var(--hairline);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: .2px; }
.brand .mark { color: var(--accent); font-size: 20px; line-height: 1; }
.brand .sub  { color: var(--text-dim); font-weight: 400; font-size: 12.5px; }
.topbar-spacer { flex: 1; }

#workspace {
  display: grid;
  grid-template-columns: 360px 1fr 380px;
  min-height: 0;                 /* let children scroll, not the grid */
  overflow: auto;
}

.panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.panel + .panel { border-left: 1px solid var(--hairline); }

.panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute);
  border-bottom: 1px solid var(--hairline);
}
.panel-head .count { margin-left: auto; font-family: var(--mono); color: var(--text-dim); letter-spacing: 0; }

/* ------------------------------------------------------------------ chat */
#chat { }
#messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 92%; padding: 10px 13px; border-radius: var(--radius-s); font-size: 13.5px; animation: rise var(--dur) var(--ease); }
.msg.user   { align-self: flex-end; background: #16324e; border: 1px solid #1d4d74; }
.msg.system { align-self: flex-start; background: var(--panel); border: 1px solid var(--hairline); }
.msg.system.warn { border-color: #5b3d12; background: #1c1608; }
.msg .msg-title { font-weight: 650; margin-bottom: 3px; }
.msg .msg-meta  { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); margin-top: 6px; }
.msg .pill { display:inline-block; font-family: var(--mono); font-size: 11px; padding: 1px 6px; border-radius: 999px; margin: 2px 4px 0 0; }

.coach { margin: auto 16px; padding: 14px; text-align: center; color: var(--text-dim); font-size: 12.5px; border: 1px dashed var(--hairline-2); border-radius: var(--radius); }
.coach b { color: var(--text); }

#composer { border-top: 1px solid var(--hairline); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
#composer .row { display: flex; gap: 8px; align-items: flex-end; }
#msg-input {
  flex: 1; resize: none; min-height: 42px; max-height: 120px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--hairline-2); border-radius: var(--radius-s);
  padding: 10px 12px; font-family: var(--sans); font-size: 13.5px;
}
#msg-input:focus { outline: none; border-color: var(--accent); }
button.send {
  background: var(--accent); color: #04140d; font-weight: 700;
  border: none; border-radius: var(--radius-s); padding: 11px 16px; cursor: pointer;
  transition: filter var(--dur) var(--ease);
}
button.send:hover { filter: brightness(1.08); }
button.send:disabled { opacity: .5; cursor: default; }

.dropzone {
  font-size: 12px; color: var(--text-dim);
  border: 1px dashed var(--hairline-2); border-radius: var(--radius-s);
  padding: 9px; text-align: center; cursor: pointer; transition: all var(--dur) var(--ease);
}
.dropzone.drag { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* ------------------------------------------------------------------ graph */
#graph-panel { position: relative; background: radial-gradient(1200px 800px at 60% 30%, #0d1424 0%, var(--bg) 70%); }
#graph { width: 100%; height: 100%; }

#legend {
  position: absolute; top: 14px; left: 14px; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  padding: 10px 12px; background: rgba(17,24,39,.72); backdrop-filter: blur(6px);
  border: 1px solid var(--hairline); border-radius: var(--radius-s); font-size: 11.5px;
}
#legend .item { display: flex; align-items: center; gap: 6px; color: var(--text-dim); }
#legend .chip { width: 10px; height: 10px; border-radius: 3px; }
#legend .chip.refuted { border: 1.5px dashed var(--refuted); background: transparent; }

#controls {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; gap: 8px; padding: 8px; background: rgba(17,24,39,.82); backdrop-filter: blur(8px);
  border: 1px solid var(--hairline); border-radius: 999px;
}
#controls button {
  background: transparent; color: var(--text-dim); border: 1px solid transparent;
  border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all var(--dur) var(--ease);
}
#controls button:hover { color: var(--text); border-color: var(--hairline-2); background: var(--panel); }
#controls button.primary { color: #04140d; background: var(--accent); }
#controls button.primary:hover { filter: brightness(1.08); background: var(--accent); }

.status-dot { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color: var(--text-dim); font-family: var(--mono); }
.status-dot .d { width:8px; height:8px; border-radius:999px; background: var(--forgotten); transition: background var(--dur); }
.status-dot.live .d { background: var(--alive); box-shadow: 0 0 8px var(--alive-glow); }
.status-dot.reconnecting .d { background: var(--superseded); }

/* ------------------------------------------------------------------ backend toggle */
.toggle { display: inline-flex; background: var(--panel); border: 1px solid var(--hairline-2); border-radius: 999px; padding: 3px; }
.toggle button { background: transparent; border: none; color: var(--text-dim); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: all var(--dur); }
.toggle button.on { background: var(--accent); color: #04140d; }

.badge { font-family: var(--mono); font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--hairline-2); color: var(--text-dim); }
.badge.demo { border-color: #1d4d74; color: #7cc0f0; }

/* ------------------------------------------------------------------ insight column */
#insight { overflow-y: auto; }

.scoreboard { padding: 16px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--hairline); }
.sb-q { font-size: 12px; color: var(--text-dim); }
.sb-card { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 13px; background: var(--panel); position: relative; overflow: hidden; }
.sb-card .sb-label { display:flex; align-items:center; gap:7px; font-size: 11px; font-weight: 700; letter-spacing:.1em; text-transform: uppercase; }
.sb-card .sb-answer { margin-top: 7px; font-size: 14px; font-weight: 600; }
.sb-card .sb-note { margin-top: 6px; font-size: 12px; color: var(--text-dim); }
.sb-card.falsify { border-color: #14532d; }
.sb-card.falsify .sb-label { color: var(--alive); }
.sb-card.rag { border-color: #5b3d12; }
.sb-card.rag .sb-label { color: var(--superseded); }
.sb-card.rag.stale { border-color: var(--refuted); }
.sb-card.rag.stale .sb-note { color: #fca5a5; }
.sb-card.stale-flash { animation: staleflash 900ms var(--ease); }
.ic { width: 15px; height: 15px; display:inline-block; }

.log { padding: 12px 16px; }
.log-entry { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hairline); animation: slidein var(--dur) var(--ease); }
.log-entry:last-child { border-bottom: none; }
.log-dot { width: 9px; height: 9px; border-radius: 999px; margin-top: 5px; flex: none; }
.log-body .lg-title { font-weight: 600; font-size: 13px; }
.log-body .lg-title .id { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); }
.log-body .lg-why { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* ------------------------------------------------------------------ animations */
@keyframes rise    { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes slidein { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes staleflash { 0% { box-shadow: 0 0 0 0 var(--refuted-glow); } 40% { box-shadow: 0 0 0 3px var(--refuted-glow); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* responsive: 2-row layout on narrow screens so scoreboard never hides */
@media (max-width: 1080px) {
  #workspace {
    grid-template-columns: 280px 1fr;
    grid-template-rows: 1fr auto;
    overflow: hidden;
  }
  /* Chat stays top-left */
  #chat { grid-column: 1; grid-row: 1; }
  /* Graph takes top-right */
  #graph-panel { grid-column: 2; grid-row: 1; }
  /* Scoreboard spans the full bottom */
  #insight {
    grid-column: 1 / -1;
    grid-row: 2;
    max-height: 220px;
    overflow-y: auto;
    border-top: 1px solid var(--hairline);
  }
  .panel + .panel { border-left: 1px solid var(--hairline); }
}

/* truly tiny screens (phones): stack everything */
@media (max-width: 600px) {
  #workspace { grid-template-columns: 1fr; grid-template-rows: auto; grid-auto-rows: minmax(280px, auto); overflow-y: auto; }
  #chat { grid-column: 1; grid-row: auto; }
  #graph-panel { grid-column: 1; grid-row: auto; }
  #insight { grid-column: 1; grid-row: auto; max-height: none; }
  .panel + .panel { border-left: none; border-top: 1px solid var(--hairline); }
  html, body { overflow: auto; }
}