crushdataai 1.2.6 → 1.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "crushdataai",
3
- "version": "1.2.6",
3
+ "version": "1.2.7",
4
4
  "description": "CLI to install CrushData AI data analyst skill for AI coding assistants",
5
5
  "main": "dist/index.js",
6
6
  "bin": {
@@ -48,4 +48,4 @@
48
48
  "type": "git",
49
49
  "url": "git+https://github.com/SankaiAI/crushdataai-agent.git"
50
50
  }
51
- }
51
+ }
package/ui/index.html CHANGED
@@ -54,13 +54,6 @@
54
54
  </svg>
55
55
  <h3>No data source selected</h3>
56
56
  <p>Select a connection from the sidebar or add a new one</p>
57
- <button class="btn" id="add-first-btn">
58
- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
59
- <line x1="12" y1="5" x2="12" y2="19" />
60
- <line x1="5" y1="12" x2="19" y2="12" />
61
- </svg>
62
- Add Data Source
63
- </button>
64
57
  </div>
65
58
 
66
59
  <!-- Connection Details (shown when selected) -->
package/ui/main.js CHANGED
@@ -258,7 +258,6 @@ function closeModal() {
258
258
  }
259
259
 
260
260
  document.getElementById('add-connection-btn').addEventListener('click', openModal);
261
- document.getElementById('add-first-btn').addEventListener('click', openModal);
262
261
  document.getElementById('modal-close').addEventListener('click', closeModal);
263
262
  document.getElementById('modal-overlay').addEventListener('click', (e) => {
264
263
  if (e.target.id === 'modal-overlay') closeModal();
package/ui/styles.css CHANGED
@@ -1,15 +1,31 @@
1
1
  :root {
2
- --primary: #8B5CF6;
3
- --primary-dark: #7C3AED;
2
+ /* Crushdataai brand palette - matching landing page */
3
+ --primary: #7C3AED;
4
+ --primary-dark: #6D28D9;
4
5
  --primary-light: #A78BFA;
5
- --bg: #F8FAFC;
6
- --sidebar-bg: #FFFFFF;
6
+ --primary-glow: rgba(124, 58, 237, 0.12);
7
+
8
+ /* Refined backgrounds */
9
+ --bg: #FAFAFB;
7
10
  --card: #FFFFFF;
8
- --border: #E2E8F0;
9
- --border-light: #F1F5F9;
10
- --text: #1E293B;
11
- --text-muted: #64748B;
12
- --text-light: #94A3B8;
11
+ --border: #E5E7EB;
12
+ --border-light: #F3F4F6;
13
+
14
+ /* Brand-matched dark sidebar */
15
+ --sidebar-bg: linear-gradient(180deg, #1F1F3D 0%, #171728 100%);
16
+ --sidebar-surface: rgba(255, 255, 255, 0.05);
17
+ --sidebar-hover: rgba(255, 255, 255, 0.08);
18
+ --sidebar-active: rgba(124, 58, 237, 0.25);
19
+ --sidebar-text: #F8FAFC;
20
+ --sidebar-text-muted: #A1A1AA;
21
+ --sidebar-border: rgba(255, 255, 255, 0.08);
22
+
23
+ /* Text colors */
24
+ --text: #18181B;
25
+ --text-muted: #71717A;
26
+ --text-light: #A1A1AA;
27
+
28
+ /* Status colors */
13
29
  --success: #10B981;
14
30
  --error: #EF4444;
15
31
  --warning: #F59E0B;
@@ -33,18 +49,19 @@ body {
33
49
  .sidebar {
34
50
  width: 280px;
35
51
  background: var(--sidebar-bg);
36
- border-right: 1px solid var(--border);
52
+ border-right: 1px solid var(--sidebar-border);
37
53
  display: flex;
38
54
  flex-direction: column;
39
55
  height: 100vh;
40
56
  position: fixed;
41
57
  left: 0;
42
58
  top: 0;
59
+ box-shadow: 4px 0 32px rgba(0, 0, 0, 0.15);
43
60
  }
44
61
 
45
62
  .sidebar-header {
46
63
  padding: 1.25rem;
47
- border-bottom: 1px solid var(--border);
64
+ border-bottom: 1px solid var(--sidebar-border);
48
65
  }
49
66
 
50
67
  .logo {
@@ -61,6 +78,7 @@ body {
61
78
  display: flex;
62
79
  align-items: center;
63
80
  justify-content: center;
81
+ box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
64
82
  }
65
83
 
66
84
  .logo-icon svg {
@@ -72,10 +90,11 @@ body {
72
90
  .logo-text {
73
91
  font-size: 1.1rem;
74
92
  font-weight: 700;
93
+ color: var(--sidebar-text);
75
94
  }
76
95
 
77
96
  .logo-text span {
78
- background: linear-gradient(135deg, var(--primary), #EC4899);
97
+ background: linear-gradient(135deg, var(--primary-light), #F472B6);
79
98
  -webkit-background-clip: text;
80
99
  background-clip: text;
81
100
  -webkit-text-fill-color: transparent;
@@ -91,8 +110,8 @@ body {
91
110
  font-size: 0.7rem;
92
111
  font-weight: 600;
93
112
  text-transform: uppercase;
94
- letter-spacing: 0.05em;
95
- color: var(--text-light);
113
+ letter-spacing: 0.08em;
114
+ color: var(--sidebar-text-muted);
96
115
  margin-bottom: 0.75rem;
97
116
  padding: 0 0.5rem;
98
117
  }
@@ -108,24 +127,25 @@ body {
108
127
  padding: 0.625rem 0.75rem;
109
128
  border-radius: 8px;
110
129
  cursor: pointer;
111
- transition: all 0.15s;
130
+ transition: all 0.2s ease;
112
131
  margin-bottom: 0.25rem;
132
+ color: var(--sidebar-text);
113
133
  }
114
134
 
115
135
  .connection-item:hover {
116
- background: var(--border-light);
136
+ background: var(--sidebar-hover);
117
137
  }
118
138
 
119
139
  .connection-item.active {
120
- background: rgba(139, 92, 246, 0.1);
121
- color: var(--primary);
140
+ background: var(--sidebar-active);
141
+ color: var(--primary-light);
122
142
  }
123
143
 
124
144
  .connection-item .icon {
125
145
  font-size: 1.25rem;
126
146
  width: 32px;
127
147
  height: 32px;
128
- background: var(--border-light);
148
+ background: var(--sidebar-hover);
129
149
  border-radius: 6px;
130
150
  display: flex;
131
151
  align-items: center;
@@ -133,7 +153,7 @@ body {
133
153
  }
134
154
 
135
155
  .connection-item.active .icon {
136
- background: rgba(139, 92, 246, 0.15);
156
+ background: var(--primary-glow);
137
157
  }
138
158
 
139
159
  .connection-item .info {
@@ -151,7 +171,7 @@ body {
151
171
 
152
172
  .connection-item .type {
153
173
  font-size: 0.75rem;
154
- color: var(--text-muted);
174
+ color: var(--sidebar-text-muted);
155
175
  }
156
176
 
157
177
  .connection-item .status {
@@ -168,19 +188,19 @@ body {
168
188
  width: 100%;
169
189
  padding: 0.625rem 0.75rem;
170
190
  background: transparent;
171
- border: 1px dashed var(--border);
191
+ border: 1px dashed var(--sidebar-text-muted);
172
192
  border-radius: 8px;
173
- color: var(--text-muted);
193
+ color: var(--sidebar-text-muted);
174
194
  font-size: 0.875rem;
175
195
  cursor: pointer;
176
- transition: all 0.15s;
196
+ transition: all 0.2s ease;
177
197
  margin-top: 0.5rem;
178
198
  }
179
199
 
180
200
  .add-connection-btn:hover {
181
- border-color: var(--primary);
182
- color: var(--primary);
183
- background: rgba(139, 92, 246, 0.05);
201
+ border-color: var(--primary-light);
202
+ color: var(--primary-light);
203
+ background: var(--primary-glow);
184
204
  }
185
205
 
186
206
  /* Main Content */
@@ -196,6 +216,15 @@ body {
196
216
  /* Prevents flex item from overflowing */
197
217
  }
198
218
 
219
+ /* Centered empty state wrapper */
220
+ .main>.empty-state {
221
+ flex: 1;
222
+ display: flex;
223
+ flex-direction: column;
224
+ align-items: center;
225
+ justify-content: center;
226
+ }
227
+
199
228
  .main-header {
200
229
  display: flex;
201
230
  justify-content: space-between;
@@ -325,14 +354,15 @@ body {
325
354
  }
326
355
 
327
356
  .empty-state svg {
328
- width: 64px;
329
- height: 64px;
330
- margin-bottom: 1rem;
331
- opacity: 0.4;
357
+ width: 80px;
358
+ height: 80px;
359
+ margin-bottom: 1.5rem;
360
+ opacity: 0.3;
361
+ stroke: var(--primary);
332
362
  }
333
363
 
334
364
  .empty-state h3 {
335
- font-size: 1rem;
365
+ font-size: 1.25rem;
336
366
  font-weight: 600;
337
367
  color: var(--text);
338
368
  margin-bottom: 0.5rem;
@@ -341,6 +371,7 @@ body {
341
371
  .empty-state p {
342
372
  font-size: 0.875rem;
343
373
  margin-bottom: 1.5rem;
374
+ max-width: 320px;
344
375
  }
345
376
 
346
377
  /* Buttons */
@@ -354,15 +385,22 @@ body {
354
385
  font-weight: 500;
355
386
  font-family: inherit;
356
387
  cursor: pointer;
357
- transition: all 0.2s;
388
+ transition: all 0.2s ease;
358
389
  display: inline-flex;
359
390
  align-items: center;
360
391
  gap: 0.5rem;
392
+ box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
361
393
  }
362
394
 
363
395
  .btn:hover {
364
- transform: translateY(-1px);
365
- box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
396
+ transform: translateY(-2px);
397
+ box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
398
+ }
399
+
400
+ /* Empty state button - smaller */
401
+ .empty-state .btn {
402
+ padding: 0.5rem 1rem !important;
403
+ font-size: 0.8125rem !important;
366
404
  }
367
405
 
368
406
  .btn-secondary {