groove-dev 0.17.3 → 0.17.5

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.
@@ -4,7 +4,7 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>GROOVE</title>
7
- <script type="module" crossorigin src="/assets/index-DXy6tMX5.js"></script>
7
+ <script type="module" crossorigin src="/assets/index-DYqJ7W7j.js"></script>
8
8
  <link rel="stylesheet" crossorigin href="/assets/index-BhjOFLBc.css">
9
9
  </head>
10
10
  <body>
@@ -369,6 +369,10 @@ function CredentialModal({ integration, onClose }) {
369
369
  function IntegrationDetailModal({ integration, installing, onInstall, onUninstall, onConfigure, onClose }) {
370
370
  if (!integration) return null;
371
371
 
372
+ const isAutoAuth = integration.authType === 'none' && (integration.envKeys || []).length === 0;
373
+ const hasCredentials = (integration.envKeys || []).filter((ek) => !ek.hidden).length > 0
374
+ || integration.authType === 'oauth-google';
375
+
372
376
  return (
373
377
  <div style={modal.overlay} onClick={onClose}>
374
378
  <div style={modal.container} onClick={(e) => e.stopPropagation()}>
@@ -402,13 +406,14 @@ function IntegrationDetailModal({ integration, installing, onInstall, onUninstal
402
406
  <div style={modal.actionBar}>
403
407
  {integration.installed ? (
404
408
  <div style={{ display: 'flex', gap: 8, flex: 1 }}>
405
- <button
406
- onClick={() => onConfigure(integration)}
407
- style={modal.configureBtn}
408
- disabled={(integration.envKeys || []).length === 0}
409
- >
410
- {integration.configured ? 'Reconfigure' : 'Configure'}
411
- </button>
409
+ {hasCredentials && (
410
+ <button
411
+ onClick={() => onConfigure(integration)}
412
+ style={modal.configureBtn}
413
+ >
414
+ {integration.configured ? 'Reconfigure' : 'Configure'}
415
+ </button>
416
+ )}
412
417
  <button
413
418
  onClick={() => onUninstall(integration.id)}
414
419
  disabled={installing === integration.id}
@@ -435,15 +440,22 @@ function IntegrationDetailModal({ integration, installing, onInstall, onUninstal
435
440
  <div style={{
436
441
  display: 'flex', alignItems: 'center', gap: 8,
437
442
  padding: '8px 12px', borderRadius: 6,
438
- background: integration.configured ? 'rgba(74, 225, 104, 0.06)' : 'rgba(229, 192, 123, 0.06)',
439
- border: `1px solid ${integration.configured ? 'var(--green)' : 'var(--amber)'}`,
443
+ background: isAutoAuth
444
+ ? 'rgba(97, 175, 239, 0.06)'
445
+ : integration.configured ? 'rgba(74, 225, 104, 0.06)' : 'rgba(229, 192, 123, 0.06)',
446
+ border: `1px solid ${isAutoAuth ? 'var(--blue)' : integration.configured ? 'var(--green)' : 'var(--amber)'}`,
440
447
  }}>
441
448
  <span style={{
442
449
  width: 8, height: 8, borderRadius: '50%',
443
- background: integration.configured ? 'var(--green)' : 'var(--amber)',
450
+ background: isAutoAuth ? 'var(--blue)' : integration.configured ? 'var(--green)' : 'var(--amber)',
444
451
  }} />
445
- <span style={{ fontSize: 11, color: integration.configured ? 'var(--green)' : 'var(--amber)' }}>
446
- {integration.configured ? 'Connected and ready' : 'Credentials needed'}
452
+ <span style={{
453
+ fontSize: 11,
454
+ color: isAutoAuth ? 'var(--blue)' : integration.configured ? 'var(--green)' : 'var(--amber)',
455
+ }}>
456
+ {isAutoAuth
457
+ ? 'Installed — will sign in automatically on first use'
458
+ : integration.configured ? 'Connected and ready' : 'Credentials needed'}
447
459
  </span>
448
460
  </div>
449
461
  </div>
@@ -544,10 +556,13 @@ function FeaturedBanner({ integrations, onSelect }) {
544
556
  </div>
545
557
  <div style={styles.featuredDesc}>{item.description}</div>
546
558
  </div>
547
- {item.installed && item.configured && (
559
+ {item.installed && item.authType !== 'none' && item.configured && (
548
560
  <div style={styles.connectedBadge}>connected</div>
549
561
  )}
550
- {item.installed && !item.configured && (
562
+ {item.installed && item.authType === 'none' && (
563
+ <div style={styles.installedBadge}>installed</div>
564
+ )}
565
+ {item.installed && !item.configured && item.authType !== 'none' && (
551
566
  <div style={styles.setupBadge}>needs setup</div>
552
567
  )}
553
568
  </div>
@@ -566,8 +581,9 @@ function IntegrationCard({ item, onSelect, hovered, onHover }) {
566
581
  onMouseLeave={() => onHover(null)}
567
582
  style={{
568
583
  ...styles.card,
569
- borderColor: item.installed && item.configured
570
- ? 'var(--green)'
584
+ borderColor: item.installed && item.authType === 'none'
585
+ ? 'var(--blue)'
586
+ : item.installed && item.configured ? 'var(--green)'
571
587
  : item.installed ? 'var(--amber)'
572
588
  : hovered ? 'var(--accent)' : 'var(--border)',
573
589
  background: hovered ? 'var(--bg-hover)' : 'var(--bg-surface)',
@@ -578,8 +594,9 @@ function IntegrationCard({ item, onSelect, hovered, onHover }) {
578
594
  <div style={styles.cardTop}>
579
595
  <div style={{
580
596
  ...styles.cardIcon,
581
- background: item.installed && item.configured
582
- ? 'var(--green)'
597
+ background: item.installed && item.authType === 'none'
598
+ ? 'var(--blue)'
599
+ : item.installed && item.configured ? 'var(--green)'
583
600
  : item.installed ? 'var(--amber)' : 'var(--accent)',
584
601
  }}>
585
602
  {ICON_MAP[item.icon] || item.name.charAt(0)}
@@ -590,10 +607,13 @@ function IntegrationCard({ item, onSelect, hovered, onHover }) {
590
607
  <VerifiedBadge item={item} />
591
608
  </div>
592
609
  </div>
593
- {item.installed && item.configured && (
610
+ {item.installed && item.configured && item.authType !== 'none' && (
594
611
  <div style={styles.connectedBadgeSm}>connected</div>
595
612
  )}
596
- {item.installed && !item.configured && (
613
+ {item.installed && item.authType === 'none' && (
614
+ <div style={styles.installedBadgeSm}>installed</div>
615
+ )}
616
+ {item.installed && !item.configured && item.authType !== 'none' && (
597
617
  <div style={styles.setupBadgeSm}>setup</div>
598
618
  )}
599
619
  {!item.installed && (
@@ -962,6 +982,12 @@ const styles = {
962
982
  border: '1px solid var(--green)', borderRadius: 3,
963
983
  padding: '1px 5px', textTransform: 'uppercase', letterSpacing: 0.5,
964
984
  },
985
+ installedBadge: {
986
+ position: 'absolute', top: 8, right: 8,
987
+ fontSize: 8, fontWeight: 600, color: 'var(--blue)',
988
+ border: '1px solid var(--blue)', borderRadius: 3,
989
+ padding: '1px 5px', textTransform: 'uppercase', letterSpacing: 0.5,
990
+ },
965
991
  setupBadge: {
966
992
  position: 'absolute', top: 8, right: 8,
967
993
  fontSize: 8, fontWeight: 600, color: 'var(--amber)',
@@ -1011,6 +1037,12 @@ const styles = {
1011
1037
  padding: '1px 6px', textTransform: 'uppercase', letterSpacing: 0.5,
1012
1038
  flexShrink: 0,
1013
1039
  },
1040
+ installedBadgeSm: {
1041
+ fontSize: 8, fontWeight: 600, color: 'var(--blue)',
1042
+ border: '1px solid var(--blue)', borderRadius: 3,
1043
+ padding: '1px 6px', textTransform: 'uppercase', letterSpacing: 0.5,
1044
+ flexShrink: 0,
1045
+ },
1014
1046
  setupBadgeSm: {
1015
1047
  fontSize: 8, fontWeight: 600, color: 'var(--amber)',
1016
1048
  border: '1px solid var(--amber)', borderRadius: 3,