C_COMMUTE.exe

STATUS: {isMultiplayer ? 'CONNECTED_TO_MAINFRAME' : 'LOCAL_MODE'}

📡 CREW_ROSTER ({(memberList || []).length})

{(memberList || []).map(m => (

m.handle && openProfile(m.handle)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, minWidth: 56, cursor: m.handle ? 'pointer' : 'default' }}>

{m.avatarUrl || m.profileImageUrl ?

: 👤}

{m.displayName || m.name || 'Anon'}

))}

{(sortedRules || []).map(rule => { const myVote = rule.voters?.[user?.id] || 0; const isAnimatingUp = animatingVoteId?.id === rule.id && animatingVoteId?.type === 'up'; const isAnimatingDown = animatingVoteId?.id === rule.id && animatingVoteId?.type === 'down'; return (

{rule.isDemo && (

DEMO_DATA

)}

0 ? colors.cyan : (rule.votes < 0 ? colors.pink : colors.text), textShadow: `0 0 5px ${rule.votes > 0 ? colors.cyan : (rule.votes < 0 ? colors.pink : 'transparent')}` }}> {rule.votes}

{rule.text}

{rule.categories?.map(cat => ( {cat} ))}

{rule.location && ( 📍 {rule.location} )} rule._user?.handle ? openProfile(rule._user.handle) : null} style={{ cursor: rule._user?.handle ? 'pointer' : 'default', opacity: 0.8, display: 'flex', alignItems: 'center', gap: 4 }} > {rule._user?.profileImageUrl ?

: '👤'} {rule._user?.displayName || 'Anon'}

{rule.audioAssetId && ( )}

); })}

{showAddModal && (

ADD_INTEL

setNewRuleText(e.target.value)}
              style={{ ...styles.input, minHeight: 100, resize: 'none' }}
            />

<div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
              <input 
                placeholder="Location (e.g. Science Library)"
                value={newRuleLocation}
                onChange={e => setNewRuleLocation(e.target.value)}
                style={{ ...styles.input, marginBottom: 0, flex: 1 }}
              />
              {typeof getCurrentLocation === 'function' && (
                <button 
                  onClick={handleGetLocation}
                  style={{ background: colors.cardBg, border: `1px solid ${colors.cyan}`, color: colors.cyan, padding: '0 12px', borderRadius: 8 }}
                >
                  {isLocating ? '⏳' : '📍 GPS'}
                </button>
              )}
            </div>

{typeof pickAndUploadAudio === 'function' && (
              <button 
                onClick={handleRecordAudio}
                style={{ 
                  width: '100%', 
                  padding: 12, 
                  background: newRuleAudioId ? `${colors.cyan}33` : colors.cardBg, 
                  border: `1px dashed ${newRuleAudioId ? colors.cyan : colors.pink}`, 
                  color: newRuleAudioId ? colors.cyan : colors.pink,
                  borderRadius: 8,
                  marginBottom: 12
                }}
              >
                {isRecording ? '🎙️ RECORDING...' : newRuleAudioId ? '✅ AUDIO_ATTACHED' : '🎙️ ATTACH_VOICE_MEMO'}
              </button>
            )}

<button 
              onClick={handleSubmit}
              disabled={isSubmitting || !newRuleText.trim()}
              style={styles.submitBtn}
            >
              {isSubmitting ? 'UPLOADING_TO_MAINFRAME...' : 'SUBMIT_RULE'}
            </button>

{isSubmitting && (
              <div style={{ textAlign: 'center', marginTop: 12, color: colors.cyan, fontSize: 12 }}>
                <span className="blink">✨ AI_ORACLE CATEGORIZING... ✨</span>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}</article></body></html>