Skip to content

Commit 9f92ea2

Browse files
Aditya ChauhanAditya Chauhan
Aditya Chauhan
authored and
Aditya Chauhan
committed
feat(ui): ship analysis release
- Redesign tool-first start and report scene - Add KaTeX formulas and scrollable analysis panels - Override PostCSS to patched version
1 parent cef520f commit 9f92ea2

12 files changed

Lines changed: 1063 additions & 451 deletions

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
# misc
2424
.DS_Store
2525
*.pem
26+
.superpowers/
2627

2728
# debug
2829
npm-debug.log*

‎package-lock.json‎

Lines changed: 28 additions & 30 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "impact-compass",
3-
"version": "0.1.0",
3+
"version": "0.2.0",
44
"private": true,
55
"scripts": {
66
"dev": "next dev",
@@ -10,6 +10,7 @@
1010
"lint": "eslint"
1111
},
1212
"dependencies": {
13+
"katex": "^0.17.0",
1314
"lucide-react": "^1.16.0",
1415
"next": "16.2.6",
1516
"react": "19.2.4",
@@ -29,5 +30,8 @@
2930
"tailwindcss": "^4",
3031
"typescript": "^5",
3132
"vitest": "^4.1.7"
33+
},
34+
"overrides": {
35+
"postcss": "8.5.15"
3236
}
3337
}

‎src/app/globals.css‎

Lines changed: 124 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
@import "tailwindcss";
2+
@import "katex/dist/katex.min.css";
23

34
:root {
4-
--background: #ffffff;
5-
--foreground: #171717;
5+
--background: #fbfaf7;
6+
--foreground: #1f2933;
7+
--paper: #ffffff;
8+
--ink: #1f2933;
9+
--muted-ink: #536079;
10+
--rule: #e5e0d8;
11+
--field: #f5f2ed;
12+
--forest: #2f4a36;
613
}
714

815
@theme inline {
@@ -12,13 +19,6 @@
1219
--font-mono: var(--font-geist-mono);
1320
}
1421

15-
@media (prefers-color-scheme: dark) {
16-
:root {
17-
--background: #0a0a0a;
18-
--foreground: #ededed;
19-
}
20-
}
21-
2222
body {
2323
background: var(--background);
2424
color: var(--foreground);
@@ -31,3 +31,118 @@ textarea,
3131
select {
3232
font: inherit;
3333
}
34+
35+
.serif-display {
36+
font-family: Georgia, "Times New Roman", Times, serif;
37+
}
38+
39+
.compass-atmosphere {
40+
background-image:
41+
linear-gradient(rgba(31, 41, 51, 0.05) 1px, transparent 1px),
42+
linear-gradient(90deg, rgba(31, 41, 51, 0.05) 1px, transparent 1px);
43+
background-size: 140px 140px;
44+
}
45+
46+
.compass-ring {
47+
animation: compass-pulse 7s ease-in-out infinite;
48+
}
49+
50+
.compass-ring-slow {
51+
animation: compass-pulse 9s ease-in-out infinite reverse;
52+
}
53+
54+
.compass-sweep {
55+
animation: compass-sweep 8s linear infinite;
56+
transform-origin: center;
57+
}
58+
59+
.geo-line {
60+
animation: geo-drift 8s ease-in-out infinite alternate;
61+
}
62+
63+
.geo-line-delayed {
64+
animation: geo-drift 9s ease-in-out infinite alternate-reverse;
65+
}
66+
67+
.radar-polygon {
68+
animation: radar-draw 850ms ease-out both;
69+
transform-origin: center;
70+
}
71+
72+
.score-fill {
73+
animation: score-fill 850ms ease-out both;
74+
transform-origin: left;
75+
}
76+
77+
.formula-math .katex {
78+
font-size: 1.05rem;
79+
}
80+
81+
@keyframes compass-pulse {
82+
0%,
83+
100% {
84+
opacity: 0.22;
85+
transform: scale(0.96);
86+
}
87+
88+
50% {
89+
opacity: 0.58;
90+
transform: scale(1.04);
91+
}
92+
}
93+
94+
@keyframes compass-sweep {
95+
from {
96+
transform: rotate(0deg);
97+
}
98+
99+
to {
100+
transform: rotate(360deg);
101+
}
102+
}
103+
104+
@keyframes geo-drift {
105+
from {
106+
opacity: 0.22;
107+
transform: translateX(-2.5rem);
108+
}
109+
110+
to {
111+
opacity: 0.62;
112+
transform: translateX(2.5rem);
113+
}
114+
}
115+
116+
@keyframes radar-draw {
117+
from {
118+
opacity: 0;
119+
transform: scale(0.78);
120+
}
121+
122+
to {
123+
opacity: 1;
124+
transform: scale(1);
125+
}
126+
}
127+
128+
@keyframes score-fill {
129+
from {
130+
transform: scaleX(0.08);
131+
}
132+
133+
to {
134+
transform: scaleX(1);
135+
}
136+
}
137+
138+
@media (prefers-reduced-motion: reduce) {
139+
.compass-ring,
140+
.compass-ring-slow,
141+
.compass-sweep,
142+
.geo-line,
143+
.geo-line-delayed,
144+
.radar-polygon,
145+
.score-fill {
146+
animation: none;
147+
}
148+
}

‎src/components/comparison/ComparisonTable.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,16 @@ type ComparisonTableProps = {
66

77
export function ComparisonTable({ rows }: ComparisonTableProps) {
88
return (
9-
<section className="rounded-lg border border-slate-200 bg-white shadow-sm">
10-
<div className="border-b border-slate-200 px-5 py-4">
11-
<h3 className="text-base font-semibold text-slate-950">Comparison</h3>
12-
<p className="mt-1 text-sm text-slate-600">
9+
<section className="rounded-lg border border-[#e5e0d8] bg-white shadow-sm">
10+
<div className="border-b border-[#e5e0d8] px-5 py-4">
11+
<h3 className="text-xl font-bold text-[#1f2933]">Comparison</h3>
12+
<p className="mt-1 text-sm text-[#536079]">
1313
Ranked by lower confidence bound, not raw score.
1414
</p>
1515
</div>
1616
<div className="overflow-x-auto">
1717
<table className="min-w-[900px] text-left text-sm">
18-
<thead className="bg-slate-50 text-xs uppercase text-slate-500">
18+
<thead className="bg-[#f7f4ef] text-xs uppercase text-slate-500">
1919
<tr>
2020
<th className="px-5 py-3">Idea</th>
2121
<th className="px-5 py-3">Score</th>
@@ -28,18 +28,18 @@ export function ComparisonTable({ rows }: ComparisonTableProps) {
2828
<th className="px-5 py-3">Evidence Gap</th>
2929
</tr>
3030
</thead>
31-
<tbody className="divide-y divide-slate-100">
31+
<tbody className="divide-y divide-[#e5e0d8]">
3232
{rows.map((row) => (
3333
<tr key={row.ideaName}>
34-
<td className="px-5 py-4 font-semibold text-slate-950">{row.ideaName}</td>
35-
<td className="px-5 py-4 text-slate-700">{row.score}</td>
36-
<td className="px-5 py-4 text-slate-700">{row.range}</td>
37-
<td className="px-5 py-4 text-slate-700">{row.rankBasis}</td>
38-
<td className="px-5 py-4 text-slate-700">{row.confidence}</td>
39-
<td className="px-5 py-4 text-slate-700">{row.strongestPillar}</td>
40-
<td className="px-5 py-4 text-slate-700">{row.weakestPillar}</td>
41-
<td className="px-5 py-4 text-slate-700">{row.bestChannel}</td>
42-
<td className="px-5 py-4 text-slate-700">{row.evidenceGap}</td>
34+
<td className="px-5 py-4 font-semibold text-[#1f2933]">{row.ideaName}</td>
35+
<td className="px-5 py-4 text-[#536079]">{row.score}</td>
36+
<td className="px-5 py-4 text-[#536079]">{row.range}</td>
37+
<td className="px-5 py-4 text-[#536079]">{row.rankBasis}</td>
38+
<td className="px-5 py-4 text-[#536079]">{row.confidence}</td>
39+
<td className="px-5 py-4 text-[#536079]">{row.strongestPillar}</td>
40+
<td className="px-5 py-4 text-[#536079]">{row.weakestPillar}</td>
41+
<td className="px-5 py-4 text-[#536079]">{row.bestChannel}</td>
42+
<td className="px-5 py-4 text-[#536079]">{row.evidenceGap}</td>
4343
</tr>
4444
))}
4545
</tbody>

‎src/components/history/SavedReports.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,27 @@ type SavedReportsProps = {
66

77
export function SavedReports({ snapshots }: SavedReportsProps) {
88
return (
9-
<section className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
10-
<h2 className="text-base font-semibold text-slate-950">Saved reports</h2>
9+
<section className="rounded-lg border border-[#e5e0d8] bg-white p-5 shadow-sm">
10+
<h2 className="text-xl font-bold text-[#1f2933]">Saved reports</h2>
1111
{snapshots.length === 0 ? (
12-
<p className="mt-3 text-sm leading-5 text-slate-600">
13-
Lock a query bundle to save a local report snapshot.
12+
<p className="mt-3 text-sm leading-5 text-[#536079]">
13+
Begin a Compass analysis to save a local report snapshot.
1414
</p>
1515
) : (
1616
<div className="mt-4 space-y-3">
1717
{snapshots.map((snapshot) => (
18-
<div key={snapshot.id} className="rounded-lg border border-slate-100 p-3">
18+
<div key={snapshot.id} className="rounded-lg border border-[#e5e0d8] p-3">
1919
<div className="flex items-start justify-between gap-3">
2020
<div>
21-
<p className="font-medium text-slate-950">{snapshot.ideaName}</p>
22-
<p className="mt-1 text-xs text-slate-500">{snapshot.lens}</p>
21+
<p className="font-semibold text-[#1f2933]">{snapshot.ideaName}</p>
22+
<p className="mt-1 text-xs text-[#536079]">{snapshot.lens}</p>
2323
</div>
2424
<div className="text-right">
25-
<p className="font-semibold text-slate-950">{snapshot.score}</p>
26-
<p className="text-xs text-slate-500">{snapshot.confidence}</p>
25+
<p className="font-bold text-[#1f2933]">{snapshot.score}</p>
26+
<p className="text-xs text-[#536079]">{snapshot.confidence}</p>
2727
</div>
2828
</div>
29-
<p className="mt-2 text-xs text-slate-500">
29+
<p className="mt-2 text-xs text-[#536079]">
3030
Range {snapshot.range} · {new Date(snapshot.generatedAt).toLocaleString()}
3131
</p>
3232
</div>

0 commit comments

Comments
 (0)